Это происходит каждый день. Запутанный уличный знак вводит в заблуждение водителей. Таинственная дверь вызывает вопросы: нужно толкать или тянуть на себя. А в Интернете — это негодная кнопка, непонятная форма или огромное всплывающее окно на весь экран. Среднестатистический пользователь может сталкиваться с подобными проблемами по несколько раз в день.
Что такое грамотно разработанный пользовательский интерфейс или сокращенно UX? Это когда пользователь заходит на любой сайт, а затем быстро и эффективно находит всё, что нужно. Вот это и есть хороший, качественный пользовательский интерфейс. Когда при посещении сайта пользователь не знает, на какую кнопку щёлкнуть или запутался в сложной структуре — это некачественный пользовательский интерфейс.
Как и во всех сферах жизни, пользователи замечают только плохой UX-интерфейс. Когда всё проработано на должном уровне, проблемы с интерфейсом не возникают от слова вообще. Для тех, кто самостоятельно разрабатывает собственные веб-сайты, будет полезен материал, где на простых примерах показываются наиболее распространенные UX-ошибки.
В этой статье WaterMillSky расскажет о наиболее частых ошибках UX-дизайна и поможет советами, как устранить проблемы с пользовательским интерфейсом сайта.
Ошибка № 1: Непонятные кнопки
Когда перед пользователем предстаёт кнопка, значок или изображение, иногда он даже не знает, что делать дальше. Это касается дизайнерских решений, понятных для профессиональных дизайнеров, но озадачивающих любого, кто пытается использовать элементы дизайна по назначению.
Сегодня на каждом сайте есть конкретные подсказки для навигации. Значок маленького телефона приведет к номеру телефона, увеличительное стекло подскажет, где искать и др. Но если добавить неожиданные или двусмысленные элементы, тогда обычные пользователи попадают в тупик.
Как определить, что на сайте имеются непонятные кнопки, таинственные значки или странные подсказки? Просто спросите себя: «При первом посещении этого сайта это имеет смысл для меня?». Если ответ будет «Нет» — значит, настало время внести коррективы.
Правильный UX-дизайн с понятными кнопками
Используйте универсальные значки и изображения, созданные профессиональными дизайнерами для определённых действий. В сети Интернет есть классные веб-ресурсы, например, flaticon.com и graphicburger.com, где представлены десятки бесплатных наборов значков с классическими дизайнами.
Ошибка № 2: Слишком много всплывающих сообщений
Пользователь щелкает по ссылке, переходит на другую страницу и только начинает читать текст, как через пару секунд огромное всплывающее сообщение навязчиво заполняет весь экран. Сразу возникает вопрос: «Почему веб-дизайнеры используют то, что так явно раздражает пользователей?».
Проблема в том, что всплывающие сообщения действительно работают в интересах владельца сайта. Например, увеличивают количество регистраций среди новых пользователей. Но, несмотря на соблазн получить более высокую конверсию, следует более ответственно подходить к выбору решений, где предусмотрены всплывающие окна. Ведь сайты основаны на доверии пользователей, поэтому ухудшать пользовательский опыт в попытках получить быстрый результат будет плохим решением.
Исправляем UX-ошибку со всплывающим окном
Если всплывающее окно крайне необходимо, используйте его аккуратно, чтобы не демонстрировать навязчивость и не закрывать важную информацию на сайте. А ещё убедитесь, что всплывающее сообщение действительно полезно для посетителей сайта, а не просто отвлекает от пользовательских целей.
Ошибка № 3: Нет обратной связи с пользователем
Даже профессиональные дизайнеры делают ошибки при разработке мобильных приложений. Об этом они узнают в обратной связи от тех, для кого предназначены приложения. У пользователей возникают вопросы: кто будет использовать такое приложение, почему используются именно эти шаблоны, зачем выбрана такая цветовая схема и др.
Общение с целевой аудиторией на раннем этапе разработки дизайна поможет сэкономить немало времени, чтобы избежать типовых UX-ошибок. К счастью, тестирование юзабилити сайта — услуга для всех, а не только для крупных компаний.
Как устранить UX-проблему с обратной связью
Свяжитесь с потенциальными пользователями из числа знакомых или близких людей. Даже небольшое пользовательское тестирование поможет получить важные сведения о том, как на самом деле посетители воспринимают сайт на практике и получить знания о проблемных местах. А ещё прочитайте руководство по тестированию юзабилити DIY-сайтов.
Ошибка № 4: Забыли про мобильных посетителей
Каждый год увеличивается число мобильных пользователей, как в абсолютных значениях, так и в процентах от общего трафика на сайты. Например, ещё в 2015 году Google объявил, что впервые в истории Интернета число мобильных пользователей превысило число пользователей с десктопных компьютеров. Обновленные шаблоны современных веб-сайтов разработаны в адаптивном дизайне, когда сайт автоматически подстраивается под размеры экрана пользовательского устройства независимо от размеров его диагонали: настольного монитора, смартфона или планшета.
Как исправить ошибку мобильного UX-дизайна
Чтобы лично убедиться в работоспособности сайта для мобильных пользователей просмотрите собственный веб-ресурс с планшета или смартфона. Также рекомендуется пройти бесплатный Google Mobile-Friendly Test для поиска проблем мобильного UX-дизайна. Данный тест поможет обнаружить текст с мелким шрифтом или найти близко расположенные кнопки и ссылки, что явно затрудняют беспроблемное использование функционала сайта.
Ошибка № 5: Снова изобретается колесо
Возможно, некоторые разработчики сайтов считают, что классические правила веб-дизайна оставляют пространство для творческого воображения. Разумеется, хороший сайт обладает оригинальным дизайном. Но это не значит, что отбрасываются стандарты, методы и правила дизайна, что делают вещи простыми и понятными в использовании.
Веб-сайты развиваются годами. С того самого момента, когда возникла Всемирная паутина. Но местоположение основных элементов осталось прежним. Например, кнопка «Назад» всегда находится в верхнем левом углу. Контактная информация размещается чаще всего внизу, в подвале страницы. Это то, к чему привыкли пользователи.
Это то, с чем не следует экспериментировать. Не перемещайте основные элементы для создания необычного дизайна. Например, при создании новой формы рекомендуется запрашивать информацию в порядке обычного использования: сначала имя или ник, затем адрес электронной почты и далее по порядку.
Оригинальные формы для обратной связи, где в первых строках размещены поля не общего характера, могут вводить пользователей в заблуждение и обычно приводят к ошибкам при заполнении данных.
Как исправить классические UX-ошибки
Применение общих стандартов и правил поможет сделать сайт понятным, а значит, более привлекательным и удобным. Поместите разные элементы в те поля, которые ожидают увидеть пользователи. Размещайте самую важную информацию на первом экране, чтобы посетители могли получить доступ к данным без прокрутки страницы. Узнайте больше о дизайне для начинающих в статье о пяти лучших способов улучшения юзабилити.
