User experience design overview for Tufts' School of Medicine web health communication class


Published on

Presentation given July 21, 2010 to the Tufts School of Medicine web health communication class.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Keep it short here - I design…. Under the name Nimble Partners
  • background
  • Interested in people - what their needs are - enabling them to do things successfully on the web
  • My role with clients
  • We’re going to start talking about design by not talking about design. We’re going to start with people, and their situations
  • Who’s looking for and using information on the web? What is their situation?
  • Example: tea cup and coffee mug - both with coffee - will the form effect how you drink?
  • Make this list a hand-out
  • Visual design on the web is just one part of a larger effort - designing the user experience
  • Important distinction - effects the type of designer/skills needed Effects the design and development process Some sites are a hybrid
  • Explain patterns Bring up social media - more closely integrated in an App
  • Any questions before we go on?
  • Back to our criteria: Professional, Helpful, Trustworthy. These elements are from all over the elements “map” - they cross visual design, IA, UI, etc. to make up the overall “experience” What can design do to make something professional?
  • Brand plays in to this: Tone of content affects brand
  • Use the list of visual elements and our 3 criteria when evaluating Address: how can branding be/is being leveraged in these examples - what can Harvard Health Publications or Consumer Reports Health do that a lesser known org can't?
  • Cite UPA preso as example of #1 &2 - Patients like me site - turns user stories into data. Presents the data to empower people to take control of their health #3: Cover article Interactions magazine, design/health specialties at several larger firms in the area How social media fits into an overall design strategy - people want to share health-related data, and sites need to provide the tools to do so. What tools and the extent of the tools depends on the focus of the site. - social is the CORE of the site. NIH - not so much
  • Differences between a site and application: AP: Developer may prototype FIRST SITE: IA may be prototyped and tested before design SITE: content may be developed partly before design, completed before design is complete. Tone of content affects brand Agile - #2-5 done in “Sprint 0”
  • Use MIT medical as examples #2: up front research is needed if: team knows there are problems but not sure what they are, team lacks a shared and adequate understanding of users, lack of team unity/multiple/conflicting priorities #3: we recently worked on a site visual design. The site was moving to a CMS. The team said they would do the IA. They thought that meant defining the site map. Did not realize that it also meant defining content and features at a high level. Did not understand the need to define TEMPLATES.
  • #6: iterative - may be done in 3 steps - home page and 1-2 pages first, selection of direction and refinement - application to @3 more pages/templates, finally applied to all pages/templates #7: what is delivered will depend on a variety of situations - who is creating the code for the site, site or application, etc. How does the design of content fit into the visual design? - Varies depending on if a site or application, if user generated content.
  • Designer or client may create Show samples - high/low
  • “Designing for Care” forthcoming from Rosenfeld Media
  • User experience design overview for Tufts' School of Medicine web health communication class

    1. 5. Agenda <ul><li>Situations to keep in mind </li></ul><ul><li>Elements of visual and user experience design </li></ul><ul><li>Group crit of top health sites </li></ul><ul><li>Process – design activities </li></ul><ul><li>People and roles </li></ul><ul><li>Tips/resources for success </li></ul><ul><li>Q&A </li></ul>
    2. 6. What’s important to keep in mind when designing a health-related site?
    3. 7. Possible situations <ul><li>Consumer user: </li></ul><ul><li>• emotional </li></ul><ul><li>• personal </li></ul><ul><li>• research-mode </li></ul><ul><li>• urgent </li></ul>Professional user: • busy • urgent • research-mode
    4. 8. What does the site need to convey? <ul><li>Professional </li></ul><ul><li>Helpful </li></ul><ul><li>Trustworthy </li></ul>
    5. 9. <ul><li>How can design help? </li></ul>
    6. 10. Design gives form. Form influences perception. Perception influences behavior.
    7. 11. Elements of visual design on the web <ul><li>Organization of elements on the page (layout) </li></ul><ul><li>Feedback of interactive elements </li></ul><ul><li>Colors </li></ul><ul><li>Type styles and hierarchy </li></ul><ul><li>Presentation of navigation </li></ul><ul><li>Tone of voice </li></ul><ul><li>Choice and use of imagery </li></ul><ul><li>Identity elements </li></ul><ul><li>Style of affordances </li></ul>
    8. 12. Elements of user experience on the web <ul><li> </li></ul>
    9. 13. Web as software (applications) Web as linked content
    10. 14. <ul><li>Driven by databases </li></ul><ul><li>Developers may create working applications first </li></ul><ul><li>More about “doing” and less about reading </li></ul><ul><li>Use of “patterns” is key </li></ul>Web as software (applications) 15
    11. 15. <ul><li>Interaction and UI design play major roles in giving form </li></ul><ul><li>Interaction and UI design as scaffolding for visual design </li></ul><ul><li>Designers and developers working closely together </li></ul><ul><li>Visual design as “skin” </li></ul>Web as software (applications) 15
    12. 16. <ul><li>Driven by content </li></ul><ul><li>Designers may be able to do development/ site production </li></ul><ul><li>More about finding content than contributing (less interactive) </li></ul><ul><li>Information architecture plays a major role </li></ul>Web as linked content 15
    13. 17. Elements in the context of designing for health-related sites
    14. 18. Professional <ul><li>Clear </li></ul><ul><ul><li>Presentation of up-front value proposition </li></ul></ul><ul><li>Consistent </li></ul><ul><ul><li>navigation, language, behavior </li></ul></ul><ul><li>Organized </li></ul><ul><ul><li>hierarchical structures for page content and type, restricted color palette </li></ul></ul><ul><li>Appropriate </li></ul><ul><ul><li>imagery that supports content </li></ul></ul>
    15. 19. Trustworthy <ul><li>Limited, relevant advertising </li></ul><ul><li>Appropriate use of professionally designed logo </li></ul><ul><li>No fake photos </li></ul><ul><li>Real credentials, appropriately displayed </li></ul>
    16. 20. Helpful <ul><li>Appropriate language level </li></ul><ul><li>Accessible – download time, use of alt tags, use of colors, type sizes appropriate for audience </li></ul><ul><li>Foreshadowing – UI cues to indicate clickability, other behaviors </li></ul><ul><li>Transparent structure </li></ul>
    17. 21. <ul><li>The elements in practice – how do the top health sites do? </li></ul>
    18. 22. <ul><li>10 Most Popular Health Websites | July 2010 </li></ul><ul><li>Derived from eBizMBA Rank which is an average of each website's Alexa Global Traffic Rank, and U.S. Traffic Rank from both Compete and Quantcast . </li></ul><ul><li>Yahoo! Health (6th last year) </li></ul><ul><li>WebMD .com (1st) </li></ul><ul><li>NIH. gov (2nd) </li></ul><ul><li>MedicineNet .com (3rd) </li></ul><ul><li>MayoClinic .com (4th) </li></ul><ul><li> (5th) </li></ul><ul><li>EverydayHealth (not in top 10) </li></ul><ul><li>WrongDiagnosis (not in top 10) </li></ul><ul><li> (9th) </li></ul><ul><li>HealthGrades (not in top 10) </li></ul><ul><li> </li></ul>
    19. 23. Things are changing fast <ul><li>The social aspect of health is changing. Rather than keep information secret, people WANT to share to help others and further cures. </li></ul><ul><li>Patients are driving change (not Doctors) </li></ul><ul><li>Lots of activity around design and healthcare – some specialization </li></ul><ul><li>People are too important to leave out of the process – designing the experience is important </li></ul>
    20. 24. Process: how it is done
    21. 25. Typical web application/site process <ul><li>business need established and verified </li></ul><ul><li>user characteristics identified </li></ul><ul><li>site/application goals set – metrics for success </li></ul><ul><li>budget/timeframe established </li></ul><ul><li>content/features identified and documented at a high level </li></ul><ul><li>goals for visual/UI defined </li></ul><ul><li>site design – IA, UI and visual </li></ul><ul><li>usability testing </li></ul><ul><li>content development/engineering </li></ul><ul><li>testing/deploying </li></ul><ul><li>repeat steps as needed </li></ul>
    22. 26. Design activities <ul><li>Kickoff </li></ul><ul><ul><li>confirm business goals, users, metrics for success, deliverables, timeframe/budget, content, user types/personas </li></ul></ul><ul><li>Up-front research if needed </li></ul><ul><ul><li>baseline usability testing (test existing site), user observations, interviews </li></ul></ul><ul><li>Define structure </li></ul><ul><ul><li>site map </li></ul></ul><ul><ul><li>wireframe sketches or quick HTML prototype </li></ul></ul><ul><ul><li>define page templates if CMS/application </li></ul></ul><ul><li>Define/confirm feature design if application </li></ul><ul><ul><li>wireframe/schematic sketches </li></ul></ul><ul><ul><li>prototype </li></ul></ul><ul><ul><li>usability testing (recommended) </li></ul></ul>
    23. 27. Design activities, continued <ul><li>Identity design (would be done concurrently with #3) </li></ul><ul><ul><li>separate kickoff for identity design unless simple/basic effort </li></ul></ul><ul><li>6. Visual design </li></ul><ul><ul><li>separate kickoff to define requirements for brand presentation </li></ul></ul><ul><ul><li>creation of 3-4 visual directions applied to sample pages/page templates </li></ul></ul><ul><ul><li>typically @ 12 templates or page types </li></ul></ul><ul><li>Create all final deliverables </li></ul><ul><ul><li>shoot photos, create and specify all graphics, animations </li></ul></ul><ul><ul><li>document type specifications, page templates </li></ul></ul><ul><ul><li>color palette, HTML/CSS </li></ul></ul><ul><ul><li>deliver complete site and/or style guide and image assets </li></ul></ul>
    24. 28. Who does what? <ul><li>Visual designer – presentation of content, style, identity, “brand” </li></ul><ul><li>Information architect – site structure, wireframes, maybe prototype development and testing </li></ul><ul><li>Interaction designer – feature definition, behaviors (applications), wireframes, maybe prototype development and testing </li></ul><ul><li>Interface designer – (applications) presentation of functional elements, icon systems, type hierarchy, presentation of data, prototype development and maybe testing </li></ul><ul><li>Usability professional – assures accessibility, tests task completion, interface, navigation </li></ul><ul><li>User experience designer – skills in all to some degree. Ideally has deep skill/experience in one. May not have any visual design training. May come from humanities, library science, writing background </li></ul>
    25. 29. What to look for in a design professional <ul><li>Visual designer – AIGA affiliation, BFA/MFA in graphic design. Focus on web over print. Work that shows a relationship to your site, ability to communicate clearly about what they provide and their process, capable of putting user needs ahead of visual treatment </li></ul><ul><li>Information architect – AIA, UPA affiliation, sample wireframes/prototypes for comparable projects. Team skills </li></ul><ul><li>Interaction designer – IxDA affiliation, degree from a design/architecture program. Possibly computer science background. Ability to demonstrate how their designs help users and solve business problems. Experience doing testing/research. </li></ul>
    26. 30. What to look for in a design professional, continued <ul><li>Interface designer – ACM SIG-CHI/UPA/AIGA affiliation. Sample work that fits the scope of your project and is aesthetically appropriate and attractive. Ability to clearly articulate their process </li></ul><ul><li>Usability professional – UPA affiliation. Demonstrated sensitivity to your particular audience segment and/or site requirements </li></ul><ul><li>User experience designer – proven track record, relevant client/project list, recommendations from a range of professionals – business leaders, engineers, visual designers. Must have some experience with some form of user research. Affiliation with multiple design-related organizations. </li></ul>
    27. 31. Tips and resources
    28. 32. A design brief helps get the visual work off to a good start <ul><li>A design brief documents the requirements for the visual design. </li></ul><ul><li>Design brief content: </li></ul><ul><li>business need and metrics for success </li></ul><ul><li>user groups and known characteristics </li></ul><ul><li>content/features (requirements) </li></ul><ul><li>budget/timeframe </li></ul><ul><li>competitors and relative positioning </li></ul><ul><li>links to sites liked/disliked </li></ul><ul><li>existing design elements </li></ul>
    29. 33. Things to read <ul><li>Don’t Make Me Think - Krug </li></ul><ul><li>Designing Social Interfaces - Crumlish & Malone </li></ul><ul><li>Words that Work - Redish </li></ul><ul><li>Method Cards - IDEO </li></ul><ul><li>Change by Design - Brown </li></ul><ul><li>Bringing Design to Software - Winnograd </li></ul><ul><li>Understanding Healthcare - Wurman </li></ul><ul><li>Rosenfeld Media books - </li></ul><ul><li>--- </li></ul><ul><li>Blog: </li></ul>
    30. 34. <ul><li>Thank you! </li></ul><ul><li>[email_address] </li></ul><ul><li>@taniaschlatter </li></ul>