Kusursuz mobil deneyim için 7 önemli kural
Bu yazımda sınıfında en iyi mobil sitelerden biri olan B&H Photo firmasının mobil sitesini baz alarak bu 7 önemli kuralı sizlerle paylaşacağım.
Kullanılabilirlik testinden sonra 18 mobil e-ticaret sitesi ve mobil’i büyük ölçüde kullanılabilirlik performansı üzerine 50 büyük e-ticaret sitesinde kıyaslama yapılarak ve nihayetinde 5.000'den fazla manuel olarak incelenen UX referans parametrelerini analiz ettikten sonra şu hususlar ortaya çıkmakta:
- Mobil e-ticaret sitelerinin % 78'i, mobil sitede ürün bulma deneyimini incelerken zayıf bir performans sergiliyor; bu öncelikle ana sayfa, kategoriler arasında gezinme ve yerinde arama deneyimi ile ilgili.
- Mobil sitelerin % 54'ünde iyi veya makul bir ürün sayfası performansı var.
- Mobil kullanıcıların satın alma işlemlerini tamamlama yeteneği, sitelerin % 84'ünde ciddi mobil ödeme kullanımıyla ilgili sorunlar olduğunu göstermiştir ve mobil sitelerin% 46'sı temel alan kullanımıyla ilgili sorunlara sahiptir.
Bununla birlikte, karşılaştırma ölçütümüz, bu durumdan birkaç sitenin öne çıktığını ve kullanıcılarına genel olarak mükemmel bir mobil alışveriş deneyimi yaşattığını ortaya koydu. Bu sitelerden biri, elektronik perakende şirketi B & H Photo’dur. En yüksek hasılat yapan 50 ABD e-ticaret sitesinin mobil kullanılabilirlik ölçütünü (Home Depot, Sears, Target ve Nike)geçerek birinci sırada yer aldı.
B & H Photo’un genel mobil UX performansının çoğunun, kalan 49 önemli mobil ABD e-ticaret sitesinin ortalama puanının yaklaşık % 600 üzerinde harika bir ürün gezinme ve arama deneyiminden kaynaklandığı gözükmektedir.
Bu yazıda B & H Photo’da kullanılan 7 adet belirli mobil UX uygulamalarını anlatacağım.
1) Kullanıcıların Ana Sayfa İçeriğinden Sitenin Türünü İncelemesine İzin Verin (% 42)
Kullanıcılar, bir mobil sitenin ana sayfasında gezindiklerinde, ilk zamanı sitenin türünü belirlemek için kullandıklarını gözlemlendi. Aslında, kullanıcıların % 70'i, neredeyse tüm mobil ana sayfasında yukarıdan aşağı kayarak girmiş oldukları sitenin ne konu üzerinde yoğunlaştığını anlamak için içeriğini hızla tarayan bir davranış sergiliyor.
Yukarıdaki resimde yer alan ana sayfaların, kullanıcılar için güç aletleri, büyük aletler ve malzeme aramak için doğru site olduğunu taramanın özellikle net olmadığına dikkat edin. Blender veya mutfak ürünleri arıyorsanız, Crate & Barrel doğru yer değil gibi gözüküyor.
Test oturumları ayrıca doğrudan veya dolaylı olarak ana sayfa içeriğiyle temsil edilen üst kategorilerin kullanıcı açısından açıklayıcı olmasının en az %30–40'ına sahip olacak şekilde sorunun çözülebileceğini göstermektedir:
- Doğrudan basitçe bir kategori bağlantıları koleksiyonunu (veya yalnızca üst düzey kategorilerin hepsini) ana sayfada listeleyerek.
- Dolaylı olarak, ana sayfada küçük resim koleksiyonunun görsel olarak, sitenin üst düzey kategorilerinin genişliğinin % 30–40'ını temsil etmesini sağlayarak dolaylı olarak kullanıcıların iniş yaptıkları sitenin türünü görsel olarak çıkarabilmesini sağlar.
Ne yazık ki, en çok satan 50 mobil ABD e-ticaret sitesinde gösterilen kriterlere göre,% 42'lik bir grubun, her ikisinde de başarısız olan bir ana sayfa tasarımına sahip olduğu görülmektedir.
Tabi ki, doğrudan ve dolaylı yöntemleri (B & H gibi, üst düzey kategorilerinin % 92'sini görsel olarak temsil ederek) birleştirebilirsiniz. Bu, ana sayfanın “scroll ve tarama” işlemini yürüten tüm kullanıcıların, sayfada iniş yaptıkları sitenin türünü doğru bir şekilde anlamasına olanak sağlayarak, sitenin ürün kataloğunun genişliğine ilişkin doğru bir zihinsel model oluşturmasına yardımcı olur.
2) Tematik veya Kılavuzlu Gezinme Sağlayın (% 34)
Mobil e-ticaret sitelerinin % 34'ü “tematik” ürün tarama hizmeti sunmuyor; bu da yaygın tematik satın alma modellerine sahip kullanıcıların örneğin; bir çift “rahat erkek ayakkabısı”, bir “bahar ceketi”, “yaban hayatı fotoğrafçılığı için kamera” vb.
Kullanıcıların temalarla gezinme arzusu masaüstü sitelerinde de aynı derecede güçlü olmakla birlikte, mobil platformun sınırlamaları (özellikle ekran boyutu) nedeniyle kullanıcılar için neredeyse imkansız hale getirdiğinden, tematik gezinmenin mobil destek verilmemesinin en önemli eksikliklerinden biridir.
Mobil testler sırasında, kullanıcıya bir dizi tematik kriter aracılığıyla doğru ürünü bulmasına yardımcı olan ürün rehberleri olabilir. Örneğin, kullanıcıların belirli ürün özelliklerinden ziyade alıcı veya kullanım türünü belirleyebildiği bir filtreleme seçenekleri kullanıcıya sunulabilmeli.
Mobil e-ticaret testi sırasında tespit edilen bir diğer şey, tematik navigasyonun nasıl sağlandığı biçiminin biraz ikincil olmasıdır. Kısacası önemli olan tematik navigasyonun mevcut olması ve kullanıcıların kendisine giden yolu / yolları kolayca bulabilmeleri. B & H’de bu, tüm sitenin tematik içeriğini içeren ana gezinme bölümünde belirgin olarak bulunan genişletilebilir bir öğeyle çözülmüştür.
3) Kullanıcıların Mevcut Kategorisinde Arama Yapmasına İzin Verin (% 94 Do not)
Mobil kullanılabilirlik testleri sırasında kullanıcının davranışları gözlemlendi. Kullanıcılar bir mobil sitenin kategori gezintisine göz attığında, konuların % 50'sinden fazlası içerisinde bulunduğu kategoriden ürün araması yaptığı belirlendi.
Kullanıcılar bir ürün listesine yönlendirildikten sonra bu kategoride arama yapabilmelerinin kendileri için önemli olduğunu ve işlerini daha kolaylaştırdığını göstermiş oldu. En azından %50 gibi bir orandaki kullanıcıların bulundukları kategori sayfasının üst tarafında bir arama alanının bulunması gerektiğini düşünmekte.
Resimde görüldüğü gibi Overstock’da ilk resimde görülen “TV” gibi bir kategoriye giren kullanıcılardan birçoğu kategoride 40 gibi bir arama yaparak kendilerine 40 inc’lik TV ‘lerin gösterileceğini düşündüler. Ancak Overstock genel olarak site içerisinde arama yaptığı için, arama sonucunda alakasız sonuçları kullanıcılara sunabilmektedir. Bu durum kullanıcıların işlerini zorlaştırdığı ve istedikleri ürüne erişimlerini engellediği için kullanıcıların istemeyeceği bir sonuç diyebiliriz.
Resimde görülen B&H Photo sitesinde ise bu durum gayet başarılı bir şekilde gösterilmiştir. Kullanıcılar “77mm” şeklinde arama yaptığında, kullanıcılara filtreleme yaparak hangi kategori içerisinde arama yapmasını istediğini kullanıcıya sorar ve kullanıcının ürüne daha kolay ve hızlı şekilde ulaşmasını sağlar.
Genel olarak, arama davranışları ile ilgili dikkat edilmesi gereken üç etken bulunmakta:
- Otomatik tamamlama önerilerinde, öncelikle kullanıcının içinde bulunduğu yolu önerin.
- Kapsamlı bir arama alanına sahip olunmalı.
- Site çapında arama alanını bir simgenin arkasına daraltın ve ardından özel bir arama alanı sağlayın.
4) Ürün Sayfası, Aksesuar Ürünlerinin Ayrıntılı Listesini Görüntülemelidir (% 56)
E-ticaretle ilgili geniş ölçekli kullanılabilirlik çalışması sırasında, alternatif ürünlere yönelik ürün sayfası önerilerinin kullanıcıya “doğru” ürünü bulmasına nasıl yardımcı olduğu gözlemlendi. Yapılan araştırmalar süresince kullanıcıların hem alternatif hem de ek ürün önerilerinden doğrudan bir ürün sayfasına giderek bu durumdan yararlandığı tespit edildi.
B & H Photo’da uyumluluğa bağlı aksesuar ürünlerine gidilebilme özelliği her ürün sayfasında özel bir “Aksesuarlar” sekmesi ile kusursuz şekilde uygulanmaktadır. Kullanıcılar, bu sekmede, ürün türüne göre düzenlenmiş veya popülerlik sırasına göre sıralanmış eşleşen aksesuarları bulabilir. Bu, kullanıcıların bulmasını istediği bir ürünü alırken diğerine de ihtiyaç duyacağı varsayılarak, ilgili ürünler kullanıcıya sunulmalıdır. Örnek vermek gerekirse kullanıcı bir fotoğraf makinesi siparişi verdiğinde kullanıcıya bir hafıza kartı, bir lens ve bir fotoğraf makinesi çantası ürünlerini sunularak kullanıcının bir sonraki ihtiyaç duyacağı ürün kullanıcıya sunulur.
5) Ürün Listelerindeki Farklı İlgi Alanlarını Sağlayın (% 28)
Önemli olduğunu kanıtlanan mobil etkileşim ayrıntısı, çok sayıda tıklanabilir alana sahip ürün listelerindeki tıklanma alanlarını açıkça belirtiyor veya alternatif olarak her bir liste öğesinin geniş bir tıklanma alanına sahip olması gerekiyor. Kullanıcılar, bir listeden belirli bir seçeneği seçmek için nereye dokunacaklarını, verili bir seçeneğin nereye gideceğinden emin olmadığında birçok sorunla karşılaşılması beklenen durumdur.
Kullanıcılar, istenen bir seçeneği seçerken olduğu gibi, temel olarak bir şeylerin etrafında rahatsızlık ve karışıklık yaşayabildiğinden, bu durum doğal olarak ciddi sorunlara neden olabilir. Mobil test sırasında net olmayan tıklanma alanları, kullanıcıları oldukça rahatsız etmesinin yanı sıra bazı durumlarda sitenin terk edilmesine neden oluyordu.
Çözüm, ürün listesindeki her bir tıklanma alanını çok belirgin bir şekilde stil etmektir (bir satın alma düğmesi, karşılaştırma seçeneği, renk değiştirme gibi şeyler eklemek isterseniz gereklidir) veya her bir ürünün liste öğesinin büyük tıklama alanı olmasını sağlamaktır. Bu kullanıcıyı ürün sayfasına götürür.
Resimde görüldüğü gibi, B & H Photo’da tıklama alanı, her bir liste öğesinin büyük bir tıklama alanına sahip olmasıyla birlikte “kart” liste öğesi tasarımı kullanılarak gösterilir ve ürün sayfasına yönlendirilir. Buna ek olarak, liste öğesine dokunulduğunda gösterilen liste öğesi kenarlığı çevresinde bir gölge gözükmektedir. Bu nedenle kullanıcıya basit ve geniş bir tıklama alanı sunulması önerilirken, belirli alanlar, çizgi ve renklendirmeler ile belirtilerek kullanıcının rahat bir şekilde tıklama işlemlerini yapabilmesini sağlamak önerilmektedir.
6) Dokunmatik Klavye Uygulamasını Mükemmelleştirin (% 85)
İyi bir dokunmatik klavye kullanılabilirliği, kredi kartı alanı için sayısal bir klavye gibi mevcut ve en uygun dokunmatik klavyeyi kullanmanın ötesine geçer. Büyük ölçekli mobil e-ticaret kullanışlılık testlerinde, otomatik düzeltme ve otomatik büyük harf oluşturma ayarlarını uygun bir şekilde yapılandırmanın, mobil alan kullanılabilirliği için çok önemli olduğu tespit edildi.
Yukarıdaki resimlerde hatalı durumlar belirtilmiştir. Örnek olarak Amazon(Resim 1) sitesinde adres satırı 1 için otomatik düzeltme devre dışı bırakılmadığı için kullanıcının adresini yanlış yazması kaçınılmaz durumdur. Grainger(Resim 2), kredi kartı alanı için sayısal bir tuş takımını çalıştıramaz ve kullanıcının yazım yanlışı yapma olasılığı oldukça yüksektir. Bu durum kullanıcı için risk taşıyabilir. Newegg(Resim 3), e-posta alanındaki otomatik büyük harf kullanımını devre dışı bırakmamakta ve birçok kullanıcının bunu manuel olarak kendilerinin düzeltmesi gerekmektedir. Dikkatsiz bir kullanıcı için bu durum da risk taşımaktadır.
Kullanıcıların sorunsuz yazı yazma deneyimini mümkün kılmak için toplamda 5 dokunmatik klavye yönergeleri uygulanmalıdır.
- Kısaltmalar, cadde adları, e-posta adresleri, kişi isimleri ve sözlükte olmayan benzer kelimeler gibi alanlarda otomatik düzeltme devre dışı bırakılmalıdır.
- Kredi kartı girişi için sayısal tuş takımı veya telefon alanı için telefon klavyesi gibi ilgili alanlar için optimize edilmiş klavyeleri çağırın. Bu, kullanıcılara % 500'e kadar daha büyük anahtarlar sağlar ve yazım hatalarını büyük oranda azalttığı gözlemlenmiştir.
- Alanlar arasında geçiş yapmak için “Sonraki” ve “Önceki” tuşlarını kullanarak formdaki bir sonraki mantık alanına ilerlenildiğinden emin olunmalıdır.
- Girdinin büyük harfle oluşturulamayacağı alanlar için otomatik büyük harf kullanımı devre dışı bırakılmalıdır(e-posta alanı gibi).
- Dokunmatik klavyeler, tüm ödeme akışlarında tutarlı bir şekilde çağrılmalıdır.(ör. posta kodu, kart numarası ve güvenlik kodu için sayısal klavye) Bunun sebebi kullanıcılar uygun olmayan bir klavyenin göründüğü alanlarda yazacakları şeyden ikinci olarak şüphelenmeye başlayabilir.
B&H Photo, mobil sitelerinde, “mükemmel” dokunmatik klavye uygulaması sunan sitelerin % 15'i arasında yer almakta ve yukarıda bahsedilen 5 ilkeye bağlı olarak bu başarıyı sağlamaktadır.
7) Doğrudan Nakliye Seçiminde ‘Mağaza Alma’ Görüntüleme (% 47)
Mağaza alımı, çok kanallı sitelerin “yalnızca çevrimiçi” rakiplerine kıyasla rekabetçi tutumlarından biridir.
Toysrus’un sipariş sayfasında kullanıcılara sol resimde olması gereken mağaza seçimi ve nakliye yöntemi seçim adımında (sağ resim) herhangi bir yerde görülmemekte. Mobil ortamda, bazı kullanıcıların mağaza seçim özelliğini nerede bulacağına dair beklentileri karşılanmaz ve bu durum kullanıcıların mağazayı değerlendirmesini zorlaştırır.
Mağaza alımının sevkıyata kıyasla daha değerli bir alternatif olup olmadığını değerlendirmek için kullanıcıların, kendi maliyetlerini ve hızlarını karşılaştırabilmeleri için birbirinin yanında sunulan iki seçeneğe ihtiyaç duymaları ve bu nedenle, siparişin alınmasının zorluğundan memnun olup olmadıklarını değerlendirmeleri gerekir.
B & H Fotoğraf: Harika Ürün Gezinme ve Arama
B & H Photo, mükemmel bir mobil kullanıcı deneyimini kullanıcılara sunarak, kullanıcılara kategori içerisinde o kategoriye özel anahtar kelimeler vasıtasıyla kullanıcıların ulaşmak istedikleri ürüne daha kolay ve hızlı şekilde arama yaparak ulaşmalarını sağlamaktadır. Ayrıca ürünler arasında rahat tıklama alanları, kategoriler arasında kolay geçiş yapabilme, dokunmatik klavyeyi kullanıcının en kolay şekilde kullanmasını sağlayarak kullanıcıya mükemmel bir mobil kullanıcı deneyimi sunmaktadır. Kullanıcılara harika bir mobil deneyim sunulmak isteniyorsa yazımda bahsettiğim 7 hususa dikkat edilmelidir.
