La evolución de la interfaz de usuario frente a la experiencia de usuario en el diseño web de WordPress

¿Qué es la interfaz de usuario?

UI significa interfaz de usuario. Abarca las herramientas que los humanos usan para interactuar con las máquinas. Es cómo el usuario controla y opera la computadora. Hay muchas interfaces de usuario que incluyen interruptores y botones físicos, así como botones, campos e interruptores de selección en pantalla. Controles táctiles, como pantallas táctiles, y controles de audio, como comandos de voz. Incluso los teléfonos que tienen cámaras para rastrear el movimiento de los ojos son una especie de interfaz de usuario.

Para la informática moderna, es básicamente cómo el usuario interactúa con un sitio web, una aplicación o un sistema operativo. La interfaz de usuario más común es una interfaz gráfica de usuario (GUI). También existe la interfaz de usuario basada en web (WUI). Estos son algunos de los requisitos de una gran interfaz de usuario:

• Limpio
• Claro
• Familiar
• Estéticamente agradable
• Intuitivo
• Eficiente
• Coherente
• Indulgente

¿Qué es UX?

UX significa experiencia de usuario. Su principal preocupación es cómo se siente el producto para el usuario. Se trata de cualquier aspecto de la interacción de un usuario con el sistema informático. Esto incluye la interacción física, lo que piensan sobre los gráficos, la interfaz de usuario, su comportamiento, sus actitudes y las emociones que tienen al usar el sistema.

Los diseñadores trabajan más con las personas y la experiencia que tienen al interactuar con una computadora o dispositivo. Observan la interacción humano-computadora (HCI) y consideran todos los aspectos relacionados con la experiencia humana.

Según ISO 9241-210 , el estándar internacional sobre  ergonomía de la interacción del sistema humano , la experiencia del usuario se define como “las percepciones y respuestas de una persona que resultan del uso o uso anticipado de un producto, sistema o servicio”. Esto incluye todas las emociones, respuestas (tanto físicas como psicológicas), creencias, preferencias, percepciones, comportamientos y logros del usuario que ocurren antes, durante y después del uso.

En realidad, es muy similar a la Ingeniería Industrial, ya que compara la ergonomía, el análisis de movimiento, la percepción y la respuesta del usuario. Incluso tuvieron un comienzo similar. Estos son algunos ejemplos de lo que se incluye en UX:

• Movimiento requerido para alcanzar un botón
• El aspecto del botón
• La sensación del clic del botón
• El aspecto del clic del botón
• La respuesta emocional del usuario al tener que pulsar el botón
• La respuesta emocional del usuario al hacer clic en el botón.
• La respuesta emocional del usuario después de hacer clic en el botón.
• ¿Funcionó todo como esperaba el usuario?

Una breve historia de la interfaz de usuario

En el pasado, los gráficos se hicieron para acomodar pantallas que mostraban solo verde o brasa. El sonido era solo pitidos de un altavoz incorporado. Las IU eran interfaces de solo texto para la mayoría de los sistemas. Otros sistemas usaban interruptores.

A mediados de la década de 1980 se popularizaron las GUI que otros habían desarrollado durante años. Los gráficos mejoraron pero 320 píxeles se consideraron de alta resolución. La interfaz de usuario comenzó a volverse gráfica con cuadros en los que se podía hacer clic.

Todo se actualizó en los años de Pentium y el diseño de la interfaz de usuario se basó en que la población general tuviera módems de 14k. Esto significaba centrarse en los colores y en la cantidad de regiones en las que se podía hacer clic en la página. Esto significó menos imágenes a resoluciones más bajas. Las tendencias de diseño no tardaron mucho en acomodar módems de 28k y, finalmente, módems de 56k.

Hoy en día los límites que se pueden mostrar en pantalla son relativamente pocos. El diseño de sitios web está limitado por la imaginación y las habilidades de programación de los diseñadores y desarrolladores.

Una breve historia de UX

El término experiencia del usuario proviene de Donald Norman en 1990, aunque los conceptos e ideas han existido por más tiempo para incluir factores efectivos y preocupaciones de comportamiento dentro del diseño de sistemas. El término ha crecido para incluir más que esto a lo largo de los años. Aquí hay una mirada atrás en el tiempo.

Aunque el campo del diseño de la experiencia del usuario es moderno, los conceptos para la experiencia del usuario existen desde hace mucho tiempo. La era de las máquinas, que se remonta al siglo XIX ^, trajo consigo nuevas necesidades de mejora de la producción y la productividad. Las actividades de mejora de la productividad vieron la necesidad de mejorar la experiencia del usuario en todos los aspectos del trabajo.

Henry Ford buscó hacer el trabajo más eficiente, productivo y rutinario. Toyota amplió esto cuando desarrolló el Sistema de Producción Toyota . Toyota incluyó a los trabajadores en el proceso de mejora. Se desarrollaron sistemas de fabricación teniendo en cuenta la experiencia del usuario. Toyota analizó los desperdicios en el proceso, como el alcance, el movimiento, los pasos, la caminata, etc., y analizó formas de hacer que todos los aspectos del trabajo sean más eficientes.

Los interruptores se colocaron con un movimiento de la mano en lugar de un movimiento del brazo. Las luces se movieron para que los usuarios pudieran verlas sin tener que mover la cabeza. Los usuarios eran más productivos y, al mismo tiempo, mejoraba su experiencia con los sistemas. Este concepto puso a la gente primero.

Esto continuó en la era de las computadoras donde la necesidad de alta productividad no ha cambiado. La era de las computadoras trajo teclados, ratones, lápices ópticos, interfaces gráficas de usuario y pantallas táctiles. Los botones pasaron de interruptores físicos a representaciones digitales en la pantalla.

Una breve historia de la interfaz de usuario y UX de WordPress

Antes de ver hacia dónde vamos, veamos dónde hemos estado.

La mayoría de los cambios que hemos visto en la interfaz de usuario de WordPress tienen lugar en el backend y afectan principalmente al administrador (¡oye, los administradores también son usuarios!). Muchos de estos, como la estructura de comentarios, también afectan a los usuarios finales.

• La primera versión de la interfaz de usuario de WordPress, de 2003, no tenía un panel de control y tenía funciones muy limitadas. Solo podía asignar una categoría a una publicación hasta que se lanzó la siguiente versión en 2004. La interfaz de usuario aún era simple y no había muchas funciones hasta que la próxima versión de 2004 introdujo complementos. Esta edición también agregó subcategorías, campos personalizados , miniaturas, vistas previas de publicaciones y algunos otros elementos debajo del capó.
• La versión de 2005 incorporó el tablero y agregó páginas y admitió varios temas. La siguiente versión de 2005 presentó el editor WYSIWYG y Akismet porque, como resultado, el spam puede tener un efecto en la experiencia del usuario. También agregó carga de imágenes y archivos.
• Las dos versiones de 2007 agregaron corrector ortográfico (la ortografía afecta la experiencia del usuario), una estructura de menú para comentarios, etiquetas, notificaciones de actualización para nuevos complementos y disponibilidad de actualización de WordPress, redirección de URL y un botón para el editor visual avanzado.
• 2008 trajo muchas actualizaciones que incluyeron un nuevo panel de administración, actualización con un solo clic para complementos en el directorio de complementos de WordPress, mejoras en el editor visual, una galería integrada, una función de conteo de palabras para la sección de escritura, la capacidad de use Google Gears, instalación automática de complementos en el directorio, la capacidad de responder a comentarios desde el panel de administración, paginación de comentarios, publicaciones fijas , atajos de teclado y mucho más.
• 2009 trajo basura/deshacer global, actualizaciones de complementos por lotes, incrustación de video más fácil, un editor de imágenes incorporado, secuencias de comandos más rápidas para acelerar todo, el editor CodePress, la capacidad de explorar todo el directorio de temas e instalar un tema con un solo clic , arrastre y suelte widgets en la barra lateral y más.
• 2010 introdujo API para ayudar a los desarrolladores con fondos personalizados, encabezados, enlaces cortos, menús ,  tipos de publicaciones y  taxonomías . También fusionó MU con WordPress, lo que brinda a los administradores la capacidad de ejecutar varios sitios desde una sola instalación. También dio una interfaz más ligera.
• 2011 vio la introducción de una interfaz de usuario moderna y un editor de pantalla completa. WordPress se volvió más rápido y liviano, y un nuevo diseño de panel mejoró la tipografía, el diseño y el código.
• 2012 introdujo otra mejora en la carga de imágenes y medios y la creación de galerías simplificada. Hubo estilos mejorados para el tablero, todo se actualizó con gráficos de alta resolución para estar listo para Retina , se agregó un nuevo selector de color y más.
• En 2013, se agregaron actualizaciones automáticas de seguridad y mantenimiento (puedo atestiguar que esto tuvo un efecto positivo en la UX), así como recomendaciones de contraseñas más sólidas, mejor soporte global, guardado automático (otro efecto positivo en la UX de este usuario), soporte nativo para audio e incrustaciones de video, y mucho más.
• 2014 vio una tipografía sencilla que se sentía como en casa en los dispositivos móviles, un mejor modo de escritura sin distracciones, una mejor gestión de medios, nuevas métricas para una mejor búsqueda y navegación de complementos, edición de imágenes mejorada, vistas previas de widgets y encabezados en vivo, vistas previas de galerías, un nuevo navegador de temas , y toneladas más.

Como puede ver, muchas de las mejoras de WordPress a lo largo de los años suponen grandes mejoras en la interfaz de usuario tanto para los administradores como para los usuarios finales. Estas mejoras tenían el objetivo de crear una gran experiencia de usuario mientras se creaba una interfaz de usuario eficiente y efectiva.

Lo que depara el futuro

Algunas cosas continuarán por el camino que están tomando actualmente. Algunos se volverán más prominentes y otros se mejorarán. Aquí hay una lista de algunas de las cosas más importantes a las que prestar atención en el futuro cercano (y no tan cercano).

Desplazamiento, desplazamiento, desplazamiento…

El desplazamiento será más dominante en los diseños de WordPress a medida que más usuarios utilicen dispositivos móviles. Desplazarse es mucho más fácil de usar que hacer clic. El desplazamiento también es más intuitivo y mejora el tiempo de carga del sitio, que es un elemento clave en el SEO… ¡entonces, anota!

Interfaz de usuario plana

La interfaz de usuario será plana. Atrás quedaron los días de las sombras y los botones 3D. El diseño plano es intuitivo y simple, y funciona mejor para dispositivos móviles. Se ve muy bien y funciona bien.

Diseño de materiales

Esto es lo que dice Google sobre Material Design:

“Desarrolle un único sistema subyacente que permita una experiencia unificada entre plataformas y tamaños de dispositivos. Los preceptos móviles son fundamentales, pero el tacto, la voz, el mouse y el teclado son todos métodos de entrada de primera clase”.

Los conceptos incluirán:

• Atrevido
• Gráfico
• Intencional
• El movimiento proporciona significado

La navegación estará diseñada para ayudar a los usuarios a ser rápidos y eficientes. Los objetivos táctiles serán de 48 x 48 píxeles. Admitirá la navegación por gestos estándar y sin mouse. Le ayudará a gestionar el enfoque del usuario final. Garantizará la usabilidad con fuentes más grandes con suficiente contraste para la lectura. Usará el color para transmitir información, usará imágenes como una alternativa al sonido y proporcionará pistas sobre relaciones especiales.

Estas son las características a las que se dirigirán los desarrolladores web. Es por una buena razón que los conceptos de diseño de materiales de Google se extenderán al diseño de WordPress.

Minimalismo

Atrás quedaron los días en que las cosas llamativas saturaban la pantalla. Los sitios web con visión de futuro adoptarán un enfoque minimalista para el diseño y el diseño.

El móvil es el rey

El móvil será el rey de la colina. Ya hemos visto que la última versión de Windows se está construyendo primero en torno a dispositivos móviles. El sistema operativo de Google vino de los sistemas móviles. Con pantallas pequeñas para transmitir el mensaje, esto significa centrarse en imágenes grandes en lugar de texto pequeño.

Fondos dinámicos

El video de fondo puede transmitir un mensaje mucho más rápido y con mayor detalle que el texto. Por esta razón, continuará la tendencia hacia imágenes de fondo de alta calidad, ya sean videos, gráficos o fotografías. Las imágenes y videos grandes son más fáciles de ver y consumir en pantallas más pequeñas, como las de los dispositivos móviles.

Control de voz

Más controles de movimiento y voz. «¡Xbox encendido!»

Los ojos lo tienen

Control de ojos. Esto no es nuevo: el Samsung Galaxy S4 hizo esto. Pero se convertirá en una interfaz de usuario más popular a medida que los dispositivos móviles superen a las computadoras de escritorio y portátiles como la máquina de uso principal para las redes sociales y la web en general. Estos conceptos incluso se extenderán a las computadoras de escritorio y portátiles mediante el uso de cámaras y sistemas de detección de movimiento.

Fichas y Cartas

Pinterest popularizó las tarjetas y desde entonces ha sido una tendencia constante en el diseño web. Su aspecto ordenado y su diseño funcional se convertirán en un estándar en el diseño de WordPress.

Tipografía

La tipografía se personalizará más para que coincida con la imagen de la marca. Las fuentes se elegirán en función del estilo, la imagen, el estado de ánimo, etc.

Experiencia de usuario personalizada

El contenido ya está adaptado al comportamiento y los gustos de los clientes en muchos sitios minoristas. Ahora es el momento de que la UX también se adapte a los gustos de cada cliente. Analytics muestra cómo los clientes usan los sitios web. Esta información puede ayudar a los sitios web a proporcionar contenido al usuario de la forma en que más lo utiliza.

Esto les dará a los usuarios más habilidades para hacer cambios que se adapten a sus necesidades. Aún mejor es que el sitio lo haga por usted. Por ejemplo, si voy a Amazon.com todos los días para ver las ofertas diarias de Kindle, un enlace a las ofertas debe ser destacado en la página de inicio cuando inicie sesión. Si nunca lo uso, entonces el sitio web debería hacer algo más. prominente.

Las reglas básicas siguen siendo las mismas

Aunque el diseño será plano, los botones parecen botones. Los enlaces se verán como enlaces: si se puede hacer clic, parecerá que se puede hacer clic. Los encabezados deben verse como encabezados. Las cosas similares deben agruparse. El diseño de la página debe ser consistente en todo el sitio (un botón debe estar en el mismo lugar de una página a otra). Todo debe estar organizado de manera lógica y la navegación debe ser sencilla.

Marque los elementos requeridos con un asterisco *. Si se requiere un cierto formato, déles el formato por adelantado. Dar una indicación de que el sistema está funcionando cuando están esperando en el sistema. Indique cuándo ingresaron la información correctamente (el cuadro rojo cambia a verde, una cara normal se convierte en una carita feliz, etc.).

Eliminar las posibilidades de error. En lugar de pedirles que ingresen fechas, números, etc., bríndeles una forma de seleccionarlo desde un calendario o un cuadro desplegable. Muestre el progreso con una barra de estado o una indicación similar.

Terminando

Bueno, eso es un vistazo rápido a la evolución de la interfaz de usuario y la experiencia del usuario, cómo se relacionan entre sí y hacia dónde se dirigen en el diseño y desarrollo web. Para que un sitio tenga éxito, debe manejar su UX . Desarrollar con la idea del usuario primero. Esto se volverá más prominente a medida que los sitios web continúen compitiendo por la atención del usuario.

¡Tu turno! ¿Qué cambios ve venir para mejorar la experiencia de UI y UX? ¿Omití algo que debería haber sido incluido en esta lista? ¡Me gustaría saberlo en los comentarios!

Imagen en miniatura del artículo por vasabii / shutterstock.com