user interface design notes
Post on 22-Oct-2014
190 views
DESCRIPTION
Presented to the Baobab Health Trust, Lilongwe, Malawi, March 2014TRANSCRIPT
![Page 1: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/1.jpg)
Boabab Health, March 2014 Harry Hochheiser, [email protected]
Design
Harry Hochheiser University of Pittsburgh Department of Biomedical Informatics [email protected] !+1 410 648 9300
Attribution-ShareAlike CC BY-SA
![Page 2: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/2.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
GoalsDesigning Work, not designing interfaces
!
Start big - think about where we’d like to get
!
Then, scale back to what we can do.
!
!
![Page 3: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/3.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
What are our design goals?Definition of goals informs design
Can’t tell if you’ve succeeded without goals…
Lean Value Diamond… (modified from Grunden and Hagood, 2012)
Costs
Quality
Time/Efficiency
Satisfaction
Materials, Capital, Revenue
Patient, Staff, MOH
Capacity, Wait times, Turnaround time
Safety Waste Removal, Best Practices
IMPROVE Safety, Quality, Satisfaction DECREASE Costs
![Page 4: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/4.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Multiple Goals• Often dealing with multiple goals
• May have to make tradeoffs…
• Explore alternative designs?
![Page 5: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/5.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Framing questions• Gerry’s example about managing the fatalities from
vehicle accidents
• PASSIVE: measuring data
• ACTIVE
• installing airbags
• re-routing traffic flowVISIONARY: ask “What is the goal?”
To safely move people and goods?
Solution - more public transit and fewer cars!
![Page 6: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/6.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
After Interpretation
Data Collection
Analysis and Interpretation
!Design Activities
Before designing.. !How do you know you've got it all, and got it right?
Review with Stakeholders
![Page 7: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/7.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
How to Inform Design?● Goal – go from all of this data to design
● Design of what?
● Software artifacts
● Underlying work processes
● Easier said than done
● Secondary intents
● Systems for tracking medical device repair might be used to track productivity of individual technicians
● Cultural issues: control, resistance to change, diverse stakeholders...
● Issues of trust and authority – customers vs. stakeholders?
![Page 8: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/8.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Activity Design Scenarios
Problem Scenarios
Activity Design Scenarios
Original description of motivating challengesOriginal description of motivating challenges
Description of how proposed design will meet those challenges
![Page 9: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/9.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Storyboards
● Cartoonish depictions of interaction designs/visions
● Design to communicate ideas
● Particularly for stakeholders
● Tell the story graphically – graphical scenarios..
![Page 10: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/10.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Storyboards
● Amal Dar Aziz – Guide to storyboarding http://hci.stanford.edu/courses/cs147/assignments/storyboard_notes.pdf
![Page 11: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/11.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Storyboards/Scenarios are not prototypes
● Continuing goal: communicate vision
● Avoid miscues
● Convey broad ideas of design
● Focus on big ideas
● Prevent/discourage rapid descent into micro-critiques
● “That button should really be in the lower-right corner...”
● Prototypes will come along soon enough
![Page 12: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/12.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
User Environment Design
● Storyboards and scenarios are not necessarily complete
● Tie them together in some coherent whole?
● System-level view
● System-level diagrams to try to layout relationship between activities how well does it hang together.
● Analogy -architectural floor plan?
![Page 13: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/13.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Floor plans as inspiration...
● Show overview of how things fit together – not too much detail S. Wood 2003 Using a Floor Plan as a Metaphor for Design: Is your product a dream house, or a construction
nightmare? http://incontextdesign.com/articles/using-a-floor-plan-as-a-metaphor-for-design-is-your-product-a-dream-house-or-a-construction-nightmare/
![Page 14: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/14.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
User Environment Design
● Focus areas with functions, link, objects.
● Defines overall structure of how things will get done
● Built up from storyboards
● Can guide development – one “room” or focus area at a time...
● Not UML Design!
● Beyer & Holtzblatt do not discuss with stakeholders.
● Why not?
![Page 15: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/15.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Prototypes
● User Environment Design - informs interface design
● Two challenges
!● How to do the design
● How to use prototypes to engage users and validate design
![Page 16: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/16.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Prototypes● Pre-release functionality for evaluation
● feedback prior to large investment in development
Wizard-of-Oz
Storyboard
Video Prototype
Rapid Prototype
Working System
Low Cost, Low Fidelity
High Cost, High Fidelity
Paper prototype
Computer Animation
Rosson & Carroll, 2002
![Page 17: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/17.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Paper Prototypes(thanks again to Anind)
![Page 18: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/18.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Prototypes evolve
H. Beyer & K. Holtzblatt, Contextual Design. ACM Interactions, 1999
• Explore with users • Modify on the fly • Insights inform
• Redesign • Revision of earlier findings • New visions
• Iterate !• Other forms • More detailed mockup • “Wizard-of-Oz”
!• Don't get too pretty too quickly •Discourages feedback
![Page 19: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/19.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Prototypes as means, not ends● Final design may not look like prototype at all, and that's fine.
Paper Mockup of Stembook
Das, et al. 2008 Linked Data in a Scientific Collaboration Framework
!www.stembook.org
![Page 20: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/20.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Prototyping ToolsUse Cogtool?
!
Presentation Software - Open Office?
!
Pencil http://pencil.evolus.vn/
!
many others..
![Page 21: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/21.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Advice on prototypesDon’t make them pretty
!
Try several
head-to-head
explore ideas
like IDEO shopping carts…
![Page 22: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/22.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
The Prototype Paradox
● Prototypes are supposed to be throw-away, but...
● ..they tend to take on a life of their own
● Especially when presented as (possibly minimally) working software
!● Another argument for staying with paper as long as
possible
![Page 23: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/23.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Interface Design● Often considered an art, not a science
● Choose an interaction style
● “First, do no harm”
● Build on familiar models
● Metaphors
● Don't mess with convention
● Less is more
● Complexity is the enemy
● Get the basics right, then refine or innovate
● Don't use 3D (unless you need to)
![Page 24: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/24.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Eight Golden Rules of Interface Design
1. Strive for consistency
2. Cater to universal usability
3. Offer informative feedback
4. Design dialogs to yield closure
5. Prevent errors
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
![Page 25: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/25.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Consistency
• Language
• Yes, No, Cancel, Abort..
• Layout
• Colors
• Widgets
![Page 26: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/26.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Universal usability
Users of varying abilities, education, background
Different computing environments…
!
this is a strength of Baobab’s
![Page 27: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/27.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Informative Feedback
Make it clear when steps are done
Indicate where you are in the process
ANC Prescription page?
![Page 28: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/28.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Design Dialogs to Yield Closure
Process bars,
completeness indicators
Indications when a task is complete
![Page 29: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/29.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Prevent Errors
Better to prevent than to recover
!
Again, a strength at Baobab
![Page 30: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/30.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Permit easy reversal of actions
• “Back” or “Undo” button
!
• Note feedback guideline - very important here
![Page 31: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/31.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Support internal locus of control
• System doesn’t take over
!
• “The computer will reboot in…”
![Page 32: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/32.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Reduce short-term memory load
• Don’t force users to remember what they’ve done
• Related to other rules:
• Offer informative feedback
• Design dialogs to yield closure
• Prevent errors
• ANC: synopsis of user status at top of screen?
• dialog that blocks screen content?
![Page 33: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/33.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Contextual Design and Agile Development
● The Agile Manifesto (www.agilemanifesto.org)
● Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.
● Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage.
● Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.
● Business people and developers must work together daily throughout the project.
● Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.
![Page 34: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/34.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected] BIONF 2014 January 2014 Harry Hochheiser, [email protected]
Contextual Design and Agile Development
● The Agile Manifesto (www.agilemanifesto.org)
● The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.
● Working software is the primary measure of progress.
● Agile processes promote sustainable development.
● The sponsors, developers, and users should be able to maintain a constant pace indefinitely.
● Continuous attention to technical excellence and good design enhances agility.
● Simplicity--the art of maximizing the amount of work not done--is essential.
● The best architectures, requirements, and designs emerge from self-organizing teams.
● At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.
![Page 35: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/35.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Design Challenges• Mini design sprints
• 3 problems, 30 minutes each
• 2-3 groups each problem
• Design a solution
• Storyboards
• Paper prototypes
• Flowchart
• …etc.
![Page 36: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/36.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Design Challenge 1• Client sign in and hand-off to counselor
![Page 37: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/37.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Design challenge 2• Counselor referral of client for treatment
• subsequent follow-up?
![Page 38: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/38.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Design challenge 3 • Registration desk and counselors managing load and
referring clients who can’t be seen on a given day.
![Page 39: User Interface design notes](https://reader034.vdocuments.site/reader034/viewer/2022050919/54473bc1b1af9f0f098b45e2/html5/thumbnails/39.jpg)
Baobab Health, March 2014Harry Hochheiser, [email protected]
Presenting and critiquing ideas?• What problem were you trying to solve?
• Strong points?
• Weak points?
• Based on
• models from interviews, including questions and observations
• Design guidelines
• Cognitive issues
• Holes in designs? Holes in our understanding?