User Experience
User Experience (UX) to termin, który w ostatnich latach zyskał dużą popularność, zwłaszcza w odniesieniu do stron internetowych. Ta strona jest poświęcona UX i jest częścią pracy magisterskiej. Zapoznaj się z treścią strony, wypełnij ankietę na końcu i przejdź do drugiego serwisu.
Czym jest UX?
Metodologia User Experience (UX) zaczęła się bardzo intensywnie rozwijać w ostatnich latach i zapewne w najbliżej przyszłości wciąż będzie ważnym elementem każdego projektowanego produktu. Chociaż User Experience nie posiada konkretnej definicji, często jako UX opisuje się każde działanie, które w pewien sposób przyczynia się do poprawienia wrażeń użytkownika. Dobre wrażenia użytkownika zależą między innymi od łatwości i intuicyjności obsługi danego interfejsu lub aplikacji, tak zwanej używalności. Istnieje wiele sposobów jej określania, ale zazwyczaj sprowadza się to do czynników przedstawionych poniżej.
Użyteczność
aplikacja wykonuje za użytkownika pewną pracę lub dostarcza użytecznych informacji
Przyswajalność
korzystanie z aplikacji nie wymaga nauki, interakcje są intuicyjne
Zapamiętywalność
interakcje z aplikacją za każdym razem wyglądają podobnie, nie trzeba się ich uczyć na nowo przy każdorazowym dostępie
Skuteczność
aplikacja wykonuje pewną pracę, do której została powołana
Wydajność
aplikacja działa wystarczająco szybko i efektywnie
Pożadanie
użytkownicy poszukują takiej aplikacji, aplikacja jest przydatna
Dlaczego UX jest istotny?
W dzisiejszych czasach jednym z istotniejszych problemów przy projektowaniu stron internetowych, nie jest sama implementacja, a raczej pobudzenie i podtrzymanie zainteresowania użytkownika. Czas skupienia uwagi człowieka zmniejsza się wraz z rozwojem technologii i zwiększaniem się ilości czynników rozpraszających, takich jak powiadomienia z aplikacji mobilnych, czy pojawiające się okna reklam. Strony internetowe również muszą przystosować się do tych zmian i podjąć walkę o uwagę użytkownika, co w rezultacie zapewni stronie dłuższy czas odwiedzin, tym samym zwiększając szanse na przyswojenie całej treści strony. Kluczową rolę w tym procesie odgrywa metodologia User Experience, która skupia się na zapewnieniu użytkownikowi dobrych wrażeń podczas odwiedzania strony.
Uroda i mądrość oraz przyjemność i użyteczność zawsze powinny iść ze sobą w parze
~ Donald Norman
Historia UX
Do poprawnego zrozumienia pojęcia metodologii User Experience i jej wpływu na projektowanie stron internetowych należy uprzednio zarysować historię interakcji człowiek-komputer (Human-Computer Interaction, HCI). HCI można określić jako relację człowieka z komputerem w momencie obsługiwania interfejsu przez wprowadzanie i odczytywanie danych używając do tego odpowiednich części ciała.
Termin User Experience w dzisiejszym rozumieniu pojawił się dopiero w latach 90. kiedy do firmy Apple dołączył psycholog Donald Norman. Norman podkreśla, że UX jest terminem, który zawiera w sobie większość składowych interakcji człowieka z systemem, w tym między innymi grafikę, interfejs, instrukcję, interakcję fizyczną i projektowanie przemysłowe.
Wynalezienie komputera ENIAC
1946
Douglas Engelbart: The Mother of All Demos, prototyp myszy komputerowej
1968
Donald Norman dołącza do Apple i po raz pierwszy opisuje termin User Experience
1993
1963
Ivan Sutherland: kopiowanie, reprezentacja funkcji w postaci ikon
1981
Xerox Star: pierwszy produkt posiadający pełny graficzny interfejs użytkownika (GUI)
1946
Wynalezienie komputera ENIAC
1963
Ivan Sutherland: kopiowanie, reprezentacja funkcji w postaci ikon
1968
Douglas Engelbart: The Mother of All Demos, prototyp myszy komputerowej
1981
Xerox Star: pierwszy produkt posiadający pełny graficzny interfejs użytkownika (GUI)
1993
Donald Norman dołącza do Apple i po raz pierwszy opisuje termin User Experience
- UX W LICZBACH - UX W LICZBACH - UX W LICZBACH - UX W LICZBACH - UX W LICZBACH - UX W LICZBACH - UX W LICZBACH - UX W LICZBACH
0%
użytkowników na urządzeniach mobilnych opuszcza stronę po 3s
0%
użytkowników zgadza się ze stwierdzeniem, że user experience ma znaczenie
0%
ruchu na stronach internetowych pochodzi z Google
Znaczenie animacji w UX
Animacje pozwalają zwrócić uwagę odbiorcy na konkretny element na stronie, czyniąc ją bardziej interaktywną i ciekawą w odbiorze. Niestety używane w nadmiarze lub w nieodpowiednich miejscach mogą również przyczynić się do utrudnienia przyswajania informacji, czy czytelności treści. Jednak w wypadku stron i aplikacji internetowych stosowanie animacji posiada wiele zalet.
Pojawienie się elementu z góry
Demonstracja różnych czasów trwania animacji UI.
Kwadrat przedstawia animację o krótkim czasie trwania 100ms.
Koło przedstawia animację o średnim czasie trwania 350ms.
Trójkąt przedstawia animację o długim czasie trwania 500ms.
Animacje dostarczają wskazówek odnośnie wykonywanych akcji
Po wykonaniu akcji, na przykład kliknięcia na przycisk, jeżeli użytkownik zobaczy animację ładowania będzie mieć świadomość, że w tle aplikacja wykonuje jakąś akcję, oraz że jego akcja została zarejestrowana i jest przetwarzana.
Animacje ukrywają proces doładowywania danych
Poruszające się elementy sprawiają, że uwaga użytkownika nie skupia się na braku nowych danych, a aplikacja uzyskuje dodatkowe sekundy na doładowanie brakujących elementów.
Animacje mogą zwiększyć satysfakcję użytkowników
Kiedy celem aplikacji jest zachęcenie użytkownika do podjęcia pewnego działania, odczuje on większą satysfakcję z jego realizacji jeśli po wykonaniu zobaczy ciekawą animację.
Najważniejszym aspektem animacji jest jej czas trwania. Szacuje się, że przeciętny użytkownik traci poczucie kontroli po trzech sekundach, dlatego należy pamiętać o odpowiednim doborze długości animacji. Przedział czasowy zależny jest od rodzaju animacji, jednak dla wszystkich typów animacji CSS zazwyczaj czas efektów nie przekracza sekundy i mieści się w przedziale 100ms-500ms.
Znaczenie UX przy pozycjonowaniu stron internetowych
User Experience jest relatywnie nową i stale rozwijaną dziedziną, także przez wyszukiwarki. Za prekursora mierzenia wrażeń użytkownika, które wpływają na pozycjonowanie strony można uznać wyszukiwarkę Google, jednak wiele innych wyszukiwarek zaczyna wprowadzać podobne zmiany w swoich algorytmach. Obecnie priorytetyzowana jest szybkość wczytywania zawartości strony oraz responsywność, które mierzone są za pomocą metryk Core Web Vitals.
LCP (Largest Contentful Paint)
metryka odpowiadająca za czas ładowania strony. Mierzony jest czas, zaczynając od momentu wysłania żądania HTTP na danej stronie, potrzebny do wyrenderowania największego, pod względem rozmiaru pliku, elementu zawartości, na przykład wideo, zdjęcia, lub tekstu. Im krótszy czas ładowania, tym lepsza wartość metryki.
FID (Fist Input Delay)
metryka odpowiadająca za interakcję. Badany jest czas od pierwszej interakcji użytkownika ze stroną (na przykład pierwszego kliknięcia w link lub element menu), do momentu kiedy przeglądarka odpowie na daną interakcję (na przykład wyświetli żądaną podstronę).
CLS (Cumulative Layout Shift)
metryka odpowiadająca za stabilność strony. Mierzona jest ilość przemieszczeń rozkładu strony podczas jej ładowania. Metryka przyjmuje wartości z zakresu 0-1, gdzie 0 oznacza brak przesunięcia, a 1 - znaczące przesunięcia.
Zasady UX projektowania stron internetowych
UX odgrywa znaczącą rolę w projektowaniu stron internetowych. Zostało udowodnione, że użytkownik spędza w aplikacji webowej bardzo mało czasu na faktycznym czytaniu treści strony. W rzeczywistości ludzie mają tendencję to szybkiego przeglądania zawartości i przeczytania tylko treści, które uznają za warte uwagi. Przy takim sposobie przeglądania stron internetowych użytkownik widzi tylko to co chciał zobaczyć, a jest to tylko ułamek tego co może znaleźć na danej stronie. Dlatego ważne jest, aby tworzyć interaktywne strony i aplikacje webowe, które zachęcą odwiedzającego do dalszego czytania.
Makietowanie
Makieta strony jest wstępnym zarysem kluczowych informacji, które powinny znaleźć się na stronie, wraz z hierarchią elementów oraz rozplanowaniem pustych przestrzeni. Makietowanie pozwala skoncentrować się na budowaniu odpowieniej hierarchi wizualnej i układu, co ma duży wpływ na odbiór strony przez użytkownika.
Responsywność
Jest to dostosowywanie wyświetlanej zawartości do każdego wymiaru i rozdzielczości strony, w tym zmniejszanie rozmiaru plików obrazów oraz upraszczanie skomplikowanych elementów dla urządzeń mobilnych. Jej zapewnienie gwarantuje pozytywne wrażenia na wszystkich typach wyświetlaczy.
Dostępność informacji
Pojęcie dostępności może być opisane jako możliwość postrzegania, rozumienia, nawigacji i interakcji ze stronami internetowymi przez ludzi z niepełnosprawnościami. Przynosi to również korzyści innym grupom, na przykład osobom starszym, których możliwości zmieniają się ze względu na wiek.
Ewaluacja UX
Pomiar wrażeń użytkownika może przyjmować różne formy, od prostego procesu ankietyzacji po analizę map cieplnych strony. Do wizualnych form zaliczamy mapy cieplne, scrollmapy i widok confetti, a do form bazujących na skali i kwestionariuszach SUS(system usability scale), UEQ(user experience questionnaire) oraz QUIS(questionnaire for user interaction satisfaction).
Ważnym krokiem przy tworzeniu strony internetowej jest uprzednie stworzenie makiety (ang. wireframe) i biblioteki komponentów, oraz zaprojektowanie wyglądu strony na wysokim poziomie szczegółowości. Wykonanie tych kroków zagwarantuje, że przez rozpoczęciem implementacji programista przemyśli kwestie projektowe, zastanowi się nad tym jak użytkownik będzie używał strony, oraz które elementy powinny być interaktywne.
Podziel się swoimi wrażeniami!
Pod przyciskiem poniżej znajdziesz ankietę dotyczącą Twoich wrażeń z korzystania z tej strony internetowej. Wypełnij metryczkę oraz kolejne pytania zgodnie z własnymi odczuciami, a następnie użyj odpowiedniego przycisku, aby przejść do drugiego serwisu. Przy wypełnianiu ankiety w drugiej wersji serwisu użyj tego samego pseudonimu.
