Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri

1. Tasarım SüreciBölüm 5Etkileşimli Tasarımın Temelleri Ders Sorumlusu: Doç.Dr. Hakan TÜZÜN Hazırlayan: Safiye OLGUN Hacettepe Üniversitesi 2011-2012 Bahar Dönemi BTÖ 611 İnsan-Bilgisayar Etkileşimi

2. Giriş Kaynak: http://www.userspots.com

3. Etkileşimli Tasarım? Donanımı seç Etkileşimli Tasarım Bilgisayar programı seç

4. Etkileşimli Tasarım? Donanımı seç Etkileşimli Tasarım İnsan Bilgisayar programı seç

5. Etkileşimli Tasarım • İnsan eliyle yapılan donanım ve bilgisayar programı • Kullanıcı davranışını nasıl etkiyeceğini • Anlama • Seçim • Kılavuzlar, bireysel ve çevrimiçi yardım sistemleri • İç içe geçen unsurları hesaba katma • Etkileşimin kendisi

6. Anahatlar • Tasarım Nedir? • Tasarım Süreci • Kullanıcı • Senaryo • Gezinim Tasarımı • Ekran Tasarımı ve Düzenleme • Yineleme ve Prototip Oluşturma • Kaynaklar

7. Tasarım Nedir? • Sınırlılıklarla hedeflere ulaşmaktır. • Hedefler (Goals) • Niyet? Kim için? Beklenti? • Sınırlılıklar/Kısıtlamalar (Constraints) • Malzeme? Standart? Maliyet? Süre? Sağlık-Güvenlik sorun? • Ödün verme (Trade-off) • Facebook sitesine video yüzlü konuşma eklenmesi

8. Tasarım Nedir?> Tasarımın altın kuralı • Malzemeleri anlama • Bilgisayarı anlama (bkz. Bölüm2) • Sınırları, kapasitesi, araçları, tasarımı • İnsanı anlama (bkz. Bölüm1) • Psikolojik durumu, sosyal algıları, insan hatası • İnsan-bilgisayar etkileşimi(bkz. Bölüm3-4)

9. Tasarım Nedir?> İnsan-hata • Tasarım fiziksel malzeme ile yapılır • Hatayı insan yapar • İyi tasarlanmamış bir uçak programı • Depremde yıkılan binalar • Kötü tasarlanmış veritabanı

10. Tasarım Nedir?> Ana mesaj->kullanıcı • Tasarımın esası: Kullanıcının davranışı

11. Tasarım Süreci • Ne? • Ne zaman? • Ne den sonra? • Nasıl yapılır?

12. Tasarım Süreci> Aşamalar • İhtiyaçlar (Requirements) • Analiz (Analysis) • Tasarım (Design) • Yineleme ve prototip oluşturma (Iteration and prototyping) • Uygulama ve yerleşim (Implementation and deployment)

13. SenaryolarGörev analizleri Kılavuzlar İlkeler Kesin belirleme Görüşmeler Etnik kimlik Ne var? Ne istenmiş? Diyalog gösterimleri Değerlendirme Sezgisel Mimariler Belgeleme Yardım Tasarım Süreci İhtiyaçlar Analiz Tasarım Uygulama veyerleşim prototip

14. Tasarım Süreci>Aşamalar> İhtiyaçlar • Durumun saptanması • İnsanlarla görüşme • Video çekimi • Kullanılan objelerin incelenmesi • Gözlem

15. Tasarım Süreci>Aşamalar> Analiz • Görüşmeler elde edilen verilen incelenmesi • Ana konunun belirlenmesi

16. Tasarım Süreci>Aşamalar> Tasarım • Hareket sonucu • Ne isteniyor • Nasıl yapılır? • Sezgisel (heuristics) • Her ekranın düzenlenmesi • Kullanıcı dostu, bilişsel, örgütlenmiş, anlaşılır iletişim

17. Tasarım Süreci>Aşamalar> Yineleme ve Prototip Oluşturma • Alfa/Beta sürümü oluşturma • Geri dönüt

18. Tasarım Süreci>Aşamalar> Uygulama ve Yerleşim • Gerçek sistemin oluşturulması

19. Kullanıcı • Kullanıcı/kullanıcılar odaklanma • Kullanıcını tanı • Sistem paydaşları/etkilenenleri (Stakeholders)

20. Kullanıcı Tanıma • Kullanıcı kim? • Genç/yaşlı? Tecrübeli? Genel beceri? • Kullanıcı senden farklı olabilir • Hitap kitlesi, cinsiyeti • Kullanıcı ile görüş • Ucu açık sorular, ihtiyaç? İçerik? Katılıcı profili? • Kullanıcı gözlemle • İzle, kaydet • Kullanıcıya ilişkin hayal kur • Tecrübe, yapabilecekleri, ortamı, bireysel farklılık

21. Kültürel araştırma • Türkiye’de çoğu evde yer alır • İplik kutusu • Tesisat kutusu

22. Senaryo • Tasarım için gerekli olan öyküler • Kısa senaryolar • Yalın metin-> Detaylı senaryo • İnsan-Bilgisayar etkileşimi ->akış • Kullanıcı ne yapmayı istiyor? • Sistem şu an ne yapıyor? • Storyboard: taslak ve ekran çekimleri • Detaylı senaryo->gerçek

23. Senaryo> Senaryo Tasarımı • Diğerleri ile iletişim • Diğer tasarımcılar, kullanıcı • Diğer modelleri onaylama • Denenmişlik • Dinamik ifade • Ekran çekimleri ve taslaklar -> algı√ • Davranış ->X

24. Senaryo> Doğrusallık • Etkileşimli sistem modeli • Karmaşık, ağ, aşamalı örgütlenme • Bilgisayar/atari oyunları • Doğrusallık (linarity) • Potansiyel etkileşimlere karşı tek yol • Doğrusal zamanlama: hikaye anlatıcılar • Alternatifsizlik: kullanıcı etkisiz • Etkileşimli sistem modeli X Doğrusallık

25. Senaryo> Senaryo neyi sağlar? • Ne istendiğini görmeyi • Kullanıcının potansiyel tasarımı ile nasıl uzlaşacağını önermeyi • Önerilen çalışacak uygulamaların kontrolünü • Genel durumlar için son değerlendirmeyi

26. Gezinim Tasarımı • Sosyal-teknolojik içe içe geçme/araya girme • Dokunabilecekmiş gibi düşünme • Karşılıklı etkilenme

27. Gezinim Tasarımı • Seçimli nesneler (Widgets) • Menü maddeleri, düğmeler, gösterge, skala, tag, element, köprü, • Bölmeler veya pencereler (Screens or windows) • Sayfa tasarımı, fiziksel düzenlenme • Uygulama içinde gezinim (Navigation within the application) • Etkileşimli bulma, site haritası • Çevre (Environment) • Ağ, web, dış köprüler, gerçek dünya

28. Gezinim Tasarımı • Uygulamayı kim kullanacak? • Kullanıcı uygulama hakkında nasıl düşünecek? • Kullanıcı bununla ne yapacak? • Gezinim; • Yerel yapı (Local structure) • Evrensel yapı (Global structure)

29. Gezinim Tasarımı> Yerel Yapı • Tek ekran • Kısmi sistem tasarımı • Kullanıcı>hedef ulaşan hızlı etkili yolu dener • Etkileşim->hedef ulaşma davranışı hedef başlangıç

30. Gezinim Tasarımı>Yerel Yapı> Yerel yapıdan ne öğrenilir? • Nerede olduğu bilinir • Ne yapabileceği bilinir • Nereye gidebileceği ve ne olabileceği bilinir • Nerelerde olduğu ve ne yaptığı bilinir

31. Yerel Yapı-Ekmek kırıntısı

32. Yerel Yapı

33. Yerel Yapı-Tuzaklar • Sade anlaşılmaz menü • Telefon bankacılığı • Geri tuş kullanımı olmama->oturum kapanma • Yahoo e-posta servisi • Banka siteleri • Ayrıntıların kaçırılması<-iri logo/imaj kullanımı • Reklamlar • ATM

34. the systems info and help management messages add user remove user Gezinim Tasarımı> Evrensel Yapı • Aşamalı örgütleme • Ekranlar arası hareket (Köprü ->köprü) • Fonksiyonel bağlar(roller, kullanıcı tipleri, seçili hitap kitlesi) • Köprüler, ekranlar, sayfalar, durumlar • Mantıksal gruplanma • Gezinim problemi -> 7±2

35. main screen remove user confirm add user Gezinim Tasarımı> Evrensel Yapı-Diyalog • Aşamalı örgütlenmeden farklı • Ekran ve komut takibi • Şablon kullanımı • Network diyagramı prensipleri; • Ne ne olacağını gösterir • Ne zaman ne olacağını gösterir • Dallanmaları ve döngüleri gösterir • Görev merkezli

36. Gezinim Tasarımı> Genişleyen Duru Anlık • Stil • Standart nesnelerin kullanımı • Fonksiyonellik • Standart görev gerçekleştirme • Gezinim • Uygulamalar arası geçiş

37. Ekran Tasarımı ve Düzenleme • Farklı elementler nasıl bir araya gelecek? • İnsan faktörü (psikolojik) • Bilgisayar faktörü (grafiksel)

38. Ekran Tasarımı ve Düzenleme> Temel Prensipler • Soru: Kullanıcı ne yapılıyor? • Fikir: Gerekli bilgi ne? Kullanıcının hangi karşılaştırması ihtiyaç? Hangi sırada verilecek? • Tasarım: Öğelerin fonksiyonları

39. Ekran Tasarımı ve Düzenleme> Düzenleme Araçları • Gruplama ve yapılanma (Grouping and structure) • Grupların ve öğelerin sınıflanması(Order of groups and items) • Dekorasyon (Decoration) • Hizalama (Alignment) • Boş alan (White space)

40. Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … … Ekran Tasarımı ve Düzenleme> Düzenleme Araçları> Gruplama ve Yapılanma • Mantıksal – Psikolojik

41. Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … … Ekran Tasarımı ve Düzenleme> Düzenleme Araçları> Grupların ve Öğelerin Sınıflanması • Ekranda yer alma sırası

42. ABCDEFGHIJKLM NOPQRSTUVWXYZ Ekran Tasarımı ve Düzenleme> Düzenleme Araçları> Dekorasyon • Gruplara ayırma • Yazı tipi sitili • Arka plan/ ön plan rengi

43. Ekran Tasarımı ve Düzenleme> Düzenleme Araçları> Hizalama Alan Dix Janet Finlay Gregory Abowd Russell Beale • Sağa / Sola dayama • Ortalama / iki yana yaslama • Sayılardan virgül esasla yaslama Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell 532,56179,3256,3171573,94810353,142497,6256 532,56179,3256,3171573,9481035,003,142497,6256

44. sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85 Ekran Tasarımı ve Düzenleme> Düzenleme Araçları> Hizalama-Sütun kullanımı • Satır renklenmesi ayırma • Sekme ile ayırma • Kılavuz çizgiyle ayırma • Sütunları birbirine doğru yaslama

45. THE GAPS BETWEEN Ekran Tasarımı ve Düzenleme> Düzenleme Araçları> Boş alan • Metinsel • Tipografi • Kaligrafi • Yerleşim • Metin • Grafik

46. Ekran Tasarımı ve Düzenleme> Kullanıcı Eylemi ve Kontrol • Bilgi girişi (Entering information) • Yapılacağı bilme (Knowing what to do) • Zorluklar (Affordances)

47. Ekran Tasarımı ve Düzenleme> Kullanıcı Eylemi ve Kontrol> Bilgi Girişi • Diyalog kutuları • İsteğe bağlı seçim

48. Ekran Tasarımı ve Düzenleme> Kullanıcı Eylemi ve Kontrol> Yapılacağı Bilme • Yapılacağı fark etme? • Ekranda belli-belirsiz elementler • Stil kılavuzu şirketleri ve platformları • Standartlaşma • Doğruyu seçme

49. Ekran Tasarımı ve Düzenleme> Kullanıcı Eylemi ve Kontrol> Zorluklar • Standart olmayan stiller • Avant-gart stil • Nasıl zorluklu öğe seçiliyor? • Tecrübeler • Kültürel unsurlar • Yakınında bulunan cazip öğe

50. Ekran Tasarımı ve Düzenleme> Uygun Görünüm • Bilgiyi sunma (Presenting information) • Estetik ve fayda (Aesthetics and utility) • Karışım oluşumu: renk ve 3D (Making a mess of it: color ve 3D) • Yerellik/Evrensellik (Localization/internationalization)