A FEW words on Web Design and Usability and Accessibility
* Textbook's Chapter 7 is a reasonable intro,
but NOTE this is a HUGE topic!!
* also rec'd: Steve Krug, "Don't Make me Think"
* and Donald Norman, "The Design of Everyday Things"
* our hypothesis here is that USABILITY and ACCESSIBILITY
are IMPORTANT goals for "good" web design
* users likely JUST WON'T BOTHER with a site they find to be:
* confusing
* difficult to use
* even just ugly
...IF they have a choice;
* usability - from Chapter 7 of course text:
"the ability of your site to be UNDERSTOOD and LEARNED by
users who visit it"
* accessibility - same source:
"the practice of making sites usable by people of all
abilities and disabilities"
* while we can't cover this fully in one lab,
there ARE some rules and guidelines and principles
that can HELP you get started in some good habits...
The typical user...
-------------------
* Krug's First Law of Usability:
"Don't make me think"
* think of user as impatient, in a hurry, etc.
* your site should be OBVIOUS/simple enough that the
user can figure out how to get what they want
without having to think much about it
* suggestion:
* not think of the site user as being someone
sensible and reasonable like you,
* but instead as being mostly illiterate, impatient,
clumsy, sometimes downright hostile
and desiring instant gratification!
^ if you design with them in mind,
your site will hopefully be more usable as a result;
Some VISUAL DESIGN rules o' thumb:
* Keep each page's text SHORT
* Krug's suggestion: delete 1/2 the words from a page,
then 1/2 of what's left,
and what's left SHOULD be the most important;
* Put the most important content at the TOP of the page
* inverted pyramid a good goal? Most important
text up top, then less important beneath;
* Use FORMATTING to indicate relative importance and
categorization
* make the page easy to SKIM and SCAN
* use headings, lists, bold/italic fonts
* Choose fonts and font sizes carefully
* Sans Serif - considered to work best on monitors
* large enough got "typical" users to read,
small enough not to be annoying or require too
much scrolling, etc.
* Use color and backgrounds and animation and graphics
conservatively
* avoid the temptation to OVERUSE these;
* in many cases, plain black text on a white background
looks best (but CONSIDER CONTRAST if you use other
colors...)
Organize your content
* Tell your user's story! ...make it easy for the user
to do what he/she is wanting to do;
* avoid long pages
* use subpages, overviews
Be consistent
* use the same terminology throughout,
common elements,
common look-and-feel,
common navigation bars,
don't switch locations or relative order of navigation
buttons, etc.
Don't be TOO creative
* unique is not always good --
* Jakob's Law of the Web User Experience -
users spend most of their time on other sites,
and that's where they form their expectations of how
the web works
^ you need to tell THEIR story, remember;
Page Layout - General appearance:
* one ideal to consider:
clean, organized, easy-to-navigate
* Keep it clean
* clutter, chaos, causes visual distraction;
* Leave a liberal amount of WHITE SPACE in your
layout
* Favor left-alignment or justified alignment
* don't center align paragraphs of text, for example;
* Choose column widths, number of columns carefully
* maybe a good idea: to stick with a central column,
maybe a smaller left and right column,
be careful about having more columns than this;
* Use images, headings, white space to break apart text
* avoid wall-o-text
Page Layout - Home Pages
* should contain at least:
* the name and/or logo of the site
* some info about the site's purpose or function
* NAVIGATION links to reach other sections
* Krug's suggestion: think of a home page like a billboard
that a user is reading while driving past it at high speed
Page Layout - Navigation and Links
* some things to avoid:
* Frames - "out of date, ugly, and incompliant of
W3C standards" -- use sparingly when REALLY appropriate
* Splash Screens - unless needed for, say, legal reasons,
they tend to annoy the user
* "creative" navigation systems
* want to provide means for both "overall" and "relative"
navigation for a user within a site;
Forms and User Interface Controls
* minimize the number of fields required
* minimize the number of NON-REQUIRED fields on forms
* group logically-related fields together (tell the user's
story), and arrange fields in a logical order;
* use default values (for good and not "evil"!!)
* use the <label> tag with checkboxes and radio buttons
* use proper input elements:
* SINGLE CHOICE
* radio buttons for < 5 options
* list box for 5-10 options
* list box or text input for >10 options
(maybe consider a text input with auto-completion)
* checkbox for yes/no, true/false
* MULTIPLE CHOICE
* checkbox for a finite number of options
* text box for short lists
* textarea for long lists
ACCESSIBILITY
* does your site work with a screen reader?
* how are images and videos handled?
* how does your site work for users with vision issues,
hearing issues, poor motor skills, alternative
input devices, lack of support for JavaScript and other
technologies, slow or poor internet connectivity,
etc.?
* maybe keep an eye on the developing WAI-ARIA specification
(Web Accessibility Initiative - Accessible Rich Internet
Applications)
* here's a FEW ideas,
see more at the end of Chapter 7:
* Write W3C valid HTML, and run the W3C validators
on your pages
* organize your HTML so it can be read/followed
reasonably without a style sheet
* always use alt tags, captions, etc. on images,
videos
* and more...