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

Presentación del tema: "PRÁCTICA 3: DISEÑO CENTRADO EN EL USUARIO Pedro Rivero Barrera Gonzalo Serrano Espada."— Transcripción de la presentación:

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

2 PÁGINA WEB DE UN VIDEOCLUB INTRODUCCIÓN: 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. 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. 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: 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. 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. 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. 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

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). 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 DE UN SOCIO

12

13 PANTALLA DE VER EL 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. 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 VER EL CATÁLOGO

15

16

17

18

19

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. 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

23 PANTALLA DE CONTACTO 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. 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 DE CONTACTO

25 HABILIDADES, CONTEXTO Y URGENCIA DEL SOCIO El contexto en el que se mueve el cliente no es importante para nuestra web. 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 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. 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: 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). 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. 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: 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. 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. 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. 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 DE MODIFICACIÓ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. 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

34

35 PANTALLA DE ELIMINACIÓ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. 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 DE ELIMINACIÓN

37

38 PANTALLA DE PELÍ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. 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 DE PELÍCULA

40

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

42 PANTALLA DE RESERVAS

43 PANTALLA DE BÚ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. 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

46 HABILIDADES, CONTEXTO Y URGENCIA DEL USUARIO El contexto en el que se mueve el usuario no es importante para nuestro programa. 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 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. 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: Realizado por: Pedro Rivero Barrera Pedro Rivero Barrera Gonzalo Serrano Espada Gonzalo Serrano Espada