Паттерны дизайна. Почти мифическая фраза, которая часто вызывает трепет или негодование. Дизайнеры склонны думать о паттернах дизайна, как о готовых стандартных решениях, которые можно применять в различных контекстах почти механически, часто без должного рассмотрения. Навигация? Off-canvas! Предложение дня? Карусель! Ну, вы поняли суть.
Иногда мы используем эти паттерны, даже не задумываясь о них, и для этого есть веская причина: придумывать новое решение всякий раз, когда мы сталкиваемся с проблемой интерфейса рискованно и отнимает много времени, потому что мы не знаем, сколько времени потребуется, чтобы внедрить новое решение и определить, будет ли оно корректно или провалит тесты юзабилити.
Паттерны дизайна могут быть чрезвычайно полезными, в основном потому, что экономят время и быстрее дают лучшие результаты. Нам не нужно их идентично применять, к каждой проблеме, с которой мы сталкиваемся, но мы можем опираться на них, используя имеющийся опыт, для обоснования принимаемых решений. Ведь мы знаем, что они достаточно хорошо работали в других проектах.
За последние несколько лет я провел много времени, работая с различными компаниями, пробуя различные подходы и изучая их с помощью тестов юзабилити. Эта статья представляет собой резюме наблюдений и экспериментов, проведенных за это время.
Базовые элементы аккордеонов
Есть веская причина, по которой аккордеон, вероятно, является самым популярным элементом адаптивного дизайна. Это чрезвычайно полезный паттерн для постепенного раскрытия информации – выделение важных деталей раздела и раскрытие дополнительных деталей по тапу или клику мышью, если это необходимо. В результате дизайн остается сфокусированным и в первую очередь отображает важную информацию, а все остальное легко доступно. Если вы столкнетесь с проблемой любого рода – слишком много вариантов навигации, слишком много контента, слишком подробное представление – старый добрый аккордеон может быть хорошей отправной точкой для решения этой проблемы. Чаще всего он работает на удивление хорошо.
Насколько сложно создать аккордеон? Что ж, нужно учесть много факторов. Хороший пример – сайт Schoolfinder
Однако даже такой предсказуемый и часто используемый компонент, как аккордеон, имеет много возможностей для интерпретаций и двусмысленности. Не поймите меня неправильно: контекст имеет значение. Аккордеон для навигации потребует иного подхода, нежели для раздела вопросов и ответов. Но в любых контекстах мы должны тщательно обдумать две вещи: визуальный и интерактивный дизайн аккордеона, чтобы устранить любую путаницу и неверное толкование.
Теперь, если мы более внимательно посмотрим на базовые элементы аккордеона, не составит труда увидеть его атомарные элементы. Аккордеон всегда содержит заголовок категории, развернутое и свернутое состояния, иконку, указывающую на расширение, и интервал между ними. После расширения категории иконка должна измениться, указывая на сворачивание. Однако, что, если пользователь нажмет на свернутую карточку, в то время как другая карточка открыта? Должна ли развернутая карточка закрываться автоматически или нет? Что, если невозможно отобразить все элементы – должна ли страница автоматически прокручиваться вверх? Давайте подробнее рассмотрим эти и связанные с ними вопросы.
Классический пример аккордеона на сайте Nsb.no, норвежском планировщике поездок, с иконкой, выровненной по правому краю панели, и всей панелью, действующей как триггер расширения
Выбор иконки для обозначения расширения
А теперь приступим. Что мы знаем? Что ж, очевидно, что в большинстве интерфейсов с письмом слева направо название категории будет выровнено по левому краю. Предполагая, что, как и во многих аккордеонах, подпункты будут перемещаться между двумя разделами, какую иконку вы бы выбрали, чтобы сообщить об этом поведении? Стрелка, указывающая вниз, стрелка, указывающая вправо, шеврон, указывающий вниз, плюс, обведенный плюс или что-то еще?
Zvv.ch объединяет два горизонтальных аккордеона с одной и той же иконкой (обведенный плюс) - одной для обозначения вариантов поездки, а другой для обозначения остановок между двумя точками. Оба они служат одной цели (расширению) и выглядят одинаково. Они четко передают назначение иконки и ожидаемое поведение
По моему опыту, кажется, что выбор иконки не имеет значения, если она не перегружена различными значениями в одном и том же интерфейсе. Например, если вы используете обведенный кружком плюс для обозначения расширения, масштабирования и объединения двух элементов в тарифных планах – это может ввести в заблуждение. Однако, в контексте аккордеона пользователи, похоже, понимают, что, если у некоторых элементов навигации есть иконка, а в других разделах нет, это своего рода знак того, что при тапе или клике становится доступным больше контента. Мы не обнаружили никаких признаков того, что одна иконка более или менее узнаваема, чем другие. Однако, это не означает, что одни варианты не могут вызвать большую путаницу, чем другие.
Ableton.com использует значок плюса, чтобы обозначить как тарифное предложение (вверху), так и расширение (если вы прокрутите страницу вниз). Иконки, имеющие несколько значений, могут сбить с толку, потому что некоторые пользователи могут ожидать либо расширения при нажатии на значок вверху (но ничего не происходит), либо отсутствия взаимодействия при нажатии на значок плюса внизу (действует как расширение)
Например, Slack использует стрелку, указывающую вправо, хотя элементы аккордеона перемещаются вертикально между заголовками категорий, а не вправо от них. Теперь стоит спросить, какое назначение должно иметь направление иконки? Вероятно, она должна служить индикатором направления движения или, точнее, того, куда будет перемещаться взгляд пользователя после тапа или клика по иконке. Например, в приложении «Почта» на iOS, шеврон, указывающий вправо, соответствует перемещению взгляда пользователя слева-направо.
В Slack тарифные планы на мобильных устройствах отображаются в виде свернутых аккордеонов, при этом шеврон указывает вправо, а движение происходит сверху вниз.
В приложении «Почта» на iOS, например, шеврон, указывающий вправо, соответствует перемещению взгляда пользователя слева-направо
Наличие сопоставления между направлением иконки и движением взгляда пользователя кажется разумным, но поскольку разные интерфейсы ведут себя по-разному (с таинственными иконками, заставляющими пользователя разгадывать головоломки), не все будут ожидать такого поведения. Так что, в конце концов, это не имеет значения, вы все равно не сможете соответствовать ожиданиям некоторых пользователей. При проектировании мы, как правило, сосредотачиваемся на том, что проектируем, но даже если наши интерфейсы будут предельно последовательны, у пользователей будут ожидания, зависящие от опыта, полученного на других сайтах. Таким образом, главное – быть максимально устойчивым и обеспечить пользователям возможность легко и незамедлительно сделать шаг назад в случае, если ожидания не оправдаются.
Значок плюса может иметь разные значения. На сайте Leica, плюс открывает лайтбокс, в котором отображается продукт. Некоторые пользователи могут не ожидать такого поведения. Значок лупы здесь может быть менее неоднозначным
Итак, оглядываясь назад на выбор иконки, если элементы аккордеона сдвигаются вертикально, интуитивно кажется безопасным использовать любую из иконок, перечисленных выше, кроме иконки, указывающей вправо. Единственная проблема, которую следует учитывать – не перегружена ли выбранная вами иконка другим значением в другом контексте. Например, если вы используете иконку плюса для выделения частей тарифного плана (где плюс не нажимается), а затем используете аналогичную иконку для аккордеона. В таком случае лучше избегать использования одной и той же иконки для разных целей, так как это может вызвать путаницу.
Значит, все прояснилось? Ну, не совсем.
Давайте на секунду подумаем об ожидаемом взаимодействии. В то время как стрелка и шеврон обычно служат сигналом для изменения в указанном направлении, плюс указывает на добавление и расширение. В обоих случаях изменение может происходить по-разному: нажатие на иконку вызывает либо оверлей с элементами навигации, появляющийся поверх контента, либо перемещение элементов по вертикали (а не по горизонтали).
Какого поведения следует ожидать пользователям, когда они видят стрелку в меню навигации на сайте tifwe.org? Понятно, что иконка справа от элементов навигации указывает на подменю, а в дизайне хорошо используется доступное пространство. Название категории – это ссылка, которая переходит прямо к категории, а стрелка предлагает расширение
Однако, когда пользователь попадает на страницу, сначала он не знает, попал ли он на страницу с длинным скроллом, где ссылки перебрасывают вас к разным частям страницы, или на «обычный» веб-сайт с разделами, существующими на отдельных страницах. Довольно часто стрелка, указывающая вниз, запускает переход к разделам на странице, а не расширяет возможности навигации. Вполне вероятно, что в прошлом пользователь мог быть дезориентирован, попав в раздел длинной страницы, а затем вернулся к началу страницы и продолжил оттуда.
Иконки часто неоднозначны. На Qso.com, как пользователи могут точно узнать, будет ли нажатие кнопки внизу экрана расширять область в виде аккордеона или прокручивать страницу вниз? В этом случае прокручивается страница. Это может быть проблемой, поскольку шеврон часто указывает на расширение
В результате, если вы решите использовать стрелку, вы можете столкнуться с тем, что некоторые пользователи будут ожидать, что страница прокрутится вниз до этого раздела страницы. Таким образом, шеврон кажется более безопасным и предсказуемым вариантом; если вы решите использовать его, то в свернутом состоянии направьте его вниз, а в развернутом - вверх. Для иконки плюса вы можете выбрать между значками минус или крестик.
Стрелки на сайте Papillons De Nuit. Что вы ожидаете при нажатии на стрелки вверху страницы и справа? Стрелка сверху действует как подсказка (и ничего не делает при нажатии), в то время как стрелки справа прокручивают пользователя к разделам страницы. Не каждый пользователь мог ожидать такого поведения
Итак, что все это значит для дизайнеров? Во-первых, если предполагается, что элементы аккордеона скользят горизонтально слева-направо, можно безопасно использовать стрелку, указывающую вправо. Во-вторых, если предполагается, что элементы аккордеона скользят вертикально сверху-вниз, подойдет либо шеврон, указывающий вниз (не стрелка!), либо иконка плюса.
Учитывая вышесказанное, выбор иконки должен быть довольно простым решением. Но в зависимости от того, насколько близко эта иконка находится к заголовку категории, это тоже может вызвать путаницу. Теперь, какие варианты нужно учитывать при выборе положения этой иконки?
Выбор положения иконки
Параметры! Независимо от того, какую иконку вы выбрали, вы можете разместить ее: а) слева от названия категории; б) справа от нее; в) выровнять иконку по правому краю всей панели элементов навигации, разделив ее интервалом с названием категории.
Иногда клик по текстовой метке открывает отдельную страницу категории, а клик по пустому месту ничего не делает. Вот почему, желая раскрыть аккордеон, некоторые пользователи будут пытаться нажать на иконку, а не на категорию или пустое пространоство. Исследование Viget.com
Имеет ли значение позиция? На самом деле, да. Согласно статье Viget «Тестирование дизайна и иконок меню аккордеона», некоторые пользователи, как правило, сосредотачиваются на нажатии именно на иконку, а не на всю панель навигации. Это происходит по простой причине: в прошлом пользователи могли «обжечься» об альтернативные варианты аккордеона. На некоторых сайтах заголовок категории не запускает расширение, а вместо этого переходит прямо в категорию. В других дизайнах нажатие на панель навигации не вызывает ни расширения, ни перехода в категорию – абсолютно ничего не происходит.
Хотя мы, конечно, проектируем всю область так, чтобы она была целевой, не каждая навигация имеет подобное поведение, поэтому некоторые пользователи не будут знать какая у вас навигация, пока не нажмут на нее (или не наведут на нее курсор). Поскольку наведение курсора не всегда доступно, нажатие на иконку кажется более безопасным – нажатие на иконку почти всегда вызывает ожидаемое поведение. Это важная деталь, которую нужно учитывать при создании аккордеона.
При использовании различных интерфейсов и реализаций казалось, что с иконкой, размещенной справа от заголовка категории, пользователи предпочитают фокусироваться на иконке чаще, чем, если иконка размещается слева (где пользователи нажимают на заголовок категории или пустую часть панели). Однако некоторые пользователи по-прежнему склонны выбирать иконку. Следовательно, будет хорошим решением сделать ее достаточно большой для удобного нажатия – не менее 44 × 44 пикселей.
Следует выравнивать по левому или по правому краю? Похоже, это не имеет большого значения. Но, если у вас есть группа аккордеонов (возможно, расположенных в меню навигации), при этом длина заголовков категорий сильно различается, переключение состояний аккордеона во многих разделах потребует немного большего внимания, чем просто перемещение по панели навигации сверху-вниз. Просто указатель мыши или палец нужно постоянно перемещать, чтобы попасть по этой причудливой иконке! Кроме того, если иконка расположена справа, на узком экране пальцу придется перемещаться по области навигации, закрывая экран. Если иконка расположена на правом краю панели, эта проблема будет решена.
Но, если иконка выровнена по правому краю панели, нам все равно нужно быть осторожными, чтобы не размещать ее слишком далеко от названия категории. Визуально должно быть очевидно, что расширение относится к категории; поэтому в разных окнах просмотра положение иконки может измениться, чтобы визуальная связь оставалась очевидной. Кроме того, иконка может стать немного больше на более широких экранах. Этот вариант кажется предпочтительным для группы аккордеонов, но на самом деле не имеет большого значения для отдельного аккордеона – если ваши данные не доказывают обратное.
Дизайн взаимодействия для аккордеона
Однако, даже если убрать все эти мелкие детали, взаимодействие по-прежнему вызывает ряд вопросов. Предположим, что заголовок категории выровнен по левому краю, а иконка – по правому краю панели. Что должно произойти, когда пользователь нажимает на название категории, иконку или пустое пространство между ними? Должны ли все они инициировать расширение или они должны служить разным целям?
Что ж, можно быть уверенным в одном: когда пользователь нажимает на иконку, он, вероятно, ожидает какого-то расширения, поэтому нажатие на иконку обязательно должно вызвать расширение. Однако по названию категории можно щелкнуть как с намерением перейти прямо к категории, так и с целью расширения.
Если заголовок категории вызывает расширение, нам необходимо предоставить ссылку на категорию в выпадающем меню, чтобы пользователи могли переходить к этому разделу (например, «Все элементы»). Это означает, что переход пользователя от первой страницы к категории может вызвать путаницу, поскольку он не ожидает, что при нажатии на заголовок категории потребуется дополнительное нажатие. Однако, возможность вернуться в этом случае очевидна и на самом деле не заставляет пользователя восстанавливать предыдущее состояние, поскольку он может сразу продолжить работу.
Если ссылка на категорию в аккордеоне очевидна, она не будет мешать работе, тогда как переход к категории вместо того, чтобы развернуть элемент навигации, а затем вернуться назад, может показаться неудобным. Вот почему, вероятно, лучше иметь и иконку, и заголовок категории, запускающие раскрытие. Это менее навязчиво. Должно ли это взаимодействие происходить между заголовком категории и иконкой? Некоторые дизайнеры могут возразить, что, когда пользователь нажимает на область навигации, он может не захотеть расширения, а скорее «привязать» указатель мыши к началу прокрутки страницы, и, следовательно, это будет мешать работе. Это возможно, но вряд ли случится, если пользователь решит открыть меню навигации, чтобы изучить доступные параметры.
Чем ближе к иконке происходит касание, тем больше вероятность того, что пользователи будут ожидать расширения. Однако это не означает, что чем ближе нажатие к названию категории, тем больше вероятность перехода к ней
Аккордеоны часто используются для карточек, и в зависимости от ширины области просмотра карточки могут быть довольно широкими, поэтому, хотя некоторые пользователи будут отчаянно пытаться нажать на иконку, часть пользователей будет сворачивать и разворачивать карточки, нажимая на пустую область в панели. Другие пользователи будут привыкать к пустой области, не имеющей никакой цели, и просто проигнорируют ее. Лишь немногие ожидают, что панель будет служить ссылкой на категорию. В наших тестах оказалось, что наличие триггерного расширения пустого пространства менее запутанно, чем другие варианты, поэтому мы решили его использовать.
Аккордеон не должен служить только навигации. Он также может отображать более или менее подробные сведения, например в таблице лидеров на PremierLeague.com. (Desktop view⎢Mobile view)
Но что, если вы хотите, чтобы заголовок категории был связан непосредственно с категорией? Одна из идей состоит в том, чтобы внести ясность, имея два визуально отличающихся элемента, которые «намекают» на границы элементов – например, с разным цветом фона для иконки и заголовка категории (см. Пример выше). В наших экспериментах мы не заметили изменений в поведении и ожиданиях пользователей – некоторые люди все равно нажимают на категорию и задаются вопросом, что же произошло. Опять же, соединение раздела внутри расширенного аккордеона кажется более безопасным вариантом.
Что делать, если пользователь нажимает иконку для расширения, но на экране недостаточно места для отображения всех подэлементов? Кто-то из вашей команды может предложить автоматически прокрутить страницу вверх, чтобы убедиться, что расширенная область отображается в самом верху экрана. Это хорошая идея?
Всякий раз, когда мы пытаемся забрать контроль у пользователя, это решение должно быть тщательно обдумано и проверено. Возможно, пользователь заинтересован в одновременном просмотре нескольких разделов и хочет быстро переключаться между содержимым этих разделов. Вместо того, чтобы заставлять пользователя задаваться вопросом о поведении авто скролла или прыжка, а затем скроллить назад, чтобы восстановить предыдущее состояние, кажется менее навязчивым просто оставить все как есть, отдав решение на усмотрение пользователя. Он может прокручивать страницу вниз, если необходимо. Не многие пользователи будут ожидать скачка вверх страницы – лучше не прерывать юзерфлоу или добавить постоянную ссылку на раздел (если он действительно длинный).
На сайте Sony.com, если один раздел раскрывается и пользователь нажимает на другой раздел, открытый раздел автоматически сворачивается. Такое поведение неодинаково на разных веб-сайтах, поэтому пользователи не могут полагаться на такое поведение и ожидать его везде
И тогда возникает другой вопрос: если один раздел уже развернут, и пользователь нажимает на другой раздел, должен ли первый свернуться или остаться как есть? Если первый раздел сворачивается автоматически, но это не совсем то, на что надеялся пользователь, он всегда может открыть его снова, но не сможет просматривать или сравнивать обе категории одновременно. Если раздел останется развернутым, ему придется активно закрыть ненужную категорию. У обоих вариантов есть разумные случаи использования.
Природа аккордеона требует автоматического сворачивания, но это может быть не лучший вариант с точки зрения юзабилити. Для аккордеонов с большим количеством элементов мы склонны оставлять разделы раскрытыми, потому что прыжки, происходящие в результате одновременного закрытия и открытия панелей, слишком отвлекают. Следовательно, в качестве альтернативы вы можете предоставить кнопку «свернуть все» / «развернуть все», что может быть очень полезно для расписания или подробной таблицы. Если элементов не так много, то раздел может быть свернут по умолчанию, потому что переход будет минимальным. (Обратите внимание, что для горизонтальных аккордеонов секция определенно закроется – держать ее открытой просто не имеет смысла).
На веб-сайте The Guardian слева размещается шеврон, за которым следует название категории и пустое место. Нажатие на любую точку панели вызывает расширение, а домашняя страница категории аккуратно отображается в качестве первого варианта среди элементов аккордеона
И еще кое-что. Не обращайте внимания на выбор иконки или ее положения, всякий раз, когда аккордеон раскрывается, его должно быть легко сразу же свернуть. Это взаимодействие не требует дополнительных движений курсора мыши или пальца – как и любое другое взаимодействие по скрытию-раскрытию элемента. Это означает, что иконка для сворачивания и раскрытия должна измениться при активации, но ее положение должно оставаться неизменным, что позволяет мгновенно переключать состояние аккордеона.
Вывод
Уф, это было долгое изучение, казалось бы, очевидного паттерна дизайна. Итак, как нам создать идеальный аккордеон? Мы выбираем иконку, которая указывает на расширение (шеврон, указывающий вниз, или значок плюса), делаем ее достаточно большой для удобного нажатия и помещаем ее поперек правого края панели. Вся панель навигации запускает расширение – с достаточным отступом вокруг панели для переключения состояний, и ссылкой на главную страницу категории в категории аккордеона.
Если мы решим использовать шеврон, направление должно измениться при нажатии, а если это значок плюса, он может легко смениться на «-» или «x», чтобы указать на сворачивание. Чтобы взаимодействие было еще более четким, мы можем использовать тонкие переходы или анимацию, которые будут выдвигать и задвигать элементы категорий.
Конечно, ваше решение может сильно отличаться в зависимости от контекста, поэтому, если вы ищете альтернативное решение, ниже вы найдете несколько вопросов, которые мы всегда задаем при проектировании аккордеона.
Чеклист проектирования аккордеонов
- Какую иконку вы выберете для обозначения раскрытия?
- Какую иконку вы выберете для обозначения сворачивания?
- Где именно вы разместите иконку?
- Как оформить заголовок категории?
- Как вы указываете состояние свертывания и раскрытия (помимо иконки)?
- Что произойдет, если пользователь нажмет на категорию?
- Должен ли аккордеон содержать ссылку на главную страницу категории?
- Что произойдет, если пользователь нажмет на пустое место?
- Должен ли развернутый раздел сворачиваться автоматически при выборе другого раздела?
- Что делать, если для отображения всех элементов недостаточно места?
- Должны ли у вас быть ссылка или кнопка «Свернуть все / Открыть все»?
Уровень внимательности, требуемый для такого, казалось бы, устоявшегося и предсказуемого компонента, как аккордеон, оказывается почти бесконечной историей дизайн-экспериментов и сессий юзабилити, потому что существует лишь несколько руководящих принципов для внешнего вида и взаимодействия этого компонента. Хотя создать доступный аккордеон несложно, создать универсальный аккордеон не так-то просто. Следовательно, пользователи часто чувствуют себя потерянными, потому что поведение аккордеона не соответствует их ожиданиям или из-за того, что взаимодействие прерывает их юзерфлоу. Наша задача – уменьшить трудности и сделать так, чтобы они встречались как можно реже. Благодаря гибкому дизайну мы можем добиться именно этого.
Возможно, у вас был иной опыт, чем упомянутый в статье? Пишите об этом в комментариях!
Перевод статьи smashingmagazine.com
Топ коментарі (0)