The user interface can be designed from the user story by following a process to define the UI tools to be included, then creating paper prototypes to test the usability, without focusing on the visual design.Â
The user interface consists of five layers:
- Strategy – why is the software being built? What’s the usage context? What are the business goals?
- Scope – tasks for the page
- Structure, skeleton, and surface – this is where the user interface and prototyping takes place.
- Understanding the task-centric scope defines the page structure. Tasks should be defined at the role level – i.e. a person engaged in an activity, e.g. shelf stacker. Create personas to represent people the product would serve â€“ this allows focus on specific people in the design. Consider their skills and aptitudes.
When modeling tasks, consider the goal level:
- Cloud – on going, business level goals, e.g. communication
- Kite – long term goals, e.g. manage email
- Sea – tasks that could be accomplished in one setting, e.g. send an email
- Fish – sub tasks that stitch together to form a task, e.g. enter “to” address
- Clam – sub tasks that form larger sub-tasks, e.g. look up an email address
Stories should start from sea level – at this level, if a user accomplishes the goal, they will consider themselves successful in doing something. Remember – “if you stay below sea level for too long, you’ll drown”. At this level, there is no UI design decision. As stories are split into small enough items to work on, the design starts to take shape as they become more granular.
A good user story is an example of use. They should follow a format:
As a [type of user]
I want to [perform some task]
So that I can [achieve some goal]
They should describe the goal, not the solution.
When moving towards a UI solution, use Constantine and Lockwood’s “Task Case”.
The next step is to define the UI tools for each of the system responses that will allow it to meet its responsibility to the user. UI tools can be three types:
- Container – contains and presents information
- Action – allows execution of an action
- Actionable container – contains and presents information, and allows it to be acted on through selection or manipulation.
Once we have a list of the UI tools, it’s straightforward to create a basic paper prototype, and test it with real people, get feedback and refine it. This saves the time investment in creating and refining a real prototype.
Recommended further reading
Designing the Design Process – http://www.leaonline.com/doi/abs/10.1207/s15327051hci0502%263_6;jsessionid=ipItXBeszOt5o2aYbZ?cookieSet=1&journalCode=hci
The powerpoint from this session also includes further explanations and useful diagrams.