BÖLÜM 5 ETKİLEŞİM TASARIMININ TEMELLERİ

... konulu sunumlar: "BÖLÜM 5 ETKİLEŞİM TASARIMININ TEMELLERİ"— Sunum transkripti:

1 BÖLÜM 5 ETKİLEŞİM TASARIMININ TEMELLERİ
Mehmet Fatih YİĞİT Doç. Dr. Hakan TÜZÜN

2 Sunu Planı Tasarım Nedir? Etkileşim Tasarımı Süreci Kullanıcı Odağı
Senaryolar Navigasyon (Gezinim) Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme

3 1. Tasarım Nedir? Basit Tanım: Sınırlılıklar içinde amaçlara ulaşabilmek.

4 1. Tasarım Nedir? Amaçlar Üretmeyi planladığımız tasarımın amacı nedir? Bu tasarımı kim ne için kullanacak? Bu tasarımı neden kullanmak istesinler?

5 1. Tasarım Nedir? Sınırlılıklar Hangi materyalleri kullanmalıyız?
Hangi standartları benimsemeliyiz? Ne kadara mal olacak? Geliştirmek için ne kadar zamana ihtiyaç var? Herhangi sağlık ya da güvenlik sorunları var mı?

6 1. Tasarım Nedir? Ödün verme (Trade-off)
Bir amaca ulaşabilmek için diğer hangi amaçlardan ödün verilebilir?

7 Tasarımın Altın Kuralı
İnsan bilgisayar etkileşimindeki materyaller insan ve bilgisayardır. İnsanı anlamak Psikolojik faktörler, sosyal bakış açısı, insan hatası Bilgisayarı anlamak Sınırlılıklar, kapasite, araçlar, platform

8 İnsan hata yapar İnsanın doğasında hata yapmak vardır.
Sistem tasarlarken insanların nerelerde hata yapabileceğini öngörebilmek önemlidir. Sistemler hata yapma olasılığını en aza indirecek şekilde tasarlanmalıdır. Hata yapıldığında ise sonuçlarının daha az zarar getirmesi sağlanmalıdır.

9 2. Etkileşim Tasarımı Süreci
Ne isteniyor? Analiz Uygulama ve yayma Tekrarlama ve Prototipleme Görüşmeler Ne var? Yönergeler, Tasarım ilkeleri Diyalog gösterimleri Dokümantasyon, Yardım Bulguların değerlendirilmesi Tasarım

10 3. Kullanıcı Odağı Tüm etkileşim tasarımı çalışmalarının odağında kullanıcı olmalıdır. Kullanıcılarını tanı Onlar kim? Kullanıcılar senden farklıdır Onlarla konuş Onları gözlemle Hayal gücünü kullan

11 3. Kullanıcı Odağı Örnek persona – Betty (Depo Yöneticisi)
Örnek: “Betty is 37 years old. She has been Warehouse Manager for five years and has worked for Simpkins Brothers Engineering for 12 years. She didn’t go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident three years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).”

12 4. Senaryolar Senaryolar tasarım için hazırlanan öykülerdir.
Tasarımların en basit ve en güçlü sunum şekillerinden biridir. Bazı senaryolar kısadır. Örnek: “Kullanıcı kaydet düğmesine basmak isterken yanlışlıkla kapat düğmesine basar ve çalışmasını kaybeder.”

13 4. Senaryolar Bazı senaryolar da uzun ve detaylıdır.
Örnek: “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 recognized 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.”

14 4. Senaryolar Örnek Storyboard:

15 4. Senaryolar Senaryolar kişiyi tasarım hakkında daha detaylı bir şekilde düşünmeye iter. Böylece gerçekleşebilecek olası hatalar daha meydana gelmeden fark edilebilir. Senaryolar doğrusaldır. Bu doğrusallığın avantaj ve dezavantajı bulunmaktadır. Avantaj: Zaman da doğrusaldır. Bu yüzden senaryoların anlaşılması kolaydır. Dezavantaj: Gerçek etkileşimlerde insan ve sistem tarafından yapılan bazı seçimler vardır. Ancak senaryolarda bu alternatif yollar gösterilemeyebilir.

16 5. Navigasyon (Gezinim) Tasarımı
Bir sistemi kullanırken onunla çeşitli biçimlerde etkileşime girilir. Etkileşim Seviyeleri: Widgetlar (Grafik bileşenleri) Ekran ya da Pencereler Uygulama içi gezinim Çevre

17 5. Navigasyon (Gezinim) Tasarımı
MS Word Örneği Widgetlar (Grafik bileşenleri) Uygun widget seçimi ve menüler ile butonlardaki dilin kullanımı kullanıcılara o widget , menü ve butonların nasıl ve ne amaçla kullanılacağı konusunda yardımcı olmalıdır. Ekran ya da pencereler Ekranda yer alan elemanlar mantıklı bir ilişki ile gruplandırılmalıdır.

18 5. Navigasyon (Gezinim) Tasarımı
Uygulama içi gezinim Uygulama içerisinde bir butona basıldığında ne olacağı ve etkileşimin neresinde olunduğunun anlaşılması gerekmektedir. Ortam Uygulama diskten ya da ağ üzerinden dokümanları okuyabilmeli, uygulamalar arasında geçiş ya da taşıma yapılabilmelidir.

19 5. Navigasyon (Gezinim) Tasarımı
PC Uygulamaları Web Siteleri Widgetlar Form elemanları, etiketler ve bağlantılar Ekran ya da pencereler Sayfa Tasarımı Uygulama içi gezinim Site yapısı Ortam Browser, dış bağlantılar

20 5. Navigasyon (Gezinim) Tasarımı
Bir sistemde 2 tür yapı bulunur: Yerel yapı - Tek bir ekran ya da sayfa tasarımı Global yapı - Sitenin ya da sistemin yapısı, sayfalar arasındaki geçiş

21 Yerel Yapı Çoğu etkileşim hedefe ulaşma davranışını (goal-seeking behavior) içerir. Başlangıç Hedef

22 Yerel Yapı Sistemin her bir adımı ya da her bir sayfası kullanıcıların: Nerede olduklarını, Ne yapabileceklerini, Nereye gideceklerini ve ne ile karşılaşacaklarını, Ne yaptıklarını bilecek şekilde tasarlanmalıdır.

23 Global Yapı – Hiyerarşik Organizasyon
Global yapı farklı ekran ve sayfaların birbirleriyle bağlantısını ve sistemin organize edilmesini içerir. Bir sistemin organize edilmesinin yollarından birisi hiyerarşidir. Hiyerarşi, ekranların ve sayfaların birbirleriyle mantıklı bir gruplaşma içerisinde bağlanmasında yardımcı olur.

24 Global Yapı – Hiyerarşik Organizasyon
Sistem Bilgi ve Yardım Yönetim Kullanıcı Ekleme Kullanıcı Silme Mesajlar Mesajlaşma sistemi hiyerarşi örneği

25 Global Yapı – Diyalog Hiyerarşinin olmadığı komut ve ekran akışları da vardır. İnsan - bilgisayar etkileşiminde, kullanıcı ve sistem arasındaki hiyerarşinin olmadığı etkileşime diyalog denir. Evlilik Örneği: İnsan bilgisayar etkileşiminde de bu durum aynıdır. Genel bir kalıp vardır ancak içerik her zaman farklılık gösterebilir. Görevli: …..’yı karın olarak kabul ediyor musun? Erkek: Evet. Görevli: …..’yı kocan olarak kabul ediyor musun? Kadın: Evet. Görevli: Belediye Başkanı’nın bana verdiği yetkiye dayanarak sizleri karı koca ilan ediyorum.

26 Global Yapı – Diyalog Senaryolar, sistemdeki sadece bir yolu gösterir.
Bütün 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.

27 Global Yapı – Diyalog Ana ekran Kullanıcı sil Onayla ekle
Ağ diyagramı örneği

28 6. Ekran Tasarımı ve Yerleşim
Etkileşimli bir uygulamada ekran elemanlarını nasıl bir düzende yerleştireceğiz? Yerleşim için araçlar: Gruplama ve yapı Grup ve öğelerin sıralanması Dekorasyon Hizalama Boş alan

29 Yerleşim İçin Araçlar Gruplama ve Yapı
Eğer ekrandaki öğeler birbirleriyle mantıksal bir ilişki içerisindeyseler, bu öğeler gruplandırılmalıdır.

30 Yerleşim İçin Araçlar Grup ve Öğelerin Sıralanması
Etkileşimli bir uygulamada bir eylem gerçekleştirilirken, ekrandaki grup ve öğeler kişinin o eylemi gerçek hayatta yerine getirdiği şekilde sıralanmalıdır.

31 Yerleşim İçin Araçlar Dekorasyon
İlişkili öğeler mantıksal olduğu kadar görsel olarak da gruplandırılmalıdır. Bu her grup için farklı renk ve yazı tipi kullanılarak gerçekleştirilebilir.

32 Yerleşim İçin Araçlar Hizalama
Yerleşim için hizalama da oldukça önemlidir. Metinler genellikle soldan sağa doğru okunur. Dolayısıyla metinler sola yaslı olmalıdır. Sayılar ise büyüklüğün daha rahat anlaşılması için sağa yaslı olmalıdır.

33 Yerleşim İçin Araçlar Hizalama
Eğer birden fazla sütun varsa daha dikkatli olmak gerekir. Metin sütunlarının genişliği en uzun metnin sığabileceği genişlikte olmalıdır. Ancak bu durum sütunlar arası uzun boşluklara sebep olabilir. Bu da takibi güçleştirebilir.

34 Yerleşim İçin Araçlar Hizalama
Çoklu sütun gösterimi için aşağıdaki şekillerden (ii), (iii) ve (iv) uygun gösterim biçimlerdir.

35 Yerleşim İçin Araçlar Boş Alan
Boş alan birden fazla amaç için kullanılabilir: Ayırımı göstermek için (i) Yapıları göstermek için (ii) Dikkat çekmek için (iii)

36 Kullanıcı Eylemi ve Kontrol
Bilgi girişi Ne yapacağını bilmek Sağlarlık (Affordance)

37 Kullanıcı Eylemi ve Kontrol
Bilgi Girişi Ekranda kullanıcıdan bir takım bilgileri girmesi istenebilir. Hizalama önemlidir. Metin kutuları düzensiz değil (i), sağa yaslı bir biçimde tercih edilir (ii). (i) (ii)

38 Kullanıcı Eylemi ve Kontrol
Ne Yapacağını Bilmek Ekranda bazı öğeler pasif, bazıları da aktiftir. Kullanıcıların hangi öğelerin pasif, hangilerinin aktif olduğunu bilmeleri sağlanmalıdır. Menülerdeki butonlar, etiketler ve ikonlar açık ve standart olmalıdır.

39 Kullanıcı Eylemi ve Kontrol
Sağlarlık (Affordance) Psikolojik açıdan bakıldığında, bir nesnenin şekli onun nasıl kullanılacağı hakkında ipuçları verir. Buna sağlarlık denir. Gerçek hayatta olduğu kadar, etkileşimli sistemlerde de sağlarlık konusuna dikkat edilmelidir.

40 Uygun Görünüm Bilgiyi sunma Estetik ve amaca uygunluk Renk ve 3B
Yerellik ve evrensellik

41 Uygun Görünüm Bilgiyi Sunma
Bilgiyi sunma biçimi bilginin türüne göre değişir. Etkileşimli sistemlerde bilginin farklı şekillerde sıralanabilmesi önemli bir avantajdır.

42 Uygun Görünüm Estetik ve Amaca Uygunluk
Güzel görünen bir ara yüz, iyi bir ara yüz demek değildir. Estetik ve amaca uygunluk bazen birbirine zıt olabilir. İdeal olan bu ikisini mümkün olduğunca dengede tutabilmektir.

43 Uygun Görünüm Renk ve 3B Aşırı renk kullanımı bir ara yüzdeki en kötü özelliklerden birisidir. Aşırı renk kullanmak dikkati dağıtabilir ve okunabilirliği olumsuz etkileyebilir. 3 boyut kullanımı fiziksel nesnelerin gösterimi için uygun olsa da, metinlerin gösterimi için uygun bir yöntem değildir.

44 Uygun Görünüm Yerellik ve Evrensellik
Bir sistemi farklı dil ve kültürlere uygun olarak tasarlama sürecine yerellik veya evrensellik denir. Hizalama ve yerleşim konusunda bazı diller farklılık gösterebilir. (Ör: İngilizce ve Arapça) Bazı ikonların anlamı da kültürlere göre farklılık gösterebilir.

45 7. Tekrarlama ve Prototipleme
Tasarım süreci kendini tekrarlayan bir süreçtir. Çünkü tasarımın ilk hali muhtemelen hatasız ve mükemmel olmayacaktır. Bu yüzden etkileşimli tasarımda tekrarlama ve prototipleme evrensel olarak kabul edilen bir yaklaşımdır. Prototip Değerlendirme Tasarım Yeniden tasarım Bitti! Tamam?

46 7. Tekrarlama ve Prototipleme
Tekrarlama ve prototiplemede dikkat edilmesi gereken 2 önemli nokta vardır: Nerede problem olduğunu ve onun nasıl iyileştirilebileceğini anlamak İyi bir başlangıç noktası belirleyebilmek E A C D B

47 Teşekkürler…