Imagine you wanted to develop a new user interface for a system or software package. How would you approach developing requirements for it? You would probably have to start by asking yourself two questions: Who are the users and what goals are they pursuing? And you would probably have to think of typical user scenarios in which you could trace workflows. Ideally you will have internalized the foundations of developing usability requirements – that is, human performance capacity and perception – and you are currently maintaining close communication with users. In my experience it is not individual discussions with users that lead to the best usability requirements, it takes cooperation in an interdisciplinary meeting to get the job done.
Usability requirements in a charrette session
Ever heard of a Charrette? It is a the French word for carting and it is often used in the context of developing requirements for a user interface for a system or software package. It refers to a period in the 19th century when art students transported their works to the art academy in carts. During the trip many students would continue working on the project while onlookers would watch and comment.
So what should you pay attention to when eliciting usability requirements in a charrette session? Who should you invite to your session, what should you do and how much time should you invest?
- It’s important to invite participants who have different perspectives on the system under development. Developers, usability experts, users and, if necessary, product managers or marketing experts.
- Foster a creative atmosphere in the room: whiteboard, flipchart, bulletin boards, cue-cards, colored markers and a lot of A3 paper.
- Hand paper out to the group. You could use a persona to make things clear (“Alex would like to log his time from a client visit, he wants to use the time before boarding a plane. The volume of information that he needs is quite large. It needs to be viewed on a smartphone. Keep in mind that the time pressure and environment make it difficult to concentrate.”). Or you can formulate a hypothesis that is either upheld of disproved (“There is not enough space on his smartphone to do more than one day of time logging”).
- Give everyone an A3 piece of paper and ask each participant to divide it into six equal parts.
- Now you are ready to go. Encourage all the participants to sketch five or ten minute long ideas that aim to solve the problem. Sketch the user interface, workflows, storyboards, diagrams – anything is allowed as long as they are pure text descriptions.
- After a certain amount of time everyone gets three minutes to explain their sketch. Questions are allowed. Then all the participants are invited to give the presenter feedback: “What I like about your idea is…. I think we can improve on ….”
- Now hand out blank A3 pieces of paper and ask each participant to summarize the original six ideas on the basis of the feedback into a single idea. Allow five to ten minutes for this.
- Let each participant present their results and evaluate them together.
- The final step takes about 45 minutes. This is when you collectively choose the idea that seems the most promising. At the end the team gets to present the idea on the whiteboard or flipchart.
This idea then forms the basis of working out usability requirements.
Artefacts in a Charrette session
The following artefacts could arise in a Charrette session. Artefacts that you can use to document usability requirements:
- Storyboard: A sequence of images that illustrates the system in action using a story. Storyboards can also be used to sketch a dialog flow. The biggest challenge in storyboarding is having the courage to draw – especially if you are not the best artist in the world.
- LoFi (Low Fidelity) Prototype: This could include anything from a pencil sketch to a wireframe model of a dialog box or screen.
“If you click here the following screen should appear” – comments like this can be illustrated with LoFi prototypes as shown in the sketch below – this one comes courtesy of our usability team.
Creating connections by developing LoFi prototypes
Eventually the LoFi prototypes will be made more precise through consultations with future users – if they are available. Max Wertheim’s design theory which refers to human perception is also useful in this regard:
- Summarize logically connected elements on the screen. Go ahead and group elements with headings and frames or colored backgrounds as far as space allows.
- Arrange the interface elements on the screen in the order in which a user will see them. Test your expectations with a LoFi prototype.
- Organize selection and input fields so that the cursor moves from left to right and from one element to a neighboring element, i.e. avoid flying all over the place.
- By applying the principles of commonality and proximity you can create the impression of columns and lines. The editing should also take place in columns and lines. Searching and comparison are made easier by using columns. Organize the columns in embedded elements and anchor them to the left. Note, different rules apply to tables.
- Organize the buttons with alternative actions in a group and keep them next to each other in a line if possible. Keep to a set system (e.g. cancel buttons are always placed on the far right of the screen).
- When ordering groups on the screen, try to keep the total picture balanced.
- Groups should be at least 0,5 cm apart (except on mobile devices).
- In order for user features to be visible at a glance the number of groups on the screen should not exceed four or five.
- For more than five groups of elements it makes sense to spread the groups on several index cards. You can use one index card for connected groups. The shared context of information on a tab should reflect the headline. Several tabs in a dialog box should refer to the same object. The same rules that apply to dialogs apply in the designing of index cards.
- Note: with space saving elements like drop-down lists or drop down combination fields, a rolled-out element should not hide information that the user needs for the editing steps.
- Also feel free to use the inverse of these principles: Highlight elements by consciously violating symmetry. Draw attention to elements by spatially isolating them from other elements or by violating principles of similarity by changing color, form or size.
LoFi prototypes, workflows and storyboards are still not the same as usability requirements. But you can use a sketched workflow to derive a range of requirements for the usability. In a future blog post we will outline how to best document these requirements as well as how to best use workflows and storyboards that you have created on a whiteboard or sheet of paper.