Çarpıcı Kitap 6 Alıntı: Kişiliği Web'e Geri Getirmek

Genel web düzenleri, bu günlerde web tasarımı etrafında dönen konuşmalarda biraz yanlış isim haline geldi. Çoğu web deneyiminin ne kadar öngörülebilir ve ilhamsız hale gelmesinden sıkıldık ve biraz sinirlendik. Yine de sebepsiz değil. Her bir açılış sayfası, hemen hemen tüm diğer web sayfalarının ikizi gibi görünüyor.

Başlıkta, kısa bir ana başlık ile ilgi çekici bir kahraman görüntüsünün ardından daha uzun bir alt başlık gelir. Bunların altında, bir görüntü ve birkaç paragraf metin gibi tek tip medya nesneleri blokları yer değiştirir. İlk olarak, soldaki metin, sağdaki resim; sonra resim solda, metin sağda. Durulayın ve tekrarlayın. Yuvarlak profil fotoğrafları ve kare bir küçük resim ızgarası, 12 sütunlu ızgara boyunca mükemmel şekilde hizalanmış mükemmel şekillerle resmi tamamlar. Tek varyasyon, sayfanın üstünde veya altında - ya da belki her ikisinde de yer alan düzensiz paralaks geçişlerinden ve kötü şöhretli atlıkarıncalardan gelir.

Bu, yaratıcı çıktılarımıza bu kuralları veya sınırlamaları birinin dayatması değil; genellikle iyi niyetlerden ve en iyi niyetlerden kaynaklanırlar. Ne de olsa, web tasarımının ana ilkelerinden biri her zaman incelikli, neredeyse görünmez ve işlevsel bir arayüz oluşturmak olmuştur – azın daha fazla olduğu yerde kullanıcıları düşünmeyen bir arayüz ve sadeliğin hakim olduğu yerde formun işlevi takip ettiği bir arayüz – bir arayüz her şeyin doğru hissettirdiği yer.

Yine de her şey öngörülebilir bir şekilde yapılandırıldığında, hiçbir şey gerçekten göze çarpmıyor. Harekete geçirici mesaj düğmelerindeki adların, logoların, simgelerin, tipografinin, düzenlerin ve hatta renk geçişlerinin ne kadar benzer olduğu düşünüldüğünde, kullanıcılarımızın bugünlerde markaları , ürünleri ve hizmetleri ayırt etmekte zorlanmaları şaşırtıcı değildir.

Çarpıcı deneysel düzenleri ve belirsiz gizemli et navigasyonu ile kötü şöhretli Flash'ın altın zamanlarını çok az insan özlüyor. Kabul etmek gerekir ki, çoğu durumda odak, deneyim yaratmaktan yalnızca yapılandırılmış bir biçimde içerik sağlamaya kaymıştır. Yine de, web sitelerinin ne kadar harika veya korkunç olduğundan bahsettiğimiz o eski güzel günlerin aksine, bugün çoğu deneyim neredeyse görünmez , onlarla duygusal olarak bağlantı kurmayı son derece zorlaştırıyor.

Yakın zamanda ziyaret ettiğiniz ve sizde kalıcı, akılda kalıcı bir izlenim bırakan bir web sitesini veya benzersiz tasarımları için gerçekten sevdiğiniz ve hayran olduğunuz web sitelerini veya hangi web sitesinin gerçekten olağanüstü bir kişiliğe sahip olduğunu düşünmenizi istesem, bunlara cevap verebilir misiniz? hemen sorular? Bir veya ikiden fazla örnek verebilir misiniz? Olmama ihtimalin var.

Her web sitesi unutulmaz olmak zorunda değildir. Unutulmaz web sitelerinin otomatik olarak daha iyi performans göstermesi veya daha iyi temel performans göstergelerine ulaşması değildir. Ancak, ürün veya hizmetinizin oldukça rekabetçi ve zorlu bir ortamda öne çıkmasını istiyorsanız, bir şekilde farklı olmanız gerekir. Çoğumuz bunun pazarlama ekibinin görevi olduğunu düşünürüz. Sonuçta, ürünü doğru ışıkta, doğru yerde, doğru kitleye, doğru fiyata yerleştirmeleri gerekiyor. Yine de birçok dijital ürünün oldukça kullanışlı ve zengin özelliklere sahip olduğu bir dünyada, bu, başarılı bir sonuç garantisi olmadan genellikle aylarca kapsamlı araştırma ve test gerektiren göz korkutucu bir girişim olacaktır. Ve o zaman bile, bir sonraki parlak büyük şeyi tahmin etme ve şekillendirme konusunda son derece iyi değilseniz, yeterince iyi olmayabilir.

Müşteriler iyi deneyimlere alışkındır ve bunu beklerler. Her zaman hızlı veya basit değiller, ancak çok sayıda teklif nedeniyle, her zaman yeterince iyi olacak uygun araçlar ve hizmetler vardır.

En iyi adayları seçerek kararlarımızı aşırı uçlara kadar rasyonelleştirdiğimize inanma eğilimindeyiz, ancak bu mutlaka doğru değil. Ünlü Herbert A. Simon'ın tatmin edici teorisine göre, kabul edilebilirlik eşiğini karşılayan ilk seçeneği tercih etme eğilimindeyiz, çünkü daha iyi bir seçenek bulabileceğimizi veya ne kadar çaba gerektireceğini bilmediğimiz için. Tüm seçenekler yelpazesini nadiren ayrıntılı olarak inceleriz (ve bazen bu neredeyse imkansızdır) ve sonuç olarak, ihtiyaçlarımızı karşılayan veya çoğu ihtiyacı karşılıyor gibi görünen bir adayla tatmin oluruz.

İzleyicinin dikkatini çekmek için "yeterince iyi"den daha iyi olmamız gerekir. Hiçbir şey ağızdan ağıza dolaşamaz, ancak oraya ulaşmak için bakmaya değer bir şey bulmalıyız. Ya sana oraya ulaşmanın bir kısayolu olduğunu söyleseydim?

Bu sadece fiyatla ilgili değil. Bu sadece özelliklerle ilgili değil. Bu, sonsuz A/B testlerinde yalnızca düğmelerin doğru yerleşimini veya doğru renk tonlarını seçmekle ilgili değildir. Ve bu, e-posta kampanyalarında görünen sevimli bir maskot illüstrasyonu seçmekle ilgili değil. Sonunda, insanların aşık olabileceği veya derinden bağ kurabileceği bir deneyim yaratmakla ilgili - elbette sitenin amacını yönlendiren, ancak aynı zamanda sitenin kişiliği gibi insani tarafını da gösteren bir deneyim. onu inşa eden insanlar, değerleri ve ilkeleri, seçimleri ve öncelikleri.

Bu, ses ve ton tasarlama, arayüz kopyalama ve hikaye anlatımı, özgünlük, kapsayıcılık ve saygıyı benimseme anlamına gelir; ve tüm bunlar, özgün düzen kompozisyonları ve etkileşim kalıpları tarafından desteklenen benzersiz bir görsel dil oluştururken. Açık ve dürüst mesajlarla birlikte bunlar, tutarlı bir şekilde kullanıldığında ürünü diğerlerinden ayıran benzersiz bir imza oluşturur. Bu görev, aylarca süren pazarlama araştırması kadar göz korkutucu görünebilir, ancak çok büyük miktarda çaba veya kaynak gerektirmez.

Bu bölümde, kişiliğinizi verimli bir şekilde bulmanıza, biçimlendirmenize ve yüzeye çıkarmanıza yardımcı olabilecek birkaç pratik teknik ve stratejiyi inceleyeceğiz. Bunu yaparak, size iyi bir başlangıç ​​yapmak için birçok örnekle birlikte, bunu tutarlı bir şekilde yapmanın mevcut tasarım iş akışlarına nasıl uyabileceğini keşfedeceğiz. Ancak oraya varmadan önce, her yerde hazır bulunan tasarım kalıplarının ve en iyi uygulamaların denkleme nasıl uyduğunu bulmamız gerekiyor.

İçeri Girerek Kaçmak

Yaratıcı süreç doğrusal değildir. Renklerden ve türden düzene ve etkileşime kadar her tasarım kararı, seçenekleri göz önünde bulundurmamızı ve kombinasyonları değerlendirmemizi gerektirir. Yaratıcı süreç genellikle basit, yinelemeli bir süreç olarak görülse de, gerçekte bir dizi geliştirme ve ayarlama yoluyla bir maketten diğerine sorunsuzca geçmemiz çok nadirdir. Çoğu zaman, bir çıkmazdan diğerine doğru ilerleyerek, çatışmaları çözerek ve yaratıcı yönümüzü yol boyunca yeniden yönlendirerek yüzer ve uzaklaşırız.

Bu çıkmaz sokaklar, dijital tuvalimizde ortaya çıkan sonuçla gerçekten hiçbir yere varamayacağımızı fark ettiğimizde gerçekleşir. Orada pek çok kez bulunduk, keşfedilmemiş bölgeleri nasıl keşfedeceğimizi ve kanatlarda nasıl manevra yapacağımızı biliyoruz ve böylece fikirlerimizi şekillendirmeye devam ederken, yavaş ama istikrarlı bir şekilde somut bir sonuca doğru ilerlemeye devam ediyoruz. İki adım ileri, bir adım geri, şimdiye kadar yaptıklarımızı tekrar gözden geçirerek ve bu değerli pikselleri rafine ederek - açıkçası, sezgilere ve rastgele deneylere dayalı. Sonunda ileri geri bizi sakin, huzurlu ve güzel bir yere - tam da bir çözüm bulduğumuzu düşündüğümüz yere - çözüme getiriyor.

Elbette, bunun pek olası olmadığını biliyoruz, ama öyle değil mi?

Hiçbir şeyden bir şeye giden bu yolculuk, yalnızca birbiriyle çelişen mikro kararlarla dolu değildir; ister teknik ister zamana duyarlı olsun, bilinmeyenler, tuzaklar, sürtüşme ve zor kısıtlamalarla doludur. Ve sürecin her anında, hayal gücümüzün güzel, zararsız yaratıkları, kullanıcı röportajlarının ve müşteri revizyonlarının sert gerçekliğine karşı acımasızca ezilebilir. Böylece bereketli ama son derece düşmanca bir yerde bir yönden diğerine dönüp duruyoruz. Sonuç olarak, genellikle zaman kaybetme lüksünü göze alamayız, çünkü uzak gelecekte zararsız bir şekilde yüzen bu son tarihe giden yolun sürprizler ve beklenmedik dönüşlerle dolu olacağını bildiğimiz için.

Zaman kaybetmemek için, tuval dışı gezinme, akordeon deseni, yuvarlak profil görüntüleri ve kutsal 12 sütunlu ızgara düzeni gibi önceki projelerimizde iyi çalışan şeylere güveniyoruz. Tüm bu yerleşik uygulamalara geri dönmemiz bilgi, beceri veya coşku eksikliğinden değil - her seferinde farklı bir şey bulmak çok daha zor ve zaman alıcı. Ve zamanımız olmadığı için, tüm bu harika, denenmiş ve test edilmiş tasarım modellerini kullanıyoruz - hepsi belirli bir tür sorun için somut, uygulanabilir çözümler. Açıkçası, bu süreç farklı insanlar için biraz farklı olabilir, ancak özüne bölünmüştür, tasarımlarımızda ilerleme kaydettikçe perde arkasında olan budur.

Birkaç yıl önce Smashing Magazine'in yeniden tasarımı üzerinde çalışmaya başladığımızda, attığımız ilk adımlardan biri bileşenleri ve mikro etkileşimleri listelemek ve keşfetmekti. Makale düzenini ve stil kılavuzunu, uyumlu tablolar ve formları oluşturduk ve bunları erişilebilir, hızlı ve duyarlı tutmak için yerleşik en iyi uygulamaların çoğunu kullandık. Ancak tüm bu mükemmel bileşenleri bir araya getirdiğimizde, bağımsız çözümler olarak iyi çalıştıklarını ancak bir bütün olarak birlikte çalışmadıklarını fark ettik. Sistemin yapı taşları, sistemi sürdürmek ve desteklemek için yeterli değildi. Şimdiye kadar inşa ettiklerimizi yeniden tasarlamak zorundaydık ve yeni kimliğin kişiliği, sesi ve tonuyla tanımlanacak bu bileşenler arasında kapsayıcı bağlantılar kurmamız gerekiyordu.

Arayüzlerimize tasarım kalıpları uyguladığımızda, esasen diğer her şeyle herhangi bir bağlantısı olmayan bir grup gevşek modülü veya etkileşimi bir araya getiriyoruz. Belirli bir kalıbın deneyimin amacını yönlendirmeye nasıl yardımcı olduğunu sormak yerine, genellikle mikro çözümleri bir araya getirerek izole edilmiş bir mikro sorunu keşfederiz. Tasarım desenleriyle, paralaks efekti, yavaş ve etkili geçişler ve yavaşlamalar gibi bu günlerde moda olduğu için bir bileşen ekleme riskiyle karşı karşıyayız. Bunu yaparak, bazen bu bileşenin daha büyük ölçekte hangi rolü oynayacağına ve diğer her şeyle nasıl bağlantılı olabileceğine dair büyük resmi kaybedebiliriz. Sonuç olarak, jenerik kompozisyonlar ve jenerik görsel tedaviler ile ruhsuz, donuk, şişkin tasarımlar üretiyoruz. Bu şekilde, her şeye benzeyen bir şey yaratıyoruz.

Yine de, tasarım kalıpları ve en iyi uygulamalar mutlaka kötü değildir. Bunlar sadece görsel çıktıya yardımcı olan ve rahatsız eden iki ucu keskin bir kılıçtır. Bunları uygularken dikkatli ve düşünceli bir şekilde yapmalıyız. Tasarım deseniyle ilgili bir sorunu çözmeyi düşündüğünüzde, kendinize birkaç soru sormak iyi bir fikirdir:

1. Tam olarak hangi sorunu çözüyoruz?
2. Desen gerçekten sorun için en iyi çözüm mü?
3. İnsanlar bu etkileşimi nasıl yaşıyor ve bunu yaparken hangi acı noktalarıyla karşılaşıyorlar?
4. Bu bileşen, sistemin kapsayıcı hedefine ulaşmamıza nasıl yardımcı olur?
5. Bu bileşeni hem estetik hem de etkileşim tasarımı açısından sistemin geri kalanına nasıl bağlarız?
6. Çözüm gerçekten evrensel olarak anlaşıldı mı, yoksa tasarıma daha fazla netlik mi sağlamamız gerekiyor (etiketler, daha iyi kopya, satın alınabilirlik, simgelerin sözcüklerle değiştirilmesi)?
7. Deseni her zaman olduğu gibi tutmak iyi bir fikir mi? Yoksa, belki de görünüm alanına veya bir müşterinin sayfayı kaç kez ziyaret ettiğine bağlı olarak, onu koşullu olarak yüklemek veya ayarlamak daha mı iyidir?

Esasen, ne zaman ve nasıl yararlı veya zararlı olduğunu ve hedeflerimize ulaşmada nasıl yardımcı olduğunu keşfederek bir tasarım modelini yıkmaya çalışıyoruz. Doğalarına girerek ve onları gerçekten neden kullandığımızı anlayarak öngörülebilir kalıplardan kurtuluruz. İlk olarak, bileşeni, tipik olarak nerede kullanıldığı ve genellikle nasıl tasarlandığı bağlamı olmaksızın, çıplak, soyut biçiminde inceleriz; örneğin, soldan sağa veya sağdan sola kayan bir tuval dışı gezinmeyi düşünmek yerine, kendi başına etkileşim modeline bakarız - esasen, içeriğin varsayılan olarak gizlendiği ve tıklama/tıklamada görüntülendiği aşamalı açıklama. musluk. Ardından, her model için, kullanılabilirlik sorunlarını ve sorunlarını keşfeder, bunları çözer ve ardından modülü, diğer her şeyle bağlantılı hissedecek şekilde biçimlendirir ve tasarlarız. Bu son adım, tutarlı bir şekilde kullanılan bir geçiş veya geometrik bir desen veya düzende geleneksel olmayan bir konum kadar basit bir şey olabilir. Son olarak, her şey yerli yerinde olduğunda, tasarım desenini yeniden paketler ve sistemin geri kalanı için sunulmaya hazır olarak kitaplığa ekleriz.

Elbette, en iyi uygulamalar ve tasarım kalıpları, doğru yola daha hızlı ulaşmak için harika kısayollardır. Kullanıcılarımızın çoğunun sahip olacağı öngörülebilir etkileşimlere ve sıralı bilgilere erişmemize izin veriyorlar. Aslında, her zaman olduğu gibi bugün de alakalılar. Anahtar, bunları site genelinde kullanılan görsel dil bağlamında anlamlı bir şekilde uygulamanın bir yolunu bulmak ve duygusal bir bağlantıyı tetiklemek için kasıtlı olarak ne zaman kırılacağını bilmek.

İnsanlar İnsanlara Bağlanır

Küçük web mağazalarımızı olduğundan daha büyük göstermek için her yerde hazır ve nazır bir “biz” kullandığımız eski güzel günleri hatırlıyor musunuz? Evden terlik ve bornozla serbest çalışan tek kişi veya küçük bir tasarım ajansındaki çok az kişiden biri olabilirsiniz, ancak bu derin “biz” şirketin sesini daha ciddi ve dolayısıyla daha güvenilir hale getirmedi. o? Başka türlü emanet edilmeyeceğimiz projeleri almak için başka biri gibi davrandık - ve bu konuda herkes kadar suçlu olduğumu ilk kabul eden ben olacağım.

Etrafımızdaki pek çok şeyin abartılı ve aldatıcı olduğu bu günlerde, özgünlük, insanların gerçekten bağ kurduğu birkaç nitelikten biri olmaya devam ediyor. Bununla birlikte, çoğu zaman, bir web sitesi aracılığıyla hiç sergilenmez ve ne yazık ki, şirket stok fotoğrafları ve anlamsız jargonla kaplı başka bir belirsiz varlığın belirsiz bir görüntüsünü yaratır. Her marka bozmayı veya farklı olmayı vaat ettiğinde, hiçbir şey gerçekten yıkıcı veya farklı hissetmez ve bu da yabancılaşmaya ve şüpheciliğe neden olur.

İnsanlar güvendikleri markalarla gerçekten bağlantı kurabilir, ancak markaların önce bu güveni kazanmaları gerekir. Açıkçası, güvenilir önerilerden ve olumlu deneyimlerden geliyor. Ancak şirketler adına iletişim kuran tasarımcılar olarak, henüz markanın farkında olmayan insanlarda güveni nasıl verimli bir şekilde sağlayabiliriz? Görünen o ki güven, markanın değerlerinden, inançlarından, ilkelerinden ve faaliyetlerinden etkilenebilen görünümünden de gelebilir. Neredeyse bulaşıcı bir şekilde hayran olan birini tanımadan bir şirkete veya kuruluşa aşık olmak kolay değildir. Değerlerini desteklediğiniz ve inançlarının ve ilkelerinin arkasında duran insanlarla bağlantı kurmak çok daha kolay.

İnsanlar en iyi insanlarla bağlantı kurarsa, belki de arayüzlerimiz onları yaratan insanların değerlerini yansıtıyorsa, arzu edilen duygusal bağlantıyı tetiklemeye bir adım daha yakın olabiliriz. Elbette daha önce orada bulunduk ve bu yüzden şirkette çalışan insanları bir “Ekip” sayfasında veya ön sayfanın alt kısmında gösteriyoruz, değil mi? Peki, olaya biraz farklı bir açıdan bakalım.

Markanızın kişiliğini tanımlamanız istenseydi ne olurdu? Hangi sıfatları kullanırdın? Bir dakika düşünün ve bunları yazın.

Hazır? Ortak ve tahmin edilebilir cevaplar bulma şansınız yüksektir. Belki de "basit", "temiz", "güçlü", "dinamik", "esnek" veya "iyi yapılandırılmış" gibi kelimeler akla gelmiştir. Veya "ayrıntılara dikkat eden", "odaklı", "kullanıcı odaklı" ve "kalite odaklı" olabilir.

Bu yanıtlarla ilgili bir sorun görebiliyor musunuz? Bu sözler kişiliğimizden çok niyetimizi tanımlar. İlki genellikle çok spesifik ve kararlı iken, ikincisi genellikle çok bulanık ve sürekli değişiyor. Yukarıda özetlenen nitelikler, nasıl algılanmak istediğimizi açıkladıkları için soruya iyi bir cevap sağlamaz, ancak gerçekte nasıl olduğumuzu değil. Aslında, genellikle kim olduğumuzu veya kendimizi içinde bulduğumuz rahat şirket balonunun dışında nasıl algılandığımızı bilmiyoruz.

Bunun yerine, iş arkadaşlarınıza ve müşterilerinize biraz farklı bir soru sorsanız ne olur: işlerinde en çok neye önem veriyorlar ve şirket veya ürünle ilgili en çok neye değer veriyorlar? Belki bilgili ve deneyimli, ancak aynı zamanda cana yakın ve alçakgönüllü yetenekli, motive iş arkadaşlarının çeşitliliğini önemsiyorlar? Belki de şirketin dünyada gerçek bir fark yaratan kar amacı gütmeyen kuruluşlar için pro bono projelerine aktif olarak katkıda bulunması gerçeğidir. Belki de okulları ve sektöre yeni gelenleri yıllık burs sağlayarak desteklediği için. Veya tüm çalışanlar için adil bir maaş ikramiyesi ile karı bağladığı için. Ya da en yeni fantezi teknolojiler ve çılgın deneylerle oynamanıza ve çalışma sürenizin yüzde beşinde açık kaynağa katkıda bulunmanıza izin verdiği için. Şirketin öne çıkmak için büyük hırslara, idealist hedeflere veya süslü bir çalışma ortamına ihtiyacı yok.

Sidenote : İnsani deneyimler tasarlamak, nazik ve alçakgönüllü olmak ve şirket ve kullanıcılar için önemli olan nitelikleri vurgulamak demektir. Bu, mahremiyeti, saygıyı, etiği ve şeffaflığı vurgulamanın yanı sıra ürün üzerinde çalışan kişilerin kişiliğini de yansıtmak anlamına gelir .

İşte bir örnek. Şirketiniz çeşitlilik, veri gizliliği, erişilebilirlik ve şeffaf fiyatlandırma konularına çok önem verebilir. Bu, arayüzünüzün erişilebilir ve dürüst olduğu, müşteri verilerinin üçüncü taraflara verilmesine karşı herkesin önünde tavır aldığınız ve gündeminizi aşırıya kaçmadan fiyatlandırma karşılaştırmasını destekleyen özellikler eklediğiniz anlamına gelir. Rekabetçi fiyatlandırma katmanlarıyla birlikte bu değerleri belirgin bir şekilde vurgulayabilir ve sonucu ölçebilirsiniz.

Şimdi, yukarıdaki tüm ifadeler arasında benzer bir iş parçacığı bulabilir misiniz? Kişisel deneyimlerden geldikleri için, başlangıçta bulabileceğiniz daha genel ve soyut terimlerden çok daha insani ve ilişkilendirilebilir görünüyorlar.

Bu yüzden Slack veya MailChimp gibi şirketler, Uber veya General Electric gibi markalardan çok daha somut hissediyor. İnsani yönlerini yansıtan ilginç ve resmi olmayan mikroskopi ve illüstrasyonlar kullanıyorlar. Bir misyon bildirisi veya basın bültenleri aracılığıyla değil, arayüzdeki tuhaflıklar ve e-posta yoluyla veya sosyal kanallar aracılığıyla herkese açık olarak nasıl iletişim kurdukları aracılığıyla parlıyorlar. Kullanıcı deneyimine derinden entegre olmuş bir karakterin altında yatan temel budur.

Genel bir görünümden kaçınmak için önce kişiliğinizi tanımlamanız gerekir . Bu, doğru soruları sormak ve doğru cevapları bulmak anlamına gelir. Okurlarımızla kullanıcı röportajları yaparken Smashing markasına bizden çok farklı bir bakış açısına sahip olduklarını hemen anladık. Açıkçası, tüm olağan şüphelileri, muhtemelen ilk başta bulduğunuz nitelikleri listeleyerek markayı güvenle tanımladık. Gerçek ise şaşırtıcıydı: Markanın gerçekte nasıl algılandığından bu kadar uzak olamazdık.

Derginin her zaman sektörde güçlü bir sese sahip, topluluk üyeleri tarafından yapılan önemli çalışmaları vurgulayan profesyonel, saygın bir yayın olmasını istedik. Kullanıcı görüşmeleri, her zaman çabaladığımız şekilde bu hedefi gerçekten tanımlamayan nitelikleri ortaya çıkardı. Bunun yerine, "gayri resmi", "ilginç", "arkadaş canlısı", "yaklaşılabilir", "destekleyici", "topluluk" ve en önemlisi "kediler" gibi kelimeler duyduk.

Mirasımızın kedi olmasını asla istemedik, ama bu noktada gerçekten bize bağlı değildi. 2012 yılında, sevgili illüstratörümüz Ricardo Gimenes, ilk Smashing Konferansımız için bir Smashing kedisini maskot olarak hayata geçirmeyi seçti. Lehinde veya aleyhinde bilinçli bir karar yoktu. Gelecekte daha fazla konferansa ev sahipliği yapıp yapmayacağımızı bilmediğimiz için bunu doğru dürüst tartışmadık bile. Bu küçük karar, yıllar sonra vazgeçemeyeceğimiz bir şeyi harekete geçirdi. Konferanslar merkezi ürünlerimizden biri haline geldiğinden, bunları postalarımızda, duyurularımızda, yayın gönderilerimizde ve sosyal medya mesajlarımızda yoğun bir şekilde tanıtıyoruz.

Zamanla, her konferans kendine ait bir kedi resmine katlanmak zorunda kaldı ve tüm bu kediler yıllardır müşterilerimizle tekrar tekrar karşı karşıya kaldı. Cat illüstrasyonları, biz onu aktif olarak desteklemeden veya yönlendirmeden markanın algısını büyük ölçüde etkiledi. Bu yüzden bir karar vermemiz gerekiyordu: ya kedilerin yavaş yavaş unutulup gitmesine izin verin ya da onları yeni tasarıma yoğun bir şekilde entegre edin. Muhtemelen şimdiye kadar neyle anlaştığımızı keşfetmişsinizdir. Bu noktada, yeni Smashing Magazine web sitesinde özgürce dolaşan 70'in üzerinde ilginç ve arkadaş canlısı kedimiz var.

Bununla birlikte, bir maskot markayı daha ulaşılabilir kılmaya yardımcı olabileceği kadar, nadiren tüm hikayeyi iletmek için yeterlidir. Röportajlar ayrıca Smashing Magazine'in topluluk yönünün gerçekte ne kadar önemli olduğunu anlamamıza yardımcı oldu. "Topluluk" ve "insanlar" kelimeleri, kullanıcı röportajlarında çok fazla yer aldı ve sebepsiz değil - dergi, sahne arkasındaki insanlardan mütevazı ve cömert açık kaynaklı katkılar olmadan var olamazdı. Ancak tasarımımız bunu pek yansıtmadı. Bu yüzden odağı biraz perde arkasındaki insanları - yazarlar, editörler ve topluluk üyeleri - vurgulamaya kaydırmayı seçtik. İnsanları göze çarpacak şekilde göstermek, tasarım imzamızı tanımlayan başka bir özellik haline geldi - ve bu, yazar küçük resimlerinin tasarımda neden bu kadar önemli bir konuma sahip olduğunu ve neden kendi bloglarında veya diğer platformlarda yayın yapan yazarları ön sayfamızda öne çıkardığımızı açıklıyor.

Hepsi senin için ne anlama geliyor? Önce şirketin tam kalbinde yatan insani nitelikleri ortaya çıkarmak için sorular sorun . Bu size, niteliklerinizi arayüz tasarımına çevirecek bir dil üzerine görsel bir dil inşa etmek için bir temel sağlayacaktır. Her şirketin bir şekilde benzersiz bir imzası vardır ve bu genellikle orada çalışan insanlara yansır. Nihayetinde, bu sadece onu keşfetmek için zaman ve cesaret bulmakla ve büyük hırslarımız ve iyi niyetlerimiz kadar kusurlarımızın ve tuhaflıklarımızın da bunun bir parçası olduğu gerçeğini benimsemekle ilgilidir.

Kişilik Asla Mükemmel Değildir

Tasarımcılar olarak genellikle mükemmeliyetçi olmaktan gurur duyuyoruz. Her piksel parlatılmalı, her açı tam olarak doğru olmalı ve tüm bileşenler ızgaraya hizalanmalıdır. Harekete geçirici mesaj düğmelerinde mükemmel border-radius hakkında hiç bitmeyen tartışmayı hatırlıyor musunuz? Etkili ve uzun soluklu bir tartışmanın ardından tasarım ekibi, birkaç ay sonra 13 piksele geçmek ve yıl sonuna kadar 12 piksele geri dönmek için sonunda 11 piksele karar verdi. Birçok şirkette bu değişiklikler, hiçbir şeyin şansa bırakılmadığı ve varsayımlardan tasarım kararlarına kadar her şeyin önce test edilmesi ve kanıtlanması gereken çok sayıda devam eden A/B testi aracılığıyla yönlendirilir.

En etkili, en iyi performans gösteren çözüme ulaşmak için durmaksızın çalışıyoruz - tam olarak doğru olan bir çözüm. Bununla birlikte, tüm bu minimal, mikroskobik değişikliklerle, aynı küçük bileşeni sadece biraz daha iyi bir varyantı bulmak için tekrar tekrar iyileştirmeye çalışırken atlarımızı ölümüne sürmüyor muyuz?

Norveç'teki bir grafik tasarım ajansının yaratıcı lideri Espen Brunborg, A/B testleri asla tek başına yapılmamasını öneriyor. ¹ Espen'e göre, A/B testleri kullanıcı deneyiminde yerel bir maksimuma ulaşmamıza yardımcı olur, ancak çoğu zaman büyük resmi bütünüyle kapsayabilecek kadar geniş kapsamlı değildir ve etkili bir şekilde küresel bir maksimuma ulaşmamızı engeller. ² Bu nedenle A/B testlerine ek olarak (mikrokopi, renkler ve düzendeki konumlar test edilir), A/Z testleri denen ve mevcut bir “temel” tasarımı tamamen farklı tasarımlara karşı test ederler. Farklılıkları yalnızca bir düğmenin veya kopyanın gölgesinde değil, tamamen farklı düzenlerde ve görsel işlemlerde de yatmaktadır. Marka bilinci oluşturma ve temel ilkeler aynı kalır, ancak hemen hemen her şey gelişmeye devam eder. Bu, Espen ve ekibinin birkaç ayda bir dönüşüm ve KPI'lar açısından yeni mutlak maksimumlara ulaşmasını sağlar.

¹ Jakob Nielsen 2005'te “Putting A/B Testing in Its Place” adlı bir makale yazmıştı. Makale, A/B testinin bazı sınırlamalarını ve olumsuz taraflarını vurgulamaktadır; en önemlisi, hiçbir zaman bir projede kullanılan tek yöntem olmaması gerektiğidir - kullanıcı davranışının gözlemlenmesi genellikle daha derin içgörüler sağlar.

² Bill Buxton, muhtemelen 2007'de yazdığı Kullanıcı Deneyimlerini Tasarlamak adlı kitabında bu sorunu tartışan ilk kişiydi. Bill Buxton'a göre, tasarım yerel bir maksimuma ulaştığında tasarımcılar genellikle yerel bir tepeye tırmanma sorunuyla karşılaşırlar.

Yıllar önce yaptığımız sohbetlerden birinde, Smashing Magazine'in 2012'deki yeniden tasarımında yer alan Elliot Jay Stocks, tasarım sürecinin bir süredir aklımda kalan ince bir detayından kısaca bahsetti. İyi bir tasarımın iki nitelikten birine sahip olduğunu söyledi: ya mükemmel hizalama, boyutlandırma ve hiyerarşi ile her yönden kesinlikle mükemmel (ki genellikle elde edilmesi oldukça zordur) ya da birkaç tutarlı şekilde kasıtlı olarak kusurlu (ki bu elde etmek çok daha kolay). Elliot'a göre, iyi bir tasarımda arada hiçbir şey olmamalıdır. Başka bir deyişle, düğmeler ya ızgaraya mükemmel şekilde hizalanmalı ya da hiç hizalanmamalı - 20-30 piksel ve daha fazla kaydırılmalıdır. Sadece birkaç piksel sapma yanlış hissettirirken, 20–30 piksel sapma kasıtlı ve dolayısıyla daha az bozuk görünüyor.

Peki ya her bir bileşen için mükemmel çözümün peşinden koşmak yerine, kişiliğimizin çeşitli ifadelerini çalıştırıp test etsek? Arayüz tasarımında, tamamen farklı yaratıcı yönler anlamına gelir. Belki de tek bir vurgu rengine sahip geometrik bir düzene karşı kalın tipografiye sahip çok sütunlu bir düzen? Ya bir düğmenin mükemmel yuvarlaklığını aramak yerine kasıtlı olarak küçük tutarsızlıklar ortaya koyduysanız? Harekete geçirici mesaj düğmelerinden birinde özel bir animasyon mu yoksa genellikle yerleştirilmesi gereken kutunun dışında bir görüntünün dinamik olarak yerleştirilmesi mi? Ya da belki bir alt başlığı 90 derece döndürmek? Kişilik tamamen farklı şekillerde ifade edilebilir, bu nedenle görev, test için yeterince umut verici olan varyasyonları keşfetmektir.

Bir kişilik asla mükemmel değildir ve bu yüzden belki de web sitelerimiz de mükemmel olmamalıdır. Bir tarafta nitelikleri temsil eden mıknatıslar ve diğer tarafta bileşenleri veya görsel tedavileri temsil eden mıknatıslar ile şirketinizde herkesin görebileceği bir sanat panosu kurarsanız ve daha sonra görsel bir yön oluşturmak için rastgele birini diğerine çarparsanız ne olur? sonraki A/Z testi? Mükemmeliyetçiliği, kasıtlı olarak kusurlu tasarımlar üretmek için gereken ayrıntı düzeyine uygulayın.

Bu yaklaşım her zaman kazanmaz, ancak A/B testleri ile tamamlanarak sizi başka türlü ulaşamayacağınız yeni zirvelere taşıyabilir. Sonuç olarak, müşterilerin deneyimlerine ve dolayısıyla markaya aşık olmalarını ve kalıcı bir bağ oluşturmalarını istiyoruz. Kasten kusurlu ancak insancıl bir arayüz, oraya ulaşmamıza yardımcı olabilir. Başka kimsenin sahip olmadığı ayırt edilebilir bir kalite bulmanızı ve onu güçlendirmenizi gerektirir.

Bir Şey Seçin ve Hızlandırın

Arayüzlerimizde, kişilik bir tasarım imzasıyla ifade edilebilir - yinelenen bir görsel işlem, kopyanın sesi ve tonu veya bir sayfadan diğerine tutarlı bir şekilde kullanılan bir etkileşim modeli. Fare imlecinden kilometrelerce uzaktaki arayüzde görülebilecek çeşitli karmaşık, geleneksel olmayan tedaviler karışımını keşfetmek cazip gelebilir. Ancak bu, bir tasarımcının ifadesine kullanıcıların niyetlerinden daha fazla öncelik veren feci bir deneyim için bir reçetedir. Kişilik ne kadar cesur olursa olsun, tasarım imzası ince kalmalıdır.

Dan Mall ile Smashing'in yeniden tasarımı üzerinde çalışırken, Dan'in projenin en başında gündeme getirdiği ilginç bir ayrıntı, nihai sonuçtaki imzanın rolüydü. Dan'e göre, kişiliğin birkaç farklı, rekabet eden ifadesini seçmek genellikle çok fazladır: sadece küçük bir ayrıntıyı seçmek ve onu sonuna kadar güçlendirmek yeterlidir. Daha pratik bir ifadeyle, bu, bir kalıp seçip onu tutarlı bir şekilde her yerde : her sayfada ve her kullanıcı etkileşiminde kullanmak anlamına gelir. Bu kutsal detayı nasıl buluyorsunuz? Şirketin köklerine geri dönüyorsunuz.

Smashing Magazine'in ilk günlerinde hiç markamız yoktu. Oldukça rastgele bir WordPress teması seçtik, adı Arial'e yerleştirdik ve hepsi bu kadar. Sonunda, 2007'nin başlarında Güney Afrika'dan Ryan Denzel, Smashing Magazine'in 11.6 derece eğimli bir S harfi içeren logosunu tasarladı. Logonun gölgesindeki ve renklerindeki küçük değişikliklere rağmen, on yıldan fazla bir süredir tasarıma sadık kaldık ve son yeniden tasarımla değiştirmeyi düşünmüyorduk. Bununla birlikte, markayla derinden bağlantılı bir tasarım imzası ararken, logonun eğilmesini en başından beri kalbimize çok yakın tuttuk.

Andy Clarke ile yapılan ilk tasarım keşifleri, sitedeki her bir görsel öğe için tutarlı bir şekilde eğilmeyi kullandı. Bu imza, nihai tasarıma da yansıdı. Bugün, ürün sayfalarındaki tüm simgeler, yazar resimleri, konferans bayrakları, iş panosu logoları, ürün panellerindeki çizimler ve kitap kapaklarının tümü tutarlı bir şekilde eğiliyor. Bu küçük ayrıntı, deneyimi bozmaz, ancak sonuç olarak diğer her şeyden açıkça ayırt edilebilen tasarıma benzersiz bir görsel işlem katar.

Kuşkusuz, süreç boyunca eğilmeyi yeniden tasarladık, 11,6 dereceden 11 dereceye uzaklaştık ve tüm bileşenlere 11 piksel yuvarlaklık ekledik. Aylar sonra, cesur renkler, tipografi ve düzen devreye girdi ve eğimli öğelerin tuhaflığını ve gayri resmi stilini destekledi - sonunda hepsi yavaş yavaş tasarım maketlerine girdi.

Bu noktada, imzanız olarak terfi ettirilebilecek herhangi bir ayırt edici öğeniz olmadığından biraz endişe duyabilirsiniz. Öne çıkan eğime veya belirli bir renk paletine sahip olmayabilirsiniz. Görünüşe göre, her şey bir tasarım imzası olabilir. Sonraki bölümlerde, kendi özel durumunuz için kullanabileceğiniz bazı örnekleri ve fikirleri keşfedeceğiz.

Neden Özel Çizimler Stok Fotoğraflardan Daha İyi Çalışır?

Kişiliğin nitelikleri belirlendikten sonraki adım, bu nitelikleri farklı bir görsel dile dönüştürmektir. Başlangıçta renk ve tipografi aracılığıyla olur, bu nedenle görsel stili tanımlarken renk kombinasyonlarında ve tip ailelerinde bu niteliklere dikkat edin.

Kendi tasarım imzanızı bulmanın muhtemelen en kolay yolu, marka için özel olarak tasarlanmış özel illüstrasyonlar kullanmaktır. Her sanatçının kendine özgü bir stili vardır ve genellikle genel görünümü düzene sokan stok görsellerin veya stok fotoğrafların aksine, özel çizimler bir markaya benzersiz bir ses ve ton verir. Aşırıya kaçıp düzinelerce illüstrasyon oluşturmanıza gerek yok; sadece birkaçı muhtemelen yapardı. Satın aldığınız tüm stok fotoğraflarını özel çizimlerle değiştirmeyi düşünün - bu size başlangıç ​​için yeterince iyi bir temel sağlayacaktır.

Atlassian, deneyimin her temas noktasında eksiksiz ve güzel bir şekilde uygulanan açıklayıcı bir stilin harika bir örneğidir. Çizimler, stok fotoğraflardan daha ulaşılabilir. Bununla birlikte, nadiren düz bir arka planda göründüklerine dikkat edin - bunlar, illüstrasyon stilini tamamlayan renk paleti ve tipografik seçimlerle desteklenir.

Özel çizimler neden öne çıkmak için yeterli değil? Çünkü web'deki diğer birçok özellik gibi, açıklayıcı stil de trendleri takip ediyor. Atlassian'ın stilini Slack'in görsel diliyle karşılaştırın. Evet, ince detaylar farklı ama pastel renk kombinasyonları benzer. Bu farklı projelerin illüstrasyonları tek bir web sitesinde mutlu bir şekilde bir arada bulunabilir ve birçok müşteri bir fark görmez.

Farklı bir görsel stil, başta arka planlar, tipografi, şekiller ve düzen olmak üzere sayfadaki diğer öğelere daha fazla dikkat edilmesini gerektirir. Tüm bu unsurların Bond'da nasıl birlikte oynadığına dikkat edin. Çizimler yalnızca boş bir beyaz tuvale eklenmez; arka plan, metin renkleri ve düzen ile etkileşime girerler.

Medium, açılış sayfalarındaki ve yardım sayfalarındaki tüm illüstrasyonları için kolaj benzeri bir stil kullanır. Anahtar, resimlerin sayfalar arasında tutarlı bir şekilde kullanılmasıdır. Her ziyaretçi için bir anlam ifade etmeyebilirler, ancak markanın benzersiz görsel görünümüne katkıda bulunurlar.

Sağlık sigortası, vatandaşlar ve işletmeler için çok rekabetçi ve özellikle dostane veya şeffaf olmayan bir ortamdır. Özel çizimler, incelikli animasyonlu GIF'ler ve anlaşılır metin yazarlığı ile sektöre yeni katılan Oscar, daha cana yakın ve ilişkilendirilebilir görünüyor.

WebConf.Asia, canlı renk kombinasyonları ve arka planı ve üç boyutlu gibi tasarlanmış kutulu bileşenleri olan bir konferans web sitesidir. Bu, tasarımı farklı kılmak için yeterlidir. Görsel işlem, konuşmacılar, konuşmalar ve ana navigasyon için kullanılan derinlik üretir.

Bandenjager, harekete geçirici mesaj düğmelerinde, gezinmede ve hatta ürün sayfasındaki miktar seçicide sürekli olarak eğimli şekiller ve kompozisyonlar kullanır. Bu onların tasarım imzası. Ürün etiketleri gibi mikro bileşenlerin bile aynı kalıbı kullandığına dikkat edin.

Maru Mori Project, vakfın devam eden faaliyetlerini vurgulayan özel çizimlere eşlik eden her yerde bir ağaç şekli kullanır.

Storytrail, video ve fotoğraflarla tamamlanan etkileşimli bir rehberle ziyaretçilerinin şehirleri keşfetmesine olanak tanır. Her şehrin, o şehrin en önemli dönüm noktasını belirleyen dalgalı bir yatay çizgi olan kendi imzası vardır. Şehirler, çizgilerin eğrilerinde farklılık gösterir ve tasarım, çizgileri, yerleşimdeki öğelerin animasyonları, geçişleri ve düzenlenmesi için bir imza olarak kullanır.

Haufe, tasarıma daha fazla dinamik eklemek için örtüşen arka planlar kullanır. Izgaranın ana yapısı, şirketin kimliğinin ana karakteri olan H harfinden türetilmiştir. Tüm bileşenler, bu kişilik özelliğini desteklemek için ızgarada düzenlenmiştir. Aynı anda güzel bir fotoğraf oyunu, orijinal kompozisyonlar ve çeşitli geometrik arka planlar.

Dikkat çekmenin bir başka yolu da kompozisyonlarınıza rastgelelik eklemektir. Rich Cahill'in portföyü, üç dikey parçaya bölünmüş, yatay olarak rastgele kaydırılmış ve bir dizi önceden tanımlanmış renkle renklendirilmiş illüstrasyonlar içerir. Öne çıkmak için biraz kişilik eklemek o kadar da zor değil. Sistemin öngörülebilir parçalarını görünüşte rastgele, öngörülemeyen şekillerde birleştirerek tasarım dilinde biraz kaos yaratmanın güzel bir örneği.

Lynn Fisher ayrıca portföyüne biraz rastgelelik katıyor. Düzen, farklı kesme noktaları arasında tamamen değişerek mobil ve masaüstü cihazlarda tamamen farklı bir deneyim yaratır. Favicon bile dinamik olarak değişir.

Bir sitenin görsel yönünü düşünürken özel çizim stilini, arka planları, tipografiyi ve şekilleri göz önünde bulundurmak iyi bir fikirdir. Renk ve boşluk seçimi gibi tasarım kararlarını yeniden kullanarak tüm bu özellikler arasında güçlü bağlantılar kurun. Bunu yaparken, elbette, başka her yerde yaygın olarak kullanılan öngörülebilir seçeneklerden kaçınmaktan zarar gelmez. Bunu başarmanın etkili yollarından biri, devam eden tasarım trendlerini takip etmek, ardından en yaygın olanı seçmek ve onu parçalara ayırmaktır .

Bir Trend Seçin ve Parçalayın

Tanınmış bir Fransız moda tasarımcısı olan Yves Saint-Laurent, harika tasarımdan bahsederken, bir keresinde “Modalar soluyor; stil sonsuzdur.” Saint-Laurent'e göre, zamansız tasarımlar yaratmak için trendleri not etmek, ancak kendi kişisel tarzınızın merceğinden trendlerin bir yorumuna hizmet etmek önemlidir. Genelde internette gördüğümüz şey bu değil.

Bu günlerde trendlerden hoşlanmamanın iyi bir nedenden dolayı moda haline gelmesi neredeyse ironik: genellikle birincil amaçları bir tasarımcının amacını yönlendirmek yerine görsel süslemedir ve çoğu zaman deneyime sürtünme, kafa karışıklığının ötesinde pek bir şey katmazlar. ve süslü ıslıklar ve çanlar. O zaman tasarımcıların “acımasız tasarımlar” ile - bir web sitesinin özünü yapılandırılmamış biçiminde sergilemeyi ve web sitesinin işlevlerini aşırı uçlara maruz bırakmayı amaçlayan web siteleri - ile savaşmaya başlamasına şaşmamalı. ³

³ Mimarideki acımasızlığın, kasıtlı olarak kırılmış estetikle değil, kaygısız estetikle karakterize edildiğini belirtmekte fayda var. Web tasarımına uygulandığında, bu stil genellikle kasıtlı olarak bozulan tasarım kuralları ve yol gösterici ilkelerle birlikte gider.

Bunu yaparken, tasarımcılar genellikle tasarım kalıplarını, kullanılabilirlik uygulamalarını ve tasarım trendlerini kasıtlı olarak bozarlar. İlk bakışta sadece farklı olmak amacıyla yapılmış tasarımlar gibi görünse de çarpıcı bir kişiliğe sahip oldukları için kendilerine dikkat çekiyorlar. Kabul etmek gerekir ki, bazen köklü tasarım ilkelerine kasten sırt çevirme konusunda çok abartılı görünüyorlar. Herkes bunu karşılayamaz ve herkes bu tür geleneksel olmayan estetiği kendi markasına bağlama konusunda kendini rahat hissetmez.

Biraz daha pragmatik bir strateji, elbette, genel tasarımlar ile brütalist tasarımlar arasında bir yerde yaşar. Oraya ulaşmak için bir trend seçebilir, benzersiz bir bakış açısı bulabilir ve kişiliğinizi ona uygulayabilirsiniz. Örneğin, pürüzsüz ve ipeksi animasyonlar kullanan çok sayıda web sitesi görürseniz, bunların hikayenize nasıl uyacağını düşünün ve onu zenginleştirecek ve daha kişisel hale getirecek bükümleri bulun. Mekaniğini ve sahne arkasında neler olduğunu anlamak için trendi parçalara ayırın, ardından bazı kısımlarını bükün, yeniden paketleyin ve tasarımınıza entegre edin.

Hareketli animasyonlar kullanmak yerine, sayfadaki öğelerin görünümünü etkili bir şekilde yavaşlatan yapay bir gecikme uygulayabilirsiniz. Gördüğünüz profil resimlerinin çoğu mükemmel bir dairesel şekle sahipse, avatarları görüntülemek için işinize yarayacak başka bir şekil bulmaya çalışın. Fotoğrafların çoğu dikdörtgen ise, işi iyi yapabilecek başka bir şekil düşünün.

Tuval dışı geçişler kullanmak yerine, markanızı en iyi yansıtacak belirli bir geçiş veya animasyon türünü düşünün. Daha fazla kurumsal varlık için hızlı bir geçiş en iyi sonucu verebilir; yaratıcı projeler için biraz daha eğlenceli ve yavaş bir geçiş daha uygun olabilir. Waaark, ikincisinin harika bir örneğidir. Tüm geçişler kaldırılsaydı, portföy web sitesi hemen hemen diğer tüm portföylere benzerdi.

Implement Consulting Group, sitede öne çıkan makaleyi vurgulamak için kısa ve ince bir geometrik animasyon kullanır. Ön plan ve arka plan görüntüleri, arka planda geometrik bir şekil ve ön planda bir hikaye önizlemesi ile biraz dengelenmiş ve canlandırılmıştır. Bu, deneyime biraz kişilik kazandırmak için yeterli.

Bir an için devam eden projenizi yeniden tasarlamanız gerektiğini, ancak daire, dikdörtgen veya üçgen gibi temel şekilleri kullanamadığınızı hayal edin. Ne seçersiniz? Hepimiz sonsuz sayıda seçenek olduğunu biliyoruz, ancak neden bu kadar sık ​​sık tahmin edilebilir ve yoğun olarak kullanılan seçeneklerle kısıtlanıyoruz? Ne daire, ne dikdörtgen, ne de üçgen nedir? Eh, eğimli veya eğimli elemanlar değildir. Harfler ve büyük tipografi de değildir. Özel duyarlı çizimler veya ikonografi de değildir. Ne de boşluk, ses ve video. Ne de geçişler ve animasyonlar. SVG maskeleri aracılığıyla gömülü içerikle, bir çokgen aracılığıyla oluşturulan hemen hemen başka hiçbir şekil.

District0x, merkezi olmayan pazarlar ve topluluklardan oluşan bir ağdır. Site, farklı bir deneyim sağlamak için özel şekiller, yumuşak geçişler ve animasyonlar kullanır. Dikdörtgen veya daire yok. Sitede renklerin, arka plan resimlerinin ve tipografinin birlikte ne kadar iyi çalıştığına dikkat edin.

Elbette bundan sonra tüm temel şekillerin göz ardı edilmesi ve bir kenara atılması gerekmiyor. Temel şekillerden kasten kaçınmak, biraz daha özgün bir sanat yönü bulmaya çalıştığımızda yaptığımız ilk egzersizlerden biridir. Temel şekiller olmadan iyi bir fikir bulduğunuzda, gerektiğinde onları az miktarda geri getirmeye başlayabilirsiniz. Bununla birlikte, onlar olmadan tamamen kurtulma şansınız yüksektir.

İnsanları Düşündür

Neden yabancı bir şehri dolaşırken, bir hediyelik eşya dükkanı sahibi çaresizce sokakta dikkatimizi çekmeye ve satış yapmaya çalışırken, aceleyle yanından geçiyoruz; Yine de, köşeyi dönünce sessiz ve mütevazı, güzelce tasarlanmış bir hediyelik eşya dükkanına yavaş yavaş mı giriyoruz? Belki de otantik, dürüst ve saygılı deneyimler aradığımız ve tasarıya uymayan her şeyi görmezden gelme eğiliminde olduğumuz içindir. Fantastik kitabı Blink'te Malcolm Gladwell, insanların deneyimlerine nasıl değer verdiğiyle ilgili ilginç bir fenomeni özetledi.

Gladwell'e göre, değerli hissettiğimizde, dinlendiğimizde ve anlaşıldığımızda deneyimlerimizden daha fazla tatmin olma eğilimindeyiz. Hastalarını dinlemeye, soru sormaya ve not almaya çok fazla zaman ayıran doktorlar, diğer doktorların da onlar kadar yetkin ve bilgili olmasına rağmen, önemli ölçüde daha iyi incelemeler ve daha yüksek puanlar alma eğilimindedir. Sonuçları daha hızlı düzeltmek için atlayabilirler, ancak etkinlikleri hastalarında güven ve bağlantı sağlamaz. Tabii ki öncelikle sorunun çözülmesini istiyoruz ama aynı zamanda sevimli bir kişiliğe, bilgeliğe, uzmanlığa ve insan nezaketine aşık olmayı da seviyoruz.

Arayüzlerimize şefkat katarak insan bağlantılarını etkinleştirebileceğimizi artık biliyoruz. Ancak, bu bağlantılar bir gecede gerçekleşmez - zaman alır. Ancak, kesintileri ve dikkat dağıtıcıları önlemek ve müşterilerin sorunsuz bir şekilde takip etmesi için net bir yol oluşturmak işimizin özü haline geldiğinde, anlık memnuniyet ve görünmez arayüzler çağında bizi nerede bırakıyor? İnsanları düşündürmemiz gerekmiyorsa, ilk etapta duygusal bir bağlantı kurma şansını nasıl elde edeceğiz?

Bunu yavaşlayarak yapıyoruz. Kasten. İnsanları düşündürerek. Fazla değil. Birazcık. Onlara değerli olduklarını hissettirecek, gülümseyecek ya da merak edecek kadar. Sürtünme ekleyerek yapıyoruz. Arada sırada birkaç çarpma, arayüzlerimizde aşılanmış kişilikle doğrudan yüzleşme şansı sunmaya yetecek kadar. Hatta gözlerinde bir tutam olumlu duyguyla bu karışıklıktan hızlı bir şekilde kurtulmayı sağlamak için müşterinin kafasını karıştırabilir. Böylece unutulmaz deneyimler ortaya çıkıyor.

BAO London'da her şey biraz yanlış - boşluk, renk kombinasyonları, form düzeni, hiyerarşi, düğmeler, imleç, ışık kutuları, çizimler. Bu öngörülebilir kalıpların tutarlı bir şekilde kırılması, web sitesinin ilginç ve çekici görünmesini sağlar. Her seferinde bir bileşen olmak üzere, işleri yavaş ve kasıtlı olarak kırmak. Bu normal bir restoran sitesi değil.

Hans Brinker Budget Hostel web sitesinde her şey yolunda ve kasıtlı olarak da yapılıyor. Amsterdam'da rekabet oldukça zor olduğu için hostel oda satmakta zorlanıyordu. Tasarımı geliştirmek yerine, hikayelerine tam olarak uymasını daha da kötüleştirdiler. İyileştiremiyorsan, daha da kötüleştir. Satacak harika bir ürününüz olmasa bile, onun etrafına bir hikaye sarmak ve onu daha ilginç hale getirmek her zaman mümkündür. Sayfadaki hemen hemen her öğe, renk kombinasyonundan tipografiye ve etkileşimlere kadar insanları aktif olarak karıştırır. Yine de işe yaradı - şimdi Lizbon'a genişliyorlar.

Şimdi, elbette, herkes bundan hoşlanmayacak ve bazı insanlar onu sinir bozucu, kafa karıştırıcı, yanıltıcı, çocuksu veya aşırı bulacaktır. Tıpkı bazı insanlarla bağlantı kurmakta zorlandığımız gibi, aynı sorunu insani yönünü göstermeye çalışan bir arayüzde de yaşayabiliriz. Ama buna değmez mi? Belki de her şeyin dikkate değer ölçüde benzer olduğu ve gerçekten hiçbir şeye dayanmadığı zamanlarda, hiçbir duygu uyandırmak yerine, bazı insanlar tarafından gerçekten sevilmemek pahasına ürünümüzün birçok insan tarafından gerçekten sevilmesi için çabalamaya değer.

Instagram'ın kurucu ortağı ve yaratıcı zekası Mike Krieger, NPR'deki “Bunu Nasıl İnşa Ettim” röportajında, insanların hizmeti neden terk ettiğini anlamaya çalışmak için önemli miktarda zaman harcamak yerine, bunun temel ilkelerden biri olduğunu belirtti. Büyümeyi teşvik eden şey, ürününüzü derinden seven ve yıllarca orada kalan müşterilere odaklanmaktır. Mevcut müşterilere ve ürününüz hakkında gerçekten sevdikleri şeylere öncelik vererek, onları yalnızca ürününüze eklemekle kalmaz, aynı zamanda geleneksel açılış sayfalarından çok daha etkili olan kulaktan kulağa pazarlamayı da güçlendirebilirsiniz.

Yine de bu, müşterilerin ürünü terk ederken yaşadıkları deneyimlere iyi bakmamamız gerektiği veya - daha da kötüsü - ayrılmalarını zorlaştırmamız gerektiği anlamına gelmez. Arayüzün insancıl nitelikleri, deneyimin tüm temas noktalarında tutarlı bir şekilde parlamalıdır - ve bu, işe giriş için olduğu kadar işe giriş için de geçerlidir. Aslında, ikincisi o kadar önemli görülmediği için genellikle ihmal edilir - sonuçta, müşteri bununla yüzleşeceği noktada, ürünü neredeyse terk etmişlerdir.

Ayrılma Konuları

Tıpkı insan ilişkilerinin bazen aniden ve kötü bir şekilde sona ermesi ve ardından kalıcı bir olumsuz sonuç bırakması gibi, dijital ürünlerle olan ilişkilerimiz de olabilir. İptal yönlendirmeleri yoluyla gizemli bir şekilde uzun soluklu bir yolculukla bir ürünü terk eden bir kişinin ürünü arkadaşlarına ve meslektaşlarına övmesi pek olası değildir. İnsanlar çok farklı nedenlerle ayrılırlar ve bazen bunun hizmet veya deneyimle hiçbir ilgisi yoktur. Devam etmiş olabilirler veya sadece daha önemli bir şey için para biriktirmek isteyebilirler veya belki de ihtiyaçlarına daha iyi uyan bir alternatif bulmuşlardır.

Ya ayrılış anında onlara derinden değer verildiğini ve anlaşıldığını hissettirirsek? Kabul etmek gerekir ki, Smashing Magazine'in yeniden tasarımıyla, çıkış yapan UX'i tasarlamak için çok fazla zaman harcamadık, ancak deneyimin, arayüzün genel kişiliğine tam olarak uyması bizim için önemliydi. Müşterilerimiz üyelik aboneliklerini iptal ettiklerinde onları saygılı ve hatta teşvik edici bir bildirimle karşılıyor, bu kadar uzun süre bizimle kalmaları için küçük bir hediye veriyor ve kişisel verilerine ne olduğunu açıklıyoruz.

Sonuç şaşırtıcıydı: Aboneliği iptal eden ve gemiden ayrılan UX'ten geçen müşterilerin, bazen bizi arkadaşlarına ve tamamen yabancılara tavsiye etmeye, uzun süredir sadık üyelerden daha istekli olduklarını keşfettik. Sadece kararlarını ne kadar saygılı ve düşünceli bir şekilde ele aldığımıza ve onların gitmelerini zorlaştırmak için siperlerden tüm karanlık hileleri çekmediğimize hayranlar.

Sıkıcıyı İlginç Hale Getirin

Aksi takdirde çok kurumsal ve resmi olan bir deneyime eğlenceli unsurlar eklemek zordur. Bununla birlikte, ister bir düğmeyi gezdirmek, ister bir bölümden diğerine geçmek veya bir form doldurmak kadar basit olsun, belirli bir etkileşim tasarladığınızda, deneyimi biraz daha ilginç hale getirmek için her zaman bir yer vardır.

Örneğin, belirli bir sayfadaki tüm harika form öğelerinden bir "Başlık" girdisinden daha az heyecan verici ne olabilir? Bazen radyo düğmesi karşılıkları veya bir açılır listenin yanında görünerek, müşterilerden herhangi bir bariz sebep olmaksızın medeni durumları hakkında çok kişisel bilgiler istemektedir. Ve bu tam olarak onu güzel bir şekilde parlatabileceğimiz an. Unutulmaz deneyimler yaratmanın harika bir yolu, en beklenmedik noktaya biraz sürpriz eklemektir. Deneyimin en sıkıcı, fark edilmeyen kısmını seçin ve onu ilginç hale getirmeye çalışın. Şimdi, bu etkileşimi daha ilginç hale getirmenin bir yolu var mı?

Boden'de yeni bir hesap oluştururken, müşterilerin Amiral'den Filo Lideri ve Barones'e kadar oldukça sıra dışı seçeneklerle gözleri kamaşıyor. Kim hayatının bir noktasında Filo Lideri olmak istemedi? Bu küçük tasarım kararı, gülümsemelere yol açar ve müşterilerin bu cevheri arkadaşları ve meslektaşlarıyla paylaşmalarını sağlar. Bu arada, seçenekler listesi oldukça uzun.

Austin Beerworks, ABD'deki birçok yerel bira fabrikasından sadece biridir. Müşteriler siteye girdiklerinde, her zaman olduğu gibi, belirli bir yaş sınırını aştığından emin olmak için bir yaş kontrolü istenir. Çoğu insan - dürüst ya da dürüst olmayan bir şekilde - "Evet"i tıklar ve devam eder, ancak müşteri "Hayır"ı tıklamayı seçerse, bir videoya yönlendirilmek için "kendi maceranı seç" yolculuğuna çıkar. kişiliğini en iyi şekilde anlatır.

Pop-up'lardan hoşlanmamayı kim sevmez ki? Ancak, pop-up'lar da ilginç hale getirilebilir. Volkshotel, web sitesinin önünde bir tabela tutan bir kişi olarak güzel bir şekilde resmedilen, oradaki en sinir bozucu derecede keyifli açılır pencereyi kullanıyor. Ziyaretçiler onu kapatmak için üzerine geldiklerinde, açılır pencere gizlice biraz uzaklaşır, bu da onu kapatmayı biraz daha zorlaştırır. Şahsen, her web sitesinin böyle bir pop-up'ını olmasını isterdim.

Tympanus 3D Oda Sergisi, ziyaretçi onunla etkileşime girmeyi seçene kadar özellikle olağanüstü görünmüyor. Bir sergi detay sayfasından diğerine geçerken, sadece başka bir sayfayı yüklemek yerine, kullanıcı bir 3B alan içinde bir odadan diğerine taşınır. Beklenmedik ve unutulmaz.

Web'de biraz daha yaygın bir etkileşim nedir? Formlar, tüm farklı tatları ve görünümleriyle. Aslında, sitenizde bir tür oturum açma ve şifre girişine sahip olma ihtimaliniz yüksektir ve elbette bu oldukça sıkıcı bir etkileşimdir. Bir kullanıcının girdisine yanıt veren bir karakter eklemek, işleri biraz canlandırabilir. Sonuç olarak, insanlar oturum açmadan önce formla etkileşim kurmak için daha fazla zaman harcayabilir. Bu, daha iyi bir etkileşimdir. Darin Senneff'in Yeti karakteri tam da bunu yapıyor.

Strateji basittir: öngörülebilir, sıkıcı bir kalıp seçin, kullanıcı beklentilerini inceleyin ve… beklenmedik ve canlandırıcı bir şey ekleyerek onları acımasızca kırın. Lütfen bunun, sadece onu kırmak için kullanılabilirliği bozmak anlamına gelmediğini unutmayın; daha ziyade, tasarımlarına bazı alışılmamış işlemler ekleyerek bir avuç sıkıcı öğeyi daha ilginç hale getirmekle ilgilidir.

Bir Ağrı Noktası Bulun ve İyice Çözün

Odanın köşesinden fısıldayan şüpheci sesleri duyabiliyor musunuz? Her kurumsal ortam, korkak bir özel illüstrasyonu, ilginç bir animasyonu veya alışılmadık bir etkileşimi sürdüremez. Çarpıcı bir görsel kimlik, dijital varlığınıza tam olarak uymayabilir, özel çizimler bütçenizi aşmayabilir ve yine de müşterinin beklentilerini kırmak istemeyebilirsiniz.

Bu durumlarda, biraz farklı bir rota keşfetmek isteyebilirsiniz. Kişiliğinizi alışılmadık estetik veya etkileşim yoluyla aktaramıyorsanız, bir alternatif, onu üstün problem çözme yoluyla iletmektir . Bu, benzer sitelerde müşterilerin sinirlendiği, hayal kırıklığına uğradığı veya kafası karıştığı zaman acı verici etkileşim anlarını ortaya çıkarmanız ve rakiplerinizin sunduğu deneyimi gölgede bırakmaya çalışmak için deneysel ve görünüşte çok zorlanmış çözümleri gözden geçirmeniz gerektiği anlamına gelir. Bir sorunu üstlenin ve titizlikle ele alın, devam edin.

Şaşırtıcı bir şekilde, çoğu zaman bu ağrı noktaları belirli özellikler değildir; etkileşimin algılanan karmaşıklığı ve şeffaflığın olmaması. Çok fazla form alanı; çok fazla zaman yatırımı; çok yavaş bir etkileşim; çok fazla tekrarlanan soru; çok fazla gereksiz gereksinim. Buradaki açı, görünüşte karmaşık etkileşimleri aldatıcı bir şekilde kolaylaştırmanın, dolayısıyla beklentilerin ötesine geçmenin bir yolunu bulmaktır.

Temel hususlar düzgün bir şekilde ele alınmadığı takdirde, belirli bir acı noktasını çözmenin pek yardımcı olmayacağını söylemeye gerek yok. Erişilebilirlik, performans, uygun görsel hiyerarşi ve duyarlı davranış, her deneyimin temel direkleridir ve ilk önce düşünülmelidir.

SBB Mobile, müşterilerin tren tarifelerini kontrol etmelerine ve tren biletleri satın almalarına olanak tanıyan bir İsviçre seyahat planlayıcı uygulamasıdır. Tek başına, tek bir şey dışında, benzer her uygulama gibi bir gezi planlayıcısı. Uygulama bir "dokunmatik zaman çizelgesi" sağlar; müşteriler ortak varış noktalarını tanımlayabilir ve bunları bir ızgara üzerinde düzenleyebilir. Örneğin Zürih'ten Lozan'a bilet almak için Zürih ve Lozan'ı birbirine bağlayan ızgaraya bir çizgi çekmek ve ardından seçimi onaylamak yeterlidir. Bilet rezervasyonu hiç bu kadar hızlı ve kolay olmamıştı. Bu, özellikle sık sık işe gidip gelen insanlar için, geleneksel olarak karmaşık bir etkileşimi basitleştirmenin harika bir örneğidir. Ayrıca, başka kimsenin sahip olmadığı (henüz) benzersiz bir tasarım imzasıdır.

Olağanüstü bir video oynatma deneyimi sağlamak için ne gerekir? Hızlı atlamalar için bir parkur ve parkurda birkaç işaretli bir başparmak tasarlamak kadar basit gelebilir. Ancak, kullanıcıların sıklıkla karşılaştığı yaygın sorunları incelerseniz, öne çıkan belirli bir sorun bulacaksınız. İnsanlar videoları duraklatma ve daha sonra izlemeye devam etme eğilimindedir, ancak birçok video oynatıcı kullanıcı arayüzünde işlerin bırakıldığı durumu geri yüklemek gereksiz yere karmaşıktır.

Aslında, videoyu duraklattıklarında, yalnızca daha sonra başka bir cihazda geri dönmek için tam zaman damgasını yazan insanlarla karşılaşabilirsiniz - ancak yine de, çoğu kullanıcı arayüzünde tam olarak belirli bir saniyeye atlamak imkansızdır ve çoğu Bir başparmağın pozisyonunu doğru bir şekilde tahmin etmeniz ve tıklamanız gereken süre. Aynı şekilde, çoğu arayüz bu özel durum için tasarlanmadığından, özellikle mobil cihazlarda 30 saniye veya hatta birkaç dakika ileri ve geri atlamak oldukça zor olabilir.

YouTube, gezinme için tamamen erişilebilir kontroller sağlamakla kalmaz, aynı zamanda fareyle üzerine gelindiğinde görünen küçük resimler ve klavye aracılığıyla gezinme ile bir ana kare önizlemesi içerir ve videonun mevcut durumunu saklayarak müşterilerin benzersiz bir URL ile belirli bir zaman damgasını kaydetmesine olanak tanır. Daha sonra izlemeye devam etmek için YouTube ayrıca belgeseller veya öğreticiler gibi birçok uzun video içerir, böylece kullanıcılar parçanın ölçeğini ayarlamak için başparmaklarını dikey olarak yukarı kaydırabilir ve bu nedenle ilgi noktasına daha kesin bir şekilde atlayabilir. Ne yazık ki, yalnızca birkaç kullanıcı bu özelliği biliyor ve etkileşim özellikle kendi kendini açıklayıcı değil, ancak bilenler onu sık sık kullanıyor. Bir acı noktası, iyi çözüldü.

Çoğu akademik yayın, görünüm sırasına göre listelenen düzinelerce son not, dipnot ve referans içerir. Bir okuyucu belirli bir dipnotla ilgileniyorsa, onu okumak için makalenin sonuna atlamalı ve ardından makaleyi okumaya devam etmek için geri dönmelidir. Bu deneyim, sık kullanım için biraz fazla sıkıcı olabilir, ancak hepimizin alışık olduğu varsayılan deneyimdir.

Harvard Hukuk İncelemesi bu sorunu farklı bir şekilde çözmektedir. Referanslar her zaman bahsedildiği yerin hemen yanında yer alır. Her yan not ve dipnot ya daha büyük ekranlarda yanlarda görünür ya da bir akordeon aracılığıyla satır içi görüntülenir. Kullanıcı dipnota dokunduğunda, dipnot bütünüyle genişler ve dipnot bir "kapat" düğmesine dönüşür. Basit bir problem iyi çözüldü.

Ailenizle birlikte harika bir tatil rezervasyonu yapmak istediğinizi, ancak henüz randevunuzu seçmediğinizi hayal edin. Ne zaman gitmek istediğinize dair bir fikriniz var ve bir sonraki tatilinizin tarihleri ​​konusunda biraz esnekliğe sahipsiniz. DoHop, kullanıcılarının seyahat için esnek bir tarih seçmesine olanak tanır; örneğin, yılın belirli ayları veya belirli bir mevsim (belki kış veya sonbahar). Ardından, en iyi fiyatla tarihleri ​​ve zaman aralığını önerir. Birkaç hafta sonra resmi bir hafta sonu tatiliniz varsa ve bir plan yapmak istiyorsanız, RoutePerfect tercihlerinize göre bir rota önerir. Bu, iyi çözülmüş gerçek bir problem vakası. Çoğu seyahat eden web sitesi, gelen ve giden uçuşlar için belirli tarihler ister.

İyi çözümler zaman ve odaklanma gerektirir. Kullanıcıların ilk önce hangi acı noktalarını deneyimlediğini gerçekten anlamamızı istiyorlar. Kullanıcılar bu boya noktalarını dile getirmekte pek iyi olmayabilirler, bu yüzden sorunun kökenine inmemize yardımcı olacak basit bir teknik geliştirdik.

Test uzmanlarından bir rakibin web sitesinde belirli bir görevi tamamlamalarını ve oturumlarını alıştıkları cihazı kullanarak bir web kamerası ile birlikte videoya kaydetmelerini istiyoruz. Bir katalogda bir ürün bulmak, bir perakende mağazasına göz atmak veya navigasyonda belirli bir bölümü bulmak kadar kolay olabilir. Tabii ki, davranışlarını gözlemliyoruz ve olağandışı bir şey varsa sorular soruyoruz, ancak seanslar sırasında meydana gelen çoğu şey fark edilmiyor - hemen fark etmek çok zor. Bu nedenle , kaydedilen kullanıcı oturumlarını ağır çekimde yeniden izliyoruz ve genellikle oynatmayı beş veya altı kez yavaşlatıyoruz.

Tekrarlanan hareketler ve kesin olmayan vuruşların yanı sıra olumsuz yüz ifadeleri ve jestler ararız. Daha spesifik olarak, küçük umutsuzluk anları ararız - hareketler veya jestler hiçbir anlam ifade etmediğinde kısacık kafa karışıklığı anları: bir düğmenin veya bir bağlantının etrafında tekrar tekrar dolaşmak; belirli bir etkileşimli öğeye çok uzun süre odaklanmak; aynı metni arka arkaya birkaç kez seçip, üzerinde hareket etmeden gezinmeye devam etmek. Oynatma oturumları genellikle testten hemen sonra gerçekleşir, bu nedenle hala soru sorma ve testçiyle varsayımlarımızı doğrulama fırsatımız var. Birkaç kayıt bile genellikle eyleme geçirilebilir içgörüler sağlar ve çok fazla kaynak veya yatırım gerektirmez. Müşteri destek günlüklerini incelemek ve destek ekibine yaygın şikayetler hakkında soru sormak da iyi bir fikirdir.

Bazı sorunları belirledikten sonra, daha fazla netlik sağlayacak ve etkileşimi kolaylaştıracak çözümleri keşfediyoruz, bazen de belirli bir görsel dil düşünmeden tasarım yapıyoruz. Buradaki amaç, müşterilerin rakiplerin sitelerinde edindiği deneyimden çok daha üstün bir etkileşim modeli bulmaktır. Daha sonra dijital bir maket üretiyoruz ve aynı müşterileri, henüz her iki arayüzü de görmemiş olan yeni bir testçi grubuyla birlikte aynı görevleri çözmeye davet ediyoruz. Bir etkileşimi tamamlamak için gereken süreyi ölçüyoruz ve onlardan hangi etkileşimi daha basit ve yararlı bulduklarını ve nedenini seçmelerini istiyoruz. Şaşırtıcı bir şekilde, daha hızlı etkileşimler mutlaka daha hızlı olarak algılanmaz ve daha yavaş etkileşimler mutlaka daha yavaş olarak algılanmaz. Buna dayanarak, bu prototipleri yineler ve geliştiririz. Birçok yönden, bu acı noktaları, ilk önce ele aldığımız ve tüm deneyimi içinden yaydığımız deneyimimizin kalbi haline gelir. Bu yüzden bazen bir rakibin web sitesinde test yapmak yerine kendi çözümlerimizi aynı şekilde test ediyoruz.

İyi çözümler, geleneksel olmayan estetik veya etkileşim olsun veya olmasın duygusal bir bağlılığı tetikler. Arayüzünüzde ne kadar çok acı noktasına değinirseniz, deneyimdeki farkın fark edilmesi o kadar olasıdır. Müşterilerin tarayıcı araç çubuklarına yalnızca birkaç web sitesi erişebilir, bu nedenle bu tek sorunlu noktayı ve onlara bunu yapmalarını sağlayacak tek çözümü düşünün.

Varsayılan Olarak Beklentileri Aşmak

İşte size bir soru daha: Yaşadığınız tüm otel deneyimleri arasında en akılda kalanlar hangileri? Bir an için düşünün. Onları bu kadar özel yapan şeyin ne olduğunu ve neden bu kadar unutulmaz olduklarını düşünün. Olağanüstü bir doğal zemin, son derece özenli personel ya da zengin bir kahvaltı büfesi olabilirdi. Ya da tamamen farklı bir şey. Aslında, çoğumuz için İsviçre Alpleri'nde enfes 5 yıldızlı bir dağ evi kadar oldukça ortalama bir yatakhane olabilirdi. Çevre önemlidir, ancak önemli olan tek başına çevre değildir.

Bu deneyimlerin akılda kalıcı olmasının nedeni, ortalama olmamalarıdır. ⁴ Aslında, onlar hakkında *bir şey* istisnai olduğundan, ortalamanın *bir şekilde* tam tersidirler. Bu mutlaka otelin kendisi değil - bu deneyimleri birlikte geçirdiğimiz zamanlama ve insanlar. İyi bir otel, harika deneyimler sağlayan bir ortam sağlar ve iyi bir web sitesi arayüzü de öyle. *Unutulmaz* bir otel, deneyime beklentilerimizi aşan ince bir ayrıntı ekler ve bunu bize önceden söylemeden yapar. Ve unutulmaz web siteleri de öyle.

⁴ Daniel Kahneman'ın doruk noktası kuralına göre, deneyimleri, her anımızın toplam toplamı veya ortalamasından ziyade, büyük ölçüde en yüksek noktasında (yani en yoğun noktasında) ve sonunda nasıl hissettiğimize dayalı olarak yargılama eğilimindeyiz. deneyim. Etki, deneyimin hoş ya da nahoş olmasına bakılmaksızın ortaya çıkar. Deneyimin zirvesi ve sonu dışındaki diğer bilgiler kaybolmaz, ancak kullanılmaz. Bu, deneyimin çok olumsuz ve çok olumlu kısımlarından faydalanabileceğimiz ve duygusal bir bağlantı oluşturmak için ince ayar yapabileceğimiz anlamına gelir.

Houston Üniversitesi'nde araştırma profesörü olan Brene Brown'ın empati üzerine kitaplarında çok güzel bir şekilde ifade ettiği gibi, "iyi tasarım empatinin bir işlevidir, empatik olmayan tasarım ise kendini beğenmiş ve ben merkezlidir." O halde anahtar, kendi gündeminizi zorlamak yerine, müşterilerle hem olumsuz hem de olumlu deneyimlerinde empati kurmaktır. Müşterilerimize göre, birkaç küçük ayrıntıya verilen bu ekstra incelik, dünyadaki tüm farkı yaratabilir. Böylece, şuraya buraya biraz insan nezaketi serpebilir, sözünü bile etmeden sessizce ekstra değer katabiliriz. Bu ince ayrıntı, müşterinin yüklediği fotoğrafa göre özel olarak tasarlanmış bir profil resmi kadar basit olabilir. Tüm ekip tarafından imzalanmış, el yazısıyla yazılmış bir teşekkür notu olabilir ve salyangoz postasıyla gönderilebilir. Ayrıca, bir hata yapıldıktan sonra bir sorunun beklenmedik şekilde basit bir çözümü olabilir.

Bir e-Ticaret ayarında, başarılı ödeme işleminden sonra beş dakika içinde tamamlanmış bir siparişi değiştirme veya iptal etme yeteneği anlamına gelebilir. Bir yandan, müşterinin destek ekibiyle zaman alıcı bir etkileşimden kaçınmasına yardımcı olabilir; ve diğer tarafta, rezervasyon tarihinin yanlış olduğunu fark ettiklerinde müşterinin yüzündeki ifadeyi hayal edin, ancak herhangi bir ücret ödemeden tek bir tıklamayla rezervasyonu iptal etmek mümkündür.

Aynı şekilde, bir arayüz, oturum açmış bir müşteriye kayıtlı bir kupon kodunu kullanmasını önerebilir veya bir süre önce yapılmış benzer ve dolayısıyla potansiyel olarak yinelenen bir rezervasyon hakkında onları bilgilendirebilir. Markanın kişiliği, müşterilerin hataları önlemesine yardımcı olduğu o küçük anlarda en iyi şekilde parlar. Arayüz, iş yerine deneyim adına hareket ederek, müşteriye gerçekten değer verildiğini, saygı duyulduğunu ve yardım edildiğini hissettirir ve bu, herhangi bir dahiyane arayüz kopyasından çok daha iyi çalışır.

Hataları önlemenin bir yolu, uyarlanabilir ve yardımcı hata mesajları yazmaktır. Bu, müşteriler için en belirgin hayal kırıklığı noktalarından biridir ve genellikle genel ve soyut mesajlara geri dönerek kurtarma deneyimine ne kadar az çaba harcandığı dikkat çekicidir. Belki bir satışa mal olmazlar ama markanın uzun vadeli algısına zarar verebilirler. Bir sitedeki önemli etkileşimlerden biri sırasında kurtarılamayan sorunlar yaşayan kişiler, sorunun diğer etkileşimlerde de ortaya çıkmasını bekledikleri için gelecekte siteyi hiç kullanmama eğilimindedir.

Genel olarak, hata mesajları genellikle verildiklerinden biraz daha fazla krediyi hak ediyor. Doğası gereği, müşterinin ilerlemesinin engellendiği noktada görünürler. Bu aynı zamanda müşterilerin yavaşlaması ve sorunu çözmek için tüm dikkatlerini vermesi gereken noktadır. Bu, bir sitedeki tüm deneyim yelpazesi için oldukça sıra dışı bir durumdur ve deneyime biraz kişilik katmak için durumu avantajımıza kullanabiliriz. Arayüzlerimizin beklentileri karşılamadığı her seferinde, bunu hızlı iyileşme sürecinde unutulmaz bir etki yaratmak için bir fırsat olarak görmeliyiz. Bir sıkıntıyı yol boyunca değer görme veya anlaşılma duygusuna dönüştürmeyi başarırsak, doğru yolda ilerliyor olabiliriz.

Yeniden tasarlamaya başladığımızda üzerinde çalışmaya başladığım ilk şeylerden biri, ödeme hata mesajlarımız için ayrıntılı elektronik tabloları alternatif ifadelerle doldurmaktı . Yine de, "en iyi performans gösteren" hata mesajını A/B testi yapmak amacıyla yapılmadı; öncelikle, arayüz aracılığıyla kişiliğin daha iyi ifadelerini keşfetmek için yapıldı. Hata mesajları kendi başlarına pek bir anlam ifade etmese de site genelinde anlatılan hikayeye çok iyi uyuyorlar. Açıkçası, ilk etapta hata yapmayı mümkün olduğunca zorlaştırmaya çalışıyoruz, ancak bir kez bir hata meydana geldiğinde, sorunu çözmek için hem uyarlanabilir hem de eğlenceli metin yazarlığı kullanmaya ve aynı zamanda arada bir gülümsemeye yol açmaya çalışıyoruz.

Seek critical pain points that customers often experience on the site by looking into customer support logs and user interviews, and design these experiences with extra care and attention. It goes without saying that a quirky personality won't help much if the customer isn't able to solve a problem, so take care of the basics first. Ultimately, it doesn't take that much effort to turn negative experiences into positive ones — it's just a matter of having it on your to-do list when designing an interface.

The Two Sides Of Personality

As much as we love sharing our experiences and showing our better side to people around us, we can't stand that one person spending the entire evening talking about themselves. In our interfaces, every time we add yet another parallax transition or a slow bouncy animation to people who have seen it a dozen times already, we are essentially letting the interface highlight its fanciness without helping the user along the way. Eventually, after a few visits, all those whistles and bells that achieve a strong first impact become annoying as they add too much friction.

Kimse ben merkezli karakterleri sevmez ve bu nedenle bir web sitesi de ben merkezli olmamalıdır. Tasarım imzası, insanların web sitesine erişmesinin hiçbir zaman ana nedeni olmadığı için kullanıcı deneyiminde asla lider rolü üstlenmemelidir. Alçakgönüllü olmalı ve gölgelerde kalmalı, dikkat çekici olmalı, ancak sık ziyaretçilerin alıştığı düzgün akışı engellememelidir.

ABD, Pittsburgh'dan bir tasarımcı olan Val Head, animasyon tasarlama konusundaki parlak konuşmasında, çok özel durumlar için ayrılmaları gerektiği için göze çarpan animasyonların çok dikkatli kullanılmasını önerdi; ince mikro animasyonlar ise kullanıcıya yol boyunca eşlik edebilir. Val, animasyonu yalnızca bir pazarlama kampanyası göndermek, bir ürünü favorilere eklemek veya başarılı bir satın alma sayfası görmek gibi hikayenizin temel kompozisyonları için kullanmanızı önerirken, diğer her şey sakin ve normal kalmalıdır. Bu fikri aklımızda tutarak, arayüzlerimizi iki tür etkileşimle tasarlamayı düşünebiliriz: Nadiren kullanılan, öne çıkan “showroom” olanlar; ve sık kullanılan ince “iş gücü” olanlar.

Özel durumlar için özel görsel tedavileri ve etkileşimleri rezerve edin, ancak aynı zamanda tüm sitede tutarlı bir şekilde kullanılan ince tedavileri de yerleştirin. Örneğin Twitter, bir kullanıcı bir tweet'i "kaldırdığında" ayrıntılı bir animasyon kullanır. Bir arkadaşınızı doğum günü veya düğünü için tebrik ettiğinizde Facebook bir konfeti animasyonu görüntüler. Smashing'in durumunda, showroom imzamız olarak canlı renkler ve kedi çizimleri kullanıyoruz; eğme, vurgulu animasyonlar ve bunların altındaki gölgeler, çalışma atımızın imzasını oluşturuyor.

Tasarımlarımızın görüntü alanı veya ağ koşullarına göre ayarlanması fikrine alışkınız, ancak tasarımı kullanım sıklığına göre ayarlamaya da değer olabilir. Tekniğe genellikle aşamalı indirgeme adı verilir, esasen kullanıcılar alıştıkça bir arayüzün dinamik bir şekilde basitleştirilmesidir. Fikir basit: arayüzünüzdeki ana özellikleri belirleyin ve bu özelliklere seviyeler atayın. Ardından, belirli bir zaman diliminde kullanım sıklığını izleyerek kullanıcınızın kullanımını takip edin ve kullanıcı için yeterlilik profilleri oluşturun. Mevcut seviyeye bağlı olarak, elde tutmayı azaltmak için arayüzün bileşenlerini ayarlayabilirsiniz.

Allan Grinshtein'in fark ettiği gibi, bu noktada, kullanıcının belirli bir üründeki uzmanlığının, kullanım olmaksızın zamanla azaldığını (deneyim azalması olarak da bilinir), bu nedenle, bir kullanıcının kullanım sıklığı ve kullanım hacmi azaldıysa, o zaman kullanıcı arayüzünün düşük olması gerekir. sayılarının ne kadar düştüğüne bağlı olarak bir veya iki seviye geriler. Bu otomatik gerileme, ilerlemeyi dengelemek için gereklidir; onsuz, kullanıcı davranışındaki dinamik değişikliklere tam olarak yanıt verme yeteneğinizi kaybedersiniz, diye ekliyor Dan Birman makalesine.

Müşteriler siteyi ne kadar sık ​​ziyaret ederse, onları yavaşlatacak herhangi bir şeyle o kadar az karşılaşmak isterler. Bu nedenle, artan kullanım sıklığı ile showroom imzalarını yavaş yavaş soldurmak, belki de paralaks etkilerini ortadan kaldırmak veya geri dönen kullanıcılar için geçişleri hızlandırmak iyi bir fikir olabilir. Sonunda, her şey koreografi ile ilgili: bir akşam yemeğinde odayı kapsamlı bir hayat hikayesiyle dolduran o kişi olmayın.

Tasarımın Kalbindeki İmza Tasarım süreci efsanevi bir yaratıktır. Herkes bir şekilde kendi iş akışını, araçlarını ve süreçlerini oluşturmayı başarır, ancak herhangi birinin bundan gerçekten memnun kalması çok nadirdir. Kişiliği tasarıma dahil etmek söz konusu olduğunda, onu tasarım sürecine dahil etmek ne zaman ve nerede doğru olur?

Boston'daki Filament Group'tan kıdemli bir UX tasarımcısı olan Patty Toland, 2014'teki konuşmalarından birinde, ekibin duyarlı deneyimler tasarlarken ve oluştururken kullandığı öncelikler hiyerarşisinden bahsetti. Sürecin temel amacı, "en yalın, en hızlı yüklenen, en optimize edilmiş sayfayı" oluşturmaktır. Ana temel, metin, resim, veri, çizelge, ses, video, formlar ve benzerlerinin tümüne geniş çapta erişilebilir ve varsayılan biçimlerinde tam olarak işlev gördüğü tamamen erişilebilir bir deneyim olmuştur ve her zaman öyle olmuştur. Tasarım süreci bağlamında uygulandığında, bileşenler arasında anlamlı işaretleme ve uygun şekilde tanımlanmış ilişkiler anlamına gelir.

Hizmete hazır erişilebilir bileşenlerle, bir sonraki adım tasarımın ölçeğiyle ilgilenmektir. Izgara, içerik boyutu, düzen ve düzenlemenin yanı sıra kesme noktaları ile ilgili kararların devreye girdiği yer burasıdır. Genellikle oranlar, içerik tel çerçeveleri kullanılarak tanımlanacaktır: gri kutulu düşük kaliteli maketler; diğerleriyle orantılı olarak her kutunun yüksekliği mizanpajdaki ağırlığını tanımlar. Bazen içerik blokları boyunca kişilik hakkında notlar ekliyoruz ve ardından görsel tasarım söz konusu olduğunda bunları yansıtıyoruz.

Aslına uygun prototipler yerleştirildiğinde, tasarımın bir sonraki adımı logo, marka renkleri, özel yazı tipleri, geçişler ve karışıma eklenen animasyonlarla stil kazanmaktır. Bazen bu hiyerarşi, React bileşenlerini ve CSS özelliklerini Sass ile yazdığımız sırayla mükemmel bir şekilde eşlenir. Sınıflar için BEM adlandırma gibi görünüşte ilgisiz görevler bile bu sırayla gerçekleşecektir. Prototipler önce soyut fayda sınıfları kazanacak ve süreç boyunca daha ayrıntılı ilişkiler daha spesifik sınıf adları aracılığıyla yansıtılacaktır. Süreç, modüller için net bir sorumluluk ayrımı oluşturur.

Bu süreç ilk başta makul görünüyor, ancak çok kritik bir soruyu gündeme getiriyor: Önce hangi sayfalar tasarlanmalı ve prototip yapılmalı? Tasarlamaya başladığımızda, önce deneyimin kalbini tasarlarız: deneyimin en kritik ve etkili kısmı. Daha spesifik olarak, kilit etkileşimleri keşfederek deneyimin özünü yakalamaya çalışırız, sonra onu yeniden kullanılabilir bileşenlere böleriz ve sonra bu özden dışarıya doğru yayılırız. Çevrimiçi bir dergi için önce okuma deneyimi ve tipografi olacaktır. Bir açılış sayfası için, öncelikle fiyatlandırma planları ve bir özellik karşılaştırması olacaktır.

Bir e-ticaret sitesi için bu, öncelikle olağanüstü alakalı ve kullanışlı bir ürün sayfası oluşturacak bileşenleri araştırmak anlamına gelir. Bu, büyük resim küçük resimleri, kısa metin yazarlığı, şeffaf fiyatlandırma, açık derecelendirmeler ve referanslar, psikolojik bağlantılar ve harekete geçirici mesaj düğmeleri anlamına gelir. Orada alınan görsel tasarım kararları daha sonra arayüzün diğer bölümlerine, özellikle kasadaki formlara, etiketlere ve hata mesajlarına çevrilir. Ancak o zaman, sonunda, deneyim yelpazesinin en uç noktalarında yaşayan kategori sayfalarına ve SSS sayfalarına ulaşırız. Arada bir yerde ön sayfayı keşfederiz, ancak genellikle onu sürecin başında değil de geç tasarlarız - zaten güçlü bir kimlik oluşturduğumuz noktada, bu yüzden ön sayfayı belirgin bir şekilde genişletmek ve keşfetmek için kullanırız. kişiliğin temel özelliklerini sergileyecek cesur bir tasarım.

Bu bölümde daha önce bahsedilen kapsamlı bağlantıları hatırlıyor musunuz? Tasarım sürecinin kritik bir parçası, modülleri birbirine bağlamaktır, böylece arayüzde bir araya getirildiklerinde bağımsız çözümler olarak görünmezler. İlk prototipi oluşturmak için yeterli modülümüz olduğunda, tarayıcıya atlıyoruz ve önce mobili oluşturuyoruz. Bu süreçte nihayet ızgaraya, yerleşime ve yapıya karar veriyoruz ve modüller arasındaki bağlantıları uyguluyoruz. Aslında bizim için imza, her şeyi birbirine bağlayan o sihirli bağdır.

Bu nedenle, deneyimin kalbini tasarlamaya başladığımızda, hatta bazen ondan önce tasarımın imzasını düşünmeye başlarız. Hata mesajlarını araştıran elektronik tablolar, şekiller, renkler ve türlerle ilgili görsel deneyler ve ayrıca kullanıcı röportajları oraya ulaşmamıza yardımcı olur. Sonunda, ilk prototip için verilen kararlar diğer sayfalar için yeniden kullanılabilir, ancak bazen süreci baştan çalıştırmamız gerekir - çünkü açılış sayfası veya ön sayfa gibi bazı sayfalar açıkça bir defaya mahsus olacaktır. Bu noktada katılaşan kişilik özellikleri kullanılarak tasarlandıkları ve inşa edildikleri için diğer her şeyle ilişkiler sergilemeye devam edecekler.

Bu ilişkiler, kullanımdaki arabirimin bileşenleri ve örnekleriyle birlikte bir tasarım sisteminin ana temelini oluşturacaktır. Çoğu zaman stil kılavuzları, bir bileşeni, Sass sınıf adları ve bir kod parçacığıyla birlikte, bu bileşenin sayfadaki diğer modüllerle ilişkili olarak nasıl görünmesi ve davranması gerektiğini belirtmeden, yalıtılmış olarak gösterir. Örnekler hem tasarımcılar hem de geliştiriciler için önemlidir ve uzun vadede tasarım sistemini hem ziyaret etmek hem de güncel tutmak için iyi bir neden sunar.

Kullanıcıların görevlerini yerine getirmek için geçirdikleri akışı anlamak için sık sık kullanıcı yolculuk haritaları oluşturuyoruz ve kişilik özelliklerini göz önünde bulundurarak, bunları, kullanıcı deneyiminin farklı noktalarında bazı kişilik vurguları ekleyerek storyboard'larla bile tamamlayabiliriz. Ayrıca, tasarım sistemleri bağlamında, yalnızca bileşenleri ayrı ayrı değil, aynı zamanda tasarım dilinin bileşenleri kullanarak deneyimi yavaşlatmak veya hızlandırmak veya daha fazla veya daha az etki, dinamik ve statik yerleşim sağlamak için nasıl kullanabileceğini de keşfedebiliriz. kompozisyonlar - sergi salonu ve işgücü etkileşimleri ile yaptığımız gibi.

Hatta bunları yazdırabilir ve bir film şeridine mıknatıslar olarak koyabilirsiniz, böylece tasarımcılar bunları serbestçe hareket ettirebilir ve böylece öngörülebilir bileşenleri öngörülemeyen şekillerde birleştirmenin yollarını keşfedebilir. Andrew Clarke'ın tasarımlarına sanat yönetmenliği ve hikaye anlatımı eklerken yaptığı şey budur - çizgi roman tasarımcılarının çerçeveleri anlatı dinamiklerine göre düzenlemesine ve komik bir hikayeyi düzenlerken yarattığı etkiye çok benzer.

Tasarım imzası, tasarımın tam kalbinde yer alır. Arayüzdeki bileşenleri birbirine bağlayan bir dizidir ve tasarımcıların bir tasarım dilini korurken veya geliştirirken yolda kalmalarına yardımcı olan şeydir. Kişilik özelliklerine karar vermek, öncelikle tasarımın yönünü belirlemeye yardımcı olur ve başlangıçtaki niyetleri ve hedefleri, sonunda deneyimin kalbi haline gelebilecek somut, ayırt edilebilir niteliklere dönüştürmek için yeterince iyi bir kısıtlama olabilir.

Toplama

Bir web sitesinin cazibesine ne kadar aldansak da, nihayetinde bunun asıl amacı keyfine düşkünlük olmamalıdır. Sitenin kişiliğinin ifadeleri, müşterilerle ve ziyaretçilerle duygusal bağlar kurmayı mümkün kılar ve doğaları gereği insan oldukları için özgün, dürüst ve saygılı arayüzlere giden bir yolu ana hatlarıyla belirtirler. Bu yolu ve önümüzde ki sonucu nasıl şekillendireceğimizi bulmak bize kalmış.

Şimdi, herkes için olmayabilir ve belki de her sitenin ilk etapta bir kişiliğe ihtiyacı olmayabilir veya belki de ince olmalı ve kendini burada burada küçük nüanslarla ifade etmelidir. Umarım bu durumlardan herhangi birinde, bu kitabın son sayfasını çevirdiğinizde, benzersiz ve insancıl deneyimler -insanların aşık olabileceği deneyimler- yaratmak için yeterince iyi bir fikir ve teknik alet takımına sahip olursunuz.

Jen Simmons, Rachel Andrew, Andrew Clarke, Dan Mall, Espen Brunborg ve Elliot Jay Stocks'a ilham veren çalışmaları, katkıları ve web'de sanat yönetimi fikrini tartışmaya ve web daha çeşitli ve deneysel. Ayrıca bölümü gözden geçiren Marko Dugonjic (bölümün ana eleştirmeni), Alberta Soranzo, Sashka Maximova, Lilia Zinchenko, Stefan Bucher, Benoit Henry, Nils Mielke, Thord D. Hedengren ve Bertrand Lirette'e de teşekkür etmek isterim. herkesin kullanması için çalışmalarından öğrenilen teknikleri ve dersleri paylaşan fantastik topluluğumuzun yanı sıra. Gerçekten harikasın!

Yepyeni Smashing Book 6 ön siparişe açıldı. Web tasarımı ve geliştirmenin beraberinde getirdiği yeni maceralarla nasıl başa çıkacağınız hakkında bilmeniz gereken her şeyi içerir. Teori yok - sadece pratikte işe yarayan şeyler.