Professional quality user friendly design инструкция на русском

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

В статье поговорим о главных характеристиках UI, которые помогают установить контакт с аудиторией и позволяют сохранить прочную связь на протяжение длительного времени.

В переводе на русский понятие означает «дружественный для пользователей». То есть интерфейс, который создаётся под конкретную группу людей или без чёткой целевой аудитории, но нацелен на максимальное удобство пользователей.

Главная цель user-friendly интерфейса заключается в обеспечении идеального user experience. Чтобы после установки приложения или использования сайта остались только положительные эмоции. Если удастся добиться такого эффекта, конверсия будет высокой.

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

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

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

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

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

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

Если у компании нет опыта разработки коммерческих проектов, надо проанализировать решения конкурентов и посмотреть на то, как крупные корпорации выстраивают взаимоотношения с клиентами в цифровом мире.

Главные характеристики user-friendly UI

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

Многие дизайнеры знают, что на user experience влияет не только типографика и красивая анимация, но и то, как выстроен «путь клиента». Если в процессе выполнения задачи постоянно возникают отвлекающие факторы, компании не стоит рассчитывать на коммерческий успех продукта.

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

Интуитивность

UX-проектировщики часто спорят о том, каким должен быть digital-продукт, чтобы им было удобно пользоваться. Больше всего разногласий возникает по поводу интуитивного взаимодействия с UI.

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

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

Чтобы интерфейс был интуитивно понятным, необходимо использовать знакомые инструменты, которыми люди привыкли пользоваться на постоянной основе. Это касается меню, форм, баннеров и других UI-элементов.

Предсказуемое поведение

Предыдущая характеристика тесно связана с предсказуемостью. Пользователи очень не любят, когда при использовании UI что-то идёт не так. Они рассчитывают, что продукт поможет быстро решить их задачи и не хотят тратить много времени на обучение.

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

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

Простота

Надо постараться сделать интерфейс таким, чтобы у пользователей с первых минут знакомства возникло ощущение, что пользоваться им так же просто, как открыть приложение погоды с утра. Запустил виджет, посмотрел температуру и ушёл заниматься своими делами.

Многие дизайнеры часто думают, что простота ассоциируется с недостатком креативности. Якобы, чем проще интерфейс, тем меньше времени аудитория будет в нём проводить. Чтобы избежать этого они размывают фокус и стараются всяческими способами удержать пользователей внутри UI.

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

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

Быстродействие

Простые интерфейсы не всегда быстро загружаются. Эта задача тоже частично ложится на плечи дизайнера. Если он сделал UI перегруженным, то разработчику ничего не остаётся, как превратить картинку в инструмент, которым будет пользоваться аудитория.

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

Представьте, что выбрали товар на сайте, но решили установить приложение, чтобы получить скидку на первый заказ. Запустили его и 10 секунд ждёте, пока прогрузится приветственный баннер. Логично, что после такого ожидания уже не хочется заказывать товар и пользоваться приложением.

Стоит учитывать и то, что не у всех быстрые смартфоны. Например, на некоторых устройствах приветственный баннер в приложении Aliexpress грузится больше 5 секунд, а потом еще столько же времени интерфейс недоступен для взаимодействия.

Быстрый UI — ключ к сердцу целевой аудитории. Пользователи устали от медленных сайтов и приложений, которыми невозможно пользоваться. Они разрушают user experience и не приносят никакой пользы.

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

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

Защита от ошибок

Как показывает практика, пользователи не всегда взаимодействуют с интерфейсом по стандартному сценарию. Даже если они прошли ознакомительный тур по системе, многие всё равно идут другим путем и могут сталкиваться с ошибками.

В user-friendly интерфейсе должна быть защитный механизм, который не позволит выйти за определённые рамки. Например, если закрыть окно регистрации после запуска приложения, оно должно повторно запускаться по клику на кнопку. Если этого не будет, многие потенциальные клиенты не смогут создать учётную запись.

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

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

Защита от ошибок показывает пользователям, что о них позаботились. Можно спокойно решать свои задачи и не переживать, даже если что-то пойдёт не так. Такой подход позволяет установить прочную связь с целевой аудиторией и укрепить положительный имидж бренда.

Советы по созданию интерфейса для коммерческих продуктов

Мы уже частично рассказали о том, каким должен быть интерфейс, чтобы пользователи не прощались с продуктом сразу после знакомства. Интуитивность, предсказуемое поведение, простота, быстродействие и защита от ошибок влияют на user experience, но есть и другие аспекты, которые тоже важны.

Сделайте так, чтобы UI общался с пользователями

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

Визуальный сторителлинг — сильный приём, который помогает вовлечь аудиторию в использование продукта. Надо постараться сделать интерфейс максимально простым, логичным и «говорящим». Это не значит, что необходимо добавить как можно больше подсказок и других интерактивных инструментов.

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

Общение с аудиторией может проявляться по-разному, но не стоит слишком давить на людей. Предоставьте им полную свободу действий и анализируйте, как они используют UI.

Позаботьтесь о привлекательности

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

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

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

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

Предусмотрите персонализацию

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

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

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

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

Объясняйте действия

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

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

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

Мягкие подсказки — идеальное решение, потому что они не оказывают давление, но при этом справляются со своей задачей. Добавляйте тултипы только к элементам, которые могут вызвать вопросы.

Собирайте обратную связь

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

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

В процессе разработки интерфейса члены команды часто обращаются за помощью к представителям целевой аудитории, чтобы совместными усилиями найти идеальное решение, но этого недостаточно. Когда продукт появляется в общем доступе, количество тестировщиков увеличивается в несколько раз. Некоторые из них могут найти ошибки, которые не заметили на этапе создания UI.

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

Думайте о пользователях

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

Дизайнерам-новичкам часто говорят, что надо думать об аудитории, но не рассказывают, что именно надо делать. Секрет создания успешного коммерческого продукта кроется в удобном UI, который помогает быстро решать проблемы.

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

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

Веб-студия IDBI больше 14 лет разрабатывает коммерческие продукты и входит в ТОП-10 разработчиков России. Обращайтесь к нам, если хотите не просто сделать сайт, а решить с помощью него свои задачи.

Меня зовут Алексей Кулаков, я генеральный директор digital-продакшена JetStyle. Больше 15 лет я занимаюсь дизайном взаимодействия — проектирую привлекательные для пользователя интерфейсы с удобной структурой. 

За это время сменилось немало трендов и предметом внимания дизайнера наконец стал опыт, который он создает. Это особенно заметно в среде, где для коммуникации  используют множество каналов: сайты, мессенджеры, видео, аудио, почту, опыт в оффлайне и т.д. Но создавать дизайн только как набор экранов больше нельзя — получается всё хуже. Поэтому всё чаще мы концентрируемся на создании клиентского опыта (CX) и опыта пользователя (UX) внутри него. 

В этой статье я расскажу о том, как устроен дружественный для пользователя сайт. Разберёмся, какие сценарии пользовательского поведения существуют, а также поговорим про то, чем UX отличается от UI и и задачах навигации на сайте.

User friendly сайт — что это

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

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

Цели человека и сценарии пользовательского поведения

Цель — это то, ради чего человек вообще действует: представление о том, как  изменится жизнь после взаимодействия с продуктом. Цель пользователя — не обязательно приобретение товара, но она обязательно изменяет его поведение, так как он хочет. 

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

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

В конечном итоге тут цель человека — «нравиться себе в зеркале». Но для проектирования интерфейсов нас интересует цель в тех терминах, в которых пользователь её перед собой ставит, открывая браузер для «вот этой вот задачи». Если он идет к цели «я хочу попасть в офис», надо сначала ему помочь в этом. Понять, какие ему предстоят задачи (в данном случае: найти адреса офисов, соотнести их с местами, где он регулярно бывает, решить когда он поедет и откуда — из дома или с работы, выбрать транспорт, прикинуть маршрут и не забыть это всё до момента визита). 

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

Примеры целей: 

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

В это же время у бизнеса есть свои задачи для сайта:

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

Прежде, чем ставить задачи на сайт, нужно описать, какой сценарий развивается в жизни человека:

1. Как возникла проблема у человека.
2. Как он перешел к ее решению.
3. Какие шаги ему надо предпринять без вашего сайта или приложения.
4. Как он получил профит, или почему у него не получилось.
5. Куда он пошел после завершения сценария.

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

• Какие шаги ему надо предпринять, с помощью нашего приложения/сайта.
• Как он получил профит, и чем ситуация стала лучше.

Чтобы это изменение в его жизни произошло, надо понять, какие барьеры ему мешают сейчас, и снять их в процессе коммуникации. Пример: человек ищет в интернете, где смотреть любимые сериалы? Какие у него барьеры?

• «я не знаю, как выбрать стриминговый сервис, большая ли там библиотека»;
• «я не понимаю, сколько это должно стоить»;
• «у меня нет доверия к этому сервису, действительно ли он подойдет мне и моей семье? сможет ли им безопасно пользоваться мой ребёнок?».

1. Сперва описываем сценарии — как пользователь продвигается к цели своего визита.
2. Фиксируем моменты, которые должны быть в сценарии решения задач.
3. Компонуем их по экранам. Даем экранам названия, чтобы было понятно, что там происходит.
4. Рисуем карту переходов по страницам.

Метрики юзабилити сайта

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

В юзабилити я обычно пользуюсь следующими метриками:

• Обучаемость. Вам сразу понятно, где вы находитесь, что здесь можно делать, как ведет себя интерфейс — ни про что не нужно догадываться. С обучаемостью всё в порядке, если вы пришли на сайт и с самого начала быстро в нем разобрались. 
• Запоминаемость. Например, вам было сложно первый раз разобраться в интерфейсе, но вы возвращаетесь через три недели и знаете, что нужно делать. 
• Процент пользовательских ошибок — негативная метрика. Ошибки бывают минорные и критические. Критические — когда пользователь не смог выполнить свою задачу: пришел на сайт, тыкался-тыкался, с задачей не справился, зашел в тупик. Есть ошибки некритические: когда представление пользователя о том, как себя будет вести интерфейс расходится с тем, как он ведет себя на самом деле, но сценарий всё-таки выполняется, пользователь доходит до своей цели. 
• Эффективность. Пользователь тратит сколько-то усилий для достижения своих целей: эти усилия можно измерять во времени, которое пользователь тратит, чтобы достигнуть своей цели, или в количестве кликов. Высокая эффективность — это когда человеку нужно приложить мало усилий для достижения задачи. В идеале задача должна решаться вообще без усилий.
• Субъективная удовлетворенность. Если предыдущие метрики можно измерить, глядя на пользователя снаружи, — просто смотреть, что он делает — то уровень субъективной удовлетворенности мы не поймем без разговора с пользователем. На удовлетворенность влияют не только эти 4 метрики, но и имиджевое соответствие: насколько представление пользователя о том, как этот сайт выглядит, совпадает с реальностью, какой tone of voice у контента. Насколько его впечатление совпадает с тем, что сайт для таких как он, в его актуальном контексте. В конечном итоге, клиенту или приятно, или неприятно пользоваться интерфейсом.

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

• Например, если мы говорим о сценарии покупки в один клик, когда пользователь впервые столкнулся с лендингом, купил, и больше мы с ним не взаимодействуем — то основные метрики, которые нам важны — обучаемость и процент пользовательских ошибок. И мы оптимизируем сайт под них. Но в 2021 году кейс, когда клиент пришел, увидел и купил — не основной.
• Работа с повторной продажей. Если пользователь уже ответил на многие вопросы, не заставляйте его повторять ненужные операции. Важно, чтобы он быстро вспомнил логику навигации и повторил заказ. Также хорошо бы проявить заботу и благодарность — например, предложить скидку за повторную покупку.
• Длительная продажа. Часто пользователи не покупают при первом посещении — помогите им и покажите, что они смотрели в прошлый раз, предложите подписаться на рассылку. Сайт должен помогать в телефонной продаже: очень важно иметь простую для объяснения в разговоре навигацию (простые адреса, внятную структуру отдельной страницы, четкое зонирование). 

Отличие UX от UI

• как выглядят сервисные функции — визуальная примерка платья с помощью дополненной реальности, возможность положить товар в корзину или избранное, сравнение параметров товаров; 
• паттерны: табы, радиобаттоны, кнопки, линки, свайпы;
• экраны — главная, поисковая выдача, страница товара, страница корзины; 
• модули — это визуальные «фразы», например, форма регистрации, лид статьи 
• и т.д.
  Чтобы пользователю было комфортно, нужно заниматься и UX, и UI, но UI должен быть подчинен UX. 

Рекомендации по UI:

• Главное внимание — главным действиям. Когда вы находитесь на каком-то экране, нужно четко понимать, какому сценарию экран посвящен. Элементы интерфейса, связанные с главным сценарием, должны быть на самом заметном месте. Не должно быть такого, что самая главная ценность, которая есть в интерфейсе, находится за какой-нибудь плашкой в третьем экране сверху — её никто не увидит.
• Когда вы располагаете элементы по экрану, должна быть явная иерархия заметности элементов. Вы что-то хотите показать клиенту в первую очередь, что-то — во вторую. Это похоже на планы восприятия в изобразительном искусстве: то, что на первом плане и в центре композиции — крупное, то, что на среднем — оттеняет его и вступает с ним в диалог, то, что на фоне — не выпячивает своих деталей. Это правило применяется для выбора контраста между размерами и оформлением элементов. Контраст должен быть явным. 
• Необходимый минимум стилей оформления. Стили оформления — это слова и правила визуального языка, которым вы пользуетесь. На освоение закономерностей пользователь тратит умственные усилия, поэтому правил надо вводить мало и придерживаться их во всех интерфейсах. Так пользователь быстрее поймет, как тут всё устроено, и будет меньше ошибаться. Кроме того, когда мы считываем визуальные закономерности и понимаем, что всё аккуратно организовано, пространство воспринимается как более приятное. 
• Навигация должна отвечать на вопрос «где я нахожусь»:
• это страница товара, 
• это результаты поиска, 
• это главная страница сайта, 
• я сейчас на странице корзины и т.д. 

  А также пользователь должен понимать, где он находится относительно других страниц сайта: как ему вернуться туда, откуда он пришел, где он находится по отношению к главной и т. д. Третья задача навигации — отвечать на вопрос «что я могу здесь делать?». 

• Мобильный экспириенс стоит проектировать первым. В 21-году почти во всех сценариях больше половины опыта человек получает через мобильный интерфейс. Кроме того, проектируя мобильный интерфейс, вам придется сконцентрироваться на главном — после этого будет проще организовать десктоп. 
• Быстрая загрузка элементов — еще один важный фактор, который прямо влияет почти на все метрики юзабилити. А еще сильно влияет на ранжирование в поисковых системах.
• Поддержка нативных элементов управления. Когда кто-то говорит «интуитивно понятный», по факту это означает «привычный». Поэтому, если вы можете обойтись стандартным интерфейсным элементом, с которым пользователь часто сталкивается (именно они и содержатся в гайдлайнах операционных систем), такой элемент будет удобнее. Потому что уже присутствует в опыте. Нужно иметь очень, очень сильные аргументы, чтобы вводить оригинальные символы управления. 
• Продолжая тему нативных элементов управления, надо сказать об инклюзивности. Если вы потратите усилия на то, чтобы ваш сайт был доступен для людей с ограниченными возможностями здоровья, вы убьёте сразу много зайцев. Во-первых, таких пользователей десятки процентов — это не только люди, которые совсем не видят экран (и нуждаются в интерфейсах озвучивания), но и просто слабовидящие, люди с дальтонизмом, расстройствами внимания и т.д. Почти для любой клиентской группы — это серьёзная часть аудитории, и о ней стоит заботится. Во-вторых, если вы позаботитесь о них, вам придется придерживаться более строгой информационной архитектуры и нормального аксессибилити (доступности интерфейса). Это приведет к тому, что вам придется использовать стандартизованные практики, которые сделают удобным работу с вашим сайтом из всех распространенных агентов — не только самых распространенных парсеров, но и голосовых интерфейсов, агрегаторов, чтения специальных средств. 

Вместо итогов

Самый главный совет будет примерно такой: 

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

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

Если вы хотите более подробно поговорить про юзерфрендли интерфейсы и механики, которые я использую при проектировании, пишите на почту kulakov@jetstyle.ru

Baofeng UV-5R — это портативная двухдиапазонная рация с полным набором полезных функций и невысокой стоимостью. Baofeng UV-5R имеет заявленную мощность 5 ватт и емкость батареи 1800 мАч. По техническим параметрам данная станция не уступает, а в некоторых случаях и превосходит, продукцию именитых брендов.

Возможности Baofeng UV-5R:

• CTCSS / DCS
• Режим VFO
• PTT ID и ANI ID
• Компандер
• Dual Monitor (отображение и прием двух частот)
• Программирование с компьютера
• Ручной ввод частоты и параметров
• Отображение названия, номера канала или частоты
• Функция экономии батареи
• Отображение уровня заряда батареи
• Оповещение о низком заряде батареи
• Выбор цвета подсветки дисплея
• Функция VOX
• Функция сканирования
• Сканирование CTCSS / DSC кодов
• Выбор ширины полосы канала 12,5/25 КГц
• Аварийный сигнал
• Выбор выходной мощности
• Выбираемый порог шумоподавителя.

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

В статье поговорим о главных характеристиках UI, которые помогают установить контакт с аудиторией и позволяют сохранить прочную связь на протяжение длительного времени.

Что такое user-friendly интерфейс

В переводе на русский понятие означает «дружественный для пользователей». То есть интерфейс, который создаётся под конкретную группу людей или без чёткой целевой аудитории, но нацелен на максимальное удобство пользователей.

Главная цель user-friendly интерфейса заключается в обеспечении идеального user experience. Чтобы после установки приложения или использования сайта остались только положительные эмоции. Если удастся добиться такого эффекта, конверсия будет высокой.

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

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

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

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

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

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

Если у компании нет опыта разработки коммерческих проектов, надо проанализировать решения конкурентов и посмотреть на то, как крупные корпорации выстраивают взаимоотношения с клиентами в цифровом мире.

Главные характеристики user-friendly UI

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

Многие дизайнеры знают, что на user experience влияет не только типографика и красивая анимация, но и то, как выстроен «путь клиента». Если в процессе выполнения задачи постоянно возникают отвлекающие факторы, компании не стоит рассчитывать на коммерческий успех продукта.

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

Интуитивность

UX-проектировщики часто спорят о том, каким должен быть digital-продукт, чтобы им было удобно пользоваться. Больше всего разногласий возникает по поводу интуитивного взаимодействия с UI.

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

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

Чтобы интерфейс был интуитивно понятным, необходимо использовать знакомые инструменты, которыми люди привыкли пользоваться на постоянной основе. Это касается меню, форм, баннеров и других UI-элементов.

Предсказуемое поведение

Предыдущая характеристика тесно связана с предсказуемостью. Пользователи очень не любят, когда при использовании UI что-то идёт не так. Они рассчитывают, что продукт поможет быстро решить их задачи и не хотят тратить много времени на обучение.

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

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

Простота

Надо постараться сделать интерфейс таким, чтобы у пользователей с первых минут знакомства возникло ощущение, что пользоваться им так же просто, как открыть приложение погоды с утра. Запустил виджет, посмотрел температуру и ушёл заниматься своими делами.

Многие дизайнеры часто думают, что простота ассоциируется с недостатком креативности. Якобы, чем проще интерфейс, тем меньше времени аудитория будет в нём проводить. Чтобы избежать этого они размывают фокус и стараются всяческими способами удержать пользователей внутри UI.

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

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

Быстродействие

Простые интерфейсы не всегда быстро загружаются. Эта задача тоже частично ложится на плечи дизайнера. Если он сделал UI перегруженным, то разработчику ничего не остаётся, как превратить картинку в инструмент, которым будет пользоваться аудитория.

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

Представьте, что выбрали товар на сайте, но решили установить приложение, чтобы получить скидку на первый заказ. Запустили его и 10 секунд ждёте, пока прогрузится приветственный баннер. Логично, что после такого ожидания уже не хочется заказывать товар и пользоваться приложением.

Стоит учитывать и то, что не у всех быстрые смартфоны. Например, на некоторых устройствах приветственный баннер в приложении Aliexpress грузится больше 5 секунд, а потом еще столько же времени интерфейс недоступен для взаимодействия.

Быстрый UI — ключ к сердцу целевой аудитории. Пользователи устали от медленных сайтов и приложений, которыми невозможно пользоваться. Они разрушают user experience и не приносят никакой пользы.

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

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

Защита от ошибок

Как показывает практика, пользователи не всегда взаимодействуют с интерфейсом по стандартному сценарию. Даже если они прошли ознакомительный тур по системе, многие всё равно идут другим путем и могут сталкиваться с ошибками.

В user-friendly интерфейсе должна быть защитный механизм, который не позволит выйти за определённые рамки. Например, если закрыть окно регистрации после запуска приложения, оно должно повторно запускаться по клику на кнопку. Если этого не будет, многие потенциальные клиенты не смогут создать учётную запись.

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

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

Защита от ошибок показывает пользователям, что о них позаботились. Можно спокойно решать свои задачи и не переживать, даже если что-то пойдёт не так. Такой подход позволяет установить прочную связь с целевой аудиторией и укрепить положительный имидж бренда.

Советы по созданию интерфейса для коммерческих продуктов

Мы уже частично рассказали о том, каким должен быть интерфейс, чтобы пользователи не прощались с продуктом сразу после знакомства. Интуитивность, предсказуемое поведение, простота, быстродействие и защита от ошибок влияют на user experience, но есть и другие аспекты, которые тоже важны.

Сделайте так, чтобы UI общался с пользователями

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

Визуальный сторителлинг — сильный приём, который помогает вовлечь аудиторию в использование продукта. Надо постараться сделать интерфейс максимально простым, логичным и «говорящим». Это не значит, что необходимо добавить как можно больше подсказок и других интерактивных инструментов.

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

Общение с аудиторией может проявляться по-разному, но не стоит слишком давить на людей. Предоставьте им полную свободу действий и анализируйте, как они используют UI.

Позаботьтесь о привлекательности

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

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

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

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

Предусмотрите персонализацию

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

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

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

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

Объясняйте действия

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

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

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

Мягкие подсказки — идеальное решение, потому что они не оказывают давление, но при этом справляются со своей задачей. Добавляйте тултипы только к элементам, которые могут вызвать вопросы.

Собирайте обратную связь

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

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

В процессе разработки интерфейса члены команды часто обращаются за помощью к представителям целевой аудитории, чтобы совместными усилиями найти идеальное решение, но этого недостаточно. Когда продукт появляется в общем доступе, количество тестировщиков увеличивается в несколько раз. Некоторые из них могут найти ошибки, которые не заметили на этапе создания UI.

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

Думайте о пользователях

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

Дизайнерам-новичкам часто говорят, что надо думать об аудитории, но не рассказывают, что именно надо делать. Секрет создания успешного коммерческого продукта кроется в удобном UI, который помогает быстро решать проблемы.

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

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

Веб-студия IDBI больше 14 лет разрабатывает коммерческие продукты и входит в ТОП-10 разработчиков России. Обращайтесь к нам, если хотите не просто сделать сайт, а решить с помощью него свои задачи.

Concerning the “user-friendliness” of sustainable packaging, the Billerud Consumer Panel found that the number one dream result of packaging among consumers in megacities around the world is to make packaging fun and easy to recycle. User-friendly sustainable packaging should include recycling information (e.g., How2Recycle label) and be designed for easy breakdown.

Is your packaging designed, engineered and optimised to protect?

Damage prevention is a key function of any packaging system, as well as one of the pillars of user-friendly packaging. According to the 2021 Home Delivery Report, 39% of UK consumers consider inappropriate packaging as the reason for a damaged product. Poor packaging design features and sub-par packaging materials can produce an awful end user experience if they do not protect the contents inside from transportation hazards such as shock, vibration and mishandling.

Packaging optimised for the supply chain lowers the risk that products will be damaged in transit from factories in Southeast Asia to retailers and homes around the world. Not only will this effort yield happier customers, but companies also stand to reap significant financial benefits from optimised packaging. According to the Association for Packaging and Processing Technologies, replacing a damaged product can cost up to 17 times more than the original cost to ship.  

In addition to packaging designs and materials better suited to protect the products inside, smart packaging features can also be used to enhance user-friendliness with respect to product integrity. For example, a temperature-monitoring label could indicate whether the package and its contents have been exposed to dangerously high or low temperatures in transit, enabling quicker decision making at the point of sale and providing greater confidence for consumers who have sensitive or perishable items shipped directly to their homes. Packaging designed to maintain product integrity and security was one of the top responses to the question of “dream packaging” in the Billerud Consumer Panel, with respondents saying they wished packaging could assure them that the product isn’t fake and that the packaging and/or its contents have not been tampered with.

Is your packaging easy to open and easy to return?

Any discussion of user-friendly design must obviously include ease of use. There are two primary ways consumers “use” packaging (i.e., how they interact with packaging): opening it and returning it. The first experience, unboxing, is a critical moment. In one survey, 62% of consumers said that packaging that is difficult to open could negatively impact their chances of shopping with that company again. Packaging designed for an easy opening experience help create a more pleasant first impression and reflect how important the end user’s total satisfaction is to the brand.

The second user experience is mostly important within the e-commerce world. According to the 2018 Omni-Channel Retail Report, shoppers expect to return up to 25% of the goods they buy online. E-commerce requires purchasing products without being able to physically interact with them, which can result in a higher level of dissatisfaction or disappointment and therefore a higher return rate than with traditional retail stores. An important consideration for e-commerce brands is whether the packaging helps or hinders the return process for shoppers who anticipate returns as part of the online shopping experience. For example, 62% of ecommerce customers want a return label in the box or an easy-to-print label.

Is your packaging designed with a second life in mind?

When asked about their ideal results from packaging development, consumers in North America, Europe and Asia indicated that “a beneficial second (and third) use of packaging” was very important. A panel of fashion bloggers and brand ambassadors at Luxe Pack New York also cited reusability as a key factor social media influencers look for in packaging. Packaging that is highly functional, beautifully constructed or extremely practical can easily have a second, third or even fourth life that supersedes the life of the original product inside. For example, the home textiles company Moyha ships products in cartons and boxes that have minimal exterior branding so they can be reused as boxes for various household or office essentials. Inside, under the lid, Moyha encourages customers to reuse the boxes however they’d like, and even include a special gift tag so they can be reused as gift boxes later.

Delight your customers with user-friendly packaging

Billerud is staffed with materials experts, packaging designers and research and development professionals that can help you create user-friendly packaging your customers will love. For more than 20 years, Billerud has helped global brands increase customer loyalty through smarter packaging. Contact us today to learn more about our packaging services and solutions.

Меня зовут Алексей Кулаков, я генеральный директор digital-продакшена JetStyle. Больше 15 лет я занимаюсь дизайном взаимодействия — проектирую привлекательные для пользователя интерфейсы с удобной структурой. 

За это время сменилось немало трендов и предметом внимания дизайнера наконец стал опыт, который он создает. Это особенно заметно в среде, где для коммуникации  используют множество каналов: сайты, мессенджеры, видео, аудио, почту, опыт в оффлайне и т.д. Но создавать дизайн только как набор экранов больше нельзя — получается всё хуже. Поэтому всё чаще мы концентрируемся на создании клиентского опыта (CX) и опыта пользователя (UX) внутри него. 

В этой статье я расскажу о том, как устроен дружественный для пользователя сайт. Разберёмся, какие сценарии пользовательского поведения существуют, а также поговорим про то, чем UX отличается от UI и и задачах навигации на сайте.

User friendly сайт — что это

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

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

Цели человека и сценарии пользовательского поведения

Цель — это то, ради чего человек вообще действует: представление о том, как  изменится жизнь после взаимодействия с продуктом. Цель пользователя — не обязательно приобретение товара, но она обязательно изменяет его поведение, так как он хочет. 

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

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

В конечном итоге тут цель человека — «нравиться себе в зеркале». Но для проектирования интерфейсов нас интересует цель в тех терминах, в которых пользователь её перед собой ставит, открывая браузер для «вот этой вот задачи». Если он идет к цели «я хочу попасть в офис», надо сначала ему помочь в этом. Понять, какие ему предстоят задачи (в данном случае: найти адреса офисов, соотнести их с местами, где он регулярно бывает, решить когда он поедет и откуда — из дома или с работы, выбрать транспорт, прикинуть маршрут и не забыть это всё до момента визита). 

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

Примеры целей: 

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

В это же время у бизнеса есть свои задачи для сайта:

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

Прежде, чем ставить задачи на сайт, нужно описать, какой сценарий развивается в жизни человека:

1. Как возникла проблема у человека.
2. Как он перешел к ее решению.
3. Какие шаги ему надо предпринять без вашего сайта или приложения.
4. Как он получил профит, или почему у него не получилось.
5. Куда он пошел после завершения сценария.

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

• Какие шаги ему надо предпринять, с помощью нашего приложения/сайта.
• Как он получил профит, и чем ситуация стала лучше.

• «я не знаю, как выбрать стриминговый сервис, большая ли там библиотека»;
• «я не понимаю, сколько это должно стоить»;
• «у меня нет доверия к этому сервису, действительно ли он подойдет мне и моей семье? сможет ли им безопасно пользоваться мой ребёнок?».

1. Сперва описываем сценарии — как пользователь продвигается к цели своего визита.
2. Фиксируем моменты, которые должны быть в сценарии решения задач.
3. Компонуем их по экранам. Даем экранам названия, чтобы было понятно, что там происходит.
4. Рисуем карту переходов по страницам.

Пример карты переходов для образовательного проекта

Метрики юзабилити сайта

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

В юзабилити я обычно пользуюсь следующими метриками:

• Обучаемость. Вам сразу понятно, где вы находитесь, что здесь можно делать, как ведет себя интерфейс — ни про что не нужно догадываться. С обучаемостью всё в порядке, если вы пришли на сайт и с самого начала быстро в нем разобрались. 
• Запоминаемость. Например, вам было сложно первый раз разобраться в интерфейсе, но вы возвращаетесь через три недели и знаете, что нужно делать. 
• Процент пользовательских ошибок — негативная метрика. Ошибки бывают минорные и критические. Критические — когда пользователь не смог выполнить свою задачу: пришел на сайт, тыкался-тыкался, с задачей не справился, зашел в тупик. Есть ошибки некритические: когда представление пользователя о том, как себя будет вести интерфейс расходится с тем, как он ведет себя на самом деле, но сценарий всё-таки выполняется, пользователь доходит до своей цели. 
• Эффективность. Пользователь тратит сколько-то усилий для достижения своих целей: эти усилия можно измерять во времени, которое пользователь тратит, чтобы достигнуть своей цели, или в количестве кликов. Высокая эффективность — это когда человеку нужно приложить мало усилий для достижения задачи. В идеале задача должна решаться вообще без усилий.
• Субъективная удовлетворенность. Если предыдущие метрики можно измерить, глядя на пользователя снаружи, — просто смотреть, что он делает — то уровень субъективной удовлетворенности мы не поймем без разговора с пользователем. На удовлетворенность влияют не только эти 4 метрики, но и имиджевое соответствие: насколько представление пользователя о том, как этот сайт выглядит, совпадает с реальностью, какой tone of voice у контента. Насколько его впечатление совпадает с тем, что сайт для таких как он, в его актуальном контексте. В конечном итоге, клиенту или приятно, или неприятно пользоваться интерфейсом.

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

• Например, если мы говорим о сценарии покупки в один клик, когда пользователь впервые столкнулся с лендингом, купил, и больше мы с ним не взаимодействуем — то основные метрики, которые нам важны — обучаемость и процент пользовательских ошибок. И мы оптимизируем сайт под них. Но в 2021 году кейс, когда клиент пришел, увидел и купил — не основной.
• Работа с повторной продажей. Если пользователь уже ответил на многие вопросы, не заставляйте его повторять ненужные операции. Важно, чтобы он быстро вспомнил логику навигации и повторил заказ. Также хорошо бы проявить заботу и благодарность — например, предложить скидку за повторную покупку.
• Длительная продажа. Часто пользователи не покупают при первом посещении — помогите им и покажите, что они смотрели в прошлый раз, предложите подписаться на рассылку. Сайт должен помогать в телефонной продаже: очень важно иметь простую для объяснения в разговоре навигацию (простые адреса, внятную структуру отдельной страницы, четкое зонирование). 

Отличие UX от UI

• как выглядят сервисные функции — визуальная примерка платья с помощью дополненной реальности, возможность положить товар в корзину или избранное, сравнение параметров товаров; 
• паттерны: табы, радиобаттоны, кнопки, линки, свайпы;
• экраны — главная, поисковая выдача, страница товара, страница корзины; 
• модули — это визуальные «фразы», например, форма регистрации, лид статьи 
• и т.д.
  Чтобы пользователю было комфортно, нужно заниматься и UX, и UI, но UI должен быть подчинен UX. 

Рекомендации по UI:

• Главное внимание — главным действиям. Когда вы находитесь на каком-то экране, нужно четко понимать, какому сценарию экран посвящен. Элементы интерфейса, связанные с главным сценарием, должны быть на самом заметном месте. Не должно быть такого, что самая главная ценность, которая есть в интерфейсе, находится за какой-нибудь плашкой в третьем экране сверху — её никто не увидит.
• Когда вы располагаете элементы по экрану, должна быть явная иерархия заметности элементов. Вы что-то хотите показать клиенту в первую очередь, что-то — во вторую. Это похоже на планы восприятия в изобразительном искусстве: то, что на первом плане и в центре композиции — крупное, то, что на среднем — оттеняет его и вступает с ним в диалог, то, что на фоне — не выпячивает своих деталей. Это правило применяется для выбора контраста между размерами и оформлением элементов. Контраст должен быть явным. 
• Необходимый минимум стилей оформления. Стили оформления — это слова и правила визуального языка, которым вы пользуетесь. На освоение закономерностей пользователь тратит умственные усилия, поэтому правил надо вводить мало и придерживаться их во всех интерфейсах. Так пользователь быстрее поймет, как тут всё устроено, и будет меньше ошибаться. Кроме того, когда мы считываем визуальные закономерности и понимаем, что всё аккуратно организовано, пространство воспринимается как более приятное. 
• Навигация должна отвечать на вопрос «где я нахожусь»:
• это страница товара, 
• это результаты поиска, 
• это главная страница сайта, 
• я сейчас на странице корзины и т.д. 

  А также пользователь должен понимать, где он находится относительно других страниц сайта: как ему вернуться туда, откуда он пришел, где он находится по отношению к главной и т. д. Третья задача навигации — отвечать на вопрос «что я могу здесь делать?». 

• Мобильный экспириенс стоит проектировать первым. В 21-году почти во всех сценариях больше половины опыта человек получает через мобильный интерфейс. Кроме того, проектируя мобильный интерфейс, вам придется сконцентрироваться на главном — после этого будет проще организовать десктоп. 
• Быстрая загрузка элементов — еще один важный фактор, который прямо влияет почти на все метрики юзабилити. А еще сильно влияет на ранжирование в поисковых системах.
• Поддержка нативных элементов управления. Когда кто-то говорит «интуитивно понятный», по факту это означает «привычный». Поэтому, если вы можете обойтись стандартным интерфейсным элементом, с которым пользователь часто сталкивается (именно они и содержатся в гайдлайнах операционных систем), такой элемент будет удобнее. Потому что уже присутствует в опыте. Нужно иметь очень, очень сильные аргументы, чтобы вводить оригинальные символы управления. 
• Продолжая тему нативных элементов управления, надо сказать об инклюзивности. Если вы потратите усилия на то, чтобы ваш сайт был доступен для людей с ограниченными возможностями здоровья, вы убьёте сразу много зайцев. Во-первых, таких пользователей десятки процентов — это не только люди, которые совсем не видят экран (и нуждаются в интерфейсах озвучивания), но и просто слабовидящие, люди с дальтонизмом, расстройствами внимания и т.д. Почти для любой клиентской группы — это серьёзная часть аудитории, и о ней стоит заботится. Во-вторых, если вы позаботитесь о них, вам придется придерживаться более строгой информационной архитектуры и нормального аксессибилити (доступности интерфейса). Это приведет к тому, что вам придется использовать стандартизованные практики, которые сделают удобным работу с вашим сайтом из всех распространенных агентов — не только самых распространенных парсеров, но и голосовых интерфейсов, агрегаторов, чтения специальных средств. 

Вместо итогов

Самый главный совет будет примерно такой: 

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

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

Если вы хотите более подробно поговорить про юзерфрендли интерфейсы и механики, которые я использую при проектировании, пишите на почту kulakov@jetstyle.ru