Bir mikrosite ya da mobil uygulama için kullanıcı deneyimi tasarımı yaparken, tasarım elementlerinin nasıl çalıştığına ya da birbirleriyle uyumuna yönelik notlar alırız. Bunlar kullanıcı arabirimi tasarımında farklı öğelerin ve birimlerin birbiriyle olan etkileşimlerini tanımlar ve biz onlara "kullanıcı deneyimi koreografisi" diyoruz.
Bir mikrosite ya da mobil uygulama için kullanıcı deneyimi tasarımı yaparken, tasarım elementlerinin nasıl çalıştığına ya da birbirleriyle uyumuna yönelik notlar alırız: “Kullanıcı menü ikonuna tıklar, menü paneli ekranın üstünden aşağı doğru açılır. Kullanıcı video görseline tıkladığında video ekranı kaplayacak şekilde yayılır” gibi… Aslında yaptığımız şey, ekranların ve görsel elementlerin kullanıcının aksiyonlarına bağlı olarak aldığı durumları anlatmaktan öteye gitmez. Peki bu durumların arasında neler gerçekleşir? Ekran ya da ekranı oluşturan görsel elementler nasıl hareket eder? Sizin de dikkatinizi çekti mi bilmiyoruz ama, bizi en çok etkileyen akışkan, lezzetli ve sezilebilir deneyimler, hareket detaylarının iyi hesaplandığı tasarımların sonucunda ortaya çıkıyor anlaşılan.
Bu yazımızda, ekranlar durumlarını değiştirirken gerçekleşen harekete ve koreografiye odaklanıyoruz.
Kullanıcı deneyimi koreografisi, kullanıcının ilgisini çekmeyi ve tutarlı bir deneyim yaratmayı amaçlayarak “ne?”, “ne zaman?” ve “nasıl?” sorularına yanıt vermek olarak tanımlanabilir.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Eğer hareket kavramından söz edeceksek, Disney animasyon stüdyolarından söz etmemek olmaz. Disney’in geliştirdiği Animasyonun 12 Prensibi, gerçekçi hareketleri ve duygusal bağı oluşturmak konusunda uzun yıllardan beri çoğu tasarımcının başvurduğu en temel kaynak. Bu kaynağın başarılı olmasının altında yatan güçlü bir neden var: Disney’in nesnelerin gerçek hayatta nasıl hareket ettiği ve nasıl davrandıkları konusunda sahip olduğu engin tecrübe. Kullanıcıların, izleme ve kullanma süreçlerinde yaşadıkları deneyimi benimsemeleri bütün hareketlerin doğal algılanmasını sağlamaktan geçiyor.
Kullanıcı deneyimi koreografisinin 5 prensibi
– Geri Bildirim
Geri bildirimler, kullanıcının aksiyonlarının bir sonucunun başarılı ya da başarısız olduğunu, “neden?” sorusuna yanıt vererek görselleştirir. Genelikle gerçekleşen aksiyonun doğru olup olmadığını, bir şeylerin yüklendiğini, bir deneyimin ilerleme kaydettiğini ya da bir seçimin gerçekleştiği bildirir. Geri bildirimler, kullanıcılarda güven duygusu yaratmanın yanı sıra, kullanıcıların tatmin edici ve lezzetli bir deneyim yaşamasına olanak verir. Bir şeyler yaptığınızda, arabirimin tepki verdiğini hissetmek her zaman tatmin edicidir.
Disney’den geri bildirimler konusunda öğrenebileceğimiz şey ise abartı olmalı. Arabirimin sunacağı tepkimelerin, kullanıcı tarafından kısa süre içerisinde anlaşılmasını mümkün kılmak için, görme duyusuna değil hissetmeye odaklanmak doğru bir tercih olabilir.
Gelin bazı geri bildirim örneklerine göz atalım:
iOs’ta hatalı şifre girilmesi durumunda titreme efekti. Dots: Birçok elementin aynı anda hareket etmesi.Yahoo News: Her daire ardışık olarak tek tek dolar, sayaç güncellenir ve süreç tamamlanır. Beats: Her müzik türü tıklandığında organik ve akışkan bir tepki verir. İlerleme göstergesi ise güncellenir.
– İleri Besleme
İpucu vermek olarak ele alınabilir. Kullanıcıları, bir deneyim süresince gerekli olduğu durumlarda yönlendirerek, onlar için tasarladığınız akış içerisinde adım adım ilerlemesini sağlayabilirsiniz. Kullanıcılar böylece onlardan beklenen bir sonraki aksiyonu kolayca anlar ve hızlıca harekete geçer. Bu tarz unsurları çoğu zaman fark etmeyiz. Bu deneyimi başarıyla yaşayan bir kullanıcı, bu süreçte kendisine nelerin yardımcı olduğunu hatırlayamayabilir bile.
Disney’in Beklenti Yaratma prensibi, çok benzer bir amaç için yaratılmıştır: Kullanıcıyı bir sonraki süreçte nelerin beklediği hakkında ipucu vermek.
Clear: Arabirimi aşağı doğru çektiğinizde yeni bir liste öğesi yaratabileceğinizi gösteren ipucu. Moldiv: Ana ekranın arkasındaki kontrol elementlerinin varlığını haber vermenin akıllı bir yolu.Yummly: Daha önce beyaz bir zemin imajı olarak kullanılan alan bir giriş alanına dönüşüyor. Snapchat: Kullanıcı arabirimi çektiğinde, renk değişimi arka planda birşeylerin gerçekleşmekte olduğunu vurguluyor.
– Uzay/Mekan Farkındalığı
Uzay/mekan farkındalığı, kullanıcıların arabirimi oluşturan alanı algılamasını ve görsel elementler arasındaki bağlantıları açıkça tanımlayabilmesini sağlar. Şöyle bir düşünecek olursak, yaratacağımız dijital arabirimin alabileceği sınırsız şekil vardır. Fakat bu ortamı oluştururken, belirli bir mantığa bağlı kalmak, özellikle mobil cihazlar gibi küçük görüntülenme alanlarında, kullanıcılarda farkındalık oluşturabilmek açısından en önemli etkenlerden biridir. Kullanıcıların, etkileşime geçtikleri bu alanı, başka bir deyişle alansal düzeni kolayca ve hızlıca algılayabilmeleri ve anlayabilmeleri gerekir.
Disney’in Sahneleme prensibi bu konuda bize çok şey öğretiyor.
Calendar: Haftanın günleri yan yana dizilerek kullanıcıya aralarında geçiş yapmak konusunda kolaylık sağlıyor. Stellar: Bir hikaye anlatma uygulaması olan Stellar, görsel temasını sayfa geçişleriyle bir ileri seviyeye taşıyor.VSCO: Kontrol elementlerini taşıyan panel, bir alet çantasının çekmecesini taklit ederek, aşağıdan yukarı çekilebiliyor. Nike Making: Kategorilere tam ekran yaklaşabiliyoruz, yukarı iterek ise alt kategorileri görüntüleyebiliyoruz.
– Odaklanma
Odaklanmayı sağlayan öğeler, kullanıcıların dikkatini çekerek, onlara değişken durumlar hakkında bilgi verir ve rehberlik eder. Bunu hiyerarşik geçiş hareketleri olarak da tanımlayabiliriz. Amacına bağlı olacak şekilde, kullanıcının dikkat etmesini istediğimiz elemente vurgu yapmamızı ve kullanıcının dikkatini çekmemizi sağlar. Bunu sağlayabilmek için çok sayıda element ya da katman bir arada çalışabilir. Bazen sadece ön plandaki elementi değil, arka plandaki elementi değerlendirerek kullanıcının ön plandaki elemente kolay odaklanmasını sağlayabiliriz. Bu tarz geçişler her zaman değil, sadece gerekli olduğunda kullanılarak değerlendirilebilir. Odaklanma, arabirimdeki her elementin açıkça kavranabilmesini sağlar.
Disney’in Berraklık diye bir prensibi olmasa da, gelin biz 13. prensip olarak ekleyelim 🙂
Pinterest: Kontrol elementleri, sadece ihtiyaç duyulduğunda ortaya çıkıyor. Paper Bildirimleri: Çok sayıda animasyon katmanı bir arada çalışıyor.Peek: Seçim ekranları tüm arabirimi kaplayarak kullanıcının odaklanmasını kolaylaştırıyor. Yahhoo Weather: Hareketli elementler kullanıcının ilgisini kolayca çekiyor.
– Markanın Ses Tonu
Bu prensip, metinsel içerikleri oluştururken ele aldığımız yaklaşımın aynısıdır. Bir marka için “Bizimle konuşsa ne söylerdi?” diye sorduğumuzda şunu da sormalıyız: “Eğer hareket etse nasıl hissettirirdi?” Kaprisli mi? Hızlı ve güçlü mü? Markanın ses tonunu görselleştirmek, doğru uygulandığında kullanıcılarınızın içlerinden “şöyle hareket ettiği gözümün önüne geldi” demesini sağlayabilir.
Kullandığınız uygulamaları, ziyaret ettiğiniz web sitelerini ve bunlardan hangilerini kullanmaya devam ettiğinizi düşünün. Aynı şeyleri yapan onlarca farklı uygulama ya da site olduğuna ve hepsinin de iyi bir kullanıcı deneyimi sunduğuna eminiz. Ama kullanıcının bundan daha fazlasını beklediği de bir gerçek. Kullanımın zevk vermesi, bazı şeyleri yapmamızı mümkün kılması ve bize bir fayda sunması bu farkı yaratan önemli etkenlerdir. Kullandıklarınız, iyi bir kullanıcı deneyiminden daha fazlasına sahipler ve duygusal açıdan çekiciler.
Disney’in Cazibe prensibi, referans olarak alacağımız son prensip. En büyülü etkiye sahip olan ve tasarım aşamasında bizi en zor süreçlerden birine sokan yaklaşım.
Snapchat: Arabirimde karşımıza çıkan hayaletler o kadar ikonik ki, kullanıcılar ileride başka neler yapacağını merak eder olmuş durumda. Flickr: Sade, ince ve akıllıca. Bir kullanıcının profilini yenilediğinizde, markanın logosunu oluşturan pembe ve mavi noktalar birbirinin etrafında dönmeye başlıyor.Nike+: Uygulamanın bütün ekranları koşma temasına bağlı kalmış. Zappos: Kullanıcılar easter egg’leri (sürpriz deneyimler) bulmaya bayılıyor.
Bu 5 prensip, kullanıcılarınızı cezbetmenizi sağlıyor ve kullanıcıların hikayenizle nasıl etkileşime geçeceklerini tanımlıyor. Ne üretiyor olursak olalım – bir film, bir uygulama, bir web sitesi ya da bir kitap – hedeflerimiz aslında aynı: deneyimi oluşturan her elementin sahneye girişini, sahnedeki performansını ve sahneden çıkışını tasarlamak. Tasarladığınız arabirim ise, çok daha büyük bir hikayeye, bir pencereden bakmaktan farklı değil.
