Projektowanie responsywne: najlepsze praktyki i uwagi

Responsywne strony internetowe to strony, które dostosowują się do wszystkich rozmiarów i rozdzielczości ekranu, nie tylko na komputerze, ale także na telefonie, tablecie, a czasem nawet telewizorze.

Według Statista ruch mobilny odpowiadał za 52,64% całego ruchu na świecie w 2017 r., co oznacza, że ​​witryna, która nie jest dobrze zoptymalizowana pod kątem urządzeń mobilnych, traci około połowę ruchu . Oczekuje się, że do końca 2018 r. globalny udział w ruchu dla urządzeń mobilnych wzrośnie do 79%, co jest wyjątkowym wzrostem.

Firmy bez mobilnej strony internetowej są w zastraszającym tempie, ponieważ 8 na 10 użytkowników przestaje wchodzić w interakcję z witryną, która nie wyświetla się dobrze na ich urządzeniu. Użytkownikom zbyt łatwo jest nacisnąć przycisk Wstecz i zamiast tego spróbować konkurencyjnej firmy, a Google umieszcza nawet witryny, które nie reagują, niżej w wynikach wyszukiwania .

Tutaj możesz przystąpić do testu zgodności z urządzeniami mobilnymi Google.

Czy to oznacza, że ​​telefon komórkowy jest ważniejszy niż komputer? Nie. 83% użytkowników urządzeń mobilnych twierdzi, że jeśli chcą, powinni móc kontynuować korzystanie z komputera stacjonarnego.

Spójrz na tę zoptymalizowaną pod kątem urządzeń mobilnych wersję serwisu eBay w porównaniu z tym, jak wyglądałaby, gdyby nie była zoptymalizowana pod kątem urządzeń mobilnych. Czy rozważyłbyś w ogóle wersję niezoptymalizowaną?

Aby projektować strony internetowe, które mogą konkurować w dzisiejszym Internecie, projektanci stron internetowych muszą być ekspertami w zakresie responsywnego projektowania stron internetowych (RWD). Od czego powinni zacząć?

Mobilne podejście do projektowania responsywnych stron internetowych

Projektowanie stron internetowych z myślą o urządzeniach mobilnych oznacza najpierw zaprojektowanie strony mobilnej i pracę do wersji na komputery stacjonarne. Jest wiele powodów, dla których to podejście działa dobrze.

1. Witryny mobilne mają więcej problemów z użytecznością (jest to spowodowane głównie brakiem powierzchni ekranu), więc praktyczne i bardziej wydajne jest skupienie się przede wszystkim na projektowaniu mobilnym.
2. Łatwiej jest skalować wersję mobilną w górę niż zmniejszać wersję na komputery (ponownie z powodu braku miejsca na stronach mobilnych).
3. Projektowanie stron internetowych z myślą o urządzeniach mobilnych pomaga ponownie ocenić to, co jest potrzebne wizualnie i funkcjonalnie.

Projektowanie strony internetowej jako responsywnej witryny mobilnej zmusza projektantów do zadawania wielu ważnych pytań, ponieważ powierzchnia ekranu jest mniejsza. Oto pytania, które należy zadać:

• Czy ta funkcja/funkcja jest naprawdę potrzebna?
• Jak możemy najpierw zaprojektować coś minimalistycznego na urządzenia mobilne, które później będzie się dobrze skalować na komputerach stacjonarnych?
• Czy ten efekt wizualny jest wart czasu potrzebnego do załadowania na urządzeniu mobilnym?
• Jaki jest główny cel i jakie elementy wizualne pomagają użytkownikom go osiągnąć?

Za chwilę przyjrzymy się kilku przykładom responsywnego projektowania stron internetowych. Na razie porozmawiajmy o tym, które urządzenia, rozmiary ekranu i przeglądarki internetowe są dziś odpowiednie.

Jakie rozdzielczości ekranu są istotne dla responsywnego projektowania stron internetowych?

Oto najpopularniejsze rozdzielczości ekranu wśród użytkowników telefonów komórkowych, tabletów i komputerów stacjonarnych na całym świecie. Jak widać, istnieje szeroka gama rozdzielczości, więc ani telefony komórkowe, tablety, ani komputery stacjonarne nie dominują obecnie w rynku — mówi nam to, że projektanci powinni wziąć pod uwagę wszystkie z nich, myśląc o responsywnym projektowaniu stron internetowych.

• 360x640 (mały telefon komórkowy): 22,64%
• 1366x768 (średni laptop): 11,98%
• 1920x1080 (duży pulpit): 7,35%
• 375x667 (średnia komórka): 5%
• 1440 x 900 (średni pulpit): 3,17%
• 720x1280 (duży telefon komórkowy): 2,74%

Podobnie jak w przypadku podziału urządzeń, powinniśmy podzielić dane według lokalizacji, aby dopasować dane demograficzne użytkowników (lub przewidywane dane demograficzne użytkowników) naszej grupy docelowej. Warto również zadbać o coraz bardziej popularne rozdzielczości, ponieważ niektóre rozmiary ekranu nie są obecnie tak powszechne, ale mogą pojawić się w przyszłości. Pomoże to responsywnym projektantom stworzyć przyszłościowy UX, który będzie działał nawet wtedy, gdy zmieni się udział w rynku.

Na przykład rozdzielczości 360x640 (które odpowiadają głównie urządzeniom Samsunga z systemem Android) wzrosły w ciągu ostatniego roku o 5,43%. Projektanci mogą wykorzystać cenne spostrzeżenia, takie jak te, aby decydować o kluczowych responsywnych punktach przerwania przed rozpoczęciem projektowania witryny.

Jakie przeglądarki internetowe są dziś popularne?

Responsywne projektowanie stron internetowych polega na zapewnieniu płynnego działania na dowolnym urządzeniu, a ponieważ różne przeglądarki internetowe renderują strony internetowe na różne sposoby, witryny muszą być testowane, aby upewnić się, że są kompatybilne z różnymi przeglądarkami internetowymi na urządzenia mobilne i komputery.

Mimo że skalowanie witryny do właściwych responsywnych punktów przerwania leży przede wszystkim w gestii programisty, to on decyduje o tym, w jaki sposób responsywna witryna dostosuje się do różnych rozmiarów ekranu, aby stworzyć optymalne wrażenia użytkownika.

Oto światowy podział udziału w rynku przeglądarek internetowych na urządzenia mobilne i komputery stacjonarne.

• Chrom: 55,04%
• Safari: 14,86%
• Przeglądarka UC: 8,69%
• Firefox: 5,72%
• Opera: 4,03%
• Internet Explorer: 3,35%

Projektowanie responsywne to nie tylko „dopasowanie wszystkiego” — to także dostosowanie do możliwości sprzętu urządzenia i przeglądarki internetowej, a także rozdzielczości urządzenia. Jednym z przykładów może być to, że chociaż Google Chrome obsługuje właściwość overscroll-behavior: (która definiuje, co się dzieje, gdy użytkownik przewija się zbyt mocno w kierunku krawędzi widocznego obszaru), nie jest obsługiwana w żadnej innej przeglądarce internetowej.

Najlepsze praktyki projektowania responsywnego

Wyeliminuj tarcie

Jak wspomniano wcześniej, podejście do responsywnego projektowania stron internetowych zorientowane na urządzenia mobilne pomoże projektantom ocenić, co jest naprawdę konieczne, aby użytkownik mógł osiągnąć swój główny cel.

W miarę opracowywania wersji na tablety (a później wersji na komputery stacjonarne) możemy zacząć myśleć o celach drugorzędnych i mikrointerakcjach, przepływach użytkowników i CTA (wezwaniach do działania), które umożliwiają osiągnięcie tych celów użytkownika. Co ważniejsze, w pierwszej kolejności skupiamy się na głównych celach użytkownika i eliminujemy wszelkie niepotrzebne tarcia , które nie pomagają ani głównym, ani drugorzędnym celom.

Głównym celem może być zakup produktu, natomiast celem drugorzędnym może być zapisanie się do newslettera (co może prowadzić do późniejszego zakupu).

Oto wspaniały przykład wyeliminowania tarcia: ponieważ interfejsy użytkownika mobilnego są zazwyczaj trudniejsze w nawigacji, najlepiej byłoby przełączyć się na jednostronicową kasę w mobilnych sklepach eCommerce i włączyć wieloetapową kasę tylko w stacjonarnych sklepach eCommerce.

Projekt dla kciuków

Responsywne projektowanie stron internetowych jest trudne w tym sensie, że użytkownicy będą wchodzić w interakcję z witryną na komputery za pomocą kliknięć, ale z wersją mobilną za pomocą dotknięć i przesunięć. Istnieją również różnice fizyczne. Użytkownicy komputerów stacjonarnych zazwyczaj mają swoje komputery na powierzchni, podczas gdy użytkownicy mobilni trzymają swoje urządzenia w rękach. Różnice te znacząco zmieniają sposób, w jaki projektanci mobilnych interfejsów użytkownika projektują cele dotykowe i inne ważne elementy interfejsu użytkownika, z którymi użytkownicy wchodzą w interakcję.

Rzućmy okiem na kilka przykładów:

• Ludzie zazwyczaj oczekują, że główna nawigacja na pulpicie będzie na górze; jednak na telefonie komórkowym powinien znajdować się na dole. Kciuki nie sięgają wygodnie do góry.
• Inne elementy interaktywne również powinny być łatwo dostępne. Oznacza to trzymanie ich na środku ekranu, ponieważ kciuki trudniej dosięgnąć boków i rogów ekranów urządzenia.
• Aby można było je łatwo stuknąć, ważne linki i wezwania do działania powinny mieć wysokość co najmniej 44 piks. (mniejsze cele stukania są szkodliwe dla użyteczności).

Zalecana literatura: Podstawowy przewodnik po użyteczności mobilnej.

Skorzystaj z natywnego sprzętu urządzeń mobilnych

Sprzęt mobilny (taki jak aparat w urządzeniu lub usługi GPS) nie jest specjalnie zarezerwowany dla aplikacji natywnych, a jak wspomniano wcześniej, responsywne projektowanie stron internetowych nie polega tylko na „dopasowaniu wszystkiego”. To także dostosowanie do możliwości urządzenia. W przypadku projektowania stron internetowych na urządzenia mobilne, ponieważ urządzenia mobilne mają łatwe w obsłudze kamery, niektóre mikrointerakcje — takie jak wprowadzanie danych — są w rzeczywistości łatwiejsze na mniejszych ekranach, o ile strony internetowe wykorzystują dostępny sprzęt natywny.

Rzućmy okiem na kilka przykładów:

• Skanowanie karty kredytowej/doładowania (ponieważ formularze są często trudne na telefonie komórkowym)
• Udostępnianie zdjęć w mediach społecznościowych, ponieważ media są już na Twoim urządzeniu
• Uwierzytelnianie dwuskładnikowe (ponieważ już korzystasz z urządzenia mobilnego)
• Szybkie sprawdzanie stanów magazynowych/analiz (ponieważ aplikacje mobilne upraszczają informacje)
• Wykonywanie wyszukiwania w Internecie za pomocą głosu (ponieważ tryb głośnomówiący jest łatwiejszy niż pisanie)

Ustaw domyślnie płynne/adaptacyjne układy

Nie każdy użytkownik będzie miał zmaksymalizowaną przeglądarkę na komputerze. Oznacza to, że chociaż projektanci muszą wziąć pod uwagę responsywne punkty przerwania urządzeń, z których korzystają obecnie użytkownicy, muszą również uwzględnić to, co dzieje się pomiędzy tymi punktami przerwania.

Responsywne punkty przerwania powinny być używane do „przepływu” układu i treści do nowego urządzenia, ale aby uwzględnić wszystkie rozmiary pomiędzy (na wszelki wypadek), układy muszą być poza tym płynne (to znaczy naturalnie dostosowują się/rozciągają się jako zmienia rozmiar przeglądarki).

Pamiętaj o tych wskazówkach podczas projektowania układów płynnych/adaptacyjnych:

• Jednostki procentowe pozwolą na płynność elementów.
• Ustawienie minimalnej i maksymalnej szerokości może umożliwić scenariusz „ale nie zmniejszaj/większy niż ten”.
• Formaty obrazów SVG można skalować w górę iw dół bez utraty jakości i są niezależne od rozdzielczości (w przeciwieństwie do JPG i PNG, które nie są).

Nie zapomnij o orientacji poziomej

Rozmawialiśmy wcześniej o konkretnych responsywnych punktach przerwania, ale musimy również wziąć pod uwagę, że te mobilne okna widoku mogą być również wyświetlane w orientacji poziomej. Chociaż wdrożenie płynnego układu technicznie sprawi, że treść będzie się dostosowywać, utrata sporej części widoku portretowego może być przeszkodą w użyteczności i dostępności.

Nawigacja jest zwykle bezpieczna (w rzeczywistości czasami jest lepsza, ponieważ użytkownicy zazwyczaj poruszają się w orientacji poziomej za pomocą dwóch kciuków), ale przewijanie staje się znacznie trudniejsze, co nie jest optymalne, ponieważ użytkownik musi przewijać więcej w orientacji poziomej.

Projektanci mogą również rozważyć projektowanie pod kątem punktów przerwania krajobrazu; na przykład elementy kafelkowe, które układają się pionowo na urządzeniu mobilnym, mogą być wyświetlane jako suwak z lewym i prawym przyciskiem nawigacyjnym, co oznacza, że ​​użytkownik nie musi przewijać.

Pamiętaj, typografia też może być responsywna

Mimo że projektanci UX zwykle używają jednostek pikseli do projektowania stron internetowych, w rzeczywistej sieci jeden punkt niekoniecznie jest już równy pikselowi, ponieważ różne urządzenia mają różne rozdzielczości. Na przykład iPhone X ma 458 PPI (pikseli na cal), więc tam, gdzie rozmiary pikseli są coraz mniejsze, jesteśmy w stanie uzyskać wyraźniejszą grafikę w tej samej przestrzeni fizycznej (Apple nazywa tę technologię „Retina”, a Android ją nazywa „hDPI”).

Oznacza to, że na przykład rozmiar czcionki 16 pikseli będzie wyglądał na większy lub mniejszy na niektórych urządzeniach w zależności od rozdzielczości. Twórcy stron internetowych zazwyczaj używają jednostek em do definiowania rozmiarów czcionek, które są rodzajem responsywnej jednostki, w której 1em jest równy 1 punktowi.

Narzędzia do przekazywania projektów, takie jak Zeplin, Sympli, Marvel i InVision, mogą pomóc projektantom współpracować z programistami w sprawach, za które są wspólnie odpowiedzialni. Podczas gdy projektanci wykonują projekt, a programiści wykonują kod, jako całość przepływ pracy przy projektowaniu produktu to wysiłek zespołowy, który wymaga solidnej komunikacji.

Wskazówki dotyczące optymalizacji wydajności projektowania responsywnego i najlepsze praktyki

Responsywne projektowanie stron internetowych to nie tylko wygląd, ale także to, jak działa i działa. Równie ważne jest dostosowanie stron internetowych tak, aby ładowały się szybciej na docelowym urządzeniu.

Lazy Load nieistotne obrazy i filmy

Obrazy i filmy stanowią dużą część całkowitego rozmiaru strony do pobrania, ale nie musisz ładować ich wszystkich naraz. Istnieją dwa scenariusze, w których renderowanie multimediów może być opóźnione: zawartość poniżej części strony widocznej na ekranie może być ładowana, gdy użytkownik przewija ją w części strony widocznej na ekranie, a media blokujące renderowanie należy pobierać dopiero po pobraniu układu i treści. Ta praktyka nazywa się leniwym ładowaniem, gdzie ładowanie ciężkich, nieistotnych elementów jest opóźnione, aby poprawić wydajność strony.

Ładowanie warunkowe

Niektóre elementy witryny nie są przeznaczone dla użytkowników mobilnych, a przynajmniej nie są warte dodatkowego obciążenia poznawczego. Chcemy, aby nasze mobilne strony internetowe były proste, dlatego w niektórych sytuacjach warto ukrywać elementy. Biorąc to pod uwagę, musimy upewnić się, że nie marnujemy zasobów przeglądarki i przepustowości, ładując te elementy, nawet jeśli są ukryte; dlatego najlepszą praktyką jest uwzględnienie tych elementów tylko w określonych warunkach.

Po raz kolejny programista może to osiągnąć za pomocą kodu; jednak projektanci mogą poprawić wydajność strony, komunikując warunki, kiedy i gdzie pewne elementy powinny i nie powinny istnieć.

Responsywne obrazy

Jak wspomniano wcześniej, niektóre urządzenia wyświetlają więcej pikseli na cal, co może powodować rozmycie obrazów, jeśli nie są one eksportowane w prawidłowej rozdzielczości. W zależności od rozdzielczości urządzenia, niektóre będą wymagały obrazów w rozmiarze podwójnym (@2x), potrójnym (@3x), a nawet poczwórnym (@4x). Przeglądarki internetowe obsługują teraz element <picture> , który wybiera odpowiednią rozdzielczość obrazu w zależności od urządzenia.

Projektanci tworzący responsywne witryny internetowe mogą dostosować obrazy do właściwego urządzenia, upewniając się, że eksportowane są we wszystkich rozdzielczościach używanych na dzisiejszych urządzeniach (jeśli nie masz pewności, zapytaj swojego programistę — komunikacja jest kluczowa, jeśli chodzi o responsywne projektowanie stron internetowych).

Wniosek

Wireframing może pomóc w wygładzeniu zagnieceń na wczesnym etapie procesu projektowania, a to sprawdza się dobrze, gdy przyjmujemy podejście mobilne do responsywnego projektowania stron internetowych. Być może istnieje responsywny punkt przerwania, który wymaga dodatkowej uwagi, a może istnieje koncepcja, która po prostu nie jest skuteczna pod względem responsywności na urządzeniach mobilnych. Lepiej jest znaleźć wyboje na drodze wcześniej niż później (tj. przed dodaniem estetyki wizualnej).

Nowoczesne narzędzia do projektowania, takie jak Adobe XD, Marvel i InVision, umożliwiają zespołom testowanie prototypów na rzeczywistych urządzeniach, omawianie opinii w kontekście i ogólnie współpracę zespołową, dopóki układ nie zadziała we wszystkich scenariuszach.

Zastosowanie szczupłego przepływu pracy UX, w którym responsywny projekt jest oparty na wewnętrznych testach i informacjach zwrotnych, zapewni, że wrażenia użytkownika będą działać bezproblemowo na wszystkich platformach i rozdzielczościach ekranu, zanim zostaną zaprezentowane rzeczywistemu użytkownikowi po raz pierwszy.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika