SlideShare une entreprise Scribd logo
1  sur  52
Health Everyware Making Mobile Beautiful HIMSS Usability Workgroup Juhan Sonin 3.Feb.09
Ouch.
We need a simple set of design best practices that  … takes a system approach to design …. accelerates good software behavior and interface design pattern adoption Guidelines will cover:  interaction and behavior models, graphic design (including layout, grid, color palette, type and naming conventions), information architecture, technical implementation
MOBILE DESIGN TENETS Let data scream Only handle information once Grid it Type less + less type Color carefully Date your users Speak my sign What interface? Repeat customers ROCK Get physical
MOBILE DESIGN TENETS Let data scream Only handle information once Grid it Type less + less type Color carefully Date your users Speak my sign What interface? Repeat customers ROCK Get physical
Let data scream
Envisioning Information, E. Tufte
and the Problem is… Increasingly complex systems Tool and Methodology gap Decision makers are swamped with conflicting data Our work is increasingly multi-dimensional (not a flat-decision space) Artifacts driving decisions need to be coordinated, presented Minimal transparency into key health metrics
How do I (as a patient, nurse, doctor, proxy)make quicker, more accurate decisions?
Ink and lines scream Data disappears Violates all 5 Tufte principles 5 principles produce substantial changes in graphical design: Above all else, show the data. Maximize the data-ink ratio (i.e., the % of ink that shows data) Erase non-data ink. Erase redundant data-ink. Review and edit.
Unreadable Grid >> Data Data as Interface… NOT
38%
Priorities, hierarchy Filtering Navigating … … … Patient data 1 2 last
25% 20%
70%
80%
80% of the screen space should be for data, the actual workspace
Let data scream The data is THE story Less ink, more bang 80% rule
What interface?
Over time, you don’t notice the interface
50%
Manipulate the data, not the interface
What interface? Over time, you don’t notice the interface Manipulate the data, not the interface
MOBILE DESIGN TENETS Let data scream Only handle information once Grid it Type less + less type Color carefully Date your users Speak my sign What interface? Repeat customers ROCK Get physical
DESIGN BUSINESS TECHNICAL BEHAVIOR IMPACT
When will we see stuff?
Reference implementation Demonstrate a prototype… then grow advocacy Looking for participation from mobile developer Public Wiki to house UI guidelines, and allow citizens of planet earth to evolve, draft v1 by 4.Mar.10
healtheveryware.com
HIMSS Celltop Design Workgroup Scott Lind Janey Barnes Paul Kroft Eric Miller Ron Ribitzky Bruce Sklar Juhan Sonin, juhan@mit.edu Albert Villarin HIMSS Coordinators Edna Boone Juanita Threat Advisors, Reviewers Jeff Belden Dirk Knemeyer

Contenu connexe

Similaire à Health Everyware

Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
xyz01
 
Effective Software Development in the 21st Century
Effective Software Development in the 21st CenturyEffective Software Development in the 21st Century
Effective Software Development in the 21st Century
Agileee
 
Help Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your AdvantageHelp Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your Advantage
FITC
 
UX / UI Mobile Trends
UX / UI Mobile TrendsUX / UI Mobile Trends
UX / UI Mobile Trends
Mark N Swaine
 
Emergent Learning Networks: Collaboration 2005 Q
Emergent Learning Networks: Collaboration 2005 QEmergent Learning Networks: Collaboration 2005 Q
Emergent Learning Networks: Collaboration 2005 Q
Videoguy
 
Final wireframes from screen concept to user interaction v0.4
Final wireframes  from screen concept to user interaction v0.4Final wireframes  from screen concept to user interaction v0.4
Final wireframes from screen concept to user interaction v0.4
Mia Horrigan
 

Similaire à Health Everyware (20)

The art technique of data visualization
The art  technique of data visualizationThe art  technique of data visualization
The art technique of data visualization
 
Chap12
Chap12Chap12
Chap12
 
Interaction Design (IxD) in the context of User Experience (UX)
Interaction Design (IxD) in the context of User Experience (UX)Interaction Design (IxD) in the context of User Experience (UX)
Interaction Design (IxD) in the context of User Experience (UX)
 
10 solution architecture concepts
10 solution architecture concepts10 solution architecture concepts
10 solution architecture concepts
 
User Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionUser Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in Transition
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
Spicing Up Your Vanilla With a Custom Look and Feel
Spicing Up Your Vanilla With a Custom Look and FeelSpicing Up Your Vanilla With a Custom Look and Feel
Spicing Up Your Vanilla With a Custom Look and Feel
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
Dashboard Design / IxDA
Dashboard Design / IxDADashboard Design / IxDA
Dashboard Design / IxDA
 
Accessibility for design system 19
Accessibility for design system 19Accessibility for design system 19
Accessibility for design system 19
 
Effective Software Development in the 21st Century
Effective Software Development in the 21st CenturyEffective Software Development in the 21st Century
Effective Software Development in the 21st Century
 
Help Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your AdvantageHelp Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your Advantage
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
 
Mobile Web Development
Mobile Web Development Mobile Web Development
Mobile Web Development
 
Mis module ii
Mis module iiMis module ii
Mis module ii
 
UX / UI Mobile Trends
UX / UI Mobile TrendsUX / UI Mobile Trends
UX / UI Mobile Trends
 
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenLavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
 
The Many-Tentacled Beast
The Many-Tentacled BeastThe Many-Tentacled Beast
The Many-Tentacled Beast
 
Emergent Learning Networks: Collaboration 2005 Q
Emergent Learning Networks: Collaboration 2005 QEmergent Learning Networks: Collaboration 2005 Q
Emergent Learning Networks: Collaboration 2005 Q
 
Final wireframes from screen concept to user interaction v0.4
Final wireframes  from screen concept to user interaction v0.4Final wireframes  from screen concept to user interaction v0.4
Final wireframes from screen concept to user interaction v0.4
 

Dernier

CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
anilsa9823
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
jeswinjees
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
aroranaina404
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx
suhanimunjal27
 

Dernier (20)

CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx
 

Health Everyware

  • 1. Health Everyware Making Mobile Beautiful HIMSS Usability Workgroup Juhan Sonin 3.Feb.09
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 9. We need a simple set of design best practices that … takes a system approach to design …. accelerates good software behavior and interface design pattern adoption Guidelines will cover: interaction and behavior models, graphic design (including layout, grid, color palette, type and naming conventions), information architecture, technical implementation
  • 10. MOBILE DESIGN TENETS Let data scream Only handle information once Grid it Type less + less type Color carefully Date your users Speak my sign What interface? Repeat customers ROCK Get physical
  • 11. MOBILE DESIGN TENETS Let data scream Only handle information once Grid it Type less + less type Color carefully Date your users Speak my sign What interface? Repeat customers ROCK Get physical
  • 14.
  • 15.
  • 16.
  • 17. and the Problem is… Increasingly complex systems Tool and Methodology gap Decision makers are swamped with conflicting data Our work is increasingly multi-dimensional (not a flat-decision space) Artifacts driving decisions need to be coordinated, presented Minimal transparency into key health metrics
  • 18. How do I (as a patient, nurse, doctor, proxy)make quicker, more accurate decisions?
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. Ink and lines scream Data disappears Violates all 5 Tufte principles 5 principles produce substantial changes in graphical design: Above all else, show the data. Maximize the data-ink ratio (i.e., the % of ink that shows data) Erase non-data ink. Erase redundant data-ink. Review and edit.
  • 26.
  • 27.
  • 28.
  • 29. Unreadable Grid &gt;&gt; Data Data as Interface… NOT
  • 30.
  • 31.
  • 32.
  • 33. 38%
  • 34. Priorities, hierarchy Filtering Navigating … … … Patient data 1 2 last
  • 36. 70%
  • 37. 80%
  • 38. 80% of the screen space should be for data, the actual workspace
  • 39. Let data scream The data is THE story Less ink, more bang 80% rule
  • 41. Over time, you don’t notice the interface
  • 42.
  • 43. 50%
  • 44.
  • 45. Manipulate the data, not the interface
  • 46. What interface? Over time, you don’t notice the interface Manipulate the data, not the interface
  • 47. MOBILE DESIGN TENETS Let data scream Only handle information once Grid it Type less + less type Color carefully Date your users Speak my sign What interface? Repeat customers ROCK Get physical
  • 48. DESIGN BUSINESS TECHNICAL BEHAVIOR IMPACT
  • 49. When will we see stuff?
  • 50. Reference implementation Demonstrate a prototype… then grow advocacy Looking for participation from mobile developer Public Wiki to house UI guidelines, and allow citizens of planet earth to evolve, draft v1 by 4.Mar.10
  • 52. HIMSS Celltop Design Workgroup Scott Lind Janey Barnes Paul Kroft Eric Miller Ron Ribitzky Bruce Sklar Juhan Sonin, juhan@mit.edu Albert Villarin HIMSS Coordinators Edna Boone Juanita Threat Advisors, Reviewers Jeff Belden Dirk Knemeyer

Notes de l'éditeur

  1. We&amp;apos;re all here because the future of health = mobile. I&amp;apos;m here to tell you: that is not nearly enough!
  2. Is a chair a chair if no one wants to sit in it?Slide credit: designer = HannesGrebin
  3. For kids and adults under 60, try a fat boy.Practical, light, conforms to many body types, comfortable, multi-use.Pictured here is the FatBoy bean bag w/Udo Sonin, Luka Kirigin, Juhan Sonin
  4. Is a car a car if no one wants to drive it?The hopped up Gremlin. Only way you’re getting me to take it: pay me $5k to drive that away.Slide credit: therogue (flickr)
  5. This Bugatti transcendscar-dom. This is an object d’art, inspires other products/ideas, is lovely to drive… you become an apostle.Bugatti Type 57 Atlantic 3… in 1938!
  6. Apps pictured: Rapid STEMI (left), Stroke Index (right)
  7. Create a LIGHTWEIGHT celltop health services design pattern library, UI guidelines documentHarmonize the behavior, aesthetics, layout, interaction, and feel across health apps
  8. Now find the patient.Straight-forward to find.Data screams.
  9. What’s more important? The UI or the Stroke or Glascow Coma scale results?The Paint vs Data.
  10. This table is from Wikipedia… and it’s more readable than an app designed just to display this information.And Wikipedia isn’t exactly known for their design… but they are known for their Design.
  11. What’s more important? The UI or the Stroke or Glascow Coma scale results?The Paint vs Data.
  12. In contrast to the previous example, the user interface takes a backseat… while the data is front and center.
  13. Grid lines, labels, UI elements are secondary… they fade into the background because they’re designed to (with smaller, lighter text compared to the data + grid lines are there to help the eye and are light grey, etc).The data pops… as well as the micro trend graph.
  14. ARDMS Ultrasound Exam app.
  15. Unreadable labels/global optionsRandomly placed buttonsGrid and labels are same visual priority as dataNo practice exam data… how about an action that allows me to take one, add one, import one. SOMETHING other than that.The data should be part of the manipulation game. Why have 4 options listed and I need to swing down another part of the UI to select one of those options? Make the options selectable.
  16. Slide credit: Brian Staats
  17. Slide credit: Brian Staats
  18. Slide credit: Brian Staats
  19. App = Tempted by Frog Design (shown here at Pop!Tech 2009)
  20. Not to mention the data part of the screen is only using 50% of the available real estate….
  21. Now find the patient.Straight-forward to find.Data screams.
  22. So those are three important  tenets to help design beautiful services. If you are interested in the rest of the tenets or want to take a class, just get in touch with the group.  Bottom line: we can&amp;apos;t just slap stuff out there for &amp;quot;mobile&amp;quot; and  think that will get it done. We need to create things that are usable,  that are beautiful, that people enjoy and even look forward to using!  Our challenge as people in the industry is to INSIST that the services  that we are part of creating or that are created for us are beautiful.  Why? People will use them. When people use them, practitioners will  embrace them. When practitioner&amp;apos;s embrace them, the system will  subsidize them. If we have a healthcare system subsidizing beautiful  services that practitioner&amp;apos;s embrace and people love and use all the  time, suddenly we have a peaceful revolution. And it is not a  revolution of signing bills on capitol hill or doing other high- profile things. It is a quiet revolution where the care and passion of  a few can change the lives of many. It is a revolution that can make  lives better, and be led than you and me. My only question to all of  us is: why on Earth aren&amp;apos;t we busy doing it already?
  23. The original equation needs to be amplified… to include design, business, technical, behavior, and impact vectors/constraints