YBS303U-KULLANICI DENEYİMİ TASARIMI
Ünite 7: Kullanıcı Arayüzü Tasarımı
Giriş
“Kullanıcı deneyimi” ve “kullanıcı arayüzü” terimleri farklı anlamlar taşımaktadır. Kullanıcı deneyimi, son kullanıcının bir ürün veya hizmetle olan etkileşimiyle ilgili tüm yönleri içermektedir. Kullanıcı deneyimi tasarımı, kullanıcıların verilen şeyi anlamalarını, kullanmalarını, hedeflerine ulaşmalarını ve kendilerini iyi hissetmelerini sağlamak için yapılan bir çaba olarak özetlenebilir.
Kullanıcı Arayüzü Tasarımı İlkeleri
Mükemmel bir kullanıcı arayüzü tasarımının temelini oluşturan sadelik kavramı, kullanıcıların bir site veya uygulamada sorunsuz bir şekilde gezinebilmesini ve aradıkları ögeleri kafa karışıklığı yaşamadan bulabilmesini sağlar. Sadelik, tutarlılık, kullanıcı kontrolü, hiyerarşi, esneklik, erişebilirlik ve geri bildirim gibi ilkeler, bir kullanıcı arayüzü tasarımcısının unutmaması gereken temel ilkeler arasında yer alır.
Sadelik
Sadelik sadece estetik kavramıyla ilgilenmez; kullanılabilirliği, etkileşimi ve kullanıcı memnuniyetini en iyi düzeye ulaştırmaya yönelik strateji sunan bir tasarım ilkedir. Sade bir kullanıcı arayüzü karmaşayı ortadan kaldırarak kullanıcılarla anlamlı bir bağlantı kurar.
Sadeliği ifade eden on yasa ve sadeliğe ulaşmak için üç anahtar bulunmaktadır (Maeda, 2006). On yasayı benimsemek sadeliği anlamanın bir yoludur:
1. Azalt, 2. Düzenle, 3. Zaman, 4. Öğrenme, 5. Farklılıklar, 6. Bağlam, 7. Duygu, 8. Güven, 9. Başarısızlık, 10. Anlamlı Olan.
Maeda (2006), sadeliği anlamanın üç anahtar yolu olduğunu ifade etmiştir:
1. Uzak durma, 2. Açık olma, 3. Güç.
Tutarlılık
Kullanıcılarla etkileşimde bulunan bir tasarımın temel unsurlarından biri olan tutarlılık, web sitesi veya marka üzerinde tanınma durumunu artırır. Arayüzün tutarlılık ilkesine uygun olması için tasarımın genel yapısında bütünlük sağlanmalıdır.
Tutarlılığı sağlamak için beş farklı yöntem ele alınabilir (Soegaard, 2020):
1. Görsel tutarlılık ve sadeleştirme, 2. Davranışsal tutarlılık,
3. Davranışsal düzenleme, 4. Birleşik deneyim stratejisi, 5. Kullanıcı deneyimi kültürü.
Kullanıcı Kontrolü
Kullanıcıların arayüz üzerinde kontrol sahibi olmasını sağlamak, kullanıcı arayüzü tasarımında temel ilkelerden biridir. Kullanıcı kontrolü, arayüz tasarımında, kullanıcılara kendi kullanım bağlamlarına göre arayüzlerde gezinme ve etkileşimde bulunma yetkisi vermeye odaklanır.
Kullanıcı kontrolünü sağlamanın çeşitli yolları vardır:
1. Sezgisel yaklaşım ve tutarlılık, 2. Kişiselleştirme, 3. Geri alma ve yineleme işlevlerini kullanma, 4. Erişilebilirlik, 5. Geri bildirim.
Hiyerarşi
Kullanıcı arayüzü ögeleri düzenli bir biçimde sunulduğunda ve yapılandırıldığında, kullanıcılar arayüzde kolaylıkla gezinebilir ve anlayabilir. Yazı tipleri ve görsel hiyerarşi aracılığıyla etkileyici bir arayüz tasarımı, görsel estetiğin ötesine geçerek kullanıcı deneyimini büyük ölçüde etkiler. Görsel hiyerarşi, kullanıcının dikkatini yönlendirmek ve bilginin daha kolay tüketilmesini sağlamak için görsel ögelere yönelik bir önem sırası oluşturur (Potvin, 2019).
Hiyerarşi yapısı, tasarım ögelerinin bir kombinasyonu yoluyla oluşturulur. Bunu sağlamak için bazı ögelerin kullanımına dikkat etmek gerekir:
1. renk, 2. boyut, 3. yazı tipleri, 4. beyaz alan.
Esneklik
Kullanıcı arayüzü tasarımında esneklik, bir arayüzün farklı kullanıcı ihtiyaçlarına, bağlamlara ve cihazlara uyum sağlama durumunu ifade eder. Arayüzlerin esnekliği, kullanıcıların çeşitli yöntemleri kullanarak belirli bir görevi başarıyla yerine getirmelerine olanak tanıyacak düzeyde olmalıdır.
Erişilebilirlik
Erişilebilirlik, farklı özelliklere sahip kullanıcıların arayüzü etkili bir şekilde kullanabilmesini sağlamak için çeşitli erişilebilirlik seçeneklerinin sunulması anlamına gelir. Bu nedenle sadece özel gereksinimli bireyleri değil, gençleri, yaşlıları, deneyimli/deneyimsiz kullanıcıları ve farklı teknolojileri kullanan kişileri de kapsar.
Erişilebilirlik, tasarım sürecinin her aşamasında önemli bir faktördür. Bu bağlamda, erişilebilir bir arayüz tasarımı için dikkat edilmesi gereken bazı unsurlar bulunmaktadır:
1. renk kullanımı, 2. renk zıtlığı,
3. metin boyutu, 4. alternatif metinler, 5. basit dil kullanımı, 6. klavye erişimi.
Geri Bildirim
Kullanıcılar arayüz ile etkileşim hâlindeyken onları önemli noktalarda bilgilendirmek önemlidir. Herhangi bir görevi ya da işlemi tamamladıklarında sonuç ile ilgili geri dönütler sağlanmalıdır. Görevlerin ya da işlemlerin olması gerektiği gibi ilerlediğini bilmelerini sağlamak arayüz tasarımında önemli bir yere sahiptir. Kullanıcılar, bu bilgiyi aramak zorunda kalmadan veya uygulamanın yanıt vermediğini merak etmeden, her zaman tam olarak neler olup bittiğini bilmelidir. Kullanıcıya aldığı hata durumunda ne yapması gerektiği açıkça bildirilmeli ve gerekirse ilgili bağlantılara yönlendirilmelidir.
Kullanıcı Arayüzü Tasarımı Bileşenleri
Kullanıcı arayüz tasarımında uygulanması gereken birtakım bileşenler bulunmaktadır. Bu bileşenler, kullanıcıların arayüzle kolayca etkileşime girmesini ve aradıkları bilgileri veya işlevleri hızlı ve verimli bir şekilde bulmasını sağlar. Bu bileşenlerden herhangi birinin ihmal edilmesi, kullanıcılar için kullanılabilirlik sorunlarına, kafa karışıklığına ve hayal kırıklığına neden olabilir. Doğru seçilmeyen bir renk paleti göz için yorucu olabilir, net olmayan tipografi okunabilirliği engelleyebilir ve abartılı animasyonlar kullanıcıların dikkatini dağıtabilir. Bu bileşenleri doğru bir şekilde kullanmak yalnızca işlevsel değil, aynı zamanda estetik açıdan hoş, sezgisel ve kullanımı keyifli arayüzler oluşturmayı sağlar. Böylece kullanıcı katılımının artmasına, görev tamamlama oranlarının iyileşmesine ve markaya olan bağlılığın artmasına yol açar.
Renk
Kullanıcı arayüzü tasarımında renk tercihi kullanıcı deneyimini şekillendirmede ve etkileşimi kolaylaştırmada çok önemli bir rol oynar. Estetiği geliştirir, kullanıcı deneyimini şekillendirir ve karar almayı etkiler. İlgi uyandırmak, bir mesaj iletmek veya duyguları harekete geçirmek için renk, tasarım ile hedef kitlesi arasında etkili bir iletişim kurar. Renk, gözlerin ışıktan algıladığı, çeşitli kavram ve duygulara dönüşen duyusal bir izlenimdir (Moreno, 2020). Kullanıcı arayüzü tasarımında renk ögesini uygularken yalnızca estetik duruşa değil aynı zamanda üç temel ilkeye de dikkat edilmesi gerekir: tutarlı, zıtlık ve amacına uygunluk.
Tutarlı ilkesine göre renk, kullanıcı arayüzü boyunca tutarlı bir şekilde uygulanmalı ve temsil ettiği markayla uyumlu olmalıdır.
Zıtlık ilkesine göre renk, kullanıcı arayüzünde farklı ögeler arasında ayrım oluşturmak için önemli bir araçtır. Yeterli zıtlık sağlandığında, kullanıcılar hangi ögelerin etkileşimli olduğunu, hangi bilgilerin birbiriyle ilişkili olduğunu ve hangi alanların birbiriyle ayrıldığını kolayca anlayabilir.
Amacına uygunluk ilkesine göre renk, ögeler arasındaki ilişkileri ve hiyerarşi düzeyi gibi anlam taşıyabilen durumlarda uygulanmalıdır. Başka bir deyişle, estetik ve işlevselliğin ötesinde renk, kullanıcı deneyimini zenginleştirerek anlam aktarma gücüne sahiptir. Amacına uygunluk ilkesi üç bağlamda ele alınabilir: Bilgi ve eylem, ilişkiler ve duygusal tepki. Bilgi ve eylem bağlamında, renkler belirli anlamlarla ilişkilendirilerek bilginin etkili bir şekilde iletilmesine ve kullanıcı eylemlerine sezgisel olarak rehberlik sağlanmasına olanak tanır. Ayrıca, renklerin psikolojik anlamları da dikkate alınmalıdır.
Rengin uygulanmasında altın oran kuralına dikkat etmek gerekir. Altın oran, renkler aracılığıyla uyum ve orantıyı yakalar. Tasarımcılar 6:3:1 kuralını kullanırken baskın bir renk seçip alanın %60’ında ana renk, %30’unda ikincil rengi, kalan %10’unda ise vurgu rengini kullanmalıdır. 6:3:1 kuralı kullanıcıların gözünün bir noktadan diğerine rahatça hareket etmesini kolaylaştırır (Jeph, 2020).
Tipografi
Tipografi; okunabilir, kullanılabilir ve ideal olarak kullanıcı dostu arayüzler veya deneyimler oluşturmak için yazı tiplerinin kullanımını ve bu yazı tiplerinin organizasyonunu içeren bir tasarım disiplinidir (Fitz- Patrick, 2022). Tipografi yazı karakterlerini ve yazı tiplerini metne uygulayarak metni okunaklı, net ve okunması keyifli hâle getirecek şekilde kullanmakla ilgilidir.
Bir web sitesinin veya bir mobil uygulamanın başarısını büyük ölçüde etkileyen tipografiyi uygularken dikkate alınması gereken birkaç unsur vardır. Bu unsurlardan en önemlisi tipografiye özgü terimlerdir: Yazı tipi, Renk, Karakter, Kontur, Punto, Kalınlık, Harf aralığı, Hizalama, Serif tipleri, Sans-serif yazı tipleri, Monospace yazı tipleri, Hiyerarşi.
İkonlar
İkonlar en minimalist tasarımlara bile çok fazla anlam katabilir. İşlevlerin veya kavramların kısa görsel temsilleri olarak görev yapan ikonlar, sezgisel etkileşim kurmada ve kullanıcı deneyimine rehberlik etmede önemli bir rol oynar. İkon tasarımında sadeliğin korunması çok önemlidir; özellikle ikonların daha küçük boyutlarla olduğu düşünüldüğünde gereksiz karmaşıklığın önlenmesi gerekir. En uygun ikonlar, kullanıcıların zorluk çekmeden kolayca tanımlayabileceği basit şekiller olmalıdır. İkonların yorumlanmasında netliğin olmaması, işlevlerine zarar verir ve kullanıcı deneyiminin azalmasına neden olur. “Ana Sayfa”, “Beğeni”, “Yorum”, “Paylaş”, “Yenile” veya “Yer İmleri” gibi düğmelerine ilişkin ikonlar, farklı arayüzlerde evrensel hâle geldi. Evrensel ikonları kullanmak kullanıcıların gitmek istediği yere ulaşmasına yardımcı olur.
Kullanıcı arayüzü tasarımında ikonların kullanımına yönelik yedi temel ilke bulunmaktadır (Stevens, 2023):
1. Açıklık, 2. Netlik,
3. Sadelik, 4. Benzerlik, 5. Hizalama ve denge, 6. Tutarlılık, 7. Kurumsallık.
İnfografik ve Veri Görselleştirme
Bilginin görsel bir temsili olan infografikler, karmaşık bilgileri hızlı ve net bir şekilde sunmayı amaçlar (Bushaala & Alaa Alafify, 2022; Zhou, 2021). Karmaşık bilgileri açık, kısa ve görsel olarak ilgi çekici bir şekilde sunmak için görseller, simgeler, çizelgeler ve diyagramlar gibi ögeler yer alır. İnfografikler genellikle bir vektör tabanlı kullanılarak hazırlanır, ancak piksel tabanlı görsellerle de geliştirilebilirler. İkonlar, emojiler, diyagramlar, vektör tabanlı nesneler ve çeşitli grafik türleri gibi çeşitli ögelerin dahil edilmesiyle nitelikli infografikler elde edilebilir. İnfografikler, bir sürecin sıralı adımlarını açıklamak, zaman çizelgeleri oluşturmak, karmaşık kavramları basit ve anlaşılır bir şekilde açıklamak ve kapsayıcı konuları kısa ve öz bir şekilde özetlemek gibi birçok amaç doğrultusunda hazırlanabilir.
Giriş ve Çıkış Kontrolleri
Kullanıcı arayüzü tasarımının diğer önemli bileşenleri giriş ve çıkış kontrolleridir. Giriş kontrolleri, kullanıcıların sisteme bilgi sağlamak için etkileşime girdiği ögeler olarak tanımlanmaktadır. Kullanıcıların sistemi kontrol etmesine ve çeşitli eylemler gerçekleştirmesine olanak tanır. Kullanıcı arayüz tasarımının ayrılmaz bir parçası olan bu bileşenler metin alanları, düğmeler, radyo düğmeleri, onay kutuları, açılır menüler, liste kutuları, kaydırma çubukları, izleme çubukları, takvim ve saat aracı şeklinde sıralanabilir.
Gezinme
Kullanıcı arayüzü tasarımında gezinme bileşeni, kullanıcıların arayüzde kolayca ve etkili bir şekilde gezinmesine yardımcı olur. Kullanıcı arayüzündeki bilgi akışı konusunda kullanıcılara rehberlik eder ve görevlerini tamamlamalarına yardımcı olarak kullanıcı deneyiminizi artırır Böylece, kullanıcıların ihtiyaç duydukları bilgilere ve işlevlere hızlı ve kolay bir şekilde erişmelerini sağlar.
Kullanıcı arayüzü tasarımında etkili gezinmeyi sağlamak için birtakım tekniklerden yararlanılabilir: Görsel hiyerarşiden yararlanın, Açıklığı ön planda tutun, Tutarlılığı sağlayın, Geri bildirimin gücünü keşfedin, Kullanıcıları aramaya yönlendirin, Yardım ve ipuçları sunun.
Animasyon Kullanımı ve Etkileşim
Kullanıcı arayüzü tasarımında animasyonlar, kullanıcı arayüzü ögelerine ve bileşenlerine etkileşimli hâle getirmek için görsel efektler ekler. Başka bir deyişle animasyonlar, bir ürünün etkileşimini geliştirmek için kullanıcı arayüzü ögelerine hareket ekleme işlemi olarak ifade edilir. Tasarımcılar, arayüzde kullanıcılara rehberlik etmek, kullanıcıları bir değişiklik konusunda uyarmak, kullanıcıların karar vermelerini sağlamak ve ögeler
arasındaki ilişkiyi belirtmek için animasyonu kullanır (Hannah, 2021b).
Kullanıcı arayüzü tasarımında kullanılabilecek dört temel animasyon türü vardır:
1. Yükleme ve ilerleme, 2. Durum değişiklikleri, 3. Gezinme, 4. Mikro etkileşimler.
Kullanıcı Arayüzünün Test Edilmesi
Kullanıcı arayüzünün kalitesi, kullanıcının bir web sitesi veya uygulama hakkındaki ilk izlenimini belirler. Her özelliğin beklendiği gibi çalışmasını sağlayarak belirli standartları karşılamak için kullanıcı arayüzü testi gerekli duruma gelmiştir. Kullanıcı arayüzünün test edilmesi, grafik ögelerin tasarım özellikleri ve kullanıcı beklentileriyle uyumlu olduğunu doğrulayarak kullanıcı memnuniyetinin ve katılımının artmasını sağlar. Başka bir deyişle kullanıcı arayüzü testi, kullanıcı arayüzü işlevlerinin hatasız olmasını sağlar. Ayrıca, çeşitli cihaz ve ortamlarda kullanılabilirlik hatalarının, erişilebilirlik ve yanıt verme sorunlarının tespit edilmesine yardımcı olur. Arayüzün kullanıcı girdilerine yanıt verme düzeyini ve tasarım ilkeleriyle uyumunu sistematik olarak değerlendiren kullanıcı arayüzü testleri, kullanıcının sistemden ayrılma riskini azaltır, sistem kalitesini artırır ve olumlu bir kullanıcı algısı oluşturulmasını sağlar. Kullanıcı arayüzü testi, araç çubukları, yazı tipleri, menüler, metin kutuları, radyo düğmeleri, onay kutuları ve renkler gibi birçok grafik ögelerini kapsar. Kullanıcı arayüzü testinin gerçekleştirilmesi, yalnızca işlevsel gereksinimleri karşılamakla kalmayıp aynı zamanda sezgisel ve kusursuz bir kullanıcı deneyimi sağlar.
İşlevsellik Testi
Bir uygulamanın amaçlandığı gibi çalıştığından emin olmak için davranışını, özelliklerini ve işlevselliğini değerlendirme sürecidir. İşlevsellik testinin temel amacı, uygulamanın her işlevinin belirtilen gereksinimlere göre doğru şekilde çalıştığını doğrulamaktır. Bu test türü kullanıcı dostu olmaya ve uygulamanın hedeflenen kullanıcıların beklentilerini karşılamasını sağlamaya odaklanır (Dubey, 2023).
İşlevsellik testlerinin gerçekleştirilmesi kullanıcı arayüzünün geliştirilmesine yönelik çeşitli faydaları sağlar: Gereksinimleri karşılamak, Hata tespiti, Kullanıcı memnuniyeti, Geliştirilmiş uygulama kalitesi.
Kullanılabilirlik Testi
Kullanılabilirlik testi, herhangi bir web sitesinin veya uygulamanın arayüzünün niteliğini belirlemede önemli bir parçadır. Kullanılabilirlik testi, bir tasarımın gerçek kullanıcılarla kullanımının ne kadar kolay olduğunu test etme uygulaması olarak ifade edilebilir. Kullanılabilirlik testinin amacı, bir ürünün işlevlerine, özelliklerine ve genel amacına ilişkin planın, gerçek kullanıcıların ürünü nasıl
kullandığını gözlemleyerek kullanıcıların istekleriyle uyumlu olmasını sağlamaktır (Praxent, 2023).
Bir kullanılabilirlik testinin gerçekleştirilmesinde üç temel bileşen yer alır:
1. Araştırmacı, 2. Görevler, 3. Katılımcılar.
Kullanılabilirlik testleri, ürün veya hizmetin tasarımındaki sorunların belirlenmesinde, iyileştirme fırsatlarını ortaya çıkarmada, hedef kullanıcının davranışı ve tercihleri hakkında bilgi edinmede kullanılmaktadır (Moran, 2019).
Erişilebilirlik Testi
Erişilebilirlik testi, test edilen uygulamanın veya web sitesinin özel gereksinimli bireyler, görme güçlüğü çeken kullanıcılar ve yaşlılar gibi dezavantajlı gruplar tarafından kullanılabilir olmasını sağlamak için gerçekleştirilmesi gereken bir testtir (Hamilton, 2023).
Web İçeriği Erişilebilirlik Kılavuzunun dört temel ilkesi vardır (Ravindran, 2022):
1. Algılanabilir, 2. Çalıştırılabilir, 3. Anlaşılabilir, 4. Sağlam.
Görsel Tasarım Testi
Görsel tasarım, kullanıcıların bir web sitesini veya mobil uygulamayı ziyaret ederken, içeriği okumadan veya herhangi bir ögeyle etkileşimde bulunmadan önce fark ettiği ilk şeydir. Bu nedenle görsel tasarım kullanıcı arayüzü tasarımının önemli bir bölümünü kaplar. Görsel tasarım testi, bir tasarımın gerçekten kullanıcı ihtiyaçlarına cevap verip vermediği ölçer (Knospe &Portmann, 2020). Bu bağlamda kullanıcı arayüzünün görsel olarak estetik duruşunu ve tutarlılığını değerlendirmeyi amaçlar.
Görsel tasarım testi farklı tekniklerle yapılabilir:
• Beş saniyelik testi: Bu test türünde tasarım kullanıcıya 5 saniye boyunca gösterilir. Bu yaklaşım, kullanıcıların ‘içten gelen tepkisini’ doğru bir şekilde yakalamak için iyi yöntemlerden biridir. 5 saniyelik izleme süresi, metni okumak, belirli yazı tipleri veya renkler gibi ayrıntıları fark etmek için çok kısadır, ancak görsel tasarımı tam olarak yansıtan bir izlenim oluşturmak için yeterlidir (Whitenton, 2018). Beş saniyelik testi, hızlı geri bildirim almanın güvenilir ve zahmetsiz bir yöntemidir. Çok fazla hazırlık gerektirmez ve bir kafede rastgele kişilerle de gerçekleştirilebilir. Ayrıca planlanmış, daha derinlemesine bir kullanıcı görüşmesi için de uygundur (Knospe&Portmann, 2020). • İlk tıklama testi: Kullanıcılara tasarımı görmeden önce belirli bir görev verilir. Daha sonra ekranda bu görevi tamamlayabilecekleri konuma
tıkladıktan sonra kullanıcının görevi biter. Çoğu kullanıcı bu tür testlere yalnızca birkaç saniye ayırır, ancak tüm sayfaya bakmak yerine, görevle ilgili belirli bir özelliği veya bağlantıyı arayacak ve tasarımın geri kalanını yalnızca yüzeysel olarak görüntüleyecektir. Bu test, kullanıcıların web sitesiyle ilk karşılaştıklarında yapılması istenen belirli bir hedefin olması bekleniyorsa en uygunudur (Whitenton, 2018). • A/B testi: Tasarımcılarının farklı tasarım tercihlerinin etkinliğini değerlendirmeleri ve veriye dayalı kararlar almaları için güçlü bir araçtır. A/B testi, belirli bir hedefe ulaşmada hangisinin daha iyi performans gösterdiğini belirlemek için web sitesinin veya uygulamanın iki versiyonunu karşılaştırmanın bir yöntemidir. A ve B olmak üzere iki farklı tasarım rastgele bir şekilde kullanıcılara sunulur ve davranışları ölçülüp analiz edilir. A/B testinin amacı, hangi tasarımın daha iyi performans gösterdiğini belirlemek ve sonuçlara göre veriye dayalı kararlar vermektir. Bu test ile projede fotoğraf (piksel tabanlı) ve illüstrasyon (vektör tabanlı) kullanımı karşılaştırılabilir. Ayrıca farklı görseller, farklı ses tonları, farklı form uzunlukları, etiketleri ve yerleşimi gibi görsel ögeler test edilebilir (Khanna, 2023).