Интерфейс – это своеобразное связующее звено между веб-сайтом и пользователем. Благодаря нему посетитель может «рассказать» системе, что он от нее ожидает, и получить ответную реакцию. Но что делать, если этого понимания между пользователем и сайтом не состоялось? Первый просто уйдет на поиски более удобного ресурса. Чтобы этого не случилось, мы решили разобраться в базовых принципах интуитивно понятного интерфейса.
Каким должен быть хороший интерфейс?
1. Кнопки с понятными обозначениями
Не размещайте на своем сайте кнопки с иконками, которые могут иметь двоякое значение и путать пользователей. Да и оригинальничать особо тоже не стоит. Например, изображение вопросительного знака сразу ассоциируется с какой-то подсказкой, руководством к действию, а значок лупы – с поиском на сайте.
Чтобы посетителю было еще понятнее, можно делать подписи к кнопкам. Например, они могут возникать при наведении курсора мыши.
2. Помощь в поиске «верного пути»
Пользователь может «заблудиться», и тогда ему потребуется помощь. Например, если посетитель оказался на странице 404, предложите ему небольшую инструкцию о том, как ему поступить. Допустим, вернуться к предпоследней странице или перейти в главный раздел.
3. Понятный, неперегруженный дизайн
Желание расположить на сайте большое количество разделов, кнопок, навигационных элементов и всего подобного, вы можете сделать только хуже. Излишнее нагромождение затрудняет понимание ресурса пользователем. Размещайте на сайте лишь то, без чего посетителю будет действительно не разобраться и исключайте то, что не несет в себе никакой смысловой нагрузки.
4. Быстрая загрузка
Когда сайт долго открывается, это раздражает и отталкивает посетителя, напрочь отбивая у него желание заходить на него снова. Протестируйте ресурс самостоятельно и попросите друзей, чтобы убедиться в быстрой и комфортной загрузке. Как правило, это зависит от предыдущего пункта. Чем меньше на ресурсе различных загромождающих деталей, тем он быстрее загружается.
5. Коммуникация с пользователем
Здесь имеется в виду то, что посетитель должен видеть, что сейчас происходит в системе, какое действие она обрабатывает. Так, когда пользователь отправляет сообщение, это должно сопровождаться соответствующим обозначением «сообщение отправляется». Когда оно доставлено – «сообщение отправлено» и т.д.
Если произошла какая-то ошибка, неполадки с сервером, об этом тоже нужно оповестить пользователя. Если на сайт необходимо будет загружать файлы больших объемов, не забудьте о прогресс-барах, чтобы пользователь видел, как продвигается процесс.
6. Различие кнопок по типу действия
Каждый дизайн предполагает разное назначение для каждой из имеющихся в нем кнопок. Одна предлагает перейти на другую страницу, следующая – просмотреть товар, еще одна – скачать инструкцию и т.д. Чтобы не вводить посетителей в заблуждение руководствуйтесь двумя простыми правилами:
- Кликабельные и некликабельные («фальшивые») кнопки должны отличаться. Сделать это можно при помощи шрифта, размера букв, цвета и т.д. Посетитель должен с первого взгляда понимать, какие кнопки помогут ему совершить какое-то действие, а какие всего лишь информируют.
- Обязательно отмечайте тот раздел, ту страницу или блок, в котором сейчас пребывает посетитель. Здесь это тоже может быть определенный цветовой или стилевой нюанс.
7. Привлекательный дизайн
Комфорт, простота и лаконичность – это замечательно, но помимо этих характеристик сайт должен быть еще и красивым, приятным для глаз. Согласитесь, ведь каждому пользователю будет в сто раз интереснее находится на ресурсе, который привлекает его визуально.
https://preview-soleprimo.ucraft.site/
Но помните о том, что красота – вещь субъективная. Это значит, что всем не угодишь и привлекательность сайта для каждого заключается в чем-то своем. Например, сайт городской библиотеки по своей стилистике и дизайнерскому решению явно будет отличаться от онлайн-визитки танцора-хореографа. Так что главный совет: опирайтесь на интересы и предпочтения своей целевой аудитории.
8. Возможность персонализации
Здесь мы подразумеваем возможность пользователя настроить некоторые нюанс сайта под себя. Как правило, это характерно для приложений и сервисов, но и на сайтах иногда встречается, что завоевывает любовь и признание аудитории. Например, человек может изменить цвет и размер шрифта, фон, расположение блоков и т.д. Обычно предлагаются варианты на выбор.
9. Пользовательский язык
Каждый текстовый блок должен быть предназначен для целевой аудитории, быть предельно понятным. То есть если вам нужно создать сайт для школьников – там будет простая разговорная лексика, иногда даже со сленговыми словами, а ресурс программиста будет насыщен профессиональными и сложными терминами. Необходимо учитывать все это для того, чтобы аудитория прониклась вашим сайтом.
10. Ненавязчивые подсказки
Внезапно появляющиеся подсказки – это здорово. Они позволяют посетителю точно понять то, в чем он не мог самостоятельно разобраться. Чтобы эти подсказки были ненавязчивыми и работающими, помните эти правила:
- должно быть минимум текста;
- не стоит делать всплывающие строки для каждого элемента сайта (только там, где без них действительно не обойтись);
- добавьте функцию временно или полностью отключить помощь.
11. Краткие формы регистрации
Заставить посетителя пройти регистрацию – едва ли не самая проблематичная задача каждого владельца сайта. Очень часто пользователи не хотят заводить свой аккаунт и оставлять данные там, где им не очень нравится, куда будут редко заходить. Иногда даже сделки в онлайн-магазинах срываются только из-за того, что клиент не хочет регистрироваться.
Чтобы такого негатива к процессу регистрации у посетителей не возникало, нужно сделать его максимально легким и незначительным. Создавайте краткие формы, где нужно оказать только самую необходимую информацию, а не полную биографию.
12. Простота в заполнении полей
Практически на любом сайте посетителю нужно что-то заполнить. Это касается не только форм регистрации, но также необходимо при оформлении заказа, похождении опроса, предоставлении контактной информации для обратной связи и т.д. Чтобы пользователи без сомнения и раздражения заполняли эти формы, придерживайтесь нескольких рекомендаций:
- По возможности избавьте посетителя от заполнения данных вручную. Это можно сделать при помощи выпадающего меню с вариантами ответов. Это уместно при введении даты рождения, города проживания и других подобных данных.
- Если все же пользователю придется вносить всю информацию самостоятельно, сделайте возможным построчную проверку. Так не будет обнуляться информация всех полей, а только там, где была допущена ошибка.
- Располагайте названия полей строго над полем ввода. Это можно объяснить с привычкой чтения, удобством восприятия: нам легче распознавать информацию сверху вниз.
- Снизьте вероятность ошибочного ввода. Мало кому придется по душе, когда нужно будет заполнять форму по сто раз, потому что то «знаки препинания не могут быть использованы», то «количество символов превысило лимит». Обработка таких форм займет больше времени, но зато вы не потеряете клиентов и не настроите их против себя.
Как проверить, прост ли интерфейс?
Для начала давайте разберемся, действительно ли так необходимо тестировать юзабилити интерфейса? На наш взгляд, есть минимум три причины это сделать:
- при создании интерфейса вы могли не заметить элементарных ошибок, которые в дальнейшем негативно повлияют на работу сайта и впечатление пользователей от него;
- вы никогда не можете сразу однозначно сказать, придется интерфейс по душе вашим целевым пользователям или нет;
- Интерфейс может некорректно отображаться на некоторых гаджетах и в некоторых браузерах, что невозможно предугадать.
С этими трудностями поможет справиться предварительная проверка интерфейса. Как ее осуществить? Предлагаем вашему вниманию три оптимальных варианта:
1. Вручную
Для этого метода вам придется запастись изрядным количеством времени и сил, поскольку тестировать вам придется самостоятельно. Ну или при помощи другого человека. И в этом же одно из главных преимуществ способа. Тестировщик этап за этапом будет проверять, как сайт «отвечает» на каждое действие посетителя. Удобнее всего отслеживать результаты по внесенным в таблицу данным.
WebVisor позволяет отслеживать поведение пользователя на уже запущенном сайте и создавать тепловую карту кликов.
2. Автоматический метод
Этот метод возможен благодаря особым программам, данные потом дополнительно перепроверяются ручным тестированием. Способ значительно меньше требует временных и денежных ресурсов.
- UsabitiyHub тестирует юзабилити по скриншотам на живых людях и через систему (есть хорошая бесплатная версия и еще более хорошая расширенная-платная).
- Яндекс.Вебмастер тестирует юзабилити на мобильных устройствах (бесплатно).
Однако здесь возникает существенный нюанс. Автоматизированная проверка юзабилити интерфейса не может гарантировать 100-процентный результат, поскольку в ходе тестирования используются базовые характеристики. Индивидуальные особенности не учитываются, а значит, некоторые нюансы, доступные лишь человеческому глазу, будут упущены из виду. Это относится, например, к цветовому решению сайта.
3. Фокус-группы
Считается, что это наиболее эффективный способ и самый приемлемый в соотношении цена-качество. Принцип действия таков:
- формируется несколько фокус-групп из ваших потенциальных пользователей по определенным характеристикам (демографические особенности, интересы, образование, уровень дохода и т.д.);
- каждой группе предлагается совершить определенный набор действий на ресурсе (при этом важно не ограничивать пользователей, предоставить им свободу выбора – это сделает эксперимент честным и непредвзятым);
- когда фокус-группы закончили, вы можете приступать к анализу: как вели себя пользователи на сайте, какие кнопки наиболее кликабельны, как быстро посетители достигали цели и т.д.
Для работы со своими фокус-группами можно все так же использовать UsabitiyHub.
И напоследок главный совет: позаботьтесь о каждом описанном выше принципе, чтобы в итоге сделать сайт максимально гармоничным и сбалансированным. Ориентируйтесь на интересы и предпочтения своих целевых пользователей, чтобы создать для них действительно дружелюбный интерфейс.