Kullanıcı dostu arayüzler yaratın

Userspots

Özgür Web Yazılımlarında Kullanılabilirlik

Medya Laboratuvarı

Projeler

Projeler

Neler Yapıyoruz?

Özgür Web Yazılımlarında Kullanılabilirlik

• Nedir? Nasıl Yapılıyor?• Nasıl Yapabiliriz?

Kullanıcı Odaklı Tasarım

Analiz

Konsept Tasarım/Prototip/Test

Tasarım/Test/İmplemantasyon

Test/Geliştirme

Kullanıcı Odaklı Tasarım

Easton (1999)

Kullanıcı Odaklı Tasarım

http://www.paznow.com/ucd/

Kullanıcı Odaklı Tasarım

Kullanıcı Odaklı Tasarım

Kullanıcı Odaklı Tasarım

Tasarım Süreci

Kullanılabilirlik

“Bir ürünün potansiyel kullanıcıları tarafından, belirli bir kullanım bağlamı içinde, amaçlanan kullanım hedeflerine

ulaşmak için, ne derece etkin, verimli ve tatmin edici bir şekilde kullanılabilmesi”

Kullanılabilirlik

Kullanılabilirlik

• Öğrenebilirlik• Etkililik • Hatırlanabilirlik• Hatalar• Memnuniyet

Kullanılabilirlik

‘Bir ürünü kullanmak ne kadar zor ise, o kadar çok kullanmam’

Krug (2009)

10 Kullanılabilirlik Sloganı

1. En iyi tahmininiz yeterince iyi değil.

2. Kullanıcılar her zaman haklıdır.

3. Kullanıcılar her zaman haklı değildir.

4. Kullanıcılar tasarımcı değildir.

5. Tasarımcılar/Geliştiriciler kullanıcı değildir.

10 Kullanılabilirlik Sloganı

6. Genel Müdürler kullanıcı değildir.

7. Az çoktur.

8. Detaylar önemlidir.

9. Yardım genelde yardım etmez.

10. Kullanılabilirlik bir süreçtir.

Açık Kaynak ve Kullanılabilirlik

Neden?

Kim Yapıyor?

Siz kendi ürünüzün hedef kitlesinde değilsiniz.

Kime Yapıyor?

80 / 20

Açık Kaynak ve Kullanılabilirlik

Nasıl?

Açık Kaynak ve Kullanılabilirlik

Tasarım ekibinde kullanılabilirlik uzmanı

Firefox

Apple Yaklaşımı

Kullanıcıların neye ihtiyaçları olduğunu kestirmeye çalışmak için biz vizyon

geliştirmek

Firefox

Microsoft Yaklaşımı

Kullanıcı araştırmalarına odaklanıp kullanıcıların ne istediklerini ve neye ihtiyaçlarının olduklarını araştırmak

Firefox Tasarım Döngüsü

Firefox

Test Pilot

Eklenti ile kullanıcılara anket ve deneyler

Firefox

Firefox

Firefox

Firefox

Taslak

Açık Kaynak ve Kullanılabilirlik

Üniversitelerden destek

Wordpress

Wordpress 2.5 Kullanılabilirlik Testi

Ball State Universitesi Media Design Merkezi Laboratuvarı

http://wordpress.org/development/2008/10/usability-testing-report-25-and-crazyhorse/

Wordpress

Wordpress 3.0 Kullanılabilirlik Testi

40 gönüllü ile 20’den fazla ülkede

Drupal

Drupal 7 Kullanılabilirlik Testi

Baltimore Üniversitesi

11 kullanıcı ile göz izleme testi

http://www.drupalusability.org/

Drupal

Drupali kurun

İçerik oluşturun

Navigasyon menüsüne link ekleyin

İçerik türü oluşturun

Roller ve izinler düzenleyin

İçeriği kategorize edin

HTML filtresine img etiketini ekleyin

Arama bölümünü aktive edin

Açık Kaynak ve Kullanılabilirlik

Şirketlerden destek

Wikipedia

Bolt Peters ile İşbirliği

http://usability.wikimedia.org/wiki/Main_Page

Açık Kaynak ve Kullanılabilirlik

Uzmanlardan destek

OpenUsability

Açık kaynak yazılımlar ile kullanılabilirlik profesyonelleri

Açık Kaynak ve Kullanılabilirlik

Öğrencilerden destek

Season of Usability

Summer of Code’un kullanılabilirlik versiyonu

2009

Amarok, Drupal, Gallery, GeneMaNIA, GNOME, Kadu, Korganizer,OLM,

Semnotes, Ubuntu

Kullanılabilirlik Test Teknikleri

• Kart Gruplama• Prototip• Online Kullanılabilirlik Testi• Gerilla Kullanılabilirlik Testi• A/B Testi

Kullanılabilirlik Test Teknikleri

Kart Gruplama

Kart Gruplama

Birbirine yakın işlevler ile arayüzün belirlenen navigasyon ve menü yapısı

Kart Gruplama

Kart Gruplama

Öncesi

Sonrası

Kart Gruplama Metodları

• Açık/Kapalı• Takım/Bireysel• Yüz yüze/Yazılım/Online

Açık/Kapalı

Açık

Kullanıcılar grupları kendileri yaratıp, isimlendirir.

Kapalı

Gruplar kart gruplamayı hazırlayan kişiler tarafından oluşturulur, kullanıcıdan kartı ilgili kategoriye yerleştirmesi istenir.

Açık

Kapalı

Takım/Bireysel

Takım

Katılımcılar gruplamayı takım halinde yapar, gruplama hakkındaki tartışma kayıt edilerek kullanıcıların düşünce anlayışı ortaya çıkar.

Bireysel

Katılımcılar gruplamayı bireysel yapar, böylece daha fazla yanıt alınır.

Yüz yüze

Yazılım

• CardSort (Windows)• Card Zort (Windows)• xSort (Mac)

xSort

Card Zort

xSort

CardZort

Online

• WebCAT• Websort (1 Çalışma:79$, 5 Çalışma 299$)• Optimalsort (30 Gün 109$, 1 yıl 559$)

Online

Kullanılabilirlik Test Teknikleri

Prototip

Prototip

Prototip

Prototip

Prototip

Prototip AraçlarıPrototip Yöntemi Yüzde

Kağıt %77

Visio %59

Powerpoint %43

Dreamweaver %47

Axure %30

Omnigraffle %30

İllustrator %21

Flash %23

Acrobat %21

Fireworks %19

Photoshop %10

Diğer HTML Editörleri %4

Prototip Çeşitleri

Prototip Yöntemi Yüzde

Kağıt %81

HTML %58

Axure, iRise ile otomatik üretilmiş HTML

%39

HTML ile tıklanabilir görseller %34

Flash, Flex, AIR %27

Keynote, Powerpoint %24

Tıklanabilir PDF %21

Prototip

• Kağıt Kalem• Pencil – Firefox Eklentisi• Draw/Powerpoint/Keynote• Balsamiq (79$ - İnsanlık için ücretsiz)

ATM

Ipad

Pencil

Draw/Powerpoint

Balsamiq

• Kullanımı kolay• Adobe AIR uygulaması• Ucuz• Hızlı• Ipad,Iphone, Android kütüphaneleri

Android Bileşenleri

Kullanılabilirlik Testi

Online Kullanılabilirlik Testi

Online Kullanılabilirlik Testi

İkon Testi

Kmail İkon Testi

Gimp

Resmi kesmek için menüden hangi ikona tıklarsınız?

Online Kullanılabilirlik Testi

Tıklama Analizi

Tıklama Analizi

Videoları karışık oynatmak isterseniz nereye tıklarsınız?

VLC

Online Test Araçları

• Infomaki (Açık Kaynak)• Openvulab (Açık Kaynak)• Remotespots (Userspots ile ücretsiz)• Optimalsort (Userspots ile ücretsiz)• Usabilla (Userspots ile ücretsiz)

Kullanılabilirlik Testi Teknikleri

Gerilla Kullanılabilirlik Testi

Gerilla Test

Nerede

Herhangi bir yer/Toplantı Odası

Gerilla Test

Ne Zaman

Proje ilerledikçe ayda bir kez 3 saat

Gerilla Test

Nasıl

Teste katılacak 3 kişi bulunur.

Gerilla Test

Katılımcı Sayısı?

Gerilla Test

Nasıl

Projenin gelindiği noktada projenin fonksiyonlarına uygun 3 görev çıkarılır.

Gerilla Test

Nasıl

Testin gerçekleştiği bilgisayarda ekran ve ses kaydı yapılır.

CamStudio – Windows

Screentoaster – Online

Gerilla Test

Raporlama

1-2 Sayfalık rapor web sayfasında yayınanır.

Gerilla Test

İstatistik?

Herhangi bir istatistiğe gerek yok/ Uğraşmak için vakitte yok

Gerilla Test

Amaç

Proje başlarında karşıya çıkabilecek büyük çaplı kullanılabilirlik problemlerini keşfetmek.

Kullanılabilirlik Testi Teknikleri

A/B Testi

A/B Testi

A/B testleri ile bir sayfanın farklı versiyonlarının performansını ölçebiliyoruz. Versiyonlar aynı sayfanın farklı tasarımları olabileceği gibi, aynı tasarım içinde sayfa öğelerinin yerlerinin değişmesinden de oluşabilir.

Google Website Optimizer

Huffington Post

Huffington Post haber başlıklarında hangi başlığın daha etkili olabileceğini test etmek amacıyla A/B testleri uyguluyor.

A/B

A : Gül ‘Aşı olacak mısınız?’ sorusuna ne cevap verdi?

B : Gül aşı olacak mı?

A/B

1000 kişiye A başlığı, 1000 kişiye B başlığı gösterilir. Hangi versiyonda kullanıcıların habere daha fazla tıkladığı ölçülür.

Google

Google Arama Ürünleri ve Kullanıcı Deneyimi Başkanı Marissa Mayer: ‘Google link için seçtiği rengin tonunun tıklama oranına etkisini dahi araştırıyor’

Elinde yeterli veri var mı?

Google’dan istifa eden Görsel Tasarım Başkanı Douglas Bowman: ‘Google mavi renginin 41 tonunun araştırmasını yapıyordu, kenarlığı 3px seçtiğimde 4px ve 5px ile test edip etmediğim soruluyordu.’

Youtube

%15.7 dönüşüm oranı artışı

A/B Testi Örnekleri

%51.6 %59.6

A/B Testi Örnekleri

%2.1 %6.1

A/B Testi Örnekleri

%9.7 %10.1

Userspots

Teşekkürler...

Bizi Takip Edin

www.userspots.com

İletişim

mustafa@userspots.com

.