Pautas para la interfaz de usuario Página
1
de12
Snowflake
Pautas para la Interfaz de Usuario Versión 4.0
Historia de revisiones
Fecha Versión Descripción Autor
20/08/2015 1.0 Versión inicial Bruno
Vescovi
23/08/2015 1.1 Ajustes Martin
Mendez
23/08/2015 1.2 Revisión de SQA Daniela
Rivero
28/08/2015 2.0 Versión segunda iteración Bruno
Vescovi
30/08/2015 2.1 Ajustes Santiago
Hitta
2/09/2015 2.2 Revisión de SQA Daniela
Rivero
5/09/2015 3.0 Añadiendo wireframes Bruno
Vescovi 06/09/2015 3.1 Añadiendo wireframes, Ajustes Santiago
Hitta
06/09/2015 3.2 Revisión de SQA Daniela
Rivero 12/09/2015 4.0 Retocando wireframes después
de la reunión con el cliente
Bruno
Vescovi
Pautas para la interfaz de usuario Página
2
de12
Contenido
1. OBJETIVO 3
2. TIPODEAPLICACIÓN. 3
3. TIPODEUSUARIOS. 3
4. INTERFAZDEUSUARIOSEGÚNREQUERIMIENTOS 3
5. INTERFAZDEUSUARIO:ASPECTOVISUAL 3
Pautas para la interfaz de usuario Página
3
de12 1. Objetivo
El objetivo de este documento es empezar a establecer los requerimientos de la interfaz de usuario. Para este proyecto este componente es una parte muy importante.
2. Tipo de aplicación.
La aplicación es una aplicación web, con una posible versión de escritorio que tiene que ser un Wrapper de la propia versión web.
3. Tipo de usuarios
.El producto está destinado a usuarios finales que colaboren en distintos equipos con distintas finalidades.
4. Interfaz de Usuario según requerimientos
El requerimiento esencial de la interfaz de usuario es que sea intuitiva y con una curva de aprendizaje suave.
MindMap de spaces: capacidad de ver los spaces, el space en detalle, flows del space, flow en detalle, containers del space, containers en detalle, container items en detalle.
El sistema debe poder ser utilizado desde las últimas versiones de los navegadores web Safari, Firefox y Chrome, obteniendo los mismos resultados para cada caso.
El sistema debe ser responsive de forma que se adapte a los diferentes tamaños de pantalla de diferentes dispositivos.
5. Interfaz de Usuario: aspecto visual
Para poder distribuir las vistas de la aplicación dependiendo del tamaño de la pantalla dividimos las funcionalidades en vistas pequeñas para poder mostrar más o menos con distintas funcionalidades dependiendo del tamaño disponible.
Las views identificadas son:
● Welcome view
Es la vista que se ve al entrar en la aplicación. Muestra un overview del producto y la posibilidad de iniciar sesión o de registrarse.
● Login view
Es la vista que permite iniciar sesión, tiene los campos requeridos para ello.
● Sign up view
Es la vista que permite registrarse, tiene los campos requeridos para ello.
● Menu
Es la vista que permite navegar por el contenido de la aplicación.
Debería mostrar el panel de usuario, spaces del usuario con posibilidad de acceder a ellos, el mapa de spaces y los usuarios del directorio de la organización.
Pautas para la interfaz de usuario Página
4
de12
● User panel view
En esta vista debería mostrarse la opción de acceder a la configuración de perfil y de la aplicación.
● Profile view
En esta vista se muestra el perfil del usuario que utiliza la aplicación, el cual puede modificar, y la posibilidad de acceder a las preferencias.
● Preferences view
En esta vista se muestran las preferencias de usuario y la posibilidad de cambiarlas.
● People view
En esta vista se muestran las personas de la organización.
● People detail view
En esta vista vemos los detalles de alguna persona de la organización o algún usuario de un space específico.
● Spaces
En esta vista vemos los spaces disponibles, podemos verlo tipo mapa o lista.
o Map
Esta vista es un esquema visual (tipo mindMap) en el cual vemos los spaces y sus subspaces de manera gráfica.
o List
Esta vista es una lista de los spaces a los que tiene acceso el usuario logeado.
● Space detail
Esta vista es el detalle de un space, tiene la posibilidad de mostrar una vista reducida de los containers view y users view. Esta vista, al tener mucha fuerza dentro del espacio debería estar siempre visible cuando estamos dentro de un espacio, y brindar la posibilidad de colapsar-se para tener más espacio de trabajo.
● Flow view
En esta vista vemos los flow items recibidos y enviados, y nos da la opción de enviar flow items. Esta vista, al tener mucha fuerza dentro del espacio debería estar siempre visible cuando estamos dentro de un espacio, y brindar la posibilidad de colapsar-se para tener más espacio de trabajo.
● Containers view
En esta vista vemos los distintos containers del space.
● Users view
En esta vista vemos los usuarios del space.
● Container view
En esta vista vemos los container Items de un container determinado.
● Container item detail
En esta vista vemos los detalles del container item. Podemos verlo en modo add (creación de un nuevo container item), edit (edición de un container item ya existente) o view (visualización de un container item ya existente).
Pautas para la interfaz de usuario Página
5
de12 6. Esquema de la UI
En esta sección se incluyen bocetos de la estructura y disposición de la UI.
En el siguiente esquema intentamos representar las diferentes views y sus
interacciones entre ellas.
Pautas para la interfaz de usuario Página
6
de12 7. Wireframes de las views
Esta sección tiene como objetivo ilustrar únicamente la estructura y disposición de algunas de las views detalladas anteriormente, este diseño es una aproximación inicial.
● Space map -> List
Se muestra un listado de los spaces a los que el usuario está suscrito. Se utiliza una scrollbar lateral para permitir navegabilidad en la vista en caso de que el listado de spaces sea demasiado grande.
Se agrega una barra de búsqueda de spaces para localizar un determinado space, junto a ella se ofrece un botón que permite ir a la SpaceMap-radar view.
Wireframe:
● Space map -> radar
Se muestra un diagrama jerárquico de los spaces, pudiendo ver los subspaces de los mismos. Se utiliza un dibujo elíptico para representar un space, líneas para asociarlos a sus subspaces y estos pueden colapsarse o expandirse de forma que se muestren o no los subspaces de cada space.
Como funcionalidades interesantes están las de mostrar algunos spaces que sean subspaces de otro y colapsar el resto para no ocupar demasiado espacio, o mostrar notificaciones para expresar que hay contenido nuevo.
Se agrega una barra de búsqueda de spaces para localizar un determinado
Pautas para la interfaz de usuario Página
7
de12
space, junto a ella se ofrece un botón que permite ir a la SpaceMap-Listview.
Wireframe:
● Space detail -> Flow View
Se ve el detalle de un space en modo Flow, es decir que se tendrá principalmente la Flow view, la cual irá acompañada de views secundarias:
Users view y Space Containers view.
Wireframe:
Pautas para la interfaz de usuario Página
8
de12
La estructura de la Flow view constará de una barra inferior horizontal paraescribir mensajes y la pantalla encima en donde se visualizan los mensajes escritos por los usuarios con la fecha o la hora del mensaje(se utiliza la hora si el mensaje fue escrito hoy y la fecha y hora en caso contrario).
● Space detail -> Containers view
Se ve un listado de todos los contenedores del space, indicando para cada uno de ellos la cantidad de container items que hay dentro del container.
Wireframe:
Pautas para la interfaz de usuario Página
9
de12
● Container view
En esta view se muestran los container items de algún container. La estructura de esta vista constará del encabezado indicativo de la ubicación (al igual que las demás views) seguido por un listado de los container items, el cual podrá tener varias “columnas” para detallar información extra que se considere relevante sobre los container items. Además tendrá una scrollbar lateral en caso de que hayan más container items de los que se pueden
mostrar al mismo tiempo en la view.
Wireframe:
Pautas para la interfaz de usuario Página
10
de12
● Container Item view:
En esta view se muestra la pantalla emergente para la edición/visualización/adición de un container item, la cual saldrá encima de
la view del container.
Para el modo edit se ofrecerá la información editable de dicho container item, junto con opciones de edición (editar, eliminar) para cada campo.
Finalmente se dará al usuario la opción de guardar los cambios o cancelar la edición.
Luego los modos view/add se implementan de forma similar al modo edit, se utilizan ventanas emergentes sobre el respectivo container, las cuales brindan las opciones correspondientes al caso (en el modo view solo existe la opción cancelar, para salir de la visualización) las cuales son variables
dependiendo del container item en cuestión.
Wireframe modo edit:
Pautas para la interfaz de usuario Página
11
de12
● Welcome view/Login view:
Se muestra una primera aproximación a la welcome view, la cual incluye a
la login view.
Nota: Falta un botón de Sign up el cual iría debajo de la login view.
Pautas para la interfaz de usuario Página