Как кнопка «Назад» способна уничтожить юзабилити сайта?
Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.
Последствия этого могут быть ужасны: во время экспериментов неадекватная реакция сайта на нажатие кнопки «назад» была причиной ухода многих пользователей, причем с бранью и нелестными отзывами. В большинстве случаев даже почтенные, седовласые испытуемые страшно выходили из себя.
Из этой статьи вы узнаете:
- что ожидают пользователи от кнопки «вернуться назад»;
- каковы 5 самых распространенных ошибок;
- простое решение этих проблем.
Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?
Ожидания пользователей
Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.
Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.
Большая часть посетителей не разбирается в технических моментах, а полагается только на интуитивные представления о том, как должен работать ресурс. Поэтому при нажатии кнопки «назад» они ожидают страницу, на которой уже получили важный опыт, а получают страницу со слегка измененным интерфейсом.
Ниже приведены наиболее популярные интерактивные элементы и рекомендации по их использованию для максимального улучшения пользовательского опыта и юзабилити.
1. Наложения и лайтбоксы
Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.
2. Фильтры и сортировка
Использование фильтров часто преображает страницу и дает человеку новый опыт. Поэтому страница после сортировки воспринимается как новая, даже если на ней ничего не подгружалось. Это происходит потому, что после каждого взаимодействия посетителя со страницей интернет-магазина получается новая выдача результатов.
Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.
3. Форма регистрации/оплаты
Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».
Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.
4. Использование AJAX
Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.
В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».
Пользователи не готовы отказаться от кнопки «назад»
Учитывая, как широко применяется эта функция интернет-браузера, вопрос несоответствия ожиданий пользователя с видением разработчиков становится критическим — не стоит воспринимать его легкомысленно.
Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.
Пользователи ПК тоже часто нажимают кнопку — но не так, как владельцы мобильных, ибо пользователям настольных компьютеров доступна удобная навигация по сайту.
Решение
Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».
Это означает, что при активации какого-либо интерактивного элемента сайт может вносить изменения в историю браузера пользователя. Конечно, функция применима не только к элементам, о которых мы говорили сегодня, но и ко всем прочим. Используя этот прием, вы можете быть уверены, что сайт оправдает ожидания пользователей.
Будьте разумны
Постарайтесь не переусердствовать с использованием history.pushState(). Эта сила должна быть применена разумно. Не стоит задавать отдельный URL для каждого слайда из фотогалереи и прочих мелких деталей. Иначе пользователь не почувствует разницу: по-прежнему, при нажатии «назад» ему потребуется пройти сквозь десятки незначительных изменений.
Любое значительное визуальное и контекстуальное изменение, воспринимающееся как отдельная страница, должно быть под своим URL.
Высоких вам конверсий!
По материалам baymard.com, image source M D
22-05-2014
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type=»button | reset | submit»). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.
Синтаксис
<form>
<button>...</button>
</form>Атрибуты
- accesskey
- Доступ к элементам формы с помощью горячих клавиш.
- autofocus
- Устанавливает, что кнопка получает фокус после загрузки страницы.
- disabled
- Блокирует доступ и изменение элемента.
- form
- Связывает между собой форму и кнопку.
- formaction
- Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
- formenctype
- Способ кодирования данных формы.
- formmethod
- Указывает метод пересылки данных формы.
- formnovalidate
- Отменяет проверку формы на корректность.
- formtarget
- Открывает результат отправки формы в новом окне или фрейме.
- name
- Определяет уникальное имя кнопки.
- type
- Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
- value
- Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег BUTTON</title> </head> <body> <p><button>Кнопка с текстом</button> <button><img src="images/umbrella.gif" alt="Зонтик" > Кнопка с рисунком</button></p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид кнопок в браузере Safari
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает атрибут value.
— HTML | MDN
Элемент <input> с типом button отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события click (en-US)).
Примечание: Хотя элементы <input> с типом button
<button> теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента <button> вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.| Значение | DOMString используется в качестве метки кнопки |
| Событие | click (en-US) |
| Поддерживаемые общие атрибуты | type и value |
| Атрибуты IDL | value |
| Методы | None |
Атрибут значения элементов <input type="button"> elements’ value содержит строку DOMString , которая используется в качестве метки кнопки.
<input type="button" value="Нажми на меня">Если вы не укажете value, вы получите пустую кнопку:
Элементы <input type="button"> не имеют поведения по умолчанию (их двоюродные братья, <input type="submit"> и <input type="reset"> используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.
Простая кнопка
Мы начнём с создания простой кнопки с обработчиком события click (en-US) , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):
<form>
<input type="button" value="Запустить ПК">
</form>
<p>ПК выключен.</p>const button = document.querySelector('input');
const paragraph = document.querySelector('p');
button.addEventListener('click', updateButton);
function updateButton() {
if (button.value === 'Запустить ПК') {
button.value = 'Выключить ПК';
paragraph.textContent = 'ПК запущен!';
} else {
button.value = 'Запустить ПК';
paragraph.textContent = 'ПК выключен.';
}
}Сценарий получает ссылку на объект HTMLInputElement, представляющий <input> в DOM, сохраняя этот параметр в переменной button. Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US).
Добавление сочетаний клавиш на кнопки
Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.
In this example, s is specified as the access key (you’ll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).
<form>
<input type="button" value="Start machine" accesskey="s">
</form>
<p>The machine is stopped.</p>
Note: The problem with the above example of course is that the user will not know what the access key is! In a real site, you’d have to provide this information in a way that doesn’t intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).
Disabling and enabling a button
To disable a button, simply specify the disabled global attribute on it, like so:
<input type="button" value="Disable me" disabled>You can enable and disable buttons at run time by simply setting disabled to true or false. In this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true. A setTimeout() function is then used to reset the button back to its enabled state after two seconds.
If the disabled attribute isn’t specified, the button inherits its disabled state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <fieldset> element, and then setting disabled on the container.
The example below shows this in action. This is very similar to the previous example, except that the disabled attribute is set on the <fieldset> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.
Buttons don’t participate in constraint validation; they have no real value to be constrained.
The below example shows a very simple drawing app created using a <canvas> element and some simple CSS and JavaScript (we’ll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.
<div>
<input type="color" aria-label="select pen color">
<input type="range" min="2" max="50" value="30" aria-label="select pen size"><span>30</span>
<input type="button" value="Clear canvas">
</div>
<canvas>
<p>Add suitable fallback here.</p>
</canvas>var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector('.output');
var clearBtn = document.querySelector('input[type="button"]');
function degToRad(degrees) {
return degrees * Math.PI / 180;
};
sizePicker.oninput = function() {
output.textContent = sizePicker.value;
}
var curX;
var curY;
var pressed = false;
document.onmousemove = function(e) {
curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
canvas.onmousedown = function() {
pressed = true;
};
canvas.onmouseup = function() {
pressed = false;
}
clearBtn.onclick = function() {
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
}
function draw() {
if(pressed) {
ctx.fillStyle = colorPicker.value;
ctx.beginPath();
ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
ctx.fill();
}
requestAnimationFrame(draw);
}
draw();BCD tables only load in the browser
HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Кнопки для сайта HTML создаются одним из двух способов:
1. С помощью тега input. Синтаксис такой команды выглядит следующим образом:
<input type="button" value=надпись на кнопке>
2. С помощью тега button:
<button>Надпись на кнопке</button> Пример кода, который выполняет создание кнопки в <b>html</b> сразу двумя этими способами: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input type="button" value=" Кнопочка1 "></p> <p><button>Кнопочка2</button></p> </form> </body> </html>
В результате получаются две одинаковые кнопки:
Таким образом, хотя получились две абсолютно одинаковые кнопки html, код для них немного разный. Не имеет значения, как создать кнопку в html.
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button.
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html) может быть создана с помощью ссылок «якорей». Обычный «якорь» имеет следующий вид:
Такой «якорь» невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к «якорю», используется следующая команда:
<a href="#имя якоря">название кнопки</a>
Нажатие на название кнопки, моментально переводит курсор к «якорю».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
<!DOCTYPE html>
<html>
<head>
<title>Якорь</title>
</head>
<body>
<form>
<a name="top"></a>
<p><a href="#end">вниз</a></p>
…
<p><a href="#top">вверх</a></p>
…
<a name="end"></a>
</form>
</body>
</html>Выглядит это следующим образом:
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
<p><input name="login"></p> <p><input type="submit"></p>
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
<input type="reset" value="Название кнопки">
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
<input type="image" src="ссылка на картинку">"
Кнопка с картинкой и текстом:
<button> <img alt="" src="ссылка на картинку" />Нажмите, чтобы посмеяться</button>
Например:
Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Удачи!
| Метки: |
Кнопка «назад» в Android: точки над i
Каждый раз, когда речь заходит об Android интерфейсе, возникает вопрос, как должна работать кнопка «назад». Давайте ещё раз разберёмся.
Жесть от Google
Зачем я поднял заезженную тему? В приложении контактов Android 5 наткнулся на неочевидный момент. На экране создания контакта нет кнопки сохранения. Контакт сохраняет кнопка ← в App Bar. Я ожидаю, что по нажатию на эту кнопку данные потеряются. Google, никогда так не делай.
Платформенная «назад»
Здесь всё понятно, кнопка ведёт на один экран назад.
«Назад» вверху экрана
Гайды Material не описывают, как должна работать ← в App Bar. Есть старые рекомендации из Android 4. Здесь есть два варианта поведения: «back» и «up». В простом варианте «back» кнопка ведет на один экран назад.
Более сложный вариант — «up». Если в приложении глубокая вложенность экранов, кнопка «назад» может вести не на один экран назад, а на корневой экран логического уровня. Например, есть экран A — список книг. Мы переходим на экран B книги, далее на экран C другой книги и т.д. Кнопка «назад» должна вернуть пользователя на список книг, пропустив последовательность просмотренных книг.
Так Google подразумевал использование этой кнопке в Android 4. Однако, нет чёткого описания, что должно быть логическим уровнем в иерархии экранов. Все разработчики делают по-разному, кто-то использует «up», кто-то «back». А пользователь ожидает, что эта кнопка ведёт на один экран назад, как в iOS.
Проблема навигации Android
Как строить навигацию? Гамбургер — зло. Значит, надо использовать табы. Табы Android отличаются от iOS не только тем, что они вверху и могут переключаться свайпом. Отличие в том, что их нельзя использовать на вложенных экранах, в отличии от Tab Bar в iOS, который может быть на каждом экране приложения. Значит, в Android нельзя одним нажатием перейти в другой корневой раздел приложения. Вернуться на главный экран и выбрать другой раздел в одно-два нажатия помогает «up».
И что делать?
В простых случаях ← должна вести на один экран назад, как в iOS.
Если в приложении большая вложенность экранов, можно выделить несколько логических уровней, например, главный экран + важные вложенные списки. Кнопка ← будет вести к предыдущему уровню, пробрасывая промежуточные экраны.
Оригинал статьи в блоге Владимира: http://vmakeev.com/android-back-button/.
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].| Полгода назад она скончалась от порока сердца в возрасте 22 лет. | Half a year ago, she passed away from heart disease at the age of 22. |
| Много лет назад я был профессиональным мультипликатором. | A long time ago, I was a professional animator. |
| И мы просто сидели посреди этого, казалось, бесконечного пейзажа, созданного водой миллионы лет назад, и говорили. | And we would just sit in this seemingly eternal landscape sculpted by water over millions of years and talk. |
| Несколько лет назад мне поставили диагноз — генерализованное тревожное расстройство и депрессия, два состояния, часто сопровождающие друг друга. | You see, a few years ago, I was diagnosed with generalized anxiety and depression — two conditions that often go hand in hand. |
| Немногим больше ста лет назад, в 1915 году, Эйнштейн опубликовал общую теорию относительности. | A little over 100 years ago, in 1915, Einstein published his theory of general relativity. |
| Около пятидесяти лет назад в Калтехе и МТИ работали физики-мечтатели — Кип Торн, Рон Древер, Рай Вайс, которые предположили, что могут рассчитать точное расстояние, используя лазеры, измеряющие расстояния между зеркалами, расположенными в километрах друг от друга. | Fifty years ago, some visionary physicists at Caltech and MIT — Kip Thorne, Ron Drever, Rai Weiss — thought they could precisely measure distances using lasers that measured distances between mirrors kilometers apart. |
| И спустя 20 лет, точнее, почти 30 лет назад, больше 20, началась разработка двух детекторов гравитационных волн — двух интерферометров в Соединённых Штатах, каждый длиной в четыре км. | And 20 years later, almost 30 years ago, they started to build two gravitational wave detectors, two interferometers, in the United States. |
| Однако пару лет назад всё изменилось, когда я натолкнулась на маленький секрет британских учёных. | However, something changed me a few years ago, when I came across a little secret that we have in Britain. |
| Знаете, 12 000 лет назад всех вполне устраивала жизнь, при которой они кочевали, охотились и занимались собирательством. | You know, 12,000 years ago everybody was perfectly happy roaming the land, hunting and gathering. |
| Шесть лет назад мы с женой собрали вещи, продали нашу квартирку в Испании и купили на эти деньги дом с садом, в который каждое утро прилетают птички и поют нам. | Six years ago, my wife and I, we packed our stuff, we sold our little apartment in Spain, and for the same money we bought a house with a garden and little birds that come singing in the morning. |
| Два года назад я и моя команда выпустили игру «Cities: Skylines». | Two years ago, my team and I, we released a game, Cities: Skylines. |
| Несколько месяцев назад я осматривал завод-изготовитель международной авиакосмической компании в штате Керетаро, Мексика. | A few months ago, I was touring the manufacturing plant of a multinational aerospace company in Querétaro, Mexico. |
| Оглядываясь назад, теперь я понимаю, что суфийский приход имел настоящую культуру смысла жизни. | Looking back, I now realize that the Sufi house had a real culture of meaning. |
| Около 53 лет назад Мартин Лютер Кинг выступил с речью «У меня есть мечта» в Национальной аллее Вашингтона. | About 53 years ago, Dr.Martin Luther King Jr.gave his I have a dream speech on the Mall in Washington. |
| Этот сценарий был вдохновлён «Проблемой вагонетки» — она была придумана философами несколько десятилетий назад с целью поразмышлять об этике. | This scenario is inspired by the trolley problem, which was invented by philosophers a few decades ago to think about ethics. |
| Это я две недели назад в центре Св. | This is me just two weeks ago, at St. |
| Около 100 лет назад люди додумались, как записывать звук на восковой цилиндр. | About 100 years ago, humans figured out how to record sound onto a wax cylinder. |
| 10 лет назад пришла эра интернета. | 10 years ago, the internet matures. |
| Четыре года назад я основал компанию Patreon вместе со своим другом. | Four years ago I started a company called Patreon with a friend of mine. |
| Но несколько месяцев назад издание сократило все спортивные репортажи. | A few months ago when the magazine cut out all sports coverage. |
| Несколько лет назад они запустили Fan Funding, а недавно — Super Chat как способ монетизации онлайн трансляций. | A couple years ago, they launched Fan Funding; more recently, they launched Super Chat as a way for creators to monetize live streaming. |
| Вы проводите 19 долгих часов за рулём назад домой. | You drive 19 long hours back home. |
| Около трёх лет назад мне позвонил адвокат Бруклинского округа. | So about three years ago, I got a call from the Brooklyn District Attorney. |
| Я разговаривал с мистером Маккаллумом около двух недель назад. | I spoke to Mr. McCallum about two weeks ago. |
| Три года назад я отправился в Центральноафриканскую Республику для репортажа об идущей там войне. | Drie jaar geleden ben ik naar de Centraal-Afrikaanse Republiek gereisd om verslag te doen van de oorlog. |
| Ещё несколько лет назад ни один учёный не сказал бы вам, какие букашки и микробы живут в вашем доме — в месте, которое вы знаете как свои пять пальцев. | As of a few years ago, no scientist could tell you what bugs or microorganisms live in your home — your home, the place you know better than anywhere else. |
| Я считаю своим призванием передавать совет, который получил несколько лет назад. | I see it as my job to pay forward the advice that I received all those years ago. |
| Десять лет назад исследователи компьютерного зрения думали, что научить компьютер различать изображения кошки и собаки будет практически невозможно, даже несмотря на значительный прогресс в развитии искусственного интеллекта. | Ten years ago, computer vision researchers thought that getting a computer to tell the difference between a cat and a dog would be almost impossible, even with the significant advance in the state of artificial intelligence. |
| Итак, 24 года назад меня пригласили в The New Yorker в качестве художественного редактора, чтобы привнести свежую кровь в то, что к тому моменту стало в каком-то смысле уже степенным изданием, и пригласить новых художников, и попытаться спустить журнал с его башни из слоновой кости, чтобы он стал идти в ногу со временем. | So 24 years ago, I was brought to The New Yorker as art editor to rejuvenate what had by then become a somewhat staid institution and to bring in new artists and to try to bring the magazine from its ivory tower into engaging with its time. |
| Позвольте мне вернуться на секунду назад. | Let me step back a second. |
| Я также мог сдвинуть объектив немного вправо, и вы бы отодвинулись назад, а люди сзади вышли бы вперёд. | I could move the lens a little to the right, and you would go back and the folks in the background would come out. |
| Я взглянула на компас, чтобы найти путь назад, а он высматривал акул, и после 20 минут плавания, которые показались нам часом, мы, наконец, спустились на риф, и я была потрясена и одновременно так счастлива, что слёзы навернулись на глаза. | I watched my compass so we could find our way back out, and he watched for sharks, and after 20 minutes of swimming that felt like an hour, we finally dropped down to the reef, and I was so shocked, and I was so happy that my eyes filled with tears. |
| Лучшее время для защиты рифов было 50 лет назад, но и сейчас снова такое время. | The best time to protect a reef was 50 years ago, but the second-best time is right now. |
| И представьте, что была бы другая кнопка с вопросом: «Как бы вы хотели провести время?» | And imagine instead that there was another button there saying, what would be most time well spent for you? |
| Примерно 10 лет назад я работал в университете Джонса Хопкинса в группе, занимавшейся картированием мутаций при раке. | Around 10 years ago, I was part of the team at Johns Hopkins that first mapped the mutations of cancers. |
| И вот около 50 лет назад датчане придумали ему новое название, и с тех пор десятки тысяч датчан живут в таком взаимодействии. | And about 50 years ago, the Danes decided to make up a new name, and since then, tens of thousands of Danish people have been living in this connected way. |
| Когда я несколько минут назад сказала, что кохаузинг является противоядием от одиночества, мне следовало добавить, что кохаузинг может спасти и вашу жизнь. | So when I said earlier that cohousing is an antidote to isolation, what I should have said is that cohousing can save your life. |
| Несколько лет назад я с родителями ходила на шоу с канканом — танцем, где высоко поднимают ноги. | A few years ago, my parents and I went to see the Rockettes, Radio City’s high-kicking dancers. |
| Теперь, для того, чтобы рассказать вам всё целиком, я хочу вернуться назад, к поворотному событию в истории США, и это был тот момент, когда фракционные разногласия и приверженность партиям появились на свет. | Now, in order to tell you the story, I want to go back to a pivotal moment in US history, and that is the moment when factional disagreement and partisanship was born. |
| При этом не забывайте, что айфоны тогда только появились, это был 2009 год, около восьми лет назад. | You have to keep in mind, iPhones had just come out, it was 2009, so this was, like, eight years ago. |
| Чуть больше года назад третий раз в жизни я перестал существовать. | Just over a year ago, for the third time in my life, I ceased to exist. |
| Они возвращают назад около 20% всего, что даёт нам солнце. | They turn back about 20 percent of everything the sun sends us. |
| Несколько лет назад до меня дошёл один забавный слух. | So, a few years ago I heard an interesting rumor. |
| Сейчас я демонстрирую среднестатистический 24-часовой будний день на трёх разных временных отрезках: 2007-й год — 10 лет назад — 2015-й год и последняя информация — на прошлой неделе. | What I’m showing you here is the average 24-hour workday at three different points in history: 2007 — 10 years ago — 2015 and then data that I collected, actually, only last week. |
| Мы занимаемся хобби, строим близкие взаимоотношения, развиваем творческое начало, задумываемся о жизни, оглядываемся назад и пытаемся осознать, а была ли наша жизнь осмысленной. | That’s where hobbies happen, where we have close relationships, where we really think about our lives, where we get creative, where we zoom back and try to work out whether our lives have been meaningful. |
| Ещё 15–20 лет назад это было невозможно. | I couldn’t have done that 15 or 20 years ago in quite the same way. |
| Например, это участок, выделенный красным, показывает нам, где Миссиссипи располагалась и куда несла свои воды 4 600 лет назад. | So for example, this red area here is where we know the Mississippi River flowed and deposited material about 4,600 years ago. |
| Около 3 500 лет назад её русло сдвинулось, это отмечено оранжевым цветом. | Then about 3,500 years ago it moved to follow the course outlined here in orange. |
| Так было 2 000 лет назад и тысячу лет назад, 700 лет назад. | So here’s about 2,000 years ago, a thousand years ago, 700 years ago. |
| И только 500 лет назад русло приобрело современные и привычные нам очертания. | And it was only as recently as 500 years ago that it occupied the pathway that we’re familiar with today. |
| Около 55 миллионов лет назад произошло очень резкое потепление, что привело к большому выходу углекислого газа в атмосферу, что, в свою очередь, вызвало резкое и сильное глобальное потепление. | About 55 million years ago, there was a really abrupt warming event, and what happened was a whole bunch of carbon dioxide was released into earth’s atmosphere, and it caused a rapid and pretty extreme global warming event. |
| Вот это жёлтое пятно — фактически это ископаемая река, как в том ролике, который я показывала, эти отложения появились здесь 55 миллионов лет назад. | This yellow blob here, this is actually a fossil river, so just like this cartoon I showed, these are deposits that were laid down 55 million years ago. |
| Вы смогли бы перейти вброд этот небольшой поток, если бы вышли на прогулку 55 миллионов лет назад. | You could wade across this cute little stream if you were walking around 55 million years ago. |
| Все изменилось, когда три года назад я встретила детей-беженцев, играющих в футбол. | My journey took a strange turn three years later, after I met a group of refugee kids playing soccer outside. |
| Стена плача воздвигнута, провокационная политическая риторика, попраны все основополагающие принципы и ценности в тех самых странах, которые 70 лет назад сказали нет безгражданству и отчаянию жертв военного насилия. | The sound is of walls being built, vengeful political rhetoric, humanitarian values and principles on fire in the very countries that 70 years ago said never again to statelessness and hopelessness for the victims of war. |
| Два года назад я побывал на Лесбосе — красивом греческом острове с населением в 90 000 жителей. | I went to Lesbos, this beautiful Greek island, two years ago, It’s a home to 90,000 people. |
| Довольно смелые предложения, как и ваш призыв к личной ответственности, но меня смущает одна мысль: вы упомянули, цитирую: «исключительное западное руководство», которое 60 с лишнем лет назад привело к дискуссии о правах человека, конвенциях о статусе беженцев и т.д. | Those are strong suggestions and your call for individual responsibility is very strong as well, but I’m troubled by one thought, and it’s this: you mentioned, and these are your words, extraordinary Western leadership which led 60-something years ago to the whole discussion about human rights, to the conventions on refugees, etc. |
| А вот это всего лишь пару недель назад. | This is only a few weeks ago. |
| Если немного вернуться назад, это ещё и очень личное путешествие для меня. | But this is also, if I take a big step back from this, this is also a very personal journey for me. |
| Пару недель назад я отправил ему сообщение и спросил, читал ли он когда-либо философов-стоиков. | I sent him a text a few weeks ago, asking him: Had he ever read any Stoic philosophy? |
| Другие результаты | |
Как заставить браузер вернуться на предыдущую страницу с помощью JavaScript?
Существует два популярных способа заставить браузеры вернуться на предыдущую страницу, щелкнув событие JavaScript, оба метода описаны ниже:
Метод 1: Использование метода history.go (): Метод go () объект window.history используется для загрузки страницы из истории сеанса. Его можно использовать для перемещения вперед или назад, используя значение параметра дельта. Положительный параметр дельты означает, что страница будет двигаться вперед по истории.Точно так же отрицательное значение дельты заставит страницу вернуться на предыдущую страницу.
Этот метод можно использовать с «-1» в качестве значения дельты для возврата на одну страницу в истории. Событие onclick можно указать с помощью метода для возврата на одну страницу в истории.
Синтаксис:
window.history.go (-1)
Примечание: Если мы хотим вернуться более чем на один шаг, увеличьте значение дельты с -1 до желаемого значения. .
Пример:
Страница 1
|
000 Стр.
< html >
< руководитель >
< заголовок >
с помощью JavaScript?
название >
головка >
< корпус >
<
< h2 стиль = "цвет: зеленый" >
GeeksforGeeks
h2 >
b >
Onclick javascript, чтобы браузер
вернулся на предыдущую страницу?
b >
< h3 > Страница 2 h3 >
< p >
Нажмите кнопку, чтобы вернуться
на предыдущую страницу.
p >
< кнопка onclick = "history.go (-1)" >
Нажмите здесь, чтобы вернуться
кнопка >
корпус >
html >
Выход:
- Перед переходом по ссылке:
- После нажатия на ссылку:
- После нажатия кнопки:
Событие onclick может быть указано с помощью этого метода для возврата на одну страницу в истории.
Синтаксис:
window.history.back ()
Пример:
Page 1
|
000 Стр.
< html >
< глава >
< заголовок >
вернулся на предыдущую страницу?
название >
головка >
< корпус >
<
< h2 стиль = "цвет: зеленый" >
GeeksforGeeks
h2 >
b >
Onclick JavaScript, чтобы заставить браузер
вернуться на предыдущую страницу?
b >
< h3 > Страница 2 h3 >
< p >
Нажмите кнопку, чтобы вернуться на предыдущую страницу
.
p >
< кнопка onclick = "history.back ()" >
Нажмите здесь, чтобы вернуться
кнопка >
корпус >
html >
Выход:
- Перед переходом по ссылке:
- После перехода по ссылке:
- После нажатия кнопки:
Сохранение навигации Ваша страница с самодельными кнопками "Назад" и "Вперед"
Привет, HTML-кодеры.Надеюсь, у вас была хорошая неделя. В этом выпуске информационного бюллетеня HTML
мы собираемся взглянуть на невероятно простой способ
предоставить вашей аудитории кнопки навигации вперед и назад
прямо на вашей веб-странице. Это избавляет пользователей
от необходимости нажимать кнопки «Назад» и «Вперед» в своих браузерах, что может показаться не таким уж большим делом. Мы собираемся поговорить о том, почему обслуживание
этих ссылок самостоятельно может сделать их жизнь немного проще, а вы -
- выглядеть лучше.
Большинству веб-пользователей удобно пользоваться кнопками «Назад» и «Вперед»
в своих браузерах. Если вы вообще занимались веб-серфингом, вы, вероятно, тоже им пользуетесь
, особенно кнопка «Назад». В конце концов, кнопка
Назад - наш друг, не так ли? Кнопка «Назад» может очень быстро вывести нас из
ужасных веб-сайтов. Например, предположим, что мы работаем
и проводим некоторые исследования президента США (примечание: первая ссылка
, которая приведет вас на сайт с контентом, a.однозначно взрослый
в натуре и, р. не имеет никакого отношения к президенту или известному нам Белому дому
), и мы случайно набираем
http://www.whitehouse.com вместо http://www.whitehouse.gov.
Уупс! Большая ошибка, правда? Что, если наш босс пройдет мимо? Самый быстрый способ
убрать версию .com с нашей страницы - это нажать кнопку «Назад» в нашем браузере
. Через несколько секунд мы вернемся на безопасную территорию - на каком бы сайте мы ни находились ранее.И мы можем повторно ввести этот URL, на этот раз правильно.
Это, несомненно, отличное применение для кнопки «Назад».
Однако это не единственное использование кнопки «Назад». В наши дни довольно
несколько плохо спроектированных сайтов полагаются на посетителей, которые используют кнопки «Назад» и «Вперед»
для навигации по своим страницам. Как они это делают? Легко. По
не обеспечивает полезной и хорошо продуманной навигации. Если
пользователь не может найти способ вернуться туда, где он только что был,
кнопка «Назад» в конечном итоге используется в качестве основного инструмента навигации на сайте
.Это вообще плохая идея. Почему? Потому что как дизайнер
заставляет вас плохо выглядеть. Конечно, есть еще несколько вариантов.
Опция хлебных крошек
Использование хлебных крошек в таких случаях является хорошей идеей. Что такое панировочные сухари
? Панировочные сухари - это списки посещенных страниц на сайте в порядке
от домашней страницы до последней страницы, на которой был пользователь. Они
ведут хронологию путешествия пользователя по сайту, и они предоставляют легкий способ
для пользователя получить доступ к более ранним страницам, которые он может захотеть посетить снова.Хороший пример сайта с панировочными сухарями
: http://www.tpl.org/ - веб-сайт фонда
Trust for Public Land.
Однако хлебные крошки - не самая простая вещь для реализации на всем сайте
в мгновение ока, особенно если у вас уже есть свой сайт, созданный для большей части
. В этом случае лучше всего добавить на свои веб-страницы собственные кнопки «вперед» и «
». Это относительно просто, надежно, быстро,
, и есть несколько способов сделать это, в зависимости от ваших вкусов.
Наш метод использует объект истории в JavaScript. Но не откладывайте
на JavaScript. Наверное, добавить намного проще, чем вы думаете
!
Назад и вперед тоже
Во-первых, давайте добавим на страницу гиперссылки "Назад" и "Вперед". Код выглядит так:
:
Назад
Вперед
По сути, мы используем JavaScript, чтобы указать браузеру вернуться на одну страницу
в истории страниц для первой ссылки и перейти на одну страницу вперед
в истории страниц по второй ссылке.Если для перехода к
нет страницы «будущего», ссылка «Вперед» никуда не приведет пользователя. Добавляя эти две строки кода
на каждую из ваших страниц, вы даете возможность своему зрителю
перемещаться по страницам, не покидая страницы, чтобы попасть туда, куда они
хотят перейти.
Если вы хотите получить немного больше графики, вы можете использовать кнопки формы
вместо ссылок, чтобы направлять посетителей назад или вперед. Код
выглядит так:
В основном мы делаем здесь то же самое, что и в последнем блоке кода
- используя элемент истории JavaScript.На этот раз мы заключаем код
в форму, которая позволит нам использовать кнопки формы для графики. Попробуйте код
и посмотрите, что вы думаете. Я думаю, это выглядит очень красиво.
Итак, зачем беспокоиться об этих самодельных кнопках «Назад» и «Вперед» на первом месте
? Наиболее важные причины: а) он поддерживает навигацию вашего сайта
там, где она должна быть - на вашем сайте, и б) предоставляет очень популярный инструмент навигации
для ваших пользователей. Все дело в дизайне - почему
полагается на чужой инструмент, чтобы привлечь внимание зрителей? В конце концов, вы же дизайнер Web
.Вы достаточно хороши, чтобы делать эти вещи самостоятельно!
Это все, что у нас есть на эту неделю, народ. До следующей недели, будьте осторожны и
желаю отличного!
Этот рассказ «Сохранение навигации на странице с помощью самодельных кнопок назад и вперед» был первоначально опубликован ITworld.
Copyright © 2002 IDG Communications, Inc.
html - (Доступность) - Размещение кнопки «Назад» на странице в SPA
Думаю, вы имели в виду SC 2.4.3 как SC 2.4.7 - есть ли индикатор видимого фокуса (во избежание путаницы).
Будет ли это сбой SC 2.4.3?
Это не будет нарушением SC 2.4.3, поскольку порядок по-прежнему логичен с точки зрения потока страниц (если вы вернулись к навигации и перешли на страницу, я предполагаю, что это будет первый элемент, на котором будет сосредоточен фокус).
Этот критерий состоит в том, чтобы убедиться, что вы не Tab от кнопки возврата до нижнего колонтитула (как крайний пример), вызывая путаницу у пользователей клавиатуры.
Обеспечение хорошего пользовательского опыта для пользователей программ чтения с экрана
"А действительно ли нужна кнопка возврата?" Это первый вопрос, который вам нужно задать себе.
, т.е. если я вернусь в браузер, я предполагаю, что он выполняет точно такое же действие, как и возврат с помощью вашей кнопки?
Если ответ утвердительный. , то вам ничего не нужно делать. Кнопка - приятное дополнение, но не существенное и в любом случае менее вероятно, будет использоваться пользователями программ чтения с экрана. Он будет обнаружен в какой-то момент во время навигации.
Пользователи, не использующие программы чтения с экрана, которые используют клавиатуру, увидят кнопку «Назад» и поймут, что они могут Сдвинуть + Tab на кнопку, если захотят.
Если ответ отрицательный, , кнопка "Назад" в браузере работает иначе, чем кнопка "Назад", тогда нам нужно сделать ее более доступной. (На самом деле я бы сказал, что вам нужно исправить все, что мешает вашей навигации, так как они оба должны совпадать!)
Это может вас удивить, но совет: сделайте кнопку «Назад» доступной для фокусировки сразу после заголовка. Это упрощает обнаружение / доступ для пользователей программ чтения с экрана.
Вы видите, что это все еще соответствует логической части логического порядка фокуса, логично, что первым действием на странице после прочтения заголовка будет кнопка «Назад».
Поскольку элементы тесно связаны визуально (и при условии, что у вас есть хороший индикатор фокусировки и нет кольца фокусировки на заголовке при загрузке страницы), существует очень низкая вероятность того, что кто-то, использующий индикатор визуальной фокусировки, будет дезориентирован. страницу при нажатии Tab .
Однако убедитесь, что порядок DOM отражает порядок фокуса.
Заголовок тестовой страницы
и используйте CSS для визуального изменения порядка .
Заключительный момент здесь - ваша визуальная иерархия не менее важна, расположение кнопки «Назад» логично, поэтому не меняйте визуальный дизайн, чтобы попытаться исправить это, вы, вероятно, в конечном итоге получите менее оптимальное решение.
Сводка
- Это не нарушит логический порядок фокусировки, даже если вы ничего не сделаете.
- Если кнопка "Назад" в браузере делает то же самое, вы можете оставить все как есть.
- Если кнопка "Назад" в браузере работает не так, как кнопка "Назад" в приложении, сначала попробуйте исправить это.
- Если по какой-то причине кнопка возврата нуждается в для другого действия, тогда кнопка возврата должна быть фокусируемой после заголовка, даже если она визуально появляется раньше.
- Убедитесь, что у заголовка нет индикатора визуального фокуса, но у вашей кнопки есть
- Поменяйте местами порядок DOM и измените визуальный порядок с помощью CSS.
Прежде всего осознайте, что это Правила WCA - они призваны помочь вам принять наилучшие решения о доступности, которые вы можете, но ваше время лучше потратить на размышления о том, как люди взаимодействуют с вашей страницей, и тестирование с различными методами ввода и вспомогательные технологии, чем попытки следовать чему-то в буквальном смысле (поскольку в большинстве случаев руководство в любом случае не совсем ясное!).
Как вставить кнопку «Назад» в HTML и WordPress - TechZog.com
Этот быстрый совет показывает, как вставить кнопку «Назад» в HTML и WordPress, которая позволяет пользователю перейти на предыдущую страницу. Это особенно полезно, если вы разрабатываете инструмент или страницу, которая содержит некоторую пользовательскую информацию, и вы хотите вернуться на страницу с пользовательской информацией, сохраненной в соответствующих полях ввода.
Как вставить кнопку возврата в HTML
Просто вставьте приведенный ниже код в свой HTML-файл.
В разделе HEAD объявите следующую функцию:
В разделе BODY добавьте актуальную кнопку возврата
Как вставить кнопку возврата в WordPress
Просто вставьте следующий код на свою страницу WordPress или опубликуйте текст в текстовом режиме редактора.
Примечание. При добавлении кнопки «Назад» в Word Press убедитесь, что вы нажимаете кнопки «Опубликовать» или «Обновить» непосредственно из режима текстового редактора, поскольку в визуальном режиме атрибут кнопки onclick удаляется.
Сообщите нам, помог ли вам этот совет, используя раздел комментариев ниже.
Вы также можете прочитать о том, как перенаправить страницы 404 в WordPress, как сбросить пароль WordPress из cPanel и как настроить WordPress в другом каталоге.
Политика комментариев : Комментарии, повышающие ценность статьи, приветствуются. В таких комментариях будут разрешены соответствующие ссылки.
Если вы считаете, что у вас есть ссылка, которая увеличивает ценность этой статьи, пожалуйста, свяжитесь с нами по адресу techie [at] techzog [dot] com для оценки возможности включения в статью.
Комментарии, оставленные исключительно для рассылки спама, будут удалены. Спасибо за понимание.
Хорошими вещами нужно делиться.
Связанные- Страстный блогер и главный автор Techzog.com. Не стесняйтесь связаться со мной по адресу techie [at] techzog [dot] com
4 шаблона дизайна, которые нарушают ожидания кнопки «Назад» - 59% сайтов ошибаются - Статьи - Baymard Institute
«Как мне вернуться? Просто нажмите «Назад».Навигация, если честно, это не очень хорошо. И теперь это вернуло меня к женскому. ХОРОШО. Не нравится ".
В ходе всех наших исследований удобства использования мы наблюдали, как пользователи, как новички, так и опытные пользователи, часто полагаются на кнопку браузера «Назад». Действительно, кнопка «Назад» долгое время была основным элементом веб-навигации, и зачастую многолетний опыт пользователей в ее использовании побудил их разработать очень конкретную ментальную модель того, как она должна себя вести.
Часто это имеет серьезных последствий для удобства использования , когда используется множество распространенных шаблонов веб-дизайна, таких как наложения, привязки, динамически вводимые представления, скрытый контент и т. Д.- иметь техническую структуру по умолчанию, превосходит ожидания пользователей относительно того, как должна работать кнопка «Назад». Фактически, наш тест показывает, что 59% сайтов электронной коммерции ошибаются по крайней мере в одном из этих 4 ожиданий пользователей с точки зрения того, как они технически поддерживают использование кнопки «Назад».
Последствия нарушения ожиданий пользователя относительно того, как должна вести себя кнопка «Назад» в браузере, могут быть ужасными. Во время наших юзабилити-тестов это была прямая причина отказа от , когда пользователи покидали тестовые сайты с руганью и ругательствами (даже со стороны более спокойных тестовых пользователей).
В этой статье мы делимся результатами нашего крупномасштабного исследования юзабилити и обсуждаем наши выводы относительно:
- Как пользователи ожидают, что кнопка «Назад» будет работать
- Проблема 1. Оверлеи и лайтбоксы (37% сайтов этого не делают)
- Проблема 2. Фильтрация и сортировка (27% сайтов этого не делают)
- Выпуск 3: Кассы Accordion
- Выпуск 4: Навигация от страницы продукта к списку продуктов
- 5 других представлений, на которые влияет кнопка «Назад»
- Простое решение всего этого
Решение простое, но на удивление часто игнорируется на этапе внедрения - даже на самых крупных веб-сайтах, как вы увидите ниже, и особенно на мобильных сайтах.
Как пользователи ожидают, что кнопка «Назад» будет работать
Вкратце: пользователи ожидают, что кнопка «Назад» вернет их на страницу, которую они воспринимали как свою предыдущую страницу. Ключевым фактором здесь является понятие восприятия, поскольку часто существует разница между тем, что является технически новой страницей, и тем, что пользователи воспринимают как новую страницу , что может создавать несоответствия между тем, где пользователь ожидает перехода от кнопки «Назад». их и куда это их на самом деле ведет.
Как правило, мы заметили, что если новое представление существенно отличается визуально или если новое представление концептуально ощущается как новая страница, оно будет восприниматься как одно - независимо от того, является ли это новой страницей технически или нет. Это имеет последствия для того, как сайт должен обрабатывать общие элементы поиска и исследования продуктов, такие как наложения, фильтрация и сортировка. Например, если пользователи нажимают ссылку и 70% представления меняется на что-то новое, большинство будет воспринимать это как новую страницу, даже если технически это все та же страница, только с загруженным новым представлением.
Ожидания пользователя кнопки «Назад» в Walmart не оправдались. Путь пользователя был «список продуктов> страница продукта> дополнительная страница отзывов», затем она нажала на странице «Назад» . Это вернуло ее с подстраницы обзоров на страницу продукта. Затем она провела пальцем по краю экрана, чтобы вернуться к списку продуктов - только для того, чтобы вернуться на подстраницу обзоров. В замешательстве она снова нажала ссылку «Назад» на странице и вернулась на страницу продукта.Теперь она забыла о своем первоначальном намерении вернуться к списку продуктов и вместо этого начала просматривать перекрестные продажи. Невыполнение ожиданий пользователей кнопки «Назад» может вызвать серьезную дезориентацию и сбить с толку пользователей.
Примерно так же, как пользователи плохо разбираются в технических вопросах безопасности веб-сайтов и, вместо этого, руководствуются своим чутьем (узнать больше), они также мало ценят (часто произвольные и незначительные) различия, когда новое представление технически является новым. веб-страница или просто развернутый элемент на существующей странице.И в этом заключается загвоздка: кнопка браузера «Назад» возвращает пользователя к ранее посещенному URL, который не обязательно совпадает с тем, что пользователь воспринимал как свою ранее посещенную страницу.
Поэтому пользователи часто полагаются на визуальные эффекты элемента, его контекст и предыдущий опыт работы с сайтом при формировании своих ожиданий относительно того, когда что-то является новой веб-страницей, а не слегка измененным элементом на той же странице. Это результат этого подсознательного поспешного суждения, которое определяет, куда пользователь ожидает, что кнопка браузера «Назад» переместит его.
Четыре самых распространенных недостатка кнопки «Назад»
Ниже приведено пошаговое руководство по 4 элементам веб-сайта, которые мы чаще всего наблюдаем , чтобы они были реализованы способами, которые нарушают ожидания пользователей, то есть когда пользователь не отправляется обратно на то, что он считал своей предыдущей страницей при использовании браузера "Кнопка назад.
- Оверлеи и лайтбоксы (37% сайтов этого не делают)
- Фильтрация и сортировка (27% сайтов этого не делают)
- Accordion Checkouts
- Возврат к списку продуктов со страницы продукта
1) Оверлеи и лайтбоксы (37% сайтов этого не делают)
В Nike пользователи могут просматривать высококачественные изображения продуктов в наложенной галерее изображений.Однако нажатие кнопки «Назад» не возвращает пользователей на страницу продукта, а вместо этого отправляет их на предыдущую страницу (в данном случае - список продуктов). Это не соответствует ожиданиям пользователей о том, как должна работать кнопка «Назад».
Наложения и лайтбоксы по своему дизайну предназначены для отображения новой страницы, расположенной поверх предыдущей. Поэтому неудивительно, что пользователи воспринимают их как отдельные страницы и ожидают, что кнопка «Назад» в браузере вернет их на исходную страницу.Увы, во время тестирования подавляющее большинство инициированных пользователем оверлеев на тестируемых сайтах не закрывали , поскольку пользователи нажимали кнопку «Назад» в браузере, а вместо этого отправляли их назад, мимо наложенной страницы.
Это пользовательское ожидание «нажмите« Назад », выйдите из оверлея». наблюдалось во время тестирования как на настольных, так и на мобильных сайтах для всех типов оверлеев. Например, инициируемый сайтом информационный бюллетень - запросы на подписку, оверлеи галереи изображений или предложения в чате. Таким образом, пользователи должны всегда выходить из оверлея, нажимая «Назад», и возвращаться на страницу, на которой находится оверлей (а не на предыдущую страницу).
Стоит отметить, что вероятность использования пользователем кнопки «Назад» для выхода из оверлея зависит от того, насколько заметным является предоставленный сайтом элемент «Закрыть» (например, «X» для выхода из оверлея). Очень заметные элементы «Закрыть», вероятно, будут использоваться пользователями чаще, чем незаметные элементы «Закрыть», и, таким образом, нагрузка на кнопку «Назад» снижается, когда наложения имеют очень заметные элементы «Закрыть». Конечно, пользователи все равно должны выходить из оверлея, нажимая «Назад», даже если он снабжен заметным элементом «Закрыть».
«Я не знаю, как выйти из этой… кнопки« Назад »? Так я вернулся в раздел поиска толстовок [список продуктов] ». Пользователь попытался выйти из оверлея галереи изображений, нажав кнопку «Назад» (первое изображение), но вместо этого он вернулся к списку продуктов (второе изображение). (Предоставленная сайтом ссылка «Назад» была фактически скрыта рекламой «Установить приложение».)
Во время тестирования мобильных устройств мы заметили, что пользователям сложнее закрывать оверлеи с помощью предоставленных сайтом элементов «Закрыть», часто из-за проблем с областью нажатия, при этом «X» часто помещается близко к краю экрана или «Установить приложение» », Закрывающее элемент« Закрыть »(см. Нашу статью о том, как сделать акцент на рекламе типа« Установить приложение »или полностью отказаться от нее).Таким образом, мобильных пользователей с большей вероятностью будут использовать кнопку «Назад» для закрытия оверлеев по сравнению с пользователями настольных компьютеров, и еще более важно, чтобы их ожидание выхода из оверлея поддерживалось при нажатии «Назад».
2) Фильтрация и сортировка (27% сайтов этого не делают)
Пользователь Amazon нажимает «Назад» после применения 3 фильтров (первое изображение). При этом будет удален последний примененный фильтр, и теперь показано, что применены 2 фильтра (второе изображение). Нажав «Назад» после применения фильтров, вы должны начать удаление примененных фильтров.
Фильтрация и сортировка обычно дают совершенно новый список продуктов , и поэтому пользователи воспринимают каждое из этих действий как отдельное представление. Даже когда фильтры или направления сортировки не вызывают перезагрузку страницы, мы все равно обнаружили в ходе нашего крупномасштабного исследования юзабилити Списки продуктов и фильтрации, что пользователи обычно воспринимают каждую дискретную итерацию своей фильтрации как новое представление (скорее всего, потому, что это является действием, инициированным пользователем, и каждая итерация дает новый набор результатов).
Это подчеркивает, что пользователи не делают технических различий между тем, что является новой страницей, а что нет, а полагаются на то, что они воспринимают как новую страницу. Следовательно, фильтрация и сортировка как по категориям, так и по результатам поиска должны поддерживать то, что пользователи пролистывают каждое состояние списка с помощью кнопки браузера «Назад», а направления сортировки также должны быть изменены на ранее заданное направление сортировки.
«Думаю, я вернусь…» Пользователь JBL отсортировал список продуктов наушников по цене от низкой к высокой (первое изображение).Изучив продукт на странице продукта, она решила, что хочет продолжить просмотр, и нажала, чтобы вернуться к списку продуктов (второе изображение). Однако она коснулась дважды: это привело к ее возвращению к списку продуктов, а также к изменению направления сортировки, но направление сортировки было изменено только на задней стороне, так как направление сортировки все еще было «Цена: (От низкой к высокой ) ” (третье изображение). По ее словам, «Фильтр [направление сортировки] удален, хотя он говорит, что все еще работает ... Они не в порядке фильтра [сортировки] ... Те, на которые я смотрел, я не могу их найти. Такие технические ошибки были довольно частыми во время тестирования и вызывали у пользователей сомнения в отношении сортировки списка продуктов.
Однако важно отметить, что во время тестирования было много случаев, когда пользователи нажимали «Назад», и фильтр удалялся или направление сортировки изменялось - но этот не был передан пользователям в интерфейсе . Другими словами, хотя нажатие кнопки «Назад» технически действительно удаляло фильтр или меняло направление сортировки, пользователям казалось, что ничего не изменилось, поскольку (теперь удаленные) фильтры все еще отображались как примененные или показанное направление сортировки не отображалось. t соответствуют фактическому порядку сортировки в списке продуктов.Это, очевидно, приведет к путанице для пользователей, которые будут задаваться вопросом, было ли их нажатие или нажатие на кнопку «Назад» успешным, если их действия не совпадают с тем, что они видят в интерфейсе.
Если фильтрация или сортировка осуществляется в совершенно отдельном интерфейсе - что очень часто встречается на мобильных сайтах - очень важно, чтобы нажатие «Назад» в интерфейсе действовало как ссылка «Выход». (т. Е. Аналогично выходу из оверлея) . То есть, после нажатия кнопки «Назад» в интерфейсе пользователи должны вернуться к тому виду, который они просматривали непосредственно перед открытием интерфейса фильтрации или сортировки.
3) Кассы Accordion
Вопреки тому, что можно было подумать, оформление заказа в виде гармошки не воспринимается как оформление на одну страницу с несколькими свернутыми разделами. Вместо этого подавляющее большинство пользователей воспринимают их как многоэтапный процесс с резюме (подробнее о том, как пользователи воспринимают оформление в виде аккордеона). Это может оказаться проблематичным на сайтах, где шаги аккордеона технически реализованы в виде одной страницы с одним URL-адресом, поскольку пользователи хотят вернуться к предыдущему «шагу» оформления заказа (например.g., для редактирования ранее введенной информации) будут отправлены обратно в корзину.
Вместо этого важно то, что при оформлении заказа «гармошкой» кнопка «Назад» в браузере возвращает пользователей к предыдущему просмотренному этапу - независимо от того, технически это та же страница или отдельная страница.
4) Возврат к списку продуктов со страницы продуктов
«Когда вы нажимаете кнопку« Назад », вы возвращаетесь к началу. А не на том месте, где вы остановились ». Этот пользователь потратил много времени во время тестирования, прокручивая список продуктов Walgreens, уточняя продукты после перехода со страниц продуктов.
Многие пользователи будут просматривать большое количество продуктов, чтобы найти то, что они ищут, и это будет включать в себя некоторые перемотки между списком продуктов и страницами с подробностями о продуктах. Пользователи, которые не вернули туда, где они были ранее в списке продуктов - например, обратно в середину списка продуктов, а не наверх - должны пройти утомительный процесс повторного поиска последнего места, на котором они были. Во время тестирования было замечено, что это особенно сложно для мобильных пользователей из-за более громоздкого процесса прокрутки.
Когда пользователи попадают в верхнюю часть списка продуктов, а не туда, где они были до посещения страницы продукта, они дезориентируются и должны заново определить, где они были в списке продуктов. Это не только утомительно - пользователи должны повторить всю работу, которую они ранее проделали, снова прокручивая список продуктов, - но также может быть сложно вспомнить, где именно они были перед посещением страницы продукта (например, если список продуктов является выбранным синих платьев похожего, но не идентичного фасона или похожих офисных стульев).
«Когда вы нажимаете кнопку« Назад », вы возвращаетесь к началу. А не на том месте, где вы остановились ».
Пользователям, находящимся в верхней части списка продуктов, возможно, придется пролистать множество элементов, прежде чем они найдут нужное место в списке. В зависимости от схемы загрузки продукта на сайте сложность доработки продукта может варьироваться от умеренной до экстремальной.
Независимо от используемой схемы загрузки продукта, если процесс поиска нужного места в списке продуктов слишком трудоемок и проблематичен , пользователи вполне могут сдаться.
Но это еще не все. Приведенные выше четыре примера представляют собой типичные несоответствия, когда пользователи часто ожидают, что произойдет что-то одно, а сайты реализованы таким образом, что происходит что-то еще. Однако этот тип несоосности выходит за рамки этих распространенных примеров. Как правило, вы должны следить за всеми новыми состояниями просмотров , инициированными пользователем, которые либо выглядят, либо концептуально кажутся отдельной страницей.
Когда дело доходит до наложений, фильтрации или сортировки, тестирование показывает, что то, как пользователи ожидают поведения кнопки «Назад», является согласованным, и, следовательно, то, что должно быть показано пользователям после нажатия «Назад», является четким.Однако существуют и другие представления, с которыми пользователи сталкиваются при поиске и изучении продукта, когда то, что следует показывать пользователям после нажатия кнопки «Назад», не так очевидно. Пять из них обсуждаются ниже.
5 других просмотров, на которые влияет кнопка «Назад»
Когда дело доходит до наложений, фильтрации и сортировки, оформления заказа гармошкой и возврата к списку продуктов со страницы продукта, тестирование показывает, что то, как пользователи ожидают, что кнопка «Назад» будет вести себя согласованно, и, следовательно, то, что должно быть показано пользователям после нажатие «Назад» однозначно.Однако существуют и другие представления, с которыми пользователи сталкиваются при поиске и изучении продукта, когда то, что следует показывать пользователям после нажатия кнопки «Назад», не так очевидно. Пять из них обсуждаются ниже.
Примечание: этот список не является исчерпывающим, но более иллюстративным для «серых» областей, где следует уделить особое внимание тому, как кнопка «Назад» должна работать в данном контексте.
- Многоступенчатые процессы на странице
- Расширяющееся содержание
- Анкерные звенья
- Усеченное содержимое
- Варианты на странице товара
1) Многоступенчатые процессы на странице
1) Многоступенчатые процессы на странице. Пользователь во время предыдущего раунда тестирования Sears взаимодействовал с многоэтапным оценщиком доставки на странице продукта (поле «Параметры доставки» ). Он прошел несколько шагов, прежде чем нажать кнопку «Назад» в браузере. Однако он был прокручен только до верхней части страницы, а не был переведен на предыдущий шаг в оценщике доставки, как он ожидал. Затем он щелкнул предоставленную сайтом ссылку «назад» в оценщике отгрузки и смог вернуться назад через процесс.
Часто бывает сложно определить, что показывать пользователям после того, как они нажимают кнопку «Назад», когда они взаимодействуют с многоступенчатым процессом, встроенным в страницу - например, с оценками доставки, мастерами поиска товаров, анкетами и т. Д. Хотя некоторые пользователи могут предположить, что они будут переведены на предыдущую страницу, другие будут предполагать, что они будут переведены на предыдущий шаг процесса.
Сама структура встроенного процесса, вероятно, сильно влияет на ожидания пользователей. Например, когда процесс занимает более 50% интерфейса - что очень часто бывает на мобильных устройствах - многие пользователи могут ожидать, что после нажатия кнопки «Назад» они увидят предыдущий шаг процесса, а не предыдущая страница.
Тем не менее, длина процесса также является здесь фактором. Пользователям несложно вернуться, например, через трехэтапный процесс, даже если они ожидали, что кнопка «Назад» вернет их на предыдущую страницу. Следовательно, последствия принуждения всех пользователей к этому не столь серьезны. Если, с другой стороны, процесс длительный - например, процесс из 7 шагов - то действие обратного нажатия становится намного более утомительным, если, например, пользователям нужно вернуться через 6 отдельных представлений, чтобы наконец вернуться к предыдущую страницу они были на.
Наконец, если встроенный мастер потеряет какой-либо значительный объем данных, введенных пользователем при использовании кнопки «Назад», то последствия отказа от перехода пользователей к предыдущему шагу также значительно возрастут.
Таким образом, при принятии решения о том, должен ли каждый шаг в процессе иметь свой собственный отдельный URL-адрес (требуя пользователи могут вернуться назад на каждом этапе процесса) или нет (где нажатие «Назад», даже если пользователь находится на нескольких этапах процесса, возвращает пользователя на предыдущую страницу или, в качестве альтернативы, выходит из процесса).
2) Расширение содержимого
2) Расширение содержания. В одном из наших первых раундов тестирования навигации пользователь изучал эскизы изображений в IKEA «Решения для сидения» . Каждый эскиз при нажатии растягивается на всю ширину страницы. Развернув первую миниатюру (первое изображение), пользователь развернул другую миниатюру, но затем захотел вернуться к первому изображению и щелкнул в браузере кнопку «Назад» (второе изображение). Однако кнопка «Назад» вернула его обратно на главную страницу категории, а не на первое развернутое изображение (третье изображение), поскольку расширенные параметры не были частью истории браузера.
Расширяющееся содержимое может включать такие элементы, как миниатюры, расширяющиеся до более крупных изображений, или строку текста, расширяющуюся до абзаца. Однако расширенное содержимое не отображается для конечного пользователя, как наложение, когда фон страницы затемнен, и совершенно очевидно, что одна страница «накладывается» на другую. Таким образом, при расширении содержания пользователи могли разумно интерпретировать расширенное содержание как новое представление или просто как то же представление с некоторым содержанием, которое было изменено.
Не использовать расширяющееся содержимое, а вместо этого переключаться на оверлей, где ясно, к чему вести пользователей, когда они нажимают кнопку «Назад» (т. Е. Выходить из оверлея и возвращать их на страницу, на которой они находились), может быть самое простое решение в некоторых контекстах (если в остальном оба типа пользовательского интерфейса одинаково привлекательны для использования). В остальном, подобно многоступенчатым процессам, встроенным в страницы, многое зависит от того, насколько выделяется расширяющееся содержимое. Если он занимает большую часть интерфейса, многие пользователи будут интерпретировать его как отдельную страницу, и, таким образом, каждый фрагмент контента должен иметь свой собственный отдельный URL-адрес.
3) Анкерные звенья
3) Якорные звенья. Пользователь на странице целевого продукта нажал на среднюю звезду обзора вверху страницы (первое изображение) и перешел в раздел обзоров (второе изображение). Удовлетворенный отзывами, пользователь нажал «Назад», но оказался в списке продуктов, а не вернулся в верхнюю часть страницы продукта, как предполагал (третье изображение). Она повторно нашла элемент списка продуктов, который ее интересовал, нажала, чтобы вернуться на страницу продукта, затем добавила продукт в свою корзину.
Когда дело доходит до ссылок привязки, многое зависит от того, будут ли пользователи сразу же переходить вниз по странице при нажатии на ссылку привязки или они плавно прокручиваются до новой позиции на странице. Тестирование показывает, что если пользователи переходят вниз по странице, то нажатие «Назад» должно вернуть их на предыдущую позицию на странице.
Например, если пользователь переходит в раздел обзоров после нажатия средней звезды отзывов в верхней части страницы продукта, то они должны быть возвращены в верхнюю часть страницы продукта при нажатии «Назад».Это связано с тем, что, когда пользователи переходят вниз по странице, они, как правило, теряют обзор того, где они находятся после перехода, и могут думать, что действительно находятся на совершенно новой странице (особенно на мобильных сайтах). Возвращение их туда, где они были изначально, когда они нажимают «Назад», гарантирует, что они не станут слишком дезориентированными.
Однако это будет менее однозначно, если пользователь плавно прокручивает страницу вниз. Поскольку пользователи прокручиваются вниз по странице, они сохраняют обзор того, откуда они пришли, когда они переходят в новое место.Поэтому у них гораздо меньше шансов полностью потерять обзор по сравнению с пользователями, которые перепрыгивают вниз по странице.
Таким образом, некоторые пользователи, которых плавно переместили на новую позицию на странице, могут почувствовать, что сайт не соответствует их ожиданиям, если после нажатия «Назад» они не вернулись на страницу, а вернулись на свою предыдущее место на странице. Поскольку они плавно прокручиваются, они знают, где они находятся - они могут легко прокрутить вверх, если захотят, но, нажав «Назад», они сигнализируют о своем намерении вернуться на страницу назад.(Обратите внимание, что при нажатии привязки рекомендуется, чтобы пользователи всегда плавно прокручивали, а не прыгали.)
Таким образом, следует учитывать конкретный контекст, в котором кнопка «Назад» будет нажата после того, как пользователь плавно прокрутил страницу после нажатия привязки. Если пользователь находится на мобильном сайте, и это очень длинная страница продукта и нет опции «Вернуться к началу», то, вероятно, имеет смысл перенаправить пользователей по нажатой якорной ссылке, а не вернуться на страницу, когда они нажимают кнопку «Назад».
В качестве альтернативы, если на странице много якорных ссылок (это означает, что пользователь потенциально может некоторое время прыгать по странице, нажимая «Назад», если были нажаты многие из якорных ссылок), или если страница не очень высокая , то возвращение пользователей к якорным ссылкам может быть разрушительным, и может быть лучше вместо этого вернуть их на предыдущую страницу.
4) Усеченное содержимое
4) Усеченное содержимое. Пользователь Overstock изучала страницу продукта и в процессе нажала, чтобы развернуть усеченный контент (первое изображение).Готова вернуться к списку продуктов, она прокрутила страницу до верха и нажала «Назад» (второе изображение). Однако это вернуло ее к контенту, который она только что просматривала, в середине страницы (третье изображение). Она снова нажала «Назад», и на этот раз вернулась к списку продуктов. Возвращение пользователей к ссылке, по которой они перешли, чтобы показать усеченный контент, приводит к неприятным результатам.
Усеченное содержание, которое расширяется, когда пользователи нажимают ссылку или кнопку, не должно быть отдельным URL-адресом, который пользователи повторно посещают, когда нажимают «Назад».Например, на страницах мобильных продуктов довольно часто предлагают пару строк текста или абзац описания продукта, а затем скрывают остальное за ссылкой «Еще». Хотя это может сделать страницы продуктов более поддающимися сканированию, пользователям следует возвращаться на предыдущую страницу, а не к предыдущему содержанию, когда они нажимают «Назад».
Расширение усеченного содержимого недостаточно для «изменения представления», при котором пользователи ожидали бы возврата в эту область страницы при нажатии «Назад».Также подумайте о том, чтобы дать пользователям больше информации о том, где они находятся, когда они касаются, чтобы расширить контент, плавно расширяя новый контент (например, изящно расширяя контент, а не резко переходя к новому контенту).
5) Варианты на странице продукта
5) Варианты на странице товара. «Хорошо, это раздражает… Просто пытаюсь вернуться на страницу помады, где мы были [список продуктов]. Я просто не держу ее [кнопку «Назад» в браузере], верно? » Пользователь Sephora несколько раз нажал кнопку «Назад», но, похоже, ничего не произошло, за исключением того, что страница немного сдвинулась вверх (первое изображение).Затем она открыла историю просмотров, удерживая кнопку «Назад», и таким образом смогла вернуться к списку продуктов (второе изображение). До нажатия кнопки «Назад» пользователь изучал образцы цвета, и из истории браузера кажется, что Sephora реализовала каждый вариант цвета как отдельный URL-адрес. Тем не менее, изображение продукта не изменилось для пользователя, когда она нажала «Назад» (но это изменилось, когда она изначально изучала образцы).
Варианты продукта должны быть объединены в один элемент списка продуктов.Затем пользователи могут изучить варианты на странице продукта. Однако, должны ли эти варианты иметь отдельные URL-адреса - и, таким образом, пользователи будут возвращаться к каждому предыдущему варианту, который они уже изучили, нажимая «Назад» - снова зависит от контекста.
Когда обычно есть несколько вариантов продукта, в частности цвета, которые пользователи могут рассмотреть, то использование их в качестве отдельных URL-адресов может быть лучшим выбором, поскольку большинству пользователей не придется нажимать «Назад» более нескольких раз, чтобы перейти к фактическая предыдущая страница (часто список продуктов или страница результатов поиска).В то время как некоторых пользователей будет немного раздражать необходимость повторного нажатия 2 или 3 раза, чтобы вернуться на предыдущую страницу, других, вероятно, будет больше раздражать, если они нажмут «Назад», чтобы перейти к ранее просмотренному варианту, и вместо этого будут запущены . страницу товара целиком .
Это может стать гораздо более разрушительным опытом, если, например, они не вернутся туда, где они были ранее в списке продуктов, что заставит их заново найти продукт, который они только что просматривали.
Если у каждого варианта есть свой отдельный URL-адрес, очень важно, чтобы изображение продукта менялось после каждого нажатия кнопки «Назад». В противном случае пользователи будут нажимать «Назад» с без указания , что в интерфейсе что-то происходит (даже если они технически видят разные URL-адреса). Это верный путь к катастрофе, так как большинство пользователей будут считать, что сайт «завис», или им будет просто непонятно, почему кажется, что их действия не имеют никакого эффекта.
Если, однако, существуют десятки вариантов - например, оттенки помады - тогда может оказаться более утомительным шаг назад через потенциально десятки «страниц», чтобы, наконец, вернуться на предыдущую страницу, на которой находился пользователь.Если решено, что нажатие «Назад» пропускает ранее просмотренные варианты и вместо этого отправляет пользователей обратно на предыдущую страницу, на которой они были, тогда очень важно, чтобы пользователи возвращались туда, где они были в списке продуктов (если это была предыдущая страница), чтобы доработка продукта очень проста. Также может быть полезен список «Недавно просмотренные».
Решение
Хорошая новость заключается в том, что HTML5 предоставляет относительно простое решение: API истории HTML5. Точнее история .Функция pushState () позволяет сайту вызывать изменение URL без перезагрузки страницы, то есть сайт может настроить поведение кнопки «Назад» в браузере в соответствии с ожиданиями пользователей. (Возможно и обратное: изменить URL-адрес, не вызывая записи в истории пользователя.)
На сайте Skechers.com реализация «Загрузить больше» активно решает проблему с кнопкой «Назад», переписывая URL-адрес каждый раз, когда пользователи нажимают кнопку «Загрузить еще». Следовательно, когда пользователи нажимают кнопку «Назад» в браузере на странице продукта, они возвращаются в нужную позицию в списке продуктов (например,г., на «страницу 3»).
Это означает, что при открытии, например, оверлея, сайт может вызвать изменение истории в браузере пользователя, позволяя пользователю «вернуться» из режима наложения с помощью кнопки браузера «Назад». И это, конечно, относится ко всему, включая инициируемые пользователем наложения и лайтбоксы, разбиение на страницы на основе AJAX, фильтрацию и сортировку списков, аккордеонные проверки - любой элемент, который пользователь ожидал бы вызвать историю браузера, но технически этого не сделал.
Следовательно, используйте историю .pushState () для создания новой записи в истории браузера пользователя для любого представления, которое пользователь будет воспринимать как новую страницу (т. е. любого представления, которое достаточно отличается визуально или концептуально, чтобы восприниматься как таковое). Таким образом, вы можете гарантировать соответствие поведения сайта и ожиданий пользователей.
В итоге: Используйте history.pushState () , чтобы убедиться, что ваш сайт вызывает поведение кнопки «Назад», которое соответствует ожиданиям пользователя. В частности, убедитесь, что любое визуальное изменение, которое пользователь будет воспринимать как новую страницу, добавлено в его историю просмотров, независимо от того, технически это новая страница или нет.Это включает, но не ограничивается:
- Оверлеи / лайтбоксы
- Фильтрация и сортировка выборок
- Ступени кассы Accordion
- Расположение в списке
Кроме того, некоторые новые представления являются «серыми зонами», и при принятии решения о реализации нового представления в качестве новой «страницы» необходимо учитывать важность представления и другие факторы. К ним относятся
- Многоступенчатые процессы на странице
- Расширяющееся содержание
- Анкерные звенья
- Варианты на странице товара
Усеченное содержимое, как правило, никогда не должно быть реализовано как новая «страница» с использованием истории .Пушесте () .
Пользователи полагаются на визуальные эффекты элемента, его контекст и предыдущий опыт работы с сайтом при формировании своих ожиданий относительно того, когда что-то является новой веб-страницей, а не слегка измененным элементом на той же странице. Поэтому очень важно поддерживать ожидания пользователей, которые нажимают кнопку «Назад», чтобы избежать непреднамеренных обходных путей и изменений, которые во время тестирования часто были прямой причиной отказа. Несмотря на серьезность проблемы и довольно простое решение, 59% сайтов не поддерживают хотя бы одно из четырех основных требований кнопки «Назад».
В этой статье представлены результаты исследования только одного из 580+ руководств по UX в Baymard Premium - получите полный доступ, чтобы узнать, как создать «современную» систему навигации для электронной коммерции.
Что делать, если кнопка возврата не работает
Вы когда-нибудь задумывались, почему иногда кнопка «Назад» не работает?
Владельцы веб-сайтов имеют возможность временно отключить кнопку «Назад».
Они надеются привлечь новых и неопытных пользователей и заставить их оставаться на своем сайте.Почему они думают, что это хорошая идея, мне непонятно; и эта практика обычно не одобряется.
Отчасти это такая глупая идея потому, что ее так легко преодолеть.
Отключенная кнопка возврата легко фиксируется
Возможно, вы заметили, что слева от кнопки «Назад» есть направленный вниз треугольник (как показано на диаграмме слева). (В зависимости от вашего компьютера кнопка возврата может незначительно отличаться от той, которая показана здесь. По большей части кнопка возврата будет иметь стрелку, указывающую влево.)
Наведите указатель мыши на реальный курсор на экране (не на диаграмму) и щелкните.
Вы должны увидеть список последних нескольких посещенных вами веб-страниц.
Использование кнопки «Назад» для прямого перехода на веб-сайт
Если вы возьмете мышь и переместите указатель вниз по списку, вы увидите, что каждая запись станет выделенной (отображается светлыми буквами на темном фоне), как показано на рисунке слева.
Имейте в виду, что ваш список может немного отличаться от моего.
Чтобы вернуться на страницу в списке, просто щелкните, когда страница, на которую вы хотите перейти, выделена.
Если вы передумали и хотите остаться на просматриваемой странице, просто нажмите клавишу ESC, чтобы список исчез с экрана.
У кнопки возврата длинная память
Список, отображаемый кнопкой "Назад", ограничен несколькими записями. Что делает эту функцию особенно мощной, так это то, что она запоминает все сайты, которые вы посетили. Попробуйте как-нибудь.Побывав в Интернете какое-то время, используйте список истории кнопок «Назад», вернитесь в последнее место в списке, а затем просмотрите список. Вы должны заметить, что список совершенно другой и отражает места в Интернете, которые вы посетили до того, которое вы выбрали.
Разве это не круто?
Обязательно ознакомьтесь с Help For Web Beginners другими Интернет-учебниками для начинающих.
Используйте стандартные редиректы - не ломайте кнопку возврата!
Используйте стандартные редиректы: не ломайте кнопку возврата!
Способы использования и способы избежать
Не используйте «обновление» для перенаправления
Если вам нужен http: // www.example.org/foo , чтобы отобразить то, что находится на http://www.example.org/bar вам не следует использовать методы «обновления» нравится:
.
Почему? потому что это могло сломать кнопку «назад». Представьте, что пользователь нажимает кнопку «назад», обновление будет работать снова, и пользователь отскочит вперед. Пользователь, скорее всего, сильно разозлится и закроет окно, что, вероятно, не так. Вы, как автор этой страницы, хотите.
Использовать перенаправление HTTP вместо
При использовании метатега «обновить» для создания перенаправления у нас есть конкретная инструкция в документе. Пользовательский агент (будь то браузер или валидатор разметки), как ожидается, загрузит страницу, посмотрите ее содержимое, найдите инструкцию "обновить", дождитесь указанного количество времени (которое может составлять «0» секунд для «немедленного» обновления, но на самом деле может быть что угодно), а затем перейти к новому адресу.
«Перенаправление HTTP», с другой стороны, действует гораздо более напрямую, потому что выполняется в другом слое .Когда пользовательский агент (то есть браузер или валидатор) сначала связывается с сервером и запрашивает документ, сам _сервер_, который был настроен для перенаправления документа на другой адрес, отвечает пользовательскому агенту что вместо этого он должен смотреть на новый адрес.
«Перенаправление HTTP» также является более богатым способом перенаправления, поскольку оно дает агенту пользователя больше информации, чем просто новый адрес: сервер также дает некоторую информацию о цель и тип перенаправления, что позволяет агенту пользователя вести себя по-разному в зависимости от типа редиректа.Различные типы переадресации HTTP (в зависимости от статуса HTTP код в ответе, отправленном сервером) являются постоянным перенаправлением (HTTP 301), временное перенаправление (307) и неопределенное перенаправление (302).
Документацию см. По ссылкам ниже. и руководства о том, как это сделать с вашим веб-сервером.
Дополнительная литература
- О редиректах:
- Как делать редиректы на вашем сервере:
О «Советы по обеспечению качества»
W3C QA Tips - это короткие документы, объясняющие полезные кусочки знаний для веб-разработчиков или дизайнеров, размещенные и произведенные службой контроля качества Группа интересов в W3C.
Хотя подсказки внимательно просматриваются участниками группы, их не следует видеть как ничего, кроме информативной мудрости, и особенно, они , а не нормативные технические характеристики W3C.
Узнайте больше о советах, как представить свои собственные жемчужины мудрости и найти всех других QA советы в указателе советов.
.