Online Health for Teens Online Health for Teens Loes, Nata, Frank, Quan, Brian User System Interaction ::  June 8, 2009
Outline <ul><li>Introduction </li></ul><ul><li>Guidelines </li></ul><ul><li>Prototype </li></ul><ul><li>Evaluation </li></...
Introduction Social - Biological - Psychological -
Aim <ul><li>Redesign a health website for teenagers so that it satisfies their usability requirements </li></ul>
Method  - original website -
Usability Guidelines How to Design for Teens
Usability Guidelines <ul><li>Loranger & Nielsen </li></ul>
Usability Guidelines <ul><li>Loranger, Nielsen </li></ul><ul><li>Visual design  </li></ul><ul><li>Interaction design </li>...
Usability Guidelines <ul><li>Loranger, Nielsen </li></ul><ul><li>Visual design  </li></ul><ul><li>Interaction design </li>...
Prototype Applying Design Guidelines
Main Goals <ul><li>Visual </li></ul><ul><li>Aesthetics </li></ul>
Main Goals <ul><li>Visual </li></ul><ul><li>Aesthetics </li></ul>Clarity & Consistency
Main Goals <ul><li>Visual </li></ul><ul><li>Aesthetics </li></ul>Clarity & Consistency Interactivity & User Engagement
The Prototype <ul><li>Original </li></ul>Prototype
Visual Aesthetics <ul><li>We reused: </li></ul><ul><li>Color palette </li></ul>
Visual Aesthetics <ul><li>We reused: </li></ul><ul><li>Color palette </li></ul><ul><li>Page division </li></ul>1 3 2 1 3 2
Visual Aesthetics <ul><li>We reused: </li></ul><ul><li>Color palette </li></ul><ul><li>Page division </li></ul><ul><li>Pag...
Clarity & Consistency <ul><li>Original: </li></ul><ul><li>Multiple access points </li></ul>
Clarity & Consistency <ul><li>Original: </li></ul><ul><li>Multiple access points </li></ul><ul><li>However, </li></ul><ul>...
Clarity & Consistency <ul><li>Original: </li></ul><ul><li>Multiple access points </li></ul><ul><li>However, </li></ul><ul>...
Clarity & Consistency <ul><li>Prototype: </li></ul><ul><li>General health info  and  illnesses </li></ul>
Clarity & Consistency <ul><li>Prototype: </li></ul><ul><li>General health info and illnesses </li></ul><ul><li>Teen-releva...
Clarity & Consistency <ul><li>Prototype: </li></ul><ul><li>General health info and illnesses </li></ul><ul><li>Teen-releva...
Interactivity & User Engagement <ul><li>We reused: </li></ul><ul><li>Social networking </li></ul>
Interactivity & User Engagement <ul><li>We reused: </li></ul><ul><li>Social networking </li></ul><ul><li>Update services <...
Interactivity & User Engagement <ul><li>We added: </li></ul><ul><li>Video </li></ul>
Interactivity & User Engagement <ul><li>We added: </li></ul><ul><li>Video </li></ul><ul><li>Mini-quizzes </li></ul>
Interactivity & User Engagement <ul><li>We added: </li></ul><ul><li>Video </li></ul><ul><li>Mini-quizzes </li></ul><ul><li...
Interactivity & User Engagement <ul><li>Next: </li></ul><ul><li>Hit or miss? </li></ul>
User Evaluation Testing the Prototype
<ul><li>Online </li></ul><ul><li>8 subjects </li></ul><ul><li>2 groups </li></ul>Evaluation <ul><li>Introduction </li></ul...
Questionnaire
Results 1 1 Comprehensible 1,5 0,25 Visual 1 0,75 Navigation 0,75 0,25 Pleasure 7,75 7,25 Overall
Discussion What Does It All Mean?
Why are the results such as they are?  <ul><li>The evaluation was not very relevant - group too small </li></ul><ul><li>Th...
Conclusions <ul><li>The main result: very positive, since in no component the new site is evaluated worth than the old one...
What next?  <ul><li>Testing on more users </li></ul><ul><li>Testing deeper: to see, how the users really use the site </li...
Questions? Questions? User System Interaction ::  June 8, 2009
Upcoming SlideShare
Loading in...5
×

Website Redesign for Interface Design Course

1,493

Published on

This was a university assignment for Social User Interface Design. Our task was to find a health website and improve the user experience for teens.

This does not mean that there is anything wrong with the website we chose, but we had to pick an existing one to do a theoretical redesign.

This project was carried out for the User-System Interaction program at the Eindhoven University of Technology by Loes Ruijs, Nata Gredina, Frank van Gils, Quan Cheng, and Brian Pagán
http://usi.id.tue.nl

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,493
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Website Redesign for Interface Design Course"

  1. 1. Online Health for Teens Online Health for Teens Loes, Nata, Frank, Quan, Brian User System Interaction :: June 8, 2009
  2. 2. Outline <ul><li>Introduction </li></ul><ul><li>Guidelines </li></ul><ul><li>Prototype </li></ul><ul><li>Evaluation </li></ul><ul><li>Discussion </li></ul>
  3. 3. Introduction Social - Biological - Psychological -
  4. 4. Aim <ul><li>Redesign a health website for teenagers so that it satisfies their usability requirements </li></ul>
  5. 5. Method - original website -
  6. 6. Usability Guidelines How to Design for Teens
  7. 7. Usability Guidelines <ul><li>Loranger & Nielsen </li></ul>
  8. 8. Usability Guidelines <ul><li>Loranger, Nielsen </li></ul><ul><li>Visual design </li></ul><ul><li>Interaction design </li></ul><ul><li>Multimedia </li></ul>
  9. 9. Usability Guidelines <ul><li>Loranger, Nielsen </li></ul><ul><li>Visual design </li></ul><ul><li>Interaction design </li></ul><ul><li>Multimedia </li></ul><ul><li>Navigation </li></ul><ul><li>Writing for the web </li></ul>
  10. 10. Prototype Applying Design Guidelines
  11. 11. Main Goals <ul><li>Visual </li></ul><ul><li>Aesthetics </li></ul>
  12. 12. Main Goals <ul><li>Visual </li></ul><ul><li>Aesthetics </li></ul>Clarity & Consistency
  13. 13. Main Goals <ul><li>Visual </li></ul><ul><li>Aesthetics </li></ul>Clarity & Consistency Interactivity & User Engagement
  14. 14. The Prototype <ul><li>Original </li></ul>Prototype
  15. 15. Visual Aesthetics <ul><li>We reused: </li></ul><ul><li>Color palette </li></ul>
  16. 16. Visual Aesthetics <ul><li>We reused: </li></ul><ul><li>Color palette </li></ul><ul><li>Page division </li></ul>1 3 2 1 3 2
  17. 17. Visual Aesthetics <ul><li>We reused: </li></ul><ul><li>Color palette </li></ul><ul><li>Page division </li></ul><ul><li>Page layout </li></ul>
  18. 18. Clarity & Consistency <ul><li>Original: </li></ul><ul><li>Multiple access points </li></ul>
  19. 19. Clarity & Consistency <ul><li>Original: </li></ul><ul><li>Multiple access points </li></ul><ul><li>However, </li></ul><ul><li>Here, only conditions </li></ul>
  20. 20. Clarity & Consistency <ul><li>Original: </li></ul><ul><li>Multiple access points </li></ul><ul><li>However, </li></ul><ul><li>Here, only conditions </li></ul><ul><li>There, no teenager section </li></ul>
  21. 21. Clarity & Consistency <ul><li>Prototype: </li></ul><ul><li>General health info and illnesses </li></ul>
  22. 22. Clarity & Consistency <ul><li>Prototype: </li></ul><ul><li>General health info and illnesses </li></ul><ul><li>Teen-relevant menu items </li></ul>
  23. 23. Clarity & Consistency <ul><li>Prototype: </li></ul><ul><li>General health info and illnesses </li></ul><ul><li>Teen-relevant menu items </li></ul><ul><li>Clear breadcrumb navigation </li></ul>
  24. 24. Interactivity & User Engagement <ul><li>We reused: </li></ul><ul><li>Social networking </li></ul>
  25. 25. Interactivity & User Engagement <ul><li>We reused: </li></ul><ul><li>Social networking </li></ul><ul><li>Update services </li></ul>
  26. 26. Interactivity & User Engagement <ul><li>We added: </li></ul><ul><li>Video </li></ul>
  27. 27. Interactivity & User Engagement <ul><li>We added: </li></ul><ul><li>Video </li></ul><ul><li>Mini-quizzes </li></ul>
  28. 28. Interactivity & User Engagement <ul><li>We added: </li></ul><ul><li>Video </li></ul><ul><li>Mini-quizzes </li></ul><ul><li>Symptom checker </li></ul>
  29. 29. Interactivity & User Engagement <ul><li>Next: </li></ul><ul><li>Hit or miss? </li></ul>
  30. 30. User Evaluation Testing the Prototype
  31. 31. <ul><li>Online </li></ul><ul><li>8 subjects </li></ul><ul><li>2 groups </li></ul>Evaluation <ul><li>Introduction </li></ul><ul><li>Tasks </li></ul><ul><li>Questionnaire </li></ul>
  32. 32. Questionnaire
  33. 33. Results 1 1 Comprehensible 1,5 0,25 Visual 1 0,75 Navigation 0,75 0,25 Pleasure 7,75 7,25 Overall
  34. 34. Discussion What Does It All Mean?
  35. 35. Why are the results such as they are? <ul><li>The evaluation was not very relevant - group too small </li></ul><ul><li>The geographical situation of the users did not allow to make deeper research on how they use the sites </li></ul><ul><li>So we were able to make only very basic quantitative estimations </li></ul>
  36. 36. Conclusions <ul><li>The main result: very positive, since in no component the new site is evaluated worth than the old one </li></ul><ul><li>Moreover: almost in all components an increase, and sometimes a strong increase </li></ul><ul><li>In their informal estimations the users also gave positive feedback for redesigned prototype </li></ul>
  37. 37. What next? <ul><li>Testing on more users </li></ul><ul><li>Testing deeper: to see, how the users really use the site </li></ul><ul><li>To make prototype even more comprehensible </li></ul>
  38. 38. Questions? Questions? User System Interaction :: June 8, 2009

×