DISEÑO DE INTERACCIONES (IXD)

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 2

Unidad 4:

Diseño de interacciones IxD: Formularios, Buscadores

y prevención del error.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 3

Presentación:
En esta unidad veremos cómo prevenir errores y el diseño de formularios y buscadores.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 4

Objetivos:
Que los participantes:
• Sepan detectar errores tempranamente.
• Entiendan qué es el diseño de interfaz.
• Sepan para qué sirve el prototipo.
• Sepan cómo se organizan los formularios.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 5

Bloques temáticos:
1. Beneficios que nos trae aplicar UX.

2. Patrones de diseño. Formularios.

3. Buscadores.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 6

Consignas para el aprendizaje colaborativo

En esta Unidad los participantes se encontrarán con diferentes tipos de actividades que,
en el marco de los fundamentos del MEC*, los referenciarán a tres comunidades de
aprendizaje, que pondremos en funcionamiento en esta instancia de formación, a los
efectos de aprovecharlas pedagógicamente:

● Los foros proactivos asociados a cada una de las unidades.

● La Web 2.0.
● Los contextos de desempeño de los participantes.

Es importante que todos los participantes realicen algunas de las actividades sugeridas y
compartan en los foros los resultados obtenidos.

Además, también se propondrán reflexiones, notas especiales y vinculaciones a

bibliografía y sitios web.

El carácter constructivista y colaborativo del MEC nos exige que todas las actividades
realizadas por los participantes sean compartidas en los foros.

* El MEC es el modelo de E-learning colaborativo de nuestro Centro.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 7

Tomen nota:
Las actividades son opcionales y pueden realizarse en forma individual, pero siempre es
deseable que se las realice en equipo, con la finalidad de estimular y favorecer el trabajo
colaborativo y el aprendizaje entre pares. Tenga en cuenta que, si bien las actividades
son opcionales, su realización es de vital importancia para el logro de los objetivos de
aprendizaje de esta instancia de formación. Si su tiempo no le permite realizar todas las
actividades, por lo menos realice alguna, es fundamental que lo haga. Si cada uno de los
participantes realiza alguna, el foro, que es una instancia clave en este tipo de cursos,
tendrá una actividad muy enriquecedora.

Asimismo, también tengan en cuenta cuando trabajen en la Web, que en ella hay de todo,
cosas excelentes, muy buenas, buenas, regulares, malas y muy malas. Por eso, es
necesario aplicar filtros críticos para que las investigaciones y búsquedas se encaminen a
la excelencia. Si tienen dudas con alguno de los datos recolectados, no dejen de
consultar al profesor-tutor. También aprovechen en el foro proactivo las opiniones de sus
compañeros de curso y colegas.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 8

1. Beneficios que nos trae aplicar UX:

Nos va mejorar el posicionamiento del sitio, ya que un mal desarrollo de un
sitio, sin tomar en cuenta una maquinación semántica, una correcta
colocación de etiquetas, hace que Google nos penalice afectando el
posicionamiento orgánico del sitio.

El SEO es una consecuencia de un buen proceso de UX y un buen

proceso de programación.

Vamos a lograr que más usuarios puedan finalizar procesos de forma

exitosa, como por ejemplo el envío de información a través de un formulario.

Aplicar UX al uso de formalarios es esencial, y es una sección que muchas

veces suele estar relegada. Los formularios son usados para completar un
proceso de compra, capturar información de nuestros usuarios como puede
ser el mail, un teléfono, su perfil de Facebook o Instagram.

Actualmente los diseñadores poseemos de herramientas, que si se usan

correctamente, pueden construir grandes experiencias a la hora de
completar formularios.

Entonces debemos tener en cuenta algunas reglas:

• Priorizar Escaneabilidad

• Proporcionar un formato sin esfuerzo

• Límite de escritura

• Datos de geolocalización

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 9

Priorizar la escaneabilidad

Jakob Nielsen, nos enseñó que es usuario no lee los sitios sino que los
escasea, lo mismo sucede con los formularios.

Entonces a la hora de diseñar un formulario, debemos tener siempre en

consideración que el usuario pueda realizar un escaseado efectivo, donde
pueda detectar los puntos de interés más importantes a la hora de completar
sus datos.

Más adelante hablaremos sobre los patrones de diseño y los tipo de relación
entre campo y texto.

Con respecto a los placeholders, en general no están vistos con buenos ojos,
ya que al posicionar el cursos el texto desaparece, perdiendo todo tipo de
referencia sobre el tipo de contenido a rellenar. El grupo de Norman Nielsen
ha detectado que a los usuarios los atrae mas los campos vacíos que los
que contienen texto.

Proporcionar un formato sin esfuerzo

El enmascaramiento es una técnica que ayuda a los usuarios a completar

correctamente los campos. Estas mascaras formaban el texto
automáticamente y permite a los usuario poner foco en lo importante.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 10

El uso de los atributos para los inputs en HTML facilita al usuario el

completado de la información, ya que si sabeos que nos input requerirá sólo
números, y utilizamos correctamente el atributo de ese input, las opciones a
la hora de completarlo (via mobile) será sólo para números.

Límite de escritura

El uso de pre-llenado de información es de gran ayuda para nuestros

usuarios. Un ejemplo concreto es cuando uno coloca una dirección y la
misma se va autocompletando. Google nos provee soluciones para poder
implementar esté tipo de funcionalidades.

Otra forma de reducir la digitación es ofrecer una lista de nombres comunes

dentro del campo del correo electrónico.

Datos de geolocalización

Sabemos que estos datos se usan generalmente para el aplicaciones o en el

uso de dispositivos móviles, pero podemos aprovechar este tipo de
funcionalidad para que el usuario no tenga que completar todos los datos.
Podemos detectar la localización de la computadoras y de esta forma lograr
que los campos de código postal, ciudad, país ya esté pre-llenados,
ahorrando tiempo en la experiencia del uso de formularios.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 11

2. Patrones de diseño. Formularios:

Existen 3 tipos de relación (campo y texto)

Cómo vemos en la imagen estas 3 relaciones de campo y texto tiene que ver
con la forma de ubicarse el campo llamado label y el campo input. A
continuación detallaremos cada relación.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 12

Título sobre campos

- Cuando los datos solicitados son habituales

- Menor tiempo de operación

- Más espacio vertical

- Espacio o contraste para barrer los campos

- Flexibilidad para localización y campos complejos

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 13

Títulos marginados a la derecha

- Asociación clara entre título y campo

- Cuando el espacio es una limitación

- Más difícil de barrer los títulos con la vista

- Buen tiempo de operación

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 14

Títulos marginados a la izquierda

- Cuando los datos solicitados no son habituales, o para data entry
avanzado.

- Permite barrer los títulos con la vista.

- Asociación menos clara entre título y campo.

- Menor espacio vertica.l

- Cambio en la extensión de títulos puede afectar el diseño

Formularios: Ruido visual

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 15

Formularios: acciones diferenciadas

Formularios: longitud de campo.

• En lo posible, usar longitud de los campos como affordance

• De lo contrario, considerar tamaño que ofrezca suficiente espacio para

ingresar información.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 16

3. Buscadores:

Muchas veces se desestiman partes importantes en el diseño de layout,

como puede ser un campo de buscador de información de un sitio.

Un elemento mal resuelto, puede generar que el usuario no llegue a

completar su objetivo final.

A fin de poder prevenir este tipo de problemas proponemos alguno temas a

tener en cuenta:

• Símbolo. “una imagen vale más que mil palabras”, por lo que siempre
deberemos acompañar nuestra barra de búsqueda con el icono de una
lupa. Este icono debe ser en su forma más simple.

• Situación. Si sabemos que el usuario utilizará frecuentemente la barra de

búsqueda debemos situarla en la zona más accesible posible. Para
potenciarlo debemos lograr que la barra de búsqueda esté siempre visible
y no solamente cuando se click en el icono.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 17

Botón. Muchas veces olvidamos que el usuario asemeja una acción a un clic
y no al presionar la tecla “enter”, por lo que es recomendable que nuestro
buscador disponga de un botón para iniciar la búsqueda.

• Tamaño. Si diseñamos pensando en la usabilidad de nuestra web,

deberemos diseñar un buscador en el que el usuario pueda escribir 27
caracteres visibles.

• Interpretar. Poder interpretar la búsqueda que nuestros usuarios, logra

una reducción del error de tipeo y también facilitar el acceso a la
información que se está buscando.
Las “scope bar”, o barra con opciones predeterminadas, ofrecen palabras
que ‘adivinan’ lo que el usuario va a buscar.

• Recordar búsquedas. Beneficiamos al usuario en un ahorro significativo

de su tiempo.

Presentación de los resultados.

Cuando uno ofrece los resultados de la búsqueda el objetivo principal es

poder facilitarle a nuestro usuario el contenido que está buscando, es por ello
que es sumamente importante la clasificación de está muestra de resultados.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 18

Bibliografía utilizada y sugerida

KrugS., Nomehagaspensar , EstadosUnidos, PearsonEducation; 2009.

Montero Y. H., Santamaría O. Informe APEI sobre usabilidad,

2009.http://www.uxbooth.com/articles/complete-beginners-guide-to-information-
architecture/

MordeckiD., MiroyEntiendo, Uruguay, Mastergraf; 2012 - :Link:

http://www.mordecki.com/html/miroyentiendo.php

MordeckiD., PensarPrimero, Uruguay, BibliotecaConcreta; 2004 - Link:

http://www.mordecki.com/html/libro.php

NielsenJ., Usabilityengineering, EstadosUnidos, ElsevierScience; 1994.

NormanD., Designofeverydaythings, Edicióndigital, EstadosUnidos, Newprint ; 2002.

http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/

http://www.uxbooth.com/articles/the-new-rules-of-form-design/

http://posicionamientoenbuscadoreswebseo.es/ux-como-disenar-una-barra-de-busqueda-
perfecta/

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
 p. 19

Lo que vimos:
En esta unidad vimos cómo hacer un uso de correcto de los formularios, mejorando las
experiencias de nuestros usuarios a la hora de rellenar información que suele ser muy
engorrosa.

Lo que viene:
En la próxima unidad veremos los principios de prototipo y las características de los tipos
de prototipos.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning