Posicionamiento Lógico de Componentes de Páginas Web

Al disponer formularios y otros elementos de la pantalla, lea la disposición como una conversación, que funcione desde el comienzo de la página. Acomode los elementos para asegurarse de que el diálogo tenga sentido, y será una mejor experiencia para el usuario.

El monólogo mental del browser

Cuando usamos una página web, como algún software o medio de comunicación, todos tenemos un comentario mental sutil corriendo dentro de nuestras cabezas. Éste toma decisiones, da instrucciones, hace preguntas, y hace comentarios sobre la página.

Ejemplo de monólogo mental

– ¿Qué es esto?
– "¡No, no quiero recibir más información!"
– "Esto se ve como aquél otro."
– "¿Dónde vi ese link?"
– "¡Sí, quiero mandar un mensaje! ¿Dónde se supone que debo hacer click?"

Imagino que cuando los elementos que diseño en una página web interactúan con un monólogo mental de un usuario, produce un diálogo. En esta conversación en dos sentidos, cada parte se toma su turno para hablar y escuchar.

A veces, el diálogo es extremadamente eficiente y rápido, como el intercambio entre un conserje de hotel experiente y un huésped de honor.

A veces, el diálogo se vuelve confuso, o se interrumpe completamente. Esto ocurre ya sea porque la información relevante no se presenta, o se presenta de una manera equivocada.

Un problema común que encuentro en las páginas web es que la información es presentada en el orden incorrecto. A veces parece como que alguien no está escuchándolo, o que esa vida de alguna manera no es tan simple como debería ser. Muy a menudo, es un caso simple de disposición.

"Ok Hosting en Mexico te ofrece planes de hospedaje web o web host  economico y profesional con soporte para ASP .NET y  PHP , contrata tu plan de web hosting al mejor precio y registra tu nombre de dominio con la empresa lider en Mexico. "

Ejemplo

La pantalla de abajo muestra un corto formulario del sitio de mi web host. Todos los formularios en el sitio recientemente rediseñado son atractivos y usan una disposición consistente, con íconos en la barra superior y formularios para ingresar información en el cuadro más pálido de abajo.

El problema es que no se lee apropiadamente.

La conversación es algo así como:
La página pregunta, "¿Quién es usted?".
Yo digo, "Soy el cliente número XXX."
Yo digo, "Puedo demostrarlo porque aquí está mi contraseña."
Yo digo, "Ahora déjeme entrar…"

¡Y entonces encuentro un obstáculo porque el botón de ingresar no está!

De hecho, el botón está bastante cerca, pero es difícil de encontrar porque no está donde usted espera encontrarlo (y lo que usted espera es significativo).

El ojo no quiere mirar arriba, porque la lógica dice que el siguiente objeto no es probable que esté en la parte de arriba de la página. Se supone que esté a la derecha y/o abajo, pero no lo está. El ícono en el que necesito hacer click está en realidad arriba y a la izquierda de donde estoy ahora.

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}