Interaction Design

After understanding your site or product goals and referring to user research data we create user and task analysis diagrams. These task flow diagrams help to understand site information architecture. This transforms into design patterns and standards.

We offer following services under User Interface Design


Wireframes are simple line drawings that show the placement of elements on a web page or software application. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.

Using wireframes is a great way to begin a web site project, as it allows you and your engineers to focus on layout without the distraction of color, type and other design elements.

Task Flow diagrams / User-Task Analysis

Task analysis analyses what a user is required to do in terms of actions and/or cognitive. This also helps to understand user roles and their access to the system. This lists all the actions users will perform on the system. This document leads to software requirement document.

Task flow analysis will document the details of specific tasks. It can include details of interactions between the user and the current system. This can also be presented as Affinity Diagrams showing relations between user tasks.


Wireframe navigation

UI Task Flow diagram

  • User interface (UI) prototyping is an iterative development technique in which users are actively involved in the mocking-up of the UI for a system. UI prototypes have several purposes:As an analysis artifact that enables you to explore the problem space with your stakeholders.
  • As a design artifact that enables you to explore the solution space of your system.
  • A basis from which to explore the usability of your system.
  • vehicle for you to communicate the possible UI design(s) of your system.
  • A potential foundation from which to continue developing the system (if you intend to throw the prototype away and start over from scratch then you don?t need to invest the time writing quality code for your prototype)

High-fidelity prototyping

High-fidelity prototyping is a method where the prototype used for testing mimics the actual interface as closely as possible. Usually, in for software interfaces, another software tool is used to mockup the interface. This software tool accepts input from the keyboard or mouse like the actual interface would, and responds to those events in the same way (displaying a particular window or message, changing state, etc.) in the same way the actual interface would respond.

Web-based interfaces are probably best prototyped using HTML and Dynamic HTML. One nice thing about such prototypes is that you might get to reuse some of the code from the prototype in the actual interface.

Low-fidelity prototyping

Low-fidelity prototyping is a cheap way of providing prototypes to use in tests and participatory design sessions. “Low-fidelity” in this case means that the prototypes you use don’t have to really look like the actual interface you’re testing, as long as they “work” the same.

The idea is that you can get a lot of feedback about the interaction between the interface and the user by evaluating a low-fidelity prototype. Since low-fidelity prototypes are cheap, both in terms of money and time, you can afford to have more cycles of testing, more subjects, or more prototypes.