PRÁCTICA 3: DISEÑO
CENTRADO EN EL
USUARIO
Pedro Rivero Barrera
Gonzalo Serrano Espada
PÁGINA WEB DE
UN 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.
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.
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.
PANTALLA DE SELECCIÓN DE
USUARIO
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.
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.
PANTALLA DE REGISTRO DE
UN USUARIO
PANTALLA DE REGISTRO DE
UN USUARIO
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).
PANTALLA DE ACCESO DE
UN SOCIO
PANTALLA DE ACCESO DE
UN SOCIO
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.
PANTALLA DE VER
EL CATÁLOGO
PANTALLA DE VER
EL CATÁLOGO
PANTALLA DE VER
EL CATÁLOGO
PANTALLA DE VER
EL CATÁLOGO
PANTALLA DE VER
EL CATÁLOGO
PANTALLA DE VER
EL CATÁLOGO
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.
PANTALLA DE MAPA
PANTALLA DE MAPA
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.
PANTALLA DE
CONTACTO
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.
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).
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.
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.
PANTALLA DE
ADMINISTRACIÓN
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.
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.
PANTALLA DE
MODIFICACIÓN
PANTALLA DE
MODIFICACIÓN
PANTALLA DE
MODIFICACIÓN
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.
PANTALLA DE
ELIMINACIÓN
PANTALLA DE
ELIMINACIÓN
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.
PANTALLA DE
PELÍCULA
PANTALLA DE
PELÍCULA
PANTALLA DE
RESERVAS

Esta zona se compone una única pantalla en la
que aparece el listado de las películas reservadas
actuales.
PANTALLA DE
RESERVAS
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.
PANTALLA DE
BÚSQUEDA
PANTALLA DE
BÚSQUEDA
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.
ACCESO A LA WEB
http://serdis.dis.ulpgc.es/~a013905/DIH/web
Realizado por:
 Pedro Rivero Barrera
 Gonzalo Serrano Espada