MOBILE UI

ERGONOMICS
[Link]
M/BFT/11/20

INTRODUCTION TO SOFT
ERGONOMICS

Soft Ergonomics is the study of designing virtual

interfaces that cater towards the wellness of the
human body, its emotional and cognitive abilities.

Software ergonomics standards establish design

principles for multimedia user interfaces.

They address user interfaces for applications that

incorporate, integrate and synchronize static media
such as text, graphics or images, and dynamic media
such as audio, animation, video or media related to
other sensory modalities.

INTRODUCTION TO SOFT ERGONOMICS

Soft Ergonomics generally takes into account the following human factors when building a
virtual interface:

Physical Limitations: Not all who use a virtual interface are physically equal. If the designed
interface only caters to right-handed individuals, or people within a certain height range then
the interface might need a redesign. One of the leading discussion is with respect to visually
impaired users.

Cognitive Abilities: If the product(software application, website) is designed for any casual
user, then the designer should not expect that all users would be experts, with high cognitive
abilities. The usage of the application should not need the user to know a lot of information
prior to using the interface

Emotional Needs: The interface should be 'designed for the occasion' or context. It should not
leave the user confused, either how to start using the interface or what to do when an error
occurs.

NEED FOR MOBILE PHONE UI ERGONOMICS

Mobile phones are used widely nowadays, and the general UI of an app is
very important in the app selection and adoption process.

An ergonomic, easy to use app is preferred, and often they turn out to be
the most downloaded and used apps.

The figure beside illustrates

the growing rate of time that
smartphone users spend with
their apps over the past year

DIFFERENCE BETWEEN MOBILE & NON-MOBILE UI

There are a few points that create a huge difference between the
designing aspects of a mobile and non-mobile UI.

The differences occur because of the following main reasons:

Change in input method

Change in usage environment

Change in device form factor

THE DIFFERENCE IT IMPLIES

Change in input method

The MIT Touch Lab study of Human

Fingertips to Investigate the Mechanics of
Tactile Sense found that the average
human finger pad is 1014mm and the
average fingertip is 810mm.

iPhone Human Interface

Guidelines, Apple recommends a minimum
target size of 44 pixels by 44 pixels (88px on
retina display) or about 8mm round.

The thumb has limited reach and range,

therefore UIs should be adapted to that
range.

The thumb shouldnt stretch too much

while reaching all areas of the
application.

All the main UI elements should be

placed in the area easily accessed by the
thumb.

Change in usage environment

Desktop devices are used indoors, mobile phones are used in varied
number of areas with variable lighting and other conditions.

Mobile apps should be have contrasting elements and easier to

press buttons with tactile feedback to be able to read in outdoor
conditions.

Change in device form factor

A change in device form factor means a change in how we use our

devices.

Different ways of holding devices prompts new points for reach and
extension, and UIs should be scaled accordingly

GENERAL UI DESIGN GUIDELINES

Consistency

certain aspects of an interface should behave in consistent ways at

all times for all screens

terminology should be consistent between screens

icons should be consistent between screens

colors should be consistent between screens of similar function

Simplicity

break complex tasks into simpler tasks

break long sequences into separate steps

keep tasks easy by using icons, words etc.

use icons/objects that are familiar to the user

Human Memory Limitations

organize information into a small number of "chunks"

try to create short linear sequences of tasks

don't flash important information onto the screen for brief time
periods

organize data fields to match user expectations, or to organize user

input (e.g. autoformatting phone numbers)

provide cues/navigation aids for the user to know where they are in
the software or at what stage they are in an operation

Cognitive Directness

minimize mental transformations of information (e.g. using

'control+shift+esc+8' to indent a paragraph)

use meaningful icons/letters

use appropriate visual cues, such as direction arrows

use 'real-world' metaphors whenever possible (e.g. desktop

metaphor, folder metaphor, trash can metaphor etc.)

Feedback

provide informative feedback at the appropriate points

provide appropriate articulatory feedback - feedback that confirms

the physical operation you just did (e.g. typed 'help' and 'help'
appear on the screen). This includes all forms of feedback, such as
auditory feedback (e.g. system beeps, mouse click, key clicks etc.)

provide appropriate semantic feedback - feedback that confirms

the intention of an action (e.g. highlighting an item being chosen
from a list)

System messages

provide user-centered wording in messages (e.g. "there was a problem in

copying the file to your disk" rather than "execution error 159")

avoid ambiguous messages (e.g. hit 'any' key to continue - there is no 'any' key
and there's no need to hit a key, reword to say 'press the return key to
continue)

avoid using threatening or alarming messages (e.g. fatal error, run aborted, kill
job, catastrophic error)

use specific, constructive words in error messages (e.g. avoid general

messages such as 'invalid entry' and use specifics such as 'please enter your
name')

make the system 'take the blame' for errors (e.g. "illegal command" versus
"unrecognized command")

Modality

use modes cautiously - a mode is an interface state where what the user
does has different actions than in other states (e.g. changing the shape
of the cursor can indicate whether the user is in an editing mode or a
browsing mode)

minimize preemptive modes, especially irreversible preemptive modes a preemptive mode is one where the user must complete one task
before proceeding to the next. In a preemptive mode other software
functions are inaccessible (e.g. file save dialog boxes)

make user actions easily reversible - use 'undo' commands, but use these
sparingly

allow escape routes from operations

Attention

use attention grabbing techniques cautiously (e.g. avoid overusing

'blinks' on web pages, flashing messages, 'you have mail', bold
colors etc.)

don't use more than 4 different font sizes per screen

use serif or sans serif fonts appropriately as the visual task situation
demands

don't use all uppercase letters - use and uppercase/lowercase mix

don't overuse audio or video

don't use more than 4 different colors on a screen

don't use blue for text (hard to read), blue is a good background
color

don't put red text on a blue background

use high contrast color combinations

use colors consistently

use only 2 levels of intensity on a single screen

Use underlining, bold, inverse video or other markers sparingly

on text screens don't use more than 3 fonts on a single screen

Display metrics

maintain display inertia - make sure the screen changes little from one
screen to the next within a functional task situation

organize screen complexity

eliminate unnecessary information

use concise, unambiguous wording for instructions and messages

use easy to recognize icons

use a balanced screen layout - don't put too much information at the top
of the screen - try to balance information in each screen quadrant

Individual differences

accommodate individual differences in user experience (from the

novice to the computer literate)

accommodate user preferences by allowing some degree of

customization of screen layout, appearance, icons etc.

allow alternative forms for commands (e.g. key combinations

through menu selections)

REFERENCES

[Link]

[Link]

[Link]

The Mobile Frontier by Rachel Hinman

[Link]

THANK YOU