www.aresluna.org/attached/usability/articles/zanimumiescimywsieci/grafikaiwyglad
	> Usability > Articles > “Before the launch of a website” > Design

(Note: This page is available in Polish language only. If you would like it translated to English, please let me know. Sorry for the inconvenience)

Spójność wyglądu Czy zachowaliśmy spójność wyglądu interfejsu? Jest to jeden z ważniejszych aspektów serwisu – każdy bez powodu inaczej wyglądający odnośnik, przycisk innego koloru, odmienna czcionka spowoduje zagubienie się internauty. Warto przejrzeć pod tym kątem cały serwis. W zachowaniu spójności serwisu pomogą nam takie technologie jak CSS (tworzymy jeden plik ze stylami, a następnie używamy go na każdej podstronie), albo PHP/ASP (możemy stworzyć np. jeden plik z fragmentem kodu HTML tworzącym nawigację, a potem włączać go na każdej stronie dyrektywą include). Możemy także stworzyć sobie własną listę ogólnych zasad (np. “każdy zewnętrzny odnośnik oznaczać należy ikonką” lub “nazwisko autora artykułu należy umieścić zaraz pod jego tytułem”) po to, aby w razie potrzeby zajrzeć do nich, zamiast polegania na zawodnej pamięci.

Tytuły obrazków Czy wszystkie znaczące obrazki na stronie są opisane? (atrybut ALT w znaczniku <IMG>) Opisy pomagają osobom z wolnymi łączami, korzystającym z przeglądarek tekstowych lub mającym kłopoty ze wzrokiem (a także... wyszukiwarkom). Sprawdź obecne obok trzy obrazki poprzez najeżdżanie na nie kursorem. Pierwszy nie ma żadnego opisu i nie wiadomo, co przedstawia. Drugi ma opis wygenerowany domyślnie przez edytor HTML, który tylko pogłębia zagadkę. Dopiero trzecia ilustracja jest poprawnie opisana, podając dodatkowe informacje uzupełniające treść wizualną. Więcej informacji znajdziesz także w artykule “Użyteczność przede wszystkim.”

Rozmiary obrazków Czy podaliśmy z góry rozmiary każdego obrazka i elementu interfejsu na stronie? (atrybuty WIDTH= i HEIGHT= w znaczniku <IMG>) Dzięki temu proces wczytywania się strony będzie dużo przyjemniejszy. Więcej informacji znajdziesz w artykule “Użyteczność przede wszystkim.”

Prawidłowy kolor tła Untitled pictures, bad background colour and “click here” syndrome – this page doesn’t make a good first impression Jeżeli stosujemy grafikę w tle (czy to strony, czy tabelki), pamiętajmy, aby podać także odpowiedni kolor. Ten kolor będzie wykorzystany przez przeglądarkę do chwili wczytania grafiki i jeśli będzie za bardzo odmienny, strona do momentu całkowitego załadowania może być nieczytelna.

Optymalizacja grafiki Czy każda z podstron wczytuje się tak szybko, jak to jest możliwe? Czy wykorzystaliśmy narzędzia takie jak PNGcrush , SmartSaver Pro i/lub Adobe ImageReady w celu jak największej optymalizacji plików PNG, JPEG i GIF? Nadmierna objętość grafiki to nie tylko dłuższe wczytywanie się stron, ale i większe obciążenie serwera przy wielu odwiedzinach witryny. W przypadku JPEG możemy dopasować stopień kompresji tak, aby plik był jak najmniejszy, ale wciąż odpowiednio czytelny. Wspomniany Adobe ImageReady potrafi zrobić podobną rzecz z plikami GIF. Natomiast dzięki PNGcrush możemy zoptymalizować pliki PNG. Pamiętajmy także, że niektóre programy graficzne zapisują z ilustracją także np. metadane (informacje o ilustracji, autorze itd.) albo jej miniaturkę. Te rzeczy nie przydadzą się na stronach WWW, a jedynie zwiększą wymiary grafik i w rezultacie czas ich wczytywania.

Zaznaczenie nietypowych odnośników Czy internauta zorientuje się, które odnośniki skierują go do innej witryny? Czy będzie wiedział, że po kliknięciu otworzy mu się nowe okno przeglądarki? Upewnijmy się, że każdy nietypowy odnośnik jest odpowiednio opisany. Na tej witrynie odnośniki przenoszące do innych stron są oznaczone specjalną ikonką po to, aby internauta wiedział, gdzie wędruje. (Oczywiście sama ikonka jest odpowiednio zatytułowana, gdyby jej znaczenie było niejasne.) Podobnie oznaczone są odnośniki do stron w języku angielskim – dzięki temu osoby nieznające tego języka nie będą traciły na nie czasu.

Jeżeli masz pomysł na nową poradę, której nie ma w żadnej kategorii, napisz do mnie.

Page added on 23rd September 2003. Copyright © 2002-2005 Marcin Wichary