Designing an effective web user interface
SEO
URL construction
make 'hackable' URLs
include relevant title words
avoid long query string parameters
make URLs 'breadcrumb-y'
HTML
header
meta description
H1..Hx
body contents
img alt tags
submit sitemap - see sitemap.org
Analytics
URLs
If you're using Google Analytics (not sure about other products), there is a difference between the following URLs: http://www.abc.com http://www.abc.com/ (note trailing "/") http://www.Abc.com/ (note casing) http://www.abc.com/home/default.aspx (the canonical URL) Whilst it's tempting to "funnel" all of these into the same place using routing tables / regular expressions, this can cause problems when interpreting the analytics (same logical page appearing multiple times). A more robust approach is to define which URL you want, and then use an HTTP 301 to redirect non-canonical URLs through the URL.This then becomes the canonical URL for the page. NB This approach could obviously get out of control if you have different URL formats spread throughout your own site - the first step in getting this right is to ensure that wherever you explicity reference a page within your site you use the canonical URL. This approach is really designed to clean up up poor external references.
define canonical URLs
URL casing is important
use 301s, do not funnel
goal visualisation
use distinct pages
site overlay
JS links not picked up
ensure common casing
user-defined variables
anything worth capturing?
A/B testing
event logging
What events should you be capturing, and how?
event category
event action
event label
Information Architecture
user experience
Whilst it may seem like a great idea to pack everything onto a single page with lots of clever AJAX making the page update itself, this isn't generally how people interact with site. Try and separate "read" from "write" interactions. When someone is updating their user profile they're not mentally still shopping, so don't bombard them with recommendations at that point. Equally, when people are browsing the site, don't expect them to fill in forms.
page interactions
Try and guide users through a process - avoid long forms, collect data in smaller chunks.
read vs write
Do you have distinct read and write (edit) use cases? Is this reflected in the site design?
data
You've designed a perfect looking wireframe/design, but what happens if there is not enough data, or too much - how does the site handle this?
too little (sparse)
too much (flow)
Design
colours
fonts
iconography
style guide
consistency
creative elements
Development
page weights
Page loading is a critical KPI for a website - try and make your pages as light as possible.
set goal (50KB, 100K, 500K, 1MB?)
measure cached / uncached
performance
Performance is critical on the web. It doesn't matter how beautiful your site is if it never loads or the user gets bored waiting.
home page
static pages
transactional pages
caching, can static content be served from a CDN?, HTML output cache, Distributed cache, Reverse proxy, local browser cache, use ETags for static content, use HTTP headers correctly, think about expiry times, measure cache effectiveness
browsers
Is there anything in your design that will be difficult to develop in a x-browser environment.
IE6 or not?
browser sniffing
software
HTML, are you targeting HTML5 capabilities?, is your HTML XHTML-compliant - does it need to be?
CSS, which CSS selectors are you using?, which version of CSS are you targeting?
javascript, client-side libraries, dojo, jquery, mootools, YUI, performance
plugins, Flash, Silverlight
Testing
can the site be tested automatically?
does the site rely on random query string IDs?
default missing images - use 307
When using a default "image unavailable" for missing images, use an HTTP 307 redirect to the default image, rather than serving the image directly with a 200 OK message. That way missing images can be tracked automatically using test toosl
Accessibility
which standards are you targeting?
site degradation
does the site work without JS?
how does the site look without CSS?
Multi-channel
screen size
mouse, remote or finger
supported functionality
replicate
complement
Security
standards
SafeHarbor
PCI
