19 April 2012
Category:
blog
/* */

Strony portfolio: wpływ nawigacji na doświadczenie użytkownika

Jeśli projektowanie stron internetowych to Twoja dziedzina, to zapewne wiesz że użytkownicy którzy trafią na stronę najczęściej czytają dostępne na niej teksty. Potem próbują zapoznać się ze stroną. Najczęściej szukają jakiejś formy nawigacji.

W tym artykule skupimy się na specyficznej kategorii stron internetowych, portfolio. Dlaczego akurat portfolio? Ponieważ reprezentują ciekawą paletę kreatywności i technik twórczych. Tworzenie stron www, w tym stron portfolio, to szansa na zaoferowanie interfejsu i różnych form interakcji, a wszystko to kreuje przyjemne doświadczenie użytkownika. Czy estetyka, oryginalność i kreatywność zastępują łatwe użytkowanie, czy da się to wszystko zharmonizować?

Przyjrzymy się teraz różnym stronom portfolio w języku angielskim, wybranym przez zespół Smashing Team. Weźmiemy pod uwagę łatwe użytkowanie, doświadczenie użytkownika i własne spostrzegania.

Dawid Wadach

Na pierwszy rzut oka, ta strona nie jest łatwa w użyciu. Dlaczego? Po trzeba przesunąć myszkę na różne elementy strony, głównie obrazki, aby ujawniły się linki. Dzieci mogą być tym zafascynowane, ale dorośli za tym nie przepadają. Brak nawigacji to pierwsza rzecz którą użytkownik zauważa na tej stronie. Dopiero po odkryciu linków myszką, ujawniają się ukryte części strony, czyli portfolio stron zaprojektowanych przez Dawida Wadacha. Niestety, zatrzymujemy się aby poszukać nawigacji na stronie, której brakuje.

Guzik “menu” jest widoczny na stronie tuż obok logo, ale nawet gdy się przesunie myszką na ten guzik, nie wszystkie opcje się pokazują. Nic się nie zmienia, dopiero trzeba kliknąć na ten guzik aby pojawiły się elementy nawigacyjne. Menu powinno być widoczne zawsze, bez konieczności zmieniania elementów na stronie.

Pozytywne jest to że gdy się przesunie myszką na menu, wszystkie elementy są wyraźne. Czcionka jest duża i ładnie kontrastuje z pół-transparentnym czarnym tłem. Strona także posiada nawigację narzędzi w górnym roku po lewej stronie, a to dobre miejsce na nawigację. Posiada także możliwość dzielenia się stroną poprzez portale społecznościowe i opcję usunięcia efektów (które pojawiają się po przesunięciu myszki) na dole ekranu.

Wszystkie linki do tych opcji działają poprzez przesunięcie myszką, w przeciwieństwie to głównego guziku menu. Interfejs jest nieco zmieniony co utrudnia znalezienie strzałek po boku umożliwiających zjechania w dół. Ta zmiana była głównie estetyczna, i interfejs wygląda i działa jak potrzeba.

Podsumowanie

Ogólnie, z perspektywy wzoru i rozwoju, strona jest ładnie zrobiona. Korzysta z HTML5, CSS3 oraz JavaScript co sprawia że doświadczenie użytkownika jest przyjemne. Strona jest minimalistyczna i uporządkowana, także użytkownik nie jest przerażony bałaganem. Z perspektywy użytkowania, przydałyby się małe poprawy nawigacji, zwłaszcza zrobienie głównej nawigacji widocznej zawsze, aby poprawić doświadczenie użytkownika bez potrzeby zmieniania całego wyglądu strony.

Harry Vorsteher

Wchodząc na tę stronę, jesteś powitany animacją Flash który tłumaczy jak skorzystać z nawigacji, przed zobaczeniem strony. To nie jest plus, ponieważ większość użytkowników pewnie zamknie animację przed przeczytaniem i zrozumieniem co jest pokazane. Użytkownicy przywykli to pewnych zasad i się ich trzymają jeśli chodzi o to czego się spodziewają na stronach internetowych. Dlatego wprowadzenie nowego, skomplikowanego mechanizmu nawigacji, nie jest dobrą metodą na zatrzymanie użytkowników.

Gdy użytkownik zamknie tę animację, pojawiają się dwa zestawy linków nawigacyjnych które prowadzą do galerii zdjęć. Te zestawy są bez znaczenia ponieważ użytkownik musi kliknąć na duże koło pośrodku strony, i przeciągnąć je albo w lewo albo w prawo a wtedy pojawią się kolejne zdjęcie, przesuwające się w lewo lub w prawo zależnie od wybranego kierunku. Wpierw trzeba zauważyć tę nawigację i zrozumieć jak ona działa. Potem trzeba kliknąć na kategorie aby zobaczyć zdjęcia w małym formacie. Nawigacja jest utrudniona, ale znośna.

Najgorsze jest to gdy użytkownik kliknie na te małe zdjęcia chcąc zobaczyć je w większym rozmiarze. Wtedy tło strony zmienia się z jasno szarego na ciemno szary kolor, zdjęcia zajmuje większość ekranu, i nawigacja znika. Myszka zmienia się w strzałkę, i pojawia się krzyżyk pośrodku umożliwiający zamknięcie. To umożliwi użytkownikowi zobaczenie poprzedniego zdjęcia, kolejnego zdjęcia lub zamknięcie obecnego zdjęcia. Niestety, zmieniający się kształt myszki, przesuwające się zdjęcie, i denerwujące ładowanie przy każdym kliknięciu, nie ułatwiają niczego użytkownikowi. Jeśli użytkownik wybierze opcję “pełny ekran”, znika nawigacja przeglądarki, tym bardziej komplikując wszystko. To jest przykład złego wpływu Flash na doświadczenie użytkownika.

Podsumowanie

Podsumowując, interfejs i prezentacja fotografii są ładne i inspirujące, i możliwość Flash także. Nawigacja jest ciekawa oraz skomplikowana. Z perspektywy wzoru i tworzenia, można stronę podziwiać. Niestety, dla użytkownika, taka strona to koszmar, i może doprowadzić do frustracji. Jeśli chodzi o Flash, projektanci stron często skupiają się na pochwaleniu się swoją wiedzą zamiast skupić się na użytkowniku. Wybór Flash zamiast JavaScript do stworzenia animacji galerii to nie jest dobry wybór.

Wystarczy kilka poprawek jak np. stworzenie prostego menu które byłoby widocznie na każdej stronie ekranu. Zdjęcia w galerii powinny być wymierzone od nowa, tak aby zajęły 100% ekranu, aby użytkownik nie musiał zjeżdżać myszą w dół aby zobaczyć zdjęcie w całości. Przydałoby się zmniejszyć rozdzielczość zdjęć, aby szybciej się ładowały na stronie.

Justin Lerner

Strona Justina Lernera ma ciekawą nawigację i potwierdza, że strona łatwa w użyciu może być także estetyczna. Posiada tradycyjne menu poziome, tuż pod logo, czyli w miejscu w którym powinno się pojawić. W menu jest tylko pięć rzeczy, czyli pięć sekcji strony. Czcionka jest duża, widoczna, i każdy element menu zmienia kolor gdy się przejedzie po nim myszką, stając się jeszcze bardziej widocznym. Gdy się kliknie na każdy element w menu, powiększa się pokazując pełne treści tej sekcji. Czyli wszystko na stronie internetowej jest widoczne na jednej stronie, nie zaśmiecając przy tym interfejsu.

Strona jest prosta w użyciu ponieważ jest zaprojektowana jako kratka. Na tej stronie pojawia się drugie menu tuż nad głównym menu. Estetycznie na to patrząc, jest to nowoczesna metoda, i ładnie się komponuje ze stroną. Lecz ze strony użytkowania, podwójne menu może pogubić użytkownika ponieważ możliwe jest kliknięcie na tę samą nazwę sekcji w obu menu w celu sprawdzenia czy treści są te same. Menu jest przydatne ponieważ użytkownik widzi w której sekcji obecnie jest.

Podsumowanie

Generalnie, projektant strony postarał się, łącząc dobre wzoru z technikami kodowania aby stworzyć ładną stronę internetową która jest łatwa w użyciu. Można wprowadzić małe zmiany aby poprawić użytkowanie strony bez zmiany wyglądu, np. usuwając podwójne menu. Przydałoby się też więcej wolnego miejsca i kontrastujące czcionki, ponieważ trzeba najechać na treści aby odróżnić je od tego w tle.

Shelton Fleming

Pierwsze doświadczenie ze stroną Shelton Fleming może nie być najlepsze, ale zapewne zamieni się w przyjemne. Na powitanie, pojawiają się dwa kwadraty, jeden żółty “Ideas” (pomysły) i drugi szary “Experiences” (doświadczenia). Nie wiadomo o co tu chodzi. Nie ma żadnych elementów nawigacyjnych. Dopiero po przejrzeniu całej strony, użytkownik dowiaduje się że idea tej strony to zamienianie pomysłów na doświadczenia, i jest to zrozumiałe dla użytkownika, podkreślając markę firmy.

Nawigacja całej strony jest podobna do pierwszego ekranu – dwie sekcje umieszczona po przeciwnych stronach w poziomie. Jeśli przejedzie się po nich myszką, pojawia się pionowe menu z widocznymi elementami. Klikając na każdy element menu, użytkownik widzi jego treści tuż obok.

Podsumowanie

Konsekwentna i intuicyjna nawigacja, duże czcionki kontrastujące ostro z tłem, czyste obrazki, i użycie wolnego miejsca sprawiają że nawigacja po tej stronie jest przyjemna. Natomiast warto by było usunąć ekran powitalny który oferuje bardzo mało informacji i nie jest zrozumiały. Cała strona internetowa posiada dużo mocnych elementów marki, więc nie warto ryzykować frustrującą stroną na początku.

Chris Wang

Strona przedstawia projekty Chrisa Wanga, i to jest pierwsza rzecz jaką użytkownik widzi wchodząc na stronę – lista tytułów projektów wraz z ikonkami które otwierają się jak akordeon gdy się na nie kliknie. Pojawia się wtedy galeria zdjęć związanych z wybranym projektem. Na pierwszy rzut oka, użytkownik może nie wiedzieć że to jest lista projektów ponieważ słowo “Projekty” jest ciut jaśniejsze i wtapia się w tło. Tytuły projektów robią się pomarańczowe gdy przejedzie się po nich myszką, i można na nie kliknąć.

Można nawigować po stronie klawiaturą, czyli strzałkami aby przejrzeć różne projekty.

Podsumowanie

Nawigacja jest dość intuicyjna i łatwo jest przejść z projektu na projekt. Od razu pokazują się zdjęcia różnych projektów. Natomiast można poprawić możliwość zamknięcie projektu po obejrzeniu, ponieważ cały czas musi być otwarty jakiś projekt. Klikając na kolejny projekt, można zastąpić obecny tym nowym, ale lepiej by było gdyby pojawiła się wtedy lista projektów.

Jessica Caldwell

Na tej stronie nawigacja jest w formie przesuwania myszką po stronie. Ciężko znaleźć informacje o autorze strony internetowej ponieważ po zjechaniu w dół, pojawia się lista rzeczy na które nie można kliknąć. Jedynie są linki do stron społecznościowych i stron portfolio autora, czyli same zewnętrzne linki.

Użytkownik może się poddać usiłując znaleźć cokolwiek na tej stronie, ale wystarczy przejechać myszką po każdym kształcie diamentu w celu uzyskania podstawowych informacji, jak biografia autora czy dane kontaktowe. Każdy diament posiada projekty autora oraz informacje których użytkownik zapewne szuka. Niestety, nie wiadomo który diament posiada jakie informacje. Gdy się kliknie na rzeczy w diamencie, pojawiają się treści pozostałych diamentów. Wizualnie, ładnie to wygląda, lecz nie ułatwia użytkowania.

Podsumowanie

Na stronie jest dużo wolnego miejsca, a to jest dobre jeśli chodzi o użytkowanie. Dodatkowo, strona wygląda przyjemnie. Natomiast, aby ułatwić użytkowanie, warto poprawić nawigację umieszczając tradycyjne menu w górnej części strony i wstawiając proste menu po prawej stronie. Obecny diamentowy wzór może pozostać taki jaki jest ponieważ kojarzy się z autorem, ale można zadbać o to aby zajął mniej miejsca, aby użytkownicy widzieli linki na dole. Warto też zadbać o to aby można było kliknąć w te linki aby były przydatne.

McCormack & Morrison

Agencja McCormack & Morrison zadbała o to aby ich slogan “Good Old Fashioned New Media” (Dobre Starodawne Nowe Media) przemienił się na wizualne doświadczenie na ich stronie portfolio. Widać mocną tożsamość marki na stronie i uczucie retro poprzez wyraźne czcionki. Na głównej stronie pojawia się tylko logo i link do strony “o nas”, po lewej i prawej stronie na górze. Link “About us” (o nas) przedstawiony jest jako dymek rozmowy.

Na dole po prawej stronie jest umieszczony guzik “Our work” (nasze prace), zachęcając użytkowników do kliknięcia. Widać że strona nie jest jednostronna, ponieważ pojawiają się projekty agencji po zjechaniu w dół, a po przejechaniu w bok, pojawiają się kolejne zdjęcia wybranego projektu. Gdy się przegląda projekty, pojawiają się strzałki umożliwiające przegląd projektu. Można także przejrzeć projekty używając strzałek na klawiaturze. To stwarza przyjemną, szybką nawigację strony. Kolejny plus to jest to, że strona wykorzystuje cały rozmiar ekranu.

Podsumowanie

McCormack & Morrison ułatwiają użytkowanie strony, ale warto by było wprowadzić opcję przeglądania projektów nie po kolei. To nie jest wielki błąd strony ponieważ ma tylko cztery projekty, ale meczące jest to że trzeba przejrzeć wszystkie projekty aby trafić na wybrany. Kolejny błąd to jest to że nie wiadomo który projekt będzie przeglądany bez kliknięcia na każdy kolejny.

Moka

Argentyńska agencja Moka wie że ich strona przyciągnie potencjalnych klientów języka hiszpańskiego z Południowej Ameryki. Zamiast zaoferować opcję zmiany języków, korzysta z adresów IP klientów, zmieniając język na angielski lub hiszpański w zależności od ich lokalizacji. To ułatwia użytkowanie. Warto by było poinformować użytkownika o wybranym języku i dać możliwość zmiany na inny język ponieważ ktoś może odwiedzać stronę nie ze swojego urządzenia albo może woleć inny język.

Brakuje na stronie widocznej nawigacji, ale są instrukcje na dole które mówią żeby przesunąć myszką po bokach aby zobaczyć prace, i że można użyć strzałek klawiatury. Te instrukcje są mało widoczne, i ogólnie intuicyjna nawigacja nie powinna wymagać instrukcji. Nie ma widocznego menu na stronie. Wpierw pojawia się abstrakcyjny wzór wraz ze sloganem Moka, także użytkownik wie jaką stronę odwiedza. Nawigacja pojawia się po bokach wzoru w formie strzałek gdy przejedzie się po nim myszką. Niestety, nie jest to najlepsza metoda.

Klikając na te strzałki, użytkownik ma możliwość przejrzenia projektów firmy po kolei. Tu pojawia się problem ponieważ użytkownik musi przejrzeć wszystko aby znaleźć ten projekt którego szuka. Opis projektu jest ledwo widoczny i pojawia się po lewej stronie na dole i jeśli użytkownik nie zauważy opisu, będzie mu ciężko zrozumieć na co patrzy.

Kolejny problem na stronie to jest to że nie można kliknąć na logo aby wrócić na główną stronę. To jest standard na stronach, a właściwie strona Moka nie posiada żadnej możliwości powrotu do strony głównej poza klikaniem w strzałki po kolei. To może nieco zdenerwować użytkownika. Gdy się najedzie myszką na logo, pojawiają się informacje o firmie oraz dane kontaktowe. To jest dobry pomysł ponieważ interfejs pozostaje czysty. Niestety, nie jest to zbyt intuicyjne ponieważ użytkownicy najprędzej wejdą na logo tylko po to aby wrócić na główną stronę.

Podsumowanie

Ogólnie strona się minimalistyczna, czysta, ma dużo wolnego miejsca, i pokazuje portfolio firmy wyraźnie, a to wszystko kreuje pozytywne doświadczenie użytkownika. Przedstawienie możliwości wyboru projektów do obejrzenia, i możliwość obejrzenia ich nie po kolei, by poprawiło doświadczenie użytkownika. Dodatkowo, korzystne by było zaoferowanie łatwego powrotu do strony głównej, oraz wyświetlenie informacji o firmie i możliwości kontaktu.

Ostatnie myśli

Po przejrzeniu tych stron portfolio, widać że strona internetowa może być łatwa w użyciu a jednocześnie mieć przyjemny interfejs. Można by analizować każdą stronę dokładniej, ale warto pamiętać przede wszystkim że chodzi o jeden ważny element: dać użytkownikowi możliwość dotarcia do celu, bo przecież to jest najważniejsze w użytkowaniu. Jeśli chodzi o strony portfolio, użytkownik może chcieć dowiedzieć się więcej o autorze strony, zobaczyć jego projekty, lub się z nim skontaktować. Celem jest zidentyfikowanie i zaprojektowanie tego co chce się osiągnąć. Nie jest to łatwe, ale zostanie kiedyś wynagrodzone.