Strona główna » Projektowanie interakcji

W czym projektować? Subiektywna lista narzędzi do prototypowania

8 sierpnia 2012 napisała Ewa [ 16 odpowiedzi ] Drukuj wpis

Jednym z najczęstszych pytań, jakie słyszę przy okazji szkoleń, spotkań branżowych czy przy piwie jest „Jakie programy do prototypowania polecasz?” Jeszcze parę lat temu faktycznie śledziłam wszelkie nowinki i testowałam praktycznie każde oprogramowanie, które się pojawiało na rynku. Dziś oferta jest nieporównywalnie bardziej szeroka. Nowe aplikacje powstają jak grzyby po deszczu i już coraz trudniej śledzić każdą nowość. Przedstawiam więc moją subiektywną listę faworytów, zawierającą narzędzia, na których pracuję i które polecam.

Papier, karteczki, itp.

Nie sposób mówić o narzędziach projektanta bez podkreślenia wagi szkicowania. Słowo „Axure” nie przejdzie mi przez gardło, jeśli wcześniej nie powiem „papier”, więc dla czystego sumienia, zanim przejdę do aplikacji, odsyłam do artykułu Basi – Szkicowanie pomysłów – rola papierowych makiet w procesie projektowym.

Low-fidelity: Balsamiq Mockups

Program: http://www.balsamiq.com/ |   Cena: $79 za wersję desktopową   |   Trial: 7 dni

Biblioteki: https://mockupstogo.mybalsamiq.com/projects

Pierwszy raz próbowałam triala Balsamiqa parę ładnych lat temu i, przyznam, że dość sceptycznie do niego podchodziłam: stosunkowo mało funkcjonalności, niewielka elastyczność i ten Comic Sans… Aż trafiłam do zespołu, który na nim pracował i nie miałam wyjścia – musiałam spróbować raz jeszcze. Dziś sobie pracy bez niego nie wyobrażam.

Projektowanie w Balsamiqu jest niebywale szybkie. Uruchamia się błyskawicznie, co jest miłą odmianą w stosunku do Axure czy Adobe’owych produktów, przy których można spokojnie zrobić sobie herbatę w oczekiwaniu na pełny rozruch. Program jest na tyle prosty i tak wspomaga naukę, że można go opanować już po paru makietach. Jednak prawdziwa szybkość Balsamiqa wychodzi w codziennej pracy i po opanowaniu paru podstawowych funkcji. Moja ulubiona to automatyczne formatowanie tekstu na komponenty. Poniższa ilustracja pokazuje, jak z tekstu powstaje menu iPhone’owe. Nie znam innego oprogramowania z tej branży, które by pozwalało tak szybko tworzyć i edytować elementy makiety.

Tryb edycji tekstowej komponentu (po lewej) i widok komponentu (po prawej).

Tryb edycji tekstowej komponentu (po lewej) i widok komponentu (po prawej).

Plusem jest też wygodny sposób adnotacji projektów. Notatki można łatwo pokazywać i ukrywać, dzięki czemu są widoczne w odpowiednim miejscu i czasie.

Widok komponentu z ukrytymi notatkami (po lewej) i widocznymi notatkami (po prawej).

Widok komponentu z ukrytymi notatkami (po lewej) i widocznymi notatkami (po prawej).

Balsamiq nie jest do wszystkiego. Nie pozwala na większą interaktywność niż proste linkowanie z elementu do innej strony. Nie ma też łatwej możliwości tworzenia znanych choćby z Axure masterów, czyli komponentów czy grup komponentów, które można stosować w wielu miejscach projektu, ale edytować wszystkie wystąpienia za jednym razem. Jest to celowa decyzja twórców – siła programu leży w jego prostocie i lekkości.

To wszystko czyni z Balsamiqa znakomite narzędzie do projektowania niskiego poziomu szczegółowości – szybko i przyjemnie. Bardzo dobrze się na nim pracuje z innymi projektantami, ale także z deweloperami i klientami, którzy rozumieją czemu pracujemy na szkicach. Jednak już do przygotowania złożonego projektu czy prototypu do testu z użytkownikami wybieram inne narzędzie.

PS. Comic Sans można wyłączyć, jeśli się ma do czynienia z osobami uczulonymi na tę czcionkę J

Medium-fidelity: Axure

Program: http://www.axure.com |   Cena: $589 (taniej dla studentów) |   Trial: 30 dni

Biblioteki: http://www.axure.com/download-widget-libraries

Axure to najbardziej rozbudowane narzędzie do prototypowania, na jakim pracuję. Kiedyś byłam mu bardzo wierna, teraz trochę romansuję z innymi, ale nadal jest to ważna pozycja. Program ten ma kilka silnych punktów. Po pierwsze, pozwala na tworzenie wspomnianych już masterów, dzięki czemu możemy stworzyć, przykładowo, jeden nagłówek, który wykorzystamy na wielu podstronach, a gdy będzie potrzeba coś w nim zmienić, wystarczy edytować raz, by zmienione zostały wszystkie jego wystąpienia. Jak wszyscy wiemy, zmiany są nieodzownym elementem projektowania. Dzięki temu złożone projekty wolę robić w Axure – łatwiej się w nich połapać i zachować spójność.

Po drugie, do dyspozycji projektanta jest ogromna ilość widżetów i gotowych komponentów. Można też tworzyć swoje własne biblioteki. Pozwala to z czasem szybko i sprawnie składać makiety.

Komponenty w Axure z biblioteki Better Defaults.

Komponenty w Axure z biblioteki Better Defaults (http://www.acleandesign.com/2009/04/better-defaults-for-axure-a-widget-library/).

Wreszcie po trzecie, Axure umożliwia wprowadzanie doprawdy zaawansowanych interakcji – mówimy tu już nie tylko o linkowaniu, ale też o stanach, dynamicznym pokazywaniu i ukrywaniu elementów, a nawet pracy na zmiennych. Wszystko to pozwala na prototypowanie złożonych interakcji, bardzo zbliżonych do tych, jakie będzie miał działający serwis (np. formularze z walidacją, interaktywne mapy, autouzupełnianie). Dlatego Axure wybieram ilekroć przygotowuję prototyp, który testować będą użytkownicy.

Za minus Axure można uznać stosunkowo długi czas nauki. O ile złożenie pierwszej makiety może nie będzie szalenie skomplikowane, to opanowanie wspomnianych wyżej zaawansowanych funkcji wymaga wprawy. Osobiście uważam też, że rozbudowane możliwości programu są obosiecznym mieczem. W wielu przypadkach tak naprawdę nie ma potrzeby aż tak dokładnego i dosłownego odwzorowywania interakcji w trakcie projektowania, a godziny spędzone na pisaniu warunków w Axure można lepiej zainwestować w rozmowę z zespołem czy klientem. Projektant musi świadomie podejmować decyzję, co i na jakim poziomie szczegółowości trzeba na danym etapie projektu stworzyć.

High-fidelity: Adobe Fireworks

Program: http://www.adobe.com/pl/products/fireworks.html|   Cena: € 289,05|   Trial: 30 dni

Bibiloteki: 25 Awesome Adobe Fireworks Resources for Web and App Developers

Osobiście nie jestem fanką Photoshopa i kiedykolwiek musiałam z niego korzystać – czy to by przygotować czy modyfikować projekt graficzny – było to dość uciążliwe. Czasem jednak uzasadnione jest przygotowanie makiet dokładnie odzwierciedlających docelowy wygląd aplikacji czy strony (high-fidelity). W tym względzie dużo lepiej sprawuje się Fireworks.

Program przypomina Photoshopa wyglądem i obsługą. Z tego względu nie trudno przesiąść się z jednego na drugi. Co takiego wartościowego wnosi Fireworks dla projektanta UX?

Projektować w nim można nie tylko w bitmapach, ale i w wektorach, co ułatwia rysowanie i edycję elementów  (przynajmniej mnie). W obrębie jednego projektu (pliku) można mieć wiele stron, między którymi dowolnie można współdzielić warstwy. Podobnie jak w przypadku masterów Axure, wystarczy wprowadzić potrzebne zmiany w jednym miejscu, a będą widoczne na wszystkich stronach.

Fireworks pozwala na linkowanie między stronami i – dzięki obsłudze stanów elementów – umożliwia markowanie akcji on-hover, pop-upów, itp.

Mocną stroną Fireworksa są biblioteki komponentów i dodatki. W Internecie jest dostępne mnóstwo gotowych komponentów, z których pomocą można bardzo szybko tworzyć makiety (zainteresowanych na początek odsyłam do zbioru 25 Awesome Adobe Fireworks Resources for Web and App Developers).

Co lepsze, biblioteki komponentów można też tworzyć samodzielnie. Jeśli, tak jak ja, pracujesz przynajmniej w części w oparciu o style guide (czyli uprzednio opracowane standardy wyglądu aplikacji wspólne dla produktów tworzonych w obrębie firmy), ten produkt z oferty Adobe będzie dla Ciebie nieoceniony. Raz stworzona biblioteka komponentów służy całemu wewnętrznemu zespołowi UX w firmie. Poszczególne komponenty wyglądają dokładnie tak, jak będą wyglądać w gotowej aplikacji. Są przy tym na tyle łatwe w edycji, że tworzenie makiety high-fidelity staje się błyskawiczne. Możesz na przykład stworzyć komponent, który będzie dokładnie taki, jak dyktują to wewnętrzne firmowe standardy, ale który będziesz mógł z łatwością edytować – jak na poniższym przykładzie.

Edytowanie własnego komponentu w Fireworks (4 przykłady). Żółte obszary pokazują, co zostało zmienione.

Edytowanie własnego komponentu w Fireworks (4 przykłady). Żółte obszary pokazują, co zostało zmienione.

Podsumowanie

Balsamiq, Axure i Fireworks to aktualnie moje trzy ulubione i najczęściej używane narzędzia do prototypowania. Decyzja, którego z nich używam do danego projektu czy zadania, jest podyktowana jego specyfiką. Do prostych szkiców i pracy koncepcyjnej świetnie sprawdza się Balsamiq. Do złożonych projektów, szczególnie testowanych z użytkownikami, lepiej nadaje się Axure. A do prototypowania wysokiej szczegółowości i pracy już na graficznych komponentach, polecam Fireworksa.

Korzystacie z innych narzędzi? Pochwalcie się w komentarzach.

Autorka

Ewa Sobula

www: http://www.linkedin.com/pub/ewa-sobula/30/407/694
UX designer w Sabre Airline Solutions. Umiejętności badawcze i analityczne rozwijała na socjologii, by lepiej rozumieć użytkowników. Równolegle uczyła się tworzenia serwisów internetowych, by poznać technologiczne możliwości i ograniczenia. Teraz z przyjemnością łączy te kompetencje projektując i badając serwisy. Czytaj więcej
Tagi: , , , ,
  • http://www.goldenline.pl/piotr-krol Piotr Król

    Axure ma jeszcze jedną potężną przewagę nad Fireworksem – pozwala współdzielić bibliotekę elementów (wystarczy wrzucić ją na dysk sieciowy/dropboxa). Jeżeli projektuje się zespole, to pomaga trzymać się tych samych standardów i oszczędza czas.

    W Axure też można zrobić pixel-perfect makietę tak jak w Fireworksie ;)

  • http://www.facebook.com/pawel.bilinski Paweł Biliński

    Z narzędzi internetowych polecam HotGloo oraz ProtoShare, przy czym ten drugi to niezła kobyła i trzeba mieć sensowne CPU/RAM. :)

  • Dziechciaronek

    Google do swojego zespołu szuka specjalisty UX TV, który do prototypownia będzie wykorzystywał HTML, CSS, i JS. To jest dopiero high fidelity ;)

  • http://swiatczytnikow.pl Robert Drózd

    Nieco ponad rok temu wciągnięto mnie do projektu gdzie podstawą był Balsamiq. Rysowanie w tym czegoś bardziej skomplikowanego bylo dla mnie jednak masakrą. To narzędzie wręcz wymusza podejście lo-fi.

    Nadal jednak jestem wielkim fanem Axure ze stylem „szkicowym” i czcionką Axure Handwriting. Szkoda tylko że nie opanowali osadzania tej czcionki w eksportach do webu, bo przecież nie każę klientom jej instalować…

  • Tomek

    Visio + VisDynamica :), raczej do hi-fi.

  • http://swiatczytnikow.pl Robert Drózd

    Są frameworki CSS specjalnie do prototypowania, więc to może być całkiem sensowna opcja, szczególnie że potem z prototypu można szybko przejść do wdrożenia. :)

  • Cyryl Kwaśniewski

    Zabrakło ProtoShare które operuje na sposobie myślenia i funkcjach używanych tradycyjnie przez developerów frontend :)

  • http://www.facebook.com/profile.php?id=100000648363074 Grzegorz Lewandowski

    justproto. tanie (250zł w planie maksimum) i jak dla mnie optymalne do mid i hi protosów.

  • http://twitter.com/DeSmartcom DeSmart

    a UXPin? wg mnie doskonała alternatywa dla Axure. plus – wspieramy polaków na międzynarodowej arenie :)

  • http://www.facebook.com/profile.php?id=1115703292 Arkadiusz Janeczko

    Justinmind - 

  • Marcin

     WireframeSketcher – mało znany, ale go uwielbiam. Jest multiplatformowy, łatwy w użyciu, posiada 90% tego co jest potrzebne do projektowania w postaci gotowych komponentów (więc prawie nic nie trzeba rysować) i jest śmiesznie tani. Polecam.

  • Zhdhb

    W pracy używam iRise. dużo potrafi.. Mozna nawet tworzyc bazy danych.

  • Adam

    A tak z ciekawości spytam, czy ktoś tworzy prototypy w Excelu?

  • Patrykko

    Hello, na pierwszej liście subiektywnej listy zabrakło UXPin

  • z

    polecam Antetype! jest za free wciaz sie rozwija i w przeciwienstwie do innych programow nie wyrywa prototypowania z kontekstu czyli html css. Layout tworzy sie tak jak podczas budowania htmlem i css co znacznie upraszcza komunikacje z developerami. Na poczatku moze odstraszac tych co nigdy nie lizneli kodowania, ale juz po paru probach kazdy powinien zalapac. Ode mnie team antetype dostaje plusa za oryginalne podejscie do tematu prototypowania! Jak ktos sprawdzi niech pisze ciekawa jestem opinii innych.

  • Pingback: Makiety – rusztowanie dla grafiki | Grafika Netkata