First users: Heuristics for designer/developer collaboration
-
Upload
jonathan-abbett -
Category
Technology
-
view
113 -
download
3
description
Transcript of First users: Heuristics for designer/developer collaboration
![Page 1: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/1.jpg)
First Users: Designing for Web Developers
Heuristics for improving designer/developer collaboration
UIllinois Web Conference 2013
Jonathan Abbett @jonabbett · [email protected] · http://abbett.org
![Page 2: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/2.jpg)
Questions? Critiques?
Suggestions?
![Page 3: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/3.jpg)
24 December 1990
![Page 4: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/4.jpg)
![Page 5: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/5.jpg)
The CONCISE FOLK HISTORY of “WEB PEOPLE” Webmaster Information Architect
![Page 6: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/6.jpg)
![Page 7: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/7.jpg)
The CONCISE FOLK HISTORY of “WEB PEOPLE” Webmaster Information Architect Web Designer Web Developer Usability Analyst Interaction Designer User Experience Designer Content Strategist JavaScript MVC Developer, etc., etc., etc.
vs. “The User”
![Page 8: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/8.jpg)
1990 JAKOB
NIELSEN 10 Usability Heuristics
for User Interface
Design
2011 RESMINI &
ROSATI Heuristics
for a Pervasive
Information Architecture
2011 JUHAN SONIN Design Axioms
2012 ABBY
COVERT Information Architecture
Heuristics
2004 LOU
ROSENFELD IA
Heuristics
![Page 9: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/9.jpg)
The CONCISE FOLK HISTORY of “WEB PEOPLE” Webmaster Information Architect Web Designer Web Developer Usability Analyst Interaction Designer User Experience Designer Content Strategist JavaScript MVC Developer, etc., etc., etc.
vs. “The User”
![Page 10: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/10.jpg)
![Page 11: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/11.jpg)
“Designers have to be aware that what is ‘normal’ to them, in terms of how they read sketches and what they see in them, is not obvious to others, and they must take that into account in how they educate others, and what representation they use to communicate ideas.”
![Page 12: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/12.jpg)
“Those without design training … need to be sensitive to this difference of skills … before making uninformed judgments... [They] should do their best to gain some literacy in design representations, and designers should go out of their way to help them in this.”
![Page 13: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/13.jpg)
A common language
![Page 14: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/14.jpg)
![Page 15: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/15.jpg)
![Page 16: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/16.jpg)
Intentionality Consistency
Thoroughness Inforealism
Adaptation Maintenance Measurability
Communication
![Page 17: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/17.jpg)
ONE / INTENTIONALITY All design choices are made for a reason.
![Page 18: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/18.jpg)
ONE / INTENTIONALITY / KEY QUESTIONS • What user/business/communal goals are served by
each component of the design? • Are design decisions supported by best practices? • Do you understand why you’ve copied something
from elsewhere?
![Page 19: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/19.jpg)
ONE / INTENTIONALITY / IN ACTION • Annotate design materials with references to user
research (scenarios, personas, etc.) • Refer to known design patterns, best practices, or
heuristics • Present new interactions for team critique • Simplify!
![Page 20: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/20.jpg)
TWO / CONSISTENCY The same interactions are represented the same way throughout the design.
![Page 21: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/21.jpg)
TWO / CONSISTENCY / KEY QUESTIONS • If recommending an alternative to an established
interaction pattern, why is this new type of interaction necessary or desirable?
![Page 22: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/22.jpg)
TWO / CONSISTENCY / IN ACTION • Define visual treatments (type, color, layout
patterns) in one place and use consistently throughout design materials.
• Define frequently used interactions once in detail, and refer back when used in designs.
• Justify differences (see #1) • Create templates so you can work quickly without
being sloppy
![Page 23: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/23.jpg)
THREE / THOROUGHNESS The design comprehensively represents all system states, transitions, and modes of communication.
![Page 24: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/24.jpg)
THREE / THOROUGHNESS / KEY QUESTIONS • Does the design include examples of all interaction
states? • Does the design show transitions from one state to
another? • Has the software team agreed that it has enough
detail to build?
![Page 25: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/25.jpg)
THREE / THOROUGHNESS / IN ACTION • Wireframe in sequence • Review materials with devs and annotate directly • Prototype unfamiliar or complex interactions in a
more realistic medium • Don’t forget errors, delays, service interruptions,
validation • Supplement visual materials with software
requirements if necessary
![Page 26: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/26.jpg)
![Page 27: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/27.jpg)
FOUR / INFOREALISM The design fully reflects the data to be displayed and captured.
![Page 28: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/28.jpg)
FOUR / INFOREALISM / KEY QUESTIONS • Are designs and prototypes populated with real
data? • Do you understand the extremes of your data?
![Page 29: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/29.jpg)
FOUR / INFOREALISM / IN ACTION • Get access to your company’s data (now). • Look at extremes of individual fields. • Look at overall orders of magnitude. • Include examples of missing/absent data. • Take time to write real copy. No lorem ipsum.
![Page 30: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/30.jpg)
FIVE / ADAPTATION The design indicates how the system will adapt to different form factors.
![Page 31: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/31.jpg)
FIVE / ADAPTATION / KEY QUESTIONS • What devices, browsers and screen orientations will
you support? • Will you implement one responsive interface, or
specialized interfaces?
![Page 32: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/32.jpg)
FIVE / ADAPTATION / IN ACTION • Wireframe every relevant form factor (at least at a
high level, e.g. layouts). • Build responsive prototypes. • Identify which user scenarios require mobile device
access. • Remember accessibility! (Screen readers, etc.) • Mobile first…
http://www.lukew.com/presos/preso.asp?26
![Page 33: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/33.jpg)
SIX / MAINTENANCE The design describes how the user will administer the system.
![Page 34: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/34.jpg)
SIX / MAINTENANCE / KEY QUESTIONS • What data elements need to be managed? • How will you monitor system health? • How will the right people compose content? (help,
marketing, field labels, validation) • How will you internationalize the content? • What system scenarios require proactive
notification?
![Page 35: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/35.jpg)
SIX / MAINTENANCE / IN ACTION • Design all administrative interfaces up front.
Don’t leave for the end. • Bring content writers (customer service, marketing,
content strategists, etc.) into process early. • Remember that i18n can be employed for low-
literacy users.
![Page 36: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/36.jpg)
SEVEN / MEASURABILITY The design specifies what measures will be collected to indicate the success of the system.
![Page 37: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/37.jpg)
SEVEN / MEASURABILITY / KEY QUESTIONS • How will product owners track operational success? • How will you gauge success of redesign over legacy
design? • How does the design communicate those measures?
![Page 38: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/38.jpg)
SIX / MEASURABILITY / IN ACTION • Design reports and analytical tools up front.
Don’t save it for the end. (In fact, you might want to start here.)
• Define your [design] success criteria. • Refer to user goals & corporate goals.
(You have them, right?)
![Page 39: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/39.jpg)
EIGHT / COMMUNICATION The design specifies how the system will communicate with users throughout the product experience.
![Page 40: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/40.jpg)
EIGHT / COMMUNICATION / KEY QUESTIONS • Does the design include real & thoughtful content? • What synchronous & asynchronous events within
the application will trigger communications? • What mode(s) of communication are appropriate
for each event?
![Page 41: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/41.jpg)
EIGHT / COMMUNICATION / IN ACTION • Again, no lorem ipsum: write real informational,
instructional/help content. • Design & test your e-mails (e.g. Litmus) • Think across spectrum: growl, popup, e-mail, text
message, automated phone call, snail mail… • Understand your users’ technology access
(e.g. smartphone vs. SMS)
![Page 42: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/42.jpg)
Ways to use 1. Add a step in your process for review. 2. Use as a kickoff document for projects with
new teams. 3. Teaching tool, alongside other heuristics 4. Dismiss as common sense (at your peril)
![Page 43: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/43.jpg)
![Page 44: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/44.jpg)
With thanks to these developers and designers
William Wechtenhiser, Jeremy Hert, Timothy Danford, Chaim Kirby, Flavia Gnecco, Patrick Keller,
Patrick Schmid
And recognizing great inspiration from
Juhan Sonin, Abby Covert, Atul Gawande, Bill Buxton, Alok Nandi
![Page 46: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/46.jpg)
References & Resources JAKOB NIELSEN: 10 Usability Heuristics for User Interface Design http://www.nngroup.com/articles/ten-usability-heuristics/
RESMINI & ROSATI: Heuristics for a Pervasive Information Architecture http://pervasiveia.com/wp/wp-content/uploads/2011/04/chapter3-heuristics.pdf
JUHAN SONIN: Design Axioms http://www.mit.edu/~juhan/design_axioms.html
ABBY COVERT: Information Architecture Heuristics http://www.slideshare.net/AbbyCovert/information-architecture-heuristics
LOU ROSENFELD: Information Architecture Heuristics http://louisrosenfeld.com/home/bloug_archive/000286.html
BILL BUXTON: Sketching User Experiences http://www.billbuxton.com/
ATUL GAWANDE: The Checklist Manifesto http://gawande.com/the-checklist-manifesto
![Page 47: First users: Heuristics for designer/developer collaboration](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c786234a79599a2f8b4683/html5/thumbnails/47.jpg)
Image Sources
WorldWideWeb browser: http://www.w3.org/People/Berners-Lee/WorldWideWeb.html Nielsen: http://jakob.nielsen.usesthis.com/ Rosenfeld: http://www.flickr.com/photos/jodieandlarry/1386993480/ Sonin: http://about.me/juhansonin Resmini: http://uxbrighton.org.uk Buxton: http://billbuxton.com/