PRÁCTICA 3: DISEÑO CENTRADO EN EL USUARIO

1. PRÁCTICA 3:DISEÑO CENTRADO EN EL USUARIO Pedro Rivero Barrera Gonzalo Serrano Espada

2. PÁGINA WEB DEUN VIDEOCLUB • INTRODUCCIÓN: Hemos creado una página web acerca de un videoclub (Videoclub GOTHAM), de tal forma que el usuario pueda consultar el catálogo de películas disponibles a través de distintos campos (título, edades, campos, novedades,…), ver su sinopsis e incluso reservarlas sin salir de casa, permitiendo así al usuario no salir de casa temprano para alquilar una película deseada.

3. PERFIL DE USUARIO AL QUE VA DESTINADA LA APLICACIÓN • Esta web ha sido diseñada sabiendo que su utilización está orientada tanto a usuarios del videoclub como a futuros socios que posean cualquier tipo de conocimiento acerca de navegación en Internet, por lo cual se ha de ofrecer una interfaz sencilla y fácilmente manejable al usuario.

4. PRINCIPALES CARACTERÍSTICAS • Creemos indispensable que nuestra web disponga de los siguientes elementos de diseño: Primeramente, una pantalla de inicio donde el usuario puede ir a las distintas secciones (registro, acceso, ver catálogo, localización y contato), teniendo cada uno de los links un botón claramente grandes y distinguibles que poseen un texto claro y un icono fácilmente identificable con la acción a realizar.

5. PANTALLA DE SELECCIÓN DE USUARIO

6. PRINCIPALES CARACTERÍSTICAS • Luego, hemos creado distintas pantallas según la selección que haga el usuario, siguiendo todas ellas la estética y la forma de la pantalla principal. Iremos examinando cada pantalla según el orden de la pantalla principal, es decir, empezando por el registro, siguiendo por el acceso y así hasta llegar a la pantalla de contacto.

7. PANTALLA DE REGISTRO DE UN USUARIO • Esta zona se compone de dos partes, una primera con 8 campos (a rellenar por el usuario con sus datos) y 2 botones (uno para confirmar el registro y otra para vaciar los campos). La otra parte se compone simplemente de una pantalla de confirmación de registro del usuario, con un link a la pantalla principal.

8. PANTALLA DE REGISTRO DE UN USUARIO

9. PANTALLA DE REGISTRO DE UN USUARIO

10. PANTALLA DE ACCESO DE UN SOCIO • Esta zona también se compone de dos partes, una primera con 3 campos (Nº de socio, correo electrónico y contraseña) y 2 botones (uno para validar y otro para borrar los campos escritos). La otra parte se compone de un nuevo menú en el que el usuario puede realizar distintas tareas con su cuenta (modificar datos, cambiar preferencias, mirar las películas alquiladas, ver sus facturas, promociones de las que dispone y borrar su cuenta).

11. PANTALLA DE ACCESO DEUN SOCIO

12. PANTALLA DE ACCESO DEUN SOCIO

13. PANTALLA DE VEREL CATÁLOGO • Esta zona se compone de tantas zonas como el usuario quiera, ya que depende de si utiliza el buscador o el listado por campos, de si decide ver la sinopsis y si finalmente decide alquilarla aparte de depender de su disponibilidad o no. Si finalmente el socio decide alquilarla, se le dará un mensaje explicativo con las indicaciones a realizar para su adquisición.

14. PANTALLA DE VEREL CATÁLOGO

15. PANTALLA DE VEREL CATÁLOGO

16. PANTALLA DE VEREL CATÁLOGO

17. PANTALLA DE VEREL CATÁLOGO

18. PANTALLA DE VEREL CATÁLOGO

19. PANTALLA DE VEREL CATÁLOGO

20. PANTALLA DE MAPA • Es una pantalla sencilla en la que el usuario puede informarse de la localización, teléfono y FAX del videoclub, teniendo además un link a un mapa para ayudar al usuario a encontrar la calle.

21. PANTALLA DE MAPA

22. PANTALLA DE MAPA

23. PANTALLA DECONTACTO • Es otra pantalla simple en la que el usuario puede obtener la dirección de correo electrónico del videoclub para ponerse en contacto o bien ponerse en contacto directamente mediante un sencillo formulario que consta de 2 campos (Nº de socio y mensaje) y 1 botón para realizar el envío.

24. PANTALLA DECONTACTO

25. HABILIDADES, CONTEXTO Y URGENCIA DEL SOCIO • El contexto en el que se mueve el cliente no es importante para nuestra web. • Las tareas que va a realizar el cliente son tan simples que no requiere formación. • Las consecuencias de un error en nuestro ámbito no son graves, ya que toda las acciones realizadas carecen de importancia y pueden deshacerse en las opciones de la cuenta del usuario o desde el videoclub.

26. PROGRAMA DE ADMINISTRACIÓN • INTRODUCCIÓN: Hemos creado un programa de administración para que los empleados del videoclub puedan manejar las tareas que se llevan a cabo allí (administración de usuarios, bases de datos, facturación y promociones).

27. PERFIL DE USUARIO AL QUE VA DESTINADA LA APLICACIÓN • Este programa ha sido diseñado de forma similar a la página web, sabiendo que su utilización está orientada a los empleados del videoclub, que no requieren formación alguna, por lo cual se ha de ofrecer una interfaz sencilla y fácilmente manejable al usuario.

28. PRINCIPALES CARACTERÍSTICAS • Creemos indispensable que nuestro programa disponga de los siguientes elementos de diseño: Primeramente, una pantalla de inicio donde el usuario puede ir a las distintas secciones (modificar, borrar, ver películas, facturación y buscar), teniendo cada uno de los links un botón claramente grande y distinguible que poseen un texto claro y un icono fácilmente identificable con la acción a realizar.

29. PANTALLA DE ADMINISTRACIÓN

30. PRINCIPALES CARACTERÍSTICAS • Los submenús correspondientes también muestran una interfaz gráfica y sencilla con los campos necesarios para su utilización. Mostramos a continuación cada uno de ellos por orden del menú principal, empezando por la modificación de socios, siguiendo por el borrado y acabando por la búsqueda de éstos.

31. PANTALLA DEMODIFICACIÓN • Esta zona se compone de tres partes, una primera con 1 campos que pide el nº de socio. A continuación, se muestra otra pantalla con 8 campos (a rellenar por el usuario con los datos) y 2 botones (uno para confirmar el registro y otra para vaciar los campos). Finalmente se muestra una pantalla de modificación del usuario, con un link a la pantalla principal.

32. PANTALLA DE MODIFICACIÓN

33. PANTALLA DE MODIFICACIÓN

34. PANTALLA DE MODIFICACIÓN

35. PANTALLA DEELIMINACIÓN • Esta zona se compone dos pantallas. La primera en la que se pide el número de socio a eliminar y una segunda confirmando la eliminación del socio.

36. PANTALLA DEELIMINACIÓN

37. PANTALLA DE ELIMINACIÓN

38. PANTALLA DEPELÍCULA • Esta zona se compone dos pantallas. La primera en la que se piden distintos datos de la película y otra que nos devuelve la correcta resolución de la adición.

39. PANTALLA DEPELÍCULA

40. PANTALLA DEPELÍCULA

41. PANTALLA DERESERVAS • Esta zona se compone una única pantalla en la que aparece el listado de las películas reservadas actuales.

42. PANTALLA DERESERVAS

43. PANTALLA DEBÚSQUEDA • Esta zona se compone dos pantallas. La primera en la que se piden distintos datos (nombre y apellidos, teléfono y DNI) para la búsqueda del socio y otra que nos devuelve el nombre y número de socio.

44. PANTALLA DE BÚSQUEDA

45. PANTALLA DE BÚSQUEDA

46. HABILIDADES, CONTEXTO Y URGENCIA DEL USUARIO • El contexto en el que se mueve el usuario no es importante para nuestro programa. • Las tareas que va a realizar el dependiente con la interfaz gráfica son sencillas. • Las consecuencias de un error esta vez si tienen repercusión, ya que por un mal uso se podría perder información.

47. ACCESO A LA WEB http://serdis.dis.ulpgc.es/~a013905/DIH/web Realizado por: • Pedro Rivero Barrera • Gonzalo Serrano Espada