Этот кейс будет интересен, если:
- проектируете навигацию для сайта или сложного веб-сервиса;
- одну и ту же страницу можно открыть из разных разделов сайта;
- пользователь может прийти из поиска, уведомления, рекламы или по прямой ссылке;
- нужно сохранить контекст пользователя при возврате на предыдущую страницу.
Кнопка «Назад» кажется простой, пока на страницу не начинают вести разные маршруты. Разбираемся, как спроектировать возврат так, чтобы пользователь не терял контекст и всегда понимал, куда попадет.
Проблема
Одна и та же страница может быть частью разных сценариев. Пользователь может прийти к ней из списка, поиска, другого раздела, по уведомлению или прямой ссылке.
Поэтому кнопка «Назад» не всегда может просто вернуть на предыдущую страницу. Важно понять, какой маршрут был у пользователя и можно ли восстановить его контекст.
Например, если пользователь пришел из списка, после возврата он ожидает увидеть тот же список с прежними фильтрами, сортировкой и позицией. Если страницу открыли по прямой ссылке, возвращать пользователя в какой-то конкретный раздел может быть неправильно.
Получается, у кнопки «Назад» две задачи:
- вернуть пользователя в правильное место;
- сохранить контекст, с которым он там работал.
Поэтому нужно решить, как определять предыдущий маршрут и что делать, если его нет.
В этом выпуске «Дизайн-тренажера» разберем три подхода: всегда вести в одно место, использовать историю браузера или учитывать маршрут пользователя.
Перед нами три варианта интерфейса.
Какой из них лучше?
Вариант А
Кнопка всегда ведет в одно заранее определенное место. Например, на страницу списка или в раздел, откуда пользователь обычно открывает текущую страницу.
Вариант Б
Кнопка называется «Назад» и возвращает пользователя на предыдущую страницу через историю браузера.
Вариант В
Система запоминает, откуда пришел пользователь.
Если пользователь пришел с другой страницы, кнопка возвращает его туда же.
Если на той странице были фильтры, сортировка или другие настройки, они тоже сохраняются.
Если система не знает, откуда пришел пользователь, она не придумывает маршрут - вместо кнопки будут хлебные крошки.
Разбор
В этом случае оптимален вариант В. И вот почему.
1. Название кнопки должно соответствовать действию
Если пользователь открыл страницу из списка, ожидается, что после работы он сможет вернуться в этот список.
Еще лучше вернуть его в то же состояние. Если он применил фильтры, выбрал сортировку или перешел на определенную страницу, не стоит заставлять его настраивать все заново.
Практическое правило: возвращайте не только на предыдущую страницу, но и в предыдущий контекст.
2. История браузера не всегда знает, куда нужно вернуть пользователя
История браузера подходит не для всех сценариев. Пользователь мог открыть ссылку в новой вкладке, прийти из письма или другого сервиса. В этих случаях предыдущая страница может отсутствовать или не иметь отношения к текущему сценарию.
Практическое правило: проверьте, как «Назад» работает после обновления страницы, при открытии новой вкладки и переходе по прямой ссылке.
3. «Назад» и хлебные крошки решают разные задачи
- «Назад» отвечает на вопрос: «Куда я пришел?»
- Хлебные крошки на вопрос: «Где я нахожусь?»
Если система знает предыдущий маршрут, кнопка возвращает пользователя туда же и восстанавливает его контекст.
Если предыдущего маршрута нет, не нужно придумывать его. Хлебные крошки показывают, где находится страница и как перейти на уровень выше.
У каждого элемента своя задача: «Назад» возвращает, хлебные крошки помогают ориентироваться.
Как проверить ваше решение
Проверьте несколько разных сценариев.
- Пользователь пришел с другой страницы. Возвращает ли кнопка туда, куда он ожидает
- Пользователь работал с фильтрами или другими настройками. Сохраняется ли его контекст
- Пользователь открыл страницу напрямую. Понятно ли ему, где он находится и куда двигаться дальше?
- Пользователь открыл ссылку в новой вкладке. Не ведет ли кнопка в случайное место?
- Пользователь обновил страницу. Поведение остается предсказуемым?
- Текст кнопки соответствует тому, что произойдет после нажатия?
Если во всех сценариях понятно, куда ведет кнопка и что происходит с контекстом, решение можно запускать.
Итог
Кнопка «Назад» должна учитывать, откуда пользователь открыл страницу. Если он пришел из конкретного раздела, его стоит вернуть туда же и сохранить состояние страницы.
Если он открыл страницу по прямой ссылке или из места, которое нельзя использовать как предыдущий маршрут, не стоит придумывать, куда его возвращать. В таком случае лучше показать структуру сайта с помощью хлебных крошек.
Пользователь всегда должен понимать, где находится и что произойдет после нажатия.