Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00144 009738 10452013 na godz. na dobę w sumie
Funkcjonalność stron internetowych - książka
Funkcjonalność stron internetowych - książka
Autor: Liczba stron: 256
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-731-X Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook, audiobook).
Dobra strona internetowa to strona funkcjonalna. Wśród zagadnień związanych z funkcjonalnością stron internetowych zwykle wymienia się dwa podstawowe: edukację ludzi pod kątem tworzenia bardziej funkcjonalnych stron oraz rozwijanie umiejętności oceny ich funkcjonalności.

Zadaniem tej książki jest zebranie i uporządkowanie podstaw teoretycznych dotyczących funkcjonalności stron internetowych. Dotychczas osoba zainteresowana tym tematem musiała czerpać wiedzę z różnych artykułów i podręczników do testowania funkcjonalności, dołączonych do oprogramowania. Celem tej książki jest określenie metodologii, która umożliwi stosowanie zasad funkcjonalności podczas projektowania stron internetowych.

Mam nadzieję, że nauka o funkcjonalności stron internetowych wyda Ci się interesująca i będzie dla Ciebie wyzwaniem.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Funkcjonalno(cid:156)(cid:230) stron internetowych Autor: Mark Perrow T‡umaczenie: Micha‡ Szolc ISBN: 83-7197-731-X Tytu‡ orygina‡u: Format: B5, stron: 256 Zawiera CD-ROM Web Site Usability Handbook Dobra strona internetowa to strona funkcjonalna. W(cid:156)r(cid:243)d zagadnieæ zwi„zanych z(cid:160) funkcjonalno(cid:156)ci„ stron internetowych zwykle wymienia siŒ dwa podstawowe: edukacjŒ ludzi pod k„tem tworzenia bardziej funkcjonalnych stron oraz rozwijanie umiejŒtno(cid:156)ci oceny ich funkcjonalno(cid:156)ci. Zadaniem tej ksi„¿ki jest zebranie i uporz„dkowanie podstaw teoretycznych dotycz„cych funkcjonalno(cid:156)ci stron internetowych. Dotychczas osoba zainteresowana tym tematem musia‡a czerpa(cid:230) wiedzŒ z r(cid:243)¿nych artyku‡(cid:243)w i podrŒcznik(cid:243)w do testowania funkcjonalno(cid:156)ci, do‡„czonych do oprogramowania. Celem tej ksi„¿ki jest okre(cid:156)lenie metodologii, kt(cid:243)ra umo¿liwi stosowanie zasad funkcjonalno(cid:156)ci podczas projektowania stron internetowych. Mam nadziejŒ, ¿e nauka o funkcjonalno(cid:156)ci stron internetowych wyda Ci siŒ interesuj„ca i bŒdzie dla Ciebie wyzwaniem. IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl O książce ......................................................................................... 9 Przedmowa ..................................................................................... 11 Rozdział 1. Wprowadzenie ................................................................................ 13 Czym jest funkcjonalność? ...................................................f..........................................13 Czym nie jest funkcjonalność...................................................f......................................17 Trochę historii...................................................f...................................................f...........19 Trochę żargonu ...................................................f...................................................f.........20 Czynniki ludzkie...................................................f...................................................f.......20 Dlaczego funkcjonalność? ...................................................f...........................................22 Jak coś staje się bezużyteczne?...................................................f....................................23 To, czego potrzebujesz, by rozpocząć swoją przygodę z funkcjonalnością stron internetowych ...................................................f...................25 Przekazywanie innym wiedzy o funkcjonalności...................................................f........28 Podsumowanie...................................................f...................................................f..........30 Ćwiczenia praktyczne...................................................f..................................................31 Tematy do dyskusji...................................................f...................................................f...31 Rozdział 2. Projektowanie zorientowane na użytkownika................................... 33 Czym jest projektowanie zorientowane na użytkownika?..............................................33 Użytkownicy nie zawsze wiedzą, czego chcą ...................................................f.............36 Cykliczność prac nad funkcjonalnością...................................................f.......................37 Populacja a próba...................................................f...................................................f......39 Poznawanie użytkowników ...................................................f.........................................43 Ciągłe modyfikowanie...................................................f.................................................48 Podsumowanie...................................................f...................................................f..........51 Ćwiczenia praktyczne...................................................f..................................................51 Tematy do dyskusji...................................................f...................................................f...52 Rozdział 3. Przybornik funkcjonalności .............................................................. 53 Do zapewnienia funkcjonalności potrzeba wielu narzędzi.............................................53 Przybornik...................................................f...................................................f.................56 Podsumowanie rozdziału ...................................................f.............................................73 Ćwiczenia praktyczne...................................................f..................................................73 Tematy do dyskusji...................................................f...................................................f...73 Rozdział 4. Czynniki ludzkie .............................................................................. 75 Od kuchni...................................................f...................................................f..................75 Czym jest psychologia czynników ludzkich?...................................................f..............76 6 Funkcjonalność stron internetowych Trochę o historii psychologii czynników ludzkich...................................................f......76 Czym zajmują się specjaliści ds. czynników ludzkich? .................................................76 Czego uczą się specjaliści ds. czynników ludzkich? ...................................................f...77 Gdzie pracują specjaliści ds. czynników ludzkich?...................................................f.....77 Złudzenia optyczne...................................................f...................................................f...83 Słuch ...................................................f...................................................f.........................85 Czucie i postrzeganie...................................................f...................................................f85 Ludzka pamięć a Sieć ...................................................f..................................................87 Strony pełne tekstu ...................................................f...................................................f...94 Przyspieszacze w Sieci ...................................................f................................................96 Podsumowanie rozdziału ...................................................f.............................................97 Ćwiczenia praktyczne...................................................f..................................................97 Tematy do dyskusji...................................................f...................................................f...98 Rozdział 5. Wskazówki dla projektantów ........................................................... 99 Fakty ...................................................f...................................................f.........................99 Nawigacja ...................................................f...................................................f...............105 Inne użyteczne wskazówki ...................................................f........................................108 Podsumowanie rozdziału ...................................................f...........................................125 Ćwiczenia praktyczne...................................................f................................................125 Tematy do dyskusji...................................................f...................................................f.126 Rozdział 6. Ocena heurystyczna ...................................................................... 127 Czym jest heurystyka?...................................................f...............................................127 Dziesięć zasad heurystyki funkcjonalności ...................................................f...............128 Dodatkowe zasady dotyczące Sieci ...................................................f...........................137 Metodologia oceny heurystycznej ...................................................f.............................142 Podsumowanie rozdziału ...................................................f...........................................146 Ćwiczenia praktyczne...................................................f................................................147 Tematy do dyskusji...................................................f...................................................f.147 Rozdział 7. Tworzenie laboratorium funkcjonalności........................................ 149 Zakładanie laboratorium...................................................f............................................149 Wskazówki ogólne...................................................f...................................................f..150 Układ prosty...................................................f...................................................f............151 Prosty układ laboratorium wyposażonego w sprzęt wideo...........................................152 Laboratorium z pokojem obserwacyjnym ...................................................f.................156 Pomieszczenie grupy fokusowej...................................................f................................156 Przegląd wyposażenia laboratorium ...................................................f..........................157 Wynagradzanie uczestników ...................................................f.....................................164 Żadnych zegarów w laboratorium!...................................................f............................165 Podsumowanie rozdziału ...................................................f...........................................165 Ćwiczenia praktyczne...................................................f................................................165 Tematy do dyskusji...................................................f...................................................f.166 Rozdział 8. Testowanie funkcjonalności .......................................................... 167 Coś więcej niż tylko kolejne narzędzie w przyborniku ................................................167 Projekt klasycznego badania eksperymentalnego ...................................................f.....168 Projektowanie zadań testowych...................................................f.................................175 Potencjalne trudności...................................................f.................................................176 Wykonywanie planu ...................................................f..................................................178 Podsumowanie rozdziału ...................................................f...........................................185 Ćwiczenia praktyczne...................................................f................................................185 Tematy do dyskusji...................................................f...................................................f.185 Spis treści 7 Rozdział 9. Dostępność w Sieci ...................................................................... 187 Funkcjonalność a dostępność ...................................................f....................................187 Wskazówki W3C dotyczące dostępności w Sieci ...................................................f.....188 XML a dostępność w Sieci ...................................................f........................................200 CSS2 i nie tylko ...................................................f...................................................f......204 Podsumowanie rozdziału ...................................................f...........................................204 Ćwiczenia praktyczne...................................................f................................................205 Tematy do dyskusji...................................................f...................................................f.205 Rozdział 10. Łączenie wszystkich elementów .................................................... 207 Tworzenie ogólnego planu ...................................................f........................................207 Firma i jej strona...................................................f...................................................f.....207 Zespół ...................................................f...................................................f.....................208 Wdrożenie planu...................................................f...................................................f.....209 Wskazówki końcowe ...................................................f.................................................214 Podsumowanie rozdziału ...................................................f...........................................216 Ćwiczenia praktyczne...................................................f................................................216 Tematy do dyskusji...................................................f...................................................f.216 Rozdział 11. Przekształcanie danych w informacje............................................ 217 Po co uczyć się statystyki? ...................................................f........................................217 Dane przede wszystkim ...................................................f.............................................218 Wszystko w swoim czasie ...................................................f.........................................219 Miary koncentracji...................................................f...................................................f..221 Koncepcje projektowania badań...................................................f................................225 Wnioski...................................................f...................................................f...................227 Analiza pliku logowania serwera...................................................f...............................228 Podsumowanie rozdziału ...................................................f...........................................229 Ćwiczenia praktyczne...................................................f................................................231 Tematy do dyskusji...................................................f...................................................f.231 Dodatek A Test funkcjonalności strony firmowej korporacji Xolax................... 233 Wstęp ...................................................f...................................................f......................233 Cel...................................................f...................................................f...........................233 Zagadnienia problemowe...................................................f...........................................234 Profile użytkownika...................................................f...................................................f234 Metodologia...................................................f...................................................f............237 Środowisko testowe i wymagania sprzętowe ...................................................f............238 Sposoby oceny ...................................................f...................................................f........239 Lista zadań ...................................................f...................................................f..............239 Raport końcowy...................................................f...................................................f......241 Część A...................................................f...................................................f...................244 Część B ...................................................f...................................................f...................246 Część C ...................................................f...................................................f...................247 Część D...................................................f...................................................f...................248 Dodatek B O CD-ROM-ie................................................................................. 251 Skorowidz..................................................................................... 253 Rozdział 5. Decydent: osoba odpowiedzialna za podejmowanie decyozji kluczowych z punktu widzenia firmy i jej pracowników. Fakty Najzabawniejszą częścią książek takich jak ta są rozdziały poświęcone tajnikom pro- jektowania, które uczynią Twoją stronę lepszą. Pozostała część książki poświęcona będzie sposobom analizowania już zaprojektowanych stron. Natomiast w tym roz- dziale pokażę Ci, jak tworzyć nowe projekty. Mimo iż projektowanie nie jest głów- nym tematem tej książki, to dobry projekt jest jednym z warunków wysokiego po- ziomu funkcjonalności. W tym rozdziale znajdziesz wieles wskazówek zwiększających funkcjonalność strony internetowej. Są to bardzo racjonalne wskazówki, niestety ludzie wciąż je ignorują. Musisz pamiętać, że nie znajdziesz tu rozwiązania wszystkich problemów związa- nych z funkcjonalnością stron internetowych. Przetestowanie Twojej strony pod ką- tem opisanych tu zasad nie wystarczy, byś mógł zrezygnować z innych działań. To są tylko wskazówki. Dobra strona internetowa to wynik świadomych decyzji podejmo- wanych przez grupę osób, opartych na ich wspólnych doświadczeniach. Podejście do badania funkcjonalności stron internetowych jak do gotowania z książką kucharską w ręce jest równie rozsądne jak takie samo podejścise do operacji mózgu. Lista podanych zasad nie jest w żadnym wypadku zamknięta i powinna być dla Ciebie podstawą do opracowania własnego zestawu wskazówek. Gdy znalazłem stronę będącą przykładem omawianych zasad, zamieściłem jej zrzut ekranowy. Jak już zaznaczyłem na samym początku książki, fakt załączenia jakiejkolwiek ze stron nie ma na celu ani jej wychwalania ani też piętnowania. Strony te dostępsne są dla wszystkich. 100 Funkcjonalność stron internetowych Nie twórz uliczek bez powrotu Staraj się nie tworzyć stron, z których można się wydostać jedynie za pomocą przyci- sku Cofnij przeglądarki. Upewnij się, że każda strona, którą stworzyłeś, pozwoli na przejście do strony głównej oraz jeden poziom wyżejs. Nazewnictwo kategorii Tworząc linki lub nagłówki, pamiętaj o nazwach związanych z czynnościami wyko- nywanymi przez użytkownika, unikaj zaś nazw pochodzących od procesów zacho- dzących wewnątrz strony. Na przykład zamiast linku „przetwarzanie” użyj wyrażenia „opuść stronę”, ponieważ użytkownik szybciej zrozumie znaczenie takiej etykiety. Wskazówka ta odnosi się do zasady heurystyki brzmiącej: „Używaj naturalnego języka użytkownika” (zobacz rysunki 5.1 i 5.2). Rysunek 5.1. Oto przykład strony opisanej językiem użytkownika. Po co odwiedzamy strony z akcesoriami dla zwierząt? Najpewniej po to, by je zakupić i dlatego też projektanci opisali poruszanie się po stronie, używając nazw czynności, które użytkownik chciałby wykonać Spójność elementów Upewnij się, że wszystkie elementy Twojej strony mają pewne cechy wspólne, umożliwiające użytkownikowi rozpoznanie, na jakiej stronie się znajduje. Również sposób poruszania się po stronie powinien być spójny. Przejście od nagłówków z lewej części strony do hiperłączy w postaci dziwnych obrazków na samym środku ekranu wprowadza zamieszanie i jest raczej nieestetyczne. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 101 Rysunek 5.2. Ponieważ firma FedEx ma nadzieję na obniżenie kosztów i na świadczenie wartościowych usług dla swoich klientów, zdecydowała się na umieszczenie najpopularniejszej usługi — śledzenia przesyłki od razu na pierwszej stronie Wskazówka ta może być trudna do zastosowania podczas koordynowania zawartości stron różnych działów firmy. Bardzo łatwo utracić spójność, powinieneś więc uzgodnić z przedstawicielami innych działów to, jak będzie wyglądał szablon strony (zobacz rysunki 5.3, 5.4, 5.5). Rysunek 5.3. Oto powszechnie rozpoznawana strona główna Amazon.com Testuj stronę przy użyciu różnych przeglądarek i w różnych warunkach Czy pamiętasz historię z rozdziału 2. o studentach, którym nie chciało się sprawdzić, jak wygląda strona w przeglądarce innej niż przez nich używana? Stracili przez to dużo czasu i energii. Powtórzę jeszcze raz: przetestowanie strony w kilku przeglądarkach, na kilku platformach, w różnych rozdzielczościach i rozmiarach monitora jest abso- lutną koniecznością. Najwygodniej jest, gdy w Twojej firmie istnieje laboratorium z róż- nymi komputerami tylko do Twoich testów. 102 Funkcjonalność stron internetowych Rysunek 5.4. Oto kolejna strona należąca do Amazon.com znajdująca się jednak w innej sekcji. Zauważ, że projektanci zachowali spójność, co oznacza, że użytkownicy nie muszą co chwilę poznawać nowego interfejsu Rysunek 5.5. Niektóre firmy zaczęły wzorować się na szablonach innych firm po to, by wykorzystać schematy istniejące w pamięci użytkowników. Wyobraź sobie, jak skomplikowany byłby świat, gdyby producent samochodów musiał wymyślać zupełnie nowy układ kierowniczy tylko dlatego, że konkurencyjna firma opatentowała kierownicę Testuj stronę przy różnych rodzajach połączeń. Jeśli okaże się, że ładuje się ona skan- dalicznie wolno przy połączeniu modemowym, będziesz musiał ją zmodyfikować (patrz rysunek 5.6). Umieszczanie najważniejszych informacji Większość użytkowników ogranicza się tylko do tych informacji, które widoczne są na ekranie w momencie otwarcia strony, i nie ma w zwyczaju sprawdzania, co znajduje się poniżej. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 103 Rysunek 5.6. Jeśli Twoja strona wymaga umieszczenia takiego oświadczenia, oznacza to, że powinieneś poważnie zastanowić się nad swoim projektem. Nie staraj się naśladować Prokrusta i dopasowywać użytkownika do strony Musisz więc upewnić się, że wszystkie ważne informacje będą widoczne na 15-calowym monitorze, w rozdzielczości 640´480 (wielkości te będą się zmieniać wraz z popula- ryzacją coraz większych monitorów). Co więcej, będziesz musiał rozwiązać problem liczby kolorów, gdyż wiele osób nie posiada 24-bitowych kart graficznych lub też nie wie, że może zmienić ustawienia z 8 na 24 bity (zobaczs rysunki 5.7 i 5.8). Rysunek 5.7. Na tym rysunku widać, że projektanci umieścili wiele najważniejszych funkcji u góry ekranu, jednakże system poruszania się po stronie znajduje się na samym dole, co może nieco utrudnić korzystanie z niej Przesuwanie poziome zabronione O ile można zaakceptować przesuwanie ekranu w pionie, to konieczność przesuwania go w poziomie musi być absolutnie wyeliminowana. Nie twórz nigdy stron zbyt sze- rokich, lecz takie, które zmieszczą się na ekranie sw rozdzielczości 640 pikseli. Funkcjonalność stron internetowych 104 Rysunek 5.8. Oto część strony przedstawiona na rysunku 5.7, która znajduje się na samym dole Jeszcze trudniej jest użytkownikom WebTV, gdyż ich ekrany umożliwiają wyświe- tlanie stron jedynie w rozdzielczości 544´372 piksele. Strony o szerokości większej niż 544 piksele są dzielone, a to zazwyczaj wygląda małos zachęcająco. Myśl globalnie Już samo określenie World Wide Web świadczy o międzynarodowym charakterze Sieci. Oznacza to, że powinieneś umożliwić korzystanie ze strony użytkownikom mówiącym innym językiem niż Ty. Poruszę ten temat jeszcze w dalszej części książki: programy do automatycznego tłumaczenia nie nadają się do zastosowania na firmo- wych stronach internetowych. Są one zabawne i mogą pomóc w poruszaniu się po stronie stworzonej w zupełnie nieznanym języku, ale nie są wystarczająco inteligentne, by obyło się bez prawdziwego tłumaczenia (zobacz ryssunek 5.9). Unikaj używania flag państwowych do oznaczania języków. Niejednokrotnie w jednym państwie używa się trzech lub czterech języków i jeszcze więcej dialektów. W większości przypadków możesz określić, jakie są preferencje użytkownika co do używanego języka. Za każdym razem, gdy użytkownik pobiera dokument ze strony, możesz za pomocą CGI uzyskać informacje o języku użytkownika lub domyślnym sjęzyku jego przeglądarki. Ostrzeganie o rozmiarze plików Jeśli umieszczasz na stronie link do pliku wideo, PDF czy też jakiegokolwiek innego pliku, którego rozmiar jest większy niż rozmiar strony (powiedzmy ponad 45 kB), powinieneś podać jego wielkość. Dzięki temu użytkownik będzie miał możliwość zrezygnowania ze ściągania pliku, jeśli nie ma ochoty sna długie oczekiwanie. Dobrym zwyczajem jest umieszczanie przewidywanego czasu ściągania pliku przy określonej szybkości połączenia, np. 28,8 k lub 56 k. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 105 Rysunek 5.9. Strona internetowa firmy Hewlett-Packard miała kiedyś bardzo frustrującą cechę. Gdy poszukiwałeś na niej sterownika do drukarki Laser Jet, każda wersja sterownika, w każdej wersji językowej zwracana była przez wyszukiwarkę jako osobne trafienie. Nie mówię po niemiecku, więc opis oprogramowania w tym języku raczej na nic mi się nie przyda. Teraz HP umożliwia przynajmniej wybór języka Nawigacja Wykorzystanie górnej i lewej części ekranu Niektórzy projektanci starają się tworzyć bardziej oryginalne witryny poprzez umiesz- czenie elementów nawigacyjnych w innych częściach strony niż zazwyczaj. Nie rób tego! Takie działanie zmniejsza funkcjonalność strony. Górna oraz lewa część strony to miejsca, w których użytkownicy najczęściej szukają informacji o poruszaniu się po stronie. W jednym z najgorszych projektów, jakie ostatnio widziałem, twórca umieścił ele- menty nawigacyjne z prawej części stron i do tego ukrył je pod animowanymi rysun- kami w formacie GIF. Żaden z uczestników testów nie potrafił poruszać się po stronie, traktując jej elementy nawigacyjne jak reklamy (pamiętaj: animacja + prawa część strony = szum). 106 Funkcjonalność stron internetowych Unikaj zbędnych elementów nawigacyjnych Czasami dobrze jest umieścić na stronie dodatkowe elementy nawigacyjne. Na przy- kład, jeśli podstawowym elementem nawigacyjnym strony jest znajdująca się w jej górnej części mapa, dobrym rozwiązaniem jest umieszczenie na dole strony linków tekstowych. Z drugiej jednak strony, umieszczenie dwóch zestawów elementów nawigacyjnych w polu widzenia użytkownika równocześnie może być mylące. Na rysunkach 5.10 i 5.11 przedstawiono strony zawierające co najmniej trzy zestawy elementów nawigacyj- nych jednocześnie. Czym różnią się te zestawy? Jak rozumieć fakt, że występują nie- zależnie od siebie? Którego z nich należy użyć? Rysunek 5.10. System nawigacyjny na przedstawionej stronie jest odrobinę chaotyczny. Cała strona jest niespójna, a użycie nietypowych nazw dla linków w lewej części ekranu wprowadza jedynie w błąd Rysunek 5.11. Oto przykład strony, której system nawigacyjny może wprowadzać w błąd. Jaka jest np. różnica między dwoma linkami Home? Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 107 Dodatkowe elementy nawigacyjne Każdy z użytkowników może preferować własny sposób poruszania się po stronach internetowych. Dlatego też powinieneś rozważyć umieszczenie na stronie elementów składających się na trzy różne systemy nawigacyjne: linki na każdej stronie, plan strony oraz wyszukiwarkę (patrz rysunki 5.12 i 5.13). Rysunek 5.12. Zwróć uwagę na to, że pomimo występowania wielu wad z punktu widzenia funkcjonalności na tej stronie, projektanci umożliwili użytkownikom skorzystanie z czterech różnych systemów nawigacji: planu strony, klasycznych elementów nawigacyjnych, spisu alfabetycznego oraz wyszukiwarki. Niestety, plan strony i spis alfabetyczny są dostępne jedynie na stronie głównej Jasne i zrozumiałe linki Bądź ostrożny podczas tworzenia tekstowych hiperłączy. Postaraj się, aby były jak naj- bardziej zrozumiałe. Nie pozostawiaj użytkownikom miejsca na domyślanie się, gdzie dane łącze prowadzi. Nie ukrywaj linków Kiedyś autorzy stron internetowych twierdzili, że hiperłącza powinny być częścią zwykłego tekstu. Niestety, w praktyce rozwiązanie to się nie sprawdza. Unikaj ukry- wania linków w tekście. Liczba użytkowników reagujących jedynie na polecenie „Klikaj tutaj” jest wciąż przerażająco wysoka. 108 Funkcjonalność stron internetowych Rysunek 5.13. Oto kolejny przykład dodatkowego systemu nawigacyjnego: plan strony Inne użyteczne wskazówki Użycie WebTV Wszystkie japońskie i północnoamerykańskie systemy WebTV (korzystające ze stan- dardu NTSC) wyświetlają strony internetowe w określonej części ekranu o wymia- rach 544 na 372 piksele. Oznacza to, że jeśli chcesz, by Twoje strony mogły być przeglądane przez osoby korzystające z takich urządzeń, musisz wziąć to pod uwagę podczas projektowania. Więcej informacji na temat projektowania pod kątem WebTV znajdziesz pod adresem http://developer.msntv.com/Designing/Default.asp (patrz ry- sunek 5.14). Dołączenie opcji „Jesteś tutaj” Opcja ta umożliwia użytkownikowi określenie, w którym miejscu strony w danym momencie się znajduje (patrz rysunek 5.15). Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 109 Rysunek 5.14. Emulator WebTV to tylko jedno z narzędzi, z jakich deweloperzy będą musieli korzystać w najbliższej przyszłości, aby ich aplikacje docierały do jak największej ilości odbiorców Rysunek 5.15. Zauważ, że twórcy stron przedstawionych na tym rysunku oraz na rysunku 5.16 stworzyli system poruszania się po stronie umożliwiający użytkownikom stwierdzenie, w którym jej miejscu aktualnie się znajdują. W tym przypadku możliwe jest to dzięki znajdującemu się na dole strony listingowi Funkcjonalność stron internetowych 110 Rysunek 5.16. Strona ta ułatwia użytkownikowi poruszanie się po niej poprzez znajdujący się z lewej strony zestaw ikon Ogranicz użycie kolorów w tabelach Jeśli planujesz utworzyć tabelę z danymi, a różne typy danych oznaczyć różnymi ko- lorami, powinieneś ograniczyć ich liczbę do czterech, a w skrajnych przypadkach do sześciu. Użycie w tabeli zbyt wielu kolorów utrudni jej odczytywanie nie tylko oso- bom z wadą wzroku, ale wszystkim użytkownikom. Tak naprawdę im więcej kolorów użyjesz, tym łatwiej będzie je pomylić. Dużo sku- teczniejsze jest używanie kolorów oszczędnie, do podkreślenia jednego lub dwóch najważniejszych punktów lub do wyróżnienia jednego zs wielu elementów. Nie przesadzaj Może Ci się wydawać, że umieszczenie elementów marynistycznych na stronie poświę- conej żeglarstwie jest jak najbardziej uzasadnione. Jednakże nazywanie typowych elementów strony takich, jak plan strony, pomoc użytkownika czy informacje o za- mówieniu „Sekstans”, „Kotwica” oraz „Skarb piratów” wywoła, oprócz rozbawienia, dużo zamieszania. Proponuję, byś pozostał przy typowych, powszechnie znanych na- zwach, a zabawne pomysły pozostawił na inne okazje s(patrz rysunki 5.17 i 5.18). Zadbaj o zastępczą zawartość Pamiętaj, by zawsze umieszczać tekstową wersję swojej strony, z której będą mogli skorzystać ci użytkownicy, którzy z różnych przyczyn nie są w stanie korzystać z ele- mentów graficznych (osoby z wadami wzroku, użytkownicy palmtopów, którzy nie mogą wyłączyć wyświetlania elementów graficznych itd.). Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 111 Rysunek 5.17. Twórca tej strony musi dobrze posługiwać się programem Kai’s Power Tools. Poruszanie się po tej stronie jest dość utrudnione, ponieważ elementy nawigacyjne aktywują się dopiero po najechaniu na nie kursorem Rysunek 5.18. Oto kolejny przykład strony, na której projektant posunął się o krok za daleko. Niewyraźne elementy nabierają ostrości po najechaniu na nie kursorem. Gdy wyłączysz w przeglądarce obsługę Java Script lub jeśli w ogóle jej nie posiadasz, będziesz musiał bardzo się namęczyć, by poruszać się po tej stronie Kolejnym argumentem przemawiającym za wykorzystaniem tekstu na stronie jest to, że wyszukiwarki nie będą indeksować Twojej strony, jeśli będzie się ona składać wyłącz- nie z obrazków (patrz rysunek 5.19). Rysunek 5.19. Oto strona firmy Oracle. Bez komentarza 112 Funkcjonalność stron internetowych Używaj atrybutu ALT w opisach rysunków Gdy umieszczasz na stronie rysunek, możesz postarać się, by była ona bardziej do- stępna dla wszystkich użytkowników. Wystarczy, że w opisie rysunku użyjesz atry- butu ALT, by osoby niekorzystające z wyświetlania elementów graficznych mogły przynajmniej przeczytać ich opis. Pamiętaj, by na końcu opisu, w którym wykorzystujesz atrybut ALT, umieszczać kropkę. Dzięki temu osoby korzystające z syntezatorów mowy nie będą zmuszone wysłuchi- wać bardzo długich zdań. Korzystaj z tych samych obrazków Aby skrócić czas ładowania strony, staraj się jak najczęściej korzystać z tych samych obrazków. Gdy obrazek został już raz załadowany i znajduje się na dysku twardym użytkownika, przez pewien czas zostaje w cache’u przeglądarki. Czynność tę możesz jeszcze przyspieszyć, dzieląc duże obrazki na kilka mniejszych. Dzięki temu, zmie- niając jedną część systemu nawigacyjnego, by wskazać użytkownikowi, w jakim miejscu strony się znajduje, możesz zaktualizować jedynie tę małą część, a reszta po- zostanie niezmieniona. Istnieje kilka narzędzi, które Ci w tym pomogą, na przykład Macromedia Fireworks oraz Adobe Photoshop (opcja ta była dostępna w innym produkcie firmy Adobe — Image Ready, który został zastąpiony przez Photoshopa). Łącz kategorie między sobą Czy kiedykolwiek zdarzyło Ci się zmarnować masę czasu w poszukiwanie latarki, gdy Twój współlokator lub brat posprzątał Twój pokój? Tak? To pewnie wiesz, że nie wszyscy szukają przedmiotów w tych samych miejscach. Największym problemem w poszukiwaniu rzeczy w Sieci jest to, że projektantom wydaje się, że są absolutnymi autorytetami w tworzeniu kategorii. Pamiętaj, by podcszas projektowania strony wyko- rzystać technikę układania kart. Użytkownicy pokażą Ci w ten sposób, gdzie powinny znajdować się poszczególne elementy. Jeśli istnieją obiekty, które wciąż klasyfiko- wane są do kilku różnych kategorii, powinieneś łączysć je między sobą. Unikaj animacji Jednym z największych przekleństw współczesnych stron internetowych są wszech- obecne animowane rysunki w formacie GIF. Im więcej projektantów używa animacji do tworzenia irytujących reklam, tym mniej użytkownsików zwraca na nie uwagę. Jeśli koniecznie musisz umieszczać animacje na swojej stronie, rób to z umiarem. Wykorzystanie animacji zawierających użyteczne informacje jest możliwe (zobacz rysunek 5.21). Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 113 Rysunek 5.20. Jedna ze stron internetowych MIT wygląda jak niezorganizowany zbiór informacji dlatego, że projektant umieścił je na stronie w kolejności alfabetycznej. Zauważ, że niektóre z elementów połączone są między sobą, tak by ułatwić użytkownikom poruszanie się po stronie Rysunek 5.21. Na tym rysunku nie zauważysz animacji, jakie umieszczono na stronie internetowej, ale zapewniam Cię, że jest ich na niej wiele. Minie jednak trochę czasu, zanim projektanci zrozumieją, że upodabnianie stron internetowych do telewizji za wszelką cenę, nie musi wyjść im na dobre. Animacje w nadmiarze to nie jest najlepsze rozwiązanie Nie używaj rysunków przypominających reklamy Podstawowe elementy nawigacyjne strony powinny wyglądać dokładnie tak jak ele- menty nawigacyjne. Wydaje się to dosyć logiczne, jednakże istnieje wiele stron łamią- cych tę zasadę. Spójrz na rysunki 5.22 i 5.23 i zwróć uwagę na znajdującą się po lewej stronie ikonę z napisem „Call me now”. W rzeczywistości jest to bardzo ważny link, 114 Funkcjonalność stron internetowych ale z racji jego dwuznacznej etykiety oraz wyglądu przypominającego przycisk, istnieje duże prawdopodobieństwo, że użytkownicy nie będą wiedzieli, jak z niego korzystać. Przypomina on reklamę, a wielu użytkowników unika ichs jak ognia. Rysunek 5.22. Dzięki popularności animowanych plików graficznych typu GIF użytkownicy mogą pomijać elementy przypominające reklamę, jak obrazek „call me now” Rysunek 5.23. Jeszcze raz przyjrzyj się wszystkim elementom nawigacyjnym. Podczas kilku przeprowadzonych testów co najmniej 70 użytkowników nie dostrzegło ikon znajdujących się po prawej stronie ekranu Unikaj niedziałających linków Proces sprawdzania poprawności linków na stronie celem wyeliminowania tych nie- sprawnych można bardzo łatwo zautomatyzować. Służą do tego specjalne programy oraz skrypty w języku PERL. Mimo tego w Sieci pełno jest stron z niedziałającymi linkami. Dotyczy to nawet stron z listy Fortune 500. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 115 Monitoruj słowa poszukiwane przez użytkowników Jeśli użytkownicy często szukają na Twojej stronie tych samych słów lub zagadnień, może to oznaczać, że powinieneś te informacje bardzisej wyeksponować. Umieść opcje wyszukiwania na każdej stronie Narzędzia do wyszukiwania niezbędne są praktycznie na wszystkich stronach inter- netowych. O ile wyszukiwarka nie powinna być nigdy podstawą poruszania się po Twojej stronie, dobrze jest mieć do niej dostęp w ksażdej chwili. Należy jednocześnie pamiętać, że umieszczenie na stronie dwóch różnych mechani- zmów wyszukiwania może wprowadzać w błąd. Nie umieszczaj na stronie mechanizmów przeszukujących całą Sieć Umieszczenie na stronie wyszukiwarki jest bardzo przydatne, dopóki działa ona w obrębie tej strony, a nie całej Sieci. Użytkownicy wiedzą doskonale, gdzie mogą znaleźć takie wyszukiwarki. Umieszczenie na stronie mechanizmów przeszukujących wszystkie za- soby internetowe jest bardzo frustrujące i mylące z punktu widzenia użytkownika po- szukującego informacji znajdujących się na tej konkrsetnej stronie. Nie przesadź z metaforami Mimo iż użycie przenośni może pomóc użytkownikowi w lepszym zrozumieniu strony, ich nieprawidłowe zastosowanie potrafi być o wiele bardziej szkodliwe niż konstruk- tywne. Najczęściej spotykane błędy w zastosowaniu psrzenośni to: tttt nadmiar metafor powodujący zamieszanie; tttt łączenie metafor, które jest nie tylko naganne ze styslistycznego punktu widzenia, ale przede wszystkim wprowadza w błąd użystkownika; tttt przenośnie, które nie mają sensu z punktu widzenia sużytkownika, są bezużyteczne. Przenośnia, która jest zrozumiała z Twsojego punktu widzenia, wcale nie musi być taka dla użytkownika. Nie każdy jesst programistą i dla pewnych osób przenośnia może po prostu nie mieć sensu. Co gorsza, może też znaczyć coś zupełnie innego! tttt jeśli decydujesz się na użycie metafory, rób to tylkos wtedy, gdy jesteś pewien, że jest to odpowiedni czas i miejsce. 116 Funkcjonalność stron internetowych Wykonuj testy funkcjonalności na stronach konkurencji Poznawanie swojego użytkownika oznacza również poznawanie swojej konkurencji. Wykonywanie oceny funkcjonalności stron swoich konkurentów może dać Ci nad nimi przewagę. Nie nadużywaj wyróżnień Przypominasz sobie paragraf napisany dużymi literami z rozdziału 4.? Wyróżnienia takie, jak pogrubienie, pochylenie i inne przyciągające uwagę użytkownika techniki zachowaj na naprawdę ważne okazje. W ten sposób będziesz miał pewność, że gdy zechcesz zwrócić na coś uwagę użytkowników, uda Ci sisę to. Nie nadużywaj najnowszych zdobyczy techniki To, że na półkach sklepowych pojawiła się najnowsza wersja technologii Zap, nie ozna- cza, że koniecznie musisz ją od razu stosować. Tak naprawdę dobrze jest pozostawać odrobinę w tyle. Wtedy masz pewność, że większość błędów nowej technologii zostanie usunięta, zanim zastosujesz ją w swoim projekcie (zsobacz rysunki 5.24 – 5.26). Rysunek 5.24. Ta strona z pewnością zasługuje na nagrodę. By uczynić ją jeszcze bardziej atrakcyjną wizualnie, wykorzystano w niej DHTML. A oto jak wyglądała w mojej przeglądarce Zrozumiałe URL-e Niestety najlepsze nazwy domen są już teraz zajęte. Zdobycie łatwej do zapamiętania nazwy może być więc bardzo trudne. Nie zmienia to faktu, że możesz kontrolować nazewnictwo folderów i stron wewnątrz Twojej domeny. Stworzenie katalogów o nazwach powiązanych z poszczególnymi czę- ściami strony ułatwi użytkownikom poruszanie się po niej. Na przykład, by uzyskać najnowsze informacje na temat systemu operacyjnego Macintosh, wystarczy przejść na stronę www.apple.com/macos. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 117 Rysunek 5.25. Zanim zastosujesz nową technologię, upewnij się, że dokładnie ją przetestowałeś. Lepiej stworzyć stronę mniej efektowną, lecz bardziej pewną Rysunek 5.26. Ta strona również wykorzystuje DHTML w systemie rozwijanych menu. Wszystko jest w porządku, pod warunkiem że upewniłeś się, iż użytkownicy nieużywający DHTML również będą mogli poruszać się po tej stronie. Dodatkowo na tej stronie popełniono jeden z podstawowych błędów: małe, niebieskie literki na niebieskim tle ograniczające dostępność do tej strony użytkownikom Pamiętaj, że nazewnictwo, które zastosujesz, nie może być podstawową systemu na- wigacji Twojej strony. Niezależnie od przyjętej konwencji powinieneś stworzyć jasny i pomocny system nawigacyjny. 118 Funkcjonalność stron internetowych Tekst czy ikony Który system nawigacyjny jest lepszy: oparty na tekście czy na ikonach (zobacz rysunek 5.27)? To zależy. Tekst zwycięża w sytuacji, gdy mamy do czynienia z użytkowni- kiem, który po raz pierwszy odwiedza daną stronę. Ikony natomiast są szybciej roz- poznawalne, gdy użytkownik zna już ich znaczenie. Dlatego też powinieneś używać obu tych systemów jednocześnie — tekstu dla początkujących użytkowników oraz ikon dla użytkowników doświadczonych. Rysunek 5.27. Spójrz na ten zrzut ekranowy i spróbuj znaleźć link prowadzący do podstrony, na której można zarezerwować pokój w hotelu. Gdy już Ci się to uda, zastanów się, w jaki sposób go odnalazłeś. Czy pomogła Ci w tym ikona? A może tekst? Czy znalazłbyś ten link bez jednego z tych elementów? W jakich warunkach lepiej sprawdzają się ikony, a w jakich tekst? Szerokość czy głębokość Istnieje obiegowa opinia, że lepiej jest tworzyć strony „szerokie” (czyli takie, które zawie- rają wiele linków na każdej stronie, zmniejszając tym samym ilość kliknięć, jakie należy wykonać, by dotrzeć do żądanych informacji) niż „wąskie” (mniej linków na stronie, lecz więcej kliknięć, by dostać się do informacji). Moje dośwsiadczenie to potwierdza. Pamiętaj, że tworząc „szeroką” stronę, musisz jednocześnie zastosować wiele technik ułatwiających użytkownikowi korzystanie z niej. Może Ci w tym pomóc na przykład dzielenie informacji oraz sygnały przestrzenne. Pamiętaj o domyślnej czcionce Czyż nie byłoby przyjemnie, gdybyś do stworzenia strony mógł użyć dowolnej czcionki? Czyż nie byłoby wspaniale, gdyby każda osoba przeglądająca Twoją stronę widziała ją w ten sam sposób? Niestety, rzeczywistość jest trsochę inna. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 119 Sprawdź, czy Twoja strona wygląda dobrze przy użyciu domyślnych czcionek każdego systemu operacyjnego i użyj CSS, by upewnić się, że jeśli dana czcionka jest niedo- stępna, zostanie zastąpiona inną. Wygoda drukowania Jeśli na stronie umieściłeś dużo tekstu (gdy na przykład jest go na tyle dużo, że mu- siałeś podzielić go na kilka stron), pamiętaj o zamieszczeniu na stronie wersji tekstu przeznaczonej do wydrukowania w formacie PDF lub HTML (zosbacz rysunek 5.28). Rysunek 5.28. Po obejrzeniu programu telewizyjnego postanowiłem poszukać w Sieci przepisu na sushi. Na szczęście ktoś rozsądny umieścił na tej stronie link do wersji przygotowanej do druku 1 Optymalizuj obrazki Co prawda optymalizacja obrazków nie mieści się w zakresie tematycznym tej książki (więcej informacji znajdziesz w książkach Lyndy Weinman na stronie www.lynda.com), ale jest tematem dość istotnym. Ograniczenie rozmiaru plików graficznych jest bar- dzo ważne dla poprawności funkcjonowania strony. Koniecznie powinieneś zopty- malizować obrazki na swojej stronie, o ile jeszcze tego nie zrobiłeś. Będziesz zasko- czony, ile miejsca możesz zaoszczędzić (zobacz rysunksi 5.29 i 5.30). Link „Printer — Firendly Version” u góry ekranu — eprzyp. tłum. 1 120 Funkcjonalność stron internetowych Rysunek 5.29. Oto olbrzymi obrazek na stronie Torent Systems (patrz wskazówka Równowaga na końcu rozdziału). Obrazek ten przedstawia „internetową autostradę”. Jest to plik formatu JPEG o wielkości 386 kB Rysunek 5.30. Otworzyłem ten rysunek w programie Photoshop 5.5 i wybrałem opcję „Save for Web…”, co umożliwiło optymalizację obrazka i zmniejszenie jego rozmiaru do 80 kB Korzystaj z CSS Wykorzystując system CSS do zarządzania czcionkami na stronie, możesz uniknąć umieszczania na niej zbędnych plików graficznych. Oczywiście ograniczy to nieco możliwość wyboru fantazyjnych czcionek, ale umieszczenie zwykłego tekstu i zasto- sowanie na nim stylu zaoszczędzi czas Twoich użytkowników. Zapoznaj się z pakie- tem HTML/CSS na dołączonym do książki CD-ROM-ie. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 121 Pamiętaj o swoich namiarach W każdej sekcji strony powinieneś umieścić informację o tym, jak można się z Tobą skontaktować, a co najmniej link do takiej informacji. Często zdarza się, że ludzie odwiedzający Twoją stronę robią to tylko po to, by ssię z Tobą skontaktować. Zrozumiałe jest, że niektóre firmy chcą trzymać użytkownika na dystans w celu ogra- niczania kosztów funkcjonowania. Dużo bardziej kosztowne jest z punktu widzenia firmy przyjęcie zamówienia przez telefon niż poprzez formularz na stronie internetowej. To samo dotyczy obsługi technicznej. Jeśli użytkownik może znaleźć odpowiednie in- formacje na stronie internetowej, firma nie musi płacić za połączenia telefoniczne ani zmuszać do tego swoich klientów. Mechanizm ten działa świetnie, jeśli strona internetowa jest w stanie szybko i wydaj- nie rozwiązywać większość problemów, z jakimi borykają się użytkownicy. W prze- ciwnym jednak wypadku powinieneś umieszczać na niej informacje o możliwościach skontaktowania się z Tobą. Rozwijaj sekcję FAQ Koncepcja FAQ (Frequently Asked Questions — z ang. często zadawane pytania) polega na umieszczaniu na stronie najczęściej zadawanych przez użytkowników pytań wraz z odpowiedziami. Dzięki temu użytkownicy nie muszą się przez cały czas z Tobą kontaktować. Niestety, w większości przypadków sekcja FAQ nie wykracza poza kilka podstawowych pytań, jakie przyszły do głowy projektantom podczas tworzenia strony. Pamiętaj o aktualizowaniu tej części strony. Użytkownicy będą nieustannie dostar- czać Ci materiału do jej poszerzania (zobacz rysunek s5.31). Rysunek 5.31. W sekcji FAQ odnalazłem informacje o jedno- i dwutorowych modemach, jednakże interesujące mnie pytanie brzmiało: „Który z nich otrzymam, zamawiając określoną usługę?”. Niestety, brak odpowiedzi 122 Funkcjonalność stron internetowych Projektowanie nieliniowe Nie wolno Ci założyć, że użytkownicy zawsze będą wchodzić na Twoje strony poprzez stronę główną lub że będą się po niej poruszać w przewidywalny sposób. Ludzie ko- rzystają z Sieci w bardzo nieliniowy sposób. Jeżeli umieścisz najważniejsze informa- cje o poruszaniu się po stronie jedynie na stronie głównej, możesz sprawić, że będzie ona bezużyteczna dla osób, które dostały się na nią poprzez wyszukiwarkę. W ten sposób rozwiążesz również problem mało skutecznego „tunelu wejściowego” (zobacz rysunek 5.32). Rysunek 5.32. Czy nie złamano tu którejś z zasad projektowania? Ta strona to tunel wejściowy. Zoptymalizowano ją do przeglądania w rozdzielczości 800´600. Staraj się nie umieszczać tego typu ograniczeń na swoich stronach Nie wyrzucaj użytkowników ze swojej strony Jeśli umieszczasz na swojej stronie link do innych stron w Sieci, powiadom użytkow- ników o tym, że właśnie opuszczają Twoją stronę. Jeśli przewidujesz, że użytkownik opuści Twoją stronę i będzie chciał potem na nią powrócić, zaprojektuj mechanizm, który to umożliwi. Przykładowo, jeśli umieszczasz na stronie plik w formacie Adobe PDF, dla użytkownika może to oznaczać koniecz- ność pobrania darmowej przeglądarki, zanim będzie mógł go odczytać. Upewnij się, że zastosowany mechanizm umożliwi mu powrót na Twoją stronę po zakończeniu pobierania programu. Unikaj jaskrawych barw Owszem, użycie jaskrawych i jasnych kolorów przyciąga wzrok, jednakże po dłuż- szym czasie jest bardzo męczące dla oczu. Jeśli koniecznie chcesz, by tło strony było w kolorze czerwonym, postaraj się, by był to kolor sstonowany. Na wielu dobrych stronach użyto mniej jaskrawych kolorów (na przykład pasteli). Kolory te są zdecydowanie mniej męczące podczas korzystanisa ze strony przez dłuższy czas. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 123 Nie przesadzaj z użyciem czcionek To, że wiesz już, jak korzystać z właściwości CSS czcionek, nie oznacza, że na stro- nie musisz użyć każdej dostępnej czcionki. Tak naprawdę strony, na których używa się wielu różnych rodzajów fontów, trącą amatorszczyzną. Często stosowaną i dobrą zasadą jest stosowanie jednego rodzaju czcionki dla nagłówków i innego dla reszty tekstu (w obu przypadkach powinna to być czcionka bezszeryfowa). Pamiętaj, by poprzez użycie CSS umożliwić zastąpienie wybranej przez Ciebie czcionki inną, w przypadku gdy ta podstawowa nie jest zainstalowana na komputerze użytkownika. Powinieneś również sprawić, by Twoja strona działała poprawnie przy braku wybranych przez Ciebie czcionek wyłącznie przy użyciu domyślnych czcsionek systemowych. Nie ignoruj preferencji kolorystycznych użytkowników Być może przyjdzie Ci do głowy zmiana domyślnego koloru linków pomiędzy poszcze- gólnymi częściami Twojej strony. Pamiętaj, że może to wprowadzać użytkowników w błąd. Większość z nich przyzwyczajona jest do tego, że kolor niebieski oznacza hiperłą- cze (co, jak już wspomniałem, jest dość nieszczęśliwym wyborem, gdyż małe niebieskie elementy są wraz z wiekiem coraz trudniejsze do rozróżnienia). Jeśli dopuszczasz możli- wość zmiany kolorów tych elementów, nie używaj polecenia CSS „important”, lek- ceważąc preferencje użytkowników. Unikaj ramek Generalnie przeglądarki coraz lepiej radzą sobie z obsługą ramek, jednakże wciąż mogą być one mylące dla użytkowników. Jeżeli możesz uniknąć użycia ramek, zrób to. Unikaj otwierania nowych okien. Zazwyczaj otwieranie nowego okna przeglądarki bardzo irytuje użytkowników, szczególnie jeśli dzieje się to tak szybko, że nie zdążą zauważyć, iż nagle znaleźli się w zupełnie innym miejscsu. Może to wpływać na znaczne ograniczenie funkcjonalności, ponieważ nowe okno nie zawiera historii poprzedniego (zobacz rysunek 5.33). Używaj tytułów stron niezależnych od kontekstu Czy kiedykolwiek widziałeś taki tytuł strony? 6KVNG 0CUCUVTQPCIđÎYPC6KVNG Oto przykład niewłaściwego tytułu, ponieważ wyjęty z kontekstu nie posiada on abso- lutnie żadnej wartości. Jeśli wyszukiwarka indeksuje tę stronę, ten bezużyteczny tytuł najprawdopodobniej pojawi się w wynikach wyszukiwania. Co więcej, tytuł strony jest również domyślna etykietą w Ulubionych. Upewnij ssię, że nadawane przez Ciebie tytuły mają sens. 124 Funkcjonalność stron internetowych Rysunek 5.33. Zwróć uwagę na dodatkowe okno. Te małe cudeńka Java Script mogą być naprawdę irytujące Przekazuj informację zwrotną Jak już wcześniej wspomniałem, powinieneś dostarczać użytkownikowi informacji zwrotnej, aby wiedział, co dzieje się, gdy porusza się po stronie. Badania wykazały, że jeśli użytkownik w ciągu jednej sekundy nie stwiesrdzi, że strona lub jej element nie zostały zaktualizowane, będzie uważał, że to systems ma opóźnienie. Zrzuty ekranowe Jakie jest prawdopodobieństwo, że klinkąłbyś jeden ze znajdujących się w tej książce zrzut ekranowy? Niezbyt duże, bo możesz bez wahania powiedzieć, że nie są one prawdziwymi interfejsami. Nie jest to takie oczywiste, gdy masz do czynienia ze zrzutem ekranowym będącym częścią strony internetowej. Widziałem już wielu użyt- kowników uparcie kilkających zrzuty ekranowe, ponieważ wyglądały tak jak każda inna część ekranu. Jak rozwiązać ten problem? Zmodyfikuj zrzut ekranowy w taki sposób, aby od razu było widać, że nie jest prawdziwym interfejsem. Jedną ze sztuczek, które możesz wyko- rzystać, jest umieszczenie półprzeźroczystego tekstu z napisem „zrzut ekranowy” w po- przek obrazka. Innym sposobem jest zmiana jego wyglądus w programie Photoshop. Słuchaj użytkowników Pamiętaj, aby umożliwiać użytkownikom przesyłanie ich komentarzy oraz krytycz- nych uwag i zawsze zwracaj uwagę na to, co mają do powiedzenia. W niektórych sy- tuacjach mało zaawansowane technicznie rozwiązania są akceptowalne. Nie musisz wydawać dużych pieniędzy, aby stworzyć złożony system rejestracji skarg. Wystarczy, że użytkownicy będą znali adres e-mailowy, na który będą mogli wysłać informacje i skąd otrzymają odpowiedź w stosunkowo krótkim czasie. Rozdział 5. ¨¨¨¨ Wskazówki dla projektantów 125 W przypadku takich adresów często stosuje się automatyczne e-maile, które powia- damiają użytkownika o tym, że ich mail został odebrany. Jednakże większość osób jest świadoma, że to jedynie automatyczna odpowiedź, co znacznie pomniejsza jej wartość. Zyskasz szacunek użytkowników, osobiście odpsowiadając na ich listy. Równowaga Równowaga jest to stan, w którym nie można dodać ani zabrać żadnego elementu dzieła bez zmiany jego znaczenia. Powinieneś utrzymywać taki stan w swoich pro- jektach. Jeśli dodanie do strony jakiegoś elementu nie przyniesie żadnych korzyści, nie dodawaj go. Każdy obrazek, tekst i animacja muszą „walczyć” ze sobą o ograni- czoną uwagę użytkownika. Co więcej, obrazki wydłużająs czas oczekiwania. Podsumowanie rozdziału tttt Mimo iż czytanie wskazówek jest przyjemne, prosta fusnkcjonalność w stylu książki kucharskiej nie może zastąpić prawdziwego tesstowania z udziałem użytkowników. tttt Połączenie wskazówek, technik, narzędzi oraz testóws umożliwia tworzenie najbardziej funkcjonalnych stron internetowych. tttt Charakter wskazówek dotyczących projektowania będzise się zmieniał wraz z szybkim postępem technologii wykorzystywanych do tsworzenia stron internetowych. tttt Wiele pożytecznych wskazówek opartych jest na projekstowaniu zorientowanym na użytkownika. Ćwiczenia praktyczne 1. Dokonaj pobieżnego przeglądu Twojej strony internetowesj. Ile z opisanych w tym rozdziale wskazówek użyłeś podczas jej tworzesnia? Ile z nich pominąłeś? 2. Pobierz przeglądarkę WebTV i użyj jej do przeglądania swsojej strony. Zapisz, które elementy wyglądają dziwnie lub nie działają. Jak srozwiązać te problemy? 3. Oblicz rozmiar poszczególnych części Twojej strony. Możsna tego dokonać na dwa sposoby. Ręcznie (jest to dość mozolne w przypadkus większości stron) lub przy użyciu odpowiednich programów. 126 Funkcjonalność stron internetowych Tematy do dyskusji 1. Czy znasz jakieś wskazówki, które pominięto w tym rsozdziale? 2. Czy znalazłeś tu wskazówki, z którymi się nie zgadzassz? Dlaczego? 3. Czy po zastosowaniu wszystkich wskazówek z tego rozdsziału udałoby się stworzyć doskonałą stronę internetową?
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Funkcjonalność stron internetowych
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: