HCI_week9.pdf

Human-computer Interaction Dr. Öğr. Üyesi Hüseyin PARMAKSIZ Week-9 15.05.202...

Human-computer Interaction Dr. Öğr. Üyesi Hüseyin PARMAKSIZ Week-9 15.05.2024 [email protected] 1  Kullanılabilirlik-Göz İzleme – Göz hareketlerini izleme cihazları (kullanıcıların nereye, ne kadar süre baktıkları hakkında objektif ve nicel veriler) – Bilgiyi arama davranışları – En fazla odaklanılan noktaları keşfetme – Kullanıcılar ve tasarımlar arasında karşılaştırma yapma 15.05.2024 [email protected] 2  Kullanılabilirliği belirleyen faktörler Etkililik-verimlilik-memnuniyet “Ürün X, kullanıcıların %70’i tarafından, ek bir eğitim gerektirmeksizin, bütün görevleri %95 dogrulukla, var olan diger uygulamanın kullanımından %25 daha hızlı ve en azından eşit seviyede memnuniyet göstererek kullanılmaktadır.” 15.05.2024 [email protected] 3 15.05.2024 [email protected] 4  Nielsen’in Sezgiselleri (Nielsen, 2010) – Sistem durumunun görünürlüğü – Sistem ile gerçek dünyanın eşleşmesi – Kullanıcı kontrolü ve özgürlük – Tutarlılık ve standartlar – Hataları önleme – Hatırlamak yerine tanıma (ya da Hafıza yükünün en aza indirilmesi) – Esneklik ve kullanım verimliliği – Estetik ve sade tasarım – Hatadan kurtulma – Yardım ve dokümantasyon 15.05.2024 [email protected] 5  Senaryo: Bir e-ticaret web sitesi için yeni bir Kullanıcı temelli testler ürün sayfası tasarımı test ediliyor. Kullanıcı: 25-35 yaş arası, ortalama bilgisayar kullanıcısı bilgi seviyesine sahip, online alışveriş yapmayı seven bir kadın. Kullanılabilirlik Ölçütleri: Görev: Yeni bir çift spor ayakkabı satın almak. – Görev tamamlama süresi: Kullanıcının görevi ne kadar sürede tamamladığı ölçülür. – Başarı oranı: Kullanıcının görevi başarıyla tamamlayıp tamamlayamadığı ölçülür. – Kullanıcı hatası sayısı: Kullanıcının görev sırasında yaptığı Adımlar: hata sayısı ölçülür. 1. Kullanıcı web sitesine gider ve "Spor Ayakkabılar" kategorisine – Kullanıcı memnuniyeti: Kullanıcılar, görevi tamamladıktan tıklar. sonra anket doldurarak web sitesinin kullanışlılığı hakkındaki 2. Kullanıcı ilgisini çeken bir spor ayakkabı modeli seçer ve ürün görüşlerini bildirirler. sayfasına gider. Gözlem Notları: 3. Kullanıcı ürün resmini inceler, ürün açıklamasını okur ve beden – Kullanıcı ürün resmini incelemek için zaman ayırır ve resmin tablosunu kontrol eder. tüm açılardan gösterilmesini ister. 4. Kullanıcı tercih ettiği bedeni seçer ve "Sepete Ekle" düğmesine – Kullanıcı ürün açıklamasını dikkatlice okur ve ürünün tıklar. özelliklerini anlamak ister. 5. Kullanıcı alışveriş sepetine gider, sipariş özetini kontrol eder ve – Kullanıcı beden tablosunu anlamakta zorlanır ve daha fazla "Alışverişi Tamamla" düğmesine tıklar. bilgi ister. – Kullanıcı alışveriş sepetinde ürün miktarını kolayca 6. Kullanıcı teslimat ve fatura bilgilerini girer ve ödeme yöntemini değiştirebilmek ister. seçer. – Kullanıcı sipariş özetini kontrol etmeden önce teslimat ve fatura 7. Kullanıcı siparişi onaylar ve "Siparişi Ver" düğmesine tıklar. bilgilerini girmek zorunda kalmaktan hoşlanmaz. – Kullanıcı ödeme yöntemleri arasından kolayca seçim yapabilmek ister. 15.05.2024 [email protected] 6  Bilişsel Modelleme (Cognitive Modeling) – Kullanıcıların görevleri nasıl yaptıklarını psikoloji deneyleri ve prensipleri ile geliştirilen hesaplamalı modelle analiz eder – Kullanılabilirlik yaklaşımlarını bilişsel bilimler ile zenginleştirir – Kullanıcının bir görevi ne kadar zamanda yapacağını tahmin eder – Kullanıcının görevleri hangi adımlarla gerçekleştirdiğini gösterir – Uygulamaların nasıl daha iyileştirilebileceğini gösterir – Tasarım kararlarının alınmasına destek olur – Tasarımın karmaşık/sorunlu noktalarını ortaya çıkarır 15.05.2024 [email protected] 7  Cognitive Modeling’lere örnekler İBE alanındaki temel bilişsel modelleme yaklaşımları: – MHP - Model Human Processor – algısal, motor, bilişsel etkileşim - Card, Moran ve Newell, 1983 – GOMS - Goals, Operators, Methods, and Selection Rules - Card, Moran ve Newell, 1983 – Türleri: KLM, CMN-GOMS, NGOMSL and CPM-GOMS. – KLM - Keystroke-Level Model- İlk ve en temel GOMS tekniği 15.05.2024 [email protected] 8 – Çağrı merkezinin GOMS ile analizi – Çalışma Öncesi Eğilim: Daha hızlı cevap için yeni donanım NYNEX: 2 Milyon Dolar – Analiz sonucu süreçlerdeki performans sorunları – Donanım yatırımından vaz geçildi, yıllık 2 milyon dolar tasarruf – Wayne D. Gray and Bonnie E. John and Michael E. Atwood, “Project Ernestine: Validating a GOMS analysis for predicting and explaining real-world task performance”, in Human Computer Interaction, No. 8, pp. 237-309. – http://www-ihm.lri.fr/~mbl/ENS/FONDIHM/2014/papers/Gray- HCI93.pdf Bu örnekte, NYNEX adlı bir telekomünikasyon şirketinin çağrı merkezinde GOMS (Goal, Operators, Methods, Selection) modeli kullanılarak yapılan bir analiz anlatılmaktadır. Analiz, çağrı merkezindeki süreçlerin performansını değerlendirmeyi ve daha hızlı cevap verebilmek için yeni donanıma yatırım yapmanın gerekli olup olmadığını belirlemeyi amaçlamıştır. Analiz Öncesi Eğilim: NYNEX, çağrı merkezindeki yanıt sürelerini kısaltmak için yeni donanıma yatırım yapmayı düşünüyordu. Yatırımın 2 milyon dolara mal olacağı tahmin ediliyordu. NYNEX'teki GOMS analizi, çağrı merkezi çalışanlarının bir müşteri aramasıyla ilgili tüm adımları belirlemeyi ve bu adımları tamamlamak için ne kadar zaman harcadıklarını ölçmeyi içeriyordu. Analiz, aşağıdaki bulguları ortaya çıkardı: Çağrı merkezi çalışanları, aramaları yanıtlamak için çok sayıda farklı bilgisayara ve sisteme erişmek zorunda kalıyordu. Bu sistemler arasındaki geçişler zaman alıyordu ve bu da yanıt sürelerini uzatıyordu. Çalışanlar, aradıkları bilgileri bulmakta zorlanıyorlardı. Sonuç: GOMS analizi, yeni donanıma yatırım yapmanın çağrı merkezindeki yanıt sürelerini önemli ölçüde kısaltmayacağını gösterdi. Bunun yerine, NYNEX, çalışanlar için sistemlerin daha iyi entegre edilmesi ve aradıkları bilgileri daha kolay bulabilmeleri için arayüzlerin iyileştirilmesi gibi yazılım çözümlerine yatırım yapmayı seçti. 15.05.2024 [email protected] 9  KLM Keystroke Level Model Altı adet operatör vardır: Motor operatörler – K (keystroke) Tuşa basma – P (pointing) Fareyi ekrandaki bir nesneye götürmek – H (homing) Klavye ya da başka bir cihaza el(ler)imizi götürmek – D (drawing) Bir grid üzerinde çizgiler çizmek Bilişsel (Mental) operatör – M (mental) Bir fiziksel hareketi yaparken bilişsel hazırlık Sistem tepki operatörü – R (response time) Sistemin tepki süresi 15.05.2024 [email protected] 10  KLM - Keystroke-Level Model temelli modelleme aracı – CogTool açık kaynak kodlu hazırlanan ya da hazırlanmış bir arayüzde kullanıcıların nasıl davranacagını/davrandıgını modelleyen bir araçtır. – Biliş, Algı ve Motor davranışları simule eder. – Arayüz tasarımcıları, geliştirdikleri prototipler ile kullanıcı davranışlarını modellerler. – CogTool kullanıcının el ve bilişsel davranışlarını deneyimli kullanıcı açısından tahmin edip ortalama görev yapma süresini hesaplar. 15.05.2024 [email protected] 11  Dokunmatik ekran arayüzlerinin kullanılabilirliğinin bilişsel modelleme ve son kullanıcı testleri ile analizi ve karşılaştırması Araştırma Amacı: Bu araştırmanın amacı, Turkcell Cüzdan mobil uygulamasını kullanırken 10 katılımcının bilişsel süreçlerini incelemek ve uygulamanın kullanılabilirliğini değerlendirmektir. Araştırma Yöntemi: Araştırmada, CogTool adlı bilişsel modelleme aracı kullanılacaktır. CogTool, kullanıcıların bir arayüzle etkileşimini simüle etmek için kullanılabilecek bir araçtır. Bu araştırmada, CogTool, katılımcıların Turkcell Cüzdan mobil uygulamasını kullanırken gerçekleştirdikleri görevleri simüle etmek için kullanılacaktır. Araştırma Katılımcıları: Araştırmaya 10 katılımcı dahil edilecektir. Katılımcılar, Turkcell Cüzdan mobil uygulamasını düzenli olarak kullanan 18-35 yaş arası bireyler olacaktır. Araştırma Prosedürü: Her katılımcıdan aşağıdaki 8 görevi tamamlaması istenecektir: Hesap bakiyesini kontrol etme Para aktarma Fatura ödeme Mobil hat yükleme Hediye kartı satın alma QR kod ile ödeme İşyeri bulma Hesap ayarlarını düzenleme Katılımcılar, görevleri tamamlamaya çalışırken CogTool tarafından kaydedilecek. Kayıtlar, katılımcıların görevleri tamamlamak için ne kadar zaman harcadıklarını, ne kadar hata yaptıklarını ve hangi adımları izlediklerini gösterecektir. 15.05.2024 [email protected] 12  Çalışma Sonuçları Şöyle: – CogTool ile yapılan analizler kullanıcıların performansını +/- 5 saniye hata ile tahmin etti – CogTool tahmin hatası %20 den düşük – Eğer görevlerde çok özel durumlar varsa, örneğin kullanıcı çok aşinaysa ya da karar verme süreci yer alıyorsa, “Think Operation” buna bağlı olarak değiştirilmelidir – Son kullanıcı testi için harcanan toplam efor 38 saat iken bilişsel modelleme ile yapılan çalışma eforu 13.5 saat 15.05.2024 [email protected] 13  Görsel algı prensiplerini ortaya koyan Gestalt psikolojisini incelemek – Görsel bilginin algılanması, sınıflandırılması ve organize edilmesi konusu ile ilgili en önemli araştırmalar Gestalt psikologlarınca gerçekleştirilmiştir – Organizasyon, yapılandırma anlamındadır – Gestalt psikolojik bir terim olarak “birleştirilmiş bütünlük” anlamı taşımaktadır – Alman psikologlar tarafından 20. yüzyılın başlarında geliştirilen “Görsel Algı” teorisine dayalıdır – İnsanların görsel öğeleri gruplandırma eğilimlerini veya prensipler uygulandığında elde edilen “birleştirilmiş bütünlük” olgusunu açıklamaya çalışmaktadır. 15.05.2024 [email protected] 14  Gestalt teorisi doğrultusunda yapılan araştırmalar sonucunda bir dizi tasarım kuralı oluşturulmuştur, bunlar – Benzerlik Kuralı (Law of Similarity): – Yakınlık Kuralı (Law of Proximity): – Simetri Kuralı (Law of Symmetry): – Süreklilik Kuralı (Law of Continuity): – Kapalılık Kuralı (Law of Closure): – Aynı Yön Kuralı (Law of Common Fate): – Desen – Zemin Kuralı (Law of Figure and Ground) 15.05.2024 [email protected] 15  Bu prensiplerin tasarım ve kullanılabilirlik ile olan ilişkisini ortaya koymak ve PARC Temel Görsel Tasarım Prensipleri - PARC PARC, görsel tasarımı dengelemek ve çekici hale getirmek için kullanılan dört temel prensipin kısaltmasıdır: – Yakınlık (Proximity): İlgili öğeleri bir araya getirerek ve alakasızları ayırarak görsel hiyerarşi oluşturma. – Hiza (Alignment): Görsel öğeleri bir araya getirerek düzen ve denge oluşturma. – Tekrar (Repetition): Birlik ve tutarlılık oluşturmak için görsel öğeleri tekrarlama. – Zıtlık (Contrast): Farklı görsel öğeler arasında net ayrım oluşturmak için renk, boyut, doku ve şekil kullanımı. PARC prensiplerini kullanarak daha iyi görsel tasarımlar oluşturabilir, hedef kitlenizi etkileyebilir ve tasarımınızın amacını daha iyi aktarabilirsiniz. 15.05.2024 [email protected] 16 III - Tutarlı bir görünüm sağlanması için renkler, grafikler, stiller tekrar II - Tüm görsel PARC-YHTZ edilmelidir. elemanlar birbiri ile düzgün IV - İlgisiz elemanlar I - İlişkili nesneler hizada olmalıdır. birbirinden birbirine yakın farklılaştırılarak gruplanmalıdır. ayrılmalıdır: Renk, Büyüklük, Arka plan, Şekil 15.05.2024 [email protected] 17  Uyumlu (Responsive) tasarım Yazı Miktarı Yatay Sürüklemek 15.05.2024 [email protected] 18  Problem: Ürün ve Ekran Çeşitliliği https://responsively.app/ Çözüm: Önce Mobil için Tasarla A must-have DevTool for all web developers that will make your job easier. And it's free Yapışkan Tuş and too! 15.05.2024 [email protected] 19  Açık Kaynaklı Responsive Tasarım Araçları ÇERÇEVELER – Bootstrap: En popüler ve kullanımı kolay çerçevelerden biridir. Mobil cihazlara ve farklı ekran boyutlarına otomatik olarak uyum sağlayan bir ızgara sistemi içerir. https://getbootstrap.com/docs/5.3/getting-started/introduction/ – Foundation: Bootstrap'a benzer bir çerçevedir, ancak daha fazla özelleştirme seçeneği sunar. https://get.foundation/ – Semantic UI: Kullanıcı arayüzü öğelerine anlamsal adlar veren bir çerçevedir. Bu, kodun daha okunabilir ve erişilebilir olmasını sağlar. https://semantic-ui.com/ – Materialize: Google'ın Material Design ilkelerine dayanan bir çerçevedir. https://www.npmjs.com/package/@materializecss/materialize KÜTÜPHANELER – Respond.js: Medya sorguları kullanarak web sayfalarını farklı ekran boyutlarına göre uyarlayan bir kütüphanedir. https://github.com/scottjehl/Respond – Minify: CSS ve JavaScript dosyalarını küçülterek yüklenme sürelerini kısaltan bir araçtır. https://kangax.github.io/html-minifier/ – Normalize.css: Farklı tarayıcılar arasındaki varsayılan stil farklılıklarını sıfırlayan bir CSS dosyasıdır. https://github.com/topics/normalize-css DİĞER ARAÇLAR – BrowserSync: Web sayfalarını gerçek zamanlı olarak farklı cihazlarda önizlemenizi ve test etmenizi sağlayan bir araçtır. https://browsersync.io/ 15.05.2024 [email protected] 20  Prensipler 15.05.2024 [email protected] 21  Ev ödeviniz E-devlet kapısı sitesini Gestalt prensipleri ışığında inceleyiniz. Hangi kurallar bu sitede uygulanmıştır? 15.05.2024 [email protected] 22  Erişilebilirlik – Herhangi bir ürünün, servisin, hizmetin, teknolojinin ya da ortamın herkes tarafından ulaşılabilir ve kullanılabilir olması. – Herkesin yaşam etkinliklerine katılımını engelleyebilecek etmenlerin ortadan kaldırılması. – Tavsiye edilen bir tercih değil, yasal zorunluluk. 15.05.2024 [email protected] 23  Erişilebilirlik neden önemli? Türkiye Özürlü Araştırması*’na göre – Türkiye nüfusunun %12’si engellidir. – Yaklaşık 420.000 görme, 3 Milyon işitme engelli – 65 ve daha yukarı yaştaki nüfus, toplam nüfusun % 6’sı * Devlet Planlama Teşkilatı Müsteşarlığı ve Devlet İstatistik Enstitüsü Başkanlığı 15.05.2024 [email protected] 24  Dünyada Erişilebilirlik – Amerika Birleşik Devletleri, “Section 508 of the Rehabilitation Act" internet sitelerinin erişilebilir olmasını zorunlu kılan kanun – İngiltere, 2006 yılında Engelli Hakları Komisyonu (Disability Rights Commission, DRC) ve İngiliz Standartlar Enstitüsü (British Standards Institution, BSI) engelliler için PAS* 78 standardını hazırlamışlardır. – Erişilebilirlik üzerine olan yaklaşımlar ülkeden ülkeye değişiklik göstermesine rağmen ISO/IEC 40500:2012 uluslararası standartdır 15.05.2024 [email protected] 25  Mağazası Örneği Dava Sonuçları: – Bu dava, web sitelerinin erişilebilir olması gerektiğini ve görme – Mayıs 2005’de Web sitesi analiz edildi. engelli kullanıcıların da dahil olmak üzere tüm kullanıcılar için – Sorunlar tespit edildi. kullanılabilir olması gerektiğini gösteren önemli bir emsal teşkil etmektedir. «Alışveriş yapamıyorum» – Davanın sonucu, web sitesi sahiplerinin erişilebilirlik yasal gerekliliklerini dikkate almaları ve web sitelerini tüm kullanıcılar için – Ocak 2006, Target değişikliği kabul etmedi. kullanılabilir hale getirmeleri gerektiği konusunda farkındalık yarattı. – Görme Engelliler Birliği dava açtı. Dersler: – 6 Milyon dolar. – Web siteleri tasarlarken ve geliştirirken, tüm kullanıcıları ve farklı yetenek seviyelerini göz önünde bulundurmak önemlidir. – Web siteleri, Görme Engelliler Ekran Okuyucu ve Tarayıcı Testi gibi Olay Özeti: araçlar kullanılarak erişilebilirlik açısından test edilmelidir. – Mayıs 2005'te bir web sitesi analiz edildi ve erişilebilirlik sorunları tespit edildi. – Web siteleri, Erişilebilir Web İçeriği Yönergeleri (WCAG) gibi – En önemli sorunlardan biri, görme engelli kullanıcıların alışveriş erişilebilirlik standartlarına uygun olmalıdır. yapamamasıydı. – Ocak 2006'da, web sitesi sahibi, tespit edilen sorunları düzeltmeyi reddetti. – Web sitesi sahipleri, erişilebilirlik yasal gerekliliklerinin farkında – Görme Engelliler Birliği, web sitesi sahibine karşı dava açtı. olmalı ve uyumlu kalmak için gerekli adımları atmalıdır. – Dava sonucunda, web sitesi sahibi 6 milyon dolar tazminat ödemeye mahkum edildi. 15.05.2024 [email protected] 26  WCAG 2.0 – ISO/IEC 40500:2012 standardı / WCAG 2.0 (Web Content Accessibility Guidelines - Web İçeriği Erişilebilirlik Kılavuzu) – WCAG 2.0 61 kriterden oluşmaktadır. – 3 Düzey: A Düzeyi (25 kriter), AA Düzeyi (13 kriter) ve AAA Düzeyi – (23 kriter) – A-temel; AA-tavsiye edilen; AAA-en ideal – TSE - Türkçe versiyonu (TSE K 201391512) 15.05.2024 [email protected] 27  WCAG – A Seviyesi – Ses ve video öğelerinin alternatifleri (altyazı, transcript) bulunmalıdır. – İçeriklerin metinsel alternatifleri verilmelidir. – Ses öğeleri kullanıcılar tarafından kontrol edilebilir olmalıdır. – İşlemler klavye ile erişilebilir olmalıdır. – İçerikler mantıksal olarak sıralanmalıdır. 15.05.2024 [email protected] 28  WCAG – AA Seviyesi – 13 Madde – Canlı yayın altyazısı. – Video öğeleri için sesli açıklamalar. – İnternet sitesi içeriklerine farklı yollarla erişim sağlanabilmelidir. – İmleç görünür ve ayırt edilebilir olmalıdır. – Hukuki ya da mali sonuçları olan işlemlerde kullanıcıların hata yapma oranı azaltılmalıdır. 15.05.2024 [email protected] 29  WCAG – AAA Seviyesi – 23 Madde – Sesli içeriklerin işaret dili çevirisi. – Video öğelerinin detaylı alternatifleri. – Arka plan sesleri dikkatli kullanılmalıdır. – Kullanıcıların acil durumlar dışındaki güncellemeleri kapatabilmesi. – İnternet sitelerinde bir saniyede 3 kereden fazla yanıp sönen öğeler yer almamalıdır. 15.05.2024 [email protected] 30  Erişilebilirlik Faktörleri – Metin Standartları – Renk Standartları – İmaj ve İmaj Haritası Standartları – Ses Standartları – Çoklu Ortam Öğeleri Standartları – Bağlantı Standartları – Form Standartları – Veri Tablosu Standartları – Çerçeve Standartları – Betik (Script) Plug In ve Applet Standartları – Pencere Kontrolü Standartları – Sayfa Yapısı / İçeriği Standartları 15.05.2024 [email protected] 31  Kontrol Araçları Örnekler – achecker.ca/checker/index.php – www.cynthiasays.com – www.userlight.com/apps/mwac/ – cksource.com/accessibility-checker/ – dynomapper.com/blog/27-accessibility-testing/ – www.w3.org/WAI/ER/tools/ (W3 Kaynakları) – kamis.gov.tr (TÜBİTAK BİLGEM - Rehber) 15.05.2024 [email protected] 32