Prototipado y diseño de interfaces

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.

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

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.

https://www.bibliotecaspublicas.es/castellon/ y en general muchos organismos oficiales

• Mogollón de texto
• Uso de SIGLAS a mogollón: nomenclatura pensada para los usuarios administrativos
• Diseño no adaptado
• Búsquedas genéricas infumables. Los propios funcionarios buscan a través de google.
  …

https://www.gva.es/va/inicio/presentacion

• Exceso de texto
• Falta de jerarquía visual
• Mala arquitectura de información en los menús
• No se encuentran las cosas con facilidad y el usuario se pierde.

https://www.botelalcudiamar.es/

• Falta de información en el inicio de la página.

• Las fotos son ridículamente pequeñas

• Muy mal uso del espacio para

• Mapa y dirección muy pequeños apenas se ve

• El buscador también es muy pequeño hace que en toda la web haya un sidebar, condicionando mucho el diseño de la web

• Menú especialmente grande y no aporta ningún tipo de valor

• Distribución de los elementos propia de principio de los 2000

• No se pueden ver las habitaciones con claridad

https://www.comunidad.madrid/servicios/salud/cita-sanitaria
· Responsive no adecuado y scrolls infinitos
· Demasiado texto y sn jerarquía en enlaces.(no hay claridad)
https://www.leganes.org/portal/
· Resolución no adaptable, obsoleta.
· No hay responsive.
· Falta de jerarquia
· Enlaces solapados

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.

https://www.agenciatributaria.es/AEAT.internet/Inicio.shtml

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

Reto 9

https://marketing.gammaknifedelpacifico.com/radiocirugia

• El CTA del header no se dintingue al inicio, no tiene contraste con el fondo.

https://blog.perfumeriasunidas.com/

• El artítulo destacado del priemr módulo se repite abajo, se ve repetitivo.

https://blog.impulse.pe/t-shaped-marketer-conoce-las-habilidades-tecnicas-que-deben-desarrollar-los-marketeros-de-crecimiento-y-como-lo-estamos-desarrollando-en-impulse

• Falta de jerarquí de lectura.

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

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.

https://www.sat.gob.mx/home
Se intenta simplificar tanto la ventana que todo se queda en la parte del menú y no se encuentran con facilidad las opciones.

La plataforma de Platzi, cuando comencé a usarla no tenia muy claro donde se almacenan los cursos que ya se terminaron y los que están en proceso.

Con esta clase, me han dado tips que no había detectado en la propuesta sobre a que estoy trabajando para una florería local. Gracias.

https://terminaldeomnibus.vivamoscomodoro.gob.ar/

• es una pagina de la terminal de omnibus de mi ciudad, pero no se puede sacar pasajes desde la misma
  -diseño incomodo para ver que colectivos hay disponibles para viajar, por tamaño de letra y contenido muy grandes.
• no se puede ver disponibilidad de lugar, previo a tener que ir o llamar si o si a la terminal
• no hay una guia o algo que te diga como llegar a ciertos lugares de la patagonia, donde hacer conexion

Conclusion:

• no soluciona muchos problemas, por lo que hace que igual haya que ir a la terminal
• poco efectivo, mucho por trabajar

• Página de la cancillería de Colombia
  Tarea: sacar una cita para el pasaporte.

ERRORES.

• Banners muy grandes
• para agendar la cita se da clic en una imagen, en un link.
• envía a otra página en la que tengo que llenar los datos, pero solo hasta el final del usuario llenar los datos, dice que no hay citas disponibles.
  -solo es un trámite y está dentro de un menu desplegable, al igual que " el servivio"solicitar".

https://www.cancilleria.gov.co/tramites_servicios/pasaportes

https://tramites.extranjeria.gob.cl

A la hora de realizar el trámite de una determinada visa, cuando cargas los documentos que te solicitan, el diseño no te deja finalizar la postulación. Resulta que no te avisa si hay algún documento pesado o algún faltante, impidiendo realizar el trámite con éxito.

• Airbnb: (error en flujos de chat con anfitrión)
  Cuando vas a “reservar” dentro de esa pantalla tenemos una sección para dejarle un mensaje al anfitrión, empiezas a escribir pero luego no hay manera de enviar el mensaje no hay botón ni saliendo del overlaping del teclado.
  Pero si vas por otro camino que es sin ir a reservar si puede hablar por chat con el anfitrión.
• Didi: (Error en flujos de cambiar ubicación al ya tener pedido un coche)
  Automáticamente te pone tu ubicación si uno esta distraído y no ve que esta tomando mal la ubicación te mandan el coche a otro lado y el chofer te pide que cambies la ubicación pero nunca la app te deja llegar a eso y si te deja está deshabilitado el poder cambiar la ubicación.
• Slack : (complejización de la carga de imagenes para enviar)
  Cambió la manera de cargar imágenes desde tu dispositivo móvil en un mensaje, ahora tiene que ir a botón + donde habrá varias cosas para subir, luego tienes que buscar la imagen, luego tiene que seleccionarla luego te la carga y tiene que hacer que escribes para poder llegar a enviarla. Antes simplemente tenías el icono imagen la buscabas la cargaban y enviabas.

reto 9:

1. https://kapowdersuperfood.com/pages/faq
   problema de jerarquías tipográficas
2. https://cosmocookies.com/
   banner principal texto sobre imagen no es legible - colores que no contrastan
3. https://www.mimos.com.co/
   se sobreponen los banner - todos tienen diseños diferentes (look and feel) y mezclan información para públicos distintos (inversionistas y consumidores finales)

📌| En resumen:

Los prototipos son estrategia de diseño de interfaces que son de gran ayuda para los proyectos de UX, que facilitan simular el comportamiento y el aspecto que tendrá la solución que queremos plantear.

.

Algunos consejos a tomar en cuenta a la hora de crear prototipos, son:

• Utiliza un solo color.
• No utilices iconografía.
• Solo utiliza un tipo de tipografía.

https://hispamer.online.com.ni/

-Hay problemas de distribución de contenido
-Al parece no existe un layout en concreto
-No hay un carrito de compras

Reto 9:

1. https://www.uv.mx/posgrado/oferta-educativa

• Existe un problema de diseño en la estructura y clasificación de la información. Al no tener una apartado de búsqueda personalizada es difícil encontrar el posgrado que buscas.

1. https://www.mediotiempo.com

• Entiendo que las ventanas emergentes (pop-ups) son un tema redituable en el aspecto publicitario y comercial, sin embargo a nivel de diseño el despliegue de este mecanismo lo considero muy molesto e incómodo para el usuario.

1. https://hotmart.com/marketplace

• A nivel visual observó que este marketplace está demasiado saturado, al perder esa simple complica la interacción con los cursos que se ofrecen. Creo que en lugar de poner sólo las categorías sería mejor seleccionar áreas de interés y a partir de ahí se muestren las recomendaciones personalizadas.

Ejemplo 1

.
Platzi: actualización de interfaz de las clases y cursos. Hace unos días hicieron una actualización y hubo un cambio que presentó un área de oportunidad y de hecho el equipo de Platzi lo corrigió con agilidad. El error básicamente surgió porque el listado de las clases cambió de posición, pasaba de estar del costado izquierdo a ubicarse debajo del reporductor, motivo por el cual no se siguió el mapa mental que tenían los usuarios sobre este flujo. Lo corrigieron volviéndolo a colocar en donde estaba antes.

Ejemplo 2

.
En este segundo ejemplo sobra la explicación. Les comparto la imagen.

Ejemplo 3

.
Los usuarios que ordenan online están acostumbrados a poder ver los detalles de los productos que pueden ordenar.

https://consmadrid.esteri.it/consolato_madrid/es/i-servizi/domande-frequenti/faq-anagrafe.html

• demasiado texto
• falta de jerarquia de las informaciones
• demasiadas informaciones
• falta de diseño
• poco atractivo

RETO 9:

• Doble scroll:

• Botones de Cancelar y Aceptar muy poco claros:

• Botón de acción demasiado pequeño, no se puede utilizar en pantallas tactiles
  
  

Y otro punto extra: el editor de texto de este panel de comentarios tiene muy pocas opciones para formatear el texto, y es muy poco intuitivo y flexible. Para añadir una imagen debería bastar con pegarla del portapapeles, por ejemplo.

poner un codigo QR invitando a cualquiera a dejar sus datos. Dejar un panel de retro alimentacion respecro a la experiencia de usuario

• Aquellas webs que al entrar desde tu móvil te bombardean con popups y enormes bloques de publicidad que impiden leer lo que entraste a leer. Se entiende que muchos gracias a la publicidad subsisten, pero al final uno como usuario termina abandonando sin leer nada.
• Los bots de servicios que son simplemente un árbol de desiciones y que poco se ajustan a lo que los usuarios necesitan resolver.
• Aquí en los comentarios de Platzi resultó “indescifrable” la manera de cargar una imagen. Podrían cambiar el editor wysiwyg por uno más ‘friendly’.

Desarrollar el flujo de acuerdo a las necesidades y el contexto de los usuarios

Reto 9:
https://www.udelistmo.edu/content/alumno

• No tiene diseño ux
• No tiene un llamado a la acción
• Diseño saturado