Windows 8 UX – “Primeras impresiones”

Una de las mejores cosas que se enfatizan en las guías de estilo de Microsoft para diseñar aplicaciones Windows 8 es la importancia que se debe considerar con la “primera impresión” de nuestra solución.

Sugieren varias formas de conseguirlo teniendo en cuenta el concepto y arquitectura de las aplicaciones dentro de su nueva metáfora visual (conocida también como Modern UI).


Tiles y Notificaciones

Los tiles son la cara de tu aplicación y hace resaltar tu identidad de marca. Las notificaciones relevantes siempre devolverán al usuario a tu aplicación.

Si tenemos en cuenta que “tu tile” debe ser distinguible entre una buena lista de tiles es importante mantenerlo lo más simple y nítido posible. No sabemos si con el rumor de “abandonar” la actual pantalla de inicio de Windows 8, los tiles van a perder fuerza. En cualquier caso, espero que nunca se retracten de los Live Tiles, seguramente su propuesta más original.

Pantalla de bienvenida (Splash Screen)

Expresa la personalidad y debe cargar tan rápido como sea posible.

Existe cierta confusión entre la resolución que las guías recomienden y el resultado final del logo. La imagen usada en la splash debe tener una resolución 620×300 píxels, lo que no quiere decir que el logo deba ajustarse 100% a esa resolución. En cualquier caso existe total libertad para aprovechar cada pixel como se quiera.

Primer uso (first launch)

Darle al usuario contenidos de ejemplos para que sepa cómo usar la aplicación.

Teniendo en cuenta que cualquier barra de herramientas podría estar oculta por defecto y que los contenidos mandan, los ejemplos de contenidos son un buen punto de enganche.

Sin embargo no estoy muy convencida de que esto pueda aplicarse a aplicaciones en las que el usuario debe generar contenidos o, por ejemplo, en juegos. En este caso, seguiría el patrón de gratificación instantánea y para ello tendríamos que conseguir que el usuario hiciera o interactuara con la aplicación fácil y rápidamente y ser compensado por ello, y no relegarlo simplemente a que viera o fuese espectador.

Página de inicio (Home page)

Usa el contenido justo para mostrar para qué está hecha tu aplicación.

Si tu aplicación está totalmente orientada a contenidos éste debe ser el punto donde ofrecer esa muestra que pertenecería al primer nivel de jerarquía de la arquitectura de la información. Por supuesto, no os olvidéis de que existe el Semantic Zoom y si los contenidos no hablan suficiente de vuestra estructura el usuario siempre podrá hacer “pinch” (zoom out) y verlo todo un poco más claro (a partir de su etiquetado).

La combinación de todos estos elementos refuerzan, como decíamos, el empeño en generar una buena impresión y dejar claro por qué tu aplicación es la mejor para el propósito que se diseña. Aunque están fuertemente ligados al modo de funcionamiento de una app para Windows 8 son extrapolables a cualquier otro estándar, no hay más que ver cómo han evolucionado los patrones en otras plataformas en los que los contenidos recuperan su reinado.

Using Google Keep for need finding

Many (mean) words have been said since the launch of Google Keep, but rather to analyse the next Google failure I’d like to consider this as an opportunity and share with you how do I professionally use Google Keep.

As you already know, need finding is an approach used by designers of different fields to research and understand better people’s needs. There are two basic kinds of need findings: observations and interviews.

Observing people, your potential users, and their behavior require spending time patiently watching, and waiting for something interesting to happen.  However there are multiple occasions that nothing happens or we are simply not in the right place on the right moment.

For those situations is when Google Keep can be helpful. Either if you suddenly start watching an unusual scene, or there’s something that catch your attention, Google Keep could be used to

  • Capture the scene by adding a picture
  • Repeating people’s comments by transcribing  them
  • Grouping and relating notes by using different colours

You don’t need to plan it neither to know what you’re looking for. For me it’s not something I’d like to mix with any other note-taking tool just because I don’t expect to classify it or organize it. I don’t even think they have any value in the future but it’s my reminder that something surprised me, and a problem – again, an opportunity – may emerge for those notes.

It has passed just few days since I’m using it in this way, every time I see something related with the topic I’m researching I just capture the moment expecting to find the needs.

Google Keep keeps it simple, and its lacks of functionality is not a lack of utility, actually it is a motivation to try to behave as a real user experience observer/designer.

Of course, if you’re using it for a different professional purpose, I’d love to know it 🙂

Sketches or Wireframes 

Balsamiq 2.2 has been released with a stylish look & feel, some bug fixing and a new feature to choice how your mock-up will look-like either as an sketch or as a wireframe. But, is it the skin the only thing that matters?

There are some differences between these three terms commonly wrongly used between designers, although it’s also true that there are some overlap which may be the reason of such confusion.


In the context of design, sketching is rapid, freehand drawing that we do with no intention of its becoming a finished product.

… sketching is a tool that supports the process of making, not the actual design itself.

via @uxmatters


A wireframe’s purpose is to communicate and explore the concepts that come out of sketching

via @uxmatters

So what’s the difference? Probably there’s no difference except the fidelity degree or the formalism of the idea. Anyhow, I think it’s a good practice really making a distinction and below I’ve listed some thoughts about it:

  1. While wireframes is a tool to think, communicate and explore, sketches are a tool to expose hypothesis, to let ideas born quickly and easily.
  2. As Balsamiq suggests, sketches look more hand-made suggesting also that the level of details is less than when using wireframes – I know you’re a great drawer but I mean with details not a fashion of art but a specification.
  3. Sketches suggests ideas to oneself, wireframes propose ideas to others.
  4. Sketches doesn’t need to specify concepts, interactions or navigation very strictly, but wireframes requires a good presentation of the visual language – ui elements, alignment, content design, navigation, and workflows.
  5. Sketches are forced to die after the exploration, wireframes could be our first deliverable in the design process.

What about prototypes?

Prototypes doesn’t need to be the evolution of a wireframe but a proof of concept of one of the many proposals designed it as wireframes. The goal is to test and validate an idea, and as sketches and wireframes, it will require to be polish up.


This is only a brief about the differences about sketches, wireframes and prototypes, if you are interested in this topic I suggest you to read the article  “Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience” as an starting point.

Other recommended links:

Getting Simple with a CMS

GetSimple really is the simplest content management system (CMS) ever. After seeing so many people amazed by Kirby – a licensed file-based CMS – I started looking for something at least comparable but open-source, and here is GetSimple.

I’ve been atracted by its two first principles and its admin front-end:

  1. XML Based
    We don’t use mySQL to store our information, but instead depend the simplicity of XML. By utilizing XML, we are able stay away from introducing an extra layer of slowness and complexity associated with connecting to a mySQL database. Because GetSimple was built specifically for the small-site market, we feel this is the absolutely best option for data storage.
  2. You can “Undo” Almost Everything
    This feature was based off an eye-opening AListApart article explaining how warning messages never work as planned. Because of this, we’ve included “undo” into almost every action you can take on the site, giving you peace-of-mind for when you make those inevitable stupid mistakes.

Now, I’ll play with it for a small personal project I have in mind, and I’ll tell you more comming soon.

Have you already try it?

Is Microsoft Common User Interface ended?

Is Microsoft Common User Interface ended?

Designing and developing HTML5+CSS3 webistes and mobile apps

In my previous post “CSS3 Tools” we saw I few well-known websites which provides frameworks and tools to start with CSS3.

Here, I’d like to complete and extend that list with more useful frameworks, libraries and other assets to play with the new version of the html markup.





Documentation and Books

I’ll update with more resources soon, just keep tuned.