Why quantitative and qualitative research needs to run together?

As a UX designer, I am in love with metrics this whole idea that we can just use data for anything and A/B tests is the best way to a great product. I think it’s just one of the worst aspects of the rise of this worship of data. Lots of teams think that quantitative data can solve all of their product problems. 

Only 24% UX professionals are reported using quantitative AND qualitative data to determine success

NN Group “Quant Qual Research in Practice survey with 429 participants”

Quantitative data doesn’t replace designers or design or replace listening to the users and it doesn’t tell us what we should be building. It gives us another channel for getting feedback from the users, but the information that data gives us isn’t the same as what we’re getting from connecting with actual human beings who are using our product. It only gives us information about what we have built.

  • Data doesn’t replace design or designers
  • Data doesn’t replace listening to the users
  • Data doesn’t tell us what we should be building

Quantitative data can help inform our design decisions, it doesn’t replace designer, but it gives us important feedback on the product decisions that we’ve made and understand whether our decisions helped or hurt user behaviour. Data can tell us whether we’re going in the right direction and it can also help us inform our research and tell us what we should be investigating.

Example:

We are going to use a checkout process funnel as our example, in this process users sign up for mobile plans. Everything you pour on top of the funnel comes out from the bottom that’s how funnels work. We are losing a certain percentage of the users who started right from the top and from each step users are dropping out. For every 100 users that are going through this funnel only 19 users are successfully getting through in other words you’re acquiring users through some means probably with google ads or getting customer referrals or any other expensive channels.

If you look at our checkout process, we are losing more users in some steps than others like specifically on payment information screen step looks poor, we are losing 38 users out of every 100, so that’s what we call a friction point. By looking at these numbers most of the teams immediately will start working on the ways of fixing the payment information screen. Some team members or stakeholders will suggest, “maybe we need to add new payment methods” or “may be it’s really confusing for user see the credit card type dropdown” or “maybe the user needs to feel secure and we should put a big lock on the page” or “may be we should try doing all of those things and then just see if a problem gets fixed”. Now at this point you should immediately stop thinking about solution. You are effectively trying to use quantitative information for something that it does not do you’re trying to use it to explain rather than to describe. If you really want to understand that friction point you need to do two things you need to describe it right and you need to say this is what is happening in the process that’s where the metrics and analytics are useful and using qualitative research you need to explain why it’s happening.

What we should be doing?

  • Step 1 Identify the biggest problem by using funnel metrics
  • Step 2 Understand WHY with observational usability testing
  • Step 3 Propose solution – Create solution hypotheses
  • Step 4 Learn and iterate

In our example, we can see payment information step in our check out process is the biggest problem. We understand that we are losing a lot of users but we still don’t know why it’s a problem. Observational usability testing technique can be used to understand why are we losing users on the payment information step. Observational usability testing is watching users use your product to understand all the pain they are facing and where they are getting stuck. Usually, this exercise is run with between 4 to 6 users. Now in our example by running usability testing, we came up with these sort of observations:

  • Some of the users didn’t have the payment information handy
  • All the users were confused with the box for promo code and sort of wandered off to look for a discount coupon

The first step in making a product change is to create several solution hypotheses because we need to test to see if the change was successful. In order to test to see if proposed changes are successful, we have to define what both success and failure look like. You should list all the possible negative consequences of the change as well as the positive ones. By listing these possible negative and positive consequences, you can evaluate later, which changes worked and which didn’t. We can use these steps to identify a new problem by looking at our quantitative data and try to fix it. We should keep iterating until we are consistently happy with the numbers that we’re seeing in the funnel.

Summary

There are lots of other ways to combine qualitative and quantitative data. The combinations are endless, you can start with qualitative research and identify user needs through user interviews or you can spot different patterns and very large sets of data or you can start with the usability test. It also depends on time, budget and resources available.

The struggle for meaning – Is the Intranet dead?

People struggle to find meaning in life. Our place in the world. The value we provide. Our political persuasions allow us to either rethink definitions or preserve our traditions & institutions. Funnily enough, this philosophical divide plays out in technology all the time.

The morbid question – Is the intranet dead? – seems to be popping its head up recently. I get it, the world is evolving, our expectations of ‘digital’ has changed and technology is at a point where it’s no longer a barrier to seizing opportunity.

Socialists would argue the traditional Intranet is dead or at least facing an identity crisis. The word shouldn’t be used or should significantly be redefined to reflect modern times.

Conservatives would argue there is no crisis, the Intranet is fine as is and should not change its definition. Doing so will shake the digital foundations of any modern enterprise.

It all comes back to meaning; what do we mean when we say Intranet?

The Google Definition:
“a local or restricted communications network, especially a private network created using World Wide Web software.”

Definition sets the baseline. It helps us see understand if any change is required. Here are some insights from the definition. 

Local or restricted

The core here is identity. Identity brings utility. Identity powers relevance. Who should have access? What content should they see? Access is historically defined by organisational boundaries i.e. All staff should have access, but not contractors or service providers.

Gone are the days when the intranet didn’t know who you are.

Communication + Network

The foundations of an intranet.  Communication is arguably the most important aspect. It’s evidenced by Corporate Communications teams having ownership and being influential when it comes to decision making. It’s viewed as the primary communications network as it’s available to everyone. It’s there when you login. It’s there when you open your browser.

Metcalf’s law is relevant here. The value of the system is proportional to the square-root of connections. Meaning – the more systems, people & content a person is connected to, the higher the value. Pre API-Revolution, meaningful integration was but a dream. We are now seeing the value of APIs – Data is the digital currency which flows through APIs.

Intranets need to become more networked. More connected. More relevant.

Others insights

  • It does not limit how it’s consumed –  It doesn’t specify browser, device, time or even place.
  • It limits how its created – Only World Wide Web software? So 2000. Conceptually this type of software is used, but its not limited to it.
  • It doesn’t limit evolution: My favourite. It shouldn’t be left to deteriorate whilst others evolve.
  • It doesn’t encapsulate trends: These days we hear about intelligence, digital workplace, responsive, <insert buzz word here> 
  • It doesn’t limit ownership; What are the roles & responsibilities of each group involved? What’s the hierarchy & decision-making process?

So…?

I favour evolution, not revolution. Definitions need to strike the right balance between ambiguity and being too explicit.  We can’t lose sight of the core – Communications, Network & Identity.  I do think we should drop the WWW part. Here’s the new definition: 

“a local or restricted communications network, especially a private network”

Beyond the Intranet? 

You may think it’s a boring adjustment. To me it provides the right amount of ambiguity that allows companies to give meaning to their intranet, keep a close eye on trends and deliver something that helps people be a valued part of the network. 

At its core the intranet is not dead. We have evolved the meaning as technology has enabled different opportunities. These trends are just ways of delivering the core definition in more eccentric ways.

Perhaps a new label is required? Digital Workplace? Digital Front door? Modern Workplace? Label it what you will, the definition is still the same. 

How to get started –5 Step’s to sustained success

So how do you delivery something? Process is important as it ensures focus. These 5 steps are what I typically. I’ll do a follow up blog on this process. 

  1. Define ownership, roles & responsibilities
  2. Define meaning & Scope: focus on evolution
  3. Select your platform
  4. Build for Day 1
  5. Analyse, Sustain & Evolve

-Con
con.efesssopoulos@kloud.com.au

A Lean Approach to UX design – ASOS case study – Part 1 of 2

The double diamond seems to be a popular method of approaching design thinking for most UX designers. Discover, Define, Develop, Deliver. But often clients and stakeholders start to run for the hills when they realise that the discover phase involves time consuming user research, research that the client believes they don’t need to do because “they already know their users”. A lean approach to user experience design may be an easier way to sell design thinking to a client as it involves starting with assumptions and creating hypothesis that may solve a problem, then testing these hypotheses with real users in a short time frame. I find this to be a better starting point with clients as it saves time and engages them more from the beginning of the project, making the design process more transparent.

Just in-case that first paragraph made no sense to you, don’t worry. I find the best way of learning is by seeing an example. I decided to adopt a lean approach to a little challenge given to me – improve the ASOS app in order to increase conversion rates.

First Step: Declaring Assumptions

Problem Statement

Before diving into assumptions there needs to be a clear problem statement. I treated my challenge as the problem statement – improve the ASOS app in order to increase conversion rates. Probably not worded the best. Problem statements should follow a more structured format addressing the criteria below

[Our service/product] was designed to achieve [these goals]. We have observed that the product/service isn’t meeting [these goals], which is causing [this adverse effect] to our business. How might we improve [service/product] so that our customers are more successful based on [these measurable criteria]?

Lean UX, O’Reilly

As this is a hypothetical I can’t say I know the goals of the ASOS app, but I can take a good guess based on a quick google search and their press releases.

“Our core customer is the twenty-something fashion-lover: an avid consumer and communicator who is inspired by friends, celebrities and the media.”

From this I created a more fleshed out problem statement: The ASOS app was designed to be the favoured place for twenty-something fashion lovers to be inspired by fashion and buy clothes. The ASOS app isn’t meeting these goals which is causing a stagnation in sales and profit loss to our business. How might we improve the ASOS app so that our customers will want to buy more clothes and follow through with sales.

Proto-Personas

Once you have a clear problem statement it’s time to capture the audience you are focusing on. Proto-personas are an archetype of key users you will be focusing on, however a proto-persona is different to a regular persona as it is purely based on assumptions which you will later validate. As I did not have access to the ASOS team my assumptions were based on a few press releases and previous case studies on ASOS. From that I created one Proto-persona.

In a client setting this is a good in 2 ways. Firstly, you are getting them to think about their users. Secondly, it’s a quick and dirty way to get their current knowledge on their users.

Hypothesis Statement

Now that I have a primary persona (in most cases you’d have more than one) I could come up with ideas on how I might address their pain points. I had a look at the current ASOS app, did a quick heuristic evaluation, looked at what competitors did, and apps such as Pinterest that had features that could potentially address some pain points. From that I came up with the following hypotheses using the following template:

I believe that We will achieve [business outcome] if the user [persona] can achieve [user outcome] with this feature [feature]

Second Step: Testing my assumptions

I then wanted to test these assumptions with real users by sending out a quick survey which got 20 respondents, 5 user interviews and 1 guerrilla test of the current ASOS app. From this I gathered the data into themes (affinity mapping) and got the following insights

From this quick research, which only took a couple of days, I updated my proto-persona and re- prioritised my hypotheses based on the pain points that both would critically affect the business and users.

The key point I am trying to make is that proto-personas and hypotheses are fluid artefacts, they are not set in stone and the beauty of a lean approach is to constantly validate and update your assumptions. It’s also a good way of quickly getting the client to see the benefit of a design thinking approach in a ‘sneak peak’ way. Once they start to see the benefits of what a bit of research and user input can have they may be more inclined to invest more in a human centred design approach in the future.

In my next blog I’ll be going through the prototype I made based on these insights and how I iterated its design based on testing it with only 5 users.

User Psychology and Experience

Often times when designing a product or solution for a customer, in planning and concept development, we might consider the user experience to be one of two (or both) things:

  1. User feedback regarding their interaction with their technological environment/platforms
  2. The experience the user is likely to have with given technology based on various factors that contribute to delivering that technology to them; presentation, training, accessibility, necessity, intuitiveness, just to name a few.

These factors are not solely focused on the user and their role in the human – technology interaction process, but also their experience of dealing with us as solution providers. That is to say, the way in which we engage the experience and behaviour of the user is just as important to the delivery of new technology to them, as is developing our own understanding of a broader sense of human interfacing technology behaviour. UX is a colourful – pun intended – profession/skill to have within this industry. Sales pitches, demos and generally ‘wowing the crowd’ are a few of the ways in which UX-ers can deploy their unique set of skills to curve user behaviour and responsiveness in a positive direction, for the supplier especially.

Not all behavioural considerations with regards to technology are underpinned by the needs or requirements of a user, however. There are more general patterns of behaviour and characteristics within people, particularly in a working environment, that can be observed, to indicate how a user experiences [new] technology, including functionality and valued content that, at a base level, captures a user’s attention. The psychology of this attention can be broken down into a simplified pathology: the working mechanisms of perception as a reaction to stimulus, and how consistent the behaviour is that develops out of this. The stimulus mentioned are usually the most common ones when relating to technology; visual, auditory.

You’ve likely heard of, or experienced first-hand, the common types of attention in everyday life. The main three are identified as selective, divided and undivided. Through consistency of behavourial outcomes, or observing in a use case a consistent reaction to stimuli, we look to observe a ‘sustainability of attention or interest’ over an extended period of the time, even if repetition of an activity or a set of activities is involved. This means that the solution, or at very least, the awareness and training developed to sell a solution, should serve a goal of achieving sustainable attention.

How Can We Derive a Positive User Experience through Psychology?

Too much information equals lack of cognitive intake. From observation and general experience, a person’s attention, especially when captured within a session, a day or week, is a finite resource. Many other factors of an individual’s life can create a cocktail of emotions which makes people in general, unpredictable in a professional environment. The right amount of information, training and direct experience should be segmented based on a gauge of the audience’s attention. Including reflection exercises or on-the-spot feedback, especially in user training can give you a good measure of this. The mistake of cognitively overloading the user can be best seen when a series of options are present as viable routes to the desired solution or outcome. Too many options can, at worst, create confusion, an adversity to the solution and new technologies in general, and an overall messy user experience.

Psychology doesn’t have to be a full submersion into the human psyche, especially when it comes to understanding the user experience. Simple empathy can be a powerful tool to mitigate some of the aforementioned issues of attention and to prevent the cultivation of repeated adverse behaviour from users. When it boils down to the users, most scenarios in the way of behaviour and reaction have been seen and experienced before, irrespective of the technology being provided. Fundamentally, it is a human experience that [still] comes first before we look at bridging the user and the technology. For UX practitioners, tools are already in-place to achieve this such as user journey maps and story capturing,

There are new ideas still emerging around the discipline of user experience, ‘UX’. From my experience with it thus far, it presents a case that it could integrate very well with modern business analysis methodologies. It’s more than designing the solution, it’s solutions based on how we, the human element, are designed.

Squeezing the Design Process into an Agile world – a real world story

You’ve just been assigned to your first project. It’s to build a product. You’re excited and nervous at the same time, you think – “finally a project I can sink my teeth into, I can adopt design thinking, do my user research, find user pain points with the client and come up with a killer design that everyone loves and I’ll be the new star of my organisation”

You walk into your client’s office, and meet the “scrum master” what’s that again? You think. Oh yeah – this is one of those Agile projects. That’s cool, you think, as you quickly rummage through your notes from class and try to remember all the lingo, like product backlog, sprints, scrums, features, user stories, epics…hang on where do I fit into all this? Nevermind, I have to rush to my first scrum meeting.

Everyone is standing around a wall of post-it notes. Post-it notes! A UX designers’ best friend. I’m home. Wait a minute. They’re all saying a bunch of things I don’t understand and turns out we are already half way through the project and all the product features have already been decided on by a BA or if you’re lucky enough a previous UX designer that was involved in the ‘discovery phase’.

“Peter – can you make this section stand out a bit more, try a few things and can it be done so we can release it this sprint?” asks the scrum master. “Sure” you reply. Wait a minute, did I just get cornered into making things look pretty. Is this what I signed up to? Why am I making it stand out more?

You take your seat next to a developer after the scrum meeting feeling a bit deflated and introduce yourself. After speaking briefly, you realise he has a very different take on what UX design is and you think to yourself this is going to be a long uphill battle.

Fast forward to the end of your first sprint, you’ve slightly tweaked some features that needed to be finished and helped the dev guys put it into HTML and CSS.  You think you’ve gotten your head around the whole agile way of working, and are beginning to understand things like velocity points. You haven’t exactly gotten to work in the design process, but at least you’re learning how agile works. It’s time for the first ‘show case’ meeting and as it is an internal project you manage to sneak in some guerrilla testing that morning with users by walking around and asking them to have a look at the new features that’s just been released. Generally, they seem to get it, but you do notice a few holes in the design after seeing them struggle to use some features. At least now you can somewhat justify your design decisions and have some ideas for the next sprint.

It’s come time for a ‘retrospective’ and your team mates were nice enough to say that what went well was your onboarding. You personally thought it was a train wreck but at the same time are relieved, they have some trust in your UX abilities, even if you feel you didn’t really do any UX work. It comes time to voice what didn’t go so well, and you say something along the lines of the “the designer should be working on designs a sprint ahead of the dev team” you’re not quite sure if you even understood what you just said. Then the product owner chimes in and says “my boss doesn’t really get the my favourites section”. Finally! A chance to state that users weren’t getting it either. “I could use some of the next sprint to test out the ‘my favourites’ section with users to see where they are struggling and update the designs based on that” you say. “Great! How many points?” she replies. How many points?  How do I answer that? I’ll have to first think of scenarios to test, then test the current product, then update the design based on my findings, then make a prototype, then test again, then update, then…. Oh no they’re looking at me “umm 8 points” you say. “Can the developers work on other backlog items while you’re working on that?” She asks. “Yeah there’s other features to work on in this sprint, we can do that in the first week” replies one of the developers. Ok, so now I have not the whole sprint, but half the sprint to do this. Oh well. Looking back I could have said “how about we leave the development of the newly designed feature till the next sprint while I work on the design this sprint” Experience and a bit of confidence that you will inevitably build will ensure you will say this next time.

And thus, you can see the conundrum that many designers and no doubt, you, will face when working in an agile project.

“Although any sprint can theoretically aim to address design issues, the pressure on designers to not hold up the rest of the development team once normal sprinting has begun is enormous. However, the time needed to explore very complex design decisions could drastically slow down team momentum.”

 

Fitting Big-Picture UX into Agile Development, Smashing Magazine, Nov 6, 2012

I could have written a blog about things like sprint zero, with diagrams demonstrating how a UX designer should be involved in the discovery phase before user stories are created or how a UX designer can work a sprint ahead, but there’s plenty on that. In reality this doesn’t always happen. You may be thrown in mid project, or mid sprint! and it’s going to take time to get to know your team and how they work. The real world is a mess, as is, design. Yes, there is a design process, but as a designer you will realise, that the process isn’t always linear. You’re going back and forth through that double diamond (or whatever dogma you’ve been fed). You sometimes have to make compromises, you sometimes have to wait it out and gradually, hopefully, with your speaking prowess, more user adoption and your passion for design thinking you will convince your agile team mates to start allowing more time for human centred design before and during an agile project. Don’t be disheartened, pick your battles, and remember at the end of the day it’s not a process war, everyone on the team wants to build a great product, it’s how you get there that can get messy – something that design and agile have in common.

Ps – I will include a diagram after all.

messydesign

SharePoint Integration for Health Care eLearning – Moving LMS to the Cloud

Health care systems often face challenges in the way of being unkept and unmaintained or managed by too many without consistency in content and harbouring outdated resources. A lot of these legacy training and development systems also wear the pain of constant record churning without a supportable record management system. With the accrual of these records over time forming a ‘Big Data concern’, modernising these eLearning platforms may be the right call to action for medical professionals and researchers. Gone should be the days of manually updating Web Vista on regular basis.
Cloud solutions for Health Care and Research should be well on its way, but the better utilisation of these new technologies will play a key factor in how confidence is invested by health professionals in IT providing a means for departmental education and career development moving forward.
Why SharePoint Makes Sense (versus further developing Legacy Systems)
Every day, each document, slide image and scan matters when the paying customer’s dollar is placed on your proficiency to solve pressing health care challenges. Compliance and availability of resources aren’t enough – streamlined and collaborative processes, from quality control to customer relationship management, module testing and internal review are all minimum requirements for building a modern, online eLearning centre i.e. a ‘Learning Management System’.
ELearningIndustry.com has broken down ten key components that a Learning Management System (LMS) requires in order to be effective. From previous cases, working in developing an LMS, or OLC (Online Learning Centre) Site using SharePoint, these ten components can indeed be designed within the online platform:

  1. Strong Analytics and Report Generation – for the purposes of eLearning, e.g. dashboards which contain progress reports, exam scores and other learner data, SharePoint workflows allows for progress tracking of training and user’s engagement with content and course materials while versioning ensures that learning managers, content builders (subject matter experts) and the learners themselves are on the same page (literally).
  1. Course Authoring Capability – SharePoint access and user permissions are directly linked to your Active Directory. Access to content can be managed, both from a hierarchical standpoint or role-based if we’re talking content authors. Furthermore, learners can have access to specific ‘modules’ allocated to them based on department, vocation, etc.
  1. Scalable Content Hosting – flexibility of content or workflows, or plug-ins (using ‘app parts’) to adapt functionality to welcome new learners where learning requirements may shift to align with organisational needs.
  1. Certifications – due to the availability and popularity of SharePoint online in large/global Enterprises, certifications for anywhere from smart to super users is available from Microsoft affiliated authorities or verified third-parties.
  1. Integrations (with other SaaS software, communication tools, etc.) – allow for exchange of information through API’s for content feeds and record management e.g. with virtual classrooms, HR systems, Google Analytics.
  1. Community and Collaboration – added benefit of integrated and packaged Microsoft apps, to create channels for live group study, or learner feedback, for instance (Skype for Business, Yammer, Microsoft Teams).
  1. White Labelling vs. Branding – UI friendly, fully customisable appearance. Modern layout is design flexible to allow for the institutes branding to be proliferated throughout the tenant’s SharePoint sites.
  1. Mobile Capability – SharePoint has both a mobile app and can be designed to be responsive to multiple mobile device types
  1. Customer Support and Success – as it is a common enterprise tool, support by local IT should be feasible with any critical product support inquiries routed to Microsoft
  1. Support of the Institutes Mission and Culture – in Health Care Services, where the churn of information and data pushes for an innovative, rapid response, SharePoint can be designed to meet these needs where, as an LMS, it can adapt to continuously represent the expertise and knowledge of Health Professionals.

Outside of the above, the major advantage for health services to make the transition to the cloud is the improved information security experience. There are still plenty of cases today where patients are at risk of medical and financial identity fraud due to inadequate information security and manual (very implicitly hands-on) records management processes. Single platform databasing, as well as the from-anywhere accessibility of SharePoint as a Cloud platform meets the challenge of maintaining networks, PCs, servers and databases, which can be fairly extensive due to many health care institutions existing beyond hospitals, branching off into neighbourhood clinics, home health providers and off-site services.

Adding Paging capability into HTML table using AngularJS

Background

This is in continuation with my previous post in which we made HTML table sortable if you haven’t read it yet, give it a read first at URL. Next obvious request from end users is to introduce pagination in it.

Solution

We will be coming up with the following table in which data can be sorted and paged at the same time, this will have all of its data retrieved on the client side for paging and sorting.
Dashboard
The first part of this blog will help our users to select/set no. of records displayed on a page by displaying a list of available options.
NoOfRecords
The second part will let users navigate to the next or previous page, and they will also have an option to jump directly to first and/or last pages.
Pager
Overall appproach and solution will be described in the following sections.

Directive Template

Our HTML template for the directive will be as follows, it will have some basic HTML and events to respond to change in user interface.

Angular watch for a Change in items

The first thing we must have to do in our directive is to create a copy of original items on which we have to apply pagination.
Then we need to populate options for page sizes and set the default so initial rendering will take default page size and start from page # 1
Thirdly, as we are doing a client-side paging, we need to maintain original array and only show a slice of it in our HTML table, and then as the user selects or change page no. or no. of records on a given page we will render that page accordingly.

Change Page Size (no# of records on a page)

We had attached an event with our drop down list to ensure whenever a user selects new page size, it shows no. of records by recalculating as follows:

  1. Resets the start position (begin) to start from index 0.
  2. Sets the no of records to be shown on the page as per user selection (10, 20 or 50)
  3. Resets current page to page no. 1
  4. Recalculates last page based on total no of items in an array and page size desired by a user

Change of Page No

We had attached an event with our next/previous and first/last buttons to ensure whenever a user selects a new page, it shows correct records by recalculating their indexes as follows:

  1. Check what value has been passed and take action accordingly
    • if value ‘-2’ is passed > user requested for FIRST page
    • if value ‘-1’ is passed > user requested for PREVIOUS page
    • if value ‘1’ is passed > user requested for NEX page
    • if value ‘2’ is passed > user requested for LAST page
  2. And then reset the current page based on the analogy above in point # 1
  3. Calculates the start position (begin) to start showing records based on current page index and page size.
  4. Sets the no of records to be shown on the page as per user selection of page size (10, 20 or 50)

Conclusion

By playing around with AngularJS, we can create our custom directives best suited to our needs and without an overhead of adding an external library to reuse a part of it only. This can give significant control in functionality implementation as per our needs.
 

Making HTML table sortable in AngularJS

 

Problem

We were working on a project and have built its front-end on AngularJS v1.6.6 along with Office UI Fabric, we have used community-driven library ngofficeuifabric when we came across a situation of table sorting and realised that it wasn’t a great fit for our custom sorting and filtering requirements raised during future sprints by our product owners and business in general.

Solution

We have replaced ‘uif-table’ with ‘table’ and added custom events for sorting, the markup  is as follows:
[code language=”html”]

ID


 



 


Object ID


 



 


Object Date Submitted


 



 


Object Date


 



 


{{item.ID}}{{item.ObjectID}}{{item.DateSubmitted | date:’dd MMM yyyy’}}{{item.ObjectDate | date:’dd MMM yyyy’}}

[/code]
You need to have two variables to store what ‘order’ is required (ascending/descending) and which ‘field’ (column) to sort records on, we have initialised these variables as follows:
[code language=”javascript”]
//setting sorting variables for the first page load
$scope.sortAsc = false;
$scope.sortField = ‘item.ID’;
[/code]
We have attached a function to table header to record a click on a specific column and get the column’s desired sorting order, this will just record at the start of the function to set the direction for sorting.
[code language=”javascript”]
function headerClick(fieldName, sortType) {
$scope.sortField = fieldName;
$scope.sortAsc = sortType;
var sortedItems = [];
angular.forEach($scope.items, function (item) {
sortedItems.push(item);
});
$scope.items = [];
if (fieldName === “item.ObjectDate”) {
// sorting for custom date field as it can include text
sortedItems.sort(function (a, b) {
return compareObjectDate(a.Date, b.Date);
});
}
else if (fieldName === “item.DateSubmitted”) {
// sorting for any date field
sortedItems.sort(function (a, b) {
return compareDate(a.DateSubmitted, b.DateSubmitted);
});
}
else {
// sorting for any text field
sortedItems.sort(function (a, b) {
return a.fieldName.localeCompare(b.fieldName);
});
}
//check what type of sorting (ascending/descending) is required and then do the needful
if ($scope.sortAsc) { // ASC
$scope.items = sortedItems;
}
else { // DSC
$scope.items = sortedItems.reverse();
}
}
[/code]
Here is a sample function to sort based on date field. You can create your own sorting function for each column type following the simple logic:

  • if two values are equal, a function should return “0”
  • if the first value is lesser than 2nd value, a function should return “-1”
  • if the first value is greater than 2nd value, a function should return “1”

[code language=”javascript”]
function compareDate(date1,date2) {
var dateFirst = new Date(date1);
var dateSecond = new Date(date2);
if (dateFirst === dateSecond) {
return 0;
}
else if (dateFirst < dateSecond) {
return -1;
}
else {
return 1;
}
}
[/code]
Pictures below will show custom sorting on the column Object Date as it has got a combination dates and text and client wanted to sort it in a specified order.

Ascending order (custom field)

032018_1123_Creatingsor2.png

Descending order (custom field)

032018_1123_Creatingsor1.png
Another view of looking at the same table but sorting on the column ‘Object Date submitted’ as it contains only dates.

Ascending order (date field)

Capture1

Descending order (date field)

Capture
It’s an easy way to use plain Angular and HTML to order/sort your table as per the needs. This can be enhanced further to cater specific needs or use 3rd party library to deliver rich functionality.

Intro to Site Scripts and Site Designs with a Simple SharePoint Modern Site provisioning

Microsoft announced Site Scripts and Site Designs in late 2017 which became available for Targeted release in Jan 2018, and released to general use recently. It is a quick way to allow users to create custom modern sites, without using any scripting hacks. Hence, in this blog we will go through the steps of Site Scripts and Site design for a Simple SharePoint Modern Site Creation.
Before we get into detailed steps, lets’ get a brief overview about Site Designs and Site Scripts.
Site designs: Site designs are like a template. They can be used each time a new site is created to apply a consistent set of actions. You create site designs and register them in SharePoint to one of the modern template sites: the team site, or communication site. A site design can run multiple scripts. The script IDs are passed in an array, and they will run in the order listed.
Site Scripts: Site script is custom JSON based script that runs when a site design is selected. The site scripts detail the provisioning items such as creating new lists or applying a theme. When the actions in the scripts are completed, SharePoint displays detailed results of those actions in a progress pane. They can even call flow trigger that is essential for site creation.
Software Prerequisites:

  1. PowerShell 3.0 or above
  2. SharePoint Online Management Shell
  3. Notepad or any notes editor for JSON creation – I prefer Notepad++
  4. Windows System to run PowerShell
  5. And a must – SharePoint Tenant J

 Provisioning Process Overview:
The Provisioning process is divided into 4 steps
1. Create a Site Script using JSON template to call actions to be run after a Modern Site is created.
2. Add the Script to your tenant
3. Create a Site Design and add the Site Script to the design. Associate the Site Design to Modern Site Templates – Team Site template is 64 and Communication Site Template is 68
4. Create a Modern Site from SharePoint landing page
5. Wait for the Site Script to apply changes and refresh your site
Quick and Easy right!? Now lets’ get to the “how to”.
Steps
1. JSON Template: We will need to create a JSON template that will have the declarations of site resources that will be provisioned after the site is created. For more details, here is a link to Microsoft docs. The brief schema is below.

{
"$schema": "schema.json",
"actions": [
... [one or more verb   actions]  ...
],
"bindata": { },
"version": 1
};

For our blog here, we will use the below schema where we are creating a custom list with few columns.

2. Site Script: Add the above site script to your tenant using PowerShell. The below code with return the Site Script GUID. Copy that GUID and will be used later

Get-Content '[ JSON Script location ]' -Raw | Add-SPOSiteScript -Title “[ Title of the script ]

3. Site Design: After the Site Script is added, create the Site Design from the Site Script to be added to the dropdown menu options for creating the site.

Add-SPOSiteDesign -Title “[ Site design title ]” -WebTemplate "64"  -SiteScripts “[ script GUID from above step ]”  -Description "[ Description ]"

4. Create a Modern Site: After the Site Design is registered, you could see the design while creating a site as shown below
ModernTeamSiteWIthcustom
5. Click on the Manual Refresh button as per screenshot after the site upgrade process is complete.
SiteScriptFinish
When ready, the final Team site will look like the screenshot below after provisioning is complete.
CustomTeamSiteWithScriptResult
In this blog, we came to know about Site Script, Site design and how to use them to provision modern team sites.

Writing for the Web – that includes your company intranet!

You can have a pool made out of gold – if the water in it is as dirty and old as a swamp- no one will swim in it!

The same can be said about the content of an intranet. You can have the best design, the best developers and the most carefully planned out navigation and taxonomy but if the content and documents are outdated and hard to read, staff will lose confidence in its authority and relevance and start to look elsewhere – or use it as an excuse to get a coffee.
The content of an intranet is usually left to a representative from each department (if you’re lucky!) Usually people that have been working in a company for years. Or worse yet, to the IT guy. They are going to use very different language to a new starter, or to a book keeper, or the CEO. Often content is written for an intranet “because it has to be there” or to “cover ourselves” or because “the big boss said so” with no real thought into how easy it is to read or who will be reading it.
adaptive
Content on the internet has changed and adapted to meet a need that a user has and to find it as quickly as possible. Why isn’t the same attitude used for your company? If your workers weren’t so frustrated finding the information they need to do their job, maybe they’d perform better, maybe that would result in faster sales, maybe investing in the products your staff use is just as important as the products your consumers use.
I’m not saying that you have to employ a copywriter for your intranet but at least train the staff you nominate to be custodians of your land (your intranet- your baby).
Below are some tips for your nominated content authors.

The way people read has changed

People read differently thanks to the web. They don’t read. They skim.

  • They don’t like to feel passive
  • They’re reluctant to invest too much time at one site or your intranet
  • They don’t want to work for the information

People DON’T READ MORE because

  • What they find isn’t relevant to what they need or want.
  • They’re trying to answer a question and they only want the answer.
  • They’re trying to do a task and they only want what’s necessary.

Before you write, identify your audience

People come to an intranet page with a specific task in mind. When developing your pages content, keep your users’ tasks in mind and write to ensure you are helping them accomplish those tasks.  If your page doesn’t help them complete that task, they’ll leave (or call your department!)
Ask these questions

  • Who are they? New starters? Experienced staff? Both? What is the lowest common denominator?
  • Where are they? At work? At home? On the train? (Desktop, mobile, laptop, ipad)
  • What do they want?
  • How educated are they? Are they familiar with business Jargon?

Identify the purpose of your text

As an intranet, the main purpose is to inform and educate. Not so much to entertain or sell.
When writing to present information ensure:

  • Consistency
  • Objectivity
  • Consider tables, diagrams or graphs

Structuring your content

Headings and Sub headings

Use headings and sub headings for each new topic. This provides context and informs readers about what is to come. It provides a bridge between chunks of content.

Sentences and Paragraphs

Use short sentences. And use only 1-3 sentences per paragraph.
‘Front Load’ your sentences. Position key information at the front of sentences and paragraphs.
Chunk your text. Break blocks of text into smaller chunks. Each chunk should address a single concept. Chunks should be self-contained and context-independent.

Layering vs scrolling

It is OK if a page scrolls. It just depends how you break up your page! Users’ habits have changed in the past 10 years due to mobile devices, scrolling is not a dirty word, as long as the user knows there’s more content on the page by using visual cues.
phone.png

Use lists to improve comprehension and retention

  • Bullets for list items that have no logical order
  • Numbered lists for items that have a logical sequence
  • Avoid the lonely bullet point
  • Avoid death by bullet point

General Writing tips

  • Write in plain English
  • Use personal pronouns. Don’t say “Company XYZ prefers you do this” Say “We prefer this”
  • Make your point quickly
  • Reduce print copy – aim for 50% less copy than what you’d write for print
  • Be objective and don’t exaggerate
  • USE WHITE SPACE – this makes content easier to scan, and it is more obvious to the eye that content is broken up into chunks.
  • Avoid jargon
  • Don’t use inflated language

Hyperlinks

  • Avoid explicit link expressions (eg. Click here)
  • Describe the information readers will find when they follow the link
  • Use VERBS (doing word) as links.
  • Warn users of a large file size before they start downloading
  • Use links to remove secondary information from the bulk of the text (layer the content)

Remove

  • Empty words and phrases
  • Long words or phrases that could be shorter
  • Unnecessary jargon and acronyms
  • Repetitive words or phrases
  • Adverbs (e.g., quite, really, basically, generally, etc.)

Avoid Fluff

  • Don’t pad write with unnecessary sentences
  • Stick to the facts
  • Use objective language
  • Avoid adjectives, adverbs, buzzwords and unsubstantiated claims

Tips for proofreading

  1. Give it a rest
  2. Look for one type of problem at a time
  3. Double-check facts, figures, dates, addresses, and proper names
  4. Review a hard copy
  5. Read your text aloud
  6. Use a spellchecker
  7. Trust your dictionary
  8. Read your text backwards
  9. Create your own proofreading checklist
  10. Ask for help!

A Useful App

Hemingwayapp.com assesses how good your content is for the web.

A few examples (from a travel page)

Bad Example

Our Approved an​​​d Preferred Providers

Company XYZ has contracted arrangements with a number of providers for travel.  These arrangements have been established on the basis of extracting best value by aggregating spend across all of Company XYZ.

Why it’s Bad

Use personal pronouns such as we and you, so the user knows you are talking to them. They know where they work. Remove Fluff.

Better Example

Our Approved an​​​d Preferred Providers

We have contracted arrangements with a number of providers for travel to provide best value

Bad Example

Travel consultant:  XYZ Travel Solutions is the approved provider of travel consultant services and must be used to make all business travel bookings.  All airfare, hotel and car rental bookings must be made through FCM Travel Solutions

Why it’s bad

The author is saying the same thing twice in two different ways. This can easily be said in one sentence.

Better Example

Travel consultant

XYZ Travel Solutions must be used to make all airfare, hotel and car rental bookings.

Bad Example

Qantas is Company XYZ preferred airline for both domestic and international air travel and must be used where it services the route and the “lowest logical fare” differential to another airline is less than $50 for domestic travel and less than $400 for international travel

Why it’s bad

This sentence is too long. This is a case of using too much jargon. What does lowest logical fare even mean? And the second part does not make any sense. What exactly are they trying to say here? I am not entirely sure, but if my guess is correct it should read something like below.

Better Example

Qantas is our preferred airline for both domestic and international air travel. When flying, choose the cheapest rate available within reason. You can only choose another airline if it is cheaper by $50 for domestic and cheaper by $400 for international travel.

Bad Example

Ground transportation:  Company XYZ preferred provider for rental vehicle services is Avis.  Please refer to the list of approved rental vehicle types in the “Relevant Documents” link to the right hand side of this page.

Why it’s bad

Front load your sentences. With the most important information first. Don’t make a user dig for a document, have the relevant document right there. Link the Verb. Don’t say CLICK HERE!

Better Example

Ground transportation

Avis is our preferred provider to rent vehicles.
View our list of approved rental vehicles.

Bad Example

Booking lead times:  To ensure that the best airfare and hotel rate can be obtained, domestic travel bookings should be made between 14-21 days prior to travel, and international travel bookings between 21 and 42 days prior to travel.  For international bookings, also consider lead times for any visas that may need to be obtained.

Why it’s bad

Front load your sentence… most important information first. This is a good opportunity to chunk your text.

Better Example

Booking lead times

Ensure your book your travel early
14-21 day prior to travel for domestic
21-42 days prior to travel for internatonal (also consider lead times for visas)
This will ensure that the best airfare and hotel rate can be obtained.

 

Follow Us!

Kloud Solutions Blog - Follow Us!