Charter del Proyecto

Guía de Diseño de Interacción [nombre del proyecto]

Versión 1.0

PRSENTADO POR: [INTEGRANTES DEL GRUPO]

 Table de contenido

1. Diseño centrado en el usuario ....................................................................................................... 1

1.1 Diseño centrado en el usuario ................................................................................................. 1
1.2 Conocer al usuario ................................................................................................................... 2
1.3 Implicar al usuario haciéndolo participar en el diseño ........................................................... 2
1.4 Prever los errores del usuario .................................................................................................. 2
1.5 Optimizar las operaciones del usuario..................................................................................... 2
1.6 Buscar dónde conviene dar el control al usuario ..................................................................... 3
1.7 Ayudar al usuario a hacerse con el sistema. ............................................................................ 3
2. Modelo del sistema........................................................................................................................ 3
2.1 Modelo del sistema. ................................................................................................................. 3
2.2 ....................................................................................................................................
Modelo mental consistente ...................................................................................................... 4
3. Consistencia y simplicidad ............................................................................................................ 4
3.1 Consistencia del interfaz. ......................................................................................................... 4
3.2 ....................................................................................................................................Si
mplicidad. ................................................................................................................................ 5
4. Memoria humana .......................................................................................................................... 5
4.1 El usuario pueda recordar las tareas. ...................................................................................... 5
4.2 ....................................................................................................................................El
usuario reconozca y no tenga que recurrir a la ayuda. ............................................................ 6
5. Aspectos cognitivos ....................................................................................................................... 6
5.1 Minimizar las transformaciones mentales que el usuario tenga que hacer................................6
5.2Trazar analogías con el mundo real ......................................................................................... 6
6. Feedback........................................................................................................................................ 7
6.1 Utilizar feedback informativo .................................................................................................. 7
6.2 ....................................................................................................................................Da
r al usuario indicadores de estado ........................................................................................... 7
7. Mensajes del sistema..................................................................................................................... 8
7.1 Mensajes informativos orientados al usuario .......................................................................... 8
7.2 Mensajes de error positivos, constructivos y específicos. ........................................................ 8
 7.3 Evitar mensajes culpabilizadores............................................................................................. 8
8. Antropomorfización ...................................................................................................................... 8
8.1 No antropomorfizar sin motivo y cuidado ............................................................................... 8

8.2 Crear “agentes”.................................................................................. ¡Error! Marcador no

definido.

9. Modalidad y acciones reversibles 9

9.1 Cuidar los modos dando al usuario información de su estado 9

9.2 cilitar la reversibilidad de las acciones 9

10. Ganar la atención del usuario y mantenerla ............................................................................... 9
10.1 Retener razonablemente la atención del usuario ...................................................................... 9
10.2 .................................................................................................................................. Us
ar adecuadamente los recursos de letra, color, sonido, etc ....................................................... 9
11. Despliegue (pantallas) ............................................................................................................... 10
11.1 Mantener la inercia del display de una pantalla a la siguiente. .............................................. 10
11.2 Organizar la pantalla para gestionar la complejidad .............................................................. 10
12. Los usuarios............................................................................................................................... 10
12.1 Adaptarse a las diferencias y experiencias del usuario........................................................... 10
12.2Clasificar y jerarquizar a los usuarios. .................................................................................... 10
Charter del Proyecto
 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

1. Diseño centrado en el usuario

1.1 Diseño centrado en el usuario.

Pruebas de Usabilidad en Prototipos

Aplicar el test de usabilidad que se presenta a continuación, y determinen que falencias que tiene su interfaz.

El prototipo, puede ser un muckup o un prototipo de alto nivel (HTML)

Definición de la escala
5 4 3 2 1
Extremadamente
Muy útil Algo útil No tan útil Nada útil
útil

Conceptos de Usabilidad
Identidad Corporativa
5 4 3 2 1
1. ¿La portada del Sitio refleja la identidad y pertenencia de la institución? x
2. ¿Existen elementos de la imagen corporativa de la Empresa en la Portada de su Sitio? ¿Se x
repiten en todas las páginas?
3. ¿El logotipo del Empresa ha sido incluido en un lugar importante en la Portada y en las x
páginas interiores del Sitio?
4. ¿Todas las páginas cuentan con un título que indique el nombre de la institución e x
información de contactos virtuales y físicos al pie de la página?
Identidad Corporativa
5 4 3 2 1
1. ¿El Sitio ofrece información sobre las actividades y servicios más recientes e importantes x
que está llevando a cabo la institución?
2. ¿Los usuarios pueden encontrar fácilmente en la portada la información acerca de las x
actividades y servicios más importantes de la institución?
Navegación
5 4 3 2 1
1. ¿El diseño del Sitio es eficiente, rápido e intuitivo? x
2. ¿Aparece el menú de navegación en un lugar destacado? ¿Se ve fácilmente? x
3. ¿Verificó la consistencia de todos los enlaces? x
4. ¿El Sitio cuenta con un mapa o buscador que facilite el acceso directo a los contenidos? x
5. ¿El Sitio mantiene una navegación consistente y coherente en todas las pantallas? x
Visibilidad del estado del sistema
5 4 3 2 1
1. ¿Se informa al usuario claramente el área del Sitio que está visitando? x
2. ¿El Sitio Web diferencia entre enlaces visitados y enlaces por visitar? x
3. En caso de servicios o trámites en línea, ¿ofrece información de cuántos pasos faltan para x
terminar?
Consistencia y cumplimiento de estándares
5 4 3 2 1
1. ¿El HTML del Sitio ha sido validado satisfactoriamente según w3c.org? x
2. ¿El o los archivos de Hojas de estilo (CSS) han sido aprobados según w3c.org? x
3. ¿Comprobó la consistencia de Links usando el verificador de w3c.org? x

Informática y Sistemas Computacionales, 2019 Página 1 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

Atención de errores
5 4 3 2 1
1. ¿Usa Javascript para validar formularios durante su llenado y antes de enviarlos? x
2. ¿Usa elementos destacados para indicar los campos obligatorios dentro de un formulario? x
3. ¿Después de que ocurre un error, es fácil volver a la página donde se encontraba antes x
que se produjese o entrega recomendaciones de los pasos a seguir?
Estética y diseño
5 4 3 2 1
1. ¿Usa jerarquías visuales para determinar lo importante con una sola mirada? x
2. ¿Las imágenes tienen tamaños adecuados que no dificultan el acceso a las páginas? x
3. ¿Las imágenes tienen etiqueta ALT en el código HTML para facilitar la navegación? x
Ayuda ante errores
5 4 3 2 1
1. En caso de errores de consistencia dentro del sitio, ¿se ofrece un mensaje de x
personalizado mediante una página explicativa?, (Por ejemplo: Error 404 para página
inexistente)
2. ¿Entrega información de contacto fuera de Internet? (Por ejemplo: teléfono institucional, x
email, mesa de ayuda, redes sociales)
3. ¿Ofrece área de Preguntas Frecuentes con datos de ayuda a usuarios? x
4. ¿Ofrece páginas de ayuda que explican cómo usar el Sitio? x
Retroalimentación (Feedback)
5 4 3 2 1
1. ¿Puede el usuario ponerse en contacto con el encargado del Sitio Web para hacer x
sugerencias o comentarios?
2. ¿Funcionan correctamente los formularios de contacto?, ¿Ha probado cada uno de ellos? x
3. ¿Hay alguien encargado de recibir y contestar estos mensajes? x

1.2 Conocer al usuario.

Con el grupo de trababjo se opto a realizar la estructura de la informacion de la web.

 INICIO: misión y visión de la empresa

 SOBRE NOOSTROS
 SERVICIOS: Funcionalidades que va a tener la micro empresa.
 GALERIA: Imágenes de todas nuestros servicios de alquiler
 PRECIOS: Accesibles que ofrecemos por el servicio de alquiler
 RESERVACIONES: para reservar nuestros productos.
 CONTACTOS: ubicación y teléfonos de la microempresa.

1.3 Implicar al usuario haciéndolo participar en el diseño.

Al momento de realizar el test se pudo constatar que el usuario tuvo dificultades para ingresar a
al Sitio de la cuenta por lo que la pagina no tiene un buscador de contenidos, y como resultado
del card sorting se verifico una mejora en el sistema.

Informática y Sistemas Computacionales, 2019 Página 2 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

1.4 Prever los errores del usuario.

Para evitar erorres al momento de ingresar a la pagina we, el usuario debera de registrarse antes,
mediante esto se podra evitar erroresl

1.5 Optimizar las operaciones del usuario.

El usuario tiene la capacidad de conocer rapidamente los diverson elementos, significados,

colores que se encuentra dentro de la pagina web.

Informática y Sistemas Computacionales, 2019 Página 3 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

1.6 Buscar dónde conviene dar el control al usuario.

El usuario puede obtener el control directo mediante la siguiente imagen:

<li><a class="MenuBarItemSubmenu" href="principal.html">INICIO</a>

1.7 Ayudar al usuario a hacerse con el sistema.

El sitio web de la empresa “Maxvel Decoraciones”, puede ayudar a los usuarios con todo los
requerimientos necesarios.

2. Modelo del sistema

2.1 Modelo del sistema.

Su importancia radica en que debe favorecer el aprendizaje del sistema, para predecir el
comportamiento del sistema, y además, el usuario utilizará este modelo para establecer estrategias
encaminadas a resolver sus problemas.

Informática y Sistemas Computacionales, 2019 Página 4 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

El modelo de navegación de la interfaz en la pagina web esta enlazado con varias sub menus.

Informática y Sistemas Computacionales, 2019 Página 5 de 13

INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

Informática y Sistemas Computacionales, 2019 Página 6 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

2.2 Modelo mental consistente

El usuario selecciona el objeto deseado

Finalmente el usuario realiza un clic sobre el objeto para entrar a la accion deseada

3. Consistencia y simplicidad
3.1 Consistencia de la interfaz.
En el boton servicio se tuvo la consistencia de entrar sin ningun problema:

Se observa que el boton matrimonio funciona correctamente que los otros botones de servcio:

Informática y Sistemas Computacionales, 2019 Página 7 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

3.2 Simplicidad.
A continuacion, mediante el diagrama se explica las tareas y subtareas de la simplicidad del funconamiento de la
pagina web.

4. Memoria humana
4.1 El usuario pueda recordar las tareas.
Primeramente, el usuario al momento de ingresar en la pagina web y despues de utilizar quedarà gravada el
logotipo de la empresa en sus mentes.

De igual manera, los usuarios siempre recordaran el mapa de la ubicaciòn de la empresa.

Informática y Sistemas Computacionales, 2019 Página 8 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

4.2 El usuario reconozca y no tenga que recurrir a la ayuda.

En este apartado el cliente prefiere recurir de la forma mas ràpida en las redes sociales para reducir el tiempo de
atenciòn utilizando estas aplicaciones.

5. Aspectos cognitivos
5.1 Minimizar las transformaciones mentales que el usuario tenga que hacer.
Al momento de ingresar en uno de los iconos, el usuario accede minimizando el tiempo de ejecuciòn cuando
automaticamente marca el boton de color azul.

5.2 Trazar analogías con el mundo real.

En el diseño de nuestro sitio web no se realizó los iconos de ayuda, chat en linea, herramientas de ayuda.

6. Feedback
6.1 Utilizar feedback informativo.
En el presente diseño no cuenta con el feedback informativo como se observa en la siguiente imagen.

Informática y Sistemas Computacionales, 2019 Página 9 de 13

 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

6.2 Dar al usuario indicadores de estado

Dentro de esta interfza se puede observar el progreso de las actividades reconocibles por el usuario.

Informática y Sistemas Computacionales, 2019 Página 10 de

13
 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

7. Mensajes del sistema

7.1 Mensajes informativos orientados al usuario.
Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado el uso de mensajes
informativos orientados al usuario en su interfaz y que son reconocibles por el usuario. Por ejemplo describir la
acción que el usuario esta punto de ejecutar y darle la alternativa de cancelar la acción o en su defecto seguir.

7.2 Mensajes de error positivos, constructivos y específicos.

Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado el uso de mensajes
positivos, constructivos y especificos al usuario en su interfaz y que son reconocibles por el usuario. Por
ejemplo acompañar a los errores de una breve descripción que ayude al usuario.

7.3 Evitar mensajes culpabilizadores

Describa y capture la imagen de la interfaz en la cual se evidencie que ha evitado el uso de mensajes
culpabilizadores en su interfaz para atemorizar al usuario. Por ejemplo mensajes que indiquen al usuario que las
acciones ejecutas por el han provocado un error del sistema.

8. Antropomorfización
8.1 No antropomorfizar sin motivo y cuidado.
Describa y capture la imagen de la interfaz en la cual se evidencie que ha evitado el uso de antropomorfizar en su
interfaz. Por ejemplo se debe evitar utilizar movimiento en las imágenes cuando es necesario. Su uso es
recomendable en entrenamiento.

Informática y Sistemas Computacionales, 2019 Página 11 de

13
 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

9. Modalidad y acciones reversibles

9.1 Cuidar los modos dando al usuario información de su estado.
Describa y capture la imagen de la interfaz en la cual se evidencie como utiliza los modos de información para el
usuario en su interfaz. Por ejemplo no permitir que el usuario pueda realizar otra tarea si haber culminado la
tarea actual. Solo en casos especiales debe forzarse al usuario como por ejemplo guardar un archivo.

9.2 Facilitar la reversibilidad de las acciones

Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado el uso de reversa de
acciones en su interfaz y que son reconocibles por el usuario. Por ejemplo cuando un usuario olvida cargar un
archivo, al permitirle revisar las acciones realizadas por el usuario el pueda volver a la acción definida por el, o
cuando el usuario decida abandonar cierta acción permitirle la posibilidad de cancelar la acción.

10. Ganar la atención del usuario y mantenerla

10.1 Retener razonablemente la atención del usuario
Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado la retención de atención
del usuario en su interfaz. Por ejemplo presentar el contenido esencial para brindar información de manera rápida
y permitir al usuario ampliar conceptos si el lo requiere.

10.2 Usar adecuadamente los recursos de letra, color, sonido, etc.

Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado el uso uso adecuado de
tipografía, cromática, audio, etc., en su interfaz y que son reconocibles por el usuario. Por ejemplo uso de
tipografía y cromática que llamen la atención del suario.

Informática y Sistemas Computacionales, 2019 Página 12 de

13
 INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES
DCU [tema del proyecto] Versión: 1.0
Interfaz Gr’afica de Usuario Fecha: 10/07/2019

11. Despliegue (pantallas)

11.1 Mantener la inercia del display de una pantalla a la siguiente.
Describa y capture la imagen de la interfaz en la cual se evidencie que se mantiene el despliegue en su interfaz y
que son reconocibles por el usuario. Por ejemplo los objetos estáticos como botones, frase e iconos deben
aparecer en todas las plantilla el mismo sitio.
11.2 Organizar la pantalla para gestionar la complejidad
Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado la organización de la
pantalla para gestionar la complejidad en su interfaz. Por ejemplo eliminar información innecesaria. Minimizar la
densidad en cuanto a texto. Considerar los principios de Gestalt.
https://www.academia.edu/11551111/Proximidad_Patron_de_Dise%C3%B1o

12. Los usuarios

12.1 Adaptarse a las diferencias y experiencias del usuario.
Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado la adaptación a las
diferencias y experiencias del usuario en su interfaz. Por ejemplo elegir versiones cortas o largas de menús y
ayuda y mensajes; menús cortos con funciones simples, y largos con otras más complejas.
12.2 Clasificar y jerarquizar a los usuarios.
Describa y capture la imagen de la interfaz en la cual se evidencie que ha considerado la clasificación y jerarquía
de los usuarios en su interfaz y que son perceptibles por el usuario. Por ejemplo definir usuarios novatos,
intermitentes, frecuentes.
https://www.w3.org/WAI/fundamentals/accessibility-intro/

Informática y Sistemas Computacionales, 2019 Página 10 de 13