Usability and interface design for hardcore programmers

From the moment I started programming, I watched and thought about one particular phenomenon - as most programmers actively avoid everything about interface design and usability issues.


I understand where it came from. Most programmers love to program. They are ready to learn new features of programming languages, try new components and libraries, improve their algorithms and code architecture, or, say, optimize the structure of the data used. This seems very important, because the program is only as good as its codes and algorithms are good and how optimized it all is. And it is. But only if programs are written for programmers.

As you can probably guess, most programs are designed for users who know nothing about programming, computers, or other technical things. Whether you like it or not, you would like them to use your product.
')
And so we came close to the revelation. Hold on, now I will reveal it to you. Users see only the program interface, and nothing beyond. For the user there is nothing in the program, except for its interface with buttons, texts and other decorative elements.

Surprisingly, but it is. Users do not know or do not want to know about your complex algorithms, data structures, or the ingenious architecture of the application. Users see the interface and judge your program for the most part by the interface. They will be extremely happy if the program works as they expect it, corrects their mistakes and helps them to use it. But they will be annoyed if the program requires something from them that they don’t understand or need an action that they cannot easily accomplish.

If you are in such a position that you can only deal with specialized technical issues and are isolated from working with the interface, which is dealt with by the usability team or your other colleagues, you can skip the questions we are discussing here. If you are an administrator, you can focus on exploring the hidden features of your database to speed up the execution of queries. If you are a business logic programmer, you can focus on entity models, procedure transformations, and other internal processes. If you are a system programmer, you may want to optimize the algorithms and improve memory allocation or pattern implementation. You can continue to do what you do and think that design and usability are imaginary problems, more suitable for those involved in sociology and philosophy. But if you need to create interfaces along with the usual programming, you can learn some useful tips for yourself. Also, if you think that you may not know something or you just want to expand your horizons, I advise you to continue reading.

Knowing that many may be skeptical of these things, I will try to be brief. I’m going to give you some simple tips about the most common usability issues and how to avoid them. This will give you an understanding of what is happening in the minds of users, and what you need to pay attention to when developing effective interfaces. If you decide to use the tips given in this article when developing interfaces, you may notice that your programs and applications will be highly appreciated by users, without any noticeable changes in algorithms or performance optimization.

Well, then let's start our conversation. I will try that you would not fall asleep in the process of reading.

1. Do not speak geek users

Regular users are not techies and may simply not know what you want to tell them. You do not need to show them a message, for example, that some DLL library is missing or that a COM object cannot register a property. How does this help them understand and fix this problem? For most Internet users, words like JavaScript, CSS and HTML do not mean anything. They roughly understand the idea of ​​browsers, pages and this Internet of yours somehow all this connecting. The message " HTTP 404 Error " will be useless information for them. It is better to do something like “The page you requested was not found ”, this will explain a lot more to the user. Whenever you need to tell the user something, try to think about how most users will understand this. No one will call DllRegisterServer manually to fix your problem with the missing COM object . But if you tell the user that one of the program components is missing (and tell which one), they will be able to understand that you may need to insert a disk with this program or component and install it.

2. Do not write long texts

Because nobody reads them anyway. Yes, yes, remember the licenses to the programs. If in Windows + Linux + MacOS you add a line that you give your soul to Satan for free, 99.9% will still click the button further. The more text, the greater the chance that the user will not read it. Empirically, more than one and a half lines will be considered as a long piece of text, not a short message and, therefore, will be ignored. The reason is that users are impatient. Internet users will spend a maximum of 5 seconds to look at your page for the first time, before a bunch of text scares them off.

Users are only interested in solving their problems. Adhere to a policy of 2-3 words for the title and 5-8 for the description. Use the same methods to group several interface objects together using colors or separating groups with spaces. It is also a very good solution to have a special question mark, which users can point and get a detailed description of the item, if they need it.

3. Forget the documentation.

Users do not read the documentation. Seriously. No one does this if they have no idea how to use a program, part of a program, or equipment. The design of your program should be such that the path to complete the task is obvious. If you can not immediately start the program and start working on it, without having read the book before it means that you have failed to create an effective design.

4. Do not overload users with many elements

Do not use dozens of controls and controls on users' screens just because you think they may need one of them right now. This will lead to the fact that the user will be perplexed looking at all this and trying to understand what he needs to use in order to realize his plan. Define the most necessary options for user actions, everything else can be hidden and displayed by pressing the "Options" button. The user in this case will be less distracted and perform their tasks faster. Simplicity is good . For more advanced users or just curious there will be a window with options.

5. One screen - one task.

The design of each program window, page or dialogue window should be focused on one specific task. If there is a dialog box to upload a photo, do not add parameters to remove dust and scratches or print photos. This may be useful later, but right now the user only wants to upload a photo. When a user sees a large number of opportunities for his actions, he can distract from his task and start exploring these opportunities, easily forgetting what he wanted to do.

6. Create a simple and intuitive interface.

Nothing can annoy users as much as realizing that there is any function they need, but they cannot find it in your menus and dialog boxes. This is very annoying. Users feel that they cannot control the program. It's like one joke about web design : “ Know if you failed with the design if users need to use a browser search (Ctrl + F) to find your search bar .” It is very important that the idea of ​​the program is simple and logical, and then the navigation design will reflect this model. Combine functionality into logical groups. Give users tips on how they can change the default settings. Try to make it so that the user can easily guess where he can find the functionality he needs, of course, if it is implemented.

7. Highlight important items.

On the screen or page should be highlighted elements that are crucial for the performance of basic functions. These elements should be easily distinguishable as basic controls. Auxiliary elements should be identified as such as simply as they are. They should be easily located on the page, but at the same time clearly perceived as auxiliary. This can be implemented using muted (darkened or clarified) colors, smaller font size, or simply be separated from the main elements. When the user knows what is important and what is not, he will be able to complete the planned task more quickly. If all items look the same, it can confuse the user. The user must either try them all, or try to understand which elements are more important and which are not. This slows down the work and requires additional effort from the user. One very important rule in interface design is: “ Don't make me think .” This should be taken into account while working on the interfaces.

8. Focus on user actions, not program features.

Users want to use your programs, because they can solve their problems with their help. Users think about tasks and goals, not about the capabilities of the program and the data structure. Sometimes developers think that the user interface is only a thin shell for the program part. As a result, interfaces reflect structure and consistency, but only in the eyes of the developer. Users will not see this beauty. For most non-geek users, a logically built interface built around data structures and working with them can make it impossible to work with the program. Think of yourself. How many times have you tried to find any installations in one of the programs that you use every day, didn’t find them, and tried to find tips on the Internet? You are most likely lost account. Personally, I am yes. Think about how tasks and actions look to the user. Think about the most common parameters or user actions that he will use when performing his tasks. Allow users to do this in one click, rather than bury them under a pile of menus and dialog boxes.

9. Transfer frequently used functionality to the first place.

The easiest way to simplify and speed up the user experience is to locate the functions that they most often use at the very top level. Think which ones might be the most popular in a particular case. Watch users. Ask them. Implement the possibility of collecting statistics in the program. Place the most necessary functions on the top level of the program and transfer the rest to the auxiliary menus and dialogs. If users have everything they need right away they will be happy, because they need to put in a little effort to work with the program and they can quickly find everything they need.

10. Minimize clicks

One very common usability mistake that is probably obvious is the hiding of interface elements in unnecessary submenus and dialogs. If you want to change something , you click on the button to call a dialog where you change some value and then you go to the second dialog box where you need to tick, then you need to double-click the OK button to close both dialog boxes. You could see these menus many times. Psychologically, such an interface will seem closed - as if everything is hidden in closed rooms and storerooms. Here is my suggestion - free your interface. Get rid of both conversations. If you do not have fifty different settings, bring them into the main dialog. Users do not have to click a few times to check or change some values ​​or settings. They will see them immediately and decide if everything is in order. Such an interface seems open. The user will feel that the program gives him control over himself, and does not train his memory and attention. It doesn’t matter if there are more items on the control panel, if it improves the user experience, then it’s worth it.

11. Avoid unusual interface behavior.

One of the mistakes that will confuse users with certainty is the use of non-standard interface elements with a non-standard look and what is even more serious with non-standard behavior. Usually this can be seen on the sites with the original design, where webmasters can give an outlet to their creative. The result is a great design, and beautiful and functional. But sometimes the creative takes on usability functions and thereby creates a barrier between the user and the program. Examples are easy to find. For example, links without underlining or when they have a color that is slightly different from the color of the rest of the text. Or, for example, areas of the screen that look like most others, but that react to a click or open another window. Here is one example of the Flickr site. When you want to change the caption of a photo, you can spend a lot of time to figure out how to do it. I spent a lot of time before I accidentally clicked on the current title. This text looked as usual as another on the page, but when pressed it turned into an input field. This is not intuitive, and it is difficult for the user to guess about this behavior. Such cases should be avoided. When the interface reacts differently than the user expects from it, this is bad. Knowing this, you should carefully combine creativity and usability, trying not to harm the convenience of the user.

12. Create a uniform design.

It is very important to have a uniform design in all parts of your product. Define styles, colors and interface elements and use them equally in your interface. Determine how the data entry elements differ from static elements and system messages. Decide how to highlight important elements and how to place elements on the screen to make it easier for the user to complete their tasks. Determine the basic principles of the interface and follow them everywhere. Do not make every single screen with a unique design. Do not try to impress users by using colorful interface elements wherever possible. Do not change the already defined font sizes, colors, or element behavior. If blue is used for system messages, and gray for user input, use this pattern everywhere. When users recognize and understand your design concept, they will feel at ease, and confident in all parts of the interface, even if they have not seen them before. If each screen has its own set of colors or a different behavior from other screens, users will have to spend their time learning and understanding it. Naturally, studying new behavior, they can forget about the old. This experience will be painful for users.

I always recall one example of bad interface ideas - the Samsung mobile phone interface. Their interface aims to impress the user with colorful icons, messages and animations when they are played with this phone in the store. You can fall for this trick, but then your opinion may change. Designers used a large number of colors on each screen, which may differ in other parts of the interface. In one place, the input is red, and the system messages are green, in the other orange and gray, in the third blue and violet. Perhaps this is good if you let the child play, but if you are an adult, you may not like it very much. You need to understand the concept for each screen and remember it. This is completely wrong. In my opinion, it is better to identify 2-3 colors and use them everywhere.

Use the same looking menu everywhere. Use the standard "Ok" and "Cancel" buttons. Never combine auto save features with the need to click the Save button.

The uniformity of the interface will save your time during development and more importantly reduce the amount of time and effort the user will have to start working with him.

13. Remove unnecessary items.

Take a practical look at your interface and ask yourself if all these elements are necessary for effective user experience. Does the text explain the functionality that the user can use or is it so that the user is not bored? The less unnecessary and auxiliary elements will be on the screen, the more simple and open it will look. Should all elements be visible immediately? If only some of them are needed, it may be worthwhile to transfer rarely used items to the Advanced dialog box. The less unnecessary elements the user will see, the easier it will be for them to work on their tasks.

14. Do not ask a lot of questions.

In the process of communicating with the user, try to minimize the number of requests where the user must make a choice. If this is the moment when the user must answer pre-defined questions, give the opportunity to choose the optimal answer by default . Sometimes, programs are asked to make a choice during the first run. This is wrong, since in most cases the user will answer the questions posed incorrectly, especially if the answers require specific knowledge that the user can get only after having experience with the program. Therefore, if you need to define any settings before starting the program, offer the user standard settings and if he already had experience with the program, he will change the necessary properties, and if not, it will not introduce him to a dead end and he will be able to use the settings you defined. When creating such questions, try to look at them through the eyes of the user. I think you should not ask at the very beginning about the data formats, synchronization and functions that the user has not yet encountered. Define the settings as it would be useful for the novice user (say, including the maximum number of hints and tips) and allow users to change these settings over time.

15. Use a small set of colors.

In your interface, try not to use a lot of colors, 2-3 will be enough. This mainly concerns web pages . Define colors for the main text and user input. Use these colors on all pages or windows of your application. If you use orange buttons with red text, use them everywhere. If you look at the products of large companies, you can see that 2-3 colors are used throughout the entire product (black and white are not counted). If you need a bad example, look at the websites of online stores, there will be a lot of bright colors to attract attention. From a marketing point of view, this is probably a good thing, but from a usability point of view, this is terrible.

16. Adapt to user thinking.

Regardless of which design concept you stick to, rate it critically. Look at it through the eyes of users. Imagine a regular user, with the knowledge of working in the same programs as yours. Will they be able to immediately understand the idea of ​​your design, if they are neither developers nor designers and do not have extensive knowledge of working with computers? Will they be able to guess what this or that function is doing or is it worth adding a little explanation? Will they be able to find any settings, just imagining where they should be? Is the behavior of your interface similar to the behavior of other programs or is it different and will it take time to adapt? Is your interface and behavior similar to other similar products? The greater the difference, the longer it will take to study (for example, Ribbon in MS Office). On highly competitive websites , a user can simply close the browser if they don’t understand how to handle it and can switch to another similar site in just a couple of clicks. For most users, the design of your product determines its essence. Not complex algorithms, perfect data structures or a great architecture, but a simple interface, its appearance and behavior. Exactly this. This is what users will encounter before they learn about your excellent algorithms and program features.

The above ideas are the basic concepts of interface design. They are simple, but completely absent in a large number of applications currently available. If you decide to apply these ideas in your project, you can significantly improve it. Undoubtedly, there are deeper studies on this topic, including studies of user behavior, the impact of color, copywriting, interface adaptation for different social groups and cultures, and much more.

This article is a translation and adaptation of the Interface Design and usability article for hardcore programmers from the DeveloperART blog.