User interface design
Encyclopedia
User interface design or user interface engineering is the design of computer
s, appliance
s, machines, mobile communication devices
, software applications, and website
s with the focus on the user's experience
and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design
. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design
may be utilized to support its usability
. The design process must balance technical functionality and visual elements (e.g., mental model
) to create a system that is not only operational but also usable and adaptable to changing user needs.
Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design
, user research, web design
, or industrial design
.
User interface design requires a good understanding of user needs.
. This standard establishes a framework of ergonomic "principles" for the dialogue techniques with high-level definitions and illustrative applications and examples of the principles. The principles of the dialogue represent the dynamic aspects of the interface and can be mostly regarded as the "feel" of the interface.
The seven dialogue principles are:
The concept of usability is defined in Part 11 of the ISO 9241
standard by effectiveness, efficiency, and satisfaction of the user. Part 11 gives the following definition of usability:
Effectiveness, efficiency, and satisfaction can be seen as quality factors of usability. To evaluate these factors, they need to be decomposed into sub-factors, and finally, into usability measures.
The information presentation is described in Part 12 of the ISO 9241
standard for the organization of information (arrangement, alignment, grouping, labels, location), for the display of graphical objects, and for the coding of information (abbreviation, color, size, shape, visual cues) by seven attributes. The "attributes of presented information" represent the static aspects of the interface and can be generally regarded as the "look" of the interface. The attributes are detailed in the recommendations given in the standard. Each of the recommendations supports one or more of the seven attributes.
The seven presentation attributes are:
The user guidance in Part 13 of the ISO 9241
standard describes that the user guidance information should be readily distinguishable from other displayed information and should be specific for the current context of use. User guidance can be given by the following five means:
. In the past standards have been developed, as far back as the eighties for defining the usability of software products.
One of the structural basis has become the IFIP userinterface reference model. The model proposes four dimensions to structure the user interface:
This model has greatly influenced the development of the international standard ISO 9241
describing the interface design requirements for usability.
The desire to understand application-specific UI issues early in software development, even as an application was being developed, led to research on GUI rapid prototyping tools that might offer convincing simulations of how an actual application might behave in production use. Some of this research has shown that a wide variety of programming tasks for GUI-based software can, in fact, be specified through means other than writing program code.
Research in recent years is strongly motivated by the increasing variety of devices that can, by virtue of Moore's Law
, host very complex interfaces.
There is also research on generating user interfaces automatically, to match a user's level of ability for different kinds of interaction.
Computer
A computer is a programmable machine designed to sequentially and automatically carry out a sequence of arithmetic or logical operations. The particular sequence of operations can be changed readily, allowing the computer to solve more than one kind of problem...
s, appliance
Home appliance
Home appliances are electrical/mechanical machines which accomplish some household functions, such as cooking or cleaning. Home appliances can be classified into:*Major appliances, or White goods*Small appliances, or Brown goods...
s, machines, mobile communication devices
Communication
Communication is the activity of conveying meaningful information. Communication requires a sender, a message, and an intended recipient, although the receiver need not be present or aware of the sender's intent to communicate at the time of communication; thus communication can occur across vast...
, software applications, and website
Website
A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...
s with the focus on the user's experience
User experience
User experience is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such...
and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design
User-centered design
In broad terms, user-centered design or pervasive usability is a design philosophy and a process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process...
. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design
Graphic design
Graphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form – undertaken in order to convey a specific message to a targeted audience...
may be utilized to support its usability
Usability
Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with. A usability study may be conducted as a primary job function by a usability analyst or as a secondary job...
. The design process must balance technical functionality and visual elements (e.g., mental model
Mental model
A mental model is an explanation of someone's thought process about how something works in the real world. It is a representation of the surrounding world, the relationships between its various parts and a person's intuitive perception about his or her own acts and their consequences...
) to create a system that is not only operational but also usable and adaptable to changing user needs.
Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design
Software design
Software design is a process of problem solving and planning for a software solution. After the purpose and specifications of software are determined, software developers will design or employ designers to develop a plan for a solution...
, user research, web design
Web design
Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser...
, or industrial design
Industrial design
Industrial design is the use of a combination of applied art and applied science to improve the aesthetics, ergonomics, and usability of a product, but it may also be used to improve the product's marketability and production...
.
Processes
There are several phases and processes in the user interface design, some of which are more demanded upon than others, depending on the project. (Note: for the remainder of this section, the word system is used to denote any project whether it is a web site, application, or device.)- Functionality requirements gathering – 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 workflowWorkflowA workflow consists of a sequence of connected steps. It is a depiction of a sequence of operations, declared as work of a person, a group of persons, an organization of staff, or one or more simple or complex mechanisms. Workflow may be seen as any abstraction of real work...
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 architectureInformation ArchitectureInformation architecture is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming,...
– 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 wireframesWebsite wireframeA website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work...
, either in the form of paper prototypesPaper prototypesIn human–computer interaction, paper prototyping is a widely used method in the user-centered design process, a process that helps developers to create software that meets the user's expectations and needs - in this case, especially for designing and testing user interfaces...
or simple interactive screens. These prototypes are stripped of all look & feel elements and most content in order to concentrate on the interface. - Usability testingUsability testingUsability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system...
– testing of the prototypes on an actual user—often using a technique called think aloud protocolThink aloud protocolThink-aloud protocol is a method used to gather data in usability testing in product design and development, in psychology and a range of social sciences...
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 interfaceGraphical user interfaceIn computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
(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 skinsSkin (computing)In computing, a skin is a custom graphical appearance achieved by the use of a graphical user interface that can be applied to specific software and websites to suit the purpose, topic, or tastes of different users....
, there may be multiple interface designs for one control panelControl panel (engineering)A control panel is a flat, often vertical, area where control or monitoring instruments are displayed.They are found in factories to monitor and control machines or production lines and in places such as nuclear power plants, ships, aircraft and mainframe computers...
, functional feature or widgetWidget (computing)In computer programming, a widget is an element of a graphical user interface that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given...
. This phase is often a collaborative effort between a graphic designGraphic designGraphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form – undertaken in order to convey a specific message to a targeted audience...
er and a user interface designer, or handled by one who is proficient in both disciplines.
User interface design requires a good understanding of user needs.
Requirements
The dynamic characteristics of a system are described in terms of dialogue requirements contained in seven principles of part 10 of the ergonomics standard, the ISO 9241ISO 9241
ISO 9241 is a multi-part standard from the International Organization for Standardization covering ergonomics of human-computer interaction. It is managed by the ISO...
. This standard establishes a framework of ergonomic "principles" for the dialogue techniques with high-level definitions and illustrative applications and examples of the principles. The principles of the dialogue represent the dynamic aspects of the interface and can be mostly regarded as the "feel" of the interface.
The seven dialogue principles are:
- Suitability for the task: the dialogue is suitable for a task when it supports the user in the effective and efficient completion of the task.
- Self-descriptiveness: the dialogue is self-descriptive when each dialogue step is immediately comprehensible through feedback from the system or is explained to the user on request.
- Controllability: the dialogue is controllable when the user is able to initiate and control the direction and pace of the interaction until the point at which the goal has been met.
- Conformity with user expectations: the dialogue conforms with user expectations when it is consistent and corresponds to the user characteristics, such as task knowledge, education, experience, and to commonly accepted conventions.
- Error tolerance: the dialogue is error tolerant if despite evident errors in input, the intended result may be achieved with either no or minimal action by the user.
- Suitability for individualization: the dialogue is capable of individualization when the interface software can be modified to suit the task needs, individual preferences, and skills of the user.
- Suitability for learning: the dialogue is suitable for learning when it supports and guides the user in learning to use the system.
The concept of usability is defined in Part 11 of the ISO 9241
ISO 9241
ISO 9241 is a multi-part standard from the International Organization for Standardization covering ergonomics of human-computer interaction. It is managed by the ISO...
standard by effectiveness, efficiency, and satisfaction of the user. Part 11 gives the following definition of usability:
- Usability is measured by the extent to which the intended goals of use of the overall system are achieved (effectiveness).
- The resources that have to be expended to achieve the intended goals (efficiency).
- The extent to which the user finds the overall system acceptable (satisfaction).
Effectiveness, efficiency, and satisfaction can be seen as quality factors of usability. To evaluate these factors, they need to be decomposed into sub-factors, and finally, into usability measures.
The information presentation is described in Part 12 of the ISO 9241
ISO 9241
ISO 9241 is a multi-part standard from the International Organization for Standardization covering ergonomics of human-computer interaction. It is managed by the ISO...
standard for the organization of information (arrangement, alignment, grouping, labels, location), for the display of graphical objects, and for the coding of information (abbreviation, color, size, shape, visual cues) by seven attributes. The "attributes of presented information" represent the static aspects of the interface and can be generally regarded as the "look" of the interface. The attributes are detailed in the recommendations given in the standard. Each of the recommendations supports one or more of the seven attributes.
The seven presentation attributes are:
- Clarity: the information content is conveyed quickly and accurately.
- Discriminability: the displayed information can be distinguished accurately.
- Conciseness: users are not overloaded with extraneous information.
- Consistency: a unique design, conformity with user’s expectation.
- Detectability: the user’s attention is directed towards information required.
- Legibility: information is easy to read.
- Comprehensibility: the meaning is clearly understandable, unambiguous, interpretable, and recognizable.
The user guidance in Part 13 of the ISO 9241
ISO 9241
ISO 9241 is a multi-part standard from the International Organization for Standardization covering ergonomics of human-computer interaction. It is managed by the ISO...
standard describes that the user guidance information should be readily distinguishable from other displayed information and should be specific for the current context of use. User guidance can be given by the following five means:
- Prompts indicating explicitly (specific prompts) or implicitly (generic prompts) that the system is available for input.
- Feedback informing about the user’s input timely, perceptible, and non-intrusive.
- Status information indicating the continuing state of the application, the system’s hardware and software components, and the user’s activities.
- Error management including error prevention, error correction, user support for error management, and error messages.
- On-line help for system-initiated and user initiated requests with specific information for the current context of use.
Research – past and ongoing
User interface design has been a topic of considerable research, including on its aestheticsAesthetics
Aesthetics is a branch of philosophy dealing with the nature of beauty, art, and taste, and with the creation and appreciation of beauty. It is more scientifically defined as the study of sensory or sensori-emotional values, sometimes called judgments of sentiment and taste...
. In the past standards have been developed, as far back as the eighties for defining the usability of software products.
One of the structural basis has become the IFIP userinterface reference model. The model proposes four dimensions to structure the user interface:
- The input/output dimension (the look)
- The dialogue dimension (the feel)
- The technical or functional dimension (the access to tools and services)
- The organizational dimension (the communication and co-operation support)
This model has greatly influenced the development of the international standard ISO 9241
ISO 9241
ISO 9241 is a multi-part standard from the International Organization for Standardization covering ergonomics of human-computer interaction. It is managed by the ISO...
describing the interface design requirements for usability.
The desire to understand application-specific UI issues early in software development, even as an application was being developed, led to research on GUI rapid prototyping tools that might offer convincing simulations of how an actual application might behave in production use. Some of this research has shown that a wide variety of programming tasks for GUI-based software can, in fact, be specified through means other than writing program code.
Research in recent years is strongly motivated by the increasing variety of devices that can, by virtue of Moore's Law
Moore's Law
Moore's law describes a long-term trend in the history of computing hardware: the number of transistors that can be placed inexpensively on an integrated circuit doubles approximately every two years....
, host very complex interfaces.
There is also research on generating user interfaces automatically, to match a user's level of ability for different kinds of interaction.
See also
- Cognitive dimensionsCognitive dimensionsCognitive dimensions or Cognitive dimensions of notations are design principles for notations, user interfaces and programming language design, described by researchers Thomas R.G. Green and Marian Petre...
- Elements of graphical user interfacesElements of graphical user interfacesGraphical user interfaces, also known as GUIs, offer a consistent visual language to represent information stored in computers. This makes it easier for people with little computer skills to work with and use computer software....
- Experience designExperience designExperience design is the practice of designing products, processes, services, events, and environments with a focus placed on the quality of the user experience and culturally relevant solutions, with less emphasis placed on increasing and improving functionality of the design...
- User experience designUser experience designUser experience design is a subset of the field of experience design that pertains to the creation of the architecture and interaction models that affect user experience of a device or system...
- GameplayGameplayGameplay is the specific way in which players interact with a game, and in particular with video games. Gameplay is the pattern defined through the game rules, connection between player and the game, challenges and overcoming them, plot and player's connection with it...
- Gender HCIGender HCIGender HCI is a subfield of human-computer interaction that focuses on the design and evaluation of interactive systems for humans, with emphasis on differences in how males and females interact with computers.-Examples:...
- Graphical user interfaceGraphical user interfaceIn computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
- Human-computer interaction
- Human geographyHuman geographyHuman geography is one of the two major sub-fields of the discipline of geography. Human geography is the study of the world, its people, communities, and cultures. Human geography differs from physical geography mainly in that it has a greater focus on studying human activities and is more...
- Human interface guidelinesHuman Interface GuidelinesHuman interface guidelines are software development documents which offer application developers a set of recommendations. Their aim is to improve the experience for the users by making application interfaces more intuitive, learnable, and consistent. Most guides limit themselves to defining a...
- Information architectureInformation ArchitectureInformation architecture is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming,...
- Interaction designInteraction designIn design, human–computer interaction, and software development, interaction design, often abbreviated IxD, is "the practice of designing interactive digital products, environments, systems, and services." Like many other design fields interaction design also has an interest in form but its main...
- Interaction design patternInteraction design patternInteraction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context. They document interaction models that make it easier for users to understand an interface and accomplish their tasks.-History:...
- InteractivityInteractivityIn the fields of information science, communication, and industrial design, there is debate over the meaning of interactivity. In the "contingency view" of interactivity, there are three levels:...
- Knowledge visualization
- Natural mapping (interface design)
- New interfaces for musical expressionNew Interfaces for Musical ExpressionNew Interfaces for Musical Expression, also known as NIME, is an international conference dedicated to scientific research on the development of new technologies for musical expression and artistic performance...
- Participatory designParticipatory designParticipatory design is an approach to design attempting to actively involve all stakeholders in the design process in order to help ensure the product designed meets their needs and is usable. The term is used in a variety of fields e.g...
- Principles of User Interface DesignPrinciples of User Interface DesignThe principles of user interface design are intended to improve the quality of user interface design. According to Larry Constantine and Lucy Lockwood in their usage-centered design, these principles are:...
- Progressive disclosureProgressive disclosureProgressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand...
- UsabilityUsabilityUsability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with. A usability study may be conducted as a primary job function by a usability analyst or as a secondary job...
- User-centered designUser-centered designIn broad terms, user-centered design or pervasive usability is a design philosophy and a process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process...
- User interfaceUser interfaceThe user interface, in the industrial design field of human–machine interaction, is the space where interaction between humans and machines occurs. The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the...
- Web designWeb designWeb design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser...
- Computer iconComputer iconA computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
- Icon designIcon designIcon design is the process of designing a graphic symbol that represents some real, fantasy or abstract motive, entity or action. In the context of software applications, an icon often represents a program, a function, data or a collection of data on a computer system.Icon designs can be simple,...