7. Design methods

Start with a pattern language

Christopher Alexander's Pattern language was used to plan, design and construct towns and buildings.

Design patterns are the standard solutions to recurrent problems. If we name these patterns so others can understand, we create a language.

The words in a language combined with its grammar or syntax can be used to create beautiful things.

Software developers in the 1990s called on Alexander's and other architectural theorists’ work.

Graham applies the Pattern language principles to website design.

He believes that web usability is the key and ran workshops that further developed his 70 patterns into the 79 calling on eminent web gurus such as Jakob Nielson.

Please find Graham’s 79 patterns listed below.

What is a pattern language?

Aspects of web design Source: Ian Graham, 2003, A pattern language for

web usability, Pearson.

For website design, Graham says there are four considerations. They are:

usability; content; navigation; and aesthetics.

He states that the last three all play a role in

the first.

1 ESTABLISH THE BUSINESS OBJECTIVES * *2 BUSINESS PROCESS MODEL3 ESTABLISH THE USE CASES 4 TIMEBOXES5 GRADUAL STIFFENING6 AUTOMATED TESTING7 USABILITY TESTING * *8 GET-IT?9 RETEST WHEN CONTENT UPDATED10 TWO-YEAR-OLD BROWSER 11 CLASSIFY YOUR SITE12 SITE MAP *13 USER-CENTERD SITE STRUCTURE14 SEARCH BOX 15 SENSE OF LOCATION *16 AESTHETICS *17 CONTEXT-SENSITIVE HELP18 PRIMING AND INTERFERENCE * Utilising cognitive abilities 19 STRUCTURED MENUS * * Graham sees this as pull-down menus only? 20 THE RHETORIC OF ARRIVAL AND DEPARTURE breadcrumbs are great but he ignores accessibility and search problem associated with pull-down menus.21 CANONICAL LOCATION You are here22 SYMMETRY AND IDEMPOTENCE This is if repeated should make no difference at all to the state.23 BREADCRUMBS24 SITE LOGO AT TOP LEFT *25 NAVIGATION BAR * *26 THREE-REGION LAYOUT Grid layout, Tiled working surfaces, Repeated framework27 NO FRAMES ON PUBLIC SITES *28 HOME PAGE 29 TRITE FONTS30 THE HUMAN TOUCH

31 LINKS TO MANY SITES32 AVATAR Consider an animated talking head.33 CONTEXT-SENSITIVE CONTACT LINK34 GO BACK TO A SAFE PLACE35 BACK BUTTON 36 FOLLOW STANDARDS37 PRISONER OF WAR38 KISS Keep It Simple Stupid39 EXPLOIT CLOSURE40 NO MODES Give the user a sense of ownership and control41 FEEDBACK42 DOWNLOAD TIME43 DESIGN PAGES FOR SCANNING44 SHORT TEXTS45 ANCHORS AWAY46 NO UNPLEASANT SURPRISES47 SEPARATE PRINT PAGES 48 SENSE OF PROGRESS49 FINAL SLASH ON URLS50 ACCEPTABLE WORDING51 THE HALT AND THE LAME AND THE STRANGER AT THE DOOR Accessibility52 INTERNATIONALIZATION Use Unicode.53 USE OF COLOR54 TESSELLATE GRAPHICS repeated small graphics.55 CONTENT BEFORE GRAPHICS *56 NATURAL METAPHORS57 WORDS BEFORE ICONS *58 WHITE SPACE SEPARATES CONTENT59 BROKEN BUTTONS no line breaks.60 MAGIC MARGINS Proportional margins, Liquid pages

61 TRACK MULTIPLE IDENTICAL REQUESTS server-side. Feedback.62 UNIQUE NAMES FOR PAGES, TITLES AND META-TAGS63 CONTEXT-DEPENDENT SEARCH CATEGORIES Free text is prefered.64 STORE CONTENT IN A DATABASE * But beware of the search-engine visibility consequences of database-driven sites.65 EQUAL OPPORTUNITY66 AVOID PRE-EMPTION Balance between no-validation and a safely sent form.67 CACHE TRANSACTIONS Cookies and DB use68 RETURN VISITORS69 SUPPORT COLOUR WITH SPATIAL METAPHOR70 WYSIWYG71 MANDATORY FIELDS72 SECURITY AND ENCRYPTION73 OBLIQUE LANDMARKS Partial line of sight, Disabled irrelevant things74 PARANOID SECURITY Big brother75 SENSE OF LOCATION IN WORKFLOW76 CONTENT IS LINKED TO NAVIGATION77 BUTTON GRAVITY One form per page78 PIPELINE INTERACTION Break it up and provide a links with a hidden process.79 DISPLAY THE OPTIONS

Summary

Graham’s work is comprehensive but as he points out not all patterns are applicable

to all web site design.

Many of the patterns can be combined.

His website: www.wupatterns.com/ doesn’t generally adhere his patterns, as is often

the case for those who advocate following their approach.