Part F - Design


Describe arrangement of controls, text, and white space in the presentation of output
Describe user interface accessibility guidelines
Identify the health and comfort issues associated with HCI

"Ergonomics (or human factors) is the scientific discipline concerned with the understanding of interactions among humans and other elements of a system, and the profession that applies theory, principles, data and methods to design in order to optimize human well-being and overall system performance" International Ergonomics Association

Arrangment | Guidelines and Accessibility | Comfort and Health | Exercises

Wojciech Jastrzebowski introduced the word ergonomics in his 1857 article entitled The Outline of Ergonomics, i.e. Science of Work, Based on the Truths Taken from the Natural Science.  Frederick Taylor introduced scientific methods in his search to find the optimum ways to perform given tasks.  In the early twentieth century, Frank and Lillian Gilbreth expanded his work to time and motion studies on workplace activities.  By the mid-century, Alphonse Chapanis had shown that pilot error could be greatly reduced by arranging and differentiating cockpit controls in a logical fashion.

Ergonomics focuses on improving the fit between humans and a system with respect to productivity, accessibility, comfort, and health.  Such attributes are directly affected by the design of the interface, the equipment used, and the environment in which it is used.

In this chapter, we describe the HCI design aspects that pertain to the layout and arrangement of controls and information, accessibility, and the comfort and health of the user. 


A well-designed user interface includes ergonomic arrangment of

  • controls that accept input
  • fields that accept input
  • information that displays output
  • space that separates that information

as well as selection of the colours used in displaying that information. 

Arrangement of Controls

Logical Placement

Poorly placed controls can lead to

  • inefficiency
  • errors
  • frustration

In one case, an online news reader placed the key to read articles beside the key to unsubscribe from the news group.  A slip of the finger was enough to unsubscribe instead of to read the news.  This inevitably led to inadvertent removal of news groups.  Although the operation was reversible, time was lost and the user was left frustrated.

Logical Grouping

We group controls in a logical fashion, where grouping depends upon the nature of the application.  Grouping types include:

  • functional
  • sequential
  • frequency

Functional groups collect controls that perform similar functions.

Sequential groups arrange controls so that buttons used to perform common sequences of operations follow one another.

Frequency groups arrange controls according to the frequency of their use.

Access and Ease of Use

In addition to laying out controls logically and grouping them logically, we arrange them so that the user finds them easy to reach and manipulate.

The user should

  • be able to reach all controls without excessive bodily movement
  • be able to reach controls regardless of their own height
  • be able to view critical displays at eye level
  • not be subjected to glare or reflection
  • have enough room to be able to manoeuvre amongst controls

Arrangement of Input Fields

Data forms typically involve substantial user input.  Quite often, the fields on these forms are of different sizes and do not line up naturally. 

We arrange the input fields to facilite the user's input tasks by

  • aligning the fields
  • right-justifying label fields
  • arranging the fields logically
  • allowing data to be entered left-to-right, top-to-bottom

Check out:

Note that preferred reading direction requires localization on such forms.

Alignment of List Fields

We align items in lists to improve the readability of the lists.  We use both horizontal and vertical alignment where helpful.

Numerical Lists

Consider the following alignments:

Price Price Price Price




Note how

  • decimal points are aligned
  • heading is aligned with the list of items
  • 0 confirms the presence of the decimal point (in the right-most column)
  • the monospace font ensures proper alignment

Name Lists

Consider the following alignments:

Firstname Surname Firstname Surname Surname, Firstname Surname, Firstname

Marge Simpson
Donald Duck
Santa Claus
Fred Flintstone
Mickey Mouse
Sailor Moon

Marge  Simpson
Donald Duck
Santa  Claus
Fred   Flintstone 
Mickey Mouse
Sailor Moon

Simpson, Marge
Duck, Donald
Claus, Santa
Flintstone, Fred
Mouse, Mickey
Moon, Sailor

Claus, Santa
Duck, Donald
Flintstone, Fred
Moon, Sailor
Mouse, Mickey
Simpson, Marge

Note how

  • a monospace font is necessary if first name precedes surname
  • alphabetic order improves readabilty

Reference Tables

Consider the following tables:

Description Page
fruit gums
coconut dreams


Description Page
fruit gums.............................................................
coconut dreams.....................................................


Description Page
fruit gums
coconut dreams


Description Page
sherbet 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

Note how

  • it is difficult to follow a row across in the absence of any aid
  • the different solutions to this problem improve readability to different extents

Arrangement of Output Information

We arrange output information so that

  • common and related information appears close together
  • information appears in a format similar to that used in other environments
  • information is well-formatted for readability
  • tracking information is available

Business Forms

For example, in displaying shipping and billing information, we apply the following principles

  • shipping information is beside billing information
  • payment information is altogether
  • itemized list of orders is all in one place
  • lists have totals similar to those on a paper form with which the user may have been familiar
  • a list of communications about the order appears at the bottom
  • decorative dividers partition the space to make it easier to identify different parts

Consider the following form:

Your Shipping Information Your Billing Information
Chris Szalwinski
70 The Pond Road
Toronto, Ontario

Chris Szalwinski
School of Information and Communications Technology
70 The Pond Road
Toronto, Ontario

Your Payment Information
This order will appear on the following credit card:
Card : MasterCard
Name on Card : Chris M Szalwinski
Expiry Date : 12/12
Card Number : **** **** **** 1634

Your Order Quantity Unit Price Subtotal
Norman, D.A. Design of Everyday Things
Sears, A. Jacko, J.A. HCI Handbook



Order Tracking Date
Your order request has been received
Your order has been logged : order number: 435 1234
Order 435 1234 has been shipped
Order 435 1234 has been delivered


Command Line

Consider the following command line interaction for a first-semester assignment:

 Payroll Deduction Calculator

 Please enter the employee's pay period information :
  Income for the current pay period     : 1600.00
  Registered Pension Plan contributions : 57.00
  Union dues for the current pay period : 7.00
 Please enter the employee's annual information :
  Number of pay periods this year       : 26
  Federal tax credits (as per TD1 form) : 8148.00
  Ontario tax credits (as per TD1 form) : 8196.00
  Number of Dependants < 18 years old   : 2
  Labour-sponsored share purchases      : 0
  Authorized deductions                 : 0
 Please enter the employee's year-to-date information : 
  CPP contributions year-to-date        : 500.00
  EI premiums paid year-to-date         : 200.00

Gross Income  3067.23
Federal Tax   492.11
Canada Pension Plan   145.16
Provincial Tax   247.25
Employment Insurance   0.00
RRSP Contributions   200.45
Union Dues   0.00
Net Income   1982.25
Total Deductions   1084.98

The output was submitted by a first-semester student concerned primarily with reporting the correct numerical results. 

Compare this output to the following output which places the user at the center:

 Gross Income.................1600.00
   Federal Tax.................189.49
   Provincial Tax...............92.14
   Canada Pension Plan..........72.54
   Employment Insurance.........31.20
   RRSP Contributions...........57.00
   Union Dues....................7.00
   Total Deductions............449.37
 Net Income...................1150.63

Organization of Space

Typographers, artists, and photgraphers know that negative space surrounding an image can be as important as the image itself.  Space alone has the ability to

  • visually separate
  • imply shapes
  • make it easier to read and find things
  • draw attention to certain parts of a page

Consider the use of white space in the following images


Use of Colour

Overuse of colour can make an interface distracting or confusing, while poor selection of colours can make some users unhappy.  Interfaces that look like circuses are not good interfaces.  We use colour sparingly and judiciously. 

Colours that have sufficient contrast are clearly discernable.  We avoid blue in displaying any critical information.  If a colour serves as a cue, we include some other cue as well so that the colour-blind user can also use the interface without difficulty.

We check how our colour scheme would appear to a colour blind user at sites like Colour Scheme Designer (

We select colours that conform to user expectations from everyday conventions:

  • red - stop
  • yellow - hold or caution
  • green - go

We keep in mind that the meaning of different colours differs across cultures and colour usage requires localization. 

To test the usability of colour in an interface, we turn down the saturation to the point where the display is purely monochrome.  We ensure that the interface in its monochrome state is still usable.

Guidelines and Accessibility

Human interface guidelines provide rules for establishing a common look and feel for all applications in a particular environment.  Adopting a common look and feel across all user interfaces helps create:

  • users who recognize icons, buttons, sliders, input fields, and dialogs
  • controls that all user know how to operate
  • a consistent language for input device use - single and double clicks

Check out these:

Not all published standards agree with one another.  For example, the guidelines for Mozilla Firefox's interface differ from those for Gnome.  Including Firefox in the Gnome distribution would break the consistency of the interface.


Accessibility is a measure of how many people have access to a certain product.  Universal accessibility aims to make a product accessible to all users who wish to use that product.  For instance, a train station is accessible to a mother with a child in a stroller if the mother and child can pass through the station using their stroller.  Accessibility is not tied to users with some form of disability.  Accessibility can be a software problem, a hardware problem or a combination of the two. 

The numeronym for accessibility is a11y, where the 11 stands for the number of letters omitted. 


The World Wide Web Consortium published its accessibility guidelines (WCAG) in 1999 under the Web Accessibility Initiative (WAI).  In December 2008, WAI published version 2.0 of these guidelines. 

Some notable parts of WCAG 2.0 are:

  • provide text alternatives - alt tags for images, transcripts for audio and video files
  • make the site fully keyboard accessible - mouse technology is not necessary
  • session timers should be extensible or disableable
  • adaptable - viewable in different formats without loss of structure or meaning
  • distinguishable - provide colour contrast to enhance readability
  • readable - avoid jargon - content should be easy to understand
  • navigable - include a site map, navigation should have a logical structure
  • predictable - consistent structure, keep main regions in the same location on each page
  • input assistance - include error messages for forms, avoid the colour red for errors
  • compatible - with popular browsers and assistive devices

Government Implementations

The Canadian government has common look and feel standards for all of its websites.  These Web Content Accessibility Guidelines (WCAG) ensure that the sites can be used with assistive technologies in a uniform manner and were updated in 2007.  They implement WCAG 1.0. 

The Ontario Legislature has published regulation 429/07 as its Accessible Information and Communication Standard for customer service.  As of January 1, 2012, all new Ontario govenrmnet internet and intranet sites are scheduled to be compliant with WCAG 2.0.  This will extend to large publicsector organizations on January 1, 2013. 

An interesting article on WCAG 2.0 implementation throughout the world by Roger Hudson

Assistive Technologies

Assistive technologies are technologies designed to help people with disabilities improve their own access to products that are readily available to people without disabilities.  Disabilities include

  • cognitive impairment and learning disabilities - such as dyslexia, ADHD or autism
  • vision impairment - such as low vision, glaucoma, partial or complete blindness or colour blindness
  • hearing impairment - such as deafness or hard of hearing
  • motor or dexterity impairment - such as paralysis, cerebral palsy, carpal tunnel syndrome, or repetitive strain injury, each of which affects typing or use of the mouse


Microsoft Windows provides a variety of assistive tools:

  • a narrator that reads text off the screen, announces the active window when it changes and can read text as it is being typed
  • a flashing caption bar or active window when the interface makes a sound
  • a sticky key facility to enable series input of a compound key stroke
  • high-contrast text to enhance visibility
  • an on-screen keyboard allows typing using a mouse
  • a magnifying glass to show a portion of the screen enlarged
  • the ability to change font sizes makes text easier to read

Check out the full feature set in Windows at Windows Vista and in Windows 7.

Comfort and Personal Health

A full understanding of a user's physical, cognitive, and emotion needs involves some appreciation of the factors that affect comfort levels and personal health. 

Health care is one of the most dynamic and growing sectors of western societies.  While developed nations focus on cure and care, many developing nations focus on prevention.  Regardless of national status, relatively little is known about how people use computer equipment, how their environment affects that use, how their experience can be made more pleasureable, and how supporting tools can improve their accessibility. 

Physical ergonomics is important for everyone, and pressingly important for those who suffer mild or severe medical conditions such as arthritis, carpal tunnel syndrome, colour blindness, visual impairment, or auditory impairment.  Minor changes to an interface, the equipment used, or the environment might go unnoticed by those who don't exhibit medical symptoms, but may nevertheless cause enough pressure for others to lead eventually to chronic pain or disability. 

Although we don't normally think of computers as dangerous, there are many situations in which health concerns do arise.

Physical Position

For users who work over long periods of time, any placement of controls that requires them to assume uncomfortable positions will result in muscle strains, back problems, and headaches.

Health disorders that arise commonly from improper physical positioning include:

  • muscular disorders
  • repetitive strain injury
  • carpal tunnel syndrome

Standing is better than sitting for muscular health.  Where sitting is necessary, several variables need to be addressed to minimize adverse health effects.

ibm keyboard
Workstation Variables (source: Berkeley Lab Wikipedia 2008 PD)

Repetitive strain injury is the general term used to describe prolonged pain due to soft tissue injury.  The injury can occur in the shoulders, hands, neck or arm.

Carpal tunnel syndrome is a pinching of the median nerve in the carpal tunnel.  The carpal tunnel is the passageway within the wrist that is surrounded by the wrist bones and that joins the distal forearm to the middle compartment of the palm.  The syndrome is an infammatory disorder of the tissues around the median nerve.  This syndrome can be caused by repetitive stress or by some physical injury. 

carpal tunnel
Carpal Tunnel (source: Pngbot Wikipedia 2007 PD)

The Safe Computing Tips ( site hosts a comprehensive set of pages that addresses general health issues, muscular disorders, carpal tunnel syndrome, and repetitive strain injury in more detail.


The temperature of the environment affects a user's performance.  User performance deteriorates rapdily when temperatures fall significantly outside the norm.  We control temperatures within working environments so that they remain comfortable for the user.

Temperatures ideal for productivity are between 21 and 23 degrees Celsius.  Lower temperatures result in muscle contractions that increase the possibility of muscular injury.  Higher temperatures decrease work efficiency and mental acuity. 

The Canadian Centre for Occupational Health and Safety site includes information on thermal comfort, humidity levels, air velocity, and standards that define acceptable ranges.


The lighting within an environment affects a user's performance.  Users need adequate lighting to see computer screens without trouble.  We orient the screen so as to minimize reflections from windows or washing out by daylight.  We move light sources from behind monitors since the sources themselves create contrast making it harder to read the information on the screen clearly.

Users also need good and proper lighting for reading and writing tasks on their desks.  This need imposes a lower limit on the lighting on monitors. 

We measure the amount of light on a surface in terms of foot candles or luxes.  The customary unit in the United States is the foot-candle.  One foot candle is the amount of light that impinges on the inside surface of a 1-foot radius sphere when the light source is one candela located at the center of the sphere.  One candela is the amount of light that a common candle emits approximately.  The SI unit for illuminance is 1 lux.  One foot candle is 10.764 lux. 

Overhead Lighting

Four 40-watt flourescent bulbs on a 9-foot ceiling create about 50 foot candles of lighting on a desk.  Removing one of the bulbs can reduce the lighting intensity significantly.

Flourescent lights provide the worse type of lighting, incandescent lights are better and indirect natural light is the best.  We use hoods, shades, and drapes to reduce glare from light sources.

Monitor Lighting

We limit any direct brightness on or from a computer screen.  Bright displays on monitors can strain the eyes and lead to eye fatigue. 

The proper lighting intensity for reading from paper or a CRT display ranges between 20 and 50 foot candles.  The lighting from LCD monitors should be higher and may have to be up to 73 foot candles. 


The level of noise within an environment affects a user's concentration.  Noise is the common term for unwanted signals.  Noise can distort, change or block visual information transmitted in an interaction.  Noise can also refer to unwanted video signals (snow), unwanted thermal effects (generated by equipment), and unwanted visual effects (grain). 

Excessive noise is a health hazard.  Computer equipment should not produce a level of noise that is disturbing.  We use sound judiciously within the environment, sound can at times be more distracting than helpful.

We measure noise in decibels.  A decibel is a logarithmic measure of intensity with respect to some reference level.  The reference level is usually the threshold of perception.  The reason for using the logarithmic scale is that the human ear is capable of detecting an extremely large range of sound pressures.  The logarithmic scale makes that range tractable.

 Source   decibel level  
 Auditory Threshold  0 dB 
 Calm Breathing  10 dB 
 Normal Conversation  40-60 dB 
 TV Set - home level  ~ 60 dB 
 Possible Hearing Damage due to long-term exposure    78 dB 
 Possible Hearing Damage  120 dB 
 Pain Threshold  130 dB 
 Jet Engine at 30 m  150 dB 

For a fuller description, see Sound Intensity Levels - sound in air (source: Wikipedia 2009)


Time spent at a computer can affect a user's performance considerably.  Too much time spent without enough breaks can result in

  • repetitive strain injury
  • fatigue
  • overexposure to harmful emissions from CRTs


One of the most important items of physical equipment in the computing environment is the chair.  We select the chair that is the most comfortable for the user.  Its height and tilt should be adjustable.  The user adjusts its height and tilt to maximize comfort.

The best angle for the chair back is about 120 degree from the seat.  The chair back should provide about 5-6 cm of support for the lumbar region of the human back.  This support is crucial to avoiding excess pressure on the disks of the lower spine. 

lumbar support
Lumbar Region (source: Mariana Ruiz Villarreal Wikipedia 2004 PD)

A proper kneeling chair can achieve the desired tilt and lumbar support by inclining the knees towards the floor.

kneeling chair
Kneeling Chair (source: Usher Wikipedia 2004 CC-BY-SA)


The keyboard can affect a user's performance.  Its placement and tilt are important ergonomic variables.  We adjust its height to minimize the bending of the wrist.  Arms should hang loose to avoid the cramping of the shoulders.  Forearms should have some support.  Quite often, the chair itself provides this support.

Microsoft has produced its own line of ergonomic keyboards since 1994.  It refers to its designs as natural since they accomodate the hand positioning for typing that is natural. 

microsoft natural keyboard

Microsoft Natural Ergonomic Keyboard Pro 1999 (source: PCStuff Wikipedia 2006 CC-BY-SA)

Maltron has specialized in the production of ergonomic keyboards since 1977.  It manufactures keyboards designed to reduce and to eliminate repetitive strain injury as well as to address special needs. 

DataHand has specialized in the production of ergonomic keyboards that minimizes the absolute amount of finger movement. 


The type of mouse available can affect a user's performance.  The standard computer mouse was not designed for prolonged use.  Manufacturers have developed specialized mice as alternatives.  Many are designed to relieve hand tension and to avoid repetitive strain injury. 

If you have a standard mouse, hold it lightly and avoid white knuckles.  Use your whole arm and shoulder to move it, not just your wrist.  Avoid maintaining the same position for prolonged periods of time.

3M came out with an ergonomic mouse in 2004.  Their mouse keeps the palm perpendicular to the work surface simulating a handshake.  This design supposedly relieves pressure on the median nerve of the wrist. 

Microsoft produced its own ergonomic mouse in 2007 that sits between the 3M ergonomic mouse and the standard mouse.  This mouse leaves the palm parallel to the working surface but does result in reduced stress. 

microsoft natural mouse

Microsoft Natural Wireless Laser Mouse 7000 (source: Biozinc Wikipedia 2008 CC-BY-SA)

Here is a site with Ergonomic Mouse Reviews (

Other Advisories

Other health issues include posture, eye relief, and sound relaxation. 

We try to assume a posture that is comfortable but not rigidly straight.  We loosen our muscles, stretch and roll ours necks even before we start to work.  We take breaks at least once an hour - getting up and moving around.

We take breaks from viewing a screen.  We go for walks particularily where we can keep looking into the distance.  Parks and open areas are ideal in this respect. 

We take breaks from listening to the audio produced by our computers.  We go for walks in some natural environment devoid of computer generated sounds.  Once again, parks are ideal in this respect. 


Previous Reading  Previous: Usability Engineering Next: User Support   Next Reading

  Designed by Chris Szalwinski   Copying From This Site