Upload
barnaby-hudson
View
216
Download
0
Embed Size (px)
Citation preview
CS3205: HCI in SW Development
More on Detailed Design:Guidance and Color
Next:
• Guidance, guidelines– “Guidance” means: rules, policies, standards
• “Softer” UI Components
Guidance for UI Design
•Other than textbook’s, other guidance •Guidelines for physical design
• Nielsen’s heuristics• Shneiderman’s eight golden rules• Styles guides: commercial, corporate
•decide ‘look and feel’ for you•widgets prescribed, e.g. icons, toolbar
Usability principles (Nielsen 2001)
• Visibility of system status• Match between system and the real world• User control and freedom• Consistency and standards• Help users recognize, diagnose and recover from
errors• Error prevention• Recognition rather than recall• Flexibility and efficiency of use• Aesthetic and minimalist design• Help and documentation
Shneiderman’s 8 Golden Rules
• Strive for consistency• Enable frequent users to use shortcuts• Offer informative feedback• Design dialogs to yield closure• Offer error prevention and simple error
handling• Permit easy reversal of actions• Support internal locus of control• Reduce short-term memory load
Other Guidance
• Commercial vendors guidelines– Apple Macintosh– Microsoft Windows– Community: Java, OSF
• See Web site for links
• Also, international usability standards
UI Elements: Text and Color
• Lots we could talk about here– We’ll cover text and color
Using Text Well
• Goal: legibility• Font is typeface + size• Factors to consider
– Sans serif better than serif on screen– Not too big, not too small
• 10 or 12 point is smallest
– Extended chunks of bold or italic harder to read– Spacing between lines
• Too much and lines don’t group in user’s mind
Using Text Well (2)• Underlining: a web-link or emphasis?
– Consistency– Common issue on web-pages
• Background / font-color combinations– Black on white– Lighter on darker (e.g. presentations in large
rooms)– Relative luminance (function of RGB values)– Some you should avoid?
Can you read this easily?
Can you read this easily?Can you read this easily?
No one really does that, do they?
• Reservation calendar for very fancy hotel in Richmond
Web Issues and Text
• Keep text to a minimum– 50% of what you’d had in printed form– Lists not paragraphs
• Help users scan for information– Good headings and subheadings– Highlight important things– Good organization
• Divide long blocks into sections or pages
UI Elements: Color
• Reasons for using color:– To draw attention– To show status– To make information clearer (like legibility)– To make the UI more attractive
• The physics of color– Saturation, brightness– Differs on screen– See text or other texts
Color Connotations
• Colors have connotations– Cultural conventions– What’s red mean in your culture?
• Danger?• Joy, luck?• Red state vs. blue state in US?
Labour vs. Conservative in Britain?
– Other colors:• Green: nature or jealous, inexperienced• Yellow: light/bright or caution
Class Exercise
• Information visualization– measure something by unit in a larger thing– E.g. word-frequency by chapter in a novel– Goal: quickly see patterns of high/low
frequency
• Question: how could color be used? – Issues, problems, ?
Color for Information Representation
• Need to convey information?– Color for emphasis– Color for grouping
• Areas of the screen may have different background etc.
– Color coding (status)– Perspective
• Dark/dim for background, brighter for foreground
– Layering: if data falls into layers
• Example: Look at simple apps like Microsoft Windows’ calculator– What colors are there? Why?