Designing Engaging User Experiences

Emily Mancini / Derek Cash-Peterson

0 comments

In this Ebook you will learn some of the principles of great UX design and see how such principles are implemented in Microsoft’s Power Platform. By improving UX, your forms will benefit from increased take up while returning structured and reliable data which will be useful to the overall efficiency of your organisation.

The advent of Microsoft’s Power Platform has allowed us to democratize development and to create robust apps quickly and efficiently. However, with that power comes great responsibility regarding the usability of your applications and how they are experienced by end-users.

This book aims to address such issues by examining the best principles in user experience (UX) design.

In this book, we make the following assumptions.

  • You are not working with a product design team.
  • You are responsible for building applications in Microsoft 365.
  • You have asked yourself the following questions:
  • How might users interact with your app at different times during their day?
  • What other things are competing for the user’s attention?
  • How might things be different for a one-month-old user versus a one-year-old user?
  • How will we create moments of gratification?
  • How will the user share their experience with others?
  • What is the perceived responsiveness of the solution?

We are going to focus on Power Apps, but our tips and tricks can be used on the Power BI dashboard and the user-input screen for your Power Automate flows.

User experience (UX)

UX is any way that customers and end-users realize the value provided in your product. It includes all the touchpoints and interactions that customers have with your company and product over time. UX covers:

  • User interface
  • Usability
  • This is a quality attribute that assesses how easy UX is to use:
  • Learnability
  • Efficiency
  • Memorability
  • Errors
  • Satisfaction
  • Usefulness
  • Utility is whether it provides the features you need
  • Usefulness is the combination of usability and utility

Usability heuristics for UX design

From the following list of UX design principles, we’re going to focus on the following:

  • Visibility of system status.
  • Match between system and the real world.
  • User control and freedom.
  • Consistency and standards.
  • Error prevention.
  • Recognition rather than recall.
  • Flexibility and efficiency of use.
  • Aesthetics and minimalist design.
  • Help users recognize and recover from errors.
  • Help and documentation.

Visibility of system status

The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time.

In other words, it’s the ability of the system to clearly communicate what is going on. For example, if a user submits something, they will know if the submission was successful or not.

Having a dialogue with a system helps to develop trust between the user and the system.

User control and freedom

Users often perform actions by mistake. They need a clearly marked ’emergency exit’ to leave the unwanted action without having to go through an extended process.

In practice, this might look like undo, redo or cancel. We need to see a way out on a small scale, for example, for the last action that you took, and also on a larger scale, such as exiting out of the entire form.

It is advisable to ensure that as people populate forms, they don’t lose information that they have entered by switching forward or back while engaging with the form. We also want to give them a smaller scale or way of getting in and out of a form.

Consistency and standards

Users should not have to wonder whether different words, situations or actions mean the same thing. Follow platform and industry conventions.

This relates to users’ expectations in terms of being familiar with consistent standards such as iconography and graphics. It’s important that you are providing a clear and consistent environment for your application. When making iterative changes to the app, make sure you are not drastically changing the look and feel.

Also, you need to make sure that the buttons etc. in your app match the community standards. For example, there’s a reason why the floppy disk icon is the graphic for save – it’s a community standard.

Error prevention

Good error messages are important, but the best design carefully prevents problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

This is about making sure that you reduce the friction in the application and reducing the possibility of users making an error when they try to perform a specific task.

For example, if you require a phone number to be in a specific format, make sure you provide solid instructions to the user by letting them know what the format is and by doing data validation. Also, remove fields from the form that do not need to be there. There are plenty of APIs that will populate an address based on a zip code, for example.

Finally, if your application does have an error (the wrong format for a phone number, for example), be clear as to how it will be fixed.

Recognition rather than recall

Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed.

For example, on an iPhone when you are in an app and you need to be authenticated via a text message, the system recognizes this and the text message opens and is accessible without you leaving the app. This saves you getting lost in the process.

Flexibility and efficiency of use

Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

The information on screen should be the bare minimum and should only support the tasks required at any given moment.

The more things that you have on a screen, the more time it takes for you to respond and make a decision – see the Hick-Hyman Law below.

Aesthetics and minimalist design

Usefulness – finding out what people need

User stories

Before you start building your solution, you need to focus on user stories – also referred to as outcome objectives – to define the feature requirements. A user story is a role that performs a task that leads to an outcome. For example:

SharePoint list – an example

The below is a SharePoint list – a very detailed one. It expects a lot from colleagues as we want them to fill it out for each requisition.

Also, if we look at our tasks, it doesn’t talk about measuring our usability. Therefore, while it allows us to accomplish our tasks, it lacks usability. Let’s ask the following questions:

  • How long does it take to complete the form?
  • What is the volume of errors?
  • Are we getting a lot of complaints?
  • Are people even using it? Perhaps they are returning to things like email?

Design issues with this form

  • We have a single line of text for the supplier, which will lead to typos and incorrect and non-uniform data.
  • It is unrealistic to think that users will have the supplier ID memorized, and therefore they will have to leave the system to find it. This introduces friction as the user fills out the form.
  • The above example details how the form is inconsistent as well as the user may have to leave the system to find the supplier name and the supplier ID.
  • All of the supplier information should be grouped together.

Moving between systems, or multitasking, creates the following issues:

  • 50% longer time to finish tasks
  • Increase opportunity for distractions
  • Creates cognitive overload – the more choices, the longer it takes
  • Information gaps and an increase in errors

A recent study showed that online focus is characterized by short durations, with only a median span of 40 seconds. With that in mind, it’s very important to make tasks as fast and as easy as possible.

  • As the amount number and the currency are two separate fields, this is a potential for error. Also, the currency field, in this case, is in US dollars, while procurement may be in other currencies.

Power App template

In the below example, we have taken the data from the SharePoint list and attached it as a data source for an out-of-the-box Power App template.

The first improvement that we made is to provide a data grid control that allows us to attach to the data source and identify different fields, which is similar to a list view that you would see in SharePoint.

Both of the below lists are following the guidance for the Visibility of System Status.

They are both showing the Request Status column on the right-hand side.

Also, Power Apps gives us the ability to focus on specific information by highlighting it in white, while giving us an ellipsis ‘…’ to drill down into the data. It also provides a higher visual hierarchy and clearly shows us what we are interacting with.

Another improvement we have made is to place Supplier Name and Supplier ID side by side. Also, we have made the Supplier Name a dropdown choice which removes the potential for errors.

We are also pulling the Supplier ID dynamically from the backend system.

Another area for improvement that we can make is the name of the app. Not everybody is going to know what GPC stands for – we shouldn’t use acronyms.

If you look at the next two screenshots, the large plus sign on the first screenshot is a handy way to add a record.

However, once you have added your data, the x on the below screenshot might confuse you as it will close out the form without saving. Clearly, this can be improved.

The Law of Common Regions

The Law of Common Regions states that elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

  • We have taken the SharePoint list and grouped its data fields into sections.
  • We now have a Request Section and Accounting Section etc.
  • It gives the user the clear ability not only to understand how to fill out the form but to do so efficiently.

Getting more from Power Apps

By switching from a data view to a gallery view and giving a visual colour for the status, is a great way to making the system more ‘visible’.

In the next step, we are going to give a full listing of the titles:

Furthermore, we have added a series of icons relating to common tasks; this gives the user a lot more control and freedom over their experience.

We also have a ‘train stop’ graphic at the top, which shows the status from New to Approved. This details the steps that we have gone through and the ones we have yet to finish.

We could improve this by detailing where the request is actually stopped i.e. with a specific person, and then follow up with them via an email.

Likewise, we can see if a request has been denied.

All of these actions help us get a good idea as to where you are in the system at any moment.

As flagged earlier as a possible error, we have moved the + add button off the purple banner, which helps us to reduce friction.

When it comes to consistency and standards, we have:

  • Removed the grey background for legibility.
  • Used the same marketing approach in terms of colour, sticking within the brand.
  • We have right-aligned the text fields, which spaces out the form nicely and reduces the chances of error.

And lastly, from an aesthetic and minimalist design perspective, note:

  • Only fields that are needed are presented
  • They are grouped in a logical way
  • There are no unnecessary graphics or photos
  • Icons only added when applicable

Website Forms Usability

Top 10 Recommendations from the Nielsen Norman Group

  • Keep it short – Heuristic #8 Aesthetic and Minimalist Design
  • Only show what is necessary.
  • Aligns with the Hick-Hyman Law mentioned earlier.
  • Visually group labels and fields
  • The Law of Proximity: objects that are near or proximate to each other tend to be grouped together.
  • Our example deals with the supplier details being close to each other, which weren’t on the SharePoint list.
  • The Law of Common Regions: elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
  • In the below example, we added clearly defined headers.
  • Present fields in a single column layout
  • Scanning fields in one column straight down is easier when reading a web application. If our eyes have to scan back and forth searching for columns, it takes longer and is a less than satisfactory experience
  • Use logical sequencing.
  • In our form, we started out with the highest information at the top, and at the bottom of the form, it becomes more general with additional information
  • Avoid placeholder text
  • Try not to put placeholder text inside the actual field. Instead, place the text underneath the field so the user will always be able to read the text and it won’t disappear when the field has data inputted.
  • Match field to the type and size of input
  • Our toggle is small.
  • Whereas our attachments field is large.
  • The field box size also gives the end-user an idea of the amount of information they have to input.
  • Distinguish optional and required fields
  • For acquired fields we have an asterix.
  • For example, you may want to colour code it too; however, be warned that red and green are common colour-blind colours, so make sure you are adding iconography as well.
  • Explain any input or formatting requirements
  • Avoid placeholder text if you have that requirement put it next to the field.
  • Avoid Reset or Clear buttons. Heuristic #3 User Control and Freedom
  • Users may accidentally clear the entire form, which will cause friction with the system.
  • Provide highly visible error messages. Heuristic #5 Error Prevention
  • It is best to explain to your user as they populate the form what they need to do as opposed to sending them back to a field at a later point in time.
  • Remember, forms are replacing manual paperwork, and therefore, if the form is hard to fill out, there will be less user take-up, and users may revert to paper or email.

Feedback from the Marketing Department

In our example, the Marketing team has come back to us regarding the Global Procurement Center requests form. In particular, they need some help navigating the system.

  • We created a Power BI dashboard that details information about all procurements.
  • This stopped them from having to manually calculate the totals.
  • The reason we coloured the numbers is that we’re using psychology called Pre-attentive Processing. This is the conscious experience of processing the visual environment. It is an automated experience and can take between 200 to 500 milliseconds to complete in spatial memory.
  • Colour makes items stand out
  • Form – your visual hierarchy
  • Spatial positioning
  • Movement

Dashboard review

#4 Consistency and standards

  • Even though we are in a different solution provided by Microsoft, we still wanted to look like the procurement request Power App.
  • We are consistent with using our brand colours.
  • We are keeping the background white for legibility.
  • The names of the columns map to the names in the form.
  • We’re reducing cognitive overload by ordering the fields to match the procurement process.

#8 Aesthetics and minimalist design

  • We are only showing the fields that are needed in this context.
  • Although there is a lot more information that we could add, we are most interested in the projects, the request amounts, the start dates and the status.
  • We have no unnecessary graphics or photos.
  • We only have icons when they are applicable.

In summary

While we have focused on Power Apps, all of this guidance can apply to the entire Power Platform.

  • User experience encompasses the user interface, usability and usefulness.
  • Following Nielsen Norman’s usability heuristics can help you create intuitive solutions.
  • Context impacts our perception, i.e. what is happening around you while you are working on your solution.
  • Experience informs our perception, i.e. were there errors with the solution? How fast did it load?
  • Perception informs usability: if the end-user has a bad experience, the system will be perceived as being bad. It’s more than a pretty interface; it’s building useful solutions for your organization that solve real business needs. Ultimately your focus on the end-user experience will help drive adoption and use of the solutions you build.

Resources

Nielsen Norman Group

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}