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



Yüklə 445 b.
tarix06.03.2018
ölçüsü445 b.
#44454


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

  • 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



Yüklə 445 b.

Dostları ilə paylaş:




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©muhaz.org 2024
rəhbərliyinə müraciət

gir | qeydiyyatdan keç
    Ana səhifə


yükləyin