web usability notes

Presenting Page Elements

4-click Rule
any info should be available within 4 clicks

Common Mistakes

• Page not structured in prioritized order
• Interactions too complex with no guidance
• Related areas not grouped closely
• Elements not aligned in order
• Elements not where people expect
• Too many elements on page

People often don't scroll

• If people expect something in a certain place, they won't scroll to find it
• White space at bottom of viewable area makes it seem like it's the end of the page
• Ad-like areas at end of viewable area signal page end
• Headers of content place just above bottom of screen suggest more to come
• Don't make small scrollable areas (too hard to read and moves too fast)
• Multiple clicks okay if guides users step by step through a linear process
• Make sure important sign up sections above fold
• In Web applications put input area close to results area above fold
• Screen magnifiers especially need things close together
• On forms put answer fields that are related close together horizontally & vertically
• Users look at text boxes first - make sure new sign-ups have text box
• Don't put navigation on right side or in boxes (appears like ad)
• Corporate info at top and bottom of homepage (expected)
• Shopping cart checkout at bottom
• Place wish list after add to shopping bag
• Put white space around groups

web usability notes

Product Information

• Show price at first product mention & be straightforward & clear. (people distrust companies with no prices for comparison.
• If you can't provide exact price, provide estimate (typical cost for moving 3-bed household)
• Show taxes, insurance and shipping fees asap.
• Make sure complimentary items you offer are clearly labeled as "free."
• Give specific descriptions and if long, put it in layers.
• Show detailed photos and diagrams of products with ability to enlarge, maybe thumbnails
• Show front and back views. Show size with coins or rulers, if unclear.
• Layer product pages - key info first, then such things as illustrations, demos, FAQ's, custormer and expert reveiws, troubleshooting and maintenance, accesoreis and parts, manufacturer info.
• Show coupons/rebates.
• Add credibility with links to positive reviews and major current awards.
• Show comparitive differences in features and price.

Informational Articles:

• show expertise and motivation and enhance crediblity
• help differentiate between alternative products
• provide info to support purchase decisions
• contain keywords that enhance serach engine visibility and increase traffic to site
• provide info about products, who their intended for, and benefits.

Web Usability notes

Writing for the Web

Use clear, solid, focused content with simple words and cues in headlines.
Aim text at 6th grade reading level (43% U.S. over 16 8th grade or below)
Skip jargon, avoid acronyms, avoid sarcas or cliches .
Don't compliment self and use hard sell, except new awards. Give them the facts.
Don't use about us to sell - give company facts
Summarize Key Points & use inversted pyramid.
Word count of about half of print.
Layer info on different pages if not highly related.

Format for readability:

• highlight key words
• use concise and descriptive titles and headings - left justify easier to read, not all caps
• main headings larger, sub-heads smaller, body text next. Heads 60 characters max. bulleted lists when 4 or more items (vertical lists 47% easier to use than run-in lists)
• begin run over lines under text, not bullet, put text close to bullet to read easier, use consistent phrasing, and don't use too many lists.
• use numbered steps when sequence needed
• use short paragraphs
• put most important point in first 2 lines
• use short paragraphs (1 topic sent, 1 idea, under 5 sentences) surrounded by white space

web usability notes

Typography: Readability & Legibility

• Use common fonts at or above 10 points (12-14 pts for seniors, impaired and children)
• Avoid busy backgrounds
• Use black text on white backgrounds
• Keep moving, all-cap and graphical text to a minimum
• PDF text can be hard to read.
• Anti-aliased text is hard to read esp. under 12 pts
• Set type in % of body text sizes so it can be enlarged by viewers
• Sans serif fonts easiest to read online - Verdana easiest to read

Typical Fonts on most Computers (recs may change with better monitors)

• Arial, Arial Black (sans serif) clean, no frills 10+
• Comic Sans MS (sans serif) friendly, youthful, fun, not serious hard to read
• Courier New (cursive)
• Georgia (mono space)best serif online traditional, more moedern than TNR
• Impact (serif) for print, bold only in short headlines online
• Times New Roman (serif) 12+ not good online
• Trebuchet MS (sans serif) 10+ modern, simple, edgy, readable
• Verdana (sans serif) most readable online, even small, modern, professional

Fonts and Colors

• At most 4 colors and 3 typefaces of fonts in main areas.
• Use size, boldface and/or color to show importance.
• All-cap text reduces reading speed by 10%. Use only for short headlines and shouting.
• Black on white or dark on cool light color easiest text to read.
• Use contrast colors but not vibrant or bright colors that may vibrate or cause fatigue
• No busy backgrounds with text.
• Red and green are problems with color blindness. (8% men, .5 women) Use alternate clues.
• View screen in grayscale to see if contrast is good.

Text images bad because:

• graphics cause file bloat
• not searchable
• not selectable for use in word processing or map searching
• doesn't scale or resize
• screen readers can't read - must use alternate text, too.

Moving Text bad because:

• looks like advertising
• foreigners may have to look up words as they read
• takes control away from readers
• static text can be read faster
• people may have to wait
• some disabilities can't read easily

web usability notes

Navigation and Information Architecture
Be consistent with navigation on each page.
Don't make users hover to see navigtion or use moving navigation.
Don't make identical links
Don't use ambiguous names for links.
If using vertical dropdown menus, use short menu list
If using multilevel horizontal fly-out menus, keep level to two
Long descriptive names don't work well in dropdown or flyouts
Don 't use blue text for nonlink text
Colored text, underlining and highlighted hovers help tell clickability.
Make it clear when colored boxes or graphics are buttons.

I have now spent hours and hours on the Multimedia Training site put out by Berkeley University. I went through part of this site at the beginning of the semester, and decided to go over the rest of it at the end. It has SO much good information in an easy to understand format. It goes into the basics of much of what will be used in the creation of a multimedia story. Perhaps the only problem I find with it is that because it is so inclusive of so many of the techniques and specifics of everything from how to shoot and edit video to how to build a website that it is hard to remember much if the student is a beginner and the site is viewed for too long at a time. So when I reviewed what I had already read, I found myself wanting to save all of the pages in a folder for later use, which I may take the time to do another day. My brain got so tired trying to remember all the specifics that I read, that I had to go take a three-hour nap!

web usability notes

Five biggest causes of user failure:

• Search

1. provide a box 30 characters wide on the top right of each page where users can type words
2. a clickable button labeled Search, and a list of linear, prioritized top results with a clickable headline followed by 2-3 line summary that appears on a new page
3. maybe a spelling check that asks "did you mean?"
4. Build Best Bets to answer queries on

• product and brand names, with product page as top hit
• product numbers, SKUs, etc.
• category names with main page for each category's top hit
• names of top execs and staff with biography pages as top hits

if you run paid ads on SEs, track visits, (if conversion rate to those who buy is 10% and u make $2 profit from each, you can bid up to $19 per ad. don't include content page ads from ad network--don't use conversion trackers from SEs. keep profits a secret.)

Ok SE techniques:

Linguistic SEO - use single & multi-word phrases customers know and use in headlines use things like Yahoo's Keyword Selector Tool to get suggestions for reltatedc terms. an frquencey of search by users.use words for problem instead of solution.

Information Architecture - SEs use the number of links to place sites

1. links from page to page should use plain html & look like they describe regular Web pages outside your site. no ?'s.
2. Clean path of links from homepage to any page you want indexed in SEs.
3. Anchor text for links should describe most important function of each page
4. Use clear text to describe a link to a page
5. Make more links to main concept page than to lesser pages. More links to higher pages.
6. Use breadcrumb trail with each category name as anchor text.
7. Include links to your site in press releases, etc.

Reputation SEO

Try to get links to your pages from reputable sites.

Have simple URLs for each page.

Keep URL alive foredver

If desire, sub your site to paid directories, altho they won't rate as high.

• Content
• Product Information
• Workflow

web sites

completed tasks:
#2 web site for archaeology class
read about 3/4 of Prioritizing Web Usability
completed more Dreamweaver tutorials
checked on purchasing Dreamweaver, Photoshop CS, Premiere Pro

On one hand I am frustrated today, and on the other I am relieved. I finished my second web site, however, I am not happy that I was able to incorporate so few things I've recently learned into it. However, it is better than the first version I did. I totally forgot how to work CSS and although I took the appropriate tutorials on Lynda.com, sometimes there is something that I can get stuck on when using computer software that I just can't seem to figure out the answer to. I finally did, and was able to do the CSS for the formatting of text, but the studying and research for the site and the time it took me to get "unstuck" meant that I didn't end up making improvements that I had wanted to make. For instance, this is still a rectangular-dominated site with tables inside of one big table. I want to make a more sophisticated site with a more artistic layout. I think that I will dedicate most of the remaining time in the semester (through exam week) on studying for this class. I believe that I will choose some web sites I really find artistic and open them in Dreamweaver to see if I can get the source code to examine. (To prof. Wang: If you have the links to any sites that you think are really artistic, feel free to email them to me.)

Web Usability

Prioritizing Web Usability
Jakob Nielsen & Hoa Loranger

After giving up on waiting for this book to become available at a library in Tampa, I sent for and finally received the book via the mail. This is a summary of some of the first sections I read.

The notes listed below are by no means meant to be a summary of this book. They are instead meant to be used as an outline of parts of the book that I either want to make sure to remember, or those that I did not know before, but find important.

Guidelines for deep-link users
Tell people where they are and where they can go:

· Company name of log in upper left corner
· Direct, one-click link to homepage
· Search -- preferably in upper right corner
· Breadcrumb trail – links to current location and backtrack

Remember users may not have seen previous pages and info.

HOMEPAGES
Users went to homepage 40% of the time.
Users look at homepage for 30 seconds and scroll minimally.
Interior pages may be viewed for 60 seconds.

4 things a homepage should show:

· What site?
· Benefits offered user
· Something about company and latest products or developments
· How to get to most relevant section for users choices

If linking to different Web sites, show their names or a clear description, not just their URLs.

Screenful = one screen set at 1024 x 768 pixels

TEXT

Write at 8th grade level for adult users.
Vast majority of users spend almost half their time on content areas.

SEARCH ENGINES

When users go to Web, they go to search engine 88% of the time.
4 ways to get value from SE visitors:
· Offer flytrap content to attract users - provide narrowly-focused pages with answers to common problems These should perform well in SEO – use clear headlines.
· See also links to services
· Provide analysis and insight from a unique perspective with a striking personality.
· Publish a newsletter with additional tips and useful info.

SERP (search engine results page)
93% of users only visited the first SERP with 10 search results plus ads
53% looked only at hits above the fold (visible w/o scrolling)
51% of clicks went to #1 search spot
16% to #2 spot
6% to #3 spot

· Sponsored listings
· Organic listings
· Aim for top spot for all important keywords
· If you have a choice between ninth or tenth, pick the bottom spot on the list
· If you can’t get a decent organic ranking, consider running search ads for important terms
Companies bid for keywords and top 8 bidders’ ads shown

Accountability: you can track results of ad expenditures by numbers of click-throughs and extent to which they turn into spenders.
The higher the worth of a new visitor the more th bid to attract them.

.
Reasons to improve sites
Links from other sites, word of mouth, offline advertising, etc. plus organic results lead to your sites

Scrolling
Most users don’t scroll – only 42% saw info on second screen below fold. Only 14% past second screen.

Search engine and interior pages most frequently scrolled.

Standards
Ensure users:
· Know what features to expect
· Know how they will look in the inteface
· Know where to find these on the site and page
· Know how to operate each to achieve goals
· Don’t need to ponder meanings of unknown design elements
· Don’t miss important features because they overlook a non-standard design element
· Don’t get nasty surprises

Videos
No longer than 1-2 minutes.
Foraging
ways to enhance information scent:

ensure links and category descriptions explicitly describe what users will find at the destination and can clearly identify the trail to the prey as the only one.
Don’t use made-up words or slogans.
Remind users they’re still on the path by providing feedback about their location & how it relates to their tasks.
Support short visits, be a snack
Encourage users to return with newsletters, etc.
Address users’ immediate needs.
Return on investment at: www.nngroup.com/reports at Return on Investment


Eight problems
· Links don’t change color when visited
· Back button disabled
· Opening new browser windows
Distrupts expected experience
Pollutes screen with unwanted objects which may cause crashes
Hampers ability to return to visited pages
Obscures the current
Makes links seem inactive because they are in an obscured window
· Pop-up Windows
· Design elements that look like Ads
Users get Banner Blindness and avoid ad-like bright or animated material
· Violating World-Wide Conventions
· Usless Content and Bad Writing
· Dense Blocks of Content
o Write half as many words for web as for print
o 25% if for those with little education
o Start with the conclusion
o Human short-term memory hols about 7 chunks of information


Most Hated Ad Techniques
· Pop-ups
· Slow loads
· Tricks you into clicking on it
· No close button
· Covers up what you are trying to see
· Doesn’t say what it is for
· Moves content around
· Occupies most of the page
· Blinks on and off
· Floats across the screen
· Automatically plays sound