The elements and principles of design or effective interface design principles
“The interface is the intermediary between users and content, an interpreter and guide to the complexities of the site” (Fleming, 1998). The user interface is the most crucial part of the web page or software application. The users of web application interact with it many ways and its utility is not just limited to delivering information. It provides the users with scope to communicate and toggle with various features provided by the web application or web page. An effective interface provides the user with a sense of control, ability to assess the scope of the application, and locate their specific areas of interest easily.
Effective Interface Design Requirements
So, what are the specific design requirements or objectives that define an effective interface design or layout of a web page? The single most important fact that governs the designing of an effective interface is that it should not concern the user with the internal workings of the system and provide an easy to use platform that is least cumbersome and hassle-free. “The best interface is one that is not noticed, and one that permits the user to focus on the information and task at hand instead of the mechanisms used to present the information and perform the task” (Galitz, 2007: pg4).
The wide array of tools and mechanisms available at the disposal of a web designer does not make the task of designing an effective interface easy. This is owing to the complexities involved in assessing the user psychology, anticipating his needs and requirements and expectations of the targeted audience. The design of a web page interface is largely dependent on these variables and the information and goals it is supposed to deliver. The web designer needs to identify the goals and objectives of the web application, its purpose, and message that it will deliver.
The essential considerations while designing an effective interface are listed as follows:
Know the target audience – this will help in analyzing the user profiles that are expected to visit or use this site most often and identify the basic traits of this targeted audience. This includes anticipating the user wants, needs and preferences. A layout involving loud color scheme and excessive graphics may not appeal to the senses of the older and more matured section of users.
Define user tasks – this involves interpreting user needs and the tasks that are required to perform to achieve their objectives. Based on the user requirements and goals of using the application, the interface designer needs to organize the flow of information, define user inputs and system deliverables at each level. At this stage it is helpful to acquire useful concepts and models adopted by similar applications developed by competitors.
Build prototypes of the design – creating an initial design of the perceived model of interface will help in generating feedback of the intended layout. The sampling of the prototype will also help in identifying the shortcomings and drawbacks of the model and suggestions to improve the design and layouts keeping in mind the user preferences.
Provide scope for gathering feedback from users – the interface should go through a filtered process of testing and evaluation of its features. This evaluation process should judge the effectiveness of the interface on various parameters like user operations, navigation, impact of visual design, data representation, and overall presentation effect. The user should be invited to post their responses and feedback in this context to enable a better understanding of their expectations and needs.
The efforts of the designer should be on making the web page user-friendlier with increased usability features. “For systems or products whose use is discretionary, such as web sites, a difficult to use interface can cause people to stop using it. For business applications, whose use is usually mandatory, the result is lowered worker productivity” (Galitz, 2007: pg 64). The various dimensions of usability of an interface defined by Quesenbery (2003) are
Effective – the ability of the interface to realize user goals.
Efficient – the speed and accuracy with which the interface enables the user to perform their tasks
Engaging – the degree of satisfaction and interest the interface generates among its users
Error-tolerant – the ability of the interface to minimize and prevent user mistakes
Easy to learn – the ability of the interface to support and enhance user understanding
High degree of web site usability can be ensured through the incorporation of three basic guidelines that are simplicity, consistency, and order. Simplicity of an interface refers to the clarity of presentation that requires the “visual solution effectively communicate critical information to users in the manner and location they expect it. This requires a combination of focus, prioritization, and, as always, the ability to remove unnecessary and distracting elements. By reducing the number of items users have to comprehend and process, you increase their ability to recognize and understand the page’s purpose”(Baxley, 2002: pg 312, 313).
Incorporating a consistent approach in visual design of layout, color, and typography as well as structural pattern of the web site will ensure better comprehension and effectiveness to the user. Consistency in approach in designing an interface helps the users to relate to the contents and their goals easily.
Order is yet another significant aspect of designing an interface. When a web page is ordered in its structure and layout it presents an appearance of neatness, precision, and thoughtfulness. Baxley states in his book Making the Web Work “although order is an easy quality to recognize, being able to consistently produce and create order requires understanding and mastery of principles of grouping, hierarchy, alignment, and balance.”
Implementing Principles of Visual Design
Web is a communicating medium that interacts with the user through visual aids and graphical tools like menu bars, buttons, hyperlinks, etc. Its level of presentation, interaction, and organization determines the overall effectiveness of a web interface. The visual design of the interface has a strong impact on the way the application is used or perceived by the users. “In the graphical environment of the Web, interface design has to do with constructing visual meaning. The happy marriage of architecture and interface – of logical structure and visual meaning – creates a cohesive user experience” (Fleming, 1998).
Visual senses enable us to make sense of what we see, recognize similarities and differences that provide us with the background to assemble and group information and decipher meaning of the overall context. There are various principles behind the processing of visual information that enable accurate perception and understanding of the subject matter. Luke Wroblewski, an interface designer in his works Applying Visual Communication Principles to Web Application Design (2005) outlines four principles that help in grouping visual information:
Proximity – According to this principle the users perceive the objects or items placed together as a group.
Similarities – Objects similar in shapes, size, and color are perceived as belonging to a group.
Continuance – Objects or elements in continuity are perceived as groups.
Closure – Elements are grouped by spaces filled between them. Users perceive these spaces as part of a whole information group.
In line with these principles of visual perception it should also be noted “the visibility principle is based upon the fact that one’s power of recognition is much stronger than one’s power of recall” (Galitz, 2007: pg 58). The human brain has the power to recognize visual cues and the effective use of colors, graphics, and object positioning can play an effective role in increasing user perception and understanding.
Interface designers also make use of visual aids to represent information hierarchies that helps in communicating a specific message to the intended user in an easy manner. Visual hierarchies are used to relate given information on a page and this requires focus on the following factors (Fleming, 1998):
Size of objects or items on the page – this helps in drawing attention to the significance of each item on the page. Items in larger size will draw attention first and this emphasizes the importance of that item to the user. This also helps the user in sorting the given information according to its relevance.
Positioning of the items on the page – this indicates the sequence in which the information is communicated to the user. Items placed at the top or center is noticed first by the user and attention is drawn to the logical structuring of the contents and objects on the page.
Color and contrast – use of similar or contrasting color schemes and patterns enables the users to group similar objects and draw attention to continuity of the given information. Using too many colors on the web page can cause frustration to the user since the whole appearance looks chaotic and it becomes difficult to assemble information.
Movement – any kind of animation or flash used on the web page draws instant user attention and this can be used judiciously to elicit appropriate user response and reaction.
Visual cues can be used effectively to communicate information and draw user response through an effective interface design. It is important that users are able to interpret the information given by the web page but it is essential that the users are able to relate the information in the context of their learning or application. A crucial part of visual design is the brand attributes that it conveys to the user – the overall presentation should effectively communicate the desired information as well as relate to the brand value that it associates with. For instance, a web site designed for specific airlines should embody the color-coding of the airlines so that the users recognize and relate with the visual cues.
Summary
To summarize, simplicity in design, consistent in approach and order in presentation are essential for an effective interface design. The visual elements can be organized and presented in a well-designed format to the user to communicate information and trigger appropriate user responses. The various elements used in designing interface include windows, menu bars, scroll bars, text boxes, list boxes, icons, and other buttons. The effective interplay and positioning of these controls and objects on the screen can provide a meaningful platform for communicating relevant information to the user.
The Web is not an easy medium to design for since different browsers support varying features and disable some while the speed of the bandwidth affects the performance of the graphics and animation used. “As a visual designer on the Web, the challenge is to fully appreciate that although the Web does not offer the precise control of other mediums, it does offer a rich and fluid vocabulary for describing a page’s visual presentation” (Baxley, 2002: pg 335). Colors, and textures may not be represented in a similar format by all browsers. Moreover, variations in the operating system and display settings of each computer make it difficult to provide a uniform visual impact.
Andrew Sears and Julie Jacko explain in their work The Human-Computer Interaction Handbook (2008) “the goal of any visual device is to provide the fastest, most efficient path to understanding ideas and to make these ideas clear and compelling. A good visual eliminates the need for text and communicates across cultures.”
References:
Andrew Sears, Julie A. Jacko. 2008. The human-computer interaction handbook: fundamentals, evolving technologies, and emerging applications. CRC Press.
Fleming, Jennifer. 1998. Chapter 5: Interface and Interaction Design. Reproduced from Web Navigation: Designing the User Experience. O’Reilly & Associates. Accessed on 1st November, 2008 from http://msdn.microsoft.com/en-us/library/ms976225.aspx
Galitz, Wilbert O. 2007. The essential guide to user interface design: An introduction to GUI design principles and techniques. Published by John Wiley and Sons.
Developer connection. 2008. Involving users in the design process. Accessed on 1st November 2008 from http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGDesignProcess/chapter_3_section_2.html#//apple_ref/doc/uid/TP40002718-TPXREF114
Baxley, Bob. 2002. Making the web work: designing effective web applications. Published by Sams Publishing.
Wroblewski, Luke. 2005. Applying visual communication principles to web application design. Accessed on 1st November 2008 from http://www.lukew.com/resources/articles/VCFWAD_April2005.pdf
Tognazzini, Bruce. 2003. First principles of interaction design. Accessed on 1st November 2008 from http://www.asktog.com/basics/firstPrinciples.html
Quesenbery, W. 2003. Using the 5Es to understand the users. Accessed on 1st November 2008 from http://www.wqusability.com/articles/5es-upa2003.pdf
