UF 6.1 Diseño de interfaz de usuario. Módulo 6

Transcripción

1 Módulo 6

2 fases del proyecto multimedia anteproyecto o preproducción > objetivos, sinopsis > guión hipertexual > guión gráfico > diseño de GUI produción > desarrollo de la aplicación > elaborar los contenidos de la aplicación(vídeos, textos, animaciones, sonido,...) difusión > publicación on-line, testeo y mantenimiento

3 fases del proyecto multimedia anteproyecto o preproducción: > análisis > diseño > elaboración de un prototipo > evaluación

4 fases del proyecto multimedia

5 fases del proyecto multimedia: análisis análisis En esta etapa se reúne la siguiente información: Los objetivos del proyecto Las características de los usuarios objetivos (target). Los requisitos técnicos del desarrollo. Una herramienta muy útil para analizar las características de los usuarios es el modelaje del usuario

6 fases del proyecto multimedia: análisis análisis

7 fases del proyecto multimedia: análisis el briefing documento que elaboramos para que el cliente nos conteste y así obtener información para el proyecto.

8 fases del proyecto multimedia: análisis análisis.1. Quin és el contingut de l'aplicació?.2. A quin tipus d'usuari va dirigida?.3. Quin és el suport de l'aplicació?.4. Quins determinants aporten els altres membres de l'equip de producció?.5. Quins són els requisits definits pel client?.6. Quins són els recursos humans disponibles?.7. Quin és el temps de vida del producte?.8. S'han d'actualitzar els continguts?

9 fases del proyecto multimedia: análisis Modelaje del usuario se reune información sobre los usuarios potenciales definidos en la etapa de análisis. se definen los perfiles de usuario teniendo en cuenta: 1. sus necesidades 2. su experiencia o conocimientos 3. sus condiciones de acceso a la aplicación

10 fases del proyecto multimedia: modelaje Modelaje del usuario > Si la audencia es heterogénea, se pueden crear arquetipos o personas con una identidad concreta. > Sirve para definir las características de los posibles usuarios. > Se crean unas fichas con una fotografía y los datos de la persona (ficticios).

11 fases del proyecto multimedia: modelaje

12 fases del proyecto multimedia: modelaje

13 fases del proyecto multimedia: modelaje

14 fases del proyecto multimedia: modelaje

15 fases del proyecto multimedia: modelaje La ficha de la persona debe incluir: Características fundamentales 1. Perfil geográfico. Lugar de residencia i de trabajo, i nivel de vida. 2. Perfil demográfico. Edad, género, familia, ingresos, ocupación, educación, etc. 3. Perfil psicosocial. Clase social, estilo de vida, aficiones, características personales. Relación entre la persona i el producto. La persona, es un cliente, un empleado o un socio? Se puede distinguir entre el desarrollo de una intranet o extranet, o en la definición de diferentes perfiles de usuario. Cuál es el nivel de relación entre la persona y la aplicación? Se puede tratar de un usuario ocasional o un usuario frecuente.el diseñador definirá qué tipo de relación espera que la persona mantenga con el producto.

16 fases del proyecto multimedia: modelaje Escenarios El usuario necesita conocimientos especiales? Cuando va a utilizar la aplicación, en que momento del día, desde que lugar, mediante qué dispositivo. Definir la interacción: será continua, con que frecuencia, será compleja. Qué tipo de experiencia espera de la interacción? Quiere vivir una aventura, prefiere sentir libertad, seguridad, confianza..

17

18 fases del proyecto multimedia: modelaje

19

20 fases del proyecto multimedia: diseño Diseño según las características definidas en el proceso de análisis. Fases de la etapa de diseño: > Diseño conceptual > Diseño de contenidos > Diseño visual

21 fases del proyecto multimedia: diseño Diseño conceptual: definir la arquitectura de la información de la aplicación > esquema de la organización de los contenidos y la > navegación (nodos y enlaces) > determina las relaciones entre apartados y las transiciones entre pantallas o páginas diagrama de hipertexto / mapa web / guión multimedia

22 fases del proyecto multimedia: diseño Diseño conceptual: card sorting

23 fases del proyecto multimedia: diseño

24 fases del proyecto multimedia: diseño

25 fases del proyecto multimedia: diseño Diseño conceptual: wireframe el wireframe es un esquema que nos sirve para ubicar los elementos de la interfaz (contenidos, elementos de navegación..)

26

27

28

29 fases del proyecto multimedia:diseño

30

31

32

33 fases del proyecto multimedia: diseño Diseño conceptual: storyboard si el producto multimedia incluye animaciones, transiciones entre pantallas (videojuegos) se genera el storyboard

34 fases del proyecto multimedia: diseño

35 documentacion briefing fichas de personas y escenarios cardsorting diagrama hipertextual wireframe

36 fases del proyecto multimedia: diseño Diseño visual Fases: 1. análisis del libro de estilo (si lo hay) 2. diseño de retícula 3. elegir la gama cromática. Si hay libro de estilo se seguirá sus criterios. 4. elección de la tipografía. Máximo dos tipos de letra diferentes. 5. Generación de los elementos del diseño.

37

38 fases del proyecto multimedia: diseño Diseño visual se definen las características gráficas de la interfaz tenemos en cuenta: los datos de la fase de análisis, modelaje, y el diseño conceptual (la estructura de los contenidos)

39 fases del proyecto multimedia:evaluacion Evaluación de la usabilidad Es la fase mas importante del proceso de diseño centrado en el usuario Se testea sobre usuarios reales

40