CDIG-tema-3.

pdf

acarre

Construcción y Diseño de Interfaces Gráficas de Usuario

3º Grado en Ingeniería del Software

Escuela Técnica Superior de Ingeniería de Sistemas

Informáticos
Universidad Politécnica de Madrid

Reservados todos los derechos.

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

Diseño para todos los dispositivos

La manera en que el usuario interactúa con el dispositivo y el contenido afecta también a la
manera en la que nosotros tenemos que pensar y diseñar esa interacción y esos
contenidos.

No es sólo diseñar para móviles o para tablets u ordenadores de sobremesa, se trata de

diseñar en conjunto.

Errores en el diseño de interfaces web

Diseño de interfaces → Estudio + Análisis + Toma de decisiones adecuada
UX + usabilidad → Nuevos tipos de estructuras y comportamientos

Uno de los problemas más grandes con el diseño plano en general es que todo es plano.
Para algunos usuarios, esto dificultaba la distinción de los elementos y las interacciones.
Los diseños “casi planos” y “plano 2.0″ emergieron como una solución a este problema,
ayudando a los usuarios a encontrar e interactuar mejor con los elementos UI.

Cuando un usuario llega a tu sitio web, tiene que encontrar todo a la primera. De hecho,
bastaría con el sentido común para navegar y encontrar aquello que se busca.
Sin embargo, en el momento en el que el usuario necesita tirar de su memoria para llegar a
una landing page determinada o, en cambio, no sabe cómo moverse, tendrás un serio
problema de usabilidad web.

Leyes y reglas a seguir para el diseño de la IU

● Ley de la claridad: El usuario evita los elementos confusos de la interfaz.
● Ley de la acción principal: El usuario está más cómodo cuando identifica la acción
principal.
● Ley de contexto: El usuario espera ver los controles de interfaz cerca del objeto
que quiere cambiar.
● Ley del feedback: El usuario se sentirá más seguro si tiene información clara y
constante.
● Ley de lo fácil: El usuario estará por la labor de realizar una acción complicada
siempre y cuando esté dividida en pequeños pasos.
● Ley de estándares: El usuario raramente cambiará las opciones predeterminadas.
● Ley de la acción: El usuario probablemente haga algo si se lo piden.
● Ley de la pirámide invertida: La información más general y básica se sitúe al inicio
de la página y los detalles más abajo. Así el usuario decide con qué profundidad
quiere navegar dentro de la página.
● Regla del tercer clic: El usuario debería acceder a la información que necesita en
dos clics (o deslizamientos de dedo en el caso de pantallas táctiles) o tres como
máximo. Si debe hacer más clics, lo más probable es que abandone la página o
aplicación.

Principios básicos en el diseño de la IU

Consistencia→
El diseño de los elementos debe ser consistente, tratando siempre de utilizar los mismos
patrones de diseño y las mismas secuencias de acciones para situaciones similares.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

Ejemplo diseños inconsistentes:

● El menú no puede funcionar de manera diferente en distintas partes de la web, ni
cambiarlo de ubicación porque quede mejor en la otra página.
● No se puede usar distintos diseños para el mismo elemento en distintos apartados
(forma, color…), ni usar terminología variable.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Consistencia Visual
- Diseñar una buena jerarquía visual, teniendo en cuenta que los elementos más
importantes tienen que ser más llamativos que el resto.
- Elegir un grid y respetarlo en todas las páginas de la web.
- Respetar los márgenes y paddings de los distintos elementos (botones, títulos…)
- Todos los botones de CTA (“Call to Action”) serán del mismo tamaño y color.
- Los enlaces dentro del texto deberán tener un formato diferenciado.
- El título principal de cada página tendrá el mismo peso tipográfico y tamaño.

Consistencia en la “voz” y tono

Todo el sitio web debe hablar con una única voz y un mismo tono:
- Cuidar los textos que se puedan leer, sin olvidar el microcopy (los textos de los
botones, los mensajes de error de formularios… es decir, todos los elementos
interactivos).

Simplicidad
En el diseño se debe buscar una interfaz limpia, fácil de usar, amigable e intuitiva.
Una interfaz compleja puede llevar a una desorientación del usuario, provocando confusión
y falta de iniciativa para interactuar con el sitio, llegando incluso a provocar el abandono por
parte del visitante.

→ ¿Cómo podemos aplicar la simplicidad?

a. Definir bien las acciones principales que el usuario debe llevar a cabo:
acciones primarias y secundarias.
b. Eliminación de elementos innecesarios: Aislar un solo problema y tratar de
resolverlo eliminando propiedades y funciones innecesarias.
c. Disminuir el ruido visual hará que una interfaz parezca más fácil y sencilla de
usar.
i. El espacio en blanco, es la separación entre los elementos que
componen la interfaz. Una interfaz bien delimitada y con los espacios
necesarios logrará una fácil comprensión por parte del usuario.

ii. El contraste se debe usar lo menos posible, ya que es mejor

utilizar la menor variación visual para comunicar una idea de manera
efectiva. Esto significa enfatizar únicamente lo que es importante.

d. Reutilizar elementos: Hay situaciones que se pueden resolver de manera

similar por lo que es recomendable reutilizar elementos. Ventajas:
i. Menor tiempo de desarrollo.

Las descargas sin publicidad se realizan con las coins

Construcción y Diseño de Int...
Banco de apuntes de la
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

Color
Sugerencias fáciles de seguir:
a. Usar colores para agrupar informaciones relacionadas.
b. Utilizar colores diferentes para conceptos diferentes.
c. Evitar cambiar el significado de los colores en diferentes pantallas.
d. No utilizar varios matices del mismo color, sobre todo para los azules.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
e. Define colores que no sean distractivos, pero que a la vez resalten.
Los elementos no importantes no deben tener colores que resalten.
f. Minimiza el número de colores: 2 colores o la Regla del 60 30 10:
- Escoger un color dominante y usarlo en el 60% del espacio, otro secundario
para que esté en un 30% y un último color para el 10% restante.

Sugerencias fáciles de seguir:

a. Utiliza colores brillantes para indicar peligro o para llamar la atención del usuario
Se pueden utilizar códigos de color en los mensajes
- Rojo = alertar al usuario de un error
- Amarillo = mensaje de advertencia
- Verde/Azul = progreso positivo
b. Diseña el interfaz primero en blanco y negro

● Diseñar en escala de grises antes de añadir color simplifica los elementos más
complejos del diseño visual y te fuerza a concentrarte en espaciar y colocar los
elementos.
● Añade color al final, e incluso entonces, sólo cuando tenga un propósito.
● Esta es una forma eficaz y sencilla de mantener la apariencia de las aplicaciones
«limpia» y «sencilla». Tener demasiados colores en demasiados lugares es una
forma verdaderamente fácil de fastidiar lo limpio/sencillo. El blanco y negro primero
te fuerza a centrarte en cosas como el espaciado, los tamaños y la composición
primero.

Sugerencias fáciles de seguir:

a. Sombras: Las sombras nunca son negras, ni la luz nunca es blanca
b. Jugar con las intensidades.
c. Los colores han de transmitir adecuadamente la imagen de marca y la de la
empresa que hay detrás.
d. Webs gratuitas para crear paletas de colores: (para la práctica)
- Coolors
- Colormind
- Paletton
- Adobe Color
- Color Hunt
Feedback
Los usuarios deben saber en dónde están y qué es lo que está pasando todo el tiempo.
Cada acción del usuario debe provocar una acción de respuesta (feedback) en el sistema
que informe al usuario de lo que está ocurriendo.

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

Tipos de feedback:
- Visual
- Sonoro
- Táctil

→ ¿Cómo mostrar feedback al usuario?

- Visibilidad del estado del sistema: El sistema debe siempre mantener informado al
usuario de lo que está ocurriendo.
- Mostrar comentarios informativos.
- Diseñar textos de diálogo para cerrar procesos: Mostrar al usuario cuál ha sido el
resultado de sus acciones o actos.
- Visualizar en qué estado se encuentra una acción: Ayudar al usuario mostrándole la
situación en la que se encuentra un elemento.

Aparte de enseñarle una información importante, también ayuda a que comprenda si

sus acciones se han llevado a cabo con éxito, así como saber si debe tomar una
decisión como consecuencia del estado de la acción.

En cualquier interfaz de usuario es muy frecuente encontrar elementos que pueden

tener diferentes estados. Por ejemplo, los correos electrónicos pueden tener los
estados de leído o no leído, las facturas pueden estar pagadas o no, etc.

- Ofrecer formas de retroceder o revertir sus acciones.

- Indicar el número de ítems en una categoría.
- Resaltar el elemento sobre el que el usuario pasa su cursor.
- Mantener a los usuarios interesados durante los períodos de espera.

Anticipación
El diseño anticipatorio supone que el sistema conoce y personaliza la experiencia de uso
del usuario, cambiando la interfaz al instante, eliminando cualquier información extraña y
presentando las opciones más relevantes de manera oportuna, sencilla y eficiente.

- Tratar de recomendar en lugar de mostrar una elección igualitaria.

- Da opciones por defecto basadas en las elecciones más frecuentes.
- Indica las opciones usadas más frecuentemente.
- Indica la opción más escogida por los usuarios.
- Ofrece una lista con los términos más buscados.

Pautas del diseño de Interfaces de Usuario

Control del usuario

Los usuarios se sentirán más cómodos en la aplicación si se les otorga libertades y control
en su uso.

Es muy probable que los usuarios elijan opciones que posteriormente quieran cambiar, y
permitir deshacer/rehacer acciones o cancelar ciertas elecciones es una manera de darles
el control.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

Tiene que poder navegar libremente, encontrar con facilidad salidas, y rutas alternativas.

Para ello se puede hacer, entre otras cosas:

- Evitar tener elementos que salten en pantalla sin aviso, que se muevan o suenen sin
la opción de ser suprimidos por el usuario.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
- Añadir los estados y/o pasos que conlleva el proceso que están llevando a cabo.
- Proporcionar mensajes que le permita saber si el proceso de la interacción se ha
realizado.
- Permitir deshacer o repetir una acción.

Manejo de errores
El diseño debe prevenir que el usuario cometa errores y si estos ocurrieran ofrecer vías de
solución simples y detalladas de cada paso que debe realizarse para resolverlo lo más
pronto posible.

Formas de prevenir errores: Limitar las posibilidades: Delimitar las posibles formas en las
que el usuario puede introducir un dato o llevar a cabo una acción
● Orientar al usuario: Ofrecer ayuda contextual, mediante breves explicaciones,
valores por defecto, formato de entradas admisibles, entradas de datos
preformateadas ( “/”, “@”, “-” o cualquier otro símbolo), mecanismos de corrección
automática en la introducción de los datos.
● Solución automática de errores: Existe una gran cantidad de posibles errores que
es posible detectar y solucionar de forma automática. Siempre resultará más
recomendable advertir al usuario de los mismos y obligarle a rectificarlos.
● Proteger el trabajo del usuario: Siempre que sea técnicamente posible es
recomendable guardar automáticamente los datos o información introducida por el
usuario para evitar que, si se produce un fallo técnico, se pierda.

Formas de gestionar errores: Permitir deshacer en cualquier momento los cambios

realizados.

¿Mejor deshacer o pedir confirmación?

- La acción ‘Deshacer’ respeta la intención humana inicial y permite que la acción
pase sin problemas, dando la oportunidad de volver al estado inicial.
- Advertir y solicitar confirmación: Cuando el usuario realice una acción que pueda
tener consecuencias irreversibles, se le debe advertir y solicitar confirmación.

Mensajes de error comprensibles

Cuando no sea posible evitar un error (humano o del sistema), se debe informar al usuario
en un lenguaje claro y comprensible y ofrecer una solución al problema si es posible.

¿Cómo diseñar la página web de error 404?

a. Explicar por qué el usuario está viendo la página 404
b. Listado de artículos más destacados: animar al usuario seguir navegando por la
página web y que descubra el resto del contenido de valor (si es que lo hay).

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

c. Listado de secciones destacadas: si el usuario llegó a la página de error 404 es

porque algo estaba buscando relacionado con nuestra web. Facilitemos que lo
encuentre y que siga el proceso (ej. compra, consulta, etc.)
d. Formulario de búsqueda: al encontrar lo que buscaban seguirán navegando en el
sitio.
e. Formulario de contacto: nos dará la posibilidad de evitar perder más usuarios en el

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
futuro al corregir el error 404 y mejor aún, te pondrá en contacto con un cliente
potencial

Diseño
Consejos para un buen diseño
- Organizar los elementos de manera adecuada: Una interfaz bien organizada permite
al usuario aprender más rápido y de manera sencilla.

- Se debe mantener una visión global alejada para evitar funcionalidades duplicadas
etiquetadas de formas diferentes. Una buena opción es la de refactorizar la interfaz
de usuario de vez en cuando para fusionar funciones secundarias similares entre sí.

- No esconder opciones, ¡mostrarlas! Cuando se utiliza un menú desplegable

(dropdown), se esconden un conjunto de acciones que, para descubrirlas, requieren
de un pequeño esfuerzo (un clic). Si las opciones entre las que haces elegir al
usuario son pocas.

- CTA siempre visible sin importar la parte de la página se encuentre el usuario.

✔ Deben seguir un patrón de estilo, siempre llamativos, pero mismos colores
y tamaños.
✔ Se puede combinar y añadir otros estilos si son CTAs primarios o
secundarios y jugar con las jerarquías, pero siempre con la misma estética,
respetar la estética.

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

✔ Deberá haber un CTA por pantalla, si hay que hacer scroll y el CTA
desaparece, poner otro para que no tengan que volver arriba.

- Presta atención a los elementos que requieren una acción

- Muestra siempre los filtros que se han utilizado en la búsqueda.

- Cuadrículas y tarjetas: Disponer la información en forma de cuadrículas o tarjetas,

sustituyendo divisiones por líneas separadoras, y suprimiendo las antiguas tablas.

- No saturar el espacio pero ser adecuadamente minimalista:

✔ Limpiar la interfaz, reducirla a lo esencial o a lo que, en verdad, le interesa
o le puede servir al usuario.
✔ Definir la importancia de los elementos en niveles.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

- Hacer más accesible y humaniza el medio de contacto:

✔ Proporcionar información de contacto desde la portada o un CTA bien
diseñado que lleve a la sección completa para contactar.

Diseño- Texto

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Textos claros y que sean fáciles de leer: No confundir al lector con muchos tecnicismos y
palabras redundantes.
Legibilidad: Utilizar textos de alto contraste y letras de un tamaño que puedan ser leídas
cómodamente en los monitores más comunes.

Haz que el texto destaque y se oculte

● Estilos que incrementan la visibilidad del texto: Grande, negrita, mayúsculas, etc.
(pop aumentado)
● Estilos que disminuyen la visibilidad del texto: Pequeño, con menos contraste,
menos margen, etc. (pop reducido)
● Los títulos de la página son los únicos elementos que siempre hay que aumentar el
pop.
● Si el elemento de un sitio necesita énfasis, aplica ambos estilos de aumento y
reducción del pop. Esto permitirá que los diferentes elementos tengan el peso visual
que deben tener.
● Dar efectos al hover. Al cambiar el tamaño de la fuente, modificará el espacio
ocupado por el área de texto, lo que puede llevar a ocultar dichos efectos.

Separar los textos: Se debe pensar en los usuarios móviles, que son la gran mayoría, por lo
que hay que poner iconos y hacerlo atractivo con listados.

Tipografía: Se debe usar una única fuente del mismo estilo, combinando tamaños y
opacidades.

Texto en los enlaces:

● No subrayar ningún texto que no sea un enlace
● Diferenciar los colores de los enlaces visitados y no visitados
● Hacer accesibles los enlaces escribiendo HTML semántico
● Escribir mensajes específicos para los enlaces (nada de “haz clic aquí”)
● Las frases de los enlaces que sean cortas (de 3 a 5 palabras)
● Mantener la consistencia de los enlaces a lo largo de todo el sitio
● No pongas más de 100 enlaces en una página

Diseño- Botones
Tipos de botones
● Botón con relieve: Rectangular que simula elevación añadiendo sombreado (indica
que es posible hacer clic). Se utilizan para dar más importancia a la acción que
ejecuta el botón.
- Comportamiento: Incrementan el efecto relieve y cambian de color al ser
presionados.

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

● Botón plano: Carecen de relieve, pero cambian de color al presionarlos. Minimizan

la distracción del contenido. Se utilizan en diálogos y en barras de herramientas.
- Comportamiento: Cambian de color al ser presionados.

● Botón fantasma: Son transparentes o vacíos y tienen una forma básica.

Generalmente están bordeados por una línea fina, mientras que la etiqueta consiste

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
en texto plano. Se utilizan en contenido secundario, para evitar competencia con el
CTA principal. Lo ideal es que el usuario vea el CTA principal y luego (si no es
relevante) lo omita en el botón secundario.
- Comportamiento: Se rellenan de color al ser presionados.

Los botones deben tener suficiente contraste para resaltar lo que interese
- Para crear un botón de acción, hay que distinguirlo en relación a los elementos que
lo rodean, potenciándolo así respecto al resto de elementos.
- Utilizar Botones Redondeados o con Alguna Forma.
- Usar color, tamaño, espacio en blanco y tipografía para asegurar que los
botones tengan el peso visual que necesitan para sobresalir del resto de la
interfaz.
- Si existen varios elementos adicionales con esquinas redondeadas en su diseño,
considere utilizar botones con una terminación circular o tal vez algún otro cambio en
la forma. Esto podría darle un poco más de contraste que asegure que sus
llamados a acción importantes tengan la prominencia que necesiten tener.

Si la acción primaria es positiva (‘Enviar’ o ‘Guardar’) →mayor peso visual.

Deben parecer “clickeables”. Agregar un borde que se asemeje a un botón físico, o que al
pasar el raton (hover) cambie de tono.
- Desaturar el botón secundario para que no llame la atención.
- O darle el estilo de link a la acción secundaria o negativa para que no tenga mucho
peso visual.

Si la acción primaria es Negativa (‘Reemplazar’ o ‘Borrar’ )

Dar al botón que genera acciones irreversibles un mayor peso visual es peligroso. El
usuario puede percibir como segura y accionar por error.

Acciones secundarias como botones desactivados.

- Botones Inactivo (o Deshabilitado) son útiles para mostrar al usuario que esa acción
no es posible. Incluso si el botón no está en contexto, el usuario tiene la posibilidad
de conocer las opciones disponibles.
- “Salida rápida”: Las opciones para Deshacer son un gran avance en usabilidad
porque los usuarios generalmente prefieren usar el botón Volver cuando intentan
escapar de un estado indeseado.

Ubicación y orden de los botones

Colocar los botones donde los usuarios puedan encontrarlos fácilmente o esperen verlos. El
orden de los botones, especialmente si hay pares correspondientes (como "anterior" y
"siguiente") es importante y siempre se debe asegurar que el diseño ponga énfasis en la
acción principal o más importante.

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

Innovar en el texto de los botones:

- Dejar de lado los botones de: Saber más, leer más, etc.
- Poner otras opciones menos vistas como: ¡Me interesa!, Sigue contándome, Sí
quiero…
- Una buena caja de diálogo no es solo aquella que pregunta qué acción se quiere
llevar a cabo, sino la que también deja cada opción lo más clara posible.
- Es mejor nombrar un botón explicando qué hace que darle una label genérico (como
“OK”).
- Usa un VERBO cada vez que sea posible en lugar de un ‘SI’ u ‘OK’ para dar un
mejor sentido a los botones con respecto a su contexto, como por ejemplo, el texto
explicativo o el título.

Diseño- Formularios
● Formularios Complicados
Los formularios deben ser lo más simple posible. Preguntarse si cada campo es
realmente necesario, sobre todo en un primer contacto. El objetivo de introducir
menos campos es conseguir una mejor UX.
● Reduce los formularios
Si hay 10 pasos en un formulario y se reduce a 4, tardarán menos en hacerlo, y por
lo tanto, se conseguirá que el usuario complete la tarea.
● Formularios ordenados y sencillos
- El formulario es la toma de contacto del usuario, de modo que debe ser claro
y sencillo de rellenar, utilizando preguntas directas.
- La estructura "label + field" es ideal, ya que permite obtener un formulario
limpio y sencillo de entender para el usuario.
- Las labels deben ser expresiones cortas y descriptivas (una palabra, o dos)
- Agrupar la información relacionada, ayuda al usuario a darle un sentido a
toda la información que debe rellenar.

10

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

● Cuidado con las confirmaciones a lo largo del proceso: ¿Estás seguro?

¿Confirmar el envío? ¿Seguro de continuar?
El usuario ya sabe lo que está haciendo cuando rellena un formulario, no se debe
insistir durante el proceso o se irá sin enviarlo.
● Parámetros universales: Incluir, si es posible, por defecto parámetros universales
en los formularios.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
● Campos obligatorios: Indicar claramente si los elementos de un formulario son
opcionales u obligatorios.
● Una columna vs. múltiples columnas: Los formularios nunca deberían consistir en
más de una columna.
● Autofocus para campos de Texto: Se debe proveer una clara ‘notificación’ de que
el foco se mueve por el formulario (resaltar una caja, mostrar una flecha…)

Formato de etiquetas (labels)

El propósito principal del label es ser entendido, cuando una sola palabra no es suficiente
una frase puede servir para eliminar la ambigüedad. Emplear dos puntos después del label
es actualmente una cuestión de estilo.

Texto de ayuda
La tendencia natural de los usuarios es omitir las instrucciones y empezar a cubrir el
formulario cuanto antes. Lo mejor es limitarlas a ayudas en los labels cuando resulten
imprescindibles.

Ayuda automática. Se descubre a medida que los usuarios clican en el ítem. Tiene el
inconveniente de que los usuarios no conocen que existe ayuda disponible hasta que clican
en el ítem.

Ayuda visible activada por el usuario. Otra forma de mostrar la ayuda es a través de un
icono visible, en ese caso el usuario debe clicar en el icono para poder leer la ayuda que
suele aparecer en forma de tooltip.
La desventaja de este método es que fuerza al usuario a clickear en el icono para poder
conocer la ayuda

Placeholder
- El atributo placeholder de HTML5 permite introducir un valor en los inputs cuando
estos están vacíos y sin foco. Este tipo de valor actúa como una sugerencia para los
usuarios. Puede emplearse como una pista del contenido pero no es un sustituto de
los labels.
- Actúa en cierta medida de forma opuesta al texto de ayuda automática dado que a
medida que se introduce texto, este va desapareciendo
- El problema está cuando aparece este atributo y se emplea como substitución del
label.
- Es un error y se contempla en la descripción del atributo.
- El único contenido por tanto que debe aparecer aquí es relativo al formato adecuado
para introducir la respuesta, cualquier otro tipo de ayuda debería mostrarse fuera.

11

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

En varias columnas
Los formularios en varias columnas deben evitarse. Tienen el problema de que resultan
confusos. Con una sola columna solo existe un orden posible que es descendente.

Asterisco
- Si existen campos que son requeridos y se va a realizar una validación sobre los

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
mismos, es necesario avisar al usuario.
- Si bien parece más útil indicarlo con un texto («necesario») existe la convención de
apuntarlo con un asterisco (*) en un color diferente al resto del texto y habitualmente
en rojo, de forma complementaria al asterisco se emplea una leyenda («Los campos
marcados con asterisco son obligatorios»

Ancho de campo
- Los inputs deben ofrecer el espacio suficiente para poder introducir cómodamente
los datos.
- Se recomiendan como mínimo 20 caracteres sin acortarlo visualmente.
- Claro que depende del contexto: los códigos postales obviamente necesitan menos
espacio que una dirección además se aprovecha su ancho para dar una pista a los
usuarios sobre el formato de la información requerida.
- Siempre que sea posible se uniformiza el ancho ofreciéndo de forma consistente y
evitando el ruido visual.

Checkboxes
- Los checkboxes permiten a los usuarios elegir entre varias opciones disponibles o
una sola que puede tener estado activo o inactivo.
- Tanto en checkboxes como en radio buttons es recomendable que tanto el input
como el label sean clicables ahora bien se emplean para selecciones diferentes
- Sólo cuando el usuario puede seleccionar las que quiera entre varias opciones
disponibles y cuando son mutuamente excluyentes entonces se emplea un radio
button.
- También se emplean los checkboxes cuando existe una única acción que activar o
desactivar.

Radio buttons: cantidad y alineación

- Deben emplearse con opciones reducidas y resultan más fáciles de usar si se
alinean verticalmente.
- Dado que los usuarios no suelen leer las preguntas, el etiquetado de los radiobutons
debe ser suficientemente descriptivo.
- Según las guidelines del KDE los radiobutons deben emplearse cuando existan dos
o 3 opciones mutuamente excluyentes, para más opciones debe emplearse un
combobox.

Combo box vs listas

- Son uno de los elementos más empleados en formularios cuando queremos mostrar
múltiples opciones, realmente son una variante de las listas en las que sólo aparece
visible un elemento.

12

Las descargas sin publicidad se realizan con las coins

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

- Deben emplearse cuando el número de opciones sobrepasa las recomendadas para

los radiobuttons (3). En el caso de tener más de 10 es recomendable emplear una
lista.
- La gran diferencia con los radios es que las opciones están ocultas, deben ser por
tanto más sencillas y más previsibles.
- Cuando no ofrece un valor por defecto es útil tener un buen descriptor por ejemplo:
“seleccione su país”. Y debe poseer también un label relacionado por ejemplo: “país”

Acciones primarias y secundarias

● Las acciones asociadas a los formularios y ofrecidas en forma de botones pueden
clasificarse en dos tipos: primarias y secundarias.
a. Las acciones primarias: enviar, guardar y continuar son necesarias para
poder completar el formulario.
b. Las acciones secundarias: cancelar, resetear y volver. Este tipo de acciones
no resultan imprescindibles para el objetivo principal.

● La recomendación es prescindir de ellas. Por los siguientes motivos:

- Pueden tener consecuencias negativas al clicar en ellas de forma
inesperada.
- Generan ruido en la interfaz.
- Son una opción adicional requiere procesamiento extra.

● No obstante hay situaciones en las que pueden resultar útiles:

- En los formularios paginados cuando se emplean para navegar entre las
páginas
- Cuando el mismo usuario realiza acciones repetidas sobre la misma página
- Cuando el formulario requiere introducir datos de forma repetida en usos que
varían entre ellos
- En ventanas modales

● En el caso de que se tengan que emplear la mejor opción para reducir el riesgo de
potenciales errores es limitar su impacto visual destacándose menos que la acción
principal.
● Una garantía extra le dará además la posibilidad de deshacer la acción.

Posición del botón

- La combinación que mejor funcionaba a la hora de situar los botones de enviar y
cancelar era alineándose a la izquierda con los input fields y los labels sobre ellos.
- La recomendación de Nielsen es si se desarrolla para una plataforma concreta
seguir sus guidelines.

Diseño- Navegación
Navegación sencilla
- Si al entrar el usuario es incapaz de encontrar las distintas secciones por la que
puede navegar, probablemente decidirá abandonar la aplicación.
- Se debe presentar un menú de navegación accesible y bien estructurado, intentado
mantener un menú estático en la misma posición a través de las páginas.

13

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9957947

Construcción y Diseño de Interfaces de usuario

- Procurar que parezca que el usuario está siempre en el mismo sitio, cambiándole el
contenido a medida que avanza, dándole una sensación de seguridad y control.

Descartar los mega menús en la mayoría de casos

Se debe reducir la navegación al máximo y ofrecer lo imprescindible de forma clara y
natural. Evitar, siempre que sea posible, los menús con muchas opciones.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Destacar la búsqueda
Colocarla en un lugar predominante del menú de navegación. Es importante que los
resultados de búsqueda sean de calidad y relevantes. Poner un cuadro de búsqueda y no
solo un icono de una lupa.

● Limitar el número de opciones de navegación: lo mejor es ofrecer pocas

opciones pero descriptivas, además de añadir enlaces a las páginas más visitadas o
relevantes.
● Ordenar los elementos de navegación: una serie de elementos puestos uno
detrás de otro se tiende a recordar el primer elemento y el último que se ha visto.
● Usar una navegación fija para páginas con scroll: colocarlo en una barra fija y
que el contenido se vaya desplazando.
● Usar etiquetas descriptivas: usar etiquetas descriptivas y que los usuarios las
entiendan.
● Destacar la sección actual dentro del menú de navegación.
● En móviles, usar menús del tamaño de la pantalla.
● Colocar el enlace sobre todo el contenedor del menú, no sólo sobre el texto.

Navegar según dispositivo

● Para interfaces de Escritorio:
- No usar navegación escondida.
- Mostrar las opciones usuales de navegación en la parte superior de la página
o en la parte izquierda.
● Para interfaces en dispositivos móviles:
- Si el sitio tiene 4 o menos enlaces de primer nivel, deben mostrarse todos
visiblemente.
- Si tiene más de 4, se puede hacer un menú parcialmente visible:
navegación Priority+.
- Si una sección tiene mucho contenido, se podría implementar una línea de
pestañas, de forma que lo filtre y facilite la lectura.

Diseño- Atajos
Los atajos, son mecanismos que provee el sistema, para reducir el número de pasos
necesarios para realizar ciertas acciones y acelerar el acceso a determinadas funciones al
usuario.

14

Las descargas sin publicidad se realizan con las coins