Omówienie zasad tworzenia interfejsu stron WWW Tworzenie Portali Biznesowych - PJWSTK Jacek Rytel, Rafał Więckowski grudzień 2005

Funkcjonalność i spójność Projektując stronę www trzeba przede wszystkim wziąć pod uwagę jej funkcjonalność (ergonomię). Definicja użytecznej witryny: „Prostota z jak najmniejszą liczbą dodatków, jasnym układem informacji i dopasowanymi narzędziami nawigacji” Jakub Nielsen

Funkcjonalność i spójność (2) Podstrony serwisu powinny być spójne Poszczególne elementy należy tak dobrać, aby użytkownik serwisu nie miał wątpliwości, czy nadal jest na tej samej stronie czy przeszedł już do innego serwisu

Funkcjonalność i spójność (3) We wzorcowo zaprojektowanej witrynie główna cześć strony zajmuje około 80% ekranu, pozostały obszar przeznaczony jest dla elementów nawigacyjnych W praktyce trudno osiągnąć taki podział (np. problem gdzie umieszczać reklamy) dlatego nie będzie źle gdy uda się zasadniczą cześć strony zmieścić na 2/3 ekranu Wyjątek mogą stanowić strony główne

Funkcjonalność i spójność (4) gdzie kierujemy wzrok patrząc na witrynę W pierwszej kolejności użytkownicy kierują wzrok ku centrum strony. Jeżeli treść ich nie zainteresuje, przenoszą wzrok na obszar nawigacyjny w celu kontynuowania swoich poszukiwań (lewa kolumna).

Dobra nawigacja System nawigacji powinien być prosty i intuicyjny. Nawigacja ma za zadanie dostarczenie odwiedzającemu informacji, które pozwolą odpowiedzieć na pytania: Gdzie jestem? Gdzie byłem? Dokąd mogę pójść?

Dobra nawigacja (2) Projektując właściwą nawigację witryny internetowej należy pamiętać o: umieszczeniu loga firmy lub innego znaku identyfikującego witrynę, będącego jednocześnie linkiem do strony głównej umieszczeniu ścieżki informującej, jakie miejsce zajmuje dana podstrona w strukturze serwisu, np.: Strona główna | Download | Aplikacje ftp

Dobra nawigacja (3) Projektując właściwą nawigację witryny internetowej należy pamiętać o: umieszczeniu na każdej stronie odnośniku do poprzedniej strony zalecane jest (o ile to możliwe) podanie nazwy strony docelowej, np. „powrót do listy produktów”

Dobra nawigacja (4) W przypadku rozbudowanych serwisów wygodne dla użytkownika jest wprowadzenie dwóch rodzajów nawigacji: wertykalnej – umożliwiającej szybkie przeskoczenie na wyższe poziomy witryny horyzontalnej – dającej możliwość wyboru przejścia do stron o podobnej tematyce

Dobra nawigacja (5) Standardem stały się mapy witryn pozwalające na szybki wgląd w jej strukturę. Należy jednak pamiętać o bieżącej aktualizacji „schematu” serwisu, ew. generować go dynamicznie

Dobra nawigacja (6) dobrze zaprojektowana nawigacja Wszystkie elementy prawidłowo umieszczone: przejrzysta lista opcji menu (po lewej), odpowiednio wyeksponowane logo firmy, informacje o nowościach, moduł wyszukiwania (u góry)

Dobra nawigacja (7) źle zaprojektowana nawigacja Nieprawidłowa lokalizacja menu witryny (prawy górny róg). Opcje menu stanowią ikony, które nie zawsze kojarzą się z jej nazwą. Na stronie panuje duży chaos, spowodowany nadmiarem elementów graficznych, kilkoma typami czcionek i długimi odnośnikami.

Odnośniki Odsyłacz internetowy powinien być tak sformułowany, aby internauta nie miał wątpliwości, dokąd on prowadzi. Tekst nie powinien być długi. Powszechnie używa się dla odsysłaczy tekstu podkreślonego jako, oprócz koloru, dodatkowego wyróżnika. Wyróżniając zwykły tekst i nagłówki nie należy używać kolorów zarezerwowanych dla odnośników i odwrotnie.

Odnośniki (2) Przykład zamiast : Aby zapoznać się z najnowszymi aparatami cyfrowymi , kliknij tutaj lepiej posłużyć się frazą: Najnowsze aparaty cyfrowe

Tekst: formatowanie, odstępy, kolory Tekst powinien być przede wszystkim przejrzysty. Zwiększenie jego czytelności uzyskamy za pomocą krótkich akapitów, różnych stylów nagłówków oraz wypunktowań. Ważne słowa wyróżnia się czcionką pogrubioną lub pochyłą. Zaleca się wyrównywanie do lewej bądź justowanie.

Tekst: formatowanie, odstępy, kolory (2) Tekst nie powinien być wyświetlany na całej szerokości ekranu. Najłatwiej się czyta, gdy jeden wiersz zawiera nie więcej niż 10 słów. Kolor tekstu powinien kontrastować z kolorem tła. Najbardziej czytelny jest czarny tekst na białym tle. Tło powinno być gładkie, ponieważ grafika przeszkadza w rozpoznawaniu linii znaków oraz kształtu wyrazów.

Tekst: formatowanie, odstępy, kolory (3) Użytkownik nie czyta stron www linijka po linijce, a skanuje stronę wzrokiem. Dlatego należy dzielić zawartość witryny na kilka części, a każdą z nich opatrzyć nagłówkiem. Warto zostawić pewne ilości pustych przestrzeni pomiędzy fragmentami tekstu. Dokument podzielony na części czyta się dużo łatwiej niż tekst napisany jednym ciągiem. W przypadku, gdy strona jest długa zaleca się zamieszczenie odnośnika umożliwiającego powrót do góry ekranu.

Tekst: formatowanie, odstępy, kolory (4) dobrze sformatowany tekst na stronie Tekst jest przejrzysty dzięki podziałowi na akapity, nagłówkom i zachowaniu odpowiedniej ilości wolnej przestrzeni. Zastosowany właściwy format czcionki (bezszeryfowa, prawidłowa wysokość i kolor). Nie ma problemu z zauważeniem odnośników.

Tekst: formatowanie, odstępy, kolory (5) źle sformatowany tekst na stronie Pogrubiona i mała czcionka, mocno zbity tekst, brak nagłówków dla akapitów, brak wyróżnień i wypunktowania, zbyt mały kontrast między tłem a tekstem powodują, że po kilku linijkach traci się ochotę na czytanie.

Właściwy dobór czcionek Czcionki dzielimy na szeryfowe (np. Times New Roman) lepsza do stosowania w papierowych dokumentach zastosowanie szeryfów ułatwia przenoszenie wzroku z jednego znaku na drugi bezszeryfowe (np. Verdana) lepsze do tekstów czytanych ze ekranów monitora małe czcionki bezszeryfowe są bardziej czytelne aniżeli szeryfowe

Właściwy dobór czcionek (2) Na czytelność duży wpływ ma rozmiar czcionki. Do tekstu podstawowego należy stosować czcionkę nie mniejszą niż 10 punktów. Ważne jest unikanie stosowania w tekście wyłącznie wersalików. Tekst pisany wielkimi literami jest czytany o około 10% wolniej. Dla tekstu dokumentu i dla nagłówków należy używać różnych krojów czcionek.

Grafika, ilustracje i animacje Grafika i multimedia winny być umieszczane na stronie w przypadku gdy pozwalają użytkownikowi lepiej zrozumieć prezentowane informacje lub poprawiają estetykę strony. Animacji należy używać oszczędnie. Jeżeli umieszczamy je na stronie to nie powinny być zapętlone w nieskończoność. Umieszczając grafikę na stronie należy zwrócić uwagę aby nie powodowała ona znacznego wzrostu długości czasu ładowania strony

Grafika, ilustracje i animacje (2) dobrze użyta grafika na stronie Zaprezentowany schemat w formie pliku GIF z pewnością ułatwia zrozumienie struktury produktu opisywanego na prezentowanej stronie, a jednocześnie pasuje do jego stylu.

Grafika, ilustracje i animacje (3) źle użyta grafika na stronie Spoglądając na tę stronę trudno zauważyć, gdzie kończą się reklamy a zaczynają nagłówki wiadomości. Zastosowanie barwnego tła, kolorowych czcionek i ozdobnej ramki dla głównej wiadomości powoduje, że traktowana jest ona jako jedna z reklam

Strona główna Strona główna jest wizytówką witryny. Użytkownik musi na niej znaleźć odpowiedź na pytania: Jaki rodzaj informacji prezentowany jest w ramach witryny? Jakie treści ona oferuje?

Strona główna (2) Strona główna powinna zawierać: dobrze wyeksponowaną nazwę logo firmy katalog działów krótkie streszczenie najważniejszych informacji moduł wyszukiwania

Strona główna (3) Podstawowe zadania strony głównej: zapoznanie użytkownika z jej tematyką zachęcenie do poznania dalszych stron umożliwienie dalszych poszukiwań przez prosty i intuicyjny schemat nawigacyjny

Czas ładowania strony Krótki czas odpowiedzi jest najważniejszym kryterium oceny projektu internetowego. Badania wskazują, że 10 sekund to maksymalny czas oczekiwania internauty na otwarcie witryny bez rozproszenia jego uwagi.

Czas ładowania strony (2) W czasach gdy wciąż liczną grupę internautów stanowią modemowcy optymalną wielkością strony, zapewniającą osiągnięcie satysfakcjonującego czasu pobierania, jest około 40KB. Uzyskanie takiej wielkości jest niewątpliwie dużym wyzwaniem. Należy starać się aby „waga strony” przynajmniej zbliżała się do tej wielkości.

Czas ładowania strony (3) Jeżeli umieszczamy na stronie pliki do pobrania, koniecznie należy podać informację o ich rozmiarze. Pozwoli to oszacować czas niezbędny do ich pobrania.

Produkty komercyjne O ważności nawigacji w produktach komercyjnych świadczą nakłady finansowe jakie ponoszą większe korporacje aby ich produkty były rozpoznawalne i intuicyjne w nawigacji. Całe rzesze analityków przeprowadzają badania nad czytelnością interfejsu na stronach korporacyjnych czy portalach biznesowych.

Produkty komercyjne(2) Korporacje chcą osiągnąć: Czytelność interfejsu Rozpoznawalność ich produktu Łatwość w nawigacji…. …. i wiele innych nieznanych szaremu śmiertelnikowi celów …. Przykład z prezentacji korporacji Oracle na temat jednego z produktów:

Dziękujemy za uwagę! Jacek Rytel Rafał Więckowski