A 25 Oct
- An online magazine “for people who make websites”.
Book: About Face 3 by Alan Cooper
- Covers “the essentials of interaction design”.
Aesthetic-usability effect
- Studies have shown that “aesthetic designs are perceived as easier to use than less-aesthetic designs” [Universal Principals of Design, p18].
- This is a solid counter-point against those that claim “ugly sites work better”; this is an opinionated fallacy.
Accessibility
- The principal of accessibility in web design is to ensure a site is usable by people with a diverse range of abilities.
- Most people think first of blind users when dealing with accessibility, but it extends to other visual disabilities (impaired vision, colour blindness), motor and mobility disabilities (tremors, muscle slowness, Parkinson’s Disease and so on), auditory disabilities (deafness or impaired hearing), photo-epileptic seizures caused by flashing effects and cognitive disabilities (learning, problem solving and poor logic skills).
Affordance
- The physical qualities of an object that suggests how it might be used.
- On the web, this applies to the look and “feel” of an object.
- Think gradients on buttons, grippies on dragable controls, depressed hover effects on clickable elements.
AJAX
- There is a general misunderstanding of what AJAX is; AJAX is nothing a user can see. It is not animated effects.
-
AJAX lets a web developer make a call to the web server for small amounts of information. It saves time and bandwidth and provides more more fluid user workflows by avoiding the reload of the entire page.
Alt Attribute
B 25 Oct
Banner blindness
- Users ignore flashy, graphical banners.
- Has been proved and disproved over the past decade.
- Overall, most agree to keep ads simple, relevant to the main content of the page, use high contrasting colours. Red works well.
- Position ads within flow of content.
Bottom-up information architecture
- Based on reality that most first-time visitors to site will not enter through home page (they’ll search, click an ad, click a link on another page).
- Instead of introducing visitor to structure of site from top-down (home page, sections linked from that and their sub-sections), use navigational aids that answer these user questions:
-
Where am I?
- What’s here?
- Where can I go from here?
Breadcrumb
- A very valuable navigational aid.
- Exposes path to current page and levels above it.
- Based on reference to Hansel and Gretel tale.
Book: Bulletproof Web Design
C 25 Oct
Call to action
- Include clear, functional call-outs to users after delivering benefits or product or service (endpoint, closure).
- Never count on user being overly proactive and looking around your page or site to take the next step.
- Use design styles consistently across site to build positive convention.
Chunking
- Gather related content for easier processing.
- This is good practice when nature of content is quite varied.
Confirmation
- Confirmation prompts are the enemy of a fluid, uninterrupted workflow.
- Developers push responsibility on users, assuming that every task is a possible mistake.
- Solution is Forgiveness, below.
Consistency
- A fundamental principal of good design.
- Consistency in web design means styling similar elements in similar ways.
- For example, if all error messages are red (and nothing else on the site is), mistakes will always be clear to users.
Content
- Without exception, content is king.
- If you don’t have good content, you don’t have anything.
Conventions
- Don’t re-invent the wheel.
- Certain web design conventions exist simply because they work.
- Conventions let a visitor land on a new site and begin using it right away because it uses standard design techniques they’re already familiar with.
- Common conventions include: logo / site title in upper-left corner, underlines for links (often blue), shopping-cart links in top-right corner…
D 25 Oct
Deprecated elements
Depth of Processing
- Information that is deeply analysed can be better remembers than information that is not.
- Depth of information is improved by presenting the same information through different media.
- Try explaining the benefits of your product with some summary text, short bullet-points, diagrams and even brief videos.
Book: Designing with Web Standards by Jeffrey Zeldman
Doctype
Book: Don’t Make Me Think by Steve Krug
E 25 Oct
Em
- Relative sizing, alternative unit to pixels.
- Most commonly used for styling type, it can be used anywhere you specify a dimension in CSS.
- Use EMs to increase accessibility by providing choice to those that want to increase the size of the text.
Entry point
- Provide a clear and unambiguous set of entry points for your visitors (based on their goals).
- Don’t hope they’ll spend time looking for what they want to find (or what you want them to find).
F 25 Oct
Face-ism ratio
Fitt’s law
- Says that “the time required to move to a target is a function of the target size and distance to the target”.
- Translation: increase the clickable areas of you links and buttons.
Five hat racks
- You have five choices when categorising any collection of items; “five hat racks”.
- They are category, time, location, alphabet, continuum [Universal Principals of Design, p84].
Fixed width layout
- The opposite of a fluid layout.
- Most common, most straight-forward.
- See resolution dependent layout.
Flash
- Situations in which it is appropriate is debatable.
- As a rule of thumb, only use Flash if what you need cannot be achieved with simpler, standard technologies and don’t break conventions (reinvent the wheel).
Flexibility-usability Tradeoff
- As the flexibility if a system increases, it becomes less usable [Universal Principals of Design, p86].
- Solution: make opinionated sites and apps for the right kind of people (don’t be everything to no-one)
Fold, The
- Area where bottom of screen cuts-off content.
- Use fold to your advantage: keep additional, otherwise distracting content below fold.
- Encourage scrolling by cutting content areas.
Forgiveness
- Designs should cater for mistakes, allow undo [Universal Principals of Design, p88].
G 25 Oct
Global navigation
- When consistent across the site, ease of navigation is improved massively.
Graceful degradation
- Provide for visitors with sub-optimal systems.
- For example, if user doesn’t have Flash, replace with an image.
H 25 Oct
Hierarchical information presentation
- Use a clear visual hierarchy when presenting information on the web.
- For example, article headings should be large and given much greater priority to paragraphs of content.
Hierarchical navigation
- Balance between broad and shallow structures [Information Architecture for the World Wide Web, p70].
I 25 Oct
Information architecture
- Defined as “the combination of organisation, labelling, search and navigation systems within web sites” [Information Architecture for the World Wide Web, p4].
- A site with good information architecture can be used efficiently; visitors can find what they want with ease.
Book: Information Architecture for the World Wide Web by Peter Morville, Louis Rosenfeld
Book: The Inmates are Running the Asylum by Alan Cooper
L 25 Oct
Labels
- A label, the XHTML element, describes an input control.
- From an accessibility point of view, users can better use forms.
- From a usability point of view, users can click on labels.
Landing page
Lightbox
Liquid layout
- A liquid layout will expand (usually indefinitely) with the size of the browser screen.
- Can cause readability problems; line lengths become too long.
M 25 Oct
Mapping
- Relationship between controls and their effects.
- For example a button on the right, pointing right should bring you forward in a process, since right is the convention in western world for moving forward (look at back and forward buttons).
Microformats
- Microformats are “a way of adding simple markup to human-readable data such as events or contact details so that the information in them can be extracted by software and indexed”.
- The most commonly used Microformat is the hCard, which defines a person’s contact details (and can be easily exported into your address book software).
O 25 Oct
Ockham’s Razor
- Given the choice between functionally equivalent designs, the simplest should always be chosen.
- Remember this when building web applications, forms, navigation structures, page layouts.
- Extra complexity is redundant and hence, a distraction.
P 25 Oct
PDF
- There’s a time and place for PDFs on the web; it is never to present content that is to be consumed immediately by the user.
Performance Load
- The greater the effort required, the less likely a task will be accomplished successfully.
- In form design, cut to the chase and make them as simple as possible to reduce errors (and also increase participation).
- See Ockham’s Razor.
Picture superiority effect
- Use images to increase recollection; blatantly obvious logo iconography can be very useful!
PNG
- Use PNGs over GIFs for better compression and quality.
- PNGs support alpha-transparency, unlike GIFs with binary transparency.
- Watch out for colour model issues though!
Book: Prioritising Web Usability by Jacob Neilson
Prototyping
- Prototyping isn’t used enough in web design. Why not start a project by jumping right into a design then using it as a talking point for what the final site should be (instead of creating exhaustive and ambiguous spec documents).
Proximity
- Items that are close together are perceived to be related. Group related layout elements, navigation links for increased usability.
R 25 Oct
Resolution dependent layout
- Fixed-width layouts that adapt to screen widths in limited ways.
- Much safer than unconstrained liquid layouts.
Rule of Thirds
- Try layout grids based on divisions of three.
S 25 Oct
Selectors
Semantic markup
- Using most meaningful XHTML elements to organise our content.
- Comes before style; for example, h1 rather than <div class="large">
sIFR
- sIFR is Scalable Inman Flash Replacement.
- Let’s us use font of choice for headings (and more).
- Uses Flash with embedded font to replace normal text.
Signal-to-noise ratio
- For increased usability, reduce noise as much as possible.
Similarity
Specificity
U 25 Oct
Unicode
Book: Universal Principals of Design, The by William Lidwell, Kritina Holden, Jill Butler
Usability
- The ease with which people can achieve their goals on your site.
- Steve Krug summarises it well with “don’t make me think”.
User-centred design
V 25 Oct
Validation
von Restorff Effect
- A basic phenomenon of the human memory that makes us recall noticeably different things.
- Differentiate with design to be remembered!
W 25 Oct
Web standards
Web 2.0
- No one really knows what it is, but it’s got nothing to do with design.
- The “web 2.0 look” is simply a product of the design trends common in new sites a year or two ago.
Web-safe fonts
- We’re limited in what fonts we can use on a site.
- Always back-up your choice of font with a generic definition (for example, “sans-serif”).
- Tahoma is not web safe!
Wireframes