5 najlepszych praktyk projektowania interfejsów HMI do urządzeń mobilnych

Źródło: Fotolia

Projektując interfejsy człowiek-maszyna (HMI) do urządzeń mobilnych, należy wziąć pod uwagę szereg krytycznych czynników: sposób nawigowania po interfejsie, jego układ oraz elementy sterujące systemem.

Dobrze zaprojektowane interfejsy człowiek-maszyna (HMI) zmniejszają ryzyko błędów ludzkich, chronią firmy przed przestojami, których koszty sięgają milionów dolarów, a także zwiększają bezpieczeństwo pracowników. Programowanie stron, ekranów paneli HMI w HTML5 umożliwia przenoszenie projektów interfejsów HMI na urządzenia mobilne, Aby jednak działały one na nich efektywnie, potrzebne są jeszcze inne zabiegi i narzędzia. W artykule opisano pięć najlepszych praktyk projektowania interfejsów HMI, dopracowanych ściśle pod wymagania urządzeń mobilnych, zwłaszcza pod kątem ograniczonej wielkości i liczby możliwych układów graficznych, z myślą o poprawie ich percepcji przez użytkowników urządzeń mobilnych i wygodzie praktycznego użytkowania w obsłudze urządzeń i procesów.

1️⃣ Funkcjonalne i przyjazne dla użytkownika

Dobrze zaprojektowany interfejs HMI zmniejsza ilość błędów popełnianych przez jego użytkowników (zwykle operatorów, serwisantów) w wyniku niezrozumienia treści przedstawionych na ekranie czy też braku istotnych informacji przy podejmowaniu krytycznych decyzji. Kluczem do udanego projektu interfejsu HMI dla urządzenia mobilnego jest opracowanie i zbudowanie interfejsu, który jest funkcjonalny i jednocześnie wygodny w użytkowaniu. Większość użytkowników korzysta na co dzień z systemów mobilnych iOS firmy Apple i Android firmy Google. Należy zatem zaprojektować interfejs, który harmonizuje z platformą systemową, z którą użytkownik jest przyzwyczajony pracować.

Należy przede wszystkim w maksymalnym stopniu wykorzystać natywne funkcje interfejsu unikalnego (UI) platformy, na którą jest pisany interfejs HMI. Ułatwi to znacznie użytkownikom pracę z interfejsem: przy czym należy pamiętać, że platformy systemowe są nieustannie rozwijane i aktualizowane na urządzeniach mobilnych, a zatem po każdej aktualizacji interfejs HMI musi odpowiadać nadal przyzwyczajeniom użytkownika.

2️⃣ Nawigacja i układ

Interfejs HMI służy do przedstawiania informacji i przeszukiwania ich przez użytkownika – zadania te muszą być wykonywane sprawnie. Jedną z dobrych praktyk projektowania HMI na duże wyświetlacze jest ograniczenie do minimum liczby fizycznych ekranów. Upraszcza to nawigację, czyli poruszanie się po interfejsie. Cechami dobrze zaprojektowanego interfejsu HMI dla dużego wyświetlacza są np.:

→ dobrze zorganizowana zawartość i treść interfejsu; na ekranie od razu widać
zestawienie wszystkich potrzebnych informacji.

→ każdy z widoków można rozszerzyć o kolejne, zgodnie z hierarchiczną strukturą nawigacji w interfejsie.

Jednak w przypadku urządzeń mobilnych taka ilość informacji wizualnej na zwykle stosunkowo niewielkim ekranie utrudnia użytkownikowi jej odbiór i czyni je nieczytelnymi. Należy zatem ustalić, jakie są priorytetowe działania (akcje) użytkownika w interfejsie oraz określić liczbę ścieżek prowadzących do różnych informacji, które będą wyświetlane, a następnie zbilansować to z jak najmniejszą liczbą ekranów. Należy zatem rozpocząć od widoku głównego na poziomie ogólnosystemowym, z minimalną ilością informacji, z którego ścieżki nawigacji prowadzą do poszczególnych, różnych widoków w sposób czytelny, najlepiej intuicyjny dla użytkownika. Zawartość, treść każdego widoku powinna wypełniać cały ekran; dostępność kolejnych informacji można zasugerować efektami, takimi jak przejrzystość lub nieostrość elementów interfejsu. Należy unikać ramek, gradientów i cieniowania – czynią grafikę nieczytelną, utrudniając odbiór treści na ekranie.

Nawigacja w aplikacji powinna być intuicyjna i przewidywalna dla użytkownika. Dobrą metodą nawigacji jest roleta, na której można wyświetlić wiele elementów docelowych ścieżek nawigacyjnych – roleta nie zajmuje ekranu, chyba że użytkownik rozwinie ją odpowiednim gestem.

Dzięki temu aktualnie przekazywana treść lub grafika może zajmować cały ekran, zaś użytkownik może korzystać z bardzo funkcjonalnego modelu nawigacji między ekranami nadrzędnymi, podrzędnymi i równorzędnymi. Taki model nawigacji umożliwia również przełączanie się między niezwiązanymi ze sobą widokami, zachowując dość głęboką strukturę hierarchiczną. Użytkownik łatwo uczy się pracy z alternatywnymi widokami i funkcjami, przyswajając sobie szybko zasadę interakcji z systemem za pomocą tak zorganizowanego interfejsu HMI.

W projekcie interfejsu HMI na urządzenia mobilne należy uwzględniać powszechnie używane gesty dotykowe.

3️⃣ Działania, akcje użytkownika

Projektanci interfejsów HMI muszą pamiętać o modelu interakcji z systemem w wersji dla dewelopera i dla użytkownika końcowego. Graficzne elementy sterowania muszą na wyświetlaczu urządzenia mobilnego wyglądać czytelnie i jednoznacznie, by użytkownik łatwo z nich korzystał. Z zasady należy przyjąć, że gdy liczba możliwych akcji przewyższa liczbę elementów sterowania, użytkownik może się pogubić. Jednocześnie będzie miał trudność w znalezieniu ważnych funkcji HMI.

Dostęp do krytycznych informacji na ekranie nie może np. wymagać przytrzymania przycisku – użytkownik nie domyśli się tego i w efekcie może nie znaleźć informacji. Znacznie lepiej jest dodać przycisk z informacjami na nakładce w górnym rogu ekranu.

Takie rozwiązanie nienachalnie, lecz jednoznacznie podpowiada użytkownikowi, gdzie i czy ma znaleźć niewidoczne wprost informacje.

4️⃣ Elementy sterowania systemem

Opracowano wiele modeli sterowania do interfejsów urządzeń mobilnych, których podstawą jest czytelność dla użytkownika. Powszechnie spotykane modele sterowania obejmują:

→ przycisk w postaci przełącznika do włączania i wyłączania funkcji,

→ suwaki do wyboru więcej niż dwóch ustawień funkcji,

→ przycisk strzałek do krokowego, precyzyjnego wyboru konkretnej opcji z szerokiego zakresu wartości,

→ funkcje wymagające wyboru jednej z wielu wartości kategorycznych powinny mieć postać listy rozwijanej lub rolek,

→ w ostateczności rozwiązaniem są pola tekstowe, których obsługa zajmuje najwięcej czasu, lecz obarczona jest najniższym ryzykiem błędu ze strony użytkownika.

Można również połączyć obsługę dotykową wymienionych funkcji sterowania z reakcją urządzenia mobilnego, tj. wibracją lub dźwiękiem. Jednakże należy używać takich reakcji wyłącznie wtedy, gdy interakcja oparta na reakcjach graficznych jest niewystarczająca.

Należy elementy sterujące projektować tak, by minimalizowały ryzyko błędnego wyboru i jego skutków. Należy zachować odpowiednie odległości między elementami sterującymi, aby użytkownik przypadkiem nie wywoływał niechcianych funkcji. Do potwierdzania poleceń, których skutków nie można łatwo lub w ogóle cofnąć, należy używać okien dialogowych wyskakujących na cały ekran.

Gesty dotykowe są idealnym modelem interakcji z interfejsem HMI. Szereg powtarzających się gestów o spójnym działaniu czyni aplikację przewidywalną dla użytkownika. Najczęściej spotykane gesty zostały podane w tabeli 1.

Należy projektować interfejsy HMI dla różnych wielkości i rozdzielczości obrazu, dzięki czemu będą czytelne na każdym urządzeniu.

5️⃣ Projektowanie w skali

Tradycyjne interfejsy HMI mają stałą rozdzielczość ekranu, według której projektuje się fizyczne elementy sterowania. Jednakże projektując interfejs HMI na urządzenia mobilne, należy pamiętać, że ekrany w różnych urządzeniach mają zróżnicowaną wielkość. Skutkiem tego elementy UI (np. przyciski) wydają się większe na ekranach o małej rozdzielczości i mniejsze, na ekranach których rozdzielczość jest większa. Dlatego też elementy wizualne, czyli tekst, ikony i grafika, muszą być tak zaprojektowane, by były czytelne bez względu na rozdzielczość ekranu urządzenia mobilnego. Jeśli chcemy zaprojektować interfejs HMI, który sprawdzi się niezależnie od rozdzielczości, należy kierować się proporcjami wyświetlaczy podanymi w tabeli 2. Dzięki temu grafika, elementy sterowania i tekst będą wyglądały tak samo na ekranach o różnej wielkości.

Kierowanie się tą zasadą i dobrą praktyką umożliwia łatwe i efektywne przenoszenie aplikacji HMI na mniejszy wyświetlacz. To zaś sprzyja lepszym doświadczeniom i odbiorowi interfejsów przez użytkownika. Przedstawione pokrótce w tym artykule ogólne, podstawowe zasady dobrego projektu pozwalają tworzyć dopracowane modele koncepcyjne, dające czytelny interfejs. Istnieją również jednak szczególne warunki, zmuszające do ograniczenia ilości informacji wizualnych prezentowanych jednocześnie na ekranie oraz uwzględnienia różnic między paradygmatami interakcji użytkownika z konkretnymi urządzeniami mobilnymi.


Joseph Zulick jest felietonistą i redaktorem w firmie MRO Electric and Supply.