Toggle navigation

Two User Experience Tools We Love

Patrick Doran December 21, 2010

When the Atlantic BT User Experience team gets involved in a project, we’re presented with a great opportunity to tell a website’s story.  With the help of our clients, we tell it with outlines, content maps, user stories, wireframes and more. By telling most of the story up front, we allow the designers and developers to understand what the target is and who the users really are.

We’re strive to make this User Experience process part of each and every project we work on.

An example of sketching out a series of ideas.

With markers and paper, we can rapidly sketch through several layout possibilities.

Why Wireframe?

One critical user experience technique is wireframes. We make wireframe mockups of our sites before our designers lay color to pixel because it allows us to explore ideas quickly, keeping the good ones and leaving behind those that won’t work. These wireframes act like blueprints for the complex interactions and flows for the website users.

This idea exploration leads to our client’s customers finding what they’re looking for, or looking to do, as quickly as is possible.  This speed for the user is very important.  In fact, our client’s customers demand it.

There are two wireframing tools we’re very fond of here.

1. Markers

Simple sketching with paper, markers and highlighters.  It’s a method that can’t be beat for its speed and efficiency at communicating ideas.  Think of it like the first draft of a great story — rough around the edges, but you have a fair idea as to what’s going on.

Sketch of the modal dialog boxes.

With a little labeling, the sketch becomes a powerful tool.

Several AtlanticBT staffers recently attended a day-long seminar put on by the Triangle Usability Professionals Association where the techniques of interface sketching were explored. We learned about using different marker shades, along with highlighters, to imply depth, focus, and interactivity.

It was great for all involved, and we knew we had to make it a formal part of our project process.

As an exercise, we took a look at our own Portfolio page and sketched out some possible upgrades to it.  The sketching allowed us to explore several ideas without spending any unnecessary development time.

2. Balsamiq Mockups

Screenshot from Balsamiq Mockups

Wireframing with Balsamiq Mockups quickly provides clear direction.

Sketching is great – but at some point it becomes necessary to get those ideas onto screen so we can share them with our clients and internal team.  That’s where we turn to a prototyping tool like Balsamiq Mockups.

Balsamiq Mockups maintains the sort of low-detail “focus-on-the-feature” feel of sketching, but in a digital format.  It’s easy to use and easy to make changes when client and user feedback starts rolling in.  Balsamiq’s interface allows the user to add common website elements like text, links, buttons, and layout elements to the page with drag-n-drop ease.

Balsamiq allows us to take our sketches, refine and annotate them, and then share them with our clients to ensure that they’re getting exactly what they’re looking for as far with their site’s features navigation.

An Ounce of Prevention

The wireframing process provides three great benefits:

  1. It saves everyone time and effort by answering a lot of project questions before designers and developers get started on their work.
  2. It prevents unnecessary rework later in the project.
  3. It lets us explore how the user will interact with the website beforehand in a way that non-visual methods sometimes miss, and does it in a way that is fast and easy for everyone involved to give feedback on.
  • http://blog.unionstreetmedia.com/author/tomcull/ Tom Cull

    I have started to use Balsamiq mock ups more and more. It really helps clients visualize their site during a fairly abstract part of a project and even amongst colleagues, I can mock up an idea in a few minutes and send along to clarify.

    Do you guys and gals use any other similar tools?

  • http://www.atlanticbt.com Patrick Doran

    Thanks for the comment, Tom. We’d experimented with Protoshare, but the cost and time required were both kind of high.

    I know some of our designers used InDesign, Photoshop and Fireworks as wireframing tools as well.

    I’ve been looking at using Powerpoint since you could, in theory, show interactive drop menus for interaction-rich sites.