The EatonGolden Toolkit: The Interactive Prototype

By Gregg Harrison
September 2011

There are some people who can look at architectural blueprints and envision a 3-dimensional space complete with painted walls, furniture, and window treatments. Others see a meaningless jumble of lines, shapes, and numbers.

While we don’t create architectural blueprints here at EatonGolden, we create the interactive equivalent: wireframes (black-and-white diagrams that define the structure and layout of a website) and interface design concepts (sample full-color screens in .jpg format). Wireframes are very much like blueprints and, not surprisingly, our clients have varying degrees of comfort and experience interpreting them. Interface design concepts indicate the direction of the visual design, but show only limited details of movement and interaction design.

Architects demonstrate their vision by building miniature 3-D models of their concepts.
At EatonGolden, our UX team uses interactive prototypes to demonstrate our ideas. An interactive prototype is a scaled-down version of the whole site or application. The three types of prototypes we create are:

• Wireframe prototypes: Simulations of the core structure of the content and functionality through a collection of linked black-and-white diagrams, typically created with Axure or OmniGraffle.
• “Low-fi” design prototypes: Simulations of basic interactions (links between pages, rollover states), typically demonstrated in 5-10 pages/views, using “disposable” code that is easy and efficient to develop.
• “Hi-fi” design prototypes: Advanced interactions (simulated database functionality, logic-based interactions, animation, etc.), typically demonstrated in 20+ pages/views, using code that is more time-intensive but re-usable.

Prototypes merge the efforts of Information Architects, Interface Designers, and Developers into a working website model. They also allow us to explore additional elements of the experience that are not typically demonstrated in the initial wireframing phase, such as movement and transitions between information and pages. Since our clients look to us to organize very complex systems, prototypes offer us an opportunity to validate our thinking without investing too much time or budget. Prototyping fosters open communication and collaboration among the project’s stakeholders: 

1. WITH OUR CLIENTS:

• Creating a working prototype that incorporates design, content and interactivity engages clients more completely at an earlier stage in project development (and budget).
• With a prototype, we enable our clients to review wireframes, design, and content in an integrated simulation – before the last phase of development.
• We find that our clients are better equipped to provide more meaningful feedback when they can see how these elements will work together. Prototypes offer us the ability to gather this feedback early in the process.
  
  

2. WITH OUR INTERNAL TEAM:

• Prototypes are developed with an interdisciplinary approach, including information architects, designers, and developers working together from the outset.
• This early collaboration promotes more comprehensive solutions and leads to successful implementations because all elements – from the content to the rollover states – have been accounted for and addressed by our team.
  
  

3. WITH END USERS:

• Last, and most certainly not least, we use prototypes to evaluate the interface with ACTUAL users. After 10 years of building sites, we’ve learned that the best way to uncover usability issues and improve interactive experiences is to give users an opportunity to provide feedback on our work.
• With an interactive prototype, we are able to gather this important feedback before the entire site is built and without integration of the data.
• Once a full site has been built and launched, making changes can become cumbersome and difficult. In contrast, making optimizations and improvements during the prototype phase is significantly easier. Remodeling websites once everything has been built and users have “moved in”, much like remodeling a house while still living in it, can be a complicated, time-consuming, and costly affair.