Likwidowanie złego układu strony

Autor: Andy Rutledge, tłumaczenie: Paweł Lewczuk, dodano: 30-12-2007
Kategoria: Projektowanie WWW

Podczas gdy dobrze skonstruowane graficznie strony z powodzeniem istnieją w sieci, wysoko oceniane niegdyś koncepcje popadają w niełaskę i są zastępowane bardziej efektywnymi. Jednak pewne wadliwe konwencje nadal istnieją.

Co więcej, często można je znaleźć na dosyć znanych stronach, ze szkodą dla tychże stron.

W niniejszym artykule przetestuję kilka z tych gorszych konwencji graficznych ukażę ich wady. Zasugeruję także bardziej efektywne alternatywy i wyjaśnię, dlaczego są lepsze.

3 kolumny uczyniły zło

Jedną z popularnych od dawna konwencji graficznych stron internetowych był wyśrodkowany układ 3-kolumnowy. Układ ten składa się z głównego obszaru zawierającego treść i sąsiadujących z nim po obu stronach wąskich kolumn.

Pomimo nieodłącznych problemów związanych z tym typem układu, przyjął się on bardzo szybko i nadal jest często wykorzystywany w blogach oraz w handlu internetowym. Stał się także, i nadal pozostaje, całkiem popularny jako domyślny układ wielu systemów zarządzania treścią (CMS).


A oto okropny mały łajdak. 3 kolumny idiotyzmu...

Podstawy projektowania dowodzą, że ten układ jest wadliwy z kilku powodów.Wskutek albo braku rozeznania czy zrozumienia projektanta lub właściciela, bądź też wskutek zwykłego lenistwa, ten układ pozostaje powszechny do dnia dzisiejszego.

Strony używające wyśrodkowanego układu 3-kolumnowego:

- Sklep Apple
- Amazon.com
- Wiele domyślnych motywów w systemach zarządzania treścią

Jakie więc są te wady? Żeby lepiej je zrozumieć, dobrze jest najpierw przyjrzeć się niektórym z rzekomych korzyści z używania wyśrodkowanego 3-kolumnowego układu.

Rzekome zalety:

  • Wyśrodkowanie treści "skupia na niej uwagę"

  • "Przyjemny", symetryczny układ strony

  • Dwa razy więcej miejsca na dodatkową treść i promocję krzyżową na danej wysokości strony

  • Taki układ przeważnie pozwala ludziom, którzy nie rozumieją zasad projektowania i nie potrafią stworzyć dobrej hierarchii treści, wygospodarować miejsce na wstawienie wszelkich typów dodatkowych informacji na stronie



Lecz te rzekome korzyści często nie są w ogóle korzystne. Argumentowanie za nimi wynika z niewiedzy na temat projektowania i użyteczności. Jeśli weźmiecie pod uwagę zasady projektowania i odpowiednie fakty dotyczące ludzkiej percepcji, zobaczycie wady.

Określone wady:

  • Symetria jest zwykle szkodliwa dla hierarchii treści

  • Symetria zmniejsza zainteresowanie oglądającego

  • Posiadanie dwóch bocznych paneli, po jednym z każdej strony, psuje koncepcję zawartości w bocznym panelu

  • Układ 3-kolumnowy od razu wymusza na odwiedzającym stronę nauczenie się (i, prawdopodobnie, ponowne uczenie się na każdej nowej witrynie) gdzie szukać konkretnego rodzaju dodatkowych informacji czy linków

  • Rezultatem stosowania takiego układu często jest przesyt dodatkowych informacji na stronie

  • Szczególny rodzaj wizualnego "szumu" spowodowanego przez 2 boczne panele, raczej osłabia zamiast poprawiać skupienie użytkownika na głównej treści



Biorąc pod uwagę te zazwyczaj istotne kwestie, używanie wyśrodkowanego 3-kolumnowego układu strony zdaje się mieć niewielki sens. Czas odejść od tego wadliwego i problematycznego układu i zarezerwować go jedynie dla przypadku, w którym znajduje on najlepsze zastosowanie: tam, gdzie wygląd i użyteczność nie są ważne – lub, kiedy nie chcemy płacić projektantowi za polepszenie czegoś, co jest właściwie skuteczne.

Na przykład:

Oto prosta, łatwiejsza w użyciu powtarzalność strony głównej Sklepu Apple. Porównajcie to z obecnym Sklepem Apple.


Bardziej użyteczny układ strony Sklepu Apple

Być może chcecie zobaczyć jak ja uprościłbym Amazon.com i "złagodził" problematyczny wyśrodkowany 3-kolumnowy układ.

Ile można upchnąć?

Gazety, jeśli są dobrze przygotowane, mogą stanowić jedne z najlepszych przykładów odpowiedniej oprawy informacji. Jeśli waszym jedynym celem jest zaprezentowanie mnóstwa tekstowych/graficznych informacji w takiej formie, żeby mogły być przyswojone w całości przez każdego, to już z tego powodu musicie stać się dobrymi projektantami; w przeciwnym wypadku zostaniecie wygryzieni z rynku.

Kiedy gazety oraz inne drukowane publikacje zaczynały istnieć w Internecie, były uzbrojone w to, co wydawało im się być istotną wiedzą z zakresu projektowania. Lecz ta wiedza zmieniła się w zbytnią pewność siebie, kiedy nie udało im się odpowiednio rozpoznać ograniczeń nowego medium.

Ich doświadczenie w projektowaniu i tworzeniu układów strony spowodowało, że swoje podejście do grupowego prezentowania informacji w postaci maksymalnie zapełnionych kolumn tabeli uważali za wartościowe.

Przykłady złego układu głównych stron serwisów:

- Wall Street Journal
- L.A. Times
- NPR

Podczas gdy wiele publikacji dostosowano do różnic między drukiem a Internetem, skutki tej początkowej zbyt wielkiej pewności siebie przetrwały nawet do dziś w wielu publikacjach umieszczonych w Sieci.

Powszechne jest, że strony główne magazynów czy serwisów informacyjnych są upchnięte w ciasne pionowe kolumny w celu kontekstowej lub sekcyjnej organizacji. Taka konwencja prawie zawsze jest problematyczna, na co wskazują następujące przykłady.

W druku…


  • Wysoka rozdzielczość - stosunkowo łatwo się czyta

  • Strony z natury są w większości pionowe

  • Czytelnik w danym momencie obejmuje wzrokiem treść na dużej powierzchni (np. w przypadku rozłożonej gazety), więc jednocześnie widać wiele pozycji bądź sekcji

  • Zazwyczaj spis artykułów/sekcji nie jest miejscem, od którego zaczyna się przeglądanie zawartości. Rzadko zachodzi potrzeba rzucenia okiem na wiele różnych tematycznie sekcji naraz.



Dla stron głównych gazet/magazynów w wersji online…


  • Niska rozdzielczość - stosunkowo trudno się czyta

  • Ekran zwykle jest poziomy (z tego powodu wymaga przewijania strony)

  • Większość zawartości strony jest schowana poniżej lub powyżej obszaru widzialnego na ekranie

  • Zawartość strony głównej zazwyczaj obejmuje rozległy spis zawartości, rozdzielony na odrębne i tematycznie różniące się sekcje - ale ten spis jest miejscem, od którego zaczyna się przeglądanie zawartości



Kiedy sekcje stron głównych serwisów informacyjnych są zaprojektowane w postaci pionowych kolumn o różnych wysokościach, umieszczonych jedna obok drugiej, wymagają od czytelnika zastosowania jednej z dwóch irytujących metod przeglądania zawartości:

1) przewijanie w dół strony, żeby rzucić okiem na zawartość kolumn lub sekcji, a potem z powrotem w górę, żeby to samo zrobić z kolejną kolumną bądź sekcją, lub

2) przebieganie wzrokiem w kierunku poziomym, poprzez różniące się tematycznie, przylegające do siebie kolumny, potem przewijanie w dół i powtarzanie całej czynności itd.

Pierwsza możliwość jest żmudna i wymaga od nas przewijania w górę i w dół wiele razy w celu obejrzenia strony w sposób kontekstowy. Druga możliwość wymaga, żebyśmy oglądali część dwóch, trzech lub więcej różnych sekcji/kontekstów, potem przewijali w dół, aby zobaczyć resztę tych niektórych sekcji oraz zapoznać się z nowymi sekcjami/kontekstami. Ta możliwość wciąga nas w kontekstową schizofrenię.

Typowa strona główna serwisu informacyjnego

Na zdjęciu widać między pierwszymi liniami poziomymi 4 sekcje lub konteksty widoczne oraz 7 sekcji lub kontekstów
widocznych na wysokość ekranu.

Najlepszą metodą jest uznanie horyzontalnej natury medium (szczególnie w odniesieniu do bogatych w informacje stron głównych) i zaprojektowanie działów oraz kontekstów w ułożeniu poziomym.

Poziome przeglądanie informacji jest o wiele bardziej komfortowe niż przeglądanie pionowe (podczas czytania). Pozwala ono czytelnikom obejrzeć całą ofertę jednej lub więcej sekcji, a następnie przewinąć stronę w dół, by sięgnąć po inny rodzaj informacji. Dzięki tej metodzie przewijanie może stać się w zasadzie jednorazową sprawą i nie występuje kontekstowe rozproszenie informacji.

Przykłady lepszego układu stron głównych:

- Times Online
- Times Magazine

Przykłady znakomitego układu stron głównych:

- MSNBC
- New York Post

Inteligentne rozmieszczenie newsów na stronie głównej msnbc.com


Naśladownictwo mediów drukowanych na stronie Verbatim ignoruje zasadnicze różnice w medium. To nowe medium nie jest już nowe i dziecinne nawyki przy projektowaniu układu strony powinny zniknąć. O ile internetowe wersje gazet i inne publikacje będą nadal uważały ideę wizualnego podobieństwa do drukowanych gazet za słuszną, nie zdołają wtedy służyć swoim czytelnikom jak najlepiej. Projektanci publikacji internetowych powinni zacząć być rzeczywiście projektantami, a nie tylko spadkobiercami artystów produkcyjnych.

Wnioski

Każde nowe medium czy środowisko stwarza sposobność do popełniania błędów i nieuchronne jest to, że w początkowych staraniach będziemy stosować praktyki, które potem uznamy za niezadowalające.

Tak jest właśnie w przypadku wyśrodkowanych 3-kolumnowych układów i pionowo zorientowanych kolumn na stronach głównych serwisów informacyjnych.

Z pomocą przykładów ukazujących niewątpliwe problemy, nieodłączne przy tego rodzaju (i nie tylko) układach stron, można stwierdzić, że my, projektanci, zawsze powinniśmy dwa razy rozważyć rzeczy, które zazwyczaj uważamy za typowe procedury. Przyjmując zasadę traktowania danego medium czy środowiska jako nowego horyzontu, a nie jako medium w pełni już zgłębionego, łatwiej jest być prawdziwym projektantem i, w rzeczywistości, wykonywać swoją pracę.

Te przykłady są, jak większość naszych projektowych zagadnień, kontekstowe w swej naturze. Jeśli najpierw przywiążemy uwagę do kwestii kontekstu, projektowanie w jakichkolwiek okolicznościach lub na potrzeby jakiegokolwiek medium stanie się prostsze, a tego typu błędy łatwiejsze do uniknięcia.

Mam nadzieję, że przykładowe problematyczne strony przytoczone w tym artykule zostaną wkrótce naprawione dla dobra ich użytkowników/czytelników/klientów. Lecz jeśli nie, z pewnością stworzy to więcej możliwości ich konkurentom. Takie są prawa rynku.

Andy Rutledge

Autor tego artykułu prowadzi znakomity serwis Design View, polecamy!

Ocena 2.69/5 (53.78%) (752 głosów)

Komentarze:

  • heh a sami macie tutaj 3 kolumny
    Dodał: Gość data: 2009-09-17
    złośliwiec:P
  • 3 kolumny uczyniły zło
    Dodał: Remiq data: 2009-10-08
    Cóż. Autorzy strony nieco pojechali po bandzie i tym artykułem strzelił sami sobie w czoło. Niniejszy serwis jest podręcznikowym wręcz przykładem na to, że jednak w naszym kraju układ 3-kolumnowy jest najczęściej stosowanym układem, a co za tym idzie - najlepiej przez ludzi "rozumianym" i wręcz naturalnym. A łatwość znajdowania informacji zależy tutaj od bardzo wielu czynników, jak np. czcionki, kolory, grafika. I moim zdaniem mają one na to nawet większy wpływ, niż sam schemat układu strony.
  • 3 kolumny uczyniły zło
    Dodał: Remiq data: 2009-10-08
    Przy okazji strona WWW autora oryginalnej wersji artykułu (link na końcu strony) jest moim zdaniem przykładem prostych głupich błędów co powoduje, że nieco się tym kompromituje.
    Nie uważam się tutaj za autorytet, ale linki nie powinny wystawać poza miejsce dla nich przeznaczone... Strona wygląda tak, jakby autor skleił arkusz stylów z kilku całkowicie różnych stron.
  • @ Remiq
    Dodał: Dawid Kulbaka data: 2009-10-09
    Przedstawiamy po prostu różne wizje, a to jedna z nich. Nic więcej :-)
  • Likwidowanie złego układu strony
    Dodał: Gość data: 2010-01-01
    Wiódł ślepy kulawego, obaj wpadli w dół.
    Pisanie głupot jeszcze nie jest takie straszne (każdemu się może zdarzyć),
    ale ich powielanie to już szczyt.
    1.Układ 3 kolumnowy-to "be" inne "cacy, a to co w tej chwili oglądam to przypadkiem co?
    2.Jak ktoś wcześniej zauważył, ten "znakomity serwis Design View," nadaje się, ale na przykład jak NIE PROJEKTOWAĆĆ TAKICH STRON!!!
    3.Jaki sens ma przedstawianie takich durnych porad?
  • układ nie ma kluczowego znaczenia
    Dodał: Gość data: 2010-08-15
    jak wyżej, sa strony 3-kolumnowe które się czyta dobrze, albo sa te które czyta się nieco gorzej... po prostu tło graficzne, ilośc informacji, czcionka itp robią na mnie wrażenie... tą stronę akurat czyta mi se znakomicie więc można usunąć artykul;p


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.