ZASADY PROJEKTOWANIA STRON WWW

1
ZASADY PROJEKTOWANIA STRON WWW
2
Glówne cechy dobrej witryny

• Przejrzystosc
• Szybkie dzialanie
• Latwa obsluga

3
Dwa zasadnicze rodzaje projektów

• Projekty witryn bedacych zródlem konkretnych
  informacji (oparte gl. na informacji tekstowej)
• Projekt jako zródlo artystycznych doznan autora,
  wyraz swobody dzialan twórczych (tworzone glównie
  w oparciu o obrazy graficzne)
• Wiekszosc witryn laczy (w róznych proporcjach)
  te dwie cechy

4
Problematyka uzytecznosci witryn WWW
5
Glówne czynniki wplywajace na uzytkowosc strony

• Celowosc tworzenia danej witryny
• Sprawnosc dzialania witryny
• Zrozumialosc witryny (zarówno tresci jak i zasad
  funkcjonowania i nawigacji)

6
Najczestsze problemy uzytecznosci witryn
internetowych

• Korzystanie z technologii Flash (koniecznosc
  pobierania i instalowania pluginów)
• Animacje odtwarzane w cyklu ciaglym
  (dekoncentruja uzytkownika i rozpraszaja jego
  uwage)

7

• Ograniczenie autonomii uzytkownika poprzez
• zmiane sposobu funkcjonowania przycisków (np.
  Back).
• przekierowania do miejsc innych, niz jest to
  zamiarem uzytkownika.
• stosowanie wyskakujacych okienek.
• stosowanie okien pelnoekranowych (pozbawienie
  uzytkownika paska nawigacji, paska adresowego,
  listy Ulubionych itp..

8

• Zbyt dlugi czas ladowania
• Reklamy w witrynach internetowych
• Zle rozplanowana nawigacja
• brak przycisku powrót do strony glównej
• strona glówna nie zawiera wszystkich istotnych
  dla uzytkownika linków
• Uzywanie zwrotów w rodzaju kliknij tutaj do
  przekierowania uzytkownika np. do innej strony

9
Rola projektanta witryny

• Ustanawia kanal komunikacyjny pomiedzy swoim
  klientem (wlascicielem serwisu) a uzytkownikiem
• Musi zapewnic uzytkownikowi poczucie pelnej
  kontroli nad witryna
• Musi wzbudzic w uzytkowniku pozytywne uczucia
  (np. poprzez uzycie odpowiednich kolorów,
  dzwieków itp..)

10
Definicja wiadomosci

• Wiadomosc w aspekcie projektowania slowo
  wiadomosc jest pojeciem abstrakcyjnym,
  oznaczajacym nie tylko informacje tekstowa, lecz
  równiez okreslenie nastroju i atmosfery, jaka
  powinien odczuc uzytkownik witryny
• Dobry projekt powstaje wówczas, gdy wrazenie
  uzytkownika jest identyczne ze stanowiskiem
  wlasciciela witryny

11
Definicja publicznosci

• Do kogo adresowany jest projekt
• Wiek odbiorcy
• Zainteresowania odbiorcy
• Wymagania odbiorcy, jego wlasne standardy jakosci
• Jak czesto dany odbiorca korzysta z Internetu,
  jakiego uzywa sprzetu itp.

12
Okreslenie struktury informacji

• Konfrontacja zagadnien najwazniejszych dla
  zleceniodawcy, a zagadnien najistotniejszych z
  punktu widzenia odbiorcy
• Skoncentrowanie sie na wiadomosci
  najistotniejszej (nie mozna klasc jednakowego
  nacisku na wszystkie tematy)

13
Projektowanie wstepne

• Strona glówna i nawigacja projekt powinien miec
  konstrukcje pozwalajaca na latwe dodawanie nowych
  elementów, zmiane ich kolejnosci itp.
• Spis tresci powinien umozliwiac wprowadzanie
  zmian
• Najwazniejsze informacje umieszcza sie na górze
  strony, by byly widoczne w calosci, bez
  koniecznosci przewijania

14

• Uzywamy krótkich zdan, wyrózniajac wazne zwroty i
  slowa
• Odwracamy logike tekstu- wnioski umieszczamy na
  poczatku
• (czytanie na ekranie sprawia wieksza trudnosc
  niz czytanie na papierze, stad tendencja
  uzytkowników do przeslizgiwania sie wzrokiem po
  tekscie w poszukiwaniu informacji)

15

• Dlugie teksty nalezy dzielic na krótsze i
  umieszczac je w miare mozliwosci na osobnych
  stronach

16
Sklad tekstu

• Dlugi tekst nalezy podzielic na krótkie (ok. 10
  wersów) akapity, wyrózniajac je naglówkami (tekst
  na ekranie czyta sie wolniej)
• Stosujemy nie wiecej niz 2 3 rózne czcionki,
  definiujac jednoczesnie np. 2 wielkosci (przy
  zastosowaniu wiekszej ilosci czcionek projekt
  wyglada niespójnie)

17

• Odnosniki tekstowe (linki)- pozostawiamy ich
  typowy wyglad (kolor ciemnoniebieski, a po
  przeczytaniu- fioletowy)
• Unikamy wyrózniania poprzez podkreslenie innych
  czesci tekstu niz linki
• Unikamy tworzenia odnosników z calych zdan

18

• Unikamy czcionek szeryfowych

19

• Unikamy czcionek dekoracyjnych i kursyw

20

• Unikamy wysrodkowywania tekstu oraz wyrównywania
  do prawej strony

21

• Kolory tla zblizone do koloru tekstu lub
  nadmiernie z nim kontrastujace zmniejszaja
  czytelnosc tekstu

22

• Ciemny tekst na bialym tle jest bardziej czytelny
  niz bialy tekst na ciemnym tle