Zakładki:
Inne moje "rzeczy"
Inne rzeczy
Innych "rzeczy"
Książki
Możliwości i wzorce projektowe
Po godzinach
Rządzą... Gry
Zobacz mnie na GoldenLine
ThinkLab: moja firma

MOJE KSIĄŻKI - AUTOR

Użyteczność w praktyceM. Kasperski, A. Boguska-Torbicz Projektowanie stron WWW. Użyteczność w praktyce, Helion 2008.

Moja książkaM. Kasperski, Sztuczna Inteligencja, Helion 2003.

REDAKTOR MERYTORYCZNY

UmysłD. Casacuberta, Umysł. Czym jest i jak działa, Świat Książki 2007.

100 sposobów...T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, Onepress 2006.

Istota inteligencjiJ. Hawkins, S. Blakeslee, Istota inteligencji, Onepress 2005.

RSS
czwartek, 27 września 2007

Jak pokazują wyniki badań Gemiusa, wciąż na szczycie króluje rozdzielczość 1024x768 (55-56% dla Polski i 41% dla świata) wraz z 1280x1024 (18,6% - Polska, 17,7% - świat). Jednak najlepszy komputer dla projektanta to taki, który wyświetla obraz w dużej rozdzielczości (np. 1680x1050), dzięki czemu podczas prototypowania widać zarówno całą projektowaną stronę, jak i boczne paski z narzędziami (np. w programie Axure). Jeszcze jak w przypadku stron WWW o ustawieniach bezwzględnych nie ma problemu ze zgrabowaną grafiką, o tyle ze stronami o ustawieniach względnych to makabra - ciągłe przełączanie się z jednej na drugą rozdzielczość. Na pomoc przychodzi jednak Window Resizer.

 

Window Resizer.

Rysunek 1. Dostęp do pluginu Window Resizer w ramach Narzędzi przeglądarki Firefox.
Możliwość dodawania swoich ustawień rozdzielczości znacznie rozszerza funkcjonalność wtyczki.

 

Window Resizer to bardzo fajny plugin do przeglądarki Firefox, który umożliwia skalowanie okna do danej rozdzielczości. Dzięki czemu:

A) sprzydaje się zarówno na etapie grabowania grafiki ze stron WWW, nad których redesignem pracujemy (albo rozwojem funkcjonalności dla danego serwisu) oraz

B) jest kapitalnym narzędziem do testów - w tym testów stron WWW na urzązenia mobilne.

Wtyczka pozwala nam - w ramach ustawień domyślnych - przeskalować okno do podstawowych rozdzielczości: 640x480, 800x600, 1024x768, 1280x1024 plus zdefiniować swoje własne. I właśnie dzięki tej drugiej funkcjonalności jest świetnym narzędziem do testowania stron mobilnych, dzięki czemu np. możemy skonfigurować swój program tak, by wyświetlał nam strony w zalecanej przez W3C (patrz: Mobile Web Developer’s Guide) rozdzielczości 200x250.

 

Rozdzielczości dla stron w wersji mobile.

Rysunek 2. Rozdzielczości dla stron mobile.

 

Małe, a przydatne narzędzie. Polecam!

Pobierz i zainstaluj wtyczkę.

17:25, marekkasperski
Link Komentarze (6) »
sobota, 22 września 2007

Uważna lektura poniższych fragmentów okraszona chwilą zadumy nad przeczytanym tekstem, tworzą mieszankę wybuchową :)

Przypominam, że chodzi o argumenty na rzecz tezy, którą już przedstawiłem: nt. wyższości menu zorientowanego po prawej stronie nad menu lewokolumnowym. Wówczas przedstawiłem zasadniczo dwa argumenty, które nazwałem (mało zgrabnie): argument oczny oraz argument ręczny. Dzisiaj trzeci - argument mózgowy.

 

***

"(...) każda z półkula mózgu ma tendencję do zwracania uwagi na rzeczy znajdujące się po przeciwnej stronie ciała [asymetrycznie: lewa na prawo, prawa na lewo] (...), przy czym lewa półkula jest w tym znacznie bardziej sprawna niż prawa. Z tego wynika, że uwaga wszystkich ludzi (...) może być ściągana w prawo z powodu braku równowagi między półkulami.

Pewne dane potwierdzają ten wniosek: (...) Przeprowadzono pewne niecodzienne badania na temat tego, co ludzie lubią, a czego nie lubią w obrazach: w dwóch zadaniach, amerykańskim i brytyjskim, stwierdzono, że większość ludzi woli obrazy czy fotografie, w których główne elementy występują po prawej stronie lub sprawiają wrażenie sekwencji wiodącej na prawo (...). Inaczej mówiąc, preferowane są te obrazy i fotografie, które kierują oczy widza na prawo. (...)

 

Mózg a percepcja wzrokowa.

W połowie lat 30. [ubiegłego stulecia] nowojorski psychiatra Paul Schilder stwierdził, że (...) gdy poprosi się kogoś, by zamknął oczy i wyciągnął przed siebie obie ręce, zwykle prawa ręka będzie uniesiona wyżej niż lewa (nie wprowadził rozróżnienia między ludźmi prawo- i leworęcznymi). Zdaniem Schildera dowodzi to, że wszyscy ignorujemy - do pewnego stopnia - lewą stronę. Obecnie niektórzy neurofizjolodzy sądzą, że wszystkie te dane [w tekście jest więcej przykładów] (...) pokazują, że preferencja lewej półkuli dla prawej strony jest nieco silniejsza niż podobna preferencja prawej półkuli dla lewej strony, a w pewnych okolicznościach preferencja lewej półkuli może całkowicie przeważyć [mowa o percepcji wzrokowej i systemie uwagi]. (...)

Wyniki badań, ogłoszone na początku 1993 roku przez Maurizia Corbettę i jego współpracowników z Wydziału Medycyny Uniwersytetu Waszyngtońskiego, pokazały, że dwie półkule mózgu funkcjonują rzeczywiście odmiennie, kiedy dochodzi do przerzucania uwagi z jednego obiektu na drugi. Eksperyment wspomnianych naukowców polegał na tym, że ochotnicy siedzieli na przeciw ekranu, na którym wyświetlano zbiór malutkich prostokątów. Dziesięć z nich układało się w szereg biegnący z lewa na prawo, a jedenasty prostokąt - położony ponad nimi - znajdował się dokładnie pośrodku szeregu. Uczestnicy wpatrywali się w krzyżyk umieszczony w jedenastym prostokącie i bez przenoszenia wzroku starali się zauważyć migającą gwiazdkę, przesuwającą się z jednego do drugiego prostokąta w szeregu poniżej. Gwiazdka najczęściej poruszała się według przewidywalnego schematu: systematycznie na prawo lub na lewo, by następnie powrócić w ten sam sposób i zacząć od nowa. W tym samym czasie przy użyciu PET uzyskiwano obrazy mózgów uczestników eksperymentu.

Wyniki były zaskakujące. Gdy gwiazdka pojawiała się i znikała w prostokątach po lewej stronie szeregu, zgodnie z oczekiwaniami prawa strona mózgu stawała się bardzo aktywna. Lewa półkula mózgowa wykazywała, co prawda, śladową aktywność, gdy uwaga kierowała się na lewo, ale główną rolę wyraźnie odgrywała tu prawa półkula. Wbrew oczekiwaniom prawa półkula pracowała intensywnie również wtedy, gdy gwiazdka wyskakiwała po prawej stronie, czyli wówczas, kiedy to lewa półkula powinna kierować przenoszeniem uwagi z jednego prostokąta na drugi.

(...) A zatem percypowanie otaczającej przestrzeni nie jest zrównoważone: uwaga obejmująca lewą stronę znajduje się niemal wyłącznie pod kontrolą prawej półkuli mózgowej, natomiast za uwagę po prawej stronie odpowiedzialne są obie półkule."

Cyt. za: J. Ingram, Płonący dom. Odkrywając tajemnice mózgu, Prószyński i S-ka, Warszawa 1996, s. 80-83.

 

Update z 25 września

19:54, marekkasperski
Link Komentarze (7) »
wtorek, 18 września 2007

No właśnie. I zrobił się nam rynek (chociaż ja wiem, że sam się nie zrobił, i rynek zawdzięcza to kilku osobom, którzy zrobili kawał dobrej roboty - tak, tak Tomek, pamiętamy :) ). Ale czas najwyższy włączyć się w prace na rzecz budowania świadomości tego, czym się z osobna - i razem wzięci - kilka osób zajmuje.

Eryk w swoim czasie wyszedł z inicjatywą otworzenia polskiego oddziału UPA... i słusznie. Choć z drugiej strony nie wiem czy wszyscy czujemy taką potrzebę - i temu powinien dopomóc konwent, na którym moglibyśmy się spotkać i ustalić, co zostało zrobione, co jest do zrobienia i czy chcemy dalej razem pchać ten wózek. A jest sporo jeszcze rzeczy do zrobienia.

Problem, który mnie nurtuje ostatnimi czasy: brak polskiej terminologii, bądź choćby brak strategii, którymi z terminów się posługujemy w ramach naszej codziennej pracy - zwłaszcza tej części z klientami.

Podam przykład:

  • ja na wizytówce (z przydziału, z Grona) mam User Interaction Designer (była też opcja User Interface Designer),
  • Marcin - Interaction Designer,
  • Tomek ze swoją ekipą propagują Usability,
  • Eryk znowu - User Experience,
  • Maciek Lipiec - Information Architect,
  • Marciny, ale i Robert, - z polskiego: użyteczność,
  • itd.
Ja wiem, że dziedzina, w której robimy jest młoda, stąd ma prawo do nieposiadania jeszcze swojego klarownego języka. Wiem też, że jest różnica między usability oraz information architect - ale klienci tego nie wiedzą, bo i wiedzieć nie muszą. A tworzy to spore zamieszanie: "E, to Pan nie zajmuje się usability, tylko UID? My chcieliśmy kogoś od usability...". Chyba czas najwyższy porozmawiać o stanie naszej krajowego poletka...
08:32, marekkasperski
Link Komentarze (9) »
piątek, 14 września 2007

PP.Właśnie otrzymałem paczkę z kilkoma książkami. A w środku m.in. "Paper Prototyping" autorstwa Carolyn Snyder.

 

***

Carolyn jest chyba największą znawczynią tematu prototypowania przy użyciu papieru. W Internecie większość artykułów z tego tematu jest jej autorstwa. Podtytuł książki głosi: "The Fast and Easy Way to Design and Refine User Interfaces" i w zasadzie tak można podsumować same PP.

Pierwszy raz paper prototyping jako metoda projektowania interfejsów programów komputerowych pojawiła się w latach 80. ubiegłego stulecia. Ale swoją popularność zyskała dopiero 10 lat później, gdy zaczęto jej używać jako standard w procesie projektowym w takich firmach jak IBM czy Microsoft; rozgłos nadali jej m.in.: Jared Spool, Jakob Nielsen, Bob Virzi czy Tom Tullis. Chociaż początki prototypowania na papierze są dużo starsze i sięgają starożytności, choć rzecz jasna nie dotyczyły wytwarzania interfejsów oprogramowania.

Prototyp powstały w wyniku użycia metody PP.

Rysunek 1. Prototyp powstały w wyniku użycia metody paper prototyping.

 

Książka Snyder ma blisko 400 stron, co - jeśli chodzi o temat - nie jest mało. Z początku zastanawiałem się co można napisać na tylu stronach o PP, by nie lać wody - artykuły Snyder, któe znałem, były zwięzłe i na temat, mieściły się maksymalnie na kilkunastu stronach, 400 zatem na pierwszy rzut oka może się wydawać lekką przesadą. Ale książka w mig rozwiała moje wątpliwości. Autorka pokazała PP jako metodę na tyle szeroką, że znajdującą zastosowanie np. przy projektowaniu interfejsów telefonu, czy radia samochodowego. Zatem nie ograniczając się do opisania metody, ale i przytaczając case study konkretnych produktów, w tym również tych historycznych, jak w przypadku maszyny sortującej pocztę firmy NCR (1971) czy też translatora scenograficznego firmy Xerox (1974). "PP" to kompendium wiedzy nt. PP.

W ramach PP można wyróżnić dwa zasadnicze sposoby wykonywania prototypów:

  • rysowane - wystarczy kartka i coś do pisania (ołówek, długopis, kredka - najlepiej mieć do dyspozycji kilka kolorów),
  • wycinane - najlepiej wtedy mieć ze sobą "bibliotekę" podstawowych elementów interfejsu (np. pola zaznaczone pola tekstowe, zdjęcia, itp.), albo wydrukowany i rozłożony na elementy pierwsze zrzut wcześniejszej wersji strony,
  • dodatkowo - forma mieszana: rysowanie + wycinanie - którą preferuję jak używam PP - w przypadku gdy najpierw narysujemy elementy strony (albo wydrukujemy, gdy dysponujemy np. zrzutem wcześniejszej wersji strony), a potem je wycinamy w celu ich przestawiana na żywo w czasie rozmowy z klientem.


Rysunek 2. Prototyp w wersji wycinanej strony WWW (u góry) wraz z zrzutem wersji finałowej strony (na dole).

Wersję rysowaną prototypu wraz z jego realizacją można zobaczyć chociażby na blogu blipa.

 

PP ma zarówno zalety, jak i wady.

Zalety PP:

  • łatwość wykonywania prototypów,
  • szybkość ich wykonywania,
  • możliwość prototypowania zawsze i wszędzie, gdzie tylko będziemy mieli coś do pisania, bez odpalania komputera i instalowania oraz uczenia się niekiedy skomplikowanego oprogramowania.

Główną wadą jest to, że nie najlepiej sprawdzają się podczas testowania interakcji - tak jak można na papierze zaobserwować czy rozkład poszczególnych elementów jest ok. - przejrzysta struktura i czytelna architektura informacji - tak już przejścia i wywoływanie kolejnych ekranów jest wysoce nienaturalne.

Kiedy używać PP i w jakim celu?

Najlepiej PP sprawdza się w przypadku:

  • Rozmowy z klientem - zarówno na wstępnym etapie, jak i w ramach późniejszych spotkań, gdy przychodzimy już w prototypem w wersji elektronicznej (ja, dla przykładu, lubię wtedy mieć ze sobą wydrukowaną wersję strony i pociętą na elementy pierwsze tak, by móc w razie czego poprzestawiać je przy kliencie i sprawdzić czy ew. wersja konkurencyjna dobrze by wyglądała, czy też ma jakieś wady (testy A/B).
  • Posiedzenie działu projektowego - w czasie spotkania zespołu nie ma czasu by rysować dokładne interfejsy na komputerze, zresztą spotkaniu sprzyja jak uczestnicy w ogóle w tym czasie nie zajmują się komputerami; kartka i ołówek powinny wystarczyć, a notatki sporządzone na spotkaniu spokojnie mogą posłużyć jako szkice do dalszych prac.
  • Testy projektowe - sporządzone prototypy, jeśli masz jakieś wątpliwości, już na etapie papierowych szkiców możesz pokazać potencjalnym użytkownikom by dowiedzieć się czy wszystko jest ok., czy projekt jest dla nich czytelny.
  • Projektowanie architektury informacji - PP jest niezastąpione jako uzupełnienie card sorting: wypisz na kartce nazwy działów, jakie powinny się znaleźć w witrynie, którą projektujesz, a potem potnij je na równej wielkości karteczki. Daj do ułożenia uczestnikom testu tak, by pogrupowane mogły stanowić podstawę architektury strony. Gdy będziesz miał menu, będziesz mógł dorysować resztę. Zobaczysz, żę w ciągu kilku godzin możesz stworzyć pierwszy prototyp, nad którego udoskonalaniem będziesz mógł dalej pracować.

Carolyn Snyder wymienia jeszcze testy funkcjonalności, w ramach których papierowe prototypy wykorzystywane są jako elementy interfejsów. Chociaż ja osobiście uważam, że efekty PP poprzez swoją nienaturalność w użyciu nie nadają się do tego (choć nadają się do testów projektowych).

Więcej...


***

PS 1: W paczce otrzymałem także wydane w tym roku:

Ale o tych pozycjach przy zgoła innej okazji.

 

PS 2: Ruszyła oficjalna wersja Profeo. Nie byłoby w tym nic specjalnego gdyby nie fakt, że w tej wersji formularz logowania posiada opcję "Zapamiętaj mnie" - o której to opcji w kontekście właśnie logowania do Profeo pisałem jakiś czas temu. Jeszcze gdyby coś zrobić z jasnością tego żółcienia, który jest nieczytelny na szarym, to w ogóle byłoby nieżle.

19:04, marekkasperski
Link Dodaj komentarz »
poniedziałek, 10 września 2007

Przeglądając statystyki odwiedzin bloga, w tym w szczególności zapytania do Google, które prowadzą potem na stronę, zauważyłem, że często pojawia się hasło schematów kolorystycznych do wykorzystania na stronach WWW.

O kolorach już było kilkakrotnie (o widzeniu kolorów i projektowaniu uwzględniającym accessibility, wykorzystaniu w ramach tworzenia e-brandu, o znaczeniu psychofizjologicznym) - stąd zapewne przekierowania z Google - ale o schematach nie. Stąd - wychodząc na przeciw potrzebom :) - dzisiaj właśnie schematy kolorystyczne. Skąd u mnie tak duży nacisk na kwestie kolorystyczne w ramach projektowania interfejsów? Powodów jest kilka. Choćby takie dwa:

  • około 96 % informacji nt. świata zyskujemy w ramach percepcji wzrokowej (to m.in. dlatego tak istotne są dzisiaj badania z wykorzystaniem techniki eyetracking). Ludzkie oko jest wyposażone w aparaturę umożliwiającą widzenie barw oraz widzenie jasności - resztę roboty wykonuje juz mózg. To wyspecjalizowanie - nadwrażliwość na kolory - powoduje, że podczas oceny tego, co widzimy, olbrzymią rolę odgrywa to, czy dana rzecz spełnia nasze oczekiwania kolorystyczne. Zatem: lepiej mieć nad tym panowanie, niż zdawać się na przypadek.
  • McLuhan w ramach teorii mediów twierdził, że sposób prezentowania treści zawiera już w sobie treść. Nic dodać, nic ująć, w przypadku sposobu prezentacji treści wykorzystującego kolory.

MS Word 2007: schematy kolorów.
Rysunek 1. Wagę schematów kolorystycznych gotowych do wykorzystania przez użytkowników, docenił Microsoft. W ramach Office 2007 oddano do użytku całą paletę - od koloru, do wyboru. Widoczne tu zestawy pochodzą z MS Word.

 

 

***

Przy pomocy kilku zasad tworzenia zestawów kolorystycznych, otrzymujemy schematy kolorów harmonijnych: zarówno monochromatyczne, pastelowe, jak i kontrastowe.

W ramach tworzenia zestawów harmonijnych korzysta się m.in. z zasad:

  • zasada komplementarności: weź dowolne dwa kolory leżące naprzeciw siebie w kole barw,
  • zasada triady: weź dowolne trzy kolory leżące na kole barw od siebie w jednakowych odległościach, tworząc tym samym trójkąt,
  • weź cztery dowolne kolory leżące na kole barw, które leżą od siebie tak, że tworzą wierzchołki prostokąta,
  • i innych.

Korzystając ze strony Adobe Kuler można przekonać się na własne oczy jak to działa.

Zestawy kolorów monochromatycznych uzyskać bardzo łatwo - np. weź dowolny kolor i, z jednej strony, dodawaj do niego +20%, +40%, + 60%, +80% białego oraz, z drugiej strony, +20%, +40%, + 60%, +80% koloru czarnego. Jednak w przypadku kolorów monochromatycznych pamiętajmy o odpowiednim kontraście, który będzie ważny ze względu na czytelność tekstu i tła, na którym tekst się znajduje.

Zestawy barw pastelowych uzyskujemy z odległych od siebie barw ale posiadających podobne cechy, na przykład niski stopień nasycenia.

Jeśli chodzi o schematy kontrastowe, to wystarczy połączyć ze sobą barwy dopełniające się.

 

Projekty strony WWW wykorzystujące monochromatyczne zestawy kolorów.

Rysunek 2. Projekty strony WWW wykorzystujące monochromatyczne zestawy kolorów.

 

 

***

33 schematy kolorystyczne [do wykorzystania na strony WWW]*

 

#6B2E50 | #B24D89 | #D293B7 | #E1B7CF | #F0DBE7 | #D8E1B7

 



#FB6BB3 | #FF99CC | #FFB3D9 | #FFCDE6 | #FFE7F3

 



#663355 | #663366 | #CC66CC | #887788 | #BBAABB | #EEBBEE | #EEBBDD | #EEDDEE

 



#340034 | #750074 | #DD71BD | #F7D4E6 | #F7E4EE | #FEFFFF

 



#DCC8C7 | #BF9FAA | #B295CD | #773A5B | #C39B9C | #87707A

 



#DEBAD2 | #B875A5 | #703860 | #98867B | #FFBB47

 



#666666 | #330033 | #663366 | #996699 | #FFCC66

 



#929690 | #B4CD99 | #648040 | #90AE60 | #E1E2A3 | #E8E8E4 | #E19857

 



#948068 | #C0BB93 | #90A07B | #7E8C8D | #666962

 



#5C2810 | #CAB36F | #AFB06C | #DED791 | #C2A182

 



#888C71 | #44381E | #C3D5C7 | #565038 | #DCDDB1

 



#98B564 | #C7DDA0 | #C6CDB9 | #DDDDDD

 



#335533 | #668844 | #99BB66 | #DDEEBB | #888877

 



#497019 | #99C089 | #B3B590 | #E6F5BC | #D8E6AB | #A3AC59 | #FAE56E

 



#3C5787 | #477265 | #528C44 | #5CA622 | #67C100

 



#567500 | #759933 | #8DC42B | #B1CA25 | #CEF415 | #E6F33F

 



#89974A | #C3D73A | #BBC971 | #E1E9AD | #EBF2BE | #EBE06D | #C54836

 



#6FA9E1 | #679BE4 | #9CD821 | #EA7F2D

 



#C1DA84 | #8BB5B7 | #AAC9CB | #CADDDE | #7A7A7A | #C8C8C8 | #B6B6B6

 



#595B66 | #404251 | #D1D7FA | #555A74 | #2C2D38

 



#D2D0E8 | #F0EFF4 | #A9AFD1 | #525C91

 



#000000 | #313C42 | #6B797B | #EFC310 | #FFFFFF

 



#DEDACA | #C0B99A | #8D8870 | #5E5945 | #7799AA | #5B8092 | #335566 | #223344

 



#6A7276 | #B4BEC2 | #828A8C | #EAB646 | #FAD68A | #EEECE8

 



#F3E690 | #B2BDFF | #928F90 | #BBA095 | #FEFAE9

 



#D5BF90 | #8F968F | #FFCD50 | #8597A5 | #FEFED9 | #76763A

 



#C7A485 | #E2D2BD | #FFEFE3 | #FFCAB9

 



#4D435B | #683653 | #EED4E1 | #7A848D | #E2E7ED | #AFC3CE

 



#313531 | #CED8C6 | #59777D | #4A3139 | #B6AC8E | #848370 | #E7BFCB

 



#798488 | #92987C | #A59680 | #A58080 | #827988

 



#83815A | #CDC282 | #D1C5AF | #DEC0BE | #D87A94 | #57393B

 



#F7DFC7 | #E3AEA8 | #5C433F | #F9D0A2 | #DA826C | #F6AC6D

 



#CA091E | #F91A1D | #D80B29 | #FF5812 | #FFA723

 

* Schematy wybrane z bogatej galerii znajdującej się na stronie ColorSchemer.

15:36, marekkasperski
Link Komentarze (4) »
niedziela, 09 września 2007

Internet w wersji mobile staje się modny (choć wciąż nie wygodny).

W tamtym tygodniu pojawiła się na jego temat publikacja autorstwa Tomasza Karwatki pt. "Kurs Mobile Internet". Ja tymczasem postanowiłem trochę poszperać w Sieci w poszukiwaniu materiałów rozszerzających. Poniżej trochę z moich łowów.

Standardy W3C:

Projektowanie dla wersji mobile:

Projektowanie na iPhone:

Emulatory przeglądarek wersji mobile:

E-booki:

Smacznego.

20:48, marekkasperski
Link Komentarze (4) »
niedziela, 02 września 2007

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.

Mockup Screen: splash.

 

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).

Mockup Screen.

 

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.

 

Fragment makiety wykonanje w Mockup Screen.

Newton OS GUI.

Rysunek 3. Fragment makiety wykonanej w Mockup Screen (u góry) oraz graficzny interfejs Newton OS. Prawda, że podobne?

 

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.

 

Okno edycji makiety.

Rysunek 4. Okno edycji makiety. Widoczne gotowe biblioteki elementów GUI.

 

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.

Fragmenty makiet z Mockup.

 

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.

***

Wersja 30-dniowa programu: pobierz.

00:10, marekkasperski
Link Komentarze (3) »