Pola tekstowe

Za pomocą pola tekstowego użytkownicy mogą wyświetlać, wprowadzać lub edytować wartość tekstową lub liczbową.

Typowe pole tekstowe.

Czy jest to właściwa kontrola?

Aby zdecydować, rozważ następujące pytania:

• Czy wyliczenie wszystkich prawidłowych wartości jest praktyczne? Jeśli tak, rozważ listy z jednym wyborem, widoku listy, listy rozwijanej , listy rozwijanej możliwej do edycji lub suwaka.
• Czy prawidłowe dane są całkowicie nieograniczone? Czy też prawidłowe dane są ograniczone tylko przez format (ograniczone długości lub typy znaków)? Jeśli tak, użyj pola tekstowego.
• Czy wartość reprezentuje typ danych, który ma wyspecjalizowaną wspólną kontrolę? Przykłady obejmują datę, godzinę lub adres IPv4 lub IPv6. Jeśli tak, użyj odpowiedniej kontrolki, takiej jak kontrolka daty, a nie pole tekstowe.
• Jeśli dane są liczbowe:
  • Czy użytkownicy postrzegają ustawienie jako względną ilość? Jeśli tak, użyj suwaka.
  • Czy użytkownik skorzysta z natychmiastowej opinii na temat wpływu zmian ustawień? Jeśli tak, użyj suwaka, ewentualnie wraz z polem tekstowym. Na przykład użytkownicy mogą łatwo wybrać kolor za pomocą suwaka, ponieważ natychmiast widzą efekt zmian w odcieniach, nasyceniu lub jaskrawości.

Pojęcia dotyczące projektowania

Chociaż pola tekstowe mają korzyść z bycia bardzo elastycznym, mają wadę minimalnych ograniczeń. Jedynymi ograniczeniami w edytowalnym polu tekstowym są:

• Opcjonalnie można ustawić maksymalną liczbę znaków.
• Opcjonalnie można ograniczyć dane wejściowe tylko do znaków liczbowych (0 9).
• Jeśli używasz kontrolki spin, możesz ograniczyć opcje sterowania spin do prawidłowych wartości.

Oprócz ich długości i opcjonalnej obecności kontrolki spin pola tekstowe nie mają żadnych wskazówek wizualnych sugerujących prawidłowe wartości ani ich format. Oznacza to, że poleganie na etykietach w celu przekazania tych informacji użytkownikom. Jeśli użytkownicy wprowadzają nieprawidłowy tekst, musisz obsłużyć błąd z komunikatem o błędzie.

Ogólnie rzecz biorąc, należy użyć najbardziej ograniczonej kontrolki, którą można. Użyj nieprzyciągniętych kontrolek, takich jak pola tekstowe w ostateczności. Oznacza to, że podczas rozważania ograniczeń należy pamiętać o potrzebach użytkowników globalnych. Na przykład kontrolka ograniczona do kodów POCZTOWYch Stanów Zjednoczonych nie jest globalna, ale niezwiązanym polem tekstowym, które akceptuje dowolny format kodu pocztowego.

Wzorce użycia

Pole tekstowe to elastyczna kontrolka z kilkoma możliwymi zastosowaniami.

Etykieta	Wartość
dane wejściowe Jednowierszowe, nieprzeciętne pole tekstowe używane do wprowadzania lub edytowania krótkich ciągów.	Jednowierszowe, nieprzeciętne pole tekstowe.
sformatowane dane wejściowe Zestaw krótkich, stałych, jednowierszowych pól tekstowych używanych do wprowadzania danych w określonym formacie.	Pole tekstowe używane do formatowania danych wejściowych. Uwaga: funkcja automatycznego zamykania automatycznie zwiększa fokus wejściowy z jednego pola tekstowego do następnego. Jedną wadą tego podejścia jest to, że nie można kopiować ani wklejać danych jako pojedynczej jednostki.
asystowane dane wejściowe Jednowierszowe, nieprzecięte pole tekstowe używane do wprowadzania lub edytowania ciągów w połączeniu z przyciskiem polecenia, który ułatwia użytkownikom wybieranie prawidłowych wartości.	W tym przykładzie polecenie Przeglądaj ułatwia użytkownikom wybieranie prawidłowych wartości.
wprowadzanie tekstu Wielowierszowe, nieprzeciętne pole tekstowe używane do wprowadzania lub edytowania długich ciągów.	Wielowierszowe, nieprzeciętne pole tekstowe.
dane wejściowe liczbowe Jednowierszowe, tylko numeryczne pole tekstowe używane do wprowadzania lub edytowania liczb z opcjonalną kontrolką spin w celu ułatwienia wprowadzania danych wejściowych opartych na myszach.	Pole tekstowe używane do wprowadzania liczbowego. Kombinacja pola tekstowego i skojarzonej z nią kontrolki spin nosi nazwę pokrętło.
hasło i numer PIN wejściowe Jednowierszowe, nieprzeciętne pole tekstowe używane do bezpiecznego wprowadzania haseł i numerów PIN.	Pole tekstowe używane do wprowadzania haseł.
dane wyjściowe danych wyjściowych Jednowierszowe, tylko do odczytu pole tekstowe, zawsze wyświetlane bez obramowania, używane do wyświetlania krótkich ciągów.	W przeciwieństwie do tekstu statycznego dane wyświetlane przy użyciu pola tekstowego można przewijać (przydatne, jeśli dane są szersze niż kontrolka), zaznaczone i kopiowane. Jednowierszowe pole tekstowe tylko do odczytu używane do wyświetlania danych.
danych wyjściowych tekstowych Wielowierszowe pole tekstowe tylko do odczytu używane do wyświetlania długich ciągów.	Pole tekstowe tylko do odczytu używane do wyświetlania danych.

Wytyczne

Ogólne

• Podczas wyłączania pola tekstowego wyłącz również wszystkie skojarzone etykiety, etykiety instrukcji, kontrolki pokrętła i przyciski poleceń.

• Użyj autouzupełnianie, aby ułatwić użytkownikom wprowadzanie danych, które mogą być używane wielokrotnie. Przykłady obejmują nazwy użytkowników, adresy i nazwy plików. Nie należy jednak używać automatycznego uzupełniania w polach tekstowych, które mogą zawierać poufne informacje, takie jak hasła, numery PIN, numery kart kredytowych lub informacje medyczne.

• Nie należy niepotrzebnie przewijać użytkowników. Jeśli oczekujesz, że dane będą większe niż pole tekstowe i możesz łatwo zwiększyć pole tekstowe bez szkody dla układu, ustaw rozmiar pola, aby wyeliminować konieczność przewijania.

  niepoprawne:

  

  W tym przykładzie pole tekstowe powinno być znacznie dłuższe, aby obsługiwać dane.

• Paski przewijania:

  • Nie umieszczaj poziomych pasków przewijania w wielowierszowych polach tekstowych. Zamiast tego użyj przewijania pionowego i zawijania wierszy.
  • Nie umieszczaj żadnych pasków przewijania w jednowierszowych polach tekstowych.

• W przypadku danych wejściowych liczbowych możesz użyć kontrolki spin. W przypadku wprowadzania tekstowego należy zamiast tego użyć listy rozwijanej lub listy rozwijanej możliwej do edycji.

• Nie używaj funkcji automatycznego zamykania z wyjątkiem sformatowanych danych wejściowych. Automatyczne przesunięcie fokusu może zaskoczyć użytkowników.

Edytowalne pola tekstowe

• Ogranicz długość tekstu wejściowego, gdy to możliwe. Jeśli na przykład prawidłowe dane wejściowe są liczbą z zakresu od 0 do 999, użyj pola tekstowego liczbowego, które jest ograniczone do trzech znaków. Wszystkie części pól tekstowych używających sformatowanych danych wejściowych muszą mieć krótką, stałą długość.

• Być elastycznym przy użyciu formatów danych. Jeśli użytkownicy mogą wprowadzać tekst przy użyciu szerokiej gamy formatów, spróbuj obsłużyć wszystkie najbardziej typowe. Na przykład wiele nazw, liczb i identyfikatorów można wprowadzić za pomocą opcjonalnych spacji i znaków interpunkcyjnych, a wielkie litery często nie mają znaczenia.

• Jeśli nie możesz obsłużyć prawdopodobnych formatów, należy wymagać określonego formatu przy użyciu sformatowanych danych wejściowych lub wskazać prawidłowe formaty w etykiecie.

  dopuszczalne :

  

  W tym przykładzie pole tekstowe wymaga wprowadzenia w określonym formacie.

  lepiej:

  

  W tym przykładzie wzorzec sformatowanych danych wejściowych jest używany do wymagania określonego formatu.

  najlepsze :

  

  W tym przykładzie pole tekstowe obsługuje wszystkie prawdopodobne formaty.

• Podczas wybierania maksymalnej długości danych wejściowych należy rozważyć elastyczność formatowania. Na przykład prawidłowy numer karty kredytowej może używać maksymalnie 19 znaków, więc ograniczenie długości do niczego krótszego utrudnia wprowadzanie liczb przy użyciu dłuższych formatów.

• Nie używaj sformatowanego wzorca danych wejściowych, jeśli użytkownicy będą bardziej skłonni do wklejania długich, złożonych danych. Zamiast tego należy zarezerwować sformatowany wzorzec danych wejściowych w sytuacjach, w których użytkownicy będą bardziej skłonni do wpisywania danych.

  

  W tym przykładzie nie jest używany wzorzec sformatowanych danych wejściowych, dzięki czemu użytkownicy mogą wkleić adresy IPv6.

• Jeśli użytkownicy będą bardziej skłonni ponownie wprowadzić całą wartość, zaznacz cały tekst fokusu danych wejściowych. Jeśli użytkownicy będą bardziej skłonni do edycji, umieść daszek na końcu tekstu.

  

  W tym przykładzie użytkownicy mogą częściej zastępować niż edytować, więc cała wartość jest wybierana na fokus danych wejściowych.

  

  W tym przykładzie użytkownicy są bardziej skłonni do dodawania słów kluczowych niż zastępowania tekstu, więc daszek jest umieszczany na końcu tekstu.

• zawsze używaj wielowierszowego pola tekstowego, jeśli nowe znaki wiersza są prawidłowymi danymi wejściowymi.

• Gdy pole tekstowe jest przeznaczone dla pliku lub ścieżki, zawsze podaj przycisk Przeglądaj.

Pola tekstowe liczbowe

• Wybierz najwygodniejsze jednostki i oznacz jednostki. Rozważ na przykład użycie mililiterów zamiast litrów (lub odwrotnie), wartości procentowe zamiast wartości bezpośrednich (lub odwrotnie) itd.

  poprawna:

  

  W tym przykładzie jednostka jest oznaczona etykietą, ale wymaga od użytkowników wprowadzenia liczb dziesiętnych.

  lepiej:

  

  W tym przykładzie pole tekstowe używa wygodniejszej jednostki.

• Użyj kontrolki spin, gdy jest to przydatne. Jednak czasami kontrolki spin nie są praktyczne, takie jak wtedy, gdy użytkownicy muszą wprowadzić wiele dużych liczb. Użyj kontrolek spin, gdy:

  • Dane wejściowe mogą być małą liczbą, zazwyczaj poniżej 100.
  • Użytkownicy mogą wprowadzić niewielką zmianę w istniejącej liczbie.
  • Użytkownicy mogą częściej używać myszy niż klawiatura.

• wyrównanie do prawej tekstu liczbowego zawsze, gdy:

  • Istnieje więcej niż jedno pole tekstowe liczbowe.
  • Pola tekstowe są wyrównane w pionie.
  • Użytkownicy mogą dodawać lub porównywać wartości.

  poprawna:

  

  W tym przykładzie tekst liczbowy jest wyrównany do prawej, aby ułatwić porównywanie wartości.

  niepoprawne:

  

  W tym przykładzie tekst liczbowy jest niepoprawnie wyrównany do lewej.

• Zawsze wyrównaj wartości pieniężne.

• Nie przypisz specjalnych znaczeń do określonych wartości liczbowych, nawet jeśli te specjalne znaczenie są używane wewnętrznie przez aplikację. Zamiast tego użyj pól wyboru lub przycisków radiowych dla jawnego wyboru użytkownika.

  niepoprawne:

  

  W tym przykładzie wartość -1 ma specjalne znaczenie.

  poprawna:

  

  W tym przykładzie pole wyboru powoduje, że opcja jest jawna.

Wprowadzanie hasła i numeru PIN

• Zawsze używaj wspólnej kontrolki hasła zamiast tworzyć własne. Hasła i numery PIN wymagają bezpiecznego obsługi specjalnego traktowania.

Aby uzyskać więcej wytycznych i przykładów, zobacz Balony.

Dane wyjściowe tekstowe

• Rozważ użycie białego koloru systemu tła dla dużego tekstu tylko do odczytu w wielu wierszach. Białe tło ułatwia odczytywanie tekstu. Dużo tekstu na szarym tle zniechęca do czytania.

Aby uzyskać więcej informacji na temat kolorów tła, zobacz Font.

Dane wyjściowe danych

• Nie używaj obramowania dla pól tekstowych tylko do odczytu. Obramowanie to wizualna wskazówka, którą można edytować.
• Nie wyłączaj jednowierszowych pól tekstowych tylko do odczytu. Uniemożliwia to użytkownikom wybranie i skopiowanie tekstu do schowka. Uniemożliwia to również użytkownikom przewijanie danych, jeśli przekracza rozmiar granic.
• Nie ustawiaj zatrzymania karty w pojedynczym wierszu, pole tekstowe tylko do odczytu, chyba że użytkownik prawdopodobnie będzie musiał przewinąć lub skopiować tekst.

Walidacja danych wejściowych i obsługa błędów

Ponieważ pola tekstowe zwykle nie są ograniczone do akceptowania tylko prawidłowych danych wejściowych, może być konieczne zweryfikowanie danych wejściowych i obsłużenie wszelkich problemów. Zweryfikuj różne typy problemów wejściowych w następujący sposób:

• Jeśli użytkownik wprowadzi nieprawidłowy znak, zignoruj znak i wyświetl dymek problemu wejściowego, który wyjaśnia prawidłowe znaki.

  

  W tym przykładzie dymek zgłasza nieprawidłowy znak wejściowy.

• Jeśli dane wejściowe mają nieprawidłową wartość lub format, wyświetl dymek problemu wejściowego, gdy pole tekstowe utraci fokus wejściowy.

• Jeśli dane wejściowe są niespójne z innymi kontrolkami w oknie, po zakończeniu całego danych wejściowych należy podać komunikat o błędzie, na przykład po kliknięciu przycisku OK dla modalnego okna dialogowego.

Nie usuwaj nieprawidłowych danych wejściowych, chyba że użytkownicy nie będą mogli łatwo poprawić błędów. Dzięki temu użytkownicy mogą naprawiać błędy bez rozpoczynania pracy. Na przykład należy wyczyścić nieprawidłowe hasła i numery PIN, ponieważ użytkownicy nie mogą je łatwo poprawić.

Aby uzyskać więcej wytycznych i przykładów, zobacz Komunikaty o błędach i balony .

Monity

Monit to etykieta lub krótka instrukcja umieszczona wewnątrz pola tekstowego jako jego wartość domyślna. W przeciwieństwie do tekstu statycznego monity znikają z ekranu, gdy użytkownicy wpiszą coś w polu tekstowym lub zostaną fokus danych wejściowych.

Typowy monit.

Użyj monitu, gdy:

• Miejsce na ekranie znajduje się w takiej warstwie premium, że użycie etykiety lub instrukcji jest niepożądane, na przykład na pasku narzędzi.
• Monit służy przede wszystkim do identyfikowania przeznaczenia pola tekstowego w kompaktowy sposób. Nie może to być istotne informacje, które użytkownik musi zobaczyć podczas korzystania z pola tekstowego.

Nie używaj monitów tylko do kierowania użytkowników do wpisywania czegoś lub klikania przycisków. Na przykład nie zapisuj tekstu monitu o podanie nazwy pliku, a następnie kliknij przycisk Wyślij.

W przypadku korzystania z monitów:

• Rysuj tekst monitu w szarości kursywy i rzeczywisty tekst wejściowy w normalnym kolorze czarnym. Tekst monitu nie może być mylony z rzeczywistym tekstem.
• Zachowaj zwięzłość tekstu monitu. Zamiast pełnych zdań można używać fragmentów.
• Użyj wielkich liter w stylu zdania.
• Nie używaj końcowej interpunkcji ani wielokropka.
• Tekst monitu nie powinien być edytowalny i powinien zniknąć po kliknięciu lub naciśnięciu karty przez użytkowników w polu tekstowym.
  • Wyjątek: Jeśli pole tekstowe ma domyślny fokus wejściowy, zostanie wyświetlony monit i zniknie po rozpoczęciu wpisywania przez użytkownika.
• Tekst monitu zostanie przywrócony, jeśli pole tekstowe jest nadal puste, gdy utraci fokus wejściowy.

Zalecane ustalanie rozmiaru i odstępy

Zalecane ustalanie rozmiaru i odstępy między polami tekstowymi.

Szerokość pola tekstowego jest wizualną wskazówką oczekiwanego rozmiaru danych wejściowych. Podczas określania rozmiaru pól tekstowych:

• Wybierz szerokość odpowiednią dla najdłuższych prawidłowych danych. W większości sytuacji użytkownicy nie powinni przewijać najdłużej prawdopodobnego ciągu, który wprowadzi lub wyświetli.
• Uwzględnij dodatkowe 30 procent (do 200 procent dla krótszego tekstu) dla dowolnego tekstu (ale nie liczb), który zostanie zlokalizowany.
• Jeśli oczekiwane dane wejściowe nie mają określonego rozmiaru, wybierz szerokość zgodną z innymi polami tekstowymi lub kontrolkami w oknie.
• Rozmiar wielowierszowych pól tekstowych w celu wyświetlenia całkowitej liczby wierszy tekstu.

Etykiety

Etykiety pól tekstowych

• Wszystkie pola tekstowe wymagają etykiet. Napisz etykietę jako wyraz lub frazę, a nie jako zdanie, kończąc na dwukropku i używając tekstu statycznego.

  wyjątki :

  • Pola tekstowe z monitami znajdującymi się w miejscu, w którym znajduje się miejsce w warstwie Premium.

  • W przypadku etykietowania grupa pól tekstowych używanych do sformatowanych danych wejściowych powinna być traktowana jako jedno pole tekstowe.

  • Jeśli pole tekstowe jest podrzędne dla przycisku radiowego lub pola wyboru i jest wprowadzane przez etykietę kończącą się dwukropkiem, nie umieszczaj dodatkowej etykiety w polu tekstowym.

  • Pomiń etykiety kontrolek, które ponownie instruktaż główny. W tym przypadku główna instrukcja przyjmuje dwukropek (chyba że jest to pytanie) i klucz dostępu.

    dopuszczalne :

    

    W tym przykładzie etykieta pola tekstowego jest tylko odtworzeniem instrukcji głównej.

    lepiej:

    

    W tym przykładzie etykieta nadmiarowa jest usuwana, więc główna instrukcja przyjmuje dwukropek i klucz dostępu.

• Przypisz unikatowy klucz dostępu. Aby uzyskać wskazówki dotyczące przypisywania kluczy dostępu, zobacz Klawiatura.

• Użyj wielkich liter w stylu zdania.

• Umieść etykietę z lewej strony lub nad polem tekstowym i wyrównaj etykietę do lewej krawędzi pola tekstowego. Jeśli etykieta znajduje się po lewej stronie, wyrównaj w pionie tekst etykiety do tekstu pola tekstowego.

  poprawna:

  

  

  W tych przykładach etykieta na górze jest wyrównana do lewej krawędzi pola tekstowego, a etykieta po lewej stronie jest wyrównana do tekstu w polu tekstowym.

  niepoprawne:

  

  

  W tych niepoprawnych przykładach etykieta na górze jest wyrównana do tekstu w polu tekstowym, a etykieta po lewej stronie jest wyrównana do górnej części pola tekstowego.

• Możesz określić jednostki (na przykład sekundy lub połączenia) w nawiasach po etykiecie.

• Jeśli pole tekstowe akceptuje dowolnie małą maksymalną liczbę znaków, możesz określić maksymalne dane wejściowe w etykiecie. Szerokość pola tekstowego powinna również sugerować maksymalny rozmiar.

  

  W tym przykładzie etykieta daje maksymalną liczbę znaków.

• Nie należy określać zawartości pola tekstowego (ani etykiety jednostek) zdania, ponieważ nie jest to możliwe do zlokalizowania.

• Jeśli pole tekstowe może służyć do wprowadzania kilku elementów, wyjaśnij, jak oddzielić elementy w etykiecie.

  

  W tym przykładzie separator elementu jest podany w etykiecie.

• Aby uzyskać wskazówki dotyczące wskazywania wymaganych danych wejściowych, zobacz Wymagane dane wejściowe w oknach dialogowych .

Etykiety instrukcji

• Jeśli musisz dodać tekst instrukcji dotyczący pola tekstowego, dodaj go powyżej etykiety. Używaj pełnych zdań z kończącymi znakami interpunkcyjnymi.

• Użyj wielkich liter w stylu zdania.

• Dodatkowe informacje, które są przydatne, ale nie są niezbędne, powinny być krótkie. Umieść te informacje w nawiasach między etykietą a dwukropkiem lub bez nawiasów poniżej pola tekstowego.

  

  W tym przykładzie dodatkowe informacje znajdują się poniżej pola tekstowego.

Etykiety monitów

• Zachowaj zwięzłość tekstu monitu. Zamiast pełnych zdań można używać fragmentów.
• Użyj wielkich liter w stylu zdania.
• Nie używaj końcowej interpunkcji ani wielokropka.
• Jeśli monit przekierowuje użytkowników do wprowadzenia informacji, które będą działać za pomocą przycisku obok pola tekstowego, po prostu umieść przycisk obok pola tekstowego. Nie używaj monitu, aby skierować użytkowników do kliknięcia przycisku (na przykład nie zapisuj tekstu monitu, który mówi, Przeciągnij plik, a następnie kliknij przycisk Wyślij).

Dokumentacja

Podczas odwoływania się do pól tekstowych:

• Użyj typu, aby odwoływać się do interakcji użytkownika, które wymagają wpisywania lub wklejania; W przeciwnym razie użyj Enter, jeśli użytkownicy mogą umieścić informacje w polu tekstowym przy użyciu innych środków, takich jak wybranie wartości z listy lub użycie przycisku Przeglądaj.

• Użyj polecenia select, aby odwołać się do wpisu w polu tekstowym tylko do odczytu.

• Użyj dokładnego tekstu etykiety, w tym jego wielkości liter i dołącz pole wyrazu. Nie dołączaj podkreślenia ani dwukropka klucza dostępu. Nie należy odwoływać się do pola tekstowego jako pola tekstowego ani pola.

• Jeśli to możliwe, sformatuj etykietę przy użyciu tekstu pogrubionego. W przeciwnym razie umieść etykietę w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.

  Przykład: wpisz hasło w polu hasło, a następnie kliknij przycisk OK.

• Jeśli pole tekstowe wymaga określonego formatu, dokument jest najczęściej używanym dopuszczalnym formatem. Pozwól użytkownikom na samodzielne odnajdywanie innych formatów. Chcesz być elastyczny w formatach danych, ale nie powinno to skutkować złożoną dokumentacją.

  poprawna:

  Wprowadź numer seryjny części przy użyciu formatu 1234-56-7890.

  niepoprawne:

  Wprowadź numer seryjny części przy użyciu dowolnego z następujących formatów:

  1234567890

  1234-56-7890

  1234 56 7890