offline.pl

W sobotę zadebiutowałem jako wykładowca w Wyższej Szkole Europejskiej im. ks. Józefa Tischnera w Krakowie. Obiecałem studentom, że przygotuję listę narzędzi służących do tworzenia ekranow interfejsu (ang. wireframing). Ponieważ zapewne przydać się może nie tylko studentom, publikuję listę na blogu. Uznałem jednak, że wyszukiwarki użyć potrafi każdy, dodam więc kilka słów recenzji. Zainteresowani pełnymi listami tego rodzaju odnajdą źródłowe zestawienia na końcu notki. W ramach poniższej notki zamieszczam wyłącznie recenzje kilku wybranych narzędzi.

Skupiam się przede wszystkim na narzędziach darmowych bądź o stosunkowo niskiej cenie, jako najbardziej dostępnych dla każdego – nie tylko osób zajmujących się projektowaniem na codzień. Ci ostatni jak sądzę, są zorientowani w możliwościach, mają ponadto inne potrzeby. Przyznam jednak, że podczas przeglądu trafiłem na kilka ciekawostek, które mogłyby zainteresować także „zawodowców” – polecam przyjrzenie się choćby Protoshare. Zestawienie zawiera głównie narzędzia obsługiwane przeglądarkę, do niektórych można pobrać oprogramowanie typu desktop.

Przejrzałem narzędzia pod kątem następujących możliwości:

• dostępne narzędzia formatowania obiektów interfejsu
• tworzenie własnych kontrolek/widgetów
• obsługa interakcji (onmouseover, onclick, onmouseaway)
• obsługa instrukcji warunkowych
• dostępne formaty eksportu makety/prototypu
• wbudowana możliwość wyświetlania działającego prototypu bez eksportu

Leniwym polecam podsumowanie na końcu notki

Hot Gloo (hotgloo.com)

Największy problem – brak obsługi polskich znaków, co w zasadzie dyskwalifikuje użycie tego narzędzia dla polskiego projektanta. Z obowiązku wymieniam, choćby ze względu na wykorzystanie interaktywnych paneli i ograniczonych instrukcji warunkowych. Aktualnie Hot Gloo dostępne jest w darmowej wersji beta, planowane wprowadzenie opłat.

Pidoco (pidoco.com)

Na starcie to mój osobisty faworyt. Pidoco jest zestawem kilku niezależnych narzędzi, obsługiwanych przez przeglądarkę:

• Prototype Creator
• Prototype Reviewer, służący do pracy w zespole
• Remote Usability Tester, umożliwiający przetestowanie prototypu

Po uruchomieniu „repozytorium” (konia z rzędem temu, kto po uruchomieniu wersji trial i zamknięciu okna przeglądarki kliknie ten akurat odnośnik), dostępny jest czytelny tutorial.

Pierwsze wrażenie – bardzo wygodnie używa się kontekstowych kontrolek, wyświetlanych przy każdym obiekcie wstawionym do prototypu.

Chwilę później, przeciągnięcie wybranego obiektu z przybornika powoduje błąd przeglądarki – Safari zamyka się nie zapamiętując historii sesji. Przywrócenie wszystkich otwartych okien jest niemożliwe – to może być nieprzyjemne, jeżeli mieliście ich otwartych sporo.

Daję Pidoco kolejną szansę. Wykonując kilka kroków tutoriala stwierdzam, że interfejs przypomina mi edytory WYSIWYG w systemach CMS. Manipulowanie obiektem tą drogą jest o wiele wygodniejsze, niż przy użyciu paneli właściwości, wykorzystywanych przez konkurencyjne narzędzia. Bardzo przydają się kontekstowe podpowiedzi, wyświetlane nienachalnie podczas edytowania prototypu.

Na pierwszy rzut oka podoba mi się koncepcja globalnego zasięgu warstw, ułatwiająca wyświetlanie poszczególnych elementów na więcej niż jednej stronie. Jak rozumiem, ma to być forma szablonów typu „master”. Zastanawiam się tylko, na ile wygodne jest zarządzanie wieloma warstwami w większym projekcie – nie zauważyłem możliwości grupowania warstw w katalogach. W odróżnieniu od klasycznych masterów, na pewno łatwiej jest modyfikować wyświetlanie wybranych elementów na poszczególnych stronach, gdzie zastosowano warstwy.

Pidoco umożliwia wyeksportowanie dwóch widoków – „plain” oraz „sketch”. Przeglądający prototyp mogą komentować dowolną część ekranu, do której przypinana jest notka. Po zaproszeniu współpracowników notka zamienić się może zapewne w zapis interaktywnego czata. Niestety, dla tej części nie przewidziano obsługi polskich znaków.

Minusy Pidoco – przede wszystkim brak możliwości projektowania własnych bibliotek oraz ograniczona ustawieniami dostarczonych obiektów interakcja. Nie ma mowy o odpowiednikach paneli Axure czy nawet Hot Gloo. Jest to narzędzie przeznaczone głównie do projektowania prostych makiet, ułatwiające w zamierzeniu komunikację koncepcji w zespole projektowym. Zaawansowanych prototypów HI-FI raczej za pomocą Pidoco nie zbudujemy.

Abonament w wersji miesięcznej, półrocznej bądź rocznej. W zależności od wybranego pakietu (basic, classic, advanced, expert), ceny od 10 do 90 euro miesięcznie, najwyższy abonament umożliwia korzystanie z modułu zdalnych testów. Możliwe rozwiązanie hostowane. Dostępna 30-dniowa wersja próbna.

Protoshare (protoshare.com)

Kolejne narzędzie, reklamowane jako „the only tool”, służące do komunikacji w zespole w czasie rzeczywistym. Rejestracja konta w wersji próbnej wymaga podania danych karty kredytowej, co mnie osobiście zawsze irytuje. Rzecz jasna mogę „zrezygnować w każdej chwili” – choć wolałbym, żeby to raczej decyzja o zakupie wymagała ode mnie podjęcia działania. Formularz rejestracji składa się swoją drogą ze zbyt wielu kroków jak na wersję próbną, co zniechęca.

Już domyślny widok przykładowego projektu wskazuje na znaczny stopień rozbudowania. Biorąc pod uwagę zbliżony do Pidoco pułap cenowy, możliwości Protoshare są nieporównywalnie większe. Za jego pomocą można konstruować znacznie bardziej skomplikowane, interaktywne prototypy. Niestety, idzie za tym konieczność nauczenia się przebogatego interfejsu użytkownika. Jest to o tyle istotna kwestia, że Protoshare traci rację bytu jako narzędzie do projektowania ad hoc – po prostu wymaga inwestycji czasowych. Może mieć sens wyłącznie w przypadku wdrożenia do codziennej pracy nad wieloma (pod)projektami.

Poniżej jeden z widoków edytora oraz kilka zrzutów ekranu z ciekawych funkcjonalności.

Na plus Protoshare należy zapisać to, że udostępnia obiekty niedostępne nawet w drogich pakietach typu Axure czy Visio – pliki Flash czy moduły zasilane z kanałów rss, możliwe jest także wklejanie własnego kodu html. Dodatkowo, każdy z elementów prototypu może zostać ostylowany przy użyciu standardowego CSS. Modyfikowanie własności obiektów dodanych do projektu jest dokonywane za pomocą panelu właściwości – zbliżonego do Visio.

Polecam obejrzenie kilku tutoriali w formie filmów, dla zorientowania się w możliwościach. Poniżej przykładowy film z instrukcją tworzenia postawowych szablonów.

Serwis przewiduje trzy wersje abonamentu – od 29 USD w górę za miesiąc, różniące się m.in. możliwą do uruchomienia liczbą projektów, miejscem na dysku oraz liczbą współpracowników. Droższy abonament (49 USD za stanowisko miesięcznie) przewiduje możliwość eksportu projektu do HTML. Dostępna 30-dniowa wersja próbna.

justproto (justproto.com)

Grzechem byłoby nie wspomnieć o rodzimym justproto, ale nie wymieniam narzędzia wyłącznie z obowiązku.

Po lekkim niesmaku związanym z podawaniem danych karty w przypadku Protoshare nareszcie dobre podejście – aby przedłużyć używanie konta po upływie wersji próbnej, muszę wyrazić swoją wolę w tej sprawie.

Już na pierwszy rzut oka interfejs justproto różni się od pierwszej, zgrzebnej wersji, z którą miałem do czynienia około roku temu. Niestety, liczba kontrolek dostępnych w bibliotece jest mało imponująca, brak jakichkolwiek gotowych komponentów nawigacyjnych. Na plus zapisać należy natomiast sporą kolekcję ikon, choć zawsze zastanawiam się, czy właściwe dla szablonów są właśnie kolorowe obrazki.

Tak wyglądają clipart’y:

A oto – pokazana praktycznie w całości – biblioteka komponentów:

Justproto nie umożliwia tworzenia interakcji opartej na interaktywnych panelach, jego możliwości są wciąż ograniczone do prostych schematów. Makiety można udostępniać do podglądu w formie HTML, nie odnalazłem możliwości wyeksportowania prototypu.

Ceny abonamentu są uzależnione od wielkkości zespołu, liczby projektów i dostępnej dla nich przestrzeni dyskowej. Plan „Standard” to 59 PLN miesięcznie, „Plus” i „Unlimited” odpowiednio – 199 PLN i 399 PLN. Ceny to niewygórowane, porównanie jednak możliwości Protoshare (droższy abonament za 49 USD miesięcznie) do justproto (powiedzmy – abonament „Plus” za 199 PLN) wypada zdecydowanie na korzyść tego pierwszego. Liczba dostępnych funkcjonalności różni się niestety diametralnie. Kibicuję mimo to polskiemu projektowi i liczę, że będzie poszerzał udostępniane możliwości.

iPlotz (iplotz.com)

Aplikacja wyposażona w stosunkowo bogatą liczbę elementów, w tym interaktywnych, a dzięki obsłudze skrótów klawiaturowych – stosunkowo łatwa w obsłudze.

Dla każdego prototypu wygenerować można adres url, który wysyłamy następnie do zainteresowanych członków zespołu – co jest możliwe przy użyciu wewnętrznej funkcji powiadamiania. Dodatkowo, projekt wstawić można do innej strony (funkcja embed). Dostępny eksport do plików jpg, png i pdf, a także wygenerowanie specyfikacji. iPlotz umożliwia także zapraszanie członków zespołu do współpracy nad projektem.

Darmowa wersja umożliwia stworzenie jednego projektu zawierającego do pięciu stron. 15 USD miesięcznie kosztować będzie nieograniczona liczba projektów i 1GB powierzchni, a za 99 USD rocznie dodatkowo wyposażymy się w aplikację desktopową do edycji.

gliffy (gliffy.com)

O gliffy wspomniałem na blogu już dosyć dawno temu (2006 r.) – to prawdopodobnie jedno z pierwszych narzędzi tego rodzaju.

Poza szablonami ekranów gliffy – podobnie do Visio – może być wykorzystywany do tworzenia diagramów (m.in. UML, Flowchart, ERD), planów pomieszczeń czy wizualizacji analiz SWOT.

Narzędzie jest obsługiwane przez przeglądarkę, a także jako wtyczka do Confluence oraz Jira. Dodatkowo, twórcy udostępniają API, pozwalające na tworzenie diagramów w serwisach zewnętrznych.

Niestety, także w tym przypadku biblioteka kontrolek interfejsu jest trochę uboga i ogranicza się do kilku prostych bloków i elementów formularza.

Podstawowa, darmowa wersja gliffy jest ograniczona do pięciu udostępnianych publicznie diagramów. Jednostanowiskowa licencja dla jednej osoby to wydatek rzędu 5 USD (płatne kwartalnie). Wypróbowanie nie wymaga nawet rejestracji, co chwalebne.

Pencil (evolus.vn/Pencil/)

Darmowa wtyczka do przeglądarki Firefox. Używanie tej aplikacji nie należy niestety do przyjemności – samo zaznaczenie i przesunięcie obiektu może nastręczać pewnych trudności.

Poniżej zrzut ekranu z przykładowego produktu pracy z narzędziem Pencil. Zamieszczam dla zilustrowania teoretycznych możliwości – przy odpowiednim nakładzie pracy można uzyskać przyzwoity efekt, nawet wykorzystując stosunkowo ubogie i niewygodne aplikacje. Ta sama uwaga dotyczy oczywiście wszystkich ocenianych tu narzędzi.

Pencil umożliwia wyłącznie budowanie statycznych schematów i eksport tychże do równie statycznych plików png.

jumpchart (jumpchart.com)

Narzędzie, w którym formatowanie tekstu i wstawianie kontrolek odbywa się za pomocą znanego choćby z aplikacji 36signals textile markup language. Tworzymy szablony wstawiając odpowiednie znaczniki przy użyciu edytora. Osobiście uważam, że stosowanie znaczników textile nie efektywną metodą budowania szablonów interfejsu. Zestaw tagów jest bardzo ubogi i w praktyce uniemożliwia wygodne rozmieszczanie elementów na stronie.

Jumpchart jest dostępny w wersji darmowej, ograniczonej do jednego projektu składającego się z maksymalnie 10 stron, w ramach 1MB na dysku. Płatny dostęp to – w zależności od wersji (od 5 do 50 USD miesięcznie) – odpowiednio większa liczba projektów, użytkowników, zabezpieczenia (SSL) i eksport do mechanizmu WordPress.

Balsamiq Mockups (balsamiq.com)

Jeszcze jedna aplikacja stworzona w Adobe Air, służąca do tworzenia szkiców LO-FI.

Oto prezentacja możliwości, przygotowana prez producenta – niskiej niestety jakości.

Przyznam, że mam problem ze stosowaniem podobnych narzędzi do szkicowania. W założeniu służyć mają szybkiemu zilustrowaniu koncepcji przy użyciu gotowych kontrolek, bez konieczności rysowania od zera. Teoretycznie, bo w praktyce nakład pracy niezbędny do stworzenia sensownego ekranu nie sprowadza się do szybszego bądź wolniejszego posługiwania się narzędziem. Najwięcej czasu zajmuje tak naprawdę wymyślenie koncepcji, co w moim przypadku wspiera przekładanie modułów w tę i z powrotem po ekranie. Samo narysowanie kontrolki to rzecz wtórna… Być może inni projektanci pracują inaczej, ale ja nie potrafię rozdzielić wizualizowania koncepcji od jej wymyślania.

Drugi problem to odbiorcy szkiców tego rodzaju. Próbowałem swego czasu przekazać pomysł klientowi przy użyciu efektów pracy w Balsamiq i wywołało to pewne zdziwienie. Mam wrażenie, że to się nie sprawdzi jako metoda komunikacji pomysłu na linii agencja interaktywna – klient. Być może na wewnętrzne potrzeby, ale do tego osobiście wolę malowanie flamastrem po tablicy.

Koszt licencji na Balsamiq to 79 USD.

ForeUI (foreui.com)

Aplikacja typu desktop, napisana w Javie – a co za tym idzie – niezależna od systemu operacyjnego. Biorąc pod uwagę stosunkowo niski, jednorazowy koszt zakupu licencji, ForeUI oferuje całkiem niezłe możliwości. Osobiście używam Axure do budowy interaktywnych prototypów, które – mimo że o wiele droższe – nie posiada pewnej istotnej funkcji. Chodzi o tworzenie rozbudowanych instrukcji warunkowych, które ułatwiają obsługę bardziej skomplikowanych procesów. ForeUI umożliwia nie tylko budowanie warunków przy użyciu wizualnego interfejsu, ale także – poprzez podanie instrukcji w polu tekstowym. Co więcej, poza wielokrotnymi if-then (jak w Axure), możliwe jest używanie konstrukcji switch, co jest naprawdę przełomowe. Niestety, nie funkcjonalność nie została dopracowana – na możliwość ręcznego wprowadzenia warunków wpadłem metodą prób i błędów. Wygląda na to, że niemożliwe jest obsłużenie w ten sposób instrukcji switch, a systemu pomocy brak. Być może jednak moje oczekiwania idą za bardzo w stronę narzędzia typu RAD, co odrobinę kłóci się z założeniami aplikacji do prototypowania.

ForeUI udostępnia kilka podstawowych kształtów, niewielką bibliotekę kontrolek formularzy, nawigacji i prezentacji danych, a także kilkadziesiąt ikon.

Poza w miarę standardowymi opcjami eksportu do obrazków (png, jpg, bmp, gif, wbmp) oraz pdf, ForeUI oferuje eksport prototypu do html, co należy oczywiście zapisać na plus. Niestety, aplikacja w wersji 2.0 beta na OS X ma żywotny problem z zapisem plików, proces zatrzymuje się w połowie i na tym koniec.

Interesującą opcją jest możliwość uzyskania nieodpłatnej licencji przez blogerów – w zamian za opublikowanie recenzji. Zakup standardowej licencji kosztować nas będzie 79 USD.

FlairBuilder (flairbuilder.com)

Aplikacja służąca do projektowania ekranów w klasycznym widoku kontrolek bądź jako szkice. Ciekawostka – możliwy jest import szkiców przygotowanych w Balsamiq. Jeszcze jedno narzędzie w Adobe Air, w którym przemieszczanie niektórych obiektów po ekranie przyprawia o ból głowy.

Udostępniana biblioteka komponentów interfejsu może być wystarczająca, niektóre obiekty wyposażyć można w interakcję, bez użycia instrukcji warunkowych.

Prezentacja aplikacji:

Koszt pojedynczej licencji – 99 USD.

Krótkie podsumowanie

Wypaczony korzystaniem z Omnigraffle czy Visio, umożliwiających łatwe tworzenie kontrolek od zera, oczekiwałem podobnych możliwości po recenzowanych aplikacjach. Po przejrzeniu możliwości kilku narzędzi, zastanowiłem się nad sposobem, w jaki sam pracuję. Doszedłem do wniosku, że także używając droższych programów nie posługuję się narzędziami w rodzaju „ołówka”, lecz korzystam z gotowych, prostych obiektów – figur geometrycznych i paneli tekstowych. Owszem, istnienie bibliotek kontrolek bardzo ułatwia życie, bo zamiast zmieniać właściwości prostokąta i nakładać kilka warstw na siebie, wolę przeciągnąć nawigację zakładkową z przybornika. To z całą pewnością skraca proces projektowania. Jednak najbardziej efektowny wygląd projektu uzyskuje się modyfikując kilka własności tych najbardziej podstawowych elementów, co nie wymaga wyposażenia aplikacji w szczególnie skomplikowane rozwiązania.

Przede wszystkim jednak – jak już wspomniałem powyżej przy okazji Balsamiq – osobiście tworzę koncepcję przemieszczając moduły po ekranie, zgodnie z projektowaniu hierarchią ważności. Nie ma większego znaczenia, na ile wyrafinowane będzie narzędzie, którego używam, skoro najwięcej czasu spędzam na wymyślaniu koncepcji. Oczywiście jest to stwierdzenie prawdziwe tylko do pewnego stopnia – jeżeli konstruuję interaktywny prototyp o wysokim poziomie komplikacji, już po zbudowaniu szkieletu pomysłu długie godziny schodzą na mozolnej dłubaninie w każdym ekranie. Niemniej jednak, wszędzie tam, gdzie projekt nie wymaga zasymulowania każdej możliwej interakcji (bo szybciej będzie ją opisać, niż zbudować w Axure), wystarczy użyć prostszych narzędzi, bez bogatych bibliotek. Oczywiście im więcej wydamy na oprogramowanie, tym mniej czasu spędzimy przeklinając z powodu drobiazgów, utrudniających nam życie. Kwestia czasu, jaki na codzień spędzamy przy makietach.

Poza funkcją budowania prototypów, znaczenie mogą mieć możliwości eksportu, wyświetlania podglądu, czy w wersji bardziej rozbudowanej – ułatwienia dla prowadzących testy z użytkownikami. Osobiście nie korzystałem nigdy z komunikacyjnych możliwości platform tego typu, ale być może dla kogoś ma to znaczenie. W moim przypadku najlepiej sprawdza się prezentacja na żywo w zespole, ale w czasach udostępniania ekranu i szybszych łącz, kto wie.

Nie wskażę w tym podsumowaniu jakiegoś pojedynczego lidera, nie było moim celem tworzenie rankingów. Wybór aplikacji zależy od potrzeb projektanta i czasu poświęcanego w ramach obowiązków na projektowanie. Osoby projektujące dużo większych aplikacji interaktywnych, które mogą przeznaczyć trochę czasu na wdrożenie większego systemu stosunkowo niskim kosztem, wybiorą być może Protoshare. Wszyscy ci, którzy potrzebują prostego narzędzia do naszkicowania mniejszego serwisu ad hoc, mogą wybrać po prostu darmową wtyczkę Pencil. Spośród pozostałych aplikacji, iPlotz czy Pidoco to coś pośredniego – stosunkowo tani abonament na poziomie kilku-kilkunastu dolarów ułatwi pracę przy małym i średnim projekcie.

Źródła

Źródłowe listy rozmaitych „top tools”, narzędzia mogą się powtarzać:

• Top 20 Wireframe Tools
• 16 Design Tools for Prototyping and Wireframing