nowy merlin.pl - badania usability i projektowanie nawigacji - andrzej sienkiewicz

20
O nawigacji

Upload: tomasz-karwatka

Post on 14-Apr-2017

1.858 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

O nawigacji

Page 2: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

BN jak stary Merlin

Page 3: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Wnioski z badań

• Lewa nawigacja jest ignorowana.• Szczególnie gdy jest długa.• 1 - Ludzie lubią środek strony.• 2 - Ludzie lubią zakładki.• 3 - Ludzie lubią linki w okolicach tytułu strony.

Page 4: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

2 poziom nawigacji

• Działa słabo• Po kliku w nawigację, użytkownicy przechodzą

na środek strony.– Więc nie widzą nawigacji 2 poziomu.– Następnie szukają po prawej.– Widzą linki w okolicach tytułu strony.– Na końcu wracają do nawigacji.

Page 5: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Dlaczego użytkownik ignoruje nawigację

• Użytkownik nie przychodzi na stronę by nawigować – przychodzi by załatwić swoje sprawy.

• Preferuje więc konkrety na środku, a nie drzewo.

• Część projektów stron zmusza użytkownika do użycia tradycyjnej nawigacji – co działa dostatecznie dobrze tylko dla poziomych nawigacji zakładkowych.

Page 6: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Co zamiast lewej nawigacji?

• Zakładki• Centralna lista• Nawigacja przez środek strony• Nawigacja przez treść – newsy• Wyskakujące różne listy• Lewa kolumna ze zróżnicowanym stylem

Page 7: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Rozwiązanie w Merlinie

Page 8: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Zakładki

• Ludzie je rozumieją.• Dobre, gdy mało sekcji do 6.• Bez drugiego poziomu (lepiej centralna lista)• Drugi poziom (jeśli jest) musi być bardziej

widoczny niż pierwszy, by działał.

Page 9: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Zakładki, przykładyKlasyczne zakładki są proste i skuteczne Nawigacje drugiego poziomu mogą być

ignorowane – tylko drugorzędne linki.

Drugi poziom podbity. Trochę pomoże.

Page 10: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Centralna lista

• Zauważana nad treścią strony, jeśli niezintegrowana z zakładkami.

• Także może być pod tytułem strony• Bardzo skalowalna i o dużej pojemności.• Niewielkie zaśmiecenie strony.

Page 11: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Centralna lista, przykłady

Page 12: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Nawigacja przez środek strony

• Jest to rozbudowana nawigacja• Poszczególne działy zajmują bloki na środku

strony.• Obrazki powinny być reprezentatywne.• Nie działa dobrze gdy bloki przypominają

reklamy lub są rozwlekłe.

Page 13: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Środek strony

Page 14: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Nawigacja przez treść

• Typowy przebieg przez serwis newsowy1. Hot news link na SG2. Artykuł3. Powrót na SG lub linki podobne4. Itd..5. Użycie nawigacji zakładkowej do zmiany kierunku np.

z Kraj na Zagranica• Konkretna treść jest powodem przyjścia na stronę• Nie działa dobrze, gdy treść przykładowa, oferty

Page 15: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Serwis newsowy

Page 16: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Lewa nawigacja• Klasyczna, ale ignorowana przez użytkowników.• Szczególnie przy długich listach (stary merlin, amazon, onet)• Proces:

1. Link lewej nawigacji2. Środek strony3. Prawa kolumna4. Powrót do nawigacji

• Konsekwencje:1. Przejście na środek strony sprawia, że nie jest zauważany drugi

poziom nawigacji.2. Nie są też zauważane kolejne linki.3. Gdy środek nie zaspokaja – poszukiwanie na prawej stronie.4. Powrót do nawigacji jako ostateczność lub w celu zmiany kierunku.

Page 17: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Więc jak projektować

• Znacznie bardziej eksponowana:• Szersza kolumna• Więcej światła• Śródtytuły• Bullety lub obrazki• Krótka i wyróżniona

Page 18: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Przykłady udanej lewej nawigacji

Śródtytuły, bulletowane listy linków, obrazki bulletowe, światło, szeroka

Kontrowersyjna:OK: Krótka, eksponowana graficznie, linki boldem.NIE: nieklikalne linki, menu 2 poziomu o małej powierzchni

Podkreślona graficznie, boldem, krótkie linki, ikony bulletowe!

Page 19: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Mniejsze zło

Page 20: Nowy Merlin.pl - badania usability i projektowanie nawigacji - Andrzej Sienkiewicz

Witryny badane

• Merlin.pl• Vattenfall.pl (2x witryna + intranet)• Onet.pl (różne serwisy, wnioski ze statystyk)• Cyfrowy Polsat (wnioski ze statystyk)