article (Tue Feb 04 2014)

A Question-Answer Model for Interface Design

  • #uxdesign
  • #designthinking

I have recently been working on a couple of projects that required me to create interfaces from scratch. Depending upon what kind of person you are (or what you state of mind you are in when you are given such a task) your reaction could either be that of rejoice or rejection.

Sometimes you might feel that starting off from a clean slate might be the best thing that has ever happened to you. Other times, you feel that its easier to keep picking on a previous design and until you come to a point that you can do it no more and then you go to the drawing board and try to eliminate one by one each of the flaws that you found.

Either way, your final design must succeed at doing at least a few things

Deliver maximum value to the user within the constraints of the the real estate available to you. Deliver maximum value to the business within the constraints of the timelines for the product that needs to be delivered. Deliver an experience that make the different pieces of the product feel deeply connected to each other. If you are working on a project where the design guidelines have already been set up, there is not much that you can do in terms of the color scheme or many other things. However, the change that you can effect can come from a remodelling of the information architecture on a page.

An effective information architecture can be created only when you do one important thing - you ask your interface questions. You ask questions as if you are the end user. For example, those of you who have read Steve Krug’s wonderful book - Dont Make Me Think, he briefly talks about how when a user explores a page, there are several question marks on the user’s mind. He might say - What is that word supposed to mean? Is this link the same as the other? If it is, then why are there two of them? Why is this keyword kept out of this block (talking about visual hierarchy)?

Drawing upon the same principles, how about doing something very similar when you are designing the interface for a web page. If you know who your users are, make a list of questions that you users might have in their minds when they land on the page that you are designing. e.g.

What does this page do?

I want to do X. Does this seem like the right page to do X? If not, is it leading me to do X? I want to go to the previous page? Is there a way out? Is there a penalty for going back? Is this just one step? If yes how many more? (this helps in time assessment) Why should I do this? What value does it add for me in this task? What can I omit? What are the consequences of omitting certain parts? The above list is a very generic set of questions that you can keep in mind when designing interfaces. However, your goal, as a designer must be to always ask activity based questions. Determine the intent, prepare a list of the activity based questions, and then go on bravely and design your page such that it answers all of those questions. Or at least get close to answering as many of them as you can design for.

This approach of preparing a list of questions for an activity that you design should be able to answer has 2 very crucial advantages.

You can prioritize things on the page by prioritizing the questions. Important questions need to be answered first and probably need to be kept at the top of the page. Questions whose answers are contextual can appear when the user interacts with the system which implies that you need to have some buffered real estate to display those contextual answers.

It helps you effectively apply a color scheme. The reason is simple. If you know what is important, you will know the colors that you need to pick to highlight the UI elements so as to draw the user’s attention in the proper sequence, thereby tailoring the experience.

I found this technique pretty useful. Its analogous to a requirements specification for a product. The only difference is the fact that instead of developing a product you use those questions to design an interface.