Birçok kullanılabilirlik çalışması, kullanıcıların (hem acemi hem de deneyimli) tarayıcıdaki "geri dön" düğmesini sıklıkla kullandığını göstermektedir. Ne yazık ki, ön uç geliştiriciler ve pazarlamacılar, uygulamaları, animasyonları, videoları ve daha fazlasını kullanan mevcut web tasarım kalıpları göz önüne alındığında, bunun kullanılabilirlik üzerindeki etkisi hakkında nadiren düşünürler. Genellikle bu düzenlerin teknik yapısı, kullanıcıların zihinsel şablonunu kıran ve deneyimlerini bozan "geri dön" işlevine uygun şekilde yanıt vermez.

Bunun sonuçları korkunç olabilir: deneyler sırasında, sitenin "geri" düğmesine basmaya yetersiz yanıt vermesi, birçok kullanıcının siteden ayrılmasına ve kötüye kullanım ve hoş olmayan yorumlara neden oldu. Çoğu durumda, saygıdeğer, kır saçlı denekler bile öfkelerini korkunç bir şekilde kaybettiler.

Bu makaleden öğreneceksiniz:

• kullanıcıların geri düğmesinden ne beklediği;
• en yaygın 5 hata nedir;
• bu sorunlara basit bir çözüm.

Çözüm gerçekten çok basit, ancak çoğu zaman en büyük markalar tarafından bile ihmal ediliyor. Bu hatayı düzeltebilir miyiz?

Kullanıcı beklentileri

Kısacası, kullanıcılar "geri dön" düğmesinin kendilerine önceki sayfa olarak algıladıkları şeyi göstermesini bekler. "Algılamak" kelimesi çok önemlidir, çünkü bir önceki sayfada görünen ile teknik olarak görünen arasında büyük bir fark vardır.

Soru ortaya çıkıyor: Kullanıcılar yeni bir sayfa olarak tam olarak neyi yorumluyor? Çoğu durumda, bir sayfa görsel olarak önemli ölçüde farklıysa, ancak kavramsal olarak siteyle ilgiliyse, yeni olarak algılanır. Bu nedenle, sitenin çeşitli etkileşimli öğeleri nasıl işlediğini izlemek çok önemlidir: ışık kutuları, formlar, filtreler vb.

Ziyaretçilerin çoğu aşina değil teknik noktalar, ancak yalnızca kaynağın nasıl çalışması gerektiğine ilişkin sezgilere dayanır. Bu nedenle, geri düğmesine tıkladıklarında, zaten önemli deneyim kazandıkları bir sayfa beklerler, ancak biraz değiştirilmiş bir arayüze sahip bir sayfa alırlar.

Aşağıda, en popüler etkileşimli öğeler ve bunların maksimum iyileştirme için nasıl kullanılacağına ilişkin öneriler yer almaktadır. kullanıcı deneyimi ve kullanılabilirlik.

Kaplamaları ve ışık kutularını uygulamanın amacı, kullanıcıya sayfanın üstünde görünen bir öğeyi göstermektir. Bu nedenle, kullanıcılar bu tür öğeleri yeni sayfalar olarak algılar ve geri dönmek için "geri" düğmesine basar. başlangıç ​​pozisyonu Ama umdukları yerde bitmiyorlar. Bu özellikle talihsiz bir durumdur, çünkü ışık kutularının kullanımı yalnızca web sayfasının olumsuz algısını arttırır - çoğu kullanıcı çevrimiçi alışveriş sitelerinde bu öğeleri sevmez.

Filtre kullanmak genellikle sayfayı değiştirir ve kişiye yeni bir deneyim kazandırır. Bu nedenle, sıralamadan sonraki sayfa, üzerine hiçbir şey yüklenmemiş olsa bile yeni olarak algılanır. Bunun nedeni, ziyaretçinin çevrimiçi mağazanın sayfasıyla her etkileşiminden sonra yeni bir sonuç çıktısının elde edilmesidir.

Bu örnek, insanların karar verirken teknik yönleri incelemediğini vurgulamaktadır. yeni sayfa, ancak yalnızca sezgiyi ve oluşturulmuş algıyı kullanın.

3. Kayıt / ödeme şekli

Ödeme sayfaları, yeni sayfalar gibi ve daha da kötüsü - her adımı "geri dön" düğmesiyle iptal edilebilen çok adımlı bir süreç olarak ele alınır.

Bu yaklaşım sorunlara yol açabilir, basit bir örnek - bir kişi girilen bilgileri düzenlemek için bir formu doldururken bir adım geri gitmek istiyor. "Geri" düğmesine basmak onu çöp kutusuna döndürür ve tüm (!) Girilen verileri siler. Tahriş ve siteden ayrılma doğal bir etkidir.

AJAX teknolojisi kullanıcı beklentilerini karşılamayabilir: teknik olarak her AJAX sayfası aynı URL'nin altındadır, ancak yeni sayfalar açıldığı görülmektedir.

E-ticaret bağlamında, kullanıcılar sayfa 3 ve sayfa 4'ün ayrı olduğu ve dördüncü sayfanın geri düğmesi kullanılarak üçüncü sayfaya gidilebileceği konusunda net bir algıya sahiptir.

Kullanıcılar geri düğmesinden vazgeçmeye hazır değil

İnternet tarayıcısının bu özelliğinin ne kadar yaygın olarak kullanıldığı göz önüne alındığında, kullanıcı beklentilerinin geliştiricilerin vizyonu ile uyuşmaması konusu kritik hale geliyor ve hafife alınmaması gerekiyor.

Kullanıcılar özellikle "geri dön" düğmesini beğendi mobil uygulamalar ve siteler. Çalışmanın gösterdiği gibi mobil versiyonlar sitelerde, kullanıcıların çoğunluğu bu özelliği önerilen tüm kaynaklarda kullandı. Ayrıca, düğmenin kullanımı bir sayfanın geri alınmasıyla sınırlı değildir - bazı denekler arka arkaya 15 (!) defa basmıştır.

PC kullanıcıları da genellikle düğmeye basar - ancak mobil kullanıcılarla aynı şekilde değil, çünkü kullanıcılar masaüstü bilgisayarlar Kolay site navigasyonu mevcuttur.

Çözüm

İyi haber şu ki, HTML5'in soruna nispeten basit bir çözümü var ve buna HTML5 Geçmiş API'si deniyor. Daha spesifik olarak, history.pushState() işlevi, sayfayı yeniden yüklemeden URL'yi değiştirmenize olanak tanır. Buna göre site, "geri dön" butonuna tıklayan kullanıcının beklentilerine uygun davranacaktır.

Bu yazımızda, ihtiyacınız olan herhangi bir yerde nasıl bir "Geri dön" butonu oluşturabileceğinize bakacağız. Düğmenin adından, üzerine tıkladığınızda ne olacağı zaten açık olduğunu düşünüyorum. Böyle bir düğme hem kategoriye hem de malzemenin kendisine eklenebilir. Her şey oldukça basit bir şekilde yapılır.

Bir düğmeyi nasıl ekleyebileceğinize dair birkaç seçenek var, ancak ben şahsen sadece bir yol kullandım. Yani, benim önerdiğim üç seçenekten üçüncüsü. Biraz daha size nedenini söyleyeceğim.

Hangi seçeneklerimiz var:

1. Jooml şablon dosyalarını düzenleyin.
2. Düğme kodunu doğru yere yapıştırmanız yeterlidir.
3. Bir "HTML kodu" modülü oluşturun, düğme kodunu buraya yapıştırın ve ardından bu modülü doğru yerde görüntüleyin.

Üçüncü seçeneğin avantajı, düğmedeki metni düzenlemeniz veya bir stil sınıfı değiştirmeniz/eklemeniz gerekirse, yalnızca modülün kendisini düzeltmeniz ve düğmeyi bulunduğu her yere sabitlemeniz gerekmez.

Bu yüzden sitelerimden birinde üçüncü seçeneği kullandım:

"HTML-code" modülü oluşturuldu ve materyale herhangi bir kod eklemeyi mümkün kılan "Sourcerer" uzantısı kullanılarak düğme kodu buraya eklendi.

Çalışan düğme kodum:

Metin, önyükleme 3'teki bileşenler kullanılarak bir okla hafifçe dekore edilmiştir ve düğmenin kendisi CSS ile biçimlendirilmiştir.

Tünaydın, sipariş verirken düğmeyi geri alıp sonraki düğmenin yanına nasıl koyacağım sorusu ortaya çıktı.Şimdi benim için böyle görünüyor. https://yadi.sk/i/_ZNvGrvEhqSk3 Aşağı kaydırırsanız , çalışmayı durdurur. ..

bir çözüm var

Selamlar, bir kişinin bir önceki sayfaya dönebilmesi için örneğin sepette geri düğmesi nasıl yapılır bana kim söyleyebilir?

Şablona istediğiniz yere bir düğme ekleyin, örneğin bu

+1

Tarayıcıda geri düğmesine bastığımda sayfayı yenileyene kadar tüm stiller uçup gidiyor gibi görünüyor.Varsayılan tema aşağıdaki ekran görüntüsündeki gibi görünmelidir) Sorunun ne olduğunu söyleyin

Merhaba, sepette "Geri dön" butonu yaptım, buton bile değil, sadece bir kod ile bir linkŞimdi sepete geri döndüğünüzde geri dön...

bir çözüm var

İyi günler Böyle bir sorunla karşılaştım: sepete ürün eklerken ve tarayıcıda "geri" düğmesine basarken, sepetteki ürünlerle ilgili bilgiler (ek blokta) siz sayfayı yenileyene kadar kaydedilmiyor. Şunlar. siteye gidiyoruz, gidiyoruz ...

Belirttiğiniz site, sepet için bir eklenti kullanıyor. İyileştirmeler içeren bir seçenek olarak, malların eklenmesini?html=1 yerine?html=1&items=1'e göndermeyi kullanabilirsiniz, bu, ürünün tüm içeriğini verecektir. cevap olarak sepeti.

İyi günler. Ödeme sırasındaki her adımda "İleri" düğmesi belirtilir. "Yüce" konuda düğme kodunu buldum: bir çözüm var

Merhaba, yardımcı olmaktan mutluluk duyarız: [e-posta korumalı]

Bay. X

İyi günler! Bir sorunla karşılaştım. Site alışılmadık bir tasarıma sahiptir ve kısmen (işlevlerin çoğu korunur) kaynak koduna sahiptir - alışveriş sepeti bir açılır pencere olarak uygulanır.Site olduğu gibi çalışmaya kabul edildi - belgeler, açıklamalar, bağlantı olmadan...

Karşılaştığınız biri var mı, özellikle bir ürünü veya şablonu düzenlediğinizde yönetici paneli çok yavaş. Örneğin, bir şablonda kodu eklemeniz veya değiştirmeniz gerekiyor, fare ile seçiyorsunuz, ardından seçim geç oluyor ve yeni kodun eklenmesi de geç oluyor. ...

+4

Lütfen https://site/forum/386/predlozheniy...2 numaralı noktanın henüz uygulanmadığını ve yüklenebilir listeyi daha fazla kaydırarak 500-1000 ürün içeren listeleri düzenlemeye çalıştığınızı unutmayın, sorun yine bununla ilgilidir. nokta...

Shop-Script 6.2.1 güncellemesi

Shop Script 6.2.1 güncellemesi bugün yayınlandı. Yenilikler:1. Sayfalandırmayı etkinleştirmek için arka uçta ürün listelerinin geç yüklenmesini devre dışı bırakma özelliği eklendi. "Genel Ayarlar" bölümündeki mağaza ayarlarında...

İyi günler, böyle bir sorun vardı - yönetici panelinde tanımsız bir hata, kaydetmiyorlar, menünün bir kısmı kayboldu, WYSIWYG'de yeni bloklar eklerken tanımsız bir hata veriyor.

+19 Gerçekleştirilen

Sitenin yönetici panelinde, kategoriler halinde mal yükleme seçeneğinin, yüklenen bir listeye göre değil, sayfa sayfa yapılması gerekir. Örneğin 21.000 pozisyonum var ve bunların düzenlenmesi gerekiyor (farklı kategorilere ekleniyor vb.). Ancak, örneğin tarayıcı kilitlenirse...

Merhaba, WebAssyst Shop-Script sistemi ile çalışırken böyle bir sorunla karşılaştım: Bir online mağazanın web sitesine girerken sepet boşken 0 rakamı yerine Sepet'in yanında para miktarı görüntüleniyor. "Sepet" bağlantısını tıkladığınızda...

İyi günler Mağazanın tüm sayfalarında sepette ne kadar mal olduğunu gösteren bir modül vardır.Görev sepetteki mal sayısını göstermektir.Şablon varsayılandır. index.html dosyasında kodu şu şekilde değiştirdim: (if $wa->shop)...

Tünaydın. Kullanıcıya, sepette şu anda kaç tane mal olduğu hakkında ön uçta bilgi gösterilmesi için bunu nasıl yapabilirim. Yani, arttıkça büyüyecek olan sepetin yanında sayısal bir sayaç nasıl yapılır ...

Soru şudur: sepet penceresinin içine konan toplam mal miktarını göstermesini sağlamak ve görüntülenen miktardan önce "tutar:" kelimesini veya "tutar için mal:" ifadesini nerede yazabilirim?

bir çözüm var

Elimde şu kod var: Bağlantıyı ana bağlantı dışında her yerde görüntüle:(if $wa_url != $wa->currentUrl(0,1))...(/if) Ve bağlantıyı üç sayfada göstermeme gerek yok, bu ana sayfada , /cart/ ve /checkout/ üzerinde lütfen buna başka ne eklenmesi gerektiğini söyleyin...

Bazen web sayfalarında geçici olarak başka bir (yardımcı diyelim) sayfaya gitmek ve sonra geri dönüp onunla çalışmaya devam etmek gerekli hale gelir. Örneğin, bir yardım sayfası, kayıt sayfası olabilir.

Bu durumda, açıkçası, iade adresi çok farklı olabilir. Sitede böyle bir ters geçiş nasıl uygulanır? Saf html/CSS burada yeterli değil, javascript kullanmanız gerekecek.

En basiti, örneğin, yardımcı bir sayfadaki bir komut dosyasında böyle bir satırı kullanmaktır:

Geçmiş yöntemi, sayfadaki gezinme geçmişini hatırlar ve aslında kullanımı, tarayıcının "İleri" ve "Geri" düğmelerini kullanmaya benzer, yalnızca biraz daha işlevseldir. Bu, en kolay ve en uygun yoldur, ancak yalnızca bir koşulla: yeni (yardımcı) sayfa yeni bir pencerede açılmazsa. Sonuçta, aksi takdirde yardımcı sayfa ilk kez açılacaktır (daha doğrusu, bunun için oturum ilk olacaktır, henüz geçiş yapılmamıştır). Ve bu, aslında, geri dönecek hiçbir yer olmadığı anlamına gelir. Bu nedenle, bu yöntem evrensel olarak adlandırılamaz. Kullanıcı, sayfayı yeni bir sekmede açmaya zorlarsa veya tarayıcı bunu ayarlara uygun olarak yaparsa çalışmaz. Bu durumda, target="_self" bağlantı özelliği de yardımcı olmaz: Açılan yardımcı sayfadan geri dönmek imkansız olacaktır (tabii ki, orijinal sayfanın URL'sini tarayıcı adres çubuğuna manuel olarak girmediğiniz sürece) .

Daha çok yönlü yol

Bunu uygulamak için hem kaynak hem de yardımcı sayfalarda komut dosyalarına ihtiyacınız olacak. Fikir farklı olabilir. Bunlardan biri, orijinal sayfanın adresinin (URL) tarayıcının adres çubuğunda bir GET isteği olarak saklanması gerçeğine dayanmaktadır. Böylece. böyle bir istek alan yardımcı sayfa, kaynağını bilir. Buna dayanarak, geri dönmek mümkün hale gelir, yani. geçişin yapıldığı sayfaya.

Şematik olarak, bu aşağıdaki gibi temsil edilebilir:

Orijinal sayfadaki komut dosyası

Geçişin gerçekleştirilmesi gereken sayfada, bir işlev olan aşağıdaki komut dosyası vardır - bir fare tıklama işleyicisi (onclick):

Komut dosyasındaki işlevin çalışması için, işleyicisini bazı öğelerde aşağıdaki yollardan biriyle ayarlamanız gerekir, örneğin:

http://example.com " onclick="to_comment_rules(“http://example.com”); false döndür">Yardım sayfasına gitmek için tıklayın

Bu bağlantının href özniteliğinin, onclick olay işleyici işlevinde belirtilen karşılık gelen bir adresi olduğunu unutmayın. Bu, arama robotlarının bağlantıya tıkladığında hangi sayfaya gideceğini anlaması için yapılır. Bu gerekli değilse, aşağıdaki gibi boş bir href niteliği oluşturmalısınız.

Bu betiğin prensibi, save_back(url) işlevi çağrıldığında, url'nin bulunduğu (yardımcı) sayfanın açılmasıdır. Bunu yapmak için, sayfanın protokolü (örneğin, http veya https) ve orijinal web sayfasının URL'sinin geri kalanı (belki de mevcut GET istek verileri dahil) belirlenir (bu, URL, “?” İşaretinden sonra). Alınan veriler, açılan sayfanın URL'sine eklenir - ve ona bir geçiş gerçekleşir.

Yardım sayfası komut dosyası

Bunun gibi bir komut dosyası olmalıdır:

Bu komut dosyası, üzerinde ilgili işleyicinin kurulu olduğu bir öğeye fare tıklandığında da çalıştırılacaktır:

Dönüş

Bu satır, fare bağlantıya tıkladığında varsayılan eylemi iptal eder. Mesele şu ki, varsayılan olarak bağlantının altında bir geçiş var. Bu durumda, geçiş tam olarak href özniteliğinde belirtilen adrese gerçekleşecektir. Bu adres (özellikle yardımcı sayfada), geçişin yapıldığı sayfanın dönüş adresini içermeyebilir (eğer yardımcı sayfaya geçiş belirli bir kaynaktan değil, birkaç kaynak sayfadan mümkünse).

Bu nedenle, yardım sayfasındaki komut dosyası adres çubuğunun içeriğini okur ve ardından onu bir dizi "?" öğelerine böler. Bir URL'de bu tür iki karakter olabileceğini unutmayın. İlki, daha önce de belirtildiği gibi, orijinal sayfa adresinin adresinin (eksi protokol) yardımcı sayfanın adresine eklenmesi nedeniyle görünecektir. İkincisi, orijinal sayfa yüklenirken GET istek parametrelerinin varlığının bir sonucu olarak mevcut olabilir. Başka bir deyişle, yardım sayfasının adres çubuğu bir veya iki soru işareti içerebilir. Bağlantıya tıkladığınızda yardımcı sayfadan orijinal sayfaya geçmek için

Dönüş

istek adres çubuğundan okunur ve orijinal sayfadakiyle aynı forma dönüştürülür, ardından sayfa bu adrese yüklenir.

Notlar

Ek olarak, makalede, aslında orijinal sayfaya dönmekten değil, yeniden yüklemekten bahsettiğimize dikkat edilmelidir. Bu, elbette, yalnızca bir dönüşün taklididir. Özellikle bu sayfaya girilen veriler, ayarları kaydedilemeyebilir. Ayrıca RETURN'den farklı olarak sayfa yüklendiğinde sitenin en başından açılacaktır (yani üst kısmı ekranın üst kısmında yer alacaktır). Oysa "gerçek" geri izleme, (orijinal) sayfayı tam olarak atlamanın yapıldığı yere döndürür. Bu nedenle, her iki yöntemi de birleştirmeye çalışacağız.

kombine yöntem

Öyleyse görevi belirleyelim:

yardımcı sayfa aynı sekmede (pencerede) açılırsa, history.back() yönteminin kullanılabilir olmasına izin verin;

ancak, yardım sayfası yeni bir pencerede açılırsa, yukarıda tartışılan yöntemin çalışması gerekir (çünkü history.back() çalışmayacaktır).

Yardımcı sayfadaki komut dosyası biraz değişecektir (yukarıda belirtilen satır eklenecektir):

Önce geri dönmeye çalışıyoruz. Başarılı olursa, komut dosyasının geri kalanı çalışmayacak ve orijinal sayfaya geçişin yapıldığı yerde dönecektir. Değilse, daha önce olduğu gibi, orijinal sayfanın adresini GET istek parametrelerinden çıkarır ve ona gideriz.

Çözüm

Tabii ki, bu makale "dönüş" teknolojisi için seçeneklerden yalnızca birini göstermektedir. GERİ- orijinal sayfaya. Bu amaçla, GET isteğine ek olarak, örneğin yerel depolama localStorage gibi başka teknolojiler de kullanılabilir. Ek olarak, dönüşü tam olarak simüle etmek için GERİ orijinal sayfanın kaydırma miktarını GET isteği aracılığıyla iletmek güzel olurdu - böylece daha sonra, yardımcı sayfayı yeni bir pencerede açarken bile, orijinal sayfada geçişin yapıldığı aynı yere dönebilirsiniz. daha önce yapılmıştır.