Centrum wiedzy o technologiach i pracy w IT
Kobieta stoi przy interaktywnej tablicy, na której wyświetlany jest księżyc.

RWD i interaktywność – czy te pojęcia ulegną unifikacji?

Responsive Web Design, czyli projektowanie z myślą o dostosowaniu wyglądu witryny do dowolnego rozmiaru ekranu, to już powszechny standard podczas tworzenia stron internetowych. Czy znaczenie pojęcia RWD może zacząć się zmieniać?

RWD, czyli wszelkie działania projektowe i wdrożeniowe w witrynie, aby elastycznie dopasowywała się do wyświetlania na każdej wielkości ekranu, to wobec aktualnych statystyk konieczność.

Ostatnia aktualizacja: 18.05.2022. Dodaliśmy fragment o tym, jak przygotować projekt RWD dla programisty.

Już 90.9% użytkowników na świecie łączy się z Internetem za pomocą urządzeń mobilnych, a 83.96% populacji światowej posiada smartfony. Obecnie coraz więcej aplikacji i usług internetowych bazuje na wysokim poziomie personalizacji i interaktywności, które również odpowiadają za zapewnianie użytkownikowi jak najlepszych doświadczeń np. poprzez dopasowanie do preferencji.

Upowszechniająca się sieć 5G, obiecując prędkości 1000 razy szybsze niż 4G, tworzy nowy potencjał w wykorzystywaniu wielu interaktywnych rozwiązań na stronach internetowych i możliwe, że zmieni standardy optymalizowania zamieszczanych materiałów oraz funkcji.

Sprawdź: Umiejętności miękkie testera oprogramowania. Co jest wymagane?

Fuzja RWD i interaktywności

Czy w nadchodzących latach responsywność stron będzie oznaczała coś więcej niż tylko elastyczne dostosowanie wyświetlania zawartości? Odpowiedź na pytanie o możliwość zatarcia granic pojęciowych tkwi w podstawowym znaczeniu słowa „responsywny”, czyli reagujący na działanie. Dzisiaj responsywny jest głównie design, a każdą inną funkcję, wykorzystującą algorytmy do interakcji z użytkownikiem, określamy przymiotnikiem „interaktywna”.

Wobec coraz popularniejszych dodatków bazujących na sztucznej inteligencji można zacząć podkreślać fakt, że stanowią już one element responsywnego projektowania witryn. Większość z nich w coraz większym stopniu polega na reagowaniu na działania użytkownika i zwracaniu pożądanej przez niego odpowiedzi.

RWD to już nie tylko „mobile first”, ale przede wszystkim „user experience first”

Poniższe przykłady dotyczą w większości już dobrze znanych funkcji na stronach internetowych. W dalszym czasie będziemy obserwować ulepszanie ich działania, a także większą dbałość o spełnianie indywidualnych potrzeb danego użytkownika.

Dostępność witryn dla osób z niepełnosprawnościami

Choć istnieją standardy jasno określające warunki dostępności witryny (np. WCAG 3.0), to jednak nie wszystkie miejsca, szczególnie w polskim Internecie, są dostosowane do potrzeb osób z niepełnosprawnościami. Na szczęście sytuacja zaczyna się zmieniać i dobrym trendem stanie się uwzględnianie dostępności rozwiązań nie tylko na poziomie designu strony, ale też w aspekcie interaktywności różnych funkcji, aby cała witryna była w pełni responsywna dla każdego użytkownika.

Wyszukiwanie głosowe

Według raportu Google, 27% populacji globalnej wykorzystuje wyszukiwanie głosowe w urządzeniach mobilnych), więc naturalnym kierunkiem powinno być upowszechnienie możliwości takiego wyszukiwania w niektórych rozbudowanych witrynach. Taka funkcja dobrze sprawdziłaby się na stronach urzędów albo klinik.

Chatboty

Chatboty dostępne są już powszechnie na stronach wielu firm i miejsc usługowych. Nie wszystkie jednak działają na tyle precyzyjnie, aby faktycznie trafnie pomóc. Dodatkowo elementem do poprawy może być trudność przejścia z poziomu automatycznych odpowiedzi do faktycznej rozmowy z konsultantem, o ile taka jest opcja dostępna, lecz dobrze ukryta.

Dostosowanie zawartości stron do lokalizacji użytkownika

Niektóre firmy, szczególnie witryny e-commerce, dostosowują zawartość wyświetlanych treści na stronach do lokalizacji użytkownika, który je przegląda. Ta praktyka z pewnością będzie się upowszechniać, biorąc pod uwagę także kontekst pochodzący z plików cookies. Wydaje się to być naturalnym kierunkiem rozwoju personalizacji w Internecie. Sklepy internetowe mogłyby działać podobnie do reklam kontekstowych.

VR i AR

Rzeczywistość wirtualna (VR) i rzeczywistość rozszerzona (AR) to dwa tematy, które co jakiś czas pojawiały się znienacka w formie różnych aplikacji, szczególnie gier. Ostatnio znów zyskują na popularności, szczególnie w kontekście wykorzystania AR w zakupach. Firmy i marki będą jeszcze bardziej zaciekle walczyć o uwagę – będącą dzisiaj najcenniejszą walutą. Jest to jednak wymiana bardzo satysfakcjonująca dla obu stron, ponieważ użytkownik dostaje w zamian coraz lepsze doświadczenia, skrojone pod jego indywidualne potrzeby i przedstawione w atrakcyjny sposób.

Zobacz: Darmowa muzyka do filmów i gier? Wyjaśniamy gdzie szukać

RWD a doświadczenia użytkownika

Bardzo możliwe, że drażnię niektórych designerów, próbując „ukraść” pojęcie RWD, czyli responsive web design i ulepić je od nowa. Interakcje użytkownika z witryną (ale też aplikacją) stają się tutaj elementem kluczowym. To zresztą wciąż pozostaje w obrębie dobrego projektu. Nadal chodzi o to, aby w rosnącym rynku mobilnym można było intuicyjnie korzystać z różnych interaktywnych funkcji bez względu na rozmiar ekranu.

Jak przygotować projekt RWD dla kodera?

Współpraca designerów i web developerów powinna być skoordynowana, a obydwie strony powinny zadbać o wzajemne ułatwianie sobie zadań. W jaki sposób? To zależy od metody oraz programu, w którym powstał projekt. Dobra komunikacja oraz konsekwentne stosowanie przyjętych zasad pozwoli przyspieszyć pracę nad projektem i uniknąć nieporozumień.

Adobe Photoshop i Adobe XD

Choć coraz rzadziej wykorzystuje się Photoshopa do projektowania witryn, wciąż jednak można spotkać się z taką praktyką. W jaki sposób wtedy ułatwić pracę web developerowi? Każda podstrona powinna znajdować się w osobnym pliku PSD, a wszystkie warstwy powinny być uporządkowane i odpowiednio podpisane. Warto też ograniczyć ich liczbę do niezbędnego minimum np. poprzez połączenie ich tam, gdzie to możliwe.

W przypadku projektu stworzonego w Adobe XD należy udostępnić link z funkcją Handoff Design Specs, dzięki któremu programista może sprawdzić konkretne ustawienia do zakodowania oraz elementy graficzne.

Total
0
Shares
_podobne artykuły