5 ms·
I studied computer science with a minor in psychology. It's long ago, but at that time I some courses on the topic of ergonomic design of UIs. Shortly speaking
by menotyou 5y ago
I studied computer science with a minor in psychology. It's long ago, but at that time I some courses on the topic of ergonomic design of UIs. Shortly speaking every UI which stops the user from be interrupted in is workflow by waiting or searching is a microstressing event. (Interruptions are the most important of all stressors when working). Many microstressing events leads to stress and stress leads to bad productivity.
What can I say? The last 10 years UIs went ergonomically from bad to worse.
Loading time of screens are to long nowadays. While loading and rendering the browser typically keeps on moving screen elements around. Each of this movements interrupts the search for the relevant information for the eyes. Each of these movements enforces the eye movements, search for a new object to focus and accomodate its lenses.
Nowadays it is in many application not uncommon to have several of these movements in one loading of a page.(This problem comes is actually somehow connected that HTML is a sessionsless protocoll in connection with modern JS which makes increases loading times. Using microservices quite often lead to bad UI because of the uneven loading times).
Other problems are coming from opting into gimmicks like using "effects" or to scrolling instead of paging. While scrolling and paging is ok of websites (in most cases), in most business application you want to avoid this because it is coming with the same problems as slow loading and moving elements on the screen.
Another set of problems coming form bad choices from UX designers. Look at the example in [1]
- Wasting of precious screen real estate for white space leads to searching for information you need and again: scrolling, eyes movement, accommodation.
- Lack of optical guides like lines. Try to set all cells to white background in excel and start working then you see the effect.
- Lack of contrast: Dark grey text on light grey background (which MS Office does as well in their settings menu [4])
- For design purposes the chosen fonts are much to small to be readable in a convenient way
- Header and actual data (i.e. relevant information) are indistinguishable.
Finding Information in the "basic data" section in [1],[2] is a hide and seek game for the user. Assume you seeing this display 50 times a day during your work. You are guaranteed to come home with a headache
Another example of bad UI are the tiles in W10 start menu [6]. Instead of allowing the eye to scan the entry from top to bottom in one line, the eyes are forced in zig-zag of the tiles and they have transverse a bigger space on the screen because you have much less tiles on the same space as lines is the old menu structure.
Another example what causes stress and frustration with software is when the UI of one software does behave differently the others. Your software should generally be designed as what the user expects. An example of a bad UI for this case is MS-Outlook [3]. Some of the more often used navigation elements (switching between mail and calendar) are moved left bottom corner. This is against user expectation. Microsoft Outlook moves its navigation elements to somewhere where no one else put them. No one would design a car with gas an break pedals exchanged and putting the gear shift in the trunk. Microsoft Outlook does so with its navigation elements.
Another common problem is that to many screens in your application look to much alike. While it is desirable that the screen designs meets expectation, it is important that the user can spot immediately in which screen he is working. When for
Nested menus / hidden functionality is an typical issue in software as well [5]
Flat design is generally a stressor because is lacking optical help.
Examples of bad UI:
[1] <https://blogs.sap.com/wp-content/uploads/2017/08/Object-Page-Customer-Example.png https://blogs.sap.com/wp-content/uploads/2017/08/Object-Page...>
[2] <https://experience.sap.com/fiori-design-web/wp-content/uploads/sites/5/2017/02/04-new-object-Page3.jpg https://experience.sap.com/fiori-design-web/wp-content/uploa...>
[3] <https://topbestalternative.com/wp-content/uploads/2020/08/outlook-email-chat.jpg https://topbestalternative.com/wp-content/uploads/2020/08/ou...>
[4] <https://storage.googleapis.com/fe-storage/2020/09/85e03ded-excel-options-1.png https://storage.googleapis.com/fe-storage/2020/09/85e03ded-e...>
[5] <https://docs.microsoft.com/en-us/azure/devops/test/media/new-test-plans-page/define-tab-context-menu.png?view=azure-devops https://docs.microsoft.com/en-us/azure/devops/test/media/new...>
[6] https://filestore.community.support.microsoft.com/api/images/fc091333-4fc7-4085-8bbf-4193ff601f13 https://filestore.community.support.microsoft.com/api/images...
[7] Overloaded screens: <https://www.it-telesis.com/wp-content/uploads/Analytics.png https://www.it-telesis.com/wp-content/uploads/Analytics.png>