Etkileşim tasarımının temelleri

... konulu sunumlar: "Etkileşim tasarımının temelleri"— Sunum transkripti:

1 Etkileşim tasarımının temelleri
Hacettepe Üniversitesi Bahar Dönemi BTÖ 711 İnsan-Bilgisayar Etkileşimi DERS SORUMLUSU: doç.Dr. Hakan tüzün Hazırlayan: Ceylan dalgıç

2 Tasarım Tasarım: Hedefleri sınırlılıklar dahilinde gerçekleştirmek
Hedefler: Tasarımın amacı ne? Kim için üretilecek? Ürünümüzü neden istesinler? Sınırlılıklar: Hangi materyalleri kullanmalıyız? Hangi standartları göz önüne almalıyız? Maliyeti yaklaşık ne kadardır? Geliştirmek için ne kadar zamana ihtiyaç var? Sağlık ve güvenlik açısından dikkat edilmesi gereken hususlar var mı? Sınırlılıklar dahilinde tüm hedeflerimize ulaşmak her zaman mümkün olmayabilir. Trade-off (ödün verme): Bir hedefe ulaşabilmek için bir başka hedef veya kısıtlılıktan ödün verme. Örneğin bir ürünü düşük gelirli ailelerin de alabilmesini istiyorsak, ürünün maliyetini düşürmek için çok şart olmayan bazı fonksiyonlarından vazgeçmemiz gerekir; veya hiçbir fonksiyonundan vazgeçemiyorsak düşük gelirli aileleri hedeften çıkarmamız gerekir.

3 İyi Bir Tasarım İyi bir tasarım, şartlardan ve bağlamdan ayrı düşünülemez. Örneğin, çelikten yapılmış sandalyelerin ayakları genelde ince olur. Tahta sandalyeler ise daha kalın bacaklara sahip olur. Eğer sandalyeler materyalin özellikleri göz önüne alınmadan tasarlansaydı, çelik sandalyeler çok ağır olurdu; tahta sandalyelerin ise bacakları kolaylıkla kırılırdı. İnsan-bilgisayar etkileşiminde de materyal «insan» ve «bilgisayar»dır. Bu yüzden bu ikisini anlamak önemlidir. İnsan: psikolojik ve sosyal boyutlar, insan hataları göz önüne alınmalı. Bilgisayar: sınırlılıklar, kapasite, araçlar, platformlar göz önüne alınmalı.

4 Tasarım Süreci Zaman kısıtlı! Tasarımın kalitesi ve tasarımın süresi
arasında trade-off vardır. Ne isteniyor? görüşmeler gözlem video kayıtları kullandıkları dokümanlar yönergeler tasarım ilkeleri Yazılım/donanım Dökümantasyon analiz tasarım uygulama ve dağıtım İnsan bilgisayar etkileşimi üzerine uzman kişiler genelde çok sonradan işin içine katılırlar; fakat bir şeyleri değiştirmek için çok geç olabilir ve ortaya kullanılabilir olmayan sistemler çıkar. prototipleme

5 Kullanıcı Odaklılık Bir tasarımın başlangıç noktası hedef kitledir. Kullanıcıları tanı! Hedef kitleyi belirle stakeholder (paydaş): bir sistemden doğrudan veya dolaylı etkilenen kişiler Empati yap Onlarla konuş Onları gözlemle Hayal gücünü kullan persona (karakter): hedef kitleye dahil olan hayali bir kişinin resmedilmesi

6 Kullanıcı Odaklılık Örnek bir persona (karakter):
Betty is 37 years old. She has been Warehouse Manager for five years and has worked for Simpkins Brothers Engineering for 12 years. She didn’t go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident three years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).

7 Senaryo Senaryolar ne istediğimizi görmemize yardım eden, sistemi değerlendirmeyi kolaylaştıran olay kurgularıdır. Bu kurgular, tasarımınızdaki potansiyel tehditleri, potansiyel etkileşimleri fark etmenizi kolaylaştırır. Örnek senaryo: Kullanıcı save yerine quit butonuna basar ve kullanıcının çalışması silinir. Senaryolar doğrusaldır. Senaryolardaki potansiyel etkileşimler bellidir. Bu durumun, Avantajı: Zaman doğrusaldır. Bu yüzden senaryoları anlamak kolaydır. Dezavantajı: Alternatif yolları göstermez. Bu yüzden bir senaryoda bazı etkileşimleri gözden kaçırmak mümkündür.

8 Navigasyon (gezinim) Tasarımı
Farklı uygulamalarda farklı gezinim tasarımları olabilir. Bir kelime işlemci programını (örneğin Word) düşünecek olursak, Grafik bileşenleri (widgets): Menü ve tuşlardaki uygun görseller ve anlatımlar bu menü ve tuşları nasıl ve hangi amaçla kullanacağınızı anlamanıza yardımcı olur. Ekranlar ve pencereler: Ekrandaki nesneler rahatça bulunabilir olmalı, birbirleriyle ilişkili nesneler gruplandırılmalıdır. Uygulama içi navigasyon: Kullanıcı bir butona bastığında ne olacağını anlayabilmeli, etkileşim sırasında hangi konumda bulunduğunu bilmelidir. Ortam: Sistem diskten dokümanları okuyabilmeli, kullanıcı kesme, yapıştırma gibi işlemleri yapabilmelidir.

9 Navigasyon (gezinim) Tasarımı
Uygulamayı kimler kullanacak? Uygulama hakkında ne düşünecekler? Uygulamayla neler yapacaklar? Yerel yapı: Ekran içi yapı Neredeyim Neler yapabilirim Nereye gidiyorum / Ne olacak Neredeydim / Ne oldu

10 Navigasyon (gezinim) Tasarımı
Yerel yapıdaki bazı problemler: Tıklanabilir ve tıklanamayan nesnelerin ayırt edilebilir olmaması Geri alma özelliği olmaması Ayrıntıların kaçırılması (iri resim,banner vb. kullanımı) Renklerin ayırt edilememesinden dolayı nesnelerin görülmemesi

11 Navigasyon (gezinim) Tasarımı
Global yapı: Ekranlar arası geçişler, site yapısı Uygulamadaki Fonksiyonel Hiyerarşi Ağ Diyagramı

12 Navigasyon (gezinim) Tasarımı
Biçimsel konular: Platforma özgü standartlara uymalıyız. Örneğin bir film oynatıcı programda oynat, durdur, geri sar gibi butonlar için standart ikonları kullanmalıyız. Fonksiyonel konular: Bir bilgisayar uygulamasında dosyalarla etkileşime geçebilmeli, standart formattaki dosyaları okuyabilmeli, kes-yapıştır işlemlerini yapabilmeliyiz. Navigasyon konuları: Uygulamalar arası geçiş yapabilmeliyiz. Örneğin bir programda üretilmiş veriyi bir başka uygulamada kullanabilmeliyiz; veya bir e- posta sisteminde eklentiye çift tıkladığımızda sistem o eklentiyi görüntülemek için doğru uygulamayı başlatmalı.

13 Ekran Tasarımı ve Yerleşim
Gruplama ve yapı Grupların ve öğelerin sırası Dekorasyon Hizalama Boş alan

14 Ekran Tasarımı ve Yerleşim
Gruplama ve yapı: Mantıksal açıdan ilişkili öğeler fiziksel olarak da gruplanmalıdır.

15 Ekran Tasarımı ve Yerleşim
Grupların ve öğelerin sırası: Etkileşim kullanıcının bir eylemi günlük hayatta gerçekleştirdiği biçimde sağlanmalıdır. Örneğin, bir alışveriş sitesinde ödeme bilgileri teslim adresinden önce kullanıcıya sorulmalıdır.

16 Ekran Tasarımı ve Yerleşim
Dekorasyon: İlişkili öğeler görsel olarak da gruplandırılmalıdır. Bu, her grup için farklı renk, farklı biçim, farklı yazı tipi vb. kullanarak gerçekleştirilebilir.

17 Ekran Tasarımı ve Yerleşim
Hizalama: Listelerde okunabilirliği artırmak adına, öğeleri doğru şekilde hizalamak önemlidir. Örneğin, insanlar genelde bir kişiyi listede soyadına göre arar. Bu yüzden soyadını hizalamak önemlidir.

18 Ekran Tasarımı ve Yerleşim
Boş alan: Boş alanlar akıllıca kullanılmalıdır. Bir nesnenin etrafında boş alan bırakmak, o nesneye dikkat çekebilir. Aynı içerik, boş alanların kullanımına bağlı olarak düzenli de düzensiz de görünebilir.

19 Ekran Tasarımı ve Yerleşim
Düzenli görünüm Düzensiz görünüm

20 Kullanıcı Eylemi ve Kontrol
Bilgi girme: Verinin sunumunda olduğu gibi, veri girişinde de düzen (hizalama, gruplama vb.) önemlidir. Ne yapacağını bilmek: Standartlara uygun tasarımlar yapılmalı, isimlendirmeler ve ikonlar anlaşılır olmalıdır.

21 Affordance Psikolojideki «affordance» fikrine göre, nesneler sahip oldukları şekil ve özellikler ile ne işe yaradıklarını çağrıştırabilirler. Örneğin buton basmayı, bardak kulbu tutmayı çağrıştırır. Affordance yaşanmışlıklar ve kültürden doğar. Örneğin tecrübeli bir bilgisayar kullanıcısı işe yaraması için bir butona bir kez tıklamak işe yaramazsa iki kez tıklaması gerektiğini tahmin edebilir ama deneyimsiz bir kullanıcı butona ikinci kez basmanın «kapamak» anlamına geldiğini düşünerek bunu gerçekleştirmeyebilir. Tasarımlar şekil ve özellik bakımından amacını çağrıştırmalı, kullanıcıya kolaylık sağlamalıdır.

22 Uygun Görünüm Farklı amaçlar farklı sunumları gerektirir.
Örneğin, istatistiksel verileri göstermek için grafik, hiyerarşik yapıyı göstermek için organizasyon şeması kullanırız. Interaktif sistemlerde kullanıcının veriyi ne şekilde görüntülemek istediğine dair seçme şansının olması bir avantajdır. Örneğin, kullanıcı bilgisayarındaki dosyaları gereksiz ve büyük boyutlu dosyaları silmek istediğinde boyutuna göre son düzenlediği dosyayı bulmak istediğinde düzenlenme tarihine göre herhangi bir dosyayı rahatlıkla bulmak istediğinde alfabetik isim sırasına göre sıralayabilmelidir.

23 Estetik ve Kullanışlılık
İdeal olan, estetik ve kullanışlılığın bir arada olmasıdır. Tasarımcının amacına göre estetik veya kullanışlılık ön plana çıkabilir. Örneğin okunabilirlik açısından açık renk arka plan kullanmak gerekse de, etkileyici bir poster yaratma amacıyla güçlü arka plan renkleri kullanan bir grafik tasarımcı ödül alan fakat kullanılabilir olmayan bir tasarım ortaya koyabilir.

24 Renk ve 3D karmaşası Çok fazla renk ve yazı efekti kullanımı dikkat dağıtıcı olacak, okunabilirliği azaltacaktır.

25 Yerellik ve Evrensellik
Bir uygulamadaki öğelerin dilini değiştirmek yeterli değildir. Kültürel özellikler de dikkate alınmalıdır. Örneğin, kimi ülkelerde tik işareti pozitif, çarpı işareti negatif anlamına gelirken kimi ülkelerde tersi geçerlidir.

26 İterasyon ve prototipleme
İnsanlar karmaşık olduğu ve tasarımcılar hatasız olmadığı için ilk tasarım mükemmel olmayacaktır. Bu yüzden tasarım kendini tekrarlayan bir süreçtir. Sürecin sonunda görülen problemler büyük ekonomik ve zamansal sıkıntıya sebep olurlar. Prototipleme, taslak tasarımdaki olumsuzlukları ya da geliştirilebilir hususları sürecin başında görüp düzeltmeye yarar : formative evaluation (şekillendirici değerlendirme) Sürecin sonundaki değerlendirme: summative evaluation (özetleyici değerlendirme)

27 İterasyon ve prototipleme
Dezavantajı: Eğer iteratif prototiplemeye yanlış bir noktada (kötü bir fikirden yola çıkarak) başlarsan sıradan bir tasarım fikri etrafında dönüp durabilir ve sıradan bir sonuca ulaşabilirsin.

28 Kaynakça 1. Dix, A. Ve Findlay, J. (2004). Interaction design basics. Human-computer interaction (s ). Pearson: England. 2. White Space: When it’s good, when it’s bad and when it’s ugly. (2010). Retrieved April 5, 2015, from