Etkileşim Tasarımı Temelleri

etkilesim tasarimi

Etkileşim Tasarımı; iyi hesaplanmış kullanıcı davranışlarıyla birlikte etkileşim yaratacak arayüzler yaratmak üzerine odaklanmaktadır.

Teknoloji ve kullanıcıların birbirleriyle nasıl bir iletişim içerisinde oldukları, etkileşim tasarımını temel konusudur. Bu anlayışla; kullanıcılarınızın sistemle nasıl etkileşime gireceğini öngörebilir, sorunları önceden çözebilir ve yeni yöntemler keşfedebilirsiniz.

Etkileşim Tasarımında En İyi Yöntemler:

İnteraktif elementlere sahip dijital bir sistem üretirken, aşağıdaki özellikleri ve soruları göz önünde bulundurmalısınız:

etkilesim tasarimi

ETKİLEŞİM TASARIMINDA ELE ALINACAK SORULAR

etkilesim

Kullanıcıların, arayüz ile nasıl etkileşime girdiklerini tanımlayın.

  • Kullanıcı arayüz ile doğrudan etkileşime girmek için mouse, parmak ya da kalemiyle ne yapabilir? Bu; butonlara basmak ya da arayüz içerisinde sürükleyip bırakmak gibi fonksiyonları da kapsamaktadır.
  • Kullanıcı ürünle etkileşime geçerken, ürünle doğrudan bağlantısı olmayan ne tür komutlar verebilir? Kullanıcının, içeriğin bir kısmını kopyalamak için Ctrl+C’ye basması, “dolaylı manipülasyon” için bir örnek teşkil etmektedir.

ipucu

Kullanıcıya, eyleme geçmeden önce ne yapması gerektiğine dair ipuçları verin.

  • Sistemin görünümü (renk, form, boyut gibi vb.), işlevine dair kullanıcıya nasıl ipucu verebilir? Bu, kullanıcının sistemin nasıl çalıştığını anlamasına yardımcı olur.
  • Kullanıcıya, eyleme geçmeden önce neler olabileceğini gösterecek bilgiyi nasıl sağlarsınız? Bu, ilerlemeye karar verdiğinde ne olacağını gösterebilecek isimlendirilmiş bir buton ya da ilerlemeden önce sunulabilecek son yönergeler olabilir.

error

Öngörülerde bulunarak hataların önüne geçin.

  • Hataların önüne geçebilecek kısıtlamalar var mı? Poka-Yoke (Hata Engelleme) Prensibi’ne göre bu kısıtlamalar; planladıkları eyleme geçmek için kullanıcıların davranışlarını düzenlemeye yardımcı olmaktadır.
  • Hata mesajları, kullanıcıya sorunu çözmesi için yol gösteriyor mu ya da hatanın neden meydana geldiğini açıklıyor mu? Faydalı hata mesajları çözüm sunarak kullanıcıya yardımcı olur.

geri bildirim

Sistemin geri bildirim ve yanıt zamanlamasını göz önünde bulundurun.

  • Kullanıcı, bir eylem sonrası ne zaman geri bildirim alıyor? Kullanıcı, etkileşime geçerek bir eylemde bulunduğunda sistem, bu eylemi gördüğünü bildirmek ve kullanıcıya ne yaptığını haber vermek durumundadır.
  • Eylem ile sistem yanıtı arasında ne kadar zaman olmalıdır? Yanıt Verme (bekleme süresi) dört aşamada nitelendirilebilir: hemen (0.1 saniyeden kısa bir sürede), aksamalı (0.1-1 saniye arasında), kesintili (1-10 saniye arasında), ve işleyişi durduracak şekilde (10 saniyeden fazla sürede).

interaktif element

Her bir elementi stratejik olarak düşünün.

  • Arayüz elementleri, etkileşime geçmek için makul ölçülerde mi? Fitts Kanunu’na göre buton gibi elementler, kullanıcının tıklayabileceği büyüklükte olmalı. Bu, özellikle dokunmatik bileşenlere sahip mobil içeriklerde büyük önem taşır.
  • Menüler gibi interaktif elementleri yerleştirmek için kullanılan kenar ve köşeler stratejik olarak doğru kullanılıyor mu? Yine Fitts Kanunu’na göre kenarlar, menü ve butonlar için mouse ya da parmak kullanımında sınır niteliği taşımaktadır.
  • Standartları takip ediyor musunuz? Kullanıcılar, belirli arayüz elementlerinin nasıl çalıştığına dair bir öngörü ve alışkanlığa sahiptir. Eski yöntemlerin yerine yenileri gelmediği sürece, standartların dışına çıkmamalısınız.

Basitlestirme

Öğrenilebilirlik için basitleştirin.

  • Bilgi, aynı anda yedi (artı/eksi iki) parçaya ayrılabiliyor mu? George Miller; insanların unutmadan ya da hata yapmadan, kısa süreli hafızalarında yalnızca 5-9 şeyi akıllarında tutabildiklerini keşfetmiştir.
  • Kullanıcı tarafı mümkün olduğunca basit mi? Tesler’ın Koruma Kanunu’na göre karmaşa, mümkün olduğunca kullanıcı üzerinden alınıp, sistemi kurma aşamasında kullanılmalıdır. Tesler’a göre basitleştirme; fonksiyon yitirme noktasına gelmeden, belirli bir düzeye kadar yapılabilmektedir.
  • Bilindik formatlar kullanılıyor mu? Hick Kanunu’na göre karar verme süresi, kullanıcıların takip etmeye ve seçmeye alışkın olduğu formatlar ve seçmek zorunda oldukları opsiyon sayısına bağlı olarak değişim göstermektedir.

Referanslar:

Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition) by Dan Saffer

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites by Peter Morville and Louis Rosenfeld

Complete Beginner’s Guide to Interaction Design 

Introducing Interaction Design

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

arayuz tasarimi

Kullanıcı Arayüzü Tasarımı; kullanıcı aksiyonlarını öngörerek, arayüzün erişilebilir ve anlaşılabilir basitlikte öğelerden oluşmasına ve kullanıcı eylemlerini kolaylaştırmaya odaklanmaktadır. Kullanıcı Arayüzü (UI:User Interface); etkileşim tasarımı, görsel tasarım ve bilgi mimarisi konseptlerini bir araya getirmektedir.

Arayüz Elementlerinin Seçimi:

Kullanıcılar, belirli arayüz elementlerine aşinadır. Bu nedenle onlar için tasarladığınız arayüzde öngörülebilir ve tutarlı olmaya çalışmanız; görev tamamlama, etkin olma ve memnuniyet anlamında başarılı olmanıza yardımcı olacaktır.

Arayüz elementleri aşağıdakileri kapsamakla birlikte bunlarla sınırlı değildir:

  • GİRİŞ KONTROLLERİ: Butonlar, yazı alanları, onay kutucukları, radyo butonları, açılır listeler, liste kutucukları, değişim butonları, tarih alanı
  • NAVİGASYONEL BİLEŞENLER: Sayfa işaret yolları, slider, arama alanı, sayfa numaralandırma, etiketleme ve ikonlar
  • BİLGİLENDİRİCİ BİLEŞENLER: Araçlar, ikonlar, ilerleme çubukları, bildiriler, mesaj kutuları, yardımcı pencereler
  • KONTEYNERLER: Akordeon

Bazen içeriği göstermek, birkaç elementin bir arada kullanımını gerektirmektedir. Böyle durumlarda bazı unsurlardan vazgeçmemiz gerekebilir. Size alan açarak fayda sağlayan bazı elementler, kullanıcı açısından zihinsel olarak biraz zorlayıcı olabilir. Örneğin bir açılır menü içerisinde neler olduğunu ya da kullandığınız elementin ne olduğunu tahmin etmesi gerekebilir.

Kullanıcı Arayüz Tasarımındaki En İyi Uygulamalar:

Her şey kullanıcılarınızı tanımakla başlar.

Onların amaçlarını, becerilerini, tercih ve eğilimlerini anlamanız gerekmektedir. Kullanıcılarınızı tanıdıktan sonra, arayüz tasarımında aşağıdakileri uyguladığınızdan emin olmalısınız:

arayuz

Arayüzü basit tutun. En iyi arayüzler kullanıcı için neredeyse görünmez gibidir. Kullanıcı, gereksiz elementlerden kaçınır, mesaj ve isimlendirme dili çok nettir.


tutarli arayuz

Temel arayüz elementlerini kullanın ve tutarlı olun. Arayüzünüzde temel elementleri kullanırsanız kullanıcılar kendilerini daha rahat hisseder ve amaçlarına daha hızlı ve kolay ulaşabilirler. Ayrıca sitenizin etkin olabilmesi için dil, genel site düzeni ve tasarımda belirli kalıplar kullanmanız da önemlidir. Kullanıcı, sitenizde herhangi bir şey yapmayı öğrendiğinde bu becerisini, sitenin diğer bölümleri için de kullanmaya başlayacaktır.


layout

Sitenizin düzeni bir amaca yönelik olsun. Sitenizde yer alan tüm unsurların birbirleriyle olan mekansal ilişkileri ve sayfanızın yapısı önemlidir. Elementlerin dikkatlice yerleşimi önemli bilgileri öne çıkarabilirken, taramayı ve okunabilirliği kolaylaştırabilir.


settings

Renk ve dokuları stratejik olarak kullanın. Renkler, ışık, kontrast ve doku ayarlarını, dikkatleri istediğiniz yere çekmek ya da istediğiniz yerden uzaklaştırmak için avantaj olarak kullanabilirsiniz.


typography

Hiyerarşi ve netlik yaratmak için tipografiyi kullanın. Yazı tiplerini dikkatli seçin. İyi düşünülmüş font tipleri, boyutları ve düzenlemeleri tarama ve okunabilirliği artıracaktır.


iletisim

Sistemin iyi iletişim kurduğundan emin olun. Kullanıcılarınızı yer, aksiyon, durum değişimi ve hatalar konusunda her zaman bilgilendirin. Gerektiğinde durum bildirmek için kullanacağınız çeşitli arayüz elementleri ile, kullanıcıların bir sonraki adımda hayal kırıklığı yaşamalarını engelleyecektir.


varsayim

Varsayımları düşünün. İnsanların sitenizi ziyaret etme amacını tahmin ederek, kullanıcı üzerindeki sorumlulukları azaltacak varsayımlar elde edebilirsiniz. Özellikle tasarımı şekillendirme aşamasında bu size, bazı alanların önceden seçilip doldurulabilmesi gibi önemli avantajlar sağlayacaktır.


Referanslar:

Jesse James Garrett’s The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition)

Peter Morville and Louis Rosenfeld’s Information Architecture for the World Wide Web: Designing Large-Scale Web Sites

10 Interface Design Fundamentals

Effective Visual Communication for Graphical User Interfaces

Using Light, Color, and Contrast Effectively in UI Design

Bilgi Mimarisi Temelleri

bilgi mimarisi

Bilgi Mimarisi (IA:Information Architecture); içeriğin organizasyonu, yapılandırılması, etkili ve sürdürülebilir bir şekilde sınıflandırılması konuları ile ilgilenmektedir.

Amaç, kullanıcılara bilgiye ulaşıp görevlerini tamamlamaları için yardımcı olmaktır. Bunu yapabilmek için, daha büyük resmi görebilmek adına tüm parçaların bir araya geldiklerinde birbirleriyle olan uyumu ve sistem içerisindeki ilişkilerini anlamanız gerekmektedir.

İyi Düşünülmüş bir Bilgi Mimarisi Neden Önemlidir?

Peter Morville’e göre bilgi mimarisinin amacı; kullanıcıların yeri, buldukları, çevreleri ve beklentileri hakkında bilgi edinmenize yardımcı olmaktır. Bunun sonucunda bilgi mimarisi yöntemleriwireframe ve prototipleme süreçlerindeki rolüyle kullanıcı arayüz tasarımı, etkileşim tasarımı ve tanımladığı kelime seçimleriyle içerik stratejisi için de bilgi sağlamaktadır.

Bilmeniz Gerekenler:

Başarılı olmak için; bilginin yaratılması, depolanması, erişilebilirliği ve sunumu konularındaki endüstri standartları hakkında farklı anlayışlara sahip olmanız gerekmektedir.

Lou Rosenfeld ve Peter Morville’in; Information Architecture for the World Wide Web’  kitaplarında ele aldıkları bilgi mimarisinin temel elementleri aşağıdaki gibi sıralanmıştır:

organizasyon semasi

ORGANİZASYON ŞEMASI ve YAPISI: Bilginin kategorize edilip yapılandırılması

sistem tanimlama

SİSTEMLERİN TANIMLANMASI: Bilginin sunumu

navigasyon

NAVİGASYON SİSTEMLERİ: Kullanıcıların bilgi tarama ve içinde gezinme şekli

arama

ARAMA SİSTEMLERİ: Kullanıcıların bilgiyi arama biçimi

Bu bilgi sistemlerini yaratabilmek için; kullanıcılar, kaynak ve içerik arasındaki doğal bağlantıyı anlamanız gerekmektedir.

Rosenfeld ve Morville bunu ‘bilgi ekolojisi’ olarak adlandırıp, venn şeması ile görselleştirmişlerdir:  

bilgi ekolojisi

Bilgi Mimarisi Yan Dalları:

Bilgi mimarisi karmaşık bir konu olduğundan, geniş bilgi sistemleri ile çalışmak bazen ağır bir iş olabilmektedir. Bunun için uzmanlar, kendi disiplinleri içerisinde özel bir alanda çalışmayı seçebilmektedir.

Bilgi mimarisinin yan dallarına; araştırma şemaları, metadata ve taksonomi gibi örnekler verilebilir.

Sorunlu Bilgi mimarinizmi var?

Nasıl düzeltilir

İlgili tüm sayfalara kolayca erişilebildiğinden emin olmak için web sitenizin gezinme ve bağlantı mimarisini kontrol edin .


Referanslar:

The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) by Jesse James Garrett

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites by Peter Morville and Louis Rosenfeld

Information Architecture, Web Style Guide 3rd Edition

Information Architecture Concepts

Components Used in Information Architecture

Information Architecture 3.0

Understanding Information Architecture

Kullanılabilirlik Değerlendirmesi Temelleri

kullanilabilirlik degerlendirmesi

Kullanılabilirlik Değerlendirmesi; kullanıcıların, amaçlarına ulaşmak için bir ürünü ne kadar iyi kullanıp öğrenebildiklerine odaklanırken, aynı zamanda onların, bu süreçten ne kadar tatmin olduklarına da değinmektedir. Bu bilgiyi toplayabilmek için yetkililer; var olan bir sitenin kullanıcılarından geribildirim almak ya da yeni bir siteyle ilgili planları öğrenmek amacıyla çeşitli yöntemler kullanmaktadır.

Kullanılabilirlik Nedir?

Kullanılabilirlik; kullanıcının, web siteleri, yazılımlar, cihaz ya da uygulamaları kapsayan ürün ya da sistemlerle olan etkileşimi sırasındaki deneyimlerinin kalitesini ifade etmektedir.

Kullanılabilirlik; etkinlik, verimlilik ve tamamıyla memnuniyet odaklıdır.

Kullanılabilirlik; yalnızca bir ürün, sistem ya da kullanıcı arayüzüne ait tek boyutla bir özellik değildir. Kullanılabilirlik, aşağıdaki unsurların bir kombinasyonudur:

SEZGİSEL TASARIM: Site navigasyon ve mimarisinin, hiçbir efor gerektirmeden anlaşılabilmesidir.

ÖĞRENME KOLAYLIĞI: Arayüzü daha önce hiç görmemiş bir kullanıcının, basit görevleri ne kadar kısa sürede tamamlayabildiğiyle ilgilidir.

KULLANIM ETKİNLİĞİ: Deneyimli bir kullanıcının basit görevleri ne kadar kısa sürede tamamlayacağına odaklanır.

AKILDA KALICILIK: Siteyi daha önce ziyaret etmiş olan kullanıcının, sonraki ziyaretlerinde siteyi etkin kullanabilecek kadar iyi hatırlayıp hatırlayamaması ile ilgilenir.

HATA SIKLIĞI ve ŞİDDETİ: Kullanıcıların ne kadar sıklıkla hata yaptığı, hataların boyutu ve telafisiyle ilgilenir.

BİREYSEL MEMNUNİYET: Kullanıcının, sunulan sistemi kullanmayı ne kadar sevdiğine odaklanır.

Değerlendirme Metotları Nelerdir ve Ne Zaman Uygulanmalıdır?

Kullanışlı siteler geliştirmenin anahtarı, kullanıcı odaklı tasarımı işin merkezine koymaktır. Konumuz ‘kullanılabilirlik testi’ olduğunda, ’erken ve sık test’ kavramı oldukça büyük bir önem taşımaktadır. Süreç içerisinde mümkün olduğunca erken test etmek, kullanıcı odaklı tasarımın bir parçasıdır. İçeriğinizi, bilgi mimarisini, görsel tasarımı, etkileşim tasarımını ve genel kullanıcı memnuniyetini geliştirmek ve iyileştirmek için kullanabileceğiniz farklı pek çok yöntem bulunmaktadır.

Test etmenin sunduğu fırsatlar aşağıdaki gibidir:

Bu testlerden bir ya da birkaçının kombinasyonu; site, sistem ya da uygulamanızın kullanılabilirliğini radikal bir şekilde geliştirecektir.

Test Sonucu Çıkan Verilerle Çalışmak:

Kullanılabilirlik değerlendirmeleri, iki tip veri elde etmenizi sağlar:

Niceliksel veri gerçekte neler olduğunu gösterir

Niteliksel veri ise katılımcıların fikir ve düşüncelerini görmenizi sağlar

Tüm veriler topladığında, aşağıdakiler için kullanılmalıdır:

  • Web sitenizin kullanılabilirliğini değerlendirmek
  • Geliştirme için öneride bulunmak
  • Önerileri uygulamak
  • Yapılan değişikliklerin etkinliğini ölçmek için yeniden test etmek

Kullanıcı Araştırması Temelleri

kullanici arastirmasi

Kullanıcı Araştırması; çeşitli gözlem teknikleri, görev analizleri ve diğer geribildirim yöntemleri vasıtasıyla kullanıcı davranışlarını, ihtiyaç ve motivasyonlarını anlamaya odaklanmaktadır.

Mike Kuniaysky kullanıcı araştırmasını; “tasarımın, hedef kitle üzerindeki etkisini anlama süreci” olarak tanımlamıştır.

Uygulamanız gereken ya da ihtiyaç duyacağınız kullanıcı araştırması türleri; geliştirmekte olduğunuz site, sistem ya da uygulamanın türüne, zaman çizelgenize ve dış etkenlere bağlı olarak değişim göstermektedir.

Kullanıcı Araştırması Yöntemleri Ne Zaman Uygulanır?

Aşağıdaki tabloda kullanıcı odaklı tasarım (UCD) süreci rehberliğinde, projenizin her aşamasında uygulayabileceğiniz araştırma türü örneklerini bulabilirsiniz. Bazı yöntemler, projenizin yalnızca bir ya da birkaç aşamasında birden kullanılabilmektedir.

YÖNTEMLERKullanıcıyı
Tanıma
İçerik Tasarım Test ve
Geliştirme
Kart Sıralama: Kullanıcıların,
sitenizdeki bilgileri
sınıflandırmasını sağlar.
Bu şekilde sitenizin yapısı ile
kullanıcının düşünme
biçimi arasındaki
uyum sağlanmış olur.
İçerik Mülakatları: Kullanıcıları
kendi doğal ortamlarında
gözlemleme fırsatı sunarken,
çalışma prensiplerine
dair daha net fikir sahibi
olmanızı sağlar.
İlk Tıklama Testi: Çalışır
durumda olan bir web sitesi,
prototip ya da wireframe
üzerinde uygulanabilecek,
navigasyon odaklı bir
test yöntemidir.
Focus Gruplar: Kullanıcı
davranış, fikir ve talepleri
hakkında bilgi edinmenizi
sağlayan, belirli kullanıcı
gruplarıyla yapılan
görüşmelerdir. 
Sezgisel Değerlendirme
/Uzman Görüşü:
Kullanılabilirlik konusunda
uzman grupların,
web sitenizi belirli ilkeler
çerçevesinde
değerlendirmesidir.
Bireysel Mülakatlar: Birebir
görüşmeler; belirli
kullanıcılar, kullanıcı
davranışları, istekleri ve
deneyimleriyle ilgili detaylı
bilgi edinmenizi sağlar.
Paralel Tasarım: En iyi sonuca
ulaşabilmek için birden fazla
tasarımcının eş zamanlı ve
birbirinden bağımsız olarak
çalışmasıyla, farklı ve
en doğru bakış açılarının
bir araya
getirilmesini sağlar.
Kişilikler (Persona): Mevcut
verilere ve kullanıcı
mülakatlarına dayanarak
temsili kullanıcıların
yaratılmasıdır.
Kişisel detaylar hayal ürünü
olabilir ancak, kullanıcı tipi
yaratmak için kullanılan
bilgiler hayal ürünü olamaz.
Prototiplendirme: Tasarım
ekibinin, site maketini
uygulamadan önce tüm
fikirleri kontrol etmesini
sağlar. Prototip, kağıttan bir
model olabileceği gibi,
interaktif html sayfalardan
da oluşabilir.
Anketler: Web sitenizin
farklı kullanıcılarına
soracağınız soru grupları,
sitenizi ziyaret eden insanlar
hakkında bilgi sahibi
olmanızı sağlar.
Sistem Kullanılabilirliği
Ölçümü (SUS): Kullanılabilirliği
subjektif olarak test etmek için
uygulanan ’bağımsız 10 madde
ölçümü’ teknolojisidir.
Görev Analizi: Kullanıcıların
web sitenizde yapmak
istedikleri de dahil olmak üzere,
tüm kullanıcı hedefleri
hakkında bilgi edinmenizi ve
sitenizde üstlendikleri rolleri
anlamanızı sağlar.
Kullanılabilirlik Testi:
Sitenizin gerçek
kullanıcılarıyla yapılan
birebir oturumlar vasıtasıyla,
sitenizde onları rahatsız eden
problemleri bulmanızı sağlar.
Kullanım Durumu:
Kullanıcıların, web sitenizin
spesifik bir özelliğini
nasıl kullandığına;
her bir görevi tamamlamak
için attıkları adımlar da dahil
olmak üzere, siteyle olan
etkileşimlerine dair detaylı bilgi edinmenizi sağlar.

En İyi Uygulamalar:

Proje Planlaması boyunca:

Kullanıcı odaklı tasarım sürecinde sizi adım adım yönlendirebilecek görsel bir harita olarak, UCD (Kullanıcı Odaklı Tasarım) Kılavuzu’na başvurun.

Test aşamasını, programınıza ne zaman dahil edeceğinizi hesaplayın. Erken ve sık test edin.

Siteniz için hedef kitleyi tanımlayın. Bunu yapmanız; UX ekibinin aşağıdaki süreçlerde işini kolaylaştıracaktır:

  • Filtreleme
  • Katılımcıları işe alma
  • Kişilikleri (personalar) belirleme
  • Test için görevleri tanımlama

Referanslar:

Observing the User Experience: A Practitioner’s Guide for User Research by Mike Kuniavsky