Архив метки: ux-дизайн

Как работает память: советы для UX-дизайнеров

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

1-min
При этом память — далеко не совершенный механизм, так как постоянно подвергается воздействию физиологических и эмоциональных факторов.

Психологи выделяют три типа памяти:

Сенсорная  память – на мгновение удерживает информацию,  впервые воспринимаемую органами чувств.

Краткосрочная (рабочая) память – позволяет человеку сохранять в памяти информации без повторения

Долгосрочная память  — хранилище огромных объемов информации, сохраняемых длительное время, как правило, всю жизнь.

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

l

Три главных  фактора хорошего запоминания предельно просты:

  1. Концентрация. Чтобы запомнить что-либо нужно сконцентрироваться.
  2. Ассоциации. Память представляет собой огромную базу взаимосвязанных данных. Если человек выстроит ассоциативные связи с уже чем-то хорошо  знакомым, новая информация запомнится значительно лучше.
  1. Повторение. Это лучший способ надолго запомнить информацию.

Применение этих законов в проектировании интерфейсов очень упрощают взаимодействие пользователей и помогают им запомнить главное.

Экспертные исследования памяти, применимые в проектировании интерфейсов

    • Закон Миллера

«Человек способен удержать в кратковременной памяти не больше  7 единиц информации».

Исследования 50-х годов прошлого века доказали, что кратковременная память способна вместить не больше 7 +/— 2 объектов. Для цифр это число равно 7, 6 — для букв, 5 — для слов.

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

jj

    • Закон Хика 

«Чем больше элементов, тем сложнее выбрать.»

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

ux-дизайн

Секреты памяти для UX-дизайна

  1. Не заставляйте пользователей сразу запоминать слишком много элементов

Это не значит, что содержание всех страниц должно быть ограничено 5-9 элементами. Это касается только ключевых точек взаимодействия. Следуя закону концентрации внимания, дизайнеры выделяют в структуре сайта только несколько элементов: меню, призыв к действию, изображение продукта и т.д. Визуальная иерархия – это основная стратегия построения интерфейсов. Она позволяет группировать элементы дизайна в легко доступном для человеческой памяти виде.
ux-дизайн

  1. Не перегружайте память – используйте хорошо узнаваемые символы и узоры

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

  1. Предоставляйте на выбор небольшое количество опций

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

ux-дизайн

  1. В навигации применяйте последовательные маркеры

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

  1. Не прячьте ключевые элементы навигации

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

ux-дизайн

  1. Стимулируйте разные типы памяти

Помните схему, приведенную выше? Воздействие на органы чувств – это самая первая, мгновенная стадия восприятия информации. У разных людей развиты разные типы памяти и в зависимости от этого выделяют визуалов, аудиалов, кинестетиков, людей с развитой вербальной памятью. Активируя все типы памяти, дизайнеры создают не только запоминающиеся опыты взаимодействия, но и расширяют целевую аудиторию.  Например, пункты меню оформленные как сочетание иконки и текста отвечают потребностям людей с развитой визуальной и вербальной памятью.

  1. Помните об эмоциях

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

 

Тренды в UX-дизайне в 2017 году, vol.2

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

В прошлом году мы стали свидетелями серии инноваций, произошедших в мире UX. Самый крупный и заметный из них — дополненная реальность PokemonGo – мобильная игра-бестселлер в США, заработавшая 50 миллионов скачиваний через 13 часов после своего релиза.

Можно с уверенностью сказать, что в сфере UX-дизайна в ближайшие месяцы будет сделан ряд смелых шагов. 5 ожидаемых тенденций в UX-дизайне в 2017 год:

1. Дизайн, экономящий ваше время

2017-ux-5

Безупречный UX-дизайн интуитивно понятен и экономит время пользователя — в единицу времени пользователь выполняет только одно действие. Яркий пример — на Uber процесс совершения сделки в системе бронирования предельно ясен и понятен.

Безупречный UX-дизайн интуитивно понятен и экономит время пользователя

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

2. Умная персонализация

2017-ux-4
И компании, и пользователи – все любят персонализацию. Но в 2016 году персонализация информации принесла не слишком приятные сюрпризы. Многие люди были шокированы результатами Brexit’а и президентских выборов в США, так как их ближайшие окружение создало ощущение, что весь мир разделяет их мнение.

Следующее поколение персонализированного опыта должно измениться.

3. Метрика за пределами интерфейса

2017-ux-3

Традиционные методы измерения пользовательского опыта это:

  1. Время, проведенное на сайте.
  2. Переходы по страницам.
  3. Где произошёл уход со страницы до совершения пользователем целевого действия.

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

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

4. Расширение роли и специализации в проектировании интерфейсов

2017-ux-2

Проектирование интерфейсов – всегда было обширной сферой, но в 2017 году специализация в этой сфере будет направлена на новые технологии, такие как виртуальная реальность, искусственный интеллект.

Каждый, кто занят в разработке элементов интерфейса, является частью UX-команды.

Так как опыт пользователя становится продуктом компании должны понять, что UX — это не только сфера ответственности UX-дизайнера. Каждый, кто берет на себя различные функции в процессе разработки, должен разбираться в этом. Каждый, кто занят в разработке элементов интерфейса, является частью UX-команды.

5. UX как практика менеджмента

2017-ux1

Компании, думающие на шаг вперед, видят выгоду и важность UX-дизайна в предложении своих продуктов и услуг. Но то, что будет преобладать в 2017 году и дальше – это важность UX-дизайна для сотрудников компании.

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

Веб-дизайн: взгляд на навигацию

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

На заре развития веба были три главные кнопки навигации – «Главная», «О нас», «Контакты».  В зависимости от сайта могло быть больше кнопок, а могло и не быть. Важнее всего был хороший внешний  вид этих кнопок.

Nav2

В старые добрые времена, было много фреймов, кое-как сгенерированного HTML-кода, передоз флэша, и, как следствие, — никаких шансов для SEО.

Навигация была похожа на джунгли.

NAv

Помните списки? На больших сайтах навигация имела вид длиннющего списка ссылок, каждая из которых вела на одну из многочисленных страниц, которые только могли придумать маркетологи. Сама идея «веб-стратегии» тогда не существовала, и компании  размещали на сайте всё, что могли, с целью проверить что сработает, а что нет. Результат – длинные-длинные списки ссылок, которые в совсем запущенных случаях приобретали древовидную структуру.

Навигация прошла длинный путь развития. И все ещё есть не решен вопрос как сделать ее оптимальной. Ведь для разных сайтов подходят разные решения.

Времена меняются

Перемены – единственное, что постоянно в мире IT. Чтобы понять откуда мы пришли, и куда мы идём, нужно понять причины развития навигации. Стандартное исполнение навигации менялось по трём причинам:

1. Сайты стали меньше, и больше. Это сложно

Среднестатистические сайты-визитки — основная часть веб-пространства — стали меньше. Многие бизнесы вполне обходятся такими одностраничными сайтами для продвижения своих услуг. И уже никто не пишет многостраничные эссе  в разделе «О нас». Объём текста на страницах постоянно сокращается: клиентам всего-то нужно что вы продаете, где вы это продаёте и по какой цене.  И они не против узнать ваши контактные данные и профили в соц. сетях.

С другой стороны, разные CMS сейчас настолько доступны, что никому не составит труда создать многостраничный сайт или блог.

2. Девайсы изменились

Device

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

3. Наше представление о пользователях и сами пользователи изменились

UX

Давно прошли те времена, когда компьютер был роскошью, редкостью и им пользовались только для работы.

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

Где мы сейчас

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

1. Плоская навигация.

Это то, к чему все привыкли — список ссылок, горизонтально или вертикально размещенный в верхней части страницы. Это то, что будет работать всегда, списки просто становятся короче. Лучший вариант для небольших сайтов, сайтов-визиток, и интернет-магазинов с небольшим ассортиментом.

2.Скрытая навигация

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

По началу это кажется не таким уж необходимым в случае версий для десктопа. Но, например, как в случае с сайтом http://www.awwwards.com/ это имеет смысл: так как меню — многоуровневое, и скрытие панели навигации не наносит ущерб юзабилити.

3. Гибридная навигация

На больших сайтах и, конечно, в веб-приложениях часто нужно использовать больше одной формы навигации. Хороший пример — http://www.itsnicethat.com/ — основное меню расположено слева в шапке cтраницы, а более полное и подробное спрятано за кнопкой гамбургерного меню.

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

4. Навигация на основе систематики

Зайдите на какой-нибудь блог. Или новостной сайт, или Pinterest. Здесь обитает такой вариант навигации. Её цель – помочь пользователю найти нужный однородный контент среди обилия информации, систематизированной по тематике, тегам, дате.

5. Экспериментальная навигация

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

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

Навигация в будущем

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