Graphical User Interface, UX, Usability

1. GUIGRAPHICAL
USER INTERFACE
Sinan Özdemir www.sinanozdemir.com sinanozdemir@gmail.com

2. • Tanımlar; UX, UI, Usability
• Grafik Arayüzler ve İlk İzlenim
• Tasarım Öncesi Analiz
• Tasarımda Estetik ve Kullanılabilirlik
• Grafik Arayüz ve Grafik Elementler
• Grafik Arayüz Tasarım Prensipleri

3. UX
User Experience | Kullanıcı Deneyimi
UI USABILITY

4. Bir ürün ya da servisle etkileşime girerken,
onu kullanırken yaşadığımız
ve kullandıktan sonra algılamaya devam ettiğimiz
tüm deneyimlerin toplamıdır.
UX
User Experience | Kullanıcı Deneyimi
UI USABILITY

5. UX
User Interface | Kullanıcı Arayüzü
UI USABILITY

6. Kullanıcı arayüzü, veya kullanıcı arabirimi
(İnsan Makine Arayüzü) insanların bir makine,
cihaz, bilgisayar programı ya da karmaşık
aletlerle etkileşimini sağlayan yöntemlerin
bileşkesine verilen addır.
UX
User Interface | Kullanıcı Arayüzü
UI USABILITY

7. Kullanılabilirlik (Usability), belirli kullanıcının belirli bir
ortamda belirli hedeflere etkili, verimli ve tatminkar
bir şekilde ulaşmasını irdeler. (ISO 9241-11)
UX UI USABILITY

8. Öğrenilebilirlik
Learnability
Verimlilik
Efficiency
Hatırlanabilirlik
Memorability
Hatasızlık
Faultlessness
Memnuniyet
Satisfaction
UX UI USABILITY

9. UX UI USABILITY
UX, kullanıcı ihtiyacına yönelik çözümün stratejisini, gereklerini ve
kapsamını belirleyen kavramsal bir tasarım çalışmasıyken,
UI, gerçekleştirilen bu kavramsal çalışmalar ışığında kullanıcının
somut olarak algılayabileceği arayüzü tasarlama görevini
üstleniyor.
Usability ise, kullanıcının UI ile etkileşime geçtiği sistemin,
kullanıcı için ne kadar verimli çalıştığı ile ilgili bir niteliği olarak
tanımlanabilir.

10. İLK İZLENİM

11. Google Reader FlipboardVS

12. Myspace SpotifyVS

13. TASARIMA
BAŞLAMADAN ÖNCE
• Ürünün hedefi ve iş modeli ne?
• Kullanıcılar kim, onlardan ne öğrenebiliriz?
• Teknik yeterliliklerimiz ne?
• İletmek istediğimiz duygusal mesaj ne?
(brand identity, mood, personality)

14. Ürünün hedefi ve iş modeli ne?
Link sayısı Sonsuz scroll Grid yapısı

15. Kullanıcılar kim?
Onlardan ne öğrenebiliriz?
ssk.gov.tr nihseniorhealth.gov

16. Teknik yeterliliklerimiz ne?
ATM Sony Aibo

17. Ürünün hedefi ve iş modeli ne?
ustabulucu.com ustaiste.com trustatrader.com

18. Yüksek estetik
ESTETİK ve
KULLANILABİLİRLİK İLİŞKİSİ
Düşük estetik
Is Beautiful Really Usable? Toward Understanding the Relation Between Usability, Aesthetics, and Affect in HCI
Alexandre N. Tuch, Sandra P. Roth, Kasper Hornbæk, Klaus Opwis, Javier A. Bargas-Avila 2012

19. ESTETİK ve
POZİTİF ETKİSİ

20. GRAFİKSEL ELEMENTLER
Tipografi Renk Fotoğraf
Grafik Şekil Boşluk

21. TASARIM PRENSİPLERİ
• Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı

22. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı

23. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
medium.com turkcell.com
1
2
3
1
2
32
1

24. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
ebay.com

25. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
nngroup.com

26. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
gotomeeting.com

27. mediamarkt.com.tr
• Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı

28. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
The New York Times

29. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
crazyegg

30. • Tutarlılık
• Kısayollar
• Bilgilendirici
Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
deutschepost.de

31. GUIGRAPHICAL
USER INTERFACE
Sinan Özdemir www.sinanozdemir.com sinanozdemir@gmail.com