Categoría: Diseño

¿De verdad ese CTA tiene que llamarse “Empezamos”?

Al hilo de un artículo publicado por Aurora Harley y Kim Flaherty titulado “Get Started Stops Users”, hoy vamos a reflexionar en el blog sobre la problemática de utilizar un CTA que diga “Empezar” (o “comenzamos” o términos similares), que tan de moda está en muchos sitios webs de servicios y suscripciones. Revisaremos qué barreras -desde la perspectiva de la usabilidad- presentan estos call to action, para lo que nos vamos a basar en su artículo, del que traduciremos algunos fragmentos.

Ilustración que nos muestra la esencia de una llamada a la acción (CTA, en inglés).
Ilustración que nos muestra la esencia de una llamada a la acción (CTA, en inglés).

Como ellas, nosotras también hemos observado esta tendencia en el diseño web que se vuelve cada vez más problemática: el botón “comenzar” (Get Started, en inglés). Este botón suele ser el CTA más destacado y atractivo en algunas páginas de inicio, y puede parecer el camino correcto para casi todas las actividades que un usuario busca completar, ya sea registrarse en un servicio o simplemente buscar detalles sobre la organización y los productos ofrecidos. Pero cuando los usuarios menos experimentados encuentran únicamente un botón como este y al pulsarlo llegan a un flujo de acciones inesperadas (registros, suscripciones, etc.) en vez de proporcionarles la información básica que probablemente esperaban cuando hicieron clic, lo que les lleva es a perder la confianza y frustrarse con el sitio.

Un estudio reciente de Nielsen sobre websites de e-commerces demuestra que varios usuarios pulsaron CTAs de este estilo (comenzar, empezamos, etc.) esperando, como decíamos, información sobre el producto, pero de repente llegaron a encuestas, onboardings, funnels de ventas o elementos similares y no a nada relativo o que contuviera información sobre la marca, el producto, el servicio o lo que estuviesen visitando. Esto ocurría especialmente en sitios que ofrecen servicios de suscripción, bien sean plataformas online, bien sean productos que se envían con determinada periodicidad, ya que comienzan con una creación de cuenta o un proceso de registro. Más allá del modelo de negocio del que hablemos, estos y otros CTAs ambiguos pueden empeorar notablemente la experiencia de usuario y por eso debemos, en la medida de lo posible, evitarlos.

Algo que repetimos una y otra vez en nuestros cursos de UX Learn, especialmente en el de UX para e-commerce, es que es necesario conocer a tus potenciales usuarios y dirigirte a todos ellos, o, al menos, adaptar tu producto digital para que cuantos más lleguen y se queden, mejor. Para ello contamos con herramientas de investigación y con el expertise de los propietarios del producto, que conocen o deberían conocer a sus potenciales clientes, pero es algo que, en muchas ocasiones, dejamos de lado y damos por supuesto realidades que no son tal.

Un error crítico en muchos sitios web es diseñarlo únicamente para aquellas personas que ya conocen la compañía y los servicios que proporciona. Asumiendo que todos los usuarios y usuarias están familiarizados con sus ofertas, estos sitios web intentan que las personas se registren sin explicar lo que hacen. Tal vez confían demasiado en las campañas de marketing previas o tal vez se debe al puro ego de los y las responsables, pero solo porque una empresa haya existido durante un tiempo y muchas personas lo sepan, no significa que cada visitante del sitio tenga el mismo nivel de conocimiento previo. En resumen, como dicen Harley y Flaherty, “no dejes que tu ego dicte el diseño”.

Si colocas un único CTA above the fold que lleve al usuario al proceso de registro, sin más información previa, le generarás una frustración y una desconfianza hacia tu sitio que puede que haga que lo pierdas como potencial cliente, que no llega donde quiere sino que siente que se ve forzado a contratar un servicio que no conoce. Evita cometer esos errores, pónselo fácil a tus usuarios menos avanzados, aquellas personas que quizá no caigan en la cuenta de que la información está debajo, que pueden hacer scroll, y te evitarás abandonos repentinos.

Son numerosos los ejemplos de sitios webs con CTAs de este estilo, y no vamos a pararnos aquí en reseñar ejemplos (que además podéis ver en el post original), sino que vamos a saltar directamente a las recomendaciones para evitar confusiones y frustración en tus usuarios.

Un rótulo genérico como “empezamos” proporciona sensación de información para casi cualquier actividad del cliente, llevando a los usuarios desprevenidos por el camino equivocado hasta acabar perdidos, desinformados y frustrados hasta un punto en que ya no están interesados ​​en el servicio, abandonándolo o marchándose a un competidor. A pesar de que el usuario siga el camino de baldosas amarillas hacia un funnel de conversión, esto puede acabar siendo un camino de oportunidades perdidas para las compañías.

Al igual que su pariente “Saber más”, el CTA “Empezamos” es demasiado genérico para mantenerse por sí solo y puede interpretarse de muchas maneras. Si tu intención es proporcionar un punto de entrada en un proceso, ya sea un cuestionario o un funnel de ventas, evita los CTAs genéricos y aumenta la información indicando exactamente lo que los usuarios esperan (información, principalmente).

“Engañar” a tus usuarios con botones como “Empezar” puede darte más clics en el CTA, pero si estableces una expectativas equivocadas puedes alcanzar objetivos superficiales de conversión sin mantener los clientes contentos o leales al final del proceso. Por eso, recuerda, es mejor estar próximo y dejar que los usuarios se enganchen y se comprometan cuando estén listos para ello, no cuando tú les fuerces.

Origen: ¿De verdad ese CTA tiene que llamarse “Empezamos”?

Responder al usuario digital: el desafío de los bancos chilenos | IDA Chile

La banca chilena, y en general los servicios digitales en Latinoamérica, muestran una rápida evolución. Las nuevas tendencias los empujaron a implementar acciones estratégicas para responder a sus usuarios. Ahora, deben ser capaces de identificar nuevos nichos de crecimiento y anticiparse a los cambios tecnológicos.

Los desafíos digitales de la banca en Chile y Latinoamérica

El 2016 se vio marcado por el desarrollo de importantes proyectos tecnológicos en los principales bancos de la región. La actualización de tecnologías y soluciones de omnicanalidad, entre otros, fueron las más grandes apuestas tech del sector bancario.

Pese a ello, la revolución digital y el incesante cambio de los usuarios está obligando a que el rubro se incline a implementar soluciones más radicales.

El 2017 ha sido el año absoluto del móvil. Las aplicaciones y sitios móviles le entregaron al sector bancario la flexibilidad para conectarse con las nuevas tendencias. Esto les permitió incorporar soluciones innovadoras evitando, por ejemplo, quedar fuera del campo visual de sus usuarios.

Según las proyecciones, actualmente debemos identificar una serie de acciones en el sector bancario de la región. A continuación detallamos los que consideramos los desafíos más importantes.

BILLETERAS ELECTRÓNICAS Y PAGOS MÓVILES

Durante 2016 se presentaron diversas soluciones, tendencia que se debería mantener en lo próximo. El nacimiento de más aplicaciones, sumadas a las actuales, entregan comodidad y maximizan la experiencia de los usuarios.

En nuestro país, existe una alta tasa de bancarización y se espera que el sector financiero pueda abarcar el mayor espectro posible de las necesidades bancarias de los usuarios, al menosen cuanto a pagos.

Pagos móviles son una de las innovaciones aplicadas por la banca chilena

CHAT BOT Y REDES SOCIALES

La atención al cliente y lograr una comunicación fluida con las personas son un desafío clave para la industria bancaria. Esto hace que los bancos incorporen soluciones de chat que simulan las respuesta de los operadores humanos.

Otra tendencia que ha cobrado importancia son los servicios transaccionales en las redes sociales. Aquellas soluciones permiten a los usuarios mantenerse en su ubicación geográfica para poder realizar transacciones financieras.

Implementación de chatbots para atención de usuarios en la banca

TRANSFORMACIÓN Y CULTURA DIGITAL

Las acciones de transformación y cultura digital son muy importantes para acoger las distintas tecnologías. Los empleados bancarios deben realizar un cambio cultural, ya que ellos son quienes quienes deben responder a las necesidades de los clientes.

Se deben incorporar nuevos conocimientos en torno a conceptos como Lean Startup, UX, Agile, Scrum y Design Thinking entre muchos otros.

Transformación y cultura digital en la banca chilena

TALENTO DIGITAL

Con la necesidad de acometer la transformación digital, es importante considerar un cambio en los modelos organizacionales e incorpora talento digital a la banca.

Es necesario implementar internamente metodologías que incorporen una cultura digital y se agilicen los procesos. También se necesitará personal competente en áreas específicas, destinados a hacer una optimización de los servicios para el usuario.

Los colaboradores deben, además, tomar el mando de las innovaciones competentes al área. Tienen que visualizar nuevas vías de captación, logrando así una mayor fidelización a través del diseño de productos financieros.

El talento digital debe estar presente en los bancos chilenos

La transformación digital de la banca es un reto que se encuentra activo en nuestro país y el mundo. El banco debe estar donde está el cliente, respondiendo al mismo nivel en los distintos canales ya sea de forma presencial, en oficina o su dispositivo móvil.

Deben seguir el ritmo de las nuevas tecnologías, facilitando la usabilidad y comunicación de los clientes con los distintos productos ofrecidos.

Es importante entregar grandes experiencias de consumo y que estas estén conectadas a las nuevas herramientas tecnológicas. Es clave establecer una cultura digital interna, identificar y adquirir talentos digitales que puedan crear el camino hacia una transformación bancaria digital.

Origen: Responder al usuario digital: el desafío de los bancos chilenos | IDA Chile

Diseñando mejores formularios de registro y login

Diseñar formularios de registro y login para nuestros productos digitales es un elemento central de todo rediseño hecho con una metodología de diseño centrado en el usuario. Virginie Nesa ha escrito un artículo sobre cómo hacerlo mejor.


Imagen de UX Planet

Un usuario medio hace una media de 16 logins al día, por lo que es una acción esencial. Aunque como ya os hemos dicho en otras ocasiones, nos tenemos que esforzar antes en conocer mediante una investigación de usuarios (o un análisis del recorrido de los usuarios) si para el usuario es beneficioso registrarse o por el contrario es un impedimento para usar nuestro producto digital.

Formularios de login

El 82% de las personas olvida su password, y según un estudio de Norman Nielsen el 75% de las personas que intentan recuperar su password no completan la compra después de todo, nos dice Mesa.

Nesa nos recomienda tres mejoras posibles en el login:

  • Visualización de la contraseña: ver la contraseña mientras el usuario escribe ayuda a que este cometa menos errores al introducirla en el formulario.
  • Aclarar los errores: muchas veces los mensajes de error son confusos, si falla un campo especifica cuál es, no lances un mensaje genérico ante el que el usuario no sepa cómo actuar.
  • Permitir a los usuarios seguir logados: para evitar que los usuarios tengan que recordar su contraseña, permíteles que sigan logados en el sistema sin tener que volver a introducir la contraseña.

Formularios de registro

Una de las mejores mejoras de la conversión posibles según Mesa es reducir los formularios de registro al mínimo indispensable.

Nesa nos recomienda varias mejoras posibles en el login:

  • Alinear campos y etiquetas
  • Evitar el campo de texto para colocar la etiqueta
  • El formulario debe ser a una columna
  • Evita los desplegables en el formulario
  • Crea CTAs cortos y impactantes
  • Evita los campos obligatorios

Cualquier formulario suele ser doloroso para los usuarios por muy bien elaborados que estén. Así que al conseguir que el registro y el login sean satisfactorios para la mayoría de tus usuarios, conseguirás que la experiencia de los usuarios con tu producto mejore. Lo cual ayuda a que tus usuarios tengan menos fricciones al usarlo.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Origen: Diseñando mejores formularios de registro y login

¿Qué son los diseños web fluidos, adaptativos y responsivos?

Los distintos nombres de los métodos para crear sitios multipantalla están confundiendo a muchas personas, en esta nota explicamos en qué consiste cada uno y cómo diferenciarlos.

En IDA hemos notado que existe una gran confusión sobre los métodos para adaptar el diseño web a las distintas pantallas. Esto ocurre porque se trata de un tema relativamente nuevo y hay varios nombres y traducciones para cada técnica.

Uno de los errores más comunes es confundir el diseño responsivo con el adaptativo. Esto puede causar grandes problemas en la planificación de un proyecto, porque se trata de técnicas que dan un resultado visual muy distinto, ofrecen un nivel diferente de usabilidad y accesibilidad, y tienen costos variados en su producción e implementación.

Para evitar estos problemas, describimos en qué consiste cada técnica y cuáles son sus implicancias.

Diseño web líquido o fluido

liquid design

En este tipo de diseño se usan porcentajes o ems (unidad de medida tipográfica) en vez de pixeles, para que los elementos se adapten según el ancho de la pantalla. Si bien el resultado puede parecer atractivo en pantallas medianas, como computadores de escritorio y tablets, se producen muchos problemas en las pantallas grandes y pequeñas. Por ejemplo, en televisores las imágenes se estiran mucho y en teléfonos los textos son difíciles de leer.

Como una forma de evitar estos errores, es posible fijar el ancho máximo y mínimo. El problema es que esto hace que aparezcan áreas en blanco en las pantallas grandes y barras de desplazamiento horizontal en las más pequeñas.

El diseño web elástico es otro método muy parecido al fluido. En este, el contenido crece junto al ancho del diseño para rellenar la pantalla. Si bien esto soluciona el problema de los textos ilegibles, mantiene todos los demás inconvenientes.

Antes todos los sitios web eran elásticos, ya que por defecto el HTML funciona de esta forma, pero los diseñadores prefirieron cambiarlos a estáticos.

Por todos estos problemas, no recomendamos usar estos métodos. La usabilidad se ve muy perjudicada y representa un fallo de ergonometría que afecta negativamente a la experiencia de usuario.

También se conoce como Liquid, fluid, elastic o flexible web design y diseño web flexible.

Diseño web adaptativo, adaptable o adaptive

diseño responsive

Usa plantillas estáticas basadas en puntos de quiebre. Cuando la pantalla alcanza cierto límite de tamaño, se cambia a otro diseño.

Por ejemplo, puedes diseñar una página en tres dimensiones diferentes. Cuando un usuario visite tu sitio, los archivos adaptativos detectarán el aparato que está usando y mostrarán la plantilla adecuada.

Esta aproximación podría funcionar mejor para clientes con un presupuesto reducido, ya que implica sólo desarrollar las plantillas para algunas pantallas, en vez de planificar una experiencia óptima a través de ellas. Sin embargo, ofrece un bajo nivel de usabilidad y muestra una versión reducida de los contenidos en móviles, un medio que crece con fuerza y gana cada vez más relevancia.

También se conoce como: AWD o Adaptive Web Design.

Diseño web responsivo o Responsive web design

image00

En el responsive web design el diseño y el contenido se adaptan a cada pantalla, entregando una experiencia de usuario muy similar en resoluciones bajas, altas o en formatos de distintas pulgadas.

Para lograr esto, los contenidos se ordenan en bloques que se reorganizan según las características de la pantalla y el navegador que se utiliza. Las partes y la jerarquía de los elementos se definen según una serie de parámetros, entre ellos:

  • Ancho y alto de la ventana del navegador.
  • Orientación del dispositivo.
  • Proporción entre el alto y ancho de la pantalla.
  • Resolución del dispositivo, es decir, la precisión del detalle en las imágenes de mapa de bits.

De esta forma el usuario ve una diagramación distinta en cada dispositivo, pero aún así puede acceder a todos los contenidos. La información se mantiene igual, pero su presentación se optimiza según el aparato y el navegador usado.

También se conoce como: RWD, responsive, diseño responsivo.

Es importante mencionar que estos métodos no son necesariamente excluyentes, en algunos casos es posible aplicarlos en forma combinada. En IDA usamos responsive web design, preferentemente no elástico. Este es el método que ofrece la mejor experiencia para los usuarios, ya que adapta los contenidos de forma comprensiva y considera los distintos escenarios. Además, ayuda a la optimización SEO al no usar redirecciones a otras plantillas y reduce los costos de mantención al usar un sólo HTML y CSS.

Para ver más ejemplos comparativos de la aplicación de estos métodos, puedes revisar las ilustraciones animadas de la empresa Fast Company. Ahora que entiendes las diferencias, trata de identificar a qué método corresponde cada ejemplo de la imagen principal de este artículo.

 

Origen: ¿Qué son los diseños web fluidos, adaptativos y responsivos?

¿Por qué debes llamar a un diseñador antes de lo que crees?

En el Estudio siempre os hemos explicado que en un trabajo de diseño cuanto antes se actúe, mayor impacto tendrá el trabajo sobre el producto final y mejor será la experiencia del producto con él.

Esto muchas veces es difícil de entender para muchas personas todavía, pero un producto es como un edificio cuanto más tardes en arreglar lo que no funciona, mayor coste tendrá el arreglo después y mayores serán las pérdidas que lo que nos hemos ahorrado mientras.

Gregory Wolanski en su artículo sobre cuándo se debe llamar a un diseñador recomienda dos pautas para cambiar la mentalidad a la hora de recurrir a un diseñador:

  • Ver el diseño como solucionar problemas y no como algo visual o estético: esto es algo habitual ver el diseño como un elemento meramente accesorio y no como algo que mejora el producto.
  • Nadie nace sabiendo cómo contratar servicios de diseño: aprender en qué consiste el trabajo de diseñador y qué hace bueno a buen diseñador forma parte del aprendizaje al contratar los servicios de un diseñador.

Wolanski apunta que un buen diseñador nos ayudará a mejorar nuestros diseños de varias formas en una fase temprana del proyecto:

  • Mediante papel y restricciones: un diseñador te ayuda a mejorar la toma de decisiones con algo tan sencillo como un papel y unas restricciones que te ayudarán a definir presupuesto, diferentes posibilidades de actuación, recursos disponibles. Este tipo de restricciones ayudan a no encallarse en siempre los mismos problemas, tema habitual en proyectos de diseño y a dejar claro a la hora de tomar decisiones las líneas más básicas del proyecto.
  • Mediante datos y objetivos: recoger datos es una de las acciones básicas de cualquier empresa para poder mejorar sus productos, porque sin datos no se pueden tomar decisiones. Si no sabemos datos básicos cómo cual es nuestro producto más demandado, el que trae mayor número de tráfico o con el que obtenemos mayor beneficio, mal podrá el diseñador ayudarnos a diseñar la experiencia de usuario que mejor funcione para nuestro negocio y para nuestros usuarios. Además tener unos objetivos claros y definidos, nos ayudará a definir con el diseñador la estrategia de negocio a seguir.
  • Mediante planes de trabajo y acciones: un buen diseñador de experiencia de usuario te ayudará a trazar un plan de trabajo con plazos realistas y ajustados, además de proponerte acciones a realizar durante todo el proceso de diseño del producto para averiguar lo que buscan tus usuarios de tu producto y mejorarlo de acuerdo a sus peticiones antes del lanzamiento final.

Estas tres acciones dentro de una metodología de diseño centrado en el usuario son básicas y son tres de las que en el Estudio siempre hacemos con nuestros clientes: definir las restricciones del proyecto, tener datos medibles y tener claros los objetivos tanto del negocio como del proyecto, y elaborar unos planes de trabajo y unas acciones.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario.
Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Origen: ¿Por qué debes llamar a un diseñador antes de lo que crees?

5 etapas de un proyecto digital orientado a los usuarios | IDA Chile

Diseño y construcción de plataformas web

5 etapas de un proyecto digital orientado a los usuarios

Si trabajas de forma sistemática, conociendo tus procesos y siguiendo objetivos podrás mejorar los resultados. En IDA aseguramos la creación de plataformas digitales orientadas a los usuarios con una metodología que pone en el centro sus necesidades. Te enseñamos las etapas que seguimos al ejecutar proyectos digitales.

diseño de plataformas digitales

Al gestionar la creación o rediseño de plataformas digitales complejas la coordinación y logística son fundamentales para lograr que cada proceso cumpla con sus objetivos. Por esto es necesario apoyarse en una metodología que transparente las etapas, defina a los profesionales encargados y aclare los hitos de entrega.

El desarrollo de un sitio web implica diversas tareas que son encargadas a equipos multidisciplinarios, por lo que un atraso o un error puede significar el fracaso si no se identifica a tiempo. En este escenario el orden de los procesos organiza las tareas, herramientas y habilidades, que en conjunto permiten alcanzar los objetivos propuestos.

LA METODOLOGÍA DE DISEÑO CENTRADA EN EL USUARIO COMO EJE DE LAS DECISIONES

rueda metodología de diseño centrada en el usuario IDA

En IDA trabajamos con la metodología de diseño centrada en el usuario, que considera las necesidades, características y limitaciones de quienes visitan o interactúan con la plataforma. Con este sistema de trabajo orientamos las decisiones estratégicas a los usuarios y los hacemos coincidir con los objetivos comerciales de la empresa, lo que asegura el éxito del proyecto final.

La metodología centrada en el usuario consta de cinco etapas que se integra a un sistema de medición transversal que guía las acciones. Por experiencia sabemos que en proyectos digitales complejos lo óptimo es cumplir con cada parte del proceso. Así es posible asegurar que ningún elemento quedará al azar o se asumirán definiciones sin contrastarlas con una investigación sólida realizada al público objetivo. Aunque para efectos prácticos también podemos desagregar algunos servicios y realizarlos por separado, según el requerimiento de cada cliente.

¿CUÁLES SON LA ETAPAS DE UN PROYECTO DIGITAL ORIENTADO AL USUARIO?

Planificación estratégica

En esta etapa se realiza la definición de los objetivos generales del proyecto, los que deben orientarse a las necesidades del usuario y los lineamientos comerciales del cliente. Junto a esto se investiga distintas plataformas digitales para identificar buenas prácticas y oportunidades, las que se formalizan en un estudio comparativo o benchmark. Finalmente, se discuten los indicadores de rendimiento claves para asegurar el éxito de la futura plataforma digital.

Revisa más detalles de esta etapa.

Diseño de experiencia de usuario

En este punto se realizan los diversos estudios de usuario que permiten el acercamiento con quienes visitan e interactúan con la plataforma digital del cliente. Así es posible crear diversos arquetipos de usuario que guiarán las decisiones respecto a diseño y desarrollo de la plataforma.

Revisa más detalles de esta etapa.

Arquitectura de información

Proceso donde se distribuye y jerarquiza las unidades temáticas, categorías y contenidos del sitio, creando mapas de contenidos, wireframes y partituras de interacción que incorporen definiciones anteriores y orienten los procesos posteriores.

Revisa más detalles de esta etapa.

Diseño de la interfaz de usuario

Implica la creación de los diseños visuales según la distribución definida en la arquitectura de información, considerando normas y estilos gráficos del cliente, los que se adaptan al ámbito digital.

Producción Front-end y Back-end

Última etapa donde se traducen las maquetas de diseño a lenguaje HTML, CSS y realizando la integración a un sistema de gestión de contenidos (CMS), como WordPress.

 

¿QUÉ BENEFICIOS IDENTIFICAMOS AL USAR ESTA METODOLOGÍA?

Contar con un sistema claro de trabajo trae consigo diversos beneficios. La metodología centrada en el usuario permite organizar las tareas con precisión, ya que define las responsabilidades de cada equipo y profesional, ordenándolas en un flujo de trabajo. Al saber el lugar que tienen los deberes de cada uno en un proyecto es más fácil visualizar la importancia e influencia de estos, lo que a su vez lleva a un mayor compromiso por parte de las personas encargadas.

En la próxima entrega explicaremos en detalle la primera etapa de la metodología, enumerando los entregables, responsables e hitos más importantes en la planificación estratégica. Además, si necesitas ayuda para rentabilizar tus canales digitales, contáctanos y cuéntanos tu proyecto, estamos a tu disposición para alcanzar el éxito con tu negocio en Internet.

 

Origen: 5 etapas de un proyecto digital orientado a los usuarios | IDA Chile

¿Para qué sirve un manual de normas gráficas digitales? | IDA Chile

Normas gráficas en diseño web

¿Para qué sirve un manual de normas gráficas digitales?

La imagen corporativa de una empresa en las distintas plataformas web influirá en la percepción de los usuarios sobre la marca, afectando su decisión de compra. Para asegurarnos de que todo el equipo use los elementos visuales de forma transversal en Internet es fundamental contar con un manual de normas gráficas con una sección dedicada a los canales digitales.

Logo de IDA con sus dimensiones en pixeles

Cuando pensamos en una empresa lo primero que se nos viene a la mente es su logo, sus colores o su tipografía. Incluso muchos no recordarán una marca solo por el servicio o producto que ofrece, ya que estos siempre están asociados a una imagen corporativa la cual está construida tanto por elementos visuales como por conceptos abstractos, considerando los valores que inspira y los conceptos que destaca.

Las piezas que componen una imagen corporativa están especificadas en un manual de normas gráficas. Normalmente este documento está orientado a los medio impresos, dejando de lado aspectos clave para su correcto uso en plataformas digitales.

En proyectos web es fundamental contar con definiciones claras para las distintas aplicaciones de la marca en plataformas digitales, ya que estas tienen características muy diferentes a las de los medios impresos. Este documento tiene como principal propósito unificar los criterios, normar el manejo de la imagen gráfica y asegurar un nivel de calidad, por lo que su uso es obligatorio y debe ser respetado por todos los miembros del equipo.

ELEMENTOS QUE DEFINE EL MANUAL

En IDA nuestro manual cuenta con secciones que definen las normas básicas para el uso del logo y los componentes de la marca, especificando las características de las imágenes a usar en las distintas plataformas en las que estamos presentes. Estos son los elementos generalesde estos apartados:

Imagotipo o Isologo

tipos de logo de IDA

Define el símbolo o signo que representa a la empresa y la escritura que lo acompaña.Ambos forman un isologo, el cual debe ser un vector escalable y legible. En el documento se detallan los tamaños, proporciones y tipografías que usan.

Esta sección debe incluir instrucciones sobre lo que no se puede hacer con el elemento,de esta forma se previenen usos incorrectos por una mala interpretación de las definiciones.

Colores web

Colores de IDA

Muestra los colores corporativos que se han escogido para transmitir la personalidad de la marca y ser identificado por los consumidores. Indica colores principales y secundarios con sus valores exactos en los sistemas RGB, CMYK, Pantone y Hex, para cubrir todas las opciones y así prevenir errores. Si no se cuenta con toda esta información, el manual debería al menos incluir la definición de colores en web 216.

Fuentes optimizadas para pantallas

tipografías de IDA

Describe las tipografías corporativas optimizadas para web y muestra todos los caracteres, incluyendo números y símbolos, en mayúscula y minúscula. También se incluyen las distintas versiones o estilos de esta.

Vistas o versiones del logo

versiones del logo de IDA

Para asegurarse de que la marca se adaptará correctamente a cualquier plataforma y pantalla, el manual define cómo se verá en las distintas situaciones. Esto incluye combinaciones alternativas de colores, vistas en escala de grises y blanco y negro, el favicon, y las versiones del logo responsive.

Adaptaciones para distintas plataformas

Perfil de IDA en Twitter

Esta sección expone los diseños que se utilizarán en las redes sociales y los canales donde la marca tenga presencia. Cada modelo se adapta a las características particulares de la plataforma, definiendo los tamaños e imágenes que se usarán como avatares y temas de perfil, más las frases que estas contendrán. Por ejemplo, en Twitter la foto de fondo debe ser de 1500px por 500 px y si lleva un mensaje este debe estar alineado a la izquierda.

Así mismo, se debe definir el diseño de las firmas en correos electrónicos corporativos,especificando la tipografía, el tamaño, la imagen a utilizar y el contenido escrito.

OBJETIVOS Y USOS

Todos los elementos anteriores permitirán:

  • Definir claramente los usos de la marca en plataformas digitales.
  • Asegurar la coherencia de la imagen de marca en Internet.
  • Prevenir errores de visualización a través de la descripción en detalle de las características de cada elemento.
  • Homologar los usos de la marca a través de la descripción de las distintas formas que puede tomar el logo.
  • Establecer guías de uso para aplicaciones futuras.
  • Funcionar como una guía de consulta para nuevos integrantes del equipo.

Un buen manual de normas gráficas digitales modelará la imagen corporativa online, asegurará el correcto uso de los elementos visuales de la marca y mantendrá un alto nivel de calidad. Esto fomentará la confianza y valoración positiva de los usuarios hacia la marca, sus productos y sus servicios, afectando a su vez los indicadores de conversión y venta. Por esta razón en IDA recomendamos incluir en estos manuales una sección especialmente dedicada al mundo digital que describa en detalle todos los elementos que mencionamos en esta nota.

 

Origen: ¿Para qué sirve un manual de normas gráficas digitales? | IDA Chile

¿Hay que ser buena persona para ser buen/a diseñador/a?

¿Hay que ser buena persona para ser buen/a diseñador/a?

Al hilo de la lectura de un post de Mike Monteiro en Medium, titulado A Designer’s Code of Ethics, queríamos escribir acerca de este asunto que suena tan serio y tan filosófico y que no es otro que asumir las consecuencias de nuestras acciones como diseñadores y de cómo abordamos eso en UX Learn.


Imagen de Angel Martin

Nuestra tarea como formadores de futuros o mejores profesionales en usabilidad y experiencia de usuario, diseño de producto o e-commerce no se debería circunscribir únicamente a las herramientas y el marco teórico que enseñamos a nuestros alumnos, sino que debería extenderse a la delicada franja de “lo moral” o “lo ético”, es decir, a reflexionar en torno a la responsabilidad individual.

Desde luego, el equipo docente de UX Learn no es quien para juzgar o valorar los proyectos que cada uno de nuestros alumnos/as presenta en nuestros cursos, pero sí sería interesante que, quizá, nos planteásemos recordar que tomar decisiones de diseño, con las herramientas que enseñamos y utilizamos, para crear productos puede tener consecuencias, que es de lo que habla Mike Monteiro en su artículo o de lo que habló Mario Martín en UX Spain y que me dejó la cabeza dando vueltas y del que, probablemente, escribiremos más adelante. En definitiva, lo que quiero plantear en esta introducción, es que no podemos perder de vista que, como también cree Monteiro, para ser buen diseñador es necesario -o recomendable- ser buena persona, porque hay que dar lo mejor técnicamente pero también humanamente, o diseñaremos malos productos digitales.

Volviendo a lo que nos ocupaba, en su artículo, casi a modo de checklist, Monteiro enuncia una serie de recordatorios de lo que es el trabajo de un diseñador/a y lo que no:

  • Un diseñador/a es primero y ante todo un ser humano
  • Un diseñador/a es responsable del trabajo que produce y pone en el mundo
  • Un diseñador/a prima el impacto sobre la forma
  • Un diseñador/a debe a las personas que los contratan no sólo su trabajo, sino su consejo
  • Un diseñador/a acepta bien las críticas
  • Un diseñador/a se esfuerza por conocer a sus usuarios (su público)
  • Un diseñador/a no cree en casos extremos
  • Un diseñador/a forma parte de una comunidad de profesionales
  • Un diseñador/a da la bienvenida a un campo diverso y competitivo
  • Un diseñador/a se toma el tiempo necesario para la introspección

El artículo al que os remitimos es extenso y merece la pena una lectura con pausa, -y quizá otro post-, pero no nos resistimos a trasladar aquí alguna de sus reflexiones sobre uno de los debates más interesantes que, como diseñadores, podemos tener: ¿debemos preguntarnos cómo afecta nuestro trabajo a la sociedad? De lo que no cabe duda es de que lo hace, ya que diseñamos productos digitales para las personas, o las empresas que interaccionan con ellas. Sirviéndose del término rousseauniano Monteiro recuerda que, como seres humanos, hemos firmado un contrato social, y que al elegir ser diseñadores elegimos impactar en la vida de las personas que entran en contacto con nuestro trabajo, lo que significa que nuestras acciones tienen consecuencias -que pueden ser positivas y negativas-, y es algo que nunca podemos perder de vista en nuestro día a día.

Algunos de los ejemplos que utiliza Monteiro en su artículo tienen consecuencias muy serias: si diseñamos una base de datos que sirve para catalogar inmigrantes eso puede hacer que sean deportados, y no podemos sorprendernos de que eso ocurra, pues esas las consecuencias son el fruto directo de nuestro trabajo. Afirma Monteiro en su post que “cuando conscientemente producimos un trabajo que tiene la intención de perjudicar, estamos abdicando de nuestra responsabilidad, pero que cuando lo hacemos de forma ignorante, sin tener en cuenta que nuestro trabajo puede dañar a otras personas somos doblemente culpables”. Es por eso por lo que tenemos que aprender a afrontar -o temer- las consecuencias de nuestro trabajo más que a dejarnos encantar por la brillantez de nuestras ideas si estas van a tener consecuencias graves para nuestros congéneres. En resumen, Monteiro asegura que cualquier objeto o producto que esté diseñado para perjudicar a las personas está mal diseñado, sin importar lo bello que sea, lo brillantemente ejecutado que esté o cualquier otra consideración estética, ya que lo que prima -o debería primar- es la ética.

Así, incita al lector o lectora a plantearse que la expertise que tenemos como diseñadores también tiene que tener su parte de responsabilidad social en la que valoremos las consecuencias de los diseños que se nos encargan, y en que decir que no es una de las habilidades esenciales que cualquier diseñador/a debe tener, algo de lo que también escribió Manel Abella hace unos meses. En palabras de Monteiro, “no sólo te contratan para cavar una zanja, sino para evaluar el impacto económico, sociológico y ecológico de esa zanja. Si la zanja falla en esas pruebas, tu trabajo es destruir las palas”.

¿Estáis de acuerdo con Monteiro? ¿Alguna vez habéis objetado de un proyecto o diseño por razones éticas? Contadnos en los comentarios, nos encantará leeros.

Origen: ¿Hay que ser buena persona para ser buen/a diseñador/a?

© 2017

Tema por Anders NorenArriba ↑