A Day in the Life of a UX Designer: Part IV – Try out the Alternatives

Preparing For Usability Testing

If we need to prepare visually treated designs for usability testing, then our designs do not necessarily need to be completely accurate for slicing up and programming, but they need to be clean. What I mean by “clean” is that the layouts are crisp, spelling is accurate, and persistent items (like navigation menus, headers, footers, global navigation) are positioned consistently across all pages to be tested. This ensures that the user will not be distracted by tiny layout changes and can focus on navigating the site and completing the tasks being tested.

The ultimate goal of usability testing is to confirm whether the visual designs meet our original criteria and whether they resolve the problems we had in the first place – ex). “User’s can’t find this feature”, “Shoppers get lost in the checkout process”, “The site doesn’t excite users or feel like our brand.”

Now, testing doesn’t have to be a big, daunting, expensive endeavor. As mentioned in the last article, it’s important to “Test Often and Test Early” so do take the time to test, or stop and review the visual designs against best practices by an unbiased eye during your process even if it’s at a smaller scale than your ideal. Much formal usability testing is conducted in a relatively controlled environment with an analyst working side by side with pre-screened users, or remotely using software and web capturing devices that allow the analyst and user to communicate.

But usability testing can be as simple as asking a few folks in the cubicle down the hall some simple questions to test a screen. A great book that I think is quite helpful in making usability more approachable for designers and business owners alike is Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug. Check out the chapter called “Usability Testing on 10 Cents A Day” for a good read on how to make usability testing an easier part of the process without breaking the bank.

Moving Into Production

If we’re ready for production, this means we are at a point where we’ve finished refining designs and these designs have met or exceeded our initial design requirements, creating a compelling user experience for our audience. To cross-check our work we can ask ourselves these 4 questions:

Have we explored enough screens to establish an overall design language that can be applied to most any other pages that might come later? This is where that sitemap or information architecture diagram comes in handy again to cross-check my work where I had outlined all the critical screens or page types needed.

Is the design language clear enough to be easily translated to CSS styles or other global styling? In my experience, the best way to communicate the important features of the final visual design is to create a style guide document that specifies dimensions, fonts, colors and any unique elements that will need to be built. Here’s a sample of one style guide element I’ve created that shows layout dimensions for one screen. Other pages within the style guide specify color codes and text styles. To view more samples or other style guides I’ve created, send me a comment or DM me on Twitter.

Have all technical notes or key interaction functions been demonstrated in our desired interaction flows? This can be accomplished by appending engineering notes to each screen or layout. Or for particularly intricate designs, a simple interactive (clickable) mockup can help tremendously in communicating the desired effect to our developers.

Does the development team have all the graphical assets needed to move forward? As a designer, this can mean providing clean, layered Photoshop, Fireworks or Illustrator files or just the flattened layouts as JPEGs or PNGs.

If we’ve successfully answered yes to these key questions, then your design is ready for handover to your client and their development team.