Etkileim Tasarmnn Temelleri Ders BT 711 nsan Bilgisayar

Etkileşim Tasarımının Temelleri Ders: BTÖ 711 İnsan Bilgisayar Etkileşimi Ders Sorumlusu: Prof. Dr. Hakan TÜZÜN Hazırlayan: Ömer ORAL

Etkileşim Tasarımı Genel Bakış Etkileşim Tasarımı, yazılımlar, mobil aygıtlar, web araçları gibi birçok teknolojiyi kullanarak müdahaleler oluşturmaktır. Tasarımın kapsamını: • Mevcut kısıtlarla hedeflere ulaşmak • Bileşenleri (insan ve bilgisayar) anlamak • İnsanların ve tasarımın sınırlarını kabul etmek oluşturur.

Etkileşim Tasarımı Genel Bakış • Etkileşim, kullanıcıları ve içeriklerini tanımakla başlar. • Kimlerdir? Neye benzerler? • Senaryolar tasarım boyunca tekrar kullanılabilen zengin tasarım öyküleridir. • Kullanıcıların ne yapmak istediklerini görmemiz konusunda bize yardım ederler. • Kullanıcı etkileşimlerini adım açıklar.

Etkileşim Tasarımı Genel Bakış • Kullanıcıların bir sistemde yollarını bulması gerekir. Bunun için yönlendirmeler ve adresler barındırmalıdır. • Tasarımın karmaşıklığı, ilk defada doğru yapmadığımız anlamına gelir. Bu yüzden denemek ve değerlendirmek için yineleme ve prototiplere ihtiyacımız var.

Sunu Akışı 1. 2. 3. 4. 5. 6. 7. Tasarım Nedir? a) Tasarımın Altın Kuralı b) İnsan Hata Yapabilir c) Merkezi mesaj - kullanıcı Etkileşim Tasarım Süreci Kullanıcı Odağı Senaryolar Navigasyon Tasarımı a) Yerel Yapı b) Global Yapı-Hiyerarşik Organizasyon c) Global Yapı-Diyalog d) Daha Geniş Ekran Tasarımı ve Yerleşimi a) Ekran Yerleşimi İçin Araçlar b) Kullanıcı Eylemi ve Kontrol İzleme ve Prototipleme

1. Tasarım Nedir? Hedefler * Planladığımız tasarımın amacı nedir? * Kimin için üretiyoruz? * Kullanıcılar neden bu tasarımı istiyorlar? Kısıtlamalar * Hangi materyalleri kullanmalıyız? * Hangi standartları benimsemeliyiz? * Ne kadar maliyeti olabilir? * Ne kadar zamanımız var? * Sağlık ve güvenlik sorunları var mı? Ödün Verme * Bir amaca ulaşabilmek için diğer hangi amaçlardan ödün verilebilir?

1. a) Tasarımın Altın Kuralı • İnsan Bilgisayar Etkileşimi için bariz materyaller insan ve bilgisayardır. Bu sebeple materyallerimizin özelliklerini bilmemiz etkileşimi açıklamamızı sağlar. (Tahta-metal sandalye örneği) • Bilgisayarları anlamak: • Sınırlılıklar, kapasiteler, araçlar, platformlar İnsanları anlamak: • Psikolojik, sosyal yönler, insan hatası. •

1. b) İnsan Hata Yapabilir • Hata yapmak insanın doğasında vardır. Özellikle stres altında daha fazla hata yaparlar. • Sistemler insan kaynaklı hataları en aza indirmek için tasarlanmalıdır. • İnsan bilgisayar etkileşiminde insan fiziksel bir materyal olarak ele alınırsa hataları daha kolay tespit edilip giderilebilir.

1. c) Merkezi Mesaj: Kullanıcı • HCI’da kullanıcı her zaman merkezde olmalıdır. • Genellikle HCI’da kullanılan yöntemlerin başarısı tasarımcıların kullanıcıya ne kadar odaklandığı ile ilgilidir.

2. Etkileşim Tasarımı Süreci Ne İsteniyor? Görüşmeler Ne var? Ne isteniyor? Senaryolar, Görev analizleri Analizler Yönergeler, Tasarım ilkeleri Tasarım Bulguların değerlendirilmesi Dokümantasyon, Yardım Prototip Diyalog gösterimleri Kesin Şartname Geliştirme

2. Etkileşim Tasarımı Süreci Gereksinimler - ne isteniyor • İlk aşama tam olarak neye İhtiyaç duyulduğunu tespit eder. • Örneğin, şu anda İnsanlar film izliyor mu? Şu anda ne tür kişisel cihazlar kullanıyorlar? Analizler • Gözlem ve mülakat sonuçlarının bir şekilde anahtar konuların ortaya çıkarılması ve tasarımın sonraki aşamalarında iletişim kurması için sıralanması gerekmektedir Tasarım • Fikir olgunlaşıp nasıp yapılacağı evresine geldiğinde bu aşama devreye girer. • Çok sayıda kural ve tasarım prensibi yer alıyor. Yineleme ve prototipleme Uygulama ve dağıtım • Ne kadar iyi çalıştığının ve ne gibi iyileştirmelerin yapılabileceğinin görülmesi için tasarımın değerlendirilmesi gerekir. • Tasarımımızdan memnun olduğumuzda, artık uygulanabilir ürün elde edilir ve dağıtıma başlanabilir.

3. Kullanıcı Odağı • Kullanıcılarınızı tanıyın. • Kullanıcıları tanımak; • Kim onlar? (yaş, bilgisayar deneyimi) • Senin gibi olmayabilirler. (tasarımcı X kullanıcı) • Onlarla konuş (düşüncelerini açığa çıkar) • Onları izle (spor eğitmenleri en iyi sporcular olmayabilir. ) • Hayal gücünü kullan (kullanıcı davranışını tahmin et)

4. Senaryolar • • • Tasarım için etkileşimlerle dolu hikayelerdir. Senaryolar tasarımın hatalarını görmemizi sağlarlar. Amaçları: • ne istendiğini görmemize yardımcı olmak, • kullanıcıların potansiyel tasarımla nasıl başa çıkacaklarını öngörmek, • önerilen uygulamaların çalışıp çalışmadığını kontrol etmek • son değerlendirme için test örnekleri oluşturmak

4. Senaryolar • Örnek Senaryo

5. Navigasyon (Gezinim) Tasarımı • • Somut tasarım çıktıları olarak ele alınabilir. PC uygulamaları • Widgetlar • Ekran tasarımı • Uygulama içerisindeki yol göstericiler Web sayfaları • Form elemanları • Sayfa tasarımı • Site yapısı Fiziksel cihazlar • Butonlar • Fiziksel arayüz • Gerçek dünya

5. Navigasyon (Gezinim) Tasarımı • • Bir uygulamanın yapısını düşünürken başlanacak ilk nokta uygulamanın gerçek kullanımını düşünmektir. • Uygulamayı kim kullanacak? • Uygulama hakkında fikirleri ne? • Uygulamayla ne yapacaklar? Bu sorular ikinci görevi tetikleyecektir. • Yerel Yapı (tek bir sayfa veya ekran çıktısı) • Küresel Yapı (site yapısı, ekranlar arası bağlantılar ve geçişler)

5. a) Yerel Yapı • Etkileşimlerin bir çoğu hedef arama davranışı barındırmaktadır. Kullanıcılar hedefe giden en kısa yolu tahmin etmeye ve o yoldan görevi tamamlama eğilimi gösterirler. Böylece Her adımlarında hedefe olan uzaklıkları hakkında değerlendirmeler yaparlar. • Sistemler kullanıcılara bu arayışlarında yardımcı olacak yapılar sunmalıdır.

5. a) Yerel Yapı • • Bir arayüzde ilk olarak aranması gereken dört şey: • Nerede olduğunu bilmek • Neler yapabileceğini bilmek • Nereye gittiğinizi bilmek • Ne yapmış olduğunu bilmek Simgeler ve butonlar her zaman açıklayıcı olmayabilirler. Karmaşık yapılarda simgelerin ayrıt edilmesini sağlayacak ipuçları veya etiketlerle vurgulanması ve ayırt edici özelliğinin belirtilmesi gerekir.

5. b) Global Yapı – Hiyerarşik Organizasyon • • • Hiyerarşiler ekranları, sayfaları veya durumları mantıksal gruplamalarla bağlar. Hiyerarşik yapılar çok karmaşık olmamalıdır. Fazla karmaşık bir yapıda kullanıcı kaybolacaktır. Miller’ın çalışma belleği kapasitesi için 7 ± 2 sihirlli sayısı bu bağlamda sıklıkla yanlış kullanılmaktadır. Menülerde her düzeyde 7 civarı seçenek olması fikri yanlıştır. İyi yapılandırılmış bir hiyerarşide 60 seçenek olması mümkün dür. Miller’in sonucu görsel arama için değil sadece çalışma belleği içindir.

5. c) Global Yapı – Diyalog • Statik web sitesinde, tamamen aynı hiyerarşik bir yapıya sahip olmak, aynı gruptaki öğeler arasındaki sonraki / önceki bağlantılarla yeterli olabilir. • Hiyerarşilerdeki çapraz bağların yanı sıra, bir kaydı düzenleme veya silme gibi ayrıntılı etkileşimlere indiğinizde hiyerarşi ile ilgili olmayan bir perde ve komut akışı vardır. • İnsan-bilgisayar etkileşiminde, kullanıcı ve sistem arasındaki bu etkileşim modeline atıfta bulunmak için “diyalog” kelimesi kullanılır.

5. c) Global Yapı – Diyalog Nikah Örneği: Görevli: …. . ’yı karın olarak kabul ediyor musun? Erkek: Evet. Görevli: …. . ’yı kocan olarak kabul ediyor musun? Kadın: Evet. Görevli: Belediye Başkanı’nın bana verdiği yetkiye dayanarak sizleri karı koca ilan ediyorum. Yukarıda basit bir üçlü diyalog verilmiştir. Diyaloglar bileşenleri arttıkça ağ diyagramı oluşturmaya başlarlar.

5. c) Global Yapı – Diyalog • • Ağ diyagramlarını kullanmanın basit bir yolu oklarla birlikte bağlantılı ana durumları veya ekranları göstermektir. Ağ diyagramı ile şunlar yapılabilir: • Neyin neye yol açtığı gösterilebilir. • Ne zaman ne olacağı gösterilebilir. • Bağlantılar ve döngüler dahil edilebilir.

5. c) Global Yapı – Diyalog Ana ekran Kullanıcı Sil Kullanıcı Ekle Onayla

5. d) Daha Geniş • • • Stil Sorunları: • Platform standartlarına uymalıyız. Örneğin, kişisel • film oynatıcımızda standart hızlı ileri sarma, oynatma ve duraklatma simgelerini kullanmalıyız. Fonksiyonel Sorunlar: • Bir PC uygulamasında, dosyalarla etkileşimde bulunabilmemiz, standart formatları okuyabilmemiz ve kesme ve yapıştırma işlemlerini yapabilmemiz gerekir. Gezinme Sorunları: • Uygulamalar arasındaki bağlantıları desteklememiz gerekebilir. • Örneğin verilerin bir uygulamadan diğerine yerleştirilmesine izin vermek veya bir e-posta sisteminde, bir ek simgesine çift tıklamak ve ek için uygulamayı başlatmak.

6. Ekran Tasarımı ve Yerleşimi • Etkileşim tasarımı temel ilkeleri: • Sor: • Kullanıcı ne yapıyor? • Düşün • Hangi bilgiler gereklidir? • Kullanıcının ne gibi karşılaştırmaları yapmaya ihtiyacı olabilir ? • Hangi sırada ihtiyaç duyulması muhtemeldir? • Tasarım • Form işlevi şu şekildedir: gerekli etkileşimlerin düzeni kullanmasına izin verilmelidir.

6. a) Ekran Yerleşimi İçin Araçlar • • • Gruplama ve yapı Grup ve öğelerin sıralanması Dekorasyon Hizalama Boş alan

6. a) Ekran Yerleşimi İçin Araçlar Gruplama ve Yapı • Eğer nesneler mantıksal olarak birbirine aitse, normalde onları fiziksel olarak gruplandırmalıyız. Sipariş: İdari bilgiler Fatura Detayları Teslimat Detayları Sipariş Bilgisi Sipariş satırı 1 Sipariş satırı 2. . .

6. a) Ekran Yerleşimi İçin Araçlar Grupların ve Öğelerin Sırası • • Genel olarak düşünmemiz gereken, kullanıcı için doğal sıranın nasıl olduğudur. Veri giriş formları veya iletişim kutuları için sekme tuşunun alanlar arasında hareket ettiği sırayı ayarlamalıyız.

6. a) Ekran Yerleşimi İçin Araçlar Dekorasyon • Grup stillerini vurgulamak için yazı tipi stili ve metin veya arka plan renkleri gibi diğer dekoratif özellikler kullanılabilir.

6. a) Ekran Yerleşimi İçin Araçlar Hizalama • • Metinleri soldan sağa okuyan kullanıcılar için, metin öğelerinin listeleri normal olarak sola hizalanmalıdır. Rakamlar normal olarak sağa (tamsayılar için) veya ondalık noktaya hizalanmalıdır.

6. a) Ekran Yerleşimi İçin Araçlar Hizalama • • • İsim gibi öğeler, (ii) 'de olduğu gibi sütunlar halinde düzenlenmeli veya (iii)' de olduğu gibi soyad ve ad ters çevrilmelidir.

6. a) Ekran Yerleşimi İçin Araçlar Boşluklar • • Renkli alanlar sürekli metin veya grafik alanlarını temsil eder. (i) Bölümler arasındaki paragraflar veya boşluk arasındaki boşluklarda, blokları ayırmak için kullanılan alanı görebiliriz.

6. a) Ekran Yerleşimi İçin Araçlar Boşluklar • (ii) 'de açıkça dört ana alan vardır: ABC, D, E ve F. Bunlardan biri, A, B ve C olmak üzere üç ayrı alandan oluşur.

6. a) Ekran Yerleşimi İçin Araçlar Boşluklar • • (iii)’de, vurgulamak için kullanılan alanı görebiliriz. Bir alıntı veya notu vurgulamak için dergilerde sık kullanılan bir teknik.

6. b) Kullanıcı Eylemi ve Kontrol • • • Bilgi girişi • Form tabanlı arayüzler Ne yapılması gerektiğini bilme • Hangi ögelerle etkileşime girileceğinin bilinmesi Sağlarlık (Affordance) • Kullanılan ögelerin farklı kullanıcılarda benzer çağrışımlar yapması

6. b) Kullanıcı Eylemi ve Kontrol Bilginin Sunumu • Ekranda bilgi sunmanın yolu, bilgi türüne bağlıdır: metin, sayılar, haritalar, tablolar; çizgi çizme, grafik, sanal gerçeklik. • En önemlisi, bilginin hangi amaç için kullanıldığıdır.

6. b) Kullanıcı Eylemi ve Kontrol Estetik ve fayda • Bir arayüz estetik olarak hoş olmalıdır. • İyi grafik tasarım ve ilgi çekici görüntüler, kullanıcıların memnuniyetini artırabilir ve böylece verimliliği artırabilir.

6. b) Kullanıcı Eylemi ve Kontrol Bir Karışıklık Yapmak: Renk ve 3 d • Birçok arabirimdeki en kötü özelliklerden biri, renklerin kötü kullanımıdır. • Arayüzlerdeki 3 boyutlu efektlerin artan kullanımı, metin ve sayısal bilgi için yeni bir dizi problem oluşturmuştur. • Fiziksel bilgi ve belirli türden grafikler sunmak için mükemmel olmakla birlikte, perspektif içinde sunulan metinlerin okunması çok zor olabilir ve tüm yaygın 3 D pasta grafikleri işe yaramayabilir.

6. b) Kullanıcı Eylemi ve Kontrol Yerelleştirme / uluslararasılaşma • Farklı bir ülkede çalışıyorsanız, belgenin metninin ve dosya adlarının yerel dilde bulunduğu bir sözcüğün işlendiği bir belgeyi görebilirsiniz, ancak tüm menüler ve talimatlar hala İngilizce'dir. • Farklı diller ve kültürlere uygun yazılım yapma süreci yerelleştirme veya uluslararasılaşma olarak adlandırılır.

7. İzleme ve Prototipleme • • • Hemen hemen tüm etkileşim tasarımı fikirlerin yinelenmesi şeklini içerir. Genellikle iş arkadaşlarına ve potansiyel kullanıcılara gösterilen kağıt tasarımları ve hikaye tahtalarıyla başlar. Tasarım sürecinin ilerleyen bölümlerinde, yazılımın prototip sürümlerini oluşturmak çeşitli araçlar kullanılabilir.

7. İzleme ve Prototipleme Tamam? Tasarım Prototip Yeniden tasarım Değerlendirme Bitti!

7. İzleme ve Prototipleme • Prototipleme yöntemlerinin çalışması için ihtiyaç duyulan iki şey: • • Neyin yanlış olduğunu ve nasıl geliştirileceğini anlamak. İyi bir başlangıç noktası.

Özet • • Tasarım: Sınırlılıklar içinde hedeflere ulaşmak Etkileşim, kullanıcıları ve içeriklerini tanımakla başlar. Senaryolar tasarım boyunca kullanılabilecek ve tekrar kullanılabilen zengin tasarım öyküleridir. Kullanıcıların bir sistem etrafında yollarını bulması gerekir. Kullanıcılara nerede olduklarını, nerede bulunduklarını ve ne yapabileceklerini bildirme Kullanıcı etkileşiminin için çeşitli görsel araçlar: fiziksel gruplama, öğelerin sıralanması, yazı, çizgi, renk, hizalama ve boş alan kullanımı gibi. Tasarımın karmaşıklığı, ilk defada doğru yapmadığımız anlamına gelir. Denemek ve değerlendirmek için yineleme ve prototiplere ihtiyacımız var.

Teşekkürler