Screen%20Layout%20and%20Design

1
Screen Layout and Design

• CS2352 Lecture 10
• Robert Stevens
• http//www.cs.man.ac.uk/stevensr

2
Introduction

• Components of a WIMP user interface
• Putting these components together
• Presenting information
• Screen layout and design
• Look feel
• Principles guidelines

3
Screen Design

• The way widgets are put together
• Ergonomics, cognition via graphical design
• Presents tasks and promotes correct dialogue with
  system
• Kinds of information Text, numbers, maps,
  pictures, etc.
• Technology Characters, graphical displays, size,
  etc.
• Purpose File displays by name, type, date,
  thumbnails, etc.
• Much knowledge from graphic design for static
  material transfers well
• Interactive systems choice of presentation is
  possible Windows view menu arranges file
  windows

4
Information Presentation

• Colour used to reinforce information
• Aligned colums
• Text aligned left
• Integers aligned right
• Reals aligned on decimal point
• Shape of column then gives indication of size
• Data emtry layout as important as data
  presentation
• Text entry fields should be aligned Not jagged
  due to labels!
• Remember task analysis for order, dependencies
  and values
• Cultural dependence of viewing order for labels

5
Aligning Data
6
An Address Form on the Web
Christian Name
Surname
Street
City
state
Zip Code
7
Beauty and Aesthetics

• Aesthetics are important
• But beauty is not the same as usability
• Usability Efficiency, effectiveness
  satisfaction
• Clean, simple UI is often the more usable
• Utilitarian aesthetic
• Matching task with familiarity and ease is a
  better way to beauty and an aesthetically plesing
  interface

8
Look Feel

• Many GUI on diffeering platforms use the same
  widgets
• Their layout and presentation gives OS specific
  look feel
• Buttons in windows 2000 XP are different
• Widget library should do most of the work
• All buttons in any OS end up looking the same
• Still need to design content, chse labels, icons,
  grouping and make descisions on composition

9
Buttons in 2000 XP
Raised button
Pressed button
Windows 2000
Windows XP
10
Affordance

• UI components should afford their usage
• Users should apprehend their use
• Buttons should be pushable
• When selected, they should look selected
• When pushed they should look pushed
• Checkboxes should be checkable
• Menus should be choosable and disabled options
  avoidable

11
Layout Managers

• Layout managers determine
• how components are arranged on a Container
• Layout managers determine look feel
• Java provides Windows and Solaris layout
  managers as well as a set of its own styles

12
Interactive Interface Style Guides

• It is important to provide an interface that
  users will find internally consistent (and, thus,
  familiar)
• Visual design and aesthetics affect user
  confidence in and comfort with an application
• The use of simple clear conventions can greatly
  aid usability of an application
• Thus interface standards and guidelines have been
  devised for interactive interfaces such as GUIs
• This is an entire subject in its own right - see
  for example
• Macintosh Human Interface Guidelines
  http//developer.apple.com/techpubs/mac/HIGuidelin
  es/HIGuidelines-2.html
• Microsoft Windows XP Interface Guidelines
  http//www.microsoft.com/hwdev/windowsxp/downloads
  /
• Java look feel design guidelines
  http//java.sun.com/products/jlf/ed2/book/

13
Interactive Interface Style Guides

• Ideally all applications should adhere to the
  same conventions Gives internal consistency
• Conventions need to be defined in great detail,
  cater for people with disabilities, and be
  followed to the letter
• e.g. The chapter on Menus in Macintosh Interface
  Guide book contains 69 pages, and 89
  illustrations!
• However, merely following the conventions does
  not guarantee a usable application
• Need an incremental design and implementation and
  careful experimentation involving typical users
  (and disabled ones)
• Interactive interface design should use creative
  plagiarism, not inventiveness!
• If task models, control grouping and mapping from
  task language to input language are good then
  your chances of success are high

14
Apples rules regarding Menus

• The menu bar should always be visible and
  available for use
• It must always contain the standard menus (Apple,
  File, Edit, Help and Application), in the
  standard sequence and layout
• Application-dependent menu items come after the
  Edit menu
• Unavailable menus (and menu items) have their
  names greyed
• The order of common menu items, the typographic
  conventions used for them, and the keyboard
  short cuts assigned to them are all defined in
  detail, as is the way in which divider lines can
  be used to group them
• Menu items that act as commands must use verbs or
  verb phrases, those that change the attribute of
  a selected object must use adjectives or
  adjectival phrases
• etc. etc. etc.

15
Some Human Interface Design Principles
Metaphors

• - Take advantage of
  peoples knowledge of the world by using
  metaphors to convey concepts and features (e.g.
  computer files are represented as documents in
  paper folders that are placed on a desktop
  choices are made from menus )
• - allows people to
  feel that they are directly controlling the
  objects represented by the computer
• - allows users to
  perform actions by choosing from alternatives
  presented on screen
• - in the interface
  allows users to transfer their knowledge and
  skill from one application to another
• - users should be
  able to see what they need when they need it

Direct manipulation
See-and-Point
Consistency
WYSIWIG
16
Some Human Interface Design Principles

• User control - allow the user, not the computer,
  to initiate and control actions
• Feedback and dialog - keep users informed about
  whats happening
• Forgiveness - encourage users to explore your
  application by building in forgiveness, i.e.
  making their actions on the computer generally
  reversible
• Perceived Stability - an interface that is
  understandable, familiar and predictable
• Aesthetic integrity - ensures that information is
  well-organised and consistent with principles of
  visual design, so that the screen is pleasant to
  look at
• Modelessness - allows users to do whatever they
  want when they want in your application

17
Modelessness

• Modelessness is an ideal property of a user
  interface i.e. the user should be able to do what
  they want whenever
• Modelessness means the computer interface should
  not have distinct modes that restrict the user's
  actions depending on the mode (s)he is in.
• Not separate modes for drawing, writing, tables,
  etc.
• Dialogue boxes give mini modes
• Ideally the use of modes is to be avoided,
  because a mode typically restricts the operations
  that the user can perform

18
Mini Modes

• However one problem presented by modelessness is
  that the user cannot cope with everything at
  once.
• Some use of modes is therefore acceptable
• Long-term modes modes, e.g. doing word processing
  as opposed to graphics editing
• Short term spring-loaded modes - which
  continue while the user does something
  continuously, e.g. while the mouse button is held
  down
• Alert modes modes - require user to rectify an
  unusual situation before proceeding
• Modes that emulate a real-life situation that is
  itself modal - e.g. use of different graphics
  tools

19
More mini Modes

• Modes that change the attributes of something
  rather than its behaviour - e.g. boldface and
  underline modes of text entry
• Modes that block most other normal operation of
  the computer to emphasize the modality, as in
  error conditions
• There should be a clear indicator of the current
  mode, such as a pointer whose appearance changes
  according to the mode
• It should be easy to change modes, e.g. graphics
  pointer and palette

20
Some Rules for Human Interface Design

• from Dr. Ben Shneiderman, http//www.cs.umd.edu/b
  en/
• Strive for consistency
• Enable frequent users to use shortcuts
• Offer informative feedback
• Design dialogs to yield closure - sequences of
  actions should provide clear feedback upon
  completion.
• Offer error prevention and simple error handling
• Permit easy reversal of actions
• Support internal locus of control - make users
  the initiators of actions rather than the
  responders to actions
• Reduce short-term memory load avoid the user
  having to remember large numbers event sequences
  etc.

21
Dialogue Box
22
Simple UI Checklist

• Direct manipulation
• Seamless feedback at all levels
• Modelessness
• Reachability
• Familiarity
• Task consistency
• Internal consistency
• Control grouping
• Opposition
• Frequency
• Sequence
• Importance

23
Simple UI checklist

• Easy to succeed escape
• Labels all from same genre
• Symmetric commands have symmetric lables home
  end?
• Easy mapping from task language to input language
• Easy mapping from output language to task
  language
• Match human limitations capabilities in
  sensory, motor cofnitive subsystems

24
Summary

• HCI design mix of craft and engineering
• Principles and guidelines, but no one truth
• Must be based in task user requirements
• Limitations capabilities of the human model
  information processor