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

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

В статье поговорим о главных характеристиках 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 разработчиков России. Обращайтесь к нам, если хотите не просто сделать сайт, а решить с помощью него свои задачи.

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 КГц
• Аварийный сигнал
• Выбор выходной мощности
• Выбираемый порог шумоподавителя.

Дизайн сайта в Midjourney

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

Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «картинок сайтов». (Давайте договоримся, что я буду называть то, что выдает нейронка — «картинки сайтов».) А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.

• Стоит сказать, что я не претендую на роль супер эксперта и гуру в этом вопросе, просто делюсь тем, на что сам потратил много часов.

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

1ый запрос.
Он состоит из следующей конструкции:
— professional website
+ for (описываем тематику)
+ ui, ux, ui/ux, website, landing page (постоянные переменные)
+ colors + style (можем добавить опционально, в зависимости от задачи)

Примеры запросов:
professional website for online education, ui, ux, ui/ux, website, landing page, dark colors, vector illustration

professional website for a tour to Thailand, ui, ux, ui/ux, website, landing page, watercolor illustration

professional website for crypto coin, ui, ux, ui/ux, website, landing page, dark gold and neon colors

professional website for youtube bloggers, ui, ux, ui/ux, website, landing page, 3d cartoon illustration

professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors

professional website for fitness trainer, ui, ux, ui/ux, website, landing page, violet and red colors

Примеры, как могут выглядеть «картинки сайтов» с этой конструкцией:

2ой запрос основан на весах в запросах:
— Website for (описываем тематику)::5
+ Professional Website UI Design::4
+ user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3
+ colors, style::3 (опционально)
+ deformed, outdated, cluttered layout, low-quality graphics, mockup::-2 (минусовые веса)

Примеры запросов:
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2

Website for a tour of Thailand::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 watercolor illustration::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2

Website for crypto coin::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 dark gold and neon color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2

Примеры «картинок сайтов» в этой конструкции:

Все это можно делать и под второй запрос, тот что с весами.

Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2

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

Тут конечно можно контролировать степень стиля и убирать какие-то детали.

Примеры:

Время на прочтение
3 мин

Количество просмотров 1.9K

Mobile apps are necessary for every business today. They are the tools that bridges the gap between consumers and business, makes it easier for clients to view the trends, and offers an easy chance to the consumers to know the business in person. Having so many advantages already, why it is important to keep app’s user-friendliness as one of the most important points?

There are a number of reasons for developing a user-friendly mobile application. The users today are more eager to have a superb experience while browsing through the application. And for the same reason the UI and the app UX holds prominence for every mobile app development company. No matter how successfully your app has been designed, it is important to offer a unique browsing experience to the users.

A wonderful app interface increases the app’s visibility, it’s credibility, and its popularity as well among the clients. So, the bottomline is app UI and UX holds utmost importance and therefore we have decided to look at the most important characteristics that make mobile phones user-friendly.

Simple Design

Complicated app designs are never going to attract the users. No users would like to browse through an application that is confusing them. They need simple app features that take them further while they are visiting the application. Keeping things simple in the application means users can immediately start using the app. A simple user interface is the type that allows users to navigate through the same in order to perform several tasks. For having a simple interface, choose soothing colors, keep the design noticeable, and don’t create the app to confuse the users.

Go for Noticeable Fonts

While developing your mobile application, the font size needs to be noticeable enough for the users. The purpose of the app is to help users interact with it and this is possible only when appropriate designs are being used by the developers. This way, font size should be such that users would be able to understand the app design and the purpose for which it has been developed.

Use Icons to Guide Users

Creative use of icons and images in the application could help guide the users to go in certain directions. App icons can become an essential asset in popularizing the application among the audience. The component of visual language i.e. app design and the logo forms the most important part of the design and therefore, it should be designed prominently for attracting the users. Keep the count of colors as minimal as possible. Ideally keep it 3 colors in the design.

Declutter the Design

It is never a great practice to clutter your app with a series of design. No app user likes to interact with a design that is clutter enough even to browse further. Therefore, it is ideal to choose as less design elements as possible. They should appear much simpler for the users and should always guide them to go further. By keeping too much information on a single app slide you are cluttering the browsing experience of the users. This may result in user’s disbelieve in the application.

Avoid Using Industry Jargon

Your app users can be anyone from any background. A user may be someone who is not aware of the mobile app development jargon. Thus, there is no point in bothering these users with industry specific jargon. It is suggested to use simple words or specific names for denoting the app elements for the users. Remember if your users are not able to understand the app, they may uninstall the same after using it once.

Keep App Icons Touch Specific

You need to design an application that is touch specific. Remember the design remains specific enough to respond whenever it gets a tap. The key here is to keep the size recognizable enough for fingers so that it could not lead to missed targets. Make the targets big enough to tap it with fingers. Small app icons may lead to mistaken app taps.

The Bottom Line

By keeping all the above-mentioned points into the mind, it will get easier to design an application that is specific in design and attracts the users as well. Remember, the aim with designing the application should remain to make certain tasks easier for the app users. The business designing the application should also remember to include trade-specific features so that it could lessen the gap between the users and the business.

In case, your app has the element of creativity, it will for sure attract the users. As the mobile app development world continues to get biggers, the developers’ guidelines for designing the application has also changed slightly. Keep all those pointers into the mind while designing the application.

Меня зовут Алексей Кулаков, я генеральный директор 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