1. Health Everyware Making Mobile Beautiful HIMSS Celltop Design Workgroup Janey Barnes Scott Lind Eric Miller Bruce Sklar Juhan Sonin, juhan@mit.edu HIMSS Coordinators Edna Boone Juanita Threat 22.Jun.10 Content in this presentation (unless otherwise noted) is licensed under a Creative Commons Attribution 3.0 License
2. 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
3. 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 Lust to dust
4. 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 Lust to dust
10. 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
11. How do I (as a patient, nurse, doctor, proxy)make quicker, more accurate decisions?
12.
13.
14.
15.
16.
17.
18. 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.
Create a LIGHTWEIGHT celltop health services design pattern library, UI guidelines documentHarmonize the behavior, aesthetics, layout, interaction, and feel across health apps
Now find the patient.Straight-forward to find.Data screams.
What’s more important? The UI or the Stroke or Glascow Coma scale results?The Paint vs Data.Image from Stroke Scale app
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.
What’s more important? The UI or the Stroke or Glascow Coma scale results?The Paint vs Data.
In contrast to the previous example, the user interface takes a backseat… while the data is front and center.
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.
ARDMS Ultrasound Exam app.
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.
Slide credit: Brian Staats
Slide credit: Brian Staats
Slide credit: Brian Staats
App = Tempted by Frog Design (shown here at Pop!Tech 2009)