Позитивный пользовательский опыт - это, по сути, самый важный аспект проектирования и создания веб-сайтов. Проблема в том, что его нелегко определить, потому что объем этой проблемы охватывает гораздо больше, чем кодирование и веб-разработка. Ниже представлены некоторые из наиболее важных правил разработки веб-сайтов с хорошим UX.
Пользовательский опыт - это общее количество впечатлений, полученных и испытанных при использовании данного устройства или программного обеспечения. Конечно, чем больше положительных впечатлений, тем лучше. Это означает, что пользователь на веб-сайте проводит больше времени, и получает больше удовольствия от работы с ним, что может легко привести к увеличению конверсии и, следовательно, к оставлению контактных данных, совершению возможной транзакции.
На практике понимаемый таким образом UX является результатом деятельности, граничащей с несколькими дисциплинами. Психология, эстетика, эргономика, теория цвета, веб-разработка в широком смысле слова - UX-дизайн может быть результатом всех этих областей знаний.
Положительный пользовательский опыт на веб-сайте: примеры решений
Видимость состояния системы
Пользователь должен знать, в какой части сайта он находится и что происходит в данный момент. На практике это заключается в том, что, например, когда пользователь загружает файл из Интернета, он должен видеть индикатор выполнения записи такого файла на диск. В свою очередь, когда клиент оформляет заказ в магазине, он должен иметь возможность легко вернуться к любому этапу покупки. Более того, видимость состояния системы в этом случае предполагает, что пользователь также знает свое местоположение на веб-сайте - например, благодаря навигации по URL-адресу. Таким образом, он может в любой момент переключиться на другую подстраницу.Совместимость системы и реальности
Страницы должны быть спроектированы так, чтобы их содержание могло понять как можно больше людей. Это относится не только к языку или терминологии, но даже к обычным описаниям товаров, форме значков или функциям в меню. Другими словами, пользователь, который хочет купить брюки, должен иметь возможность выбрать этот товар, щелкнув значок брюк, а не туфли. Затем, если он желает, он должен иметь возможность обратиться к таблице размеров и прочитать - при необходимости - в чем разница между приталенным и обтягивающим кроем. Язык должен быть нейтральным и прозрачным.Пользовательский контроль над отдельными операциями
Сайт должен информировать пользователя о возможных последствиях его действий. Например, дополнительно спросить, действительно ли клиент хочет удалить товар из корзины или остановить регистрацию. Дополнительные уведомления во время оформления заказа также являются хорошей идеей. Кроме того, некоторым пользователям нравится, когда их на сайте «ведут за руку». Другим нравится гораздо больше свободы. Следовательно, обе группы должны иметь возможность перемещаться по сайту на своих условиях.Соблюдение стандартов, например, в контексте UI (пользовательского интерфейса)
Очевидные проблемы: внутренний поисковик вверху или вверху справа, а меню слева. Логотип также находится слева, желательно вверху - щелкнув по нему, можно вернуться на главную страницу. Одинаковый стиль по всему сайту. Действующие стандарты верстки сайтов появились не на пустом месте, и если пользователи к ним привыкли, менять их нет смысла.Как избежать ошибок?
С одной стороны, предотвращение ошибок просто рекомендует выполнить все возможные тесты несколько раз, прежде чем загружать свою страницу на сервер. А также минимизация риска ошибки. Запрос не сохранять данные при обновлении сайта или выходе из него - прекрасный пример предотвращения ошибок. Так же, как очень четкая информация об отсутствии товара на складе, когда пользователь хочет заказать такой товар.Выбирать вместо того, чтобы помнить
Загадочное, но по сути очень простое правило. Он заключается в том, что от пользователя не требуется запоминать предыдущие действия на веб-сайте или правила использования данного веб-сайта. На практике это означает, что, например, недавно просмотренные товары должны быть доступны после одного щелчка. Информация, необходимая для использования функций веб-сайта, например, требования к содержанию, введенному в форму заказа, также должна быть доступна немедленно, без необходимости запоминать их или возвращаться к ним, нажимая кнопку «Назад».Эффективность и гибкость
Применение этого принципа в контексте решений, которые должны быть включены на веб-сайт, имеет решающее значение с точки зрения как пользователя, так и его владельца. «Эффективность» описывает общую производительность страницы - скорость загрузки, надежность, стабильность - все, что заставляет пользователя в конечном итоге совершить конверсию. В свою очередь, «Гибкость» заключается в использовании решений, адаптированных к пользователям с различными потребностями или компетенциями.К таким решениям относятся:
- возможность выбора между светлым и темным режимами на странице;
- выбор цвета и размера шрифта;
- возможность включить или отключить уведомления;
- фильтры в поисковике товаров;
- отзывчивость веб-сайта и его AMP-версии;
- различные формы навигации по страницам (боковое меню, верхнее меню, ярлыки страниц).
Эстетика и минимализм
Эту эвристику можно кратко резюмировать: простота - это высшая изощренность. Правила ясны: чем меньше текста, информации или ярких отвлекающих факторов, тем лучше. При таком подходе минималистичный, интуитивно понятный дизайн всегда будет иметь преимущество перед чванливым графическим дизайном, подавляющим не только цветами, но и избытком информации. Простые, четкие, разборчивые формы просто оптимальны.Эффективная обработка ошибок
Категория, связанная с «предотвращением ошибок». Даже на сайте с лучшим дизайном могут появляться пробелы и неточности - например, пустые страницы, ошибки 404, проблемы из-за конфликта скриптов или плагинов. Важно, чтобы пользователь знал, что произошло, почему это произошло и что нужно делать, чтобы найти решение. Все должно быть представлено в понятной и доступной форме, чтобы пользователь знал, что ошибка произошла не по его вине или по незнанию.Документация и помощь
Информационная архитектура на веб-сайте должна быть спроектирована таким образом, чтобы было место для обширной документации, касающейся помощи в навигации по веб-сайту и использовании его функций. Руководства, учебные пособия, базовая техническая информация - могут быть пользователи, которые захотят использовать этот тип проектной документации.Как распознать сайт с хорошим UX?
Например, зайдя на сайт SEO-агентства, видно, что он имеет понятный макет, видимое меню, быстро загружается и работает очень эффективно. Понятно, чем занимается компания, а также есть возможность немедленно связаться с представителями этой компании. Когда пользователь начнет просматривать содержимое этого веб-сайта, он сразу заметит, что это коммерческий контент, предназначенный для бизнес-клиента, а также контент для позиционеров, копирайтеров или людей, занимающихся электронной коммерцией в широком смысле слова.