Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri
-
Upload
wynter-haney -
Category
Documents
-
view
46 -
download
3
description
Transcript of Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri
![Page 1: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/1.jpg)
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
![Page 2: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/2.jpg)
Giriş
Kaynak: http://www.userspots.com
![Page 3: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/3.jpg)
Donanımıseç
Bilgisayar programıseç
Etkileşimli Tasarım
Etkileşimli Tasarım?
![Page 4: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/4.jpg)
Donanımıseç
Bilgisayar programıseç
Etkileşimli Tasarımİnsan
Etkileşimli Tasarım?
![Page 5: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/5.jpg)
İ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
![Page 6: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/6.jpg)
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
![Page 7: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/7.jpg)
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?
![Page 8: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/8.jpg)
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ı
![Page 9: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/9.jpg)
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
![Page 10: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/10.jpg)
Tasarımın esası:
Kullanıcının davranışı
Tasarım Nedir?>
Ana mesaj->kullanıcı
![Page 11: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/11.jpg)
Tasarım Süreci
Ne? Ne zaman? Ne den sonra? Nasıl yapılır?
![Page 12: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/12.jpg)
İ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
![Page 13: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/13.jpg)
İ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
![Page 14: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/14.jpg)
İhtiyaçlar
Durumun saptanması
İnsanlarla görüşme Video çekimi Kullanılan objelerin incelenmesi Gözlem
Tasarım Süreci>Aşamalar>
![Page 15: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/15.jpg)
Analiz
Görüşmeler elde edilen verilen incelenmesi Ana konunun belirlenmesi
Tasarım Süreci>Aşamalar>
![Page 16: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/16.jpg)
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>
![Page 17: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/17.jpg)
Yineleme ve Prototip Oluşturma
Alfa/Beta sürümü oluşturma Geri dönüt
Tasarım Süreci>Aşamalar>
![Page 18: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/18.jpg)
Uygulama ve Yerleşim
Gerçek sistemin oluşturulması
Tasarım Süreci>Aşamalar>
![Page 19: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/19.jpg)
Kullanıcı/kullanıcılar odaklanma
Kullanıcını tanı
Sistem paydaşları/etkilenenleri (Stakeholders)
Kullanıcı
![Page 20: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/20.jpg)
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
![Page 21: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/21.jpg)
Kültürel araştırma
Türkiye’de çoğu evde yer alır→ İplik kutusu→ Tesisat kutusu
![Page 22: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/22.jpg)
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
![Page 23: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/23.jpg)
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>
![Page 24: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/24.jpg)
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>
![Page 25: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/25.jpg)
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>
![Page 26: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/26.jpg)
Sosyal-teknolojik içe içe geçme/araya girme Dokunabilecekmiş gibi düşünme Karşılıklı etkilenme
Gezinim Tasarımı
![Page 27: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/27.jpg)
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ı
![Page 28: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/28.jpg)
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)
![Page 29: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/29.jpg)
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ıç
![Page 30: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/30.jpg)
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ı>
![Page 31: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/31.jpg)
Yerel Yapı-Ekmek kırıntısı
![Page 32: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/32.jpg)
Yerel Yapı
![Page 33: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/33.jpg)
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
![Page 34: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/34.jpg)
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
![Page 35: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/35.jpg)
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
![Page 36: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/36.jpg)
Stil→ Standart nesnelerin kullanımı
Fonksiyonellik→ Standart görev gerçekleştirme
Gezinim → Uygulamalar arası geçiş
Genişleyen Duru AnlıkGezinim Tasarımı>
![Page 37: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/37.jpg)
Ekran Tasarımı ve Düzenleme
Farklı elementler nasıl bir araya gelecek?
İnsan faktörü (psikolojik) Bilgisayar faktörü (grafiksel)
![Page 38: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/38.jpg)
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>
![Page 39: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/39.jpg)
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>
![Page 40: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/40.jpg)
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 …… … … …
![Page 41: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/41.jpg)
Grupların ve Öğelerin Sınıflanması
Ekranda yer alma sırası
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 …… … … …
![Page 42: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/42.jpg)
Dekorasyon
Gruplara ayırma Yazı tipi sitili Arka plan/ ön plan rengi
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
ABCDEFHIJKLMNOPQRSTUVWXYZ
![Page 43: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/43.jpg)
Hizalama
Sağa / Sola dayama Ortalama / iki yana yaslama Sayılardan virgül esasla yaslama
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
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
![Page 44: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/44.jpg)
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
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
![Page 45: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/45.jpg)
Boş alan
Metinsel → Tipografi→ Kaligrafi
Yerleşim→ Metin→ Grafik
Ekran Tasarımı ve Düzenleme> Düzenleme Araçları>
THE GAPS BETWEEN
![Page 46: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/46.jpg)
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>
![Page 47: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/47.jpg)
Bilgi Girişi
Diyalog kutuları İsteğe bağlı seçim
Ekran Tasarımı ve Düzenleme> Kullanıcı Eylemi ve Kontrol>
![Page 48: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/48.jpg)
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>
![Page 49: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/49.jpg)
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> Kullanıcı Eylemi ve Kontrol>
![Page 50: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/50.jpg)
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>
![Page 51: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/51.jpg)
Bilgiyi Sunma
Metin Sayı Harita Tablo
Teknolojik yoldan Farklı amaçlı bilginin sunulması
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
![Page 52: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/52.jpg)
Estetik ve Fayda
Kullanıcı memnuniyeti Kaliteli ürün
Güzellik faydalı mı?
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
![Page 53: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/53.jpg)
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>
![Page 54: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/54.jpg)
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>
![Page 55: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/55.jpg)
Sıralamalar Gruplamalar Renkler Hizalamalar Dekorasyon Boşluk alan
Ekran Tasarımı ve Düzenleme> Uygun Görünüm>
![Page 56: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/56.jpg)
İlk tasarım Değerlendirme
→ Biçimlendirici (Formative)→ Özetleyici (Summative)
Yineleme ve Prototip Oluşturma
prototip değerlendirmetasarım
Yeniden tasarım
Bitti!Tamam?
![Page 57: Tasarım Süreci Bölüm 5 Etkileşimli Tasarımın Temelleri](https://reader035.fdocument.pub/reader035/viewer/2022062221/568137a0550346895d9f47e9/html5/thumbnails/57.jpg)
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