Jak zaprojektować przyjazne dla użytkownika interfejsy mobilne

Feb 1, 2026
Jak

Niektóre projekty mobilne cierpią z powodu problemu: mogą wyglądać świetnie na powierzchni, ale zaczynają ich używać, a wkrótce dowiesz się, że całkowicie ważny czynnik został zaniedbywany: ergonomia. Szlachetna sztuka tworzenia projektów, które pasują do ludzkiego ciała (a nie na odwrót), jest jednym z prawdziwych niedocenających bohaterów świata projektowego.

Ergonomia zawsze była bardzo ważna dla projektantów przemysłowych, ale staje się coraz bardziej ważna dla projektantów cyfrowych. Dlaczego? Ponieważ smartfony i tablety zmieniają sposób, w jaki współdziałamy z projektami cyfrowymi. Nie używamy już kłopotliwej klawiatury i myszy, aby powiedzieć naszym cyfrowym przyjaciołom, co robić. Teraz jest bardziej bezpośredni, bardziej fizyczny. Trzymamy nasze urządzenia. Dotknijmy je. Szczypamy je. Pięknie je udaliśmy.

To coraz bardziej fizyczne wiązanie z naszymi ukochanymi urządzeniami mobilnymi zmusza projektantów, aby nie tylko myśleć o tym, jak wygląd wygląda i czuje, ale także fizyczne aspekty używania go. Wymusza projektantów myśleć o tym, jak użytkownicy posiadają i współdziałają ze swoimi smartfonami i tabletami; O ile ekranu można wygodnie osiągnąć i jak wygląda projekt w dłoni. Wymusza projektantów do myślenia o ergonomii mobilnego projektu.

Jak więc masz na celu stworzenie mobilnego projektu, który jest ergonomiczny, a zatem wygodny w użyciu?

01. Wyjdź z biura

Nawet zanim zaczniesz myśleć o możliwych projektach, wyjdź z biura, aby przeprowadzić obserwacje z pierwszej ręki. Spędź poranek lub popołudnie, patrząc, gdzie, jak i dlaczego ludzie używają swoich urządzeń mobilnych.

Zwróć uwagę, w jaki sposób ludzie trzymają się i interakcji z ich urządzeniem, co mogą robić w tym czasie, a rodzaje wyzwań i rozproszenia, z którymi mogą być musieli walczyć z. Informacje te pomogą poinformować ergonomię konstrukcji i oznacza, że ​​jeśli chodzi o testowanie projektu, możesz przetestować przed scenariuszami, które wiesz, faktycznie dzieje się w świecie rzeczywistym.

02. Projektowanie wielu posiadania

The three main holds used for a smartphone, and the frequency which they’re typically used

Trzy główne trzyma używane na smartfonie i częstotliwość, którą są zazwyczaj używane

Jeśli obserwujesz ludzi za pomocą urządzeń mobilnych, wkrótce zobaczysz, że używają Różnorodność różnych posiadających . Różnorodność posiadania używanych i częstotliwości, z którą użytkownicy zmieniają swoje utrzymanie, ważne jest, aby zaprojektować z wielokrotnością na uwadze.

Na przykład rozpocznij projekt smartfona z myślą o wykorzystaniu jednoręcznym (ponieważ jest to najtrudniejsze), ale zawsze testuje projekty w różnych oczekiwaniu, aby zobaczyć, jak wygodne jest każdy z nich.

03. Umieść popularne elementy sterujące w zasięgu

Green areas are easy to reach, amber takes more effort and red areas are hard to reach

Zielone obszary są łatwe do osiągnięcia, bursztyn bierze więcej wysiłku, a częściowe obszary są trudne do osiągnięcia

Umieść często używane elementy sterujące, takie jak przyciski i linki, w których można je łatwo dojechać palcami lub kciukami. Środek i dolny ekranu są dobre obszary do użycia, chociaż dolne rogi mogą być trudne, aby stuknąć, gdy urządzenie jest utrzymywane tylko w jednej ręce (czytaj więcej tutaj ).

Nadal jest konwencja, aby umieścić menu na górze ekranu. Jednak może to być obszar trudno dostępny, więc jest to dobry pomysł, aby wspierać akcję przesuwania, aby wyświetlić menu.

04. Umieść treść powyżej kontroli

The BBC iPlayer iPad app places controls in easy to reach areas and below content

Aplikacja BBC IPlayer IPAD umieszcza kontrolę w łatwym miejscu do obszaru i poniżej treści

Nie chcesz czyjegoś palca lub kciuk zasłaniając treść, gdy dotkną ekranu, więc umieść treści powyżej elementów sterujących. Upewnij się również, że kluczowe informacje nie znajdują się w obszarze ekranu, w którym można go łatwo zasłonąć przez palcem lub kciukiem - takie jak dolne narożniki, które są często przykryte, gdy smartfon jest trzymany w jednej ręce.

05. Projekt z myślą o trybie portretowym

Podczas gdy używany przytrzymanie może się zmienić, jedna rzecz, która jest znacznie bardziej zgodna zarówno dla smartfonów, jak i tabletek, jest tendencja dla osób, które mają tendencję do posiadania ich pionowo przez większość czasu. Horyzontalny uchwyt jest często używany do konkretnych zadań, takich jak przeglądanie filmów lub zdjęć, ale jest to wyjątek, a nie norma.

Oczywiście mobilny projekt powinien idealnie wspierać tryby zarówno portretowe (pionowe), jak i krajobrazowe (poziome), ale chyba że projektujesz wideo lub aplikację lub aplikację, projektowanie z myślą o trybie portretowym.

06. Projektowanie kciuki

The Spotify app is designed to be thumb-friendly, with large tap targets

Aplikacja Spotify została zaprojektowana jako przyjazna kciukiem, z dużymi celami kranu

Kciuki napędzają większość wszystkich interakcji smartfonowych. Dzieje się tak, ponieważ kciuki są używane wyłącznie, gdy mobilny jest trzymany w jednej ręce i mocno używany, gdy jest trzymany w dwóch rękach.

Kciuki są nieco większe niż palce, a zatem wymagają większego celu kranu. Staraj się, aby te stukały cele co najmniej 44 x 44 punkty (16 x 16 mm), z co najmniej 7 punktami (2,5 mm) między nimi. Większe cele kranu są zawsze lepsze i na pewno nie powinieneś iść mniejszy niż 44 x 30 punktów (16 x 11 mm).

Nawet jeśli projektujesz dla tabletów, wciąż projektowanie do kciuki, ponieważ projekt powinien obsługiwać najmniej dokładną metodę dotknięcia, którą napotkał. Duży cel kranu nie jest dobry dla kciuki, to także świetnie do palców.

07. Projektowanie dużych gestów

Tak więc większe cele kranu są lepsze. Jaki jest większy cel kranu? Postaraj się zaprojektować z dużymi gestami, takimi jak pozwala użytkownikom przesuwać do przodu do przodu lub do tyłu w galerii zdjęć lub pojawiają się menu.

Pamiętaj, że użytkownicy mogą nie zdawać sobie sprawy, że gest jest obsługiwany, więc zawsze dobrze jest zapewnić wtórny sposób zrobić coś, takiego jak stukanie ikony strzałki, aby wyświetlić następne zdjęcie.

08. Wzrost do wyzwania

W ergonomii czasami słyszysz rozmowę o projektowaniu, aby dopasować się do co najmniej 95 procent użytkowników, tworząc projekt wygodny od 2,5 do 97.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5. Zawsze będzie ekstremalne użytkownikom, którzy bardzo ciężko mieli pomieścić - jak wszyscy wiemy, że nie możesz zadowolić wszystkich cały czas, ale jeśli możesz utworzyć projekt, który bardziej wymagający użytkownicy mogą korzystać z komfortu, powinno również działać dla wszystkich te pomiędzy.

Dlatego dobrze jest zaprojektować się z myślą o trudnych użytkownikach i scenariuszach. Na przykład pomyśl o ruchliwym podmiejskim obok ulicy z kawą w jednej ręce i telefonie komórkowym w drugim lub komuś z zapaleniem stawów.

09. Zachowaj interakcje do minimum

Czy wiesz, że najwygodniejsza interakcja urządzenia mobilnego jest? To nie jest kran lub przesuwanie lub prasa. W ogóle nie ma interakcji. Im mniej interakcji Twoja konstrukcja mobilna wymaga, tym mniej musisz się martwić o ergonomię. Zawsze staram się zachować interakcje do minimum. Bezwzględnie obniżyć formularze mobilne, użyj autoSuggests i ograniczyć powiadomienia tylko do rzeczy, o których użytkownik naprawdę należy powiadomić.

10. Projekty prototypowe.

Po prostu nie możesz oceniać ergonomii mobilnej projektu, dopóki nie będziesz fizycznie trzymaj go w rękach i wypróbuj różne uchwyty. Dlatego będę prototypować projekt jak najszybciej. Lubimy Axure. , ale jest wiele innych Świetne narzędzia prototypujące .

Aby uzyskać szybki proces, możesz nawet uruchomić podstawowe testy użytkowników z prostymi prototypami papierowymi. Szkic lub wydruk papieru utknął na urządzeniu mobilnym, powie ci zaskakującą kwotę o ergonomii.

11. Test, test, a następnie przetestuj więcej

Chcesz poznać ten, który gwarantowany sposób tworzenia ergonomicznych projektów mobilnych? To do testowania wzorów, a następnie itera i test, itera i test ... i kontynuuj, aż masz grupę różnych ludzi, obejmując kilka różnych urządzeń, wszystkie zgłaszanie, że projekt jest wygodny w użyciu. To takie proste.

Urządzenia mobilne są oczywiście zaprojektowane tak, aby były "mobilne", więc wyjść z biura do testów projektów w środowiskach i sytuacjach, które prawdopodobnie będą używane. Kawiarnie są zawsze dobrym miejscem do testowania. Wzory testowe Wiele osób, jak to możliwe (co najmniej pięć lub sześć) i skupić się na bardziej wymagających scenariuszach, takich jak używanie smartfona jednoręczny. Jeśli projekt działa dobrze, gdy interakcje użytkownika są bardziej ograniczone, z pewnością wyróżnia resztę czasu. Jest przede wszystkim poprzez ciągłe testowanie i iterowanie, które można tworzyć prawdziwie ergonomiczne projekty mobilne.

Ten artykuł pierwotnie pojawił się w magazynie netto. Subskrybuj tutaj.

Powiązane artykuły:

  • 16 konta Instagram UX / UI Musisz śledzić
  • 20 najlepszych narzędzi szkieletowych
  • 5 największych trendów projektowych UX na 2018 r

Jak - Najpopularniejsze artykuły

Zrozumienie przetwarzania języka naturalnego

Jak Feb 1, 2026

Strony internetowe i aplikacje mogą mieć różne ruchome części, w tym frontowe przetwarzanie, przetwarzanie po stronie serwe..


Jak poprawić swoją sztukę znakową

Jak Feb 1, 2026

Kiedy masz zadanie, tworząc projektowanie postaci Od podstaw, pomyśl o osobistości tej postaci. Umieść się w..


Jak wybrać z narzędziami Lasso Photoshop

Jak Feb 1, 2026

Selekcje są jednym z najważniejszych zadań, na których nauczysz się opanować Photoshop CC. . Dobry wybór udzieli realizmu obrazu, nie wspominając o czystości. Ale z ta..


Zachowaj doskonałą kontrolę wersji z abstrakcją

Jak Feb 1, 2026

Kontrola wersji została pierwotnie ukierunkowana na programistów pracujących z kodem, jako sposób, dla wielu programistów do..


Jak tworzyć futrzane postacie z kreskówek

Jak Feb 1, 2026

Strona 1 z 2: Strona 1 Strona 1 Strona 2 Projektowanie postaci..


Jak dodać dramat do pastelowych dzieł sztuki

Jak Feb 1, 2026

Wielcy artystów, takich jak Rembrandt i Caravaggio wstrzykiwać swoje dzieła sztuki z odrobiną dramatu i intensywności, tworz..


Odkryj styl i substancję typografii

Jak Feb 1, 2026

Decyzje, decyzje, decyzje ... Jeśli istnieje jeden kluczowy aspekt do procesu pracy z typem, jest to, że projektant lub typograf będzie musiał dokonać całości decyzji przed dotarciem d..


Niesamowita moc flexbox

Jak Feb 1, 2026

FLEXBOX lub elastyczny układ układowy, jest potężnym modułem układu CSS, który daje projektantom internetowym i programist..


Kategorie