HCI, usability and web design info

A collection of information covering usability, UX and design for web use

Keith’s ‘Quick tips’ on how to annoy your visitors:

• Splash screen that says ‘click to enter’.
• Using flash to hide navigation controls in unusual places.
• Thinking you have a revolutionary approach to site navigation and not trying it out with real users.
• Requiring people to register just to collect information about them.

Article Index

• HCI and usability
• Web design
• Using images on sites
• Using CSS and Standards

Why usability?

Keith Cooper spent several years engaged in usability research and consultancy at the HUSAT Research Institute in the UK.

During this time he became very aware of the differing requirements that push project development teams away from user centred design.

We still keep a usability section on the Northlight images site to be of use to some of our clients, who are using our photos in their output.

If there was one tip to pass on it would be that:

“Once you understand enough details of a system to alter it, then you should no longer assume you can think of it from a user’s point of view.”

Selling usability as a concept to the ‘suits’

This quote is from an interview with Jared Spool (well worth reading) and sums up why you never mention usability straight out when trying to influence the people with the money.

“I learned quickly that business executives didn’t care about usability testing or information design. Explaining the importance of these areas didn’t get us any more work. Instead, when we’re in front of executives, we quickly learned to talk about only five things:

• How do we increase revenue?
• How do we reduce expenses?
• How do we bring in more customers?
• How do we get more business out of each existing customer?
• How do we increase shareholder value? “

Articles/notes on usability issues

• Keith’s usability thoughts are in a short article.
• ‘The best usability tips’
  Heuristics and rules of thumb in design.

Usability Info

If you would like to discuss any of the issues on this page, please feel free to contact us.

HCI and usability

Links on the web die, so some of these are WayBackMachine archives (WB)

• http://www.webpagesthatsuck.com/
  The title says it all…
• http://ergo.human.cornell.edu/AHTutorials/interface.html
  Web design guidelines from Cornell University
• http://www.iarchitect.com/
  A guide to usability from Isys (check out the hall of shame!) (WB)
• http://www.hcibib.org/
  The HCI bibliography- very large collection of resources
• http://www.usabilityfirst.com/glossary/cat_0.txl
  Usability glossary, from Usability First
• http://dmoz.org/Computers/Human-Computer_Interaction/
  The open directory (DMOZ) HCI collection
• http://www.websitetips.com/color/
  Lots of info about the use of colour on sites. Includes important web design information about colour blindness
• http://www.uie.com/
  Useful articles and info – challenging some of the usability myths you may hear.

Web design

• http://www.creativemac.com/index.jsp
  The Creative Mac site
• http://spade.ncl.ac.uk/ucs/web/design.html
  Basic web design guidelines (WB)
• http://cybermed.ucsd.edu/Web_design/SMA.html
  Some basic guidelines for Web design (WB)
• http://www.nngroup.com/topic/writing-web/
  A guide to writing styles, for web use
• http://www.wpdfd.com/
  Web pages for designers – tips/tricks (WB)
• Web browsing by Photographers
  A short survey of the web browsing habits of some pro photographers – in our articles section
• http://www.uie.com/browse/design_strategies/
  Articles on web design straegies – with a good emphasis on usability

Using images on sites

• Saving photos for the web
  Some tips on compression, sharpening and colour management for web photos from Keith.
• Copyright and Intellectual Proprty info is in our Copyright section.

Using CSS / standards

• http://www.onlinewebdesigndegree.com/resources/web-design-with-style-ease-and-css/
  Comprehensive guide for those new to CSS, and tips that experts may have forgotten (WB)
• http://www.whoishostingthis.com/resources/css3/
  Good introduction to CSS3
• http://www.nypl.org/styleguide/
  Style guide from the New York Public Library. A good starting point for your next web project using XHTML and CSS – very well written (WB)
• http://www.uie.com/browse/web_standards/
  Articles on the use of web standards
• http://www.meyerweb.com/eric/css/
  Lots of useful CSS related info from Eric Meyer.
• http://jigsaw.w3.org/css-validator/
  Validate your CSS at the W3C
• http://www.blooberry.com/indexdot/css/propindex/all.htm
  CSS property index – good quick reference