Flightpad – projektowanie aplikacji i stron internetowych
Flightpad to aplikacja dla pilotów, która pozwala szybko sprawdzić najważniejsze informacje dotyczące lotu i zapisać własne notatki. W jednym miejscu łączy dane pogodowe, informacje o lotniskach i pasach startowych, częstotliwości radiowe oraz ważne komunikaty lotnicze.
Kategoria
Lotnictwo
Data
Jedno miejsce dla pilotów do sporządzania notatek i sprawdzania warunków lotu
Celem było stworzenie interfejsu, który prezentuje dużą ilość informacji, pozostając jednocześnie czytelnym w warunkach panujących w kokpicie. Pozwala to pilotom na szybką ocenę sytuacji i podejmowanie decyzji bez konieczności przełączania się między wieloma źródłami informacji.
Wyzwanie projektowe: Jak zachować czytelność złożonych danych podczas lotu
Jednym z głównych wyzwań było zaprojektowanie interfejsu, który pozwala wyświetlać dużą ilość danych lotniczych bez przeciążania użytkownika.
Początkowy kierunek wizualny w większym stopniu opierał się na gradientach i elementach dekoracyjnych, które miały nadać produktowi bardziej charakterystyczny wygląd. Wraz z rozwojem interfejsu zaczęliśmy jednak zastanawiać się, czy takie rozwiązanie pozostanie czytelne w mniej stabilnych warunkach panujących w kokpicie.
Aby to sprawdzić, stworzyłam w Figma Make prototyp symulujący ruch ekranu podobny do tego, którego pilot może doświadczać podczas turbulencji. Nie zastępowało to testów w rzeczywistych warunkach lotu, ale pomogło ocenić stabilność wizualną interfejsu i zidentyfikować elementy, które mogły utrudniać szybkie skanowanie informacji.
Na tej podstawie uprościliśmy warstwę wizualną. Gradienty zostały usunięte na rzecz czystego, jasnego tła, a kolor zaczął pełnić przede wszystkim funkcję informacyjną - komunikując m.in. warunki pogodowe, informacje o pasach startowych i ostrzeżenia.
Dzięki temu interfejs przeszedł od bardziej ekspresyjnego kierunku wizualnego do rozwiązania skupionego na czytelności, hierarchii informacji i szybkim dostępie do kluczowych danych.
Architektura informacji: Porządkowanie złożonych danych lotniczych
Początkowa architektura informacji powstała na podstawie briefu projektowego, informacji przekazanych przez klienta po rozmowach z innymi pilotami oraz analizy istniejących narzędzi lotniczych.
Najpierw określiłam, jakie informacje i funkcje są kluczowe w pracy pilota, a następnie porównałam, w jaki sposób podobne produkty organizują dane pogodowe, informacje o lotniskach i pasach startowych, częstotliwości, NOTAM, oraz notatki z lotu. Pozwoliło mi to lepiej zrozumieć istniejące wzorce i znaleźć miejsca, w których informacje można przedstawić w bardziej czytelny sposób.
Ponieważ branża lotnicza była dla mnie nowym obszarem, poświęciłam również czas na poznanie terminologii i zrozumienie zależności między różnymi typami informacji wykorzystywanych podczas lotu. Korzystałam z narzędzi AI, aby lepiej zrozumieć pojęcia branżowe i terminologię, zanim przełożyłam tę wiedzę na decyzje projektowe.
Struktura produktu znacząco ewoluowała w trakcie projektowania. Zamiast traktować początkową architekturę jako zamkniętą, na bieżąco zmieniałam hierarchię i sposób grupowania informacji wraz z rozwojem kolejnych ekranów.
Głównym wyzwaniem było określenie, które informacje pilot powinien widzieć od razu, a które mogą być dostępne dopiero po przejściu do bardziej szczegółowych widoków. To stało się podstawą finalnej nawigacji, struktury kart oraz hierarchii informacji.
Czytelność złożonych danych podczas lotu
Podczas procesu projektowania zastanawialiśmy się, czy początkowy kierunek interfejsu użytkownika sprawdzi się w warunkach zbliżonych do prawdziwego lotu. Pierwsza wersja opierała się w większym stopniu na gradientach i elementach wizualnych mających na celu nadanie interfejsowi charakterystycznego stylu.
Aby przetestować, jak interfejs zachowa się podczas turbulencji, stworzyłam prototyp w Figma Make, który symulował ruch interfejsu. Pozwoliło mi to ocenić, jak ekran mógłby zachowywać się w warunkach panujących w kokpicie małego samolotu.
Test wykazał, że gradienty wprowadzały niepotrzebny szum wizualny. Zdecydowaliśmy się je usunąć na rzecz czystego, jasnego tła i funkcjonalnego systemu kolorów, w którym kolory przekazują określone informacje - w tym warunki pogodowe, wiatry na pasie startowym oraz ostrzeżenia.
Intuicyjny interfejs, który ułatwia znajdowanie informacji
Zaprojektowałam produkt w oparciu o trzy kluczowe zasady: przejrzystość, hierarchię i szybkość. Złożone dane lotnicze zostały przełożone na intuicyjne wzorce wizualne, umożliwiając pilotom szybką ocenę warunków na lotnisku, stanu dróg startowych, pogody, komunikacji oraz notatek z lotu. Każdy ekran został zaprojektowany tak, aby wspierać orientację i zmniejszać cognitive load w wymagającym środowisku.
Ostateczny interfejs wykorzystuje czytelną strukturę wizualną i funkcjonalny system kolorów, ułatwiając znajdowanie i interpretację kluczowych informacji. Kolor nie pełni wyłącznie funkcji dekoracyjnej – pomaga odróżnić warunki pogodowe, informacje o drogach startowych i potencjalne ostrzeżenia.
Aby zachować spójność w całym produkcie, stworzyłam design system obejmujący kluczowe komponenty, style i elementy interfejsu. Zapewniło to spójny sposób prezentacji informacji i ułatwiło skalowanie produktu.
Rezultatem jest interfejs, który pozwala użytkownikom na sprawne poruszanie się po aplikacji, natychmiastowe zapoznanie się z dużą, lecz przystępną ilością informacji, a także dostęp do bardziej szczegółowych danych poprzez dedykowane widoki, takie jak karty lotów i lotnisk.
Zaprojektowałam i zbudowałam również stronę z pomocą Framera, dostępną pod adresem flightpad.org.
