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

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

Ders Sorumlusu: Doç.Dr. Hakan TÜZÜNHazırlayan: Safiye OLGUN

Hacettepe Üniversitesi 2011-2012 Bahar DönemiBTÖ 611 İnsan-Bilgisayar Etkileşimi

Giriş

Kaynak: http://www.userspots.com

Donanımıseç

Bilgisayar programıseç

Etkileşimli Tasarım

Etkileşimli Tasarım?

Donanımıseç

Bilgisayar programıseç

Etkileşimli Tasarımİnsan

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

Etkileşimli Tasarım

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

Anahatlar

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?

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?>

Tasarımın altın kuralı

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?>

İnsan-hata

Tasarımın esası:

Kullanıcının davranışı

Tasarım Nedir?>

Ana mesaj->kullanıcı

Tasarım Süreci

Ne? Ne zaman? Ne den sonra? Nasıl yapılır?

İ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>

Aşamalar

İhtiyaçlar

Analiz

Tasarım

Uygulamave yerleşim

prototip

GörüşmelerEtnik kimlik

Ne var?Ne istenmiş?

Kılavuzlarİlkeler

Diyalog gösterimleri

Kesin belirleme

MimarilerBelgeleme

Yardım

DeğerlendirmeSezgisel

SenaryolarGörev analizleri

Tasarım Süreci

İ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

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


Yineleme ve Prototip Oluşturma

Alfa/Beta sürümü oluşturma Geri dönüt


Uygulama ve Yerleşim

Gerçek sistemin oluşturulması


Kullanıcı/kullanıcılar odaklanma

Kullanıcını tanı

Sistem paydaşları/etkilenenleri (Stakeholders)

Kullanıcı

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

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

Senaryo>

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ı

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)

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ışı

Gezinim Tasarımı>

hedefbaşlangıç

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

Gezinim Tasarımı>Yerel Yapı>

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

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

Gezinim Tasarımı>

the systems

info and help management messages

add user remove user

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

Gezinim Tasarımı>

mainscreen

removeuser

confirm

add user

Stil→ Standart nesnelerin kullanımı

Fonksiyonellik→ Standart görev gerçekleştirme

Gezinim → Uygulamalar arası geçiş

Genişleyen Duru AnlıkGezinim Tasarımı>

Ekran Tasarımı ve Düzenleme

Farklı elementler nasıl bir araya gelecek?

İnsan faktörü (psikolojik) Bilgisayar faktörü (grafiksel)

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)


Gruplama ve Yapılanma

Mantıksal – Psikolojik

Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>

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 …… … … …

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 …… … … …

Dekorasyon

Gruplara ayırma Yazı tipi sitili Arka plan/ ön plan rengi


ABCDEFHIJKLMNOPQRSTUVWXYZ

Hizalama

Sağa / Sola dayama Ortalama / iki yana yaslama Sayılardan virgül esasla yaslama


532,56179,3

256,31715

73,9481035

3,142497,6256

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

532,56179,3

256,31715

73,9481035,00

3,142 497,6256

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 75toffee 120chocolate 35fruit gums 27coconut dreams 85

Boş alan

Metinsel → Tipografi→ Kaligrafi

Yerleşim→ Metin→ Grafik


THE GAPS BETWEEN

Kullanıcı Eylemi ve Kontrol

Bilgi girişi (Entering information) Yapılacağı bilme (Knowing what to do) Zorluklar (Affordances)


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


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


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)


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ı?


Karışım Oluşumu: renk ve 3D

Renk etkisi Donanım Faydalılık Görünebilirlik Etkililik


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?


Sıralamalar Gruplamalar Renkler Hizalamalar Dekorasyon Boşluk alan


İlk tasarım Değerlendirme

→ Biçimlendirici (Formative)→ Özetleyici (Summative)

Yineleme ve Prototip Oluşturma

prototip değerlendirmetasarım

Yeniden tasarım

Bitti!Tamam?

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.interaction-design.org/encyclopedia/affordances.html

http://www.hcibook.com

Documents

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