Interfaces Usuario

Práctica 3

Martín Portugal González

Alba Vidales Casado
Aitana Ortiz Guiño
Amina Errami Maslaoui
CONOCIENDO
AL USUARIO
3
4
5
CONOCIENDO EL
ENTORNO
Grosso Napoletano
Características:

- Desde la pantalla inicial puedes acceder a

todas las opciones, predominando el
reservar y hacer un pedido
- Video como página principal
- Entre apartados de la páginas web usa
transiciones

7
Grosso Napoletano
Características:

- Como menú una barra superior con acceso a todas los apartados de la página web, con el nombre del
restaurante como elemento central
- A la izquierda son enlaces con información y a la derecha enlaces a funcionalidades como la reserva o
hacer el pedido.

- Posteriormente cambia de color y se fija en la parte superior

8
Grosso Napoletano
Características:

- Cuenta con un pie de página que solo aparece al final de la página web
- También cuenta con un enlace a WhatsApp estático en la parte de la derecha de la página web, al
hacer click sobre él se despliega un cuadro de información

9
Grosso Napoletano

Funcionalidades. Reserva de mesas:

- Te permite introducir la ubicación, busca el

restaurante más cercano y muestra su
disponibilidad horaria.
- También permite escoger si el
establecimiento ofrece opciones sin gluten.
- Te permite introducir la ubicación, busca el
restaurante más cercano y muestra su
disponibilidad horaria.
- También permite escoger si el
establecimiento ofrece opciones sin gluten.
10
Grosso Napoletano
Funcionalidades. Carta:

- La carta está implementada en la

página web y al final del apartado
puedes descargarlo como pdf .
- Cuenta con un apartado para poder
hacer la reserva, el botón “buscar
mesa” hará la búsqueda y te llevara a
las opciones disponibles siguiendo tus
preferencias.

11
Grosso Napoletano

Funcionalidades. Pedido a domicilio

- Verifica si la dirección está dentro de su

zona de reparto y pregunta la carta con
o sin gluten.
- No hace falta registrarse para poder
hacer un pedido, dentro del proceso de
compra se pedirán datos sobre el
usuario para poder entregar el pedido.

12
 Grosso Napoletano

Funcionalidades. Pedido a domicilio

- Cuenta con una carta donde

puedes elegir qué platos y en
qué cantidad.
- En la cesta aparecen los
artículos seleccionados así
como el desglose del precio, un
apartado de propinas y otro
para códigos promocionales.

13
Fresh Mexican Food, Wahaca
Características:
- Interfaz clara y sencilla,
- Inicialmente aparece la carta
- Navegación utilizando la barra superior y el menú hamburguesa

14
 Fresh Mexican Food, Wahaca

Funcionalidades

Variedad en la selección de cartas:

- Menú con calorías

- Menú para niños
- Información de alergias.
- Menú Gluten Free
- Menú para llevar
- Menú veganos

15
 Fresh Mexican Food, Wahaca

Funcionalidades

Posibilidad de reserva a través de la página

16
 Fresh Mexican Food, Wahaca

Funcionalidades

Realizar pedidos a través de la página:

- Utilizando directamente la página

- A través de la aplicación Deliveroo

17
 Fresh Mexican Food, Wahaca

Funcionalidades

Localización de los restaurantes

Funcionalidades
Recetas utilizadas en el restaurante

18
Butarque In&Out

Características generales:

- Desde la pantalla inicial

puedes acceder a todas las
opciones, predominando el
reservar y la carta del
restaurante.
- Disponemos de una
navegación en barra superior.
- Y un pie de página con
localización, teléfono de
contacto y mail, destacar que
lo encontramos al llegar al
final de la página.

19
 Butarque In&Out

Características:

- Como menú una barra superior con acceso a todas los apartados de la página web, además del número
de contacto (con el horario de disponibilidad) y redes sociales.
- También observamos la implementación de una “cesta de pedidos”, junto con un registro de usuario y
un buscador.

20
Butarque In&Out

Funcionalidades:

- Al igual que para nuestra práctica 2 la página tiene

implementados un “carrito de compras” y una opción de
“registro de usuario” que se muestra a modo de barra lateral
cuando haces click en el icono.
- Destacamos como interesante la opción de búsqueda de
productos.
21
Butarque In&Out

Funcionalidades:

- El botón de “RESERVAS” nos

lleva a una nueva página en las
que mediante una barra de
“migas de pan” podemos
observar el proceso de reserva.
- Además de un seleccionador
que al clicar despliega el
número de personas que puede
tener la reserva.
- Y finalmente un calendario con
los días disponibles y horarios.
22
Butarque In&Out

Funcionalidades:

- A través barra de “migas de

pan” podemos observar el
proceso de reserva. En este nos
irán pidiendo información
personal y la irán guardando a
lo largo del proceso.
- Con la confirmación de reserva
se envía un correo al usuario
con la opción de cancelación.

23
 Butarque In&Out

Características:

- El botón de “LA CARTA” nos lleva a una

nueva página que muestra una nueva
barra superior de opciones, que
mostrará todo lo que el restaurante
ofrece.
- Después se nos muestra todas las
opciones del restaurante en cajas a la
derecha, y a la izquierda las categorías,
una opción de filtrado de precio con un
barra de límites y ofertas. 24
Butarque In&Out

Características:

- Para el despliegue en modo dispositivo móvil

observamos como la barra superior para a ser
una barra lateral que se muestra tras
presionar el icono de “MENÚ”.
- En esta barra lateral tendremos todas las
opciones, antes en la barra superior, ahora
colocadas de forma vertical junto con el
buscador.
- El pie de página con la misma información de
antes pero en vertical. 25
SÍNTESIS DE
USUARIOS Y
ENTORNO
Objetivo Principal
PERSONA 1 - GROSSO
NAPOLETANO
- Página atractiva y dinámica
- Funcionalidades definidas de
forma clara:
- Reservar rápidamente
- Facilidad a la hora de
hacer pedidos
Le llamará la atención la página
debido a su atractivo, será capaz de
utilizarla con gran facilidad y
disfrutará de la experiencia.
PERSONA 2 - BUTARQUE IN&OUT
- Página muy visual y dinámica
- Diseño muy intuitivo que hace
que sea muy fácil de utilizar
- Numerosas funcionalidades
representadas de forma clara
- Atractiva
El perfil podrá disfrutar de los
mensajes de ayuda, la intuitividad de
la página y lo visual que resulta.
PERSONA 3 - WAHACA
- Sencillez en su uso
- Diseño muy intuitivo
- Accesible para todos
- Información específica
para cada persona que
pueda utilizar la página
Este perfil podrá apreciar la sencillez
de la página, y tendrá en cuenta su
gran accesibilidad.
27
Principales Funcionalidades

- Pedidos a recoger en el restaurante.

- Carrito donde se añadirán los platos que se
quieren adquirir,
- Reserva de mesa.
- Carta en la cual se podrán consultar los diferentes
platos que nuestro restaurante ofrecerá.
- Información relativa a cada plato a través de una
ventana emergente que contendrá los alérgenos y
las calorías de cada plato.
- Consulta de la ubicación de nuestro restaurante
mediante un mapa, con el cual se podrá
interactuar.
- Búsqueda de productos.
- Registro de usuario e inicio de sesión.
- Contacto con el restaurante.

28
PATRONES, PROTOTIPOS Y
HEURÍSTICAS
A7 (Sitio Web de Empresa)

Nos indica que el tamaño de los distintos

apartados debe ir en consonancia con la
cantidad de usuarios interesadas usando
el 95% del espacio y de los enlaces de la
parte superior a grupos de visitantes que
suponen el 95% de los usuarios y el 5%
restante para los demás usuarios.

Nos hemos basado en el patrón C1 para

hacer una página web principal que sea
sencilla de usar y cohesionada.

30
 A1 (Comercio Online)

Nos indica que para hacer una página

web que soporte el comercio online, debe
de tener elección de productos en un
único sitio, para no confundir al usuario.

Además debe contener información sobre

los productos, en nuestro caso alérgenos y
valores nutricionales, y confirmación al
final, para asegurar el estado del pedido.

31
 B8 (Tipos de páginas)

Diseño consistente en los diferentes tipos

de página, de manera que no parezcan
webs diferentes al navegar

Uso de una plantilla global que con las

principales funcionalidades. Esta se va
adaptando a las diferentes páginas que
encontramos en la web

32
E1 (Marca de la empresa)

La marca de la empresa no se representa

solo por el logo o el nombre, también se
puede observar en las distintas páginas
web siendo constante con el estilo o
reutilizando imágenes.

Todo ello para que el usuario asocie

distintos rasgos al usar las páginas web y
se sienta más seguro y confiado al hacerlo.

33
 J1 (Módulo de Búsqueda)

Nuestra página dispone de múltiples formas de

navegar:
- Barra de búsqueda
- Barra superior

34
 Coincidencias entre el sistema y el mundo
real
- La lupa ( ):

Representación en el mundo de real de la

búsqueda de objetos.

- La cesta de la compra ( ):

Representación en el mundo real de una cesta

que contiene los diferentes productos que
compras.

35
 Control del usuario y libertad

Posibilidad de retroceder en acciones:

- Botones de retroceso.
- Barra de migas de pan.
- Barra superior para navegar en
todo momento.

36
 Flexibilidad y eficiencia de uso
Con el objetivo de mejorar la experiencia del usuario
en nuestra página web, hemos implementado un
modo oscuro.
Puedes activarlo de dos maneras:
- Haciendo click en el ícono de "la luna"
- ubicado en el pie de página.
- Utilizando el atajo de teclado "D" o "d". Esta
función está diseñada para reducir la fatiga
visual y mejorar la legibilidad en ambientes
con poca luz.

37
 Ayudar a reconocer, diagnosticar y
recuperar la situación cuando hay un error

Ayudaremos a nuestro usuarios con mensajes de

error y sugerencias, como por ejemplo:

- Para la identificación del error, se muestran

etiquetas individuales sobre el campo con
datos incorrectos.
- Nuestros usuarios dispondrán de una barra
desplegable que contendrá los formatos de
correo aceptados por nuestra página web.

38
 Ayuda y documentación

Incorporaremos dos videos de nuestro canal de YouTube, donde:

- Video que ayudará al usuario a hacer una reserva.

- Video que ayudará al usuario a crear su cuenta e iniciar sesión.

39
 Escenario de uso

Para mostrar nuestro prototipo hemos pensado en un escenario de uso para reservar una mesa en el restaurante.

Al entrar en la página web, nos dirigiremos al apartado de reserva. Una vez aquí elegiremos el número de personas y el día en un
calendario, eso hará que el sistema proporcione las horas disponibles.

Una vez hecho esto se piden datos personales como el nombre, el correo electrónico, el código postal, el teléfono o comentarios para
completar la reserva.

Por último, pedirá que indiquemos el número de adultos y de niños así como que aceptemos las políticas de privacidad y de datos
personales, llevándonos a finalizar la reserva y mostrándonos un mensaje de confirmación.

40
Prototipado para
ordenador

41
Caso de uso para reservar mesa

42
Caso de uso para reservar mesa

43
44
45
46
Prototipado para tablet

47
48
49
50
51
52
53
Prototipado para móvil

54
55
56
57
58
59
60
Enlace al prototipado

PROTOTIPO INTERFACES – Figma

61