About Face 3: chapter 7 notes (I)

These are just some notes I’ve taken after reading chapter 7 of About Face 3 and they might not reflect what the authors really state in the book.

Things we have done so far:

  • Quite a lot of qualitative research.
  • We modeled our users through personas who have goals.
  • We narrated the main scenarios which led us to figure out our requirements.

From Requirements to Design: The Framework and Refinement

The authors divide the Design Framework into three sub-frameworks (they refer to frameworks meaning phases). These are:

  • The interaction framework: Describes high-level screen layouts, flow, behavior and organization of the product. This work is done mainly by interaction designers. There are six steps suggested in this framework:
    1. Define form factor, posture and input methods. Form factor means how the form of the device you’re designing to affects and constrains the user-interaction. The posture means how the user will devote attention to interacting with the product (i.e. if he’s just passing by, it’s part of his job, it’s mandatory for him to use it,…) The input methods define how users will interact with the product.
    2. Define functional and data elements. Data elements are those pieces of information which must be available to the user, they are the reason why the product is used after all. Functional elements are the operations users can do with data elements. Important! Design principles and patterns begin to be useful in this point! Don’t reinvent the wheel! When choosing a solution always think on user goals! There is a very interesting point made here: “Pretend the product is human” ! I suppose it depends on the human… but, generally speaking, humans seem to be more considerate with other humans than non-human things…
    3. Determine functional groups and hierarchy. This will lead to primary screens and establish a hierarchy on your functional and data elements.
    4. Sketch it! Very simple… just to give a general idea. Try different approaches. It’s an iterative process! Forget about the details!
    5. Construct key path scenarios. Task-oriented. Precise behavior of interactions and pathways. Storyboarding.
    6. Check designs with validation scenarios. These scenarios are supposed to be simple and to the point, they must point out any flaws in the design quickly. 3 types: key path variants (not the usual way of interaction), necessary use (something what must exist but it’s rarely used) and edge cases (programmers’ favorites)
  • The visual design framework: The book proposes a 2 step process. Firstly, you should study different visual languages which are independent from the specific interaction framework. These visual studies apply to the graphic components of the interface (typography, color, dimensions, composition, material properties,…) Finally, it proposes to apply the chosen visual style to the screen archetype (for example, the main screen).
  • The industrial design framework: when you’re designing more than software and is your responsability to deal with some kind of device (pre-existent or brand new) the form and the input methods affect the interaction framework directly. Collaboration between them is needed to find the best solution. Remember to use prototypes! There’s only one user experience given an specific product.

Next, the refinement phase takes place. In this phase we care about the details and produce the inputs of the developers. Everything is based on the previous work did to build the Design Framework. Everything should be crystal clear to let the developers focus on their work and not in understanding what they have to do.