UX Kurallarıyla Daha İyi Tasarlamak ve Bilinmesi Gereken Psikolojik Araştırmalar
UX konusunda okunması gereken kitapları araştırmıştım. Hep ertelediğim bir kitap vardı: Laws of UX. Sonunda okudum ve aslında diğer UX kitaplarıyla bağlantılı olduğunu gördüm. Bu makaleyi bu kitabın bir derlemesi olarak düşünebilirsiniz. UX konusunu yalnızca web, mobil gibi platformlar için düşünmeyelim, ‘ürün’ kavramına odaklanalım.
Görevini yerine getir
Kullanıcı bir ürüne sahip olduğunda onun işlevini yerine getirmesini ister. Yani basitçe ürünün temel görevini yapmasını bekler. Bu nedenle kullanıcıyı yoracak, ekstra işlem yaptıracak her şeyi ortadan kaldırın. Kısaca; kullanıcıyı oyalamayın.
Ortak alışkanlıklar
İnsanların yeni bir ürünle karşılaştığında tepkileri eskiden edindiği kullanıcı alışkanlıklarına göre şekillenir. Mesela bir web sitesine girdiklerinde, önceden gezindikleri sitelerle benzerlik göstermesini beklerler. Bir arabaya bindiklerinde bazı kontrol düğmelerinin başka arabalarla benzer konumlarda olmasını beklerler. Aksi halde bir kullanıcı olarak her arabayı yeniden öğrenmek, her sitenin nasıl çalıştığını anlamak zor olur.
Mental Model
Gerçek hayattaki (fiziksel hayattaki) nesnelerin/elemanların ne işe yaradığını gerçek hayatımızda zaten öğrenmiştik. Burada mental model kullanacağız. Sanal tasarımlarımızda neden yeni bir şeyler öğrenmeye ihtiyaç duyalım ki? Gerçek hayattaki tasarımları alışkın olduğumuz şekilde sanala çevirmeyi başarmalıyız. Laws of UX kitabında bu örnek şu görselle anlatılmış;
Ayrıca örnek verirsek Apple, iOS uygulama ikonu tasarlarken mental modellerden yararlanmamızı öneriyor. Telefonunuzda ‘Files’ uygulama simgesinde gerçek bir dosya figürü, ‘Settings’ uygulama simgesinde bir dişli figürü görüyorsunuz. Bunlar mental modele birer örnektir, anlaması kolaydır; ve gördüğünüz gibi aslında çok basit ve tahmin edilebilir.
Peki ya Sıkıcılık (Boring?)
Web sitesi örneğinden ilerleyelim. Her web sitesi aynı yöntemleri kullanırsa hepsi birbirine benzeyip sıkıcı olmaz mı? Bu noktada şu soruya odaklanmak gerekiyor; peki her site farklı olursa önceki kullanım alışkanlıklarımızı nasıl işe yarayacak, her girdiğimiz siteyi öğrenmemiz mi gerekecek?
Kullanıcı alışkanlıkları önemsenmezse aslında ‘görevini yerine getir’ kuralını da çiğnemiş sayılır. Çünkü bir sitenin nasıl kullanılacağını anlamayan kullanıcı sitenin var oluş amacını (yani işlevini) asla anlamaz. En baştan kullanıcı alışkanlıkları ve kullanılabilirlik önemsendiğinde zaten UI tasarım gibi farklı etmenler, sitenizi unique yapacaktır. Önce kullanıcı!
Dokunulabilir Alanları
Özellikle mobil uygulamalara odaklanan bir konu. Bir buton, input alanı v.b. dokunma alanları insanların parmaklarıyla rahatça dokunabileceği boyutta olmalı. Parmaklar için tasarlama hakkında , MIT Touch Lab çalışmasının average finger pad ‘in 10–14 mm ve average fingertip ‘in 8–10 mm ² olduğundan söz ediliyor.
Bu boşluklar yalnızca tıklanabilirlik için değil aynı zamanda doğru yere tıklamak için de önemli. Yani tıklanabilir iki eleman arasında da belirli boşluğa ihtiyaç vardır. Hem boşluk hem de tıklanabilir boyut için tabii ki firmaların önerileri var.
Mobilde bu kural daha çok önem arz etse de web ve tablette de dikkat edilmeli. Özellikle Apple, iPad sistemini eskisi gibi iPhone’a değil Mac’e yaklaştırdı. Apple tarafında iOS, iPadOS ve Big Sur ile birlikte tasarladığımız her şeyin birbiriyle uyum içinde olacağı günümüzde bu kuralın biraz daha fazla önemli hale geleceğini düşünüyorum.
Karmaşa
İnsanların hemen ürünün işlevini yerine getirmesini beklediğinden söz ettik. ‘Hemen’ dediğimiz süre aslında önemli. İnsanlar siteye ya da mobil uygulamaya girdiğinde karşılarına çıkan seçenek ne kadar çoksa ürünün işlevini yerine getirmesi de o kadar uzuyor. Çünkü kullanıcının seçim yapması da response time’a dahil.
Response time’ın önemli olduğu tasarımalarda, süreyi kısaltmak için seçenekleri azaltın. Hick Kanunu’na göre daha çok seçenek sunmak karar vermeyi logaritmik olarak artıyor.
Kullanıcı yalnızca en önemli seçenekleri görsün. Ve bu seçenekler olabildiğince açık, anlaşılır olsun. Çünkü seçenekleri azaltıp sezgisel tasarımlar ya da açıklamalar kullanırsak kullanıcının önce onu anlaması gerekecek. Haliyle response time yine uzayacak.
Kullanıcı bir sitede gezinirken, amacına en hızlı şekilde ulaşmak için seçenekleri kontrol ediyor, ardından düşünüp hangi seçeneğin kendisini en hızlı çözüme götürebileceğine kara veriyor, son olarak da o seçeneğe tıklıyor. Bir formül yok, deniyorlar. Bu yüzden webte en çok kullanılan tuşun geri tuşu olmasına şaşmamalı. Sayfa yüklenmesini beklemek, arayüzü anlamak, seçenek incelemek istemsizce mental resource’umuzu harcıyor (Bilişsel yük teorisi)
Seçenekleri sunmak konusunda fikrim şu; örneğin bir mobil uygulamada çoğu insan uygulamaları default ayarlarda kullanıyor. Seçenekleri kullanıcıya en yararlı olacak şekilde optimize etmelisiniz. Default ayarlarda kullanmayanlar ya da sunduğunuz seçeneklerle yetinmeyenler uygulamanın derinlerine ineceklerdir. Az ama öz seçenek kullanmakla ilgili meşhur bir kumanda örneği vardır;
Organize et
Sitede birbirine benzer içerikleri gruplamak, siteyi daha organize gösterir. Mesela organize olan gruplar bir kategori içinde olabilir. Burada en önemli şey grupların gerçekten birbiriyle alakalı olmasıdır. Ayrıca kategori belirledikten sonra tüm içerikleri kapsayacak bir isimlendirme tercih etmelisiniz.
Organize ettikten sonra işi bir adım öteye taşıyalım; ikonlar. İkonlar mental model gibi bir iş görür. İkonların bir standardı olmasa da ‘favoriler’ dediğimizde yıldız, kalp gibi ikonlar görebiliriz. Aynı şekilde ikon gördüğümüzde de o kelimeler akıllara gelir. Yani ikonlar tasarımdan tasarıma değişiklik gösterse de anlamı tahmin edilebilir.
Organize edip, ikon kullanımını tasarıma ekledik, isimlendirmeyi de kategoriyi kapsayacak şekilde oluşturduk, hepsi çok iyi. Ama mobil uygulamalarda tab bar gibi alanlarda isimlendirmeyi UI’da göstermemeyi tercih edenler var. Çok custom bir tasarım değilse ve özellikle öyle bir tasarım zorunlu değilse isimlendirmeyi UI tasarımda gösterin. Böylece kullanıcı ikon ile tahmin ederken, isimlendirme ile o kategoriyi tanıma fırsatı bulur.
Kümeleme (Formatting / Chunking)
Şimdi sırada bazı noktaları yanlış anlaşılan bir efsane var: Miller Kanunu. Öncelikle doğru noktalarından söz edeyim; sayılar, kelimeler, nesneler fark etmeksizin grup halinde duran şeyleri insan beyni bir arada hatırlar. Miller sihirli sayı 7 hakkında söylediği şey; insanların 7 (+-)2 itemi akıllarında tutabildiğidir.
Geri kalan her şeyi bizler türetiyor ve UX’e anlamsızca yerleştirmeye çalışıyoruz. Örnek verirsem; bu sihirli sayı her şeyde geçerli değil. 7 sayıyı ‘gruplar’ halinde aklımızda tutabiliriz, ya da 7 kelimeyi yine kolayca aklımızda tutabiliriz. Fakat akılda 7 cümle tutmak averaj bir insan için normal değildir. Yani 7 sayısını yalnızca ‘kümeleme, gruplama’ halinde kullanırsak mantıklı olarak tasarıma aktarmış oluruz.
Miller kanundan çıkarabilecek sonuçlar; küme halinde olan şeyler daha akılda kalıcı olur ve insan kısa süreli hafızası limitlidir. Kullanımı bazen çok işe yarasa da bazen de bir o kadar gereksizdir.
Kontrol sahipliği
Kullanıcı kontrol sahibi olmak ister. Kullandığı ürünün, cihazın ya da sitenin ona hükmetmesini istemez. Bu durum güvenlik sebeplidir. Eğer kontrol kullanıcıda ise, kullanıcı ürünün güvenli olduğunu düşünür. Buna bir örnek olarak HIG’ta Apple iOS uygulamasında kamera gibi bilgileri isterken kullanıcıya nasıl soru sorulması gerektiği hakkında bile yönergelerde bulunmuştur. Bu detaylar güven sağlıyor ve kontrol sahibi hissettiriyor.
Ürünün yalnızca güvenli olması yetmez, aynı zamanda kullanımı rahat olmalı. Hitap etmek istediği kitlenin her bireyine hitap edebilmeli. Mesela bazı engelli kullanıcılar için olabildiğince engeli ortadan kaldırabilmeli (erişilebilirlik). kullanıcının kullandığı cihazla (akıllı telefon v.b) uyumlu olmalı ve hatta internet hızları düşük olabilmesine karşın olabildiğince yüksek verimli olmalı.
Öyle örnekler var ki bu saydıklarımı tamamanen karşılıyor. Yüz tanıma teknolojisi bunun harika bir örneği; hem güvenli hem kullanımı kolay. Akıllı cihazlarda yüz tanıma teknolojisi varsa ödeme gibi işlemlerin de bu teknolojiyi kullanarak yapılması da güzel bir örnek.
Erişilebilirlik konusuna tekrar değineyim. Yalnızca arayüz erişebilir olmamalı, üründeki tüm süreçler erişilebilir olmalı. Tüm sistemin erişilebilir olması bir design system ihtiyacı doğuruyor. (Design System sitesinde güzel örnekler bulacaksınız) Göz önünde olan şey hep arayüz olduğu için erişilebilirlik denince en çok arayüze önem veriliyor. O zaman arayüz konusunda bir kaç örnek verelim; tasarımdaki text blockları diğer dillere çevrilecekse kaplayacağı alan iyi planlanlamalı. Çünkü diğer diller ingilizce kadar kompakt olmayabilir. Daha uzun ya da daha kısa olabilir.
Arayüz konusunda bir diğer örnek biraz daha bilindik; okunma yönü. İnsan alışkanlıklarını direkt olarak etkileyen bir faktör. Yazı yönünü aynalamak her zaman tek çözüm olmaz, tasarımda aynalanması gereken başka bileşenler de olabilir.
Son olarak font size’ın etkisinden bahsedelim. Kullanıcılar ürünü genelde varsayılan ayarlarda kullansa da öyle kullanmayanlar da az değildir. Mesela websiteler için tarayıcılarda varsayılan text size 16 px dir. Peki bunu değiştirdiğimizde ne olur, mesela artırdığımızda? Eğer sitemiz uyumlu ise kullanıcıya katkı sağlar, eğer uyumlu değilse yazılar iç içe geçer. Font-size değişikliği mobil uygulamalarda da geçerlidir. Bunun güzel bir örneğini Apple WWDC2020 bahsetti. (Evet, örnekler hep Apple üzerinden verildi ama bir fanboy değilim 😄 Yalnızca WWDC2020 sonrası biraz Apple’a yoğunlaşmıştım) SF Symbols 2 güncellemesi sayesinde font size ve font weight ile birlikte ikonlar artık uyum sağlıyor.
Sonuç olarak, insanların hata yapabileceğini unutmayın (hatırlayın). Bilgisayar sistemleri font, renk, boyut, tasarım fark etmeksizin çalışırlar ve neye onay vereceklerini bilirler. Fakat insanlar canlı bir varlıktır ,onları bir makine gibi düşünmek yanlış. Her zaman insanın hata yapabileceği noktaları iyileştirmeye çalışmalıyız.
Deneyim
Benim favori kuralım. Ürününüzü sevdirmek için her zaman şans yaratan bir kural. İnsanlar deneyimini en doruk noktada hissettiklerine göre değerlendirir (iyi veya kötü). Ortalamasını almaz, kıyas yapmaz.
İnsanlar bazen hızlıca karar verebilirler, fakat bazen bu önyargılıdır. Bu bir bilişsel önyargı türüdür aynı zamanda. Pik noktasını deneyimin sonuna doğru yapmak, deneyim sonunda insanlara en iyi anı hatırlatır ve değerlendirmeyi ona göre yaparlar. Buna peak-end kuralı denir. En iyiyi sona saklamak kullanıcılara harika bir deneyim yaşatmak için harika bir seçim.
İnsanların hızlıca hedeflerine varmak istediklerinden söz etmiştim. Hedeflerine ulaşmasına ne kadar kaldığını görmek, onları motive eder. Buna goal gradient effect denir. Bu efekt de deneyimi iyileştiren pozitif bir etkendir. Goal gradient effect ile peak-end kuralı birbiriyle bağlantılı çalışabilir; bunun en bilindik örneği kahve zincirlerinin belirli sayıda kahveye ücretsiz bir kahve vermesi. Ortada hem bir hedef var, hem de sonda verilecek ücretsiz bir kahve ile deneyim güzel sonlanacak.
Tahmin edemediğimiz bir sebeple deneyim kötüye giderse kullanıcıya bunu göstermeliyiz. Mesela sayfanın yüklenmemesi, öyle bir sayfanın olmaması gibi durumlarda çok güzel 404 sayfaları var. Yakın zamanda başka bir sayfadan yönlendirme ile Mercedes Benz’in sitesini ziyaret ettim, kullandığı bir teknoloji hakkında okuma yapmak istedim, tüm yönlendirmeler ve gezinmelere rağmen aradığımı bulamadım. Ardından bir 404 sayfasına geldim; o kadar harikaydı ki siteden çıktığımda ne aradığımı dahi unutmuştum, aklımda sadece 404 sayfası kaldı;
Tasarım
İnsanlar hoş tasarımların daha kullanışlı olduğu fikrine kapılır. Estetik ve kullanılabilirlik beraberinde gelir diye düşünürler. Hatta tasarımını beğendiği ürünlerde bazı ufak problemleri göz ardı edebilirler. Çünkü iyi tasarım başka bir araştırmaya göre insanda pozitif bir etki yaratır.
Bunun çok avantajı olduğu gibi dezavantajları da vardır. Kullanıcı tasarıma çok iyimser baktığından ufak hataları göz ardı eder demiştik, bu iyimserlik testlerde de devam ederse kullanılabilirlik konusunda bir sürü hata ortaya çıkmayabilir. O derece büyük olabilir ki kritik hatalar bile gözden kaçabilir. Böyle bir durumla karşılaşma ihtimali varsa test yaparken kullanıcıları izlemek daha faydalı olabilir.
Ayrıca tasarımcılar da estetiğe odaklanıp kullanılabilirlik, erişilebilirlik konularında da hata yapabilir. Öncelikle sadece sitenin nasıl göründüğüne değil aynı zamanda nasıl çalıştığına da odaklanmalıyız.
Ayrışma
İnsanlar çoklu objeler arasında farklı olanı rahatlıkla ayırt edebilir. Buna von Restorff effect denir. Diğerlerinden farklı olan vurgulanır. Fakat vurgu çok olursa anlamsızlaşır. Benim bu cümleyi böyle yazdığımı düşünün. Vurgunun nerede olduğu belli değil. Fazla vurgu reklam hatta spam olarak algılanır. Bunun iyi bir örneği banner körlüğüdür. Tasarımdaki farklılıklar küçük bile olsa insanlar bu farkları saniye içinde algılayacak kapasitededir.
Kullanıcının dikkat etmesini istediğiniz şeyi, ‘tasarıma uyacak şekilde’ dahil edin. Tasarıma uyacak şekilde demekten kastım; beklenmedik, kullanıcının bakmadığı noktalarda ne kadar değişiklik yaparsanız yapın major bile olsa kullanıcı onu fark etmeyecektir, çünkü kullanıcı orayı göz ardı eder.
Tasarımda ayrıştırma nasıl yapılır? Bilinen yöntemlerden bazıları şunlar:farklı renk kullanımı, farklı boyutlandırma (ölçülendirme), şekil değişikliği, hareket/animasyon, negative space. Renk ve hareket ile ayrıştırma yaparken erişilebilirlik yeniden değerlendirilmeli, renk körleri ve hareket hassasiyeti olanlar da düşünülmeli.
Bu kuralın sık kullanımı, kuralın kendisine aykırı; çünkü aynı olan elemanların arasından yalnızca birinin farklı olması gerekiyor.
Ekran ve Performans
Sayfanın hızlı yüklenmesi, kullanıcının ekranda bir sonuç görmesi kullanıcı açısından çok önemlidir. HTTP arşivlerine göre 2010 yıllarındaki sayfa boyutları ile şimdiki sayfa boyutları arasında büyük farklar var. Artan sayfa boyutları dikkat edilmediği takdirde gecikmelere sebep olabilir.
Kontrol sahibi olma konusuna değinmiştim, kullanıcı kontrol sahibi olmak ister. Kontrolü kaybettiğini düşüneceği noktalardan biri de yavaş yüklenen sayfalardır. Gecikme artarsa kontrol hissi azalır.
Ama gecikmeler bazen işe yarayabilir ve gereklidir. Şöyle ki; insanlara bazen düşünme ve tepkiyi görebilme süresi gereklidir. Direkt olarak ekranda bir cevap gördüğünde kullanıcı şaşırabilir, sayfanın yüklenmediğini ya da bir hata olduğunu düşünebilir. Sırf bu nedenle bazı tasarımlara bilinçli olarak gecikme eklenir. Fakat bilinçli ya da bilinçsiz olsun bu gecikmeler 400 ms’yi geçmemeli.
Peki 400 ms’yi geçerse ne gibi tasarımlar uygulamalıyız? Animasyon kullanımı hareketli bir ekran sunduğundan gecikme hissini azaltabilir. Loading bar da bu bağlamda bir animasyon sayılabilir.
Tekniklerden diğeri skleton screen kullanımıdır. Kullanıcıya nerede elemanların nasıl yükleneceği gösterilir, bu da kullanıcı da sayfa yüklenmiş gibi bir his yaratır.
Bahsedeceğim son teknik, görsel özelinde blur up tekniği. Bu teknikte görseller yüklenirken, gaussian blur efekti ile önce düşük çözünürlüklü low resulation görseller yüklenir, ardından onlar yüksek çözünürlüklü görseller ile değiştirilir. Böylece tam yüklenme sağlanana kadar ekran boş kalmaz ve yüksek çözünürlüklü görseller ilk yüklenmede gecikmeye sebep olmaz. Bu etkili teknikler kullanılsa bile sıfırdan tam yüklenmeye kadar, kullanıcı en fazla 10 sn kadar odaklanabilir. Dikkat; odaklanmadan bahsediyorum, zaten bir sayfanın yüklenme hızının 10 saniyeyi bulmasının çok kötü bir deneyim olduğunu billiyoruz.
Optimistic UI da konuşulması gereken başka bir konu. Optimistic UI’ı kısaca şöyle tanımlayabiliriz; sunucudan yanıt beklerken arayüzde bir sonuç göstermenizdir. Bir mesajlaşma uygulamasından mesaj gönderdiğinizde mesaj karşı tarafa iletilmek üzere sunucudan yanıt bekler. Bu süre boyunca aslında siz gerçekten mesajı göndermiş sayılmazsınız. Fakat optimistic UI ile ekranda ‘gitmiş gibi’ gösterebilirsiniz. Özellikle mesajlaşma, beğenme, kaydetme gibi işlemlerde bu teknik olmazsa olmazlardan. Çünkü kullanıcı bu noktada ekranda çok hızlı bir yanıt bekler.
Etik
Kullanıcılara konfor sağlamak için psikolojik teknikler biliyoruz ve yenilerini de sürekli öğreniyoruz. Bu bilgileri insanların yararına kullanmalıyız, onların zamanını çalmaya odaklanmamalıyız. Bir çok sosyal medya etik değerler dışına çıkabiliyor ve bu bazı insanlarda psikolojik sorunlar bile doğurabiliyor. Sosyal medya bağımlılığı artık sıkça duyduğumuz bir konu. Araştırmaya göre ortalama bir insan telefonla geçirdiği yaklaşık 2–4 saat aralığında 2500 ila 5400 defa ekrana dokunuyor.
İletişim için Twitter ya da iletisim@alicorak.com adreslerini kullanabilirsiniz.
