Date post: | 04-Nov-2015 |
Category: |
Documents |
Upload: | caroline-aparecida |
View: | 3 times |
Download: | 0 times |
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
Aligning Data
http://img.cs.man.ac.uk/stevens
An Address Form on the WebChristian Name:Surname:Street:City:state:Zip Code:
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
Buttons in 2000 & XPRaised buttonPressed buttonWindows 2000Windows XP
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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/
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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.
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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.
http://img.cs.man.ac.uk/stevens
Dialogue Box
http://img.cs.man.ac.uk/stevens
Simple UI ChecklistDirect manipulationSeamless feedback at all levelsModelessnessReachabilityFamiliarity:Task consistencyInternal consistencyControl grouping:OppositionFrequencySequenceImportance
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens
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
http://img.cs.man.ac.uk/stevens