Internet sayfası menüleri kolay görünüyor.

Keşke onlar olsaydı.

Sohbet bir web kullanılabilirlik raporunda, katılımcılarının ortalama yarısı yeni bir internet sayfası hakkında informasyon edinmek için gezinme menüsünü kullandıklarını bildirdi.

Iştirakçilerin% 37’si site gezintisiyle ilgili fena bir deneyimin, siteyi tamamen terk etmek istemeleri için yeterince can bunaltıcı bulunduğunu söylemiş oldu.

Yanlış site menüsü insanları etken olarak sitenizden uzaklaştırabilir.

Menünüz devamlı web sitenizin güvenilir bir köşe taşı olmalıdır. Ziyaretçilerin kendilerini yönlendirmek ve sitenizde yollarını bulmak için devamlı nerede bulunduğunu bilmeleri gerekir.

Internet sayfası menüleri aslına bakarsan bir ton kontrol yapılmış oldu. Her neyse ki, tüm zor kazanılan derslerden her şeyi kendiniz tecrübe etmek zorunda kalmadan yararlanabilirsiniz. Aşağıdaki en büyük dersleri ayırdık.

Menü Yapısı
Portland Trail Blazers’ın web sitesinin ne tür kullanılabilirlik sorunları yaşadığına dair herhangi bir veri olmamasına karşın , bir şeyin satış hunilerini değerlendirmek ve satışların sebebinin potansiyel olarak ne olabileceğini belirlemek için Sq1’i işe almalarını istediğini biliyoruz. .

Pazarlama ajansı, kullanıcı deneyimi için açıkça optimize edilmeyen navigasyona odaklandı. 2013 senesinde şöyleki görünüyordu.

Tasarımın kendisinden metin okumak zordu ve seviye kafa karıştırıcıydı. Sitenin navigasyonunu kullanarak ziyaretçilerin hedeflerinin neler bulunduğunu değerlendirdikten sonrasında Sq1, menünün tasarımı ve yapısının tamamen yenilenmesine karar verdi.

Saydam arka planı kaldırdılar.
Sayfaları daha mantıklı ve takip edeni kolay bir akışta sunarak açılır seçenekleri dikey bir düzende tekrardan hizaladılar.
Menünün mobil duyarlılığını geliştirdiler.
Bu A / B testi sonucunda, Sq1 yeni ve geliştirilmiş yapının gelirinde% 62.9 artış sağladığını tespit etti. Trail Blazers’ın sitesinin navigasyonu o zamandan beri bir takım yenileme geçirdi, sadece 2014’ten itibaren kitleleri ile en etkili olduğu kanıtlanan aynı opak ve dikey düzeni korudu. Bugün şöyleki görünüyor.

Menü İfadeleri
Formstack web sitesinin tasarımcıları navigasyonu ele almak için yola çıktığında, başlangıçta kendilerine şu şeklinde birçok sual sordular:

Menüde ne tür içerik görünmelidir?
Iyi mi yapılandırmalıyız?
Menü hiyerarşisinde hangi sayfalara öncelik verilmelidir?
Gezinme menülerini izleyeceği yolu göstermeye karar verdikleri sayfa “Niçin Bizi Kullanıyorsunuz” başlıklı. Trafik ve dönüşümlerin itici gücü olarak yüksek umutları vardı ve dolayısıyla tıklama oranları beklentileri karşılayamadığında şaşırdılar.

Formstack internet sayfası ve “Niçin Bizi Kullanın” ledli navigasyon Ocak 2013’te şöyleki görünüyordu:

Giriş sayfalarının ziyaretçiler üstündeki etkisinden hayal kırıklığına uğradıklarından, “Iyi mi Çalışır” olarak bir isim değişikliğini kontrol etmeye karar verdiler. Lansmandan ilkin düşündükleri bir isim, fakat sonuçta “Niçin Bizi Kullanıyorsunuz?” Tahmin edebileceğiniz şeklinde, menülerindeki kolay bir ifade değişikliği internet sayfasında% 50 daha çok sayfa görüntüleme ve% 8 daha çok dönüşümle sonuçlandığında şok oldular.

“Niçin Bizi Kullanın” ifadesini (Formstack’a odaklanmanın çoğunu icra eden) “Iyi mi Çalışır” (daha oldukca eyleme geçirilebilir bir çözüme daha çok değindi) lehine atmadan oldukca uzun sürmedi. Site, değişikliği uyguladıktan sonrasında aynı senenin Mart ayında iyi mi göründüğünü gösteriyor:

Menü Mantığı
2014 senesinde, Bizztravel Wintersport web sitesinin arkasındaki insanoğlu, ziyaretçilerin kendileri için en anlamlı hedefi ve tatili bulmak için sitede dolaşmak için ne kadar iş yapmaları icap ettiğini fark etmeye başladı. Doğru bölgeye (hatta gerçek dinlence sayfasına bile) gitmek için averaj beş tıklama ile burada ciddi bir kaçırılmış fırsat bulunduğunu biliyorlardı.

Ve Bizztravel, menünün kendi sitesinde en büyük acı deposu bulunduğunu belirledi. Mantık ve basitlikten yoksun, ziyaretçilerin arama sürecini kolaylaştırmak için bir tek menüyü değil, başlığı da tekrardan tasarlamaları gerekiyordu.

Siteleri için gelişmiş ve daha sezgisel bir navigasyon sistemi oluşturduktan sonrasında hipotezlerini doğrulamak için bir A / B testi başlattılar. Buldukları şey, tekrardan tasarlanan navigasyonun önceki navigasyon tasarımından% 21,34 daha çok dönüşüm sağlamasıydı.

Bu, eski Bizztravel navigasyonunun yeniye (bugün hala ayakta) karşı yakalanan yan yana karşılaştırması VWO’dur: Gördüğünüz şeklinde, gelişmiş navigasyon sistemi, ziyaretçileri daha sezgisel ve destek bir arayüze yönlendirmek için ülke bayrakları ve öteki tanımlanabilir semboller şeklinde daha net kılavuzlara dayanıyordu.

Gizli saklı Menüler
Gizli saklı ve görünür menüler hakkında konuştuğumuzda, hakikaten bahsettiğimiz şey, bir menünün bir sembolün arkasında (hamburger menüsü şeklinde) gizlenip gizlenmediğidir. Gizli saklı menüler mobil cihazlarda görüntülenen siteler için anlamlı olsa da, bu minimum gezinme ipuçlarının masaüstünde kullanıp kullanamayacağı sorusu UX uzmanlarının hakikaten merak etmiş olduğu bir şeydir.

Nielsen Norman Grubu masaüstü ve mobil internet sayfaları hem de gizli saklı menüleri kullandığınızda tam olarak ne bir tecrübe etmek için gözlem ve ortaya çıkarmak gerçekleştirmiş oldu. Bunu hangi internet sayfasında kontrol ettikleri hakkında bilgimiz olmasa da, testin kendisi yeterince açık olduğundan lüzumlu olup olmadığını bilmiyorum.

Sayfanın ortasındaki (mantıksal olarak yalnızca ana sayfaya bir bağlantı görevi görmesi ihtiyaç duyulan) simgeyi tahmin ettiyseniz, doğru tahmin ederdiniz.

Gizli saklı menülere karşı görünür menüleri kontrol ederken, NNG araştırmacılarının buldukları:

Masaüstü

Ziyaretçiler, denemelerin% 27’sinde gizli saklı menüyü kullandılar.
Bir menü göründüğünde, testlerin% 48’inde kullandılar.
Gizli saklı menüler, insanların bir internet sayfasında dolaşmak için daha uzun süre almasına niçin oldu; bilhassa, görünür bir menüye haiz olanlardan% 39 daha yavaştı.
gezici

Ziyaretçiler, deneylerin% 57’sinde gizli saklı menüyü kullandılar.
Bir menü kısmen görünür ve kısmen gizlendiğinde (mobil cihazda tamamen görünür bir menü ergonomik olmadığından), testlerin% 86’sında kullandılar.
Gizli saklı menüler, gezinmenin görünür bir menüye haiz olanlardan% 15 daha yavaş olmasına niçin oldu.
Ek olarak, araştırmacılar gizli saklı menülerin keşfedilebilirliği geciktirdiğini de buldular . Başka bir deyişle, web sitesinin üst kısmında açık bir rehber olmadan, kullanıcılar aradıkları detayları bulmakta daha zorlandılar. Gizli saklı menüler zorlukta% 21’lik bir artışa ve bir görevi tamamlama kabiliyetinte% 20’lik bir azalmaya yol açtı.

Mobil Menüler
Yukarıdaki örnekte de görebileceğiniz şeklinde, mobil kullanıcılar gizli saklı menü ile masaüstü kullanıcılarına gore kesinlikle daha çok informasyon sahibidir. Sadece, mobil cihazlar için gizli saklı bir menünün iyi mi tasarlanacağını belirlemeye ulaşınca, hamburger simgesine güvenmek ve bigün olarak adlandırmak kafi değildir. Google Sites for Profit’in bu testleri size nedenini gösterecektir.

Gelen ilk testte onlar yürütülen, onlar hamburger düğmeye tasarımın etkinliğini kontrol etmek için yola çıktı. Gizli saklı menü simgesinin üç sürümünü oluşturdular:

Bir tek üç yatay çizgi olan temel tasarım.
Çevresinde ince bir kenarlıklı hamburger simgesi.
Altında “MENÜ” kelimesi bulunan hamburger simgesi.
Buldukları şey, kenarlıklı simgenin daha yüksek bir dönüşüm oranıyla sonuçlanmasıydı. Onların varsayımları, ziyaretçilerin gözlerinin tıklanacak bir şey olarak çizildiği bir düğmeye daha oldukca benzediğiydi.

Yaptıkları ikinci testte, “MENÜ” kelimesinin öteki kapasitelerde kullanıldığında daha derin bir tesiri olup olmadığını bilmek istediler. Gizli saklı menü simgesinin dört sürümünü oluşturdular:

Önceki testten bir tek kazanan tasarım olan temel tasarım (kenarlıklı hamburger simgesi).
Herhangi bir simge yerine “MENU” kelimesi.
Hamburger simgesi ve “MENU” kelimesi ince bir kenarlığın içine sarılmış.
Kenarlık içindeki “MENU” kelimesi.
Hamburger / MENÜ’nün kenarlıklı en fazla tıklamayı aldığını; sadece, en yüksek dönüşüm oranına haiz bir sınıra sarılmış “MENU” kelimesiydi.

Kar Siteleri, “MENU” sözcüğünün hamburger simgesine gore açık bir kazanan olduğundan emindi, bu sebeple iyi malum ve açıklayıcı bir kelime, trafik çekmede insanların çoğunun bilincinde olmasa da bir çok kişinin bilincinde olduğu bir simgeden daha etkili olurdu. . Böylece iki testin kazananlarını aldılar ve son bir gözlem yaptılar .

Şaşırtıcı olmayan bir halde, sınırlandırılmış “MENU” simgeyi kazanmıştır.

Menü Tasarımı için Ek İpuçları
Peki, tüm bu A / B testlerinden navigasyon menüleri hakkında ne öğrendik? Ziyaretçilerin sitenizle iyi mi etkileşime girmiş olduğu mevzusunda pek doğru görünmeyen bir şey var ise, gezinme ihtimaller içinde bir suçludur. Mesela, ana sayfa tasarımınız yada bir dönüşüm pop-up ifadesi kadar düşünülmeyen yada planlanmayan bir şey için, muntazam ayarlanmadığı takdirde dönüşüm oranınız üstünde ciddi yıkıcı bir etkiye haiz olabilir.

Web sitenizin menüsünü tasarlarken aklınızda bulundurmanız ihtiyaç duyulan bazı ek ipuçları:

  1. İpucu
    Chat Logonuzu devamlı ana sayfaya bağlayın. Daha ilkin bahsedilen KoMarketing raporuna gore, insanların% 36’sı bunu başlangıca geri dönmek için kullanıyor.

REI internet sayfasındaki birden fazla menüye, arama çubuğuna ve üye bağlantılarına karşın, logo büyük ve mesuldür, böylece ziyaretçilerin ana sayfaya iyi mi geri dönebilecekleri mevzusunda hiçbir sual yoktur.

  1. İpucu
    Rahat tutun. Tek bir alanda ne kadar oldukca sayfa sıkışmaya çalışırsanız, birini şaşırtma şansınız o denli artar. Bu yüzden ya spektrumun alt ucundaki menü seçeneklerini (gerçekçi olarak beş ile yedi içinde) tutun ya da düzeni basitleştirin.

Öteki ajansların hizmetlerini, ziyaretçilerin hakikaten anlayamayacakları çeşitli alt sayfalara ayırmalarını izleyebilseler de, hoş ve kolay tuttular. Navigasyondaki üç sayfa ve keyifli bir animasyonlu kaydırma efekti, ziyaretçilere La Moulade ile çalışırken aldıkları işin kalitesi hakkında bilmeleri ihtiyaç duyulan her şeyi konu alıyor.

  1. İpucu
    Menünüzü önceliğe gore düzenleyin. Seri pozisyon tesiri daha yakın alt veya üst taraflarında yer sayfalar otomatik ziyaretçilerin kafasında öncelikli olacaktır söylüyor.

Sohbet odaları şovlarını alfabetik sırayla yada ziyaretçilerin aradıklarını derhal bulmasına destek olacak görünüşte mantıklı bir sırayla listelememeyi seçtiler. Daily Show’un en yüksek dereceli şovu bulunduğunu yada daha çok izleyicinin önüne koymak istediklerini varsaymak muhtemelen güvenlidir ve bu yüzden buraya en iyi slot verildi.

  1. İpucu
    Kısa fakat açıklayıcı menü sayfası başlıklarını kullanın. Bu, manşetlerle yaratıcı olmaya çalışılacak yer değil.
  2. İpucu
    Her ekran boyutu için menülerinizi olabildiğince geniş olarak oluşturun. Metnin okunmasını ve düğmelerin tıklanmasını kolaylaştırır.

Adwyse internet sayfası menü sayfa başlıkları hep okumak yeterince büyük olacak şekilde kaplıyor alanı maksimize büyük bir iş yapar ve tıklayın. Bu hem masaüstü navigasyonu için geçerlidir:

İpucu # 6
Menüde “You Are Here” ı göstermek için renk yada öteki fareyle üstüne gelme efektlerini kullanın. Sohbet, marka şu anda navigasyon içinde bulundukları bölgeleri ziyaret bildirmek için kırmızı iyi kullanır.

İpucu # 7
Ziyaretçilerin nereye kaybolduğu mevzusunda endişelenmemesi için navigasyonunuzu “sadık” hale getirin. Bu, tüm navigasyon stilleri için de geçerlidir: mobil yada masaüstü, görünür yada gizli saklı, yatay yada dikey.

Renkli Lines’ web onların süper renkli, simge odaklı ve devamlı mevcut dikey navigasyon ile bu iyi bir iş yapar:

  1. İpucu
    Mobil ve masaüstü kullanıcıları, kendileri için anlamlı bir menü ister, bu yüzden her insana uygun bir menü tasarlamaya çabalamayın. Intuit internet sayfası , şaşırtıcı bir halde, bunu yapmak için niçin gereksinim muhteşem örneği olarak hizmet vermektedir.

Ya mobilden ziyaretçileri yok ya da cevap vermeyen internet sayfasında dolaşmak için çimdikleme, yakınlaştırma ve kaydırma yapmaları gerekmiyor.

  1. İpucu
    Mobil cihazlar için bir menü tasarlarken menünün tıklanabilir bulunduğunu oldukca net hale getirmeyi ihmal etmeyin. Bir sınır bunu söylemenin mükemmel bir yoludur. İşte iyi mi Siyasal yapar:

İpucu # 10
Simgeler devamlı evrensel olarak anlaşılmamıştır, bundan dolayı mobil yada masaüstü için mümkün olduğunca kullanmaktan kaçının.

Brit & Co web sitesinin aslen iyi bir iş yaptığını öneriyoruz bu sebeple kullandıkları simgeler anında tanımlanabilir:

İpucu # 11
Derin, oldukca katmanlı menülere haiz olmak iyidir. Sadece, bu tarz şeyleri asla gizli saklı menülerin içine yerleştirmeyin. Devamlı bir mega menü tasarımı kullanın ve navigasyonu daha da basitleştirmek için ekmek kırıntıları eklemeyi düşünün .

Verizon Wireless internet sayfası bu iki kurala da uyar. İlk olarak, navigasyonlarında mevcut olan bilgiler hakkında tamamen şeffaftırlar ve mega menü yapılarını düzenlemede mükemmel bir iş çıkarmışlardır.

İkincisi, ziyaretçiler internet sayfalarına daha derinlemesine daldıklarında ekmek kırıntılarını ihtiva ederler ve gereksinim duymaları durumunda geri izlemelerine destek olurlar (bu, ürün ağır siteler için kullanışlı olur).

İpucu # 12
Siteye girdikten sonrasında yaratıcı bir gezinme kullanmak istiyorsanız (kaydırma yada animasyon kullananları düşünün), çekinmeyin. Sadece yaratıcılığın bittiği yer burası olmalıdır. Ana menüyü, tesis içi deneyimin geri kalanı için beklenen konuma yerleştirin.

Pek oldukca tasarımcı şu anda pop-up / slide-out işlevselliği ile oynuyor, bu sebeple bu beklenmedik hareket ziyaretçilerin dikkatini çekmekte hakikaten iyi görünüyor. Sadece pop-up’ların hususi tekliflerle ilgili acil mesajlara indirilmesine gerek yok, artık Bolden’in menüsünde olduğu şeklinde navigasyon için de kullanılıyorlar.

özet
Hepsi, bir tek iyi bir navigasyon deneyimi için neyin “kurallarına” uymanız ve içgüdülerinizin size yaptığınız şeyin mantıklı bulunduğunu, bunun devamlı ziyaretçilerinizin kabul edeceği anlamına gelmediğini söylemesi. Sitenizden beklediklerinden sapan yada aşırı karışıklığa yada hayal kırıklığına yol açan her şey potansiyel olarak dönüşümlere mal olabilir. Bundan dolayı A / B testi navigasyonunuz için mutlak bir zorunluluktur.

A / B navigasyonunuzu kontrol ederken dikkate alınması ihtiyaç duyulan birçok unsur vardır. Uzmanların yukarıda neler yaptığını inceleyerek başlayabilirsiniz, sadece bağlantı sayısı, renk seçimi, konum, boyutlandırma, ifadeler ve daha fazlasını da düşünmeyi ihmal etmeyin.


0 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir