Jak znaleźć inspirację dla UI aplikacji mobilnych i zamienić ją w brief projektowy
Praktyczny proces zbierania inspiracji dotyczących interfejsów mobilnych, analizy pełnych sekwencji ekranów i przekładania obserwacji wizualnych na oryginalny, możliwy do przetestowania brief projektowy.
Łatwo zebrać folder atrakcyjnych ekranów aplikacji, ale trudno z niego korzystać. Bez pytania kierującego poszukiwaniami inspiracje wizualne mogą popychać projekt ku naśladownictwu, a rzeczywiste zadanie użytkownika pozostanie nierozwiązane.
Traktuj zrzuty ekranu jako punkt wyjścia do badania. Przydatny proces zaczyna się od zadania, porównuje pełne ścieżki, zapisuje decyzje stojące za obrazami i zamienia obserwacje w brief, który można prototypować i oceniać.
Najważniejsze wnioski
- Przed zbieraniem przykładów określ użytkownika, zadanie i niepewną decyzję projektową.
- Analizuj sekwencje ekranów i stany interakcji, nie tylko odizolowane formy wizualne.
- Zapisz zasady, które da się przenieść, a potem podejmij oryginalne decyzje dla swojego produktu i sprawdź je z ludźmi.
- Sprawdzaj dostępność i zgodność z platformą, gdy brief można jeszcze swobodnie zmieniać.
1. Zacznij od pytania projektowego
Zanim zaczniesz przeglądać, napisz jedno zdanie o osobie i chwili, dla której projektujesz. Na przykład: „Ktoś, kto po raz pierwszy gotuje w domu, potrzebuje wybrać przepis na wieczór w tygodniu i zrozumieć kolejny krok”. Potem nazwij niepewność: czy trudne jest przeglądanie opcji, zaufanie rekomendacji czy rozpoczęcie przepisu z wieloma etapami?
To pytanie wyznacza granice poszukiwań. Ustal platformę, obszar produktu i zadanie. Jeśli badań wymaga pierwsze użycie, przeglądaj przykłady onboardingu; jeśli problemem jest wybór planu, spójrz na ekrany subskrypcji; przy wprowadzaniu danych porównaj formularze. ScreenKits pozwala przeglądać prawdziwe ekrany według kategorii. Zapisuj przydatne aplikacje w przeglądarce, aby wrócić do ich ekranów podczas syntezy.
- Kim jest docelowy użytkownik i co próbuje osiągnąć?
- Która decyzja projektowa jest niepewna: hierarchia, sekwencja, nawigacja, treść czy informacja zwrotna?
- Jakie ograniczenia mają znaczenie, na przykład platforma, dostępność, rozmiar urządzenia lub zasady biznesowe?
2. Zbierz mały, celowy zestaw przykładów
Zbierz kilka przykładów dotyczących tego samego lub blisko powiązanego zadania. Uwzględnij więcej niż jedno podejście: drogę bezpośrednią, prowadzoną oraz być może wersję obsługującą błąd lub pusty stan. Przy każdym kandydacie zapisz aplikację i zanotuj ekran lub moment, do którego chcesz wrócić. Zwarty zestaw ułatwia porównanie bardziej niż nieprzefiltrowana tablica inspiracji.
Sięgaj do różnych kategorii, gdy podstawowy problem jest wspólny. Aplikacja do planowania terminów i zakupów spożywczych mogą obie pomagać wybrać datę i potwierdzić zmianę. Przydatnym połączeniem jest struktura decyzji, a nie powierzchowny motyw. Nie uznawaj podobnych odbiorców lub branży za dowód, że dany interfejs rozwiązuje Twój konkretny problem.
- Wybieraj przykłady z powodu, który umiesz nazwać, na przykład „pokazuje, jak wybrana opcja zmienia podsumowanie”.
- Uwzględnij różne rozwiązania, aby pierwszy dopracowany przykład nie stał się domyślną odpowiedzią.
- Używaj zakładek przeglądarki, by zachować wybrane aplikacje do porównania podczas pisania briefu.
3. Analizuj ścieżkę, nie tylko zrzut ekranu
Pojedynczy ekran pokazuje układ, kolor, tekst i kontrolki w jednej chwili. Nie ujawnia, co do niego doprowadziło, co nastąpi po dotknięciu ani czy zadanie się powiedzie. Przejdź kolejno przez każdy istotny ekran. Zapisz punkt wejścia, decyzję, działanie, informację zwrotną i kolejny stan. Uwzględnij alternatywy, takie jak błędy walidacji, zamknięcie i powrót do edycji wyboru, gdy wpływają na zadanie.
Oddziel obserwację od interpretacji. „Główne działanie pozostaje blisko dołu przez trzy kroki” to obserwacja; „na pewno łatwiej z tego korzystać” to niepotwierdzone twierdzenie. Zrzut ekranu może podsunąć hipotezę, ale nie dowodzi użyteczności. NN/g opisuje prototypowanie i testy z użytkownikami jako sposoby wykrywania potencjalnych problemów i poznawania interakcji z proponowanym interfejsem.
| Zapisz | Przykład ze ścieżki wyboru przepisu |
|---|---|
| Cel użytkownika | Wybrać przepis na kolację pasujący do dostępnego dziś czasu. |
| Zaobserwowany wzorzec | Filtry czasu i diety pojawiają się przed listą przepisów. |
| Możliwa zasada | Pokazuj ograniczenia o dużym wpływie przed przeglądaniem wyników. |
| Otwarte pytanie | Czy użytkownicy wiedzą, które filtry są opcjonalne? |
| Decyzja produktowa | Pokaż dwa najważniejsze filtry, a kolejne udostępnij na żądanie. |
4. Zamień obserwacje w oryginalny brief
W syntezie przykłady stają się przydatne. Wyciągnij zasadę, którą można przenieść, na przykład „pokaż skutek wyboru przed potwierdzeniem”. Następnie zdecyduj, jak ma działać w Twoim produkcie, biorąc pod uwagę zadanie, treść i ograniczenia. Nie kopiuj firmowej ilustracji, dokładnego brzmienia ani charakterystycznego układu tylko dlatego, że przykład robi wrażenie.
W przykładzie z przepisami zebrane inspiracje mogą sugerować wczesne pokazanie czasu i podgląd zmian wywołanych filtrem. Oryginalny brief może określić krótką ścieżkę planowania kolacji, widoczne ograniczenie czasowe, jasne stany filtrów i etap sprawdzenia przed zapisaniem. Te decyzje odpowiadają celowi produktu; nie odtwarzają ekranu innej aplikacji.
- Odbiorcy i kontekst: kto tego potrzebuje oraz gdzie lub kiedy będzie korzystać?
- Cel i sukces użytkownika: co powinien móc ukończyć lub zrozumieć?
- Ścieżka: jakie są główne kroki, decyzje i ważne stany alternatywne?
- Zasady projektu: co interfejs powinien uczynić jasnym lub łatwym?
- Ograniczenia i otwarte pytania: co musi być prawdą i co wymaga zbadania?
- Plan oceny: jakie zadanie dasz użytkownikowi prototypu i co będziesz obserwować?
5. Stwórz prototyp, sprawdź dostępność i dopracuj
Przełóż brief na wstępny schemat ścieżki, zanim dopracujesz styl wizualny. Stwórz prototyp kluczowej decyzji i informacji zwrotnej, a potem poproś osobę reprezentującą odbiorców o wykonanie realistycznego zadania. Obserwuj wahanie, nieoczekiwane wybory i błędy. Popraw ścieżkę i powtórz; wskazówki badawcze NN/g traktują projektowanie iteracyjne i ocenę prototypu jako część uczenia się, nie zakładając, że pierwsza wersja jest ostateczna.
Równolegle przeprowadź ocenę dostępności. Wytyczne Apple dotyczące interfejsu podkreślają dostrzegalne, adaptacyjne interakcje i uwzględnianie różnych metod wprowadzania danych. Sprawdź powiększanie tekstu, kontrast, rozmiar i odstępy kontrolek, jasność etykiet oraz zależność znaczenia od samego koloru. Sprawdź też, czy ścieżka dostosowuje się do dłuższego tekstu i jest zrozumiała z technologiami wspomagającymi. Wskazówki Material Design dotyczące dostępności są przydatnym uzupełnieniem przy konwencjach Androida.
- Daj zadanie, a nie wycieczkę po interfejsie, i obserwuj, czy użytkownicy potrafią kontynuować.
- Przetestuj wczesną wersję o małym poziomie szczegółowości, gdy zmiany struktury są jeszcze łatwe.
- Sprawdź wytyczne platformy właściwe dla obsługiwanego urządzenia i systemu projektowego.
- Wracaj do przykładów tylko po odpowiedź na pytanie; podobieństwo wizualne nie zastępuje dowodów.
Lista kontrolna od przykładu do briefu
Przed przekazaniem briefu upewnij się, że opisuje decyzję produktową, a nie tablicę nastroju. Osoba, która nie zbierała przykładów, powinna rozumieć zamierzone zadanie, proponowaną ścieżkę, nierozstrzygnięte wybory i sposób sprawdzenia przez zespół, czy projekt działa.
- Oryginalny użytkownik i zadanie są jasno opisane.
- Każdy przykład ma notatkę wyjaśniającą, jakie pytanie lub wzorzec pomaga zbadać.
- Obserwacje są oddzielone od założeń i twierdzeń o użyteczności.
- Brief opisuje oryginalną ścieżkę i uzasadnienie właściwe dla produktu.
- Uwzględniono dostępność, zachowanie platformy i ważne stany alternatywne.
- Określono zadanie do prototypu i plan oceny oparty na obserwacji.
