The post has been translated automatically. Original language: Russian
Good design is when the user doesn't even notice that you haven't slept in three nights. Bad design is when he calls support at three in the morning.
Imagine a situation: a festive feast, the table is full of treats, and the aunt asks who you work for. You say, "Interface designer." Pause. "Oh, are you fixing computers? My printer just won't print." And you go to fix the printer. Because it's also a user experience.
In this article, we'll look at what UX and UI really are, why the city around you is the perfect tutorial on convenience, and how to survive the phrase "make it modern." No abstruse terms. Well, almost none.
UX and UI using the beshbarmak example
UI (interface) is what a meat dish looks like. UX (user experience) is whether a guest could reach the meat without knocking over a bowl of tea.
You can serve beshbarmak on a golden platter with shimmers and a frosted glass effect. But if the dish is on the cabinet, and the forks are given out by appointment, it's a beautiful interface and a terrible experience.
| UI (interface) | UX (experience) | |
| At the table | Beautiful tablecloth and tea set | The guest ate and was not offended |
| In the application | Button color, font, icons | The user paid in 20 seconds and didn't swear |
| The main question | "Is it beautiful?" | "Understood?" |
| How it breaks | Font with baby curlicues in the banking application | Ten steps of registration for the purchase of baursaks |
Moral: an interface without experience is a golden dish on a cupboard. An experience without an interface is delicious, but from a plastic basin. We need both.
The 7 Deadly Sins of the interface
1. A gray button on a gray background. The designer calls it "minimalism". The user — "where's next?". The contrast is not a whim, but a courtesy.
2. A 20-field form for subscription to the newsletter. Date of birth, mother's maiden name and favorite variety of koumiss. What for? "Just in case."
3. The "Something went wrong" error. Thanks, we figured it out. A good mistake tells you what happened and what to do: "One digit is missing from the number."
4. A password that is impossible to come up with. A capital letter, a number, a special symbol, a hieroglyph, and dragon's blood. And we will find out all this only after clicking "Done".
5. Badges without captions. Is a gear a setting, a filter, or an invitation to an auto repair shop? The user does not have to play the "Guess the Tune" game.
6. Pop-up window on the first second. "Subscribe!" — and I still haven't even figured out what kind of website you have. It's like proposing on a first date!
7. "We didn't check it, but my brother said it was fine." The main sin. A brother is not a sample. Even if he's very confident.
The good news is that the first six can be fixed in a couple of weeks. The seventh is treated by five real users and one hour of humility.
Phrasebook "customer — designer"
Half of the designer's job is simultaneous translation. We attach a pocket dictionary:
| The customer says | What does it mean | What to do |
| "Make a wow" | "I do not know what I want, but I will know when I see it." | Show three examples and ask to point a finger |
| "A bigger logo" | "It's important for me to be remembered" | Ask them what they should remember. Hint: not a logo |
| "Make it like expensive brands, but brighter" | "I want it expensive, but I want my mom to like it" | One bright color and plenty of free space |
| "There's a lot of emptiness, add something" | "I pay for every pixel" | Explain that a free place is also a design, like a steppe outside the city |
| "Well, there's a little bit to fix" | "Redo everything" | Setting three days instead of one hour |
| "We need yesterday" | "We need it on Friday, but we want to see it on Wednesday" | Show the draft on Wednesday. Tradition is tradition. |
| "Let's have another option." | "I like the first one, but I'm not ready to admit it yet." | Show the third one, especially worse. It always works |
Serious advice: there is a real business challenge behind any strange edit. Ask "why?" until you get to the bottom of it. Usually three times is enough.
Instead of a conclusion
A good user experience is about respect. To a person's time, to their nerves, and to the fact that they have more important things to do than your app. As guests at a festive table.
If you are making your product, start small: show the rough layout to the neighboring team in the shared office and be silent while they press the buttons. It will be difficult to remain silent. But it is at these moments that real design is born.
But fix your aunt's printer anyway. Reputation is more expensive.
Хороший дизайн — это когда пользователь даже не замечает, что вы не спали три ночи. Плохой дизайн — когда он звонит в поддержку в три часа ночи.
Представьте ситуацию: праздничное застолье, стол ломится от угощений, и тётя спрашивает, кем вы работаете. Вы говорите: «Дизайнером интерфейсов». Пауза. «А, компьютеры чинишь? У меня как раз принтер не печатает». И вы идёте чинить принтер. Потому что это тоже пользовательский опыт.
В этой статье разберёмся, что такое UX и UI на самом деле, почему город вокруг — идеальный учебник по удобству, и как пережить фразу «сделайте посовременнее». Без заумных терминов. Ну, почти без.
UX и UI на примере бешбармака
UI (интерфейс) — это то, как выглядит блюдо с мясом. UX (пользовательский опыт) — это то, смог ли гость дотянуться до мяса, не опрокинув пиалу с чаем.
Можно подать бешбармак на золотом блюде с переливами и эффектом матового стекла. Но если блюдо стоит на шкафу, а вилки выдают по предварительной записи — это красивый интерфейс и ужасный опыт.
| UI (интерфейс) | UX (опыт) | |
| За столом | Красивая скатерть и сервиз | Гость наелся и не обиделся |
| В приложении | Цвет кнопки, шрифт, значки | Пользователь оплатил за 20 секунд и не выругался |
| Главный вопрос | «Красиво?» | «Понятно?» |
| Как ломается | Шрифт с детскими завитушками в банковском приложении | Десять шагов регистрации ради покупки баурсаков |
Мораль: интерфейс без опыта — это золотое блюдо на шкафу. Опыт без интерфейса — вкусно, но из пластикового тазика. Нужно и то, и другое.
7 смертных грехов интерфейса
1. Серая кнопка на сером фоне. Дизайнер называет это «минимализмом». Пользователь — «а куда тут дальше?». Контраст — не прихоть, а вежливость.
2. Форма из 20 полей ради подписки на рассылку. Дата рождения, девичья фамилия матери и любимый сорт кумыса. Зачем? «На всякий случай».
3. Ошибка «Что-то пошло не так». Спасибо, мы догадались. Хорошая ошибка говорит, что случилось и что делать: «В номере не хватает одной цифры».
4. Пароль, который невозможно придумать. Заглавная буква, цифра, особый символ, иероглиф и кровь дракона. И всё это мы узнаём только после нажатия «Готово».
5. Значки без подписей. Шестерёнка — это настройки, фильтр или приглашение в автомастерскую? Пользователь не должен играть в «Угадай мелодию».
6. Всплывающее окно на первой секунде. «Подпишись!» — а я ещё даже не понял, что у вас за сайт. Это как сделать предложение на первом свидании!
7. «Мы не проводили проверку, но мой брат сказал, что нормально». Главный грех. Брат — это не выборка. Даже если он очень уверенный.
Хорошая новость: первые шесть можно исправить за пару недель. Седьмой лечится пятью настоящими пользователями и одним часом смирения.
Разговорник «заказчик — дизайнер»
Половина работы дизайнера — синхронный перевод. Прикладываем карманный словарик:
| Заказчик говорит | Что это значит | Что делать |
| «Сделайте вау» | «Я не знаю, чего хочу, но узнаю, когда увижу» | Показать три примера и попросить ткнуть пальцем |
| «Логотип побольше» | «Мне важно, чтобы нас запомнили» | Спросить, что именно должны запомнить. Подсказка: не логотип |
| «Сделайте как у дорогих брендов, но поярче» | «Хочу дорого, но чтобы маме понравилось» | Один яркий цвет и много свободного места |
| «Пустоты много, добавьте что-нибудь» | «Я плачу за каждый пиксель» | Объяснить, что свободное место — это тоже дизайн, как степь за городом |
| «Ну там чуть-чуть поправить» | «Переделать всё» | Закладывать три дня вместо одного часа |
| «Нам нужно вчера» | «Нам нужно в пятницу, но хотим увидеть в среду» | Показать черновик в среду. Традиция есть традиция |
| «Давайте ещё вариантик» | «Мне нравится первый, но я ещё не готов это признать» | Показать третий, специально хуже. Работает всегда |
Серьёзный совет: за любой странной правкой стоит настоящая задача бизнеса. Спрашивайте «зачем?» до тех пор, пока не докопаетесь до неё. Обычно хватает трёх раз.
Вместо заключения
Хороший пользовательский опыт — это уважение. К времени человека, к его нервам и к тому, что у него есть дела поважнее вашего приложения. Как к гостям за праздничным столом.
Если вы делаете свой продукт — начните с малого: покажите черновой макет соседней команде в общем офисе и помолчите, пока они нажимают кнопки. Молчать будет трудно. Но именно в эти минуты и рождается настоящий дизайн.
А принтер тёте всё-таки почините. Репутация дороже.
Share
