1 / 14

Design Guidelines

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

becky
Download Presentation

Design Guidelines

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • images

  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 • <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

  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

  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

More Related