Sıkıcı Uygulamalar İçin Duygusal Arayüzler Nasıl Tasarlanır

Büyük sarı bir tüpün arkasında kaybolan damlayan birler ve sıfırlar çizgisi var. Pençeli bir pençe tarayıcımın araç çubuğunu işaret etmeye başladığında tüpten bir ayı fırlıyor ve "Ayı şükretmeye başla!" diyen bir başlık beliriyor.

Awwing ve oohing arasında, neye göz atmak istediğimi unutuyorum.

VPN hizmeti gibi ürünler nadiren sevgi ya da başka bir duygu uyandırır. Bu onların işi değil, yapmak için yaratıldıkları şey değil. Ancak TunnelBear yaptığı için, onu diğer VPN'lere tercih ediyorum ve arkadaşlarıma rutine kapılırken biraz gülebilmeleri için tavsiye ediyorum.

İnsanlar can sıkıntısına uzun süre dayanamazlar, bu yüzden heyecan verici olmayan, tekrarlayan görevler için üretilmiş ürünler sıklıkla terk edilir ve bilgisayarlarda ve telefonlarda toz toplar. Ancak psikologlara göre can sıkıntısı, yalnızca uyarılma eksikliği, tatmin edici aktivite için yerine getirilmemiş arzudur. Peki onlara bu uyarımı vermek için arayüzü kullanırsak ne olur?

Burada MacPaw'da, uyanık saatlerini yinelenen bulucular ve şifreleme uygulamaları gibi pek de seksi olmayan şeyler tasarlayarak geçiren ürün tasarımcılarıyla oturdum ve daha duygusal kullanıcı arayüzlerinin beş sırrını paylaştılar: oyunlaştırma, mizah, animasyon, illüstrasyon ve maskotlar.

İnsanların oynadıkları oyunlar

Kullanıcı arayüzlerinde oyunlaştırmanın kullanımı konusunda bazı tartışmalar sürüyor: Örneğin 24 deneysel çalışma, oyunun ne kadar etkili olduğuna dair farklı sonuçlara ulaştı. Ancak yine de etkililik, o parlak başarı rozetlerini tasarlayarak neyi başarmaya çalıştığınıza bağlıdır.

Buradaki Akar Sumset de dahil olmak üzere birçok ürün yaratıcısı için oyunlaştırmanın amacı, kullanıcıların kendi başlarına eğlenmesine izin vermek değil - söz konusu eğlence yoluyla onları belirli davranışlara nazikçe itmektir. Başarılar, sıralamalar, liderlik tabloları, temel insan ihtiyacı olan saygıdan yararlanır, rekabeti tetikler ve sözde kullanıcıları, ilerleme kaydetmek, uygulamaya geri dönmeye devam etmek veya sosyal medyada paylaşmak gibi istediğiniz şeyi yapmaya teşvik eder.

Oyunlaştırma bunda başarılı olabilir veya başarısız olabilir, ancak kesinlikle başardığı şey duygusal bir tepkidir. Beynimiz, mutluluğun ana nörokimyasallarından biri olan dopamin seviyelerini kontrol eden hücrelerle doludur. Keyifli bir şey olduğunda, bu nöronlar yanar ve kana bir dopamin salınımını tetikler, ancak daha da iyisi, bu hoş olay düzenliyse ve tahmin edilebilirse, yanar ve daha gerçekleşmeden önce dopamini serbest bırakırlar. Bu, arayüzünüz için ne anlama geliyor? Bir sonraki başarı gibi keyifli bir şey beklemek, kullanıcılara ürünle ilgili deneyimleri boyunca küçük mutluluklar verecektir.

Kullanıcı Arayüzünde Oyunlaştırma: Gemini 2 ve Duolingo

Mac için yinelenen bulucumuzun yeni versiyonu olan Gemini 2'yi tasarlarken elimizde ciddi bir sorun vardı. Gigabaytlarca dosyayı incelemek can sıkıcı bir şekilde sıkıcıydı ve bazı kullanıcılar, bitmeden bıraktıklarından şikayet etti. Başarılar sistemiyle elde etmeye çalıştığımız şey, sıkıcı işlerin tek iyi tarafı olan, yapılacaklar listesinde üzeri çizili bir madde olduğu hissini yoğunlaştırmak. Farkında olmadan uygulamanın adıyla ayarlanan ve arayüzde kullanılan uzay teması oyunlaştırma için mükemmeldi. Seyircimiz Star Wars ve Star Trek'te büyüdü, bu yüzden bilimkurgudan ilham alan rütbeler onlarla evlerini vuracaktı.

Yayınlandığı günlerde, kullanıcılardan son başarının kilidini açacak Paskalya Yumurtası hakkında ipuçları isteyen tweetler almaya başladık. Piyasaya sürüldükten bir yıl sonra Gemini 2, "netlik ve duygu" sergileyen bir tasarım için Red Dot Ödülü'nü aldı. Bu nedenle, başarı sistemimizin ne kadar motive edici olduğunu ölçmek zor olsa da, kesinlikle insanları soğuk bırakmadı.

Bunu doğru yapan başka bir ürün - ve şimdiye kadar gördüğüm en oyunlaştırılmış arayüze sahip - dil öğrenmek için çevrimiçi bir hizmet ve mobil uygulama olan Duolingo. Yabancı bir dili sıfırdan öğrenmeye çalışmak göz korkutucudur, özellikle de sadece siz ve dizüstü bilgisayarınız ise, bir öğretmene sahip olmanın verdiği güvence olmadan. İnsanların dil çabalarına olan ilgilerini ne kadar çabuk kaybettikleri göz önüne alındığında (buradaki deneyime dayanarak), Duolingo'nun sizi bağımlı kılmak için kendi yolundan gitmesi gerekecekti. Ve öyle.

5 dakikalık hızlı bir dersi tamamladığınızda 10 puan kazanırsınız. 30 gün üst üste ders mi alıyorsun? Bir başarı elde edin. Tek bir yazım hatası olmadan 20 ders tamamlansın mı? Diğerinin kilidini aç. Attığınız her bebek adımı için duyularınız, o tatlı, tatlı dopamin salınımını tetikleyen muzaffer sesler ve renkli grafiklerle ödüllendirilir. Sonunda, Duolingo'yu başarı ve gurur duygusuyla - geri dönmek isteyeceğiniz türden bir duyguyla - ilişkilendirmeye başlarsınız.

Oyunlaştırmanın derinliklerine dalmak istiyorsanız, Gabe Zichermann'ın “Tasarımla Oyunlaştırma: Web ve Mobil Uygulamalarda Oyun Mekaniğinin Uygulanması” kitabı başlamak için harika bir yoldur.

Şaka yapıyor olmalısın

Victor Yocco, unutulmaz deneyimler yaratmak, kullanıcılarla bağlantı kurmak ve çalışmanızı öne çıkarmak için web tasarımında mizahı bir araç olarak kullanmak için sağlam bir örnek oluşturdu. Ancak şakaların en büyük gücü duygusal olmalarıdır. Mizahın doğasını hala tam olarak anlamamış olsak da, açık olan bir şey var: İnsanları mutlu ediyor. Beyin görüntüleme araştırmalarına göre, komik karikatürler, yeme, müzik, seks ve ruh halini değiştiren ilaçlara tepki veren aynı ağ olan limbik sistemdeki ödül ağını harekete geçiriyor. Başka bir deyişle, iyi bir şaka insanlara bir tür duygusal yüksek verir.

Arayüzünüze böyle bir tepki ister miydiniz? Elbette. Ancak işin zor yanı, mizahın yalnızca öznel olması değil, buna tepki verme şeklimiz de büyük ölçüde bağlama bağlı. Bir şey, başlatma ekranında bir kelime oyunu yapmaktır; tamamen farklı bir hata mesajında ​​dolaşmak. Ve tüm insanlar şu ya da bu biçimde mizahtan hoşlanırken, hedef kitlenizi bilmek çok önemlidir: Neleri komik bulduklarını ve nelerin uygunsuz, kaba veya kötü zamanlanmış görünebileceğini. Gerçek hayattaki çılgın şakalardan çok da farklı değil.

Kullanıcı Arayüzündeki Mizah: Otantik Hava Durumu ve Gevşek

Mizahın kullanımını - ve sadece tamamlayıcı bir komik rahatlama olarak değil, benzersiz bir satış teklifi olarak - çivileyen bir uygulama Authentic Weather'dir. Hava durumu uygulamaları faydacı ürünlerin en iyi örneğidir: İnsanların bilgi almak için kullandıkları şeylerdir, nokta. Ancak Authentic Weather ile bundan çok daha fazlasını elde edersiniz. Hava durumu ne olursa olsun, “Bu donuyor”, “Kışın eve git” ve benim kişisel favorim “Her şey yolunda. Daha fazla bilgi için dışarıya bakın.”

Otantik Hava Durumu'nu kullandığınızda olan şey, onu yalnızca hava durumu tahmini için açmamanızdır - bir sonraki adımda ne olacağını görmek istersiniz ve hava durumunu kontrol etmek gibi rutin bir görev, sabahları sabırsızlıkla beklenecek bir şey haline gelir. Şimdi, uygulamanın f-kelimeler ve küçümsemelerle dolu karamsar yorumu, muhtemelen anneme daha az eğlenceli görünebilir. Ama huysuz bin yıllık biri olarak, bunu komik buluyorum, bu da kitlenizi tanıyorsanız mizahın işe yaradığını kanıtlıyor.

Eğlenceyi iyi değerlendiren bir diğer arayüz de Slack's. İnsanların işle ilgili acil durumlarla ilişkilendirdiği bir uygulama için Slack, özellikle tek satırlık olması nedeniyle daha insancıl bir deneyim yaratan sağlam bir iş çıkarıyor. Yükleme ekranlarından nihayet tüm sohbetlerinize yetiştiğiniz anlara kadar, geldiğini görmediğinizde bir şakayı kırar.

Bu kadar çeşitli bir demografiyle mizah çok başarılı, bu yüzden Slack aptal kelime oyunları ve iyi niyetli şakalarla güvenli bir şekilde oynuyor - sizi tam olarak yere yuvarlanmayan ancak canınızı sıkmayan veya gücendirmeyen şakalar. En iyi senaryoda, kullanıcı kıkırdayacak ve ekran görüntüsünü kanallarından birinde paylaşacaktır; en kötü senaryoda, gözlerini devirecekler.

Mizah hakkında daha fazlası: Louis R. Franzini'den “Şaka Yapıyorum: Mizahı Etkili Bir Şekilde Kullanmak”.

Dünyayı Harekete Geçirin

Neredeyse her arayüz bir animasyon biçimi kullanır. Bir durumdan diğerine geçişin doğal yolu budur. Ancak kullanıcı arayüzündeki animasyonlar, bir durum değişikliğini belirtmekten çok daha fazla amaca hizmet edebilir - dikkatinizi yönlendirmenize ve neler olup bittiğini statik görsellerden veya kopyalardan daha iyi iletmenize yardımcı olabilirler. Hareket, hem görsel hem de kinestetik öğrenmeyi teşvik eder, bu da kullanıcıların odaklanma ve nesneyi nasıl kullanacaklarını anlama olasılıklarının daha yüksek olduğu anlamına gelir.

Bunların hepsi tasarımınıza animasyonu dahil etmek için iyi nedenler, ancak neden tam olarak duygu uyandırıyor? Encrypto ve Gemini Photos uygulamalarımız üzerinde çalışan Simon Grozyan, bunun nedeninin fiziksel dünyada animasyonlu şeyleri canlı olarak yorumlamamız olduğuna inanıyor:

“Her şeyi hareket halinde görmeye alışkınız. Etrafımızdaki her şey ışık nedeniyle ya hareket ediyor ya da görünüşünü değiştiriyor. Statik eşittir ölü.”

Hareket eden bir nesnenin ilişkilendirilebilir, gerçeğe yakın kalitesine ek olarak, animasyon, bize aynı derecede zevkli ama beklenen bir şeyden çok daha fazla zevk veren hoş ve beklenmedik bir şeyin gücüne sahiptir. Bu nedenle, geçişlerden daha az alışılmış noktalarda kullanarak, ürününüzü kullanmayı eğlenceli kılan o gıpta edilen uyarıyı elde edebilirsiniz.

Kullanıcı Arayüzünde Animasyon: Şifreleme ve Shazam

Encrypto, dosyalarınızı güvenli bir şekilde birine gönderebilmeniz için şifreleyen ve şifresini çözen küçük bir Mac uygulamasıdır. Veri güvenliği ve gizliliğine önem verenler için vazgeçilmez bir araçtır, ancak kendinizi bağlı hissedeceğiniz türden bir araç değildir. Yine de, Encrypto, dosyanız üzerinde kayan ve onu yeni bir güvenli varlığa dönüştüren Matrix tarzı animasyon çubuğu sayesinde tasarım açısından açık ara en sevdiğim MacPaw uygulamasıdır. Şifreleme hayat buluyor; artık bilgisayarınızda sıkıcı bir süreç değil - dijital sihri büyüleyen bir şey.

Animasyon, başka bir harika kullanıcı arayüzünün kalbinde yer alır: muhtemelen telefonunuzda bulunan bir uygulama olan Shazam'ınki. Ne çaldığını bulmak için Shazam'ı kullandığınızda, dokunduğunuz düğme, dışa ve içe doğru eşmerkezli daireler göndermeye başlar. Titreyen bir hoparlöre olan bu benzerlik, sanki en sevdiğiniz albümü güçlü bir ses sisteminde çalıyormuşsunuz gibi, arayüzü neredeyse elle tutulur, fiziksel hale getiriyor.

Animasyon hakkında daha fazlası: “İşlevsel Animasyon, Kullanıcı Deneyimini Geliştirmeye Nasıl Yardımcı Oluyor”.

Sanat Heryerde

Blair Culbreth'in savunduğu gibi, cilalı artık arayüzler için yeterli değil. Şık, profesyonel tasarım beklenir, ancak kullanıcıların gülümsediği ve arkadaşlarına ilettiği kişiselleştirilmiş, insancıl ayrıntılardır. Özel sanat bu detay olabilir.

Genel görüntülerin aksine, illüstrasyon duygusaldır, çünkü anlamdan daha fazlasını iletir. Her insanın çocukken izlediği çizgi filmlerle olumlu çağrışımlar taşır, olayları daha eğlenceli, yaratıcı bir şekilde gösterir ve en önemlisi sanatçının kişiliğinden bir dokunuş içerir.

Ürün tasarımcılarımızdan biri olan Max Kukurudziak, "Bir sanatçı bir illüstrasyon oluşturduğunda, her zaman kişisel deneyimlerinden, bağlamlarından ve hikayelerinden bazılarını buna katarlar" diyor. Teori doğru geliyor - bir insan dokunuşunun duyguları harekete geçirmesi daha olası.

Kullanıcı Arayüzündeki İllüstrasyon: İkizler Fotoğrafları ve Google Takvim

En yeni ürünlerimizden biri olan Gemini Photos, gereksiz fotoğrafları temizlemenize yardımcı olan bir iPhone uygulamasıdır. Masaüstü için Gemini 2'ye çok benzer, kullanıcı için biraz sıkıcı inceleme gerektirir, bu nedenle kullanışlı ve güzel bir kullanıcı arayüzü ile bile, dikkatlerini tutmakta ve genellikle kendilerini iyi hissetmelerini sağlamakta zorlanabiliriz.

Önceki uygulamalarımızın çoğunda olduğu gibi, arayüzü canlandırmak için animasyonlar ve sesler kullandık, ancak özel sanatlar deneyimin en önemli noktası haline geldi. Yukarıda belirtildiği gibi, şaşırtıcı ve zevkli şeylerin kanımıza mutluluk kimyasalının akışına neden olduğu bilimsel olarak kanıtlanmıştır, bu nedenle beklenmedik noktalarda ilginç çizimler kullanarak boş bir ekranı doldurmakla kalmadık - aksi halde biraz eğlence ekledik. monoton aktivite.

İllüstrasyonun bir ürünü nasıl daha sevimli hale getirebileceğine dair bir başka örnek de Google Takvim'dir. Yakın zamana kadar web sürümü ile iOS uygulaması arasında çarpıcı bir fark vardı. İlki bir elektronik tablonun çekiciliğine sahipken, ikincisi anında kalbimi öldürücü bir ayrıntıyla kazandı. Birçok etkinlik türü için, Google Takvim, etkinlik başlıklarından aldığı anahtar kelimelere dayalı olarak, bunları gösteren sanatta kayar. Bu şekilde, tek yaptığınız spor salonu ve dişçi randevusu olsa bile, haftalık planlarınız çok daha heyecanlı görünüyor.

Ama bu en iyi şey bile değil. Ne zaman yeni bir etkinlik oluştursam, gizlice Google Takvim'in bunun için bir sanat eseri olmasını ve gerçekleştiğinde gerçekten memnun hissetmesini umduğumu fark ettim. Aynen böyle, takvim kullanmak bir zorunluluk olmaktan çıktı ve olumlu bir duygu kaynağı oldu. Ve görünüşe göre, illüstrasyon deneyi yalnız benim için işe yaramadı, çünkü Google yakın zamanda takvimlerinin web sürümünü aynı sanatla piyasaya sürdü.

İllüstrasyon hakkında daha fazlası: Greg Houston'dan “Çalışan İllüstrasyon: Sanatsal ve Ticari Başarı İçin Profesyonel Teknikler”.

ne karakter

Ürünleri taklit eden sevimli karakterler yıllardır web tasarımında ve pazarlamasında kullanılıyor (Ronald McDonald ve Michelin Man'i düşünün). Arayüzlerde - pek değil. UI'deki maskotlar, özellikle kullanıcının dikkatini önemli bir eylemden uzaklaştırıyorsa veya görüşü engelliyorsa, müdahaleci ve rahatsız edici olarak algılanabilir. Yanlış giden bir maskotun kötü şöhretli bir örneği Microsoft'un Clippy'sidir: korku ve tiksintiden başka bir şey uyandırmadı (elbette duygulardır, ama aradığınız türden değil).

Aynı zamanda araştırmalar, insanların sadece geometrik figürler olsalar bile şeyleri kolayca kişileştirdiğini gösteriyor. Gerçekçi yaratıklarla ilişki kurmak, davranışlarını anlamak ve genellikle bir şekilde hissetmek daha kolaydır. Üstelik, animasyonlu bir karaktere bir kişilik atfetmek daha kolaydır, böylece ürününüzün özelliklerini o karakter aracılığıyla yayınlayabilirsiniz - onu oyuncu ve aptal, istekli ve yardımsever veya neye ihtiyacınız varsa onu yapın. Bu kadar kullanılmayan potansiyel ile maskotlar, duygusal olmayan ürünler için mükemmeldir.

İşin püf noktası zamanlamadır.

Clippy çok iğrençti çünkü davetsiz görünüyordu, tamamen alakasız görevleri kesintiye uğrattı ve genellikle yoldan çıktı. Ancak maskot nispeten boş bir anda ortaya çıkarsa - örneğin, kullanıcı bir görevi yeni tamamladıysa - sevimli işini yapacaktır.

Kullanıcı Arayüzündeki Maskotlar: RememBear ve Yelp

TunnelBear Inc., yakın zamanda beta, bir düğme kadar sevimli olan başka bir yardımcı program başlattı (punto amaçlanmadı). RememBear bir şifre yöneticisidir ve şifrelerin şakaya gelmemesi gerekir. Ancak RememBear'daki ayı çizgi filmlerinin parlaklığı, yeni bir giriş oluşturmak gibi ciddi, önemli şeyler yaptığınızda hiçbir yerde görünmemeleridir. Bunun yerine, uygulamaya kaydolmanın birinci aşamasını tamamladığınızda ve henüz ikinci aşamaya geçmediğinizde, ilk şifrenizi kaydetmeden bir ayı kucaklama alırsınız. Maskotu bu noktaya yerleştiren RememBear, yoluma çıkmaktan kaçındı ama hiç beklemediğim bir anda beni gülümsetti.

RememBear gibi, restoran incelemeleri için yaygın olarak bilinen bir uygulama olan Yelp, maskotları için mükemmel bir zamanlamaya sahiptir. Komik hamster ilk olarak iOS uygulamasının ayarlarının altında belirdi, böylece kullanıcı onu bir Paskalya yumurtası gibi keşfedecekti.

Yelp'in Ürün Tasarım müdürü Yoni De Beule, “Yelp'te her zaman ürünümüzü ve markamızı eğlenceli ve keyifli hissettirmeye çalışıyoruz” diyor. “Eğlenceli afiş tasarımlarımızdan ve eğlenceli sürüm notlarımızdan dahili hackathon projelerimize ve Yelp Elite partilerine kadar her şeyde Yelp'in kişiliğini yansıtıyoruz. iPhone ayarları sayfamızın eğlence bölümünde ciddi anlamda eksik olduğunu fark edince kolları sıvayıp düzeltmeye karar verdik.”

Ekip, Android sürümü için bir velociraptor ve web için bir köpek tasarladığından, iOS uygulamasındaki hamster daha sonra şirket aldı. Bu nedenle, Yelp'i ne zaman ve nerede kullanırsanız kullanın, keyifli karakterin başka bir versiyonunu görebilmek için neredeyse önerilerin bitmesini istersiniz.

Kendi maskotunuzu nasıl oluşturacağınızı öğrenmek istiyorsanız, Şirine (diğer adıyla 'Miss ChatZ') tarafından Envato Tuts+'da güzel bir eğitim var.

Kapatmak için…

Tüm ürünler, oyunların veya sosyal medya uygulamalarının doğası gereği eğlenceli değildir, ancak yardımcı programların bile yalnızca faydacı olması gerekmez. Tekrarlayan görevlerle uğraşan uygulamalar, genellikle kullanıcıları elde tutmakta zorlanır: insanlar sıkıldıkları için onları terk eder ve can sıkıntısı sadece uyarılma eksikliğidir. Mizah, hareket, benzersiz sanat, oyunun unsurları ve ilişkilendirilebilir karakterler gibi olumlu uyaranları kullanarak, kullanıcıların daha farklı hissetmelerini sağlayabiliriz - daha heyecanlı, daha az dikkati dağılmış ve nihayetinde daha mutlu.

Daha fazla okuma

• "Duygusal Tasarım: Neden Gündelik Şeyleri Seviyoruz (Ya da Nefret Ediyoruz)" Don Norman
• Baştan Çıkarıcı Etkileşim Tasarımı: Eğlenceli, Eğlenceli ve Etkili Kullanıcı Deneyimleri Yaratmak (Voices That Matter), Stephen P. Anderson