Step by Step to A Good Design
Have you ever seen a user interface where it looks so so good and convenient to use that you wonder how can someone make such a good design? Well, it takes a long journey to create a good design, and I’m here to guide you through one! Let’s go!
Creating a Wireframe
Assuming that you already know what you’re going to make, you can make a wireframe to layout the interface. According to careerfoundry.com,
A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.
As wireframe mainly focusing on features layout and functionalities, we should keep styling, graphics, and colour minimum. The purpose of creating a wireframe is to make sure that we focus on the functionality first without spending too much time thinking about what styling will make it look good. Seeing the features on a wireframe will also allow you to see how they all work together and decide if they fit each other.
Other than that, wireframes are quick and easy to make. You can make it by only using a pen and paper since it doesn't require any special touch from software. Keeping the wireframe minimal also helps to test the flow to reduce bias that may appear from the styling.
What is included in a wireframe?
Elements that are typically found on wireframes include logos, search fields, headers, share buttons, and pseudo-Latin (Lorem Ipsum) placeholder text. Typography and imagery should not be a part of the wireframe. Usually, wireframes are created in grayscale.
There are three types of wireframes:
- Low-fidelity wireframes
This is the one that can be created with only pen and paper. They tend to be fairly rough, created without any sense of scale, grid, or pixel accuracy.
- Mid-fidelity wireframes
The mid-fidelity wireframes show a more accurate representation of the layout but still avoid distractions such as images. It is the most commonly used one and is usually created with the help of a wireframing tool.
- High fidelity wireframes
High-fidelity wireframes may provide relevant content and not just a placeholder. This added detail makes high-fidelity wireframes ideal for exploring and documenting complex concepts such as menu systems or interactive maps. It can also help designers build a faster high-fidelity mockup since it looks more similar to the end product.
Here’s an example of a high-fidelity wireframe from my team’s project for PPL where we create an application for storing used cooking oil to get incentive:
When you’re done, we can move to the next step, which is creating a mockup!
Creating a Mockup
What is a mockup? According to UXPin,
Wireframes are the skeleton. Prototypes demonstrate the behavior. Mockups are the skin.
So in this step, we’re going to give styling and more accurate content to the design we have made at the wireframe phase. Mockups reflect the design choices for color schemes, layouts, typography, iconography, the visuals of navigation, and the overall atmosphere of the product.
Here’s an example of how the previous wireframe changed to a mockup page:
You may have heard a ‘prototype’ term; what’s the difference? Mockup focuses on final styling, whereas a prototype is a term for interactive, clickable page to test the application flow. The prototype that is created with a high-fidelity mockup is called a high-fidelity prototype.
Nielsen 10’s Usability Heuristics
Aside from the process, there are some things every designer should consider before making the final design so that the design not only visually pleasing but also pleasing to use. One of the famous rules is Nielsen 10’s Usability Heuristics, described by Jakob Nielsen 27 years ago as the general principles of interaction design. These principles were developed based on years of experience in usability engineering, and now they’ve become rules of thumb for human-computer interaction. So let’s start breaking down the rules!
- Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time
As a user, we like to be in control of things to feel secure. Therefore, a good design will provide us information about what is going on and feedback in every action we do to inform that the action is done. For example, after someone making a transaction, there should be a page where it displays the transaction's status, whether it is failed, successful, or on hold. This page from my team’s project could be an example:
2. The Match Between The System And The Real World
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
This part is also a practice to empathize with users. As a designer, you cannot forget that your design will be used by many people, and don’t assume that your understanding of words will match your users. Avoid using technical terms that might sound unfamiliar.
3. User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
People do make mistakes. The same thing might happen with your design. So, provide an undo or cancel button to let the user know that the design “got their back” if they accidentally make a mistake.
4. Consistency And Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Don’t forget that your user uses other products as well. Avoid making something that already common different; you will only confuse your users.
Another example from outside my team’s project can be seen in the e-commerce website header where they all have a search bar, logo on the left, a shopping cart on the right and a button to access the profile.
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.
Based on Don Norman’s book, there are two kinds of errors created by interaction with a user interface: slips and mistakes.
Slips: The user wants to do an action but not paying enough attention so that they perform another one.
Mistakes: User’s incorrect mental model of how the system works (misunderstand). They succeed in doing a task but leads to a different result than expected.
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.
It takes a lot more effort for our brain to recall something than to recognize something. So, for example, google search provides typing suggestions when we want to search for something. As we start typing, Google Search suggests the relevant query, and this helps users find the relevant query in less time.
7. Flexibility And Efficiency of Use
Every user may have different needs. Therefore we need to make the design neat enough for everyone to complete the goal quickly. In addition, using shortcuts can be helpful for someone who is experienced with the product. According to NNgroup, there are two different aspects to making a flexible and efficient system:
- Multiple methods to accomplish the same task according to one’s preferences
- Accelerators that don’t slow down inexperienced users, but speed up advanced users
The example below shows accelerators that can be used by users — usually experienced one —to input text using a swipe gesture over the letters, rather than tapping each individual letter.
8. Aesthetic And Minimalististic Design
Avoid irrelevant information in the design. Ensure that everything you put into the design has its own purpose and takes part in the user's main goals. You can use whitespace to highlight the feature.
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.
Ensure that the error will not show up as confusing words so that the user will recognize them. As a good designer, you will also need to help users recover from it.
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.
A new, unfamiliar system should provide documentation for users to figure things out. It can come in the form of tutorials, a help menu, or an FAQ. Apps like Trello, Slack, and Duolingo are doing a great job at onboarding their users.
Websites and applications can offer two types of help: proactive and reactive. Proactive help is provided to prevent users from encountering a problem. In contrast, reactive help includes materials such as documentation, videos, or even tutorials for those situations when users have an issue and seek out advice to address it.
The example below shows proactive help that appears in the form of overlay when users open a page to show the newly launched feature.
Designing a product is not just about visual, it is also important to pay attention to user needs and comfort, therefore Nielsen’s 10 Usability Heuristics can be used as a tool to help you think about the user when designing an interface.
Well, that’s it! We are at the end of the article, and now you are ready to make a good design! Happy designing!
Reference:
