ETKILESIM TASARIM TEMELLERI

1
ETKILESIM TASARIM TEMELLERI

• Ders Adi BTÖ-411 Insan
  Bilgisayar Etkilesimi
• Ders Sorumlusu Yrd. Doç. Dr. Hakan
  TÜZÜN
• Hazirlayanlar Serap TEKELIOGLU
  Mustafa BAYRAM
• Yeliz
  KUSKAYA Zafer YILMAZ
• Volkan
  ULUÇINAR Adem ÖZGÜR
• 2009 2010 Ögretim Yili Bahar Dönemi
• Hacettepe Üniversitesi, Egitim Fakültesi
• Bilgisayar ve Ögretim Teknolojileri Egitimi
  Bölümü
• 06532 Beytepe/ANKARA

2
Içindekiler

• Tasarim
• Tasarim Süreci
• Senaryolar
• Navigasyon Tasarimi
• Yerel yapi
• Global yapi
• Ekran Tasarimi ve Yerlesimi
• Affordances
• Tekrarlama ve Prototipleme

3
TASARIM
4
Tasarim
5
Tasarim Nedir?

• Tasarlama sözcügü, Ingilizce ve Fransizca da ki
  design kelimesi karsiligi olarak
  kullanilmaktadir.
• Tasarim hedefleri sinirliliklar dahilinden
  gerçeklestirmektir.
• Tasarim bir amaca yönelik düsünsel üretimdir.
• Tasarim, zihinde canlandirilan biçimdir.

6
Tasarim

• Tasarim isinde
• Fakliliklari bulma
• Hayal kurma
• Sorgulama
• Yaratici düsünme
• Elestirel düsünme
• Akil yürütme
• gibi üst düzey zihinsel süreçlerin tasarim
  yapmada önemli bir yeri vardir.

7
"Dogal olarak meydana gelmemis her sey aslinda
bir sekilde tasarlanmistir.."
8
Tasarim Ögeleri

• Hedef
• Tasarimin amaci ne?
• Bilgisayar gelistirmek
• Kim için?
• Görme engelliler için
• Ne istiyorlar?
• Rahat bir sekilde kullana bilecekleri bilgisayar

9
Tasarim Ögeleri

• Sinirliliklar
• Hangi materyali kullanmaliyiz?
• Magneclay( yag bazli madde), Braille alfabesi,
  Ses cihazi..
• Standartlarimiz neler?
• 9 dügme(braille alfabesi) , Hareketli yüzey,2D-3D
  Görüntü
• Süre ve maliyet?
• ??? Yil ???

10
Tasarim Ögeleri

• Ödünler
• Hedefler ya da sinirliliklarin karsilanmasi için
  hangilerinden vazgeçilecek?
• Tasarimi gerçeklestirmek için imkanlar
  neticesinde bazi hedeflerden ödün vermek zorunda
  kalabilirsiniz.

11
Tasarimin Altin Kurali

• Materyallerinizi anlayin

• Insan
• Psikolojik
• Sosyal
• Fiziksel
• Bakis açilari
• Istekleri
• Hatalari

• Bilgisayar
• Kisitliliklari
• Kapasitesi
• Araçlari
• Özelliklerini
• Artilarini

12
Hatasiz Kul Olmaz

• Insanlar hata yapabilirler ancak sistemler bu
  hatalari ve bu hatalarin sonuçlarini azaltici
  yönde tasarlanmalilardir.
• Insanlarin hatalarinin sebepleri ayrintili olarak
  incelenir ve bilinirse buna uygun tasarimlar
  yapilarak bunlarin olusmalari aza indirgenebilir.

13
TASARIM SÜRECI
14
Tasarim Süreci
Ne isteniyor?
Analizler
Tasarim
Gerçeklestir ve harekete geçir
Ön ürün
15
Basamaklar

• Ihtiyaçlar
• Ne var? Ne isteniyor?
• Analizler
• Düzenleme ve anlama
• Tasarim
• Ne yapilacak nasil kararlastirilacak
• Tekrarlama ve Ön Ürünler
• Gerçekten neye ihtiyaç oldugunu bulmak!
• Uygulama ve Harekete Geçirme

16
ancak bunlarin hepsini nasil yapabilirim!!

• Sinirli zaman ? trade-off tasarlayin
• kullanilabilirlik?
• Problemlerin bulunmasi ve çözümü?
• Ne çözecegine karar vermek?
• Muhtesem sistemler kötü tasarlanir
• Iyiye ? tasarima fazla emek harcamak

17
KULLANICI MERKEZI

• Kullanicilarinizi bilin
• Kisilikleri
• Kültürleri

18
Kullanicilarinizi Bilin

• Onlar kim?
• Muhtemelen siz degilsiniz!
• Onlarla konusun
• Onlari izleyin
• Hayal gücünüzü kullanin

19
Kisilik

• Temsil edebilecek bir kullanici kullanin.
• Ahmet ne düsünür?
• Ayrintilar sorundur
• Onu gerçek yapar.

20
Kültürel Arastirma

• Dogrudan inceleme
• Bazen zordur
• evde
• Psikiyatrik sabirlar,
• Arastirma paketleri
• Cevaplama ögeleri
• Duvardan dinlemek için bardak, kamera
• Insanlara kendi dünyalarini açmalari için
  verilenleronlara ne anlamli geliyorsa onu
  kaydederler.

21
SENARYOLAR
22
Senaryolar

• Tasarim için hikayeler
• Digerleri ile etkilesime geç
• Diger modellere geçerligini denetle
• Dinamikleri anla
• Dogrusallik
• Zaman dogrusaldir- hayatimiz dogrusaldir
• Ancak alternatifler göstermez

23
Senaryolar

• Senaryolar Sisteme Dogru Dogrusal Bir Yol
• Avantaj
• Hayat ve zaman dogrusaldir
• Anlamak kolaydir (hikayeler dogaldir)
• Somuttur
• Dezavantaj
• Seçenek yoktur, dallanmalar yoktur, özel
  kosullar yoktur.
• Istemeden yapilan hareketleri kaçirir.
• Öyleyse
• Birden fazla senaryo kullanin
• Birden fazla yöntem kullanin

24
Senaryolar

• Scenario for proposed movie player

25
NAVIGASYON
26
Basamaklar

• Araçlarini belirle
• Butonlar, yazilar, menüler
• Ekran ve Pencereler(Mantiksal gruplama)
• Navigasyon tasarimi uygulamasi
• Dis ortamlar

27
Web siteleri

• Araçlari belirleme
• Elemanlar, taglar, etiketler
• Ekran ve Pencereler
• Benzer menülerin gruplanmasi
• Navigasyon
• Sitenin yapilandirilmasi
• Dis ortamlar
• Web tarayici, dis linkler

28
Fiziksel araçlar

• Araçlari belirleme
• Butonlar, numaralar, renk, isik
• Ekran yerlesimi
• Navigasyon tasarimi
• Aracin modlari
• Ortam
• Gerçek dünya

29
Baslarken düsünün?

• Bu uygulamayi kim kullanacak?
• Nasil düsünebilirler?
• Bununla ne yapacaklar?

30
Yapilanma üzerine düsünün

• Yerel yapi
• Bir sayfanin yapilanmasi üzerine
• Genel yapi
• Sitenin yapisi, sayfalar arasi geçis
• Kapsamli durum
• Diger uygulamalarla iliski

31
Yerel Yapi

• Bir sayfanin yapilanmasi üzerine

32
hedef
baslangiç
33
Dört olgu üzerinde durun

• Nerede oldugunu bilme
• Neler yapabilecegini bilme
• Nereye gidiyor oldugunu bilmek veya neler
  olacagini
• Neler yapmis oldugunu ve nereye gelmis oldugunu
  bilmek

34
(No Transcript)
35
Neredesin? - Ekmek kirintilari
36
Modlar

• Yanlislikla aramalari engellemek için kilitleyin
• Kilidi kaldirmak için - c yes tuslarina
  basin
• Birçok defa yapilir.
• Eger kilit unutlursa
• Cepte yes tusuna basarsa
• Telefon rehberine gider
• Telefon rehberinde c rehberi sil? yes
  Onayla

37
Global yapi

• Sitenin yapisi sayfalar arasi geçis

38
Hiyerarsik
39

• Uygulamanin kisimlari
• Ekranlar ya da ekran gruplari
• Tipik fonksiyonel dagilim

40
Yönlendirme hiyerarsisi

• Derinlik zordur!
• Miller in 7 2 kurami
• Kisa süreli bellek, menü boyutu degil
• En Uygun?
• Her ekranda birçok öge
• Ancak ekran içerisinde yapilandirilmis

41
Ag Diyagramlari
42
Ag Diyagramlari

• Ne neye öncülük eder?
• Ne ne zaman olacak?
• Dallanma ve döngüler içerir?
• Hiyerarsi disinda, daha fazla görev

43
Kapsamli Durum

• Diger uygulamalarla etkilesim

44
Stil konulari

• Platform standartlari, tutarlilik

45
Fonksiyonel konular

• Kes, kopyala, yapistir..

46
Navigasyon konulari

• Uygulamalar arasi geçis
• Gömülü uygulamalar(hava durumu)
• Farkli uygulamalara erisim(E-posta, ikonlar..)

47
Ekran Tasarimi ve Yerlesim
48
Ekran tasarimi ve Yerlesim

• Temel Ilkeler
• Gruplandirma, Yapilandirma, Siralama
• Hizalama
• Beyaz Alanin Kullanimi

49
Gruplama ve yapilandirma

• Mantiksal ? Fiziksel

50
Grup ve Ögelerin Siralanmasi-Süsleme

• Mantiksal ögeleri gruplamak için kutulari
  kullanin.
• Baslik ve önemli yerleri belirtmek için fontlari
  kullanin.

51
Grup ve Ögelerin Siralanmasi-Hizalama - metin

• Yazilarinizi soldan saga dogru yani
• ? sol tarafa hizalayin.

Biraz sikicidir ancak okunur.

• Ayse KULIN, Umut
• Hayat akan bir sudur.
• Alfa Yayinlari
• 2008

• Ayse KULIN, Umut
• Hayat akan bir sudur.
• Alfa Yayinlari
• 2008

Özel efektler için iyidir ama ayirt etmek zordur.
52
Grup ve Ögelerin Siralanmasi-Hizalama - isimler
?
Soyadlarini ayirt etmeyi kolaylastirin.
Özgür, Muhittin Sonses, Saziye Kaygusuz,
Rüknettin Sitkisiyrilmis, Bediha Tehlike, Hayati
?
Muhittin Özgür Saziye Sonses Rüknettin
Kaygusuz Bediha Sitkisiyrilmis Hayati Tehlike
?
Muhittin Özgür Saziye
Sonses Rüknettin Kaygusuz Bediha
Sitkisiyrilmis Hayati Tehlike
53
Grup ve Ögelerin Siralanmasi-Hizalama -
numaralar
532.56179.3256.3171573.94810353.142497.6256

• Sayilardan hangisi en büyük?

54
Grup ve Ögelerin Siralanmasi-Hizalama -
numaralar

• Görsel olarak
• uzun numara büyük numara,
• Ondalik sayilari siralayin ya da sayilari
  hizalayin.

627.865 1.005763 382.583 2502.56
432.935 2.0175 652.87 56.34
55
Grup ve Ögelerin Siralanmasi-Çok sütunlar

• Araliklari ayirmak zordur.

bisküvi 75sekerleme 120çikolata 35meyveli
sakiz 27meyve suyu 85
56
Grup ve Ögelerin Siralanmasi-Çok sütunlar

• Ikili satir renkleri satir.

bisküvi 75sekerleme 120çikolata 35meyveli
sakiz 27meyve suyu 85
57
Grup ve Ögelerin Siralanmasi-Çok sütunlar

• Çizgisel yollari kullanin.

bisküvi 75sekerleme 120çikolata 35meyveli
sakiz 27meyve suyu 85
58
Grup ve Ögelerin Siralanmasi-Çok sütunlar

• Ya da adi hizalama yapin.

bisküvi 75sekerleme 120çikolata
35meyveli sakiz 27meyve suyu 85
59
Bosluk Kullanimi-Dagitmak için bosluk
60
Bosluk Kullanimi-Karmasik yapilar için bosluk
61
Bosluk Kullanimi-Vurgulamak için bosluk
62
Fiziksel kontroller

• Ögelerin gruplanmasi

Buz çözme ayarlari
Yiyecek modu
Pisirme zamani
63
Fiziksel kontroller

• Ögelerin gruplanmasi
• Ögelerin siralanmasi

1- Isitma tipi
2- Sicaklik
1
3- Pisirme zamani
4- Baslat
2
3
4
64
Fiziksel kontroller

• Ögelerin gruplanmasi
• Ögelerin siralanmasi
• Süsleme

Farkli islevler için farkli renkler
Iliskili butonlarin çevresine çizgi
65
Fiziksel kontroller

• Ögelerin gruplanmasi
• Ögelerin siralanmasi
• Süsleme
• Hizalama

Butonlarin içindeki yazinin ortalanmasi
66
Fiziksel kontroller

• Ögelerin gruplanmasi
• Ögelerin siralanmasi
• Süsleme
• Hizalama
• Bos alan

Gruplamaya yardim etmek için araliklar
67
AFFORDANCES TEKRARLAMA ve PROTOTIPLEME
68
Affordances(Saglarlik)

• Bir nesnenin, kendisiyle bir seyler
  yapilabilmesini saglayan vasiflari anlamina
  geliyor.
• Örnegin cami kirabilirsiniz ya da kahve bardagini
  sapindan tutup kaldirabilirsiniz. Elmayi
  isirabilirsiniz ya da tutup atabilirsiniz.
  Sandalyeye oturabilirsiniz yada üzerine çikip
  bozulan ampülü degistirebilirsiniz.
• Affordance da belirleyici olan, nesneyle ne
  yapilabilecegini sadece sezgisel olarak
  anlayabiliyor olmamizdir. (Uyarici,
  bilgilendirici, anlamayi kolaylastiran bir metin
  veya sözcük olmaksizin)

69
Affordances(Saglarlik)

• Bir bakima güdüleme görevi de yapiyor.
• Ne algiliyorsan onu yapma egiliminde oluyorsun.
• ÖrneginYerdeki bir tas, bir fareye, bir kediye
  ve bir insana degisik saglarliklar (affordances)
  sunar. Tas fareye saklanilabilirlik saglarligini
  sunarken, ayni tas insan için firlatilabilirlik
  saglarligi sunar.
• Bir nesne, degisik etmenlere degisik olanaklar
  sunar.

70
Affordances(Saglarlik)
71
(No Transcript)
72
Tekrarlama ve Prototipleme

• Prototip Detaylandirma ve seri üretim asamasina
  geçmeden önce üretilen örnek ürün. (Model)
• Özellikle kompleks ürünler için sarttir.

73
Tekrarlama ve Prototipleme
74
Tekrarlama ve Prototipleme

• Olana kadar Yilmak yok !

75
Tekrarlama ve Prototipleme

• Neden Prototipleme Yapilir?
• Ürünün görsel ve islevsel kontrolleri yapilir.
• Olabilecek tasarim hatalari teshis edilir.
• Birden fazla komponent içeren ürünlerin
  birbirlerine geçme detaylari ve parçalarin uyumu
  kontrol edilebilir.
• Prototipler, tasarim ekibi, imalat ekibi ve
  pazarlama ekibiarasindaki iletisimi ve ortak
  çalisma verimliligini arttirir.
• Prototipin son hali seri üretimin yapilmasi için
  kalip olur.

76
Kaynakça

• Kitap Kaynaklari
• Human-Computer Interaction
• Internet Kaynaklari
• http//www.plastosel.com/ug-objet-prototip.html
• http//end.aytasarim.com/index.php?optioncom_cont
  enttaskviewid49Itemid1
• http//www.zecinteraktif.com/e-destek/sistem-ve-ya
  zilim/yazilim-gelistirme-ve-prototip-235.html
• http//www.zaplat.com/etiket/prototip
• http//tr.wikipedia.org/wiki/Prototip
• http//www.comp.lancs.ac.uk/dixa/teaching/rome200
  3/docs/rome-ch05.pdf