Popraw swój UX dzięki przejrzystej hierarchii wizualnej

Pojęcie hierarchii wizualnej jest stosowane w projektowaniu odkąd internet był odległą fantazją i jest tak samo ważny w nowoczesnym projektowaniu produktów, jak w zenicie reklamy drukowanej.

Hierarchia wizualna określa kolejność, w jakiej ludzie przyjmują i przetwarzają informacje na stronie, niezależnie od tego, czy jest ona cyfrowa, czy drukowana. Jest to kluczowa część tworzenia optymalnego doświadczenia użytkownika.

Mówiąc prościej, jasne poczucie hierarchii wizualnej prowadzi ludzi do ważnych treści lub działań. W reklamie drukowanej byłby to slogan, podczas gdy w produkcie cyfrowym może to być przekaz marki lub główne wezwanie do działania.

To niezwykle przydatny sposób tworzenia uporządkowanego i celowego doświadczenia klienta przy jednoczesnym zwiększeniu szans na osiągnięcie strategicznego wyniku.

Oto kilka kroków, które projektanci UX mogą podjąć, aby osiągnąć jasne poczucie hierarchii wizualnej w produktach cyfrowych i przenieść doświadczenia klientów na wyższy poziom.

Zdefiniuj cele UX i marki

Korzystając z różnych metod, wiele zespołów produktowych już definiuje cele UX dla każdej sekcji swojego produktu.

Kształtowanie definicji celów UX poprzez spełnienie kryteriów metodologii SMART (konkretne, mierzalne , możliwe do zastosowania , istotne, możliwe do śledzenia) jest jednym z popularnych sposobów realizacji tego celu. Jest tutaj dobry artykuł na ten temat.

Równie ważne są cele marki. Odzwierciedlają one nadrzędne cele firmy, zarówno z perspektywy marki, jak i komercyjnej. Przykładowe cele marki dla strony docelowej serwisu motoryzacyjnego to: a) ustanowienie marki jako usługi premium oraz b) zachęcanie do wyszukiwania samochodów.

Najłatwiejszym i najskuteczniejszym sposobem udokumentowania celów UX i marki na różnych etapach podróży klienta jest przeprowadzenie wspólnego warsztatu hierarchii wizualnej.

Korzystając z narzędzia do współpracy na szerokim płótnie, takiego jak Milanote, a nawet Sketch, ułóż prototypowe ekrany w szerokim porządku chronologicznym. Zaproś kluczowych praktyków na spotkanie online lub fizyczne, upewniając się, że istnieje reprezentacja zarówno z perspektywy UX, jak i marki.

Następnie udostępnij ekran (lub podłącz do monitora) i zacznij komentować!

Rozpoczyna to proces identyfikacji celów UX i marki dla każdej sekcji doświadczenia klienta i uruchamia strategiczny przepływ pracy, który można wykorzystać przez resztę procesu projektowania.

Ranguj działania i zawartość pod kątem przejrzystej hierarchii wizualnej

Teraz, gdy cele UX i marki są już gotowe, nadszedł czas, aby zdefiniować odpowiednią hierarchię wizualną każdego działania lub fragmentu treści i udokumentować to w celu odniesienia podczas kolejnych prac projektowych.

Przede wszystkim potrzebna jest taksonomia. Najlepiej używać skali od 1 do 3 — 1 oznacza najważniejszą, 3 najmniej.

Korzystając z wcześniej sprofilowanego formatu szerokiego kanwy, zacznij wspólnie dodawać adnotacje do układu prototypu.

W tym przykładzie celem UX jest „ Chcę dowiedzieć się więcej o usłudze tej marki, aby określić, czy pasuje ona do mojego budżetu, potrzeb i preferencji ”. Cele marki to a) ustanowienie marki jako usługi premium oraz b) zachęcenie do wyszukiwania samochodów.

W związku z tym komunikatowi marki Znajdź swój idealny samochód spośród ponad 500 samochodów przypisano hierarchię 1, podobnie jak towarzyszący formularz i wezwanie do działania.

Pomimo jego znaczenia dla nadrzędnego doświadczenia klienta, rzeczywiste logo (i nawigacja) otrzymało 2, ponieważ nie odgrywa tak dużej roli w realizacji celów UX i marki.

Treści pomocnicze są oznaczone 3, co może wydawać się sprzeczne z intuicją. Jest jednak zgodny z przepływem narracji, który zaczyna nabierać kształtu, z głównymi elementami przekazu marki i funkcji „rozpocznij”, następnie logo i nawigacją w celu ustalenia tożsamości premium i struktury usługi, a następnie treści pomocniczych do uspokoić, zapewnić kontekst i zainspirować klienta.

Ponieważ projektanci przyzwyczajają się do uwzględniania hierarchii wizualnej, łatwo jest zacząć doceniać ujawniane przez nią możliwości narracyjne, dodając prawdziwą głębię interfejsom użytkownika i opowiadanym przez nich historiom.

Wbuduj hierarchię wizualną w system projektowania

Teraz, gdy cele i rankingi hierarchii wizualnej są już ustalone, można stworzyć język wizualny, który je ożywi. Załóżmy, że istnieje już system projektowania (jeśli nie, należy to zrobić najpierw!) i że zaprojektowano już szereg elementów interfejsu użytkownika.

Pierwszym miejscem, od którego należy zacząć, jest kompozycja — układ niezbędnych szablonów. Zastanów się, gdzie powinny pojawić się elementy o wysokiej randze (jak opisano wcześniej, nie zawsze jest to najbardziej oczekiwane). Wiele wariantów może być potrzebnych, aby zaspokoić szereg scenariuszy. Aby mieć pewność, że nic nie zostanie przeoczone w dalszej części projektu, projektanci powinni poświęcić czas na ich stworzenie teraz.

W dalszej części procesu projektowania do dokumentu systemu projektowego można dołączyć szereg przykładowych makiet z żywymi symbolami wzorców interfejsu użytkownika (aby projektanci pracujący nad projektem mieli najnowsze wersje).

Po ustaleniu szerokiej koncepcji kompozycji można zacząć tworzyć warianty elementów UI.

Weź skromny nagłówek strony. W tym przykładzie z niedawnego projektu dla firmy konsultingowej HR istnieją trzy warianty systemu projektowania w celu zaspokojenia różnych stopni hierarchii wizualnej.

Projektanci mogą to rozszerzyć za pomocą bloków konstrukcyjnych swojego interfejsu użytkownika. Na przykład w niedawnym projekcie dla popularnej aplikacji rekrutacyjnej głębokość została wykorzystana do rozróżnienia paneli treści — im większa głębokość, tym wyższa hierarchia wizualna.

Hierarchię wizualną można zaprojektować w prawie każdym elemencie języka wizualnego marki: kompozycji, typografii, głębi, obrazowaniu, ikonografii i tonie głosu. Im głębiej idzie projekt, tym bardziej spójne i skoncentrowane będzie doświadczenie klienta.

Zakończyć

Włączenie wizualnego przepływu pracy hierarchii do procesu projektowania skutkuje znacznie lepszymi doświadczeniami użytkowników. Czyni to, dając projektantom możliwość przypisywania rangi różnym rodzajom treści, dzięki czemu interfejsy użytkownika są nie tylko uporządkowane i intuicyjne, ale także umożliwiają realizację podstawowych celów marki.

Przejrzysta hierarchia wizualna nie tylko poprawia UX, ale także wprowadza zrównoważony przepływ pracy, który nadaje procesowi projektowania strategicznego ukierunkowania — niezbędnego w nowoczesnym środowisku projektowania produktu.

Dalsza lektura na blogu Toptal Design:

• Zasady projektowania: wprowadzenie do hierarchii
• Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy
• Odkrywanie zasad projektowania Gestalt
• Kompleksowy przewodnik po architekturze informacji
• Popraw swój UX dzięki zasadom udanego projektowania interakcji