Diseño UI
Diseño UI
Diseño UI
Nacional
Escuela Superior de Cómputo
Alumnos:
● Cruz Gonzalez Jose de Jesus
● Pardo Alanis Arturo Isaac
● Tellez Rosas Angel Enrique
Maestra: Rivera de la Rosa Monica
Materia: Software Engineering For Mobile Devices
Grupo: 3CM13
¿Cuál es el papel del diseño de la interfaz de usuario?
El diseño de la interfaz de usuario puede tener un gran
impacto en la experiencia del usuario de cualquier
producto digital. Puede alentar a los usuarios a explorar,
convencer y transmitir todo tipo de emociones. Todo eso
mientras resalta las características principales.
Pautas y Reglas:
1) Respetar la heurística del diseño de la interfaz: Las diez heurísticas del
diseño de interfaces de Nielsen son bien conocidas, tanto por su relevancia
como por la dificultad para implementarlas. Es importante asegurarse de
que los usuarios no se sientan frustrados o confundidos hasta hacerles
saber que hay algo de funcionamiento en el sistema después de hacer un
clic en un botón. Los diez mandamientos son los siguientes:
- Visibilidad del estado del sistema. Dicta que los usuarios deben estar al
tanto de lo que sucede dentro del producto, aunque solo sea por un simple
ícono de carga. Se trata de mantener viva la retroalimentación para
mantener la comunicación entre el usuario y el producto.
- Coincidencia entre el sistema y el mundo real. El diseño de la interfaz
de usuario debe utilizar un lenguaje que los usuarios ya conozcan,
utilizando referencias al mundo real. Es por eso que los interruptores de
palanca se ven como interruptores físicos reales y los botones se ven como
botones reales. Esto ayudará a los usuarios a aprender a manejar el
diseño, haciendo que la información se sienta más familiar..
- Control y libertad del usuario. Cometer errores es humano, todos los
usuarios son propensos a cometer errores. Depende de los diseñadores
hacer que estos errores sean reversibles, dando a los usuarios tanto control
sobre el producto como libertad para cometer errores, porque no tendrán
consecuencias permanentes.
- Consistencia y estándares. Quiere que todo en el producto sea
coherente, sin importar el tamaño del producto. Los usuarios deben saber
que los componentes y elementos se comportan de manera coherente para
que la experiencia sea lógica.
- Prevención de errores. Los diseñadores deben identificar las áreas del
diseño más propensas a errores y corregir los bits que se pueden mejorar,
para que los usuarios tengan menos probabilidades de cometer errores.
Esto implica cosas como identificar y prevenir errores de alto costo, crear
buenos mensajes de error y asegurarse de que el diseño refleje el modelo
mental del usuario.
- Reconocimiento en lugar de recordar. Esto apunta al hecho de que la
gente no quiere la carga de recordar cosas. Todo lo que sea importante
para el usuario debe ser reconocible y visible siempre que sea posible,
como etiquetas de campo y botones cruciales. Si la información no puede
ser visible, debería ser fácil de encontrar.
- Flexibilidad y eficiencia de uso. Es una buena idea ofrecer atajos útiles
para las tareas principales para los usuarios veteranos, mientras los oculta
a los novatos para evitar confusiones. Esta es una forma de decir que
desea ofrecer un enfoque personalizado a las tareas más frecuentes para
que los usuarios puedan hacerlas de manera más eficiente.
- Diseño estético y minimalista. Esto apunta a la necesidad de mantener
solo lo necesario en cualquier pantalla dada del diseño. Con cada elemento
adicional, aumenta la competencia entre todos los componentes por la
atención del usuario y su verdadero impacto se hace más pequeño.
- Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de
errores. Esto apunta a que los mensajes de error son claros sobre lo que
salió mal y cómo los usuarios pueden solucionar el problema. Desea que el
mensaje sea directo y directo, útil y que ofrezca una solución.
- Ayuda y documentación. El objetivo es tener un producto que no
requiera más explicaciones, pero eso no siempre es posible. Los productos
complejos y avanzados como una herramienta profesional de wireframe o
Photoshop necesitarán más detalles y los usuarios deberían poder
encontrarlos fácilmente.
2) Hacer que los productos sean fáciles de usar para los usuarios: Esto
implica dejar claro el diseño tanto en función como en tono, de modo que
todo funcione en conjunto para guiar al usuario a través de la experiencia.
Cosas como tener una jerarquía visual clara , ser despiadado al cortar
elementos de las pantallas y concentrarse en las tareas principales, todo
ayuda.
En conjunto, reducir la carga cognitiva es excelente para la usabilidad. Su
producto funcionará sin que los usuarios se sientan frustrados o agotados,
lo que les permitirá concentrarse en la experiencia en sí o simplemente
concentrarse en las tareas que tienen entre manos.
3) Haz que sea consistente y fácil de aprender: Para un usuario nuevo, hay
mucho esfuerzo involucrado en aprender algo nuevo. Por eso es importante
que los diseñadores reduzcan todo lo que se pueda cortar y lo transformen
en algo más simple y fácil. Cosas como garantizar la coherencia, tanto en
las señales visuales como en el comportamiento de los componentes, son
cruciales.
Permite que los usuarios exploren y descubran las grandes cosas del
producto, lo que les permitirá invertir. Una vez que se establezcan, ofrezca
las funciones más avanzadas, las opciones de configuración complejas. A
esto se le llama divulgación progresiva .
4) Comprender la función de los patrones de IU: Los patrones de diseño de
la interfaz de usuario son, en resumen, soluciones habituales que se utilizan
para afrontar problemas de diseño habituales.
Estas son formas de resolver estos problemas frecuentes de una manera
que ha sido probada por innumerables diseñadores de todo el mundo.
La verdadera fuerza de los patrones de IU proviene de la posibilidad de
adaptarlos para que se adapten a la mayoría de los proyectos que
existen. Es algo muy práctico y utilizable, y la mayoría de los diseñadores
de interfaces de usuario tendrán una biblioteca de patrones o dos a las que
recurrirán una y otra vez.
5) Presta atención a la estructuración del contenido: La forma correcta de
estructurar su contenido probablemente irá de la mano con algunos otros
aspectos del producto. Los dos más grandes son la arquitectura de la
información y la jerarquía visual en juego cuando se presenta todo al
usuario. La estructura de tu contenido cambiará drásticamente dependiendo
de cuál sea el contenido, cuál sea el objetivo de la pantalla y quién sea el
usuario.
Esto implica que hay bastante planificación e investigación que hacer antes
de que los diseñadores de interfaz de usuario lo junten todo en un
wireframe. Primero, quieres tener a mano la persona del usuario y sus
modelos mentales, para que sepas exactamente quién verá la pantalla, sin
perder de vista cómo piensan o las cosas que quieren. En segundo lugar,
desea tener una idea clara de la arquitectura general de la información en el
producto, de modo que sepa qué es más importante y primario para las
características centrales.
Otros factores que desea considerar son la legibilidad del contenido. Esto
es especialmente cierto para el contenido basado en texto, que puede ser
denso y difícil de leer para muchos usuarios. Los diseñadores de interfaz de
usuario tienen que romper largos bloques de texto y agregar pequeños
elementos visuales que ofrecen alivio a la vista, por lo que hay un buen flujo
de contenido.
1. Registro perezoso
Este patrón es particularmente común entre las plataformas de comercio
electrónico que existen. La idea es que no le pida al usuario que inicie sesión o
inicie sesión hasta el pago real. Resuelve el problema de las personas que desean
experimentar el sitio web sin el formulario de registro formal. Esto permite que
nuevas personas naveguen y agreguen cosas a su carrito, sin preocuparse por
crear una cuenta. En última instancia, las personas ya están invertidas en el
momento en que llegan a la caja. Tiene más sentido pedir su información de inicio
de sesión / inicio de sesión en el momento, cuando ya saben lo que quieren y han
invertido tiempo en la selección de elementos.
2. Migas de pan
Todos sabemos lo que representan, con las migas de pan convirtiéndose en un
clásico en el diseño de la interfaz de usuario. Resuelve el problema de dejar que el
usuario sepa dónde se encuentra dentro de la estructura del producto en todo
momento, al tiempo que proporciona accesos directos a los niveles más altos de
contenido. La navegación de miga de pan se encuentra comúnmente en sitios web
que contienen mucho contenido e información, como plataformas de comercio
electrónico o revistas de estilo editorial y revistas de noticias. Funciona muy bien
en productos que tienen una jerarquía clara de información, lo que representa una
opción inadecuada para sitios web que son pequeños y solo tienen unas pocas
páginas.
3. Pasos a la izquierda
Las personas a menudo pueden perderse en procesos largos. Cosas como
formularios largos o procesos de pago pueden extenderse, creando el problema
de que los usuarios se pierdan o pierdan interés o atención. Necesitan orientación,
algo que se asemeje a una hoja de ruta. Muchos diseñadores recurren al patrón
de pasos a la izquierda, que actúa como una barra de progreso que permite a los
usuarios saber dónde se encuentran y cuánto más lejos tienen que ir. Tiene mucho
margen para que los diseñadores sean creativos, con las barras hechas de las
maneras más ingeniosas sin dejar de hacer el trabajo. Ofrecen contexto a los
usuarios que lo necesitan, además de actuar como una luz al final del túnel para
los usuarios cansados.
4. Tarjetas
Las tarjetas de interfaz de usuario son otro patrón de diseño en el que los
diseñadores a menudo confían para mostrar contenido. En teoría, resuelve el
problema de mostrar contenido que varía en forma y longitud. Dicho esto, tener un
sistema de tarjetas aprovecha al máximo el espacio disponible, tanto para diseños
web como móviles. Un sistema de cuadrícula de tarjetas funciona mejor cuando
los usuarios están navegando en lugar de buscar una cosa específica. Se puede
utilizar para agrupar visualmente porciones digeribles de información, lo que la
hace organizada pero no abrumadora para los usuarios. Los diseñadores pueden
agregar interacción a las tarjetas para elevar el diseño, así como ser creativos con
la pantalla real en cada tarjeta.
8. Modal
Las ventanas modales son muy comunes de encontrar en el diseño de la interfaz
de usuario de los sitios web. Ya sea una tienda en línea o un blog, los modales
ofrecen una excelente manera de captar la atención del usuario y obtener alguna
reacción del usuario. Esto suele ser utilizado por los diseñadores para llamar la
atención sobre las ventas, boletines importantes y otras cosas que requieren que
el usuario lo acepte o se registre para algo.
9. Carrusel
El carrusel tiene sus fanáticos y odiadores. Algunos dicen que los carruseles están
un poco desactualizados y es probable que desaparezcan por completo en un
futuro cercano, debido a problemas de usabilidad y rendimiento. Dicho esto,
todavía podemos ver carruseles en muchos sitios web de la web, lo que lo
convierte en un patrón de interfaz de usuario muy relevante. El principal problema
que resuelven los carruseles es que permiten a los usuarios ver muchas opciones
mientras centran toda su atención en solo una de esas opciones. Esto significa
que los carruseles pueden ser una forma bastante persuasiva de acercarse al
usuario, mostrando sus opciones en todo su esplendor con la esperanza de que el
usuario seleccione una de ellas. Puede ser útil porque ocupa muy poco espacio
mientras logra mostrar bastantes alternativas. Es un enfoque altamente visual, lo
que lo convierte en una opción terrible si el contenido que necesita mostrar no es
de naturaleza visual, como una hoja de Excel o un documento escrito.