Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

İNSAN VE BİLGİSAYAR ETKİLEŞİMİ HAZIRLAYANLAR 2008638008  AYTUNÇ YALÇINKAYA 2008638039  ŞAHİN ALTİN.

Benzer bir sunumlar


... konulu sunumlar: "İNSAN VE BİLGİSAYAR ETKİLEŞİMİ HAZIRLAYANLAR 2008638008  AYTUNÇ YALÇINKAYA 2008638039  ŞAHİN ALTİN."— Sunum transkripti:

1 İNSAN VE BİLGİSAYAR ETKİLEŞİMİ HAZIRLAYANLAR  AYTUNÇ YALÇINKAYA  ŞAHİN ALTİN

2 Etkileşim Tasarım Temelleri

3 Ağ diyagramları Ana Ekran Kullanıcı Kaldır Onayla Kullanıcı Ekle

4 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

5 Temel İlkeler Gruplandırma, Yapılandırma, Sıralama Hizalama Beyaz alanın kullanımı ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell

6 İlanın alındığı adres:http://www.ba- works.com/ba_detay105.htmlhttp://www.ba- works.com/ba_detay105.html

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

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

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

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

11 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

12

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

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

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

16 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

17 Çoklu sütunlar Aralıkları ayırmak zordur: (geniş veritabanı alanlarından bundan sakınmak zordur.) Şerbet75 kahve120 çikolata35 meyveli sakız27 dondurma85

18 Çoklu sütunlar- 2 Öncüleri kullanın şerbet75 kahve120 çikolata35 meyveli sakız27 dondurma85

19 Çoklu sütunlar- 3 Veya grileştirme (doğrusalda da olabilir.) şerbet75 kahve120 çikolata35 meyveli sakız27 dondurma85

20 Çoklu sütunlar- 4 adi hizalama Çoklu sütunlar Şerbet75 kahve 120 çikolata35 meyveli sakız27 dondurma85

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

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

23 Dağıtmak için boşluk

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

25 Vurgulamak için boşluk

26 Sıralamalar Gruplamalar Renkler Hizalamalar Dekorasyon Boşluk alan Ekran Tasarımı ve Düzenleme> Uygun Görünüm>

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

28 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

29 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

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

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

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

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

34 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

35 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

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

37 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

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

39 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

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

41 Ü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. 

42 Daha iyiye… … ve iyi başlamak

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

44

45

46 Steve Jobs'un Ö zl ü S ö zleri "Bir proje ortaya ç ıkardığınızda ilk başta hatalar yapabilirsiniz, ö nemli olan hatalarınızı savunmak yerine bir an ö nce d ü zeltemeye ç alışmaktır. "Biz sadece, işletim sistemlerine baktık ve bunu daha basit ve daha g üç l ü yapabilir miyiz dedik.“

47 "M ü şterinize ne istediğini sorup ona g ö re ü r ü n ç ıkaramazsınız, çü nk ü siz onların istediğini yaparken onlar başka birşey istiyor olacaktır.“ “ Tasarım, insan yapımı şeylerin temel ruhudur. ” “ Yaratıcılık, birşeyleri birbirine bağlamaktır. ”

48 KAYNAKLAR  http: //ozlusozler.tilqi.com/guzel-ozlu-sozleri/s-s/steve-jobs/steve- jobs-sozleri    spring/Kutuphane/ Insan-Bilgisayar-Etkilesimi.pdf


"İNSAN VE BİLGİSAYAR ETKİLEŞİMİ HAZIRLAYANLAR 2008638008  AYTUNÇ YALÇINKAYA 2008638039  ŞAHİN ALTİN." indir ppt

Benzer bir sunumlar


Google Reklamları