SOLID Principles of UX, Part 2: Ergonomics & Beauty

In this second installment of Jessica Engstrom's five-part series on UX principles for developers, she explores the importance of ergonomics, beauty, inclusion, usability and accessibility.

If you missed my first post, you can catch up right here: SOLID Principles of UX, Part 1: Make Software Understandable. Otherwise, let's dive into part 2 below.

Ergonomics

Thinking about ergonomics is always a good idea. Having the right desk chair at work, the right keyboard and even the right pillow at night can make a huge difference. Ergonomics is something we should investigate when it comes to our user interfaces as well.

Reading up on platform design guidelines and using familiar components can help with this. The more the user must think about how to perform a task, the harder it will be to keep them. We want to minimize the learning curve, breaking down complicated tasks into smaller bits so it feels easy to understand and use.              

Given that we now see more and more devices of different shapes and resolutions and that many of them have touch-enabled screens, we need to take that into consideration.
Using simulators and emulators to test out our layout on different devices is invaluable.
When I design an app, I usually start designing at 5” which is somewhere in the middle of the “phone range.” Then I test the layout at 4” and 6” as well, just to make sure that it works.

If it doesn’t, I tweak until it works on all three.

Not testing it on both smaller and larger screens may cause some ergonomic issues and the same is true for not testing on a touch device. Like that you could accidentally press two buttons with one tap.

A human finger pad is on average 12mm across, so we must make sure that we add some space between the touch elements.

Some of the emulators and simulators have the option of “faking” touch so you don’t have to go out and buy multiple devices in all different sizes.

Take a thing like contrast as an example. If we have a little bad contrast between the background and our text or elements, they will be hard to read for anybody with eye-issues. But if we fix the contrast it will work both for people with and without eye-issues, so we have nothing to lose.

There have been many many studies done about typefaces and fonts. Many of them say that using a serif font family if you have large amount of text will help with eye fatigue. But if you are designing something for children in the “learning to read”-age or dyslexic people it might be a better idea to use a san-serif font family since some studies shows that it’s easier for those groups to recognize the letter because of the simplicity in the form.

Inclusion, Usability and Accessibility

We live in a world where we are becoming more and more aware of how inclusivity can benefit us all. Bringing inclusion, usability and accessibility to our design will benefit everybody, not only a certain group.

Having an inclusive design means that it’s usable for as many people as possible, no matter what region you live in, what device you are on or how fast your internet connection is.

If we look at the ISO standard (9241-11:2018) for Usability (Ergonomics of human-system interaction) it describes usability like this:

extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use

In other words an efficient page or app where the user feels comfortable navigating and feels like they are doing so in an effective and efficient way.

Accessibility is about not discriminating anyone regardless of age, disability or where you live. Of course we’re not discriminating on purpose, but it is according to the UN a basic human right to have access to information and communications technologies (including the web) so it doesn’t hurt to look into it.

We might think that “amputees are not my target audience” so I don’t have to think about one-handed navigation and that may very well be true, however we are not only excluding anyone who amputated their arm, but also anyone who had an accident and broke their arm or injured themselves at the gym and the parents of newborns.

Designing for people with bad eyes, color deficiency and dyslexia will not only benefit those groups but all our users!

Beauty

Although that it sounds obvious that a beautiful UI will appeal to the user, there are still too many UIs out there that have been neglected or not prioritized for it. Now, what "beautiful" is, as you all know, is individual and impossible to pinpoint. But what you can do is make sure you give the design part of the project a fair amount of time and read up on the design guidelines for the platform you are publishing on.

When apps are clearly made for one platform but gets released on multiple platforms there is a risk of an unattractive appearance. Like when apps have a back button in the UI on Android (or Windows phone back in the day) that have a hardware button for that.

Then it’s very clear that the app is not made for the platform and the UI feels off.

This is what I mean with beautiful. Not the latest and hottest design but a design that looks professional, that is aligned properly and looks like it fits in.

Do utilize the different platform design languages out there. Google has material design, Apple has human interface design and Microsoft has Microsoft design language or fluent.

A lot of research has gone into these guidelines and they will help you achieve much of what you just read about.

Stay tuned for the next post in this series, or for more, feel free to check out the webinar we recently hosted on the topic right here.

Resources

Check your website for contrast: http://www.checkmycolours.com/

ISO standard (9241-11:2018) for Usability: https://www.iso.org/standard/63500.html

Microsoft has a good inclusive design 101 guide on their design page: https://www.microsoft.com/design/inclusive/