2011-04-17

1

Projektowanie aplikacji internetowych

dr inż. Agnieszka Bołtud

Wykład 2

Plan wykładu

• Pojęcie webusability

• UX

• Funkcjonalne projektowanie stron WWW

• Elementy strony

Definicja webusability

• Użytecznośd serwisów internetowych (ang. usability, webusability) to nauka dotycząca projektowania stron WWW pod kątem możliwie najlepszej ich ergonomii. Serwisy skonstruowane zgodnie z zasadami użyteczności stawiają na intuicyjnośd i łatwośd obsługi z punktu widzenia internautów, czyli ich użytkowników.

• Użyteczne serwisy WWW stawiają na: intuicyjną nawigację, ułatwienia w poszukiwaniu informacji, zrozumiałą dla użytkownika komunikację.

• Usability tłumaczy się jako funkcjonalnośd lub użytecznośd, funkcjonalnością strony WWW będziemy nazywad zbiór jej funkcji, zaś użytecznością sposób korzystania,

Historia badań nad usability

• W latach 70-tych badano jedynie zdolności poznawczo-motoryczne ludzi,

• W roku 1982 w USA odbyła się konferencja „Human factors in computing systems” i rozpoczęło się zainteresowanie czynnikiem ludzkim w kontekście komputerów osobistych,

• Rozpoczęto badania z zakresu psychologii, ergonomii i czynnika ludzkiego w zastosowaniu do projektowania UI,

• Pod koniec lat 80-tych stworzono dziedzinę Usability Engineering - tworzenie oprogramowania z myślą o ich przyszłych użytkownikach,

• W roku 1993 usability obejmuje strony WWW,

• Od roku 2000 rozpoczyna się zainteresowanie tym tematem w Polsce,

2011-04-17

2

User experience (UX)

• termin opisujący całośd wrażeo jakich doświadcza użytkownik podczas korzystania z produktu interaktywnego,

• projektowanie user experience - to projektowanie produktów interaktywnych ze szczególnym zwróceniem uwagi na to, aby interakcja z nimi dostarczała użytkownikom pozytywnych doświadczeo,

• Produkt powinien:

• prezentowad się w sposób atrakcyjny dla użytkownika

• byd funkcjonalny, ergonomiczny, użyteczny

• korzystanie z niego powinno sprawiad przyjemnośd i dawad satysfakcję

Projektowanie zorientowane na użytkownika • to podejście do projektowania interakcji człowieka z

komputerem w którym potrzeby, wymagania i ograniczenia koocowego użytkownika są szczegółowo badane na każdym etapie procesu projektowego i są stawiane na pierwszym miejscu,

Analiza

Prototyp

Ewaluacja Wdrażanie

Komponenty użyteczności

Jakob Nielesen (www.useit.com)

Użytecznośd jest zdefiniowana przez pięd komponentów:

• Learnability: Jak łatwo jest użytkownikom wykonad podstawowe zadania, gdy po raz pierwszy korzystają z serwisu?

• Efficiency: Gdy użytkownicy poznali już serwis, jak szybko są w stanie wykonywad zadania?

• Memorability: Po powrocie do projektu po pewnym okresie nie korzystania z niego, jak łatwo można zyskad ponownie umiejętności obsługiwania go?

• Errors: Ile i jakie błędy popełniają użytkownicy, jak poważne są te błędy, jak są komunikowane i jak łatwo można sobie z nimi poradzid?

• Satisfaction: Czy serwis jest przyjemny w użyciu? Czy użytkownicy lubią z niego korzystad?

Specjaliści

źródło: www.money.com, 12. 2007

2011-04-17

3

Specjaliści

źródło: pracuj.pl i inne

Koszty i zwrot z inwestycji

• Przykład na podstawie J. Nielsena, za www.webusability.pl,

• Firma zatrudnia 10 000 pracowników

• Wartośd czasu pracy to około 200 zł za godzinę

• Jedna informacja na stronie głównej jest nieintuicyjna (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

Koszty i zwrot z inwestycji

Ile tracimy:

• W pierwszym kroku tracimy 10 000 (pracownicy) * 5 s = 14 h,

co kosztuje 2800 zł

• W drugim kroku tracimy 10 000 * 10% * 35 s = 10 h

co kosztuje nas 2000 zł

• Zatem jedna nieoptymalna zmiana w serwisie kosztuje firmę jednorazowo prawie 5000 zł.

Koszty i zwrot z inwestycji

• Budżet na webusability

wg Nielsena, 2003: zbadał 863 projekty i stwierdził, że budżet taki waha się w granicach 8-13% całego budżetu projektu,

Ponadto nie jest zależny liniowo od wielkości projektu, np. 10 razy większy projekt, tylko 4 razy większy budżet,

Średnio przyjmujemy, że częśd budżetu przeznaczonego na projektowanie i badanie użyteczności to 10%

rok 2008 – potwierdzenie 10%,

• Zyski, ROI (Return on investment)

wg Nielsena, 2003: średni zysk (dla badanych 42 projektów) to poprawa wskaźników o 135% (zbadano przyjęty zbiór mierników przed i po zmianach)

2011-04-17

4

Koszty i zwrot z inwestycji

Mierniki poprawy:

• Sprzedaż – 100%

• Ilośd odsłon – 150%

• Wydajnośd użytkowników – 161%

• Użycie specyficznych funkcji – 202%

Wg badania z roku 2008 średni wzrost wskaźników po poprawie użyteczności to 85%.

źródło: www.useit.com

Progres w usability

• Testujemy wskaźnik porażek: mówi on, że jeśli użytkownik był w stanie wykonad 60% zadao na stronie to miał 40% porażek,

• W roku 2000 wskaźnik ten wynosił 39%,

• W roku 2010 22%,

• Tempo poprawy użyteczności wynosi 6% rocznie, czyli że co roku poziom porażek jest 1.06 razy mniejsze niż w roku poprzednim,

• Dla porównania: prędkośd samolotu: wzrost 7% rocznie, sprzedaż zabawek: 4% rocznie,

Elementy stron WWW

• Układ strony

• Nawigacja

• Pozostałe elementy

• GUI

• Reklama

• Typografia

• Kolory

• Grafika

• Błędy

• Formularze

Układ strony

• Projektując należy rozważyd kwestię usadowienia menu głównego oraz treści względem niego,

• Można wyróżnid układy (m.in.):

• dwukolumnowy asymetryczny

• trójkolumnowy

http://designshack.co.uk/gallery/

2011-04-17

5

Lewa czy prawa?

• Lewa częśd ekranu: 69% czasu oglądania

• Prawa częśd ekranu: 30% czasu oglądania

Źródło: www.useit.com

dane na 04.2010

Trendy na 2011

• Editorial-style layouts

http://www.good.is/

Trendy na 2011

• Grid layout

http://www.yamaha.co.jp/yamahaginza/

http://z-index.it/

Trendy na 2011

• Single Page Sites

http://ryanscherf.net/

http://www.psdlayout.com/

2011-04-17

6

Nawigacja

• Zadaniem nawigacji jest dad odpowiedź użytkownikowi na następujące pytania:

• Gdzie jestem?

• Gdzie jeszcze mogę pójśd?

• Jak to zrobid?

• Jak wrócid do miejsca, w którym już byłem?

• Gdzie już byłem?

Menu główne

• Gdzie je umieścid?

źródło: J. Nielsen „Funkcjonalnośd …”, 2006, 50 czołowych stron internetowych

schemat Procent witryn

Pasek nawigacji po lewej 30%

Zakładki 30%

Łącza u góry 18%

Kategorie pośrodku strony 12%

Rozwijane menu (kaskadowe) 10%

Inny układ 6%

Menu główne schemat Procent witryn

Nawigacja u góry 89%

Pasek nawigacji na lewej kolumnie

11%

W tym w formie:

Zakładki 43%

Belka nawigacyjna 39%

Pełna lista 7%

Menu rozwijane 5%

przyciski 4%

źródło: webdesignpractices.com, 2006, 75 czołowych serwisów e-commerce

Układ kliknięć

źródło: J. Nielsen „Optymalizacja …”, 2007,

2011-04-17

7

Zakładki

• Kiedy warto stosowad zakładki:

• Liczba kategorii nie przekracza dziesięciu, najlepiej jeśli jest ich nie więcej niż siedem.

• Scenariusze użycia strony są faktycznie różne, a użytkownicy widzą potrzebę rozdzielenia ich. Przykładowo ustala się podział podstawowy na „Oferta indywidualna", „Oferta dla biznesu",

• Strona ma charakter e-commerce — produkty są jasno pokategoryzowane i tworzą osobne zestawy: książki, muzyka, gry, elektronika.

Zakładki - przykłady

http://ribic.org/perlica/

http://jogger.pl/

Menu kaskadowe

• Wielu wrogów wśród programistów, jak i użytkowników,

• Zaleta to możliwośd zamieszczenia kategorii podstawowych, jak i podkategorii,

• Wada to technologia, a dokładnie prawidłowośd jej zastosowania,

http://www.amazon.com/

Breadcrumbs

• Nawigacja taka pokazuje użytkownikowi drogę do jego aktualnej lokalizacji,

• Strona główna/Strona sekcji/Strona podsekcji…,

• Jest to nawigacja dodatkowa, odzwierciedla strukturę strony a nie historię,

• 95% to postad pozioma, 5% pionowa,

• W 65% przypadków separatorem jest strzałka, w 9% linia pionowa,

www.webdesignpractices.com

2011-04-17

8

Breadcrumbs

• Wg Web Design Practices w roku 2002 45% witryn korzystało z tego rodzaju nawigacji,

• Wg Nielsena w 2007 80% wybranych przez niego najlepszych intranetów stosowało ten rodzaj nawigacji,

• Badania potwierdzają, że popularnośd tej techniki wciąż rośnie; wynika to z faktu:

• Pokazują użytkownikom ich aktualną lokalizację w stosunku do wyższego poziomu,

• Dostęp do wyższych poziomów za pomocą jednego kliknięcia,

• Nie powodują problemów podczas testów użytkownika,

• Zajmują mało miejsca na stronie,

Chmura tagów

• Jeden z głównych elementów koncepcji Web 2.0,

• Tagi to słowa kluczowe przypisane danym zawartym w serwisie (produktom, artykułom, itd.),

• Klikanie ich przez użytkownika powoduje różnicowanie się tagów, powiększają się i zmieniają kolor te które są najbardziej popularne,

• Można łączyd je z innymi elementami strony np. wyszukiwarką,

• Popularne od roku 2008-2009, chociaż testy usability pokazują, że większośd użytkowników nie wie do czego służą i jak je używad,

Chmura tagów

http://www.wordle.net/create

http://www.smashingmagazine.com/

Scrolling

• najważniejsze (najatrakcyjniejsze) informacje dajemy w obszarze największej atencji użytkownika,

• W początkowych latach rozwoju Internetu użytkownicy w ogóle nie używali pasków przewijania,

www.useit.com, 2010

80,3% czasu - góra strony 19,7% czasu - dół strony

2011-04-17

9

Scrolling • W drugim badaniu mamy

stronę z 50 sofami

• 2 pierwsze wiersze -10-15 zatrzymao na sofę,

• Następne 4 – 2-4 zatrzymania na sofę,

• Kolejne 8 – 1 zatrzymanie,

• Ostatnie 3 – 2 zatrzymania na jednej sofę,

• Najważniejsze dla użytkownika lub firmy informacje powinny byd na górze strony,

• Użytkownicy „zejdą” w dół gdy layout ich do tego zachęci lub uwierzą że znajdą tam ciekawe informacje (na podstawie tego co jest na górze).

Inne elementy strony

• Logo

• Wg Nielsena linkowanie logo ze stroną główną, na stronie głównej logo nie powinno byd linkiem – chociaż tak jest w większości stron, logo ma byd na każdej stronie,

• Zamieszczamy po lewej stronie (gdyż tam szukają go użytkownicy), od niedawna nawet w serwisach pisanych językiem czytanym od prawej do lewej,

• wg badao niewielka częśd użytkowników łączy identyfikację strony z możliwością nawigacji,

Inne elementy strony

• Wyszukiwarka

• Przyjęło się umiejscawianie z prawej strony,

• Domyślnie jak najprostsza, ewentualny link do zaawansowanych opcji,

• Badania pokazują, że z lokalnych wyszukiwarek korzystają raczej użytkownicy zaawansowani używający do zatwierdzania klawisza Enter, stąd tendencje do niedodawania przy wyszukiwarkach dodatkowych klawiszy,

• Stosowanie tzw. autouzupełniaczy, które np. w formie menu kaskadowego wyświetlają podpowiedzi z bazy,

Inne elementy strony

• Przyjęło się, że strona która ma poniżej 100 podstron nie potrzebuje wyszukiwarki, ta pomiędzy 100 a 1000 prostej wyszukiwarki, powyżej 1000 stron zaawansowanej wyszukiwarki,

• Użytkownicy oczekują wyszukiwania w prawym lub lewym górnym rogu, koniecznie na stronie głównej,

• Zaleca się aby pole wyszukiwania miało szerokośd 27 znaków, zaś badania z roku 2006 pokazały, że 84% zapytao miało długośd do 22 znaków, 16% wzrasta bardzo gwałtownie do 68 znaków,

• 93% użytkowników ogranicza się tylko do jednej strony wyników wyszukiwania, 6% do dwóch, zaś tylko 1 % do trzech,

2011-04-17

10

Inne elementy strony

• Logowanie

• Powinno byd logowanie i rejestracja, przy czym logowanie jako domyślne,

• Opcja odzyskiwania hasła oraz zapamiętywania go na komputerze użytkownika (cookies), wg badao ta druga opcja ma tendencje wzrostową,

• Wg M. Kasperskiego (na podstawie analizy konkurencji dla jednego z polskich banków) w Polsce logowanie najczęściej w prawym górnym roku, za granicą w lewej kolumnie,

• Z badao clictrackingowych GoldenLine wynika, że pomimo obecności boksu do logowania na stronie głównej z prawej strony użytkownicy logowali się za pomocą linku zamieszczonego właśnie w prawym górnym rogu (74%),

• Informacja o zalogowaniu powinna byd wyświetlana przez cały czas jego pracy,

Inne elementy strony

• Zrzut mapy z badao clicktrackingowych jednego z zagranicznych blogów

http://ui.blox.pl/

Inne elementy strony

http://www.goldenline.pl/

http://www.myspace.com/

Inne elementy strony

• Postad hasła

• Wg Nielsena (2009) zasady usability wymagają aby hasło podczas logowania było pisane jawnie, aby nie było maskowania,

• Uznał, że nie jest to zawsze konieczne z punktu widzenia bezpieczeostwa, a sprawia że użytkownicy:

• Popełniają więcej błędów przy wpisywaniu, szczególnie przy aplikacjach mobilnych, co powoduje niepewnośd i irytację,

• Im większa irytacja tym bardziej wybierają prostsze hasła lub zapisują je sobie w dodatkowym pliku,

• Zaleca w systemach gdzie bezpieczeostwo jest bardzo ważne (banki, etc.) stosowanie dodatkowego checkboxu wymuszającego maskowanie hasła,

2011-04-17

11

Inne elementy strony

• Jak nazwad link do rejestracji - badanie 100 znanych witryn w roku 2008, za smashingmagazine.com

http://www.smashingmagazine.com/

Inne elementy strony

• Wg badao link do zarejestruj się (2008):

• znajduje się w nagłówku - 59% witryn (76% z nich ma link umieszczony w prawym górnym rogu),

• posiada znaczącą pozycję na stronie głównej - 21% witryn (link lub formularz jest umieszczany na stronie głównej),

• jest ukryte za linkiem Logowania w nagłówku - 9% przypadków,

• Sidebar tylko 7% witryn,

• W roku 2009 już 18% witryn ma link do rejestracji zawarty w części przeznaczonej do logowania,

Koszyk

• Podstawowy element e-commerce,

• W 2007 J. Billingsley przeprowadził badania tego elementu pod wieloma aspektami (107 witryn), oto kilka wniosków:

Tekst Grafika

Add to Cart 58.0% None 48.2%

Add to Bag 9.8% Arrows 17.9%

Add to Shopping Bag 9.8% Cart 14.3%

Add to Basket 6.3% Shopping Bag 7.1%

Add to Shopping Cart 4.5% Plus Sign 5.4%

Buy 2.7% Combo 4.5%

Buy Now 1.8% Unique 1.8%

Add Item(s) to Cart 1.8%

Add Item(s) to Bag 0.9%

Add to My Bag 0.9%

Add to My Brown Bag 0.9%

Add to My Shopping Cart 0.9%

Order Now 0.9%

http://www.getelastic.com/add-to-cart-buttons/

Koszyk

• Przy nazewnictwie stosuj zasadę pisania w Internecie: jak najmniej słów, tylko 15% witryn używa wydłużonych nazw koszyka,

• Kup Teraz może jest większa zachętą do zakupu, ale zarazem sugeruje przerwanie zakupów,

• Pisanie dużymi literami zniechęca użytkowników, najlepsza wersja mieszana, dopuszczalna małymi, mimo to 45% witryn przyjmuje pierwsza opcję,

2011-04-17

12

Koszyk

• Wytyczne i przegląd z roku 2008, za Smashing Magazine

• W wielu przypadkach można używad bardziej atrakcyjnych grafik wzbudzających emocje, np. w sklepach dla kobiet, najczęściej ikony te zbliżone są wyglądem do prawdziwych koszyków lub toreb:

• Można poprawid użytecznośd poprzez łączenie wózków sklepowych z dalszymi funkcjami sklepu; użytkownicy oczekują koszyka z prawej strony u góry, może to byd rozsądne, aby uwzględnid dodatkowe opcje w pobliżu koszyka z zakupami, a tym samym ująd cały proces zakupów jako kompaktową i zawsze widoczną częśd witryny.

Koszyk

• Można wyświetlad zawartośd koszyka,

• Minimalne wymagania do dokonania zakupu,

• Informacje o cenie,

• Informacje o tym w jaki sposób można płacid,

• Zawsze oferuj możliwośd natychmiastowego przejścia do zamówienia,

• Link do ewentualnej pomocy,

Koszyk

• Koszyki tworzone są w sposób bardzo subtelny (gdy mamy też taki sam charakter serwisu) lub bardzo twórczy ( z punktu widzenia użytkownika nie jest to dobre, bo koszyk ma byd natychmiast znaleziony i zapamiętany)

Koszyk

• Popełniane błędy:

• Ikona koszyka nie jest klikalna,

• Ikona koszyka jest trudna do rozpoznania,

• Ikona koszyka jest trudna do znalezienia,

2011-04-17

13

Koszyk

• Gdzie zamieszczad?

• W górnym prawym rogu – najczęstsza opcja i przyzwyczajenie,

• Gdy mamy więcej produktów dodatkowych dołączonych do koszyka najlepiej zamieścid do w prawym panelu strony,

Stronicowanie

• Wg artykułu w Smashing Magazine (2007) można wyróznid 6 punktów stanowiących dobre praktyki stronicowania:

• Zapewnij duże klikalne obszary

• Nie używaj podkreśleo

• Identyfikuj bieżącą stronę

• Rozstaw linki do stron

• Zapewnij link do poprzedniej i następnej strony

• Użyj linku ostatni i pierwszy (jeśli dotyczy)

Stronicowanie - błędy

• Niewidoczne linki

• Nieintuicyjne linki

• Linki bez przestrzeni pomiędzy stronami

Hugg.com

Helium.com

Helium.com

Stronicowanie

• Przykłady tradycyjne (proste liczby, dominuje kolor szary i niebieski) oraz wykorzystujące inne kolory i kształty,

2011-04-17

14

Stronicowanie

• Kreatywne rozwiązania: funkcjonalne i graficzne

slider

dodatkowa nawigacja po kliknięciu

konkretna strona

nietypowe rozwiązanie

Elementy GUI

• Button

• OK/Cancel czy Cancel/OK?

• 1 – zachowana naturalna kolejnośd czytania z lewej do prawej,

• 2 – poprawia przepływ, OK stanowi zakooczenie akcji z podsumowaniem,

• Przycisk domyślny powinien byd wybrany i odpowiednio zaznaczony,

• Microsoft: OK/Cancel, Apple: Cancel/OK

Elementy GUI

• Button

• Używaj kolorów jako narzędzi do komunikacji z użytkownikiem: np. czerwony – przycisk o funkcji destrukcyjnej (usuwanie), niebieski – standardowe przyciski, zielony – zapisywanie, modyfikacja,

• Jako etykiety na przyciskach używaj czasowników,

• Etykiety zapisuj w polach edycyjnych, oszczędzisz miejsce i dasz wskazówkę użytkownikowi,

Elementy GUI

• Hiperłącze

• Unikaj sytuacji gdy w tekście zasadniczym hiperłącze jest niewyróżnione kolorem i niepodkreślone,

• Z wiekiem wrażliwośd oka ludzkiego na kolor niebieski maleje; dlatego należy uważad na używanie tego koloru do oznaczania hiperłączy na stron skierowanych do osób starszych

Kolor Udział koloru

Niebieski 50%

Czerwony 13%

Czarny 12%

Szary 12%

Zielony 6%

Brązowy 5%

Purpurowy 2%

źródło: Web Design Practices

2011-04-17

15

Elementy GUI

• Listy – unikaj sytuacji gdy kilka opcji na liście jest wybieranych po przytrzymaniu klawisza CTRL,

• Check Box vs. Radio Button:

• Zasady stosowania tego rodzaju elementów są znane od wielu lat, mimo to wciąż popełnianych jest wiele błędów:

• Check box – zero, jedna lub wiele opcji,

• Radio button – jedna opcja,

• Stand-alone check box – włączenie lub wyłączenie pojedynczej opcji,

Elementy GUI

• Dodatkowe wytyczne, za J. Nielsen, 2008:

• Używaj standardowej wizualnej oprawy,

• Grupa opcji powinna byd wizualnie przedstawiona jak grupa, stosuj podtytuły dzielące logicznie opcje na podgrupy – to ułatwi wybór użytkownikom,

• Opcje powinny byd zawsze rozłożone w pionie, po jednej w linii, jeśli z konieczności musisz wybrad poziom to zwród uwagę na odległości pomiędzy opcjami,

• Etykiety do opcji powinny mied twierdzący pozytywny wydźwięk, unikaj negacji, twórz je tak aby użytkownik wiedział co się stanie gdy zaznaczy opcję, ale także wtedy gdy jej nie zaznaczy, jeśli to niemożliwe stwórz w zamian dwa radio buttony,

• Jeśli to możliwe zamiast list rozwijanych stosuj radio buttony, mamy wówczas lepszą widocznośd wszystkich opcji, łatwiej operują nimi użytkownicy mający problemy z precyzją obsługi myszy,

Elementy GUI

• Twórz zawsze domyślną selekcję w zbiorze radio buttonów, daj możliwośd użytkownikowi nie decydowania się na żadną z opcji, dodaj opcję Inne lub Żadna,

• Ponieważ radio button oznacza wybór jednej opcji, sprawdź czy przygotowany przez Ciebie zbiór opcji jest w pełni wyczerpujący,

• Daj możliwośd użytkownikom dokonad wyboru klikając w element lub etykietę, im większy obszar jest klikalny tym lepiej i mniej błędów,

• Definiuj klawisze skrótu dla najczęściej wybieranej przez użytkowników opcji,

• Używaj check boxów i radio buttonów tylko jako elementów wyboru, a nie akcji,

Elementy GUI

• Wskaźniki postępu

• Jak interpretowad czasy odpowiedzi:

• 0.1 sekundy – użytkownik ma poczucie natychmiastowej reakcji systemu, brak konieczności stosowania feedbacku,

• 1 sekunda – użytkownicy odczuwają przestój, ale nie czują jeszcze zakłócania pracy, brak konieczności stosowania feedbacku,

• Powyżej 2 sekund – koniecznośd stosowania asynchronous progress indicator,

• 10 sekund – maksymalny czas w którym użytkownik jest skupiony na czekaniu, powyżej tego czasu chce zając się innymi zadaniami, konieczne zastosowanie wskaźnika postępu,

• Badania (2009) wykazują, że użytkownicy odczuwają czas oczekiwania jako krótszy, gdy wskaźnik postępu jest wyświetlany,

• Gdy czas jest dłuższy niż kilka minut wykorzysatj go na wyświetlanie ciekawych informacji, etc.,

2011-04-17

16

Elementy GUI

• Ikony i metafory

• Metafory – elementy graficzne reprezentujące różną funkcjonalnośd systemu, np.:

• Domek

• Koperta

• Koło ratunkowe

• Koszyk

• Z badao wynika, że stosowanie metafor z okazji świąt i wydarzeo specjalnych skutecznie wpływa na umacnianie więzi z marką i postrzegane jest jako wyraz dojrzałości firmy, korzystają z nich autorzy większych serwisów,

Kilka ocen

• Ocena projektowania formularzy kontaktu i logowania – M. Kaperski, A. Boguska-Torbicz „Projektowanie stron WWW. Uzytecznośd w praktyce”,

• Formularze logowania

Powinno się wyrównad podpisy pól do prawej i zbliżyd do pól edycyjnych, zgrupowad w logiczną całośd napis zaloguj i strzałkę

Kilka ocen

Chaotyczny układ, przycisk OK ma taka samą długośd jak pola edycyjne co wprowadza zamieszanie

Za dużo informacji, niepotrzebne opcje dodatkowe

Kilka ocen

Niepotrzebny komentarz pod hasłem logowanie, ponadto kierowany do osób które jeszcze nie mają konta

2011-04-17

17

Kilka ocen

• Formularz kontaktu - www.bemoreevolutive.pl – wersja 2007

• Żółty pas jest niezagospodarowany, obniża ważne pola formularza,

• Pola formularza są nieproporcjonalne,

• Niepotrzebne pole Inne komentarze,

• Zbyt długa nazwa trzeciego pola,

• Zbędne przycisk Wyczyśd pod formularzem,

Kilka ocen

• Wersja 2008

• Zbędny przycisk Wyczyśd,

• Zbędny opis pod pytaniem Jakieś pytania?,

• Nagłówek można jeszcze skrócid,

Zasady i wytyczne usability

• 7+/-2

Zasad Millera mówi, że użytkownik jest w stanie objąd uwagą i zapamiętaj jednocześnie od 5 do 9 informacji, dlatego często mówi się o ograniczaniu nawigacji do 7 części, nie do kooca jasne jak i czy ta zasada powinna byd stosowana w sieci,

• Zasada 2 sekund

Zasada która mówi że użytkownik nie powinien czekad więcej niż 2 sekundy na odpowiedź systemu,

• Zasada 3 kliknięd

Użytkownik przestaje oglądad daną stronę, gdy po 3 kliknięciach nie uzyska tego czego oczekiwał,

Zasady i wytyczne usability

• Zasada 80/20

Zasad która mówi że 80% efektów zależy od 20% przyczyn, w biznesie mówi się, że 20% klientów generuje 80% zysków, tak samo jest w usability, identyfikacja 20% użytkowników da 80% zysk,

• Prawo Fitta

mówi, że czas potrzebny do szybkiego przemieszczania się do obszaru docelowego jest funkcją odległości i wielkości celu

• Odwrócona piramida

Określa styl pisania – dołączanie streszczeo na samej górze artykuły, styl znany dziennikarzom,

2011-04-17

18

Przygotowano na podstawie

• M. Kaperski, A. Boguska-Torbicz „Projektowanie stron WWW. Uzytecznośd w praktyce”, Helion, 2008

• The Smashing Book, Germany, 2009.

• T. Karwatka, Efektywne i intuicyjne serwisy WWW

• www.useit.com/alterbox

• www.smashingmagazine.com

• Materiały z WUD'09 | World Usability Day - Tour de Pologne 2009