Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00320 009802 10451765 na godz. na dobę w sumie
Web Design. Projektowanie atrakcyjnych stron WWW - książka
Web Design. Projektowanie atrakcyjnych stron WWW - książka
Autor: Liczba stron: 280
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-248-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Dziś z Internetu korzysta więcej ludzi -- i więcej firm opiera na tym swoją działalność -- niż kiedykolwiek wcześniej. Jednak aby osiągnąć sukces w trudnych ekonomicznie czasach, producenci stron internetowych muszą korzystać ze skromniejszych środków i jednocześnie tworzyć bardziej efektywne witryny, które przyniosą realny zysk.

W jaki sposób uzyskać taki wynik? Weteranka projektowania, Ani Phyo, przedstawia sprawdzoną w boju i opartą na doświadczeniach metodę skutecznego projektowania witryn internetowych. Pokazuje ona, w jaki sposób kluczowe zasady projektowania informacji z myślą o użytkowniku mogą nadać kierunek każdemu projektowi internetowemu sprawiając, że witryna będzie bardziej efektywna, łatwiejsza w użyciu i lepiej spełniająca założenia biznesowe. Wyjaśnia gdzie warto, a gdzie nie warto oszczędzać i na czym tak naprawdę polegają oszczędności długoterminowe.

Ani Phyo opisuje w tej książce prosty i skuteczny siedmioetapowy proces tworzenia serwisów internetowych:

Książka przedstawia nie tylko proponowany przez autorkę schemat postępowania, ale także przeszkody i trudności, na jakie można napotkać w trakcie jego realizacji. 'WebDesign. Projektowanie atrakcyjnych stron WWW' to nieodzowna lektura zarówno dla projektantów stron, jak i dla menedżerów firm świadczących usługi tworzenia stron internetowych.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Web Design. Projektowanie atrakcyjnych stron WWW Autor: Ani Phyo T³umaczenie: Marek Binkowski ISBN: 83-7361-248-3 Tytu³ orygina³u: Return on Design. Smarter Web Design That Works Format: B5, stron: 290 Dziġ z Internetu korzysta wiêcej ludzi — i wiêcej firm opiera na tym swoj¹ dzia³alnoġæ — ni¿ kiedykolwiek wczeġniej. Jednak aby osi¹gn¹æ sukces w trudnych ekonomicznie czasach, producenci stron internetowych musz¹ korzystaæ ze skromniejszych ġrodków i jednoczeġnie tworzyæ bardziej efektywne witryny, które przynios¹ realny zysk. W jaki sposób uzyskaæ taki wynik? Weteranka projektowania, Ani Phyo, przedstawia sprawdzon¹ w boju i opart¹ na doġwiadczeniach metodê skutecznego projektowania witryn internetowych. Pokazuje ona, w jaki sposób kluczowe zasady projektowania informacji z myġl¹ o u¿ytkowniku mog¹ nadaæ kierunek ka¿demu projektowi internetowemu sprawiaj¹c, ¿e witryna bêdzie bardziej efektywna, ³atwiejsza w u¿yciu i lepiej spe³niaj¹ca za³o¿enia biznesowe. Wyjaġnia, gdzie warto, a gdzie nie warto oszczêdzaæ i na czym tak naprawdê polegaj¹ oszczêdnoġci d³ugoterminowe. Ani Phyo opisuje w tej ksi¹¿ce prosty i skuteczny siedmioetapowy proces tworzenia serwisów internetowych. • Oceñ obecn¹ witrynê klienta, zbadaj jego konkurencjê, precyzyjnie wyznacz docelow¹ grupê odbiorców i pomó¿ zdefiniowaæ potrzeby i oczekiwania klienta. • Zbuduj odpowiedni zespó³ do wykonania zadania. • Utwórz modele charakterystycznych reprezentantów grupy docelowej i zastanów siê, w jaki sposób bêd¹ korzystaæ z witryny. • Ustal, jaka powinna byæ zawartoġæ witryny i w jaki sposób powinna ona funkcjonowaæ. • Zaprojektuj profesjonalny schemat nawigacji i utwórz funkcjonalny prototyp, by go przetestowaæ. • Przeprowadĥ kontrolowany test u¿ytecznoġci — nawet w przypadku skromnego bud¿etu — i maksymalnie skorzystaj z opinii i sugestii u¿ytkowników. • Zbuduj mechanizmy, które pozwol¹ Ci pozyskiwaæ informacjê zwrotn¹ ju¿ po uruchomieniu witryny, tak aby u¿ytkownicy mogli dostarczaæ wartoġciowych opinii przydatnych w trakcie przysz³ych modernizacji. Ksi¹¿ka przedstawia nie tylko proponowany przez autorkê schemat postêpowania, ale tak¿e przeszkody i trudnoġci, na jakie mo¿na napotkaæ w trakcie jego realizacji. WebDesign. Projektowanie atrakcyjnych stron WWW to nieodzowna lektura zarówno dla projektantów stron, jak i dla mened¿erów firm ġwiadcz¹cych us³ugi tworzenia stron internetowych. Spis treści Przedmowa............................................... 7 Od Autorki.............................................. 9 Wstęp.................................................. 13 Podstawy projektowania interakcji z myślą o użytkowniku 23 Co to jest projektowanie informacji? ...................... 23 Kto zajmuje się projektowaniem informacji? ................ 31 Co to jest użyteczność? ................................... 36 Podsumowanie .............................................. 42 Rozdział 1. Ustalanie wymagań witryny.................. 45 Definiowanie podstawowych założeń biznesowych ............. 45 Proces badań .............................................. 47 Dobór cech i możliwości witryny spełniających jej cele .... 69 Ocena witryny przeznaczonej do przeprojektowania .......... 71 Sprawdź słuszność założeń ................................. 76 Podsumowanie .............................................. 78 Rozdział 2. Scenariusze działań użytkownika............ 79 Budowanie pozytywnych wrażeń .............................. 79 Tworzenie modelu użytkownika i scenariusza jego działań ... 82 Testowanie scenariuszy .................................... 88 Podsumowanie .............................................. 89 Rozdział 3. Dobór zawartości witryny................... 91 Jak dać użytkownikowi dokładnie to, czego potrzebuje ...... 91 Pomóż zleceniodawcy zidentyfikować potrzeby dotyczące zawartości witryny i ustalić ich priorytety .... 102 Dobór struktury witryny .................................. 109 Tworzenie i testowanie spisu treści witryny .............. 122 Sprawdź rezultaty ........................................ 126 Podsumowanie ............................................. 128 Rozdział 4. Tworzenie mapy witryny i schematów pracy użytkownika ........................................... 129 Projektowanie efektywnej interakcji ...................... 129 Tworzenie mapy witryny ................................... 132 6 Web Design. Projektowanie atrakcyjnych stron WWW Schematy pracy użytkownika ............................... 136 Testowanie i poprawianie schematu pracy użytkownika ki mapy witryny .................................................. 149 Podsumowanie ............................................. 150 Rozdział 5. Projektowanie schematu nawigacji i układu dokumentów ............................................ 151 Od układu strony do prototypu ............................ 151 Schematy układu stron .................................... 153 Prototypy ................................................ 174 Podsumowanie ............................................. 179 Rozdział 6. Testowanie funkcjonalnego prototypu....... 181 Kontrolowany test użyteczności ........................... 181 Testy formalne, czy nieformalne? ......................... 185 Dane jakościowe czy ilościowe? ........................... 189 Kontrolowany test nieformalny ............................ 194 Test formalny ............................................ 219 Prezentacja wyników testów i zaleceń ..................... 220 Poprawianie projektu na podstawie wyników testu .......... 221 Podsumowanie ............................................. 226 Rozdział 7. Dalszy proces modyfikacji, rozwoju i aktualizacji witryny .................................. 229 Czy było warto? .......................................... 229 Projekt informacji — od budowy do uruchomienia ........... 231 Uruchom witrynę i rozpocznij proces od nowa .............. 241 Dodatek A Słowniczek.................................. 259 Skorowidz............................................. 269 Rozdział 3. Dobór zawartości witryny Jeśli ustaliłeś już, kto będzie korzystał z witryny i jakie czynności będą wykonywali jej użytkownicy, możesz przystąpić do dobierania treści i zawartości witryny. Tok postępowania na tym etapie zależy od typu witryny, którą projektujesz. Jeśli tworzysz witrynę stanowiącą narzędzie, witrynę, w której dominują transakcje, zakupy przeprowadzane drogą elektroniczną czy wyszukiwanie określonego rodzaju infor- macji, przejdź do rozdziału 4. („Tworzenie mapy witryny i schematów pracy użytkownika”), a następnie wróć do tego rozdziału po wykonaniu opisanych tam zadań. Jeśli jednak głównym celem witryny jest prezentowanie treści informacyj- nych, kontynuuj czytanie tego rozdziału. W tym rozdziale omówimy projektowanie, planowanie i usta- lanie struktury zawartości witryny. Pokażemy też, jak pomóc zleceniodawcy opracować materiały na witrynę w taki sposób, by przyśpieszyć proces jej produkcji. Zespół tworzący wi- trynę będzie nieformalnie testował strukturę zawartości, by upewnić się, że prezentowane treści nie tylko satysfakcjo- nują docelowych użytkowników, lecz również spełniają zało- żenia biznesowe zdefiniowane przez zleceniodawcę (rysunek 3.1). Jak dać użytkownikowi dokładnie to, czego potrzebuje Podobnie, jak gospodyni organizująca przyjęcie stara się przygotować potrawy, które będą smakowały jej gościom, pro- jektanci powinni serwować użytkownikom witryny taką jej za- wartość, która zostanie przez nich uznana za atrakcyjną, wyczerpującą i satysfakcjonującą. To dlatego zawsze nama- wiam projektantów do poświęcenia czasu na sprawdzenie, czy 92 Web Design. Projektowanie atrakcyjnych stron WWW prezentowane treści będą pokrywały się z zainteresowaniami i oczekiwaniami docelowych użytkowników, ujawnionymi we wcześniejszym procesie badań i testów (rysunek 3.2). Rysunek 3.1. Dobór zawartości witryny z myślą o użytkowniku Rysunek 3.2. Wzbudź apetyt. Poświęć czas na ustalenie, co użytkownicy lubią, zaprezentuj to możliwie atrakcyjnie i spraw, by mieli ochotę na więcej Rozdział 3.  Dobór zawartości witryny 93 Poniżej przedstawię pewne sugestie dotyczące doboru zawar- tości witryny, lecz przede wszystkim zachęcam projektantów do traktowania procesu przygotowania zawartości witryny w taki sposób, w jaki traktuje się przygotowywanie pysznego, eleganckiego posiłku. Zwykle jest tak, że mniej znaczy więcej. Dostarczaj użytkownikom tego, czego chcą, i rób to w zwięzły sposób. Mniejsze porcje o wyższej jakości ai świe- żości są bardziej satysfakcjonujące niż duża objętość niż- szej jakości, a w dodatku nieświeża. Dobór zawartości witryny z myślą o użytkowniku pomaga osiągnąć cele biznesowe Nie sposób przecenić ważności zawartości witryny, na którą użytkownicy mają chętnie wracać i polecać ją swoim znajo- mym, przyjaciołom i rodzinie. Dobrze dobrana zawartość wi- tryny pomaga osiągnąć podstawowe cele biznesowe i wzmocnić markę organizacji lub firmy reprezentowanej przez tę witry- nę. Czy poniższe komentarze nie wydają Ci się znajome? „To, czego naprawdę potrzebujemy, to elektroniczna wersja biuletynu firmy”. „Nie martw się o zawartość, dział marketingu ma już gotowe wszystkie materiały, jakie możemy umieścić wa witrynie”. „Po prostu weźmiemy to, co przygotuje dział komunikacji, i wrzucimy to na witrynę, gdy będzie gotowe”. Opracowanie nowej zawartości witryny może być kosztowne, zarówno w przypadku nowego projektu, jak i zlecenia polega- jącego na przeprojektowaniu istniejącej witryny. Jednak jeszcze bardziej kosztowne jest zwykłe przerzucenie ist- niejącej zawartości na nową witrynę jedynie po to, aby potem odkryć, że nie spełnia ona wymagań użytkowników. W takim niepomyślnym przypadku organizacja posiadająca witrynę wyda pieniądze nie tylko na opracowanie zawartości, lecz również będzie musiała poświęcić sporo wysiłku i ponieść koszty mar- ketingu prowadzącego do odbudowania renomy i pozytywnego postrzegania marki oraz zatarcia negatywnych wrażeń wywoła- nych wśród użytkowników witryny. Za wszelką cenę unikaj pokusy „martwienia się o zawartość później”. W poniższej dyskusji na temat zawartości witryny przedstawię pewne realia ponownego wykorzystywania istnie- 94 Web Design. Projektowanie atrakcyjnych stron WWW jących materiałów i unikania ewentualnych przestojów. Na szczęście przy dobrej organizacji pracy, gdy każdy ma do zrobienia mniej i może temu poświęcić więcej uwagi, strate- gie projektowania interakcji pozwalają na ponowne wykorzy- stywanie dostępnych materiałów w przygotowaniu zawartości witryny. Internet wnosi nowy zestaw możliwości i wymagań — pozwala dostarczyć zawartość przygotowaną z myślą o użytkowniku — zawartość, która interesuje, wciąga, informuje i zachęca widza do powrotu. Stosując takie podejście do zawartości Zwracaj uwagę na powiązania Zadbaj o to, by organizacja zlecająca projekt witryny zaplanowała przygotowanie i dostarczenie materiałów, które są związane z jej poli- tyką marketingową i reklamową oraz programem dystrybucji. Na przykład, gdy organizacja planuje przeprowadzenie kampanii reklamo- wej z udziałem znanej osobistości (chociażby popularnego piłkarza z pierwszej ligi) lub powiązanej z wchodzącym na ekrany kin filmem, po- winna też zaplanować dostarczenie do witryny materiałów, które będą przyczyniały się do sukcesu owej kampanii. Mniejsze firmy mogą nie mieć aż tak ambitnych planów marketingowych, jednak niemal każda organizacja wprowadza do swojej oferty nowe pro- dukty lub usługi, bierze udział w różnego rodzaju wydarzeniach (pre- zentacjach, targach itp.) i podejmuje inne działania marketingowe. Każde z takich wydarzeń jest potencjalnym źródłem materiałów na witry- nę. witryny, zwiększamy szanse spełnienia jej założeń bizneso- wych, a także ułatwiamy ewentualne modyfikacje czy przepro- jektowania w przyszłości, o czym powiemy w rozdziale 7. („Dalszy proces modyfikacji, rozwoju i aktualizacji witry- ny”). Rozpocznij od personalizacji Personalizacja witryny nie jest już żadną nowością. W la- tach dziewięćdziesiątych ubiegłego stulecia niektóre witry- ny oferowały użytkownikom możliwość wyboru zawartości speł- niającej ich potrzeby i dopasowanej do ich zainteresowań. Sukces witryn takich, jak My Yahoo (http://my.yahoo.com) jest dowodem na to, że użytkownicy lubią otrzymywać dokład- nie to, czego potrzebują, dokładnie w taki sposób, jaki im się podoba (rysunek 3.3). Rozdział 3.  Dobór zawartości witryny 95 Rysunek 3.3. Personalizowana zawartość witryny. Witryna My Yahoo umożliwia użytkownikowi wybranie tego, co chce zobaczyć na stronie otwierającej Indywidualny marketing Idąc dalej tropem technik personalizacji, umożliwiających użytkownikom wybór treści witryny lub sposobu jej prezenta- cji, trafiamy na techniki indywidualnego marketingu, pole- gające na automatycznym zbieraniu informacji o upodobaniach konkretnego użytkownika i dobieraniu dla niego indywidual- nych ofert i rekomendacji (rysunek 3.4). 96 Web Design. Projektowanie atrakcyjnych stron WWW Rysunek 3.4. Personalizowane rekomendacje. Inną dobrą metodą personalizowania zawartości jest wykorzystywanie informacji podawany ch przez użytkowników. Zlikwidowana już witryna MovieCritic.com rekomendowała filmy na podstawie ocen, jakie użytkownik wystawiał innym filmom oraz odpowiedzi, jakich udzielał Na przykład witryna zajmująca się sprzedażą książek może zastosować indywidualny marketing, oferując specjalne cza- sowe zniżki na nowo opublikowane książki, które dany użyt- kownik przypuszczalnie uzna za interesujące; ich wybór mógłby być oparty na liście wcześniejszych zakupów. Podobne techniki są stosowane przez znaną witrynę Amazon.com i inne sklepy internetowe rekomendujące książki, płyty muzyczne i inne produkty. Bazują one na poprzednich zakupach użytkow- nika lub też na zakupach innych użytkowników o podobnych preferencjach. Z kolei internetowy sklep odzieżowy mógłby zaoferować mi specjalną zniżkę na bluzę pasującą do spodni i spódnicy, które niedawno kupiłam. Te specjalne zniżki nie byłyby oferowane innym użytkownikom, ponieważ każda z nich byłaby tworzona dynamicznie dla indywidualnego klienta na podsta- wie jego preferencji i historii zakupów. Zawartość witryny przy ograniczonym budżecie Personalizacja i indywidualny marketing wymagają zaawansowa- nych technologii. Niezbędne oprogramowanie po stronie klienta i serwera może być kosztowne. Jeśli organizacja fi- Rozdział 3.  Dobór zawartości witryny 97 nansująca projekt posiada odpowiedni budżet lub wewnętrzne zasoby umożliwiające skorzystanie z tej technologii, a tak- że wiadomo, że takie rozwiązania mogą przynieść wymierne korzyści (na przykład sprzedaż w sklepie internetowym po- siadającym dużą liczbę klientów), gorąco zachęcam. Na szczęście nawet ograniczony budżet nie musi oznaczać rezy- gnacji z zawartości dopasowanej do potrzeb użytkownika. Po- łączenie trzech pozornie nie związanych ze sobą dziedzin — kreowania marki, dziennikarstwa i relacji międzyludzkich — pozwoli organizacji zlecającej projekt opracować materiały dopasowane do wymagań użytkownika i tym samym przyblaiży wi- trynę do spełnienia jej celów biznesowych. Wskazałam już kilka punktów decydujących o tym, czy projekt witryny wzmocni, czy też osłabi pozytywny wizerunek repre- zentowanej przez nią firmy. Zastanów się, jak wyglądają Twoje związki z ludźmi, którzy są w Twoim życiu ważni. Co sprawia, że te związki są po- myślne? Napisano tysiące książek na temat relacji, lecz oto jeden ich wspólny mianownik: w pomyślnym związku każda z osób ro- bi wszystko, co możliwe, alby spełnić potrzeby i oczekiwa- nia drugiej osoby. Zawartość witryny może wzmocnić lub osłabić związek użyt- kownika z marką reprezentowaną przez witrynę. Czy użytkow- nik jest w stanie bez szczególnego wysiłku znaleźć intere- sującą go i potrzebną mu zawartość? Interaktywność witryny również pozwala użytkownikom natych- miastowo reagować na jej zawartość. Mogą oni wypełniać an- kiety i wyrażać opinie. Mogą wysyłać wiadomości e-mail w odpowiedzi na coś, co właśnie przeczytali, zobaczyli lub usłyszeli. Oznacza to, że projektant witryny może potrakto- wać jej użytkowników jako współtwórców zawartości. Wiele witryn daje użytkownikom możliwość oceniania zawarto- ści lub zadawania pytań związanych z niejasnymi kwestiami, tak aby organizacja reprezentowana przez witrynę nie musia- ła tracić pieniędzy na treści nikomu niepotrzebne i zamiast nich mogła publikować treści, które będą satysfakcjonowały odbiorców. Nawet jeśli budżet nie pozwala na zainwestowanie w drogie mechanizmy personalizacji lub indywidualnego mar- ketingu, witryna może zaprosić użytkowników do wyrażenia swojej opinii na temat tego, co im się podoba, a co nie w zawartości witryny, a następnie dopasować zawartość do oczekiwań. 98 Web Design. Projektowanie atrakcyjnych stron WWW Lecz jeśli ich ładnie poprosisz i dasz im odpowiednie na- rzędzia, użytkownicy witryny zrobią znacznie więceja. Potraktuj użytkowników jako współtwórców witryny Niektóre witryny wykorzystują aktualności lub artykuły te- matyczne do prowokowania dyskusji pomiędzy autorem artyku- łu, innymi ekspertami z danej dziedziny i czytelnikami. Na przykład internetowa wersja gazety The New York Times za- prasza swoich czytelników do brania udziału w dyskusjach na żywo na temat artykułów publikowanych w witrynie. Wiele innych gazet stosuje podobne techniki. Mogą one funkcjono- wać również w witrynach firmowych i korporacyjnych (rysunek 3.5). Rysunek 3.5. Zawartość tworzona częściowo przez użytkowników. Rosnąca liczba witryn zaprasza swoich użytkowników do wyrażania opini i lub umieszczania w witrynie danych, które mogą być istotne dla innych użytkowników. Oto przykład — witryna ConsumerReview.com , na której użytkownicy wyrażają swoje opinie o sprzedawanych produktach W rozdziale 2. zasugerowałam, by w trakcie procesu badań zespół tworzący witrynę przeanalizował publikacje, zdarze- nia i materiały dostępne w Internecie, by lepiej zrozumieć, co interesuje i porusza grupy użytkowników, do których jest kierowana witryna. Teraz chcę posunąć się dalej i razucić ze- społowi wyzwanie, by poszukiwał sposobów projektowania za- wartości i struktury witryny tak, aby dla użytkowniaków sta- Rozdział 3.  Dobór zawartości witryny 99 ła się jednym z tych poszukiwanych miejsc, gdzie mogą zna- leźć to, co ich naprawdę interesuje. Ludzie o podobnych zainteresowaniach uwielbiają wymieniać się poglądami. Chętnie wzajemnie sobie pomagają, przyczy- niając się do rozwoju sportów, pasji, zainteresowań i prac, które uwielbiają. Projektanci mogą poczuć tego ducha i sprawić, by witryna znalazła się w centrum i stała się nośnikiem tych rozmów, dyskusji i wzajemnej pomocy. Niestety, tego typu starania mogą skończyć się fiaskiem, jeśli projektant strony internetowej nie dysponuje odpowied- nią wiedzą na tematy, których mają dotyczyć te rozmowy. Dla- tego zachęcam Cię do przedyskutowania tego tematu z wszyst- kimi członkami zespołu i osobami podejmującymi decyzje (reprezentującymi zleceniodawcę). Udostępnij tę książkę właściwym osobom, aby mogły one przeczytać ten rozdział i kilka innych fragmentów dotyczących projektowania z myślą o użytkowniku. W sytuacjach takich jak ta rozważania związane z proajektowa- niem witryny internetowej zaczynają przecinać granice po- działu kompanii na działy, poruszając obszary związane z działami sprzedaży, marketingu, promocji, komunikacji i relacji międzyludzkich. Identyfikując dotyczące zawarto- ści witryny potrzeby jej użytkowników, warto skoordynować wysiłki innych członków organizacji, którzy również mogą wnieść swój wartościowy wkład w spełnienie tych potrzeb. Innym powodem podjęcia tej dyskusji może być chęć otrzymania pomocy od ekspertów należących do danej organizacji, którzy dysponują materiałami, wiedzą i doświadczeniem. Przygotowu- jąc się do spotkania poświęconego zawartości i strukturze witryny (omawianego dalej), osoby podejmujące decyzje doty- czące w tryny rozglądają się za źródłami materiałów. Kompania może dysponować archiwum porad i technik pomagających użyt- kownikom w jak najlepszym wykorzystaniu produktów lub usług. Materiałami może też być biblioteka magazynów, broszur i in- nej literatury, która dla odwiedzających witrynę może być złotą żyłą wiedzy. Eksperci z danej dziedziny mogą też na wiele sposobów komu- nikować się z odwiedzającymi witrynę. Mogą na przykład two- rzyć listę najczęściej zadawanych pytań i odpowiedzi (FAQ — Frequently Asked Questions), która skłoni użytkowników do ponownych odwiedzin; mogą też zamieszczać w witrynie in- strukcje typu „jak to zrobić” lub artykuły prezentujące specyficzne techniki czy rozwiązania pewnych problemów. Mo- gą brać udział w forum dyskusyjnym lub prowadzić dyskusję na żywo w pokojach pogawędek. Praktycznym rozwiązaniem jest też branie udziału w dyskusjach prowadzonych w formie biu- letynu. Eksperci reprezentujący daną organizację mogą ofero- 100 Web Design. Projektowanie atrakcyjnych stron WWW wać swoją wiedzę i doświadczenie w dyskretny sposób, aby również wśród grona użytkowników wyłonili się niezależni eksperci, którzy są gotowi podzielić się swoją wiedzą i do- świadczeniem, kontaktując się z innymi za pośrednictwem wi- tryny. W ostatnim rozdziale książki szczegółowo omówię sposoby an- gażowania użytkowników witryny w jej rozwój. Można zaprosić ich do wstąpienia do organizacji lub grupy użytkowników i poprosić o wstępną zgodę na umieszczanie dostarczanych przez nich informacji; można wreszcie zaprosić ich doa wzię- cia udziału w projektowaniu witryny. Tymczasem mam nadzie- ję, że korzyści wynikające z przygotowania zawartości wi- tryny z myślą o użytkowniku oraz z zaangażowania samych użytkowników w jej planowanie i przygotowanie stają asię co- raz bardziej oczywiste. Im bardziej użytkownicy zostaną zaangażowani w tworzenie witryny, tym bardziej będą chętni pomóc we wskazaniu mate- riałów trafiających w ich potrzeby. Paradoksalnie, im bar- dziej witryna jest uzależniona od użytkowników, tym chęt- niej pragną oni wnieść swój wkład — jeśli tylko trafią na właściwe pytania, zadane we właściwym czasie i we właściwy sposób. Gdy ich wkład będzie nabierał coraz większego zna- czenia, z większym prawdopodobieństwem będą stawali się lo- jalnymi klientami danej firmy, kompanii lub organizacji, promowanego produktu lub usługi reprezentowanej przez wi- trynę. Przyczynią się do budowania marki, polecająca ją swo- im kolegom, przyjaciołom i członkom rodziny. Nie zapominaj o podstawach Myśląc o tym, czego mogą chcieć użytkownicy witryny ia w ja- ki sposób powinieneś im to dostarczyć, pamiętaj, że nawet najbardziej fascynująca treść może nie być zadowalająca dla użytkowników, jeśli zlekceważysz podstawy, takie jak lo- giczna organizacja, łatwe wyświetlanie i drukowanie oraz rzetelna redakcja. Dobra organizacja informacji Tekst prezentowany w witrynie musi być odpowiednio napisany i zredagowany, by spełniał specyficzne wymagania witryny i jej użytkowników. Niezależnie od tego, jak ładna jest wi- tryna, jak imponujące są rozwiązania interaktywne, jeśli redakcja tekstu nie zadowoli odwiedzających i nie sprawi, że będą zadowoleni z wizyty, nie zechcą oni zwiedzić wi- tryny ani użyć udostępnionych narzędzi. Rozdział 3.  Dobór zawartości witryny 101 Pozwól użytkownikom używać hiperłączy, by mogli zejść na poziom szczegółowości, którego poszukują. Na przykład stro- na główna witryny może zawierać jedynie nagłówki i podna- główki artykułów, ich streszczenia oraz odnośniki do bar- dziej szczegółowych informacji. Takie rozwiązanie pozwoli użytkownikom wejść głębiej lub przejść od razu do tematu, który ich interesuje. Prezentowana treść musi być czytelna, wiarygodna i regular- nie aktualizowana. Przestarzałe informacje zmniejszają wia- rygodność witryny i szkodzą marce. Jeśli pracujesz nad przeprojektowaniem witryny, sprawdź, czy jej obecna zawartość spełnia oczekiwania użytkowników i zaadaptuj ją do nowego projektu, by spełniała w nim jak najlepiej swoją rolę. Podziel treść witryny, aby ułatwić surfowanie Strona internetowa bardzo różni się od strony drukowanej, dlatego nie wystarczy zwykłe przeniesienie materiałów drukowanych na witrynę. Do- pilnuj, by witryna prezentowała materiały dobrze napisane i w odpo- wiedni sposób zorganizowane. Długie bloki przewijanego tekstu nie są zbyt dobrym rozwiązaniem; powinieneś podzielić treść na mniejsze por- cje (rysunek 3.6). Rysunek 3.6. Porcje odpowiedniej wielkości. Serwuj treść witryny w porcjach odpowiednio małych, by było je łatwo strawić, a jednocześnie wystarczająco dużych, by satysfakcjonowały Podział treści witryny jest jak składanie i segregowanie dużego stosu prania. Początkowo stos prania wydaje się przytłaczający i nikt nie chce się nim zająć. Dlatego zaczynasz składać jedną rzecz po drugiej i segregować je, grupując podobne. W końcu możesz mieć pięć kupek: ręcz- niki, górne i dolne części garderoby, skarpetki i bieliznę. Każdą z tych kupek możesz dodatkowo posegregować. Na przykład górne części garderoby możesz podzielić na bezrękawniki, koszulki z krótkim rękawem i bluzy z długim rękawem. Jeśli jesteś naprawdę precyzyjny, możesz na- wet posegregować odzież pod względem materiału, gruboyści i koloru. Podział informacji na sekcje, podsekcje, akapity, nagłówki i podsumowa- nia pozwala odwiedzającemu odszukiwać informacje, a także wprowadza nieco przestrzeni pomiędzy poszczególne poziomy infoyrmacji. udostępnione Samouczki HotWired (http://hotwired.lycos.com) są znakomitym przykładem informacji po- dzielonej na sekcje i podsekcje. W tym przykładzie (rysunek 3.7), za- wartość jest podzielona na pięć części: przegląd (Overview) oraz czte- ry lekcje (Lesson 1, 2, 3, 4). przez witrynę 102 Web Design. Projektowanie atrakcyjnych stron WWW Rysunek 3.7. Zawartość podzielona na sekcje. Samouczki udostępnione przez witrynę HotWired zostały z rozmysłem podzielone na sekcje, dzięki czemu odwiedzający nie czuje się przytłoczony nadmiarem informacji Każda lekcja jest podzielona na cztery lub pięć części, a każda z nich jest prezentowana na oddzielnej stronie. Każda strona jest krót- ka — krótsza niż dwie wysokości ekranu. Część nawigacyjna po lewej stronie ekranu wskazuje kontekst i ma kon- sekwentną budowę na wszystkich stronach. Udostępnij funkcje łatwego drukowania Zaoferuj użytkownikom witryny możliwość wydrukowania wer- sji artykułu przygotowanej do druku, o uproszczonym forma- towaniu i grafice. Utwórz szablon dokumentu przeznaczonego do druku dla każ- dego artykułu i użyj go do utworzenia przyjaznych dla dru- karki wersji poszczególnych artykułów. (Ktoś w zespole po- winien potrafić to zrobić. Jeśli nie znajdzie się żadna osoba z takimi umiejętnościami, warto zwerbować kogoś na czas przygotowania wersji przeznaczonych do drukowania). Rozważ również możliwość wprowadzenia funkcji pozwalającej użytkownikowi na wysłanie artykułu do siebie lub znajomego drogą poczty elektronicznej. Jest to znakomity sposób na pozyskanie kopii artykułu i zapoznanie się z nim w wolnej chwili — odwiedzający po prostu podaje adres odbiorcy i klika przycisk. Jednocześnie jest to kolejne rozwiązanie, które daje odwiedzającym wrażenie kontroli nad tym, co ro- bią. Tym samym powoduje ich większe zaangażowanie i buduje dobrą opinię o marce. Nie zapomnij zamieścić informacji, skąd pochodzi artykuł, umieszczając na wydruku lub w wiadomości Rozdział 3.  Dobór zawartości witryny 103 e-mail nazwę i adres strony. Wiadomości oznaczone marką są skuteczną formą marketingu. Możesz wreszcie dać użytkownikom możliwość wydrukowania pięknie sformatowanego dokumentu, udostępniając jego wersję w formacie Adobe PDF. Takie rozwiązanie jest zalecane, gdy chcesz dostarczać ładnie zaprojektowane i dobrze skompono- wane dokumenty, takie jak raporty rządowe, instrukcje ob- sługi, raporty roczne i inne materiały informacyjne, które wiele zyskują przez swój elegancki skład i sposób prezenta- cji. Zaplanuj przyszłe modyfikacje Zaprojektowanie witryny prezentującej interaktywne treści przygotowane z myślą o użytkowniku wiąże się z kosztami, które wykraczają poza moment jej uruchomienia. Ktoś kiedyś będzie musiał zaplanować, uporządkować i zaktualizować za- wartość witryny na podstawie przyszłych wydarzeń i opinii, aby strategia dopasowania witryny do użytkownika sprawdziła się w praktyce. W przypadku stosunkowo prostych witrayn fir- mowych tę odpowiedzialność może przejąć istniejący dział marketingu lub sprzedaży, być może z pomocą niezależnego redaktora lub dziennikarza, posiadającego pewne doświad- czenie w tworzeniu stron internetowych. Większe organizacje — takie, jak kompania obsługująca duży rynek regionalny lub stanowiąca filię międzynarodowej kor- poracji — powinny zatrudnić przynajmniej jedną osobę, która będzie odpowiedzialna za zawartość witryny w trakcie jej eksploatacji. Jej praca będzie podobna do pracy redaktora nadzorującego wydawanie drukowanego magazynu. Osoba ta bę- dzie współpracowała z działem marketingu lub sprzedaży oraz z innymi działami zainteresowanymi udostępnianiem materia- łów w Internecie, przygotowując je do publikacji bądź prezen- tacji w witrynie. Pomóż zleceniodawcy zidentyfikować potrzeby dotyczące zawartości witryny i ustalić ich priorytety W przypadku nowego projektu witryny nadszedł czas, by zle- ceniodawca skoncentrował się na potrzebach dotyczących ma- teriałów dla witryny. W przypadku przeprojektowywania ist- niejącej witryny sprawa jest łatwiejsza — na pierwszym 104 Web Design. Projektowanie atrakcyjnych stron WWW etapie prac zespół tworzący witrynę zdobył pewne informacje na temat tego, jaka część obecnej zawartości może zostać wykorzystana w nowym projekcie. W każdym z tych przypadków konieczne jest zorganizowanie spotkania, na którym zostaną omówione kwestie zawartości i struktury witryny. Spotkanie dotyczące zawartości i struktury witryny Ustal datę i porządek spotkania, na którym zostaną omówione kwestie zawartości i struktury witryny. Poproś o stawienie się na nim wszystkie osoby podejmujące decyzje w sprawach witryny, wyznaczone przez zleceniodawcę. Kilka dni przed spotkaniem poproś je o poczynienie pewnych przygotowań. Oto one: ♦ Wygenerowanie listy życzeń opisującej wszystkie treścai, jakie ich zdaniem powinny znaleźć się w witrynie. ♦ Jeśli zlecenie dotyczy przeprojektowania istniejąceaj witryny, przygotowanie „spisu inwentarza” — listy całej zawartości obecnej witryny. Powinny się na niej znaleźć wszelkie treści dostępne online, a także wszelkie materiały, które mogą występować w innych formatach (cyfrowych i tradycyjnych) i w innych miejscach (online i offline). ♦ Zasugerowanie źródeł nowych materiałów. ♦ Zwrócenie szczególnej uwagi na treści związane ze specyficzną polityką marketingową, programem sprzedaży i dystrybucji oraz innymi działaniami mającymi na celu wzmocnienie marki (omówionymi we wcześniejszej częścai tego rozdziału i dalszej części książki). Poproś osoby biorące udział w spotkaniu o przyniesienie swoich list życzeń i sugestii dotyczących źródeł materiałów (a także spisów zawartości). Projektant informacji, twórca tekstów, projektant oprawy graficznej i producent witryny powinni wziąć udział w tym spotkaniu wraz z osobami repre- zentującymi zleceniodawcę. Mogą w nim wziąć udział również inżynierowie i programiści, choć nie jest to konieczane. Ta- kie spotkanie zwykle trwa około 2 godzin. Lista sprawunków Na spotkanie przygotuj następujące pomoce: ♦ karteczki samoprzylepne na krótkie notatki, Rozdział 3.  Dobór zawartości witryny 105 ♦ tablicę i gąbkę, ♦ pisaki do pisania na tablicy (w kilku kolorach), ♦ notatnik, ♦ komputer połączony z Internetem. Otwarcie spotkania Rozpocznij spotkanie od zebrania wszystkich list życzeń do- tyczących zawartości. Każdemu z reprezentantów zleceniodawcy daj bloczek karte- czek samoprzylepnych i poproś, aby zapisali każde z życzeń na osobnej karteczce. Zbierz je i po kolei przyklejaj na tablicy, grupując i łącząc podobne. Podczas przyklejania każdej karteczki poproś jej autora o omówienie życzenia, abyś zrozumiał bez żadnych wątpliwości, jak wyobraża on sobie dany element. Na przykład, czay histo- ryjki będą zawierały obrazki? Jak często będą aktualizowa- ne? Czy będą dostępne w archiwum witryny? Skoncentruj się na różnych typach materiałów. Należą doa nich teksty, fotografie i ilustracje. (W późniejszym terminie projektant oprawy graficznej przeprowadzi szczegółowe spo- tkania, lecz już teraz można udzielić reprezentantom zlece- niodawcy pewnych wskazówek dotyczących objętości i typu ilustracji, które będą przygotowywali. Powinny to być ogól- ne wskazówki bazujące na wcześniejszych badaniach i scena- riuszach działań użytkowników). Oto inne typy danych, które warto wziąć pod uwagę: ♦ wersje stron internetowych przeznaczone dla drukarkai, ♦ dokumenty w formacie Adobe PDF przygotowane do pobrania, ♦ interaktywne elementy JavaScript, ♦ aplety JavaScript, ♦ animacja: animowane pliki GIF, Macromedia Flash i Shockwave oraz Adobe LiveMotion, ♦ strumieniowe klipy wideo: RealPlayer (.ram), Apple QuickTime, Windows Media (.mov), ♦ strumieniowe klipy dźwiękowe: RealAudio, QuickTime, Windows Media Player, MP3, AIFF, WAV. 106 Web Design. Projektowanie atrakcyjnych stron WWW Wyjaśnij zleceniodawcy, jak bardzo pisanie tekstu nya potrzeby strony internetowej różni się od pisania tekstu przeyznaczonego do druku. Być może twórca tekstów należący do zespołu ymógłby wykonać krótką prezentację. Jeśli w skład zespołu niey wchodzi osoba specjalizująca się w doborze materiałów, zasuygeruj wcielenie takiej osoby. Warto również zastanowić się nyad zwerbowaniem ekspertów dziedzin, o których traktujey witryna. Przedyskutuj możliwości zaadaptowania zawartości obeycnej witryny, aby jak najbardziej ułatwić użytkownikom pryacę i jednocześnie przyspieszyć produkcję witryny oraz przyyszłe modyfikacje. Po zidentyfikowaniu potrzebnych typów materiałów przedysku- tuj, dlaczego witryna potrzebuje każdego z głównych typów materiałów i elementów. Zwróć uwagę na to, w jaki sposób zasugerowane elementy zawartości będą spełniały podstawowe założenia biznesowe witryny. Następnie wybierz te taypy mate- riałów, które najlepiej spełniają wspomniane założenaia. Po osiągnięciu porozumienia na temat typów materiałów i głównych elementów treści witryny odnieś te ustalenia do realiów produkcji i budżetu. Na przykład zleceniodawca może mieć nadzieję na umiaeszczenie w witrynie elektronicznego katalogu prezentującego 100 pro- duktów. Można to zrobić w przyjętym terminie i z przyjętym budżetem, jeśli każdy produkt będzie ilustrowany tylko jed- ną fotografią. Jeśli jednak zleceniodawca zażyczy sobie do- datkowych fotografii ze zbliżeniami, z widokiem od tyłu oraz z charakterystykami łączącymi poszczególne produkty (na przykład dopasowującymi poszczególne części garderoby, takie jak sukienka i kapelusz), w chwili uruchomieniaa witry- ny będzie możliwe umieszczenie w katalogu jedynie 50 pro- duktów. Projektant szaty graficznej powinien w takiej sytu- acji określić wymagania techniczne i budżetowe związane z utworzeniem ilustracji do strony każdego produktu. Rozdział 3.  Dobór zawartości witryny 107 Nie zapomnij o następujących ważnych stronach ♦ Nowości Na tej stronie są wymienione nowe elementy dodane dyo witryny. Dział marketingu w organizacji lub firmie będącej właścicielem witryny może pomagać w generowaniu tej listy, co pomoże w promowaniu nowej witryny. ♦ Kontakt Ta strona zawiera informacje adresowe, numery telefonyów, faksów, mapy, wskazówki dotyczące dojazdu, parkowania i adresy e-mail właściciela witryny. Jeśli musisz przygotować kilka wersji witryny dla różnych rejonów świata, daj poszczególnym filiom yczas na przygotowanie i dostarczenie niezbędnych danych adyresowych i numerów telefonów. ♦ Strony pomocy i lista najczęściej zadawanych pytań i yodpowiedzi (FAQ). Te strony należy regularnie aktualizować, gdy zmieniay się zawartość i możliwości witryny. ♦ Komunikaty błędów. Te strony (o szacie graficznej spójnej z pozostałą czyęścią witryny) komunikują błędy i wyjaśniają ich przyczyny, sugerujyą alternatywne rozwiązania i oferują hiperłącze do strony głównej iy innych głównych części witryny (rysunek 3.8). Rysunek 3.8. Strona z komunikatem błędu. Spraw, by komunikaty o błtędach były zrozumiałe i uprzejme. Wraz z nimi wyświetl wyjaśnienia i sugestie dotyczącte alternatywnych rozwiązań i sposobów dotarcia do informacji interesujątcej użytkownika. Prezentowana tu strona pochodzi z witryny ConsumerRevtiew.com. Zawiera ona uprzejmy komunikat i udostępnia kilka alternatytwnych hiperłączy ♦ Strony potwierdzeń. Te strony (o szacie graficznej spójnej z pozostałą czyęścią witryny) są dla użytkownika potwierdzeniem pomyślnego wykonaynia zleconej przez niego operacji, przesłania danych czy ukończenyia transakcji. Dzięki nim użytkownik jest pewien, że witryna poprawniye zareagowała na jego działanie. Pamiętaj, by zawsze w takiej sytuyacji podziękować użytkownikowi za skorzystanie z danego meychanizmu, przesłanie danych i wyjaśnienie, co się z nimi dalejy stanie. Oto przykład: „Dziękujemy za przesłane zamówienie. 108 Web Design. Projektowanie atrakcyjnych stron WWW W ciągu kilku minut otrzymasz potwierdzenie zamówieynia pocztą elektroniczną. W razie jakichkolwiek wątpliwości dotyyczących zamówienia wyślij wiadomość na adres adres_e-mail luyb zadzwoń pod numer xxx-xxx-xxxx.” Tematy, które należy omówić na spotkaniu Grupowanie materiałów Po umieszczeniu na tablicy wszystkich życzeń dotyczących zawartości witryny poproś reprezentantów zleceniodawcy o pomoc w ułożeniu ich w pięć do dziewięciu grup powiązanych ze sobą elementów. Utwórz te grupy, przemieszczając do nich samoprzylepne karteczki. Rozdział 3.  Dobór zawartości witryny 109 Nadawanie nazw grupom materiałów Po zgrupowaniu wszystkich elementów poproś reprezentantów zleceniodawcy o nadanie nazwy każdej z grup. Zapisz odpo- wiedzi na tablicy obok odpowiednich zestawów karteczek. Rekomenduj nazwy, które są trafne, jasne, opisowe i zrozumiałe. Nadawanie priorytetów grupom materiałów Teraz poproś zespół o ocenę ważności każdej z grup maateria- łów. Przy najważniejszej grupie postaw liczbę 1, przy na- stępnej 2 itd. Następnie poproś uczestników spotkania o ustalenie prioryte- tów poszczególnych elementów w każdej kategorii i ustal, które z nich będą zawarte w uruchamianej wersji witryny, a które zostaną wdrożone na późniejszym etapie, już po jej uruchomieniu. Przy każdym elemencie poproś osobę, która go zaproponowała, by wyjaśniła, jak ważny jest dla niej z punktu widzenia założeń biznesowych. Odnieś się do wyników badań i scenariuszy działań użytkow- ników, aby podpowiedzieć, które typy materiałów są najbar- dziej istotne. Poproś uczestników spotkania o przemyślenie kwestii związa- nych z zawartością witryny w kontekście strategii marketin- gowej zleceniodawcy. Spis inwentarza Poproś zleceniodawcę o wskazanie, które z wymienionych mate- riałów już istnieją, a które muszą dopiero zostać przygoto- wane. Aby niczego nie pominąć, posłuż się listą stanowiącą „spis inwentarza” zawartości witryny (rysunek 3.9). Rysunek 3.9. Spis inwentarza. Przygotuj listę wszystkich materiałów gotowych i wymagających przygotowania Kategoria: centrum informacji dla nauczycieli Priorytet Proponowana zawartość Gotowe 3 2 1 4 Pomoc w planowaniu projektu X Materiały dla nauczycieli Profesjonalny rozwój Ankieta X X Wymagają przygotowania X 110 Web Design. Projektowanie atrakcyjnych stron WWW Strategia przyszłych zmian zawartości Spójrz na zawartość witryny z przyszłościowej perspektywy i zidentyfikuj te obszary, w których zawartość będzie się rozrastała lub zmieniała. Zaplanuj zmiany przynajmniej na jeden rok w przód, w idealnym przypadku nawet na trzy lata w przód. Weź pod uwagę długoterminowe strategie sprzedaży i marketingu przyjęte przez zleceniodawcę, które powinny znaleźć odzwierciedlenie w zawartości witryny. Pomyśl o tym, kiedy i w jaki sposób będzie się zmieniała zawartość. Jak często będą dodawane nowe sekcje i treści? Czy nowa treść będzie kierowana do nowych czy do istnieją- cych grup użytkowników? Jak często będzie aktualizowana? Jaka jest strategia wdrażania nowej zawartości po urucho- mieniu witryny? Czy istniejąca zawartość będzie archiwizo- wana? Mapa zawartości Przygotuj mapę zawartości, na której w trakcie produkcji będziesz przypisywał poszczególne materiały konkretnym stronom witryny. Nadaj elementom mapy nazwy i numery zgod- nie ze schematem (omówionym w rozdziale 4.) i takie same nazwy nadaj poszczególnym plikom, aby ułatwić sobie porząd- kowanie i wyszukiwanie materiałów. Stosowane formaty Zadbaj o to, by każdy z członków zespołu dokładnie wie- dział, jakie formaty plików będą stosowane w poszczegól- nych typach materiałów: w tekście (format dokumentów Micro- soft Word lub kod HTML), w plikach obrazków (formaty GIF, JPEG, PICT), w plikach dźwiękowych (AIFF, WAV, MP3), w kli- pach wideo (QuickTime, etc.), w animacjach (Flash, MOV, animowane pliki GIF). Jeśli te elementy nie zostaną do- starczone w odpowiednich formatach, zespół tworzący witrynę będzie musiał poświęcić dodatkowy czas na ich konwearsję. Podsumowanie spotkania Wyjaśnij wszystkim, że ustalenia poczynione na tym aspotkaniu pomogą w wygenerowaniu tabeli zawartości (rysunek 3.10). Ta tabela będzie podstawą harmonogramu prac nad materiałami, który zostanie opracowany przez producenta witryny. Z kolei Rozdział 3.  Dobór zawartości witryny 111 harmonogram będzie zawierał daty dostarczenia elementów za- stępczych (na przykład tekstu lub obrazków, które będą je- dynie wyznaczały miejsce na stronie, zanim ostateczna wersja materiałów nie zostanie dostarczona), a także finalnych elementów, gotowych do umieszczenia w witrynie. Kto Co Gdzie Kiedy Dlacze- go Cel Właści- ciel l y n a w o k i f y d o m b u l y n a w o z i l a n o s r e P a n n o r t s u w d y z c - o n d e j i j a c a k n u m o K ł y a t s y z c y w o s a z c m y T L R U s e r d A y n i z d e i z d j e n a d z t r e p s k E y n z c y t a t s y z c y n z c m a n y D i y n a w o t p a d a y z c y w o N y n y r t i w a g u s b O ł g n i t e k r a M i w ó k n w o k t y ż u a p u r g a w o e c o D l i l a n a i z d e w o p d o a b o s O a z a F j i e a r k e k t s y z s W l y w o e c o d j a r K y w o s e n z i b l e d o m a g a m o p s W ę k r a m a g a m o p s W i j c a z i l a u t k a ć ś o w i l t o t s ę z C P P S N P D product.html S tygodniowo D D X X 1 AP Elementy witryny Strona główna Informacja o produktach Artykuł Nowości Pomoc FAQ (lista pytań i odpowiedzi) Samouczek: rozwiązywanie problemów Samouczek: pierwsze kroki Porada dnia T D P D N M D tips.html D P T D N P J feature.html T dziennie T dziennie S D S S USA Wlk.Bryt. T D P D N M J news.html T dziennie D D X P D T S N M J faq.html S kwartalnie M M USA P D T S A M J troubleshooting.html S kwartalnie S S X 2 JR 1 EB 1 ES 1 AP 1 AP D P T S A M J gettingstarted.html S kwartalnie S S w 1 JR Klucz Kto: źródło materiału (P — podstawowe, Co: cechy materiału Kiedy: jak często aktualizowany D — drugorzędne, T — trzeciorzędne) Gdzie: położenie w witrynie Dlaczego: D — duży, S — średni, M — mały (wpływ na markę lub model biznesowy) Rysunek 3.10. Tabela zawartości witryny. Macierz zawartości pozwatla śledzić los wszystkich materiałów pochodzących z różnych źródetł i kierowanych do różnych grup użytkowników. Zawiera ona priorytet każdtego elementu, informacje o tym, czy jest to element statyczny czy dytnamiczny, częstotliwość jego aktualizacji, jego znaczenie dla martki i modelu biznesowego (małe, średnie bądź duże), docelowy kraj oratz identyfikator osoby odpowiedzialnej za jego przygotowanie Wyjaśnij zleceniodawcy, że opóźnienia w dostarczaniu materiałów dla witryny są przyczyną największych opóyźnień w uruchomieniu witryny. Data uruchomienia zostanie przeysunięta o tyle samo dni, o ile opóźnione będą dostarczane mateyriały. 112 Web Design. Projektowanie atrakcyjnych stron WWW Dobór struktury witryny Istnieje wiele różnych sposobów grupowania zawartości, które nadają kształt całej witrynie. W tym podrozdziale zajmiemy się doborem struktury, która najlepiej spełni oczekiwania odwiedzających (rysunek 3.11). Rysunek 3.11. Dobierz odpowiednią strukturę. Spośród wielu możliwości dotyczących struktury witryny i jej zawartości wybierz tę, która jest najbardziej sensowna z punktu widzenia użytkowni ka Cztery modele organizacji witryny Przyjrzyjmy się czterem podstawowym rozwiązaniom dotyczącym organizacji stron witryny. Oto modele, które omówimy: li- niowy, hierarchiczny, równoległy i swobodny. Model liniowy Struktura liniowa sprawdza się w przypadku procedur prezen- towanych krok po kroku, które powinny być oglądane w okre- ślonej kolejności. Przykładem może być proces potwierdza- nia zamówienia w sklepie internetowym lub aplikacja edukacyjna, w której studenci muszą wykonać ćwiczenia lub odpowiedzieć na pytania testowe w określonej kolejności (rysunek 3.12). Rysunek 3.12. Liniowa struktura witryny. Model liniowy sprawdza sitę wszędzie tam, gdzie poszczególne strony mają być oglądane w okrteślonej kolejności Pamiętnik podróżnika Eda Schweizera w witrynie Decibel Dra- gon (www.decibeldragon Rozdział 3.  Dobór zawartości witryny 113 .com) ma strukturę liniową i prezentuje fotografie z wypraa- wy jako kolejne slajdy ułożone jeden za drugim. Użytkownik przechodzi do następnej lub poprzedniej fotografii, klika- jąc przycisk Next lub Previous (rysunek 3.13). Przycisk Previous (poprzednia) jest umieszczony po prawej stronie przycisku Next (następna) ze względu na Egipcjan, którzy czytają od prawej do lewej. Rysunek 3.13. Liniowa struktura witryny. Pokaz slajdów w witrynie Decibel Dragon ma strukturę liniową. Użytkownicy przechodzą pomiędzy stronami w określonej kolejności Model hierarchiczny Struktura hierarchiczna sprawdza się w przypadku witryn, których celem jest umożliwianie schodzenia na coraz bar- dziej szczegółowe poziomy informacji, jak w encyklopediach lub leksykonach (rysunek 3.14). Rysunek 3.14. Hierarchiczna struktura witryny. Ten model umożliwia schodzenie na kolejne poziomy szczegółowości informacji Witryna pokazana na rysunku 3.15 jest klasyfikacją delfi- nów oceanicznych, wielorybów i delfinów rzecznych. Gdy użytkownik kliknie przycisk kategorii Oceanic Dolphins, zo- 114 Web Design. Projektowanie atrakcyjnych stron WWW stanie przeniesiony na stronę prezentującą dwanaście rodza- jów Rysunek 3.15. Witryna o strukturze hierarchicznej. Hiperłącza w tej witrynie prowadzą do coraz węższych grup delfinów, aż dotrzesz do interesującego Cię gatunku delfinów oceanicznych (w drzewie systematyki). Kliknięcie rodzaju powoduje wyświetlenie należących do niego gatunków. Na każdym poziomie informacja staje się bardziej szczegóło- wa. Model równoległy Model równoległy pozwala zorganizować witrynę, w której prezentowane są na przykład poszczególne linie produktów danej firmy, przy czym każda z linii jest ułożona zgodnie z tym samym szablonem (rysunki 3.16 i 3.17). Rozdział 3.  Dobór zawartości witryny 115 Rysunek 3.16. Równoległa struktura witryny. Ten model sprawdza się w sytuacji, gdy trzeba zaprezentować wiele różnych elementów opisywanych przez podobne charakterystyki Rysunek 3.17. Równoległa struktura witryny. Witryna Decibel Dragon stosuje model równoległy, prezentując fotografie miast San Francisco i Bejrut. Indeks i strony z fotografiami są zbudowane w oparciu o ten sam schemat, co pozwala przewidzieć działanie poszczególnych elementów nawigacyjnych Model swobodny Model swobodny pozwala zorganizować witrynę poruszającą kilka tematów o wspólnym wątku lub punkcie odniesienia (ry- sunek 3.18). Na przykład w witrynie podróżniczej sekcja po- święcona Egiptowi mogłaby zawierać strony dotyczące histo- rii, kuchni, kultury, muzyki, atrakcji turystycznych, pogody itp. Wszystkie te tematy są istotne dla podróżników, jednak nie sposób ułożyć ich w strukturę hierarchiczną, ani w se- 116 Web Design. Projektowanie atrakcyjnych stron WWW kwencję liniową, więc najlepszym rozwiązaniem jest zastosowa- nie struktury swobodnej. Rysunek 3.18. Struktura swobodna witryny. Ten model pozwala zorganizować kilka swobodnie powiązanych ze sobą tematów The Plumb Design Thesaurus Witryna (www.visualthesaurus.com) prezentuje swobodny tok myślowy. Odwiedzający widzi słowa, które przesuwają się w kierunku środka ekranu, a po kliknięciu wokół nich radialnie rozchodzą się słowa pokrewne (rysunek 3.19). Interfejs ten jest przy- kładem struktury swobodnej, nieustannie dopasowującej się do działań użytkownika poprzez wyśrodkowanie każdej nowo wybranej myśli. Visual Rysunek 3.19. Struktura swobodna witryny. Witryna The Plumb Design Visual Thesaurus o strukturze swobodnej umożliwia wybór pokrewnych słów i odnalezienie tego, które interesuje użytkownika Dziewięć schematów organizacji zawartości witryny Na początku książki, w rozdziale „Podstawy projektowania interakcji z myślą o użytkowniku”, omówiłam sposób myśle- nia użytkowników Internetu i wskazałam, jak model konceptu- alny pomaga odwiedzającym opanować strukturę i funkcje wi- tryny. Przyjrzyjmy się dziewięciu różnym sposobom organizacji zawartości witryny, ułatwiającym jej zrozumie- nie: alfabetycznie, chronologicznie, według położenia geo- graficznego, według cechy, według kategorii, według zadań, według grup użytkowników, hierarchicznie i według metafaory. Aby wyjaśnić reguły stosowania każdego z tych schematów, pożyczę pomysł od Richarda Saula Wurmana, który zaprezento- Rozdział 3.  Dobór zawartości witryny 117 wał kiedyś przykład różnych możliwości ułożenia kapeluszy na stojaku na kapelusze (Richard Saul Wurman, „Hats”, magazyn Design Quarterly 1989 roku, s. 145). Alfabetycznie Alfabetyczne ułożenie elementów ułatwia wyszukanie określo- nego elementu, jeśli znamy jego nazwę lub tytuł. Kolejność alfabetyczna może też być uzupełnieniem innego schematu or- ganizacji. Na przykład, gdy znamy nazwy producentów kapeluszy, możemy je ułożyć w takiej kolejności: Bowler Cap Fedora Witryna Zagat (www.zagat.com) prezentuje listę restauracji, których nazwy są ułożone alfabetycznie (rysunek 3.20). Rysunek 3.20. Alfabetyczny schemat organizacji. Czasem zwykłe abecadło jest najlepszym narzędziem organizacji zawartości witryny, szczególnie w przypadku, gdy użytkownik zna nazwy elementów, których poszukuje 118 Web Design. Projektowanie atrakcyjnych stron WWW Chronologicznie Przykładami zastosowań dla chronologicznego schematu orga- nizacji mogą być życiorysy, listwy czasowe historii aczy ar- chiwa (rysunek 3.21). Portier przyjmujący gości mógłby ułożyć kapelusze zgodnie z czasem przybycia poszczególnych gości: 13:01 13:05 13:15 Według położenia geograficznego Schemat organizacji zawartości oparty na położeniu geogra- ficznym może być stosowany w listach oferowanych posaad, lo- kalnych aktualnościach czy prognozach pogody (rysunek 3.22). Rysunek 3.21. Chronologiczny schemat organizacji. Witryna ConsumerReview.com prezentuje artykuły prasowe ułożone chronologicznie, od najnowszego do najstarszego Rozdział 3.  Dobór zawartości witryny 119 Rysunek 3.22. Organizacja według położenia geograficznego. Witryna Gymboree (www.gymboree.com) prezentuje oferty posad posegregowane według położenia geograficznego Nasze kapelusze moglibyśmy ułożyć według miejsca ich wyko- nania: Afryka Holandia Japonia Według cechy Piwa można ułożyć od najciemniejszego do najjaśniejszego, zaś sosy od najbardziej łagodnego do najbardziej pikantne- go. Nakrycia głowy można ułożyć według ich wielkości — od naj- mniejszego do największego: Beret Czapka z daszkiem Kapelusz kowbojski Można je też ułożyć według ceny — od najtańszego do naj- droższego: 120 Web Design. Projektowanie atrakcyjnych stron WWW 10 zł 15 zł 40 zł Wreszcie, można je ułożyć według stopnia twardości: Czapka narciarska Czapka z daszkiem Cylinder Witryna Peapod (www.peapod.com), zajmująca się sprzedażą i dostawami żywności, posiada strukturę umożliwiającą użyt- kownikom wyświetlenie elementów ułożonych według ceny, liczby kalorii, zawartości środków konserwujących itp. (rysunek 3.23). Według kategorii Poszczególne elementy można posegregować w kategorie, iden- tyfikowane przez wyróżniającą je właściwość (rysunek 3.24). Na przykład książka telefoniczna jest uporządkowana według kategorii, dzięki czemu łatwo można znaleźć numer telefo- niczny lekarza, nawet jeśli nie zna się jego nazwisaka. Rysunek 3.23. Organizacja według wybranej cechy. Ta sekcja witryny Peapod pozwala użytkownikom uporządkować elementy według wielkości opakowania, ceny za jednostkową objętość i ceny sumarycznej Rysunek 3.24. Organizacja według kategorii. Witryna Zagat umożliwia wyszukanie restauracji według sąsiedztwa, serwowanej kuchni bądź alfabetycznie w obrębie danego miasta Rozdział 3.  Dobór zawartości witryny 121 Kapelusze można uporządkować według kategorii lub wyróżnia- jących cech: Kapelusze z piórkiem Kapelusze ze wstążką Kapelusze stylowe Według zadań Metafora pulpitu w komputerze jest inspirowana przez czynności biurowe wykonywane na biurku lub w jego pobliżu, takie jak pisanie, porządkowanie, segregowanie czy wyrzu- canie dokumentów. Z kolei proces zamawiania produktów w sklepie internetowym naśladuje rzeczywiste czynności wyko- nywane w trakcie zakupów w fizycznie istniejącym sklaepie. Witryna GM BuyPower (www.gmbuypower.com) wykorzystuje sche- mat organizacji według zadań (rysunek 3.25). Bazuje on na zadaniach związanych z poszukiwaniem, porównywaniem, spraw- dzaniem i kupowaniem samochodu. Według grup użytkowników Ten schemat dzieli funkcje i sekcje witryny według grup użytkowników, które mogą być nimi zainteresowane (rysunek 3.26). Rysunek 3.25. Organizacja według zadań. Witryna GM BuyPower dzieli proces zakupów samochodu na poszczególne zadania Rysunek 3.26. Organizacja według grup użytkowników. Witryna Cornell University (www.cornell.edu) jest podzielona na sekcje tprzeznaczone dla różnych grup użytkowników, w tym studentów, potencjalntych studentów, 122 Web Design. Projektowanie atrakcyjnych stron WWW absolwentów i fanów drużyny sportowej Hierarchicznie Zawartość witryny może też być uporządkowana według hierar- chii informacji. Struktura taka może być wąska i głęboka, czyli składać się z zaledwie kilku sekcji oferujących wiele stron ze szczegółami. Struktura informacji może też być szeroka i płytka, z wie- loma sekcjami składającymi się z zaledwie kilku stron każ- da (rysunek 3.27). Taką strukturę można łatwo rozbudowy- wać, dodając strony do poszczególnych sekcji. Rysunek 3.27. Organizacja hierarchiczna. Witryna MPM3.net posiada szeroką, płytką, hierarchiczną strukturę informacji, podzieloną na cztery sekcje. Można ją łatwo rozbudować, dodając strony do poszczególnych sekcji Pamiętaj, że zaplanowanie rozbudowy witryny już w trakcie jej projektowania może na dłuższą metę zaoszczędzić czas i pieniądze. Według metafory Metafory sprawiają, że witryna, która jest dla użytkownika zupełnie nowa, jest dla niego zrozumiała, ponieważ odnosi się do pojęć lub abstrakcji, które już zna. Witryny korzystają z trzech podstawowych typów metafor. Me- tafory organizacyjne polegają na podziale zawartości na ka- tegorie, metafory funkcjonalne wiążą się z wykonywanymi za- daniami, natomiast metafory wizualne dotyczą wszystkiego tego, co użytkownik widzi. Rozdział 3.  Dobór zawartości witryny 123 Metafory organizacyjne Większość sklepów z artykułami spożywczymi dzieli żywność na takie same kategorie, czyli stosuje taki sam system or- ganizacji. Jogurt i ser zawsze znajdziesz w dziale nabia- łu, czosnek w dziale warzywnym, zaś drożdżówkę w dziale wy- pieków. Podczas tworzenia witryny Peapod zastosowano metaforę orga- nizacyjną i model konceptualny sklepu spożywczego, naśladu- jąc go w postaci elektronicznej. Kategorie i nazwy działów są takie same, jak w rzeczywistym sklepie spożywczym (ry- sunek 3.28). Rysunek 3.28. Metafory organizacyjne. Witryna Peapod naśladuje rzeczywisty sklep spożywczy Metafory funkcjonalne Gdy chcesz znaleźć książkę w fizycznie istniejącej biabliote- ce, możesz przeszukać katalog, przejrzeć zawartość półek lub poprosić o pomoc bibliotekarza. Witryny internetowe będące elektronicznymi bibliotekami również oferują użytkownikom te opcje. Los biblioteki Library Witryna (www.lapl.org) pozwala przeszukać katalog według słowa kluczowego, autora, tematu, tytułu lub numeru porządkowego (rysunek 3.29). Ponadto pozwala uściślić poszukiwania przez podanie formatu (nagranie dźwiękowe, klip wideo, mapa ai in- ne) oraz języka. Angeles Public 124 Web Design. Projektowanie atrakcyjnych stron WWW Rysunek 3.29. Metafory funkcjonalne. Witryna biblioteka Los Angeles Public Library funkcjonuje w podobny sposób, jak tradycyjna biblioteka — pozwala stosować te same metody poszukiwania, a nawet poprosić bibliotekarza o pomoc Użytkownicy mogą poprosić o pomoc bibliotekarza dostępnego online, sprawdzić stan swojej karty bibliotecznej i przesu- nąć termin oddania książki. Metafory wizualne Internetowa książka telefoniczna z adresami firm i numerami ich telefonów jest koloru żółtego, dzięki czemu tworzy sko- jarzenie z żółtymi stronami fizycznie istniejącej książki telefonicznej. W witrynie stanowiącej internetowy sklep spo- żywczy narzędzia nawigacji wyglądają jak brązowa papierowa torba pełna zakupów, zaś elementy w koszyku są wyświetlane w dziurkowanym notesiku podobnym do tych, które są tak chęt- nie używane przez gospodynie domowe do robienia listy spra- wunków. przeprojektowaniem Encyclopedia Przed (www.encyclopedia.com) korzystała z dosłownej wizualnej me- tafory encyklopedii. Użytkownicy mogli nawigować w encyklo- pedii, klikając obrazki tomów na półce, zaś poszczególane me- nu wyglądały jak strona indeksowa książki (rysunek 3.30). witryna Rozdział 3.  Dobór zawartości witryny 125 Rysunek 3.30. Metafory wizualne. Oto przykład witryny, w którym zastosowanie bezpośredniej metafory wizualnej okazało się błędem — nie pomaga ona, lecz przeszkadza w korzystaniu z internetowej encyklopedii. Obrazek przedstawiający tomy encyklopedii na półce nie jest tak czytelny, jak łącza z poszczególnymi literkami, zajmujące mniej miejsca i szybciej pojawiające się na ekranie (pokazane na rysunku 3.31) Niestety, takie rozwiązanie okazało się błędem. Właściciel witryny poprosił dodanie nowej funkcji — mechanizmu automa- tycznego wyszukiwania — a takiego rozwiązania nie ma w pa- pierowych encyklopediach. Jak w takim wypadku przedstawić mechanizm wyszukiwania, skoro przeczy on zastosowanej meta- forze? Wobec braku innego wyjścia przeprojektowano całą wi- trynę Encyclopedia (rysunek 3.31). Jak zwykle, projektanci muszą przeanalizować i przetestować metafory organizacyjne z potencjalnymi użytkownikami. Je- śli użytkownicy nie będą w stanie zrozumieć metafory za- stosowanej w witrynie, będzie ona bezużyteczna. 126 Web Design. Projektowanie atrakcyjnych stron
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Web Design. Projektowanie atrakcyjnych stron WWW
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: