Mystery Meat Navigation

Słyszeliście kiedyś o pojęciu Mystery Meat Navigation? A może widzieliście poniższego mema stworzonego przez Luka Wroblewskiego kilka lat temu?

Nawet jeśli nie znacie, to z pewnością nie raz trafiliście na stronę lub appkę, w której z tak zwanym Mystery Meat Navigation się spotkaliście. Dzisiaj o tym, dlaczego warto na to zjawisko uważać!

Czym jest Mystery Meat Navigation?

Pojęcie, o którym wspominam nawiązuje do mięsa niewiadomego pochodzenia – wiecie, te wszystkie produkty z przemielonymi dzióbkami i chrząstkami. Kiedy patrzymy na produkt i nie wiemy co w nim jest, możemy robić różne założenia. Kiedy chodzimy po sklepie, chwytamy jakiś produkt, możemy zerknąć na opakowanie, nazwę, dopiski i oczywiście skład. Natomiast jeśli popatrzymy na interfejsy graficzne zdarza się, że poza obrazkiem (np. ikonką), nie ma nic więcej. I wtedy możemy domyślać się, co się znajdzie po interakcji z nim, zakładając, że rozpoznamy go w ogóle jako element interaktywny.

I o tym jest właśnie Mystery Meat Navigation. To takie zjawisko, w którym patrzymy na elementy nawigacyjne i nie wiemy czego możemy się spodziwać. Co istotne – pojęcie tyczy się zarówno ikonek stosowanych w menu, jak i tekstów. Tak, tak, teksty też możemy źle zaprojektować!

Przykład ze strony muzeum – czym są ikonki obok hamburger menu?

Jak to naprawić?

Dlatego stosowanie samych ikon w projektach graficznych bywa zdradliwe. Z jednej strony, pozwalają nam zaoszczędzić dużo miejsca, niosą jakiś charakter marki, mają swój styl, mogą być po prostu dekoracją. Niestety problem zaczyna się, gdy osoby korzystające z interfejsu muszą zrozumieć do czego te ikony służą? Dobrą praktyką jest stosowanie ikon czytelnych, zrozumiałych i w miarę możliwości jednoznacznych. Idealnie, jeśli mają pod sobą podpisy, żeby uniknąć nieporozumień.

Jeśli będziemy stosować ikony, które mogą mieć różne znaczenie, jest szansa, że nasi użytkownicy w ogóle nie będą z nich korzystać, bo założą błędnie, że znajdą tam informacje im do niczego niepotrzebne.

To samo tyczy się tekstów (warto przy okazji przypomnieć sobie o UX Writingu, odsyłam do świetnej rozmowy o słowach w interfejsach właśnie). Jeśli tworzymy nawigację dla bloga, sklepu internetowego czy serwisu informacyjnego, powinniśmy upewnić się, że etykiety tekstowe informują nas o treściach, które znajdziemy w środku. Które bez klikania lub rozwijania powiedzą nam możliwie najszybciej, czego możemy się spodziewać.

Testy nawigacji

Kiedy na Instagramie opowiadałam o tym zjawisku, padło bardzo dobre pytanie:

To co z wszystkimi burger menu i dwoma lub trzema kropkami opcji jak np. w WhatsApp czy IG? Kiedy jest to uzasadnione a kiedy nie?

Hamburger menu ma już za sobą sporą historię i w rozwiązaniach mobilnych dość często się z nim spotykamy. Nie oznacza to wcale, że każda osoba korzystająca z naszego interfejsu, zinterpretuje ten element jako rozwinięcie nawigacji. To samo będzie tyczyło się wszystkich innych elementów na ekranie. Nie wiemy przecież, jak dużą skuteczność mają ikony w innych produktach (które prawdopodobnie testują jednocześnie kilka wariantów na ogromnych grupach odbiorców).

Możemy przyjąć założenie, że popularność stosowanego hamburger menu lub ikony trzech/dwóch kropek, może wpływać na większą rozpoznawalność tych ikon. Ale nie będziemy mieć tej pewności, dopóki po prostu tego nie sprawdzimy z naszymi użytkownikami. W tym celu, najprostszym rozwiązaniem będzie po prostu przeprowadzenie szybkich testów użyteczności. Dzięki nim odkryjemy wszystkie przypadki zastosowania tytułowego Mystery Meat Navigation.

You May Also Like
projektowanie interfejsow graficznych
Read More

UI: spójność w interfejsie graficznym

Projektowanie interfejsów stało się szalenie popularną specjalizacją. Nic dziwnego, są teraz wszędzie. W telefonie, na komputerze, w bankomacie, samochodzie, a nawet lodówce. Co więcej,…
podstawy web designu
Read More

Web Design – podstawy

O co w ogóle chodzi w tym całym web designie? Od czego zacząć naukę? Dziś na YouTubie, blogu i fejsie rusza tydzień Web Designu.