Użyteczność

Usability - co to znaczy i dlaczego jest ona ważna?

Łatwość z jaką narzędzie dopasowuje się do użytkownika. Nie ma jednej właściwej metody na zrobienie strony internetowej, jednak istnieje wiele dobrych porad oraz elementów, na które warto zwracać uwagę. Każde narzędzie, również strona www, działa najlepiej, gdy w ogóle się go nie zauważa.

Cytat:

If something is hard to use, I just don't use it as much.

I drugi:

If the user can't use it, it doesn't work.

Nie każ mi myśleć

Najważniejsza zasada:

Nie każ mi myśleć.

Projektanci stron lubią sądzić, że użytkownik przychodząc na ich stronę najpierw zaanalizuje całą jej strukturę, a potem dokona najlepszego wyboru. Zwykle nie jest to prawda.
Jako użytkownicy:

  • Nie czytamy stron, tylko przeglądamy je.
  • Spoglądamy na stronę i klikamy w pierwszy link, który mniej więcej pasuje, ew. otwieramy wszystkie pasujące zakładki. W razie złego wyboru cofamy się i probujemy jeszce raz.
  • Patrzymy na kluczowe, wyróżnione elementy, które przykują naszą uwagę.
  • Spieszymy się, żeby znaleźć konkretną informacje lub zasób.
  • Nie dokonujemy optymalnych wyborów.
  • Dowódcy brygad strażackich zwykle pod uwagę jeden plan.
  • Optymalne wybory nie opłacają się.
  • Analizowanie nowej strony zabiera dużo czasu.
  • Nie ma kary za zły wybór: przycisk "Powrót" odpowiada za 30-40% kliknięć w przeglądarce.
  • Dlatego czas ładowania strony jest kluczowy
  • Na źle zaprojektowanej stronie i tak analiza nie daje gwarancji dobrej odpowiedzi.
  • "Zgadnięcie" daje więcej frajdy.
  • Nie zastanawiamy się jak i dlaczego działają dane mechanizmy, tylko korzystamy z nich
  • Nie chcemy zastanawiać się jak coś działa. Zwykle próbujemy do skutku, albo zniechęcamy się i odchodzimy.
  • Gdy znajdziemy działający sposób, nie szukamy dalej.

Strony które przygotowujemy powinny być:
Oczywiste w użyciu albo przynajmniej samowytłumaczalne

Jak to się objawia:

  • Przyciski są przyskami
  • Nazwy fragmentów stron są jak najprostrze (np. praca zamiast oferty zatrudnienia)

Negatywny przykład:
Biblioteka UAM

W momencie gdy użytkownik zaczyna myśleć, dlaczego nasza strona jest zaprojektowana w dany sposób, do czego służą jej poszczególne elementy, czy dany element jest klikalny, dlaczego dany fragment strony ma określoną nazwe, czy też skąd się wzięły nazwy stron - nie udalo nam się osiągnąć naszego celu.

Dobre rady?

1. Zaprojektuj wyraźną strukturę strony

  • to co ważne - wyrożnione (wieksze, grubsze, wyrozniajacy sie kolor, oddzielone wieksza iloscia pustego miejsca, blizej góry strony, albo kombinacja)
  • rzeczy połączone logicznie - połączone także wizualnie
  • rzeczy są wizualnie zagnieżdżone, żeby pokazac ze cos jest czescia czegos, przyklad dobrze znany -> gazeta, dobrze wykonana hierarchia wstepnie obrabia za nas informacje na stronie editorial guidance

2. Wykorzystaj konwencje

  • umiemy czytac gazety - w sensie parsowania struktury -> naglowek to streszczenie tresci, tekst pod zdjeciem to opis zdjecia (albo jesli jest bardzo malym drukiem, wtedy to autor), dzialy, w ksiazce spis tresci, indeks, numer strony
  • kazde medium wyrabia swoj zestaw konwencji, www także ma swoje - duzo zapozyczen z gazet i magazynow (sa bardzo uzyteczne) -> staja sie konwencjami tylko wtedy kiedy dzialaja, poczucie znajomosci
  • potrzeba BARDZO dobrego powodu zeby od nich odejsc (albo bardzo latwe do opanowania, albo bardzo duza korzysc dla uzytkownika)

3. podziel strone na wyrazne czesci

  • uzytkownicy szybko decyduja, ktore czesci strony sa dla nich wazne i potem zachowuja sie jakby reszty strony nie bylo

4. Wyraźnie pokaż, które elementy są klikalne

  • Jesli tego nie zrobisz, uzytkownik bedzie musiał zacząć się zastanawiać…

5. Zminimalizuj halas

  • malo odciagaczy od glownej tresci strony, uzytkownicy nie przyszli po efektowne animacje we flashu

6. omijaj niepotrzebne slowa

wykresl polowe slow ze swej strony a potem jeszcze polowe

Mniejsza ilość tekstu na stronie powoduje, że

  • Głowna część strony staje się bardziej widoczna.
  • Mniej trzeba skrolować.

Oczywiscie nie chodzi o treść strony, np. o artykuły zamieszczane na stronie, ale o tekst wprowadzający oraz instrukcje na stronie (bla, bla, bla).

Struktura strony

Stałe elementy strony upewniają nas ze ciągle znajdujemy się we właściwym miejscu w sieci, a nie wyfruneliśmy w niezmierzone odmęty internetu. Ważne jest więc, żeby na wszystkich podstronach zachowywać ten sam układ strony.

Nawigacja

Są dwa podejścia do nawigowania po stronie. Podobnie jak w supermarkecie możemy zastosować dwie strategie:

  • Szukanie po znakach -> nawigacja przez linki
  • Spytanie się obslugi -> zastosowanie wyszukiwarki

Co daje nam dobrze zaprojektowana struktura strony? Dwa oczywiste i kilka mniej:

  • umożliwia odnalezienie interesujących nas informacji
  • informuje nas gdzie się znajdujemy
  • informuje czego możemy oczekiwać po stronie
  • mowi gdzie znajdujemy sie na stronie
  • wzbudza zaufanie do twórców strony
  • dodatkowy argument: większość użytkowników jest rzucona w środek naszej strony przez wyszukiwarke

Jakie konwencje wytworzyły się na stronach internetowych?
Pewne stałe elementy, które są niezmienne na kazdej podstronie.

  • Logo strony
    • Upewnia nas, że ciągle jesteśmy na tej samej stronie
    • Charakterystyczne, dobrze wyglądające we wszystkich rozmiarach i mediach
    • Obok tagline
    • Naciśnięcie powraca do strony głównej
  • Sekcje strony
    • Fragmenty strony
    • Ta w której jesteśmy wyraźnie zaznaczona.
  • Okienko wyszukiwania, np. http://www.google.com/coop/cse/
    • Duża część ludzi szuka
    • Nawet jeśli na stronie nie ma wyszukiwarki szukają za pomocą google'a i operatora site: ale wtedy opuszczają stronę
  • Linki narzędziowe
    • Na przykład "O nas", "Kontakt", "Polityka prywatności", "Często zadawane pytania"
    • Do czterech, pięciu na stronie
    • Na górze strony, mniej wyróżnione niż sekcje, albo w stopce strony
  • Wyraźnie zaznaczona nazwa strony
    • Pozwala zorientować się gdzie jesteśmy
    • Analogicznie do oznaczeń nazw ulic na ktorej się znajdujemy
    • Centralna pozycja na stronie
    • Taka sama jak tekst linka na który nacisneliśmy
  • Breadcrumps
    • dobry przykład:about.com
    • na samej górze strony
    • pomiędzy poziomami ">"
    • mała czcionka
    • dodatkowo wytlumaczenie jestes tutaj
    • wytluszczenie ostatniego elementu
    • nie zastepuja tytulu strony

Dwie strony które mogą mieć wyróżniajacy sie design to strona domowa (omówiona później) i formularze (nie chcemy rozpraszać uzytkownika).
Wejdzcie na strone Ebay i Merlin i znajdzcie wymienione elementy. Jesli tam są ;)

Strona domowa

Ma do spelnienia dużą ilość funkcji. Musi zawierac:

  • Branding
  • Hierarchie strony
  • Okienko wyszukiwania
  • Zachety do dalszego przegladania strony
  • Reklamy
  • Treść zachęcającą do ponownych odwiedzin
  • Rejestracje

Nie może dobrze wykonywac wszystkich tych funkcji, dlatego strona domowa zawsze pozostaje kompromisem. Nalezy pamietać, zeby strona główna nie rozmienila sie na drobne i nie przestawała przekazywać ogólnego obrazu "o co chodzi w stronie", "co możę mi ta strona zaoferować?".

Dodatkowe uwagi

  • Ikonka strony ułatwia orientacje w tabach
  • Tak zaprojektować żeby dało się zrobić zakładki (bezpośrednie linki do podstron). Brak możliwości zrobienia zakladek to duża wada niektorych stron opartych na Flashu lub Javascripcie.

Zadanie

Napisz raport oceniający stronę pod względem usability składający się z następujących części:

  1. Informacje na temat autora
    • Imie, nazwisko, numer indeksu
    • Adres strony, imię i nazwisko autora
  2. Swoją analizę strony
  3. Podsumowanie

Całość (maks 1 strona A4) w formacie PDF, ODT lub DOC proszę przesłać w terminie do 26.04 na adres osoby prowadzącej.
W tamecie prosimy wpisać KCK.

UWAGA Osoby nieobecne na zajęciach powinny skontaktować się z osobą prowadzącą zajęcia w celu uzyskania informacji, jaką stronę internetową mają oceniać w ramach zadania.

Źródła

Zajęcia oparte na książce "Don't make me think" Steve'a Kruga

51W8l2Zy3WL._SS500_.jpg
Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy