Equipment with an intuitive interface. Intuitive web design: how to make your landing page user-friendly

Intuitive interface. Well, count how often you hear/read this phrase? Or maybe you say it yourself often? ;)

At the same time, I always ask myself various insidious questions: who understands? How clear is it? And so on... I remember more than once arguing, for example, with the Captain about websites in general (the last such case).

This is a saying. And here is the fairy tale. I have not written and do not plan to write paid posts: posts in which I have to speak positively about whoever will pay me. This is exactly how I answer everyone who wants to buy a post. But sometimes - to my delight - I come across adequate people who are ready take a chance. I don't take money, but I promise to say what I think about the service/site/company. An honest risk? :))

I’m glad that this time it was the Belarusian service that caught my bait. And I decided not just to describe what I see, but to conduct a micro-usability experiment.

I don’t drive a car myself (and - oh gods - I don’t intend to). But I have an excellent test subject: my mother is an experienced driver and an inexperienced Internet user :) I sat my mother down at my computer, opened the website zavodi.by and offered to find the tires that are relevant for her now...

So, after a short instruction - what kind of site this is - my mother began to search...

The discoveries she made were revelations for me too.

For example, an inexperienced Internet user does not immediately understand how can you search:)) Moreover, “quick search” () is actually not that small, right? And it differs from extended () quite a bit... Honestly, Quick search Personally, I (together with my mother :)) would do less...

The second discovery of the evening: although my mother is an avid driver, she does not remember all the tire parameters by heart (yes, there is already something to remember...) Therefore, the main hitch was remembering correct parameters... Small link " Interval“even for me it seemed unobvious (even though I’m not a motorist, I live on the Internet all the time...)

By the way, a good solution to the problem in this predicament is... well, a very fast search in a separate menu, when you can immediately select what is most relevant (by price, by condition, by type, and so on) ().

Separately, I would like to note the page on which the site owners report that there are no suitable tires in the database. At this moment, what catches the eye of an ordinary user is what is larger and brighter, that is: the Nokian logo and the text about them. And that’s all... If I were the developers, I would pay attention to this small but important page, highlighting at least a little more clearly the message itself and the instructions “What to do next?” ().

Having found suitable tires, my mother carefully (yes, this is also important for her) read the description and could have already ordered... If this had not been just an experiment for now :) Here I will continue on my own behalf.

Separately, I would like to note that the service is designed in such a way that “ Tires are ordered through our manager! This is done in order to serve your request as quickly and efficiently as possible.“This approach saves us, the buyers, time and nerves (remember the frequent conflicts of such platforms, for example, Online, on the subject of “who is to blame”: the site or the sellers in each specific case).

What will be important to most Belarusians: the site is “light” and loads quite quickly and without difficulty (as you know: “While Russians watch YouTube, Belarusians read Wikipedia.” So zavodi.by in terms of weight is quite comparable to Wiki level :))).

My verdict? zavodi.by did not take the risk in vain (especially considering that they are not even a month old, as far as I understand). I mean that such services are useful in many areas. And how much easier my life will be now that I don’t have to look all over the internet for suitable tires for my mother :-D Of course, there is still a lot of work on the project, there is room to grow and develop, but the starting point, in my opinion, is not bad.

December 26, 2016 at 10:23 pm

Intuitive programming

Debugging
Programming,
Perfect code

In 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.
The conversation will go 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 - looking intently) is a method of solving problems through instantaneous subconscious conclusion, based on imagination, empathy and previous experience, "gut feeling", insight.
"Wikipedia"

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

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

The basis of these definitions is that intuition is a certain way of making decisions. There may be several reasons for this method: previous experience, imagination, irrational “gut feeling,” etc.

And each of these methods is reflected in the programming process, and can have both positive and negative effects.

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

Optimistic Intuitive Programming

Its essence lies in the optimistic or positive influence of intuition on the process of creating code. IN in this case intuition is an assistant, a “good friend,” a tool in the hands of the developer.

Intuition based on experience

The main idea here is that in the process of accumulating development experience, we develop certain stereotypes and associations associated with code, which we are able to determine without delving into the thought process.

A large number of examples of the use of such intuition in work processes were described by Dmitry Chepel from Acronis in his. 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 of code in the Sidef language (I hope not many of you know it). Try, without going into too much detail, to guess what he’s talking about:

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 we were talking about after seeing familiar parts in the code, perhaps some did not. I tried to conduct this experiment on a small group of programmers I knew, and the result is this: more than half (about 65%) of the people were able to a short time understand what we are talking about.

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

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

It is because of this that we think that more experienced programmers have a certain “feel” about a project or a programming language.

Intuition based on logic

Try continuing the next row:
Surely you haven’t thought for a second what number will come next.
This is a simple example of a pattern that we can continue literally without thinking.

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) #??
Without even seeing source code, we “intuitively” feel what the result of execution will be last function on the list.

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

Here I would like to note that 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 simplifying the reading and understanding of the code.

Intuitive interface

And now I would like to move on to such a frequently used expression as “intuitive interface”. This applies to both the software and user interface.
Considering the above points, we can say that an intuitive interface is an interface that meets the expectations of the user, be it a programmer or end user.

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 a menu at the top, but on the page Feedback menu on the left, the end user may be somewhat confused because his “intuition” tells him that the menu should be on top.

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

Intuition as the irrational

The basis of such a judgment is that often intuition is born as simply a feeling of something, unsupported by any conclusions, logic or experience.

This type 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 type of intuition is its true manifestation.

Pessimistic instinctive programming

But intuition can also be negative during development.

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

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

Importantly, such decisions create a certain level of anxiety when making subsequent decisions. The predominance of feelings, sensations, and the irrational during development leads to the impossibility of justifying everything using logic, and as a result, the complexity of understanding the code and loss of readability.

As a conclusion

In general, it is a matter of intuition when developing software This is not the first time it has risen.
This is due to the fact that the problem of the influence of processes unrelated to logic and thinking on the process of writing code will remain relevant, since this process is occupied by a person who has feelings, prejudices, and is “irrational.”

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

The interface is 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?

The most simple example interface acts as a remote control remote control. Given technical means helps to interact and “communicate” between the TV and the person. Other examples would be dashboards in a car, levers in an airplane, etc. Although the scope is quite broad, when asking the question, “What is an interface?” in most cases, people have associations with computers, mobile phones and other technical devices of this type.

The interface is a collection of various elements, which themselves can also have a complex multi-level structure. For example, a display screen includes windows that consist of certain panels, buttons, etc. The main characteristic of hardware and software 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 a 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, that is, it can influence 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 the interface is understood as appearance programs. This is not entirely true, since in addition to visual characteristics, this technical concept includes a set 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 various structures and program components.
Facilities graphic display commands

Essential elements

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

Button. It can be double, flag, etc.
Badge or icon.
Regular or hierarchical list.
Fields for editing.
A menu that can be main, contextual or drop-down.
Different panels.
Tabs, labels and tooltips.
Windows, particularly dialog windows.
Scrollbar, slider, etc.

Additional items

In addition to the above main components, the interface may 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 interface elements that disappear when not in use, etc.

Classification

As for the typology, depending on certain criteria, there are different types interfaces. Moreover, almost every year their number and structure changes and improves. Below are the most common types.

Command interface. This technical tool is based on input certain commands and their sequences. 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 regular user, since it requires knowledge of commands and the process of entering them.
Interface menu. In this case, examples of commands and menus with concrete actions. In order to select the required command, simply move the cursor to a specific symbol and confirm your actions. On this moment This is the most popular way of communication between a computer and a user. This type The interface does not require special knowledge, and even a child can work in a similar way.
Speech interface. Allows you to switch between commands and certain actions through voice instructions. The most convenient and promising type of communication between a computer and a user. At the moment, it is still 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 with the help of 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 involved in computer technologies, Special attention They pay not only to the process of writing programs, but also to optimizing them for the needs of specific user groups. Designers, artists and even psychologists are working on the interface, and it is being developed taking into account special requirements people, physical capabilities, their health status, etc.

Concept of parallel and serial interface

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

Parallel interface. In this embodiment, each bit in 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.
Serial interface. In this case, only one signal line is used, and the bits are transmitted in turn, one after another, with a certain period of time allocated for each of them. An example is the USB serial bus.

Each of these types of interfaces has its pros and cons. Despite the fact that using the parallel option is simpler and quick solution, for its implementation it is required a large number of wires and cables. Transmission lines serial interface They have a more complex structure, but are much cheaper. Accordingly, if the line needs to be extended over a long distance, then it is much more profitable to run serial interface cables than several parallel wires.

Instead of an afterword

Thus, the interface plays the role of an intermediary between a 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, and the approach to their structure and basic functions changes.

Are visitors leaving your website without becoming subscribers/leads/customers?

Perhaps they simply cannot understand what is happening on your resource. So help them figure it out! Make the site easy to use.

This is where intuitive design comes in handy. I'm sure many have heard about him, but no one can really say what he is.

However, today I will break down how to make your website comfortable for visitors. Let's start…

1. Simplicity is the key to success

The easier it is to use your site, the larger the circle of your readers/subscribers/potential clients. What is simplicity? This is when a person immediately understands where to move to get what he wants. If only life were like this!

You don't need ultra-modern bells and whistles - intuitive design is not noticeable. But at the same time, he himself directs the person where he should go so that he achieves his goal. If you are purchasing a product, you will find it easily and quickly. If this is reading an article, it will be convenient and pleasant to do so. Each new action is obvious to the user; he does not waste time thinking about what to do next.

Plays an important role here user experience. Imagine the situation: you came to a car dealership for the car of your dreams. They told the seller in colors what it should be like. And then he tells you that they have what you need! You, in anticipation of a long-awaited acquaintance, literally fly to your “beauty” and... Suddenly it turns out that there is no handle on any of her doors! What a bummer! How to get to the salon?

This example shows what website design should NOT be. It should not distract a person’s attention and create situations for him without an obvious solution. It’s great when a visitor moves around the site without losing the main idea. He is focused on his task, and the design helps accomplish it. When a person needs to constantly stop and think about what to do next, he is distracted from main goal. Therefore, to save himself from difficulties, he will simply close the site.

Would you like an example of a simple and clear page? Visit our Knowledge Laboratory. There is nothing here to distract you from useful articles, because there is nothing else here besides them. It is simply impossible to get lost.

2. The main problem: who can understand your design?

There are a lot of resources on the Internet that irritate visitors. Why doesn't everyone make websites with an intuitive design? After all, this is what people need. But everything is not so simple, because all users are different. What is easy and understandable for one person may seem like Chinese characters to another.

I'm sure every web page is created with good intentions. But more often than not, websites are only intuitive for their developers. Why? It’s trite but true: designers and layout designers don’t bother checking whether “ordinary” people are comfortable using their creation.

They tend to think that everyone perceives the world the same way as they do. But creating truly intuitive design starts with understanding your users. So first, determine how they will perceive your site.

3. Knowledge that exists and knowledge that is needed

A person comes to your site with a certain understanding of how things should work. This is knowledge that he already has. But there may be something in your website design that the user doesn't understand.

The difference between what is and what is needed is the “knowledge gap.” If it is minimal and the user quickly fills in the missing knowledge, your interface is intuitive. But the problem is that your visitors can be both experienced users and people who literally saw a computer for the first time just a week ago.

If you work with a narrow target group, it will be easier for you to create a comfortable website. If you have a wide audience, then creating an intuitive design will become a task with an asterisk. In such a situation, I recommend targeting the most “unadvanced” visitor.

4. How to use conceptual models

Sounds a bit complicated? Now I’ll explain everything :) If a person visits your site for the first time, this does not mean that his knowledge is zero.

Let's say you've never bought anything online. But in real world you've done this thousands of times. Therefore, if I sit you down at the computer, show you a certain store and tell you that here you can buy everything you need, you will quickly figure out how to do it. You will take advantage of the offline shopping concept model and gain a new experience.

Here is the page of a popular online store. Its design itself tells you what to do to get the selected product. When you click the “Buy” button, the desired item appears in your virtual cart. You do everything as in a regular store, only you can still sip tea while sitting at the monitor.

If a visitor has experience shopping online, but has never purchased from this particular site, his conceptual model will be slightly different. He already knows what needs to be done and how, and will simply apply his experience to a new resource.

When you create a website, keep in mind what experience your potential candidate already has. If the resource does not match it conceptual model, the person will decide that the site is difficult to use and... will leave.

5. Study your visitor

To create an intuitive design, it's important to figure out what your visitors already know and what they need to know. There are 2 great ways define this:

1. Do your research. Observe how visitors use websites in their usual settings. This will give you an idea of their current knowledge. This method is not easy, but there is an alternative.

2. Remote learning. Select a group of people who will use the site. Give them a series of tasks and ask them to comment on what they think about the resource's performance. What and how do they think needs to be done? What helps them and what hinders them? What are the distractions? This way you will determine what knowledge a potential visitor needs to gain.

Important! In each case, you only observe, draw conclusions and do not interfere. Try it and you'll quickly discover what's wrong. By the way, don't bother with a huge amount Only 10 participants are enough to identify 90% of the problems.

The conclusions drawn will help describe the people for whom the site will be created.

6. Intuitive design formula

Ideally it looks like this: current knowledge = necessary knowledge.

Users themselves identify 2 conditions under which the site design is intuitive:

The point of current knowledge and the necessary knowledge approximately coincides. Users can easily determine what they should do to achieve their goals on the site.
The point of current knowledge and needed knowledge are distant from each other, but design helps fill the gap. Visitors learn seamlessly and naturally.

It's best to keep the design as simple as possible so there's no learning curve or instructions to follow. Perfectly illustrates the first condition Google search engine. It cannot be used incorrectly. It is simple, like everything ingenious.

Let's look at the fulfillment of the second condition using our website as an example. There is no unnecessary details, you won't be distracted by a huge array of , and buttons and arrows indicate where to move and what you can find out.

That is, when developing a design, you can simplify it as much as possible in order to bring it closer to the knowledge and experience that visitors have. Or you can give them new knowledge through instructions. You can also combine these two approaches if you wish.

7. Intuitive navigation and search

76% of shoppers say the most important thing to them in website design is “how easy it is for me to find what I need.” For convenient searches need proper navigation.

For example, in an online store, logical sorting of product cards is important. The menu should tell you where to go to get to your destination. To name menu items correctly, use catch words. They will tell you what is hidden behind each section.

Remember! 50% of online store visitors abandon a purchase because they cannot find what they came for. Therefore, you cannot do without searching the site. The Rozetka store has a huge assortment. But there is a search bar right in the center of the screen. Therefore, you don’t need to think long about what to do.

Little advice: connect site search to the tool. This will increase conversion, because Google itself will tell the person what he can find here.

8. Remember: people are more comfortable using sites they are used to.

There are rules to follow to ensure that the design of your resource is intuitive:

Clicking on the company logo (which is located in the upper left corner) always leads to the main page;
Last link in horizontal menu or lower in vertical menu– these are contacts;
Contact information is duplicated at the bottom;
All elements are consistent: menu items will remain in the same place, no matter how you move around the site;
Links stand out against the background of plain text;
If users can and should scroll down, the scroll bar is clearly visible;
Left-aligned text is easier to read;
Pop-up messages help you understand the interface;
Menu items are named in clear words(You shouldn’t make an “Information support” button instead of the “Contacts” item).

There are exceptions to every rule. But it is better to adhere to these recommendations and carefully consider any innovations. Make sure your website interface meets people's expectations.

9. Be careful with redesigns

20% of users spend 80% of their income online. These are the ones important people, which will be most affected by the redesign. They are already used to how things work. So when you redesign a website, you're changing it for them first and foremost. And many people don’t like it when things aren’t as usual.

Remember: any rework can deepen the knowledge gap. Therefore, if the site ceases to be intuitive for visitors, it may decline noticeably, which means you will lose part of the profit.

If you can't do without a redesign, make small changes from time to time. This is better than global changes. This way you can analyze how people react to each innovation. But if your site has little traffic precisely because of its design, feel free to do a major overhaul.

Finally

Your site should be intuitive for your key visitors. After all, this will help achieve their loyalty and increase conversion. Therefore, study visitor behavior and always test interface changes.

Try these 9 tips into practice. You'll see that conversion growth won't take long.

Was it helpful? Feel free to “Like”! This will show that you want to know more about design and I will prepare a new post on this topic soon.

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

Let me give you a few quotes from my collection.

Victor Papanek:
Design is the 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, brain function, research and analysis. The original definition was missing the sensation/feeling-based side creative process. Unfortunately, intuition is difficult to define as a process or ability. However, 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 interact that we have imperceptibly accumulated on a subconscious, unconscious or preconscious level. 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 by a helix. With this intuitive hunch they began their research. Instinctive knowledge was justified: DNA is indeed a spiral!

Vlad Golovach:
Vlad's opinion can be read on my blog
http://valiullin.livejournal.com/14635.html
I didn't include it here because the context is important.

Alan Cooper:
When objects have a shape that is obviously suitable for direct manipulation by feet or hands, we understand what to do with it without written instructions. Understanding how to operate a tool whose shape corresponds to the shape of a human hand is a great example of intuitive understanding of the interface.

Jeff Raskin:
One of the most praised terms used for interfaces is the word “intuitive.” Upon closer examination, this concept disappears as completely as a ball in a thimble, and is replaced by a more in simple terms"familiar".

When users say that an interface is intuitive, they mean that it works the same as some other method or program with which they are familiar.

I recently found a statement by either Bruce Ediger or Steve Jobs (they couldn’t determine the author):
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 understanding whether the concept of an intuitive interface exists is an important circumstance for an interface designer.

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

Judging by your answer, you agree with Alan Cooper's opinion. But I’m closer to the opinion of Jef Raskin with a small reservation from Ediger-Jobs about the pacifier.