Your job description might not say anything at all about making wireframes, interactive mockups, or prototypes, but having the ability to quickly create them can be invaluable, whether you're the de facto user experience team at your company, or a content strategist, or a technical writer. There's a wealth of new tools that make prototyping easier than ever—you don't have to be a Photoshop guru or know any software code! Pick up some new skills that can help you solve difficult concepts, communicate more efficiently, drive improvements to your products, or move your career in a new direction.
** Presented at the Society for Technical Communication Summit 2015 in Columbus, Ohio as a 45-minute workshop. **
http://lanyrd.com/2015/stc15/sdhdtc/
4. NO
• An
See
col
@jrc_collins • #stc15
http://www.leonardoda-vinci.org/fly.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
5. NO
• An
See
col
@jrc_collins • #stc15
http://www.leonardoda-vinci.org/Drawing-Of-A-Flying-Machine-large.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
6. NO
• An
See
col
@jrc_collins • #stc15
http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg
34. Scenario
• Redesign home screen of
LinkedIn app for mobile
• Make 8 sketches
• You have 5 minutes
(37 seconds each)
• Explore various ideas
@jrc_collins • #stc15
Worked in computer graphics years and years ago, was a newspaper editor, where I loved to combine content and design. Now, in software, I’m realizing the same interest. For the last 7 years, I was at Rosetta Stone, first as a tech writer and then as a UX content strategist. Two months ago, I moved to Austin, TX to join the Design team at Atlassian as a senior tech writer. Mention Twitter.
• Who here is a designer?
• Who considers themselves to be artistic?
• Are any of you quick to the whiteboard at work?
Let’s start at the beginning.
Sketching.
Da Vinci
1903 – Initial sketch for the Wright Bros first powered flyer – on brown wrapping paper
UX people and Dan Roam of The Back of the Napkin both say that people who consider themselves bad at art are sometimes the best at sketching.
Why sketch? Why make wireframes and mockups and prototypes?
You can grasp difficult concepts by breaking them into sketches or visual depictions.
Turn an abstract into a visual and people may be more likely to understand and remember it.
Use sketches, wireframes, etc. to suggest improvements to sub-par user experiences.
Step up. You want more influence on the design of the products you’re documenting? Put out some sketches and wireframes for a new feature. ESPECIALLY if you’re in a company without a design team. FWIW, I sketch each presentation I give before I build it.
So, let’s talk terminology a bit.
This is how I think of these terms. Other UX practitioners may define them a bit differently.
What about prototypes?
• Disclaimer: I’m not pushing certain tools on you. I don’t like that kind of thing. I’m going to give you an idea of some tools quickly. It’s not exhaustive. It’s not necessarily an endorsement, either.
Tried to focus on easy, cheap, accessible tools.
• Other options: Photoshop, Flash, HTML
• By (left) hand, quick, iterative, social (share!).
• NOT going for perfection.
• Sticky notes for tooltips, modals, etc.
• Use a photocopier
• Avoids getting bogged down in typography, color, etc.
Ever seen something like this floating around your office and wondered where it came from?
• Simple drag-and-drop interface with common UI elements in a sketch-like style
• Markdown-style text editing
• Limited options again helps you avoid getting bogged down with color and typography.
Some of the standard options, but never fear! Additional assets online.
Mobile app lets you turn photos into interactive prototypes that you can share with others. This is really lightweight. A lot of UX folks are using a more powerful program called Invision to do similar things.
Make a hotspot
Thank you! Check my Twitter feed for more resources!