Jakob Nielsen’s 10 Usability Heuristics: Experiences in Comic
Thomas decides to open the website in the middle of the night. Immediately, all sorts of information just popped up in front of him. His heart races. The vibrant colors are fighting for their place, giving damage to his eyes. Some of the colors are too similar, making it hidden even though it’s an important message. The buttons don’t look like buttons. Thomas has never seen such a mess. He left. He has no intention of coming back to the website again.
Does that scenario ring a bell to you? Maybe it did. Maybe it did not. Here is one thing though, the look of the website or app actually matters to the people who use it. What people need to see is crucial for the developers and designers to show it to them.
Right now, my team and I are working together to make the website. I want to share with you the problems and challenges that happened with our visual medium.
Wait, why visual design?
“What do I need to do to get there?”
“Wait, am I on a different website now?”
“Is it successfully done?”
“Arghh, I can not see anything with these colors!”
“Oh no, I made a wrong click! What should I do?”
That is some of the scenarios that may happen. Basically, visual cues give out clues and relevant information without making it hard for the users. BTW, I will introduce you to 10 Usability Heuristics for User Interface Design. Also, in a simple, comic approach. Along the way, I will show how I use this things in designing a user interface for my software engineering project
#1 Visibility of System Status
What this actually means is that your system needs to open up to the user about what is going on with their life.. I mean, give the user the things they need to know like, did the download is making progress or not. Another example is giving them feedback after doing something, like “A new item has been created” after you create an item. This is implemented in my project
#2 Match Between System and Real Life
So, you know how the real world works. Use it as a guide! Mimic it! For example, use a real life picture of a recycle bin for the recycle bin icon and don’t use… Smelly boxes. Another real life example is using a shopping cart or shopping icon in online shops because that’s how a real shopping cart works. For my project, I used a trash can icon when deleting an object instead of other things because that’s how the real world works.
#3 User Control and Freedom
Users sometimes go to a state that they don’t want to be in accidentally. For example we may click on the record voice button and send it accidentally or pressed next when you are not done yet. Yes, this happened a lot to me and you don’t want your user to feel that. Your users need to be able to change back to their state when they accidentally do something wrong. Basically, your users need to be able to undo or redo something. For example above, you need your users to be able to cancel the big download. On the system that I am working on, the users need to be able to undo deletion or creation of objects easily.
#4 Consistency and Standards
There are two types of consistency in usability. The first one is internal consistency (that is consistent to itself) and external consistency (consistent with the standards everywhere). An example of external consistency is the gray disabled button. When a button is gray it should be disabled. It is the same with why the login button always stays on the top right corner of the screen or there are always a shopping cart feature in an online marketplace. It has become a standard. Internal consistency is pretty much like the external one. It is still required to have the same thing in most places. If a submit button is on the bottom right corner of the screen on one page, it should be too on the other pages. The gray button is one of my mistakes when I first designed the UI for the project (come to think of it, it’s quite obvious). The second one, I used a lot of different languages, different layouts for every page… Well, it’s a mess. But I fixed them in the end though!
#5 Error Prevention
Users make errors a lot. A lot of them are just because they clicked the wrong button, touched the wrong thing, typed a typo, or forgot to do something. It’s human nature to make mistakes but we want to prevent as many wrong things as possible. The way to do it is to prevent users from making irreversible stuff, like sending money, or deleting stuff permanently. In the website that I worked on I put a warning before users delete an object permanently, ensuring that they don’t accidentally make a big mistake.
#6 Recognition Rather than Recall
Which one is easier for you to answer: “Is bold the format that you need?” or “What is the format that you need?”? The first one gives you more information and visual cues of what you need that time. You recognize that is the one that you need rather than recalling the name of the format that you need. This is important in designing a user interface because we don’t want the users to use too much brain power to think of the last font that they used, or remembering the folders that they are in. Except, use visual signs like icons or shortcuts to make it easy for users.
#7 Flexibility and Efficiency of Use
When we first use a website or a software, we usually use the simplest way of doing things. For example, when we instagram we first “like” a photo through locating the “heart” icon, and tapping it. For an extensive social media user, they can use the hidden features, that is tapping twice on the picture, making it easier for them to accelerate the process. On my software engineering project, there are not a lot of things that we design to accelerate the design for users since it is our first time doing this software engineering project. But before we continue, let’s appreciate one of the most famous accelerators, the copy and paste shortcut (thank you ctrl+c, ctrl+v)
#8 Aesthetic and Minimalist Design
When we talk about minimalist design, minimalist doesn’t always mean we don’t put anything else on the page. It means we only provide the information that users need. When we design a search engine, we don’t need any other things except the search bar. That should be the main attraction of the page, the others should not compete with it. Information is not only things that the user can interact with. Animations, photos, and pop-ups bring more information to the table. In my team, since we don’t have much things going on, we can easily avoid this thing.
The second part of the heuristic is the aesthetic. Aesthetic can mean it is easy to read, to understand, and pleasing to the eye. Moreover, it should have a certain branding, or a certain guide! Well, my first attempt to design this website ends up to be a gloomy, desaturated, dark color. Since it is made for school, I don’t think it should be the case. School and prison should not share the same feel. After that, we changed it into a white and blue theme that is more suitable for the system.
#9 Help User Recognize, Diagnose, and Recover From Errors
Users made mistakes, but most of the time they can’t recognize it without proper information given. When users make errors, we need to tell them that there is an error, tell them what went wrong, and provide them a fast way to recover from the error. For example, when we are putting a form up and the user forgets to input one of the required fields we need to tell the user that there is an error. One of the ways is to not accept the user to submit it and change the field’s color to be red. The next thing required is to tell the user that it is a required field so they need to fill it. The third step is not only telling them what to do, they can bring the user directly to the empty field, making the user be able to fill it instantly. Other examples I realize as I am writing this is the red or blue underline when you typed an incorrect spelling. It highlights the error, and they provide you with a solution, that is automatically change the word to an autocorrected word when you hover on top of it.
#10 Help and Documentation
Well, after all that effort you give the user, the user might still need help. The amount of features the system has can baffle the user and they need help. Your user needs to be able to find the help he needs in the expected place. Not only that, the help should consist of what the user can do to solve the problem. If the user can not use your system, it is likely that he will not come back to the website again. One more thing, though. When we talk about documentation, it’s not always about not so obvious things. In my system, we need to tell the users that the email he gives to the system in the “forgot password” feature is to send them the recovery email. Sometimes, something like this is needed, not in the form of a certain page or chatbot, but in the form of pop-ups and text messages.
Conclusion
A well created UX will be the key for your user to be able to use the system easily and not give up because they are not comfortable using it. That is why visual design in UX design and software engineering is very important. Have fun designing your UX, everyone!
