HAZIRLAYANLAR 2008638008 AYTUNÇ YALÇINKAYA 2008638039 ŞAHİN ALTİN İNSAN VE BİLGİSAYAR ETKİLEŞİMİ HAZIRLAYANLAR 2008638008 AYTUNÇ YALÇINKAYA 2008638039 ŞAHİN ALTİN
Etkileşim Tasarım Temelleri Bölüm 5 Etkileşim Tasarım Temelleri
Ağ diyagramları Ana Ekran Kullanıcı Kaldır Onayla Ekle
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
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
İlanın alındığı adres:http://www.ba-works.com/ba_detay105.html
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.) Şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 85
Çoklu sütunlar- 2 Öncüleri kullanın şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 85
Çoklu sütunlar- 3 Veya grileştirme (doğrusalda da olabilir.) şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 85
Çoklu sütunlar- 4 Çoklu sütunlar adi hizalama Şerbet 75 kahve 120 çikolata 35 meyveli sakız 27 dondurma 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
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
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 yardı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?
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.“
"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.”
http://www.hcibook.com/e3/plain/resources/ KAYNAKLAR http://ozlusozler.tilqi.com/guzel-ozlu-sozleri/s-s/steve-jobs/steve-jobs-sozleri http://www.hcibook.com/e3/plain/resources/ http://www.ba-works.com/ba_detay105.html http://yunus.hacettepe.edu.tr/~htuzun/courses/bto611-2012-spring/Kutuphane/46792346-Insan-Bilgisayar-Etkilesimi.pdf