Jedno z pierwszych pytań projektanta interfejsów i stron WWW dotyczy wyboru narzędzi do swojej pracy. Jakie narzędzia dostępne są w ogóle? Które warto wybrać? Wybór przychodzi z czasem.
Na rynku nie ma zbyt wielu aplikacji, które można by użyć w ramach prac z zakresu prototypowania. Można co prawda prototypować nawet przy pomocy tak powszednich programów jak MS Word czy MS PowerPoint, ale efekty pozostawiają wiele do życzenia. Stąd jednym z głównych tematów książki „Prototypowanie: metody i narzędzia”, będzie właśnie przegląd dostępnego oprogramowania, ułatwiającego życie projektantom. Dzisiaj o jednym z takich programów.
***
Mockup Screen to wyjątkowo proste narzędzie autorstwa chorwackiego programisty Igora Ješe, które wychodząc z założenia „Sketch Screens in Minutes” doczekało się wzmianki m.in w Gui Design for Dummies, a i chłopcy z Microsoft zauważyli je na rynku. Mockup Screen jest tak prosty, że podręcznik użytkownika liczy sobie ledwie 12 stron html, w związku z czym opanowanie obsługi tego programu nie powinno zająć więcej, niż kilkanaście minut. Także cena jest przyjazna – 79$ za licencję na jedno stanowisko.
W Mockup Screen mamy do czynienia z pracą na scenariuszach, na które składają się pojedyncze makiety poszczególnych stanów interfejsu / strony WWW (rysunek niżej).
Wybierając z menu opcję New Screen i klikając na nowo powstałą pustą makietę przechodzimy do widoku tworzenia pojedynczej strony, na której będzie znajdował się nasz interfejs bądź schemat strony internetowej. Piszę schemat, bo w Mockup mamy do czynienia z grafiką dwubitową – wszystkie elementy naszego interfejsu będą czarnobiałe. Ma to swoje wady, ale ma też zalety – tego rodzaju makiety mają swój niezaprzeczalny charakter, zbliżony do tego, jaki możemy znaleźć w ramach pierwszego interfejsu PDA Apple Newton.
Podczas procesu rysowania interfejsu mamy do wykorzystania biblioteki podstawowych elementów GUI, które zostały pogrupowane w następujący sposób:
- elementy internetowe (web elements): text link, image, horizontal line,
- elementy tekstowe (text elements): simple text, multiline text, float text,
- standardowe elementy (standard elements): button, field, dropdown, checkbox, list, radio button, table, tree (drzewo przydatne przy wizualizacji map WWW), frame, tabs (układ zakładek),
- grupy ikon (icon groups): emotikony, strzałki, symbole i inne znaki specjalne.
Dodatkowo dysponujemy funkcją tranfsormacji, dzięki czemu jednym kliknięciem możemy zmienić dowolny element interfejsu w każdy inny – chociażby button zamienić w dropdown.
Oczywiście elementom interaktywnym interfejsu, który wykonujemy, możemy nadać zmienne – tytuły zakładkom, przypisać funkcję do buttonu (Anuluj, OK, Wyślij, etc.), widoczny stan dropdowna czy pól logowania się, itd. Chociaż należy zaznaczyć, że i tak nie użyczymy żadnej interaktywności naszych wygenerowanych makiet, ze względu na fakt, że program eksportuje pliki do formatów .GIF i .JPG.
Na koniec zapisujemy nasze efekty pracy + możemy wyeksportować cały scenariusz do pliku .html, w którym zawarte będą poszczególne makiety, jakie wykonaliśmy.
To wszystko. Prościej już nie można.