wireframing with your team in mind (susana esparza & jason kolaitis & jennifer t. sharp...
DESCRIPTION
Given at UXPA-DC's User Focus Conference, Oct. 19, 2012TRANSCRIPT
![Page 1: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/1.jpg)
Kolaitis.com
User Focus 2012 October 19, 2012
Wireframing with Your Team in Mind Making Wireframes Usable
Jason Kolaitis [email protected] Kolaitis.com
Presented By: E-mail:
Web:
![Page 2: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/2.jpg)
Kolaitis.com
Introduction
Page 2
Audiences
Questions
Introduction
Recap
![Page 3: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/3.jpg)
Kolaitis.com
Who am I?
Page 3
Jason Kolaitis User Experience Designer & Strategist at Celerity
• User Centered Design (UCD) & usability advocate • Significant portal & intranet design experience • UX lead for National Geographic, DLA & FBI projects
EDUCATION The George Washington University • Masters of Science in
Information Systems Technology
Syracuse University • Bachelor of Science in
Information Management and Technology
RECENT CLIENTS Commercial • National Geographic,
American Diabetes Association, MWV & Markel Corporation
Government • FBI, DLA, US Army, DoD
& Arlington County
![Page 4: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/4.jpg)
Kolaitis.com
What We’ll Cover
Page 4
• How this presentation came about
• Quick overview of wireframing
• Best practices, tips & tricks, and recommendations when creating wireframes for:
– Project Team – Back-End Developers – Front-End Developers – Visual Designers – User Experience Designers – Project Managers – Training & Documentation Specialists – Clients & Stakeholders – Quality Assurance Engineers
• Questions
• Recap
![Page 5: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/5.jpg)
Kolaitis.com
How Did This Presentation Come About?
Page 5
• When I first started my UX career many years ago I realized my wireframes weren’t that beneficial.
• Bad wireframe design led to
project confusion.
What Not To Do...
![Page 6: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/6.jpg)
Kolaitis.com
What is Wireframing?
Page 6
• Wireframes help architect holistic designs by mapping out functionality, page structures, design elements, interaction sequences and navigation before heavily investing in any kind of development.
![Page 7: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/7.jpg)
Kolaitis.com
Who Are We Designing For?
Page 7
![Page 8: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/8.jpg)
Kolaitis.com
Audiences
Page 8
Audiences
Questions
Introduction
Recap
![Page 9: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/9.jpg)
Kolaitis.com
Project Team
Page 9
How They Use Wireframes: To gain consensus on what will be developed so meaningful discussions can occur.
![Page 10: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/10.jpg)
Kolaitis.com
Project Team • Ensure all team members know where
to access the most recent working copy AND latest stakeholder/client approved copy of the wireframes.
– Add a simple note like “Please login to http://dev.clientname.com/wireframes for the latest version…”
• Include revision history or some form
of detail as to what was last modified.
Page 10
Wireframe Cover Page with Version Note
![Page 11: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/11.jpg)
Kolaitis.com
![Page 12: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/12.jpg)
Kolaitis.com
![Page 13: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/13.jpg)
Kolaitis.com
![Page 14: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/14.jpg)
Kolaitis.com
Back-End Developers
Page 14
How They Use Wireframes: As a discussion point regarding technical feasibility early in the project. Once finalized, as a blueprint so they can rapidly and accurately develop a usable system.
![Page 15: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/15.jpg)
Kolaitis.com
Back-End Developers • The greatest beneficiaries of
wireframes are the back-end developers.
• Present wireframes to developers early and often.
• Provide as much of a full, all encompassing sitemap as possible.
• Match links in the annotation call outs to exact page names in the sitemap.
Page 15
Example Intranet 1st & 2nd Level Page Structure
![Page 16: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/16.jpg)
Kolaitis.com
Back-End Developers • To streamline development
efforts, start thinking in terms of reusable components, controls and templates.
• If a screen can be displayed in multiple different formats, (e.g. modal vs. normal page view), design the elements to be universal and generic.
• Need as much information upfront as possible to reduce rework and code bloat.
Page 16
Reduce, Reuse, and Recycle Elements
![Page 17: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/17.jpg)
Kolaitis.com
Admin View
End User View
![Page 18: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/18.jpg)
Kolaitis.com
Front-End Developers
Page 18
How They Use Wireframes: To understand system behaviors, interactions, and responsive design choices.
![Page 19: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/19.jpg)
Kolaitis.com
Front-End Developers
Page 19
• They need to know break points (if any) for responsive designs.
• Need to know which sections are going to be rearranged, hidden and visible at each break point.
• Architect out the experiences for all applicable devices initially – not as an afterthought.
Potential Supported Devices and Breakpoints Table
![Page 20: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/20.jpg)
Kolaitis.com
Visual Designers
Page 20
How They Use Wireframes: To translate basic design elements into visually stunning design compositions.
![Page 21: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/21.jpg)
Kolaitis.com
Visual Designers • Work with your designer and know not
to overstep your role.
• Don’t limit their creativity – wireframe as a minimalist.
– Allow them to do what they do best.
• Let them know what areas can be played around with and what can’t be fiddled with.
• Any supplemental visual assets such as specialty icons/glyphs, client logos, client styles guides, etc. need to be passed along.
Page 21
Share Your Assets
![Page 22: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/22.jpg)
Kolaitis.com
Visual Designers • Need accurate page ratios/dimensions
so they can accurately translate the layout into proper image dimensions, and appropriate page padding/gutters.
• Design with a grid system - the closer page layout dimensions resemble real world system dimensions, the better.
• This will hopefully alleviate any surprises as to why the end system didn’t match up to the original architecture outlined in the wireframes.
Page 22
Use Grid Layouts While Wireframing
![Page 23: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/23.jpg)
Kolaitis.com
![Page 24: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/24.jpg)
Kolaitis.com
![Page 25: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/25.jpg)
Kolaitis.com
User Experience Designers
Page 25
How They Use Wireframes: Use wireframe source files to help collaboratively design with you. Additionally, they need to take your work and build upon it for future projects.
![Page 26: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/26.jpg)
Kolaitis.com
User Experience Designers
Page 26
• When working with multiple UX designers on a project be sure to assign a owner to the wireframe.
• Adopt a common wireframing application within your organization so components are reusable and everyone can access them.
• Adopt a standard way to wireframe within your organization.
Wireframing Stencils
![Page 27: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/27.jpg)
Kolaitis.com
![Page 28: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/28.jpg)
Kolaitis.com
Project Managers
Page 28
How They Use Wireframes: To view high level features and functionality to reduce scope creep and ensure the project will be delivered on time and within budget.
![Page 29: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/29.jpg)
Kolaitis.com
Project Managers • They typically view wireframes
at higher level to ensure the project is on the right track.
• Include an Overview commentary section on each functional schematic wireframe. – It should explain at a high
level what business case is being met and why it’s being developed.
Page 29
Share Your Design Thoughts and Reasoning
![Page 30: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/30.jpg)
Kolaitis.com
![Page 31: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/31.jpg)
Kolaitis.com
Training & Documentation Specialists
Page 31
How They Use Wireframes: As the basis for creating formal documentation such as training manuals and podium based presentations.
![Page 32: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/32.jpg)
Kolaitis.com
Training & Documentation Specialists • They want annotations.
– High-level overviews and low-level task instructions = Goodness
• They typically use wireframe
screen shots as image placeholders until they can grab actual screen shots of the final system.
Page 32
Great Training Materials Begins with Your Documentation
![Page 33: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/33.jpg)
Kolaitis.com
![Page 34: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/34.jpg)
Kolaitis.com
Client & Stakeholders
Page 34
How They Use Wireframes: As a way to understand the project expectations of what’s to come and sometimes even as the basis for writing requirements.
![Page 35: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/35.jpg)
Kolaitis.com
Clients & Stakeholders • Use wireframes to sell concepts and
features to both the product owner and their peers and to help generate buzz and feedback around the office.
– This set of “Conceptual” wireframes shouldn’t use any technical jargon but rather include supplemental commentary to help introduce ideas and concepts to the organization.
• Wireframes help provide the grand vision of the system and allow everybody to get on the same page.
• Makes writing requirements much easier since there is a visual representation to go off of.
Page 35
![Page 36: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/36.jpg)
Kolaitis.com
Clients & Stakeholders • Wireframes are a great way to
do requirement gathering so ensure the designs you present are always your best.
• Wireframes set client expectations of what’s to come.
• Clients sometimes get very confused when presented with lorum ipsum.
• Clients expect to see behaviors and states.
Page 36
If you must use Ipsum…use the bacon variety
Bacon ipsum dolor sit amet strip steak ham hock beef ribs capicola shoulder meatloaf kielbasa biltong bresaola frankfurter shankle sirloin. Doner t-bone fatback pork kielbasa brisket, sirloin tenderloin drumstick. Doner cow rump chuck pancetta, bresaola short ribs ham. Boudin salami pastrami prosciutto pork chop brisket turkey ground round pancetta venison short loin tongue ham hock swine doner. Salami capicola turkey, pork doner turducken jowl pastrami bacon sirloin venison chuck. Pork ham hock t-bone drumstick pork belly rump. Jowl bacon sirloin chuck frankfurter ground round.
![Page 37: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/37.jpg)
Kolaitis.com
![Page 38: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/38.jpg)
Kolaitis.com
Quality Assurance Engineers
Page 38
How They Use Wireframes: To compare the end state system with what was originally designed and signed off on.
![Page 39: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/39.jpg)
Kolaitis.com
Quality Assurance Engineers • Sometimes use wireframes as a
form of a System Requirement Specification (SRS) document.
• In the annotations, refer to specific requirements #’s to easily map features to requirements.
• Detailed explanations on how the system should function help ensure the end state is up to par.
Page 39
![Page 40: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/40.jpg)
Kolaitis.com
![Page 41: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/41.jpg)
Kolaitis.com
Questions
Page 41
Audiences
Questions
Introduction
Recap
![Page 42: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/42.jpg)
Kolaitis.com
Questions?
![Page 43: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/43.jpg)
Kolaitis.com
Recap
Page 43
Audiences
Questions
Introduction
Recap
![Page 44: Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennifer T. Sharp & Philip Usatine)](https://reader033.vdocument.in/reader033/viewer/2022060106/54c798934a795950518b466b/html5/thumbnails/44.jpg)
Kolaitis.com
Recap
Page 44
• Let team members know where to find the latest wireframes and what was last changed.
• Always develop a sitemap. • Start thinking in terms of reusable components, controls, templates
and responsive designs. • Don’t limit a visual designer’s creativity. • Design with a grid layout. • Adopt a common wireframing tool/method within your organization • Annotate your wireframes and map features to system requirements. • Use real content, not lorum ipsum. • Wireframe with your team in mind!