UX/UI Süreç İyileştirmesi

Bu makalede size; bir sistem üzerindeki sürecin (kayıt olmak vb.) kullanıcı deneyimi ve kullanıcı arayüz tasarımı olarak nasıl ve hangi yöntemlerle adım adım iyileştirebileceğinizi anlatmaya çalışacağım.

SENARYO

Öncelikle kendimize bir senaryo hazırlayalım. Bir müşterimiz olsun ve bu müşterimiz bizden uygulamasının kayıt olma sürecini iyileştirmemizi istesin. Bu senaryoda uygulama ise Tchibo’nun mobil uygulaması olsun.

Marka Analizi

Evet artık işi aldık Tchibo’nun mobile uygulamasının kayıt olma sürecini iyileştirmemiz gerekiyor ancak hemen işe paldır küldür girmemeliyiz. Öncelikle; Tchibo markası nedir? Çalışma alanları nelerdir? Gibi ana soruları cevaplandırmamız lazım.

Tchibo Markasının:

Tam Adı: Tchibo

Web Sitesi: https://www.tchibo.com.tr

Ana Sektörü: Kahve

Aktif Olduğu Ülkeler: Rusya, Çek Cumhuriyeti, Bulgaristan, Polonya, Slovakya, İsviçre, Türkiye, Romanya, Macaristan, Avusturya, Almanya, İngiltere

Kurumsal Kimlik Kontrolü: Kurumsal kimlik yok

“Bu bilgiler bizim ne işimize yarayacak?” diye soruyor olabilirsiniz tabii ki. Ancak bu bilgiler dahilinde kullanıcıların yaş skalası ve kültürü hakkında bir nebze bilgi sahibi olup buna göre adımlarımızı atabiliriz. Burada ki en önemli soru ise Kurumsal Kimlik Kontrolüdür nedenini aşağıdaki bölümü okuduğunuzda daha iyi anlayacaksınızdır.

Kurumsal Kimlik Nedir?

Kurumsal kimlik aslında bir firmanın duruşunu, davranışını, imajını temsil eden kavram, yani şirketin kimliğidir. Eğer inceleyeceğiniz sitenin veya uygulamanın sahibi olan şirketin bir kurumsal kimliği varsa buradan; fontları, renk şemasını, logonun doğru kullanım seçeneklerini hemen görebilirsiniz. (kurumsal kimlik örneği)

Araştırmalarım sonucu Tchibo’ya ait bir resmi kurumsal kimlik maalesef bulamadım. O yüzden web sitesine, sosyal medya hesaplarına bakarak genel bir tasarım ahlakı oluşturmalıyız. Gözünüz korkmasın bunlar gerçekten kısa süren şeyler çünkü bu tarz firmalar uzun süredir piyasadadırlar ve çoğu zaman renk ve font kavramları artık oturmuş oluyor. Ancak bu şuan bu makalenin konusu olamayacak kadar uzun bir konu.

Artık bir sonraki aşamaya geçme vakti geldi…

İNCELEME

Bu süreçte artık uygulama ile bir test sürüşüne çıkıyoruz… Burada sormamız gereken bir soru var…

Bir uygulama nasıl incelenir?

Öncelikle uygulamayı incelerken yukarıda marka hakkında edindiğimiz bilgileri unutmayalım çünkü bizim kültürümüze hoş gelmeyen; tasarımlar, kullanılan dil, fontlar vb. şeyler markanın aktif olduğu ülkelerde seviliyor olabilir. Şimdi madde madde; nasıl bir yol izlemeliyiz? Nelere dikkat etmeliyiz? Gibi soruları cevaplandıralım, ancak bu aşamada bu kısmı görsel inceleme ve akış incelemesi olarak ikiye ayırmak istiyorum.

Görsel İnceleme

Renk Şeması: Renk bir markanın her şeyidir, halen köklü firmalar bu konuda yeni değişikliklere yönelebiliyor. Primary color, secondary color olarak sektörde şema yapısı ne kadar biliniyormuş gibi yapılsada primary color yani ana rengimiz boş bulduğumuz her yere verebileceğimiz bir renk olmamalı.(😂) Primary color ‘success’ yani başarılı bir işlem olduğunda veya ana bileşenlerde (component) kullanılması gereklidir.

Radius: Abartılmış radiuslar ciddiyetten uzaklaştırır ve markanın eğer resmi bir havası varsa o etkiyi yok eder. Ancak hesaplanmış kullanımlarda; hem resmiliği, hem cool havayı yakalayabilirsiniz.

Logo ve Icon Kullanımları: Logo ve iconlar ne kadar masum ve küçük gözükselerde aynı aileden kullanılmamış, düzgün ölçeklenmemiş icon ve logolar bir tasarımı tek başına kötü göstermeye yetecek elementlerdir. Bu yüzden iconlarınızı özenle ve diğer elementlerinize uygun olarak ayarlayın, örneğin line bir input hazırladıysanız iconlarınızı stroke olarak seçin ve bütünlüğünüzü koruyun.

Inputlar: Inputlarda aslında renk şeması kadar markanın sektörüne göre şekillenebiliyor Google ile birçok input örneğine ulaşabilirsiniz. Inputlarınızı: Kolay tıklanabilir, hangi başlığın inputu olduğu belirgin bir şekilde tasarlayın ve en önemlisi hangi platformda (mobile, web) olduğunuzu unutmayın! Çünkü her platformun kendine özgü kolaylıkları var.

Akış İncelemesi

Bir uygulamanın akış diyagramını incelemenin en iyi yolu o uygulamayı başkalarına kullandırtıp gözlemlemektir. Ancak yine de bilinen onaylanmış bazı bilgileri sizinle paylaşacağım ama tabii ki bu bilgiler kayıt olma süreci için geçerlidir.

Yönlendirme Yapmayın: Sayfanızın arka planında göz alıcı görseller, abartılmış bilgi yazıları, yönlendirici button veya linkler kullanıcının dikkatini büyük oranda dağıtan şeylerdir. Unutmayın ki kayıt ol ekranında kullanıcının tek isteği, güvenli ve en hızlı şekilde giriş yapmaktır.

Ana ve Alt Başlık: Kullanıcılara neden giriş yapmaları gerektiğini kısa cümlelerle cazip kılarak anlatın.

Hatırlayın: Muhakkak kullanıcılarınızın oturumlarını izin alarak açık tutun yoksa bu büyük hız kaybı büyük kitle kayıplarına yol açabilir.

Gruplandırın: Örnek veriyorum formunuzda 10 adet input var bunları gruplandırın ve adım adım sayfalar halinde bilgi isteyin aynı zamanda kaç adım kaldığını ve kaçıncı adımda oldugunu bildiren elementler tasarlayın.

Almak İçin Almayın: Kullanıcılar kayıt ol ekranlarında çok fazla kişisel veri istendiğini gördüklerinde bundan rahatsız olurlar o yüzden olabildiğince minimum bilgi almaya çalışın ve muhakkak girilmesi gereken verileri (*) işareti ile belirtin.

İp Gibi: Inputlarınızın yerleşimini yaparken yan yana birden fazla girdi alanı kullanmayın bu durum kullanıcıya yavaşlık hissi verir tüm inputlarınız yukarıdan aşağıya doğru sıralanmalı.

Otomatikleştirin: Kullanıcılar için otomatik doldurma, tamamlama ve telefon numaralarını parçalama (parse) etme özelliği ekleyin bu kullanıcıyı çok daha kolay içeriye çeker.

Güven Aşılayın: Kullanıcılara bilgilerini korunduğuna dair resmi bir gizlilik politikasi gösterin ve bu belgenin bir bağlantısını formunuza ekleyin.

Tekrar Eden Inputlar: Tekrar eden inputlardan kaçının ancak yine de gerekliyse ilk veri girildikten sonra ikinci inputu görünür hale getirin. Bu sayede kullanıcı ilk aşamada daha az input görür ve daha hızlı giriş yaptığını düşünür.

Farklı Servisler İle Giriş: Artık çoğu kullanıcı (bende dahil) kayıt olurken Google, Twitter, Facebook gibi hesapları ile ile giriş yapıyor.

Kullanıcı Adı Şart Değil: Eğer gerçekten gerekli değil ise kullanıcılardan bir kullanıcı adı oluşturmalarını istemeyin onun yerine varsayılan olarak kendi maillerini veya telefon numaralarını girmelerini isteyin. Kullanıcıların yeni bir isim yerine mail ve telefon numaralarını aklında tutmaları daha kolaydır.

Hata Mesajları: Hata mesajlarınızı anlık olarak görüntüleyin bu şekilde kullanıcılar daha hızlı ve sorunsuz bir şekilde bir sonraki adıma geçerler.

Gereksinimleri Belirtin: Parola ve kullanıcı adı oluşturulmasını istediğiniz de veya herhangi bir spesifik veri istediğiniz de gereksinimlerinizi (minimum 6 karakter vb.) kullanıcıya belirtin.

Doğru Yönlendirici Metinler: Buttonlarınızın yazılarınızı teşvik edici bir şekilde yazın (Devam, Gönder) tarzında etiketler yerine bir sonraki aşamayı betimleyen içerikler yazın “Create account” gibi etiketler yazın bu kullanıcıyı teşvik eder.

Yinelemeyin: Her sayfanızda olan (biz güvenliyiz, biz kaliteliyiz vb.) tarzda yazılardan kaçının çünkü kullanıcı her sayfada bunları gördüğü zaman bilginin değeri düşüyor.

Evet biraz uzun oldu sanırım.(😂) Ancak bunlara kendi tasarım prensiplerimizi entegre ederek uyarsak kafamızdaki çalışma tam olarak kullanıcı dostu olabilir. Tabii ki burada eksik maddeler olabilir henüz benimde bilmediğim bunları araştırarak deneyimleyerek öğrenebiliriz.

Şimdi bu yukarıdaki bilgilere göre Tchibo uygulamasını analizini yapacağız ancak önce uygulamayı cihazımıza indirelim.

Uygulama Linki

Google Play | App Store

Evet uygulamayı indirdik, nelere dikkat etmeliyiz öğrendik ve artık hataları inceleyebiliriz. Görüyorsunuz ki kayıt ol sayfası yukarıdan aşağıya doğru uzun bir scroll halinde ve çok fazla input var gelin bu hataları da az önceki başlıklar altında inceleyelim.

Tchibo Uygulamasını İnceliyoruz

Tchibo uygulamasını figmaya aktardım aşağıdaki yazıya tıklayarak sizde benimle birlikte inceleyebilirsiniz.

Tchibo Mobile App Design Figma

<a href="https://medium.com/media/08bbf2f4f747c96f95c1c36b98d8166e/href">https://medium.com/media/08bbf2f4f747c96f95c1c36b98d8166e/href</a>

Biz burada görselden çok akış incelemesini inceleyeceğiz. Hemen başlayalım. Aslında uygulama ilk açıldığı esnada güzel bir strateji ile ilerliyor, ta ki kayıt ol veya giriş yap buttonlarına tıklayana kadar…

<a href="https://medium.com/media/f85a250440fe39cc49d7db1101bfcae7/href">https://medium.com/media/f85a250440fe39cc49d7db1101bfcae7/href</a>

hemen gördüğümüz sorunları madde madde yazalım

Sorunlar:

Giriş Yap ve Kayıt Ol sayfalarına bottom barda “Benim Tchibo’m” adlı bölümden ulaşabiliyoruz. Uygulamayı kullandırttığım kişiler bu sayfaları görmediler bile.

Kayıt ol sayfasında mobil ahlakına uygun olmayan uzun bir scroll yapısı var. Bu durum kayıt olma sürecini kullanıcı için oldukça uzunmuş hissi sağlıyor.

Hem şifre hem mail için tekrar eden input alanları var.

Inputların akışının ip gibi olması gerektiğinden bahsetmiştik Tchibo’da ise inputları hem yukarıdan aşağıya hem soldan sağa sıralamışlar.

Farklı bir servis (google, facebook) ile kayıt olma seçeneği yok.

Yukarıda Akış İncelemesi Bölümünde; Üye olurken ilk adımda bu kadar bilgi istemek (adres, ev telefonu vb.) yanlış olduğunu yazmıştık maalesef Tchibo’da durum bu şekilde.

Kayıt Ol sayfasında farklı sayfalara yönlendirme yapmamanız gerektiğini öğrenmiştik Tchibo’da sayfanın neredeyse her alanında farklı bir yere yönlendirme var. Bu durum kullanıcının odağını farklı alanlara yönlendiriyor.

Ana ve alt başlıklarınız olması gerektiğini ve burada kullanıcıya kayıt olan kullanıcıların ayrıcalıklarından kısa bir şekilde anlatın demiştik ancak Tchibo bunu biraz abartmış gibi; sayfanın en üstünde bir sayfa boyutunda neden kayıt olmamız gerektiğini yazmışlar.

Tchibo’nun her sayfasının altında biz güvenliyiz gibi veriler var ancak her sayfada bu verinin bulunması verinin değerini düşürüyor.

Buttonlarınızda doğru yönlendirici metinler kullanmanız gerektiğinden bahsetmiştim ama Tchibo’da kayıt ol buttonunda sadece “Gönder” yazıyor.

Telefon inputunda hem yazı hem sayı girilebiliyor ve numarayı da herhangi bir parçalama durumu da söz konusu değil.

Inputların geneli web ahlakına göre tasarlanmış bu da sanki uygulamanın webview gibi algılanmasına sebep oluyor ve kaliteyi düşürüyor.