This is a presentation I gave to Engineers Ireland on aspects of web development and design

1. User Centered Approach To
Website Design
Richard Bowden
RB Consulting
25th May 2009
RB Consulting Engineers Ireland

2. What are we going to talk about…
 Business case for web based solutions
 Principles of web development
 Tools for web design
 A user centered approach to web development
 Agile development as an approach
 Technology – open or proprietary
RB Consulting Engineers Ireland

3. Web Applications–The Business Case
 Are you on Twitter, Facebook, LinkedIn etc ?
 How do I know if I’m doing the right thing?
 Balanced Business Scorecard
 Financial,
 Customer,
 Internal Process
 Staff objectives
 Measurable kpi’s
RB Consulting Engineers Ireland

4. Design Principles
 Usability
 Usefulness
 Accessibility
RB Consulting Engineers Ireland

5. So…Usability….
 Usability is all about ease of use
 Krug’s principle of ‘don’t make me think’
 Visual design – professional and inviting
RB Consulting Engineers Ireland

6. Key usability principles
 Where am I
 Finding information easily as a visitor browses
 Visitor feedback in case of a wrong turn
 Navigation – what’s clickable or not
 How do I get to the content I want – site maps
 Navigation links alter according to context – login
screen
RB Consulting Engineers Ireland

7. Additional usability principles
 Consistent use of navigation aids – use of icons /
positioning of links
 Forms – requesting information that makes the visitor
uncomfortable
 Forms – clear indication on what information is
required
 Forms appropriate use of checkboxes, radio buttons
& drop-down lists
RB Consulting Engineers Ireland

8. Usability on Amazon
RB Consulting Engineers Ireland

9. Usability on confused.com
RB Consulting Engineers Ireland

10. Principles of usefulness
 Relevance of information & content
 Access to information – to register or not ?
 Writing for the web requires a unique style
 Content management process
 Readability
 Font size and type
 Colour contrast for text
 Balance of white space and content
RB Consulting Engineers Ireland

11. Accessibility design guidelines
 Be consistent throughout
 Enhance clarity with good design
 Do not convey information with colour alone
 Create contrast between foreground and background
 Avoid any unnecessary animation
 Use multimedia with care
 Create flexible width design
 Avoid frames & pop-up windows
RB Consulting Engineers Ireland

12. Accessibility developer guidelines
 Use code validation tools
 WAVE (Web Accessibility Evaluation tool)
 Directory of validation tools -
http://www.w3.org/WAI/ER/tools/complete
 Avoid using images to display text / Use of alt text
 Spacing and grouping in forms
 Error prevention & recovery assistance
RB Consulting Engineers Ireland

13. WCAG 2.0
 2.0 release in December 2008
 4 principles of POUR
 61 checkpoints across 12 guidelines
 3 categories
 Popular pointers on content
 Developers of authoring & evaluation tools
 User related for browsers and assistive technology
 Technology independent
 Move away from focus on html
 Objectively testable
 Support for developers
RB Consulting Engineers Ireland

14. Tools for the design process
 Storyboarding
 Persona analysis
 Wireframes
RB Consulting Engineers Ireland

15. Storyboarding – Key steps
 Illustrations, images, mockups !
 Visualise how the website will look and flow
 Steps
 Collate information – text and images
 Sort into topics – starting with the broadest !
 For each page – determine title, headings, & content
 Plan the information structure & navigation approach
 Layout your menu structure and page template
 Then place yourself in the user’s shoes and review
RB Consulting Engineers Ireland

16. Sample storyboard
Source: d11.org
RB Consulting Engineers Ireland

17. Persona Analysis
 Distinct set of behaviours personalised – bios,
pictures & names
 Data drawn from user testing, observations & web
traffic analysis
 Don’t confuse with job roles, user roles & actual
people
 Helps to focus on
 Key requirements
 Specific needs of your users
 User behaviour& goals
RB Consulting Engineers Ireland

18. Wireframes
Source: totheweb.com
RB Consulting Engineers Ireland

19. User Centred Design – Key Questions
 What is the user attempting to accomplish?
 Specific tasks and goals in their work
 What information does the user require from the website to
progress their work?
 What’s the format that they would prefer to work with?
 What set of features does the user require from this website?
 What are the user’s expectations about how the website will
work?
 Given the user’s profile in terms of skills and experience, how
can a website better assist the user?
RB Consulting Engineers Ireland

20. User Centred Design – Key steps
 Involve a sample set of users
 Representative in terms of skills & experience
 Identify the requirements via a set of representative
tasks
 Progress the design and development of the website
 Follow-up work after the rollout
 Content management
 Visitor analysis
 Website performance
RB Consulting Engineers Ireland

21. Benefits of an agile development
approach
 A challenge to identify all requirements upfront
 Prioritise requirements into short iterations
 Greater sense of progress and flexibility to adapt
 Borrow aspects of Scrum and Extreme Programming
approaches
RB Consulting Engineers Ireland

22. Technology – Open or Proprietary ?
Best to focus on open standards
RB Consulting Engineers Ireland

23. In Summary….
 Overall rule….It depends
(Steve Krug)
 Build in usability and
accessibility from the start
 Retain flexibility to adapt
RB Consulting Engineers Ireland

24. Questions & Comments
 Email: rb@rbconsulting.ie
 Twitter: @rbconsulting
 Website: www.rbconsulting.ie
RB Consulting Engineers Ireland