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):
- Si no existen motivos para incluir un botón para acciones secundarias, mejor no ponerlo.
- Utilizar literales en los botones que describan qué va a hacer exactamente. Es la misma recomendación tan útil y tan ignorada para los vínculos: usar un texto que tenga sentido al leerse fuera del contexto. Algo que se podría aplicar perfectamente a muchos sistemas operativos actuales.
- Confieso que el botón Cancelar me suele producir bastante confusión por la poca consistencia en su uso, sobre todo en la web. En ocasiones significa «no realizar una acción», pero en otras su comportamiento es el de regresar a la página anterior. En algunas ocasiones me parece prescindible, en otras me hace dudar de su comportamiento. Intento no utilizarlo como usuario e incluirlo como desarrollador, salvo cuando su uso es necesario e intuitivo.
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…