Mockup Screen: prototypy w stylu Apple Newton

Oceń tę pracę

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.

image_pdf

WWW: wersja .mobi(le)

Oceń tę pracę

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:

  • Mobile Web Best Practices 1.0.
  • Mobile Web Initiative.
  • Mobile Web Best Practices Working Group.

Projektowanie dla wersji mobile:

  • Mobile Style Guides.
  • Global Authoring Practices for the Mobile Web.
  • Mobile Web Developer’s Guide.

Projektowanie na iPhone:

  • Optimizing Web Applications and Content for iPhone.
  • Fonts From Mac OS X Included With iPhone.

Emulatory przeglądarek wersji mobile:

  • Emulator Online.
  • Nokia Mobile Browser Simulator.
  • Openwave Phone Simulator.

E-booki:

  • Mobile Web 2.0 | pobierz darmowy rozdział (1,46MB).
  • Mobile Web Desing | pobierz darmowy rozdział (4,2MB).

Smacznego.

image_pdf

Off topic: Blog Day 2007

Oceń tę pracę

Sieć – czy raczej osoby wypełniające ją treścią – dotknął szał pt. Blog Day 2007, przypominający mi nieco to, co działo się w moim rodzinnym mieście w głębokich latach 80. w ramach obchodów Dnia Odlewnika (nie śmiać się proszę, pochodzę z zagłębia miedziowego, gdzie Dzień Odlewnika jest wypatrywany jak Barbórka w zagłębiu węglowym i z zaangażowaniem przypominającym oczekiwanie pierwszej gwiazdki na Boże Narodzenie).

Chodzi o to, by w ten „szczególny dzień” zamieścić na swoim blogu linki do 5 innych, które moglibyśmy polecić swoim Czytelnikom. „Rewelacja”. Jakby system Zakładek na blogach nie istniał. Ale…

Z tej okazji postanowiłem zamieścić 5 linków do innych blogów / systemów blogowych, posługując się trochę przewrotną logiką:

  1. Korzystam z Zakładek z linkami do innych miejsc w Sieci, w tym blogów, więc i jaki sens jest nagle udawać, że mam 5 dodatkowych, które zostawiłbym na taką specjalną okazję?
  2. Blogów też za wiele nie czytam. W ogóle to ja czytam raczej nudne rzeczy, w stylu Apple User Experience Guides czy Windows Vista User Experience Guidelines (Mariusz, to stąd miałem rozwiązanie multiple selection, które Ci się tak spodobało) i rzeczy związane z neuropsychologią (to już całkiem nudy). Ale ja lubię nudne rzeczy, to je czytam. I – przewrotnie – czytam te nudne rzeczy z zainteresowaniem.
  3. Za to po 3 m-cach prowadzenia bloga pojawiły się w Sieci miejsca, które odwołują do niego i je właśnie dzisiaj chciałbym wyróżnić.
***

10 przykazań – Po statystykach widać, że żyje (jakby kto pytał czy już umarł). Mowa o moich statystykach i widocznych przekierowaniach z 10. Miałem też przyjemność w tamtym tygodniu wisieć na pierwszym miejscu – czy raczej jedna z notek z mego bloga – w kategorii najpopularniejsze (do dziś zadaję sobie pytanie kto to czyta, że popularniejsze jest to od netto czy antyweba (a tak się zdarzyło tego tygodnia).

Blox.pl – Poleca mnie, to i ja polecam w ramach zasady wzajemności. Dzięki temu nawet syndykat już nie jest mi straszny :).

WebAudit Blog – Jeden z pierwszych blogów, które odnotowały mój blog; Robert – jeden z pierwszych blogerów, który odnotował mnie jako blogera (a mogłem zostać hutnikiem-odlewnikiem).

cam3l – Jeden z dwu blogów, który z okazji dzisiejszego dnia jednej okazji, odnotował, że UI Design żyje, ma się dobrze i wykazuje „psychologiczne podejście do projektowania”.

iZbieractwo.pl – Drugi z dwu blogów, który odnotował: „Zadziwia mnie ile się da wydobyć wiedzy z badań nad zachowaniem internautów”. Mnie też to zadziwia. A jak rozmawiam z ludźmi z branży to zadziwia mnie to, jak oni pytają zdziwieni, po co badać (a pytają, oj pytają) i dalej uparcie twierdzą, że menu po lewej jest ok., a po prawej fopa (chyba, że Nielsen zmieni zdanie).

Więcej blogów nie pamiętam. Amen.

image_pdf

„Skuteczne” banery: nie róbcie tego!

Oceń tę pracę

Dwa dni temu zdjąłem dwie reklamy z edycji na grono.net. Oto podstawa mojej decyzji.

***

Coraz częściej mam wrażenie, że niedobrze się dzieje w środowisku odpowiedzialnym za tworzenie kreacji i wyświetlanie reklamy internetowej (mowa tu przede wszystkim o polskim poletku, bo za miedzą już dawno zaorane). Słowa, które zdają się roznosić w biurach e-reklamy brzmią: „Jeszcze, jeszcze, jeszcze więcej… kliknięć” śpiewane na nutę Kalibra. Do tego wszystkiego dochodzą rady radców, co to uradzili, by sobie w życiu dobrze radzić.

Rysunek 1. „Skuteczne” banery AOL z 2001 roku, udające elementy HTML oraz systemu Windows.

„12 zasad skuteczniejszych bannerów” to rozdział z Czas na e-biznes, który zdaje się, że aktualnie jest lekturą obowiązkową wielu „kreatywnych” e-marketingowców. Napisany na bazie doświadczeń z AOL oraz własnych autora książki, głosi przesłanie:

„1. Bannery udające elementy HTML lub Windows osiągają większy CTR niż bannery standardowe, z pełną grafiką.” (wytłuszczenie moje).

No właśnie. Dalej jest jeszcze gorzej:

„9. [w kontekście tego co wyżej] Bannery powinny udawać elementy interaktywne. (…)

11. Jeśli używasz obszaru tekstowego (textarea), to możesz wykorzystać ciekawość klientów i interesujące zdanie ukryć tak, aby klient chciał przewinąć pole.” [Tamże, s. 333-335]

W związku z tym powstaje pytanie: CO dla KOGO jest miarą skuteczności? I drugie: czy skuteczność – w sensie: klikalność – sama dla siebie ma być wartością? A gdzie ludzie? – jak niedawno spytał się mnie w liście znajomy, przerażony komercjalizacją współczesnego designu.

Powodów by nie korzystać z „magicznych” sztuczek zwiększających skuteczność (czy jak się zaraz okaże – pseudoskuteczność banerów) jest kilka i można je rozważać na wielu płaszczyznach. Weźmy dwie:

  • Argument natury etycznej (nie tylko dla idealistów): web designer nie powinien wprowadzać użytkowników w błąd i budować swojego kapitału na mało doświadczonych userach, mylących elementy klasycznego interfejsu (jak: text field, text area, droplist, list box, checkbox, dropdown czy radio button) z graficznymi kopiami tychże elementów, występującymi w reklamie na banerach. Jak do tej pory nie ma kodeksu etycznego związanego z zawodem projektanta interfejsu czy specjalisty od użyteczności, aczkolwiek świadomy projektant powinien unikać technik godzących w dobro użytkownika. Tak się dzieje w przypadku każdego dojrzałego zawodu.
  • Argument natury pragmatycznej: klikalność klikalnością, ale nie tym się mierzy skuteczność reklamy. Reklama powinna A) zwiększyć sprzedaż danego produktu/usługi (jeśli reklamodawca ma coś na sprzedaż) i B) budować świadomość marki. Biorąc pod uwagę A i B, na ile reklama, która spowodowała kliknięcie w nią użytkownika wprowadzonego w błąd będzie skuteczna? Czy sprzeda cokolwiek zawiedzionemu użytkownikowi? Jaką świadomość marki będzie budowała? Jak zostanie oceniona?

    Z moich obserwacji i rozmów z użytkownikami wynika, że skuteczność banerów udających elementy [interfejsów] HTML i Windows jest odwrotnie proporcjonalna do współczynnika klikalności. Ci, którzy kliknęli czego innego oczekiwali i są zawiedzeni. W dodatku nierzadko bywa tak, że ponowne ich odwiedziny na reklamowanej stronie kończą się natychmiastową ucieczką. Świadomość oszukańczej marki została już zbudowana.

Skuteczne banery? Raczej nie.

image_pdf