Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

BTÖ - 411 İnsan - Bilgisayar Etkileşimi ETKİLEŞİM TASARIM TEMELLERİ Ders Adı : BTÖ-411 İnsan Bilgisayar Etkileşimi Ders Sorumlusu : Yrd. Doç. Dr. Hakan.

Benzer bir sunumlar


... konulu sunumlar: "BTÖ - 411 İnsan - Bilgisayar Etkileşimi ETKİLEŞİM TASARIM TEMELLERİ Ders Adı : BTÖ-411 İnsan Bilgisayar Etkileşimi Ders Sorumlusu : Yrd. Doç. Dr. Hakan."— Sunum transkripti:

1

2 BTÖ İnsan - Bilgisayar Etkileşimi 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ü Beytepe/ANKARA

3 BTÖ İnsan - Bilgisayar Etkileşimi  Tasarım  Tasarım Süreci  Senaryolar  Navigasyon Tasarımı  Yerel yapı  Global yapı  Ekran Tasarımı ve Yerleşimi  Affordances  Tekrarlama ve Prototipleme İçindekiler…

4 TASARIM

5 BTÖ İnsan - Bilgisayar Etkileşimi Tasarım

6 BTÖ İnsan - Bilgisayar Etkileşimi 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. Tasarım Nedir?

7 BTÖ İnsan - Bilgisayar Etkileşimi 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. Tasarım

8 BTÖ İnsan - Bilgisayar Etkileşimi "Doğal olarak meydana gelmemiş her şey aslında bir şekilde tasarlanmıştır.."

9 BTÖ İnsan - Bilgisayar Etkileşimi 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 Tasarım Öğeleri

10 BTÖ İnsan - Bilgisayar Etkileşimi 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 ??? $ Tasarım Öğeleri

11 BTÖ İnsan - Bilgisayar Etkileşimi Ö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. Tasarım Öğeleri

12 BTÖ İnsan - Bilgisayar Etkileşimi 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ı Tasarımın Altın Kuralı

13 BTÖ İnsan - Bilgisayar Etkileşimi İ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. Hatasız Kul Olmaz…

14 TASARIM SÜRECİ

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

16 BTÖ İnsan - Bilgisayar Etkileşimi İ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 Basamaklar…

17 BTÖ İnsan - Bilgisayar Etkileşimi 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 …ancak bunların hepsini nasıl yapabilirim!!

18 KULLANICI MERKEZİ  Kullanıcılarınızı bilin  Kişilikleri  Kültürleri

19 BTÖ İnsan - Bilgisayar Etkileşimi Onlar kim? Muhtemelen siz değilsiniz! Onlarla konuşun Onları izleyin Hayal gücünüzü kullanın Kullanıcılarınızı Bilin

20 BTÖ İnsan - Bilgisayar Etkileşimi Temsil edebilecek bir kullanıcı kullanın.  Ahmet ne düşünür? Ayrıntılar sorundur  Onu gerçek yapar. Kişilik…

21 BTÖ İnsan - Bilgisayar Etkileşimi 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. Kültürel Araştırma…

22 SENARYOLAR

23 BTÖ İnsan - Bilgisayar Etkileşimi 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 Senaryolar…

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

25 BTÖ İnsan - Bilgisayar Etkileşimi Scenario for proposed movie player Senaryolar…

26 NAVİGASYON…

27 BTÖ İnsan - Bilgisayar Etkileşimi Araçlarını belirle  Butonlar, yazılar, menüler Ekran ve Pencereler(Mantıksal gruplama) Navigasyon tasarımı uygulaması Dış ortamlar Basamaklar …

28 BTÖ İnsan - Bilgisayar Etkileşimi 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 Web siteleri…

29 BTÖ İnsan - Bilgisayar Etkileşimi Araçları belirleme  Butonlar, numaralar, renk, ışık Ekran yerleşimi Navigasyon tasarımı  Aracın modları Ortam  Gerçek dünya Fiziksel araçlar…

30 BTÖ İnsan - Bilgisayar Etkileşimi Bu uygulamayı kim kullanacak? Nasıl düşünebilirler? Bununla ne yapacaklar? Başlarken düşünün?

31 BTÖ İnsan - Bilgisayar Etkileşimi Yerel yapı  Bir sayfanın yapılanması üzerine Genel yapı  Sitenin yapısı, sayfalar arası geçiş Kapsamlı durum  Diğer uygulamalarla ilişki Yapılanma üzerine düşünün

32 Yerel Yapı Bir sayfanın yapılanması üzerine…

33 BTÖ İnsan - Bilgisayar Etkileşimi hedef başlangıç

34 BTÖ İnsan - Bilgisayar Etkileşimi 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 Dört olgu üzerinde durun

35 BTÖ İnsan - Bilgisayar Etkileşimi

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

37 BTÖ İnsan - Bilgisayar Etkileşimi 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 Modlar…

38 Global yapı Sitenin yapısı sayfalar arası geçiş

39 BTÖ İnsan - Bilgisayar Etkileşimi Sistem Bilgi ve YardımYönetimMesajlar Kullanıcı EkleKullanıcı Kaldır Hiyerarşik…

40 BTÖ İnsan - Bilgisayar Etkileşimi Uygulamanın kısımları  Ekranlar ya da ekran grupları Tipik fonksiyonel dağılım Sistem Bilgi ve YardımYönetimMesajlar Kullanıcı EkleKullanıcı Kaldır

41 BTÖ İnsan - Bilgisayar Etkileşimi 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ış Yönlendirme hiyerarşisi

42 BTÖ İnsan - Bilgisayar Etkileşimi Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle Ağ Diyagramları

43 BTÖ İnsan - Bilgisayar Etkileşimi 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 Ağ Diyagramları

44 Kapsamlı Durum Diğer uygulamalarla etkileşim

45 BTÖ İnsan - Bilgisayar Etkileşimi  Platform standartları, tutarlılık Stil konuları

46 BTÖ İnsan - Bilgisayar Etkileşimi  Kes, kopyala, yapıştır….. Fonksiyonel konular

47 BTÖ İnsan - Bilgisayar Etkileşimi  Uygulamalar arası geçiş  Gömülü uygulamalar(hava durumu)  Farklı uygulamalara erişim(E-posta, ikonlar..) Navigasyon konuları

48 Ekran Tasarımı ve Yerleşim

49 BTÖ İnsan - Bilgisayar Etkileşimi  Temel İlkeler  Gruplandırma, Yapılandırma, Sıralama  Hizalama  Beyaz Alanın Kullanımı Ekran tasarımı ve Yerleşim

50 BTÖ İnsan - Bilgisayar Etkileşimi Mantıksal  Fiziksel Ö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/öğe fiyat 10 kutu …… … … … Gruplama ve yapılandırma

51 BTÖ İnsan - Bilgisayar Etkileşimi Mantıksal öğeleri gruplamak için kutuları kullanın. Başlık ve önemli yerleri belirtmek için fontları kullanın. ABCDEF GHI JKLM NOPQRSTUVWXYZ Grup ve Öğelerin Sıralanması -Süsleme

52 BTÖ İnsan - Bilgisayar Etkileşimi Yazılarınızı soldan sağa doğru yani;  sol tarafa hizalayın. 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. Biraz sıkıcıdır ancak okunur. Grup ve Öğelerin Sıralanması -Hizalama - metin

53 BTÖ İnsan - Bilgisayar Etkileşimi 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 Özgür, Muhittin Sonses, Şaziye Kaygusuz, Rüknettin Sıtkısıyrılmış, Bediha Tehlike, Hayati  Soyadlarını ayırt etmeyi kolaylaştırın. Grup ve Öğelerin Sıralanması -Hizalama - isimler

54 BTÖ İnsan - Bilgisayar Etkileşimi Sayılardan hangisi en büyük? Grup ve Öğelerin Sıralanması -Hizalama - numaralar

55 BTÖ İnsan - Bilgisayar Etkileşimi Görsel olarak: uzun numara = büyük numara, Ondalık sayıları sıralayın ya da sayıları hizalayın Grup ve Öğelerin Sıralanması -Hizalama - numaralar

56 BTÖ İnsan - Bilgisayar Etkileşimi Aralıkları ayırmak zordur. bisküvi75 şekerleme120 çikolata35 meyveli sakız27 meyve suyu 85 Grup ve Öğelerin Sıralanması -Çok sütunlar

57 BTÖ İnsan - Bilgisayar Etkileşimi İkili satır renkleri satır. bisküvi75 şekerleme120 çikolata35 meyveli sakız27 meyve suyu 85 Grup ve Öğelerin Sıralanması -Çok sütunlar

58 BTÖ İnsan - Bilgisayar Etkileşimi Çizgisel yolları kullanın. bisküvi75 şekerleme120 çikolata35 meyveli sakız27 meyve suyu 85 Grup ve Öğelerin Sıralanması -Çok sütunlar

59 BTÖ İnsan - Bilgisayar Etkileşimi Ya da “adi” hizalama yapın. bisküvi 75 şekerleme 120 çikolata 35 meyveli sakız 27 meyve suyu 85 Grup ve Öğelerin Sıralanması -Çok sütunlar

60 BTÖ İnsan - Bilgisayar Etkileşimi Boşluk Kullanımı -Dağıtmak için boşluk

61 BTÖ İnsan - Bilgisayar Etkileşimi Boşluk Kullanımı -Karmaşık yapılar için boşluk

62 BTÖ İnsan - Bilgisayar Etkileşimi Boşluk Kullanımı -Vurgulamak için boşluk

63 BTÖ İnsan - Bilgisayar Etkileşimi Öğelerin gruplanması; Yiyecek modu Pişirme zamanı Buz çözme ayarları Fiziksel kontroller

64 BTÖ İnsan - Bilgisayar Etkileşimi Öğelerin gruplanması Öğelerin sıralanması 4 4- Başlat 2 2- Sıcaklık 3 3- Pişirme zamanı 1 1- Isıtma tipi Fiziksel kontroller

65 BTÖ İnsan - Bilgisayar Etkileşimi Öğelerin gruplanması Öğelerin sıralanması Süsleme Farklı işlevler için farklı renkler İlişkili butonların çevresine çizgi Fiziksel kontroller

66 BTÖ İnsan - Bilgisayar Etkileşimi Öğelerin gruplanması Öğelerin sıralanması Süsleme Hizalama Butonların içindeki yazının ortalanması Fiziksel kontroller

67 BTÖ İnsan - Bilgisayar Etkileşimi Öğelerin gruplanması Öğelerin sıralanması Süsleme Hizalama Boş alan Gruplamaya yardım etmek için aralıklar Fiziksel kontroller

68 AFFORDANCES TEKRARLAMA ve PROTOTİPLEME

69 BTÖ İnsan - Bilgisayar Etkileşimi 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) Affordances(Sağlarlık)

70 BTÖ İnsan - Bilgisayar Etkileşimi 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. Affordances(Sağlarlık)

71 BTÖ İnsan - Bilgisayar Etkileşimi Affordances(Sağlarlık)

72 BTÖ İnsan - Bilgisayar Etkileşimi

73 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. Tekrarlama ve Prototipleme

74 BTÖ İnsan - Bilgisayar Etkileşimi Tekrarlama ve Prototipleme

75 BTÖ İnsan - Bilgisayar Etkileşimi Olana kadar… Yılmak yok ! prototipdeğerlendir tasarım Yeniden tasarla oldu! tamam? Tekrarlama ve Prototipleme

76 BTÖ İnsan - Bilgisayar Etkileşimi 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. Tekrarlama ve Prototipleme

77 BTÖ İnsan - Bilgisayar Etkileşimi Kaynakça… Kitap Kaynakları… Human-Computer İnteraction İnternet Kaynakları… html 235.html


"BTÖ - 411 İnsan - Bilgisayar Etkileşimi ETKİLEŞİM TASARIM TEMELLERİ Ders Adı : BTÖ-411 İnsan Bilgisayar Etkileşimi Ders Sorumlusu : Yrd. Doç. Dr. Hakan." indir ppt

Benzer bir sunumlar


Google Reklamları