What we don’t talk about when we talk about user interface design process
User interface and user experience are two inseparable things. Plenty of articles, papers, websites have already talked about how important understanding the concept of user experience, user’s needs, and so on when designing the user interface. But the practice is more than that. Somewhat similar to my old article that talks about the fragility of Agile, in this article, I will write the realistic version of my user interface design reality. Also, some tips to make the user interface design process even more meaningful.
Disclaimer: I am still learning, so do not expect this guide to be 100% accurate. I also acknowledge that this article might be a very subjective one. I write based on my personal experiences, especially experience in the PPL team project (My team for the Software Project college course). But I hope this article may widen your eyes about the UI design world.
1. Why We Create Wireframe and Mockup?
I talked to a friend who is also a computer science student. I have taken the Human-Computer Interaction course, so I have been exposed to UI/UX things. On the other hand, he has not. So when we must work on a project for the Software Project course, he considered wireframe and mockup were just a part of the software engineering process. But he did not know the reason and impacts if we implement UI straight away without creating them.
So what is a Wireframe? A wireframe is like a blueprint for the UI. As you can see in the photo above, a person even draws it by hand. You still do not need fancy colors, gorgeous headers, or anything. Just a bunch of squares and texts to represents the main components and their layout structure.
Mockup is the next step of the wireframe. Here comes your wild imagination and design ambition to create color schemes, typography, and styles. It visualizes what the user interface would be.
So, why do we need them? Can we code already?
My PPL team’s project manager made the UI wireframe as the base for our final design. So throw away all the complex things first, and use a wireframe to validate if the design contains all the needs and requirements. The result is we know the pages we need to build, the components in each page, and how to connect all the pages.
A mockup is also highly beneficial for the team. Because the mockup was built by the design team together, it is a tool to merges and organizes team ideas. My PPL team also uses the mockup to share our vision with the stakeholders. Is the color represents their brand enough? Are there any disoriented pieces? Can they understand the flow of the design well? Questions like that can be answered by showing our mockups to stakeholders. Last but not least, my PPL team as a development team too, finds it is easier to implement the code based on the mockup that has been built rather than does some “code-in-the-dark”.
2. UI Design checklist
After we have learned why we need wireframes and mockups, now the question of how do we make it pops up. Because mockups eventually will represent your final design, it is necessary to make it well-designed. Siqi Fu listed three main signs that your mockups need some refactoring:
- Users spent more time performing tasks
- Users need more time to learn how to use the system
- Users give dissatisfied feedback and refuse to use the system again
To make it easier, I have made a checklist to make your user interface design better based on the most fundamental principles: Jakob Nielsen’s 10 Usability Heuristics.
- Visibility of system status — Always give appropriate feedback to keep users informed about what is going on.
In the first example, we can see it shows a success message after a user completed a task. Then, the second example shows a loading message when a user opens an information modal. Aurora Harley in NNGroup stated visibility means communication and transparency, which are critical aspects. By displaying a message as feedback in response to user operations, reduce uncertainty and prevent users from repeating the same actions because they weren’t sure if the first time worked.
- Match between system and the real world — Use words and concepts familiar to the user so the users can understand the meaning easily
Information should be presented in a way that the users feel familiar to match their expectations and experiences with real-world systems. In the first example, showing the events as a calendar makes the experience more enjoyable and much like in the real world where we mark on our board calendar.
- User control and freedom — Support the users to back out of a process or undo an action.
Allow users to quickly quit a task or backtrack on choices they made by adding a cancel button in popups, as shown in the example above. This design allows users to remain in control and avoid getting stuck.
- Consistency and standards — Maintain consistency within components to improve learnability
Consistency not only improves the ease to learn the system but also reduces confusion. The example above illustrates internal consistency where it implements consistent and familiar layouts for all the buttons. By being consistent and following standards, it makes users’ lives easier generally.
- Error prevention — Avoid unconscious mistakes by providing helpful constraints and warnings
Page Laubheimer from NNGroup defined the term “slips” as faults when users intend to perform one action, but end up doing another action. They are typically made when users do not fully devote their attention to the task at hand. Our responsibility as a designer is to design the system to be less slips-prone. For example, when a user has not filled all the required fields, do not blame the users for violating the null constraint after they submit the form. Rather, ask the user to complete the form before they submit it.
- Recognition rather than recall — Information should be visible so users can recognize it in the interface, rather than having to remember.
The first picture illustrates when a user wants to set up an academic term’s start date and end date, while the second when the user wants to set up an API Key. Before the redesign, as shown in the left picture, the user might not know the current academic term nor remember the last API Key they submitted. So please help them by showing the current information saved in the system :)
- Flexibility and efficiency of use — Provide personalization, like shortcuts, to experienced users that allow them to tailor frequent actions.
The flexibility and efficiency of use heuristic are about allowing users to approach tasks in a variety of ways. Search suggestions drop-down list is shown in the example designed to speed up commonly performed actions. Rather than having to type the full name, the user can just type in the keyword, and autocomplete suggestions show up.
- Aesthetic and minimalist design — Attractive design increase users’ satisfaction and long-term interest to remain in the system
The example shown how a color harmonies technique is used to create a color palette that pleases users’ eyes. The technique used in the above example is Split-Complementary. The split-complementary color scheme consists of analogous colors as base colors (the blue ones) and one color that opposite of the base color on the color wheel (yellow). The complementary color (yellow) creates strong visual contrast to highlight important parts of the system.
- Help users recognize, diagnose, and recover from errors — If an error happened, provide an error message that is easy to interpret and offer a solution
We can see that it is easier for a user to recover from errors if the error message is like the right picture. Rather than providing a technical error message, an error message consist of understandable suggestions if login input is not matched.
- Help and documentation — If possible, present the documentation or help content right at the moment that the user requires it.
Although it is better if the system can be used without documentation, it should be available. New users often require guidance when using a system and need clear and obvious options. So giving proactive help by showing instructions is preferable to just add a FAQ page. It is also essential for the tutorial to be short and to the point.
3. The Best UI Design Approach
It is not rare for designers to follow an approach or methodology when designing a user interface. The problem is, there are countless methodologies! You may have heard of User-Centered Design, Human-Centered Design, Activity-Centred Design, Genius Design, Design Thinking, and many more. Some are more rarely heard, like the Emotional Design or the Heart-Centered Design by Gould Studio. Alma Leora Culén from the University of Oslo has tried to compare several approaches, but plenty of them still was not covered.
Once, my friends and I were registering for a UI/UX design competition. We were completely confused about which framework we should use. Is it better to use UCD or Double Diamond? Which one is the best?
Later on, I learned that there is no single answer. Sometimes you need to mix some of the methodologies to fit your project. For example, my PPL team was constructing a website to help campus lecturers give online lectures, so we focus on the user’s goals to facilitate that. Does it mean my PPL team fully implements all the User-Centred Design steps? No, we also use Scrum, so time is not our friend to do comprehensive user research.
Unconsciously, the team also implements Activity-Centred Design. The requirements were divided into smaller product backlogs. In each sprint, the team focused on designing a solution for one or two activities that consist of several highly connected product backlogs.
Lastly, my PPL team’s project manager has already made the UI wireframe as the base. She is a UX expert. I know that from every UX feedbacks she gave us when designing the actual UI. So, I think my PPL team also mixed the methodologies with Genius Design.
The conclusion is you should understand your project’s resources (time and the people) and needs, rather than try to find the best approach and fully implement all the principles and steps.
4. Your Team Matters Too
One of the most common methodologies is User-Centered Design (UCD). Interaction Design Foundation defines UCD as an iterative design process in which designers focus on the users and their needs. The design team involves users in each phase of the design process.
Despite the greatness of UCD that claims it will produce a product that is more likely to meet users’ expectations and increase sales, it requires much time and energy. UI/UX is not a simple matter. But too focused on the product and users, we will be less appreciative of the design team itself.
Because the project size is not too big, my PPL team is both a design and development team. We are aware of the tight schedule and high tension, so we try to always appreciate each other for any success we achieved in every step. So even though user feedback is crucial, we also acknowledge our design team’s capability and responsibility.
Remember that sometimes users want many things that impossible to achieve but do not realize what they need :)
I think this principle reminds us that we design to benefit humanity and for the sake of the well-being of others. It includes our users, stakeholders, and ourselves. Furthermore, it accommodates our potential as designers.
5. Feedback is Part of The Process
Do not expect your first design will be perfect. Even when you thought your designs are already aesthetically pleasing, you most possibly still get feedback, either from the project manager, the stakeholders, or users. I know it is tiring, but being in denial will not improve your product nor yourself. Acknowledge that the person who gives feedback possesses valuable knowledge too.
Instead of complaining, reframe the feedback to open up new opportunities. My PPL team also often asks how we can improve. If it is impossible to implement the feedback right away because there are other more urgent tasks, we inform our concerns and confirm our understanding of the product with the person who gives the feedback. So, no defensiveness and minimum miscommunication for a long-term positive impact.
Okay, that is all. Sorry for any mistakes, super open to any feedback (including grammar! hehe). I love the way learning the UI design process has shaped me in so many ways. HCI is also my favorite subject, so I am interested in continuing the journey further. Giving regards to all the people who share the same interest as I do, good luck to you all and have a nice day! :)
