Botones

Diseo Centrado en el Usuario

Ing. Carlos Caraballo
Botones - Estilos
Botn de comando (Command Button)
Se colocan en posiciones estratgicas de la pantalla de acuerdo a su
propsito. Estos botones siempre estn visible, provocando un
recordatorio de su existencia.
Contienen una etiqueta que describe la accin que deben ejecutar.
Esta etiqueta debe ser lo ms significativa posible. Es importante
utilizar la capitalizacin en el texto y el centrado.
La etiquetas son capitalizadas y se
expresan en forma de verbo.
El texto centralizado.
Consistencia.
Tratar de utilizar textos estandarizados
cuando se trate de acciones conocidas,
Eje: Ok, Cancel. Reset,. Apply, Close,
Help.

Flat button con

imagen aclarativa
Diseo centrado en el usuario ( Ing. Carlos Caraballo )
Botones - Estilos
Botn de barra de herramientas (Toolbar
Button)
Se utilizan para colocar acceso a opciones de uso frecuente y donde
se quiere rapidez y facilidad. Por lo regular tienen una contraparte en
opciones de men.
Estos botones ocupan menos espacios que un Command Button
normal.
Puede incluir texto.

Ribbon

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones - Estilos
Smbolos
Son pequeos botones con una imagen centrada. Son especficos por
plataforma. Por lo regular utilizados para realizar acciones comunes
sobre la ventana.
No incluyen textos.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones - Tamao
Size
El tamao puede ser tan grande como el texto lo amerite. Por lo
menos dos pixeles entre el texto y el borde.
Se debe mantener la consistencia con el tamao y texto para cada
accin de acuerdo a su propsito.
Botones con mucho texto pueden ser ms anchos.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

 Botones Posicionamiento
Location/Layout (Disposicin)
El botn debe ser ubicado en una posicin consistente dentro de la
ventana.
Usuario puede identificar la accin por su posicin sin tener que leer
el texto.

Los botones que cierran o terminan la

ventana son colocados al final del
ventana, centralizados aunque
actualmente es mas frecuente verlos
alineados a la derecha. En el caso de
Web se comprob que los usuarios
prefieren hacer scroll al final de la
pgina para ejecutar la accin.
Diseo centrado en el usuario ( Ing. Carlos Caraballo )
 Botones Posicionamiento
Location/Layout (Disposicin)
El botn debe ser ubicado en una posicin consistente dentro de la
ventana.
Usuario puede identificar la accin por su posicin sin tener que leer
el texto.

Si las acciones y los botones de salida

estn todos a la derecha es bueno crear
una buena separacin de los grupos para
evitar confusin.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Posicionamiento
Location/Layout (Disposicin)
El botn debe ser ubicado en una posicin consistente dentro de la
ventana.
Usuario puede identificar la accin por su posicin sin tener que leer
el texto.

Si el botn ejecuta alguna caracterstica

de la ventana o expande dicha ventana
este debe colocarse de forma
centralizada y alineado hacia el lado
derecho de la ventana.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Posicionamiento
Location/Layout (Disposicin)
El botn debe ser ubicado en una posicin consistente dentro de la
ventana.
Usuario puede identificar la accin por su posicin sin tener que leer
el texto.

Si el botn tiene una relacin de

ejecucin con algn otro control coloque Si la relacin es con un grupo entonces el
el control de forma adyacente al dicho botn debera colocarse a la derecha del
control . grupo o en el fondo.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Indicadores
Indicadores de intencin

Si el botn causa una accin inmediata

no es necesario ningn indicador

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Indicadores
Indicadores de intencin

Si el botn gua hacia otro dialogo
incluir los puntos seguidos luego del
texto.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Indicadores
Indicadores de intencin

Si el botn gua hacia un men se

incluye un signo > luego del texto.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Indicadores
Indicadores de intencin

Si el botn gua hacia una vista
expandida del mismo dialogo incluya
un doble signo >

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Indicadores
Indicadores de intencin

Si el botn tiene una relacin con otro
control incluya una flecha -> hacia
dicho control.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Default
Cuando una ventana se muestra la primera vez
es importante colocar una accin por defecto o
preseleccionada.
El botn seleccionado como defecto debe ser
indicado o resaltado con un borde ms visible.
La accin defecto debe ser la accin ms viable
para el sistema.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Botones Indicadores para el teclado
(mnemonic)
Asigne una posibilidad de ejecucin de la
accin sin la presencia del mouse.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )

Ejercicios

Crearun editor de texto. Este programa debe

tener la posibilidad de configurar la ruta donde
se buscan y guardan los archivos por defecto.

Diseo centrado en el usuario ( Ing. Carlos Caraballo )