Когда мы разобрались какие бывают интерфейсы и какие дизайнеры их делают, самое время окунуться немного в терминологию.
К цифровым приложениям применяют несколько терминов: юзабилити приложения, UX и UI. Сейчас с вами каждый из них разберем.
Понятие юзабилити предполагает под собой удобство и простоту использования. Продукт должен быть понимаемым, изучаемым, используемым и привлекательным. Юзабилити позволяет понять, достигнет ли пользователь своих целей в приложении.
Улучшить юзабилити можно с помощью сокращения количества кликов из точки А в точку Б, повысить скорость загрузки страницы, сделать шаги понятнее и проще.
Можно оценить юзабилити по следующим критериям:
- Простота. Новому пользователю довольно просто и легко ориентироваться в приложении. Просмотру основной информации не мешают рекламные баннеры или всплывающие окна.
- Запоминаемость. Насколько быстро пользователь ориентируется в продукте при следующем посещении.
- Удовлетворенность. Доволен ли пользователь текущим функционалом, дизайном, полученной информации.
- Эффективность. Насколько быстро пользователь решит свою задачу в приложении: запишется на прием к доктору или переведет деньги.
- Ошибки. Количество ошибок на пути пользователя: как часто он их совершит передвигаясь по навигации приложения.
По мере того, как развивались интерфейсы, стали появляться законы, которые успешно применяются в работе.
Якоб Нильсен начал свою работу над законами юзабилити еще в 80-х годах и сформировал из них так называемые эвристики Нильсена, по которым должен создаваться будущий интерфейс приложения.
Их 10, давайте кратко пройдемся по каждому:
- Видимость статуса системы. Дизайн должен всегда информировать пользователя о состоянии системы. Например, после оплаты в интернет магазине важно рассказать, что оплата прошла. Или после разблокировки телефона мы видим статус заряда батареи, индикатор что мы подключились к Wi-Fi или информацию о том, что мы запретили присылать нам голосовые сообщения в телеграм.
- Говорить на языке пользователя. Все тексты должны быть понятны пользователю, никаких узкоспециализированных терминов, а дизайн должен быть схож с реальным миром. Именно поэтому у строки поиска есть иконка лупы, а включение того или иного режима выглядят как тумблеры на физической панели.
- Контроль и свобода действий. Пользователи в интерфейсах совершают ошибки и хорошая система всегда дает возможность пользователю вернутся на несколько шагов назад или закрыть текущее окно. Это способствует чувству свободы и уверенности.
- Стандарты и последовательность. Современный пользователь уже обучен работе с приложениями и сформировал ментальную модель. Стандарты должны быть внутри вашего приложения, экраны должны иметь схожую структуру, а одни и те же компоненты не отличаются друг от друга. Это же самое касается и общих ментальных моделей определенных групп элементов: пользователи привыкли, что фильтр в интернет-магазине всегда находится слева, не переучайте его искать и открывать фильтры спрятанные где-то под кнопкой.
- Предотвращение ошибок. Хорошо показывать пользователю сообщения об ошибках, но лучше всего эти ошибки предотвращать. Не правильно введенные пользовательские данные могут попросту не дать возможности связаться с пользователем. Например в наборе номера в форме обратной связи, лучше подсветить правильность ввода и показать маску телефона. Или дополнительное подтверждения удаления какого-либо объекта, например страницы.
- Узнаваемость. Не заставляйте пользователя думать, как работать с вашим сайтом, не прячьте важные вещи в дальний угол и не позволяйте ему запоминать одни части информации интерфейса в другой. Например при покупке товара в интернет магазине покажите рядом способы оплаты и доставки, чтобы пользователь не искал эту информацию по вашему сайту. Или при заполнении большого количества полей в форме, не пишите о чем поле внутри этого поля, пользователь может забыть что он заполнил.
- Гибкость и эффективность. Поведение и внешний вид сайта или приложения могут иметь несколько вариаций под запросы каждого пользователя. Например, вы можете авторизовывать пользователей на сайте не только с помощью электронной почты, но и с помощью социальных сетей. А закрытие модального окна может происходить не только по иконке крестика, но и по нажатию клавиши Escape на клавиатуре.
- Минималистичный и эстетичный дизайн. И это не означает, что нужно создавать сайты и приложение в едином стиле, речь о содержании и удержания внимания на главной информации. Не позволяйте ненужным элементам отвлекать внимание от содержания.
- Распознавание ошибок. Сообщения ошибок должны быть доступны пользователям на простом и понятном языке. Избегайте технического жаргона.
- Справочник и документация. Хорошо, когда ваша система или приложение не нуждается в дополнительной документации и объяснениях, но лучше такую документацию всегда иметь, чтобы помочь пользователям объяснить, как им решить свою задачу. Будьте краткими и пошагово рассказывайте, как работать с системой, не забудьте про поиск в документации.
Двигаясь по этому списку, можно избежать возникновению большинства проблем у пользователей при работе с приложением.
Перед тем, как мы разберем термины UX и UI погрузимся немного в исторический контекст, чтобы понимать, как мы пришли к текущей точки.
Еще в начале 90х годов интернет выглядел как белый лист с простыми синими ссылками, речи о красивых и эмоциональных сайтах тогда и не шло. Немногочисленные сайты в сети интернет и во все не воспринимали как инструмент продаж.
Всего этого было достаточно для того, чтобы представить компанию в сети и опубликовать важную информаци.
К концу 90х годов на сайтах стала появляться примитивная HTML-верстка: таблицы, текст и изображения в несколько колонок. Появилась простейшая навигация и первые конструкторы сайтов.
Появилась flash-анимация, бесконечно мигающие кнопки и полноценный рай для эпилептических припадков. Всё это не выглядело как полноценная дисциплина, а просто как хаотичный набор всего и сразу, просто чтобы выделиться среди других.
В 2000х года стал разрабатываться стандарт каскадных таблиц стилей, так называемый CSS, с помощью которого будущие сайты и приложения стали обретать иерархию, формы. Контент стал становиться динамичным понятие дизайн стало расти в полноценную дисциплину, технологии улучшались, а хаос стал принимать форму.
В конце 2000х появился iPhone и первые смартфоны, которые совершили революцию в мире потребления интернета. Так появились полноценные мобильные приложения.
Важно отметить, что даже адаптивных версий сайтов, в том виде, в котором мы видим их сейчас не существовало. Была эпоха WAP-интернета, мобильный траффик был довольно дорогой и все взаимодействие немного отличалось от текущих реалий.
Спустя 20 лет мы пришли к эпохе web 2.0., бизнес понял, что интернет это не только узнать контакты компании, но еще и отличная площадка для продаж.
Программы, которые установлены у вас на компьютере стали перетекать в браузер, взаимодействие с ними стали проще. Оффлайн бизнес стал оцифровываться и выходить в онлайн.
Количество сервисов и приложений стало расти в геометрической прогрессии и за внимание пользователя теперь вновь приходится бороться.
Чтобы выиграть в этой борьбе — дизайн становится полноценной дисциплиной, которая предполагает не только наличие красивых картинок, но и полноценную аналитику поведения и потребностей пользователя, решение их проблем, задач и болей.
Электронный музей веб-дизайна. Все версии популярных сайтов, начиная с самых ранних. https://www.webdesignmuseum.org/
Всё это можно решать с помощью UX и UI. Это главные инструменты дизайнера, с помощью которых он управляет вниманием пользователя.
Наверняка вы уже слышали о них, но пока не понимаете в чем разница. Самое главное, что их не стоит связывать, оба термина имеют совершенно разные значения, но не могут существовать друг без друга.
Например, вы делаете ремонт и собрали кухню вашей мечты. Здесь у вас удобно под рукой лежат губки для посуды, лежит сушилка для чашек и тарелок, удобно висят половники и лопатки, а в полке спрятаны сковородки. И все вам так, как надо, все под рукой. А дховой шкаф не внизу, куда нужно сгибаться, а встроен в тумбу, на уровне глаз и его легко открыть и достать еду.
При готовке вам удобно пользоваться кухней, ничего не мешает и не затормаживает процесс. Всё это про опыт или UX.
Но при всем при этом, у вашей столещницы прекрасный ореховый цвет, ваши лопатки и половники подобраны в цвет кухни и красиво выглядит кран с раковиной. Все это про визуальную составляющую или UI.
Думаю, вам стало немного понятнее после таких аналогий, теперь предлагаю немного углубиться
UX
UX — он же User Experience, опыт восприятия, взаимодействия. Про эмоции и ощущения. Его нельзя потрогать, но можно почувствовать.
Пользуясь приложением, вы не замечаете работу UX, пока вы с легкостью и без ошибок проходите пути решения вашей потребности. Но как только вы сталкиваетесь с вопросом: а что будет, если я нажму сюда, то вам попался плохой UX.
Опыт взаимодействия всегда субъективен и дизайнер не всегда может знать, как закрыть потребность пользователя, ведь сам он может не являться пользователем приложения которое разрабатывает.
Чтобы его измерить, необходимо прибегать к исследованиям и тестам. В ряде интерфейсных решений можно полагаться на свою экспертную оценку и проектировать с учетом устоявшихся паттернов поведения.
Об этом мы с вами поговорим в следующих уроках.
Вот пример хорошего проектирования пользовательского опыта:
Сервис Кинопоиск, который предлагает пользователю промотать титры в сериале по клику на одну кнопку. Больше не нужно искать момент и не доматывать или перематывать титры. Это несущественная мелочь делает опыт использования приложения гораздо приятнее.
Или поисковая строка яндекса. После ввода запроса, яндекс выдает нам огромное количество ссылок всего за несколько секунд. Это тоже про опыт, так как нам не нужно часами сидеть в библиотеке и искать нужную информацию.
UI
А вот всё что мы можем увидеть своими глазами на экране нашего гаджета, это всё про UI или User Interface, пользовательский интерфейс.
Не стоит его путать с продуктами отдельных дисциплин таких как: графика, иллюстрации или 3D объектами. Речь идет о переносе потребностей пользователя, прототипов и макетов в привлекательный визуальный вид на экране вашего гаджета.
Сюда входят типографика, цвет, расположение отступы, тени, кнопки, карточки, выпадающие списки и так далее. С помощью UI дизайнер может управлять вниманием пользователя, указывать на более и менее важные вещи на экране.
UI это то, что пользователь продукта увидит в конечном итоге. UI позволяет взаимодействовать и обмениваться данными между человеком и приложением.
К тому же, эстетичный, приятный и красивый UI может оставить пользователя в приложении дольше и поможет побудить на покупку.
Золотое правило, что в интерфейсах никогда не должна преобладать форма над сутью. Важно, чтобы ваш красивый интерфейс не блокировал доступ к тем инструментам, за которыми пользователь открыл ваше приложение.
