UI/UX DESIGN

User experience design?(UX design,?UXD,?UED, or?XD) is the process of defining the experience a user would go through when interacting with a company, its services, and its products.[1]?Design decisions in UX design are often driven by research, data analysis, and test results rather than aesthetic preferences and opinions. Unlike?user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its?usability, usefulness,?desirability,?brand?perception, and overall performance. UX design is also an element of the?customer experience?(CX), which encompasses all aspects and stages of a customer's experience and interaction with a company.

The field of user experience design is a?conceptual design?discipline and has its roots in?human factors?and?ergonomics, a field that, since the late 1940s, has focused on the interaction between human users, machines, and the contextual environments to design systems that address the user's experience.?With the proliferation of workplace computers in the early 1990s,?user experience?started to become a positive insight for designers.?Donald Norman, a professor and researcher in design, usability, and cognitive science, coined the term "user experience," and brought it to a wider audience.

I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person's experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning.

— Donald Norman

There is a debate occurring in the experience design community regarding its focus, provoked in part by design scholar and practitioner, Don Norman. Norman claims that when designers describe people only as customers, consumers, and users, designers risk diminishing their ability to do good design.

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:

• Graphical?user interfaces (GUIs) - Users interact with visual representations on a computer's screen. The desktop is an example of a GUI.
• Interfaces controlled through?voice?- Users interact with these through their voices. Most smart assistants, such as?Siri?on smartphones or Alexa on Amazon devices, use voice control.
• Interactive interfaces utilizing?gestures- Users interact with 3D design environments through their bodies, e.g., in?virtual reality?(VR) games.

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.

Compared to UX design[edit]

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. 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.[2]?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.?

Processes[edit]

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.[4]?(Note: for the remainder of this section, the word?system?is used to denote any project whether it is a?website,?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?and?task analysis?– a form of field research, it's the analysis of the potential users of the system by studying how they perform the tasks that the design must support, and conducting interviews to elaborate their goals.[5]?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?wire-frames, 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 inspection – letting an evaluator inspect a user interface. This is generally considered to be cheaper to implement than usability testing (see step below), and can be used early on in the development process since it can be used to evaluate prototypes or specifications for the system, which usually cannot be tested on users. Some common usability inspection methods include?cognitive walkthrough, which focuses the simplicity to accomplish tasks with the system for new users,?heuristic evaluation, in which a set of heuristics are used to identify usability problems in the UI design, and?pluralistic walkthrough, in which a selected group of people step through a task scenario and discuss usability issues.
• 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. User interface design testing allows the designer to understand the reception of the design from the viewer's standpoint, and thus facilitates creating successful applications.
• Graphical user interface design – actual?look and feel?design of the final?graphical user interface?(GUI). These are design’s control panels and faces; voice-controlled interfaces involve oral-auditory interaction, while gesture-based interfaces witness users engaging with 3D design spaces via bodily motions. It may be based on the findings developed during the user research, and refined to fix any usability problems found through the results of testing.[6]?Depending on the type of interface being created, this process typically involves some computer programming in order to validate forms, establish links or perform a desired action.[7]
• Software maintenance?– after the deployment of a new interface, occasional maintenance may be required to fix?software bugs, change features, or completely upgrade the system. Once a decision is made to upgrade the interface, the?legacy system?will undergo another version of the design process, and will begin to repeat the stages of the interface life cycle.[8]

Requirements[edit]

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:

• 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 of the?ISO 9241?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 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:

• 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?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.

ecific information for the current context of use.