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

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

What’s important to keep in mind when designing a health-related site?

Possible situations
Consumer user:
• emotional
• personal
• research-mode
• urgent
Professional user: • busy • urgent • research-mode

What does the site need to convey?
Professional
Helpful
Trustworthy

How can design help?

Design gives form. Form influences perception. Perception influences behavior.

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

Elements of user experience on the web
http://www.jjg.net/elements/pdf/elements.pdf

Web as software (applications) Web as linked content

Driven by databases
Developers may create working applications first
More about “doing” and less about reading
Use of “patterns” is key
Web as software (applications) 15

Interaction and UI design play major roles in giving form
Interaction and UI design as scaffolding for visual design
Designers and developers working closely together
Visual design as “skin”
Web as software (applications) 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
Web as linked content 15

Elements in the context of designing for health-related sites

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

Trustworthy
Limited, relevant advertising
Appropriate use of professionally designed logo
No fake photos
Real credentials, appropriately displayed

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

The elements in practice – how do the top health sites do?

10 Most Popular Health Websites | July 2010
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 .
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

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

Process: how it is done

Typical web application/site process
business need established and verified
user characteristics identified
site/application goals set – metrics for success
budget/timeframe established
content/features identified and documented at a high level
goals for visual/UI defined
site design – IA, UI and visual
usability testing
content development/engineering
testing/deploying
repeat steps as needed

Design activities
Kickoff
confirm business goals, users, metrics for success, deliverables, timeframe/budget, content, user types/personas
Up-front research if needed
baseline usability testing (test existing site), user observations, interviews
Define structure
site map
wireframe sketches or quick HTML prototype
define page templates if CMS/application
Define/confirm feature design if application
wireframe/schematic sketches
prototype
usability testing (recommended)

Design activities, continued
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
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

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

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.

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.

Tips and resources

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

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/

Thank you!
[email_address]
@taniaschlatter

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

by Nimble Partners on Jul 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 10

Statistics

User experience design overview for Tufts’ School of Medicine web health communication class — Presentation Transcript