1. 7. Design methods Start with a pattern language

2. 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?

3. 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.

4. 1 ESTABLISH THE BUSINESS OBJECTIVES * * 2 BUSINESS PROCESS MODEL 3 ESTABLISH THE USE CASES 4 TIMEBOXES 5 GRADUAL STIFFENING 6 AUTOMATED TESTING 7 USABILITY TESTING * * 8 GET-IT? 9 RETEST WHEN CONTENT UPDATED 10 TWO-YEAR-OLD BROWSER 11 CLASSIFY YOUR SITE 12 SITE MAP * 13 USER-CENTERD SITE STRUCTURE 14 SEARCH BOX 15 SENSE OF LOCATION * 16 AESTHETICS * 17 CONTEXT-SENSITIVE HELP 18 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 here 22 SYMMETRY AND IDEMPOTENCE This is if repeated should make no difference at all to the state. 23 BREADCRUMBS 24 SITE LOGO AT TOP LEFT * 25 NAVIGATION BAR * * 26 THREE-REGION LAYOUT Grid layout, Tiled working surfaces, Repeated framework 27 NO FRAMES ON PUBLIC SITES * 28 HOME PAGE 29 TRITE FONTS 30 THE HUMAN TOUCH

5. 31 LINKS TO MANY SITES 32 AVATAR Consider an animated talking head. 33 CONTEXT-SENSITIVE CONTACT LINK 34 GO BACK TO A SAFE PLACE 35 BACK BUTTON 36 FOLLOW STANDARDS 37 PRISONER OF WAR 38 KISS Keep It Simple Stupid 39 EXPLOIT CLOSURE 40 NO MODES Give the user a sense of ownership and control 41 FEEDBACK 42 DOWNLOAD TIME 43 DESIGN PAGES FOR SCANNING 44 SHORT TEXTS 45 ANCHORS AWAY 46 NO UNPLEASANT SURPRISES 47 SEPARATE PRINT PAGES 48 SENSE OF PROGRESS 49 FINAL SLASH ON URLS 50 ACCEPTABLE WORDING 51 THE HALT AND THE LAME AND THE STRANGER AT THE DOOR Accessibility 52 INTERNATIONALIZATION Use Unicode. 53 USE OF COLOR 54 TESSELLATE GRAPHICS repeated small graphics. 55 CONTENT BEFORE GRAPHICS * 56 NATURAL METAPHORS 57 WORDS BEFORE ICONS * 58 WHITE SPACE SEPARATES CONTENT 59 BROKEN BUTTONS no line breaks. 60 MAGIC MARGINS Proportional margins, Liquid pages

6. 61 TRACK MULTIPLE IDENTICAL REQUESTS server-side. Feedback. 62 UNIQUE NAMES FOR PAGES, TITLES AND META-TAGS 63 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 OPPORTUNITY 66 AVOID PRE-EMPTION Balance between no-validation and a safely sent form. 67 CACHE TRANSACTIONS Cookies and DB use 68 RETURN VISITORS 69 SUPPORT COLOUR WITH SPATIAL METAPHOR 70 WYSIWYG 71 MANDATORY FIELDS 72 SECURITY AND ENCRYPTION 73 OBLIQUE LANDMARKS Partial line of sight, Disabled irrelevant things 74 PARANOID SECURITY Big brother 75 SENSE OF LOCATION IN WORKFLOW 76 CONTENT IS LINKED TO NAVIGATION 77 BUTTON GRAVITY One form per page 78 PIPELINE INTERACTION Break it up and provide a links with a hidden process. 79 DISPLAY THE OPTIONS

7. 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 oftenwww.wupatterns.com/ the case for those who advocate following their approach.