Web Design & Development Trends Presentation

RB Consulting Engineers Ireland

User Centered Approach To Website Design

Richard Bowden

RB Consulting

25th May 2009


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


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

Web Applications–The Business Case


Design Principles

Usability

Usefulness

Accessibility


So…Usability….

Usability is all about ease of use

Krug’s principle of ‘don’t make me think’

Visual design – professional and inviting


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


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


Usability on Amazon


Usability on confused.com


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


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


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

http://www.w3.org/WAI/ER/tools/complete


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


Tools for the design process

Storyboarding

Persona analysis

Wireframes


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


Sample storyboard

Source: d11.org


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


Wireframes

Source: totheweb.com


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?


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


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


Technology – Open or Proprietary ?

Best to focus on open standards


In Summary….

Overall rule….It depends (Steve Krug)

Build in usability and accessibility from the start

Retain flexibility to adapt


Questions & Comments

Email: [email protected]

Twitter: @rbconsulting

Website: www.rbconsulting.ie

mailto:[email protected]