Снижение юзабилити, как последствия моды на плоский дизайн

Posted on by riasevastopol

Плоский дизайн (flat design) начал набирать популярность с 2010 года. Начало появляться все больше приверженцев радикально облегченного дизайна интерфейсов, в котором интерактивные элементы не стилизовались под объемные, не снабжались анимацией, индикаторами текущего состояния и всплывающими подсказками. Как говорится, красота — в простоте.

И вправду, лаконичный, не перегруженный тенями и псевдо-3D дизайн многим оказался по вкусу, а к концу 2013 стал, пожалуй, самым популярным при создании сайтов, лендингов и приложений.

Но как эта мода отразилась на эффективности самих сайтов?

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

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

  • 18 примеров лендинг пейдж с плоским дизайном

Показатели кликабельности: до и по окончании

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

Во времена расцвета скевоморфизма (направления, противоположного плоскому дизайну), интерактивность элементов выражалась более очевидно — объемные кнопки, тени, эффект глянца, анимация и без того потом, в зависимости от фантазии дизайнера. Наряду с этим, дабы выяснить, кликабелен ли элемент, пользователи, в большинстве случаев, руководствовались двумя версиями:

1. В случае если элемент ярко выделен — вероятнее, он кликабелен.
2. В случае если элемент не выделяется на неспециализированном фоне — вероятнее, он некликабелен.

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

Соответственно, у пользователя показалось уже три варианта:

1. Ярко выделенный элемент, возможно, кликабелен.
2. Другие выделенные элементы также, быть может, кликабельны (но смогут быть выделены на неспециализированном фоне и просто из эстетических мыслей).
3. Кроме того невыделенные элементы время от времени кликабельны, и узнать это возможно, лишь наведя на них курсор.

  • Как сделать кликабельные элементы лендинга интуитивно-понятными?

Влияние плоского дизайна на юзабилити

Разумеется, оно неоднозначное. С одной стороны, интерфейс делается легче, лаконичнее, приятнее визуально. Но имеется и последовательность негативных моментов.

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

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

Твитнуть цитату

Во-вторых, пользователи стали больше зависеть от реакции на клик (либо на тап, в случае если речь заходит о мобильной версии сайта). В то время, когда пользователь не уверен, что элемент есть интерактивным — ему требуется немедленный отклик на идеальное воздействие (не более 0,1 секунды).

Реакция на клик может выражаться по различному, к примеру:

  • трансформацией цвета кнопки.
  • эффектом «вдавливания» кнопки.
  • сменой индикатора состояния.
  • обновлением статуса.

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

И, наконец, люди стали больше зависеть от контекстных подсказок для определения кликабельности. В то время, когда явные показатели отсутствуют — они ищут косвенные, к примеру:

  • главные фразы типа «Приобрести», «Заказать», «Отыскать» и т. д;
  • обычное размещение элементов — скажем, горизонтальный последовательность слов либо фраз в верхней части страницы, в большинстве случаев, воспринимается как навигационная панель;
  • контекст элемента, другими словами что его окружает. К примеру, текстовые подсказки, либо стрелки.

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

В случае если же пользователи вынуждены разбираться с интерфейсом сайта — это только увеличивает показатель отказов.

  • 16 примеров вебмагазинов с плоским дизайном

Зависит ли эффективность плоского дизайна от возраста пользователей?

Кое-какие дизайнеры утверждают, что это естественно, в случае если пользователи старшего поколения не вычисляют плоский дизайн интуитивно понятным, потому, что они просто к нему не привыкли. Плоский дизайн делает ставку на молодежь. И вправду, как показывают изучения Nielsen Norman Group, люди 18-30 лет, другими словами представители «поколения игрек» (так именуемые миллениалы, Millennials), значительно стремительнее выявят кликабельные элементы, чем люди постарше.

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

1. Юные люди более приспособлены к обнаружению узких показателей кликабельности чисто в силу возраста (лучше зрение, стремительнее реакция).
2. Молодым людям приходится чаще разбираться в разнообразных интерфейсах (к примеру, в компьютерных играх), что помогает собственного рода тренировкой.
3. Юные люди стремительнее обучаются новому, а также осваивают новые тенденции в дизайне интерфейсов.

Наряду с этим, не обращая внимания на то, что игреки намного лучше выявят кликабельные элементы, они все равно тратят много времени на изучение страницы.

К примеру, при проведении юзабилити-теста данной страницы (сайт музыкального фестиваля) исследователи задавали участникам вопрос: «Как вы определили, что имена исполнителей в перечне кликабельны?». Ответы от миллениалов оказались в полной мере ожидаемыми. Кто-то просто высказал предположение, что за каждым именем обязана прятаться дополнительная информация об исполнителе, а остальные и вовсе кликали наугад.

Как улучшить юзабилити сайтов с плоским дизайном?

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

Хорошая новость: эти новые модели поведения — не финиш света. Необходимо их при развитии собственного проекта, дабы создать простой, лаконичный, но наряду с этим наглядный интерфейс, в котором пользователь разберется за считанные секунды.

Специалисты Nielsen Norman Group советуют:

  • визуально выделять интерактивные элементы тем либо иным методом (кнопки-призраки, выделенные текстовые ссылки и без того потом), дабы пользователь с первого взора имел возможность выяснить, какие конкретно элементы стоит проверить прежде всего;
  • не применять подсказки при наведении курсора как единственный метод распознать кликабельность. К примеру, в вебмагазинах на изображения товаров довольно часто додают полупрозрачный значок увеличительного стекла — и пользователь осознаёт, что при наведении либо клике на изображение он может его расширить;
  • убедиться, что пользователь приобретает незамедлительный и заметный отклик при сотрудничестве с кликабельным элементом;
  • ориентируйтесь на собственную целевую аудиторию. К примеру, в случае если ваш сайт рекомендован для молодежи, то учитывайте, что юные люди меньше нуждаются в явном выделении всех интерактивных элементов страницы. Наряду с этим, само собой разумеется, самый надёжный способ определить, как интерфейс удобен для пользователей — это юзабилити-тесты и аналитика;
  • уделить время контекстным подсказкам в интерфейсе. К примеру, в случае если какой-то заголовок некликабелен — не хватает написать его без подчеркивания. Так как точно на вторых сайтах пользователь уже сталкивался с тем, что ссылки давались простым текстом, так что все равно на всякий случай кликнет по нему.
  • интуитивный веб и Информационный пробел-дизайн

Выводы

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

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

Высоких вам конверсий!

По данным nngroup.com, image source: Ray Schamp

Случайные статьи:

Flat Design — #1 — Введение и основные принципы


Подборка похожих статей:

riasevastopol

More Posts