Postgrado en Usabilidad, Diseño de Interacción y UX.

Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

Enunciados U114. Tutorial de Diseño de interfaces y móviles

El ejercicio consta de 13 preguntas: asegúrate de contestarlas todas. Antes de contestar la primera

pregunta, proporciona la siguiente información:
• Nombre del sistema operativo instalado en el teléfono que vas a utilizar para el ejercicio (por
ejemplo, Android, iOS, etc).
• Versión del sistema operativo (esta información está normalmente disponible en las
preferencias del teléfono).

→ El sistema operativo del teléfono que voy a utilizar es iOS. La versión es la última actulizada
12.3.1 en un iphone 7.

PREGUNTA 1.
Identifica las pantallas de contenido de la aplicación de email de tu smartphone , así como su
estructura jerárquica, y crea tu propia versión de la figura 2. Por supuesto, toda aplicación te permite
atravesar el árbol jerárquico en todas direcciones: de arriba hacia abajo (de nodos padre a nodos
hijo), de abajo hacia arriba (de nodos hijo a nodos padre), y en paralelo (entre nodos hermanos). La
forma particular que toma el mecanismo que nos permite atravesar el árbol jerárquico de una
aplicación se llama navegación .

→ La imagen 1, muestra las pantallas de contenido de la aplicación de email de iOS, y su estructura

jerarquíca. Las pantallas son:
1. Mailbox. En esta pantalla puedes seleccionar la cuenta de correo que se desea.
2. Inbox. Se muestra los mails de la cuenta seleccionada previamente.
3. Mail recibido.
4. Pantalla de “responder” al mail anterior.

En este link https://imgur.com/UTnmdgF se puede ver la imagen ampliada.

1
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

2
Imagen 1: La navegación en la aplicación de email de iPhone.
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 2.
Duplica la estructura jerárquica que creaste en la pregunta 1, y dibuja la navegación de tu aplicación
de email, creando tu propia versión de la figura 3. ¿Qué tipo de “libertades” se toma tu navegación
con la estructura del árbol jerárquico?
Hasta ahora nos hemos ocupado del contenido de la aplicación, pero no podemos olvidarnos de
sus acciones . Las acciones viven dentro de las pantallas de contenido , con frecuencia
representadas por botones o agrupadas en menús. En Sailfish OS, las acciones generalmente están
dentro de un menú que está escondido en la parte superior de la pantalla. Para revelar el contenido
del menú, debes “tirar” del contenido de la pantalla hacia abajo, por eso lo llaman el “pulley menu”.

→ La imagen 2, muestra la jerarquía de arriba hacia abajo y de abajo hacia arriba para al aplicación
de email del sistema operativo iOS. En estas pantallas de contenido la navegación no existe en
paralelo. Las pantallas que se muestran en forma de jerarquía vertical son las siguientes:
• Cuentas de correo electrónico. En este ejemplo sólo hay una cuenta que se muestra como
“inbox” e indica el número de mails que se tienen en la bandeja de entrada.
• Bandeja de entrada de la cuenta seleccionada donde se muestran todos los mails recibidos
con la información de remitente, asunto, dí ay hora.
• El contenido de un correo seleccionado previamente de la bandeja de entrada. Se muesta el
remitente, el asunto, día y hora, y el mensaje. ontenido de “responder” al mensaje anterior.
Indica el destinatario y el asunto por defecto.

En este link se puede ver la imagen ampliada: https://imgur.com/YGzSgsH

3
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

4
Imagen 2: La navegación en la aplicación de email de iPhone.
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 3.
Identifica las acciones globales de tu aplicación de email. ¿Cuáles son? ¿En qué pantallas aparecen?
¿Cuál es su posición en cada pantalla?

→ Las acciones globales que se detectan en las pantallas de la app, se muestran en la imagen 3 y
son las siguientes:
• El icono de “mensaje nuevo”, abajo a la derecha de cada uno de los pantallazos. Este icono se
muestra en la misma ubicación en cualquiera de las pantallas que nos encontremos.
• “Actualizar”. La acción de actualizar se realiza con el dedo deslizando hacia abajo y aparece el
indicador en la parte superior central. En cualquiera de las pantallas “mailbox” o “inbox”, se
puede realizar la acción de la misma forma.

Imagen 3: Acciones globales "Actualizar" "Nuevo mensaje"

5
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 4.
Identifica las acciones de pantalla de una de las pantallas de tu aplicación de email. ¿Cuáles son?
¿Dónde se encuentran? Estudia el resto de las pantallas de la aplicación: identifica otros lugares en
los que aparecen acciones de pantalla.

→ Para las acciones de pantalla si nos situamos en la bandeja de entrada, en la aparte superior
derecha vemos “editar”. Si pulsamos nos da la opción de “marcar todos” los mensajes para
seleccionarlos de una vez y poder realizar una acción que indica una vez que se seleccionan. Las
acciones que s emuestran son “marcar como no leído” y “flag”, que sirve para destacar un mensaje
con una bandera.

Imagen 4: Acciones de pantalla

6
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 5.
¿Existen acciones de elemento en tu aplicación? ¿Dónde aparecen?

Identificamos varias acciones de elementos en diferentes pantallas de la aplicación de email.

• En la bandeja de entrada, si nos situamos encima de un mensaje y deslizamos hacia la
izquierda encima podemos ver unas acciones que nos indica que podemos realizar sobre ese
mensaje. Las acciones son “archivar mensaje” “marcar mensaje” “más opciones” donde ésta
última podemos “contetar, reenviar, marcar, notificar o mover mensaje”.
• Otras acciones de elementos que podemos encontrarnos en dentro de un mensaje recibido.
En este caso aparece como un menú de navegación que se sitúa en la parte inferior y se
repite el patrón en cada uno de los mensajes que leamos. Estas acciones son: “marcar”
“mover” “archivar” “responder” “nuevo mensaje”.
• Y por último destacar que si en la pantalla anterior marcamos el icono “responder” las
acciones de pantalla que vemos son “responder” “reenviar” “imprimir” y “cancelar”.

Imagen 5: Acciones de elemento

7
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 6.
Identifica las pantallas de instrucciones en tu aplicación de email.

→ Localizamos diferentes pantallas de instrucciones, las cuales destaco las siguientes (imagen 6):
• Si le damos al botón de editar en la parte superior derecha en Mailboxes, podemos
seleccionar o desmarcar las bandejas que queremos que se muestren.
• En la bandeja de entrada, si le damos a la acción de pantalla “edit”, como podemos recordar
en la imagen 4, tenemos la opción de seleccionar unoo más emails y nos aparece las
opciones de “marcar / mover / archivar” todos los emails seleccionados.
• Otra pantalla de instrucción, es al crear un nuevo mensaje.

Imagen 6: Pantallas de instrucciones

8
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 7.
Identifica cómo las pantallas de contenido de tu aplicación de email están conectadas a las pantallas
de instrucciones mediante las acciones. Crea un diagrama de tu aplicación como el de la figura 9.

→ Podemos ver en imagen 7 (ver tamaño completo en: https://imgur.com/mxSTvqJ) cómo están
conectadas las pantallas de instrucciones a las pantallas de contneido. En la imagen, los círculos
representan las acciones y las líneas rojas las conexiones entre las acciones y las pantallas de
instrucciones. Los círculos azules indican que tocando ese elemento, se procede a la acción.

Imagen 7: Pantallas de contenido

9
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

PREGUNTA 8.
Identifica los patrones de diseño que utiliza tu sistema operativo para mostrar grandes cantidades
de contenido en una sola pantalla. ¿Hay alguno en tu aplicación de email?

→ La aplicación de email utiliza el patrón de lista para mostrar los emails recibidos (imagen 8).

Imagen 8: Patrón de listas.

PREGUNTA 9.
Identifica dos patrones para navegar entre nodos hermanos en tu sistema operativo. ¿Hay alguno en
tu aplicación de email?

→ El patrón de navegación lo podemos encontar en la pantalla cuando entramos en email recibido

(imagen 9). Aparecen 5 pestañas que representan una pantalla de contenido diferente, pero todas
ellas al mismo nivel de jerarquía de la aplicación.

10
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

Imagen 9: patrón de navegación

en paralelo

PREGUNTA 10.
¿Qué tipo de navegación hacia atrás utiliza tu sistema operativo? ¿Cómo lo has averiguado?

→ En la primera pantalla de la aplicación, no hay ningún botón de “atrás”, es decir, la navegación

hacia atrás navega la jerarquía de las aplicaciones. La comprobación se ha realizado comprobando
que no es posible salir de la aplicacion utilizando el botón de atrás, y que el botón de atrás nunca
navega entre aplicaciones.

PREGUNTA 11.
Identifica cómo y dónde se presentan las acciones globales y de pantalla en las aplicaciones de tu
sistema operativo. ¿Se presentan siempre como en la aplicación de email, o existen diferencias entre
aplicaciones?

→ Las aplicaciones que vienen por defecto en iOS, no todas presentan las acciones globales en el
mismo lugar y de la misma forma. En la imagen 10 se puede ver que las acciones de “crear nuevo” y
“edit” no coinciden en el lugar ni en la forma. Aún así coinciden algunas aplicaciones con sus
acciones, como por ejemplo la aplicación de “Mail” y la de “Notes”, que ambas sitúan el icono de “new

11
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

message” en la parte inferior derecha y el botón de “edit” en la parte superior derecha. Ambas son
aplicaciones de texto y por eso coinciden los elementos. Por otro lado, comprobamos que con otras
aplicaciones como la de “Reminders” o la de “Clock” no coinciden con las anteriores pero coinciden
entre sí. Sitúan el botón de “new” en la parte superior derecha, mientras el “edit” se localiza en la
parte superior izquierda.

Imagen 10: Acciones globales las aplicaciones (de izquieda a derecha):

Aplicación email, aplicación Notes, Aplicación Reminders, Aplicación Clock.
12
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

→ Por otro lado, las acciones de pantalla tampoco se ubican en el mismo lugar para otras
aplicaciones del sistema. Como vemos en la imagen siguiente (imagen 11), en la aplicación de Mail la
acción “edit” se encuentra en la parte superior izquierda, mientras que para la aplicación Clock está
en la parte superior derecha.

Imagen 11: Acciones de pantalla en las aplicaciones Mail y

Clock respectivamente

PREGUNTA 12.
Identifica cómo y dónde se presentan las acciones de elemento en las aplicaciones de tu sistema
operativo. ¿Se presentan siempre como en la aplicación de email, o existen diferencias entre
aplicaciones?

→ Las acciones de elementos en otras aplicaciones de iOS, sí se comportan de la misma manera

que en la aplicación de Mail. Si vemos la imagen que se muestra abajo (imagen 12) y la comparamos
con las acciones de elementos de la aplicación Mail (ver imagen 6), comprobamos que sí comparten
las acciones de pantalla.

13
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

Imagen 12: Acciones de elementos en la aplicación Notes de iOS

PREGUNTA 13.
Compara los patrones de diseño de Sailfish OS con los del sistema operativo de tu teléfono móvil.
Identifica qué patrones de diseño están presentes en ambos.

iOS Sailfish OS
Patrones de contenido Listas Listas
Patrón de navegación en paralelo Pestañas Pestañas
Patrón de navegación vertical Botón atrás o texto navega la Punto luminoso navega la
jerarquía de las aplicaciones jerarquía de las aplicaciones
Patrones para acciones globales No siempre se ubican en el
Pulley Menu
mismo lugar
Patrones para acciones pantalla Pulsar boton Pulley Menu
Patrones para acciones elemento Tocar y/o deslizar hacia la
Tocar de forma sostenida
izquierda de forma sostenida.

14
Postgrado en Usabilidad, Diseño de Interacción y UX.
Unidad U114. Tutorial. Diseño de interfaces y móviles. Olga Fernández García

Bibliografía.

• Artículo U113. Diseño de interfaces y móviles.

• Artículo U114. Tutorial. Diseño de interfaces y móviles.
•Artículo U207. Responsive Web Design.

15