Tasarım ve kullanıcı deneyimi

Favori web sitenizi veya uygulamanızı düşünün. Bu web sitesini veya uygulamayı en sevdiğiniz özellik ne? Şimdi, beğenmediğiniz bir web sitesini veya uygulamayı düşünün. Hangi yönlerini beğenmediniz? Kullanıcıların tasarımınızla ve web sitenizdeki ve uygulamanızdaki deneyimleriyle nasıl etkileşimde bulunduğu değişebilir.

Bu deneyim günün saatine, kullanılan cihazın türüne, bir önceki gece yeterince uyuduysa, iyi değillerse, yardımcı teknolojiler kullanıp kullanmadığına ve çok daha fazlasına göre değişebilir. Dünya çapında sekiz milyara yakın insanın tasarımlarınızı kullanma ve deneyimleme olasılığı sınırsız.

Kapsayıcı tasarım

Potansiyel kullanıcıların tüm ihtiyaçlarını aynı anda nasıl karşılayabiliriz? Kapsayıcı tasarıma girin. Kapsayıcı tasarım, kapsayıcılığı, kullanılabilirliği ve erişilebilirliği bir arada sunan insan merkezli bir yaklaşım kullanır.

Erişilebilirlik, kapsayıcı tasarım ve kullanılabilirliğin kapsayıcı tasarım olarak ortada buluştuğu bir Venn şeması.

Ayrıca, mümkün olduğunca çok sayıda kullanıcının kullanabileceği tek bir tasarıma odaklanan evrensel tasarımın aksine, kapsayıcı tasarım ilkeleri belirli bir kullanıcı veya kullanım alanı için tasarım yapmaya ve ardından bu tasarımı başkalarına sunmaya odaklanır.

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

  1. Benzer bir deneyim sunun: Kullanıcıların içerik kalitesini düşürmeden görevleri ihtiyaçlarınıza uygun şekilde tamamlayabilmesi için arayüzünüzün herkese eşit bir deneyim sağladığından emin olun.
  2. Durumu göz önünde bulundurun: Arayüzünüzün, kullanıcıların koşullarından bağımsız olarak onlara değerli bir deneyim sunmasını sağlayın.
  3. Tutarlı olun: Tanıdık kuralları kullanın ve bunları mantıklı bir şekilde uygulayın.
  4. Kontrolü verin: Kullanıcıların içeriklere istedikleri şekilde erişip içeriklerle etkileşime geçebildiğinden emin olun.
  5. Seçenek sunun: Kullanıcıların özellikle karmaşık veya standart olmayan görevleri tamamlamaları için farklı yöntemler sunun.
  6. İçeriğe öncelik verin: Bu öğeleri içerik ve düzen içinde tercih edilen sırada düzenleyerek kullanıcıların temel görevlere, özelliklere ve bilgilere odaklanmasına yardımcı olun.
  7. Değer katma: Özelliklerin amacını, önemini ve farklı kullanıcılar için deneyimi nasıl iyileştirdiğini düşünün.

Karakterler

Birçok ekip, yeni bir tasarım veya özellik geliştirirken süreçte kendilerine rehberlik etmesi için kullanıcı personalarından yararlanır. Kullanıcı kimlikleri, genellikle nicel ve nitel kullanıcı araştırmalarına dayalı olarak dijital ürünlerinizi kullanan hayali karakterlerdir.

Karakterler de tasarım ve geliştirme sürecinde bu özellikleri test etmenin ve önceliklendirmenin hızlı ve ucuz bir yolunu sunar. Stratejiyi uyumlu hale getirmeye ve belirli kullanıcı gruplarına odaklanan hedefler oluşturmaya yardımcı olmak için sohbete gerçek dünyadaki bir değerlendirme katmanı ekleyerek site bileşenleriyle ilgili kararlara odaklanılmasına yardımcı olurlar.

Engellileri dahil edin

Engellilik kalıcı, geçici veya durumsal olabilir. Bu engellilikler dokunma, görme, işitme ve konuşmayı etkileyebilir.
Microsoft'ın Kapsayıcı 101 Aracı Kiti'nden Karakter Spektrumu.

"Herkes farklıdır. Ben sadece kendi deneyimimden konuşabiliyorum. İşitme engelli bir kişiyle tanıştığınızda hepimizle değil, tek bir İşitme engelliyle tanışmış olursunuz."

ID24'teki Deaf Tech: Travel Through Time from Past to Future (Sağır Teknoloji: Geçmişten Geleceğe Zaman Yolculuğu) konuşmasından Meryl Evans.

Engelli kullanıcıları karakterlerinize dahil ettiğinizde karakterler kapsayıcı bir tasarım aracı olarak kullanılabilir. Bunu yapmanın birçok farklı yolu vardır. Engelliliğe özel karakterler oluşturabilir, mevcut kullanıcı karakterlerine engellilik ekleyebilir veya durumsal, geçici ve kalıcı engellilik durumlarının dinamik gerçekliğini yansıtmak için bir karakter spektrumu oluşturabilirsiniz.

Engelli kullanıcıları karakterlerinize nasıl dahil ederseniz edin, bu karakterler gerçek kişilere veya klişelere dayalı olmamalıdır. Karakterler ise hiçbir zaman kullanıcı testlerinin yerine geçemez.

Karakter: Jane Bennet
Belirli kullanım alanlarını destekleyen bir karakter örneğine göz atın.
Uzun boylu ve koyu renk uzun saçlı Jane Smith, gri uzun kollu gömlek ve kot pantolon giyiyor.
  • Ad: Jane Bennet
  • Yaş: 57 yaşında
  • Konum: Essex, Birleşik Krallık
  • Meslek: UX mühendisi
  • Engellilik: Erken başlangıçlı Parkinson hastalığından (EYPD) kaynaklanan el titremesi
  • Hedefler: Kod önerileri eklemeyi kolaylaştırmak için konuşma metne dönüştürme girişini kullanın; en az sayıda tuş vuruşuyla internette bisiklet ekipmanı bulun.
  • Rahatsız edici durumlar: Yalnızca klavye desteğinin olmadığı web siteleri; dokunma etkileşimi için küçük alanlara sahip tasarım uygulamaları.

Kullanıcı deneyimi mühendisi olan Canan, şirketinin sitesinin alakalı kalması için hayati öneme sahip sayfaları tasarlayıp oluşturur. Gün boyunca birçok ekip üyesine destek veriyor. Teknik yangın söndürme işinin kraliçesi olan Rizie, bir şey beklenmedik şekilde ters giderse ilgili departmana gider.

El titremeleri nedeniyle ince motor becerilerini kaybetmesi, fare kullanmasını giderek zorlaştırıyor. Web'de gezinmek için klavyeye giderek daha fazla güveniyor. Jale her zaman fiziksel fitness'a kendini adamıştır. Yol yarışlarını ve BMX'i seviyor. Bu, geçen sene kendisine Genç Onset Parkinson teşhisi konduğunda daha da büyük bir darbe aldı.

Engelli simülatörleri

Personalarınızı taklit etmek veya desteklemek için engellilik simülasyonlarını kullanırken son derece dikkatli olun.

Engellilik simülasyon araçları, kullanıcılarda sempati veya empati oluşturma açısından iki ucu keskin bir kılıçtır. Bu durum kullanıcıya, simülasyon aracının kullanıldığı bağlama ve kontrol edilemeyen diğer birçok faktöre bağlı olabilir. Erişilebilirlik savunucularının çoğu, engelli simülasyon araçlarının kullanılmasına karşıdır ve engelli kişiler tarafından oluşturulan filmler, demolar, eğitici içerikler ve diğer içerikleri inceleyerek onların deneyimleri hakkında birinci elden bilgi edinmeyi önerir.

"Herhangi bir simülasyon etkinliğinin, görme engelli bireylerin kalbinde ve zihninde olmasını istediğimiz en önemli anlayışlardan bazılarını etkilemediğini tamamen dürüst bir şekilde kabul etmemiz gerektiğini düşünüyorum. Körlük bizi tanımlayan bir özellik değil. Körlükle ilgili yanlış anlaşılmalar ve düşük beklentiler en büyük engelimiz.

Bu yanlış anlamalar, tamamen katılmamızı engelleyen yapay bariyerler oluşturuyor ve bu yanlış sınırlamalar bizi geride bırakan bir etkenin parçası haline geliyor."

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

Erişilebilirlik bulguları

Kişilerinizi ve tasarımlarınızı oluştururken iş akışınıza keşifsel yöntemler ekleyebilirsiniz. Heuristics, Jakob Nielsen ve Rolf Molich tarafından 1990 yılında tanıtılan etkileşim tasarımı kurallarıdır. Bu on ilke, kullanılabilirlik mühendisliği alanındaki yıllara dayanan deneyime dayalı olarak geliştirildi ve o zamandan beri tasarım ve insan-bilgisayar etkileşimi programlarında kullanılıyor.

2019'a geldiğimizde Deque'teki tasarım ekibi, dijital erişilebilirliğe odaklanan yeni bir hiyerarşi grubu oluşturdu ve 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 kod satırı bile yazılmadan önce sağlanabilecek muazzam bir etkidir.

Orijinal heuristikler grubuna benzer şekilde, tasarımınızı planlarken dikkate almanız gereken on tane erişilebilirlik heuristiği vardır.

  1. Etkileşim yöntemleri ve modları: Kullanıcılar, istedikleri giriş yöntemini (ör. fare, klavye, dokunma) kullanarak sistemle verimli bir şekilde etkileşim kurabilir.
  2. Gezinme ve yol bulma: Kullanıcılar sistemde her zaman gezinebilir, içerik bulabilir ve nerede olduklarını belirleyebilir.
  3. Yapı ve anlam: Kullanıcılar her sayfadaki içeriğin yapısını anlayabilir ve sistemde nasıl çalışacaklarını öğrenebilir.
  4. Hata önleme ve durumlar: Etkileşimli kontroller, hataları önlemeye yardımcı olan kalıcı ve anlamlı talimatlar içerir ve kullanıcılara sorunların ne olduğunu ve hata döndürüldüğünde nasıl düzeltileceğini belirten açık hata durumları sunar.
  5. Kontrast ve okunabilirlik: Kullanıcılar metinleri ve diğer anlamlı bilgileri kolayca ayırt edip okuyabilir.
  6. Dil ve okunabilirlik: Kullanıcılar içeriği kolayca okuyup anlayabilir.
  7. Öngörülebilirlik ve tutarlılık: Kullanıcılar her öğenin amacını tahmin edebilir. Her bir öğenin sistemle bütün olarak nasıl ilişkili olduğu açıkça görülebilir.
  8. Zamanlama ve koruma: Kullanıcılara görevlerini tamamlamaları için yeterli süre tanınır ve süreleri (ör. oturum) dolsa bile bilgileri kaybolmaz.
  9. Hareket ve yanıp sönme: Kullanıcılar, sayfadaki hareket eden, yanıp sönen veya animasyonlu öğeleri durdurabilir. Bu öğeler kullanıcıların dikkatini dağıtmamalı veya başka bir şekilde zarar vermemelidir.
  10. Görsel ve işitsel alternatifler: Kullanıcılar, bilgi veren görsel veya işitsel içerikler için metne dayalı alternatiflere erişebilir.

Bu erişilebilirlik buluşsal yöntemleriyle ilgili temel bir anlayışa sahip olduktan sonra, erişilebilirlik buluşsal yöntemler çalışma sayfasını ve sağlanan talimatları uygulayarak bunu bir karaktere veya tasarıma uygulayabilirsiniz. Bu alıştırma, birden çok bakış açısını bir araya getirdiğinizde daha çok öğretici olacaktır.

Gezinme ve yol bulma kontrol noktası için örnek bir erişilebilirlik heuristik incelemesi aşağıdaki gibi görünebilir:

Gezinme ve yol bulma için kontrol noktaları Excel (+2 punto) Kartlar (+1 puan) Başarısız (-1 puan) Yok (0 puan)
Etkin öğeler odaklandığında net ve görünür bir gösterge ayarlanmış mı?
Sayfada, sayfaya özel bilgilerin başta bulunduğu anlamlı başlık metni var mı?
Sayfa başlığı öğesi ile H1 aynı mı yoksa benzer mi?
Her ana bölüm için anlamlı başlıklar var mı?
Bağlantıların amacı yalnızca bağlantı metninden mi yoksa bağlantının yakın bağlamından mı tanımlanıyor?
Sayfanın en üstünde bir atlama bağlantısı sağlanıyor mu ve bu bağlantıya odaklanıldığında görünüyor mu?
Gezinme öğelerinin düzenlenmesi yön bulmayı kolaylaştırıyor mu?

Ekipteki herkes sayfaya veya bileşene göz atıp erişilebilirlik heuristiği incelemesini yaptıktan sonra her kontrol noktası için toplamlar toplanır. Bu noktada, bulunan 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 aktarmadan önce erişilebilirlik ek açıklamaları ekleyebilirsiniz.

Notlar genellikle reklam öğesi seçimlerini 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ı, taslaklardan yüksek kaliteli modellere kadar tasarım sürecinin herhangi bir aşamasında uygulanabilir. Kullanıcı akışları, koşullu durumlar ve işlevler içerebilirler. 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 çizimleri örnekleri, Figma için Indeed.com'un erişilebilirlik ek açıklamaları kitinden alınmıştır.

Olası çeşitli düğme durumları için kullanılan görsel değişikliklerin tasarımı.
İşlem düğmesi tasarımı, duruma göre değişir: varsayılan, odak, fareyle üzerine gelme, etkin ve devre dışı.
Bir iş ilan kartı üzerinde kullanılan üç farklı simgenin tasarımı.
Üç simgenin alternatif metni vurgulanmıştır. "İşi kaydet" ve "ilgilenmiyorum" simgeleri düğme görevi görür. Bu nedenle, alternatif metin işlemin anlaşılması açısından kritik öneme sahiptir. "Indeed özgeçmişinizle başvurun" ifadesinin yanındaki simge tamamen dekoratif olduğundan alternatif metne ihtiyaç duymaz.
Form etiketlerinin ay ve yılla ilgili ilgili girişleriyle sahip olması gereken ilişkiyi gösteren görsel.
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ıç kitinin olması gerekir. Dilerseniz kendi grubunuzu da oluşturabilirsiniz. Her iki durumda da, hangi bilgilerin aktarma ekibine iletilmesi gerektiğine ve en uygun biçimin hangisi olduğuna karar vermeniz gerekir.

Erişilebilirlik ek açıklamaları için dikkate alınması 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ımlayın.
  • Bağlantıları atlama: Gizli ve görünür tasarım özelliklerini ve bunların sayfada nereye bağlandığını vurgulayın.
  • Resimler ve simgeler: Temel resimler ve simgeler için alternatif metin önerileri ekleyin.
  • Ses ve video: Altyazılar, transkriptler ve sesli açıklamalar için alanları ve bağlantıları vurgulayın.
  • Başlıklar: Programatik seviyeler ekleyin ve başlığa benzeyen her şeyi dahil edin.
  • Öne çıkan yerler: Tasarımdaki farklı bölümleri HTML veya ARIA ile vurgulayın.
  • Etkileşimli bileşenler: Tıklanabilir öğeleri, fareyle üzerine gelme efektlerini ve odak alanını tanımlayın.
  • Klavye: Odak noktasının nerede başlaması gerektiğini (alfabetik durak) ve sonraki sekme sırasını belirtin.
  • Formlar: Alan etiketleri, yardımcı metin, hata mesajları ve başarı mesajları ekleyin.
  • Erişilebilir adlar: Yardımcı teknolojilerin öğeyi nasıl tanıması gerektiğini belirtin.