W artykule:
Prawie dokładnie dwa lata temu napisałem post o kluczowych aspektach projektowania User Experience, na których musisz się skupić podczas projektowania dla urządzeń mobilnych.
W tym poście określono cztery priorytety UX dla urządzeń mobilnych: obszary dotykowe, nawigacja, formularze i interakcje.
Od tego czasu minęły dwa lata i sprawy ruszyły naprzód w świecie tworzenia stron internetowych. Chociaż twierdzę, że poruszali się o wiele wolniej w rozwoju mobilnym w ciągu ostatnich dwóch lat niż w ciągu dwóch lat przed tym postem.
Chociaż iPhone istnieje od 2007 r., a Android od 2008 r., twórcy stron internetowych nie angażowali się w projektowanie urządzeń mobilnych i mobilne UX przez kilka lat. Apple nalegał przez lata, aby strony internetowe działały dobrze w stanie pulpitu, nawet gdy skurczyły się, aby zmieściły się w małych przeglądarkach, i zajęło trochę czasu, aby zapytania o media były używane w większości arkuszy stylów witryny. Początkowo skupiono się na układzie i wyglądzie strony, ale potem przyszła użyteczność. Zaczęliśmy zdawać sobie sprawę, że korzystanie ze strony internetowej na urządzeniu przenośnym to inne doświadczenie niż korzystanie z niej na laptopie lub komputerze stacjonarnym, i opracowaliśmy sposób, w jaki projektujemy i rozwijamy dla urządzeń mobilnych.
Twierdzę więc, że priorytety UX dla urządzeń mobilnych, które wymieniłem w ostatnim poście, nie zmieniły się zbytnio w ciągu ostatnich dwóch lat. Dodam jednak jeszcze jeden priorytet: szybkość. Witryna, która nie ładuje się szybko, nie będzie przyjemna do odwiedzenia i sprawi, że wiele osób opuści ją, zanim pojawi się ekran główny. Wiele urządzeń mobilnych ma szybsze połączenia internetowe teraz, gdy ich odpowiedniki na pulpicie; często wyłączam wifi, gdy próbuje podłączyć się do powolnej usługi publicznej i zamiast tego używam 4G. Jeśli kiedykolwiek próbowałeś korzystać z wifi w pociągu, będziesz wiedział, o czym mówię. Ale nadal musisz przetestować wydajność swojej witryny na komputerach i urządzeniach mobilnych.
W tym poście przyjrzę się, jak możesz przetestować swoją witrynę pod kątem tych kryteriów. Zidentyfikuję niektóre z narzędzi, których możesz użyć do testowania witryny mobilnej i emulowania urządzeń mobilnych, do których możesz nie mieć dostępu.
Testowanie na urządzeniach mobilnych
Oczywistą pierwszą metodą testowania jest użycie urządzenia mobilnego. Niewielu z nas może sobie pozwolić na posiadanie w pełni reprezentatywnego zapasu tych produktów, ale sensowne jest posiadanie jednego lub dwóch do przetestowania. Korzystanie z najnowszego iPhone ’ a i urządzenia z Androidem pokryje większość użytkowania mobilnego i zawsze dodaje więcej do testów niż tylko za pomocą emulatora lub symulatora.
Trzymanie urządzenia uruchamiającego witrynę w dłoni pozwala na głębsze korzystanie z tej witryny niż wyświetlanie jej na ekranie. Pomaga testować interakcje, animacje i szybkość.
Niezależnie od innych narzędzi, których używasz, zawsze zaczynałem od urządzenia mobilnego.
Rzeczy, które możesz najlepiej przetestować na urządzeniu mobilnym, to:
- Dotykowe obszary – poruszaj się po swojej stronie i współdziałaj ze wszystkimi przyciskami, linkami i menu za pomocą palców lub kciuków. Przetestuj go z innymi Użytkownikami (może ludzie z dużymi rękami!). Powierzchnie dotykalne powinny mieć kwadrat co najmniej 44px i powinny być łatwe do zidentyfikowania.
- Nawigacja – odkąd napisałem mój ostatni post na mobile UX, menu burger stały się coraz bardziej powszechne na stronach mobilnych. Na urządzeniu można sprawdzić, czy animacja działa płynnie i czy ikonę menu można łatwo dotknąć palcem lub kciukiem.
- Formularze – wypełnianie formularzy jest prawdopodobnie jedną z najmniej przyjaznych dla użytkownika rzeczy, które możesz zrobić na telefonie komórkowym. Testując formularze na urządzeniu mobilnym, będziesz w stanie sprawdzić, czy formularze działają dobrze z autouzupełnianiem i czy przewijanie między polami jest płynne i nie powoduje przypadkowego wprowadzenia tekstu w niewłaściwym polu.
- Interakcje – sprawdź, czy linki są łatwe do dotknięcia palcem lub kciukiem, czy procesy działające podczas interakcji są płynne i czy użytkownicy otrzymują informacje o tym, co się dzieje. Jeśli Twoja witryna wchodzi w interakcję z aplikacjami innych firm (np. YouTube), możesz sprawdzić, czy właściwa aplikacja otwiera się z twojej witryny, używając urządzenia z zainstalowaną tą aplikacją.
- Prędkość – spróbuj uruchomić witrynę na jednym lub kilku urządzeniach mobilnych za pośrednictwem 4G i wifi, a także 3G. Warto zachować starsze urządzenia, aby móc je również przetestować-nie wszyscy odwiedzający (w rzeczywistości nie wielu z nich) będą mieli najnowsze urządzenie.
Testowanie witryn deweloperskich na urządzeniu mobilnym
Jednym z wyzwań, jeśli chodzi o testowanie mobilnego UX, jest dostęp do lokalnej kopii programistycznej witryny na urządzeniu mobilnym. W końcu nie możesz uruchomić MAMPA na telefonie komórkowym.
Ale jest sposób na obejście tego. Możesz uzyskać dostęp do lokalnego serwera za pośrednictwem urządzenia mobilnego, o ile jest on w tej samej sieci co komputer. W przypadku witryny WordPress wymaga dodatkowej konfiguracji, ale oznacza to, że możesz bezpośrednio uzyskać dostęp do Witryny na localhost.
Jeśli nie chcesz przechodzić przez to wszystko do szybkiego testu, inną opcją jest utworzenie wersji tymczasowej witryny na serwerze. W ten sposób możesz testować na urządzeniu mobilnym i uzyskać korzyści z testowania (na urządzeniach mobilnych i stacjonarnych) w tym samym środowisku, w którym strona będzie działać.
Po skonfigurowaniu możesz przetestować dotykalne obszary, nawigację, formularz, interakcje i szybkość witryny, tak jak powyżej – a dzięki witrynie testowej uzyskasz o wiele dokładniejszy test prędkości.
Korzystanie z narzędzi programistycznych przeglądarki do testowania witryny mobilnej
Inną opcją, której używam, gdy się rozwijam i zanim będę gotowy do przetestowania na prawdziwym urządzeniu, jest użycie narzędzi dostępnych bezpośrednio w przeglądarce.
Przełączanie urządzeń w Chrome
W Google Chrome możesz wyświetlać swoją witrynę tak, jak wyglądałaby na wielu urządzeniach z Androidem, włączając i wyłączając widok mobilny. Kliknij prawym przyciskiem myszy na swojej stronie, wybierz Inspekcja z menu, a następnie kliknij ikonę przełączania urządzenia w lewym górnym rogu okna Inspektora:
Dzięki temu możesz zobaczyć, jak twoja witryna wygląda na urządzeniu mobilnym. Wybierz Responsive rozwijane menu u góry ekranu, a następnie wybierz z dostępnych urządzeń:
Oznacza to, że możesz zobaczyć, jak działa Twoja witryna i przetestować wrażenia użytkownika na wielu urządzeniach bez konieczności posiadania ich wszystkich.
Tryb Responsywnego Projektowania Safari
Safari ma również opcję wyświetlania witryny tak, jak wyglądałaby na iPhonie lub iPadzie. Przejdź do Opracowanie > Wejdź W Tryb Projektowania Responsywnego, a otrzymasz wiele opcji. Możesz wybrać różne urządzenia Apple i zobaczyć, jak wygląda Twoja witryna:
Jest to przydatny sposób, aby zobaczyć, jak twoja strona wygląda na starszych i nowszych iPhone ’ ach, a także iPadach.
Co można przetestować w przeglądarce?
Dzięki tym narzędziom możesz przetestować wiele aspektów swojego mobilnego UX, ale niektóre rzeczy nie są takie same:
- Dotykowe obszary – niewiele możesz zrobić tutaj, z wyjątkiem sprawdzenia, czy obszary dotykowe Nie tajemniczo skurczyły się na różnych rozmiarach ekranu, do których w przeciwnym razie możesz nie mieć dostępu.
- Nawigacja – możesz sprawdzić, czy obszary nawigacji są wyświetlane tak, jak chcesz, aby były na różnych urządzeniach i rozmiarach ekranu.
- Formularze – wypełnianie formularzy będzie łatwiejsze, ponieważ jesteś na pulpicie, więc UX nie jest testowalny w ten sposób, ale możesz sprawdzić, czy wszystko jest we właściwym miejscu i nie odciąć się jakoś.
- Interakcje – możesz przetestować animacje lub procesy i sprawdzić, czy działają na różnych rozmiarach ekranu, ale uważaj, że sposób, w jaki są faktycznie uruchamiane przez te urządzenia, można przetestować tylko na urządzeniu.
- Prędkość – jeśli Twoja witryna zawiera różne treści na urządzeniach mobilnych, możesz uruchomić sprawdzanie prędkości w celu porównania, ale uważaj, aby nie było to naprawdę reprezentatywne na pulpicie.
Istnieje jednak sposób, aby zbliżyć się do doświadczenia urządzenia mobilnego na pulpicie. To za pomocą emulatora.
Korzystanie Z Emulatorów Urządzeń Mobilnych
Emulator lub symulator zapewni Ci równowagę między używaniem rzeczywistego urządzenia a testowaniem w przeglądarce komputerowej. Są one zaprojektowane tak, aby dać ci coś bliższego doświadczeniu testowania na urządzeniu bez konieczności posiadania go.
Różnica między emulatorem a symulatorem polega na tym, że emulator wykorzystuje podstawowy system do emulowania wszystkich aspektów tego, co testujesz. Symulator nie schodzi tak głęboko i po prostu symuluje wrażenia mobilne. Znalazłem świetną analogię na stackoverflow:
„Gdyby symulator lotu mógł przetransportować cię z punktu A do punktu B, byłby to emulator lotu.”
Android Emulator
Android emulator będzie emulować doświadczenie przeglądania witryny na wielu różnych urządzeniach z Androidem. Aby go zainstalować, potrzebujesz Android Studio SDK. Uwaga, te narzędzia są bezpłatne. Nie będę wchodzić w szczegóły dotyczące ich konfigurowania tutaj, ponieważ jest to dość długi proces, który zmienia się wraz z nowymi wersjami, ale możesz uzyskać pełne instrukcje na stronie emulatora Androida.
Emulator iOS
Podobnie jak Google dla Androida, Apple ma symulator dla systemu operacyjnego iOS, który działa na iPhone ’ ach i iPadach. Aby z niego korzystać, potrzebujesz Xcode, który zawiera aplikację symulator. Jest przeznaczony do testowania aplikacji, ale może być również używany do uruchamiania Safari i testowania witryny.
Emulator Opery
Mobilna przeglądarka Opera jest używana na większej liczbie telefonów, niż można się spodziewać. Ich klasyczna przeglądarka działa na starszych telefonach i często jest dla nich najlepszą przeglądarką. Jako programiści stron internetowych Zakładamy, że każdy ma najnowszą technologię telefonów komórkowych, ale tak nie jest. Jeśli Twoja witryna będzie miała duży ruch z części świata, w których popyt na smartfony jest niższy, lub z części populacji, które preferują prostsze telefony, warto przetestować na Operze.
Emulator Opera mobile pozwala przetestować witrynę w przeglądarce Opera na różnych urządzeniach. Jest to najprostszy w użyciu wszystkich emulatorów, co jest jednym z powodów, dla których go kocham.
Co można przetestować za pomocą emulatora?
Korzystanie z emulatora lub symulatora pulpitu nie zwiększa doświadczenia z testowania za pomocą narzędzi przeglądarki, ponieważ nadal nie możesz trzymać swojej witryny w dłoni i testować rzeczy, takie jak dotykalne obszary.
Jest to jednak krok naprzód w stosunku do narzędzi przeglądarki, jeśli chodzi o testowanie interakcji i animacji, ponieważ będą one uruchamiane w środowisku mobilnym, a nie stacjonarnym. Jeśli więc Twoja witryna zawiera kod, który będzie działał inaczej na urządzeniach mobilnych, warto skorzystać z tych narzędzi. A jeśli będziesz miał znaczną liczbę odwiedzających korzystających ze starszych lub bardziej podstawowych telefonów, to Korzystanie z emulatora Opera mobile jest dobrym pomysłem.
Nie zapomnij przetestować swojej witryny pod kątem mobilnego UX
Jeśli jesteś taki jak ja, będziesz pracować nad rozwojem na komputerze stacjonarnym (lub laptopie). Daje dostęp do większej liczby narzędzi, do edytorów kodu i do lokalnej instalacji za pomocą MAMP. Ale przed uruchomieniem witryny nie możesz zapomnieć przetestować jej na co najmniej jednym urządzeniu mobilnym, aby sprawdzić, czy wrażenia użytkownika są płynne i przyjemne. Na urządzeniach mobilnych pojawiają się różne wyzwania UX, których nie zawsze można przetestować w przeglądarce komputerowej.
Nie będziesz w stanie kupić każdego urządzenia, z którego mogą korzystać potencjalni użytkownicy, więc oprócz korzystania z jednego lub dwóch urządzeń fizycznych, możesz użyć narzędzi, które zidentyfikowałem powyżej, aby przetestować w szerokim zakresie środowisk i upewnić się, że osoby odwiedzające Twoją witrynę na dowolnym urządzeniu otrzymają wspaniałe wrażenia.
Tagi:
