User Interface Design
While making good programs is enough to appease programmers, it is not enough to please your customers. Think of the apps you use every day, why do you use that app in particular and not the ones owned by their competitors?
Chances are, the reason has to do with the app’s design. This is why nowadays, UI design has become crucial to attract users, should you be making a digital product.
If you’re wondering how you could make your application stand out in its design, then you’ve come to the right place.
Let’ start with the basics.
User Interface
A user interface is a space where your users can interact with the software or digital device that you created. The process of creating user interfaces is called UI design, and is focused on making UI which is pleasurable and simple to use.
There are three types of user interfaces
- Graphical User Interface: Users interact with a digital or virtual representation of buttons, forms, or other control panels.
- Voice-Controlled Interface: Users interact by using their voice.
- Gesture-Based Interface: Users interact with their body movements or gestures.
For this guide in particular, we will discuss the process of creating good Graphical User Interface, or otherwise known as GUI.
Wireframe
Wireframes are the blueprints of an application, it focuses on the layout and structure of the website rather than the typography or coloring. Wireframes are used to convey to your users or stakeholders how you plan to construct the product.
By making a wireframe, you can get a firm picture of how your final product would look like without wasting too much time thinking about the details of the software.
You can make your wireframe on paper, or on your computer. There even exists professional tools to make wireframes, such as mockflow or wireframe.cc.
What’s important to keep in mind is that the goal of wireframes is to visualize the layout of the website, and nothing more. The details within the wireframe would be filled out by later design stages, for example by making a mockup.
Mockup
A mockup is a high-level visualization of your application. Unlike wireframes, mockups visualize the final version of your product’s design, along with its basic functionalities.
Mockups are also more valued by investors or stakeholders compared to wireframes as they allow us to visualize the product with great detail.
Other than statically visualizing the pages of your application, mockups can also implement the basic functionalities of your project. This includes changing between pages, clicking buttons, and so on.
By making mockups, you can not only visualize the product to your stakeholders, but you can also organize the details of your project and detect faults early on.
You can make a mockup using any drawing tool you have at your disposal. However, designers nowadays most commonly use Adobe XD or Figma to create their high-fidelity mockups.
Nielsen’s Heuristics
Jakob Nielsen, a web developer from Denmark created 10 heuristics for UI design. These heuristics are not strict rules, but rather broad principles to improve the design of your app.
Let’s discuss these heuristics one-by-one:
Visibility of System Status
If users are aware of what is happening when using your application, they will begin to trust and feel comfortable using it. You should always inform users of the current status of the app, and should inform them of the consequences of their actions, if any.
Match Between System and Real World
Your design should feel natural, and should make sense to your target users. There shouldn’t be any inside jokes or jargons, your users should be able to navigate and complete tasks without looking up the meaning of a certain word’s description on your app.
User Control and Freedom
Your users should feel that they are in complete control of their actions. This includes actions that are accidental, meaning that you need to provide an exit as to avoid having the user going through a long and unwanted process. This exit should be clearly labeled, and can be easily discovered by the user.
Consistency and Standards
Your design should be consistent within and without. The design of your components within your application should be consistent. For example, cancel buttons should not have different colors on different parts of your application, as this would make the user confused and would view your design team as unprofessional. Your design should also follow the industry’s standards, as users use other apps other than yours, and have a set expectation of what a good UI design is.
Error Prevention
While you could have an error message to display to your users for every error possible, it’s better to prevent the errors in the first place. Either you eliminate actions which are prone to errors, or have a confirmation/warning dialog before they commit to that action. You could also add an undo action, or design clearly to prevent slip-ups from your users.
Recognition Rather Than Recall
Users need to feel at ease when using your application, they shouldn't have to remember extensive amounts of information to successfully complete any action within your app. This means that you should design an app whose information can be recognized instead of recalled. You should reduce the amount of memorization the user needs, and offer help to the user in the context of what they are doing, not with a lengthy tutorial that they need to remember.
Flexibility and Efficiency of Use
There shouldn’t be a single fixed action for all your users to complete a certain task. Each user is different, and thus have different methods of how they wish to complete a task. For example, a novice user might have to go through each process step-by-step, but experienced ones can skip some steps and take shortcuts to complete their desired action.
Aesthetic and Minimalist Design
Every interface should have a goal, a particular piece of information to display to the user. Any additional information given on that interface would distract the user, and undermine the primary goal. Your design should focus on the primary goal of that particular interface, and reduce the amount of unnecessary or secondary information that could compete with the visibility of your primary goal.
Help Users with Errors
Error messages should be visible, traditionally it is bold and red. It should also contain messages that users understand, not error codes or technical words that only developers get. It should describe the problem clearly, and provide a solution or a shortcut to solve the issue immediately.
Help and Documentation
In some cases, say a particularly difficult task, your users might need a helping hand to complete their action. You may provide your users a helpful documentation, which would act as a guide to help them.
This documentation should be simple to find, and should be in line with the context of what the user needs. It should also list concrete steps the user should follow, and avoid technical or vague sentences.
However, it’s important to note that you should try your best to make your design simple enough for your users such that this documentation is not required.
UI Design Tips & Tricks
After learning of the 10 heuristics of good design, here are a couple of tips & tricks to create a professional and enjoyable interface for your users:
Help Users in Accomplishing Tasks
Users care about getting their needs met, not how fancy your design is. Therefore, your design should be focused on getting your user’s tasks done. Users shouldn’t focus on the design of your app, but rather on completing their tasks.
Make Enjoyable Interfaces
Your design should be able to predict your user’s needs, this way they’ll feel welcomed as their experience is more personalized and captivating. You could also attempt to add elements of gamification to make your app more fun and engaging for the user.
Make UI to Convey Brand Values
Your design should also be emotional, and should display values such as trust, reliability, and quality. Websites with unprofessional design would leave the users wondering whether or not they can trust your service.
Conclusion
Having a good and effective design is detrimental in attracting customers. Developing a good app with a low-quality design would deter users from using your product, and would instead make them use products owned by your competitors.
To create a good design, we can first start by constructing the layout of our app with a wireframe, then following that with a high-fidelity mockup. We should also keep in mind the 10 heuristics of good design to guide us in making professional high-quality interfaces.
References:
