Kullanıcı Deneyiminde Aramak ve Bulmak


Uzun ve yorucu bir günün ardından karnınızın acıktığını hissedip, internetten yemek sipariş vermeye karar verdiniz. Alışkanlıklarınıza bağlı olarak yemek siparişi verilecek web site veya uygulama çalıştırdınız.

A-) Ne düşünür, ne yaparsınız?

  1. Canınızın ızgara köfte çektiğini düşünerek arama kutusuna ‘Izgara Köfte’ yazarsınız.
  2. İlk karşınıza gelen Kampanya ve Fiyatlarına bakıp ilginizi çeken menu veya yemeği seçersiniz.
  3. Başkasının da tecrübe ettiği menu ve yemekler arasından seçim yaparsınız.
  4. Bölgenize yakın restoranlardaki menu veya lezzetleri aramak için Select Box’lardan bölgenizi seçersiniz.

Görüldüğü gibi kullanıcılar bu dört farklı yolu tercih edebilir. Bu tercihleri biraz daha kafa yorarak artırmanız daha iyi sonuçlar almanız sağlar. Daha basit anlatabilmek için dört alternatif üzerinden devam edeceğim.

B-) Böyle kullanıcı alternatifinin olacağı bir sitede bütün kullanıcılara istedikleri sistemi nasıl sunabiliriz?

  1. Sitede modül sistemi kullanıp, kullanıcı üye olduktan sonra kendine özel sayfasında sadece istedikleri modülü istediği yerde görüntüleyebilmesini sağlarız
  2. Tüm bu özelliklerin her biri için ayrı sayfalar tasarlar ve istediği özelliği kullanabilmesi için menu üzerinden seçim yapmasını sağlamaya çalışırız. ( Menu üzerine, Yemek Ara, Yakın Bölgeyi Ara gibi yönlendirmeler ekleyerek.
  3. Kuvvetli bir yardım bölümü (videolu, interaktif vb) hazırlayarak kullanıcıya alt sayfanın derinliklerinde istediğini bulabileceğini anlatmaya çalışırsınız.

  Görüldüğü bizim tasarlarken “arama kutusu olsun” şeklinde düşündüğümüz basit bir olay sitenin temel kullanılabilirlik altyapısını oluşturuyor. Bu yüzden tasarıma başlamadan önce mutlaka wireframe hazırlanarak kullanıcının nasıl davranacağını tespit etmek gerekiyor. Yukarıdaki problemi basitçe çözümlemeye çalışırsak, Acıktım!  İnternetten sipariş vereceğim. Yemek siparişi vereceğim web sitesi veya uygulamayı açıyorum. Arama kutusuna “Izgara Köfte” yazıyorum. Sonuçlar karşıma görsel ve metin şeklinde listeleniyor.

Listelenen sonuçlar arasında üst sırada bulunanlar benim bölgeme yakın restoranlardaki ızgara köfteler ve benim arkadaşlarımın beğeni ve/veya yorum yaptığı ızgara köfteler listeleniyor. Bunu anlatabilmek için liste içerisinde ikon ve ufak simgeler ile tasarım farkı yaratılıyor.

Bu farkı hissedip arkadaşım Caner’in daha önceden sipariş verip beğenmiş olduğu iki blok ilerideki  “Muhteşem Köfteci” den ızgara köfteyi seçiyorum. Tıkladığımda daha sonra kapatmam gereken yeni bir sayfa veya pop-up açılmıyor. Seçtiğim ızgara köfte kutusu expandable olarak aşağıya doğru uzayarak sayfa yenilenmeden ızgara köftenin fiyatı, içerisinde hangi bilgilerin olduğu ve ‘Sipariş Ver/Sepete Ekle’ butonunun olduğu ekran görüntüleniyor. Izgara Köfteyi beğenmiş bir arkadaşım olmadığını düşünelim. Öyleyse çevremde iyi bir köfteci olmadığını düşünerek yemek menuleri arasından başka bir yemek seçmeyi düşündüm. Arama sonuçlarını sekme haline getirerek yanında yemek menulerimizi gösterebiliriz.

Kullanıcı ile daha fazla etkileşime girebilmek için ürün detay sayfasında Puanlama, Yorum, Listeme Ekle, Favorilerime Ekle butonları eklemek zorundayız. Ancak bu kadar çok butonu basit bir ürün bilgisi ekranında aşırı dikkat çekecek şekilde sergilemeye çalışmak ürünü satma amacımızdan uzaklaşmamıza neden olacaktır. Görsel açıdan kargaşa yaratmayacak şekilde, ilgiyi ürün dışına çıkarmadan, kullanıcının mouse ile üzerinde olma ihtimali en yakın olan “Add to Basket” butonunun sağ üst köşesine ikonlar yardımı ile ekleme çalışıyoruz.

Yorumları süreki ekranda göstermek yerine ürünün sağ tarafına eklediğimiz navigasyona tıklanınca gözükecek şekilde yorumları ekliyoruz.

B sorusunun  İkinci  alternatifine göre kullanıcıya biraz daha fazla seçenek sunmak için yeni özellikler eklememiz gerekiyor. Restoranlar ve yemek menu’lerini arama sonuçlarının yanına tab sekmesi şeklinde eklersek kullanıcı eski aramalarını kaybetmeden menu ve restoranlar arasında gezinebilir.

Yakın Bölgeleri arama gibi bir özellik ekleyeceğimizi söylemiştik. Ancak ‘Yakın Bölge’ kullanıcı için göreceli bir kavram. Harita üzerinde alan seçmenin kullanıcı için zor bir işlem olması sebebiyle daha basit bir tasarım ile çözmemiz gerekiyor. Ufak bir beyin fırtınası yaparak sipariş sürecinde kullanıcının kafasında “Acaba kaç dakika gelir?” sorusunun oluştuğunun farkına vardım. Soruya basitçe cevap verecek şekilde, arama sonuçlarının hemen üst kısmına yeni bir navigasyon ekliyoruz.

Kullanıcının kafasında oluşan “Ne kadar?” sorusuna cevap vermek için sağ üst köşeye fiyat aralığı belirleyebilecekleri bir navigasyon yerleştiriyoruz. Fiyat aralığı seçerken iki işlem yapmamıza gerek olmadığını anlayarak sadece başlangıç fiyatını belirleyebileceği bir tasarım yapıyoruz.  Bu sayede kullanıcı sayfayı aşağıya sürüklediğinde yeni eklenen ürünler belirlediği fiyattan daha yüksek veya daha az ürünler görüntülenecek.

Sonunda aşağıdaki gibi bir wirerame çizmiş olduk.

Basit bir ‘Arama’ özelliğini sorgulayarak kullanıcının aklını karıştırmada gezinebileceği basit ve kullanılabilir bir wireframe hazırlamaya çalıştım. Umarım yeterince aktarabilmişimdir. strong


Leave a Reply

Your email address will not be published. Required fields are marked *