Tworzenie aplikacji4 min czytania12.09.2019

Mapa ekranów aplikacji – podstawa dobrego UX/UI design

Piotr Niedźwiecki

UX/UI Designer

Spis treści

Czym jest mapa ekranów?

Mapa ekranów to schemat przedstawiającą w graficzny sposób poszczególne ekrany aplikacji, ich położenie (hierarchię) i wzajemne powiązania.

Rola mapy ekranów

Mapa pozwala na zobrazowanie liczby istotnych w projekcie ekranów (o których wiadomo na tym etapie) i wzajemnych relacji pomiędzy nimi. Dzięki niej możliwie jest oszacowanie pracochłonności projektowania UX/UI.

Jak stworzyć mapę ekranów?

Mapę ekranów można wykonać za pomocą dowolnego narzędzia. Może to być program do grafiki komputerowej np. Adobe Illustrator, Photoshop lub do tworzenia diagramów np. draw.io, whimsical. Ważne jest, aby mapę można było łatwo i szybko edytować. Powinna być przejrzysta i czytelna zarówno dla całego zespołu, jak i klienta.

Konwersja user stories do mapy ekranów

Poszczególne historyjki z “User stories” są grupowane w celu określenia konkretnych ekranów w aplikacji. Kolejne ekrany nanoszone są na mapę z uwzględnieniem hierarchii między nimi oraz możliwych akcji (przejść) wykonywanych przez użytkownika.

Przykłady map ekranów

Pierwszym przykładem mapy ekranów jest mapa ekranów dla aplikacji Truckersky, własnego rozwiązania itCraft.

Kolejnym przykładem jest efekt naszych warsztatów UX/UI dla aplikacji, która służy wynajmowaniu hulajnóg na minuty

Czym jest User Flow?

“User flow” to diagram przedstawiający ścieżki jakimi może podążać użytkownik w aplikacji. Wyszczególnia momenty decyzyjne, przedstawia możliwe scenariusze. “User flow” jest pomocny podczas analizowania dróg/sposobów jakimi użytkownik może dotrzeć do celu – rozwiązać dany problem.

Rola User Flow

Stworzenie User Flow pozwala uniknąć rozwiązań wpływających na: wydłużenie czasu działania aplikacji/reakcji użytkownika, łatwość
z jaką użytkownik porusza się w aplikacji. Dzięki niemu można określić tzw. “pain points”, i z wyprzedzeniem usprawnić proces np. poprzez wyeliminowanie ekranów nadmiarowych.

Czym jest jest “low-fi wireframe”?

“Low fidelity wireframes” przedstawiają w uproszczony sposób strukturę/szkielet ekranów aplikacji. Ekrany prezentowane są w sposób ogólny, w odcieniach szarości.

Nacisk kładziony jest na odpowiednie rozłożenie kluczowych elementów UI, hierarchię między nimi. Ekrany charakteryzuje łatwość z jaką można je narysować, edytować, powielić. Dzięki powyższym “low-fi wireframes” powstają w bardzo krótkim czasie. Dają przez to możliwość omówienia ekranów z zespołem, klientem i wprowadzanie ewentualnych zmiany, już we wstępnej fazie projektu.

Mogą być przygotowane na kartce papieru, bądź też w dedykowanym do tego programie typu: Sketch, Proto.io, UXPin, Axure, Balsamiq. Wybór narzędzia jest zupełnie dowolny.

Czym jest “hi-fi wireframe”?

“High fidelity wireframe” jest rozwinięciem, uszczegółowioną strukturą “low-fidelity” (powyżej). Zawiera dopracowane elementy UI (odpowiednie dla danej platformy np. iOS), teksty, grafiki nawiązujące do przyszłego wyglądu aplikacji.

Jaka jest różnica pomiędzy low-fi a high-fi wireframes?

Główną różnicą pomiędzy tymi dwoma podejściami do “wireframes” jest poziom szczegółowości.
W “low-fidelity wireframes” skupiamy się na zaprezentowaniu głównych funkcjonalności, nie przejmując się za bardzo wyglądem elementów, treściami, obrazkami – zastępujemy je np. pustymi kontenerami (placeholder’ami).

“Low-fidelity wireframes” nie są odzwierciedleniem tego jak aplikacja będzie wyglądała w przyszłości. Przedstawiają ogólny zamysł, wizję aplikacji, powstają szybko. Pomagają w dyskusji z zespołem oraz klientem w procesie koncepcyjnym, podczas ustalania zakresu.
W “high-fidelity wireframes” doprecyzowujemy ustalone ekrany “low-fi”. Są one bardziej pracochłonne. Przechodzimy na “wyższy poziom szczegółowości” – nadajemy odpowiednie (rzeczywiste) kształty, teksty, elementy UI, dbamy o ich rozmieszczenie, ustalamy hierarchię, w tym także tekstów i obrazków.
“High-fidelity wireframes” dają lepszy obraz tego jak aplikacja będzie wyglądać w przyszłości.

Dlaczego warto korzystać z UI Kit w procesie UX/UI design

Przy projektowaniu interfejsów aplikacji np. dla urządzeń Android, iOS należy pamiętać, że posiadają one, charakterystyczne dla danej platformy rozwiązania i wygląd. Niektóre elementy UI iOS, Android mogą zasadniczo różnić się w wyglądzie, bądź działaniu np. buttons, date pickers, input fields, notifications. Producenci mobilnych systemów Apple i Google udostępniają na swoich stronach kompletne wytyczne (design guidelines), a także gotowe do pobrania komponenty.
Chcąc ułatwić sobie proces projektowania i zaoszczędzić czas (nie muszą “rysować elementów od zera”), projektanci często korzystają z gotowych zestawów/bibliotek UI – UI Kit. Zawierają one gotowe elementy, które można importować do projektów i dostosowywać do własnych potrzeb. W zależności od tego, czy projektujemy wireframe low-fidelity, high fidelity, finalny interfejs na platformę iOS lub Android, mamy do dyspozycji szereg różnych UI Kit.

Podsumowanie

Poniżej przedstawiamy szereg benefitów przejścia przez wszystkie te etapy projektowania interfejsu dla aplikacji mobilnej:

Klient oszczędza czas i zasoby (szybka droga weryfikacji koncepcji produktu),
Niewielka liczba specjalistów potrzebna do rozpoczęcia procesu, co przekłada się na niższe koszta,
Klient jest obecny na każdym z etapów przez co ma realny wpływ i kontrolę nad funkcjonalnością i wyglądem aplikacji,
Klient zyskuje pewność, że aplikacja będzie odpowiedzią na potrzeby użytkowników,
Szybszy development aplikacji (zespół jest od samego początku obecny w projekcie i posiada podgląd i wpływ na to jak aplikacja działa i wygląda),
Możliwość wczesnego przetestowania aplikacji. W krótkim czasie powstaje “klikalny prototyp”, którego działanie jest zbliżone do finalnej aplikacji,
Duża elastyczność procesu projektowania. Zmiany mogą być wprowadzane szybko, a ich efekty są widoczne natychmiast.

Piotr Niedźwiecki

UX/UI Designer

Post article