5.ders - 1

Machine Translated by Google
Bölüm 5
etkileşim tasarımının
temelleri
etkileşim tasarımının temelleri
• tasarım:
– nedir, müdahaleler, hedefler, kısıtlamalar
• tasarım süreci
– ne zaman olur
• kullanıcılar
– kim oldukları, neye benzedikleri… •
senaryolar –
zengin tasarım
hikayeleri •
gezinme – bir sistemde yolunuzu
bulma • yineleme ve prototipler – asla
ilk seferde doğru olmaz!
etkileşimler ve müdahaleler
yalnızca arayüzler değil tasarım etkileşimleri

sadece anlık etkileşim değil
örneğin ofiste zımba makinesi – teknoloji etkileşim tarzını değiştiriyor
• Manuel: yazın, yazdırın, zımbalayın, yazın, yazdırın, zımbalayın,…
• elektrik: yaz, yazdır, yaz, yazdır,…, zımbala
sadece artefaktlar değil müdahaleler tasarlamak

Sadece sistem değil, aynı zamanda…
• belgeler, kılavuzlar, eğitimler
• yaptıklarımızın yanı sıra söylediklerimiz ve yaptıklarımız
tasarım nedir?
tasarım nedir?
Kısıtlamalar dahilinde hedeflere ulaşmak
• hedefler - amaç – kimin

için, neden istiyorlar
• kısıtlamalar
– malzemeler, platformlar
• ödünleşimler
tasarımın altın kuralı
materyallerinizi anlayın
İnsan-Bilgisayar Etkileşimi için
materyallerinizi anlayın
• bilgisayarları anlamak –
sınırlamaları, kapasiteleri, araçları, platformları
anlamak • insanları anlamak
– psikolojik, sosyal yönler – insan
hatası
• ve bunların etkileşimi…
Hata yapmak insandır
• kaza raporları ..
– uçak kazası, endüstriyel kaza, hastane hatası –
soruşturma… suçluyor… 'insan hatası' •
ama… –
beton pervaz çok fazla ağırlık nedeniyle kırılıyor – 'lento
hatası'nı suçluyor
musunuz? … hayır –
tasarım hatası betonun stres altında nasıl
davrandığını biliyoruz • insan
'hatası' normaldir – kullanıcıların stres altında nasıl
davrandığını biliyoruz – o yüzden buna göre tasarım yapın!
• kullanıcıya en azından fiziksel malzemeler kadar iyi davranın!
Merkezi mesaj…
Kullanıcı
Tasarım süreci
senaryolar
ne
görev analizi
isteniyor yönergeler
ilkeleri
röportajlar analiz kesin
etnografya spesifikasyon
tasarım
oradaki ne
vs. diyalog uygulamak ve
notasyonları
istenen şey dağıtmak
değerlendirme
prototip
buluşsal yöntemi mimari
dokümantasyon
yardımı
Adımlar…
• Gereksinimler
– orada ne var ve ne isteniyor…
• analiz –
sıralama ve anlama • tasarım
– ne yapmalı ve nasıl karar vermeli
• yineleme ve prototip
oluşturma – doğru olanı yapmak… ve gerçekten
ihtiyaç duyulanı bulmak! • uygulama ve
dağıtım – bunu yapmak ve hayata geçirmek
… ama hepsini nasıl yapabilirim! !
• sınırlı süre tasarım ödünleşimi
• kullanılabilirlik?
neyin düzeltileceğine
– sorunları
kararbulmak
vermekvemi
düzeltmek?
istiyorsunuz?–
• mükemmel bir sistem kötü tasarlanmış – çok

iyi tasarımda çok fazla çaba sarfediliyor
kullanıcı odağı
kullanıcını tanı
kişilik
kültürel araştırmaları
kullanıcını tanı
• Onlar kim? •
muhtemelen senin gibi
değilim! • onlarla konuş
• onları izle
• hayal gücünü kullan
kişi
• 'örnek' bir kullanıcının açıklaması – mutlaka

gerçek bir kişi olması gerekmez
• vekil kullanıcı olarak kullanın
– Betty ne düşünürdü •
ayrıntılar önemlidir
– onu 'gerçek' kılıyor
örnek kişilik
Betty 37 yaşında, beş yıldır Depo Müdürü olarak görev yapıyor ve on iki yıldır
Simpkins Brothers Engineering'de çalışıyor. Üniversiteye gitmedi ama akşamları
işletme diploması almak için çalıştı. 15 ve 7 yaşlarında iki çocuğu var ve geç
saatlere kadar çalışmayı sevmiyor. Birkaç yıl önce şirket içi bilgisayar kursuna giriş
yapmıştı ama terfi edince yarıda kesildi ve artık zaman ayırmaya gücü yetmedi.
Görüşü mükemmel ancak 3 yıl önce yaşanan bir iş kazasının ardından sağ el
hareketi biraz kısıtlı. İşinde heyecan duyuyor ve sorumluluğu devretmekten ve
çalışanlarının önerilerini almaktan mutluluk duyuyor.
Ancak, başka bir yeni bilgisayar sisteminin (YSK'da bulunduğu dönemde üçüncüsü)
devreye girmesiyle kendini tehdit altında hissetmektedir.
kültürel araştırmalar
• doğrudan gözlem
– bazen zor
• evde
• psikiyatri hastaları, …
• araştırma paketleri
– anında yanıt verecek öğeler •
örneğin duvarda dinlemek için cam, kamera, kartpostal
– İnsanlara kendi ortamlarında açmaları için verilen, kendileri için
anlamlı olanı kaydederler
• eskiden …
– Röportajları bilgilendirmek, fikirleri harekete geçirmek, tasarımcıları kültürlemek
senaryolar
tasarım kullanımı ve yeniden
kullanıma ilişkin hikayeler

senaryolar
• tasarım hikayeleri –
başkalarıyla iletişim kurun
– diğer modelleri doğrulayın
– dinamikleri anlayın
• doğrusallık –
zaman doğrusaldır – yaşamlarımız doğrusaldır
– ancak alternatifleri gösterme

senaryolar…
• kullanıcılar ne yapmak isteyecek?
• adım adım izlenecek yol

– ne görebiliyorlar (çizimler, ekran görüntüleri) – ne
yapıyorlar (klavye, fare vb.) – ne düşünüyorlar?
• tasarım boyunca kullanma ve yeniden kullanma

senaryo – film oynatıcı

Brian yeni filmi “Önemli Anlar”ı izlemek istiyor ve Alison'ı davet etmek istiyor ama
onun “gösterişli” filmlerden hoşlanmadığını biliyor. Beğenip beğenmeyeceğini
görmek için ona bir göz atmaya karar verir ve böylece film paylaşım ağlarından
birine bağlanır. İş makinesini daha yüksek bant genişliği bağlantısına sahip
olduğu için kullanıyor ancak kendini biraz suçlu hissediyor. Filmin yasa dışı bir
kopyasını alacağını biliyor ama filmi izlemek için sinemaya gitmeyi planladığı için
bunun sorun olmadığına karar veriyor. Makinesine indirdikten sonra yeni
kişisel film oynatıcısını çıkarır. 'Menü' tuşuna basıyor ve küçük LCD ekranda ok
tuşlarını kullanarak 'bluetooth bağlantısı'na gidip seçme tuşuna basıyor.
Artık bilgisayarındaki film indirme programında uyumlu bir cihazı tanıdığını
gösteren bir simge var ve filmin simgesini oynatıcının simgesinin üzerine
sürükleiyor. Oynatıcının LCD ekranında "şimdi indiriliyor" yazısı, tamamlandı
göstergesi ve küçük dönen simge yer alıyor. … … …
ayrıca oyun oyna …
• cihazın maketini yapmak
• bunu yapıyormuş gibi davranın

• internete bağlı İsviçre çakısı …
ama nerede o başparmak?
kürdanı kalem olarak kullan

…derinlikleri keşfedin
• etkileşimi keşfedin
– ne zaman olur?
• bilişi keşfedin –
kullanıcılar ne düşünüyor
• mimariyi keşfedin
– içeride neler oluyor
senaryoları kullanın ..
• başkalarıyla iletişim kurmak

– tasarımcılar, müşteriler, kullanıcılar
• diğer modelleri doğrulamak

– diğer modellere karşı 'oynayın'
• ifade dinamikleri – ekran

görüntüleri – görünüm – senaryo
– davranış
doğrusallık
Senaryolar – sistem boyunca tek doğrusal yol
Artıları:
– yaşam ve zaman
doğrusaldır – anlaşılması kolaydır (hikayeler ve anlatım
doğaldır) – somut (hata olasılığı daha azdır)
Eksileri:
– seçenek yok, şube yok, özel koşullar yok –
istenmeyenleri gözden kaçırıyorsunuz
• Yani:
– birkaç senaryo kullanın –
birkaç yöntem kullanın
sistemler
bilgi ve yardım yönetmek mesajlar

başlangıç
navigasyon tasarımı
Kullanıcı Ekle kullanıcıyı kaldır
yerel yapı – tek ekran

küresel yapı – tüm site
ana kaldırmak
onaylamak
ekran kullanıcı
Kullanıcı Ekle
seviyeler
• widget seçimi
– menüler, düğmeler vb.
• ekran tasarımı
• uygulamada gezinme tasarımı
• çevre
– diğer uygulamalar, O/S
ağ …
• widget seçimi • öğeler ve etiketler

– <a href=“...”>
• ekran tasarımı • • sayfa tasarımı

navigasyon tasarımı • • site yapısı
çevre • web, tarayıcı, harici
bağlantılar
fiziksel cihazlar
• widget seçimi • kontroller

– düğmeler, düğmeler, kadranlar
• ekran tasarımı • • fiziksel düzen •

navigasyon tasarımı • cihazın modları
çevre • gerçek dünya
yapı hakkında düşün
• bir ekran içinde – daha

sonra ...
• yerel –
bu ekrandan dışarıya bakış •
küresel –
sitenin yapısı, aralarındaki hareket
ekranlar
• daha geniş
kapsamlı – diğer uygulamalarla ilişki
yerel
bir ekrandan dışarıya bakıyorum

amaç arayışı
amaç
başlangıç
amaç arayışı
amaç
başlangıç
yalnızca yerel bilgiyle ilerlemek...

amaç arayışı
amaç
başlangıç
…ama hedefe ulaşabiliriz

amaç arayışı
amaç
başlangıç
… bu parçalardan kaçınmaya çalışın!

dört altın kural

• nerede olduğunuzu
bilmek • ne yapabileceğinizi
bilmek • nereye gittiğinizi – veya
ne olacağını bilmek
• nerede olduğunuzu – veya ne
yaptığınızı bilmek
neredesin – ekmek kırıntıları
web sitesi hiyerarşisindeki yolu gösterir
üst düzey kategori alt kategorisi

İnternet sitesi bu sayfa
daha yüksek
seviyelere canlı
bağlantılar
büyük düğme tuzağına dikkat edin
şeyler diğer şeyler
uzaydan gelen
daha fazla şey
şey
• nereye gidiyorlar? – ekstra metin

için bolca yer var!
modlar
• kazara kullanımı önlemek için kilitleyin

… – kilidi kaldırın - onaylamak için 'c' +
'evet' – sık sık uygulanan
eylem • eğer kilit
unutulursa – cepte 'evet'e
basılır – telefon
rehberine gider –
telefon
rehberinde…
'c' – 'evet' girişini sil – onayla… oops!
küresel
ekranlar arasında
uygulama içerisinde
hiyerarşik diyagramlar
sistem

hiyerarşik diyagramlar ctd.
• uygulamanın bölümleri
– ekranlar veya ekran grupları
• tipik olarak işlevsel ayrım

sistemler

hiyerarşilerde gezinme
• derin zordur!
• Miller'in kötüye kullanımı 7 ± 2

– kısa süreli hafıza, menü boyutu değil
• en uygun?
– her ekranda birçok öğe –
ancak ekran içinde yapılandırılmıştır
bkz. /e3/online/menu-breadth/
diyalog hakkında düşün
UI tasarımında ne anlama geliyor?
Bakan: Bu kadının adını alır mısınız ?

Adam: Yapıyorum
Bakan: Bu adamın adını alır mısınız ?

Kadın: Yapıyorum
Bakan: Artık sizi karı-koca ilan ediyorum

diyalog hakkında düşün
UI tasarımında ne anlama geliyor?

Bakan: Bu kadının adını alır mısınız ?
• evlilik hizmeti
• genel akış, genel – isimler için boşluklar
• insanlar arasındaki etkileşim modeli
• bilgisayar diyaloğu
• kullanıcılar ve sistem arasındaki etkileşim modeli • ancak
ayrıntılar her seferinde farklılık gösterir
ağ diyagramları
ana kaldırmak
onaylamak
ekran kullanıcı
Kullanıcı Ekle
• sistemdeki farklı yolları gösterin

ağ diyagramları ctd.
• neyin neye yol açtığı
• şubeler dahil edildiğinde

ne olur?
• hiyerarşiden daha çok görev odaklı
ana kaldırmak
onaylamak
ekran kullanıcı
Kullanıcı Ekle
daha da geniş
uygulamalar arasında
ve ötesinde ...
daha da geniş…
• stil sorunları: –
platform standartları, tutarlılık
• işlevsel sorunlar –
kes ve yapıştır
• gezinme sorunları –
gömülü uygulamalar –
diğer uygulamalara bağlantılar… web
On , alan
Finlay, Janet
Aşağıda, Gregory
Beale, Russell
ekran tasarımı ve düzeni
temel ilkeler
gruplama, yapı, düzen
hizalama
beyaz alanın kullanımı
ABCDEF HIJKLM
NOPQRSTUVWXYZ
temel prensipler
• sormak
– kullanıcı ne yapıyor?
• düşünmek
– hangi bilgiler, karşılaştırmalar, sıralama
• tasarım
– biçim işlevi takip eder
mevcut araçlar
• öğelerin
gruplandırılması • öğelerin sırası
• dekorasyon - yazı tipleri, kutular vb. •
öğelerin hizalanması •
öğeler arasındaki boşluklar
gruplandırma ve yapı
mantıksal olarak birlikte fiziksel olarak birlikte
Fatura Detayları: Teslimat Detayları:

İsim İsim
Adres: … Adres: …
Kredi Kartı Numarası Teslimat süresi
Sipariş detayları:
öğe miktar maliyeti/ürün maliyeti
boyut 10 vidalar (kutular) 7 3,71 25,97
…… ………
grupların ve öğelerin sırası
• düşünmek! - doğal düzen nedir
• ekran sırasına uygun olmalıdır! – kutuları,

alanı vb. kullanın –
sekmeleri doğru ayarlayın!
• talimatlar – pasta
tarifi sendromuna dikkat edin! … süt
ve unu karıştırın, çırptıktan
sonra meyveleri ekleyin
dekorasyon
• mantıksal öğeleri gruplamak için kutuları

kullanın • vurgu ve başlıklar için yazı tiplerini
kullanın • ancak çok fazla değil!!
ABCDEF HIJKLM
NOPQRSTUVWXYZ
hizalama - metin
• soldan sağa okursunuz (İngilizce ve

Avrupalı)
sol tarafı hizalayın

sıkıcı ama
Willy Wonka ve Çikolata Fabrikası
Winston Churchill - Bir Biyografi
okunabilir!
Oz Büyücüsü
Zeyna - Savaşçı Prenses
Willy Wonka ve Çikolata Fabrikası

Winston Churchill - Bir Biyografi
Oz Büyücüsü
özel efektler için iyi ancak Zeyna - Savaşçı Prenses
taranması zor
hizalama - adlar
• Genellikle soyadları tarar
kolaylaştırın!
Alan Dix
Janet Finlay On , alan
Gregory Abowd
Finlay, Janet
Russell Beale
Aşağıda, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
hizalama - sayılar
532,56
amacı düşün! 179,3
256,317
hangisi en büyük?
15
73,948
1035 3,142 497,6256
hizalama - sayılar
görsel
627.865
olarak: uzun sayı = büyük sayı 1.005763
382.583
ondalık noktaları hizalayın 2502.56
veya tam sayıları sağa hizalayın 432.935
2.0175
652,87
56,34
birden çok sütun
• boşlukları zorlayarak tarama:

(geniş veri tabanı nedeniyle genellikle kaçınılması zordur)
alanlar)
sherbert 75
120
şekerleme 35
çikolata meyve 27
sakızları hindistan cevizi rüyalar 85
birden çok sütun - 2
• liderleri kullanın
sherbert 75
120
şekerleme 35
çikolata meyve 27
• veya grileşiyor (dikey de)
sherbert 75
120
şekerleme 35
çikolata meyve 27
• veya hatta (dikkatle!) 'kötü' hizalama
şerbet 75
şekerleme
120 çikolata 35
meyveli sakızlar
27 hindistancevizi rüyaları 85
beyaz boşluk - sayaç
NE GÖRÜYORSUN
beyaz boşluk - sayaç
NE GÖRÜYORSUN
ARASINDAKİ BOŞLUKLAR
ayıracak alan
yapı alanı
vurgulanacak alan
fiziksel kontroller
• öğelerin gruplandırılması –
buz çözme
çözme ayarları
ayarları – buz
yiyecek türü
– pişirme zamanı
pişirme zamanı
fiziksel kontroller
• öğelerin gruplandırılması
• öğelerin sırası
1) türü
ısıtma ısıtma türü 1)
2) sıcaklık
1
2) sıcaklık
pişirme süresi3)
3) pişirme süresi
4) başlatma 4)
başlatma 2
4
fiziksel kontroller
• dekorasyon
–işlevler
farklı renkler farklırenkler
için farklı
farklı işlevler
– ilgili düğmelerin
etrafındaki ilgili satırların
etrafındaki
çizgiler (sıcaklık artırma/azaltma )
fiziksel kontroller
• dekorasyon
• hizalama
– düğmelerde ortalanmış metin
düğmelerde ortalanmış
metin ? taramak
kolay mı? ? taramak kolay mı?
fiziksel kontroller
• dekorasyon
• hizalama • beyaz
boşluk – gruplamaya
yardımcı olacak boşluklar
kullanıcı eylemi ve kontrolü
ne yapacağını bilerek
bilgi girmek
bilgi girme
İsim: Alan Dix
Adres: Lancaster
• formlar, diyalog kutuları
– sunum + veri girişi – benzer düzen sorunları –
İsim: Alan Dix
hizalama – NB farklı etiket uzunlukları
Adres: Lancaster
• mantıksal düzen
– görev analizini kullanın
İsim:
Adres:
?
Alan Dix
Lancaster
(bölüm 15) –
gruplandırmalar – bilgi girmenin doğal sırası
• üst-alt, sol-sağ (kültüre bağlı olarak) • klavye girişi için sekme
sırasını ayarlama
Not: Widget seçimi için ekstra slaytlara bakın

ne yapacağını bilmek
• ne aktif ne pasif – nereye tıklarsınız

– nereye yazarsınız
• tutarlı stil yardımcı
olur
– örneğin altı çizili web bağlantıları
• etiketler ve simgeler
– ortak eylemlere ilişkin standartlar
– dil – kalın = mevcut durum veya eylem

olanaklar
kupa sapı
• psikolojik terim • fiziksel
kavramayı
nesneler için – şekil ve boyut 'karşılayabilir'
eylemleri akla getirir • kaldırma,
döndürme, fırlatma
– aynı zamanda kültürel – düğmeler basılmaya
'karşılanır' • ekran nesneleri
için – düğme benzeri nesne fare tıklamasına
'karşılar' – fiziksel benzeri nesneler kullanım önerir
• bilgisayar kullanım kültürü – simgeler
tıklamayı 'karşılayabilir' –
hatta çift tıklamayı bile karşılayabilir… gerçek düğmeler gibi değil!
uygun görünüm
bilgi estetiği ve kullanışlı renk

ve 3D sunumu
yerelleştirme ve uluslararasılaştırma
bilgi sunmak
• amaç önemlidir isim boyutu isim
boyutu
– sıralama düzeni (hangi sütun, sayısal alfabetik) – metin 17

12
Bölüm10
Bölüm1
ve diyagram – dağılım Bölüm10
Bölüm5 12
16
Bölüm11
Bölüm1 51
17
grafiği ve histogram 22
262
Bölüm12
Bölüm14
Bölüm13
Bölüm20 27
83
• ödev sunum ilkelerini kullanın! Bölüm8

Bölüm14
……
22
32
…
• ancak etkileşim ekleyin

– tasarım seçeneklerini yumuşatır
• örneğin sütunları yeniden
sıralama • 'dans eden histogramlar' (bölüm 21)
estetik ve kullanışlılık
• estetik açıdan hoş tasarımlar

– kullanıcı memnuniyetini artırın ve üretkenliği artırın
• güzellik ve kullanışlılık çatışabilir –
görsel stiller karışabilir ayırt edilmesi kolay
– temiz tasarım – az farklılık kafa karıştırıcı –
metnin arkasındaki arka
planlar … bakması güzel ama
okuması zor • ama birlikte çalışabilir
– örneğin tezgahın tasarımı –
tüketici ürünlerinde – temel farklılaştırıcı (örneğin iMac)
renkli ve 3 boyutlu
• her ikisi de sıklıkla çok kötü

kullanılıyor! • renk
– eski monitörlerin paleti sınırlı –
'orada' olduğu için renk fazla kullanılıyor
– Renk körlerine dikkat!
– diğer bilgileri güçlendirmek için idareli kullanın • 3
boyutlu efektler
– fiziksel bilgiler ve bazı grafikler için iyidir – ancak aşırı
kullanılırsa… örneğin
perspektifteki metin!! 3 boyutlu pasta grafikleri
rengin kötü kullanımı _
• aşırı kullanım - çok iyi bir sebep olmaksızın (örn. çocukların kullanımı için)
sitesi) • renk körlüğü
• kontrastın kötü kullanımı •

setinizi ayarlayın! –
monitörünüzü yalnızca grilere ayarlayın –
yine de ekranınızı okuyabiliyor musunuz?
ülkeler ve kültürler arasında

• yerelleştirme ve uluslararasılaştırma
– belirli kültürler/diller için değişen arayüzler • küreselleşme –
her yerde işe
yarayan semboller vb. seçmeye çalışın
• sadece dili mi değiştireceksiniz?

– birebir metin yerine 'kaynak' veritabanını kullanın…
ancak boyutları, sol-sağ sıralamasını vs.
değiştirir. • daha
derin konular – kültürel varsayımlar ve
değerler – sembollerin anlamları
örneğin işaretleyin ve çarpı … bazı kültürlerde +ve ve -ve
… ama… diğerlerinde de aynı anlama gelir (bunu işaretleyin)
prototip oluşturma
yineleme ve prototip oluşturma
iyiye gidiyor … …
ve iyi başlıyor
prototip oluşturma
• ilk seferde asla doğru sonuca varamazsınız

• eğer ilk başta başaramazsanız…
TAMAM?
tasarım prototip değerlendirmek Tamamlandı!
yeniden tasarlamak
prototiplemenin tuzakları
• azar azar ilerliyoruz... ama nereye • Malverns'e mi

yoksa Matterhorn'a mı?
1. iyi bir başlangıç noktasına ihtiyacınız

var 2. neyin yanlış olduğunu anlamanız gerekiyor

5.ders - 1

Uploaded by

Copyright:

Available Formats

You might also like

5.ders - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

5.ders - 1

Uploaded by

Copyright:

Available Formats

Machine Translated by Google

etkileşim tasarımının temelleri

yalnızca arayüzler değil tasarım etkileşimleri

sadece artefaktlar değil müdahaleler tasarlamak

Kısıtlamalar dahilinde hedeflere ulaşmak

• hedefler - amaç – kimin

tasarımın altın kuralı

İnsan-Bilgisayar Etkileşimi için

Hata yapmak insandır

– ne yapmalı ve nasıl karar vermeli

… ama hepsini nasıl yapabilirim! !

• sınırlı süre tasarım ödünleşimi

• mükemmel bir sistem kötü tasarlanmış – çok

• 'örnek' bir kullanıcının açıklaması – mutlaka

tasarım kullanımı ve yeniden

kullanıma ilişkin hikayeler

– diğer modelleri doğrulayın

– ancak alternatifleri gösterme

• kullanıcılar ne yapmak isteyecek?

• adım adım izlenecek yol

• tasarım boyunca kullanma ve yeniden kullanma

senaryo – film oynatıcı

ayrıca oyun oyna …

• cihazın maketini yapmak

• bunu yapıyormuş gibi davranın

ama nerede o başparmak?

kürdanı kalem olarak kullan

• başkalarıyla iletişim kurmak

• diğer modelleri doğrulamak

• ifade dinamikleri – ekran

Senaryolar – sistem boyunca tek doğrusal yol

bilgi ve yardım yönetmek mesajlar

yerel yapı – tek ekran

• widget seçimi • öğeler ve etiketler

• ekran tasarımı • • sayfa tasarımı

• widget seçimi • kontroller

• ekran tasarımı • • fiziksel düzen •

yapı hakkında düşün

• bir ekran içinde – daha

bir ekrandan dışarıya bakıyorum

yalnızca yerel bilgiyle ilerlemek...

…ama hedefe ulaşabiliriz

… bu parçalardan kaçınmaya çalışın!

dört altın kural

neredesin – ekmek kırıntıları

web sitesi hiyerarşisindeki yolu gösterir

üst düzey kategori alt kategorisi

büyük düğme tuzağına dikkat edin

şeyler diğer şeyler

• nereye gidiyorlar? – ekstra metin

• kazara kullanımı önlemek için kilitleyin

bilgi ve yardım yönetmek mesajlar

Kullanıcı Ekle kullanıcıyı kaldır

hiyerarşik diyagramlar ctd.

• tipik olarak işlevsel ayrım

bilgi ve yardım yönetmek mesajlar

Kullanıcı Ekle kullanıcıyı kaldır

• Miller'in kötüye kullanımı 7 ± 2