8 sposobów na optymalizację witryny pod kątem urządzeń mobilnych
Gdy świat przeniósł się z komputerów stacjonarnych na urządzenia mobilne, projektanci jeszcze bardziej skupili się na UX. Mimo że interfejs użytkownika odgrywa ważną rolę w tworzeniu projektów przyjaznych dla urządzeń przenośnych, to teraz jest ono równie ważne, zwłaszcza że mamy teraz więcej urządzeń, na których można się skupić, a wrażenia użytkownika różnią się w zależności od rodzaju urządzenia.
UX to coś, co wykracza poza granice grafiki i estetyki. Podobnie jak Rahul Varshney, współtwórca foster.fm , mówi:
Interfejs bez UX jest jak malarz bezmyślnie klepiący farbę na płótnie.
Rahul miał rację z tą analogią. Możesz mieć najbardziej atrakcyjną, przyjazną dla użytkownika, unikalną i funkcjonalną wersję strony internetowej, ale jeśli nie bierzesz pod uwagę mobilności, po prostu malujesz bez zastanowienia.
Co odróżnia dobre działanie mobilne od złego? Nie jest trudno odróżnić kluczowe komponenty, które składają się na wysoce efektywny, zoptymalizowany i skoncentrowany na użytkowniku projekt. Oto kilka dobrych praktyk, które powinny Cię poprowadzić:
1) Nie należy odrzucać urządzenia mobilnego
Jeśli Twoja witryna jest skierowana na mobilny UX, możesz przełamać tradycję, stosując strategię "najpierw na urządzeniach mobilnych". Nie ma nic złego w korzystaniu z tej techniki, gdy masz pewność, że większość użytkowników będzie uzyskiwać dostęp do Twojej witryny za pomocą urządzenia mobilnego. Tak jak codemyviews sugeruje, że projektowanie stron mobilnych nie jest niszą, w rzeczywistości jest to "1,2 miliarda użytkowników mobilnych na całym świecie", a liczba ta w najbliższym czasie nie spada (prawdopodobnie wzrośnie w najbliższej przyszłości). Na początku może to być trudne; ale jeśli chcesz najpierw umieścić swojego użytkownika, warto spróbować.
Tylko dlatego, że masz na celu zaprojektowanie prostej, czystej lub mobilnej strony internetowej, nie oznacza to, że nie powinna być wyrafinowana. Karimrashid.com to doskonały przykład na to, jak prostotę i wyrafinowanie można połączyć w tworzenie czystego i responsywnego, a jednocześnie eleganckiego wyglądu.
2) Utwórz układy płynów
Istnieje po prostu zbyt wiele możliwych rozmiarów ekranu, aby wybrać i wybrać te, dla których zaprojektujesz. Musisz stworzyć układ, który dostosuje się tak płynnie, jak to tylko możliwe do nich wszystkich. Na szczęście, płynne układy są tutaj, aby uratować dzień!
W oparciu o wartości procentowe, a nie określone pomiary, takie jak piksele, układy płynów stały się standardem wśród profesjonalistów internetowych. Mogą być trudne, ale upewnienie się, że jak najwięcej osób może rzeczywiście korzystać z witryny jest warte wysiłku.
3) Cel dla funkcjonalności
Czym jest funkcjonalność? To jest to, co oferujesz swoim gościom, aby załatwić sprawy i zrobić to szybko. W zależności od celu witryny wszystkie narzędzia, takie jak najbliższe lokalizacje sklepów, wyszukiwanie produktów, recenzje produktów lub konwertery walut, powinny pomóc użytkownikom w osiągnięciu zamierzonych "funkcji" i osiągnięciu celów znacznie szybciej.
Purina , dostawca karmy dla zwierząt domowych, jest doskonałym przykładem na to, jak ułatwić "funkcjonowanie" na stronie internetowej. Strona główna zawiera pole wyszukiwania, w którym można wyszukiwać rzeczy, których szukasz. Poniżej znajdują się dwie osobne kolumny dotyczące rodzaju karmy dla zwierząt, w których się specjalizują. Cała strona internetowa jest łatwa w nawigacji dzięki kolumnie, przyciskom, narzędziom i elementom konstrukcyjnym, które decydują o najlepszej karmie dla zwierząt domowych - a następnie kupowaniu - o bryzie.
4) Zidentyfikuj swoich użytkowników
Nie próbuj stać się posiadaczem wszystkich transakcji, ponieważ może to kosztować Cię typowego użytkownika i nikt tego nie chce. Najpierw dowiedz się, kim są Twoi użytkownicy. Następnie sprawdź ich typowe zachowanie podczas przeglądania sieci. Kiedy już to odłożysz, dowiedz się, co je powoduje. Współcześni użytkownicy są dwojakiego rodzaju: ci, którzy przeglądają bez celu, i ci, którzy chcą wykonać zadanie. Każda z tych grup wymagałaby różnych "funkcji" w zależności od ich potrzeb.
Nie jest trudno odgadnąć demografię użytkowników witryny The Body Shop, ponieważ pozostawiają one wskazówki na całej stronie. Ponieważ The Body Shop jest bardzo skoncentrowany na "naturalnych składnikach" i aktywizmie społecznym, monochromatycznych zielonych odmianach, suwaku naturalnych składników, "zielonym" wyborze obrazów, a także raportom o uczciwych transakcjach, zobowiązaniach i innych wydarzeniach towarzyskich jest zrozumiałym dobrze rozwinięta koncepcja projektowania.
5) Zawsze sprawdzaj biblioteki i wskazówki dla programistów
W zależności od platformy, z której będziesz korzystać, konieczne jest dokładne zapoznanie się z wytycznymi interfejsu użytkownika. Niektóre platformy umożliwiają większą elastyczność niż inne. Niezależnie od przypadku, niektóre kluczowe elementy marki lub "podpisy" powinny pozostać.
Powinien przyjrzeć się deweloperowi aplikacji Apple Wskazówki dla interfejsu ludzkiego iOS i postępuj zgodnie ze standardami Apple, jeśli chodzi o projektowanie podstaw, strategie projektowania, elementy interfejsu użytkownika, projektowanie ikon / obrazów itp. Z drugiej strony, twórca Androida powinien zapoznać się ze wszystkimi elementami, stylem, użytecznością i układem typowych aplikacji dla systemu Android. z pomocą Przewodnik dla programistów Androida .
6) Udostępnij wszystkie treści wszystkim użytkownikom
Niektórzy projektanci, zamiast tworzyć całą zawartość w płynnych układach, po prostu zdecydują się ukryć niektóre z nich od użytkowników mobilnych. Czasami dzieje się tak, ponieważ układ jest skomplikowany lub wydaje się, że jest zbyt dużo treści dla układu mobilnego. To niewłaściwe podejście.
Zapewnienie użytkownikom "zdemontowanej" wersji witryny lub aplikacji jest nie tylko niesprawiedliwe dla użytkowników mobilnych, ale może poważnie wstać i stracić klientów. Może być konieczne uproszczenie układu, przeniesienie niektórych treści na inne ekrany w celu zmniejszenia bałaganu lub po prostu uporządkowanie wszystkiego lepiej; ale musi tam być.
Porównaj wersję pulpitu programu Witryna BBC do wersji mobilnej. Choć jest prostsze niż kiedyś, wciąż umieszcza na ekranie wszystkie informacje. Natomiast wersja mobilna upuszcza niektóre obrazy (które wciąż są dostępne w samych artykułach), ale zachowuje wszystkie nagłówki, dramatycznie upraszczając korzystanie z ekranu o rozmiarze telefonu.
7) Projekt dla dotyku
Warto również mieć na uwadze fakt, że użytkownik urządzenia mobilnego używa palców zamiast precyzyjnych wskaźników myszy. Twój projekt powinien być łatwy w nawigacji za pomocą palców wszystkich rozmiarów i kształtów, biorąc pod uwagę, że wszystkie urządzenia mobilne są teraz ekranami dotykowymi. Użytkownik nie powinien za bardzo szczypać ani powiększać, aby dotknąć czegoś, wypełnić formularz lub dotknąć przycisku. Niedokładne zawory są również bardzo powszechne na małych urządzeniach, które należy uwzględnić w projekcie za pomocą wystarczająco dużych wejść dotykowych lub gestów, aby wykonać zadanie.
Tutaj jest stół dotykowy przez Peter-Paul Koch to może pomóc. Zwróć uwagę, w jaki sposób zdarzenia dotyku (i inne działania) mogą się różnić w zależności od zgodności przeglądarki i urządzenia.
8) Użyj narzędzi kompresji
Ilość dostępnych dziś narzędzi do zmniejszenia obciążenia pracą projektanta jest niewyobrażalna. Znajdziesz kompresory skryptów, takie jak Sprężarka HTML lub Gzip kompresja, która automatycznie usunie niepotrzebne komentarze, białe spacje lub kod. Minecraft CSS i Kompresor CSS i kilka innych narzędzi, które pozwolą ci połączyć kod CSS i poprawić wydajność. Kompresja obrazu jest równie ważna; niektóre, które zmniejszą rozmiar plików .jpeg i .png, zachowując jednocześnie nienaruszoną jakość EWWW Image Optimizer , smush.it , optiPNG , i jpegtran .
Oto przykład wysoce responsywnego projektu portfela według RyJohnson . Strona jest pełna spektakularnych obrazów, które nie różnią się od wersji na komputery stacjonarne. Sekret szybkiego wczytywania tutaj to bez wątpienia optymalizacja obrazu.
