5 wskazówek tworzenia bloga wg trendów UX/UI na 2020 rok

Mogłoby się wydawać, że blogi nie są już tak popularnym medium jak w 2015 roku, jednak okazuje się, że wielu twórców nadal gromadzi wokół swoich stron rzeszę fanów. Na rynku polskojęzycznym powstaje coraz więcej blogów z wartościowymi technicznymi poradami – na przykład o tematyce marketingowej, SEO, czy User Experience. I chociaż trendy w projektowaniu blogów, zarówno pod względem UX jak i UI, zmieniają się niezwykle szybko, przedstawiamy te, które są najbardziej aktualne w 2020 roku. #wiemyjak

Tworzenie bloga tylko zgodnie z trendami UX/UI
Tworzenie bloga zgodnie z trendami UX/UI

W tym artykule dowiesz się o:


W jednym z naszych poprzednich artykułów pisaliśmy o tym, dlaczego prowadzenie bloga firmowego ma wpływ na pozycjonowanie stron. Blogi to nie tylko skuteczne narzędzie marketingowe, ale także przestrzeń do budowania relacji z użytkownikami, wzbudzania ich zainteresowania i zaufania. Dzięki blogowym wpisom można przez lata wypracowywać pozycję eksperta w danej dziedzinie.

Nie od wczoraj wiemy, że content is king i w 2020 roku te słowa są tak samo aktualne, ponieważ treść nadal ma ogromne znaczenie zarówno dla użytkowników, jak i dla robotów Google. Wielu blogowych twórców mocno skupia się na treści, zapominając o tym, że blogi powinny także cechować się dobrymi praktykami projektowymi i dużą dostępnością dla wszystkich użytkowników. Przy tworzeniu bloga warto stosować zasady zrozumienia doświadczeń użytkownika.

Tworząc bloga, pomyśl o przestrzeni!

Zaczynamy od prawdziwej podstawy projektowania, która niestety bardzo często jest pomijana na wielu, nawet popularnych blogach – mowa o marginesachwhite space.

Te dwa elementy są potrzebne, aby ułatwić użytkownikom czytanie wpisów na podświetlanych ekranach komputerów czy komórek. Aby mieć pewność, że artykuł zostanie przeczytany, powinien być on umieszczony w obszernych marginesach, zwłaszcza jeśli będzie to wpis dłuższy niż 1000 wyrazów. Im mniejszy margines, tym oczy muszą wkładać więcej wysiłku w proces czytania, a przez to szybciej się męczą, co zwiększa szansę na szybkie opuszczenie bloga przez użytkowników.

Z tego samego powodu powinniśmy stosować dużą ilość tzw. white space pomiędzy poszczególnymi nagłówkami, akapitami, czy nawet zdaniami. White space to przestrzeń oddzielająca od siebie poszczególne elementy na stronie.

Jak możemy zauważyć na poniższym przykładzie, wpisie ze strony uxdesign.cc, tekst jest osadzony wewnątrz dużej ilości przestrzeni, oraz podzielony na niewielkie akapity, przez co czytanie go nie sprawia wysiłku.

Screen - uxdesign.cc - przykład tekstu
Źródło: https://uxdesign.cc/how-do-children-interact-with-voice-search-14c54e747528

Zadbaj o czytelną czcionkę

Jest to kolejny element, który może wydać się oczywisty, jednak przed przejściem do bardziej zaawansowanych rozwiązań, warto zadbać o fundamenty.

Na wielu blogach nadal można zauważyć użycie czcionki o rozmiarze 12 px. Z pozoru może się wydawać, że zastosowanie mniejszej czcionki sprawi, że tekst będzie krótszy i bardziej zwarty, a przez to lepszy dla naszych oczu i mniej odstraszający dla potencjalnego czytelnika – niestety nie działa to w ten sposób.

Rozmiar czcionki powinien pozwalać na komfortowe przeczytanie tekstu bez przybliżania, czy powiększania tekstu, niezależnie od użytkownika, który będzie czytał wpisy. Optymalny rozmiar czcionki, oczywiście w zależności od jej rodzaju, zaczyna się od 16 px i może dochodzić nawet do 22 px.

Warto także pamiętać, że nie każda czcionka, która wygląda estetycznie w nagłówkach, nadaje się do czytania jednolitego tekstu na 10 000 znaków. W tym momencie pewnie wielu czytelników pomyśli o Comic Sans MS, Papyrus, czy Courier New (i słusznie!) – warto jednak zwrócić uwagę na to, że takie czcionki jak Arial lub Times New Roman również nie są odpowiednie dla naszych oczu przy czytaniu jednolitego i długiego tekstu.

Poukładaj wpisy blogowe

Jeden z najpopularniejszych trendów, który możemy zauważyć u największych UX-owych graczy, takich jak Facebook, Dribbble, Pinterest, Twitter, Trello, Airbnb, Linkedin, Microsoft, czy Google to card-based design.

card-based-design-pinterest
Źródło: Pinterest

Jeśli prowadzimy bloga systematycznie, to z upływem czasu możemy mieć na nim kilkadziesiąt, czy nawet kilkaset wpisów – taka ilość treści wymaga prostego i przejrzystego przedstawienia użytkownikowi, który powinien bez problemu odnaleźć interesujące go wpisy, niezależnie od daty ich publikacji. W tym przypadku przy projektowaniu bloga idealnie sprawdzi się właśnie card-based design. Czym jest card-based design? Najprostsza definicja, jaką można znaleźć, pochodzi ze strony uxplanet.org:

As the name suggests, a card-based design is made up of a number of cards — it’s a bit like a page with Polaroid prints. Each card contains an image, some text and is linked to a page that has more details, here is how a card-based design looks like in a wireframe

card-based-design-wg-uxplanetorg
Źródło: https://uxplanet.org/card-based-design-the-pros-cons-and-the-best-practice-2e5ccd6a606d

Dzięki takiemu przedstawieniu treści możemy wyświetlać bardzo wiele artykułów naraz, a do tego mamy ciekawą formę prezentacji, która będzie zarówno interesująca wizualnie, jak i przystępna dla użytkowników. Karty kojarzą nam się z dobrą organizacją informacji, a architektura kart pomaga nam łatwo rozpoznać, przywołać i przeczytać ważne informacje.

Używanie różnych rozmiarów obrazów i czcionek do reprezentowania najważniejszych lub najmniej ważnych elementów na kartach sprawi, że będą one bardziej czytelne dla użytkowników. Na kartach powinny znajdować się jedynie najistotniejsze informacje o wpisie blogowym, takie jak:

  • grafika,
  • tytuł,
  • autor,
  • fragment tekstu,
  • data,
  • kategoria,
  • przycisk Czytaj więcej,
  • coraz częściej spotykaną praktyką jest także dodawanie informacji o czasie potrzebnym na przeczytanie danego wpisu.

card-based-design-mediumcom
Źródło: medium.com

Fragmenty tekstu zachęcają użytkowników do kliknięcia karty danego wpisu, a także pomagają mu stwierdzić, czy artykuł jest interesujący. Daty pozwalają użytkownikom rozpoznać, czy artykuł jest aktualny, a autor dodaje do tekstów ludzkiego pierwiastka. Aby zmaksymalizować ilość wyświetlanych elementów, karty powinno się układać w 2 lub 3 kolumnach, w zależności od wielkości poszczególnej karty.

Jednym z największych plusów card-based design jest to, że takie rozwiązanie jest bardzo wdzięczne do zaadaptowania na wersje mobilne – na mniejszych rozdzielczościach ekranów będzie ono równie przejrzyste i dostępne, co na wersjach desktopowych. Ponadto, karty dają dużą widoczność elementów, przez co zwiększają łatwość kliknięcia przez użytkowników.

Twórz krótkie nagłówki

Dobry blog, to tworzenie przemyślanej struktury treści. Aby użytkownicy mogli szybko i precyzyjnie znajdować odpowiedzi na zadane przez nich w wyszukiwarce pytania, nagłówki i śródtytuły wpisów blogowych powinny być jasne i krótkie. Artykuły powinny być podzielone na mniejsze części, co również ma związek z informacjami przedstawionymi w pierwszej wskazówce. Znaczna część użytkowników czyta wpisy blogowe, aby odnaleźć informacje o nurtujących ich kwestiach. Jednak coraz częściej czytają oni jedynie jeden wybrany akapit, w którym jest omawiane dane zagadnienie – na to, który akapit zawiera odpowiedź na pytanie, powinien wskazywać właśnie nagłówek. Dobrze napisany nagłówek będzie dokładnie opisywać to, co użytkownik będzie mógł przeczytać w całym akapicie.

Daj możliwość udostępniania (na wszystkich urządzeniach)

Obecnie większość blogów umożliwia użytkownikom udostępnianie danej treści w mediach społecznościowych. Jednak nadal wiele witryn nie ma takiej możliwości na urządzeniach mobilnych i tabletach. Ilość użytkowników, którzy wybierają czytanie zarówno stron, jak i blogów na urządzeniach mobilnych, stale rośnie, a udostępnianie na mobile jest szybsze i prostsze niż na komputerach, dlatego tak ważne jest, aby dać użytkownikom taką możliwość.

W tym momencie powinno się pojawić pytanie – gdzie umieścić taki przycisk? Na urządzeniach mobilnych przestrzeń jest ograniczona i trzeba zrobić to rozsądnie.

Jak możemy zauważyć poniżej, na stronie medium.com wyświetlanej na urządzeniu mobilnym, przyciski udostępniania są umieszczone pod artykułami. Z tego poziomu użytkownicy mogą udostępniać dany artykuł na Twitterze, Facebooku i LinkedIn.
udostepnianie-wpisu-przyklad-mediumcom-mobile-2
Źródło: medium.com – wersja mobilna

Coraz więcej stron i aplikacji umożliwia udostępnianie na Messengerze, poprzez skrzynkę mailową, lub po prostu jako skopiowanie danego linka i wklejenie w dowolne miejsce. Jest to dobra praktyka, aby jeszcze bardziej skrócić drogę użytkownika do udostępnienia interesującej treści szerszemu gronu odbiorców, co będzie działało na korzyść rozpoznawalności naszej marki.

Jak teraz zaczniesz tworzenie swojego bloga?

Ocena artykułu:
5/5 (7)

Komentarze

Dodaj komentarz

  1. Gość pisze:

    Kwestia odpowiedniej przestrzeni w okół tekstu i niewielkie akapity, marginesy to kluczowa kwestia. Zauważyłem, że po zmianie tego na jednym blogu o 25% więcej osób scrollowało na sam dół tzn. 25% osób więcej przeczytało artykuł.

Zamów bezpłatną wycenę

Imię i Nazwisko
E-mail*
Numer telefonu*
Adres strony internetowej*
Treść wiadomości
TAK

Jeśli chcesz zostawić nam więcej danych wypełnij brief.

Otrzymaliśmy twoje zgłoszenie

Dziękujemy!

 

Co dalej?

  1. Otrzymasz od nas maila potwierdzającego zgłoszenie.
  2. Nasz wyspecjalizowany zespół już niedługo skontaktuje się z Tobą i opowie o dalszym procesie współpracy.
  3. W oczekiwaniu na telefon zapraszamy do zapoznania się z naszymi REFERENCJAMI.

KLAUZULA INFORMACYJNA

Informujemy, że:

  1. Administratorem Twoich danych osobowych jest EACTIVE wiemy jak sp. z o.o. sp. k. z siedzibą w Świętej Katarzynie, zarejestrowana pod adresem ul. Główna 26/2, 55-010 Święta Katarzyna, reprezentowaną przez: Michała Kliszczaka - Prezesa Zarządu.
  2. Administrator nie wyznaczył Inspektora Ochrony Danych Osobowych. Wszelkie kwestie dotyczące danych osobowych można kierować na e-mail: ochronadanych@eactive.pl lub pisemnie na adres korespondencyjny: EACTIVE wiemy jak sp. z o.o. sp. k. ul. Aleksandra Zelwerowicza 18 A, 53-676 Wrocław.
  3. Twoje dane będą przetwarzane w celu odpowiedzi na zapytanie oraz przygotowania i przedstawienia propozycji współpracy.
  4. Podstawę prawną przetwarzania Twoich danych osobowych jest art. 6 ust. 1 lit. a RODO, czyli Twoja zgoda na przetwarzanie danych osobowych w jednym lub większej liczbie określonych celów oraz art. 6 ust. 1 lit. b RODO, zgodnie z którym przetwarzanie danych jest konieczne w celu podjęcia działań na żądanie osoby, której dane dotyczą.
  5. Dane osobowe nie będą przekazywane innym odbiorcom.
  6. Twoje dane osobowe będą przetwarzane do czasu cofnięcia wyrażonej zgody bądź złożenia sprzeciwu wobec przetwarzania danych.
  7. Podanie danych osobowych jest dobrowolne, jednak podanie adresu e-mail i numeru telefonu jest niezbędne do obsługi zapytania.
  8. Administrator nie przetwarza Twoich danych osobowych przy użyciu narzędzi do zautomatyzowanego podejmowania decyzji, w tym profilowania.
  9. Przysługuje Ci prawo do żądania od Administratora dostępu do Twoich danych osobowych, ich sprostowania, usunięcia, ograniczenia przetwarzania lub ich przeniesienia.
  10. Przysługuje Ci prawo do wniesienia sprzeciwu wobec przetwarzania Twoich danych, a także prawo do cofnięcia wyrażonej zgody w dowolnym momencie - wycofanie zgody nie ma wpływu na zgodność z prawem przetwarzania, którego dokonano na podstawie Twojej zgody przed jej wycofaniem.
  11. W przypadku uznania, że przetwarzanie przez Administratora danych osobowych narusza przepisy RODO przysługuje Ci prawo do wniesienia skargi do organu nadzorczego (tj. Prezesa Urzędu Ochrony Danych Osobowych).

Więcej informacji na temat zasad przetwarzania i ochrony danych osobowych przez EACTIVE wiemy jak sp. z o.o. sp. k. znajdziesz w naszej Polityce Prywatności, dostępnej tutaj.

Rozumiem