Embed Size (px)
Citation preview
• 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
UXUser Experience | Kullanıcı Deneyimi
UI USABILITY
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.
UXUser Experience | Kullanıcı Deneyimi
UI USABILITY
UXUser Interface | Kullanıcı Arayüzü
UI USABILITY
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.
UXUser Interface | Kullanıcı Arayüzü
UI USABILITY
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
ÖğrenilebilirlikLearnability
Verimlilik Efficiency
Hatırlanabilirlik Memorability
Hatasızlık Faultlessness
Memnuniyet Satisfaction
UX UI USABILITY
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.
İLK İZLENİM
Google Reader FlipboardVS
Myspace SpotifyVS
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)
Ürünün hedefi ve iş modeli ne?
Link sayısı Sonsuz scroll Grid yapısı
Kullanıcılar kim? Onlardan ne öğrenebiliriz?
ssk.gov.tr nihseniorhealth.gov
Teknik yeterliliklerimiz ne?
ATM Sony Aibo
Ürünün hedefi ve iş modeli ne?
ustabulucu.com ustaiste.com trustatrader.com
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
ESTETİK ve POZİTİF ETKİSİ
GRAFİKSEL ELEMENTLER
Tipografi Renk Fotoğraf
Grafik Şekil Boşluk
TASARIM PRENSİPLERİ
• Tutarlılık
• Kısayollar
• Bilgilendirici Geribeslemeler
• Diyaloglar
• Hafıza kullanımı
• Kullanıcı odağı
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
• 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
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
ebay.com
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
nngroup.com
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
gotomeeting.com
mediamarkt.com.tr
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
The New York Times
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
crazyegg
• Tutarlılık • Kısayollar • Bilgilendirici
Geribeslemeler
• Diyaloglar • Hafıza kullanımı • Kullanıcı odağı
deutschepost.de
