Some rules are used to design the interfaces that we encounter daily

Oct 9th, 2017

User interface (UI) is something that we use every day to communicate with computers as well as on mobile devices. It could be software, buttons, sliders, scrolling… In order to make the “interface”, programmers must follow certain rules before doing the software. Recently Nexle has researched the issue of UI design and today Nexle will share with you two sets of principles commonly used in this area, namely DOET principles and Nielsen principles.

ui-design software

I. The importance of the user interface

So far, we often think of interface as what is on the software of the computer, the phone, the tablet. This is not wrong, but it is only a small part of the concept of “user interface”. The layout of the button on the remote, the layout of the lights and the scraper on the microwave, are all user interfaces, as long as they create a way in which humans can interact with the machine. The interface of the software we are talking about is called the graphical user interface (GUI).

So why UI is important? With a system that has a bad interface, in most cases it will be considered a failure, no matter how good or otherwise you design the features. The reason is that you can not create a good enough way for users to interact with your system, so how can they use it effectively? Or if your interface can not self-trust, does the user have a deal with you? Therefore, the interface is something that designers / programmers are very interested in and they always find ways to help users feel as happy as possible.

bad-web-ui-design

Are you brave enough to buy stock from a site like this?

While talking about the two underlying principles, I mainly take the example of software for you to imagine as it is familiar to us, and also because of the field that we are studying to apply DOET mainly about software.

II. DOET Principles

This is a set of principles created by scientist Donald A. Norman during his research into the problem of human-computer interaction in a project called “Design of Everyday Thigns” (DOET). for the things that are used daily). It is used by designers to integrate and evaluate whether their interface is really useful and makes it easier for people to interact with the computer. It includes the following elements:

1. Complete requests from the user

When designing a piece of software, people will find out what the user needs to use. For example, when you run a computer application in windows, use cases that can take place are: add two numbers, subtract two numbers, multiply two or more numbers, divide, and exponentiate. To be considered effective, the interface of this computer app must meet all of these situations. This is also a leading factor in DOET principles. Imagine if a software can not do what you want it to do, just throw it away.

2. Using both “Knowledge in the Head” and “Knowledge in the World”

Let’s first take a look at these two notions. “Knowledge in the Head” is a knowledge that the user already knows, has got the concept in his head without the designer having to say or mention in the software interface. For example, when you see a computer, you know how to type the keyboard, how to use the mouse.

Meanwhile, “Knowledge in the World” is the opposite: it is knowledge unknown to the user, and will need to be noted on the interface for users to learn how to use. For example, when you first run the game, designers / programmers will show you how to use the app, how to control the character, what button to shoot, what controls to play, how to rotate the view what to do. Similarly, Apple has integrated OS X’s multitouch gestures, because it’s not the same as what people used to know with their mouse.

ui-ux-design-software

“Knowledge in the Head” does not require the user to learn, while “Knowledge in the World” does. That is why, for the first time, things in “Knowledge in the Head” will create a sense of familiarity, but in return we may lose time to remember what is the normal use. can apply.

With “Knowledge in the World” it will take time to learn, but learning will become simpler when we have specific instructions. And once you get used to it, the things in “Knowledge in the World” will help to bring about higher efficiency. Just as with Apple’s multi-touch touchpad, it will take time to learn how to use it, but once it’s done, it makes it much easier and faster to even become one. The main operations daily use hundreds of times. A good application interface will find the optimal combination between the two types of knowledge mentioned above. To complete the task quickly and simply, does not require the user to learn too much but still ensure the performance of interaction.

3. Simplify user action

Everyone likes simplicity, nobody likes to go for something that is long overdue. Even if your computer, smartphone, tablet, too, if you look at an application that has a bunch of buttons, then we can immediately think of abandoning and looking for another app. Whether your application writes good, whether it is “divine” and how fast it goes, if the steps to perform a task are too complicated, the user will break up immediately. That’s why programmers / designers need to simplify them. According to Norman, there are a number of simplifications:

Psychological support: Helps users feel less “panic” when looking at the interface. One obvious example is the combobox – which is a button that you click on it will appear some options in it for you. Programmers can use the combobox to let you select the area code if you need to enter a phone number, while on the subtleties use the combobox to move messages between subforums together, or to select prefixes for posts.

Reduce the load on which the user must remember. For example, in the DOS environment, to copy, you must remember the cp command, remember its syntax, and in Windows, we just right-click, select Copy is complete. For example, when you need to enter a date, a small box with a date, generally a calendar, will appear for you to choose the date. You do not have to remember what day it is, what week or month.

testing-ui-ui

Automation: This is something we are very familiar with. For example, when you sign up for a new account on Yahoo or Google, these two sites will determine your location based on your IP address. Or, like the Android devices, when you first bought a phone with a SIM card or a Wi-Fi connection, the device recognizes the timezone and presets you do not need to do anymore.

Change the nature of the task: On older browsers, the search box will be separate from the address box. Chrome, Firefox, Safari, IE both use the same cell for both tasks, and you will not have to think about where to enter them.

4. Make everything as clear as possible

With the main features, bring it to the main interface, where users are most visible. Do not try to be “dangerous” and hide it in hidden menus in the application, which does not help the user at all. It also confuses the user and is annoying. Making everything clear is also a way for users to know what features our system supports, and how to use them.

5. Narrowing the execution distance and evaluation distance

When you first approach a system, some software, users will face two “gaps” (Gulf) that they have not been able to use the system successfully, that is:

Gulf of Execution: What should a user do to make a feature run?

To reduce the distance between the user’s questions and the interface, the designer can use something called “Affordance.” For example, when you see a button, you will know that you need to click on it. Or with a slider, you’ll know you need to drag the cursor to change the value, and drag to the right to increase the value, while dragging to the left is reduced.

Look here we can easily know which button to hit, which one to slide

Look here we can easily know which button to hit, which one to slide

Gulf of Evidence: How did the user know that the feature was running exactly what it was designed for?

In this case, we can get tactile feedback on smartphones as examples. When you type the keypad or press a button, the smartphone vibrates to indicate that you succeeded in touching the button. Audio output is also a widely used response. The task of the designer / programmer is to help users answer these two questions as clearly and easily as possible.

6. Arrange properly

In the beginning a user will have a model of how something works. For example, when you buy something in a supermarket, the steps you will take are to look at the> checkout> checkout> checkout. Apply it to the interface of an online sales site, you can not force users to view the price and then view the goods. You have to follow the order and model that users think, then the use of new interface to achieve high efficiency.

7. Harness the power of restrictive measures

Constrain, this word sounds terrible, but it’s not really something serious. “Limited” is a refinement on the interface so that something is no longer usable, temporarily or for a long time. Since we want to put restrictions into the application again, why not let users want to do something? That is because we want the user to choose the most accurate option, reducing the error on later.

There are three types of restrictions that are commonly used today:
Physical Limitations: For example, many software now use radiobutton selectors to select something, such as gender. You can only choose either “Male” or “Female” but you can not type keyboard to enter. This will avoid the situation of typing wrong, typing not the right of the programmer.
Thinking about thinking: In an interface that allows you to enter personal information, if the first cell is labeled “Last,” the second cell has “Name,” and you know what to type. If the two cells are not labeled, you can enter the name in the Last Name, Last Name, and Last Name boxes, respectively.
Cultural constraints: This is a bit complicated, but the simplest example is color. If you see a red button, you will think that clicking that button can be dangerous. If you see the green button, you know that button is for approval and continue. Choosing colors also depends on the culture, such as in Russia, people see red as “positive”, then you should not fill the “Delete” with this color.

8. Design must take into errors

The human being must make mistakes. It is obvious, and the software must be designed to take care of the user’s faults, and also the errors that arise from the application itself. Essentially the key here is to remove the error from the root and not let it happen. But nothing is perfect, so when it fails, the programmer must provide the user with a reasonable notice, at least pointing out what the user should do to fix the error, or What is the error? If possible, attaching is an effective way to get rid of that error.

Example 1: You just finished writing a 50-page report in Word. Suddenly the computer went crazy, and Word was closed, so you lost all your posts because it was not there. Fortunately, Microsoft has built-in AutoSave and self-healing capabilities so you can save your content.

Example 2: The user entered the wrong number, the phone number field is only entered but they enter the letter again. At that time notice should appear “You only enter the number, please do again”. If only the message “Wrong!” Users do not know what they are up to and what they should do.

Example 3: When you are downloading a 50GB file, when loading 99%, you miss the close button of the browser window. If closed, you will lose all downloaded data. Fortunately, browser vendors have integrated a dialog box saying “you are downloading a file, closing the browser is going to lose it.” At this point, if you just hit the wrong button to close the click Cancel button to return.

9. Standardize as needed

There are things that people usually do very messy and do not follow any method. If for every software, an application interface type then the user will be very tangled. This is the time when we need a common standard to create that unity. For example, with Windows, in the menu bar of any application, the first button will be File, and finally Help. On an Apple Mac like that. Just like on Android, Google offers a theme called “Holo” with two black and blue features for programmers to apply this design to their app.

III. Nielsen Principle

Jakob Nielsen in 1995 released a set of principles that he had studied and demonstrated that it would be good for an interface when designed under these standards. Basically, the 10 things Nielsen makes are pretty much the same as the DOETs, just a little bit about how they are expressed and how they are judged.

1. Always show the status of the system

The interface must inform the user what the system is doing, how it is doing, where the work is going, and the message must appear within a reasonable time. An example that we often see is the progress bar that appears when copying files whether you’re OS X or Windows, Linux. When you open a web page with a color bar running to denote the% of sites that have been downloaded is another example. The reasonable time here is that after you copy and paste, the progress bar will appear immediately, not after 5 or 10 minutes.

windows

2. Make the interface the same with real life

The interface should speak “speak the same language” to the user, from the use of words, sentences, notices, labels, notes must be easy to understand with the user object targeted. For example, with a professional photo editing software like Lightroom or Photoshop, you can use words like “exposure”, “aperture”, “speed”, “white balance”. But with simple image viewers for general users, we’ll use words like “brightness”, “color”, otherwise, the user will not be able to understand what the function is and how it works.

phottoshop

The interface of Photoshop with complex and sophisticated words in photography, but users look at them as they are accustomed to these terms.

iphoto

And here is the iPhoto app – an application for general users – so the terms are simpler and easier to understand, although both serve the same purpose of photo editing.

Similarly, the task must be done in the order that the user expects in life. For example, if you register for a flight, you will need to go to the ticket office, speak the name, say the country you want to fly, say the date and time. When placing an order, the order must also be retained (two points can be refined) to make the use easier and more intuitive.

3. Give the user control and freedom

Users are often confused, and the interface designer should provide an “escape” in case the user misses something. Extremely easy to see: Undo and Red buttons in a variety of applications, from browsers, Word, Excel to Notepad and mobile apps.

4. Promote unity

In a system, things that have similar features need to be unified in terms of color, location, display, scripting, etc. For example, on Windows, the entire window close button is red. The white diagonal is located in the upper right corner of the window. Or in Microsoft Office, all the text formatting tools such as Bold, Italic, fonts, font sizes, headers are on the Home tab, regardless of whether you are using Word, Excel, PowerPoint, Visio or whatever. By unifying, we help users interact with the interface more quickly, to remember many different situations.

5. Limit errors

Like DOETs, systems and interfaces need to be designed with the mind that the user is always making mistakes, and the important thing is to be able to cover most common bugs. Designers / programmers also need to minimize the source of the error.
For example:
– Combobox, radio button, checkbox: Allows the user to select only certain things assigned by the programmer or designer, but can not manually enter new ones (eg,
– Disable any interface components when not needed.

6. Provides flexibility for users

When you first use the computer, to copy something you usually do? Select the content or file, right click, select copy, go to the other, right click, select paste. Later on, as we have more experience, that operation is greatly simplified by using the keyboard shortcut Control + C, Control + V. This is an example for the Nielsen 6th Principle. In addition, when the system needs to change the interface, retaining the flexibility as the old version is essential, otherwise the user will feel very disappointed by losing something they are familiar with.

7. Down load what users need to remember

To do this, designers and programmers need to make sure that users can see all the major features easily. Users do not have to remember complicated things when using the components in the system. Programmers and designers need to be aware that seeing and recognizing is better than recalling something that has happened. Applying graphical symbols, password hints, using colors to announce something has been completed … are examples of the 7th principle because it lets users know that the feature is and what to do. As with the graphical interface, it has opened up a whole new era of computing and anyone can use a PC, while at the command line interface (CLI), few people can access it. with computers it’s too hard and too many things to remember.

GUI and CLI

Which one do you prefer? User friendly interface or black command line interface and have to type a lot?

Another example: To find a student, use a name, but do not force the user to remember the student code, although we can provide additional code search options.

8. The interface must be aesthetically pleasing, beautiful and relevant

Nice, that is what everyone wants, and beautiful interface is always appreciated. Take a look at how Apple designs iOS or what Google does with Android, all around a nice word. When using something aesthetically pleasing, the user will feel more satisfied and excited. In addition, the information provided to the user must also be relevant, otherwise it is also equal. For example, in a message that pops up before saving the file, what we should include is the question “do you want to overwrite the file” or “do you want to save it here”? Not a long article on how to save files, harm when not using the software properly (!?).

9. Helps users identify and fix problems after an error has occurred

Notice when errors are easy to understand and let the user know what the error is, but do not show a pile of error code up. That will frustrate the user. In addition, the interface should tell the user the possible measures to overcome the error, not to wear what the user wants to do.

erro

Windows 7’s “blue screen of death” error message is too late, causing people to panic and not know what to do or what will happen. As for Windows 8, Microsoft changed it to tell us that “the operating system is collecting errors and will restart the machine for you”.

10. Provide help, manual documentation

You can see that any software, no matter how simple, has a Help or documentation, at least one line saying that it should use the how soft. This is the last way users will look when they can not do something. Imagine if you use software that, when you encounter bugs, you can not find any help, that’s bad. Depending on the complexity of the interface and the software, you will be able to edit the documentation and the corresponding help. Tooltip box – a small message that pops up when we hover over a button, a box, a dialog box, etc. – is also a help, not just Help.

Help using the iPad interface

Help using the iPad interface

These are two of the commonly used principles. Hope it will help you understand more about how people make the interface that we use every day. Having fun!

(Reference on tinhte.vn)

Recent blogs