6 Başlıkta Tasarımda Etkileşimin Temel İlkeleri

6 Başlıkta Tasarımda Etkileşimin Temel İlkeleri


Günümüzde artık her yerde karşımıza çıkan sonsuza kadar scroll’layabileceğiniz web sayfaları ve gündelik yaşamımızda önemli bir yeri olan, vücudumuzda birer eklentiye dönüşmüş dokunmatik cihazların dünyasında; hedef kitlemizi akıcı ve canlı kullanıcı deneyimleriyle buluşturmak için tasarımda etkileşim kavramını anlamamız gerekiyor.

Interaction Design Best Practices Vol.1’de de açıklandığı gibi, etkileşimli bir tasarım yaratmak için çoklu kullanıcı deneyimi disiplinlerinde ustalaşmış olmamız gerekmektedir. Bu mantıklı bir önermedir; çünkü bahsettiğimiz obje sistemini ortaya koyarken, onun aynı zamanda öğrenilebilir ve kullanışlı olmasını sağlamak pek de kolay bir şey değil.

Gelin beraber IxD’nin (etkileşimli tasarım için kullanılan genel bir akronim) temel prensiplerini irdeleyelim ve daha iyi etkileşimli tasarım nasıl yapılır bir bakalım.

Etkileşimli Tasarımın 6 Önemli Adımı

İyi etkileşimli tasarım, insanlarla arasındaki iletişimin doğruluğu ve gücü ile aynı oranda değerlidir. Peki tasarımımızın insanlarla iletişimini gerçekleştiren, yani bu diyaloğu işleten şey ile bunun bilgisayarlarımızın arayüzlerindeki karşılığı nedir? Bu soruların cevapları çok keskin noktalarla açıklanacak türden değil. Deneyimlerimize göre bu konudaki başarı, kullanıcı deneyimi esaslarının mükemmel uygulanmasına dayalıdır. Bu da iyi bir tasarımcı olmanın ilk şartının UX’in esaslarını kavramak olduğunu bir kez daha vurgulamaktadır.

1. Amaca Yönelik Tasarımlar

Kullanıcı araştırmasını kişisel olarak yürüten kişi siz olmasanız da bu konudaki içgörülerinizi tasarımınıza nasıl yedireceğinizi bilmeniz gerekiyor.

Kanlı canlı kullanıcılarla empati kurmanızı sağlayacak deneyim işleyişini, sizler için kademe kademe sıraladık:

a – Personalar: Personaları, hedef kitlemizin davranış ve psikolojilerinden yola çıkılarak oluşturulmuş kurgusal karakterler olarak düşünebiliriz. Tasarımınız konusunda önemli kararlar almadan önce kendinize, “Yarıyıl tatilinde alışveriş yapacak ev hanımı Meral, nasıl bir ödeme işlemini tercih eder?” gibi sorular sormanıza yarayacaktır.

b – Kullanıcı Senaryoları: Personalarla ilintili olan kullanıcı senaryoları, bu kurgusal karakterlerin sitenizi kullanırken nasıl hareket edeceklerini açıklamaya çalışır. Örneğin; “Özel indirim gününde dönemsel alışveriş yapan İlkem’in, mesai saati bitmeden önce alması gereken uzun bir hediye listesi bulunmaktadır.” Bu senaryolar sizi, ürününüzle kullanıcı arasındaki etkileşim hakkında keşifler yapmaya zorlar.

c – Deneyim Haritaları: Kullanıcı senaryolarından bir adım ileri giderek hazırlayacağınız deneyim haritaları sayesinde, tek bir etkileşime dair onu çevreleyen bütün şartları -duygusal ve dış etkenler dahil- kronolojik olarak düzenleyebilirsiniz. “İş arkadaşları tarafından bütün gün darlanmış ve kafası şişmiş Gökhan’ın tesellisi, kendine yeni bir kulaklık almasıdır.” gibi bir örnek verebiliriz. Yaşanmış bir hikaye, bir Cihannüma serzenişi.

Bu üç teknik, deneyimi büyük bir resimde tanımlamaya yaramaktadır: kullanıcı, senaryo ve duygusal serüvenin tamamı.

2. Kullanılabilirlik

Tasarımınızın en azından kullanılabilir olması gerekiyor değil mi? Kişi, ortaya koyduğunuz ürünü kullanamıyorsa doğal olarak onu arzulamayacaktır. Konuyla ilgili doğru bir örnek olan Eventbrite’ın oturum tasarlayıcısına bakalım.

Bu online uygulama; organizatörlerin rezervasyonlu bir etkinliği başından sonuna kadar oldukça detaylı (tanımlayıcı sıralar, masalar ve gerekiyorsa bir dans pisti) bir şekilde oluşturmalarını sağlamaktadır. Tek bir çizgide, çoklu seçenek ve program seçeneği sunması da bu detaylı uygulamayı kullanım açısından sağlamlaştırmaktadır.

Eventbrite örneğinde olduğu gibi, bir sistemin kullanımı zahmetsiz ve kolay olmalıdır. Kullanıcı, sistemin nasıl çalışacağıyla ne kadar az ilgilenirse, uygulamayı kullanırken o kadar rahat olacaktır.

3. Sağlarlıklar & Göstericiler

Sağlarlıkların konsepti, bir fonksiyonun kendi kendini tanımlayabilmesi ve kendi yararını önermesidir. Örneğin yollar, üzerinde yürünmeyi önermektedir. Göstericiler sağlarlıkları ima ederler, örneğin yolun yassı yüzeyli olması, yolu ayaklarınızla yürüyeceğinize delalettir.

Tasarımda Sağlarlıklar

Göstericiler olmadan kullanıcılar sağlarlıkları algılayamazlar.

Yukarıdaki örnekte, düğme tasarımındaki gelişimi görmektesiniz. İlk aşama göstericilerin eksikliğinden ötürü standart bir metin olarak görünürken, üçüncü aşama yuvarlatılmış köşeler ve meyillerle gerçek bir düğmeyi andırmaktadır.

Göstericiler aynı zamanda metafor olarak da iş görürler. Çünkü insanlar bir şeyle iletişime geçebilecek durumda olsalar bile ek olarak bunun nedenini bilmek isterler. iPhone dock örneğinde, yuvarlatılmış köşeler düğmelerle nasıl etkileşime geçeceğimiz hakkında bize bilgi verirken, aynı zamanda metaforik imgelerin (telefon, zar, müzik notaları) amacımızla da iletişime geçtiği görülmektedir.

4. Öğrenilebilirlik

İdeal bir dünyada kullanıcı dediğin, fonksiyonları tek bir kullanıştan sonra hatırlayandır. Ne yazık ki bu, gerçekten büyük bir hayaldir. Bu hayale yaklaşılması içinse aşinalık ve sezgiselliğin tasarımdaki her arayüze yedirilmesi gerekmektedir.

Tasarımda etkileşimin başarılı olması için, karmaşanın tutarlılık ve tahmin edilebilirliğe erişmesi gerekmektedir. Örneğin, sitedeki linklerin bazılarını yeni pencerede açılır kılarken, diğerlerini kullanıcıyı sayfada tutacak şekilde düzenlemek yanlıştır. Bunun devamı olacak bir örnekte de bazı görseller için lightbox kullanırken diğerlerini yeni pencerede açtırmayın, tutarlı olun, çelişkilerden kaçının.

Tutarlılık tahmin edilebilirliği doğurur ve bu da doğrudan öğrenilebilirliği geliştirir.

Öğrenilebilirliği artırmak için bilinen bir taktik de kullanıcı arayüzü modellerini kullanmaktır. Çoğu site ve uygulama kullanıcının aşina olduğu bu modelleri kullanmaktadır. Bu arada modellerin tutarlılığını da göz ardı etmeyelim. Ve işin güzelliği; söz konusu modelleri tasarım aşamasında kullanırken, yaratıcılığınızı konuşturup aynı zamanda tutarlı bir yol olarak güvenle kullanabilirsiniz.

Örneğin ekmek kırıntıları, web sitesi tasarımında yaygın bir model olmakta ve kullanıcıların sitenizde yolunu bulmasına yardım etmektedir. Hangi site önünüzde açık olursa olsun, ekmek kırıntılarını gördüğünüzde onların nasıl çalıştığını hemen anlarsınız. Bu aşinalık, ürünü öğrenilebilir kılmaya yarar ve ürünler öğrenilebilir olduklarında kullanıcıları kendilerine çekerler. Bu sayede de ürünlerin kullanılabilirlikleri artar.

5. Geri Bildirim ve Tepki Süresi

Geri bildirim, etkileşimin atan kalbidir diyebiliriz. Her etkileşimin kullanıcınız ve ürününüz arasındaki bir diyalog olduğunu düşünürsek, ürününüzün kullanıcı dostu, ilginç ve yardımcı olması büyük önem taşımaktadır.

İster özenle hazırlanmış bir animasyon olsun, ister güzel bir mikro-etkileşim sağlasın, isterse de basit bir “biiip”ten ibaret olsun… Ürününüz görevini yerine getirse de getirmese de bir şekilde iletişime geçmek zorundadır.

Aşağıda Hootsuite’den aldığımız örnekteki gibi, baykuşumuz belirli bir süre sonra, kullanıcı hareketsizliği sonucu “uykuya dalma” eylemi gösterir. Bu da -uygulamanın Twitter’dan veri çektiğini düşünürsek- mantıklı bir eylemdir. Bu geri bildirim örneği hem zeki hem de eğlenceli olduğu için önem taşımaktadır. Ayrıca durmuş olan güncellemelerin yaratabileceği kötü deneyimleri pozitife çevirmektedir.

Geri bildirimde bir diğer anahtar faktör de tepki süresidir. Tepki süreleri mümkün olduğu kadar anlık olmalıdır. Gitar çalarken sesin, siz tellere vurduktan saniyeler sonra duyulması hoşunuza gider miydi? İşte tepki süresi bu kadar önemlidir.

6. Etkileşimi İyileştirmede Basamaklı İşleyiş

Temel ilkelerin üzerinde durduğumuza göre şimdi detayları açıklamada bize yardımcı olacak bir işleyiş örneğini ele alalım.

Alanında değerli bir etkileşim tasarımcısı olan Stephen P. Anderson’ın tavsiyesi, kendinizden başka birini bir arayüz rolüne soyundurarak onunla kullanıcı rolüyle iletişime geçmenizdir. Bu, tasarımsal anlamda vizyonunuzu genişletmek için önemli bir deneyim olabilir. Bu deney sayesinde arayüzden çıkacak bütün yüksek sesli ve garip tepkimeleri duyacak, aynı zamanda robotik bir etkileşim yaratmaktan da kendinizi alıkoyacaksınız. Bu canlandırma oyunu sona erdiğinde anlatınızı kağıda dökebilir ve etkileşiminizi yeniden yapılandırabilirsiniz.

Bu canlandırmanın aşamaları:

Etkileşimi canlandırın

İki kişiyi alın getirin. Birini arayüzü oynayacak, diğerini de not alacak şekilde görevlendirin. Bir tarayıcı penceresini arayüzü canlandıracak kişiye tutturun ve arayüzün projektörden görüntülenmesini sağlayın. Sonra, kullanıcıyı canlandırırken amacınızı anlatarak diyaloğu başlatın. “Arayüzünüz” de tepkilerini; etiketler, menüler ve kullanıcı arayüzündeki diğer her şeyle göstersin. Şu videoyu (link) izleyin ve kendinizi çalışmalarınıza uyarladığınızda nasıl oluyormuş bir görün.

Anlatıyı Ayrıntılı Olarak Planlayın

Deneyimin her adımını belgeleyin. Buna not aldığınız görevler ve olası kullanıcı duygularını da dahil edin. The Guide to UX Design Documentation‘da da tartışıldığı üzere bu, birkaç kullanıcı senaryosu kadar basit bir döküman da olabilir, 4 aşamalı deneyim haritası(link) kadar karmaşık da olabilir; ama faydalı olacağı kesin.

Adımlarınızı Sadeleştirin

Kullanıcılar bazen çoklu aşamalar gerektiren amaçlara sahip olabilirler. Uçak bileti/otel odası ayırtmak ya da çevrim içi araba almak gibi örnekleri düşünün. The Guide to Prototyping(link)’de de önerildiği gibi, arayüzünüz karmaşık bir amacı basit aşamalara (önce gidilecek, sonra da varılacak yeri ve tarihi sormak vb.) çevirebilmektedir. Örneğin; Virgin America’nın kademeli formdaki tasarımı, yer ayırtma işlemini olduğundan çok daha kolay bir hale getirmektedir.

Kullanıcı Seçeneklerini Sınırlandırın

Bu büyük ihtimalle en zor aşama olacak; ancak kullanıcılarınız için seçilebilir aksiyonları mantık çerçevesinde kısıtlamalısınız. Her zaman kendinize sorun, sunduğunuz seçeneklerin tamamı o an için elzem durumda mı? Eğer değilse, fazla gördüklerinizi farklı bir diyalog, sayfa ya da alan için ayırmayı deneyin.

Küçük Anlara Özen Gösterin

Küçük anlardan kastımız, kişilerin arayüzle ilişki kurarken düşebilecekleri olası tereddüt, ilerleme ya da iletişimi kesme kararı anlarıdır. Canlandırma egzersizine dönüp bu deneyimde karşılaştığınız kaygı içeren durum ve halleri hatırlayın ve bunlardan ders çıkarın. İletişimi açıklığa kavuşturmak için mikro kopyanızdan ve kullanıcı arayüzü modellerinden içeriksel aksiyonlar ve seçime bağlı girdiler çıkartın.

Sihirbazlıkta olduğu gibi birtakım detaylar yerine oturmadığında numaranız tutmayacaktır. Sadece kötü bir etkileşim bütün kullanıcı deneyimini berbat edebilir.

Yukarıda detaylı olarak açıkladığımız işleyiş sayesinde etkileşimli tasarıma olan yaklaşımınız da değişecek ve onu birtakım hareketli arayüzlerden ibaret değil de daha çok kullanıcıyla tasarım arasında bir görüşme olarak ele alacaksınız.

Eğer bu konuda doğru düzgün örnekler görmek ve onlardan ilham almak istiyorsanız, bu Quora başlığı fimlerden web sitelerine kadar birçok örneğe ulaşabileceğiniz iyi bir kaynak olabilir.

Kepenkleri İndirirken

Etkileşimli tasarım, arayüzlerin nasıl davrandığına değil, teknolojinin insan davranışına nasıl adapte olduğuna dairdir. Hedef kullanıcılarınızın neyi fonksiyonel neyi duygusal bağlamda sevdiğini iyi bilmeniz gerekir. Buna bağlı olarak da teknolojinin kısıtlamalarını baz alarak ürününüzü her zaman arzulanabilir şekilde tasarlamalısınız.

En iyi etkileşimli tasarıma ulaşmak için önümüzde uzun bir yol var. Ürününüz şimdilik tez cevap veriyor, üzerine pek düşündürmüyor ve iyi bir sihirbazlık numarası gibi çalışıyorsa doğru yoldasınız demektir.

4
like
0
love
0
haha
3
wow
1
sad
0
angry