Utwórz pozycję etykiety, aby uzyskać najlepszą użyteczność

16

Tworzę formularz, który poprosi o ich gościa firstname, middle initiali lastname. Chcę, aby te pola tekstowe były wszystkie wewnątrz, ale gdzie mam umieścić etykiety? Po lewej, u góry lub pod polami.

Szukam najlepszego podejścia z punktu widzenia użyteczności.

html usability user-input forms Shane Stillwell
źródło
Czy to nie jest bardziej odpowiednie dla uxexchange.com? ( uxexchange.com )
Bobby Jack
Wow, nie wiedziałem, że istnieje uxechange.com, dzięki. Sądząc po liczbie głosów oddanych na to pytanie, zdecydowanie należy to do umysłu Webmasterów.
Shane Stillwell
Tak - to trochę „problem”. Wierzę, że uxexchange został skonfigurowany przy użyciu „starego modelu SO”. Witryny korzystające z nowego modelu, takie jak webmasterzy, wydają się przyciągać znacznie więcej uwagi. Więc coś, co jest bardziej odpowiednie dla uxexchange, odnosi większe sukcesy na webmasterach. Nie jestem pewien, jakie jest rozwiązanie - migrować uxexchange?
Bobby Jack

Odpowiedzi:

10

Zobacz to badanie autorstwa UXmatters . Jest dość dogłębny, zawiera dane dotyczące śledzenia wzroku i stwierdza, że ​​etykiety na górze są ogólnie najlepszym rozwiązaniem.

Istnieje podobny artykuł Łukasza Wróblewskiego , również dość szczegółowy. Oba artykuły są warte przeczytania!

Grant Palin
źródło
+1 Zamierzałem opublikować dokładnie te same zasoby. Naprawdę każda odpowiedź na to pytanie powinna obejmować badania.
Virtuosi Media,
To było to, czego szukałem, kilka porównań lewy kontra górny. Jestem pewien, że wiele z nich jest subiektywnych, ale nie mniej, powinny być pewne układy, które są nieco lepsze, wszystkie rzeczy są równe. Dzięki.
Shane Stillwell
Co ciekawe, w artykule UXmatters stwierdzono, że pogrubione etykiety odwracają uwagę odwiedzających i ... „Pogrubione etykiety były trudniejsze do odczytania i dostrzeżenia przez użytkowników - prawdopodobnie dlatego, że między pogrubionym tekstem a ciężkimi sąsiadującymi granicami było więcej zamieszania. pól wejściowych. ” Dobrze wiedzieć.
Shane Stillwell
żeby nie być negatywnym, ale uxmatters.com nie ma sekcji „najpopularniejsze artykuły” ani nawet nie korzysta z narzędzi Google dla webmasterów, dzięki czemu mogę znaleźć najczęściej czytane artykuły, co nie jest zbyt wygodne dla użytkowników!
Neil McGuigan,
5

Najważniejsze jest zachowanie spójności z resztą witryny. Zasadniczo większość witryn wykonuje etykiety po lewej stronie pól tekstowych. Z tego powodu byłby to długi opis, więc upewnij się, że masz miejsce i dobrze płynie.

Jeśli po lewej stronie nie wygląda dobrze lub nie ma na to miejsca, zrobiłbym to powyżej. To jest bardzo jasne.

Jedyną metodą, której chciałbym uniknąć, jest umieszczenie etykiet pod polami tekstowymi. kiedy etykiety znajdują się pod polami, jest to bardziej mylące.

Ben Hoffman
źródło
3
W każdym razie nie zapomnij o foratrybucie.
Pierre-Alain Vigeant,
4

Zwykle najlepiej jest w danej sytuacji u góry lub po lewej stronie. Tylko upewnij się, że etykieta znajduje się przed polem wejściowym dla ułatwienia dostępu.

Nadal istnieje wiele różnych sposobów układania strony i zapewnienia jej dostępności.

Etykiety formularzy mogą naprawdę pojawiać się w dowolnym miejscu, pod warunkiem że od tego czasu. Warto sięgnąć po to, http://patterntap.com/tap/collection/forms

Kevin
źródło
3

Istnieją dwie opcje, które są uważane za najlepsze:

  • etykiety na lewo od pola, opróżnione w prawo, aby były blisko wejścia.
  • etykiety nad samym polem

Inną ważną rzeczą, na którą należy zwrócić uwagę, jest użyteczność, aby upewnić się, że używasz atrybutu for etykiety, tak aby kliknięcie etykiety koncentrowało się na polu, który oznacza.

GSto
źródło
1

Odpowiedź: Żadne z powyższych. Użyj tekstu zastępczego w samym polu. Atrybut zastępczy jest wbudowaną częścią HTML-5.

W przeciwnym razie powiedziałbym, że umieść to nad polami, wyrównane do lewej.

Adam L. Davis
źródło
0

To trochę styczna - ale proszę nie używać imienia / nazwiska / inicjału. Nie każde imię należy do tej zgrabnej grupy.

Cytując siebie na StackOverflow:

Wiele kultur azjatyckich umieścić rodziny Imię, ponieważ rodzina jest uważane za bardziej istotne niż jednostki.

Biorąc pod uwagę, że istnieje spora liczba osób, które używają nazwiska, które nie jest imieniem nadanym przez ich rodziców, z powodzeniem zastosowałem następujący schemat:

Pełne imię i nazwisko (jak zwykle napisane dla adresowania poczty); Nazwisko rodowe; Znany jako (nazwa często używana w rozmowie).

Na przykład:

Pełna nazwa: William Gates III; Nazwisko: Gates; Znany jako: Bill

Pełna nazwa: Soong Li; Nazwisko: Soong; Znany jako: Lisa

Aby uzyskać więcej informacji, zobacz /programming/259634/splitting-a-persons-name-into-forename-and-sename/259694#259694 .

Bevan
źródło
Widzę wartość twojej rekomendacji, ale kluczowym pytaniem będzie „kto jest twoją grupą docelową?” Jeśli 99% moich odbiorców to Amerykanie, wybrałbym Imię / MI / Nazwisko. Myślę, że wielu Amerykanów nie od razu zrozumie, jakie byłoby nazwisko. Jak powiedział @RandomBen, musisz być konsekwentny, a większość witryn w USA używa Firstname / MI / Lastname.
Shane Stillwell