YOU NEED THESE SIX TOOLS FOR UX

Artboard 800.png

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.

Sun Tzu Quote.jpg

Posts I’ve written on customer research are here , here and here with anecdotes from previous work.

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. 

 

Nothing works better than a highlight reel to transition a contentious feedback meeting, with lots of “I think users will want this…”, to a collaborative design session with folks using “…we’ve observed…” to start their sentence.

2. Art Supplies

AdobeStock_108675757 CROPPED.jpeg

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.

I am a believer in the power of tactile sensation as part of the design experience, which is probably why I still listen to vinyl.

3. Diagram Software

AdobeStock_126107 CROPPED.jpeg

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.

Two points:

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

AdobeStock_129959227 CROPPED.jpeg

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.

Lots of options here, but at KRUTSCH we use Balsamiq, Axure and, yes, more sketchpads.

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

AdobeStock_65158487 CROPPED.jpeg

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.

6. HTML/CSS/JavaScript Tools

AdobeStock_77915457 CROPPED.jpeg

Where possible, get right into code, building a simple prototype/mock-up with HTML, CSS and JavaScript.

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 Headshot.jpg

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.

Follow KRUTSCH on LinkedIn and on Twitter to see more posts on being a UX Leader.