Projektowanie aplikacji internetowych

Transkrypt

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 Historia badań nad usability 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, W latach 70-tych badano jedynie zdolności poznawczomotoryczne 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, 1

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 Specjaliści Jakob Nielesen ( 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? źródło:

3 Specjaliści Koszty i zwrot z inwestycji Przykład na podstawie J. Nielsena, za Firma zatrudnia 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 źródło: pracuj.pl i inne Koszty i zwrot z inwestycji Ile tracimy: W pierwszym kroku tracimy (pracownicy) * 5 s = 14 h, co kosztuje 2800 zł W drugim kroku tracimy * 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) 3

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%. 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 %, 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, źródło: 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 4

5 Lewa czy prawa? Trendy na 2011 Lewa częśd ekranu: 69% czasu oglądania Prawa częśd ekranu: 30% czasu oglądania dane na Editorial-style layouts Źródło: Trendy na 2011 Grid layout Trendy na 2011 Single Page Sites

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? 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% źródło: J. Nielsen Funkcjonalnośd, 2006, 50 czołowych stron internetowych Menu główne Układ kliknięć schemat Nawigacja u góry 89% Pasek nawigacji na lewej kolumnie W tym w formie: Procent witryn 11% 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 źródło: J. Nielsen Optymalizacja, 2007, 6

7 Zakładki Zakładki - przykłady 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. Menu kaskadowe Breadcrumbs 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, 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, 7

8 Breadcrumbs Chmura tagów Wg Web Design Practices w roku % witryn korzystało z tego rodzaju nawigacji, Wg Nielsena w % 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, 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 , 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 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, 80,3% czasu - góra strony 19,7% czasu - dół strony

9 Scrolling W drugim badaniu mamy stronę z 50 sofami 2 pierwsze wiersze zatrzymao na sofę, Następne 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, 9

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 Inne elementy strony 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, 10

11 Inne elementy strony Jak nazwad link do rejestracji - badanie 100 znanych witryn w roku 2008, za 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% 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ę, 11

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, 12

13 Koszyk Gdzie zamieszczad? W górnym prawym rogu najczęstsza opcja i przyzwyczajenie, Stronicowanie Wg artykułu w Smashing Magazine (2007) można wyróznid 6 punktów stanowiących dobre praktyki stronicowania: Gdy mamy więcej produktów dodatkowych dołączonych do koszyka najlepiej zamieścid do w prawym panelu strony, 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 Stronicowanie Niewidoczne linki Nieintuicyjne linki Hugg.com Przykłady tradycyjne (proste liczby, dominuje kolor szary i niebieski) oraz wykorzystujące inne kolory i kształty, Helium.com Linki bez przestrzeni pomiędzy stronami Helium.com 13

14 Stronicowanie Kreatywne rozwiązania: funkcjonalne i graficzne dodatkowa nawigacja po kliknięciu slider 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 Elementy GUI Hiperłącze 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, 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 14

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 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, 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., 15

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 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 Niepotrzebny komentarz pod hasłem logowanie, ponadto kierowany do osób które jeszcze nie mają konta 16

17 Kilka ocen Kilka ocen Formularz kontaktu - 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, 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, 17

18 Przygotowano na podstawie M. Kaperski, A. Boguska-Torbicz Projektowanie stron WWW. Uzytecznośd w praktyce, Helion, 2008 The Smashing Book, Germany, T. Karwatka, Efektywne i intuicyjne serwisy WWW Materiały z WUD'09 World Usability Day - Tour de Pologne