Slayt 1 - Hacettepe Üniversitesi

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ç
Etkileşimli Tasarım
Bilgisayar programı
seç
Etkileşimli Tasarım?
Donanımı
seç
İnsan
Bilgisayar programı
seç
Etkileşimli Tasarım
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
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
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
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)
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ı
Tasarım Nedir?>
Ana mesaj->kullanıcı
 Tasarımın esası:
Kullanıcının davranışı
Tasarım Süreci
 Ne?
 Ne zaman?
 Ne den sonra?
 Nasıl yapılır?
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)
Tasarım Süreci
İhtiyaçlar
Görüşmeler
Etnik kimlik
Senaryolar
Görev analizleri
Kılavuzlar
İlkeler
Analiz
Kesin
belirleme
Tasarım
Ne var?
Ne istenmiş?
Diyalog
gösterimleri
Değerlendirme
Sezgisel
prototip
Uygulama
ve yerleşim
Mimariler
Belgeleme
Yardım
Tasarım Süreci>Aşamalar>
İhtiyaçlar
 Durumun saptanması
 İnsanlarla görüşme
 Video çekimi
 Kullanılan objelerin incelenmesi
 Gözlem
Tasarım Süreci>Aşamalar>
Analiz
 Görüşmeler elde edilen verilen incelenmesi
 Ana konunun belirlenmesi
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
Tasarım Süreci>Aşamalar>
Yineleme ve Prototip Oluşturma
 Alfa/Beta sürümü oluşturma
 Geri dönüt
Tasarım Süreci>Aşamalar>
Uygulama ve Yerleşim
 Gerçek sistemin oluşturulması
Kullanıcı
 Kullanıcı/kullanıcılar odaklanma
 Kullanıcını tanı
 Sistem paydaşları/etkilenenleri
(Stakeholders)
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
Kültürel araştırma
 Türkiye’de çoğu evde yer alır
→
→
İplik kutusu
Tesisat kutusu
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
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
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
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
Gezinim Tasarımı
 Sosyal-teknolojik içe içe geçme/araya girme
 Dokunabilecekmiş gibi düşünme
 Karşılıklı etkilenme
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
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)
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ıç
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
Yerel Yapı-Ekmek kırıntısı
Yerel Yapı
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
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
the systems
Gezinim problemi -> 7±2
info and help
management
add user
remove user
messages
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
main
screen
remove
user
add user
confirm
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ş
Ekran Tasarımı ve Düzenleme
 Farklı elementler nasıl bir araya gelecek?
 İnsan faktörü (psikolojik)
 Bilgisayar faktörü (grafiksel)
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ı
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)
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
Gruplama ve Yapılanma
 Mantıksal – Psikolojik
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ı
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ı>
Dekorasyon
 Gruplara ayırma
 Yazı tipi sitili
 Arka plan/ ön plan rengi
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
Hizalama
 Sağa / Sola dayama
 Ortalama / iki yana yaslama
 Sayılardan virgül esasla yaslama
532,56
179,3
256,317
15
73,948
1035
3,142
497,6256
532,56
179,3
256,317
15
73,948
1035,00
3,142
497,6256
Alan
Janet
Gregory
Russell
Dix
Finlay
Abowd
Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
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
sherbert
toffee
chocolate
fruit gums
coconut dreams
75
120
35
27
85
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
Boş alan
 Metinsel
→
→
Tipografi
Kaligrafi
 Yerleşim
→
→
Metin
Grafik
THE GAPS
BETWEEN
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)
Ekran Tasarımı ve Düzenleme> Kullanıcı Eylemi ve Kontrol>
Bilgi Girişi
 Diyalog kutuları
 İsteğe bağlı seçim
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
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
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)
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
Bilgiyi Sunma
 Metin
 Sayı
 Harita
 Tablo
 Teknolojik yoldan
 Farklı amaçlı bilginin sunulması
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
Estetik ve Fayda
 Kullanıcı memnuniyeti
 Kaliteli ürün
 Güzellik faydalı mı?
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
Karışım Oluşumu: renk ve 3D
 Renk etkisi
 Donanım
 Faydalılık
 Görünebilirlik
 Etkililik
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
Yerellik/Evrensellik
 Arayüz ve kullanıcı girişi farkı
 Para birimi, sayı gösterimleri
 Ülkeye ait özellikler
→
→
Dilsel
Kültürel
 Farklı ülke dil kodlamaları destekleme?
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
 Sıralamalar
 Gruplamalar
 Renkler
 Hizalamalar
 Dekorasyon
 Boşluk alan
Yineleme ve Prototip Oluşturma
 İlk tasarım
 Değerlendirme
→
→
Biçimlendirici (Formative)
Özetleyici (Summative)
Tamam?
tasarım
prototip
Yeniden tasarım
değerlendirme
Bitti!
Kaynaklar
 Dix, A. Ve Findlay, J. (2004). Interaction
design basics. Human-computer interaction
(s. 191-223). Pearson: England.
 Soegaard, M. (2003). Affordances.
Interaction-Design.org: http://www.interactiondesign.org/encyclopedia/affordances.html
 http://www.hcibook.com