Създайте бутон „връщане назад“. Как да направите бутон за връщане назад на уеб страница Връщане към предишната страница joomla 3

В този видео урок ще разгледаме 3 варианта как да направите бутон НАЗАД, за да се придвижвате из сайта към предишни страници в обратен ред. Бутонът НАЗАД е необходим и когато линкове от няколко страници на сайта (A1, A2...An) водят към една и съща страница (B), а от тази страница (B) трябва да се върнете на предишната страница (An) на сайта, от който сте стигнали до страница (B).

Гледайте новия видео урок:

В този видео урок ще направим бутон за връщане към предишни страници на сайта Adobe програмаМуза. Този бутон ще се върне по същия път, който следвахме на сайта.

За да направя този урок, подготвих малък проект, или по-скоро не може да се нарече малък, тук той се състои от, страници Най-високо ниво, страници от първо ниво, а също и за страница „страница-2“ има още няколко дъщерни страници. И за разнообразие създадох два шаблона. Приложих първия шаблон към първите три страници. И приложих втория шаблон към всички останали.

Да започваме. Ще създадем бутон Назад в „Шаблон C“, така че да се показва незабавно на онези страници, към които се прилага този шаблон. Отивам да редактирам от този шаблони тук ще вмъкнем нашия бутон за връщане назад.

Можем да вмъкнем бутон „Назад“ по три начина. Имам специален файл, който вече съм подготвил в Notepad. И има три начина, три кода, чрез които можем да вкараме такъв бутон в сайта.

Първият вариант е само текст. Бутонът ще бъде под формата на текст. Копирам този код:

И го поставям в шаблона. Изглежда така. Имаме само текст и той е маркиран в бяло. Ще го публикувам тук. За да разберем как работи всичко това, натискаме клавишите ctrl+alt+E, за да видим целия сайт с всичките му страници в браузъра. Ето как изглежда главната страница на сайта. Можем да сърфираме в менюто, да избираме страници. Тук имаме падащи менюта. И например от главната страница веднага отидохме на страница „страница-3“. И тук имаме бутон за връщане назад.

Този бутон е активен, но когато задържите мишката върху него, не се появява ръка с пръст. Можем безопасно да щракнем върху този бутон и ще бъдем пренасочени обратно към главната страница. По същия начин можем да щракнем върху страница „страница-3“, след това да отидем на страница „страница-4“ и да щракнете върху бутона „Назад“, това ще ни отведе до страница „страница-3“ и ако щракнем отново върху бутона „Назад“, след което ни отвежда до главната страница. Ето как работи бутонът за връщане назад.

Но този бутон трудно може да се нарече бутон, тъй като това е просто този надпис, подчертан в бяло. Ако искаме да го редактираме в Muse, можем да променим само размера на текста, например, ще сложа "36" тук, за да можете да го видите по-добре. Според мен не можем да променим цвета на текста. Сега ще пробвам да сложа червено. Избрах червено, но това не се отрази по никакъв начин на надписа ни, така че не можем да променим цвета. Можем да променим размера. Нека се опитаме да го направим удебелен и да го центрираме. Всичко, което можем да направим, е да редактираме по този начин. Ако искаме да запълним този блок, например, направете го оранжево, тогава текстът ни пак ще изпъкне в бяло и по принцип не изглежда много хубаво.

Сега ще го копираме. Натискам ctrl+C и отивам на програмата и натискам ctrl+V, за да го поставите в сайта. Изглежда като тази връзка. Нашата връзка е синя. Сега тя не се вижда много. Нека направим и 36-ти шрифт, за да го увеличим и да го видим по-отблизо. Тук имаме само една синя връзка. Ако сега натиснете ctrl+alt+E, ще видим, че когато се гледа, изглежда като тази обикновена синя връзка. Нека го прегледаме още няколко пъти, за да видим, щракнете веднъж, два пъти, върнете се. Тази връзка има същия вид като обикновената връзка.

Можем да приложим стилове на връзка към него в Adobe Muse. Намерете стилове на връзки в секцията „Хипервръзки“, изберете „Редактиране на стилове на връзки“. Вече имам готов вариант. Сега вече имам готов вариант. Можете да видите, че има приложен стил. В стандартно състояние и при задържане на курсора на мишката цветът е син, а в активно състояние - червен. Видяхте го, докато гледахте. Вторият стил, който създадох, беше просто всички черни щати. Можем да приложим този стил към този бутон. Например ще избера и ще приложа този персонализиран стил към този бутон. И ще видите, че нашият надпис е почернял.

Тук също можем да направим запълване, например ще го направя със същия оранжев цвят. Тук вече можете да редактирате текста. Нека го поставим в средата и да го удебелим. И по принцип тази опция вече е по-подобна на бутон. Вече няма такъв бял акцент и по принцип тази опция вече е доста подходяща. Докато разглеждате (ctrl+alt+E), нека отидем на страница "page-3", на страница "page-4" и щракнете отново. Този бутон работи точно както първия, само че има повече опции за редактиране на дизайна.

И третият вариант за това как можем да поставим бутон е, че бутонът ще бъде изображение. Копирам този код:

Отивам в Muse и щраквам върху „Вмъкване“. И този трети вариант, който имаме, е картина. За да имаме някаква снимка тук, трябва да изтеглим някакъв картинен файл от интернет или да го създадем сами. Добавяме снимката чрез функцията „Файл“ на програмата, изберете „Добавяне на файлове за прехвърляне“. Вече изтеглих няколко снимки от интернет. Можем да изберем един. Нека изберем този с бутона за връщане назад. Сега, ако погледнем в секцията „Ресурси“, добавихме бутон „back2.png“ - „Предаване“. Имаме този файл за прехвърляне.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "обратно" / > < / a >

Това е всичко, щракнете върху „OK“. Няма да видим никакви промени в самия Muse. Ще видим всички промени само когато разглеждаме сайта в браузър. Нека отново натиснете ctrl+alt+E, за да видите сайта в браузъра и да се опитаме да сърфираме в нашите страници.

Да отидем на страницата, например "страница 2-1", сега да отидем на страница "страница-2", сега да отидем на страница "страница 3", след това на страница "страница-4". И сега, ако натиснете бутона за връщане назад, ще се върнем последователно в обратен ред към начална страницасайт. Щракнете върху „Назад“, преминете към страница „страница-3“, към страница „страница-2“. И тук вече нямаме бутон. Ако го поставим в шаблон, който е приложен към страницата „страница-2“, тогава ще имаме и бутон „Назад“ тук. Тъй като нямаме такъв, трябва да навигираме до главната страница само като щракнем върху бутона "Начало" в менюто. Да отидем например на страница „страница 2-2-2“, след това на страница „страница 2-2-1“, след това на страници „страница-3“ и „страница-4“. А сега в обратен ред: страница „страница-3“, страница „страница 2-2-1“, страница „страница 2-2-2“ и към главната страница.

Разбира се, не е нужно да поставяте този бутон на уебсайта си, но използвайте обикновени стрелки в браузъра си. Но ако искате такъв бутон да има на вашия сайт, тогава можете да го направите по тези начини... А връзката към статията ще бъде под това видео. Това е всичко. Дмитрий Шаповалов беше с вас. Харесайте това видео, абонирайте се за канала, пишете коментари по-долу и аз ви казвам сбогом до следващите видео уроци.

Много изследвания на използваемостта показват, че потребителите (както нови, така и опитни) често използват бутона „връщане назад“ в браузъра. За съжаление дизайнерите и маркетолозите от предния край рядко обмислят какви последици може да има това за използваемостта, като се имат предвид съвременните модели на уеб дизайн, които използват приложения, анимация, видео и др. Често техническа структураТакива оформления не реагират правилно на функцията „върни се назад“, което нарушава менталния модел на потребителите и влошава изживяването им.

Последствията от това могат да бъдат ужасни: по време на експерименти неадекватната реакция на сайта при натискане на бутона „назад“ беше причината много потребители да напуснат, с обиди и нелицеприятни отзиви. В повечето случаи дори почтените, сивокоси поданици изпускаха ужасно нервите си.

От тази статия ще научите:

• какво очакват потребителите от бутона „връщане назад“;
• кои са 5-те най-чести грешки;
• просто решение на тези проблеми.

Решението наистина е много просто, но често се пренебрегва дори от най-големите марки. Да поправим ли тази грешка?

Очаквания на потребителите

Накратко: Потребителите очакват бутон „връщане назад“, за да им покаже какво възприемат като предишната страница. Думата „възприемане“ е много важна, защото има огромна разлика между това, което изглежда като предишната страница и това, което е технически.

Възниква въпросът какво точно тълкуват потребителите като нова страница? В повечето случаи, ако една страница е значително различна визуално, но концептуално е свързана със сайта, тогава тя се възприема като нова. Ето защо е много важно да наблюдавате как сайтът обработва различни интерактивни елементи: лайтбоксове, форми, филтри и др.

Повечето посетители не разбират технически аспекти, а разчитат само на интуитивни идеи за това как трябва да работи ресурсът. Следователно, когато щракнат върху бутона „назад“, те очакват страница, на която вече са имали важен опит, но получават страница с леко променен интерфейс.

По-долу са най-популярните интерактивни елементи и препоръки за използването им, за да увеличите максимално потребителското изживяване и използваемост.

Целта на внедряването на наслагвания и лайтбоксове е да се покаже на потребителя елемент, който се появява в горната част на страницата. Следователно потребителите възприемат такива елементи като нови страници и натискат бутона „назад“, за да се върнат в първоначалната си позиция - но те се озовават на съвсем различно място, отколкото са очаквали. Това е особено жалко, тъй като използването на лайтбоксове само умножава негативното възприемане на уеб страницата - повечето потребители не харесват тези елементи в сайтовете за онлайн пазаруване.

Използването на филтри често трансформира страница и дава на човек ново изживяване. Следователно, след сортиране, страницата се възприема като нова, дори ако нищо не е заредено на нея. Това се случва, защото след всяко взаимодействие на посетител със страницата на онлайн магазина се генерира нов резултат.

Този пример подчертава, че хората не навлизат в технически аспекти, когато определят нова страница, но използвайте само интуиция и формирано възприятие.

3. Форма за регистрация/плащане

Страниците за плащане се възприемат като нови страници и дори по-лошо - като многоетапен процес, всеки етап от който може да бъде отменен с бутон „връщане назад“.

Този подход може да създаде проблеми; прост пример е, че човек иска да се върне стъпка назад при попълване на формуляр, за да редактира въведената информация. Натискането на бутона „назад“ го връща в кошчето и изтрива всички (!) въведени данни. Дразненето и напускането на мястото е естествен ефект.

Технологията AJAX може да не отговаря на очакванията на потребителите: Всяка AJAX страница е технически под един и същ URL адрес, но изглежда, че се отварят нови страници.

В контекста на електронната търговия потребителите имат ясното усещане, че страница 3 и страница 4 са отделни и могат да се навигират от страница 4 до страница 3 с помощта на бутона за връщане назад.

Потребителите не са готови да се откажат от бутона за връщане назад

Като се има предвид колко широко използвана е тази функция на интернет браузъра, проблемът с несъответствието между очакванията на потребителите и визията на разработчиците става критичен и не трябва да се приема с лека ръка.

Потребителите особено харесаха бутона „връщане назад“. мобилни приложенияи уебсайтове. Както показа проучването мобилни версиисайтове, по-голямата част от потребителите са използвали тази функция на всички предлагани ресурси. Освен това използването на бутона не се ограничава до връщане на една страница назад - някои субекти го натискаха до 15 (!) пъти подред.

Потребителите на компютри също често натискат бутона - но не толкова, колкото собствениците на мобилни телефони, защото потребителите настолни компютриНалична е удобна навигация на сайта.

Решение

Добрата новина е, че HTML5 има сравнително просто решение на проблема и то се нарича HTML5 History API. По-конкретно, функцията history.pushState() ви позволява да промените URL адреса, без да презареждате страницата. Съответно, сайтът ще се държи в съответствие с очакванията на потребителя, който е натиснал бутона „връщане назад“.

В тази статия ще разгледаме как можете да създадете бутон „Назад“ на всяко място, от което се нуждаете. Мисля, че от името на бутона вече е ясно какво ще се случи, когато щракнете върху него. Такъв бутон може да се вмъкне както в категория, така и в самия материал. Всичко се прави съвсем просто.

Има няколко опции за това как можете да добавите бутон, но аз лично използвах само един начин. А именно третият вариант от трите, които предложих. Малко по-нататък ще ви кажа защо.

Какви опции имаме:

Предимството на третия вариант е, че ако трябва да редактирате текста на бутон или да промените/добавите стилов клас, ще трябва да коригирате само самия модул, а не бутона на всички места, където се намира.

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

Създаден е модулът „HTML код“ и кодът на бутона е вмъкнат там с помощта на разширението „Sourcerer“, което прави възможно добавянето на произволен код към материала.

Моят работен код на бутона:

Върни се

Текстът е леко декориран със стрелка с помощта на компоненти от Bootstrap 3, а самият бутон е стилизиран чрез CSS.