Dookoła słyszę narzekanie nietechnicznych osób: „nie mogę zacząć startupu, bo nie umiem programować”. Ja też nie, ale jakoś znajduję sposoby, aby pokazać potencjalnym użytkownikom interfejs przyszłej witryny. Jak?
Kiedy już stworzysz model biznesowy swojego e-projektu oraz przeprowadzisz wywiady (problem interviews), to już czas, aby zaproponować jakieś rozwiązanie dla zidentyfikowanych potrzeb. Najlepiej, aby było to coś namacalnego, czyli klikalne szablony stron (z zawartym screen-flow).
Prototypowanie stron internetowych
W sieci jest mnóstwo oprogramowania w chmurze pozwalającego na tworzenie tzw. mock-ups bez pisania kodu. Niektóre z serwisów mają takie możliwości, że testujący użytkownik może pomyśleć, że to skończona witryna.
Moim ulubionym serwisem jest Hotgloo.com, który oprócz możliwości łatwego dzielenia się prototypem, ma możliwość kolaboracji live (tworzenie mock-up w kilka osób). Do tego obsługuje zdarzenia, że np. po kliknięciu danego elementu zmienia się wygląd innego bez przeładowania całej strony. Jest także funkcja tworzenia elementów typu 'Master’, które są takie same na iluś podstronach i nie musimy tworzyć je po kilka razy. Tym sposobem, za $7 miesięcznie masz program, za który w Enterprise płaci się $500 (Axure). Przeciągasz kolejne elementy stron na obszar roboczy, ustalasz wording, call-to-actions, linki… Jeśli masz gotową koncepcję UI w głowie to stworzenie prototypu nie powinno Ci zająć więcej niż 1 dzień.
Twórz prototyp i zaoszczędź na koderze HTML/CSS
Jeśli masz jakiekolwiek pojęcie o kodowaniu warstwy front-end polecam Ci zrobienie prototypu w programach, które tworzą jednocześnie kod szablonu HTML. Taki gotowy template możesz przekazać programiście, który zastosuje je do integracji z niższymi warstwami aplikacji. Wtedy zaoszczędzisz kilkadziesiąt roboczogodzin, które mogłyby być wydane na kodera szablonu.
Podaję 2 przykłady takich serwisów:
- Jetstrap.com – uwielbiam ten serwis i framework Twitter Bootstrap, na którym Jetstrap bazuje. Paradoksalnie ograniczenia w kodowaniu HTML, które serwis narzuca, pozwalają utrzymać UI w prostej konwencji a kod HTML5 nie zamieni się w 'spaghetti code’, który będzie zgrozą dla programisty.
- Divshot.com – podobny do Dreamweaver i dedykowany bardziej zaawansowanym koderom. Jeszcze jest w fazie beta, ale możliwości projektowania i prototypowania front-end są tu bardzo duże.
Jak pokazywać prototyp użytkownikom?
Przeciętny użytkownik nie wnika w Twój proces powstawania startupu. On ma problem lub potrzebę i szuka czegoś, co zaspokoi jego oczekiwania. Weź pod uwagę następujące kwestie:
- Prototyp musi przypominać prawdziwą stronę (nie czarno-białą, co jest dobre w komunikacji z własnym zespołem). Użyj np. do logotypemaker.com, stosuj przyciski call to action za pomocą generatorów css i wklejaj kod w szablony. Użytkownik najczęściej nie widzi różnicy pomiędzy prototypem, a kompletną stroną.
- Zacznij od prostych pytań o 'landing page’, np. 'do czego służy ta strona’ z użyciem fivesecondtest.com. Jeśli ludzie nie rozumieją strony powitalnej, to nie wejdą 5 poziomów niżej.
- Dalej zadawaj takie pytania i zadania, aby prototyp je obsługiwał. Np. 'załóż’ konto. Walidację pól rejestracji można obsłużyć w Hotgloo, ale to, że konto nie powstanie naprawdę nie ma znaczenia, to jest test.
- Jeśli nie masz ludzi do testów zrób angielską wersję i przetestuj odpłatnie na ludziach z feedbackarmy.com. Zadawaj otwarte pytania i proste zadania bez tłumaczenia co i gdzie testujący ma kliknąć. UI musi bronić się samo (żadne FAQ).
Jeśli ludzie nie rozumieją o co chodzi w Twojej witrynie (prototypie), to nie licz na cud, że gotowa strona załatwi problem. Nie załatwi. Testy reklamowania prototypu pod przyszłą domeną poprzez AdWords też nie jest złym pomysłem. Możesz mierzyć wtedy ilość odrzuceń i co ludzie klikają w pierwszej kolejności. To masa wiedzy.
Ucz się kodowania front-end
Kodowania HTML/CSS potrafi nauczyć się prawie każdy. Taka wiedza pozwoli Ci już w trakcie rozwoju witryny samemu modyfikować istotne elementu w UI, bez płatnego zlecania takich pierdół. Także samo prototypowanie będzie łatwiejsze.
Ale jeśli nie masz ochoty na grzebanie w kodzie zastosuj podane narzędzia prototypowania. Klikać myszką potrafisz, więc koniec narzekania na brak programisty i do dzieła!
Maciej Oleksy
Od 20 lat w web/IT, jako programista i project manager. Kilka lat temu założył Kodilla.com i wspiera rozwój edukacji poprzez naukę programowania dla początkujących w celu przebranżowienia się.
