Bir web sayfasında geri düğmesi nasıl yapılır? Bir "geri dön" düğmesi oluşturun Önceki sayfaya dön

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

Nasıl düğme ekleyebileceğinize dair birkaç seçenek var, ancak ben şahsen yalnızca bir yolu kullandım. Yani önerdiğim üç seçenekten üçüncüsü. Biraz ileride size nedenini anlatacağım.

Hangi seçeneklere sahibiz:

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

    • Üçüncü seçeneğin avantajı, bir düğme üzerindeki metni düzenlemeniz veya bir stil sınıfını değiştirmeniz/eklemeniz gerekirse, düğmeyi bulunduğu tüm yerlere sabitlemek yerine yalnızca modülün kendisini düzeltmeniz gerekmesidir.

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

    “HTML code” modülü oluşturuldu ve malzemeye herhangi bir kodun eklenmesini mümkün kılan “Sourcerer” uzantısı kullanılarak buraya düğme kodu eklendi.

    Çalışma düğme kodum:

    geri gelmek

    Metin, Bootstrap 3'teki bileşenler kullanılarak bir okla hafifçe süslenmiştir ve düğmenin kendisi de CSS aracılığıyla stillendirilmiştir.

    Birçok kullanılabilirlik araştırması, kullanıcıların (hem yeni hem de deneyimli) tarayıcıdaki "geri dön" düğmesini sıklıkla kullandığını göstermektedir. Ne yazık ki, arayüz tasarımcıları ve pazarlamacılar bunun kullanılabilirlik açısından ne gibi sonuçlar doğurabileceğini nadiren düşünüyorlar. modern modeller Uygulama, animasyon, video vb. kullanan web tasarımları. Çoğu zaman bu düzenlerin teknik yapısı "geri dön" işlevine doğru yanıt vermeyerek kullanıcının zihinsel düzenini bozuyor ve deneyimini kötüleştiriyor.

    Bunun sonuçları vahim olabilir: Deneyler sırasında, sitenin "geri" düğmesine basmaya yetersiz tepki vermesi, birçok kullanıcının kötüye kullanım ve olumsuz incelemelerle siteden ayrılmasının nedeniydi. Çoğu durumda, saygıdeğer, gri saçlı denekler bile korkunç bir şekilde öfkelerini yitirdiler.

    Bu makaleden şunları öğreneceksiniz:

    • kullanıcıların "geri dön" düğmesinden beklentileri;
    • en sık yapılan 5 hata nelerdir;
    • bu sorunlara basit bir çözüm.

    Çözüm aslında çok basit ama çoğu zaman en büyük markalar tarafından bile ihmal ediliyor. Bu hatayı düzeltelim mi?

    Kullanıcı Beklentileri

    Kısacası: Kullanıcılar, bir önceki sayfa olarak algıladıkları şeyin kendilerine gösterilmesi için bir "geri dön" düğmesinin olmasını beklerler. “Algılamak” kelimesi çok önemli çünkü bir önceki sayfa gibi görünen sayfa ile teknik olarak görünen sayfa arasında çok büyük bir fark var.

    Şu 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 ilişkiliyse, o zaman 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.

    Çoğu ziyaretçi teknik hususları anlamıyor ve yalnızca kaynağın nasıl çalışması gerektiğine dair sezgisel fikirlere güveniyor. Yani geri tuşuna bastıklarında, daha önce almış oldukları bir sayfanın açılmasını beklerler. önemli deneyim, 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ğı 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. Dolayısıyla kullanıcılar bu tür unsurları yeni sayfalar olarak algılar ve “geri” tuşuna basarak orijinal konumlarına dönerler ancak kendilerini beklediklerinden tamamen farklı bir yerde bulurlar. Bu özellikle talihsiz bir durumdur, çünkü ışık kutularının kullanımı yalnızca web sayfasına yönelik olumsuz algıyı artırır; çoğu kullanıcı çevrimiçi alışveriş sitelerinde bu öğeleri sevmez.

    Filtreleri kullanmak çoğu zaman bir sayfayı dönüştürür ve kişiye yeni bir deneyim kazandırır. Bu nedenle sıralama sonrasında, üzerine hiçbir şey yüklenmemiş olsa bile sayfa yeni olarak algılanır. Bunun nedeni, çevrimiçi mağaza sayfasıyla her ziyaretçi etkileşiminden sonra yeni bir sonucun üretilmesidir.

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

    3. Kayıt/ödeme formu

    Ödeme sayfaları yeni sayfalar olarak algılanıyor ve daha da kötüsü, her aşaması "geri dön" düğmesiyle iptal edilebilen çok adımlı bir süreç olarak algılanıyor.

    Bu yaklaşım sorunlara neden olabilir; basit bir örnek, bir kişinin girilen bilgileri düzenlemek için bir formu doldururken bir adım geri gitmek istemesidir. “Geri” tuşuna basıldığında sepete geri döner ve girilen tüm (!) veriler silinir. Tahriş olmak ve siteyi terk etmek doğal bir etkidir.

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

    E-ticaret bağlamında kullanıcılar, 3. sayfa ile 4. sayfanın ayrı olduğu ve geri butonu kullanılarak 4. sayfadan 3. sayfaya geçilebileceği konusunda net bir algıya sahiptir.

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

    Bu İnternet tarayıcısı özelliğinin ne kadar yaygın kullanıldığı göz önüne alındığında, kullanıcı beklentileri ile geliştiricilerin vizyonu arasındaki uyumsuzluk konusu kritik hale geliyor ve hafife alınmaması gerekiyor.

    Kullanıcılar özellikle “geri dön” butonunu beğendi mobil uygulamalar ve web siteleri. Çalışmanın gösterdiği gibi mobil versiyonlar sitelerde kullanıcıların çoğunluğu bu işlevi sunulan tüm kaynaklarda kullandı. Üstelik düğmenin kullanımı bir sayfa geri almakla sınırlı değil; bazı denekler arka arkaya 15 (!) defaya kadar bu düğmeye bastı.

    PC kullanıcıları da sıklıkla düğmeye basıyor ancak cep telefonu sahipleri kadar değil, çünkü kullanıcılar masaüstü bilgisayarlar Kullanışlı site navigasyonu mevcuttur.

    Çözüm

    İyi haber şu ki HTML5'in bu 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.

      İyi günler, sipariş verirken düğmeyi nasıl geri taşıyıp sonraki düğmenin yanına yerleştireceğime dair bir sorum var. Şimdi bana şöyle görünüyor https://yadi.sk/i/_ZNvGrvEhqSk3. aşağı, çalışmayı durdurur.

      Bir çözüm var

      Merhaba, birisi bana bir kişinin önceki sayfaya dönebilmesi için örneğin alışveriş sepetinde nasıl geri düğmesi yapılacağını söyleyebilir mi?

      Şablonun istediğiniz yerine bir düğme ekleyin; örneğin bu

      +1

      Tarayıcıda geri düğmesine bastığımda, sayfayı yenileyene kadar tüm stiller kayboluyor 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öyle.

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

      Bir çözüm var

      İyi günler, şu sorunla karşılaştım: Sepetinize bir ürün eklediğinizde ve tarayıcıdaki "geri" düğmesini tıkladığınızda, sepetteki ürünlerle ilgili bilgiler (ek blokta) siz sayfayı yenileyene kadar kaydedilmiyor. Onlar. siteye git, git...

      Belirttiğiniz site, sepet için bir eklenti kullanıyor Değişiklik yapma seçeneği olarak, malların eklenmesini?html=1 adresine göndermeyi kullanabilirsiniz, ancak bu, ürünün tüm içeriğiyle yanıt verecektir. araba.

      İyi günler. Ödeme sırasında her adımda bir "İleri" düğmesi gösterilir. "Supprime" konusunda düğme kodunu buldum: