- Published on
Ten Usability Heuristics for UI Design
- Authors
- Name
- Asfiolitha Wilmarani
- Trakteer
Back again with another dev log of Ajaib on DEX~ Today we're going to talk ten usability heuristics and how we applied them to our visual design.
Design Prep
It's very easy to jump in and start designing right away, but this is not a good habit to keep. Designing a user interface requires a good amount of research and thinking before you should even start. That's why we started with some benchmarking and prep research.
Our partner over on Ajaib kindly sent us some websites and apps we can use as references. These are especially helpful for interfaces of the features we weren't familiar with. They even sent us a rough sketch of a wireframe.
From these, tried to understand the flow of our application and connecting the requested screens to their respective feature. We also mapped out the content guidelines we needed in each screen. The output of this step was lots and lots of flowcharts.
After we generally understood the flow of our application, we finally got to start creating the wireframe. (At last!)
Wireframe
In this step, we created a wireframe while keeping in mind the personas we had made. We used minimal colors, only various tones of grey and a little bit of blue to indicate buttons. Well, we also needed green and red to indicate states, such as 'in the red' or 'in the green' for the graphs.
Usability Heuristics
Jakob Nielsen is the person who came up with this general principles of interaction design. These principles are called heuristics because they're not strict rules, instead they are broad rules of thumb of usability guideline1.
source: nngroup.com
How we applied them to Ajaib on DEX
What comes next is the high fidelity prototype. My team and I usually call these hifi for short. Using our wireframe as the base, we created a detailed prototype with the final colors and components in place.
I'll show the screenshots while trying to tie them to a usability heuristics and the consideration we had when making the interface design.
Visibility of System Status
Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time.2
This is the bottom tab bar. The icon and label will lit up to blue to indicate which page the user is currently on. In addition to this, the header of the screen will also show the current page's title so user can easily tell where they are.
Some interaction requires more time than others to execute. Take the login and register feature for example. After the user entered their information to the app, it takes some time before the login and register is successful. Therefore, we made sure to trigger a loading pop-up so that user knows the app is loading instead of freezing.
Match between System and Real World
Designers should endeavor to mirror the language and concepts users would find in the real world based on who their target users are.2
I'll be honest, it's hard to find a real world example of cryptocurrency trading because everything we're doing here is supposed to be done digitally. But, we tied it to other investment/trading apps where the user can easily see the graph view of how one product (in our case, coins) grows over the course of some determined time. We also used the colors red and green to indicate if the growth is positive or negative, just as how other trading apps would.
We did note that some trading app uses the color red and blue, with red indicating upwards growth and blue the opposite. But considering our target audience, we decided to go with the green and red colors because they are more familiar for our users, which are mostly Indonesian.
User Control and Freedom
Offer users a digital space where backward steps are possible, including undoing and redoing previous actions.2
Transactions done in this app may often involve a lot of money. To make sure our users get the sense of control over their money, we made sure to include a confirmation dialog before executing any transaction request. This way, our user can double check or go back to change something they might've made a mistake on.
Consistency and Standards
Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms.2
For the coin representation, we based it on existing cryptocurrency web app such as coingecko. We displayed the coin's icon, codename, full name, price, and growth all in one place because that's what users usually expect to see at a glance.
Displayed above is the comparison between our interface and coingecko's. Both essentially display the same information which gives the user a sense of familiarity.
Error Prevention
Create a system so that potential errors are kept to a minimum.2
We used a decent amount of icons in our design. This helps with quickly identifying things at a glance so users don't have to look twice to reach where they want to go. But, to prevent user from going astray, we also provided a short label for each icon to indicate what it's representing.
For example, on the bottom tab bar and other navigations. Even though each icon might be clear for returning users, new users may not recognize the icons immediately. That's where the label comes in. Another example is the full name of coins alongside its icon and codename.
Recognition Rather Than Recall
Minimize cognitive load by maintaining task-relevant information within the display while users explore the interface.2
Our coin search feature filters available coins as the user types on the search box. This way, users wont have to remember the entire codename or full name of a coin to find them in the search screen. It makes it easier to recognize a coin on the screen instead of having to search for the full term every time.
Flexibility and Efficiency of Use
With increased use comes the demand for less interactions that allow faster navigation.2
Amongst the persona we created is an avid cryptocurrency trader and a seasoned investor. We figured they would have their eyes set on some coins and trading strategies of when to buy or sell. Therefore, we provided a quick access to their coin watchlist on the home screen.
This way, users can easily navigate to the coins they are 'watching' and access the information they need or trade on the spot. We also made it easy to add more coins to the watchlist with a single button click.
Aesthetic and Minimalistic Design
Keep clutter to a minimum.2
Our application has a decent amount of screens user can navigate to. We grouped the main access navigation together at the bottom where the user's thumb usually resides. It's tucked away from the content, but still very easy to access when the user needs to navigate to another screen.
Recognize, Diagnose, and Recover from Errors
Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation.2
This screen appears when user is trying to search for coins that don't exist. We designed an error screen with a message that describes what happened, why it happened, including how user should act next.
Help and Documentation
When users require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing.2
The app we're building is a prototype for proof of concept of some sort, so our design is focused more to interactions and features. We do consider our users that may need assistance in using some parts of our app, as one of our persona is a complete beginner to crypto-trading. But, considering the scope and timeframe of the project, we decided not to make a help screen because we value a working software over comprehensive documentation, as per the agile manifesto.
TL;DR
We didn't jump in head first to designing our UI. We did some research and benchmarking, created a TON of flowcharts and built a wireframe before actually making the high-fidelity UI design. All these steps are essential to make a functional and usable UI design as well as a decent user experience.
That's it for today. See you on the next one~