Amaca yönelik etkileşimler tasarlama

Amaca yönelik etkileşim tasarımının temel ilkelerini, etkileşimin hangi tasarım zorluklarını çözebileceğini ve bunu sürecinize nasıl dahil edeceğinizi keşfedin.

Kullanıcı deneyiminde etkileşim tasarımı ve animasyonu düşündüğümüzde, bunu süslü şeylerle karıştırmak kolaydır: ziller ve ıslıklar veya “bir web sitesine vay faktörü veren” rastgele uçan nesneler. Kısa süreli bir zevk getirebilir, ancak kısa sürede normal kullanıcılar için rahatsız edici hale gelebilir.

Bu tür bir yararsızlıkla mücadele etmek için, anlamlı etkileşim tasarlamanın temel ilkelerine, ortak tasarım zorluklarını nasıl çözebileceğine ve bunu tasarım sistemlerinize ve sürecinize nasıl tanıtabileceğinize bir göz atacağız. Etkileşim artık “olması güzel” olarak kapsam dışına çıkan bir son rötuş değil, genel kullanıcı deneyiminin ayrılmaz bir parçası olmalıdır.

Anlamlı etkileşim tasarımının dört temel ilkesi

1. Engel oluşturmaktan kaçının

Tam ekranı canlandırmak için iki veya üç saniye süren bir "hamburger menüsü" düşünün. Bir kullanıcı sitede gezinmek istediğinde, beklemek zorundadır. Kullanıcı için daha uzun görev süreleri oluşturmak, onları bir rakibin web sitesine veya uygulamasına geri döndürmenin garantili bir yoludur.

Bununla birlikte, bir etkileşimin ilerlemesini geciktirmenin fayda sağlayabileceği bazı durumlar vardır. Etkileşim karmaşık olduğunda, onu yavaşlatmak kullanıcıya daha iyi bağlam ve geri bildirim sağlayabilir. Etkileşimleri ve animasyonları ne zaman geciktirebileceğinize dair bazı örnekler:

• Yeni kullanıcıları yeni bir arayüze alıştırmak. Atla seçeneği ile engelleri azalttığınızdan emin olun.
• Sebep ve sonuç gösteren arayüzleri sürükleyip bırakın. Çok hızlı ve kullanıcılar bu dosyanın nereye gittiğini merak edebilir.
• Sepete ürün ekleme. Bu, ödeme için uzun süreli bir engel oluşturmamalıdır, ancak kullanıcıya görevlerinin başarılı olduğunu bilmeleri için yeterli geri bildirim sağlamalıdır.

Kural olarak, basit etkileşimler hızlı olmalı ve karmaşık etkileşimler, kullanıcının bağlamı anlaması için yeterince geciktirilmelidir.

2. Hareketi mesajla eşleştirin

Apple, iOS'taki tüm etkileşimlerinin hızlı ve keskin olacağına ve yüzünüzde bir sürü dikenli şey yapacağına karar verse, bir Apple ürünü kullanıyormuşsunuz gibi hisseder miydiniz? Alton Towers uygulamasını kullanıyor olsaydınız ve yavaş yavaş sönen bir animasyon ve çok sayıda Ken Burns tarzı geçiş gördüyseniz, burası büyülü bir eğlence ve heyecan yeri mi yoksa bir M&S TV reklamı mı gibi hissettirir?

Bir etkileşimin canlandırdığı yol, her zaman hedeflediğiniz tonu temsil etmelidir ve bu, kullanıcılarınız için doğru hissettirir - bu, deneyimi daha sürükleyici ve tutarlı hale getirir. Çocuklar için bir eğlence sitesiyse, biraz tuhaf ve gösterişli olabilir. Üst düzey bir butikse, yavaş, sofistike ve zevkli tutun.

3. Amaç verin

Etkileşim tasarımı, bir kullanıcı deneyimini yükseltmek için çok fazla potansiyele sahiptir, bu nedenle aşırı kullanım ve amaçsız kullanım çok caziptir. Flash web sitelerini hatırlıyor musunuz?

Biraz daha ilerleyin ve etkileşim tasarımının çözebileceği sekiz zorluğa bir göz atın. Etkileşimleriniz bu kalıpları izlemiyorsa, kullanıcıları memnun etmekten başka bir amacı olmaması ihtimali yüksektir.

4. Görünmez yapın

Etkileşimleri tasarlamak için harcanan zaman düşünüldüğünde bu kulağa oldukça üzücü geliyor, ancak fark edilmezse, bunun nedeni muhtemelen harika bir iş çıkarmış olmalarıdır. Bir şeyler ters gittiğinde veya bir şeyler kulağa hoş gelmediğinde, bir teknoloji parçası veya bir arayüz kullanmaya daha fazla dikkat etme eğilimindeyiz. İşler düzgün olduğunda, kullanıcı içeriğe odaklanabilir.

Facebook, Pinterest, Twitter ve Google ürünleri gibi yaygın olarak kullanılan uygulamalarda ve web sitelerinde etkileşim tasarımının dikkate alınma miktarı anlaşılmaz. Ve yine de, biri size işaret edene kadar asla gerçekten farketmezsiniz. Deneyimin keyfini çıkarabilmeniz ve ürün, hizmet veya içerikle daha güçlü bir duygusal bağ kurabilmeniz için tasarımı görünmez kılarlar.

Etkileşim tasarımının çözebileceği altı tasarım zorluğu

1. Yönlendirme ve bağlam

Bu, ekran alanı sınırlı olduğunda mobil tasarım için özel bir zorluktur. Her şeyi açıkta gösterin ve kullanıcı bilişsel olarak aşırı yüklenir. Hayati şeyleri göstermek ve daha az kritik şeyleri gizlemek için çabaladığımız şey; ancak, deneyimin bir kısmını gizler. Anlamlı etkileşimler kullanarak, kullanıcıya nesnelerin nerede yaşadığını görsel olarak öğretebiliriz, böylece hatırlaması kolay ve sezgisel olur.

Etkileşimi kullanarak bağlam oluşturmaya ilişkin birkaç örnek:

• Google yazı tipleri arka plan rengi değiştirici. Renkler, boya kovası simgesinin içinde yaşıyormuş gibi hissettiriyor.
• Cotton Bureau'da sepete ekleme ve ödeme işlemi. Sizi yeni bir sepet sayfasına götürmek yerine, görünen sayfanın sağında yaşayan bir atlıkarınca gibidir.

2. Sebep ve sonuç göstermek

Bunun klasik bir örneği, bir sürükle ve bırak arayüzüdür. Bir medya nesnesini alıp "bırakma bölgesine" getirdiğinizde, kullanıcının onu aldığını ve öğeyi bırakmak için doğru yere taşındığını söylemesi için bir geri bildirim olmalıdır. Bir kez bıraktıklarında, kullanıcıya görevlerinde başarılı olduklarını söylemek için doğrulama yapılmalıdır. Bu, renk değişiklikleri, olumlu doğrulama mesajları ve hatta ses efektleriyle yapılabilir.

3. Geri bildirim sağlama

Bu örnek için bir ödeme butonunu ele alalım. O güzel, parlak “Şimdi Öde” düğmesini tıkladığınızda, yalnızca işlendiği için tıklayıp tıklamadığınız konusunda kafa karışıklığıyla karşılaştığınız kaç tane kötü yürütülen e-ticaret ağ geçidi deneyimlediniz? Bu yaptığının bu olduğunu söylemedi. Böylece etkileşim bir düğmenin durumunu değiştirebilir ve biraz animasyonla kullanıcıya "ödeme işleniyor" diyebilir ve ardından bir sipariş onay sayfasına taşınmadan önce kullanıcıya "ödeme alındığını" söyleyebilir. Artık on saniye boyunca neler olduğunu merak etmeye ve interneti bozup bozmadığınızı sorgulamaya gerek yok.

4. Önemli bilgileri vurgulayın

Aynı ekran görünümünde bazı içerikler daha yüksek önceliğe sahip olduğunda, bunu tanıtmak için renk ve tipografi kullanımı tasarım sisteminizin tutarlılığını bozabilir veya aşırı kullanıldığında yerinde görünmeyebilir. Etkileşim, düzenden ödün vermeden önemli içeriği vurgulamaya yardımcı olabilir.

Fitness uygulamalarını düşünün: gösterge tablonuzu ilk yüklediğinizde, bugünün birincil etkinliğini ve istatistiklerini görmek istersiniz. Basit animasyon kullanmak, ekranda gösterilen şeylerin miktarını seyreltmeden bu içeriği ortaya çıkarabilir.

5. Performans algısı yaratın

Hız, hemen çıkma oranlarıyla ilişkili ortak bir faktör olduğu için sıcak bir konudur ve bunun iyi bir nedeni vardır. Sayfa hızı optimizasyonunu en üst düzeye çıkardığınız ve sayfanın yüklenmesinin hala biraz zaman aldığı durumlar olacaktır. Kullanıcıya hiçbir şey göstermemenin veya bir yükleme simgesi göstermenin alternatifleri vardır.

İskelet yükleme, tel kafes biçiminde öngörülebilir bir düzeni göstermek için kullanılabilir, böylece sayfa yüklenmeden önce kullanıcı kabaca nereye bakacağını ve arayüzle nasıl etkileşime girebileceğini bilir. Psikolojik olarak, hiçbir şey görmemeye kıyasla sayfa daha hızlı yüklenmiş gibi geliyor, ancak gerçekte aynı anda yükleniyor.

Ayrıca, yükleme sürelerini, bekleme süresini dağıtan samimi mesajlarla kullanıcıları neler olduğu ve olacaklar konusunda eğitmek için bir fırsat olarak kullanabilirsiniz.

6. Marka kişiliği eklemek

Karakter odaklı markalar, kişiliği deneyime dahil etmek için etkileşimi tanıtmaktan büyük ölçüde yararlanabilir. Maskotların insan özelliklerinden yararlanabilirsiniz. Markanızda görsel bir şey olmadığında, hız ve sıklığı kullanarak yine de kişilik ekleyebilirsiniz. Google'ı ve onların ilginç nokta ön yükleyicilerini veya basit bir şekilde samimi ve eğlenceli bir yaklaşım getiren sesli komut aktivasyonunu düşünün.

Kullanıcıyla duygusal bir bağ kurmak, düzenli ziyaretler almanın harika bir yoludur. Etkileşim tasarımı, teknolojiyi daha insan merkezli hissettirebilir - ki bunu hedeflemek her zaman iyidir.

Tasarım sürecinize etkileşimi tanıtmak

Aslına uygun eskizler ve kompozisyonlar

Etkileşim tasarımı araçları

• Keynote: Fikrinizi iletmek için kaba ve basit arıyorsanız, Keynote hızlı kazançtır.
• Adobe Animate: Her şeyi Adobe'nin içinde tutun ve diğer araçlarla sorunsuz bir şekilde geçiş yapın. Bu, açıklayıcı animasyon için idealdir.
• Tumult Hype: Sketch arayüzüne aşinaysanız ve zaman çizelgelerinde yolunuzu biliyorsanız, Tumult ile evdesiniz.
• Framer: Bu, animasyonunuzu JavaScript ile eşleştirmek için gerçekten gelişmiş yeteneklere sahip, amaca yönelik oluşturulmuş bir etkileşim tasarım aracıdır.
• Prensip: Güzel bir Sketch bağlantısıyla Principle, etkileşim için gidilecek yer haline geliyor. Öğrenmesi nispeten basittir ve bunda başarabilecekleriniz harikadır.
• Atomik: Etkileşimlerinizi son yapı kadar pratik hale getirmek için veri, mantık ve değişkenler ekleyin. Bu, biraz kodlama bilgisine sahip ileri düzey tasarımcılar içindir.
• Invision Studio: Hala erken, ancak Invision Studio'nun bazı harika yetenekleri ve Principle ile benzerlikleri var. Bunun prototipleme ve işbirliği pazarına hükmedecek kadar gelişmiş olup olmayacağını zaman gösterecek.

Ayrıntılı devir notları

Son derece işbirlikçi bir ortamdaysanız geliştirici notları bırakmak bir tartışma konusudur, ancak uzaktan çalışıyorsanız, fikirleriniz ve prototiplerinizle ilgili ayrıntılı notlar, iyi bir devir ile etkileşimlerinizin yapıya dahil edilmesini sağlayabilir.

Demolar ve ilham kitaplığı derleyin

Tasarım sisteminize ekleyin

Etkileşimle ortak bir sorunu (uygun şekilde test edilmiş) başarıyla çözdüyseniz, sıfırdan başka bir şey yapmak için zaman harcamadan benzer senaryolarda yeniden kullanmak için onu tasarım sisteminize veya desen kitaplığınıza alın.

Web tasarımı ve kullanıcı deneyimi (UX) konusunda yardım için bugün bizimle iletişime geçin.

Kullanıcı Deneyiminizle ilgili yardıma ihtiyacınız varsa, bizimle iletişime geçmekten çekinmeyin.