Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ

... konulu sunumlar: "Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ"— Sunum transkripti:

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

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

3 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

4 Tasarım nedir?

5 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)

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

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

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

9 Ana Mesaj… Kullanıcı

10 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

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

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

13 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

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

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

16 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

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

18 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

19 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

20 … 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?

21 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ış

22 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

23 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

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

25 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

26 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

27 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

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

29 Hedef arayışı hedef başlangıç

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

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

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

33 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

34 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

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 Ekranlar arası Uygulama İçerisinde
Glabal Ekranlar arası Uygulama İçerisinde

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

38 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

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

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

41 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

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

43 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

44 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

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

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

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

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

49 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

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

51 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

52 Hizalama - numaralar Amacınızı düşünün! Hangisi en büyük?

53 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

54 Ç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

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

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

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

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

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

60 Dağıtmak için boşluk

61 Yapılandırmak için boşluk

62 Vurgulamak için boşluk

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

64 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

65 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

66 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ı ?

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

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

69  ? 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

70 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

71 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

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

73 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

74 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)

75 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

76 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?

77 Ü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.  

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

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

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