Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                     1




       ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                                  ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                                  ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                                  ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                 5



Wstęp
Witaj w drugiej wersji...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   6




                      Wprowadzenie do usability
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                  7



Usability jako budowanie er...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                            8



Guru usability i ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                9



   •   Policzmy:
           o...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                          10



Wa na jest świadomość, e w du ych ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   11


                                   reklama
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   12




                        Najwa niejsze wytyczne
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                    13



Jacy się...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                 14


Analiza i pi...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl              15



Przykład
   1. Wejdź na wybrany serwis WWW lub...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                   16



Efektywne linki.
   •   T...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                          17




                 Rysunek 5 - Sche...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                 18



Projektowanie nawigacji.
St...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                            19



Punkty startowe....
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                             20



Strona główna.
...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                       21



Problemy z rozwijanym...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                           22


W sklepie internet...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                     23



Strona ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                               24




       Rysun...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                            25



Struktura serwisu.
Pracujesz w d...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                              26




Projektowanie...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                               27



Architektura informacji.
Praw...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl               28



Budowa typowej strony.




                  ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                               29


Test Kruga.
Steve Krug proponu...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl            30


                                   reklama




  ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   31




             Efektywność serwisów korporacyjnych.
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                            32



Czego chcą u ytk...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                33


      Wprowadzone dane sprawd...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                             34



Analiza wybranych serwisów korp...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                              35


Moim zdaniem główne problemy z ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   36




                             Rysunek 28 - www.bat.com.pl
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                     37


   Moim zdaniem główne p...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                38



Projektowanie i badanie stro...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                  39



   6. Z poziomu tego sameg...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                    40



Co musi ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                               41



Na jakie pyta...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                               42


Efekty najazdu...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                    43




    Rys...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                 44



Efektywne pisanie dla Inter...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                45


       Webusability.pl, przy ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                          46




  Rysunek 38 - Wp...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                              47




    Rysunek 3...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   48


                                   reklama




           ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   49




                     Efektywność w eCommerce
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                  50



Usability w systemie eComm...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                                 51


Metody pomia...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                      52



Minimalizacja współczynnika porzuceń k...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                              53



   •   Nale y utworzyć dobrze ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                               54



   •   Automatyczne wykrywani...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                           55



   •   Doradzanie w zakupach – mo...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                   56



   •   Wszystkie elementy...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                 57



   •   Gdzie jest moja pacz...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl    58



Symulacja wpływu usability na zyski sklepu internetowego.
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   59




                 Efektywność reklamy internetowej
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                              60



Reklama, która nie irytuje
Rek...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                61


zaczyna się od słów „agencja ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                62




Bannerki, które wyró niały ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                      63




 Rysunek 60 - Stary t...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                 64


   •   du o większą uwagę ba...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                    65


   •   u ywanie „P.S.” cz...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                         66




                  ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                               67



Co jeszcze?
Nie poprzestawaj ...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl   68




                                Dostępność
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                            69



Kto i kiedy dyskryminuje klientó...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                     70


   •   Obowiązująca w Po...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                  71




             Rysunek 65 -...
Efektywne i intuicyjne serwisy WWW | www.webusability.pl                                        72




      Rysunek 67 - ...
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl
Upcoming SlideShare
Loading in...5
×

2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl

1,549

Published on

Efektywne i intuicyjne serwisy WWW

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,549
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2007.01 Efektywne i intuicyjne serwisy www - Kurs usability webusability.pl

  1. 1. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 1 Efektywne i intuicyjne serwisy WWW WERSJA ROZWOJOWA 2.0 Informacje o prawach autorskich: Autorem dokumentu oraz właścicielem praw autorskich jest Tomasz Karwatka. Treść dokumentu nie mo e być wykorzystywana ani przetwarzana bez zgody autora. Wszystkie wykorzystane ilustracje są własnością ich autorów i zostały u yte jedynie w celach edukacyjnych.
  2. 2. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 2 Spis treści Spis treści ...............................................................................................................................2 Wstęp.......................................................................................................................................5 Komu polecam kurs? ............................................................................................................5 Czytając kurs nauczysz się...................................................................................................5 Wprowadzenie do usability ...................................................................................................6 Usability jako budowanie ergonomicznych i intuicyjnych w obsłudze serwisów. ..................7 U yteczności, funkcjonalność, usability – jak to nazywać?...............................................7 Guru usability i źródła wiedzy. Najwa niejsze ksią ki i serwisy WWW. ...............................8 Określenie kluczowych celów usability. ................................................................................8 Jak przeliczyć usability na gotówkę i pozyskać bud et? ......................................................8 Usability a gotówka ...........................................................................................................8 Przykład...................................................................................................................................9 Ile mo na zyskać?.............................................................................................................9 Ile firmy wydają na usability? ............................................................................................9 Najwa niejsze wytyczne ......................................................................................................12 Jacy się u ytkownicy? ........................................................................................................13 Niepisane standardy Internetu............................................................................................13 Przykład ..........................................................................................................................13 Konwencje w Internecie. .................................................................................................13 Analiza i pisanie konstruktywnych komunikatów. ...............................................................14 Przykład ..........................................................................................................................15 Efektywne linki. ...................................................................................................................16 Podstawy nawigacji. ...........................................................................................................16 Dlaczego w Sieci nawiguje się trudniej. ..........................................................................16 Główne zadania nawigacji...............................................................................................16 Projektowanie nawigacji. ...................................................................................................18 Stała nawigacja. ..............................................................................................................18 Menu narzędziowe. .........................................................................................................18 Punkty startowe...............................................................................................................19 Strona główna. ................................................................................................................20 Jesteś tutaj. .....................................................................................................................20 Problemy z rozwijanym menu. ........................................................................................21 Ście ka nawigacyjna (ście ka powrotu, ście ka okruszków)..........................................22 Strona 404.......................................................................................................................23 Struktura serwisu. ...............................................................................................................25 Intuicyjna struktura serwisu.............................................................................................25 Przykład. .........................................................................................................................25 Projektowanie wyszukiwarki. ..............................................................................................26 Intuicyjna wyszukiwarka..................................................................................................26 Architektura informacji. .......................................................................................................27 Dobra architektura informacji. .........................................................................................27 Nazwa pod-strony: ..........................................................................................................27 Budowa typowej strony.......................................................................................................28 Test Kruga. .........................................................................................................................29 Przykład. .........................................................................................................................29 Efektywność serwisów korporacyjnych. ...........................................................................31 Czego chcą u ytkownicy serwisów korporacyjnych? .........................................................32 Nie przegap okazji. .............................................................................................................32 Formularze..........................................................................................................................32 Analiza wybranych serwisów korporacyjnych, opracowanie propozycji ulepszeń. .............34 Przykład. .........................................................................................................................34
  3. 3. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 3 Projektowanie i badanie strony głównej serwisu korporacyjnego.......................................38 Przykład. .........................................................................................................................38 Co musi znaleźć się na stronie głównej? ........................................................................40 Jakie problemy napotkasz projektując stronę główną?...................................................40 Na jakie pytania musi odpowiadać strona główna? ........................................................41 Jak przekazać cel witryny odwiedzającemu?..................................................................41 Zwiększanie ilości informacji. ..........................................................................................41 Efekty najazdu.................................................................................................................42 Projektowanie ście ek nawigacyjnych................................................................................43 Efektywne pisanie dla Internetu..........................................................................................44 Tekst skuteczny w Internecie. .........................................................................................44 Budowanie zaufania do serwisu. ........................................................................................44 Jak pogodzić multimedia i Flash z wytycznymi usability?...................................................46 Efektywność w eCommerce ................................................................................................49 Usability w systemie eCommerce.......................................................................................50 Czynniki sukcesu eCommerce. ..........................................................................................50 Metody pomiaru efektywności eCommerce. Współczynnik porzuceń koszyka. .................51 Minimalizacja współczynnika porzuceń koszyka. ...............................................................52 Zwiększamy usability katalogu produktów, koszyka i procesu zamawiania. ......................52 Dobre przykłady ..............................................................................................................52 Jak zarabiać gdy towar jest niedostępny? ..........................................................................57 Budujemy zaufanie u ytkowników do sklepu......................................................................57 Symulacja wpływu usability na zyski sklepu internetowego. ..............................................58 Efektywność reklamy internetowej.....................................................................................59 Reklama, która nie irytuje ...................................................................................................60 Więcej czy mniej? ...............................................................................................................60 Przykład ..........................................................................................................................61 Banner blindness i inne plagi..............................................................................................63 Landing pages ....................................................................................................................64 Wypalanie się bannera .......................................................................................................65 Reklama z zewnątrz ...........................................................................................................65 Co jeszcze? ........................................................................................................................67 Dostępność...........................................................................................................................68 Kto i kiedy dyskryminuje klientów? .....................................................................................69 Grupy u ytkowników oczekujące pomocy.......................................................................69 Dostępność jako inicjatywa .............................................................................................69 Podstawy prawne............................................................................................................69 Główne zasady................................................................................................................70 Jak z serwisu korzystają osoby niewidome? ......................................................................73 Poznajemy oprogramowanie typu screen-reader dla u ytkowników niewidomych. ...........73 Przykład ..........................................................................................................................73 Przykład ..........................................................................................................................74 Kontrowersje wokół niektórych rozwiązań ..........................................................................75 Testujemy dostępność serwisu dla niepełnosprawnych .....................................................76 Przykład ..........................................................................................................................76 Testujemy serwis WWW na ró nych platformach ..............................................................77 Przykład ..........................................................................................................................77 Przykład ..........................................................................................................................78 Przykład ..........................................................................................................................79 Zdradliwa Captcha..............................................................................................................79 Kanały RSS jako nowy środek komunikacji........................................................................80 Badanie usability..................................................................................................................81 Dlaczego nale y badać i testować?....................................................................................82 Testy u yteczności a testy grupowe ...............................................................................82 Ocena heurystyczna ...........................................................................................................82
  4. 4. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 4 Lista kontrolna ....................................................................................................................82 Badania eye-tracking ..........................................................................................................83 Badania z u ytkownikami (user-experience) ......................................................................84 Ilu u ytkowników powinno brać udział w testach? ..........................................................84 Kogo i jak rekrutować do testów? ..................................................................................85 Typy testów user-experience ..........................................................................................85 Jak testować? .................................................................................................................85 Środki techniczne podczas badania user-experience.....................................................86 Projektowanie zgodne z usability .......................................................................................88 Etapy analizy usability w harmonogramie i bud ecie projektu............................................89 Projektowanie zorientowane na u ytkownika..................................................................89 Jak stworzyć dobry prototyp? .............................................................................................89 Analiza kontekstu u ytkowania .......................................................................................89 Sortowanie kart ...............................................................................................................89 Scenariusze u ycia (use cases)......................................................................................90 Persony ...........................................................................................................................90 Projektowanie struktury serwisu. ........................................................................................90 Przykład ..........................................................................................................................90 Projektowanie makiet funkcjonalnych strony głównej.........................................................91 Przykład ..........................................................................................................................91 Projektowanie makiet funkcjonalnych kluczowych pod-stron. ............................................93 Przykład. .........................................................................................................................93 Testowanie (prawie) gotowego serwisu..............................................................................93 Poprawa jakości serwisów WWW. Formułowanie zasad QA. ............................................94 Automatyzacja testów QA...................................................................................................94 Przykład. .........................................................................................................................94 Współpraca z agencją interaktywną...................................................................................98 Jak formułować swoje oczekiwania? ..................................................................................99 Kliencie, czego masz prawo wymagać od agencji interaktywnej........................................99 Komunikacja z u ytkownikiem..........................................................................................101 Dobre praktyki i ciekawe przykłady...................................................................................102 Załączniki ............................................................................................................................105 Top Ten Web Design Mistakes of 2005 ...........................................................................106 Zakończenie........................................................................................................................107 Literatura...........................................................................................................................108 Polecam............................................................................................................................108 Szczególną pomoc w promowaniu i tworzeniu kursu odgrywają......................................109
  5. 5. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 5 Wstęp Witaj w drugiej wersji Kursu Usability. Wersję te rozbudowałem o kilkanaście nowych podrozdziałów, bardziej szczegółowe opisy oraz nowe przykłady. Czy zastanawialiście się co decyduje o powodzeniu serwisów WWW? Co sprawia, e u ytkownicy chętniej przebywają na niektórych stronach? W głównej mierze decyduje o tym usability, zwane te u ytecznością. W kursie pokazuję jak budować intuicyjne w obsłudze serwisy i udowadniam jak wielki wpływ ma u yteczność na finalny sukces ka dego interaktywnego projektu. Forma kursu ma ułatwić szybkie zapoznanie się z nim. Większość informacji została podana w skondensowanej formie, dzięki czemu mo esz zapoznać się z tymi elementami, które Ciebie najbardziej interesują, bez konieczności czytania całości. Nawet jednak przeczytanie całości nie zajmie Ci więcej ni 2 godziny. Komu polecam kurs? Osobom związanym z marketingiem, reklamą i PR, wszystkim, którzy wykorzystują Internet do komunikacji ze swymi klientami, dziennikarzami i otoczeniem biznesowym. Kurs ten szczególną wartość ma tak e dla osób planujących lub prowadzących działalność handlową w Sieci. Tomasz Karwatka jest autorem serwisu http://www.webusability.pl i pracownikiem agencji interaktywnej Janmedia (http://www.janmedia.pl). Czytając kurs nauczysz się. • Ile kosztuje dobre usability. • Ile mo esz zyskać dzięki dobremu usability. • Co decyduje o efektywności serwisu WWW. • Jak prowadzić analizę usability i oceniać intuicyjność serwisu. • Jak skutecznie docierać do klientów, mediów i otoczenia biznesowego poprzez efektywny serwis korporacyjny. • Jak zwiększać efektywność systemów eCommerce. • Co to jest współczynnik porzuceń koszyka i jak mo na go zmniejszać. • Czym są testy user-experience i jak je prowadzić. • Jak projektować u yteczne serwisy WWW i współpracować z agencją interaktywną. Kontakt i współpraca. Serdecznie zapraszam ka dego, kto chce pomóc w promowaniu, ulepszaniu, publikowaniu kursu do kontaktu – tkarwatka@webusability.pl. Jestem otwarty na wszelkie pomysły na współpracę w zakresie usability. Więcej materiałów edukacyjnych oraz najnowszą wersję kursu zawsze mo na znaleźć na http://www.webusability.pl.
  6. 6. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 6 Wprowadzenie do usability
  7. 7. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 7 Usability jako budowanie ergonomicznych i intuicyjnych w obsłudze serwisów. U yteczność (ang. usability, web-usability) - nauka zajmująca się ergonomią i funkcjonalnością urządzeń oraz aplikacji. W Polsce pojęcie u yteczności stosowane jest zazwyczaj w odniesieniu do ergonomii serwisów WWW oraz aplikacji u ytkowych. U yteczność w ich przypadku skupia się na: • intuicyjnej nawigacji, • ułatwieniu skanowania w poszukiwaniu informacji, • zapewnieniu zrozumiałej dla u ytkownika komunikacji. Guru u yteczności Jakob Nielsen pisze o pięciu najwa niejszych elementach usability: • Learnability – jak łatwo jest u ytkownikom wykonać podstawowe zadanie podczas pierwszego kontaktu z serwisem? • Efficiency – jak szybko zadania wykonuje u ytkownik, który ju zna serwis? • Memorability – jak szybko u ytkownik mo e osiągnąć biegłość w posługiwaniu się serwisem po dłu szej nieobecności w serwisie? • Errors – jak wiele błędów popełniają u ytkownicy, jak błędy te są komunikowane oraz w jakim czasie i jak u ytkownicy mogą poradzić sobie z nimi? • Satisfaction: czy u ytkownicy lubią u ywać serwisu? Oczywiście takich elementów mo na wypunktować wiele. Nale y pamiętać tak e o odnalezieniu złotego środka pomiędzy ilością funkcji a łatwością posługiwania się. U ytkownicy nie będą zadowoleni z bardzo ergonomicznej aplikacji, jeśli nie będą mogli wykonać w niej po ądanych działań. Z drugiej strony nie usatysfakcjonuje ich tak e aplikacja dająca teoretyczną mo liwość wykonania po ądanych zadań, ale w sposób tak skomplikowany, e w praktyce wręcz niewykonalny. U yteczności, funkcjonalność, usability – jak to nazywać? Słowniki języka polskiego i wcześniejsze opracowania u ywają słowa "funkcjonalność". Termin "u yteczność" wynika z chęci upodobnienia terminów polskich do ich angielskich odowiedników. Obecnie w środowisku informatyków i pokrewnych przyjęło się rozumieć "funkcjonalność" jako określenie ilości funkcji, opcji czy mo liwości danego programu/strony WWW, a "u yteczność" jako łatwość korzystania z tych e. Najpełniejszą definicję usability znajdziesz zawsze na Wikipedia: http://pl.wikipedia.org/wiki/U%C5%BCyteczno%C5%9B%C4%87_(web-usability)
  8. 8. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 8 Guru usability i źródła wiedzy. Najwa niejsze ksią ki i serwisy WWW. • Designing Web Usability : The Practice of Simplicity, J. Nielsen • Don't Make Me Think : A Common Sense Approach to Web Usability, S. Krug • Homepage Usability : 50 websites deconstructed, J. Nielsen, M. Tahir • Strona domowa Jakoba Nielsena - http://www.useit.com/ • Katalog linków dotyczących usability - http://www.usableweb.com/ • Strona J. Zeldmana, orędownika standardów sieciowych - http://www.zeldman.com/ • Tematy związane z usability aplikacji WWW - http://www.alistapart.com/ • Polski serwisu o u yteczności o uznanej marce - http://www.uzytecznosc.pl/ • Serwis grupy osób dbającej o dostępność polskich WWW - http://www.osiolki.net/ • Mój serwis dotyczący usability - http://www.webusability.pl • Kurs usability edytowany przez u ytkowników – http://www.kursusability.pl Określenie kluczowych celów usability. Serwis korporacyjny lub Sklep internetowy Portal produktowy Ilość informacji Mała – średnia Mała – bardzo du a Bardzo du a Ilość aktualizacji Niska – średnia Średnia - du a Bardzo du a Dla u ytkownika Efektywny kontakt Wygodne wyszukanie Dostępność informacji najwa niejsze Poznanie produktów, produktu Szybkość odnalezienia firmy Bezpieczeństwo, zaufanie ich. Obsługa i wygoda Dla serwisu Zainteresowanie Sprzeda Utrzymanie u ytkownika najwa niejsze u ytkownika Budowanie lojalności w obrębie portalu. Skłonienie do Zainteresowanie jak kontaktu/zakupu/wizyty w największa ilością salonie informacji. Podsumowanie Dość łatwo budować Optymalizacja usability Konieczne u yteczne serwisy wymaga zazwyczaj zaawansowane testy i korporacyjne i badań, tak e badań typu ostro ne projektowanie produktowe user – experience usability. Jak przeliczyć usability na gotówkę i pozyskać bud et? Usability a gotówka Przykład oparty na ksią ce Jakoba Nielsena: • Firma zatrudnia 10 000 pracowników (np. któryś z polskich banków). • Wartość czasu pracy to około 200 zł za godzinę (utracony zysk). • Jedna informacja na stronie głównej jest nie- intuicyjna (np. źle napisany wstęp aktualności lub nic nie mówiący link). • Ka dy z pracowników poświęca dodatkowo 5 sekund zastanawiając się co oznacza. • Około 15% osób kliknie na link niepotrzebnie gdy nie zrozumieją, e nie zawiera u ytecznych dla nich informacji. • Ka dy z tych 10% spędzi minimum 30 sekund czytając tekst zanim zorientuje się, e nie zawiera u ytecznych dla niego informacji. Wejście i wyjście z artykułu zajmie im minimum 5 sekund.
  9. 9. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 9 • Policzmy: o W pierwszym kroku tracimy 10 000 (pracownicy) * 5 s = 14 h, co kosztuje 2800 zł o W drugim kroku tracimy 10 000 * 10% * 35 s = 10 h co kosztuje nas 2000 zł o Zatem jedna nieoptymalna zmiana w serwisie kosztuje firmę jednorazowo prawie 5000 zł. Tabela 1 - Jednorazowy koszt jednej nie-intuicyjnej informacji Firma Ilość pracowników 10000 Koszt utraconej godziny pracy 200,00 zł Informacja Dodatkowy czas na zrozumienie nie-intuicyjnego komunikatu [s] 5 Ilość błędnych decyzji 10% Czas utracony na skutek błędnej decyzji [s] 35 Straty czas stracony w kroku 1 [h] 14 koszt kroku 1 2 778 zł czas stracony w kroku 2 [h] 10 koszt kroku 2 1 944 zł Razem 4 722 zł Przykład Mo esz otworzyć plik ww. wyliczeń zapisany w formacie Excel i samodzielnie przeprowadzić symulację dla zmiennych parametrów. Wszystkie materiały ćwiczeniowe są dostępne na http://www.webusability.pl. Ile mo na zyskać? W swoim Alertbox Jakob Nielsen opisuje badania na 42 przypadkach gdzie łatwo dało się ustalić przeło enia ulepszenia u yteczności na efekty. Dla ka dego projektu ustalono mierniki, które zbadano przed i po wprowadzeniu ulepszeń w usability. Zało one mierniki wzrosły średnio o 135%. Sprzeda (konwersja) – 100% Ilość odsłon / ilość UU – 150% Efektywność (user performance) – 161% Ile firmy wydają na usability? Zazwyczaj porównuje się koszt badań usability do całego kosztu projektu. Dysponuję dwoma badaniami dotyczącymi kosztów usability w projekcie. Oba badania oparto na tych samych zało eniach: porównujemy całkowity koszt działań usability do całkowitego kosztu projektu. W badaniu prowadzonym przez Norman/Nielsen na próbce 863 serwisów na usability wydawano około 10% bud etu projektu. W analizach jakie przeprowadziłem w firmie w której pracuję (na znacznie mniejszej próbce bo tylko 5 przypadków) działania związane z usability skonsumowały około 14% bud etu projektów. Brałem pod uwagę jedynie te projekty gdzie prowadziliśmy zarówno usability jak i projektowanie. W wielu przypadkach pracujemy jedynie jako badacz/konsultant usability i koszty całego projektu nie są nam znane.
  10. 10. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 10 Wa na jest świadomość, e w du ych projektach udział badań usability w kosztach całego projektu będzie procentowo znacznie ni szy. Podsumowując wydając 10-14% bud etu na usability zyskujemy o 135% efektywniejszy produkt. Im większa skala działania, tym efekty mierzone w gotówce będą bardziej spektakularne. Im mniejsza skala działania tym efekty mogą okazać się wa niejsze dla przedsiębiorstwa.
  11. 11. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 11 reklama
  12. 12. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 12 Najwa niejsze wytyczne
  13. 13. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 13 Jacy się u ytkownicy? • Internauci spędzają coraz więcej czasu online (12 godzin miesięcznie w 2003, 22 godzin miesięcznie w 2005) • Są coraz bardziej aktywni i szybciej znajdują informacje (80 sekund na jedną odsłonę strony w 2003, 57 sekund w 2005) • U ytkownicy coraz więcej wymagają od twórców serwisów. Niepisane standardy Internetu. Przykład Zastanów się jakie konwencje stosowane są w gazecie. • nagłówek • podpis pod fotografią • ... Konwencje w Internecie. • Du o konwencji pochodzi ze świata realnego, zwłaszcza z prasy. • Konwencje i niepisane standardy są bardzo przydatne i zazwyczaj są słuszne, inaczej nie byłyby konwencjami :) • Projektanci mają wrodzoną niechęć do wykorzystania konwencji. • Umieszczenie elementów w pewnych standardowych miejscach ułatwia odnalezienie ich. • Logo w lewym górnym naro niku serwisu jest konwencją. • Podkreślenie elementu będącego linkiem jest konwencją. • Zmiana kolorów linków ju odwiedzonych jest konwencją. • Pojęcie koszyka w handlu internetowym jest konwencją. Rysunek 1 - serwis e-gotowka.pl jest bardzo czytelny ale mam jedno zastrze enie. Po wejściu na pod-stronę chciałem wrócić na stronę główną poprzez kliknięcie na logo serwisu. Po kliknięciu na Cetelem zamiast wrócić na stronę główną serwisu, zostałem skierowany na strony banku Cetelem. Wielu u ytkowników spodziewa się tutaj pewnej konwencji, która nie została zachowania – logo w lewym górnym logu, które jest linkiem na stronę główną. W serwisie nie ma logo w lewym górnym naro niku a jedyne logo w nagłówku prowadzi do serwisu zewnętrznego.
  14. 14. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 14 Analiza i pisanie konstruktywnych komunikatów. Rysunek 2 - Komunikat "błąd pracy z systemem" brzmi dość enigmatycznie. Nie tłumaczy co się stało i co nale y teraz zrobić. Rysunek 3 - Dobry komunikat w Merlin.pl. Wiem co się stało, co muszę robić oraz gdzie mogę szukać pomocy. Rysunek 4 - Na stronach korporacje.pekao.com.pl wyszukiwarka po nie znalezieniu poszukiwanej frazy proponuje skorzystanie z mapy strony lub skontaktowanie się w celu uzyskania potrzebnych informacji.
  15. 15. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 15 Przykład 1. Wejdź na wybrany serwis WWW lub portal. 2. Odszukaj komunikaty o następujących sytuacjach a. Wyszukiwarka – brak wyników wyszukiwania b. Newsletter – niepoprawny adres e-mail c. Formularz kontaktowy – niepoprawne dane lub brak danych d. Inny komunikat systemu 3. Czy komunikaty systemu są poprawne? a. Czy tłumaczą co się stało? b. Czy wskazują miejsce problemu? c. Czy podają rozwiązanie problemu? d. Czy jeśli proszą o wpisanie danych, podają ich format?
  16. 16. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 16 Efektywne linki. • Tekst odnośników i opcji w menu nie powinien być zbyt długi gdy utrudnia to szybkie zrozumienie znaczenia. o Dwa do czterech słów. • Unikaj „kliknij tutaj”! • Stosuj tytuły odnośników. • Linki tekstowe – trzymaj się konwencji. o Podkreślenia. o Niebieski kolor (coraz częściej uwa a się, e to nie jest konieczne). o Oznaczenie ju klikniętych. • Nie otwieraj linków w nowym oknie. • Wyraźnie zaznacz elementy, które mo na kliknąć. Podstawy nawigacji. • Działając zazwyczaj czegoś szukasz • Zale nie od charakteru pytasz lub szukasz na własną rękę. o W Internecie pytanie to zadawanie pytań wyszukiwarce. o Szukanie na własną rękę to korzystanie z menu nawigacyjnego. • Dwa typu u ytkowników: o Nastawieni na wyszukiwanie – od razu idą do wyszukiwarki o Nastawieni na przeglądanie – wolą przeglądać strony Dlaczego w Sieci nawiguje się trudniej. • Brak pojęcia skali, nie wiesz jak du a jest witryna więc trudno określić ile mo e zająć jej przeszukanie. • Nieintuicyjne określanie pozycji i kierunku, nie przystaje do świata realnego • Surfowanie po Internecie z natury jest stanem pewnego zagubienia. J. Nielsen podaje, e a 30% wszystkich kliknięć w Internecie to kliknięcie przycisku Wstecz. To tak e kolejny argument by unikać ramek i nawigacji opartej na Flash – te elementy mogą utrudniać nawigowanie za pomocą przycisku Wstecz. Główne zadania nawigacji • Nawigacja umo liwia odnajdywanie dokumentów w serwisie. • Nawigacja informuje nas gdzie jesteśmy w strukturze serwisu (odpowiednie oznaczenie w menu). • Nawigacja daje nam poczucie stabilności (element stały). • Mówi o tym co w danym miejscu się znajduje (pojęcie menu). • Mówi jak mo emy z tego skorzystać. • Buduje zaufanie do autorów serwisu.
  17. 17. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 17 Rysunek 5 - Schemat nawigacji po serwisie, na podstawie S.Krug
  18. 18. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 18 Projektowanie nawigacji. Stała nawigacja. Zbiór elementów nawigacyjnych pojawiających się na wszystkich stronach serwisu. Są to najczęściej: • Identyfikator strony. • Łącze do strony startowej. • Wyszukiwarka. • Menu narzędziowe. • Menu główne. Stała nawigacja mo e być zmieniona bądź nieobecna na stronie głównej oraz na stronach z formularzami (np. w systemach płatności). Menu narzędziowe. Zawiera od 3 do 7 elementów, które uznajemy za szczególnie przydatne. Zazwyczaj są to: • Strona główna. • Kontakt. • Mapa serwisu. Często występują tutaj tak e łącza takie jak: • Archiwum. • Wiadomości prasowe. • Wyloguj się. • Polityka prywatności. • Obsługa klienta. • Rejestracja. • Forum dyskusyjne. • Wyszukiwarka. • Pliki do pobrania. • Koszyk. • FAQ. • Zapisz się do nas. • Pomoc. • Adresy placówek. • Jak zacząć? • Twoje konto.
  19. 19. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 19 Punkty startowe. Punkty startowe są elementami strony głównej, które prowadzą w głąb struktury serwisu. Dzięki temu u ytkownikom łatwiej odnaleźć najczęściej poszukiwane elementy serwisu. Punkty startowe pokazują te co na stronie mo na znaleźć i zrobić. Dzięki temu pozwalają na szybkie zapoznanie się z najwa niejszymi elementami całego serwisu. Rysunek 6 - Punkty startowe w serwisie www.ingbank.pl (zaznaczone ółtym markerem) ułatwiają dostęp do opisu najwa niejszych produktów banku. Rysunek 7 - Na serwisie www.mbank.pl punkty startowe nawet nazywają się Start.
  20. 20. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 20 Strona główna. Ró ni się od innych stron serwisu. Mo e na niej obowiązywać inny system nawigacyjny ni na pod-stronach. Jesteś tutaj. • Działa na zasadzie „jesteś tutaj” na mapie • Stosowane najczęściej w menu Rysunek 8 - bardzo dobrze wyró niony element Rysunek 9 - lepiej byłoby wyró nić tylko ostatni element Rysunek 10 - Mocno wyró niony pierwszy poziom ale zupełny brak wyró nienia drugiego poziomu
  21. 21. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 21 Problemy z rozwijanym menu. Dla oszczędzenia miejsca często stosuje się te menu rozwijane. Generuje to jednak sporo problemów: • Nie mo na obejrzeć zawartości menu przed kliknięciem. • Zazwyczaj są trudne do przeglądania, zwłaszcza jeśli mają kilka poziomów. • Jeśli jest źle skonstruowane to występują problemy z dostępnością. • Wyszukiwanie z poziomu przeglądarki nie będzie uwzględniać opcji menu dostępnych po rozwinięciu. Rysunek 11 - Autorzy tej witryny nawet wyszukiwarkę umieścili w rozwijalnym menu. Menu rozwijanie doskonale sprawdzają się w listach, np. z wyborem kraju. Rysunek 12 - Menu rozwijane pozwala na wygodny wybór kraju.
  22. 22. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 22 W sklepie internetowym na www.hp.pl zastosowano element nawigacyjny nieco podobny - ale znacznie gorszy od rozwijanego menu. Aby obejrzeć całe menu promocji nale y nawigować strzałeczkami. Prawdopodobnie du a część u ytkowników nawet nie zauwa y, e strona oferuje nie 6 grup promocji (widocznych po załadowaniu serwisu) ale a 13. Ponad połowa zawartości stron nie zostanie dobrze poznana z powodu źle skonstruowanego menu. Rysunek 13 - Strzałka przewijająca menu z promocjami jest słabo widoczna a cały mechanizm jest bardzo nieintuicyjny. Rysunek 14 - Po kliknięciu strzałki menu Promocje pokazuje swoje następne składniki. Ście ka nawigacyjna (ście ka powrotu, ście ka okruszków). • Pokazuje aktualną pozycję • Pozwala na cofanie się w strukturze • Najlepszym separatorem kolejnych poziomów jest znak „>” • U ywaj słowa „jesteś tutaj” aby u ytkownik zrozumiał znaczenie ście ki Rysunek 15 - Ście ki nawigacyjne w bzwbk.pl oraz na About.com
  23. 23. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 23 Strona 404 Postaraj się zaplanować sytuacje gdy u ytkownik mo e najbardziej potrzebować pomocy. Z pewnością taką sytuacją jest kliknięcie lub wpisanie niepoprawnego linku. Najczęściej u ytkownik otrzymuje zwykłą stronę błędu, niestety nie pomaga mu ona odnaleźć to czego szuka. Rysunek 16 - Strony błędów takie jak wy ej nie są pomocne dla u ytkownika. Nie zawierają sugestii co do następnych kroków. Rysunek 17 - Serwis Microsoft.com w przypadku podania przez u ytkownika strony, która nie istnieje pokazuje u ytkownikowi nie tylko obszerne wytłumaczenie sytuacji ale tak e katalog linków i wyszukiwarkę. Tutaj naprawdę mo na uzyskać pomoc.
  24. 24. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 24 Rysunek 18 - Serwis Apple.com tak e doskonale rozwiązuje problemy zagubionych internautów. Rysunek 19 - Prosty trick polega na takim skonfigurowaniu domeny aby wpisanie o jednego "w" za du o lub za mało w adresie przekierowywało do dobrej strony. Trick ten z powodzeniem stosuje Amazon aby ułatwiać swoim klientom ycie.
  25. 25. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 25 Struktura serwisu. Pracujesz w domu, chcesz kupić drukarkę. Jaką opcje wybierzesz w katalogu produktów sklepu internetowego Home czy Office? Intuicyjna struktura serwisu. • Struktura serwisu musi być zorientowana na u ytkownika: • Wa ne są wybory alternatywne. Gdy u ytkownik widzi całość łatwiej jest mu zadecydować. • U ytkownicy nie wybierają optymalnie lecz zadowalają się. o U ytkownicy spieszą się. o Nie ma du ej szkody jeśli się pomylimy. o Zamiast oceniać wszystkie odnośniki wolimy ew. kliknąć wstecz gdybyśmy źle wybrali. • Nale y dbać o dobranie odpowiedniej głębokości i szerokości menu. • By dobrze rozplanować nawigację nale y zdobyć przykład treści dla ka dego z poziomów serwisu. Przykład. 1. Uruchom program FreeMind (do pobrania z http://freemind.sourceforge.net/wiki/index.php/Main_Page#Download) 2. Uruchom wybrany serwis internetowy 3. Zapisz jego strukturę w programie FreeMind a. Postaraj się wyró nić bloki struktury serwisu takie jak menu główne menu narzędziowe / nagłówek stopka punkty startowe 4. Zaproponuj nową strukturę serwisu. a. Nową mapę serwisu mo esz wykonać zgodnie z ni ej zaprezentowanym schematem. b. Zaproponuj optymalny stosunek szerokości do głębokości menu. c. Zwróć uwagę na intuicyjne nazwy sekcji i dokumentów d. Postaraj się stworzyć dodatkowe elementy nawigacyjne w postaci punktów startowych i innych poznanych mechanizmów. Rysunek 20 - Stara i nowa struktura serwisu WWW.
  26. 26. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 26 Projektowanie wyszukiwarki. Intuicyjna wyszukiwarka. • Wyszukiwarka dla u ytkownika to: o pole tekstowe, o przycisk z wyrazem Szukaj • Kolejny raz trzymaj się konwencji – większość osób poszukuje słowa „Szukaj”, nie u ywaj jego mniej popularnych synonimów: o Znajdź o Szybkie wyszukiwanie • Jeśli jako etykietę bloczka u ywasz słowa „Szukaj” to na przycisku mo esz umieścić słowo „Start” . W USA jest to du o popularniejsze rozwiązanie ni w Polsce. • Nie trzeba ju edukować u ytkowników tekstami typu „Wpisz słowo kluczowe”. • Upewnij się, e u ytkownik zna zakres wyszukiwania. o Domyślnie wyszukiwanie w całej witrynie. • Ka de dodatkowe pole konfiguracji wyszukiwarki mo e sprawiać u ytkownikom trudności – dobra wyszukiwarka to prosta wyszukiwarka. • Im dłu sze pole wyszukiwania tym dłu sze zapytanie wpisują u ytkownicy, dzięki temu otrzymują bardziej precyzyjne wyniki. • Mo liwość filtrowania i wyszukiwania zaawansowanego dopiero na stronach wyników. Rysunek 21 - Zasoby Allegro są olbrzymie ale wyszukiwarka jest prosta i przejrzysta. Dopiero link zaawansowane prowadzi do rozbudowanych mechanizmów wyszukiwania. Rysunek 22 - Wyszukiwarka w mBank.pl mimo, e jest niewielka to mo e sprawiać problemy. Mało kto od razu zrozumie, e pod ikoną kwiatka znajduje się menu rozwijane umo liwiające zawę enie wyszukiwania.
  27. 27. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 27 Architektura informacji. Prawidłowo zastosowana architektura informacji organizuje cały serwis tak, e błyskawicznie wiemy co jest wa ne. Najbli sze porównanie to odpowiedni skład gazety. Dobra architektura informacji. • Podziel stronę na wyraźne bloki funkcjonalne. Pozwala to u ytkownikom skupić się tylko na tym co dla nich wa ne. • Im coś wa niejsze, tym bardziej się wyró nia. • Elementy powiązane ze sobą logicznie powinny być powiązane te w sposób wizualny. • Elementy powinny być wizualnie zagnie d one. Nazwa pod-strony: • Nazwa strony powinna docierać do u ytkownika jako: o Podświetlenie opcji w menu w jakiej jestem o Wyraźna nazwa strony w części contentowej (przeznaczonej na treść) serwisu o Nazwa strony jako tytuł – umieszczona w pasku przeglądarki • Nazwa musi być zgodna z tym co kliknąłem lub jak najbardziej zbli ona
  28. 28. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 28 Budowa typowej strony. Rysunek 23 - typowy layout serwisu WWW. Rysunek 24 – makieta strony głównej serwisu.
  29. 29. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 29 Test Kruga. Steve Krug proponuje następujący test serwisu WWW: Niezale nie od tego na jakiej pod-stronie serwisu się znajdziesz, powinieneś błyskawicznie móc odpowiedzieć na pytania: 1. Co to jest za witryna (identyfikator witryny)? 2. Na jakiej jestem stronie (nazwa strony)? 3. Jakie są główne kategorie? 4. Jakie mam opcje do wyboru na tym poziomie struktury? 5. Gdzie znajduję się w odniesieniu do całej struktury? 6. W jaki sposób mogę czegoś poszukać? Przykład. Wykonanie testu Kruga dla wybranej witryny. 1. Wybierz losowo dowolną stronę internetową i wydrukuj ją. 2. Kartkę z wydrukiem trzymaj przed sobą na odległość ręki lub mocno zmru oczy abyś nie mógł widzieć detali. 3. Tak szybko jak to mo liwe, spróbuj odnaleźć i zaznaczyć wszystkie ni ej wymienione elementy. Logo witryny Nazwa strony Kategorie i podkategorie Nawigacja lokalna Oznaczenie „tutaj jesteś” Wyszukiwarkę 4. Następnie odpowiedz na poni sze pytania Co to jest za witryna (identyfikator witryny)? Na jakiej jestem stronie (nazwa strony)? Jakie są główne kategorie? Jakie mam opcje do wyboru na tym poziomie struktury? Gdzie znajduję się w odniesieniu do całej struktury? W jaki sposób mogę czegoś poszukać?
  30. 30. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 30 reklama MarcinGocha.com otwórz oczy na nowe mo liwości wykorzystaj efektywnie moc nowych mediów
  31. 31. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 31 Efektywność serwisów korporacyjnych.
  32. 32. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 32 Czego chcą u ytkownicy serwisów korporacyjnych? W 2005 roku Agencja Janmedia Interactive zapytała osoby zajmujące się serwisami korporacyjnymi na co najczęściej narzekają ich u ytkownicy. Rysunek 25 - Na co najczęściej narzekają nasi u ytkownicy - przedstawiciele korporacji o swoich serwisach. Nie przegap okazji. Co kilka lat większość znanych mi firm zmienia swoje strony korporacyjne. W mojej opinii zazwyczaj jest to efektem rozwoju działań marketingowych lub wynika po prostu z chęci ulepszenia serwisu. Jeśli chcesz zrobić dobrą robotę, to doskonały moment dla Ciebie byś zaproponował przetestowanie obecnego serwisu. Nierozwa ne byłoby wyrzucenie obecnego serwisu do kosza i rozpoczęcie od pustej kartki gdy masz mo liwość sprawdzić co dobrego a co złego jest w obecnym serwisie. Gorąco polecam przetestować z kilkoma u ytkownikami ka dy serwis, który ma zostać poddany procesowi odświe enia. Dobrym pomysłem mo e być te zorganizowanie porównawczych testów z u ytkownikami dla serwisów Twojej konkurencji. Będziesz miał okazję zdobyć cenna wiedzę o zachowaniach u ytkowników na podobnych serwisach – to ułatwi decyzję o kształcie nowego serwisu. Formularze. Formularze są elementem, który w serwisach korporacyjnych jest często odpowiedzialny za obni enie ogólnej efektywności serwisu – wiele razy słyszałem od klienta, e chce aby poprzez jego serwis korporacyjny klienci mogli nawiązać kontakt. To zadanie jest tym trudniejsze im mniej u yteczny formularz kontaktowy. Co na pewno mo na zrobić aby było lepiej: Oznaczaj pola obowiązkowe. Podawaj przykłady formatu informacji jaki oczekujesz lub przyjmuj ka dy u ywany format. Wyraźnie podawaj ograniczenia liczby znaków. Jeśli to nie jest konieczne, nie twórz ograniczeń liczby znaków. Nie pokazuj opcji, których klient nie mo e wybrać.
  33. 33. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 33 Wprowadzone dane sprawdzaj jak najszybciej. Bezwzględnie zrezygnuj z przycisku Wyczyść. Wyłączaj przycisk wysyłający formularz zaraz po jego kliknięciu. Rysunek 26 - Formularz kontaktowy na www.mBank.pl. Nie jest najlepiej: nie oznaczono pól wymaganych (wymagane są wszystkie) a przycisk WYCZYŚĆ wygląda du o bardziej zachęcająco do kliknięcia ni WYŚLIJ.
  34. 34. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 34 Analiza wybranych serwisów korporacyjnych, opracowanie propozycji ulepszeń. Przykład. Przeanalizuj witryny, jakie problemy rzucają Ci się w oczy w pierwszej kolejności? Rysunek 27 – www.bzwbk.pl
  35. 35. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 35 Moim zdaniem główne problemy z u ytecznością serwisu to: o Menu „Usługi dla Ciebie” – trzeba przewijać okienko co uniemo liwia szybkie zapoznanie się z listą usług. o Nazwa sekcji w menu głównym „Home: Dla Ciebie” brzmi co najmniej dziwnie i dwuznacznie. o Dla wielu osób automatyczne przełączenie z głównej domeny www.bzwbk.pl na www.dlaciebie.bzwbk.pl nie będzie jasne i nie zrozumieją, e tak naprawdę znaleźli się w sekcji dla klientów indywidualnych. Klienci korporacyjny mogą mieć powa ne problemy z zauwa eniem, e aby przejść do swojej sekcji serwisu muszą wybrać link tekstowy na górze serwisu. o Nazwy głównych sekcji niewiele mówią, lepiej by tego typu sformułowania były punktami startowymi a menu główne by pozostało w formie zbli onej do nawigacji znanej z innych banków. o Wyszukiwarka znajduje się w dość nietypowym dla niej miejscu. Zastąpienie przycisku „Szukaj” linkiem jest dość nietypowe i mo e utrudniać zrozumienie wyszukiwarki. o Nie mo na wrócić z pod-stron serwisu poprzez kliknięcie na logo. o Podawanie daty na stronie banku w strategicznym miejscu uwa am za stratę cennej przestrzeni. Podobnie odbieram przeznaczenie praktycznie całego widocznego obszaru ekranu w sekcji środkowej na gigantyczny banner reklamowy. Co gorsza banner ten często powtarza się w innych sekcjach głównych. Klikając kolejne elementy menu głównego u ytkownik mo e nawet nie zauwa yć, e zmienia się dolna część strony (banner i menu produktowe pozostają takie same).
  36. 36. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 36 Rysunek 28 - www.bat.com.pl
  37. 37. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 37 Moim zdaniem główne problemy z u ytecznością serwisu to: o Menu główne pisane w pionie i w dodatku bardzo skomplikowane (długie nazwy). Szalenie utrudnia korzystanie z serwisu. Na szczęście niedawno menu to zostało zmienione na układ poziomy. o Bardzo nieczytelna czcionka w menu narzędziowym na górze serwisu. o Wyszukiwarka jest dostępna na stronie głównej, nie ma potrzeby w menu głównym tworzyć osobnego odnośnika do wyszukiwarki. o Serwis zachowuje się bardzo nietypowo po wybraniu z sekcji narzędziowej linku „Inne rynki”. Musimy dwa razy potwierdzić, e rzeczywiście chcemy przejść na inny serwis. Rysunek 29 - Strona informuje nas, e opuszczamy serwis www.bat.com.pl i od tego momentu firma nie ponosi odpowiedzialności za materiały zawarte na stronach. o Połączenie w jedynym bloczku wyszukiwarki i menu działa dezorientująco. Zazwyczaj takie zestawienie listy rozwijanej i wyszukiwarki słu y do zawę enia wyników wyszukiwania. Tutaj jednak ka dy z elementów działa niezale nie. Ponadto menu „Zobacz” zawiera przed ka dą opcją tajemnicze liczby. Rysunek 30 - Tajemnicze liczby przed opcjami menu z pewnością nie pomagają w nawigacji.
  38. 38. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 38 Projektowanie i badanie strony głównej serwisu korporacyjnego. 10 sekund to maksymalny czas skupienia uwagi przez u ytkownika. Powy ej tego czasu u ytkownicy zaczynają się zajmować swoimi sprawami. Czas przejścia pomiędzy stronami nie powinien przekraczać tego czasu. Optymalny czas to 0,1 - 1 s, gdy wtedy przepływ myśli nie zostaje przerwany. Bardzo wa ne jest aby czas odpowiedzi był przewidywalny. Pobieranie stron głównych największych firm internetowych zabiera do 10 s. Przykład. Zbadaj szybkość ładowania wybranych stron. Podobne informacje znaleźć mo na w panelu Info przeglądarki Opera oraz w pasku narzędziowym Web Developer dla Firefox. Pasek narzędziowy dla Firefox pobierzesz z adresu: http://chrispederick.com/work/webdeveloper/ 1. Jeśli jesteś u ytkownikiem Internet Explorer to pobierz z adresu http://www.nils.org.au/ais/web/resources/toolbar/index.html Web Accessibility Toolbar i zainstaluj go. 2. Uruchom Internet Explorer 3. Wejdź na wybrany serwis internetowy 4. Kliknij „Doc info -> Page Weight/Speed” 5. Odczytaj cię ar strony oraz czas pobierania
  39. 39. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 39 6. Z poziomu tego samego narzędzia mo esz wywołać tak e „Doc info -> Page speed report” 7. Drugie narzędzie generuje pełen raport, uwzględniając realny czas potrzebny na załadowanie całego serwisu. Jest zatem bardziej wiarygodną ale działającą wolniej metodą. Rysunek 31 - Wygenerowany raport zawiera tak e przydatne porady
  40. 40. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 40 Co musi znaleźć się na stronie głównej? • To samość witryny, koncepcja • Struktura witryny o Co ja tu mogę znaleźć? o Co ja tu mogę zrobić? • Autoreklama o Branding marki i firmy o Reklama zwartości o Reklama funkcjonalności • Oznaki aktualności i ycia • Linki do najczęściej odwiedzanych miejsc • Punkty startowe • Rejestracja, elementy budowania społeczności itp. • Elementy budujące zaufanie Jakie problemy napotkasz projektując stronę główną? • Ka dy chce być na stronie głównej • Ka dy chce być widoczny bez przewijania ekranu • Ka dy (o zgrozo, nawet Prezes!) ma swoje zdanie na temat strony głównej, buduje ona wizerunek firmy • Musi odwoływać się do wszystkich odwiedzających serwis, czasem to bardzo zró nicowane grupy Rysunek 32 - Tylko część witryny widać bez konieczności przewijania, jest to szczególnie cenny obszar.
  41. 41. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 41 Na jakie pytania musi odpowiadać strona główna? • Co to jest? • Co oni tutaj mają? • Co mogę tu zrobić? • Dlaczego powinienem być tu, a nie gdzie indziej? Jak przekazać cel witryny odwiedzającemu? • Slogan reklamowy • Tekst powitalny Rysunek 33 - tekst wprowadzający wraz z rysunkiem pokazującym jak w 3 krokach skorzystać z usług serwisu Rysunek 34 - W serwisie e-gotowka.pl mamy bardzo klarowny przekaz. Od razu wiadomo co mo na tutaj zrobić. Zwiększanie ilości informacji. • Sekwencyjne wyświetlanie reklam o Z mo liwością ingerencji u ytkownika w sekwencję (poprzednia, następna) • Rotujące bannerki
  42. 42. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 42 Efekty najazdu. • Dla zaoszczędzenia miejsca stosuje się często efekty polegające na wyświetlaniu opisu dopiero po wskazaniu elementu kursorem. • Generuje to mnóstwo problemów: o Sam musisz odszukać i sprawdzić wszystkie potencjalne elementy, które mogą być elementami menu. o W danej chwili mo esz wyświetlić tylko jeden opis, nie mo na zatem porównać wszystkich opcji. o Nie zawsze pojawiają się w bezpośrednim sąsiedztwie kursora, musimy kierować wzrok raz na kursor, raz na opis. o Nie pozwalają na ocenę zawartości strony bez wchodzenia w interakcję. o Sugeruję odwrócenie sytuacji – czytelne menu tekstowe, po wskazaniu elementu menu uruchamia się jakaś interakcja lub pojawia element graficzny. Rysunek 35 - Całe menu ukryte jest pod niepozornymi kropeczkami po prawej na dole, dopiero po wskazaniu kropeczki kursorem pokazuje się jej opis.
  43. 43. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 43 Rysunek 36 - Zadanie dla domyślnych! Znajdź menu na tym zarzucie ekranu. Menu ukryte zostało pod kwadracikami obok nutki. Nutka i kwadraciki sugerują, e ten element słu y do kontroli głośności. Niestety pod tym niepozornym elementem znajduje się całe menu serwisu. Rysunek 37 - Serwis Casio tak e wymaga od odwiedzających mnóstwa cierpliwości. Projektowanie ście ek nawigacyjnych. • Jak powinien zachować się u ytkownik w serwisie WWW o Po co przychodzi? o Na jakich stronach kończy nawigację?
  44. 44. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 44 Efektywne pisanie dla Internetu. Czytanie z ekranów komputera jest około 25% wolniejsze od czytania z papieru. Tekst skuteczny w Internecie. • 50% tekstu mniej ni na papierze. • Stosuj zasadę odwróconej piramidy – od ogółu do szczegółu. O zasadzie odwróconej piramidy przeczytasz na http://www.useit.com/alertbox/9606.html . • Mniej słów oznacza, e o jest mniej chaosu na stronie, o treści u yteczne są lepiej widoczne, o nie trzeba przewijać stron. • Kiepskie leady (zajawki, wprowadzenia do tekstu) to strata czasu i miejsca – jeśli tekst nie przekazuje przydatnych informacji nie jest dobrym leadem na stronę WWW. • Pisanie instrukcji obsługi do stron mija się z celem, serwis powinien sam się wyjaśniać. Oczywiście niekiedy instrukcja jest wymagana dla budowania zaufania lub ze względu na zgodność z prawem ale skorzysta z niej bardzo mało u ytkowników. • Wykorzystaj strukturę HTML o H1 … H7, o ALT, o TITLE. • Weź pod uwagę SEO (Search Engine Optimization – Optymalizacja dla wyszukiwarek). o Nasycenie słowami kluczowymi o Spójność tytułu, metatagów i treści. U ytkownicy surfujący po Sieci, gdy zatrzymują się by czytać, czują się mniej produktywni. Nie są skłonni poświecić na czytanie tyle samo czasu co na czytanie wersji papierowej tekstu. Budowanie zaufania do serwisu. • Łatwa weryfikacja obiektywności informacji – zamieszczaj linki do materiałów źródłowych, przypisy, bibliografie. Powołuj się na obiektywne badania i organizacje. Nawet jeśli u ytkownik nie sprawdzi wszystkich linków to istnienie ich oraz to, e nie boisz się weryfikacji danych zbuduje pozytywny obraz serwisu. • Firma z krwi i kości – czasem nawet du e organizacje mogą nie być znane wszystkim u ytkownikom Sieci. Warto podkreślać, e serwis jest tylko odbiciem istniejącej organizacji. Elementy przydatne w tym procesie to podawania adresów biur oraz osób kontaktowych (jeszcze lepiej jeśli ze zdjęciem). • Powiązania rynkowe – firma, która działa poza rynkiem nie budzi zaufania, warto jest napisać jakich klientów się obsługuje, do jakich organizacji nale y. Wszystkie te elementy umiejscowią w oczach klienta Twoją firmę gdzieś na mapie powiązań biznesowych. Często tego typu informacje pozwalają te błyskawicznie ocenić klientowi czy rozmiar biznesu jaki prowadzi Twoja firma jest odpowiedni do tego kogo poszukuje. • Ludzie – podkreślanie roli pracowników firmy, listowanie kluczowych osób wraz z krótkim opisem i kontaktem oraz pokazywanie światu profesjonalizmu swych pracowników i ekspertów prawie zawsze buduje pozytywny obraz firmy. Warto podkreślić projekty związane z rozwojem pracowników oraz polityką odpowiedzialności społecznej. Dobrym pomysłem mo e być zachęcenie kluczowych osób do budowania wizerunku firmy poprzez prowadzenie bloga. Blog
  45. 45. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 45 Webusability.pl, przy całej obiektywności jaką staram się zachować, skierował kilka osób do Janmedia. Po prostu ludzie Ci chcieli dowiedzieć się gdzie pracuję. Jeśli masz ludzi, którzy znają się na rzeczy i lubią pisać, postaraj się wykorzystać ten potencjał. • Łatwy kontakt – mo liwość ró norodnego i wygodnego kontaktu jest dla u ytkowników kolejnym sygnałem, e firma jest otwarta na ich potrzeby. Szczególnie tam gdzie klienci mogą oczekiwać wsparcia szalenie istotne jest eksponowanie łatwości nawiązania kontaktu. • Profesjonalny wygląd – bardzo wielu u ytkowników do wstępnej selekcji znalezionych w Sieci serwisów u ywa kryterium estetycznego. Oczywiście to poniekąd sprawa gustu jednak e praktycznie ka dy szybko odró ni dobry, starannie i dokładnie wykonany layout od nieprofesjonalnego projektu graficznego. Warto te pamiętać, e layout o wyraźnie przestarzałym wyglądzie będzie budował taki sam obraz firmy w oczach klienta. Warto zatem raz na 2-3 lata odświe ać layout serwisu. Zwłaszcza, e obecnie dzięki oddzieleniu warstwy treści od warstwy prezentacji zmiana szaty graficznej nie wią e się z du ymi wydatkami jak kiedyś. • Aktualność informacji – najprostsza i sprawiająca klientom najwięcej problemów wytyczna. Tworząc serwis WWW nale y zastanowić się realnie ile czasu będzie mo na poświęcać na jego aktualizację. Dopiero po tym ustaleniu nale y planować funkcjonalności serwisu. Dzięki temu unikniecie stworzenia działów i funkcjonalności wymagającej zbyt wiele wysiłku w aktualizacji. W ofertach jakie tworzę dla klientów ten element wpisuję do sekcji analiza ryzyka • Ostro nie z reklamami – zbyt du a ilość reklam skutecznie utrudni budowanie zaufania do serwisu. Mo e być bardzo trudno namówić u ytkowników do prenumeraty newslettera jeśli z ilości reklam na stronie wywnioskują, e firma zaleje ich spamem. • Unikaj błędów – literówki, błędy ortograficzne i połamane linki mogą zniszczyć budowane tak starannie zaufanie do serwisu. Metodyczne podejście do problemu powinno polegać na u ywaniu oprogramowania CMS wspierającego pracę grupową, gdzie ka dy publikowany tekst mo e zostać sprawdzony przez korektora. Powinno się tworzyć te repozytorium plików i linków aby nie trzeba było za ka dym razem wpisywać ich ręcznie. • Adekwatna domena – oczywiste jest, e im lepszy adres ma firma tym większym zaufaniem się cieszy. W Sieci prawo to nadal obowiązuje. Nale y wybrać prostą do zapamiętania domenę i wziąć pod uwagę szereg dodatkowych czynników – ot choćby czy dyktowanie jej przez telefon nie będzie problematyczne. Jako niepisany standard przyjmuje się zakładanie domen bez myślników ani podkreśleń. Właśnie w ten sposób Twoją firmę będzie szukało najwięcej internautów. Firmy o długiej nazwie mogą rozwa yć wykupienie domeny z pełną nazwą oraz z nazwą skróconą dla osób, które są bli ej związane z firmą i zapamiętają taki skrócony adres. • Dobre pozycje w wyszukiwarkach – tak e świadczą w oczach internautów o jakości serwisu. W gruncie rzeczy tak jest - tylko dobrze wykonane strony z ciekawą treścią mogą znaleźć się wysoko w rankingach coraz inteligentniejszych wyszukiwarek. Warto zadbać o to by strona była skonstruowana w sposób zapewniający dobrą współpracę z wyszukiwarkami. • Zgodność z prawem i standardami - jednym z kluczowych elementów budowania zaufania do serwisu jest zgodność z prawem oraz standardami. W Polsce prawo nakazuje między innymi, e jeśli zbierasz dane o u ytkownikach powinieneś zarejestrować się w GIODO, jeśli prowadzisz serwis administracji publicznej powinien on być dostępny dla niepełnosprawnych. • U ytkownicy doceniają te zgodność ze standardami poprawności kodu oraz poprawne wyświetlanie serwisu we wszystkich przeglądarkach. Warto poświęcić chwilę na odpowiednie testy. Poprawność kodu sprawdzić mo na narzędziem http://validator.w3.org.
  46. 46. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 46 Rysunek 38 - Wpadki takie jak ta Ministerstwa Transportu i Budownictwa z pewnością nie budują zaufania do serwisu. W wyniku błędu ka dy u ytkownik Internetu mógł uzyskać dostęp do bazy danych z newslettera. Pamiętaj by tego typu dane dobrze chronić oraz rejestrować w GIODO. Jak pogodzić multimedia i Flash z wytycznymi usability? • Informować o wielkości plików i czasie ładowania • Informować o postępie w pobieraniu • Zawsze udostępniaj podgląd danego pliku multimedialnego który zachęci u ytkownika do pobrania odpowiedniego dekodera, wtyczki, .. • Staropolskie przysłowie mówi o tym, e najbezpieczniej jest u ywać wtyczek i multimediów o jedną wersję starszych od najnowszych. • Zastanów się nad dostępnością tworzonych multimediów. o Dostępność klipów video dla głuchoniemych - napisy • U ytkownicy nienawidzą poruszającego się tekstu typu „taśmociąg”. Generalnie uwa ają, e nie niesie on nigdy wa nej treści i nie czytają go z zasady. • U ytkownicy nienawidzą muzyki na stronach WWW. Dźwięki współgrające z interfejsem są du o lepiej odbierane. • Nawigacja 3D nie jest popularna (ilu z Was ma prawo-jazdy a ilu licencję pilota?). Prawie zawsze efektywniejsze są mechanizmy nawigacyjne oparte na 2D. o Unikaj naśladowania świata rzeczywistego, nawigacja internetowa jest przecie wygodniejsza (np. błyskawiczne „przenoszenie się” dzięki linkom).
  47. 47. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 47 Rysunek 39 - SearchScapes, http://searchscapes.net, trójwymiarowa mapa informacyjna Manhattanu. Bardzo ciekawy eksperyment ale codzienna nawigacja w takim serwisie byłaby udręką. Rysunek 40 - etlumacz.pl, niestety hasło o szanowaniu klienta rozmija się z.. nawigacją, która nie pozwala na dotarcie do informacji.
  48. 48. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 48 reklama reklama
  49. 49. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 49 Efektywność w eCommerce
  50. 50. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 50 Usability w systemie eCommerce. Rysunek 41 - Przykład sklepu Trpros.com pokazuje jak dodanie dodatkowych kanałów składania zamówień zwiększa sprzeda . Czynniki sukcesu eCommerce. Rysunek 42 - Wyniki sondy Dlaczego korzystasz z danego sklepu internetowego.
  51. 51. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 51 Metody pomiaru efektywności eCommerce. Współczynnik porzuceń koszyka. • Jak obliczać współczynnik porzuceń koszyka? • Dlaczego u ytkownicy porzucają koszyki? o 35% - dodatkowe koszty zamówienia, długi okres oczekiwania o 35% - proces składania zamówienia wymaga podania zbyt wielu informacji Rysunek 43 - Amazon.com nadal przez wielu uwa any jest za sklep wytyczający standardy usability
  52. 52. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 52 Minimalizacja współczynnika porzuceń koszyka. • Upraszczanie procesu sprzeda owego • Budowania zaufania • Odpowiadanie na pytania u ytkowników o Kiedy dostawa? o Ile kosztuje dostawa? o Czy mogę to zwrócić? o Jak działa gwarancja? o Czy są jakieś dodatkowe koszty? Rysunek 44 - Proces sprzeda owy w sklepie www.e-lady.pl Zwiększamy usability katalogu produktów, koszyka i procesu zamawiania. Dobre przykłady Rysunek 45 - Pakowanie ozdobne gratis Rysunek 46 - Darmowa dostawa ju od ..
  53. 53. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 53 • Nale y utworzyć dobrze widoczny dział z informacjami administracyjnymi. Powinien od odpowiadać na wszystkie pytania u ytkowników oraz zawierać wszelkie informacje wymagane przez prawo. Rysunek 47 - Rozbudowana stopka serwisu poświęcona sprawom administracyjnym • Mo na dodać mechanizm marketingu wirusowego (poleć znajomemu) odnoszący się bezpośrednio do produktu (wskazanie produktu w katalogu). • Zwrócenie uwagi na mo liwość błyskawicznej dostawy. Rysunek 48 - Szybka dostawa oraz mechanizm polecania produktu • Dodanie kategorii cenowych. Do zrobienia zakupów zachęcają kategorie typu „do 100 zł”, „do 300 zł” Rysunek 49 - Specjalne kategorie - cena do ..
  54. 54. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 54 • Automatyczne wykrywanie wcześniej zalogowanego u ytkownika (np. cookies). Rysunek 50 - Standardowe logowanie do sklepu • Mo liwość zło enia zamówienia faxem lub mailem. Rysunek 51 - Złó zamówienie mailem lub faxem • Stworzenie kategorii umo liwiających kupowanie według kryteriów luźniejszego typu. Rysunek 52 - kupowanie "shop by style" • Bardzo prosta, umieszczona w standardowym miejscu wyszukiwarka Rysunek 53 - Prosta wyszukiwarka
  55. 55. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 55 • Doradzanie w zakupach – mo liwość konsultacji podczas zakupów przez telefon/skype/gg oraz mo liwość zło enia zamówienia tekstowego na wstępne wyszukanie produktów. Rysunek 54 - Personal shopping - doradca klienta • Opinie, referencje klientów zadowolonych z zakupów znakomicie zwiększają efektywność budowania zaufania do serwisu. Rysunek 55 - Pozytywne opinie klientów
  56. 56. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 56 • Wszystkie elementy produktowe, tak e bannery (w tym bannery na serwisach zewnętrznych) powinny posiadać ceny. U ytkownik jest zbyt leniwy aby klikać tylko po to by sprawdzić cenę. Rysunek 56 - Ka dy element produktowy wyświetlany wraz z ceną • Dodanie przechowalni produktów lub funkcjonalności typu ”lista do porównania” pozwoli swobodnie poruszać się po sklepie ułatwiając finalny wybór pomiędzy kilkoma wybranymi produktami. • Gwarancja zwrotu oraz informacje dotyczące warunków zamówienia umieszczone w pierwszym kroku koszyka zachęcają do kontynuowania zakupów. Rysunek 57 - Gwarancja zwrotu w 1 kroku koszyka • Dodanie mo liwości wystawiania ocen i recenzji produktów mo e znacząco podnieść poziom zaufania do całego sklepu oraz zachęcić niezdecydowanych do zakupu. Istnieje wtedy mo liwość utworzenia kategorii „Najlepiej ocenione” Rysunek 58 - Komentarze do produktów
  57. 57. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 57 • Gdzie jest moja paczka? Korzystając z firm kurierskich mamy mo liwość pobierania od nich zwrotnych informacji dotyczących tego gdzie znajduje się przesyłka. Informacje takie moglibyśmy wyświetlać u ytkownikowi po zalogowaniu. Byłby to wyró nik serwisu (jeszcze wiele sklepów nie korzysta z tej opcji) budujący zaufanie oraz zachęcający do logowania się w sklepie. Jak zarabiać gdy towar jest niedostępny? • Informuj z wyprzedzeniem, e towar jest niedostępny – przede wszystkim nie dopuść do tego by klient dodał do koszyka produkt, którego nie będzie mógł kupić. To bardzo zniechęca do kupowania w takim sklepie. • Jeśli produkt będzie dostępny w późniejszym terminie, przyjmuj zamówienia z wyprzedzeniem – informuj kiedy produkt będzie dostępny. • Oferuj mo liwość informowania e-mailem o pojawieniu się towaru. • Informuj o podobnych produktach, które są dostępne. • Jeśli dostawa do klienta będzie wysłana dopiero za dłu szy czas mo esz mu od razu wysłać kartkę pocztową z podziękowaniem za zło one zamówienie oraz informacją, e niebawem je otrzyma – klient będzie spokojniejszy. Budujemy zaufanie u ytkowników do sklepu. • Odpowiednia domena Z WWW. i bez WWW. Wielu u ytkowników zgaduje adres • Profesjonalna grafika bez wątpienia buduje zaufanie do serwisu. • Zbieranie danych: Zgodność z prawem Klarowne określenie do jakich celów potrzebujemy danych Rysunek 59 - Nie ka dy sklep oferuje podstawowe metody budowania zaufania, (c) 2004 Janmedia.pl
  58. 58. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 58 Symulacja wpływu usability na zyski sklepu internetowego.
  59. 59. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 59 Efektywność reklamy internetowej
  60. 60. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 60 Reklama, która nie irytuje Reklamy w Internecie to temat nadal kontrowersyjny. Przyjęło się uwa ać, e u ytkownicy nie lubią reklam. Szczególnie irytują ich wszelkie nachalne formy reklamy. Pierwszy bannerek reklamowy pojawił się na HotWired w 1994. Bannerek ten reklamował usługi AT&T. Nie prezentował się raczej zbyt okazale. Archiwum bannerów znajdziesz na http://adverlicio.us Przy tworzeniu reklam nale y zadać sobie pytanie: czego u ytkownicy szukają na mojej stronie WWW? Jeśli oka e się, e Twoje reklamy mogą choć częściowo być tym czego szukają u ytkownicy – masz du ą szansę na osiągnięcie dobrej efektywności. Tym tropem podą a właśnie trend w reklamie internetowej, zwany reklamą kontekstową. Reklama kontekstowa dopasowuje się w pewnym stopniu do zainteresowań u ytkownika. Dopasowanie to mo e przebiegać na przykład na podstawie tego co u ytkownik wpisuje do wyszukiwarki lub na podstawie treści stron na które wchodzi. Oczywiście powinno to pozytywnie wpłynąć na zainteresowanie u ytkownika reklamą. Takie działanie doskonale obrazuje system AdSense (wyświetlanie reklam na podstawie treści strony na której jest u ytkownik) oraz AdWord (wyświetlanie reklam na podstawie zapytań do wyszukiwarki). W serwisach eCommerce mo na doszukiwać się podobnej filozofii w funkcjach wyświetlających produkty komplementarne i substytucyjne w karcie produktu. W kilku sklepach widziałem te reklamy w postaci bannerków, które odpowiadają grupie produktów którą właśnie ogląda u ytkownik. Zasada działania jest prosta: jeśli u ytkownik zauwa y, e reklamy pomagają mu odnaleźć to czego szuka, zacznie się im baczniej przyglądać i chętniej w nie klikać. Problem pojawia się tam gdzie nie mo emy liczyć na naturalne zainteresowanie u ytkowników a dą ymy do maksymalizacji kliknięć w banner. Więcej czy mniej? Ile informacji powinno znaleźć się na bannerze? Tak, to pytanie nie jest banalne. Pomijając oczywiste zasady przejrzystego projektowania, zastanówmy się co mo e wpłynąć na zwiększenie efektywności bannerków. Jeśli sprzedajesz produkty to prostą i sprawdzoną metodą na zwiększenie klikalności jest umieszczanie na bannerze nie jednego a 2-3 produktów. Obserwacje wskazują, e zwiększenie ilości produktów na bannerze z 1 do 3 mo e prowadzić do wzrostu klikalności – czasem wręcz ponad-proporcjonalnego. Być mo e wynika to z faktu, e u ytkownicy lubią mieć wybór i chętniej klikają w banner sugerujący większą ilość produktów. Przeprowadziliśmy sporo testów form reklamowych i zazwyczaj optymalnym wyborem jest zaprojektowanie bannerka, który zawiera: zdjęcie produktu i cenę oraz jeśli to mo liwe informacje o promocji. Idąc tropem wychodzenia do u ytkownika mo esz spróbować zastosować strategię „pomo emy ci”. Strategia ta mo e sprawdzić się tam gdzie Twoja reklama będzie tylko jednym z wielu przekazów reklamowych adresowanych do u ytkownika. Wykorzystaliśmy to podejście z sukcesem podczas kampanii Janmedia Interactive na Google. Po wpisaniu „agencja interaktywna” prezentowane są u ytkownikowi wyniki wyszukiwania oraz cała seria płatnych reklam typu AdWord. Większość wyników (zarówno płatnych jak i organicznych)
  61. 61. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 61 zaczyna się od słów „agencja interaktywna”. Z pewnością większość u ytkowników czuje się przytłoczonych ilością informacji. W wielu głowach pojawia się pewnie pytanie „co wybrać, w co kliknąć”. Nasz boks reklamowy zatytułowaliśmy zatem „jak wybrać agencję interaktywną”. Boks prowadzi na stronę opisującą najwa niejsze cechy agencji interaktywnej na które powinien zwrócić uwagę klient. Efektywność boksa reklamowego wzrosła dwukrotnie po przeprowadzeniu tej zmiany. Po pewnym czasie u ytkownicy przyzwyczaili się do naszego boksa i jego efektywność nieco spadła. Powtórzenie tego rozwiązanie nie zawsze jest mo liwe. Trzeba pamiętać, e tego typu reklama nie sugeruje bezpośredniego rozwiązania problemu. Sprawdzi się zatem dobrze tam gdzie sam wybór jest procesem skomplikowanym. Przykład Przygotowaliśmy dla jednego z naszych klientów – sklepu e-Lady.pl, komplet bannerków. Bannerki były prezentowane na pasaz.onet.pl w kategorii bielizna. Następnie porównaliśmy efektywność poszczególnych bannerków. Wykorzystaliśmy dobrze zauwa alne bannerki typu JUMBO (w środku strony). Bannerek, który osiągnął najwy szą klikalność (12,74%), opiera się na zasadzie: produkt + cena. Nie jest te tajemnicą, e ludzie chętniej i częściej klikają w bannerki z tanimi produktami. Jeśli, tak jak w tym wypadku, mo emy uzupełnić najtańszy produkt kilkoma komplementarnymi to przyciąganie u ytkowników najtańszym produktem mo e okazać się opłacalne (średnia wartość koszyka w sklepie e-lady.pl to blisko 250 zł). Mniejszą kilkalność (8,36%, 6,03%) osiągnęły bannerki prezentujące produkty bez ceny:
  62. 62. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 62 Bannerki, które wyró niały się prostą grafiką ale mówiły o ogólnych zaletach sklepu okazały się najmniej efektywne (2%, 1%): Oczywiście z tego eksperymentu nie nale y wyciągać zbyt daleko idących wniosków. Nie nale y uogólniać te jego wyników. Nale y natomiast zdać sobie sprawę z tego jakie są oczekiwania u ytkowników. Na pasaz.onet.pl przychodzą osoby chcące kupić produkt, zaprezentowanie im produktu wraz z ceną jest zatem tym czego szukają. Nawet zastosowanie bardzo wyró niających się form reklamowych (ostatnie bannerki) nie było w stanie zwiększyć ich klikalności. Ten krótki przykład pokazuje te , e nale y nieustannie sprawdzać efektywność swoich form reklamowych, nie bać się eksperymentowania i wyciągać wnioski. W eksperymentowaniu pomocny mo e okazać się program w stylu Google AdWord – mo emy tam tworzyć ró nego rodzaju boksy reklamowe i badać ich skuteczność. Mamy do dyspozycji tylko tekst ale przynajmniej mo emy przekonać się o sile przekonywania tekstów reklamowych jakie mamy zamiar u yć w kampanii. Przy du ych kampaniach takie prototypowanie na Google AdWord mo e zwiększyć efektywność bannerków. Nale y te pamiętać, e zdarzają się formy reklamowe tak kreatywne, e łamiąc wszystkie zasady są jednocześnie bardzo efektywne. Moim celem jest jednak przedstawienie pewnych zasad, które sprawdzają się w większości kampanii.
  63. 63. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 63 Rysunek 60 - Stary trick polega na tym, e zdjęcia osób patrzących wprost na nas zawsze zwracają naszą uwagę. Warto spróbować we własnych kreacjach. Banner blindness i inne plagi Banner blindness jest udręką wszystkich tych, którzy swoje zyski opierają przede wszystkim na tradycyjnych formach reklamy. Zjawisko to polega na podświadomym filtrowaniu przez u ytkowników wszystkich przekazów zbli onych rozmiarem i zachowaniem do reklam. Paradoksalnie im bardziej krzykliwy i ruchomy jest element graficzny, tym większa szansa, e nie zostanie w ogóle świadomie zarejestrowany. Termin został u yty po raz pierwszy w roku 1998 w pracy Banner Blindness: Web Searchers Often Miss Obvious Links. Dziś banner blindness jest niejako wspomagany przez dziesiątki programów typu Ad Blocking. Programy te usuwają z oglądanych przez u ytkownika stron, elementy reklamowe – głównie dla szybszego ładowania się stron oraz ułatwienia pracy poprzez eliminację ucią liwych reklam zasłaniających ekran. Zdarza się te , e zanim serwer reklam dostarczy banner do oglądanego serwisu, u ytkownik opuści stronę i przejdzie dalej – u ytkownicy coraz szybciej poruszają się po serwisach WWW i coraz mniej czasu spędzają na pojedynczej stronie. Jakby tego było mało podczas obserwacji u ytkowników mo na zauwa yć jak niektóre osoby radzą sobie z wyskakującymi bannerkami – nie usiłują nawet szukać „X” aby zamknąć reklamę tylko od razu w nią klikają i zanim jeszcze zdą y załadować się strona, zamykają nowo otwarte okno przeglądarki. Wiele osób czyni podobnie, kiedy nie mogą trafić w „X” zamykający banner. System bannerkowy zlicza zatem kliknięcie ale u ytkownik nawet nie jest w stanie odpowiedzieć na pytanie „w jaką reklamę kliknąłeś”. Jaka jest skala takich fałszywych kliknięć? Trudno powiedzieć, nasze obserwacje u ytkowników mają charakter jakościowy. Niemniej wydaje się to kolejnym problemem zmniejszającym efektywność bannerków. W swoim ostatnim badaniu eye-tracking o ilościowym charakterze Jakob Nielsen wykazał, e: • reklamy bannerowe są omijane wzrokiem przez przytłaczającą większość u ytkowników, • grupą która nie jest ślepa na bannery są dzieci do siódmego roku ycia, które klikają na elementy wyró niające się ilością kolorów i animacjami. • obrazki umieszczane w środku tekstu są często traktowane jako przeszkody i omijane, wyjątkiem są grafiki ściśle związane z tekstem, • grafiki rozmyte, małe, nieczytelne są automatycznie pomijane,
  64. 64. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 64 • du o większą uwagę badanych zwracały grafiki zawierające jakiś informacje, ni te mające jedynie walory estetyczne, • badani często patrzyli na fotografie, na których fotografowany patrzył prostu w obiektyw, • animacje przyciągają uwagę tylko wtedy, gdy są nieskomplikowane oraz mają związek z tekstem. Nielsen podaje te przykład strony jednego z producentów komputerów. Umieścił on w ramce na środku swojej strony informacje o najnowszym produkcie. Była ona omijana wzrokiem przez u ytkowników, bo prawdopodobnie została potraktowana jako reklama. Spotykaliśmy podobne zachowania podczas testów z u ytkownikami. W jednym z testowanych serwisów z bran y finansowej część menu kontekstowego, wyró nionego silnym kolorem została potraktowana przez u ytkowników jako reklama. Mimo tego i menu to zawierało poszukiwane przez nich informacje nawet nie wczytali się w jego treść. Ostatnie doniesienia na temat banner blindness zaczynają dotyczyć tak e kontekstowy reklam tekstowych. W początkowym okresie ich stosowania wykazywały się du o wy szą efektywnością ni bannery, nadal są efektywniejsze ale zauwa a się, e u ytkownicy tak e te formy zaczynają podświadomie filtrować. Czy z banner blindness da się walczyć? Tak, jeśli projektujesz formaty autopromocyjne dla swojego serwisu WWW lub sklepu internetowego to postaraj się by miały unikalne formy – wtedy mniej osób automatycznie je pominie. Mo esz eksperymentować tak e z reklamą video czy interaktywnymi bannerami reklamowy – takimi jak np. przewijarka reklam – u ytkownik mo e sterować pojawianiem się kolejnych reklam. Landing pages Jako, e coraz trudniej zmusić u ytkowników do kliknięcia, coraz więcej osób zastanawia się co dzieje się ju po kliku. Stara zasada mówi, e odnośniki reklamowe powinny prowadzić na konkretne pod-strony serwisu. A 20-30% u ytkowników wciska Wstecz gdy po kliknięciu bannerka dostają stronę główną. Nie powinno Cię zatem dziwić, e coraz częściej tworzy się specjalne „landing pages” czyli strony stworzone z myślą o konkretnej kampanii. Oczywiście najwa niejszy jest cel kampanii i to jemu w pełni podporządkować nale y landing page. Celem mo e być np. uczestnictwo w konkursie, prenumerata newsletter czy kupno produktu. Skoro podporządkowujemy landing page celowi kampanii to mo emy wręcz zaprojektować dedykowaną dla landing page nawigację. Powinna ona być naprawdę prosta – nie powinna tworzyć zbyt wielu mo liwości, powinna kierować u ytkowników tam gdzie chcemy by poszli. Jako, e klikając w banner u ytkownik spodziewa się kontynuowania akcji to strona docelowa powinna być utrzymana w podobnej kolorystyce a jej zawartość powinna odpowiadać komunikatowi z reklamy. Ka dy dodatkowy komunikat stwarza ryzyko i u ytkownik nie poczuje, e strona na którą trafił kontynuuje proces. Ideą landing page powinno być „call to action” – ju na pierwszej stronie daj do zrozumienia, e mo na błyskawicznie zrealizować cel. Jeśli wymagać to będzie od u ytkownika większego wysiłku (np. wypełnienie formularza zakładania konta) informuj ile czasu zajmie to u ytkownikowi i ile kroków musi wykonać. Mo na tutaj stosować wszystkie taktyki zapobiegające porzuceniu koszyka w sklepie internetowym. Klasyczne sposoby na ulepszenie landing page to: • prezenty, czy mo esz dać coś u ytkownikowi?
  65. 65. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 65 • u ywanie „P.S.” czyli mniej formalnego komunikatu pod głównym komunikatem, ka dy czyta „P.S.” – warto to wykorzystać jeśli tylko mo esz, • gwarancje oraz ka dy inny element szybko budujący zaufanie, utrata zaufania mo e spowolnić lub przerwać proces, • call to action – hasło sugerujące następny krok, • jeśli mo esz to personalizuje stronę (np. gdy przejście następuje z bannerka w newsletterze mo esz zwrócić się do u ytkownika po imieniu) I jeszcze dwie ostatnie rady dotyczące landing pages: • te strony bezwzględnie muszą się szybko ładować, • powinny być wyłączone ze struktury serwisu i nie powinny być indeksowane przez wyszukiwarki Wypalanie się bannera Przy planowaniu większych kampanii pamiętaj, e wraz z trwaniem kampanii efektywność formy reklamowej będzie spadać. Zjawisko to, nazywane „wypaleniem się bannera” mo na łatwo eliminować poprzez przygotowanie kilku bannerków na u ytek dłu szych kampanii. Reklama z zewnątrz Bądź ostro ny gdy sprzedajesz w swoim serwisie reklamę zewnętrzną bądź instalujesz skrypt zewnętrzny wyświetlający reklamy. W przypadku większych sieci reklamowych mo na ustalić jakiego typu reklam nie chcesz na swojej stronie, niemniej nadal powinieneś zachować czujność by nie dopuścić do sytuacji niekorzystnych dla Twojego serwisu (reklama konkurencji, obni anie wiarygodności serwisu). Rysunek 61 - Umieszczenie bloga powa nej, publicznej postaci na darmowym systemie blogowym mo e doprowadzić do bardzo zabawnych zestawień treści reklamy z treścią serwisu. Prawdopodobnie efektywność reklamy wzrasta, natomiast wiarygodność takiego serwisu niestety zmniejsza się.
  66. 66. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 66 Rysunek 62 - Ten sam blog chwilę później :) Rysunek 63 - Ilość reklam w obrębie jednej witryny mo e prowadzić do komicznych powiązań - " Nowe, pyszne Pedigree, Wybierz smak swojego ycia" :)
  67. 67. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 67 Co jeszcze? Nie poprzestawaj na reklamie bannerkowej. Jeśli to mo liwe, korzystaj jak najmocniej z SEO oraz SEM. Pamiętaj, e wyszukiwarki to jedno z niewielu miejsc gdzie u ytkownicy przychodzą po to by jak najszybciej z nich wyjść – wystarczy, e dasz im to czego szukają. Jako, e wyszukiwarki odwracają sytuację – to u ytkownik szuka Ciebie, istnieje o wiele większa szansa, e taki u ytkownik stanie się Twoim klientem. Bannerki reklamowe w połączeniu z SEO i SEM są dla większości serwisów podstawowymi narzędziami generowania ruchu w serwisie. Środek cię kości z pewnością przesuwa się powoli w stronę SEO i SEM. Niemniej jak wskazuje praktyka inteligentne projektowanie - oparte na ustawicznym badaniu, pozwala tworzyć efektywne reklamy internetowe.
  68. 68. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 68 Dostępność
  69. 69. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 69 Kto i kiedy dyskryminuje klientów? Grupy u ytkowników oczekujące pomocy • Starsi • Niewidomi • Niedowidzący • Daltoniści • U ytkownicy platform mobilnych • Mniej popularne przeglądarki Wysoka dostępność serwisu pozwala tak e: • dotrzeć do większej ilości u ytkowników • dotrzeć do wymagających u ytkowników, u ywających najnowocześniejszych platform mobilnych • uzyskać lepsze pozycje w wyszukiwarkach (poruszają się one po stronach podobnie jak niewidomi) • budować pozytywny wizerunek i presti firmy Dostępność jako inicjatywa • WAI – Web Accessibility Initiative • Dyrektywa Unii Europejskiej eEurope 2002 • Ustawa o Dostępie do Informacji Publicznej • Wymagania Section 508 w USA Podstawy prawne Dostępność serwisów jest wymagana przez prawo Polski oraz UE. • Wszystkie jednostki organizacyjne państw UE są zobowiązane na mocy dyrektywy eEurope 2002 zapewnić dostęp do swoich serwisów bez dyskryminowania u ytkowników. • Podobne zapisy zawiera inny europejski dokument - i2010 - Europejskie społeczeństwo informacyjne na rzecz wzrostu i zatrudnienia.
  70. 70. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 70 • Obowiązująca w Polsce Ustawa o Dostępie do Informacji Publicznej zawiera zapis o dostępności informacji. • Dostępność serwisów WWW dla wszystkich gwarantuje tak e Konstytucja RP i Karta Praw Osób Niepełnosprawnych. Artykuły omawiające kwestie prawne znajdziesz w serwisie ISOC Polska • http://www.isoc.org.pl/wiki/index.php/Prawo%20Standardy • http://www.isoc.org.pl/wiki/index.php/WebAccessibility • http://www.isoc.org.pl/wiki/index.php/WebAccessibility/DlaPolski Dostępność dla stron administracji publicznej • Minimalne wymagania dla systemów teleinformatycznych administracji publicznej zawiera rozporządzenie RM z 11 października 2005 roku. Tekst do przeczytania na stronie http://prawo.vagla.pl/node/5750 . • W Polsce zespół pod przewodnictwem Michała Bukowskiego http://galeria.bukwa.com/imprezy/2006_02_18_uzyteczne_spotkanie/ opracowuje nowe zało enia dla stron administracji publicznej w Internecie: http://meta.bip.gov.pl/ . Główne zasady • Korzystaj z HTML tylko jako zapisu treści. • Korzystaj z CSS do formatowania treści. • Stosuj parametry ALT, TITLE Rysunek 64 - Mój serwis www.webusability.pl w wersji graficznej pozwala na powiększanie czcionek.
  71. 71. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 71 Rysunek 65 - Tak wygląda strona webusability.pl w trybie tekstowym w Opera Rysunek 66 - Tak natomiast serwis wygląda w tekstowej przeglądarce Lynx
  72. 72. Efektywne i intuicyjne serwisy WWW | www.webusability.pl 72 Rysunek 67 - Serwis Koncernu Energetycznego ENERGA jest dostępny dla niepełnosprawnych, Koncern ten fakt postrzega tak e jako element budowania presti u firmy.

×