Home | Polski Polski
Attached
Go back

(Note: This page is available in Polish language only. If you would like it translated to English, please let me know. Sorry for the inconvenience)


Oto artykuł, którego nieco zmieniona wersja ukazała się w numerze 3/2003 magazynu Enter Extra.

Anatomia witryny

Z jakich części składa się witryna internetowa? W poniższym artykule postaramy się wymienić podstawowe elementy stron WWW oraz pułapki, jakie czyhają przy ich tworzeniu.

Już tylko nieliczni pamiętają czasy, kiedy internetowa pajęczyna była upleciona tylko i wyłącznie ze stron uczelni oraz ośrodków naukowych. Stron – trzeba dodać – dość zgrzebnych, gdyż i HTML był w powijakach, i komputery niezbyt jeszcze multimedialne. Z czasem jednak doczekaliśmy się wysypu stron komercyjnych, a potem, wraz z upowszechnieniem się taniego dostępu do Sieci, prywatnych. Sam HTML również ewoluował, z prostego języka opisującego dokumenty stając się graficznym kombajnem wspomaganym różnego rodzaju multimedialnymi “wtyczkami”.

Z tych (i nie tylko tych) powodów zróżnicowanie serwisów WWW w Sieci jest ogromne – obok małych stron domowych spotkamy potężne intranety czy firmowe portale, z prostymi witrynami tekstowymi sąsiadują multimedialne superprodukcje zrealizowane we Flashu, a międzynarodowe korporacje są o jedno kliknięcie od jednoosobowych sklepików.

Czy w takim razie ma sens omawianie, z jakich elementów składa się typowa witryna internetowa? Naszym zdaniem ma. Wprawdzie strona stronie nierówna, ale to wciąż cały czas WWW – wiele składników będzie więc miało sens w większości, lub nawet we wszystkich witrynach. Postaramy się więc wymienić i omówić najważniejsze z tych składników – bez wdawania się w szczegóły techniczne czy implementacyjne, za to ze zwróceniem szczególnej uwagi na punkt widzenia odwiedzającej stronę osoby.

Strona główna (ang. homepage)

Jest bez wątpienia najważniejszą podstroną witryny – w większości przypadków to od niej internauta zacznie zwiedzanie naszego serwisu. Nawet, jeżeli trafi do nas “od zaplecza” (np. dzięki wyszukiwarce, która skieruje go do konkretnej podstrony), bardzo często pierwszym krokiem będzie właśnie przejście do strony głównej.

Homepages of portals are updated every couple of hours, their designs have been refined for years
This image can be zoomedHomepages of portals are updated every couple of hours, their designs have been refined for years
Jakie więc podstawowe zadania stoją przed taką stroną?

  • wyjaśnianie, czym zajmuje się serwis WWW i dlaczego warto właśnie jemu poświęcić czas,
  • dawanie łatwego dostępu do wszystkich części serwisu i podkreślanie tych, które są najważniejsze,
  • zachęcanie do głębszego zainteresowania się treścią witryny.

Wrzucanie na stronę główną wszystkiego co możliwe nie jest zbyt dobrym pomysłem – lecz nie będzie nim także nadmierna skromność. Ważne, aby internauta szybko zorientował się, co jest grane i nie musiał nadmiernie zastanawiać się, jak dotrzeć do poszukiwanych informacji.

Parę elementów strony głównej, które wypada umieścić, przychodzi samo na myśl: wyraźnie widoczne logo lub nazwa strony, menu lub inny rodzaj nawigacji kierujący nas do najważniejszych podstron, lista ostatnich zmian w serwisie, odnośniki do pomocy, kontaktu, oraz mapy serwisu. Reszta zależy od rodzaju witryny – w przypadku bloga zawartość będzie raczej oczywista, ale przy sklepiku internetowym musimy już pomyśleć, które towary, promocje czy sekcje wyeksponować. I tutaj dochodzimy do...

reklam (ang. advertisements, ads)

...czyli wszelakiego rodzaju bannerów czy pop-upów (wyskakujących okienek). Tutaj zasada jest prosta: o ile to możliwe, starajmy się ich nie stosować.

My browser reacted like that on a... sweepstakes on one of the websites. Many internauts will machinally close an opening new window and will miss the opportunity, which probably wasn’t the intention of the authors
This image can be zoomedMy browser reacted like that on a... sweepstakes on one of the websites. Many internauts will machinally close an opening new window and will miss the opportunity, which probably wasn’t the intention of the authors
Oczywiście czasem nie będziemy mieli wyjścia – na przykład wtedy, gdy korzystamy z darmowego serwisu, który wymusza tego typu praktyki. Jednak w przeciwnym wypadku zastanówmy się. Już dawno odkryto u internautów objawy tzw. banner blindness, czyli automatycznego ignorowania wszystkich elementów o kształcie zbliżonym do tradycyjnego bannera. Wyskakujące okienka też są odruchowo zamykane, z reguły jeszcze zanim się wczytają (czasami robi to na życzenie sama przeglądarka).

Bogatsi w tę wiedzę, już nigdy nie powinniśmy zaprojektować np. ankiety pojawiającej się w nowym okienku, lub animowanej reklamy jednego z naszych towarów, która wygląda jak banner. W przeciwnym wypadku możemy być pewni, że spora część internautów po prostu tych elementów... nie zauważy.

Wejściówka (ang. intro, splash)

Czasami przed stroną główną pojawia się dodatkowa podstrona z animowanym wprowadzeniem (z reguły zaprojektowanym we Flashu), tzw. intro.

W założeniu ma ona zachęcić internautę do odwiedzenia strony, wprowadzić do jej treści lub zbudować odpowiedni klimat. Tak się jednak składa, iż tego typu “wejściówki” drażnią znakomitą większość osób – w końcu już na daną stronę trafiły i chcą jak najszybciej zająć się tym, po co przyszły.

Zastanówmy się więc, czy warto. Jak zwykle wiele zależy tu od rodzaju witryny i np. twórcy poważnych stron firmowych lub sklepów internetowych powinni od razu porzucić ten pomysł. Oczywiście są i wyjątki; przy niektórych witrynach wielkich korporacji konieczny jest np. wybór kraju czy oddziału i wówczas “wejściówki” nie unikniemy.

Jeżeli nasza wejściówka jest zwykłą animacją, pamiętajmy o dodaniu przycisku pozwalającego na jej pominięcie – nie ma nic gorszego niż zmuszanie odwiedzającego do oglądania nic nie wnoszącego dwuminutowego filmiku, po którym dowie się, że strona w ogóle go nie interesuje. Miło byłoby też, gdyby podczas każdych kolejnych odwiedzin przesyłać internautę już do właściwej głównej strony i dopiero tam dać mu możliwość ponownego obejrzenia wprowadzenia, jeżeli sobie tego życzy.

O serwisie/o nas (ang. about)

Nie jest to konieczność dla wszystkich rodzajów stron, ale wydaje się taką np. przy firmach czy sklepach internetowych. Napiszmy coś o firmie, pokażmy, iż nie jesteśmy kolejnym bezdusznym sieciowym interesem, podkreślmy nasze mocne strony, wzbudźmy zaufanie klientów. Możemy też napisać nieco więcej o tym, dlaczego zdecydowaliśmy się stworzyć tę witrynę i co chcemy dzięki niej osiągnąć (na długie wprowadzenia jest miejsce właśnie tutaj – na stronie głównej tylko odstraszylibyśmy klikających średnio dwa razy na sekundę odwiedzających).

Pomoc/najczęściej zadawane pytania (ang. FAQ)

Ten dział naszej witryny również wydaje się być przeznaczony głównie dla firm, ale może się przydać każdemu webmasterowi, który zaczyna dostawać e-maile czy telefony z powtarzającymi się tymi samymi pytaniami.

About us, FAQ and help all in one – a redesign would be nice, but it’s a good start
This image can be zoomedAbout us, FAQ and help all in one – a redesign would be nice, but it’s a good start
Umieszczenie tych pytań na stronie wraz z sensownymi i zwięzłymi odpowiedziami powinno nas przed tym uchronić. Taki element witryny nazywany jest potocznie FAQ (od angielskiego Frequently Asked Questions, czyli “często zadawane pytania”). Pamiętajmy tylko, aby wybierając zestaw pytań myśleć przede wszystkim o tym, czy przydadzą się one odwiedzającym. Mało prawdopodobne jest, że ktokolwiek zapyta “Jak wygląda struktura firmy?”, ale już “Czy w przypadku zamówienia paru usług mogę liczyć na rabat?” wydaje się jak najbardziej realnym problemem.

Jeżeli korzystanie z naszej witryny wymaga wyjaśnień, bądź jeśli użytkownicy mają problem z jakimś jej elementem, możemy pokusić się o stworzenie instrukcji lub systemu pomocy. Najpierw jednak zadajmy sobie pytanie, czy nie da się przerobić witryny tak, aby pomoc nie była w ogóle konieczna? Każdy system pomocy to tak naprawdę leczenie objawów, i warto zastanowić się najpierw nad przyczynami.

Pamiętajmy też, że FAQ czy pomoc będą bezużyteczne, jeśli nikt nie będzie wiedział o ich istnieniu. Umieszczajmy więc odpowiednie odnośniki wszędzie tam, gdzie mogą być przydatne (chociaż oczywiście bez niepotrzebnej nachalności). Jeżeli potrafimy, zareklamujmy je przede wszystkim tym, którzy weszli na naszą stronę po raz pierwszy – im przydadzą się one najbardziej.

Kontakt (ang. contact, feedback)

Nie uciekajmy przed umieszczaniem na naszych stronach informacji o tym, jak się z nami skontaktować. Uwagi odwiedzających mogą się okazać bezcenne, a i oni będą się czuli docenieni, kiedy ktoś przeczyta i odpowie na nie (w końcu internauci bardzo rzadko piszą bezinteresownie do twórców stron).

A very elegant form, but there’s no possibility of an e-mail contact, which is more comfortable for many people
This image can be zoomedA very elegant form, but there’s no possibility of an e-mail contact, which is more comfortable for many people
Umieśćmy więc w widocznym miejscu adres swojego konta e-mail (w trosce przed spamem może być to specjalnie na tę okazję założone konto). Możemy także pomyśleć o stworzeniu formularza dla tych wszystkich, którzy korzystają np. z kawiarenek internetowych lub z innego powodu nie mogą skorzystać z poczty e-mail (pamiętajmy jednak, że taki formularz powinien być tylko opcją!).

Polecamy stworzenie w tym celu odrębnej strony, do której odnośnik znajdzie się na każdej podstronie serwisu (w uproszczonym wydaniu można też po prostu na każdej podstronie umieścić nasz adres e-mail). Jeżeli tworzymy stronę firmy, podajmy także koniecznie adres fizyczny (idealna byłaby także mapka okolicy), numery telefonów oraz faksu.

Co nowego? (ang. what’s new)

Każdy wie, jak zmiennym miejscem jest WWW w porównaniu chociażby z mediami drukowanymi. Odwiedzając daną witrynę po raz kolejny internauta może się spodziewać wszystkiego – całkiem zmienionego wyglądu, nowych artykułów, drobnych ulepszeń lub... dokładnie tej samej zawartości, co poprzednio.

Pół biedy, jeżeli zmiany na stronie są ewidentne. Nawet wtedy pamiętajmy jednak, iż dla wielu osób odwiedzane dziennie witryny można liczyć w dziesiątkach, i z tego powodu mało kto pamięta, co dokładnie widział ostatnim razem właśnie u nas.

Don’t make our websites too complicated. Here, instead of one click, we have three pages with buttons, lists and text fields. Most of the visitors will leave frustrated before seeing the actual “what’s new” list
This image can be zoomedDon’t make our websites too complicated. Here, instead of one click, we have three pages with buttons, lists and text fields. Most of the visitors will leave frustrated before seeing the actual “what’s new” list
Mając to na uwadze, postarajmy się, aby na stronie umieszczać:

  • czas jej ostatniego uaktualnienia (wystarczy sama data; chyba, że zmieniamy treść kilka razy dziennie); idealnie byłoby, gdyby tego typu informacje pojawiały się także na każdej podstronie,
  • dokładną listę naniesionych zmian.

Możemy to zrobić w postaci oddzielnej podstrony, możemy też najnowsze zmiany przedstawić od razu na stronie głównej. Tak czy inaczej, pozwoli to internaucie na sprawdzenie, co dokładnie zmieniło się od czasu jego ostatniej wizyty, i uchroni przed koniecznością zwiedzania całego serwisu raz jeszcze oraz konfrontowania go z zawodną przecież pamięcią.

I jeszcze drobiazg, który pojawia się jednak tak często, iż urasta do rangi plagi: nie piszmy jedynie co się zmieniło, umieszczajmy od razu odnośniki do zmienionych podstron! Jakże irytująca jest informacja “na naszej stronie pojawił się nowy konkurs”, jeżeli nie wiadomo, gdzie tego konkursu szukać...

Kolejnym ułatwieniem dla internauty może być także wyróżnianie najświeższych informacji na głównej stronie lub podstronach.

Mapa serwisu (ang. sitemap)

Czy książka bez spisu treści ma prawo bytu? Oczywiście, w końcu najważniejsza jest zawsze zawartość. Jednak nie bez powodu w niemal każdej książce taki spis znajdziemy – ułatwia on zorientowanie się, o czym opowiada dana lektura, i przyspiesza odnalezienie pożądanego rozdziału.

Nice looking and usable sitemap – no major complaints here
This image can be zoomedNice looking and usable sitemap – no major complaints here
Takim spisem treści dla naszej witryny będzie mapa serwisu. Jeżeli umieścimy na niej listę wszystkich (lub najważniejszych) podstron, podobnie jak w przypadku książki pozwoli ona na łatwe rozpoznanie jakie ogólnie treści zawiera serwis, oraz w razie potrzeby skieruje odwiedzającego w konkretne miejsce.

Zadbajmy też o to, aby mapa serwisu nie była tylko “martwym” spisem podstron – rolę numerów stron w książce powinny u nas pełnić odnośniki. Dzięki temu internauta nie tylko znajdzie podstronę, która go interesuje, ale będzie mógł się do niej przenieść jednym kliknięciem.

Gazetka (ang. newsletter)

Newsletter – regularnie lub nieregularnie wysyłana e-mailem do wszystkich zainteresowanych gazetka – to już nieco bardziej zaawansowane rozwiązanie.

Pierwszym narzucającym się zastosowaniem newslettera jest informowanie o zmianach na naszej stronie. Korzyść jest tutaj obopólna: internauci nie muszą pamiętać o odwiedzaniu strony i bać się, iż niechcący przegapią coś ważnego, natomiast my zyskujemy grono wiernych i zadowolonych odwiedzających. Możemy także informować o nowych ofertach, promocjach, lub np. zamieszczać zajawki nowych artykułów.

This is how newsletter subscription should look like, although one sample issue would be even better
This image can be zoomedThis is how newsletter subscription should look like, although one sample issue would be even better
Zapisywanie się do newslettera powinno być tak proste, jak to tylko możliwe, chociaż nie może to być w żadnym wypadku przymus. Wystarczy mała zachęta wraz z przykładowym wydaniem do wglądu wszystkich zainteresowanych – tak, aby wiedzieli, na co mogą liczyć.

W każdym z wysyłanych wydań (oraz w odpowiednim miejscu na stronie) powinna być także informacja o tym, w jaki sposób anulować naszą subskrypcję. Pamiętajmy, iż nie uzyskamy nic utrudniając lub wręcz uniemożliwiając zrezygnowanie z otrzymywania naszego newslettera – zdenerwowany internauta po prostu ustawi filtr w swoim programie pocztowym, a my nigdy już nie odzyskamy jego zaufania. Podobnie będzie, jeżeli wykorzystamy jego e-mail w jakimkolwiek innym celu, niż obiecany przy zapisywaniu się. Warto więc o tym pamiętać.

Ankieta (ang. poll)

Można zaryzykować stwierdzenie, iż bardziej doceniony internauta częściej będzie wracał na naszą stronę. Możemy to osiągnąć dzięki wprowadzeniu różnych elementów interaktywnych – takimi mogą być ankiety i fora dyskusyjne (czyli miejsca wymiany poglądów).

A common type of poll – questions, vote button and viewing the results
This image can be zoomedA common type of poll – questions, vote button and viewing the results
Ankiety służą nie tylko zabawie – możemy w nich “przemycać” różne pytania dotyczące naszej strony, na które w inny sposób nigdy nie uzyskalibyśmy odpowiedzi. Jak wszystkie inne elementy witryny, ankiety powinny być jak najprostsze w obsłudze; jedno kliknięcie wybierające opcję, drugie oddające głos i pokazujące cząstkowe wyniki.

Niepełne wyniki powinny być dostępne dla wszystkich, nawet tych nie chcących lub nie mogących oddać głosu. Po zakończeniu ankiety (czas jej trwania będzie zależał głównie od tego, jak wiele osób odwiedza dziennie witrynę) wyniki powinny trafić do archiwum, można je także umieścić we wspomnianym już newsletterze.

Forum dyskusyjne (ang. discussion forum)

Zanim zdecydujemy się na forum dyskusyjne, powinniśmy zdawać sobie sprawę z tego, iż jest to już duże obciążenie także dla nas – jako tych, którzy będą je musieli moderować, czyli dbać o poziom dyskusji, usuwać niepożądane wpisy i uspokajać niepokornych użytkowników. Możemy także zdecydować się na nieco uproszczoną formę, np. komentarzy pod newsami czy artykułami, chociaż tak naprawdę jest to temat tak rozległy, że zasługuje na oddzielny artykuł.

Strefa logowania

Przemyślenia będzie wymagać także stworzenie wydzielonej części serwisu, do której dostęp będzie chroniony loginem i hasłem. Nie róbmy tego tylko po to, aby móc się pochwalić “mam już 200 zarejestrowanych użytkowników!”. Każdy z internautów ma już dziesiątki kont w różnych zakamarkach Sieci, z dziesiątkami trudnych do zapamiętania haseł... założenie jeszcze jednego będzie postrzegane jako niepotrzebne utrudnienie.

Jeżeli jednak mamy poważne powody, powiedzmy o nich użytkownikowi – podobnie, jak w przypadku newslettera, trzeba go będzie w jakiś sposób zachęcić. Może personalizacją? (czyli możliwością dopasowania treści czy wyglądu serwisu do upodobań internauty) Newsletterem? Zniżkami przy zakupach?

I znów: starajmy się jak najbardziej uprościć proces rejestracji i logowania się. Nie wypytujmy o dziesiątki zbędnych informacji, dodajmy opcję “zapamiętaj mnie”, umieśćmy też koniecznie w widocznym miejscu przycisk wylogowywania się.

Wyszukiwanie (ang. search)

To już zdecydowanie wyższa szkoła jazdy. Stworzenie dobrej wewnętrznej wyszukiwarki dla naszej witryny to wyzwanie nie tylko z technicznego (chociaż można tu znaleźć gotowe rozwiązania), ale i funkcjonalnego punktu widzenia.

The only thing to do by the visitor is typing in a search term and press the button
The only thing to do by the visitor is typing in a search term and press the button
Dobra wyszukiwarka powinna zrzucać z barków odwiedzającego wszystkie niepotrzebne obowiązki – czyli poprawiać błędy ortograficzne i gramatyczne w szukanych ciągach znaków, nie gubić się bez polskich literek (lub – co gorsza – w ich obecności), nie narzucać obowiązku wybierania dziesiątków niejasnych opcji, i zawsze zwracać te najbardziej odpowiednie rezultaty. Zadaniem użytkownika ma być tylko wpisanie w dobrze widoczne pole paru słów i wciśnięcie jedynego przycisku.

Jak łatwo sobie wyobrazić, jest to bardzo trudne zadanie i tak naprawdę niewiele serwisów może się pochwalić dobrze zaimplementowanym wyszukiwaniem. Lepiej więc poważnie się zastanowić, zanim dodamy niedopracowany algorytm i odstraszymy nim internautów.

Pozostałe podstrony

Co nam pozostało? Wszystkie inne podstrony; w zależności od rozmiarów serwisu dziesiątki, setki lub tysiące dokumentów.

Gorąco polecamy odwiedzenie witryny Alertbox (www.useit.com/alertbox Link points to external site) Jakoba Nielsena, w której autor od ośmiu (sic!) lat zastanawia się, jak uczynić Sieć bardziej pożyteczną. Podobnie jak w artykule, nie ma tam szczegółów technicznych, a jedynie podparte badaniami i przemyśleniami porady odnośnie poszczególnych elementów serwisu WWW. Niestety – tylko w języku angielskim.

Wbrew pozorom jest to bardzo ważna część serwisu. Wszystkie poprzednio wymienione elementy to tylko otoczka, pozwalająca na jak najwygodniejsze poruszanie się po stronie, natomiast tutaj kryje się to, co najbardziej chyba istotne: treść.

Jedno idzie w parze z drugim: nawet najpiękniej zaprojektowana witryna będzie bezużyteczna bez ciekawej zawartości; z drugiej strony nikt nie dotrze do bardzo interesujących treści, jeśli zdenerwuje się na wejściówce, a nieprzyjazna strona główna stanie się przeszkodą nie do pokonania.

Trudno dawać porady dotyczące podstron, które mogą traktować praktycznie o wszystkim pod słońcem. Ograniczymy się więc do dwóch. Przede wszystkim – każda podstrona powinna być postrzegana jako pewien fragment całego serwisu. Pamiętajmy więc o korzystaniu z podobnej kolorystyki i wyglądu, o zastosowaniu nawigacji pozwalającej na przejście w inne miejsce witryny, oraz o dołączeniu logo prowadzącego do głównej strony.

Poza tym fakt, o którym była już w tym artykule mowa – często będzie się zdarzać, iż odwiedzający skierowany zostanie przez wyszukiwarkę właśnie do konkretnej podstrony. Zadbajmy więc o to, aby i w głębi serwisu wiedział, gdzie się znajduje i szybko mógł trafić na stronę główną lub w pozostałe ważne miejsca.

Podsumowanie

Mamy nadzieję, iż powyższa lista przyda się przy projektowaniu nowych stron WWW lub pracach nad już istniejącymi. Oczywiście można byłoby opisać jeszcze więcej składników (np. galerii, czatów lub podstrony z polityką prywatności), ale już powyższe powinny wystarczyć, aby witryna stała się miejscem, które każdy odwiedzający z przyjemnością dopisze do Ulubionych.

Marcin Wichary

Źródło: “Enter Extra,” Link points to external site nr 3/2003, str. 23-26



 
Page added on 30th December 2003.

Copyright © 2002-2005 Marcin Wichary
Printable version | Contact | Site map