Projekt funkcjonalny strony

Wyobraź sobie, że posiadasz własny sklep w centrum dużego miasta i chcesz rozszerzyć działalność, aby oferować swoje towary klientom z całej Polski. Aby ten cel szybko osiągnąć, najlepiej zacząć sprzedawać produkty przez Internet. Postanawiasz więc założyć własny sklep internetowy i rozpocząć przygodę z e-biznesem. W tym celu znajdujesz firmę deweloperską i zlecasz im realizację swojej pierwszej platformy e-Commerce. Podczas realizacji projektu okazuje się jednak, że wiele rzeczy idzie nie tak, jak sobie tego życzyłeś:

• termin oddania projektu ciągle się oddala,
• koszty inwestycji ciągle rosną, a sklep nie zaczął jeszcze działać,
• wszelkie uwagi są wdrażane powoli, albo w ogóle nie są rozpatrywane,
• a gdy na koniec sklep zaczyna działać, to okazuje się, że nikt nie chce z niego korzystać.

Jak zaradzić tym problemom? Odpowiedź jest prosta – proces tworzenia sklepu zacząć od projektu funkcjonalnego.

Czym jest projekt funkcjonalny?

Projekt funkcjonalny to szkic strony, schemat tego, jak ma ona wyglądać i działać. Z niego można dowiedzieć się np. w jakim miejscu strony znajdzie się menu, czy będzie ono poziome, czy pionowe, jakie etykiety znajdą się w nim, które elementy strony będą zawierały wyraźne CTA (ang. Call-to-Action, czyli Wezwanie do Akcji), skąd klienci dowiedzą się o darmowej dostawie, a nawet jakie elementy będzie zawierała stopka.

Mówiąc w skrócie, projekt funkcjonalny zawiera informacje o elementach, które znajdą się na stronie, logice ich rozmieszczenia, by całość była czytelna dla użytkownika, a także o ich dokładnym działaniu. Dodatkowo w zakres projektu funkcjonalnego wchodzi architektura informacji, która w tym wypadku sprowadza się do sensownego ułożenia informacji na stronie, hierarchii stron i ich nazw.

Jako że projekt ten zawiera tak dużo informacji, to jego wykonanie przynosi korzyści zarówno osobie, która zleca stworzenie strony, jak i firmie deweloperskiej (najczęściej software house)

Korzyści dla zlecającego stworzenie platformy e-Commerce, strony internetowej, portalu

Będąc osobą, która zamawia stworzenie sklepu internetowego, na pewno zależałoby mi, aby sklep spełniał moje oczekiwania oraz by jak najszybciej zaczął zarabiać na siebie. Projekt funkcjonalny pomaga to osiągnąć.

W jaki sposób?

Posiadając projekt funkcjonalny, zdobywa się większą kontrolę nad projektem. Dotyczy to zwłaszcza takich elementów, jak:

• Koszt wykonania strony czy e-sklepu – w projekcie funkcjonalnym znajduje się informacja o najważniejszych elementach strony. Na jego podstawie można więc kontrolować kosztorys całości. I chociaż sam projekt funkcjonalny jest dodatkowo płatny, to jeśli na etapie jego tworzenia zajdzie potrzeba wprowadzenia zmian, będzie to zdecydowanie tańsza operacja niż w przypadku gotowej strony;
• Czas wykonania – wiedząc, jakie elementy ma zawierać strona internetowa, programiści mogą trafnie ustalić harmonogram prac. Dodatkowo, posiadając projekt funkcjonalny, można już na początku prac zobaczyć, jak będzie wyglądała gotowa strona, nie trzeba czekać do jej ukończenia. W związku z tym wprowadzanie zmian nie oddala w czasie wykonania całej strony;
• Łatwość wprowadzania zmian – zapoznając się z projektem funkcjonalnym, ma się możliwość dokładnego zobaczenia, jak strona internetowa będzie wyglądała i działała. W razie, gdyby w jakimś stopniu nie spełniała wszystkich oczekiwań, na tym etapie można bez problemu ją zmodyfikować. Jest to tańsze i szybsze niż gdyby miało się to odbywać na gotowej witrynie;
• Gwarancja wykonania – projekt funkcjonalny zapewnia dokładny opis elementów, jakie mają wchodzić w skład strony. Dzięki temu osoba zlecająca jej wykonanie może na podstawie jasnych wskaźników sprawdzić, czy zlecenie zostało wykonane poprawnie. W razie błędów w funkcjonowaniu strony zawsze można odnieść się do projektu funkcjonalnego.

Jak widać, projekt funkcjonalny zapewnia bezpieczeństwo i kontrolę zlecenia. Jest to dokument, który stanowi czytelny opis funkcjonowania, a na jego podstawie można wprowadzać dodatkowe zmiany.

Na posiadaniu projektu funkcjonalnego korzysta jednak nie tylko osoba zlecająca wykonanie strony, ale również wykonawca.

Korzyści dla wykonawcy

Firma IT posiadając projekt funkcjonalny, wie dokładnie, czego oczekuje klient i jaki efekt spełni jego wymagania. Zyskuje więc:

• Jasne oczekiwania – bez projektu funkcjonalnego ciężko uzgodnić wymagania co do serwisu, czy wspólną jego wizję. Wynika to z tego, że często klient i firma wdrożeniowa mają zupełnie odmienne wizje stron internetowych oraz różne perspektywy, posługują się także inną terminologią. Projekt funkcjonalny pomaga zobrazować wszystkie elementy serwisu i przedstawić w formie zrozumiałej dla każdej ze stron;
• Harmonogram – znając dokładnie elementy, jakie trzeba wykonać, by stronę uznać za gotową, firma może ułożyć dokładny harmonogram prac, planując jak najefektywniej wszystkie działania niezbędne do wykonania serwisu. Dzięki temu może koordynować działania skupione wokół wielu projektów, odpowiednio dysponując czasem pracowników;
• Testy – posiadając projekt funkcjonalny, można przeprowadzić pierwsze testy z użytkownikami. Dzięki temu firma może sprawdzić, jakie funkcje wydają się dla nich najważniejsze, jak sobie radzą z wykonywaniem zadań na serwisie czy szukaniem informacji, jakiego działania oczekują po poszczególnych elementach strony, a także czy brakuje w niej jakichś informacji. To o tyle istotne, że pozwala już na etapie projektu wprowadzić odpowiednią korektę struktury serwisu, by na pewno okazał się on użyteczny dla przyszłych klientów sklepu.

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.

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.

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. 

Narzędzia do tworzenia projektu funkcjonalnego strony

Szkic na kartce ołówkiem

Projektowanie strony najlepiej jest zacząć od metody kartki i ołówka. Jest to sposób polegający na tym, że pierwsze szkice strony przeprowadza się na zwykłej kartce papieru, korzystając z ołówka. Dzięki temu można szybko rozrysować najważniejsze elementy projektowanego serwisu, a także na bieżąco je poprawiać, przemieszczać i udoskonalać. Projektowanie na kartce papieru pozwala pobudzić kreatywność, nie ograniczając się do możliwości programów komputerowych. Tutaj można skreślić nieudane elementy, zmazać je, a także szybko zobrazować interakcje poprzez np. doklejenie przylepnych kartek.

Taki szkic wymaga jednak późniejszego opracowania w odpowiednim programie, by skonkretyzować projekt, a także ustalić występujące w nim detale: rozmiary elementów, ich kolejność czy dokładne położenie.

Pencil Project

Pencil Project to w pełni darmowy program do tworzenia projektów funkcjonalnych. Ma możliwość dodania standardowych kształtów, takich jak prostokąt, koło czy trapez. Ma również dużo dodatkowych elementów, w tym różne przyciski, checkboxy, ramki okien czy elementy do tworzenia diagramów. Ze strony internetowej programu można pobrać duży zestaw ikon, które przydają się podczas projektowania interfejsów.

Dodatkową zaletą tego programu jest możliwość zapisu gotowych projektów jako plików różnego typu:

• Grafika PNG,
• jedna Strona HTML z łączami do kolejnych podstron projektu,
• PDF,
• SVG,
• dokument ODT.

Produkt ten nie jest jednak pozbawiony wad. Nie jest to program dopracowany graficznie, cały interfejs posiada surowy wygląd. Nie jest także bardzo rozwijanym programem ze stałym wsparciem programistów. Dodatkowo, przy projektach z dużą ilością elementów widać okresowe spowolnienie pracy, zwłaszcza przy przewijaniu zawartości.

Ogólnie jednak dobrze się w nim pracuje, a efekty są w stanie sprostać najważniejszym potrzebom. Produkt jest w całości darmowym narzędziem, bez ograniczeń czasowych.

Axure RR

Jest to jeden z najpopularniejszych programów na rynku. Oferuje bardzo wiele możliwości stworzenia dokładnej makiety. Posiada wiele podstawowych elementów zdefiniowanych w systemie, dodatkowo wiele innych bibliotek można ściągnąć z Internetu, dzięki czemu zyskuje się większe możliwości niż w Pencil. Są to nie tylko takie rzeczy jak prostokąt, obraz czy przycisk. Wśród elementów dostępnych dla użytkowników są specjalistyczne elementy interfejsów (np. obrazy telefonów Apple), w których obrębie można projektować aplikacje dedykowane na te systemy, oraz elementy takie jak klawiatury, belki z informacjami czy nawet ikony wykorzystywane w tych urządzeniach.

Dużym atutem tego programu jest możliwość dodania interakcji do elementów, czyli np. tego, co ma się wyświetlić po kliknięciu w przycisk, albo jaka strona powinna się pojawić. Dzięki temu, poza szkieletem strony można również stworzyć dobrze działający prototyp, gotowy do zapisania jako działająca strona HTML.

Projekty tworzone w tym programie nie muszą być szkieletami strony z niską ilością szczegółów. Axure oferuje możliwość dodania dokładniejszej grafiki, dzięki czemu projekty bardziej przypominają docelowy produkt.

Program ten oferuje za darmo w pełni funkcjonalną wersję na 30 dni. Dodatkowo osoby ze statusem studenta lub nauczyciela mogą zamówić za darmo wersję działającą dłużej.

UXPin

To kolejny przykład bardzo popularnego i zaawansowanego narzędzia. Jest to aplikacja dostępna z poziomu przeglądarki. Posiada bogatą kolekcję elementów gotowych do umieszczenia w projekcie strony. Niektóre z nich, np. przyciski, kalendarze, czy obrazki, dopasowane są do różnych platform, np. do aplikacji działających na systemie iOS czy Android, a także do stron internetowych. Każdy z elementów posiada szczegółowe opcje konfigurowania, dzięki czemu można precyzyjnie dostosować go do własnych potrzeb, zmieniając m.in. rozmiary, kolory, promień obrotu czy tzw. padding, czyli odległość treści od krawędzi obiektu. Do każdego elementu można również dodać akcję, z jaką jest związany, np. po kliknięciu w przycisk strona przewija się do stopki.

Niewątpliwym plusem jest możliwość dostosowania każdej strony do wersji RWD, czyli wyświetlanej na różnych rozdzielczościach ekranu.

UXPin umożliwia również zaprezentowanie online stworzonego projektu. Do każdego projektu dostarczony jest specjalny link, który można np. wysłać klientowi, albo otworzyć w czasie osobistego spotkania z nim, i zaprezentować jak projekt wygląda i działa, opowiadając o wszystkich istotnych elementach.

Dodatkowym atutem UXPina jest możliwość przeprowadzenia testów użyteczności na stworzonym prototypie, dzięki czemu można jeszcze przed etapem programowania sprawdzić zastosowane rozwiązania.

UXPin nie jest również wolny od wad. W moim odczuciu najistotniejszą z nich jest brak aplikacji desktopowej. Osobiście bardzo cenię sobie możliwość otworzenia konkretnego programu do pracy, nie używając do tego przeglądarki.

Wersja darmowa UXPina dostępna jest na 7 dni, z możliwością przedłużenia do 30 poprzez udostępnianie go na portalach społecznościowych – Twitterze i Facebooku.

Balsamiq Mockup

Balsamiq jest prostym narzędziem przydatnym do szybkiego naszkicowania strony. Nie jest to program dla osób, które potrzebują dokładnego projektu. Może być natomiast zastępstwem dla szkicowania na papierze, tak by zawrzeć na nim ogólną ideę strony.

Baslamiq posiada ładny interfejs, wszystkie elementy są dopracowane graficznie. Domyślnym trybem jest szkic, który symuluje elementy ręcznie rysowane. Szybko można jednak go zmienić na szkielet strony, wtedy wszystkie elementy stają się idealnie proste, równe, jak na projekcie funkcjonalnym być powinny.

Dodatkową zaletą tego programu jest prosty tryb prezentacji, kursor staje się wtedy dużą strzałką ułatwiającą pokazywanie poszczególnych elementów. Dzięki temu można w elegancki sposób zaprezentować klientowi wizję jego nowego produktu.

Balsamiq, podobnie jak Axure, umożliwia przetestowanie go przez 30 dni za darmo.

MockFlow WireFramePro

MockFlow to ciekawe narzędzie do tworzenia projektów funkcjonalnych. Dostępny jest z poziomu przeglądarki internetowej, wszystkie projekty zapisywane są w chmurze. Udostępnia on też program o takiej samej funkcjonalności jak platforma internetowa.

MockFlow zawiera listę zdefiniowanych najważniejszych elementów wykorzystywanych podczas projektowania stron, i choć jest ich dużo mniej niż w UXPin czy Axure, osobiście nigdy nie spotkałem się z sytuacją, że czegoś mi brakowało. MockFlow oferuje również możliwość zaimportowania do projektu dodatkowych elementów, np. gotowych szkieletów strony czy zestawu ikon z Androida.

Program umożliwia również elegancką prezentację gotowych projektów. Dostępny jest tu pełnoekranowy tryb przeglądania, dzięki czemu żadne elementy systemu operacyjnego nie rozpraszają uwagi.

Inny tryb – Whiteboard – umożliwia bieżące wyświetlanie całego projektu na białym tle z możliwością zaznaczania konkretnych, omawianych elementów oraz wpisanie prostych notatek kolorowymi markerami. Taki efekt prezentacji można potem zapisać jako plik graficzny, by zapamiętać najważniejsze wnioski ze spotkania.

MockFlow WireFrame Pro dostępny jest za darmo dla jednego użytkownika z jednym projektem, bez limitu czasu. W tej wersji jednak można stworzyć maksymalnie 4 strony czy ekrany aplikacji.

Invision

Invision jest prostym narzędziem do prototypowania i prezentacji online. Służy on do tego, by zaprezentować proste interakcje pomiędzy zaprojektowanymi stronami.

Zasada działania jest prosta – mając gotowe szkielety stron lub makiety w plikach graficznych można je wgrać na swoje konto. Tam zaznacza się w każdej z nich miejsca, które można kliknąć i strony, do których prowadzą kliknięcia.

Dla projektu dostępny jest tryb prezentacji online. Odpowiedni adres internetowy można wysłać np. klientowi i na bieżąco omawiać z nim działanie serwisu.

Invision dostępny jest w wersji darmowej, ale tylko dla jednego projektu.

Podsumowanie

Programów do tworzenia projektów funkcjonalnych jest dużo więcej niż te, które przedstawiłem, dlatego przed zdecydowaniem się na któryś z nich warto przetestować kilka różnych.

Przy wyborze odpowiedniego narzędzia powinno się kierować przede wszystkim wygodą pracy i spełnieniem wymagań. Ważnym czynnikiem jest również cena produktów.

Ja wybrałem te kilka narzędzi, z którymi pracowałem w swojej karierze i w jakiś sposób zapadły mi w pamięć. Każde z nich oferuje ciekawe rozwiązania przydatne w codziennej pracy projektanta serwisów i aplikacji.