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