Fork me on GitHub

Setup - Interaction Design

Objective

In the early stages of a project we identify key user characteristics and goals. With this information at hand we begin designing interactions that solve the most important user problems in the best way possible.

Principles

Keeping things simple is our foremost goal when designing each individual user interaction. We follow a user centered design process that focuses our attention on the most critical user needs and then verifies our solutions through user testing.

Focusing on the user makes the most efficient use of our design and development efforts while ensuring that we are developing the best possible solution.

Our Process

At the outset of the project we will determine, alongside our clients and users, which of these tools and activities will best address the goals of the user and project.

Each project will employ a different mix of the following activities and at varying degrees of effort. For example, smaller well-defined projects will be designed in a much more scaled back approach as opposed to large greenfield projects.

Tools and Activities

Interaction design is accomplished through experience, user research and an increasing fidelity of prototyping activities. Following is list of activities and tools we utilize as we design the towards the final solution.

Identify Goals & Constraints

In order to be successful, we must first identify our goals. For interaction design we are referring to user goals (what do they want to accomplish?) as opposed to project goals (we want to make a bunch of money!). The latter is certainly part of the equation, but you can't acquire cheddar without solving real user problems.

We also understand that projects have real constraints (e.g. time, money, people, technology, etc.) and we welcome those. In our experience, design is often more efficient when there are some guidelines that we must work within… as long as we are still serving our users.

Build User Profiles

It is also critical that we do what we can to define our users. Often times technical projects become just that, technical, and we lose site of the human element to all that we do.

Learning about our users increases the empathy we feel for them and should stick with us throughout the project. In order to build user profiles we review sources such as:

  • User and usage stats of existing product(s)
  • Review competitor offerings and building pro/con lists
  • Conducting small focused surveys
  • Reviewing customer feedback and know issues
  • Performing a task analysis and prioritizing need

Generate User Flows

Prior to diving into screen layouts, we take time to write out the user flows. How do we take users from problem to solution in an eloquent manner? Where are inherent bottlenecks in the process? What are the precise interaction points for the user?

We quickly iterate on these flows, each time further simplifying until we feel the product is focused on core solutions.

Create Prototypes

Depending upon the needs of the project, we will create low, medium and high fidelity prototypes. These activities will allow us to verify our proposed solutions with real users in a most efficient manner.

Sketches

Based upon previously defined user profiles and flows, we begin blocking in the necessary content, features and interaction points using low fidelity user interface sketches.

This stage is often handled initially be a designer using pencil and paper, but we have found that sharing these early sketches with the team is greatly beneficial.

Features begin to arise at this stage so it is important that all parties be involved - clients, product managers and developers.

Wireframes

Taking things up a notch on the fidelity scale, we turn sketches into wireframes that greatly assist with laying out all the necessary elements on any given view.

Though it depends on the type of project, we don't typically lay out every screen. With our focus on key user goals and flows, we layout the most critical screens and features of the app.

Our wireframes tend to be very simple, gray-scale, block versions of the final product. We use tools such as Balsamiq, Photoshop, Illustrator and even HTML/CSS to achieve this result.

Functional Prototypes

In certain cases where the interactions are complex and need to be proven or interactively tested (i.e animations, technical interactions, etc.) then we prefer to code up a higher fidelity prototype.

This may be a simple HTML/CSS/Javascript spike on a framework such as Zurb Foundation or Twitter Bootstrap, or it may go deeper into backend logic with Rails, AngularJS or other iOS prototyping tools (e.g. Ratchet, FramerJS, POP ,etc. ).

From these prototypes, we can prove that our solutions a) solve the problem at hand in an easy to use manner and b) are technically feasible.

Usability Testing

Would you buy something that has never been tested by a real human being? We wouldn't either.

Whether at the sketch, wireframe or functional prototype phase, each of these solutions should be placed in front of at least a few real users. It doesn't have to be a big production with a lot of people involved. Simply lining up a few testers at each step will provide invaluable feedback that will uncover obvious flaws in the design.

We highly recommend user testing and have seen nothing but positive feedback form clients who have been through the process. Your app will only benefit from it as even the smallest amount of user testing is better than no user testing.

  • © 2013. Made by the fine folks at CramerDev.