Effective Feedback – Fake it before you make it

Building great user interfaces can take some time. You want to be sure that your first released version points in the right direction. How can you get feedback from your customers before you deliver a real product or a working prototype? What is the best way to try things out and be able to throw them in the garbage can afterwards? People tend to have problems throwing things away if they have already invested some time and this is exactly the reason why you should try out your ideas in an easy and cheap way.

Stage 1: Paper Prototypes

Probably the cheapest way to test the usability of an idea is to create paper prototypes. You don’t need a lot of things do produce your design:  some sheets of paper, a scissor  a pen, some glue and imagination! At Atlassian we’re using this technique to try things out. We’re doing one or two day design sessions when we’re trying to create the interface for a new feature or change the usability of an existing one. Our designers are sketching the interfaces on paper and trying them out by using there fingers to virtual click on drawn buttons or drop down menus. Take a look at this video to find out how a paper prototype works.

Your sessions are getting even better when you involve customers at a later state. If come up with 5 alternatives you should do some sessions with existing customers to receive feedback.

 Stage 2: Sketching Tools

Paper prototypes are good to collaborate if you’re in the same room. It tells you something about the interaction with the new feature. But what if your team is distributed? Tools are made for this. You can send your design by email or work together in an application on a prototype. If you want to ask a broader audience it is also way easier using tools to show your ideas remotely and collect feedback.

I would use a tool when I have three to five favorites to ask more stakeholder for feedback. There are pretty good sketching applications out there. My favorite is balsamic mock ups. It looks like you’re just sketching the feature. You’re not designing a polished interface, it just looks like a sketch. That way people are not expecting that this will be the final design and concentrate much more on the big things than on the details. You can also do interactions like drop down boxes and define actions when clicking on buttons. Use a VNC app or the Skype / Google HangOut desktop sharing feature to look at the screen of your stakeholder. Record the session to discuss the results with the rest of the team.

 Stage 3: Nice looking empty software

That way you should be able to have two favorites. Now you can make them nice. With some HTML / CSS knowledge it’s not that complicated to create a nice looking interface. Mock some functionality just to show how the final design would feel and look. At Atlassian we have created our design elements like menus, fields and buttons with Keynote (Apples Power Point). That way everybody can make a nice looking screen to try the final designs. It is a little bit harder to show interactions but also keynote has some nice animations. Don’t use them too intensive, it will give your programmers a hard time when they should make the real app 😉

Faking before making!

So fake it before you make it. That way you’re not so connected to designs that will be thrown away again. Ask as many different stakeholders for feedback as you can get. But be careful just with all the feedback you get: If you’re doing something totally new and revolutionary, most existing customers and some managers will be afraid of the change. Sometimes you need to risk things to get better.

Effective Feedback – Blog Series

This is part 2 of my “Effective Feedback” blog series. Here are the currently released articles:

Part 1: Effective Feedback: No barriers 

Part 3: Effective Feedback: Make it an Experience

Part 4: Effective Feedback: Involve Developers

One thought on “Effective Feedback – Fake it before you make it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s