Transcript Document

Ch 9 Guidelines
CS 368
page 1
Design Guidelines
•
•
•
•
collective wisdom
rules of thumb
heuristics
requires expertise
designers must know when and how to apply the
rules
rules may conflict with each other
• should be based on academic or industrial research to
have more credibility
• a variety of targeted guidelines exist
general purpose
web sites
mobile devices
e-commerce
• where can quality guidelines be found
books
journal articles
special reports
acm digital library
useit.com
Ch 9 Guidelines
CS 368
General Design Guidelines
• Know the user
Needs and user analysis
• Involve the user during design
• Prevent user errors
Rm *.*
• Keep it simple
Takes at least twice as long to design
• Beware of short term memory
Seven plus or minus two
chunking
Memorize these numbers
46319528073
1 616 331 2088
1 800 for cars
• Allow user to recognize instead of recall
Menus are better than command line
page 2
Ch 9 Guidelines
CS 368
page 3
More Guidelines
• Provide useful and non threatening error messages
Hit any key to continue -confusing
Fatal error - too threatening
Invalid entry - ambiguous
• Provide feedback
Download stats
• Accommodate user differences
Novice vs. power user
• Make user actions reversible
• Many more are available on the Web
google “usability guidelines”
• Group activity of how your pizza order interface can
follow or violate each of the guidelines
Ch 9 Guidelines
CS 368
Commercial Style Guides
•
•
•
•
•
•
Produced by a company for sale
Describes a specific look and feel
Describes windows, menu and other icons
Often associated with a development toolkit
These requirements might be enforceable
Examples
Apple Guidelines
Windows Vista User Experience
Java Look and Feel
page 4
Ch 9 Guidelines
CS 368
Project Guidelines
–
–
–
–
Developed in-house for a specific product
Rules for all team members to follow
Must be documented well
Examples
• Common errors messages
• Screen layout conventions
• When to use dialogue boxes
page 5
Ch 9 Guidelines
CS 368
page 6
External Standards
• official specifications
• may be enforceable by a governmental unit
• ISO 9241
ergonomics of visual display workstations
physical requirements
• ISO 13407
UI design processes
• Web Content Accessibility Guidelines
allow anyone to access web content
Section 503 (US law)
all federally funded websites must be compliant
Ch 9 Guidelines
CS 368
Web Design Guidelines
• home page should not need to be scrolled
above the fold
• provide meaningful link names
click here
page 7
Ch 9 Guidelines
CS 368
page 8
Graphic Design Guidelines
• use color sparingly
no more than four colors on the screen
7% of males are color blind
red and green are difficult to distinguish
• provide visual cues for valid data entry
-/--/---- avoid distracting background images
- use blinking or movement sparingly
recent studies suggest web surfers actually ignore
movement now since it is assumed to be an
advertisement
- use white space liberally
25 - 50% of the page
- strive for a balanced screen layout
top to bottom
left to right
Ch 9 Guidelines
CS 368
Developing for the iPhone
- Resources
- developer.apple.com/iphone
- you must register for free
- Several Videos
- Sample code
- Safari 3.0 beta
- Web Development Guidelines
- Tutorials
- iPhone Human Interface Guidelines
- Safari Web Content Guide
- Demos
- ~grissom/368/iPhone
- 3 levels of development
- Web compliant
- iPhone optimized
- iPhone application look and feel
page 9
Ch 9 Guidelines
CS 368
iPhone Guidelines
- Know the input device
- a big finger
- double tap
- touch and hold
- drag
- flick
- pinch open (zoom in)
- pinch closed (zoom out)
- Limitations
- no cut an paste
- no text selection
- no hover
- no drag and drop
- Design for double tap
- Safari finds closest block and scales to fit
- design a block structure
- div
- table cells
- lists
- images
page 10
Ch 9 Guidelines
CS 368
more iPhone
- optimize images
- as small as possible for quick display
- know the supported technologies
- PDF files
- Word documents
- Excel spreadsheets
- not supported
- Java (including applets)
- Flash
page 11
Ch 9 Guidelines
CS 368
page 12
still more iPhone
- Use W3C standards
- XHTML 1.0
- CSS 2.1 and partial CSS 3
- ECMAScript 3
- no WML
- Use modern design practices
- separate content, appearance and behavior
- XHTML,CSS, Javascript
- Integrate with native applications
- mail links (not iPod touch)
- phone numbers
- Google maps
- YouTube videos
- Consider an iPhone Style Sheet
- use a CSS 3 media query to determine the browser
- <link media=“only screen and (max-device-width:
480px)” href=“iPhone.css” type=“text/css”
rel=“stylesheet” />
- use an alternative style sheet for traditional
browsers
- this approach is more appropriate than code forking
- other media types include print and handheld
Ch 9 Guidelines
CS 368
page 13
iPhone viewport
- Screen size is fixed with no scrolling
- instead the use must pan if necessary
- default viewport width is 980 pixels to accommodate
most web pages
- web pages are scaled to fit
- if web page width is explicitly set narrower then it may
appear too small on the iPhone
- use special meta tag to control the viewport
- <meta name=“viewport” content=“width = 320px” />
- <meta name=“viewport” content=“width = device-width,
user-scalable=no” />
- show examples
Ch 9 Guidelines
CS 368
page 14
iPhone applications
- designers may choose to target a web application have
the look and feel of a native iPhone application
- use familiar color schemes
- use familiar screen layout, scale and buttons
- use familiar list layouts
- minimize the need to scroll