Ward M. - The Smashing Book #2. Edycja polska

Spis treści Zasady projektowania grafiki doskonałej Znaczenie projektu. Różnice między dobrymi i złymi projektami. Projekty ponadczasowe. Minimalizm relacyjny. Kontrast, pustka, napięcie. Typografia. Język obrazu.

13

Widoczne kontra niewidoczne Dostrzeganie w projektach tego, co niewidoczne. Projektowanie zgodne z przebiegiem myśli użytkownika. Modele myślenia. Tłoczno czy przejrzyście? Wzory projektów i wskazówki dotyczące interfejsu.

47

Projektowanie z myślą o urządzeniach przenośnych Programy dedykowane kontra aplikacje internetowe. Projektowanie i sprzedawanie aplikacji. Właściwości oprogramowania na urządzenia przenośne. Zasady tworzenia dobrych programów. Interfejs użytkownika w aplikacjach na urządzenia przenośne. Wygląd aplikacji dla urządzeń przenośnych.

71

Szkice, szablony i prototypy Proces projektowania. Wizualizacja we wstępnym szkicu. Zapis stosowany w szkicach. Rozrysowywanie kadrów. Techniki i narzędzia. Szablony mało szczegółowe i bardzo szczegółowe. Prototypy. Testy i ostatnie poprawki. Znaki ostrzegawcze w projektowaniu aplikacji internetowych Projektowanie z myślą o dalszym rozwoju, nie na potrzeby chwili. Nie projektuj dla siebie. Dlaczego HTML i CSS schodzą na psy? Malowanie w HTML i zawiłości składni CSS. Problemy ze skryptami JavaScript i działaniem aplikacji po stronie serwera. Przyszłość typografii w sieci Rozwój typografii w internecie. Reguła @font-face. WOFF. Ruch na rzecz uwolnienia krojów pisma. Licencjonowanie fontów. Usługi związane z internetowymi krojami pisma. Palące problemy sieciowej typografii. Funkcje OpenType i zaawansowane zagadnienia typografii internetowej. Moduł fontów w CSS3. Nasi rozmówcy.

103

131

171

Reguły projektowania gier w planowaniu interakcji i użyteczności aplikacji Łączenie psychologii społecznej, teorii projektowania gier i ekonomii. Podglądacze. Ograniczony altruizm. Oczekiwana wzajemność. Wet za wet. Malejąca użyteczność. Mechanika gier — świat, gracze i zasady. Zwycięskie strategie dla użytkowników i przedsiębiorstw. Podręcznik projektanta i strategie projektowania. Techniki projektowania gier poparte przykładami z życia. Co sprawia, że klikają? Psychologia zachowań użytkowników i projektowania aplikacji internetowych Różne spojrzenia na zagadnienie projektowania. Znaczenie oddziaływań społecznych. Nieświadome podejmowanie decyzji. Weryfikacja społeczna. Efekt przyspieszenia u celu. Rozpraszanie sposobem zwracania uwagi. Zaspokorczanie. Wzorce myślowe. Obsługa błędów. Niezamierzona nieuwaga. Wzorce projektowe wykorzystywane na stronach e-commerce (studia przypadków) Układ. Architektura informacji. Nawigacja. Kolorystyka. Towary, dokonywanie zakupów i strony koszyka. Nazewnictwo stosowane na przyciskach i wzory projektów. Projektowanie stron pomocy i kontaktu. Bezpośrednie działania marketingowe.

219

253

273

Jak wydać książkę (taką jak ta)? Wydawać na własną rękę czy szukać wydawnictwa? Pisanie, redagowanie i przygotowywanie do druku. Ceny, działania marketingowe i kolportaż. Książki w wersji elektronicznej: PDF, EPUB, Mobipocket. Druk na życzenie.

317

Skorowidz

353

Przedmowa Tu nie ma czego ukrywać — książka Smashing Book 1 mogła być pozycją znacznie bardziej dopracowaną pod wieloma względami. Na szczególną naganę zasługują haniebnie długi czas oczekiwania na dostawę zakupionej książki oraz fatalna jakość jej szycia. Szczęśliwie wszyscy byli zgodni w kwestii jakości jej treści, którą uznaje się za wysoce dopracowaną. Opinie te sprawiły, Drogi Czytelniku, że jasne stało się dla nas, co jesteśmy Ci winni. Musieliśmy przygotować drugą edycję Smashing Book, która przy zachowaniu wysokiego poziomu merytorycznego nie byłaby dotknięta różnymi błędami. Chcieliśmy, aby książka Smashing Book 2 była lepsza od swojej poprzedniczki w każdym możliwym aspekcie. Miała zawierać jeszcze więcej interesujących Cię tematów, miała być grubsza. Co więcej, chcieliśmy sprzedawać ją w tej samej cenie co pierwszą część. I udało się nam. Rozdziały zdobią przepiękne ilustracje Yiying Lu, cieszącej się zasłużoną sławą, kreatywnej ilustratorki z Australii, która zasłynęła projektem Fail Whale wykonanym dla serwisu Twitter. Listę wszystkich materiałów wykorzystanych lub wspomnianych w książce znajdziesz na naszej stronie internetowej1.

„Smashing Book 2” — zaginione rozdziały Pierwotny zamysł zakładał zamieszczenie w  książce kilku dodatkowych rozdziałów:

• „The Ultimate Web Design Questionnaire and Checklist” autorstwa Kat Neville,

• „Plagues in Web Design and How to Deal With Them” autorstwa Speidera Schneidera,

• „Interview: Expert Tips From Renowned Designers” autorstwa Stevena Snella,

• „Web Design Community: Where Are We Going?” autorstwa Paula Scrivensa. Niestety, nie mogliśmy umieścić ich tutaj ze względu na ograniczenia rozmiaru książki związane ze składem. Dlatego postanowiliśmy opublikować te „zagi1 http://www.smashing-links.com.

nione rozdziały” w postaci bezpłatnego dodatku w formie elektronicznej, który będzie mógł pobrać każdy, kto dokona darmowej rejestracji w Smashing Shop2. Będziemy wdzięczni, jeśli podzielisz się z nami opinią na temat książki, publikując recenzję, dodając komentarz lub wysyłając wiadomość e-mail na adres [email protected]. Dziękujemy wszystkim Czytelnikom za zaufanie i wsparcie — nie potrafimy wyrazić, jak wiele one dla nas znaczą. Vitaly Friedman, Sven Lennartz i wszyscy członkowie The Smashing Family

2 http://shop.smashingmagazine.com. Materiały dodatkowe dostępne są w języku angielskim — przyp. red.

Tematy poruszane w  rozdziale: Znaczenie projektu. Różnice między dobrymi i  złymi projektami. Projekty ponadczasowe. Minimalizm relacyjny. Kontrast, pustka, napięcie. Typografia. Język obrazu.

N

ie warto poświęcać zbyt wiele uwagi obiegowym opiniom dotyczącym naszych projektów wykonywanych na potrzeby sieci. Należy trzymać się jednej prostej zasady, która uczy nas, że grafika internetowa i grafika użytkowa nie są synonimami. Obydwie formy łączą pewne podobieństwa, to oczywiste, obydwie mają wiele punktów wspólnych, ale nie wolno zapominać, że w rzeczywistości projektowanie na potrzeby internetu i projektowanie grafiki użytkowej to dwie oddzielne dziedziny sztuki, zatem każda z nich rządzi się własnymi prawami i każda musi być rozpatrywana niezależnie od zasad regulujących tę drugą. Najczęściej stosowany podział został przedstawiony na blogu Nicka Haasa3, który opisał pracę projektanta grafiki następująco: To przede wszystkim zdolność skutecznego przekazywania myśli zarówno na żywo, jak i w internecie, lecz także świadomość, jak bardzo różnią się stosowane w nich środki wyrazu. Należy zawsze pamiętać, że grafika użytkowa i grafika internetowa są zagadnieniami autonomicznymi i żadną miarą nie są sobie równe. Gdy zrozumiesz różnice dzielące pracę grafika użytkowego od pracy grafika internetowego, następny projekt, nad którym będziesz pracować, tylko na tym zyska. Haas oczywiście ma rację, sugerując istnienie różnic między charakterem projektów wykorzystujących jakże odmienne środki przekazu (polecamy zresztą cały artykuł, w  którym znajdziesz mnóstwo interesujących uwag), lecz tak drastyczny podział, jaki wynika z całej wypowiedzi autora, może być nadmiernym uproszczeniem. Nie można przecież zaprzeczyć, że idee stosowania grafiki w internecie wywodzą się ze znacznie starszych reguł grafiki użytkowej. Pojęcia takie jak przestrzeń negatywna, kontrast, teoria barw czy idea siatki mają swoje korzenie w teorii druku, a przecież zdołały przeniknąć do sfery projektów internetowych, zacierając tym samym granicę pomiędzy drukiem a ekranem. W tym rozdziale przyjrzymy się kluczowym ideom grafiki użytkowej i postaramy się wskazać ich powiązania ze współczesnymi projektami wykonywanymi na potrzeby internetu. Omówimy także szeroką gamę pojęć oraz narzędzi powiązanych z samym zagadnieniem tworzenia projektu, postaramy się też wskazać subtelną różnicę pomiędzy po prostu dobrym projektem a czymś naprawdę wyjątkowym. 3 N. Hass, Graphic Design vs. Web Design: Separate and Not Equal, 22 czerwca 2010 r., http://www.orbitmedia.com/blog/graphic-design-vs-web-design-separate-and-not-equal. 14

Zasady projektowania grafiki doskonałej

Grafika użytkowa — co to jest? Aby móc w ogóle mówić o roli grafiki użytkowej w świecie projektów internetowych, musimy przede wszystkim zrozumieć, czym dokładnie jest grafika użytkowa. Dopiero dysponując definicją tego pojęcia, będziemy mogli przystąpić do omawiania interesującego nas tematu. Czym zatem jest grafika użytkowa? Naturę tego problemu ujęła bardzo dobrze Katherine McCoy, zadając pytanie: „Czy grafika użytkowa jest bardziej sztuką, nauką, polem prowadzenia interesów, rzemiosłem, czy może językiem?”. Nie udzieliła wprawdzie jasnej odpowiedzi, ale pięknie umiejscowiła pojęcie grafiki użytkowej w kontekście jego powstania. Grafika użytkowa powstała spontanicznie w reakcji na potrzebę stworzenia nowego środka porozumiewania się w dobie rewolucji przemysłowej. Tylko dzięki niej możliwe stało się oferowanie wytworów produkcji taśmowej rosnącej rzeszy konsumentów4. Taka perspektywa pozwala dostrzec w grafice użytkowej dzieło powstałe na potrzeby reklamy. Tak ogólne stwierdzenie nie spełnia w najmniejszym stopniu podstawowych założeń definicji, ale podkreśla to, co może być uznane za istotę każdego projektu użytkowego — komunikatywność. Grafika użytkowa, niezależnie od swojej postaci, jest przede wszystkim próbą przekazania komunikatu za pomocą obrazu. Cel ten realizuje, posługując się szeregiem narzędzi — typografią, ilustracją, kształtem bądź kolorem — ale zawsze dąży do skutecznego (a czasami też natychmiastowego) przedstawienia odbiorcy określonej treści. Logiczne jest zatem, że projektowanie wymaga podejmowania konkretnych i dobrze przemyślanych decyzji, dzięki którym grafik może przekazać określony komunikat. Stwierdzenie to odnosi się w takim samym stopniu zarówno do projektowania z myślą o publikacji w internecie, jak i do projektów graficznych przygotowywanych do druku. Kładziemy w tych rozważaniach ogromny nacisk na zagadnienia związane z grafiką, ponieważ ten obszar prac projektowych interesuje nas najbardziej. Mamy jednocześnie świadomość, że przekaz wizualny nie wyczerpuje wcale tematu projektowania na potrzeby internetu, w którego przypadku należałoby uwzględnić kwestie związane z  interfejsem użytkownika (UI5) czy komfortem pracy użytkownika (UX6). Oczywiście wszystkie te aspekty pracy nad projektem są ze sobą powiązane, lecz należy pamiętać, że odgrywają w projekcie różne role i zasadniczo są od siebie niezależne. UI i  UX to raczej pochodne projektowania danego systemu związane przede wszystkim z zagadnieniami użyteczności projektu oraz jego odbiorem przez użytkow4 K. McCoy, American Graphic Design Expression: The Evolution of American Typography, „Graphic Design History”, Allworth Press, New York 2001, s. 3 – 11. 5 Od angielskiego wyrażenia user interface — przyp. tłum. 6 Od angielskiego wyrażenia user experience — przyp. tłum. Zasady projektowania grafiki doskonałej

15

ników. Czy użytkownik zdoła poznać system? Czy będzie w  stanie poruszać się po nim? Czy szybko i z łatwością wykona powierzone mu zadania? Czy praca z systemem będzie komfortowa? Wszystkie te pytania odnoszą się raczej do aspektów związanych z projektowaniem UI i UX niż tworzeniem grafiki jako takiej. Grafika użytkowa z pewnością wiąże się częściowo z tymi dziedzinami, wnosi też wiele do zbioru obowiązujących w nich reguł (postaramy się omówić te zagadnienia poniżej), jednak żeby w pełni zrozumieć jej wpływ na zasady projektowania internetowego, będziemy musieli traktować ją — wizualny nośnik treści — jako niezależny byt. Więcej, będziemy musieli poznać jej bogatą, porywającą historię. Tylko to pozwoli nam pojąć subtelniejsze aspekty tego tematu.

Język projektu Projekt to nie tylko linie, kształty i obrazy rozmieszczone na stronie. Projekt przemawia do nas bogatym językiem obrazu. Krótka lekcja historii pomoże nam odkryć, kto przyczynił się do rozwoju mowy symboli w postaci, jaką znamy dziś, kto nadał jej głębię. Wiedza na temat zasad projektowania oraz sposoby ich stosowania zmieniały się na przestrzeni lat, a co za tym idzie, zmieniał się także język obrazu opisywany za ich pomocą. Dziś język ten ma solidne podwaliny, jest mocno osadzony w sprawdzonych, wielokrotnie zmienianych teoriach będących dziełem najświatlejszych umysłów tej dziedziny. Im lepiej poznasz ten język, tym łatwiej będzie Ci oceniać poszczególne projekty w kategoriach znanych Ci teorii, nauczysz się też instynktownie rozpoznawać, które z elementów projektu powinny w nim pozostać, a które należy bezwzględnie usunąć. Instynkt ten będzie się w Tobie rozwijać z czasem, rosnąc wraz z liczbą obejrzanych i wykonanych przez Ciebie prac oraz z Twoim zrozumieniem samej mowy obrazu. Historia grafiki użytkowej zawiera niczym literatura piękna prace uznawane dziś za klasykę, z których można się wiele nauczyć, które warto poznawać i podziwiać.

Rozwój teorii siatki doprowadził do powstania trzech różnych form wyrazu grafiki użytkowej. Pierwszy model jest zgodny z założeniami kanonu Van de Graafa, drugi to zwykła siatka modułowa, trzeci jest eksperymentem utworzonym na bazie wykreślonej konstrukcji geometrycznej

16

Zasady projektowania grafiki doskonałej

Zatrzymajmy się na chwilę nad koncepcją siatki. Poświęcono jej wiele opracowań, próby zrozumienia tej idei pochłonęły niezliczone ilości energii, a wszystko po to, by uświadomić sobie jej rolę w teorii projektowania. Siatka pozwala nadać kształt dziełom tak zwięzłym jak wiersz i tak obszernym jak opera. Mimo to nadal co krok spotyka się projekty o stopniu skomplikowania dowcipów o blondynkach, z grafiką i tekstem ułożonymi w sposób, który „wygląda fajnie”. Jeśli nauczymy się korzystać z dorobku historii, zdołamy uniknąć kiepskich żartów.

Znaczenie historii i teorii Poznawanie projektów graficznych jest równoznaczne z odczytywaniem różnych wariacji języka obrazu. Z każdą kolejną chwilą stajemy się bardziej świadomi porządku, jaki zaprowadza w treści właściwie dobrane słownictwo — efekt prac nad teorią i filozofią projektowania. Projektant, czy tego chce, czy nie, jest „dziedzicem wybitnej spuścizny”7, co sprawia, że pozostaje pod wpływem każdej teorii zrodzonej na przestrzeni dziejów i każdego wytworzonego znaku. Najwięksi fachowcy w  naszym zawodzie tworzą własne teorie i  filozofię wyrażania myśli za pomocą obrazu. Spuścizna po nich, czy to ustna, czy pozostawiona w formie pisanej, jest dla nas wykładnią i informacją, jak wybitni w swoim fachu ludzie oceniali własną pracę. Jeżeli zastanowimy się nieco nad wymową prac wybranego projektanta, porównamy je z osiągnięciami mu współczesnych i ocenimy wpływy z innych źródeł, to szybko odkryjemy wyraźny schemat działania. Przykładem może być jeden z wizjonerów grafiki użytkowej, człowiek obdarzony nieprzeciętnym umysłem, Paul Rand. Nawet pobieżna lektura jego prac zdradza natychmiast fascynację teoriami László Moholy-Nagyego. Jedna uwaga Moholy-Nagyego pchnęła Randa do „pochłaniania książek i traktatów poświęconych estetyce. Czerpiąc inspirację z  The New Vision Moholy-Nagyego i  Art As Experience Johna Deweya, Rand zdołał rozwinąć własne idee”8. Prosta mapa powiązań definiuje kontekst prac Randa, a jednocześnie pokazuje, w jaki sposób, wychodząc z określonego punktu, można znaleźć tropy powiązań historycznych i filozoficznych pomiędzy poszczególnymi ideami. Tego rodzaju ćwiczenie pomoże nam określić, które projekty są warte uwagi i którzy twórcy są godni naśladowania. Określane oraz nowo definiowane w ten sposób więzi stają się motorem naszego rozwoju. Oznacza to, że powinniśmy czerpać nie tylko z oryginalnych prac Randa, ale także odwołać się do The New Vision Moholy-Nagyego oraz Art As Experience. A skoro teksty te wywarły ogromny wpływ na tak wytrawnego projektanta, jakim był Paul Rand, nie można ujmować im wagi ani tym bardziej ignorować ich. 7 P.B. Meggs, Megg’s History of Graphic Design, John Wiley & Sons 2006, s. IX. 8 S. Heller, Paul Rand, Phaidon Press 2008, s. 77. Zasady projektowania grafiki doskonałej

17

Prosta mapa powiązań definiuje kontekst prac Randa, a jednocześnie pokazuje, w jaki sposób, wychodząc z określonego punktu, można znaleźć tropy powiązań historycznych i filozoficznych pomiędzy poszczególnymi ideami

My, odbiorcy tak hojnego daru, nie możemy odcinać się od jego korzeni, nie mamy prawa twierdzić, że pozostaje on bez wpływu na nasz sposób myślenia i sposób postrzegania wydarzeń. Jakże moglibyśmy marzyć o posługiwaniu się językiem bez próby podjęcia dialogu z osobą najbardziej z nim obytą. Przecież skoro „grafika użytkowa to manipulowanie formą i treścią”9, to oglądanie prac lub czytanie traktatów na temat zasad projektowania — bez względu na czas ich powstania — oznacza próbę określenia stopnia zmian języka obrazu w zależności od potrzeb. Dlatego właśnie studiujemy prace wielkich mistrzów i staramy się przejrzeć ich myśli. Jednak działania te muszą wykraczać poza zwykłe naśladownictwo stosowanych przez nich krojów pisma, wykorzystywanych obrazów albo kształtów. Musimy postarać się dotrzeć do źródła — zrozumieć i ocenić składowe danej przestrzeni oraz łączące je zależności. Musimy stworzyć obrazową gramatykę, która pozwoli nam przekazywać historie w różnych formach, musimy na podstawie pomysłów mistrzów tworzyć własne. Studia nad historią grafiki użytkowej oraz teoriami opisującymi zasady jej funkcjonowania to przede wszystkim poznawanie koncepcji wprowadzanych przez wielkich tej sztuki. Musimy nauczyć się cenić te dary — przemyślenia zawarte w książkach Josefa Müllera-Brockmanna (poświęcone teorii siatki), Jana Tschicholda (dotyczące teorii kompozycji) czy Wolfganga Weingarta (z  zakresu typografii). 9 M. Kroeger, Paul Rand: Conversations with Students, Princeton Architectual Press 2008, s. 42. 18

Zasady projektowania grafiki doskonałej

Dzięki nim nauczymy się nie tylko doceniać piękno projektu, lecz także rozumieć, dlaczego jego odbiorcy uznają go za tak atrakcyjny. Dobry projektant zna historię swojego obszaru zainteresowań na wyrywki. Wielcy projektanci rozumieli, dlaczego podwaliny grafiki użytkowej są aż tak istotne. W dalszej części rozdziału znajdziesz rozważania poświęcone zagadnieniom ponadczasowości, minimalizmu, metaforyki, typografii oraz głosu. Omówimy także ich wpływ na rozwój sztuki projektowania grafiki użytkowej.

Myśleć ponadczasowo Każda próba ocenienia ponadczasowości projektu musi wiązać go z pojęciami smaku, zasobów informacji, jakie niesie, oraz jakości. Gdy uda się nam osiągnąć ten efekt, będziemy mogli estymować, jak projekt lub jego części będą postrzegane za dziesięć, dwadzieścia albo pięćdziesiąt lat. Te fragmenty projektu, które są odbiciem chwilowych mód, nie przetrwają próby czasu, natomiast te, które odwołują się do podstawowych praw, nie utracą wyrazistości przekazu. Takie ćwiczenie zmusza projektanta do zastanowienia się nad następującym problemem — czy wybrane rozwiązanie zostało przygotowane z myślą o prezentowaniu konkretnej treści, czy raczej jest tak ogólne, że będzie nadawać się do wykorzystania w dowolnym projekcie. Im częściej będziemy prowadzić rozważania tego typu, tym lepiej opanujemy zdolność odróżniania wartościowych i ponadczasowych projektów od prac, które z czasem stracą swój urok. Ponadczasowa grafika nie osiąga efektów za pomocą tanich sztuczek, woli bazować na przedstawianiu dobrych pomysłów.

Projekt jednego dnia kontra projekt ponadczasowy Aby zrozumieć ideę grafiki ponadczasowej, zastanów się przez chwilę nad jej przeciwieństwem — projektem wykonanym na potrzebę chwili, skupiającym się na panujących trendach i stylach, odwołującym się do wybranej grupy odbiorców lub wykorzystującym dominujący nastrój. Zazwyczaj to, co decyduje o przebojowości takiego projektu, staje się przyczyną jego ostatecznej klęski. Tak przygotowana grafika przemawia do określonej grupy w określonych czasach, w sposób naturalny omijając wszystkich, którzy wymykają się sztywno zdefiniowanym historycznym i kulturowym ramom. W projektach jednego dnia treść często ginie pod natłokiem chwytliwych rozwiązań, tracąc przez to należne jej w hierarchii projektu miejsce. Staje się zatem jedynie rekwizytem estetycznym odartym z funkcji narzędzia komunikacyjnego, przez co nie jest w stanie przetrwać zmian zachodzących w zasadach estetyki. Oczywiście dostosowanie do potrzeb chwili nie zawsze musi być przeszkodą — projekty jednego dnia mają swoje miejsce na rynku. Jeżeli grafika zrodzi się z kon-

Zasady projektowania grafiki doskonałej

19

kretnej idei i będzie korzystać ze sprawdzonych zasad projektowania, to nawet zastosowanie środków przekazu właściwych danym czasom nie postarzy później projektu. Zachowanie równowagi i staranne planowanie sprawią, że taki projekt dziś będzie wyjątkowo komunikatywny, ale po latach nadal zdoła pełnić swoją funkcję. Z kolei jeżeli planujemy przekazywać pewne idee szerszej publiczności, nie zważając przy tym na upływ czasu, musimy opracować projekt, który sam z siebie zdoła oprzeć się jego próbie. W takich przypadkach myślenie ponadczasowe jest po prostu nieodzowne; projektant musi świadomie posługiwać się wszystkimi środkami wyrazu. To oznacza, że każdy kolor, rozmiar poszczególnych elementów bądź ich położenie w  projekcie muszą mieć znane grafikowi uzasadnienie. Tylko w  ten sposób można wytworzyć projekt, który będzie odpowiadać potrzebom klienta, wymogom historii, opinii odbiorców i będzie jasno przekazywać konkretne idee. Przyjęcie takich założeń sprawia dodatkowo, że grafik staje się najsurowszym krytykiem własnej pracy, co w wielu przypadkach jest argumentem przeważającym szalę decyzji.

Dążenie do ponadczasowości Najprostsza zasada projektowania ponadczasowego to skromność. Im mniej elementów pojawi się w przekazie, tym większe szanse, że zdołasz uniknąć przypadkowego posługiwania się narzędziami będącymi wytworem chwilowej mody. Poza tym możemy udzielić Ci kilku rad, które pozwolą Twoim pracom oprzeć się upływowi czasu — znajdziesz je poniżej. N i e C h T R e ś ć S Ta N i e S i ę R o Z W i ą Z a N i e M

Jeśli uda Ci się osiągnąć ten cel, staniesz się mistrzem komunikacji. Za każdym problemem kryje się pewna idea, cała sztuka w projektowaniu polega na tym, by znaleźć w nim także coś wyjątkowego i ciekawego, co warto podkreślić i wynieść na pierwszy plan. Słynny plakat IBM autorstwa Paula Randa jest doskonałym przykładem zastosowania tej zasady. Grafik posłużył się symbolami oka, pszczoły i znanego wszystkim „M” z logo firmy, by utworzyć kalambur składający się na jej nazwę10. Bob Gill również opanował tę technikę w stopniu mistrzowskim. Na projekcie okładki regulaminu jednej z wypożyczalni samochodowych umieścił samotny, ledwie widoczny napis „We hate small print”11. Gill jest też twórcą jednej z najciekawszych opinii dotyczących projektowania: jeśli nie znajdujesz jednoznacznego i ciekawego rozwiązania problemu, postaraj się przedefiniować go tak, by móc je znaleźć12. 10 Nieprzetłumaczalna gra słów. Wyrazy eye (oko) i bee (pszczoła) brzmią identycznie jak odczytywane po angielsku dwie pierwsze litery w nazwie IBM (wym. aj-bi-em) — przyp. tłum. 11 Nie lubimy małego druku — przyp. tłum. 12 B. Gill, Forget All the Rules About Graphic Design, Watson-Guptil Publications 1985. 20

Zasady projektowania grafiki doskonałej

Przyjrzyj się przykładowi strony internetowej ze zdjęciami pary Melanie+Justin13. Każde zdjęcie najlepiej opowiada swoją historię, więc nie potrzebuje żadnego wsparcia ze strony projektu witryny, zatem autorzy serwisu zdecydowali się na najprostsze rozwiązanie.

Cały projekt graficzny witryny to nazwa, proste menu oraz zawartość (czyli zdjęcia). Urozmaiceniem jest tylko starannie dobrany krój pisma w etykietach pojawiających się na zdjęciach, gdy znajdzie się nad nimi kursor myszy. Wprawdzie delikatna stylistyka nawiązuje do modnego dziś trendu, lecz sama idea projektu jest ponadczasowa. N i e C h Z W yC i ę ż y P R o S ToTa

Podstawowe idee takie jak kształt, kolor, światło, ilustracje lub typografia zawsze będą budulcem każdego projektu. Nawet szybkie spojrzenie na karty historii projektowania pozwoli nam upewnić się, że to właśnie one najdłużej zachowują świeżość. Istnieje logiczne wyjaśnienie tego faktu. Wspomniane elementy prowadzą odbiorcę przez cały projekt, tworzą równowagę i  rozkładają ciężar przekazu. „Odczytywanie ich” w kontekście całości projektu przychodzi nam niezwykle łatwo, ale pamiętajmy też, że elementy te są wystarczająco chłonne, by przyjąć każdą wartość i każde znaczenie, jakie projektant zdecyduje się im nadać. Jeżeli odwołamy się do podstaw — siatki, geometrii, reguł trójpodziału i  złotego podziału, równowagi, kontrastu albo zestawienia — okaże się, że każdy ze wspomnianych wcześniej elementów budujących projekt można wkomponować w całość na nieskończenie wiele sposobów. U N i k a J o Z D o B N i kó W

Ozdobniki to wszystkie elementy projektu, które pojawiają się w nim wyłącznie po to, by uatrakcyjnić go w  oczach odbiorcy komunikatu. Ozdobnikiem jest zatem 13 http://melanieandjustin.ca. Zasady projektowania grafiki doskonałej

21

zbędne podkreślenie nagłówka, ponowne wyróżnienie pogrubionego fontu poprzez sformatowanie go kursywą, umieszczenie obramowania wokół strony, stosowanie wypełnienia gradientowego w celach innych niż poprowadzenie wzroku odbiorcy we wskazanym kierunku, większość przypadków umieszczania w projektach cieniowania, wszelkie obrazy, które nie przenoszą konkretnej treści i z pewnością czwarty czy piąty krój pisma mający „ożywić nieco” projekt. Moda na umieszczanie rozbudowanej grafiki w nagłówku strony jest doskonałym przykładem ozdobnika. W projekcie szaty graficznej serwisów typu Underworld Magazines14 znajdziemy połączenie klasycznego układu gazetowego z intensywnym zdobnictwem w obszarze nagłówka:

Grafika nagłówka ma jedynie przyciągać wzrok odwiedzającego. Można podejrzewać, że pozostaje ona w związku z niektórymi wpisami na stronie (poświęconymi produktom Apple, Adobe, portalom społecznościowym itp.), lecz przede wszystkim jest czasową formą uatrakcyjnienia wyglądu serwisu, niezwiązaną mocniej z  ogólnym projektem strony. Jeżeli jakiś element projektu nie służy wzmocnieniu ogólnego przekazu, należy uznać, że jest on zbędny i zapewne to on uniemożliwi całości przetrwanie próby czasu. „ Z a S ko C Z M N i e ! ”

Według Paula Ardena to najlepsza rada, jakiej może udzielić młodemu projektantowi kierownik artystyczny projektu. Proste i przekonujące słowa sprawią, że projektant skupi się na wywołaniu zaskoczenia u odbiorcy (przełożonego, klienta, współpracowników lub wręcz u siebie samego). Dzięki temu praca stanie się odporna na upływ czasu. Zaskoczenie nie wiąże się z wywoływaniem nadmiernego zamieszania wokół 14 http://www.underwoldmagazines.com (strona w dawnej postaci — przyp. tłum.). 22

Zasady projektowania grafiki doskonałej

projektu czy nagłaśniania go. Chodzi o wykreowanie czegoś, co zostanie zapamiętane ze względu na własną, immanentną wartość15. Przykłady można mnożyć w nieskończoność — pomarańczowe paski na okładkach klasycznych wydań Penguin Books, plakat filmu The Man With the Golden Arm, okładka magazynu Esquire przedstawiająca Muhammada Alego albo jeden z najnowszych projektów, The Pixel Blog16, na którym piękny rysunek stanowi integralną część układu strony głównej serwisu.

Te oraz inne prace doskonale ukazują, w jaki sposób wygląda projekt zrodzony z doskonałego pomysłu, i dowodzą przy tym, że ich jakość będzie sama bronić się przez lata. Oczywiście żaden z ponadczasowych projektów graficznych nie powstał wyłącznie po to, by budzić zachwyty przez lata po tym, jak zaschnie tusz na plakacie bądź przebrzmi kliknięcie wysyłające stronę na serwer. Odporność na upływ czasu wiąże się nierozerwalnie z ich podstawową funkcją — przekazywaniem pewnych idei w jasny i przemyślany sposób. Poniekąd jest pochodną niezwykłej wizji. Można nawet pokusić się o ujęcie tematu w prostym zdaniu — dobry projektant tworzy rozwiązania na potrzebę chwili, dzieła wielkiego projektanta przetrwają znacznie dłużej. Dobry projektant łączy umiejętnie popularne motywy, starając się umieścić ich tyle, by zadowolić klienta. Jednak choć w danej chwili projekt wydaje się dobry, po pewnym czasie straci na jakości. Jeżeli nie kryje się za nim doskonały pomysł, projekt jest z góry skazany na zapomnienie. W tym momencie pojawia się pytanie o etykę zawodową. Skoro poświęcamy całe lata na zgłębianie tajników naszego zawodu, dlaczego mielibyśmy godzić się na półśrodki chwilowych rozwiązań? Dlaczego oferować klientom coś, co nie jest prawdziwym projektem, coś, co z czasem straci wartość? Jeśli chcemy określać siebie mianem 15 P. Arden, Whatever You Think, Think the Opposite, Penguin Books 2006, s. 130. 16 http://www.thepixel.com/blog. Zasady projektowania grafiki doskonałej

23

zawodowców, nie wolno nam schodzić poniżej pewnego standardu, nie wolno nam tworzyć projektów nieprzemyślanych, pozbawionych polotu, mało interesujących czy takich, które po kilku latach staną się nieczytelne.

Względny minimalizm Minimalizm to nie jakiś tam styl z połowy lat dwudziestych XX w., z którego możemy czerpać do dziś. Minimalizm w żadnym razie nie jest „retro”. W zasadzie należałoby pojmować go w kategoriach filozofii umożliwiającej zrozumienie zasad projektowania i tworzenia dobrych prac. Postaramy się wyjaśnić to na przykładzie. Załóżmy, że każdy z elementów projektu miałby wartość 10 dolarów. Gdyby umieścić na stronie dziesięć elementów, osiągnęłaby ona wartość 100 dolarów17. Ludzie zakładają błędnie, że jeśli usuną ze strony pięć z dziesięciu elementów, wartość pozostałych wzrośnie do 20 dolarów za każdy (co znaczyłoby, że usunięcie połowy elementów ze strony podwoi wartość pozostałych). Pomysł ten zrodził się z hasła „mniej znaczy więcej”. Prawda zaś jest taka, że każdy z pozostałych elementów będzie nadal wart 10 dolarów. Minimalizm to nie „styl” i nie polega na usuwaniu zbędnych fragmentów projektu; tu od początku zakłada się wykorzystanie ograniczonej ich liczby. Co więcej, nie oznacza to automatycznego zwiększenia wartości każdego z  elementów, tylko wzmocnienie jego wymowy. Zatem — tak, ograniczenie liczby elementów na stronie może prowadzić do zwiększenia wydźwięku całości i ułatwić odbiór, lecz na ten efekt trzeba zapracować. Obowiązek ten spada na projektanta, który musi wymyślić odpowiednio chwytliwą ideę projektu. Oznacza to, że wszystkie obrazy, jakie pojawiają się na stronie projektu, służą nie wypełnieniu pustej przestrzeni, lecz raczej mają pobudzać zmysły, stymulować wyobraźnię, a przede wszystkim prowadzić do z góry założonych wniosków. Stąd natomiast wynika, że użycie odpowiednich krojów pisma „po prostu nie wystarczy”, choć oczywiście dobrze dobrane fonty pozwalają podkreślić główną ideę projektu, ożywiają nieco pracę i przyciągają uwagę odbiorcy. Gdyby zsumować wartości elementów prawdziwie minimalistycznego projektu, wynik nie odpowiadałby wartości całej pracy. Należy pamiętać, że największą wartość w takim przypadku mają związki zachodzące pomiędzy poszczególnymi fragmentami pracy, ale hołdowanie tej zasadzie wymaga znajomości teorii i reguł projektowania. Nie obejdzie się także bez sporej dawki samodyscypliny i głębokiej wiary w możliwości takiej metody przekazywania treści. 17 Pojęcie „wartości elementu” zostało wprowadzone przez Marian Bantjes i odnosiło się do tematyki związanej z typografią. Pojawiło się po raz pierwszy w książce The Essential Principles of Graphic Design autorstwa Debbie Millman wydanej przez F+W Publications w 2008 r., s. 10. 24

Zasady projektowania grafiki doskonałej

Budowanie zależności Cała nasza sztuka polega na określeniu zależności. Cała. Projektowanie to zależności. Projektowanie to zależności łączące treść z formą… Masz okrągłe okulary. Twój kołnierzyk jest ukośny. To zależności. Twoje usta układają się w owal. Twój nos jest w przybliżeniu trójkątny — to właśnie projektowanie. Paul Rand18

Zależności pojawiają się pomiędzy każdymi dwoma elementami umieszczonymi w dowolnej przestrzeni — obrazem i jego podpisem, nagłówkiem i treścią, banerem a krawędzią strony. Im mniej elementów pojawi się w danej przestrzeni, tym bardziej na pierwszy plan wysuną się zależności pomiędzy nimi. Wszystkie więzi muszą być starannie zaplanowane, muszą pozostawać w temacie projektu i zaciekawiać. Należy natomiast wystrzegać się wszelkich ozdobników i elementów zbędnych, które zakłócą wizję zależności. Siła przekazu kryje się zarówno w zależnościach pojawiających się pomiędzy poszczególnymi częściami projektu, jak i we wkładzie każdego elementu w całość pracy. Zła decyzja dotycząca którejkolwiek z części projektu sprawi, że pozostałe — same w sobie w pełni wartościowe — zdecydowanie stracą. Z kolei jeden trafny pomysł zdoła zwiększyć wartość mniej istotnych fragmentów pracy. Zależności pomiędzy elementami projektu powstają na wielu różnych płaszczyznach. Niektóre dotyczą fizycznych właściwości strony, inne należy rozważać w kategoriach filozofii czy kultury. Trzeba zawsze przemyśleć starannie wszelkie abstrakcyjne powiązania między formą a treścią, formą a kanwą lub kanwą a odbiorcą. Uważamy, że trzy z nich zasługują na szczególną uwagę, ponieważ pozwalają budować więź pomiędzy formą a treścią. To kontrast, przestrzeń i napięcie.

kontrast Kontrast stał się podstawą stworzenia niejednego nieszablonowego projektu graficznego. Odpowiednio dobrany z  łatwością prowadzi wzrok odbiorcy w  wybrane punkty pracy bądź podkreśla wagę niektórych jej elementów. Można bez wahania stwierdzić, że kontrast ma niezliczone zastosowania w projektach graficznych. Gdy na stronie pojawia się tylko kilka elementów, dobry dobór kontrastu może zaważyć na ogólnym wydźwięku pracy. Najprostszą formą pracy z kontrastem jest stosowanie jasnych i ciemnych barw. Czarny tekst na białym tle to pierwszy nasuwający się przykład, ale kontrast może pojawiać się między rozmiarem użytych fontów (małe i  duże), ich kształtem (szeryfowe i bezszeryfowe) czy wykorzystaniem koloru w nagłówkach a czernią i bielą 18 M. Kroeger, Paul Rand: Conversations with Students, Princeton Architectural Press 2008, s. 29 – 30. Zasady projektowania grafiki doskonałej

25

w tekście strony. Przykładem umiejętnego operowania kontrastem może być strona Jona Brousseau19:

Imponujący nagłówek wypisany czcionką o  masywnych szeryfach kontrastuje wyraźnie ze znacznie mniejszym, bezszeryfowym krojem pisma użytym w  tekście. Zbudowana w ten sposób zależność jest bardzo wyraźna. Kontrast w tekście nie jest jedynym, jakim możemy się posługiwać. Może pojawiać się on pomiędzy dowolnymi elementami kompozycji, a  bardzo często wykorzystuje się go do zwiększenia ich wartości i  atrakcyjności wizualnej. Oto kilka przykładów kontrastujących ze sobą rozwiązań:

• • • • • • • • • • •

ułożenie w pionie i poziomie, kształty kwadratowe i okrągłe, gładkie i chropowate, zamknięte i otwarte20, stare i nowe, znane i nieznane21, linie ciągłe i przerywane, porządne i nieporządne, barwne pola i kontury, rysunek odręczny i fotografia, uporządkowane i chaotyczne.

19 http://www.jonbrousseau.com. 20 Pierwsze przykłady pochodzą z Die neue Typographie Jana Tschicholda. Książka ta dostępna jest także w przekładzie angielskim: The New Typography, tłum. R. McLean, University of California Press 2006. 21 H. Steiner, „Thoughts on Paul Rand”, Essays on Design, Booth-Clibborn Editions 1997, s. 45 – 50. 26

Zasady projektowania grafiki doskonałej

Jeżeli szukasz przykładu kontrastów w minimalistycznym projekcie strony internetowej, odwiedź portfolio Adhama Dannawaya22. Na jednej stronie pojawia się kilka rodzajów kontrastów.

Znajdziesz tu zderzenie rysunku z fotografią, myślenia abstrakcyjnego z bardzo konkretnym, zestawienie intensywnych barw z (niemalże) szarym zdjęciem, a nawet porządek i chaos. Najważniejsze jednak, że wszystkie powiązania na zasadzie kontrastu służą konkretnemu celowi. Podkreślają dwie dziedziny zainteresowania Dannawaya — projektowanie i programowanie. Zastosowanie kontrastu było doskonałym wyborem. Dzięki temu autor projektu zdołał przekazać pewną ideę znacznie szybciej i skuteczniej, niż gdyby zrobił to słowami. W wyniku tego można było ograniczyć liczbę elementów projektu, co pozwoliło uzyskać ciekawy efekt minimalizmu.

Przestrzeń Przyjęło się mówić, że litera danego kroju jest nie tyle narysowana, ile wyciosana w przestrzeni negatywnej wokół niej. To założenie sprawdza się w przypadku większości form projektowych. Przestrzeń negatywna jest tak samo ważnym elementem projektu jak wszystko, co zostaje w niej umieszczone. Niewidzialna z definicji, może być wykorzystywana dzięki temu do osiągania spektakularnych efektów bez nadmiernego zwracania uwagi odbiorcy, co czyni ją doskonałym narzędziem do tworzenia projektów minimalistycznych. Przestrzeń pomaga tworzyć równowagę, definiuje skalę, a  nawet buduje napięcie — czy to odstępem cienkim niczym włos, czy to przerwą o rozmiarach kanionu. Z każdym umieszczanym w projekcie symbolem zmienia się także kształt przestrzeni negatywnej oraz — konsekwentnie — ścieżka, po której przesuwa się wzrok odbiorcy. To samo dotyczy zmiany rozmiarów elementów projektu — każda modyfikacja wpływa na wagę przestrzeni oraz siłę jej przekazu. Przestrzeń negatywna jest 22 http://www.adhamdannaway.com. Zasady projektowania grafiki doskonałej

27

dynamiczna. Spójrz, w jak nieszablonowy sposób zabawiono się przestrzenią w projekcie strony agencji Academy23:

Mimo że na stronie pojawia się zaledwie kilka elementów, sposób wykorzystania przestrzeni w tym projekcie zadziwia i fascynuje. Logo studia zostało pocięte na fragmenty i choć w układzie strony brak jakichkolwiek linii podziału, przestrzeń negatywna nie pozostawia wątpliwości co do kształtu domyślnej siatki, zaprowadzając tym samym porządek w pozornym chaosie. Takie rozwiązanie zrywa z tradycyjnymi prawami czytania (z góry na dół) albo szybkiego przeglądania tekstu (na przykład zgodnie z regułą wzorca F). Abstrakcyjny kształt umieszczony nieco z prawej strony okna natychmiast ściąga wzrok oglądającego, a następnie odsyła go do logo w lewym górnym rogu przestrzeni, by później poprowadzić go przez poziome menu aż do tekstu wprowadzającego.

Napięcie W projektach graficznych wyróżniamy dwa rodzaje napięcia. Pierwszy charakteryzuje się tym, że po fazie narastania przychodzi chwila uwolnienia. Można uzyskać to na przykład odpowiednio dobraną fotografią — szokującą, zabawną lub po prostu dziwną, ale nigdy nie pozostawianą bez pointy. Pointę można wprowadzić odpowiednim tekstem, innym obrazem, czasami nawet kształtem, kolorem lub wyłącznie kontrastem. Istotne jest to, że wraz z pojawieniem się pointy znika całe napięcie. Odbiorca postawiony przed tak zaplanowanym projektem łączy poszczególne kropki. Napięcie wprowadza go w  ideę projektu, rozluźnienie uwalnia, a  wraz ze zrozumieniem pojawia się uczucie ulgi. W ten sposób zmusza się widza do wejścia w interakcję z oglądanym obrazem, a to przecież jeden z podstawowych celów, jakie przyświecają każdemu projektantowi. Spójrzmy teraz na przykład — stronę internetową firmy Y3K24: 23 http://www.weareacademy.com. 24 http://y3k.com.au (strona w dawnej postaci — przyp. tłum.). 28

Zasady projektowania grafiki doskonałej

Tu interakcja następuje w wyniku umiejętnego wywołania napięcia drugiego rodzaju. Pojawia się ono pomiędzy elementami strony, ale nie prowadzi do rozwiązania poprzez oczyszczającą ulgę. Podobnie jak miało to miejsce z przestrzenią negatywną, to poszczególne fragmenty projektu prowadzą wzrok oglądającego i definiują kompozycję całości. Pomimo swojej prostoty projekt wywołuje pożądane napięcie skupiające się przede wszystkim na pojedynczej, poprowadzonej ukośnie linii. Element ten pojawia się w takim miejscu strony i ma tak dobrany rozmiar, że natychmiast przyciąga uwagę odbiorcy i skłania go do zastanowienia się nad podziałem wzorzystej przestrzeni — nie na pół, lecz na dwie nierówne części. Odbiorca zostaje od razu wciągnięty w projekt i gdy nie znajduje odpowiedzi na pytanie o cel wprowadzenia podziału, zaczyna roztrząsać możliwe przyczyny umieszczenia linii na stronie. Kąt, pod jakim poprowadzono linię, podnosi dodatkowo napięcie, gdyż pozostaje w silnym kontraście do siatki będącej tłem całości. Przez to linia wydaje się nabierać jeszcze większego znaczenia, co tym bardziej skłania do poszukiwania odpowiedzi na pytanie o sens jej istnienia. Napięcie wprowadza odbiorcę przynajmniej na pierwszy stopień oddziaływania z projektem, otwierając tym samym furtkę do nawiązania silniejszej więzi — a wszystko za sprawą zwyczajnej linii. Na tym właśnie polega moc powiązań między elementami projektu. Przypominamy, że to ona stanowi właśnie sedno naszych rozważań. Rand stwierdził kiedyś, że sztuka polega właśnie na budowaniu odpowiednich zależności i że to właśnie powiązania pomiędzy elementami projektu stanowią o jego sile. Minimalizm jest probierzem pozwalającym testować kierunki rozwoju powiązań, badać ich możliwości i bawić się nimi. O zrozumieniu tej idei będziemy mogli powiedzieć dopiero wtedy, gdy przyjmiemy do wiadomości, że dla dobrego projektanta minimalizm jest stylem, a dla wielkiego oczywistością, którą osiąga się, definiując wszystkie więzy niezbędne w danym projekcie. Zasady projektowania grafiki doskonałej

29

Minimalizm w  ujęciu stylu pracy przekazuje treści wynikające z  samej istoty projektu. Minimalizm, z którym mamy do czynienia najczęściej, zapożycza pewne elementy, by ładnie obudować projekt. Prawdziwy minimalizm — wynik złożonych powiązań pomiędzy fragmentami grafiki — jest przyrodzoną cechą wszystkich wielkich projektów.

Przekazywanie treści obrazem Skoro opisaliśmy już, w jaki sposób przekazać treść w ograniczonej formie, warto zbadać teraz możliwości chyba najistotniejszego narzędzia w rękach każdego projektanta — obrazu. Nie każdy obraz wart jest tysiąca słów, ale z pewnością każdy z nich pozwala przekazać wiadomość szybciej i skuteczniej (czasami także w bardziej intrygujący sposób) niż zwykły tekst. Ustaliliśmy już, że podstawowym celem tworzenia grafiki użytkowej jest komunikowanie pewnych idei, zatem logiczne wydaje się budowanie języka projektu wokół fundamentu, jaki daje obraz. To coś, o czym powinien pamiętać każdy grafik. Obrazy potrafią przekazywać treść w dwójnasób. Przede wszystkim mogą przedstawiać pewne rzeczy wprost. Za tym stwierdzeniem nie kryje się żadna tajemnica — tego rodzaju obrazy przedstawiają jakąś osobę, miejsce bądź rzecz. Taki obraz ma przyciągać uwagę do konkretnego tematu, promować ideę, pobudzać do rozważań na jej temat lub stanowić jej krytykę. Typowym przykładem obrazu figuratywnego jest portret. Przyjrzyjmy się blogowi prowadzonemu przez projektantkę i  przedsiębiorcę w  jednej osobie — Sue Rutheford25:

Głównym punktem strony bloga jest fotografia autorki. To typowy przykład obrazu figuratywnego, ponieważ przedstawia konkretną osobę. U jej znajomych zdjęcie to natychmiast przywoła wspomnienia z nią związane, dla obcych będzie stanowić formę przedstawienia Sue. 25 http://www.justbcoz.co.za/headspace. 30

Zasady projektowania grafiki doskonałej

Technikę tę wykorzystuje się z powodzeniem we wszelkich rodzajach portfolio (prezentujących dotychczasowe dokonania właściciela) czy witrynach sklepów internetowych (gdzie umieszcza się zdjęcia towarów). Na przykład na stronie pracowni projektowej OnA26 znajdziemy zdjęcia modelek w sukienkach z kolekcji:

Odwiedzający stronę mogą na własne oczy przekonać się, jak prezentują się dokonania pracowni, i poznać szczegóły projektów. Dzięki temu każdy ma szansę wyrobić sobie zdanie na temat jakości i wartości prac OnA. Druga metoda polega na przekazywaniu pewnych tematów poprzez obrazy będące metaforą. Z takim rozwiązaniem mamy do czynienia, gdy obraz sugeruje konkretną ideę bez jednoczesnego przedstawienia jej dosłownie. To niebywale potężne narzędzie, zatem należy używać go celowo, z należną rozwagą. Niektóre metafory są jasne i oczywiste — tu przykładem może być rzucająca się w oczy żarówka, punkt centralny projektu portfolio BrightBulb27:

26 http://www.ona.com.co/web. 27 http://www.brightbulbstudio.com (strona w dawnej postaci — przyp. tłum.). Zasady projektowania grafiki doskonałej

31

Od pierwszej chwili wydaje się jasne, że żarówka jest tu metaforycznym przedstawieniem nowej wizji, ale na tym nie koniec. Po dokładniejszej obserwacji można zauważyć, że zamiast żarnika wewnątrz bańki umieszczono drzewo, co pozostaje w silnym związku z myślą przewodnią portfolio, które ma być miejscem, „gdzie pomysły wzrastają i promienieją”. W ten sposób grafik wzbogacił wizualny przekaz strony. Projekt witryny Drowned Studio28 to przykład bardziej abstrakcyjnej metafory. Obraz będący najważniejszym elementem projektu ma przywodzić na myśl tunel, a zastosowane w grafice barwy oraz kształty natychmiast kojarzą się nam z cyfrowym klimatem trylogii Matrix.

Stąd też wrażenie błyskotliwych wyobrażeń oraz kreatywności w dziedzinie sztuki cyfrowej, co można podsumować krótko — kinematografia. Skojarzenie jest umacniane pozostałymi elementami projektu, który w całości nawiązuje do stylu znanego z plakatów filmowych (te z kolei są kopalnią metafor). Niezależnie jednak od tego, czy mamy do czynienia ze sztuką figuratywną, abstrakcyjną lub ich mieszanką (przykładem może służyć strona internetowa Adhama Dannawaya przywoływana w omówieniu minimalizmu), główną rolą obrazu jest zawsze umacnianie przekazu, jaki ma nieść cały projekt. To prowadzi nas do konkluzji będącej najważniejszym wnioskiem wywodu poświęconego obrazom w projekcie graficznym — dobry projektant ozdabia stronę, wielki projektant syntetyzuje obrazem znaczenie. Dlatego zawsze, gdy sięgamy po ilustrację, niezależnie od jej kształtu, musimy zadbać o to, by wzmacniała przekaz projektu. W przeciwnym razie stanie się jedynie elementem dekoracyjnym.

28 http://www.drowned.fr (strona w dawnej postaci — przyp. tłum.). 32

Zasady projektowania grafiki doskonałej

Projektant zawsze pracuje w jednym tylko celu — ma przekazać konkretną myśl — zatem musi zadbać o to, by wszystkie części projektu współgrały ze sobą tak, by realizować to założenie. Każdy obraz ma znaczenie. Być może jest ono widoczne na pierwszy rzut oka, może skrywa się za metaforą budowaną kształtem, kolorem, abstrakcyjną ideą. Jeśli jednak nie przemyślimy go dokładnie, zamiast wzmocnić ilustracją przekaz projektu, osiągniemy przeciwny skutek — obraz zakłóci przekaz pracy, sugerując zupełnie inną myśl przewodnią.

Rola typografii Rolą typografii jest służyć treści. Robert Bringhurst29

Tymi słowami rozpoczyna się pierwszy rozdział książki The Elements of Typography autorstwa Roberta Bringhursta, uznawanej za wykładnię przez wszystkich zainteresowanych tą dziedziną. Bringhurst sugeruje z właściwą sobie elegancką prostotą, że krój pisma powinien służyć przede wszystkim prezentacji treści, a nie zaspokajać ambicje projektanta, jego klientów, odbiorcy albo podkreślać własną urodę. Dlatego też właściwie dobrany odzwierciedla ideę, która kryje się za projektem, i nigdy nie wprawia w niewłaściwy nastrój, nie kieruje w ślepą uliczkę ani nie przyciąga uwagi w stopniu większym, niż jest to konieczne.

Nie pomijajmy wagi słów Wiedza na temat typografii staje się niezbędna zawsze, gdy w projekcie pojawiają się umieszczone jedna obok drugiej litery. Nie ma wtedy znaczenia, czy rozważamy pracę, która pojawi się na kartce, pozostanie na zawsze w dokumencie OpenOffice czy będzie przeniesiona do okna przeglądarki internetowej. Nieważne, czy użytkownik ma doświadczenie na tym polu, nie liczą się intencje projektanta — wszelkie zmiany dotyczące skali oraz położenia tekstu zawsze wpływają na ogólny kształt projektu. Zawodowy projektant musi sam odpowiedzieć sobie na pytanie, jak poważnie podejdzie do zagadnienia pracy nad typografią. Dobry projektant rozumie, że decyzje, jakie podejmie w odniesieniu do tekstu, będą miały wpływ na ogólny odbiór jego pracy. Wielki projektant upewni się, że swoimi działaniami podkreśli dodatkowo przekaz projektu. Oliver Reichenstein stwierdził nie bez racji, że „95% informacji zamieszczanych w internecie to tekst”30. Dlatego my, projektanci, musimy wiedzieć, jak ob29 R. Bringhurst, The Elements od Typographic Style, 2005, s. 17. 30 O. Reichenstein, Web Design is 95% Typography, 19 października 2006, http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period. Zasady projektowania grafiki doskonałej

33

chodzić się z tym największym z dostępnych nam narzędzi. Cechą charakterystyczną wielkich projektów jest stosowanie przemyślanych rozwiązań tak, by nie wykraczały poza zestaw określonych reguł. Wiemy już, że próby przekazywania treści za pomocą ograniczonych do minimum środków pozwalają osiągnąć imponujące efekty — typografia nie jest tu w żadnym razie wyjątkiem. Nikt nie rozmieszcza przecież zdjęć w  przypadkowo wybranych miejscach projektu, dlaczego zatem zakładać, że słowa można profanować nieprzemyślanymi decyzjami dotyczącymi zastosowanych fontów. Krój pisma nie zdoła sam udźwignąć ciężaru odpowiedzialności za projekt. Nie można uznać, że praca nad typografią kończy się z  chwilą zadeklarowania fontów dla głównej części strony w arkuszu CSS. Nie mniejsze znaczenie ma przecież rozmiar fontu, interlinia (odstęp między wierszami), długość wiersza, kolor tekstu bądź jego rozmieszczenie. W tak ważnych kwestiach nie można polegać na domyślnych ustawieniach. Aby wydobyć potencjał drzemiący w narzędziu, jakim jest typografia, trzeba gruntownie przemyśleć wszystkie jej aspekty i wykonać niemałą pracę.

Powiązania typograficzne Zanim projektant przystąpi do realizowania projektu, powinien najpierw postarać się zrozumieć dokładnie jego założenia i kryjącą się za nim ideę. Czasami wiąże się to z przeprowadzeniem szczegółowego wywiadu z klientem w celu dokładnego określenia jego wymagań, w innych przypadkach wymaga gruntownego przebudowania założeń projektu, tak by odpowiadały konkretnym potrzebom. Zawsze jednak pewien aspekt pracy nad projektem pozostaje stały — o charakterze projektu decyduje charakter użytego języka. Ta sama zasada obowiązywała w przypadku stosowania obrazów, dobierania koloru lub dowolnego innego elementu projektu, zatem nie ma powodu, by w przypadku wybierania kroju pisma miało być inaczej. Aby wypełniał on swoją rolę właściwie, musimy — na co zwraca nam uwagę Bringhurst — „odkryć zasady rządzące wyglądem pisma skryte w logice samej treści”. Różne kroje pisma wywołują odmienne wrażenia, dlatego niewłaściwy dobór fontów może zakłócić odbiór treści projektu. Spójrzmy na przykład — stronę firmy Bam Creative31. Wybuchowy charakter projektu podkreśla dobrze przemyślana grafika (jaskrawozielone tło uzupełnione barwami z palety skali szarości i bielą oraz niedający się pominąć wzrokiem rysunek bomby) i doskonale uzupełniające ją kroje pisma. Pogrubiony, bezszeryfowy font idealnie sprawdza się na tle współczesnej, prostej estetyki strony i  nie kłóci się z  energią, jaka bije od całości. Teraz wyobraź sobie ten sam projekt z delikatnym fontem szeryfowym — rozdźwięk burzyłby harmonię. Kształt projektu musi wypływać z sensu przekazywanych treści, musi pozostawać z nimi w zgodzie. 31 http://www.bam.com.au. 34

Zasady projektowania grafiki doskonałej

Gotowy projekt to miejsce, w którym forma spotyka się z treścią — tekst z oprawą graficzną. Połączenie to musi być przejrzyste, wyraźne, nie może pozostawiać miejsca na dociekania, jaka idea kryła się za projektem — ta musi być wyraźna. Tylko staranne planowanie i gruntowne zastanowienie się nad charakterem kroju pisma pozwoli Ci przekazać ją bez zakłóceń, w sposób niebudzący żadnych wątpliwości.

harmonia i równowaga Po przygotowaniu bloku tekstu nie możesz już ignorować jego roli w całym projekcie. Aby uhonorować ją należycie, musisz zapewnić przestrzeń dla tekstu, w której będzie mógł swobodnie oddychać, i zadbać o równowagę bloku i pozostałych elementów projektu. Właściwe umiejscowienie oraz odpowiednie prowadzenie wzroku odbiorcy podkreślają wymowę grafiki. Podobnie ma się sprawa bloku tekstu — właściwe położenie, czy to rozpatrywane w kontekście strony, czy to w odniesieniu do pozostałych elementów projektu, może znacznie uwydatnić przekaz treści umieszczonej w bloku. Aż nazbyt często spotyka się projekty, w których tekst zostaje wepchnięty w układ już po tym, jak ustali się rozkład kolumn i marginesów. Autorzy grafiki często zachowują się tak, jakby mieli do czynienia z płynem, który swobodnie wypełni dowolną przestrzeń, jaką da się mu do dyspozycji. A przecież w większości przypadków (jeśli nie w każdym) to właśnie tekst powinien być podstawą pracy nad układem strony. Akapity wypełnione długimi i nieczytelnymi terminami medycznymi nigdy nie będą prezentować się dobrze w wąskich kolumnach, a poezja będzie wyglądać nieciekawie umieszczona na całej szerokości strony. Jedną z pierwszych decyzji dotyczących szczegółów projektu jest bardzo często wybór czcionki. Położenia środkowej linii pisma oraz linii wydłużeń dolnych i górnych mają niebagatelne znaczenie dla określenia rozmiaru fontu oraz szerokości odstępu międzywierszowego, te z kolei określają wymiary marginesów (czyli pośrednio

Zasady projektowania grafiki doskonałej

35

szerokość kolumn). Oczywiście tak szczegółowa analiza nie jest konieczna w każdym projekcie (często jest wręcz niepożądana), ale warto mieć świadomość, że istnieje sprawdzony sposób określania wzajemnych zależności pomiędzy elementami projektu, tak by uzyskać harmonijnie wyglądającą całość. To, czy poszczególne rozmiary fontów będą harmonijnie do siebie pasować, zależy w dużej mierze od tego, na ile będziesz kierować się rozsądkiem i zmysłem praktycznym w czasie ich dobierania. Najlepiej jest pracować w zakresie typowej skali typograficznej, czyli korzystać z rozmiarów fontów odpowiadających czcionkom używanym od XVI wieku. Po tylu wiekach stosowania tej skali możemy stwierdzić, że wielokrotnie dowiodła ona swojej wartości. Wystarczy nieco zastanowić się nad projektem, utworzyć odpowiedni kontrast, a szybko okaże się, że grafika i wybrane fonty doskonale się uzupełniają.

Najistotniejsze w  pracy nad stylem typografii projektu jest unikanie przesady. Linia pogrubionego tekstu jest wystarczającym wyróżnieniem nagłówka — nikt nie ominie go przypadkowo wzrokiem. Dlatego dodatkowe podkreślenie jest zupełnie zbędne, nie chodzi przecież o to, żeby nagłówek „atakował” nachalnie odbiorcę. Wystarczy lekka zmiana odcienia liter, by wyróżniły się one na tle pozostałego tekstu.

Przejrzystość Odbiorca nie powinien czuć się tak, jakby odczytywał słowa, które „przedstawiają” pewien zamysł. Słowa powinny przekazywać ideę, myśl przewodnia projektu musi z nich wypływać w sposób niezauważalny. Odbiorca powinien poznawać ją niepostrzeżenie, czytając tekst. Beatrice Warde wprowadziła nieznane dotąd porównanie. W swojej nowatorskiej pracy porównała typografię do kryształowego kielicha o przejrzystych ściankach, przez które bez trudu prześwieca wino komunikatu32. Przezroczyste ścianki kielicha pozwalają cieszyć się bez przeszkód bogatą barwą wina, podziwiać migoczącą powierzchnię płynu. Prawdziwy koneser tego trunku bezapelacyjnie doceni 32 B. Warde, The Crystal Goblet, or Printing Should Be Invisible, http://gmunch.home.pipeline.com/typo-L/misc/ward.htm. 36

Zasady projektowania grafiki doskonałej

umieszczenie go w naczyniu, które pozwala w pełni delektować się urodą napitku. Będzie to możliwe, „ponieważ naczynie zostało zaprojektowane tak, by jak najwięcej ujawniać, a nie ukrywać to, co w nim umieszczono”. Warde starała się forsować ideę, że krój pisma niczym kryształowy kielich powinien przestać przyciągać uwagę od momentu, gdy odbiorca zacznie analizować treść (teorię tę można z powodzeniem rozszerzyć na cały projekt). Nic, nawet sam projekt, nie powinno stawać na drodze do odebrania przekazu pracy. Obowiązkiem projektanta jest pielęgnowanie przejrzystej więzi, jaka tworzy się pomiędzy odbiorcą a myślą przewodnią projektu. Nic, również krój pisma, nie ma prawa jej zakłócić. Dobrze dobrany krój pisma powinien stać się katalizatorem, dzięki któremu idea projektu trafi do świadomości odbiorcy. Jednak aby proces ten miał szansę zajść, musimy nauczyć się, że myśl przewodnia projektu nie kryje się w znakach, które nazywamy literami i słowami. Samo przygotowanie gruntu, zapewnienie blokom tekstu przestrzeni czy odpowiednie dobranie kształtu nagłówków nie wystarczy. Pamiętaj, że strona i krój pisma są jedynie oknem, przez które powinna wyzierać główna idea projektu, oknem, które musimy zmontować. Przekaz powinien trafiać do przekonania bez żadnych wątpliwości. Odbiorca nie musi dostrzegać urody grafiki, ładnego kroju pisma bądź gładko płynących słów — ma docenić całość bez przeprowadzania jej analizy. Nawet jeśli estetyka projektu zwróci jego uwagę, odbiorca nie powinien poświęcać jej nic ponad przelotną myśl. Spośród wszystkich elementów projektu, z  jakimi mamy do czynienia, w  słowach kryje się największa moc, niejednokrotnie przewyższająca siłę przekazu obrazu czy koloru. Słowa zaszczepiają idee, zmieniają przebieg procesów chemicznych w naszym mózgu, tworzą obrazy w pamięci, ubarwiają wspomnienia i rodzą nowe wizje. Każdy projektant staje przed odpowiedzialnym zadaniem ubrania tych słów w kształt, nadania im ram, tak by niosły jak najwięcej treści.

kwestia roli Dobrze dobrany krój pisma staje się najwyrazistszy, gdy znajdzie się w przejrzystym środowisku. Starannie przygotowany blok tekstu w  przestrzeni, która nie przytłacza go swoim charakterem, a nawet podkreśla jego wymowę, jest jedną z najwspanialszych rzeczy, jakie może osiągnąć projektant. Wypracowanie równowagi pomiędzy poszczególnymi elementami projektu to fascynująca praca — słowa muszą przyciągać uwagę, lecz nie tak bardzo, by odwracać ją od treści, bo przecież najważniejsza w projekcie jest myśl przewodnia. Całość powinna przypominać słuchowisko radiowe, gdzie liczy się przede wszystkim opowieść, a  głos lektora jest jedynie narzędziem jej przedstawiania (choć oczywiście mającym ogromny wpływ na to, jak odbierzemy opowieść).

Zasady projektowania grafiki doskonałej

37

Krój pisma może odgrywać rolę niezależnego elementu graficznego lub być całkowicie podporządkowany przekazywaniu treści. Pierwszy rodzaj fontów spotyka się na stronach tytułowych, wprowadzeniach do obszerniejszych artykułów, reklamie czy plakatach. Ilustracje słowne są najlepszym dowodem na to, że typografia jest prawdziwą sztuką. Są jednocześnie źródłem opowieści i jej ozdobą — prawdziwą ucztą dla zmysłów. Doskonałym przykładem takiego wykorzystania różnych krojów pisma jest strona Elysium Burns33:

Patrząc na ten projekt, odnosi się wrażenie, jakby jego twórca stosował różne rodzaje krojów pisma z lekkością i wprawą malarza nakładającego warstwy farby na płótno. Słowa, które oczywiście kryją w sobie określone znaczenie, stają się dzięki szczegółowemu planowaniu czymś więcej. Oddziałują na siebie, tworzą nowe zależności krojów, stylów, położeń i kolorów. Razem budują niezwykły obraz będący dowodem mistrzostwa projektanta. Jak widać na wspomnianym przykładzie, reguły typografii podporządkowanej treści nie są zestawem sztywnych zasad — to bardziej wskazówki, z których niekoniecznie się korzysta. Historia projektowania grafiki użytkowej jest nieskończonym źródłem zasad, idei i teorii, które pozostają aktualne do dziś i które sprawdzają się na stronie internetowej równie dobrze, jak na kartce papieru. To, że je znasz, nie znaczy, że będziesz musiał ślepo się do nich stosować, jednak dobrze jest mieć świadomość, jak prezentują się sprawdzone przez wieki zasady zwiększające czytelność pracy, jej estetykę i siłę oddziaływania. Mając na uwadze to wszystko, dochodzimy do prostego, lecz jakże ważnego wniosku — dobry projekt zachwyci pięknymi krojami czcionek, doskonały projekt wykorzysta je w sposób przemyślany. 33 http://www.elysiumburns.com. 38

Zasady projektowania grafiki doskonałej

W  blokach tekstu wielkich projektów można znaleźć delikatne, wyciszone, niemalże niewidzialne kroje pisma. Każde słowo wita przyjaźnie, zachęcając do dalszej lektury, ale nie przekracza subtelnej granicy dobrego smaku. Poszczególne słowa schodzą na dalszy plan, ustępując miejsca przekazowi, jaki z nich wypływa. I  tylko poza większymi blokami tekstu perfekcyjna typografia pozwala sobie na krzykliwość, rozmach i  niezwykłe piękno. Wtedy przyciąga uwagę i  nadaje znaczeniu nowy wyraz — zarówno kształtem, stylem, położeniem i  rozmiarem, jak i samymi słowami. Jednak w żadnym z opisywanych tu przypadków kroje pisma nie są stosowane wyłącznie na pokaz. Dogłębne przemyślenie problemu i świadome decyzje projektanta wystarczą, by spełniła się wizja Bringhursta.

Głos obrazu Stwierdziliśmy już, że projekty graficzne dysponują własnym językiem, dotąd jednak nie podkreśliliśmy, że każdy projekt również przemawia własnym głosem — głos ten nie jest niczym innym jak praktycznym wykorzystaniem języka przez autora projektu. Skoro zakładamy, że projekt przekazuje pewną ideę, możemy uznać, że używa do tego właśnie swojego głosu. Stawiając sprawę w ten sposób, powracamy do wielu idei, które omawialiśmy poprzednio. Głos nie jest czymś, co pojawia się w projekcie w sposób zamierzony. On zawsze jest obecny, zatem stajesz przed wyzwaniem, z którym boryka się każdy wokalista. Musisz nauczyć się panować nad głosem, naginać go do własnej woli. Przyjrzyjmy się przykładom. Postaraj się zwrócić uwagę na wkład głosu w przekaz każdego z projektów.

krzyk Krzyk musi być wysłuchany. W świecie przesyconym komunikatami starającymi się za wszelką cenę ściągnąć na siebie naszą uwagę donośny krzyk projektu ma szansę przebić się do naszej świadomości. Krzyk wybiera wyraziste kształty, które nie pozwalają przejść obok obojętnie. Strona agencji reklamowej Armitage34 krzyczy do nas z okna przeglądarki. Jej donośny głos przejawia się na kilka sposobów. Przede wszystkim znajdziemy tu odważne zestawienia kolorów. Jaskrawoniebieski i kanarkowożółty tworzą kontrast, który zapada w pamięć na długo (patrz rysunek na następnej stronie):

34 http://armitagedigital.co.uk/blog. Zasady projektowania grafiki doskonałej

39

Podobną rolę odgrywa doskonale przemyślany dobór krojów pisma. Wszystkie nagłówki zostały zapisane kapitalikami — przyjęło się uważać, że to graficzny odpowiednik krzyku. Poza tym rozmiar użytego fontu również zwraca uwagę i wreszcie nadano im odpowiednio ciężki styl. W idealnej harmonii te trzy cechy sprawiają, że strona wydaje się przytłaczać donośnym komunikatem. Ważniejsze jednak jest to, że efekt ten ma przede wszystkim podkreślić myśl przewodnią projektu. Armitage określa siebie „przodującą” agencją i akcentuje, że celuje w  tworzeniu „uderzających projektów” — obydwa te wyrażenia znajdują odbicie w krzykliwym wyglądzie strony.

Delikatny Ale przecież nie każdy projekt musi obezwładniać krzykiem. Głos może być także miękki, cichy. Głośne okrzyki przyciągają uwagę natężeniem dźwięku, ciche głosy wolą polegać na dystyngowanym spokoju. Taki głos będzie czekał cierpliwie na odkrywcę, który doceni jakość i wagę przekazu kryjącego się w projekcie. Strona Keana Richmonda35 to doskonały przykład delikatnego projektu. Nie trzeba chyba podkreślać kontrastu pomiędzy nim a  projektem Armitage. Miejsce intensywnych barw zajął niemalże monochromatyczny schemat, którego podstawą jest jasny beż, pozbawiony intensywności do tego stopnia, że wydaje się niemal szary. Uzupełnienie stanowią delikatne pastelowe barwy pojawiające się w obszarze nawigacji strony. Choć sam projekt tak bardzo odbiega od tego, co zaprezentowała strona Armitage, nie ma wątpliwości, że jego autor działał w  równie przemyślany sposób. Richmond ogłasza swoje kompetencje znacznie mniej gromko, ocierając się wręcz o  pomniejszanie własnych dokonań. Odwiedzających wita napis oznajmiający, że 35 http://www.keanrichmond.com. 40

Zasady projektowania grafiki doskonałej

trafili właśnie na stronę internetową, po którym pojawia się wtrącony na marginesie komunikat: „Ale pewnie już to zauważyliście”. Z kolei na stronie About (o mnie) znajdziemy informację: „Jak większość ludzi, mam problemy z  pisaniem o  sobie, ale co tam…”.

Mimo że strona internetowa stanowi prawdopodobnie główny kanał marketingowy projektanta, Richmond świadomie stara się nie traktować siebie zbyt poważnie, czemu daje wyraz zarówno w tekście, jak i doborze grafiki. Wybory, jakich dokonał w czasie prac nad stroną — paleta spokojnych barw bądź duże połacie przestrzeni negatywnej — wzmacniają jeszcze ten przekaz. Gdyby w projekcie strony pojawiły się jaskrawe barwy i  mnóstwo szczegółów, efekt wywierany przez przekaz płynący z tekstu byłby znacznie mniej spektakularny.

Twórczy Kreatywność nie kojarzy się z głosem rozumianym dosłownie, ale z pewnością można powiązać ją z szerzej rozumianym głosem jako odbiciem tożsamości. Przecież to właśnie o jasno określoną tożsamość chodzi cały czas. Spójrzmy teraz, jakie techniki wykorzystał Joe Lifrieri, by jasno dać do zrozumienia, że kreatywność jest tym, co pragnie on obwieścić światu. Pora na stronę Hugs for Monsters36. Pierwsze, co nas uderza, to oryginalna nazwa witryny, potem wzrok pada na stronę główną serwisu. Nie sposób nie zauważyć bardzo szczegółowego ręcznego rysunku kipiącego żywymi barwami, pełnego naturalnych kształtów, i oczywiście nikt nie zdoła przejść obojętnie obok dziwacznego, jednookiego potwora, który wymiotuje twórczością. Nieważne, czy styl strony przypadnie Ci do gustu i jak zinterpretujesz witającą Cię grafikę — całość musi pozostawić silne wrażenie kreatywności. 36 http://hugsformonsters.com. Zasady projektowania grafiki doskonałej

41

Lifrieri, z zawodu grafik i projektant, stosuje te zabiegi w pełni świadomie, doskonale wiedząc, jaką wiadomość chce nam przekazać. Pozostałe podstrony są utrzymane w podobnym stylu. Na stronie portfolio znajdziemy cztery miniatury przedstawiające różne projekty. Całość ozdobiona jest ilustracją utrzymaną w stylu rysunku ze strony głównej. Podobne grafiki znajdziemy na stronie bloga oraz informacji o autorze. Znów nie sposób pominąć w tym omówieniu roli typografii. Tytuł strony oraz pozycje menu są zapisane odręcznym krojem pisma, który pojawia się także na umieszczonych w  witrynie grafikach. Na szczęście Lifrieri ogranicza się do wykorzystania go w kilku ściśle określonych miejscach, a treść strony zapisuje elegancką czcionką bezszeryfową (w  pięknej, ścieśnionej wersji w  nagłówkach). To rozsądna decyzja. Sformatowanie wszystkich tytułów i podtytułów pismem odręcznym wpłynęłoby fatalnie na czytelność strony. Odręczne ilustracje oraz starannie dobrane kroje pisma wzmacniają wrażenie niezwykłej kreatywności tego projektu. To zapewne chciał osiągnąć autor. Znów możemy powiedzieć, że głos projektu doskonale wzmacnia myśl przewodnią pracy. Po zapoznaniu się z przykładami, z których jasno wynika, że głos strony potrafi podkreślić przekaz, możemy wysnuć kolejny wniosek — dobry projekt istnieje sam dla siebie, projekt wielki istnieje dla swojej treści (czy raczej dla jej znaczenia). Wybory, jakich dokonujemy w odniesieniu do kolorów, kroju pisma czy ilustracji, działają podobnie jak ton głosu, natężenie wydawanych dźwięków oraz modulacja głosu w rozmowie. Co więcej, elementy te będą oddziaływać na odbiorcę — czy tego chcesz, czy nie. Paleta barw zawsze ma wpływ na odbiór obrazu, a krój pisma definiuje znaczenie projektu poprzez swój styl, wyróżnienie, konotacje oraz kontekst. Dlatego należy zawsze mieć pełną świadomość wszystkiego, co pojawia się w projekcie. Żaden z jego elementów nie powinien być przypadkowy (a w każdym razie nie zupełnie przypadkowy), wszystkie czynniki powinny współgrać ze sobą,

42

Zasady projektowania grafiki doskonałej

by zbudować razem harmonię znaczenia. Cokolwiek będzie poniżej tej poprzeczki, wprowadzi fałsz do wydźwięku projektu i najprawdopodobniej znacznie zmniejszy wydźwięk pracy.

Wnioski Dobry projektant tworzy atrakcyjne prace, które będą spełniać oczekiwania klienta. Wielki projektant wychodzi poza tę granicę, stara się dotrzeć do sedna zagadnienia. Wielki projektant odwołuje się do idei, o których tu powiedziano, mogących zapewnić jego pracom ponadczasowość, nie wzdraga się przed minimalizmem, potrafi korzystać z obrazu i głosu pracy, tak by znaleźć dobrze przemyślane i logiczne rozwiązanie. Te same zasady, które obowiązują w tradycyjnej grafice użytkowej, znajdują zastosowanie w projektowaniu stron internetowych. Pośród całego zamieszania wokół użyteczności strony, łatwości nawigowania po niej, doświadczeń użytkownika, czystości kodu HTML czy CSS ginie gdzieś temat solidnie przygotowanego, starannego projektu graficznego. Bardzo często zbywa się go bezmyślnym powtarzaniem frazesów na temat trendów i powszechnie stosowanych rozwiązań. W efekcie dostajemy do rąk typową stronę internetową, która nie stanowi odpowiedzi na konkretnie postawiony problem, a jedynie wywołuje wrażenie bycia jedną z wielu stron WWW. Teraz powinieneś już wiedzieć, że takie podejście nie doprowadzi Cię do stworzenia dobrego projektu, nie wspominając już o pracach doskonałych. Oczywiście projektant musi poruszać się w obrębie pewnych granic — choćby ograniczeń modelu pudełkowego — lecz koniec końców każdy dobrze wykonany projekt obroni swoją pozycję i ukaże kryjące się za nim przemyślane decyzje, które stanowią oprawę dla treści i idei przekazywanych przez zawartość strony.

Lista lektur Oczywiście wszystkie rozważania o zrozumieniu języka projektu okażą się bezcelowe, jeśli nie damy Ci jakiegoś punktu odniesienia, nie wskażemy, gdzie możesz wsłuchać się najlepiej w jego barwę.

Typografia i kompozycja R. Bringhurst, The Elements of Typographic Style K. Elam, Geometry of Design: Studies in Proportion and Composition K. Elam, Grid Systems: Principles of Organizing Type K. Elam, Typographic Systems of Design Zasady projektowania grafiki doskonałej

43

A. Hofmann, Graphic Design Manual: Principles and Practice E. Lupton, Thinking With Type J. Müller-Brockmann, Grid Systems in Graphic Design (Rastersysteme für die visuelle Gestaltung) J. Müller-Brockmann, The Graphic Artist and His Design Problems E. Ruder, Typographie: A Manual of Design T. Samara, Making and Breaking the Grid: A Graphic Design Layout Workshop J. Tschichold, The New Typography W. Weingart, Wolfgang Weingart: My Way to Typography

historia P. Cramsie, The Story of Graphic Design: From the Invention of Writing to the Birth of Digital Design S. Heller, G. Ballance, Graphic Design History R. Hollis, Graphic Design: A Concise History R. Hollis, Swiss Graphic Design: The Origins and Growth of an International Style, 1920 – 1965 P.B. Meggs, A.W. Purvis, Meggs’ History of Graphic Design

Teorie, opinie, idee P. Arden, It’s Not How Good You Are, It’s How Good You Want to Be: The World’s Best Selling Book P. Arden, Whatever You Think, Think the Opposite M. Beirut, S. Heller, W. Drenttel, D.K. Holland i in. (red.), Looking Closer (tomy 1 – 5) J. Dewey, Art as Experience R. Hendel, On Book Design D. Millman, The Essential Principles of Graphic Design P. Rand, Paul Rand: A Designer’s Art A. Shaughnessy, How to Be a Graphic Designer Without Losing Your Soul

Ludzie C. Burke, Active Literature: Jan Tschichold and New Typography S. Heller, Paul Rand M. Kroeger, Paul Rand: Conversations with Students L. Müller, Josef Müller-Brockmann: Pioneer of Swiss Graphic Design P. Scher, Make It Bigger M. Vignelli, Vignelli From A to Z

44

Zasady projektowania grafiki doskonałej

o autorach Grafika użytkowa to coś więcej niż tylko ozdabianie. To przede wszystkim tworzenie przemyślanych i zamierzonych rozwiązań dla widocznych (zazwyczaj) zagadnień wizualnych. Matt Ward (1981) pochodzi z Ontario w Kanadzie, jest absolwentem filologii angielskiej. To projektant samouk, który skupia się przede wszystkim na pisaniu kodu stron, choć nie unika też niezbędnych rozwiązań serwerowych. Od prawie dziesięciu lat pracuje zdalnie, od czterech lat zajmuje się sprawami poligrafii. Jego ulubiony kolor to ten, który akurat pasuje. W czasie wolnym od pracy oraz zabawiania żony i córki lubi czytać, grać na gitarze oraz w gry komputerowe. Matt chciałby przekazać Czytelnikom jedno — nigdy, przenigdy nie przestawajcie się uczyć. Tylko ciągły rozwój pozwoli Wam osiągać coraz lepsze wyniki. Być może dziś nie jesteście tak dobrzy, jak byście tego chcieli, ale dopóki prezentujecie poziom wyższy niż wczoraj, możecie mówić o postępach! Byle do przodu. Trzeba uświadomić sobie, że proces tworzenia jest ważniejszy niż dzieło. Jest ono punktem zbiegu setek prostych decyzji oraz pomysłów i  im lepiej powiążesz je ze sobą, tym lepszy będzie efekt. Alexander Charchar urodził się (1985) w Melbourne, w Australii. Ukończył Swinburne University of Technology i nadal poszerza swoją wiedzę. Alexander zajmuje się projektowaniem od dziesięciu lat, jego konikiem jest typografia; najchętniej pracuje nad projektami zrodzonymi z błyskotliwego pomysłu. Wolny czas spędza z żoną, jest właścicielem dwóch psów i zagorzałym miłośnikiem kina, muzyki i książek. Chciałby przekazać Czytelnikom, by w czasie prac nad projektami bawili się jak najlepiej, bo tylko w ten sposób można stworzyć coś naprawdę wielkiego.

Zasady projektowania grafiki doskonałej

45

Tematy poruszane w  tym rozdziale: Dostrzeganie w  projektach tego, co niewidoczne. Projektowanie zgodne z przebiegiem myśli użytkownika. Modele myślenia. Tłoczno czy przejrzyście? Wzory projektów i wskazówki dotyczące interfejsu.

W

dzisiejszych projektach liczą się szczegóły, czyli wszystkie te drobiazgi, które są ważne wyłącznie dla nas. Potrafimy spędzić nad jednym projektem całe miesiące czy nawet lata, poświęcając ten czas na wprowadzanie ledwie dostrzegalnych poprawek w sposobie wyświetlania tekstu lub starając się dostosować do wymagań innego działu albo klienta, który nie uwzględnił potrzeb użytkownika. Spójrzmy prawdzie w oczy — bywa, że cały świat zamyka się nam w jednej stronie internetowej bądź programie komputerowym. Doskonalenie projektów stanowi sens naszego istnienia. Oczywiście każdy z nas jest szczególnie dumny z pewnych wyjątkowo starannie dopracowanych detali projektu, a jako projektanci i twórcy aplikacji, z którymi pracują potem inni ludzie, najczęściej skupiamy się na poprawianiu walorów estetycznych tych programów. Czasami jednak skupiamy się na drobiazgach i  umyka nam szerszy obraz. Często o nim zapominamy. Staje się dla nas niewidoczny. Nieraz nawet nie uświadamiamy sobie, że w projekcie czegoś brakuje, czegoś bardzo istotnego. Gdy projektujemy interfejs aplikacji, staramy się uwzględnić wszystko, co wiemy o użytkowniku, wykorzystać każdy fragment wiedzy na temat użyteczności programu i starannie opracować styl projektu. Jednak dopóki nie stwierdzimy, które z tych rozwiązań sprawdzają się w praktyce, będziemy błąkać się w ciemności i po omacku szukać przełącznika, który pozwoliłby rzucić nieco światła na nasz projekt. Bywa, że w ogóle nie zdajemy sobie sprawy z takiego stanu rzeczy — zbieramy pochwały od szefa, kolegów, nawet od klienta. Jeśli jednak oni też nie zdają sobie sprawy z niedociągnięć naszej pracy, wtedy takie pochwały są nic niewarte. Zatem dopóki nie nauczymy się dostrzegać tego, co niewidoczne w każdym projekcie, nigdy nie osiągniemy statusu wielkiego projektanta. Aby nauczyć się świadomie pracować nad tym, co niewidoczne w każdym projekcie, musimy zacząć spoglądać inaczej na świat wokół nas. Musimy dopuścić do siebie myśl, że to, czego nie widać, jest częścią projektu w  takim samym stopniu, jak to, co widoczne. Projektowanie jest nieodłącznym elementem naszego życia, co dzień mamy z nim do czynienia, w każdej chwili jesteśmy wystawieni na jego wpływ. Książka, którą właśnie czytasz, została zaprojektowana zgodnie z pewnymi wytycznymi i określoną estetyką. Być może już przekartkowałeś ją pobieżnie, by zorientować się, jakich fontów w niej użyto, jakie pojawiają się kolory i jak rozmieszczono treść. Podejrzewamy jednak, że nie zwróciłeś baczniejszej uwagi na rozmiar kartki i sposób szycia, a przecież obydwa te szczegóły są niezwykle ważnymi elementami projektu, jakim jest każda książka.

48

Widoczne kontra niewidoczne

Dla mnie dobry projekt to taki, w którym projektowanie ograniczono do minimum. Dieter Ram

Próba zdefiniowania, czym jest projekt, jest z góry niemal skazana na porażkę, ponieważ ociera się o bardzo subiektywne doznania. Czasami jest to wyłącznie abstrakcyjna idea, czasami natomiast chodzi o coś tak namacalnego, jak wynik naszej pracy. Okazuje się zatem, że projekt jest pojęciem tak ogólnym, jak to tylko możliwe, a jego definicja pozostaje w ścisłym związku z dziedziną, w jakiej jest opracowywany. Przykładowo projektantka mody będzie brać pod uwagę właściwości tkaniny i postara się wyraźnie zaznaczyć swoją indywidualność na tle innych projektantów, natomiast projektant wnętrz postara się przede wszystkim stworzyć wygodne środowisko, które pozostanie w harmonii z gustem właściciela domu i jego upodobaniami37. Podstawy pracy nad widzialną warstwą projektu w programach typu Photoshop zostały omówione szczegółowo w wielu książkach i jeszcze większej liczbie artykułów dostępnych w internecie. Zgodnie z nimi projekt to w zasadzie wyłącznie to, co na nim widać, zatem projektowanie jest wizualnym środkiem przekazu ocierającym się mocno o sztukę. A przecież istnieją też niewidzialne formy projektowania i z pewnością można wymienić ich kilka. Weźmy na przykład kieszeń w jeansach. Ma określony kształt i wielkość. Nikt nie zastanawia się nad tymi sprawami, dopóki nie spróbuje schować w niej portfela, a kieszeń okazuje się za mała — a może portfel zbyt wielki. W takim przypadku od razu nasuwa się myśl, że z jakichś przyczyn jedna ze stron wyłamała się z powszechnie obowiązujących ram. Podobnie ma się sprawa projektowania aplikacji internetowych — nigdy nie zaczynamy (i słusznie!) zupełnie od zera. Zawsze odwołujemy się do pewnych wzorów, a to oznacza, że musimy dobrze znać ich ograniczenia. Tylko w ten sposób będziemy mogli opracować skuteczne rozwiązania i zadbać o wygodę pracy. Gdy pojawia się pokusa zejścia z dobrze znanej ścieżki, należy zastanowić się, na jakie konsekwencje narazimy tym samym użytkownika. Czy złamanie tej konkretnej zasady wywoła skutki na miarę zaprojektowania portfela, który nie pasuje do milionów jeansów na świecie? Poza tym jak przedstawia się kwestia estetyki niewidzialnych fragmentów projektu? W tym rozdziale spróbujemy określić punkt równowagi pomiędzy widocznymi i niewidocznymi częściami naszych prac. Osiągnięcie harmonii pozwoli nam tworzyć wygodne i pełne interfejsy stron oraz aplikacji internetowych.

37 J. Heskett, Toothpicks and Logos: Design in Everyday Life, Oxford University Press 2003. Widoczne kontra niewidoczne

49

Zobaczyć niewidoczne Dobrze zrealizowany projekt staje się niewidoczny. Dostrzegamy go wyłącznie wtedy, gdy wykonanie schodzi poniżej pewnego poziomu. Jared Spool

Wydaje się, że określanie projektu mianem „niewidocznego” kłóci się z  samą jego naturą. Przecież projekty graficzne są potężnym medium wizualnym. Do tego każdy projekt, który pozwala użytkownikom na interakcję, jest znacznie bardziej złożony niż zwyczajna grafika. Interfejs aplikacji to coś więcej niż zwykły obraz — to narzędzie, którego ktoś będzie używał. Większość odwiedzających strony internetowe nie wchodzi tam, by zachwycać się projektem graficznym (chyba że są projektantami). Zazwyczaj mają określone oczekiwania i  przyświecają im konkretne cele. Jeśli nie mogą zrealizować ich natychmiast — w przypadku strony jest to zaledwie kilka sekund — odchodzą. Dlatego projekt musi oferować prosty sposób uzyskiwania cennych informacji oraz wzbudzić zainteresowanie u odwiedzających, tak by zapragnęli pozostać w serwisie na dłużej i zgłębić jego tajniki38. Głównym problemem w tym przypadku jest niewłaściwe postrzeganie roli projektu — większość klientów zakłada,

Strona sklepu Burton Snowboards to przykład doskonałego rozwiązania. Poruszanie się po niej jest wygodne i sprawia dużo przyjemności, a sam układ nawigacji jest jasny i dobrze przemyślany. Wszystko — projekt i zawartość — buduje w znacznym stopniu markę firmy (http://global.burton.com) 38 A. Cooper, About Face 3: The Essentials od Interaction Design, Wiley 2007. 50

Widoczne kontra niewidoczne

że zadaniem projektanta jest opracowanie wyłącznie „wierzchniej” warstwy strony. Żądają, by projekt „przyciągał wzrok” i nic więcej. A przecież projekt sięga znacznie głębiej. Mówi się, że w projektach interaktywnych forma spotyka się z funkcjonalnością. Istota niewidocznych fragmentów projektu kryje się w obydwu jego aspektach — przemyślanym wyglądzie, który będzie czytelny dla użytkownika, oraz w działaniu w sposób intuicyjny dla człowieka. Aby zrozumieć ideę tego rodzaju projektowania, musimy poznać dzieje ewolucji człowieka. Słowo „intuicyjny” pojawia się bardzo często w kontekście interfejsów użytkownika — „To działanie nie jest intuicyjne” czy „Praca z tą aplikacją jest wyjątkowo intuicyjna”. Wypowiadając tego typu zdania, mamy zazwyczaj na myśli „łatwy do opanowania, przyjemny w obsłudze”. Stąd można wyprowadzić twierdzenie, że idealny interfejs to interfejs intuicyjny, a nawet niezauważalny. Chodzi o mechanizmy podobne do tych, które każą nam interpretować każde czerwone światło z sygnałem dźwiękowym jako formę alarmu ostrzegawczego. Oczywiście jego dokładne znaczenie będzie zależeć od kontekstu. Reguły projektowania zmieniały się razem z nami. Niegdyś polegaliśmy wyłącznie na własnym ciele, później zaczęliśmy wykorzystywać otaczające nas przedmioty. Weźmy czynność tak prostą jak picie wody. Początkowo nabieraliśmy ją w złączone w miskę dłonie. Z czasem odkryliśmy, że muszla ma podobny kształt, a do tego jest trwała i nie przepuszcza wody, więc korzystanie z niej stało się usprawnieniem. Jeszcze później zaczęliśmy zmieniać przedmioty, by odpowiadały naszym potrzebom. Zaczęliśmy projektować i wykonywać narzędzia, tak by pracowało się nimi wygodniej niż tym, co oferował nam otaczający świat. Tworzyliśmy nie tylko fizycznie, nie tylko przedmioty (projekty widzialne) — młotki czy dłuta — lecz także narzędzia abstrakcyjne (niewidoczne), na przykład język. Umiejętność przypisywania znaczeń dźwiękom i graficznym wyobrażeniom oraz zdolność wyrażania złożonych myśli to przykład jednego z ważniejszych dokonań rodzaju ludzkiego. To „narzędzie umysłu” pozwala nam przedstawiać idee, dzielić się wiedzą i zachowywać ją dla przyszłych pokoleń39. Na przestrzeni dziejów zatraciliśmy świadomość zmian zachodzących w różnego rodzaju projektach. Pisanie e-maili jest dla nas czynnością naturalną, której nie poświęcamy nawet chwili namysłu. Nie zastanawiamy się nad zasadami gramatyki, nad korzeniami używanych słów. Rozwój bardziej namacalnych projektów pozostaje równie niewidoczny. Mało kto, pijąc poranną kawę, zastanawia się nad kształtem uszka filiżanki czy właściwościami szkliwa. Nikt z  nas nie rozważa tego projektu w kategoriach estetyki. Umieszczamy go niemalże poza pojęciami formy i funkcji. Filiżanka do kawy stała się przedmiotem tak powszechnym, że z  łatwością przyj39 J. Heskett, Toothpicks and Logos: Design in Everyday Life, Oxford University Press 2003. Widoczne kontra niewidoczne

51

mujemy jej istnienie w tym kształcie od powstania świata. Zauważylibyśmy zmianę dopiero wtedy, gdyby dotknęła ona znanego nam wzoru — na przykład gdyby uszko zostało umieszczone przy filiżance „do góry nogami”. Nasze dzisiejsze pomysły staną się niewidzialne dla przyszłych pokoleń. Projektowanie na potrzeby internetu ma stosunkowo krótkie tradycje, proces wykształcania wygodnych aplikacji i stron dopiero się rozpoczął. Każdy projektant zajmujący się tą dziedziną czuje, że nadal działa na nowym polu, że na zlecenie klienta tworzy projekty nowe, oryginalne, że może wyróżnić je na tle innych dostępnych rozwiązań. To połączenie — brak dojrzałości branży, brak ścisłych wytycznych i często niezrozumienie istniejących wskazówek oraz naciski ze strony klientów, którzy żądają kreatywnych rozwiązań — bardzo często rodzi wyjątkowo kiepskie projekty. Niektóre z zasad stosowanych w czasie projektowania stron internetowych wywodzą się sprzed okresu tak wielkiej popularności rozwiązań sieciowych. Stosujemy rozwiązania typowe dla interakcji człowieka z komputerem (HCI — ang. human-computer interaction) czy grafiki użytkowej. Staramy się pamiętać o odczuciach użytkownika w  czasie pracy z  aplikacjami (UX — ang. user experience) i  o  jego oczekiwaniach względem pewnych wzorców zachowań. Skoro odkryliśmy niewidzialną warstwę każdego projektu, powinniśmy powrócić do rozważań nad warstwą widzialną. Projekty wywołujące reakcje emocjonalne i  kształtujące zachowania różnią się niezaprzeczalnie od prac, które utrudniają życie użytkownika.

Twarzą w twarz z interfejsem Gdy spotykasz kogoś po raz pierwszy w życiu, starasz się wywrzeć jak najlepsze wrażenie. W  przypadku aplikacji internetowej owo wrażenie jest jeszcze istotniejszym czynnikiem. Kilka pierwszych sekund badania interfejsu, kilka pierwszych minut kontaktu z aplikacją ma znaczący wpływ na ocenę programu i firmy go wydającej w oczach użytkownika. Większość przedsiębiorstw poświęca mnóstwo czasu i pieniędzy na zbudowanie marki i właściwej identyfikacji graficznej. Z czasem marka sama staje się majątkiem firmy i jej wyznacznikiem na tle znaków konkurencji. Wprawdzie powszechną praktyką jest umieszczanie znaków firmowych wszędzie, gdzie to jest możliwe, należy zawsze zastanowić się nad konsekwencjami, jakie pojawią się w dalszej przyszłości. Jeżeli umieszczenie w projekcie znaków graficznych firmy zaciemni interfejs i utrudni jego obsługę, należy z nich zrezygnować, ponieważ przyniosą one więcej szkód niż korzyści dla całej marki40. Sprawy powinny być tak proste, jak to możliwe, ale ani odrobinę bardziej. Albert Einstein 40 A. Cooper, About Face 3: The Essentials of Interaction Design, Wiley 2007. 52

Widoczne kontra niewidoczne

Jeżeli marzy Ci się interfejs, który nie będzie utrudniać użytkownikowi wykonywania jego zadań, nie zapominaj o prostocie — w ten sposób znacznie zwiększysz komfort pracy z aplikacją. Oczywiście prostota nie jest rozwiązaniem absolutnym. W czasie tworzenia projektu interfejsu czy podczas rozważań na temat komfortu pracy istotny jest sam użytkownik. Piękno zacytowanych wcześniej słów Einsteina kryje się w wyrażeniu „ale ani odrobinę bardziej”. Urządzenie, które będzie wyświetlać informacje o stanie zdrowia pacjenta, ma być czytelne dla lekarza, a nie uproszczone do granic możliwości wyłącznie w imię idei prostoty. Muszą znaleźć się na nim wszystkie niezbędne informacje, nawet jeśli będzie to oznaczać, że przeciętny człowiek uzna taki ekran za nieczytelny — ważne, by lekarz znalazł tam wszystko, czego może potrzebować. Czasami przecenia się prostotę. Ludzie chcą, by ich nabytki miały duże możliwości i  oferowały wiele funkcji. Każdy z  nas bez namysłu wybrałby szczegółowy pejzaż przedstawiający zachód słońca — kompozycję wielu barw, gry światła, cieni chmur — a  nie zwykły obraz pustego nieba. W  czasie zakupów szczegółowo porównujemy możliwości przedstawionych ofert, decydując się zazwyczaj na tę, która zawiera więcej interesujących nas opcji. W niektórych kulturach istnieje wręcz tendencja faworyzowania bardziej złożonych rozwiązań. Nie wszystko, co złożone, musi być jednocześnie nieczytelne. Czytelność rozwiązania oceni dopiero użytkownik, zazwyczaj poprzez pryzmat swojej wiedzy. Kokpit w samolocie nie zdeprymuje pilota, ale osobie postronnej wyda się nieczytelny i przytłaczający. Prostotę często myli się z łatwością używania. To, czy interfejs witryny zostanie uznany za prosty, czy skomplikowany, zależy przede wszystkim od użytkownika41. Próba osiągnięcia projektu, który byłby niewidoczny dla odbiorcy, nie oznacza, że należy pomijać aspekt wizualny prac (określany czasami mianem uczty dla oczu). Chodzi jedynie o  zachowanie pewnego umiaru. Badania wykazały, że interfejsy atrakcyjniejsze dla oka są automatycznie postrzegane jako przystępniejsze w użyciu42. Zrozumienie potrzeb użytkownika i  zorganizowanie jego przestrzeni pracy w  taki sposób, by mógł łatwo osiągać zamierzone cele, jest bardzo ważne, warto jednak pamiętać, że wszystkie nasze wysiłki pójdą na marne, jeśli nie umieścimy tych błyskotliwych rozwiązań w przyjemnym dla oka otoczeniu. Projektowanie interfejsu wymaga zrozumienia wielu powiązanych ze sobą dziedzin, w  tym także zasad dotyczących pracy z mediami wizualnymi. Prawdziwy profesjonalista zajmujący się projektowaniem czy sztukami wizualnymi powinien znać podstawy pracy z kolorem, zasady kompozycji i kontrastu, czyli wszystko to, co niezbędne, by pracować z  obrazem. Warto też pamiętać, że choć i sztuka, i projektowanie odwołują się silnie do warstwy wizualnej pracy, tak napraw41 T. Harris, How Plasma Displays Work, http://electronics.howstuffworks.com/plasma-display.htm. 42 N. Tractinsky, Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues, , marzec 1997, http://www.sigchi.org/chi97/proceedings/paper/nt.htm. Widoczne kontra niewidoczne

53

dę nie mają ze sobą wiele wspólnego. Sztuka to przede wszystkim metoda wyrażania siebie i sposób na wywoływanie doznań estetycznych. Projektant musi pamiętać, że jego prace są adresowane do innych ludzi, zatem muszą przekazywać konkretne informacje lub odpowiadać na potrzeby użytkowników43. Zarówno graficy, jak i projektanci aplikacji internetowych wiedzą, w jaki sposób należy tworzyć witryny internetowe. Różni ich rodzaj przekazywanych w  ten sposób idei. Grafik będzie starał się osiągnąć wskazany cel biznesowy, wywołując instynktowne reakcje odbiorcy i  komunikując swoją pracą określony przekaz, natomiast programista skupi się na zbudowaniu programu czy strony w taki sposób, by wywołać u użytkownika potrzebę wykonania złożonych działań i zaprezentować mu strukturę aplikacji. Obydwa aspekty pracy nad projektem są niezmiernie ważne, zatem interfejs powinien stanowić połączenie rozwiązań promujących markę oraz ułatwiających użytkownikowi osiągnięcie wyznaczonych celów.

Strona główna serwisu Brooklyn Fare silnie promuje markę sklepu, co znajduje swoje odbicie w intensywnym wykorzystaniu określonych stylów oraz doborze ikonografii. Projektant zdołał osiągnąć wyznaczone cele marketingowe bez przytłaczania odbiorcy tym przekazem. Rozłożenie elementów na stronie nie pozostawia miejsca na wątpliwości, a wszystkie informacje, których mógłby potrzebować użytkownik, są łatwo dostępne. Wyraźne, niepozowane zdjęcie podkreśla wagę przywiązywaną do spraw ludzi (http://www.brooklynfare.com)

ewolucja zamiast rewolucji Rozmyślania na tematy związane z projektowaniem i tworzeniem stron internetowych i aplikacji zajmują nam wiele czasu. Policz, ile czasu poświęcasz dopracowaniu jednego tylko szczegółu projektu, i pomnóż go przez liczbę sprawdzonych ścieżek. 43 A. Cooper, About Face 3: The Essentials of Interaction Design, Wiley 2007. 54

Widoczne kontra niewidoczne

Między projektantem a  jego dziełem bardzo szybko tworzy się niemalże intymna więź, szczególnie jeśli poświęca swoją uwagę jednemu projektowi przez kilka miesięcy czy nawet lat. To nic dziwnego ani nic złego, ale warto pamiętać, że tego rodzaju praca to tysiące godzin naszego życia. W tym czasie jesteśmy wystawieni na działanie różnych projektów spotykanych w galeriach, pozostajemy pod wpływem nowych technologii i rozwiązań naszej branży. To zupełnie naturalne, że z  czasem zaczynamy szukać nowych pomysłów, nie bacząc na to, że ich wdrożenie może wymagać zmiany dotychczasowych koncepcji, zaprojektowania ich w inny sposób, dodania nowych możliwości albo wręcz opracowania całości od zera. Proces ten pojawia się zarówno w zespołach, jak i u projektantów pracujących samodzielnie. Wszystkie tak naturalne i logiczne dla nas zmiany są dla użytkownika prawdziwą rewolucją. Użytkownik ma zazwyczaj do czynienia z niewielkim fragmentem projektowanego programu lub serwisu. Nawet regularnie powracający goście spędzają na stronach internetowych zaledwie kilka minut podczas jednej wizyty. To daje zaledwie kilka godzin w skali roku.

Ponieważ serwis Veer został zaprojektowany z  myślą o  ludziach z  branży, jego twórcy mogli pozwolić sobie na nowatorskie i inspirujące rozwiązania. Równie oczywiste jest położenie nacisku na możliwość wyszukiwania obrazów i fontów, gdyż to właśnie najczęściej sprowadza odwiedzających na stronę serwisu. Z czasem projekt osiągnął kształt, który łączy w sobie te dwa cele (http://www.veer.com)

Widoczne kontra niewidoczne

55

Co ważniejsze, odwiedzający nie otwierają strony internetowej z nadzieją ujrzenia nowego, pięknego projektu. Ich spojrzenie na grafikę różni się od naszego, ich myśli krążą wokół innych spraw, a siedzenie przed komputerem czy używanie swojego smartfona znajduje się daleko na liście ich codziennych zajęć. Wolą poświęcać swój czas rodzinie i  przyjaciołom albo obejrzeć dobry film. Wchodząc na stronę, pragną zrealizować możliwie szybko i skutecznie z góry założony cel. Każdy projekt powinien być jedynie narzędziem w rękach użytkownika, a nie celem samym w sobie. Użytkownik lubi sprawdzone rozwiązania, ponieważ pozwalają mu dotrzeć do tego, czego szuka. Każde kolejne odwiedziny na stronie sprawiają, że porusza się po niej pewniej. Z każdym wejściem sam projekt przestaje być dla niego widoczny. Wystarczy zmienić odrobinę założenia projektu lub choćby jeden jego element, by przekonać się, jak bardzo użytkownicy nienawidzą zmian. Oczywiście nie znaczy to, że nie wolno nam nigdy zmieniać projektu strony. Z pewnością powinniśmy to zrobić, jeżeli okaże się, że praca z nią nastręcza wiele trudności. Jeżeli zostaniemy zasypani stosem skarg, reakcja stanie się niezbędna. Jeśli jednak zamierzasz wprowadzać zmiany, postaraj się, by projekt ewoluował spokojnie w ich kierunku, zamiast wprowadzać rewolucję. Zbuduj najpierw solidny, niezmienny fundament strony lub aplikacji i dopiero na tej podstawie rozwijaj koncepcję projektu. Zmiany są oczywiście nieuniknione. Strony internetowe i przedsiębiorstwa rozwijają się, a klienci zaczynają wymagać wprowadzania nowych możliwości. Istnieją dwa argumenty, które zawsze przemawiają za potrzebą natychmiastowego odświeżenia projektu:

• Niewielka liczba odwiedzin na stronie lub nieduża liczba użytkowników aplikacji mogą przemawiać za potrzebą dokonania gruntownej przebudowy w celu istotnego rozszerzenia grona odbiorców. Wprowadzone zmiany i tak uderzą w stosunkowo niewielką liczbę ludzi.

• Jeżeli ostatnia aktualizacja serwisu miała miejsce wiele lat wcześniej i wyraźnie odczuwa się brak rozwiązań, które w tym czasie stały się już standardem, to nic nie ustrzeże Cię przed wprowadzeniem zmian.

Projektuj zgodnie z tym, co myśli użytkownik Każdy z nas potrafi używać kuchenki gazowej, głównie dlatego, że od lat jesteśmy zaznajomieni z tym urządzeniem. Przez większość naszego życia kuchenka znajdowała się zasięgu naszych rąk. Widywaliśmy innych, jak używają tego narzędzia. Jej „interfejs” jest znajomy i logiczny, zatem korzystanie z kuchenki jest proste i intuicyjne. Najważniejsze jednak jest to, że sterowanie pracą tego urządzenia przebiega zgodnie z naszymi oczekiwaniami. Przekręcenie kurka zgodnie z kierunkiem ruchu wskazówek zegara zwiększa płomień, przekręcenie go w przeciwnym kierunku — zmniejsza. 56

Widoczne kontra niewidoczne

Oczywiście układ sterowania pracą kuchenki jest prosty, ale doskonale ilustruje mechanizm odpowiadający za to, że narzędzia, z których korzystamy na co dzień, stają się dla nas niewidoczne. Dobrze zaprojektowany interfejs pokrywa się z naszymi oczekiwaniami (nie kłóci się z modelem mentalnym). Wydaje się, że osiągnięcie takiego celu powinno być proste, lecz wystarczy przyjrzeć się programom i stronom internetowym, z  którymi mamy do czynienia na co dzień, by przekonać się, jak wiele z nich trzyma się sztywno wytycznych modelu implementacji (nazywanego też czasami modelem systemowym). Takie aplikacje działają w sposób intuicyjny dla programisty, a nie dla użytkownika. To jedna z najczęstszych przyczyn frustracji użytkowników i w ostateczności główny powód odrzucania aplikacji. Właściciel telewizora plazmowego nie musi wiedzieć, że jego ekran składa się z  tysięcy małych punktów fluorescencyjnych, które świecą z  różnym natężeniem i w różnych kolorach w zależności od sygnału wideo44. Znajomość zasad działania telewizora nie wpływa na umiejętność posługiwania się nim. Oznacza to, że szczegóły konstrukcyjne urządzenia powinny zostać ukryte przed użytkownikiem. To właśnie rola projektanta. Powinien on opracować trzeci model, zwany przedstawianym (lub modelem projektanta).

W naszym przypadku modelem przedstawianym jest interfejs aplikacji. Znając z  badań i  testów opinie użytkowników, projektant może opracować odpowiednie rozwiązania. Celem projektu jest możliwie wierne odtworzenie mentalnego modelu strony internetowej lub aplikacji. Dzięki temu praca z nią stanie się znacznie przyjemniejsza i skuteczniejsza, a sam interfejs, dzięki zgodności z oczekiwaniami użytkownika, stanie się niewidoczną częścią zastosowanego rozwiązania.

Tłoczno czy przejrzyście? Skłonność do nadużywania różnorodnych stylów i technik projektowania zawsze prowadzi do opracowania zatłoczonego, zagmatwanego interfejsu. Każdy styl, jaki wpro44 D. Norman, Simplicity is Highly Overrated, w serwisie „jnd.org”, http://www.jnd.org/dn.mss/simplicity_is_highly_overrated.html. Widoczne kontra niewidoczne

57

wadzasz do projektu, powinien pełnić jasno określoną funkcję i współgrać z ogólnymi założeniami projektu strony bądź aplikacji. Styl interfejsu wiąże się bezpośrednio z rolą projektowanej aplikacji, przykładowo w programie o charakterze edukacyjnym czy rozrywkowym można pozwolić sobie na znacznie ciekawsze rozwiązania wizualne niż w edytorze tekstu. Należy przy tym uważać na stosowane rozwiązania interakcyjne, które lekkomyślnie stosowane mogą poważnie zaśmiecić układ interfejsu. Interfejs niewidoczny dla użytkownika charakteryzuje się przede wszystkim intuicyjnymi funkcjami (zgodnymi z modelem mentalnym użytkowników), ale także ograniczeniem do minimum działań niezbędnych do osiągnięcia założonego celu. Użytkownik niechętnie powita konieczność wykonania dodatkowych czynności czy wręcz wykonania działań zupełnie niezwiązanych z jego głównym zadaniem, a niezbędnych do osiągnięcia celu. Pozornie wydaje się, że uniknięcie tego rodzaju pułapki powinno być proste, jednak liczne przykłady stron internetowych i programów komputerowych wskazują na coś zupełnie przeciwnego. Bardzo często okazuje się, że te zbędne z punktu widzenia użytkownika kroki są nieodłączną częścią narzędzi, z jakich korzysta projektant. Warto pamiętać, że każde dodatkowe zadanie daje się we znaki użytkownikowi zarówno w sensie fizycznym, jak i psychicznym45. Posłużmy się przykładem. Pasażer linii lotniczych chcący dostać się do Chicago musi przejść procedurę złożoną z wielu kroków, z których żaden nie przybliża go fizycznie do celu podróży. Musi stać w  kolejce, przejść kontrolę bagażu, wybrać miejsce w samolocie, odebrać bilet, przejść kontrolę osobistą, procedurę wprowadzania na pokład i tak dalej. Przez cały ten czas nie zbliża się fizycznie ani trochę do Chicago. Gdyby chcieć oczyścić procedurę przelotu ze zbędnych kroków, należałoby umieścić pasażera w module żywcem wyjętym z filmu Mucha i przetransportować go do Chicago. Wszystkie utrudnienia i cały tłok określa się czasami mytem projektowym. Wszystko, co nie prowadzi bezpośrednio do osiągnięcia celu, jest zbędnym elementem projektu. Zadaniem projektanta jest połączyć dwa cele — zapewnić odpowiednią komunikację użytkownika z  aplikacją przy jednoczesnym zachowaniu czystości projektu. Każdy, kto korzysta z komputera, wie, o co nam chodzi. System katalogów został zaprojektowany tak, by ułatwić użytkownikom zarządzanie plikami. Niestety, z czasem, gdy ich liczba rośnie, poszczególne pliki giną nam z oczu i bez narzędzi wyszukiwania nie jesteśmy w stanie wskazać ich położenia w systemie. Nawet dostęp do programów staje się utrudniony i bez paska narzędzi umieszczonego na dole ekranu czulibyśmy się zagubieni. Okazuje się, że pokonywanie kolejnych poziomów drzewa katalogów tylko po to, by otworzyć program, jest zbyt pracochłonne. 45 A. Cooper, About Face 3: The Essentials of Interaction Design, Wiley 2007. 58

Widoczne kontra niewidoczne

oczyszczanie interfejsu Bałagan w interfejsie (myto) może przyjmować różne postaci. Przyjrzyjmy się najczęściej spotykanym przypadłościom i zastanówmy się, jak wpływają na komfort pracy z aplikacją. P R Z e P ły W

Przepływ to ścieżka, którą pokonuje użytkownik, by wykonać określone zadanie w programie lub na stronie. W miarę możliwości nic nie powinno zakłócać przepływu. Na przykład nie żądaj od użytkownika zamykania okna z informacją, że plik został zapisany czy że wiadomość została wysłana, po każdym wykonaniu takiego działania. Wystarczy, że wyświetlisz tę informację w nakładce, która sama zniknie po krótkiej chwili. oDPoWieDNi TReNiNG

Użytkownik, który ma do czynienia z  aplikacją po raz pierwszy, powinien zostać wprowadzony w tajniki pracy z nią stopniowo. Proces ten określa się czasami mianem wdrażania. Dobrze zaplanowane rozwiązania mogą przeprowadzić użytkownika przez najważniejsze etapy pracy z  aplikacją, lecz jeśli przeciągniesz trening ponad miarę, zamiast ułatwić pracę z programem, stanie się on jedynie przyczyną frustracji osoby, która zna już względnie program i nie potrzebuje dalszej pomocy tego typu. Dlatego zawsze należy zadbać o mechanizm wyłączania trybu szkoleniowego. Pamiętaj, że żaden żółtodziób nie pozostaje nim wiecznie. R a Z W   Z U P e ł N o ś C i W yS Ta R C Z y

Jeśli tylko możesz tego uniknąć, nie zmuszaj użytkownika do powtarzania wykonywanych czynności. Na przykład ogranicz wprowadzanie adresu do jednego formularza. Jeśli adres będzie Ci potrzebny dalej w części aplikacji odpowiedzialnej za obciążanie rachunku, skorzystaj z wprowadzonych poprzednio danych. Coraz częściej spotyka się rozwiązanie pozwalające użytkownikowi pozostać zalogowanym w serwisie przez jakiś czas (najczęściej jest to pole wyboru „Zapamiętaj mnie”), dzięki czemu nie musi on co chwilę podawać swojego imienia czy nazwy konta. P R Z e J R Z yS Ta N aW i G aC J a

Stosowanie ikon, które wyjaśniałyby abstrakcyjne idee kryjące się za różnymi narzędziami dostępnymi na stronie, to doskonała metoda odwoływania się do sposobu myślenia użytkownika. Jednak należy zachować przy tym daleko idącą ostrożność, ponieważ znaczenie danej ikony może zmieniać się w zależności od kręgu kulturowego, a czasami budzić wątpliwości nawet wewnątrz jednej kultury. Na przykład czy ikona ołówka będzie symbolem pisania nowej wiadomości, czy edytowania starej?

Widoczne kontra niewidoczne

59

Użytkownicy powinni móc bez trudu zrozumieć, za co odpowiada dany przycisk i co stanie się, gdy go użyją. Jeśli wizualna lub symboliczna więź pomiędzy przyciskiem a jego możliwościami nie jest odpowiednio wyraźna, wspomniany wcześniej przepływ ulega zakłóceniu. W takim przypadku użytkownik będzie musiał przeprowadzić eksperyment, by dowiedzieć się, do czego służy dany przycisk. Załóżmy, że użytkownik przegląda wpisy na blogu. W pewnym momencie dociera do odnośników nawigacji — nazwanych „Dalej/Poprzednie” albo „Dalej/Wstecz”. „Poprzednie” może odnosić się do poprzednich stron, na których był, niekoniecznie do dodanych wcześniej wpisów. Tutaj rozsądniej byłoby skorzystać z opisu „Starsze/Nowsze”. N i e P o Z W ó L LU D Z i o M B ł ą D Z i ć

Zadbaj o odpowiednią nawigację na stronie i właściwe znaki orientacyjne dla użytkowników. W  aplikacjach komputerowych spodziewamy się menu oraz nawigacji na górze okna programu. To właśnie menu nawigacyjne pozwala użytkownikom określić, gdzie się znajdują i co mogą osiągnąć. W przypadku witryny internetowej sprawa jest nieco bardziej skomplikowana, ponieważ wszystkie jej strony wyglądają identycznie. Umieść na każdej z nich oznaczenia, dzięki którym użytkownik będzie wiedział, w której części serwisu znajduje się w danym momencie. UPRość STRUkTURę

Większość interfejsów, z  którymi mamy do czynienia w  dzisiejszych czasach, jest stosunkowo prosta — rezygnuje się z  wielostopniowej hierarchii na rzecz jednego poziomu. Samochody przyzwyczaiły nas do przejrzystego układu kierowniczego. Szafy na dokumenty mają tylko jeden poziom katalogowania. W przypadku stron internetowych i aplikacji łatwo wpaść w pułapkę zagnieżdżonych poziomów systemu nawigacji — rozwijanych menu oraz odnośników niższego rzędu, które z łatwością wprowadzą użytkownika w głąb systemu. Programiści lubią stosować menu w postaci drzewa odnośników, lecz takie rozwiązanie tworzy zbędny tłok i jest odzwierciedleniem procesu powstawania projektu, a nie odbiciem sposobu myślenia użytkownika. Staraj się unikać umieszczania treści czy narzędzi sterowania serwisem głęboko w  jego wnętrzu, by nie zmuszać użytkownika do żmudnego przebijania się przez układ nawigacji. Jeśli nie musisz, nie udostępniaj zaawansowanych opcji, z których skorzysta i tak tylko nieliczny odsetek wysoce wyspecjalizowanych użytkowników. PoD Ręką

Elementy nawigacyjne, informacje oraz najczęściej używane narzędzia powinny znaleźć się w odpowiednich miejscach ekranu. Funkcje, z  których korzysta się sporadycznie, powinny trafić głębiej, by nie zaśmiecać interfejsu. Pamiętaj jednak, by nie

60

Widoczne kontra niewidoczne

usuwać ich całkowicie. Ta zasada projektowania wiąże się z dwoma ważnymi koncepcjami budowy interfejsu:

• „Sąsiadujące przestrzennie” elementy strony zostają umieszczone na jednym ekranie. Takie rozwiązanie daje użytkownikowi natychmiastowy dostęp do wszystkich potrzebnych informacji oraz często używanych narzędzi. Jednocześnie rozwiązanie to pozwala uniknąć przechodzenia pomiędzy ekranami, czyli pozwala uprościć interfejs.

• „Zamrożone w  czasie” elementy zostają rozmieszczone na kilku warstwach przypominających układem kolejne strony w książce. Ponieważ ścieżka nawigacji jest wyjątkowo prosta, użytkownik ma niewielkie szanse popełnienia błędu w czasie wybierania opcji. Dodatkową zaletą tego rozwiązania jest uzyskanie większej przestrzeni dla jednej opcji.

Zastanów się spokojnie nad zaproponowanymi tu rozwiązaniami. Jeśli nie przedstawisz wystarczająco jasno funkcji nawigacji i  sterowania serwisem lub umieścisz jego zawartość na zbyt wielu warstwach, znacznie wydłużysz czas potrzebny na dotarcie do wybranego fragmentu strony i narazisz użytkownika na większy wysiłek. Zagadnienia te stają się szczególnie istotne w przypadku opracowywania rozwiązań z myślą o telefonach komórkowych. W takim przypadku lepiej jest umieszczać informacje sąsiadująco przestrzennie, niż zamrażać je w czasie, gdyż to drugie rozwiązanie rodzi poważne ryzyko zagubienia się użytkownika w gąszczu kolejnych ekranów46.

Wzorce projektowania Całe nasze życie to wzorce. Wzorce występujące w naturze pozwalały ludziom polować, uprawiać rolę, w efekcie umożliwiając przetrwanie. Dziś już ich nie dostrzegamy, lecz nadal są obecne. To one definiują nasze przewidywania. Gdy słyszymy grzmot, spodziewamy się burzy. Idąc dalej tym tokiem myślenia, można stwierdzić, że aplikacja, która cieszy się opinią intuicyjnej, została zaprojektowana z uwzględ46 E. Tufte, iPhone Interface Design, http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00036T. Widoczne kontra niewidoczne

61

nieniem odpowiednich wzorców. Dzięki wzorcom można przekazać użytkownikowi nawet bardziej złożone idee bez potrzeby wyjaśniania wszystkiego od podstaw. To one umożliwiają nam przewidywanie i  pozwalają na świadome zachowania. One odróżniają przemyślane projekty od wizualnego szumu47. To, w czym nie dostrzegamy wzorców, wzajemnych powiązań, planowania, nie niesie ze sobą żadnego znaczenia. John Kouwenhoven

Pierwsze chwile pracy nad projektem zawsze rodzą pokusę opracowania czegoś niezwykle oryginalnego, twórczego do granic możliwości. Nasi klienci chcą wybijać się na tle konkurencji, lecz często będą skłaniać się ku rozwiązaniom, jakie stosują ich najwięksi rywale. Wszelkie próby prześcignięcia innego produktu poprzez dodanie nowych funkcji do naszego, poprzez zastosowanie bardziej widowiskowego projektu rodzą się z potrzeby dogodzenia zleceniodawcy i często odbywają się kosztem użytkownika. Tworząc nowe projekty, powinniśmy brać pod uwagę nie tylko cele przyświecające naszemu klientowi, lecz także potrzeby użytkowników. Dopiero wtedy będziemy gotowi do rozpoczęcia poszukiwań najlepszego rozwiązania. Nie powinniśmy rozpoczynać pracy od zera, lecz starać się czerpać ze zbiorowej świadomości odbiorców. Przeciętna aplikacja daje się zawsze przypisać do jednej z ściśle określonych kategorii (według ujęcia przedstawionego przez Billa Scotta i Theresę Neil w książce Designing Web Interfaces: Principles and Patterns for Rich Interactions48).

kreacja „To wzorzec, z którego należy korzystać, gdy chcesz dać ludziom narzędzie pozwalające tworzyć nową treść strony lub modyfikować już istniejącą. Model ten sprawdzi się w serwisach blogowych, zawierających ilustracje, fragmenty kodu, w aplikacjach pozwalających edytować zdjęcia czy tworzyć wykresy”.

Przetwarzanie „To rozwiązanie powinno być stosowane zawsze, gdy użytkownik musi wprowadzać dane w sposób uporządkowany. Sprawdzi się w czasie konfigurowania programów i urządzeń, przeprowadzania instalacji, w formularzach rejestracyjnych, formularzach pozwalających obliczać podatki, w formularzu podliczającym zakupy bądź w rezerwowaniu biletów”. 47 M. Macnab, Decoding Design: Understanding and using Symbols in Visual Communication, How Design Books 2008. 48 B. Scott, T. Neil, Designing Web Interfaces: Principles and Patterns for Rich Interactions, O’Reilly Media 2009. 62

Widoczne kontra niewidoczne

informowanie „Rozwiązanie właściwe dla wszystkich aplikacji wymagających przeglądania danych, porównywania ich lub analizowania. Przykładami mogą być mapy, czytniki wiadomości, panele sterowania, odtwarzacze mediów, sklepy internetowe itp.”. Rysunek umieszczony po prawej stronie przedstawia schematy wzorców spotykanych najczęściej w internecie. Doświadczenie uczy nas, że to właśnie one sprawdzają się najlepiej, gdy trzeba zaprezentować dane czy przedstawić możliwości programu. Wzorce te odcisnęły się tak mocno w  naszych umy- Dzięki uprzejmości Theresy Neil, współautorki „Designing Web słach, że dziś ich obecność Interfaces”, O’Reilly Media 2009 jest dla nas równie naturalna, jak wzorce powielane w naturze albo znaki drogowe. Niewykluczone, że przyszli użytkownicy Twoich aplikacji od lat używają programów, w których zastosowano te rozwiązania. Schematy te to wzorce podstawowych układów strony. Z  powodzeniem mogą stanowić punkt wyjścia do prac nad dowolnym projektem. Gdy zrozumiemy zadania, jakie chce wykonać użytkownik, i  cele, jakie sobie stawia, będziemy mogli wybrać odpowiedni wzorzec już na samym początku prac nad projektem. Takie podejście ogranicza nasze możliwości do stosowania powszechnie rozpoznawalnych wzorów. Jeżeli projektujesz portal dla aplikacji sieciowej, każde odstępstwo od ogólnie akceptowanych form może stać się przyczyną klęski marketingowej tej aplikacji. Oczywiście nie znaczy to, że wszystkie portale muszą wyglądać identycznie, ale warto trzymać się rozwiązań znanych użytkownikom. W ograniczeniach kryje się prawdziwa potęga. Ograniczenia umożliwiają nam, projektantom, koncentrowanie się na Widoczne kontra niewidoczne

63

istocie projektu i chronią nas przed umieszczaniem w nim zbyt wielu opcji. Dobranie odpowiedniego wzorca pozwala skupić się na dopracowaniu szczegółów i  daje możliwość poświęcenia swojej uwagi na wykonanie projektu możliwie najlepszego dla użytkownika.

Strona StackExchange została zbudowana na bazie modelu przeglądania przedstawionego schematycznie na rysunku ze strony 65. Taki wzorzec doskonale odpowiada prezentowanej za jego pomocą treści (http:// webapps. stackexchange.com)

Urzeczywistnianie projektu Ostatnio modne jest tworzenie hiperrealistycznych interfejsów, a czasami wręcz dbanie o to, by poszczególne elementy działały w sposób możliwie bliski ich rzeczywistym odpowiednikom. Przedsiębiorstwa takie jak Apple nie tylko stosują tego typu rozwiązania we własnych aplikacjach, lecz także zalecają używanie ich wszystkim, którzy tworzą projekty z myślą o ich urządzeniach (na przykład iPad)49. Wykorzystywanie metafor w interfejsie użytkownika pozwala osobie obsługującej aplikację czy urządzenie szybciej opanować zasady pracy. Najsłynniejszą metaforą, jaka pojawiła się w  komputerze, jest pulpit systemu. Po raz pierwszy zastosowano go w komputerach Apple Macintosh, których graficzny interfejs użytkownika (GUI) był wzorowany na wczesnych, z  połowy lat siedemdziesiątych, projektach firmy Xerox. Ikony katalogów — teczki — kosz na śmieci czy pliki kartek papieru były tak znanymi z codziennego życia obrazami, że użytkownicy bez trudu pojęli ich przeznaczenie, gdy pojawiły się w komputerze. Były znacznie bardziej intuicyjne niż polecenia, którymi sprawnie posługiwali się jedynie zaawansowani użytkownicy komputerów. Przeciętny 49 Apple, Apple Human Interface Guidelines, http://developer.apple.com/library/ios/#documentation/General/Conceptual/iPadHIG/iPadHIG.pdf. 64

Widoczne kontra niewidoczne

człowiek doskonale wiedział, do czego służy kosz na śmieci, więc logicznie zakładał, że aplikacja oznaczona taką ikoną będzie odgrywać podobną rolę w komputerze50. Dodatkową zaletą stosowania tekstur i kształtów znanych nam z życia jest uatrakcyjnienie pracy z aplikacją, która sama w sobie nie daje specjalnej rozrywki. Przykładowo dodanie obramowania imitującego skórę oraz graficznego szwu mogłoby znacznie uatrakcyjnić zwykły notatnik znany z wielu systemów operacyjnych. Takie działania zazwyczaj zwiększają też sprzedaż produktu. Interfejs jest bardzo często jedynym „opakowaniem”, z jakim ma do czynienia użytkownik szukający dla siebie odpowiedniej aplikacji. Gdyby kazać mu wybierać spośród kilku dostępnych na rynku programów, niewykluczone, że zdecydowałby się właśnie na ten, który najbardziej przypomina mu notatniki widywane na żywo, ten, który szczegółowo ozdobiono. Aplikacje w dzisiejszych czasach nie tylko wyglądają realistycznie, lecz także zachowują się jak znane nam przedmioty. Jeżeli jakiś program imituje swoim wyglądem przedmiot z naszego otoczenia, to w naturalny sposób oczekujemy, że będzie zachowywać się podobnie. Dla użytkownika, który korzysta z przypominającego książkę czytnika (na przykład eReader) i muśnięciem palcami po ekranie przewraca kolejne karty, zagięcie „strony” i jej ruch na ekranie są czymś zupełnie naturalnym. Użytkownik wie przecież, w jaki sposób „działa” prawdziwa książka, więc bez trudu przenosi

Flipboard to aplikacja przeznaczona dla urządzeń typu iPad. Pozwala zmienić wygląd stron portali społecznościowych (Facebook, Twitter itp.) w układ przypominający kolorowe czasopismo. Znajomy układ elementów ułatwia nawigację, a metaforyczne odwracanie strony powoduje uruchomienie ciekawie wyglądającej animacji (http://www.flipboard.com) 50 http://en.wikipedia.org/wiki/Graphical_user_interface. Widoczne kontra niewidoczne

65

swoje zachowania na pracę z  aplikacją. Interfejs programu staje się dla niego niewidoczny, ponieważ wiedza na temat konstrukcji książki jest głęboko zakorzeniona w jego umyśle. Niestety, te same metafory bywają źródłem wielu problemów. Niejednokrotnie okazuje się, że mocno ograniczają możliwości aplikacji, gdy ta stanie się tylko nieco bardziej skomplikowana. Musisz liczyć się z tym, że wybierając określoną metaforę, skazujesz się jednocześnie na tworzenie dziwnych funkcji strony czy aplikacji, wynikających właśnie z charakteru przenośni, z której skorzystałeś. Jeżeli na przykład zawartość prezentowana w interfejsie udającym strony książki rozrośnie się zbytnio, będziesz musiał umieścić na bokach tych stron paski przewijania, co zupełnie nie pokrywa się z naszym wyobrażeniem o książkach, a tym samym niszczy metaforyczny układ interfejsu51. Bardzo szczegółowe, wyraźne tekstury i daleko posunięty realizm mogą sprawić, że interfejs przestanie być czytelny, a użytkownik będzie musiał zastanawiać się, które z elementów strony lub aplikacji są aktywne i co zrobić, by osiągnąć zamierzony cel.

Writer to edytor tekstu przeznaczony dla urządzeń iPad. Autorzy aplikacji zrezygnowali w niej z wielu stosowanych powszechnie metafor i daleko posuniętego realizmu, wychodząc z założenia, że odwraca on uwagę użytkownika od pisania. Z programu usunięto popularne w innych tego typu aplikacjach funkcje, takie jak sprawdzanie pisowni, zmiana kroju pisma czy jego rozmiaru, uznając, że rozpraszają one uwagę osoby piszącej. W efekcie otrzymaliśmy elegancki i wydajny interfejs (http://informationarchitects.ch)

51 O. Reichenstein, Designing for iPad: Reality Check, 12 czerwca 2010, http://www.informationarchitects.jp/en/designing-for-ipad-reality-check. 66

Widoczne kontra niewidoczne

O interaktywnych elementach strony, które użytkownik potrafi wskazać bez większych trudności, mówi się, że mają wysoką afordancję52. Przeciętny internauta bądź użytkownik aplikacji komputerowych wie, jaką funkcję pełni przycisk. Projektując interfejs, możemy dać mu do zrozumienia, że przycisk jest elementem, który należy kliknąć — służy temu subtelne cieniowanie, które nadaje przyciskowi trójwymiarowy wygląd, czy odpowiednio żywy kolor. Afordancja wizualna informuje o przeznaczeniu przycisku czy dowolnego innego elementu interfejsu. Jeśli jednak wszystkie elementy interfejsu wydają się trójwymiarowe, wszystkie są bardzo mocno zaznaczone, wtedy wybranie spośród nich tych, z którymi można oddziaływać, staje się zadaniem trudnym. Mówiąc krótko, użytkownik nie wie, gdzie ma klikać. Nie staraj się tworzyć metafor na siłę, gdyż w ten sposób jedynie utkniesz w ograniczeniach narzuconych przez formę i sprawisz, że interfejs aplikacji stanie się nieczytelny. Nadmiar elementów wywoła wyłącznie frustrację u użytkownika, nie poprawiając wcale komfortu jego pracy z programem. Dlatego najważniejsze jest, by przewidzieć, w jaki sposób użytkownik będzie odbierać pracę z aplikacją po pewnym czasie.

Jak zaprojektować dobry interfejs? Oto kilka ogólnych rad dotyczących projektowania interfejsu53:

• Postaraj się zrównoważyć styl i funkcjonalność interfejsu z celem jego tworzenia. Unikaj pustej formy.

• Grupuj elementy tak, by tworzyć widoczną hierarchię. Staraj się kierować przepływem na każdej warstwie w  taki sposób, by nie zakłócać naturalnej struktury projektu.

• Zachowaj spójność. Jeżeli użytkownik pozna jeden rodzaj pracy z interfejsem czy funkcję wybranego elementu, pozwól mu przenieść tę wiedzę na inne elementy (to tak zwane dziedziczenie).

• Nie przytłaczaj użytkownika nadmiarem ozdób. Postaraj się nie nadużywać animacji i głośnych efektów dźwiękowych.

• Wszystkie interaktywne elementy interfejsu powinny różnić się wyraźnie od elementów nieinteraktywnych (afordancja wizualna). Przycisk powinien mieć formę przycisku, a nie zlewać się z otoczeniem.

• Staraj się jak najlepiej wykorzystać możliwości ekranu, by wyróżnić odpowiednio elementy wizualne. Ogranicz liczbę krojów pisma i kolorów, tak by te, które zastosujesz, nie pozostawiały wątpliwości co do wagi sformatowanego za ich pomocą elementu. 52 D. Norman, The Psychology of Everyday Things, Basic Books 1988. 53 A. Cooper, About Face 3: The Essentials of Interaction Design, Wiley 2007. Widoczne kontra niewidoczne

67

• Nie zapominaj o osobach z wadami wzroku — daltonistach czy niedowidzących. Stosuj podkreślenia odnośników i odpowiednie symbole do wyróżniania tekstu.

• Pamiętaj, że wskazówki, które tu podajemy, są tylko wskazówkami. Jeżeli masz inne pomysły i uważasz, że są one lepsze, nie wahaj się wprowadzać ich w życie.

Wnioski Choć projektowanie interakcji ciągle jeszcze raczkuje, zdołaliśmy już opanować całkiem sporo zasad sprawdzających się w tej dziedzinie wiedzy. Komputery i internet przeszły metamorfozę — to nie, jak dotąd, narzędzia używane wyłącznie w biurach. Teraz wszędzie towarzyszą nam smartfony, tablety, wszędzie mamy dostęp do sieci. Cyfrowy świat stał się dla nas wygodnym miejscem spotkań, z łatwością robimy w nim zakupy, szukamy wiadomości — można powiedzieć, że prowadzimy w sieci życie. Dla wielu ludzi projekt to warstwa wyłącznie dekoracyjna. Dla każdego, kto nigdy nie miał styczności z projektowaniem, strona internetowa czy aplikacja, w której udało się połączyć piękno z użytecznością, jest efektem przyjemnego połączenia barw, fontów i grafiki. Wadą takiego myślenia jest zakładanie, że aby znaleźć dobre rozwiązanie, wystarczy rozmieścić wszystkie elementy na dowolnym tle i tak długo zmieniać ich położenie, aż coś zaskoczy. Takie rozumowanie nie tylko umniejsza rolę projektanta, ale jednocześnie stanowi zaprzeczenie wagi lat ćwiczeń i studiów oraz umiejętności niezbędnych do tego, by znaleźć się w punkcie, do którego dotarliśmy54. Dobry projektant umie łączyć widoczne i niewidoczne elementy pracy. To z nich w miejsce mglistych pomysłów, luźnych obrazów i niedokończonych treści powstaje znaczenie i rodzą się emocje. Praca projektanta staje się istotna w momencie, w którym trzeba spojrzeć na te luźne elementy, tak by połączyć je w całość i znaleźć rozwiązanie satysfakcjonujące zarówno dla klienta, jak i dla użytkownika. Rolą projektanta jest przeprowadzić swojego klienta przez ten proces. Dobry projektant ogarnia niuanse technologii, z jaką przyszło mu pracować, potrafi porozumieć się z programistą, dzięki czemu jest w stanie wykreować rozwiązanie wygodne dla użytkownika nienawykłego do pracy w sieci. Im bardziej będziemy wiązać się z internetem przez ekrany, przez zawartość naszych kieszeni, firmowych czy prywatnych, tym ważniejsze będą dla nas niewidoczne aspekty interfejsu. Projekt powinien wskazywać drogę, nadawać sens poprzez ukazanie najlepszych opcji osiągnięcia założonego celu. Projektowanie interakcji nie polega na umieszczaniu wszędzie znaków krzyczących wręcz: „Spójrz na mnie!”. Jego 54 P. Rand, A Designer’s Art, Yale University Press 2000. 68

Widoczne kontra niewidoczne

rola to kierowanie z boku poczynaniami użytkownika, mówienie: „Zrób to”, „Spójrz tam”. Wszystkie te małe znaki mają ogromny wpływ na ludzi oraz świat. Dobry projektant potrafi dostrzec zarówno drzewa, jak i  las. Widzi widoczne i niewidoczne.

o autorze Rozwój osobisty jest cenniejszy niż wszystkie tytuły. Francisco Inchauste (1975) dorastał w stanie Michigan. Swoją karierę zaczynał od przygotowywania projektów na potrzeby druku, z czasem zainteresował się projektowaniem na potrzeby internetu. Dziś nadzoruje tworzenie użytecznych interfejsów programów komputerowych, aplikacji internetowych i  oprogramowania urządzeń przenośnych dla Universal Mind. Jego ulubione połączenie kolorystyczne to #333333 z  #3399CC. Działa zawsze zgodnie ze swoim mottem — „Staraj się wykonywać swoją pracę najlepiej, na miarę swoich możliwości”. Swój wolny czas dzieli między rodzinę, muzykę, dobre kino i bieganie. Raz na jakiś czas lubi napić się dobrego piwa. Chciałby przekazać Czytelnikom jedno — ma nadzieję, że ta książka i napisany przez niego rozdział ułatwią Wam pracę nad następnymi projektami i zainspirują Was do dalszego rozwijania własnych możliwości.

Widoczne kontra niewidoczne

69

Tematy poruszane w tym rozdziale: Programy dedykowane kontra aplikacje internetowe. Projektowanie i  sprzedawanie aplikacji. Właściwości oprogramowania na urządzenia przenośne. Zasady tworzenia dobrych programów. Interfejs użytkownika w aplikacjach na urządzenia przenośne. Wygląd aplikacji dla urządzeń przenośnych.

Nasza przyszłość to urządzenia mobilne

P

od koniec tego miesiąca jakiś programista otrzyma przelew na nieprzyzwoicie wysoką kwotę tylko dlatego, że tysiące nieznanych mu osób kupiło napisaną przez niego aplikację i zainstalowało ją w swoich telefonach komórkowych. Co sprawiło, że program ten stał się tak popularny? Może ludzie przekazywali sobie informacje na jego temat pocztą pantoflową? Może pojawił się na liście najlepszych programów publikowanej na wyjątkowo często odwiedzanym blogu. Powodów może być wiele, lecz z pewnością można stwierdzić, że niemal wszystkie popularne programy łączy jedno — dobry projekt. Nie ogranicza się on wyłącznie do ładnego interfejsu, ciekawego głównego bohatera czy dobrze zaprojektowanej ikony — chodzi o  coś znacznie więcej, o drobiazgowe przeanalizowanie doznań użytkownika w czasie korzystania z programu. Postaw się na miejscu użytkownika, szczególnie jeśli projektujesz oprogramowanie urządzeń przenośnych, a znajdziesz się na najlepszej drodze do opracowania doskonałego programu. Najlepsze aplikacje to te, z  którymi pracuje się wygodnie, ale zaprojektowanie programu, który byłby nie tylko przyjemny w użyciu, lecz także wyglądał ładnie, nie należy do prostych zadań. Opracowanie wyglądu i  zasad działania aplikacji wykorzystywanej przez urządzenie przenośnie wymaga wiedzy z pogranicza kilku dziedzin — projektowania interakcji, grafiki użytkowej, architektury komputerów i ergonomii aplikacji, co nadal nie wyczerpuje listy. Projektant nie może ograniczyć się do wyrzucenia z siebie serii obrazów będących projektami kolejnych widoków ekranu, nie zastanowiwszy się uprzednio nad ogólnym wrażeniem, jakie użytkownik wyniesie z obcowania z aplikacją. Przelotne pomysły, które charakteryzują się brakiem gruntownego przemyślenia zagadnienia, mogą prowadzić jedynie do tragedii. W  przypadku projektowania z myślą o urządzeniach przenośnych trzeba porzucić marzenia o  wybuchowych pomysłach rodem ze sceny rockowej, należy raczej wybrać drogę buddyjskiego mnicha, wyznawcy zen. Postaw się w roli użytkownika, zastanów się, jak będzie postrzegać Twój program, przemyśl dogłębnie wszystkie aspekty projektu, postaraj się spojrzeć na możliwe problemy z każdej strony i nie obawiaj się wprowadzania zmian na żadnym etapie pracy. Komfort pracy użytkownika zależy od wielu czynników, więc nie zapominaj, że wykonanie świetnej aplikacji dla urządzeń przenośnych wymaga nie tylko umiejętności, lecz także odpowiedniego spojrzenia na sprawę.

72

Projektowanie z myślą o urządzeniach przenośnych

Programy dedykowane kontra aplikacje internetowe Każdy programista aplikacji internetowych zna HTML, CSS i  JavaScript i  żaden z nich nie chce porzucać swoich narzędzi pracy, gdy siada do projektu przeznaczonego dla urządzeń przenośnych. Dlaczego programiści mieliby rezygnować z nabywanego latami doświadczenia wyłącznie z powodu zmiany platformy, na jaką zaczynają tworzyć? To przede wszystkim dlatego aplikacje przeznaczone dla urządzeń przenośnych powstają w językach projektowanych z myślą o wykorzystaniu w internecie, zamiast rozwijać się w środowisku dedykowanym dla danego urządzenia. Innym równie ważnym czynnikiem jest przenośność aplikacji. Program napisany w technologii internetowej da się uruchomić na wielu platformach, nie wymagając od programisty wprowadzania zmian. Przeglądarki z rodziny WebKit można zainstalować zarówno w systemie iOS, jak i w systemie Android oraz w każdym innym, jaki spotyka się w  urządzeniach przenośnych. Oznacza to, że aplikacje tworzone w HTML5, CSS3 oraz innych technologiach internetowych uruchomią się w tych środowiskach bez najmniejszych problemów. W  starych przeglądarkach internetowych uzyskanie pewnych efektów wizualnych, na przykład zaokrąglonych rogów, cieni pod grafiką czy tekstem, gradientów barw oraz animacji, było wyjątkowo trudne, o ile nie niemożliwe. W aplikacjach internetowych na urządzeniach przenośnych wszystkie chwyty są dozwolone. Skoro to takie proste, to dlaczego świat nie zrezygnował jeszcze z programów dedykowanych i nie przeniósł się całkowicie na aplikacje internetowe dla urządzeń przenośnych? Cóż, nie wolno nam zapominać o pewnych poważnych niedogodnościach takiego rozwiązania.

•

Trudność w zbudowaniu kanału dystrybucji Koncerny Google i  Apple ułatwiają prowadzenie sprzedaży aplikacji poprzez własne sklepy. Sprzedanie dostępu do aplikacji internetowej przeznaczonej dla urządzeń przenośnych jest znacznie trudniejsze, ponieważ zbudowanie kanału dystrybucji oraz opracowanie metody płatności leży całkowicie po stronie programisty.

•

Trudność w dotarciu do odbiorców Gdy użytkownik telefonu chce kupić nowy program, musi tylko puknąć ekran urządzenia, by połączyć się z  wbudowaną w  system telefonu aplikacją sklepu. W  jednej chwili zyskuje dostęp do tysięcy programów oraz interfejsu, który umożliwia sortowanie ich według rodzajów bądź popularności. Żadna sieć sprzedaży dostępu do aplikacji internetowych nigdy nie będzie tak skuteczna.

Projektowanie z myślą o urządzeniach przenośnych

73

•

Trudności z działaniem Wydajność aplikacji internetowych uruchamianych na urządzeniach przenośnych nie może nawet równać się z  wydajnością programów dedykowanych. Otwieranie strony HTML nie jest nawet w połowie tak szybkie czy skuteczne z punktu widzenia zarządzania pamięcią, jak uruchamianie skompilowanego kodu programu dedykowanego.

•

Brak widżetów Systemy iOS i Android zawierają dziesiątki dodatkowych komponentów dostępnych dla użytkownika. Jeżeli napiszesz własną aplikację internetową i zechcesz zapewnić jej dodatkowe elementy, będziesz musiał napisać je sam. Istnieją wprawdzie szkielety aplikacji internetowych przeznaczone dla urządzeń przenośnych, jednak mają bardzo ograniczone możliwości w porównaniu z ich dedykowanymi konkurentami.

Nawet jeśli masz za sobą lata doświadczeń w pracy nad aplikacjami internetowymi, nie powinieneś wahać się przed spróbowaniem swoich sił z dedykowanym środowiskiem urządzeń przenośnych. Jedne i drugie są do siebie niezwykle podobne, szczególnie w obszarze pracy nad interfejsem użytkownika. Jeśli w ogóle miałbyś decydować się na pracę nad aplikacją internetową w wersji dla urządzeń przenośnych, rób to ze względu na dobro użytkownika, a nie dla własnej wygody.

Projektowanie i sprzedawanie aplikacji Choć urządzenia przenośne mają niewielkie ekrany i ograniczone możliwości, projektowanie aplikacji z myślą o nich nie zalicza się do prostych zadań. Ich tworzenie wymaga znajomości zaawansowanych języków programowania i pracy z bardzo złożonym interfejsem API. Programy dla systemu iOS powstają w Xcode55, środowisku pozwalającym sprawnie pisać i debugować kod. Aplikacje dedykowane dla tego systemu powstają zazwyczaj w  Objective-C, języku programowania obiektowego, pochodnej języka C. Programy przeznaczone do pracy w systemie Android powstają w języku Java, a większość programistów decyduje się na pisanie ich w środowisku Eclipse. Kod aplikacji dla platformy iOS różni się znacznie od kodu aplikacji dla platformy Android, ale pewne paradygmaty są podobne. Programiści piszący kod na jedną z platform potrafią zazwyczaj odczytać i zrozumieć kod przeznaczony na drugą, jednak pełne opanowanie języka zajmuje nieco czasu. Ukończona aplikacja nie pojawia się w magiczny sposób w telefonach użytkowników, należy ją uprzednio pobrać. Rodzi się pytanie, w jaki sposób ludzie pobierają 55 http://developer.apple.com/technologies/tools/whats-new.html. 74

Projektowanie z myślą o urządzeniach przenośnych

programy. To oczywiście zależy od urządzenia przenośnego, kraju, z którego dokonuje się pobierania, oraz kilku innych czynników. Przeciętny użytkownik iOS korzysta w tym celu z App Store firmy Apple, a użytkownik Android posłuży się App Market. Wysyłanie aplikacji na serwery któregokolwiek z tych sklepów jest dość skomplikowane, przy czym w przypadku programów dla iOS jest znacznie bardziej zawiłe. Prawo do wysyłania aplikacji do App Store mają wyłącznie zarejestrowani użytkownicy iOS Developer Program. Uczestnictwo w programie wiąże się z corocznym opłacaniem czesnego w wysokości 99 dolarów. Jednak aby aplikacja trafiła do App Store, musi najpierw uzyskać akceptację Apple. Narzędzia dla programistów (Xcode, Interface Builder, iPhone Simulator, Cocoa Touch API) są udostępniane za darmo, natomiast testowanie programu na prawdziwym urządzeniu i umieszczenie aplikacji w sklepie jest już płatne. Gdy program trafi już do sklepu, autor otrzymuje z każdej kwoty sprzedaży 70%, a Apple pobiera 30%. Podobnie działa program partnerski Google. Środowisko pracy i narzędzia dla programistów są dostępne za darmo, natomiast przy rejestracji konta programisty należy uiścić jednorazową opłatę w wysokości 25 dolarów. Potem można dodawać programy do Android Market. To, co naprawdę odróżnia Android Market od App Store, to dużo mniej rygorystyczne zasady przyjmowania aplikacji do dystrybucji. Google podejmuje się rozprowadzania w zasadzie wszystkiego, co nie jest faktycznie nielegalne. Poza tym użytkownicy urządzeń z systemem Android mogą pobierać aplikacje z każdego innego źródła niż Android Market. Dodatkową zaletą są liczne darmowe projekty realizowane z  myślą o  środowisku Android — jest ich niemal dwukrotnie więcej niż analogicznych rozwiązań dla iOS. Wielu twórców oprogramowania przeznaczonego dla urządzeń z systemem Android decyduje się udostępniać swoje produkty za darmo, ograniczając zyski wyłącznie do wpływów z reklam. Rozwiązanie to jest determinowane znacznie niższym stopniem integracji pionowej, niż ma to miejsce w App Store i iTunes firmy Apple. Kolejnym czynnikiem, który przyciąga nowych twórców do systemu Android, jest wyjątkowo prosty system wdrażania się w środowisko pracy.

Ceny aplikacji dla urządzeń przenośnych i pierwsze wrażenia z pracy Gra Madden Football jest dostępna na niemalże każdą platformę przeznaczoną do tego rodzaju rozrywki, a jej kolejne części pojawiają się bardzo często. Jako jedna z najlepiej sprzedających się gier sportowych w historii musi sprostać wysokim oczekiwaniom miłośników serii. Z każdym rokiem i każdą nową wersją gra staje się coraz bardziej skomplikowana, oferuje nowe tryby rozgrywki, coraz więcej funkcji, opcje gry w sieci, różne formy przyłożenia oraz dziesiątki szczegółów, których znaczenie docenią tylko najzagorzalsi fani tego sportu. Wzrost popularności przełożył się na zwiększenie

Projektowanie z myślą o urządzeniach przenośnych

75

zespołu programistów i  podniesienie budżetu produkcyjnego oraz oczywiście ceny. W tej chwili gra w wersji na najważniejsze konsole kosztuje około 60 dolarów.

Gra Madden uruchomiona w urządzeniu iPad

Ale chwileczkę, co to? Gra Madden 2011 przeznaczona na telefon Apple iPad kosztuje tylko 12 dolarów i 99 centów? Z tą piękną grafiką w wysokiej rozdzielczości? Z niemal wszystkimi trybami gry dostępnymi w wersjach konsolowych? Ze specjalnym sterowaniem przystosowanym do współpracy z dotykowym ekranem urządzenia, w tym z niedostępną nigdzie indziej funkcją „puknij, by podać”? Gra Madden przeznaczona na telefony iPad jest haniebnie tania, mimo że to jedna z bardziej złożonych aplikacji dostępnych w tym środowisku i zdecydowanie jedna z najbardziej zachwycających wizualnie. Jeszcze bardziej zdumiewa fakt, że cena 12 dolarów i 99 centów za aplikację na telefon iPad plasuje grę w czołówce najdroższych programów dostępnych w App Store. Przeciętna aplikacja tworzona z myślą o przenośnych urządzeniach Apple kosztuje nie więcej niż kilka dolarów, a wiele z nich nie osiąga ceny jednego dolara. Jak już wspominaliśmy, odsetek darmowych aplikacji w ofercie jest znacznie wyższy w przypadku urządzeń pracujących z  systemem Android. Ludzie pobierają aplikacje bez chwili namysłu. Darmowe lub sprzedawane za groszowe kwoty programy są wchłaniane przez rynek odbiorców w zastraszającym tempie, a Ty jako ich twórca masz jedynie kilka sekund, by przyciągnąć uwagę potencjalnego nabywcy.

76

Projektowanie z myślą o urządzeniach przenośnych

Co sprawia, że ludzie interesują się daną aplikacją? Piękne zrzuty z ekranu opracowanego w najdrobniejszych szczegółach interfejsu. Nie możesz pozwolić sobie, by ktokolwiek pominął wzrokiem napisany przez Ciebie program. Dopieść szczegóły, spraw, by każdy piksel zrzutu wyglądał perfekcyjnie. Pamiętaj, pierwsze wrażenie wywołuje się tylko raz — szczególnie w App Store.

Pracuj nad stylem projektowania aplikacji dla urządzeń przenośnych Trudno o lepsze czasy dla projektantów i programistów aplikacji dla urządzeń przenośnych. Niemalże każde większe studio zajmujące się produkcją gier czy tworzące autorskie oprogramowanie stara się przenieść swoje produkty na urządzenia przenośne lub dołączyć do oferty program dedykowany specjalnie dla smartfonów. Wszystkie takie studia szukają projektantów, którzy podchodzą do swojej pracy z należytą uwagą i będą w stanie zapewnić odbiorcom jak najlepsze doznania w czasie korzystania z produktu. Każdy z nas znalazłby w swoich doświadczeniach historię o szefie mającym siostrzeńca, który potrafi projektować strony internetowe i  jest gotowy tworzyć aplikacje sieciowe. Wszyscy słyszeliśmy nieraz pytanie: „Dlaczego miałbym Ci za to zapłacić, skoro kuzyn zrobi to za darmo?”. Jeżeli świat aplikacji internetowych stał się dla Ciebie zbyt tłoczny, przenieś swoje zainteresowanie na dziedzinę aplikacji dedykowanych dla urządzeń przenośnych i staraj się rozwijać swój talent w tym kierunku. Dowiedz się, jakimi cechami powinien się charakteryzować dobry program na smartfony, przyjrzyj się projektom najwspanialszych rozwiązań na świecie, postaraj się odtworzyć w projekcie wszystko to, co spodobało Ci się w systemach Android czy iOS. Wreszcie utwórz portfolio projektów aplikacji dla urządzeń przenośnych. Jeżeli interesują Cię duże pieniądze, bierz się do roboty już dziś, by jutro dołączyć do grona najbardziej znanych projektantów. Ta branża ciągle się rozwija i z radością przyjmuje kolejnych adeptów, więc trudno byłoby szukać odpowiedniejszej chwili na wyrobienie własnej marki.

oprogramowanie urządzeń przenośnych jest jedyne w swoim rodzaju (i zupełnie niezrozumiałe dla przeciętnego człowieka) Aplikacje przeznaczone na urządzenia przenośne nie różnią się specjalnie od przeciętnych programów. Kluczem oczywiście jest tu słowo „specjalnie”. Różnice istnieją i są dość znaczące. Po pierwsze, wszystko jest mniejsze — ekrany, ceny, liczba funkcji. Po drugie, w każdym środowisku pracy obowiązują ścisłe zasady projektowania. To dobra wiadomość dla wszystkich, którzy mają już dość ciągłego szukania nowych Projektowanie z myślą o urządzeniach przenośnych

77

trików CSS oraz osobnych rozwiązań dla przeglądarki Internet Explorer. Jeżeli zdecydujesz się na pracę nad aplikacją na urządzenia przenośne, będziesz mieć absolutną kontrolę nad każdym jej pikselem. Wreszcie praca nad takim programem to znacznie większa przygoda niż pisanie kolejnej strony WWW czy nowego programu na komputery stacjonarne. Poszczególne cele osiąga się szybciej, a wczesne modele bądź różnego rodzaju makiety są bliższe ostatecznej wersji programu. Oczywiście to, że praca nad aplikacją jest przyjemniejsza, nie oznacza, że staje się przez to prostsza. Projektowanie interfejsu aplikacji telefonu komórkowego lub innego urządzenia przenośnego to trudne zadanie, ponieważ nie ma w nim miejsca na najmniejszą nawet pomyłkę. Każdy piksel musi znaleźć się dokładnie tam, gdzie go potrzebujesz, każda ikona musi być idealnie rozróżnialna na pierwszy rzut oka, każda metafora musi być jasna i trafna. Czy jesteś gotowy zmierzyć się z takim wyzwaniem?

Programy komputerowe i aplikacje sieciowe to rozmiar XL, aplikacje przenośne to najwyżej M Przypuszczalnie nigdy nie korzystałeś ze wszystkich funkcji programu Adobe Photoshop. Największe spośród wszystkich narzędzi do projektowania grafiki ma przeszło dziesięć menu, a niemal każde z nich zajmuje ponad połowę wysokości ekranu komputera MacBook Pro. Większość składa się z kilku poziomów, można też powiedzieć, że nikt przy zdrowych zmysłach nie podjąłby się zadania oszacowania liczby poszczególnych funkcji pojawiających się w tym kombajnie. Wiele spośród programów komputerowych ma właśnie kształt takich kombajnów oferujących niezliczone funkcje, czasami ukryte do tego stopnia, że mało kto wie o  ich istnieniu. Doskonałym przykładem są programy przeznaczone do tworzenia grafiki trójwymiarowej i  animacji komputerowych — możesz dopieszczać w  nich każde ścięcie, każdy obiekt, teksturę lub animację na niezliczone sposoby. A  co z  programami typu Apple Keynote czy Microsoft Excel? Jak wygląda pakiet Mathematica? Xcode? Gdy pomyślę o milionach linii kodu kryjących się za każdym z nich, o rzeszach programistów zaangażowanych do pracy nad tymi projektami, aż kręci mi się w głowie. Czy sytuacja wygląda inaczej w przypadku aplikacji internetowych oraz popularniejszych serwisów sieciowych? Przypomnij sobie Facebook, Gowallę, Google Docs lub Reddit. Każda z nich to prawdziwy gigant. Być może nie oferują setek funkcji, ale wystarczy poświęcić nieco czasu na poznanie ich możliwości, by przekonać się, jak bardzo są rozbudowane. Aplikacje internetowe i programy komputerowe można porównać do samochodów klasy SUV, natomiast oprogramowanie urządzeń przenośnych do samochodów sportowych Lotus Elise — szybkich, niewielkich, z funkcjami ograniczonymi

78

Projektowanie z myślą o urządzeniach przenośnych

do niezbędnego minimum, o konkretnym przeznaczeniu, pozbawionych niewygód SUV-ów. Oczywiście to nie oznacza, że praca nad taką aplikacją wymaga mniejszego zastanowienia, a projekt tworzy się znacznie lżej. Wprawdzie samochód sportowy nie pociągnie przyczepy ani nie zmieści siedmiu pasażerów, ale w ekspresowym tempie przewiezie dwie osoby z punktu A do punktu B. Oprogramowanie urządzeń przenośnych jest mocno skoncentrowane, oszczędne w funkcjach, niewielkie i przeznaczone do ściśle określonych zadań. Aplikacja taka z definicji nie robi wszystkiego, lecz ze swoich ściśle określonych zadań wywiązuje się perfekcyjnie. Urządzenia przenośne nakładają na nas same ograniczenia — brak klawiatury (lub klawiatura ograniczona do niezbędnego minimum), niewielki ekran, zaledwie kilka przycisków. Projektowanie aplikacji z myślą o nich jest prawdziwym ćwiczeniem w szukaniu inteligentnych i prostych rozwiązań. Przerośnięte programy dla urządzeń przenośnych? Nie znajdziesz zbyt wielu. Większość programistów skupia się na oprogramowaniu jednej funkcji lub ich rodziny.

ogranicz liczbę funkcji, pozostaw wyłącznie te najważniejsze Projektowanie aplikacji na urządzenia przenośne wiąże się z  celowym usuwaniem wszystkich zbędnych rozwiązań. Praca projektanta tego szczególnego rodzaju programów to ciągłe ograniczanie listy ich możliwości. W pewnym momencie odkryjesz, że fakt wyrzucenia kolejnego zbędnego elementu napawa Cię równie wielką dumą, co możliwości, które oferuje program. W  roku 2002 Dan Brown, architekt informacji, przedstawił schemat definiowania poziomów ważności poszczególnych funkcji strony internetowej — nazwał go diagramem opisującym stronę56. Schemat ten w odróżnieniu od innych obrazów szkieletowych nie narzuca twórcy żadnego układu strony. Wprawdzie rozwiązanie to zostało zaproponowane twórcom stron internetowych, lecz odkryłem, że pomysł Browna ułatwia także pracę nad aplikacjami dla urządzeń przenośnych, gdzie powierzchnia ekranu jest na wagę złota. Na własny użytek nazwałem tę modyfikację diagramami opisującymi interfejs i teraz korzystam z nich zawsze we wczesnej fazie projektu, by ograniczyć możliwości aplikacji lub uwypuklić jej najważniejsze funkcje we wskazanym obszarze ekranu. Załóżmy, że przygotowujemy aplikację na zlecenie firmy przewozowej specjalizującej się w tanich ofertach transportu. Aplikacja ma ułatwiać zaplanowanie podróży, oferując najważniejsze funkcje strony internetowej firmy: wyszukiwanie lotów, przeglądanie ich listy oraz wybieranie ostatecznej oferty. Powiedzmy, że pracujemy właśnie nad stroną wyników wyszukiwania, na której mają pojawiać się wszystkie loty spełniające kryteria zadane przez użytkownika. Najważniejszym elementem strony 56 http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3. Projektowanie z myślą o urządzeniach przenośnych

79

będzie lista wszystkich lotów, a ponieważ miejsce w każdym z wierszy listy jest mocno ograniczone, czeka nas podjęcie kilku trudnych decyzji. Poniżej znajdziesz spis przykładowych elementów interfejsu, jakie mogłyby znaleźć się w każdym z wierszy:

• • • • • • • • • • • •

nazwa linii lotniczych, data i godzina odlotu, data i godzina przylotu na miejsce, nazwa docelowego lotniska, czas trwania lotu, numer lotu, strefa czasowa, liczba połączeń, rodzaje miejsc (klasa ekonomiczna, klasa biznesowa, pierwsza klasa itd.), wyżywienie (napoje, przekąski, pełne posiłki, alkohole itd.), cena, opłaty lotniskowe, ubezpieczenie itd.

Każdy z  wyników wyszukiwania mógłby być opisany kilkunastoma rodzajami danych, ale wszystkie one nie zmieszczą się w jednym wierszu tabeli. Próby wstawienia ich tam sprawiłyby jedynie, że całość projektu wyglądałaby wyjątkowo nieporządnie. Co zatem robić? Przede wszystkim sporządzimy diagram opisujący interfejs i zastanowimy się, które z informacji mają największe znaczenie — te umieścimy na pierwszym ekranie:

• data i godzina odlotu, • cena, • data i godzina przybycia na miejsce. Pora na nieco mniej ważne informacje:

• liczba połączeń, 80

Projektowanie z myślą o urządzeniach przenośnych

• nazwa linii lotniczych, • numer lotu. I wreszcie najmniej istotne dane:

• • • • • •

nazwa docelowego lotniska, czas trwania lotu, strefa czasowa, rodzaje miejsc (klasa ekonomiczna, klasa biznesowa, pierwsza klasa itd.), serwowane jedzenie (napoje, przekąski, pełne posiłki, alkohole itd.), opłaty dodatkowe.

Dlaczego niektóre z  pozornie istotnych informacji otrzymały status najmniej ważnych? Głównie dlatego, że większość z nich w  ogóle nie musi pojawiać się w  wierszu tabeli z wynikami wyszukiwania — mogą być wyświetlane w nagłówku tabeli, mogą pojawiać się w pasku tytułowym aplikacji czy występować w  postaci objaśnienia na poprzednim ekranie. To, że dana informacja trafiła do grupy o  najmniejszym znaczeniu, nie jest równoznaczne z niewyświetleniem jej w  aplikacji. Po prosu nie jest tak istotna, by trafić do najważniejszego obszaru, który i  tak jest mocno ograniczony. Mając to na uwadze, możemy zaproponować wygląd ekranu aplikacji jak na rysunku z prawej. Symulacja wyświetlania wyników działania Jak widzisz, bardzo ważne i  nieco aplikacji na ekranie smartfona mniej ważne informacje zostały w  tym projekcie wyróżnione. Czas odlotu jest zapisany wyraźną, pogrubioną czcionką, informacja o cenie znalazła się po prawej stronie ekranu, a  dodatkowo nadaliśmy jej kolor ciemnozielony, godzina przylotu pojawia się w pewnej odległości od lewego marginesu, przez co łatwiej wychwycić ją wzrokiem. Nazwa linii lotniczych i numer lotu również trafiły do tabeli, ale jaśniejszy kolor fontów i mniejszy rozmiar czcionki nie pozostawiają wątpliwości, że to informacje o drugorzędnym znaczeniu. Projektowanie z myślą o urządzeniach przenośnych

81

Zobaczmy teraz, co możemy zrobić z elementami o najniższym priorytecie. Jak już wspominałem, nie muszą one pojawiać się jawnie lub mogą być wyświetlane tylko w określonych okolicznościach. Przyjrzyjmy się zatem każdej z najmniej istotnych informacji:

•

Lotnisko docelowe Każdy, kto szuka najtańszego lotu, wie, dokąd chce się udać, dlatego informację o lotnisku docelowym umieścimy w pasku tytułowym — ostatecznie dotyczy ona wszystkich podawanych w  tabeli danych. W  omawianym przykładzie znajdziemy spis lotów, którymi można dotrzeć na Tampa International Airport w  Tampie na Florydzie. Zauważ, że na tym ekranie nie znajdziesz informacji o przesiadkach na innych lotniskach, niezależnie od tego, ile ich jest, ponieważ te dane nie są najważniejsze w tym momencie. Czy ludzie wybierają lot na podstawie miejsc przesiadek? Nie można wykluczyć, że czasami tak, ale wydaje się, że inne czynniki mogą być ważniejsze, a ograniczona powierzchnia ekranu urządzenia przenośnego wymaga pewnych poświęceń. Jakimś kompromisem może być wyświetlenie miast, w których należy zmienić samoloty, na ekranie potwierdzania transakcji, przed zarezerwowaniem biletów.

•

Czas trwania lotu Różnica pomiędzy czasem przylotu a czasem odlotu to czas trwania lotu. Zapewne gdybyśmy mieli do dyspozycji większy ekran, moglibyśmy podać tę informację jawnie, jednak w  aplikacji przeznaczonej do użycia na urządzeniu przenośnym nie jest ona najważniejsza.

•

Strefa czasowa Te dane są rzeczywiście istotne dla osób, które w czasie podróży zmieniają strefę czasową. Projektując przykładowy ekran, założyłem, że podróżni będą poruszać się w obszarze jednej strefy czasowej. W przypadku przemieszczania się pomiędzy strefami nadal można uniknąć wyświetlania informacji o  strefie czasowej przy podawanych godzinach. Wystarczy zaznaczyć na górze ekranu, że wszystkie godziny przylotów i odlotów są podawane lokalnie.

•

Rodzaje miejsc (klasa ekonomiczna, klasa biznesowa, pierwsza klasa itd.) Rodzaj miejsc określa się na głównym ekranie wyszukiwarki, więc nie ma potrzeby powielać tej informacji tutaj.

82

Projektowanie z myślą o urządzeniach przenośnych

•

Serwowane jedzenie (napoje, przekąski, pełne posiłki, alkohole itd.) Tu ponownie mamy do czynienia z informacjami, które są istotne jedynie w ściśle określonych okolicznościach. Loty krajowe, czyli między innymi do Tampy, trwają najwyżej kilka godzin, więc nie serwuje się w ich czasie pełnych posiłków. W przypadku wyszukiwania lotów o dłuższych trasach informacja o serwowanym jedzeniu mogłaby pojawiać się na jednym z dalszych ekranów, już po wyborze lotu.

•

opłaty dodatkowe Te informacje odnoszą się do wszystkich wyświetlanych w tabeli danych, więc umieścimy je w nagłówku. Nagłówek zniknie z pola widzenia po przewinięciu zawartości tabeli, ponieważ wszystkie podane w nim wiadomości wystarczy odczytać jednokrotnie. Miejsce nagłówka przyda się do wyświetlania innych danych. Jeżeli chcemy oszczędzić jeszcze więcej miejsca, możemy w ogóle przenieść te informacje na wcześniejszy ekran.

Aplikacja informująca o dostępnych lotach, która ma być wykorzystywana w urządzeniach przenośnych, musi koncentrować się wyłącznie na głównych celach, jakie się jej stawia, zatem zadaniem programisty jest usunąć z  ekranu wszystkie zbędne informacje. To samo można powiedzieć w zasadzie o każdym programie przeznaczonym na urządzenia przenośne. Jeśli zastanawiasz się, które z funkcji usunąć, a które pozostawić, spróbuj posortować je według stopnia istotności. Diagram opisujący interfejs podobny do przedstawionego powyżej znacznie ułatwi Ci to zadanie. Przygotowywanie tego rodzaju zestawień jest doskonałym ćwiczeniem, które pomoże Ci wyrobić nawyk określania stopnia istotności danych prezentowanych na ekranie.

im mniej funkcji, tym trudniej ukryć błędy Nie lekceważ problemów związanych z projektowaniem oprogramowania smartfonów tylko dlatego, że urządzenia te mają niewielki ekran. W rzeczywistości jest to kolejny czynnik, który utrudnia Ci zadanie. Prawda, trzeba troszczyć się o znacznie mniejszą liczbę pikseli, ale to tylko sprawia, że łatwiej jest popełnić błąd. Na tak małym ekranie każdy błąd urasta do rangi prawdziwej katastrofy, a odkrywa się go o wiele szybciej niż normalnie, gdyż wszystkie elementy projektu są automatycznie poddawane dogłębnej analizie. Na niewielkiej przestrzeni nie da się ukryć błędu ani pominąć wzrokiem nieprzemyślanego elementu interfejsu użytkownika. Ponieważ w  jednym momencie na ekranie znajduje się mniej elementów niż w normalnej aplikacji, mniej fragmentów interfejsu może przyciągnąć wzrok użytkownika, mniej elementów domaga się uwagi, mniej zachęca do interakcji, nie ma Projektowanie z myślą o urządzeniach przenośnych

83

nawet zbyt wielu przycisków, których można by użyć, a liczba podpisów na etykietach jest wyraźnie ograniczona, więc i czytanie przebiega sprawniej. Chwilę! To etykiety też są częścią interfejsu? Oczywiście, w  dodatku to jeden z istotnych elementów. Każda litera ma znaczenie, każde słowo jest istotne. To, co różni projektanta światowej klasy od przeciętnego człowieka, to właśnie dbałość o szczegóły takie jak etykiety przycisków, tytuły ekranów, treść komunikatów bądź opisy wszystkich działów. Jak lepiej opisać przycisk — „Zapisz” czy „Wyślij”? Co będzie bardziej zrozumiałe — „Nowy” czy „Utwórz”? Czy w całej aplikacji posługujesz się tą samą nomenklaturą? To szczegóły, ale właśnie one mają największe znaczenie i jeśli o nie zadbasz, zbudujesz doskonały interfejs.

Przemyśl dobrze opis przycisków

Jak zatem znaleźć te drobne niedociągnięcia i jak je usunąć? W jaki sposób zapewnić spójność nazw pojawiających się w aplikacji? Odpowiedź jest prosta — trzeba uważnie przyglądać się wszystkim pikselom. O co mi chodzi? O częste stosowanie funkcji powiększania, wyrównywanie wszystkich elementów, dokładne mierzenie odległości pomiędzy nimi, czyli dopieszczanie wszystkich szczegółów wyglądu aplikacji. Chodzi także o sprawdzenie, czy wszystkie elementy, które mają być wyśrodkowane, zostały faktycznie umieszczone na środku obszaru, czy wszystkie krawędzie są idealnie ostre, czy żadna z nich nie ucierpiała od niestarannego zmieniania rozmiarów grafiki. Istota projektowania kryje się w szczegółach. Szczegóły nie są czymś, co można by pozostawić na ostatnią chwilę, czymś, co da się naprawić później. Są nierozerwalnie złączone ze wszystkim, co robi projektant. Zwracaj uwagę na każdą ikonę, każdy podpis i każdy piksel jak na coś, co ma pięć metrów wzrostu i patrzy Ci prosto w oczy. Każdy potrafi być niedbały, to perfekcja wymaga wysiłku. Na szczęście zaprojektowanie pięknego, perfekcyjnego interfejsu da Ci potężną przewagę nad konkurencją, a jedyne, czego trzeba, by osiągnąć ten cel, to odrobina zaangażowania.

korzystaj ze sprawdzonych wzorów Programiści we wszystkich sytuacjach, w których natykają się na znany i dobrze zbadany problem, mają w zwyczaju stosować sprawdzone wielokrotnie rozwiązania. Dzięki temu mają pewność, że nie popełnią błędu i zawsze zdołają wypełnić swoje obowiązki. Jednymi z częściej stosowanych wzorców są wzorzec pełnomocnika, dekoratora czy projektowy. Jeżeli nie jesteś powiązany ze środowiskiem programistów, nazwy te nic 84

Projektowanie z myślą o urządzeniach przenośnych

Ci nie powiedzą. Warto jednak wiedzieć, że programiści wytworzyli własne metody rozwiązywania złożonych problemów, dzięki którym są w stanie zapewnić użytkownikom możliwie wysoki komfort pracy z aplikacjami. Twój projekt może być zupełnie wyjątkowy, jednak większość problematycznych kwestii, z jakimi spotkasz się w czasie jego realizacji, została zapewne rozwiązana już jakiś czas temu. Przykładem mogą być rozwiązania polegające na wyświetleniu tylko jednej części aplikacji czy udostępnianie dalszych informacji po rozwinięciu opcji interfejsu. Obydwa wymagają stosowania złożonego kodu i pojawiają się w większości aplikacji niezależnie od ich przeznaczenia. Przyjrzyjmy się teraz najczęściej spotykanym rozwiązaniom projektowym, które będziesz mógł stosować w aplikacjach przeznaczonych na urządzenia przenośne.

Przyciski opcji Przyciski opcji pojawiające się na stronach internetowych pozwalają użytkownikom wskazać na liście przedstawionych możliwości wybrane przez nich rozwiązanie. Ich cechą charakterystyczną jest to, że jak w przypadku testu jednokrotnego wyboru, ze wskazanych opcji można wybrać tylko jedną. Udostępnianie użytkownikowi tylko części aplikacji okazuje się niejednokrotnie bardzo wygodne. Jeżeli na przykład prezentujesz na ekranie różne rodzaje zawartości lub różne funkcje, warto podzielić je na grupy i wyświetlać osobno, dzięki czemu użytkownik w  jednej chwili ma do czynienia z  opcjami jednej rodziny, starannie oddzielonymi od pozostałych. Wielu projektantów łączy możliwości, jakie dają przyciski opcji, z funkcjonalnością zakładek. Każda zakładka to inny ekran aplikacji, a puknięcie powiązanego z nią przycisku opcji powoduje zmianę zawartości wyświetlanej na ekranie. Bardzo istotną częścią tego rozwiązania jest zachowywanie zawartości zakładki, ponieważ dzięki temu po powrocie do poprzedniego ekranu użytkownik może podjąć działania dokładnie w miejscu, w którym je przerwał. W ten sposób buduje się zaufanie do aplikacji i zachęca użytkownika do swobodnego poruszania się po jej opcjach. Wzorzec ten,

Opcje wyboru prowadzące do kolejnych zakładek Projektowanie z myślą o urządzeniach przenośnych

85

choć pojawia się najczęściej w aplikacjach mobilnych, jest implementowany na różne sposoby. Przykład A na stronie 85 przedstawia zwyczajną aplikację, w  której pomiędzy poszczególnymi zakładkami przechodzi się za pomocą naciśnięć przycisków opcji umieszczonych na dole strony. W przykładzie B pasek przycisków opcji jest przewijany w  bok, dzięki czemu daje się uwzględnić na nim więcej opcji niż w  zwyczajnym interfejsie. Przyciski umieszczone na krańcach paska są częściowo ukryte, tak by użytkownik wiedział, że dalsze opcje kryją się poza jego wzrokiem. W  przykładzie C przyciski opcji znajdują się na górze ekranu w specjalnie wydzielonym obszarze, Charakterystyczny wygląd i układ w  którym zarezerwowano nieco miejsca na do- elementów w aplikacji Beats firmy datkowe informacje. Przy takim rozwiązaniu ob- Bjango szar ten jest zawsze widoczny na szerokości całej aplikacji. Można go wykorzystać do wyświetlania albo tych samych informacji, albo zmieniać jego zawartość w zależności od tego, która z zakładek jest aktywna. Aplikacja Beats działająca na iPhone’ach, zaprojektowana przez firmę Bjango, działa zgodnie z opisanym tu schematem. Pasek przycisków został umieszczony pośrodku ekranu, oddzielając tym samym od siebie dwa istotne fragmenty ekranu. Poruszanie się po aplikacji Gowalla, przeznaczonej dla urządzeń pracujących w  systemie Android, zostało również zorganizowane w  systemie zakładek. Gowalla to aplikacja społecznościowa obejmująca swoim działaniem pewien obszar wokół punktu, w  którym znajduje się użytkownik urządzenia, działająca podobnie do programu Foursquare, czyli wykorzystująca system „meldowania się” w określonych grupach. Gowalla daje się uruchamiać na większości najpopularniejszych platform systemowych urządzeń mobilnych. Program działający w systemie Android jest jednym z przyjemniejszych wśród dostępnych w sieci rozwiązań. Cztery zakładki menu głównego — Activity (zajęZakładki w interfejsie aplikacji cia), Spots (punkty), Trips (wyjścia) i Passport (pasz- Gowalla dla systemu Android 86

Projektowanie z myślą o urządzeniach przenośnych

port) — umieszczone w pasku nawigacji pozwalają sprawnie poruszać się po interfejsie aplikacji. Przyciski opcji wcale nie muszą być związane z  paskiem zakładek, czego doskonałym przykładem jest ekran początkowy aplikacji Facebook w iPhonie. Na pierwszym ekranie pojawia się siatka ikon odpowiadających głównym częściom aplikacji. Użytkownik wybiera jedną z opcji, po czym jest przenoszony do następnego ekranu. To ciekawe rozwiązanie ma jednak jedną wadę — opcje inne niż wybrana pierwotnie są dostępne ponownie dopiero po powrocie do poprzedniego ekranu i widoku siatki. Przez to zmiana ekranu wymaga wykonania dwóch puknięć, podczas gdy w tradycyjnych aplikacjach wystarczy jedno.

W aplikacji Facebook zrezygnowano z tradycyjnych zakładek

Formularze złożone Ponieważ na ekranach urządzeń przenośnych jest naprawdę niewiele miejsca, projektanci byli zmuszeni opracować nowatorskie metody działania złożonych aplikacji. Jednym z częściej stosowanych zabiegów jest prezentowanie listy dostępnych funkcji i, dopiero po wskazaniu przez użytkownika wybranej opcji, zaprezentowanie na ekranie powiązanych z nią elementów. Tego rodzaju rozwiązanie może być wykorzystywane wielokrotnie i bardzo często jest, szczególnie gdy aplikacja zalicza się do grupy bardziej skomplikowanych.

Trzy ekrany przedstawiające kolejne etapy w hierarchii formularza złożonego

Projektowanie z myślą o urządzeniach przenośnych

87

W nomenklaturze branżowej występuje ono pod nazwą formularza złożonego lub kombinowanego (ang. master-detail form). W sieci udostępnia się dziesiątki aplikacji współpracujących z serwisem Twitter. W prawie wszystkich zastosowano interfejs działający na zasadzie formularza kombinowanego. Gdy wskażesz jeden z  komunikatów na liście, natychmiast rozwinie się on do pełnej wersji, przykrywając pozostałe, tak byś mógł zapoznać się z całym tekstem. Po dotknięciu obszaru awataru na ekranie pojawi się informacja o autorze komunikatu. Dotknięcie przycisku Recent tweets (najnowsze komunikaty) w profilu autora przeniesie Cię do ich listy, gdzie możesz powtórzyć cały opisany tu proces. Formularze złożone mają zazwyczaj cztery poziomy lub pięć poziomów. Oczywiście prezentowanie informacji w tak głębokiej hierarchii ma swoje wady — trzeba jakoś wrócić do najwyższego poziomu menu! Czy chciałbyś zmuszać użytkownika do pięciokrotnego naciskania przycisku Wstecz tylko dlatego, że zagłębił się on do szóstego poziomu hierarchii? W aplikacji Twitter przeznaczonej dla urządzeń iPhone Loren Brichter zaproponował ciekawe i niespotykane rozwiązanie — przesunięcie w poziomie po pasku tytułowym pozwala wrócić do głównego poziomu hierarchii. Nie można powiedzieć, by było to intuicyjne, lecz z pewnością jest ciekawe. Załóżmy teraz, że masz wyświetlić tabelę o czterech wierszach, z których każdy będzie odgrywać rolę przycisku powiązanego z jedną z głównych funkcji Twojej aplikacji. W tym przypadku mógłbyś posłużyć się paskiem przycisków opcji, ponieważ liczba dostępnych możliwości jest niewielka. Jak zatem wybrać właściwe rozwiązanie? Doświadczenie nauczyło mnie, że gdy w  interfejsie pojawiają się elementy o  tym samym stopniu istotności, należy używać przycisków opcji. We wszystkich innych przypadkach, jeśli nie jesteś pewien, co robić, staraj się wybrać taki schemat, który pozwoli użytkownikowi poruszać się po aplikacji za pomocą możliwie małej liczby dotknięć ekranu.

Wiele w jednym Przeciętna aplikacja projektowana z  myślą o  urządzeniach przenośnych ma prostą budowę, oferuje jedynie kilka podstawowych funkcji, a  jej twórcy wystrzegają się zbyt złożonych rozwiązań. Jeżeli oddajesz do dyspozycji użytkownika tylko jedną funkcję czy dwie funkcje, ale jednocześnie oferujesz różne sposoby prezentowania danych generowanych przez aplikację, powinieneś zastanowić się nad użyciem interfejsu z rodziny „wiele w jednym”. Wiąże się to z utworzeniem jednego widoku ekranu oraz kilku opcji modyfikowania go. Interfejs taki pojawia się najczęściej w  aplikacjach zawierających spis poszczególnych stron wyświetlanych pojedynczo. Użytkownik może przejść do następnej karty, gdy zapozna się już z zawartością aktualnie wyświetlanej. Instalowana domyślnie w  urządzeniach przenośnych Apple

88

Projektowanie z myślą o urządzeniach przenośnych

aplikacja pogodowa (rysunek na stronie 89) wykorzystuje ten właśnie model interfejsu. Innym przykładem jest ScoreCenter ESPN. Programy, w  których pojawia się model „wiele w  jednym”, zawierają najczęściej mnóstwo danych i służą szybkiemu ich przeglądaniu. Bardzo rzadko absorbują uwagę użytkownika na tak długo, by spędzał wiele czasu na badaniu ich możliwości. Programy te zazwyczaj oferują także oglądanie zawartości w  poziomie oraz definiowanie własnych opcji ustawień w sposób znany z widżetów pulpitu systemu Mac OS X. Ponieważ sposób poruszania się po aplikacji jest prosty i dobrze przemyślany, projektant może poświęcić się całkowicie udoskonalaniu każdego ekranu i poprawieniu każdego piksela.

Prognoza pogody w urządzeniach Apple wykorzystuje interfejs „wiele w jednym”

Wspaniałe doznania Gry oraz inne aplikacje służące rozrywce zamiast odwoływać się do opisanych powyżej wzorców, posługują się własnymi schematami, które określam mianem rozwiązań „wspaniałych doznań”. Wzorzec wspaniałych doznań charakteryzuje się tym, że aplikacja uruchamiana na urządzeniu przenośnym wykorzystuje cały obszar wyświetlacza i za pomocą odpowiednich rozwiązań wizualnych i dźwiękowych przenosi użytkownika w odmienny świat. Rozwiązanie takie pojawia się w  niemal każdej grze, ponieważ tylko w  ten sposób można wywołać u  gracza odpowiedni nastrój i w pełni wpływać na jego doznania. Zaprojektowanie aplikacji oferującej niezwykłe doznania jest zadaniem wyjątkowo trudnym, gdyż w  czasie pracy nie możesz wykorzystywać żadnych szablonowych elementów interfejsu. Wszystkie one Archetype, gra z rodziny FPS przeznaczona na urządzenia iPhone, muszą być opracowane jest doskonałym przykładem tego, jak niezwykłe doznania można z myślą o konkretnym pro- wywołać aplikacją uruchomioną w urządzeniu przenośnym

Projektowanie z myślą o urządzeniach przenośnych

89

gramie, tak by pasowały idealnie do zastosowanych w  nim rozwiązań. Aby zniszczyć efekt, wystarczy jeden domyślny przycisk czy widżet — to błąd popełniany często nawet przez doświadczonych projektantów. Jeżeli chcesz wywołać naprawdę niezwykłe wrażenie, musisz poświęcić uwagę szczegółom. W tego rodzaju projektach wyjątkowe znaczenie ma animowanie detali. Animacja sama w sobie jest bardzo istotnym elementem interfejsu, ponieważ to ona buduje oczekiwania i  pozwala użytkownikowi określić zmiany, jakie zaszły w wyglądzie ekranu. Przeniesienie do widoku menu natychmiast po dotknięciu logo programu sprawia toporne i  nieprzyjemne wrażenie. Przejście prezentuje się lepiej, gdy towarzyszy mu staranna animacja w  naturalny sposób spowalniająca lub przyspieszająca zmianę. Szybkie, może nawet agresywne animacje budują skojarzenia z  dynamiką, natomiast wolniejsze, bardziej przemyślane animacje wprawiają w nastrój relaksu. Jedną z  najbardziej zaskakujących aplikacji przygotowanych dla iPhone’ów jest Zen Bound. Kojące dźwięki w tle oraz spokojne animacje pozwalają użytkownikowi się wyciszyć. W  wielu miejscach ekran wygasza się do zupełnej czerni, a potem stopniowo wyświetla nowy obraz. Grafika nigdy nie zmienia się gwałtownie — wszystkie przejścia są gładkie i starannie zaplanowane. Dzięki temu oraz pięknej, poruszającej ścieżce dźwiękowej Zen Bound jest jedną z najlepszych znanych mi aplikacji oferujących niezwykłe doznania.

Schematy własnego interfejsu

Niewiele aplikacji może tak bardzo zachwycić i wciągnąć użytkownika we własny świat, jak Zen Bound

Własne ustawienia interfejsu aplikacji doubleTwist

Czytanie krótkich, urywanych zdań jest nudne. Tak samo nuży konieczność obcowania ciągle z tymi samymi rozwiązaniami w interfejsie. Dlatego nie wahaj się mieszać poznanych modeli! Nie ograniczaj się do ścieżek, którymi w identycznych sytuacjach podążali inni projektanci. Jeżeli uważasz, że masz lepszy pomysł, nie zastanawiaj się ani

90

Projektowanie z myślą o urządzeniach przenośnych

chwili. Odtwarzacz muzyki przygotowany z myślą o użytkownikach systemu Android, doubleTwist, domyślnie prezentuje ciemny, futurystyczny interfejs. Aplikacja ta stanowi doskonały przykład tego, co można osiągnąć, określając własne preferencje w programach systemu Android. Pierwsza strona aplikacji przypomina nieco aplikację Facebook dla iPhone’a  poprzez rozmieszczenie poszczególnych elementów w  układzie siatki, ale wygląd samego odtwarzacza może być modyfikowany dowolnie, co jest nietypowe dla innych aplikacji odtwarzających dźwięk w systemach Android i iOS. Program Convertbot to kalkulator jednostek zaprojektowany dla iPhone’a. Jego jedyny w swo- Zupełnie niespotykany interfejs im rodzaju interfejs sprawia, że nudne, codzienne działania, takie jak przeliczanie walut, nabierają zupełnie nowego znaczenia. Przeliczanie jednostek niemalże przypomina grę. Zaczynasz od dotknięcia górnej partii strony stylizowanej na wyświetlacz LCD, gdzie podajesz wartość. Potem za pomocą obrotowego panelu w  kształcie koła wybierasz rodzaj przeliczenia — pomiędzy walutami, jednostkami odległości, wagi itd. Następnie określasz jednostki początkową i  końcową, a  na ekranie pojawia się wynik przeliczenia. Obliczanie nowej wartości w tak wielostopniowym procesie sprawia, że użytkownik ma wrażenie obsługiwania precyzyjnego urządzenia. Projektanci z  Tapbots mogli wprawdzie zastosować kilka typowych opcji wybo- Aplikacja Where To? jest jednym ru i wieloekranowy interfejs pozwalający wykonać z pierwszych programów obliczenia w kilku krokach. Zdecydowali się jed- o realistycznym wyglądzie nak na zupełnie nowatorskie rozwiązanie i wprowadzili do aplikacji niezwykły interfejs. Nie dziwi zatem, że Convertbot jest ciągle jedną z najpopularniejszych aplikacji pobieranych w App Store, w dziale Utilities. Tak nietypowe rozwiązanie projektowe pojawiło się po raz pierwszy w programie Where To? należącym obecnie do FutureTap. Była to jedna z pierwszych aplikacji dla iPhone’ów, która miała wygląd stylizowany na rozwiązania znane z życia i wykorzystywała zasady działania urządzeń dotykowych. Niewątpliwie trzeba przypisać jej

Projektowanie z myślą o urządzeniach przenośnych

91

spore zasługi w wytyczaniu kierunku, w którym rozwinęło się projektowanie aplikacji na urządzenia mobilne. Aby znaleźć interesujący Cię lokal znajdujący się w pobliżu miejsca, w którym przebywasz, musisz dotknąć odpowiedni fragment koła menu nawigacji. Obsługiwanie interfejsu w tym kształcie jest wyjątkowo intuicyjne i zdecydowanie łatwiejsze w zrozumieniu niż praca z układem tabeli. Koło wygląda na wykonane z matowego plastiku, dokładnie takiego, jaki byłby użyty w  ewentualnej obudowie smartfona. Zostało umieszczone na tle tekstury imitującej wyprawioną skórę, co sprawia, że praca z aplikacją wydaje się nam naturalna.

Projektowanie wyglądu aplikacji działających w urządzeniach przenośnych Przemyślenie warunków pracy z  aplikacją i  staranne wykonanie elementów odpowiedzialnych za wykonywanie poszczególnych zadań jest bardzo ważne, nie zwalnia Cię jednak z zadbania o wizualną stronę wybranego rozwiązania. Mówię oczywiście o projektowaniu wyglądu aplikacji działającej w urządzeniach przenośnych. Zbudowanie dobrej aplikacji wymaga działania na pograniczu wielu dziedzin, będę jednak obstawać przy twierdzeniu, że projektowanie grafiki jest w tym przypadku najważniejsze. Ani właściwe użycie elementów konstrukcyjnych, ani szczegółowe rozmieszczenie ich na poszczególnych ekranach aplikacji nie zda się na nic, jeżeli nie zadbasz o odpowiedni wygląd. Kiepski projekt graficzny oznacza jedno — możesz sobie szukać nowego zajęcia. Dobry projektant nie różni się niczym od znakomitego golfisty — jedni rodzą się z tym talentem, inni muszą wypracować swój styl poprzez godziny ćwiczeń. Niektórzy ludzie nie mają wyczucia do pracy z obrazem, ale dzięki poświęceniu są w stanie osiągnąć naprawdę zdumiewające efekty. Nieważne, jak duże nosisz w sobie pokłady talentu — trzymanie się pewnych uniwersalnych zasad pozwoli Ci podnieść jakość swoich prac o kilka oczek wyżej. Te reguły towarzyszą mi w każdej godzinie pracy. Każdy gracz w golfa powtarza przed wybiciem piłki kilka fundamentalnych zasad własnej mantry, ja natomiast wracam do wskazówek, które znajdziesz w poniższych podrozdziałach i które, jak mam nadzieję, ułatwią Ci nieco pracę nad kolejnymi aplikacjami przenośnymi.

kontrast Wysoki kontrast stanowi o „być albo nie być” każdego programu uruchamianego na urządzeniu przenośnym, ponieważ dosłownie decyduje o tym, jak użytkownik widzi poszczególne jego elementy. Kontrast określa wygląd poszczególnych fragmentów aplikacji na tle pozostałych jej części. Jeżeli wszystkie fragmenty projektu wyglądają 92

Projektowanie z myślą o urządzeniach przenośnych

bardzo podobnie, użytkownik poczuje się zagubiony — nie będzie wiedział, od czego rozpocząć pracę, a ekran powitalny zamieni się w jego oczach w  nieskładne zestawienie barw schematu RGB. Jeżeli nie wiesz, które z  elementów aplikacji powinny rzucać się w oczy jako pierwsze, nigdy nie zdołasz określić hierarchii panującej między nimi. Zbyt mały kontrast może sprawić, że najważniejsza funkcja aplikacji zostanie dostrzeżona w  drugiej lub trzeciej kolejności… albo wcale. Nie wahaj się wyróżniać elementy, które mają być z założenia charakterystyczne. Jeżeli podkreślisz ich odmienność w zbyt małym stopniu, użytkownik poczuje się zagubiony i zacznie doszukiwać się Odpowiednio dobrany kontrast połączeń tam, gdzie ich nie ma. Wyraźny kontrast kieruje uwagę użytkownika na pewnie prowadzi wzrok użytkownika od jednego ważniejsze elementy interfejsu elementu projektu do drugiego. Jeśli projektant wykona swoją pracę należycie, użytkownik aplikacji odkryje wszystkie jej funkcje w należytej kolejności. Jeżeli projekt będzie niedopracowany, mniej istotne elementy mogą przyćmić te ważniejsze, powodując tym samym niepotrzebne zamieszanie. Aplikacja iSaidWhat?! to dyktafon pozwalający nagrywać dźwięk i edytować zapisane ścieżki. Program wybija się pozytywnie pośród wielu prac konkurencji w tym zatłoczonym segmencie rynku, również pod względem projektu graficznego. Podstawową funkcją aplikacji jest nagrywanie dźwięku, o czym nie zapomniał projektant interfejsu — najważniejszy z tego punktu widzenia fragment ekranu został oznaczony dużym czerwonym przyciskiem. Jasnoniebieski kształt wykresu oraz delikatne, szare wykończenia stanowią dla niego doskonałe tło. Na dole ekranu znajdują się jeszcze dodatkowe cztery przyciski, ale nie pozostawiają wątpliwości, że są jedynie dodatkiem. Wyobraź sobie, jak wyglądałaby praca z  aplikacją, gdybyś nie potrafił wskazać na pierwszy rzut oka przycisku nagrywania. Wtedy program nie pozwalałby wykorzystywać swojej najważniejszej funkcji. Odpowiedni kontrast decyduje o powodzeniu aplikacji.

Powtarzalność O tym, czy użytkownik zaufa Twojej aplikacji i czy poczuje się w niej pewnie, decyduje przede wszystkim komfort pracy. Na ten czynnik wpływa wiele elementów. Rozpatrując problem z punktu widzenia projektu graficznego, warto zwrócić uwagę na definiowanie stylów różnych elementów. Zastosowanie jednego stylu do podobnych

Projektowanie z myślą o urządzeniach przenośnych

93

elementów sprawi, że użytkownik szybko dostroi się do zasad działania aplikacji i zrozumie znaczenie jej poszczególnych funkcji. Jeżeli nie zadbasz o powtarzalność stylu, wywołasz tylko niepotrzebne zamieszanie, dlatego nie zapominaj, że powiązane ze sobą elementy powinny wyglądać podobnie szczególnie wtedy, gdy pojawiają się w jednym rzędzie. Doskonały przykład poprawnego oznaczania podobnych obiektów jednym stylem znajdziemy w  aplikacji Pastebot. Program ten jest menedżerem, w którym zapisywane są informacje o tekście, grafice, adresach URL i innych elementach kopiowanych do iPhone’a. Lista skopiowanej zawartości stanowi najważniejszy fragment aplikacji, a wszyst- Podobne style na liście elementów kie jej elementy, niezależnie od ich rodzaju, są w aplikacji Pastebot oznaczone graficznie w  podobny sposób. Dzięki temu użytkownik nie ma wątpliwości, że w każdym przypadku może podjąć podobne działania. Ponieważ żaden z elementów nie wyróżnia się wizualnie, użytkownik wie, że praca z nimi będzie przebiegać według jednego schematu.

Wyrównanie Wyrównanie zawsze było wyznacznikiem dobrych projektów, a w przypadku aplikacji na urządzenia mobilne ma jeszcze większe znaczenie. Każdy element interfejsu powinien być wyrównany do jakieś linii — krawędzi innego elementu, linii siatki, linii złotego podziału, krawędzi ekranu. Elementy i widżety pozbawione wyrównania wyglądają jak rozrzucone przypadkowo, zupełnie jakby unosiły się w pustce bez solidnego oparcia. Równe ich rozmieszczenie nie wymaga żadnej konkretnej wiedzy, co najwyżej dobrego oka — albo są one porządnie wyrównane, albo nie. W tym przypadku „prawie” nie wystarcza. Wyrównanie musi być idealne. Aby wyrównać rozmieszczenie dwóch elementów z dokładnością do jednego piksela, powiększam grafikę do momentu, w którym widzę już, gdzie zaczyna się, a gdzie kończy dany piksel. Poza tym używam też pionowych i poziomych linii pomocniczych. Tu nie wolno robić niczego „na oko” — wszystko musi być doskonałe. Wyrównanie staje się szczególnie istotne, gdy staramy się umieścić przycisk lub widżet dokładnie między dwoma krawędziami. Zorientowałem się, że to najczęściej wykonywana czynność, jaka przypada mi w udziale w czasie projektowania interfejsu aplikacji dla urządzeń przenośnych. Wyśrodkowanie przycisków w pasku narzędzio-

94

Projektowanie z myślą o urządzeniach przenośnych

wym, tekstu w obszarze etykiety, grafiki na przycisku, narzędzi sterowania w ramce — robię to niemal cały czas. To właśnie idealne dopasowanie krawędzi sprawia, że projekt przestaje być zaledwie dobry, a staje się doskonały. Chcesz wiedzieć, o czym mówię? Przyjrzyj się aplikacji Twitter uruchamianej w iPhonie. W czasie przewijania komunikatów wyświetlanych w porządku chronologicznym na ekranie pojawia się poprzeczny pasek z kilkoma ikonami, oferując użytkownikowi skrótowy dostęp do wszystkich działań, jakie można wykonać na każdym z komunikatów. Ikony są umieszczone dokładnie w połowie wysokości paska, niezależnie od długości komunikatu, i oczywiście rozmieszczone równomiernie na całej szerokości ekranu.

Idealnie wyśrodkowane ikony w interfejsie Twitter for iPhone

Dostrzeżenie niestarannego wyrównania na niewielkim ekranie urządzenia przenośnego wymaga pewnej praktyki, ale gdy nauczysz się już rozpoznawać jego symptomy, potrafisz znaleźć je wszędzie.

Bliskość i grupowanie Podobne do siebie bądź powiązane ze sobą elementy powinny zostać zgrupowane, tak by utworzyć spójną całość. Podstawową zaletą takiego rozwiązania jest możliwość szybkiego omiecenia wzrokiem całej grupy i łatwiejsze określenie zależności pomiędzy jej elementami. Żeby móc definiować zależności pomiędzy poszczególnymi składnikami interfejsu poprzez umieszczenie ich w swoim sąsiedztwie, musisz najpierw określić właściwą hierarchię wewnątrz takiej grupy. MoneyWell, aplikacja pozwalająca zarządzać budżetem domowym, napisana z myślą o iPhone’ach, ma bardzo przejrzysty interfejs. Na głównych ekranach zawierających informacje o  wydatkach pojawiają się dane Projektowanie z myślą o urządzeniach przenośnych

95

zebrane w  kilku wierszach. Każdy wiersz zawiera podany po lewej charakter poniesionych kosztów, a po prawej — wyrównaną do prawej krawędzi — wydaną kwotę. Dlaczego etykiety kwot są wyrównywane do prawej, zamiast pojawiać się natychmiast po etykiecie rodzaju kosztów? Rysunek obok przedstawia symulację takiego rozwiązania. Wraz z  przesunięciem wartości liczbowych w  stronę etykiet czytelność zestawienia znacznie się pogorszyła, ponieważ etykiety kwot nie są w ogóle wyrównane. Projektant aplikacji wykazał się wyczuciem, znajdując powiązania nie tylko pomiędzy nazwą uznania bądź obciążenia rachunku Wyrównanie etykiet z kwotami i  jej wysokością, lecz także widząc je pomiędzy do prawej krawędzi wszystkimi etykietami nazw i etykietami kwot. Wszystkie etykiety i powiązane z nimi elementy muszą być starannie rozmieszczone, gdyż tylko w ten sposób można zapewnić właściwy komfort pracy z  aplikacją. Odpowiednie łączenie elementów ma tu kluczowe znaczenie — jeden błąd może wprowadzić ogromne zamieszanie. Porównaj dwa przykładowe interfejsy — pierwszy z nich przedstawia starannie wyrównaną zawartość aplikacji, na drugim zadanie to wykonano niechlujnie (rysunek poniżej). Zaprezentowany tu przykład przedstawia tekst wyświetlany na ekranie urządzenia przenośnego. W pierwszej wersji nagłówki poszczególnych akapitów znajdują się w niewielkiej odległości od tekstu, Różnica (niekorzystna) powstała dzięki czemu całość została wyraźnie podzielona na w wyniku niewłaściwego trzy grupy składające się z tytułu i właściwej treści. zgrupowania danych Drugi zrzut z ekranu przedstawia tę samą zawartość, lecz tym razem nagłówki są nieco oddalone od tekstu akapitów, przez co całość sprawia wrażenie zbudowanej z sześciu odrębnych części — każdy z nagłówków wygląda, jakby stanowił osobny element strony. Tytuły nie są wyraźnie powiązane z tekstem, do którego się odnoszą. Złe grupowanie w najlepszym razie grozi jedynie marnotrawstwem miejsca na ekranie, w  najgorszym natomiast nie pozwala ocenić należycie powiązań pomiędzy elementami projektu.

96

Projektowanie z myślą o urządzeniach przenośnych

Właściwe grupowanie i odpowiednio dobrane odstępy między wierszami ułatwiają czytanie

Tekstura W naszym otoczeniu próżno szukać rzeczy idealnie płaskich bądź o jednakowej powierzchni. Wszystko wokół jest pełne skaz i nierówności, a w przypadku substancji naturalnych, takich jak skóra, papier, tkanina lub drewno, niedoskonałość jest poniekąd cechą rozpoznawczą. Jeżeli chcesz sprawić, by interfejs wyglądał możliwie naturalnie, będziesz musiał zacząć zwracać uwagę na szczegóły. Wszystko wokół nas ma mniej lub bardziej niewyraźną Delikatna tekstura na powierzchni wprowadza teksturę — nawet bardzo gładkie kolosalną różnicę powierzchnie. Rozejrzyj się wokół — każda powierzchnia i każdy przedmiot mają swoją teksturę. W ramach ćwiczeń możesz postarać się odtworzyć niektóre z nich w programie graficznym, z którego korzystasz na co dzień. Trzymaj w zanadrzu całe archiwum tekstur, by dzięki nim tworzyć skrajnie różne projekty. Oto przykład, jak za pomocą tekstury poprawić nudny i nieciekawy projekt tła przycisku. Widoczny po lewej stronie przycisk Sign up (zapisz się) umieszczono na jednolitym tle. Czego imitację miało ono stanowić? Z pewnością niczego realistycznego. To po prostu zwykła, nudna, jednolita powierzchnia. Nie przedstawia niczego szczególnego; ot, zwykły jednolity kolor. Po prawej znajduje się nieco inny przycisk umieszczony na tle delikatnej tekstury. Niebieskie tło etykiety przycisku zostało urozmaicone szumem, co zwiększyProjektowanie z myślą o urządzeniach przenośnych

97

ło jej ziarnistość i  dało wrażenie realizmu, natomiast tło całości przypomina teraz papier milimetrowy. Dodanie tekstury, wzoru czy obiektu znanego z  codziennego życia wzmaga zawsze wrażenie naturalności. Takie rozwiązania sprawiają, że aplikacja wyróżnia się korzystnie na tle innych.

oświetlenie Kiedy wolno stosować gradienty? Do czego służy cień dodawany pod obiektem? Jak radzić sobie z  rozjaśnianiem krawędzi? Co łączy wszystkie te sprawy? Dzięki nim każdy element interfejsu będzie wyglądał naturalniej — a wszystko za sprawą odpowiedniego oświetlenia. Sekret pięknych interfejsów aplikacji kryje się w stopniu ich realizmu. Im bardziej obiekty dwuwymiarowe będą przypominać obiekty trójwymiarowe, tym bardziej całość projektu będzie przypominać to, z czym mamy do czynienia w rzeczywistości. Te fałszywie trójwymiarowe obiekty rzucają cienie niczym przedmioty z  Twojego biurka. Aby dwuwymiarowy element projektu nabrał głębi, trzeba oszukać mózg, sprawić, by uwierzył, że ma do czynienia z  czymś, co wystaje z  ekranu. Efekt ten wywołuje się, manipulując światłem. Interfejs wygląda najkorzystniej, gdy przyjmiesz, że źródło światła znajduje się na górze ekranu i oświetla równomiernie cały tekst, wszyst- Nieco głębi zupełnie zmienia wrażenie kie widżety i  przyciski. W  związku z tym wszystkie one powinny rzucać cień i błyszczeć na krawędziach tak, jakby to było w rzeczywistości. Przycisk z zaokrąglonymi rogami, lecz pozbawiony gradientu barw, rozjaśnień na brzegach oraz cienia, będzie wyglądał po prostu płasko, a chodzi przecież o wywołanie przeciwnego wrażenia. Przyjrzyjmy się zatem dwóm przykładowym przyciskom. Po lewej stronie widać wypełnioną kolorem figurę z  zaokrąglonymi rogami, z umieszczonym wewnątrz tekstem. Całość wygląda płasko niczym ilustracja, przez co brak jej realizmu. Po prawej znajduje się ten sam kształt, lecz wzbogacony o efekty zastosowania opisanych poniżej technik. GRaDieNT

Znajdziemy to stopniowe przejście od intensywnej czerwieni do nieco delikatniejszego jej odcienia. Jaśniejszy fragment przycisku znalazł się na górze, ponieważ całość ma wyglądać tak, jakby światło padało z góry. Założyliśmy, że promienie trafią najpierw na szczyt przycisku, dlatego ten jego fragment jest jaśniejszy.

98

Projektowanie z myślą o urządzeniach przenośnych

R o Z J a ś N i a N i e k R aW ę D Z i

Na krawędziach przycisku pojawiają się delikatne rozjaśnienia, które nikną, nim osiągną skraj obszaru przycisku. W ten sposób sugerujemy, że krawędź jest bardzo wyraźna. Dodanie rozjaśnienia na krawędzi jest jednym z łatwiejszych sposobów zaznaczania, że cały kształt obiektu jest trójwymiarowy i wyraźnie odstaje na otaczającym go tle. P o łyS k

Technikę tę zapoczątkowali styliści firmy Apple. Przyciski w systemie iOS są zaprojektowane w taki sposób, że sprawiają wrażenie pokrytych błyszczącą warstwą, od której światło odbija się tak, jakby układała się w trójwymiarową formę. Efekt ten uzyskuje się, dodając delikatną, półprzezroczystą warstwę na górnej połowie przycisku. Cień

Tak sam przycisk, jak i umieszczony na nim napis rzucają delikatny cień. W dobrze zaprojektowanym interfejsie wszystko znajduje się ponad warstwą tła albo jest w niej zatopione, ale nigdy nie leży płasko na tej powierzchni. Chodzi o uzyskanie efektu delikatnej wypukłości, niczym w cyfrach umieszczanych na karcie kredytowej, czy lekkiego zagłębienia, jakie pojawia się na kartce papieru po odbiciu tekstu przez prasę drukarską. W przedstawionym przykładzie tekst sprawia wrażenie wystającego odrobinę ponad powierzchnię przycisku. To nieduże wyniesienie sprawia, że oświetlone z góry litery będą rzucać cień dokładnie pod siebie. Pamiętaj, wszystko na świecie rzuca cień. Jeśli nie rysujesz akurat wampira, a chcesz, żeby obiekt miał odpowiednią głębię i wyglądał jak ułożony na powierzchni, musisz zadbać o odpowiednie zaznaczenie cienia, choćby w minimalnym stopniu.

Pisanie aplikacji na urządzenia przenośne jest wyzwaniem Projektowanie aplikacji na urządzenia przenośne jest chwilami prostsze niż pisanie programów czy stron internetowych działających na zwykłych komputerach, lecz czasami jest zdecydowanie bardziej wymagające. Dużym ułatwieniem jest to, że ekran urządzenia przenośnego jest mniejszy, więc łatwiej go zapełnić, a przeznaczenie aplikacji przenośnej jest znacznie lepiej określone. Ciekawe, że największe trudności rodzą się z tych samych przyczyn — mniejszy ekran sprawia, że wszystkie niedociągnięcia są łatwiej dostrzegalne, mniej pikseli do dyspozycji każe także podejmować decyzje dotyczące tego, co należy usunąć, a co pozostawić w aplikacji. Mniej opcji Projektowanie z myślą o urządzeniach przenośnych

99

programu oznacza z kolei ni mniej, ni więcej, tylko to, że każda z nich będzie uważniej oceniona przez użytkownika. Gdy golfista ćwiczy uderzenie, zwraca uwagę na wszystkie szczegóły. Tak samo projektant musi być świadom tego, co wpływa na jakość projektu, i nie wolno mu pominąć żadnego z istotnych elementów. Oto kilka rad, których mogę udzielić Ci na podstawie własnych doświadczeń:

• Staraj się zawsze dążyć do możliwie realistycznego wyglądu aplikacji. Nie wprowadzaj do projektu cieni czy rozjaśnień, które nie miałyby szansy pojawić się w przyrodzie.

• „Mniej więcej” nigdy nie wystarcza. Musisz dopasować wszystko z dokładnością do jednego piksela.

• Jeżeli sam nie potrafisz skonstruować dobrej pułapki, użyj tej, którą masz. Jeżeli odkryjesz, że systemowe przyciski Apple wyglądają korzystniej niż Twoje własne projekty, zrezygnuj ze swoich pomysłów.

• Ogranicz funkcje interfejsu — sprawdź, co jest rzeczywiście niezbędne na każdym z ekranów, a co można przenieść gdzie indziej lub w ogóle usunąć.

• Wszystkie elementy interfejsu powinny albo nieco wystawać ponad powierzchnię tła, albo być w niej nieco zatopione. Nic nie ma prawa znaleźć się dokładnie w płaszczyźnie tła i nie rzucać cienia.

• Jeżeli nie możesz określić na pierwszy rzut oka przeznaczenia danej ikony, znaczy to, że została ona źle zaprojektowana.

• Delikatne tekstury, niewielki szum lub zmatowienie powierzchni sprawiają, że grafika komputerowa wygląda naturalniej. Przypomnij sobie, jak naprawdę wyglądają obiekty, które starasz się odtworzyć, i jak wygląda ich powierzchnia.

• Nie umieszczaj ikon sterowania w miejscach niedostępnych dla osoby trzymającej urządzenie w najbardziej naturalny sposób.

• Ogranicz możliwości aplikacji, ale nie rezygnuj z ciekawych rozwiązań wizualnych, bo to właśnie one nadają charakter aplikacji.

• Słowa są integralną częścią interfejsu — dobieraj je starannie. Całe swoje życie zawodowe spędziłem na projektowaniu aplikacji internetowych, więc tworzenie programów z myślą o urządzeniach przenośnych jest dla mnie niczym powiew świeżego powietrza — nowe wytyczne, nowe wyzwania, inne sposoby rozwiązywania problemów i zupełnie inne pola do osiągnięcia sukcesu. Dziedzina aplikacji na urządzenia przenośne ciągle ewoluuje, ale pamiętaj, że najważniejszym celem każdego projektanta, niezależnie od platformy, na jakiej przyszło mu pracować, jest zapewnienie komfortu korzystania z aplikacji.

100

Projektowanie z myślą o urządzeniach przenośnych

Projektant, który zdołał opanować zasady projektowania aplikacji przenośnych, odkryje, że otwierają się przed nim zupełnie nowe możliwości. Nic nie stoi na przeszkodzie, abyś już dziś wkroczył na tę wymagającą, ale jakże satysfakcjonującą ścieżkę. Wystarczy nieco rozsądku i solidna porcja ćwiczeń.

o autorze Biorę udział wyłącznie w tych projektach, które dają mi satysfakcję. Zajmuj się tylko tym, co Cię porusza, pracuj wyłącznie nad zadaniami, które Cię fascynują. Mike Rundle (1983) jest magistrem informatyki. Ukończył Rochester Institute of Technology. Mieszka w  Raleigh, w  Nowej Karolinie, ciesząc się towarzystwem jej wesołych mieszkańców, kwitnącą gospodarką i piękną pogodą. Projektowaniem aplikacji internetowych zajmuje się od późnych lat dziewięćdziesiątych; ostatnio koncentruje swoje wysiłki na tworzeniu rozwiązań przeznaczonych dla urządzeń iPhone, iPad i komputerów Mac. Jego ulubionym kolorem jest stalowoszary. Ma labradora czarnej maści o imieniu Dora, a wolny czas dzieli między golf, piłkę nożną i tenis stołowy. Dla Czytelników ma jedną radę — zacznijcie jak najwcześniej i nigdy nie rezygnujcie. Uczcie się stale, nigdy nie osiadajcie na laurach, starajcie się wykraczać poza obszar, na którym czujecie się pewnie, i zawsze bądźcie ciekawi nowinek.

Projektowanie z myślą o urządzeniach przenośnych

101

Tematy poruszane w tym rozdziale: Proces projektowania. Wizualizacja we wstępnym szkicu. Zapis stosowany w szkicach. Rozrysowywanie kadrów. Techniki i narzędzia. Szablony mało szczegółowe i wysoko szczegółowe. Prototypy. Testy i ostatnie poprawki.

P

oczątkiem każdego projektu jest pomysł. Tylko nieliczne okazują się godne realizacji, pozostałe są po prostu kiepskie. Niejeden wierzy, że wpadł na doskonały pomysł i dobrze wie, jak powinien go realizować, a jednak w większości przypadków ludzie ponoszą porażkę. To nie dziwi, bo sam pomysł to za mało. Kręta i kamienista ścieżka prowadząca od mglistego zamysłu do rezultatu dopracowanego w najdrobniejszych szczegółach jest nie mniej ważna niż sama idea — o ile nie ważniejsza. Pamiętajmy bowiem, że pomysł bez właściwego wykonania na zawsze pozostaje w sferze teoretycznych, abstrakcyjnych rozważań. Zatem o sukcesie decyduje umiejętność wybrania odpowiedniego pomysłu, nadania mu właściwego kształtu oraz rozwinięcia go do pełnej postaci. Geniusz to jeden procent natchnienia i dziewięćdziesiąt dziewięć procent potu. Tomasz Edison

Jak zatem wybrać najlepszy pomysł i w jaki sposób przekształcić go w elegancki projekt? Pierwszym etapem pracy jest wykonanie odpowiednich badań (poznanie kontekstu, założeń projektu, określenie jego użytkowników, wymagań biznesowych oraz wszelkich ograniczeń), następnie należy opracować szczegóły i wreszcie ocenić efekty pracy. Proces kończy się wykonaniem prototypu, opracowaniem projektu graficznego i dopiero wtedy przystępujemy do właściwego tworzenia kodu. Zadanie projektanta polega na jasnym przekazaniu zasad funkcjonowania produktu. Cel ten można osiągnąć, stosując szeroki wachlarz narzędzi, specjalnie dobranych technik oraz odpowiednich metod. To, które z nich należy zastosować, zależy od wielu czynników. Każdy oczywiście odczuwa ogromną pokusę, by od razu przystąpić do pracy nad stroną graficzną projektu i zająć się wszystkimi drobnymi szczegółami. Nie wolno jednak zapominać, jak ważne jest dogłębne zrozumienie problemu i zbadanie wszystkich możliwych ścieżek jego rozwiązania, by wybrać z nich tę najlepszą — szczególnie w początkowej fazie trwania prac. Niezależnie od tego, na jakie metody pracy się zdecydujemy, nie wolno nam rezygnować z tworzenia szablonu. Określenie „szablon” jest bardzo pojemne — każdy projektant rozumie je inaczej, więc i  definicje podaje się różne. W  tym rozdziale będziemy posługiwać się tym terminem w najszerszym możliwym znaczeniu: mając na myśli wynik procesu tworzenia, badania i dopracowywania pomysłów poprzez wykonanie kolejnych pro-

104

Szkice, szablony i prototypy

jektów w celu zaprezentowania ich innym projektantom, działowi finansowemu oraz użytkownikom, by uzyskać ich opinie i akceptację. Etap tworzenia projektu, czyli praca nad szkieletem strony, to moment, w którym należy zadbać o projektowanie interakcji, opracować system poruszania się po stronie oraz zastanowić się, jakie informacje mają się na niej znaleźć57. Opracowywanie szkieletu to zazwyczaj zadanie architekta informacji. Architekt informacji zajmuje się tworzeniem struktury stron internetowych i programów komputerowych, mając na celu zapewnienie użytkownikom jak największego komfortu pracy, zaproponowanie intuicyjnego systemu nawigacji oraz rozmieszczenia informacji, tak by były one zawsze dostępne lub łatwe do znalezienia. Jak jednak poradzić sobie z tworzeniem szkieletu, jeśli w zespole, z którym pracujesz, nie ma architekta informacji bądź jeżeli wykonujesz całość projektu sam, na zlecenie? Czy można pozwolić sobie na opuszczenie tego etapu i przejście bezpośrednio do pracy nad projektem? Jak się wkrótce okaże, tworzenie szablonu nie wykracza poza możliwości osoby, która nie miała z tym wcześniej do czynienia, co więcej, każdy projektant może się wiele nauczyć, zgłębiając sekrety pracy nad szablonem i wykorzystywania go w późniejszych etapach tworzenia aplikacji. Uważam, że nigdy nie warto rezygnować z opracowywania szablonu. Istnieją różne metody tworzenia szablonu, a  wybór ostatecznej zależy przede wszystkim od efektów, jakie chcesz osiągnąć, i  kontekstu, w  jakim się poruszasz. Tutaj znajdziesz opis procesu przechodzenia od czystego pomysłu do konkretnego rozwiązania oraz wyjaśnienie poszczególnych etapów pracy, opis wyboru podejścia do zagadnienia, dobrania odpowiednich narzędzi i wreszcie zwyczajów związanych z projektowaniem interfejsu aplikacji. Pamiętaj przy tym, że żadna z przedstawionych tu rad nie ma charakteru autorytatywnego stwierdzenia. Traktuj ten rozdział przede wszystkim jako punkt startowy do pracy nad nowymi projektami, źródło informacji o nieznanych Ci dotąd narzędziach, dzięki któremu zdołasz podnieść jakość wykonywanej pracy.

od idei do realizacji — podróż przez pomysły Projektowanie przypomina podróż, w czasie której pomysły powoli nabierają kształtów, rozwijają się w umyśle projektanta i ze szkiców i szczegółowych rysunków przeradzają się w modele interaktywne. Proces rozpoczyna się zazwyczaj od gruntownego przemyślenia wszystkich pomysłów przedstawianych najczęściej w postaci zgrubnych szkiców (rysunek poniżej). Szkice wykonuje się po to, by móc jak najszybciej sprawdzić jak najwięcej pomysłów, od57 J.J. Garrett, The Elements of User Experience: User-Centered Design for the Web, Peachpit Press 2002. Szkice, szablony i prototypy

105

rzucić te złe i przedstawić klientowi kilka konkretnych rozwiązań, które następnie będą mogły przerodzić się w szkielet aplikacji. W każdym kolejnym etapie prac nad projektem zwiększa się poziom skomplikowania (w tym przypadku szczegółowość) przygotowywanych szkiców. Ostatecznie projektant tworzy w ten sposób prototyp rozwiązania i przygotowuje fazę testów, w której uczestniczą przyszli użytkownicy lub testerzy.

W kolejnych etapach prac nad projektem stopniowo odrzucamy możliwości, zwiększając jednocześnie poziom szczegółowości pozostawionych wariantów

Zarys pomysłu w szkicu Pierwszy etap prac nad projektem to opracowanie zarysu pomysłów. Polega on przede wszystkim na przemyśleniu wszystkich koncepcji i zbadaniu ich wad oraz zalet. Na tym etapie projektant stara się uchwycić mgliste idee, jakie rodzą się w jego głowie. Najważniejszym narzędziem, z  jakiego korzysta się w  tym czasie, jest szkicownik. Projektant tworzy wtedy wiele szybkich szkiców swoich pomysłów. Rysunki te są wizualizacją wszystkich pomysłów, jakie zrodziły się w pierwszych chwilach rozmyślań o  projekcie. Dzięki nim możesz poprowadzić merytoryczną dyskusję z  innymi członkami zespołu i  porównać wizje rozwiązań. W  ten sposób unikniecie wielu bezowocnych i zbędnych rozważań na temat hipotetycznego wyglądu strony internetowej. Ponieważ zastosowanie tego rozwiązania wymaga jedynie ołówka i kartki papieru, koszty, czas i potencjalne trudności związane z wdrażaniem

106

Szkice, szablony i prototypy

nowych narzędzi po prostu nie zaistnieją. Przeprowadzenie kilku cykli projektowania, sprawdzania, oceniania (z których każdy sprowadza się do wykonania szkicu) i omówienia wyników w szerszym gronie zajmuje nie więcej niż kilka minut. Jeżeli tylko wpadniesz na jakiś pomysł, możesz natychmiast go naszkicować, niezależnie od tego, gdzie jesteś. Zajmie Ci to zaledwie kilka chwil. Największą jednak zaletą szkicu jest to, że pozbycie się go nie nastręcza większych trudności. Uchwycony w ten sposób pomysł nadal pozostaje tworem dość abstrakcyjnym, więc odrzucenie go jest znacznie prostsze, niż gdyby wiązało się to z usunięciem wyników wielu godzin pracy. Wykonanie szkicu jest tanie i mało czasochłonne, więc wyrzucenie go też jest bardzo proste. Tworząc szkic, nie szukamy rozwiązania, raczej staramy się zbadać możliwie wiele ścieżek. Jakość, szczegółowość i staranność są w tym momencie zupełnie nieistotne. Szkic nie służy ocenie pomysłu, bo każda z przedstawianych w ten sposób propozycji może okazać się tą właściwą (choć nie musi). Ponieważ szkic nie jest nadmiernie szczegółowy, zachęca do eksperymentowania. Można umieścić na nim nawet najbardziej nieprawdopodobne czy niespotykane rozwiązania, bo kto wie, może ich fragmenty okażą się przydatne w wybranej ostatecznie wersji. Nie przejmuj się też powielaniem pomysłów lub tworzeniem nazbyt podobnych do siebie propozycji — na grupowanie i usuwanie powtarzających się elementów przyjdzie jeszcze czas. Ogólnie mówiąc, im więcej pomysłów powstanie na tym etapie pracy, tym łatwiej będzie Ci w późniejszych fazach rozważań dostrzec zalety lepszych i odkryć wady gorszych.

Szkic prostego formularza wyszukiwania

Szkice, szablony i prototypy

107

Szkice sprawdzają się doskonale, gdy musisz współpracować z  innymi ludźmi, gdy nadchodzi czas wymiany opinii i pomysłów. Ponieważ odręczne rysunki nie sprawiają wrażenia oficjalnych propozycji i z założenia są jedynie pewnym przybliżeniem proponowanego rozwiązania, ludzie zdają się spoglądać na nie bardziej przychylnie. Oczywiście szkic nie będzie nadawać się do tego, by przedstawić go klientowi, ale pozwoli doskonale ożywić dyskusję w zespole pomiędzy projektantami i programistami. Poznanie różnych punktów widzenia we wstępnej fazie prac nad projektem pozwala wcześnie wyeliminować słabsze pomysły i skupić się na lepszych rozwiązaniach. Poza tym ułatwia odkrywanie nowych dróg i wzbogacanie nimi znanych już metod pracy. Na czym jednak ma polegać „badanie nowych pomysłów”? Czy chodzi o sprawdzanie możliwości różnych układów strony, wybranych ich fragmentów, czy może należy raczej skupić się na interakcjach z określonymi elementami strony? Czy mamy tu na myśli sprawdzanie działania użytkownika na wielu stronach serwisu? Odpowiedź brzmi „tak”. Pod tym terminem kryją się wszystkie wymienione przeze mnie czynniki, a także wiele innych.

Jak rodzi się zarys pomysłu? Umówmy się — aby szkicować, nie musisz dysponować niebywałym talentem malarskim. Szkic to nie dzieło sztuki. Twoje rysunki przypominają obrazy kubistów? Doskonale! Potrafisz szkicować! Szkice to nie ostateczne rozwiązania, więc nie bój się ołówka i nie zastanawiaj się nad jakością wykonywanych prac. Nie musisz znać zasad perspektywy bądź kompozycji. Wszelkie obawy sprawią jedynie, że będziesz wahać się, czy powinieneś przedstawiać swoje pomysły i czy sprawdzać nowe rozwiązania. Nikt nie określił nigdy, ile czasu powinien powstawać zarys pomysłu — może to trwać kilka godzin, ale równie dobrze może rozciągnąć się na całe dni. Doświadczenie nauczyło mnie, że nad początkową fazą prac należy spędzać najwyżej kilka godzin dziennie, a potem trzeba pozwolić głowie nieco odpocząć. Dobre pomysły rodzą się nieoczekiwanie — w porach i miejscach, w których najmniej się ich spodziewamy. Pomysł może się objawić, gdy przełączasz kanały telewizyjne lub gdy jesteś w galerii sztuki — zdarzało mi się to często. Jeżeli chcesz wprawić się w twórczy nastrój, przede wszystkim odpocznij i staraj się myśleć pozytywnie58. Rób to, co lubisz, a resztę pozostaw swojej podświadomości. Jeżeli się denerwujesz, zajmij się czymś innym i wróć do pracy twórczej, dopiero gdy się uspokoisz. Gapienie się godzinami w pustą kartkę nigdy nie pomaga. Przystępując do zbierania pomysłów, staraj się zachować skupienie, wyłącz wszystko, co może Cię rozpraszać (program pocztowy, komunikatory czy telefon). Zanim znajdziesz właściwe rozwiązanie, będziesz musiał wypróbować wiele 58 D. Norman, Emotional Design: Why We Love (or Hate) Everyday Things, Basic Books 2003. 108

Szkice, szablony i prototypy

chybionych pomysłów, a to niełatwe, gdy z oddali ciągle dolatuje Cię dźwięk dzwonka telefonu, a w rogu ekranu miga powiadomienie o nowej wiadomości od znajomego. Ponieważ tworzenie zarysu pomysłu ma zająć Ci tylko kilka godzin dziennie, nie skupiaj się zbytnio na poszczególnych szkicach. Zamiast zajmować się szczegółami, poświęć swoją uwagę najistotniejszym zagadnieniom. Jakie działania musi wykonać klient sklepu internetowego, by zakupić w nim koszulkę? Jak pomóc czytelnikom w znalezieniu treści, której szukają na odwiedzanej przez nich po raz pierwszy stronie? Czy warto zmienić rozwiązanie zastosowane obecnie na stronie domowej klienta, wprowadzając w nawigacji zmiany sugerowane przez osoby odwiedzające stronę? To pytania, na które powinieneś szukać teraz odpowiedzi. Zauważ, że żadne z nich nie wymaga udzielania szczegółowych wyjaśnień, więc i Twoje szkice nie muszą zawierać wielu detali. Projektant może tworzyć zrąb pomysłu w samotności, ale pamiętaj, że włączenie do pracy innych członków zespołu (niekoniecznie grafików) przynosi często nadspodziewanie korzystne efekty. Nieważne, czy będziecie prowadzić rozważania, siedząc przy jednym stole, czy też będziecie dzielić się pomysłami zdalnie i czekać na reakcje pozostałych — warto w trakcie pracy na bieżąco brać pod uwagę opinie innych ludzi, by natychmiast uwzględniać je w swoich planach. Jedną z pułapek, w jakie często wpadają projektanci, jest rozpoczynanie pracy nad nowym pomysłem przed ukończeniem poprzedniego. Takie zachowanie określa się czasami mianem syndromu „od pomysłu do pomysłu”59. Napady lęku, przeświadczenie o bezsensie budowanego rozwiązania są codziennością każdego projektanta. Najłatwiej pozbyć się ich, przystępując do pracy nad czymś nowym w nadziei, że to rozwiązanie okaże się lepsze. Takie działanie nie stanowi żadnego problemu, dopóki występuje w fazie pobieżnego sprawdzania dostępnych opcji, ale upewnij się, że wykonasz szkice ważniejszych pomysłów, nie ograniczając się wyłącznie do sprawdzania ich i odrzucania w swojej głowie. Jeżeli zaliczasz się do ludzi kreatywnych, prawdopodobnie wiesz, o  czym mówię. Szukanie nowych pomysłów to doskonała metoda tworzenia ogólnych podwalin projektu, ale umiejętność pozostania wiernym opracowanym planom też jest niebywale cenna. Jeżeli jej nie opanujesz, na Twoim biurku szybko zgromadzi się sterta niedokończonych szkiców, które w najlepszym razie staną się źródłem rozczarowania, a żaden z nich nie będzie zawierać esencji myśli, z których powstał. Dlatego warto rozpocząć współpracę z innymi ludźmi już na tym etapie — dzięki nim łatwiej utrzymasz się na obranym kursie i lżej będzie Ci zrównoważyć potrzeby twórcze z ich realizowaniem. 59 S. Belsky, How To Overcome Idea-to-Idea Syndrome, „Good Business”, http://www.good.is/post/how-to-overcome-idea-to-idea-syndrome. Szkice, szablony i prototypy

109

Techniki Prace nad zarysem pomysłu warto rozpocząć od znanych idei (szczególnie jeśli chwilowo brak Ci natchnienia). Przypomnij sobie znane Ci rozwiązania i  staraj się je wykorzystać. Odwołaj się do sprawdzonych rozwiązań typowych problemów w danej dziedzinie, bo przez lata dowiodły one swojej skuteczności. Świat oferuje wiele dobrze opisanych i  sprawdzonych pomysłów spotykanych w  niemalże każdym interfejsie użytkownika. Przykładami mogą być autouzupełnianie zawartości pola, organizowanie danych w serwisie w osobnych kartach czy system powrotu do stanu sprzed wystąpienia błędu. Nie znaczy to, że namawiam Cię do ograniczania się do stosowania wyłącznie sprawdzonych rozwiązań. Nie bój się eksperymentować i badaj nieznane tereny w poszukiwaniu nowych pomysłów.

Burza mózgów Burza mózgów to chyba najbardziej znana i zapewne najskuteczniejsza metoda pozyskiwania nowych pomysłów w  dużych ilościach, szczególnie jeśli w  przedsięwzięciu uczestniczy więcej osób. W trakcie takiego spotkania projektanci dzielą się opiniami na dany temat i omawiają je, starając się unikać ferowania wyroków. Tworzenie rozwiązania w oparciu o cudze pomysły potrafi prowadzić do interesujących wniosków. Metoda ta przypomina w jednym aspekcie szkicowanie — liczba pomysłów nie jest bez znaczenia.

Zapisywanie pomysłów, czyli brainwriting Brainwriting, zwany też zapisywaniem pomysłów, jest pewną odmianą burzy mózgów. Technika ta wymaga od członków zespołu zapisania na kartkach własnych pomysłów (nowych lub modyfikacji już istniejących). Po kilku minutach każdy członek grupy przekazuje swoją kartkę sąsiadowi, który rozwija poznaną w ten sposób koncepcję. Po zakończeniu cyklu wybiera się najciekawsze pomysły, omawia się je i rozwija.

Przeglądanie słownika wyrazów bliskoznacznych To dokładnie tak proste, jak wskazuje nazwa. Projektanci często korzystają z tej metody, by uściślić pojęcia związane ze słowami kluczowymi oraz kontekstem projektu. Gdy zbierzesz już odpowiednio szeroki zasób pojęć, będziesz mógł zgłębić temat za pomocą innych metod.

Mapowanie myśli To przydatna metoda tworzenia nowych pomysłów i organizowania ich w określoną strukturę. Polega na rysowaniu diagramu przedstawiającego słowa, zadania, idee i ich pochodne oraz ich związek z pomysłem wyjściowym. Poszczególne elementy diagramu znajdują się na jego gałęziach. 110

Szkice, szablony i prototypy

Mapa powstała w czasie burzy mózgów poświęconej pracy nad nowym blogiem

Uzupełnianie luk Zgodnie z sugestią zawartą w nazwie technika ta zakłada określenie dwóch punktów — startowego i końcowego (na przykład dwóch pomysłów kluczowych dla projektu, nad którym pracujesz) — i wypełnienie przestrzeni pomiędzy nimi. Wypełnianie polega na wypisaniu wszystkich pomysłów, jakie zdołasz umiejscowić pomiędzy dwoma punktami granicznymi, oraz określeniu, jakie idee powinny znaleźć się między nowo dodanymi pomysłami. Potem możesz przejść do budowania grafu, na którym połączysz poszczególne pomysły, a każdy z jego węzłów przekształcisz w mapę myśli. To najprostsze z technik wymiany myśli, ale warto też pamiętać o innych, bardziej zaawansowanych narzędziach, które pozwolą Ci uzyskać większą wydajność w czasie etapu szkicowania.

Technika rękawic bokserskich Technikę tę opisał po raz pierwszy Harry Bringnull60. Polega ona na wykonaniu szkicu każdej z podstron serwisu na osobnej przyklejanej kartce z notatnika, a następnie wyrysowaniu ścieżki podróży użytkownika przez wszystkie kartki. Początkowo skup się na wyznaczeniu ścieżki „doskonałej” (tj. pomijającej ewentualne błędy wprowadzania danych oraz przypadkowość). 60 H. Bringnull, The Boxing Glove Wireframing Technique, „90 percent of everything”, http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique. Szkice, szablony i prototypy

111

Ograniczenie powierzchni do rozmiarów przyklejanej kartki z notatnika sprawia, że przygotowując szkice, będziesz się czuć, jakbyś wykonywał je w rękawicach bokserskich, to znaczy będziesz mógł ująć na nich tylko najważniejsze szczegóły. Metoda ta daje szybkie efekty i doskonale sprawdza się w czasie pracy w grupie, ponieważ każdy członek zespołu może dołączyć i skomentować pracę w dowolnym momencie.

Tablica Tablica pozwala zebrać wszystkie prace związane z danym projektem w jednym miejscu. Zazwyczaj w charakterze tablicy wykorzystuje się arkusz papieru przypięty do ściany. Na nim umieszcza się wszystkie dokumenty, w tym także specyfikację projektu, wyniki ankiet, szkice, diagramy przepływu informacji, wymagania dotyczące funkcjonalności oraz komentarze użytkowników. Tablica służy prezentacji problemów i sugerowaniu rozwiązań. Ponieważ wszyscy mają do niej dostęp, mogą bez trudu dodawać własne komentarze oraz sugerować poprawki. Tablica to doskonałe pole do popisu dla projektantów — pozwala im prezentować własne pomysły i zachęca do współpracy61.

Doskonały przykład tablicy (dzięki uprzejmości Jasona Robba, http://www.flickr.com/photos/jasonrobb/3751955711) 61 Tablicę można także wykorzystywać do projektowania wyglądu aplikacji (to tzw. moodboarding) — umieszcza się wtedy na niej szkice projektów, obrazów, tablic kolorów oraz motywów graficznych, a nie propozycje zawartości serwisu, jego struktury i architektury informacji. 112

Szkice, szablony i prototypy

Aby tablica pomogła nam zorganizować pracę, musi mieć odpowiednią strukturę. Należy jasno wskazać związki pomiędzy poszczególnymi elementami i zgrupować te elementy zgodnie ze zdefiniowaną strukturą. Na przykład na jednej stronie kartki możesz umieścić dokumenty związane z wymaganiami stawianymi aplikacji, potrzebami zgłoszonymi przez użytkowników, miernikami sukcesu oraz maskami publicznymi62. Pozostałą część tablicy należy wtedy podzielić na kolumny, z których każda będzie odpowiadać jednej stronie, cesze lub procesowi (na przykład stronie docelowej, stronie logowania, stronie ustawień profilu itp.). Pozostałą część arkusza dzieli się na kolumny, z których każda odpowiada jednej stronie, cesze lub procesowi (na przykład stronie docelowej, stronie logowania czy stronie ustawień profilu). Wprawdzie sporą część kolumn zajmują szkice i  notatki, ale nie brak w  nich także miejsca na uwagi i komentarze innych członków zespołu. Wszystkie informacje mogą być umieszczane na tablicy na przyklejanych kartkach z notatnika, należy jedynie upewnić się, że każda z nich jest widoczna w całości. Gdy tablica przestanie się już zmieniać, rozpocznijcie w zespole dyskusję na temat jej zawartości, by potem przygotować poprawioną wersję szkiców.

Zapis stosowany na szkicach Aby zaznaczyć na szkicu działania podejmowane przez użytkownika, możesz posłużyć się specjalną formą zapisu. Taki system znaków pozwoli Ci przedstawić graficznie poszczególne stany interfejsu, działania użytkownika oraz zdarzenia, jakie pojawiają się w ich wyniku. Specjalna notacja pomaga projektantom szybko przedstawiać swoje pomysły i unikać nieporozumień w czasie ich interpretowania. Wielu projektantów chwali sobie szczególnie system zapisu Interactive Sketching Notation63 utworzony przez Jakuba Linowskiego. Narzędzie to pozwala opisywać w bardzo czytelny sposób poszczególne elementy szkicu (zaznaczane na czarno i szaro) oraz wszystkie zdarzenia (zaznaczane na czerwono). Wprowadzenie powiązania między stanem interfejsu a zachowaniami użytkownika pozwala projektantom skuteczniej opisywać wszystkie działania. Rysunek przedstawiony powyżej to przykład prostego szkicu, na którym zastosowano opisaną tu notację do zaprezentowania procesu logowania do serwisu internetowego. Szkic ilustruje kilka możliwych scenariuszy i przedstawia niektóre z możliwych rozwiązań w każdym z rozważanych przypadków.

62 Maski publiczne to fikcyjne postaci tworzone w czasie trwania prac badawczych, symbolizujące grupy użytkowników korzystających ze strony internetowej, produktów określonej marki czy dowolnego towaru w podobny sposób. Maski przydają się niezwykle podczas rozważania działań, jakie podejmują dani użytkownicy, określania usług, jakich mogą poszukiwać, i odpowiedniego projektowania wyglądu strony, tak by odpowiadał większości ich potrzeb. 63 http://www.linowski.ca/sketching. Szkice, szablony i prototypy

113

Szkic z podstawowymi formami notacji

Rozrysowanie kadrów Opowiadanie historii za pomocą sekwencji obrazów to metoda znana od początku istnienia gatunku ludzkiego. Rysunki pojawiały się na ścianach jaskiń i zdobiły wnętrza piramid — ludzie od wieków używają grafiki, by opisywać wydarzenia i zachowywać historię dla potomności. Wielu z nas wyobraża sobie konkretne zdarzenia i  działania właśnie w  postaci kadrów, które pojawiają się wewnątrz naszych głów, zatem rozrysowanie ich na kartce papieru nie jest niczym innym jak nadaniem tym wyobrażeniom kształtu. W ten sposób przekazywanie informacji przebiega szybciej i w bardziej zrozumiały sposób. Rozrysowanie kadrów ma ułatwić wyjaśnienie konkretnych zdarzeń i działań. W procesie projektowania efekt ten uzyskuje się poprzez wykonanie serii rysunków, obrazów czy zdjęć (czasami nawet filmów). Dzięki nim projektant może przedstawić w prosty sposób bardziej złożone idee i już na początku prac nad zleceniem określić to, co w nich najważniejsze, i nadać im odpowiedni kontekst. Taka forma tchnięcia życia w pomysł pozwala podkreślić potrzeby i cele użytkownika aplikacji, a Tobie ułatwi określenie tych cech programu bądź strony, które są najważniejsze z punktu widzenia użytkownika i które powinieneś uwzględnić, projektując ostateczne rozwiązania.

114

Szkice, szablony i prototypy

Kilka kadrów scenki przedstawiającej zasadę działania przenośnego systemu opłat parkingowych

Potęga rozrysowywania kadrów to przede wszystkim możliwość uchwycenia kwintesencji myśli i przekazania jej w sposób zrozumiały dla wszystkich wokół. Opisywanie i  analizowanie różnych scenariuszy zdarzeń staje się znacznie prostsze, gdy są one przedstawione na serii zwięzłych rysunków, niż gdyby zostały zaprezentowane w postaci rozbudowanego dokumentu, na przykład scenopisu użytkowania — zazwyczaj żmudnej lektury, która nie oddaje charakteru sytuacji tak dobrze, jak zestaw odręcznych rysunków. Dokumentom brak życia i emocji kryjących się w kilku prostych kadrach rysowanej historyjki i  sprawiających, że projektanci, użytkownicy i  klienci mogą odbierać je bardziej osobiście. Proste komiksy wciągają i zachęcają do dyskusji, dzięki czemu konstruktywna krytyka i poprawki przychodzą nam znacznie łatwiej. Aby opowiedzieć jakąkolwiek historię, trzeba stworzyć jej bohaterów oraz ułożyć scenariusz. Typy bohaterów określa się w czasie badań nad projektem, a następnie przedstawia za pomocą masek publicznych. Scenariusze powstają na podstawie historii opowiadanych przez użytkowników, scenariuszy użytkowania oraz innych dokumentów opisujących przewidywane działania użytkowników aplikacji.

Narzędzia fachu Jak już wspominałem, aby szkicować, nie trzeba specjalnych zdolności czy wysoce profesjonalnego podejścia. To samo dotyczy narzędzi, jakimi wykonuje się rysunki. Mnie wystarcza stary ołówek i kartka papieru — czasami wręcz zwykła serwetka — mimo to muszę przyznać, że niektóre narzędzia są wygodniejsze od innych. Szkice, szablony i prototypy

115

Flamastry sprawdzają się w tej roli doskonale. Wprawdzie wielu projektantów woli posługiwać się ołówkami, ponieważ wykonane za ich pomocą rysunki daje się łatwo poprawiać, ale to właśnie trwałość kreski flamastra jest jej podstawową zaletą. Gdy raz coś narysujesz, nie masz już odwrotu, zatem zamiast koncentrować się na nieistotnych w  tym momencie szczegółach, możesz skupić się na osi swojego pomysłu. To, czy kółko wyszło nieco jajowate, a strzałka okazuje się krzywa, na etapie szkicu jest zupełnie bez znaczenia. Wszelkie niedociągnięcia estetyczne są teraz nieistotne, liczą się jedynie pomysły. Szczególnie cenię sobie flamastry dwustronne. Cieńszy koniec można wykorzystać do umieszczania na szkicu podpisów i rysowania linii podstawowych, natomiast grubszym bez trudu wypełnia się większe płaszczyzny, dodaje cienie i podkreśla znaczenie wybranych elementów. Szkicuje się najlepiej w  notatniku. Prace wykonywane we wszelkiego rodzaju zeszytach są zawsze w jednym miejscu i można zabrać je ze sobą wszędzie. Nie bez znaczenia jest też fakt, że to od Ciebie zależy wybór formatu notatnika. Białe tablice i  flamastry do Narzędzia rysownika — ołówek i tanie, podwójnie pisania po nich sprawdzają się zakończone flamastry doskonale, gdy nadchodzi czas omówienia projektu w  szerszym gronie. Należy dobrać tablicę tak, by na jej powierzchni zmieściły się oryginalne pomysły, a także uwagi i propozycje pozostałych członków zespołu. Warto zaopatrzyć się także w  aparat fotograficzny, by utrwalić wygląd tablicy przed jej wyczyszczeniem i zachować go do późniejszej analizy. Zwróć uwagę, że wielu projektantów odradza stosowanie narzędzi cyfrowych, ponieważ wszelkie nowinki technologiczne poważnie ograniczają nasze możliwości opracowywania owych rozwiązań i niepotrzebnie kierują uwagę na szczegóły propozycji. Oczywiście ostateczna decyzja należy do Ciebie i z pewnością będzie wynikać z osobistych upodobań oraz Twojej samodyscypliny.

kształtowanie za pomocą szablonu Gdy zakończysz już pracę nad zarysem projektu, wybierz najbardziej obiecujące pomysły i  rozwiń je za pomocą odpowiedniego szablonu. Właśnie na tym etapie pracy pomysły nabierają konkretnych kształtów. Szablon jest bardziej szczegółowym 116

Szkice, szablony i prototypy

rozwinięciem szkicu, dającym dokładniejszy pogląd na układ serwisu, mechanizm poruszania się po nim i zawartość. Szablon jest swoistym planem ostatecznej wersji projektu. Niczym rysunki techniczne lub projekty budowy urządzeń szablon prezentuje kształt, możliwości oraz zachowanie projektu. Szablon nie powinien mieć postaci eleganckiego przybliżenia wyglądu witryny. Pojawiają się na nim wyłącznie podstawowe elementy stanowiące zarys bądź szkielet struktury projektu. Na tym etapie prac należy unikać wprowadzania szczegółów graficznych — kolorów czy typografii — ponieważ można w ten sposób zmylić klienta, który uzna szablon za próbną wersję serwisu. Nie znaczy to oczywiście, że szablon musi być utrzymany w czarno-białej stylistyce i być pozbawiony wszelkich znaków graficznych. Jeśli pewne kolory lub detale ułatwią zrozumienie najważniejszych funkcji witryny prezentowanych na szablonie, nie wahaj się ich użyć, staraj się jedynie unikać „ozdobników”. Przykładowo odnośniki i inne interaktywne elementy warto wyróżnić kolorem niebieskim, ponieważ w powszechnym mniemaniu tak właśnie oznacza się na stronach elementy interaktywne. Wszelkie komunikaty, na przykład ostrzeżenia czy powiadomienia o wystąpieniu błędów też można oznaczyć odpowiednio dobranym kolorem, ale ten etap prac jest zbyt wczesny, by decydować na przykład o  odcieniu tła poszczególnych fragmentów strony. Podsumowując, szablon ma ukazywać strukturę witryny, organizację poszczególnych elementów w jej obrębie, sugerować rozwiązania nawigacyjne i określać zakres możliwych działań użytkownika. Co jednak powinno wchodzić w skład szablonu? Najogólniej rzecz ujmując, zazwyczaj w tej postaci przedstawia się:

• strukturę strony z uwzględnieniem układu jej zawartości, zaznaczeniem elementów widocznych dla użytkownika oraz tych, których może on użyć;

• mechanizm nawigacji, starając się pokazać sposób poruszania się po całej witrynie ze wskazaniem miejsca, w którym aktualnie znajduje się użytkownik, oraz dróg, jakie może z niego wybrać;

• szczegóły interakcji z poszczególnymi elementami strony, kładąc nacisk na skutki podejmowanych działań oraz kroki niezbędne do osiągnięcia obranego celu. Oczywiście nie musisz przedstawiać każdej strony witryny w  postaci szablonu. W przypadku pracy nad mniejszym serwisem, na przykład portfolio, szablon jednej strony wystarczy w zupełności. Jeżeli będziesz pracować nad bardziej złożonym projektem, być może będziesz potrzebować szablonów kilku stron, by przedstawić różne układy elementów, możliwe działania oraz stany serwisu. Podobnie jak szkice, szablony są narzędziami komunikacyjnymi. Bez nich przekazywanie sobie pomysłów, celów oraz rozwiązań projektowych byłoby znacznie Szkice, szablony i prototypy

117

trudniejsze. Różnica polega na tym, że szkice są wykorzystywane przez projektantów i programistów, natomiast szablony przepływają pomiędzy projektantami, programistami, osobami decyzyjnymi i klientami.

• Zleceniodawcy mogą dzięki szablonom upewnić się, że produkt będzie spełniał ich oczekiwania, a także śledzić rozwój projektu i zatwierdzać kolejne pomysły.

• Kierownictwo może wykorzystywać szablony do ustalania ogólnej strategii rozwoju projektu, dostosowywania go do zakładanych potrzeb użytkownika oraz określania przeciwwskazań natury technicznej.

• Projektanci używają szablonów do przedstawiania swoich koncepcji i zbierania opinii na ich temat.

• Programiści opracowują na ich podstawie funkcje oferowane przez aplikację, zanim jeszcze pojawią się koncepcje jej szaty graficznej, dzięki czemu praca nad całością projektu nie jest uzależniona od tempa powstawania oprawy wizualnej. Wielu projektantów nanosi na szablon przypisy, dzięki czemu wszystkie jego elementy mogą być starannie opisane. Każdy przypis odnosi się do osobnego problemu i objaśnia rozwiązania sugerowane w szkielecie, co w wielu przypadkach — szczególnie tych mniej oczywistych aspektach — okazuje się bardzo pomocne. Dobry przypis powinien zwięźle opisywać problem i być czytelny dla odbiorcy bez dodatkowych uwag ze strony projektanta. Przypis ma wyjaśniać funkcje opisywanego bloku lub określać kontekst, w jakim należy rozpatrywać poszczególne fragmenty projektu.

Rodzaje szablonów Rozmiar i kształt szablonu zależy w dużej mierze od indywidualnych upodobań projektanta oraz zadania, jakie przed nim postawiono. Niektóre projekty nie wymagają niczego więcej ponad nie nazbyt szczegółowy rysunek, natomiast w innych niezbędny staje się drobiazgowo przygotowany szablon interaktywny.

Szablony mało szczegółowe Szablony pozbawione detali prezentują strukturę serwisu na najwyższym szczeblu, opisują interakcję oraz definiują hierarchię. Prototypy takie nie przypominają niczym ostatecznej wersji rozwiązania, ale mają już właściwy dla niej kształt. Tego rodzaju szablony są wykorzystywane do szybkiego wymieniania pomysłów, poprawiania wprowadzonych rozwiązań i ulepszania mechanizmów na bieżąco, w czasie trwania zaawansowanych prac nad projektem. Modele te charakteryzują się ograniczoną do minimum liczbą szczegółów, przedstawiają zazwyczaj jedynie najważniejsze obszary projektu, reprezentowane szarymi 118

Szkice, szablony i prototypy

prostokątami, opatrzonymi odpowiednią etykietą — nagłówek, stopka, menu, miejsce zarezerwowane (na reklamę, zawartość serwisu, panel boczny itp.) — i pobieżnie zaznaczone grupy narzędzi sterowania, przycisków oraz innych standardowych elementów interfejsu użytkownika. Szablony o  małej szczegółowości są niezbędne na etapie, gdy prace nad szczegółami projektu graficznego nie osiągnęły jeszcze pełni rozwoju. Tak przygotowany szkielet strony pozwala Na szablon mało szczegółowy trafiają wyłącznie na łatwe wprowadzanie symboli no- główne grupy układu strony wych elementów — wystarczy dodać nowe szare pole i przemieścić już istniejące. Takie zmiany nie będą możliwe w późniejszych fazach projektu, gdy kierownictwo zatwierdzi już bardziej dopracowane rozwiązania.

Szablony wysoko szczegółowe Wraz z postępem prac nad projektem szablon stopniowo wypełnia się szczegółami, tworząc coraz pełniejszy obraz funkcji dostępnych w  aplikacji. Szablon o  wysokiej szczegółowości prezentuje konkretne rozwiązania, jakie pojawią się w  produkcie końcowym, oraz prezentuje zasadę ich działania (a  w  każdym razie nadzieje zespołu projektującego). Tego rodzaju szkielet jest próbą możliwie wiernego oddania układu końcowej wersji interfejsu. Na tym etapie znane są już ostateczne decyzje dotyczące większości rozwiązań projektowych, zatem szablon ma zaprezentować wszystkim zainteresowanym zasadę działania opracowywanego programu.

Szablon wysoko szczegółowy z przypisami

Szkice, szablony i prototypy

119

Dla programisty taki szablon będzie wstępną specyfikacją techniczną, na której podstawie będzie mógł przystąpić szybciej do pracy. Projektant powinien pamiętać przy tym, że choć dla niego niektóre z elementów szablonu są na pierwszy rzut oka czytelne, wszystkie one powinny zostać odpowiednio oznaczone i właściwie opisane, by nie budziły wątpliwości wśród odbiorców spoza środowiska.

Szablony hybrydowe Chociaż różnica między szablonami mało szczegółowymi a szablonami wysoko szczegółowymi jest wyraźna, nic nie nakazuje Ci trzymać się mocno linii podziału. Szablon może łączyć w sobie cechy mało szczegółowego szkieletu oraz drobiazgowo opracowanej specyfikacji. Wtedy mamy do czynienia z tak zwanym szablonem hybrydowym. Szablon taki prezentuje układ elementów najwyższego poziomu uzupełniony o detale wybranych fragmentów witryny. Na przykład obszary strony mogą nadal pojawiać się w szablonie w postaci szarych prostokątów, ale elementy nawigacyjne mogą zostać zaznaczone z większą dokładnością i być opatrzone odpowiednimi opisami. Takie szablony powstają w czasie prac nad konkretnymi projektami. Do pewnego stopnia stanowią odzwierciedlenie postępu prac nad witryną, a także pozwalają ocenić stan zaawansowania projektu graficznego i  wyrobić sobie zdanie na temat stopnia dopasowania do siebie poszczególnych elementów. Szablony hybrydowe stosuje się, gdy pewne szczegóły projektu zostaną już ustalone, a inne oczekują jeszcze na omówienie.

Szablony szkicowane Często spotyka się szablony wykonane w specjalnie przygotowanych do tego programach komputerowych, stylizowane na odręczne rysunki. Takie dokumenty nazywamy „szablonami szkicowanymi”64 lub „cyfrowymi szkicami”. Projektanci decydują się czasami na wykonanie szkicu cyfrowego, ponieważ tak przygotowany dokument

Szablon wysoko szczegółowy i szablon szkicowany 64 A.T. Travis, When You Can’t (or Shouldn’t) Draw a Straight Line, „Boxes and Arrows”, http://www.boxesandarrows.com/view/sketchy-wireframes. 120

Szkice, szablony i prototypy

nadaje się natychmiast do zaprezentowania innym osobom i łatwo jest przeprowadzać jego aktualizacje. Przygotowane zawczasu fragmenty szkicu można z łatwością przekształcić w elementy prototypu, a kreski imitujące odręczny rysunek wyraźnie dają do zrozumienia, że to przejściowy etap prac nad projektem i nie należy mylić go z ukończonym rozwiązaniem. W wielu programach znajdziesz specjalnie przygotowane szablony szkiców oraz gotowe grafiki. Pamiętaj jednak, że szkice cyfrowe nigdy nie zastąpią zwykłego szkicowania na etapie opracowywania zarysu pomysłu. Zwykłe szkice są środkiem pomagającym rozwijać koncepcje, są narzędziem w pełni elastycznym i umożliwiają szybkie rysowanie, co jest niezbędne w wypróbowywaniu nowych pomysłów. Zbyt wczesne odwołanie się do szablonów szkicowanych może ograniczyć Twoją kreatywność.

Prototyp — metoda testowania i poprawiania koncepcji Praca nad zarysem pomysłu pobudza w nas możliwości twórcze, szkicowanie umożliwia zwizualizowanie koncepcji, nadaje jej kształt. Po co zatem opracowywać prototyp? Pracując nad prototypem, wykonujesz kilka prób wprowadzenia w życie wymyślonych rozwiązań, zanim jeszcze gotowy produkt pojawi się na rynku. Opracowywanie prototypu następuje po wykonaniu szablonu, ponieważ prototyp ma symulować końcowy produkt i pozwala użytkownikom ocenić odczucia podczas pracy z ostatecznym rozwiązaniem. To doskonałe narzędzie testowania i  oceniania pomysłów, które powstawały na wszystkich etapach pracy projektanta. Aby wykorzystać w pełni możliwości prototypu, musimy pozwolić użytkownikom sprawdzić konkretne rozwiązania, zebrać ich opinie, przeanalizować je i wykorzystać wyciągnięte na tej podstawie wnioski do poprawy jakości opracowywanego rozwiązania i usunięcia jego niedoróbek. Szablon daje jedynie pogląd na wygląd strony, rozmieszczenie jej elementów oraz narzędzi interfejsu, natomiast prototyp ma odwzorować zachowanie aplikacji, pozwolić na sprawdzenie jej możliwości, przetestowanie funkcjonalności i wydanie opinii na ten temat65. Prototyp sprawia, że pozbawione dynamiki, nieinteraktywne rozwiązania — opis przepływu zadań, szkice, rozrysowane kadry czy szablon — ożywają. Prototyp w odróżnieniu od wymienionych tu statycznych obiektów umożliwia użytkownikom zrozumienie, jak zadziała aplikacja, ponieważ pozwala im rzeczywiście z niej skorzystać. Ponieważ powstaje z myślą o testach, należy postrzegać go jako stosunkowo zaawansowany etap pośredni, prowadzący do ostatecznego rozwiązania. Wprawdzie nie ma 65 R. Choudhury, Wireframing Is Not Prototyping, „Handcrafted”, http://blog.handcraft.com/2010/05/wireframing-is-not-prototyping. Szkice, szablony i prototypy

121

on wyglądu gotowego produktu i zachowuje się nieco inaczej, ale nie zapominajmy, że prototyp stanowi jedynie symulację. Prawdziwa wartość prototypu ujawnia się, gdy mamy sprawdzić możliwości naprawdę złożonej aplikacji, udostępniającej wiele ścieżek funkcjonowania. Prototyp nie musi oddawać działania całej witryny, by okazać się przydatnym. Powinien raczej symulować najważniejsze scenariusze zachowań, które chciałbyś zbadać — mogą to być najczęstsze działania użytkowników witryny albo złożone, wieloetapowe procesy, których przebieg wpływa znacząco na komfort pracy z aplikacją. Etap prac nad prototypem rozbudowanych projektów dzieli się zazwyczaj na kilka faz, aby móc ocenić dokładnie poszczególne elementy każdego z działań. W takim przypadku przed przystąpieniem do wykonania prototypu powinieneś najpierw starannie zaplanować swoje poczynania, by przygotować do fazy testów wszystkie niezbędne strony i uwzględnić każde z działań.

Rodzaje prototypów Stopień szczegółowości i  sposób przygotowania prototypu będą zależeć od wielu czynników, między innymi budżetu, terminu oddania projektu, rodzaju testowanych funkcji, liczebności zespołu projektantów, jego lokalizacji, kontaktu z użytkownikami itp. Jeżeli interesuje Cię sprawdzenie najbardziej podstawowych aspektów struktury aplikacji (na przykład przechodzenia pomiędzy stronami serwisu) czy po prostu omówienie prototypu z  resztą zespołu, w  zupełności wystarczy Ci przygotowanie mało szczegółowego egzemplarza. Jeżeli jednak chcesz sprawdzić działanie złożonej aplikacji lub zaprezentować prototyp przełożonym, będziesz musiał przyłożyć się znacznie bardziej do dopracowania jego szczegółów. Poniżej znajdziesz opis najczęściej spotykanych rodzajów prototypów oraz najbardziej poręcznych narzędzi i metod ich wykorzystania. P R oToT y P y Pa P i e R o W e

Prototypy z papieru zaliczają się do grupy prototypów mało szczegółowych. Ich wykonanie nie wymaga wielkich nakładów ani zdolności manualnych i  nie zajmuje dużo czasu. Przygotowuje się je z  kartonu lub papieru, a  interaktywne możliwości aplikacji symuluje się poprzez wykonanie odpowiedniej liczby szkiców ekranu. Ponieważ obsługa tak przygotowanego prototypu nie nastręcza żadnych trudności, wielu projektantów bardzo chwali sobie tę technikę. Wprawdzie istnieje silny obóz utrzymujący, że przygotowywanie papierowych prototypów świadczy o braku profesjonalizmu, jednak bardzo często okazuje się, że posługiwanie się kolejnymi arkuszami prototypu stanowi źródło doskonałej rozrywki zarówno dla członków zespołu pracującego nad aplikacją, jak i dla jej użytkowników.

122

Szkice, szablony i prototypy

Ci ostatni czują się wtedy na tyle swobodnie, że bez większych oporów decydują się wyrażać krytyczne opinie na temat prezentowanych rozwiązań. Starannie przygotowane i dopracowane prototypy mogą onieśmielać i powstrzymywać szczere reakcje. Z kolei klienci dostrzegają inne zalety tej metody — oszczędność czasu i pieniędzy. Ponieważ przygotowanie prototypu papierowego nie zajmuje zbyt wiele czasu, wprowadzanie zmian w reakcji na zachowania użytkownika może odbywać się nawet w  trakcie testowania produktu. Dzięki temu ocena przydatności stosowanych rozwiązań przebiega sprawniej i pozostawia więcej czasu na opracowanie szczegółów projektu graficznego. Rozwiązanie to sprawdza się doskonale, gdy budżet przedsięwzięcia jest ograniczony — do przygotowania prototypu na papierze wystarcza kawałek kartki, cienkopis i kilka minut. Działania interaktywne symuluje się, prezentując użytkownikowi serię kartek przedstawiających kolejne strony aplikacji czy też kolejne stadia widoczne na stronie w czasie wykonywania określonej czynności. Poniżej przedstawiono prototyp notatnika wykonany na kartkach przyklejonych do prawdziwego Papierowy prototyp przygotowany za pomocą telefonu komórkowego. Każda kartka kartek z notatnika umieszczanych na prawdziwym odpowiada innej stronie aplikacji bądź urządzeniu przenośnym konkretnemu jej stanowi. Projektant zmienia kartki w zależności od tego, jakie decyzje podejmie użytkownik. „Kliknięcia” symulowane są dotknięciem odpowiedniego obszaru kartki palcem lub końcem długopisu. Ponieważ kartki zostały umieszczone na prawdziwym telefonie, przeprowadzona prezentacja miała nieco bardziej realistyczny wydźwięk. Przygotowywanie papierowych prototypów złożonych rozwiązań najczęściej mija się z celem — przeszkodą jest zbyt wiele interakcji, które należy zasymulować, zbyt wiele stron i stanów, które należałoby zilustrować. Przygotowywanie kart przedstawiających wygląd dziesiątek, a  nawet setek symbolicznych stron z  aktualizacją ich wyglądu w czasie sesji testowej wymagałoby zbyt wiele środków i czasu, przez co sesja wydłużyłaby się niepotrzebnie i  przekształciła w  dość nieprzyjemne doznanie. Na przykład przygotowanie papierowego prototypu internetowego formularza dokonującego kontroli poprawności wprowadzanych danych byłoby niezwykle kłopotliwe. W takich przypadkach lepiej posłużyć się prototypem w postaci elektronicznej.

Szkice, szablony i prototypy

123

P R oToT y P y C y F R o W e

Prototyp cyfrowy jest zazwyczaj bardzo szczegółowym rozwiązaniem, które niemal idealnie odwzorowuje możliwości ostatecznego produktu. Projektant przygotowujący prototyp cyfrowy umieszcza na nim zazwyczaj wiele szczegółów dotyczących zarówno budowy ostatecznej aplikacji, jak i działań, jakie będzie w niej można podejmować. Jeżeli chcesz podkreślić, że przedstawiany prototyp nie jest nawet w połowie drogi do ukończonego produktu, możesz nadać mu wygląd szablonu, ale bardzo często zdarza się, że projektanci decydują się na przygotowywanie prototypów o estetyce zbliżonej do ostatecznego rozwiązania, aby przeprowadzać testy w możliwie realistycznym środowisku. Prototypy cyfrowe są projektowane w taki sposób, by jak najlepiej symulowały pracę prawdziwego interfejsu, nie dziwi więc opcja umożliwiająca definiowanie kilkusekundowych opóźnień na „odpowiedź serwera”. Na rynku znajdziesz wiele aplikacji pozwalających budować zaawansowane, interaktywne rozwiązania, które w  naprawdę wierny sposób będą udawać działanie opracowywanej aplikacji. Opracowywane za ich pomocą prototypy mają kilka zasadniczych zalet — można używać ich wielokrotnie, łatwo wprowadza się w  nich poprawki oraz aktualizacje. Do dyspozycji masz cały szereg programów: od prostych, takich jak PowerPoint i Keynotes, do złożonych kombajnów w stylu Axure, OmniGraffle czy Visio.

FlairBuilder — jeden z wielu programów pozwalających przygotowywać szablony i prototypy aplikacji

124

Szkice, szablony i prototypy

Liczba detali wizualnych w prototypie cyfrowym zależy od jego przeznaczenia oraz czasu dostępnego na przygotowanie takiej prezentacji. Jeżeli przygotowujesz go z myślą o przedstawieniu wyników pracy przełożonym, będziesz musiał prawdopodobnie wykonać prototyp nieco staranniej. Jeżeli odbiorcą ma być użytkownik, liczba detali i poziom ich wykonania nie muszą wykraczać ponad to, co przygotowałbyś na prototypie papierowym. Natomiast gdy sytuacja wymaga podjęcia działań natychmiast, wystarczy zaznaczyć samą strukturę strony i najprostsze interakcje. Przygotowując prototyp dla klienta, możesz nadać mu bardziej realistyczny wygląd, uwzględnić na nim szczegóły graficzne, dzięki którym będzie wyglądać jak gotowa aplikacja w oknie przeglądarki — klienci zazwyczaj oczekują, że prezentowane im stadia pośrednie rozwoju projektu będą choć częściowo przypominać ostateczne rozwiązania. Tego rodzaju prototypy przygotowuje się w programach graficznych typu Adobe Photoshop, ale jeszcze lepszym rozwiązaniem jest przygotowanie modelu za pomocą kodu HTML i CSS. Taką atrapę aplikacji można zaprezentować klientowi w wybranej przez niego przeglądarce internetowej. Pamiętaj, że strony wyglądają różnie w różnych przeglądarkach — inne są szczegóły przycisków, pól wprowadzania itp. — dlatego warto przedstawiać klientowi rozwiązanie w znanym mu, a przez to bardziej przyjaznym środowisku. Dodatkową zaletą złożonych prototypów jest to, że zachowują się (a często także wyglądają) jak ukończone produkty i  doskonale ilustrują konsekwencje decyzji podjętych w czasie procesu projektowania. Dzięki temu można używać ich, niczym prototypów papierowych, do sprawdzania warunków pracy z aplikacją w czasie prowadzonych na żywo testów z  użytkownikami. Możesz na przykład przeprowadzić eksport wyglądu interfejsu do pliku graficznego, przekształcić niektóre z  jego elementów, tak by pozwalały na interakcję w przeglądarce internetowej i natychmiast przystąpić do fazy testów. Gdy użytkownik zgłosi problemy, będziesz mógł wprowadzić zmiany w prototypie od ręki i kontynuować testy po zaledwie kilkuminutowej przerwie. Tego rodzaju testów nie da się przeprowadzić skutecznie za pomocą szablonu czy prototypu papierowego, ponieważ tak przygotowanego modelu użytkownicy nie będą odbierać tak samo, jak odbierają aplikację działającą w przeglądarce.

Faza testów Gdy przygotujesz już prototyp, będziesz musiał przedstawić go użytkownikom i przeprowadzić odpowiednie testy. Najłatwiej jest przygotować w tym celu listę zadań, jakie będą najprawdopodobniej wykonywane w  aplikacji, znaleźć reprezentatywną grupę odbiorców i poprosić ich o wykonanie tych zadań. Twoja rola polega na tym, by nie przerywając im pracy ani nie udzielając żadnych wskazówek, obserwować Szkice, szablony i prototypy

125

ich reakcje i  zapisywać uwagi dotyczące ich zachowania. Uzyskane w  ten sposób dane pozwolą Ci ocenić, czy i jak użytkownicy poradzili sobie ze zleconą im pracą oraz, co chyba jest nawet ważniejsze, w których momentach nie podołali stawianym przed nim zadaniom i dlaczego miało to miejsce. Ocena zebranych wyników pozwoli Ci potem określić, które elementy aplikacji wymagają poprawek. Po wprowadzeniu zmian testy należy powtórzyć. Proces kończy się dopiero wtedy, gdy uzyskasz satysfakcjonujące wyniki pracy użytkowników. Aby testy użyteczności aplikacji przyniosły spodziewane efekty, musisz starannie zaplanować ich przebieg oraz ustalić priorytety dotyczące poszczególnych działań. Na tym etapie liczą się dwa czynniki — zadania, jakie musi wykonywać użytkownik, by zadowolić Twojego klienta, oraz jakie musi wykonywać, by osiągnąć własne cele. Niestety, bardzo często okazuje się, że rozstrzygnięcia tych dwóch kwestii wykluczają się wzajemnie, co prowadzi do zastosowania w  aplikacji rozwiązań niepożądanych z punktu widzenia użytkownika. W tym momencie z pomocą przychodzą testy użyteczności. Wśród najczęściej sprawdzanych działań użytkownika znajdują się dokonywanie zakupu konkretnego towaru, zakładanie konta i wyszukiwanie określonych informacji — użytkownik spodziewa się, że będzie mógł bez trudu przeprowadzać tego rodzaju operacje na stronie internetowej. Obserwuj uważnie zachowania użytkownika pracującego na prototypie aplikacji, zwracaj uwagę na wszystkie problemy, jakie napotka, oraz na zadania, które uda mu się ukończyć z powodzeniem. Dzięki temu dowiesz się, czy podjąłeś właściwe decyzje na etapie projektowania, i w razie potrzeby będziesz wiedział, które rozwiązania powinny pozostać niezmienione na etapie wprowadzania poprawek. Możesz też przygotować specjalną ankietę, która ułatwi Ci ocenienie reakcji użytkownika, umożliwi sprawne przeprowadzenie analizy oraz porównanie reakcji uzyskanych w czasie testów. Testowanie aplikacji to bardzo ważny etap prac nad nią — pozwala uzasadnić wprowadzenie konkretnych rozwiązań (lub obalić twierdzenie o ich słuszności) poprzez zademonstrowanie klientom i przełożonym, że aplikacja pozwala osiągać stawiane przed nią cele (o  ile tak rzeczywiście jest). Warto też zauważyć, że nie ma lepszego sposobu, by przekonać klienta i przełożonych o istnieniu problemu, niż zaprezentować zmagania użytkowników z nieporęcznym rozwiązaniem. Dlatego, jeżeli tylko użytkownicy testujący aplikację wyrażą zgodę, staraj się nagrywać ich pracę, by móc potem zademonstrować odpowiednie filmy. Warto też pamiętać, że testy przebiegają znacznie sprawniej i przynoszą bardziej miarodajne wyniki, jeżeli są przeprowadzane w środowisku znanym użytkownikowi i na urządzeniach, do których jest on przyzwyczajony. Ponieważ starasz się uzyskać symulację pracy aplikacji w warunkach możliwie zbliżonych do naturalnych, prezen-

126

Szkice, szablony i prototypy

towanie wyników pracy w sterylnym środowisku, w którym użytkownicy czują się niekomfortowo, mija się z celem. Postaraj się wywołać odpowiednią atmosferę, by sytuacja, w której się znaleźli, przypominała możliwie tę, w której większość ludzi będzie używać Twojej aplikacji. Możesz na przykład opisać użytkownikom warunki, w jakich normalnie wykonywaliby podobne zadania, w nadziei, że wprawisz ich tym samym w odpowiedni nastrój. Jeżeli istnieje możliwość zaaranżowania testów w  biurze, domu lub ulubionej kawiarni użytkownika, zrób to, ale nie zapomnij zwrócić uwagę na wszystko w otoczeniu, co może wpływać na zachowanie tej osoby. Co znajduje się na biurku? Czy w środowisku występują czynniki odwracające nadmiernie uwagę użytkownika? Czy aplikacja jest przeznaczona do uruchamiania na urządzeniach przenośnych? Jeżeli tak, to czy zakłócenia i hałasy z zewnątrz będą miały duży wpływ na jej odbiór? Czy użytkownik może pracować z aplikacją i jednocześnie chodzić? Wszystkie te czynniki wpływają na zachowanie testerów, a to oznacza, że powinny wpływać także na Twoje decyzje jako projektanta. Po zakończeniu testów zbierz ich wyniki, przeanalizuj je, pogrupuj i oceń. Ocena jest ważna z dwóch powodów — niektóre z uzyskanych opinii będą zbyt subiektywne lub zbyt stronnicze, by brać je pod uwagę, a nie da się usunąć wszystkich problemów, tak by nie wywołać innych. Określ priorytety rozwiązywania kłopotliwych kwestii, posługując się w tym celu trzema wykładniami — częstotliwością występowania błędu, jego wpływem na komfort pracy oraz uporczywością66. Częstotliwość określisz na podstawie liczby użytkowników, którzy zgłosili występowanie danego problemu, wpływ na komfort pracy będzie zależał od uciążliwości problemu oraz jego powiązań z innymi działaniami podejmowanymi przez użytkownika, natomiast uporczywość pozwoli ocenić, czy problem zalicza się do kategorii błędów powracających. Po określeniu listy priorytetów możesz przystąpić do usuwania najpilniejszych niedoróbek programu. Nie wychodź jednak z  oczekiwaniami poza obszar swoich możliwości — zawsze miej na uwadze czas, jaki możesz poświęcić na poprawki, i  ograniczenia budżetowe. Po uwzględnieniu tych czynników może się okazać, że rozwiązanie mniej palących problemów może nastąpić dopiero po uruchomieniu strony, a czasami nawet to nie będzie możliwe — jeżeli klient uzna, że zaprezentowane miejsca sporne nie są dla niego istotne. Zawsze jednak staraj się występować w obronie interesów użytkownika, nawet jeżeli oznacza to konieczność przełamania oporów klienta, który niechętnie myśli o poświęceniu środków na usunięcie błahych z jego punktu widzenia niedociągnięć w działaniu aplikacji.

66 J. Nielsen, H. Loranger, Prioritizing Web Usability, New Riders Press 2006. Szkice, szablony i prototypy

127

Właściwe przygotowywanie szablonu Podsumowując informacje zebrane do tej pory w  tym rozdziale, możesz dojść do wniosku, że wszystko to jest nieco zawiłe. W czasie pracy nad zarysem projektu masz wykonywać szkice. To samo polecenie pojawia się na etapie przygotowywania prototypów. Nawet szablony mogą być szkicowane, a testy przeprowadza się bardzo często na wykonanych odręcznie rysunkach. Skąd masz wiedzieć, która technika będzie odpowiednia w danej sytuacji? Jak zorientować się w mnogości dostępnych rozwiązań? W rzeczywistości wszystkie te różnice nie są aż tak istotne. Najważniejsze jest to, żebyś czuł się dobrze z narzędziami pracy, które sobie wybierzesz, i żebyś wiedział, jak i kiedy należy się nimi posługiwać. Jak zapewne zauważyłeś, szkicować możesz na dowolnym etapie procesu przygotowywania projektu. Ścieżka prowadząca od odręcznego szkicu do bardzo szczegółowego prototypu jest wbrew pozorom prosta i naturalna — na każdym etapie pracy nad projektem będą pojawiać się nowe elementy, które stopniowo wprowadza się do szkicu, tworząc w ten sposób prace coraz bardziej zbliżone do ostatecznego rozwiązania. Nie ograniczaj się jednak do wyboru tylko jednej ścieżki. W projektowaniu nie ma rozwiązań, które pasują zawsze do każdego problemu. Wbrew pozorom nie istnieje nic takiego jak właściwe przygotowywanie szablonu. Prace o różnym poziomie szczegółowości przydają się po prostu na różnych etapach pracy nad projektem. Nie istnieje mała czy duża szczegółowość. Jest wyłącznie odpowiedni poziom szczegółowości. Bill Buxton

Niektórzy projektanci przygotowują szkice, dokonują konsultacji z  pozostałymi członkami zespołu, a następnie wykonują nieco bardziej interaktywny prototyp papierowy i ponawiają cały proces. W niewielkich zespołach wystarczy czasami przygotować tylko szkice. W większych, często rozproszonych grupach bardziej szczegółowa dokumentacja i złożone rozwiązania będą sprawdzać się lepiej. Dobrze jest też zastanowić się nad tym, dla kogo przygotowujesz szkice, szablony i prototypy. Środek przekazu oraz szczegółowość wykonania pracy powinny być dostosowane do potrzeb odbiorcy i sytuacji, w której będziesz dokonywać prezentacji. Pozbawione szczegółów rozwiązania pozwalają dobrze przedstawić zarys idei oraz wystarczają w zupełności do przedstawienia swojej koncepcji innym projektantom. Detale stają się niezbędne, gdy przygotowujesz specyfikację techniczną lub gdy masz zamiar zaprezentować pracę zleceniodawcy. Wreszcie pamiętaj, że zawsze należy stosować takie narzędzia i rozwiązania, które będą pasować do założeń projektu i nie będą kłócić się z celami stawianymi aplikacji. 128

Szkice, szablony i prototypy

Najskuteczniejsze są zawsze te, które pozwalają odpowiednio przekazać własne pomysły oraz przeprowadzić sprawnie testy działania na poszczególnych etapach pracy nad projektem. Jeżeli pominiesz etap przygotowywania szablonu, możesz gorzko potem tego żałować. Prezentowanie przełożonym i klientom przygotowanych w programie Photoshop modeli i symulacji, które tylko czekają na dodanie odpowiedniego kodu, skłania ich do skupienia się wyłącznie na warstwie estetycznej rozwiązania i zupełnym pominięciu struktury technicznej oraz funkcjonalności aplikacji. Wskutek tego nie dość, że nie będziesz mógł w żaden sposób uzasadnić podjętych decyzji, to jeszcze narazisz się na ryzyko szukania rozwiązań nieistniejących problemów. Tak przygotowana aplikacja bardzo często wymaga wprowadzania poprawek w późniejszych etapach realizacji, a to zawsze niesie ze sobą dużo trudności i znacznie podnosi koszty wykonania. Dobry projekt powstaje na drodze ciągłego wprowadzania zmian oraz sprawdzania wykreowanych rozwiązań przez użytkowników. Narzędzia i metody pracy to tylko instrumenty, za których pomocą projektant może osiągnąć założone cele. Dobre projekty są wynikiem umiejętnego posługiwania się dostępnymi środkami, ale przede wszystkim właściwego ich doboru.

Co dalej? Po zakończeniu fazy testów, odkryciu wszystkich ważniejszych usterek w  aplikacji i usunięciu ich pora przekształcić projekt w całkowicie sprawny produkt. Oznacza to, że trzeba będzie przygotować i sprawdzić wszystkie funkcje, jakie ma on oferować, i w końcu uruchomić stronę internetową. Dalsze kroki zależą przede wszystkim od tego, co zdołałeś dokonać w  czasie procesu projektowania. Jeżeli dotąd nie ukończyłeś pracy nad grafiką, pora do tego przystąpić. Jeśli pracowałeś na prototypach papierowych, musisz teraz zająć się przygotowaniem specyfikacji kodu i przygotować prototyp strony HTML. Przygotowany produkt musi zostać zaakceptowany. Programiści będą musieli sprawdzić wszystkie moduły aplikacji oraz przeprowadzić testy ich współdziałania. Zespół odpowiedzialny za kontrolę jakości sprawdzi aplikację pod kątem realizowania założonych scenariuszy, by upewnić się, że spełnia ona wszystkie stawiane jej wymagania. Jednak ostatecznej oceny dokona ktoś zupełnie inny — użytkownik. Dopiero po uruchomieniu witryny stanie się jasne, czy ludzie mogą korzystać z niej w sposób, jaki sobie założyłeś. Nieważne, jak bardzo starałeś się zrozumieć potrzeby użytkownika, nieważne, ile razy sprawdzałeś aplikację pod kątem występowania w niej błędów. Każda witryna zaczyna żyć własnym życiem po przekazaniu jej w ręce użytkowników. Szkice, szablony i prototypy

129

Przygotowując jakąkolwiek aplikację internetową, zakładamy, że rzesza jej użytkowników będzie stale się rozszerzać, a to oznacza, że strony witryny będą wykorzystywane w ciągle nowe i nieprzewidziane przez nas sposoby. Krótko mówiąc, to nie koniec Twojej pracy. Należy uważnie obserwować wszystkie działania użytkowników, badać je i starać się wdrożyć niezbędne rozwiązania, tak by poprawić jakość pracy z  istniejącą już w sieci witryną. W ten sposób skompletujesz listę błędów wymagających interwencji, problemów do rozwiązania oraz nowych funkcji, które powinny pojawić się w aplikacji w niedalekiej przyszłości. A to sprowadza Cię do punktu wyjścia — przed kartkę, na której rodzą się nowe pomysły, są najpierw na niej udoskonalane i testowane, a później dopiero wprowadzane w życie.

o autorze Porażki są ważne, należy nauczyć się je akceptować i wyciągać z nich wnioski. Janko Jovanovic urodził się w 1975 r. w stolicy Serbii, Belgradzie. Ukończył studia informatyczne. Od piętnastu lat zajmuje się projektowaniem interfejsów aplikacji i tworzeniem rozwiązań prezentowanych użytkownikowi, od sześciu lat interesuje się opisem doświadczeń związanych z procesem projektowania. Opracował tryb projektowania, który pozwala mu tworzyć rozwiązania sprawdzające się doskonale w aplikacjach z branży handlowej. W wolnym czasie maluje, gra na perkusji i zachwyca się magią nocnego nieba. Czytelnika chciałby prosić, by ten zechciał więcej czytać.

130

Szkice, szablony i prototypy

Tematy poruszane w tym rozdziale: Projektowanie z myślą o dalszym rozwoju, nie na potrzeby chwili. Nie projektuj dla siebie. Dlaczego HTML i CSS schodzą na psy? Malowanie w HTML i zawiłości składni CSS. Problemy ze skryptami JavaScript i działaniem aplikacji po stronie serwera.

M

y, programiści i projektanci aplikacji internetowych, uwielbiamy czytać różne publikacje poświęcone obszarowi naszych zainteresowań, lecz nie zdajemy sobie sprawy, jak bardzo ich autorzy mamią nas swoimi wizjami. Przedstawiają nam świat, w którym mamy dostęp do wszystkich poziomów opracowywanych systemów, świat, w którym bez ryzyka możemy wprowadzać nowatorskie rozwiązania, bo każdy użytkownik korzysta z najnowszej i najbardziej rozbudowanej wersji przeglądarki internetowej, a koledzy i współpracownicy są tak samo przejęci procesem projektowania rozwiązań interaktywnych jak my. Okazuje się jednak, że rzeczywistość nie do końca pokrywa się z tą wizją. Pracujemy zazwyczaj w  zespołach, których członkowie bardzo często pracują w  różnych przedsiębiorstwach. Sporadycznie nasze zlecenia polegają na przygotowaniu kompleksowego rozwiązania, zazwyczaj dostajemy do rąk gotową wersję aplikacji, a  naszym zadaniem jest ją rozbudować lub opracować nowe rozwiązania, bazując na starym szkielecie. Innymi słowy, dostajemy do rąk cudzy kod i musimy zorientować się, o co chodziło jego twórcom. Co więcej, programujemy ze świadomością, że w przyszłości ktoś otworzy nasze pliki i będzie musiał wprowadzić w nich zmiany. Warto o tym pamiętać, bo każde sprytne rozwiązanie, każdy znany tylko Tobie skrót, który tak bardzo ułatwia Ci pracę, stanowi potencjalnie kłodę rzuconą pod nogi innemu człowiekowi. Większą część życia zawodowego spędzamy, ciężko pracując nad uporządkowaniem gotowego kodu lub utrzymaniem istniejącego w dobrym stanie, rzadko kiedy mamy okazję stworzyć wspaniałe rozwiązanie, które ułatwiłoby życie nam bądź użytkownikom. Po prostu tak funkcjonuje świat. Jeżeli Twój kod będzie wymagać większego uporządkowania, sprawisz jedynie tyle, że zużyjesz na pracę więcej czasu w i tak napiętym terminarzu. Stanu Twoich nerwów nie poprawi odkrycie, że właśnie męczysz się nad własnym kodem sprzed kilku lat. Wtedy zazwyczaj stwierdza się, że coś musiało popsuć się w międzyczasie. To prawda, coś się popsuło. Istnieje kilka momentów, w których dobre rozwiązania mogą przerodzić się w  koszmar programisty i  bardzo szybko zacząć uwierać nas niewygodnie. W tym rozdziale postaram się skupić na tych właśnie aspektach programowania. Sam popełniałem tego rodzaju błędy, nieraz też widziałem ich ślady w kodzie, który przyszło mi oceniać. Przekonałem się też, że świadomość istnienia

132

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

tych potencjalnie niebezpiecznych miejsc od początku pracy nad aplikacją znacznie ułatwia mi zadanie i w efekcie sprawia, że staję się lepszym programistą.

Dlaczego sprawy idą źle? W  zasadzie nie napiszę tu o  niczym specjalnie zaskakującym. Każdy programista stoi przed trudnym zadaniem zmierzenia się ze światem pociętym na fragmenty, nie do końca zrozumiałym i stale się zmieniającym. Na widok tego, co jeszcze pięć lat temu wydawało się dobrym nawykiem, dziś kręcimy głową z niedowierzaniem, a popełniane niegdyś błędy są powtarzane do dziś, są akceptowane coraz bardziej, bo tylko dzięki nim można uzyskać konkretne efekty i  zrobić coś „fajnego” w  nowej technologii. Będę jednak utrzymywać, że niepoprawny kod, z jakim często mamy do czynienia, pojawia się w sieci nie z winy programistów, lecz przede wszystkim z winy złego zarządzania jej zasobami. Oto główni winowajcy:

• Autorami kodu są bardzo często osoby niemające żadnego przygotowania w dziedzinie pisania aplikacji internetowych, którym zleca się takie działania, bo przecież „to tylko inżynieria oprogramowania”.

• Ludzie, którzy nie mają żadnego doświadczenia w projektowaniu interfejsu, zostają obarczeni zadaniem wytworzenia czegoś „ładniejszego i nowocześniejszego” na bazie gotowych rozwiązań.

• Programistom zazwyczaj odmawia się czasu potrzebnego na staranne przygotowanie kodu, uporządkowanie go i udokumentowanie. Muszą oddawać niezupełnie ukończone produkty.

• Zamiast zajmować się przygotowaniem przyjemnego systemu nawigacji i dbaniem o jak największy komfort pracy z aplikacją, projektanci muszą poświęcać wiele czasu na opracowanie interfejsu w kolorach wskazanych przez korporację, umieszczanie zdjęć prezesa na stronach informacyjnych oraz na dodawanie do nich dźwiękowego powitania.

• Tworzenie strony internetowej jest zazwyczaj częścią większego projektu. Gdy pewne elementy projektu okazują się wadliwe, zarzuca się całkowicie pracę nad nimi (żadnego testowania, tworzenia dokumentacji, rozwijania programu czy infrastruktury).

• Programiści nie potrafią ocenić czasu potrzebnego na ukończenie projektu ani środków niezbędnych na jego sfinansowanie.

• Programiści są zbyt zadufani w sobie, by używać gotowych rozwiązań, dlatego wolą tworzyć własne… raz za razem.

• Na rynku od lat panuje przekonanie (podtrzymywane intensywnie przez firmy komputerowe), że programy i aplikacje przygotowywane na specjalne Znaki ostrzegawcze w projektowaniu aplikacji internetowych

133

zamówienie to przeżytek — wystarczy przecież odpowiedni zestaw narzędzi i kilka szablonów, prawda? Okazało się jednak, że edytory typu WYSIWYG i biblioteki IDE nie odpowiedziały na wszystkie potrzeby użytkowników. Poza tymi problemami pojawiają się też inne, których z łatwością powinniśmy móc uniknąć, a mimo to ciągle je napotykamy. O nich właśnie napiszę w dalszej części rozdziału, a  zacznę od wielkiego nieporozumienia dotyczącego programowania na potrzeby internetu.

Nie projektujesz dla siebie Pamiętaj — nie programujesz dla siebie ani dla swoich klientów. W większości przypadków Twoi klienci nie będą mieli najmniejszego pojęcia o specyfice medium, jakim jest internet, i  technologiach, których będziesz używać. Oni po prostu chcą otrzymać witrynę bądź aplikację, ponieważ ich konkurencja już taką posiada. Tak naprawdę powinieneś pisać zawsze z myślą o dwóch grupach odbiorców — użytkownikach produktu oraz programistach, którzy przejmą po Tobie pieczę nad kodem. Użytkownikom należy się aplikacja, którą będą mogli obsłużyć, nawet jeśli nie są zbyt zaznajomieni z obsługą komputera. Programistom i projektantom, którzy w przyszłości będą zajmować się utrzymaniem aplikacji, warto pozostawić przejrzysty kod, który nie będzie wymagać zmian czy poprawek. Uważam, że głównym motorem mojej kariery jako programisty aplikacji internetowych jest to, że od lat staram się tworzyć najprostsze i możliwie najmniej wadliwe rozwiązania, do których przygotowuję starannie dokumentację, dzięki czemu inni ludzie będą mogli w przyszłości bez trudności rozwijać tak opisany kod. Innymi słowy, projektuję z myślą o przyszłości, a nie jedynie na potrzeby chwili obecnej. Mógłbym oczywiście poświęcić te lata na pisanie śmiałych, wizjonerskich aplikacji, które odpowiadałyby panującym w danej chwili trendom, i zostawiać za sobą ślad z projektów, których czasy dawno minęły. Prawdopodobnie w ten sposób zarobiłbym znacznie więcej. Nie mogę jednak powiedzieć, żebym w ciągu minionych sześciu lat wykonywał to, co ludzie zwykli nazywać pracą — raczej oddawałem się ulubionym zajęciom i otrzymywałem za to solidne wynagrodzenie. Jeżeli marzy Ci się kariera programisty, pragniesz projektować profesjonalne aplikacje internetowe, chcesz zdobyć uznanie w  kręgu kolegów po fachu oraz wśród przełożonych, zachowuj się profesjonalnie i czerp satysfakcję z tego, co robisz. Musisz przede wszystkim pamiętać, że to nie Tobie przyjdzie dbać o aplikację, którą właśnie piszesz, a ludzie, którym przypadnie to w udziale, nie będą mieli Twojej wiedzy i umiejętności. W większości przypadków Twoja aplikacja ucierpi znacząco w wyniku wszelkich wprowadzanych w niej zmian. Wynika to przede wszystkim z faktu, że

134

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

zespoły sprawujące pieczę nad oprogramowaniem w większych firmach są zazwyczaj kiepsko opłacane, a  kierownictwo nie wymaga od nich wysokiej jakości pracy — znacznie ważniejsze są szybkie zmiany. Jeśli płacą psi pieniądz, nie mogą spodziewać się niczego solidnego w zamian. Tak działa świat. Mając to na uwadze, staraj się unikać rozwiązań, które z  biegiem czasu staną się zupełnie nieprzydatne. Pamiętaj też, że „wymogi sztuki” oraz „dobre zwyczaje” szybko się dezaktualizują. W czasach, gdy rozpoczynałem moją przygodę z aplikacjami internetowymi, powszechnie stosowaną praktyką było kontrolowanie układu strony WWW za pomocą tabeli HTML rozciąganej do wymiarów siatki strony poprzez umieszczanie w niej wiersza przezroczystych pikseli zapisanych w  formacie GIF. Wraz z  nastaniem ery CSS takie rozwiązanie stało się nie tylko niemodne, lecz wręcz niedopuszczalne. Tak samo skończą rozwiązania, które dziś sprawiają, że wydajemy na ich widok okrzyki zachwytu i niedowierzania. Przyjrzyjmy się teraz różnym elementom, z których składa się gotowy produkt udostępniany w internecie, i zastanówmy się, na co należy zwracać uwagę przy ich projektowaniu. Dalsza część rozdziału będzie poświęcona niuansom HTML-u, CSS, JavaScript oraz pułapkom, jakie czekają na twórcę kodu aplikacji.

Wygląd ekranu a modele Nie jestem grafikiem i nie usiłuję przekonać nikogo, że wiem dokładnie, z czym musi radzić sobie projektant interfejsu, więc nie będę zagłębiał się zbytnio w ten temat. Mam też świadomość, że o powodzeniu programu decydują przede wszystkim odczucia użytkownika. Łatwo powiedzieć, że projektanci „nie rozumieją specyfiki sieci” czy „żądają niemożliwego”, ale warto też mieć świadomość, że na tym właśnie w pewnym sensie polega zadanie osoby projektującej, która ma na uwadze doznania użytkowników. Tobie, jako programiście, pozostaje pogodzić się z istniejącym stanem rzeczy i opracować rozwiązania, które będą łatwiej przyswajalne i przyjemniejsze dla oka. A to nie byle jakie zadanie. Tyle słowem wstępu. Pora zająć się kilkoma aspektami projektowania stron i aplikacji internetowych, które są tak nierozerwalnie związane z siecią, że konieczność uświadamiania problemów z nimi związanych kolejnym rzeszom projektantów staje się mocno uciążliwa. Poza nimi istnieje kilka rzeczy, których po prostu należy unikać w  czasie projektowania rozwiązań interaktywnych, ponieważ nie ułatwiają nijak przyszłego utrzymania i rozwijania aplikacji.

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

135

o G R a N i C Z a N i e L i C Z By e L e M e N Tó W

Jeżeli Twój projekt nawigacji po stronie zakłada przełączanie się pomiędzy kolejnymi kartami, a  ich liczba jest ograniczona na przykład zastosowanymi rozwiązaniami, z góry skazujesz swoje dzieło na porażkę. Aplikacje internetowe i serwisy w sieci będą się rozwijać, więc prędzej czy później pojawi się potrzeba dodania nowej pozycji do menu albo nowej kategorii lub zmienienia ich kolejności. o G R a N i C Z a N i e i Lo ś C i T e k S T U

Pod żadnym pozorem nie ograniczaj ilości tekstu na stronie. Jeżeli przewidziałeś w  projekcie określone miejsce na tekst, który w  dodatku musi być zapisany konkretną czcionką o  z  góry narzuconym rozmiarze, prawdopodobnie właśnie uniemożliwiłeś przetłumaczenie go na inne języki. Znaki chińskie, hebrajskie, hinduskie czy arabskie zajmują znacznie więcej miejsca niż litery alfabetu łacińskiego. Ponadto w językach innych niż angielski, na przykład w niemieckim bądź fińskim, słowa są znacznie dłuższe. Przytoczę tu przypadek, na który natknąłem się niedawno, a który wyjątkowo mi się spodobał — angielskie wyrażenie „Safety belt warning sign”67 w  języku niemieckim przyjmuje postać „Sicherheitsgurtleuchtanzeige” — spróbuj umieścić to na przycisku aplikacji internetowej. Podobnym błędem jest ograniczanie przestrzeni przeznaczonej na tekst w pionie przy założeniu, że przykładowy tekst nie będzie zajmować więcej niż trzy akapity. Składnia większości języków wymaga układania dłuższych zdań niż w języku angielskim — składnia tego ostatniego jest niezwykle prosta w porównaniu z przeciętnym językiem europejskim. Rozwiązania dostępne dzięki arkuszom CSS pozwalają projektantom dostosowywać swobodnie przestrzeń przeznaczoną na zawartość strony, więc my, programiści, powinniśmy nauczyć się, jak wykorzystywać to narzędzie, a nie patrzeć na nie jak na utrudnienie. Pamiętaj, że edytowanie tekstu to zadanie ludzi, którzy nie mają pojęcia o projektowaniu, i tylko szczęśliwy traf może sprawić, że nie dostaną do rąk systemu zarządzania treścią, umożliwiającego zmianę koloru, rozmiaru i kroju pisma. Ograniczanie ilości tekstu nie jest dobrym pomysłem. ż a D N a S T R o N a N i e „W yG L ą D a i D e N T yC Z N i e W e W S Z yS T k i C h P R Z e G L ą D a R k aC h ”, C h y B a ż e W yś W i e T L i S Z J ą W   P o S TaC i o B R a Z U

W środowisku programistów aplikacji internetowych istnieje nawyk zmuszania starszych wersji przeglądarek do pracy z najnowszymi osiągnięciami techniki. Powinniśmy zrezygnować z tego podejścia i starać się pisać aplikacje, tak by przeglądarki nie dławiły się naszym kodem. Przestańmy dopatrywać się błędu w wyświetlaniu tła pola tekstowego w postaci niebieskiego prostokąta w przeglądarce IE6, choć wiadomo, że 67 Ostrzeżenie o potrzebie zapięcia pasów bezpieczeństwa — przyp. tłum. 136

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

w przeglądarkach z rodziny WebKit i Firefox pojawi się ono jako elegancko cieniowany kształt o  zaokrąglonych rogach i  gradientowym wypełnieniu. Zaakceptujmy wreszcie, że tak działa sieć. W prawdziwym świecie nie da się wytworzyć w łatwy sposób towaru, który dostosowywałby się do osoby z niego korzystającej. W internecie jest to możliwe, więc postarajmy się wykorzystać możliwości, jakie z tego wynikają, zamiast bezmyślnie potępiać to zjawisko. Z M i e N N e e L e M e N T y S T R o N y N i e P o W i N N y Być P R Z e D S TaW i a N e Za PoMoCą GRaFiki

Ręczne tworzenie obrazów zawierających treść nagłówka nie ma sensu. Jeśli koniecznie chcesz zastosować taką formę ozdabiania tekstu, porozmawiaj z  programistą i zorganizujcie razem automatyczne generowanie odpowiedniej grafiki na serwerze w czasie rzeczywistym. Jeżeli jednak zależy Ci na utworzeniu naprawdę elastycznego serwisu — tam, gdzie to możliwe, ogranicz się do używania tekstu. Uwielbiam kopiować tekst z okna przeglądarki i wklejać go w innych aplikacjach. Lubię zaznaczać pewne fragmenty tekstu, który czytam, by ułatwić oczom to zadanie. Nie odbieraj mi tych możliwości. Poza tym prawdopodobnie wcale nie miałbyś ochoty przygotowywać tych grafik dla każdego języka, na jaki może być przełożona Twoja aplikacja. I  tu obowiązuje zasada, o  której wspominałem już w  przypadku tworzenia kodu — warto ułatwić zadanie osobom, które będą w przyszłości opiekować się Twoją aplikacją, zmieniać ją i rozbudowywać. Oznacza to, że powinieneś dołączyć do niego pliki wszystkich wykorzystanych krojów pisma oraz oryginalne wersje obrazów, które mogły pojawić się na stronie w skadrowanej wersji. Twoje pliki PSD czy AI (oraz wszelkie inne formaty graficzne) są odpowiednikiem kodu źródłowego aplikacji. Zadbaj o  to, by uporządkować ich zawartość na warstwach, pogrupować ją w odpowiednie katalogi i używać takich nazw, by ktoś, kto później będzie miał z tymi plikami do czynienia, mógł bez trudu zorientować się w ich przeznaczeniu. Lista ułożonych losowo warstw od „Bez nazwy 1” do „Bez nazwy 345” z  przypisanymi do każdej z  nich dziesiątkami masek nie ułatwia zrozumienia zawartości pliku PSD komuś, kto próbuje wykonać ponownie przycisk, zmieniając jedynie jego rozmiar. Opisowe nazwy katalogów i warstw są niczym komentarze w kodzie źródłowym — pozwalają osobie dbającej o aplikację znaleźć dokładnie te jej fragmenty, które musi zmienić, bez psucia wszystkiego wokół.

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

137

hTML W zasadzie HTML nie jest kodem; to tylko zestaw znaczników. Za ich pomocą nie opiszesz logiki aplikacji — co najwyżej zdefiniujesz, czym jest dany fragment tekstu, lub poinstruujesz przeglądarkę, jak ma traktować konkretny rodzaj danych, by zawartość strony wyświetlała się poprawnie (by na przykład wszystkie obrazy pojawiały się w oknie przeglądarki, by reguły zapisane w arkuszu stylów zostały poprawnie odczytane, by na stronie pojawiły się wszystkie pliki audio i wideo, które powinny się na niej znaleźć itd.). To oczywiście nie oznacza, że w zapisie HTML nie pojawiają się błędy. Gdyby język znaczników był od nich wolny, internet byłby znacznie lepszym miejscem. Jestem programistą. Lubię, gdy kod działa. Niestety, zazwyczaj po prostu umieszczamy w pliku odpowiednie znaczniki, licząc na to, że wszystko zadziała poprawnie. Swoboda i niedbałość, z jaką przeglądarki interpretują zapis HTML-u, wpływa na działania programistów — my także stajemy się niedbali. Kod HTML, który nie uzyskał statusu zgodności z obowiązującymi standardami, jest powszechnie uważany za dobry tak długo, jak długo wyświetla stronę w sposób interesujący programistę. Takie podejście świadczy o krótkowzroczności autora kodu i może powodować problemy w przyszłości. Pamiętaj, programów nie pisze się na potrzeby bieżącej chwili. Sprytni programiści wiedzą, że prędzej czy później niedociągnięcia programu wyjdą na jaw, dlatego stosują rozwiązania, które powinny się sprawdzić, a potem dodają poprawki pozwalające ominąć irytujące błędy. Kod HTML komplikuje się bardzo, a przez to staje się niewygodny w utrzymaniu, jeżeli:

• • • • •

próbujesz za jego pomocą tworzyć wygląd strony, wszędzie używasz klas, używasz wizualnych nazw klas i identyfikatorów, tworzysz niesemantyczny HTML, uzależniasz znaczniki od skryptów.

Przyjrzyjmy się teraz szybko wymienionym tu podpunktom i zastanówmy się, z czego wynikają związane z nimi problemy.

Tworzenie wyglądu strony za pomocą kodu hTML Ten zwyczaj prześladuje nas od lat, a szczególne problemy sprawiał w czasach, gdy przeglądarki nie potrafiły jeszcze korzystać z możliwości, jakie dają dziś arkusze stylów. Nauczyliśmy się wtedy używać znaczników font, by definiować krój pisma, center, by wyśrodkowywać tekst na stronie, nowe wiersze dodawaliśmy za pomocą znacznika hr, a znacznikami b i  i wyróżnialiśmy wygląd wybranych części dokumentu. I oczywiście formowaliśmy układ strony za pomocą tabeli. 138

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

Problemy pojawiały się z czasem, gdy z jakichś przyczyn należało zmienić wygląd i charakter witryny. Wymagało to zmiany każdego dokumentu HTML danego serwisu osobno. Nie było to ani wygodne, ani wydajne — problemy występowały zarówno podczas prac nad aktualizacją strony, jak i w czasie jej uruchamiania. Wprawdzie wymienione tu znaczniki spotyka się coraz rzadziej, jednak zwyczaj tworzenia wyglądu strony za pomocą kodu HTML nie zniknął. Ze specyfikacji CSS3 zniknęło wiele ciekawych rozwiązań. Zostały wypchnięte przez szereg bezsensownych znaczników HTML, z których korzysta się wszędzie tam, gdzie brak odpowiednich poleceń CSS (chodzi mi przede wszystkim o atakujące zewsząd znaczniki div wypełnione niezliczonymi identyfikatorami id). Takie rozwiązanie jest zupełnie pozbawione sensu. Jeżeli zależy Ci na uzyskaniu konkretnego efektu wizualnego, wykonaj go za pomocą skryptu JavaScript lub postaraj się uzyskać go w CSS3. Umieszczając w  kodzie nieco przypadkowe znaczniki HTML, które mają nadać jej odpowiedni wygląd, utrudniasz tylko zadanie ludziom, którzy w przyszłości będą dbać o pracę witryny. Większość tych znaczników zostanie i tak usunięta przez edytor WYSIWYG wbudowany w  system zarządzania treścią, jakiego będzie używać ekipa techniczna Twojego zleceniodawcy. HTML to karta, na której można coś namalować, to narzędzie pozwalające sformatować wybrane fragmenty tekstu, tak by zaznaczyć w nich elementy interaktywne, na przykład formularze, filmy czy pliki dźwiękowe.

Nadużywanie klas „Zespół klasowy”, jak lubię określać tę przypadłość, jest bardzo rozpowszechniony w dzisiejszym świecie. Klasy powinny być stosowane wyłącznie po to, by wyróżnić pewne elementy strony, natomiast przyjęło się wprowadzać je do niemal każdego znacznika głównie po to, by móc potem skorzystać z biblioteki jQuery. Dodawanie tych elementów przychodzi z łatwością, ale ich późniejsze utrzymanie powoduje te same problemy, o  których pisałem w  przypadku budowania wyglądu strony za pomocą kodu HTML. Jeżeli zmienisz nazwę klasy, będziesz musiał przejrzeć wszystkie dokumenty witryny i  sprawdzić, czy nie pojawiała się ona na nich. Nie do końca rozumiem, po co miałbym robić coś takiego, skoro mam do dyspozycji arkusz stylów CSS. Taka na przykład lista to zupełny nadmiar szczęścia:

• Ogórki
• Banany
• Papier toaletowy
• Dezodorant


Znaki ostrzegawcze w projektowaniu aplikacji internetowych

139


• Taśma izolacyjna
• Śrubokręt

Najważniejsza zasada stosowania klas mówi, by wprowadzać je wyłącznie tam, gdzie chcesz wyróżnić jeden szczególny element umieszczony wśród innych, podobnych do siebie, i aby pogrupować elementy, które nie należą do jednej grupy logicznej. Wszystko, co wykracza poza te dwa przypadki, należy uznać za błąd. Podany wcześniej przykład powinien mieć kształt:

• Ogórki
• Banany
• Papier toaletowy
• Dezodorant
• Patyczki bawełniane
• Taśma izolacyjna
• Śrubokręt

Teraz do określenia stylu wszystkich elementów listy wystarczy Ci zapis .lista-zakupow li. W pierwszym przykładzie należałoby zdefiniować style za pomocą wyrażenia .lista-zakupow .element-listy. Aby zmienić wygląd ważniejszego elementu listy, wystarczy zdefiniować styl dla klasy lista-zakupow li.wazne. Dzięki takiemu rozwiązaniu nie musisz się martwić o wpływ ustawień klasy .wazne na .element-listy. Tak samo zadziała selektor kodu JavaScript. W efekcie tworzysz czytelniejszy kod, który będzie działać znacznie szybciej. Warto opanować zasady pracy z CSS, tak by umieć skorzystać z hierarchii stylów w dokumencie. Nie staraj się napędzać CSS kodem HTML, bo osoby zajmujące się później utrzymaniem działania Twojej aplikacji nie zrozumieją, co chciałeś osiągnąć.

Wizualne nazwy klas i identyfikatorów Używanie wizualnych nazw klas i identyfikatorów jest dowodem na to, że autor kodu nie zrozumiał idei CSS oraz tego, że arkusz stylów można zmienić, ewentualnie przestał traktować aplikację poważnie i zamiast dbać o nią właściwie, wprowadza tylko szybkie poprawki, aby móc zaznaczyć w systemie śledzenia usterek, że właśnie usunął kolejną. Przyjrzyj się następującym nazwom klas i zastanów się, co o nich myślisz:

140

Znaki ostrzegawcze w projektowaniu aplikacji internetowych

• zielonyKomunikat • duzePolePoPrawej • boldHeadlineArial14px663366right (naprawdę widziałem kiedyś taką nazwę w kodzie!)

• pomaranczowyNaglowek • czerwonyTekstIntro Nazwy tego typu utrudniają pracę z kodem i mogą doprowadzić do wielu nieporozumień, jeżeli na przykład pomarańczowy nagłówek zmieni się w przyszłości w zielony. W efekcie skończysz, szukając pomarańczowego w nazwie, by zmienić zielony w kodzie — czyste szaleństwo. Nazwy atrybutów class i  id powinny w  logiczny sposób opisywać funkcje elementów strony, a  nie ich wygląd. Ostatecznie po następnej modyfikacji witryny duzePolePoPrawej może zmienić się w  waskiPanelBoczny, więc nadawanie mu którejkolwiek z  tych nazw nie ma sensu. Należałoby raczej nazwać go przerywnik czy polecenia. Nazwę klasy zielonyKomunikat należałoby zapewne zastąpić nazwą potwierdzenie, a czerwonyTekstIntro z powodzeniem można zamienić na ostrzeżenie lub blad (chyba że tekst wprowadzający ma rzeczywiście domyślnie kolor czerwony, wtedy oznaczanie go flagą blad byłoby nie na miejscu; w takim przypadku nazwa klasy intro wystarczyłaby w zupełności). Powody unikania tego typu nazw są oczywiste — zmiany wyglądu stron witryny nie powinny pociągać za sobą zmian w kodzie HTML. W takim przypadku modyfikacje powinny dotknąć wyłącznie wartości poszczególnych właściwości zapisanych w  arkuszu CSS. Nadając poszczególnym atrybutom nazwy o  dość podstawowym i ogólnym znaczeniu, zgodne z semantyką witryny, tworzysz kod otwarty na przyszłe modyfikacje. Oczywiście nie oznacza to, że nie wolno Ci stosować nazw opisowych. Jeżeli na przykład w kodzie witryny pojawiają się skrypt bądź klasa dodające do wybranego elementu obramowanie o zaokrąglonych rogach, a chcesz, by Twoi następcy mogli bez trudu usunąć lub zmienić to ustawienie, umieszczenie słowa „zaokrąglony” w nazwie klasy będzie mieć sens. W ten sposób z łatwością zdefiniujesz w arkuszu CSS wielkości odpowiedzialne za tworzenie wyglądu strony i umożliwisz innym proste ich zmienianie bądź stosowanie.

Niesemantyczny hTML Kolejnym często spotykanym błędem jest stosowanie niesemantycznych znaczników HTML w celu uzyskania efektów, które można bez trudu osiągnąć za pomocą podstawowych znaczników HTML. Mam tu na myśli dziwaczne konstrukcje utrzymane w stylu podanego na następnej stronie przykładu: Znaki ostrzegawcze w projektowaniu aplikacji internetowych

141

Kliknij tu, aby przejść dalej

Wprowadź swoje imię: