Три устаревших UX подхода и их альтернативы
UX зависит от множества факторов, но не существует никакой научной формулы, которая подсказала бы вам, что тот или иной вариант верный либо ошибочный. Вы единственные, кто может судить об этом в зависимости от того, соответствует ли UX подход вашим потребностям.
Мы рассмотрим следующие аспекты UX:
- Большие фоновые изображения;
- Текст в виде изображения;
- Многоуровневые меню.
Помимо этого я предоставлю вам несколько альтернативных приёмов для перечисленных тем.
1. Большие фоновые изображения
За последние годы панорамные фоновые изображения стали таким популярным направлением в веб-дизайне, что они приближаются к уровню клише. За красочными примерами, отражающими данное направление, далеко ходить не надо. В сети можно найти огромное количество страниц, притягивающих внимание, больших портфолио, а в некоторых случаях даже большие корпоративные веб-сайты используют специальные полноэкранные изображения, чтобы привлечь внимание пользователей.
Хотя некоторые изображения оказывают очень впечатляющий эффект, вам всё равно часто придётся рассматривать альтернативные варианты, особенно для аудитории, которая пользуются мобильными устройствами.
Даже, если старая поговорка, гласящая: “Один раз увидеть лучше, чем сто раз услышать…“, правдива, и информация в изображениях воспринимается гораздо быстрее и легче чем текстовый материал, то разработчикам следует обратить внимание на то, как и когда применять данный принцип в веб-дизайне.
Ключевым фактором, который вы не должны недооценивать, является то, что эти гигантские фоны, на самом деле крупные файлы. Это в значительной мере влияет на скорость загрузки, что напрямую сказывается на впечатлениях пользователя.
Все эти фоновые изображения создаются для того, чтобы задать визуальный тон или эмоциональное настроение вместо того, чтобы донести какую-то информацию. На мобильных браузерах такие страницы грузятся медленно, что не может не оказывать негативное впечатление на пользователя.
Если общий размер монитора менее 1024 пикселей, то пользователю вообще не удастся разлядеть фоновое изображение. Маленькие дисплеи просто напросто не обладают достаточным количеством экранного пространства для отображения содержимого сайта и фонового изображения, так что часть страницы вовсе не попадёт в поле зрения.
Так какова же альтернатива?
Есть два варианта, которые можно было бы использовать в качестве замены:
- Установка размера изображения совместимого с контекстом, чьей задачей является подбор оптимального размера контекстного изображения для адаптивных макетов, которые задействуют совершенно разные размеры изображений при работе с разными разрешениями.
- Interchange, который позволяет загружать адаптивные изображения в зависимости от нужд пользователя. Таким образом, вы можете задать маленький, средний или большой размер изображений конкретно для каждого случая.
Подведём итог
Использование крупных изображений может отбить у части аудитории желание посещать ваш сайт. Поставьте себя на их место, и постарайтесь представить как им приходится работать с вашим сайтом (особенно, если они пользуются мобильными устройствами).
Отслеживайте время загрузки ваших страниц. Ищите лучший подход для ваших пользователей.
Текст в виде изображения
Читая данный заголовок, многие из вас могут подумать: “Нужели кто-то ещё так делает?”. Вы будете удивлены.
На сайте Apple.com данный приём использовался на протяжении многих лет. И сейчас вы можете найти текстовые заголовки, которые на самом деле являются изображениями: Mac Mini, MacBook Air и MacBook Pro. Собственно, вы можете так же найти множество примеров на страницах, посвящённых новому iPhone 6.
Кто сказал, что растровый графический подход в прошлом?
Конечно же, существует множество весомых причин для того, чтобы избегать отображение текста в изображении.
Такой текст может плохо отображаться у пользователей, которые меняют параметры разрешения экрана - гораздо более распространённое явление среди современных устройств.
Во-вторых, нам известно, что текст, вставленный в картинку, по умолчанию становится недоступным для пользователей с ограниченными возможностями. Существует временное решение данной проблемы, но тем самым мы вносим некую путаницу в то, что работало безошибочно ещё с начала 1990-х годов.
В третьих, изображения могут выглядеть ужасно на ЖК-дисплеях. Так же такие тексты очень сложно редактировать, так как даже малейшее изменение требует генерации нового изображения.
И последнее, но не по своей значимости - поисковые роботы не могут эффективно сканировать содержание страниц, содержание которых отображается в виде изображений. Ошеломляющие результаты, которые вы получаете в результате поиска изображений, свидетельствуют о том, насколько сложно компьютерам распознавать данные изображения.
Поэтому, если вам действительно необходимо отобразить текст в виде изображения, помните о том, что обязательно необходимо добавить атрибут alt
, за исключением случаев, когда картинка используется как часть оформления. Кроме этого, при использовании картинок, указывайте информацию о том, к чему привязано данное изображение.
Какова же альтернатива?
Данный подход применяется разработчиками, когда им необходимо сделать акцент на оформления сайта.
Прежде чем применять ранее упомянутый способ, следует подумать о возможности использования веб-шрифты. Их можно применить к любому тексту.
На данный момент существует множество инструментов для решения данной проблемы. В сети можно найти множество шрифтов, которые отлично подошли бы для любой вашей цели.
Самые известные из них:
Было бы очень интересно узнать почему компания Apple не разделяет подобный подход к работе.
Многоуровневые меню
Выпадающие меню стало очень популярным направлением в веб-дизайне.
Его часто применяют на сайтах с множеством страниц, разбитых по категориям.
Многоуровневое меню открывает для вас большую область действий с множеством опций. Однако, используя такой тип меню, можно запутаться, особенно если сайт использует огромное количество вложенных категорий.
И все же где альтернатива?
Единственный способ улучшить многоуровневое меню - уделить время для его оптимизации и изменения структуры.
Вот некоторые методы, которые вы могли бы применить для достижения данной цели:
- Используйте указатели интерактивного режима (плюс; минус; стрелку, направленную вниз);
- Используйте приятную анимацию;
- Для разделения категорий и под-категорий используйте отступы, чтобы пользователи не путались;
- Не пытайтесь выпендриваться какой-то особой анимацией, которая могла бы раздражать пользователей;
- Не перенасыщайте меню, чтобы оно не перегружало пользователей множеством опций.
Подытожим!
Прежде всего, крайне важно протестировать навигацию по сайту, используя устройства с сенсорным дисплеем.
Обобщим все прочитанное!
В данной статье мы рассмотрели несколько устаревших приёмов в веб-дизайне и способы их улучшения. Ваша цель - обеспечить лёгкое и приятное времяпрепровождение с любого устройства и на любой скорости.
Сосредоточьтесь на достижении лучших результатов юзабилити, экспериментируйте пока не найдёте самый подходящий и лучший вариант.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/3-outdated-ux-patterns/
Перевел: Станислав Протасевич
Урок создан: 8 Октября 2014
Просмотров: 11923
Правила перепечатки
5 последних уроков рубрики "Юзабилити"
-
Мифы о почтовом маркетинге
Вы все ещё пользуетесь почтовым маркетингом для продвижения своего бизнеса? Если нет, неужели это следствие того,что вы считаете рассылку неуместной для вашего бизнеса? Если вы все же используете рассылку, уверены ли вы в том, что она максимально эффективна? Как и многие другие вещи в жизни, область маркетинга полна слухов и мифов, которые звучат великолепно, но в действительности только вредят. К счастью, упомянутые ниже примеры помогут значительно улучшить стратегии почтового маркетинга.
-
Когда пользователи оставляют поле поиска пустым...
Думаю, вы как и я уделяете кучу времени, пытаясь усовершенствовать каждую деталь вашего сайта: от превосходного отображения на различных устройствах, до создания занимательных страницы 404! В то же время, вы когда-то задумывались, что произойдёт, если пользователь оставит поле поиска пустым, а затем нажмёт Enter?
-
Разумная достаточность: что это означает при заполнении форм?
Термин “разумная достаточность” относится к склонности человека использовать минимальные ресурсы для успешного завершения работы. Это явление, которое осуществляется на подсознательном уровне: чаще всего мы даже не задумываемся о том, что сейчас нам необходимо использовать самый минимум усилий для выполнения определённой задачи.
-
Семёрка дизайнерских тенденций, формирующих будущее UX
Вашему вниманию предлагаем наиболее впечатляющих приёмы за 2014 год, которые используются в веб-дизайне. Вне зависимости от тематики вашего сайта, данные направления могут быть вам полезны.
-
15 правил формирования ссылок для людей с ограниченными возможностями
Ссылки - это душа веба, они - это то, что делает его особенным. Но как же нам сделать так чтобы ссылки были доступными и понятными людям с ограниченными возможностями?..