Web Usability Training 10/30/2008

Where do you get examples of sites?
How grainular should we allow users to decide?
Don’t give users choices like “A” or “B” – that ends with 50%/50% split. Rather, focus on requirements. Ask, “What do you want the site to do?” Then you can test them with if “A” or “B” is better.
* Use Cases: avoid implementation specific language, dont worry about interface,
* Expectations: stick to conventions (link on logo), be familiar, dont try to innovate, understand user expectation
Navigation? Language?
* system that is consistent, efficient, productive, organized, intuitive
* users define the requirements, they know what they want, they not best for design, without them site is pointless
* goals: write them, keep the present through design process, what is the site purpose (entertain? education? sell? inform?)
* usuability goals: focus on success rates, time to find information, satisfaction and acceptance
* does it work? performance over preference
looks dont matter if it doesnt work
* the whole package: dont stop at the page, consider typical compuer are used, consider the typical user (accessibility for disadvantaged), consider connection speed
* be visible in search, found in the first page of results, users cant use the site if they cant find it, test keywords, ask you users what keywords they would use
xml sitemaps (wordpress plugin)
* parellel design: dont just develop one design, dont develop together, develop several designs and choose the best elements for the -final design. start with 3 independent designs then move to iterative design to unite them
-benefits: seeing the trying others’ designs improved final solutions
-creating many designs produced better results
-combining design elements resulted in better user interfaces
* personas: stand-ins for real users that motivate the decision making process, not real people but represent them, imaginary but important, need details to make realistic
– persona are defined by their goals
– build your interface to satisfy the persona’s goals and needs
– have fun with it!
* develop personas: write short narrative description, build specific ideas, detail 2-3 technical skills, include an interest or habit to make the persona unique, dont use a real person, create a composite based on interviews and research
– Cooper develops personas
* user experience: no pop-ups – unnecessary distrations, annoying, unwanted interruption for users who have a goal
* increase credibility: be sure information is up to date, professional, credible, linked to outside sources, credentialed, offer faq, offer archives
– Standford guidelines for web credibility
* standardize layout: stick to one method, dont created confusion by changing layout, dont change something like a navigation method from one part of the site ot another
* standardize tasks: dont offer two different formats for the same function – example drop down and popup calendars
– users become conditioned, variety creates unnecessary confusions
* make it easy: most calculations should be done by the system, optimize tasks done better by humans then by computers
* diminish memory limitations: use the computers memory no the user’s, compare side to side not page to page, a user can only remember 3-4 items for a few seconds.
* keep it moving: minimize page downloading times, minimize number of byte per page, reduce the number of external files called, the slower a page loads the fewer the people who will sit and wait
* Your session has times out: warn users of time outs before and not after they occur, program the option of continuing the session
* Waiting: providing feedback on processing time, 10-second wait (hour glass), minute+ wait process indicator, estimate time, provide auditory signal on completion
* Downloading: when large images, docs, charts etc. list the file size and approx download time
* Displaying Information: use formats the audience will understand, users should have to convert, kilograms/pounds, Fahrenheit/Celsius, military time/civilian time
* To Read or Not: design with scanning vs printing in mind, long documents, research, complex material should be designed to print, short docs entertain and should be designed to read, users prefer to read not print.
– 5 pages+ usually printed
* Printing: design pages for printing makes this easy, use standard orientation, if you cant read it you can’t use it, provide a link to printable versions
* Avoid Multitasking: dont require the user to multitask, dont require the user to remember large amounts across multiple pages
* Use plain english: speak at the reader’s level, leave breadcrumbs, use tabs, include search capability, explain unfamiliar terms
* Never Assume: design the site for the first-time user, include information about the content and navigation, include both the user without experience and the user with disabilites
* Browsers: Pareto Principle, 80% of your users will use 20% of the available browsers
* Browsers: not all settings are the same, consider common browser settings (font size, disabled ads, disabled colors/images)
* Operating systems: aim to develop for 95% of your audience, keep in mind the users settings too
* Connection Speed: amoung people who use the internet at home, 79% ahve a high-speed, 15% use dialup
– Pew Report 07/2008
* Screen resolution: default 1024×768 (45%), 1280×1024 (31%)
* Usability Testing:
* Accessibility: disabled users, search engines (consider crawlers like blind users – no javascript)
*Section508: all federal websites must be designed with disabled in mind, design for visual mobility auditory and learning disabilities
all forms must be compatible with assistive technologies, approach accessibility from the beginning not the end
* Forms: most information collected is entered via forms, ensure
* Color blindness: offer alternatives where information is primary in color, never use color as the only indicator for anything critical
– choose colors combos that can be seen, use tools, keep contrast high
* Skip navigation: allow screen readers to bypass repetitive information
* Alternate Text: always provide text for non-text elements, allows visually impaired, allows search engines, not just for images (video, audio)
* Plugins Applets: test flash and other plugins to ensure that they are accessible, offer alternatives where needed
* Javascript: ensure that changes a script makes can be read by assistive technology, dont require a mouse to be used
* When all else fails: provide equivalent text-only pages, keep them just as current, inform users that the information is equal
* Closed Caption: with movies or animations offer synchronized captions or auditory descriptions
* Style sheets: dont require style sheets, make sure the information underneath is still readable
* Lynx: linux-based text browser, started by University of Kansas
* JAWS: one of the oldest screen readers (15 years), windows-eyes
* First Impression, Different from the rest of the site, Limited Prose, Minimum scrolling, purpose and major options
* Easy to find: make getting to the home page easy, users find it easier to start from the complete a task, easier to start over from
* Major options: stick to major options only, most commonly access taks and information, be selective, it not a site map
* Positive first impression: key to conveying quality, often a determining factor in credibility, up to date fresh let the user know the site is alive, easily scanned
* Value and Purpose: taglines help identify and communicate purpose, keep explanations, if needed, brief
READ: Web Style Guide, 2nd edition
* No Prose: large blocks of text slow the user often go unread
* Walks Like a Duck: make sure the home page is clearly different from other pages, users have different expectations about home pages
– important links, site map, index, search
– common distintions – masthead with tag line, all major content categories, prioritize category lists
* One screen to rule them all: try to keep the home page to a single screen, information below the fold is often overlooked
* Users hate change: dont make changes to the site without informing users that its coming, assure users that the same information will be available, post this information on the home page where it will be highly visible
* Panel with: home page panels should be sized to convention, users are trained to anticipate information display, too wide a panel for navigation may be overlooked as content instead
* No Clutter Allowed: dont offer too many choices, dont forget to use pagination, dont forget, web real estate costs ‘nothing’
* Conventions: keep important items in the same areas of the page towards the top, navigation, error messages, informational messages
* TopCenter: users generally look at the top center of a page first, then look left, then right
* Make Comparison Easy: structure pages so items can be easily compared when users must analyse those items to discern similarities, differences , trends and relationships
* Importance levels: establish a high-to-low of importance for information
* Target Scanning Density: to facilitate finding target information on a page, create pages that are not too crowded with items of information, target in spare areas of the display tended to be searched earlier and found faster
* Alignment: users prefer consistent alignments for items such as text blocks, row, columns, checkboxes radio buttons data entry fields, etc. Use consistent alignments across all Web pages.
(make paragraphs 75 characters wide, 3 lines long)
* Fluidity: use a fluid layout that automatically adjusts the page size to monitor resolution settings that are 1024×768 pixels or higher
* Dont stop the scroll: ensure that the locatio of headings and other page elements does not create the illusion that users have reached to top or bottom of a page when they have not
(keep page scrolling to 3 pages max i.e. 3 page-down keys)
Analysis of VPAPIT
* Put title attributes on vpapit navigation <abbr title=”Computing and Information Services”>CIS</abbr> or <a href=http://cis.tamu.edu/ title=”Computing and Information Services”>CIS</a>
* Maybe change “Welcome” to “Home”
* Chagne RSS alt text to “RSS of news”, change RSS image to higher contrast
* Add alt “Skip to main navigation” to skip nav image
* Add another skip link: “Skip link to main content”
* Should use only 1 h1 tag

Hello all,

As promised, here are those resources Doug mentioned in the Usability


And one more Doug just sent over:

Just ran across this great tool, http://www.testiphone.com/ its pretty
awesome for testing usability and compatibility with web sites and the
iPhone. I thought you and your teams might find it interesting, hope
things are going well!