Moduł 1 · Strategia strony i brief projektu
Cel biznesowy strony
Cel lekcji
Przełożyć ogólny pomysł na konkretny cel strony.
Zakres
Konwersja, lead, sprzedaż, rezerwacja, wiarygodność, KPI.
Kryterium ukończenia
Uczestnik zapisuje rezultat, sprawdza go w przeglądarce lub narzędziu projektowym i opisuje jedną decyzję, którą podjął oraz jej uzasadnienie.
Praca krok po kroku
W tej lekcji nie chodzi o samo zapamiętanie definicji. Najpierw zapisz, jaki konkretny problem rozwiązuje temat „Cel biznesowy strony”. Następnie przygotuj mały przykład na podstawie własnego projektu, zamiast kopiować gotowe rozwiązanie. Zrób pierwszą wersję możliwie prostą, uruchom ją i dopiero wtedy poprawiaj. Po każdej zmianie sprawdź, czy poprzednie elementy nadal działają. Na koniec zapisz krótką notatkę: co zrobiłeś, co nie zadziałało za pierwszym razem i jak rozpoznałeś poprawny rezultat.
Przy pracy nad stroną warto rozdzielić trzy rodzaje decyzji. Decyzja dotycząca treści odpowiada na pytanie, co użytkownik ma zobaczyć. Decyzja dotycząca struktury mówi, w jakiej kolejności i w jakim elemencie treść się pojawi. Decyzja dotycząca wyglądu określa kolor, rozmiar, odstęp lub zachowanie. Jeśli problem dotyczy treści, nie próbuj naprawiać go samym CSS-em. Jeśli problem dotyczy struktury, zmiana koloru również go nie rozwiąże.
Typowe błędy
- wykonywanie zadania bez wcześniejszego sprawdzenia założeń,
- kopiowanie kodu bez rozumienia roli poszczególnych elementów,
- testowanie tylko w jednym widoku lub na jednym urządzeniu,
- poprawianie kilku rzeczy naraz i brak wiedzy, która zmiana pomogła,
- pomijanie opisu rezultatu i kryterium ukończenia.
Jeżeli pojawi się błąd, wróć do najmniejszej działającej wersji. Usuń jedną zmianę, sprawdź wynik i dopiero potem dodaj ją ponownie. Taki sposób pracy jest wolniejszy przez pierwsze minuty, ale zdecydowanie skraca szukanie problemu.
Pytania kontrolne
- Jaki konkretny użytkownik skorzysta z tego rozwiązania?
- Jak sprawdzisz, że rezultat działa, zamiast tylko wyglądać poprawnie?
- Co zmienisz, jeśli test pokaże, że użytkownik nie rozumie kolejnego kroku?
Przykład zastosowania
Załóżmy, że pracujesz nad stroną małej pracowni, która chce pokazać ofertę i otrzymywać zapytania. Najpierw ustalasz, co osoba odwiedzająca powinna zrozumieć. Potem wybierasz najmniejszy fragment projektu, który pozwoli sprawdzić założenie. W trakcie pracy możesz odkryć, że pierwotny pomysł był zbyt szeroki albo że użytkownik potrzebuje innej informacji. To nie jest porażka. Jest to informacja, która pozwala zmienić kolejność, treść albo zachowanie strony przed publikacją.
Warto wykonać ćwiczenie w dwóch wersjach. W pierwszej zastosuj rozwiązanie najprostsze, nawet jeżeli nie wygląda jeszcze idealnie. W drugiej popraw tylko jeden element, który najbardziej wpływa na czytelność lub działanie. Porównaj obie wersje i zapisz, co faktycznie się zmieniło. Taka dokumentacja uczy podejmowania decyzji na podstawie obserwacji, a nie przypadkowego poprawiania kodu.
Samoocena
Oceń rezultat w skali od 1 do 5 w trzech obszarach: zrozumienie celu, poprawność wykonania i wygoda użytkownika. Jeżeli któryś obszar otrzymał mniej niż 4, nie przechodź od razu dalej. Zapisz jedną poprawkę, wykonaj ją i ponownie przeprowadź test. Na koniec zachowaj zrzut ekranu, link albo fragment kodu jako dowód wykonania zadania.
Rozszerzenie dla samodzielnej pracy
Po wykonaniu zadania zmień jeden warunek, na przykład temat projektu, długość tekstu, szerokość ekranu albo kolejność elementów. Sprawdź, czy rozwiązanie nadal działa. Następnie porównaj wynik z kryterium ukończenia. Ta dodatkowa próba jest ważna, ponieważ pokazuje, czy rozumiesz zasadę, czy tylko odtworzyłeś pojedynczy przykład. Zapisz w notatkach jedno zdanie o tym, co stało się po zmianie i czego nauczył Cię test.