Wytyczne dotyczące projektowania witryn do gromadzenia danych

Wprowadzenie

Wypełnianie ankiet to podstawowe zadanie większości pracowników opieki zdrowotnej korzystających z aplikacji mobilnych związanych ze zdrowiem.

Wprowadzanie danych może być trudne i może prowadzić do błędów. Naszym celem w przypadku biblioteki Structured Data Capture (SDC) i wskazówek dotyczących projektowania jest umożliwienie Ci poprawy wygody użytkowników podczas wprowadzania danych oraz jakości rejestrowanych danych.

W tej sekcji omówimy 4 tematy:

1. Układ i nawigacja
2. Pytania i instrukcje
3. Przechwytywanie danych
4. Sprawdzanie poprawności danych i komunikaty o błędach

Układ i nawigacja

Długie przewijanie i układ z podziałem na strony

Układ z długim przewijaniem (po lewej) i układ z podziałem na strony (po prawej).

Pakiet Android FHIR SDK oferuje 2 opcje układu:

1. Długie przewijanie (domyślnie)
2. Z podziałem na strony

Kwestionariusz z długim przewijaniem wyświetla wszystkie pytania na jednej stronie, a użytkownicy przechodzą do poszczególnych pytań, przewijając stronę.

Ankieta podzielona na strony wyświetla treść na osobnych stronach. Powiązane pytania lub pola wprowadzania można pogrupować na jednej stronie. Przyciski Wstecz i Dalej są umieszczone na dole strony, aby ułatwić przechodzenie między stronami.

Dowiedz się, jak podzielić ankietę na strony na GitHubie

Który układ należy wybrać?

Każda opcja układu ma swoje zalety i wady. Poniżej znajdziesz kilka atrybutów każdego typu układu, które warto wziąć pod uwagę przy wyborze układu.

	Długie przewijanie	Z podziałem na strony
Szybkość nawigacji	Szybsza nawigacja	Wolniejsza nawigacja
Dokładność nawigacji	Mniej precyzyjna nawigacja	Bardziej precyzyjna nawigacja
Ponowne skupienie się na pytaniu po przełączeniu zadania	Trudność w ponownym zorientowaniu się po przerwaniu	Łatwiejsze ponowne zorientowanie się po przerwaniu
Wypełnianie cyfrowego kwestionariusza po wizycie (kopiowanie z wersji papierowej)	Łatwiejsze kopiowanie z papieru	Trudniejsze w przypadku kopiowania z papieru
Małe ekrany	Gorzej na małych ekranach	Lepsze na małych ekranach
Ułatwienia dostępu	Utrudnia dostępność. Trudne w obsłudze.	Lepsze ułatwienia dostępu. Oddzielne ekrany, które mogą być obsługiwane przez czytniki ekranu, zamianę tekstu na mowę i inne technologie.
Miejsce na instrukcje i wyjaśnienia	Gorsze w przypadku wskazówek i instrukcji	Lepsze do wskazówek i instrukcji

Długie przewijanie

Zrób to: numeruj pytania
Ponumeruj pytania, aby ułatwić poruszanie się po układzie strony.

Zrób to: dostosuj rozmiar czcionki
Zmniejsz rozmiar czcionki tytułów pytań podczas korzystania z długiego przewijania, aby na ekranie było widocznych więcej treści. Przykład: długie przewijanie to 16 pikseli. Z podziałem na strony – 28 pikseli.

Podział na strony

Zalecane: jedno pytanie na stronie
Klawiatury, menu i inne komponenty zajmują miejsce na stronie, więc staraj się umieszczać jedno pytanie na stronie.

Nie – ukryj treści w części strony widocznej po przewinięciu
Treści powinny być widoczne w części strony widocznej na ekranie.

Rób: grupuj powiązane treści w jedno pytanie
Przykład: te 3 pola tekstowe są powiązane z informacjami o osobie kontaktowej, więc są zgrupowane na jednej stronie.

Nie grupuj – grupuj niepowiązane treści
Aby uniknąć zamieszania, nie grupuj niepowiązanych treści na jednej stronie.

Wskaźnik postępu

Wskaźnik postępu pokazuje postępy w wypełnianiu ankiety.

W przypadku długich ankiet dodaj wskaźnik postępu, który ułatwi użytkownikom poruszanie się po ankiecie i śledzenie postępów. Wskaźniki postępu pokazują miejsce w kwestionariuszu i ile jeszcze zostało do wypełnienia.

Zrób to: układ z długim przewijaniem
Umieść go u góry, nad pytaniem i elementem zakotwiczającym, aby był zawsze widoczny, nawet podczas przewijania.

Do — tylko układ z podziałem na strony
Można umieścić na dole, nad przyciskami Wstecz i Dalej. W tym układzie możesz też wyświetlać stronę, na której znajduje się użytkownik.

Przyciski nawigacyjne

Przyciski nawigacyjne (wstecz, dalej) są umieszczone u dołu ankiety. W przypadku nieskończonego przewijania lub ostatniej strony ankiety z podziałem na strony przycisk Dalej ma etykietę Prześlij.

Przyciski powinny znajdować się w tym samym miejscu, a aktywne przyciski powinny być zawsze oznaczone etykietą z informacją o działaniu, np. „Wstecz” i „Dalej”.

Zrób to: aktywne przyciski
Zawsze wyświetlaj aktywne przyciski, nawet jeśli formularze są niekompletne. Po kliknięciu przycisku Dalej wyświetl wyskakujące okienko z instrukcjami dotyczącymi wypełniania brakujących pól lub błędów weryfikacji.

Nie – nieaktywne przyciski
Nieaktywne przyciski utrudniają użytkownikom znalezienie rozwiązania problemu.

Nie – przyciski z samymi ikonami
Unikaj przycisków z samymi ikonami. Zawsze oznaczaj przyciski opisowym działaniem.

Pytania i instrukcje

Omówienie 9 komponentów opisanych w tej sekcji i sposobu, w jaki są one łączone w kwestionariuszu podzielonym na strony.

1. Tytuł kwestionariusza.
2. Wskaźnik postępu.
3. Nagłówek grupy.
4. Tytuł pytania.
5. Instrukcje
6. Pole do wprowadzania danych.
7. Format wpisu.
8. Pola wymagane.
9. Pomoc.

Nagłówek grupy

Nagłówek grupy to tekstowy nagłówek wyświetlany nad tytułami pytań.

Użyj nagłówka grupy, aby pogrupować podobne pytania. Używaj nagłówka grupy tylko wtedy, gdy dodaje on przydatne informacje.

Tak – krótkie tytuły
Używaj krótkich tytułów, aby grupować podobne pytania. Przykład: wszystkie pytania dotyczące historii choroby pacjenta są zgrupowane.

Nie – długie tytuły
Unikaj złożonych lub długich tytułów, które zajmują więcej niż 1 wiersz.

Tytuł pytania

Tytuł pytania zwięźle opisuje, jakich informacji oczekujemy. Tytuły pytań mają największy rozmiar czcionki na stronie, aby przyciągać wzrok użytkownika.

Każda strona lub pytanie powinny mieć tytuł. Tytuły pytań powinny być krótkie lub mieć formę pytania.

Zrób to: krótki tytuł pytania
Krótkie tytuły ułatwiają użytkownikom czytanie.

Nie – długi tytuł pytania
Unikaj bardzo długich pytań i łączenia ze sobą dwóch pytań.

Nie – brak tytułu pytania
Zawsze dodawaj tytuł pytania, aby ułatwić użytkownikom określenie, jakie informacje muszą wpisać.

Instrukcje

Instrukcje to opcjonalne pole tekstowe wyświetlane pod tytułem pytania.

W polu instrukcje wyjaśnij odpowiednie instrukcje, np. czy pytanie jest wymagane, ile wyborów można dokonać (jeden czy wiele) i co użytkownicy powinni zrobić, jeśli nie mogą podać wszystkich informacji lub odpowiedzieć na pytanie.

Zrób to: wyjaśnij, co jest wymagane
W polu instrukcji podaj informację, czy pytanie jest wymagane i ile odpowiedzi można wybrać.

Zrób to: wyjaśnij, co należy zrobić w przypadku sytuacji wyjątkowych
Użyj instrukcji, aby poinformować użytkowników, co należy zrobić, jeśli napotkają scenariusz, w którym nie mogą wypełnić wszystkich pól.

Wyjaśniaj kontekst i podawaj definicje
Używaj instrukcji, aby podawać dodatkowy kontekst lub definicje terminów użytych w tytule pytania.

Tekst etykiety

Tekst etykiety informuje użytkowników o tym, jakie informacje są wymagane w przypadku pola tekstowego lub menu. Gdy pole jest zaznaczone, tekst etykiety przesuwa się ze środka pola tekstowego na górę.

Każde pole tekstowe i menu powinno mieć etykietę. Tekst etykiety powinien być krótki, jasny i w pełni widoczny.

Tak – bądź zwięzły
Tekst etykiety powinien być krótki, jasny i w pełni widoczny.

Nie – nie używaj zbyt wielu słów
Tekst etykiety nie powinien być zbyt długi, obcięty ani zajmować kilku wierszy.

Nie – brak etykiety
Zawsze dodawaj etykietę do pola tekstowego, aby użytkownicy wiedzieli, jakie informacje mają w nim wpisać.

Format wpisu

EntryFormat jest wyświetlany pod polem tekstowym, aby informować użytkowników o konkretnym formacie, w jakim należy wprowadzić dane. Komunikaty o błędach będą wyświetlane w polu EntryFormat i zastąpią dotychczasowe instrukcje EntryFormat.

W przypadku dat, numerów telefonów, jednostek i liczb całkowitych używaj EntryFormat.

Zrób to: użyj formatu EntryFormat
Wyświetl format daty pod polem i dodaj opisowe wyrażenie.

Nie – brak formatu wprowadzania
Brak wyświetlania formatów danych może prowadzić do nieprawidłowego wprowadzania danych.

Zrób to: podaj prawidłowy zakres
Podczas wpisywania zakresów medycznych podaj przykłady prawidłowego zakresu. Może to pomóc użytkownikom w wykrywaniu błędów lub liczb spoza zakresu.

Pola wymagane

Pola wymagane oznaczają, że użytkownik musi je wypełnić i nie może przejść dalej, dopóki tego nie zrobi.

Aby wskazać, że pole jest wymagane, na końcu tytułu pytania wyświetl gwiazdkę (*). W polu instrukcji umieść tekst „wymagane pytanie”, ponieważ nie dla wszystkich jest oczywiste, co oznacza gwiazdka (*). Jeśli nie ma tytułu pytania, w tekście etykiety wyświetl gwiazdkę (*).

Zrób to: wyjaśnienie pisemne
Pokaż, że pole jest wymagane, używając gwiazdki (*) i dodaj pisemne instrukcje, które wskazują, że jest to „pytanie wymagane”. Wiele osób nie wie, co oznacza gwiazdka(*), i skorzysta z wyjaśnienia.

Nie – bez wyjaśnienia
Unikaj wyświetlania tylko gwiazdki (*) bez opisu, co ona oznacza.

Zrób to: zlokalizuj terminologię
Używaj terminów, które są najbardziej znane Twoim użytkownikom. Przykład: termin „Obowiązkowy” może być bardziej znany i używany w niektórych krajach zamiast terminu „Wymagany”.

Zrób to: oznacz pytania opcjonalne
Jeśli większość pytań jest wymagana, oznacz te, które są opcjonalne.

Tak – zamiast tego wyświetlaj gwiazdkę w tekście etykiety
Jeśli nie ma tytułu pytania, wyświetlaj gwiazdkę w tekście etykiety.

Pomoc

Obok tytułu pytania wyświetla się ikona pomocy. Po kliknięciu ikony pojawi się pole z informacjami pomocy i dodatkowymi informacjami. Ponowne kliknięcie ikony zamyka okno z informacjami pomocy.

Jest to składnik opcjonalny. Używaj tylko wtedy, gdy chcesz wyświetlić dodatkowe informacje, które nie muszą być zawsze widoczne.

Tak – wyświetlaj opcjonalne informacje w polu pomocy
Używaj pomocy w przypadku informacji, które użytkownicy mogą potrzebować tylko raz lub które zawierają dodatkowe informacje.

Nie – ukryj instrukcje w polu pomocy
Nie ukrywaj w polu pomocy instrukcji, które powinny być widoczne dla wszystkich.

Zbieranie danych

8 głównych komponentów do zbierania danych w pakiecie Android FHIR SDK.

Kiedy używać którego komponentu?

Typ wprowadzania danych	Wybór wartości logicznej	Pojedynczy wybór	Jednokrotny wybór	Otwórz wybór	Menu	Selektor daty	Pole tekstowe	Suwak	Autouzupełnianie
Wybierz Tak lub Nie.
Wybierz jedną opcję									Uwaga
Wybierz kilka opcji									Uwaga
Tekst
Daty
Numbers								Uwaga

Pola tekstowe

Pola tekstowe wskazują, że użytkownicy mogą wpisywać informacje.

Używaj pól tekstowych, gdy ktoś musi wpisać tekst w ankiecie, np. imię i nazwisko, numer telefonu lub adres. Ogranicz wprowadzanie danych, które wymagają wpisywania tekstu (z klawiatury), jeśli można zamiast tego użyć wstępnie wypełnionego wyboru (wielokrotnego lub pojedynczego).

Więcej informacji o polach tekstowych na stronie material.io

Rób: używaj pól tekstowych do wprowadzania unikalnych danych
Używaj pól tekstowych do wprowadzania danych, które wymagają wpisania unikalnych słów lub liczb.

Nie – ogranicz używanie odpowiedzi w formie dowolnego tekstu
Unikaj używania odpowiedzi w formie dowolnego tekstu, gdy zamiast tego można użyć odpowiedzi wielokrotnej, menu lub odpowiedzi jednokrotnej.

Pojedynczy wybór i wybór wartości logicznej

Pojedynczy wybór i wybór logiczny to elementy sterujące wyboru, które wyświetlają się jako przyciski opcji, gdy użytkownicy mają wybrać jedną opcję z kilku.

Używaj boolean choice, gdy masz do wyboru tylko „Tak” lub „Nie”. W przeciwnym razie użyj komponentu jednokrotnego wyboru. Jeśli na liście jest więcej niż około 10 opcji, użyj menu zamiast jednokrotnego wyboru. Menu jest bardziej kompaktowe i łatwiejsze w obsłudze, gdy jest w nim wiele opcji.

Zrób – wybór logiczny
Używaj wyboru logicznego, gdy opcje to „tak” i „nie”.

Do — Single choice
Użyj opcji pojedynczego wyboru, gdy użytkownicy mogą wybrać jedną opcję z listy.

Nie – bardzo długie listy
Unikaj wyboru pojedynczego w przypadku bardzo długich list (10+). Zamiast tego użyj menu.

Selektor daty

Selektor daty umożliwia użytkownikom wprowadzanie dat zarówno za pomocą selektora daty w kalendarzu, jak i klawiatury. Po kliknięciu ikony kalendarza aktywowany jest selektor daty.

Selektora daty w kalendarzu używaj tylko w przypadku dat bliskich bieżącej, np. daty ostatniej miesiączki lub następnej wizyty. W przeciwnym razie priorytetem będzie wpisywanie z klawiatury dat, np. daty urodzenia.

Zrób to – obie opcje wpisywania
Aby wpisywać daty, włącz zarówno wpisywanie z klawiatury (kliknięcie pola tekstowego), jak i wybieranie daty z kalendarza (kliknięcie ikony).

Nie – unikaj używania tylko kalendarza
Unikaj włączania selektora daty w kalendarzu jako jedynej metody wprowadzania dat urodzenia. Przejście do danego miesiąca i roku jest trudne.

Menu

Menu rozwijane umożliwiają użytkownikom wybór spośród wielu opcji. Gdy użytkownik zacznie pisać, opcje będą filtrowane na podstawie wpisanego tekstu. Ułatwi to użytkownikom szybkie znalezienie odpowiedniej opcji na długiej liście.

Menu rozwijane to świetna alternatywa dla jednokrotnego wyboru, gdy lista opcji jest bardzo długa (ponad 10 pozycji), ponieważ zajmują mniej miejsca.

Zastosuj w przypadku długich list
Używaj menu, gdy wybierasz jedną opcję z bardzo długiej listy opcji, np. stan lub miasto.

Nie – gdy wpisywanie jest łatwe
Unikaj używania menu, gdy łatwiej jest wpisać treść niż przewijać wszystkie opcje, np. wiek.

Jednokrotny wybór

Wielokrotny wybór to element sterujący wyboru, który wyświetla się jako pola wyboru, gdy użytkownicy mogą dokonać wielu wyborów z listy opcji.

Użyj pytania wielokrotnego wyboru, gdy użytkownicy mogą wybierać tylko z wcześniej określonej listy opcji. Jeśli użytkownicy mogą też dodać własną odpowiedź, użyj komponentu otwartego wyboru. W polu instrukcje wpisz „Wybierz wszystkie odpowiednie opcje”, aby użytkownicy wiedzieli, że mogą wybrać więcej niż 1 odpowiedź.

Do – jeden wybór w wierszu
Domyślny wygląd to kontener wokół pól wyboru, który sprawia, że obszar klikalny jest wyraźnie widoczny.

Nie – wiele opcji w jednym wierszu
Unikaj wyświetlania wielu opcji w jednym wierszu, ponieważ ze względu na różnice w rozmiarze ekranu telefonu i rozmiarze tekstu tekst może zostać ucięty.

Otwórz wybór

Otwarty wybór jest podobny do pytania wielokrotnego wyboru, ale użytkownik może wybrać opcję Inne i wpisać dowolny tekst.

Użyj opcji otwarty wybór, gdy istnieje wstępnie zdefiniowana lista opcji, ale użytkownicy mogą też dodawać dodatkowe opcje. Użyj otwartego wyboru, gdy większość opcji jest znana, ale przewidujesz, że niektórzy użytkownicy wybiorą Inne, ponieważ żadna z podanych opcji nie ma zastosowania.

Do — używaj do dokładniejszego zbierania danych
Używaj, gdy ważne jest zbieranie dokładnych danych i żadna z predefiniowanych opcji nie ma zastosowania. Przykład: zawód.

Nie – jeśli wszystkie odpowiedzi będą inne
Unikaj używania tej opcji, jeśli większość odpowiedzi wymagałaby wybrania opcji Inne. W takim przypadku użyj pola tekstowego lub pola akapitu.

Suwak

Suwaki umożliwiają użytkownikom wybieranie wartości z określonego zakresu. Suwak w pakiecie Android FHIR SDK jest suwakiem dyskretnym. Suwak dyskretny umożliwia użytkownikom wybór konkretnej wartości z określonego zakresu. Znaczniki wyboru mogą służyć do wskazywania dostępnych wartości. Unikaj używania suwaka do wprowadzania danych liczbowych. Zamiast tego użyj pola tekstowego lub menu.

Więcej informacji o suwakach znajdziesz na stronie material.io

Nie – używaj suwaka w przypadku konkretnych liczb
Unikaj używania suwaka w przypadku konkretnych wartości, gdy zakres jest duży. Zamiast tego używaj pól tekstowych z wpisywaniem z klawiatury.

Sprawdzanie poprawności danych i błędy

Walidacja danych

Sprawdzanie poprawności danych ogranicza typ danych lub wartości, które można wprowadzić w polu tekstowym. Sprawdzanie poprawności danych może poprawić jakość zbieranych danych.

Użyj pola EntryFormat, aby wyświetlić ograniczenia formatu lub wartości. Wyświetlaj istotne komunikaty o błędach weryfikacji danych w wierszu i natychmiast, aby użytkownicy mogli naprawić błąd.

Rób: wyświetlaj ograniczenia sprawdzania poprawności
Wyświetlaj ograniczenia sprawdzania poprawności danych z wyprzedzeniem, aby użytkownicy wiedzieli, jak wprowadzać dane.

Nie – ukryj ograniczenia weryfikacji
Jeśli nie podasz, ile cyfr powinien zawierać numer telefonu, użytkownicy prawdopodobnie napotkają błąd, a proces weryfikacji potrwa dłużej.

Do — Show validation errors immediately
Wyświetlaj błędy weryfikacji danych od razu po wypełnieniu pola. Komunikaty o błędach zastępują tekst w dotychczasowym formacie wpisu.

Nie – czekaj do momentu przesłania
Nie czekaj, aż użytkownik naciśnie przycisk „Prześlij”, aby po raz pierwszy wyświetlić błędy weryfikacji.

Błędy

Komunikaty o błędach informują użytkowników o problemach i podpowiadają, jak je rozwiązać.

Używaj kolorów, ikon i tekstu, aby informować o błędach.

Więcej informacji o komunikatach o błędach na stronie material.io

Zrób to: dokładnie opisz, jak naprawić błąd
Wyjaśnij, dlaczego wystąpił błąd (wymagane pytanie) i co można zrobić, aby go naprawić (wybierz 1 odpowiedź).

Nie – napisz tylko „błąd”
Komunikat o błędzie, który zawiera tylko słowo „błąd”, nie pomaga użytkownikom w rozwiązaniu problemu.

Do — Explain how to fix the error without blame
Example: "Wrong date format. Format musi być dd/mm/rrrr”.

Nie obwiniaj użytkownika
Unikaj obwiniania użytkownika w komunikatach o błędach, które zawierają słowo „Ty”. Przykład: „Ty wpisałeś(-aś) datę w nieprawidłowym formacie”.

Tak – wiele wskazówek
Używaj koloru, ikon i tekstu, aby informować użytkowników o wystąpieniu błędu.

Nie – polegaj tylko na kolorze
Aby uwzględnić typowe wady wzroku, takie jak ślepota barw na kolor czerwony i zielony, unikaj polegania tylko na kolorze w celu przekazania informacji o błędzie.

Nie używaj zbyt wielu ikon
Zwykle wystarczy jedna ikona. Nie przesadzaj z używaniem ikon do przekazywania informacji o błędzie.