Bankacılık Uygulamalarının İnsan Bilgisayar Etkileşimi Standartları Kullanılarak İyileştirilmesi Sevnur Tatar1 , Şefik Temel2 , Mehmet S. Aktaş1 ve Oya Kalıpsız1 1 Bilgisayar Mühendisliği Bölümü, Elektrik-Elektronik Fakültesi Yıldız Teknik Üniversitesi, İstanbul 2 Ar-Ge Merkezi, Cybersoft, İstanbul sevnurtatar@gmail.com, sefik.temel@cs.com.tr, aktas@yildiz.edu.tr, kalipsiz@yildiz.edu.tr Abstract Creating an interface intending to meet users’ necessities is constituted to be as important as the background system. Usage of some interfaces can be facilitated by applying the accessibility and usability standards concerning Human Computer Interaction and User Experi- ence. This report describes the creation of a user interface design library using ExtJS as a JavaScript library, founded on Google Material De- sign principles, as well as Stephen Few’s ’Show Me The Numbers’ book. It is aimed on design of huge data graphic representation for banking systems, and bases on Jakob Nielson’s ’Ten heuristics for user interface design’, ’Web Content Accessibility Guidlines’ (WCAG) - standard of an international W3C enterprise, also known as ISO/IEC 40500:2012. The library has been tested on an interface of a private bank system with the participation of its users, and proved to have a succesfull outcome - its usability has been observed. Abstract Geliştirilen bir yazılımda, kullanıcının ihtiyaçlarına uygun ara- yüzün yaratılması en az arka planda çalışan sistem kadar önem teşkil etmektedir. İnsan Bilgisayar Etkileşimi ve Kullanıcı Tecrübesi alanların- daki araştırmalar ışığında ulaşılabilirlik ve kullanılabilirlik kavramlarının tasarıma adapte edilmesi ile kullanım kolaylığını arttıran ara yüzlerin bil- imsel bir şekilde tasarımı yapılabilmektedir. Bu bildiride bir JavaScript kütüphanesi olan ExtJS kullanılarak; uluslararası bir kuruluş olan W3C’- nin, web bileşenlerinin daha fazla ulaşılabilir olması için geniş ölçekli öneriler içeren ve ISO/IEC 40500:2012 standardı olarak da kabul edilen WCAG 2.0 (Web Content Accessibility Guidlines) standardı ve Jakob Nielson’un “Ten heuristics for user interface design” ilkeleri ile sistem ulaşılabilirliği sağlanmış, Google Materyal Tasarım ilkeleri ve Stephen Few’in “Show Me The Numbers” isimli kitabı baz alınarak banka sis- teminin büyük verilerinin tablo ve grafiklerle gösterimi ve işlenmesindeki kullanım kolaylığını artıran arayüz bileşen tasarımlarından oluşan bir arayüz kütüphanesi geliştirilmiştir. Özel bir banka sisteminin arayüzleri üzerinde banka kullanıcıları ile test edilen kütüphanenin kullanılabilirlik başarısı gözlemlenmiştir. 400 Anahtar Kelimeler: Kullanıcı Deneyimli Arayüz, Kullanılabilirlik ilkeleri, WCAG, Bankacılık Arayüzü, Grafik ve Tablo Gösterimi, İnsan Bilgisayar Etkileşimi 1 Giriş Kullanıcı deneyiminin insan faktörü ve ergonomisi üzerine köklenmesi ile bir- likte insan, makine ve bağlamsal ortamlar arasındaki etkileşimin önem kazan- ması birlikte olmuş ve insan ile bilgisayar arasındaki bağlantı aracı olan arayüz- lerin kullanılabilirliği temel alınarak kullanıcı merkezli sistemlerin tasarlanması günümüzde gittikçe önem kazanmaya ve tercih edilmeye başlanmıştır [1]. Kul- lanıcı deneyimi insan-bilgisayar etkileşimi ve ürün mülkiyetinin pratik, deneyim- sel, duyuşsal, anlamlı ve değerli yönlerini kapsayan ve kullanıcının bir servis ile etkileşime girerken, servisi kullanırken ve servis ile etkileşimini bitirdikten sonra deneyimlediği şeylerin bütünüdür. Bunlara sistemin kullanılabilirliği, teknik yeter- liliği, ikna ediciliği, yönlendiriciliği örnek olarak gösterilebilir. Sistem kullanıla- bilirliği kullanıcının servis ile rahat ve kolay etkileşime geçmesini sağlayarak memnuniyet ve kazanımların artmasını sağlar [2]. Kullanılan sistemlerin karmaşıklığının artması kullanılabilirliğini azaltabile- cek sebeplerdendir. Araştırma konusu olan bankacılık sistemlerinin kullanıla- bilirliğinin artırılması, bankacılık verilerinin büyük olması ve bu veriler üzerinde yapılan işlemlerin detaylı ve zorlu olması dikkate alınarak bu kullanıcılara özel arayüz bileşenlerinden oluşan, banka verilerinin gösterimine uygun,açık ve rahat anlaşılır grafik gösterim şekillerinin belirlenmesi ve bunların kullanıcı deney- imliliğinin başarısının ölçülmesinde usability testing metodunun tercih edildiği arayüz bileşenlerinden oluşan bir banka kullanıcı arayüzü kütüphanesi oluşturu- larak sağlanmıştır. Sistemin oluşturulması için bir JavaScript uygulama framework’ü olan ve ModelViewViewModel modeli üzerine kurulu olan ExtJS kullanılmıştır [3]. 2 Literatür Araması Bu bölümde, kullanılabilir bankacılık uygulaması arayüz tasarımı araştırma konu- su için belirlenen anahtar kelimeler olan; ulaşılabilirlik, kullanılabilirlik, insan merkezli tasarım, materyal tasarım ile tablo ve grafik tasarım ilkelerine yer ver- ilmiştir. 2.1 Ulaşılabilirlik İlkeleri Kullanılabilir arayüz kütüphanesi bileşenlerini belirlemekte bir ulaslararası ticaret birliği olan World Wide Web Consortium(W3C)’un aynı zamanda ISO/IEC 40500:2012 olarak da kabul edilen Web İçerik Ulaşılabilirlik ilkeleri (WCAG 2.0) ile International Standards Organization (ISO)’ın 9241-210:2010 İnsan-Sistem etkileşim ergonomisi-interaktif istemler için insan merkezli tasarım isimli stan- dardı incelenmiştir [4][5]. WCAG ilkeleri, körlük ve görme azlığı,sağırlık ve duyma 401 kaybı, öğrenme zorluğu, bilişsel sınırlamalar, sınırlı hareket ve konuşma engellil- iğini kapsayan ve yaygın bir aralıkta bulunan engelli insanlar için web bileşen- lerini ulaşılabilir kılmaktadır. Bu ilkeleri uygulamak web içeriğinin aynı zamanda genel kullanıcılar için de kullanılabilir olmasını beraberinde getirmektedir[4]. 4 temel prensip olan algılanabilirlik,kullanılabilirlik, anlaşılabilirlik ve sağlamlık altında dağılmış 12 ilkeye sahip olan WCAG bütün ilkeler için test edilebilir başarı ölçütü olarak 3 seviye bulundurmaktadır: A, AA, AAA [6]. 1. Algılanabilirlik, bilgi ve kullanıcı arayüzü bileşenlerinin kişilerin algılayabile- ceği şekilde olması üzerinedir. Bu ilkeye göre; – Metin olmayan içeriklere metin alternatifleri sağlanmalıdır. – İçerik sıralamasının uyumluluğu, bilgi, yapı ve bağlantıların anlaşılabilir- liğinin ile sağlanmalıdır. – Bilgi veya yapı kaybı olmaksızın farklı yollarla sunulabilen içerik oluşturul- malıdır. – Kullanıcıların sistem üzerinde görmeleri ve duymaları kolaylaştırılmalıdır. 2. Kullanılabilirlik, kullanıcı arayüzü bileşenleri ve navigasyonun kullanılabilir olması üzerinedir. Bu ilkeye göre; – İçeriğin bütün işlevleri, tuşlara basım zamanından bağımsız olarak bir klavye ara yüzü tarafından erişilebilir olmalıdır. – Kullanıcılara gezinebilmeleri, içerik bulabilmeleri ve nerede bulunduk- larını anlayabilmeleri için yardımcı yöntemler sağlanmalıdır. – Kimliği doğrulanmış bir oturum zaman aşımına uğradığında, kullanıcı tekrar kimlik doğruladıktan sonra veri kaybı yaşamamalıdır. – Kullanıcılara içeriği okuması ve kullanması için yeterli zaman sağlan- malıdır. – Nöbetlere yol açabilecek içerik kullanılmamalıdır. 3. Anlaşılabilirlik, kullanıcı arayüzü işlemleri ve bilgilerinin anlaşılabilir olması üzerinedir. Bu ilkeye göre; – Metinlerin okunabilir ve anlaşılabilir olması sağlanmalıdır. – Kullanıcıların hata yapması önlenmeli ve hatalar düzeltilmelidir. – İçerik görünür ve öngörülebilir yollarla işlenebilir olmalıdır. 4. Sağlamlık ilkesine göre; içerik yardımcı teknolojiler de dahil olmak üzere sistemin birçok kullanıcı yazılımı tarafından algılanabilecek derecede sağlıklı olmalıdır [6]. 2.2 İnsan Merkezlı Tasarım İlkeleri “İnteraktif sistemler için insan merkezli tasarım” hakkındaki ISO 9241-210(2010) standardının hedefi arayüzleri kullanılabilirlik kriteri ile kullanıcı merkezli tasarım haline getirmektir [5]. Bu hedef doğrultusundaki 6 anahtar prensibine göre: tasarım; açık ve kolay anlaşılır, kullanıcı deneyimine hitap eden, kullanıcıları tasarım ve geliştirmeye dahil eden, kullanıcı merkezli değerlendirme ve geliştir- ilmelerle düzenlenen, esnek ve yinelenebilir işlemlere sahip ve multidisipliner beceri ve bakış açısına sahip tasarım ekipleriyle birlikte bulunmalıdır [7]. 402 2.3 Kullanılabilirlik İlkeleri Kullanıcı deneyimi mimarı Donald Norman ile birlikte New York Times’ın web sayfaları kullanılabilirlik gurusu olarak tanıttığı, kullanılabilirlik mühendisliği kavramını bulan Jakob Nielson’un kurmuş olduğu Nielsen-Norman Grubu’nun kullanılabilirlik ilkeleri de incelenmiştir [8]. Nielson’un Kullanıcı Arayüz Tasarımı için 10 Kullanılabilir Sezgisel İlkeleri, (10 Usability Heuristics for User Interface Design) insan bilgisayar etkileşimli tasarımlar için belirlenmiş 10 genel prensip olmakla birlikte ilkeler şu şekildedir: – Sistem,kullanıcıları makul bir zaman içerisindeki uygun geri beslemeler ile sürekli bilgilendirmelidir. – Sistem kullanıcıların anlamıyacağı terimlerden kaçınarak gerçek dünyaya yakın olmalıdır. – Fonksiyonların geri alınabilirliği kolaylaştırılarak kullanıcı kontrolü ve özgür- lüğü sunulmalıdır. – Kullanıcılara, farklı kelime, durum ve aksiyonların aynı anlamda olup ol- madığını düşündürmemek adına bunların tutarlılığı sağlanmalıdır. – Hata eğilimli durumları yok eden ve hata yapılmasını önleyen tasarımlar oluşturulmalıdır. – Kullanıcıların hafıza yükü minimuma indirilmeli ve sistem kullanım talimat- ları mümkün olduğunca görünür ve telafi edilebilir olmalıdır. – Esneklik ve kullanım etkinliğinin artırılması ile kullanıcı ihtiyaçları tah- min edilip gerekli adım sayısı düşürülmeli ve sistem özelleştirimesine imkan sağlanmalıdır. – Diyaloglarda gereksiz bilgilere yer verilmeden estetik ve minimalist tasarım gerçekleştirilmelidir. – Kullanıcıların hataları tanıması, anlaması ve onlardan kurtulmasına yardım edilmesi, – Çözüme dönük somut adımlar içeren ve çok uzun olmayan yardım döküman- tasyonu sağlanmalıdır[9] [10]. Bu ilkeler, kullanıcı deneyimi kavramının ortaya çıkışından beri tasarımların bu kavram ölçütünde oluşturulması ve değerlendirilmesinde kullanılan önemli bir yol gösterici olmuştur [11]. 2.4 Materyal Tasarım İlkeleri Ulaşılabilirlik, kullanılabilirlik ve insan merkezli tasarım ilkelerinin yanında arayüz tasarım prensipleri olarak, arayüz bileşenlerinin görselliği üzerine belirlenmiş olan Google Material Design ilkeleri incelenmiştir. Google Material Design, Google- ’ın inovasyon ve bilim ve teknolojinin olanakları ile iyi tasarım için kullanılan klasikleşmiş ilkeleri sentezleyerek kullanıcıları için görsel bir dil oluşturma çabasıyla ortaya çıkmıştır [12]. Tasarım ilkeleri ile oluşturulan arayüz kütühanemiz bileşen- lerine örnek olarak, Google’ın kabul ettiği buton görselliği prensipleri ve bu görsellik baz alınarak oluşturulmuş kendi sistem buton görselliğimiz Şekil 1’de temsil edilmiştir. 403 3 Test ve Değerlendirme Çalışma sonucunda iyileştirilen arayüzlerin örnek sunumu, aynı arayüz ekranının eski ve yeni görüntüsü birlikte verilerek (soldan sağa;eski ve yeni versiyon) Şekil 2’de gösterilmektedir. Yapılan değişiklikler içerisinde; kullanılan renklerin kon- trast değerlerine göre düzenlenmesi, anlam karmaşasına yol açan içeriğin değiştir- ilmesi, bileşenlerin kullanıcı deneyimli materyal ölçüleri ile düzenlenmesi görülmek- tedir. Çalışmanın, kullanılan standartları karşılama başarısının ölçülmesinde WCAG ilkelerinden oluşan bir onay listesi oluşturulmuş ve 3 ayrı seviye için başarılı ol- 404 unan ve olunmayan ilkeler kontrol edilmiştir. karşılandığı görülmüştür. Gerçek- leştirilmeyen ilkelerden Seviye AAA’da bulunanların bankacılık uygulaması için gerek görülmeyen ilkeler olduğu, Seviye AA ve A’da bulunan ilkelerden birinin teknik yetersizlik sebepli ve diğerlerinin görme engelli kullanıcı olmaması sebepli gerçekleştirilmeyen ilkeler olduğu saptanmıştır. Sistem WCAG başarısı Tablo 1’de gösterilmiştir. Tasarımların kullanıcı merkezliliğinin başarısının ölçülmesi, elde edilen çalış- maların da doğruluğunu göstereceğinden, test tekniğinin seçilmesi konusu önem arz etmektedir. Bu doğrultuda yapılan araştırmalardan ulaşılan kullanılabilir- lik testi (usability testing) tekniği, temsilci kullanıcıların belirlenmiş görevleri yerine getirirken, gözlemciler tarafından izlenip, dinlenip, notlar alınarak takip edilmesinin tercih edildiği bir metoddur [13]. Kullanıcıların sistem ile etkileşi- minin, verilen görevleri ne kadar sürede ve hangi kolaylıkta bitirip bitiremedik- lerinin, hangi hatalar ve zorluklarla karşılaştıklarının kullanıcı izlenerek tespit edilebilmesi ve testin ekipman gerektirmeyip herhangi bir ortamda, Jakob Niel- son’un teorisine göre yalnızca 5 kişi ile yapılmasının yeterli olması bu methodu tercih edilir kılmıştır [14]. Kullanılabilirlik testinde değerlendirme parametlerinin özenle seçilmesinin başarı tespiti için önemini gören Afifa Lodhi, bir çalışmasında, kullanılabilir- lik testi değerlendirme parametreleri olarak Nielson’un 10 kullanılabilir sezgisel ilkelerini seçmiş ve sezgisel ilkelerin sistem tarafından karşılanıp karşılanmadığı deneyimlenerek, sistem kullanılabilirlik başarısını tespit etmiştir [15]. Bu deney- imden yola çıkarak yapacağımız arayüz tasarımı testlerinde kullanıcılara görevler verilmiş ve bu görevleri gerçekleştirmeleri izlenerek, deneyimleri, 10 kullanıla- bilirlik sezgisel ilkeler, WCAG ve ISO 9241-210 baz alınarak hazırlanan testler ile elde edilmiştir. 18 soru içeren test için cevap seçenekleri; kesinlikle katılmıy- orum, katılmıyorum, belki, katılıyorum ve kesinlikle katılıyorum olarak belirlen- miştir. Kullanıcıların basit, orta ve karmaşık olarak hazırlanan 3 ayrı senaryoyu eski sistem üzerinde gerçekleştirilmesi izlenmiş ve ardından kullanılabilirlik tes- tini doldurmaları istenmiştir. Aynı işlem standartlarla iyileştirilmiş sistem için de gerçekleştirilmiştir. Ardından eski ve yeni sistemlere verilen cevaplar; kesin- likle katılmıyorum 1, kesinlikle katılıyorum 5 puan olacak şekilde 1’den 5’e kadar puanlandırılmış ve kullanıcıların eski ve yeni versiyonlarda uyguladıkları senary- olar sonucu teste verdikleri cevapların ortalama puanları karşılaştırılmıştır. Yeni 405 sisteme verilen puanların daha fazla olduğu ve memnuniyet yüzdelerinin yüzde 51 ile 93 arasında değişip ortalama memnuniyet ortalamasının %73 olduğu gö- zlemlenmiştir. Tablo 2’de kullanılabilirlik testi sonuçları gösterilmiştir. 4 Sonuçlar ve Gelecekteki Çalışmalar Kullanıcı deneyimi kavramının tasarımlara adapte edilmesi amacının; WCAG ulaşılabilirlik standardı, ISO 9241-210 standardı, kullanılabilirlik sezgisel ilkeleri ve Google Materyal Tasarım İlkeleri baz alınarak gerçekleştirilmesinin kullanıcı memnuniyetini artırdığı görülmüştür. Bu ilkeler ile özel bir banka sisteminde kullanılması için hazırlanan bileşen tasarım kütüphanesinin, bankanın bir uygu- lamasında kullanılması ve diğer uygulamar için de kullanılabilecek olması; her arayüz için kullanılabilirlik kurallarının, kullanılacak bileşen ve fonksiyonlar için yeniden düzenlenmesinin gerekmediği sonucunu ortaya çıkarmıştır. Böylece, ku- rumların zaman kısıtlılığı sebebi ile önem gösteremedikleri kullanıcı deneyimlil- iğinin, bir sefer yapılacak arayüz tasarım kütüphanesi çalışması ile birden fazla kez kullanılabileceği gösterilmiştir. Kullanılabilirlik ve ulaşılabilirliğin, genel kul- lanıcılar ile birlikte engeli bulunan kullanıcı gruplarınına da sistem memnuniyeti ve kullanım kolaylığı sağlaması bu kavramların tüm kurumlar tarafından kul- lanılmasının gerekliliği daha da vurgulamaktadır. WCAG için sistemi kullanacak gruplardaki kişilerin belli olması, dikkate alınacak engel tipini bildiriyorsa stan- dartlarda, özellikle bu engellerin aşılmasını sağlamak amaçlı oluşturulan ilkelerin tasarımda gerçekleştirilmesi sağlanabilmektedir. Buna ek olarak kullanılacak sis- temin hangi alanda kullanılacağı (eğitim, sağlık, finans), bu alanda duyula- cak ihtiyaçların hangi seviyede gerçekleştirilmesini gerektiriyorsa bu detay se- viyesine göre gerçekleştirilmesi sağlanabilmektedir. Yapılan tüm iyileştirmelerin başarısının test edilmesinin, alınan yolun doğruluğunu doğrudan göstermesi, kul- lanılabilirlik testleri yapılmasını gerekli kılmaktadır. Yapılan sistem ulaşılabilir- lik başarı testinde elde edilen sonuç, görme engelli kullanıcı bulunmaması se- bebi ile bu engele yönelik ilkelerin karşılanmadığı düşünülecek olup bu ilkeler dışında tekrar hesaplanırsa, %70 oranından %86 ’ya çıkmaktadır. Standartları 406 uygulamanın kullanıcı deneyimi ve memnuniyetine etkisi kullanılabilirlik testi ile test edildiğinde ise %72 memnuniyet elde edildiği görülmüştür. Bu sayede, insan-bilgisayar etkileşimi standartları kullanılarak yapılan iyileştirmelerin kul- lanıcı memnuniyetini artırdığı ispatlanmıştır. Gelecekteki çalışmalarda uygu- lanan standartların tüm engel grupları için sağlanması gerçekleştirilecek ve oluş- turulan bileşen kütüphanesine ek olarak standartlara göre oluşturulan fonksiy- onların da bir kütüphane içinde bir araya getirilebilmesi sağlanarak, kul- lanıla- bilir ve ulaşılabilir arayüz kütüphanelerinin sistemlere adapte edilmesi kolay- laştırılacaktır. 5 kullanıcı ile gerçekleştirilen test tekniğine ek olarak kullanıcı sayısı artırılarak sistem test edilecek ve bu sayede test edilen kullanıcı deneyimi sayısının sistem başarısını göstermedeki etkisi ölçülecektir. Yapılan testlerde, kullanıcıların eski sistem üzerindeki deneyimlerinin yeni sistemi test etmedeki öğrenme etkisini dengelemek adına, test grubunda eşit sayıda kullanıcı için ilk test edilen sistemin değiştirimesi sağlanacaktır. References 1. Kujala, Sari; Roto, Virpi; Väänänen-Vainio-Mattila, Kaisa; Karapanos, Evangelos; Sinneläa, Arto (2011). "UX Curve: A method for evaluating long-term user experi- ence” 2. “UX Design Defined”, http://uxdesign.com/ux-defined, citied 10/06/2016 3. “MVC- MVVM and More”, https://www.sencha.com/blog/ext-js-5-mvc-mvvm-and- more/, citied 10/06/2016 4. “WCAG Overview”, https://www.w3.org/WAI/intro/wcag, citied 10/06/2016 5. ISO 9241-210:2010. 2010. Ergonomics of human-system interaction - Part 210: Human-centred design for interactive systems. ISO. 6. Web Content Accessibility Guidelines (WCAG) 2.0, W3C Recommendation 11 De- cember 2008 7. “ISO 13407 is dead. Long live ISO 9241-210!”, David Travis (UserFocus.co.uk), avail- able on http://www.userfocus.co.uk/articles/iso-13407-is-dead.html , cited 28/5 2016. 8. “Nielsen Norman Group ”https://www.nngroup.com/search/?q=usability, citied 10/06/2016 9. Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI’90 Conf. (Seattle, WA, 1-5 April), 249-256. 10. J Nielsen - Fremont: Nielsen Norman Group , (1995), “10 usability heuristics for user interface design” 11. Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI’94 Conf. (Boston, MA, April 24-28), 152-158. 12. “Google Material Design”, https://www.google.com/design/spec/material- design/introduction.html , citied 10/06/2016 13. ”Usability Testing”, http://www.usability.gov/how-to-and- tools/methods/usability-testing.html , citied 10/06/2016 14. Nielsen, Jakob, and Landauer, Thomas K.: "A mathematical model of the finding of usability problems,"Proceedings of ACM INTERCHI’93 Conference (Amsterdam, The Netherlands, 24-29 April 1993), pp. 206-213. 15. Afifa Lodhi, Usability Heuristics as an assessment parameter: For performing Us- ability Testing(2010), ; MSCS (Software Engineering), Department of computing, Iqra University, Islamabad Campus, Pakistan 407