Pamela Rodríguez

Concretando la interfaz: Niveles de prototipeo

lasr21 — Fri, 06 Jul 2012 16:17:42 +0000

Concretando la interfaz: Niveles de prototipeo lasr21 Fri, 07/06/2012 - 11:17

Publicado en

SG #36

Usabilidad

Autor

Pamela Rodríguez

Comenzando por establecer términos relevantes, con prototipo (o wireframe) se hace referencia al producto gráfico que resulta de plasmar las ideas relacionadas con la construcción de una interfaz. Esto significa que es una imagen que representará la visión que el equipo tiene de cómo debe ser el proyecto terminado, una fotografía del futuro.

Antes de empezar a hablar sobre la creación de prototipos y las diversas opciones que existen para ello, es importante destacar la razón por la cual estos no son un proceso prescindible. Se han realizado muchos debates al respecto de porqué los prototipos podrían llegar a ser una pérdida de tiempo y de cómo los tiempos de desarrollo del proyecto como actividad integral quizá no los permitan. Sin embargo, incluso si no se llega a un prototipo completo de calidad alta, no es un proceso que sea recomendable evadir.

Todos los procesos, investigaciones, análisis y conceptualizaciones realizados durante el proceso de diseño de una interfaz efectiva se ven integrados en una serie de prototipos de calidades variables. El reflejar todo esto en un solo producto terminado va más allá de ser una simple página más en el portafolio empresarial o profesional, puesto que es una herramienta sumamente poderosa de comunicación entre los miembros de un equipo, e incluso entre el equipo y otros miembros de la organización.

Al momento de intercambiar ideas con el equipo de trabajo, plasmarlas como elemento gráfico es siempre más eficaz que una simple explicación o un documento escrito, este proceso puede llevarse a cabo en conjunto con pizarrones blancos (de pared completa son los más útiles) o con rollos de papel bond y marcadores gruesos. De este modo, los participantes se aseguran de estar ‘en el mismo canal’ o siguiendo una misma línea al momento de llegar a la culminación de la parte de diseño del proyecto.

Y no solo se trata, como se mencionó antes, de comunicación entre los miembros de un mismo equipo. Vender una idea a las personas que toman las decisiones de peso en una empresa es mucho más simple cuando se cuenta con una propuesta gráfica completa y no solo resultados del análisis y la planeación. Por otra parte, y más a un nivel operativo, la comunicación entre el equipo de diseño y el equipo de desarrollo es siempre un tema complicado por la variación de perfiles profesionales entre los miembros de ambas partes. La existencia de algo gráfico que concrete las ideas del equipo de diseño es un paso imprescindible para que la gente de desarrollo sepa cómo avanzar y continuar con los esfuerzos dentro del proyecto.

Niveles de prototipeo

Dejando atrás los miles de argumentos que podrían defender el uso de prototipos y habiendo dejado establecido que son un paso necesario, cabe resaltar ahora que existen niveles de calidad en la creación del prototipo. Utilizando la palabra ‘calidad’ como referencia a la cantidad de detalle que se refleja en la representación gráfica de cada pantalla dentro del proyecto.

Para efectos prácticos, y siendo normalmente los prototipos generados durante sesiones de lluvia de ideas entre miembros del equipo, existen los llamados de calidad baja. Estos son más como dibujos o bocetos de lo que se tiene planeado plasmar en la interfaz, el posicionamiento, los tamaños aproximados, etc. Normalmente no incluyen colores (o muy pocos) ni imágenes reales (solo algunos bocetos representativos de iconos en algunas ocasiones).

Existen, además, diversas herramientas en línea que pueden emplearse para el desarrollo de prototipos en calidad baja si no se es muy afín al uso de papel y lápiz o marcadores y pizarrones. El medio digital, por otra parte, nos permite difundir de manera más sencilla el resultado de la lluvia de ideas o la conceptualización en equipo de una interfaz. Estas herramientas disponibles son:

Balsamiq (gratuito en línea, con costo si se quiere instalar en su computadora)
Mockflow (gratuito en línea con limitaciones de cantidad de prototipos)
Canva (freemium)

Hay muchas otras herramientas en línea disponibles para estos fines, mas estas son las que por experiencia de uso se recomiendan. También existen herramientas de prototipeo para aquellos que están acostumbrados al uso laboral de un dispositivo móvil tipo tablet.

Como un tema aparte existen además los prototipos de calidad alta, que son aquellos que ya se concretan más como una fotografía de lo que sería la interfaz terminada. Esto significa que en esta ocasión sí deben presentarse los colores reales, ejemplos de imágenes y texturas, iconografía, botones y demás elementos necesarios.

Un prototipo de calidad alta, por su alto nivel de detalle, se lleva a cabo por medio de software de diseño como Adobe Photoshop, Fireworks o Illustrator. Se sugiere el apoyo de galerías de elementos gráficos enfocados a la plataforma que se requiera para agilizar el proceso lo más posible.

Existen, por supuesto, alternativas gratuitas al software de Adobe tanto en línea como disponibles para instalación. Una herramienta excelente para descarga e instalación es Inkscape. Si se desea trabajar en línea, hay alternativas como Pixlr o Aviary Phoenix.

En el caso de un prototipo de alta calidad, por supuesto, es mucho más relevante el seguimiento estricto de estándares de diseño generales y por plataforma. En el caso de web, hay archivos de apoyo a la creación de prototipos de alta calidad bajo el estándar de retículas 960 disponibles para descarga (http://960.gs/), así como para prototipeo bajo los estándares marcados por la nueva tendencia de retículas fluidas (http://lessframework.com). Dependerá del enfoque, las necesidades del proyecto en específico y de retículas estáticas contra retículas fluidas el cual es un tema muy extenso, por lo que se recomienda documentarse ampliamente al respecto.

Prototipos estáticos y prototipos funcionales

Parte del debate en contra de la creación de prototipos (principalmente prototipos de alta calidad) es la posibilidad de saltar directamente a un prototipo funcional o demo, es decir, usar una carcasa HTML y CSS para plasmar ideas tanto visuales como de navegación, la cual ahorrará mucho trabajo de front-end al momento de pasar a la etapa completa de desarrollo. Esta no es una manera incorrecta de trabajar tampoco, y al final es cuestión de definir equipos y capacidades.

Si su equipo de diseñadores no tiene las capacidades necesarias para generar prototios funcionales que puedan después ser parte del desarrollo, los prototipos estáticos son su mejor opción a menos que planee incluirse gente de desarrollo en las fases de diseño.

Bio

Pamela Rodríguez (@thepam) es egresada de la Universidad de Monterrey de la carrera de Ingeniería en Sistemas Computacionales con estudios avanzados en diseño web. Actualmente es Diseñadora de interfaces para aplicaciones móviles en Naranya Apphouse, docente, conferencista y autora de artículos relacionados. http://thepam.blogspot.com

Técnicas efectivas para arquitectura de información

Anonymous — Thu, 25 Aug 2011 17:46:19 +0000

Técnicas efectivas para arquitectura de información Anonymous Thu, 08/25/2011 - 12:46

Publicado en

SG #33

Usabilidad

Autor

Pamela Rodríguez

El primer problema detrás del diseño de una interfaz es que la mayoría de las personas no comprende del todo en qué consiste la arquitectura de información, siendo que se trata del pilar más importante que soporta el éxito de dicha interfaz. Y es que, visto de forma lógica y directa, ¿cómo va el usuario a aprovechar los contenidos y funcionalidades que se le ofrecen si no puede llegar a ellos?

La arquitectura de información define, a grandes rasgos, qué contenido se presentará en un sitio o aplicación y de qué maneras podrá llegar hasta él un usuario. Por consiguiente, un diagrama de la arquitectura de información es una especie de mapa hacia todos los posibles destinos. Tener en claro todos los caminos que existirán para llegar a cada fragmento de contenido agilizará y asegurará la efectividad de procedimientos posteriores como el diseño de la navegación y la organización de la información dentro de cada página o pantalla.

Distintos Tipos de Arquitecturas

Para comenzar a construir la arquitectura de información es necesario conocer los tipos de arquitectura con los que se puede llevar a cabo la organización del contenido. De manera muy general, se pueden establecer dos tipos de arquitectura de información:

Tener una arquitectura de información ancha significa que se cuenta con un esquema de arquitectura que no conlleva muchos clicks por parte del usuario para llegar hasta el nivel de mayor detalle, pero que se tienen muchas opciones en cada nivel. Por otro lado, una arquitectura de información profunda es aquella que cuenta con menos opciones por nivel, pero que requiere de mayor número de clicks para llegar al nivel de menor jerarquía. La figura 1 muestra visualmente ambos tipos de arquitectura, profunda y ancha.

Definiendo la Arquitectura de Información: Card Sorting

La técnica de card sorting conlleva una explicación sencilla. Se trata de un método de definición de arquitectura de información en el cual se establecen las clasificaciones de contenido y posteriormente se ordenan hasta encontrar la organización óptima para las mismas.

El material requerido para este proceso es un simple paquete de post-its. También puede ser llevado a cabo por medio de tarjetas. En cada post-it o tarjeta se escribe el nombre de una sección o página del contenido de la aplicación o sitio web, y posteriormente se realiza el card sorting ya sea en su modalidad básica o invertida. Los explico a continuación.

El card sorting básico es el proceso que se sigue al presentar un conjunto de tarjetas con los nombres que identifican el contenido, solicitando a los participantes (que pueden ser los miembros del equipo de diseño o un grupo de usuarios seleccionados) que los organicen de la manera más intuitiva posible.

El card sorting invertido se realiza cuando a los participantes en el proceso (igualmente pueden ser miembros del equipo o usuarios selectos) se les presentan las tarjetas con los nombres que identifican el contenido, pero en este caso éstas se encuentran ya organizadas de una manera predefinida por el moderador del procedimiento. Los participantes deberán modificar esa organización de acuerdo a los factores que consideren que ayudarán a mejorarla.

Al finalizar alguno de los dos procesos anteriormente mencionados, el resultado será la base que definirá la arquitectura de información del proyecto en desarrollo. Sin embargo, aún queda trabajo por hacer para completar el procedimiento.

Construyendo el Diagrama de Arquitectura

Una vez completados los procedimientos para definir la arquitectura de información, es necesario plasmarla de manera clara para que sirva como una referencia dentro del resto del proceso de desarrollo del proyecto. Esto significa el establecimiento de jerarquías sólidas, caminos que entrelazan al contenido, e incluso grados de detalle como la restricción de contenido a usuarios con un registro previo. Para lograr esto, existen diversos métodos de diagramado de arquitectura de información que pueden ser utilizados.

Uno de estos métodos es el diagramado de jerarquías estrictas, que consiste simplemente en plasmar la información de la arquitectura en un mapa jerárquico de crecimiento vertical (en el caso de arquitecturas profundas) u horizontal (en el caso de jerarquías anchas), tal como se muestra en la figura 2.

Se le puede agregar más detalle al diagrama especificando la acción que vincula cada elemento dentro de la jerarquía (como un click o una acción de tipo “drag and drop”). Es posible, además, agrupar los elementos en grupos de requisición de registro de usuarios y de contenido de disposición libre.

Por otro lado, existen métodos de diagramado más detallado y no limitados a jerarquías estrictas (aquellas con un solo camino entre elementos de contenido). Se trata del vocabulario visual propuesto por Jesse James Garrett (que puede ser consultado en su totalidad en http://www.jjg.net/ia/visvocab/). Consiste en utilizar una gama iconográfica para representar los diversos tipos de contenido existentes, los cuales son una página, un archivo, o un conjunto de alguno de ambos.

Estos contenidos, a su vez, pueden estar interconectados entre si y estas conexiones pueden representar más de un camino para llegar a un mismo destino. Pueden, además, representarse condiciones y decisiones como en un diagrama de flujo. Existen, a su vez, maneras de representar agrupaciones entre distintos contenidos o funcionalidades, así como nomenclatura para representar repeticiones de los mismos. La figura 3 muestra un fragmento de un diagrama realizado por medio de este método.

La iconografía para este tipo de diagramas está disponible para diversos paquetes de software de diagramado, y se pueden conocer algunos en la liga proporcionada anteriormente.

Al final, lo importante es elegir la combinación de métodos que se acoplen mejor al tipo de proyecto con el que se esté trabajando para conseguir el mejor resultado posible. Por ejemplo, un sitio web informativo comúnmente tiene una navegación poco compleja, por lo que una estricta jerarquía funcionará perfectamente. Sin embargo, si se trata de una red social, una jerarquía estricta no permitiría reflejar en su totalidad la capacidad en funcionalidad y disponibilidad de contenido del proyecto.

Bio

Pamela Rodríguez es egresada de la Universidad de Monterrey de la carrera de Ingeniería en Sistemas Computacionales con estudios avanzados en diseño web. Actualmente es Diseñadora de Interfaces para Aplicaciones Móviles en Naranya AppHouse, docente, conferencista y autora de artículos relacionados. @thepam http://thepam.blogspot.com

Perfiles de Usuario: Una herramienta indispensable

Anonymous — Mon, 16 May 2011 17:42:49 +0000

Perfiles de Usuario: Una herramienta indispensable

Anonymous Mon, 05/16/2011 - 12:42

Publicado en

SG #32

Usabilidad

Autor

Pamela Rodríguez

Llevar a cabo la construcción de una interfaz de usuario efectiva involucra una serie de acciones que van mucho más allá de acomodar controles y elementos conocidos. Incluso antes de cualquier diagramado de procesos, es necesaria una investigación completa para establecer de manera sólida tanto las metas deseadas por la organización, como lo que los usuarios del sistema esperan ver o lograr al utilizarlo.

En primera instancia, es recomendable realizar un análisis del proyecto dentro del contexto de los objetivos del negocio. Es importante tener claros los objetivos que el proyecto debe cumplir al ser completado: ¿Qué estrategias de negocio va a complementar? ¿Cuáles son los procesos de los que va a formar parte?

Posteriormente, el enfoque del análisis deberá contestar preguntas de proceso más específicas tales como: ¿Qué información se necesita recopilar de los usuarios y de qué manera? ¿Será necesaria la integración con redes sociales? ¿Involucrará procesos de cobro? ¿Se requerirán zonas restringidas, es decir, que involucren la creación de cuentas de usuario?

Tras tener claras las expectativas por el lado del negocio, es necesario también llevar a cabo un análisis para conocer lo que los usuarios esperan del sistema una vez que lo utilicen. Para esto, es necesario en un inicio tener una segmentación clara de la audiencia objetivo, es decir, saber de manera precisa quienes serán los usuarios del sistema que construiremos.

Para obtener esta información podemos realizar encuestas entre personas de la audiencia objetivo. Aún si el desarrollo es interno, es decir, para los empleados de la organización, es de gran relevancia conocer sus perfiles como futuros usuarios del sistema. Si por otra parte, se trata del rediseño de una herramienta ya existente, este análisis puede apoyarse en estadísticas de uso de la versión vigente.

Una vez reunidos los datos necesarios, plasmarlos para su correcto análisis involucra la creación de perfiles individuales, también conocidos como personas. En este contexto, persona se refiere a un perfil y no a un ser humano específico, para evitar confusión en este artículo nos referiremos a este concepto como “perfil de usuario”. La definición de perfiles de usuario es una gran herramienta para aterrizar los resultados del análisis de la audiencia objetivo.

Definición

Para crear un perfil de usuario se sintetizan las características recurrentes entre la información recopilada durante el estudio y se crea un perfil de personaje ficticio que los englobe. De esta manera, se puede resumir el estudio en un número reducido de perfiles que se tomarán en cuenta para el diseño de la interfaz.

La especificación de un perfil típicamente incluye la siguiente información:

Nombre y fotografía (no es que realmente exista el individuo, pero ponerle un nombre y darle una imagen ayuda a enriquecer el perfil, y lo humaniza más que solamente referirse a él como ‘el número 6’ o algo por el estilo).
Datos personales (edad, ocupación, entre otros).
Breve descripción personal.
Intereses personales.
Niveles y especificaciones de involucramiento tecnológico (Frecuencia con la que navega o utiliza la computadora, dispositivo o computadora que utiliza, navegador preferido, etcétera).
Nivel socioeconómico.
Nacionalidad (¿Se necesitará la inclusión de traducciones a otros idiomas o la adaptación de un idioma a distintos usos del mismo? Este último punto refiriéndose a que el mismo idioma puede tener variaciones de un país a otro).
Metas personales (¿con qué objetivo utiliza el sistema?, ¿cuáles son sus prioridades? ¿qué velocidad espera de sus actividades relacionadas?).

Es recomendable utilizar una plantilla para documentar los perfiles. Si buscas en libros y en Internet seguramente podrás encontrar distintas plantillas. Escoge alguna con la que te sientas cómodo para usarla de base y modifícala de acuerdo a tus necesidades. Lo realmente importante es que la información recopilada para el perfil de la persona sea coherente y esté organizada de forma clara y sencilla.

En la figura 1 muestro un ejemplo de una plantilla para documentar un perfil, propuesta por el consultor y autor Jean-Claude Grosjean [1].

Figura 1. Plantilla para definición de perfil

Usos

El planteamiento de un perfil puede ser de gran utilidad para el equipo de trabajo. Además del uso primario para documentar y comunicar la información recopilada por el estudio de mercado, también sirven de apoyo al desarrollar las historias de usuario. El darle un nombre a la persona que realiza la acción dentro de una historia de usuario le da una mayor solidez, más aún cuando detrás de ese nombre ya hay una definición de características que explican a detalle el comportamiento que la historia del usuario expone.

Los perfiles también son de gran ayuda durante el establecimiento de prioridades a lo largo del proyecto, ¿qué funcionalidades o elementos serán prioritarios dentro del desarrollo del mismo? Esta pregunta puede ser resuelta con la ayuda de los perfiles, pues el estudio de segmentación debe definir qué tipo de usuarios son los que abarcan mayores partes del mercado meta. Los perfiles de estas personas deben ser marcados como prioritarios y, por consiguiente, la prioridad de funcionalidades y elementos puede posteriormente basarse en esos datos.

Conclusión

La definición de perfiles o personas puede apoyar en gran manera a la integración de actividades al construir un sistema o aplicación de software. El detalle que se le de a los perfiles dependerá de la solidez de los datos recopilados durante la investigación previa, pero es sin duda una herramienta de gran utilidad que no debe ser ignorada.

Bio

Pamela Rodríguez Domínguez es egresada de la Universidad de Monterrey de la carrera de Ingeniería en Sistemas Computacionales con estudios avanzados en diseño web. Actualmente es Diseñadora de Interfaces para Aplicaciones Móviles en Naranya AppHouse, docente, conferencista y autora de artículos relacionados. @thepam http://thepam.blogspot.com