Неправильные мега-меню

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

Оригинал: Mega-Menus Gone Wrong

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

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

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

Использование мега-меню
для осмысленного выбора

    Мега-меню дают минимум два преимущества: они позволяют

  • структурировать выбор визуальными элементами;
  • иллюстрировать выбор.

    Ни то ни другое не находит в следующем примере правильной реализации. Это сайт американского правительства http://www.usa.gov:

Пример плохого мега-меню
Вместо осмысленного выбора — каша.

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

    Третья колонка стоит особняком, судя по подзаголовку «Audiences». Однако, вместо списка этих «Audiences» нам показывают бессмысленную картинку, которая не несет никакой коммуникативной ценности. Под картинкой еще и ссылка, названная так же, как и заголовок.

    Вот это надругались над всей концепцией мега-меню!

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

    В показанном примере, дизайнеры должны использовать пространство, чтобы предоставить посетителю выбор, а не пыль в глаза кидать.

Сканирование алфавита:
колонки, а не строки

    Ниже представлено выпадающее мега-меню с сайта Hulu.com — сайт для профессионалов производства видео. Как вам кажется, по какому принципу упорядочены пункты меню?

Пример плохого мега-меню
Как организованы пункты меню?

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

(Каждый сайт с плохим юзабилити отравляет собой общий колодец и те, кто пытаются делать всё правильно страдают от этого)

    Если внимательно посмотреть на меню Hulu.com, то можно заметить, что пункты выстроены по алфавиту. Я сейчас не буду увлекаться разговорами о том, что алфавитный порядок не самый удачный способ для представления вселенной жанров кино. Выбор должен быть как-то организован и сейчас мы разбираемся с тем, что есть.

    На картинке видно, что последовательность пунктов представлена горизонтально. Это неверно, так как людям удобно сканировать вертикально.

    Когда человек впервые смотрит на меню, то он, скорее всего, видит: All, Classics, Health, Reality, Action, Comedy, Home, Science. Если он посмотрит в центр списка, то прочитает там: Drama, Horror, Sports, Arts, Family, Music.

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

    Если вы рисуете таблицу рукой, то расположение элементов по горизонтали становится понятным, так как человек пишет горизонтальные линии. Это же касается и чтения. Меню это не текст. Его не читают, а сканируют взглядом, а сканировать легче вертикаль. (По этой причине, кстати, выровненные по левому краю меню легче сканировать)

Выпадающие мега-меню —
холст для дизайнера

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

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

    Ну еще бы не было проблем!

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

перевод: Рехимкулов Ринат

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s