etkİleŞİm tasarim temellerİ

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 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önemiHacettepe Üniversitesi, Eğitim Fakültesi

Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü06532 Beytepe/ANKARA

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…

TASARIM

Tasarım

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?

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

yeri vardır.

Tasarım

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

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

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

Ö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

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ı

İ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…

TASARIM SÜRECİ

Ne isteniyor?

Analizler

TasarımGerçekleştir ve harekete geçir

Ön ürün

GörüşmelerEthnography

Elimizde ne var?Ne isteniyor?

Yönergelerilkeler

Diyalogişaretlemeleri

Kesin belirleme

Bulguların değerlendirilmesi

Senaryolarİçerik analizleri

Tasarım Süreci…

İ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…

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!!

KULLANICI MERKEZİ

Kullanıcılarınızı bilinKişilikleriKültürleri

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

Kullanıcılarınızı Bilin

Temsil edebilecek bir kullanıcı kullanın. Ahmet ne düşünür?

Ayrıntılar sorundur Onu gerçek yapar.

Kişilik…

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…

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

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

Scenario for proposed movie player

Senaryolar…

NAVİGASYON…

Araçlarını belirle Butonlar, yazılar, menüler

Ekran ve Pencereler(Mantıksal gruplama) Navigasyon tasarımı uygulaması Dış ortamlar

Basamaklar…

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…

Araçları belirleme Butonlar, numaralar, renk, ışık

Ekran yerleşimi Navigasyon tasarımı

Aracın modları Ortam

Gerçek dünya

Fiziksel araçlar…

Bu uygulamayı kim kullanacak? Nasıl düşünebilirler? Bununla ne yapacaklar?

Başlarken 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

Yapılanma üzerine düşünün

Yerel Yapı

Bir sayfanın yapılanması üzerine…

hedefbaşlangıç

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

web sitesiAna menü İkinci menü

Bu sayfa

Linkleri devam ettirin

Neredesin? - Ekmek kırıntıları

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…

Global yapı

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

Sistem

Bilgi ve Yardım Yönetim Mesajlar

Kullanıcı Ekle Kullanıcı Kaldır

Hiyerarşik…

Uygulamanın kısımları Ekranlar ya da ekran grupları

Tipik fonksiyonel dağılımSistem

Bilgi ve Yardım Yönetim Mesajlar

Kullanıcı Ekle Kullanıcı Kaldır

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

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…

Ana Ekran KullanıcıKaldır Onayla

Kullanıcı Ekle

Ağ Diyagramları

Kapsamlı Durum

Diğer uygulamalarla etkileşim

Platform standartları, tutarlılık

Stil konuları

Kes, kopyala, yapıştır…..

Fonksiyonel konular

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

Navigasyon konuları

Ekran Tasarımı ve Yerleşim

Temel İlkeler Gruplandırma, Yapılandırma, Sıralama Hizalama Beyaz Alanın Kullanımı

Ekran tasarımı ve Yerleşim

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 fiyat10 kutu 7 3.71 25.97 …… … … …

Gruplama ve yapılandırma

Mantıksal öğeleri gruplamak için kutuları kullanın. Başlık ve önemli yerleri belirtmek için fontları kullanın.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Grup ve Öğelerin Sıralanması-Süsleme

Yazılarınızı soldan sağa doğru yani; sol tarafa hizalayın.

Ayşe KULİN, UmutHayat akan bir sudur.

Ö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

Muhittin ÖzgürŞaziye SonsesRüknettin KaygusuzBediha SıtkısıyrılmışHayati Tehlike Muhittin Özgür

Şaziye SonsesRüknettin KaygusuzBediha SıtkısıyrılmışHayati Tehlike

Özgür, MuhittinSonses, ŞaziyeKaygusuz, RüknettinSıtkısıyrılmış, BedihaTehlike, Hayati

Soyadlarını ayırt etmeyi kolaylaştırın.

Grup ve Öğelerin Sıralanması-Hizalama - isimler

Sayılardan hangisi en büyük?

532.56179.3

256.31715

73.9481035

3.142497.625

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.5832502.56 432.935 2.0175 652.87 56.34

Grup ve Öğelerin Sıralanması-Hizalama - numaralar

Aralıkları ayırmak zordur.

bisküvi 75şekerleme 120çikolata 35meyveli sakız 27meyve suyu 85

Grup ve Öğelerin Sıralanması-Çok sütunlar

İkili satır renkleri satır.

Çizgisel yolları kullanın.

Ya da “adi” hizalama yapın.

bisküvi 75şekerleme 120

çikolata 35meyveli sakız 27meyve suyu 85

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

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

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

Öğelerin gruplanması;

Yiyecek modu

Pişirme zamanı

Buz çözme ayarları

Fiziksel kontroller

Öğelerin gruplanması Öğelerin sıralanması

4- Başlat2

2- Sıcaklık

3- Pişirme zamanı1

1- Isıtma tipi

Fiziksel kontroller

Öğelerin gruplanması Öğelerin sıralanması Süsleme

Farklı işlevler için farklı renkler

İlişkili butonların çevresine çizgi

Fiziksel kontroller

Öğelerin gruplanması Öğelerin sıralanması Süsleme Hizalama

Butonların içindeki yazının

ortalanması

Fiziksel kontroller

Öğelerin gruplanması Öğelerin sıralanması Süsleme Hizalama Boş alan

Gruplamaya yardım etmek için aralıklar

Fiziksel kontroller

AFFORDANCES TEKRARLAMA ve PROTOTİPLEME

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)

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.

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

Olana kadar… Yılmak yok !

prototip değerlendirtasarım

Yeniden tasarla

oldu!tamam?

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.

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

İnternet Kaynakları… 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/rome2003/docs/rome-ch05.pdf

etkİleŞİm tasarim temellerİ

Documents

sosyal hİzmet etkİleŞİm topluluĞu

tasarim kurallari

sınıf içi iletişim ve etkileşim

tasarim Çikacak

verİ yÖnetİmİnde araŞtirmacilarla etkİleŞİm...veri...

İngilizcenin temelleri

web tasarim temellerİ

ağ temelleri

dış yönlü etkileşim oyun kitabı -...

tasarim nedir

mediamind dwell gerçek etkileşim

masaüstü uygulamasından asp.net sayfalarıyla etkileşim

programlama temellerİ

dış dönlü etkileşim oyun kitabı

biorezonansın temelleri

lineris sap crm etkileşim merkezi Çözümü

sanatta etkİleŞİm - dergipark

dolgunun temelleri

etkileşim Çağında satışın yeni kuralları

tbp101 kbÜ programlama temelleri - elenium.net · 1...