To detale tworzą projekt

Na pozytywne wrażenia użytkownika ma wpływ wiele czynników.

Pracując nad tym, by Twoja aplikacja była odbierana jako wyróżniająca się, musisz zadbać nie tylko o najważniejsze aspekty jak intuicyjne menu, prawidłowy kontrast, dobrze dobrane zdjęcia czy odpowiednia skrojona typografia. Istnieje bowiem kilka mniejszych czynników, które często są pomijane.

Tak naprawdę to detale potrafią zmienić odbiór projektu. Dzisiaj poznasz kilka drobnych szczegółów, które poprawią wrażenia w Twoim projekcie.

➡️ Ekran powitalny

Istnieje wiele aplikacji, które mają czasochłonną fazę wstępnej konfiguracji. Oznacza to, że użytkownik musi przez kilka chwil czekać na załadowanie się aplikacji.

Podczas tego czasu, użytkownik nie może się nudzić, zatem dobrym pomysłem jest wprowadzenie ciekawego ekranu powitalnego.

Ekran powitalny daje użytkownikowi natychmiastową informację zwrotną. Zmniejsza to niepewność użytkownika, czy aplikacja została uruchomiona i ładuje się, czy może coś się zacięło.

W tym czasie możesz umieścić krótką informację na temat aplikacji lub jakąś ciekawą grafikę lub animację. Pokaż coś co odwróci uwagę, coś rozpraszającego.

Zobacz idealny przykład ekranu powitalnego

W przypadku gdy Twoja aplikacja ładuje się nieco dłużej np. kilka sekund, możesz w ramach ekranu powitalnego uruchomić krótki samouczek, co wypełni czas użytkownika. Przykład.


➡️ Puste stany

Kolejny moment, który wydaje się nieistotny, a tak naprawdę ma duże znaczenie. Mówimy tutaj o sytuacji, gdy użytkownik dochodzi do momentu pustego stanu czyli np. wchodząc na listę swoich kontaktów, nie widzi jeszcze żadnej dodanej osoby.

W tym wypadku, zamiast pustego miejsca, warto umieścić coś, co zachęci użytkownika do akcji. Może to być przycisk, wyszukiwarka, animacja. W każdym wypadku nie jest to funkcja dekoracyjna, lecz ma zachęcić użytkownika, aby zrobił coś, by ekran przestał być pustym stanem.

Pusty stan, ma również miejsce w sytuacji, gdy użytkownik szuka czegoś na Twojej tronie i trafia na pusty stan np. szuka produktu w sklepie, po czym wyszukiwarka zwraca pustą stronę.

Tutaj również użytkownik powinien natrafić na element, który pomoże mu w dalszej drodze. jak “zobacz podobne produkty” lub przycisk odsyłający do podobnej kategorii. Zobacz na przykład.

➡️Ekrany szkieletowe

W czasach szybkiego internetu nie zwracamy na nie zupełnie uwagi. Wychodzimy z założenia, że projekt załaduje się natychmiast. Jednak dobry projektant musi brać pod uwagę wiele czynników, jak również osoby, które posiadają ograniczony dostęp do internetu lub ich internet jest bardzo wolny.

W momencie ładowania się strony lub aplikacji, widać ekran szkieletowy czyli zarys tego, jaki będzie układ elementów, gdy aplikacja zostanie załadowana. Ekrany szkieletów tworzą przewidywanie tego, co ma nadejść i zmniejszają obciążenie poznawcze. Tego typu technikę stosuje np. Youtube lub Facebook.

A tutaj mam dla Ciebie przykład animacji jak to powinno wyglądać. 

Mikro interakcje

O mikro interakcjach dowiesz się z naszego newslettera premium. Jednak w skrócie są to mini informacje zwrotne, często w formie animowanej, wyświetlane w przypadku, gdy użytkownik wchodzi w interakcje z danym elementem.

Może to być reagujący na ruch kursora przycisk lub podświetlany link. Wizualna informacja zwrotna sprawia, że ​​użytkownicy czują się o wiele przyjemniej. Dodatkowo daje to wyraźny sygnał, czy zadanie zostało wykonane.

Przykład mikro interakcji na przycisku

Przykład mikro interakcji w formularzu

A może zainteresują Cię…

Ebook przeprojektowani

Naucz się projektować interfejsy biorąc pod uwagę ich wygląd oraz użyteczność.

Ebook idealny landing page

Jak zwiększyć konwersję strony docelowej poprawiając ux/ui oraz webwriting.

Książka + ebook o formularzach

Łatwe, przyjemne, dostępne, konwertujące. Takie mogą być Twoje formularze.

Zestaw UX writing

Twórz mikrokopię, którą pokochają użytkownicy. Ebook, framework, kurs.

Ebook WCAG + UX

Praktyczna wiedza o dostępności i doskonaleniu wrażeń użytkownika.

Ebook o pisaniu

Opowiadaj. Pokaż problemy. Podaj rozwiązania. Zachęć do działania.

Rzuć też okiem na:

Menu