Проектируем кнопку «Назад”: лучшие практики
Пользователи часто путаются и расстраиваются, когда взаимодействуют с кнопкой “Назад”. Как спроектировать этот элемент правильно и где разместить его в наших интерфейсах?
В юзабилити-тестировании не так много вещей, повторяющихся снова и снова. Одна из них — тревога, которую испытывают люди, когда им приходится возвращаться на предыдущую страницу. Пользователи обычно не слишком доверяют кнопке «Назад» в браузере, и на то есть веские причины. Все мы бывали в ситуациях, когда эта кнопка просто не срабатывала, как ожидалось, и уводила нас от цели, а не приближала к ней.
Когда мы имеем дело с одностраничным чекаутом, кнопка «Назад» должна возвращать пользователя к предыдущему шагу, а не к предыдущей странице. Разработано Адамом Сильвером.Представьте, что вы находитесь внутри многоэтапного процесса, такого как оформление заказа. В этом случае кнопка «Назад» зачастую возвращает вас в самое начало процесса, а не на предыдущий шаг, при этом все ваши данные испаряются без следа.
А иногда нам приходится многократно вводить важные, конфиденциальные сведения, например, номера кредитных карт, потому что их нельзя сохранить по соображениям безопасности. Не говоря уже о перемещениях в одностраничных приложениях, которые не всегда соответствуют ожиданиям.
Как же сделать кнопку «Назад» более предсказуемой и полезной? Давайте рассмотрим несколько идей и примеров использования.
Страх перед кнопкой «Назад» в браузере
На первый взгляд кнопка «Назад» не кажется большой проблемой, не так ли? И, конечно же, люди активно ей пользуются. Однако они часто думают дважды, прежде чем нажать на нее. В основном, они просто боятся потерять свои данные или определенное состояние страницы, на которой сейчас находятся — и это вполне объяснимо, поскольку иногда непонятно, куда их приведет браузер.
Один из участников исследования комментировал свои действия так: «Как мне вернуться назад? Просто нажать кнопку «Назад»? Если честно, не очень удобная навигация.
А теперь она вернула меня в раздел с товарами для женщин. Окей. Мне это не нравится.” (Изображение: Baymard Institute)Вот почему нередко люди делают скриншоты текущей страницы или открывают ту же страницу в другой вкладке, чтобы убедиться, что их данные (по крайней мере, с этой страницы) все еще доступны в браузере для копирования.
Серьезные проблемы начинают проявляться, когда мы добавляем в интерфейс оверлеи, якорные ссылки, галереи изображений и динамические представления. Например, если пользователь листает изображения в карусели, меняет вид дашборда или переключает состояния на странице с ценами. Должна ли кнопка «Назад» возвращать элементы в прежнее состояние или переносить человека на предыдущую страницу?
Однозначного ответа на этот вопрос нет, но есть некоторые дизайн-шаблоны, которые работают лучше других.
Всегда закрывайте большие оверлеи кнопкой «Назад»
Исследования показывают, что чем сильнее новая область просмотра отличается визуально, тем больше вероятность того, что пользователи воспримут ее как отдельную страницу.
В связи с этим возникают ожидания, что кнопка «Назад» вернет человека на предыдущую «страницу», хотя технически это может быть не так.
Это касается списка товаров, который появляется после фильтрации / сортировки, формы заказа в виде аккордеона, но также может быть полезно для якорных ссылок, расширенного и усеченного контента — особенно если разделы длинные. В этих ситуациях разумно привести поведение кнопки браузера «Назад» в соответствие с ожиданиями пользователя — с помощью History API.
Однако, конечно, мы не хотим засорять историю пользователя ненужными состояниями или страницами. Когда человек просматривает галерею изображений в статье, мы, вероятно, не должны добавлять каждое изображение в историю браузера, поскольку это значительно усложнит переход к «настоящей» предыдущей странице.
Самое главное, что посетители редко воспринимают состояние карусели как «другую страницу». До тех пор, пока страница существенно не меняется, нам не следует добавлять состояния в историю. Это касается чекбоксов, выпадающих меню, переключателей просмотра и динамических секций, поскольку они меняют содержимое одной и той же страницы.
Наконец, всякий раз, когда пользователь может потерять данные, вернувшись назад, например, из оверлея, несомненно, стоит предложить ему подтвердить свое действие и сообщить, что он может потерять некоторые данные.
Положение пользовательской кнопки «Назад»
Несмотря на то, что мы настроили кнопку “Назад” в соответствии с ожиданиями пользователей, некоторые все равно будут беспокоиться о том, действительно ли она работает должным образом. Хороший способ решить эту проблему — добавить в интерфейс кастомную кнопку «Назад», специфичную для конкретной формы.
Пользователи воспринимают стандартную кнопку браузера и кастомную кнопку «Назад», эффектно вписанную в интерфейс, совершенно по-разному.
Если поведение кнопки браузера не всегда очевидно, то от специальной оригинальной кнопки они ожидают “правильного поведения”. Следовательно, люди с большим доверием относятся к таким кнопкам и меньше сомневаются при взаимодействии с ними.
Но где же на самом деле должна располагаться эта кастомная кнопка?
Схема расположения кнопок Стива Шогера. Так где же должна находиться кнопка «Назад»? (Изображение: Steve Schoger)Стив Шогер утверждает, что независимо от того, как выровнены кнопки в форме — по правому или по левому краю, — всегда стоит располагать основное действие с внешней стороны. Это означает, что кнопка «Назад», которая также должна иметь меньший визуальный вес, будет располагаться рядом с кнопкой «Далее».
Это хорошо работает для форм, но если пользователь приходит с обзорной страницы (страницы раздела), мы можем дополнительно отобразить липкую панель, плавающую иконку или хлебные крошки, позволяющие вернуться на нее.
Или же просто расположить кнопку «Назад» на видном месте, например, в верхней части страницы.
Возможно, стоит поместить кнопку «Назад» над формой
Действительно, приведенный выше пример — довольно распространенный эффективный паттерн. Однако, по моему опыту, он также может создавать определенные проблемы, поскольку время от времени пользователи случайно нажимают не на ту кнопку — в основном потому, что эти кнопки расположены слишком близко друг к другу.
Поэтому я всегда придерживался мнения, что стоит разместить их как можно дальше друг от друга и протестировать это решение.
Слева: кнопка «Назад» в нижней части страницы; справа: Кнопка «Назад» над формой. Главный вопрос заключается в том, какой шаблон работает лучше? (Изображение: Adam Silver)Адам Сильвер предлагает разместить кнопку «Назад» над формой, как это сделал Джо Ланман, дизайнер Gov.uk. По словам Джо, при таком подходе она находится примерно там же, где и в большинстве браузеров.
Кроме того, такая кнопка, вероятно, не нужна внизу страницы: «если пользователи заполнят форму и кликнут “Назад”, они потеряют свои ответы«.
Пользовательская кнопка «Назад» должна выглядеть как интерактивный элемент
Стоит подчеркнуть, что кнопка «Назад», расположенная над формой, должна выглядеть как интерактивный элемент. Это может быть подчеркнутая ссылка или отдельная кнопка, которая действительно выглядит как кнопка.
Когда кнопка / ссылка «Назад» сливается со страницей, пользователи не могут найти способ вернуться и обычно начинают поиск в нижней части страницы. Чтобы эта кнопка работала, она должна быть видимой и заметной.
На сайте Gov.uk ссылка «Назад» расположена сверху, подчеркнута и выглядит как интерактивный элемент. (Изображение: Gov.uk)На сайте Gov.uk ссылка «Назад» расположена сверху (там, где пользователи обычно ожидают увидеть хлебные крошки), подчеркнута и выглядит как интерактивный элемент.
Здесь есть только одна заметная кнопка — «Продолжить».
Еще одна проблема, с которой я столкнулся при использовании этого шаблона, заключается в следующем: когда форма длинная, пользователи могут слишком быстро прокручивать страницу вниз, даже не заметив кнопку «Назад» в верхней части страницы. В тот момент, когда они останавливаются, кнопка оказывается вне поля зрения, особенно на мобильных устройствах, и поэтому им может быть трудно найти надежный способ вернуться назад.
Когда форма короткая, подобных проблем не возникает: формы Gov.uk как раз спроектированы по принципу «Один шаг — одна страница».
Располагайте кнопки «Назад» и «Далее» далеко друг от друга
Вам может показаться вполне логичным сгруппировать элементы управления «Назад» и «Далее», чтобы пользователи могли быстро перемещаться туда-сюда. Это действительно разумно в ситуациях, когда путь пользователя предполагает много переходов, что характерно для различных конфигураторов, кастомайзеров и мастеров форм.
Кастомайзер Van’s shoes содержит панель навигации для быстрых переходов, а также переключатель “вперед / назад”. На узких экранах все доступные опции перечислены горизонтально, и чтобы выбрать одну из них, покупатель должен свайпнуть влево или вправо.
Сайт 177milkstreet с красивым лейаутом для отображения пошаговых рецептов. Этот шаблон можно применить и к конфигураторам. (Посмотрите видео)В рецептах 177milkstreet кнопки «Назад” / “Далее» сгруппированы в нижней части разделенного экрана, а сами шаги расположены вертикально.
Fully.com подталкивает пользователей к завершению настройки.
На сайте Fully кнопки «Назад» и «Далее» расположены очень далеко друг от друга. Пользователи могут вернуться в любой момент, нажав на стрелку «Назад», которая расположена в левом верхнем углу, в то время как кнопка “Далее” находится в правом нижнем углу. Это надежный способ исключить ошибки.
Конечно, кнопка «Назад» отличается от кнопки «Предыдущий шаг», но часто при тестировании пользователи воспринимают их как похожие или, по крайней мере, выполняющие одно и то же действие. В общем, чем больше расстояние между двумя противоположными действиями, тем меньше вероятность ошибки.
Предусмотрите возможность сохранения настроек
Как мы видели выше, иногда пользовательская кнопка «Назад» не нужна вовсе. Конечно, нам в любом случае нужно обеспечить привычное поведение кнопки браузера «Назад», но вместо кастомной версии мы можем предоставить пользователям возможность возвращаться только к нужным опциям. Например, с помощью специальной области сохранения настроек.
На сайте Fender Mod Shop вы можете создавать «снапшоты» в процессе настройки модели. Вы всегда будете двигаться вперед, но при этом иметь возможность вернуться к определенной версии, которую сохранили в специальном окне.
Подведем итоги
Пользователи воспринимают наши сайты иначе, чем мы. Чем сильнее меняется область просмотра, тем выше вероятность того, что пользователи примут ее за “отдельную страницу”. Люди полагаются на кнопку «Назад», чтобы вернуться к предыдущему шагу, но поведение интерфейса часто не соответствует их ожиданиям, что приводит к разочарованию и отказу от дальнейшего взаимодействия.
Нам определенно нужно как минимум согласовать поведение кнопки “Назад” с ожиданиями пользователей. Кроме того, было бы неплохо добавить в интерфейс кастомную кнопку «Назад» — и, возможно, разместить ее подальше от кнопок «Далее» или «Продолжить», может быть, даже в верхней части страницы.
Хотя в некоторых сценариях это работает очень хорошо, такое решение может не сработать для вас. В этом случае постарайтесь не располагать кнопки слишком близко друг к другу и убедитесь, что они достаточно сильно различаются визуально. Одна может быть оформлена как ссылка, а другая — как кнопка. То, что кажется незначительной деталью, может окупиться с лихвой и привести к снижению количества отказов от покупки и повышению конверсии. А это того стоит.
Использование кнопки «Домой», боковой и других кнопок на iPad
В этой статье приведены сведения о кнопках и переключателях на iPad.
Если на iPad есть кнопка «Домой»
Верхняя кнопка
Позволяет вывести устройство из режима сна или перевести его в этот режим. При нажатии и удерживании данной кнопки устройство включается или выключается.
Кнопки регулировки громкости
Служат для регулировки громкости при прослушивании музыки, просмотре видео и в играх.
Боковой переключатель (на некоторых моделях iPad)
Предназначен для отключения звука и предупреждений с устройства iPad, а также для включения и выключения блокировки ориентации.
Если на iPad нет кнопки «Домой»
Кнопки регулировки громкости
Служат для регулировки громкости при прослушивании музыки, просмотре видео и в играх.
Использование кнопок регулировки громкости
По умолчанию на многих моделях iPad для увеличения громкости используется кнопка регулировки громкости, расположенная ближе к верхней кнопке, а для уменьшения громкости используется кнопка регулировки громкости, расположенная дальше от верхней кнопки, независимо от ориентации iPad:
Динамическое поведение кнопок регулировки громкости
На iPad Pro 11 дюймов (4-го поколения), iPad Pro 12,9 дюйма (6-го поколения), iPad (10-го поколения), iPad mini (6-го поколения) и iPad Air (5-го поколения) элементы регулировки громкости автоматически подстраиваются при повороте iPad.
Таким образом, громкость можно увеличивать кнопкой справа или сверху, а уменьшать — кнопкой слева или снизу. На более ранних моделях iPad необходимо включить данную опцию.
Включение или выключение динамического поведения кнопок регулировки громкости
На большинстве моделей iPad с ОС iPadOS 15.4 и более поздних версий можно настроить поведение кнопок регулировки громкости так, чтобы оно изменялось в зависимости от того, как вы держите iPad. На iPad Pro 11 дюймов (4-го поколения), iPad Pro 12,9 дюйма (6-го поколения) и iPad (10-го поколения) функция динамического поведения кнопок регулировки громкости всегда включена.
Чтобы включить или выключить функцию динамического поведения кнопок регулировки громкости, выполните следующие действия.
- Убедитесь что на iPad установлена ОС iPadOS 15.4 или более поздней версии.
- Перейдите в меню «Настройки» > «Звуки».
- Включите фиксацию кнопок громкости, чтобы их поведение оставалось неизменным.
Отключите эту функцию, чтобы поведение кнопок регулировки громкости менялось динамически с учетом положения iPad.
Отключите эту функцию, чтобы поведение кнопок регулировки громкости менялось динамически с учетом положения iPad.Для языков с написанием справа налево громкость увеличивается кнопкой слева или сверху, а уменьшается — кнопкой справа или снизу. Если на iPad включена блокировка ориентации, кнопки регулировки громкости будут работать в зависимости от ориентации, зафиксированной для iPad.
Дополнительная информация
Дата публикации:
Дизайн улучшенной кнопки «Назад» UX — журнал Smashing Magazine
- Чтение за 11 мин. UX, Юзабилити
- Поделиться в Twitter, LinkedIn
Об авторе
Виталий Фридман любит красивый контент и не любит легко сдаваться. Когда он не пишет, он, скорее всего, занимается интерфейсом и UX… Больше о Виталий ↬
С кнопкой «Назад» пользователи часто путаются и расстраиваются. Как разработать лучший UX кнопки «Назад» и где разместить эти кнопки «Назад» в наших интерфейсах.
В юзабилити-тестировании не так много вещей, которые повторяются снова и снова. Одним из них является тревога, которую испытывают люди, когда им приходится возвращаться на предыдущую страницу. Обычно пользователи не очень доверяют кнопке браузера «Назад» , и на то есть веская причина. Мы все были в ситуации, когда кнопка «Назад» в браузере просто не работала должным образом, уводя нас от цели, а не к ней.
Для одностраничных проверок кнопка «Назад» должна возвращать пользователя на предыдущий шаг, а не на предыдущую страницу. Дизайн Адама Сильвера. (Просмотреть увеличенную версию) Например, если вы находитесь в многоэтапном процессе, таком как оформление заказа, кнопка «Назад» часто приводит вас к самому началу процесса , а не к предыдущей странице, при этом все ваши данные испаряются. в разреженном воздухе. А иногда нам приходится вводить конфиденциальные данные, такие как номера кредитных карт, несколько раз, потому что их нельзя сохранить по соображениям безопасности.
Так как же сделать кнопку «Назад» немного более предсказуемой и полезной? Давайте рассмотрим несколько идей и вариантов использования ниже.
Пссс! Эта статья является частью нашей продолжающейся серии о шаблонах проектирования. Он также является частью шаблонов проектирования интеллектуальных интерфейсов 🍣 и доступен в интерактивном тренинге по проектированию интерфейсов 🍕.
Страх перед кнопкой «Назад» в браузере
На первый взгляд кнопка «Назад» не кажется большой проблемой, не так ли? И, конечно же, пользователи во многом полагаются на кнопку «Назад» в браузере. Тем не менее, пользователи часто думают дважды , прежде чем на самом деле нажать эту кнопку. В основном они просто боятся потерять свои данные или состояние страницы, в которой они сейчас находятся — и это понятно, ведь иногда непонятно, куда их приведет браузер.
Вот почему нередко можно увидеть, как люди делают скриншотов текущей страницы или открывают ту же страницу на другой вкладке, чтобы убедиться, что их данные (по крайней мере, для текущей страницы) по-прежнему доступен в браузере для копирования и вставки.
Серьезные проблемы начинают проявляться, когда мы вводим в наши интерфейсы наложения, якорные ссылки, галереи изображений и динамические представления. Например, если пользователь щелкает карусель в статье, меняет представление на панели инструментов или переключает состояния на странице с ценами. Должна ли кнопка «Назад» возвращать пользователя в предыдущее состояние или на предыдущую страницу?
На этот вопрос нет однозначного ответа, но есть некоторые шаблоны проектирования, которые работают лучше других.
Всегда закрывайте большие оверлеи с помощью кнопки «Назад»
Исследования показывают, что чем больше новое представление визуально отличается, тем больше вероятность того, что пользователи будут воспринимать его как отдельную страницу . С этим связано ожидание того, что кнопка «Назад» вернет пользователя на предыдущую «страницу», даже если технически это не может быть отдельной страницей.
Для больших оверлеев всегда полезно иметь кнопку «Назад», закрывающую модальное окно, а не возвращающую пользователя на предыдущую страницу. (Изображение предоставлено Эриком Бейли) (Большой превью) Это относится к списку продуктов, появляющемуся после фильтрации и сортировки, для аккордеонных касс, но также может быть полезно для якорных ссылок и расширенного и усеченного контента — особенно если разделы длинные. В таких ситуациях разумно привести поведение кнопки «Назад» в браузере в соответствие с ожиданиями пользователя — с помощью History API.
Конечно, мы не хотим загрязнять историю пользователей ненужными состояниями или страницами. Когда пользователь просматривает галерею изображений в статье, мы, вероятно, не должны добавлять каждое изображение в историю пользователя, так как это затруднит переход на «настоящую» предыдущую страницу.
Самое главное, состояние карусели редко воспринимается как «другая страница». Пока страница существенно не меняется, нам следует избегать добавления состояний в стек истории пользователя. Это относится к флажкам, раскрывающимся меню, переключателям просмотра, переключателям и динамически внедряемым разделам, а также к изменению содержимого на той же странице .
Наконец, всякий раз, когда пользователь может потерять данные, вернувшись «назад», т.е. возвращаясь из оверлея, это определенно хорошая идея, чтобы предложит пользователям подтвердить свое действие и сообщит им, что они могут потерять некоторые данные.
Положение пользовательской кнопки «Назад»
Несмотря на то, что мы согласовали ожидания в отношении поведения кнопки «Назад», некоторые пользователи по-прежнему будут беспокоиться, действительно ли кнопка «Назад» работает должным образом. Хороший способ решить эту проблему — добавить в интерфейс специальный компонент «Назад» для конкретной формы.
Существуют большие различия в том, как пользователи воспринимают нативную кнопку браузера и пользовательскую кнопку «Назад», красиво спрятанную где-то в интерфейсе. Хотя поведение кнопки браузера не всегда очевидно, пользователи ожидают «правильное поведение» из специальной пользовательской кнопки, живущей на веб-сайте или в приложении. Следовательно, пользователи также больше доверяют пользовательским кнопкам и используют их с меньшими сомнениями.
Но тогда где же должна жить эта специально разработанная кнопка?
Макет Стива Шогера для размещения кнопок. Так где же здесь должна жить кнопка «Назад»? (Изображение предоставлено Стивом Шогером) (Большой предварительный просмотр) Стив Шогер предполагает, что независимо от того, расположены ли кнопки в форме справа или слева, всегда полезно поместите первичное действие на внешнюю сторону .
Это означает, что кнопка «Назад», которая также будет визуально менее тяжелой, будет находиться рядом с кнопкой «Далее».
Это может хорошо работать для форм, но если пользователь переходит со страницы обзора, мы также можем отобразить липкую полосу , плавающий значок или навигационные крошки, позволяющие им вернуться к обзору. Или, конечно, мы могли бы просто показать это «Назад» на видном месте, например. в верхней части страницы.
Больше после прыжка! Продолжить чтение ниже ↓
Рассмотрите возможность размещения кнопки «Назад» над формой
Действительно, приведенный выше пример является довольно распространенным шаблоном, который обычно работает хорошо. Однако, по моему опыту, это также может вызвать проблемы, поскольку время от времени пользователи случайно нажимают не на ту кнопку — в основном потому, что эти кнопки расположены слишком близко друг к другу.
Поэтому я всегда утверждаю, что размещение кнопок как можно дальше друг от друга — это идея, которую стоит проверить.
Адам Сильвер предлагает поместить кнопку «Назад» над формой , как это было разработано Джо Ланманом, дизайнером Gov.uk. По словам Джо, в конечном счете, кнопка «Назад» находится в том же месте , что и , где большинство браузеров размещают кнопку «Назад». Кроме того, кнопка «Назад», вероятно, не нужна внизу страницы после того, как пользователь заполнит форму — «если он заполнит форму и нажмет «Назад», он теряют ответы .»
Настраиваемая кнопка «Назад» должна выглядеть как интерактивный элемент
Стоит подчеркнуть, что кнопка «Назад», расположенная над формой, должна фактически выглядеть как интерактивный элемент . Это может быть подчеркнутая ссылка или отдельная кнопка, которая на самом деле выглядит как кнопка.
Если ссылка «Назад» сливается с остальной частью страницы, пользователи иногда не могут найти способ вернуться назад и обычно начинают поиск внизу страницы. Итак, чтобы все заработало, кнопка «Назад» должно быть видно и заметно .
На Gov.uk ссылка «Назад» расположена в самом верху страницы, подчеркнута и выглядит как интерактивный элемент. (Изображение предоставлено Gov.uk) (Большой предварительный просмотр)На Gov.uk ссылка «Назад» расположена в самом верху страницы (подчеркнута) и выглядит как интерактивный элемент — в том месте, где обычно ожидается панировочные сухари. Есть только одна заметная кнопка, и это кнопка «Продолжить».
Еще одна проблема, с которой я столкнулся при использовании этого шаблона, заключается в том, что для длинных форм в загруженных интерфейсах пользователи могут слишком быстро прокручивать вниз, прежде чем даже заметят кнопку «Назад» в верхней части страницы. В тот момент, когда они фактически перестанут прокручиваться, кнопка будет вне поля зрения , особенно на мобильных устройствах, и у них могут возникнуть проблемы с поиском надежного способа вернуться назад.
Эта проблема на самом деле не проявляется для более коротких форм — это то, что предлагает Gov.uk с их шаблоном One-thing-per-page.
Расположение кнопок «Назад» и «Далее» далеко друг от друга
Может показаться разумным сгруппировать элементы управления «Назад» и «Далее» в интерфейсе, чтобы пользователи могли быстро перемещаться вперед и назад. Это действительно разумно в ситуациях, когда мы ожидаем, что путь пользователя будет содержать много прыжков. Обычно это бывает в конфигураторы, настройщики и мастера .
Предыдущий/следующий шаг, например. тот, что находится на настройщике обуви Van, — отличный маленький компонент, помогающий клиентам плавно переходить от одного этапа к другому. Однако важно, чтобы у каждого шага были разумные значения по умолчанию. (Смотреть видео) Настройщик обуви Van’s имеет навигационный ящик для быстрых переходов, а также пошаговый переключатель «предыдущий/следующий». На узких экранах все варианты перечислены горизонтально, и чтобы выбрать один, покупатель проводит пальцем влево или вправо.
Рецепты 177milkstreet группируют кнопки «Предыдущий/Далее» в нижней части разделенного экрана навигации, а отдельные шаги расположены вертикально.
Fully.com подталкивает пользователей к завершению настройки. (Большой предварительный просмотр)В режиме «Полностью» кнопки «Назад» и «Далее» расположены очень далеко друг от друга . Пользователи могут вернуться назад, полностью нажав стрелку назад на левом внешнем краю экрана, пока они продолжают процесс в правом нижнем углу экрана. Это безопасный способ избежать ошибок или неправильных кликов.
Конечно, кнопка «Назад» отличается от кнопки «Назад», но часто при тестировании пользователи воспринимают их похожими или, по крайней мере, выполняют одно и то же действие. В общем, чем больше расстояние мы добавляем между двумя противоположными действиями , тем меньше вероятность возникновения ошибок.
Как мы видели выше, иногда вам может не понадобиться пользовательская кнопка «Назад». Конечно, нам в любом случае нужно правильно поддерживать поведение кнопки «Назад» в браузере, но вместо пользовательского способа возврата мы можем разрешить пользователям возвращаться только к соответствующим параметрам. Например, с выделенная область моментальных снимков для состояний .
Fender Mod Shop позволяет пользователям сохранять состояния настройки в виде снимков. (Большое превью)В Fender Mod Shop вы можете создавать «моментальные снимки» во время настройки модели. Вы всегда готовы исследовать и настраивать, а также иметь возможность вернуться к конкретной версии, которую вы сохранили в виде моментального снимка.
Подведение итогов
То, как мы видим наши собственные веб-сайты, не обязательно совпадает с тем, как их воспринимают наши пользователи. Чем больше отличаются взгляды от одного взаимодействия к другому, тем больше вероятность того, что пользователи воспримут эти взгляды как «отдельные вещи» .
Нам определенно нужно согласовать ожидания пользователей с поведением кнопки «Назад» как минимум. Кроме того, было бы неплохо добавить пользовательскую кнопку «Назад» в наши интерфейсы — и, возможно, разместить их подальше от кнопок «Далее» или «Продолжить», может быть, даже в верхней части страницы .
Хотя в некоторых сценариях это работает очень хорошо, в вашем случае это может не сработать. В этом случае старайтесь не размещать кнопки слишком близко друг к другу и убедитесь, что визуально они достаточно различаются. Один может быть ссылкой, а другой может быть кнопкой. То, что кажется небольшой деталью, может окупиться с лихвой и привести к меньшему количеству отказов и более высокой конверсии. И это того стоит.
Если вас интересуют аналогичные идеи по UX, взгляните на Smart Interface Design Patterns , наш новый 9-часовой видеокурс с сотнями практических примеров из реальных проектов.
Шаблоны проектирования и рекомендации для всего, от мега-раскрывающихся списков до сложных корпоративных таблиц — с 5 новыми сегментами, добавляемыми каждый год. Просто говорю! Проверьте бесплатный предварительный просмотр.
Перейти к видеокурсу →
100 паттернов проектирования и из реальной жизни
Примеры.
9-часовой видеокурс + живой UX-тренинг. Бесплатный предварительный просмотр.
Полезные ресурсы
- Кнопка «Назад» Ожидания, Baymard Institute
- Проектирование с учетом Интернета, Хлоя Сандерсон
- Проектирование идеального конфигуратора
- Проектирование идеального аккордеона
- Разработка идеальной бесконечной прокрутки
- Разработка идеального сравнения функций
- Разработка идеального слайдера
Кнопка «Назад» | ion-back-button: Пользовательский значок меню для приложений
Версия: v6shadow
При нажатии кнопки «Назад» осуществляется переход назад в историю приложения.
Он отображается только тогда, когда в стеке навигации есть история, если не установлено defaultHref . Кнопка «Назад» отображает другой текст и значок в зависимости от режима, но это можно настроить.
По умолчанию кнопка «Назад» будет отображать текст «Назад» со значком «шеврон назад» на ios и значок «стрелка назад» на md . Это можно настроить для каждого компонента кнопки «Назад», установив свойства значка или текста . Кроме того, его можно установить глобально, используя свойства backButtonIcon или backButtonText в глобальной конфигурации. Дополнительную информацию см. в документации по конфигурации для Angular, React или Vue.
Предыдущая история по умолчанию
Иногда приложению может потребоваться показать кнопку «Назад» и вернуться назад, когда истории нет. Это можно сделать, установив defaultHref на кнопке «Назад» на путь.
Чтобы использовать defaultHref , приложение должно содержать маршрутизатор с установленными путями.
цвет
| Описание | Цвет из цветовой палитры вашего приложения. Параметры по умолчанию: "основной" , "Вторичный" , "Третичный" , "Успех" , "ПРЕДУПРЕЖДЕНИЕ" , "Опасность" , "Light" , "Medium" и "» , " и " «, " и "» , " и " . Дополнительные сведения о цветах см. в теме. |
| Атрибут | Color |
| Тип | "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜" ｜ "｜". «третичный» ｜ «предупреждение» ｜ строка и запись <никогда, никогда> ｜ не определено |
| Default | undefined |
defaultHref
| Description | The url to navigate back to by default when there is no history. |
| Attribute | default-href |
| Type | string ｜ undefined |
| Default | undefined |
отключено
| Описание | true Если пользователь не может взаимодействовать с кнопкой, |
| Attribute | disabled |
| Type | boolean |
| Default | false |
значок
| Описание | Имя встроенного именованного значка SVG или точное значение src файла SVG для использования в качестве кнопки «Назад». |
| Attribute | icon |
| Type | null ｜ string ｜ undefined |
| Default | undefined |
mode
| Описание | Режим определяет, какие стили платформы использовать. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
routerAnimation
| Описание | При использовании маршрутизатора указывает анимацию перехода при переходе на другую страницу. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
текст
| Описание | Текст для отображения в кнопке «Назад». |
| Атрибут | text |
| Type | null ｜ string ｜ undefined |
| Default | undefined |
type
| Description | Тип кнопки. |
| Атрибут | тип |
| Тип | "сброс" " |
| По умолчанию | «кнопка» |
Для этого компонента нет доступных событий.
Для этого компонента нет общедоступных методов.
| Имя | Описание |
|---|---|
значок | Значок кнопки «Назад» (используется ионный значок). |
native | Собственный HTML-кнопочный элемент, обертывающий все дочерние элементы. |
текст | Текст кнопки «Назад». |
| Name | Description | |
|---|---|---|
--background | Background of the button | |
--background-focused | Background of the button when focused with the клавиша табуляции | |
--background-focused-opacity | Непрозрачность фона кнопки при фокусировке клавишей табуляции | |
--background-hover | Background of the button on hover | |
--background-hover-opacity | Opacity of the background on hover | |
--border-radius | Радиус границы кнопки | |
--color | Цвет текста кнопки | |
--color-focused Цвет кнопки при фокусе0247 | ||
-цветовой гонщик | . Font-Weight | . если направление слева направо, и левое поле, если направление справа налево от значка кнопки |
--icon-margin-start | Левое поле, если направление слева направо, и правое поле, если направление справа налево от значка кнопки | |
--icon- margin-top | Top margin of the button icon | |
--icon-padding-bottom | Bottom padding of the button icon | |
--icon-padding-end | Right padding если направление слева направо, и отступ слева, если направление справа налево от значка кнопки | |
--icon-padding-start | Отступ слева, если направление слева направо, и отступ справа, если направление справа налево от значка кнопки | |
--icon- Подкладка Top | Верхняя прокладка на кнопке значок кнопки | |
-Margin-Bottom | Нижний запас кнопки | |
-mar-mar-mar-mar-mar-mar-mar. |
