Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ Bölüm 5 Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ

Etkileşim Tasarım Temelleri nedir, amaçlar, kısıtlamalar tasarım süreci Ne zaman ne olur? kullanıcılar Kimdir bunlar?, Ne seveler? senaryolar Tasarımın hikayeleri navigasyon(dolaşma) Sistem içerisinde yolunuzu bulabilmek tekrarlarma ve ön ürünler İlk seferinde asla elde edemezsiniz.

Etkileşimler ve müdahaleler Etkileşimi tasarlamak arayüzlerden ibaret değildir. not just the immediate interaction Ofisteki zımba– teknoloji etkileşim çeşidini değiştirmekte manuel: yaz, çıktı al, zımbala, yaz, çıktı al, zımbala, … elektrik: yaz, çıktı al, yaz, çıktı al, …, zımbala designing interventions not just artefacts not just the system, but also … documentation, manuals, tutorials what we say and do as well as what we make

Tasarım nedir?

Sınırlılıklar içerisinde amaca ulaşmaktır. Tasarım nedir ? Sınırlılıklar içerisinde amaca ulaşmaktır. hedef - amaç Bu kimler için?, onlar bunu ne için ister? Sınırlılıklar materyal, platformlar trade-off(ödün vermek)

Tasarımın altın kuralı Materyallerinizi anlayın.

İnsan- Bilgisayar Etkileşimi İçin Mateyallerinizi anlayın. Bilgisayarlarınızı anlayın. sınırlılıkları, kapasiteleri, araçları, platformları İnsanları anlayın psikolojik, sosyal bakış açılarını İnsan hataları Ve onların etkileşimini…

Hata yapmak insana aittir. Kaza raporları… Uçak kazası, endüstri kazaları, hastane hatası soruşturmalar … kabahatler … ‘insan hatası’ ancak … Beton lentolar üzerine fazla ağırlık binince kırılır. Kabahat lento hatası mı? … hayır – tasarım hatası bizler betonun baskı altında nasıl davrandığını ve kırılacağını biliyoruz. İnsan hatası normaldir. İnsanın stres altında nasıl davrandığını biliyoruz. Tasarım bunun için! İnsana en azından fiziksel materyallere davrandığınız kadar iyi davranın.

Ana Mesaj… Kullanıcı

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şaretlemleri Kesin belirleme Bulguların değerlendirilmesi Senaryolar İçerik analizleri Ne isteniyor? Analizler Tasarım Gerçekleştir ve harekete geçir Ön ürün

Basamaklar … ihtiyaçlar analizler tasarım tekrarlama ve ön ürünler 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 Standartların dışına çıkmak.

… 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  

Kullanıcılarınızı bilin kişilikleri kültürleri Kullanıcı merkezi Kullanıcılarınızı bilin kişilikleri kültürleri

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

Kişilik “Örnek” bir kullanıcının açıklaması Gerçek bir insan olmak zorunda değil Temsil edebilecek bir kullanıcı kullanın. Ahmet ne düşünür? Ayrıntılar sorundur Onu gerçek yapar.

Kültürel Araştırma Doğrudan inceleme Araştırma paketleri kullan… 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. kullan… Görüşmeleri bildir, hedeflerini bildir

Tasarım hikayeleri Kullan ve Yeniden kullan Senaryolar Tasarım hikayeleri Kullan ve Yeniden kullan

Senaryolar… Tasarım için hikayeler Doğrusallık 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 … Kullanıcılar ne yapmak isteyecek? Adım adım başlangıç Ne görebilirler ?(taslaklar, ekran görüntüleri) Ne yapabilirler ?(klavye, fare vs.) Ne düşünüyorlar? Tasarım boyunca kullan ve yeniden kullan

… derinlikleri keşfedin Etkileşimi keşfedin Ne zaman ne olur? Bilişi keşfedin Kullanıcılar ne düşünüyor? Mimariyi keşfedin İçeride neler oluyor?

Senaryoları Kullanın… Diğerleri ile iletişime geçmek için Tasarımcı,kullanıcı Diğer modellerin geçerliği sorgulamak için Onu diğer modellere karşı ‘yürütün’ Dinamikleri açığa çıkarın Ekran çıktıları – görünüş senaryo – davranış

Doğrusallık 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

Yerel yapılanma– sadece ekran Global yapılanma– tüm site start Navigasyon tasarımı Yerel yapılanma– sadece ekran Global yapılanma– tüm site

Basamaklar Kütüphane seçenekleri Ekran tasarımı Menüler, butonlar vs. Ekran tasarımı Navigasyon tasarım uygulaması Ortam Diğer uygulamalar

Web Sitesi… Kütüphane Seçenekleri Ekran Tasarımı Navigasyon Tasarımı Ortam Elemanlar ve taglar <a href=“...”> Sayfa tasarımı Site yapılandırması web, tarayıcı, dış linkler

Fiziksel Araçlar Kütüphane Seçenekleri Ekran Tasarımı Navigasyon Tasarımı Ortam Kontroller Butonlar, rakamlıklar Fiziksel yerleşim Aracın modları Gerçek dünya

Yapılanma üzerine düşünün Ekran içerisinde sonra ... Yerel Bu ekrandan dışarı bakış.. Global Site yapılanması, sayfalar arası geçiş Kapsamlı durum Diğer uygulamalarla ilişki

Bir ekrandan dışarıya bakış Yerel Bir ekrandan dışarıya bakış

Hedef arayışı hedef başlangıç

Hedef arayışı hedef başlangıç Sadece yerel bilgi ile işler...

Hedef arayışı hedef başlangıç … fakat hedefe ulaşabilir.

Hedef arayışı hedef başlangıç … bu eğrilikleri yok etmeye çalışın!

Dört Altın Kural Nerede olduğunu bilmek Ne yapabileceğini bilmek Nereye gidiyor olduğunu bilmek Veya ne olacak Nereye gelmiş durumdasın Veya ne yapmış durumdasın

Neredesin?– ekmek kırıntıları(breadcrumbs) Tüm web site hiyerarşisindeki yolları gösterin. Ana menü İkinci menü web sitesi Bu sayfa Linkleri devam ettirin

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

Ekranlar arası Uygulama İçerisinde Glabal Ekranlar arası Uygulama İçerisinde

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

Hiyerarşik diyagram Uygulamanın kısımları Tipik fonksiyonel dağılım 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

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ış see /e3/online/menu-breadth/

Ağ diyagramları Sistem süresince farklı yollar gösterin. Ana Ekran Kullanıcı Kaldır Onayla Ekle Sistem süresince farklı yollar gösterin.

Ağ diyagramları Ne neye öncülük eder? Ne zaman ne olur? Dallanmaları içerir? Daha fazla görevlendirme… Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle

Uygulamalar arası Ve arkası... Kapsamlı durum Uygulamalar arası Ve arkası...

Kapsamlı durum… Stil konuları: Fonksiyonel konular Navigasyon konuları platform standartları, tuttarlılık Fonksiyonel konular Kes ve yapıştır Navigasyon konuları Gömülü uygulamalar Diğer uygulamalara erişim … web

Ekran Tasarımı ve Yerleşim Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  Ekran Tasarımı ve Yerleşim Temel İlkeler Gruplandırma, Yapılandırma, Sıralama Hizalama Beyaz alanın kullanımı ABCDEFGHIJKLM NOPQRSTUVWXYZ

Temel İlkeler Sor Düşün Tasarla Kullanıcı ne yapıyor? Hangi bilgi, karşılaştırmalar, sıralamalar Tasarla Biçim fonksiyonu izler

Kullanılır araçlar Öğelerin gruplandırılması Öğelerin sırlanması Süsleme - fontlar, kutular vs. Öğelerin hizalanması Öğeler arasındaki boş alanlar.

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

Grup ve Öğelerin Sıralanması Düşün! – doğal sıralama nedir? Ekran sıralamalarını eşleştir! Kutular ve boş alanlar kullan Sekmeleri doğru şekilde kur! Yönergeler Kek tarif sendromundan kurtulun! … süt ve unu karıştırın, daha sonra meyveyi ekleyin…

Süsleme Mantıksal öğeleri gruplamak için kutuları kullanın. Başlık ve önemli yerleri belirtmek için fontları kullanın. Ancak çok fazla değil!! ABCDEFGHIJKLM NOPQRSTUVWXYZ

Hizalama - metin Soldan sağa doğru okursunuz (İngilizce ve Avrupa dilleri)  sol tarafa hizalayın Sıkıcı ancak okunur! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Özel efektler için iyidir ama ayırt etmek zordur.

Hizalama - isimler Genellikle soyisimleri ayırt etmek için  kolaylaştırın!   Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  Alan Dix Janet Finlay Gregory Abowd Russell Beale

Hizalama - numaralar Amacınızı düşünün! Hangisi en büyük? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256

Hizalama - numaralar Görsel olarak: uzun numara = büyük numara Ondalık sayıları sıralayın Ya da sayıları sağa hizalayın 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

Çoklu sütunlar Aralıkları ayırmak zordur: (geniş veritabanı alanlarından bundan sakınmak zordur.) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Çoklu sütunlar- 2 Öncüleri kullanın sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Çoklu sütunlar- 3 Veya grileştirme (doğrusalda da olabilir.) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Çoklu sütunlar- 4 Ya da “adi” hizalama yapın. sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Boş alan (beyaz alan)- Karşıtlık NE GÖRÜYORSUN ?

Boş alan (beyaz alan)- Karşıtlık NE GÖRÜYORSUN ? yazılar arasında boşluk

Dağıtmak için boşluk

Yapılandırmak için boşluk

Vurgulamak için boşluk

Fiziksel Kontroller Öğelerin gruplanması defrost settings type of food time to cook defrost ayarları Yiyecek modu Pişirme zamanı

Fiziksel Kontroller Öğelerin gruplanması Öğelerin sıralanması 1 1) ısıtma tipi 2 2) sıcaklık 3 3) pişirme zamanı 4 4) başlat

Fiziksel Kontroller Öğelerin gruplanması Öğelerin sıralanması Süsleme different colours for different functions lines around related buttons Farklı işlevler için farklı renkler İlişkili butonların çevresine çizgi

Fiziksel Konroller Öğelerin gruplanması Öğelerin sıralanması Süsleme Hizalama centered text in buttons ? easy to scan ? buttonlar içerindeki yazının ortalanması ? Ayırt etmek kolay mı ?

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

Kullanıcı faaliyetleri ve kontrol Bilgi girişi Neyin zorlayacağını bilmek

 ? Bilgi girişi formlar, diyalog kutuları Mantıksal yerleşim Name: Address: Alan Dix Lancaster formlar, diyalog kutuları Sunulan yer + veri girişi Benzer yerleşim konuları Hizalama – farklı etiket uzunlukları Mantıksal yerleşim İçerik analizini kullanın (ch15) gruplama Bilgi girişi için doğal sıralama yukarı-ortalama, sol-sağ (kültüre bağlı)  Name: Address: Alan Dix Lancaster ? Name: Address: Alan Dix Lancaster N.B. see extra slides for widget choice

Ne yapacağını bilmek Ne aktif ne pasif Uyumlu stiller yardımcıdır. Nereye tıkladın Nereyi oluşturdun Uyumlu stiller yardımcıdır. mesela webte altı çizili linkler Etiket ve ikonlar Sıkça yapılan etkinlikler için standartlar

Zorluklar Psikolojik kısım Fiziksel nesneler için Ekran nesneleri için Kupa tutacağı Psikolojik kısım Fiziksel nesneler için Şekil ve boyut etkinlik önerir. Yakala, çevir, fırlat Ekran nesneleri için buton–nesneye benzer mouse tıklamasını zorlar fiziksel-nesneler gibi kullanımı önerir Bilgisayar kullanımının kültürü İkonlar tıklamayı zorlar. Hatta çift tıklamayı bile… Gerçek butonlar gibi değildir. Elde tutmayı zorlaştırır

Uygun görünüş Bilgi sunumu Estetik ve yararlık Renk ve 3 Boyut Yerelleştirme & milletlerarası yapma

Bilgi sunumu Hedef konular İlkeleri sunmak için kağıtlar kullan! Sıralama (hangi sütun, numerik alfabetik) metin vs. diyagram dağılım grafiği vs. histogram İlkeleri sunmak için kağıtlar kullan! Fakat etkileşim ekle Tasarım seçeneklerini yumuşatır Örneğin sütunu yeniden sıralamak chap10 chap5 chap1 chap14 chap20 chap8 … 12 16 17 22 27 32 name size chap1 chap10 chap11 chap12 chap13 chap14 … 17 12 51 262 83 22 size name size

Estetik ve yararlık Estetik olarak memnun edici tasarımlar: Kullanıcı memnuniyetini ve üretkenliğini artırır. Güzellik ve yararlık çelişebilir. Karışık görsel stiller ayırt etmesi kolay Temiz tasarım– küçük farklılaşma karıştırma Metinin arka planı … bakmak güzel; fakat okumak zordur. Ancak beraber çalışabilir Tüketici ürünlerinde– anahtar ayırt edici (e.g. iMac)

Renk ve 3 Boyut İkisi de kötü şekilde kullanılır! renk 3D Efektleri Eski monitörlerde palet kısıtlı idi Fazla kullanıldı Renk karmaşasından kaçının! Diğer bilgileri “reinforce” etmek için tedbirli kullanın 3D Efektleri Fiziksel bilgi ve grafikler için güzeldir. Ancak fazla kullanılırsa… metin !! 3D pasta grafiği % 48,3 % 51,7

Renklerin kötü kullanımı over use - without very good reason (e.g. kids’ site) colour blindness poor use of contrast do adjust your set! adjust your monitor to greys only can you still read your screen?

Ülkeleri ve kültürleri aşın yerelleştirme & milletler arası yapma Arayüzleri kültür ve diller içi değiştir. globalleştirme Her yerde anlaşılır semboller kullanmaya çalış. Dili basitçe değiştir? Hazır metin yerine kaynak veritabanlarını kullan … ancak boyut değişir, sağ ve sol, sıralama... Derin konular Kültürel varsayım ve değerler Sembollerin değeri e.g tik ve çarpı … +ve -ve bazı kültürlerde … fakat diğerlerinde aynı anlamdadır.  

Tekrarlama ve prototipleme Daha iyiye… … ve iyi başlamak

prototipleme Onu ilk sefereinde elde edemezsiniz. Eğer ilkinde başaramadıysanız … prototip değerlendir tasarım Yeniden tasarla oldu! tamam?

Prototiplemenin tuzakları Küçük küçük hareketler… ancak nereye Malverns ya da Matterhorn? 1. iyi bir başlangıç noktasına, 2. neyin yanlış olduğunu anlamaya ihtiyaç var.