:
przykłady
Spróbuj "
Rada: Aby zapobiec automatycznemu dodawaniu stylów przez jQuery Mobile elementy interaktywne, wykorzystanie danych roli = atrybut „nie”.
Projektant UX z IBM Zoltan Collin.
Do zakładek
Zoltana Collina
Formularze rozwijane wydają się oczywistym wyborem: są łatwe i tanie w tworzeniu, nie zajmują zbyt dużo miejsca, automatycznie potwierdzają wprowadzone informacje, są obsługiwane we wszystkich przeglądarkach i platformach, a użytkownicy są już przyzwyczajeni do nich.
Projektanci najczęściej korzystają z list rozwijanych niewłaściwie, ale w opinii dyrektora ds Produkt Google'aŁukasza Wróblewskiego, wzór ten należy stosować jedynie w ostateczności.
Przyjrzyjmy się pewnym ograniczeniom:
- Opcje rozwijane są niewidoczne, dopóki użytkownik nie kliknie lub nie dotknie formularza. Ponadto na pierwszy rzut oka nie można przewidzieć, ile wierszy będzie na liście - dwa czy pięćdziesiąt.
- Wybór opcji z listy rozwijanej jest procesem wieloetapowym, szczególnie na urządzeniach mobilnych: użytkownik musi najpierw dotknąć formularza i otworzyć opcje, przewinąć w dół i znaleźć tę, którą chce, wybrać ją i zamknąć listę.
- Listy rozwijane sprawiają, że projektanci są leniwi, ponieważ dodanie wszystkich możliwych opcji do jednej listy jest tak proste, bez ustalania priorytetów. Z tego powodu lista rozwijana jest bardzo podobna do innego szablonu - menu „hamburger”.
- Przewijanie długich list, np. wybieranie kraju, to koszmar. Zwłaszcza na urządzeniach mobilnych, gdzie wyszukiwanie za pomocą klawiatury zwykle nie jest dostępne.
- Na niektórych urządzeniach pole wyświetlania opcji jest bardzo małe, więc przesuwanie może być koszmarem.
Liczba widocznych opcji list na iOS może wydawać się niezwykle mała
Dobra wiadomość jest taka, że tak duża liczba alternatywne elementy wprowadzania danych, które w wielu przypadkach sprawdzą się lepiej niż listy rozwijane.
Oszacuj liczbę opcji
Nie należy używać list rozwijanych do podejmowania decyzji, w których należy wybrać jedną z dwóch opcji. Zamiast tego wypróbuj pole wyboru lub przycisk radiowy.
W przypadku niewielkiej liczby wzajemnie wykluczających się opcji odpowiedni jest formularz w postaci przycisków radiowych lub przycisków sterowania segmentowego. Użytkownik od razu zobaczy wszystkie dostępne opcje i nie będzie musiał rozwijać listy.
Przykład użycia segmentowych przycisków sterujących
Liczba widocznych opcji zależy od szerokości ekranu i długości tekstu. Nie należy jednak używać więcej niż pięciu opcji
Użyj formularza wejściowego z filtrowaną listą rozwijaną dla dużej liczby dokładnie pewne opcje, gdy użytkownik dokładnie wie, czego chce znaleźć.
Zamiast przewijać całą listę, użytkownicy mogą wpisać pierwsze litery i wybrać przefiltrowane opcje
W przypadku dużych i zróżnicowanych list lepiej jest wykorzystać istniejące dane użytkownika, aby mieć pewność, że na liście znajdą się popularne opcje odpowiedzi. W takim przypadku 90% użytkowników będzie mogło od razu wybrać wymaganą opcję, a pozostałe 10% kliknie opcję „Inne”, co zostanie wyjaśnione w kolejnym pytaniu.
I chociaż „Inne” nie jest najbardziej eleganckim rozwiązaniem, ustalenie priorytetów może poprawić UX dla większości użytkowników.
Oceń preferowaną formę wprowadzania danych
Jedną z zalet list rozwijanych jest to, że użytkownicy nie muszą dużo wpisywać. Jeśli jednak wystarczy tylko trochę wpisać, a dane są wymagane dość często (na przykład dane osobowe), wygodniej jest je wprowadzić, niż wybierać z listy.
Na urządzeniach mobilnych najłatwiejszym sposobem wprowadzenia roku urodzenia jest użycie klawiatura numeryczna, a nie lista rozwijana
Ogólnie rzecz biorąc, klawiatura numeryczna jest najbardziej skuteczna metoda wprowadź wartość liczbową.
Nawet jeśli wartości listy są posortowane w kolejności, użytkownikom może być łatwiej wpisać je ręcznie, zamiast je przewijać.
Jeśli ważne jest dla Ciebie potwierdzenie danych, które wprowadza osoba, skorzystaj z formularza wejściowego z filtrowaną listą rozwijaną.
Na przykład, gdy użytkownik musi określić stan, przefiltruj listę dostępne opcje może tylko jedna litera
Jest to szczególnie ważne, jeśli kolejność sortowania elementów listy nie jest całkowicie jasna.
Na przykład użytkownicy nie rozumieją, według jakiej zasady sortowane są waluty. Zrób to tak, aby mogli wyszukiwać zarówno według nazwy, jak i skrótu
To samo dotyczy listy krajów.
W przypadku liczb całkowitych – takich jak liczba pasażerów lub przedmiotów w wózku – najlepiej jest użyć steppera. Pozwoli użytkownikom zwiększyć lub zmniejszyć wartość jednym kliknięciem.
Dla liczby ułamkowe lub zmiennych umieszczonych na skali, najlepiej posłużyć się suwakiem.
Ten artykuł jest zapowiedzią nowej funkcjonalności.
Nie zaleca się wykorzystywania treści tego artykułu do poznawania nowych funkcjonalności.
Pełny opis nowa funkcjonalność zostanie udostępniona w dokumentacji odpowiedniej wersji.
Pełna lista zmiany w Nowa wersja znajduje się w pliku v8Update.htm.
Zaimplementowano w wersji 8.3.11.2867.
Kontynuujemy rozwój platformy mobilnej, dodając funkcjonalności, które są już dostępne w platformie komputery osobiste. Ponadto opracowujemy konkretne możliwości platformy, które są istotne tylko dla urządzeń mobilnych. Teraz opowiemy Ci o kilku najważniejszych ulepszeniach.
Planista
Model obiektowy harmonogramu „mobilnego” nie uległ zmianie, ale zmienił się sposób interakcji użytkownika z harmonogramem, ponieważ metody wprowadzania informacji na urządzeniach mobilnych różnią się od tych stosowanych na komputerach stacjonarnych.
Przykładowo, szybka edycja elementu odbywa się poprzez jedno kliknięcie na elemencie. Długie naciśnięcie połączeń menu kontekstowe oraz do pojawienia się znaczników pozwalających na rozciągnięcie elementu. Przeciąganie odbywa się poprzez długie naciśnięcie, a następnie przesunięcie palca.
Przewijanie całego planera odbywa się poprzez przewijanie jednym palcem, powiększanie dwoma palcami i tak dalej.
Cechą obecnej implementacji „mobilnego” harmonogramu jest to, że nie obsługuje on jeszcze drukowania.
Sformatowany dokument
Kolejnym „nowym” obiektem, który dodaliśmy do platformy mobilnej jest Sformatowany dokument. Z punktu widzenia użytkownika dokument w formacie „mobilnym” różni się jedynie tym, że jego panel edycyjny jest wbudowany w sam sterownik i stanowi logiczną część Wirtualna klawiatura. Jako programiści nie macie obowiązku dodawania go osobno do konfiguracji. Panel edycyjny ma inny rodzaj w zależności od rodzaju urządzenia mobilnego (telefon lub tablet).
Podgląd formularza „mobilnego” w konfiguratorze
W konfiguratorze podczas tworzenia formularza dodaliśmy możliwość zobaczenia jak będzie wyglądał Twój formularz urządzenie przenośne.
W panelu poleceń możesz wybrać opcję interfejsu Urządzenie przenośne i zobacz, jak formularz będzie wyglądał w standardowej orientacji.
Tutaj możesz obrócić swoje urządzenie mobilne.
Ponadto daliśmy Ci możliwość wyboru duża liczba wspólne urządzenia.
Dodatkowo formularze mobilne możesz przeglądać w trzech różnych skalach:
- Piksel po pikselu- gdy piksel ekranu urządzenia mobilnego odpowiada pikselowi ekranu okna zapowiedź;
- Rzeczywisty rozmiar
- gdy rozmiar urządzenia mobilnego na ekranie jest zgodny wymiary geometryczne urządzenia;
- Według rozmiaru okna- gdy skala wyświetlania jest tak dobrana, aby „mobilny” obszar wyświetlania mieścił się w oknie podglądu bez przewijania.
Przetwarzanie wsadowe dokumentów arkusza kalkulacyjnego
Do platformy mobilnej dodaliśmy szereg nowych obiektów, które umożliwiają tworzenie pakietów wyświetlanych dokumentów. Funkcjonalność ta jest podobna do tej, którą można znaleźć na platformie PC. Dzięki temu możesz teraz na przykład wysłać kilka dokumentów do druku jednocześnie.
Opracowywanie dostarczalnych powiadomień
Wdrożyliśmy obsługę usługi powiadomień push systemu Windows (WNS, Windows Notification Services). Teraz możesz skorzystać z funkcjonalności dostarczanych powiadomień podczas uruchamiania aplikacji mobilnej na platformach z rodziny Windows.
Przerobiliśmy także system obsługi błędów przy wysyłaniu dostarczonych powiadomień. W sytuacjach, w których wcześniej zgłaszano błąd jako wyjątek, jest on teraz zgłaszany jako wartość, którą można obsłużyć w wbudowanym języku.
Akceleracja sprzętowa w systemie operacyjnym Android
Na wersjach system operacyjny Android 4.4.2 i nowsze platforma mobilna teraz używa przyspieszenie sprzętowe. Pozwoliło nam to zwiększyć prędkość renderowania interfejsu od 1,5 do 3 razy.
Ludzie, którzy korzystają z Twojego Aplikacja mobilna lub stronę internetową, realizują konkretny cel. Zazwyczaj tym, co stoi pomiędzy użytkownikiem a jego celem, jest forma. W rzeczywistości formularze są uważane za ostatni krok w procesie osiągania celów użytkownika. Dlatego tak ważne jest, aby użytkownik wypełnił formularz możliwie najszybciej i bez żadnych przeszkód.
Postępuj zgodnie z tymi siedmioma zasadami, aby tworzyć proste, przejrzyste formularze:
Zasada nr 1: Formularze muszą być kompatybilne ze sposobem, w jaki użytkownik wprowadza swoje dane
Upewnij się, że pola formularza nie są zasłonięte przez elementy interfejsu (takie jak klawiatura). Gdy użytkownik będzie wypełniał pola formularza, pola będą automatycznie przesuwane w górę.
Zasada nr 2: Minimalizuj liczbę pól wejściowych i potrzebę pisania przez użytkownika
Im dłuższy i bardziej złożony wygląda formularz, tym mniej prawdopodobne jest, że użytkownicy będą chcieli wypełnić puste pola, zwłaszcza na małych ekranach. Zmniejszenie liczby pól wejściowych sprawi, że formularz będzie mniej zaśmiecony, zwłaszcza jeśli prosisz użytkownika o wiele informacji.
Uczyń formularz tak prostym i krótkim, jak to możliwe
Jednak zmniejszenie liczby pól nie wystarczy. Należy także zwrócić uwagę na wysiłek, jaki użytkownik wkłada w wprowadzanie danych. Wymagane drukowanie wysoki stopień interakcje; istnieje duże prawdopodobieństwo błędów, nawet przy wejściu z pełnowymiarowej klawiatury (szczególnie na ekranie dotykowym).
Dlatego staraj się minimalizować potrzebę pisania i błędów użytkownika.
Inteligentne ustawienia domyślne
Inteligentne ustawienia domyślne pomagają użytkownikom szybciej i dokładniej wypełniać wszystkie pola formularzy. Można na przykład wstępnie wybrać kraj zamieszkania użytkownika na podstawie jego danych geolokalizacyjnych.
Automatyczne wykrywanie lokalizacja pozwoli użytkownikowi zaoszczędzić czas na szukaniu pokoju hotelowego
Przyciski opcji dla podobnych, ale wzajemnie wykluczających się wyborów
Gdy użytkownik staje przed wyborem z listy opcji, rozważ użycie poziomej listy tagów. Pozwala to efektywniej wykorzystać dostępną przestrzeń ekranu.
Suwaki dla ceny minimalnej/maksymalnej lub zakresu budżetu
Rozważ użycie suwaków dla pól zawierających ceny lub budżet. W ten sposób użytkownik może przesunąć suwak do wartości minimalnej/maksymalnej. Suwak można łatwo przesuwać w poziomie i można łatwo dostosować tę akcję za pomocą wskazówek wizualnych. Pamiętaj jednak, że podczas obsługi suwaka (zwłaszcza przy użyciu kciuków) nie należy ukrywać cyfr.
Suwak AirBnB, aby wybrać cenę
Zasada nr 3: Nagłówki formularzy muszą znajdować się nad samymi polami lub być pływające
Nagłówki informują użytkownika o głównym przeznaczeniu pola, a zwykły tekst to jeden z głównych sposobów na zwiększenie dostępności interfejsu użytkownika.
Dlaczego nigdy nie powinieneś używać nagłówków tekstowych wewnątrz pól
Nagłówki wewnątrz pól (lub symbole zastępcze) to tekst znajdujący się w polu formularza, który znika, gdy tylko użytkownik zacznie wprowadzać swoje dane.
Nagłówki wewnątrz pola
Chociaż nagłówki w pudełku wyglądają dobrze z estetycznego punktu widzenia, ta zaleta jest często przeceniana. Głównym błędem jest utrata kontekstu. Po kliknięciu przez użytkownika w pole napis znika. W związku z tym nie może zweryfikować, czy napisał dokładnie to, co potrzebne.
Tekst wewnątrz pola nie jest największy najlepszy zamiennik nagłówek wizualny
Ponadto niektórzy użytkownicy, którzy zobaczą, że coś jest już napisane w polu, mogą pomyśleć, że pole jest już wstępnie wypełnione i nie muszą wpisywać niczego więcej i mogą zignorować wypełnianie.
Dlaczego nagłówki pól wyrównane do lewej są szkodliwe dla urządzeń mobilnych
Najważniejszą rzeczą, którą należy wziąć pod uwagę podczas korzystania z nagłówków wyrównanych do lewej strony na urządzeniu mobilnym, jest rozmiar i proporcje ekranu. Jeśli tytuł po lewej stronie znajduje się naprzeciwko pola, to przy pionowej orientacji ekranu pozostanie bardzo mało miejsca na samo pole. Stwarza to pewne trudności w użyciu, ponieważ nie ma wystarczająco dużo miejsca, aby wyświetlić to, co wpisuje użytkownik. Brak możliwości zobaczenia wprowadzonego tekstu stwarza problem dla użytkowników, ponieważ uniemożliwia im szybkie zauważenie błędu podczas wprowadzania danych przed wysłaniem formularza.
Bardzo trudno jest zauważyć błąd, jeśli dane nie są w pełni widoczne
Górny nagłówek lub responsywny nagłówek
Tytuły formularzy powinny znajdować się u góry pól formularzy, aby użytkownicy mogli zobaczyć, co i w jaki sposób wypełniają. Główną zaletą umieszczania nagłówków formularzy nad formularzem jest to, że można rozciągnąć formularz na całą szerokość ekranu i dostosować go do rozmiaru umożliwiającego wprowadzanie danych (np. przy rozmiarze czcionki 16 pikseli). Dodatkowa korzyść Możliwe będzie pisanie jasnych i zrozumiałych nagłówków (nieograniczonych do 1-2 słów).
Główną wadą umieszczania nagłówków nad polami jest to, że cały formularz zajmuje więcej miejsca w pionie, co wiąże się z koniecznością przewijania ekranu. Nie jest to jednak bardzo poważny problem – dziś wszyscy są przyzwyczajeni do scrollowania.
Alternatywnie możesz użyć responsywnych nagłówków, aby mieć pewność, że użytkownicy poprawnie wypełnili pole. Tekst zastępczy jest domyślnie wyświetlany, ale po dotknięciu pola i wprowadzeniu tekstu tekst zastępczy przesuwa się na górę pola, jak pokazano poniżej.
Zasada nr 4: Walidacja pól formularza powinna odbywać się w czasie rzeczywistym
W idealnym świecie użytkownicy wypełnialiby formularz niezbędne informacje i pomyślnie wykona to zadanie. W prawdziwym świecie użytkownicy często popełniają błędy. Jednocześnie użytkownikom nie podoba się to, że po całym procesie wypełniania pól docierają do przycisku „wyślij” i odkrywają, że popełnili błąd. Poprawne jest poinformowanie użytkownika o sukcesie/błędzie w polu natychmiast po jego wypełnieniu. Komunikat weryfikacyjny natychmiast informuje użytkownika, że wprowadzone informacje są prawidłowe. Takie podejście pozwala użytkownikom szybciej naprawiać błędy i bez konieczności czekania na wyświetlenie błędów po kliknięciu przycisku przesyłania.
Jeśli oczekujesz konkretnych odpowiedzi na pytania, musisz od razu wskazać, co i w jakiej formie należy wpisać.
Rozwiązaniem może być również sprawdzanie ciągów znaków. Na poniższym przykładzie możesz zobaczyć dobry przykład, jak poprawić potencjalny błąd.
Zasada nr 5: Wyświetlaj układ klawiatury zgodnie z wprowadzonymi danymi
Użytkownicy wolą odpowiedni układ klawiatury w aplikacji. Na przykład, gdy użytkownik musi wprowadzić numer karta kredytowa, pokazuj wprowadzane liczby tylko tak, aby użytkownik wprowadzał cyfry, a nie symbole. Zwiększy to prędkość napełniania i zmniejszy ilość możliwe błędy wejście.
Musisz się tego upewnić ta okazja wdrażane w całej aplikacji, a nie w jej poszczególnych częściach.
Zasada nr 6: Podaj przydatne informacje w odpowiednim kontekście
Czasami istnieje potrzeba zapewnienia odpowiednich i przydatna informacja aby uprościć proces wypełniania formularza przez użytkownika. Jednak takiego towarzyszącego tekstu należy używać tylko tam, gdzie jest to naprawdę potrzebne:
- Planując daty, użytkownicy doceniają kontekst, taki jak wbudowany kalendarz umożliwiający określenie dni tygodnia. Zmniejsza to potrzebę wychodzenia z aplikacji w celu wyświetlenia kalendarza, zmniejszając ryzyko odwrócenia uwagi użytkownika od jego podstawowego zadania.
- Ludzie mogą obawiać się o bezpieczeństwo swoich danych, dlatego trzeba im pokazać, że ich dane nie będą udostępniane osobom trzecim.
Zgodnie z zasadą dobrych manier nie należy rozciągać wyjaśnienia do 100 znaków.
Zasada nr 7: Używaj elastycznego formatu
Niektóre zadania wymagają od użytkownika bardzo precyzyjnych informacji. Ale jednocześnie wymaganie od użytkownika podania informacji w określonej formie może być sprzeczne z zasadami dobrej użyteczności. Jeśli poprosisz użytkownika o wprowadzenie w formularzu informacji cyfrowych (takich jak numer telefonu), zachowaj elastyczność i utwórz ekrany, które będą obsługiwać różne formaty wprowadzaj i wyświetlaj informacje w najbardziej przyjaznej dla użytkownika formie, aby zapobiec błędom.
Nie używaj stałego formatu wprowadzania danych
Wniosek
Użytkownik podczas wypełniania formularza może mieć różne wątpliwości, dlatego warto postarać się maksymalnie uprościć cały proces. Wszystkie wskazówki opisane w tym artykule mogą znacznie poprawić użyteczność formularzy.
