Prototipado y Estrategias en Diseño de Interfaces Digitales
Todos los cursos GRATIS
Se acaba en:
:::
Resumen
Un prototipo en el diseño de interfaces es una estrategia invaluable. Con él, podemos emular el comportamiento y apariencia deseada para nuestra propuesta de producto digital.
La utilidad de los prototipos es fácil de apreciar, especialmente en el contexto de un proyecto de UX.
¿Qué Funciones Cumplen los Prototipos en el Diseño de Interfaces?
Las funciones de los prototipos son vastas y se extienden a través de todo el proceso de diseño. Algunas de las más notables incluyen:
Planeación: Los prototipos son una forma efectiva de empezar a planificar. Facilitan no solo la construcción, sino también la comunicación, mejoramiento, validación y prueba de ideas.
Planteamiento de Soluciones: Con los prototipos, podemos plantear soluciones posibles y procesos de trabajo.
Comunicación y Toma de Decisiones: Actúan como una herramienta de comunicación excelente, posibilitando compartir con el equipo y tomar decisiones de diseño.
Validación: Además de plantear y comunicar ideas, también sirven como una herramienta de validación.
¿Qué Consejos Debería Seguir al Crear un Prototipo para el Diseño de Interfaces?
Crear un prototipo efectivo puede parecer una tarea difícil, pero hay algunos consejos que pueden hacerlo más manejable. A la hora de crear prototipos, considera lo siguiente:
Usar un solo color simplifica el proceso y mantiene el enfoque del diseño.
Evita el uso de iconografía para mantener las cosas sencillas y directas.
Stick to one type of typography. This will help keep the prototype clean and understandable.
Contribución creada con los aportes de: Marina Barraza
Por más que intento no consigo subir imágenes, pese a tenerlas subidas a un repositorio y tenerlas públicas.
Otro error de diseño: tampoco se pueden editar los comentarios publicados por uno mismo, funcionalidad que resultaría muy útil para corregir errores.
De acuerdo con esto.
Ojo no hay que confundir errores de sistema con errores de diseño son muy diferentes aunque pueden tener interjección
Para este reto solo falta irse a cualquier página web de alguna institución pública y podremos encontrar más de 10 errores en cada una sin necesidad de analizar mucho jejejejej
Total, aplica para cualquier país del mundo 😂
JAJAJAJAJJA, muy cierto, en mi país con solo ver que la dirección web tiene el ".do", con eso sé que ya tendrá fallos tanto de diseño como de programación. 😅😅
Prototipado y diseño de interfaces
Los prototipos son artefactos que nos ayudarán a simular el comportamiento y el aspecto que tendrá la solución que queremos plantear.
“El mejor wireframe es aquel que se puede romper y que no nos da ninguna pena romperlo.”
Los wireframes en baja fidelidad no utilizan colores ni iconos.
++Tips para el proceso de prototipado (wireframing):++
.
Recuerda que el mejor wireframe es aquel con el que podemos compartir ideas con el equipo, planificar y plantear procesos de trabajo de diseño, además de que podamos "romperlo" sin que nos dé pena (implementación de mejoras, validación y testeo).
.
No necesitas utilizar colores. Sólo una tinta (rotulador) y papel.
.
No utilices iconografía ni imágenes. Sólo líneas, formas sencillas y tipografía a mano alzada, así te centrarás más en el contenido, en el proceso, en los objetivos de negocio y en las necesidades de los usuarios.
.
Emplea un solo estilo de letra (tipografía) similar en todo el prototipo, no uses diferentes tipografías ni tamaños, a excepción de que quieras resaltar jerarquías dentro de una pantalla o proceso.
Me gustaría mostrar ejemplos pero hasta el momento no he encontrado alguno, o no recuerdo haber visto. Igual publicaré ejemplos apenas los vea.
Piensa en productos digitales en los que has sentido que tu experiencia no ha sido lo que esperabas. Ese es un buen punto de partida para evaluar las fortalezas y falencias en sus diseños.
visualmente agota tener que estar mirando la web
diseño de jerarquías poco claro
la atención se centra en el centro sin dejar nada claro y dispersándose la atención hacia los lados sin ningún criterio
Buen ejercicio y estoy de acuerdo con lo que comentas. Apenas entré y me siento abrumado.
Intenté ponerlo como imagen pero no pude.
http://www.adnrh.com.ar/
-Muy poco claro el uso de los botones, parece texto colocado.
-Mal uso del espaciado
-En apariencia, elección aleatoria de tipografía
-En apariencia, elección aleatoria de colores
-Prácticamente nulo diseño, poco atractivo y sin señalamiento claro de las principales acciones que quisieran que los usuarios realizaran
El diseño de la pagina se nota que lo hicieron hace tiempo
Web de la Dirección General de Tráfico
– Tarea específica: realizar gestiones administrativas
– Su principal debilidad: tener una arquitectura de la información mal planificada que dificulta al usuario encontrar la gestión que quiere realizar.
Web de Renfe
– Tarea específica: comprar un billete de ida y vuelta
– Su principal debilidad: no ayudar al usuario a entender el coste total del billete. Por ejemplo, el resumen de la derecha con el precio total destaca sobre el resto, pero ahí no hace la suma del viaje, sino abajo.
Web del Consorcio de Transportes de Madrid
– Tarea específica: cargar abono transporte
– Su principal debilidad: ser más didácticos a la hora de indicar cómo y dónde cargar el abono, ya que los resultados llevan a enlaces que te sacan de la web y no resuelven del todo las dudas.
Las paginas gubernamentales necesitan mucha reingeniería
El proceso de inscripción toma un solo clic, pero el de cancelación está deliberadamente oculto o es "tramposo". Para cancelar, la interfaz obliga al usuario a navegar por menús confusos, enlaza páginas irrelevantes (intentando retenerlo)
Mensajes de error ambiguos en el inicio de sesión
Al intentar cerrar la ventana, el botón para rechazar la oferta utiliza un lenguaje manipulador o de burla (ej. "No, gracias, prefiero pagar el precio completo" o "No me gusta ahorrar dinero")Al introducir una credencial incorrecta, la interfaz muestra un mensaje genérico como "Usuario o contraseña incorrectos" sin especificar cuál de los dos datos falló.
Confirmación vergonzante
Al intentar cerrar la ventana, el botón para rechazar la oferta utiliza un lenguaje manipulador o de burla (ej. "No, gracias, prefiero pagar el precio completo" o "No me gusta ahorrar dinero")
1- Fondo Nacional del Ahorro:
Una vez se ingresan los datos en el formulario del login se envía un código a través de SMS o email. El problema es que los botones "Aceptar" y "Cerrar" son iguales. Adicional, el botón "Aceptar" está a la izquierda haciendo que el usuario se equivoque y haga clic en el botón "Cerrar" por lo que debe repetir el proceso.
2- Acueducto de Bogotá:
Muchos usuarios probablemente ingresan a esa página con el fin de pagar la factura del agua. El problema es que esa opción no es fácil de encontrar dentro de la interfaz.
3- APP Bancolombia:
El proceso de registro de facturas en la APP es difícil al momento de buscar la empresa del servicio público. Se muestran muchas opciones al ser un campo autocompletable. Podría facilitarse un poco la búsqueda a través de otros filtros.
La página del SAT. Contenido.
La página de embajada de Canada, el formulario para consultar estatus de la vida. Mejorar el contenido no es claro.
Página de embajada de méxico, no hay ningun contacto directo para soluciones de emergencia. Hay muchas opciones como contacto que al final mandan a un correo que nunca tiene respuesta.
¿Qué recomiendan para las personas que solemos ser muy perfeccionistas? Saludos. 😅
¡Hola de nuevo Jeffrey! 😃
Mi sugerencia es que seas perfeccionista con los detalles escenciales como una buena ortografía y pixel perfect.
No es recomendable que dediques demasiado tiempo hasta que sea "perfecto", ya que este diseño seguramente tendrá que iterar al ser mostrado a otros miembros de tu equipo, del equipo de desarrollo o a los usuarios.
También es parte de nuestra labor como diseñadores, el reconciliarnos con la idea de que la mayoría de nuestros diseños jamás saldrán a la luz y los que salgan van a iterar muchas veces hasta llegar a manos de los usuarios y de nuevo tendrán que iterar una vez recibido su feedback
Hola Jeffrey 👋🏻.
Que buen consejo el de Tania ✋🏻, en mi opinión tambien es importante ser flexibles, esto te permitirá tener lo mejor de ambos enfoques, y desarrollar la intelegencia emocional para cuando pasen esas cosas que no salen como quisieras.
Un wireframe es un esbozo visual de la estructura de una interfaz digital. Actúa como un plano que muestra la disposición de elementos, funciones y contenido antes de que se desarrollen los detalles visuales.
Consejos al crear un prototipo:
Usa solo un color y formas básicas para evitar distracciones.
Mantén la tipografía simple y consistente.
Dibuja en papel o utiliza herramientas digitales, priorizando la funcionalidad sobre el diseño estético.
Estos pasos facilitan la comunicación y validación de ideas en el proceso de diseño.
1- Haciendo este curso, no me queda claro si es obligatorio responder los retos a los efectos de la certificación. No puedo detectar cuántos retos he respondido y si me falta alguno.
2- Esta es la aplicación de estacionamiento medido de mi ciudad. Para iniciar sesión pide usuario y contraseña y contra intuitivamente luego de ingresar las credenciales el botón para completar la acción está arriba a la derecha y el botón de abajo que dice iniciar con el teléfono dispara un proceso diferente que no necesita de la carga de usuario y contraseña.
3- En el mismo aplicativo al finalizar de cargar crédito para estacionar. El usuario no es redirigido a ninguna pantalla y solo recibe un pequeño mensaje de success. Creo que se puede mejorar.
Esta pagina edita la información del perfil de cada usuario registrado en platzi pero hay interacciones que hacen el usuario no sepa que es lo que esta pasando, por ejemplo, al cambiar la foto de perfil se debe ir hasta al final de la pagina para dar clic en el botón "guardar" pero el mensaje de confirmación o de error aparece al inicio de pagina, ese mensaje debería ser un mensaje flotante o aparecer en algún punto donde el usuario no deba hacer scroll para poder verlo y saber si su foto fue cambiada o no.
Adicional a eso platzi esta rediseñando todo su sitio web pero es confuso ver como tienen un home con un estilo actualizado con una navegabilidad diferente pero al momento de ingresar al perfil u otras sesiones aparece un header diferente y estilos de color diferentes, eso podría hacer creer a un usuario que salió del sitio donde estaba inicialmente.
Esta pagina ayuda a persona en su mayoria de la tercera edad a reclamar sus medicamentos, tienen unas funcionalidad geniales que le aportan gran valor y son herramientas de accesibilidad, permiten que los usuarios agrande los textos o cambien el contraste de los colores por ejemplo, pero tiene otras funcionalidades bastante pobres como que utilizan todos los botones con la misma jerarquía visual, no hay una diferenciación de una acción principal a una secundaria. Por ejemplo "Actualizar datos" es del mismo color que "Solicitar Domicilio".
Cuando por error no ingresar la información del formulario los mensajes de error son muy pequeños, cuestan leerlos
no hay estilos definidos, botones con bordes totalmente redondeados y otros que no
al ingresar la información del formulario y querer ingresar una ubicación se abre un modal a nivel del formulario, el usuario debe hacer scroll para saber que ha pasado al hacer clic en ese botón, un persona de la tercera no podría pedir sus medicamentos por si misma.
