Flutter / Projektowanie produktu / Edukacja
Jak projektować aplikację dla dzieci: czytelne zadania, własne tempo i działanie offline
Kolorowe ilustracje nie wystarczą, żeby dziecko wiedziało, co zrobić na kolejnym ekranie. W aplikacji edukacyjnej trzeba zaplanować polecenia, reakcję na pomyłkę, odtwarzanie nagrań i powrót do rozpoczętej nauki. Na przykładzie rozwijanego Angielskiego z Wiktorem pokazujemy sześć decyzji, które łączą projekt interfejsu z architekturą aplikacji.
1. Zacznij od jednej czynności, nie od całej gry
Najpierw ustal, dla kogo jest aplikacja i jakie zadanie ma wykonać użytkownik. Rozpoznanie obrazka, zrozumienie nagrania i samodzielne zapisanie słowa to różne czynności. Nie muszą mieć takiego samego ekranu ani identycznej oceny. Warto zacząć od jednej kompletnej lekcji, zamiast projektować od razu rozbudowany system nagród.
W Angielskim z Wiktorem nawigacja prowadzi od działu przez lekcję do wyboru ćwiczenia. Karty słówek, pisanie ze słuchu i układanie zdań korzystają ze wspólnych materiałów, ale mają osobne zasady interakcji. Ilustracja powinna wspierać zadanie, a przycisk jasno pokazywać następny krok.
2. Zostaw czas na odpowiedź i miejsce na pomyłkę
Odliczanie może być częścią konkretnej gry, ale nie powinno pojawiać się automatycznie w każdym ćwiczeniu. W tym projekcie dziecko pracuje bez limitu czasu, może ponownie odsłuchać nagranie i poprawić odpowiedź. Komunikat po błędzie powinien podpowiadać możliwą czynność, na przykład ponowne odsłuchanie, zamiast zatrzymywać naukę na samym czerwonym kolorze.
Ocena musi rozróżniać odpowiedź samodzielną od tej pokazanej przez podpowiedź. W naszym modelu wynik pierwszej próby jest zapisywany oddzielnie od późniejszego ukończenia zadania. Dzięki temu ponowne próby mogą pozostać dostępne bez udawania, że każda poprawiona odpowiedź była od początku prawidłowa.
3. Obraz i dźwięk muszą pomagać w tym samym zadaniu
Przycisk odtwarzania powinien pozwalać wrócić do nagrania bez utraty wpisanej odpowiedzi. Trzeba też ustalić, co dzieje się po przejściu do innego ekranu: czy poprzedni lektor zostaje zatrzymany i czy muzyka nie zagłusza polecenia. Te sytuacje warto sprawdzić osobno od samej poprawności pliku audio.
W aplikacji korzystamy z gotowych nagrań i ilustracji powiązanych z materiałami lekcji. Zmiana słowa lub obrazu wymaga sprawdzenia podpisu, nagrania i akceptowanych odpowiedzi razem. Nie wystarczy podmienić obrazka w katalogu plików, jeżeli ćwiczenie nadal oczekuje poprzedniej odpowiedzi.
4. Sprawdź dotyk, klawiaturę i większy tekst
Duża ilustracja nie zastępuje czytelnego obszaru przycisku. Sprawdź, czy sąsiednie akcje nie są zbyt blisko, opisy nie znikają przy większym tekście, a otwarcie klawiatury nie zasłania odpowiedzi i przycisku zatwierdzenia. Ważna informacja powinna mieć tekst lub symbol obok koloru. To lista rzeczy do sprawdzenia, a nie deklaracja wykonania pełnego audytu dostępności.
W Angielskim z Wiktorem odpowiedź może wyglądać jak osobne pola liter, ale wpisywanie obsługuje jedno natywne pole tekstowe. Pozwala to zachować systemową klawiaturę, kursor i wklejanie. Dekoracja interfejsu nie powinna wymuszać budowania od zera całego mechanizmu edycji tekstu.
5. Oddziel naukę od pobierania materiałów
Jeśli materiały są już na urządzeniu, brak sieci nie powinien przerywać rozpoczętej lekcji. Pobieranie nowej zawartości można pokazać jako osobną czynność: z informacją o rozmiarze, potwierdzeniem i możliwością pozostania przy dotychczasowej wersji po błędzie. Lokalny zapis postępów nie oznacza przy tym automatycznej kopii zapasowej ani synchronizacji między telefonami.
W tym projekcie wyniki są zapisywane w SQLite na urządzeniu. Laravel udostępnia wersjonowane materiały, a aplikacja sprawdza zgodność i sumy SHA-256 pobieranych plików. Aktualizacja treści jest inną operacją niż aktualizacja samej aplikacji: nowy typ ćwiczenia może nadal wymagać nowego wydania programu.
6. Przed rozbudową sprawdź całą krótką sesję
Przejdź od wyboru lekcji do wyniku, po drodze robiąc błędną odpowiedź, otwierając klawiaturę i opuszczając ćwiczenie. Powtórz próbę bez sieci i po ponownym uruchomieniu aplikacji. Osobno sprawdź powrót z tła, przerwanie nagrania i błąd pobierania materiałów. Każdy z tych scenariuszy może ujawnić problem, którego nie widać na statycznym projekcie ekranu.
Przed dodaniem analityki, reklam lub kont nazwij konkretny cel i zakres danych. Samo zapisywanie wyniku na urządzeniu nie wymaga przesyłania go na serwer. Dodatkowe integracje trzeba ocenić osobno, z uwzględnieniem odbiorców aplikacji i rzeczywistego działania usługi. Nie należy opisywać aplikacji jako pozbawionej śledzenia tylko dlatego, że postępy są lokalne.
Przykład architektury i zakres projektu opisujemy w realizacji Angielski z Wiktorem.
Przy planowaniu aplikacji mobilnej Flutter zacznij od scenariusza jednej lekcji i zachowania po błędzie. Dopiero potem dobierz kolejne tryby i integracje.
Dokumentacja do dalszej pracy
Instrukcje wdrożeniowe dobierz do wersji używanej w swoim projekcie. Poniższe źródła rozwijają opisane zagadnienia.