Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ. Etkileşim Tasarım Temelleri tasarım: nedir, amaçlar, kısıtlamalar tasarım süreci Ne zaman ne olur? kullanıcılar.

Benzer bir sunumlar


... konulu sunumlar: "Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ. Etkileşim Tasarım Temelleri tasarım: nedir, amaçlar, kısıtlamalar tasarım süreci Ne zaman ne olur? kullanıcılar."— Sunum transkripti:

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

2 Etkileşim Tasarım Temelleri tasarım: 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

5 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 Ne isteniyor? Analizler Tasarım Gerçekleştir ve harekete geçir Ön ürün görüşmeler ethnography Elimizde ne var? Ne isteniyor? Yönergeler ilkeler Diyalog işaretlemleri Kesin belirleme Bulguların değerlendirilmesi Senaryolar İçerik analizleri

11 Basamaklar … ihtiyaç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 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

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

18 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

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

24 Basamaklar Kütüphane seçenekleri 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 – Sayfa tasarımı Site yapılandırması web, tarayıcı, dış linkler

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

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

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

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

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

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

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. web sitesi Ana menü İkinci menü 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

37 Hiyerarşik Diyagram Sistem Bilgi ve YardımYönetimMesajlar Kullanıcı EkleKullanıcı Kaldır

38 Hiyerarşik diyagram Uygulamanın kısımları Ekranlar ya da ekran grupları Tipik fonksiyonel dağılım Sistem Bilgi ve YardımYönetimMesajlar Kullanıcı EkleKullanı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 Kullanıcı Ekle

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

43 Kapsamlı durum… Stil 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 Temel İlkeler Gruplandırma, Yapılandırma, Sıralama Hizalama Beyaz alanın kullanımı ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell

45 Temel İlkeler Sor Kullanıcı ne yapıyor? Düşün 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 Adres: … 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 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. Sıkıcı ancak okunur!

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

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.) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

55 Çoklu sütunlar- 2 Öncüleri kullanın sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

56 Çoklu sütunlar- 3 Veya grileştirme (doğrusalda da olabilir.) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

57 Çoklu sütunlar- 4 Ya da “adi” hizalama yapın.

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

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

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 Yiyecek modu Pişirme zamanı defrost ayarları

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

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 ? ? Ayırt etmek kolay mı ? buttonlar içerindeki yazının ortalanması

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

68 Bilgi girişi Neyin zorlayacağını bilmek

69 Bilgi girişi 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ı) N.B. see extra slides for widget choice Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster ?

70 Ne yapacağını bilmek Ne aktif ne pasif 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 Ş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. Kupa tutacağı Elde tutmayı zorlaştırır

72 Bilgi sunumu Estetik ve yararlık Renk ve 3 Boyut Yerelleştirme & milletlerarası yapma

73 Bilgi sunumu Hedef konular 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 chap1 chap10 chap11 chap12 chap13 chap14 … … sizename size chap10 chap5 chap1 chap14 chap20 chap8 … … namesize

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 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 Daha iyiye… … ve iyi başlamak

79 prototipleme Onu ilk sefereinde elde edemezsiniz. Eğer ilkinde başaramadıysanız … prototipdeğ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.


"Etkileşim Tasarım Temelleri Fatih ÖZDİNÇ. Etkileşim Tasarım Temelleri tasarım: nedir, amaçlar, kısıtlamalar tasarım süreci Ne zaman ne olur? kullanıcılar." indir ppt

Benzer bir sunumlar


Google Reklamları