YOU NEED THESE SIX TOOLS FOR UX
Yes, this is a Listicle. That’s why you clicked on it. Let’s jump right in.
1. Video Camera + Editing Software
Remember: customer research is what makes or breaks the product, not the user interface interaction model or visual design. You should be spending a lot of time observing users, analyzing and discussing what you’ve observed.
At KRUTSCH, we use Sony video cameras and two styles of tripods: a full-sized model and a small, desktop model for placing on a conference table. I avoid using smartphones for recording interviews and observing test subjects. The dedicated cameras have better microphones for picking up sound. More importantly, dedicated cameras have better lenses that let you zoom into presentation displays, laptops or even smartphones.
For editing software, anything will do, but we use Final Cut Pro X, as it makes it easy to create highlight reels for our clients.
2. Art Supplies
Just what it sounds like: sketchpads, pens, whiteboard markers & Post-It® notes.
We’ve been using sketchpads more and more for client meetings and general note taking, because it encourages you to sketch on the fly. A client can be describing a business rule or product requirement, for example, and you can take notes that include page layout ideas, workflow diagramming, whatever. I used to take notes with Evernote, to be honest, but my design associate and I are almost always bringing sketchpads to meetings now.
For Post-It® notes, we’ve started carrying packs of these in our bags. Earlier in my career, I was a little cynical about the little sticky notes on the whiteboard. However, I’ve experienced how clients react to their use. Clients feel more connected to the design process when they get to physically place them and move them around.
When collaborating with clients, avoid using digital tools; people don’t focus as well. Use large sketch pads on a table. Stake holders will lean-in and become engaged. Encourage them to pick up a marker and add-to/change the flow or design.
3. Diagram Software
After customer research, workflow analysis is the most important element of UX design. Workflow is the direct output of effective customer research. Call it the customer journey, if you like. Understanding how a customer goes from point A to point B smoothly, intuitively, while delivering on expectations is crucial.
1. Use a digital tool. Period. This is not the place for sketchpads, although there is nothing wrong with starting with there. At KRUTSCH, we use OmniGraffle, but there are others.
2. Align your flow diagram with anticipated pages or screens. Label your diagram blocks with descriptive names and a number.
For example, a page in the diagram may be for customer login. Maybe login is a multi-step process that includes authentication, location identification and role assignment. Label the blocks in the diagram something like: 100 – Authentication, 110 – Location and 120 – Role Assignment.
As the design and development process move ahead, it’s much easier to say: “…let’s look at page 100…” instead of saying, let’s look at the login page, to which someone asks: “…which part?”. As the application grows in complexity, we seen our workflow diagrams grow to dozens of pages with hundreds of discrete screens. Developers love this, once they see it in action.
4. Wireframe Tools
With a workflow in place, you need to start filling in some of the details. We find that iterative wire framing is a great next step, before prototyping with code.
Our guidelines are these:
1. Sketchpads for wire framing with clients (i.e. collaborative meetings on-site);
2. Balsamiq or sketchpads for illustrating an idea to the development or product teams;
3. Axure for exploring user interaction models and getting a feel for application flow.
One of our associates has really done impressive work with Axure. You should exercise caution that the tool doesn’t become an end in itself. Move to working prototype code, as soon as possible (more on that in a minute).
5. Illustration Tools
Parallel to developing your wireframes, it’s important to develop a visual language for you app. A rhetoric of visual cues that guides the user through your app or service to their end goal.
Again, many options here, but no one was ever fired for recommending Photoshop and Illustrator. I know I will lose “claps” for not using Sketch, but at KRUTSCH everyone uses Adobe CC. Why? Because… wait for it… it’s what everyone learns to use in school.
The more important tool: a person that really, really knows visual design.
Everyone thinks everyone else’s job is easy: it isn’t. Find a school-trained visual designer with which to collaborate. Lots of them are out there, looking for UX work. Don’t “wing-it”, any more than you’d ask a visual designer to “wing-it” and architect a complex database schema.
Bonus tool: consider Visual Attention Software, like the cloud service: 3M VAS.
VAS has radically changed the way we do visual design. It’s a poor-man’s eye-tracking solution. You upload your storyboards and see where users will look. It also shows in what order they will likely scan the UI. I suspect that actual eye-tracking analysis may be more effective, but that approach is expensive and extremely time consuming.
Again, a massive number of options. You can almost measure the age a software developer by the code editor they use. For myself, I use Emacs (yikes!) for text editing and Dreamweaver for HTML, et al., editing.
The younger associates I work with use online editors in the ever-changing landscape that is front-end development.
Again, if you can’t code yourself, find someone who can build using stable CSS frameworks. The CSS framework will define the visual style more than anything else. The longer you wait to transition to prototype code, the farther away the real thing will be from your beautiful design.
Bonus tool: Zeplin.io. for design hand-off and collaboration. Like VAS above, Zeplin has changed the way we work and interact with dev teams. Whoever came up with the idea for Zeplin really understood the age-old problems:
1. Devs don’t have Photoshop and are endlessly asking for collaterals (images, color palettes, whatever);
2. Devs look at the design comps and then build their own CSS that doesn’t match what was designed.
These two problems have driven me bat-shit crazy my entire career, starting as a user interface programmer and then moving into UI/UX a number of years ago. Zeplin is one of those tools that make you wonder how any of this worked, beforehand.
Ken Krutsch is Managing Principal of KRUTSCH Associates, a digital product design firm, specializing in product vision and realization, including customer research, roadmap development and full-stack user experience design.