22/12/2010 Categoría/s: Diseño de interacción. 0 Comentarios

Botones "Aceptar" y "Cancelar"

You know how long it takes to do simple? About ten times longer than fast and dirty.

Paul Giambarba

En mis labores de diseñador de interacción "de todo a cien" ™ de aplicaciones para móviles se presenta una tarea sencilla. Una avertencia para avisar que al pulsar un botón en el iPhone, se va a llamar por teléfono. El literal del botón es bastante explícito: es un número de teléfono. Pero no todos los sistemas operativos para móviles se comportan igual. En Android, por ejemplo, después de pulsar el botón, aparece una pantalla característica de la interfaz de Android para llamar por teléfono. Y el botón de llamar en color verde es el que realmente llama.

Personalmente me gusta más la opción de Android, prefiero dar un paso más y evitar en lo posible llamadas accidentales. Es una opinión tan mala como cualquier otra.

Teniendo claro más o menos el literal de la advertencia, viene un detalle que me hade dudar bastante: la aparición de los botones para cancelar o realizar la llamada. ¿En qué orden los coloco? es una de las preguntas que surgen. Toca un rato de buscador. Y me encuentro con que detrás de algo que en apariencia era un detalle menor, hay mucho más de lo que parece.

Por ejemplo, en las interfaces de Windows y en Android, el botón "Aceptar" aparece en primer lugar y después el de "Cancelar". ¿Los argumentos? Lectura "occidental" de izquierda a derecha, el botón más importante se encuentra en primer lugar. Es el que generalmente se va a usar.

Sin embargo en las interfaces de Mac e iOS es al revés. Primero aparece la acción secundaria - Cancelar - y luego la importante "Aceptar". Perdón por el inciso, pero no puedo evitar recordar la imagen que aparece en una presentación de Luis Villa con una ventana de Safari en Mac que dice Pulsa OK para Cancelar. Y los botones "Cancelar" y "OK". Pero dejemos la nota humorística y vayamos a la argumentación: primero te presenta las opciones alternativas y luego terminas con la opción más importante. Por otro lado, la izquierda se asocia más a volver y la derecha a avanzar.

Al final la decisión del orden de los botones es clara. Primero el botón "Cancelar" y luego el botón "Aceptar", ya que estamos en iOS. Y a última hora me doy cuenta de un detalle que puede ayudar mejor a los usuarios a tomar la decisión adecuada: en vez de un genérico "Aceptar" pongamos un literal mucho más explícito y concreto con la acción a realizar, es decir: "Llamar".

Dejo de lado el modificar el color por defecto de los colores: en principio el color rojo, para la interfaz de iOS se asocia a una acción "destructiva", y no se corresponde ni con llamar ni con Cancelar.

Un par de consejos (son para mí, a vosotros no os hace falta):

De extra, algunas vínculos relacionados:
* OK and Cancel Buttons What's the Right Order?. Presenta los resultados de una encuesta sobre el orden de dos botones y su separación en una interfaz web.
* OK–Cancel or Cancel–OK? de Jakob Nielsen. Básicamente dice que se use el orden por defecto en la interfaz.
* Primary & Secondary Actions in Web Forms de Luke Wroblewski. Diferentes alternativas para las acciones de "Submit" y "Cancel" argumentado con los resultados de un estudio de eyetracking. Muy buen artículo. Y su libro Web Form Design: Filling in the Blanks, altamente recomendable.
* On love and design de Ale Muñoz. Sí, ya se que no tiene que ver nada con botones "Aceptar" y "Cancelar". Habla sobre diseño. Y formularios. Y si no lo has leído ya, tienes que hacerlo.

Ah, la cita de Paul Giambarba la he recuperado del artículo "10 times longer de Javier Cañada. Y si eres un aficionado de las Polaroids o simplemente al diseño, posiblemente te interese saber que tiene un blog "The Branding of Polaroid en el que cuenta detalles sobre la época en la que trabajaba como diseñador para Polaroids, sin duda la época dorada. Igualito que ahora, que tras abandonar el negocio de la fotografía instantanea hace unos años, y justo cuiando vuelve a ser trending topic (vaya, que está de moda) gracias a The Impossible Project, no se les ocurre otra cosa que vender cámaras de la competencia (Fuji Instax Mini 7), con el nombre de Polaroids 300 y promocionarlas por Lady Gaga y Sting.

Me pregunto cómo he terminado hablando de Lady Gaga cuando quería hablar de botones de formulario...

-

Comentarios

Comentar

Categorías