Software Construction Lecture 15 USABILITY and USER INTERFACE DESIGN (CONTD

1
Software ConstructionLecture 15USABILITY and
USER INTERFACE DESIGN (CONTD)
2
Usability

• What is Usability?
• Ease of learning
• Ease of use
• Ease of remembering
• Subjective satisfaction
• Efficiency of use
• Effectiveness of use

3
Usability Design Process
4
Use Scenario Development

• You already know about use cases
• Use scenarios are just a single thread through a
  use case much simpler!

5
UI Structure/Flow of Control
6
UI Structure/Flow of Control

• This matters much less than it used to. Why?
• What can you do about it?

7
Interface Standards Design

• The interface standards are the basic design
  elements that are common across the screens,
  forms, and reports within the system.
• Example
• What do you think of this?

8
Interface Design Prototyping

• Storyboard
• HTML Prototype
• Language Prototype
• Interface Evaluation
• Heuristic
• Walkthrough
• Interactive
• Formal Usability Testing

9
Creating a UI Prototype

• Low-fidelity prototypes are good! e.g.
• Paper prototype
• Visio/HTML/PPT/ prototype

10
Example
11
Heuristic Evaluation
Set of guidelines for creating usable GUIs See
http//www.stcsig.org/usability/topics/articles
/he-checklist.html for a good example of a set
of guidelines as a checklist.
12
Interface/Dialogue Design

• The team needs to worry about
• Layout (of buttons, text, table data, )
• Structuring data entry (tab order)
• Controlling data input (validation and format
  controls)
• Feedback (prompting, status, warning, and error
  messages)
• Dialogue sequencing

13
What Is a Dialogue?

• A sequence of interactions between the system and
  a user
• Dialogue design involves
• Designing a dialogue sequence
• Building a prototype
• Assessing usability

14
GUI Design Guidelines

• User in control
• Consistency
• Personalization Customization
• Forgiveness
• Feedback
• Aesthetics Usability

15
User in Control

• Rather the users perception of control
• No mothering principle user should feel that
  they initiate actions
• Feedback is necessary for this to work

16
Consistency

• The conformance to the GUI vendors standards
• A GUI developer must not be too creative and
  innovative in the interface design.
• The conformance to the naming, coding and other
  GUI-related standards developed internally by the
  organization
• This includes the naming and coding of menus,
  action buttons, screen fields, etc.
• It also includes standards for the placement of
  screen objects and consistent use of other GUI
  elements across applications.

17
Personalization Customization

• GUI personalization is customization for personal
  use
• e.g. a user reorders and resizes columns in a
  grid display and saves these changes as
  preferences
• GUI customization is an administrative task of
  tailoring the software to different groups of
  users
• e.g. when the program operates differently for
  novice and advanced users

18
Forgiveness

• A good interface allows users to experiment and
  make mistakes in a forgiving way
• Forgiveness encourages interface exploration
  because the user is allowed to take erroneous
  routes that can be rolled back (even to the
  starting point if necessary).
• forgiveness implies facilities such as a
  multi-level undo operation and the ability to
  cancel long-running actions

19
Feedback

• The feedback guideline is a spin-off of the first
  guideline the user in control.
• To be in control involves knowing whats going
  on when the control is temporarily with the
  program.
• The developer should build visual and/or audio
  cues for every user event.
• Hourglass, wait indicator

20
Aesthetics Usability

• Aesthetics is about visual appeal.
• Usability is about the ease, simplicity,
  efficiency, reliability in using the interface.

21
Aesthetics and Usability

• The issues to consider include
• the fixation and movement of the human eye,
• the use of colors,
• the sense of balance and symmetry,
• the alignment and spacing of elements,
• the sense of proportion,
• the grouping of related elements, etc.
• the responsiveness of the system
• Simplicity additional and related guideline

22
Symmetry Law of Proximity
How many groups are there in this image? How
do you know?
23
Symmetry Law of Proximity
What do the radio buttons apply to? How do you
know?
24
Symmetry Law of Proximity
What do you see in the image to the right?
What is it really?
25
Color Example
26
Ten Golden Usability Rules
A great set of guidelines created by Jakob
Nielsen in his book Usability Engineering. 1.
Use simple and natural dialog/language. User
interfaces should be simplified as much as
possible, since every additional feature or item
of information on a screen is one more thing to
learn, one more thing to misunderstand, and one
more thing to search through. And the GUI should
not overdo it with colour ( Less is more).
27
Ten Golden Usability Rules
2. Use language that fits the user group. The
language should be based on users language and
not on the system-oriented terms. Translation
from one language to another is more than just
words. Time, currency, phrases, metaphors,
measurements, etc. must fit the culture of the
user group.
28
Ten Golden Usability Rules
3. Minimise the load on short-term memory.
Users should not have to remember information
from one part of the dialogue to another.
Instructions to the use of the system should be
visible or easily retrievable whenever
appropriate.
29
Ten Golden Usability Rules
4. Make the graphical user interface coherent and
consistent. The same action should always have
the same effect. Users will feel confident in
using the system, and they will be encouraged to
try out exploratory learning because they already
have part of the knowledge needed to operate new
parts of the system.
30
Ten Golden Usability Rules
5. Give the ability to use shortcuts.
Accelerators unseen by the novices may
often speed up the interaction for the experts
users, such as function keys, command keys,
macros, etc.
31
Ten Golden Usability Rules

• 6. Give feedback to the user's actions.
• The system should always keep users informed
  about what is going on, through appropriate
  feedback within reasonable time i.e.
• 0.1 seconds user feels the system is responding
  immediately
• 1 s. is about the limit users flow of thought
  will stay interrupted
• 10 seconds is about the limit to keep users
  attention focused on the dialogue so if the user
  has to wait longer the system should give
  feedback about the waiting time.
• Warning messages should be used when the user is
  going to perform an irreversible action.

32
Ten Golden Usability Rules
7. Avoid error situations. Ask the user if s/he
really wants to do the action especially if the
action leads to serious consequences. Avoid
having too similar commands in the interface.
Commands whose actions are opposite should not
be placed close to each other.
33
Ten Golden Usability Rules
8. Give clear exit marks. Users often choose
actions by mistake and will need a clearly marked
emergency exit to leave the unwanted state
without having to go through an extended
dialogue. Cancel should be offered when the
operation will take a long time. In the
navigation bars, the users should be able to back
up.
34
Ten Golden Usability Rules

• 9. Give clear and understandable error messages.
• Simple rules for error messages
• should be phrased clearly and avoid obscure codes
• messages should be precise, not vague or general
• messages should constructively help the user to
  solve the problem
• messages should be polite and not intimidate the
  user or put the blame explicitly on the user
• ILLEGAL, FATAL ACTION, JOB ABORTED! phrases
  should not be used.

35
Ten Golden Usability Rules
10. Give clear help and understandable
documentation. Information should be easy to
search, it should be focused on the users task.
List the concrete steps that should be carried
out. The help manual should not be too large.