Görsel Web Tasarımı Dersi 7. Ünite Özet

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 hede?erinin 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 hede?eri; etkililik, verimlilik, güvenlik, yararlık, öğrenilebilirlik ve hatırlanabilirliktir.

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.

Yönlendirmeler: Yönlendirmeler Web arayüzünün bir bütün olarak kullanıcıya nasıl sunulacağı ile ilgilidir. Garrett (2010), herhangi bir Web sitesinde yönlendirme tasarımında üç hedefin eş zamanlı olarak başarılması gerektiğini ifade etmektedir. Bunlardan ilki yönlendirmelerin kullanıcının site üzerinde bir içerikten farklı bir içeriğe ilerlemesini sağlamasıdır. İkincisi, yönlendirme bileşenlerinin birbiriyle ilişkili ve tutarlı olması gerekmektedir. Üçüncüsü ise yönlendirmeler kullanıcıların görüntülediği Web sayfası ve içerikler arasında bir iletişim sağlamalıdır. Yönlendirme bileşenleri arasında site düzeni, site haritası, menüler, butonlar, linkler, hiyerarşik veri işaretleyicisi (breadcrumbs), etiketler, rozetler, büyük yazılar (jumbotron), uyarılar, ilerleme çubukları gibi birçok bileşen yer almaktadır.

Site Düzeni: Site düzeni, yönlendirme bileşenlerinin birbiriyle ilişkilerinin tutarlı bir şekilde yapılandırılması ve görüntülenecek olan içeriğin ilgili bileşenler ile mantıklı bir sıra içerisinde sunulmasıyla ilgilidir. Kullanıcıların Web sitesine ilk bakışta nasıl hissedeceği sorusuna verilecek cevap site düzeninin etkili oluşturulmasına bağlıdır. Kullanılabilir bir site düzeni oluşturmak için temel düzeyde üç ilkeye dikkat etmek gerekir. Bunlar: basitlik, tutarlılık ve odaklılıktır.

Site Haritası: Site haritası, kullanıcıların ulaşmak 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.

Jumbotron: Web sitesi içerisindeki anahtar içerikleri tüm ekrana yayılarak gösteren dikkat çekmek için kullanılan büyük yazılardır. Jumbotron kullanımları özellikle haber sitelerinde manşet haberlerinin verilmesinde tercih edilmektedir.

Uyarılar: Uyarılar, kullanıcı eylemleri için geri bildirim mesajları sunan bileşenlerdir. Uyarı bileşenleri genellikle kullanıcıların doldurması gereken formlarda karşımıza çıkmaktadır. Doldurulması zorunlu olan alanlar doldurulmadığında kullanıcılar uyarı mesajı almaktadır.

İlerleme Çubukları: İlerleme çubukları Web sitelerinde iş akışını ilerlemesini gösteren ve kullanıcıya süreç hakkında geri bildirim sağlayan bileşendir.

Animasyonlar: Animasyonlar bilgi aktarımı ve dikkat çekme konusunda güçlü bir potansiyele sahip olan yapılardır. Bilgi aktarımında animasyonlar, sistemin kullanıcıya geri bildirim verme noktasında veya Web sitesi içeriğinde yer alan bilgilerin aktarımı konusunda yararlıdır. Animasyonlar Web sitesi içerisinde farklı yapılarda kendine yer bulabilir. Kullanıcının bir buton üzerine geldiğinde butonun büyümesi, herhangi bir link üzerine geldiğinde renginin değişmesi, duyuru bölümlerinde duyuru metinlerinin aşağıdan yukarıya doğru kayarak geçmesi, animasyonların farklı kullanımına örnek olarak verilebilir.