LC Waikiki Mobil Uygulamasını Nasıl Tasarladık? — B.6: Ürün Detay

Bölüm sonu canavarını geçtiğimiz için artık bir başka önemli sayfaya geldik; Ürün detay sayfası. Tüm kullanıcıların net şekilde en çok ilgilendiği sayfa bu. Bu bölümde ürün detay sayfasının sürecini anlatacağım.

“Bölüm Sonu Canavarı”nı okumak isterseniz aşağıdaki linkten okuyabilirsiniz, diğer bölümler için, burayı bir bağlantı (link) pazarına çevirmek istemediğim için, hemen sağ taraftaki bağlantılara bakabilirsiniz.

Yaralarımızı Sarıyoruz

Kategori sayfasından yorgun çıkmıştık. Aramızda linkedin profilinde ünvanını “gazi analist”, “kahraman tasarımcı” olarak değiştirmeyi düşünenler bile vardı; fakat yaralarımızı sarıp yeni sayfaya başlamak için de sabırsızlanıyorduk. Planlamamıza göre sırada, ana akışın bir diğer adımı, ürün detay sayfası vardı.

Bu sayfaya kullanıcının uygulamayı indirmesinin asıl amacı olarak da bakabiliriz. Ödeme-öncesi’nin (pre-checkout) son adımı. Bu noktada kullanıcı beğendiği ürünle baş başa kalıyor. Biz de bu özel anı pekiştirmek için tasarım yapmalıydık.

Fotoğrafı bi’ tık büyütebilir miyiz?

Bir e-ticaret sitesinin ya da uygulamasının en büyük problemleri şunlardır;

1- Karşında bir muhatap yoktur.

Bu muhatap mağazada sana her adımda yardımcı olabilir, ürünün bedenini bulabilir, kasayı gösterebilir ya da farklı mağazadan stok kontrolü edebilir.. Bir sürü şey yapabilir; ama özünde bir cama bakıyor olmak bunu sağlayamıyor.

2- Ürünle fiziksel temas yoktur.

İşte en büyük problem budur. Mağazada alışveriş yapma deneyimi bütünüyle tüm duyularına hitap eden bir şeydir. Ürünü görebilirsin, dokunabilirsin, etrafta mağazanın müziği ve kokusu vardır onları duyar, hissedersin. Cama bakarken bunlardan yalnızca görme duyusu çalışır. Diğerleri ne yazık ki işlevsiz kalır. Aslında bu konuyla ilgili teorik bir fikrim var; ama nörobiyoloji bilgim çok çok çok sınırlı olduğu için teorik olmaya devam edecek. En azından şimdilik. Takipteyiz Nörobiyoloji! 🙂

Bir muhatap yaratma konusunu bir çok farklı yaklaşımla bir nebze de olsa çözmeye çalıştık, gerisi gelecek. Başlangıç olarak kullanıcının sorması muhtemel sorulara, alacağı cevapları daha rahat ve sayfa içerisinde aramadan ulaşabilmesi için çalıştık. Beden seçenekleri, renk seçenekleri, ürünle ilgili açıklamaları, ürünün özellikleri, modelin giydiği beden, modelin ölçüleri gibi bilgileri çok detaylı verirsek muhatap konusunu bir nebze çözmüş olurduk. En azından kullanıcı bir muhatap olmadığı gerçeğini unuturdu. Ki genellikle kullanıcı muhatap olmadığı gerçeğini kabul ederek bir e-ticaret alışverişine başlıyor.

Bu noktada ikinci problem çok daha önemliydi. Fiziksel teması olmadığı için (sosyal mesafeni koru) ve ürünü yalnızca görebildiği için bu konuda bir şeyler yapmak gerekiyor. Fiziksel temas eksikliğini de unutturmak önemli. Tabi bu noktada iş daha çok içerikle ilgili diye düşünülebilir; ama önceki yazımda da bahsettim tek başına içerik ya da tek başına tasarım bir yere kadar başarılı olur. İkisinin de aynı amaca hizmet etmesi başarıyı asıl getiren nokta olacaktır.

Bu noktada kullanıcının duygularına oynamak en güzel hareket olacaktı. Ürün detay sayfasına girdiğinde çok doyurucu bir his yaşamalıydı.

O yüzden ürün detay özelinde bir “eylem akışı” planladık. Bu şöyle bir şeydi;

Kullanıcı ürün detayına girer. Öncelikle ürünün fotoğrafını, sonrasında ismini ve fiyatını görür. Bu noktada sepete ekleyebilir, isterse ürünü favorisine ekleyebilir isterse paylaşabilir. İlk gördüğü ekranda tüm uygulamada yapmaya çalıştığımız gibi yine yalnızca öncelikli olarak görmesi gerekenleri görecek kullanıcı.

Burada amaçladığımız deneyim, ürünle başbaşa kalmasını sağlamak. Ürün detayı, renk seçenekleri gibi detayları sonrasına saklayarak, ilk önce beğendiği ürünü detaylı şekilde görebilmesini sağlamalıydık. Elimizde kullanabileceğimiz bir tek görme duyusu olduğu için bu sayfanın tümüyle o duyuya odaklanmış olması önemliydi. Tabi bu tam ekran fotoğraf açalım bangır bangır ürün fotoğrafı gösterelim demek de değildi. Ürün fotoğrafı ve ürün bilgileri arasında bir denge kurulmalıydı.

Tüm uygulamada yapmaya çalıştığımız ve benim neredeyse her bölümde bahsettiğim “kompakt tasarım” çizgisinden de çıkmamamız önemliydi tabi.

Tüm bunları birleştirdiğimizde ortaya çıkan sonuç şu oldu;

Image for post

Bu noktada belirtmem gerekn bir yer var. Ürün fotoğraflarını dikey eksende değiştirme kararı aldık. Bu nokta alışılmış deneyimlere biraz ters geliyor. Kullanıcı, yatay hareketle görsel değiştirmeyi bekliyor. Hepimiz öyle bekliyoruz. Bu kararı vermemizin birkaç sebebi vardı.

Arkadaşlar hazırsanız radikal bir karar alıyoruz

Tüm uygulama genelinde, tüm sayfalarda bir dikeş eksende akış söz konusu. Kompakt tasarım ile yapmaya çalıştığımız “ihtiyaç duyduğun anda, ihtiyaç duyduğun kadar içerik” diye özetleyebileceğimiz stile dikey eksende bir akış daha uygun. Mobil uygulamalarda akış “navigate” ile sağlanıyor. Kısaca bir butona ya da bağlantıya tıkladığınızda eğer sayfa sağa ya da sola kayarak ekrana geliyorsa bunu navigate olarak düşünebilirsiniz. Akışın bir sonraki adımına geçtiğinizi iç güdüsel olarak kullanıcı buradan anlar. Bizim en baştaki hedefimiz akış sayısını minimuma indirmek olduğu için yatay hareketleri yalnızca ana akışı ilerletmek için kullanacaktık. Akışın her adımında hareketler “mümkün olduğunca” dikey eksende olacaktı.

Bir de ürün detay özelinde yatay hareketle ilgili başka fikirlerimiz vardı ona yer açmak istedik. Önden kullanıcı dikey hareketlere alışırsa, sonraki fazlarda yatay hareketlere farklı özellikler eklediğimizde daha rahat adapte olabileceklerdi.


UX’in önemini anlatan bir kıssa

Kullanıcı araştırmalarından çıkan sonuçları analiz ederken şöyle bir durumla karşılaştık. Kullanıcılar, yeni özelliğimiz olan “Mağazada Ara” özelliğimizi çok sevmişler ve bunu dile getirmişler. Bu özelliği çok da kullanışlı bulmuşlar. Bu geribildirimler bizim için çok güzel. Ama Bu noktada şöyle büyük bir sıkıntı var; bu özellik eski uygulamamızda da vardı! Neredeyse aynı şekilde çalışıyordu hatta.

Çalışmanın en başında eski uygulama ile ilgili geribildirimleri incelerek bu konuyla ilgili beğenilmeyen bir noktaya rastlamamıştık. Kullanıcılar bu özelliği beğeniyorlar ve tam da ihtiyaçlarını karşılayacak şekilde, kolayca kullanabiliyorlar sanıyorduk haliyle. Yeni araştırmadan çıkan sonucu gördüğümüzde konunun öyle olmadığını, kullanıcıların mağazada ara özelliğini hiç görmediklerini anladık.

Benim bu durumdan çıkarttığım sonuç şöyle oldu ve bunu bundan sonraki tüm projelerde aklımda tutacağım; bir özellik/hizmet hakkında kötü bildirim yoksa, kullanıcı görmemiş olabilir.


Klasikleşmiş soruya geldik; başardık mı?

Kullanıcı geri bildirimlerine baktığımızda başardığımızı görebiliyoruz. Özellikle ilk görüşte kullanıcı epeyce etkilenmiş. Ürün detayının en önemli iki maddesini aynı anda ve sadece onları görebilmek kullanıcıda olumlu bir izlenim bırakmış.

Yapmaya çalıştığımız kompakt tasarım ürün detay sayfasında, belki de uygulamanın genelinde olmadığı kadar, ön planda. Kullanıcı, ihtiyacı olanı, ihtiyaç duyduğu zaman görebiliyor olması çok olumlu karşılanmış. Belki abartıp uygulama içinde bir “keşif duygusu” bile vermiş olabiliriz kullanıcıya. Bu kanıya varmak için, bu konu özelinde birkaç araştırma yapmak gerek tabi.

Bir sonraki bölüme kadar görüşmek üzere.

Okuma için teşekkürler.

Yazan /

selcukavc@gmail.com

Kafa kağıdımda doğum tarihim 1 haziran olsa da, annemin verdiği bilgilere dayanarak söylüyorum ki Mayıs ayının 29.günü, beş buçuk kilo ağırlığında, Sakarya ilinin şirin mi şirin Karasu ilçesinde dünyaya gelmişim.

Yorumla