ETKİLEŞİM TASARIM TEMELLERİ

1. ETKİLEŞİM TASARIM TEMELLERİ Ders Adı : BTÖ-411 İnsan Bilgisayar Etkileşimi Ders Sorumlusu : Yrd. Doç. Dr. Hakan TÜZÜN Hazırlayanlar : Serap TEKELİOĞLU Mustafa BAYRAM Yeliz KUŞKAYA Zafer YILMAZ Volkan ULUÇINAR Adem ÖZGÜR 2009 – 2010 Öğretim Yılı Bahar Dönemi Hacettepe Üniversitesi, Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 06532 Beytepe/ANKARA

2. İçindekiler… • Tasarım • Tasarım Süreci • Senaryolar • Navigasyon Tasarımı • Yerel yapı • Global yapı • Ekran Tasarımı ve Yerleşimi • Affordances • Tekrarlama ve Prototipleme

3. TASARIM

4. Tasarım

5. Tasarım Nedir? Tasarlama sözcüğü, İngilizce ve Fransızca da ki “design” kelimesi karşılığı olarak kullanılmaktadır. Tasarım; hedefleri sınırlılıklar dahilinden gerçekleştirmektir. Tasarım; bir amaca yönelik düşünsel üretimdir. Tasarım, zihinde canlandırılan biçimdir.

6. Tasarım Tasarım işinde ; • Faklılıkları bulma • Hayal kurma • Sorgulama • Yaratıcı düşünme • Eleştirel düşünme • Akıl yürütme gibi üst düzey zihinsel süreçlerin tasarım yapmada önemli bir yeri vardır.

7. "Doğal olarak meydana gelmemiş her şey aslında bir şekilde tasarlanmıştır.."

8. Tasarım Öğeleri • Hedef • Tasarımın amacı ne? • Bilgisayar geliştirmek • Kim için? • Görme engelliler için • Ne istiyorlar? • Rahat bir şekilde kullana bilecekleri bilgisayar

9. Tasarım Öğeleri • Sınırlılıklar • Hangi materyali kullanmalıyız? • Magneclay( yağ bazlı madde), Braille alfabesi, Ses cihazı.. • Standartlarımız neler? • 9 düğme(braille alfabesi) , Hareketli yüzey,2D-3D Görüntü… • Süre ve maliyet? • ??? Yıl ??? $

10. Tasarım Öğeleri • Ödünler • Hedefler ya da sınırlılıkların karşılanması için hangilerinden vazgeçilecek? • Tasarımı gerçekleştirmek için imkanlar neticesinde bazı hedeflerden ödün vermek zorunda kalabilirsiniz.

11. Tasarımın Altın Kuralı • İnsan; • Psikolojik • Sosyal • Fiziksel • Bakış açıları • İstekleri • Hataları • Bilgisayar; • Kısıtlılıkları • Kapasitesi • Araçları • Özelliklerini • Artılarını Materyallerinizi anlayın

12. Hatasız Kul Olmaz… İnsanlar hata yapabilirler ancak sistemler bu hataları ve bu hataların sonuçlarını azaltıcı yönde tasarlanmalılardır. İnsanların hatalarının sebepleri ayrıntılı olarak incelenir ve bilinirse buna uygun tasarımlar yapılarak bunların oluşmaları aza indirgenebilir.

13. TASARIM SÜRECİ

14. Senaryolar İçerik analizleri Yönergeler ilkeler Görüşmeler Ethnography Elimizde ne var? Ne isteniyor? Kesin belirleme Diyalog işaretlemeleri Bulguların değerlendirilmesi Tasarım Süreci… Ne isteniyor? Analizler Tasarım Gerçekleştir ve harekete geçir Ön ürün

15. Basamaklar… • İhtiyaçlar • Ne var? Ne isteniyor?… • Analizler • Düzenleme ve anlama • Tasarım • Ne yapılacak nasıl kararlaştırılacak • Tekrarlama ve Ön Ürünler • Gerçekten neye ihtiyaç olduğunu bulmak! • Uygulama ve Harekete Geçirme

16. …ancak bunların hepsini nasıl yapabilirim!! • Sınırlı zaman “trade-off” tasarlayın • kullanılabilirlik? • Problemlerin bulunması ve çözümü? • Ne çözeceğine karar vermek? • Muhteşem sistemler kötü tasarlanır • İyiye tasarıma fazla emek harcamak

17. KULLANICI MERKEZİ • Kullanıcılarınızı bilin • Kişilikleri • Kültürleri

18. Kullanıcılarınızı Bilin Onlar kim? Muhtemelen siz değilsiniz! Onlarla konuşun Onları izleyin Hayal gücünüzü kullanın

19. Kişilik… • Temsil edebilecek bir kullanıcı kullanın. • Ahmet ne düşünür? • Ayrıntılar sorundur • Onu gerçek yapar.

20. Kültürel Araştırma… • Doğrudan inceleme • Bazen zordur • evde • Psikiyatrik sabırlar, … • Araştırma paketleri • Cevaplama öğeleri • Duvardan dinlemek için bardak, kamera • İnsanlara kendi dünyalarını açmaları için verilenleronlara ne anlamlı geliyorsa onu kaydederler.

21. SENARYOLAR

22. Senaryolar… • Tasarım için hikayeler • Diğerleri ile etkileşime geç • Diğer modellere geçerliğini denetle • Dinamikleri anla • Doğrusallık • Zaman doğrusaldır- hayatımız doğrusaldır • Ancak alternatifler göstermez

23. Senaryolar… Senaryolar – Sisteme Doğru Doğrusal Bir Yol Avantaj • Hayat ve zaman doğrusaldır • Anlamak kolaydır (hikayeler doğaldır) • Somuttur Dezavantaj • Seçenek yoktur, dallanmalar yoktur, özel koşullar yoktur. • İstemeden yapılan hareketleri kaçırır. Öyleyse • Birden fazla senaryo kullanın • Birden fazla yöntem kullanın

24. Senaryolar… • Scenario for proposed movie player

25. NAVİGASYON…

26. Basamaklar… • Araçlarını belirle • Butonlar, yazılar, menüler • Ekran ve Pencereler(Mantıksal gruplama) • Navigasyon tasarımı uygulaması • Dış ortamlar

27. Web siteleri… • Araçları belirleme • Elemanlar, taglar, etiketler • Ekran ve Pencereler • Benzer menülerin gruplanması • Navigasyon • Sitenin yapılandırılması • Dış ortamlar • Web tarayıcı, dış linkler

28. Fiziksel araçlar… • Araçları belirleme • Butonlar, numaralar, renk, ışık • Ekran yerleşimi • Navigasyon tasarımı • Aracın modları • Ortam • Gerçek dünya

29. Başlarken düşünün? • Bu uygulamayı kim kullanacak? • Nasıl düşünebilirler? • Bununla ne yapacaklar?

30. Yapılanma üzerine düşünün • Yerel yapı • Bir sayfanın yapılanması üzerine • Genel yapı • Sitenin yapısı, sayfalar arası geçiş • Kapsamlı durum • Diğer uygulamalarla ilişki

31. Yerel Yapı Bir sayfanın yapılanması üzerine…

32. hedef başlangıç

33. Dört olgu üzerinde durun • Nerede olduğunu bilme • Neler yapabileceğini bilme • Nereye gidiyor olduğunu bilmek veya neler olacağını • Neler yapmış olduğunu ve nereye gelmiş olduğunu bilmek

35. Ana menü İkinci menü web sitesi Bu sayfa Linkleri devam ettirin Neredesin? - Ekmek kırıntıları

36. Modlar… • Yanlışlıkla aramaları engellemek için kilitleyin… • Kilidi kaldırmak için - ‘c’ + ‘yes’ tuşlarına basın • Birçok defa yapılır. • Eğer kilit unutlursa • Cepte “yes” tuşuna basarsa • Telefon rehberine gider • Telefon rehberinde… ‘c’ – rehberi sil? ‘yes’ – Onayla

37. Global yapı Sitenin yapısı sayfalar arası geçiş

38. Sistem Bilgi ve Yardım Yönetim Mesajlar Kullanıcı Ekle Kullanıcı Kaldır Hiyerarşik…

39. Sistem Bilgi ve Yardım Yönetim Mesajlar Kullanıcı Ekle Kullanıcı Kaldır • Uygulamanın kısımları • Ekranlar ya da ekran grupları • Tipik fonksiyonel dağılım

40. Yönlendirme hiyerarşisi • Derinlik zordur! • Miller’ in 7 ± 2 kuramı • Kısa süreli bellek, menü boyutu değil • En Uygun? • Her ekranda birçok öğe • Ancak ekran içerisinde yapılandırılmış

41. Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle Ağ Diyagramları

42. Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle Ağ Diyagramları • Ne neye öncülük eder? • Ne ne zaman olacak? • Dallanma ve döngüler içerir? • Hiyerarşi dışında, daha fazla görev…

43. Kapsamlı Durum Diğer uygulamalarla etkileşim

44. Stil konuları • Platform standartları, tutarlılık

45. Fonksiyonel konular • Kes, kopyala, yapıştır…..

46. Navigasyon konuları • Uygulamalar arası geçiş • Gömülü uygulamalar(hava durumu) • Farklı uygulamalara erişim(E-posta, ikonlar..)

47. Ekran Tasarımı ve Yerleşim

48. Ekran tasarımı ve Yerleşim • Temel İlkeler • Gruplandırma, Yapılandırma, Sıralama • Hizalama • Beyaz Alanın Kullanımı

49. Ödeme ayrıntıları: İsim Adres: … Kredi Kart no Dağıtım ayrıntıları: isim Adres: … Dağıtım zamanı Sıralama ayrıntıları: öğe sayı fiyat/öğefiyat 10 kutu 7 3.71 25.97 …… … … … Gruplama ve yapılandırma Mantıksal  Fiziksel

50. ABCDEFGHIJKLM NOPQRSTUVWXYZ Grup ve Öğelerin Sıralanması-Süsleme Mantıksal öğeleri gruplamak için kutuları kullanın. Başlık ve önemli yerleri belirtmek için fontları kullanın.