Öykü anlatımı bilinmeyenin bilinmesiyle ilgilidir. Ancak tasarımcılar hikaye anlatıcıları değildir ve tasarladıkları yerler her zaman kullanıcı için açık olmalıdır. UI tasarımlarımıza küçük spoylerler ekleyerek ve sürprizleri bozarak, çok daha gelişmiş kullanıcı deneyimleri için tasarlıyoruz.

Genellikle pop-bilgelik hayranları tarafından iddia edilmiştir sadece iki ayrı parsel Batı kültürünün tamamında: Bir kişi bir yolculuğa çıkıyor ve bir yabancı şehre geliyor.

Kitaplığınızdan geçen kısa bir geçiş, kuralı çürütür. Bu, her şeyin uyuştuğu mecazi yolculuklara izin vermediğiniz sürece, fakat fikrin tekrarlandığı sıklık ve yapacağı duygunun sıklığı, batıda bilinmeyenlerin merkeziliği hakkında konuşur. anlatının fikirleri.

Her iki parselde de bir kişi yeni ve beklenmedik bir şeye sokulur, tek varyasyon anlatının konuştuğu bakış açısıdır; Her iki durumda da, hikaye arkı bilinmeyen olma bilinmemektedir . Clint Eastwood 1800'lü yıllarda Idaho'da bir kasabaya girdiğinde, kimliğiyle ilgili merakımız, bizim nişanımızı yönlendiren şeydir. Tolkien'in Yüzüklerin Efendisi üçlemesini okuduğumuzda, Frodo'nun sonunda onu Mt Doom'a getireceğinden hiçbir şüphe duymayacağız, ilgi bu arada olan şeydir.

Hikâye anlatmanın anahtarı, bilinmeyen bir şey olduğu ve bilinmeyenin bilineceği.

Tasarımcılar Hikayeci Değildir

Çok sayıda tasarımcı kendilerini hikaye anlatıcısı olarak adlandırmışlardır, ancak bu sadece iletişimden söz eden kitsch bir yoldur. Bir hikayeyi anlatmak için, büyük bir açığa hazırlık için bilinmeyeni teşvik etmeliyiz ve bu yaklaşımın önündeki en büyük engel, web deneyimlerinin - ve tasarımla en çok karşılaştığımızın tartışılacağını - doğrusal ve açık uçlu olduğudur.

Tasarım aslında şiire çok yakındır. Şiir tipik olarak, ısırık büyüklüğünde parçalar halinde bulunur ve bu temalarda, yoruma açık olan temalar incelenir.

Bir hikâye inşa etmekten uzak, tasarımcının işi mümkün olduğu kadar unintrusively olarak açıklığa kavuşturmaktır.

Mikrointeractyonlarda Spoiler Kullanmak

Jaws'ın en ilgi çekici öğesi nedir? Brody belediye başkanıyla tartışıyor mu? Indianapolis'in hikayesini anlatan Quint mi? Hooper'in Ellen Brody ile ilişkisi var mı (evet, kitabı oku!)? Hayır. Bu müzik. Köpekbalığı çello çalmaya başlar başlamaz, geleceğini biliyoruz , gelişi kelimenin tam anlamıyla müjdelendi. [Bu arada Jaws, hem bir yabancının (köpekbalığı) şehre geldiği, hem de bir adamın bir yolculuğa çıktığı (denize) bir filmin ilginç bir örneğidir.]

Sürekli olarak spoyler bırakarak, geleceğe işaret ederek, kendi başımıza viyolonsel müziği ile tasarımda etkileşim yaratabiliriz. Bunu yapmak için, mikrointeraksiyonları kullanırız - basit UI bileşenleri, bir tetikleyici ve geri bildirim içerir. Mikrointeraksiyonun geri besleme kısmı, spoylerinizi yerleştirebileceğiniz yerdir.

Doğrusal bir deneyde, daha sonraki bir aşamada sunulacak verileri önizleyerek çalışır. Anahtar, verileri ileriye taşımaktır.

Minyatür

Tanıdık bir şeyle başlayalım: İleriye bilgi getirmenin klasik örneği minik resim. Küçük resim, daha büyük bir öğenin önizlemesi, bağlantının diğer ucunda ne beklenmesi gerektiğine dair görsel bir kılavuzdur.

Jacky Winter sanatçılar, illüstratörler ve animatörler için bir yetenek ajansıdır. Farklı bir yetenek yelpazesiyle, işe göz atmanın en iyi yolu geleneksel küçük resimlerle.

jackywinter

Küçük resimlerin geleneksel olması gerekmez. Alexandre Nacache site, minyatürde bir tasarımın reprodüksiyonları yerine, proje öğelerinin önizlemelerini kullanan bir sanat yönetmeni ve etkileşimli bir tasarımcıdır.

nacache

Bao Londra'da üç lokasyonlu bir Tayvan restoranıdır. Yer gösterimleri, sadece restorana değil, olası bir deneyime işaret ederek, küçük resimler gibi davranıyor.

bao

Bir gün dışında Glasgow merkezli bir tasarım stüdyosu. Sitelerindeki küçük resimler, sanat yönünün önemli bir bileşenini oluşturur ve kendi marka estetiğini oluşturur.

bir gün dışında

5 Dakika Oku

Günün geri kalanında, böyle bir makalenin ne kadar uzun süre okulacağını bilmenin tek yolu, zamanı kontrol etmek, makaleyi okumak ve zamanı tekrar kontrol etmekti.

Son yılların en başarılı UI unsurlarından biri, alımına bağlı olarak, bir makalenin ne kadar süre okunacağını bize gösteren yararlı küçük göstergedir. Medium gibi siteler tarafından popüler hale getirilmiş, göz takibinin yapılmadığı veya hesaplanan okuma hızının hesaplandığı, “5 dakikalık okuma” tahmininin kelime sayımına dayalı olduğu - 125 kelime 30 saniyede okunması bekleniyor veya buralarda. Ancak bu genelleştirilmiş veriler bile kullanıcıların bir siteye, makaleye veya ürüne olan bağlılıkları konusunda bilinçli kararlar vermelerine izin vermek için yeterlidir.

Monoton Avustralya Tasarım Radyo Sadece durgunluk halleri için kullanılan zıt kırmızıyla kırılır. Etkileşimi olmadan kırmızıyı kullanan tek unsur? Konumu ve toplam uzunluğu olan oynatma kafası.

adr

sekoya Kaliforniya merkezli bir risk sermayesi firmasıdır. Teknoloji şirketlerinin profilleri açılış sayfalarını kaplar. Her profilde numaralandırılmış bir konum bulunur ve kaydırıcının animasyonlu zamanlayıcısı dikkatinizi işlemin tam olarak bulunduğunuz yere çeker.

sekoya

Vimeo Web'deki en iyi videoların bazılarını içerir. Küçük resimlerinin üzerine geldiklerinde istedikleri bilgileri (yapımcı, konu, başlık) gösterebilirlerdi. Süre seçtiler.

vimeo

Cinelli İtalya'nın en havalı bisiklet markasıdır. Ürün kaydırıcı özellikleri 'sonraki' ve 'önceki' düğmelerini içerir. Oklar tek başına anlam ifade etmek için yeterli olurdu, ancak tasarımcılar düğmelere basit bir şekilde ekleyerek verileri ileriye taşıdılar.

cinelli

Nitelikli Veriler

Bir arayüzü geliştirmenin en basit yollarından biri, verileri anlamlı bir bağlamla değerlendirmektir. Bunun anahtarı çok fazla bilgi sağlamaz, sadece bir bakışta okunabilecek basit bir özet.

Scout'a yardım et bir müşteri hizmetleri SaaS. Gösterge panosu, toplam konuşmalar gibi önemli metrikleri gösterir. Bu, bir ok eklenmesi ve bunun bir iyileştirme mi yoksa bir aksaklık mı olduğunu belirten bir yüzde olmadan anlamsız olur.

helpscout

Lyon'dan Bordeaux bilet rezervasyonu yapmak daha kolay Tren yolu Her iki sürenin görsel bir belirtisi ve değişikliklerin sayısını göstermek için, yolculuk süresinin altında bir çubuk görüntüler.

tren yolu

Haritalar ve Reasürans

Yolculukları, özellikle de bilinmeyene doğru bir yolculuğun olmasını beklediğimizde, bu deneyimi bir harita ile açıklıyoruz. Gerçek dünyada, bir harita bir hedefin küçük resmi gibidir. Kullanıcı arayüzü tasarımında kullandığımız haritalar bilgi mimarisini açıklığa kavuşturur.

Etiketler, çoğu zaman şirkete özel jargon olan jargona doğru yöneldikleri için bilgi mimarisinin en karmaşık alanlarından biridir. Jargon içermeyen mikrofotoğraf eklemek, kullanıcılar için hedefleri ön izler ve doğru bilgiye ulaşmalarına yardımcı olur.

kafes bir performans yönetimi SaaS, ancak ürünleri çok şirket merkezli. Bu sorunu, her bir ürünün ana özelliklerinin menülerinde işaret ederek çözüyorlar.

kafes

Thriva Evde alabileceğiniz kan testleri ile sağlığınızı izlemenize yardımcı olur. Menülerinde açıkça açıklanan üç ürün seviyesi vardır.

thriva

Finansal işlemler teknik olarak karmaşıktır. kareli geliştiriciler için çeşitli API ürünleri sunar. Menüleri sadece her ürünün temel özelliğini açıklamakla kalmaz, aynı zamanda ürün kombinasyonlarına dayanan iki potansiyel çözümü ön izler.

kareli

Etkili UI Tasarımının Anahtarı Spoiler

Hikayeleri anlatmak, etkili tasarımın antitezi, çünkü doğaları gereği hikayeler, bir deneyimdeki bilinmeyen unsurlara yöneliyor. Aksine tasarım, bilinmeyeni açıklığa kavuşturmak için ortadan kaldırmaya çalışır.

Verileri bir tasarımda ileriye götürdüğümüzde, genellikle bunu basit bir şekilde yaparız. İyi seçilmiş tek bir veri parçası tüm süreci açıklığa kavuşturur. Mikrointeractyonlar, kullanıcıları kendi deneyimlerini yaratma konusunda güçlendiren ve aynı zamanda daha geniş bağlamda nerede olduklarını tam olarak bilerek bu 'spoiler'ları yerleştirmenin en ideal yoludur.

Doğrusal bir hikayeden daha fazlasını açığa çıkararak, kullanıcıları çok daha etkili bir şekilde kullanırız ve kullanımı güçlü ve zevkli deneyimler tasarlarız.