Dlaczego funkcjonalność

Funkcjonalność rządzi siecią - jeżeli klient nie znajdzie produktu to go nie kupi.

Sieć jest środowiskiem dającym klientowi największe uprawnienia. Osoba klikająca myszą decyduje o wszystkim. Bardzo łatwo jest pójść gdzie indziej; konkurencja jest odległa tylko o jedno klinknięcie.

W sieci sytuacja jest odwrotna niż w wypadku większości produktów: użytkownicy sprawdzają funkcjonalność strony internetowej zanim ZOBOWIĄŻĄ się do korzystania z niej i zanim przeznaczą jakąkolwiek sumę na zakup czegokolwiek.

Wnioski

• W wypadku produktu czy oprogramowania klienci najpierw płacą, a dopiero później poznają funkcjonalność.

• W sieci użytkownik najpierw poznaje funkcjonalność a potem płaci.

Sztuka kontra inżynieria

Istnieją dwa podstawowe sposoby podejścia do zagadnienia projektowania:

• artystyczny ideał wyrażenia samego siebie

• inżynieryjny ideał rozwiązania problemu klienta.

Głównym celem większości projektów WWW powinno być ułatwienie klientowi wykonania użytecznych działań.

Dlaczego projektujemy nieprawidłowo

• Model biznesowy - sieć traktowana jest jako kolejna broszura reklamowa zamiast całkowicie odmiennego podejścia do sposobu prowadzenia biznesu w sieci

• Zarządzanie projektem witryny - w taki sam sposób jak tradycyjnym projektem firmowego oprogramowania. Prowadzi to do stworzenia projektów nastawionych wewnętrznie, z niespójnym interfejsem użytkownika. Serwis WWW powinien być zarządzany tak jak projekt dla POJEDYNCZEGO KLIENTA.

• Architektura informacji - odzwierciedlająca wewnętrzną strukturę firmy. Witryna swą strukturą powinna odzwierciedlać działania użytkownika oraz jego spojrzenie na przestrzeń informacyjną.

• Projekt strony - który wygląda wspaniale i szybko się ładuje w trakcie pokazów wewnętrznych. wewnętrzne pokazy nie ucierpią z powodu czasu ładowania - co jest jednym z kluczowych elementów funkcjonalności. Takie pokazy nie ujawnią trudności użytkownika nowicjusza. Projektować powinno się pod rzeczywistego użytkownika i jego odczucia w realistycznych warunkach.

• Tworzenie treści - pisanie w tym samym stylu linearnym w jakim zawsze pisaliśmy. Należy zmusić się do pisania w nowym stylu, zoptymalizowanym dla odbiorcy w WWW, który zazwyczaj tylko przegląda tekst i woli krótkie strony; drugorzędne informacje powinny być przeniesione na strony pomocnicze.

• Strategia odwołań (linków) - błędem jest nieprzemyślane stosowanie linków do innych witryn i dobrze zaprojektowanych punktów startowych do których mogłyby się odwołać inne witryny.

Projektowanie stron

Podział ekranu

rys.1,2,3 (przykłady proporcji podziału)

• Zasadnicza część strony powinna zajmować co najmniej 50% a miarę możliwości 80% dostępnego miejsca.

• Nawigacja nie więcej niż 20% miejsca, więcej tylko na stronach głównych.

• Reklamy albo w ogóle albo nad nawigacją i jej kosztem

• Generalną zasadą jest analizowanie kolejnych elementów strony i próbne ich usuwanie. Jeżeli strona nie traci na użyteczności po próbnym usuniecie elementu - usuwamy go na stałe.

• Prostota zawsze wygrywa z zawiłością.

• Każde usunięte 5bajtów = 1 milisekunda szybsza odsłona.

rys.4 (cdn...przykład proporcji podziału)

rys.5,6,7 (przykłady podziału - przesada)

Projektowanie dla wszystkich platform

rys. 8 (wykorzystanie konkretnych czcionek - których nie było)

Najlepiej korzystać z czcionek i rozmiarów domyślnych.

Kolorowe dane vs prezentacyjne śmieci (E.Tuffe) --> grafika to w większości - prezentacyjne śmieci.

Z czego korzystają internauci

Nie wiadomo!!!

Stały wzrost znaczenia zarówno dużych jak i małych, bardzo małych ekranów dla urządzeń mobilnych.

Projekt niezależny od rozdzielczości

• Do ustalania szerokości tabel, ramek innych elementów (poza wąskimi paskami oddzielającymi wzdłuż krawędzi ekranu) nigdy nie używamy stałych wartości wyrażonych w pikselach. Zamiast tego stosujemy wartości PROCENTOWE - określające jaka cześć ekranu powinna być zajęta przez dany element.

• Pamiętać też należy, że użytkownik sam morze modyfikować w przeglądarce wielkość tekstu - stąd należy projektować tak aby dla każdej z tych wielkości efekt był równie dobry.

rys.9 (strona o sztywno ustalonej rozdzielczości)

Stosowanie niestandardowej zawartości

Gdy tylko pojawia się nowa technologia - korci nas aby ją zastosować - nie należy tego robić.

rys. 10 (to co czytelne w Netscape nie jest czytelne Explorerze)

Rzadsze aktualizacje

Obecnie tempo uaktualniania wersji przeglądarek = 1% na tydzień

Kiedy aktualizować?

Przez rok (do dwu) od oficjalnej premiery należy szczególnie unikać:

• nowych wersji języka HTML lub innych specyfikacji,

• pluginów i innych komponentów programowych

• nowych formatów danych i innych właściwości specyficznych dla przeglądarek

Uzasadnienie:

• Przy tempie aktualizacji 1% na tydzień minie rok zanim większość użytkowników będzie miała dostęp do nowych technologii.

• Oprogramowanie po wydaniu pierwszej wersji zawiera zawsze jeszcze sporo błędów.

• Witryny wprowadzające nowe technologie raczej szkodzą użytkownikom niż im pomagają.

Oddzielanie formy od treści

Pierwotny projekt Internetu i podstawowy HTML - miał na celu przekazywanie treści a nie formy.

Stąd kodowanie znacznikami n.p.: (<H2>), które „wyrzucało” z treści formę - która to jest ostatecznie określana przez sprzęt użytkownika.

Obecnie wielu koduje w stylu „czcionka pogrubiony Arial o wielkości 24 piksele” zamiast myśleć w kategoriach znaczników.

Kodowanie semantyczne jest jedyna metodą na 99% kompatybilność serwisów pomiędzy różnymi platformami i wersjami przeglądarek.

Kodowanie semantyczne umożliwia także wdrożenie sloganu DANE ŻYJĄ WIECZNIE - zakodowana semantycznie witryna nawet za wiele lat będzie czytelna mimo wielu zmian w technologii WWW.

rys. 11,12,13, 14 (efekty prób zbliżenia 4 komórek w różnych wersjach przeglądarek, po zastosowaniu różnych „tricków”)

Najlepszym rozwiązaniem jest oddzielenie treści od instrukcji na temat ich wyświetlania n.p. poprzez odwołania do arkuszy stylów - ładowanych w oddzielnym pliku.

Czas odpowiedzi

„Zaprojektujmy jeszcze ciekawszy wystrój a oni chętnie na to poczekają”???

• 0,1 sekundy to maksymalny czas odpowiedzi, przy którym użytkownik czuje, że system reaguje natychmiastowo. Oznacza to, że oprócz wyświetlenie wyników nie są potrzebne żadne dodatkowe reakcje. Takim czasem reakcji powinny się charakteryzować wszelkie akcje, operujące na elementach obrazu w czasie rzeczywistym, np. powiększanie i przesuwanie.

• Jedna sekunda to granica, której nieprzekroczenie pozwala na nieprzerwany przepływ myśli użytkownika, nawet jeśli zauważy on opóźnienie. Opóźnienie <0,1 sek; 1sek> nie wymaga dodatkowych działań, mimo że użytkownicy mogą tracić poczucie działania bezpośrednio na danych.

• 10 sekund to maksymalny czas skupienia użytkownika w czasie dialogu. Otrzymanie strony w 10 sekund pozwala utrzymać uwagę użytkownika na nawigacji po witrynie.

Przewidywane czasy odpowiedzi

Użytkownik musi być świadom czasu odpowiedzi zwłaszcza > 10sek.

Funkcjonalność można polepszyć poprzez każde działanie stabilizujące czas odpowiedzi na pewnym poziomie

Na czas odpowiedzi wpływ ma:

• wydajność serwera

• połączenie serwera z Internetem

• sama Sieć

• połączenie użytkownika z Siecią

• szybkość wyświetlania stron przez przeglądarkę - stację użytkownika (gruby/cienki klient)

Szybkie pobieranie, szybkie połączenia

Szybkość pobierania jest parametrem krytycznym.

Powinno się ograniczyć do minimum grafikę, a efekty multimedialne wprowadzać tylko wtedy gdy rzeczywiście pozwalają użytkownikowi lepiej zrozumieć przekazywaną informację.

Wiele można osiągnąć poprzez stosowanie kolorowych tabel, różnych krojów czcionek i arkuszy stylów.

rys. 15 (przykład stosowania minimum grafiki, tabelek i czcionek)

Jeżeli konieczne jest stosowanie wielu elementów graficznych np. dla nawigacji) należy dążyć do wielokrotnego stosowania tego samego elementu na stronie - przyspiesza się ładowanie a jednocześnie unifikuje elementy interfejsu.

1-sek. na 10-sek.

na odpowiedź na odpowiedź

-----------------------------------------------------------

Modem 2kB 34kB

ISDN 8kB 150kB

T1 100kB 2MB

Zmniejszenie wagi strony wyraźnie zmniejsza % ucieczek w trakcie ładowania.

rys. 16 (rozkład prędkości połączeń z Internetem)

Szybsze URL:

dla plików: http://www.costam.com/stronka.htm

dla katalogów: http://www.costam.com/obrazki/

Przyspieszanie wyświetlania pierwszego ekranu

• Treść ładowanej strony powinna być czytelna jeszcze przed załadowaniem grafiki

• Grafikę zaopatrzyć w atrybuty ALT - aby było widać co będą zawierały.

• Przeglądarka musi szybko wyświetlić początek strony - aby było to możliwe musi dysponować wszystkimi informacjami niezbędnymi dla określenia układu strony. Należy podać atrybuty WIDTH oraz HEIGHT dla wszystkich ilustracji oraz komórek tabeli.

• Skomplikowane tabele wyświetlają się znacznie dłużej - należy je podzielić na wiele mniejszych i prostszych.

rys. 17, 18 (przykład czytelności nie w 100% załadowanej strony - bez grafiki)

Wykorzystanie zalet HTTP Keep-Alive

Jeżeli serwer i przeglądarka wykorzystują protokół HTTP w wersji 1.1 lub nowszej - do pobrania wszystkich obiektów z danej strony WWW otwierane jest tylko JEDNO połączenie.

Łączenie - odnośniki

Trzy najważniejsze typy odnośników:

• Nawigacji strukturalnej - określają strukturę przestrzeni informacyjnej, umożliwiają użytkownikowi rozpoznać ją i nawigować w jej obszarze.

• Skojarzeniowe w treści dokumentu - klasyczny/czysty hypertekst.

• Typu „zobacz także” - uzupełniają lub dopełniają treść bieżącej strony.

rys. 19/64 (przykład odnośników typu „zobacz także” (related new stories) - są umieszczone na dole strony co wymaga niestety jej przewinięcia; linki „Latest Headlines” mogłyby powędrować na stronę główną tego Działu)

Opisy odnośników

• Treść odnośnika powinna być kwintesencją - drogowskazem.

• Odnośnik powinien zawierać nie więcej niż 2 do 4 słów.

• Powinien być podkreślony.

• Treść towarzysząca odnośnikowi powinna być jego uzupełnieniem.

• „Kliknij tutaj” - NIGDY!!!

Przykład:

Aby przeczytać o najnowszym modelu Notebooka Toshiba - kliknij tutaj.

Możesz przeczytać informacje o najnowszym modelu Notebooka Toshiba.

rys. 20/66 (odnośniki typu „więcej tego samego”); rys. 21/67 ( a tutaj ich kompletnie brak - mimo, iż aż się o nie prosi); rys. 22/68 (odnośniki „current issue” i „previous issues” - bez daty czy innej informacji - nie mówią NIC)

rys.23/69 (tytuły odnośników i ich dodatkowe teksty - przekopiowane z innych serwisów - nie zawierają w istocie ŻADNEJ informacji o treści)

Tytuły odnośników

Nie zwlekajmy z wprowadzaniem tytułów odnośników.

Tytuł odnośnika powinien zawierać:

• nazwę witryny do której prowadzi odnośnik - jeżeli jest inna niż bieżąca,

• nazwę działu witryny - jeżeli jest inny niż bieżący,

• szczegóły na temat informacji na stronie docelowej,

• ostrzeżenie o ewentualnych problemach typu: konieczność logowania lub długie ładowanie,

• krótsze tytuły są lepsze - maksymalnie 60-80 znaków,

• tytuł nie zwalnia ze stosowania właściwej treści samego odnośnika - jest tylko jego uzupełnieniem,

• tytułu nie stosujemy gdy treść odnośnika określa w 100% zawartość strony do której prowadzi.

rys. 24/71 (odnośniki w różnych systemach operacyjnych mogą różnie wyglądać)

Kolorowanie odnośników

Współczynnik korelacji pomiędzy standardowymi kolorami odnośników a zrealizowaniem zadania przez użytkownika
= 0,4 (16% powodzenia leży więc w stosowaniu standardowej kolorystyki odnośników).

Czas przeznaczony przez użytkownika na poznawanie stosowanej kolorystyki, lub zastanawianie się które obszary przestrzeni informacyjnej już odwiedził - to czas zmarnowany i dodatkowy pretekst do ucieczki.

rys. 25/73 (wszystkie odnośniki mają ten sam kolor bez względu na to czy zostały już wybrane czy nie)

rys. 26/73 (odnośniki odwiedzone i nie mają inne kolory - ale różne od standardowych - użytkownik musi się tego nauczyć)

rys 27/75 (zastosowanie standardowej kolorystyki odnośników - wystarczy rzut oka by zorientować się „gdzie byłem a gdzie nie”)

Oczekiwania wobec odnośników

Należy zawsze używać tego samego adresu URL odwołując się (w różnych częściach witryny) do tej samej strony - w przeciwnym wypadku użytkownik będzie kompletnie zdezorientowany w strukturze witryny.

Każdy odnośnik ma stronę źródłową i docelową:

• treści na stronie źródłowej - tłumaczą dlaczego warto przerwać czytanie i przejść na stronę docelową;

• treści na stronie docelowej - pomagają natychmiast odnaleźć te INFORMACJE do których faktycznie PROWADZIŁ odnośnik.

Jeżeli odnośnikiem jest nazwisko - użytkownik oczekuje strony ze szczegółami (np. autobiograficznymi) na temat tej osoby - a nie uruchomienia programu pocztowego wysyłającego emalia do tej osoby. Chyba, że jest to jawnie stwierdzone w tekście towarzyszącym odnośnikowi.

Odnośniki na zewnątrz

Rys. 28/77 (wrogie zachowanie wobec użytkownika - otwarcie z odnośnika strony w nowym oknie, a dodatkowo w oknie usuwającym wszelkie możliwości sterowania)

rys. 29/78 (niestandardowe oznaczenia odnośników zewnętrznych - trzeba poznać ich znaczenie, niepotrzebnie przyciągają uwagę)

rys. 30/79 (alternatywny sposób informowania o tym, że odnośnik jest zewnętrzny - opis i zmiana koloru myszy)

rys. 31/81 (dobre opisy lub treści towarzyszące odnośnikom, są zwykle najlepszą metodą)

rys. 32/82 (odnośnikiem jest URL a nie treść - co samo w sobie nic nie mówi)

rys. 33/83 (poprawiony poprzedni przykład - odnośnikiem jest treść, URL-e są przeniesione na dalszy plan aby nie dekoncentrować)

Jedynym powodem podawania URL jako odnośnika może być jego UWIARYGODNIENIE:

www.toyota.com vs. www.jas_mechanik.pl

Odnośniki wskazujące na naszą stronę

• Strony powinny mieć stały adres.

• Jeżeli adres jest tymczasowy - informujmy o tym.

• Jeżeli to możliwe - podawajmy adres tymczasowy i stały (w przyszłości gdy pójdą do archiwum muszą dać się odnaleźć).

• Strona musi mieć jednoznaczną treść, najlepiej monotematyczną aby odnośnik do niej był jednoznaczny.

• Umożliwiajmy automatyczne wstawianie strony do „Ulubionych” i ustawianie jej jako główną.

rys. 34/85 (przykład mechanizmu automatycznego generowania odnośnika do tej strony)

Można pożegnać się z nadzieją na nowych użytkowników, kierowanych za pomocą odnośników do naszej witryny, jeżeli wymagamy rejestracji lub opłat.

Odnośniki reklamowe

• Powinny prowadzić do stron handlowych - tego co reklamują - a nie do strony głównej.

• 30% wejść na stronę główną zamiast handlową jest przyczyną natychmiastowej ucieczki.

• Banner reklamowy powinien mieć świetną retorykę strony docelowej - użytkownik musi w 100% wiedzieć czego się spodziewać na stronie docelowej.

• I na stronie docelowej w 100% to OTRZYMAĆ.

rys. 35/88 (banner otwiera się wtedy gdy jest to związane z kontekstem zapytania - jego treść coś obiecuje...)

rys. 36/89 (po otwarciu strony banneru z rys. 36 - obiecanka się nie spełnia - nie widać „10 sposobów na...”).

rys. 37/90 (przykład na standardowe „klinknij tutaj” - „vistit us” - ale po co????)

rys. 38/90 (tutaj już wiadomo po co użytkownik miałby wejść na reklamowaną stronę Citibanku - co on faktycznie oferuje)

Arkusze stylów

CSS - to najlepsza metoda oddzielenia formy od treści.

• Zmiana formy prezentowania informacji na setkach stron wymaga (przy stosowaniu CSS) modyfikacji lub utworzenia jednego pliku CSS a nie wszystkich setek stron.

• Zapewniają wizualną spójność naszej witryny.

Zaleca się stosowanie CSS dołączanych jako zewnętrzny plik (a nie osadzonych w treści strony), dzięki temu:

• strona (bez definicji CSS) ładuje się szybciej,

• jeżeli cała witryna korzysta z jednego pliku CSS - to jest on ładowany tylko jeden raz.

Standaryzacja arkuszy stylów

Internet nie jest środowiskiem WYSIWYG, stąd

wszystkie arkusze stylów witryny powinna realizować jedna grupa projektantów rozumiejąca ten fakt.

Zapewnienie działania arkuszy stylów

• Strony muszą działać nawet wtedy gdy CSS zostaną wyłączone przez użytkownika lub przeglądarkę (lub nie są przez nią obsługiwane).

• Zaleca się stosowanie nie więcej niż 2 lub 3 czcionek (patrz - list z żądaniem okupu).

• Dla danej klasy tekstu należy podawać listę zamienników czcionki.

• Lista zamienników musi być zawsze w tej samej kolejności.

• Rozmiar czcionki podawać w odniesieniu do podstawowego (np. 200%) a nie w miarach bezwzględnych (np. 12 pikseli).

• Jeżeli stosujemy wiele arkuszy stylów - stosujmy te same nazwy klas i w tym samym znaczeniu w każdym arkuszu.

Ramki

PRECZ Z RAMKAMI !!!!

• Ramki łamią większość pierwotnych zasad Sieci.

• Jeżeli stosujesz ramki przygotuj alternatywną treść strony w sekcji <NOFRAMES> dla tych którzy je wyłączyli.

• Wiele przeglądarek (lub ich wersji) nie radzi sobie z prawidłowym drukowaniem zawartości ramek - stąd konieczność przygotowania wersji do druku danej strony.

• Nie radzi sobie też z tworzeniem zakładek do stron z ramkami.

• Wyszukiwarki nie radzą sobie prawidłowo z indeksowaniem stron opartych na ramkach.

• Pamiętać należy o kwestii praw autorskich, jeżeli w ramce pokazujemy cudzą stronę (patrz rysunek 40)

rys. 39/98 (na dużym ekranie ta strona z ramkami wygląda dobrze)

rys. 40/99 (ta sama strona na małym ekranie - TRAGEDIA)

rys. 40/100 (wewnątrz ramki wyświetlana jest treść z innej witryny (gościa), podczas gdy pole ADRES - podaje URL witryny nawigacji ramek (gospodarza))

Wiarygodność

W Internecie wszyscy są równi - stąd pytanie o wiarygodność informacji tam publikowanych - MUSISZ JĄ UDOWODNIĆ.

Jedną z metod jest oszczędne epatowanie użytkownika odjazdowymi efektami na rzecz profesjonalnej funkcjonalności.

rys. 41/103 (ciężka, amatorsko przeładowana strona)

rys. 42/103 (lekka, przejrzysta strona)

Drukowanie

• Warto przygotowywać wersje do druku w całej witrynie lub najistotniejszych stron.

• Dzięki temu format wydruku będzie w naszych rękach a nie w rękach aktualnie stosowanej przez użytkownika przeglądarki.

• W wersji do druku można stosować np. tekst wielokolumnowy.

• Można łączyć w jeden dokument do druku tekst, który w witrynie (z uwagi na długość) jest podzielony na wiele odrębnych stron.

• Dokument do druku przygotujmy w wielu (do wyboru) formatach: HTML, PDF, Postscript.

• Dokument musi równie dobrze wyglądać na każdym z dwu najpopularniejszych rozmiarów papieru: A4 i U.S. Letter, stąd: szerokość wydruku musi pasować do A4, zaś wysokość do U.S. Letter (jest to dopasowanie się do mniejszego rozmiaru - A4 jest formatem węższym a Letter formatem krótszym).

Projektowanie treści

Internauci odwiedzają naszą witrynę tylko ze względu na jej zawartość. Wszystko inne jest tylko dodatkiem. Projekt istnieje po to, aby dać dostęp do treści.

Pisanie na potrzeby sieci

Odwiedzający witrynę, natychmiast kieruje wzrok na obszar główny w poszukiwaniu nagłówków i innych elementów zawierających wskazówki w kwestii o czym jest strona.

Główne wytyczne pisania dla Internetu:

• Pisać w sposób zwięzły. Objętość tekstu powinna stanowić 50% tego co napisalibyśmy na dany temat w normalnych mediach.

• Przejrzystość tekstu. Nie wymagajmy czytania długich partii tekstu. Stosujmy krótkie akapity. Stosujmy różne poziomy nagłówków. Stosujmy listy wypunktowane.

• Stosując hipertekst dzielmy długie teksty na kilka oddzielnych stron.

Nieoceniony redaktor: zły nagłówek -> 5sek zastanawiania się; 10% niepotrzebnych kliknięć -> 30 sekund czytania zbędnych treści => dla 10000 pracowników = 5000$.

Długość tekstów

Czytanie z ekranu jest o 25% wolniejsze niż z papieru.

Jakość - rozdzielczość jest jeszcze znacznie gorsza niż papieru.

Stąd postulat drastycznego skracania tekstów i koncentrowaniu się na meritum interesującym internautę.

rys. 43/112 (radosne „Welcome” - to sygnał ostrzegawczy po ujrzeniu którego szybko szukamy linku na którym trzeba jak najszybciej kliknąć)

Korekta

rys. 44/113 (efekty braku korekty: w 2-gim akapicie jest „and the shape” zamiast „and to shape”)

Przejrzystość

79% testowanych użytkowników przeglądało nową stronę, a tylko kilku czytało ją słowo po słowie.

Użytkownicy przeglądają tekst, wybierając słowa/elementy kluczowe.

rys. 45/115 (przykład o ile lepiej w % odbierano kolejne wersje tej samej INFORMACJI)

Przejrzystość strony można poprawić poprzez:

• Nadawanie artykułowi odpowiedniej struktury poprzez użycie kilku poziomów nagłówków.

• Stosowanie nagłówków które coś znaczą a nie tylko dobrze brzmią. Po przeczytania nagłówka powinno być jasne o czym traktuje dana część tekstu.

• Stosowanie list wypunktowanych w celu rozbicia jednorodnego tekstu.

• Pogrubianie, pochylanie lub kolorowanie najważniejszych słów aby były łatwo zauważalne.

• Stosowanie takiej kolorystyki tekstu która nie będzie się „kłóciła” ze standardową kolorystyką odnośników.

rys. 46/117 (niekonsekwencja w wyróżnianiu: wyróżnione są tylko 3 typy ubezpieczenia, 4 typ „Liability Insurance Supplement” jest pominiety, pominięto także zaznaczenie faktu , iż jest to tylko oferta dla obszaru USA)

rys. 47/119 (odnośniki będące numerami notebooków nic nie mówią większości użytkowników, opis pod odnośnikami to pseudo-kategoryzacja, która także nie wnosi żadnej informacji)

ry.48/120 (prosty diagram czasowy tu:Timeline - pokazują użytkownikowi w przejrzysty strumień informacji i jej strukturę)

Prosty język

Stronę powinna otwierać jej konkluzja. Na samej górze powinny znajdować się najistotniejsze informacje - należy stosować zasadę ODWRÓCONEJ PIRAMIDY.

• Dla każdej idei powinien być oddzielny akapit.

• Stosować należy proste składniowo struktury.

• Ograniczyć stosowanie metafor - mogą być zrozumiane dosłownie.

• Humor stosować z rozwagą - strona jest czytana pobieżnie stąd humor kontekstowy może być opatrznie odebrany.

rys. 49 (przykład bełkotliwego komunikaty o przeciążeniu serwera rezerwacji biletów - komunikaty powinny być konstruktywne i wskazujące jednoznacznie kierunek dalszych działań)

Dzielenie stron

Znowu zasada Odwróconej Piramidy:

należy rozpocząć od wniosków a następnie je rozwijać i poprzez odnośniki uszczegóławiać.

NIE należy pisać w sposób linearny - jeżeli jednak prezentujemy taki tekst, nie powinien on być podzielony na kilka stron.

rys. 50/123 (na dole zbyt długiego artykułu jest odnośnik „continued” - z którego absolutnie nie wynika co będzie „po drugiej stronie kliknięcia”)

rys. 51/126 (2154 piksele=4*PgDn); 52/127; (1516); 53/127 (1450); 54/128 (793)

rys. 55/129 (fatalny przykład przekopiowania „żywcem” artykułu z gazety bez żadnej obróbki)

rys. 56/130 i rys. 57/131 (poprawione podejście do prezentacji tego samego artykułu)

rys. 57/129 (kolejny przykład 100% przeniesienia artykułu z gazety a na dodatek podzielnie go na 2 strony)

Tytuły stron

Są wykorzystywane jako główne referencje do strony w wynikach wyszukiwania.

Są dodawane do menu „Ulubione”. Stąd muszą być:

• perłą klarowności

• mikrotreścią całej strony

• sam w sobie coś musi znaczyć i wywoływać określone skojarzenia

• nie może być zbyt rozwlekły max. 40 do 60 znaków

• każda strona witryny musi mieć SWÓJ tytuł a nie jeden wspólny tytuł dla całej witryny

• najważniejsze słowa powinny być na początku tytułu

• tytuły powinny mieć naturę sloganów z tablicy ogłoszeniowej, nie muszą być koniecznie poprawnymi gramatycznie zdaniami

Pisanie nagłówków

• Tekst nagłówka musi być zrozumiały sam w sobie i mieć sens - tak jakby pozostała treść była niedostępna.

• Jego treść musi być abstraktem treści do której wskazuje.

• Treść nie może być oszustwem - wabieniem do strony na której w rzeczywistości jest coś innego.

• Musi przemawiać do zainteresowań użytkownika.

• Powinien być napisany prostym językiem, bez gry słów, treści „mądrych” lub „milutkich”.

• Pierwsze słowo powinno być najważniejsze, a kilka pierwszych nieść jak najwięcej informacji.

• Kolejne nagłówki nie powinny rozpoczynać się tym samym słowem

Czytelność

Wszelkie parametry witryny nie mają znaczenia jeżeli użytkownik NIE MOŻE przeczytać tekstu.

• Kolor tekstu musi kontrastować z kolorem tła. Najlepszy kontrast to „czarne na białym”.

• Należy brać poprawkę na kolory nie rozróżniane przez daltonistów.

• Najlepsze jest tło gładkie. Ewentualnie stosowany wzór w tle powinien być bardzo delikatny - grafika tła utrudnia oku czytanie.

• Rozmiar czcionki nie może utrudniać czytania.

• Tekst powinien być nieruchomy - animowany bądź mrugający tekst czyta się znacznie trudniej.

• Cały tekst powinien być wyrównany (do lewej) - oko musi mieć stały punkt odniesienia. Wyjątkiem powinny być postrzępione teksty wyśrodkowane.

• Mały (<10pkt) tekst będzie bardziej czytelny gdy zastosujemy czcionkę bezszeryfową (np. Verdana)

• TEKST NAPISANY TYLKO WIELKIMI LITERAMI CZYTANY JEST OKOŁO 10% WOLNIEJ - NALEŻY WIĘC UNIKAĆ TAKIEGO STYLU PISANIA

rys. 58/137 (tekst o zbyt niskim kontraście (srebrny na białym tle) i na dodatek pochylony a miejscami zbyt mały aby był czytelny)

rys. 59/138 (tło dominuje nad tekstem nie jest wystarczająco subtelna, brak dostatecznego kontrastu - przykład na to co widać gdy piszemy „biało na czarnym” - ten typ kontrastu jest znacznie gorszy od standardowego „czarno na białym”)

Dokumentacja elektroniczna

Niedopuszczalne jest publikowanie witryny, która wymaga korzystania z instrukcji obsługi.

Wyjątkiem mogą być aplikacje intranetowe i extranetowe.

Ludzie dobrowolnie nie czytają dokumentacji - robią to tylko wtedy gdy występują jakieś problemy.

Strony dokumentacji powinny:

• mieć moduł przeszukiwania

• obfitować w przykłady

• być zorientowane na zadanie - wyjaśniać krok po kroku co zrobić aby zrealizować dane zadanie

• wszystkie trudne pojęcia powinny być odnośnikami do słownika

• być napisane zwięźle i językiem akceptowanym w danej branży

rys. 60/140 (pod polem wyszukiwania proponowana jest pomoc doraźna pokazująca możliwą składnię zapytania, niestety przycisk Help jest oddalony od tego miejsca a powinien być jak najbliżej)

Multimedia

Strona nie koniecznie musi być równie różnorodna w swej formie jak Disneyland.

rys. 61/143 (dobry przykład - obok możliwości pobrania klipu istnieje informacja o jego ciężarze i co ważniejsze krótkie jego streszczenie - to ostatnie znacznie poprawiło opinie o stronie, sama informacja o wielkości pliku nie wystarczy jeżeli nie wiadomo co jest „po drugiej stronie”)

Przy projektowaniu multimediów działających po stronie klienta trzeba pamiętać o krytycznej wartości czasu reakcji programu = 1 sekunda, powyżej którego użytkownik traci kontrolę i koncentrację.

Czas odpowiedzi multimediów

Dla wszystkich stron lub plików na które wskazują odnośniki, a których czas ładowania jest większy niż 10 sek. należy:

• za odnośnikiem należy umieścić w nawiasach wielkość i format pliku

• podgląd statyczny pliku multimedialnego

• streszczenie zawartości pliku multimedialnego

• software wymagany do odtworzenia pliku i jeżeli jest on darmowy - odnośnik na stronę gdzie software ten można pobrać (wraz z informacjami j.w.)

• dać alternatywę dla tych którzy nie chcą lub nie mogą oglądać multimediów - w postaci statycznych stron HTML zwierających zrzuty z ekranu pliku multimedialnego

Rysunki i zdjęcia

Ilustracja jest warta tysiąc słów =>

Ilustracja jest równoważna czasowi pobierania dwóch tysięcy słów.

Strony wyższego poziomu powinny maksymalnie ograniczać liczbę ilustracji - na tych stronach użytkownik dopiero zdobywa motywację do oglądania serwisu.

Na stronach prezentujących merytoryczne szczegóły ofert - ilustracja bywa niezastąpiona.

rys. 62/145 (przegląd modeli po prawej stronie nie informuje o niczym - wymusza załadowanie strony aby dowiedzieć się czegokolwiek o danym modelu, lepsze byłyby krótkie notki parametryczno-cenowe niż lista zdjęć za którą nie idzie żadna informacja)

Zmniejszanie grafiki

Można stosować następujące metody:

• zmiana rozdzielczości

• skalowanie (zmiana rozmiaru)

• kadrowanie (wycinanie jakiegoś obszaru)

rys. 62/147 (góra - powiększona miniaturka o niskiej rozdzielczości; dół - oryginał o docelowej rozdzielczości (napisy sugerują istnienie odnośników których niestety nie ma))

rys. 63/148 (oryginał)

rys. 64/148 (efekt kadrowania i efekt skalowania - oba nie najlepsze)

rys. 65/150 (efekt połączonego skalowania i kadrowania obrazka)

rys. 66/151 (historyjka obrazkowa wersja 1 - zbyt duże (ciężkie ilustacje), wymaga pionowego przewijania i czytania wielu tekstów)

rys. 67/152 (ta sama ale na jednej stronie - rysunki mniejsze (szybciej się ładuje) i tylko jeden tekst - dzięki czemu można ogarnąć całą historię jednym rzutem oka).

40

---