Jeśli chodzi o projektowanie lub przeprojektowanie strony internetowej, łatwo jest skupić się w całości na kwestii estetyki. Czy ten odcień niebieskiego wygląda dobrze? Czy logo powinno znajdować się po prawej czy lewej stronie ekranu? Co jeśli umieścimy gigantyczny animowany GIF na środku strony? Jak sprawić aby strona internetowa była funkcjonalną?

Jednak w świecie, w którym istnieje ponad 1,5 miliarda witryn, na których mogą trafić nasi potencjalni użytkownicy, musisz upewnić się, że Twoja strona jest nie tylko ładna ale i funkcjonalna. Projektując witrynę internetową, oprócz wyglądu należy uwzględnić jej użyteczność, łatwości użytkowania oraz  intuicyjność w obsłudze.

Na zgłębianiu każdego z wyżej wymienionych aspektów można poświęcić nieograniczoną ilość czasu. Dlatego aby trochę Ci pomóc na starcie przygotowaliśmy listę podstawowych wytycznych i najlepszych praktyk, które możesz zastosować przy swoim pierwszym projekcie.  

Prosta strona

Chociaż wygląd Twojej witryny jest z pewnością ważny, większość ludzi nie odwiedza Twojej witryny, aby ocenić, jak elegancki jest projekt. Chcą wykonać jakąś akcję lub znaleźć konkretną informację. 

Dlatego niepotrzebne elementy projektu (tj. takie, które nie służą żadnemu celowi funkcjonalnemu) tylko przytłoczą i utrudnią odwiedzającym osiągnięcie tego, co próbują osiągnąć. 

Z punktu widzenia użyteczności i UX prostota jest Twoim najlepszym przyjacielem. Możesz zastosować tę zasadę w różnych formach, takich jak: 

• Kolory: Zasadniczo nie używaj zbyt wiele. Nie zaleca się użycia w projekcie więcej niż maksymalnie pięciu (plus minus dwa) różnych kolorów. 
• Czcionki: wybrane czcionki powinny być bardzo czytelne oraz wpasowywać się w charakter całego projektu. W przypadku koloru tekstu, ponownie, zachowaj minimalizm i zawsze upewniaj się, że kontrastuje z kolorem tła. Powszechnie zaleca się używanie maksymalnie trzech różnych czcionek w jednym projekcie, w maksymalnie trzech różnych rozmiarach. 
• Grafika: używaj grafik tylko wtedy, gdy pomagają użytkownikowi wykonać zadanie lub wykonać określoną funkcję.  

Hierarchia wizualna

Ściśle związana z zasadą prostoty hierarchia wizualna polega na takim rozmieszczaniu i porządkowaniu elementów witryny, aby odwiedzający naturalnie skłaniali się najpierw ku najważniejszym elementom. 

Pamiętaj, że jeśli chodzi o optymalizację pod kątem użyteczności i UX, celem jest poprowadzenie odwiedzających do wykonania pożądanego działania, ale w sposób, który nie nastręcza problemów. Dostosowując położenie, kolor lub rozmiar niektórych elementów, możesz ukształtować swoją witrynę w taki sposób, aby uwaga użytkowników była w sposób naturalny bardziej przyciągana do tych elementów. 

Nawigacja po witrynie 

Zaplanowanie intuicyjnej nawigacji w witrynie ma kluczowe znaczenie dla ułatwienia użytkownikom znajdowania tego, czego szukają. Najlepiej byłoby, gdyby odwiedzający trafił na Twoją witrynę i nie musiał zastanawiać się, gdzie kliknąć w następnej kolejności. Przemieszczanie się z punktu A do punktu B powinno przebiegać jak najłatwiej. 

Oto kilka wskazówek dotyczących optymalizacji nawigacji w witrynie: 

• Zachowaj prostą strukturę głównej nawigacji  
• Uwzględnij nawigację w stopce swojej witryny. 
• Rozważ użycie menu nawigacyjnego na każdej stronie aby użytkownicy zapamiętali ścieżkę nawigacji. 
• Umieść pasek wyszukiwania u góry witryny, aby użytkownicy mogli wyszukiwać według słów kluczowych. 
• Nie oferuj zbyt wielu opcji nawigacji na stronie. Znowu prostota! 
• Uwzględnij linki w kopii strony i wyjaśnij, dokąd prowadzą te linki. 

Spójna strona

Oprócz zachowania spójności nawigacji ogólny wygląd i styl witryny powinny być podobne na wszystkich stronach witryny. Tła, schematy kolorów, czcionki, a styl pisania i przekazu to obszary, w których spójność ma pozytywny wpływ na użyteczność i UX. 

Nie oznacza to, że każda strona powinna mieć ten sam układ. Możesz tworzyć różne układy dla określonych typów stron (np. landing pages, stron informacyjnych itp.). Stosując konsekwentnie te układy, ułatwisz odwiedzającym zrozumienie, jakiego typu informacje mogą znaleźć na danej stronie. 

Responsywnośc  

Według najnowszych statystyk aż ok. 48% wyświetleń wszystkich  stron internetowych pochodziło z urządzeń mobilnych, takich jak smartfony i tablety. Bardzo często zdarza się, że użytkownicy rezygnują z przeglądania strony, nawet jeśli są nie zaciekawieni, ponieważ nie wyświetla się ona poprawnie na ich urządzeniu.  

Wniosek: aby zapewnić odpowiednio dobre wrażenia użytkownikom odwiedzającym Twoją stronę, musi ona być zgodna z wieloma różnymi urządzeniami i rozmiarami ekranów z których korzystają odwiedzający. W świecie technologii jest to znane jako projektowanie responsywne. 

Projektowanie responsywne oznacza uwzględnienie elastycznej struktury strony internetowej na każdym etapie jej projektowania.  W responsywnej witrynie rozmiar treści jest automatycznie zmieniany i przetasowywany w celu dopasowania do wymiarów urządzenia, z którego korzysta odwiedzający. Można to osiągnąć za pomocą szablonów HTML dostosowanych do urządzeń mobilnych lub tworząc specjalną witrynę mobilną. 

Ostatecznie dużo ważniejsze jest zapewnienie odpowiedniego doświadczenia na różnych urządzeniach niż identyczne wyświetlanie na tych urządzeniach. 

Oprócz przyjazności dla urządzeń mobilnych, warto poświęcić trochę czasu na przetestowanie kompatybilności Twojej witryny z różnymi przeglądarkami. Najprawdopodobniej przeglądałeś swoją witrynę tylko w jednej przeglądarce internetowej, czy to Google Chrome, Safari, Firefox, czy coś innego. 

Nadszedł czas, aby otworzyć swoje strony w każdej z tych przeglądarek i ocenić, jak wyglądają Twoje elementy. Najlepiej byłoby, gdyby nie było dużej różnicy w prezentacji, ale nie możesz być pewien, dopóki sam nie zobaczysz. 

Konwencjonalność 

Dużym wyzwaniem w projektowaniu stron internetowych jest zrównoważenie oryginalności z Twoimi początkowymi wyobrażeniami. Większość z nas to doświadczeni internauci i istnieją pewne konwencje, do których z biegiem czasu przyzwyczailiśmy się. Mowa tu o konwencjach takich jak: 

• Umieszczenie nawigacji głównej na górze (lub po lewej stronie) strony. 
• Umieszczenie logo w lewym górnym rogu (lub na środku) strony. 
• Logo, które można kliknąć, aby zawsze sprowadzało gościa z powrotem na stronę główną. 
• Posiadanie linków i przycisków, które zmieniają kolor/wygląd po najechaniu na nie. 
• Korzystanie z ikony koszyka na zakupy w witrynie e-commerce. Na ikonie znajduje się również znaczek z numerem oznaczającym liczbę produktów w koszyku. 
• Zapewnienie, że suwaki obrazu mają przyciski, które użytkownicy mogą kliknąć, aby ręcznie obrócić slajdy. 

Chociaż niektórzy decydują się na całkowite wyrzucenie ich przez okno ze względu na brak oryginalności to jest to błąd. W ramach konwencjonalności sieciowej wciąż jest dużo miejsca na kreatywność.