Design Guidelines

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

2
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

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

4
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

5
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

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

7
Web Design Guidelines

• home page should not need to be scrolled
• above the fold
• provide meaningful link names
• click here

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

9
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

10
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

11
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

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
• ltlink mediaonly screen and (max-device-width
  480px) hrefiPhone.css typetext/css
  relstylesheet /gt
• use an alternative style sheet for traditional
  browsers
• this approach is more appropriate than code
  forking
• other media types include print and handheld

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
• ltmeta nameviewport contentwidth 320px /gt
• ltmeta nameviewport contentwidth
  device-width, user-scalableno /gt
• show examples

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