Kullanıcı Arayüzü Tasarımı

©Ian Sommerville 2004 Software Engineering, 7th edition. Chapter 16 Slide 1

Kullanıcı Arayüzü Tasarımı


Neler öğrenilecek

Kullanıcı arayüzü tasarımı ilkeleri Çeşitli arayüzü üsluplarının karşılaştırılması Grafik ve metinlerin sunumu Temel tasarım girişimleri Sistemin değerlendirilmesi


Kullanıcı arayüzü

Kullanıcı arayüzleri, kullanıcıların isteklerini, başarılarını, deneyimlerini karşılamalıdır.

Kullanıcı, sistem hakkında çoğu zaman sistemin işlevselliğine göre değil, kullanıcı arayüzüne göre değerlendirme yapar.

Kötü tasarlanmış arayüzü, kullanıcının ciddi hatalar yapmasına neden ola bilir.

Kötü tasarlanmış arayüzü, pek çok yazılım sisteminin hiçbir zaman kullanılmamasının başlıca nedenidir.


Grafiksel Kullanıcı Arayüzü-GUI

Grafiksel arayüzlerinin özellikleri:• Öğrenmek ve kullanmak kolaydır; • Sistemle etkileşimi kullanıcı birden fazla ekran

(pencere) ile kura bilir; bir meseleden diğerine geçiş kolaylaşıyor;

• Ekranın her hangi noktasındaki nesneye anında erişim mümkündür


Grafiksel Arayüzün Nitelikleri

Pencereler İkonlar Mönüler Nokta erişimi grafikler


Arayüzü tasarımında insan etkeni Sınırlı kısa süreli hafıza

• İnsan aynı anda 7 bilgi birimi aklında tuta bilir. Eğer arayüzünde bundan fazla birim ifade edilirse, bu hatalara neden ola bilir.

İnsan hata yapar• İnsan hata yaparsa ve sistem yanlış çalışırsa, uygun olmayan

alarm ve bildiri(message) insanın heyecanını yüklselte ve böylelikle de daha çok hatalara sebep ola biler.

İnsanlar farklıdırlar• İnsanların fiziki yetenekleri çok farklıdır. Tasarımcı arayüzünü

kiminse özel yeteneğine dayanarak yapmamalıdır. İnsanlar, etkileşim üsluplarını seçmede farklılık

gösteriyorlar• Bazıları şekli sever, bazıları metinleri


Tasarım ilkeleri

KAT sistemin kullanıcılarının isteklerini, deneyimlerini ve yeteneklerini hesaba almalıdır.

Tasarımcılar insanın fiziki ve zihni yeteneklerinin sınırlarını (sınırlı kısa zamanlı hafıza) dikkate almalı ve insanın hata yapa bileceğini hesaba almalıdırlar.

Arayüzü tasarımlarında, tüm tasarımlar için uygulanan ilkeler kullanıla bilir. Ama tüm ilkelerin tüm tasarımlar için uygulana bileceği söz konusu değildir.


Tasarım ilkeleri (devamı) Kullanıcı arkadaşlığı

• Arayüzü bilgisayar terimlerini değil, kullanıcıya yönelik ifadeleri ve kavramları içermelidir. Örneğin, ofis sisteminde e-mail, direktori, fayl gibi kavramlar yerine mektup, klasör, belge kavramları işletilmelidir

Uyumluluk• Sistemdeki komutların ve mönülerin biçimleri aynı olmalı,

işaretlemeler benzer olmalıdır. En az beklenmedik olay

• Eğer komutlar belli bir yolla işlem yapıyorsa, kullanıcı komutların işlemlerini tahmin ede bilmelidir


Tasarım ilkeleri (devamı)

Kurtarılabilirlik• Sistem kullanıcı hatalarına belirli bir esneklik sağlamalı,

bu hataların düzeltmesine izin vermelidir. Bunun için işlemi geri alma , dağıtıcı (silici)işlemlerin doğrulanması gibi olanaklar kullanıla bilir

Kullanıcı kılavuzu• Yardım sistemleri, çevrimiçi talimatlar gibi kullanıcı

kılavuzları hazırlanmalıdır Kullanıcı farklılığı

• Farklı kullanıcılar için etkileşim yöntem ve araçları desteklenmelidir. Örneğin, kullanıcı görmede zorluk çeke bilir ve buna göre de metinler büyük görüne bilmesi sağlanmalıdır


KAT sorunları

Etkileşimli sistem tasarımında 2 sorun çözülmelidir:• Kullanıcı, bilgisayar sistemine nasıl bilgi vermelidir?• Bilgisayar sisteminin, kullanıcıya sunduğu bilgi nasıl ifade

edilmelidir? Kullanıcı etkileşimi ve bilgi tasviri, kullanıcı arayüzü

ile bütünleşmelidir.


Etkileşim üslupları

Doğrudan işleme Mönü seçme Form doldurma Komut dili Doğal dil


Etkileşim üslupları

Etkileşim üslubu

Başlıca üstünlükleri Başlıca yetersizlikleri Uygulama Örnekleri

Doğrudan işleme

Hızlı ve sezgisel etkileşim Öğrenimi kolay

Mesele ve nesneler için görsel simgeler oldukta uygundur.

Video oyunları CAD sistemleri

Mönü seçme Kullanıcı hataları önlenir Az sayıda simge girişi

Deneğimli kullanıcılar için yavaştır. Çok mönü seçeneği oldukta karmaşık ola bilir.

genel amaçlı sistemler

Form doldurma

Basit veri girişi Öğrenimi kolay Kontroledilebilir

Ekranın büyük kısmını kapsaya bilir. Bazan kullanıocı istekleri formlarda olmaya bilir

Ambar yönetimi, personel ödünç işlemleri

Komut dili Güçlü ve esnek Öğrenimi zor. Hata yönetimi zayıf

İşletim sistemleri, Kütuphane bilgi sistemi

Doğal Dil Deneğimsiz kullanıcılar için elbverişli. Kolay genişlenebilir

Daha çok girdi gerekiyor. Doğal dili anlayan sistemler güvenilirli değiller.

Bilgi çıkarma sistemleri


Doğrudan işlem’in artı yönleri

Kullanıcı bilgisayar üzerinde kendi kontrolünü hissediyor

Öğrenme nispeten az zaman alıyor Kullanıcı, işlemlerine doğrudan müdahale

ede biliyor ki, bununla da hatalar hızlı olarak buluna ve düzeltile bilir


Doğrudan işlem’in sorunları

Bilginin elverişli biçimde çıkarılması zor ola bilir

Kullanıcının bilgi uzayının büyük olduğu durumlarda bu uzayda yönü belirlemek için ne tür araçlar sağlanmalıdır?

Doğrudan işlem arayüzlerini programlaştırmak zordur


Denetim paneli arayüzü

Title

Method

Type

Selection

NODE LINKS FONT LABEL EDIT

JSD. example

JSD

Network

Process

Units

Reduce

cm

Full

OUIT

PRINT

Grid Busy


Mönü sistemleri

Kullanıcı, sistem tarafından ona sunulmuş listeden seçim yapıyor

Bu seçme nokta usulü ile (fareyi tıklamakla) veya seçimin adını yazmakla gerçekleştirile bilir

Dokunmatik terminaller kullanıla bilir


Mönü sistemlerinin artı yönleri ve sorunları

Mönü sistemlerinin artı yönleri • Kullanıcının komut adlarını ezbere bilmesine gerek yoktur; bu

adlar doğru-dizgin biçimde liste halinde sunulmuştur• Yazma ile bağlı hata en aza indiriliyor

Mönü ile bağlı sorunlar• Mantıki bağlayıcılar (ve, veya) içeren işlemleri ifade etmek

mümkünsüzdür• Seçim sayısı az oldukta mönü sistemi uygundur.Seçim sayısı

çok oldukta mönüleri yapılandırma yöntemleri kullanılmalıdır


Form tabanlı arayüzü

Title

Author

Publisher

Edition

Classification

Date ofpurchase

ISBN

Price

Publicationdate

Number ofcopies

Loanstatus

Orderstatus

NEW BOOK


Komut arayüzü

Kullanıcı, sistemin çalışması için talimatları komutlarla veriyor

Her türlü karmaşık komutlar oluşturula bilir. Derleyici yöntemleri uygulanır Daha az yazı gerektiren özgü arayüzleri

geliştirilmelidir


Komut dilleri

Hızlı etkileşim imkanı sağladığı için daha çok deneyimli kullanıcılara yöneliktir.

Tesadüfi ve deneyimsiz kullanıcılar için uygun değil

Mönü komutlarına (klavye kısayolları) alternatif ola bilir. Bazen komut dili arayüzü ve mönü tabanlı arayüz aynı zamanda desteklenir


Komut arayüzlerinin sorunları

Kullanıcı komut dilini öğrenmelidir. Bu bakımdan sistemi ara-sıra kullananlar için uygun değil

Kullanıcı komutlarda hata yapa bilir. Bu bakımdan, hataların bulunması ve düzeltilmesi sistemi gerekiyor

Etkileşim klavye ile gerçekleştirildiğinden yazma yeteneği talep olunuyor


Doğal Dil arayüzü

Komutları kullanıcı doğal dilde yazar. Genelde, sözlük kısıtlıdır ve bu tür sistemler özgü uygulama alanı ile sınırlıdır

Şu anki Doğal dili işleme teknolojisi tesadüfi kullanıcıların etkili biçimde çalışa bilmesini sağlayamıyor.Deneyimli kullanıcıyı ise fazla yazı yazma tatmin etmiyor


Çok kullanıcı arayüzleri


Web tabanlı arayüzleri

Pek çok web tabanlı sistemlerde web formlarına dayalı arayüzleri bulunmaktadır.

Form alanı mönüler, serbest metin girişleri,radyo butonları … ola bilir.


Örnek: Kütüphane sistemi (LIBSYS) etkileşimi

Belge arama• Kullanıcılar, onlara gerek olan belgeleri bulmak

için arama araçlarını kullanmak isterler Belge isteği

• Kullanıcı, belgenin kendi bilgisayarına veya çıktı almak için sunucuya gönderilmesini isteğe bilir


LIBSYS arama formu

LIBSYS: Search

Choose collection

Keyword or phrase

Search using

Adjacent words

Search Reset Cancel

All

Title

Yes No


Bilgi Sunumu

Bilgi doğrudan (kelime işlemcide metin) sunula bilir veya bazı dönüştürmeler (örneğin, grafik form) kullanmakla sunula bilir.

Model-görünüm-denetleyici yaklaşımı, verilerin çok yönlü sunumunu desteklemek için bir yoldur


Bilginin sunumu


Model-görünüm-denetleyici (MGD-MDC)

Model methods

Controller methods View methods

Userinputs

view modificationmessages

Model edits

Model queriesand updates

Controller state View state

Model state


MGD-örnek

Subject

A: 40B: 25C: 15D: 20

Observer 1 Observer 2

0

50

25

A B C D

A

B

C

D


Bilginin tasviri

Statik bilgi• Oturumun başlangıcında verilir ve oturum

boyunca değişmez.• Sayısal ve metinsel ola bilir.

Dinamik bilgi• Oturum boyu değişe bilir ve değişmeler sistem

kullanıcısına iletilmelidir.• Sayısal ve ya metinsel ola bilir.


Bilgi tasviri etkenleri

Kullanıcının kesin bilgiye veya veriler arasındaki ilişkiler hakkında bilgiye ihtiyacı var mı?

Veri değerleri hangi sıklıkla değişmektedir? Değişiklikler anında kaydedilmelidir mi?

Değişiklik baş verdikte kullanıcının her hangi tepkisi (cevabı) olmalıdır mı?

Bilgiler metin ve ya sayısal türünden midir? Karşılaştırmalı değerler önemlidir mi?


Bilginin değişik sunum yöntemleri

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835


Analog ve dijital sunum

Dijital sunum• Öz – küçük ekran alanı gerekiyor;• Kesin değerler ifade edile bilir.

Analog tasvir• Değişkenin gözle izlenimini almak için iyidir;• Bağıntılı değerleri göstermek mümkündür;• İstisnai veri değerlerini görmek kolaydır


Tasvir yöntemleri

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar


Bağıntılı değerlerin sunumu

0 100 200 300 400 0 25 50 75 100

Pressure Temperature


Verilerin görselleştirilmesi

Büyük boyutta bilgileri tasvir etme yöntemi. Görselleştirme, varlıklar arasındaki bağlantıları ve

verilerin eğilimlerini göstermek için kullanılır Mümkün veri görselleştirmeler:

• Farklı kaynaklardan toplanmış hava hakkında bilgiler -izobarların kullanımı ;

• Telefon ağı - düğümlerin bağlaçlı kümesi;• Molekülün 3 boyutlu tasviri;• Hiperbolik ağaç biçiminde tasvir edilmiş web sayfaları


Veri görselleştirme örneği (basınç haritası)


RNA'yı oluşturan kimyasal gruplar. P, fosfat; Z, riboz şeker;

A, C, G, U, sırasıyla adenin, sitozin, guanin ve urasil.

Veri Görselleştirme (RNA yapısı)


Renk kullanımı

Renk, arayüzüne ilave boyut kazandırır ve kullanıcıya karmaşık bilgi yapılarını anlamakta yardım eder.

Renk istisnai olaylara dikkati çekmek için kullanıla bilir.

Arayüzü tasarımında renk kullanımı zamanı genel hatalar:• Anlamları ifade ederken;• Görüntülerde çok fazla renk kullanımı.


Renk kullanımı (devamı)

Sınırlı sayıda renk kullanmalı ve onların kullanımında tutucu olmalı.

Sistemin durumunun değişmesini göstermek için renk değişimi kullanmalı.

Renk şifrelemelerini, kullanıcının gerçekleştirmeye çalıştığı meseleleri desteklemek için kullanmalı.

Renk şifrelemelerini düşünerek ve uyumlu biçimde kullanmalı.

Renk çiftlerinin seçiminde dikkatli olmalı.


Hata bildirileri

Hata bildirisi tasarımı çok önemlidir. Kötü hata bildirisi,kullanıcının sistemi kabul değil, ret etmesine neden ola bilir.

Bildiriler kibarca ifade edilmeli, özlü, tutarlı ve yapıcı olmalıdır.

Kullanıcının temel bilgileri ve deneğimi, bildiri tasarımında belirleyici etken olmalıdır


Bildiri yazımında tasarım etkenleriEtken Açıklaması

Bağlam Nerede mümkün ise, sistemin ürettiği bildiriler o anki kullanıcı bağlamına uyumlu olmalıdır. Mümkün oldukça, system kullanıcının ne yaptığından haberder olmalı ve kullanıcının o anki girişimine uyğun bildiriler üretmelidir

Deneyim Kullanıcı sistemle yakın oldukça ,uzun, “anlamlı” bildiriler onu sinirlendire bilir.Ama, acemiler için sorunun kısa öz lü cümlelerle ifadesini anlamak zordur. Her iki tür bildiri yazımı sağlanmalı ve kullanıcı bildirinin özlülüğünü control ede bilmelidir

Başarı seviyesi

Bildiriler kullanıcıların başarılarına, deneyim seviyelerine uydurulmalıdır. Farklı kullanıcı sınıfları için farklı terminolojiler ve ifade yolları kullanılmalıdır

Üslup Bildirimler olumsuz değil, olumlu yönde olmalıdır. Bildiriler pasif değil, aktif kipte olmalıdır. Aşağılayıcı ve yanıltıcı olmamalıdır.

Kültür Mümkün oldukça, bildiriler, uygun sistemin satıldığı ükenin kültürüne yakın üslupta olmalıdır. Avrupa, Amerika ve Asiyada cultural farklılıklar var. Bir kültür için kabuledilebir bildiri diğeri için kabuledilmez ola bilir.


Kullanıcı hatası-örnek

Varsayalım ki, hastabakıcısı, hastanın ismini girerek kayıt bilgilerine ulaşmak istiyor bulmak istiyor

Please type the patient’s name in the box then click on OK

MacDonald, R.

OK Cancel

Patient’s name


İyi ve kötü bildiri tasarımı-örnek

Error #27

Invalid patient id

OK Cancel

System-oriented error messageUser-oriented error message

R. MacDonald is not a reg istered patient

Click on Patients for a list of patientsClick on Retry to re-input the patient’s nameClick on Help for more information

Patients Help Retry Cancel


Yardım sistemleri için giriş noktaları

Help frame network

Top-levelentry

Entry from errormessage system

Entry fromapplication


Yardım sistemi pencereleri

Mail redirection

Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent

next topicsmore

Mail redirection

Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent

Help frame map

You are here

Help history

1. Mail2. Send mail3. Read mail4. Redirection


KAT süreci

KAT kullanıcılar ve tasarımlar arasındaki sıkı iletişimi kapsayan iteratif süreçtir.

Bu süreç 3 esas adımdan oluşuyor:• Kullanıcı çözümlemesi. Kullanıcının bu sistemle

ne yapacağının anlaşılması;• Sistem prototipi oluşturma. Deneme için

prototipler oluşturmalı;• Arayüzü değerlendirme. Oluşturulmuş

prototiplerin kullanıcılarla birlikte denenmesi


Tasarım süreci

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinterface

Evaluate designwith end-users

Analyse andunderstand

user activities

Kullanıcı girişimlerinin çözümlenmesi ve

anlaşılamsı

Kağıt tabanlı tasarım prototipinin

geliştirilmesi

Prototip tasarımı

Son kullanıcı ile birlikte ytasarımı değerlendirme

Son kullanıcı ile birlikte tasarımı

değerlendirme

Yürütülür prototip nihai kullanıcı ara yüzünün

çalıştırışması

Dinamik tasarım prototipinin

geliştirilmesi


Kullanıcı arayüzünün değerlendirilmesi

Arayüzünün değerlendirilmesi, onun uygunluğunu ölçmek için gereklidir.

Tam kapsamlı değerlendirme çok pahalıdır ve pek çok hallerde pratik değildir.

Ideal halde, arayüzü kullanıcı belirteçlerine göre değerlendirilmelidir.Ama böyle belirteçler çok ender geliştirlir


Kullanılabilirlik özellikleri


Basit Değerlendirme teknikleri

Anket sorgulama Sistemin kullanımının Video kaydı ve bu

kayıt esasında değerlendirme. Kullanım araçları ve kullanıcı hataları

hakkında bilgilerin toplanması için kod yazma.

Çevrimiçi kullanıcı bilgilerini toplamak için kod edinme


Önemli hususlar

KAT ilkeleri, kullanıcı arayüzlerinin tasarımına yardım etmelidir

Etkileşim üslupları- doğrudan işleme, mönü sistemleri, form doldurma, komut dilleri ve doğal dil.

Grafik tasvirler değerlerin yönlerini ve yakınlığını ifade etmelidir. Kesinlik gerekiyorsa dijital tasvir kullanılmalıdır.

Renkler tutumlu ve uyumlu kullanılmalıdır.


Önemli hususlar

KAT süreci, kullanıcı çözümlemesini, sistem prototip oluşturmasını ve prototip değerlendirmesini kapsar.

Kullanıcı çözümlemesinde hedef, kullanıcının gerçekten çalıştığı yollara tasarımcıların duyarlılıklarını sağlamaktır

Kullanıcı arayüzlerinin prototipinin oluşturulması aşamalı süreç olmalıdır ve ilk kağıt prototipler arayüzlerinin sonraki otomasyon prototipleri için temel olmalıdır.

Kullanıcı arayüzü değerlendirmede amaç , tasarımı nasıl daha iyileştirmek, kullanıcı isteklerin ne seviyede karşıladığını öğrenmektir

Documents

Kullanıcı Arayüzü Tasarımı