5 planos del UX (Guía Práctica) by Jose Luquin

Guía Práctica

5planos del

Guía Práctica

5planos

UX Guía Práctica

5planos

del

Proyecto de revista electrónica realizado en la materia de Psicología de la Percepción de la Maestría en Diseño Estratégico Digital. Universidad Iberoamericana Tijuana Coordinador: Mtro. Mario Cano Maestra de asignatura: Mtra. Martha Soto Alumno: LDG. José Luquín San Diego, California USA Tijuana, Baja California México www.ux-talks.com Copyright © 2015 All rights reserved

Tabla de contenidos 6

Antecedentes

Introducción

Objeto de Estudio

Problema de Estudio

Estado del Conocimiento

Guía Práctica : Los 5 Planos del UX

Primer Plano: Estrategia

Segundo Plano: Alcances del proyecto

Tercer Plano: Estructura

Cuarto Plano: Esqueleto

Quinto Plano: Superficie

Conclusión

Guía Práctica

5planos del

Antecedentes Los 5 planos del UX es una metodología que fue introducida por Jesse James Garret con un enfoque centrado en el usuario, que pretende facilitar la tareas engorrosas de la planificación estratégica de la gestión de experiencia de usuario en plataformas y productos digitales. Si bien en sus inicios esta metodología se gesto con la mentalidad de enriquecer las experiencias de usuario en los desarrollos de sitios de internet de media-alta complejidad, hoy en día es una metodología que por su fácil comprensión y escalabilidad puede ser adaptada en el desarrollo de aplicaciones móviles, desarrollo de software, comercio electrónico e incluso puede integrarse y/o complementar otras prácticas ya más comunes como las prácticas lean, agile y scrum. La intención es proporcionar una guía rápida aplicación y práctica sustentada en teorías, conocimiento de otras áreas como lo son las neurociencias, tecnologías de la información, psicología, diseño de interacción, entre otras áreas.

Introducción

Guía Práctica

5planos del

La presente guía práctica tiene como objetivo informar a los diseñadores, desarrolladores y líderes de proyecto como implementar un proceso metodológico de UX aplicado a productos digitales. Abordaremos los 5 planos del UX partiendo de la superficie inferior para gradualmente subir los niveles de esta estructura metodológica hasta llegar a la superficie que es la última de las fases y es usualmente el plano más reconocido por todos los usuarios de cualquier producto digital. Partiremos del estudio de estos 5 planos del UX con el enfoque de plantear un proceso arquetípico que pueda ser aplicado para el desarrollo un plan estratégico que pude a identificar y alinear los objetivos de usuariosistema. Ademas se pretende que esta metodología práctica pueda ser de utilidad para los equipos multidisciplinarios que practican metodologías ágiles ( lean methodology) enfocadas al de desarrollo de productos digitales. Otro de los objetivos es fidelizar e integrar a los equipos involucrados en el desarrollo de productos digitales, creando una sinergia laboral y teniendo siempre como principal enfoque el diseño centrado en el usuario que mencionaremos con frecuencia abreviando con sus siglas en inglés “UCD”. Ademas se pretende como parte de esta propuesta guiar de manera encaminada, con ejemplos prácticos, actividades a realizar, ademas de sugerir la implementación de ciertas herramientas que pueden ayudar en el proceso.

Objeto de estudio

Los 5 planos del UX

(Enfocado a productos digitales) El Objeto de estudio del presente trabajo, es proponer una guía práctica para la implementación metodológica para un proceso de diseño de experiencia enfocado en productos digitales.

Problema de Estudio

Guía Práctica

5planos del

Antecedentes: Poco conocimiento sobre metodologías de diseño aplicadas al desarrollo de productos digitales. Falta de interés de los empresarios, líderes de proyecto, estudiantes, practicantes y profesionales del diseño. Poco conocimiento sobre la gestión del diseño de experiencias enfocados a productos digitales. Desinformación y confusión con otras disciplinas que complementan el área de estudio.

Beneficios: ¿Cuáles son los beneficios de implementar una metodología de 5 pasos para un proceso de UX enfocada a productos digitales? ¿Por qué es importante el implementar esta estrategia de 5 puntos? ¿Qué pasa si no se implementa una metodología estratégica de UX dentro del proceso de desarrollo de productos digitales? ¿Quiénes son los personajes responsables o involucrados y que papel juegan durante el proceso?

Estado del Conocimiento

BibliografĂa Recomendada The elements of user (Jesse James Garrett) The design of everyday things (Donald Norman) Donâ&#x20AC;&#x2122;t make me think (Steve Krug) Neuro Web Design (Susan M. Weinschenk) E-Commerce User Experience (Nielsen Norman Group) Buyology: Truths and lies why we buy (Martin Lindstrom) Hooked: How to build habit forming Products (Nir Eyal ) Brainfluence: 110 ways to persuade and convince consumers with neuromarketing (Roger Doodly) Smashing UX: Foundations for designing online user experiences (Jesmond Allen - James Chudley) Why we buy (Paco Underhill) The UX book (Rex Harrison - Pardha Pyla) Lean UX (Eric Ries) UX design (Russ Unger - Carolyn Chandler)

Guía Práctica

5planos del

Después de haber participado en diversas prácticas privadas en la industria digital, en donde en muchos de los casos se ha encontrado un nivel de conocimiento muy bajo o superficial sobre el tema de UX enfocado a productos digitales; se pretende profundizar un poco más sobre los beneficios, limitaciones y alcances de la práctica estratégica de UX. Siendo esta una disciplina que si bien no es nueva, así lo pareciera debido a que recientemente ha crecido el interés sobre tanto en las áreas de diseño como en el área de desarrollo de productos digitales y marketing digital. Al realizar una breve búsqueda sobre el término UX en cualquier buscador de Internet, encontraremos una infinidad de definiciones, artículos, metodología, libros, autores, vídeos, libros, revistas, diagramas, fotografías, tutoriales, cursos y materiales didácticos; parecería que es un tema de abundantes recursos disponibles para su estudio, pero aun siendo así el caso y al estudiar algunos de estos recursos, siempre se menciona la importancia de la implementación metodológica y en muchos de los casos se menciona el método de los 5 planos como una metodología que explica y aborda todo el proceso de UX. La intención de presentar una guía rápida y práctica sobre la implementación de los 5 planos del UX, se hace a partir del estudio del libro de los elementos de la experiencia de usuarios (the elements of user experience) entre otros libros que han sido claves para el entendimiento teórico sobre el tema a los cuales recomiendo y ademas utilizo en mi estudio y práctica diaria.

Guía práctica para la implementación de la Es necesario iniciar por identificar los parámetros de aplicación, actividades a realizar y alcances. Iniciemos por hacer hincapié en el ordenamiento estructural de los 5 planos del UX. La representación gráfica y la dirección de lectura de los 5 planos se generan al realizar una analogía comparativa de un iceberg, en donde se entiende que el plano visual que representa la punta del iceberg como una estructura física o masa volumétrica percibida, es la parte visual del sistema o plataforma digital con el cual estamos acostumbrados a interactuar, tanto como usuarios, y/o como profesionales de las áreas de diseño y desarrollo.

Muchas veces nos encontramos tan inmersos en las tendencias o prácticas superficiales del consumo desmesurado de nuevas tecnologías, redes sociales, aplicaciones, etc. Por lo cual nos es casi imposible a nivel usuario lograr un entendimiento profundo de los objetivos y beneficios de su uso, que por lo general hacen casi imposible adaptarse del todo a las interacciones con estas nuevas tecnologías en materia de software y hardware; que parecieran no tener límite de crecimiento y solo crecen el hueco en la curva de aprendizaje de nuestra cotidianidad. Si bien nos parece difícil y a veces imposible mantenernos al día desde el punto de vista de usuario, será mejor que podamos entender ahora desde la óptica de gestores el como realizar de manera estratégica una buena planificación que nos delimite el camino a seguir para el desarrollo de buenas experiencias.

metodologĂa de 5 planos del UX

GuĂa PrĂĄctica

5planos del

Se propone darle seguimiento de manera estructurada a cualquier proyecto de desarrollo enfocado a productos digitales de manera secuencial, ya que cada uno de los planos depende del otro : La lectura y ordenamiento de estos planos se da de abajo hacia arriba subiendo de niveles hasta llegar a la superficie final o pico del iceberg

5 - Surface ( La Superficie ) 4 - Skeleton ( El Esqueleto ) 3 - Structure ( Estructura )

2 - Scopes ( Alcances )

1 - Strategy ( Estrategia )

3 2

La Estrategia

Guía Práctica

5planos del

La estrategia, es el primer y mas fundamental de los 5 pasos de la metodología. En este primer plano es donde se definen los Objetivos de todos los involucrados en el desarrollo del proyecto. Es necesario identificar a los stakeholders involucrados en el desarrollo, sus funciones, necesidades y sobre todo tener bien claros cuales son los objetivos. • Cliente: Solicitante o administradores del sitio-sistema. • Usuarios: Quien van a interactuar con el sitio-sistema.

La mejor manera para identificar estas necesidades, funciones, requerimientos y objetivos de cada uno de los stakeholders es muy recomendable realizar investigación cuantitativa y cualitativa que nos ayude a visualizar los parámetros de medición con datos duros, de primera mano, ademas de información real que uno pueda descodificar de los contextos naturales en donde se efectúen. Una vez que se realiza la investigación para definir las necesidades de usuario y los objetivos del sistema se procederá a definir e identificar 2 los tipos de usuarios y a la creación de “User Personas” par poder tener claramente identificado para quien estaremos desarrollando esta planeación y gestión de experiencia.

Al identificar claramente, de preferencia por nombre, tipo de usuario, e incluso con1una foto representativa, nos será más claro identificar las especificaciones necesarias que deberán ser incluidas dentro del sistema, ademas es en esta fase en donde se identifican también los requerimientos en materia de contenidos, fuentes, y a las personas involucradas en el desarrollo de los mismos.

Objetivos de la Estrategia El objetivo de este primer plano es definir: 1. Las necesidades del Usuario 2. Objetivos del sistemaÂ

Capturador

Entrevistad

Entrevistados

Formatos disponibles:Â 1- Cuestionario (evernote) 2- Tabla de objetivos (evernote) 3- User Personas (evernote)

dor

Guía Práctica

5planos del

Actividad Realizar una serie de cuestionarios en donde se genere un formato que pueda ser replicado y modificado según la necesidad del proyecto. Una vez que tengamos identificado este cuestionario es recomendable tener bien definidas las preguntas que se realizarán durante esta fase de planificación. Las entrevistas se deberán realizar de manera planeada, en el caso de investigación tipo entrevista programada se recomienda un área de preferencia aislada, tipo sala de juntas, en donde se recomienda tener acceso a Internet, buena iluminación, acceso a un equipo de computo o sistema de audio para grabar el audio de las entrevistas.

5 se recomienda un mínimo de dos personas, dentro del Para esta tarea equipo de investigación; el entrevistador y quien realizara las anotaciones. Es recomendable tener previo conocimiento sobre el tema que estará abordando con el entrevistado para poder tener amplio contexto y poder reaccionar ante cualquier interacción que se genere a manera de conversación para así poder suavizar un poco la estructura de la entrevista. Es recomendable no ser tajante, cortante y muy rígido al realizar esta serie de preguntas, se puede tener flexibilidad de divagar brevemente a manera 2 para romper la formalidad en caso de que el entrevistado de conversación de pie a este tipo de entrevista, sin alejarse mucho del objetivo de responder cada una de las preguntas planeadas.

Una vez que se tiene esta información recopilada, en formato de los cuestionarios, y audio grabaciones se procederá al análisis de esta 1 el objetivo de filtrar y poder discernir la información que es información con realmente lo que se busca recuperar de esta fase. Una vez filtrada esta información se llena un formato en limpio de preferencia en alguna plataforma compartida ( en la nube ) que es de donde se irá haciendo referencia para proseguir a los siguientes planos.

Los Alcances del proyecto

Guía Práctica

5planos del

El segundo plano de esta metodología se da con la definición de los alcances y limitaciones técnicas del proyecto En este segundo plano es esencial tener una buena linea de comunicación entre los involucrados o responsables del desarrollo tecnológico del proyecto. Las especificaciones de funcionalidad sirven principalmente para identificar, dar claridad a lo que se estará realizando y ademas para también tener muy claro lo que no se estará realizando. Muchas veces podemos perdernos en un inmenso mar de opciones, beneficios, mejoras e incluso eventualidades que pudieran parecer increíblemente fascinantes, pero habrá que determinar si realmente forman parte o tienen cabida dentro de los parámetros y alcances que se 5 planearon para satisfacer los objetivos de usuario y del sistema. Al identificar y capturar las especificaciones funcionales del sistema, se deberá4 hacer de manera positiva, especifica y objetiva. Quiere decir que en lugar de indicar de manera tajante un error o limitación resultado de la interacción entre el usuario y el sistema, es más favorable ser positivo y propositiva buscando una ruta alterna que cubra ese hueco en la interacción y proponga una solución o alternativa que cumpla en su totalidad o en parte el objetivo y necesidad del 3 usuario. Ademas se deberá ser en todo momento especifico y objetivo, dejando 2 lo menos posible áreas que se presten a la especulación o ambigüedad, ya que esto puede truncar la ruta de interacción y evitar completar las tareas objetivas que se están planteando. Otra muy importante a definir dentro de este segundo plano son los requerimientos de contenido, y no necesariamente quiere decir que nos 1 enfocaremos únicamente en el acomodo de las imágenes, textos y otro tipo de medios dentro de la estructura reticular del sistema, si no que es imprescindible tener claro el tipo de medio, periodicidad de actualización, involucrados en la creación y manteniendo de esto mismos, de esta manera tendremos de antemano razón y conocimiento sobre como proceder y a quien acudir a la hora de realizar diseño y arquitectura de información.

Objetivos de los Alcances El objetivo de este segundo plano es definir: 1. Las especificaciones funcionales y componentes 2. Los requerimientos de contenidos

Análisis de Información

Formatos disponibles: 1- Análisis de plataforma (si es comercial o interna ver historial, analíticos y otros métricos que proporciones información valiosa) 2- Listas de inventario de especificaciones funcionales (evernote, basecamp, trello, google docs) 3- Directorio de contactos (basecamp, CRM)

Guía Práctica

5planos del

Actividad Realizar un análisis de plataforma, inventario de especificaciones funcionales, aspectos técnicos, requerimientos de contenidos y un directorio de contactos de las personas involucradas dentro del proceso de gestión y administración de contenidos. Análisis de plataforma: Es importante identificar y visualizar plataformas comerciales que se apeguen a las especificaciones proyectadas para el desarrollo. En el caso de desarrollos personalizados a la medida, es necesario contar con un amplio conocimiento sobre las capacidades y limitaciones en materia de infraestructura, escalabilidad, ancho de banda entre otras cuestiones.

Al realizar este tipo de análisis se identifican a manera de listado los aspectos técnicos, recursos disponibles, presupuestos y se revisan las especificaciones funcionales proyectadas para tener así un claro panorama de que todo este alineado con las

necesidades y objetivos a cubrir. Las actividades a realizar en este segundo plano, son más de carácter organizacional en donde se pueden dar de manera colaborativa entre líderes de proyecto, diseñadores UX,

jefes de desarrollo y project managers. Ya que se pretende llevar un consenso general

2 organizada en pro de conseguir un desarrollo de proyecto exitoso y actuar de manera

que cubra las necesidades y objetivos proyectados. Estos entrañables pueden consistir de documentos compartidos en alguna plataforma de administración de proyectos que permita el acceso a todos a una linea de tiempo que capture el recopilado de estos documentos.

La Estructura

Guía Práctica

5planos del

El tercer plano es la estructura, en este plano definiremos el flujo de la interacción, comportamiento, reacciones y delimitación de los componentes así como sus reacciones ante ciertas tareas. Es también en este plano donde se define el ordenamiento de la información, mejor conocido como AI ( architecture information ), acomodo de elementos dentro de la interface, jerarquización de opciones y componentes de navegación, taxonomía de catálogos de información y ordenamiento de secciones. Dentro del plano de la estructura, el diseño de interacción comprende la 5 identificación de las opciones involucradas dentro de cumplimiento de ciertas tareas u objetivos. Mientras que la arquitectura de información comprende la identificación y organización de opciones involucradas en el proceso de suministrar información de manera correcta a los usuarios.

3 2

Objetivos de la Estructura El objetivo de este tercer plano es definir: 1. La arquitectura de la información 2. Diseño de interacción 3. Casos de Uso

Flujo de Interacción

Obje ct

Formatos disponibles: 1- Flowcharts (Lucichart, Omnigraffle, Gliffy, Xmind ) 2- Architecture information, site map, taxonomy (Quirk tools Smap, Excel, Numbers, Google docs, Evernote, etc) 3- Use Cases (creatively, evernote, Excel, Google Docs)

t iv es

Guía Práctica

5planos del

Actividad A- Diagramas de flujo: Realizar un diagrama de flujo por cada una de las secciones que contendrán un flujo de interacción dentro del sitio-sistema para poder identificar claramente las rutas de acceso, posibles descarrilamientos, pero principalmente para poder identificar el inicio y el fin de un proceso de interacción con la meta u objetivo a cumplir. Estos diagramas se pueden realizar en papel a manera de sketches rápidos, pero de preferencia se recomienda usar algún tipo de herramienta que facilite el acceso compartido a estos, mediante la generación de archivos hospedados en la nube para su fácil consulta. Ademas es recomendable imprimir y tener un mapa organizacional en algún lugar accesible para todo el equipo ya sea en pared, o en algún pizarrón compartido. B- Arquitectura de la información: 5 Realizar un documento general que capture un esquema organizacional de la navegación global del sitio/sistema, con el objetivo de identificar la jerarquización de las secciones y áreas de mayor importancia dentro del flujo de navegación. Se recomienda realizar un listado de las secciones del 4 sitio, de preferencia de manera secuencial en donde se enlistan las secciones principales y las sub categorías se encuentran desplegadas bajo su categoría padre. Otro diagrama que se recomienda realizar para poder manera de manera visual el flujo y acomodo de esta información es, un organigrama general de todo el mapa de información del sitio. Estos mapas pueden ser de manera jerárquica, matrix, orgánica o secuencial. 3 De igual manera que cualquier otro material que se este generando como entregable, deberá estar accesible de preferencia en una plataforma compartida en la nube o de manera impresa en un wall 2 board al cual todos tengan acceso para su consulta. C- Casos de Uso: Realizar un caso de uso, en donde se describa de manera narrativa paso a paso cada punto dentro del proceso de interacción, la mejor manera es siendo directo, conciso y muy breve en el tipo de narrativa, ya 1 que lo que se pretende es poder identificar rápidamente quien hace, que hace y como lo hace ademas de asegurar que las especificaciones y componentes que se planearon para este tipo de interacción son los correctos. Para realizar los casos de uso, se recomienda utilizar un formato tipo template que pueda ser replicado para capturar cuantos casos de uso queramos plasmar dentro de nuestro diseño de interacción. También se puede realizar un pequeño esquema o diagrama visual en donde se refleje esta misma interacción plasmada de forma narrativa.

El Esqueleto

Guía Práctica

5planos del

El cuarto plano es el esqueleto, es el plano en donde se diseña la interface gráfica de navegación y el acomodo de sus componentes, tales como botones, pestañas, bloques de texto, hipervínculos, campos de texto, etc. Dentro del proceso de diseño de la interface es imprescindible tomar en cuenta el ordenamiento consistente de los componentes de la interfaz, ademas de tomar en consideración los patrones universales o parámetros ya existentes que por lo general los usuarios ya están familiarizados con su uso. De esta manera podremos generar un diseño de interfaz simple, fácil de entender, pero sobre todo libre de componentes que no son necesarios.

Debe de ser posible identificar y poder diferenciar en una primer lectura los elementos de interfaz de los elementos de contenido. Si es este el caso, podemos argumentar que hemos logrado un diseño de interfaz exitoso que facilitara el cumplimiento de tareas encaminadas hacia un objetivo.

Cuando hablamos de los componentes de la interfaz, hablaremos de los 3 afordances que pudieran entenderse también figura-forma y función. En donde ya hay un basto cuerpo de conocimiento sobre ciertos parámetros y 2 patrones de diseño/función de ciertos componentes que funcionan de manera ya predeterminada y que no es necesario reinventar cada vez. Simplemente es recomendable tener en cuenta estos parámetros, revisar como se comportan, como se ven en sus ambientes nativos para poder considerarlos a la hora de realizar 1 el diseño de interfaz.

Objetivos del Esqueleto El objetivo de este cuarto plano es definir: 1. El diseño de la interface 2. Wireframes de pantallas 3. Prototipo rápido para probar flujos de interacción

Formatos disponibles: 1- LoFi Wireframes (balsmaiq, pidoco, mockingbird) 2- MedFi interactive Wireframes (fireworks, balsamiq, axure, antetype)

Wireframes

Guía Práctica

5planos del

Actividad A- LoFi wireframes: Realizar una serie de diagramas esquemáticos de baja fidelidad, mejor conocidos como wireframes, en donde se pretende realizar de manera rápida el acomodo de la estructura y elementos de interfaz o configuración dentro del área perceptual o retícula. Es recomendable realizar los wireframes en alguna aplicación de preferencia diseñada para realizar este tipo de esquemáticos, ya que por lo regular ofrecen librerías de componentes para agilizar la tarea. Ademas es indispensable tomar en consideración que este tipo de esquemas deben de realizarse de manera rápida para visualizar e ir puliendo gradualmente hasta llegar a los gráficos de alta fidelidad que es donde se implanta ya el estilo de diseño los cuales se explicaran en el plano siguiente. Los wireframes al igual que cualquier otro material que se este generando como entregable, 5 deberá estar accesible de preferencia en una plataforma compartida en la nube o de manera impresa en un wall board al cual todos tengan acceso para su consulta.

B- MedFi interactive wireframes: Una vez que tenemos diseñadas todas y cada una de las pantallas de la interface en wireframes o esquemas de baja fidelidad, se recomienda realizar un prototipo interactivo en donde se pueda probar el flujo de interacción, al realizar conexión entre las pantallas generadas, muchos de las aplicaciones o softwares que se utilizan para la realización de wireframes, ofrecen la posibilidad de 3 realizar estos prototipos de baja fidelidad, en donde por lo general se asignan hipervínculos o hot spots que conectan 2 una pantalla con otra para prototipar y probar el flujo de navegación. Los prototipos de media fidelidad muchas de las veces si se desarrollan utilizando alguna aplicación especializada para el diseño de wireframes, ofrecen la posibilidad de publicar en la nube dando como resultado una liga de acceso al prototipo el cual puede ser compartido vía correo, mensaje o incluso muchas de las veces se puede ingresar el correo de las personas involucradas y acceder al prototipo para su prueba.

Estos casos de uso al igual que cualquier otro material que se este generando como entregable, deberá estar accesible de preferencia en una plataforma compartida en la nube o de manera impresa en un wall board al cual todos tengan acceso para su consulta.

La Superficie

Guía Práctica

5planos del

El quinto y ultimo plano de esta metodología es la fase en donde una vez comprobado y aprobado el flujo de interacción y el acomodo de los componentes, se realizan ya de manera visual las pantallas de cada sección del sitio osistema. Ademas de definir los estilos visuales de todas las pantallas o secciones del sitiosistema, es en esta fase también donde se da la realización de una guía de estilos visuales, la cual dictara los parámetros de diseño para asegurar consistencia y uniformidad en todo momento, apegándose rigurosamente los lineamientos, valores y atributos de marca indicados en la plataforma o brand DNA.

En este plano ademas es donde se alinea el lenguaje de diseño a las especificaciones de marca, en donde se tiene que apegar a los lineamientos de 4 uso de marca señalados dentro de la plataforma de marca y guías de estilo. En el caso de estar trabajando un diseño donde se esta creando desde cero todo paramento de diseño incluyendo los lineamientos de marca, habrá que tomar iniciativa en realizar esta guía de estilo que indique los usos correctos, componentes de UI, colorimetria, uso de tipografías, iconografía entre otros componentes 2 de estas guías de estilos.

Objetivos de la Superficie El objetivo de este quinto plano es definir: 1. El diseño visual de la interface gráfica 2. Prototipo interactivo de alta fidelidad 3. Brand guidelines

Mockups & Prototypes

HOME STORE CHARACTERS BLOG CONTACT

Formatos disponibles: 1- HiFi Mockups (Photoshop, Sketch, Fireworks) 2- Interactive Prototype (inVIsion App, Marvel App) 2- Band guidelines (brandfolder)

Guía Práctica

5planos del

Actividad A- Diseño visual de pantallas (mockups) Realizar el diseño de la interface gráfica, en donde se aplique el estilo visual en alta resolución de todos los componentes UI, estilo de imágenes, color, tipografías, etc. Este proceso de diseño gráfico puede ser realizado en diversas aplicaciones especializadas que nos ayudan a generar imágenes o pantallas de cada sección del sitio/sistema en alta resolución, desde aplicaciones de software libre como gimp, inkscape, o también software comercial como es el caso de adobe photoshop, ilustrador, indesign, fireworks, u otras de uso mas especifico para ambientes nativos de plataformas móviles como es el caso de sketch, antetype entre otras, aquí si que es cuestión de preferencia personal y de presupuesto. B- Prototipo interactivo de alta fidelidad 5 Realizar un prototipo interactivo de alta fidelidad para cada sección del sitio/sistema en donde se pruebe en un ambiente mas apegado a la realidad el flujo de interacción, para comprobar e identificar posibles errores, que pudieran ser corregidos previos a la producción de programación. 4 Estos prototipos se recomienda se hagan conectando las imágenes producidas en el diseño visual de pantallas o mockups utilizando invision app, marvel app o maquetando en html y css, en el caso de marvel e invision ambas plataformas ofrecen acceso compartido interacción del equipo en su plataforma, ofreciendo herramientas como modo de presentación, comentarios activos, live sharing, entre otros, ambos ofrecen planes accesibles y premium en cuanto a costo se refiere. 3 En caso de optar por el maquetado html & css, se pueden generar ligas de acceso en ambientes locales o de publicación abierta en la red para que se pueda accesar desde cualquier parte y/o 2 dispositivo en el caso de tratarse de un desarrollo responsivo o aplicación móvil. C- Brand Guidelines Realizar una guía de estilos y usos de componentes UI, apegados a los lineamientos de marca que sirva para poder acceder de manera rápida y tener presente en todo momento los parámetros de diseño que se tienen que seguir durante todo el desarrollo, ademas estas guías son muy 1 recomendables para poder compartirlas cuando se trabaja con equipos externos o incluso para mantener un repositorio de material gráfico que pueda ser compartido con el equipo de desarrollo de programación. Estas guías se pueden realizar en cualquier software de diseño, tales como photoshop, indesign, ilustrados, sketch y generar un documento en formato PDF para compartirlo. Se recomienda generar un repositorio de acceso compartido como brandfolder, git, pixel lapse, filecamp, entre otros para facilitar el acceso a todos los involucrados en el proceso de desarrollo.

Conclusión Los 5 Planos del UX Pudiéramos concluir remarcando una vez más la importancia del planteamiento estratégico dentro de la gestión de diseño de experiencias para productos digitales. Ademas de aportar al conocimiento colectivo de la comunidad creativa de habla hispana una guía práctica que promueve el uso de la metodología de los 5 planos del UX, facilitando la implementación y el consumo de su información de manera filtrada, agilizando la comprensión del planteamiento intelectual y los pasos a seguir en el proceso de gestión y desarrollo de productos digitales centrados en el usuario final. Nuestra meta global es el aportar herramientas capaces de poder alinear los objetivos del usuario con los del sistema y sus administradores para poder lograr productos digitales exitosos que sean usables, medibles, vendibles y memorables.

Guía Práctica

5planos

UX Guía Práctica

5planos

del