ETKİLEŞİM TASARIM TEMELLERİ

... konulu sunumlar: "ETKİLEŞİM TASARIM TEMELLERİ"— Sunum transkripti:

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 Materyallerinizi anlayın
Tasarımın Altın Kuralı Materyallerinizi anlayın İnsan; Psikolojik Sosyal Fiziksel Bakış açıları İstekleri Hataları Bilgisayar; Kısıtlılıkları Kapasitesi Araçları Özelliklerini Artıları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 Tasarım Süreci… Senaryolar İçerik analizleri Ne isteniyor? Yönergeler
Görüşmeler Ethnography Elimizde ne var? Ne isteniyor? Yönergeler ilkeler Diyalog işaretlemeleri Kesin belirleme Bulguların değerlendirilmesi Senaryolar İçerik analizleri 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 verilenler onlara 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 Bir sayfanın yapılanması üzerine…
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

34

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

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 Sitenin yapısı sayfalar arası geçiş
Global yapı Sitenin yapısı sayfalar arası geçiş

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

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

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 Ağ Diyagramları Ana Ekran Kullanıcı Kaldır Onayla Ekle

42 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… Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle

43 Diğer uygulamalarla etkileşim
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 Gruplama ve yapılandırma
Mantıksal  Fiziksel Ödeme ayrıntıları: İsim Adres: … Kredi Kart no Dağıtım ayrıntıları: isim Dağıtım zamanı Sıralama ayrıntıları: öğe sayı fiyat/öğe fiyat 10 kutu …… … … …

50 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. ABCDEFGHIJKLM NOPQRSTUVWXYZ

51 Grup ve Öğelerin Sıralanması -Hizalama - metin
Yazılarınızı soldan sağa doğru yani;  sol tarafa hizalayın. Biraz sıkıcıdır ancak okunur. Ayşe KULİN, Umut Hayat akan bir sudur. Alfa Yayınları 2008 Ayşe KULİN, Umut Hayat akan bir sudur. Alfa Yayınları 2008 Özel efektler için iyidir ama ayırt etmek zordur.

52    Grup ve Öğelerin Sıralanması -Hizalama - isimler
Soyadlarını ayırt etmeyi kolaylaştırın. Özgür, Muhittin Sonses, Şaziye Kaygusuz, Rüknettin Sıtkısıyrılmış, Bediha Tehlike, Hayati  Muhittin Özgür Şaziye Sonses Rüknettin Kaygusuz Bediha Sıtkısıyrılmış Hayati Tehlike  Muhittin Özgür Şaziye Sonses Rüknettin Kaygusuz Bediha Sıtkısıyrılmış Hayati Tehlike

53 Grup ve Öğelerin Sıralanması -Hizalama - numaralar
Sayılardan hangisi en büyük?

54 Grup ve Öğelerin Sıralanması -Hizalama - numaralar
Görsel olarak: uzun numara = büyük numara, Ondalık sayıları sıralayın ya da sayıları hizalayın.

55 Grup ve Öğelerin Sıralanması -Çok sütunlar
Aralıkları ayırmak zordur. bisküvi 75 şekerleme 120 çikolata 35 meyveli sakız 27 meyve suyu 85

56 Grup ve Öğelerin Sıralanması -Çok sütunlar
İkili satır renkleri satır. bisküvi 75 şekerleme 120 çikolata 35 meyveli sakız 27 meyve suyu 85

57 Grup ve Öğelerin Sıralanması -Çok sütunlar
Çizgisel yolları kullanın. bisküvi 75 şekerleme 120 çikolata 35 meyveli sakız 27 meyve suyu 85

58 Grup ve Öğelerin Sıralanması -Çok sütunlar
Ya da “adi” hizalama yapın. bisküvi şekerleme 120 çikolata meyveli sakız meyve suyu

59 Boşluk Kullanımı -Dağıtmak için boşluk

60 Boşluk Kullanımı -Karmaşık yapılar için boşluk

61 Boşluk Kullanımı -Vurgulamak için boşluk

62 Fiziksel kontroller Öğelerin gruplanması; Buz çözme ayarları
Yiyecek modu Pişirme zamanı

63 Fiziksel kontroller 1 2 3 4 Öğelerin gruplanması Öğelerin sıralanması
1- Isıtma tipi 2- Sıcaklık 1 3- Pişirme zamanı 4- Başlat 2 3 4

64 Fiziksel kontroller Öğelerin gruplanması Öğelerin sıralanması Süsleme
Farklı işlevler için farklı renkler İlişkili butonların çevresine çizgi

65 içindeki yazının ortalanması
Fiziksel kontroller Öğelerin gruplanması Öğelerin sıralanması Süsleme Hizalama Butonların içindeki yazının ortalanması

66 Fiziksel kontroller Öğelerin gruplanması Öğelerin sıralanması Süsleme
Hizalama Boş alan Gruplamaya yardım etmek için aralıklar

67 AFFORDANCES TEKRARLAMA ve PROTOTİPLEME

68 Affordances(Sağlarlık)
Bir nesnenin, kendisiyle bir şeyler yapılabilmesini sağlayan vasıfları anlamına geliyor. Örneğin camı kırabilirsiniz ya da kahve bardağını sapından tutup kaldırabilirsiniz. Elmayı ısırabilirsiniz ya da tutup atabilirsiniz. Sandalyeye oturabilirsiniz yada üzerine çıkıp bozulan ampülü değiştirebilirsiniz. Affordance‘ da belirleyici olan, nesneyle ne yapılabileceğini sadece sezgisel olarak anlayabiliyor olmamızdır. (Uyarıcı, bilgilendirici, anlamayı kolaylaştıran bir metin veya sözcük olmaksızın)

69 Affordances(Sağlarlık)
Bir bakıma güdüleme görevi de yapıyor. Ne algılıyorsan onu yapma eğiliminde oluyorsun. Örneğin;Yerdeki bir taş, bir fareye, bir kediye ve bir insana değişik sağlarlıklar (affordances) sunar. Taş fareye saklanılabilirlik sağlarlığını sunarken, aynı taş insan için fırlatılabilirlik sağlarlığı sunar. Bir nesne, değişik etmenlere değişik olanaklar sunar.

70 Affordances(Sağlarlık)

71

72 Tekrarlama ve Prototipleme
Prototip: Detaylandırma ve seri üretim aşamasına geçmeden önce üretilen örnek ürün. (Model) Özellikle kompleks ürünler için şarttır.

73 Tekrarlama ve Prototipleme

74 Tekrarlama ve Prototipleme
Olana kadar… Yılmak yok ! prototip değerlendir tasarım Yeniden tasarla oldu! tamam?

75 Tekrarlama ve Prototipleme
Neden Prototipleme Yapılır? Ürünün görsel ve işlevsel kontrolleri yapılır. Olabilecek tasarım hataları teşhis edilir. Birden fazla komponent içeren ürünlerin birbirlerine geçme detayları ve parçaların uyumu kontrol edilebilir. Prototipler, tasarım ekibi, imalat ekibi ve pazarlama ekibi arasındaki iletişimi ve ortak çalışma verimliliğini arttırır. Prototipin son hali seri üretimin yapılması için kalıp olur.

76 Kaynakça… Kitap Kaynakları… Human-Computer İnteraction
İnternet Kaynakları…