Как сделать интерфейс удобнее
Удобный интерфейс: 5 правил юзабилити
За пять лет работы в мобильной разработке мы сделали 40 проектов. Кроме написания собственно кода, мы также разрабатываем дизайн приложений, а точнее UX-дизайн. А это, честно говоря, похоже на магию.
В хорошем приложении дизайн должен работать на руку владельца ресурса. Он должен быть не только привлекательным для глаза, но и способствовать целевым действиям. Об это все знают, уже сто раз об этом говорено. Однако часто креатив побеждает холодный рассудок.
В этой статье мы выделили 5 основных правил, которые помогут создать добротный фундамент для интерфейса приложения.
Итак. Вот наши правила:
1. Думайте как пользователь
На начальном этапе важно понять, кто ваш пользователь (точнее, для кого вы делаете приложение), и какие задачи он будет с помощью вашего приложения решать. Именно от задач и стоит отталкиваться при создании пользовательского интерфейса. Иными словами, выводить их на первый план. Если задача — оплата услуг, то во главе угла должна быть кнопка оплаты. Если вы помогаете пользователю контролировать какие-то процессы, то важны категории, графики, визуализация, удобный ввод данных.
В каждом проекте «главное» определяется индивидуально, но важно исходить из конкретных жизненных задач пользователя, который существует не только в вашей голове, но и где-то на этой планете
2. Ничего лишнего
По последним исследованиям человек может без стресса воспринимать только 3-5 объектов сразу. Видели светофор? Очень удобная штука, которая помогает нам безопасно передвигаться по городу. А теперь представьте, что в светофоре не 3 цвета, а десять, каждый из которых что-то означает. Или представьте, что вы ведете автомобиль, и перед вами вырастает десять дорожных знаков. Скорее всего, ваш мозг закипит. При создании интерфейса приложения это правило тоже действует, правда, с поправками. Нужно сокращать количество элементов до минимума пока это возможно, но не в ущерб задачам, которые решает пользователь.
3. Контекст использования тоже важен
Контекст — это условия, в которых пользователь будет обращаться к приложению. Мы поставили этот пункт на третье место, потому что про него часто забывают, а он может разрушить все ваши идеи насчет дизайна. Поэтому подумать об этом стоит очень заранее.
Этот пункт может разрушить все ваши идеи насчет дизайна
Хорошо, если приложение будут использовать в спокойной домашней обстановке на большом экране. Тогда у вас нет преград. Но если это приложение для заказа такси, то часто его будут использовать на улице, в темноте или на ходу, а значит стоит подумать о минимизации действий, о цвете и размере кнопок, о таком расположении кнопок, чтобы можно было жать на них на ходу.
Или приложение с кнопкой «SOS». Логично, что у пользователя не будет столько времени, сколько есть у человека, который вечерком решил повыбирать книжку в интернет-магазине.
4. Все взаимосвязанные элементы логически соединены
У большинства людей холодильник стоит на кухне. И это правильно, там ему самое место. Почему? Потому что в холодильнике хранится еда, а еду мы готовим на кухне. Это суперюзабильное решение всех времен и народов. И этот опыт, накопленный веками, важно переносить в цифровое пространство, ведь там мы так же живем и ходим, пытаясь решить все те же задачи.
Например, логично в приложении по оплате неких услуг рядом со счетом располагать кнопку оплаты. И нелогично заставлять пользователя сначала смотреть счет, а затем искать способ оплаты. Логично на моменте оплаты предлагать пользователю выбирать способ, и нелогично прятать возможность выбора в настройки, тем самым заставляя пользователя возвращаться в меню.
5. Иерархия по важности
Если элементов больше, чем один, и один из них главнее других, то разместить его лучше в левом верхнем углу. Именно там наш взгляд ищет то, с чего следует начать посещение ресурса. Привычка идет из детства — именно так нас приучили читать, ничего не поделаешь.
Дизайнеры и разработчики могут креативить, но мозг среднестатистического пользователя не откажется от привычки. И если действительность не совпадает с привычным представлением о ней — мозг взрывается. Однако не стоит путать «важное» с «главным». Важное, это то, к чему пользователь обращается, чтобы начать решать задачу — к примеру, меню. Наименее важное располагается в противоположном углу.
Таким образом, степень важности элементов нисходит с верхнего левого угла к нижнему правому.
Резюмируем:
Следуя этим правилам, можно создать логичную архитектуру и понятный дизайн приложения.
Современные требования к пользовательскому интерфейсу сайтов
Сайты и приложения сегодня динамичны и интерактивны. Задача дизайнеров — сделать так, чтобы интерфейс сайта был максимально близок к идеалу. К счастью, существуют требования к пользовательскому интерфейсу, которые помогают достичь этого.
Десять универсальных правил хорошего пользовательского интерфейса
Сделайте все, что нужно пользователю, легко доступным
Если пользователь не может найти то, что нужно, он откажется от вашего программного обеспечения. Вкладки делают интерфейс более доступным. Ярлыки и всплывающие подсказки тоже.
Например, мы решили использовать вкладки для организации WordPress-темы Divi. В ней все инструменты находятся прямо в конструкторе и разделены по категориям.
Также доступны панели инструментов. В WordPress панель администрирования позволяет быстро перейти к редактору записей, настройщику тем, плагинов и т.д.
Другой пример – разделы Справка / Поддержка / Контакты. Пользователям всегда должна быть доступна кнопка «Справка» или «Обратиться в службу поддержки». Вот почему необходимо располагать кнопки помощи вверху.
Будьте последовательны
Нужно быть последовательным в размещении функций в пользовательском интерфейсе. При этом пользовательский интерфейс должен работать и выглядеть одинаково во всех разделах сайта.
Не располагайте меню в верхней части одной страницы и в нижней части другой. Не переставляйте пункты меню каждый раз, когда оно загружается. Если вы размещаете контактную форму под постами в блоге, не скрывайте ее на других страницах сайта.
Дизайн должен быть согласованным во всех публикациях ресурса. Не меняйте шрифты заголовков и контента на разных страницах.
Принцип наименьшего удивления гласит, что если пользователь удивляется тому, как что-то работает… переделайте это, чтобы оно стало интуитивно понятным.
Также нужно убедиться, что пользовательский интерфейс соответствует основной платформе. Например, приложения для iOS работают не так, как для Android. Десктопные сайты предъявляют требования, отличающиеся от требований мобильных ресурсов.
Будьте предельно ясными
Пользователи должны ясно понимать, как получить доступ к тому или иному функционалу. Следование этому принципу подразумевает необходимость доработать интерфейс сайта. Это увеличивает время просмотра и снижает показатель отказов.
Одним из способов достижения ясности является переход от одного шага к другому на разных страницах. Предложите пользователям возможность перейти со страницы продукта в корзину, страницу оформления заказа, оплаты, страницу подтверждения. Эту технику практикует Amazon.
Предоставляйте обратную связь
Пользователи должны понимать, что происходит. Если они нажимают кнопку, укажите, что кнопка была нажата. Вы можете сделать это несколькими способами. Например, анимировать кнопку. Иконки загрузки (например, MacOS Rainbow Wheel) обеспечивают обратную связь: пользователи понимают, что вы работаете над их запросом.
Если разрешаете пользователям загружать файлы, укажите оставшееся время до окончания загрузки. Добавьте всплывающее или модальное окно, которое сообщит, что их действие было успешным.
Используйте распознавание, а не запоминание
В первую очередь оптимизируйте интерфейс, чтобы каждая его часть была интуитивно понятной. Это можно сделать с помощью иконок. Люди привыкают к иконкам, обозначающим конкретный функционал.
Это также можно сделать с помощью виртуальных туров, которые позволяют направлять пользователей. Они распознают процесс, как только появится первое модальное окно.
Также можно реализовать это с помощью сообщений. Мы делаем это с помощью простых всплывающих подсказок. Даже если кто-то не помнит, что делает та или иная иконка, мы описываем пользователю ее функцию.
Выберите модель взаимодействия
Хуже всего пытаться открывать на себя дверь, которая открывается в обратном направлении. Особенно, когда предыдущая дверь открывалась на себя. Дизайнер этого здания сделал пользовательский интерфейс несогласованным, поэтому вы понятия не имеете, как правильно открыть дверь.
На сайте может быть кнопка, которая таковой не является, но вы все равно будете ждать результата от ее нажатия. И все потому, что дизайнеры не продумали модель взаимодействия с продуктом.
В Snapchat выбрали механизм взаимодействия с продуктом, и разработали пользовательский интерфейс на его основе. А не наоборот.
Когда разрабатываете пользовательский интерфейс, выберите основные инструменты для взаимодействия: меню, касания, иконки, жесты или что-то еще. Alexa и Siri используют голосовой ввод в качестве основного интерфейса. Способ, которым они предоставляют информацию и выполняют задачи, основан на этом подходе. Поэтому пользователь интуитивно понимает что делать.
Следуйте стандартам дизайна
Как правило, панель поиска на сайтах располагается в верхней части боковой панели, в конце меню или в центре верхней части страницы. Если вы решите разместить поле поиска в нижней части боковой панели, в футере страницы или под текстом записей, пользователи не будут знать, где его искать. Даже если вы обозначите его с помощью стандартного значка.
Иерархия элементов
Элементы интерфейса на веб-страницах должны иметь четкую иерархию. Нужно, чтобы самые важные функции находились вверху веб-страниц. Кроме этого, подобная иерархия позволяет органично вести пользователя вниз по странице.
Большие элементы, размер которых уменьшается по мере прохождения страницы, указывают на важность и порядок. Использование пробелов также важно, так как беспорядок может замедлить продвижение пользователя и отвлечь его внимание. Чистые линии, много места и четко определенные элементы могут визуально указывать пользователям, как перемещаться по интерфейсу.
Будьте проще
Посмотрите на эту контактную форму:
Подарите пользователям удобство управления и ощущение свободы
Предоставьте пользователям удобство управления, чтобы они не чувствовали себя ограниченными или скованными дизайном. Интерфейс должен позволять им выполнять те действия, которые они хотят. Это правило состоит из двух частей: контекста и доступа.
Лучший вариант — контекстные меню для действий, которые пользователь может выполнить над конкретным элементом (или страницей). Если вы последовательны в своем пользовательском интерфейсе, то пользователи поймут, что контекстные меню или панели инструментов всегда содержат полный список действий для любого элемента.
Интерфейс всегда должен вызывать у пользователя ощущение, что он может выйти или отменить любое действие, которое он предпринимает. Это можно сделать, добавив кнопку « Отмена» на каждую страницу интернет-магазина. Потому что нажатие кнопки «Назад», доступной в браузере, может привести к потере введенных данных.
Завершен ли ваш интерфейс?
Следуя перечисленным выше правилам, вы будете готовы к следующему проекту веб-дизайна. И помните, что хороший пользовательский интерфейс ведет к хорошему пользовательскому опыту. Но это тема для совершенно другой статьи.
14 правил хорошего пользовательского интерфейса: сочетаем красоту, удобство и функциональность
1. Малое время загрузки
Есть и еще момент: поисковики любят “быстрые” ресурсы и отдают предпочтение в выдаче именно им. То есть при прочих равных данных ваш сайт проиграет тем, у кого скорость загрузки выше.
2. Большие элементы
Нет хуже того сайта, в котором от обилия мелких элементов дергается глаз. Пользователь теряется, не знает, куда нажимать и что смотреть в первую очередь. Облегчите ему задачу: сделайте главные или важные элементы бОльшего размера, чем остальные. Это могут быть важные блоки, кнопки СТА, формы для ввода данных и так далее. Чем больше эти элементы, тем выше шанс, что их вообще заметят и кликнут по ним.
3. Знание целевой аудитории
Кто они, ваши пользователи? Сколько им лет, где они живут, какие у них интересы? Способны они разобраться в нестандартном меню или предпочитают сайт, сделанный по старинке? Поймут ли они, как сделать заказ онлайн, самостоятельно? Догадаются ли проскроллить страницу вниз, чтобы увидеть все данные? Что им больше понравится в дизайне: нежные или агрессивные цвета, крупные фантазийные шрифты или старая добрая классика?
Чтобы ответить на этот вопрос, нужно досконально изучить вашу ЦА. Проведите опрос, составьте портрет аудитории, обязательно проведите А/В тестирование. Исходя из полученных данных, поменяйте интерфейс на более удобный пользователям.
4. Логика
В одном известном интернет-магазине есть распространенный косяк: товары добавляются и в закладки, и в корзину. Многих пользователей это смущает: они путаются и не могут понять, где находится их товар и как переместить его из закладок в корзину.
Всегда проходите путь пользователя самостоятельно. Так вы поймете, где ваша логика хромает. При малейшем непонимании включайте мысленную тревожную кнопку и дорабатывайте дизайн. Огромная вероятность, что пользователь тоже не поймет.
5. Последовательность
6. Предельная ясность
Если вы продаете товары или услуги (то есть у вас интернет-магазин), сделайте все возможное, чтобы провести посетителя от главной страницы до формы заказа. Это называется путь пользователя, и на этом пути не должно быть препятствий.
7. Предельная простота
Структуру сайта тоже постарайтесь упростить. Если у вас интернет-магазин, вынесите в отдельное меню категории товаров (по типу, по назначению, по бренду), поставьте фильтры (по цене, по бренду, по категориям товаров), задайте теги для поиска. Все для того, чтобы упростить жизнь пользователю!
8. Обратная связь
Обратная связь нужна и в микровзаимодействиях пользователя и сайта. Вспоминаем предыдущий пункт, когда мы ведем посетителя за ручку к конечному целевому действию. Так вот: мало вести, нужно еще и объяснять каждый шаг, чтобы человек понимал, что происходит и все ли он делает правильно. Или объяснять термины, которые не каждый может понять.
9. Геймификация
10. Группировка элементов по смыслу
11. Правильная типографика
В хорошем интерфейсе приветствуются минимализм, цветовое единообразие или контрасты (кстати, цвета являются отличным способом подчеркнуть смысловые связи между элементами), не более 2-3 сочетающихся шрифтов, наличие “воздуха” между элементами. Подробнее о правильной типографике и трендах 2019 года мы писали в этой статье.
12. Следование принципам дизайна
В современном веб-дизайне также сложились определенные правила и тенденции, которые лучше не нарушать. Например, иконка корзины узнается пользователями всего мира без лишних слов.
13. Визуальная иерархия
Также наиболее важные размеры можно выделять контрастным цветом, визуальными эффектами, анимацией и прочими фишечками.
14. Отслеживание реакции пользователей
Это заключительный и очень важный принцип. Отследить реакцию посетителей можно двумя способами.
Первый. С помощью “Яндекс.Метрики” и других систем аналитики можно отследить поведенческие факторы: время, проведенное на сайте и на отдельных его страницах, процент уходов с сайта и так далее. Так вы поймете, удобен ли сайт для людей, не покидают ли его по причине неудобного дизайна и интерфейса.
Студия IDBI знает все о правильном и удобном интерфейсе. Мы создаем сайты, которые соответствуют принципам юзабилити и запоминаются пользователям. Наши работы доступны в разделе «Портфолио». Обращайтесь, обсудим задачу!
Как сделать интерфейс “user friendly”? 17 работающих приёмов
Интерфейс – это некий «мост» между пользователем и системой. С помощью интерфейса пользователь сможет объяснить системе, чего он от неё хочет, а система это выполнит. Но что случится, если это понимание между машиной и человеком не будет достигнуто? Пользователь просто уйдёт с сайта. Вот так ведут себя интернет-пользователи по данным Online Marketing Institute:
– 85% могут уйти с сайта, если им не понравится дизайн интерфейса;
– 83% покинут сайт, если будут вынуждены делать много кликов, чтобы найти то, что им нужно;
– 40% никогда не вернутся на сайт, если им было трудно его использовать в первый раз.
Принципы хорошего интерфейса одинаковы и для веб-сайтов, и для программ, и для сервисов. Я собрала 17 основных из них (а также в конце вас ждет небольшой обзор способов тестирования интерфейса на юзабилити).
Из статьи вы узнаете:
Хороший интерфейс должен:
1. Быть интуитивно понятным.
Интерфейс пользователя – это то, что должно быть максимально понятным большинству людей. Если человек, открыв приложение или зайдя на сайт, не поймет, как им пользоваться, то понажимав несколько секунд на разные кнопки наугад, разочаруется и покинет ресурс. Скорее всего, навсегда.
Интуитивно понятный интерфейс – это тот, в котором:
1) все элементы выстроены по принципам элементарной логики.
Возьмем для примера сайт с текстовым контентом (статьями). Его логический интерфейс будет таким:
– название сайта находится в самом верху страницы, под ним – краткое описание ресурса;
– ниже располагается меню с разделами сайта;
– блок с контактами и обратной связью в правой верхней части меню;
– статьи расположены в порядке их добавления на сайт;
– в конце каждой статьи есть кнопки “следующая” и “предыдущая”;
– кнопки категорий всегда должны быть на виду, чтобы можно было в любой момент перейти в другой раздел;
– правила сайта, подробная контактная информация, данные о разработчиках и т.д. располагаются в футере сайта, так как именно там их всегда и ищут.
Не запутывайте пользователя нестандартным расположением привычных блоков, а используйте проверенные принципы. Блог маркетолога Heidi Cohen структурирован понятно и логично:
Вот пример из интерфейса программы. Даже там, где значки не подписаны, вполне понятно, что они могут означать. Кнопки расположены в порядке логики – ведь каждому интуитивно понятно, что после кнопки “пауза” должна следовать кнопка “стоп”, и т.д.
2) кнопкам присвоены понятные обозначения.
Избегайте кнопок, изображение на которых может ввести в заблуждение пользователя. Не нужно изобретать велосипед. Большой знак вопроса сразу же говорит пользователю о том, за ним скрывается какое-либо руководство или помощь. Лупа – это всегда форма поиска на сайте.
А вот что бы вы подумали, увидев на сайте или в программе кнопку, например, с перечеркнутым квадратом? Скорее всего, многие пользователи даже не рискнут на нее нажать, так как им будет непонятно, к чему приведет это действие.
А для еще лучшего понимания пользователями своих действий, можно использовать подписи к кнопкам. Они появляются при наведении курсора.
3) есть помощь пользователю, если он “заблудился”.
Если пользователь попал на страницу 404, сразу же на ней дайте ему кратенькую инструкцию о том, что он может сделать дальше. Например, предложите ему вернуться в предыдущий раздел и поискать нужную информацию там.
Или такая ситуация. У вас интернет-магазин. При неправильном вводе параметров товара, пользователь видит сообщение с ошибкой. Напишите тут же, что ему следует сделать, чтобы описать товар правильно. Если нужного товара не оказалось на складе – пишите о том, как пользователь сможет получить уведомление о появлении этого товара.
И один наглядный пример:
2. Быть предсказуемым.
В других ситуациях предсказуемость может быть скучной и неинтересной характеристикой, но только не касательно интерфейса. Пользователь, взглянув на тот или иной элемент интерфейса должен сразу понять, как он поведет себя в случае взаимодействия. Если объект выглядит как меню, он должен вести себя как меню, если похож на ползунок, то соответственно, должен что-либо перемещать. Креативность мышления – это, конечно, хорошо, но не в этом случае.
Пример дизайна интерфейса программы-плеера. Верхние кнопки (“предыдущий” – “воспроизвести” – “следующий”) должны выполнять именно эти функции, а ползунок менять уровень громкости.
Еще несколько примеров. Если сделаете кнопки объемными, они будут больше выглядеть именно как кнопки, поэтому кликать на них будут с большей вероятностью:
А переключатель on/off понятно выглядит, когда сделан вот так:
Один из самых больших страхов дизайнеров – это то, что их сочтут неоригинальными. И поэтому они часто избегают использования техник, которые давно проверены на эффективность и работают, в пользу создания “чего-то нового и креативного”. Заниматься открытым плагиатом, конечно, не нужно. Но использовать уже знакомые пользователям модели построения интерфейса – это верный способ сделать его предсказуемым. Какие ресурсы чаще всего использует ваша целевая аудитория? Facebook, LiveJournal, Twitter, Amazon, Youtube? Используйте похожий стиль и в своем интерфейсе, чтобы они смогли почувствовать себя в привычной обстановке. Например, если вы ориентируетесь на Youtube, сделайте главное меню вертикальным и поместите его слева страницы, а строку поиска разместите по центру сверху.
3. Быть минималистическим.
Стремясь разместить в интерфейсе как можно больше категорий, меню, кнопок и т.д., вы только нанесете ему огромный вред. Слишком загроможденный интерфейс – это большое препятствие к его пониманию пользователем. Всё, что может быть описано одной фразой, не должно быть описано тремя. Лишние элементы и подкатегории на главной странице тоже ни к чему. Определить, какие «лишние», а какие нет, вам поможет тестирование (о том, как его можно провести в конце статьи). Но не стоит и жертвовать чем-то действительно важным – если вы знаете, что без какого-то пояснения (о подсказках будет подробнее ниже) или дополнительной кнопки пользователю будет тяжело разобраться, то поместите её в интерфейс, но сделайте это максимально лаконично.
Симпатичный, но в то же время довольно лаконичный дизайн интерфейса приложения. Нет ничего лишнего и сбивающего с толку – только необходимое и по делу.
4. Быстро загружаться.
Медленная загрузка интерфейса будет раздражать и отталкивать пользователя, вызывая в нем всё большую неприязнь к ресурсу. Убедитесь в том, что скорость загрузки оптимальна для его комфортного использования. В большой степени это связано с предыдущим пунктом – ведь чем меньше на сайте «тяжелых» элементов, тем быстрее он будет загружаться.
Чтобы ваш сайт стал быстрее быстрого, используйте эти советы: 8 способов как увеличить скорость загрузки сайта.
5. Показывать все важные опции.
Использовать выпадающие списки и меню лучше только там, где этого избежать невозможно. В остальных случаях старайтесь сразу же показать пользователю все его возможности. Если часть возможных действий будет скрыта, пользователь может быть и не догадается, куда ему нужно нажать для совершения определенного действия. А если эти действия целевые (“купить товар”, “сделать заказ”), то их и вовсе нельзя прятать в выпадающие меню, а наоборот, сделать на них особый акцент.
Пример того, какое выпадающее меню может иметь право на жизнь.Здесь при наведении курсора открываются подразделы в разделах меню, и это вполне удобно. А вот, например, кнопка “Контакты” видна сразу же, без дополнительных наведений.
Кнопки для предпочтительных действий пользователей должны выделяться на фоне других. Здесь такая кнопка “Добавить в корзину”.
Попробуйте хостинг с кучей плюшек: автоустановщиком 330 движков, конструктором сайтов и теплой поддержкой 24/7!