Ch 9 Guidelines page 1 CS 368 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 page 2 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 for cars Allow user to recognize instead of recall Menus are better than command line

Ch 9 Guidelines page 3 CS 368 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 page 4 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

Ch 9 Guidelines page 5 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

Ch 9 Guidelines page 6 CS 368 External Standards official specifications may be enforceable by a governmental unit ISO 9241 ergonomics of visual display workstations physical requirements ISO 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 page 7 CS 368 Web Design Guidelines home page should not need to be scrolled above the fold provide meaningful link names click here

Ch 9 Guidelines page 8 CS 368 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 % of the page -strive for a balanced screen layout top to bottom left to right

Ch 9 Guidelines page 9 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

Ch 9 Guidelines page 10 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

Ch 9 Guidelines page 11 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

Ch 9 Guidelines page 12 CS 368 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 - -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 page 13 CS 368 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 - -show examples

Ch 9 Guidelines page 14 CS 368 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