Projektowanie UI i UX

Interfejs użytkownika (UI) łączy artystyczny projekt wizualny z projektowaniem informacji skupionym na komunikacji, wytwarzając menu, układy sklepu, wyświetlacze danych (HUD) oraz inne interfejsy, z którymi interagują gracze. Doświadczenie użytkownika (UX) odnosi się do tego, jak gracze wchodzą w interakcję z grą, jak podejmują decyzje i jak przechodzą od wyboru do wyboru. Chociaż UI i UX często współpracują, UX koncentruje się bardziej na interaktywności i doświadczeniach gracza, a nie na wizualnym i informacyjnym projektowaniu UI.

UI

UI udostępnia ważne informacje, takie jak punkty życia, cele zadań i ceny, które pozwalają graczom podejmować decyzje i poruszać się po grze. Ponieważ często jest to główny sposób, w jaki gry komunikują się z graczem, UI jest kluczowe dla doświadczeń gracza. Źle zaprojektowane UI może sprawić, że gracze będą zdezorientowani i sfrustrowani, co prowadzi do negatywnego wpływu na retention, podczas gdy dobrze zaprojektowane UI może przyczynić się do zaangażowania i monetyzacji. Skutecznie zaprojektowane UI stosuje następujące zasady:

• Priorytetyzacja
• Uwaga
• Język wizualny
• Konwencje
• Spójność

Priorytetyzacja

Udostępnienie najważniejszych informacji w pierwszej kolejności nazywane jest Hierarchią Informacji. Jest to szczególnie istotne w grach, w których gracze często podejmują natychmiastowe decyzje na podstawie ograniczonego zestawu informacji. Przy priorytetyzacji UI, zidentyfikuj to, co jest istotne lub najważniejsze dla doświadczenia gracza i upewnij się, że jest to zarówno dostępne jak i łatwe do zlokalizowania. Zadaj sobie te pytania:

• Co robi gracz w danej chwili?
• Co jest najważniejsze, aby gracz był świadomy, lub miał do tego dostęp?
• Jakie wybory musi podjąć?
• Jakie informacje są mu potrzebne do tych wyborów?
• Jak często będzie się angażował w te wybory?

Ważne informacje i funkcje zmieniają się w zależności od takich czynników, jak rola, jaką gracz przyjmuje, ich lokalizacja w 3D oraz przedmioty, które trzyma. UI można zaprojektować tak, aby prezentować tylko to, co istotne kontekstowo – wymieniając przyciski i informacje w zależności od tego, co jest użyteczne w danym kontekście. Dzięki temu gracze zawsze mają to, czego potrzebują, bez bałaganu wszystkiego, czego nie potrzebują.

Przykłady

Nieistotne elementy mogą powodować dezorientację i rozproszenie uwagi. Spellbound RPG ma prosty, minimalistyczny interfejs, co jest szczególnie istotne dla interfejsów mobilnych, ponieważ małe ekrany mogą łatwo zostać przytłoczone przez nadmiar przycisków, ekranów i tekstu.

W Super Striker League interakcje gracza różnią się w zależności od tego, czy kontroluje piłkę. Bez piłki, gracze mogą sprintować i atakować, aby odzyskać kontrolę. Gdy mają piłkę, przyciski zmieniają się na "Deke" i "Pass", umożliwiając graczom unikanie przeciwników i podawanie piłki. Zmieniając te przyciski, UI pozostaje kontekstowo użyteczne, unikając niepotrzebnych rozproszeń.

W The Survival Game, gracze muszą być świadomi swojego stanu zdrowia i głodu oraz mieć szybki dostęp do mapy, inwentarza i narzędzi. Te informacje pozwalają im podejmować decyzje i priorytetyzować działania niezbędne do przetrwania. Jeśli te informacje lub narzędzia są trudne do znalezienia lub brakuje ich, przetrwanie staje się bardziej wymagające i niepotrzebnie frustrujące.

Uwaga

Pomimo minimalistycznego, priorytetyzowanego i kontekstowego UI, gracze mogą nadal potrzebować pomocy w zlokalizowaniu, czego potrzebują. Projektanci UI mogą zastosować kilka narzędzi wizualnych, aby przyciągnąć i skierować uwagę graczy, takich jak:

• Kolor: Jasne kolory przyciągają uwagę bardziej niż stonowane. Używaj żywych odcieni dla kluczowego tekstu, przycisków i innych elementów, a przyciski mniej istotne stosuj w stonowanych barwach. Taki kontrast zwiększa widoczność i redukuje rozproszenie.
• Rozmiar: Większe elementy są bardziej rzucające się w oczy i postrzegane jako istotniejsze w porównaniu do mniejszych.
• Przestrzeń: Elementy otoczone dużą ilością pustej przestrzeni lub marginesu są bardziej zauważalne.
• Bliskość: Grupy elementów sugerują związek. Umieszczając powiązane funkcje i przedmioty blisko siebie, gracze łatwiej rozumieją ich powiązania i lokalizują je.
• Ruch: Animowane elementy przyciągają uwagę. Nawet drobny ruch może wyróżnić element pośród statycznych odpowiedników. Efekty cząsteczkowe, drgające przyciski i animowane strzałki są często używane w samouczkach do wskazówek.

Kluczowa jest umiar w stosowaniu tych narzędzi. Nadmierne użycie jasnych, ruchomych elementów może przytłoczyć i zdezorientować graczy, zamiast im pomóc.

Przykłady

W UI sezonowego passu Jailbreak pas złotego żółtego znajduje się pod ikonami ekskluzywnymi dla sezonu, przyciągając uwagę do premium nagród i czyniąc je wizualnie odmiennymi od darmowych.

W Dragon Adventures, wizualny priorytet przyznano najwyżej wartościowemu zestawowi monet, zwiększając jego rozmiar i oddzielając go większym marginesem, aby odróżnić go od mniejszych zestawów.

W Tower Defense Simulator zarówno rozmiar, jak i bliskość są używane do wizualnego grupowania i odróżniania codziennych skór wież od codziennych skrzyń.

Język wizualny

Oprócz kierowania uwagi graczy na najważniejsze elementy na ekranie, projektanci UI rozwijają język wizualny, aby pomóc graczom zrozumieć to, co widzą. Język wizualny to zestaw przemyślanych i spójnych wyborów projektowych, które przekazują informacje na pierwszy rzut oka o celu, statusie, powiązaniach i istotności elementu. Język jest tworzony z narzędzi takich jak kształt, kolor i styl. Niektóre zastosowania języka wizualnego obejmują:

Ikony

Ikony mogą wykorzystywać tożsamość wizualną, która przekazuje znaczenie i związki. Na przykład, ikony związane z konkretnymi statystykami mogą dzielić paletę kolorów i podobne kształty, umożliwiając graczom rozpoznanie i zrozumienie ich funkcji.

Przyciski

Jako powszechny sposób wprowadzania przez gracza, przyciski muszą być łatwe do rozpoznania. Umieszczając przyciski w kontenerze, na przykład z kolorem otaczającym tekst lub ikonę, odróżniają się od tła, co sprawia, że wyglądają na interaktywne. Dodanie podświetlenia lub cieni może zwiększyć ich atrakcyjność dotykową, sugerując trójwymiarową głębokość.

Tekst

Nagłówki i tytuły zawierające istotne informacje na wysokim poziomie powinny być większe i wyraźniejsze niż tekst w treści. Należy brać pod uwagę kolory, które są dobrze czytelne i mocno kontrastujące w porównaniu do koloru tła, na którym będą wyświetlane. Wybory stylistyczne, takie jak kolor i pogrubienie, mogą wyróżniać ważne informacje, takie jak przedmioty w grze, statystyki czy umiejętności. Zawsze stawiaj na czytelność przy wyborze czcionki.

Gdy język wizualny zostanie zaprojektowany, można go udokumentować w Przewodniku Stylu, zestawie zasad i przykładów, które pomogą każdemu w zespole zrozumieć, jak stosować ten język spójnie w grze.

Konwencje

Konwencje to powszechnie stosowane wybory projektowe, które można zauważyć w wielu różnych grach. Oto kilka przykładów:

• Symbol X na przycisku zamykającym okno dialogowe po naciśnięciu
• Szary kolor stosowany na przyciskach, które są obecnie niedostępne
• Ikona kłódki nakładana na przycisk lub funkcję, aby wskazać, że gracz jeszcze jej nie zdobył lub nie odblokował

Dzięki ich powszechnemu stosowaniu, gracze zazwyczaj są zaznajomieni z takimi konwencjami. Wykorzystanie tej znajomości może uczynić interfejs bardziej intuicyjnym i zmniejszyć potrzebę usystematyzowanych instrukcji specyficznych dla gry. Grając w gry w swoim docelowym gatunku, można zidentyfikować konwencje, które gracze mogą rozpoznać. Projektant UI może zdecydować się na unikalne podejście dla lepszego dopasowania do swojej gry, ale znajomość tych konwencji informuje ich proces podejmowania decyzji.

Spójność

Cokolwiek projektant UI podejmie decyzję, powinien je stosować konsekwentnie w całej grze. Spójność pomaga graczom uczyć się nawigować po grze sprawniej i zapobiega zamieszaniu oraz frustracji.

Oto kilka przykładów spójności UI w grze:

• Statystyka "Zdrowie" pojawia się na zielono w całym tekście, związanych ikonach oraz pasku zdrowia.
• Kiedy dialog NPC wspomina o przedmiocie w grze, jest on podkreślony na pogrubionym.
• Przyciski zamykające są zawsze kwadratowe, czerwone i zawierają białe X, pojawiają się tylko w górnym prawym rogu okna dialogowego.
• Kiedy gracz nie może sobie pozwolić na przedmiot w sklepie, cena wyświetla się na czerwono.

Te wybory są świadome, mające na celu ułatwienie graczom zrozumienia i nawigacji. Dzięki ich konsekwentnemu stosowaniu, gracze mogą kojarzyć powiązane elementy, identyfikować ważne przedmioty, rozwijać pamięć mięśniową, podejmować szybkie informowane decyzje i spędzać więcej czasu zanurzeni w grze.

UX

Projektowanie UX odnosi się do tego, jak gracze wchodzą w interakcję z grą, jak ujawniają swoje wybory i jak przechodzą od jednego wyboru do drugiego. Chociaż UX często współpracuje ramię w ramię z interfejsem użytkownika (UI), skupia się bardziej na interaktywności i doświadczeniu gracza niż na wizualnym i informacyjnym projektowaniu UI.

Zrozumienie graczy

Głównym celem projektanta UX jest stworzenie interakcji i ścieżek, które są intuicyjne, subtelne i wygodne do używania przez graczy. Proces ten rozpoczyna się od zrozumienia samych graczy, docelowej publiczności dla danej gry. Podczas definiowania graczy danej gry, rozważ następujące kwestie:

• Dane demograficzne: Dane demograficzne pomagają informować wybory projektowe, ujawniając ogólne informacje o grupie graczy. Na przykład, młodsi gracze są generalnie bardziej skłonni grać na urządzeniach mobilnych lub tabletach niż na komputerach osobistych, więc gry skierowane do tej publiczności często kładą nacisk na projektowanie i udoskonalanie mobilnego doświadczenia użytkownika.

• Poziom doświadczenia: Twórcy mogą zdecydować się projektować z myślą o graczach o niewielkim doświadczeniu w grach, znacznej ilości lub gdzieś pomiędzy. Interakcje, które są znane doświadczonym graczom, takie jak naciśnięcie klawisza numerycznego, aby założyć przedmiot w pasku narzędzi, czy naciśnięcie "C", aby się schylić, mogą być nieoczywiste dla graczy bez doświadczenia, co wymaga dodatkowego komunikatu lub szkoleń.

• Znajomość gatunku: Podobnie jak w przypadku ogólnego poziomu doświadczenia, znajomość gatunku odzwierciedla poziom doświadczenia graczy z konkretnym rodzajem gry. Gry, które zaliczają się do popularnych gatunków na Roblox, takich jak RPG, survival horror i strzelanka pierwszoosobowa, prawdopodobnie będą miały wielu potencjalnych graczy, którzy grają w podobny gatunek wcześniej. Gry w innych gatunkach mogą mieć mniej doświadczonych graczy, ale ta luka w doświadczeniu może być przezwyciężona przy pomocy tutoriali i użyteczności.

• Styl gry: Gracze często preferują konkretne rodzaje gry, od rywalizacji i zbierania osiągnięć po eksplorację i współpracę. Preferencje te odzwierciedlane są nie tylko w mechanice gry, którą gracze preferują, ale również wpływają na decyzje UX. Projektanci biorą pod uwagę, które interakcje priorytetyzować, które udoskonalić i które pokazać graczom. Zwracają również uwagę na stan umysłu graczy, gdy angażują się w te interakcje oraz emocje, które chcą w nich wywołać.

Po uwzględnieniu tych czynników i wyborze grupy docelowej graczy (lub grup), poznaj ich lepiej, spotykając się z nimi, grając z nimi i ucząc się o ich celach i preferencjach, aby lepiej informować wybory projektowe.

Projektowanie interakcji

Interakcje to funkcje, które pozwalają graczom doświadczać i komunikować swoje wybory w grze. Projektanci UX pragną, aby te interakcje były intuicyjne i wymagały jak najmniej wyjaśnienia. Aby to osiągnąć, wykorzystują:

• Konwencje
• Metafory
• Informacje zwrotne

Konwencje

Konwencje to projekty i zasady UX, z którymi gracze mogą być już zaznajomieni z innych gier.

Przykłady konwencji obejmują:

• Prośba o bliskość "E", którą wykorzystują deweloperzy Roblox, aby zasygnalizować graczom, że przedmiot jest interaktywny, jeśli staną wystarczająco blisko, aby się pojawił.
• Klawisz "C" umożliwiającyAvatarowi gracza schylenie się, aby mógł przejść pod przeszkodami lub zmieścić się w ciasnych przestrzeniach.
• Klawisze numeryczne umożliwiające zakładanie przedmiotów z paska narzędzi do rąk avatara, aby mogły być używane.
• Wchodzenie w okręgi na ziemi, aby ustawić się w kolejce na mecz.

Konwencje stają się ustalone, gdy konkretna implementacja lub wybór projektu zyskuje popularność ze względu na łatwość użycia. "C" do schylania się, na przykład, jest łatwe do zapamiętania, ponieważ jest pierwszą literą w słowie schylanie, a jego dogodna lokalizacja blisko klawiszy WASD, które gracze używają do nawigacji, czyni go łatwą interakcją do szybkiego wykonania pod presją, co jest idealne, ponieważ próba ukrycia się lub ucieczki przed zbliżającym się zagrożeniem jest powszechnym przypadkiem użycia dla schylania się.

Metafory

Metafory odnoszą abstrakcyjny koncept do bardziej znanego, tworząc skrót do zrozumienia. W tym przykładzie z Spellbound Wizard RPG akt rzucania czarów wykonywany jest poprzez losowanie kart z talii. Interfejs UX oparty na talii osadza abstrakcyjny akt rzucania czarów, który nie ma rzeczywistego wyrażenia, w coś, co gracze mogą łatwiej i szybko zrozumieć.

Informacje zwrotne

Komunikacja od gry do gracza znana jest jako informacje zwrotne. Informacje zwrotne pomagają graczom zrozumieć, że działanie, które podjęli, miało miejsce. Może to pomóc w nauce, jak działa gra, oraz dodać dodatkową warstwę dopracowania, która sprawia, że korzystanie z funkcji jest bardziej satysfakcjonujące. Oto kilka przykładów informacji zwrotnych:

• Wróg wykonujący animację "trafienia", aby wykazać, że otrzymał obrażenia od broni gracza
• Przycisk, który zmienia kolor, aby wskazać stan hover, naciśnięty i zwolniony (wybrany)
• Dźwięk kasy "cha-ching!", który odtwarzany jest, gdy gracz kończy zakupy
• Pasek postępu zapełniający się, gdy gracz wykonuje cele zadań

Kiedy informacje zwrotne są brakujące lub niewystarczające, gracze mogą nie wiedzieć, co osiągnęli, nie rozumieć, czy skutki były dobre czy złe, lub nawet nie wiedzieć, czy funkcja, z której korzystają, działa prawidłowo, czy doświadcza błędów.

Projektowanie ścieżek

Często dla gracza wymagana jest kilka interakcji, aby osiągnąć cel. Projektanci UX interesują się tym, jak gracze poruszają się od jednej akcji lub ekranu UI lub wyboru do drugiego i upewniają się, że te ścieżki są logiczne i wygodne.

Na przykład, aby założyć przedmiot na avatara w Berry Avenue RP, gracz musi:

• Znaleźć i dotknąć przycisku Avatar
• Wybrać kategorię przedmiotu (twarz, głowa, szyja itd.)
• Przewinąć, aby znaleźć interesujący przedmiot
• Dotknąć przedmiotu, aby założyć go na swojego avatara
• Znaleźć i dotknąć przycisku Gotowe, aby zakończyć personalizację avatara

Te kroki razem przedstawiają przepływ personalizacji avatara. Jest to proste i przejrzyste, z jak najmniejszą ilością kroków wymaganych do założenia przedmiotu. Ponieważ gracze nie muszą podejmować wielu działań ani zbyt wiele myśleć o tym, co muszą zrobić, ten przepływ jest niski w tarciu, miarze wysiłku wymaganego do osiągnięcia celu.

Projektowanie wydajnych, niskotarcowych przepływów wymaga starannego rozważenia przypadków użycia. Te przypadki użycia można wyrazić w formie celów gracza, takich jak:

• Chęć szybkiej modyfikacji avatara
• Łatwe znalezienie przedmiotów podczas modyfikacji
• Podgląd przedmiotów przed wyborem
• Łatwe usuwanie przedmiotów po wyborze

Te cele następnie kierują projektowaniem UI i UX tej funkcji:

• Gracze uzyskują dostęp do funkcji personalizacji avatara przez wyraźny przycisk na HUD, i mogą od razu zacząć zakładać przedmioty na swoje awatary
• Zakładki sortują przedmioty w wygodne kategorie, a pole wyszukiwania pozwala graczom wyszukiwać przedmioty bezpośrednio
• Przedmioty są natychmiast podglądane na awatarze
• Gracze mogą usunąć przedmiot, dotykając go ponownie, aby go odznaczyć, lub dotykając go na liście przedmiotów założonych

Projektanci mogą następnie zacząć układać UI i planować kroki, które gracze podejmą, aby zrealizować cel modyfikacji swoich awatarów. Proces ten może być wspomagany przez użycie schematu przepływu, który wizualnie przedstawia działania graczy podczas nawigacji po UI. Te diagramy mogą pomóc zidentyfikować pominięte kroki, problemy, w których kroki są niejasne lub niewygodne, oraz nadmierne tarcie.