Czas na prototyp

Zanim zbudujesz i odpalisz w cyberprzestrzeń stronę WWW, wykonaj makietę i przekonaj się, czy warto ją pokazać.

Zanim zbudujesz i odpalisz w cyberprzestrzeń stronę WWW, wykonaj makietę i przekonaj się, czy warto ją pokazać.

Projektanci samochodów przed przekazaniem najnowszych modeli do masowej produkcji poddają każdy nowy model serii wyczerpujących testów. Samochody wpadają na stalowe ściany, tłuką się po górskich ścieżkach bądź godzinami pieką się w kosmicznych temperaturach. Koncerny dobrze bowiem wiedzą, że zanim produkt trafi na rynek, należy wykryć potencjalne usterki i błędy... potem jest zwykle za późno.

Taki zwyczaj powinni przyswoić sobie projektanci stron WWW. Przebudowa źle zaprojektowanej i wykonanej strony internetowej może bowiem znacznie nadwerężyć zdrowie psychiczne webmasterów, kiedy będą wprowadzać zmiany w skończonym, ale błędnie zaprojektowanym serwisie. Można uniknąć kłopotów, tworząc i testując najpierw makietę-prototyp strony, czyli skalowalny, roboczy model ostatecznego produktu.

Makieta pokaże, jakie niedociągnięcia zauważą użytkownicy oraz ujawni nieprzewidziane usterki w strukturze i nawigacji, co pozwali usunąć błędy i uniknąć publicznej kompromitacji. A najistotniejszy jest fakt, że makietę wykonuje się szybko i prosto, jest to bowiem maksymalnie uproszczony, klikalny model twojego serwisu. I choć to tylko kolekcja prostych połączonych ze sobą dokumentów, to z powodzeniem służy do zorganizowania i przetestowania zawartości oraz mechanizmów nawigacyjnych tworzonej witryny.

Wykonanie roboczego modelu jest jednak warte zachodu. Oficjalna premiera serwisu nie jest najlepsza porą na odkrycie, że użytkownicy gubią się w labiryncie martwych linków i ścieżek dojścia zbijających z tropu. Wcześniejsze stworzenie logicznej i prostej struktury nawigacyjnej uchroni przed koniecznością wprowadzania uciążliwych poprawek i ustrzeże przed mnóstwem reklamacji od zdenerwowanych i rozczarowanych użytkowników. Najlepiej rozpocząć prace nad makietą w momencie, gdy podjąłeś decyzję zbudowania strony WWW. Pomimo istnienia kilku efektywnych programów pomocnych w tworzeniu makiety, tak naprawdę dokonać tego można za pomocą ołówka, papieru i podstawowego edytora HTML.

Krok 1. Zorganizuj swoją zawartość

Przed rozpoczęciem prac nad stroną tekstową musisz zastanowić się nad strukturą ostatecznego produktu. Świadomość, że chcesz zbudować stronę o życiu seksualnym małp wiąże się również z koniecznością pewnego logicznego prezentowania informacji. Bez względu na to, jak dziwna czy też konwencjonalna ma być strona, możesz uprościć fazę organizacyjną produkcji, stosując trzyfazową strategię:

a) naszkicuj drzewo strony

Twoim pierwszym zadaniem jest naszkicowanie organizacyjnego schematu zawartości witryny, czyli znalezienie logicznych sposobów na zgrupowanie informacji, aby czytelnicy mogli jak najszybciej znaleźć interesujące ich informacje. W tym celu najlepiej stworzyć drzewo witryny [site tree], czyli diagram ukazujący, w jaki sposób pojedyncze strony są w niej połączone. Drzewo witryny, zwane także mapą witryny [site map], zaczyna się od pojedynczej strony WWW [najczęściej strony domowej] i rozgałęzia się prezentując każdą stronę z nią połączoną. Zabieg ten jest następnie powtarzany dla każdej z kolejnych podstron, aż do momentu kiedy utworzy się w ten sposób pełen widok hierarchicznej struktury witryny. Po skonstruowaniu drzewa musisz przejść do jednego z najtrudniejszych etapów, czyli wybrania zasad, według których zawartość witryny zostanie rozmieszczona w poszczególnych obszarach. Na początek zadaj sobie proste pytanie: "Co ludzie mają robić na mojej witrynie?" I odpowiedz sobie, np. czytać newsy, przeszukiwać stronę i wypełniać ankiety. Uznaj je za podstawowe kategorie twojego drzewa i pogrupuj według nich pojedyncze strony. Po zakończeniu budowy drzewa zwróć uwagę na możliwość wystąpienia kłopotów. Dla przykładu: ekstremalnie płytkie i rozłożyste drzewo może oznaczać, że stworzona przez ciebie struktura jest zbyt rozproszona, a niektóre informacje powinny być umieszczone w szerszych kategoriach, co doda stronie głębi.

b) skategoryzuj swoje dane

Po stworzeniu podstawowej struktury zastanów się poważnie nad kategoryzacją wszystkich fragmentów informacji, które chcesz umieścić na witrynie. Etap ten należy do najbardziej szczegółowych w konstruowaniu makiety i wymaga bardzo logicznego podejścia. Pomocne jest wstępne podzielenie zawartości na trzy kategorie: informacje nawigacyjne, służące do poruszania się po stronie, które zawierają specyficzne nazwy linków i szczegóły dotyczące używania narzędzi witryny, np. wyszukiwarki, następnie informacje o witrynie, zawierające dane kontaktowe, spis zawartości i nazwiska jej twórców oraz zawartość właściwą, czyli teksty, skrypty i obrazki związane bezpośrednio z tematem witryny. Następnie przejrzyj wszystkie swoje dane i przyporządkuj je do tych kategorii, stosując papierowe etykietki o różnych kolorach: zielony dla systemu nawigacyjnego, żółty dla właściwych danych, a informacje kontaktowe oznacz np. na niebiesko. Przyda ci się to później, aby szybko zorientować się, ile i jakich informacji musisz umieścić na każdej stronie swojej witryny.

c) wymyśl przebieg akcji

Kolejnym krokiem jest połączenie każdej informacji ze stworzonym drzewem witryny, aby upewnić się, że dla każdej z nich istnieje na nim odpowiednia gałąź. Żeby to zrobić, musisz skonstruować przebieg akcji swojej witryny, czyli mapę strona po stronie zawartości witryny. Jednym z najszybszych i najprostszych sposobów zbudowania takiej historii jest znalezienie płaskiej powierzchni, kilku arkuszy papieru oraz wcześniej stworzonych kolorowych notatek do identyfikacji zawartości. Każdy arkusz reprezentuje jedną stronę twojej witryny, a więc po prostu przejrzyj nalepki i dołącz je do odpowiednich stron. Podczas tej operacji z pewnością będziesz chciał usunąć lub dodać jakieś strony, gdy zauważysz, że zawierają za mało albo zbyt dużo informacji, żeby były naprawdę użyteczne. Jest to dobry sposób i czas, aby wystarczająco wcześnie zorientować się, czy nie brakuje żadnej informacji i nie należy jej w ostatniej chwili stworzyć.


Zobacz również