Expertise / Interaction Design / Prototyping

gui design

As in product and industrial design, interface prototyping is an essential GUI development tool for validating usability and issues and testing the technical approach. The iterative interface design process utilizes many GUI design development tools and involves the design and development of several interface prototypes of cumulative fidelity.

Early in the GUI design process, sketches and workflows depict initial design approaches that can be reviewed and refined based on user needs and technological opportunities. As the design is refined using a range of development tools, mock-up screens are created to visualize the aesthetic / graphic direction of the GUI design and are used for early user feedback via usability testing.

Subsequently, high fidelity GUI prototypes are created for usability testing. These tools may be developed in Flash, HTML or other common GUI technologies, and are best when paired with industrial design prototypes to provide users with a realistic tactile, visual and interactive experience. Touch screen, mobile computing tools and PDA platforms may be used for development prototyping as well. Auditory design may also be included to provide acoustic cues and as a branding technique. Many of our projects require the parallel design and development of GUI prototypes with industrial design prototypes.

A representative user interface prototype project will include high level and detailed prototyping stages. These prototypes are critical GUI design development tools. High-level prototype design focuses on the overall organization of workflow and screen layout including:

  • GUI-wide information architecture
  • Screen-level information architecture
  • Navigation models and categories
  • Visual design themes
  • Interaction modes

Low-level or detailed prototyping focuses on specific user interface element design, including:

  • Screen-level detailed visual design
  • GUI design development such as state-changes, animation, transitions and sound
  • Refinement and further definition of navigation and information architecture

One of the most effective GUI design development tools for detailed prototyping is Flash. Flash as a development tool allows us to quickly create realistic, interactive prototypes and simulations for proposed interface designs. In some cases these GUI design development tools can serve as the basic code for the finished GUI as well.

The Flash prototyping process is preceded by the design of detailed static screens and the specification of interaction modes and behaviors. For example, visual transitions between screen states such as moving, fading and zooming. Once these visuals and behaviors have been developed and documented the Flash GUI prototype development can take place.

Flash GUI prototypes are a useful tool for conducting usability testing in an interactive manner with web-based, stand alone, touch screen and even mobile or handheld GUI applications. Prototype tools also serve as "living documents" to communicate interactive functionality to software development teams beyond traditional GUI development documentation.