Mobile Web Design 10 porad na temat lepszej użyteczności

Oczekuje się, że mobilne przeglądanie stron internetowych zmieni się w kolejną główną platformę internetową. Teraz można łatwo przeglądać sieć z niemal dowolnego miejsca, wykorzystując urządzenia mobilne, które pasują do ręki dzięki technologii. Krótkie wprowadzenie dobrej użyteczności w projektowaniu mobilnych stron internetowych utrudnia przeglądanie różnych popularnych witryn mobilnych. Projektowanie urządzeń mobilnych musi być prostsze niż standardowa strona internetowa i bardziej zadaniowe, aby wykonać zadanie, ponieważ użytkownicy szukają czegoś konkretnego i pilnego.

Powinieneś wziąć pod uwagę, jak korzystać z minimalnego dostępnego miejsca na główne treści i pozostać interesujący dla użytkowników mobilnych. Unikaj dużych obrazów i animacji flash, ponieważ spowalnia to witrynę. Pamiętaj, że funkcjonalność jest ważniejsza niż styl dla stron mobilnych. Jeśli twoja strona nie jest odpowiednio kodowana i projektowana, może wyglądać lepiej na jednym telefonie, najgorszym na innym lub gorzej, w ogóle nie wyświetlać. Przetestuj, zweryfikuj i sprawdź, czy jest kompatybilny ze wszystkimi urządzeniami mobilnymi.

Aby pomóc Ci w tworzeniu strony internetowej dostępnej nie tylko na komputerach stacjonarnych lub laptopach, ale także urządzeniach mobilnych, oto kilka rzeczy, które należy wziąć pod uwagę przy projektowaniu stron internetowych na telefony komórkowe z przykładowymi obrazami wraz z bezpośrednim linkiem do wersji strony mobilnej.

1. Wybierz rozdzielczość ekranu

Świat mobilny zawiera bogatą różnorodność rozważań projektowych od różnych rozmiarów ekranu i rozdzielczości do różnych kształtów. Staraj się zachować równowagę między wystarczającą szerokością ekranu a rozmiarem odbiorców. Poznaj specyfikacje obecnych urządzeń mobilnych i skorzystaj z najlepszej oceny. To, co jest wyzwaniem dla programistów mobilnych, to sposób na odpowiednie wyświetlanie na różnych rozmiarach ekranu bez konieczności ponownego tworzenia stron dla różnych platform..

Oto lista rozdzielczości internetowych popularnych na urządzeniach mobilnych od lutego 2011 r. Przedstawionych przez Uxbooth.com wraz z opublikowanym artykułem, Uwagi dotyczące mobilnego projektowania stron internetowych (część 2): Wymiary, David Leggett. Autor wyjaśnia kilka kwestii dotyczących wymiarów wyświetlania i rozwiązań do projektowania układu.

2. Podziel strony internetowe na małe części

Długie fragmenty tekstu mogą być trudne do odczytania, więc umieszczenie ich na kilku stronach ogranicza przewijanie do jednego kierunku. Pozbądź się treści o niskim priorytecie. Trzymaj się pojedynczej kolumny tekstu, która się zawija, więc nie ma poziomego przewijania.

W poniższym przykładzie wersja mobilnej strony internetowej CBS News pokazuje tylko główną sekcję wiadomości i dzieli artykuły na małe części. Podczas gdy Treehugger prezentuje swoje najnowsze artykuły i najnowsze tweety z niektórymi funkcjami pełnej strony internetowej. Obie strony mają kliknięcie linku tekstowego, aby wyświetlić pozostałą część artykułu.

Wiadomości CBS

Treehugger

3. Uprość projekt

Prostota oznacza użyteczność. Pozwól im poruszać się po witrynie bez trudności. Unikaj włączania tabel, ramek i innych formatowań. Jeśli używasz dopełnienia, pamiętaj, aby zachować je na absolutnie minimalnym poziomie znacznie niższym niż w przypadku zwykłej strony internetowej. W porównaniu z komputerami stacjonarnymi, im więcej klikniesz linków na stronach mobilnych, tym więcej będziesz czekał z powodu czasu ładowania. Dzięki temu musisz rozebrać i uprościć swoją stronę, zachowując równowagę między treścią a nawigacją.

W naszym przykładzie na stronie wersji mobilnej Best Buy wymieniono tylko najważniejsze kategorie produktów, które obniżają poziom hierarchii treści. Podczas gdy strona główna YouTube dla telefonów komórkowych pokazuje tylko cztery najnowsze filmy z reflektorami.

Najlepsza oferta

Youtube

4. Możliwość przeglądania pełnej strony internetowej

Podaj link, dzięki któremu osoby odwiedzające telefon komórkowy będą mogły przełączyć się z powrotem na pełną stronę internetową, aby użytkownik mógł znaleźć i wyświetlić inne treści i funkcje dostępne tylko w wersji na komputer. Twoi widzowie z pewnością wykonają dużo przewijania w pionie, więc pomóż im za pomocą linków „Powrót do góry”, aby mogli przeskoczyć na górę strony.

Na przykład Ars Technica ma przycisk łącza do standardowej strony umieszczonej w nagłówku. Podczas gdy Shangri-La mają pełny link do strony umieszczony na stopce.

Ars Technica

Shangri-La

5. Lokalizacja nawigacji

Poznaj swoich odbiorców i bądź świadomy tego, czego szukają. Dowiedz się, jak będą chcieli poruszać się po Twojej witrynie. Ustaw swoje menu nawigacyjne poniżej treści, jeśli docelowi użytkownicy mobilni chcą szybko zmieniać zawartość. Treść i nagłówek muszą być widoczne w pierwszej kolejności, aby nie przeszkadzać w wyświetlaniu treści strony. Dla użytkowników, którzy chcą od razu nawigować w określonej kategorii, umieść nawigację na górze strony. Poniżej znajdują się różne przykłady rozmieszczenia nawigacji używane w projektowaniu stron internetowych na telefony komórkowe.

D&G

Politico

Dzienny Horoskop

6. Użyj linków tekstowych

Twoja główna strona internetowa może wykorzystywać niewygodne menu rozwijane, najazdy lub inne wymyślne gadżety, ale przeglądarka mobilna prawdopodobnie nie. Należy pamiętać, że dynamiczne elementy strony i łącza graficzne zużywają zasoby, więc zdecyduj się na dobrze oznaczone linki tekstowe.

Lista oprócz

Reddit

7. Rozróżnij wybrany link

Przesunięcie kursora w dół spowoduje przewinięcie strony i podświetlenie wszystkich linków jednocześnie. Dlatego ważne jest, aby wyraźnie doradzić użytkownikowi, który element jest w centrum uwagi. Można to zrobić, zmieniając kolor czcionki i tła łączy i przycisków lub po prostu dodając dopełnienie wokół linków, aby obszar klikalny był większy o 44 piksele na 44 piksele. Geek Squad i Diesel korzystali z dużych czcionek do klikalnego tekstu.

Geek Squad

Diesel

8. Równowaga linków

Każde pobranie strony zużywa czas i zasoby systemowe, których brak jest wystarczający, więc staraj się nie zmuszać odwiedzającego witrynę do przeglądania wielu stron w celu uzyskania dostępu do poszukiwanych informacji. Zrównoważyć liczbę linków na każdej stronie i głębokość witryny.

Flickr

Świergot

9. Zmniejsz wpisywanie tekstu użytkownika

Trudno jest wprowadzić tekst w mobilnych wersjach stron internetowych. Zamiast tego należy zastąpić je przyciskami lub listą, aby mogli z łatwością wybrać to, czego potrzebują. Pamiętaj, że użytkownicy telefonów komórkowych nie mają dostępu do konwencjonalnej klawiatury i myszy. Im krótszy adres URL, tym lepiej, ponieważ wpisywanie długich adresów URL jest monotonne.

W poniższym przykładzie Fedex skorzystał z listy kontrolnej i rozwijanych menu. Podczas gdy Tumblr sprawił, że wybrałeś swój język za pomocą rozwijanego menu.

Fedex

Tumblr

10. Brak pop-upów i odświeżeń

Przeglądarki mobilne zazwyczaj nie obsługują wyskakujących okienek. A gdyby tak się stało, mieliby bardzo wąską przestrzeń, w którą mogliby wpaść. Trzymaj się z dala od nich, aby uniknąć nieprzewidywalnych wyników. Nie należy także okresowo odświeżać stron, aby uniknąć zapełnienia ograniczonej pamięci urządzenia. Pozwól użytkownikowi odświeżyć zawartość.

W skrócie

Bądź kreatywny i zastosuj swój projekt sieci komórkowej w nowy sposób. Uczyń swoją treść wystarczająco atrakcyjną i użyteczną. Daj swoim użytkownikom to, czego chcą, kiedy tego chcą. Użytkownicy nie chcą zagłębiać się w witrynę tylko po to, aby znaleźć to, czego szukają w sieci mobilnej.

Czy masz jakieś preferowane strony mobilne, które naprawdę Cię zainspirowały? Czy możesz podzielić się niektórymi wskazówkami dotyczącymi projektowania stron internetowych na telefony komórkowe? Powiadom nas!

Dalsze czytanie

1. Responsive Web Design (alistapart.com)
2. Uczyń swoją stronę mobilną (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. Symulator iPhone'a