Saraclip

Always learning about UX, Agile & Psychology

Responsive Design

Fuentes como iconos

, , ,

Hoy en día podemos usar fuentes que son iconos. Con ellas te olvidas de tener que vectorizar un icono, y tener que guardarlos en diferentes tamaños para tenerlo adaptado para las diferentes resoluciones de los dispositivos, o colores para los estados de los enlaces.

Font iconos

Olvídate de vectorizar y guardar cada icono en un tamaño determinado

Su funcionamiento es como una fuente cualquiera por lo que puedes ponerlas al tamaño, color, sombreado  que quieras mediante CSS.

Font Glyphicons

Una de ellas son el set que viene con Bootstrap, llamado Glyphicons Halfligns. 250 iconos o glifos, gratuitos al instalar Bootstrap.

Seguir leyendo «Fuentes como iconos»

Mobile first: la realidad de las redes

, , , ,

Seguimos con la serie de artículos basados en el libro MobileFirst de Lukeroblewski, sobre como las restricciones que se aplican a la hora de diseñar para móviles se convierten en ventajas que tenemos que aplicar también al diseño en escritorio. En el primer post nos centrábamos en que el usuario tiene una pantalla menor y ahora hablamos sobre la cobertura que puede tener.

Y es que la ventaja de los móviles es que los tenemos siempre a mano, pero a veces aunque los intentamos usar en cualquier lugar, las redes de telefonía no siempre lo permiten.

Y aunque tengamos cobertura, la tarifa de datos necesaria puede ser insuficiente o la hemos gastado y no podemos permitir ampliarla, llevando a conexiones lentas y largos y frustrante tiempos de espera. Y aunque mucha gente aproveche a conectarse al WIFI para ahorrar datos, eso no tiene porque ser así.

Diseñar para móviles, te obliga a diseñar para esa realidad.

Y es que todo lo que puedas hacer para bajar el tiempo y los elementos de descarga, debes hacerlo. Eso significa enviar menos cosas y usar toda la tecnología disponible tanto del servidor como del navegador de la que nos podamos aprovechar.

Tus usuarios agradecerán que la web cargue rápido, y su factura más 🙂

Cobertura móvil 2013 3G

Lo primero es reducir el número de peticiones al servidor, es decir, reducir el numero y el tamaño de los archivos que estás mandando al móvil. Por lo que asegurate de que:

  • Usa sprites para las imágenes para agruparlas en un único archivo (pero asegurate que no sea demasiado grande)
  • Agrupa tus archivos CSS y Javascript.
  • Limita las dependencias de librerías pesadas de Javascript, especialmente si solo las usas para una o dos funciones.
  • Limita el uso de CSS grid systems (no se como traducirlo)
  • Usa cabeceras HTTP adecuadas para que los archivos sean cacheados en la memoria del navegador.
  • Cuando puedas saca ventaja de las opciones que te ofrecen los navegadores como Canvas en HTML5.
  • Y usa CSS3 para redondear esquinas, sombreados, degradados… Así no necesitarás imágenes para hacer esos efectos.

Y es que la velocidad no es sólo importante cuando diseñamos y programamos una web para móviles.

Pruebas hechas por Yahoo!, Amazon, Microsoft y otras grandes marcas han mostrado que cada pequeño retraso (y hablamos de 100ms) en la versión de escritorio puede hacer que un usuario se vaya.

Seguir leyendo «Mobile first: la realidad de las redes»

Mobile first: aprovechando las restricciones de los móviles

, , , , ,

Aunque cada vez tenemos mejores móviles, la verdad es que las pantallas siguen siendo «relativamente» pequeñas.  Y aparte de eso, las redes son poco fiables y las personas se encuentran en todo tipo de situaciones cuando usan su móvil.

Pero adaptarse a estas restricciones puede ser una ventaja de cara al diseño de la web.

Tamaño de pantallas

Los primeros móviles salieron con resoluciones de 320x480px, lo cual significa que sólo disponíamos del 20% de una pantalla de ordenador (tomando como referencia 1024x768px). Por lo que el 80% de las imágenes, links, anuncios, videos, textos… de las páginas tenían que desaparecer o encontrar otro lugar.

Resolucion iPhone

Y es que es normal en muchas empresas que todo el mundo quiera poner algo de su departamento en la página principal. Y ves al equipo de diseño intentando rellenar todo ese espacio de la pantalla con promociones, interacciones, contenido, menús… para que todo el mundo este contento.

Pero cuando consideras la cantidad de información no necesaria o «basura» que llena una página web, descubres porque la «dieta» de la pantalla de un móvil puede ser buena tanto para el negocio como para los usuarios.

Y es que el no tener espacio ayuda a las personas a centrarse en lo importante.

Esto es como hacer una maleta para RyanAir. Sólo puedes llevarte lo que entra en el tamaño de cabina y que encima no pase de X kilogramos. Pues con los móviles sucede igual. No hay espacio para nada más que lo importante.

Obliga al diseñador a asegurarse de que lo que está en la pantalla son las características más importantes para los usuarios y el negocio.

Para ello tienes que conocer muy bien ambos. Diseñar para móviles te fuerza a ello, te guste a no.

Seguir leyendo «Mobile first: aprovechando las restricciones de los móviles»

¿Por qué los usuarios usan sus móviles?

, , , ,

Cuando nos ponemos a diseñar para móviles tenemos que centrarnos en por qué los usuarios van a usar esa web o app, es decir qué necesidades tienen en ese momento dado y donde se encuentran.

Por un lado, tenemos que tener en cuenta que un móvil no tiene tanto espacio, ya que aunque la tendencia actual tira hacia pantallas grandes, no todos los dispositivos tienen 5,5″ y aun así no tenemos el mismo espacio visible que cuando navegamos con un ordenador.

Usuarios y mobiles

Además el móvil tiene una serie de elementos y posibilidades únicas que no tenemos o no solemos usar, cuando utilizamos un ordenador.

Por lo que trasladar lo que tenemos en la web de escritorio, a la web móvil no tiene sentido.

Tenemos que pensar en lo que el móvil nos ofrece y alinearlo con las necesidades de los usuarios.

Josh Clark habla en su libro Tapworthy, de 3 comportamientos críticos en los usuarios al usar un móvil:

  1. Micro-tareas
  2. Estoy aquí
  3. Estoy aburrido

Lo cual se alinea con los 3 grupos de comportamientos con móviles que comenta Google:

  1. Necesito hacer algo ahora
  2. Necesito información/comprobar algo ahora
  3. Estoy aburrido

Independientemente de como los llames, cuando usamos un móvil suele ser una mezcla de varios de estos comportamientos:

1. Buscar – Encontrar

Se basa en la unión de Necesito hacer algo ahora + Estoy aquí.

Es decir, necesito una respuesta a algo, generalmente relacionado con donde me encuentro. Por ejemplo, cuando la gente busca un restaurante donde comer, o el parking más cercano.

Seguir leyendo «¿Por qué los usuarios usan sus móviles?»

Rediseño responsive de la página de alojamiento

, , , , ,

Poco a poco, aunque menos rápido de lo que me gustaría ;-), vamos implementando cambios y mejoras, tanto en diseño como en usabilidad.

Y es que, sin cambiar la maquetación de ciertas páginas, es decir, su «core» es imposible que cumplan los objetivos deseados en determinados dispositivos.

Quieres un diseño que proporcione la mejor experiencia desde cualquier dispositivo

El problema, era que como la mayor parte de las webs, ni su estructura ni su experiencia, estaba pensada para tablets o móviles, sino que sólo estaba optimizada para desktop.

Diseño página de alojamiento

Diseño responsive de la página de alojamiento

Y lógicamente dado el porcentaje de tráfico actual que viene de móbiles y tablets, era impensable continuar así, sin tener la web optimizada para dar la mejor experiencia.

Hace más de 2 años, cuando entre en Central de reservas, la página de alojamiento era similar a esta imagen:

Seguir leyendo «Rediseño responsive de la página de alojamiento»

WebCongress Barcelona

, , , ,

El 26 de febrero se celebra en la Antigua Fábrica Estrella Damm, el WebCongress Barcelona, un día en el que el marketing digital y la tecnología se juntan para conocer las estrategias actuales en social media.

WebCongress Barcelona

Y este año la experiencia es única, formando cada participante parte del congreso, ya que van a dejar un iPad para que puedan consultar todo en las redes sociales, descargarse las presentaciones de los ponentes, interactuando “en directo” con los ponentes…

Cada asistente dispondrá un iPad para interactuar durante las charlas

Desde las 9:00 de la mañana hasta las 19:00 que comienza la W Party, los asistentes podrán ver charlas como The Human Side of Convertion Optimization, impartida por Ivan Imhoff o a Natzir Turrado con Kay Shaefer hablando en la Interactive Session sobre la Atracción (esta me encantaría oírla).

Seguir leyendo «WebCongress Barcelona»

7 Herramientas para el prototipado de apps

, , , ,

Seguimos con los recursos que nos pasó Andrés Botero (@saertus) en la clase de Interaction Design del ITAINNOVA.

En el anterior artículo hablamos ya de una herramienta de prototipado que probamos en clase: POP. Hoy vamos a comentar algunos que son más complejas y potentes. Y es que una vez que hemos pensado como podría funcionar la interfaz, tenemos que construirla para poder validar nuestras hipótesis en cuanto a la interacción y la usabilidad.

@saraclip

También nos va a servir para:

  • Generar conversaciones con el cliente
  • Hacer test de usuario
  • Refinar las interacciones y descubrir todo aquello que no funciona bien.

Jamás hay que llegar a un estado tardío de una interfaz sin haberla prototipado antes y contarla con una historia.

Puedes construir prototipos con papel, herramientas web, HTML/CS/JS…

Pero las aplicaciones no son algo estático, sino que interactúan con el usuario. Las siguientes herramientas permiten animar los mockups para mostrar las interacciones en el diseño.

Y es que es mucho más rentable descubrir los problemas de diseño y usabilidad cuando se está probando un prototipo interactivo, que cuando ya se está en fase de desarrollo. En ese momento , ya es demasiado tarde para arreglar las cosas.

Quartz composer

Herramienta de diseño que incluye Apple en su paquete de aplicaciones para desarrolladores. Es una app nativa que usa los recursos nativos. Tienes que destinar un dispositivo receptor y este estar conectado al mac por un cable.

Quartz Composer

Origami

Origami es similar a Quartz pero con una capa de diseño por encima. Es una herramienta gratuita creada por el equipo de Facebook, que usa Quartz Composer.

Origami

Proto.io

Proto.io te permite crear fácilmente prototipos totalmente interactivos de alta fidelidad que se ven y funcionan exactamente igual que la aplicación.

Seguir leyendo «7 Herramientas para el prototipado de apps»

Curso Interaction Design

, , ,

Durante estos 3 días, he estado haciendo el curso del ITAINNOVA sobre Interaction Design impartido por dos diseñadores de Designit, Esther Serrano (@esterserrano) y Andrés Botero (@saertus).

La idea ha sido, que usando una empresa real dedicada a la promoción de eventos y conciertos online, hemos realizado todos los pasos necesarios para diseñar un producto digital desde las primeras ideas hasta el prototipado, tanto a bajo nivel, como a alto nivel.

Presentacion del Customer Journey

Presentacion de unos de los grupos del Customer Journey

Para ello hemos desarrollado personas, hemos hecho mapas de empatía, customer journeys de estas personas, historias, escenarios y casos de uso…

También dimos los principios de la Gestalt, de los cuales ya he hablado en dos artículos en este blog (Psicología y diseño: Leyes de la Gelstalt I y parte II) y las normas básicas sobre usabilidad, definidas por Nielsen.

Flujos de pantallas

Ester enseñándonos flujos de pantallas

Con los wireframes de la app que cada grupo desarrollamos, usamos un programa llamado POP para poder hacer pruebas de uso de navegación.

pop-app

Ayer, que fue el tercer día, vino Andrés, a contarnos temas sobre Content Estrategy, macrocopy y microcopy, la importancia de los modelos mentales de los usuarios y patrones de interacción existentes hoy en día en las apps.

WireframesComenzando a hacer wireframes con Andrés

Lo que más me gustó, fue que nos enseñará estas 2 webs, donde puedes ver millones de ejemplos de patrones y de elementos de diseño usados cada día en apps.

UXArchive

Por ejemplo, con UXArchive.com, tu puedes seleccionar un patrón de interacción como Exploring, y te muestra ejemplos de web, donde lo aplican, y como lo hacen.

UXarchive

Vemos como se navega en Flipboard, y hasta nos muestran versiones anteriores.

Exploring

Seguir leyendo «Curso Interaction Design»

Principios básicos de diseño para móviles

, , , , ,

En este artículo vamos a explicar algunos de los principios que Google comenta en este pdf, Principles of mobile site design: delight users and drive conversions.

Diseño para móviles

Google and AnswerLab intentan responder qué es lo que hace que un sitio este bien diseñado para móviles. Y es que hoy en día, dada la cantidad de personas que navegan con móviles y tablets es algo que como diseñadores tenemos que averiguar.

Usabilidad

Optimiza todo el sitio

Los usuarios navegan más fácilmente por sitios optimizados que cuando intentan navegar en las versiones de escritorio.

Si ambas partes están mezcladas es incluso peor. Y según como esté realizado el diseño, puede que les parezcan webs diferentes.

Optimiza web para móviles

El zoom no es necesario

Los usuarios se sienten frustrados cuando al hacer zoom se pierden las llamadas a la acción o mensajes.

No zoom

Algunos sitios incluso deshabilitan el zoom en sus pantallas. Si la web está bien diseñada, los usuarios no necesitan hacer zoom.

Seguir leyendo «Principios básicos de diseño para móviles»

Iniciándonos en el diseño de Apps para Android

, , , ,

Con motivo de tener que rediseñar una app en el trabajo, me puse a investigar sobre ello, empezando por las indicaciones que nos da Android sobre diseño de apps a los desarrolladores.

Android developers

A continuación, y durante una serie de artículos voy a comentar lo que me ha parecido más interesante, ya que la información encontrada es muy extensa.

Navegación

Una navegación consistente es básica en cualquier experiencia de usuario. Pocas cosas nos frustan más que algo suceda de manera inesperada o no encontremos una acción donde debería estar.

El botón de Up o de “Subir” es usado para navegar entre las diferentes pantallas jerárquicas de una App. Este suele estar en la parte superior de la App al lado del icono o nombre e indicar su funcionamiento mediante una pequeña flecha (<) Ver Gmail

El botón de Back o “Atrás” permite echar retroceder o salir entre las pantallas de las Apps, ocultar menús, volver a la pantalla principal del móvil…

El botón de “Atrás” es uno de los elementos más complejos del móvil, y su funcionamiento no debe ser alterado. En http://developer.android.com/design/patterns/navigation.html podemos ver múltiples ejemplos de los casos más comunes y como debe funcionar.

Mensajes de notificación

Puedes conseguir que el usuario acceda a pantallas profundas de tu App, con mensajes emergentes. Estos suelen llevar diferentes iconos que permiten al usuario acceder a diferentes pantallas. Por ejemplo el mensaje emergente que aparece cuando se recibe un email, puedes ir al listado de emails, al email en si, o a crear uno nuevo.

Estos mensajes casi nunca se usan y se mantienen para aquellos casos que una respuesta del usuario es básica, como cuando avisa de que queda un 12% de batería.

Seguir leyendo «Iniciándonos en el diseño de Apps para Android»

Scroll hacia arriba