SEO

Jak ulepszyć UX/UI strony - 7 porad dotyczących usability

60
10
0

Dlaczego ja, będąc specjalistą od SEO, daję porady na temat usability? To proste: użytkownicy szybko opuszczają nieużyteczne witryny. Wręcz przeciwnie, analiza pytań związanych z użytecznością może poprawić czynniki behawioralne i widoczność strony. Szczególnie te wskazówki będą pomocne dla webmasterów, którzy chcą zrobić szablon samodzielnie.

Krótkie streszczenie tego artykułu:

  1. Jak powinno wyglądać dobre logo.
  2. Jak dopasować wygląd linków.
  3. Jak optymalizować przycisk.
  4. Jak dobrać kolory do strony internetowej.
  5. O czym warto pamiętać przed wyborem zdjęcia.
  6. Jak ustawić marginesy zgodnie z zasadą bliskości.
  7. Jak dostosować wygląd tabeli?

Jak powinno wyglądać dobre logo?

Logo lepiej umieszczać w lewym górnym rogu. Większość ludzi czyta od lewej do prawej, i to będzie pierwsza rzecz, którą zobaczą. Jeśli strona nie adaptuje się do wielkości ekranu urządzenia lub przeglądarki, to spowoduje przycięcie prawej części witryny.

Логотип лучше размещать слева вверху

VS.

Если разрешение экрана будет недостаточным, то браузер обрезает именно правую часть страницы

Pod logo można umieścić krótki opis tego, czym zajmuje się firma.

Ważne jest, aby wybrać font dla logo w taki sposób, żeby on pasował do tematyki projektu. Gruby font z szerokimi znakami stwarza poczucie bezpieczeństwa i stabilności. Idealnie do stosowania w tematykach związanych z nieruchomością, samochodami, budownictwem i tak dalej.

Жирный шрифт, с толстыми начертаниями букв - создает ощущение надежности, стабильности и тяжеловесности

Font z cienkimi, wygładzonymi liniami dobrze pasuje do tematyk związanych z urodą. Jest to związane ze stereotypem “szczupły znaczy piękny”

Шрифт с тонкими, вытянутыми линиями - хорошо подойдет для тематик, которые ассоциируются с красотой

Частично это связано с ассоциацией - стройный = красивый

Aby przekazać poczucie prędkości, można użyć kursywy a fontu pochylonego, ponieważ obiekty, które poruszają się szybko, wydają się niejasne i ukośne:

Чтобы передать скорость, можно использовать курсив, или наклонный шрифт 

Logo firm kurierskich:

объекты, которые движутся быстро, кажутся размытыми и наклонными

Чтобы передать скорость

Jak dopasować wygląd linków

Linki powinny być podkreślone, żeby użytkownik mógł szybko zorientować się, gdzie znajduje się link bez użycia kursora.

Чтобы передать скорость

Teraz za połowę ruchu odpowiadają urządzenia mobilne, podczas pracy z którymi użytkownicy po prostu klikają w wybrane miejsce.

Wyjątek - linki w menu:

Anchor linku musi odpowiadać temu, co użytkownik zobaczy na stronie:

Jeśli działanie jest ważne dla biznesu, to lepiej użyć przycisku. Na przykład, aby złożyć zamówienie.

Warto rozróżniać linki, które już były klikane przez użytkownika. Dla odwiedzonych linków można wybrać ciemniejszy odcień tego samego koloru, a nieodwiedzonych - jaśniejszy. W taki sposób zachęcamy użytkowników do kliknięcia w link.

Jeszcze jedna reguła. Linki, po kliknięciu w które odbywa się jakieś działanie bez odświeżania strony są podkreślone linią przerywaną. To może być pojawienie się okna pomocy, jak niekiedy robią serwisy informacyjne. W innych przypadkach link należy podkreślić ciągłą linią.

Przed linkami prowadzącymi do pobrania plików można umieścić ikony odpowiadające formatowi dokumentu:

Например, тематика - изготовление тортов на заказ

Jak optymalizować przycisk

Jeśli przycisk jest ciemniejszy niż tło, skok należy zrobić ciemniejszym od koloru przycisku. Jeśli tło jest ciemniejsze niż przycisk, skok powinien być ciemniejszy niż kolor tła:

Например, тематика - изготовление тортов на заказ

Przycisk może mieć cztery stany: prosty (input{}), najeżdżanie kursorem myszy (input:hover{}), kliknięcie (input:active{}), nieaktywny (input[disabled="disabled"]{}). Określ stan przycisków dla użytkownika, aby im było łatwiej zrozumieć logikę procesu.

Указывайте состояния кнопок, для того, чтобы пользователю было легче понимать что  в текущий момент происходит

Jak dobrać kolory do strony internetowej

Wpisujemy do paska wyszukiwania kilka podstawowych pytań o wysokiej częstotliwości, dotyczących tematyki strony, i wybieramy grafiki. Dalej patrzymy na kolory wyświetlanych obrazów. Trzeba starać się zrozumieć, z jakimi kolorami kojarzy się wybrana tematyka dla większości użytkowników.

Na przykład, ciasta na zamówienie:

Например, тематика - изготовление тортов на заказ

Podstawowe kolory - biały, brązowy, czerwony (różowy), zielony. Czerwony rozpala apetyt, co jest ważne dla tematyki piekarsko-cukierniczej.

Przykład designu:

Пример дизайна, выполненного в этих цветах

Jeszcze jeden przykład - szkolenie psów:

дрессировка собак. Скрин из выдачи 

Podstawowe kolory: zielony, beżowy, brązowy, czarny.

Przykład designu z użyciem tych kolorów.

Пример дизайна, выполненного в этих тонах

Aby uniknąć zamieszania, łatwiej jest używać nie więcej niż trzy lub cztery kolory.

Szary jest najczęściej stosowany do elementów drugorzędnych, które powinne być na stronie, ale nie wyróżniać się. Głównym zadaniem jest położenie nacisku na elementy za pomocą kontrastu kolorów.

O czym warto pamiętać przed wyborem zdjęcia.

Lepiej jest przemyśleć z wyprzedzeniem proporcje oraz maksymalny rozmiar zdjęć, które będą umieszczone w witrynie. Ponieważ urządzenia mobilne automatycznie dopasowują rozmiar obrazów, dla nich nie musimy ograniczać rozmiar zdjęcia, ale konieczne jest, aby upewnić się, że obraz nie jest zbyt mały.

Dla tego żeby obrazy pasowały do okna wyszukiwarki, biorąc pod uwagę różne panele, zalecana szerokość stanowi 900-1000 pikseli a wysokość - 600-700 pikseli. Najbardziej rozpowszechnione są formaty 1:1, 3:2, 4:3:

Самые часто используемые пропорции

Żeby kadry o innych proporcjach dobrze wyglądały w przeglądarce, można wykorzystać takie rozmiary obrazu (w nawiasach kwadratowych - rozmiar obrazów do wyświetlania na stronie za pomocą tagu img):

  • 3:2 — 1800x1200 [900 х 600];
  • 3:2 — 1000x1500 [500 х 750];
  • 4:3 — 1800x1350 [900 х 675];
  • 4:3 — 1050x1400 [525 х 700];
  • 1:1 — 1200x1200 [600 х 600].

Jak ustawić marginesy zgodnie z zasadą bliskości.

Jest to małe i, moim zdaniem, bardzo przydatne zalecenie, które pomaga organizować elementy witryny a odległość między nimi.

Główna zasada polega na tym, żeby zrobić ustawienia wewnętrznych marginesów (znajdujących się wewnątrz elementów czy bloków) mniejszymi od zewnętrznych.

внешнее и внутреннее поле

Tekst z prawej strony jest wygodniejszy do czytania 

Jak dostosować wygląd tabeli?

GIF ilustrujący optymalizację tabeli

Просто GIF-ка, как оформлять таблицы

Wnioski

  1. Logo lepiej umieszczać w lewym górnym rogu. Front dla logo ma pasować do tematyki projektu.
  2. Linki powinne być podkreślone, etykieta musi odpowiadać temu, co zobaczy użytkownik.
  3. Jeśli działanie jest ważne dla biznesu, to lepiej użyć przycisku.
  4. Jeśli przycisk jest ciemniejszy niż tło, skok należy zrobić ciemniejszym od koloru przycisku.
  5. Za pomocą wyszukiwań grafiki zrozum z jakimi kolorami kojarzy się ta tematyka dla większości ludzi, i wykonaj witrynę w odpowiednich kolorach.
  6. Dla tego żeby obrazy pasowały do okna wyszukiwarki, biorąc pod uwagę różne panele, zalecana szerokość stanowi 900-1000 pikseli a wysokość - 600-700 pikseli.
  7. Zrób ustawienia wewnętrznych marginesów mniejszymi od zewnętrznych.
  8. Cel tabeli - wyświetlanie informacji w formie graficznej. W związku z tym, należy usunąć zbędne dane, dzielniki oraz separację kolorów „dla urody”.

Jeśli masz myśli i spostrzeżenia na ten temat, lub po prostu pewnego rodzaju sztuczki nie wahaj się napisać w komentarzach.

Found a mistake? Select it and press Ctrl + Enter

Komentarze (1 )

Последние комментарии

    Aby zostawić komentarz, zaloguj się

    Zapisz się

    na najbardziej użyteczny newsletter, dotyczący marketingu internetowego

    Najbardziej

    komentowane popularne czytane

    This site uses cookies and other tracking technologies to help navigate and your ability to provide feedback, analyze the use of our products and services, helps in our advertising and marketing efforts for better user convenience.