- Introducción
- Definición del Producto
- Tipo de usuario
- Objetivo principal
- Planificación
- Historias de usuario
- Diseño
- Sketch
- Investigacion y Desarrollo
- Primeros cambios de Sketch a prototipo de alta fidelidad
- Prototipo de alta fidelidad
- Testeo y usabilidad
- Analisis y conclusion
- Cambios del prototipo e interfaz final
Hoy en dia existen diversas aplicaciones que nos acercan el mundo del cine a la comodidad del hogar. La accesibilidad hoy es enorme en comparacion con hace 20 años atras, en donde las posibilidades se resumian en ser socio de algun video club o asistir al cine. Por lo mismo, el publico cinefilo es cada vez mas exigente, y requiere mucho mas que una plataforma que solo permita ver sus peliculas favoritas, el acceso a internet a facilitado que los seguidores de sagas y series puedan crear espacios donde compartir sus intereses. Y han sido estos mismos Fans, la fuente de inspiracion para Go Movies.
Es una webapp que provee informacion sobre peliculas, principalmente del genero fantastico. Ademas de proveer acceso ilimitado a sus peliculas y series, entrega contenido extra sobre el mundo Fandom del cine de Ciencia ficcion en internet. Fandom proviene del termino Ingles Fan Kingdom y se refiere al conjunto de aficionados a algún pasatiempo, personaje o tematica. En este caso comunidades seguidoras de peliculas y series. Tambien tiene una seccion dedicada a recopilar las ultimas noticias del cine, convirtiendola asi en una de las plataformas mas completas para los amantes del septimo arte.
Esta app ha sido diseñada principalmente para usuarios Geeks (independiente de la edad y sexo).
Los Geeks son personas que adoran lo nuevo y más avanzado en tecnología, en este sentido, son grandes consumidores de productos como tablets, teléfonos inteligentes, computadoras, etc.
Son amantes de las expresiones de cultura popular, como el cine, el cómic, la literatura, las series de televisión y los videojuegos, sobre todo cuando abordan temas como la ciencia ficción y el género fantástico.
Proveer a sus usuarios informacion detallada y completa sobre peliculas del genero Fantastico y de Ciencia ficcion, noticias e intereses relacionados con el mundo Fandom.
Para la organización y realizacion del proyecto, planificamos de la siguiente manera:
- Hicimos un análisis inicial, interpretación y solución del problema.
- Planificamos las tareas del proyecto
Trello,Puedes revisarlo haciendo click aquí - Realizamos el compromiso de terminar de ejecutar todas las actividades dentro de los dias designados , las cuales fueron distribuidas de la siguiente forma:
Corina Varas (Master):
- Input search
- Header
- Slider
- Seccion de Noticias en J.S
Monica Bartha (colaboradora):
- Planificacion en Trello
- Seccion Fandom en J.S
- Modificaciones en html y css
- Responsive
Varinea Lopez (colaboradora):
- Bottoms
- Modificaciones en Css
- Callbacks de "Estreno" "Superheroes" y "Series" J.S
- Calbacks por "Genero" en J.S
Andrea Vasquez (colaboradora):
- Diseño Interfaz y Usabilidad
- Protototipos Desktop y Movil en Figma
- Creacion y redaccion de ReadMe
- Investigacion y test de usabilidad
"Yo como usuario de Go Movies , quiero buscar peliculas por palabra clave, para poder encontrarlas facilmente por el nombre , director o actor , ademas del nombre de la pelicula".
"Yo como usuario de Go Movies , quiero clasificar las peliculas segun su genero, para asi conocer las diferentes opciones.
"Yo como usuario de Go Movies , quiero agrupar peliculas segun su fecha, para conocer cuales son los ultimos estrenos".
"Yo como usuario de Go Movies , quiero ordenar en forma separada las peliculas de las series , para poder diferenciar cuales son las series".
"Yo como usuario de Go Movies , quiero ver la imagen de cada pelicula en forma separada , para asi observar la imagen detallada de cada una".
"Yo como usuario de Go Movies , quiero ver la informacion de cada pelicula en forma separada , para asi leer la informacion detallada de cada una".
"Yo como usuario de Go Movies , quiero una seccion Fandom , para compartir con otros usuarios que tengan los mismos intereses"
"Yo como usuario de Go Movies , quiero una seccion de noticias de cine , para conocer las ultimas novedades sobre peliculas"
"Yo como usuario de Go Movies , quiero una seccion donde ver el trailer de cada pelicula , para conocer de que se trata y asi elegir la mejor opcion "
-
Mostrar conjunto de imagenes de peliculas.
-
Agrupar segun genero.
-
Agrupar segun fecha de Estreno.
-
Separar peliculas de series.
-
Visualizar imagenes de peliculas en solitario.
-
Visualizar informacion detallada de cada pelicula.
-
Crear enlaces para Trailers en Youtube , Fandom , y Noticias de cine.
Version para Desktop
Version para Movil
Para diseñar esta webapp nos basamos en entrevistas que realizamos a Fans Geeks , los cuales conocimos en una visita anterior a Deckmachine una tienda que se especializa en productos coleccionables de peliculas y juegos . En este lugar ademas, se organizan campeonatos y eventos en torno al anime , cosplay y Fandom. Puedes visitar su sitio web aquí. Con ellos consultamos sobre sus gustos personales en cuanto a cine , el uso de plataformas para ver sus series y peliculas , su participacion en foros , su interes y fanatismo por peliculas de culto de ciencia ficcion.
Al presentarles nuestro sketch para obtener Feedback, nos indicaron que necesitaban ver mayor información e sobre cada pelicula , acceso a revisar trailers, filtros mas completos , y acceso rapido a redes sociales ( esto incluia a Fandom propuesta que tuvo muy buena aceptacion).
Escuchando sus sugerencias, decidimos mejorar el sistema de filtros , haciendo una lista mas acotada y relacionada con la tematica que a ellos les interesa, dejando afuera generos tales como : comedia , terror, romantica e infantil e incluyendo filtros como accion , aventura y Superheroes , que sin duda fue su favorito. Tambien mejoramos la pagina especifica de cada pelicula ( imagen e informacion) y desarrollamos una seccion mas grande dedicada a Fandom. A la version movil se le hicieron las misma modificaciones y se trabajo en hacerla mas simple e igual de intuitiva.
Para elegir la paleta de colores del prototipo, buscamos varias opciones que representaran el genero de Sci-Fi y fantastico. En primera instancia , se penso en el color Azul como predominante y blanco para generar contraste, tal como sugieren los expertos en Ciencia ficcion , Chris Noessel y Nathan Shedroff en su libro : Make it so : Interface Design lessons fron Sci-fi , la explicacion podria ser porque el color azul es muy inusual en la naturaleza y proyecta un aura de misticismo tecnologico. Sin embargo considerando que existen muchisimas plataformas con esa misma combinacion , despues de consultar con nuestros Geeks expertos, la desicion final fue inspirarnos en paletas de Pantone con colores como :silver , Tap Shoe , Magnet y Majolica blue inspiradas en minerales como el grafito y telas plateadas como las que se utilizan para viajar al espacio exterior, pues se acercaba mejor al concepto Futurista y Sci-fi que andabamos buscando, ademas de ayudar a resaltar las imagenes llenas de color de las peliculas.
Para traspasar los colores elegidosa codigo Hex y utilizarlos en nuestro prototipo de alta fidelidad ultilizamos la herramienta Color Tool.
Si quieres revisar la paleta de colores puedes seguir este enlace: aquí
Para aplicarlos en el diseño , los distribuimos de la siguien te forma : Gris oscuro para Background , ya que es donde se veran las imagenes de peliculas y con esto se destacaran y Azul Majolica aplicado sutilmente en la imagen de fondo del Header y Footer , para mantener la idea de Espacio Exterior.
Existen 3 formas para generar contraste dentro de un diseño.
A través de la forma, con la ruptura del patrón. A través del color, se basa en las propiedades del color (tono, valor, saturación). A través de relaciones de tamaño de las formas. Este principio se ocupo a traves de el color, como es un data con imagenes. El color gris usado como base , hace que destaque las imagenes a todo color de las peliculas. Tambien al usar Fuentes en color blanco sobre negro ( en los Menus) y gris en el resto de la pagina. Atraves de la forma , las portadas de peliculas se muestran rectangulares , excepto en la seccion Fandom esto para resaltar que cambia el contenido de esa parte en especifico. Y Finalmente En la seccion de noticias el tamaño de las imagenes contrasta con el tamaño de las peliculas, con el mismo fin de destacar que es otro tipo de contenido.
La repetición le da unidad, consistencia y cohesión al conjunto, esta suele aportar una inmediata sensación de armonía. La presencia de módulos tiende a unificar, por esto en el prototipo se mantiene la misma estructura ,los mismos colores , posicion y diseño de botones, solo habra cambios en el contenido de cada seccion. Repetimos la forma del Menu ( Negro , minimalista con letras blancas) en cada seccion que se requiera, el header con el logo y el footer,para mantener la identidad de la pagina. Repetimos el orden y la secuencia de imagenes y formas, para dar la impresiond de conjunto.
Alinear los elementos es una operación imprescindible para conseguir una composición ordenada y lógica, con ello se crean unidades visuales definidas y relaciones entre elementos. Para que se vea ordenado y simetrico, organizamos los contenidos para que se alinearan segun su naturaleza. Los contenedores del menu van a la misma distancia entre ellos, agrupados a la misma altura .Al igual que el texto, los botones de select e input , de esta manera se nota que estan relacionados entre si. Estan alineadas tambien las imagenes , para dar orden a toda la estructura , sino con tantas imagenes seria un caos visual.Esto le da cohesion y orden.
Todos los elementos similares deben estar próximos. Esto es importante para estructurar la información. En el menu de Inicio existen varias secciones algunas muy similares entre si , pero para que no exista confucion sus elementos estan cercanos entre si y separadas por sus respectivos menus. Con esto queremos lograr una estructura definida pero al mismo tiempo que se proyecte mas variedad de contenido, asi que se cuido que cada imagen o elemento estuviera cerca de los demas elementos relacionados , manteniendo la organizacion.
Existe un orden jerárquico en la visión siendo el primer punto el más importante. Nosotras aplicaremos este principio a traves de la tipografia. Las palabras más importantes muestran un mayor impacto, por lo que los usuarios pueden obtener la información clave con mayor claridad, entonces al dar reelevancia a los titulos de las secciones en relacion con el resto del texto aumentando su tamaño, llamará más la atención por lo que tendrán mayor grado de importancia. El orden jerarquico se distribuira de la siguiente manera (mayor a menor desde la parte superior a la inferior de la pagina) disminuyendo el tamaño de las fuentes. Titulos Menu de pagina y menu de funciones , mantiene el mismo tamaño ( por coincidir en que son parte de un menu ,aunque sean secciones diferentes) Nombres de genero , a excepcion de "Superheroes" porque este se encuentra destacado mas abajo en la pagina. Texto en datos de peliculas y Texto de noticias , esto se hizo asi con el fin de ahorrar espacio y que se viera ordenado.
La tipografia se eligio desde google fonts de acuerdo a 2 objetivos:
-
"Que sea moderna" Porque el diseño de la app , si bien esta enfocado en un grupo etareo bastante amplio, la aplicacion tiene un estilo moderno , por lo que requiere una fuente con similares caracteristicas.
-
"Que sea legible" Porque al contener bastante informacion ( especificamente en la seccion de noticias y sinopsis) requiere una letra que se vea ordenada , sin quiebres para mayor fluidez en la lectura.
Por ello la eleccion fue:
-
Prompt :Para titulos y textos cortos
-
Roboto : Para textos mas largos por su mayor legibilidad.
Para conocer las fuentes elegidas, puedes revisar el siguiente enlace: aquí
Version para Desktop: Para diseñar el prototipo para testeo utilizamos Figma.
Puedes interactuar con el prototipo haciendo click aquí
Los test de usabilidad son una forma de probar cómo los visitantes navegan en tu sitio web con el objetivo de facilitar su experiencia web y dejarla cada vez más simple e intuitiva. Para ver la usabilidad del ultimo prototipo, se realizo un testeo a la versión de Desktop.
- Comprobar si el contenido se hace familiar, comprensible y esta alineado con la aplicacion Go Movies.
- Probar si la interfaz es fácil de entender o necesita mayor instrucción.
- Comprobar si el acceso y los enlaces siguen un orden lineal.
- Comprobar si el usuario sabe donde esta posicionado.
- Comprobar si los principios de Diseño aplicados cumplen su objetivo (estetica , visualizacion, legibilidad)
Para ver si se cumplen estos objetivos, haremos uso de la Evaluacion heuristica en su version acotada para pesquizar problemas, y segun el Impacto y la frecuencia con que estos aparezcan haremos las modificaciones pertinentes.
Contactamos nuevamente a los chicos de Deckmachine y segun sus intereses , seleccionamos a los mas cercanos a nuestro usuario objetivo, a la vez ellos contactaron a sus conocidas tambien con intereses similares , por lo que logramos testear a un grupo heterogeneo de hombres y mujeres con amor al cine Fantastico y de Ciencia ficcion.
Sergio Antonio , o "Toño" para los amigos , es el Geek modelo : Hoy en dia esta terminando la carrera de Teatro , pues piensa desarrollar una carrera como comediante de Stand up , hace años atras estuvo estudiando Ciencias Fisicas y Astronomicas en la UdeC , pues su interes siempre ha sido relacionado con la Sci-Fi relacionada con el espacio , le gusta la Ufologia y el cine relacionado con esos temas. Es Fans de practicamente todas las sagas espaciales o relacionadas: Star Trek , Star Wars, Mandalorian , Expedientes secretos "X" etc. Durante su adolescencia fue Gamer , asiduo a juegos de estrategia en linea como LoL , llego hasta organizar "Copas" o competencias , fue campeon regional de ajedrez , y de cartas Pokemon. Tambien fue columnista en la desaparecida web Chilena de noticias geeks Ozom.cl , en ella con el pseudonimo de Miunich , publicaba sobre temas de interes tales como Cine , juegos y datos geeks.
Para ver el video de entrevista y testeo del prototipo . Puedes revisar los siguiente links:
"Estaba todo claro , sencillo , es entendible , sabes para donde vas "
"Solo no me quedo clara la parte de los trailers, se ven desde ahi mismo o me llevan a la pagina oficial de youtube?"
"Me gustaria que tuviera acceso a comentar las peliculas , para eso se podria logear el usuario y postear desde sus redes sociales como Facebook por ejemplo"
"Me agrada el diseño , se que estoy testeando un prototipo pero da la apariencia de una pagina de peliculas real "
"Los Iconos de redes sociales en negro , como que no se destacan del fondo, quizas deberian ser blancos , asi me llamarian mas la atencion "
"Me gustaria que tuviera una seccion de foros , para poder comentar con personas con tus minos gustos cinefilos"
"Creo que es genial que te linkee a Fandom"
"En la parte de noticias, deberia linkear desde la foto , no solo desde el ..leer mas ".
"Deberia existir un filtro para buscar segun pais de origen , eso seria super util segun yo , porque existen series buenas en otros idiomas que uno nisiquiera sabe que existen"
"Tiene muchas opciones para filtrar, me agrada eso"
"Tiene buena imagen y sus secciones se ven de forma clara , siento que en ningun momento me perdi , es como si ya lo hubiera usado antes".
"Podrian agregar una seccion con articulos especiales sobre directores y actores tambien"
"Me perdi un poco en como volver de la seccion de busqueda, despues entendi que el logo era para volver"
"Es bueno que tenga una seccion de noticias , generalmente este tipo de paginas no la tiene".
"Me gustaria un filtro por actores , los mas destacados del genero".
Es la facilidad con la que el usuario es capaz de desarrollar las tareas asignadas por primera vez. Los usuarios comprendendieronsin dificultad la funcion de cada uno de los botones y elementos, ademas de entender hacia donde iban estos, sin problemas.
Es la destreza con la que usuarios con experiencia llevan a cabo las instrucciones que se les han dado. Su similitud en el Diseño a otras paginas de Pokemon, entrega familiaridad y esto permite que el usuario, cumpla su objetivo, sin mayor problema. Eso si, se considera quitar texto explicativo, porque no cumple su funcion , a solicitud de los usuarios.
Se evaluo si al pasar cierto tiempo, después de la primera interacción, el usuario fue capaz de recordar cómo funciona la aplicación sin necesidad de aprender a manejarla nuevamente.Y no se registraron problemas con eso , efectivamente los usuarios no requirieron repetir para entenderla.
Se debe reconocer la cantidad y gravedad de errores que cometa el usuario al interactuar con la aplicación, de igual manera se analiza la facilidad con la que se pueden enmendar los errores cometidos durante la prueba. Los errores estan mencionados con detalle mas abajo, en la parte de cambios del prototipo e Interfaz final .