Diseño de interfaz de usuario

El diseño de interfaz de usuario (UI, por sus siglas en inglés) se refiere al proceso
de diseñar interfaces en software o dispositivos electrónicos, con el objetivo de facilitar la
interacción entre el usuario y el dispositivo. En otras palabras, la interfaz de usuario se
refiere a la parte del software o sistema que permite a los usuarios interactuar con él. El
diseño de interfaz de usuario se centra en maximizar la usabilidad y la experiencia del
usuario al interactuar con el sistema, lo que implica la creación de diseños visuales y
funcionales que sean intuitivos, fáciles de usar y estéticamente agradables.
El diseño de interfaz de usuario implica la consideración de varios aspectos, como
el diseño visual, la disposición de los elementos, la navegación, la interactividad y la
retroalimentación del usuario. Los diseñadores de interfaces de usuario deben tener en
cuenta factores como la accesibilidad, la experiencia del usuario, las preferencias del
usuario y los requisitos del sistema al crear interfaces que sean efectivas y satisfactorias
para el usuario final.
Algunas de las herramientas comunes utilizadas en el diseño de interfaz de
usuario incluyen software de diseño gráfico, herramientas de prototipado, software de
diseño de interacción y herramientas de desarrollo web. El diseño de interfaz de usuario
es una parte integral del desarrollo de software y aplicaciones, ya que una buena interfaz
de usuario puede marcar la diferencia en términos de la adopción y el éxito del producto.
La definición de diseño de interfaz de usuario puede variar ligeramente según el
autor o experto que la presente. Aquí hay algunas definiciones de destacados
profesionales en el campo del diseño de interfaz de usuario:

 Jakob Nielsen, un experto en usabilidad y diseño de interfaz de usuario, define el

diseño de interfaz de usuario como "un proceso para producir interfaces fáciles de
usar y que brinden una experiencia de usuario agradable".
 Don Norman, un experto en diseño de productos, ha acuñado el término "diseño
centrado en el ser humano" y define la interfaz de usuario como "una conexión entre
el usuario y el producto que permite la interacción y la comprensión".
 Alan Cooper, pionero en el campo de la experiencia de usuario, define el diseño de
interfaz de usuario como "el proceso de diseñar cualquier cosa que tenga una
interfaz para permitir la interacción del usuario".

Principios de interfaz

 Visibilidad: Todos los controles y elementos de la interfaz deben ser visibles.

 Feedback: El sistema debe informar al usuario sobre lo que está sucediendo.
 Restricciones: Limitaciones físicas y lógicas deben guiar el comportamiento del
usuario.
 Consistencia: Los estándares y convenciones deben ser seguidos.
  Mapeo: Relación entre controles y sus efectos.
 Modelos mentales: La interfaz debe reflejar el modelo mental del usuario.
 Aprendizaje: La interfaz debe ser fácil de aprender.

2. Jakob Nielsen:

 Visibilidad del estado del sistema: El sistema debe mantener informado al usuario
sobre qué está ocurriendo.
 Coincidencia entre el sistema y el mundo real: El lenguaje y la terminología deben
reflejar el mundo real.
 Control y libertad del usuario: Los usuarios deben sentir que están al mando y
pueden deshacer acciones no deseadas.
 Consistencia y estándares: Los elementos de la interfaz deben comportarse de
manera consistente.
 Prevención de errores: El diseño debe ser capaz de prevenir errores.
 Reconocimiento en lugar de recuerdo: La interfaz debe minimizar la carga de la
memoria del usuario.
 Flexibilidad y eficiencia de uso: Los usuarios expertos deben poder acelerar su
interacción.
 Estética y diseño minimalista: La interfaz no debe contener información irrelevante.

(visibilidad y accesibilidad)
Principios de usabilidad:
Según Jakob Nielsen y Rolf Molich:

 Visibilidad del estado del sistema.

 Coincidencia entre el sistema y el mundo real.
 Control y libertad del usuario.
 Consistencia y estándares.
 Prevención de errores.
 Reconocimiento en lugar de recuerdo.
 Flexibilidad y eficiencia de uso.
 Estética y diseño minimalista.

Según Don Norman:

 Visibilidad.
  Retroalimentación.
 Restricciones.
 Modelos mentales.
 Consistencia.
 Aprendizaje.

Principios de accesibilidad:
Según la W3C (World Wide Web Consortium) que es una comunidad internacional que se
dedica a desarrollar estándares para la World Wide Web (WWW). Fue fundado por Tim
Berners-Lee en 1994 y su misión principal es liderar la web hacia su máximo potencial
asegurando su crecimiento a largo plazo:

 Perceptible: Información y componentes de la interfaz de usuario deben ser

presentados a los usuarios de maneras que puedan percibir.
 Operable: Componentes de la interfaz de usuario y la navegación deben ser
operables.
 Comprensible: La información y el funcionamiento de la interfaz de usuario deben
ser comprensibles.
 Robusto: El contenido debe ser robusto en la forma en que se interpreta por
diferentes tecnologías, incluidas las asistivas.

WebAIM (Web Accessibility in Mind):

 Alternativas textuales.
 Contenido adaptable.
 Controles de teclado.
 Tiempo suficiente.
 Evitar contenido que parpadea.
 Navegación clara.
 Lectura y legibilidad.

Estos principios sirven como guía para diseñar interfaces que sean fáciles de usar y
accesibles para una amplia gama de usuarios, incluidos aquellos con diversas habilidades
y capacidades.
Aspectos de diseño de interfaz
- Alan Cooper:

 Simplicidad: La interfaz debe ser simple y clara para los usuarios.

  Visibilidad: Los controles y la información importantes deben ser visibles.
 Feedback: El sistema debe proporcionar retroalimentación clara sobre las acciones
del usuario.
 Metáforas: Las metáforas deben reflejar el mundo real para facilitar la comprensión.

- Ben Shneiderman:

 Simplicidad: La interfaz debe ser simple, haciendo que las tareas sean fáciles y
directas.
 Visibilidad: Todos los elementos de control deben ser visibles.
 Feedback: El sistema debe informar al usuario sobre el resultado de sus acciones.
 Restricciones: Deben aplicarse restricciones para evitar errores y permitir una fácil
recuperación.

- Jakob Nielsen:

 Visibilidad del estado del sistema: La interfaz debe mantener informado al usuario
sobre qué está ocurriendo.
 Coincidencia entre el sistema y el mundo real: El lenguaje y la terminología deben
reflejar el mundo real.
 Control y libertad del usuario: Los usuarios deben sentir que están al mando y
pueden deshacer acciones no deseadas.
 Consistencia y estándares: Los elementos de la interfaz deben comportarse de
manera consistente.

Estos aspectos del diseño de la interfaz de usuario se centran en la simplicidad, la

visibilidad, el feedback y la consistencia, elementos clave para una buena experiencia del
usuario y una interfaz efectiva.
Modos de uso y navegación
Modo directo: Los usuarios interactúan directamente con los objetos en la pantalla,
permitiendo una experiencia táctil y manipulativa.
Modo de menú: Los usuarios navegan a través de una serie de opciones presentadas en
forma de menú para realizar acciones específicas.
Modo de comandos: Los usuarios ingresan comandos específicos mediante teclado u
otros dispositivos de entrada para controlar el sistema.
Modo de formularios: Los usuarios llenan campos específicos con información relevante
para realizar acciones o completar tareas.
Navegación lineal: Los usuarios siguen una secuencia de pasos o páginas de forma
lineal para acceder a la información o completar tareas.
Navegación por pestañas: Los usuarios pueden cambiar entre diferentes secciones de
información o funciones a través de pestañas visuales.
Navegación por árbol: Los usuarios exploran la información en una estructura jerárquica,
desplegando ramas y subramas según sea necesario.
Navegación por hipervínculos: Los usuarios hacen clic en enlaces o botones
interactivos que los llevan de una página a otra o a contenido relacionado.
Según Bruce Tognazzini:
Modos de uso:
Direct Manipulation: Los usuarios interactúan directamente con los objetos en la pantalla.
WYSIWYG (What You See Is What You Get): Lo que se ve en la pantalla es lo que se
obtiene en la salida impresa.
Incremental Construction: Los usuarios construyen objetos de manera incremental.
Navegación:
Breadcrumb Navigation: Los usuarios pueden ver dónde están en relación con la
estructura del sitio.
Progressive Disclosure: Mostrar solo la información necesaria en un momento dado.
Según Jef Raskin:
Modos de uso:
Intuitivo: Las acciones y resultados son predecibles para el usuario.
Conveniente: El sistema se adapta a las necesidades del usuario.
Eficiente: El sistema permite a los usuarios realizar tareas de manera eficiente.
Navegación:
Zooming User Interface (ZUI): La capacidad de cambiar la escala de la información en la
pantalla.
Spatial Hypertext: La capacidad de organizar la información de manera espacial.
Según Sherry Turkle:
Modos de uso:
Personalizado: Los usuarios pueden personalizar su experiencia en función de sus
preferencias.
Social: Los usuarios pueden interactuar con otros a través de la interfaz.
Navegación:
Networked Navigation: Navegar a través de redes de información interconectadas.
Virtual Navigation: Navegar a través de espacios virtuales.
Diseño visual
El uso de tipografía, símbolos, color y otros gráficos estáticos y dinámicos son
comúnmente usados para expresar hechos, conceptos y emociones. Esto compone un
diseño gráfico sistemático orientado a la información que ayuda a la gente a comprender
información compleja.
La comunicación visual efectiva para este sistema se basa en algunos principios básicos
de diseño gráfico. Existen tres factores que pueden considerarse para el diseño de una
interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de
aceptación. Los factores de desarrollo ayudan a mejorar la comunicación visual. Esto
incluye toolkits y librerías de componentes, soportes para un rápido prototipado, y
adaptabilidad.
Color:
Las discusiones sobre el color suelen ser confusas porque científicos, artistas,
diseñadores, programadores y profesionales del marketing describen el color de
diferentes formas. Algunas de estas formas difieren del rojo, verde y azul que basan el
sistema de color “RGB”, familiar para los usuarios de periféricos con tubos de rayos
catódicos (CRTs).
Los siguientes términos aclaran conceptos sobre esta manera de entender el color:
• Matiz (Hue) es la composición espectral de longitud de onda que produce
percepciones de ser azul, naranja, verde, etc.
• Valor (Value) es la cantidad relativa de claridad u oscuridad del color en un rango
desde el negro al blanco (también llamado intensidad).
• Saturación (Chroma) es la pureza del color en una escala desde el gris a la variante
más viva del color percibido.
• Brillo (Brightness) es la cantidad de energía luminosa al crear el color.
El color es uno de los más complejos elementos a la hora de intentar diseñar una interfaz
gráfica correcta. Puede ser una potente herramienta de comunicación usada
correctamente. Los colores pueden ser combinados para tomar un sentido visual.

Ventajas en el uso del color para facilitar la comunicación:

• enfatizar la información importante.
• identificar subsistemas de estructuras.
• portar objetos naturales de un modo realista.
• portar tiempo y progreso.
• reducir los errores de interpretación.
• añadir dimensiones a la codificación.
• incrementar la comprensibilidad.
• incrementar la credibilidad y atractivo.

La importancia del color es comunicar los códigos de colores deben respetar el uso
profesional y cultural ya existente de determinados colores. Las connotaciones varían
fuertemente respecto a los diferentes tipos de usuario, especialmente cuando son de
diferentes culturas. Las connotaciones del color deben ser usadas con sumo cuidado.
ICONOS: Son pequeños gráficos hiperenlace que:
• De forma aislada
• Acompañados de un hipertexto
• Acompañados de una etiqueta
• Acompañados de un "tooltip"
Utilizar ideografías estándar para representar las acciones de navegación. Para
acciones de navegación específicas de nuestro sitio: es preferible no utilizar iconos, o, de
usarlos, acompañarlos de una etiqueta. En la mayoría de casos aumenta la usabilidad un
simple hipertexto, o un botón generado sólo con texto y las clases de estilo adecuadas
para conferirle apariencia de botón. Los tamaños pueden ser variables, aunque se ha
demostrado la misma eficacia para los micros iconos y tienen un peso apreciablemente
menor:
• 40 X 40 pixeles Peso < 1 KBytes.
• 20 X 20 pixeles Peso < 300 Bytes.
• 12 X 12 pixeles Peso < 100 Bytes.

TIEMPO DE RESPUESTAS Y RETROALIMENTACIÓN

En un sistema interactivo la retroalimentación visual (o feedback visual) es toda
forma gráfica de comunicación que va del sistema en dirección al usuario. A pesar que la
retroalimentación visual es un componente de software difícil de desarrollar y difícil de
diseñar para guiar y hacer fácil la tarea del usuario, la Interacción Humano Computadora
(IHC) como el área de la Ingeniería de Software han propuesto hasta hoy diversas
técnicas para diseñar y desarrollar la retroalimentación visual sin tener un consenso. Este
trabajo preconiza los patrones de interacción como mecanismo unificador entre la
Ingeniera de Software y la IHC para diseñar la retroalimentación visual en función del
contexto de la tarea del usuario, y permitir a la vez la comunicación entre los especialistas
involucrados en su desarrollo. Cuando se califica un sistema de interactivo no se puede
dejar de lado el estudio de la retroalimentación visual (visual feedback en inglés) que
corresponde a la forma de comunicación visual que va del sistema en dirección al usuario.
La retroalimentación tiene lugar en la interfaz de la aplicación en forma de expresiones de
salida (e.gr. ventanas, iconos, mapas sensibles, mensajes de error), a fin de informar al
usuario sobre el efecto de sus acciones y sobre el estado actual del sistema. Para tal
efecto, la retroalimentación debe ser informativa, comprensible y se debe efectuar en un
tiempo razonable a la tarea del usuario.
La retroalimentación visual es un factor que corresponde tanto a la ingeniería de software
como a la IHC pues contribuye respectivamente en la utilidad y la usabilidad de un
sistema interactivo. La utilidad concierne a la funcionalidad del software del sistema
caracterizándolo para lo que fue hecho. La usabilidad concierne a guiar pertinentemente
al usuario en su tarea y hacer que el sistema se fácil de usar.
A pesar de la importancia de este doble rol de la retroalimentación y su presencia
predominante en los actuales Sistemas Interactivos (SI) desafortunadamente no se ha
estudiado un mecanismo de diseño que permita encontrar un compromiso entre los
factores de Ingeniera de Software y de la IHC. De lado de la IHC, se han propuesto un
gran número de recomendaciones ergonómicas para la retroalimentación visual, pero sin
especificar “el como” diseñar y concretizar la retroalimentación visual en un SI.
Ahora bien, del lado de la Ingeniera de Software numerosas técnicas de programación
visual y herramientas CASE se han propuesto para desarrollar componente de software
para la retroalimentación visual. Sin embargo, estos Componentes son fuertemente
dependientes de los detalles de programación (e. gr. lenguaje de codificación y de la caja
de herramientas a utilizar).
Internacionalización

El concepto de internacionalización aplicado a las páginas web y, en general a cualquier

desarrollo informático, se refiere al proceso de diseño y construcción del software de
forma que se adecúe a distintas lenguas y regiones sin tener que modificar el código ni
realizar variaciones de ingeniería informática.
El proceso de internacionalización del software tiene como objetivo facilitar la posterior
localización del producto informático.
Es una labor costosa que los ingenieros informáticos llevan a cabo cuando codifican el
sitio web y que, a la larga, conlleva un ahorro importante en los planes de globalización de
las empresas, al facilitar enormemente el proceso de localización a otras lenguas.
Te detallamos algunas de las consideraciones que más se tienen en cuenta:

 La funcionalidad del sitio web es común en todas las lenguas y no debe ser
localizada. Por ello, se separa de la interfaz de usuario, que sí debe localizarse, en
varios archivos para poder actualizar el contenido sin que afecte al diseño gráfico
de la página.
 Es importante que la interfaz de usuario posibilite variaciones en el espaciado o
capacidades de transliteración para que cualquier usuario pueda introducir
texto.
  Es recomendable planificar el proyecto de globalización de la empresa de
forma que los programadores puedan colaborar con la agencia de traducción de
una página web para que se incorporen las instrucciones concretas necesarias en
el código fuente.
Localización:
La localización de páginas web es el proceso a través del cual se adapta el software para
una lengua y cultura específica de manera que los usuarios obtengan una óptima
experiencia de navegación.
La localización web es un recurso imprescindible para cualquier empresa que quiera
vender sus servicios o productos en mercados internacionales. No en vano, la localización
se encarga de todos los contenidos que sí ve el usuario. Como la primera impresión es la
que cuenta, el efecto que cause la usabilidad de nuestra web y la experiencia del
usuario en su primera visita, decidirán si vuelve.
La localización implica mucho más que traducir. Colaborar con localizadores
profesionales te garantiza:

 Un conocimiento exhaustivo del idioma y la cultura de destino.

 Aplicación de la terminología adecuada y la adecuación de los elementos
gráficos y las convenciones de formato propias del lugar
 Adaptación de los medios de pago, la moneda, las tallas, los sistemas de medida...
Cualquiera que sea el símbolo o elemento que se utilice debe ser correcto.
 Una buena localización de páginas web evita errores absurdos o incluso
ofensivos en la cultura del público objetivo.
 La localización consigue que el usuario perciba que la página web ha sido creada
en su idioma.
Diferencias entre ambos conceptos:
Como puedes ver, la internacionalización y la localización de páginas web no son lo
mismo, aunque ambas forman parte de la estrategia de globalización de las empresas y
un buen desarrollo de ambas es fundamental para lograr el éxito.
Podríamos decir que la internacionalización conforma la estructura interna de la página
web que permite a los localizadores acomodarla más fácilmente a audiencias muy
distintas para que cada cultura la perciba como propia.

Modelos metafóricos y conceptuales :

Tipos de metáforas.
Metáforas organizacionales
Se fundamentan en la estructura existente de un grupo, sistema u organización.
Por ejemplo: un sitio web de un supermercado puede estar agrupado por departamentos
o secciones como los supermercados “físicos”. Panadería, carnicería, higiene, limpieza…
de esta manera, el usuario aplica su conocimiento de la vida real al sitio web y puede
comenzar a moverse.
Es importante que el usuario encuentre sentido y utilidad a la metáfora: si es un sitio de
compras, no es conveniente organizarlo como reflejo de la estructura corporativa de la
empresa, que es algo que el usuario no entiende y que además le resultará inútil en su
tarea de comprar.
Metáforas funcionales.
Se apoyan en tareas o funciones que el usuario puede realizar en su vida cotidiana.
Ejemplo: Adobe Photoshop o MS Word y en general todos los programas que funcionan
bajo sistemas de ventanas tienen las funciones Copiar, Cortar y Pegar, que permiten que
el usuario entienda cómo puede reutilizar parte de su trabajo en la misma o diferentes
aplicaciones.
Metáforas visuales.
Se basan en elementos gráficos familiares para la mayoría de la gente. Por ejemplo: un
sitio de música en la que los usuarios puedan escuchar canciones, se les puede proveer
de tres iconos “Play” “Pause” y “Stop”, que ya le son familiares en todos los aparatos de
CD, DVD, etc…
Usar metáforas no es diseñar con “estilo”.
Es necesario ayudar al usuario a entender lo que le ofrece el sistema evitando la mezcla o
el uso de metáforas inadecuadas. Muchos diseñadores confunden el hecho de aplicar
metáforas en su trabajo con un diseño moderno o rompedor. Es mejor prescindir de
metáforas cuando pueden desorientar al usuario a no ser que esta “desorientación” sea
uno de los objetivos del sistema como en entornos virtuales, de juego y/o aprendizaje en
los que la exploración tiene gran protagonismo.
El modelo conceptual de un sistema software constituye una abstracción externa que
describe mediante diagramas y notaciones con distinto grado de formalidad el
conocimiento que debe poseer una persona acerca de un sistema, conocimiento que se
encuentra almacenado en la Memoria a Largo Plazo.
Los diseños conceptuales se dividen en:
Modelo mental del usuario.
Modelo mental del diseñador.
Imagen final del sistema.
Modelo Mental.
Aquellas ideas, que, al estar establecidas en el cerebro, determinan las creencias del ser
humano e influyen en sus acciones. Un buen diseño es aquel que interpreta fielmente los
modelos mentales del usuario. Se forman a través de la experiencia, la formación y la
instrucción.

Psicología del HCI.

Al igual que en la actividad empresarial se comenzó con una orientación claramente
productiva, y a lo largo del siglo pasado y lo que llevamos de este ha ido variando esta
orientación hasta centrar al cliente como objetivo primero y último de la misma, el diseño
de programas informáticos ha ido evolucionando desde su concepción inicial a la
resolución de problemas, pocas veces teniendo en cuenta el problema mismo de usar
dichos programas, hacia la mejora de la experiencia del usuario, mediante aplicación de
pautas en el diseño de interfaces.

Pero al igual una vez más que en el entorno empresarial, esto no siempre es así, y no lo
es principalmente por falta de enfoque de las personas que componen el equipo. Así
pues, el informático suele focalizar sus objetivos en el diseño robusto, eficiente, eficaz...
incluso maquiavélico de sus programas, es decir, suele centrarse principalmente en la
técnica, y no en el usuario al que va dirigido. Por otro lado la formación de los diseñadores
incide en aspectos técnicos como la teoría de color, la fotografía digital, la combinación de
estilos, las pautas y estándares, o en aspectos subjetivos como los modelos de
comunicación gráfica, siempre con el objetivo de agradar e incluso comunicar algo al
usuario, pero pocas veces pensando en que él va a ser el partícipe de esto.
En resumen, el informático busca que su programa tenga una gran funcionalidad con una
gran técnica y el diseñador que sea bonito y llamativo por demás. Y no siempre se
combinan ambos objetivos para darle al usuario lo que realmente quiere o necesita. Y
esto incluso en grandes proyectos con gran éxito, como por ejemplo Facebook.
Pero también es cierto que cada día más se profesionaliza el diseño de interfaces a partir
de investigaciones en campos tan variados pero relacionados como la psicología
cognitiva, la psicología de la comunicación, la lingüística, la teoría de la información, la
accesibilidad y la usabilidad, la inteligencia artificial, la minería de uso o los interfaces
adaptativos, de las que actualmente se desprenden ocho reglas de oro genéricas en el
diseño de interfaces.
Consistencia: Uno de los aspectos más importantes a tener en cuenta en el diseño de
interfaces es el conseguir su consistencia a lo largo del mismo, pero también es una de
las reglas que más veces se rompe. Consistencia significa una composición de color,
estilos y fuentes homogénea a lo largo de la interfaz, pero también un uso del lenguaje y
la terminología, unos métodos de ayuda, una forma de recuperación de errores e incluso
una forma de reaccionar ante acciones del programa de manera consistente a lo largo del
mismo.

Usabilidad universal: En este blog ya tratamos este aspecto cuando hablábamos del
Center of Universal Design o del proyecto Build for All. En cualquier caso la usabilidad
universal hace referencia tanto a los diferentes aspectos socio-culturales en el caso de
aplicaciones globales, como puedan ser las aplicaciones Web, como a aspectos
psicológicos y de aprendizaje, tales como los rangos de edad, las discapacidades o la
diferenciación en general entre el principiante y el experto en el uso de aplicaciones de
escritorio.
Realimentación informativa: En todo momento el usuario debe conocer el estado del
sistema y de sus acciones, para lo cual es preciso que el mismo interfaz ofrezca una
realimentación rica pero sin sobrecargar de información al usuario, aprovechando los
principios del diseño universal para mostrar en mayor o menor medida la realimentación
en función de las capacidades del usuario.

Conducir las tareas: El interfaz es un medio de comunicación entre el usuario que desea
efectuar alguna tarea con el sistema y el sistema que las efectúa. El sistema estará
organizado para realizar las tareas de un modo u otro, y la interfaz debe facilitar el camino
al usuario desde el comienzo de la misma hasta su finalización, guiando el proceso en
todo momento, aprovechando para realimentar de manera eficiente y para aplicar
principios de diseño universal que permitan la construcción de atajos o liberen de
sobrecarga de confirmaciones al usuario avanzado, por supuesto siempre manteniendo la
consistencia en los modos de uso.

Prevenir errores: Tal y como inscribió Sigmound Freud en su retrato, "No hay medicina
contra la muerte y contra el error no se ha hallado ninguna regla", puesto que un error
puede aparecer en cualquier momento, se debe evitar al máximo desde el diseño de la
interfaz que el usuario pueda cometer errores en la introducción de datos, en las etapas
de resolución de las tareas y en general en todo aquello que pueda comprometer la
consistencia del sistema. En caso de producirse errores se debe permitir una
recuperación del sistema, bien automáticamente, bien informando de manera correcta al
usuario, indicándole el error producido, los motivos y los medios para resolverlo, y por
supuesto, siendo consistente a lo largo de toda la aplicación en esta tarea.

Deshacer acciones: No hay nada que de mayor control que la seguridad, y la seguridad
se da sobre todo cuando no se tiene miedo al error. Una manera de no tener miedo al
error es permitir echar atrás de manera sencilla acciones que han dado lugar a un error.
Si se produce una situación no deseada y el usuario tiene la capacidad de manera
sencilla de echar atrás dicha situación, le dará mayor seguridad sobre la realización de la
tarea y por tanto aumentará su aprendizaje y mejorará su experiencia de uso. Esto es
posible en ciertas aplicaciones, por ejemplo, una entrada errónea en un procesador de
textos es fácilmente restaurable, en cambio una entrada incorrecta en un proceso de
carga de asientos contables no lo es tanto. Se deberá llegar a un compromiso, pero en
cualquier caso siempre las posibilidades de restaurar estados seguros del sistema son
positivas tanto para el sistema como para el usuario del mismo.

"Dar soporte al locus de control interno": Significa hacer a los usuarios "iniciadores de
acciones", que obtengan el control del sistema, que sean ellos los que dominen y manden
las acciones y el sistema responda a ellos, todo ello a partir de la interfaz de usuario. Para
ello se deben eliminar las secuencias de entrada de datos tediosas, la dificultad para
obtener la información necesaria por requerir excesiva información o excesivos pasos, la
dificultad para realizar determinadas acciones... El ejemplo más sencillo suelen ser los
interfaces de los bancos, dónde cada acción requiere un dato de entrada normalmente
vinculado a una acción anterior, pero sin continuidad entre ellas.
Patrones de diseño de interfaz de usuario

Al crear nuevos productos digitales, siempre buscaremos lugares comunes. Esto tiene
que ver con la confianza que transmitirá nuestra plataforma, ya que hay acciones básicas
de los usuarios que deben nacer por instinto. En este sentido, siempre existirán patrones
comunes y no necesariamente, elementos nuevos.

Aprender a convivir con ellos y utilizarlos positivamente, dependerá de nosotros y la visión

estratégica de nuestro proyecto. Por eso hoy, te ayudo a entender cuál es su
funcionalidad y porque son “inevitables”.

¿Qué son los patrones de diseño?

Como su nombre lo indica, son elementos o componentes que observamos repetidamente

en los productos digitales que utilizamos. Estos nos proveen de soluciones recurrentes a
problemas de diseño comunes.

Como consumidores constantes de información, estamos acostumbrados a que ciertos

componentes visuales funcionen de una forma específica. Por ejemplo, los “Tabs” son
utilizados para resolver ciertos contenidos en donde el usuario no necesita cambiar de
página. En ellas, el problema o contexto requiere que el contenido deba separarse en
secciones. Las tabs permiten acceder a las diferentes partes a través de un área de
contenido única que no actualiza la página al hacer click en cada sección.

Ejemplos de Tabs

Por experiencia y costumbre, reconocemos una estructura visual que ya hemos visto
antes. Por lo tanto, el usuario puede percibir que si hace click en un objeto de la interfaz,
esta le devolverá una respuesta. Intentar romper estos esquemas mentales o innovar
demasiado en ellos puede provocar que los usuarios se frustren. En estos casos la
expectativa sobre la respuesta esperada es un gran indicio.
¿Para qué sirven los patrones de diseño?
Si bien los patrones de diseño nacen del arquitecto Christopher Alexander para ser
introducidos posteriormente al desarrollo de softwares, estos se utilizan en diferentes
disciplinas. Su esencia recae en que un patrón es una solución a un problema recurrente
de diseño. Desde este punto de vista, para que una solución sea considerada un patrón
debe comprobarse su utilidad. Esto significa que debe estar confirmada su efectividad
resolviendo problemas similares en otros contextos digitales. Por ello, cada patrón debe
ser reutilizable.
Los patrones permiten crear componentes que brindan soluciones efectivas. Con ellos, los
equipos de trabajo no tendrán que invertir horas intentando reinventar la rueda, si no que
adaptarla para un uso específico, agilizando los procesos de desarrollo en general.
El uso de los patrones de diseño se puede evidenciar fácilmente, ya que ayudan a
mejorar notoriamente la experiencia de usuario. Como mencioné anteriormente, los
usuarios poseen hábitos de comportamiento frente a dispositivos digitales, por lo tanto,
podemos adelantarnos a estas conductas para generar menos roce al momento en que
ellos usen los productos digitales.
Patrones de diseño comunes
Estos son algunos ejemplos de patrones que frecuentemente son usados en sitios y
aplicaciones y que de seguro puedes identificarlos.

Carruseles:
Cards:

Notificaciones:

Modelado de interfaz de usuario:

La interfaz de usuario se compone de elementos intuitivos y atractivos, diseñados para

brindar una experiencia fluida a los usuarios. En la parte superior, se encuentra una barra
de navegación con opciones claramente identificadas, que permiten a los usuarios
acceder fácilmente a diferentes secciones de la aplicación o sitio web.
En el centro de la interfaz, se encuentra el área principal de contenido, donde se
presentan los datos y la información relevante. Dependiendo de la naturaleza de la
aplicación, puede haber tarjetas, listas o paneles interactivos que muestren los elementos
principales. Se puede utilizar un diseño limpio y espaciado para resaltar la información
más importante y facilitar la legibilidad.
En el lateral o en la parte inferior de la interfaz, se pueden incluir paneles adicionales,
como menús desplegables, filtros o herramientas de búsqueda, para que los usuarios
puedan personalizar su experiencia y encontrar rápidamente lo que están buscando.
La interfaz de usuario también puede incluir elementos interactivos, como botones, iconos
o enlaces, que permiten a los usuarios realizar acciones específicas, como enviar
formularios, iniciar sesión o compartir contenido en redes sociales.
Además, es importante tener en cuenta la accesibilidad al diseñar la interfaz de usuario,
asegurándose de que el texto tenga un contraste adecuado, que se utilicen etiquetas
descriptivas para los elementos interactivos y que haya opciones de accesibilidad para
usuarios con discapacidades visuales o motoras.
En resumen, el diseño de la interfaz de usuario busca facilitar la navegación, resaltar la
información relevante y proporcionar una experiencia agradable y funcional para los
usuarios.