Common Design Concepts

User experience or UX refers to how users interact with or experience a product, system, or service. Don't confuse user experience with customer experience (CX), which takes care of customers to have a delightful interaction with a brand throughout the buyer's journey.^[1]

It's also important to distinguish the total user experience from the user interface (UI). As an example, consider a website with movie reviews. The UI for finding films might be perfect. However, if the database only contains blockbusters while users are looking for independent films, this will result in a poor user experience. By conducting user research and analyzing user behavior, user experience addresses users' needs and pain points to create intuitive, functional, and useful products.

A user interface (UI) serves as the interactive layer between users and a software application or hardware device. While this can include physical components like keyboards and mice, most modern interactions occur through a graphical user interface (GUI). GUIs use a combination of text, links, buttons, and graphical elements to facilitate a more intuitive and engaging user experience.

Essentially, the UI is not just about what users see but also how they interact with an application, making it a critical aspect of software design that directly influences user satisfaction and engagement.

Human-centered design is a practice where designers focus on the product users' human needs. Instead of concentrating on profits or aesthetics, this approach puts real people at the center of the development process.

For example, when adding a function to the product, the goal is to make it helpful for users instead of making it look pretty or maximizing conversion. Doing so results in superior products that resonate with their target audiences.

Usability is a quality attribute that assesses how easy an interface is to use. The word "usability" also is used to denote methods for making a product more customer-friendly.

Usability can be described with 5 components:

• Learnability: the product should be easy to learn so users can achieve their goals
• Efficiency: once users learn an interface, they should have no trouble performing tasks quickly
• Memorability: if users don't use a product for a while, they should be able to remember it effortlessly
• Errors: the product should prevent users from making errors or help them recover from them quickly
• Satisfaction: the interaction with a product should bring joy and pleasure to users^[2]

Usability is a necessary condition for the survival of any digital product. If a website is difficult to use or the app crashes, people leave — poor usability directly results in losing your users to competitors.

Accessibility in design means designing products for all so people with disabilities can also equally perceive, understand, navigate, and interact with websites and tools. At the same time, improving the user experience for this user segment also benefits all users.^[3]

Making your digital product more accessible can seem intimidating at first. However, there are understandable guidelines to help you do it.

Microinteractions are subtle animations designed to offer visual feedback or signal a state change in the user interface. These elements typically involve a trigger, which can be initiated by users or the system, and a corresponding feedback mechanism.

While microinteractions play a crucial role in enhancing user experience by making interactions feel intuitive and satisfying, it's important to use them judiciously. Overuse can lead to visual clutter and detract from the overall user experience. Additionally, designers should consider accessibility when implementing microinteractions, ensuring they don't alienate or confuse users with varying abilities.

Animation is a series of static images — illustrations or photos — linked together to mimic real-world motion. You can think of animations as flipbooks. The human eye can hold on to an image for approximately 1/10th of a second. Seeing images appear in quick succession makes our brain put them together into one moving image.

Animations play an important role in:

• Representing a brand
• Providing feedback on what's happening in the system
• Indicating status
• Educating people on how to use a certain feature^[4]

Dark mode is a user interface option that flips the typical bright background and dark text to feature light text on a dark background. Initially popularized in 2019, this theme has become a standard feature across iOS and Android platforms.

The benefits of dark mode extend beyond aesthetic preferences. It's not only easier on the eyes, especially in low-light conditions, but it also offers potential benefits like increased battery life on OLED screens. Additionally, the contrast can make text more readable, improving accessibility for some users.

Design thinking ideology is based on the idea that a user-centric approach is the key component of innovation, success, and competitiveness.

The process of design thinking comprises 6 stages:

• Empathize: at this stage, you conduct user research and explore users' needs
• Define: analyze the collected research data and gain insights into users' problems
• Ideate: brainstorm with your team the craziest ideas about how users' problems can be solved
• Prototype: visualize your ideas using paper or digital mockups to evaluate what hypothesis will work and which don't
• Test: return to your users to gain their feedback on your prototypes and explore whether these solutions can help them achieve their goals
• Implement: transform prototypes into real features or products

The design thinking approach isn't a linear but a cyclical process. It's common to come back to phases of empathy and problem definition after you test your ideas or test your ideas and get back to prototyping.^[5]

Affordances refer to the cues or signals an interface element gives to indicate its functionality or interactivity. Essentially, affordances help users understand what actions they can take without having to think too much. For example, a button that looks clickable usually has visual traits like a 3D appearance, shadow, or hover effect to indicate you can press it.

In the digital world, affordances are crucial because they guide users' behavior and make navigation more intuitive. Poor affordances can lead to confusion and frustration, while good ones make for a seamless, enjoyable experience. Overall, affordances bridge the gap between design intention and user expectations, playing a vital role in usability.

Flat design is a minimalist design approach that focuses on simplicity and clarity. It eliminates embellishments like shadows, textures, and gradients, opting for clean lines and solid colors instead. This design style became popular as a response to the skeuomorphic design trend, which tried to mimic real-world objects in digital interfaces. Flat design is highly functional, making it easier for users to understand what each element does.

However, this doesn't mean flat design is purely aesthetic; it aims to enhance usability by making interface elements easy to recognize. While it has its pros, like faster load times and easy adaptability across devices, it can sometimes lack the cues that tell users how to interact with elements. So, good flat design often incorporates some level of depth or cues to guide user interaction.