BTÖ711: İnsan-Bilgisayar Etkileşimi

... konulu sunumlar: "BTÖ711: İnsan-Bilgisayar Etkileşimi"— Sunum transkripti:

1 BTÖ711: İnsan-Bilgisayar Etkileşimi
ETKİLEŞİMLİ TASARIM TEMELLERİ Ecenaz ALEMDAĞ Bu sunumda etkileşimli tasarım temellerini işleyeceğiz. BTÖ711: İnsan-Bilgisayar Etkileşimi

2 BTÖ711: İnsan-Bilgisayar Etkileşimi
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. BTÖ711: İnsan-Bilgisayar Etkileşimi

3 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

4 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tasarım Nedir? Sınırlarla hedeflere ulaşmaktır. Hedefler Ödünler Sınırlılıklar İ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. BTÖ711: İnsan-Bilgisayar Etkileşimi

5 Tasarımın Altın Kuralı
Tasarım Nedir? > Tasarımın Altın Kuralı Materyallerinizi anlayın. 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. İnsanlar (psikolojik, sosyal bakış açıları, hatalar) Bilgisayarlar (kısıtlılıklar, kapasiteler, araçlar) BTÖ711: İnsan-Bilgisayar Etkileşimi

6 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tasarım Nedir? > Hatasız Kul Olmaz 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

7 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tasarım Nedir? > Ana Mesaj-Kullanıcı Kullanıcıyı temel al Kullanıcıyı merkezde tut En sonda kullanıcıyı hatırla İ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. BTÖ711: İnsan-Bilgisayar Etkileşimi

8 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

9 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tasarım Süreci 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 Ne isteniyor? Analiz Tasarım Uygulama ve harekete geçirme 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. Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

10 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tasarım Süreci Senaryolar, İçerik analizleri Ne isteniyor? Analiz Yönergeler, İlkeler Görüşmeler Ne var? Ne isteniyor? Tam belirleme Tasarım Uygulama ve harekete geçirme Diyalog gösterimleri İ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. Bulguların değerlendirilmesi Prototipleme Dokümantasyon, Yardım BTÖ711: İnsan-Bilgisayar Etkileşimi

11 Tasarım Süreci Kalite Zaman Kullanabilirlik Sorunları
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 kullanabilirlik sorunlarıyla karşılaşırız. Burda önemli olan, kullanabilirlik sorunları bulmak değil, hangilerinin düzeltmeye değer olduğunu belirlemektir. BTÖ711: İnsan-Bilgisayar Etkileşimi

12 ¡Hola! Ne yazıyor dairenin içinde? Sanırım, şimdi dikkatiniz ekranda daha iyi toplandı.

13 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

14 BTÖ711: İnsan-Bilgisayar Etkileşimi
Kullanıcı Odağı 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

15 BTÖ711: İnsan-Bilgisayar Etkileşimi
Kullanıcı Odağı Peki, kullanıcılarımızı nasıl tanıyabiliriz? Onlar kim? Kullanıcı senin gibi değil! Onlarla konuş Onları gözlemle 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. Hayal gücünü kullan BTÖ711: İnsan-Bilgisayar Etkileşimi

16 ¿Cómo estás?

17 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

18 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryolar 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

19 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryo > Storyboard Senaryoların resimlerle ve çizimlerle zenginleştirilmiş hali. Ör. Film hikaye çizgisi Storyboard ise senaryoların resimlerle ve çizimlerle zenginleştirilmiş halidir. Film hikaye çizgelerinde kullanılan tekniklere benzer teknikler kullanılır. BTÖ711: İnsan-Bilgisayar Etkileşimi

20 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryo Storyboard > > Mobil X 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. Şimdi ise hayali bir araç olan Mobil X’in storyboardını göstermek istiyorum. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

21 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryo Storyboard > > Mobil X 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

22 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryo Storyboard > > Mobil X Öğ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. BTÖ711: İnsan-Bilgisayar Etkileşimi

23 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryo Storyboard > > Mobil X 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

24 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryolar 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

25 BTÖ711: İnsan-Bilgisayar Etkileşimi
Senaryolar 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

26 Bien / Mal

27 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

28 BTÖ711: İnsan-Bilgisayar Etkileşimi
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) BTÖ711: İnsan-Bilgisayar Etkileşimi

29 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı > Etkileşim Seviyeleri 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 BTÖ711: İnsan-Bilgisayar Etkileşimi

30 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı > Etkileşim Seviyeleri 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 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

31 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Bir uygulamanın yapısı hakkında düşünelim. 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ş 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

32 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı > Yerel Yapı Hedefi Arama Davranışı Başlangıç Hedef 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 BTÖ711: İnsan-Bilgisayar Etkileşimi

33 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Yerel Yapı > > Hedefi Arama Davranışı Ben nerdeyim? Başlangıç Hedef 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

34 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Yerel Yapı > > Bread crumbs 4 Kural Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi aramalıyız: Nerde olduğunu bilme Ne yapabileceğini bilme İlk Sayfa 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

35 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Yerel Yapı > > 4 Kural Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi bilmeliyiz: Ne olacağını bilme Modlar: Komutların işlevselliğini değiştiren farklı ortamlara denir. Ne yaptığını bilme 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

36 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı > Global Yapı 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: Hiyerarşik organizasyon Diyalog (ağ diyagramı) Yerel yapıyı bitirdik. Şimdi ise navigasyon tasarımında global yapıya bakalım. BTÖ711: İnsan-Bilgisayar Etkileşimi

37 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon 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ı BTÖ711: İnsan-Bilgisayar Etkileşimi

38 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon 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 Animasyon Gelişmiş animasyon BTÖ711: İnsan-Bilgisayar Etkileşimi

39 Hiyerarşik Organizasyon
Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon 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 BTÖ711: İnsan-Bilgisayar Etkileşimi

40 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon Karışık hiyerarşiler yerine daha genel kategoriler kullanın. Sınıflama, kullanıcının amacına hizmet etmelidir. Miller’in 7+-2 sihirli sayısı sadece kısa süreli bellek içindir, görsel arama için değil! 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

41 Diyalog Hiyerarşinin olmadığı komut ve ekran akışları da vardır.
Navigasyon Tasarımı Global Yapı > Diyalog 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 …’la evlenmeyi kabul ediyor musun? Evet Evet …’la evlenmeyi kabul ediyor musun? 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

42 Navigasyon Tasarımı Global Yapı > Diyalog İ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. …’la evlenmeyi kabul ediyor musun? Evet Evet …’la evlenmeyi kabul ediyor musun? İ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. BTÖ711: İnsan-Bilgisayar Etkileşimi

43 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Global Yapı > Diyalog 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; Neyin neye sebep olacağını, Neyin ne zaman olacağını ve Dalları ve döngüleri gösterebiliriz. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

44 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı Global Yapı Diyalog > > > Ağ diyagramları Ana ekran Kullanıcı sil Onayla Kullanıcı ekle 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. Sistemdeki tüm yolları gösterir. BTÖ711: İnsan-Bilgisayar Etkileşimi

45 BTÖ711: İnsan-Bilgisayar Etkileşimi
Navigasyon Tasarımı > Wider Still ‘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: Stil konuları Fonksiyonel konular Navigasyon konuları 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

46 Mucho/a

47 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

48 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Ekran tasarımındaki ilkeler: Sor Kullanıcı ne yapıyor? Düşün Hangi bilgi gerekli? Kullanıcının ne gibi karşılaştırmalar yapması gerekebilir? Bileşenlere hangi sırada ihtiyaç duyuluyor? Ş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: Tasarla Gerekli etkileşimlerin düzeni oluşturmasını sağla BTÖ711: İnsan-Bilgisayar Etkileşimi

49 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim > Yerleşim için Araçlar Gruplama ve Yapılanma Grupların ve ögelerin sıralanması Dekorasyon Hizalama Boş alan Kullanıcının bir araçla etkileşime girmesini kolaylaştıran görsel araçlarımız vardır. BTÖ711: İnsan-Bilgisayar Etkileşimi

50 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Çevrimiçi Kitap Satın Alma Formu Adres Posta Kodu Ülke Ad Soyad E-posta adresi Telefon Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Satın al 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

51 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Gruplanma ve Yapılanma Ad Soyad E-posta adresi Telefon Adres Posta Kodu Ülke Eğer ögeler mantıksal olarak birbirine aitse, fiziksel olarak da onları gruplarız. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu BTÖ711: İnsan-Bilgisayar Etkileşimi

52 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Grupların ve Ögelerin Sıralanması Ad Soyad E-posta adresi Telefon Adres Posta Kodu Ülke 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. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu BTÖ711: İnsan-Bilgisayar Etkileşimi

53 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Dekorasyon Ulaşım Bilgileri Adres Posta Kodu Ülke Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Ödeme Bilgileri Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Tasarımda; kutu, çizgi, yazı tipi, metin yada arkaplan rengi dekorasyon araçlarıyla gruplamaları vurgulayabiliriz. BTÖ711: İnsan-Bilgisayar Etkileşimi

54 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Hizalama Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Adres Posta Kodu Ülke Adres Bilgileri 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. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Kart Bilgileri BTÖ711: İnsan-Bilgisayar Etkileşimi

55 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Boş Alan Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Adres Posta Kodu Ülke Adres Bilgileri Boş alanı, *Blokları ayırmak için kullanırız. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Kart Bilgileri BTÖ711: İnsan-Bilgisayar Etkileşimi

56 Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu
Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Adres Posta Kodu Ülke Ad Soyad E-posta adresi Telefon Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Adres Posta Kodu Ülke Adres Bilgileri Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Kart Bilgileri Formumuzun ilk hali, ve ikinci hali. Satın al Satın al

57 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim > Kullanıcı Hareketi ve Kontrol Bilgi Girişi Ne yapacağını bilme Sağlarlık 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

58 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Kullanıcı Hareketi ve Kontrol > > Bilgi Girişi 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. Ad Soyad E-posta adresi Telefon Kişisel Bilgiler 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

59 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Kullanıcı Hareketi ve Kontrol > > Ne Yapacağını Bilme 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. Kaydet, sil, yazdır gibi komutlar için standartlardan faydalanabiliriz. Sisteme özel hareketler için, daha genel ilkelere ihtiyacımız vardır. Ör. Kalın yazma 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

60 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Kullanıcı Hareketi ve Kontrol > > Sağlarlık (Affordance) 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

61 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim > Uygun Görünüm Bilgiyi sunma Estetik ve fayda Karışım oluşturma: Renk ve 3B Yerellik ve Evrensellik 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… BTÖ711: İnsan-Bilgisayar Etkileşimi

62 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Bilgiyi Sunma 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. 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 BTÖ711: İnsan-Bilgisayar Etkileşimi

63 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Estetik ve Fayda 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

64 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Karışım Oluşturma: Renk ve 3B 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. 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

65 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Yerellik ve Evrensellik 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. BTÖ711: İnsan-Bilgisayar Etkileşimi

66 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Uygun Görünüm Yerellik ve Evrensellik > > > Türkçe Vikipedi BTÖ711: İnsan-Bilgisayar Etkileşimi

67 BTÖ711: İnsan-Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim Uygun Görünüm Yerellik ve Evrensellik > > > Arapça Vikipedi BTÖ711: İnsan-Bilgisayar Etkileşimi

68 Terminar

69 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

70 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tekrarlama ve Prototipleme Tamam? değerlendirme tasarım prototip Bitti! Yeniden tasarım İ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. BTÖ711: İnsan-Bilgisayar Etkileşimi

71 BTÖ711: İnsan-Bilgisayar Etkileşimi
Tekrarlama ve Prototipleme B A 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. Neyin yanlış olduğunu ve onu nasıl iyileştireceğimizi anlamak İyi bir başlangıç noktası BTÖ711: İnsan-Bilgisayar Etkileşimi

72 BTÖ711: İnsan-Bilgisayar Etkileşimi
Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme BTÖ711: İnsan-Bilgisayar Etkileşimi

73 Gracias

74 BTÖ711: İnsan-Bilgisayar Etkileşimi
Kaynaklar Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-computer interaction. England: Prentice Hall. Haeffele, D. (2010). Hci work storyboard. Retrieved from Norman, D.A. (1990). The design of everyday things. New York: Doubleday. BTÖ711: İnsan-Bilgisayar Etkileşimi