1 Screen Layout and Design CS2352 Lecture 10 Robert Stevens stevensr.

1http://img.cs.man.ac.uk/stevens

Screen Layout and Design

CS2352 Lecture 10

Robert Stevens

http://www.cs.man.ac.uk/~stevensr


Introduction

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


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


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


Aligning Data978 978 97.8 97.8 Robert Robert

2345 2345 23.45 23.45 Yeliz Yeliz

56 56 0.56 0.56 Carole Carole

9 9 9.124 9.124 Chris Chris

42 42 42.1 42.1 Sean Sean

560 560 0.5601 0.5601 Luciano Luciano

9000 9000 0.9 0.9 Marcel Marcel

10592 10592 1.0592 1.0592 Martin Martin

3 3 0.3 0.3 Ane Ane

197 197 1.972 1.972 Simon Simon


An Address Form on the Web

Christian Name:

Surname:

Street:

City:

state:

Zip Code:


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


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


Buttons in 2000 & XPRaised button Pressed button

Windows 2000

Windows XP


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


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


Interactive Interface Style GuidesIt 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 GUI’s• This is an entire subject in its own right - see for example:

– Macintosh Human Interface Guidelines http://developer.apple.com/techpubs/mac/HIGuidelines/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/

http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines-2.html









http://www.microsoft.com/hwdev/windowsxp/downloads/







http://java.sun.com/products/jlf/ed2/book/




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


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.


Some Human Interface Design Principles

• - Take advantage of people’s 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

Metaphors

Direct manipulation

See-and-Point

Consistency

WYSIWIG


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 what’s 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


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


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


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


Some Rules for Human Interface Design

• from Dr. Ben Shneiderman, http://www.cs.umd.edu/~ben/

• 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.

http://www.cs.umd.edu/~ben/


Dialogue Box


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


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


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

Date post:	12-Jan-2016
Category:	Documents
Upload:	merilyn-chambers
View:	217 times
Download:	0 times

1 Screen Layout and Design CS2352 Lecture 10 Robert Stevens stevensr.

Documents