Projekt się liczy – o dobrze zaprojektowanych stronach

fot. unsplash.com

…która najlepiej spełniła nasze oczekiwania.

Czy to wszystko?

Oczywiście nie. Jak napisałem wyżej, otrzymamy tyle opinii na temat dobrych projektów stron, ile osób o nie zapytamy. Dobry projekt to nie tylko świetny design, przemyślana i nienaganna estetyka, nienarzucająca się stylistyka, ale również przemyślany UX, swego rodzaju wyczucie potrzeb użytkownika i przygotowanie zawartości, która te potrzeby będzie realizować.

Zacznijmy od podstaw

W przypadku stron internetowych, jak i wielu innych projektów, nie tylko w sferze online, ważne jest dobrze pierwsze wrażenie. To, w jaki sposób zostało podane „danie”, jest równie ważne, jak jego „smak”. Na przykładzie serwisu Smashing Magazine możemy zauważyć, jak ciekawie można zaprojektować układ stron, nie zaburzając przy tym standardów, które utarły się przez lata – jak chociażby układ menu. W przypadku Smashing Magazine menu, podobnie jak na wielu innych stronach, ułożone zostało w poziomie na samej górze, a przycisk wyszukiwania w prawym rogu.

Na LinkedInie obserwuje nas ponad 100 tys. osób. Jesteś tam z nami?

Obserwuj

Movember/Wąsopad: jak marki zachęcają do profilaktyki męskich nowotworów [PRZEGLĄD]

Przechodząc do wybranego postu, trafimy do „dobrze znanego” sobie miejsca – czyli sekcji tekstowej, która poza górną częścią jest raczej standardowa, jednocześnie będąc przyjazną, zgrabną i przyciągającą.

Mamy newsletter, który rozwija marketing w Polsce. A Ty czytasz?

Rozwijaj się

Smashing Magazine zaskakuje prostymi smaczkami graficznymi, które wyświetlą się po kliknięciu, przełączeniu opcji czy najechaniu myszką/touchpadem.

Sympatyczna grafika przytoczonego serwisu sprawia dobre pierwsze wrażenie, wykorzystując charakterystyczne rozwiązania, nie naruszając jednak „domyślnie” przyjętego porządku w internetowej sieci. Marka zachowuje zatem swoją tożsamość, nie przenosząc użytkownika do zupełnie innego świata, w którym nie mógłby się odnaleźć.

Podobny przykład przedstawia sobą alistapart.com, który tylko w górnej sekcji artykułów wykorzystuje dodatkowe elementy (m.in. elementy social media), cały środek przedstawiając na zwyczajnym, białym, nierozpraszającym tle.

Właściwym założeniem w przypadku dłuższych treści jest zachowanie pewnego rodzaju minimalizmu. Dobry projekt serwisu lub bloga, na którym spodziewamy się dużego ruchu, powinien zakładać przykucie uwagi użytkownika przede wszystkim na sednie sprawy – czyli contencie, bez odciągania jego uwagi „bajerami” graficznymi i innymi zbędnymi elementami, które przeszkadzają w skupieniu się. W artykułach, które znajdziemy na Boagworld.com, spotykamy się z charakterystycznym, delikatnym projektem, który wykorzystuje niewielką paletę barw, spokojny layout i względny minimalizm.

Ciekawą wstawką w artykułach są wybrane fragmenty tekstu, które autorzy uznali za najciekawsze. Użytkownicy mogą w prosty sposób udostępnić je na Twitterze.

Strona dedykowana użytkownikom

Bardzo ważnym zadaniem w tworzeniu dobrego projektu strony jest pamiętanie o tym, aby zawartość była gotowa na oczekiwania użytkowników. Niezależnie od tego, czy celujemy w czytelników bloga, czy poszukujemy klientów lub partnerów biznesowych, powinny zadbać o to, aby projekt dopasowany był do głównego targetu. Przykładem takiej strony jest Chop-Chop.org. Wystarczy spojrzeć na centralną część sekcji, która pojawia się od razu po wejściu, aby:

• Dowiedzieć się co mówi o sobie firma;
• zlecić wycenę;
• zobaczyć referencje.

Takie podejście do projektowania www najczęściej wynika ze świadomości rozpoznawalności na rynku własnej marki.

Potencjalni klienci mogą znać już brand, a strony poszukują w oczywistym celu odnalezienia kontaktu lub właśnie zlecenia wyceny, lub są przekonani o swoich potrzebach i bez większych ceregieli chcą przejść do konkretów, a dopiero w następnym etapie zagłębić się w szczegóły.

Uporządkowanie danych

Wśród niektórych osób, które lubią chaotyczny design, może panować przekonanie, że spontaniczność i własna, zupełnie alternatywna wizja jest ważna, gdyż pomaga lepiej wyrazić markę. W świecie stron internetowych taki pogląd nie zawsze się sprawdzi, o ile nie posiadamy jasno sprecyzowanej grupy docelowej, która jest dokładnie taka sama jak my. Projekt strony internetowej powinien zakładać, że pewne elementy wynikać będą z wcześniejszych doświadczeń użytkowników i ich przyzwyczajeń. Z tego względu warto zadbać o to, aby to, co nie jest absolutnie najistotniejsze, ale wciąż ważne i raczej obowiązkowe, było zaprojektowane zrozumiale i w sposób logiczny. Przykładem takiego rozwiązania jest dolne menu 10clouds.com:

Jak widać, agencja 10Clouds zadbała o to, aby zgrabnie nanieść wiele danych w jednym miejscu, zachowując przy tym porządek i ład.

Mniej, ale więcej

Pod tym sformułowaniem kryje się projektowanie strony w sposób, który pozwala na przekazanie większej ilości informacji przy wykorzystaniu mniejszej ilości przestrzeni. Jednym z przykładów jest strona Tooploox.com. Projektanci strony, aby oszczędzić przestrzeń w wymiarze wertykalnym, postanowili na naniesienie elementów oferty w jednej sekcji, kolejne z nich przełączane są po kliknięciu w grafikę symbolizującą usługę.

Od A do Z

Chociaż poniższy przykład nie sprawdzi się w przypadku każdej strony, ba – nie zawsze nawet będzie pasować do danego typu strony, jest interesujący ze względu na wykorzystanie czegoś w rodzaju historii w przestrzeni strony internetowej. Przykład Spotify sprawdza się tutaj znakomicie. Pierwsza sekcja Spotify.com przedstawia markę i mówi użytkownikowi, co właściwie oferuje.

Druga sekcja przenosi użytkownika do szczegółów. 

Trzecia sekcja przedstawia zalety aplikacji, wskazując na tylko kilka elementów, które dla nowych użytkowników mogą być kluczowe.

Przedostatnia sekcja to rodzaj zachęty dla potencjalnego użytkownika. Marka skupia się tutaj na tym, aby przykuć uwagę użytkownika ciekawym featurem, który może stanowić o finalnej decyzji wybrania tej oferty.

Ostatnia sekcja pozwala użytkownikowi na podjęcie prostej decyzji. Pakiet darmowy lub pakiet płatny. Na podstawie informacji zebranych z poprzednich 4 sekcji, użytkownik może już świadomie podjąć decyzję na temat wybrania Spotify w wersji płatnej lub bezpłatnej. Wszystkie opcje wylistowane zostały przejrzyście i rzetelnie, aby nie wzbudzać wśród użytkowników sztucznej presji.

Elementy specjalne

Strony internetowe czasami wykorzystują specjalne elementy, które podkreślają istotę danej zawartości. Coraz popularniejsze stają się chociażby animowane tła, które nierzadko zastępowane są również zapętlonym, skompresowanym materiałem wideo, który w skrócie przedstawia np. zespół firmy. Elementami specjalnymi, które dobrze prezentują się niezależnie od branży czy grupy docelowej, są te, które wespół z samą materią, której dotyczą, tworzą spójną całość i prezentują się lepiej razem, aniżeli oddzielnie. Poniższy przykład pochodzi ze strony Tooploox.com:

Nieszablonowy design – ryzyko i fame

Pod dość enigmatycznym pojęciem nieszablonowości może co prawda kryć się strona, która, choć zbudowana chaotycznie podoba się jej autorowi i wśród jej najważniejszych odbiorców budzi podziw. W moim odczuciu nieszablonowy design jest natomiast mieszanką zmysłu estetycznego, elegancji i wykorzystania praktycznego rozwiązania, którego wielu z nas poszukuje, ale tylko niektórzy potrafią je stworzyć i wdrożyć. Świeżym przykładem takiego projektu strony www jest narrowdesign.com, które jest wyjątkowym portfolio:

Wnioski

Aby strona internetowa realizowała swoje cele, musi spełniać oczekiwania użytkowników. Wśród nich znajdziemy zarówno potrzebę wiedzy, potrzebę odkrywania, potrzebę zgłębiania doświadczeń estetycznych, potrzebę zdobywania informacji na temat usług i produktów czy potrzebę bycia konsumentem. Projekt strony internetowej, który się liczy, zawsze powinien być dopasowany do potrzeb osób po drugiej stronie ekranu. Dzięki wypracowaniu kompromisów w wymiarze grafiki, przekazu, efektów czy skali, jesteśmy w stanie tworzyć strony, które zadowalają zarówno nas jako twórców, jak i użytkowników jako naszych odbiorców.