Создаем кнопку "вернуться назад". Создаем кнопку "вернуться назад" Html вернуться на предыдущую страницу

Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.

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

Из этой статьи вы узнаете:

• что ожидают пользователи от кнопки «вернуться назад»;
• каковы 5 самых распространенных ошибок;
• простое решение этих проблем.

Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?

Ожидания пользователей

Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.

Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.

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

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

Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.

Использование фильтров часто преображает страницу и дает человеку новый опыт. Поэтому страница после сортировки воспринимается как новая, даже если на ней ничего не подгружалось. Это происходит потому, что после каждого взаимодействия посетителя со страницей интернет-магазина получается новая выдача результатов.

Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.

3. Форма регистрации/оплаты

Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».

Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.

Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.

В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».

Пользователи не готовы отказаться от кнопки «назад»

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

Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.

Пользователи ПК тоже часто нажимают кнопку — но не так, как владельцы мобильных, ибо пользователям настольных компьютеров доступна удобная навигация по сайту.

Решение

Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».

В этой статье мы рассмотрим, каким способом можно создать кнопку "Вернуться назад" в любом нужном для вас месте. Думаю из самого названия кнопки уже понятно, что будет происходить при нажатии на нее. Такую кнопку можно вставить как в категорию, так и в сам материал. Делается все достаточно просто.

Есть несколько вариантов, как можно добавить кнопку, но я лично использовал только один способ. А именно третий вариант из предложенных мною трех. Чуть далее расскажу, почему именно он.

Какие вообще есть у нас варианты:

Отредактировать файлы шаблона Jooml-ы.

Просто вставить код кнопки в нужное место.

Создать модуль "HTML-код", вставить туда код кнопки, и потом выводить этот модуль в нужном месте.

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

Так вот, на одном из своих сайтах я и использовал третий вариант:

Был создан модуль «HTML-код» и туда с помощью расширения "Sourcerer", которое дает возможность добавлять любой код в материал, был вставлен код кнопки.

Мой рабочий код кнопки:

Вернуться назад

Текст немного украшен стрелкой, с помощью компонентов из bootstrap 3, а самой кнопке заданы стили через CSS.

Иногда на вебстраницах возникает необходимость временно перейти на какую-либо другую (назовем ее вспомогательной) страницу, а затем вернуться обратно и продолжить работу с ней. Например, это может быть – страница справки, регистрации.

При этом, очевидно, обратный адрес может быть самым разным. Как реализовать такой обратный переход на сайте? Чистых html/CSS здесь не хватит, необходимо будет использовать javascript.

Самое простое – это, например, использование такой строчки в скрипте на вспомогательной странице:

Метод history запоминает историю переходов на странице и, по сути, его использование аналогично использованию кнопок браузера «Вперед» и «Назад», только несколько более функционально. Это – наиболее простой и удобный способ, но, только при одном условии: если новая (вспомогательная) страница не будет открыта в новом окне. Ведь иначе вспомогательная страница будет открываться впервые (точнее, сеанс для нее будет первый, переходов на ней еще не было). А это означает, что переходить назад, по сути-то, некуда. Поэтому данный способ нельзя назвать универсальным. Он не сработает, если пользователь принудительно откроет страницу в новой вкладке или за него сделает это браузер – в соответствии с настройками. В таком случае и атрибут ссылки target=”_self” не поможет: с открытой вспомогательной страницы невозможно будет перейти обратно (если, конечно, не ввести URL исходной страницы в адресной строке браузера вручную).

Более универсальный способ

Для его реализации понадобятся скрипты как на исходной, так и на вспомогательной страницах. Идея может быть разной. Одна из них основана на том, что адрес (URL) исходной страницы сохраняется в адресной строке браузера в виде GET-запроса. Тем самым. вспомогательная страница, получая такой запрос, знает о его источнике. Основываясь на этом, появляется возможность перехода обратно, т.е. на ту страницу, с которой был совершен переход.

Схематически это можно представить следующим образом:

Скрипт на исходной странице

На странице, С КОТОРОЙ должен осуществляться переход, находится следующий скрипт, представляющий собой функцию – обработчик клика мыши (onclick):

function save_back(url) {

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") {
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

Для того, чтобы функция в скрипте сработала, необходимо установить ее обработчик на какой-нибудь элемент одним из способов, например, так:

Нажмите, чтобы перейти на вспомогательную страницу

Обратите внимание, что атрибут href этой ссылки имеет соответствующий адрес, который указан в функции-обработчике события onclick. Это сделано для того, чтобы поисковые роботы понимали, на какую страницу будет происходить переход при нажатии на ссылку. Если это не нужно, тогда следует сделать пустой атрибут href, вида

Принцип работы этого скрипта заключается в том, что при вызове функции save_back(url) происходит открытие (вспомогательной) страницы, имеющей адрес url. Для этого определяется протокол страницы (например, http или https), а также остальная часть URL исходной вебстраницы, в том числе с, быть может, имеющимися данными GET-запроса (это то, что находится в URL после знака «?»). Полученные данные добавляются к URL открываемой страницы – и происходит переход на нее.

Скрипт на вспомогательной странице

На ней должен быть примерно такой скрипт:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

var question = "";
if(number_questions > 1){
question = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}

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

Вернуться

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

Итак, скрипт на вспомогательной странице читает содержимое адресной строки и затем разбивает ее в массив по элементам «?». Обратим внимание, что в URL могут быть два таких символа. Первый появится, как уже было сказано, вследствие того, что к адресу вспомогательной страницы был добавлен адрес (за вычетом протокола) адрес исходной страницы. А второй мог присутствовать, как результат наличия параметров GET-запроса при загрузке исходной страницы. Иными словами, в адресной строке вспомогательной страницы может присутствовать один или два знака вопроса. Для перехода со вспомогательной страницы на исходную при клике на ссылку

Вернуться

из адресной строки считывается запрос и преобразуется к такому же виду, который он имел на исходной странице, после чего происходит загрузка страницы по этому адресу.

Замечания

Кроме того, следует отметить, что в статье, по сути, речь идет не о возврате на исходную страницу, а о повторной ее загрузке. Это, конечно, лишь имитация возврата. В частности, данные, введенные на этой странице, ее настройки могут не сохраниться. Кроме того, в отличие от именно ВОЗВРАТА, при загрузке страницы она будет открыта с самого начала сайта (т.е. верхняя ее часть будет расположена вверху экрана). Тогда как «истинный» возврат назад возвращает (исходную) страницу именно в том месте, из которого был сделан переход. Поэтому попробуем скомбинировать оба способа.

Комбинированный способ

Итак, поставим задачу:

если вспомогательная страница открывается в той же самой вкладке (окне), то пусть будет доступен метод history.back();

а вот если вспомогательная страница открывается в новом окне, то должен работать обсуждавшийся выше метод (ибо при этом history.back() не сработает).

Скрипт на вспомогательной странице немного изменится (добавится упомянутая выше строчка):

function return_to_initial_page() {
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location;
var question = "";
if (number_questions > 1) {
question = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get;
}

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

Заключение

Конечно, в этой статье показан лишь один из вариантов технологии «возвращения» НАЗАД - на исходную страницу. Для этой цели, помимо GET-запроса, можно было бы использовать и иные технологии, например локальное хранилище localStorage . Кроме того, для полной имитации возврата НАЗАД неплохо было бы через GET-запрос передавать и величину прокрутки исходной страницы - чтобы потом, даже при открытии вспомогательной страницы в новом окне - вернуться в то же самое место исходной страницы, откуда был ранее сделан переход.

В этом видеоуроке мы рассмотрим 3 варианта как сделать кнопку НАЗАД для перемещения по сайту на предыдущие страницы в обратном порядке. Кнопка НАЗАД также необходима когда с нескольких страниц сайта (A1, A2…An) ссылки ведут на одну и ту же страницу (B), а с этой страницы (B) необходимо вернуться на предыдущую страницу (An) сайта, с которой Вы попали на страницу (B).

Смотрите новый видеоурок:

Код кнопки “вернуться назад” для размещения на сайте:

< a href = "#" onclick = > < img src = "assets/back2.png" alt = "Назад" / > < / a >

Кнопка Назад. Для чего нужна?

В этом видеоуроке мы сделаем кнопку возврата назад на предыдущие страницы сайта в программе Adobe Muse. Эта кнопка будет возвращать по тому же пути, по которому мы ходили на сайте.

Кнопка Назад. Проект для урока.

Для того чтобы сделать этот урок, я приготовил небольшой проект, точнее его небольшим называть нельзя, здесь он состоит из , страниц верхнего уровня, страниц первого уровня и также для страницы «page-2» есть еще несколько дочерних страниц. И для разнообразия я создал два шаблона. Первый шаблон применил к трем первым страницам. А второй шаблон применил ко всем остальным.

Давайте начнем. Кнопку Назад – мы будем делать в «Шаблоне С», чтобы она сразу появилась на тех страницах, к которым применен данный шаблон. Я захожу в редактирование данного шаблона, и именно сюда мы будем вставлять нашу кнопку «Назад».

Кнопка Назад. 3 способа.

Кнопку «Назад» мы сможем вставить тремя способами. У меня есть специальный файл, который я уже заготовил в блокноте. И есть три способа, три кода, используя которые, у нас получится вставить такую кнопку на сайте.

Кнопка Назад. Способ№1 – простой текст.

Первый вариант – это просто текст. Кнопка будет у нас в виде текста. Я копирую данный код:

< input type = "button" onclick = "history.back();" value = "Назад" / >

И вставляю его в шаблон. Выглядит это вот так. У нас просто текст и он выделен белым цветом. Я размещу его вот здесь. Для того чтобы понять, как это все работает, мы нажимаем клавиши ctrl+alt+E для того, чтобы просмотреть весь сайт со всеми его страницами в браузере. Вот так выглядит главная страница сайта. Мы можем серфить по меню, выбирать страницы. Здесь у нас есть выпадающие меню. И, например, с главной страницы мы сразу перешли на страницу «page-3». И здесь у нас есть кнопочка «Назад».

Эта кнопка активная, но при наведении курсора мыши на нее, не появляется рука с пальцем. Мы можем спокойно нажать на эту кнопку, и нас перебросит назад на главную страницу. Точно также мы можем нажать на страницу «page-3», потом перейти на страницу «page-4» и нажать кнопку «Назад», она нас перебросит на страницу «page-3», и если мы еще раз нажмем на кнопку «Назад», то она нас переносит на главную страницу. Вот таким образом работает кнопка «Назад».

Но данную кнопку сложно назвать кнопкой, поскольку она представляет собой только вот такую надпись, выделенную белым цветом. Если мы захотим отредактировать ее в Muse, мы сможем изменить только размер текста, например, я поставлю здесь «36», чтобы вам было лучше видно. Цвет текста мы, по-моему, менять не можем. Сейчас я попробую поставить красный. Я выбрал красный цвет, но это никак не повлияло на нашу надпись, так что цвет мы менять не можем. Мы можем поменять размер. Попробуем сделать жирным и выставить по центру. Все, что мы можем сделать, так это такое редактирование. Если мы хотим сделать заливку данному блоку, например, сделать оранжевым цветом, то наш текст все равно будет выделяться белым, и, в принципе, выглядит не очень красиво.

Кнопка Назад. Способ№2 – Текст-ссылка.

< a href = "#" onclick = "history.back();return false;" > Назад< / a >

Сейчас мы его скопируем. Я нажимаю ctrl+C и перехожу в программу, и нажимаю ctrl+V для того, чтобы вставить на сайт. Он у нас выглядит вот такой ссылкой. Ссылка у нас синяя. Сейчас она не очень хороша видна. Давайте сделаем тоже 36-ой шрифт, чтобы укрупнить и увидеть поближе. Вот это у нас просто синяя ссылка. Если мы сейчас нажмем ctrl+alt+E, то увидим, что при просмотре она выглядит вот такой обычной синей ссылкой. Давайте еще перейдем пару раз, чтобы увидеть, нажимаем раз, два, возвращаемся. Вид у данной ссылки обычный, как у обычной ссылки.

К ней мы можем применять в программе Adobe Muse стили ссылок. Находятся стили ссылки в разделе «Гиперссылки», выбираем «Редактировать стили ссылки». У меня уже есть заготовленный вариант. Сейчас у меня уже есть заготовленный вариант. Вы видите, что к ней применен стиль. В стандартном состоянии и при наведении курсора мыши цвет синий и при активном состоянии – красный. Вы видели это при просмотре. Второй стиль я создал просто все черные состояния. Этот стиль мы можем применить к данной кнопке. Например, я выберу и применю к данной кнопке этот специальный стиль. И вы увидите, что наша надпись стала черной.

Здесь мы также можем сделать заливку, например, я сделаю тем же оранжевым цветом. Здесь уже можно редактировать текст. Поставим его по середине, выделим жирным. И, в принципе, этот вариант уже более похож на кнопку. Здесь уже нет такого белого выделения, и уже, в принципе, вариант уже вполне подходящий. При просмотре (ctrl+alt+E) давайте перейдем на страницу «page-3», на страницу «page-4» и еще раз пощелкаем. Эта кнопка работает точно также, как и первая, только имеет больше возможностей для редактирования дизайна.

Кнопка Назад. Способ№3 – кнопка – картинка.

И третий вариант как мы можем разместить кнопку – это кнопка у нас будет картинкой. Я копирую данный код:

< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Картинка" / > < / a >

Перехожу в Muse, нажимаю «Вставить». И этот третий вариант у нас – картинка. Для того, чтобы у нас тут появилась картинка какая-нибудь, нам необходимо скачать из интернета какой-нибудь файлик картинки либо создать его самостоятельно. Картинку мы добавляем через функцию программы «Файл», выбираем «Добавить файлы для передачи». Я уже скачал пару картинок из интернета. Мы можем выбрать какую-нибудь. Давайте выберем вот эту с кнопкой «Назад». Теперь если мы посмотрим в разделе «Ресурсы», то у нас добавилась кнопка «back2.png» – «Передать». Этот файл у нас для передачи.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Назад" / > < / a >

Все, нажимаем «ОК». В самом Muse мы не увидим никаких изменений. Все изменения мы увидим только при просмотре сайта в браузере. Давайте нажмем снова ctrl+alt+E для просмотра сайта в браузере и попробуем посерфить по нашим страницам.

Кнопка Назад. Просмотр результата.

Перейдем на страницу, например, «page 2-1», теперь перейдем на страницу «page-2», теперь перейдем на страницу «page 3», далее на страницу «page-4». И теперь, если мы будем нажимать на кнопку назад, мы будем возвращаться последовательно в обратном порядке к главной странице сайта. Нажимаем «Назад», перемещаемся на страницу «page-3», на страницу «page-2». И здесь у нас уже нет кнопки. Если бы мы ее разместили в шаблоне, который применен к странице «page-2», то у нас бы здесь тоже была кнопка «Назад». Поскольку у нас ее нет, нам приходится перемещаться к главной странице, только нажав на кнопку «Главная» в меню. Давайте перейдем, например, на страницу «page 2-2-2», потом перейдем на страницу «page 2-2-1», потом на страницы «page-3 » и «page-4». И теперь в обратном порядке: страница «page-3», страница «page 2-2-1», страница «page 2-2-2» и на главную.

Конечно, вы можете не размещать данную кнопку у себя на сайте, а использовать обычные стрелки в браузере. Но если вы хотите, чтобы такая кнопка была у вас на сайте, то можете ее сделать вот такими способами.. И ссылка на статью будет под этим видео. На этом все. С вами был Дмитрий Шаповалов. Ставьте лайк к данному видео, подписывайтесь на канал , пишите комментарии внизу, а прощаюсь с вами до следующих видеоуроков.