Web Design & Development Trends Presentation

5,261 views

Published on

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

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
5,261
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
272
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Web Design & Development Trends Presentation

  1. 1. User Centered Approach To Website Design Richard Bowden RB Consulting 25th May 2009 RB Consulting Engineers Ireland
  2. 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. 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. 4. Design Principles  Usability  Usefulness  Accessibility RB Consulting Engineers Ireland
  5. 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. 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. 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. 8. Usability on Amazon RB Consulting Engineers Ireland
  9. 9. Usability on confused.com RB Consulting Engineers Ireland
  10. 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. 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. 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. 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. 14. Tools for the design process  Storyboarding  Persona analysis  Wireframes RB Consulting Engineers Ireland
  15. 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. 16. Sample storyboard Source: d11.org RB Consulting Engineers Ireland
  17. 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. 18. Wireframes Source: totheweb.com RB Consulting Engineers Ireland
  19. 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. 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. 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. 22. Technology – Open or Proprietary ? Best to focus on open standards RB Consulting Engineers Ireland
  23. 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. 24. Questions & Comments  Email: rb@rbconsulting.ie  Twitter: @rbconsulting  Website: www.rbconsulting.ie RB Consulting Engineers Ireland

×