UX'inizi Net Görsel Hiyerarşi ile Güçlendirin

Görsel hiyerarşi kavramı, internet uzak bir fantezi olduğu için tasarımda uygulanmıştır ve modern ürün tasarımında basılı reklamın zirvesinde olduğu kadar önemlidir.

Görsel hiyerarşi, ister dijital ister basılı olsun, insanların bir sayfadaki bilgileri alma ve işleme sırasını belirler. Optimum bir kullanıcı deneyimi yaratmanın hayati bir parçasıdır.

Basitçe söylemek gerekirse, net bir görsel hiyerarşi duygusu, insanları önemli içeriğe veya eylemlere yönlendirir. Basılı bir reklamda bu şerit çizgisi olurken, dijital bir üründe marka mesajı veya birincil harekete geçirici mesaj olabilir.

Stratejik bir sonuca ulaşma şansını arttırırken, düzenli ve amaca yönelik bir müşteri deneyimi yaratmanın inanılmaz derecede faydalı bir yoludur.

İşte UX tasarımcılarının dijital ürünlerde net bir görsel hiyerarşi duygusu elde etmek ve müşteri deneyimlerini bir sonraki seviyeye taşımak için atabilecekleri birkaç adım.

UX ve Marka Hedeflerini Tanımlayın

Birçok ürün ekibi, çeşitli yöntemler kullanarak ürünlerinin her bölümü için UX hedeflerini şimdiden tanımlıyor.

SMART metodolojisi kriterlerini (Spesifik, Ölçülebilir, İşlem yapılabilir, R elevant, T raflanabilir ) karşılayarak UX hedeflerinin tanımını şekillendirmek, bunu yapmanın popüler bir yoludur. Bununla ilgili güzel bir makale var burada.

Aynı derecede önemli olan marka hedefleridir. Bunlar, hem marka hem de ticari perspektiflerden işletmenin kapsayıcı hedeflerini yansıtır. Bir otomotiv hizmeti açılış sayfası için marka hedeflerine bir örnek: a) markayı birinci sınıf bir hizmet olarak oluşturmak ve b) araba aramalarını teşvik etmek olabilir.

Müşteri yolculuğunun çeşitli aşamalarının UX ve marka hedeflerini belgelemenin en kolay ve etkili yolu, işbirlikçi bir görsel hiyerarşi çalıştayı yürütmektir.

Milanote ve hatta Sketch gibi geniş bir tuval işbirliği aracı kullanarak, prototip ekranlarını geniş kronolojik sırayla düzenleyin. Hem UX hem de marka perspektiflerinden temsil edildiğinden emin olarak kilit uygulayıcıları çevrimiçi veya fiziksel bir toplantıya davet edin.

Ardından, ekran paylaşın (veya bir monitöre takın) ve açıklama eklemeye başlayın!

Bu, müşteri deneyiminin her bölümü için UX ve marka hedeflerini belirleme sürecini başlatır ve tasarım sürecinin geri kalanında kullanılabilecek stratejik bir iş akışını harekete geçirir.

Net Görsel Hiyerarşi için Sıralama Eylemleri ve İçerik

Artık UX ve marka hedefleri yerine oturduğuna göre, her eylemin veya içerik parçasının uygun görsel hiyerarşisini tanımlamanın ve sonraki tasarım çalışmaları sırasında referans olması için bunu belgelemenin zamanı geldi.

Her şeyden önce, bir taksonomiye ihtiyaç vardır. 1'den 3'e kadar bir ölçek kullanmak en iyisidir - 1 en önemli, 3 ise en az.

Daha önce profillendirilen geniş tuval biçimini kullanarak, prototip düzenine ortak açıklama eklemeye başlayın.

Bu örnekte, “ Bütçeme, ihtiyaçlarıma ve tercihlerime uygun olup olmadığını belirlemek için bu markanın hizmeti hakkında daha fazla bilgi edinmek istiyorum ” şeklinde bir UX hedefi vardır. Marka hedefleri, a) markayı birinci sınıf bir hizmet olarak kurmak ve b) araba aramalarını teşvik etmektir.

Bunun ışığında, marka mesajı 500'den fazla araba arasından ideal arabanızı bulun mesajına , beraberindeki form ve CTA'da olduğu gibi 1 hiyerarşisi atanmıştır.

Kapsamlı müşteri deneyimi için önemine rağmen, gerçek logo (ve navigasyon), UX ve marka hedeflerinin karşılanmasında büyük bir rol oynamadığından 2 olarak atanmıştır.

Destekleyici içerik, mantıksız görünebilecek bir 3 olarak işaretlenmiştir. Bununla birlikte, ana odak noktası olarak marka mesajlaşma ve "başla" işlevselliği, ardından hizmetin premium kimliğini ve yapısını oluşturmak için logo ve navigasyon, ardından destekleyici içerik ile şekillenmeye başlayan anlatı akışına bağlı kalır. güven vermek, bağlam sağlamak ve müşteriye ilham vermek.

Tasarımcılar görsel hiyerarşiyi hesaba katmaya alıştıkça, kullanıcı arayüzlerine ve anlattıkları hikayelere gerçek derinlik katarak ortaya çıkardığı anlatı olanaklarını takdir etmeye başlamak kolaydır.

Tasarım Sisteminde Görsel Hiyerarşi Oluşturun

Artık hedefler ve görsel hiyerarşi sıralamaları belirlendiğine göre, onları hayata geçirecek görsel dil oluşturulabilir. Halihazırda bir tasarım sisteminin mevcut olduğunu (eğer değilse, önce bu yapılmalıdır!) ve bir dizi UI öğesinin zaten tasarlandığını varsayalım.

Başlamak için ilk yer, gerekli şablonların düzeni olan kompozisyondur. Yüksek dereceli öğelerin nerede görünmesi gerektiğini düşünün (daha önce açıklandığı gibi, her zaman en çok beklenen şey değildir). Bir dizi senaryoyu karşılamak için birden fazla varyasyon gerekebilir. Projede daha sonra hiçbir şeyin gözden kaçırılmadığından emin olmak için tasarımcılar bunları şimdi oluşturmak için zaman ayırmalıdır.

Tasarım sürecinin ilerleyen aşamalarında, tasarım sistemi belgesine, UI modellerinin canlı sembolleriyle birlikte bir dizi örnek maket eklenebilir (böylece proje üzerinde çalışan tasarımcılar en son sürümlere sahip olur).

Kompozisyon hakkında geniş bir fikir oluşturulduktan sonra, UI öğelerinin varyantları oluşturulmaya başlanabilir.

Mütevazı sayfa başlığını alın. Bir İK danışmanlığı için yeni bir projeden alınan bu örnekte, değişen görsel hiyerarşi sıralarını karşılamak için tasarım sisteminde üç değişken vardır.

Tasarımcılar, kullanıcı arayüzlerinin yapı taşlarıyla bunu genişletebilir. Örneğin, popüler bir işe alım uygulaması için yakın zamanda yapılan bir projede, içerik panellerini farklılaştırmak için derinlik kullanıldı - derinlik ne kadar büyükse görsel hiyerarşi de o kadar yüksek.

Görsel hiyerarşi, bir markanın görsel dilinin hemen hemen her öğesinde tasarlanabilir: kompozisyon, tipografi, derinlik, görüntü, ikonografi ve ses tonu. Tasarım ne kadar derine inerse, müşteri deneyimi o kadar uyumlu ve odaklı olacaktır.

Sarmak

Tasarım sürecine görsel bir hiyerarşi iş akışını dahil etmek, önemli ölçüde daha iyi kullanıcı deneyimleri sağlar. Bunu, tasarımcılara farklı içerik türlerine bir sıralama atama yolu vererek, yalnızca düzenli ve sezgisel hissetmekle kalmayıp aynı zamanda temel marka hedeflerine ulaşılmasına izin veren kullanıcı arayüzleri sağlayarak yapar.

Net görsel hiyerarşi, yalnızca UX'inizi güçlendirmekle kalmaz, aynı zamanda tasarım sürecine stratejik bir odak sağlayan sürdürülebilir bir iş akışını devreye sokar - modern bir ürün tasarım ortamında çok önemlidir.

Toptal Tasarım Blogunda daha fazla okuma:

• Tasarım İlkeleri: Hiyerarşiye Giriş
• Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları ve Yaygın Hatalar
• Tasarımın Gestalt İlkelerini Keşfetmek
• Kapsamlı Bilgi Mimarisi Rehberi
• Bu Başarılı Etkileşim Tasarım İlkeleri ile UX'inizi Güçlendirin