Mejorar la apariencia de la interfaz de usuario en Android

Centrándonos en los aspectos relacionados con la apariencia visual, sobre todo en los colores y decorados, los consejos para este caso son los siguientes:

1. Utiliza colores y diseños simples

El minimalismo está a la orden del día, y no es sólo un capricho o una moda pasajera. La tendencia a destacar el contenido sobre el continente consigue evitar distraer al usuario con lo que rodea a la información y conseguir que se centre en lo que realmente importa. Esto es más significativo si cabe en aplicaciones móviles, donde cualquier adorno innecesario nos hará malgastar el ya de por sí reducido espacio de pantalla.

2. Emplea gamas cromáticas complementarias, y con poca cantidad de colores diferentes

Los colores empleados en el tema de un diseño deben ajustarse a una gama de colores que permitan ser combinados entre sí. Es una tarea complicada de llevar a cabo a ojo, pero hoy en día existen muchas herramientas útiles para esta tarea, como puede Color Scheme Designer. No te excedas con la cantidad de colores a usar, dos ó tres serán más que suficientes para la mayoría de los contextos. Escoge tus colores y cíñete a ellos en todas las pantallas de tu aplicación.

3. Evita los efectos de relieve

A diferencia de los degradados o los sombreados, que usados con cuidado pueden darle un toque profesional a nuestra aplicación, los efectos de relieve deberían ser eliminados de la interfaz. Destruyen la sensación de limpieza que conceden las estructuras planas y le otorgan un aspecto tosco al conjunto. Recuerda: lo importante es el contenido, no incluyas elementos innecesarios que puedan distraer la atención.

4. Crea un alto contraste entre la letra y el fondo

Este detalle es siempre importante en cualquier aplicación para facilitar la legibilidad y evitar que la vista se canse, pero más aún en una aplicación para un dispositivo móvil, que en ocasiones se emplea en situaciones extremas de luz, como puede ser la exposición directa al sol.

5. Evita los negros puros sobre los blancos

Al igual que es importante el contraste, un exceso del mismo puede resultar perjudicial. Prueba a sustituir los negros por grises oscuros para letras con fondo blanco. A la inversa, por el contrario, funciona bastante bien, aunque no estaría de más que probases con algún tono de gris muy claro sobre los fondos negros.

6. Aporta imagen de marca

A nadie le va a llamar la atención de primeras una aplicación cuya apariencia es igual a la de otros miles de aplicaciones. Al final la funcionalidad es lo más importante, pero al usuario medio se le suele ganar por el impacto inicial, y este se puede conseguir con una mínima personalización del tema básico.

7. No abuses de bordes y recuadros

Siguiendo con el aspecto de la limpieza visual, recomiendo tratar de minimizar al máximo los bordes y los recuadros innecesarios. La interfaz Holo de Android ya ni siquiera enmarca por completo las cajas de texto. Ese el estilo a seguir.

Resto del artículo (fuente original)

Usabilidad en el diseño de Apps

Otra charla del congreso web​.
Para empezar, repasaremos las 10 leyes de la simplicidad:
1) Reducir, La manera más sencilla de alcanzar la simplicidad es mediante la reducción razonada.
Para cualquier producto de consumo, una persona tiene actualmente decenas de opciones. 30 variedades de cereales son, probablemente, más de las que un consumidor necesita. En medio del caos, la simplicidad aparece como una estrategia casi imprescindible: este consumidor no tiene tiempo de estudiar todas las posibilidades, tiene que captar el mensaje y entender el producto de un vistazo.

La simplicidad aplica en muchos ámbitos: el diseño del propio producto, el packaging, la publicidad, etc. Maeda sugiere una estrategia para buscar esta simplicidad: el modelo SHE (Shrink, Hide, Embody):

• Reducir el tamaño
• Esconder: no hace falta que los atributos y funciones del producto estén todos visibles simultáneamente, sino solo cuando el consumidor los necesita.
• Incorporar la calidad en el producto, sin que se vea exteriormente.

En el fondo, se trata de evitar la tentación de contar algo por el simple hecho de poder contarlo, de hacer gala de todos los beneficios y atributos del producto (por ejemplo, unas galletas integrales, con Omega3, con vitaminas, sin azúcar, etc.). El posicionamiento está en la mente del consumidor, y éste no hace listas de pros y contras cuando está delante del lineal del supermercado.


2) Organizar, La organización permite que un sistema complejo parezca más sencillo.
Agrupar la información simplifica la comprensión y el recuerdo. 30 variedades de cereales quizá sean imposibles de memorizar, pero cinco gamas son más asequibles. Si cada gama de productos tiene un posicionamiento claro y una propuesta de valor diferenciada, el consumidor sabrá distinguirlas y recordarlas. Por ejemplo, Danone ha hecho un gran ejercicio de simplificación al crear las plataformas de Vitalínea, Activia o Danonino (aunque luego tenga cierta tendencia a expandir exageradamente cada gama).

En el lineal de un supermercado, el consumidor busca categorías antes que marcas, así que la buena organización es fundamental: dirige la vista del cliente, simplifica su proceso de decisión y le ayuda a encontrar lo que quiere comprar.


3) Tiempo, El ahorro de tiempo simplifica las cosas.
A nadie le gusta esperar; y la frustración de la espera es aún mayor en un momento en que todos tratamos de comprimir en un día decenas de actividades, exprimiendo las horas y correteando de un lado a otro. Para ahorrar tiempo también puede ayudar el modelo SHE: reducir el tiempo (con productos como un GPS que indica la ruta más corta, o un libro de cocina con recetas listas en cinco minutos), esconderlo (entretener a las personas que esperan en una cola con un video), e incorporarlo (indicar el tiempo de lectura en un artículo). El objetivo es doble: reducir el tiempo de espera y hacer esa espera más tolerable.

En el mundo del marketing, la ley del tiempo puede llevar a diseñar productos cuyo beneficio principal es ahorrar tiempo (arroz listo en 3 minutos), a diseñar procesos de compra más rápidos (las listas en los supermercados online), a crear productos autoexplicativos, que se pueden usar desde el primer minuto sin libro de instrucciones (como el iPhone, que literalmente no tiene instrucciones) o a crear campañas promocionales donde el regalo es tiempo (por ejemplo, un servicio de limpieza doméstica).


4) Aprendizaje, El conocimiento simplifica todo.
Todos nos hemos enfrentado a una tarea que nos parecía muy compleja la primera vez y trivial al cabo de un tiempo. Aprender a conducir es un reto, pero luego se hace de forma automática, casi sin pensar.

Para amar un producto hay que conocerlo, hay que pasar la barrera de la primera cita y llegar al noviazgo lo más rápidamente posible. Educar al consumidor es fundamental para que aprecie la marca, especialmente aquellas con propuestas de valor más premium.

En la innovación de las marcas, a menudo basada en constantes lanzamientos, enseñar es también un punto clave: lo peor que le puede pasar a un producto es que el consumidor no sepa para que sirve, o no sepa que hacer con él.


5) Diferencias, La simplicidad y la complejidad se necesitan entre sí.
La simplicidad solo se percibe como contraste de la complejidad. Por eso es cada vez más relevante, porque la complejidad aumenta en todas las áreas de la vida. Lo ideal es encontrar un ritmo que alterne las dos situaciones extrayendo lo mejor de cada una.

Un anuncio sin sonido destaca en un mar de anuncios gritones; una página en blanco de un periódico sobresale entre tanta letra negra; un aparato con un sólo botón sorprende frente a otro con 10 botones; un producto con un sólo beneficio se entiende mejor que uno que pretende ser bueno en todo. Como algunas artes marciales, donde la estrategia consiste en apoyarse en la fuerza del contrincante, la simplicidad se apoya en complejidad de los demás.


6) Contexto, Lo que se encuentra en el límite de la simplicidad también es relevante.
No se puede simplificar algo solamente centrándose en sus aspectos definitorios; el contexto en el que se sitúa es clave para percibir su simplicidad. Demasiado enfoque es negativo, se ven sólo los árboles y no el bosque.

Al diseñar un producto, no sólo hay que hacerlo sencillo, potente y elegante, sino pensar en como se verá en los dos momentos de la verdad: en el lineal, entre otros muchos productos, y en casa del consumidor.


7) Emoción, Es preferible que haya más emociones a que haya menos.
Llenar de emoción un producto puede requerir alejarse de la simplicidad, para introducir nuevos niveles de significado. Hay personas que eligen productos sencillos y minimalistas, como algunos móviles o un iPod, y lo primero que hacen es personalizarlos, con pegatinas, fundas y todo tipo de accesorios. Dotar de sentimiento y emoción a un objeto es una característica muy humana.

Aunque parezca contradecir la ley de reducir, hay algunas cosas donde más es mejor que menos: más cariño, más amor, más intensidad, más significado.

En los últimos años, muchas campañas de marketing se han centrado casi exclusivamente en comunicar emociones, olvidando los aspectos racionales y contando historias extrañas y complejas. El reto es mantener el nivel emocional, aunándolo con un enfoque más simple y directo.


8) Confianza, Confiamos en la simplicidad.
Los aparatos y los servicios que utilizamos son cada vez más complejos, pero para nosotros es irrelevante: confiamos en que harán bien su misión, y los usamos sin tener ni idea de como funcionan. El paradigma es un coche, que casi todo el mundo sabe utilizar pero casi nadie sabe como funciona por dentro.

La simplicidad transmite confianza, y la confianza nos ahorra tiempo y esfuerzo. Las marcas son el paradigma de la confianza, y ese es su mayor valor. No deben confundirse en batallas de precios o perderse en innovaciones innecesarias.

Para las marcas de servicios, la confianza es especialmente relevante, ya que al no existir un objeto físico es lo único que garantiza la calidad al cliente. En gran consumo, las marcas que consigan aprender de un cliente y simplificar sus decisiones tendrán mucho ganado.


9) Fracaso, En algunos casos nunca es posible alcanzar la simplicidad.
A pesar de la enorme importancia que le otorgo a la simplicidad, en algunos casos la complejidad es necesaria. Hay temas demasiado difíciles, llenos de matices y detalles que no pueden ser explicados de un plumazo. Sin embargo, las personas rechazan cada vez más un enfoque complejo (leer un párrafo de más de 6 líneas, memorizar algo que no puedo aprender de un vistazo, etc.). El resultado es que la simplicidad se convierte en simplismo, se cae en lugares comunes y cualquier cosa se acaba pareciendo a muchas otras.

Cuando una marca tiene un producto suficientemente bueno y diferente, no debe tener miedo de explicar su complejidad, si es necesario para apreciar su valor. Hay que darle un voto de confianza a los consumidores, y tratarlos/tratarnos como seres inteligentes.


10) La Única, La simplicidad consiste en sustraer lo que es obvio y añadir lo específico.
Las diez leyes, resumidas en una. Cualquier campaña de marketing puede aprender de esta ley: eliminar textos absurdos y repetitivos, tópicos mencionados por todas las marcas, guiños que nadie entiende, etc; y añadir mensajes relevantes, que aporten valor al que los escucha, que diferencien de la competencia, que den una buena razón para levantarte de tu silla, ir a la tienda y comprar el producto.


Ejemplo: Una app para bajar en una tienda y que muestra las ofertas actuales que tiene, o algo relativo a comprar, no puede ocupar 50Mb, nadie la bajará usando 3G.
Para probar apps móviles en distintos dispositivos y tamaño de pantallas, tenemos:

• Flurry
• Touch Target Size (y la calculadora)

Artículos originales:

• Las 10 leyes de la simplicidad
• Las Leyes de la Simplicidad

Diseño para programadores

​Esto es una entrada que tiene que ver con la charla de "Diseño para programadores". No se trata más que de saber qué y cómo meter algo de diseño a nosotros los back end capaces de hacer sistemas de la leche pero sin diseño alguno.

Para empezar, se recomienda la herramienta Balsamiq mockups, con la que puedes hacer un diseño, imprimirlo, y poder discutir sobre él sobre papel. Tiene un efecto de mano alzada únicamente para dejar claro, en caso de estar con el cliente, que es un mockup.

Así, lo que tendremos que mirar desde un principio es tanto el color como el espacio:

• Contraste, por ejemplo, esta web
• Balance, por ejemplo, esta web
• Armonía, por ejemplo, esta web
• Ritmo, movimiento
• Proporciones
• Geometrización, por ejemplo, esta web
• Espacio, por ejemplo, esta web
• Disposición de los controles, nº áureo o Fibonacci
• Colores --> Colores luz
• Color o gama vs. tono

Usemos la rueda cromática para ver qué colores combinan --> para elegir


más de un color, no tenemos más que trazar un triángulo equilátero, poner la punta del mismo sobre el color que queremos combinar, y nos dará dos colores.

Tip: Usar 3 colores --> 2 principales y 1 para darle algo de vida

• Usemos la paleta, como se muetra en esta web
• Tipografía, las familias se clasifican en:
• Serif
• Sans Serif

Con respecto a la tipografía, podemos usar:

• Web Safe
• Google fonts, esta además, mola mucho porque está libre de derechos, y tiene previsualizaciones estupendas.

Tip: Usar 2 tipografías, una con Serif y otra sin Serif

• Consistencia, como por ejemplo, esta web

Podemos usar frameworks como Blueprint o 52framework

CSS Arrows Please

CSS Arrows Please es a las flechitas CSS lo que Spin.js a los spinners, :) Se trata de una web donde puedes crear flechitas CSS para poder incorporar fácilmente a tus hojas de estilos, perfectas para tooltips o mensajes emergentes.

Resto del artículo (fuente original)

Spin.js

Spin.js es una librería para crear animaciones de “cargando”, conocidos como spinners, sin requerir de imágenes ni estilos CSS adicionales.

Funciona perfectamente en todos los navegadores y es un script escrito en Javascript que puede añadirse fácilmente en cualquier sitio web, sin dependencias con jQuery o similares.



Resto del artículo (fuente original)

Recursos libres de UI para iOS

Who likes goodies?

Resto del artículo (fuente original)

iOS design resources

Somebody on Twitter suggested that I make a list of all the resources mentioned in the presentation I posted yesterday. Great idea! Here goes.

Resto del artículo (fuente original)

Diseño de Interfaces móviles

¿Qué es lo que un diseñador debe de saber?

“El diseño no sólo es que esté bonito, el diseño es saber sintetizar”.

​

Estudios demuestran que el 60% del éxito dentro del mundo del desarrollo se debe al diseño. A todos los presentes recomendó tomar en cuenta los siguientes puntos:

Preguntas clave al desarrollar aplicaciones móviles.

• ¿Qué problema resuelve la aplicación?
• ¿Qué otros productos realizan tarea similar?
• ¿Pude interactuar con los usuarios como otras aplicaciones de éxitos?
• ¿La forma en que funciona la hace única?
• ¿Qué valor aporta a la audiencia?

Normas básicas en aplicaciones móviles.

• Al utilizar una aplicación se tendrá que una tarea específica en mente.
• Pueden estar en movimiento mientras se accede a la aplicación. Cualquier aplicación en diseño debe ser fácil de usar.
• El área de interacción debe ser fácil de aprovechar.
• Los diseños deben ser gráficamente ligeros, sobre todos por lo lentos de las conexiones a Internet.
• El tamaño de los móviles hace que las soluciones gráficas deban ser optimizadas para diferentes resoluciones, sin que el usuario tenga que hacer ZOOM o SCROLL.

Planeación de la interfaz.

• El diseño puede ser a partir de un producto del cliente.
• Crear desde cero la aplicación.

“Hay que siempre tomar en cuenta al usuario final”.
Estudio de la interfaz.

• Interfaz de usuario.
• Familiarizarse con el móvil. Usarlo y entender cómo es que funciona.
• Conceptualizar. Desarrollar conceptos de código y guías.
• Producir. Diseñar con las directrices.
• Finalizar. Finalizar, sintetizar y hacer que funcione.
• Concepto de la interfaz. Estudiar las características físicas de la plataforma a diseñar.
• Producción de la interfaz. Se comienza con la idea general y se va trabajando con referencias visuales. “Se inicializa como 1.0”
• Trabajar con estándares de móviles. Cada plataforma tiene sus propias guías, en todo momento se deben tomar en cuenta.

Mejores prácticas de diseño para móviles.

Ejemplos:

• Opciones simples y espacio en blanco.
• Utilizar imágenes y videos dependiendo las posibilidades del usuario.
• Prioridad en contenido.
• Variedad de tamaños en las diferentes plataformas.
• Estar al día con los cambios a cada momento del medio.
• Diseñar.

Resto del artículo (fuente original)

Useful Collection of iOS Tools and Resources for Designers

Apple App Store has just reached 25 billions downloads few days ago and it's still counting to hit even higher downloads. No doubt about it, iOS development has been a hot topic, a phenomenal industry that makes billion of dollars. A successful app requires a good planning.Wire-framing is one of the important processes in planning stage to understand the flow of your app and also to identify possible issue with the usability and potential technical issue. Sketching and prototyping able to let you understand your app better. If it's not your own project, it will be far easier to explain it to your clients as well.



Resto del artículo (fuente original)

Useful Collection of iOS Tools and Resources for Designers

Apple App Store has just reached 25 billions downloads few days ago and it's still counting to hit even higher downloads. No doubt about it, iOS development has been a hot topic, a phenomenal industry that makes billion of dollars. A successful app requires a good planning. Wire-framing is one of the important processes in planning stage to understand the flow of your app and also to identify possible issue with the usability and potential technical issue. Sketching and prototyping able to let you understand your app better. If it's not your own project, it will be far easier to explain it to your clients as well.

Resto del artículo (fuente original)