Günümüzde kullanıcı deneyimi (UX) ve arayüz tasarımı (UI) üzerine yapılan çalışmalar ve yeniden tasarlanan uygulama ve websitesi çalışmalarını incelemeyi çok seviyorum. Özellikle sık sık kullandığım web siteleri veya mobil uygulamalarına farklı dokunuşlar tasarım egzersizi olarak çok iyi oluyor.

Bugün ise oldukça sık kullandığım Metro Market’in uygulaması içerisinde yer alan Metro Fast deneyimini kullanırken oldukça zorlanıyordum. Bunun üzerine bir çalışma yaparak egzersiz yapmanın iyi olacağını düşündüm.

Metro Fast nedir? (Bilmeyenler için açıklıyorum)
Market içerisinde kasa sırası beklemeden alışveriş anında aldığınız ürünlerin barkodunu mobil uygulamaya okuttuğunuz ve sonrasında ödeme noktasına alışveriş aracınızı yerleştirerek ödemenizi yaptığınız bir uygulama özelliği. (Aynı zamanda bu işlem el terminalleri ile de yapılabiliyor. Telefon varken ben bu deneyime ihtiyaç duymadım.)

Uygulama Kullanımında Yaşanan Sorunlar
Metro Market’e her gittiğimde uygulamayı açarak ürünleri okutmaya çalıştığımda metinleri okumakta zorlanıyor ve uygulamayı kullanırken sürekli geliştirmeye açık noktalar olduğunu tespit ediyordum. Yanlış kategorilere girip çıkmak, barkod okutma gibi işlemler arasında kayboluyor, zaman kaybediyorum. Aynı ürünleri tekrar okuturken bile arayüzün hızlı olmaması can sıkıcı oluyordu. Kısacası, hızlı ve kullanıcı dostu bir arayüze ihtiyaç duyuyordum.

Nasıl başladım?

Renkler
Gözlerimi kamaştıran ve odak noktamı dağıtan iç içe geçmiş olan bu renkleri daha sade bir kullanıma çevirmenin gerektiğini düşündüm. Bir sürü mavi tonu hatta gradient’lerin kullanıldığını görünce markanın branding kitabına ulaşmaya çalıştım, ancak bulamadım. Çok da vakit harcamak istemedim, kabaca tespit ettiğim lacivert ve sarı tonlarını seçerek renk konusuna karar verdim.

Fontlar
Çok severek kullandığım font Lexend’i burada da tercih ettim. Açıkçası, özgür kalmak istedim. (Markanın kullandığı Lato fontunu geçmiş projelerimde deneyimlediğim ve hatalı olduğunu düşünmem sebebiyle de bu özgür çalışmada tercih etmedim.)

Hatalar, deneyimler, ihtiyaç duyulan özellikler
Uzun süredir edindiğim alışveriş deneyiminden yola çıkarak ekran-ekran kullanıcı deneyimini ve arayüz tasarımlarını analiz etmeye başladım.

Unutmamakta fayda var!
Normalde bu çalışmaları yaparken Google Analytics, Hotjar, store yorumları, iç bildirimler gibi araçlar sayesinde nicel ve nitel bulgularla analiz ederim. Ancak markanın bu bilgilerine haliyle erişemediğimize göre ve özgür bir çalışma olduğu için şu an uzman analizi yapıyorum.

Tabi geçmiş 15 yıllık deneyimlerim bana bu konuda yardımcı oluyor ve olası bulguları kolaylıkla tespit etmemi sağlıyor. Yinede analizlerimde yanılma payımın olduğunu unutmayın. Neticede uygulamayı derinlemesine incelemeden gerekli verilere ulaşamadığımdan tahminlere göre yeniden çalışıyorum.

Haydi başlayalım.💨

•••

[1/7] — Giriş Ekranı
Oldukça karmaşık renk uyumları ve düşük okunabilirlik seviyesiyle, günümüz tasarım trendlerinden geride kalmış bir kullanımıyla uygulamayı açtığımda en çok rahatsız eden sayfa olduğunu düşünüyorum. Metro nedir? Metro Fast nedir? Metro Online ne işe yarar? Bunları akılda tutmak oldukça zor. Analiz yaparken, Metro ve Metro Online kategorilerinin birbirinden farkını tam olarak anlayamadım. İki kategori arasında benzerlik olduğunu düşünerek birini çıkardım.

Ayrıca, illüstrasyon kullanımı da zayıf ve ilk görünüşte anlaşılabilirlikten uzak olmasıyla göz yoruyor. Örneğin, bir ekrana baktığımızda, marka logolarının işlevselliği ve tanınabilirliği üzerinden ilerlemek isteniyormuş gibi duruyor. Ancak bu konseptin tam olarak uygulanmadığı gözüküyor.

Son olarak, Metro kart bilgisi oldukça içerikle orantısız bir şekilde kullanılmış görünüyor.

[1/7] — Giriş Ekranı: Neler Değişti?
Öncelikle markayı “Metro” altında birleştirdim. Kullanıcıya hoş geldin mesajı vererek ilk teması sağladım. Ardından, “Metro Fast” (mağazada barkod okuma) ve “Metro Online” (e-ticaret market alışverişi) deneyimlerini birbirinden farklı olmaları sebebiyle ayırmaya devam ettim. Ancak görsel olarak değişiklikler yaptım.
CTA butonlarını ikincil buton stilinde uygulayarak tutarlılık sağladım ve aşırı baskın hale getirmekten kaçındım. Böylece, kullanıcıların dikkatini “Metro Fast” ve “Metro Online” deneyimlerine odakladım. Bu tür kullanımlarda, yazı ile orantılı bir şekilde ikonlu gösterimlerin kullanılmasının kullanıcıların gözünü rahatlattığını düşünüyorum.
Bir kısmı görünen Metro kartını önem sıralamasında 3. sıraya alarak, görünümünde ufak dokunuşlar yaparak ve sayfa içerisinde aynı yerinde konumlandırarak düzenledim.

•••

[2/7] — Alışveriş Arabası QR Kodu
Bu deneyim içerisinde ilk sayfada gördüğümüz “super app” kullanıcı arabirimini görüyoruz. Ancak birbirinden farklı deneyimler olduğunu düşünürsek, sürekli olarak böyle bir arabirimin yer almasının yanlış olduğunu düşündüm. Neden mi? Örneğin, evde telefonumdan online alışveriş yaparken barkod okuma (Metro Fast) özelliğine ihtiyaç duymam olası değil. Bu düşünceden yola çıkarak, bu yaklaşımın hatalı olduğunu düşündüm.

Bir diğer arayüze bakalım, kullanıcıyı koşu yoluna çıkartan bir sayfada olduğumuzu görüyoruz. Ancak bunu keşfetmek ve anlamak açıkçası biraz zor.

[2/7] — Alışveriş Arabası QR Kodu: Neler Değişti?
Öncelikle, yukarıda bahsettiğim sebepten ötürü “super app” arabirimlerini kaldırdım. Böylece kullanıcıyı Metro Fast deneyiminde tutmayı hedefliyorum.

Koşu yolunu daha belirgin bir şekilde kullanıcıya göstererek sürecin kısa süreceğini ve gelecek sayfalarda kendisini nelerin beklediğini göstererek koşu yoluna çıkardım.

•••

[3/7] — Metro Kart Seçimi
Bir önceki ekranda yaşadığımız koşuyolu arabiriminin kullanıcı deneyimi sorununun bu ekranda da devam ettiğini görüyoruz. Bu sorunu çözdüğümüzü düşünerek atlıyoruz.

Kullanıcıların birden fazla kartı olduğunu ve alışverişte bu kartlardan herhangi birinin kullanıldığını anlıyorum. Metro Kart görseli hero olarak kullanılmış. Ancak hemen altında kelimelerden oluşan bir CTA butonu görevinde kullanılmış ve okunabilirliği zayıf olduğu için gerekli etkiyi vermediğini düşünüyorum.

[3/7] — Metro Kart Seçimi: Neler Değişti?
Metro kartı yatay konumlandırmak alandan tasarrufu etmemi sağladı.

Metro Kartlar içerisinden seçilebilen bir arayüzle tek ekranda kart seçimi yapılabilen bir arabirimle yeniden oluşturdum. Var olan ekranda “Başka kartla devam et” aksiyonunu ikincil buton olarak yerleştirerek okunabilirliği arttırmış oldum.

•••

[4/7] — Ürün Barkod Okutma
İlk etapta göze çarpan ve tüm uygulama genelinde sorun olan okunabilirlik problemi bu sayfada da karşımıza çıkıyor, özellikle ürün adı bölümünde. Kamera görüntüsünün üzerinde bu alanı kapatma arayüzü sabit bir şekilde bulunuyor. Buradaki “X” simgesi, kullanıcıya sürekli kapatma gerektiği hissini uyandırarak asıl amacın önüne geçiyor.

Bana göre, Metro Fast deneyiminin en zorlayıcı noktası bu ekranda. Tüm ürünleri barkoduyla okutarak alışveriş arabasına ekliyorsunuz. Ancak barkodsuz veya okunamayan ürünleri (örneğin kıvırcık, dereotu gibi) nasıl ekleyeceğinizi anlamak biraz zor olabiliyor. Biraz uğraştıktan sonra tesadüfen “üç nokta” menüsünü görüyorum, içinde ise gizlenmiş olan “barkodsuz ürün ekle”, “barkod gir”, ve “alışveriş arabası ekle” seçenekleri bulunuyor.

Metro Market’in öne çıkan özelliklerinden biri olan “çok al az öde” stratejisiyle, ürünleri sepete attıktan sonra kaç tane seçildiğini anlamak biraz zor oluyor. Ayrıca, bu özelliğin megafon ikonuyla gösterilmesi de anlaşılabilirlik açısından yetersiz kalabilir ve olası satışları etkileyebilir.

Barkodsuz ürün eklemek istediğinizde, “otlar, yeşillikler” kategorisindeki ürünleri göz taramasıyla bulmak oldukça zaman kaybettiriyor. Aynı zamanda, bu alanda kullanılan 3’lü grid düzeni, okunabilirliği zorlaştırırken, arayüzde kullanılan ideal yazı tipi boyutunu da etkiliyor.

[4/7] — Ürün Barkod Okutma: Neler Değişti?
Bu ekranın ana amacına uygun olarak yerleşimi koruyup kullanıcı deneyimini etkileyen faktörlere odaklandım.

Kamera görüntüsünü gizlemeyi gösteren arayüzü kaldırarak bottom sheet deneyimiyle geliştirdim. Böylece, sayfayı hızlıca yukarı çektiğimizde ekran tam sayfa olacak.
“Barkodsuz ürün ekle” ve “barkod gir” özelliklerini sayfaya doğrudan yerleştirerek daha erişilebilir hale getirdim.

“Çok al az öde” gösterimini ise mevcut görselle ürün fotoğrafının üzerinde göstererek dikkat çekmeye çalıştım ve mağaza içi fiyat gösterimiyle aynı deneyimi sundum.
Barkod girme ekranını cihaz kullanım deneyimine göre bottom sheet ile göstererek kullanımı kolaylaştırdım.

“Alışveriş arabası ayarları” özelliğinin aslında “alışveriş arabası ekle” amacıyla kullanıldığını fark ettim, bu yüzden bu özelliği doğrudan bir ikon butonla ayrı bir sayfaya yönlendirerek sürecin bozulmamasını ve layoutun korunmasını sağladım. (Bu kısımları tasarlarken deneyimledim, ancak bazı senaryoları atlamış olabilirim, affola.)
Barkodsuz ürünleri ayrı bir sayfada 2’li grid gösterimiyle düzenleyerek ferah bir layout sağladım. Binlerce ürün arasında aradığınız barkodsuz ürünü bulmak için sürekli scroll yapmak sinir bozucu olduğundan, bir arama kutusu ekledim. Böylece aradığınız ürüne kolayca ulaşabilirsiniz.

Ödeme özeti ekranını daha okunabilir hale getirmek için beyaz arka plan kullanarak font büyüklüklerini ideal ölçüye getirdim.

•••

[5/7] —Poşet Seçimi
Pop-up şeklinde açılan poşet seçimi, renk karmaşası içinde bir hata yapılmış hissi veriyor. Ayrıca, tipografik sorunlar da dikkat çekiyor.

[5/7] —Poşet Seçimi: Neler Değişti?
Pop-up yerine bottom sheet deneyimini kullanarak arayüzü daha erişilebilir hale getirdim. Mavi transparan üzerine mavi arka plan gibi göz yoran renk seçimlerini beyaz arka planda, okunabilirliği yüksek şekilde yeniden düzenledim.

Not: Bazı market e-ticaret sitelerinde poşet tercihi sepete eklenirken, bazılarında bu işlem otomatik olarak ödeme özetinde gösterilir. Bu tercihler operasyonel nedenlere dayanır. Bez, jüt, plastik, hasır vb. poşet ve çantaların seçimi kullanıcıya bırakılarak ödemeye yansıtılır. Bazı deneyimlerde ise sistem, içeriğe göre tek bir poşet tercihi sunarak tahmini adet ekler. Bu sebeple, Metro Market’in mevcut yapısına sadık kalmayı tercih ettim.

•••

[6/7] — Kasa QR Okutma
“Alışverişi Tamamla, Poşet Seç” yönlendirmelerinden sonra açılan bu ekran, beklenmedik bir şekilde pop-up olarak açılıyor. Bu durum beni sürecin dışına çıkmış gibi hissettirdi.

[6/7] — Kasa QR Okutma: Neler Değişti?
Deneyime başlarken kullandığım QR okuma layout’na sadık kalarak arayüz tasarımını tutarlı hale getirmiş oldum. Alışveriş arabası içerisinde olası tanımsız eşyaların olmaması gerektiğine dair bilgilendirme arabirimi yerleştirdim.

•••

[7/7] — Ödeme
Ürünleri ayrı faturaya bölmek için ayrılan bir sayfa. Gramajlı ve tanımsız ürünlerin olduğu bir uyarıyla karşılaşıyoruz. Ekranda yeşil bir onay işareti olmasına rağmen, bu sayfa kullanıcıya hata yapmış hissiyatı veriyor. Yetersiz kalıyor. Ardından “ödemeye devam et” butonu, uygulama içinde ödeme yapacağımız izlenimini yaratıyor. Ancak, devam ettiğimizde böyle bir durum gerçekleşmiyor.
CTA butonuna dokunduğumuzda, yetkiliye onaylatmamız gerektiğine dair bir uyarı alıyoruz. Ekranda yeniden Metro kartımız beliriyor ve ödenecek tutar gösteriliyor. Burada bulunan “ana sayfa” CTA butonu, birincil öncelikle kullanılarak kullanıcıyı hızlıca dokunmaya teşvik ediyor. Olası bir dokunuşta geri dönüşü olmayan bir sürece sokuyor. Bu durum gerçekleştiğinde görevliler, süreci manuel olarak yeniden başlatmak veya düzenlemek zorunda kalıyorlar.

[7/7] — Ödeme: Neler Değişti?
Kullanılan bu süreci analiz ederek 3 ekranı optimize etmeye karar verdim. Olası tanımsız, gramajlı ürünleri uyarı kutusu şeklinde sayfa içerisinde yer verdim. Faturayı 2’ye bölme özelliğini ne yazık ki deneyimleme fırsatım olmaması sebebiyle tahmine dayalı olarak yine bu sayfa içerisinde yer verdim.

Süreçte kullandığımız Metro kartını bu aşamada arayüz deneyimini tutarlı hale getirmek adına aynı şekilde kullanmayı tercih ettim.

Bahsettiğim problemleri göz önünde bulundurarak süreçte uygulama içinde ödeme yapılmayacağı hissini yok giderebilmek için birincil renkte CTA kullanmak yerine ikincil buton stilimde kullanarak kullanıcının sayfayı anında kapatmamasını sağladım.

•••

•••

Toparlamak gerekirse;

Uygulamada renk, tipografi ve arayüz elemanlarıyla ilgili birçok sorun bulunuyordu. Gördüğünüz gibi, yüksek bütçeler harcamadan da uzman görüşü ve ortak deneyimlerle dijital ürünlerinizi geliştirebilirsiniz.

Kullanıcı deneyimi ve arayüz tasarımcısı olarak, bir ürünü incelemek ve tasarlamak bana keyif veriyor. Umarım çalışmam katkı sağlamıştır. Süreçte merak ettiğiniz konular için yorum ve fikirlerinizi benimle paylaşabilirsiniz.

Modeminizin ışıkları hiç sönmesin, kalın sağlıcakla! 👋