Key Concepts for UX Designers. Part 2

Contents:

• Loader bar, progress bar
• Loader indicator, activity indicator, spinner
• Breadcrumbs
• Pagination and scrolling, infinite scroll
• Modality interface
• Feedback
• Accessibility
• Informative
• User personas

Interface design is a complex task that includes developing user scenarios and testing the final results. To successfully perform this work, it's essential to deeply understand the discussions colleagues have in meetings, as well as the reasons behind the creation of different app loading options. This knowledge will help you optimize the development process and improve the user experience.

In this article, we'll cover nine key terms that are significant in the field of UX design. Understanding these concepts will help you better navigate the profession and improve the quality of your design work. UX design, or user experience design, encompasses many aspects, from user research to prototyping and testing. Each of these concepts plays a vital role in creating effective and user-friendly interfaces. We'll explain what each term means and how they impact the design process so you can successfully apply them in your practice.

A UX designer is a specialist who designs user experiences. Their primary goal is to create user-friendly and intuitive interfaces that ensure positive user interactions with a product. In our article, you'll find detailed information about the role of a UX designer, their responsibilities, and the skills needed to succeed in this field. Learn how UX designers research user needs, prototype, and test solutions to improve product interactions.

Progress bar

An interface element displaying the progress of a process plays an important role in user experience. It informs the user of the current state of operations, such as transferring files between folders, downloading data, or installing software. This progress indicator helps eliminate uncertainty by making it clear that the process is ongoing and the user does not need to worry about something going wrong. Proper use of progress elements improves app interaction and increases user satisfaction.

A progress bar is a long bar that visually displays the progress of a specific process. This interface element helps users track the progress of a download, installation, or task. A progress bar can be static or dynamic, allowing the user to see how much time remains until the operation is completed. Effective use of progress bars improves the user experience by providing visual information about the current status of a task.

In mobile versions of the interface, elements can be displayed as round icons. A striking example of such design is iOS.

Loading indicator, activity indicator, spinner (Progress indicator)

The loading indicator performs a similar function to the progress bar, showing the user the stages of loading a particular process. However, unlike a progress bar, a loading indicator does not provide detailed information about the task's completion status. This interface element helps users navigate the process, but does not provide precise information about the time remaining until completion.

This approach is most often used in situations where the system is unable to determine the completion of a process. This can occur, for example, if the system freezes or when configuring an external device. In such cases, special methods must be used to restore functionality and complete operations.

A loading indicator is usually round, hence its informal name, a "spinner." This interface element is used to display the loading process and helps users understand that the system is processing the request. The indicator's round shape allows for a smooth animation, which makes the wait less noticeable and improves the user experience. The spinner is becoming an important design element, especially in web applications and mobile interfaces, where system responsiveness is key. A properly implemented loading indicator helps retain the user's attention and reduces the likelihood of them leaving the site while waiting for the loading to complete.

But it cannot always function as a "spinner."

Breadcrumbs

An interface element representing a navigation tree displays navigation paths through sections of a system or website, starting from the home page and ending with the current section. This navigation chain makes it easier for the user to return to any section, which contributes to a better understanding of the product structure and reduces the risk of confusion in its hierarchy.

Breadcrumbs are often used in complex products, such as online stores and computer file systems. This navigational technique helps users easily navigate the structure of a website or system, showing the path from the homepage to the current section. Breadcrumbs allow visitors to quickly return to previous navigation levels, improving the overall user experience and increasing the time spent on the site. Incorporating this feature into your web design can significantly improve usability and reduce bounce rates.

Pagination and scrolling, infinite scroll

The way information is distributed on a web page and in a programming interface plays a key role in how users perceive the content. Effective organization of data improves navigation ease and increases overall satisfaction. Web designers and developers use a variety of methods to structure information, including visual and textual elements.

Among the popular approaches is the use of headings and subheadings to divide content into logical blocks, which facilitates perception. Another important aspect is the use of lists, both bulleted and numbered, to present information in a compact and readable format.

Graphic elements such as tables and infographics help organize data more visually, which promotes better comprehension. Furthermore, interactive elements such as accordions and tabs allow users to independently control the amount of information displayed, significantly improving the user experience.

Optimizing the distribution of information on a page not only improves the perception of content but also has a positive impact on SEO rankings. Correct use of keywords in headings and text, as well as the creation of structured data, help search engines better index the page and increase its visibility.

Therefore, the correct distribution of information on a web page and in the program interface is an important aspect that affects user experience and SEO effectiveness.

Pagination is the process of dividing information into separate pages that users view sequentially. This method is often used in search engines, where search results are organized into multiple pages. Pagination improves navigation and simplifies the processing of large amounts of data, allowing users to more easily find the information they need. Proper implementation of pagination also contributes to a better page index in search engines, which can positively impact SEO.

Pagination doesn't have to be the only option. If you have the ability to sort information, for example, by date, it is recommended to use this approach. This will simplify the search process and make navigation more convenient for users. Sorting allows users to quickly find the information they need, improving the overall user experience. Screen switching on smartphones can be considered a type of pagination. This is a method that helps users navigate between different sections or pages of content on mobile devices. Pagination on smartphones provides ease of navigation, allowing users to quickly find the information they need and improving the overall user experience. Proper use of pagination can significantly improve the usability of the mobile interface, which in turn helps increase the time users spend on the site and reduce bounce rates.

Scrolling, unlike paging, does not divide information into separate segments, but demonstrates All content is presented in a continuous format. The user sees only the portion of information that fits on their device's screen. Scrolling is widely used in social media, allowing users to quickly browse news, images, and videos without having to switch between pages. This approach ensures smooth interaction and improves user experience.

Modality (Mode interface)

Modality is a set of settings that change the functions of the interface. For example, switching keyboard layouts on a computer or different hotkey modes in Photoshop are examples of modality. These settings allow users to tailor the interface to their needs, improving the functionality and usability of the software. Modality plays an important role in the user experience, providing flexibility and personalization of interactions with devices and applications.

Excessive interface modality can lead to user errors. When a person is focused on a task, they risk not noticing a change in interface mode, which can lead to changes in button functions and their incorrect use. This emphasizes the importance of intuitive design that minimizes the number of modes and simplifies interaction, allowing the user to maintain focus on the task and reducing the likelihood of errors.

Modality is an important interface element and is well illustrated by a pop-up window that completely covers the main part of the screen. In this situation, the user cannot continue interacting with the interface until the pop-up window is closed or processed. This makes modal windows effective for drawing attention to important messages or actions, but it also requires careful use to avoid creating a distracting user experience. Proper use of modality can improve the user experience and increase the effectiveness of interaction with the app.

For an in-depth understanding of modality and modes, see Jeff Raskin's review of Interface. This work illuminates important aspects of user interaction with interfaces, emphasizing the importance of choosing the right modality to improve usability and efficiency. The book examines various approaches to interface design, making it a valuable resource for developers and designers.

Feedback

The property of a system that allows it to respond to user actions is an important aspect of the user experience. For example, when a virtual button is pressed on a smartphone, an interface element might change color, signaling that the action has been registered. If an application freezes, it displays a loading indicator, informing the user that the process is still in progress. Such feedback mechanisms help the user understand the state of the system and make interaction more intuitive and comfortable.

In the iOS operating system, the color of rows changes to warn the user of an upcoming window change. This visual cue helps users better navigate the interface and understand when a transition to a new screen or function will occur. This approach improves interaction with applications and makes it more intuitive.

When you hover over the emojis, they increase in size, which signals to the user that it is possible to interact with them. This visual change attracts attention and improves the user experience by emphasizing the interactivity of the elements.

Feedback can manifest itself in a "hyperactive" form, when there are many flashing elements around, creating the effect of a Christmas tree. This type of design often irritates users and distracts them from the main task. To improve the user experience, it is important to maintain a balance in visuals and provide feedback in a moderate and clear form.

Feedback is a key element in design. A review of Don Norman's book "The Design of Everyday Things" examines methods that help users better understand interactions with objects and systems. Norman emphasizes the importance of clear and timely feedback, which allows users to make conscious decisions and adjust their actions. This book provides valuable insights into how competent design can improve user experience and increase the effectiveness of interactions with products.

Accessibility

Accessibility of interface design is a key aspect that determines the ability of different categories of users to use your product. For example, blind users have difficulty perceiving visual content, such as images. To make your product more accessible, it's essential to add alternative text descriptions to images. This will allow screen readers to convey information about the visual content to users, thereby ensuring full access to the information. By considering accessibility aspects like these, you can create a more inclusive interface that meets the needs of all users.

If colors don't have sufficient contrast, users with visual impairments may have difficulty distinguishing between text and background. This can negatively impact the perception of information and lead to difficulties in website navigation. Ensuring good contrast between text and background is an important aspect of web content accessibility. Choosing the right color palette not only improves readability but also creates a more comfortable experience for all users.

Learn more about accessibility in an interview with blind VTB expert Vadim Chagin. Vadim shares his experience and perspective on the importance of creating an accessible environment for people with disabilities. He discusses current issues related to financial inclusion and technological innovations that help improve the quality of life for people with disabilities. This interview will be a valuable resource for anyone interested in inclusion and accessibility in today's society.

Informative

Informativeness of an interface is a key property that determines the amount of useful information available to the user. For example, a graph with low informativeness does not provide enough data to make informed decisions. An effective interface should provide clear and understandable data visualizations so that users can easily interpret the information and extract maximum value from it. Improving the information content of graphs and other interface elements helps improve the overall effectiveness of the user experience.

This image shows two brightly colored columns demonstrating an important concept: 8 is greater than 6. The same information can be expressed as a simple phrase or with a mathematical equation. Using a mathematical expression increases the information content, although the basic content remains unchanged.

In this context, comparing the numbers 8 and 6 shows that 8 is a larger number than 6. This simple mathematical statement has many applications in various fields. Understanding number comparisons is important in mathematics, economics, and other sciences where quantitative indicators play a key role. In everyday life, such comparisons help make decisions based on quantitative data. Thus, knowing that 8 is greater than 6 can be useful in various situations.

The interface of this application is not very informative. Although the visualization of heart rate and breathing may seem useful, the user only cares about the end result. The effectiveness of the application depends on how clearly and understandably it presents health information, not on visual effects. The user's goal is to receive clear data that will help in monitoring and analyzing health.

This application has a low level of information. The central screen offers the user to choose a seat on the plane, but due to the perspective, it is impossible to determine it correctly. In addition, the designer added many elements of the aircraft interior that do not affect the choice of seat. This creates additional confusion and complicates the selection process. Improving the interface and simplifying the visualization of locations would help users navigate more effectively and make an informed choice.

Japanese candlesticks are one of the most informative tools in the technical analysis of financial markets. Stock traders use them to track price movements in stocks and other assets over specific time intervals. By analyzing Japanese candlesticks, traders can quickly assess trend direction, support and resistance levels, and potential reversal points on the chart. Each element of the candlestick, including the body and shadows, provides valuable information about price fluctuations and market sentiment. Using Japanese candlesticks in trading helps traders make more informed decisions and improve the effectiveness of their strategies.

• The end of the upper "whisker" of the candlestick is the highest stock price;
• The body of the candlestick is the price at the beginning and end of the specified period;
• The end of the lower "whisker" is the lowest stock price.

The trader focuses on key data, avoiding unnecessary graphics and visual distractions. This allows him to analyze only the numbers that matter, which contributes to more effective decision-making in the market.

This review of Edward Tufte's book "The Presentation of Information" examines the key aspects of information content and data visualization. The author focuses on how to properly present information so that it is understandable and accessible to a wide audience. The book offers practical recommendations for creating effective visual representations that help better perceive and analyze data. Tufte shares examples from various fields, demonstrating how high-quality information presentation can significantly improve the understanding of complex data. This publication will be useful for both professionals and those simply interested in the topic of visualization and processing of information.

Personas (User personas)

An interface testing tool is an important element in the development process. Designers analyze the market and identify the key characteristics of the target audience. Based on the data obtained, they create a persona for which the interface is developed. This approach allows for a better understanding of user needs and improves the quality of the final product.

The more carefully the persona profile is developed, the easier it will be to interact with it. Let's look at some examples of characters created by designers from the car sales service av.by.

You can learn more about the characters in Alan Cooper's book "The Inmates Run the Asylum." This work offers an in-depth analysis of how people interact in a psychiatric setting, revealing important aspects of their behavior and motivation. This book is a valuable resource for professionals in the fields of psychology and psychiatry, as well as for anyone interested in human relationships and mental health.

More Terms for Designers

In the world of design, every word matters. Designers use specialized terminology to accurately convey their ideas and concepts. A deeper understanding and use of these words will help improve communication both within the team and with clients. It is important to know not only the basic terms, but also more specific ones, which may include words such as "minimalism", "fluidity of forms", "coloristics", "usability", and "typography".

Using professional terminology not only demonstrates the level of competence of the designer but also helps in creating better and more effective solutions. : Continuously updating your knowledge of new design terms and concepts will help you stay relevant in the rapidly changing world of visual art.

Designers can expand their vocabulary by studying design literature, participating in workshops and webinars, and sharing experiences with colleagues. This will significantly improve their professionalism and help in the implementation of creative projects.

• Key Concepts for a UX Designer. Part 1
• Key Concepts for a Web Designer. Part 1
• Key Marketing Concepts for a Designer

Interface design is a key aspect of digital product development that impacts user experience and interaction with applications or websites. A well-designed interface helps users easily navigate, find the information they need, and complete tasks without unnecessary effort. The main principles of interface design include simplicity, intuitiveness, and visual hierarchy. Effective design also considers accessibility for users with different needs. Using current trends in graphic design and responsive design allows you to create interfaces that are attractive and functional on different devices. Understanding the target audience and their needs is the foundation of successful interface design, which ultimately leads to increased user satisfaction and conversion.

• UX/UI Trends: A Half-Year Review
• Morphisms in Design: What They Are, Why They Are Needed, and How to Create Them
• 8 Interface Design Mistakes That Annoy Users
• Interface Design: 8 Principles Every UX Designer Should Know
• Motion Design in Interfaces: Why UX Animation Is Needed and What Effects Are Used in It