En el libro han colaborado varios autores internacionales y las ilustraciones son de la australiana Yiying Lu.

Ojeando el libro da la impresión de que todos los capítulos son muy completos e inspiradores. Tiene buena pinta el capitulo 7, sobre principios de diseño en videojuegos aplicados al diseño de la experiencia del usuario, y el capitulo 9, un estudio sobre los patrones de diseño en el comercio electrónico.

Sumario de Smashing Book #2

• The Principles of Great Graphic Design
• Visible vs. Invisible Design
• Designing Mobile User Experiences
• Sketching, Wireframing and Prototyping
• Red Flags in Web Development
• The Future of Web Typography
• Game Design Techniques Applied to UX Design
• When They Click: Psychology of Web Design
• Design Patterns on E-Commerce Websites (A Study)
• How to Make a Book (Like This One)

Sin embargo, desde un punto de vista del diseño, los menús desplegables son una solución excelente, ya que ayudan a aligerar layouts saturados. En cuanto a la usabilidad, los llamados mega menús desplegables pueden ser una gran herramienta de navegación, sin dejar de ser una característica de diseño útil y atractiva.

Los menús desplegables pueden mejorar la organización del contenido en elementos ordenados y mejorar el acceso rápido al contenido, pero, si no se realiza correctamente, puede ser tan malo como una distribución desordenada.

Electronic Arts

La Casa Blanca

Adidas

Aprovechando el inicio de este nuevo año y continuado el post sobre  tendencias del comercio electrónico en el 2010 del año pasado, expondré las tendencias del comercio electrónico para el año 2011. En este año continuarán las estrategias iniciadas en los últimos años, pero también nuevas apuestas innovadoras.

Personalización dinámica

La experiencia personalizada en el comercio electrónico va a ser clave este año. La personalización, teniendo en cuenta un amplio espectro de factores y conductas, puede ofrecer una experiencia individual para cada usuario. Algunos de estos factores, tales como el origen de un visitante, la navegación, la página de salida, qué productos compró unido a reglas de negocio específicas, pueden mostrar la combinación de productos adecuada a la persona adecuada en el momento adecuado. Además, la personalización puede potenciar la segmentación y los contenidos de las campañas de email marketing.

Mobile Commerce

El crecimiento del uso de smartphones seguirá este año y en consecuencia el Mobile Commerce. Pero la estrategia debe pasar por optimizar las aplicaciones y los sitios específicos. Los usuarios de móviles tienen necesidades y expectativas distintas de interacción, por ejemplo en un estudio reciente el 18% de los encuestados estaban descontentos con la experiencia de Mobile Commerce, al consumir demasiado tiempo y ser complicada.

Web Analytics

Los días de gloria del tráfico online rápido y crecimiento de las ventas están en declive. Ahora es necesario un modelo de negocio más pragmático con en el que la  perspicacia comercial es cada vez más importante y va a ser crítico verificar de una manera más inteligente el control de retorno de la inversión (ROI). Por ello, los datos analíticos son cada vez más importantes, pero ya no son simples estadísticas sobre el número de visitas. Mediante los datos analíticos se pueden tomar decisiones objetivas para optimizar el diseño del sitio, crear reglas de negocio para personalizar la información, optimizar los Indicadores Clave de Desempeño (KPI)…

Location Based Services

Con la proliferación de móviles con GPS seguirá aumentado el uso de los servicios basados en la localización. Aunque los Social Gaming Apps son muy recientes, su potencial en las promociones multi-canal es innegable. Grandes empresas como Starbucks han realizado promociones basadas en Foursquare para premiar a los clientes fieles y la evolución de estas aplicaciones posibilitarán nuevos tipos de promoción.

Layout flexible y minimalista

Las tendencias en el diseño de la estructura tienden cada vez más a destacar el producto y menos la navegación. El usuario está interesado en el producto, por lo que el ratio óptimo puede estar en un 25% para la navegación y un 75% para el producto.

Otro punto a tener en cuenta es la flexibilidad del diseño a diferentes resoluciones, en parte por la aparición de los tablets. En este caso, AJAX cada vez es más importantes, ya que permite mejorar la interacción y modificar la estructura dinámicamente. Por ejemplo, los usuarios tienden a usar el botón de ver “todos los productos” en una misma página (aunque haya un scroll muy grande) para evitar navegar por un listado dividido en varias páginas.

Globalización

En el 2010, los grandes comercios online han realizado un gran esfuerzo para vender sus productos a nivel mundial: Gap ha comenzado a realizar envíos a otros mercados internacionales además de crear tiendas personalizadas para Reino Unido y China; Amazon lanzó su primera tienda online localizada en seis años, Zara inauguro su tienda online en seis mercados europeos.

En el 2011, cada vez más empresas llegarán a sus clientes globales por medio del envío internacional y crearán infraestructuras en los mercados en el caso de disponer de una masa amplia de compradores. Un ejemplo de este modelo de crecimiento es la empresa británica Boden que no invirtió en un almacén y centro de atención al cliente en EEUU hasta que un tercio de los ingresos provenían del mercado americano.

Social Media

Las redes sociales ya no son un factor nuevo en el comercio electrónico pero los imperativos sociales en las compras están en constante evolución. El nivel más básico puede ser la integración del botón share de Facebook y Twitter. Otro nivel pasa por integrar las redes sociales en los sistemas de recomendaciones, como ya ha hecho Amazon. La importancia de las recomendaciones positivas va a ser muy importante al potenciar el boca a boca, pero también afecta a los resultados en Google, ya que su motor de búsquedas de productos incluye las recomendaciones como un factor de posicionamiento. Relacionado con esto, la atención al cliente unido a los Social Media va a ser cada vez más importante. En España un ejemplo del exito de la atención al cliente mediante redes sociales ha sido la crisis de los controladores, donde las lineas áreas usaron Twitter como vía de información preferente a los clientes.

Puedes descargarte la ilustración original en varios tamaños aquí.

Versión alemana

Hace unas semanas estuve pasando unos dias en Alemania y pude hablar, de manera distendida, con el director del Kreismedienzentrum Tübingen sobre el social media en el entorno laboral y privado de las escuelas y universidades de Alemania. En cada país o cultura existen particularidades en el uso de las redes sociales. A su vez, cada mercado puede tener alternativas a las redes sociales predominantes a nivel mundial, tales como Facebook. Esto también pasa en mercados menos maduros como el español por ejemplo con Tuenti. Por ello, teniendo en cuenta esta particularidad, la empresa Ethority ha creado una adaptación del prisma de conversación al mercado alemán. ¿Para cuándo una versión española?

Puedes descargarte la ilustración original en varios tamaños aquí.

]]> http://www.vivaelpixel.com/2011/01/prisma-conversacion-social-media/feed/ 0 http://www.vivaelpixel.com/2010/12/google-instant-preview-afecta-diseno/ http://www.vivaelpixel.com/2010/12/google-instant-preview-afecta-diseno/#comments Wed, 01 Dec 2010 23:01:07 +0000 Andy Kaiser http://www.vivaelpixel.com/?p=1359 Instant Preview es una de las últimas mejoras que ha presentado Google y permite a los usuarios ver una previsualización de la página web en el buscador. La vista previa permite:

• Comparar resultados rápidamente: La vista previa de los resultados de búsqueda permite comparar y elegir lo que se está buscando.
• Localizar el contenido relevante: Los globos de texto resaltan los términos de búsqueda en la página web.
• Interactuar con la página de resultados: La vista previa permite ver páginas web antes de hacer clic en los resultados de búsqueda.

Según estudios de eyetracking, a los usuarios les cuesta encontrar y asimilar esta nueva funcionalidad del buscador. Pero, en cuanto los usuarios la asimilan, puede llegar a modificar los comportamientos de búsqueda, al permitir realizar comparaciones de los resultados basados en el diseño.

Por ello, en la previsulización de Google, los diseños centrados en el usuario destacaran frente a otros. En cambio las páginas basadas en Flash sin imágenes sustitutivas van a destacar negativamente.

Previsualización de una web desarrollada en Flash

Google Instant Preview en acción

Para encontrar la mejor fotografía y al mejor precio existen varios buscadores y extensiones para navegadores.

SpiderPic

Es uno de los buscadores más completos. Los resultados pueden filtrarse por el origen, licencia y ordenar los resultados (por novedad, descargas y relevancia). Además, es posible comparar los precios de la misma imagen en las diferentes comunidades, como se puede ver en esta página de ejemplo o en la siguiente imagen:

Además, SpiderPic dispone de una extensión para Firefox e Internet Explorer y hay una extensión en desarrollo para Chrome.

StockBlend

Este buscador, creado por Anders Peter Amsnæs, permite configurar la busqueda de imagenes, videos e ilustraciones en múltiples webs. Además de las más conocidas, es posible buscar en comunidades más especializadas (Artic Stock Images, Retrostock y Medstock) e imágenes en Flickr.

Cyclops

Cyclo.ps difiere de los anteriores al exponer los resultados de búsqueda en diferentes pestañas. Por ello es más complicado comparar los precios e imagenes de las diferentes fuentes.

ImageTrail

Es uno de los buscadores, de este tipo, más antiguos. No es muy configurable y los resultados no parecen ser los más actualizados.

Picniche

Es una extensión para Firefox que permite buscar las imágenes al mejor precio en Fotolia, Shutterstock, iStockphoto, Dreamstime, BigStockPhoto, StockXpert, 123 Royalty Free, CreStock, Cutcaster, CanStockPhoto, Deposit Photos y Panther Media.

La web ha sido realizada por la agencia inglesa Poke.

Actualmente la agencia está realizando una campaña de social media marketing en Twitter -en la que buscan los nombres para los monoplazas de la escuderia.

Personalmente me gusta el diseño y programación de la web (aunque no valida en el W3C). Siendo Virgin Racing el equipo con menos presupuesto de la Formula 1, la imagen web que promocionan es, a mi parecer, la mejor de los nuevos equipos de Formula. Por supuesto, esto es un aspecto estratégico del equipo ya que detrás está Richard Branson y Virgin, quizás una de las 20 marcas con más nombre.

Tecnologia

Además de una imagen moderna, la web  de Virgin Racing tiene características técnicas interesantes:

• Servidor nginx 0.7.62
• doctype XHTML 1.0 Strict (aunque no validado)
• jQuery 1.3
• Liberia Cufon para las tipografías
• Cloudfront como CDN

Por medio de técnicas de desenfoque en la toma y retoque digital, logra que los espacios urbanos se conviertan en maquetas, produciendo imágenes atractivas y desconcertantes.

Ben está rediseñando su web Cityshrinker, pero es posible admirar sus fotografías en la versión anterior.

¿Cómo conseguir el mismo efecto?

Si quieres conseguir efectos parecidos en tus fotos visita los siguientes tutoriales/webs:

• tutorial para Gimp
• tutorial para Adobe Photoshop
• teoria en la wikipedia
• aplicación web para conseguir este tipo de efectos
• aplicación para iphone
• 9 ejemplos de otros fotógrafos

Varias fotografías de Cityshrinker

Aunque estas practicas no están extendidas lo que deberían, existen múltiples herramientas que permiten crear wireframes de una manera rápida e intuitiva (tanto versiones Cloud Computing & Saas. como programas para diferentes plataformas):

1. Mockingbird (Online/Saas)

Es una herramienta online de creación de wireframes (Wireframing-Tool). Al estar programada sobre el Framework “Cappuccino” la interacción es como en un programa de escritorio. Los wireframes se crean de una manera sencilla mediante Drag & Drop de elementos comunes en el diseño de páginas web. El resultado puede descargarse o enviarse por email.

2. Firefox Pencil (Mac/Windows)

Esta herramienta está basada en el Geckoengine del navegador Firefox, y se instala como un complemento (plugin). Por lo tanto es una buena solución para esquemas rapidos e independientes de la plataforma. Los wireframes se pueden exportar en formato png. En su contra, el uso es, a veces, un poco más lento debido a que no dispone de atajos de teclado. Pero su escaso tamaño (< 450 KB) y ser una herramienta gratuita la hacen una muy buena elección.

3. Iplotz (Online/Saas)

Es una herramienta online que permite crear wireframes clickables. Además incluye funcionalidades básicas de gestión de proyectos, como por ejemplo asignar tareas, por lo que es posible colaborar con otros usuarios en la creación de los wireframes. Aunque sea un servicio Saas, existe una versión descargable programada en AIR. Finalmente, hay múltiples planes que se adaptan a diversos usuarios, desde una versión gratuita (1 proyecto limitado a 5 pantallas) a versiones corporativas (múltiples usuarios y proyectos ilimitados)

4. Balsamiq (Mac/Windows)

Balsamiq es una herramienta programada en Flex y la creación de wireframes es muy intuitiva y permite crearlos de una manera rápida. Las plantillas, con un estilo pintado a mano, facilitan que al presentar los prototipos no se malinterpreten con versiones finales. En la web de balsamiq se puede probar la herramienta de manera gratuita y exportar los wireframes a png (con marca de agua). Y en el caso de utilizar la herramienta habitualmente existe una versión de pago, además de una versión onlines/saas en el futuro. Por ultimo al basarse en archivos xml, es posible integrar la herramienta con otros programas como por ejemplo gestores de proyectos.

5. Omnigraffle Pro (Mac)

Esta herramienta permite crear rápidamente wireframes, diagramas de proceso y sitemaps. Las características más interesantes de Omnigraffle es que permite crear capas como en Photoshop y usar plantillas predefinidas, que pueden descargarse de internet – por ejemplo de Graffletopia. Estas plantillas permite crear fácilmente wireframes de aplicaciones de Facebook y Iphone, Elementos Ajax, Formatos publicitarios o elementos de Social Media Webs. También es posible crear prototipos clickables al poder definir zonas interactivas que al exportarse a pdf clickables dan cierta interacción (aunque no pueden sustituir a prototipos en html)

6. Axure (Windows)

En comparación con otras herramientas Axure permite crear prototipos interactivos en html/javascript. La creación de prototipos interactivos es muy util tanto para presentaciones como para pruebas de usuarios y poder hacerse una idea de la futura web. Otra funcionalidad interesante es la posibilidad de crear comentarios en los documentos que luego pueden exportarse a formato Word, para crear la documentación conceptual de un proyecto. Como en otras herramientas es posible cargar plantillas para agilizar la creación de los wireframes.

7. Adobe FlashCatalyst (Mac/Windows)

Este programa desarrollado por Adobe aun se encuentra en su fase de desarrollo. Aunque solo este disponible una versión beta, la herramienta es muy solida. Al ser un producto Adobe permite cargar archivos de otras herramientas Adobe como por ejemplo Photoshop o Illustrator. Lo más destacable de FlashCatalyst es que permite añadir interacción a los elementos de diseño hasta el punto de crear animaciones avanzadas como por ejemplo scroll, fundidos, etc. Por ello FlashCatalyst es, seguramente, la herramienta ideal para la creación de prototipos con animaciones complejas, ya que es algo limitada para wireframes estáticos.

Otras referencias

En resumen, actualmente existen múltiples herramientas para crear wireframes estáticos y prototipos clickables. Puedes encontrar una amplia tabla resumen en en este articulo de Dan Harrelson.