Guidelines for UI/UX as well as Code Structure

POINTERS FOR START

THING TO THINK ON BEFORE START

· 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

· Homepage layout may be different than other pages

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

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”)

· Utilities

– links to important site elements not part o

f 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

· 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

 · 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