The graphical user interface is presented (displayed) on the computer screen. It is the result of processed user input and usually the primary interface for human-machine interaction. The touch user interfaces popular on small mobile devices are an overlay of the visual output to the visual input.
The graphical user interface is presented (displayed) on the computer screen. It is the result of processed user input and usually the primary interface for human-machine interaction. The touch user interfaces popular on small mobile devices are an overlay of the visual output to the visual input.

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicates to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. 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 (user-centered design).

User interfaces are the points of interaction between users and designs. There are three types:

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 on their expertise, whether it is software design, user research, web design, or industrial design.

Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.[1] 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.

History

Example

It is currently applied to many industrial fields, and the following are representative examples.

Compared to UX design

Compared to UX design, UI design is more about the surface and overall look of a design. User interface design is a craft in which designers, perform an important function in creating the user experience. It is a functional design interface bridging the gap between users and the product in an attractive and intuitive way.[3] UI design should keep users informed about what is happening, giving appropriate feedback in a timely manner. The visual look and feel of UI design sets the tone for the user experience.[4] On the other hand, the term UX design refers to the entire process of creating a user experience.

Don Norman and Jakob Nielsen said:

It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios. [5]

Processes

Printable template for mobile and desktop app design (PDF)
Printable template for mobile and desktop app design (PDF)

User interface design requires a good understanding of user needs. It mainly focuses on the needs of the platform and its user expectations. There are several phases and processes in the user interface design, some of which are more demanded upon than others, depending on the project.[6] (Note: for the remainder of this section, the word system is used to denote any project whether it is a website, application, or device.)

Requirements

The dynamic characteristics of a system are described in terms of the dialogue requirements contained in seven principles of part 10 of the ergonomics standard, the ISO 9241. 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 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 presented 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, colour, 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:

Research

User interface design has been a topic of considerable research, including on its aesthetics.[11] Standards have been developed as far back as the 1980s for defining the usability of software products. One of the structural bases has become the IFIP user interface 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.[12] 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.[13]

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.[14]

See also

References

  1. ^ Norman, D. A. (2002). "Emotion & Design: Attractive things work better". Interactions Magazine, ix (4). pp. 36–42. Retrieved 20 April 2014.
  2. ^ Usabilla (2017-05-19). "A Short History of Computer User Interface Design". Medium. Retrieved 2022-11-21.
  3. ^ Kumar, Amitesh (2022-05-09). "UI Vs. UX: What is The Difference Between UI and UX Design? | Emeritus India". Emeritus - Online Certificate Courses | Diploma Programs. Retrieved 2022-11-07.
  4. ^ Roth, Robert E. (April 17, 2017). "User Interface and User Experience (UI/UX) Design". Geographic Information Science & Technology Body of Knowledge. 2017 (Q2). doi:10.22224/gistbok/2017.2.5 – via Research Gate.
  5. ^ "The Definition of User Experience (UX)". Nielsen Norman Group. Retrieved 13 February 2022.
  6. ^ Wolf, Lauren (23 May 2012). "6 Tips for Designing an Optimal User Interface for Your Digital Event". INXPO. Archived from the original on 16 June 2013. Retrieved 22 May 2013.((cite web)): CS1 maint: bot: original URL status unknown (link)
  7. ^ Ann Blandford. "Semi-structured qualitative studies". The Encyclopedia of Human-Computer Interaction, 2nd Ed. Interaction Design Foundation. Retrieved 20 April 2014.
  8. ^ Karen Holtzblatt and Hugh R. Beyer. "Contextual design". The Encyclopedia of Human-Computer Interaction, 2nd Ed. Interaction Design Foundation. Retrieved 20 April 2014.
  9. ^ Martin Fowler. "Forms and control". GUI architecture. thoughtworks publication. Retrieved 20 February 2017.
  10. ^ "8 Stages in an HL7 Interface Lifecycle - Caristix". Caristix. 2010-10-05. Retrieved 2017-03-01.
  11. ^ "The role of context in perceptions of the aesthetics of web pages over time". International Journal of Human–Computer Studies. 2009-01-05. Retrieved 2009-04-02.
  12. ^ "The HUMANOID model of interface design". Proceedings CHI'92. 1992.
  13. ^ "Creating user interfaces using programming by example, visual programming, and constraints". ACM. 1990-04-11. Retrieved 2009-04-02.
  14. ^ "Past, present, and future of user interface software tools". ACM. 2000-03-01. Retrieved 2009-04-02.