WKT209U-GÖRSEL WEB TASARIMI
Ünite 7: Web Tasarımında Etkileşim
Giriş
Yaygın olarak Web olarak bilinen World Wide Web
(www) internet üzerinde yayınlanan birbirleriyle
bağlantılı hiper-metin dokümanlarından oluşan bir bilgi
sistemidir. Bir başka değişle birbiriyle bağlantılı, internet
üzerinde çalışan ve “www” ile başlayan adreslerdeki
sayfaların görüntülenmesini sağlayan servistir. İnternet ile
eşanlamlı olmayan ve internetin en önemli parçası olan
www teknolojik ağlara dayalı insan etkileşiminde tekno-
sosyal sistem olarak tanımlanabilir. Tekno-sosyal sistem
bilişi, iletişimi ve iş birliğini geliştiren sistemdir.
Başlarda özel ismi olmayan bu ağ, gelişmelere bağlı
olarak ilk dönemleri açısından Web 1.0 adını almış ve
yaygın olarak bu şekilde kullanılmaya başlanmıştır. Web
1.0, Tim Berners-Lee tarafından geliştirilen www
teknolojisinin ilk zamanlarında oluşturulan Web sitelerine
atıfta bulunmak için kullanılmaktadır. Bu sitelerdeki temel
amaç, sadece, kullanıcıya bilgiyi sunmaktı. Bir başka
ifadeyle, Web tasarımcısı siteyi hazırlar ve yayımlardı.
Kullanıcılar ise bu siteye erişip, bilgiyi sadece
okuyabilirlerdi. Kullanıcının sitedeki içeriğe katkıda
bulunma hakkı yoktu.
İlk defa O’Reilly Media tarafından 2004’te kullanılmaya
başlayan Web 2.0 ise dünya çapında ağın (www) yeni ve
gelişmiş bir versiyonu olarak daha kullanıcı merkezli bir
yapıya sahip ikinci nesil internet hizmetlerini ifade
etmektedir. Temel amacı kullanıcıların teknik sorunlarla
yüzleşmeden içerik geliştirmesini ve paylaşmasını
sağlamak olan Web 2.0 araçlarına “sosyal yazılımlar” ya
da “sosyal medya (ortamlar)” da denilmektedir. Web 2.0
uygulamalarında kullanıcıların rolü Web 1.0’da olduğu
gibi sadece okuyabilen pasif bir tüketici değil tam tersine,
içerik üzerinde söz hakkı bulunan, içeriğe katkıda
bulunan, geliştiren ve paylaşan aktif bir üreticidir.
Semantik Web olarak da adlandırılan Web 3.0 ise içerik
kontrolünün insan elinden çıkarak yazılımların kontrolüne
geçtiği dünyadır. Web 3.0, kullanıcı tarafından sağlanan
içeriğin arama motorları tarafından anlamlandırılması,
kullanıcının istediği bilgiye ve sağladığı ipuçlarına göre
bilginin yorumlanıp kullanıcının özel ihtiyaçlarına uygun
bir şekilde sunulmasıdır. Web 3.0’ın kişiselleştirme, yapay
zekâ ve hareketlilik olmak üzere üç özelliği vardır.
Web ’in gelişim sürecinde önemi artan kavramlardan birisi
de etkileşimdir. Temelde iletişim kelimesinden türediği
söylenebilen etkileşim kavramı birbirini karşılıklı olarak
etkileme durumunu nitelemektedir.
Web teknolojilerindeki gelişmelere bağlı olarak değişen
etkileşim bağlamı insan-bilgisayar etkileşimi kavramı ile
karşımıza çıkmaktadır. İnsan-bilgisayar etkileşimi,
bilgisayarın insan tarafından kullanılan ara yüzünün
sağladığı işlevsel olanaklar ve bu olanakları kullanma ve
kontrol etme noktasında kullanıcı ile bilgisayar
uygulaması arasındaki etkileşimi betimlemektedir.
Etkileşim Tasarımı
Etkileşim tasarımının bir disiplin olarak ortaya çıkışında
bilgi ve iletişim teknolojilerinin gelişimi, özellikle
internetin ortaya çıkışı, donanım boyutlarının küçülmesi,
kullanıcı sayısında ve profilinde değişimler, ürünlerde
değişimler ekili olmuştur.
Etkileşim Tasarımı, insan ve bilgisayar arasındaki iki
yönlü iletişimin tasarlanmasıdır.
Etkileşim tasarımı özellikle bireylerin çalışma, iletişim ve
etkileme yollarını genişletip geliştirerek kullanıcı
deneyimleri yaratmakla ilgilenmektedir.
Disiplinler arası bir çalışma alanı olan etkileşim tasarımı
süreci aşağıdaki dört temel etkinliği içermektedir
(Kriwaczek, 2009):
• Gereksinimlerin belirlenmesi ve istenilenlerin
saptanması
• Gereksinimleri karşılayacak alternatif
tasarımların geliştirilmesi
• Değerlendirme için tasarımların etkileşimli
sürümlerinin hazırlanması
• Süreç boyunca gerçekleştirilen tasarımı
değerlendirme
Etkileşim tasarımı sürecinde nelerin yapıldığının
değerlendirilmesi önemlidir; çünkü değerlendirme ürünün
kullanılabilirliğini sağlamaya odaklanmaktadır. Bu
nedenle kullanıcı merkezli tasarımı temel alır ve tasarım
sürecinde görüşmeler yapma, performans testleriyle
ölçme, performansları modelleme, veri toplama araçlarını
doldurtma gibi farklı yollarla kullanıcıları da sürece dâhil
eder.
Tasarımın bu dört temel etkinliğine ek olarak tasarım
sürecinin üç ana özelliği vardır. Bunlar;
• Kullanıcıların tasarım sürecine dâhil edilmesi,
• Kullanılabilirlik ve kullanıcı deneyim
hedeflerinin tanımlanması ve başlangıçta
üzerinde fikir birliğine varılması
• Yukarıda sıralanan dört etkinlik boyunca tekrarın
kaçınılmaz olduğudur.
Etkileşimli bir sistem tasarımıyla kullanıcıları desteklemek
için süreçte kullanıcıların ihtiyaçlarını anlamak
tasarımcının öncül görevidir. Bu bağlamda etkileşim
tasarımının kullanılabilirlik ve kullanıcı amaçları olmak
üzere iki hedefi vardır.
Kullanılabilirlik: Bir ürünün belirli kullanıcılar tarafından
belirli amaçlarla etkili, verimli ve belirli bir deneyim
çerçevesinde memnuniyetle kullanabilme derecesidir.
Teknoloji bağlamında kullanılabilirliğin temel amacı
kullanım kalitesini artırarak, kullanıcının teknoloji
kullanım deneyiminden en üst düzeyde fayda sağlamasını
olanaklı kılmaktır. Kullanılabilirliğin hedefleri; etkililik,
verimlilik, güvenlik, yararlık, öğrenilebilirlik ve
hatırlanabilirliktir.
1
 WKT209U-GÖRSEL WEB TASARIMI
Ünite 7: Web Tasarımında Etkileşim
Etkililik amaçlanan hedefe uygun olarak bir sistemin ne
kadar iyi çalıştığıdır. Verimlilik kullanıcıların görevlerini
yaparken sistemin onları ne kadar desteklediğidir.
Güvenlik kullanıcıları istenmeyen ve tehlikeli durumlardan
korumaktır. Yararlık bireyin gereksinimleri ve yapmak
istediklerine ilişkin sistemin doğru işlevselliği sağlayıp
sağlamadığıdır. Öğrenilebilirlik bir sistemin kullanımını
öğrenmenin ne kadar kolay olduğudur. Hatırlanabilirlik
ise bir kez öğrenildikten sonra sistemin kullanımının kolay
hatırlanmasıdır.
Kullanıcı Amaçları: Etkileşim tasarımı daha etkili ve
verimli tasarımlar için memnun edici, zevkli, eğlenceli,
yardımcı, güdüleyici, estetik, yaratıcılığı destekleyen,
ödüllendirici, duyusal anlamda memnun edici gibi
kullanıcı amaçlarına yer vermelidir.
Tasarım ve Kullanılabilirlik İlkeleri: Etkileşimli bir
tasarım oluşturabilmek için bazı tasarım ilkelerine dikkat
etmek gerekmektedir. Bu tasarım ilkeleri görünürlük, geri
bildirim, kısıtlar, tutarlılık ve sağlarlık ve
haritalama/eşlemedir.
Görünürlük için modelin işlevlerinin nasıl yapılacağı
konusunda görünür ipuçları gerekmektedir. Bu nedenle
etkileşimli tasarımın hatırla ve kullan değil; gör, algıla ve
tıkla prensibine uygun olarak hazırlanması gerekir. İyi bir
tasarım teoride hiç yardım gerektirmeyecek şekilde açık
ve fonksiyonel olmalı, uygulamada ise mümkün olan en az
yardımla kullanımı öğretilmeli, yanlış yapılmaması için
uyarı ve yardım mesajları içermelidir. Kısıtlar ilkesi
kullanım hatalarını önlemek ve kullanım için ezberlenmesi
gereken bilgileri en aza indirmek için fiziksel, semantik,
mantıksal ve kültürel alanlarda kullanılan bir özelliktir.
Norman (1999) kısıtları fiziksel, mantıksal ve kültürel
olmak üzere üç sınıfa ayırmaktadır. Fiziksel kısıtlar,
fiziksel objelerin hareketlerinin kısıtlanmasıdır. Örneğin,
bir diskin sürücüsüne yerleştirilmesi boyut ve şekil
biçiminden kısıtlanmıştır. Mantıksal kısıtlamalar dünyanın
nasıl işlediğine dair bireylerin anlayışlarına
dayanmaktadır. Eylemleri ve etkilerinin neler olduğunu
açıkça ortaya koymak ilerideki eylemlerin
gerektirdiklerini mantıksal olarak azaltmaktadır. Örneğin,
görevin gerektirmediği durumlarda menü seçeneklerinin
görünmemesi mantıksal bir kısıtlamadır. Kültürel
kısıtlamalar, uyarı için kırmızının kullanılması, tehlike
için belirli türde ses sinyallerinin kullanılması, mutluluk
için gülen yüz ifadesinin kullanılması gibi adet ve
geleneklere dayanmaktadır.
Öğrenmeyi ve kullanımı kolaylaştırmak için tasarımın her
parçası birbiriyle ve bütün tasarımlar da evrensel olarak
tutarlı olmalıdır. Tutarlılık benzer görevlere ulaşmak için
benzer ögelerin ve benzer işlemlerin kullanıldığı arayüz
tasarımını ifade eder. Tutarlılığa en uygun örnek rakam
tuşlarının kullanılmasıdır
Haritalama kontroller ve bunların etkileri arasındaki
ilişkiyi ifade eder. Haritalamaya en uygun örnek bilgisayar
klavyesi üzerinde bulunan ve imlecin yukarı aşağı
hareketini sağlayan yukarı ve aşağı oklardır. Sağlarlık
modelin, algılanan işlevselliği ile gerçek işlevlerinin
örtüşmesidir. Sağlarlık ilkesinde belirleyici olan, tasarımla
ne yapılabileceğinin sadece sezgisel olarak anlaşılabilmesi
ve mümkünse kullanıcıya bir geri bildirim verilmesidir.
Etkileşim Elementleri
Etkileşim elementleri akıcı bir Web tasarımı geliştirmenin
yanında kullanıcıların rahatlama, özgüven ve kullanımdan
zevk alma gibi pozitif tepkilerini ortaya çıkarırken
öğrenme motivasyonunu geliştirme, yaratıcı ve sosyal
olma gibi duyuşsal tepkilerinde ortaya çıkmasında önemli
rol oynamaktadır. Etkileşimi sağlamada kullanılan
elementlerle ilgili bilgiler aşağıda verilmektedir.
Simgeler: Akıcı bir görsel etkileşim sağlamak için
kullanılan en yaygın etkileşim elementleri arasında
simgeler bulunmaktadır. Simgeler kullanıcıya görsel
zenginlik sunmanın yanında bilgilendirici geri bildirim
sağlamaktadır.
Menüler: Menüler kullanıcı ve Web arayüzü arasında
etkileşimi sağlayan ve kullanıcıya site içerisinde gezinme
konusunda yardımcı olan en önemli bileşenler arasında yer
almaktadır. Farklı ekran boyutlarına sahip cihazlarda
menü tasarımlarında da farklılıklar bulunmaktadır.
Günümüzde duyarlı Web tasarımları sonucunda tek bir
tasarım ile farklı ekran boyutlarına uyum sağlayabilen
tasarımlar kullanılmaktadır. Bunun sonucunda tasarımların
kullanılabilirliği artmaktadır.
Butonlar: Butonlar kullanıcıların Web arayüzünde
gezinmelerini ve ulaşmak istedikleri içerikler ile bağlantı
kurmalarına yardımcı olan bileşenlerdir. Web
tasarımlarında ilk dikkat edilmesi gereken kullanıcıların
Web arayüzünde var olan butonların farkında olmalarını
sağlamaktır. Kullanıcılar özellikle Web sitelerinde bir
butona tıklarken sadece tıklanmaya uygun olduğu için
değil, aynı zamanda neden etkileşime geçmeleri
gerektiğini de önceden bilmek istemektedirler. Bu nedenle
buton tasarımlarında simgeler de kullanılmaktadır.
Simgesel buton tasarımlarının kullanılması kullanıcılara
tıklandığında ulaşabilecekleri içerik hakkında görsel fikir
vermektedir.
Formlar: Formlar kullanıcılardan bilgi almak için
kullanılan temel öğelerdendir. Özellikle bir siteye üye
olmak veya kullanıcı girişi yapmak için formlar
kullanılmaktadır. Kullanıcılar ile etkileşimde ve site
kullanımının artmasında formlar yardımcı olmaktadır.
Formlar genellikle aşamalı bir yapıya sahiptir. Kullanıcılar
genellikle fazlaca bilgi istenen uzun formları
doldurmaktan hoşlanmazlar. Bu nedenle formlar kısa
tutulmalıdır. Kullanım amaçlarına göre farklı tasarımlar
yer alsa da genel olarak formlarda tanıtıcı bir ifade, etiket,
metin alanları, radio butonlar, açılır menüler, kaydırma
listeleri, yorum alanları, onay kutusu ve eylem butonu gibi
elementler kullanılmaktadır.
2
 WKT209U-GÖRSEL WEB TASARIMI
Ünite 7: Web Tasarımında Etkileşim

Yönlendirmeler: Yönlendirmeler Web arayüzünün bir Jumbotron: Web sitesi içerisindeki anahtar içerikleri tüm
bütün olarak kullanıcıya nasıl sunulacağı ile ilgilidir. ekrana yayılarak gösteren dikkat çekmek için kullanılan
Garrett (2010), herhangi bir Web sitesinde yönlendirme büyük yazılardır. Jumbotron kullanımları özellikle haber
tasarımında üç hedefin eş zamanlı olarak başarılması sitelerinde manşet haberlerinin verilmesinde tercih
gerektiğini ifade etmektedir. Bunlardan ilki edilmektedir.
yönlendirmelerin kullanıcının site üzerinde bir içerikten
Uyarılar: Uyarılar, kullanıcı eylemleri için geri bildirim
farklı bir içeriğe ilerlemesini sağlamasıdır. İkincisi,
mesajları sunan bileşenlerdir. Uyarı bileşenleri genellikle
yönlendirme bileşenlerinin birbiriyle ilişkili ve tutarlı
kullanıcıların doldurması gereken formlarda karşımıza
olması gerekmektedir. Üçüncüsü ise yönlendirmeler
çıkmaktadır. Doldurulması zorunlu olan alanlar
kullanıcıların görüntülediği Web sayfası ve içerikler
doldurulmadığında kullanıcılar uyarı mesajı almaktadır.
arasında bir iletişim sağlamalıdır. Yönlendirme bileşenleri
arasında site düzeni, site haritası, menüler, butonlar, İlerleme Çubukları: İlerleme çubukları Web sitelerinde iş
linkler, hiyerarşik veri işaretleyicisi (breadcrumbs), akışını ilerlemesini gösteren ve kullanıcıya süreç hakkında
etiketler, rozetler, büyük yazılar (jumbotron), uyarılar, geri bildirim sağlayan bileşendir.
ilerleme çubukları gibi birçok bileşen yer almaktadır.
Animasyonlar: Animasyonlar bilgi aktarımı ve dikkat
Site Düzeni: Site düzeni, yönlendirme bileşenlerinin çekme konusunda güçlü bir potansiyele sahip olan
birbiriyle ilişkilerinin tutarlı bir şekilde yapılandırılması yapılardır. Bilgi aktarımında animasyonlar, sistemin
ve görüntülenecek olan içeriğin ilgili bileşenler ile kullanıcıya geri bildirim verme noktasında veya Web
mantıklı bir sıra içerisinde sunulmasıyla ilgilidir. sitesi içeriğinde yer alan bilgilerin aktarımı konusunda
Kullanıcıların Web sitesine ilk bakışta nasıl hissedeceği yararlıdır. Animasyonlar Web sitesi içerisinde farklı
sorusuna verilecek cevap site düzeninin etkili yapılarda kendine yer bulabilir. Kullanıcının bir buton
oluşturulmasına bağlıdır. Kullanılabilir bir site düzeni üzerine geldiğinde butonun büyümesi, herhangi bir link
oluşturmak için temel düzeyde üç ilkeye dikkat etmek üzerine geldiğinde renginin değişmesi, duyuru
gerekir. Bunlar: basitlik, tutarlılık ve odaklılıktır. bölümlerinde duyuru metinlerinin aşağıdan yukarıya
doğru kayarak geçmesi, animasyonların farklı kullanımına
Site Haritası: Site haritası, kullanıcıların ulaşmak
örnek olarak verilebilir.
istedikleri içeriğe erişiminde kolaylık sağlayan bir
listeleme düzenidir. Site haritası ile tüm sayfalara
ulaşılabilecek linkler listelenir.
Linkler: Yönlendirme bileşenleri arasında linkler önemli
bir yer tutmaktadır. Buna ek olarak kullanıcı ile site
arasındaki etkileşimi sağlayan unsurların başında
gelmektedir. Linklerle ilgili dikkat edilmesi gereken en
önemli noktalar arasında kullanıcı Web sitesinin hangi
sayfasında olursa olsun ana sayfaya dönüş linkini
kolaylıkla bulabilmelidir.
Hiyerarşik Veri İşaretleyici (Breadcrumbs): Hiyerarşik
veri işaretleyici, kullanıcıların ana sayfadan itibaren
gezdikleri sayfaların gösterilmesi yoluyla bulundukları
sayfanın konumunu gösteren bir bileşendir. Hiyerarşik
veri işaretleyici sayesinde kullanıcılar bulundukları
sayfaya hangi sayfalar aracılığıyla ulaştıklarını
görebilmekte ve bir önceki sayfaya dönme işlemlerini
gerçekleştirebilmektedirler.
Etiketler: Etiketler, kullanıcı veya Web sitesi içeriğindeki
herhangi bir durum bilgisinin anahtar kavramlar
aracılığıyla tanımlanması ve aramalar yoluyla tekrar
bulunabilirliğinin sağlanması için kullanılmaktadır.
Özellikle etkileşimin üst düzey olduğu sosyal ağlarda
etiketler önemli yer tutmaktadır.
Rozetler: Bir linkte kaç sayıda bildirim olduğunu gösteren
bileşenlerdir. Özellikle sosyal ağ sitelerinde sıkça
karşımıza çıkan rozetler bildirimler, mesajlar gibi
alanlarda kaç sayıda bildirim veya mesaj olduğunu
rakamsal olarak gösteren yapılardır.