David Mora A01202527Jazminne Barkshadt A00886338Daniel Ortíz A01204096Jorge López A01203064

Segundo Avance de Proyecto

Análisis de las tareas del usuarioEncuesta

1.- ¿Eres Hombre o Mujer?14 Mujeres – 3 Hombres

2.- ¿Qué opinas de una persona que baila bien?

3.- ¿Qué importancia tiene para ti el baile?

4.- ¿Sabes bailar? En caso de que no sepas bailar, ¿te gustaría aprender a bailar con un sistema electrónico?

5.- ¿Con quién sueles bailar?

6.- ¿Cuál es el baile que más te gusta?

7.- ¿Cuál es tu nivel de baile?

8.- ¿Qué estilos de baile te gustarían aprender?

Jazz HipHop Latin Dance Chachacha Salsa Cumbia Merengue Rock & Roll Otro : ___________________

9.- ¿Qué opinas de ciertos estilos como el reggaetón?

10.- ¿Crees que los métodos electrónicos tienen ventaja sobre la enseñanza por métodos tradicionales?

David Mora A01202527Jazminne Barkshadt A00886338Daniel Ortíz A01204096Jorge López A01203064

Tareas Analizadas

Análisis de la aplicación de los principios del diseño de interacción

1. UsabilidadLa usabilidad de este proyecto, estará basada en la identificación y los deseos de

los usuarios, pero a diferencia de otras páginas, como se ha visto en el estado del arte, esta usabilidad no estará dedicada al usuario promedio sino para todos los niveles de usuario que puedan ser encontrados gracias a los estudios o análisis que se pudieron observar principalmente a partir de las encuestas.

La usabilidad también abarcara la accesibilidad, o sea que pueden realizarse cambios en la tipografía del texto presente dentro de la página para ayudar a la gente que tiene ciertas discapacidades visuales.

Video con los Pasos básicos

Descomposición de baile

Se de una introducción

Baile

El usuario elige un tipo de

El usuario especifica su perfil

(Principiante,

Se accede

a la pantalla

David Mora A01202527Jazminne Barkshadt A00886338Daniel Ortíz A01204096Jorge López A01203064

Inicialmente el proyecto será realizado para abarcar un territorio local y asi poder manejar su expansión correctamente, esta expansión será exitosa si logramos implementar correctamente diversos métodos para contrarrestar las barreras culturales y/o nacionales, como la posibilidad de cambiar de idioma y la utilización correcta del lenguaje (evitar el lenguaje coloquial).

La página y la utilización de la multimedia será fácil de controlar y tendrá como propósito el evitar problemas de compatibilidad con diversos browsers y hotkeys (por ejemplo, para pausar la multimedia se utilizara la barra espaciadora).

La página estará diseñada para darle al usuario un control casi total sobre ella, evitando la frustración de este.

2. Proceso de DiseñoEl proceso del diseño se iniciara con la selección de los colores (bermellones, rojos,

azules y grises), los cuales poseerán consistencia dentro de la página, con esto se planea mantener una página enérgica pero no deslumbrante y molesta para la vista del usuario, aparte de que ayudara a mejorar la accesibilidad visual en caso de que algún usuario tenga diversas discapacidades como el daltonismo

La agrupación de diversos controles, widgets u objetos multimedia se encontrara bien regulada ante la idea de mantener una página “viva” la cual no carezca de seriedad pero que no sea soberbia y aburrida.

3. Ventanas y menúsDebido a que esta página no es una aplicación instalada dentro del sistema

operativo, carece de configuración de las ventanas y menús, cosa de la cual está encargado el browser. A pesar de esto, la página podrá contar con ciertos menús de configuración o de opciones, para los cuales se deberá de cuidar la sintaxis y con esto evitar posibles confusiones o errores por parte del usuario.A diferencia de ciertas paginas observadas en el Estado del Arte, la página de Dance & Go no utilizara ventanas desplegables o pop-ups para desplegar cierta información, ya sea pertinente a la página o que tan solo contenga publicidad, esto con tal de mantener un sistema limpio y fácil de usar.

4. Iconos y TipografíaLa presentación de iconos, botones e incluso fondos estará basado en la utilización

de formas vectoriales recatadas, para evitar la pérdida de atención por parte del usuario ante el texto desplegado o incluso la multimedia.

Por esto mismo dentro de la página se tiene la idea de evitar texturas, lo cual aparte de mejorar la accesibilidad, ayudara a mantener un sistema limpio, sin elementos pixeleados y de alta calidad.

David Mora A01202527Jazminne Barkshadt A00886338Daniel Ortíz A01204096Jorge López A01203064

Tanto los iconos y la tipografía utilizada dentro de la pagina de Dance & Go, estarán basados en la consistencia de la paleta de colores previamente descrita (bermellones, rojos, azules y grises).

5. Dispositivos de interacciónDentro de los dispositivos de interacción a emplear se encuentra la utilización de

teclado y del ratón. La utilización del ratón dentro de la página será para darle la mayor libertad posible al usuario para poder acceder a todos los posibles objetos, controles y multimedia creados, pero también se deberá codificar correctamente la utilización del teclado, esto con el objetivo de que los usuarios que carezcan de un ratón puedan acceder por igual a la página sin complicaciones.

6. Organización y distribuciónEl diseño de la página requiere de la ayuda de todos los integrantes del equipo,

por lo que diversas partes de esta pueden ser elaboradas en paralelo para respetar las fechas de entrega (esto con tal de que dichas partes no sean co-dependientes). Esto también ayudara a realizar cambios más rápidamente dentro del código en caso de que sea necesario resolver algún error o actualizar diversas partes de la pagina

7. Widgets y ControlesDentro de algunos posibles controles que puede tener la página, se encuentran las

opciones para interactuar con los objetos multimedia que se encuentran desplegados dentro de la página, ya sea para pausar, rebobinar, etc. Pero también se pueden diseñar diversos widgets que serán necesarios para modificar las configuraciones de la página.

8. Retroalimentación y manejo de erroresLa retroalimentación será diseñada principalmente ante los posibles cambios al

cursor, tales como “espera”, “cargando”, “utilizar”, etc. con el objetivo de evitarle ciertas confusiones al usuario durante la utilización de la página; mientras que el manejo de errores será dado ante el despliegue de los errores dados durante la utilización de la página en tal vez un pequeño dialogo, el cual ofrezca alguna solución si es un problema común que todavía no posee solución, el cual deberá generar un informe automático para que el diseñador/ programador pueda ocuparse de dicho problema e incluir alguna solución en la próxima actualización

Las ocho Reglas de Oro1. Esfuérzate por ser consistente

La consistencia será apreciable ante la utilización de una misma gama de colores, basada en la paleta (bermellones, rojos, azules y grises), dentro de la tipografía, botones e

David Mora A01202527Jazminne Barkshadt A00886338Daniel Ortíz A01204096Jorge López A01203064

iconos y la utilización de formas vectoriales recatadas para evitar tanto la perdida de atención por parte del usuario ante otros objetos y multimedia, como para mejorar la accesibilidad.

2. Busca la usabilidad universalLa usabilidad universal será obtenida ante el diseño de una página sin un mercado

centrado, o en otras palabras sin límites en cuanto al público que puede utilizarlo. Esto es gracias al diseño de una página web que tanto niños como personas de la tercera edad puedan utilizar sin dificultad alguna

3. Proporciona retroalimentaciónLa retroalimentación será desplegada tan solo para informarle al usuario que hay

otros procesos ejecutándose o sus posibles cursos de acción (hablando del cursor). Esto sera para evitar la obstrucción de texto u objetos multimedia dentro del sistema con alertas o mensajes innecesarios, al igual que ayudaran a que el usuario no se frustre con la interacción que tiene la pagina

4. Diseña diálogos que llevan a un finNo se tiene planeado el diseño de diálogos, pero en caso de que se requiera la

utilización de alguno (ya sea para manejar algunos errores como la ejecución de algún script), estos diálogos deben tener una razón en específico y deberán ayudar al usuario en la toma de ciertas decisiones que este puede no entender.

5. Es mejor prevenir erroresEn cuanto a la prevención de errores, se refiere a que la página debe ser diseñada

de una forma tan natural que el usuario no pueda cometer errores, y si esto sucede, el usuario debe de ser capaz de detener los procesos para evitar la pérdida de tiempo y de los recursos del usuario. Esto mejorara la respuesta por parte del usuario ante la página, debido a que esta no frustrara o incluso molestara al usuario.

6. Permitir deshacerEl permitir deshacer puede ser un problema, pues dentro de las páginas web que

se encuentran basadas en el despliegue de la información, esto tan solo podría ser utilizable a la horade requerir acceder a una página anterior (Back), pero en la sección de configuraciones, se podría permitir que los widgets recuperen sus valores iniciales

7. Otorgar el control al usuarioEl usuario debe de tener cierto control fluido sobre la página, para mejorar la

interacción entre ambos, es por esto que se deben de poder utilizar diversos controles por toda la página sin problemas, como por ejemplo, debido a que en la página se utilizaran

David Mora A01202527Jazminne Barkshadt A00886338Daniel Ortíz A01204096Jorge López A01203064

varios objetos multimedia como videos, el usuario debe poder pausar, rebobinar, adelantar, etc; dichos objetos.

8. Evitar la sobrecarga de la memoria del usuarioDebido a que esta página está diseñada para la enseñanza, esto puede crear una

sobrecarga de información en la memoria de cada usuario, es por esto que los métodos de enseñanza tendrán como idea la utilización de principios sencillos, los cuales se vuelvan tan naturales que el usuario no requiera utilizar memoria