Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
ОЛЯ ЧЕРНЕНЬКАЯ: «ЛЮБЛЮ ЛЕНДИНГИ, КОТОРЫЕ ЗАСТАВИЛИ МЕНЯ КУПИТЬ»

UX/UI-дизайнер о том, как создавать интуитивные интерфейсы.

card-photo
card-photo
Ханна Руденко

Редактор SKVOT

Оля Черненькая была дизайнером в рекламном агентстве OkInternet и арт-директором в Smartica/Skykillers, основала студию дизайна MONO. Она создавала проекты для UNISEF, «1+1 media» и Amadeus. Главная специализация — UX/UI-дизайн сайтов и приложений.

Оля объяснила, что такое плохие интерфейсы, как проверить интерфейс на интуитивность и какие ошибки в UX/UI-дизайне допускают чаще всего

 

UX (USER EXPERIENCE) — это комплексный опыт при взаимодействии с сервисом или продуктом. Он имеет отношение ко всему: как выглядит и загружается сайт продукта, как работает служба поддержки, как долго ждем заказ. Над UX работает команда, и UX-дизайнер должен учитывать все аспекты и по возможности влиять на них.

UI (USER INTERFACE) — это часть UX, которая касается работы человека с интерфейсом. UI-дизайнер отвечает за то, насколько удобно пользоваться кнопками, видно ли шапку (хедер), легко ли найти личный кабинет. Его сфера ответственности не такая широкая, как у UX-дизайнера.

UX и UI разделять нельзя. Работая над дизайном кнопок и форм, хороший UI-дизайнер думает об опыте пользователя в целом, а UX-дизайнер может углубиться в детали интерфейса.


UI — часть UX

Что нужно, чтобы быть UX/UI-дизайнером

Кроме технических навыков у UX/UI-дизайнера должны быть:

Теоретическая база. В университетах учат графическому дизайну, но системного подхода в UX/UI-дизайне не дают. Занимайтесь самообразованием — читайте статьи и книги, проходите профильные курсы.

Понимание процесса. Нужно уметь работать в команде и с клиентом, знать оптимальный порядок действий, ключевые моменты, которые нужно согласовывать с утверждающей стороной.

Понимание пользователя. Важно думать, как с продуктом будут взаимодействовать пользователи и как он будет решать их задачи. Дизайн — не для портфолио, а для людей, которые будут пользоваться продуктом.

Умение сотрудничать. Дизайнер не может знать всех аспектов бизнеса или продукта, поэтому чтобы дизайн получился хорошим, нужны знания и экспертиза всей команды.

Вкус. Эстетика и насмотренность играют большую роль. Нужно присматриваться, что и как устроено в других продуктах, чтобы учиться на чужих ошибках и перенимать хорошие решения.

Критическое мышление. Сомневайтесь в своих гипотезах, тестируйте их. В работе над дизайном нельзя быть самоуверенным.

Смелость. Показывать промежуточный результат работы страшно, но нужно обсуждать с командой даже сырые UX/UI-решения — так финальная версия будет лучше.

Хорошие и плохие интерфейсы

Интерфейс — это посредник между продуктом и человеком. В идеальном интерфейсе нет помех и ограничений, там все быстро, просто и качественно. Сделать такой интерфейс почти невозможно, но к этому нужно стремиться, используя новые технологии и идеи из других сфер.

Я стараюсь окружать себя хорошими интерфейсами, но временами сталкиваюсь и с проблемными.

Последний такой случай был с веб-приложением одного из банков, когда переводила деньги с бизнес-счета на личный. Сначала пыталась разобраться с интерфейсом сама (банк выслал две инструкции). Потом коллеги, которые тоже не могли перевести деньги, поехали в отделение и сняли видеоинструкцию. С ее помощью деньги я отправила, но в момент перевода на экране высветилось огромное сообщение мелким красным шрифтом на белой плашке с красным контуром.

Я запаниковала: «Деньги пропали!». Но это просто было подтверждение, что перевод прошел. Сложности с переводом денег были не только у меня — другие ребята справились только через месяц, и то с помощью сотрудников банка. 


Тревожное сообщение об успешном завершении действия в интерфейсе OTP bank

Очевидно, что когда приложением пользуется много людей, таких ситуаций быть не должно. Интерфейс может быть некрасивым, без модных градиентов и анимации, но удобным и функциональным.

Люди привыкают не только к хорошему, но и к плохому.

Например, сайт «Укрзалізниці» кажется «тяжелым», но искать билеты там легко. Людям с высокими эстетическими запросами больно на него смотреть, но задачу большинства он решает. По-настоящему плохой интерфейс — это когда смотришь на кнопку и не понимаешь, зачем она нужна.

Люди привыкают не только к хорошему, но и к плохому. Редизайнить визуально «плохой» сервис с большой аудиторией нужно осторожно, итерационно. Лояльные пользователи критично и с опаской принимают любые изменения.

Интуитивный интерфейс

Интуитивность сайта или приложения оценивается по тому, как в нем ведет себя пользователь. В идеальной ситуации:

#1. Пользователь легко находит в интерфейсе то, что поможет решить его проблему. Он сразу понимает, куда попал и что нужно сделать.

#2. Понимает, как взаимодействовать с любым элементом. Кнопки должны выглядеть как кнопки, поля ввода — как поля ввода, а то, что выглядит кликабельным, должно быть кликабельным.

#3. Может предугадать, что произойдет, если начать взаимодействовать с элементами. Тут важен не только дизайн, но и текст. Без понятной лаконичной надписи кнопка — не кнопка.

#4. Дизайн отзывчивый. Если пользователь нажал «Сохранить», должно появиться подтверждение. При загрузке файлов тоже нужны обозначения: для коротких закачек — прелоадер (крутящийся кружочек), для долгих — прогресс-бар (индикатор загрузки).

#5. Результат соответствует ожиданию. Если пользователь удивился результату своих действий, поймите, почему, и исправьте ситуацию.

Ошибки в дизайне интерфейсов

Добавлять слишком много анимации. Анимацию стало проще делать, и этим пользуются с перебором. Не стоит бездумно анимировать все подряд, у всего должна быть цель. Например, обратить внимание на что-то важное или показать, что элемент реагирует на действие.

 
Анимация с волнами мешает читать текст. Источник: dribbble.com

Не думать о проблемах. Путь пользователя (user flow) часто проектируют только по позитивному сценарию. Но всегда нужно думать о тех, кто потеряется, ошибется, нажмет не то. Продумайте оповещения, отмену действий, возможность вернуться назад. Анализируйте, как часто люди пользуются отменой и возвращением. Если это происходит слишком часто, доработайте интерфейс.

Если мы часто подтверждаем одно и то же действие, вырабатывается привычка кликать «ОК». В сервисах, где действие связано с большими потерями (отправление денег, писем), нужно дать пользователю возможность «откатиться назад». Gmail, Facebook Messenger и многие другие уже добавили функцию отмены действия (отправки письма, пересылки сообщения из одного чата в другой) в течение нескольких секунд. Мы нажимаем «отменить» реже, чем «подтвердить», поэтому привычка отменять не формируется. 


Функция отмены действия в Telegram

Ставить непонятные иконки. Если иконки уникальные и их смысл сразу не считывается, нужно их подписать. Есть универсальные иконки: wi-fi, стрелочка назад, крестик, но даже они могут быть непонятными не в своем контексте. На этапе тестирования спрашивайте у пользователей, как они понимают иконку. Если они отвечают не то, что вы ожидали, подпишите этот символ. 


Иконки с объяснениями в Airbnb

Неудобные формы обратной связи. Формы — самый важный элемент взаимодействия на лендинге. Остальные блоки подают информацию «пассивно» через картинки, видео или текст, а форма требует от пользователя активного действия. 


Форма с полями разной длины. Источник: profity.online

С формами много нюансов. Например, не нужно скрывать описания полей при вводе текста (особенно если полей много). Человек может отвлечься и забыть что нужно ввести.

Еще нужно показывать какие поля обязательны, а какие — опциональны. Так ошибок будет меньше. Например, если человек не хочет оставлять номер телефона и отправит форму без него (потому что думает, что это не обязательно), то увидит оповещение об ошибке. Дизайнер должен сделать так, чтобы в работе человека с интерфейсом было как можно меньше ошибок.

Часто поля выравнивают по длине, но так сложнее их различать. Если поле предназначено для ввода телефонного номера (количество символов фиксировано), ограничьте его под эту длину. Так его будет проще визуально опознать.

Факапы в работе с UX/UI дизайном

Три года назад мы делали сайт для украинской новой полиции (сейчас дизайн сайта снова обновился). Сразу после запуска на нас обрушилась волна негативных комментариев от пользователей. Дело в том, что языковые версии сайта обозначались флажками стран. По умолчанию выбирался язык, который человек использовал на компьютере. У многих это был русский, поэтому у них на сайте отображалась русская версия и российский триколор. Видеть этот флаг на сайте украинской полиции не хотели.

Мы это быстро исправили, поставив UA, EN, RU. Но проблемы можно было бы избежать, если бы мы пошли дальше шаблонного решения. Всегда нужно помнить, какая у сайта аудитория и какой у нее контекст. Если идешь в другую страну, важно заранее провести анализ рынка и выяснить нюансы, связанные с менталитетом. 

Российский флаг под украинскими названиями выглядит неуместно

Как выявлять ошибки в интерфейсе

Не ждите готового продукта, чтобы узнать реакцию пользователей — выявляйте её уже на этапе прототипа. Статичную картинку нельзя «пощелкать», как сайт, но можно задать по ней вопросы. Они будут звучать так:

Как думаешь, …

1. что здесь нужно сделать?

2. что произойдет, если нажать на эту кнопку?

3. где ты теперь оказался?

4. что тебе делать дальше?

Когда интерфейс станет кликабельным, можно продолжить полноценное тестирование.

Тестируйте приложение на целевой аудитории. Не все, что очевидно для вас как дизайнера, ясно для остальных.

Проблемный интерфейс приложения или сайта грозит бизнесу всем, к чему могут привести недовольные клиенты: потерей репутации, оттоком пользователей, снижением прибыли. Если пользователь долго ждет или не понимает, к чему привело его действие, он не будет разбираться, а уйдет искать сервис, где все будет просто и понятно. Если вы монополист, и пользователям очень нужен ваш продукт, они будут вынуждены терпеть. Но как только появится что-то более удобное, выгодное или несущее важную дополнительную ценность, они переключатся.

Хороший интерфейс — важное конкурентное преимущество. Он особенно важен там, где без интерфейса и продукта нет (приложения, веб-ресурсы, игры).

Этапы работы над дизайном лендингом

Создание лендинга может занимать несколько месяцев. Вот как выглядит схема работы над ним:

#1. Определяем цель лендинга. Она будет задавать вектор.

#2. Анализируем. Смотрим на конкурентов и свою аудиторию.

#3. Составляем структуру. Отталкиваемся от контента.

#4. Прототипируем. Схематически показываем страницы, делаем прототип кликабельным. На этом этапе уже можно начинать тестирование.

#5. Разрабатываем дизайн. Адаптируем лендинг под разные размеры экранов. Дизайнер прорабатывает поведение всех элементов и их состояний (неактивное, активное, в процессе взаимодействия, с ошибкой), показывает анимацию разных элементов, передает все материалы разработчикам.

#6. Проверяем дизайн. Когда верстка готова, дизайнер проверяет, все ли учтено, нужно ли что-то поправить.

#7. Тестируем. Тестировщик проверяет все возможные сценарии поведения пользователя и находит ошибки, которые потом исправляются.

Если лендинг нужно сделать быстро, достаточно этих блоков:

Хедер. В нем указана важная информация с ключевыми точками лендинга.

Первый экран. Его видят в первый момент и решают: скроллить дальше или уходить.

Описание продукта. Лендинг обычно создается для продажи товара или услуги. Этот блок детально или сжато рассказывает, почему продукт классный, чем он поможет и как отличается от конкурентов.

«Причина верить». Отзывы людей и компаний, которые попробовали продукт.

Призыв к действию. Основная цель должна прослеживаться везде, но в финале нужна завершающая кнопка-действие — «купить», «оставить контактные данные», «подписаться», «начать использовать».

Три любимых лендинга

Люблю лендинги, которые заставили меня купить — в основном это лендинги инструментов для дизайна. Вот мои фавориты:

ZeplinОблачный сервис для передачи исходников разработчикам. Нравится, что уже на первом экране (еще до «демо») показывается, как работает интерфейс. Это меня увлекло и заставило скроллить дальше.

 
Информацию об элементе в Zeplin можно получить по клику. Источник: zeplin.io

Toggl. Сервис для трекинга времени. Главный плюс лендинга — яркие эмоции, которые создатели добавили к скучной теме трекинга времени. 



Забавная смысловая анимация на лендинге Toggl. Источник: toggl.com

SketchЗдесь тоже есть анимация, но ненавязчивая. Она не отвлекает от контента, а концентрирует на нем внимание пользователей. Там фокус на визуализации продукта и том, как он работает. 


Анимированная презентация части интерфейса в Sketch. Источник: sketch.com

Любимые визуальные эффекты 

Анимация. Недавно начала пользоваться конструктором сайтов Readymag, который позволяет без разработчика создать сайт с анимацией. Один из моих любимых примеров на Readymag — сайт про Стенли Кубрика. Тут много анимации, но она на 100% поддерживает тему кинематографии. 

Минимализм, болдовые шрифты без засечек, открытые цвета, контраст. Люблю, когда все чисто и понятно. 

Необычная верстка в стиле оформления книг, журналов и плакатов. 

Круто, когда можно привлечь 3D-дизайнеров, иллюстраторов, фотографов. Уникальный контент на сайте помогает визуально выделиться на фоне конкурентов. 

Тренды в дизайне — следовать или игнорировать?

Ничего не имею против трендов. Все зависит от продукта, над которым работаешь, — если он в духе времени, трендовые приемы вполне можно использовать. Но важно не слиться с другими, а это может произойти, если следовать трендам вслепую. Я вдохновляюсь и отслеживаю тенденции на Awwwards, CSS Design Awards, Behance, Dribbble.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту