Кнопка назад для сайта: Полезные HTML кнопки — HTML кнопки назад и добавить в избраное

Содержание

Кнопка назад на сайте

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

3D фотоэффект изображения на JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Фильтрация и сортировка на JS с помощью библиотеки MixItUp

MixItUp — это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее

Яндекс карта с управлением для сайта

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее

Подключение jQuery

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

В основном, модальное окно — это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. | current page

Обратите внимание, что и yahoo.com, и cnn.com исчезли из списка. Это потому, что вы выбрали новый маршрут. Браузер поддерживает только список страниц, которые вы посетили, чтобы попасть туда, где вы сейчас находитесь, а не историю каждой страницы, на которой вы когда-либо были. Браузер также ничего не знает о структуре сайта, который вы посещаете, что может привести к некоторому удивительному поведению.

Вы находитесь на торговом сайте (ne.com, в качестве короткого примера), который имеет категории и подкатегории товаров для просмотра. Дизайнер сайта предусмотрительно предоставил хлебные крошки в верхней части окна, чтобы вы могли перемещаться по категориям. Вы начинаете с верхней страницы сайта, нажимаете на аппаратное обеспечение, затем на память. Теперь список выглядит так:

 google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem
                                           ^
                                           |
                                      current page

Вы хотите вернуться в категорию оборудования, поэтому вы используете панировочные сухари, чтобы перейти в родительскую категорию, а не использовать кнопку Назад. | current page

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

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

Поначалу многих пользователей (включая меня самого, когда мне случается делать именно это) сбивает с толку то, что он возвращает вас на уровень «down», обратно в категорию памяти. Глядя на список страниц, легко понять, почему:

google.
                                            |
                                       current page

Чтобы вернуться на главную страницу, используя только кнопку «Назад», потребуется еще два нажатия, что приведет вас «back» к категории оборудования и, наконец, к главной странице. Нам, программистам, кажется очевидным, что происходит, но это постоянно удивляет обычных пользователей, потому что они не понимают, что браузер ничего не знает об иерархической структуре любого веб-сайта, на котором они находятся.

Было бы здорово, если бы браузеры позволили дизайнерам сайтов программировать кнопку «Назад», чтобы сделать очевидную вещь (поднять вас на уровень выше), а не то, что она делает сейчас?

Правка: комментатор спросил, перезагружает ли браузер страницу или просто выводит ее из локального кэша.

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

Кнопки «Наверх», «Назад», «Вниз» на jQuery, как вконтакте

Это статья — продолжение к моему старому посту про кнопку наверх, который с момента публикации набрал максимальное количество просмотров среди остальных постов на блоге и 95 комментариев!

Вот скрин из Google Analytics, топ 3 поста на блоге с момента публикации «кнопки наверх»:

Отрыв практически в два раза, впечатляет 🙂

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

1. Кнопка «Наверх-Назад» (на предыдущую страницу)

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

HTML

Сначала HTML-код, вставьте его куда-нибудь на своё усмотрение, я бы засунул перед закрывающим тегом </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button_back.js"></script>
<div>
	<a href="#top">наверх</a>
</div>

Повторю ещё раз, если кнопка не работает, попробуйте при подключении файла button_back.js прописать абсолютный URL.

CSS

#top-link{
	cursor:pointer;
	display:none;
	position:fixed;
	top:0px;
	bottom:0px;
	padding-left:5px;
	padding-top:5px;
	z-index:1;
}
#top-link a{
	display:block;
}

jQuery

Это содержимое файла button_back.js. Обратите внимание на ID основного блока с контентом на 3-й строчке кода, у меня это #content, а у вас может быть что-нибудь другое, например #wrapper или #container.

jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('наверх').parent().removeAttr("onClick");
		} else {
			topLink.children('a').html('назад').parent().attr("onClick", "history.back()");
		}
	});
	topLink.click(function(e) {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});
});

P.S. в примере я особо не заморачивался с оформлением кнопки — всё только самое необходимое, если вам нужно оформление — смотрите или скачивайте демо.

2. Кнопка «Наверх-Вниз» (обратно в ту часть страницы, где был переход наверх)

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

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

Подробнее о том, как определить текущее местонахождение на странице.

Итак, погнали.

HTML и CSS

Тут практически всё точно также, как и в предыдущем примере (но в демо есть некоторые отличия в CSS), единственное только я назвал по-другому файл со скриптами,

button_down.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button_down.js"></script>
<div>
	<a href="#top">наверх</a>
</div>

#top-link{
	cursor:pointer;
	display:none;
	position:fixed;
	top:0px;
	bottom:0px;
	padding-left:5px;
	padding-top:5px;
	z-index:1;
}
#top-link a{
	display:block;
}

jQuery + плагин scrollTo

Содержимое файла button_down.js, опять-таки не забывает изменить ID элемента #content.

;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
 
jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('наверх').parent().removeClass('bottom_button').addClass('top_button');
		} else {
			topLink.children('a').html('вниз').parent().removeClass('top_button').addClass('bottom_button');
		}
	});
	topLink.click(function(e) {
		if($(this).hasClass('bottom_button')){
			// при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
			$("body").scrollTo( pos + 'px', 500 );
		} else{
			// определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
			pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
			$("body,html").animate({scrollTop: 0},500);
		}
		return false;
	});
});

Работоспособность кода протестирована в браузерах Google Chrome, Mozilla Firefox и Opera (в актуальных на момент обновления данной статьи версиях).

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

«Кнопка “Назад” в браузере — ваш враг» — Образование на vc.ru

Сооснователь системы мобильной аналитики Mixpanel Сухаил Доши — о том, как измерять продукт.

4841 просмотров

Материал подготовлен волонтёрами Y Combinator по-русски. С помощью конспектов, расшифровок и титров инициаторы хотят передать опыт создания ИТ-компаний вроде Airbnb, Mixpanel или Twitch. Волонтёры также помогают организовать публичные просмотры в акселераторах, университетах, коворкингах, инкубаторах и других местах силы в Пензе, Саратове, Кишинёве, Стерлитамаке и так далее. Russol ищет волонтёров, желающих организовать просмотр в своём городе, на два-три часа в неделю для перевода и вычитки лекций. Присоединиться и помочь.

Я основал Mixpanel, написав первую строку кода в октябре 2008 года. Мне тогда было лет 20, жил с родителями. И спустя десять лет в компании работало уже более 300 сотрудников. Получили немного денег. Сейчас у нас около 7000 платёжеспособных клиентов, и мы приближаемся к $100 млн годового дохода.

Мы создаём графики, помогаем измерять то, что происходит с продуктом, когда кто-то приглашает друга в приложение. Определяем воронку, уровень конверсии и удержания пользователей.

Задачи на старте компании

Понятен ли пользователям ваш продукт? Первые полтора года мы в Mixpanel изрядно помучились над этим. Пришлось многое изменить.
Хорошо, пользователи понимают продукт. Но начиная уже с первого дня пользования, считают ли они программу достаточно простой в обращении? Это бесконечная задача, которую вы берёте на себя, когда основываете компанию и начинаете поставлять свой продукт.
И наконец, пользуются ли люди вашим продуктом снова?

Метрики

Количество посетителей.
Сколько пользователей зарегистрировались.
Сколько поняли ценность продукта.
Удержание клиента.
Количество пользователей, поделившихся продуктом.

Это и есть ваши рычаги управления.

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

Понятен ли пользователям продукт

Чтобы проиллюстрировать эту идею, я приведу пару примеров. Сначала покажу, что такое плохой лендинг. На своём опыте. Повторю мысль основателя Y Combinator Пола Грэма. Люди обычно держат свою мышку на кнопке «Назад» и ждут, чтобы сказать: «Я ничего не понимаю». После они уходят с сайта. Поэтому кнопка «Назад» — ваш враг.

Сайт Mixpanel в 2009 году

Так, например, выглядела главная страница Mixpanel в 2009 году. Наш логотип с тех пор изменился. Дизайн создан мной. В тексте на сайте масса ошибок, орфография всегда была моей проблемой.

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

Конечно это неправильно. Тогда у меня не было пользователей, я не знал, кому нужен мой продукт. Я нацеливался на все рынки сразу. Все ошибки, которые можно сделать в лендинге, были и в моём сайте. Единственное, что я сделал правильно, — кнопку регистрации.

Сайт Mixpanel в 2012 году

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

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

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

Как определить ясность продукта:

Подсчитать, сколько пользователей нажали на кнопку «Подписаться». Подписка ещё не значит, что люди будут пользоваться продуктом. Это значит: «Хорошо, мне интересно. Пожалуй, посмотрю это приложение». Это много может сказать о том, важно ли людям то, что вы делаете.
Полезно узнать, сколько пользователей после перехода на сайт активно с ним взаимодействуют. Например, вместо кнопки «Назад» они нажали на графики сегментации или воронки. Я знаю много b2b-компаний. Часто посетители их сайтов кликают на расценки вверху страницы. И это хороший показатель того, что у вас есть что-то стоящее.
В b2c-бизнесе зачастую гораздо больше пользователей, здесь есть возможность провести A/B-тестирование. Надо как можно больше экспериментировать, тестировать свой контент и выяснять, на что люди лучше реагируют.

Легко ли пользоваться продуктом

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

Но если вы своим основным инструментом не попали в точку, то шанса продемонстрировать остальные «фишки» просто не будет. Например, молодому сайту просто не нужна кнопка «Забыл пароль», так как зарегистрировавшихся пользователей ещё очень мало.

Однажды я разговаривал с экспертом YC Робби Уолкером. Он сказал, что в PowerPoint раньше не было даже кнопки «Сохранить», потому что никто из пользователей не спрашивал: «Слушайте, а могу я это сохранить?». То есть они хотели сначала посмотреть, будет ли кто-то вообще пользоваться презентациями PowerPoint.

И первые полтора года у нас в Mixpanel не было кнопки «Забыл пароль», потому что это было не в приоритете.

Со временем мы стали получать много запросов от пользователей. Когда я проверил журнал действий, то увидел, что люди переходили на вкладку регистрации раз пять. Меня это удивило. Я подумал, что это потому, что они не могут зарегистрироваться. В итоге мы сделали кнопку. Если бы не ввели эту функцию, то просто потеряли бы клиентов.

К слову, некоторые даже после этого не нажимали кнопку «Забыл пароль», они продолжали попытки ввода. Для этого мы сделали как в Facebook — после третьего неудачного раза входа на сайт на почту приходит письмо: «Перейдите по ссылке, чтобы зарегистрироваться. Не беспокойтесь за пароль или смену пароля, просто залогиньтесь».

Прекрасный пример удобного в использовании продукта — Google. Вы открываете сайт, печатаете и сразу же получаете результат.

Более сложный пример — Airbnb. Там потребуется около десяти шагов, чтобы найти желаемое. Мы работали с Airbnb какое-то время, помогали им оптимизировать сайт для пользователя.

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

Airbnb нужно было понять:

как описать предложение, что людям полезно;
как сделать процесс отбора и бронирования быстрее и легче.

Сейчас сайт Airbnb выглядит так. Теперь достаточно ответить на простые вопросы на главной странице — и всё.

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

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

Последнее — скорость. Как быстро пользователь «войдёт» в продукт. Это многие не проверяют. Этот показатель зависит от вида бизнеса. Иногда медленно — это хорошо. В Mixpanel мы над этим долго думали.

Возвращаются ли пользователи

Это одна из метрик, которую часто игнорируют большинство стартапов. Из-за этого умирают многие компании. Продемонстрирую на графике.

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

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

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

Сколько продуктов вы используете каждый день? Если вы просто посмотрите на телефон и различные приложения на экране, то поймёте, что это очень жёсткая метрика. Мы заметили, что есть чёткая связь между этим показателем и количеством отказов — пользователи перестают платить за продукт.

Если ваш отток выручки составляет 7% в месяц, вы можете подумать: «Здорово, у меня остаётся 93% всей суммы». Проблема в том, что это 7% только ежемесячного оттока, и если вы посчитаете отток за 12 месяцев, то окажется, что вы теряете 58% своего дохода в год.

Как только ваш основной доход достигает высокого уровня, становится действительно сложно успевать всё, и у вас выходит такая длинная дуга, похожая на эффект плавника акулы. В итоге получается медленный рост на протяжении четырёх или пяти лет, если компания способна получать новых пользователей.

Обратная связь

Когда у нас было около десяти клиентов, я их всех просто добавил в общий чат в Google+. Сейчас можно использовать любой другой мессенджер. Тогда мы использовали вертикальную воронку продаж, но обратили внимание на конкурентов, у которых воронка горизонтальная.

Чтобы решить, какой вариант лучше, я сделал грубые версии нескольких интерфейсов и опросил пользователей в чате. Большинство проголосовало за горизонтальную воронку.

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

Для этого я применял одну уловку. Мы предоставляли сервис за деньги. Если клиент говорил, что продукт его не устраивает, то возвращали деньги, позволяя пользоваться бесплатно. Так как обратная связь была важнее прибыли.

Разговор с клиентами не всегда может помочь решить проблему, но порой от людей вы получите больше информации, чем от графиков и схем. Записывайте отзывы пользователей и анализируйте их.

Метрика «полярной звезды»

Одна из самых больших ошибок, связанных с аналитикой, это всё усложнять. Например, ввести сложную систему аналитики с 30 показателями. У меня тоже был такой опыт, и это не сработало, в итоге ты просто не понимаешь, за чем следить. Такой подход только запутывает.

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

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

Распечатайте результаты и повесьте в офисе, пусть все смотрят и думают: «Показатель упал. Что нам с этим делать?». Понять это — самое сложное. Здесь вы начнёте измерять воронку и анализировать, что удерживает, привлекает пользователей. Но не пытайтесь объять необъятное.

Общественная онлайн-школа стартапов Russol открыла приём заявок стартапов на осенний поток акселерации и запись на публичные лекции. На лекциях узнаете, как и с чего стартовали ИТ-компании вроде YouDo, Kabanchik, «Флакон», Cinemood. Поймёте, где вы сами допускаете ошибку и какой опыт можно перенять, создавая и масштабируя бизнес, в том числе в другие страны. Подав заявку на экспертную прокачку, узнаете, что о вашей идее и стартапе думают эксперты, повысите шансы: получить инвестиции, стать зрелыми для фондов вроде Y Combinator, получить дополнительный PR, познакомиться с коллегами, найти ментора.

javascript — Как отменить стандартное действие при нажатии на кнопку «Назад» сразу после открытия страницы

Представим что у вас получилось сделать то, что вы хотите. То есть сломать поведение кнопки «Назад» когда сайт только открыт, чтобы вместо возврата этак кнопка выводила сообщение об ошибке как в вашем примере. Теперь представьте себе ощущения человека, зашедшего на ваш сайт, например, из поиска.

Человек видит что сайт ему не подходит и жмёт кнопку чтобы вернуться к результатам поиска, но… Кнопка не работает и перехода обратно к результатам поиска не происходит. Очевидно, это неожиданное и неприятное поведение браузера.

Разработчики браузеров тоже так считают, потому, например, в Хроме начиная с версии 75 такое поведение, как вы хотите, было запрещено.

Хорошо, представим себе что вы хотите такое поведение не из каких-то скверных мотивов, а по какой-то действительно нужной причине (какой — в исходном вопросе не объяснено), то можно сделать следующее:

На самой странице нарисовать кнопки вперед и назад. Эти кнопки будут использовать history.back и forward, а поведение этих кнопок вы будете полностью контролировать. Затем можно в каждой ссылке передавать какой-то код, и возвращать ошибку если открыта страница с кодом меньшим, чем последний использованный. Надо ли говорить что это ломает браузер и весьма неприятно для пользователей, хотя я, к сожалению, видел такие сайты в природе.
Характерной причиной желать такого поведения будет повторная отправка POST запроса по возврату. Т.о., например, в БД будет создаваться дубль той же самой записи. Решением этой проблемы будет переадресовывать пользователя с кодом 302 на другую или ту же страницу с результатами после обработки POST запроса. Тогда кнопка «Назад» не будет приводить к повторному запросу.
Если переходы идут внутри вашего сайта, то одним решение будет взять на себя обработку перехода по внутренней ссылке, то есть загружать новую страницу в фоне и подменять отображаемый вид. Ссылку в адресной строке тоже нет проблемы поменять при переходе по такой ссылке. Тогда кнопка «Вернуться» будет делать всё, что вы хотите. Для пользователя будет выглядеть будто всё работает как обычно, но на деле он будет работать с одностраничным приложением, которое меняет адресную строку как оно считает будет удобно.

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

Создать кнопки Вперед — Назад для uCoz

Здесь как можно понятно расскажу как вывести кнопки вперед и назад на переключателей страниц. Которые будут стоять в низу под материалом и работать. Думаю многие замечали сайты, где к переключателям страниц по обоим сторонам стоят такие же кнопки, только с названием вперед и назад. Это может сделать каждый на сайте системы uCoz, где нам совершенно не пригодятся скрипты для этого, а только мы в админ панели поменяем коды и потом пропишем заветные слова, которые и появятся на сайте.

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

Этот отвечает за вывод кнопок вверху:

Код

<td align=»right»><?if($PAGE_SELECTOR$)?><!—<s3015>—>Страницы<!—</s>—>: $PAGE_SELECTOR$<?endif?></td>

Этот код наоборот выводит кнопки в самом низу:

Код

<?if($PAGE_SELECTOR1$)?><div>$PAGE_SELECTOR1$</div><?endif?>

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

Код

<?if($PAGE_SELECTOR$)?><div>$PAGE_SELECTOR$</div><?endif?>

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

Все можно посмотреть на изображение которое представлено.

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

Нам нужны знаки « » и напротив их наживаем изменить и пишем, Вперед и Назад смотрим.

Не забываем сохранить. И потом смотрим кнопки и у вас появятся надписи, если идете в перед, то надпись назад появляется, если назад идете по кнопкам, то вперед появляется.

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

%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b8 %d0%bd%d0%b0%d0%b7%d0%b0%d0%b4 PNG, векторы, PSD и пнг для бесплатной загрузки

схема бд электронный компонент технологии принципиальная схема технологическая линия

2000*2000

green environmental protection pattern garbage can be recycled green clean

2000*2000

дизайн плаката премьера фильма кино с белым вектором экрана ба

1200*1200

ма дурга лицо индуистский праздник карта

5000*5000

набор векторных иконок реалистичные погоды изолированных на прозрачной ба

800*800

be careful to slip fall warning sign carefully

2500*2775

ценю хорошо как плоская цвет значок векторная icon замечания

5556*5556

чат комментарий образование синий значок на абстрактных облако сообщение

5556*5556

сердце сердцебиение любовь свадьба в квартире цвет значок векторная icon

5556*5556

blue series frame color can be changed text box streamer

1024*1369

Ручная роспись борода ба zihu большая борода

1200*1200

Буква c с логотипом дизайн вдохновение изолированные на белом ба

1200*1200

в первоначальном письме ба логотипа

1200*1200

happy singing mai ba sing self indulgence happy singing

2000*2000

капсулы или пилюли витамина b4 диетические

2000*2000

облака комиксов

5042*5042

вектор поп арт иллюстрацией черная женщина шопинг

800*800

церковь

5556*5556

99 имен аллаха вектор al baith асма husna

2500*2500

в поход местонахождение им значок на прозрачных ба карта план трек

5556*5556

индийский фестиваль счастливого карва чаут каллиграфия хинди текст ба

5041*5041

в первоначальном письме bd логотипа

1200*1200

буква bf фитнес логотип дизайн коллекции

3334*3334

Векторная иллюстрация мультфильм различных овощей на деревянном ба

800*800

bd письмо 3d круг логотип

1200*1200

малыш парень им значок на прозрачных ба новорожденного весы вес

5556*5556

деньги долг финансы помочь кредит им значок на прозрачных ба

5556*5556

в первоначальном письме bd шаблон векторный дизайн логотипа

1200*1200

Счастливого Дивали традиционного индийского фестиваля карта с акварелью ба

5041*5041

простой ба дизайн логотипа вектор

8542*8542

в первоначальном письме bf логотип шаблон векторный дизайн

1200*1200

аркада консоли игры машина играть в соответствие значок на прозрачных ба

5556*5556

в первоначальном письме bd логотип шаблон

1200*1200

три группы 3d реалистичное декоративное яйцо с золотым цветом на гнезде bd с золотым всплеском текстовый баннер

5000*5000

в первоначальном письме bd шаблон векторный дизайн логотипа

1200*1200

ба конфеты шоколад

800*800

в первоначальном письме шаблон векторный дизайн логотипа

1200*1200

желтые глаза напуганы комикс мультфильм

5000*5000

вектор абстрактный баннер дизайн веб шаблон коллекции веб ба

1200*1200

первый логотип bf штанга

4500*4500

первый логотип bf штанга

4500*4500

логотип fb или bf

2223*2223

круглая буквица bd или db дизайн логотипа вектор

5000*5000

коробка и объектив камеры значок дизайн вдохновение изолирован на белом ба

1200*1200

Закир навид ашик ба урду каллиграфия бесплатные eps и png

5000*5000

концепция образования в выпускном вечере баннер с цоколем и золотой ба

6250*6250

ветер торнадо катушка дизайн логотипа вдохновение изолирован на белом ба

1200*1200

фб письмо логотип

1200*1200

instagram наборы акций бизнес плоская линия заполнена значок вектора ба

5556*5556

женский символ гендерного бизнес плоская линия заполнена значок вектора ба

5556*5556

4 шаблона дизайна, которые нарушают ожидания кнопки «Назад» — 59% сайтов ошибаются — Статьи — Baymard Institute

«Как мне вернуться? Просто нажмите «Назад». Навигация, если честно, это не очень хорошо. И теперь это вернуло меня к женскому. ОК. Не нравится «.

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

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

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

В этой статье мы делимся результатами нашего крупномасштабного исследования юзабилити и обсуждаем наши выводы относительно:

Как пользователи ожидают, что кнопка «Назад» будет работать
Проблема 1. Оверлеи и лайтбоксы (37% сайтов этого не делают)
Проблема 2. Фильтрация и сортировка (27% сайтов этого не делают)
Выпуск 3: Кассы Accordion
Выпуск 4: Навигация от страницы продукта к списку продуктов
5 других представлений, на которые влияет кнопка «Назад»
Простое решение всего этого

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

Как пользователи ожидают, что кнопка «Назад» будет работать

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

Как правило, мы наблюдали, что если новое представление существенно отличается визуально или если новое представление концептуально ощущается как новая страница, оно будет восприниматься как единое целое — независимо от того, является ли это новой страницей технически или нет. Это имеет последствия для того, как сайт должен обрабатывать общие элементы поиска и исследования продуктов, такие как наложения, фильтрация и сортировка. Например, если пользователи нажимают ссылку и 70% представления меняется на что-то новое, большинство будет воспринимать это как новую страницу, даже если технически это все та же страница, только с загруженным новым представлением.

Ожидания пользователя кнопки «Назад» в Walmart не оправдались. Путь пользователя был «список продуктов> страница продукта> подстраница обзоров», затем она нажала на странице «Назад» . Это вернуло ее с подстраницы обзоров на страницу продукта. Затем она провела пальцем по краю экрана, чтобы вернуться к списку продуктов — только для того, чтобы вернуться на подстраницу обзоров. В замешательстве она снова нажала ссылку «Назад» на странице и вернулась на страницу продукта.Теперь она забыла о своем первоначальном намерении вернуться к списку продуктов и вместо этого начала просматривать перекрестные продажи. Невыполнение ожиданий пользователей кнопки «Назад» может вызвать серьезную дезориентацию и сбить с толку пользователей.

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

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

Четыре самых распространенных недостатка кнопки «Назад»

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

Оверлеи и лайтбоксы (37% сайтов этого не делают)
Фильтрация и сортировка (27% сайтов этого не делают)
Касса с аккордеонами
Возврат к списку продуктов со страницы продуктов

1) Оверлеи и лайтбоксы (37% сайтов этого не делают)

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

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

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

Стоит отметить, что вероятность использования пользователем кнопки «Назад» для выхода из оверлея зависит от того, насколько заметным является предоставленный сайтом элемент «Закрыть» (например, «X» для выхода из оверлея). Очень заметные элементы «Закрыть», вероятно, будут использоваться пользователями чаще, чем незаметные элементы «Закрыть», и, таким образом, нагрузка на кнопку «Назад» снижается, когда наложения имеют очень заметные элементы «Закрыть». Конечно, пользователи все равно должны выходить из оверлея, нажимая «Назад», даже если он снабжен заметным элементом «Закрыть».

«Я не знаю, как выйти из этой… кнопки« Назад »? Так я вернулся в раздел поиска толстовок [список продуктов] ». Пользователь попытался выйти из оверлея галереи изображений, нажав кнопку «Назад» (первое изображение), но вместо этого он вернулся к списку продуктов (второе изображение). (Предоставленная сайтом ссылка «Назад» была фактически скрыта рекламой «Установить приложение».)

Во время тестирования мобильных устройств мы заметили, что пользователям сложнее закрывать оверлеи с помощью предоставленных сайтом элементов «Закрыть», часто из-за проблем с областью нажатия, при этом «X» часто помещается близко к краю экрана или «Установить приложение », Закрывающее элемент« Закрыть »(см. Нашу статью о том, как сделать акцент на рекламе типа« Установить приложение »или полностью отказаться от нее).Таким образом, мобильных пользователей с большей вероятностью будут использовать кнопку «Назад» для закрытия оверлеев по сравнению с пользователями настольных компьютеров, и еще более важно, чтобы их ожидание выхода из оверлея поддерживалось при нажатии «Назад».

2) Фильтрация и сортировка (27% сайтов этого не делают)

Пользователь Amazon нажимает «Назад» после применения 3 фильтров (первое изображение). При этом будет удален последний примененный фильтр, и теперь показано, что применены 2 фильтра (второе изображение). Нажав «Назад» после применения фильтров, вы должны начать удаление примененных фильтров.

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

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

«Думаю, я вернусь…» Пользователь JBL отсортировал список продуктов наушников по цене от низкой к высокой (первое изображение).Изучив продукт на странице продукта, она решила, что хочет продолжить просмотр, и нажала, чтобы вернуться к списку продуктов (второе изображение). Тем не менее, она коснулась дважды: это привело к тому, что ее вернули к списку продуктов, а также изменилось направление сортировки, но направление сортировки было изменено только на задней панели, так как направление сортировки по-прежнему было «Цена: (От низкой к высокой. ) ” (третье изображение). По ее словам, «Фильтр [направление сортировки] убран, хотя он говорит, что все еще работает … Они не в порядке фильтра [сортировки] … Те, на которые я смотрел, я не могу их найти. Такие технические ошибки были довольно частыми во время тестирования и вызывали у пользователей сомнения в отношении сортировки списка продуктов.

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

Если фильтрация или сортировка выполняется в совершенно отдельном интерфейсе — что очень часто встречается на мобильных сайтах — очень важно, чтобы нажатие «Назад» в интерфейсе действовало как ссылка «Выход». (т. Е. Аналогично выходу из оверлея) . То есть, после нажатия кнопки «Назад» в интерфейсе пользователи должны вернуться к тому виду, который они просматривали непосредственно перед открытием интерфейса фильтрации или сортировки.

3) Аккордеонная касса

Вопреки тому, что можно было подумать, оформление заказа в виде гармошки не воспринимается как оформление на одну страницу с несколькими свернутыми разделами. Вместо этого подавляющее большинство пользователей воспринимают их как многоэтапный процесс с резюме (подробнее о том, как пользователи воспринимают оформление в аккордеоне). Это может оказаться проблематичным на сайтах, где шаги аккордеона технически реализованы как одна страница с одним 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 () , чтобы убедиться, что ваш сайт вызывает поведение кнопки «Назад», которое соответствует ожиданиям пользователя. В частности, убедитесь, что любое визуальное изменение, которое пользователь будет воспринимать как новую страницу, добавлено в его историю просмотров, независимо от того, технически это новая страница или нет.Это включает, но не ограничивается:

Оверлеи / лайтбоксы
Фильтрация и сортировка выборок
Ступеньки кассы «Аккордеон»
Расположение в списке продуктов

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

Многоступенчатые процессы на странице
Расширение содержания
Анкерные звенья
Варианты на странице продукта

Усеченное содержимое, как правило, никогда не должно быть реализовано как новая «страница» с использованием истории .pushState () .

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

В этой статье представлены результаты исследования только 1 из 580+ рекомендаций по UX в Baymard Premium — получите полный доступ, чтобы узнать, как создать «современную» систему навигации для электронной коммерции.

Создавайте с учетом потребностей Интернета. Кнопка «Назад», дизайн URL, клавиатура… | Автор: Хлоя Сандерсон

Помимо навигации с помощью кнопок «назад / вперед», URL-адреса могут предоставлять другие полезные функции. Их можно использовать как способ добавить страницу в закладки для последующего использования или поделиться ею с кем-то другим.При таком использовании они становятся частью опыта и тем, что мы можем разработать.

Связывание с определенным контентом

Во-первых, вы хотите убедиться, что URL-адрес, который сохраняется / передается, действительно ссылается на конкретный контент, который намеревается пользователем.

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

Примером, который может быть вам знаком, является возможность ссылки на конкретную временную метку в видео Youtube:

Уникальный и понятный человеку

Структура самого URL-адреса — это то, что мы можем спроектировать, и в идеале мы хотим найти баланс между чем-то уникальным и понятным для человека.

Например, Trello использует 8-значный идентификационный код для каждой доски. 8-значный буквенно-цифровой код может иметь более 2 триллиона возможных комбинаций .Это помогает гарантировать, что каждая доска Trello может безопасно иметь уникальный идентификатор на многие годы вперед (даже с сотнями старых досок, которые у меня пылятся).

Однако сам по себе этот код, хотя и работает, не очень удобен для пользователя. Было бы трудно узнать, на какую доску она ссылается, просто взглянув на URL:

. Чтобы обойти это, Trello добавляет название доски после идентификатора. Это позволяет легко увидеть, куда пойдет ссылка. Они также имеют хорошее форматирование для работы с пробелами и специальными символами, которые не принимаются в URL.

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

Идентификатор — это то, что приведет вас на нужную доску, название доски — просто для того, чтобы сделать URL-адреса более удобными для пользователя. Идеальное партнерство уникального и понятного человеку!

Дизайн веб-сайта — Должен ли веб-интерфейс полагаться на кнопку «Назад» в браузере?

Веб-приложение должно всегда стремиться к совместимости с кнопкой «Назад» в браузере.То есть использование кнопки «Назад» должно приводить к детерминированным результатам в этом приложении, которые соответствуют ожидаемому поведению (глобальная согласованность).

Типичный сценарий, который приходит на ум, — это сайт электронной коммерции. у которого есть список продуктов. Пользователь нажимает на один из продуктов, чтобы просмотреть страницу с подробностями. Затем, просмотрев детали, они хотели бы чтобы вернуться к списку, чтобы щелкнуть другой продукт и просмотреть сведения о нем. Если пользовательский интерфейс предполагает, что пользователь будет использовать кнопку «Назад» в браузере или должен веб-сайт предоставляет ссылку или кнопку, которая позволяет пользователям «Вернуться к Ваши результаты «, оставив в качестве альтернативы кнопку» Назад «в браузере. вариант?

Однако веб-приложение, как правило, не должно

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

К сожалению, одна из основных причин этого заключается в том, что некоторые люди боятся нажать кнопку возврата в определенных веб-приложениях из-за сломанного или непоследовательного поведения, связанного с управлением браузером / состоянием, которое встречается во многих тяжелых веб-приложениях AJAX, где использование кнопки возврата может не приведет к тому эффекту, которого ожидал человек, использующий его.

Во-вторых, если страница была создана из новой вкладки (или закладки!), Может не быть кнопки возврата. Хотя в идеале у человека, использующего приложение, должна быть открыта исходная вкладка, если вы хотите, чтобы у был доступ к странице, с которой он пришел, убедитесь, что предоставили ему возможность сделать это из контекста страницы, на которой он находится. в настоящее время включен.

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

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

Например, подумайте, не возникнет ли у кого-то неуверенность в том, что может сделать следующее:

Назад (Назад к , где ? Также относится к кнопке возврата в браузере, потому что все мы знаем, что он не всегда делает то, что мы ожидаем, в зависимости от веб-приложение, и люди не знают, что будет делать ваше приложение , пока они попробуй, что может быть моментом колебаний)
Вернуться к списку (который списки? если я перейду сюда из закладки, могу ли я понять, что я это привело меня сюда?)
Вернуться к [связанной категории продуктов] (Что ж, это хорошо, это функционально, и не стоит беспокоиться о том, что быть детерминированным, но, вероятно, должен быть представлен в другом месте)
Вернуться к январской распродаже. (эй! Это то, на что я смотрел, когда приехал сюда! Он достаточно конкретен, чтобы я мог ожидать, что в конечном итоге… там, где я ожидал бы пойти) (также он соответствует карте контекста навигации, привел меня на эту страницу)

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

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

Более того, это дает вам дополнительное поведение, выходящее за рамки того, что обязательно доступно только при нажатии кнопки «Назад». Хотя кнопка «Назад» должна просто работать, этот элемент управления присутствует, если кто-то откроет страницу два месяца спустя. Если они все же нажмут на нее, вы сможете открыть страницу, связанную с «Событием январской распродажи», но с сообщением вверху о том, что мероприятие окончено, мы сожалеем, что вы пропустили наши потрясающие предложения, но посмотрите [ эти новые события / продукты / и т. д.].

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

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

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

Дизайн веб-сайта

— понимают ли пользователи кнопку браузера «Назад»?

Что сказал Якоб

Еще в 1999 году (или 1996 году, если включить проблему «фреймов»), «ошибкой веб-дизайна» номер один Якоба Нильсена было «сломать кнопку возврата»:

1.Нарушение или замедление кнопки возврата
Кнопка «Назад» — это спасательный круг для веб-пользователя и вторая по популярности функция навигации (после перехода по гипертекстовым ссылкам). Пользователи с радостью знают, что они могут попробовать все, что есть в Интернете, и всегда могут быть спасены одним или двумя щелчками мыши на Назад, чтобы вернуть их на знакомую территорию. За исключением, конечно, тех сайтов, которые нарушают работу Back, совершив один из этих дизайнерских грехов:
открытие нового окна браузера (см. Ошибку №2) с использованием немедленного перенаправления: каждый раз, когда пользователь нажимает кнопку «Назад», браузер возвращается на страницу, которая перенаправляет пользователя в нежелательное место. предотвращает кеширование таким образом, что для перехода назад требуется новое обращение к серверу; вся гипертекстовая навигация должна быть меньше секунды, и это удваивается для возврата

Очевидно, что пользователи не только понимают кнопку «Назад», но и если вы запутаетесь с ней, это главная причина для людей запутаться и сбиться с пути.Исходя из этого, вы можете экстраполировать, что если бы кнопка «Назад» была такой «неприкосновенной» 12 лет назад, то сегодня, в 2011 году, она была бы еще более неприкосновенной.

Исследование использования кнопки возврата

Ниже приведены некоторые исследования удобства использования, посвященные различным аспектам использования кнопки «Назад», которые я обнаружил:

В разделе «Навигация по хлебным крошкам: дальнейшее исследование использования» (опубликовано в «Новости юзабилити», том 5, выпуск 2, август 2003 г.) исследуется использование навигации по хлебным крошкам. Доступны некоторые данные о том, сколько пользователей использовали кнопку «Назад» вместо других параметров навигации:
Обратите внимание на резкую разницу между использованием «Назад» и «Вперед».
Исследование использования главного окна Firefox (июль 2010 г.) показало, что 93,1% пользователей используют кнопку «Назад» в качестве «основного средства навигации» по сравнению с другими кнопками навигации, предлагаемыми браузером
Повторное посещение веб-страницы
: последствия долгосрочного исследования использования браузера, проведенного компанией CHI 2007, показало, что 14,3% действий пользователя, приведших к посещению страницы, были результатом взаимодействия пользователя с кнопкой «Назад» (стр. 600), а 31% — «повторные посещения» были вызваны кнопкой «Назад».Это исследование предлагает некоторые полезные сведения о подробном использовании кнопки «Назад», например, о раскрывающемся меню, предлагаемом для кнопки «Назад» в некоторых браузерах, а также о контекстном использовании кнопки «Назад» после отправки формы. Он также обнаружил, что кнопка «Назад» часто используется в краткосрочной перспективе, но в долгосрочной перспективе прямая навигация происходит чаще (не неожиданно, но хорошо иметь это исследование в качестве ориентира).
Описание стратегий просмотра во всемирной паутине (PDF) содержит некоторые детали исследования, проведенного в 1993 году с использованием X-Mosaic, и показывает 40.6% навигации происходит с помощью кнопки «Назад» (стр. 3).
Исследование просмотра с вкладками (CHI 2010) предполагает, что пользователи открывают страницы в новых вкладках и используют их для «повторного посещения» чаще, чем кнопку «Назад», что является интересной находкой:
для ¾ участников, повторное посещение на основе вкладок использовалось чаще, чем кнопка возврата
[…]
Наконец, мы поговорили о причинах, по которым наши участники сказали, что они предпочитают использовать вкладки, а не кнопку «Назад».Их было:
- Вкладки быстрее или эффективнее (7/21)
- Вкладки лучше, проще и удобнее (6/21)
- более предсказуемы, чем кнопка «Назад» (6/21), потому что вы не всегда знаете, сколько раз вам придется нажимать кнопку «Назад», чтобы вернуться на свою страницу.
- Вкладки оставляют страницу «как есть» (6/21), включая любые данные, введенные в форму, и состояние прокрутки страницы. Это не всегда верно с кнопкой «Назад».

Кнопки возврата и ожидание пользователя

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

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

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

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

При использовании этих устройств на своем сайте необходимо убедиться, что кнопка «Назад» переводит пользователя на страницу, которую он просматривал последний раз, или что вы предоставляете другие средства навигации для возврата на исходную страницу без потери пользователем данных или их подшипники.К счастью, в HTML5 есть функция, которая помогает в этом. Она называется функцией history.pushState () и в основном облегчает изменение URL-адреса на сайте без перезагрузки страницы. Это незаметно и незаметно для пользователя, но полностью оправдывает их ожидания, что они вернутся на последнюю страницу, на которую, по их мнению, они смотрели.

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

10 главных ошибок веб-дизайна 1999 г.

10 основных ошибок дизайна, выявленных мною в 1996 г., по-прежнему вредны для удобства использования в Интернете и до сих пор встречаются на многих веб-сайтах. Так что в этом смысле за последние три года мало что изменилось.

Но, к сожалению, новых веб-технологий и новых приложений для Интернета представили совершенно новый класс ошибок.Вот 10 худших.

1. Обрыв или замедление кнопки

Назад

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

За исключением, конечно, тех сайтов, которые нарушают Назад , совершая один из этих дизайнерских грехов:

открытие нового окна браузера (см. Ошибку № 2)
с использованием немедленного перенаправления : каждый раз, когда пользователь нажимает Назад , браузер возвращается на страницу, которая перенаправляет пользователя в нежелательное место
предотвращает кэширование , так что для навигации Back требуется новое обращение к серверу; вся гипертекстовая навигация должна быть меньше секунды, и это удваивается для возврата с возвратом

2.Открытие нового браузера Windows

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

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

(См. Также специальные инструкции по открытию файлов PDF в новых окнах.)

3. Нестандартное использование виджетов графического интерфейса

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

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

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

В настоящее время самые серьезные нарушения согласованности в сети обнаруживаются при использовании виджетов GUI, таких как переключатели и флажки.Соответствующее поведение этих элементов дизайна определено в рекомендациях по проектированию рабочего стола Windows, стандарте интерфейса пользователя Macintosh и стандарте пользовательского интерфейса Java. Какой из этих стандартов следует придерживаться, зависит от платформы, используемой большинством ваших пользователей (хорошая ставка: Windows), но это вряд ли имеет значение для самых простых виджетов, поскольку все стандарты имеют почти идентичные правила. Обновление: самые полезные стандарты проектирования платформ показывают, как должны себя вести компоненты, с примерами: стандарты веб-дизайна США и рекомендации Google по дизайну материалов.

Например, правила для переключателей гласят, что они используются для выбора или среди набора параметров, но выбор параметров не вступает в силу, пока пользователь не подтвердит выбор, нажав кнопку ОК. К сожалению, я видел много веб-сайтов, где переключатели используются в качестве кнопок действий, которые сразу дают результат при нажатии. Такие бессмысленные отклонения от общепринятых стандартов интерфейса затрудняют использование Интернета.

(См. Также: Нестандартные элементы управления графическим интерфейсом были одной из самых больших проблем удобства использования, выявленных при тестировании 46 веб-приложений на Flash.Для получения последней информации см. Наш однодневный семинар по разработке приложений для Интернета и настольных компьютеров).

4. Отсутствие биографий

Мои первые веб-исследования в 1994 году показали, что пользователи хотят знать людей, стоящих за информацией в сети. В частности, биографии и фотографии авторов помогают сделать Интернет менее безличным и повысить доверие. Личность и точка зрения часто побеждают анонимные сообщения, передаваемые по сети.

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

Особенно плохо, когда авторство превращается в ссылку mailto: вместо ссылки на биографию автора. Две причины:

Читатель гораздо чаще хочет знать больше о авторе (включая поиск других статей автора), чем читатель хочет связаться с автором — конечно, контактная информация часто бывает Хорошая часть биографии, но она не должна быть первичной или единственной информацией об авторе.
Он нарушает правила Интернета, когда щелчок по синему подчеркнутому тексту порождает сообщение электронной почты вместо активации гипертекстовой ссылки на новую страницу; такая несогласованность снижает удобство использования, делая Интернет менее предсказуемым.

5. Отсутствие архивов

Старая информация — это часто хорошая информация, которая может быть полезна читателям. Даже когда новая информация более ценна, чем старая информация, почти всегда есть или ценности для старой информации, и держать ее в сети очень дешево.По моим оценкам, наличие архивов может добавить около 10% стоимости работы сайта, но повысить его полезность примерно на 50%.

Архивы также необходимы как единственный способ устранить ротацию ссылок и тем самым побудить другие сайты ссылаться на вас.

6. Перенос страниц на новые URL-адреса

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

7. Заголовки, не имеющие смысла вне контекста

Заголовки и другой микроконтент для Интернета должны быть написаны совершенно иначе, чем для старых носителей: это элементов, требующих действий, , которые служат элементами пользовательского интерфейса и должны помогать пользователям ориентироваться.

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

Сообщите пользователям, что находится на другом конце ссылки, без каких-либо догадок.
Защитите пользователей от перехода по ссылке, если их не интересует целевая страница (так что никаких дразнилок — они могут сработать один или два раза для увеличения трафика, но в конечном итоге они заставят пользователей покинуть сайт и снизят доверие к нему) .

8. Прыгая в самую последнюю интернет-модную словечку

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

Push, сообщество, чат, бесплатная электронная почта, 3D карты сайта, аукционы — вы знаете, что делать.

Но волшебной пули нет. Большинство модных словечек в Интернете имеют определенное содержание и могут принести небольшую пользу тем немногим веб-сайтам, которые могут их правильно использовать. В большинстве случаев использование последнего модного слова может повредить большинству веб-сайтов.Альтернативные издержки высоки из-за сосредоточения внимания на увлечении вместо того, чтобы тратить время, деньги и пропускную способность управления на улучшение базового обслуживания клиентов и удобства использования.

В следующем месяце появится новое модное слово. Рассчитывай на это. Но не спешите с этим только потому, что Юпитер пишет об этом отчет.

9. Медленное время ответа сервера

Медленное время отклика — худшее нарушение юзабилити в Интернете: в моем обзоре исходных «10 основных» ошибок у основных сайтов был поистине ужасающий показатель нарушений в 84% по отношению к правилу времени отклика.

Раздутый графический дизайн был изначальным нарушителем в области времени отклика. На некоторых сайтах все еще слишком много графики или слишком большая графика; или они используют апплеты там, где простой или динамический HTML помогут. Так что я не отказываюсь от своего крестового похода, чтобы минимизировать время загрузки.

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

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

10. Все, что похоже на рекламу

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

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

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

Баннерная слепота означает, что пользователи никогда не зацикливаются на чем-либо, что выглядит как рекламный баннер из-за формы или положения на странице.
Избегание анимации заставляет пользователей игнорировать области с мигающим или мигающим текстом или другой агрессивной анимацией.
Очистка всплывающих окон означает, что пользователи закрывают всплывающие окна Windoids еще до того, как они будут полностью отрисованы; иногда с большой жестокостью (своего рода триумф возвращения в GeoCities).Я не хочу полностью запрещать всплывающие окна, поскольку они иногда могут быть продуктивной частью интерфейса, но я советую убедиться, что существует альтернативный способ использования сайта для пользователей, которые никогда не видят всплывающие окна.

Мы обсуждаем гораздо более широкий круг вопросов юзабилити на дневных курсах обучения на UX Conference.

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

Браузер Chrome для предотвращения злоупотреблений веб-сайтами кнопкой «Назад»

Независимо от того, какой веб-браузер вы используете, мы все полагаемся на кнопку «Назад», чтобы вернуться на ранее посещенную страницу.Но некоторые веб-сайты используют кнопку «Назад», чтобы не дать вам уйти. Это бесит, но скоро браузеры на основе Chromium уйдут в прошлое.

Как сообщает Naked Security, разработчики браузера с открытым исходным кодом Chromium, на основе которого построен Google Chrome (и новый браузер Edge), вводят новое поведение, чтобы не дать веб-сайтам нарушить функциональность кнопок.

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

Второй метод называется манипуляцией с историей. Кнопка «Назад» использует историю посещенных вами страниц, чтобы узнать, какую предыдущую страницу загружать. В эту историю можно добавить несколько команд pushState (благодаря HTML5), что останавливает загрузку предыдущей страницы. Эти команды pushState можно складывать в стопку, поэтому не имеет значения, сколько раз и как быстро вы нажимаете кнопку «Назад», они никогда не покинут страницу, на которой вы находитесь.

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

Кнопка назад для сайта: Полезные HTML кнопки — HTML кнопки назад и добавить в избраное

Кнопка назад на сайте

Кнопки «Наверх», «Назад», «Вниз» на jQuery, как вконтакте

1. Кнопка «Наверх-Назад» (на предыдущую страницу)

HTML

CSS

jQuery

2. Кнопка «Наверх-Вниз» (обратно в ту часть страницы, где был переход наверх)

HTML и CSS

jQuery + плагин scrollTo

Миша

«Кнопка “Назад” в браузере — ваш враг» — Образование на vc.ru

javascript — Как отменить стандартное действие при нажатии на кнопку «Назад» сразу после открытия страницы

Создать кнопки Вперед — Назад для uCoz

%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b8 %d0%bd%d0%b0%d0%b7%d0%b0%d0%b4 PNG, векторы, PSD и пнг для бесплатной загрузки

4 шаблона дизайна, которые нарушают ожидания кнопки «Назад» — 59% сайтов ошибаются — Статьи — Baymard Institute

Как пользователи ожидают, что кнопка «Назад» будет работать

Четыре самых распространенных недостатка кнопки «Назад»

1) Оверлеи и лайтбоксы (37% сайтов этого не делают)

2) Фильтрация и сортировка (27% сайтов этого не делают)

3) Аккордеонная касса

4) Возврат к списку продуктов со страницы продуктов

5 других просмотров, на которые влияет кнопка «Назад»

1) Многоступенчатые процессы на странице

2) Расширение содержимого

3) Якорные звенья

4) Усеченное содержимое

5) Варианты на странице продукта

Решение

Создавайте с учетом потребностей Интернета. Кнопка «Назад», дизайн URL, клавиатура… | Автор: Хлоя Сандерсон

Связывание с определенным контентом

Уникальный и понятный человеку

Дизайн веб-сайта — Должен ли веб-интерфейс полагаться на кнопку «Назад» в браузере?

Однако веб-приложение, как правило, не должно

— понимают ли пользователи кнопку браузера «Назад»?

Что сказал Якоб

Исследование использования кнопки возврата

Рекомендации

Кнопки возврата и ожидание пользователя

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

10 главных ошибок веб-дизайна 1999 г.

1. Обрыв или замедление кнопки

2.Открытие нового браузера Windows

3. Нестандартное использование виджетов графического интерфейса

4. Отсутствие биографий

5. Отсутствие архивов

6. Перенос страниц на новые URL-адреса

7. Заголовки, не имеющие смысла вне контекста

8. Прыгая в самую последнюю интернет-модную словечку

9. Медленное время ответа сервера

10. Все, что похоже на рекламу

Браузер Chrome для предотвращения злоупотреблений веб-сайтами кнопкой «Назад»

Рекомендовано нашими редакторами

Добавить комментарий Отменить ответ

Рубрики

Рубрики