25.10.2011

1

Arayüz Tasarımı ve Arayüz Tasarımı ve ProgramlamaProgramlama

Ömer Faruk MIZIKACI

2008639402

Neleri KonuşacağızNeleri Konuşacağız• Arayüz Nedir ?

• Arayüz Çeşitleri

• Arayüz Tasarım Yöntemleri

• Arayüz Tasarım Hataları

Arayüz Nedir ?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.

• 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.

Bu bilgiler ışığında, iyi bir Bu bilgiler ışığında, iyi bir kullanıcı kullanıcı arayüzündearayüzünde

• 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)

25.10.2011

2

(6)(6)

• (7)

Arayüz Tasarımının Arayüz Tasarımının EkonomisiEkonomisi

• Đ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)

• * http://en.wikipedia.org/wiki/Bravo_(software)

Arayüz ÇeşitleriArayüz Çeşitleri• Doğrudan işleme

• Menü seçme

• Form doldurma

• Komut dili

• Doğal dil

Doğrudan işlemeDoğrudan işleme

http://e-bergi.com/2009/Ocak/resim/mario.jpg

http://peyzaj.org/autocad-turevi-ucretsiz-mimari-cizim-programi-2/

Menü SeçmeMenü Seçme

http://images.devshed.com/da/stories/Number2Words/Fig01.JPG

Form DoldurmaForm Doldurma

http://duzceeo.org/yonetim/upload_files/ilac%20takip%20sistemi%20ile%20ilgili%20form.jpeg

25.10.2011

3

Komut DiliKomut Dili

http://www.doobybrain.com/wp-content/uploads/2009/11/dos-pillow.jpg

http://1.bp.blogspot.com/_dDTFtncx2nA/TLTj541xOgI/AAAAAAAAAFs/oIfjCW6f7Pg/s1600/ms-dos.png

http://www.teknokedi.com/wp-content/uploads/2011/07/MS_DOS-01.jpg

Doğal dilDoğal dil

http://degiske.com/wp-content/uploads/2008/08/ornek2.png

İBE İBE uzmanları iyi bir arayüzuzmanları iyi bir arayüz

tasarımı için üç yol önermektedir.tasarımı için üç yol önermektedir.

• Stil Kılavuzları (Style Guidelines)

• Tasarım Kılavuzları (Design Guidelines)

• Kullanılabilirlik Testleri

Stil KılavuzlarıStil Kılavuzları• 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.

• 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.

Apple Macintosh Apple Macintosh GuidelinesGuidelines

• http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

• http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html

• Sistem Đkonları http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/SystemProvidedIcons/SystemProvidedIcons.html#//apple_ref/doc/uid/20000957-CH5-SW1

25.10.2011

4

Tasarım KılavuzlarıTasarım Kılavuzları• Đ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)

Nielsen'aNielsen'a göre kullanıcı arayüzlerin de göre kullanıcı arayüzlerin de

aşağıdaki hususlara dikkat edilmelidiraşağıdaki hususlara dikkat edilmelidir.(3).(3)

• 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

• 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ılabilirlik TestleriKullanılabilirlik Testleri• 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.

• (4)

• (5)

Tasarımda İnsan EtkeniTasarımda İnsan Etkeni• Kullanıcının karakteri ve sistemdeki görevi çok

detaylı bir analiz sonrası iyi anlaşılmalıdır.

• Đ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)

25.10.2011

5

Tasarımda İnsan Tasarımda İnsan Etkeni(Devam)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 Arayüz Tasarımında ki HatalarHatalar

• 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.

• 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.

Đ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

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

25.10.2011

6

İyi bir tasarım içinİyi bir tasarım için• 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ı.

ÖzetleÖzetle• 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.

• 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.

ReferanslarReferanslar• 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-webin-kullanilabilirligi

• 6- http://www.nokia.com.tr/cep-telefonlari/tum-modeller/nokia-e6-00/ozellikler

• 7- http://www.samsung.com/tr/consumer/mobile-phone/mobile-phone/tablet/YP-G1CW/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ürlerTeşekkürler