prÁctica 3: diseÑo centrado en el usuario pedro rivero barrera gonzalo serrano espada

PRÁCTICA 3:PRÁCTICA 3: DISEÑO DISEÑO

CENTRADO EN EL CENTRADO EN EL USUARIOUSUARIO

Pedro Rivero BarreraPedro Rivero Barrera

Gonzalo Serrano EspadaGonzalo Serrano Espada

PÁGINA WEB DEPÁGINA WEB DEUN VIDEOCLUBUN VIDEOCLUB

INTRODUCCIÓN:INTRODUCCIÓN: Hemos creado una página web acerca Hemos creado una página web acerca

de un videoclub (Videoclub GOTHAM), de un videoclub (Videoclub GOTHAM), de tal forma que el usuario pueda de tal forma que el usuario pueda consultar el catálogo de películas consultar el catálogo de películas disponibles a través de distintos campos disponibles a través de distintos campos (título, edades, campos, novedades,…), (título, edades, campos, novedades,…), ver su sinopsis e incluso reservarlas sin ver su sinopsis e incluso reservarlas sin salir de casa, permitiendo así al usuario salir de casa, permitiendo así al usuario no salir de casa temprano para alquilar no salir de casa temprano para alquilar una película deseada.una película deseada.

PERFIL DE USUARIO AL QUE VA PERFIL DE USUARIO AL QUE VA DESTINADA LA APLICACIÓNDESTINADA LA APLICACIÓN

Esta web ha sido diseñada sabiendo Esta web ha sido diseñada sabiendo que su utilización está orientada que su utilización está orientada tanto a usuarios del videoclub como tanto a usuarios del videoclub como a futuros socios que posean a futuros socios que posean cualquier tipo de conocimiento cualquier tipo de conocimiento acerca de navegación en Internet, acerca de navegación en Internet, por lo cual se ha de ofrecer una por lo cual se ha de ofrecer una interfaz sencilla y fácilmente interfaz sencilla y fácilmente manejable al usuario.manejable al usuario.

PRINCIPALES PRINCIPALES CARACTERÍSTICASCARACTERÍSTICAS

Creemos indispensable que nuestra web Creemos indispensable que nuestra web disponga de los siguientes elementos de disponga de los siguientes elementos de diseño:diseño:

Primeramente, una Primeramente, una pantalla de iniciopantalla de inicio donde el usuario puede ir a las distintas donde el usuario puede ir a las distintas secciones (registro, acceso, ver catálogo, secciones (registro, acceso, ver catálogo, localización y contato), teniendo cada localización y contato), teniendo cada uno de los links un botón claramente uno de los links un botón claramente grandes y distinguibles que poseen un grandes y distinguibles que poseen un texto claro y un icono fácilmente texto claro y un icono fácilmente identificable con la acción a realizar.identificable con la acción a realizar.

PANTALLA DE SELECCIÓN PANTALLA DE SELECCIÓN DE USUARIODE USUARIO


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

PANTALLA DE REGISTRO PANTALLA DE REGISTRO DE UN USUARIODE UN USUARIO

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

PANTALLA DE REGISTRO PANTALLA DE REGISTRO DE UN USUARIODE UN USUARIO

PANTALLA DE ACCESO PANTALLA DE ACCESO DE UN SOCIODE UN SOCIO

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

PANTALLA DE ACCESO DEPANTALLA DE ACCESO DEUN SOCIOUN SOCIO

PANTALLA DE VERPANTALLA DE VEREL CATÁLOGOEL CATÁLOGO

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

PANTALLA DE VERPANTALLA DE VEREL CATÁLOGOEL CATÁLOGO

PANTALLA DE MAPAPANTALLA DE MAPA

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

PANTALLA DE MAPAPANTALLA DE MAPA

PANTALLA DEPANTALLA DECONTACTOCONTACTO

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

PANTALLA DEPANTALLA DECONTACTOCONTACTO

HABILIDADES, CONTEXTO HABILIDADES, CONTEXTO Y URGENCIA DEL SOCIOY URGENCIA DEL SOCIO

El El contextocontexto en el que se mueve el cliente en el que se mueve el cliente no es importante para nuestra web.no es importante para nuestra web.

Las Las tareastareas que va a realizar el cliente que va a realizar el cliente son tan simples que no requiere son tan simples que no requiere formación.formación.

Las Las consecuencias de un errorconsecuencias de un error en en nuestro ámbito no son graves, ya que nuestro ámbito no son graves, ya que toda las acciones realizadas carecen de toda las acciones realizadas carecen de importancia y pueden deshacerse en las importancia y pueden deshacerse en las opciones de la cuenta del usuario o opciones de la cuenta del usuario o desde el videoclub.desde el videoclub.

PROGRAMA DE PROGRAMA DE ADMINISTRACIÓNADMINISTRACIÓN

INTRODUCCIÓN:INTRODUCCIÓN:

Hemos creado un programa de Hemos creado un programa de administración para que los administración para que los empleados del videoclub puedan empleados del videoclub puedan manejar las tareas que se llevan a manejar las tareas que se llevan a cabo allí (administración de cabo allí (administración de usuarios, bases de datos, facturación usuarios, bases de datos, facturación y promociones).y promociones).

PERFIL DE USUARIO AL QUE VA PERFIL DE USUARIO AL QUE VA DESTINADA LA APLICACIÓNDESTINADA LA APLICACIÓN

Este programa ha sido diseñado de Este programa ha sido diseñado de forma similar a la página web, forma similar a la página web, sabiendo que su utilización está sabiendo que su utilización está orientada a los empleados del orientada a los empleados del videoclub, que no requieren videoclub, que no requieren formación alguna, por lo cual se ha formación alguna, por lo cual se ha de ofrecer una interfaz sencilla y de ofrecer una interfaz sencilla y fácilmente manejable al usuario.fácilmente manejable al usuario.


Creemos indispensable que nuestro Creemos indispensable que nuestro programa disponga de los siguientes programa disponga de los siguientes elementos de diseño:elementos de diseño:

Primeramente, una Primeramente, una pantalla de iniciopantalla de inicio donde el usuario puede ir a las distintas donde el usuario puede ir a las distintas secciones (modificar, borrar, ver secciones (modificar, borrar, ver películas, facturación y buscar), teniendo películas, facturación y buscar), teniendo cada uno de los links un botón claramente cada uno de los links un botón claramente grande y distinguible que poseen un texto grande y distinguible que poseen un texto claro y un icono fácilmente identificable claro y un icono fácilmente identificable con la acción a realizar.con la acción a realizar.

PANTALLA DE PANTALLA DE ADMINISTRACIÓNADMINISTRACIÓN


Los submenús correspondientes Los submenús correspondientes también muestran una interfaz también muestran una interfaz gráfica y sencilla con los campos gráfica y sencilla con los campos necesarios para su utilización.necesarios para su utilización.

Mostramos a continuación cada uno Mostramos a continuación cada uno de ellos por orden del menú principal, de ellos por orden del menú principal, empezando por la modificación de empezando por la modificación de socios, siguiendo por el borrado y socios, siguiendo por el borrado y acabando por la búsqueda de éstos.acabando por la búsqueda de éstos.

PANTALLA DEPANTALLA DEMODIFICACIÓNMODIFICACIÓN

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

PANTALLA DE PANTALLA DE MODIFICACIÓNMODIFICACIÓN

PANTALLA DEPANTALLA DEELIMINACIÓNELIMINACIÓN

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

PANTALLA DEPANTALLA DEELIMINACIÓNELIMINACIÓN

PANTALLA DE PANTALLA DE ELIMINACIÓNELIMINACIÓN

PANTALLA DEPANTALLA DEPELÍCULAPELÍCULA

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

PANTALLA DEPANTALLA DEPELÍCULAPELÍCULA

PANTALLA DEPANTALLA DERESERVASRESERVAS

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

PANTALLA DEPANTALLA DERESERVASRESERVAS

PANTALLA DEPANTALLA DEBÚSQUEDABÚSQUEDA

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

PANTALLA DE PANTALLA DE BÚSQUEDABÚSQUEDA

HABILIDADES, CONTEXTO HABILIDADES, CONTEXTO Y URGENCIA DEL USUARIOY URGENCIA DEL USUARIO El El contextocontexto en el que se mueve el en el que se mueve el

usuario no es importante para nuestro usuario no es importante para nuestro programa.programa.

Las Las tareastareas que va a realizar el que va a realizar el dependiente con la interfaz gráfica son dependiente con la interfaz gráfica son sencillas.sencillas.

Las Las consecuencias de un errorconsecuencias de un error esta vez esta vez si tienen repercusión, ya que por un si tienen repercusión, ya que por un mal uso se podría perder información.mal uso se podría perder información.

ACCESO A LA WEBACCESO A LA WEB

httphttp://://serdisserdis.dis..dis.ulpgculpgc.es/~a013905/DIH/.es/~a013905/DIH/webweb

Realizado por:Realizado por: Pedro Rivero BarreraPedro Rivero Barrera Gonzalo Serrano EspadaGonzalo Serrano Espada

prÁctica 3: diseÑo centrado en el usuario pedro rivero barrera gonzalo serrano espada

Documents