UI/UX Design : UX Awareness and Visual Design
Some ways to create a great product
“When UX doesn’t consider ALL users, shouldn’t it be known as “SOME User Experience” or… SUX?” — Billy Gregory, Senior Accessibility Engineer
If you had to choose a car that looks good but performs poorly or a car that looks bad but performs well, which one would you take? I will definitely choose a car that looks good and performs well. Things like this are also thought by the user of our application when they use it. In making cars, designers who design cars work together with engineers who work there to give the best car looks but with qualified performance. Likewise, User Experience (UX) Designer and User Interface (UI) Designer collaborate to ensure product integrity is maintained throughout the digital product design development process.
What Is User Interface?
An interface is something that helps human interact with a machine, technology or product to achieve a goal. For example, the steering wheel is an interface for the driver to interact with the car. In the context of digital design, UI design focuses on creating a visual experience that covers the entire screen/page and touchpoint that help the user perform an activity. The main concern of UI designer is:
- What device am I designing for?
- How do I put an element in front of the user?
- How to make user interaction simpler?
- Did the user succeed in achieving their goal?
- Are there any brand guidelines that I need to know?
By answering these questions, UI designer can create designs that are easy for users to use in terms of appearance.
What Is User Experience?
UX design is a process used to create products that provide a meaningful and relevant experience for users. This is done by involving the design of the entire process to acquire and integrate the product, including aspects of branding, design, usability and function. The main concern of UX designer is:
- Who will use the product?
- What does the product’s success look like for user?
- What goals should the user be able to achieve?
- What pain points do users feel?
- What are the ways they are doing to overcome these pain points?
Now, I will explain UI and UX in more depth. Note that I will only explain the basic part of UX research and how to process UX research results into products through prototyping, and will not explain the steps of UX research one by one. My hope is that you can make visual designs by paying attention to the experience that users can feel
Elements of UX Design
UX design is built on several steps that UX designers usually follow to turn ideas into products that work well. Look at the picture below, the order is from bottom to top: strategy, scope, structure, framework, and appearance. Assume this is a set of 5 layers that depend on the layers below.
- Strategy (User Needs & Objectives)
The bottom layer is the strategy, on which we lay the foundation of the design goals. The goals are based on user needs and business goals for the product. User needs are externally identified through user research, ethnos/techno/psychographic, etc. - Scope (Functional Specification & Content Requirement)
The next layer is the product scope or scope, where the determination of the type of product made is carried out. Sometimes referred to as a “feature set” which describes in detail the functionality of the product and the content that will be included to meet user needs. - Structure (Information Architecture & Interaction Design)
The middle layer is the structure. Here, we’ll find out how to set up the design and what if you want users to interact with the product. Structure also includes structural design arrangements of information to provide intuitive access to content. - Skeleton (Navigation Design, Interface Design & Information Architecture)
Skeleton is a product layout. Just as the layout of our bones makes up our skin, the skeleton layers detail how the design works — and like the skeleton, the user won’t immediately see how the inside works. - Surface (Visual Design)
Surface, represents how the product looks to the user. Surface represents the interface that the user sees and interacts with. Think of surfaces such as the clothes or makeup you wear that are visible to the outside world. In this layer, we play with visual elements such as images, colors, illustrations, icons, and more to enhance the aesthetics and also improve its functionality so it’s easier and more fun to use.
Usability in UX Design
Usability is a quality attribute that tests how easy an interface is to use. Literally also a method to increase the level of convenience of a product. There are 5 Usability components:
- Learnability: How easily users can complete tasks to meet simple goals in product design when first met
- Efficiency: Once a user has learned how product design works in one try, how fast can he/she perform other tasks?
- Memorability: When users return to the design after a period of inactivity, how easy will it be for them to rebuild their fluency or fluency in using the product?
- Errors: How many errors were made by the user, how fatal were the errors, and how easy was it for the user to find a way out of these errors?.
- Satisfaction: How much fun would it be for users to use our designs?
Usability is an important part of UX that determines the success of product survival in the market. For example:
- if a website is difficult to use, users will leave.
- If the homepage fails to clearly show that the company provides something the user is looking for, the user will leave.
- If a user gets lost on a website, they will leave the website.
- If the information is hard to read or doesn’t answer the question they are asking, the user will leave.
UX Honeycomb : Factors that affect UX
UX make sure users find the value of what we give to them. This value can be represented via UX Honeycomb. The information we provide in the product must:
- Useful — content and information must be original and meet a need.
- Usable — app/website products must be easy to use.
- Desirables — images, identities, brands, and other design elements are used to elicit emotion and appreciation.
- Findable — content must be navigable and locatable.
- Accessible — content and information need to be accessible to people with disabilities.
- Credible — people (users) must believe and believe in what the product conveys
- Valuable — the product must provide value to our sponsors.
UX Honeycomb is one of the right tools to raise the level of conversation not only about usability but also to help others understand user needs to set priorities. Is it more important that a website be desirable or accessible? How about usable or credible? Actually, it depends on the context, content and users.
Visual Design
Visual design aims to enhance the aesthetic appeal and usability of a product by using appropriate images, typography, space, layout and color. Visual design is more than just aesthetics. The reasons why visual design is so important to note:
- Combining interaction design and information design together to build product appearance.
- To provide a visual clue. Remember wireframes are often black and white or don’t have any colors. With color, the product will make users pay attention to features and functions such as buttons on product designs.
- Mood and experience. In the end, the business or client may have a particular brand, with a specific look & feel. Doing visual design here is very crucial in bringing the brand and branding and its look & feel into the product.
- Usability. Remember, visual design is more than just creating a beautiful design. If you make mistakes in the visual design, you will affect how users perform their tasks on the product. That way, when doing visual design, make sure usability is in your mind.
- Sign-off. The final process before making the design a live product. And this is the last stage of visual design where the client can see the design as a whole.
There are several techniques for doing visual designing, i.e. :
- Conceptualization — making several design alternatives to consider with the team.
- Mood board — explores the mood, vibe, look & feel of a design to give you inspiration to create your design.
- The style guide — is an important deliverable that is created at the end of the design development cycle before the design is executed by the front-end developer. Its purpose is to inform the outline of the design made.
- Pattern library — is a collection of elements in the design such as forms, tabs, and others. The goal is to help developers who will create code, this is one of the designer’s efforts in communicating the design.
UX Design Process
The steps taken to achieve a satisfactory level of UX for users are called the UX process or UX design process. This UX design process describes a workflow that designers follow in doing their work. Although each designer’s design workflow does not follow the exact same workflow, it generally follows 4 basic steps: discover, define, develop, deliver. Therefore, the double diamond is commonly used to describe the problem solving process.
This Double Diamond has four phases:
- Discover — learn more about the various variables that affect the problem and possible solutions.
- Define — filter all the information obtained from the first stage, and parse it.
- Develop — creating solutions to problems defined in stages one and two.
- Deliver —the final testing of the product, official sign-off to production and launching.
User-Centered Design
User-Centered Design is a set of processes that focus on placing the user “in the center” of product design development. When a product team develops a digital product, what needs to be taken into account are user’s requirements, goals, and user feedback. Satisfying user needs and wants is a priority and each design decision is evaluated in the context of ‘does it provide value to the user?’. The basic principles of the User-Centered Design process include:
- Users are involved in the design process from the start. Critical design decisions are evaluated based on how they work for the user.
- The importance of clarifying user requirements. The product team is always trying to align business requirements with user needs.
- Driven and refined through evaluation. The product team collects and analyzes user feedback on a regular basis. This information helps the team to make more user-focused decisions.
- Iterative (repetitive) process. The product team is constantly working to improve the user experience; it introduces changes gradually as it gains more understanding of their target audience.
Element of User-Centered Design
There are 3 main elements in user-centered design, namely Research, Design, and Evaluation.
Research
Research helps to gain an understanding of the ideal user experience. The goal during this stage is to understand who the product is designed for. At the research stage, the activities carried out are to:
- User Needs : Understand what is needed by the user.
- Business Needs : Understanding business goals.
- Prioritization : Understanding how to align the two ‘needs’.
Design
Once you have a deeper understanding of the target audience and the problem to be solved, it’s time to come up with an actual solution. In the design phase, what designers do in outline are:
- Information Design : Designing information and content.
- Interaction Design : How users interact with content.
- Visual Design : The look and feel of the product.
Evaluation
Evaluation should be a constant activity that is carried out during the process of the design element occurring. It is advisable to evaluate the design decision through usability testing with real users. Two ways to evaluate a product are by:
- Testing: bring the user to test the product directly.
- Review: invite usability expert/UX expert to do product review.
Visual Design Elements
Visual design primarily aims to enhance the aesthetic appeal and usability of a design/product with appropriate images, typography, space, layout, and colors.
Line
Connects two points and can be used to help define shapes, create divisions, and create textures.
Shape
Shapes are stand-alone areas, usually formed by lines although they can also be formed using different colors, values, or textures. Shapes have two dimensions: length and width.
Color
Color is used to distinguish items, create depth, add emphasis, and/or help organize information. Color theory examines how various choices psychologically impact the user. Designers use color in visual design to convey emotion and add variety and interest to a design, separate different areas of the page, and differentiate a design from competitors (brand color).
Texture
Texture refers to the surface quality of an object. By repeating an element, a texture is created and a pattern is formed. Depending on how the texture is applied, it can be used strategically to attract or block attention.
Typography
Typography refers to which font is selected, its size, alignment, color, and spacing. Typography can elicit feelings, remind you of a particular brand, or create an atmosphere. But when typography is bad, it can interfere with the aesthetics of a design and even make it unreadable.
Whitespace
Negative space or also known as whitespace is the empty area around a shape (positive space). The main object of the design is called the figure, and the empty space around the figure is negative space.
UX Research
UX Research can be done in several ways, to direct users, through online research, and stakeholder interviews. There is also a research type, which is divided based on its purpose and based on the type of data obtained, and based on the source of the data obtained.
Based on the objectives, there are:
- Explorative/Generative research
Exploratory or Generative Research is research that is carried out because little or no information about the study was previously known. With exploratory research, it allows us to confirm our assumptions about topics that are often overlooked by providing opportunities to generate new ideas and developments for existing problems/opportunities. - Evaluative research.
Evaluative Research is research that is carried out by assessing certain problems to ensure usability and basing it on the wants, needs, and desires of real people. You do this by asking users to use your product and asking questions or tasks for them to demonstrate and think out loud when they try to complete the task. There are two types of evaluative studies; summative and formative.
Based on the type of data obtained:
- Qualitative research
Quantitative Research is research that produces quantitative data (which can be calculated) by producing numerical data or data that can be converted into usable statistics. Some common data collection methods include various forms of surveys: online surveys, paper surveys, mobile surveys, longitudinal studies, interceptors website, online poll, and systematic observations. - Quantitative research.
Qualitative Research is research that produces qualitative data in the form of what we call findings/insights/insight, carried out by means of direct assessment or direct assessment of the behavior (behavior) of the user by way of observation. We can find the ‘why’ of the methods. This research can be done by several methods such as: contextual observations, ethnographic studies, 1:1 interviews, direct observation / field studies, and moderated usability tests
Based on the source of the data:
- Primary research
Primary Research is a type of research whose data is obtained from the results of direct user observations by you with qualitative data results. The method is the same as Qualitative Research. - Secondary research
Secondary research is a type of research whose data is obtained from existing data and has been carried out by others, but the results can still be used as a reference. The method that can be done is desk research, by see existing/existing applications, seek information from the internal team (stakeholder interview), analyze the results of the old team’s research whose studies are related to what we are doing or will be doing.
Methodologies of UX Research
In essence, the activity carried out to empathize with knowing and understanding users is to meet, talk and observe them in their immediate environment. We need to understand the specific needs of the results of these activities. We need to empathize, the key to this process relates to empathizing with the user and finding the problem.
- 1:1 Interview
1:1 User interview is a UX research method in which the researcher meets with one user to ask several questions about a certain topic (eg the use of a tool/system, their behavior, and their habits) with the aim of learning about the topic and finding pain points, and gather more insights that might not be possible with other methods. - Diary Studies
Diary studies is a research method used to collect qualitative data about user behavior, activities, and experiences over time. Diary studies are carried out if it requires an understanding of the long-term behavior of users such as habits, product usage scenarios, behavior and motivation, changes in behavior and perceptions. - Field Research
Field Research is carried out in the context and location of the user directly. The goal is to learn the unexpected by leaving our workplace and directly observing the user in his environment while the original process is being carried out by the user/participant. - Online Research
Information about users and non-users and the problems they are experiencing is already overwhelming the internet, we need to find it, and know how to analyze that data. With online research, we can quickly find information about a topic and can find updated pain points that we can make product problems to solve. - Usability Testing
When the team already has a clickable prototype or even an initial sketch, we can test our idea. Usability testing will reveal usability issues: what do users understand and don’t understand? where are they stuck? etc. In the process, we give the user a task to complete and demonstrate, while we observe how they do it.
Prototyping
Prototyping is an experimental activity in making the initial appearance of a digital product (web app/mobile app) to validate ideas, validate design assumptions and other aspects with relatively fast time and low cost. Prototype is also an effort for the designers involved to be able to immediately make improvements or changes in the right direction for the product when they encounter design display problems.
Prototyping can help designers, by providing “tools and ways” to test and explore ideas well before too many resources are wasted on a project. Prototypes give designers the opportunity to develop their ideas into reality and see them in a different way, doing usability tests are practically faster and cheaper so time and money invested in an idea is not too much if it turns out in the end that the idea is a bad idea.
Prototype Fidelity
Fidelity in a prototype is the level of completeness of elements, the level of detail of the display, and the level of how real the prototype looks with the original product. How the prototype captures the look and feel of the product itself. The fidelity level can be categorized as follows:
Low-Fidelity Prototype
Low-fidelity prototypes are ideal if you want to quickly test broad concepts. The low-fidelity prototype method is fast, inexpensive and can be done collaboratively; no advanced design skills required, so everyone from a different team can be involved. As a rule, low-fidelity keeps content and visuals minimal, showing only the main elements of a basic shape (square, rectangle, etc.) to convey visual hierarchy. One example of low-fidelity prototype is wireframe.
Wireframe is also a low-fidelity prototype or a prototype with a low level of information detail. However, it is more precisely the clickable wireframe that functions as a prototype with higher fidelity. Wireframes can be roughly made by hand drawing like a paper prototype, and made in notebooks or sketchbooks. This makes the wireframe lo-fi or low fidelity wireframe.
Clickable wireframes or clickable wireframes not only represent the visual layout of the digital interface, but also offer a certain level of interactivity. This makes the wireframes hi-fi or higher fidelity wireframes (wireframes with clearer layout details plus a clear flow). You can simulate a journey or process a user might go through by inserting a hyperlink button that points to another image frame.
Clickable wireframes still represent the finished product, including things like image and text placeholders along with buttons and navigation elements. They can be created using special wireframing software, or even with presentation tools like PowerPoint or Keynote.
High-Fidelity Prototype
High-fidelity prototypes have the appearance and function of real products to be sold to users. It has all the details and content of the original product. High-fidelity prototypes tend to include all the visual components, interactive elements, and content that will be displayed in the final product. In fact, they look like real apps or websites — which is very useful in terms of user testing. Users feel like they are interacting with the product directly, so you can expect them to behave naturally and provide meaningful feedback.
Branding
Branding in general is a set of psychological techniques and marketing or marketing steps that aim to promote a product or service to a specific target audience. First of all, branding starts with forming the brand.
Brand in this context means a kind of image that is created through things that become a value proposition or a kind of distinguishing feature that is attractive to customers and promotes and introduces our products or services in the market to form brand awareness. This image can be constructed in various ways which can be visual, verbal, tactile, etc.
Tools For Branding
- Colors
Color is a key element in creating visuals. Whether the visual will make the client happy or make them feel anxious, depends on the color. And that’s why color is such an important element for branding. The reason why users and colors can make or break a brand is because color has a serious impact on people’s emotions.
For example, blue evokes a sense of trust and power among its audience. And that’s why leading companies like Dell, HP, Intel choose this color to create their brand identity because as a technology company, they want to be trusted by their users. Similarly, red is energetic, and at the same time, also evokes hunger. That is why we will see brands like Coca-Cola, KFC, use this color for brands. In this way they can appear attractive to their customers.
The colors we choose have a serious impact on the customer’s mind. And that’s why when we build a digital product UI, we have to determine what kind of brand identity we want to create, and what kind of message we want to send there. After determining that, make a color choice based on it. - Typography
We have to start with the brand personality or brand characteristics first. Depending on whether we want to start with a cool and quirky personality or a serious personality, will greatly affect the choice of font. It should also be mentioned that the brand personality, brand voice, font, and color must be perfectly aligned and harmonious, to give the user a feeling of coherence or similarity and harmony. - Patterns
The use of patterns in UI design makes branding efforts seem difficult because most design patterns are widely used among other products. So how do you differentiate yourself from other brands? The simple answer: personalize typography and colors. So stick to the most common patterns that can make the website look general and easily recognizable. Because it violates this common design pattern it can surprise users and confuse them.
And that is why the use of patterns in creating a brand identity needs to be balanced. Be sure to use new elements, but don’t surprise the user too much, otherwise you may fail to gain the client’s trust, and that will have a bad impact on the brand.
UI/UX Implementation In PPL Project
Logo and design system
we create our own logo, and customize the color palette we make.
Visual Design
For our visual design, we apply the Nielsen 10 Usability Heuristic. We use this principle because this principle already includes the use of a good user experience and interface. The following is an example of how we apply each of the existing principles.
1) Visibility of system status
When users know the current system status, they learn the outcome of their prior interactions and determine next steps. Predictable interactions create trust in the product as well as the brand. We use toast from React JS as notification or feedback to the user after they done something.
2) Match between system and the real world
The way you should design depends very much on your specific users. Terms, concepts, icons, and images that seem perfectly clear to you and your colleagues may be unfamiliar or confusing to your users. We always use language that is generally used by ordinary people, or language that everyone knows. For example, a button to view product details, we give it the name “explore”, where ordinary people already know the meaning of the word.
3) User control and freedom
When it’s easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated. In this case, we always provide a back or cancel button to perform an action, so that the user knows that he has the option to return.
4) Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. We always use the same icons to edit or delete something, so the user doesn’t have to think that the action he is going to do is different.
5) Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action. To prevent errors from occurring, we provide notifications to the user if he makes an error in operating the application, so that the application is not damaged and the user knows what the error was.
6) Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed. One of our implementations is to create a label in each form input. So when the user types, the user doesn’t need to remember what he filled in based on the placeholder, but based on the label only.
7) Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. We implement this by providing an explore button on the homepage, so users can have shortcuts to move to the main features they will access frequently.
8) Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. We use a minimalist and pleasing design, with the right mix of whitespace, so the application doesn’t look full but still contains content.
9) Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. We give an error message to the user and tell the user what may have caused the action he took to be an error.
10) Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks. For this, we provide a special homepage for users who have never used our application, so they can see what they can do in this application.
That’s all from me, I hope you learn a lot about the use of UI/UX in making digital products. Thanks for reading! :D
References :
- 10 Usability Heuristics for User Interface Design (nngroup.com)
- UX vs UI Design Explained with… BAD UX Design Memes — YouTube
- 7 Key Factors of UX — YouTube
- Peter Morville’s User Experience Honeycomb | by Dane Wesolko | Medium
- The Building Blocks of Visual Design | Interaction Design Foundation (IxDF) (interaction-design.org)
- Top 9 UX Research Methods [The Complete 2022 Guide] — Maze
- What Is a Prototype: A Guide to Functional UX (uxpin.com)
