BTÖ711: İnsan-Bilgisayar Etkileşimi

Slides:



Advertisements
Benzer bir sunumlar
EBA BİLİŞİM AĞI TANITIMI VE KULLANIMI. EBA v2 EBAv2 : Eğitimde FATİH Projesinin içerik bileşeni olarak 2012 yılında yayın hayatına başlayan Eğitim Bilişim.
Advertisements

DOÇ. DR.MEHMET ERDOĞAN AKDENİZ ÜNİVERSİTESİ
STRES SINAV KAYGISI KARACASU LİSESİ Rehberlik Servisi.
TEMEL EĞİTİMDEN ORTAÖĞRETİME GEÇİŞ Öğrencilerin aldıkları puanlar kadar yaptıkları doğru tercihler de iyi bir liseye adım atmalarına yardımcı olacaktır.8.sınıf.
KÜTÜPHAN-E TÜRKİYE PROJESİ. MODÜL 7 Sunular ve Etkili Sunum Hazırlama Kütüphan-e Türkiye Eğitim Çalışma Grubu, Göknur Kaplan Akıllı.
Algoritma.  Algoritma, belirli bir görevi yerine getiren sonlu sayıdaki işlemler dizisidir.  Başka bir deyişle; bir sorunu çözebilmek için gerekli olan.
SUNU HAZIRLAMA PROGRAMI: powerpoint
Dosya Yönetimi Dosya, Klasör ve Sürücüler HÜSEYİN ALİOSMANOĞLU.
AKRAN DESTEKLİ ÖĞRENME
LUCA Bilgisayarlı muhasebe programı
Hazırlayan: Dr. Emine CABI
TEST ÇÖZME TEKNİKLERİ. Test çözmede 3 unsur önemlidir.
AKIL (ZİHİN) HARİTASI.
Zihinsel engellilerin sınıflandırılması
Öğretim Teknolojileri ve Materyal Geliştirme
AİLELERLE İŞBİRLİĞİ.
Paragraf Nedir? & Herhangi bir yazının bir satırbaşından öteki satırbaşına kadar olan bölümüdür. & Duygu, düşünce, istekleri anlatım tekniklerinden yararlanarak.
Yazılım Mühendisliği1[ 3.hft ]. Yazılım Mühendisliği2 Yazılım İ sterlerinin Çözümlemesi Yazılım Yaşam Çevrimi “ Yazılım Yaşam çevrimin herhangi bir yazılım.
ZAMAN VE ÇATIŞMA YÖNETİMİ. ZAMAN YÖNETİMİ Zamanı Verimli Kullanmak Ufak zaman kazanımları Hatalı bir şeyi daha kuvvetli yapmanın bir faydası yoktur.
Sözsüz İletişimin Özellikleri
Sevgili 8.sınıf öğrencisi; Kendi yeteneklerin, ilgilerin, değerlerin hakkında bilgi sahibi olmak ve daha doğru lise tercihi yapabilmek için lütfen öncesinde.
Açlığını Gider Detaylı Kullanım Kılavuzu
APP INVENTOR Emre ANLAR.
Bilgiye Ulaşma ve Biçimlendirme
Metinlerin Sınıflandırması
KAVRAM HARİTALAMA Doç.Dr.Bülent ÇAVAŞ.
CAD (Computer Aided Design) İngilizce kelimesinin baş harflerinden oluşmaktadır. Türkçesi Bilgisayar Destekli Tasarım `dır piyasada çeşitleri çoktur. CAD.
PROGRAMLI ÖĞRETİM Tanımı:
Proje Oluşturma ve Yönetimi Bilişim Teknolojileri Öğretmeni
ULUSAL MESLEKİ BİLGİ SİSTEMİ
Okul Deneyimi Dersi Eser Çeker (Uz.).
Proje Oluşturma ve Yönetimi
Öğretimin Uyarlanması
ARAÇ GEREÇLERİN EĞİTİMDEKİ YERİ VE ÖNEMİ
NOT VERME VE MEZUNİYET.
E-posta Forum Sohbet Sesli Görüntülü Konferans
Problem Çözme ve Algoritmalar
ÇOCUKLUK DÖNEMİNDE YARATICILIK VE SANAT EĞİTİMİ
Teknolojİ ve tasarIm dersİ
BİLGİ PAYLAŞIM ARAÇLARI
Bilgi ve İletişim Teknolojileri
VELİLER İÇİN ANKET GİRİŞİ
RESİM VE RESİM DÜZENLEME İŞLEMLERİ
Hürriyet Anadolu Lisesi
Bölüm IV Öğretimde Görsel İşitsel Araçlar
E-posta Forum Sohbet Sesli Görüntülü Konferans
GÖRSEL PROGRAMLAMA DİLİ:
MATEMATİK DERSİ ÖĞRETİM PROGRAMI
PROBLEM ÇÖZME VE ALGORİTMALAR
Globalpiyasa.com’da Firma Web Sitesi Nasıl Oluşturulur?
EBSCO Discovery Service (EDS) Akademik Arama Motoru/Keşif Aracı
Bu konudaki her şeyi okuyun Microsoft SharePoint Haberler
İSTASYON YÖNTEMİ.
EĞİTİME GİRİŞ Mehmet Akif Ersoy Üniversitesi
TEKNOLOJİ VE TASARIM DERSİ 7.D.1. Özgün Ürünümü Tasarlıyorum.
NİŞANTAŞI ÜNİVERSİTESİ
Bilgisayar II 26 Nisan-7Mayıs Öğr. Gör. Feyza Tekinbaş.
Psikolojik Danışma ve Rehberlik
ÖĞRENME STİLLERİ.
EĞİTİME GİRİŞ Mehmet Akif Ersoy Üniversitesi
ÖLÇME-DEĞERLENDİRME 1.DERS
Bilgisayar Bilimi Koşullu Durumlar.
Nitel araştırma soruları sorma ve soru formu oluşturma
Sınıf Öğretmenlerinin Eğitsel Amaçlı İnternet Kullanım Öz Yeterlikleri
AÇIK UÇLU ÖĞRENME ORTAMLARI
Medİkal görüntülerde doktor – hasta bİlgİ gİzlİlİğİnİn sağlanmasI
GEÇİŞ GEÇİŞ SÜRECİ Özel Gereksinimli ve / veya Engeli
Wiki Eğitim – Artık Hayal Değil
Örgüt Kuramı, Örgüt Tasarımı ve Örgütsel Değişim
Sunum transkripti:

BTÖ711: İnsan-Bilgisayar Etkileşimi ETKİLEŞİMLİ TASARIM TEMELLERİ Ecenaz ALEMDAĞ Bu sunumda etkileşimli tasarım temellerini işleyeceğiz. BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Merdivenin bir kısmı engelliler için tasarlanmış. Kalan kısmında ise engelliler unutulmuş. Bu haftaki sunumda ise böyle tasarımlar yapmak yerine insanların ve bilgisayarların özellikleri göz önüne alınarak nasıl iyi bir etkileşimli tasarım yapabileceğimizi öğreneceğiz. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme Geçen hafta etkileşim ve paradigmaları işlemiştik. Etkileşimli tasarım temelleri konusunun altında ise … başlıklarını göreceğiz. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tasarım Nedir? Sınırlarla hedeflere ulaşmaktır. Hedefler Ödünler Sınırlılıklar İlk olarak «tasarım nedir?» ile başlayalım. Bu tanıma baktığımızda tasarımı oluşturan bileşenlerden biri hedeflerdir. Hedeflerde tasarımımızın amacı ne, kimin için tasarlıyoruz, niçin onlar onu istiyor gibi sorulara yanıt ararız. Tanıma baktığımda 2.bileşen olarak sınırlılıkları görüyorum. Sınırlılıklarda , tasarımımda ne gibi materyaller kullanacağım, maliyeti ne kadar, onu geliştimek için ne kadar zaman gerekir, sağlık ve güvenlikle ilgili sorunlar olcak mı gibi sorulara yanıt arıyorum. Tabi ki, sınırlılıklar içierisinde daima TÜM hedeflerimizi gerçekleştiremeyiz. Bazı ödünler vermemiz gerekiyor. Diğer bir deyişle, hangi hedeflerden ve sınırlamalardan vazgeçeceğimizi belirliyoruz ki, diğer hedeflere ulaşabilelim. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Tasarımın Altın Kuralı Tasarım Nedir? > Tasarımın Altın Kuralı Materyallerinizi anlayın. Hepimizin tasarım öncesinde sahip olduğu materyaller aynıdır. Fakat, süreç sonunda farklı ürünler ortaya çıkar. Bunun nedeni ise üretim öncesinde sahip olduğumuz materyalleri farklı algılamamızdır. Bu durum bizi tasarımın altın kuralına getirir. Altın kuralımız: Materyallerinizi anlayın. İnsan-bilgisayar etkileşiminde iki materyal vardır: 1.insan, 2.bilgisayarlardır. İnsanlar (psikolojik, sosyal bakış açıları, hatalar) Bilgisayarlar (kısıtlılıklar, kapasiteler, araçlar) 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tasarım Nedir? > Hatasız Kul Olmaz Hata yapmak, insanın doğasında vardır. Ancak sistemler bu hataları ve hataların sonuçlarını azaltıcı yönde tasarlanmalılardır. Tasarımcılar olarak bazı hatalar yapabiliriz. Çünkü hata yapmak, insanın doğasında vardır. Önemli olan, tasarım aşamasında diğerlerin nerede, nasıl hatalar yapabileceğini anlamalı ve ara yüzlerimizi ona göre şekillendirmeliyiz. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tasarım Nedir? > Ana Mesaj-Kullanıcı Kullanıcıyı temel al Kullanıcıyı merkezde tut En sonda kullanıcıyı hatırla İnsan-bilgisayar etkileşiminde birçok metotların başarısı, tasarımcının kullanıcıyı ne kadar odak noktasına aldığına bağlıdır. Bu yüzden etkileşimli tasarımda merkez noktamızı kullanıcıyı temel alma, kullanıcıyı merkezde tutma ve en sonda kullanıcıyı hatırla oluşturur. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tasarım Süreci Görüşmeler Ne var? Ne isteniyor? Yönergeler, İlkeler Diyalog gösterimleri Tam Belirleme Dokümantasyon, Yardım Bulguların değerlendirilmesi Senaryolar İçerik analizleri Ne isteniyor? Analiz Tasarım Uygulama ve harekete geçirme Tasarım sürecinin bu şekilde gösterebiliriz. Gördüğünüz gibi tasarım süreci 4 aşama ve bir döngüden oluşmaktadır. Şimdi her bir aşamayı açıklayalım. Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tasarım Süreci Senaryolar, İçerik analizleri Ne isteniyor? Analiz Yönergeler, İlkeler Görüşmeler Ne var? Ne isteniyor? Tam belirleme Tasarım Uygulama ve harekete geçirme Diyalog gösterimleri İlk aşama, Gereksinimler yani ne isteniyor onu belirlemektir. Gereksinimleri bulmak için konumuzla ilgili şuan neler oluyor, neler yapılıyor incelememiz gerekir. İnsan-bilgisayar etkileşiminde bunu için bazı teknikler vardır. İnsanlarla görüşme, onları videoya çekme yada direk gözlem yapmak gibi. Analiz aşamasında, gözlem ve görüşmelerden elde ettiğimiz sonuçları düzenleriz. Böylece tasarımın sonraki aşamalarıyla daha rahat iletişim kurabilir ve tasarımımızın ana noktalarını belirleyebiliriz. Tasarım aşamasında, artık ne istediğimizden onu nasıl yapacağımıza geçiyoruz. Bunun için çeşitli kurallar ve ilkeler var. Bunları 7.bölümde göreceğiz. 10. bölümde ise nasıl farklı türde kullanıcılar için tasarım yapacağımızı öğreneceğiz. Bugün ise birkaç navigasyon ve yerleşim tasarımından bahsedeceğiz. Tekrarlama ve prototip oluşturma: İnsanlar kompleks varlıklardır. Tasarımlarımızın ilk denemede doğru sonuç vermesini bekleyemeyiz. Bu nedenle sistemimizi değerlendirip ne düzeyde çalışıyor ve ne gibi gelişmeler yapılabiliriz bunu belirlemeliyiz. İlk önce kağıt üzerinde tasarımlar yapıp, sonrasında sistemlerin erken versiyonlarını üreterek prototipler oluştururuz . Prototipleri kullanıcılarla denedikten sonra bulgularımızı değerlendiririz. Tekrardan analiz, tasarım ve prototipleme aşamalarından geçeriz. Sonunda tasarımımızdan memnun olduğumuz zaman artık onu üretmeye başlarız. Bu aşama kod yazma, dokümantasyon yazma gibi işlemler içerir. Kullanıcıya vereceğimiz gerçek sistemi oluşturana kadar bu aşama devam eder. Bulguların değerlendirilmesi Prototipleme Dokümantasyon, Yardım 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Tasarım Süreci Kalite Zaman Kullanabilirlik Sorunları Bir an diyebilirsiniz ki «Bu kadar şeyi nasıl yapabilirim» Cevabımız elbette hayır. Çünkü, zamanımız kısıtlıdır. Ya tasarım sürecinin zamanından ya da ürünün kalitesinden ödün veririz. Bu demek oluyor ki, bir tasarım mükemmel olmasa da onu tasarımımızın son hali olarak kabul etmek zorunda kalabiliriz. Bunların yanında birde kullanabilirlik sorunlarıyla karşılaşırız. Burda önemli olan, kullanabilirlik sorunları bulmak değil, hangilerinin düzeltmeye değer olduğunu belirlemektir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

¡Hola! Ne yazıyor dairenin içinde? Sanırım, şimdi dikkatiniz ekranda daha iyi toplandı.

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Kullanıcı Odağı Tüm etkileşim tasarımlarının başlangıcı, hedeflenen kullanıcı ya da kullanıcılardır. Kullanıcılarınızı tanıyın. Daha önce de söylediğimiz gibi, etkileşimli tasarımların başlangıcı kullanıcıları hedeflemelidir. Bu durum sıklıkla, kullanıcılarınızı tanıyın diye ifade edilir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Kullanıcı Odağı Peki, kullanıcılarımızı nasıl tanıyabiliriz? Onlar kim? Kullanıcı senin gibi değil! Onlarla konuş Onları gözlemle Peki, kullanıcılarımızı nasıl tanıyabiliriz? İlk olarak, onlar kim? Sorusunu sormalıyız. Gençler mi, yaşlılar mı, deneyimli bilgisayar kullanıcıları mı, yoksa hepsi mi? Kullanıcılar senin gibi değil: Tasarımlarımızda kendimizi değil kullanıcılarının ilgi ve yeteneklerini göz önüne almalıyız. Onlarla konuşun: Görüşmelerle, tartışmalarla yada tüm tasarım sürecine kullanıcıları dahil ederek kullanıcılarımızı daha iyi tanıyabiliriz. Onları gözlemleyin: İnsanların söyledikleri büyükbir önem taşısa da, onları gözlemleyerek daha zengin bilgi ediniriz. Bir günlerini nasıl harcadıklarına gözlemleyerek, günlük tutmalarını isteyerek kullanıcılarımızı gözlemleyebiliriz. Gözlemleriniz bittikten sonra onları kullanıcılarla tartışın. Böylece ne yaptıklarına ek olarak niye yaptıklarını da öğrenmiş oluruz. Son olarak ise hayal gücünüzü kullanın. Kullanıcıyı her zaman tasarım sürecine katmak mümkün olmayabilir. Hedef grubumuzu temsil eden hayali bir karakter oluşturulabilir. Örneğin; tasarım sürecinde, hayali karakterimiz Ali bu duruma karşı nasıl davranırdı diye düşünebiliriz. Hayal gücünü kullan 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

¿Cómo estás?

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryolar Etkileşimli tasarımlar için zengin hikayeler Tasarımlarımın hem en basit hem de en esnek ve en güçlü sunum hali Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says “downloading now”, a percent done indicator and small whirling icon. Senaryoları etkileşimli tasarımlar için zengin hikayeler olarak tanımlayabiliriz. Bunun yanında senaryolara, tasarımların hem en basit hem de en esnek ve en güçlü sunum hali diyebiliriz. Bu metin ise kitabımızda yer alan bir film oynatıcısının senaryosu. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryo > Storyboard Senaryoların resimlerle ve çizimlerle zenginleştirilmiş hali. Ör. Film hikaye çizgisi Storyboard ise senaryoların resimlerle ve çizimlerle zenginleştirilmiş halidir. Film hikaye çizgelerinde kullanılan tekniklere benzer teknikler kullanılır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryo Storyboard > > Mobil X Ali, bir lise öğrencisidir. Sınıfa girerken Ali ve arkadaşları Mobil X cihazını sisteme okutur ve böylece sınıf yoklaması alınmış olur. Şimdi ise hayali bir araç olan Mobil X’in storyboardını göstermek istiyorum. Tahtada yazılan her şey Ali’nin Mobil X cihazında da gözükür ve istediği alana yakınlaşarak rahatlıkla içeriği görebilir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryo Storyboard > > Mobil X Ali’ye öğretmen ‘Cümledeki yanlış kelimeleri çiz.’ dediği zaman Mobil X cihazıyla o kelimeleri işaretler ve sınıf ekranında gözükür. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryo Storyboard > > Mobil X Öğleden sonraki ders ise öğretmenin öğrencilere çoktan seçmeli sorular sormasıyla başlar. Ali ve arkadaşları soruları görür ve cevaplarını Mobil X cihazıyla işaretler. Öğretmen her soru sonunda soruyu kaç kişinin doğru, kaç kişinin yanlış yaptığını bir grafikle görür. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryo Storyboard > > Mobil X Ders sonunda öğretmen pop-quiz yapar. Tüm öğrenciler Mobil X cihazlarıyla soruları cevaplarlar. Ali, arkadaşından kopya çekerken öğretmenine yakalanır. Öğretmen, Ali’nin cihazını bloke eder ve Ali sınıftan çıkar. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryolar Gördüğümüz gibi senaryolar, tasarım hakkında detaylıca düşünmemizi sağlarlar. Bunun haricinde senaryolar, Diğerleriyle iletişim kurmak için, Diğer modellerle uygunluğuna bakmak için ve Dinamikleri açıklamak için kullanılır. Gördüğümüz gibi senaryolar, tasarım hakkında detaylıca düşünmemizi ve olası problemleri önceden fark etmemizi sağlarlar. Bunun haricinde senaryolar, Diğerleriyle iletişim kurmak için kullanılabilir. Çünkü soyut fikirleri kullanıcılarla tartışmak, yanlış anlamalara sebep olabilir. Somut örnekleri paylaşmak daha kolaydır. Diğer modellerle uygunluğuna bakmak için de kullanılabilir. Burada senaryoları diğer daha resmi modellerle karşılaştırırız. Senaryolar dinamikleri açıklamak için de kullanılabilir. Ekran görüntüler ve resimler sistemin nasıl gözükeceğine dair bir duygu verir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Senaryolar Senaryolar doğrusaldırlar. Bunun olumlu ve olumsuz yanları vardır: Zaman doğrusaldır Hayat ve zaman doğrusaldır. Bu nedenle doğrusal senaryoları anlamak daha kolaydır. Fakat alternatif yoktur Gerçek etkileşimlerde -insanla ya da sistemle- seçenekler vardır. Senaryolar bu alternatifleri gösteremez. Senaryoların bir diğer özelliği ise doğrusal olmalarıdır. Bunun olumlu ve olumsuz yanları vardır. Olumlu yanı hayatımız ve zamanımızda doğrusaldır. Bu yüzden senaryoları anlamak kolaydır. Olumsuz yanı ise senaryoların alternatifler sunmamasıdır. Çünkü gerçek etkileşimlerde seçenekler vardır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Bien / Mal

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Bilgisayar sitemini kullanırken çeşitli şekillerle onunla etkileşime gireriz. Etkileşim Seviyeleri: Widgetlar (butonlar, ikonlar, kaydırma çubuğu) Ekran ya da pencereler Uygulama içerisindeki navigasyon Ortam (işletim sistemi) 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı > Etkileşim Seviyeleri Web Siteleri Widgetlar Form elemanları, etiketler ve bağlantılar Ekran tasarımı Sayfa Tasarımı Navigasyon tasarımı Site yapısı Ortam Browser, dış bağlantılar 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı > Etkileşim Seviyeleri Fiziksel Cihazlar Widgetlar Düğmeler, ışıklar, göstergeler Ekran tasarımı Fiziksel Düzen Navigasyon tasarımı Aracın Temel modları Ortam Gerçek Dünya Widgetları 3.bölümde görmüştük. Ekran tasarımını bir sonraki başlıkta göreceğiz. Şimdi ise navigasyon tasarımına bakacağız. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Bir uygulamanın yapısı hakkında düşünelim. Aşama 1: Gerçek kullanımı hakkında düşünme Bu uygulamayı kim kullanacak? Bu uygulama hakkında nasıl düşünecekler? Bu uygulamayı niçin kullanacaklar? Aşama 2: Yapısı hakkında düşünme Yerel yapı Bir ekranın ya da sayfanın dışarısından bakma Global yapı Site yapısı, ekranlar arasındaki geçiş Navigasyon tasarımıyla nasıl bir sistem içerisindeki ana ekranlar birbirleriyle iletişim kuruyorlar bunu kastediyoruz. Başlamadan önce bir uygulamanın yapısı hakkında düşünelim: 1.Aşama gerçek kullanımı hakkında düşünmektir. 2.Aşama yapısı hakkında düşünme. Navigasyon tasarımı için 2 yapıdan bahsedeceğiz. Yerel yapı; Bir ekranın ya da sayfanın dışarısından bakmaktır. Global yapı; Site yapısı, ekranlar arasındaki geçiştir. İlk önce yerel yapıya bakalım. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı > Yerel Yapı Hedefi Arama Davranışı Başlangıç Hedef Birçok etkileşim hedef-arama davranışı içerir. Ne yapmak istediğimizi ve sistemin nasıl çalıştığını biliyorsak istediğimiz yere kısa yoldan gideriz. Eğer bilmiyorsak dolambaçlı bir yoldan gideriz. Animasyonda gözüktüğü gibi 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Yerel Yapı > > Hedefi Arama Davranışı Ben nerdeyim? Başlangıç Hedef Burada önemli olan en etkin yoldan gitmek değil, etkileşimin her noktasında ben nerdeyim sorusuna cevap alabilmektir. Bunun için, herbir ekranın hedefe yakınlaşıp yakınlaşmadığımız konusunda bize yeterince bilgi vermesi gerekir. 7. bölümde bununla ilgili tasarım konularına bakacağız. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Yerel Yapı > > Bread crumbs 4 Kural Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi aramalıyız: Nerde olduğunu bilme Ne yapabileceğini bilme İlk Sayfa Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi aramalıyız 1.Si Nerde olduğunu bilme Etkileşimli sistemde bir ekran ya da web sayfası, bizim nerde olduğumuzu göstermesi gerekir. Bazı siteler ekranın başında başlıkların yolunu gösterir bizde de olduğu gibi. Ya da dropboxa bir dosya yüklerken bize kaç saniye kaldığını göstermesi gibi. 2.Si ise ne yapabileceğini bilmedir. Bir diğer deyişle, Bir şey yapmak ya da bir yere gitmek için neyin tıklanabilir olduğunu bilmektir. Örneğin; web sayfalarında altı çizili kelimeler onun tıklanabilir olduğunu gösterir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Yerel Yapı > > 4 Kural Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi bilmeliyiz: Ne olacağını bilme Modlar: Komutların işlevselliğini değiştiren farklı ortamlara denir. Ne yaptığını bilme 3.Sü ise bir butona tıkladığın zaman ne olacağını bilmedir. Tabiki, butona tıkladığın zaman ne olacağını görebilirsin. Eğer bir web sayfası kullanıyorsak browserdan geri butonuna tıklayarak eski sayfaya kolayca geri dönebiliriz. Fakat bir uygulamada ne olacağını görmek istersek, geri dönülmez bir etki yaratabilir. Bunu önlemek için ne yapabiliriz: Butonlarda sadece ikonlar kullanmak yerine ikon ve etiketlerini beraber kullanmalıyız. Aynı buton farklı ortamlarda farklı anlamlar geliyorsa buna dikkat etmeliyiz. Biz buna mod diyorduk. Modları mümkün olduğunca az kullanmalıyız. 4.Kural ise ne yaptığını bilmedir. Ne yaptığını bilmek, navigasyonu anladığını hissettirir. Sistemde nerede olduğunu, hedefe nasıl ulaşacağını bilmeyen birey kaybolma hissi yaşayacaktır. Bundan dolayı, birçok web tarayıcı tarih sistemi önerir ve geri butonu tıklayarak kullanıcılar ziyaret edilmiş sitelerin bir listesini görebilir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı > Global Yapı Bir uygulamanın genel yapısı Farklı ekranların, sayfaların ve araç durumların birbirleriyle bağlantı yolu Bir global yapıyı oluşturmak için 2 yol uygulayabiliriz: Hiyerarşik organizasyon Diyalog (ağ diyagramı) Yerel yapıyı bitirdik. Şimdi ise navigasyon tasarımında global yapıya bakalım. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon Hiyerarşik organizasyon; bağlantılar, ekranlar, sayfalar ve durumlar arasında mantıksal bir gruplama yapılmasını içerir. Mantıksal gruplama genellikle işlev sınırlarına göre yapılır. Ör. Bir uygulama yapısı veya bir web sitesinin yapısı 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon Powerpoint Giriş Pano Slaytlar Yazı Tipi Paragraf Çizim Ekle Tablo Resimler Çizimler Bağlantılar Metin Tasarım Sayfa Yapısı Temalar Arka Plan Geçişler Önizleme Bu slayda Geçiş Zamanlama Animasyonlar Animasyon Gelişmiş animasyon 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Hiyerarşik Organizasyon Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon Hacettepe Üniversitesi Hakkında Tanıtım Tarihçe Logomuz ve Öyküsü Misyon, Vizyon ve Değerler Akademik Fakülteler Enstitüler Yüksek okulları Araştırma Araştırma Merkezleri Hacettepe Teknokent Teknoloji Transfer Merkezi Öğrenciler Kanun ve Yönetmelikler Öğrenci İşleri Eğitim Komisyonu Uluslararası Öğrenci Ofisi İdari Yönetim Birimleri İç Denetim Bilgi İşlem 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Global Yapı > Hiyerarşik Organizasyon Karışık hiyerarşiler yerine daha genel kategoriler kullanın. Sınıflama, kullanıcının amacına hizmet etmelidir. Miller’in 7+-2 sihirli sayısı sadece kısa süreli bellek içindir, görsel arama için değil! Hiyerarşik organizayon yaparken de kaçınmamız gereken şeyler vardır. -Karışık hiyerarşilerin navigasyonu zor olacağından Karışık hiyerarşiler yerine daha genel kategoriler kullanın Birçok kaynak, menude seçenek sayısının 7 civarında olmasını söyler ama Miller’in 7+-2 sihirli sayısı sadece kısa süreli bellek içindir, görsel arama için değil! Aslında bu sayı 60 civarı da olabilir eğer öğeler gözün rahatça bulabileceği şekilde yerleşmişse Burda önemli olan şey sınıflamanın doğallığıdır yani kullanıcının amacına ne kadar hizmet ettiğidir. Eğer bir şehir hakkında bilgiye sahip olmak istiyorsam, bir seçenek alfabetik listeye bakmak benim için daha uygun olacaktır. Diğer bir seçenekte ise bölgelere göre listelenmiş şehirlere belki benim için daha uygun olacaktır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Diyalog Hiyerarşinin olmadığı komut ve ekran akışları da vardır. Navigasyon Tasarımı Global Yapı > Diyalog Hiyerarşinin olmadığı komut ve ekran akışları da vardır. İnsan-bilgisayar etkileşiminde, kullanıcı ve sitem arasındaki hiyerarşinin olmadığı etkileşime diyalog denir. Evlilik örneği …’la evlenmeyi kabul ediyor musun? Evet Evet …’la evlenmeyi kabul ediyor musun? Global yapıda hiyerarşik organizasyonu bitirdik. Şimdi ise sıra diyalogda. Evlilik anında geçen diyalogu düşünelim. Düğün esnasında belediye başkanın sorduğu sorular bellidir. Sadece isimler için boşluklar vardır. Her düğünde bu sözler aynıdır fakat sözler farklı adlarla başlar. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Navigasyon Tasarımı Global Yapı > Diyalog İnsan-bilgisayar etkileşimindeki diyaloglar da aynıdır. Genel kalıplar vardır ama ayrıntılar her çalışmada farklılık gösterir. …’la evlenmeyi kabul ediyor musun? Evet Evet …’la evlenmeyi kabul ediyor musun? İnsan-bilgisayar etkileşiminde de diyaloglar aynıdır. Pencereler arasındaki geçişlerin belli bir kalıbı vardır. Fakat ayrıntılar her zaman değişir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Global Yapı > Diyalog Senaryolar, sistemdeki sadece bir yolu gösterir. Eğer tüm sistemi tanımlamak için, bir sistemdeki tüm yolları ve döngüleri göz önüne almalıyız. Bunu yapmanın en basit yolu ise ağ diyagramları kullanmaktır. Böylece; Neyin neye sebep olacağını, Neyin ne zaman olacağını ve Dalları ve döngüleri gösterebiliriz. Senaryolar, sitemdeki sadece bir yolu gösterir. Tüm sistemi tanımlamak için sistemdeki tüm yolları ve döngüleri göz önüne almalıyız. Bunun farklı yolları 16.bölümde anlatılmaktadır. En basit yol ise birbirine bağlı ekranları oklarla gösteren ağ diyagramı kullanmaktır. Böylece; Neyin neye sebep olacağını, Neyin ne zaman olacağını ve Dalları ve döngüleri gösterebiliriz. Hiyerarşik gösterimde olduğumuzdan daha görev eğilimli oluruz. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı Global Yapı Diyalog > > > Ağ diyagramları Ana ekran Kullanıcı sil Onayla Kullanıcı ekle Bu diyagram ise mesaj sisteminden ekleme ve silme ekranlarını gösterir. Ana ekrandan ya kullanıcı sil ya da kullanıcı ekle ekranlarına gideriz. Bunun haricinde, kullanıcı ekle ekranından sonra daima ana ekrana geri döneriz. Fakat kullanıcı sil ekranından sonra bir onay gerektirir. Bunun gibi ağ diyagramlarıyla ekran tasarımı hakkında detaylı bilgi alırız. Sistemdeki tüm yolları gösterir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Navigasyon Tasarımı > Wider Still ‘Hiç kimse bir ada değildir. Bütünün bir parçasıdır.’ (Donne, 1624) Tasarımlarımız diğer araçlarla ve uygulamalarla uyumlu olmalıdır. Bunun farklı çıkarımları vardır: Stil konuları Fonksiyonel konular Navigasyon konuları Navigasyon tasarımın altında bir de wider still adlı bir başlığımız var. Hiç kimse bir ada değildir. Bütünün bir parçasıdır. Bu sözden hareketle bizde diyebiliriz ki, tasarımlarımız bir ada değildir. Bütünün bir parçasıdır.’ Stil konuları: Uygulamalar arasındaki tutarlılığı sağlamak için platform standartlarına uyumluluk gösteririz. Örneğin ileri ve geri, oyna ve duraklat butonları gibi. Fonksiyonel konular: Her uygulamada; dosyalarla etkileşime girmeye, standart formatları okumaya ve kes/yapıştır gibi işlemleri yapabilmeye ihtiyacımız vardır. Navigasyon konuları: Uygulamalar arasında bağlantılara gereksinim duyabiliriz. Örneğin; bir uygulamadan diğerine veri gömmemize izin verilmelidir, ya da, bir mail sisteminde ek dosyaya tıkladığımızda ek uygulamanın başlatılması gibi. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Mucho/a

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Ekran tasarımındaki ilkeler: Sor Kullanıcı ne yapıyor? Düşün Hangi bilgi gerekli? Kullanıcının ne gibi karşılaştırmalar yapması gerekebilir? Bileşenlere hangi sırada ihtiyaç duyuluyor? Şu ana kadar etkileşimli uygulamaları oluşturan farklı elemanlardan bahsettik, fakat onları nasıl bir araya koyacağımızdan söz etmedik. Ekran tasarımındaki ilkeler, etkileşimli tasarım alanındaki ilkelerle benzer yapıdadır. Bu ilkeler şöyledir: Tasarla Gerekli etkileşimlerin düzeni oluşturmasını sağla 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim > Yerleşim için Araçlar Gruplama ve Yapılanma Grupların ve ögelerin sıralanması Dekorasyon Hizalama Boş alan Kullanıcının bir araçla etkileşime girmesini kolaylaştıran görsel araçlarımız vardır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Çevrimiçi Kitap Satın Alma Formu Adres Posta Kodu Ülke Ad Soyad E-posta adresi Telefon Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Satın al Burda gördüğünüz gibi, kötü tasarlanmış bir çevrimiçi kitap satın alma formu var. Şimdi 3lü gruplar olup size vereceğim kağıtlarla ve renkli kalemlerle bu formu daha düzgün hale getirmeye çalışacağız, az önce söylediğim maddeleri göz önüne alarak. Bunu için 3 dakikamız var. http://e.ggtimer.com/3%20minutes http://www.webcountdown.net/?c=180 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Gruplanma ve Yapılanma Ad Soyad E-posta adresi Telefon Adres Posta Kodu Ülke Eğer ögeler mantıksal olarak birbirine aitse, fiziksel olarak da onları gruplarız. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Grupların ve Ögelerin Sıralanması Ad Soyad E-posta adresi Telefon Adres Posta Kodu Ülke Kullanıcı tarafından takip edilecek sıra nedir? Bu durum ekrandaki sıralamayı da değiştirecektir. Böylece bu veri giriş formunda, tab tuşuna bastığımız zaman nasıl sıra izlenecek onu da belirleriz. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Dekorasyon Ulaşım Bilgileri Adres Posta Kodu Ülke Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Ödeme Bilgileri Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Tasarımda; kutu, çizgi, yazı tipi, metin yada arkaplan rengi dekorasyon araçlarıyla gruplamaları vurgulayabiliriz. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Hizalama Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Adres Posta Kodu Ülke Adres Bilgileri Listelemelerin hizalaması oldukça önemlidir. Soldan sağa doğru okuyanlar için, yazılarımız sola doğru hizalı olmalıdır. Fakat, tamsayılar sağa doğru ve virgüllü sayılar ise virgülden öncesi için sağa doğru hizalanmalıdır. Birden fazla sütunlu tablolar daha fazla dikkat ister. Yazı sütunlarının, en uzun yazı için yeteri kadar geniş olması gerekir. Sütunları birbirine bağlayan noktalı çizgiler, satır ve sütun arkasındaki arkaplan renkleri okumayı kolaylaştırır. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Kart Bilgileri 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Yerleşim için Araçlar > > Boş Alan Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Adres Posta Kodu Ülke Adres Bilgileri Boş alanı, *Blokları ayırmak için kullanırız. Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Kart Bilgileri 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Adres Posta Kodu Ülke Ad Soyad E-posta adresi Telefon Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Adres Posta Kodu Ülke Adres Bilgileri Kart Tipi Visa Mastercard Kart Numarası Güvenlik Kodu Kart Bilgileri Formumuzun ilk hali, ve ikinci hali. Satın al Satın al

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim > Kullanıcı Hareketi ve Kontrol Bilgi Girişi Ne yapacağını bilme Sağlarlık Ekran tasarımı ve yerleşim başlığı altında diğer alt başlığımız ise kullanıcı hareketi ve kontrol. Kullanıcı hareketi ve kontrolün altında ise bilgi girişi, ne yapacağını bilme ve zorluklar var. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Kullanıcı Hareketi ve Kontrol > > Bilgi Girişi Form tabanlı ara yüzler ve diyalog kutuları, hem kullanıcıya bilgi sunulan hem de kullanıcının bilgi girdiği yerlerdir. Yerleşim araçları (hizalama, boş alan vb.) bilgi girişi alanlarında da uygulanır. Ad Soyad E-posta adresi Telefon Kişisel Bilgiler Form tabanlı ara yüzler ve diyalog kutuları, hem kullanıcıya bilgi sunmak hem de kullanıcının bilgi girdiği yerlerdir. Yerleşim araçları (hizalama, boş alan vb.) bilgi girişi alanlarında da uygulanır ki biz de etkinliğimizi, form tabanlı bir arayüzün tasarımıyla ilgili yaptık. Form tasarımlarında hizalama önemlidir. Alanların etiketlerini sağa hizalı yapmak bazı durumlarda en iyi sonucu verebilir. Önceki etkinlikte yaptığımız gibi etiketleri sola hizalayıp hepsine aynı genişlik verebiliriz veya alanların üzerine etiketleri yazabiliriz. Bunun haricinde kullanıcıların soldan sağa ve yukarıdan aşağıya okuması ekran tasarımlarımızda da yansımalıdır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Kullanıcı Hareketi ve Kontrol > > Ne Yapacağını Bilme Hangi ögelerin aktif olduğunu bilmemek ne olacağı konusunda belirsizlik yaratır. Herkes aynı işlevler için benzer butonlar ve menüler tasarlayabilir. Fakat, bu yeterli değildir. Menülerdeki ikonlar ve etiketler açık olmalıdır. Kaydet, sil, yazdır gibi komutlar için standartlardan faydalanabiliriz. Sisteme özel hareketler için, daha genel ilkelere ihtiyacımız vardır. Ör. Kalın yazma Ekrandaki bazı ögeler pasif, bazıları ise aktiftir, kullanıcının bu alanlara bilgi girme gibi işlemler yapması gerekir. Bazen ise hangi ögelerin aktif olduğu belli değildir. Bunu engellemek için Herkes birbirine benzeyen menüler ve butonlar tasarlarsa, kullanıcılar onları gördüğü zaman daha kolay tanıyabilecek. Bu sadece yeterli değildir. Menüdeki ikonların ve etiketlerin de anlaşılabilir olması gerekir. Kaydet, sil, yazdır ikonları sabittir. Fakat bazen daha genel kurallar izlememiz gerekir. Örneğin bir butonun kalın harflerle yazılması sistemin o anki durumunu ifade eder. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Kullanıcı Hareketi ve Kontrol > > Sağlarlık (Affordance) Bir nesnenin şekli ve özellikleri onunla ne yapabileceğimizi önerir. Sağlarlıklar içsel değildir, tecrübeye ve kültüre bağlıdır. Bir nesnenin veya ögenin şeklinden veya özelliklerinden dolayı onla ne yapacağımıza karar verebilmektir. Örneğin, fiziksel materyaller için bir kol itmeyi veya çekmeyi gerektirebilir ya da bir buton ittirmeyi gibi. Bu sağlarlıklar, yeni etkileşim materyali tasarlarken kullanılabilir. Yani gerçek dünyadaki nesneleri taklit edebilir. Sağlarlıklar içsel değildir. Tecrübelere ve kültüre bağlıdır. Yine deneyimli bir kullanıcı eğer tek tıklama işe yaramıyorsa çift tıklaycaktır. Ama yeni kullanıcılar bunu düşünemeyebilir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim > Uygun Görünüm Bilgiyi sunma Estetik ve fayda Karışım oluşturma: Renk ve 3B Yerellik ve Evrensellik Ekran tasarımı ve yerleşim başlığı altında diğer alt başlığımız ise uygun görünüm. Uygun görünümün altında ise… 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Bilgiyi Sunma Sayılar, yazılar, haritalar, tablolar, grafikler, sanal gerçeklikler Bilgiyi sunuşumuzun amacımızla örtüşmesi gerekir. Etkileşimli sistemlerde bilgiyi sunmak kolaydır. Bilgiyi ekrandan sunma şeklimiz bilginin çeşidine bağlıdır. Sayılar, yazılar, haritalar, tablolar, grafikjler, sanal gerçeklikleri teknoloji sayesinde rahatlıkla sunabiliriz. Önemli olan amacımızdır. Örneğin komplex bir verimiz varsa, histogram, dağılım grafiği kullanırız. Hiyerarşik yapılar için bazı diyagramlar kullanırız. Dediğimiz gibi önemli olan sunumumuzun amacımızla örtüşmesi gerekir. Etkiileşimli sistemler bilgiyi sunma kolaylaşır. Çünkü birçok bilgiyi sunma seçeneğine sahibizdir ve böylece farklı hedefleri başarmak mümkün olur. Örneğin, Bir klasördeki dosyaları bakarken onları farklı şekilde sıralayabiliriz. İsim güncelleme tarihi gibi 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Estetik ve Fayda Güzel gözüken bir arayüz, iyi bir arayüz olduğu anlamına gelmez. Estetik ve fayda bazen birbirine karşıt olabilirler. Okunurluğu artırmak için arkaplan düşük zıtlıkta olmalıdır. Estetik kavramların dikkatli uygulanışı anlaşırlılığı da artırır. Güzel bir arayüz iyi bir arayüz olduğu anlamına gelmez. Diğer bir deyişle, estetik ve fayda bazen birbirine karşıt olabilir. Okunurluluğu artırmak için yazıların arkasındaki arkaplan düşük zıtlıkta olmalıdır. Fakat birçok grafik tasarımcı bunu ihmal eder ve yoğun arka planları kullanırlar. Estetik kavramların dikkatlice uygulanmasıyla anlaşılırlık da artar. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Karışım Oluşturma: Renk ve 3B Birçok arayüzün en kötü özelliklerinden biri aşırı renk kullanımıdır. Aşırı renk kullanımı dikkat dağıtıcı olabilir. Renk körü bireyler unutulmamalıdır. Renkler tutumlu kullanılmalıdır. 3 boyutlu yazılar ve pasta grafikleri okumayı zorlaştırır. Birçok arayüzün en kötü özelliği aşırı renk kullanımıdır. Eğer renkler aşırı çeşitli fontlarla kullanılırsa daha da kötü olur. Popülasyonun çoğu renk körüdür bu demekki yazılarımızın bir bölümü bazı kullanıcılar için görünmezdir. Renkler tutumlu bir şekilde kullanılmalıdır. 3 boyutlu yazılar ve pasta grafikleri okumayı zorlaştırır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Uygun Görünüm > > Yerellik ve Evrensellik Bir yazılımı farklı diller ve kültürler için uygun yapma aşamasına denir. Dili değiştirme evrenselliğin sadece en basit bölümüdür. Hizalama ve yerleşim konusunda da tekrar düzenleme yapmak gerekir. Birçok ikon ve resme yüklenen anlam kültürler arasında farklılık gösterir. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Uygun Görünüm Yerellik ve Evrensellik > > > Türkçe Vikipedi 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Ekran Tasarımı ve Yerleşim Uygun Görünüm Yerellik ve Evrensellik > > > Arapça Vikipedi 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Terminar

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tekrarlama ve Prototipleme Tamam? değerlendirme tasarım prototip Bitti! Yeniden tasarım İnsanlar kompleks varlıklardır ve tasarımcılar da yanlış yapabilir. Hemen hemen her etkileşim tasarımları bir tekrarlama süreci geçirir. İlk olarak meslektaşlarımıza ve kullanıcılara kağıt tasarımlarımızı ve storyboardlarımızı gösteririz. Yazılımın prototip versiyonlarını oluştururuz. Böylece neyin kabul edilebilir olduğunu neyin gelişime ihtiyacı olduğunu anlayabiliriz. Buna biçimlendirici (formative) değerlendirme diyoruz. Eğer bunu sürecin sonunda yapıyorsak bu özetleyici değerlendirme olur. Sistemi değerlendirme sonuçlarında problemler ortaya koyulur ve tekrar tasarım aşamasıyla devam edilir. düzeltilebilecek problemler olmayana kadar bu sürece devam edilir ve son noktaya ulaşılır. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Tekrarlama ve Prototipleme B A Tekrarlama ve prototipleme, etkileşimli tasarım için önemli bir yer tutar. Tepe tırmanma prototipe örnek olarak verilebilir. Hayal edin. Açık kırsal bir yerde duruyorsunuz. En yüksek noktayı bulana kadar yürüyorsunuz. Sonunda zirveye ulaşıyorsunuz. Prototiplemede de bir yerde başlarsınız. Onu daha iyi yapabilmek için bir değerlendirme yaparsınız. Bir değişim uygularsınız ta ki daha iyi bir nokta bulamayana kadar. Fakat burda önemli olan başlama noktasıdır. Eğer A noktasında başlarsanız, yerel maksimum noktasına ulaşırsınız. Eğer B’de başlarsanız önce yerel maksimuma sonra global maksimum noktasına ulaşırsınız. Yerel maksimuma ulaşma problemi arayüzler için de muhtemeldir. Eğer kötü bir tasarımla başlarsanız, sadece o kötü tasarımın biraz daha iyi hale gelmiş şekline ulaşırsınız. Buradan anlaşılıyor ki, prototip metodlarının anlaşılması için 2 şeye ihtiyacımız vardır. Neyin yanlış olduğunu ve onu nasıl geliştireceğimizi anlamak İyi bir başlangıç noktası. Böylece yerel maksimuma ulaşmak yerine global maksimuma ulaşabiliriz. İyi bir başlangıç noktasına sahip olmak için deneyimin önemi büyüktür. Ya da birçok başlama noktası seçip geliştirme aşamasında bu başlangıç noktalarını bir bir eksiltmektir. Neyin yanlış olduğunu ve onu nasıl iyileştireceğimizi anlamak İyi bir başlangıç noktası 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

BTÖ711: İnsan-Bilgisayar Etkileşimi Etkileşimli Tasarımın Temelleri Tasarım Nedir? Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı Ekran Tasarımı ve Yerleşim Tekrarlama ve Prototipleme 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi

Gracias

BTÖ711: İnsan-Bilgisayar Etkileşimi Kaynaklar Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-computer interaction. England: Prentice Hall. Haeffele, D. (2010). Hci work storyboard. Retrieved from http://www.drewhaeffele.com/kilin-time/single-gallery/7011802 Norman, D.A. (1990). The design of everyday things. New York: Doubleday. 17.09.2018 BTÖ711: İnsan-Bilgisayar Etkileşimi