ETKİLEŞİM TASARIM TEMELLERİ HALE ILGAZ. 2/41 Etkileşim Tasarım Temelleri  Tasarım nedir?  Tasarım süreci  Kullanıcı Odağı  Senaryolar  Seyir tasarımı.

... konulu sunumlar: "ETKİLEŞİM TASARIM TEMELLERİ HALE ILGAZ. 2/41 Etkileşim Tasarım Temelleri  Tasarım nedir?  Tasarım süreci  Kullanıcı Odağı  Senaryolar  Seyir tasarımı."— Sunum transkripti:

1 ETKİLEŞİM TASARIM TEMELLERİ HALE ILGAZ

2 2/41 Etkileşim Tasarım Temelleri  Tasarım nedir?  Tasarım süreci  Kullanıcı Odağı  Senaryolar  Seyir tasarımı  Ekran tasarımı ve yerleşim  Tekrarlama ve prototipleme BTO - 611 İnsan - Bilgisayar Etkileşimi

3 3/41 Tasarım Nedir? Tasarım HedefSınırlılıkÖdünler BTO - 611 İnsan - Bilgisayar Etkileşimi

4 4/41 Tasarım Nedir? Hedefleri sınırlılıklar dahilinde gerçekleştirmek.  Hedefler: Tasarımın amacı ne? Kim için? Ne istiyorlar?  Sınırlılıklar: Hangi materyali kullanmalıyız? Standartlarımız neler? Süre ve maliyet?  Ödünler: Hedefler ya da sınırlılıkların karşılanması için hangilerinden vazgeçilecek? BTO - 611 İnsan - Bilgisayar Etkileşimi

5 5/41 Tasarımın Altın Kuralı  Materyallerinizi anlayın.  İnsan bilgisayar etkileşimi için; BTO - 611 İnsan - Bilgisayar Etkileşimi Psikolojik,sosyal bakış açıları, hataları… Kısıtlılıkları, kapasitesi, araçları, platformları…

6 6/41 Hata ve İnsan  İnsanlar hata yapabilirler ancak sistemler bu hataları ve bu hataların sonuçlarını azaltıcı yönde tasarlanmalılardır.  İnsanların hatalarının sebepleri ayrıntılı olarak incelenir ve bilinirse buna uygun tasarımlar yapılarak bunların oluşmaları aza indirgenebilir. BTO - 611 İnsan - Bilgisayar Etkileşimi

7 7/41 Kullanıcı  Tutumlar çok önemlidir.  İnsan bilgisayar etkileşimi sürecinin başarısının kullanılan metodların ne kadar iyi olduklarından çok kullanıcıyı temele almalarından kaynakladığı belirtilmektedir.  Kullanıcıyı temel alın  Kullanıcıyı merkezde tutun  En sonda kullanıcıyı hatırlayın. BTO - 611 İnsan - Bilgisayar Etkileşimi

8 8/41 Tasarım Süreci BTO - 611 İnsan - Bilgisayar Etkileşimi ne isteniyor? analiz tasarım uygulama ve harekete geçirme prototipleme görüşmeler Ne var? Ne isteniyor? yönergeler ilkeleri diyalog gösterimleri özellikleri belirleme dökümantasyon yardım bulguların değerlendirilmesi senaryolar ve içerik analizleri

9 9/41 Kullanıcı Odaklı  Kullanıcıyı tanıyın:  Kullanıcılar kim?  Siz değilsiniz  Onlarla konuşun  Onları gözlemleyin  Hayal gücünüzü kullanın BTO - 611 İnsan - Bilgisayar Etkileşimi

10 10/41 Senaryolar  Tasarımlar için hikayeler,  Etkileşimler için zengin hikayeler.  Senaryolar en basit tasarım sunumlarıyken aynı zamanda en esnek ve en güçlüleridir de. BTO - 611 İnsan - Bilgisayar Etkileşimi

11 11/41 Senaryolar  Senaryolar ne kadar ayrıntılı olursa tasarım süreci de o kadar kolay olur.  Storyboard’lardan yararlanılabilir.  Detaylı storyboard’lar sayesinde kullanıcı hangi aşamada neyi yapacak, neye ihtiyacı olacak gibi bilgilere daha rahat ulaşılmış olur. Bu da uygulamaya yansır. BTO - 611 İnsan - Bilgisayar Etkileşimi

12 12/41 Senaryolar  Diğer tasarımcılarla ve kullanıcılarla iletişimde bulunun.  Diğer modellere de uygunluğuna bakın.  Dinamikleri açıklayın. BTO - 611 İnsan - Bilgisayar Etkileşimi

13 13/41 Senaryolar  Senaryolar doğrusaldırlar. Bunun olumlu ve olumsuz yanları vardır:  Zaman doğrusaldır: Hayat ve zaman doğrusaldır. Bu nedenle buna en yakın senaryoları anlamak daha kolaydır.  Alternatifi yoktur: Gerçek etkileşimlerde -insanla ya da sistemle- seçenekler vardır. Senaryolar bu alternatifleri gösteremez. BTO - 611 İnsan - Bilgisayar Etkileşimi

14 14/41 Senaryolar  Senaryolar;  Tasarım sürecinde tekrar tekrar kullanılabilen,  Ne istediğimiz konusunda yardımcı olabilen,  Kullanıcıların var olan tasarıma ilişkin tepkilerini anlamımızı sağlayabilen,  Son değerlendirme için testlere imkan veren kaynaklardır. BTO - 611 İnsan - Bilgisayar Etkileşimi

15 15/41 Seyir Tasarımı  Widgets (Bilgisayar ekranındaki tuş, buton gibi öğelerin her biri)  Ekranlar-pencereler  Uygulamanın seyri  Ortam BTO - 611 İnsan - Bilgisayar Etkileşimi

16 16/41 Seyir Tasarımı  Bu uygulamayı kim kullanacak?  Uygulama hakkında ne düşünecekler?  Uygulama ile ne yapacaklar? BTO - 611 İnsan - Bilgisayar Etkileşimi

17 17/41 Seyir Tasarımı  Yerel yapılanma:  Bir ekrandan ya da sayfadan dışarı bakış  Global yapılanma:  Sitenin yapısı, ekranlar arası geçişler BTO - 611 İnsan - Bilgisayar Etkileşimi

18 18/41 Yerel Yapılanma BTO - 611 İnsan - Bilgisayar Etkileşimi hedef başlangıç

19 19/41 Yerel Yapılanma  Bilgi sistemlerinde “şu an neredeyim” sorusuna cevap olabilecek bileşenler bulunması önemlidir.  Bunlar bireyin sistemi kontrol altında hissetmesini ve seyri anlamasını sağlar.  Sistemde nerede olduğunu, hedefe nasıl ulaşacağını bilmeyen birey kaybolma hissi yaşayacaktır. BTO - 611 İnsan - Bilgisayar Etkileşimi

20 20/41 Global Yapılanma BTO - 611 İnsan - Bilgisayar Etkileşimi sistem bilgi ve yardımyönetimmesajlar kullanıcı eklekullanıcı kaldır  Hiyerarşik Organizasyon

21 21/41 Global Yapılanma  Hiyerarşik Organizasyon;  Derin hiyerarşiler seyir açısından sorunludurlar.  Bu nedenle gruplamalar yapmak yararlı olacaktır.  Bileşenleri organize ederken kullanıcının amacına göre olması önemlidir. BTO - 611 İnsan - Bilgisayar Etkileşimi

22 22/41 Global Yapılanma  Diyalog BTO - 611 İnsan - Bilgisayar Etkileşimi ana ekran kullanıcıyı kaldır onayla kullanıcı ekle

23 23/41 Global Yapılanma  Diyalog;  Hiyerarşik yapılar gibi dallanmalar içerir. Ancak kullanıcının nereye gideceği bellidir.  Çapraz bağlantılı hiyerarşilerde, detaylı etkileşim aşamalarına gelindiğinde –kayıt ekleme, silme gibi- hiyerarşi ile ilgisi olmayan ekranlar ya da komutlarla karşılaşılabilir. BTO - 611 İnsan - Bilgisayar Etkileşimi

24 24/41 Wider Still  Stil sorunları  Standartlara, tutarlılığı sağlamak için menülerin yerleşimlerine dikkat etmek gerekmektedir.  Fonksiyonel sorunlar  Seyir sorunları  Uygulamalar arasındaki bağlantılar önemlidir.  Gömülü verilere erişim için doğru yönlendirmeler gerekir. BTO - 611 İnsan - Bilgisayar Etkileşimi

25 25/41 Ekran Tasarımı ve Yerleşim SorKullanıcı ne yapıyor? Düşün Hangi bilgi gerekli? Karşılaştırmalar ve sıralamalar neler? Tasarla Etkileşimler için yerleşimi gerçekleştir. BTO - 611 İnsan - Bilgisayar Etkileşimi

26 26/41 Yerleşim Araçları  Gruplama ve yapılandırma  Grupların ve öğelerin sıralaması  Dekorasyon  Hizalama  Beyaz / Boş alan BTO - 611 İnsan - Bilgisayar Etkileşimi

27 27/41 Gruplama ve Yapılandırma  Mantıksal olarak ilgili olan öğeler fiziksel olarak da gruplanabilir.  Bu durum farklı seviyelerde yapılar içerir. BTO - 611 İnsan - Bilgisayar Etkileşimi Ödeme ayrıntıları: İsim Adres: … Kredi Kart no Dağıtım ayrıntıları: İsim Adres: … Dağıtım zamanı Sıralama ayrıntıları: Öğe sayı fiyat/öğe fiyat 10 kutu 7 3.71 25.97 …… … … …

28 28/41 Grupların ve Öğelerin Sıralaması  Kullanıcı için doğal sıralama nedir?  Bu sorunun cevabı doğru sıralamayı işaret eder.  Veri giriş formları ya da diyalog kutuları için de sıralamaya dikkat etmek gerekir.  Tab tuşunun ilerleyişini ayarlamak önemlidir. BTO - 611 İnsan - Bilgisayar Etkileşimi

29 29/41 Dekorasyon  Gruplamaları net olarak belli etmek için süslemeler kullanılabilir.  Arka plan renkleri, fontlar gruplamaları vurgular.  Mantıksal öğeler için kutular, yazılar içinse farklı fontların kullanımı gruplamaları sağlar. BTO - 611 İnsan - Bilgisayar Etkileşimi

30 30/41 Hizalama  Soldan sağa okunan dillerde metinlerin sola hizalı olması gereklidir.  Sağa ya da iki yana dayalı metinler okumayı güçleştirir. BTO - 611 İnsan - Bilgisayar Etkileşimi

31 31/41 Hizalama BTO - 611 İnsan - Bilgisayar Etkileşimi Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell 

32 32/41 Hizalama  İzlenim olarak en uzun sayı en büyük sayıdır yanılgısına düşürebilir.  Amaç önemlidir. BTO - 611 İnsan - Bilgisayar Etkileşimi 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

33 33/41 Hizalama  Çok sütunlu tabloları yönetmek; BTO - 611 İnsan - Bilgisayar Etkileşimi çikolata……………………………………15 sakız ………………………….....................20 şeker …………………….............................8 çikolata15 sakız20 şeker8

34 34/41 Beyaz / Boş Alan BTO - 611 İnsan - Bilgisayar Etkileşimi  Ayırmak için boşluk

35 35/41 Beyaz / Boş Alan  Yapılandırmak için boşluk BTO - 611 İnsan - Bilgisayar Etkileşimi

36 36/41 Beyaz / Boş Alan  Vurgulamak için boşluk BTO - 611 İnsan - Bilgisayar Etkileşimi

37 37/41 Kullanıcı Hareketi ve Kontrol  Bilgi girişi  Formaların tasarımı önemlidir.  Ne yapacağını bilmek  Aktif-pasif alanlar belirginleştirilmelidir. Standartlardan faydalanılmalıdır.  Zorluklar  Kullanıcı nereye nasıl tıklayacağını bilmeli. BTO - 611 İnsan - Bilgisayar Etkileşimi

38 38/41 Uygun Görünüş  Bilginin sunumu  Estetik ve fayda  Renk ve 3 boyut  Yerelleştirme / Uluslararası yapma BTO - 611 İnsan - Bilgisayar Etkileşimi

39 39/41 Tekrarlama ve Prototipleme BTO - 611 İnsan - Bilgisayar Etkileşimi prototiplemedeğerlendir tasarla yeniden tasarla oldu! tamam?

40 40/41 Tekrarlama ve Prototipleme  Prototipleme için iki önemli unsur;  Neyin yanlış olduğunu anlamak ve geliştirmek.  İyi bir başlangıç noktası belirlemek. BTO - 611 İnsan - Bilgisayar Etkileşimi

41 41/41 Teşekkürler… BTO - 611 İnsan - Bilgisayar Etkileşimi