Components of Design in Hci

Only available on StudyMode
  • Download(s) : 30
  • Published : February 21, 2013
Open Document
Text Preview
Layout
Design principles
1. Visual hierarchy
* It is used to bring out relationships between pages or windows. * It also indicates priorities e.g. active window/page.

How do you achieve visual hierarchy?
This is done by careful combination and balance of the following elements: I. Focus: indicates the current active item i.e. where the user needs to look first II. Grouping : related UI elements are put together

III. Alignment: placing components coordinated fashion. What to know about layout
Users’ patterns of reading: you should understand why they are reading. There are two types of reading, namely:

Figure 1 Scanning: readers scan to locate things Figure 2 Immersive reading: to comprehend things

Designing for scanning
I. Assume that users start by quickly scanning the whole window, then reading the UI elements in roughly the following order: a) Interactive controls in the center
b) The commit buttons
c) Interactive controls found elsewhere
d) Main instruction
e) Supplemental explanations
f) Text presented with a warning icon
g) Window title
h) Other static text in main body
i) Footnotes
Guidelines for effective use of screen space
i. Critical components should fit in the minimum supported effective resolution. ii. Do not try to cram everything into the smallest space possible, instead allow for resizing and/ or progressive disclosure

Signs of ineffective use of screen space

Figure 3 Truncated data and presence of too many scroll bars

Figure 4 too much open screen space

Signs of effective use of screen space
a) Little or no data truncation
b) Appropriately sized windows and controls hence little need for scrolling. c) Balanced UI surface hence no large unused surfaces

To ensure effective usage of screen space
* Use appropriately sized elements
* Ensure that controls and are appropriately...
tracking img