Три устаревших UX подхода и их альтернативы

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

Мы рассмотрим следующие аспекты UX:

• Большие фоновые изображения;
• Текст в виде изображения;
• Многоуровневые меню.

Помимо этого я предоставлю вам несколько альтернативных приёмов для перечисленных тем.

1. Большие фоновые изображения

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

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

Даже, если старая поговорка, гласящая: “Один раз увидеть лучше, чем сто раз услышать…“, правдива, и информация в изображениях воспринимается гораздо быстрее и легче чем текстовый материал, то разработчикам следует обратить внимание на то, как и когда применять данный принцип в веб-дизайне.

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

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

Если общий размер монитора менее 1024 пикселей, то пользователю вообще не удастся разлядеть фоновое изображение. Маленькие дисплеи просто напросто не обладают достаточным количеством экранного пространства для отображения содержимого сайта и фонового изображения, так что часть страницы вовсе не попадёт в поле зрения.

Так какова же альтернатива?

Есть два варианта, которые можно было бы использовать в качестве замены:

• Установка размера изображения совместимого с контекстом, чьей задачей является подбор оптимального размера контекстного изображения для адаптивных макетов, которые задействуют совершенно разные размеры изображений при работе с разными разрешениями.
• Interchange, который позволяет загружать адаптивные изображения в зависимости от нужд пользователя. Таким образом, вы можете задать маленький, средний или большой размер изображений конкретно для каждого случая.

Подведём итог

Использование крупных изображений может отбить у части аудитории желание посещать ваш сайт. Поставьте себя на их место, и постарайтесь представить как им приходится работать с вашим сайтом (особенно, если они пользуются мобильными устройствами).

Отслеживайте время загрузки ваших страниц. Ищите лучший подход для ваших пользователей.

Текст в виде изображения

Читая данный заголовок, многие из вас могут подумать: “Нужели кто-то ещё так делает?”. Вы будете удивлены.

На сайте Apple.com данный приём использовался на протяжении многих лет. И сейчас вы можете найти текстовые заголовки, которые на самом деле являются изображениями: Mac Mini, MacBook Air и MacBook Pro. Собственно, вы можете так же найти множество примеров на страницах, посвящённых новому iPhone 6.

Кто сказал, что растровый графический подход в прошлом?

Конечно же, существует множество весомых причин для того, чтобы избегать отображение текста в изображении.

Такой текст может плохо отображаться у пользователей, которые меняют параметры разрешения экрана - гораздо более распространённое явление среди современных устройств.

Во-вторых, нам известно, что текст, вставленный в картинку, по умолчанию становится недоступным для пользователей с ограниченными возможностями. Существует временное решение данной проблемы, но тем самым мы вносим некую путаницу в то, что работало безошибочно ещё с начала 1990-х годов.

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

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

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

Какова же альтернатива?

Данный подход применяется разработчиками, когда им необходимо сделать акцент на оформления сайта.

Прежде чем применять ранее упомянутый способ, следует подумать о возможности использования веб-шрифты. Их можно применить к любому тексту.

На данный момент существует множество инструментов для решения данной проблемы. В сети можно найти множество шрифтов, которые отлично подошли бы для любой вашей цели.

Самые известные из них:

• Google Fonts
• MyFonts.com
• Typography
• Font Squirrel
• Typekit

Было бы очень интересно узнать почему компания Apple не разделяет подобный подход к работе.

Многоуровневые меню

Выпадающие меню стало очень популярным направлением в веб-дизайне.

Его часто применяют на сайтах с множеством страниц, разбитых по категориям.

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

И все же где альтернатива?

Единственный способ улучшить многоуровневое меню - уделить время для его оптимизации и изменения структуры.

Вот некоторые методы, которые вы могли бы применить для достижения данной цели:

• Используйте указатели интерактивного режима (плюс; минус; стрелку, направленную вниз);
• Используйте приятную анимацию;
• Для разделения категорий и под-категорий используйте отступы, чтобы пользователи не путались;
• Не пытайтесь выпендриваться какой-то особой анимацией, которая могла бы раздражать пользователей;
• Не перенасыщайте меню, чтобы оно не перегружало пользователей множеством опций.

Подытожим!

Прежде всего, крайне важно протестировать навигацию по сайту, используя устройства с сенсорным дисплеем.

Обобщим все прочитанное!

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

Сосредоточьтесь на достижении лучших результатов юзабилити, экспериментируйте пока не найдёте самый подходящий и лучший вариант.