Web Design Guidelines - RITswen-444/slides/course slides/Web Site Design.pdf · Some Design...
Transcript of Web Design Guidelines - RITswen-444/slides/course slides/Web Site Design.pdf · Some Design...
Web Design Guidelines SWEN-444
Design Principles and Guidelines
Foundation Design Principles (Empirical)
Computing Paradigms (Platform guidelines and conventions)
User Populations (Shared human ability and behavior)
(Problem domains)
Designing for the Web Current landscape … • HTML5 + CSS3 to build a wide array of sophisticated “rich Internet
applications” • Reusable GitHub based open source UI components; e.g.,
Bootstrap, jQuery • Modern browsers efficiently process HTML and JavaScript • The “web experience” is more than graphic design and content
information architecture • Good design principles still apply
How Do We Really Use the Web? • Do users carefully read content, consider all options, before
making decisions on actions? • Or, do users scan each new page, click on the link that seems
correct or interesting? • Facts of life:
• We don’t read pages, we scan them • We don’t make optimal choices, we choose the first reasonable option
• Little downside for wrong guesses • We muddle through without always understanding how things work
• Few people read instructions
Site Evolution • Informational sites:
• Balance display density of useful information with learnability for infrequent users
• Full screen content with good page navigation • Transactional sites
• Properties of informational sites plus functional behaviors • Efficient structured navigation based on an “information architecture”
page content organization • Web application sites:
• Desktop-like more complex applications • “Views” more than “pages” – not a “document” metaphor • Asynchronous server communications
Class Activity Evaluate the RIT website:
• Critique the user experience in terms of the web design guidelines described in this lecture
• What general design principles are represented? • Design a wireframe(s) that improves the existing
design
Some Design Guidelines • Home page • Page layout • Navigation • Information presentation • Note: web context interpretations of affordance derived
guidelines
The Homepage • Create a positive first impression
• Answer what, where, when, who, why + how • Communicate the site’s value and purpose
• E.g., Site identity, mission, feature hierarchy, search • Space compromise – use no more space than
necessary • Limit to one screen • Don’t oversell the site
• Homepage layout may be different than other pages
Page Layout • Create a visual hierarchy
• Header – typically logo/site information, primary navigation, search, log-in status • Footer – suggest where to go next, seldom used areas of the site or application
• Establish conventions - consistent appearance and location of navigation elements on all pages
• Use frames when certain functions must remain visible on every page
• Avoid clutter – too many items, omit needless text • Visually align page elements, either vertically or horizontally
Page Layout Site ID Search
Sections Page Name Local Navigation
Navigation • Page navigation depends on content organization -
information architecture • Content navigation – relationships are associative • Primary navigation (site page sections) – top preferred over
(left) side unless there are many items • Users look top, then left, right
• Secondary navigation and beyond (three levels max) • Top plus left for secondary • Primary drop down from primary (“fat navigation”)
Navigation (cont.) • Utilities – links to important site elements not part of the
content hierarchy; e.g., “About”, “Help” • A way to search – simple search box or link to a search page • Page and link names match • “You are here” visual highlights of navigation hierarchy (e.g.,
bold) • “Breadcrumbs” showing navigation hierarchy from home page
to current location
Navigation (cont.) • Always provide navigation options – no dead end pages • Use a clickable ‘List of Contents’ on scrollable long
pages • E.g., ‘anchor links’ at the top of the page
• Keep navigation only pages short • Provide site maps for sites with many pages • Measure of usability design effectiveness:
• Number of clicks but more importantly, how hard to choose a click (understandability)
Make Links Obvious • Use meaningful link labels
• Text is preferable to graphics; label graphic links • Use color changes to indicate when a link has been visited • Distinguish internal and external links • Duplicate links to important site content to ensure users can
find it • Provide consistent cues to links, avoid misleading cues to
click non-links • E.g., underlined blue text, images
Browsing and Searching • User wants to find something – browse or search? • Browsing
• Versus the real world – no sense of scale, direction, or location (e.g., search in real store)
• Searching - users are really not that good at forming effective queries • So help the user find the desired page
! Auto complete ! Auto suggest to disambiguate ! Suggest keywords
Search (cont.) • Scroll after search
• Create an effective visual rhythm with white space and typographical emphasis
• Page header and footer are boundaries • Some pages scroll infinitely as content is added as scrolling proceeds
(e.g., social networking sites) ! Accessibility issues
• Touch screens and gestures make scrolling more natural
Graphics, Images, and Multimedia • Simple background images for page readability • Distinguish important images from banner advertisements or
gratuitous decorations • Choose images to convey the intended message to users, not just
designer aesthetics • Introduce animation/video content but … • Have clear and useful reasons for using multimedia to avoid
unnecessarily distracting users • Consider download performance
UX and Persuasive Design for Websites
• Traditional usability design and testing answers – can the user be successful based on usability principles
• Versus will users use the system? • Are they persuaded? • Do they become emotionally involved? • Do they trust the site?
• Understand how people make decisions • To buy or donate • To subscribe • To re-visit, …
Decision Making Effectiveness • Enhance traditional usability testing with evaluation of
decision making effectiveness • Conversion - users make the desired decisions • Based on various psychological behavioral models
• Herzberg’s theory of job satisfiers (e.g., advancement) and dissatisfiers (e.g., pay)
• Maslow’s hierarchy of needs pyramid; physiological ….self actualization
Evaluate Conversion Effectiveness • What are the trigger or tipping points that lead to conversion? • Expand traditional persona models – what motivations, experience,
preferences, … • Evaluate users – what persuades them
• What information attracts them, what steps lead them to desired decisions • What emotions are expressed through body language, eye tracking, facial
expression, unsolicited verbalizations? • Identify step by step improvements to enhance motivation triggers for each persona
type • Note: a trustworthy site (i.e., professional) enhances conversion
success
References • “Research-Based Web Design & Usability Guidelines”, U.S.
Department of Health and Human Services; www.usability.gov • “Don’t Make Me Think”, Steve Krug • “Designing for Conversion; Evaluating decision making through
HFI’s PET DesignTM”, Mona Patel • “About Face”, Cooper, Reimann
Note: By definition government web sites tend to be very information rich