While all of the elements of a software solution are important, indeed critical, the user interface is probably one of the most sensitive. In contrast to other components (business logic, middleware, etc,), the user interface is the visible face of the application and, therefore, the only point of contact between the system and the people who use it. The user-centered design philosophy provides the best results in this regard.

In the days of the client/server model, the tools used to design interfaces were “smart” (i.e. they included logic) and highly standardized. In the age of the Internet and distributed applications, however, we have run into technical problems (lack of technology, incompatibility between browsers and clients, etc.) that have prevented an acceptable user experience.

Advantages

The outcome was a situation of falling user performance, and it became necessary to make significant investments in training to bridge the usability gap. Meanwhile, calls to help-lines and call centers rose sharply, because users felt disoriented and were unsure how to proceed. An this is not to mention the loss of revenues caused by low performance or, in situations where end users interacting directly with the business would end up ditching the application, resulting in the loss of direct sales.

This scenario has now improved substantially. Where there is still considerable diversity in browsers (Explorer, Firefox, Opera, Safari, etc.) and clients (PC, mobile telephone, PDA, etc.), XML, JavaScript and CSS under the Ajax umbrella have provided the necessary technology to standardize the way in which rich. user-friendly applications can be developed. Other ways of providing an enhanced multimedia experience, such as Flash, OpenLaszlo and the more recent Silverlight are at last helping to make the development of RIA a reality.

The user-interface is not just technology

User Interface development process

Great care and attention is required to design a user-interface, since the technology applied is no more than a support, and not even the only or most important one.

If the presentation of information to the user is not well thought out, it does not matter what the underlying technology is, because the user will still not understand how to find the information needed (however prettily it may be displayed).

Once the manner in which the information is to be structured has been considered, or to put it another way, once a sound Information Architecture has been designed, the next step is to analyze and define the interactive components. The typical kind of question is, Should we use a Combo Box or Radio Buttons? (which basically perform the same function). There is no easy answer however, and the matter requires analysis of the usability problem posed. It is not the same to present the interaction in a dialogue box than in a tool bar. The general pattern in this case might be the number of options offered (if there are four, Radio Button would make sense, and if there are more a Combo Box would be an option), but the application of rule will not always be the same.

Hence, the design of a strong interaction using HCI standards is the second critical step in the successful design of an interface. This is where technology can help, not only because it provides a range of interactive tools but above all because it allows us to think of the user and the experience of using the application, seeking simplicity at all time and following a don't-make-me-think methodology.

Another important issue is the corporate image, which requires a methodical approach to the graphic design used in the interface. This is key to achieving consistency and attaining the desired image goals.

t is important to remember that all phases of interface design should be addressed from the outset of the project with the preparation of prototypes followed by as many iterations as may be necessary. Under no circumstances should the design of the interface be left for one of the development phases.

Only in this way is it possible to achieve the best possible product at the end of the process and address the expectations of everybody concerned in the project, including the end user. The phases described below, which are those Kynetia uses in its interface design process, should therefore be considered in the general context of the project, and not as a discrete part of it.

Information architecture

As explained above, it usability is to be maximized and the best possible user experience achieved, it is necessary to establish an information architecture (as defined by the The Information Architecture Institute) before proceeding to the interactive design or the interface graphics (i.e. the screen viewed and handled by the end user).
The information architecture design phase forms part of the specific application architecture and of the general Enterprise Architecture.

Interaction Design (HCI)

Interaction design consists of a series of techniques aimed to make the software more intuitive and user-friendly. HCI focuses on interaction, while Interface Graphic Design services are concerned with graphic presentation (colors, fonts, etc.). Consequently, the HCI design process usually comes before the graphic design of the interface, although the two merge after the first iteration. The main steps are as follows: Research, Concept, Design, User testing and Implementation.

• Research. The aim is to learn about the people who will use the application and the context in which it is to be used. This allows the interaction designers to understand both user needs and the conditioning factors present. This phase concludes with the preparation of in two different requirements scenarios: user requirements and technical requirements.
• Concept. Once the requirements have been established, it is necessary to conceptualize ideas and establish which provide the best fit with user and business needs. This is the objective of this phase.
• Design. Once the idea has been conceptualized, the interface design can go ahead. This phase contains three steps, consisting of the Definition of the interaction (in order to create a working framework for the interaction), Definition of the interactive elements (menus, buttons, forms, etc. supporting the interaction) and the Prototype (to test the validity of the design).
• User testing. Once the prototype has been obtained, it is necessary to perform the XGLOSARIOX usability test on users to ensure that the proposed solution covers the needs identified and is in line with expectations. Improvements normally come to light here, and various iterations are performed, returning to the concept stage. After the completion of the iterations to assure that users’ expectations will be met, the next phase of the process can commence.
• Implementation. This phase consists of incorporating the interaction solution into the application under development.

Graphic Design of the Interface

The Interface Graphic Design process is interwoven with the HCI Design, resulting in the interface finally handled by the user to interact with the application. The process normally has two iterative steps consisting of the development of the style book and the implementation of the design.

• Creation of the style book. This step involves creating a series of guidelines to govern the application graphics. It is sometimes an extension of the style book created within the Enterprise Architecture, but it may also be created starting from scratch. It normally contains the following elements:
  • Guide to the information architecture
  • Use of logotypes
  • Application header
  • Application footer
  • Interface development templates
  • Colors palette
  • Typeface
  • Images and media
  • Accessibility

  This is an iterative process which is normally interwoven with the HCI process. In addition, the creation phases are practically identical to those of HCI, though from a graphics standpoint.

• Implementation of the interface design. Once the style book has been created, the graphic design of the interface is incorporated into the HCI design.

Conclusion

The design of the user interface is generally one of the keys to the success of the project. As well as making the software development tangible, the interface establishes the permanent way in which the target user of the application will interact with the software. In many cases, then, the success or failure of the product depends to a large extent on the interface created.

In view of this, we believe at Kynetia that the only way to ensure success is to address the creation of the interface methodically, beginning with the design of the Information Architecture, following on with the Interactivity Design and concluding with the Graphic Design. This is done from the outset of the project, creating a prototype of the possible and iterating in order to refine details over the course of the development process.