Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri Ders Sorumlusu: Doç. Dr. Hakan TÜZÜn hazırlayan

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ş

Etkileşimli Tasarım?

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

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

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?

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

• Durumun saptanması

• İnsanlarla görüşme

• Video çekimi

• Kullanılan objelerin incelenmesi

• Gözlem

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

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

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

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

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

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

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)

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ı

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

Grupların ve Öğelerin Sınıflanması

• Ekranda yer alma sırası

Dekorasyon

• Gruplara ayırma

• Yazı tipi sitili

• Arka plan/ ön plan rengi

Hizalama

• Sağa / Sola dayama

• Ortalama / iki yana yaslama

• Sayılardan virgül esasla yaslama

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

Boş alan

• Metinsel

• Tipografi
• Kaligrafi

• Yerleşim

• Metin
• Grafik

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

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ı

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

Yineleme ve Prototip Oluşturma

• İlk tasarım

• Değerlendirme

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

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