SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important...
Transcript of SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important...
![Page 1: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/1.jpg)
SM 3511 Interface Design
Institutionalizing interface design
![Page 2: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/2.jpg)
Eric Schaffer, 2013. Institutionalization of UX: A Step-by-Step Guide to a User Experience Practice (2nd Edition)
![Page 3: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/3.jpg)
![Page 4: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/4.jpg)
A champion (usually reports directly to the CEO)
Most important first step in institutionalizing usability
Best predictor of whether a company will successfully deploy usable designs
Without a champion, usability issues will also play a minor role after marketing, software bugs, etc.
The right kind of champion
Knowledge of interface design is not so important
Knowledge of organizational politics, business imperatives, and able to converse with different functional groups to promote usability
Able to muster funding to support usability efforts
An agent of change
![Page 5: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/5.jpg)
![Page 6: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/6.jpg)
Product develop process
Waterfall
![Page 7: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/7.jpg)
Product design methods
Waterfall
Once a design stage is signed off (e.g., coding has started), there is no turning back
If the working prototype creates a new usability problem, there is few ways to rectify this issue
This puts a lot of pressure on the interface designer to get it right the first time
An impossible task
![Page 8: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/8.jpg)
Product develop process
Waterfall → Iterative design
![Page 9: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/9.jpg)
Product design methods
Iterative design
Designers and software developers work closely together
Instead of developing 100% of the design at an early stage, interface designers can work on a series of prototypes
Prototypes are progressively more detailed
Major issues are resolved earlier in the design cycle
More attention to details later
Interface designers are better integrated into the corporate processes
![Page 10: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/10.jpg)
But what issues to resolve first
This can be determined through functional decomposition of the abstraction hierarchy of a workplace
![Page 11: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/11.jpg)
An abstraction hierarchy
This hierarchy can be used to analyze most corporate workplace (e.g., factory flow, retail processes, etc)
Why questionsHow questions
![Page 12: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/12.jpg)
An example of an abstraction hierarchy
WhyHow
![Page 13: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/13.jpg)
Anatomy of an abstraction hierarchy
![Page 14: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/14.jpg)
Abstraction hierarchy of an interface
![Page 15: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/15.jpg)
Abstraction hierarchy of an interface
Objectives/functions of the software
Information needs to accomplish the above
Workflow (screen to screen)
Stylistic elements (e.g, buttons, icons, etc)
Codes
![Page 16: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/16.jpg)
Scenario-based design approach
![Page 17: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/17.jpg)
Scenario-based design approach
Objectives/functions of the software
Information needs to accomplish the above
Workflow (screen to screen)
Stylistic elements (e.g, buttons, icons, etc)
![Page 18: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/18.jpg)
Prototyping tools
Wireframes, e.g., Balsamiq
![Page 19: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/19.jpg)
Prototyping tools
Functional, e.g., Visual Studio, HTML / CSS
![Page 20: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/20.jpg)
Prototyping tools
GUI, e.g., Pencil—open source prototyping tool
![Page 21: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/21.jpg)
The ever shortening software lifecyle
From iterative design, some design teams begin to develop even shorter, more frequent design cycles (e.g., “Scrum,” AGILE, etc.)
![Page 22: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/22.jpg)
Software improvement features are divided into chunks
Each chunk represents a series of small and incremental build (improvement)
Each build is achievable within a 2-4 weeks period of intensive work
A design team (e.g., interface designer, user researcher, users, software developers, marketers) is assigned to work on this build
Team members are often co-located
Uninterrupted from daily routines
Since work is face-to-face, few documentation is needed
![Page 23: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/23.jpg)
LEAN startup took this idea further
![Page 24: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/24.jpg)
LEAN startup
Dispense with formal lab-based user testings
Release any features you like to test to a limited set of users
For example, you could release “design 1” to a group of 500 users, and “design 2” to another group of 500 users
After two weeks of release, conduct survey/interviews to gather feedback
Collect quantitative measures (e.g., download rate, user demographics, etc)
Rinse, repeat
This works for startups because the need for communicating is much reduced due to small company size
![Page 25: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/25.jpg)
For large companies, communicating with management and across functions remain important
Commonly used measures with communicating with the management (and other departments)
![Page 26: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/26.jpg)
Communicating with the management (and other departments)
![Page 27: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/27.jpg)
There are many management tools for communicating usability issues
“Severity” ratings
Impact (on the user experience) (1 to 3)
Frequency (of occurrence) (~)
Relevance (to business objectives) (~)
Rate these three criteria against each and every usability issue
Rank each usability issue by their “severity” to indicate priority
Similar to FMEA
![Page 28: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/28.jpg)
![Page 29: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/29.jpg)
Communicating with the design team (those with minimal interface design training)
Contextual Design is one suite of design methods that provide a range of models
A popular form of ethnographically-informed method
Observation Develops affinity diagram
![Page 30: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/30.jpg)
Common deliverables in Contextual Design (from interaction-design.org)
The flow model captures communication and coordination between people to accomplish work
The cultural model captures culture and policy that constrain how work is done
The sequence model shows the detailed steps performed to accomplish each task important to the work
The physical model shows the physical environment
The artifact model shows the artifacts that are created and used
![Page 31: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/31.jpg)
Sequence model
(workflow)
![Page 32: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/32.jpg)
![Page 33: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/33.jpg)
![Page 34: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/34.jpg)
Flow model
![Page 35: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/35.jpg)
Flow model
![Page 36: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/36.jpg)
Cultural model
![Page 37: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/37.jpg)
![Page 38: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/38.jpg)
Artifact model
![Page 39: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/39.jpg)
Artifact model
![Page 40: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/40.jpg)
Physical model
![Page 41: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/41.jpg)
Physical model
![Page 42: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/42.jpg)
Physical model
![Page 43: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/43.jpg)
![Page 44: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/44.jpg)
Communicating your design objectives to a large audience
Persona
Simplified descriptions of “typical” users
![Page 45: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/45.jpg)
Why persona?
It is very hard to get research findings across the company
Employees have very short attention span
Persona makes it easier to comprehend your design purposes, especially when they are not intuitive
To create reliable and realistic representations of your key audience segments for reference
Personas are extremely simplified and easy to create (and thus may also delude your co-workers)
Personas should be based on comprehensive user research
![Page 46: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/46.jpg)
Purposes of a persona
Represent a major user group for your website
Express and focus on the major needs and expectations of the most important user groups
Give a clear picture of the user's expectations and how they're likely to use the site
Aid in uncovering universal features and functionality
Describe real people with backgrounds, goals, and values
![Page 47: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/47.jpg)
A persona as a boundary object (a shared and neutral artifact) –hinted at but does not convey design features
Stakeholders and leaders evaluate new site feature ideas
Information architects develop informed wireframes, interface behaviors, and labeling
Designers create the overall look and feel of the website
System engineers/developers decide which approaches to take based on user behaviors
Copy writers ensure site content is written to the appropriate audiences
![Page 48: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/48.jpg)
Process of developing personas
Know your audience
Where are they likely to see these personas? In what format?
Procedure
Conduct user research –who are your users? What are the key activities? What are their practices? Why do they do things their way?
Identify common/recurring themes
Identify the key activities and user groups that your product will serve. What are the personas that exist within these groups? Narrow down to 3-5 personas
Write down short descriptions of each persona. Refine them until they are concise and realistic. Present them in the most effective way.
![Page 49: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/49.jpg)
![Page 50: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/50.jpg)
![Page 51: SM 3511 Interface Designkowym.com/wp-content/uploads/2018/11/SM-3511_Week-9.pdf · Most important first step in institutionalizing usability ... LEAN startup Dispense with formal](https://reader035.fdocuments.us/reader035/viewer/2022070813/5f0c63cb7e708231d435299e/html5/thumbnails/51.jpg)
http://www.usability.gov/