Better Forms Through Visual OrganizationYouTube↗  IA↗(long shot)
Science & Technology  4.4K views 122 likes 0 dislikes   17 Jul 2020
NNgroup 252K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
- Forms which collect data from users
- Formularios que recogen datos de los usuarios
are a critical touchpoint
son un punto de contacto crítico
where we can either make it very easy
donde podemos hacer que nuestros diseños sean muy fáciles
or very difficult for people to use our designs.
o muy difíciles para el uso de la gente .
There's a lot of variability in how forms should be designed
Hay mucha variabilidad en la forma en que deben ser
depending on what type of information is being collected
diseñadas dependiendo del tipo de información que se esté
but there are a few general principles
recogiendo pero hay algunos principios generales
about how you visually organize the fields
sobre cómo organizas visualmente los campos
that can go a long way towards making it easy for people
que puede ayudar mucho a facilitarle a la gente
to understand the form and avoid errors while completing it.
el entendimiento del formulario y evitar errores al completarlo
First of all, make sure that the placement of the labels
En primer lugar, asegúrate de que la colocación de las
makes it completely obvious
etiquetas hace que sea completamente obvio
which label goes with which field.
qué etiqueta va con cada campo.
Labels should always be closer to the field they describe
Las etiquetas siempre deben estar más cerca del campo que
than they are to any other fields.
describen que de cualquier otro campo.
Don't create ambiguity by showing a label
No crees ambigüedades mostrando una etiqueta
that is equally distant to two different fields.
que está a la misma distancia de dos campos diferentes.
Showing the labels inside the fields avoids this problem
Mostrar las etiquetas dentro de los campos evita este
but it also creates other problems
problema pero también crea otros problemas
because you need to use that space inside the field
porque necesitas usar ese espacio dentro del campo
to show what the user has typed
para mostrar lo que el usuario ha escrito
and sometimes the users won't be able to see the field label
y a veces los usuarios no podrán ver la etiqueta del campo
if you've removed it to show their input.
si lo has quitado para mostrar su entrada.
Second, most forms work better
En segundo lugar, la mayoría de las formas funcionan mejor
if you stick to a single column of fields
si te adhieres a una sola columna de campos
and avoid the temptation to make the form shorter
y evitar la tentación de acortar la forma
by squeezing multiple fields into a single row.
apretando múltiples campos en una sola fila.
Of course, there are exceptions to this such as dates.
Por supuesto, hay excepciones a esto, como las fechas.
A day, a month and a year are actually three parts
Un día, un mes y un año son en realidad tres partes
of the same piece of information
de la misma pieza de información
so it'd be strange to divide them into three different rows
así que sería extraño dividirlos en tres filas diferentes
but for the most part,
pero en su mayor parte,
each field of the form is a separate question
cada campo de la forma es una pregunta separada
and you should ask those questions one at a time
y deberías hacer esas preguntas de una en una.
with a clear single path through the form down one column.
Con un claro camino único a través de la forma hacia abajo de una columna.
Using a single column reduces the risk
Usar una sola columna reduce el riesgo
that people will overlook fields that are off to the side.
que la gente pase por alto los campos que están a un lado.
Finally, use spacing intentionally
Finalmente, usar el espaciado intencionalmente
to communicate when you are switching to a different topic
para comunicarte cuando cambies a un tema diferente
within the form.
dentro del formulario.
For example, if you first collect contact information
Por ejemplo, si primero recopilas información de contacto
and then ask about payment information,
y luego preguntas por la información de pago,
visually separate these two topics into different groups
separa visualmente estos dos temas en grupos diferentes
by adding extra space between them.
añadiendo espacio extra entre ellos.
Forms aren't exciting
Las formas no son emocionantes
but they are an important point of interaction
pero son un importante punto de interacción
and one that with a little forethought
y uno con un poco de previsión puede
you can make as easy and frictionless as possible.
hacerlo mas fácil y sin fricciones, tanto como sea posible. Suscríbete a nuestro canal Aprende mas en nngroup.com
Similar videos:

How to Test Visual Design
NNgroup
18.5K views 226 likes 1 dislikes 09 Nov 201841% match

Checkboxes vs. Switches in Forms
NNgroup
6.2K views 62 likes 3 dislikes 20 Jul 201837% match

The Visual Principle of Scale in User Interface Design
NNgroup
1.3K views 40 likes 1 dislikes 06 Nov 202033% match

Design for the Elderly
NNgroup
14.4K views 776 likes 1 dislikes 22 Jan 202133% match

Design Principles 101
NNgroup
10.1K views 233 likes 2 dislikes 22 May 202032% match

The Halo Effect in UX Design
NNgroup
5.7K views 102 likes 0 dislikes 22 Nov 201931% match

Why Service Design
NNgroup
5.4K views 71 likes 1 dislikes 18 Oct 201931% match

Budgeting for Design Changes
NNgroup
1.2K views 20 likes 1 dislikes 15 Mar 201930% match

UX Animations
NNgroup
2K views 123 likes 1 dislikes 08 Jan 202130% match

Marking Required Fields in Online Forms
NNgroup
4.4K views 76 likes 3 dislikes 13 Dec 201929% match

4 Trustworthiness Factors
NNgroup
2.1K views 65 likes 5 dislikes 30 Oct 202029% match

User Interface Design Fails
NNgroup
7.5K views 160 likes 1 dislikes 09 Oct 202029% match

How UX Professionals Define Design Thinking in Practice
NNgroup
8.7K views 75 likes 4 dislikes 30 Aug 201928% match

Website Design in High-Context Cultures like China
NNgroup
3.6K views 93 likes 8 dislikes 13 Mar 202028% match

Design Thinking 102
NNgroup
9.7K views 99 likes 2 dislikes 03 Aug 201828% match

Design Thinking & Agile
NNgroup
9.8K views 114 likes 6 dislikes 27 Sep 201928% match

UX vs. Service Design
NNgroup
19K views 386 likes 9 dislikes 21 Jun 201928% match

Usability Heuristic 8: Aesthetic and Minimalist Design
NNgroup
22.7K views 129 likes 4 dislikes 20 Sep 201928% match

Inclusive Design Is a Welcome Mat
NNgroup
2.3K views 52 likes 6 dislikes 21 Jun 201927% match

Transitioning from UI to UX
NNgroup
5.3K views 105 likes 1 dislikes 29 Nov 201927% match

Design Thinking 101
NNgroup
22.3K views 232 likes 6 dislikes 22 Oct 201627% match

F-Pattern in Reading Digital Content
NNgroup
15.5K views 122 likes 4 dislikes 25 Aug 201727% match

Design Ruts and Functional Fixedness
NNgroup
1.2K views 64 likes 0 dislikes 20 Nov 202026% match

Why Didn't People Scroll? The Illusion of Completeness
NNgroup
4K views 73 likes 3 dislikes 06 Dec 201926% match

Top Tasks for UX Design: How and Why to Create Them
NNgroup
2.2K views 62 likes 0 dislikes 07 Feb 202026% match

DesignOps 101
NNgroup
5.2K views 104 likes 5 dislikes 26 Jul 201926% match

What Has Made You a Better UX Professional?
NNgroup
3.8K views 62 likes 0 dislikes 01 Nov 201926% match

The 3 Response Time Limits in Interaction Design
NNgroup
3.8K views 76 likes 1 dislikes 25 Oct 201926% match

Don't Be Fooled by Surface-Level Design (Jakob Nielsen)
NNgroup
3.1K views 72 likes 2 dislikes 10 Nov 201726% match

Democratizing Design (Don Norman)
NNgroup
6.7K views 192 likes 1 dislikes 13 Apr 201826% match


Settings Privacy About Contact Donate