From User Story to User Interface

This tutorial was run by Jeff Patton. The focus was on building paper prototypes as a means of soliciting customer feedback on story details.

Jesse James Garrett has defined a user interface as consisting of the following layers that range from concrete to abstract:

  1. Surface – The finished visual design – colours, fonts, etc.
  2. Skeleton – The layout and functional compartments – navigation bars, headers, footers, etc.
  3. Structure – Defines navigation from place to place in the UI – task panes, dialogues, etc.
  4. Scope – Specific user tasks – enter data, graph data, etc.
  5. Strategy – Developed from user types and business goals.

For example, applying this framework to a house would look like this:

  1. Surface – Paint colours, material selections, etc.
  2. Skeleton – Room layouts, positioning of fixed elements such as cupboards, sinks, etc.
  3. Structure – Room plan
  4. Scope – Eat, sleep, store food, entertain guests, etc.
  5. Strategy – Live comfortably, stay clean, etc.

Of course, user stories tend to live at the Scope level because they represent specific tasks intended to enable users to achieve business goals. Our objective in the tutorial was to create a prototype to elaborate on the Structure, Skeleton and Surface elements for a specific story using paper prototyping techniques.

We were provided with paper, sticky notes, markers, etc. and a story that involved searching for CDs in a store using a self-serve touch screen kiosk. Here’s a picture of the prototype we came up with, which was well received during follow-up user testing.

Here’s what our prototype ended up looking like:

Additional information sources:

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply