User Interface Design Notes PDF

Module1: 1.1.1 What is User Interface Design? UI design means the visual design of a digital product’s interface. It’s the process of creating interfaces with a focus on looks, style, and interactivity. UI designer will design the movement between different screens, and create the visu...

Module1: 1.1.1 What is User Interface Design? UI design means the visual design of a digital product’s interface. It’s the process of creating interfaces with a focus on looks, style, and interactivity. UI designer will design the movement between different screens, and create the visual elements that facilitate user interaction. While UI design is largely a visual discipline, UI designers work on a vast array of projects. In order to design accessible, user-friendly interfaces, UI designers bring empathy into every stage of the design process—from designing screens, icons, and interactions, to creating a style guide that ensures consistency and the proper implementation of a visual language across an entire product Think about your favourite application. When you downloaded it, you did not required training to use it—you just started using it straight away. This is because the UI designer uses style elements like patterns, spacing, and color to guide the user in a way that feels natural. There are three main types of UI design: 1 Graphical user interfaces (GUI): This is what typically comes to mind when thinking of UI design. It concerns the visual interfaces we see on our computers and handheld devices, such as websites and app screens. Some common visual elements include the mouse cursor, buttons, icons, menus, scrollbars etc. 2 Voice-controlled interfaces: These interfaces require sounds, specifically voices, to initiate action. Virtual assistants, such as Siri, Google Assistant, and Alexa, are examples of VUIs 3 Gesture-based interfaces: These interfaces are motion-activated and used for applications such as virtual reality games. Example smartphone, you can interact with it without using the keypad by swiping, tapping, pinching, and scrolling. The latest smart devices also allow for “touchless” gestures where users can scroll or click without touching the screen. Some products come with advanced camera and sensor technology that pick up facial expressions and eye movements to scroll, click, and interact. 1.1.3 Usability Goals Usability is broken down into the following goals: effective to use (effectiveness): Effectiveness is a very general goal and refers to how good a system is at doing what it is supposed to do. efficient to use (efficiency): Efficiency refers to the way a system supports users in carrying out their tasks. safe to use (safety): Safety involves protecting the user from dangerous conditions and undesirable situations. have good utility (utility): Utility refers to the extent to which the system provides the right kind of functionality so that users can do what they need or want to do.  easy to learn (learnability): Learnability refers to how easy a system is to learn to use. easy to remember how to use (memorability): Memorability refers to how easy a system is to remember how to use, once learned 1.2.2 Conceptualizing Design Conceptualization is the action or process of forming a concept or idea of something. The Conceptualization Process in UX Design involves identifying a problem and creating the structure for a user-centred solution. It gives shape to the idea. The accurate understanding of the problem space can help in formation of design space. The benefits of conceptualizing the design space are as follows: Orientation: enables design teams to find how the conceptual model will be understood by users Open-minded: prevents design teams from becoming narrowly focused Common ground: allows design teams to establish a set of commonly agreed terms, reducing misunderstanding and confusion. 1.2.3 Conceptual Model Conceptual models refer to any model that is formed after conceptualization process. They are abstract representations of how tasks should be carried out. People use conceptual models subconsciously and instinctively as a way of structuring processes. For example, a common mental model for creating appointments involves calendars and diaries. Designers can design software that matches users’ conceptual models by knowing the occurrence and power of conceptual models. A conceptual model visually represents how a designer understands users' mental models. To create a conceptual model, designers use information from user research. They then use this information to develop visual representations of how users perceive and interact with the system or product. These representations can take many forms, including flowcharts, diagrams, wireframes, or prototypes. The core components are: 1. Metaphors and analogies that convey to people how to understand what a product is for and how to use it for an activity (e.g. browsing, bookmarking). 2. The concepts that people are exposed to through the product, including the task–domain objects they create and manipulate, their attributes, and the operations that can be performed on them (e.g. saving, revisiting, organizing). 3. The relationships between those concepts (e.g. whether one object contains another, the relative importance of actions to others, and whether an object is part of another). 4. The mappings between the concepts and the user experience the product is designed to support or invoke (e.g. one can revisit through looking at a list of visited sites, most-frequently visited, or saved websites). 1.3.1 What is cognition? Cognition refers to the mental processes involved in acquiring knowledge and understanding. It uses existing knowledge and generate new knowledge. These are higher-level functions of the brain and encompass language, imagination, perception, and planning. Examples of cognition include paying attention to something in the environment, learning something new, making decisions, processing language, sensing and perceiving environmental stimuli, solving problems, and using memory. There are two modes of cognition: o Experiential: we perceive, act, and react to events around us effectively and effortlessly o Reflective: it involves thinking, comparing and decision making. This leads to new ideas and creativity. 1.3.2 Why do we need to understand users Cognition? Interacting with technology is cognitive. We need to take into account cognitive processes involved and cognitive limitations of users. We can provide knowledge about what users can and cannot be expected to do. Identify and explain the nature and causes of problems users encounter. Supply theories, modelling tools, guidance and methods that can lead to the design of better interactive products. 1.3.3 Types of Cognitive Processes Fig 1.3.1 Types of Cognitive Processes There are many different types of cognitive processes. They include: 1. Attention: Attention is a cognitive process that allows people to focus on a specific stimulus in the environment. It selects things to concentrate. It is a way to focus on parts of our sensory input.  Focussed and divided attention enables us to be selective but limits our ability to keep track of all events. Information at the interface should be structured to capture users’ attention, e.g., use perceptual boundaries (windows), colour, reverse video, sound and flashing lights 2. Perception: Perception allows people to take in information through their senses, then transform it into experiences and utilize it to respond and interact with the world. Vision is the most dominant sense for sighted individuals, followed by hearing and touch. With respect to interaction design, it is important to present information in a way that can be readily perceived in the manner intended. A general design principle is that information needs to be represented in an appropriate form to facilitate the perception and recognition of its underlying meaning. 3. Memory: Memory allows people to encode, store, and retrieve information. It is a critical component in the learning process and allows people to retain knowledge about the world and their personal histories. Memory involves recalling various kinds of knowledge that allow us to act appropriately. It is very versatile, enabling us to do many things. It is not possible for us to remember everything nor would we want to, as our brains would get completely overloaded. A filtering process is used to decide what information gets further processed and memorized. Often, we forget things we would dearly love to remember and conversely remember things we would love to forget. How does this filtering process work? Initially, encoding takes place, determining which information is attended to in the environment and how it is interpreted. The extent to which it takes place affects our ability to recall that information later. The more attention that is paid to something and the more it is processed in terms of thinking about it and comparing it with another knowledge, the more likely it is to be remembered. Another factor that affects the extent to which information can be subsequently retrieved is the context in which it is encoded. 4. Learning: Learning involves in taking in new things, synthesizing information, and integrating it with prior knowledge. Learning can be considered in terms of: 1. How to use a computer-based application 2. Using computer-based application to understand a given topic It is well known that people find it hard to learn by following a set of instructions instead, they prefer to learn by doing. GUIs and direct manipulation interfaces are good environments for supporting this kind of active learning by supporting exploratory interactions.  Benefit of interactive technologies is that they provide alternative ways of representing and interacting with information that are not possible with traditional technologies. 5. Language: Language and language development are cognitive processes that involve the ability to understand and express thoughts through spoken and written words. Reading, speaking and listening are the three forms of language processing that have similar and different properties. This allows us to communicate with others and plays an important role in thought. One similarity is that meaning of sentences or phrases is the same regardless of the mode in which it is conveyed. However, the ease with which people can read, listen, or speak differs depending on the person, task, and context. 6. Thought: Thought is an essential part of every cognitive process. It allows people to engage in decision-making, problem-solving, and higher reasoning. These are the processes involving reflective cognition. They include thinking about what to do, what the options are, and what the consequences might be of carrying out a given action. They often involve conscious processes, discussion with others, and the use of various kinds of artifacts. Reasoning also involves working through different scenarios and deciding which one is the best solution for the given problem. 1.4 Core Elements of User Experience Fig. 1.4.1 Core Elements of UX  The goal of any user experience project is to ensure users have a positive experience with a product. Still, between the idea and the final product lies a complex web of decisions that impact the user experience in some or the other way. So, the 5 elements of UX design act as a guide to provide structure and direction to the process of making these decisions at the appropriate point in the process. The fig 1.4.1 shows the elements of user experience. They exist on 5 separate planes, stacked one above the other to create an outline of the process which UX teams can follow for every new project they design. From bottom to top those planes are strategy, scope, structure, skeleton and surface. Each one builds on the next as the project goes from abstract towards more concrete level to get the finished product. 1. Strategy: o What objectives the product should be designed to meet? This layer is the most abstract of the model, takes into consideration both user needs and business goals. o Example: let’s say you want to build an app that helps people find charging stations for electric cars. ▪ Product objectives: Informing electric car owners of the nearest place to charge their cars ▪ User needs: Also provide directions to the nearest charging station, information about how many chargers are available there and how much it costs to charge a car at each listed charging station. 2. Scope: o What is the product that will be created to solve the problem? Within this layer, the team creates the set of functional requirements (what features to build) and content requirements (written and visual information to include). o Example: In our car charger finding app, ▪ Functional specifications: include a feature to save previously discovered charging stations. ▪ Content requirements: list information like images of each charging station, maps of their locations, and details about the voltage of each available charger. 3. Structure: o How is the design organized and how do interactions work? This layer includes information architecture (the structure and organization of content) and interaction design (the interactive experience of the product). o Example: In our car charger finding app,  ▪ Information architecture: to convey the structure, we might create a site map that shows the hierarchy of the product. This could include a home page where users can enter a location to find car charging stations. Then lead to a list of stations each with a link that takes users to pages for individual stations. ▪ Interaction Design: we can create a user flow to show how the system responds after a user enters their location information. It can account for what happens if the system finds nearby charging stations and if there is an error which prevents the system from successfully understanding the location information provided. 4. Skeleton: o How is information presented and arranged? This layer begins to consider UI design (design of interface elements), navigation design (how users move through a system), and information design (presenting information to facilitate understanding). A common output at this stage is a set of wireframes and prototypes. o Example: For our car charger finder app, to explain what users will see when they navigate to a page that describes a specific electric car charging station, we can create a wireframe that provides a blueprint of where each component of the page would go. We can have a header with the app logo and navigation back to the complete list of stations, followed by an image of the charging station, then a link to a map of the location followed by text providing practical information about the station. This will help visualise each functionality and content that will appear on the page and its placement. Fig 1.4.2 Wireframe for Car charger finder app 5. Surface: o How does the product look and feel to users? This stage emphasizes visual design, for example, what colours and typefaces are used, and is the stage where UI design is front and centre (though it is not exclusive to the surface). o Example: In our electric car charger finder app, this means creating a consistent colour palette and layout, where the logo appears at the top of the page, the most important information appears in a wide column in the middle of the page, and less important information is relegated to each side of the page. This are high fidelity wireframes which are made with the help of tools. Fig 1.4.3 High fidelity wireframe for Car charger Finder App Module 2: 2.1 What is User Experience Design? User experience (UX) design is the process to create products that provide meaningful and relevant experiences to users. UX design is the design of the elements that determine the interaction a user has with a product or service. UX design shape the products and services we use daily to make them easy to use, efficient, and enjoyable for the end-users and how easy it is to accomplish their desired tasks. This could mean anything from how a physical product feels in your hand to how straightforward the checkout process is when buying something online. The goal of UX design is to create easy, efficient, relevant, and all-around pleasant experiences for the user. UX designers combine market research, product development, strategy, and design to create seamless user experiences for products, services, and processes. They build a bridge to the customer, helping the company to understand better and fulfil their needs and expectations. Its impact is such that it can make or break a business or brand. 2.1 User Experience Design Process and Methodology The UX (User Experience) design process and Methodology is defined as a systematic approach that focuses on creating meaningful and satisfying experiences for users when interacting with a website, application, or any digital product. It involves understanding the users' needs, behaviours, and goals, and then using that knowledge to design intuitive and engaging interfaces that meet those needs effectively. The Stages of UX Design Process are as given in the fig 2.2.1 below. Fig. 2.2.1 UX Design Process and Methodology 2.2.1 User research It is an important stage in your entire UX design process. We need to conduct this research to understand the needs of the user. Designers can have biases and assumptions that influence the design solutions and so research will help us clarify those assumptions. Research involves interacting with the product ‘s target users. The final solution requires user testing. We cannot rely on assumptions based on experience. If we do so, we may not understand user needs and hence cannot improve a service or product. User research gives us the information we need to develop the product, hence it’s an essential component of any UX design project. Techniques for conducting user research o Interviews: Interviews are one of the primary ways of collecting data from target users. It involves in-depth, one-to-one conversation. It is a guided conversation where the researchers ask questions and take down the responses from the participants. The advantage of interview lies in its flexibility and a well-structured interview enables researchers to gain detailed information and deep insights into the users. o Online surveys: It is usually done when you need to collect large sample size. Surveys are online forms or offline form with questions regarding the product. Researchers use them to get user perspectives on a launched or a budding product. A couple of popular tools for online surveys are Google Forms and SurveyMonkey. These tools help keep the user responses intact and easily accessible. o Persona: Personas are fictional characters which represent target audience characteristics and experiences. They are needed to create a sense of empathy among team members and communicate user needs to stakeholders. They visually represent user needs and expectations, ensuring that your decisions align with user expectations. o Card sorting: Card sorting is a user research method commonly used to aid the design of information architecture, workflows, menu structure or website navigation paths. Researchers use cards, sticky notes on whiteboards, or even card sorting software like Miro to group similar user experiences, motivations, needs, and expectations. This is helpful for creating personas, storytelling boards, affinity maps, user journeys, etc. 2.2.2 Design Once you know your users, next step is to design. UX professional should be aware that design is more than appearance. UX design comprises UX elements from information architecture, visual design, interaction design, content strategy to sitemaps. As user requirements tend to evolve throughout the design process as you gain more insights and feedback. It's important to remain flexible and open to the changing user needs.  Methods of generating and evaluating the design: o Brainstorming or ideation: Brainstorming is a generative method where designers collaborate with one another and generate ideas based on data collected in earlier stage. o Sketches: Sketches are used for putting your thoughts on paper, and are another generative technique in the design process. o User Journey Map: It is an illustration of the interaction between a user with a company, product or service at every stage of engagement from researching, making the decision, purchasing to post-purchase. It involves the personas, time frame, and actions for each stage, touch points and sales channels, emotions, and experience. A good and comprehensive user journey map explains user experience from a user perspective. o Storyboards: A storyboard is a comic version used to capture a user’s interaction with a product or service. It allows researchers and stakeholders to visualize. It’s made up of a number of squares with illustrations or pictures representing each shot, with notes about what’s going on in the scene and what’s being said in the script during that shot. 2.2.3 Wireframing A wireframe is a schematic, a blueprint, useful to help you and your programmers and designers think and communicate about the structure of the software or website you're building. It allows you to define the information architecture, navigation design, and interface design. It helps you to get an early version of your product to review. Many tools and applications help you in wireframing. 2.2.4 Prototyping The purpose of prototyping is not to create a fully functional product but to test and validate your design decisions. It resembles the closet version of your final product. Prototyping allows you to create interactive, clickable versions of your design, giving your users a realistic feel of how the final product will function. It allows you to test your design, get feedback and iterate on your ideas before moving ahead. 2.2.5 Testing With prototypes, user testing can be conducted with users to validate the design flow and user experience. In some companies, testing usually makes up a big bulk of daily routine as it allows them to continuously improve the product. 2.2.6 Implementation & Launch After testing, the prototype can is converted into actual product for UAT Testing before an official launch. 2.6 Mental Models People primarily develop knowledge of how to interact with a system and how that system works. These 2 kinds of knowledge were referred to as a user’s mental model. A mental model is an important concept of user interface design. It is a representation of the world that help us understand complex concepts and make better decisions. Thus, they are used by people to reason about a system and to try to fathom out what to do when something unexpected happens with the system or when encountering unfamiliar system. The more someone learns about the system and how it functions, the more their mental model develops. They provide a framework for thinking and problem-solving, allowing us to view problems from different angles and generate creative solutions, and help us become more effective thinkers and problem solvers. Mental models are created based on past experiences, beliefs, and assumptions to understand how the world works. Mental models are important in creating user-friendly interfaces. Designers research users' mental models to create designs that align with their expectations and beliefs. If interfaces match users’ expectations, they do not have to learn new concepts or behaviours. Mental Model Example: The Back and Forward Buttons As shown in figure 2.7.1, the Back button is an icon in the shape of a left-pointing arrow and the Forward button is an icon in the shape of a right-pointing arrow. They are used to navigate backward and forward through the user's history – either on that website/app or on the web browser itself. Fig. 2.7.1 Back & Forward Buttons The mental model for this icon is "Left represents backward and Right represents forward". If you think about this, why does a left arrow mean back? Culturally we are accustomed to this, but there's no logic behind it. However, embracing this heuristic allows users to understand that clicking this button will take them one step back in their navigation history. Mental models can be conscious or unconscious, varying in accuracy and usefulness depending on the context. However, if they are incomplete, they can also lead to bias and errors, inaccurate, inflexible, or resistant to change. Understanding the concept of mental models can help you make sense of usability problems in your design. When you see people make mistakes on your site, the reason is often because they've formed an incorrect mental model. Example: Travel App 2.8 Visual Design Principles They inform us how design elements go together to create thoughtful visuals. Graphics that take advantage of the principles of good Visual design can drive user engagement and increase usability. Fig 2.8.1 Visual Design Principles Scale o This principle states that: “when something is big, it’s more likely to be noticed.” o A visually pleasing design generally uses no more than 3 different sizes. Having a range of differently sized elements will not only create variety within your layout, but it will also establish a visual hierarchy.  o Be sure to emphasize the most important aspect of your design by making them bigger. Visual Hierarchy o Visual hierarchy can be implemented through variations in scale, value, colour, spacing, placement, and a variety of other signals. o It controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy. o To create a clear visual hierarchy, use 2–3 typeface sizes to indicate to users what pieces of content are most important or at the highest level in the page’s mini-information architecture. Consider using bright colours for important items and muted colours for less important ones. Balance o Just like when balancing weight, if you were to have one small design element and one large design element on the two sides of the axis, the design would feel a bit unbalanced. The area taken by the design element matters when creating balance, not just the number of elements. o Balance can be: ▪ Symmetrical: elements are symmetrically distributed relative to the central imaginary axis ▪ Asymmetrical: elements are asymmetrically distributed relative to the central axis ▪ Radial: elements radiate out from a central, common point in a circular direction. Contrast o Contrast provides the eye with a noticeable difference (e.g., in size or color) between two objects (or between two sets of objects) in order to emphasize that they are distinct. o The principle of contrast is often applied through color. For example, red is frequently used in UI designs, especially on iOS, to signify deleting. The bright color signals that a red element is different from the rest. Gestalt o “Gestalt” is German for “unified whole”. The first Gestalt Principles were formulated with the aim to understand how humans typically gain meaningful perceptions from the confused provocations around them. They identified a set of laws which address the natural compulsion to find order in disorder. According to this, the mind “informs” what the eye sees by perceiving a series of individual elements.  o Closure: States that even if an image is missing parts, your brain will fill in the blanks and perceive a complete picture. For example, we can still see the circle and rectangle below, even though the lines are broken. Some of the most recognizable logos (e.g., IBM, NBC) apply this principle. Fig.2.8.2 (a)Principle of Closure (b)Principle of Common Region o Common Region: Grouping elements that are in the same closed region as shown in fig 2.8.2 (b). You include related objects in the same closed area to show that they stand apart from other groups. Example likes, comments and other interactions in Facebook appear within the boundaries of one post and so stand apart from others. o Figure/Ground (Multi-stability): We dislike uncertainty, so we look for solid, stable items. Figure/ground can be applied in many ways, but chiefly to contrast elements. Example, light text (i.e., figure) from a dark background (i.e., ground). Fig. 2.8.3 (c) Principle of Figure/Ground (d) Principle of proximity o Proximity: It refers to how close elements are to one another. The strongest proximity relationships are those between overlapping subjects, but just grouping objects into a single area can also have a strong proximity effect. 2.9 Information Design and Data Visualization 2.9.1Data Visualization:  Data visualization can be defined as representation of data on its own and in a strictly instructive manner highlighting trends, patterns, and relationships in a simplified and visually engaging manner, so that readers can understand the information easily. It is a coherent way to visually communicate quantitative content. In Data Visualization, depending on its attributes, the data may be represented in many different ways using tools such as charts, graphs, maps, or other visual elements. Data visualizations should be useful, visually appealing and never misleading. Especially when working with very large data sets, developing a cohesive format is vital to creating visualizations that are both useful and aesthetic. As the world is getting connected with an increasing number of electronic devices, the volume of data is growing exponentially. It is difficult for the human brain to comprehend this data without drawing some kind of analogy or abstraction. Data visualization plays a vital role in creating these abstractions. By converting these complex numbers and other information into graphs, content becomes easier to understand and use. That’s why data visualization plays an important role in every field like economics, science, technology, healthcare and human services. The Most Popular Types of Charts for Data Visualization: o Line Charts: Line charts are used to compare values over time o Bar Charts: Bar charts should be used to compare quantitative data from several categories. o Scatter Plots: Scatter plots should be used to display values for two variables for a set of data. o Pie Charts: Pie charts should be used to show parts of a whole. They can’t display things like changes over time. UI Elements and Widgets 2.10.1 UI Elements: UI elements are the core building blocks for all products. These are the most integral part of product design, be it a web design or mobile, desktop, or Augmented Reality or Virtual Reality application. They are what users interact with when they are using the product. They click on a button to sign up, they use navigational components to switch between pages, etc. Interface elements include but are not limited to: o Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field o Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons o Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows o Containers: accordion 2.10.2 Widgets:  The widget is the UI element that helps you build the layout of your page. Almost everything that you see on the page is a widget. You build the UI by combining the widgets in a parent-child relationship. Text, Row, Column, Stack, and Container are the most basic types of widgets. Widgets in smartphones can be used to display selected bits of information that reside in the associated applications. For example, a user might wish to see baseball scores for only one team. The widget extracts the selected data from the app and displays it on the screen. Types of widgets that can add to your page. o Desktop widgets: They are interactive tools that are downloaded to the computer’s desktop. This is the case of search engines, weather applications, clocks, etc. o Mobile widgets: Same as the previous ones, but adapted to mobile technology. The easiest way to install them is to hold down your finger in an area of the screen where there are no icons and we will get a drop-down with the option of the different widgets. o Web widgets: The parts of code that are translated into functionality or content and that are programmed from JavaScript, Flash, Silverlight, and Windows Media Player. o Physical widgets: They are compact mechanisms that integrate typical functions of widgets, such as alarms, weather, etc. 2.11 Screen Designs and layouts: Screen design refers to the graphic design and layout of user interfaces on displays. It is a sub-area of user interface design but is limited to monitors and displays. In screen design, the focus is on maximizing usability and user experience by making user interaction as simple and efficient as possible. Screen design goes hand in hand with technical, psychological and of course the practical aspects of a user interface. The goal of the UI and the framework in which it exists must be taken into account. Whether website, mobile website or software application, screen design is not only more important than the first impression of an application, but is a key factor in terms of the graphical properties of the entire user interface. So, screen design has a particularly important role in the areas of usability, user experience and interaction between man and machine. Screen design can significantly impact the conversions of a website or an app Basic principles at the screen level o Ask: What is the user doing o Think: What information is required o Design: Form follows function Tools for layout o Grouping and structure o Decoration - fonts, boxes etc. o Alignment of items o White space between items Example of Storyboard: Online food ordering system  Module 3: 3.1.2 Usability Testing Usability testing is the process of discovering ways to improve your product by observing users as they engage with the product itself (or a prototype of the product). It’s a UX research method specifically trained on the usability of your products. And what is Usability? Usability is a measure of how easily users can accomplish a given task with your product. Usability testing, when executed well, uncovers pain points in the user journey and highlights barriers to good usability. It will also help to learn about your users’ behaviors and preferences as these relate to your product, and to discover opportunities to design for needs that you may have overlooked. You can conduct usability testing at any point in the design process when you’ve turned initial ideas into design solutions, but the earlier the better. Test early and test often! You can conduct some kind of usability testing with low- and high- fidelity prototypes alike—and testing should continue after you’ve got a live, out-in-the-world product. 3.1.3 Types of Usability Testing The kind of test you want to run will help you choose the right usability testing method. All product research and testing broadly falls into two main categories: 1. Moderated or unmoderated 2. Remote or in-person 1. Moderated or Unmoderated Moderated and unmoderated usability testing are two different approaches to usability. Moderated usability testing, a moderator guides the users through the test (in-person or remotely). They answer any questions participants may have, ask follow-up questions, and record observations during the test. Unmoderated usability testing, as the name suggests, doesn’t involve a moderator. Users’ complete tasks independently, typically using usability testing tools that record their actions and responses. 2. Remote or In-person Research can be done remotely or in-person, depending on the type of product you're testing and your research goals. Remote usability testing can be moderated or unmoderated, and is done using online tools or software that allows users to share their screens, record their activity, and provide feedback. It’s useful because your team and test participants can be based in entirely different locations. In-person usability testing, on the other hand, is conducted in a physical location, usually a usability lab or other research facility. For that reason, it can be more expensive, time-consuming, and limiting in terms of sample size and geographic reach. Many researchers opt for remote research, however in-person testing may be necessary for products that require safety considerations, supervision during use, or physical testing. Moderated + in-Person # Lab usability testing This type of usability research takes place inside a specially built usability testing lab. Test subjects complete tasks on computers/mobile devices while a trained moderator observes and asks questions. Typically, stakeholders also watch the proceedings and take notes behind a one-way mirror in the testing area. # Guerrilla testing In guerrilla testing, test subjects are chosen at random from a public place, usually a coffee shop, mall, or airport. They are asked to perform a quick usability test, often in exchange for a gift card or other incentive. Guerrilla testing is used to test a wide cross-section of people who may have no history with a product. It's a quick way to collect large amounts of qualitative data that validate certain design elements or functionality #Contextual Inquiry Contextual inquiry (CI) is a research method that can be used in conjunction with usability testing to gain a better understanding of how users interact with products or tasks. CI involves observing and interacting with users in their natural environment to understand their motivations and experiences. Moderated + Remote # Phone interviews In a phone usability test, a moderator verbally instructs participants to complete tasks on their computer and collects feedback while the user's electronic behavior is recorded remotely. Phone interviews are an economical way to test users in a wide geographical area. Because they are less expensive than in-person interviews, they help collect more data in a shorter period. Unmoderated + remote # Session recordings Session recordings use software to record the actions that real (but anonymized) people take on a website such as mouse clicks, movement, and scrolling. Session recordings are a fantastic way to spot major problems with a site's intended functionality, watch how people interact with its page elements such as menus and Calls-to-Action (CTAs), and see places where they stumble, u-turn (go back to a previous page quickly after landing on a new one), or completely leave. # Online testing tools and platforms There are a variety of online testing tools that allow you to remotely observe user behavior on your website; some let you pay participants to take short tests, while others monitor the behavior of real users as they interact with your site. You might receive audio recordings of users talking while they navigate your site or videos of users completing a set of tasks. Unmoderated + in-Person #First-click The goal of first-click testing is to evaluate whether users can easily identify where they need to navigate to complete a given task. The participant is asked a question like “Where would you click to buy this product?” and the software records where they direct their mouse. First-click testing is useful for collecting data on user expectations and determining the prime location for menus and buttons. By measuring how long it takes users to make a decision, you learn how intuitive your site design and linking structure are. # Eye-tracking During eye-tracking tests, researchers observe and study users' eye movements using a special pupil-tracking device mounted on a computer. By analyzing where users direct their attention when asked to complete a task, the machine can create heatmaps or movement pathway diagrams. Eye-tracking studies can be used to glean information about how users interact visually with a page; they also help test layout and design elements and see what may be distracting or taking someone's focus away from the main page elements.  3.1.4 Usability Testing Process Regardless of your resources or budget, it's possible to set up and run usability tests. Following a consistent process is key to getting started: 1. Define a goal and target audience 2. Utilize a tool that allows for continuous testing 3. Establish evaluation criteria 4. Create a usability testing script 5. Be mindful of test length 6. Run a pilot test 7. Recruit test participants 8. Run the test with best practices 9. Analyze and report your findings 10. Iterate and repeat 1. Define a goal and target audience The point of testing is to deliver a product focused on providing a positive user experience. To do that, you need to understand who your users are. Start by asking questions like: o What’s your demographic (e.g. age, location, profession)? o What specific tasks do you want to enable users to accomplish with your product (e.g. checkout process, changing their username)? o What are your desired timeframes for users to complete tasks and navigate the interface? Once you have your answers, formulate a problem statement that makes it clear what insights you want to gain. For example: "We want to assess the usability of our product for 20–30-year-old customers to complete checkout within 3 minutes." This will help you determine the right research methods and metrics for evaluating the users’ experience. 2. Use a tool that enables continuous testing It’s worth investing in a tool to facilitate your team to carry out fast, scalable usability testing. We recommend choosing one that supports them to test early and often in the process, including after launch. This continuous research can inform your design decisions, keep you updated on evolving user needs, and will ultimately help retain users. For example, a tool like Maze supports testing throughout the product development lifecycle, and after launch. Here’s what you and your team can do with Maze: o Live website testing: Perform usability testing tasks on a live website or web-based application o Prototype testing: Integrate with your prototypes from Adobe XD, Figma, Sketch, and Invision to validate design concepts early o Usability testing templates: Hit the ground running with pre-built templates to save time and ensure your tests are designed to capture relevant insights 3. Establish evaluation criteria o How do you know if your team is evaluating the right thing? Establishing your evaluation criteria will help focus your team on specific elements of the user experience. o Depending on the goal of your test, consider evaluating usability metrics like: Task completion rate Direct and indirect success Time-on-screen Time-on-task User satisfaction score Mis click rate o For example, to measure user accessibility during a checkout process, you can review metrics like the time it takes for users to complete the checkout and overall success rate (i.e. percentage of successful purchases). It’s also a good idea to establish benchmark test results using earlier prototypes or competitor products, so you can track user performance as your product evolves over time. 4. Create a usability testing script A well-crafted usability testing script outlines the tasks to be performed, instructions to be given, and questions to be asked. It serves as a roadmap for the test participant and provides an opportunity to identify any potential problems or areas of improvement. 5. Be mindful of length Keep your tests short and sweet. When it comes to test duration, it depends on factors like the product's complexity, the scope of the testing objectives, and participant engagement level. But, as a general guideline, usability tests are an average duration of 15–20 minutes with 5—10 tasks. It should be short enough to maintain participants' focus, while giving your team sufficient time to gather meaningful insights. 6. Run a pilot test If you want to nail usability testing, getting your team to do a pilot run is a smart move. Ideally, your test participant should be someone inside your organization, but not directly involved in your project, as they might have preconceived notions about how the product works. Otherwise, you could test a small batch of participants who represent your target user. The pilot test is where you evaluate the clarity and effectiveness of your testing materials, like the script, tasks, and instructions. You can also validate the feasibility of your chosen testing methods, tools, and environment. 7. Recruit test participants “No matter how much time you spend on ideation and prototyping your design solution, you should always test it with real people,” says Nick Babich, Editor-in-chief of UX Planet. You must recruit participants that represent your target audience and have similar backgrounds, preferences, and experiences as your intended users. Here's how you can hire participants in three easy ways: Invite them: You can invite participants directly from your website or browser-based products using popover invites. Recruit existing users: If you’re testing an existing product, you can source testers from your current user base. With recruitment tools, you can directly create participant databases from your CRM, segment them, and send personalized emails. Recruit from a panel: You can also hire participants quickly from service providers. When recruiting participants, consider their availability and willingness to participate in the session. Screen participants based on your criteria and avoid those who aren’t a good fit for the test. 8. Create a positive testing environment Usability testing should feel like an interactive conversation, not an interrogation. To get the most out of your usability test, be sure to brief your team on how to interact with participants and reduce bias. Your researchers should avoid leading questions that might influence participants' behavior—and each participant should feel comfortable providing honest feedback. 9. Analyze and report your findings When you transform raw data and participant feedback into actionable insights, you'll be able to identify user pain points, prioritize UX improvements and communicate them effectively within your team. Some metrics you should be tracking include: o Usability metrics like total testers, bounce rate, mis click rate, and average duration o Mission paths for how participants interacted, and optimal path analysis o Success metrics based on how many testers deviated from the intended flow o Closed and open questions with a visual representation of responses 10. Iterate and repeat Usability testing is an ongoing process that requires iteration, feedback loops, and revisions throughout the product lifecycle. You can test different versions of a design and analyze the results to determine which one works best. As your product and audience grow, it's important to re-evaluate your usability testing process and adapt it to accommodate new goals, user segments, and market conditions.