Diàlegs

Un diàleg és una manera d’informar l’usuari sobre avisos importants o de permetre que completin una sola acció.

Els diàlegs han de ser inequívocs i concisos en la seva redacció. Només l’acció més comuna, o principal, s’ha de ressaltar amb color. L’acció principal s’ha de col·locar a la part superior en diàlegs verticals o a la part dreta en diàlegs horitzontals.

Les accions principals poden ser positives, negatives o neutrals. Les accions positives afegeixen alguna cosa als seus subjectes. Les accions negatives eliminen, eliminen o fan canvis que no es poden desfer fàcilment. Les accions neutrals no afegeixen o eliminen del subjecte, però encara fan un canvi.

L’acció principal s’ha de ressaltar utilitzant theme.palette.normal.negative si és destructiva, theme.palette.normal.positive si és positiva, o theme.palette.normal.focus si és neutra. La resta d’opcions haurien de ser grises, sense definir una propietat de tema de color.

Els diàlegs han de reprendre les accions, no fer una pregunta sí o cap. Per exemple, l’usuari ha seleccionat una opció per eliminar un contacte. El vostre diàleg hauria de preguntar: «Esteu segur que voleu suprimir aquest contacte?» Les opcions haurien de ser «Elimina», una acció negativa acolorida en vermell, i «Cancel·la», acolorida en gris.

El títol ha de contenir informació útil. Continuant amb l’exemple d’eliminació de contacte, utilitzant el nom del contacte com el títol deixa clar i fàcil veure què s’està suprimint. Una bona regla general és mirar el vostre diàleg amb i sense el títol - aquest últim hauria de faltar clarament algunes dades sobre el que està succeint.

Exemples de dissenys per evitar

Esquerra: el botó Baixa utilitza el color del focus antic, el botó Cancel·la (acció secundària) utilitza el color gris antic.

Dreta: El diàleg utilitza respostes genèriques, ambdós botons acolorits com a accions principals amb un significat de color confús: «No» causarà una acció irreversible, i «Sí» causarà una acció additiva?»