user experience design overview for tufts' school of medicine web health communication class
DESCRIPTION
Presentation given July 21, 2010 to the Tufts School of Medicine web health communication class.TRANSCRIPT
![Page 1: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/1.jpg)
![Page 2: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/2.jpg)
![Page 3: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/3.jpg)
![Page 4: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/4.jpg)
![Page 5: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/5.jpg)
Agenda
• Situations to keep in mind• Elements of visual and user experience design• Group crit of top health sites• Process – design activities• People and roles• Tips/resources for success• Q&A
![Page 6: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/6.jpg)
What’s important to keep in mind when
designing a health-related site?
![Page 7: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/7.jpg)
Possible situations
Consumer user:
• emotional
• personal
• research-mode
• urgent
Professional user:
• busy
• urgent
• research-mode
![Page 8: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/8.jpg)
What does the site need to convey?
• Professional• Helpful• Trustworthy
![Page 9: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/9.jpg)
How can design help?
![Page 10: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/10.jpg)
Design gives form.
Form influences perception.
Perception influences behavior.
![Page 11: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/11.jpg)
Elements of visual design on the web
• Organization of elements on the page (layout)• Feedback of interactive elements• Colors• Type styles and hierarchy• Presentation of navigation• Tone of voice• Choice and use of imagery• Identity elements• Style of affordances
![Page 12: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/12.jpg)
Elements of user experience on the web
http://www.jjg.net/elements/pdf/elements.pdf
![Page 13: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/13.jpg)
Web as software (applications)
Web as linked content
![Page 14: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/14.jpg)
Web as software (applications)
15
• Driven by databases
• Developers may create
working applications first
• More about “doing” and
less about reading
• Use of “patterns” is key
![Page 15: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/15.jpg)
Web as software (applications)
15
• Interaction andUI design play major roles in giving form
• Interaction and UI design as scaffolding for visual design
• Designers anddevelopers working closely together
• Visual design as“skin”
![Page 16: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/16.jpg)
Web as linked content
15
• Driven by content
• Designers may be able to do development/site production
• More about finding content than contributing (less interactive)
• Information architecture plays a major role
![Page 17: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/17.jpg)
Elements in the context of designing for health-related sites
![Page 18: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/18.jpg)
Professional
Clear– Presentation of up-front value proposition
Consistent – navigation, language, behavior
Organized– hierarchical structures for page content and type,
restricted color palette
Appropriate– imagery that supports content
![Page 19: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/19.jpg)
Trustworthy
• Limited, relevant advertising• Appropriate use of professionally designed logo• No fake photos• Real credentials, appropriately displayed
![Page 20: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/20.jpg)
Helpful
• Appropriate language level• Accessible – download time, use of alt tags, use of
colors, type sizes appropriate for audience• Foreshadowing – UI cues to indicate clickability, other
behaviors• Transparent structure
![Page 21: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/21.jpg)
The elements in practice – how do the top health sites do?
![Page 22: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/22.jpg)
10 Most Popular Health Websites | July 2010Derived 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.
1. Yahoo! Health (6th last year) • WebMD.com (1st)• NIH.gov (2nd)• MedicineNet.com (3rd)• MayoClinic.com (4th)• Drugs.com (5th)• EverydayHealth (not in top 10)• WrongDiagnosis (not in top 10)
• MedHelp.org (9th)• HealthGrades (not in top 10)
http://www.ebizmba.com/articles/health-websites
![Page 23: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/23.jpg)
Things are changing fast
• The social aspect of health is changing. Rather than keep
information secret, people WANT to share to help others
and further cures.
• Patients are driving change (not Doctors)
• Lots of activity around design and healthcare – some
specialization
• People are too important to leave out of the process –
designing the experience is important
![Page 24: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/24.jpg)
Process: how it is done
![Page 25: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/25.jpg)
Typical web application/site process
1. business need established and verified
2. user characteristics identified
3. site/application goals set – metrics for success
4. budget/timeframe established
5. content/features identified and documented at a high level
6. goals for visual/UI defined
7. site design – IA, UI and visual
8. usability testing
9. content development/engineering
10. testing/deploying
11. repeat steps as needed
![Page 26: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/26.jpg)
Design activities
1. Kickoff• confirm business goals, users, metrics for success, deliverables,
timeframe/budget, content, user types/personas2. Up-front research if needed
• baseline usability testing (test existing site), user observations, interviews
3. Define structure• site map• wireframe sketches or quick HTML prototype• define page templates if CMS/application
4. Define/confirm feature design if application• wireframe/schematic sketches• prototype• usability testing (recommended)
![Page 27: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/27.jpg)
Design activities, continued
5. Identity design (would be done concurrently with #3)• separate kickoff for identity design unless simple/basic effort
6. Visual design• separate kickoff to define requirements for brand
presentation• creation of 3-4 visual directions applied to sample
pages/page templates• typically @ 12 templates or page types
7. Create all final deliverables• shoot photos, create and specify all graphics, animations• document type specifications, page templates• color palette, HTML/CSS• deliver complete site and/or style guide and image assets
![Page 28: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/28.jpg)
Who does what?
• Visual designer – presentation of content, style, identity, “brand”
• Information architect – site structure, wireframes, maybe prototype development and testing
• Interaction designer – feature definition, behaviors (applications), wireframes, maybe prototype development and testing
• Interface designer – (applications) presentation of functional elements, icon systems, type hierarchy, presentation of data, prototype development and maybe testing
• Usability professional – assures accessibility, tests task completion, interface, navigation
• 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
![Page 29: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/29.jpg)
What to look for in a design professional
• 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
• Information architect – AIA, UPA affiliation, sample wireframes/prototypes for comparable projects. Team skills
• 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.
![Page 30: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/30.jpg)
What to look for in a design professional, continued
• 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
• Usability professional – UPA affiliation. Demonstrated sensitivity to your particular audience segment and/or site requirements
• 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.
![Page 31: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/31.jpg)
Tips and resources
![Page 32: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/32.jpg)
A design brief helps get the visual work off to a good start
A design brief documents the requirements for the visual design.
Design brief content:• business need and metrics for success• user groups and known characteristics• content/features (requirements)• budget/timeframe• competitors and relative positioning• links to sites liked/disliked• existing design elements
![Page 33: User experience design overview for Tufts' School of Medicine web health communication class](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c74aa94a7959e5608b4592/html5/thumbnails/33.jpg)
Things to read
Don’t Make Me Think - Krug
Designing Social Interfaces - Crumlish & Malone
Words that Work - Redish
Method Cards - IDEO
Change by Design - Brown
Bringing Design to Software - Winnograd
Understanding Healthcare - Wurman
Rosenfeld Media books - rosenfeldmedia.com
---
Blog: http://www.healthcareinnovationbydesign.com/