Projekt funkcjonalny strony #2 – jakie są rodzaje projektów funkcjonalnych?

W poprzednim artykule opisałem podstawy pojęcia projektu funkcjonalnego, czyli planu strony, na podstawie którego tworzony jest docelowy produkt. Projekt funkcjonalny z założenia zawiera informacje na temat zawartości witryny, wraz z wyjaśnieniem dlaczego poszczególne elementy znajdują się w ustalonych miejscach i jak działają. Dotyczy to takich komponentów, jak np. menu strony i sposób jego działania, umieszczenie zdjęć, czy informacji o opiniach innych klientów.

Wspomniałem też o tym, że stworzenie projektu funkcjonalnego jest korzystne zarówno dla osoby, która zleca stworzenie sklepu, jak i dla firmy deweloperskiej, która ten sklep tworzy. Wśród zalet projektu funkcjonalnego wymienić można m.in.:

  • niższy koszt wykonania całej strony,
  • krótszy czas,
  • łatwość wprowadzania zmian i możliwość ich wprowadzania już na wczesnym etapie prac,
  • możliwość przetestowania opracowanych rozwiązań przed zaprogramowaniem sklepu,
  • etc.

Jak widać zalet jest wiele i są znaczące. Dobrze jest jednak pamiętać, że projekty różnią się między sobą, zobaczyć można ich szeroką gamę, od bardzo ogólnych, wyglądających jak szkic, po klikalny projekt z przykładową grafiką. Ja rozróżniam trzy rodzaje projektu funkcjonalnego:

  • szkielet strony,
  • makieta strony,
  • prototyp strony.

Szkielet strony (ang. Wireframe)

Szkielet strony tworzy się po to, by w prosty i czytelny sposób przekazać idee nt. tworzonej aplikacji lub strony. Jest to jej ogólny szkic. Najczęściej wykorzystuje się w nim kolory szarości, bez zdjęć. Zbudowany jest z najprostszych obiektów geometrycznych, jak koła i prostokąty. Może zawierać kolorowe logo, również CTA mogą zostać wyróżnione kolorem.

Szkielet określa konkretnie jakie elementy mają się znaleźć na stronie, prezentując wszystkie znaczące elementy, ale bez zagłębiania się w szczegóły. Z niego dowiedzieć się można gdzie powinny być umieszczone. Do szkieletu zawsze powinien być dołączony opis zawierający informacje o przedstawionych elementach. Taki opis zawierać powinien informacje na temat tego jak ma wyglądać każdy element, jak ma działać oraz dlaczego został on umieszczony w projekcie i w tym konkretnym miejscu.

Ważne jest, by ostateczna wersja szkieletu opierała się na autentycznych tekstach, a nie popularnym „lorem ipsum”, które nie jest w stanie w pełni odzwierciedlić wyglądu strony dla różnych danych, np. tytułów wiadomości, często dłuższych niż dwa słowa, czy wielkości paragrafów. Zastosowanie autentycznego tekstu umożliwia takie dopasowanie rozmiarów i rozmieszczenia elementów, które zagwarantuje jak najlepsze dostosowanie. Mam świadomość, że na początku pracy z projektem nie wszystkie teksty na stronę już przemyślane i ustalone, a np. szkicując projekt na kartce ciężko jest zapełnić go docelowymi opisami. Chodzi mi jednak o to, by gotowy projekt zawierał informacje w języku docelowym i by odzwierciedlały one przyszłą strukturę.  „Lorem ipsum”, jako tekst bezsensowny, często dopasowywany jest do strony, by ładnie na niej wyglądał. Na dalszych etapach pracy i prawdziwych danych szybko może okazać się, że stworzona strona wygląda znacznie gorzej.

Atutem stosowania szkieletu jest czas wykonania – jest to najszybciej wykonywany projekt funkcjonalny. Jest to również najtańsze z rozwiązań, dlatego jest często pierwszym etapem prac nad projektem. Klienci patrząc na szkielet strony są w stanie wyobrazić sobie gotową stronę. Pozwala to też zastanowić się nad zaproponowanymi rozwiązaniami i wniesieniem swoich uwag. Wprowadzanie uwag na tym etapie jest najłatwiejsze, w porównaniu z innymi procesami tworzenia zarówno projektu funkcjonalnego, jak i całej strony.

Dodatkowo, jako że projekt ten prezentowany jest w formie obrazów, można dołączyć go do dokumentacji strony.

Szkielet strony

Makieta strony (ang. Mockup)

Makieta jest rozbudowaną wersją szkieletu strony, kolejnym etapem prac. Jest to projekt graficzny strony, który został stworzony w oparciu o szkielet.

Z makiety można dowiedzieć się dokładnie jak przyszła strona będzie wyglądała po stworzeniu, dlatego też w przeciwieństwie do szkieletu, zawiera ona kolorowe elementy, jak logo czy przyciski. Na ogół jest ona docelową wizualizacją strony.

Podobnie jak szkielet, makieta to również projekt statyczny, czyli bez możliwości klikania w poszczególne elementy strony, jak np. przyciski, czy wchodzenie w inne interakcje z prezentowanymi elementami.

Celem stworzenia makiety strony jest ocena wizualnej strony projektu. Na tym etapie należy podjąć decyzje nt. wyglądu stron.

Cena i czas wykonania makiety są umiarkowane w porównaniu do całości projektu.

Makieta strony

Prototyp strony (ang. Prototype)

Prototyp strony jest najbardziej zaawansowanym projektem funkcjonalnym. Zawiera dużo więcej informacji niż sam szkielet, a jego głównym zadaniem jest symulowanie interakcji. Powinien posiadać sprawne przyciski, pola do wprowadzania tekstu, checkboxy, etc. Nie jest to w pełni funkcjonalna strona, jednak ma jej wiele cech. Może zawierać więcej grafiki niż sam szkielet, ale nie jest wymagane przy nim pełne odwzorowanie wizualne.

Dużym atutem prototypu jest fakt, że można za jego pomocą przeprowadzić badania z użytkownikami, by przetestować rozwiązania opracowane dla projektu funkcjonalnego. Jest to o tyle ważne, że dzięki temu na wczesnym etapie prac nad stroną można uzyskać sprawdzoną informację, co działa dobrze na stronie, a co jeszcze można poprawić. Dzięki temu można wprowadzić zmiany w ostatecznej funkcjonalności, co na tym etapie jest tańsze i szybsze, niż gdyby to robić na gotowym produkcie.

Kolejnym atutem prototypu jest fakt, że można go wykorzystać do budowy ostatecznej wersji strony. Prototyp, jeśli jest w języku HTML, może być już podstawową wersją strony, którą należy po prostu rozbudować o docelowe funkcjonalności.

Jest on jednak droższy od szkicu strony, a jego stworzenie zajmuje więcej czasu.

Prototyp strony

Podsumowanie

Z poprzedniego wpisu można było dowiedzieć się, że projekt funkcjonalny jest niezwykle istotny w procesie realizacji nowej strony internetowej. Warto pamiętać, że dotyczy to również programów komputerowych czy aplikacji mobilnych, a korzystanie z projektów przynosi wiele korzyści.

Korzyści te są jednak zależne od dokładnego typu projektu funkcjonalnego.

Najprostszym z nich jest szkielet strony, posiada on mnóstwo informacji na temat elementów strony, dlatego stanowi idealną bazę do pracy nad serwisem. Jego uzupełnienie o kompletną grafikę to makieta, służy ona do ustalenia docelowego wyglądu strony. Do przetestowania funkcjonalności serwisu wykorzystać można natomiast prototyp, może on być również bazą do stworzenia gotowej platformy.

W przypadku realizacji strony czy serwisu można wykorzystać wszystkie trzy typy projektów funkcjonalnych. Ja jednak uważam, że szkielet i makieta wystarczają w zupełności dla większości platform. Prototyp natomiast dobrze jest stosować w przypadku niestandardowej funkcjonalności, czyli takiej, której sposób działania i zasadność użycia dobrze będzie przetestować przed zastosowaniem.

FacebookTwitterGoogle+LinkedIn