1 / 76

ETKİLEŞİM TASARIM TEMELLERİ

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

zarek
Download Presentation

ETKİLEŞİM TASARIM TEMELLERİ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

  35. 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

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

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

  38. 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

  39. 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ış

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

  41. 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…

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

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

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

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

  46. Ekran Tasarımı ve Yerleşim

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

  48. Ö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

  49. 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.

More Related