Arayüz Tasarımı ve Programlama
Transkript
Arayüz Tasarımı ve Programlama
25.10.2011 Neleri Konuşacağız Arayüz Tasarımı ve Programlama • • • • Arayüz Nedir ? Arayüz Çeşitleri Arayüz Tasarım Yöntemleri Arayüz Tasarım Hataları Ömer Faruk MIZIKACI 2008639402 Arayüz Nedir ? • Bilgisayar ve uygulamalarının geniş kullanıcı kesimi tarafından efektif bir biçimde kullanılması için bilgisayar ile insan arasında etkileşimi sağlayan arayüzlerin doğru tasarlanması gerekir.(1) • Çünkü sistemin oluşumunda, kullanımında ve bakımındaki birçok problemin nedeni kötü bir arayüz tasarımına kadar uzanır.(2) • Özellikle son kullanıcılar sistemde oluşan hataların nedenini anlamazlar; • Kullanımı zor veya anlayamadıkları sistemlerle uğraşırlarken de, daha fazla hata yaparlar. Bu bilgiler ışığında, iyi bir kullanıcı arayüzünde • Sisteminiz birçok üstün özelliklere sahip olsa da kullanacak kişinin anlamasını zorlayacak arayüze sahip ise hedeflenen başarıyı sağlayamaz. • Kodlama maliyetini, arayüz sorunlarının yüksek maliyetini, sistemin çalışmasını engelleyecek ciddi hataları azaltmalı; • Sistemin kullanılabilirliğini arttırarak kullanıcılara kolaylık sağlamalı, daha fazla ürün sattırmalıdır.(2) 1 25.10.2011 Arayüz Tasarımının Ekonomisi (6) • Đyi bir arayüz sistemi sattırır. • Windows, Macintosh arayüzünün bir kopyası iken, Mac arayüzü ise Bravo’nun bir kopyasıdır. Bravo * ise Xerox PARC araştırmacıları tarafından geliştirildi.(2) • (7) • Arayüz Çeşitleri • • • • • * http://en.wikipedia.org/wiki/Bravo_(software) Doğrudan işleme Doğrudan işleme Menü seçme Form doldurma Komut dili Doğal dil http://e-bergi.com/2009/Ocak/resim/mario.jpg http://peyzaj.org/autocad-turevi-ucretsiz-mimari-cizim-programi-2/ Menü Seçme Form Doldurma http://images.devshed.com/da/stories/Number2Words/Fig01.JPG http://duzceeo.org/yonetim/upload_files/ilac%20takip%20sistemi%20ile%20ilgili%20form.jpeg 2 25.10.2011 Komut Dili Doğal dil http://www.doobybrain.com/wp-content/uploa ds/2009/11/dos-pillow.jpg http://www.teknokedi.com/wp-content/uploads/2011/07/MS_DOS-01.jpg http://1.bp.blogspot.com/_dDTFtncx2nA/TLTj541xOgI/AAAAA AAAAFs/oIfjCW6f7Pg/s1600/ms-dos.png http://degiske.com/wp-content/uploads/2008/08/ornek2.png Stil Kılavuzları İBE uzmanları iyi bir arayüz tasarımı için üç yol önermektedir. • Bu kılavuzlar genellikle arayüz geliştiren büyük firmalar tarafından firma içinde geliştirilen tasarımlarda uygulanmak üzere hazırlanır. • Apple Macintosh Guidelines Java Programming Style Guidelines gibi. • Stil Kılavuzları (Style Guidelines) • Tasarım Kılavuzları (Design Guidelines) • Kullanılabilirlik Testleri Apple Macintosh Guidelines • Bu kılavuzların temel amacı hazırlanan tasarımlarda tutarlılığı sağlamaktır, ancak tutarlılığın yani uyumluluğun kullanılabilirlik ile aynı anlama gelmediğini ihmal etmemek gerekmektedir. • Stil kılavuzlarını tasarlanması planlanan arayüzler de kullanmak her zaman mümkün olmayabilir. • Bunun yanında tasarımcıların kendi tasarımlarının kullanılabilirliği hakkında sağlıklı görüşler geliştiremediği göz önüne alınırsa (3) stil kılavuzlarının yorum ve uygulamayı tasarımcıya bırakması kullanılabilirlik açısından sakıncalar oluşturabilmektedir. • http://interface.free.fr/Archives/Ap ple_HIGuidelines.pdf • http://developer.apple.com/library /mac/#documentation/UserExperi ence/Conceptual/AppleHIGuidelin es/Intro/Intro.html • Sistem Đkonları http://developer.apple.com/library /mac/#documentation/UserExperi ence/Conceptual/AppleHIGuidelin es/SystemProvidedIcons/SystemPro videdIcons.html#//apple_ref/doc/ uid/20000957-CH5-SW1 3 25.10.2011 Nielsen'a göre kullanıcı arayüzlerin de Tasarım Kılavuzları aşağıdaki hususlara dikkat edilmelidir.(3) edilmelidir.(3) • Đyi tasarımın genel prensiplerini veren kılavuzlardır. Tasarım kılavuzları platformdan bağımsızdır ve kullanılabilirliği artırmaya yöneliktir. • 1970'li yıllardan günümüze çok sayıda tasarım kılavuzu önerilmiştir. Günümüzde kullanıcı arayüz tasarımı için kullanılan en popüler tasarım kılavuzlarından birisi Nielsen tarafından verilmektedir (Nielsen's Ten Usability Heuristics).(2) • • • • • • • • • • Basit ve doğal diyalog kullanımı Kullanıcının diliyle konuşma Yardım ve belgeleme sağlanması Hafıza yükünün en aza indirilmesi Tutarlılık Geribildirim sağlanması Açıkça gösterilmiş çıkış ve işlem sonlandırma Kısayolların önerilmesi Uygun hata mesajlarının tasarlanması Hataların engellenmesi Kullanılabilirlik Testleri • Tasarım kılavuzlarının önemli sorunları ise, tasarım için genel hatlar çizdiği için yoruma açık olmasıdır. Yani aynı sorunlara farklı çözümler sunması ortak bir görüşte karar kılınmasını engeller. • Örneğin; tutarlılığın nasıl sağlanacağı, geribildirimlerin nasıl verileceği gibi sorulara yeterli çözüm üretmez. • Kullanıcılar uygulamayı kullanırken sergilediği davranışlar değerlendirilebileceği gibi kullanıcıdan, uygulama sırasında nasıl bir yol izlediğini sesli olarak aktarması istenerek (verbal protokol) alınan görüntü ve ses kayıtları test sonrasında davranışlarla birlikte değerlendirilebilir. • Göz-izleme (eye-tracking) cihazları kullanılarak da elde edilen sonuçlar kullanılabilirlik açısından yorumlanabilir. Tasarımda İnsan Etkeni • Kullanıcının karakteri ve sistemdeki görevi çok detaylı bir analiz sonrası iyi anlaşılmalıdır. • (4) • Đnsanlar öğrenirler, ancak öğrenmek zordur. • Đnsanlar karmaşıktır, ancak basitliği severler. • Problemleri çözmek isterler, ama çözemedikleri problemler olunca çabuk sıkılırlar. (2) • (5) 4 25.10.2011 Tasarımda İnsan Etkeni(Devam) • Talimatlar okumak yerine, bakarak veya sorarak öğrenirler. • Đnsan kısa süreli hafızaya sahiptir. • Đnsanlar hata yaparlar. • Đnsanlar farklıdırlar. • Etkileşim üslupları farklıdır. Arayüz Tasarımında ki Hatalar • Kullanıcı, sisteme nasıl bilgi girişi yapacak ? • Sistemin, kullanıcıya sunduğu bilgi nasıl aktarılmalıdır ? http://www.direngen.com/wp-content/uploads/2011/07/Hatalar-218x218.jpg • Bilgilerin sunumu farklı şekilde olabilir. Bilgiler metin veya grafiksel olarak sunulabilir. Bunun tasarımına uygunluğu iyi analiz edilmelidir. Đnsan algısını zorlayacak kadar bilginin gösterilmesi. Đnsan hafıza olarak 6 – 7 adet bilgiyi aynı anda işleyebildiğini düşünürsek, bilgilerin gruplanması gerekir. http://fikirsu.com/upload/pages/image/hafiza%20teknikleri.png • Arayüz nesnelerinin doğru dizayn edilmemesi. • Örnek: okunması zor metinler, mantıksal işlevleri aynı butonların birbirinden uzak konulması, uyarı mesajlarının fark edilemeyecek yerlere konulması vb. Sistem ve insan hayatı için hayati değere sahip önemli işlevlerin kontrolünün denetimsiz yada çok sıkı denetime tabi tutulması. http://1.bp.blogspot.com/_7z0aLs0hCHs/TKyCMYkY1ZI/AAAAAAAAAvY/seYPjk85v-0/s1600/debug.jpg 5 25.10.2011 İyi bir tasarım için Özetle • Zorluklar azaltılmalı mümkünse kaldırılmalıdır. • Eşleştirme yöntemi kullanılabilir. • Feedback’ ler (Dönütler) mutlaka değerlendirilmelidir. • Yorucu veya zorlayan fonksiyonlardan kaçınılmalı. • Otomatik öğrenme için mümkün olduğunca esnek tasarım yapılmalı. • Sistemin kabul edilebilirliği, kullanılabilirliği sahip olduğu arayüzün tasarımına bağlıdır. • Her sistemin veya kullanıcı grubunun çalışma şekline göre arayüze karar verilmelidir. • Geliştirilen arayüzün uygunluğunu denetleyebilmek için kullanıcı testleri yapılmalıdır. Referanslar • Arayüz tasarım aşamasında prototipler üzerinden çalışmaya önem verilmelidir. • Tasarımda ilkelerine uygun tasarımlar yapılmalı, aktarılmak istenen bilgi karmaşıklıktan uzak arayüzler ile verilmelidir. • • • • • • • • • 1-http://www.duzce.edu.tr/kmyo/kmyo/myos/pdf/MYO_OS_9005.pdf 2- http://www.cs.toronto.edu/~jm/340S/PDF6/HCIDes6.pdf 3- http://ab.org.tr/ab06/bildiri/59.pdf 4- http://ceng.gazi.edu.tr/~hkaracan/BM515_H1.pdf 5- http://seo.rehberim.net/seo-rehberim/123-usability-in-web-webinkullanilabilirligi 6- http://www.nokia.com.tr/cep-telefonlari/tum-modeller/nokia-e600/ozellikler 7- http://www.samsung.com/tr/consumer/mobile-phone/mobilephone/tablet/YPG1CW/TUR/index.idx?pagetype=prd_detail&returnurl= 8- members.comu.edu.tr/msalahli/proje_web/proje2_9(2011).ppt 9- Đnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği Teoriden Pratiğe Kürşat Çağıltay Teşekkürler 6