layout and design

Screen Layout and DesignCS2352 Lecture 10Robert Stevenshttp://www.cs.man.ac.uk/~stevensr

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

IntroductionComponents of a WIMP user interfacePutting these components togetherPresenting informationScreen layout and designLook & feelPrinciples & guidelines


Screen DesignThe way widgets are put togetherErgonomics, cognition via graphical designPresents tasks and promotes correct dialogue with systemKinds 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 wellInteractive systems choice of presentation is possible Windows view menu arranges file windows


Information PresentationColour used to reinforce informationAligned colums:Text aligned leftIntegers aligned rightReals aligned on decimal pointShape of column then gives indication of sizeData emtry layout as important as data presentationText entry fields should be aligned: Not jagged due to labels!Remember task analysis for order, dependencies and valuesCultural dependence of viewing order for labels


Aligning Data


An Address Form on the WebChristian Name:Surname:Street:City:state:Zip Code:


Beauty and AestheticsAesthetics are importantBut beauty is not the same as usabilityUsability: Efficiency, effectiveness & satisfactionClean, simple UI is often the more usableUtilitarian aestheticMatching task with familiarity and ease is a better way to beauty and an aesthetically plesing interface


Look & FeelMany GUI on diffeering platforms use the same widgetsTheir layout and presentation gives OS specific look & feelButtons in windows 2000 & XP are differentWidget library should do most of the workAll buttons in any OS end up looking the sameStill need to design content, chse labels, icons, grouping and make descisions on composition


Buttons in 2000 & XPRaised buttonPressed buttonWindows 2000Windows XP


AffordanceUI components should afford their usageUsers should apprehend their useButtons should be pushableWhen selected, they should look selectedWhen pushed they should look pushedCheckboxes should be checkableMenus should be choosable and disabled options avoidable


Layout ManagersLayout managers determine: how components are arranged on a ContainerLayout managers determine look & feelJava provides Windows and Solaris layout managers; as well as a set of its own styles


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 GUIsThis is an entire subject in its own right - see for example:

Macintosh Human Interface Guidelines http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines-2.htmlMicrosoft Windows XP Interface Guidelines http://www.microsoft.com/hwdev/windowsxp/downloads/Java look & feel design guidelines: http://java.sun.com/products/jlf/ed2/book/


Interactive Interface Style GuidesIdeally all applications should adhere to the same conventions: Gives internal consistencyConventions 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 applicationNeed 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 MenusThe 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 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 itMetaphorsDirect manipulationSee-and-PointConsistencyWYSIWIG


Some Human Interface Design PrinciplesUser control - allow the user, not the computer, to initiate and control actionsFeedback and dialog - keep users informed about whats happeningForgiveness - encourage users to explore your application by building in forgiveness, i.e. making their actions on the computer generally reversiblePerceived Stability - an interface that is understandable, familiar and predictableAesthetic integrity - ensures that information is well-organised and consistent with principles of visual design, so that the screen is pleasant to look atModelessness - allows users to do whatever they want when they want in your application


ModelessnessModelessness 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 modesIdeally the use of modes is to be avoided, because a mode typically restricts the operations that the user can perform


Mini ModesHowever 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 ModesModes 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 consistencyEnable frequent users to use shortcutsOffer informative feedbackDesign dialogs to yield closure - sequences of actions should provide clear feedback upon completion. Offer error prevention and simple error handlingPermit 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.


Dialogue Box


Simple UI ChecklistDirect manipulationSeamless feedback at all levelsModelessnessReachabilityFamiliarity:Task consistencyInternal consistencyControl grouping:OppositionFrequencySequenceImportance


Simple UI checklistEasy to succeed & escapeLabels all from same genreSymmetric commands have symmetric lables home end?Easy mapping from task language to input languageEasy mapping from output language to task languageMatch human limitations & capabilities in sensory, motor & cofnitive subsystems


SummaryHCI design mix of craft and engineeringPrinciples and guidelines, but no one truthMust be based in task & user requirementsLimitations & capabilities of the human model information processor


layout and design

Documents