Buenas prácticas UX para desarrolladores (Android)

Una de las secciones que más me gusta de las guías de estilo para desarrollar aplicaciones Android es la titulada “Best Practices for User Experience & UI”. En este apartado se recogen recomendaciones y buenas prácticas para que al construir tu app te asegures que está bien hecha y satisface a los usuarios a los que la diriges.

La razón por la que me gusta es porque está incluida bajo la sección de Develop > Training lo cual indica que si bien un desarrollador no tiene por qué ser experto en Experiencia de Usuario, considerar al usuario como parte del desarrollo le facilitará alcanzar un grado de calidad mayor en sus desarrollos.

Los puntos que recoge esta sección son los siguientes

  • Diseñar una navegación eficaz
  • Implementar una navegación eficaz
  • Notificar al usuario
  • Añadir una funcionalidad de búsqueda
  • Diseñar para múltiples pantallas
  • Diseñar para la televisión
  • Crear vistas personalizadas
  • Crear interfaces de usuario con compatibilidad hacia atrás
  • Implementar accesibilidad

Aunque se podrían añadir y matizar, estas subsecciones destacan la necesidad de que el código y la funcionalidad involucrada en una app deben existir también para dar soporte a una buena usabilidad y experiencia de usuario. Este no es el debate de si “las experiencias se diseñan” o no, pero de ser así, estaríamos diciendo que, desde luego, también se programarían, puesto que la calidad del producto final determina la relación a largo plazo entre éste y el usuario y por tanto las potenciales experiencias que pudieran obtener mediante su uso.

Porque, al final, de esta ensalada todos/as deberíamos picar.

Otro post relacionado:

Técnica de Card Sorting con UXSORT 

Otra semana más publicamos un nuevo vídeo para nuestro canal de UX en Training Bubbles, esta vez hablaremos de Card Sorting y de una de las pocas herramientas existentes para escritorio: UXSORT.

UXSORT es una herramienta gratuita disponible para Windows que nos facilitará la ejecución de la técnica Card Sorting, imprescindible para definir buenas arquitecturas de la información centradas en las necesidades de nuestros usuarios objetivos.

Sin ser éste un software demasiado cargado de funcionalidad, UXSORT termina resultando muy útil para analizar la relación jerárquica entre diferentes items de acuerdo con el modelo mental de los usuarios participantes de la prueba. Además, permite la visualización de resultados mediante un dendograma con el que podremos jugar para extraer más información de los resultados.

No dudéis en dejarnos vuestros comentarios sobre este u otros vídeos.

Dispositivos móviles ¿Quién necesita un formulario?

Uno de los múltiples motivos por los que la experiencia móvil se ha ido popularizando con los años es por las enormes posibilidades que permite la portabilidad de ciertas capacidades: hay quién dice que la mejor cámara de fotos es la que uno lleva encima.

Si bien es cierto que cuando se trata la necesidad de incluir formularios en un dispositivo móvil en seguida nos vienen a la mente mil y una razones para no hacerlo: se requiere mucho tiempo y puede resultar muy frustrante para los usuarios el uso de teclados reducidos para escritura. Pero ¿quién necesita un formulario?

Si los dispositivos móviles conectados a internet dan acceso a multitud de servicios en cualquier momento  ¿por qué no aprovechar sus capacidades únicas para saltarse las barreras que imponen los formularios estáticos accedidos desde el escritorio?

Los gestos pueden ser un buen mecanismo de entrada de datos así como el reconocimiento de voz cada vez más mejorado en los dispositivos Google Nexus y Siri para iOS. Cada vez nos encontramos más el uso de reconocimiento de la localización del dispositivo o el de la cámara para reconocer objetos (p.e. Google Goggles) los cuales proporcionan a los usuarios un acceso directo a la información. Es en ese momento cuando el dispositivo móvil se convierte realmente en una herramienta que te proporciona información en lugar de en un sistema que demanda y pregunta al usuario.

Cuando estemos diseñando para móviles una buena estrategia es plantear alternativas a los formularios a través del uso de las capacidades para capturar la información de una forma más simple. Aquí os dejo una lista que el autor Luke Wroblewski compartió en el evento UI16 (2011).

Capacidades

  • Posicionamiento y movimiento (acelerómetros)
  • Giroscopio
  • Detección de localización
  • Sensores multi táctil
  • Orientación: dirección de un compás digital
  • Vídeo e imagen: captura desde la cámara
  • Cámaras duales: delantera y trasera
  • Audio: entrada de micrófono, salida de altavoces
  • Conexión entre dispositivos: Bluetooth
  • Proximidad: acercamiento del dispositivo a objetos físicos
  • Luz ambiental: detección de ambiente claro/oscuro
  • NFC: Near Field Communication a través de lectores RFID

Adobe Fireworks team Q&A

Is Adobe proposing that existing Fireworks customers switch to Photoshop?

Photoshop is a major part of the design process, but we know that Fireworks offers something unique that has made it an essential part of the web designer’s toolkit. While Photoshop is continuing to add features and workflows to support web designers, whether or not it is a good replacement for Fireworks will depend on individual needs and preferences.

What new tools is Adobe proposing to create for web design?

Adobe has embarked on creating a new collection of tools and services aimed at addressing the needs of today’s web designer – we’ve started with focusing on responsive layout, web animation and HTML, CSS and JavaScript code editing and are delivering new Edge tools to address these use cases. We are actively working on next-generation solutions for screen design and prototyping that we hope our existing Fireworks customers will love.

Read more, last update May 7, 2013.

Recursos compartidos con Balsamiq Mockups for Desktop

Como sabéis y comentamos hace unas semanas en este vídeo de introducción, Balsamiq permite la configuración de un directorio compartido para los recursos (assets) de todos tus proyectos  a través del directorio  denominado “Account assets”.

Generalmente, cada proyecto mantiene una estructura de dos niveles como se muestra en la captura.

image

Sin necesidad de configuración, los símbolos guardados bajo el directorio “assets” son accesibles bajo la categoría “Project assets”. De forma adicional a este directorio, Balsamiq permite configurar otro directorio para ser compartido no sólo entre tus proyectos, sino incluso entre varios usuarios si éste se encuentra en un directorio en red.

Para ponerlo en funcionamiento tendremos que seguir los siguientes pasos:

  1. Crear un directorio llamado “Balsamiq Mockups” en la ubicación deseada, p.e. “C:Documents And SettingsAdministratorDesktopBalsamiq Mockups”
  2. Crear un subdirectorio bajo “Balsamiq Mockups” llamado “assets”
  3. Crear un archivo con un editor de texto con el nombre BalsamiqMockups.cfg (asegúrate que es texto plano) y guardarlo en el directorio local de datos.
  4. Editar el archivo y añadir el siguiente contenido

<config><documentsPath> C:Documents And SettingsAdministratorDesktop </documentsPath><config>

Existen otras opciones de configuración que pueden añadirse a este archivo, como, por ejemplo, elegir el código de color exacto para los elementos resaltados o activos, la tipografía o el uso de cookies.

Con el uso de recursos compartidos por fin podremos reutilizar elementos generados entre varios miembros de un equipo incluso si éste está deslocalizado. Otro uso interesante es la creación de una librería propia de patrones, muy útil para mantener un mismo vocabulario visual entre varios proyectos.

Prototipar aplicaciones Windows 8 con PowerPoint

PowerMockup ofrece un kit gratuito (y otro más completo de pago) para realizar mockups de aplicaciones Windows 8 en PowerPoint en cuestión de minutos. También incluye assets para diseñar otro tipo de aplicaciones como sitios webs o apps móviles.

image

Y es que PowerPoint es de hecho una de las herramientas más populares para hacer wireframes y prototipos low-fi. Permite diseñar interacciones, animaciones, crear tu propio stencil, etc.

Lo extraño es que no sea Microsoft quién promocione este tipo de utilidades sino otra firma, Wulfsoft de Andreas Wulf, en cualquier caso es más que bienvenido y ofrece una oportunidad ideal para diseñar con una herramienta a la que muchos estamos familiarizados.

Windows 8 UX – “first impressions”

Read the original article in spanish at UXSALAD Blog

One of the best things that Microsoft style guide emphasises to design Windows 8 applications is the importance to make a good “first impression” of our solution.

They suggest several ways to accomplish considering the concept and application architecture within its new visual metaphor (also known as Modern UI).

image

Tiles and Notifications

The tiles are the face of your application and highlights your brand identity. The relevant notifications will always return the user to your application.

If we consider that “a tile” must be distinguishable from a good list of tiles is important to keep it as simple and clear as possible. We do not know if the rumor of abandoning the current home screen of Windows 8  the tiles will lose strength. In any case, I hope never to retreat from the Live Tiles  surely his most original proposal.

Splash Screen

It expresses personality and should load as fast as possible.

There is some confusion between the resolution that recommended guidelines and the final result of the logo. The image used in the splash must have a resolution of 620×300 pixels, which is not to say that the logo must conform 100% to that resolution. In any case there is freedom to take advantage of every pixel as you like.

First launch

Give the user the contents of examples so that you know how to use the application.

Given that any toolbar could be hidden by default and send the contents, examples of contents are a good place to hitch.

But I’m not convinced that this can be applied to applications in which the user must generate content or, for example, in games. In this case, follow the pattern of instant gratification and for that we would have to get the user to do or interact with the application easily and quickly and be compensated for it, and not relegate it simply to see or be a spectator.

Home page

Use the content just to show what it’s made for your application.

If your application is fully oriented content this should be the place where offer that shows you belong to the first level of hierarchy of information architecture. Of course, do not forget that there is the Semantic Zoom and if the contents do not speak enough of your structure the user can always do “pinch” (zoom out) and see everything a little clearer (after labeling).

 

The combination of all these elements reinforce, as we said, the effort to generate a good impression and make it clear why your application is the best for the purpose it is designed. Although they are strongly linked to the mode of operation of an app for Windows 8 are extrapolated to any other standard, there is more to see how patterns have evolved on other platforms where the contents retrieved his reign.