Tasarım ve kullanıcı deneyimi

En sevdiğiniz web sitesi veya uygulamayı düşünün. Neden favoriniz? Şimdi, beğenmediğiniz bir web sitesi veya uygulama düşünün. Neyi sevmediniz? Kullanıcıların tasarımınızla nasıl etkileşimde bulunduğu ve web siteniz ile uygulamanızdaki deneyimleri değişiklik gösterebilir.

Bu deneyim; günün saatine, kullanılan cihazın türüne, bir önceki gece yeterince uyuyup iyi hissetmediklerine, iyi durumda olup olmadıklarına, yardımcı teknoloji kullanıp kullanmadıklarına ve daha pek çok şeye bağlı olarak değişebilir. Dünya çapında sekiz milyara yakın kullanıcı düşünüldüğünde, kullanıcıların tasarımlarınızı kullanma ve deneyimleme olanakları sınırsızdır.

Kapsayıcı tasarım

Tüm potansiyel kullanıcı ihtiyaçlarını tek seferde nasıl karşılayabiliriz? Kapsayıcı bir tasarıma sahip olun. Kapsayıcı tasarım; kapsayıcılığı, kullanılabilirliği ve erişilebilirliği tek bir çatı altında birleştiren insan odaklı bir yaklaşım kullanır.

Kapsayıcı tasarım olarak erişilebilirlik, kapsayıcılık ve kullanılabilirliğin ortada buluştuğu bir Venn diyagramı.

Mümkün olduğunca çok kişinin kullanabileceği tek bir tasarıma odaklanan evrensel tasarımdan farklı olarak kapsayıcı tasarım ilkeleri, belirli bir kişi veya kullanım alanı için tasarım yapıp ardından bu tasarımı başkalarını kapsayacak şekilde genişletmeye odaklanır.

Erişilebilirlik odaklı yedi kapsayıcı tasarım ilkesi vardır:

  1. Karşılaştırılabilir bir deneyim sunun: Kullanıcıların içerik kalitesinden ödün vermeden görevleri ihtiyaçlarına uygun bir şekilde tamamlayabilmesi için arayüzünüzün herkese eşit bir deneyim sunduğundan emin olun.
  2. Durumu düşünün: Arayüzün, hangi koşullarda olursa olsun kullanıcılara değerli bir deneyim sunduğundan emin olun.
  3. Tutarlı olun: Bilinen kurallardan yararlanın ve bunları mantıklı bir şekilde uygulayın.
  4. Kontrolü verme: Kullanıcıların içeriğe tercih ettikleri şekilde erişmesini ve içerikle etkileşim kurmasını sağlayın.
  5. Seçenek sunun: Kullanıcılara, özellikle karmaşık veya standart dışı görevlerle ilgili görevleri tamamlamaları için farklı yollar sunun.
  6. İçeriğe öncelik verin: Bu öğeleri içerik ve düzende tercih ettikleri sıraya göre düzenleyerek kullanıcıların temel görevlere, özelliklere ve bilgilere odaklanmalarına yardımcı olun.
  7. Değer katma: Özelliklerin amacını ve önemini ve farklı kullanıcıların deneyimini nasıl iyileştirdiklerini düşünün.

Karakterler

Birçok ekip, yeni bir tasarım veya özellik geliştirirken süreç boyunca onlara rehberlik etmek için kullanıcı karakterlerinden yararlanır. Karakterler, genellikle hem niceliksel hem de niteliksel kullanıcı araştırmalarına dayalı olarak dijital ürünlerinizi kullanan hayali karakterlerdir.

Karakterler ayrıca tasarım ve geliştirme süreci boyunca bu özellikleri test etmenin ve önceliklendirmenin hızlı ve ucuz bir yolunu sunar. Stratejiyi hizalamaya ve belirli kullanıcı gruplarına odaklanan hedefler oluşturmaya yardımcı olmak için konuşmaya gerçek hayattan alınan bir değerlendirme katmanı ekleyerek site bileşenleriyle ilgili kararlara odaklanmaya yardımcı olurlar.

Engellilikleri dahil etme

Engellilik kalıcı, geçici veya durumsal olabilir. Bu engeller dokunma, görme, duyma ve konuşmayı etkileyebilir.
Microsoft'un Inclusive 101 Toolkit'ten Persona Spectrum.

"İnsanlar birbirinden farklıdır. Yalnızca kendi tecrübelerime göre konuşabiliyorum. Bir İşitme engelli biriyle tanıştığınızda hepimizin değil, İşitme engelli bir kişiyle karşılaşmış olursunuz."

ID24'ten Meryl Evans, Deaf Tech: Travel Through Time from Future (Geçmişten Geleceğe Yolculuk) başlıklı konuşmayı yaptı.

Engelli bireyleri karakterlerinize dahil ettiğinizde kişiler, kapsayıcı bir tasarım aracı olarak kullanılabilir. Bunu yapmanın birçok yolu var. Engelliliğe özgü karakterler oluşturabilir, mevcut kullanıcı karakterlerine engellilik durumları ekleyebilir ve hatta durumsal, geçici ve kalıcı engellerin dinamik gerçekliğini yansıtan bir karakter yelpazesi oluşturabilirsiniz.

Engelli bireyleri karakterlerinize nasıl dahil ederseniz edin, bu kişiler gerçek kişilere veya klişelere dayanmamalıdır. Karakterler hiçbir zaman kullanıcı testinin yerine geçmez.

Karakter: Jane Bennet
Belirli kullanım alanlarını destekleyen bir karakter örneğine göz atın.
Uzun siyah saçlı Jane Smith uzun kollu gri bir gömlek ve kot pantolon giymiş uzun boylu
  • Ad: Jane Bennet
  • Yaş: 57 yaşında
  • Konum: Essex, Birleşik Krallık
  • Occupation: Kullanıcı deneyimi mühendisi
  • Engellilik: Young Onset Parkinson hastalığından (YOPD) kaynaklanan el titremesi
  • Hedefler: Kod önerilerini kolaylaştırmak için sesle yazma işlevini kullanın. İnternette bisiklet ekipmanlarını çok az tuşa basarak bulun.
  • Hayal kırıklıkları: Yalnızca klavye desteği olmayan web siteleri; dokunma etkileşimi için küçük alanlara sahip tasarım uygulamaları.

Kullanıcı deneyimi mühendisi olan Jane, şirketinin sitesinin alakalı olması için hayati önem taşıyan sayfalar tasarlıyor ve oluşturuyor. Gün boyunca çok sayıda ekip üyesine destek oluyor. Teknik yangın söndürmenin kraliçesi o. Beklenmedik bir durum ortaya çıktığında herkes departmana başvurur.

Titremeye karşı hassas motor becerilerinin kaybedilmesi, fare kullanmanın gitgide zorlaşmasına neden oluyor. Web'de gezinmek için klavyeyi giderek daha fazla kullanmaya başladı. Jane, her zaman kendini fiziksel sağlığına adamıştır. Yol yarışını ve BMX'i seviyor. Bu, kendisine geçen yıl Young Onset Parkinson hastalığı teşhisi konduğunda bunu daha da büyük bir darbe yaptı.

Engelli simülatörleri

Karakterlerinizi taklit etmek veya bunları tamamlamak için engellilik simülatörlerini kullanırken son derece dikkatli olun.

Engellilik simülatörleri simpati ve empati oluşturabildikleri için iki taraflı bir kılıçtır. Bireye, simülatörün kullanıldığı bağlama ve kontrol edilemeyen diğer birçok faktöre bağlı olabilir. Erişilebilirlik savunucuları, engellilik simülatörü araçlarını kullanmaya karşıdır ve engelli kişiler tarafından oluşturulmuş filmleri, demoları, eğitici içerikleri ve diğer içerikleri bulup bu kişilerin deneyimlerini bizzat öğrenmeyi öneriyor.

"Simülasyon etkinliklerinin, gören kişilerin kalbinde ve kafalarında bilmesini istediğimiz en önemli anlayışlardan bazılarını etkilemediği konusunda tamamen dürüst olmalıyız. Bizi tanımlayan özellik körlük değildir. Körlikle ilgili yanlış anlaşılmalar ve düşük beklentilerin en büyük engelimiz olduğu unutulmamalıdır.

Bu yanlış anlaşılmalar, programa tam anlamıyla katılmamızı önleyen yapay bariyerler yaratır ve bu yanlış sınırlamalar bizi geride bırakan bir tutum oluşturur."

Mark Riccobono, Ulusal Görme Engelliler Federasyonu Başkanı

Erişilebilirlik bulguları

Karakterlerinizi ve tasarımlarınızı oluştururken iş akışınıza heuristics eklemeyi düşünün. Sezgiler, etkileşim tasarımı için 1990 yılında Jakob Nielsen ve Rolf Molich tarafından ortaya konan basit kurallardır. Bu on ilke, kullanılabilirlik mühendisliği alanındaki yıllara dayanan deneyime dayanarak geliştirilmiş ve o zamandan beri tasarım ve insan-bilgisayar etkileşimi programlarında kullanılmaktadır.

2019'a geçtiğimizde Deque'in tasarım ekibi dijital erişilebilirliğe odaklanan buluşsal yöntemler oluşturup paylaştı. Araştırmalarına göre, erişilebilirlik tasarım sürecinin bir parçası olduğunda, bir web sitesi veya uygulamadaki tüm erişilebilirlik hatalarının% 67'sine kadar önlenebilir. Bu, tek bir satır kod bile yazılmadan ortaya çıkabilecek büyük bir etkidir.

Orijinal buluşsal yöntemlere benzer şekilde, tasarımınızı planlarken dikkate almanız gereken on erişilebilirlik buluşsal yöntemi vardır.

  1. Etkileşim yöntemleri ve yöntemleri: Kullanıcılar, diledikleri giriş yöntemini (fare, klavye, dokunma vb.) kullanarak sistemle verimli bir şekilde etkileşim kurabilir.
  2. Gezinme ve yol bulma: Kullanıcılar sistem içinde kolayca gezinebilir, içerik bulabilir ve her zaman nerede olduklarını belirleyebilirler.
  3. Yapı ve anlamlar: Kullanıcılar her bir sayfadaki içeriğin yapısını anlayabilir ve sistem içinde nasıl çalışacaklarını anlayabilir.
  4. Hata önleme ve durumlar: Etkileşimli kontroller, hataları önlemeye yardımcı olacak kalıcı, anlamlı talimatlar içerir ve kullanıcılara, sorunların ne olduğunu ve hata döndürüldüğünde bunların nasıl düzeltileceğini belirten açık hata durumları sağlar.
  5. Kontrast ve okunabilirlik: Kullanıcılar, metni ve diğer anlamlı bilgileri kolayca ayırt edip okuyabilir.
  6. Dil ve okunabilirlik: Kullanıcılar içeriği kolayca okuyup anlayabilir.
  7. Tahmin edilebilirlik ve tutarlılık: Kullanıcılar her bir öğenin amacını tahmin edebilir. Her öğenin bir bütün olarak sistemle ilişkisi açıktır.
  8. Zamanlama ve koruma: Kullanıcılara görevlerini tamamlamaları için yeterli zaman tanınır ve oturum süresi dolduğunda bilgilerini kaybetmezler.
  9. Hareket ve yanıp sönme: Kullanıcılar sayfada hareket eden, yanıp sönen veya animasyonlu öğeleri durdurabilir. Bu öğeler kullanıcıların dikkatini dağıtmamalı veya herhangi bir şekilde zarar görmemelidir.
  10. Görsel ve işitsel alternatifler: Kullanıcılar bilgi ileten her tür görsel veya işitsel içerik için metin tabanlı alternatiflere erişebilir.

Bu erişilebilirlik buluşsal yöntemleri hakkında temel bir fikir edindikten sonra, erişilebilirlik sezgisel çalışma sayfasını kullanarak ve sağlanan talimatları uygulayarak bu bilgileri bir karaktere veya tasarıma uygulayabilirsiniz. Birden fazla bakış açısını bir araya getirdiğinizde bu alıştırma daha aydınlatıcı olacaktır.

Gezinme ve yön bulma kontrol noktası için erişilebilirlik sezgisel incelemesinin örneği aşağıdaki gibi olabilir:

Navigasyon ve yön bulma için kontrol noktaları Excel (+2 punto) Kartlar (+1 puan) Başarısızlık (-1 puan) Yok (0 puan)
Odaklanılan tüm etkin öğelerde net ve görünür bir gösterge ayarlanmış mı?
Sayfanın anlamlı bir başlık metni var mı ve önce sayfaya özgü bilgiler var mı?
Sayfa başlığı öğesi ve H1 aynı mı yoksa benzer mi?
Ana bölümlerin her biri için anlamlı başlıklar var mı?
Bağlantıların amacı yalnızca bağlantı metninden mi yoksa doğrudan bağlamından mı tanımlanıyor?
Sayfanın en üstünde atlama bağlantısı sağlanıyor mu ve bu bağlantı odakta mı gösteriliyor?
Gezinme öğelerinin düzeni yol bulmayı kolaylaştırıyor mu?

Ekipteki herkes sayfaya veya bileşene bakıp erişilebilirlik bulgusal incelemesini gerçekleştirdikten sonra, her kontrol noktası için toplamlar toplanır. Bu noktada, tespit edilen sorunları nasıl gidereceğinize veya dijital erişilebilirliği desteklemek için çok önemli olan eksiklikleri nasıl gidereceğinize karar verebilirsiniz.

Erişilebilirlik ek açıklamaları

Tasarımınızı geliştirme ekibine teslim etmeden önce erişilebilirlik ek açıklamaları eklemeyi düşünmeniz gerekir. Ek açıklamalar genel olarak reklam seçeneklerini açıklamak ve tasarımın farklı yönlerini açıklamak için kullanılır. Erişilebilirlik ek açıklamaları, geliştiricilerin tasarım ekibinin veya erişilebilirlik odaklı bir uzmanın rehberliğinde daha erişilebilir programatik seçimler yapabileceği alanlara odaklanır.

Erişilebilirlik ek açıklamaları, şemalardan yüksek kaliteli örneklere kadar tasarım sürecinin herhangi bir aşamasında uygulanabilir. Kullanıcı akışlarını, koşullu durumları ve işlevleri içerebilir. Süreci basitleştirmek ve ana odak noktasının tasarımı olmasını sağlamak için genellikle semboller ve etiketler kullanırlar.

Aşağıdaki tasarım resimleri örnekleri, Figma için Indeed.com'un erişilebilirlik ek açıklama kitinden alınmıştır.

Çeşitli olası düğme durumları için kullanılan görsel değişikliklerin tasarımını gösteren görsel.
İşlem düğmesinin tasarımı duruma göre değişir: varsayılan, odak, fareyle üzerine gelme, etkin ve devre dışı.
Bir iş ilanı kartında kullanılan üç farklı simgenin tasarım çizimi.
Üç simgede, alternatif metin vurgulanmış. "İşi kaydet" ve "İlgilenmiyorum" simgeleri düğme olarak görev yapar. Dolayısıyla, alternatif metin, işlemi anlamak için kritik öneme sahiptir. "Indeed özgeçmişinizle başvurun"un yanındaki simge tamamen süsleme amaçlı olduğundan alternatif metin gerektirmez.
Form etiketlerinin ay ve yıl için ilgili girişlerinde sahip olması gereken ilişkinin resmi.
Kullanıcıların bağlamı anlamasına yardımcı olmak için her girişle birden fazla giriş etiketi ilişkilendirilebilir.

Tasarım programınıza bağlı olarak, aralarından seçim yapabileceğiniz birden fazla erişilebilirlik ek açıklaması başlangıç kitine sahip olmanız gerekir. İsterseniz kendi setinizi de oluşturabilirsiniz. Her iki durumda da teslim ekibine hangi bilgilerin iletilmesi gerektiğine ve hangi biçimin en çok işe yaradığına karar vermelisiniz.

Erişilebilirlik ek açıklamaları için göz önünde bulundurulması gereken bazı alanlar şunlardır:

  • Renk: Paletteki tüm farklı renk kombinasyonlarının kontrast oranlarını ekleyin.
  • Düğmeler ve bağlantılar: Varsayılan, fareyle üzerine gelme, etkin, odak ve devre dışı durumları tanımlar.
  • Atlama bağlantıları: Gizli/görünür tasarım özelliklerini ve bunların sayfada bağlantı verdiği yerleri vurgulayın.
  • Resimler ve simgeler: Önemli resimler/simgeler için alternatif metin önerileri ekleyin.
  • Ses ve video: Altyazılar, transkriptler ve sesli açıklamalar için alanları/bağlantıları vurgulayın.
  • Başlıklar: Programatik düzeyler ekleyin ve başlık gibi görünen her şeyi dahil edin.
  • Önemli noktalar: HTML veya ARIA ile tasarımın farklı bölümlerini vurgulayın.
  • Etkileşimli bileşenler: Tıklanabilir öğeleri, fareyle üzerine gelme efektlerini ve odak alanını tanımlayın.
  • Klavye: Odağın nerede başlaması gerektiğini (alfa durdurma) ve sonraki sekme sırasını tanımlayın.
  • Formlar: Alan etiketleri, yardımcı metin, hata mesajları ve başarı mesajları ekleyin.
  • Erişilebilir adlar: Yardımcı teknolojinin öğeyi nasıl tanıması gerektiğini tanımlayın.