Anime vs. Marvel/DC: Duygu Akışıyla Dijital Ürünler Tasarlamak
Twitter'da paylaş, LinkedIn
Tasarım, pikseller ve desenler kadar tempo ve duygularla da ilgilidir. Alan Cohen, Akışta Duygu ve Çatışmada Duygu'yu inceleyerek Dan Da Dan gibi animelerin ve James Gunn'ın Superman'i gibi süper kahraman filmlerinin duygusal değişimleri nasıl yönettiğini ve bu fikirleri ürün tasarımı için pratik modellere dönüştürdüğünü gösteriyor. Tasarım, pikseller ve desenler kadar tempo ve duygularla da ilgilidir. Alan Cohen, Akışta Duygu ve Çatışmada Duygu'yu inceleyerek Dan Da Dan gibi animelerin ve James Gunn'ın Superman'i gibi süper kahraman filmlerinin duygusal değişimleri nasıl yönettiğini ve bu fikirleri ürün tasarımı için pratik modellere dönüştürdüğünü gösteriyor.
Tasarım yalnızca piksellerden ve desenlerden ibaret değildir. Bu aynı zamanda ilerleme hızı ve duygulardır. Bazı ürünler belirsizlik, rahatlama, güven ve sükunet konusunda bizi sürüklemeden rehberlik ettiğinden sinematik bir his verir. Bu, Akıştaki Duygudur. Bazıları ise yanlış yere yapılan bir şakayla, sürpriz bir pop-up'la ya da ürkek bir geçişle kendi anlarının altını çiziyor. Bu Çatışmadaki Duygudur.
Sonuç ve Değerlendirme
Bunlar yalnızca UX'e yönelik fikirler değildir. Bunları eğlencenin her yerinde görebilirsiniz. Ve farkı hissetmenin en açık yolu, animelerin duygusal değişimleri nasıl ele aldığıyla Marvel ve DC filmlerinin nasıl tökezlediğini karşılaştırmaktır. İki konsepti tanımlamak için biri Dan da Dan'den (Netflix'teki anime dizisi) ve diğeri James Gunn'ın Superman filminden olmak üzere iki özel örnek kullanacağız ve ardından bunları hemen uygulayabileceğiniz pratik ürün tasarım modellerine dönüştüreceğiz.
Sistem Güvenliği
Not: Uygulamalar, SaaS ve web dahil olmak üzere dijital ürünlere odaklanacağız.
Akıştaki Duygu (Anime: Dan da Dan)
Gelecekte Ne Bekleniyor?
Dan da Dan'de ton aralığı vahşi, korku, komedi ve şefkattir, ancak yine de akıcıdır.
Örnek: Bir yayda, kahramanlar ana karakterlerden birinin (evet, gerçekten) "altın cinsel organını" içeren tuhaf, komik bir arayış içindeyken, diğerinde çocuğu kaçırılan bir annenin yürek burkan hikayesinin içine çekiliyoruz. Kağıt üzerinde bu vardiya bir araba kazası olmalı. Ekranda tutarlı ve duygusal açıdan okunaklı.
Teknik Analiz
Bu neden ekranda çalışıyor?
Uzmanların Görüşleri
Bahislerin sürekliliği.
Önemli Gelişmeler
Bir şaka yapıldığında bile karakterlerin hedefleri ve tehlikeleri bozulmadan kalır. Mizah, mini bir çözümden sonra gerilimi azaltır; tehdidi inkar etmiyor.
Bir şaka yapıldığında bile karakterlerin hedefleri ve tehlikeleri bozulmadan kalır. Mizah, mini bir çözümden sonra gerilimi azaltır; tehdidi inkar etmiyor. Ruh hali ipuçlarını temizleyin.
Nasıl Önlem Alınmalı?
Müzik, çerçeveleme, ilerleme hızı ve karakter tepkileri bir sonraki duyguyu yansıtır. Vardiya için hazırlandınız, bu yüzden çekilmek yerine onu sürüyorsunuz.
Müzik, çerçeveleme, ilerleme hızı ve karakter tepkileri bir sonraki duyguyu yansıtır. Vardiya için hazırlandınız, bu yüzden çekilmek yerine onu sürüyorsunuz. Duygusal bir çapa.
Detaylar ve Etkileri
İlişkiler Kuzey Yıldızı olmaya devam ediyor, böylece ton hareket ettiğinde sahnenin kalbi kaybolmuyor.
Bu, UX'e nasıl çevrilir?
İyi ürünler de aynısını yapar: hazırlanın, geçiş yapın, çözümleyin, böylece kullanıcılar duygusal ton değiştikçe kendilerini kaptırır.
Dan da Dan: mizahtan empatiye, kusursuz bir şekilde. (Büyük önizleme)
Çatışma İçinde Duygu (Marvel/DC: James Gunn'ın Süpermen'i)
Lois ve Clark içten, samimi bir sohbet, yavaş, insani bir an yaşıyor, bu sırada arka planda bir şaka oynanıyor (bir canavarın dev bir beysbol sopasıyla dövülmesi). Sahne sizden gerçek bir şey hissetmenizi istediğinde şaka, odağı çalar. Sonuç, duyguyu serbest bırakmak yerine onu delen bir ton çatışmasıdır.
Bu neden ekranda başarısız oluyor?
Burada olup bitenler doğrudan bilişsel yük teorisiyle eşleşiyor. Bir sahne (veya arayüz) kullanıcılardan aynı anda iki rakip duygusal sinyali işlemelerini istediğinde, görevle veya anın kendisiyle hiçbir ilgisi olmayan, konu dışı bilişsel yük, zihinsel çaba ortaya çıkar. Duygusal tempoya odaklanmak yerine dikkat, birbirini çözmeyen sinyaller arasında bölünür. Ürünlerde mizah, promosyonlar veya beklenmedik kullanıcı arayüzü değişiklikleri riskli anlara müdahale ettiğinde olan şey budur: Kullanıcılar harekete geçmeye çalışırken aynı zamanda üslup ve niyeti de yorumlamak zorunda kalır, bu da kavramayı yavaşlatır ve stresi artırır.
Burada olup bitenler doğrudan bilişsel yük teorisiyle eşleşiyor. Bir sahne (veya arayüz) kullanıcılardan aynı anda iki rakip duygusal sinyali işlemelerini istediğinde, görevle veya anın kendisiyle hiçbir ilgisi olmayan, konu dışı bilişsel yük, zihinsel çaba ortaya çıkar. Duygusal tempoya odaklanmak yerine dikkat, birbirini çözmeyen sinyaller arasında bölünür. üretimde Mizah, promosyonlar veya beklenmeyen kullanıcı arayüzü değişiklikleri riskli anlara müdahale ettiğinde olan şey budur: Kullanıcılar, harekete geçmeye çalışırken aynı zamanda üslup ve niyeti de yorumlamak zorunda kalır, bu da kavramayı yavaşlatır ve stresi artırır. Rekabet aynı anda atıyor.
Şaka, ciddi bir ritmin doruk noktasıyla örtüşüyor; izleyici duygudan ziyade geçişe dikkat ediyor.
Şaka, ciddi bir ritmin doruk noktasıyla örtüşüyor; izleyici duygudan ziyade geçişe dikkat ediyor. Ton aktarımı yok.
Mizah gelmeden önce samimiyeti sağlayacak bir geçiş yok, bu yüzden o an çözülmek yerine altı çiziliyormuş gibi geliyor.
Bu, UX'e nasıl çevrilir?
Ürünlerde bu, onay öncesi konfeti sorunu, para akışındaki arsız hata veya kritik bir görevin tam ortasında ortaya çıkan promosyon yöntemidir. Bu aynı zamanda bilişsel yükü de artırıyor: Kullanıcılar bir sorunu çözmeye çalışırken mizahı işlemek zorunda kalıyor, bu da onları yavaşlatıyor ve stresi artırıyor.
Samimi sohbet, James Gunn'ın Superman filminde arka plan şakası yüzünden bozuldu. (Büyük önizleme)
Duygusal değişimler kazanılmış, telgraflanmış ve zamanlanmış gibi hissedilir, böylece önceki atımları çözerler. Daldırma tutar.
Canlı bir duygusal ritmi patlatan sarsıcı bir anahtar (veya sert kesim). Daldırma molaları.
Artık adını verdiğimize göre: bu UX'e nasıl bağlanıyor?
Duygular Ürünün Unutulmazlığını Nasıl Şekillendirir?
İnsanlar bir deneyimin ortalamasını hatırlamazlar; zirveleri ve sonları hatırlıyorlar. Akışınızın zirvesi hüsransa ya da sonunuz karmaşıksa, kalıcı olan da budur. Bu yüzden duygusal eğriyi bilerek tasarlayın.
Duygular üç katmanda yaşar (Don Norman'ın Duygusal Tasarımından) ve ürününüzün bunları sıraya koyması gerekir:
İçgüdüsel (bağırsak): İlk izlenim sinyalleri: görseller, hareket, dokunsal, ses.
Örnekler: Dengeli bir iskelet yükleyici, gergin bir topaçtan daha fazla sakinleştirir; hafif bir başarı zili/dokunsal dokunuş, kazanmanın bağırmadan gerçekleşmesini sağlar; tutarlı hareket hızı/yön, göze neyin değiştiğini gösterir.
İlk izlenim sinyalleri: görseller, hareket, dokunsal, ses. Örnekler: Dengeli bir iskelet yükleyici, gergin bir topaçtan daha fazla sakinleştirir; hafif bir başarı zili/dokunsal dokunuş, kazanmanın bağırmadan gerçekleşmesini sağlar; tutarlı hareket hızı/yön, göze neyin değiştiğini gösterir. Davranışsal (yapma): Görevimi sorunsuz bir şekilde tamamlayabilir miyim? Buradaki sürtünme stres anlamına gelir.
Örnekler: Tahmin edilebilir ilerleme sağlayan üç net ödeme adımı; ne olduğunu ve nasıl düzeltileceğini açıklayan hata durumları; form sonu patlamaları yerine satır içi doğrulama.
Görevimi sorunsuz bir şekilde tamamlayabilir miyim? Buradaki sürtünme stres anlamına gelir. Örnekler: Tahmin edilebilir ilerleme sağlayan üç net ödeme adımı; ne olduğunu ve nasıl düzeltileceğini açıklayan hata durumları; form sonu patlamaları yerine satır içi doğrulama. Yansıtıcı (anlam): Daha sonra kendime anlattığım hikaye, "Buna değer miydi? Buna güveniyor muyum?"
Örnekler: Düzenli bir toparlama ekranı ("Bitti. X'i Cuma gününe kadar alacaksınız.") kapanışı sağlar; küçük bir özet ("Bu yıl 18 € tasarruf ettiniz") havai fişekler olmadan gurur yaratır.
Mikro etkileşimler duygusal yapıştırıcıdır. Her birinin bir tetikleyicisi (Öde'ye dokunuyorum), kuralları (sistemin yaptığı), geri bildirimi (ilerleme ve net bir sonuç) ve döngüleri veya modları (kullanıcı tekrar denerse ne olur) var. Bunları doğru yaptığınızda geçişleriniz duyguları köprüler. Onları yanlış anlarsanız akışı bozarlar.
Beat sayfası: belirsizlik → netlik → beklenti → başarı → sakin. (Büyük önizleme)
Duygusal vuruş sayfası, Norman'ın deneyim katmanlarıyla net bir şekilde eşleşiyor:
Belirsizlik, kullanıcıların neler olduğunu anlamak için duyusal ipuçlarına (hareket, netlik, geri bildirim) güvendiği içgüdüsel ve erken davranışsal katmanlarda yaşar.
Kullanıcıların neler olduğunu anlamak için duyusal ipuçlarına (hareket, netlik, geri bildirim) güvendiği ilk katmanlarda yaşar. Netlik, sistemin amacının ve kullanıcının bir sonraki eyleminin yerine oturduğu an olan davranışsal katmanda sıkı bir şekilde yer alır.
Sistemin amacının ve kullanıcının bir sonraki eyleminin yerine oturduğu anda, katmanda sıkı bir şekilde yer alır. Beklenti, davranışsal (kullanıcı bir amacı olan bir şey yapıyor) ve yansıtıcının (kullanıcı zaten sonucu tahmin ediyor ve sonra ne olacağını hayal ediyor) bir karışımıdır.
(kullanıcı bir şeyi amacı doğrultusunda yapıyor) ve (kullanıcı zaten sonucu tahmin ediyor ve bundan sonra ne olacağını hayal ediyor) karışımıdır. Başarı, kullanıcının başarıyı, güveni ve deneyimin "doğru hissettirip hissettirmediğini" değerlendirdiği yansıtıcı bir zirvedir.
kullanıcının başarıyı, güveni ve deneyimin olup olmadığını değerlendirdiği bir alandır. "doğru hissettim." Sakinlik/Kapanış öncelikle yansıtıcıdır ve kullanıcıların etkileşimin anlamını tamamlamasına ve ürünün güvenilir ve geri dönmeye değer olup olmadığına karar vermesine yardımcı olur.
Gerçek ürünlerde işler ters gittiğinde bu sıra kaybolmaz. Hatalar, gecikme ve bozulmuş durumlar duygusal arkın istisnaları değildir; onlar onun bir parçasıdır. Anlatı merceğinden bakıldığında bu anlar, kahramanın yolculuğundaki engellerdir. İyi tasarlanmış bir iyileşme durumu, gerilemeyi kabul eder, ne olduğunu netleştirir ve yeni duygusal gürültü yaratmadan bir sonraki adıma rehberlik eder. Başarısızlık bir kopuş yerine bir darbe olarak ele alındığında duygusal akış stres altında bile korunabilir.
Kullanıcı Deneyimi Örnekleri: Akıştaki Duygu ve Çatışmadaki Duygu
Ödeme doğru yapıldı (Çizgili/Apple Pay stili): kısa adımlar, net ilerleme ve net bir başarı durumu (isteğe bağlı yumuşak dokunsallı bir onay işareti). Zirve (başarı) iner ve son, kapanışı (alınma veya bir sonraki adım) verir.
İki ekran: İncele ve Öde → Ödeme Başarılı. (Büyük önizleme)
Teslim alma durumu (araç çağırma uygulamaları, örneğin Uber, Free Now veya Bolt): aşamalı güncellemeler yönlendirmeyi korur ve kaygıyı azaltır ("Sürücü geliyor", "2 dakika uzakta", "Geldi"). Belirsizlik, her geçişi hazırlayan nazik hareketlerle netliğe dönüşür.
Uber uygulamasından teslim alma durumu. (Büyük önizleme)
Not: Burada belirli ürünlere isim vermiyoruz; onların arkasındaki çalışmaya saygı duyuyoruz. Bunun yerine duygusal çatışmalara neden olan kalıpları ve bunların tam olarak nasıl düzeltileceğini gösteriyoruz.
Ciddi anlarda şakalar.
Para/sağlık/güvenlik için arsız kopyalama hatası durumları. Kullanıcılar stres altında; mizah öfkeyi artırır.
Para/sağlık/güvenlik için arsız kopyalama hatası durumları. Kullanıcılar stres altında; mizah öfkeyi artırır. Karar öncesi kutlama.
Onay öncesinde konfeti, havai fişek veya yüksek sesler. Parti doruğa ara verir.
Onay öncesinde konfeti, havai fişek veya yüksek sesler. Parti doruğa ara verir. Sert durum atlayışları.
Görev ortasında sürpriz modeller/tanıtımlar, hazırlık gerektirmeden tam ekran devralmalar. Duygusal bir vuruş sırasında ani bir kesik gibi geliyor.
Ürün tasarımında Çatışmada Duygu örnekleri: yüksek riskli bir hatada şakacı bir ton, onaydan önce erken kutlama, ödeme sırasında sürpriz promosyonun devralınması. Üçü de duygusal arkı bozuyor ve kullanıcının güvenini sarsıyor. (Büyük önizleme)
Duygunun Akışta Olmasını Sağlamak İçin Ne Yapabilirsiniz?
İşte çoğaltabileceğiniz tam şablonu içeren bir Notion sayfası:
1. Önce Duygusal Ritim Sayfasını Yazın
Her temel akış (ilk katılım, ödeme, iyileşme) için adım başına duyguları haritalandırın: belirsizlik → netlik → beklenti → başarı → sakin. Her vuruşa kopya, hareket ve mikro etkileşimler ekleyin. (Duyguyu kim nereye taşıyor?)
2. Tonunuzu Görev Riskiyle Hizalayın
Bir ton matrisi oluşturun (risk düzeyi × durum). Yüksek riskli hatalarda sakin, sade ve çözüm odaklı olun. Eğlenceyi düşük riskli bağlamlara saklayın.
Yüksek riskli hata : "Kimliğinizi doğrulayamadık. Tekrar deneyin veya destek ekibiyle iletişime geçin."
: "Kimliğinizi doğrulayamadık. Tekrar deneyin veya destek ekibiyle iletişime geçin." Düşük riskli boş durum: "Henüz burada bir şey yok. Bir örnekle başlamak ister misiniz?"
Pek çok olgun ürünün sessizce duygusal çatışmaya sürüklendiği yer burasıdır. Zamanla ekipler niyetten ziyade alışkanlıkla keyif katarlar.
Yararlı bir öz-kontrol şu soruyu sormaktır: Bu adımdan tüm şakacı veya kutlama unsurlarını kaldırsaydık, akış hala insani hissettirir miydi - yoksa bu unsurlar sürtünmeyi maskeliyor muydu?
3. Tasarımın Zirvesi ve Amacına Göre Sonu
Bir net zirve (başarı anı) ve bir temiz son (doğrulama ve bundan sonra ne olacağı) tasarlayın. Hatırlamayı ve memnuniyeti her iki noktada da ölçün.
4. Mikro Etkileşimleri Spot Işığı Değil Köprü Olarak Kullanın
Hazırlık: Büyük bir durum değişikliğinden önce küçük, tutarlı hareket ipuçları.
Onayla: Başarı, biraz daha yavaş bir rahatlama ve isteğe bağlı bir ışık dokunuşu ile incelikli bir şekilde yerleşiyor.
Kurtarma: Tekrarlanan başarısızlık, tonu zarif bir şekilde iyimserden destekleyiciye değiştirir ve bir sonraki adıma rehberlik eder.
5. Duygusal Sürekliliği Test Edin
Kullanılabilirlik oturumlarında sadece "Bu kolay mıydı?" diye sormayın. Bunun yerine “Burada hangi duygu değişti?” diye sorabilirsiniz. "Kafası karışmış → eğlenmiş → kafası karışmış" sözlerini duyarsanız akış değil çatışma yaşarsınız. Yalnızca ekranları değil, geçişleri yineleyin.
Çatışma Sırasında Duygulardan Nasıl Kaçınılır: Hızlı Kontrol Listesi
Kırmızı bayraklar → düzeltmeler:
Ciddi anlarda şakalar → Sakin, doğrudan bir dil ve net bir iyileşme yolu ile değiştirin.
Çözüm öncesi kutlama → kutlamayı onay sonrasına taşıyın; yüksek riskli görev için ses tonunu azaltın S.
Zor durum atlamaları → ön duyuru geçişleri; çerçevelemeyi tutarlı tutun; Sürekliliği korumak için anlamlı hareket kullanın.
Ekipler arası ton kayması → risk düzeyi ve duruma göre örneklerle ses ve ton yönergelerini merkezileştirin.
Duygusal akışı bozmanın kasıtlı ve gerekli olduğu anlar vardır. Güvenlik uyarıları, yasal onaylar ve güvenlik açısından kritik uyarılar genellikle ani ton değişimlerinden yararlanır. Bu durumlarda, aksaklık önem sinyali verir ve dikkat gerektirir. Sorun duygusal çatışmanın kendisi değil; tesadüfi bir çatışmadır. Tasarımcılar kasıtlı olarak kesintiyi seçtiğinde, kullanıcılar darbeyi hissetmek yerine riskleri anlıyor.
Büyük deneyimler yönlendirilmiş deneyimlerdir. Dan da Dan bizi kaybetmeden duyguların içinden nasıl geçeceğimizi gösteriyor: hazırlıyor, geçiş yapıyor ve çözüyor. Süpermen sahnesi bunun tam tersini gösteriyor: içten bir vuruşla çarpışan bir şaka.
Öncekini yap. Duygusal vuruşlarınızı haritalandırın, tonu görev riskine göre ayarlayın ve mikro etkileşimlerin duygular arasında köprü kurmasına izin verin; böylece kullanıcılar ortadaki darbeyi değil, doğru zirveyi ve doğru ucu hatırlasın.
