HAZIRLAYANLAR  AYTUNÇ YALÇINKAYA  ŞAHİN ALTİN

... konulu sunumlar: "HAZIRLAYANLAR  AYTUNÇ YALÇINKAYA  ŞAHİN ALTİN"— Sunum transkripti:

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

2 Etkileşim Tasarım Temelleri
Bölüm 5 Etkileşim Tasarım Temelleri

3 Ağ diyagramları Ana Ekran Kullanıcı Kaldır Onayla 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 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

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

7 Temel İlkeler Sor Düşün Tasarla Kullanıcı ne yapıyor?
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 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 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.

14 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

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.) Şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 85

18 Çoklu sütunlar- 2 Öncüleri kullanın
şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 85

19 Çoklu sütunlar- 3 Veya grileştirme (doğrusalda da olabilir.)
şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 85

20 Çoklu sütunlar- 4 Çoklu sütunlar adi hizalama
Şerbet kahve çikolata meyveli sakız dondurma 85

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

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

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> Sıralamalar Gruplamalar Renkler Hizalamalar Dekorasyon Boşluk alan

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

28 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

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

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

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

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

34 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

35 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

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

37 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

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

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

43 prototipleme Onu ilk sefereinde elde edemezsiniz.
Eğer ilkinde başaramadıysanız … prototip değ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  http://www.hcibook.com/e3/plain/resources/
KAYNAKLAR    