Opowiadanie historii polega na tym, że nieznane staje się znane. Ale projektanci nie są gawędziarzami, a projektowane przez nich miejsca docelowe powinny być zawsze jasne dla użytkownika. Wstawiając małe spoilery do naszych projektów interfejsu użytkownika i psując niespodziankę, projektujemy z myślą o znacznie ulepszonych doświadczeniach użytkowników.
Miłośnicy pop-mądrości często twierdzą, że tak tylko dwie odrębne działki w całej kulturze zachodniej: człowiek wyrusza w podróż, a do miasta przyjeżdża obcy. Krótkie przejrzenie półki z książkami obali tę regułę – chyba że pozwolisz na metaforyczne podróże, w których wszystko pasuje – ale częstotliwość, z jaką ta idea się powtarza, i sens, jaki wydaje się ona, wiele mówi o centralnym miejscu nieznane w zachodnich koncepcjach narracji. W obu fabułach osoba zostaje wprowadzona w coś nowego i nieoczekiwanego, jedyną różnicą jest punkt widzenia, z którego przemawia narracja; w obu przypadkach jest to wątek fabularny nieznane twarzowy znane. Kiedy Clint Eastwood przyjeżdża do podupadłego miasta w Idaho w XIX wieku, nasza ciekawość jego tożsamości jest motorem naszego zaangażowania. Kiedy czytamy Tolkiena Władca Pierścieni trylogii, nigdy nie mamy wątpliwości, że Frodo w końcu dotrze do Mt Doom, interesuje nas to, co wydarzy się po drodze. Kluczem do opowiadania historii jest to, że istnieje nieznane i że nieznane stanie się znane.
Projektanci nie są gawędziarzami
Wielu projektantów określiło siebie mianem „gawędziarzy”, ale jest to po prostu kiczowaty sposób na określenie komunikacji. Aby opowiedzieć historię, w ramach przygotowań do wielkiego odkrycia musimy sprzyjać nieznanemu, a główną przeszkodą w takim podejściu jest to, że doświadczenia internetowe – a twierdzę, że większość spotkań z projektowaniem – są nieliniowe i otwarte. Design jest rzeczywiście znacznie bliższy poezji. Poezja zazwyczaj istnieje w małych kawałkach, w których poruszane są tematy otwarte na interpretację. Zadaniem projektanta jest nie tylko konstruowanie historii, ale wyjaśnianie jej w sposób możliwie dyskretny.
Używanie spoilerów w mikrointerakcjach
Jaki jest najbardziej wciągający element Szczęki? Czy to Brody kłóci się z burmistrzem? Czy to Quint opowiada historię Indianapolis? Czy to romans Hoopera z Ellen Brody (tak, naprawdę, przeczytaj książkę!)? Nie. To muzyka. Gdy tylko ten rekin zacznie grać na wiolonczeli, my wiedzieć nadchodzi, jego nadejście jest dosłownie zapowiadane. [Incidentally, Jaws is an interesting example of a film in which both a stranger (the shark) comes to town, and then a man goes on a journey (to sea).]
Możemy zaangażować się w projektowanie, stale dorzucając spoilery i sugerując, co nadchodzi, za pomocą naszej własnej muzyki na wiolonczelę. W tym celu używamy mikrointerakcji – prostych komponentów interfejsu użytkownika, zawierających wyzwalacz i informację zwrotną. Część mikrointerakcji zawierająca informacje zwrotne to miejsce, w którym można wstawić spoiler. Działa poprzez podgląd danych, które w przypadku doświadczenia liniowego zostałyby wprowadzone na późniejszym etapie. Kluczem jest przekazanie danych dalej.
Miniatury
Zacznijmy od czegoś znajomego: klasycznym przykładem przekazywania informacji jest miniatura. Miniaturka to podgląd większego elementu, wizualny przewodnik po tym, czego można się spodziewać po drugiej stronie łącza.
Jacky Zima to agencja talentów skupiająca artystów, ilustratorów i animatorów. Ze względu na różnorodność talentów najlepszym sposobem przeglądania prac są tradycyjne miniatury.
Miniaturki nie muszą być tradycyjne. Aleksandra Nacache’a jest dyrektorem artystycznym i projektantem interaktywnym, którego witryna wykorzystuje podglądy elementów projektu, a nie reprodukcje projektu w miniaturze.
Bao to tajwańska restauracja z trzema lokalizacjami w Londynie. Ilustracje lokalizacji działają jak miniatury i sugerują nie tylko wygląd restauracji, ale także możliwe doświadczenia.
Dzień wolny to studio projektowe z siedzibą w Glasgow. Miniatury na ich stronie stanowią główny element kierunku artystycznego i ustalają estetykę własnej marki.
5-minutowe czytanie
Dawniej jedynym sposobem, aby dowiedzieć się, ile czasu zajmie przeczytanie takiego artykułu, było sprawdzenie godziny, przeczytanie artykułu i ponowne sprawdzenie godziny. Biorąc pod uwagę jego wykorzystanie, jednym z najskuteczniejszych elementów interfejsu użytkownika w ostatnich latach jest pomocny mały wskaźnik, który informuje nas, ile czasu zajmie przeczytanie artykułu. Spopularyzowany przez witryny takie jak Medium, nie wymaga śledzenia wzroku ani obliczania szybkości czytania, szacunkowy „5 minut czytania” opiera się na liczbie słów – 125 słów oczekuje się, że zostanie przeczytany w ciągu 30 sekund lub w okolicy. Jednak nawet te rażąco uogólnione dane są wystarczające, aby umożliwić użytkownikom podejmowanie świadomych decyzji dotyczących ich zaangażowania w witrynę, artykuł lub produkt. Monotonia Australijskie radio projektowe jest przerywany jedynie kontrastującą czerwienią używaną do oznaczania stanów najechania. Jedyny element, który wykorzystuje czerwień bez interakcji? Głowica odtwarzająca określająca położenie i całkowitą długość.
Sekwoja jest spółką typu venture capital z siedzibą w Kalifornii. Profile firm technologicznych zajmują ich stronę docelową. Każdy profil ma numerowaną pozycję, a animowany licznik czasu na suwaku zwraca Twoją uwagę na dokładnie to, na którym etapie procesu się znajdujesz.
Vimeo zawiera jedne z najlepszych filmów w Internecie. Mogli wyświetlić dowolne informacje – producenta, temat, tytuł – po najechaniu kursorem na miniatury. Wybrali czas trwania.
Cinelli to najfajniejsza marka rowerów we Włoszech. Suwak produktów zawiera ponumerowane przyciski „następny” i „poprzedni”. Do przekazania znaczenia wystarczą same strzałki, ale projektanci wykorzystali te dane poprzez prosty dodatek do przycisków.
Dane kwalifikacyjne
Jednym z najprostszych sposobów ulepszenia interfejsu jest kwalifikowanie danych za pomocą znaczącego kontekstu. Kluczem do tego nie jest podawanie zbyt wielu informacji, a jedynie proste podsumowanie, które można odczytać na pierwszy rzut oka.
Pomóż Skautowi to usługa SaaS obsługi klienta. Ich pulpit nawigacyjny wyświetla kluczowe wskaźniki, takie jak łączna liczba rozmów, które nie miałyby znaczenia bez dodania strzałki i wartości procentowej wskazującej, czy jest to poprawa, czy porażka.
Rezerwacja biletu z Lyon do Bordeaux jest jeszcze prostsza, gdy Linia kolejowa wyświetla pasek pod czasem podróży, aby wizualnie wskazać zarówno czas trwania, jak i liczbę zmian.
Mapy i pewność
Kiedy przewidujemy podróże, zwłaszcza podróż w nieznane, często demistyfikujemy to doświadczenie za pomocą mapy. W prawdziwym świecie mapa przypomina miniaturę celu podróży. W projektowaniu interfejsu użytkownika wykorzystywane przez nas mapy wyjaśniają architekturę informacji. Etykiety są jednym z najbardziej złożonych obszarów architektury informacji, ponieważ opierają się na żargonie, często żargonie wyłącznie firmowym. Dodanie wolnej od żargonu mikrokopii umożliwia podgląd miejsca docelowego dla użytkowników i pomaga im znaleźć drogę do właściwych informacji.
Krata to SaaS do zarządzania wydajnością, ale ich produkty są bardzo skoncentrowane na firmie. Rozwiązują ten problem sygnalizując kluczową cechę każdego produktu w swoim menu.
Thriva pomaga monitorować stan zdrowia za pomocą badań krwi, które można wykonać w domu. Mają trzy poziomy produktów, które są jasno wyjaśnione w ich menu.
Transakcje finansowe są technicznie złożone. Pled oferuje różnorodne produkty API dla programistów. Ich menu nie tylko wyjaśnia najważniejsze cechy każdego produktu, ale także prezentuje dwa potencjalne rozwiązania w oparciu o kombinacje produktów.
Kluczem do skutecznego projektowania interfejsu użytkownika są spoilery
Opowiadanie historii jest przeciwieństwem skutecznego projektowania, ponieważ historie ze swej natury podporządkowują się nieznanym elementom doświadczenia. Design natomiast stara się eliminować nieznane poprzez wyjaśnianie. Kiedy przekazujemy dane do projektu, zazwyczaj robimy to w prosty sposób. Pojedynczy fragment dobrze wybranych danych może wyjaśnić cały proces. Mikrointerakcje to idealny sposób na wstawienie takich „spoilerów”, które umożliwiają użytkownikom tworzenie własnych doświadczeń, zawsze wiedząc dokładnie, gdzie się znajdują w szerszym kontekście. Ujawniając więcej niż liniowa historia, angażujemy użytkowników znacznie skuteczniej i projektujemy doświadczenia, które są solidne i przyjemne w użyciu.
