projekt-funkcjonalny-strony-2-jakie-sa-rodzaje-projektow-funkcjonalnych

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

W poprzednim artykule opisałem podstawy 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, rozmieszczenie zdjęć, czy opinie innych klientów.

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

  • niższy koszt wykonania całej strony,
  • krótszy czas,
  • możliwość i łatwość wprowadzania zmian 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ą. Można zobaczyć 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ć ideę 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 i wyróżnione kolorem CTA.

Szkielet określa wszystkie znaczące elementy, które mają się znaleźć na stronie, ale bez zagłębiania się w szczegóły. Można dowiedzieć się z niego, gdzie powinny być umieszczone. Do szkieletu zawsze powinien być dołączony opis zawierający informacje o przedstawionych elementach. Taki opis powinien przedstawiać, jak ma wyglądać każdy element, jak 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 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, które znajdą się na stronie, są już przemyślane i ustalone, a szkicując projekt na kartce, ciężko jest zapełnić go docelowymi opisami. Gotowy projekt powinien jednak zawierać informacje w języku docelowym, które odzwierciedlają przyszłą strukturę. „Lorem ipsum”, jako tekst bezsensowny, często dopasowywany jest do strony, by ładnie na niej wyglądał. Na dalszych etapach pracy, po wprowadzeniu prawdziwego tekstu, 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 to często pierwszy etap 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. 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 dotyczące wyglądu stron.

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

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 wiele jej 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. Dzięki temu na wczesnym etapie prac nad stroną można uzyskać sprawdzoną informację, co działa dobrze, 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. Za realizację

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 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.