Machine Translated by Google

Bölüm 3
etkileşim
Machine Translated by Google

Etkileşim

• etkileşim modelleri
– kullanıcı ve sistem arasındaki çeviriler •
ergonomi –
etkileşimin fiziksel özellikleri • etkileşim stilleri
– kullanıcı/sistem
diyaloğunun doğası • bağlam

– sosyal, organizasyonel, motivasyonel

Machine Translated by Google

Etkileşim nedir?

iletişim

kullanıcı sistem

ama hepsi bu mu?

– 4. bölümdeki “dil ve eylem” konusuna bakın…

Machine Translated by Google

etkileşim modelleri

etkileşim şartları
Norman modeli
etkileşim çerçevesi
Machine Translated by Google

Bazı etkileşim şartları

etki alanı – incelenmekte olan çalışma alanı, örneğin grafik

tasarım – neyi

amaç başarmak istiyorsunuz?

örneğin düz kırmızı bir üçgen oluşturun

görev – bunu nasıl yapacağınız – sonuçta

işlemler veya eylemler açısından; örneğin… doldurma
aracını seçin, üçgenin üzerine tıklayın

Not …
– geleneksel etkileşim… – terimlerin

kullanımı özellikle görev/hedef açısından çok farklılık gösterir !!!

Machine Translated by Google

Donald Norman'ın modeli

• Yedi aşama –
kullanıcı hedefi belirler
– niyeti formüle eder
– arayüzdeki eylemleri belirler
– eylemi gerçekleştirir
– sistem durumunu algılar
– sistem durumunu yorumlar
– sistem durumunu hedefe göre değerlendirir

• Norman'ın modeli kullanıcının görüşüne odaklanır

arayüzün
Machine Translated by Google

yürütme/değerlendirme döngüsü
amaç

uygulamak değerlendirme

sistem

• kullanıcı hedefi belirler •

niyeti formüle eder •
arayüzdeki eylemleri belirler •
eylemi gerçekleştirir
• sistem durumunu algılar
• sistem durumunu yorumlar
• sistem durumunu hedefe göre değerlendirir
Machine Translated by Google

yürütme/değerlendirme döngüsü
amaç

uygulamak değerlendirme

sistem

• kullanıcı hedefi belirler •

niyeti formüle eder •
arayüzdeki eylemleri belirler •
eylemi gerçekleştirir
• sistem durumunu algılar
• sistem durumunu yorumlar
• sistem durumunu hedefe göre değerlendirir
Machine Translated by Google

yürütme/değerlendirme döngüsü
amaç

uygulamak değerlendirme

sistem

• kullanıcı hedefi belirler •

niyeti formüle eder •
arayüzdeki eylemleri belirler •
eylemi gerçekleştirir
• sistem durumunu algılar
• sistem durumunu yorumlar
• sistem durumunu hedefe göre değerlendirir
Machine Translated by Google

yürütme/değerlendirme döngüsü
amaç

uygulamak değerlendirme

sistem

• kullanıcı hedefi belirler •

niyeti formüle eder •
arayüzdeki eylemleri belirler •
eylemi gerçekleştirir
• sistem durumunu algılar
• sistem durumunu yorumlar
• sistem durumunu hedefe göre değerlendirir
Machine Translated by Google

Norman'ın modelini kullanma

Bazı sistemlerin kullanımı diğerlerinden daha zordur

İcra Körfezi
kullanıcının eylem formülasyonu

sistem tarafından izin verilen eylemler

Değerlendirme Körfezi
kullanıcının değişen sistem durumuna ilişkin
beklentisi bu durumun gerçek sunumu
Machine Translated by Google

İnsan hatası - kaymalar ve hatalar

kayma sistemi ve hedefi anlayın

eylemin doğru formülasyonu
yanlış eylem

hatanın
doğru hedefi bile olmayabilir!

Bir şeyleri
düzeltmek? kayma – daha iyi
arayüz tasarımı hatası – sistemin daha iyi anlaşılması
Machine Translated by Google

Abowd ve Beale çerçevesi

Norman'ın uzantısı…
etkileşim çerçeveleri 4 bölümden oluşuyor
– kullanıcı Çıkış _
– giriş – S sen

sistem – çekirdek görev

çıkış
ben giriyorum

her birinin kendine özgü bir dili vardır

etkileşim diller arası çeviri

etkileşim sorunları = çeviri sorunları

Machine Translated by Google

Abowd & Beale'in modelini kullanma

Kullanıcı niyetleri
arayüzdeki eylemlere dönüştürülür
sistem durumundaki değişikliklere dönüştürülür çıktı
ekranına yansıtılır kullanıcı
tarafından yorumlanır

Etkileşimi anlamak için genel çerçeve - elektronik bilgisayar sistemleriyle

sınırlı değildir - etkileşimde yer alan tüm ana bileşenleri
tanımlar - sistemlerin karşılaştırmalı değerlendirmesine olanak tanır -
bir soyutlama
Machine Translated by Google

ergonomi

arayüzlerin fiziksel yönleri

endüstriyel arayüzler
Machine Translated by Google

Ergonomi
• Etkileşimin fiziksel özelliklerinin incelenmesi

• İnsan faktörleri olarak da bilinir – ancak bu aynı zamanda HCI'nın

büyük bir kısmını ifade etmek için de kullanılabilir!

• Ergonomi, standartları belirlemede iyidir ve

Sistemlerin belirli yönlerini tasarlama şeklimizi
kısıtlamaya yönelik yönergeler
Machine Translated by Google

Ergonomi - örnekler
• kontrollerin ve ekranların düzenlenmesi
örneğin işleve veya kullanım sıklığına göre veya sıralı
olarak gruplandırılmış kontroller
• çevreleyen ortam
örneğin her boyuttaki kullanıcıya uyum sağlayacak şekilde uyarlanabilen
oturma düzenlemeleri

• sağlık sorunları
örneğin fiziksel konum, çevresel koşullar (sıcaklık, nem),
aydınlatma, gürültü,
• renk kullanımı
örneğin uyarı için kırmızı, tamam için yeşil kullanımı,
renk körlüğü farkındalığı vb.
Machine Translated by Google

Endüstriyel arayüzler

Ofis arayüzü mü, endüstriyel arayüz mü?

Bağlam önemlidir!

ofis endüstriyel
veri türü metinsel değişim hızı sayısal

yavaş temiz ortam hızlı

kirli

…yağla ıslanmış fare!

Machine Translated by Google

Cam arayüzler mi?

• endüstriyel arayüz:
– geleneksel… kadranlar ve düğmeler

– şimdi … ekranlar ve tuş

takımları • cam
arayüz + daha ucuz, daha esnek, Gemi B Sıcaklığı
çoklu temsiller, kesin değerler
0 100 200
– fiziksel olarak
konumlandırılmamış,
bağlam kaybı, 113
karmaşık arayüzler •
her ikisine de ihtiyaç duyabilir aynı bilginin birden fazla
gösterimi
Machine Translated by Google

Dolaylı manipülasyon

• ofis – doğrudan manipülasyon

– kullanıcı yapay
dünyayla etkileşime girer
sistem

• endüstriyel – dolaylı manipülasyon

– kullanıcı etkileşimi
arayüz sorunları
aracılığıyla gerçek
arayüz bitki
dünyayla •

- geri bildirim acil

geri bildirim
– gecikmeler
aletleri
Machine Translated by Google

etkileşim stilleri

diyalog… bilgisayar ve kullanıcı

farklı etkileşim tarzları

Machine Translated by Google

Ortak etkileşim stilleri

• komut satırı arayüzü
• menüler

• doğal dil • soru/cevap ve

sorgu diyaloğu • form doldurma ve elektronik tablolar
• WIMP • işaretle ve tıkla • üç boyutlu
arayüzler
Machine Translated by Google

Komut satırı arayüzü

• Talimatları bilgisayara aktarmanın yolu

direkt olarak
– fonksiyon tuşları, tek karakterler, kısa kısaltmalar,
kelimelerin tamamı veya bir kombinasyonu

• tekrarlanan görevler için uygundur

• uzman kullanıcılar için acemilere göre daha iyi
• sistem işlevselliğine doğrudan erişim sunar
• komut adları/kısaltmaları anlamlı olmalıdır!

Tipik örnek: Unix sistemi

Machine Translated by Google

Menüler

• Ekranda görüntülenen seçenekler kümesi • Görünür

seçenekler – daha az
hatırlama – kullanımı daha
kolay – adların anlamlı olması için tanımaya güvenin •
Seçim şuna göre: –
sayılar, harfler, ok tuşları, fare – kombinasyon
(örn. fare artı hızlandırıcılar)
• Çoğunlukla seçenekler hiyerarşik olarak
gruplandırılmıştır – mantıklı
gruplandırma gereklidir • Tam WIMP sisteminin kısıtlı biçimi
Machine Translated by Google

Doğal lisan
• Kullanıcıya aşina

• konuşma tanıma veya yazılı doğal dil • Sorunlar

– belirsiz
– belirsiz –
başarılı olmak zor!
• Çözümler – bir
alt kümeyi anlamaya çalışın –
anahtar kelimeleri seçin
Machine Translated by Google

Sorgu arayüzleri
• Soru/cevap arayüzleri – bir dizi soru
yoluyla etkileşim yoluyla kullanıcı tarafından yönlendirilir
– acemi kullanıcılar için uygundur ancak işlevleri
sınırlıdır – sıklıkla bilgi sistemlerinde kullanılır

• Sorgu dilleri (örn. SQL)

– Veritabanından bilgi almak için kullanılır

– veritabanı yapısının ve dil sözdiziminin anlaşılmasını

gerektirir, dolayısıyla biraz uzmanlık gerektirir
Machine Translated by Google

Form doldurma

• Öncelikle veri girişi veya veri alımı için • Ekran

benzeri kağıt formu. • Veriler
ilgili yere konulur • Gerekir – iyi
tasarım –
bariz düzeltme
olanakları
Machine Translated by Google

E-tablolar
• ilk elektronik tablo VISICALC (görünür hesap
makinesi), ardından Lotus 1-2-3 MS Excel,
günümüzde en yaygın olanı • form
doldurmanın karmaşık çeşitleri. – hücre
ızgarası bir değer veya formül içerir –
formül diğer hücrelerin değerlerini içerebilir ;
örneğin bu sütundaki tüm hücrelerin topl
– kullanıcı veri tablosunu girebilir ve değiştirebilir
tutarlılığı korur
Machine Translated by Google

WIMP Arayüzü

pencereler

Simgeler

Menüler

İşaretçiler

… veya pencereler, simgeler, fareler ve açılır menüler!

• etkileşimli içeriklerin çoğunluğu için varsayılan stil

bilgisayar sistemleri, özellikle PC'ler ve masaüstü makineler
Machine Translated by Google

İşaretle ve tıkla arayüzleri

• kullanılan ..
– multimedya

- internet tarayıcıları

– köprü metni

• sadece bir şeye tıklayın! –

simgeler, metin bağlantıları veya haritadaki konum

• minimum düzeyde yazma

Machine Translated by Google

Üç boyutlu arayüzler

• sanal gerçeklik •
'sıradan' pencere sistemleri –
vurgulama – düz düğmeler…
görsel uygunluk
– gelişigüzel kullanım beni tıkla!
sadece kafa
karıştırıcı! • 3B …veya heykel
çalışma alanları – ekstra sanal
alan için kullanın – ışık ve kapatma
derinlik sağlar – mesafe efektleri
Machine Translated by Google

wimp arayüzünün unsurları

pencereler, simgeler, menüler, işaretçiler

+++
düğmeler, araç
çubukları, paletler, iletişim kutuları

ayrıca ek materyale bakın

Wimp elemanlarının seçimi hakkında
Machine Translated by Google

pencereler

• Ekranın sanki bağımsızmış gibi davranan alanları

– metin veya grafik içerebilir

– taşınabilir veya yeniden boyutlandırılabilir

– üst üste gelebilir ve birbirini gizleyebilir veya yan yana yerleştirilebilir

(döşenebilir)

• kaydırma çubukları

– kullanıcının pencerenin içeriğini yukarı, aşağı veya bir yandan

diğer yana taşımasına olanak tanır
• başlık çubukları
– pencerenin adını tanımlayın
Machine Translated by Google

Simgeler

• küçük resim veya resim •

arayüzdeki bazı nesneleri temsil eder
– genellikle bir pencere veya eylem

• pencereler kapatılabilir (simge haline getirilebilir)

– birçok erişilebilir pencerenin küçük temsili

• simgeler çok sayıda ve çeşitli olabilir -

son derece stilize
edilmiş - gerçekçi temsiller.
Machine Translated by Google

İşaretçiler

• önemli bileşen
– WIMP stili bir şeyleri işaretlemeye ve seçmeye dayanır
• fareyi, izleme dörtgenini, joystick'i, hareket topunu, imleç
tuşlarını veya klavye kısayollarını kullanır
• çok çeşitli grafiksel görüntüler
Machine Translated by Google

Menüler

• Ekranda sunulan işlem veya hizmetlerin seçimi • Gerekli

seçeneğin işaretçiyle seçilmesi

Dosya Düzenlemek Seçenekler Yazı tipi

Daktilo
Ekran
Zamanlar

sorun – ekranda çok fazla yer kaplıyor

çözüm – açılır pencere: gerektiğinde menü görünüyor
Machine Translated by Google

Menü Çeşitleri

• Ekranın üst kısmındaki Menü Çubuğu (normalde), menü

aşağı sürüklenir
– açılır menü - fareyi basılı tutun ve aşağı sürükleyin menü
– açılır menü - fare tıklaması menüyü gösterir –
aşağı açılan menüler - fare sadece çubuğun üzerinde hareket eder!

• Bulunduğunuz yerde bağlamsal menü görünür – açılır

menüler – seçili nesneye yönelik eylemler – pasta
menüleri – daire şeklinde düzenlenmiştir
• öğeyi seçmek daha kolay (daha büyük hedef alanı) •
daha hızlı (herhangi bir seçeneğe aynı mesafe) …
ancak yaygın olarak kullanılmıyor!
Machine Translated by Google

Menü ekstraları

• Basamaklı menüler
– hiyerarşik menü yapısı

– menü seçimi yeni menüyü açar – ve bu sonsuza

kadar devam eder

• Klavye hızlandırıcıları
– tuş kombinasyonları – menü öğesiyle aynı
etki – iki tür
• menü açıldığında etkindir – genellikle ilk harftir
• menü kapatıldığında etkindir – genellikle Ctrl + harf
genellikle farklı !!!
Machine Translated by Google

Menü tasarımı sorunları

• hangi türün kullanılacağı

• menülere nelerin dahil edilmesi gerektiği

• kullanılacak kelimeler (eylem veya açıklama)

• öğelerin nasıl gruplandırılacağı

• klavye hızlandırıcı seçenekleri

Machine Translated by Google

Düğmeler

• tekil ve izole bölgeler

bir eylemi başlatmak için seçilebilecek ekran

• Özel türler
– radyo düğmeleri
– birbirini dışlayan seçenekler dizisi
– onay kutuları
– münhasır olmayan seçenekler kümesi
Machine Translated by Google

Araç Çubukları

• uzun simgeler satırları…

… ama ne yapıyorlar?

• ortak işlemlere hızlı erişim

• çoğunlukla özelleştirilebilir:
– hangi araç çubuklarının görüleceğini seçin

– üzerinde hangi seçeneklerin bulunduğunu seçin

Machine Translated by Google

Paletler ve yırtılabilir menüler

• Sorun
menüsü istediğiniz zaman orada değil

• Çözüm
paletleri – küçük eylem pencereleri – menü
seçeneği aracılığıyla gösterilir/
gizlenir, örneğin çizim paketindeki mevcut
şekiller yırtılabilir ve pin-up
menüleri – palet haline gelmek için 'yırtılır' menüsü
Machine Translated by Google

Diyalog kutuları

• açılan bilgi pencereleri

Önemli bir olay hakkında bilgi verin veya bilgi
isteyin.

örneğin: bir dosyayı kaydederken kullanıcının

dosya adını ve konumunu belirlemesine olanak
tanıyan bir diyalog kutusu görüntülenir. Dosya
kaydedildikten sonra kutu kaybolur.
Machine Translated by Google

etkileşim

bakmaya odaklanmak
kolay peki ya hissetmeye?
Machine Translated by Google

Konuşma odaklı arayüzler

• hızla gelişiyor … …
ama hâlâ hatalı

• Sağlam bir diyalog nasıl

kurulabilir? … tabii ki etkileşim!

örneğin havayolu
rezervasyonu: güvenilir
“evet” ve “hayır” + sistemi , “New York'tan
Boston'a bir bilet mi istiyorsunuz?” anlayışını yans
Machine Translated by Google

Bak ve hisset
• WIMP sistemleri aynı unsurlara sahiptir:
pencereler, simgeler, menüler, işaretçiler, düğmeler vb.

• ancak farklı pencere sistemleri…

farklı davranır

örneğin MacOS ve Windows menüleri

görünüş + davranış = görünüş ve his

Machine Translated by Google

Girişim

• İnisiyatif kimde? eski soru-

cevap – bilgisayar WIMP arayüzü
– kullanıcı

• WIMP istisnaları…
arayüzün öncelikli kısımları

• kalıcı iletişim kutuları

– gel ve gitmeyeceksin! –
hatalara iyi gelir, gerekli adımlar –
ancak dikkatli kullanın
Machine Translated by Google

Hata ve onarım

Hatalardan her zaman kaçınılamaz…

… ama onları düzeltebiliriz

hataları tespit etmeyi kolaylaştırın

… o zaman kullanıcı bunları onarabilir

merhaba, bu Go Faster rezervasyon sistemidir, ne

istersiniz? (kullanıcı) New
York'tan Londra'ya uçmak istiyorum New York'tan Boston'a
bir bilet istiyorsunuz (kullanıcı) hayır kusura
bakmayın,
lütfen teker teker onaylayın New York'tan
uçmak istiyor musunuz (kullanıcı) evet

………
Machine Translated by Google

Bağlam

Sosyal ve örgütsel faktörlerden etkilenen etkileşim

bağlam

• diğer insanlar –
etkileme arzusu, rekabet, başarısızlık korkusu •
motivasyon –
korku, bağlılık, hırs, kişisel tatmin • yetersiz sistemler

– hayal kırıklığına ve
motivasyon eksikliğine neden olur
Machine Translated by Google

Deneyim, katılım ve eğlence

deneyim tasarlama
fiziksel katılım değer
yönetimi
Machine Translated by Google

Deneyim?
• ev, eğlence, alışveriş – insanların bir
sistemi kullanabilmesi yeterli değil – onu
kullanmayı istemeleri gerekiyor!

• deneyim psikolojisi – akış

(Csikszentimihalyi) – kaygı
ve can sıkıntısı arasındaki denge

• eğitim
– yakınsal gelişim bölgesi – sadece
yardımla yapabileceğiniz şeyler

• daha geniş...
– edebi analiz, film çalışmaları, drama
Machine Translated by Google

Tasarım deneyimi

• gerçek krakerler
– ucuz ve neşeli! – kötü
şaka, plastik oyuncak, kağıt şapka
– çek ve vur
Machine Translated by Google

Tasarım deneyimi

• sanal korsanlar
– ucuz ve neşeli – kötü
şaka, ağ oyuncağı, kesme maskesi –
tıkla ve vur
Machine Translated by Google

Tasarım deneyimi

• sanal korsanlar
– ucuz ve neşeli – kötü
şaka, ağ oyuncağı, kesme maskesi –
tıkla ve vur
Machine Translated by Google

krakerler nasıl çalışır

web formunu doldurun

gönderen
e-posta alıcısını al
Kime: wxv
Gönderen: ..

kapalı
kraker sayfası

açık
saatler alıcı
İleti
tıkladığında
ilerlemek
cracker açılıyor... çok yavaş

kraker
sayfasını aç
gönderen şaka

bağlantıları

maske oyun sitesi

Machine Translated by Google

Kraker deneyimi
gerçek kraker sanal kraker

Yüzey elemanları

tasarım ucuz ve neşeli plastik basit sayfa/grafikler

oyunu oyuncak ve şaka kağıdı web oyuncak ve şaka

giyinmek şapka kesilecek maske

Deneyimli etkiler
Paylaşıldı başkasına teklif edildi e-posta mesajıyla gönderildi
ortak deneyim bir araya getirildi gönderen, alıcı tarafından
açılana kadar içeriği göremez
heyecanlanmak kültürel çağrışımlar işe alım beklentisi
gizlilik içindekiler ilk sayfa - içerik yok

gerilim Krakeri yavaşça çekiyorum ... sayfa değişikliği

sürpriz bang (çalıştığı zaman) WAV dosyası (çalıştığı zaman)
Machine Translated by Google

Fiziksel tasarım

• birçok kısıtlama: –
ergonomik – minimum düğme
boyutu – fiziksel – yüksek voltaj
anahtarları büyük – yasal ve güvenli –
yüksek ocak kontrolleri – bağlam ve çevre –
temizlemesi kolay – estetik –
iyi görünmeli – ekonomik – … ve maliyeti çok yüksek değ
Machine Translated by Google

Tasarım ödünleşimleri

kısıtlamalar çelişkili… ödünleşimlere ihtiyaç var

kategoriler içinde:
örneğin güvenlik – ocak kontrolleri ön
panel – yetişkinler için daha güvenli
arka panel – çocuklar için daha güvenli

kategoriler arasında,
örneğin ergonomi vs. fiziksel – MiniDisc uzaktan ergonomi –
kontrollerin fiziksel olarak daha büyük olması
gerekir – yer yok! çözüm
– çok işlevli kontroller ve azaltılmış işlevsellik
Machine Translated by Google

Akışkanlık

• Dış fiziksel yönler mantıksal etkiyi

yansıtıyor
mu? – maddi imkanlarla ilgili (Bölüm 5)

mantıksal durum fiziksel durumda mı ortaya çıkıyor? örneğin

açma/kapama düğmeleri

ters eylemler ters etkiler mi? örneğin ok düğmeleri,

döndürme kontrolleri
Machine Translated by Google

ters eylemler

• evet/hayır düğmeleri
– bir nevi

• 'oyun kolu'

• ayrıca sol taraftaki kontrol

Machine Translated by Google

geri yaylanma kontrolleri

• tek seferlik düğmeler •

kumanda kolu
• bazı kaydırıcılar

iyi – geniş seçim kötüyü ayarlıyor –

gizli durum
Machine Translated by Google

bir mini disk denetleyicisi

Hat hareketi için büküm

bir dizi geri yaylanma, bazı Hacim için çekme ve bükme
seçenekler aracılığıyla her – geri yaylanma
döngüyü kontrol eder – doğal ters geri/ileri – büküm için doğal ters
Machine Translated by Google

fiziksel düzen

kontroller:
mantıksal ilişki ~
mekansal gruplama
Machine Translated by Google

uyumlu etkileşim

açıkça görülen durum Döner düğmeler dahili durumu gösterir ve

mekanik düğmeler hem kullanıcı hem de makine tarafından
kontrol edilebilir
Machine Translated by Google

Değeri yönetmek

insanlar bir şeyler kullanıyor

YALNIZCA
algılanan değeri var
VE
değer maliyeti aşıyor

AMA DİKKAT

• istisnalar (örn. alışkanlık) •

değer mutlaka kişisel kazanç veya para DEĞİLDİR
Machine Translated by Google

Değeri tartmak
değer •

işimi yapmama yardımcı olur •

eğlence

• başkaları için iyi

maliyet
• indirme süresi
• para £, $, € •
öğrenme çabası
Machine Translated by Google

İndirimli gelecek

• ekonomide Net Bugünkü Değer:

– (1+oran) yıl kadar beklenecek indirim

• hayatta insanlar büyük oranda indirim yapar –

gelecekteki değer ve gelecekteki maliyet
– dolayısıyla öğrenmeye direnç –
düşük engellere ve
yüksek algılanan mevcut değere ihtiyaç var
Machine Translated by Google

örnek – HCI kitap araması

• kitaba sahip olan kişiler için değer

şeylere bakmanıza yardımcı olur
– bölüm ve sayfa numarası

• olmayanlar için değer …

bir tür çevrimiçi mini ansiklopedi
– bağlamın tam paragrafı

… ama aynı zamanda “beni satın al” diyor!!

…
Machine Translated by Google

Değer ve organizasyonel tasarım

• zorlama
• insanlara ne yapmaları
gerektiğini söyleyin! • değer
= işinizi koruyun •
kültürleme • kurumsal değerleri
açıklayın • destek oluşturun (örn.
paylaşım
seçenekleri) • ortaya çıkma
• süreci bireylerin değer vereceği şekilde tasarlama kurumsal değe
Machine Translated by Google

Genel ders…

Birinin bir şey yapmasını istiyorsanız…

• onların işini kolaylaştırın!

• değerlerini anlamak