1 / 57

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

Tasarım Süreci Bölüm 5 Etkileş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. Giriş. Kaynak: http://www.userspots.com. Etkileşimli Tasarım?. Donanımı seç.

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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)

More Related