ETKLEM TASARIM TEMELLER Ders Ad BT411 nsan Bilgisayar
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 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
İçindekiler… Tasarım Süreci. Senaryolar. Navigasyon Tasarımı § Yerel yapı § Global yapı. Ekran Tasarımı ve Yerleşimi. Affordances. Tekrarlama ve Prototipleme. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
TASARIM
Tasarım BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tasarım Nedir? n n 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. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tasarım işinde ; n Faklılıkları bulma n Hayal kurma n Sorgulama n Yaratıcı düşünme n Eleştirel düşünme n Akıl yürütme gibi üst düzey zihinsel süreçlerin tasarım yapmada önemli bir yeri vardır. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
"Doğal olarak meydana gelmemiş her şey aslında bir şekilde tasarlanmıştır. . " BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tasarım Öğeleri n Hedef q Tasarımın amacı ne? n Bilgisayar geliştirmek q Kim için? n Görme engelliler için q Ne istiyorlar? n Rahat bir şekilde kullana bilecekleri bilgisayar BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tasarım Öğeleri n Sınırlılıklar q Hangi materyali kullanmalıyız? n Magneclay( yağ bazlı madde), Braille alfabesi, Ses cihazı. . q Standartlarımız neler? n 9 düğme(braille alfabesi) , Hareketli yüzey, 2 D-3 D Görüntü… q Süre ve maliyet? n ? ? ? Yıl ? ? ? $ BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tasarım Öğeleri n Ödünler q Hedefler ya da sınırlılıkların karşılanması için hangilerinden vazgeçilecek? n Tasarımı gerçekleştirmek için imkanlar neticesinde bazı hedeflerden ödün vermek zorunda kalabilirsiniz. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
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ı BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Hatasız Kul Olmaz… n İnsanlar hata yapabilirler ancak sistemler bu hataları ve bu hataların sonuçlarını azaltıcı yönde tasarlanmalılardır. n İ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. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
TASARIM SÜRECİ
Tasarım Süreci… Ne isteniyor? Görüşmeler Ethnography Senaryolar İçerik analizleri Yönergeler ilkeler Analizler Tasarım Elimizde ne var? Ne isteniyor? Diyalog işaretlemeleri Bulguların değerlendirilmesi Ön ürün BTÖ - 411 İnsan - Bilgisayar Etkileşimi Kesin belirleme Gerçekleştir ve harekete geçir
Basamaklar… n n n İhtiyaçlar q Ne var? Ne isteniyor? … Analizler q Düzenleme ve anlama Tasarım q Ne yapılacak nasıl kararlaştırılacak Tekrarlama ve Ön Ürünler q Gerçekten neye ihtiyaç olduğunu bulmak! Uygulama ve Harekete Geçirme BTÖ - 411 İnsan - Bilgisayar Etkileşimi
…ancak bunların hepsini nasıl yapabilirim!! n Sınırlı zaman “trade-off” tasarlayın n kullanılabilirlik? q Problemlerin bulunması ve çözümü? q Ne çözeceğine karar vermek? n Muhteşem sistemler kötü tasarlanır q İyiye tasarıma fazla emek harcamak BTÖ - 411 İnsan - Bilgisayar Etkileşimi
KULLANICI MERKEZİ §Kullanıcılarınızı §Kişilikleri §Kültürleri bilin
Kullanıcılarınızı Bilin n n Onlar kim? Muhtemelen siz değilsiniz! Onlarla konuşun Onları izleyin Hayal gücünüzü kullanın BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Kişilik… n n Temsil edebilecek bir kullanıcı kullanın. q Ahmet ne düşünür? Ayrıntılar sorundur q Onu gerçek yapar. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Kültürel Araştırma… n Doğrudan inceleme q Bazen zordur n evde n Psikiyatrik sabırlar, … n Araştırma paketleri q Cevaplama öğeleri n Duvardan dinlemek için bardak, kamera q İnsanlara kendi dünyalarını açmaları için verilenler onlara ne anlamlı geliyorsa onu kaydederler. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
SENARYOLAR
Senaryolar… n Tasarım için hikayeler q Diğerleri ile etkileşime geç q Diğer modellere geçerliğini denetle q Dinamikleri anla n Doğrusallık q Zaman doğrusaldır- hayatımız doğrusaldır q Ancak alternatifler göstermez BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Senaryolar… Senaryolar – Sisteme Doğrusal Bir Yol Avantaj q Hayat ve zaman doğrusaldır q Anlamak kolaydır (hikayeler doğaldır) q Somuttur Dezavantaj q Seçenek yoktur, dallanmalar yoktur, özel koşullar yoktur. q İstemeden yapılan hareketleri kaçırır. Öyleyse q Birden fazla senaryo kullanın q Birden fazla yöntem kullanın BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Senaryolar… n Scenario for proposed movie player BTÖ - 411 İnsan - Bilgisayar Etkileşimi
NAVİGASYON…
Basamaklar… n n Araçlarını belirle q Butonlar, yazılar, menüler Ekran ve Pencereler(Mantıksal gruplama) Navigasyon tasarımı uygulaması Dış ortamlar BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Web siteleri… n n Araçları belirleme q Elemanlar, taglar, etiketler Ekran ve Pencereler q Benzer menülerin gruplanması Navigasyon q Sitenin yapılandırılması Dış ortamlar q Web tarayıcı, dış linkler BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Fiziksel araçlar… n n Araçları belirleme q Butonlar, numaralar, renk, ışık Ekran yerleşimi Navigasyon tasarımı q Aracın modları Ortam q Gerçek dünya BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Başlarken düşünün? n n n Bu uygulamayı kim kullanacak? Nasıl düşünebilirler? Bununla ne yapacaklar? BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Yapılanma üzerine düşünün n Yerel yapı q Bir sayfanın yapılanması üzerine Genel yapı q Sitenin yapısı, sayfalar arası geçiş Kapsamlı durum q Diğer uygulamalarla ilişki BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Yerel Yapı Bir sayfanın yapılanması üzerine…
hedef başlangıç BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Dört olgu üzerinde durun n n 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 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Neredesin? - Ekmek kırıntıları Ana menü İkinci menü web sitesi Bu sayfa Linkleri devam ettirin BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Modlar… n n Yanlışlıkla aramaları engellemek için kilitleyin… q Kilidi kaldırmak için - ‘c’ + ‘yes’ tuşlarına basın q Birçok defa yapılır. Eğer kilit unutlursa q Cepte “yes” tuşuna basarsa q Telefon rehberine gider q Telefon rehberinde… ‘c’ – rehberi sil? ‘yes’ – Onayla BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Global yapı Sitenin yapısı sayfalar arası geçiş
Hiyerarşik… Sistem Bilgi ve Yardım Yönetim Kullanıcı Ekle Mesajlar Kullanıcı Kaldır BTÖ - 411 İnsan - Bilgisayar Etkileşimi
n Uygulamanın kısımları q Ekranlar ya da ekran grupları n Tipik fonksiyonel dağılım Sistem Bilgi ve Yardım Yönetim Kullanıcı Ekle BTÖ - 411 İnsan - Bilgisayar Etkileşimi Kullanıcı Kaldır Mesajlar
Yönlendirme hiyerarşisi n Derinlik zordur! n Miller’ in 7 ± 2 kuramı q Kısa süreli bellek, menü boyutu değil n En Uygun? q Her ekranda birçok öğe q Ancak ekran içerisinde yapılandırılmış BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Ağ Diyagramları Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Ağ Diyagramları n n 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 Kullanıcı Ekle BTÖ - 411 İnsan - Bilgisayar Etkileşimi Onayla
Kapsamlı Durum Diğer uygulamalarla etkileşim
Stil konuları q Platform standartları, tutarlılık BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Fonksiyonel konular q Kes, kopyala, yapıştır…. . BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Navigasyon konuları q q q Uygulamalar arası geçiş Gömülü uygulamalar(hava durumu) Farklı uygulamalara erişim(E-posta, ikonlar. . ) BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Ekran Tasarımı ve Yerleşim
Ekran tasarımı ve Yerleşim § Temel İlkeler § Gruplandırma, Yapılandırma, Sıralama § Hizalama § Beyaz Alanın Kullanımı BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Gruplama ve yapılandırma Mantıksal Ödeme ayrıntıları: İsim Adres: … Kredi Kart no Sıralama ayrıntıları: öğe 10 kutu …… Fiziksel Dağıtım ayrıntıları: isim Adres: … Dağıtım zamanı sayı 7 fiyat/öğe fiyat 3. 71 25. 97 … … … BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Süsleme n n Mantıksal öğeleri gruplamak için kutuları kullanın. Başlık ve önemli yerleri belirtmek için fontları kullanın. ABCDEFGHIJKLM NOPQRSTUVWXYZ BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Hizalama - metin 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 Biraz sıkıcıdır ancak okunur. Özel efektler için iyidir ama ayırt etmek zordur. BTÖ - 411 İnsan - Bilgisayar Etkileşimi Ayşe KULİN, Umut Hayat akan bir sudur. Alfa Yayınları © 2008
Grup ve Öğelerin Sıralanması -Hizalama - isimler Soyadlarını ayırt etmeyi kolaylaştırın. Muhittin Özgür Şaziye Sonses Rüknettin Kaygusuz Bediha Sıtkısıyrılmış Hayati Tehlike Muhittin Şaziye Rüknettin Bediha Hayati Özgür, Muhittin Sonses, Şaziye Kaygusuz, Rüknettin Sıtkısıyrılmış, Bediha Tehlike, Hayati Özgür Sonses Kaygusuz Sıtkısıyrılmış Tehlike BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Hizalama - numaralar Sayılardan hangisi en büyük? 532. 56 179. 3 256. 317 15 73. 948 1035 3. 142 497. 625 6 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
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. 627. 865 1. 005763 382. 583 2502. 56 432. 935 2. 0175 652. 87 56. 34 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Çok sütunlar Aralıkları ayırmak zordur. bisküvi şekerleme çikolata meyveli sakız meyve suyu 75 120 35 27 85 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Çok sütunlar İkili satır renkleri satır. bisküvi şekerleme çikolata meyveli sakız meyve suyu 75 120 35 27 85 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Çok sütunlar Çizgisel yolları kullanın. bisküvi şekerleme çikolata meyveli sakız meyve suyu 75 120 35 27 85 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Grup ve Öğelerin Sıralanması -Çok sütunlar Ya da “adi” hizalama yapın. bisküvi 75 şekerleme 120 çikolata 35 meyveli sakız 27 meyve suyu 85 BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Boşluk Kullanımı -Dağıtmak için boşluk BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Boşluk Kullanımı -Karmaşık yapılar için boşluk BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Boşluk Kullanımı -Vurgulamak için boşluk BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Fiziksel kontroller Öğelerin gruplanması; Buz çözme ayarları Yiyecek modu Pişirme zamanı BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Fiziksel kontroller n Öğelerin gruplanması n Öğelerin sıralanması 1 - Isıtma tipi 2 - Sıcaklık 1 3 - Pişirme zamanı 4 - Başlat 2 3 BTÖ - 411 İnsan - Bilgisayar Etkileşimi 4
Fiziksel kontroller n Öğelerin gruplanması n Öğelerin sıralanması n Süsleme Farklı işlevler için farklı renkler İlişkili butonların çevresine çizgi BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Fiziksel kontroller n Öğelerin gruplanması n Öğelerin sıralanması n Süsleme n Hizalama Butonların içindeki yazının ortalanması BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Fiziksel kontroller n Öğelerin gruplanması n Öğelerin sıralanması n Süsleme n Hizalama n Boş alan Gruplamaya yardım etmek için aralıklar BTÖ - 411 İnsan - Bilgisayar Etkileşimi
AFFORDANCES TEKRARLAMA ve PROTOTİPLEME
Affordances(Sağlarlık) n Bir nesnenin, kendisiyle bir şeyler yapılabilmesini sağlayan vasıfları anlamına geliyor. n Ö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. n 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) BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Affordances(Sağlarlık) n n n Bir bakıma güdüleme görevi de yapıyor. q 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. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Affordances(Sağlarlık) BTÖ - 411 İnsan - Bilgisayar Etkileşimi
BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tekrarlama ve Prototipleme n Prototip: Detaylandırma ve seri üretim aşamasına geçmeden önce üretilen örnek ürün. (Model) n Özellikle kompleks ürünler için şarttır. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tekrarlama ve Prototipleme BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Tekrarlama ve Prototipleme n Olana kadar… Yılmak yok ! tamam? tasarım prototip değerlendir Yeniden tasarla BTÖ - 411 İnsan - Bilgisayar Etkileşimi oldu!
Tekrarlama ve Prototipleme n Neden Prototipleme Yapılır? q q q Ü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. BTÖ - 411 İnsan - Bilgisayar Etkileşimi
Kaynakça… Kitap Kaynakları… n Human-Computer İnteraction İnternet Kaynakları… n n n http: //www. plastosel. com/ug-objet-prototip. html http: //end. aytasarim. com/index. php? option=com_content&task=view&id=49&Itemid=1 http: //www. zecinteraktif. com/e-destek/sistem-ve-yazilim/yazilim-gelistirme-ve-prototip 235. html http: //www. zaplat. com/etiket/prototip http: //tr. wikipedia. org/wiki/Prototip http: //www. comp. lancs. ac. uk/~dixa/teaching/rome 2003/docs/rome-ch 05. pdf BTÖ - 411 İnsan - Bilgisayar Etkileşimi
- Slides: 76