Para empezar, hay que admitir aunque no nos guste,  que el precursor ha sido Microsoft. Una empresa tradicionalmente que ha cuidado poco el diseño de sus productos pero con el diseño de su interfaz Metro de Windows Phone y Windows 8, le ha dado la vuelta a la tortilla. Posterior mente Google con el diseño de sus aplicaciones ha ido hacia ese mismo estilo aunque con algunas diferencias como el uso de sombreados y bordes.

¿Pero es una tendencia a tener en cuenta o simplemente una moda pasajera?

En el pasado, los diseñadores de interfaces pusimos especial énfasis en mostrar nuestras habilidades destacando los elementos de una manera exagerada, imágenes vistosas, animaciones, etc. Después vino un cambio hacia el diseño skeuomorphic, que trató de llevar la vida real en la pantalla, con texturas realistas, sombras y las características reales del objeto.

Pero hoy  en día se ha dado paso a la tendencia del «Flat Design» (diseño plano), que se opone a todas estas técnicas de diseño «artificiales», en favor de una mayor simplificación en la estética digital, es sencillamente un diseño plano. Nos referimos al diseño que decide usar formas geométricas, colores planos y llamativos e iconos en vez de fotografías o imágenes complejas. Elimina todo rastro de sombras, efectos de profundidad, biselados, degradados, efectos tridimensionales, etc.

Desde mi punto de vista, es un diseño armonizado donde se basa en los mejores aspectos del minimalismo y del skeuomorphic, y haciéndolos trabajar juntos. Como skeuomorphic, el flat design se ve amigable y accesible para los usuarios, pero lo hace mediante la presentación de una interface clara y atractiva , en lugar de disfrazarse y de crear deformaciones para que imite algo familiar.

Al igual que el minimalismo, sólo se diseña los elementos visuales que tienen funcionalidades esenciales. Pero no es tan restrictiva en la forma en que lo hace, la importancia de la ornamentación es reconocida y utilizada.

Está diseñado para adaptarse a una experiencia en pantalla, a diferencia de estilos anteriores que fueron diseñadas para imitar una experiencia física. Esta adaptación se presta perfectamente a la mejora de la experiencia del usuario de diferentes maneras. Es un diseño que hace hincapié en la usabilidad. Tiene en cuenta, crear espacios abiertos, bordes nítidos, colores brillantes e ilustraciones bidimensionales.

Sólo porque no tiene ningún diseño llamativo no quiere decir que este estilo sea aburrido. Los colores brillantes y contrastados con iluminación, las imágenes y los botones llamativos facilitan la atención del usuario.

Estoy convencido que los elementos que aporta van más allá de una moda pasajera y creo que será más duradero y con una amplia estrategia de diseño.

Para la creación de cualquier interfaz, sobre todo, cuando queremos crear webs o aplicaciones multidispositivo, puede aportar un valor diferencial trabajando bajo este concepto.

Este valor diferencial se traduce en un mínimo impacto en la adaptación del diseño en los diferentes dispositivos, sobre todo en el entorno web, en el que puedes trabajar bajo concepto Responsive Design, trabajando sin adornos, o efectos extras que nos permitirá asegurar una mayor homogeneidad en la mayoría de los dispositivos, incluso en aquellos de gama baja que no soportan muchas de las especificaciones de CSS, HTML, o incluso JavaScript. Por otra parte, trabajar con diseños planos, nos va a reducir sensiblemente los tiempos de desarrollo y sobre todo el mantenimiento posterior.

Es un diseño infinitamente mejor adaptable en todas las resoluciones y dispositivos. Es el estilo perfecto para la UX, no sólo reconcilia los objetivos del minimalismo y el skeuomorphic, sino también es excepcionalmente adaptable a la usabilidad. Se rechaza el estilo innecesario, produciendo las páginas más rápidas y con un código limpio. Además mejora el tratamiento del espacio, ayudando a una mejor legibilidad y composición.

En definitiva con su simplicidad hace que el rey sea el contenido.

Desde mi modesta opinión, el flat design tiene todos los atributos claves que hacen que un sitio sea tan funcional como hermoso. Se reconoce que un sentido de familiaridad es importante para la experiencia del usuario,  y por lo tanto crea este sentido de manera que se ajuste con el medio. Asimismo, es capaz de adaptarse a los nuevos descubrimientos, tendencias e ideas. Nos lleva un paso más hacia un nuevo paradigma de diseño digital, donde la funcionalidad y la estética están en completa armonía.

Me gusta porqué el flat design vuelve a los fundamentos del diseño como una herramienta funcional. Una interface debe estar diseñada y juzgada por lo bien que funciona, a diferencia de lo que parece. Esta funcionalidad es protagonista, para estar ligada con la experiencia del usuario, de manera que las interfaces que usan este estilo de diseño probablemente reciban retroalimentación positiva por parte de los usuarios por ser más fácil de usar.

¿Y vosotros que opináis?

Enlaces de interés:

Principles of Flat Design
Flat UI Design – A showcase of the best examples of the flat UI
A Look at Flat Design and Why It’s Significant
The Flat Design Aesthetic: A Discussion

Para empezar hemos de tener en cuenta con los fundamentos del diseño móvil. Algo que puede parecer obvio, pero aún nos sorprendemos de la cantidad de sitios y aplicaciones en el mercado que parecen no tener en cuenta estos factores básicos.

Como por ejemplo:

• Tamaño de pantalla y proporciones: pasar del escritorio al móvil significa mucho menos espacio en pantalla y mucha más variedad en las proporciones de la pantalla
• La interacción directa con la pantalla: a diferencia del entorno de escritorio, los usuarios interaccionan directamente con la pantalla en lugar de utilizar un ratón y un teclado, lo cual establece un conflicto inmediato del uso de la pantalla
• Orientación variable: los dispositivos móviles permiten una conmutación rápida de orientación
• Una sola pantalla: incluso con los smartphones que permiten a los usuarios ejecutar múltiples aplicaciones o mantener simultáneamente varias ventanas de navegadores, los resultados son mostrados en una única pantalla establecida para interaccionar, lo que sugiere que tenemos que centrarnos en crear las experiencias en una única pantalla.
• Interacción limitada: no hay rollovers o tooltips, de modo que las acciones deben ser obvias y a su vez que el usuario interprete correctamente los posibles errores.
• Utilización de los estándares establecidos para los dispositivos: aún que el mercado madure, es recomendable utilizar los patrones consistentes de interfaz de usuario que existen( por ejemplo: el botón de atrás en la parte superior izquierda), si no elegimos los estándares debemos asegurarnos que lo utilizamos por razones concretas y correctas.
• Recursos limitados: mientras que los smartphones están avanzando a pasos agigantados, todavía existe una limitación en la calidad de conexión, la vida de la batería, la potencia del procesador, la memoria interna…

Aparte de conocer estos fundamentos, también es muy importante conocer el dispositivo y lo que nos puede ofrecer para poder realizar un diseño creativo. Por ejemplo, los Smartphones de hoy ofrecen un conjunto de entradas muy sofisticadas que proporcionan a los diseñadores múltiples opciones. Por un lado el descubrimiento de nuevos gestos pueden ser una poderosa experiencia para los usuarios. Se añade una sensación de emoción, misterio y logro. Gracias a esta guía muy completa realizada por varios autores podemos conocer cuáles son los gestos que se pueden realizar en pantallas táctiles de los dispositivo móviles más comunes.

También estos dispositivos avanzados ofrecen controles adicionales en forma de: botones físicos (home, menú, atrás, subir / bajar volumen, etc), teclados físicos (atajos, entrada de texto), acelerómetros (track de movimiento y orientación), GPS, micrófono (comandos de voz, audio, música), cámara (fotos y códigos visuales).

Antes de diseñar y programar, hay que tomar una serie de decisiones y realizar un trabajo preliminar de análisis y documentación que de no efectuarse, repercutirá directamente en la calidad y resultado final del proyecto, independientemente del tamaño y alcance del mismo. El proceso más común lo podéis consultar en este post que publique en su día,

Para el diseño de aplicaciones es muy importante también definir una correcta Arquitectura de la Información (AI) para este dispositivo que nos permita organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa. Algunos puntos a tener en cuenta son:

• Que sea sencillo y centrado. Al diseñar nuestra app debemos definir las tareas de los usuarios y apoyarlas con experiencias limpias y bien editadas.
• Priorizar el contenido. Poner lo más importante en primer lugar.
• Mantener el contexto del usuario en mente. ¿Dónde están? ¿Qué es lo apropiado para ese entorno?
• Proporcionar retroalimentación visual, siempre. Muchas veces el usuario se queda pensando si la acción que ha realizado ha funcionado. Siempre hay que confirmar la acción realizada inmediatamente con algún feedback visual.

Y ya para finalizar, para el diseño visual de la aplicación debemos tener en cuenta una serie de recomendaciones que las he estructurado en siete apartados.

Contexto
Con una aplicación de escritorio, podemos estar seguros de que se está utilizando en un entorno particular. Con el móvil, es imposible, por lo tanto:

• Debemos conocer a los usuarios. ¿Quiénes son? ¿Qué sabemos ellos? ¿Qué tipo de comportamiento podemos asumir o predecir acerca de los usuarios?
• Lo que les esta pasando. ¿Cuáles son las circunstancias en las que el usuario absorberá mejor el contenido a presentar?
• Cuándo van a interaccionar. ¿Están en casa y tienen tiempo? ¿Están en el trabajo donde tienen cortos períodos de tiempo? ¿Esperando de un tren?
• Dónde están los usuarios, ¿Están en un espacio público o privado? ¿Están dentro o fuera? ¿Es de día o es de noche?
• Por qué van a utilizar nuestra aplicación, ¿Qué valor se obtienen a partir de los contenidos o servicios en su situación actual?
• Cómo están usando el móvil, ¿Lo mantienen en su mano o en su bolsillo? ¿Encendido o apagado? ¿En formato vertical o horizontal?

Mensaje
El mensaje que queremos transmitir es fundamental. A través del diseño visual creamos explícitamente el mensaje mental que queremos generar al usuario . Cómo alguien reacciona a nuestro diseño y cual es su impresión. Por lo tanto hemos de preguntarnos ¿Qué estamos tratando de decir visualmente en nuestra aplicación?

Look & feel
Se utiliza para describir la apariencia. Sirve tanto para «Quiero un aspecto limpio” o «quiero un look usable.» Los usuarios se preocupan profundamente por la apariencia de sus aplicaciones, porque son cosas personales. El sentido de pertenencia es más fuerte que cuando se trata de aplicaciones de escritorio.

En algunas ocasiones cuesta decidir los elementos de una interfaz cuando hacemos el prototipo de la app. Una forma de ayuda para decidir un diseño consistente es aprovechar patrones de diseño contrastados. En este caso existen un montón de recursos interesantes que nos pueden ayudar, aquí detallo algunos enlaces:

http://mobiledesignpatterngallery.com
http://www.mobile-patterns.com
http://pttrns.com
http://androidpttrns.com
http://inspired-ui.com

Layout
La definición de las estructuras es fundamental en un proyecto móvil para crear una experiencia consistente y utilizable. Una de las diferencias más importantes a tener en cuenta en el diseño para app móviles es que los usuarios tienen que ver no sólo la pantalla, sino también interaccionar con ella.

Gracias al layout el usuario procesará visualmente la página. A medida que va avanzando el panorama móvil, tenemos que ser listos con los diseños para que se adaptan al tamaño de cada dispositivo nuevo así como sus orientaciones . Aún así puede ser muy difícil crear la mejor experiencia posible en diferentes tamaños de pantalla.

Color
Es uno de los obstáculos más común que nos encontramos cuando diseñamos en diferentes pantallas. Cuando realizamos diseños complejos que se muestran en diferentes dispositivos móviles, la profundidad de color limitada en un dispositivo puede causar efectos no deseados.

El color está convirtiendo en una forma cada vez más popular para que las aplicaciones destaquen respecto la competencia. La primera ola de aplicaciones creadas a menudo han imitado las aplicaciones nativas de Apple iOS. Sin embargo lo que estamos viendo más, es un cambio hacia unos diseños más audaces con la utilización de colores primarios y degradados. Así como acabados en mate. Tener colores fuertes en una app puede crear respuestas emotivas de los usuarios, a veces, considerándose una aplicación más memorable.

Si queréis saber como elegir correctamente un color podéis consultar el post que publiqué hace un tiempo, os puede resultar de gran ayuda.

Tipografía
Como las aplicaciones móviles evolucionan, los diseñadores cada vez más se están alejando de usar las fuentes estándar del sistema y utilizan tipografías más especificas. Muchos de los rasgos del diseño de la tipografía en aplicaciones móviles provienen de la web.

Algunas recomendaciones:

• El texto funciona mejor cuando es grande, fácil de leer y no sujeto a otros elementos de la interfaz.
• En los dispositivos móviles, la combinación con una tipo delgada a menudo hace que sea una experiencia más legible en pantallas de alta resolución.
• La altura debe ser uniforme y equilibrada. Las letras minúsculas idealmente deben ser al menos 2/3 de la altura de la letra mayúscula. Esto se conoce como la «altura de la x.»
• El grosor amplio y contrastado. Esto significa que la fuente no debe ser demasiada delgada o demasiado pesada, lo ideal un término medio.
• Evitar fuentes con ascendentes y descendentes demasiados largos. Las fuentes decorativas tienden a romper las tres normas, por lo que es mejor optar por una elegante sans-serif para los elementos de la interfaz de usuario.

Gráficos
Utilizaremos el uso de gráficos para establecer o ayudar a la experiencia visual. Los gráficos se pueden utilizar para complementar la apariencia, o como apoyo al contenido que se muestran en texto. Su uso se basa principalmente en Iconografía o en Imágenes. Respecto a la Iconografía si no tenemos el tiempo necesario para trabajarlo podemos aprovechar recurso ya existentes, en este caso os propongo un ejemplo interesante: http://www.glyphish.com/

Bueno esto sería una breve recomendación inicial para poder iniciarse en el diseño de aplicaciones móviles. Evidentemente hay muchas más, para eso os recomiendo una serie de links que os pueden servir para profundizar más en el tema

http://www.abookapart.com/products/mobile-firs
http://www.abookapart.com/products/content-strategy-for-mobile
https://shop.smashingmagazine.com/smashing-mobile-bundle.html
http://nathanbarry.com/app-design-handbook
http://www.smashingmagazine.com/guidelines-for-mobile-web-development
http://designmodo.com/wireframing-prototyping-mobile-app

¿Y qué es Foxize School?

Pues muy sencillo, una escuela de negocios que revolucionará el mundo educativo. Foxize School es la primera escuela de negocios avanzada que proporciona formación personalizada a través de una afinada selección de profesores a un precio accesible. Ésta es la idea con la que nace esta iniciativa educativa: ofrecer conocimiento concreto y de alta calidad a personas que quieran actualizarse y estar al día, pero de una forma flexible y adaptada a sus necesidades, horarios y presupuesto.

Foxize está enfocada a «digital business», es decir, una escuela de negocios que ayuda a entender cómo la tecnología está cambiando todos los sectores de actividad, ofreciendo a los alumnos el know-how y las herramientas que necesitan para reciclarse poniéndoles en contacto con profesionales en activo de los que pueden aprender de forma práctica.

Las seis grandes temáticas que ofrece Foxize son: Negocios, Marketing, Comunicación, Analítica, Comercio electrónico y Habilidades digitales.

Y como docente en el área de diseño ¿Qué tiene que ver todo esto conmigo?

Pues muy fácil, como sabéis, muchos de vosotros tenéis que preparar presentaciones para comunicar vuestros proyectos a clientes, a compañeros de trabajo o incluso a alumnos.

Normalmente utilizamos Powerpoint o Keynote como herramienta visual para comunicar un mensaje y por lo tanto, debemos tener un conocimiento básico de comunicación visual. Una de las razones principales para ello, especialmente en presentaciones de negocios, es que los observadores emitirán en su subconsciente juicios acerca de nosotros, basado sobretodo en el atractivo visual de nuestra presentación.

¿Y cómo podéis mejorar vuestras presentaciones? Aquí es donde entro yo!!

Gracias Foxize impartiré un taller donde explicaré y se pondrá en práctica las diferentes reglas para el diseño de presentaciones:

• Diseño del contenido: Composición, creación de puntos focales, la regla del menos es mas,
• Uso del color: Elección del esquema de color, consejos y herramientas que ayudan
• Uso de la tipografía: jerarquía, legibilidad, elección y consejos
• Uso de las imágenes: elección de material de calidad, significado y donde encontrar imágenes
• Uso de elementos de información: gráficas, infografias etc

El taller de 3 horas y por sólo 90€, va dirigido para cualquier persona que sin nociones de diseño quiera conseguir presentaciones de proyecto atractivas y bien estructuradas.

Ya lo sabéis, solo os tenéis que registrar a Foxize como alumnos, y apuntaros al curso a través de este enlace y nos veremos el 18 de Diciembre.

Follow @pau_lopezcr

Diseño Web: los 3 pasos esenciales del proceso creativo

Todo trabajo tiene su proceso, y el diseño web por supuesto no es menos. Algunas veces, como profesionales del diseño, nos cuesta trabajo hacer entender a nuestros clientes que el proceso de creación de una página web, conlleva mucho más que simplemente organizar unas imágenes y un contenido en un entorno online. A continuación, quiero concretar brevemente algunos de estos pasos, al menos aquellos que considero más importantes y de los cuales deberíamos dejar constancia en el contrato de servicios que presentamos a nuestros clientes.

1. Planteamiento del proyecto
   En este punto entran varios aspectos en juego: desde un brainstroming hasta el desarrollo de un brief. Aunque tal vez el aspecto más importante que debemos ser capaces de transmitir a nuestros clientes es hacerles entender que una página web debe tener un objetivo y que la tarea del diseñador es proyectar ese objetivo en el producto final, para lo cual el diseñador está especializado y formado. El diseñador tiene que pasar por varias etapas de investigación para poder crear lo que el cliente tiene en mente o en su caso poder estructurar la vaga idea de éste en un producto bien definido y efectivo. Los diseñadores no son expertos en todos los temas y por lo mismo deben investigar, leer y trabajar cada vez que se enfrentan a un nuevo proyecto. Una vez que esta primera fase está definida y se ha llegado a un consenso entre ambas partes, es cuando se debe empezar la etapa de diseño.
2. Diseño de la idea
   Un diseño bien planteado y estructurado va a ser la base esencial de un buen proyecto web. Empecemos por el principio: el diseño consta de varias partes, la primera de todas tal vez la más simple, pero la más importante, es empezar con una idea, un boceto. Dibuja todo, no descartes de entrada ninguna idea por tonta o inútil que pueda parecer al principio. De cualquier idea un diseñador puede encontrar otra idea completamente diferente y brillante. Una vez cerrada esta primera fase, totalmente esencial en el proceso creativo, entraríamos directamente al diseño con Photoshop. Es necesario un buen conocimiento de la herramienta, ya que esto nos dará la libertad para que nuestro diseño pueda reflejar la idea que habíamos planteado o incluso la supere. Terminada esta etapa, ya tendremos unos primeros bocetos que enseñar a nuestro cliente, y que deberán ser validados antes de pasar a la etapa de desarrollo.
3. Desarrollo web
   Muchas veces las personas confunden diseño web con desarrollo web. Quizá el diseñador también es capaz de hacer un desarrollo web pero no necesariamente. Un ejemplo práctico: un arquitecto es el que crea las medidas y estructura de un edificio pero no necesariamente es el que lleva a cabo la construcción de éste ¿cierto? Puede que sea capaz y tenga los conocimientos para hacerlo pero la construcción es un trabajo completamente diferente al desarrollo arquitectónico.Últimamente existen en el mercado editores web, cada vez más potentes y avanzados que están permitiendo al diseñador traspasar esta línea hacia el desarrollo de una manera más sencilla, cosa que antes era completamente imposible, ya que era necesario saber de programación. En cualquier caso, y al tratarse de una etapa diferente en nuestro proceso, así es como debería ser explicado a nuestros clientes y quedar reflejado en nuestros presupuestos.

Paula López
Online Marketing Manager
Basekit

Como en cualquier proceso del diseño tradicional, en el diseño web la investigación es de suma importancia para obtener unos resultados óptimos. La capacidad de predecir si un diseño web tendrá éxito o por lo contrario será un fracaso es una de las decisiones más subjetivas y complejas que nos podemos encontrar.

Gracias al análisis de la información obtenida en la fase de investigación, podremos llegar a una serie de conclusiones que nos verificarán ampliamente una posible hipótesis del diseño planteado, cumpliendo con una serie de características que la hagan aceptable y generadora de confianza por parte del usuario.

Foto: I, Satyakamk  – Creative Commons Genérica de Atribución/Compartir-Igual 3.0

Tanto los recursos que explican las mejores prácticas existentes para el diseño web, como el feedback previo que nos puede proporcionar los usuarios son fuentes importantes para ir bien encaminados en el proceso del diseño. Ahora bien, como diseñadores es de suma importancia tener la responsabilidad de ser proactivos y de investigar y determinar el qué, el por qué y el cómo garantizar la facilidad del uso generalizado de nuestro diseño.

Como bien sabéis, existen muchos métodos para recolectar esta información que nos ayude en nuestro propóstio. Desde información cuantitativa (números en bruto) con herramientas como Google Analytics hasta información cualitativa en un proceso de investigación, como por ejemplo, las respuestas abiertas y comentarios con usuarios potenciales.

Ahora bien estos resultados obtenidos no sirven de nada, si no han estado relacionados directamente con 3 preguntas claves que nos hemos de hacer para obtener la finalidad de nuestro diseño.

Estas 3 preguntas son en última instancia el centro de nuestra investigación, nuestro análisis y la motivación que tiene que haver detrás de nuestros resultados obtenidos. Por lo tanto el proceso de diseño se debe regir en base a el qué, el por qué y el cómo:

1. Definiendo cuál es el problema
2. Demostrando por qué es un problema
3. Determinando la manera de solucionar el problema con la solución más óptima (si se trata de un problema)

¿Qué?
De todas las preguntas que nos pdoemos hacer los diseñadores web, el «¿Qué?» es probablemente la palabra que más se relaciona con la tarea en cuestión. Este proceso de comprensión y relevancia de la utilidad de la información se refiere a las decisiones que se tienen que llevar a cabo.

• ¿Qué necesitan los usuarios del sitio?
• ¿Qué cosas crean frustración a los usuarios del sitio?
• ¿Qué puedo hacer en este diseño para lograr los objetivos del sitio?
• ¿Qué ocurre con el sitio?
• ¿Qué es lo correcto del sitio?
• ¿En que se puede mejorar?

Preguntarnos el «¿Qué?» nos proporcionará a una gran cantidad de información que nos ayudará a tomar mejores decisiones de diseño.

¿Por qué?
El siguiente factor determinante es la pregunta «¿Por qué?»

Probablemente habran que hacer cambios o implementaciones más allá de lo que inicialmente se propuso, y esto puede costar tiempo, dinero y recursos. El por qué nos proporcionará la capacidad para respaldar nuestras ideas con datos y hechos fiables suficientes para convencer incluso a nuestros clientes más agresivos del por qué en nuestra decisiones de diseño.

• ¿Por qué la participación de los usuarios en el sitio es baja?
• ¿Por qué el usuario móvil interactúa de otra manera?
• ¿Por qué los usuarios tienen dificultad para encontrar lo que necesitan?
• ¿Por qué necesitamos cumplir con los standard?

Saber lo que hay que hacer es una cosa, pero conocer la justificación de por qué hay que hacerlo es otra.

¿Cómo?
La última pregunta es «¿Cómo?» lo cual tiene sentido en el que una vez que sabemos lo que hay que hacer y por qué se requiere, hemos de encontrar el método de mejorar del «qué».

• ¿Cómo debo aumentar la participación de los usuarios?
• ¿Cómo se puede diseñar para mejorar la experiéncia de usuario en un móvil?
• ¿Cómo puedo solucionar el problema de que los usuarios no encuentran aquello que necesitan?
• ¿Cómo puedo crear un diseño que funciona en todos los navegadores?

En definitiva es muy importante hacernos estas preguntas en el proceso de la investigación, ya que marcaran la fiabilidad de los resultados que obtengamos de nuestros análisis y para su posterior validación e implementación en el proceso de diseño.

¡Ah! y no olvidemos que el usuario es una persona que visita nuestra web(no debe ser tratado como una estadística).Más bien el uso de opinión y de su feedback nos ayudará a una mejora de producto.

En el diseño de interfaz, la palabra también es un punto importante a tener en cuenta, cada palabra que elegimos es importante, desde el botón de call-action hasta el titular de en un mensaje de error. Si la elección está estudiada cuidadosamente sumaremos puntos para una experiencia de usuario perfecta.

Un buen diseño de interfaz no es casual, no solo es la estética o las funcionalidades, sino también otros aspectos como el caso del copywrite. El diseño de una interfaz es en gran medida un ejercicio de elegir los textos adecuados, al diseñar no sólo aplicamos una gráfica sino elegimos textos para los títulos, subtítulos, botones call action, textos explicativos, mensajes de interacción, mensajes de errores etc.

En definitiva el contenido es una parte vital de nuestra interfaz, y si este no es fácil de entender e interpretar, entonces probablemente nuestros usuarios dejaran de usarla.

Consejos para un copywriting efectivo

Identifica y conecta con tu audiencia
Tenemos que medir nuestra audiencia y conocerla, de esta manera sabremos cómo utilizar las palabras adecuadas y si son apropiadas para mi público objetivo. Es importante utilizar la jerga en función del nivel de conocimiento de nuestra audiencia. La forma más fácil de dar la bienvenida al usuario es escribir en segunda persona. Escribiendo en segunda persona ayuda a los usuarios a relacionar los puntos mencionados en nuestros copys. La atención debe centrarse en los usuarios, no en nosotros.

Atraer la atención del usuario
Los usuarios  buscan la información a través de la interfaz hasta que encuentra lo que les interesa. Esta información debe ser dividida y estructurada  en diferentes áreas para atraer mejor a los usuarios, ya que es el único medio para que permanezcan en nuestra interfaz. Debemos buscar la curiosidad o el deseo del  usuario para conseguir nuestro propósito.

Ser breve y simple
Los usuarios no leen, escanean. Hay que ir directo al objetivo con  la menor cantidad de palabras posibles. No hay que irse por las ramas. Basta con obtener su atención rápidamente. La claridad y la concisión garantizar el máximo aprovechamiento del espacio y mantiene la atención de los usuarios. Mediante el uso de frases cortas y párrafos se puede tirar de ellos y guiarlos hacia abajo de la página sin que tengan que buscar demasiado.

Organización
De la misma manera que es difícil hablar con alguien que está saltando de un tema a otro sin entender lo que están tratando de decir; en los contenidos online ocurre lo mismo. Debemos mostrar esta facilidad en la organización y que el usuario sepa en todo momento lo que le estamos informando

Proporcionar a los usuarios resúmenes de lo que va leer
Es importante proporcionar resúmenes ya que permitirá al usuario saber que información va encontrar y de esta manera le ayudaremos en no perder el tiempo. Si escribimos con éxito los resúmenes los usuarios no tendrán problemas en seguir leyendo.

Uso de títulos, subtítulo  y viñetas
La información debe ser dividido en encabezados  y viñetas para que el usuario le sea más fácil interpretar lo que queremos comunicar. Usar subtítulos rompe con el flujo de nuestro contenido y proporciona una forma más intuitiva para escanear la página. Por no hablar de los encabezados secundarios que proporcionan un gran beneficio para SEO. Los títulos más eficaces deben ser descriptivos y si es posible hacer uso de algunas palabras clave. El uso de viñetas nos ayuda en romper el flujo de la página y que son fáciles de analizar.

Uso de negritas  y cursivas
Añadir un poco de estilo a nuestro  contenido nos permitirá añadir más énfasis a las declaraciones clave. El uso de negritas y cursivas es a la vez ideal para captar la atención del usuario y la conducción de su punto de origen. Por contrapartida el uso de subrayados como elemento decorativo (no en el caso de los enlaces) no es recomendable por el motivo que están supeditados a pensar que son enlaces.

Uso limitado de los signos de exclamación
El uso de estos signos nos puede ayudar a destacar elementos de la información, pero abusar de ellos pueden molestar al usuario pensado que son agresivos. Usarlos sólo cuando sean efectivos.

Conocer nuestros productos o servicios y ser específico con detalles
Debemos ser conscientes de los beneficios de nuestros productos o servicios. Sólo entonces seremos capaces de describir nuestros beneficios y superar a la competencia. Los usuarios potenciales están interesados ​​en saber cómo el producto o servicio les puede beneficiar.
Los usuarios no está realmente interesados en que nuestro producto o servicio es «nuevo y mejor». Debemos indicar a los usuarios exactamente lo que es nuevo y mejor. Siendo  lo más descriptivo posible con la mejor explicación posible, nos ayudará que los usuarios sean más propensos a seguir leyendo.

Huir de la sobrecarga de contenidos
Demasiado contenido puede abrumar a los usuarios y, además, alejarlos de nuestra interfaz. Al acceder  en un sitio web, los usuarios suelen ir hacia abajo para ver la cantidad de texto que hay que leer. Si ven una extensión de texto exagerada lo más probable es que no lo hagan.

Ser único
Una de las mejores maneras de destacarse es ser único. Hay que darle a nuestros copys alguna personalidad. Si lo conseguimos nos ayudará que el usuario vuelva.

Testear, comprobar y corregir
Como cualquier proceso es necesario testear y comprobar cómo funciona nuestro copywriting, y si fuera necesario corregirlo para mejorar la experiencia del usuario con nuestra interfaz. Corregir y revisar nos asegura una sintaxis o semántica correcta. Esto nos hará ganar la confianza y la legitimidad del usuario. Los errores gramaticales y tipográficos dan poca fiabilidad a la interfaz.

Enlaces de interés

Aprovechando este post, os quiero recomendar un nuevo blog que ha nacido, de mi amigo @ambcompte llamado www.millora-la-web.com donde encontraréis el punto de vista de alguien que se centra en los contenidos de la página.

http://designshack.net/articles/business-articles/the-importance-of-copywriting-in-web-design
http://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
http://contrast.ie/blog/the-language-of-interfaces/
http://www.webdesignfromscratch.com/copywriting/writing-for-the-web/
http://www.lunawebs.com/blog/2012/04/09/tricks-of-the-trade-secrets-of-highly-effective-in-demand-content-writers/
http://www.uxbooth.com/blog/complete-beginners-guide-to-content-strategy/
http://www.uxbooth.com/blog/writing-user-friendly-content/
http://www.slideshare.net/chrispitre/interactive-copywriting-design-presentation-929843
http://www.smashingmagazine.com/2011/06/29/five-copywriting-errors-that-can-ruin-a-company-website/

La iTV posibilita la transformación de televidentes pasivos en activos con la capacidad de interactuar con nuevos servicios interactivos (interfaces). Es por eso que el diseño de estos nuevos interfaces deben cumplir los requisitos elementales para garantizar un correcto uso así como la percepción y significado del usuario ante formas y símbolos. Este auge de consumo provoca que cada vez más lo diseñadores debamos desarrollar interfaces para este dispositivo.

En este post encontraréis el enlace al artículo de investigación en diseño que he realizado, donde describe y estructura un conjunto de directrices que pueden ser seguidas por los diseñadores en el proceso de diseño de interfaces de la iTV.

El objetivo de este artículo es plantear un marco teórico relevante para la creación e implementación de interfaces o aplicaciones interactivas en la televisión digital así como establecer y definir unas directrices a seguir. Dado que las aplicaciones o interfaces de iTV tienen como objetivo el entretenimiento y diversión para espectadores diversos, es necesario examinar los conceptos tradicionales del diseño. Estos conceptos son diversos pero por ejemplo se puede considerar el de navegación, color, la percepción visual, el de interacción y el aspecto a considerar principalmente, el de multiculturización que abarca los elementos importantes para generar la confianza de uso, y aceptación de la interfaz ante la forma de percibir las cosas, su significancia y relevancia, además del sentido adecuado que se le da a las formas, figuras, texto, o símbolos en la interfaz interactiva.

Las directrices de diseño de interfaces para la iTV que presento en este artículo sugieren soluciones, pero todavía no proporcionan una solución completa. Las oportunidades tecnológicas continúan evolucionando, y el conjunto de opciones disponibles para los diseñadores siguen evolucionando.

Directrices para el Diseño de Interfaces de Televisión Digital Interactiva

La tipografía en diseño tiene un doble papel, por un lado establece un compromiso entre su presencia gráfica con relación a otros elementos visuales y por otro lado sus necesidades de legibilidad.

Las funciones que la tipografía desempeña en el diseño implica que los diseñadores debemos pensar que tipo de personalidad es apropiado para una correcta legibilidad (en papel o pantalla)  para poder comunicar nuestro mensaje. El tipo de letra que se emplea puede ayudar o entorpecer la transmisión de la información puesto que cada una de ellas provoca diferentes sensaciones en el usuario.

Hoy en día no podemos hablar de estándares para visualizar tipografías en pantalla, actualmente hay diferentes dispositivos, plataformas y diversas resoluciones de pantalla que hacen difícil seguir unos criterios exactos para un uso correcto, pero si unas recomendaciones que ayudan a conseguir nuestro propósito.

Aunque las reglas básicas de tipografía son las mismas en papel que en pantalla, en el diseño web hay características especiales. Por ejemplo, la legibilidad que ha de proporcionar una tipografía en papel no es posible en web a causa de las características del pixel del monitor

Como diseñadores web controlamos la tipografía mucho menos en pantalla que en papel, generalmente la resolución es menor por la cual cosa los detalles finos no están bien definidos.

Por todo ello, la velocidad de lectura es aproximadamente un 30% menor que en papel. El usuario hace una rápida barrida en vez de leer,  por lo que entonces la compresión y la retención se reducen al 50%. De la misma manera, el scroll horizontal y vertical dificultan la fluidez de lectura.

Un buen uso de la tipografía depende del contraste visual entre letras y bloques de texto con el blanco, y es natural ya que el ojo  se siente atraído por el contraste. Nos fijamos primero en el conjunto de la web, luego pasa el reconocimiento de las diferentes partes y, finalmente, llegamos al detalle de las palabras.

De esta manera las recomendaciones para el uso tipográfico en un diseño web  lo podemos dividir en dos partes: la legibilidad y  la amenidad

«La legibilidad se usa generalmente para designar la calidad de la diferenciación entre los caracteres, es decir, la claridad de las letras individuales. La amenidad de estilo es la calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto, el interlineado y otros factores tienen una influencia decisiva en la función del tipo.»
Lewis Blackwell (1998)

Los aspectos que pueden influir en la legibilidad de un texto:

• El diseño del tipo: las familias que consiguen mayor diferenciación entre caracteres parecen ser más legibles. Si el diseño de letras es muy homogéneo dificulta la lectura. 
• Serif o Sans-serif: actualmente hay cierto consenso en que las tipografías con remates consiguen una mayor diferenciación entre letras y, en consecuencia, una mayor legibilidad, y suelen usarse en textos continuos.
• Caja alta o baja: la caja alta tiene una alineación horizontal homogénea que uniformiza las letras. La caja baja, con caracteres más individualizados, ofrece menor dificultad de lectura.
• El estilo o peso: La negrita y la itálica son resultantes de algoritmos que añaden píxels extras al contorno de las romanas. Un peso medio es más legible que una fuente fina o negrita (aunque la negrita dentro de un texto normal llame la atención por su peso). Las fuentes cursivas pierden legibilidad por su inclinación, es recomendable no utilizarlas en textos largos.
• Anchura de la fuente: una fuente demasiado ancha o demasiado condensada pierde en legibilidad. Se suele usar el modo condensado para informaciones secundarias que tienen que ocupar poco espacio.
• El soporte: las propiedades del soporte influyen en la legibilidad. La baja resolución de las pantallas de televisión y de ordenador paradójicamente baja la legibilidad de las tipografías con remate.

Los aspectos que influyen en la amenidad de lectura:

• Espaciado entre letras y palabras: un espaciado reducido puede percibirse como un  amontonamiento de letras; si es demasiado amplio, puede fragmentar el texto.
• Tamaño del tipo: hoy en día podemos encontrar tipos diseñadas especialmente para la pantalla , estas están pensadas para adecuarse a la matriz creada por los píxels y cada letra está pensada y optimizada en función de la pantalla. Normalmente las tipografías están diseñadas en medidas específicas (8, 9, 10, 12) y si se utilizan en un cuerpo para el cual no están pensadas (11, 13…) se generan mediante un cálculo que aproxima visualmente a la medida solicitada, pero perdiendo todo el detalle y la definición del diseño original. Es evidente que influye en la lectura, aunque hay que valorarlo conjuntamente con el tipo de soporte y la familia tipográfica escogida.
• Ancho de columna: gracias  a la tendencia en el mercado del uso de pantallas panorámicas, la mayoría de webs tienen el doble de anchura del alcance adecuada al ojo, por la cual cosa exige un esfuerzo extra para leer los textos. Se recomienda limitar el uso de columnas, aún así si se utilizan es preferible crear párrafos con una anchura más estrecha que en el papel. Un tamaño estándar podría ser entre 12 y 15 palabras por columna. Una columna muy estrecha fragmenta el texto; en una demasiado ancha el lector encuentra con dificultad la línea siguiente.
• Interlineado: si es demasiado estrecho obtenemos un abarrotamiento de texto con  difícil lectura. Si es demasiado ancho, interrumpe continuamente la lectura, que obliga a atravesar continuamente espacios blancos. Se recomienda incrementar la interlinea un 150% más que en papel, especialmente en tipografías Sans-serif que no poseen la guía horizontal que forman los remates y que ayudan al ojo a seguir el flujo del texto
• Alineación: la alineación a la izquierda y la justificada son las más legibles, aunque es preferible la primera. Para textos cortos se puede usar la centrada o la alineada a la derecha. La justificada dificulta la amenidad de lectura si provoca demasiado espaciado entre palabras o un espaciado muy variable.
• Contraste de color: la utilización de colores demasiado parecidos  entre el texto y el fondo dificultarán la amenidad de lectura. Hay que buscar un contraste fuerte: colores claros con oscuros, colores muy saturados con poco saturados.

Enlaces de interés
http://www.linotype.com/es/?lang=es
http://es.letrag.com/
http://www.w3.org/TR/css3-fonts/
http://www.smashingmagazine.com/2010/11/16/web-typography-100-educational-resources-tools-and-techniques/
http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/
http://speckyboy.com/2010/11/14/18-super-quick-web-typography-tips-for-newbies/
http://speckyboy.com/2009/08/31/50-essential-web-typography-tutorials-tips-guides-and-best-practices/
http://www.alistapart.com/articles/on-web-typography/

Una de ellas es la creación de puntos focales. Un punto focal es un área destacada de nuestro diseño web con el propósito de guiar la atención del usuario. El foco central es normalmente el área más llamativa de nuestro diseño y se distingue de los otros elementos de la web.

Muchas veces durante el proceso de diseño web este foco se pierde, por un lado para crear un aspecto visual impresionante y por otro para dar demasiada prioridad a un diseño orientado a los motores de búsqueda. Mientras que los dos condicionantes anteriores son importantes no debemos olvidar que siempre diseñamos una web para el usuario final

Se recomienda tener un solo punto focal, decidir lo más importante en la página, y luego acentuarla a través del diseño. El punto focal debe relacionarse directamente con los objetivos y prioridades la web y a su vez de las expectativas del cliente, si no es así tendremos dificultades para conseguirlo.

Los puntos focales se deben colocar en la página principal, donde la mayoría de usuarios acceden a nuestra web. Sin embargo, también es importante crear puntos focales si se puede en todas las páginas, de esta manera los usuarios tienen la posibilidad de acceder a la información clave desde cualquier sitio. De la misma manera que en nuestra web, todas estas indicaciones son de igual o mayor  importancia en el diseño de Landing pages o newsletters.

¿Y cómo lo conseguimos?, pues gracias a diferentes elementos visuales de diseño, seremos capaces de hacer hincapié en el área más importante de la web y de transmitir el objetivo principal de la misma.

Estos elementos visuales pueden ser:

Espacios en blanco
Utilizando los espacios conseguiremos de una forma sencilla atraer la mirada a las áreas específicas del diseño sin tener que recurrir a a otros elementos visibles.

Botones
De los más utilizados en el diseño web en especial el botón de llamada a la acción. Son eficaces debido a su alta visibilidad (debido a su tamaño), la familiaridad y el etiquetado descriptivo. Los botones son elementos atractivos, pero su uso excesivo o mal uso puede hacer perder eficacia.

Tipografía
Los elementos de textuales tienen un gran potencial para captar la atención del usuario, sobre todo para los diseños con gran cantidad de texto, por lo que en algunas áreas es recomendable que sean resaltadas. Gracias al tamaño, color, espacio entre caracteres o interlinea y por supuesto la familia tipográfica serán los factores que nos ayudarán a crear un mayor énfasis de los elementos textuales.

Elementos gráficos
Ya sean con iconografías o ilustraciones ayudan a transmitir mensajes de forma rápida y sin necesidad de mucha descripción. Muy útiles para mostrar los pasos de un proceso, al ser tan descriptivos.

Efectos
Una manera de distinguir un área de su entorno es el uso de un efecto sencillo. Un buen uso depende de lo bien que sean utilizados.

Steve Jobs siempre tuvo presente el diseño y sobretodo supo potenciarlo y hacerlo más próximo a las personas. En mi opinión, dentro de la historia del diseño, tendrá un sitio preferente, y no como diseñador sino de como supo entender la finalidad del diseño y de la gente que nos dedicamos a esto, es decir, ser juzgados no sólo por nuestra creatividad sino por el resultado final del proyecto buscando la mejor solución a la necesidad que se plantea el usuario en cualquier campo.

Muchos creen que Steve Jobs no fue quien diseño la gran mayoria de productos de Apple pero fue el «capitán» de llevar acabo y conducir las soluciones de diseño que hoy en día todos conocemos.

Aquí os dejo unas frases célebres que realizo Steve Jobs relacionadas en el campo del diseño:

• Algunas personas creen que el diseño es el aspecto, pero cuando se profundiza te das cuenta que es el cómo funciona. El diseño del Mac no era lo que parecía, lo fundamental era su funcionamiento. Es necesario un compromiso apasionado para comprender realmente a fondo algo, y la mayoría de las personas no se toma el tiempo necesario para hacerlo.
• Para mí, nada es más importante en el futuro que el diseño. El diseño es el alma de todo lo creado por el hombre.
• Cuesta demasiado diseñar productos a partir de grupos cerrados. La mayoría de las veces la gente no sabe lo que quiere hasta que se lo enseñas.
• Cuando se pregunta a la gente creativa la forma en que hizo algo, se sienten culpables porque no saben explicarlo, a ellos les parecía obvio. Esto se debe a que fueron capaces de conectar las experiencias vividas y sintetizarlas en algo nuevo. Desafortunadamente, un gran número de personas de nuestra industria no ha tenido experiencias diversas, por lo que no tienen puntos suficientes para conectar y optan por soluciones muy lineales, sin una perspectiva amplia del problema.
• Mira el diseño de la gran cantidad de productos de consumo, son superficiales y muy complicados. Tratamos de hacer algo mucho más integral y simple. La primera vez que tratas de resolver un problema, las primeras soluciones que te vienen son muy complejas, y la mayoría de la gente se detienen allí. Pero si sigues  y vives con el problema muchas veces puedes llegar a algunas soluciones muy elegantes y sencillas. La mayoría de la gente simplemente no pone ni el tiempo ni la energía para llegar hasta allí. Creemos que los clientes son inteligentes, y desea que los objetos esten muy bien pensados.
• Nosotros pensamos que venderíamos millones y millones de Macs, pero no los fabricamos para cualquiera, lo hicimos para nosotros mismos. No nos pusimos ha hacer investigaciones de mercado, simplemente hicimos lo mejor que sabíamos fabricar.
• Cuando eres un carpintero haciendo una hermosa mesa no te pones a usar una pieza de madera de mala calidad para la parte trasera por el hecho de que nadie la va a ver. Tú sabrás que está ahí y por eso usarás una madera de la misma calidad para todo el mueble. Para que se pueda dormir bien por la noche, la estética y la búsqueda de la calidad tienen que ser llevadas hasta sus últimas consecuencias.
• Enfoque y simplicidad ha sido uno de mis mantras. Hay que trabajar duro para conseguir esa simplicidad en tus pensamientos, pero vale la pena porque si lo consigues puedes mover montañas.
• Es fácil y agradable para nuestros clientes usar nuestros ordenadores; este es nuestro trabajo. No es que no es escuchemos a los clientes, pero es díficil que éstos te digan lo que quieren cuando nunca han visto nada parecido
• Ser el más rico del cementerio no es lo que más me importa… Acostarme por la noche y pensar que he hecho algo genial. Eso es lo que más me importa.
  (esto es mio: dedicado a los diseñadores que va de cracks, todos ya sabemos quienes son)
• Tenga un criterio de calidad. Algunas personas no están acostumbradas a un entorno en el que se espera la excelencia.