5. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 5
Tasarımın Altın Kuralı
Tasarım Nedir? >
Materyallerinizi anlayın.
İnsanlar
(psikolojik, sosyal bakış açıları, hatalar)
Bilgisayarlar
(kısıtlılıklar, kapasiteler, araçlar)
6. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 6
Hatasız Kul Olmaz
Tasarım Nedir? >
Hata yapmak, insanın doğasında vardır. Ancak sistemler bu hataları
ve hataların sonuçlarını azaltıcı yönde tasarlanmalılardır.
7. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 7
Ana Mesaj-Kullanıcı
Tasarım Nedir? >
• Kullanıcıyı temel al
• Kullanıcıyı merkezde tut
• En sonda kullanıcıyı hatırla
8. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 8
9. / 74
Tasarım Süreci
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 9
Ne isteniyor?
Analiz
Uygulama ve
harekete geçirme
Prototipleme
Görüşmeler
Ne var?
Ne isteniyor?
Yönergeler,
İlkeler
Diyalog
gösterimleri
Tam
Belirleme
Dokümantasyon,
Yardım
Bulguların
değerlendirilmesi
Senaryolar
İçerik analizleri
Tasarım
10. / 74
Tasarım Süreci
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 10
Ne isteniyor?
Analiz
Uygulama ve
harekete geçirme
Prototipleme
Görüşmeler
Ne var?
Ne isteniyor?
Yönergeler,
İlkeler
Diyalog
gösterimleri
Tam
belirleme
Dokümantasyon,
Yardım
Bulguların
değerlendirilmesi
Senaryolar,
İçerik analizleri
Tasarım
13. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 13
14. / 74
Kullanıcı Odağı
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 14
Tüm etkileşim tasarımlarının başlangıcı, hedeflenen kullanıcı ya da
kullanıcılardır.
Kullanıcılarınızı tanıyın.
15. / 74
Peki, kullanıcılarımızı nasıl tanıyabiliriz?
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 15
Kullanıcı Odağı
Onlar kim?
Kullanıcı senin gibi değil!
Onlarla konuş
Onları gözlemle
Hayal gücünü kullan
17. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 17
18. / 74
Senaryolar
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 18
• Etkileşimli tasarımlar için zengin hikayeler
• Tasarımlarımın hem en basit hem de en esnek ve en güçlü sunum
hali
Brian would like to see the new film “Moments of Significance” and wants to invite
Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see
if she would like it and so connects to one of the movie sharing networks. He uses his
work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows
he will be getting an illegal copy of the film, but decides it is OK as he is intending to go
to the cinema to watch it. After it downloads to his machine he takes out his new
personal movie player. He presses the ‘menu’ button and on the small LCD screen he
scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On
his computer the movie download program now has an icon showing that it has
recognised a compatible device and he drags the icon of the film over the icon for the
player. On the player the LCD screen says “downloading now”, a percent done
indicator and small whirling icon.
19. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 19
Senaryoların resimlerle ve çizimlerle zenginleştirilmiş hali.
Ör. Film hikaye çizgisi
Storyboard
Senaryo >
20. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 20
Mobil X
Senaryo > Storyboard >
Ali, bir lise öğrencisidir. Sınıfa girerken Ali ve
arkadaşları Mobil X cihazını sisteme okutur ve böylece
sınıf yoklaması alınmış olur.
Tahtada yazılan her şey Ali’nin Mobil X cihazında da
gözükür ve istediği alana yakınlaşarak rahatlıkla içeriği
görebilir.
21. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 21
Ali’ye öğretmen ‘Cümledeki yanlış kelimeleri çiz.’
dediği zaman Mobil X cihazıyla o kelimeleri
işaretler ve sınıf ekranında gözükür.
Mobil X
Senaryo > Storyboard >
22. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 22
Mobil X
Senaryo > Storyboard >
Öğleden sonraki ders ise öğretmenin
öğrencilere çoktan seçmeli sorular sormasıyla
başlar. Ali ve arkadaşları soruları görür ve
cevaplarını Mobil X cihazıyla işaretler. Öğretmen
her soru sonunda soruyu kaç kişinin doğru, kaç
kişinin yanlış yaptığını bir grafikle görür.
23. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 23
Mobil X
Senaryo > Storyboard >
Ders sonunda öğretmen pop-quiz yapar. Tüm
öğrenciler Mobil X cihazlarıyla soruları cevaplarlar.
Ali, arkadaşından kopya çekerken öğretmenine
yakalanır. Öğretmen, Ali’nin cihazını bloke eder ve Ali
sınıftan çıkar.
24. / 74
Senaryolar
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 24
Gördüğümüz gibi senaryolar, tasarım hakkında detaylıca düşünmemizi
sağlarlar. Bunun haricinde senaryolar,
• Diğerleriyle iletişim kurmak için,
• Diğer modellerle uygunluğuna bakmak için ve
• Dinamikleri açıklamak için kullanılır.
25. / 74
Senaryolar
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 25
Senaryolar doğrusaldırlar. Bunun olumlu ve olumsuz yanları vardır:
Zaman doğrusaldır
Hayat ve zaman doğrusaldır. Bu nedenle doğrusal senaryoları
anlamak daha kolaydır.
Fakat alternatif yoktur
Gerçek etkileşimlerde -insanla ya da sistemle- seçenekler vardır.
Senaryolar bu alternatifleri gösteremez.
27. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 27
28. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 28
Navigasyon Tasarımı
Bilgisayar sitemini kullanırken çeşitli şekillerle onunla etkileşime gireriz.
Etkileşim Seviyeleri:
• Widgetlar (butonlar, ikonlar, kaydırma çubuğu)
• Ekran ya da pencereler
• Uygulama içerisindeki navigasyon
• Ortam (işletim sistemi)
29. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 29
Web Siteleri
Widgetlar Form elemanları, etiketler ve bağlantılar
Ekran tasarımı Sayfa Tasarımı
Navigasyon tasarımı Site yapısı
Ortam Browser, dış bağlantılar
Etkileşim Seviyeleri
Navigasyon Tasarımı >
30. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 30
Fiziksel Cihazlar
Widgetlar Düğmeler, ışıklar, göstergeler
Ekran tasarımı Fiziksel Düzen
Navigasyon tasarımı Aracın Temel modları
Ortam Gerçek Dünya
Etkileşim Seviyeleri
Navigasyon Tasarımı >
31. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 31
Bir uygulamanın yapısı hakkında düşünelim.
Navigasyon Tasarımı
Aşama 1: Gerçek kullanımı hakkında düşünme
• Bu uygulamayı kim kullanacak?
• Bu uygulama hakkında nasıl düşünecekler?
• Bu uygulamayı niçin kullanacaklar?
Aşama 2: Yapısı hakkında düşünme
• Yerel yapı
Bir ekranın ya da sayfanın dışarısından bakma
• Global yapı
Site yapısı, ekranlar arasındaki geçiş
32. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 32
Yerel Yapı
Navigasyon Tasarımı >
Hedefi Arama Davranışı
Başlangıç
Hedef
33. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 33
Navigasyon Tasarımı >
Başlangıç
Hedef
Yerel Yapı >
Hedefi Arama Davranışı
Ben
nerdeyim?
34. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 34
Navigasyon Tasarımı > Yerel Yapı >
4 Kural
Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi
aramalıyız:
1. Nerde olduğunu bilme
2. Ne yapabileceğini bilme
İlk Sayfa
Bread crumbs
35. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 35
Navigasyon Tasarımı > Yerel Yapı >
4 Kural
Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi
bilmeliyiz:
3. Ne olacağını bilme
Modlar: Komutların işlevselliğini değiştiren farklı
ortamlara denir.
4. Ne yaptığını bilme
36. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 36
Global Yapı
Navigasyon Tasarımı >
• Bir uygulamanın genel yapısı
• Farklı ekranların, sayfaların ve araç durumların birbirleriyle bağlantı
yolu
• Bir global yapıyı oluşturmak için 2 yol uygulayabiliriz:
o Hiyerarşik organizasyon
o Diyalog (ağ diyagramı)
37. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 37
Hiyerarşik Organizasyon
Navigasyon Tasarımı >
• Hiyerarşik organizasyon; bağlantılar, ekranlar, sayfalar ve durumlar
arasında mantıksal bir gruplama yapılmasını içerir.
• Mantıksal gruplama genellikle işlev sınırlarına göre yapılır.
• Ör. Bir uygulama yapısı veya bir web sitesinin yapısı
Global Yapı
38. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 38
Hiyerarşik Organizasyon
Navigasyon Tasarımı > Global Yapı
Powerpoint
Giriş
Pano
Slaytlar
Yazı Tipi
Paragraf
Çizim
Ekle
Tablo
Resimler
Çizimler
Bağlantılar
Metin
Tasarım
Sayfa Yapısı
Temalar
Arka Plan
Geçişler
Önizleme
Bu slayda
Geçiş
Zamanlama
Animasyonlar
Önizleme
Animasyon
Gelişmiş
animasyon
Zamanlama
39. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 39
Hiyerarşik Organizasyon
Navigasyon Tasarımı > Global Yapı
Hacettepe
Üniversitesi
Hakkında
Tanıtım
Tarihçe
Logomuz ve
Öyküsü
Misyon, Vizyon
ve Değerler
Akademik
Fakülteler
Enstitüler
Yüksek okulları
Araştırma
Araştırma
Merkezleri
Hacettepe
Teknokent
Teknoloji
Transfer Merkezi
Öğrenciler
Kanun ve
Yönetmelikler
Öğrenci İşleri
Eğitim
Komisyonu
Uluslararası
Öğrenci Ofisi
İdari
Yönetim
Birimleri
İç Denetim
Bilgi İşlem
40. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 40
Hiyerarşik Organizasyon
Navigasyon Tasarımı >
• Karışık hiyerarşiler yerine daha genel kategoriler kullanın.
• Sınıflama, kullanıcının amacına hizmet etmelidir.
Global Yapı
Miller’in 7+-2 sihirli sayısı sadece
kısa süreli bellek içindir, görsel
arama için değil!
41. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 41
Diyalog
Navigasyon Tasarımı >
• Hiyerarşinin olmadığı komut ve ekran akışları da vardır.
• İnsan-bilgisayar etkileşiminde, kullanıcı ve sitem arasındaki
hiyerarşinin olmadığı etkileşime diyalog denir.
• Evlilik örneği
Global Yapı
…’la
evlenmeyi
kabul ediyor
musun?
Evet …’la
evlenmeyi
kabul ediyor
musun?
Evet
42. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 42
Navigasyon Tasarımı > Global Yapı
…’la
evlenmeyi
kabul ediyor
musun?
Evet …’la
evlenmeyi
kabul ediyor
musun?
Evet
İnsan-bilgisayar etkileşimindeki diyaloglar da aynıdır. Genel kalıplar
vardır ama ayrıntılar her çalışmada farklılık gösterir.
Diyalog
43. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 43
Diyalog
Navigasyon Tasarımı >
• Senaryolar, sistemdeki sadece bir yolu gösterir.
• Eğer tüm sistemi tanımlamak için, bir sistemdeki tüm yolları ve
döngüleri göz önüne almalıyız.
• Bunu yapmanın en basit yolu ise ağ diyagramları kullanmaktır.
Böylece;
o Neyin neye sebep olacağını,
o Neyin ne zaman olacağını ve
o Dalları ve döngüleri gösterebiliriz.
Global Yapı
44. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 44
Ağ diyagramları
Navigasyon Tasarımı > Global Yapı
Ana ekran
Kullanıcı
sil
Onayla
Kullanıcı
ekle
> Diyalog >
Sistemdeki tüm yolları gösterir.
45. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 45
Wider Still
Navigasyon Tasarımı >
• ‘Hiç kimse bir ada değildir. Bütünün bir parçasıdır.’ (Donne, 1624)
• Tasarımlarımız diğer araçlarla ve uygulamalarla uyumlu olmalıdır.
Bunun farklı çıkarımları vardır:
o Stil konuları
o Fonksiyonel konular
o Navigasyon konuları
47. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 47
48. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 48
Sor
Kullanıcı ne yapıyor?
Ekran Tasarımı ve Yerleşim
Düşün
Hangi bilgi gerekli? Kullanıcının ne gibi karşılaştırmalar yapması
gerekebilir? Bileşenlere hangi sırada ihtiyaç duyuluyor?
Tasarla
Gerekli etkileşimlerin düzeni oluşturmasını sağla
Ekran tasarımındaki ilkeler:
49. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 49
Yerleşim için Araçlar
Ekran Tasarımı ve Yerleşim >
1. Gruplama ve Yapılanma
2. Grupların ve ögelerin sıralanması
3. Dekorasyon
4. Hizalama
5. Boş alan
50. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 50
Çevrimiçi Kitap Satın Alma Formu
Ekran Tasarımı ve Yerleşim >
Adres
Posta Kodu
Ülke
Ad
Soyad
E-posta adresi
Telefon
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Satın al
Yerleşim için Araçlar >
51. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 51
Gruplanma ve Yapılanma
Ekran Tasarımı ve Yerleşim >
Adres
Posta Kodu
Ülke
Ad
Soyad
E-posta adresi
Telefon
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Yerleşim için Araçlar >
52. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 52
Grupların ve Ögelerin Sıralanması
Ekran Tasarımı ve Yerleşim >
Ad
Soyad
E-posta adresi
Telefon
Adres
Posta Kodu
Ülke
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Yerleşim için Araçlar >
53. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 53
Dekorasyon
Ekran Tasarımı ve Yerleşim >
Ad
Soyad
E-posta adresi
Telefon
Kişisel Bilgiler
Ulaşım Bilgileri
Adres
Posta Kodu
Ülke
Ödeme Bilgileri
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Yerleşim için Araçlar >
54. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 54
Hizalama
Ekran Tasarımı ve Yerleşim > Yerleşim için Araçlar >
Ad
Soyad
E-posta adresi
Telefon
Kişisel Bilgiler
Adres
Posta Kodu
Ülke
Adres Bilgileri
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Kart Bilgileri
55. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 55
Boş Alan
Ekran Tasarımı ve Yerleşim > Yerleşim için Araçlar >
Ad
Soyad
E-posta adresi
Telefon
Kişisel Bilgiler
Adres
Posta Kodu
Ülke
Adres Bilgileri
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Kart Bilgileri
56. / 74
Ad
Soyad
E-posta adresi
Telefon
Kişisel Bilgiler
Adres
Posta Kodu
Ülke
Adres Bilgileri
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Kart Bilgileri
Satın al
Adres
Posta Kodu
Ülke
Ad
Soyad
E-posta adresi
Telefon
Kart Tipi Visa Mastercard
Kart Numarası
Güvenlik Kodu
Satın al
57. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 57
Kullanıcı Hareketi ve Kontrol
Ekran Tasarımı ve Yerleşim >
1. Bilgi Girişi
2. Ne yapacağını bilme
3. Sağlarlık
58. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 58
Bilgi Girişi
Ekran Tasarımı ve Yerleşim >
Form tabanlı ara yüzler ve diyalog kutuları, hem kullanıcıya bilgi
sunulan hem de kullanıcının bilgi girdiği yerlerdir.
Yerleşim araçları (hizalama, boş alan vb.) bilgi girişi alanlarında da
uygulanır.
Kullanıcı Hareketi ve Kontrol >
Ad
Soyad
E-posta adresi
Telefon
Kişisel Bilgiler
59. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 59
Ne Yapacağını Bilme
Ekran Tasarımı ve Yerleşim >
• Hangi ögelerin aktif olduğunu bilmemek ne olacağı konusunda
belirsizlik yaratır.
• Herkes aynı işlevler için benzer butonlar ve menüler tasarlayabilir.
Fakat, bu yeterli değildir.
• Menülerdeki ikonlar ve etiketler açık olmalıdır.
o Kaydet, sil, yazdır gibi komutlar için standartlardan
faydalanabiliriz.
o Sisteme özel hareketler için, daha genel ilkelere ihtiyacımız
vardır. Ör. Kalın yazma
Kullanıcı Hareketi ve Kontrol >
60. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 60
Sağlarlık (Affordance)
Ekran Tasarımı ve Yerleşim >
• Bir nesnenin şekli ve özellikleri onunla ne yapabileceğimizi önerir.
• Sağlarlıklar içsel değildir, tecrübeye ve kültüre bağlıdır.
Kullanıcı Hareketi ve Kontrol >
61. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 61
Uygun Görünüm
Ekran Tasarımı ve Yerleşim >
1. Bilgiyi sunma
2. Estetik ve fayda
3. Karışım oluşturma: Renk ve 3B
4. Yerellik ve Evrensellik
62. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 62
Bilgiyi Sunma
Ekran Tasarımı ve Yerleşim >
• Sayılar, yazılar, haritalar, tablolar, grafikler, sanal gerçeklikler
• Bilgiyi sunuşumuzun amacımızla örtüşmesi gerekir.
• Etkileşimli sistemlerde bilgiyi sunmak kolaydır.
Uygun Görünüm >
63. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 63
Estetik ve Fayda
Ekran Tasarımı ve Yerleşim >
• Güzel gözüken bir arayüz, iyi bir arayüz olduğu anlamına gelmez.
• Estetik ve fayda bazen birbirine karşıt olabilirler.
• Okunurluğu artırmak için arkaplan düşük zıtlıkta olmalıdır.
• Estetik kavramların dikkatli uygulanışı anlaşırlılığı da artırır.
Uygun Görünüm >
64. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 64
Karışım Oluşturma: Renk ve 3B
Ekran Tasarımı ve Yerleşim >
• Birçok arayüzün en kötü özelliklerinden biri aşırı renk kullanımıdır.
• Aşırı renk kullanımı dikkat dağıtıcı olabilir.
• Renk körü bireyler unutulmamalıdır.
• Renkler tutumlu kullanılmalıdır.
• 3 boyutlu yazılar ve pasta grafikleri okumayı zorlaştırır.
Uygun Görünüm >
65. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 65
Yerellik ve Evrensellik
Ekran Tasarımı ve Yerleşim >
• Bir yazılımı farklı diller ve kültürler için uygun yapma aşamasına
denir.
• Dili değiştirme evrenselliğin sadece en basit bölümüdür.
• Hizalama ve yerleşim konusunda da tekrar düzenleme yapmak
gerekir.
• Birçok ikon ve resme yüklenen anlam kültürler arasında farklılık
gösterir.
Uygun Görünüm >
66. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 66
Türkçe Vikipedi
Ekran Tasarımı ve Yerleşim > Uygun Görünüm > Yerellik ve Evrensellik >
67. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 67
Arapça Vikipedi
Ekran Tasarımı ve Yerleşim > Uygun Görünüm > Yerellik ve Evrensellik >
69. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 69
70. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 70
Tekrarlama ve Prototipleme
prototip değerlendirmetasarım
Yeniden tasarım
Bitti!
Tamam?
71. / 749.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 71
Tekrarlama ve Prototipleme
A B
1. Neyin yanlış olduğunu ve onu nasıl iyileştireceğimizi anlamak
2. İyi bir başlangıç noktası
72. / 74
• Tasarım Nedir?
• Tasarım Süreci
• Kullanıcı Odağı
• Senaryolar
• Navigasyon Tasarımı
• Ekran Tasarımı ve Yerleşim
• Tekrarlama ve Prototipleme
Etkileşimli Tasarımın Temelleri
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 72
74. / 74
Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-computer
interaction. England: Prentice Hall.
Haeffele, D. (2010). Hci work storyboard. Retrieved from
http://www.drewhaeffele.com/kilin-time/single-gallery/7011802
Norman, D.A. (1990). The design of everyday things. New York:
Doubleday.
Kaynaklar
9.9.2015 BTÖ711: İnsan-Bilgisayar Etkileşimi 74
Notes de l'éditeur
Bu sunumda etkileşimli tasarım temellerini işleyeceğiz.
Merdivenin bir kısmı engelliler için tasarlanmış. Kalan kısmında ise engelliler unutulmuş. Bu haftaki sunumda ise böyle tasarımlar yapmak yerine insanların ve bilgisayarların özellikleri göz önüne alınarak nasıl iyi bir etkileşimli tasarım yapabileceğimizi öğreneceğiz.
Geçen hafta etkileşim ve paradigmaları işlemiştik. Etkileşimli tasarım temelleri konusunun altında ise … başlıklarını göreceğiz.
İlk olarak «tasarım nedir?» ile başlayalım. Bu tanıma baktığımızda tasarımı oluşturan bileşenlerden biri hedeflerdir. Hedeflerde tasarımımızın amacı ne, kimin için tasarlıyoruz, niçin onlar onu istiyor gibi sorulara yanıt ararız.
Tanıma baktığımda 2.bileşen olarak sınırlılıkları görüyorum. Sınırlılıklarda , tasarımımda ne gibi materyaller kullanacağım, maliyeti ne kadar, onu geliştimek için ne kadar zaman gerekir, sağlık ve güvenlikle ilgili sorunlar olcak mı gibi sorulara yanıt arıyorum.
Tabi ki, sınırlılıklar içierisinde daima TÜM hedeflerimizi gerçekleştiremeyiz. Bazı ödünler vermemiz gerekiyor. Diğer bir deyişle, hangi hedeflerden ve sınırlamalardan vazgeçeceğimizi belirliyoruz ki, diğer hedeflere ulaşabilelim.
Hepimizin tasarım öncesinde sahip olduğu materyaller aynıdır. Fakat, süreç sonunda farklı ürünler ortaya çıkar. Bunun nedeni ise üretim öncesinde sahip olduğumuz materyalleri farklı algılamamızdır. Bu durum bizi tasarımın altın kuralına getirir. Altın kuralımız: Materyallerinizi anlayın.
İnsan-bilgisayar etkileşiminde iki materyal vardır: 1.insan, 2.bilgisayarlardır.
Tasarımcılar olarak bazı hatalar yapabiliriz. Çünkü hata yapmak, insanın doğasında vardır. Önemli olan, tasarım aşamasında diğerlerin nerede, nasıl hatalar yapabileceğini anlamalı ve ara yüzlerimizi ona göre şekillendirmeliyiz.
İnsan-bilgisayar etkileşiminde birçok metotların başarısı, tasarımcının kullanıcıyı ne kadar odak noktasına aldığına bağlıdır.
Bu yüzden etkileşimli tasarımda merkez noktamızı kullanıcıyı temel alma, kullanıcıyı merkezde tutma ve en sonda kullanıcıyı hatırla oluşturur.
Tasarım sürecinin bu şekilde gösterebiliriz. Gördüğünüz gibi tasarım süreci 4 aşama ve bir döngüden oluşmaktadır. Şimdi her bir aşamayı açıklayalım.
İlk aşama, Gereksinimler yani ne isteniyor onu belirlemektir. Gereksinimleri bulmak için konumuzla ilgili şuan neler oluyor, neler yapılıyor incelememiz gerekir. İnsan-bilgisayar etkileşiminde bunu için bazı teknikler vardır. İnsanlarla görüşme, onları videoya çekme yada direk gözlem yapmak gibi.
Analiz aşamasında, gözlem ve görüşmelerden elde ettiğimiz sonuçları düzenleriz. Böylece tasarımın sonraki aşamalarıyla daha rahat iletişim kurabilir ve tasarımımızın ana noktalarını belirleyebiliriz.
Tasarım aşamasında, artık ne istediğimizden onu nasıl yapacağımıza geçiyoruz. Bunun için çeşitli kurallar ve ilkeler var. Bunları 7.bölümde göreceğiz. 10. bölümde ise nasıl farklı türde kullanıcılar için tasarım yapacağımızı öğreneceğiz. Bugün ise birkaç navigasyon ve yerleşim tasarımından bahsedeceğiz.
Tekrarlama ve prototip oluşturma: İnsanlar kompleks varlıklardır. Tasarımlarımızın ilk denemede doğru sonuç vermesini bekleyemeyiz. Bu nedenle sistemimizi değerlendirip ne düzeyde çalışıyor ve ne gibi gelişmeler yapılabiliriz bunu belirlemeliyiz. İlk önce kağıt üzerinde tasarımlar yapıp, sonrasında sistemlerin erken versiyonlarını üreterek prototipler oluştururuz . Prototipleri kullanıcılarla denedikten sonra bulgularımızı değerlendiririz. Tekrardan analiz, tasarım ve prototipleme aşamalarından geçeriz.
Sonunda tasarımımızdan memnun olduğumuz zaman artık onu üretmeye başlarız. Bu aşama kod yazma, dokümantasyon yazma gibi işlemler içerir. Kullanıcıya vereceğimiz gerçek sistemi oluşturana kadar bu aşama devam eder.
Bir an diyebilirsiniz ki «Bu kadar şeyi nasıl yapabilirim» Cevabımız elbette hayır. Çünkü, zamanımız kısıtlıdır. Ya tasarım sürecinin zamanından ya da ürünün kalitesinden ödün veririz. Bu demek oluyor ki, bir tasarım mükemmel olmasa da onu tasarımımızın son hali olarak kabul etmek zorunda kalabiliriz.
Bunların yanında birde kullanılabilirlik sorunlarıyla karşılaşırız. Burda önemli olan, kullanılabilirlik sorunları bulmak değil, hangilerinin düzeltmeye değer olduğunu belirlemektir.
Ne yazıyor dairenin içinde? Sanırım, şimdi dikkatiniz ekranda daha iyi toplandı.
Daha önce de söylediğimiz gibi, etkileşimli tasarımların başlangıcı kullanıcıları hedeflemelidir. Bu durum sıklıkla, kullanıcılarınızı tanıyın diye ifade edilir.
Peki, kullanıcılarımızı nasıl tanıyabiliriz?
İlk olarak, onlar kim? Sorusunu sormalıyız. Gençler mi, yaşlılar mı, deneyimli bilgisayar kullanıcıları mı, yoksa hepsi mi?
Kullanıcılar senin gibi değil: Tasarımlarımızda kendimizi değil kullanıcılarının ilgi ve yeteneklerini göz önüne almalıyız.
Onlarla konuşun: Görüşmelerle, tartışmalarla yada tüm tasarım sürecine kullanıcıları dahil ederek kullanıcılarımızı daha iyi tanıyabiliriz.
Onları gözlemleyin: İnsanların söyledikleri büyükbir önem taşısa da, onları gözlemleyerek daha zengin bilgi ediniriz. Bir günlerini nasıl harcadıklarına gözlemleyerek, günlük tutmalarını isteyerek kullanıcılarımızı gözlemleyebiliriz. Gözlemleriniz bittikten sonra onları kullanıcılarla tartışın. Böylece ne yaptıklarına ek olarak niye yaptıklarını da öğrenmiş oluruz.
Son olarak ise hayal gücünüzü kullanın. Kullanıcıyı her zaman tasarım sürecine katmak mümkün olmayabilir. Hedef grubumuzu temsil eden hayali bir karakter oluşturulabilir. Örneğin; tasarım sürecinde, hayali karakterimiz Ali bu duruma karşı nasıl davranırdı diye düşünebiliriz.
Senaryoları etkileşimli tasarımlar için zengin hikayeler olarak tanımlayabiliriz. Bunun yanında senaryolara, tasarımların hem en basit hem de en esnek ve en güçlü sunum hali diyebiliriz.
Bu metin ise kitabımızda yer alan bir film oynatıcısının senaryosu.
Storyboard ise senaryoların resimlerle ve çizimlerle zenginleştirilmiş halidir.
Film hikaye çizgelerinde kullanılan tekniklere benzer teknikler kullanılır.
Şimdi ise hayali bir araç olan Mobil X’in storyboardını göstermek istiyorum.
Gördüğümüz gibi senaryolar, tasarım hakkında detaylıca düşünmemizi ve olası problemleri önceden fark etmemizi sağlarlar. Bunun haricinde senaryolar,
Diğerleriyle iletişim kurmak için kullanılabilir. Çünkü soyut fikirleri kullanıcılarla tartışmak, yanlış anlamalara sebep olabilir. Somut örnekleri paylaşmak daha kolaydır.
Diğer modellerle uygunluğuna bakmak için de kullanılabilir. Burada senaryoları diğer daha resmi modellerle karşılaştırırız.
Senaryolar dinamikleri açıklamak için de kullanılabilir. Ekran görüntüler ve resimler sistemin nasıl gözükeceğine dair bir duygu verir.
Senaryoların bir diğer özelliği ise doğrusal olmalarıdır. Bunun olumlu ve olumsuz yanları vardır.
Olumlu yanı hayatımız ve zamanımızda doğrusaldır. Bu yüzden senaryoları anlamak kolaydır.
Olumsuz yanı ise senaryoların alternatifler sunmamasıdır. Çünkü gerçek etkileşimlerde seçenekler vardır.
Widgetları 3.bölümde görmüştük. Ekran tasarımını bir sonraki başlıkta göreceğiz. Şimdi ise navigasyon tasarımına bakacağız.
Navigasyon tasarımıyla nasıl bir sistem içerisindeki ana ekranlar birbirleriyle iletişim kuruyorlar bunu kastediyoruz.
Başlamadan önce bir uygulamanın yapısı hakkında düşünelim:
1.Aşama gerçek kullanımı hakkında düşünmektir.
2.Aşama yapısı hakkında düşünme. Navigasyon tasarımı için 2 yapıdan bahsedeceğiz. Yerel yapı; Bir ekranın ya da sayfanın dışarısından bakmaktır. Global yapı; Site yapısı, ekranlar arasındaki geçiştir.
İlk önce yerel yapıya bakalım.
Birçok etkileşim hedef-arama davranışı içerir. Ne yapmak istediğimizi ve sistemin nasıl çalıştığını biliyorsak istediğimiz yere kısa yoldan gideriz. Eğer bilmiyorsak dolambaçlı bir yoldan gideriz. Animasyonda gözüktüğü gibi
Burada önemli olan en etkin yoldan gitmek değil, etkileşimin her noktasında ben nerdeyim sorusuna cevap alabilmektir. Bunun için, herbir ekranın hedefe yakınlaşıp yakınlaşmadığımız konusunda bize yeterince bilgi vermesi gerekir. 7. bölümde bununla ilgili tasarım konularına bakacağız.
Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi aramalıyız
1.Si Nerde olduğunu bilme
Etkileşimli sistemde bir ekran ya da web sayfası, bizim nerde olduğumuzu göstermesi gerekir. Bazı siteler ekranın başında başlıkların yolunu gösterir bizde de olduğu gibi. Ya da dropboxa bir dosya yüklerken bize kaç saniye kaldığını göstermesi gibi.
2.Si ise ne yapabileceğini bilmedir. Bir diğer deyişle, Bir şey yapmak ya da bir yere gitmek için neyin tıklanabilir olduğunu bilmektir. Örneğin; web sayfalarında altı çizili kelimeler onun tıklanabilir olduğunu gösterir.
3.Sü ise bir butona tıkladığın zaman ne olacağını bilmedir. Tabiki, butona tıkladığın zaman ne olacağını görebilirsin. Eğer bir web sayfası kullanıyorsak browserdan geri butonuna tıklayarak eski sayfaya kolayca geri dönebiliriz. Fakat bir uygulamada ne olacağını görmek istersek, geri dönülmez bir etki yaratabilir. Bunu önlemek için ne yapabiliriz:
Butonlarda sadece ikonlar kullanmak yerine ikon ve etiketlerini beraber kullanmalıyız.
Aynı buton farklı ortamlarda farklı anlamlar geliyorsa buna dikkat etmeliyiz. Biz buna mod diyorduk. Modları mümkün olduğunca az kullanmalıyız.
4.Kural ise ne yaptığını bilmedir.
Ne yaptığını bilmek, navigasyonu anladığını hissettirir. Sistemde nerede olduğunu, hedefe nasıl ulaşacağını bilmeyen birey kaybolma hissi yaşayacaktır.
Bundan dolayı, birçok web tarayıcı tarih sistemi önerir ve geri butonu tıklayarak kullanıcılar ziyaret edilmiş sitelerin bir listesini görebilir.
Yerel yapıyı bitirdik. Şimdi ise navigasyon tasarımında global yapıya bakalım.
Hiyerarşik organizayon yaparken de kaçınmamız gereken şeyler vardır.
-Karışık hiyerarşilerin navigasyonu zor olacağından Karışık hiyerarşiler yerine daha genel kategoriler kullanın
Birçok kaynak, menude seçenek sayısının 7 civarında olmasını söyler ama Miller’in 7+-2 sihirli sayısı sadece kısa süreli bellek içindir, görsel arama için değil!
Aslında bu sayı 60 civarı da olabilir eğer öğeler gözün rahatça bulabileceği şekilde yerleşmişse
Burda önemli olan şey sınıflamanın doğallığıdır yani kullanıcının amacına ne kadar hizmet ettiğidir. Eğer bir şehir hakkında bilgiye sahip olmak istiyorsam, bir seçenek alfabetik listeye bakmak benim için daha uygun olacaktır. Diğer bir seçenekte ise bölgelere göre listelenmiş şehirlere belki benim için daha uygun olacaktır.
Global yapıda hiyerarşik organizasyonu bitirdik. Şimdi ise sıra diyalogda.
Evlilik anında geçen diyalogu düşünelim. Düğün esnasında belediye başkanın sorduğu sorular bellidir. Sadece isimler için boşluklar vardır. Her düğünde bu sözler aynıdır fakat sözler farklı adlarla başlar.
İnsan-bilgisayar etkileşiminde de diyaloglar aynıdır. Pencereler arasındaki geçişlerin belli bir kalıbı vardır. Fakat ayrıntılar her zaman değişir.
Senaryolar, sitemdeki sadece bir yolu gösterir. Tüm sistemi tanımlamak için sistemdeki tüm yolları ve döngüleri göz önüne almalıyız. Bunun farklı yolları 16.bölümde anlatılmaktadır. En basit yol ise birbirine bağlı ekranları oklarla gösteren ağ diyagramı kullanmaktır. Böylece;
Neyin neye sebep olacağını,
Neyin ne zaman olacağını ve
Dalları ve döngüleri gösterebiliriz.
Hiyerarşik gösterimde olduğumuzdan daha görev eğilimli oluruz.
Bu diyagram ise mesaj sisteminden ekleme ve silme ekranlarını gösterir. Ana ekrandan ya kullanıcı sil ya da kullanıcı ekle ekranlarına gideriz. Bunun haricinde, kullanıcı ekle ekranından sonra daima ana ekrana geri döneriz. Fakat kullanıcı sil ekranından sonra bir onay gerektirir. Bunun gibi ağ diyagramlarıyla ekran tasarımı hakkında detaylı bilgi alırız.
Navigasyon tasarımın altında bir de wider still adlı bir başlığımız var.
Hiç kimse bir ada değildir. Bütünün bir parçasıdır. Bu sözden hareketle bizde diyebiliriz ki, tasarımlarımız bir ada değildir. Bütünün bir parçasıdır.’
Stil konuları: Uygulamalar arasındaki tutarlılığı sağlamak için platform standartlarına uyumluluk gösteririz. Örneğin ileri ve geri, oyna ve duraklat butonları gibi.
Fonksiyonel konular: Her uygulamada; dosyalarla etkileşime girmeye, standart formatları okumaya ve kes/yapıştır gibi işlemleri yapabilmeye ihtiyacımız vardır.
Navigasyon konuları: Uygulamalar arasında bağlantılara gereksinim duyabiliriz. Örneğin; bir uygulamadan diğerine veri gömmemize izin verilmelidir, ya da, bir mail sisteminde ek dosyaya tıkladığımızda ek uygulamanın başlatılması gibi.
Şu ana kadar etkileşimli uygulamaları oluşturan farklı elemanlardan bahsettik, fakat onları nasıl bir araya koyacağımızdan söz etmedik. Ekran tasarımındaki ilkeler, etkileşimli tasarım alanındaki ilkelerle benzer yapıdadır. Bu ilkeler şöyledir:
Kullanıcının bir araçla etkileşime girmesini kolaylaştıran görsel araçlarımız vardır.
Burda gördüğünüz gibi, kötü tasarlanmış bir çevrimiçi kitap satın alma formu var. Şimdi 3lü gruplar olup size vereceğim kağıtlarla ve renkli kalemlerle bu formu daha düzgün hale getirmeye çalışacağız, az önce söylediğim maddeleri göz önüne alarak. Bunu için 3 dakikamız var.
http://e.ggtimer.com/3%20minutes
http://www.webcountdown.net/?c=180
Eğer ögeler mantıksal olarak birbirine aitse, fiziksel olarak da onları gruplarız.
Kullanıcı tarafından takip edilecek sıra nedir? Bu durum ekrandaki sıralamayı da değiştirecektir.
Böylece bu veri giriş formunda, tab tuşuna bastığımız zaman nasıl sıra izlenecek onu da belirleriz.
Tasarımda; kutu, çizgi, yazı tipi, metin yada arkaplan rengi dekorasyon araçlarıyla gruplamaları vurgulayabiliriz.
Listelemelerin hizalaması oldukça önemlidir. Soldan sağa doğru okuyanlar için, yazılarımız sola doğru hizalı olmalıdır. Fakat, tamsayılar sağa doğru ve virgüllü sayılar ise virgülden öncesi için sağa doğru hizalanmalıdır.
Birden fazla sütunlu tablolar daha fazla dikkat ister. Yazı sütunlarının, en uzun yazı için yeteri kadar geniş olması gerekir.
Sütunları birbirine bağlayan noktalı çizgiler, satır ve sütun arkasındaki arkaplan renkleri okumayı kolaylaştırır.
Boş alanı,
*Blokları ayırmak için kullanırız.
Formumuzun ilk hali, ve ikinci hali.
Ekran tasarımı ve yerleşim başlığı altında diğer alt başlığımız ise kullanıcı hareketi ve kontrol. Kullanıcı hareketi ve kontrolün altında ise bilgi girişi, ne yapacağını bilme ve zorluklar var.
Form tabanlı ara yüzler ve diyalog kutuları, hem kullanıcıya bilgi sunmak hem de kullanıcının bilgi girdiği yerlerdir.
Yerleşim araçları (hizalama, boş alan vb.) bilgi girişi alanlarında da uygulanır ki biz de etkinliğimizi, form tabanlı bir arayüzün tasarımıyla ilgili yaptık.
Form tasarımlarında hizalama önemlidir. Alanların etiketlerini sağa hizalı yapmak bazı durumlarda en iyi sonucu verebilir.
Önceki etkinlikte yaptığımız gibi etiketleri sola hizalayıp hepsine aynı genişlik verebiliriz veya alanların üzerine etiketleri yazabiliriz.
Bunun haricinde kullanıcıların soldan sağa ve yukarıdan aşağıya okuması ekran tasarımlarımızda da yansımalıdır.
Ekrandaki bazı ögeler pasif, bazıları ise aktiftir, kullanıcının bu alanlara bilgi girme gibi işlemler yapması gerekir. Bazen ise hangi ögelerin aktif olduğu belli değildir. Bunu engellemek için
Herkes birbirine benzeyen menüler ve butonlar tasarlarsa, kullanıcılar onları gördüğü zaman daha kolay tanıyabilecek.
Bu sadece yeterli değildir. Menüdeki ikonların ve etiketlerin de anlaşılabilir olması gerekir. Kaydet, sil, yazdır ikonları sabittir. Fakat bazen daha genel kurallar izlememiz gerekir. Örneğin bir butonun kalın harflerle yazılması sistemin o anki durumunu ifade eder.
Bir nesnenin veya ögenin şeklinden veya özelliklerinden dolayı onla ne yapacağımıza karar verebilmektir. Örneğin, fiziksel materyaller için bir kol itmeyi veya çekmeyi gerektirebilir ya da bir buton ittirmeyi gibi. Bu sağlarlıklar, yeni etkileşim materyali tasarlarken kullanılabilir. Yani gerçek dünyadaki nesneleri taklit edebilir.
Sağlarlıklar içsel değildir. Tecrübelere ve kültüre bağlıdır. Yine deneyimli bir kullanıcı eğer tek tıklama işe yaramıyorsa çift tıklaycaktır. Ama yeni kullanıcılar bunu düşünemeyebilir.
Ekran tasarımı ve yerleşim başlığı altında diğer alt başlığımız ise uygun görünüm. Uygun görünümün altında ise…
Bilgiyi ekrandan sunma şeklimiz bilginin çeşidine bağlıdır. Sayılar, yazılar, haritalar, tablolar, grafikjler, sanal gerçeklikleri teknoloji sayesinde rahatlıkla sunabiliriz. Önemli olan amacımızdır. Örneğin komplex bir verimiz varsa, histogram, dağılım grafiği kullanırız. Hiyerarşik yapılar için bazı diyagramlar kullanırız. Dediğimiz gibi önemli olan sunumumuzun amacımızla örtüşmesi gerekir.
Etkiileşimli sistemler bilgiyi sunma kolaylaşır. Çünkü birçok bilgiyi sunma seçeneğine sahibizdir ve böylece farklı hedefleri başarmak mümkün olur. Örneğin, Bir klasördeki dosyaları bakarken onları farklı şekilde sıralayabiliriz. İsim güncelleme tarihi gibi
Güzel bir arayüz iyi bir arayüz olduğu anlamına gelmez.
Diğer bir deyişle, estetik ve fayda bazen birbirine karşıt olabilir.
Okunurluluğu artırmak için yazıların arkasındaki arkaplan düşük zıtlıkta olmalıdır. Fakat birçok grafik tasarımcı bunu ihmal eder ve yoğun arka planları kullanırlar.
Estetik kavramların dikkatlice uygulanmasıyla anlaşılırlık da artar.
Birçok arayüzün en kötü özelliği aşırı renk kullanımıdır. Eğer renkler aşırı çeşitli fontlarla kullanılırsa daha da kötü olur.
Popülasyonun çoğu renk körüdür bu demekki yazılarımızın bir bölümü bazı kullanıcılar için görünmezdir.
Renkler tutumlu bir şekilde kullanılmalıdır.
3 boyutlu yazılar ve pasta grafikleri okumayı zorlaştırır.
İnsanlar kompleks varlıklardır ve tasarımcılar da yanlış yapabilir. Hemen hemen her etkileşim tasarımları bir tekrarlama süreci geçirir. İlk olarak meslektaşlarımıza ve kullanıcılara kağıt tasarımlarımızı ve storyboardlarımızı gösteririz. Yazılımın prototip versiyonlarını oluştururuz. Böylece neyin kabul edilebilir olduğunu neyin gelişime ihtiyacı olduğunu anlayabiliriz. Buna biçimlendirici (formative) değerlendirme diyoruz. Eğer bunu sürecin sonunda yapıyorsak bu özetleyici değerlendirme olur.
Sistemi değerlendirme sonuçlarında problemler ortaya koyulur ve tekrar tasarım aşamasıyla devam edilir. düzeltilebilecek problemler olmayana kadar bu sürece devam edilir ve son noktaya ulaşılır.
Tekrarlama ve prototipleme, etkileşimli tasarım için önemli bir yer tutar.
Tepe tırmanma prototipe örnek olarak verilebilir.
Hayal edin. Açık kırsal bir yerde duruyorsunuz. En yüksek noktayı bulana kadar yürüyorsunuz. Sonunda zirveye ulaşıyorsunuz. Prototiplemede de bir yerde başlarsınız. Onu daha iyi yapabilmek için bir değerlendirme yaparsınız. Bir değişim uygularsınız ta ki daha iyi bir nokta bulamayana kadar.
Fakat burda önemli olan başlama noktasıdır. Eğer A noktasında başlarsanız, yerel maksimum noktasına ulaşırsınız. Eğer B’de başlarsanız önce yerel maksimuma sonra global maksimum noktasına ulaşırsınız. Yerel maksimuma ulaşma problemi arayüzler için de muhtemeldir. Eğer kötü bir tasarımla başlarsanız, sadece o kötü tasarımın biraz daha iyi hale gelmiş şekline ulaşırsınız.
Buradan anlaşılıyor ki, prototip metodlarının anlaşılması için 2 şeye ihtiyacımız vardır.
Neyin yanlış olduğunu ve onu nasıl geliştireceğimizi anlamak
İyi bir başlangıç noktası. Böylece yerel maksimuma ulaşmak yerine global maksimuma ulaşabiliriz.
İyi bir başlangıç noktasına sahip olmak için deneyimin önemi büyüktür. Ya da birçok başlama noktası seçip geliştirme aşamasında bu başlangıç noktalarını bir bir eksiltmektir.
