Information blocks intuitive interface. Provide easy management options

This is a banal truth, a statement that does not need additional proof: the easier your landing page is to use, the more people will turn to it to make a conversion action.

An essential part of what is commonly referred to as "ease of use" is the user's intuitive understanding of the web interface of a landing page/individual page of a site. This is how we approach the definition of intuitive design: when a visitor sees such a design, he knows exactly what to do.

The main thing in this design is that it is "invisible". will be considered intuitive, if users can focus on the conversion task without being distracted for a second by thought. intuitive clear interface is an interface that unmistakably guides people to take the action the marketer needs.

Intuitive design focuses on positive user experience (User eXperience, UX), which, after all, makes it almost synonymous with scientific design.

The problem with designing intuitive interfaces: intuitive for whom?

Why are there so many landing pages/sites that make people puzzle over the conversion task? Why not make all web resources intuitive? Isn't that what everyone wants - a potential client, a marketer, a web designer?

The fact is that creating an intuitive web interface is not an easy task: all people are inherently different, having different levels user experience, and what looks simple to one may be a difficult, almost impossible mission for another.

There is no objective criterion for intuitive design: only the user himself feels whether he understands what to do on a web page or not.

Most landing pages/sites are designed with good intentions: no one wants to make life difficult for visitors. These landings even intuitive- but usually designer! The average developer rarely takes the time to see how the average target audience will use their web product.

A person always looks at the world from his own point of view, and when he designs something, he unconsciously constructs this object (it doesn’t matter if it’s a stand-alone landing page or a SaaS platform as such) “for himself”, that is, for people who have about the same level of computer skills, approximately the same experience in using interfaces of this type, etc.

It is important to understand this: development of intuitive design begins with understanding the users (target group): you need to figure out what is intuitive for them and what is not.

Understanding the target audience is impossible without knowing the concept of "current / current level of knowledge against the required level of knowledge" (Current Knowledge VS. Target Knowledge).

Current Knowledge VS Required Knowledge

To begin with, people appear on your landing page with some existing level of knowledge based on some previous user experience, etc.

This is what Jared Spool, the eminent web UI expert, calls "Current Knowledge".

Then “Target Knowledge” is the level of qualification that will allow a representative of the target audience to easily use your landing page, website, SaaS solution.

From left to right: No Knowledge - no knowledge; Current Knowledge - current level of knowledge; Target Knowledge - required knowledge; All Knowledge - the maximum possible knowledge.

The difference between these two levels - Current Knowledge and Target Knowledge - is called knowledge gap(Knowledge Gap). The designer's task is to develop an interface that minimizes the knowledge gap for visitors - between what they knew before they appeared on the resource and what they need to know in order to use the web page properly.

The difficulty in solving this problem is that the designer can work for a marketer who has an extremely wide target audience, ranging from tech-savvy "geeks" to barely computer-skilled grandmothers, plus all those users who fall between these 2 poles in terms of skill. group.

The smaller the group, the easier the designer's task, and vice versa. It is clear that he should receive information about the target group from a marketer who knows his target market.

Concept Models

If users have never used your particular landing page / site, this does not mean that their current knowledge on this issue is zero: they have most likely visited other similar web pages before. Some do not, but actually each of these people has conceptual model(Conceptual Model) of an ideal web resource.

To clarify with an example, let's say there is someone who has never purchased goods online, but has experience in offline shopping. We sit him down in front of the computer, show him the Amazon.com web interface, and say, "You can shop here!"

Now this person, along with the conceptual model of "offline store", has a conceptual model of "online store". The more the process of online shopping resembles a regular purchase, the stronger will be the behavioral "purchasing" pattern of the user associated with a specific conceptual model "Amazon is an online store", because 2 types of user experience - online and offline - will be as close as possible.

But if the user has already used online shopping, but on a different web resource, then his conceptual model of the eCommerce site will differ from the one mentioned above: it is possible that the Amazon.com interface will not meet his intuitive expectations.

So, if the majority of your potential customers have never used landings/sites/SaaS solutions that are visually similar to your web resource, you will have to deal with with concept model.

To do this, you need to find out what their experience is in interacting with landings / sites that are as similar as possible to yours - and so on as they move away in design similarity. The less your web solution matches the mental model that prevails among the target audience, the less intuitive it will be.

Know your users!

To develop an interface that is perceived by potential visitors as "intuitive", you need to assess the current and required level of knowledge of the target group. In other words: what do users already know and what do they need to know?

There are two effective ways assessing the level of knowledge of the target audience:

• “Field studies”: you simply go to your potential customers and observe their behavior on the Internet in their usual “habitat”. This is quite enough to get an idea of ​​their current level of knowledge.
• Over the shoulder usability tests: Invite a few members of your target group to take part in the test, ask them to complete a set of tasks on your pages. Let users comment their actions out loud, saying whatever they think. A similar test can also be performed remotely.

In both cases, you observe and take notes without interfering with what is happening. A test group of 10 participants is enough to figure out 90% of usability problems.

When can a landing page be used intuitively?

Jared Spool, mentioned earlier, did research on this topic back in 2005, resulting in the article “What Makes Design Intuitive?” (What Makes a Design Seem "Intuitive"?).

In it, Jared claimed to have discovered two conditions under which users believe that in front of them intuitive interface:

• The current and required level of knowledge are identical. The user, entering into interaction with the web interface, knows everything that is needed to achieve the ultimate goal of interacting with the resource (in our case, conversion in any arbitrary form).
• The current and required level of knowledge differ, but the visitor, without noticing this, bridges the knowledge gap with the help of imperceptible prompts. The user naturally goes through training without being aware of it.

In other words, you either make your landing pages so simple that conversion tasks do not require a visitor to learn, or provide web pages with instructions, tips, lists of frequently asked questions (FAQs) that are highly visible and really able to educate the user on the go.

The best proof of the correctness of the first thesis is the interface of the search giant Google. There is no way you can misuse it, there is simply no “Learning Curve” - any user, even with minimum level knowing what to do.

A good confirmation of the second point is the SaaS solution for creating lead forms Wufoo. As soon as you start building your first form, a subtle natural process of learning begins with simple instructions.

It turns out that there are two ways to create intuitive design.

You can reduce the level of knowledge required by simplifying the actual design until it meets the minimum possible current level of knowledge of any member of the target audience.

In the second option, you raise the actual knowledge of users to the required value through training.

However, both methods can be used at the same time.

Intuitive site navigation and search

3 years ago, Mike Volpe, an expert on , created a pie chart that visually illustrates the requests made by visitors to the design of web resources (it is clear that the diagram was the result of extensive research).

So, according to this chart, 76% of the most an important factor in the design of the resource, the ease of searching through internal content was considered (this study as a whole concerned the eCommerce sphere, note). First of all, they, of course, wanted to find the menu itself.

This is where the main question lies: if your site has great amount content, how to properly structure / catalog it?

Pip Laja advises to apply another offline optimization method, the so-called "card content sorting method" (Card sorting), akin to something with a real one. card game With simple rules: participants in the experiment are given cardboard cards with the names of categories: “miscellaneous”, “household goods”, etc.

For each card with the name of the offer, be it "watering hose" or "birds' bowl", thrown by the survey organizer, the participants put their cards - the offer covered by the most cards with the name of the categories is most likely to belong to the search query for this categories in the target group collective view.

It may sound funny, but this method is described in the article "Card sorting: a definitive guide" (2004) by Donna Spencer, an Australian expert in user experience optimization.

And in the end, if web designers, when creating interfaces, attribute their experience and skills to any user, then maybe marketers think that their idea of ​​product categories is the same as that of the target group?

Menu items, of course, should have meaningful names, nothing abstract. Experts usually advise calling items with trigger words: “Buy”, “Contact us”, etc.

It's time to remember the so-called Cassells' Law, named after Google CRO expert Shane Cassells:

50% of all users don't buy because they can't find what they're looking for.

50% of all users don't buy because they can't find what they're looking for

That is why having a good content search is not just important, but extremely important!

Your resource should have a search, and it, in turn, should be easy to find.

E-commerce giant Amazon has a huge range of offers, which is why search is central to its web interface. But can you imagine how Amazon could work differently?

Along the way - also make sure you enable "Site Search" in the metric Google Analytics. You will notice that users using search terms, as a rule, have a higher conversion rate (when asking a query, these people already know what they are looking for).

People spend most of their time on websites other than yours.

Remember once and for all: your visitors will spend the majority of their time spent surfing the Internet on other landing pages and sites. They are already accustomed to the fact that web resources look a certain way, that is, they have formed the current level of knowledge.

The generally accepted (conventional, established, stereotypical) elements of the perception of web pages are as follows:

• clicking on the logo (in the left upper corner) always returns the user to the main/home page;
• last paragraph in horizontal menu navigation should be called "Contact / Contact us" (or this bottom point vertical menu);
• Contact Information should be located in the footer of the page (footer, "footer");
• strive for consistency and consistency: navigation and other important elements should remain in the same place on any page of the resource;;
• links should be easily distinguishable from regular text;
• if users can and should scroll the page, the scrollbar should be visible and distinguishable from the background;
• in countries belonging to the European civilization in a broad sense, the user will first read the content located on the left side of the page;
• place help messages and notifications on the page in blocks;
• use the most understandable words: "Contacts" instead of "Communications".

Yes, there are exceptions to the rule and sometimes even bring unexpected benefits. But any innovation in design is difficult and risky. Don't swim against the current, don't fix what isn't broken.

So we slowly approach last point our post.

Unjustified redesign risk

At the An Event Apart conference in 2012, Jared Spool announced a new thesis:

redesign leads to a gap in the level of knowledge of users of web resources.

The Pareto Law works mercilessly in this sphere of human existence: those 20% of users who bring 80% of income categorically do not accept any redesign of their beloved eCommerce enterprise. They are already used to how things work, and when you change the design of the site, you are changing it against the most solvent, "golden" customers.

It's not that people hate change, it's just that they hate those changes that level out their current level of knowledge. Along the way, you destroyed the very intuitive design that did not make customers not think for a second, stepping on the conversion path..

You should focus on the most important buyers/customers. The design should be the most intuitive for them. Don't try to please everyone.

The best way is a permanent, low-profile iteration-by-iteration (in other words, evolutionary, ESR) redesign. This method will allow you to quickly respond to a positive or negative result caused by new changes.

Of course, all of the above applies to a resource with a large target audience. If you have little traffic and the current design looks bad, feel free to start a major overhaul.

During my relatively short work experience (about 6 years), I quite often heard phrases from experienced and novice programmers - “I feel that this should work”, “I have a feeling that this method will not work”, “Let's do intuitive interface" and so on. All this is a manifestation of intuition in the development and programming process.
It will be discussed further about her.

Taken from oprah.com

To begin with, I would like to define the very concept of "intuition".

Intuition (Late Latin intuitio - “contemplation”, from the verb intueor - I look closely) - a method of solving problems through a one-time subconscious conclusion, based on imagination, empathy and prior experience, “feel”, insight.

"Wikipedia"

Intuition (from Latin intueri - to look closely, carefully) is a thought process consisting in almost instantaneous finding of a solution to a problem with insufficient awareness of logical connections.

Intuition (from Latin intueri - to look closely, carefully) is knowledge that arises without awareness of the ways and conditions for obtaining it, due to which the subject has it as a result of "direct discretion"

And each of these ways is reflected in the programming process, and can have both a positive and a negative impact.

Therefore, first of all, I would like to divide "intuitive" programming into 2 components: - optimistic and pessimistic

Optimistic Intuitive Programming

Intuition based on experience

A large number of examples of using such intuition in work processes were described by Dmitry Chepel from Acronis in his article on Habré. If you haven't read it yet, be sure to read it.

I would like to offer you another example-experiment. Below is an example code in Sidef language (I hope not many of you know it). Try not really delving into the details, guess what it is:

Loop ( var swapped = false ( |i| if (arr > arr[i]) ( arr = arr swapped = true ) ) * arr.end swapped || break ) return arr

Perhaps some of you guessed what it was about by seeing familiar parts in the code, maybe some not. I tried this experiment on small group their familiar programmers and the result is this - more than half (about 65%) of people were able to understand what was at stake in a very short time.

I asked them how they could guess - and the most popular answer was:
“We saw familiar pieces of code and immediately assumed what it was.”

Thus, by accumulating experience, our brain is able to very quickly, without additional mental effort, make decisions regarding the code with which we work.

It is because of this that it seems to us that more experienced programmers have a certain "feel" about the project or any programming language.

Intuition based on logic

But what if we take the following piece of Python code as an example:

Def sum(a, b): ... def mult(a, b): ... def subtract(a, b): ... def divide(a, b): ... def calculate(a, b , strategy): ... calculate(4, 2, sum) #6 calculate(4, 2, mult) #8 calculate(4, 2, subtract) #2 calculate(4, 2, divide) #??
Even without seeing the source code, we “intuitively” feel what the result of execution will be last function in the list.

This is due to the fact that we analyze the names of functions, compare them with the result obtained, and thus build some patterns, assumptions about the analyzed code. Thus, we connect our intuition, supported by logic, to read such code.

Here I would like to note that the code that corresponds to our assumptions, our intuition, we usually call "readable", "understandable" code. This is due to the fact that we use not only the resource of our brain, but also our intuition, thereby making it easier to read and understand the code.

Intuitive interface

These expectations are formed on the basis of 2 components - our previous experience and logical patterns and assumptions.

If all the pages of your website had the menu on top, but on the Feedback page, the menu was on the left, then the end user might be a little confused, because "his intuition" tells him that the menu should be on top.

But why is it that sometimes when we go to some website with original design or a new mobile app, we get the feeling that this site looks cool or terrible?

Intuition as irrational

This kind of intuition is the most dangerous in development, but at the same time it is a way to quickly solve complex problems.

This is exactly what is called "magic" in programming - we change the value of one variable or flag and miraculously our code starts working, although this decision was made absolutely instinctively. And just this kind of intuition is its true manifestation.

Pessimistic instinctive programming

As mentioned above, "irrational" intuition is both a lifesaver and a dangerous tool in the hands of a programmer.

Based on such instinctive decisions, we lose confidence in the code we write, in which “magic” begins to happen.

Importantly, such decisions create some level of anxiety when making subsequent decisions. The predominance of feelings, sensations, irrationality in development leads to the impossibility of justifying everything with the help of logic, and as a result - complicating the understanding of the code, loss of readability.

As a conclusion

P.S. For those who are interested in the topic of intuition in software development, I advise you to read

The interface is a kind of "bridge" between the user and the system. Using the interface, the user will be able to explain to the system what he wants from her, and the system will do it. But what happens if this understanding between machine and man is not achieved? The user will simply leave the site. This is how Internet users behave according to the Online Marketing Institute:
- 85% may leave the site if they don't like the interface design;
- 83% will leave the site if they are forced to make a lot of clicks to find what they need;
- 40% will never return to a site if it was difficult for them to use it the first time.

The principles of a good interface are the same for websites, programs, and services. I have collected 17 of the main ones (and also at the end you will find a short overview of ways to test the interface for usability).

From the article you will learn:

A good interface should:

1. Be intuitive.

The user interface is what should be as clear as possible to most people. If a person, having opened the application or accessed the site, does not understand how to use it, then after clicking on different buttons for a few seconds at random, he will be disappointed and leave the resource. Most likely forever.

An intuitive interface is one in which:
1) all elements are built according to the principles of elementary logic.
Take for example a website with text content (articles). Its logical interface will be like this:
- the name of the site is at the very top of the page, below it - short description resource;
- below is a menu with sections of the site;
- a block with contacts and feedback in the upper right part of the menu;
- articles are arranged in the order they were added to the site;
— at the end of each article there are buttons “next” and “previous”;
- category buttons should always be visible so that you can go to another section at any time;
- site rules, detailed contact information, information about developers, etc. located in the footer of the site, since that is where they are always searched for.

Do not confuse the user with a non-standard arrangement of familiar blocks, but use proven principles. The blog of marketer Heidi Cohen is structured clearly and logically:

Here is an example from the program interface. Even where the icons are not signed, it is quite clear what they can mean. The buttons are arranged in logical order - after all, it is intuitively clear to everyone that after the “pause” button, the “stop” button should follow, etc.

2) the buttons are assigned clear labels.
Avoid buttons that may mislead the user. No need to reinvent the wheel. The big question mark immediately tells the user if there is any guidance or help behind it. A magnifying glass is always a search form on a site.

But what would you think if you saw a button on the site or in the program, for example, with a crossed out square? Most likely, many users will not even dare to click on it, since they will not understand what this action will lead to.

And for even better understanding by users of their actions, you can use labels for buttons. They appear on hover.

3) there is help for the user if he is “lost”.
If the user has landed on a 404 page, immediately give him a brief instruction on what he can do next. For example, invite him to return to the previous section and look for necessary information there.

Or such a situation. You have an online store. At wrong input product parameters, the user sees an error message. Write right there what he needs to do to describe the product correctly. If the desired product was not in stock, write about how the user can receive a notification about the appearance of this product.

And one good example:

2. Be predictable.

In other situations, predictability can be boring and uninteresting, but not in terms of interface. The user, having looked at this or that interface element, should immediately understand how he will behave in case of interaction. If the object looks like a menu, it should behave like a menu, if it looks like a slider, then, accordingly, it should move something. Creativity of thinking is, of course, good, but not in this case.

An example of the interface design of the player program. The top buttons (“previous” - “play” - “next”) should perform exactly these functions, and the slider to change the volume level.

A few more examples. If you make the buttons 3D, they will look more like buttons, so they will be more likely to be clicked:

And the on / off switch looks clear when done like this:

One of the biggest fears designers have is that they will be seen as unoriginal. And so they often shy away from using techniques that have long been proven to be effective and work, in favor of creating “something new and creative.” Of course, there is no need to engage in open plagiarism. But using interface building models already familiar to users is a sure way to make it predictable. What resources do you use the most? the target audience? Facebook, LiveJournal, Twitter, Amazon, Youtube? Use a similar style in your interface so they can feel like they're in a familiar environment. For example, if you're targeting Youtube, make the main menu vertical and place it on the left of the page, and center the search bar at the top.

3. Be minimalist.

Trying to put as many categories, menus, buttons, etc. in the interface as possible, you will only cause great harm to it. Too cluttered interface is a big obstacle to its understanding by the user. Everything that can be described in one sentence should not be described in three. Extra elements and subcategories on the main page are also useless. Testing will help you determine which are “extra” and which are not (how it can be done at the end of the article). But it's not worth sacrificing something really important - if you know that without any explanation (more on hints below) or additional button it will be difficult for the user to understand, then put it in the interface, but do it as concisely as possible.

Nice, but at the same time quite concise design of the application interface. There is nothing superfluous and confusing - only the necessary and the case.

4. Load fast.

Slow loading of the interface will annoy and repel the user, causing him more and more dislike for the resource. Make sure that the download speed is optimal for its comfortable use. To a large extent, this is due to the previous paragraph - after all, the fewer "heavy" elements on the site, the faster it will load.

To make your site go faster fast, use these tips: 8 Ways.

5. Show all important options.

Use drop-down lists and menus only where it is impossible to avoid. In other cases, try to immediately show the user all his possibilities. If part possible actions will be hidden, the user may not guess where he needs to click to perform a certain action. And if these actions are targeted (“buy a product”, “make an order”), then they cannot be hidden at all in drop-down menus, but on the contrary, they should be given special emphasis.

An example of what a drop-down menu can have the right to life. Here, when hovering over, subsections in menu sections open, and this is quite convenient. But, for example, the “Contacts” button is visible immediately, without additional guidance.

Buttons for preferred user actions should stand out from others. Here is the button "Add to Cart".

6. Be able to communicate with the user.

The point is that the user must understand what his action is currently being processed by the system. The process of sending a message must be accompanied by the display of the phrase "message is being sent", and the end of this process is "Message sent". If there is a failure in the system, the user also needs to be notified of this, as well as the reasons for the error and what he can do in this situation. If the resource is loaded large volumes information, then you need to place progress bars so that the user can monitor the state of the system.

For the experiment below, I filled out only the first two columns of the registration form, left an empty line with e-mail and deliberately entered the wrong password repeat. The system immediately indicated errors (highlighted in red). This is how any good interface should behave.

7. Have different styles for buttons with different types of actions.

In any interface, each button has its own purpose: go somewhere, open a menu, open in a new window, download, and so on. In order not to confuse users, follow these rules:

1) clickable and non-clickable elements should be different. You can highlight them with color, font, size. The user should immediately see which buttons he can press and go somewhere, and which ones are just for information.
2) highlight with color or style the section of the menu in which the user is currently located.

On this page, it is immediately clear that we are in the “Services” section and it is highlighted in red. Returning to point 5, I note that here the target action is a purchase, so the “buy” button is highlighted against the background of the others and is voluminous.

8. Be attractive.

Functionality and convenience are good, but there is also an elementary “beautiful / not beautiful”. Any user will be much more pleasant to deal with the interface, which, among other things, is also pleasing to the eye.

But don't forget that Beautiful design- a subjective thing. You will not be able to make it equally beautiful for everyone, no matter how hard you try. Agree that when developing a resource for high school students and a resource for accountants, you will need to make different design decisions. Therefore, first of all, focus on your target audience and its needs.

In my opinion, these design examples are quite attractive. In the first case, I was most pleased with the originally made icons and the volume of the image, in the second - with the color scheme and arrangement of elements.

9. Enable personalization.

Personalization is the ability to customize something “for yourself”. Most often, this function can be found in programs, services and applications. The user can change, for example, font color, icon style, background image, the size of the text blocks as he likes (choosing from the proposed options, of course).

In the Trello service, you can change the background to a different color or image.

Here's how you can personalize your Twitter account:

10. Be loyal to user errors.

And yet, there will always be users who will not be able to immediately understand this or that point when working with the interface. They will make erroneous actions, and here the interface faces the task of making sure that these errors can be quickly corrected. If the user accidentally deleted the information he needed, he should be given the opportunity to restore it. A user who wandered to the wrong page should be able to quickly return to previous page or section by pressing the back button. To prevent erroneous actions, the interface should ask the user again if he really wants to do this. For example, "At closing current page the file upload will be aborted. Do you really want to do this?". However, do not overdo it with such questions, otherwise it will become annoying.

Two examples from applications: when deleting or saving data, the system asks if you really want to do this. It is better to assign questions of this kind to the interface when the user wants to take an action that may lead to irreversible consequences (delete a task - in the first example), or if this is possibly a meaningless action (save the group without members - in the second example).

11. Speak the user's language.

The entire text of the interface, any designations must be created for the target audience of the resource. Everything is obvious here: if you are making an educational site for children preschool age, then the text of the interface should be written in a “childish” language. If you have a program for advanced webmasters, then you can safely use specific terms without explanation - the target audience already knows them. And if this is a service for beginners, then the language should be as simple as possible.

12. Provide the optimal number of choices.

The more options you offer the user, the less likely they are to take any of them at all. If there are really many options, and it is impossible to reduce them (for example, a product catalog), then use the recommendations function. For example, you offer ten product options on one page, but select one or two of them in the “We recommend” category. The client will pay attention to these products, which may make it easier for him to choose.

This can also be implemented using the “Bestsellers” block, as shown in the example.

13. Give soft prompts.

The pop-up hints are very good. They help the user to fully understand what he could not understand himself. Main question what remains is how to make such prompts effective and stress-free. Remember the paperclip assistant from the early Microsoft versions word? The company disabled this feature precisely because it caused a lot of negative emotions among users and was criticized.

In order for users to be loyal to tips, adhere to the following points:
- do not write too much text in them;
- do not connect hints to each button, but limit yourself to only those where the user can really have difficulties;
- Allow the user to close the hint or turn off the hint feature completely.

14. Darken background under modals.

The modal window blocks the user's work until he closes this window or performs some action in it. Such a window needs to be somehow highlighted in the overall picture. The best way to do this is to darken the background below it. The darker the background, the more emphasis will be placed on the modal window, and the user will understand that he needs to perform some actions in it.

On some sites, I have seen that the background under the modal window becomes completely dark and not readable. This is just an example of the wrong usability of the site, as it creates the feeling that you have landed on some other page altogether. The examples below show how to distinguish modal window, darkening the background but still making it readable.

15. Have short registration forms.

Getting the user to sign up is an important and one of the hardest things to do in an interface. Usually people try to avoid registering where they are not going to go regularly, or are not yet sure about it. And often they even refuse to buy in an online store, if this requires mandatory registration, and leave to look for their product on other sites. To ensure that users do not feel dislike for the registration process, you need to make it as quick and easy as possible. Don't use long signup forms where you have to include your entire bio. Limit yourself to the most necessary lines:

And if, for some reason, you are forced to offer users a long form with many filling points, then break it into separate parts.

Look at an example. The form on the left shows all the lines to fill at once and therefore looks cumbersome. I don't want to fill out this form. And in the form on the right there can be exactly the same number of questions, but they are divided into “steps”, so they do not cause irritation.

16. Have simple principles for filling fields.

Almost every site offers users something to fill in it. In addition to registering on the site, this can be a product order form, please leave your contact details or take a survey. If you make a form too complicated or stressful, no one will fill it out. Here are a few important tips:

1. When filling in different fields (“city”, “street”, “date of birth”), it would be nice to give hints to the user using a dropdown (drop-down menu) so that he does not have to enter it all manually, but simply select the desired option from the list .

2. If the user still needs to enter his data manually, then use the line-by-line check by the system for the correctness of filling out the form. No one will like it if the system, after each filling error, resets all lines filled in earlier.

3. Field names are best placed above the input lines. It has to do with human visual perception. It is easier for a person to perceive information from top to bottom or from bottom to top than from left to right or vice versa.

4. Minimize the likelihood of incorrect form filling.
Imagine the situation. You start typing your phone number in the field. After the first filling, the system tells you: "The phone number must be entered in a 10-digit format." You enter again, and the system gives you: "The phone number must not contain hyphens." And then you will already begin to get nervous and mentally curse this site (or maybe not mentally). Ideal Shape input is when the user can write anything into it, and the system will not tell him “wrong”. Of course, data processing will be somewhat difficult, since you will have to process some requests manually. But after all, your main goal is to take the order, and not to weed out impatient customers.

17. Provide easy management options.

If on websites we mainly use the mouse (except standard features“copy / paste”, etc.), then in programs and applications it is often convenient to control from the keyboard. Let users choose the type of control they like best, and show which function corresponds to which key combination.

How to test the interface for usability?

As promised at the beginning of the article, I will tell you a little about testing the interface. Why is it so important?
- firstly, when developing the interface, errors could creep into it that would affect the operation of the entire program or resource;
- secondly, you can never immediately guess with the optimal interface design, which will be perfectly perceived by most users;
- thirdly, the interface can be displayed normally on one device (or in a browser), and be completely incompatible with another.

Testing can solve all these problems. How can it be done?

1. By hand.

To conduct such testing will require a lot of time and physical resources, since the entire process will be carried out by a person. But this is the advantage of manual testing. For its implementation, a tester is needed, who will gradually check how the system reacts to a particular user action. The most convenient way to do this is to create a special table in which all the data will be entered. For example, like this:

2. In an automated way.

This method of testing is carried out with the help of special software tools that, as it were, imitate the actions of a living person during manual testing. Such testing does not require human participation, so the speed of its implementation increases, and the cost of cash costs decreases. There is one big “but” here. Automated testing cannot give 100% results, since it is carried out only on formal grounds (those that are built into the program), and does not provide an opportunity to find usability defects that can only be perceived by a person (for example, the color scheme of the interface).

3. Through focus groups.

In my opinion the most best method testing in terms of price-performance ratio. It is carried out as follows:
- several focus groups are recruited, consisting of your target users. You can separate groups according to different criteria: registered / unregistered, regular / rare users, as well as according to different demographic indicators (which fit into your target audience);
— each group is given tasks to perform certain actions on your website/service/program. You must tell subjects what they should do, but don't say how. This is the essence of testing - to see what actions users will use to achieve their goal.
- after all this, you analyze exactly how the subjects completed their tasks - where they clicked, what links they clicked on, whether they quickly found what they wanted, etc.

There is special services, with which you can easily find people to conduct such testing. For example, Askusers, Wise Test, Usabilla.

Illustrative example of user interface testing

For usability testing, users were involved who do not use Yelp very often. They were given certain tasks (for example, to reserve a table in a restaurant, to choose a hotel for an overnight stay during a trip, etc.), after which their actions were analyzed. Here are some test results:

1. As it was found out, users more often prefer to use the search form to find the institution of interest to them, rather than searching for it by category. Therefore, it was decided to search key function On the page. From this page:

It turned out like this:

2. A survey of test users showed that almost every one of them believes sidebar The service is very cluttered and inconvenient to use. The original page looked like this:

And here is the layout of the new page:

See the full version of the results of this testing.

In conclusion.

When designing an interface, keep in mind that too much attention to one characteristic can significantly harm another. By removing some elements in an effort to achieve minimalism, you can create problems for the user to understand the interface. By embodying the characteristic of attractive design, you run the risk of overdoing it and making the interface too heavy for fast loading. Therefore, the most important (and most difficult) thing in this whole story is to maintain the perfect balance of all the properties of the interface, and then it will be truly user-friendly.

I am very interested in the topic of intuitive interface in the context of everyday and professional understanding. I even collect the opinions of different designers on this topic :)

Let me give you a few quotes from my collection.

Victor Papanek:
Design is a conscious and intuitive effort to create meaningful order.

I found it necessary to add the word "intuitive" to my definition of design only in last years. Consciousness involves intellectualization, the work of the brain, research and analysis. The original definition lacked the feel/feeling side of the creative process. Unfortunately, intuition is difficult to define as a process or ability. Nevertheless, its influence on design is quite significant. After all, it is thanks to intuitive insight that we can imagine how those impressions, ideas and thoughts that we imperceptibly have accumulated on a subconscious, unconscious or preconscious level interact. The mechanism of intuitive thinking in design is difficult to analyze, but can be explained with an example. Watson and Crick intuitively felt that the structure of the DNA molecule could most elegantly be expressed as a helix. With this intuition, they began their research. Instinctive foreknowledge was justified: DNA is really a helix!

Vlad Golovach:
Vlad's opinion can be read in my blog
http://valiullin.livejournal.com/14635.html
I did not bring it here, because the context is important there.

Alan Cooper:
When objects have a shape that is obviously suitable for direct manipulation of the legs or arms, we understand without written instructions what to do with it. Understanding how to handle a tool that is shaped like a human hand is a great example of interface intuition.

Jeff Raskin:
One of the most laudatory terms used in relation to interfaces is the word "intuitive". Upon closer examination, this concept disappears as completely as a ball in thimbles, and is replaced by the simpler term “familiar”.

When users say that an interface is intuitive, they mean that it works just like some other method or program they are familiar with.

Recently I found a statement either by Bruce Ediger or Steve Jobs (the author could not be identified):
The only "intuitive" interface is the nipple. After that it's all learned.
Only the pacifier has an intuitive interface. All the rest need to be studied (my free translation).

It seems to me that the realization that the concept of an intuitive interface exists is an important consideration for an interface designer.

In this regard, I wanted to know from you Artyom, what do you think about intuitive interfaces?

Judging by your answer, you are close to the opinion of Alan Cooper. But the opinion of Jeff Raskin is closer to me with a small caveat of Ediger-Jobs, about the nipple.

The interface is a special software, which perform the output function graphic image and allow the exchange of data between the user and a computer or other technical device.

What is an interface?

by the most simple example remote control interface remote control. This technical tool helps to interact and “communicate” the TV and the person. Other examples would be dashboards in a car, levers in an airplane, and so on. Despite the rather broad scope, when asking the question: “What is an interface?” in most cases, people have associations with computers, mobile phones and other technical devices of a similar type.

The interface is a collection of various elements, which themselves can also have a complex multi-level structure. For example, the display screen includes windows that consist of certain panels, buttons, etc. The main characteristic of firmware is efficiency and ease of use. Based on this, the interface is often positioned as convenient, friendly, understandable, intuitive, etc.

Main components

In order to understand what an interface is, you need to understand its basic elements. Their set depends on what exactly the person uses. If this is, for example, computer program, then this includes a variety of virtual panels, buttons, windows and other similar components. In addition, the interface can be interactive, i.e., affect a person using a variety of sounds, signals, lights, vibration motors, etc. As for the user himself, he can interact with the interface using various switches, levers, buttons, or even certain gestures and voice commands.

Concept structure

Very often, interface is understood as appearance programs. This is not entirely true, because in addition to visual characteristics, this technical concept includes a set of additional functions and elements. Below are some of them:

• Information input technology.
• Data output method.
• User tasks.
• Various elements that allow you to control the program.
• Feedback.
• Elements of navigation between different structures and program components.
• Tools for graphic display of commands.

Main elements

In most cases standard interface technical device consists of the following elements:

• Button. It can be double, flag, etc.
• Badge or icon.
• Normal or hierarchical list.
• Fields for editing.
• A menu that can be main, contextual, or drop-down.
• Various panels.
• Tabs, labels and tooltips.
• Windows, in particular dialogue.
• Scroll bar, slider, etc.

Additional elements

In addition to the above main components, the interface can also have additional elements which are not used in all technical devices Oh.

• Level indicator. Allows you to track a specific value.
• Elements of a sequential set.
• Various counters.
• Displaying information on top of all other components.
• Hidden UI elements that disappear when not in use, etc.

Classification

With regard to typology, then, depending on certain criteria, there are different types interfaces. At the same time, almost every year their number and structure changes and improves. Below are the most common types.

1. command interface. This technical tool is based on the input of certain commands and their sequence. A special window is displayed on the device screen, where the user enters a specific command and receives the corresponding result. This type interface is less convenient for the average user, as it requires knowledge of the commands and the process of entering them.
2. Menu interface. In this case, examples of commands and menus with specific actions are displayed on the screen of the technical device. In order to select the required command, simply move the cursor to a specific symbol and confirm your actions. At the moment, this is the most popular way of communication between a computer and a user. This type interface does not require special knowledge, and even a child can work in this way.
3. Voice interface. Allows you to switch between commands and certain actions through voice guidance. The most convenient and promising type of communication between a computer and a user. At the moment, while not widespread, it is present mainly in expensive technical devices.

User interface

This concept includes a complex set of elements that the user sees on the screen and through which he interacts with the computer. The result of human activity depends on how convenient it is to use. Based on this, all global corporations that are engaged in computer technology, pay special attention not only to the process of writing programs, but also to optimize them for the needs of specific user groups. Designers, artists and even psychologists work on the interface device, and it is developed taking into account the special requirements of people, physical capabilities, their state of health, etc.

The concept of parallel and serial interface

For computers and others similar devices important role plays the task of transferring data in a certain amount. In order to transfer data to a group of bits, there are two approaches to the structure and organization of the interface:

1. Parallel interface. In this variant, each bit from the group of those that are transmitted uses its own signal line, and they are all transmitted together at one specific moment. An example is the printer connection port.
2. Serial interface. In this case, only one signal line is used, and the bits are transmitted in turn, one after the other, while each of them is given a certain amount of time. Example - serial bus USB.

Each of these interface types has its pros and cons. Although the use of the parallel variant is simpler and quick fix, for its implementation requires a large number of wires and cables. transmission lines serial interface have more complex structure but are much cheaper. Accordingly, if the line needs to be stretched for a long distance, then it is much more profitable to pull serial cables than several parallel wires.

Instead of an afterword

Thus, the interface acts as an intermediary between the computer or other technical device and the user. The quality of work with this equipment depends on how convenient and easy it will be to operate. In order to finally understand what an interface is, you should also study its classification, basic concepts and main components. Every year the interfaces of various technical devices are improved, the approach to their structure and main functions is changing.