User Interface in Web Design

July 2, 2010

The idea behind the implementation of a User Interface within the layout of a website, is to prioritize user’s experience. The ultimate goal of user interface design is, or should be, to make user’s interaction as simple and efficient as possible, in terms of accomplishing user’s goals.

Therefore, an efficient user interface design facilitates finishing the user’s task at hand without drawing unnecessary attention to itself, and in that sense, graphic design should be utilized to support usability. The design process must balance technical functionality and visual element to create a system that is not only operational but also usable and adaptable to changing user needs.

User Interface

The following steps apply not only in the creation of a functional user interface during the design of websites, but also in other seemingly unrelated areas such as the design of computer systems, industrial design, etc.:

  • Gathering of functionality requirements: Assembling a list of the functionality required by the system to accomplish the goals of the project and the potential needs of the users.
  • User analysis: analysis of the potential users of the system either through discussion with people who work with the users and/or the potential users themselves. Typical questions involve:
    • What would the user want the system to do?
    • How would the system fit in with the user’s normal workflow or daily activities?
    • How technically savvy is the user and what similar systems does the user already use?
    • What interface look & feel styles appeal to the user?
  • Information architecture: Development of the process and/or information flow of the system (i.e. for phone tree systems, this would be an option tree flowchart and for web sites this would be a site flow that shows the hierarchy of the pages).
  • Prototyping: Development of wireframes, either in the form of paper prototypes or simple interactive screens. These prototypes are stripped of all look & feel elements and most content in order to concentrate on the interface.
  • Usability testing : Testing of the prototypes on an actual user—often using a technique called think aloud protocol where you ask the user to talk about their thoughts during the experience.
  • Graphic Interface design: Actual look & feel design of the final graphical user interface (GUI). It may be based on the findings developed during the usability testing if usability is unpredictable, or based on communication objectives and styles that would appeal to the user. In rare cases, the graphics may drive the prototyping, depending on the importance of visual form versus function. If the interface requires multiple skins, there may be multiple interface designs for one control panel, functional feature or widget. This phase is often a collaborative effort between a graphic designer and a user interface designer, or handled by one who is proficient in both disciplines.

Additionally, to create a meaningful design for a user interface requires a good understanding of both user needs and their mental models, i.e., their representation of the surrounding world, the relationships between its various parts and a person’s intuitive perception about his/her own acts and consequences.

Our mental models help shape our behaviour and define our approach to solving problems (akin to a personal algorithm) and carrying out tasks. The mental model also affects actions and decisions as well as knowledge structures among designers, managers, users, engineers, information architects, graphic designers, etc., that’s why a thorough understanding of how it works is fundamental to accomplish a functional user interface in a given web design, which should be our ultimate objective. Function must always prime before design,or in other words, form must follow function.