Tag Archives: design-patterns

Web Design Research Results

1
Filed under design

Some of the more enlightening/worthwhile results from a number of studies on design and usability conducted by Smashing Magazine, found via their otherwise-ordinary 10 Useful Usability Findings and Guidelines article:

General design decisions taken by the top 50 blogs (part two):

  • 92% use a fixed width layout with 56% varying the width between 951 and 1000px.
  • For body text, 90% use Verdana, Lucida Grande, Arial or Georgia with 78% using a font size between 12 and 14px.
  • Headlines are typically Arial or Georgia (52%), with a font size between 17 and 25px.
  • The front page presents excerpts of 10-20 posts in 62% of cases.
  • 50% offer links to related and/or popular posts.
  • 90% of footers contain copyright information, 40% contain links to About pages and 30% to contact information.
  • 76% provide ad-free articles.
  • 54% provide social icons under the post.
  • 66% display RSS buttons above the main layout area, while a similar percentage use the ’standard’ RSS icon (as opposed to a text link) and employ only one RSS feed.
  • Only 5 blogs use tag clouds (10%) and 11 (22%) use pagination.
  • Nobody cares about standards (only 2 conform).

A study of the typography used on the top 50 blogs touched on some of the above and then went into more detail:

  • Sans-serif fonts are more popular for both headlines and body copy (although not by a large margin).
  • Headlines: Georgia, Arial or Helvetica between 18 and 29 pixels.
  • Body copy: Georgia, Arial, Verdana or Lucida Grande between 12 and 14 pixels.
  • Header font size ÷ Body copy font size = 1.96.
  • Line height (pixels) ÷ body copy font size (pixels) = 1.48.
  • Line length (pixels) ÷ line height (pixels) = 27.8.
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
  • Optimal number of characters per line: between 55–75 (although 75–85 is more popular).
  • Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

100 unspecified sites were used for this analysis of web form structure and design (part two):

  • 93% use single-page sign-up forms.
  • 41% of sites attract visitors by explaining the benefits of registration.
  • Vertically arranged fields are preferred to horizontally arranged fields (86%).
  • 82% of sites don’t ask for e-mail confirmation, although 72% required password confirmation.
  • Only 45% of sites used the thank-you message to motivate users to proceed with exploring the services of the site.

Anti-Patterns

0
Filed under business, entrepreneurship, technology

I’ve written about design patterns a couple of times in the past, but today I discovered anti-patterns: design patterns that “may be commonly used but [are] ineffective and/or counterproductive in practice”.

One of the “key elements present to formally distinguish an actual anti-pattern from a simple bad habit, bad practice, or bad idea”:

Some repeated pattern of action, process or structure that initially appears to be beneficial, but ultimately produces more bad consequences than beneficial results.

The seven types of anti-pattern, with some examples:

  • Organisational: Moral hazard, insulating a decision-maker from the consequences of his or her decision.
  • Project management: Groupthink, whereby members of the group avoid promoting viewpoints outside the comfort zone of consensus thinking.
  • Analysis: Bystander apathy, when a requirement or design decision is wrong, but the people who notice this do nothing because it affects a larger number of people.
  • Software design: Gold plating, continuing to work on a task or project well past the point at which extra effort is adding value.
  • Programming: Cargo cult programming, using patterns and methods without understanding why.
  • Methodological: Golden hammer, assuming that a favorite solution is universally applicable (See: Silver Bullet).
  • Configuration management.

Design Patterns for Errorproofing

2
Filed under design, technology

Persuasive technologies are those which are designed to change the attitudes or behaviours of users. Errorproofing, on the otherhand, is concerned not with behavioural change, but in ensuring certain behaviours are met.

Errorproof technologies, then, are those which “[make] it easier for users to work without making errors, or [that make] errors impossible in the first place”.

Dan Lockton of the excellent Design with Intent compiles a list of eight design patterns for errorproofing a system:

  • Defaults
  • Interlocks
  • Lock-in/out
  • Extra steps
  • Specialised affordances
  • Partial self-correction
  • Portions
  • Conditional warnings

Interaction Design Patterns

0
Filed under design, technology

The Yahoo! Design Patterns Library is what you could call a series of best practices for web interaction designers. Of particular note are the ‘Reputation’ Solution Patterns:

A person participating in a social structure expects to develop a reputation and hopes for insight into the reputations of others, but each designed model of participation and reputation embodies its own set of biases and incentive structures. Balancing these forces determines in large measure the success or failure of a social system.

All released under a Creative Commons attribution license.