Web, design, trendy. Najlepsze praktyki. Elementy wspomagające nawigację
Podróżując po sieci, szukając kompromisów, odpowiedzi i rozwiązań trafiłem na kilka interesujących detali pozwalających usprawnić poruszanie się po stronach www. Niektóre są dość świeże, niektóre wyrażają powrót do najlepszych praktyk.
1. Tagi tuż pod top menu
Klasyczną chmurę tagów już dawno rozwiał wiatr. Umieszczenie najpopularniejszych tagów odsyłających do kategorii mających wzięcie, bardzo ładnie posiłkuje poziomą nawigację strony internetowej.
2. Ikony w roli odsyłaczy do archiwum kategorii
Trochę zapomniana praktyka, którą przy okazji re-designu przypomniał Matt Ward. W lidach tuż pod miniaturami zdjęć znajdują się oznaczenia graficzne poszczególnych działów. Kliknięcie w stosowną ikonkę odsyła nas do archiwum postów z konkretnej kategorii.
3. Oznaczenie obrazków – sygnalizacja typów zawartości
Internet ma tą przewagę nad drukiem, że daje możliwość publikowania różnego typu zawartości. Są więc posty zawierające ankiety, są posty audio, video. Miniatura zdjęcia jakie umieszczono we wstępie z nakładką graficzną sygnalizującą typ publikacji to dodatkowy element zwiększający orientację użytkowników.
4. Umożliwienie wyboru sposobu ładowania się informacji w sposób standardowy i na siatce
Dobrodziejstwo, które najczęściej można spotkać odwiedzając sklepy internetowe zauważyłem niedawno w szablonie do WordPressa „Sight”. Metoda jest ciekawa i warto ją zaadoptować na nieco szerszą skalę.
5. Ładowanie zamiast tradycyjnego stronicowania
Znana z Twittera alternatywa dla ładowania wcześniejszych postów, którą w niektórych przypadkach śmiało można zastąpić klasyczne stronicowanie. Skoro cierpliwość użytkowników kończy się po przejrzeniu dwóch podstron, nic nie szkodzi na przeszkodzie by korzystać z metody „załaduj więcej”.
6. Social Widget na zakładkach tabeli
Dodatki społecznościowe na stronie www to najzwyczajniej w świecie mus i kropka. Wypada pokazać update’y z Twittera, dać możliwość dołączenia do fanów na FaceBooku, zachęcić do subskrybowania rss. Na to wszystko trzeba wygospodarować miejsce w szablonie. Gdyby zmienić kolejność umieszczonej na zakładkach zawartości, to takie rozwiązanie nie będzie pomysłem najgłupszym, bo pozwoli zaoszczędzić sporo miejsca.
7. Landing Page
Temu punkcikowi należy się odrębny post, bo dużo się ostatnio mówi o tych stronach, podkreślając ich znaczenie. Sprawdzają się one najlepiej, jeśli jesteśmy gościnnymi autorami na stronach, portalach, gdzie daje się nam chociaż stopkę autorską, w której mamy możliwość umieścić linka do strony jaką prowadzimy.
Poleca się wtedy linkowanie nie na stronę główną serwisu, a na specjalnie przygotowaną stronkę, na której będą wyszczególnione wpisy, którymi użytkownik, który przeszedł na naszą stronę za pośrednictwem linka umieszczonego w serwisie na łamach, którego umieściliśmy gościnny artykuł, będzie zainteresowany.
Dzięki takiej stronie mamy ograniczyć ilość „pustych wejść”, strona taka ma odsyłać użytkowników do tematów, które są przedmiotem ich zainteresowania, bez konieczności odwiedzania strony głównej serwisu, gdzie nie muszą oni trafić na interesujące ich haczyki.
8. Stronicowanie artykułu
Temat stronicowania poruszyłem w artykule 3X Paginacja. Wraz z użytkownikami wypracowaliśmy kompromis odnośnie stronicowania artykułów. Przypomnijmy. Na witrynach poza stronicowaniem stron spotykamy się także ze stronicowaniem komentarzy i stronicowaniem dłuższych artykułów. W tym konkretnym punkcie chodzi o wskazanie najlepszej metody dla podziału dłuższych publikacji. Najlepszą praktyką będzie tu danie użytkownikowi wyboru przeczytania publikacji podzielonej na części, lub załadowania całości opublikowanego artykułu. Nie jest to nowością. Warto jednak sobie o takim udogodnieniu przypomnieć i zaadoptować je przy okazji kolejnych projektów, jeśli nosimy się z zamiarem stronicowania publikowanych pozycji.
Powiązane artykuły:
26 komentarzy
1.12.2011
Ja poproszę o artykuł dotyczący stron: landing, archiwum, 404 itp. Jakaś pokazówka najlepszych praktyk.:)
Fajnie, że powróciłeś do stronicowania i praktyk jakie po części podpowiedziałem. W Joomli to było fajnie rozegrane.
Z tymi tagami to nawet niezły pomysł. Podeślij mi jakiś przykład strony, która ma to rozwiązane w ten oto sposób.
Jestem fanem siatek, podobnie jak ty.
A co do dodatków społecznościowych to chciałem zapytać, czy planujesz może rozwiązać to właśnie w taki sposób?
1.12.2011
Bardzo fajny i informatywny artykuł. Ciekaw jestem, Adamie, skąd Ty bierzesz pomysły na to wszystko. ;]
1.12.2011
Jedyne co mi w tym wszystkim brakuje to podlinkowania obrazków.
Tagi zaraz pod menu najwyraźniej przegapiłam, pomysł całkiem niezły.
Więcej takich artykułów proszę!
1.12.2011
duzo inspirujacych rozwiazan po zarejestrowaniu znajdziesz na http://www.astrpolis.pl i xboxonline.pl
tam jest duzo rzeczy fajnych [np. widzisz kto w danym momencie pisze komentarz, bo komentarze leca live, prawie jak czat na fejsbuku 
]
1.13.2011
Wpis bardzo ciekawy, nie słyszałem o tagowaniu tuż pod menu, także o ikonkach kierujących do archiwów – dlatego jest to bardzo pouczające. Niestety jak wiemy to tylko kropla w morzu tematu dotyczącego usability, na którą moglibyśmy zwrócić uwagę podczas tworzenia nawigacji serwisu.
1.13.2011
@deryl, takie artykuły będą. W tej chwili mam gotowy jeden. To będą raczej osobne tematy.
Jeśli chodzi o tagowanie to odszukaj takiego rozwiązania w szablonach wpzoom. Miałem link do strony, która praktykuje takie rozwiązanie, ale oni z tego zrezygnowali na rzecz submenu z listą nagłówków do konkretnych artykułów (swoją drogą to też nie jest zły pomysł). Powiem tylko tyle, ja z tych tagów korzystałem. W top menu była pozycja „Social”, a pod nią za dużo się kryło np. facebook, twitter itp. Tagi stanowiły zgrabny skrót. Pyk i byłem gdzie chciałem.
No ja właśnie dlatego to wszystko publikuję, bo zbieram jakieś kompromisowe rozwiązania na przyszłość, pod kątem modernizacji.
1.13.2011
@Tomasz Kowalczyk, najzwyczajniej w świecie, błądzę po necie i szukam fajnych rozwiązań. Znajduję je przypadkiem, zapisuję sobie i jak się zrobi kupka to opisuję i publikuję. Interesują mnie takie detale, rozwiązania, więc podpatruję i podziwiam.
1.13.2011
@RedKoala, będą będą:) Ten artykuł miał być obszerniejszy o jakieś 8 pozycji. Zbieranie materiału, przykładów szło długo i mi kurcze porobili rewitalizacje jak przyszedł czas na robienie screenów. Dlatego dla kolejnych pozycji, które tu nie zostały opisane dalej szukam przykładów.
1.13.2011
@dayv, ty to zawsze coś ciekawego znajdziesz. Sprawdzę sobie na spokojnie. Dzięki bardzo.
1.13.2011
@Konrad / puchuk, ja wyszukuję tylko skrawki, które są mi przydatne. Chociaż od dłuższego czasu chodzi mi po głowie zmajstrowanie jakiegoś schematu, w który zapakuję wszystko to co moim zdaniem jest dobre. Słowem chcę to zmaterializować, wizualizować i na nowo zweryfikować.
1.13.2011
Mi się bardzo spodobał pomysł dania użytkownikowi wyboru między siatką a listą. Osobiście nie przepadam za siatkami i wole wszystko ułożone w przejrzystej liście ale widzę że ostatnio sporo stron / blogów idzie w tym kierunku i na takich stornach przydałby się wybór.
1.13.2011
pomyłka w adresie: astropolis.pl i xboxonline.pl
robione przez znajomą ekipe 
oba serwisy są mojego znajomego
1.13.2011
Pierwszy raz zobaczyłem „load more” na audiko.net. Pokochałem to rozwiązanie.
Wymienione patenty tutaj pasują mi głównie do rozwiązań blogowych i blogopodobnych. Może wkrótce na jakieś inne rozwiązana: portale, e-commerce, mobile. Mam dłuuugie listy rzeczy, które przedstawiam klientom. Chętnie bym je uzupełnił o coś czego nie wiem
.
Oby tylko klienci nie chcieli wszystkiego na raz, tak jak kiedyś na buttonach w ps: każdą opcję mieszania trzeba było nałożyć
1.13.2011
@Adam, do zbierania takich skrawków świetnie nadaje się Evernote.
1.13.2011
@jask, właśnie pamiętam, że mi kiedyś evernote polecałeś. Potem się przesiadłem na Ubuntu i kompletnie o tym zapomniałem, a teraz znów pobrałem i mam zamiar się tym pobawić. Mam nadzieję, że będzie mi to bardzo pomocne.
Jeszcze gorzej jest z rozwiązaniem problemu Rssów, bo kurcze, taki mi się chaos utworzył, że szok. Potrzebuję jakoś to fajnie zorganizować. Podzielić „prasówkę” dajmy na to alfabetycznie od A-F, od G-L itd., i jakoś to przydzielić do dni tygodnia… kurcze masakra z tym jest…
1.13.2011
@jask, będą takie listy. One się tworzą ziarnko po ziarnku. Jedna leży w panelu chyba od marca ubiegłego roku i wciąż mi nie pasuje:) Cały czas prowadzę obserwacje i zapewniam, że tego typu rzeczy tutaj się będą pojawiać.
1.13.2011
@dayv, no w pierwszym adresie zabrakło jednej literki, ale połapałem się o co chodzi. Będę się temu przyglądał. Spisałem sobie na karteczce:) bo potem nie pamiętam pod którym postem są rzeczy jakie polecacie;)
1.13.2011
@jahoo, patrząc na siatkę przez pryzmat tej darmowej skórki do WP uważam, że jest bardzo poręczna i praktyczna. Szybciej ogarnia się nagłówki wrzucone na frontową niż z tradycyjnej listy. Patent mnie ujął.
1.13.2011
@jask, a interesują cię rozwiązania pod jakiegoś konkretnego cmsa, wraz z podaniem jakiś wtyczek, komponentów, modułów? Czy tylko o jakieś ogólne pomysły?
Ja też mam problem z ogarnianiem RSS. Także jak macie jakieś fajne rozwiązania, pomysły, to podzielcie się plz.
1.13.2011
@deryl, kolekcjonuję raczej rozwiązania użytecznościowe, ogólne pomysły, co jak gdzie jest rozwiązane i co jest standardem/starocią/przyszłością. Nie chodzi tu o jakiś szczególne rzeczy centralnie pod dany CMS, tak się składa, że ja robię rzeczy pod pisanie od podstaw i muszę się trzymać granic określonych przez programistów (mogą rzucić we mnie czymś ciężkim). Weźmy taki multiuploader – doskonale zrobiony na kontain.com
Jednak ja osobiście jestem zwolennikiem pakowania gotowych rzeczy. Dla przykładu, po co pisać system komentarzy skoro jest DISQUS?
1.15.2011
„Read more” mam przygotowane na swój nowy blog ‘firmowy’. Pierwszy element – tagi pod menu – bardzo ciekawe i przydatne.
Jeszcze dodam do listy coś podobnego do „umożliwienia wyboru sposobu ładowania się informacji w sposób standardowy i na siatce”, a mianowicie wybór pokazywania wpisów/prac w portfolio z poszczególnych kategorii, które to rozwiązanie też znajdzie się u mnie
Dzięki Adam za wpis!
1.15.2011
P.S.: Czemu nie ma daty przy wpisach?
Już dawno to zauważyłem i się tak zastanawiam:)
1.18.2011
@Paweł, datę widać tylko w linkach. To akurat było zamierzone, bo jak zaczynałem to nie wiedziałem jakie będzie tempo prac. Nie chciałem, żeby nowi użytkownicy jacy odwiedzą stronę główną widziały, że najnowszy materiał został opublikowany np. miesiąc temu.
Nie wiem czy to zmienię.
Cieszę się, że wpis Ci się przydał. Będą kolejne tego typu. Siedzę nad tym sam, dlatego nie podaję przybliżonych terminów. Wspominałem, że mam coś tam napoczęte odnośnie portali, część rzeczy wykreślam i podróżuję dalej:)
1.18.2011
A może Adamie dodasz do sidebara info o nadchodzących wpisach? Lista np. 5 szkiców. Byśmy wiedzieli, czego możemy się za jakiś czas spodziewać
1.21.2011
@Paweł, o tym to myślałem. Tylko, że w panelu bocznym mam zaplanowane parę innych rzeczy. Hm, nie wiem pomyślę jeszcze, ale raczej się na to nie zdecyduję, z pewnych względów. Za to mogę puszczać zajawki z wyprzedzeniem w serwisach społecznościowych, o tym co jutro, za dwa dni. Czasem tak robię i to zdaje egzamin, więc postaram się to robić częściej.
Ale nie myślcie, że nie biorę Waszych uwag pod uwagę, bo ja to wszystko zbieram, notuję, rozważam.
1.21.2011
@Adamie, dobre i to
W takim razie czekam na zajawki:)