Patrones de Diseño de Interfaces

Patrones de Interfaces
de Usuario
Release 1.0
Editor: Armando Arce
June 02, 2015

Contents
1 Introduccin 3
2 Organizacin de Contenido 5
2.1 Producto, Bsqueda y Navegacin . . . . . . . . . . 5
2.2 Flujo de Noticias . . . . . . . . . . . . . . . . . . . 9
2.3 Tablero de Mando . . . . . . . . . . . . . . . . . . 12
2.4 Lienzo ms Paleta . . . . . . . . . . . . . . . . . . 16
2.5 Asistente . . . . . . . . . . . . . . . . . . . . . . . 18
2.6 Editor de Configuracin . . . . . . . . . . . . . . . 20
2.7 Vistas Alternativas . . . . . . . . . . . . . . . . . . 23
2.8 Mltiples reas de trabajo . . . . . . . . . . . . . . 26
2.9 Mltiples niveles de ayuda . . . . . . . . . . . . . . 29
2.10 Gestin de Imgenes . . . . . . . . . . . . . . . . . 32
2.11 Glosario . . . . . . . . . . . . . . . . . . . . . . . 34
2.12 Referencias . . . . . . . . . . . . . . . . . . . . . . 35
3 Mecanismos de navegacin 37
3.1 Puntos de entrada claros . . . . . . . . . . . . . . . 37
3.2 Men de pgina . . . . . . . . . . . . . . . . . . . 41
3.3 Pirmide . . . . . . . . . . . . . . . . . . . . . . . 44
3.4 Panel modal . . . . . . . . . . . . . . . . . . . . . 46
3.5 Estado de vnculo-profundo . . . . . . . . . . . . . 49
i
3.6 Va de escape . . . . . . . . . . . . . . . . . . . . . 50
3.7 Mens gruesos (Fat Menus) . . . . . . . . . . . . . 53
3.8 Mapa del sitio en el pie de pgina . . . . . . . . . . 55
3.9 Herramientas de sesin . . . . . . . . . . . . . . . . 59
3.10 Mapa de secuencia . . . . . . . . . . . . . . . . . . 61
3.11 Migas de pan . . . . . . . . . . . . . . . . . . . . . 64
3.12 Barra de desplazamiento anotada . . . . . . . . . . 67
3.13 Transicin Animada . . . . . . . . . . . . . . . . . 69
3.14 Referencias . . . . . . . . . . . . . . . . . . . . . . 72
4 Disposicin de pgina 75
4.1 Marco visual . . . . . . . . . . . . . . . . . . . . . 75
4.2 Escenario Central . . . . . . . . . . . . . . . . . . . 79
4.3 Rejilla de iguales . . . . . . . . . . . . . . . . . . . 82
4.4 Secciones con ttulos . . . . . . . . . . . . . . . . . 85
4.5 Distribucin lquida . . . . . . . . . . . . . . . . . 87
4.6 Mdulo de tabuladores . . . . . . . . . . . . . . . . 89
4.7 Acorden . . . . . . . . . . . . . . . . . . . . . . . 92
4.8 Paneles plegables: . . . . . . . . . . . . . . . . . . 95
4.9 Paneles Mviles . . . . . . . . . . . . . . . . . . . 97
4.10 Alineamiento derecha/izquierda . . . . . . . . . . . 98
4.11 Balance diagonal . . . . . . . . . . . . . . . . . . . 100
4.12 Descubrimiento sensitivo . . . . . . . . . . . . . . . 104
4.13 Caractersticas . . . . . . . . . . . . . . . . . . . . 106
4.14 Habilitacin sensitiva . . . . . . . . . . . . . . . . . 110
4.15 Referencias . . . . . . . . . . . . . . . . . . . . . . 113
5 Listas y tablas 115

5.1 Selector de dos paneles . . . . . . . . . . . . . . . . 115
5.2 Exploracin en una sola ventana . . . . . . . . . . . 116
5.3 Lista de incrustaciones . . . . . . . . . . . . . . . . 116
5.4 Rejilla de Miniaturas . . . . . . . . . . . . . . . . . 117
5.5 Carrusel . . . . . . . . . . . . . . . . . . . . . . . . 118
5.6 Filas en Rayas . . . . . . . . . . . . . . . . . . . . 120
5.7 Listas en Cascada . . . . . . . . . . . . . . . . . . 122
5.8 rbol en Tabla . . . . . . . . . . . . . . . . . . . . 124
5.9 Fila de Nuevo tem . . . . . . . . . . . . . . . . . . 125
5.10 Bibliografa . . . . . . . . . . . . . . . . . . . . . . 126
ii
6 Acciones y comandos 129
6.1 Grupos de Botones . . . . . . . . . . . . . . . . . . 129
6.2 Herramientas Flotantes . . . . . . . . . . . . . . . . 132
6.3 Panel de Accin . . . . . . . . . . . . . . . . . . . 133
6.4 Botn hecho Prominente . . . . . . . . . . . . . . 136
6.5 Items de Men Inteligentes . . . . . . . . . . . . . 138
6.6 Vista Previa . . . . . . . . . . . . . . . . . . . . . . 139
6.7 Indicador de Progreso . . . . . . . . . . . . . . . . 141
6.8 Cancelabilidad . . . . . . . . . . . . . . . . . . . . 143
6.9 Deshacer multinivel . . . . . . . . . . . . . . . . . 145
6.10 Historia de Comandos . . . . . . . . . . . . . . . . 146
6.11 Macros . . . . . . . . . . . . . . . . . . . . . . . . 149
6.12 Bibliografa . . . . . . . . . . . . . . . . . . . . . . 149
7 Formularios y controles 153

7.1 Forgiving Format (Olvidando el Formato) . . . . . . 153
7.2 Structured Format (Formato Estructurado) . . . . . 155
7.3 Fill-in-the-Blanks (Llenar espacios en blanco) . . . 157
7.4 Input Hints (Ayuda en las entradas) . . . . . . . . . 159
7.5 Input Prompt (Entradas con pre ingresado de ayuda) 161
7.6 Password Strength Meter . . . . . . . . . . . . . . . 162
7.7 Autocompletar . . . . . . . . . . . . . . . . . . . . 164
7.8 Selector Dropdown . . . . . . . . . . . . . . . . . . 167
7.9 Constructor de listas . . . . . . . . . . . . . . . . . 168
7.10 Buenos valores por defecto . . . . . . . . . . . . . . 171
7.11 Mensajes de error en la misma pgina . . . . . . . . 172
7.12 Bibliografa . . . . . . . . . . . . . . . . . . . . . . 176
8 Diseo mvil 177

8.1 Filmstrip (Tira de pelcula) . . . . . . . . . . . . . . 177
8.2 Bottom Navigation (Navegacin a pie de pgina) . . 179
8.3 Infinite List (Lista infinita) . . . . . . . . . . . . . . 182
8.4 Text Clear Button (Botn de limpieza de texto) . . . 188
8.5 Richly Connect Apps (Aplicaciones conectadas) . . 190
8.6 Vertical Stack - Pila vertical . . . . . . . . . . . . . 191
8.7 Touch Tools - Herramientas tctiles . . . . . . . . . 196
8.8 Thumbnail and Text List - Lista de miniaturas y texto 200
8.9 Generous Borders - Bordes generosos . . . . . . . . 203
iii
8.10 Loading Indicators - Indicadores de carga . . . . . . 204
8.11 Streamlined Branding - Racionalizacin de marca . 207
8.12 Referencias bibliogrficas . . . . . . . . . . . . . . 212
9 Editores y constructores 215

9.1 Edicin en el sitio . . . . . . . . . . . . . . . . . . 215
9.2 Seleccin inteligente . . . . . . . . . . . . . . . . . 216
9.3 Seleccin compuesta . . . . . . . . . . . . . . . . . 219
9.4 Modo de una sola vez . . . . . . . . . . . . . . . . 222
9.5 Modo activado temporalmente . . . . . . . . . . . . 223
9.6 Modificacin restringida . . . . . . . . . . . . . . . 227
9.7 Magnetismo . . . . . . . . . . . . . . . . . . . . . 229
9.8 Guas . . . . . . . . . . . . . . . . . . . . . . . . . 230
9.9 Bibliografia . . . . . . . . . . . . . . . . . . . . . . 232
iv
Patrones de Interfaces de Usuario, Release 1.0
Este documento consiste de la recopilacin de distintas tcnicas (pa-

trones) que se aplican en el diseo de interfaces de usuario. El mismo
ha sido realizado por los estudiantes del curso de Diseo de In-
terfaces de Usuario que se imparti en la Escuela de Informtica
de la Universidad Nacional (Heredia, Costa Rica), durante el primer
semestre del 2015.
Cada tcnica presentada cuenta con definiciones, caractersticas, ven-
tajas, desventajas, bosquejos de ejemplo y referencias bibliogrficas.
El esquema base inicial para este trabajo ha sido el libro Designing
Interfaces de Jennifer Tidwell publicado por la editorial OReilly en
2011.
La edicin de las diferentes recopilaciones de los estudiantes estuvo a
cargo del profesor Armando Arce.
Contents 1
2 Contents
CHAPTER 1
Introduccin
3
4 Chapter 1. Introduccin
CHAPTER 2
Organizacin de Contenido
Recopilado por: Eli Moreno Caldern, Sofa Barrantes Ziga y

Geovanny Quirs Perez
La arquitectura de informacin es el arte de organizar un espacio de
informacin. Esto incluye muchas cosas: presentacin, bsqueda,
exploracin, etiquetado, categorizacin, ordenacin, manipulacin, y
ocultacin estratgica de la informacin. Dicha disciplina trata con
la estructura u organizacin del contenido, especialmente en cmo
diferentes pginas o ventanas estn relacionadas entre ellas.
2.1 Producto, Bsqueda y Navegacin
Este patrn es altamente usado en sitios web que se dedican a vender

productos de cualquier tipo, ya sea dispositivos tecnolgicos, libros,
carros, etc. A travs de la bsqueda y navegacin se facilita al usuario
obtener la respuesta del producto deseado, y a la vez se logra sug-
erir otros productos similares o destacados que puedan influir en los
gustos o compra del usuario.
Consiste en colocar tres elementos bsicos en la pgina principal de
la aplicacin o sitio web que son el producto, el cuadro de bsqueda
y una lista de elementos o categora que se pueden explorar.
5
Se recomienda utilizar cuando se ofrecen largas listas de productos

que puedan ser consultadas a travs de ciertas caractersticas y que a
su vez puedan ser detallados, esto con el fin de captar inters de los
usuarios ofrecindoles un producto novedoso.
2.1.1 Caractersticas
Su utilizacin consiste en colocar tres elementos en la pgina prin-

cipal del sitio, el cuadro de bsqueda, el panel de navegacin y el
producto.
El cuadro de bsqueda debe estar en lugar visible, generalmente, es
usado es una esquina superior derecha, en algunos sitios se utiliza un
banner que destaque y que se diferencie con el resto del sitio. Se debe
tratar de eliminar otros campos de texto que tiendan a confundir o
distraer al usuario, excepto del login.
El producto destacado se debe posicionar en el centro y se debe poner
cuidado en que se ofrece, ya que representar el sitio. Este elemento
se puede ofrecer a travs de una imagen o video.
El panel de navegacin debe estar muy cerca de producto, usualmente
se utiliza una lista de temas o clasificaciones que faciliten al usuario
la eleccin, a su vez se presenta una serie de atributos que podran
describir el producto y brindar un resultado ms detallado.
Este conjunto de elementos resulta para el usuario una manera famil-
iar de navegar, ya que aunque no conozcan el sitio tienen una clara
idea de cmo moverse por l.
2.1.2 Ventajas
Este patrn de diseo, a travs de los aos ha obtenido gran aceptacin

por parte de los usuarios, por lo que los sitios que lo implementan
se han vuelto exitosos. Lo particular, es que brinda dos alternati-
vas (bsqueda o navegacin) que facilita al pblico elegir cual usar,
dependiendo la exactitud que tengan del producto deseado, es decir
algunas personas sabrn lo que andan buscando y usarn el cuadro de
6 Chapter 2. Organizacin de Contenido

bsqueda, mientras que otras personas no sabrn exactamente que de-

sean y es ah donde utilizan el panel de navegacin que brinda listas
indefinidas de posibles productos deseados.
Mediante el panel de navegacin es la oportunidad de destacar artcu-
los que posiblemente capten la atencin del usuario y aunque no los
necesite los compre, esto se vuelve mucho ms fcil cuando se utiliza
imgenes y ttulos atractivos para los productos.
2.1.3 Desventajas
Actualmente, los usuarios y generalmente, los compradores en lnea,

estn acostumbrados a ver y utilizar este patrn de manera habitual,
por lo que una pgina web que est orientada hacia este tipo de mer-
cado que no implemente este modelo, resultar tedioso y poco prc-
tico para los usuarios, por lo que corre el riesgo de ser poco utilizada
y no cumplir con los objetivos deseados.
2.1.4 Ejemplos
Un sitio que emplea esta tcnica es ebay.es, la figura 1 hace referencia

a un bosquejo similar a esta pgina web. Se puede observar los tres
elementos esenciales, la barra de bsqueda con su respectivo botn de
lupa (buscar), un men horizontal que muestra diferentes categoras
de productos que ofrece la pgina, esto hace alusin a la navegacin,
as como tambin la parte inferior izquierda que le ofrece al usuario
otros productos alternativos. Y por ltimo se muestra en el centro y al
lado derecho el producto que el usuario eligi, imgenes y caracters-
ticas del mismo.
La figura 2 hace referencia el sitio mercadolibre.com, el cual ofrece
venta de productos a los usuarios, en l se muestra la barra de
bsqueda en la parte superior, en caso de la navegacin ofrece una
lista de categoras y clasificados, as como posibles productos que el
comprador est interesado. Y el producto en la parte inferior izquierda
con diferentes imgenes y caractersticas.
2.1. Producto, Bsqueda y Navegacin 7


2.2 Flujo de Noticias
Este patrn es generalmente, usado en sitios o aplicaciones de redes

sociales, noticias, correos electrnicos, blogs, etc. Esta tcnica mues-
tra elementos en una lista cronolgica inversa, es decir las ltimas
noticias aparecen en la parte superior. La actualizacin se realiza de
manera dinmica y logra combinar distintos elementos como lo son
fuentes y personas en el mismo flujo.
Se utiliza cuando se desea exponer y promover la funcionalidad de
su sistema de guiar a las personas por las acciones de los dems. Sin
embargo no se debe utilizar cuando el sistema no tiene como uno de
sus elementos claves, la actividad de los usuarios.
Se debe enumerar de manera que el orden cronolgico sea inverso,

para que el flujo se actualice de manera automtica en vez de que el
usuario solicite la actualizacin, sin embargo se debe dejar disponible
la opcin de que el usuario pueda actualizar si as lo desea.
Se recomienda que cuando los flujos tienen mucha informacin se di-
vidan en categoras y que lo usuarios decidan cuales mostrar. Tambin
se puede utilizar dos paneles o varios espacios que permitan manejar
las diferentes categoras.
Cada elemento o noticia debe incluir al menos, la siguiente informa-
cin:
Qu: Ttulo, descripcin corta o imagen.
Quien: Autor, persona o fuente.
Cuando: Fecha, hora.
Dnde: lugar, organizacin, sitio web.
Se puede agregar un botn de mas, que muestre detalles adicionales
del elemento.
2.2. Flujo de Noticias 9

Como opcional, se puede agregar un campo de texto en la parte su-

perior para el usuario realice algn comentario o retroalimentacin a
alguno de los elementos presentados en el flujo de noticias.
2.2.2 Ventajas
Muchas empresas suelen usar esta tcnica para mantener a sus clientes
al da con ofertas, descuentos, logos de empresa, entre otros. Medi-
ante el flujo de noticias se le facilita al usuario, mantenerse informado
de acontecimientos recientes, ya que puede seguirle el ritmo a las noti-
cias.
Ya que el flujo de noticias permite la combinacin de diversas fuentes,
los usuarios se interesan por visitarlos y estar informados en tiempo
real de sus diferentes preferencias de temas. Usualmente, las personas
visitan este tipo de sitios cuando desean realizar pequeos descansos
y distraerse de su entorno.
Este patrn logra que el usuario no tenga que incurrir en ningn es-
fuerzo para poder observar las ltimas noticias, ya que estas siempre
se visualizaran en la parte superior, a su vez permite la participacin,
ya que se exponen a los usuarios, posibles acciones que se pueden
tomar en el sitio y en un simple vistazo, estos usuarios pueden ver
lo que otras personas estn haciendo y empezar a experimenta ellos
mismos. En este sentido el flujo de noticias es una alternativa al panel
de navegacin que fomenta el descubrimiento.
2.2.3 Desventajas
Al ser esta tcnica de modo informativo, requiere que el usuario este

en uso constante del sitio o aplicacin que lo emplea, para que logre
el objetivo de estar al da en cuento a la informacin, si por el con-
trario el usuario no le da casi uso, no tendr conocimiento de noticias
anteriores a menos que se desplace lo suficiente por encontrarlas, sin
embargo si este es el caso se recomienda otro tipo de sitios de noticias.

2.2.4 Ejemplos
Las redes sociales se caracterizan por el uso de este patrn por lo que
la figura 3, presenta un bosquejo de un perfil social, donde el usuario
puede visualizar diferentes noticias en orden cronolgico inverso, de
los usuarios o amigos que tenga asociados a su cuenta, por lo que si
se desplaza hacia abajo podr observar noticias mas antiguas.
La figura anterior, nmero 4, hace referencia a otra red social, que
muestra del lado izquierdo informacin con su respectivo ttulo y
fecha de publicacin, eso si mantenido el orden cronolgico inverso,
por lo que el usuario del perfil podr ver lo ltimo que ha sucedido y
al lado derecho se muestra como complemento los contactos, canales
y otra informacin relacionada con la cuenta.
2.2. Flujo de Noticias 11

2.3 Tablero de Mando
Este patrn se caracteriza por mostrar muchas listas de elementos

diferentes, correspondientemente clasificados por lo que permite el
despliegue de datos en una nica pgina con informacin densa y ac-
tualizada regularmente. Muestra a los usuarios informacin prctica
y relevante y deja personalizar el despliegue segn sea necesario.
Se podra decir que una tabla de mando es un conjunto de patrones
anidados, ya que presentan diferentes tcnicas dentro de l. Se suele
reconocer como una pgina de estilo familiar ya que abarca distin-
tas reas de informacin til y que se representan mediante grficos,
imgenes, videos, etc.
El primer paso es determinar la informacin ms importante para el

usuario. Con base a eso se puede crear una jerarqua visual que aco-

mode las diferentes listas, tablas y grficos de informacin en la pan-

talla.
Se debe procurar que el usuario logre ver toda la informacin en un
solo vistazo, es decir sin la necesidad de desplazarse, todo en una
misma ventana en la pantalla. Se permite agrupar informacin rela-
cionada mediante secciones con ttulos y utilizar pestaas nicamente
cuando se est seguro que el usuario requiera abrir esa informacin
en otra ventana de manera simultnea.
Una tcnica til por utilizar es drilldown que se puede utilizar para
ver los detalles adicionales a los datos, es decir que mediante un clic
sobre un link, o grfico se logre observar dicha informacin. Otra
tcnica til es el uso de datatips que sirven para mostrar datos pun-
tuales individuales conforme se mueve el puntero sobre algn grfico
de informacin.
Se debe ser cauteloso a la hora de seleccionar grficos, ya que deben
ser adecuados a la informacin que se desea representar, por lo que se
sugiere los grficos de lneas o de barras. Sin embargo, si lo que se
desea representar es ms importante, es mejor usar tablas o listas.
2.3.2 Ventajas
Se utiliza cuando los sitios o aplicaciones ocupan flujos de entrada de

informacin de datos de un servidor web, noticias, charlas sociales,
informacin de negocios o financiera, entre otros, por lo que facilita
que los usuarios monitoren de manera continua esta informacin.
Es necesario comprender a los usuarios de estos sitios, as como sus
metas, para poder ser capaz de seleccionar la informacin ms impor-
tante para ellos y as lograr sus objetivos y brindar la opcin de que el
usuario pueda personalizar an ms el tablero de mando.
Si esta tcnica es bien implementada, resulta una potente solucin
para la sobrecarga de informacin, ya que logra combinar los datos
de diferentes fuentes y logra dirigir la atencin del usuario hacia la
informacin ms importante para que puedan identificar rpidamente
las tendencias o reas problemticas y poder reaccionar ante ellas. Por
2.3. Tablero de Mando 13

lo que logra hacer la vida ms fcil de los usuarios y ayuda a tomar

buenas decisiones, a la vez que se ahorra mucho tiempo, aumentando
la productividad.
Resulta muy conveniente resaltar palabras claves y nmeros para que
el usuario logre rpidamente concentrarse en la informacin relevante,
ya que al mostrar tanta informacin en conjunto el usuario suele dis-
traerse o no saber en qu enfocarse.
2.3.3 Desventajas
Actualmente, los usuarios y generalmente, los compradores en lnea,

estn acostumbrados a ver y utilizar este patrn de manera habitual,
por lo que una pgina web que est orientada hacia este tipo de mer-
cado que no implemente este modelo, resultar tedioso y poco prc-
tico para los usuarios, por lo que corre el riesgo de ser poco utilizada
y no cumplir con los objetivos deseados.
2.3.4 Ejemplos
El sitio mint.com, versin beta, muestra informacin financiera, pre-

viamente editada y personalizada por el usuario, por lo que le permite
ver en diferentes paneles, alertas, bolsas de valores, subida/cada de
valores, grficas que reflejan balances y bolsas de valores, as como
mapas personalizables. Toda esta informacin hace referencia a la
figura 5, que como la tcnica lo menciona rene muchas lista de ele-
mentos diferentes.
El sitio vox es un portal orientado a que los usuarios compartan y so-
cialicen, sin embargo utiliza la modalidad de tablero de mando porque
presenta diferentes listas de informacin como lo son contactos, flujos
de noticias, videos y diferentes opciones de entretenimiento, la figura
6 presenta un bosquejo de este sitio.

2.3. Tablero de Mando 15

2.4 Lienzo ms Paleta
Este diseo (conocido como canvas plus palette en ingls) se con-

centra en presentar un panel en blanco y al lado botones (Paleta) me-
diante los cuales el usuario al dar clic crea objetos en el panel (Lienzo)
en blanco.
Entre algunos de los rasgos encontrados que hacen que este patrn
sea muy propio de la mayora de los editores grficos, es que implica
la creacin de nuevos objetos en un espacio virtual (Lienzo) donde se
deben ir organizando.
Adems, la paleta siempre debe estar a un lado del lienzo, ya sea en
la parte superior o a la izquierda del mismo, para la facilidad de uso
del usuario.
La paleta puede estar constituida solo por iconos, pero si estos se
hacen poco entendibles, se les coloca una pequea etiqueta. Tambin,
la paleta se puede dividir en sub-grupos, como pestaas o paneles de
expansin tipo pila.
2.4.2 Ventajas
Realmente, la tcnica usada en este patrn trae consigo muchas ven-

tajas empezando porque las paletas todas son muy similares entre s,
lo que hace presentar un alto reconocimiento visual por parte de los
usuarios, haciendo su utilizacin ms eficaz y eficiente.
Con respecto a su distribucin, la mayora de las ocasiones aparece en
una sola ventana, en otras, presentado paneles de azulejos, pero siem-
pre mostrando las herramientas a un lado del gran rea vaca llamada
lienzo. Como un aporte significativo, los creadores incluyen en estas
aplicaciones botones como zoom, o ver elemento creado, lo que hace
al usuario entrar en cercana con los objetos que va creando.

2.4.3 Desventajas
Como todo patrn de diseo, presenta desventajas entre aplicaciones,

la ms significativa es cuando los gestos utilizados varan de una apli-
cacin a otra, ya que pueden ser de arrastrar y soltar, o solo de dar un
simple clic en la paleta, otros trabajan con un clic en la paleta seguido
de un clic en el lienzo, por mencionar algunos, los cuales en pruebas
de usabilidad son muy variados.
2.4.4 Ejemplos
En esta aplicacin, como lo muestra la figura adjunta, se ve la paleta

al lado izquierdo de la pantalla con diversas opciones de colorear,
recortar. . . , a la derecha el gran panel en blanco y en la parte inferior
una paleta de colores, como se ha estipulado anteriormente.
Otro ejemplo de canvas plus palette es Photoshop, que presenta pane-

les despegables a la derecha, a su izquierda un panel de botones y en
2.4. Lienzo ms Paleta 17

el centro el lienzo, todo colocado en la misma ventana.
2.5 Asistente
Este patrn (llamado wizard en ingls) lo que pretende es conducir

al usuario a travs de la interfaz, mostrando paso a paso cada una
de las tareas, donde en cada una se puede escoger o cambiar valores
preestablecidos, en un orden prescrito.
Cuenta con mltiples caractersticas ya que es usado cuando existe

un proceso largo y complicado, pues divide las tareas en sub-tareas
pequeas, agilizando su uso, tal es el caso de subir una imagen a una
red social, ya que primero se sube y luego se recorta.

La interfaz puede ser dinmica, puesto que el usuario puede tomar

decisiones como omitir pasos o tomar ramas distintas; este es ms
usado cuando el usuario no conoce del proceso y necesita orientacin.
Como Wizard se basa en guiar al usuario, se usan valores predetermi-
nados los cuales el consumidor en la mayora de las ocasiones acepta
cediendo el control de la aplicacin a quien la diseo.
Las aplicaciones diseadas dentro de este patrn, deben poseer
botones como cancelar, anterior y siguiente sin olvidar el botn Fi-
nalizar para decirle al usuario que ha finalizado la tarea; al igual que
en cada una de las pantallas debe existir una etiqueta explicando lo
que se pretende, de la misma forma al iniciar la aplicacin debe poseer
una etiqueta que sirva de asistente, para que el usuario entienda lo
que va a hacer y como lo va a hacer.
2.5.2 Ventajas
Al dividir las tareas por partes, hace que el usuario entienda mejor lo
que est ejecutando y a su vez terminar el o los procesos de forma
satisfactoria. Son fciles y rpidos de usar, ya que solo muestran
dos opciones en su mayora que son anterior y siguiente y al finalizar
muestran un mensaje que indica que la tarea ha finalizado favorable-
mente.
2.5.3 Desventajas
Las desventajas encontradas para este patrn y una de las ms co-

munes entre desarrolladores es saber encontrar un equilibrio a la hora
de dividir las tareas, ya que resulta tedioso para el usuario ver mu-
chos pasos, siendo as el caso que por largos y aburridos el usuario
nunca termine las tareas, adems de que limita a los usuarios en las
decisiones que se quieran tomar.
No es recomendable usar este tipo diseo cuando la aplicacin es us-
ada frecuentemente o cuando los usuarios deben tener mucho control
2.5. Asistente 19
del proceso, pues para el diseador de la interfaz va a ser difcil pon-

erse en la posicin del usuario y saber ms que l.
Para no mantener todos los datos en una sola pgina, se pueden uti-
lizar los siguientes patrones:
Secciones de Ttulos: Poner nmeros a los ttulos para que to-
dos los pasos sean visibles a la vez.
Habilitacin de Respuesta: Todos los pasos estn presentes en
la ventana, solo que se van activando conforme el usuario vaya
avanzando.
Divulgacin de Respuesta: Se muestra un paso de la interfaz
pero hasta que el usuario de por finalizado el paso anterior.
2.5.4 Ejemplos
Cuando creamos un Facebook, aparece la ventana adjunta, donde ve-

mos que cada paso informa al usuario lo que hace cada ventana y a
la vez enumera en que paso vamos, al igual de la opcin de omitir el
paso, pues la ventana siguiente no es afectada con las decisiones de la
ventana actual.
Lleva un orden, mediante el cual cada ventana depende de la infor-
macin de la ventana anterior, sealando de igual manera el nmero
de paso, junto con un ttulo que resume correctamente la tarea de la
ventana.
2.6 Editor de Configuracin
Este patrn (setting editor en ingls) se encarga de proporcionar

al usuario una pgina o ventana fcil de usar, para que los usuar-
ios puedan cambiar configuraciones, propiedades o preferencias.
Adems, divide el contenido en pestaas o en pginas por separado.

2.6. Editor de Configuracin 21

Tiende a ser usado cuando se necesita manejar un gran nmero de

configuraciones, ya que los usuarios deben ser capaces de encontrar y
editar propiedades deseadas sin seguir una serie de complicados pa-
sos, adems de que los usuarios tienen la capacidad de encontrar ms
fcilmente las opciones cuando estas han sido ordenadas por cate-
goras y debidamente etiquetadas.
Otra de las opciones que caracteriza este patrn es que nombre de las
opciones debe ser fcil, y la configuracin existente debe mostrarse al
usuario para que l pueda encontrar lo que quiere de una manera fcil
y rpida y a la vez modificar a su antojo la informacin.
2.6.2 Ventajas
Por lo general, las ventanas de configuraciones tienen a ser fciles de

encontrar, por lo que los nombres de las propiedades que las integran
se ubican rpidamente en una adecuada categorizacin, haciendo sen-
tirse al usuario familiarizado con la aplicacin, adems de que puede
editar solamente lo que el desee.
2.6.3 Desventajas
En algunas aplicaciones, cuando un usuario edita una propiedad, estas

lo guardan de forma automtica, lo que hace que el usuario no pueda
decidir si de verdad quera hacer esos cambios.
Por otro parte se encuentra la dificultad por parte del diseador de
como mostrar las ventanas, ya que lo pueden hacer por categoras,
pestaas, paneles, mens, pero no sobrecargando la forma que es-
coge, porque para los usuarios resulta tedioso tener que trabajar sobre
jerarquas mltiples.

2.6.4 Ejemplos
Panel de Control de Windows 8: Windows nos presenta en su ventana

de configuracin la forma en que queremos presentar la informacin,
en este caso por categoras, mostrando cada una de ellas enlaces a
las opciones, las cuales presentan nombres entendibles por cualquier
usuario (experto o aprendiz).
Configuraciones de Cuentas de Facebook: Facebook presenta en el

panel izquierdo las categoras y al dar clic aparecen las opciones cor-
respondientes en el panel de la derecha, con botones para poder editar
esa informacin sin que se guarde automticamente.
2.7 Vistas Alternativas
Las aplicaciones ms avanzadas de este patrn se orientaran hacia

diferentes puntos de vista sobre los mismos datos, tales como difer-
2.7. Vistas Alternativas 23

entes visualizaciones y / o mecanismos de navegacin para ayudar a

los usuarios a analizar y descubrir lo que necesitan. Por lo que la fun-
cionalidad principal de dicho patrn en este apartado como se ver va
enfocado hacia la creacin de vistas alternativas con su respectiva fun-
cionalidad distribuida en las mismas y no en la interfaz que se muestra
por defecto (principal).
Permite trabajar con varios conjuntos de informacin con caracters-

ticas distintas:
A travez del modelo del diseo, se puede incorporar dichas caracters-
ticas en distintas vistas y permitir al usuario elegir una entre tantas de
esas vistas, con eso se logra obtener y trabajar sobre los conjuntos de
caractersticas de manera separada, pero la eleccin de las mismas es
libre para el usuario, dando mayor fluidez y libertad en el espacio de
trabajo para el usuario y comodidad en la escogencia entre las mlti-

ples vistas y acciones a ejecutar en las mismas. Con dichos ajustes se

abordan las necesidades de cada quien. Importante saber que cuando
una interfaz contendr mltiples funciones y dichas funciones sobre-
cargarn a la interfaz principal lo mejor ser crear varios conjuntos de
caractersticas distintas mediante mltiples vistas.
Permite la distribucin de funcionalidades: Las cargas de trabajo que
se podran dar en una interfaz mal diseada que no aplica este patrn,
podrn ser muchas, y por lo tanto la usabilidad y manejo de esta in-
terfaz sera muy poco eficiente, lo ideal es liberar la carga, separando
necesidades en distintas vistas, con ello se evitara la sobrecarga de
datos y funcionalidades de la interfaz principal.
2.7.2 Ventajas
Mayor usabilidad: Los sistemas que incluyan este patrn como

se mencion anteriormente darn mayor usabilidad al sistema,
evitando sobrecarga de datos en slo una interfaz, adems
brindar por medio de distintas vistas las mismas funcionali-
dades pero de manera ms organizada y bien distribuidas.
Mayor eficiencia del sistema: Se obtiene mayor velocidad, ag-
ilidad, estilos visuales que gustarn al usuario.
Ayudan al manteniendo de sistemas: Al dividirse las cargas y
funciones a desarrollar en dado sistema, ser de mayor facilidad
al mantenimiento del mismo, ya que la informacin se encuen-
tra bien distribuida y separada por distintas vistas.
Permite trabajar con grupos de informacin a eleccin del
usuario: El usuario tendrn la posibilidad a travez de las mlti-
ples vistas, la eleccin del grupo de informacin con el cual
trabajar, de modo que si elige uno que en realidad no iba a ser
de su agrado fcilmente puede navegar por medio de las vistas
alternativas y elegir el que crea necesario y trabajar en el mismo
en un mdulo o interfaz distinta(alternativa).
2.7. Vistas Alternativas 25

2.7.3 Desventajas
No detectar las funcionalidades correctamente: No saber detec-

tar cuales son realmente las funcionalidades que necesitan sep-
aracin respecto a la interfaz principal, puede generar un gran
gasto de tiempo en la misma, y sera intil ya que el usuario no
dar uso de dichas vistas.
2.7.4 Ejemplos
2.8 Mltiples reas de trabajo
Permite y da la comodidad al usuario de crear su propio ambiente de

trabajo, dando la opcin de colocar sus espacios de trabajo uno al lado
del otro simultneamente. Pensado y creado para personas que traba-
jan o realizan mltiples tareas al mismo tiempo(a estas personas se

les conoce como multitask) un ejemplo de este tipo de usuario, es

el que est realizando una tarea A de repente se da cuenta que nece-
sita hacer una tarea B, y as sucesivamente, por lo que este patrn le
permite ejecutar estas acciones mediante las mltiples reas de tra-
bajo; entonces una buena interfaz que permita la ejecucin de tareas
mltiples es realmente til para este tipo de personas.
Este tipo de patrn permite agrupar de mejor manera la informacin.

Su uso por lo general es cuando hay ms de 2 secciones que mostrar
o trabajar, tambin cuando los nombres de seccin son realmente cor-
tos, cuando se necesita abordar toda una ventana para trabajar. Se
evita usarlo por ejemplo cuando hay enlaces a otros sitios del sistema
o exteriores para ello se necesitar otro patrn.
Algunas de las recomendaciones para elaborar una correcta interfaz
con mltiples reas de trabajo como por ejemplo: usar animaciones
2.8. Mltiples reas de trabajo 27

entre el cambio de paneles o pestaas, usar iconos que representen

el contenido a mostrar, permitir el uso del teclado como la opcin tab
para navegar entre pestaas, etc.
Existen muchas maneras de implementar esto en una interfaz entre
ellas:
Tabuladores: Funcionan como pestaas una al lado de otra,
cada pestaa contiene una tarea especfica por lo que la nave-
gacin entre ellas es realmente fluida.
Columnas o paneles dentro de una misma ventana.
Ventanas divididas con divisores interactivos.
2.8.2 Ventajas
Facilidad para cambios o pasos entre distintas tareas: Al tener

las reas de trabajo una seguida de la otra, el usuario podr
elegir entre las tareas que se muestran en las pestaas, por lo
que el cambio entre las reas es realmente rpido.
Obtiene toda la ventana para trabajo: Esta parte es una de las
principales del porque la importancia de este patrn, el usuario
podr tener la libertad de usar todo el espacio que le provee
cada pestaa por lo que se obtiene mayor provecho para el
manejo y manipulacin de mayor informacin.
Vista de la informacin de manera ms clara y rpida: Cada
pestaa tiene su ttulo (el mismo tiene que ser claro), con ello el
usuario podr acceder de manera rpida a la informacin de tal
manera que si trabaja en esa pestaa fcilmente puede nave-
gar hacia otra u otras.
Fcil ubicacin: Cuando un usuario trabaja en una pestaa,
como tiene visible las dems dar una mejor ubicacin en
donde se encuentra trabajando y hacia donde puede ir, segn
lo desee.
Navegacin: Permitir al usuario navegar por las pestaas en
un orden lgico con la tecla Tab. Una pestaa centrada se podr

seleccionar con la tecla Enter.
2.8.3 Desventajas
Al permitir crear mltiples reas, si el usuario no mantiene or-

den en las mismas puede generar confusin y/o fcilmente se
puede perder la lnea de trabajo.
2.8.4 Ejemplos
2.9 Mltiples niveles de ayuda
Patrn que brinda soporte o ayuda a travez de tcnicas implementadas

en la interfaz, con el fin de brindar orientacin en los distintos proce-
sos que ejecuta el usuario en el sistema. Bsicamente se puede usar
2.9. Mltiples niveles de ayuda 29

cuando el sistema en s es muy complejo y el usuario necesita una

ayuda extra para desarrollar sus funciones, para ello se contar con
el nivel de ayuda mltiple. Se utiliza cuando se ha diseado una in-
terfaz de usuario muy interactiva, con informacin y funciones muy
complejas, por ejemplo los lectores de correo, software de base de
datos, herramientas de autor, software de grficos y entornos de pro-
gramacin, tambin para motivar al usuario para empezar a hacer uso
del sistema, adems que puede dar una idea general al usuario o tam-
bin muy particular de lo que involucra el sistema.
Se puede implementar usando texto de aviso de ayuda, por ejemplo
cuando hay un campo de entrada de email, se le puede emitir un
cuadro de dialogo al lado en caso de que sea incorrecto; en el men
contextual opciones de ayuda para determinadas funciones, esto po-
dra incluir iconos interactivos como ? indicando que puede encon-
trar ayuda; se pueden incluir ejemplos para determinada tarea, esto
puede hacerse mediante un videos para una determinada tarea; incluir
una introduccin de uso pequea en el inicio de la aplicacin; tam-
bin instrucciones en lnea de ayuda, por ejemplo para el campo de

una contrasea, indicar al lado lo que necesita para una contrasea

segura y/o las reglas o formato que debe tener por ejemplo, etc. Para
usuarios avanzados es recomendable tener la opcin ocultar o hacer
invisible las ayudas.
2.9.1 Ventajas
Ayudar al entendimiento y uso eficiente del software: Al tener

distintos tipos de ayuda dentro de la interfaz de un sistema, el
usuario podr acceder a ella y con eso se le facilitar y mejorar
el uso del sistema, dando un mejor uso del mismo.
Ayuda a usuarios de poco conocimiento al desarrollo de tareas
difciles: En el proceso de entendimiento a un usuario novatos
de un sistema complejo, se le facilita por medio de la ayudas
y/o guas, y con ello el uso de funciones complejas del sistema
de una mejor y rpida ayuda.
Hace menos vulnerable al sistema de errores, brindando ayudas
para evirtarlo: Al tener ayudas de como realizar las acciones en
el sistema, se disminuira los fallos dentro del sistema ya sea
por errores en la manipulacin de informacin por usuario de
manera errnea.
Al proporcionar al usuario una instruccin de asistencia a un
lado de una interaccin, es ms fcil para el usuario para rela-
cionar la instruccin.
2.9.2 Desventajas
Si la manera de mostrar la ayuda no es bien implementada,

tomando consideraciones del usuario, puede resultar irritante
para el mismo.
Las funciones difciles de desarrollar en un sistema con ayu-
das pobres resultara difcil para el usuario desarrollar las ac-
ciones en el mismo.
2.9. Mltiples niveles de ayuda 31

Para usuarios avanzados puede ser muy molesto los mensajes

o avisos de ayuda ya que tienen amplia experiencia en uso y
manejo de estos sistemas y si no se incluye una opcin de in-
visible u oculto puede ser tedioso el lidiar con esos mensajes
de ayuda.
2.9.3 Ejemplos
2.10 Gestin de Imgenes
En este patrn se utiliza una interfaz para la gestin de vistas, vdeos

y otros elementos, principalmente mediante miniaturas, vista de ele-
mentos y una interfaz de navegacin.

Por lo general las personas trabajan con listas o colecciones cuando

se trata de manejo o administracin de elementos visuales o videos,
donde el usuario puede editar sobre ellos mismos o tener la vista.
Mediante este patrn se puede garantizar lo anterior descrito.
2.10.2 Ventajas
Facilidad en la organizacin de la informacin

Facilidad en la navegacin
Fcil acceso para la modificacin, bsqueda o vista de la infor-
macin
2.10. Gestin de Imgenes 33

2.10.3 Desventajas
A veces resulta difcil usarlos.
2.10.4 Ejemplos
2.11 Glosario
Datatips: Muestra datos puntuales, conforme se mueve el pun-

tero sobre alguna representacin.
Drilldown: Implica hacer clic en alguna representacin con el
fin de revelar ms detalles.
Aplicacin: Programa informtico que permite al usuario uti-
lizar una computadora para un fin especfico.

Jerarquas Mltiples: Tener que navegar entre ventanas para

llegar al destino final.
Organizacin de Contenido: Acomodar la vista de la aplicacin
de modo que para el usuario sea fcil de familiarizarse.
Paneles Plegables: Despliega sus opciones en algn sentido, al
dar clic sobre el nombre categrico.
2.12 Referencias
Few, S. (2006). Information Dashboard Design. OReilly Me-

dia, Incorporated.
Kuhn, S. (2009). Activity Stream Scanning Affordances . En
Users are Human (pgs. 10-13).
Lammi, J. (2010). http://patternry.com/. Obtenido de
2.12. Referencias 35
Information Dashboard: http://patternry.com/p=information-

dashboard/
Microsoft (Tienda Windows). (s.f.). Microsoft.com.
Obtenido de Patrones de navegacin (aplicaciones de
la Tienda Windows): https://msdn.microsoft.com/es-
es/library/windows/apps/hh761500.aspx
Montero, S., Zarraonada, T., Daz, P., Aedo, I., Prez Sanz, &
Lorenzo Prez, A. (2011). Diseo web. En Patrones de diseo
aplicados al desarrollo de objetos digitales educativos (ODE)
(pgs. 29-32). Espaa: Ministerio de Educacin.
Quince. (s.f.). Obtenido de AllPatterns:
http://quince.infragistics.com/html/AllPatterns.aspx
Tidwell, J. (2011). Designing Interfaces: Organizing the Con-
tent. Sebastopol, Canada: OReilly Media, Inc.
UI Patterns. (s.f.). Obtenido de Activity Stream: http://ui-
patterns.com/patterns/ActivityStream
Edition, J. T. (2011). Designing Interfaces. Canada: OReilly
Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA
95472. .
J, T. (s.f.). flylib.com. Obtenido de
http://flylib.com/books/en/3.323.1.22/1/
ORGANIZING THE CONTENT. (2009). Obtenido de
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=8&cad=r
H0BxnCA&sig2=1-V5Aj
Toxboe, A. (2007-2015). UI-Patterns.com. Obtenido de
http://ui-patterns.com/patterns/Wizard

CHAPTER 3
Mecanismos de navegacin
Recopilado por: Bryan Valerio Herrera y Jeffry Arias Chaves

Los mecanismos de navegacin se relacionan a los diferentes modelos
de navegacin que pueden ser utilizados. El modelo de navegacin
tiene que ver con cmo las diferentes pantallas se enlazan entre s, y
cmo hacen los usuarios para moverse entre ellas.
Es importante resaltar que todos estos mecanismos pueden ser mostra-
dos en pantalla en diferentes formas: pestaas, mens, rboles, etc.
3.1 Puntos de entrada claros
Cmo hace el usuario para saber dnde comenzar en un sitio com-

plejo o una app? Los puntos de entrada claros (clear entry points en
ingls) le muestran a l donde ir primero. En pocas palabras le ofrece
a las personas un conjunto de puntos de entrada claros en el lugar de
aplicacin o web basado en sus tareas o destinos ms comunes lo que
ayuda al auto aprendizaje.
37
Es usado cuando se tiene una pgina Web o Aplicacin en la que se

tiene frecuentemente muchos usuarios primerizos o que la frecuentan
muy pocas veces. A muchos de los usuarios les va con leer un texto
introductorio, hacer una tarea inicial, o la escoger unas pocas opciones
de uso frecuente.
3.1.2 Ventajas
Sin claros puntos de acceso, los usuarios nuevos o poco frecuentes

pueden sentirse perdido inmediatamente al abrir una aplicacin o
sitio. Al guiar a personas con puntos de acceso claros, se toma la carga
mental fuera de ellos para averiguar lo que pueden o deben hacer; en
pocas palabras, ofrece unas pocas opciones para que el usuario escoja
y comience a trabajar inmediatamente.
3.1.3 Desventajas
Este modelo slo funciona si usted tiene o puede descubrir un con-

junto de las tareas o los destinos ms comunes para un pblico en
especfico. Si no se puede hacer esto, el patrn causara ms proble-
mas que soluciones, ya que se interpone en el camino y realmente no
guiar a la gente a lo que ellos quieren hacer.
3.1.4 Ejemplos
El primer ejemplo se ve una pgina sencilla con solo unas pocas op-
ciones, lo cual le facilita al usuario el entendimiento y la funcionabil-
idad de ella.
El segundo ejemplo muestra una aplicacin de celular donde al pre-
sionar un botn nos muestra cinco opciones, es muy util cuando los
usuarios no estn muy familiarizados con su uso.
38 Chapter 3. Mecanismos de navegacin

3.1. Puntos de entrada claros 39


Este diseo de navegacin se puede observar en las siguientes pgi-

nas: www.adobe.com / y www.google.com
3.2 Men de pgina
El men de pgina (menu page en ingls) ofrece una lista de ac-

cesos con el contenido de las pginas en el sitio o de la aplicacin.
Adems de mostrar informacin suficiente de cada acceso con la cual
el usuario puede escoger bien lo que quiere.
Si se crea una aplicacin mvil, el men de pgina sera una de las
principales herramientas para el sitio o de una aplicacin con mu-
chos niveles de funcionalidad, ya que si se mantiene unas etiquetas
pequeas, hace que los botones sean ms grandes lo que facilita el
presionarlos.
Se emplea en las pginas de inicio o una pgina dedicada a ser slo

una tabla de contenidos. An que se puede perder espacio para con-
tenido destacado (como un artculo, video u oferta), lo que se ocupa
es que el usuario elija un enlace sin distracciones.
En las aplicaciones mviles y sitios necesitan especialmente pginas
de men para hacer el mejor uso de sus pantallas pequeas.
3.2.2 Ventajas
Sin distracciones los usuarios se pueden concentrar en las opciones de

navegacin, se tiene toda la pantalla para organizar, explicar, e ilustrar
los accesos, lo que puede conducir a los usuarios a de una forma ms
apropiada a su pgina de destino.
3.2. Men de pgina 41

3.2.3 Desventajas
No se recomienda usar este diseo si se va a implementar artculos

con promociones u otros contenidos interesantes. Se tiene que tomar
riesgos al usar este patrn de navegacin ya que se debe de tener en
cuenta que los usuarios ya conocen esta pgina, los usuarios saben
que van a buscar y donde encontrarlo, y que no estarn interesados en
noticas, actualizaciones o caractersticas.
3.2.4 Ejemplos
En este ejemplo se ve el men de una pgina web, usando un efecto

de acorden.
Ejemplo de un men de una aplicacin de celular

3.2. Men de pgina 43

3.3 Pirmide
Es un modelo de navegacin en el cual los accesos se juntan y forman

una secuencia de pginas con la herramienta de Anterior/ Siguiente.
En pocas palabras se crea una pgina padre a la cual se le van a se
le envan todos los accesos en secuencia, y estos pueden ser visto en
secuencia o sin orden.
Las pginas o aplicaciones contienen una secuencia de elementos el

cual el usuario puede ver normalmente uno despus del otro, algo as
como una presentacin de diapositivas, un asistente, un captulo de
un libro, o un conjunto de productos. Casi todos los Controladores de
Imgenes usan este modelo de navegacin. Ya que algunas personas
necesitan ver las imgenes de forma individual, y algunas otras veces
ellos prefieren navegar por todo la secuencia. El modelo de pirmide
soporta ambos casos.
3.3.2 Ventajas
Este patrn de diseo disminuye el nmero de clics que se necesitan

para moverse entre la pgina, adems mejora la eficiencia de la nave-
gacin, y crea una relacin secuencial entre las pginas; el uso de
los botones Anterior/Siguiente le favorecen ya que las personas saben
qu hacer en ellos. Al poner un enlace en la pgina principal de cada
secuencia, aumentas las opciones del usuario a la hora de escoger; es
decir ya no sera solo un Anterior/Siguiente sino que adems agreg-
amos un Arriba (up / regresar al men), lo cual le ayudara al usuario
a dar menos clic para ir a donde desea ir.

3.3.3 Desventajas
Al hacer los accesos secuenciales, implica que para volver a la pgina

de donde se empez se ocupa hacer la misma cantidad de clic en el
botn de anterior para poder volver.
3.3.4 Ejemplo
El siguiente ejemplo muestra lo que sera un diseo de pirmide en

una pgina web, donde se puede observar a la izquierda los tags de
temas, el autor de la imagen; mientras que abajo podemos ver los
accesos para ir a la imagen anterior, o la siguiente.
Una pgina web que implementa este modelo es

https://danbooru.donmai.us/ el cul es un visualizar de galeras
de imgenes agrupadas por autores, categoras, genero, etc.
3.3. Pirmide 45
3.4 Panel modal
Debido a que las personas se distraen con mucha facilidad se tiene

que hacer algo para captar su atencin completa. Por eso este modelo
de diseo brinda al usuario una ventana sin opciones de navegacin,
solo mensajes de conocimiento, formularios por completar, o un panel
de cliqueo. Los paneles modales suelen mostrase en una capa encima
de la pantalla completa o pgina, y son usadas para cosas pequeas,
tareas enfocadas las cuales requieren de toda la atencin del usuario.
Solo se puede mostrar una pgina, sin opciones de navegacin, y se

termina cuando el usuario concluye la tarea, no se recomiendan usar
cuando se requiere de la confirmacin de una opcin, en su lugar se
prefiere la opcin de deshacer, un control de reciclaje.
3.4.2 Ventajas
Son muy tiles cuando se requiere informacin relevante; suelen ser

cosas o tareas pequeas; le dan ciertos detalles llamativos a las im-
genes. Adems debemos tomamos en cuenta la lgica que subyace
detrs de todos los paneles de modales, la cual es tratar de captar la
atencin de la gente, conseguir que se centran en lo que est en el
panel, y despus de tomar algn tipo de accin, incluso si la accin es
simplemente cerrando el dilogo.
3.4.3 Desventajas
Se deben de usar los paneles modales con moderacin porque inter-

rumpen el flujo y crean un trabajo extra al servidor; este modelo de
navegacin bloquea todo la pantalla y no continua hasta que el usuario
finalice la tarea encomendada.

3.4.4 Ejemplos
El primer ejemplo nos muestra un ejemplo con el efecto de Con-

firmacin, en el cual se puede ver que requiere de la atencin del
usuario para continuar con la operacin.
El segundo ejemplo muestra un modal con los datos de un formulario,

en el cul se requiere de la atencin del usuario para su conclusin.
Este diseo de navegacin se puede ver en las siguientes pginas
www.picasa.google.com y en http://quince.infragistics.com
3.4. Panel modal 47


3.5 Estado de vnculo-profundo
Este patrn (llamado Deep-linked State en ingls ) sirve para cap-

turar el estado de la pgina o de la aplicacin en una URL (Direccin
Web), la cual puede guardarse y enviarse a otra persona, y esta cuando
la abre, este restaura el estado de la aplicacin que el usuario estaba
viendo.
Se emplea en sitios o aplicaciones que tiene grandes contenidos o que

sean interactivos como mapas, libros, videos o informacin grfica.
Donde para llegar a un punto deseado se tiene que pasar por muchos
estados, parmetros configurables, como la visualizacin, escalas, etc.
lo que puede darle ms complejidad de llegar a ese punto en particular
y poder verlo de manera correcta.
3.5.2 Ventajas
Ayuda al usuario a llegar directamente a un punto deseado de la

aplicacin, lo que le ahorra tiempo y trabajo. Este modelo es til
para guardar estados que el usuario va a volver a crear ms adelante.
Pueden ser guardados como un favorito del navegador. Tambin es
til para el estado con otras personas, que es donde se especializa este
modelo de navegacin, este vnculo se puede enviar por correo, tweets
de las redes sociales, en foros de discusin, publicacin de un blog, y
en muchas otras maneras.
3.5.3 Desventajas
No se han encontrado. Solo dificultad al programarla.
3.5. Estado de vnculo-profundo 49

3.5.4 Ejemplos
El ejemplo de abajo muestra una pgina web con un diseo de estado

de vinculo-profundo, en donde podemos hacer los cambios de direc-
cin o buscar un sitio en particular, adems podemos hacer uso del
zoom y todo esos datos se guardan en la URL de la pgina.
Una pgina web que utiliza este patrn es:

https://www.google.es/maps
3.6 Va de escape
Este patrn (llamado escape hatch en ingls) se suele implementar

en pginas que tienen un poco navegacin, o cuando se llega a un Ci-

clo o a un Panel Modal. Los usuarios podran ser capaces de llegar a

estas pginas fuera de contexto, ya que lo podran hacer a travs de re-
sultados de bsqueda. Se puede entender como una caracterstica para
que los usuarios no se sientan atrapados en las pginas o aplicaciones,
le da la libertad de que exploren el sitio con seguridad.
Se utiliza en pginas que constituyen una especie de proceso en se-

rie, como un asistente de configuracin, o cualquiera de las pginas
que bloquean al usuario cuando este se encuenta en una situacin
con navegacin limitada, como un panel modal. Estas podran ser
las pginas que los usuarios pueden llegar fuera de contexto, ya que
podra hacer a travs de resultados de bsqueda.
3.6.2 Ventajas
La navegacin limitada es una cosa, pero el no tienen manera de salir

de ah es otra muy distinta!; si usted le da al usuario una forma sim-
ple y a la vez obvia para escapar de una pgina, sin condiciones, es
menos probable que se sienta atrapado all. Este es el tipo de car-
acterstica ayuda a las personas a sientan confianza de explorar con
mayor seguridad una aplicacin o sitio. Es algo as como la funcin
de deshacer la cual anima a la personas a hacer cosas sin preocuparse.
3.6.3 Desventajas
No se encontraron.
3.6.4 Ejemplos
En el primer ejemplo podes ver que una de las vas de escape de un

Panel modal es el botn cancelar. Lo que podra evitar serios proble-
mas al sistema.
3.6. Va de escape 51

En la segunda imagen se aprecia a un usuario que se adentr demasi-

ado en una pgina web, y que no sabe qu hacer, por lo que en estos
casos se recomienda como medida de escape el implementar una barra
de navegacin como un men o un botn o vinculo.
3.7 Mens gruesos (Fat Menus)
Son los diseos que muestran una gran lista de opciones de nave-
gacin en un men desplegable, se utilizan para mostrar todas las
sub-pginas que contiene el sitio. Para que este sea del agrado de
los usuarios, se debe de organizar con cuidado, ya sea por categoras,
3.7. Mens gruesos (Fat Menus) 53

clasificacin o agrupaciones. Los hay en dos tipos los mens de

cabecera y los de pie de pgina.
Los sitios web o aplicaciones que tengan muchas categoras, y que

posiblemente contengan una jerarqua de tres o ms niveles. Y se
requiere exponer la mayora de estas pginas a la vista de los usuarios,
ya que as se evita que estn explorando el sitio. Se suelen usar en
mens desplegables
3.7.2 Ventajas
Los mens gruesos hacen de un sitio complejo ms amigable. Ex-

ponen muchas ms opciones de navegacin a los usuarios de las que
podran encontrar si navegaran entre la pgina. Al tener tantos en-
laces hace posible que los usuarios vayan directo a cualquier pgina
secundaria sin tener que pasar por un sin nmero de ellas.
3.7.3 Desventajas
Solo sirve en pginas que tengan varios niveles de jerarquas, o que

contengan muchas sub-pginas.
3.7.4 Ejemplos
El siguiente ejemplo muestra un men grueso, que lo nico que lo

distingue de los mens comunes es que en estos se alberga una gran
cantidad de Vnculos, la mayora divido por categoras en este caso se
tratan de una lista de eventos.
Unas pginas que usan este tipo de diseo son:
https://www.netflix.com/cr/ y http://www.foodnetwork.com

3.8 Mapa del sitio en el pie de pgina
Coloque un mapa del sitio en el pie de pgina para cada pgina del
sitio. Este debe ser tratado como parte de la navegacin global, o un
complemento al encabezado. Si es un espacio pequeo reduzca las
partes del mapa para que pueda ser ubicado en el pie de pgina.
Un mapa de un sitio es una representacin de la estructura de un sitio
utilizado para la navegacin sobre el mismo. Esto permite tener una
vista general de los contenidos del sitio de un solo vistazo. Al utilizar
un mapa del sitio, los visitantes pueden saltar directamente a cualquier
pgina listada.
Recientemente, los mapas de sitio han sido reconocidos como una

manera de optimizar la indexacin de los motores de bsqueda. Esto
3.8. Mapa del sitio en el pie de pgina 55

porque los motores de bsqueda pueden tener mejor vista general del
contenido total a travs del mapa.
Este patrn se utiliza cuando el sitio que usted esta diseando usa
mucho espacio en cada pgina, y no se tiene restricciones en el tamao
de la pgina o el tiempo de descarga. El sitio tiene gran cantidad de
pginas, pero no muchas categoras. En estos casos se puede encajar
el mapa del sitio completo en una tira que no sobrepase la mitad de
la ventana del navegador. Puede haber un men de navegacin global
en el encabezado de la pgina, pero este no muestra todos los niveles
de jerarqua del sitio. Es preferible un simple y bien diseado pie de
pgina.
Al mostrar muchos enlaces en cada pgina, se da la posibilidad al
usuario de saltar directamente de cualquier sub-pgina a cualquier
otra. El pie de pgina es donde aterriza la atencin del usuario cuando
se alcanza el final de la pgina, al colocar enlaces interesantes en este,
se logra que el usuario permanezca en el sitio y lea an ms contenido.
3.8.2 Ventajas
Los mapas del sitio hacen que los sitios complejos sean ms
fcil de explorar.
Estos exponen ms opciones de navegacin a los visitantes de
lo normal.
Al mostrar al usuario el mapa del sitio completo da un sentido
de cmo est estructurado el sitio y donde se puede encontrar
las caractersticas ms relevantes.
En el caso de sitios convencionales, este patrn es muy fcil
de implementar y depurar ya que este no depende de ningn
contenido dinmico.

3.8.3 Desventajas
Tiende a ser ignorado por usuarios ocupados o casuales que se

enfocan solo en el contenido de la pgina y el encabezado.
El mapa debe contener las secciones principales del sitio como las
categoras y las sub-pginas ms importantes, algunas otras carac-
tersticas de los mapas del sitio son:
Categoras de mayor importancia.
Informacin acerca de la organizacin del sitio.
Sitios asociados.
Enlaces de comunidad, como foros.
Ayuda y soporte.
Informacin de contacto.
Ofertas actuales.
Donaciones o informacin de voluntariado, en el caso de
3.8. Mapa del sitio en el pie de pgina 57

3.8.4 Ejemplos

3.9 Herramientas de sesin
Este patrn es muy til en cualquier sitio o servicio donde se re-

quiere que los usuarios inicien sesin. La convencin indica, que
las personas esperan encontrar esta herramienta en la esquina supe-
rior derecha, por lo tanto, para garantizar una experiencia agradable
para el usuario se debe colocar esta herramienta donde ellos esperan
encontrarla.
La manera correcta de utilizar esta herramienta es colocar el nom-

bre de usuario y asegurarse de que esta se vea y funcione de igual
manera en todas las pginas que lo contengan. Otras herramientas
que se utilizan de la mano son el botn de inicio de sesin, configu-
racin de la cuenta, configuracin del perfil, ayuda del sitio, servicio
al cliente, carrito de compras, mensajes personales o algn tipo de no-
tificaciones, enlaces a colecciones de objetos personales y el enlace a
3.9. Herramientas de sesin 59

la pgina de inicio.
3.9.2 Ventajas
Este un objeto tpico de navegacin de utilidades, siempre debe estar

ah para cuando el usuario lo necesite y sino no debe de alterar el
uso comn del sitio. Para algunos de los elementos se pueden utilizar
iconos pequeos en lugar de texto, como por ejemplo el carrito de
compras.
3.9.3 Ejemplos

3.10 Mapa de secuencia
Tambin conocidos en ingls como: Progress indicator, Multi-step

Progress Bar (or Indicator), Wizard Steps, Progress Train y Steps
Left
En cada pgina en secuencia, se muestra un mapa de todas las pginas
en orden, incluyendo un indicador de su ubicacin actual. Se usa
cuando se disea un narrado escrito, un flujo de proceso, una gua o
cualquier otra sitio en el que el usuario progresa pgina por pgina.
Normalmente la ruta del usuario es lineal.
La idea principal es dar a conocer al usuario cual ha sido su recor-
rido a travs de una serie de pasos y a la vez que tanto le hace falta
para terminar la actividad. Conociendo esto le ayuda al usuario a de-
cidir si quiere continuar, estimar cuanto tiempo le tomara terminar y
permanecer orientado. Los mapas de navegacin tambin funcionan
como dispositivos de navegacin, ya que si es necesario devolverse
en la lnea de actividades, se puede lograr con tan solo hacer click en
el paso requerido en el mapa.
3.10. Mapa de secuencia 61

Se utiliza cerca de los bordes de las pginas, se coloca un pequeo

mapa de pginas de secuencia. La idea es hacerlo en una lnea o
columna para as evitar que compita visualmente con el contenido
de la pgina. El indicador de la pgina actual tiene que ser fcil de
ubicar, dndole un color diferente al de los dems es buena manera de
diferenciarlo, la misma tcnica se utiliza con las pginas que ya han
sido visitadas.
Para la conveniencia del usuario se suele colocar el mapa de secuen-
cia cerca o despus de los controles de navegacin principales, como
los controles de Atrs/Siguiente. Si las pginas o pasos son numera-
dos se deben especificar la secuencia con la misma numeracin, pero
siempre se recomienda poner el nombre del sitio en el mapa.
Se agrega un bloque de grficos que describen los pasos para ingresar
datos en el sistema, este bloque siempre debe aparecer en el mismo lu-
gar de la pgina. Si existe la necesidad de mostrar que pasos estn por
venir en un proceso especfico, o si existe la necesidad de simplificar
el diseo en las pginas que contienen los pasos, se pueden quitar el-
ementos que generen distracciones innecesarias , como elementos de
navegacin extras, anuncios o similares.
3.10.2 Ventajas
Este patrn es crtico en pginas de compras, donde el proceso de

pago es normalmente guiado de esta manera. En las pginas de com-
pras, el proceso de pago es la parte ms crtica del sitio, ya que esta
se encarga de capturar el dinero de los clientes. Un mapa de secuen-
cia brinda al usuario una visin general de cuanto ha avanzado en el
proceso, provee un final marcado del proceso que el usuario puede
tener como objetivo. Este patrn es similar a las guas de instalacin
(Wizards) que utilizan las aplicaciones de mquinas de escritorio, las
cuales permiten al usuario hacer sus elecciones paso a paso.

3.10.3 Ejemplos
3.10. Mapa de secuencia 63

3.11 Migas de pan
Se usa cuando la aplicacin o sitio tiene una estructura jerrquica con

dos o ms niveles. Cuando los usuarios se mueven a travs de nave-
gacin directa o realizando bsquedas dentro del sitio, la navegacin
global no es suficiente para mostrar donde se encuentra ubicado el
usuario, esto debido a que la jerarqua es muy grande o profunda.
En estos casos se utiliza este patrn, el cual muestra cada nivel de
jerarqua con respecto a la pgina actual, desde lo ms alto de la apli-
cacin hasta los ms abajo. En buen sentido, muestra una parte lineal
del mapa general de la aplicacin. Entonces al igual que los mapas de
secuencia, este patrn ayuda al usuario a saber en dnde se encuentra
ubicado. Esto es muy til si el usuario ha realizado un salto abrupto
hacia algn lugar profundo en el rbol de jerarqua, como resultado
de una bsqueda o una herramienta de navegacin. Por ltimo, usual-
mente las migajas de pan son enlaces o botones sobre los que se puede
hacer click, lo que los convierte en dispositivos de navegacin inde-
pendientes.

Estos objetos se pueden encontrar en la parte superior de la pgina,

en forma de una lnea de texto o iconos indicando el nivel actual de
jerarqua. Empezando del nivel superior, hacia la derecha, adjuntando
el siguiente nivel y as sucesivamente hasta alcanzar la pgina actual.
Entre cada nivel, coloque un carcter grfico o textual para indicar la
relacin padre/hijo entre ellos. Normalmente se utiliza el carcter de
una flecha hacia la derecha, tringulo, el signo mayor que (>), slash
(/) o las comillas ().
Las etiquetas para cada pgina deben ser los ttulos de las mismas.
Los usuarios deberan de reconocerlas si ya han visitado las pginas,
si este no es el caso, los ttulos deben de ser los suficientemente claros
para decirle al usuario de que se tratan las pginas. Estas etiquetas
deben de ser enlaces hacia las pginas en cuestin.
Algunas migajas muestran la pgina actual como el ltimo elemento
de la cadena, otros no lo hacen de esta manera. De cualquiera man-
era hay que asegurarse de diferenciarlo visualmente del resto de los
elementos, ya que al ser el actual no se muestra como un enlace.
3.11.2 Ventajas
Porque usar este patrn?

Porque brinda con contexto relativo al resto de la pgina.
Facilita una manera de navegar para arriba en la jerarqua del
sitio.
Utilizan poco espacio de la pgina por lo que no interfieren con
el contenido importante.
Muestran los atributos que el usuario ha seleccionado para refi-
nar la bsqueda.
3.11. Migas de pan 65

3.11.3 Desventajas
Las migajas no funcionan como objeto de navegacin primaria por lo

que siempre debe de ser utilizado en compaa de un formulario de
navegacin principal. Las pruebas de usabilidad han mostrado que las
migajas de pan nunca han causado problemas y que alguien siempre
las utiliza, por lo que es muy recomendable su implementacin.
3.11.4 Ejemplos

3.12 Barra de desplazamiento anotada
Hace que la barra de desplazamiento sirva dos funciones: como mapa

de contenido, o como un indicador de la ubicacin en la pgina.
Se usa cuando se est diseando una pgina tipo documento o una
interface de panormica y acercamiento, como un mapa o una visual-
izacin grande. Los usuarios exploraran este documento o grfico por
elementos de nota, como nmeros de pgina especficos o puntos de
referencia. Esto evita los problemas para mantener el seguimiento de
donde estn y donde ir despus conforme se desplazan.
Aunque el usuario se mantiene dentro de un espacio navegacional
mientras se desplaza a travs del contenido, las seales siguen siendo
de gran ayuda. Cuando se realiza un desplazamiento rpido, es bas-
tante difcil leer el texto mientras se mueve, por lo que otro tipo de
indicadores son necesarios para facilitar estas actividades. Aun si se
detiene brevemente, la parte del documento que se puede ver puede no
contener nada sobre lo que el usuario se pueda orientar, por ejemplo
los encabezados.
3.12. Barra de desplazamiento anotada 67

3.12.1 Ventajas
Por qu una barra de desplazamiento? Porque es ah donde la atencin

del usuario est centrada. Si se ponen seales ah, el usuario podr
verlas y usarlas conforme se realiza el desplazamiento, en lugar de
tratar de ver a dos reas de la pantalla diferentes al mismo tiempo.
Al poner seales cerca de la barra de desplazamiento se consigue el
mismo efecto de ver dos lugares al mismo tiempo de una manera ms
efectiva, al estar ms cerca, hace la tarea ms fcil.
Para implementarlo, se coloca un indicador de posicin sobre o cerca
de la barra de desplazamiento, ya se indicadores estticos o dinmi-
cos. Los indicadores estticos son los que no cambian de segundo a
segundo, como bloques de color en la barra de desplazamiento. Hay
que asegurar que su propsito sea claro, aunque, este tipo de objetos
puede llegar a confundir a los usuarios que no estn acostumbrados a
ver grficos en la barra de desplazamiento.
Los indicadores dinmicos cambian conforme el usuario se desplaza,
y usualmente son implementados como tool tips o informacin de
herramientas. Conforme la posicin de desplazamiento cambia, la
informacin sobre las herramientas que se muestra cerca del bloque
de desplazamiento cambia para mostrar informacin acerca del con-
tenido.
En cualquiera de los casos, ser necesario predefinir que tipo de
usuario se le va a dar el enfoque y as que tipo de indicador se utilizara
en las anotaciones. La estructura del contenido es un buen punto de
partida, si el contenido es cdigo, se puede mostrar el nombre de la
funcin o mtodo actual. Si es una hoja de clculo, muestre el nmero
de fila. Adems hay que tomar en consideracin si el usuario est
ejecutando una bsqueda. La anotacin sobre la barra de desplaza-
miento debe mostrar donde estn los resultados de la bsqueda en el
documento.
Sea lo que sea que sobre lo que se est desplazando la barra de de-
splazamiento debe de tener una manera significativa y fcil de detectar
para ayudar a orientar al usuario.

3.12.2 Ejemplos
_figures/AnnotatedScrollbar1.png
3.13 Transicin Animada
Consiste en una transicin fluida con una animacin que la hace sen-
tir ms natural. Se usa cuando el usuario se mueve a travs de un
espacio virtual grande, como una imagen, hoja de clculo, un grfico,
o documento de texto. Como otra alternativa la interfaz puede tener
secciones que se pueden cerrar y abrir continuamente, ya sea por parte
del usuario o del sistema. Las transiciones animadas pueden ser uti-
lizadas cuando los usuarios saltan de una pgina independiente hacia
otra.
Todas estas transformaciones pueden interrumpir el sentido de ubi-
cacin del usuario sobre el espacio virtual donde se encuentra.
Cuando se acerca o se aleja la vista del espacio, puede alterar el sen-
tido del espacio si se ejecuta de manera instantnea o muy rpida,
lo mismo pasa cuando se rota o se cierra una seccin completa. In-
3.13. Transicin Animada 69

clusive desplazndose hacia abajo en un texto largo, si no se hace

fluidamente, tiende a retrasar al lector.
Por el contrario cuando se realiza un cambio de un estado a otro de
manera visualmente continuo, es mejor percibido por el usuario. En
otras palabras, se puede animar la transicin entre los estados de man-
era que se vea fluido. Esto ayuda al usuario a permanecer orientado,
esto debido a que estas transiciones simulan la realidad fsica.
Para cada tipo transformacin que se utilice en la interfaz, hay que

disear una animacin que conecta el primer estado con el segundo
estado. Para enfocar y rotar, se puede mostrar los niveles interme-
dios. Para un panel que se cierra, se puede realizar una animacin de
encogimiento mientras que los otros paneles se expanden para rellenar
el espacio que la ventana que se cierra deja disponible. En cualquiera
de los casos tiene que parecer que algo fsico est sucediendo.
Las animaciones deben de ser rpidas y precisas, con tiempo de re-
traso minino o inexistente desde el momento en que el usuario inicia
la accin y el inicio de la animacin. Se limita a la parte afectada
de la pantalla, no se debe animar la pantalla completa y debe de ser
breve. Si el usuario realiza acciones mltiples en una sucesin rp-
ida, como presionar la tecla con la flecha hacia abajo muchas veces
seguidas para desplazarse, se debe combinar todas estas acciones en
una sola accin animada. De otra manera, el usuario puede tener que
esperar por varios segundos debido a que se ejecuta una animacin
por cada vez que se presiona la tecla, y estas animaciones deben de
ser rpidas y precisas.
A continuacin se listan algunas de las animaciones ms conocidas:
Iluminar y oscurecer (Brighten and dim)
Expandir y contraer (Expand and collapse)
Aparecer, desaparecer y desvanecimiento cruzado (Fade in,
fade out and cross-fade)

Auto curado (Self-healing)

Deslizar (Slide)
Foco (Spotlight)
En resumen, la transicin animada se utiliza cuando el usuario est
cambiando o enfocndose en una operacin especfica, completando
un comando, abriendo una nueva rea en la interface o necesitan saber
que el estado de la aplicacin est cambiando. Por lo que el diseador
debe de mantener al usuario al tanto de cualquier cambio en relacin
con cualquier elemento que est utilizando.
3.13.2 Ejemplos
3.13. Transicin Animada 71

3.14 Referencias
Tidwell, J.(2005).Designing Interfaces. Arlington, Mas-

sachusetts.
Kalbach, J.(2007).Designing Web Navigation. Gravenstein
Highway North, Sebastopol, CA 95472.
Van Welie, M(2008).Obtenida el 19 de Abril del 2015, de
http://www.welie.com/patterns/showPattern.php?patternID=sitemap-
footer/ -* Cronin, M.(2009). Obtenida
el 19 de Abril del 2015, de
http://www.smashingmagazine.com/2009/06/17/informative-
and-usable-footers-in-web-design/
http://ui-patterns.com/patterns/StepsLeft,
Obtenida el 19 de Abril del 2015. ()
https://developer.yahoo.com/ypatterns/navigation/bar/progress.html,
Obtenida el 19 de Abril del 2015.

https://developer.yahoo.com/ypatterns/navigation/breadcrumbs.html,
Obtenida el 19 de Abril del 2015.
http://ui-patterns.com/patterns/Breadcrumbs, Obtenida el 19 de
Abril del 2015.
Con la ayuda del siguiente libro se lograron obtener varios pa-
trones http://flylib.com/books/en/3.323.1.26/1/
Desde la pgina de Quince.infragistics.com se pudieron
conseguir algunos modelos de navegacin como
los siguientes: Clear entry points, modal panel,
http://quince.infragistics.com/#/Search$tag+=Navigation

CHAPTER 4
Disposicin de pgina
Recopilado por: Cruz Martnez Montalvn, Jonathan Madrigal Mora

y Pedro Arguedas Montero
La distribucin de pgina (page layout) es el arte de manipular, la
atencin del usuario en una pgina para transmitir significado, se-
cuencia, y puntos de atencin.
4.1 Marco visual
Un marco visual (visual framework) es un patrn de diseo de in-

terfaces que se utiliza para disear cada pgina utilizando el mismo
diseo bsico, colores y elementos estticos.
Se utiliza cuando se est construyendo un sitio web con muchas pgi-

nas o una interfaz de usuario que requiere ser implementada con
mltiples ventanas. Es una forma de mantener una estndar en el
diseo de la interfaz de usuario que se desea implementar. Un marco
visual debe estar presente en todas las pginas y ventanas en una in-
terfaz.
75
An cuando cada pgina debera contar con un diseo similar, la

pgina principal es diferente y puede contar con un diseo especial
pero compartiendo algunos elementos del marco visual. Algunos de
los elementos que pueden ser similares incluyen:
Colores: el color de fondo y el color de texto.
Fuentes de letra: ttulos, subttulos, texto ordinario.
Estilo de escritura y gramtica: ttulos, nombres, contenido,
descripciones cortas.
Otros elementos: ayudas de ubicacin: logos, migas de pan,
navegacin global, espaciamiento y alineamiento
4.1.2 Ventajas
Permite que una interfaz sea fcil de usar y que tambin sea fcil de
navegar. Adems, un marco visual da la sensacin de cohesin a todas
las pginas que componen el sitio o aplicacin.
Tambin, facilita al usuario el cambio de una pgina a otra pues no
requiere reconocer la nueva pgina. Un marco visual se enfoca en la
jerarqua visual de toda la pgina, pantalla, o ventana por lo que es
independiente del tipo de contenido que presente en dicha pgina.
Una de las facilidades que ofrece un marco visual es que ayuda en
la usabilidad, la gente sabe dnde mirar para ciertos tipos de elemen-
tos. Si la navegacin est siempre en el mismo lugar, entonces la
gente sabe dnde encontrarlo cuando lo necesitan o pueden ignorarlo
cuando no lo necesitan.
Del mismo modo, la colocacin de los mismos tipos de botones (como
Aceptar, Cancelar) en el mismo lugar en los cuadros de dilogo puede
ayudar a las personas con mayor rapidez las opciones que desean y
evitar errores.
En general, se puede ayudar a la gente a centrarse en el tipo de ele-
mento visual que les interesa sin tener que volver a evaluar la interfaz.
76 Chapter 4. Disposicin de pgina

4.1.3 Desventajas
Un marco visual requiere una mayor planeamiento en cuanto a los

colores, fuentes y logos afines a la aplicacin que se desea implemen-
tar.
4.1.4 Ejemplos
El primer ejemplo est basado en la interfaz de usuario presente en

el aula virtual institucional de la universidad nacional el cual muestra
como se mantiene un estndar en todas las paginas relacionadas al
sistema de aula virtual ya que se utilizan los mismos colores, logos
entre otros componentes.
En este otro ejemplo de puede notar que la interfaz de usuario

mantiene los componentes de una manera muy similar y que solo
cambia segn lo que desea hacer el usuario.
4.1. Marco visual 77


Para obtener ms informacin sobre este patrn es recomendable vis-

itar los siguientes links:
Designing Interfaces- Visual Framework y Quince- Visual Frame-
work
4.2 Escenario Central
Este patrn se enfoca en presentar al usuario la parte ms importante

de la aplicacin en una regin grande en el centro de la aplicacin.
Las herramientas y contenido secundarios se colocan alrededor en

pequeos paneles. El trabajo principal de la pgina es mostrar una
unidad simple de informacin coherente al usuario, permitirle editar
4.2. Escenario Central 79

un documento, o permitirle a l ejecutar una cierta tarea. Otro con-

tenido y funciones son secundarios a esta.
En cuanto al desarrollo web, el centro de la escena tambin es, con
mucho, la mayor superficie de la pgina. Por lo general, al menos el
50% del ancho de pgina es para el centro de la escena. Si una pgina
tiene un diseo de varias columnas, el centro de la escena suele ser el
centro y la columna ms ancha.
El centro de la escena por lo general se colorea con el color ms neu-
tral en la combinacin de colores, es decir, blanco o de un color suave.
El color debe contrastar con otras reas de navegacin o secciones en
las cosas relacionadas local, que van a los lados. Un centro del esce-
nario es reconocible incluso sin ser capaz de leer la pantalla. Se deben
guiar los ojos del usuario inmediatamente al inicio de la informacin
ms importante.
La posicin del escenario central realmente no es importante, pero
se debe tomar en cuenta algunas convenciones para posicionar otros
elementos como: barras de herramientas en la parte de arriba y barras
de navegacin local a la derecha de la pgina. Los siguientes factores
deben ser considerados al disear un escenario central:
Tamao: El escenario central debe ser al menos el doble de
cualquier otro elemento en la pantalla, tanto en ancho como en
alto.
Color: Se debe usar un color que contraste con la informacin
en los mrgenes. En aplicaciones de escritorio y web se usa
blanco contra gris.
Encabezados: Encabezados grandes son puntos focales y
pueden llevar los ojos del usuario a la cabecera del escenario
central.
Contexto: Se debe tomar en cuenta lo que el usuario espera ver
un grfico, un texto, una pgina, un sistema de archivos en el
escenario central por lo que dicho contenido se debe hacerse
reconocible.

4.2.2 Ventajas y desventajas
Un centro del escenario permite a los usuarios centrarse en una cosa

en particular, lo ms importante en la pgina. Muchos tipos de inter-
faces pueden usar esta tcnica, por ejemplo: tablas y hojas de clculo,
formularios, y editores grficos.
4.2.3 Ejemplos
Este ejemplo lo que hace notar es como un editor de texto posee im-
plementado este patrn ya que el rea de trabajo es la mas extensa y
es donde el usuario enfoca su atencin al instante.
Este ejemplo demuestra como un visor de imgenes implementa el

patrn escenario central.
itar los siguientes links:
4.2. Escenario Central 81

Designing Interfaces - Central Stage y Welie - Certer Stage
4.3 Rejilla de iguales
Se utiliza para mostrar una variedad de elementos en una interfaz de

usuario pero dndole a cada elemento el mismo grado de importancia
para ser mostrado en la interfaz.
Se debe ordenar los elementos de contenido en una rejilla o matriz.

Cada elemento debe seguir una plantilla comn, y el peso de cada
elemento visual debe ser similar.
Se puede realizar tambin un enlace a la cada pgina relacionada si
es necesaria. La pgina contiene muchos elementos de contenido que

tiene estilos e importancia simulara, tal como artculos de noticias,

entradas de blogs, o reas de categoras.
Se deben desplegar los elementos con algo ms que bloques de texto:
titulares de colores diferentes, ser creativos con espacios en blanco, y
el uso de imgenes, si se puede hacer de manera uniforme en todos
los artculos.
Se debe experimentar diversas formas para adaptarse a toda la in-
formacin correcta en un espacio relativamente pequeo de estatura,
ancho, o cuadrados y aplicar esa plantilla para los elementos que se
necesitan mostrar.
Cuando un usuario se posiciona sobre los elementos de la cuadrcula
se pueden utilizar colores y otros cambios de estilo, pero no se debe
cambiar las posiciones, tamaos u otros elementos estructurales de la
rejilla de los elementos.
Una clave para ayudar a los usuarios notan las diferencias entre los
mltiplos es asegurarse de que cada uno de los elementos no difiere
en formas distintas de estas dimensiones. Por ejemplo, cada imagen
del producto debe ser del mismo tamao, utilice el mismo color de
fondo, etc.
Las diferencias notables entre los artculos deben tener algo que ver
con las dimensiones que desea que se fijen.
En conjunto, estas tcnicas establecen una jerarqua visual de gran al-

cance que debe coincidir con la semntica de su contenido. La plan-
tilla comn para los elementos dentro de la rejilla indica al usuario
que los elementos son similares entre s. Tener que recordar detalles a
travs de mltiples ejemplos de una en una en realidad hara probable
que muchos patrones no se observaron en absoluto.
Estas diferencias se notan sobre todo en los casos en que el conjunto
de ejemplos son similares en muchos aspectos, y en realidad slo di-
fieren ligeramente entre s. Slo viendo todos a la vez son estas sutiles
diferencias notables.
4.3. Rejilla de iguales 83

Al mostrar muchos ejemplos a la vez, lo que demuestra las diferen-

cias entre las dimensiones permite a los usuarios ver los patrones que
seran ms difciles de notar si mira un ejemplo a la vez.
4.3.3 Ejemplos
Se le presentan al usuario las opciones de los productos que puede

adquirir para que seleccione el articulo deseado, se puede notar que
todos los elementos poseen el mismo tamao.
Este ejemplo simula una tienda de msica en donde se le presenta

al usuario diferentes tipos de msica agrupadas por genero musical
donde puede seleccionar el genero y esta le presentara la msica segn
el genero seleccionado.
itar los siguientes links: Quince- Grid of equals

4.4 Secciones con ttulos
Este mtodo se usa cuando usted tiene una gran cantidad de contenido
para mostrar, pero desea hacer la pgina fcil de explorar y compren-
der, con todo lo visible.
Puede agrupar el contenido en secciones basada en temticas o en
trabajo que tengan sentido para el usuario.
Este mtodo permite crear secciones separadas de contenido dando

a cada una un ttulo visualmente fuerte, luego se distribuyen todas
en la misma pgina. Las secciones con ttulos hacen que sea fcil
explorar y entender una pgina an cuando presente una gran cantidad
de contenido.
El contenido se puede agrupar en secciones basadas en temas o tareas,
4.4. Secciones con ttulos 85

de forma que tenga sentido para el usuario. Utilizando visualmente

secciones distintas guiar a la gente a ver la informacin como trozos.
Algunos factores que pueden ser utilizados son:
Ttulos: Usar fuentes de letra que sobresalgan del resto del con-
tenido, negrilla, ancha, grande, colores fuertes, etc.
Contraste: El ttulo se puede contrastar contra una barra de
fondo.
Usar espacios en blanco para separar las secciones.
Poner las secciones en diferentes colores de fondo.
El dibujo de cajas es muy popular en aplicaciones de escrito-
rio. Sin embargo, se debe tener cuidado en no hacerlas muy
grandes, demasiado cercanas, o muy anidadas.
Cuando un usuario ve una pgina dividida en secciones, l gua su

mirada entre la pgina de forma ms confortable. Este patrn no fun-
cionar si no se puede de manera significativa agrupar la informacin
en trozos. Los ttulos ayudarn a escanear rpidamente los trozos para
encontrar lo que es interesante para el usuario para luego se poder pro-
fundizar en la seccin deseada.
Este patrn se aprovecha de que el sistema visual humano siempre
busca patrones ms grandes, ya sean deliberadas o no, as cuando el
usuario ve una pgina seccionada en trozos, su ojo es guiado a lo largo
de la pgina con mayor comodidad.
4.4.3 Ejemplos
El primer ejemplo muestra una ventana donde se agruparon los com-

ponentes y cada grupo posee su titulo para que sea fcil de utilizar
para el usuario.

Este otro ejemplo muestra como se puede agrupar el contenido de una

ventana por secciones.
Para obtener ms informacin sobre este patrn es recomendable
visitar los siguientes links: Designing Interfaces- Titled Section y
Quince- Titled Section
4.5 Distribucin lquida
Este patrn surge ante la necesidad de que la gente quiere ver el con-
tenido de un tamao adecuado para el factor de forma que estn us-
ando. La solucin que plantea el patrn es tratar el contenido como
lquido y hacer que se expanda para llenar la forma de su envase.
4.5. Distribucin lquida 87

La idea aqu es que conforme el usuario modifica el tamao de la

ventana, el contenido de la pgina se reordene para rellenar toda el
rea disponible.
A menos que el diseo se realice para una interfaz cerrada es difcil
predecir las condiciones bajo las que el usuario ver la aplicacin ya
que ni el tamao de la pantalla, ni las fuentes de letra pueden ser es-
tablecidos de antemano. Al agrandar dicha ventana todo el contenido
debera acomodarse de forma adecuada al nuevo espacio disponible.
De igual forma, si se cuenta con una ventana demasiado grande se
podra reducir su tamao y el contenido debera re ordenarse en la
nueva rea reducida.

Este modelo ayuda a optimizar la experiencia de los diferentes fac-

tores de forma. Adems, el uso de diseo lquido puede ayudar
cuando la localizacin a otros idiomas o cambiar el tamao de la
fuente del contenido.
Un usuario puede querer asignar ms espacio a un texto o aplicacin
que tiene una ventana muy pequea. El dar al usuario control sobre
la distribucin de la pgina hace que la interfaz sea ms flexible a
condiciones cambiantes.
Sin embargo, ciertas aplicaciones requieren un tamao mnimo (o
mximo) para ser tiles. Un re ordenamiento ms all de esos lmites
podra ser contraproducente.
4.5.3 Ejemplos
Este ejemplo tiene como objetivo hacer notar como se adaptan los
componentes de la aplicacin a la hora de cambiar el tamao de la
ventana.
Este otro ejemplo es similar al anterior, ejemplifica como se adaptan
los componentes de la ventana al reducir su tamao.
Para obtener ms informacin sobre este patrn es recomendable
visitar los siguientes links: Designing Interfaces- Liquid Layout y
Quince- Liquid Layout
4.6 Mdulo de tabuladores
Este patrn consiste en separar 2 o ms mdulos de la aplicacin de

tal forma que slo sea visible uno a la vez, y el usuario puede acceder
a ellos mediante el tabulador usualmente ubicado en la parte superior
de la vista de los mdulos.
4.6. Mdulo de tabuladores 89


Este patrn es utilizado principalmente por sitios web debido a que

permite al usuario navegar libremente por el contenido de la pgina
web sin la necesidad de cambiar de pgina en s, permitiendo al desar-
rollador tener un sitio ms dinmico. No por esto los tabuladores no
son utilizados en las aplicaciones de escritorio, por ejemplo existen
aplicaciones de uso diario que manejan este diseo.
Sin ir ms lejos uno de los ejemplos claros son los navegadores web,
tanto Firefox como Chrome utilizan tabuladores para manejar las
diferentes pginas cargadas por el usuario sin necesidad de abrir ms
ventanas. Adems este patrn permite mantener un orden no solo en
la aplicacin o pgina en s, sino tambin para el usuario a quien se le
facilita la navegabilidad por la aplicacin o sitio web.
Las caractersticas de este patrn son:

El usuario necesita ver nicamente un mdulo a la vez.
El tamao necesario para los diferentes mdulos es muy simi-
lar.
La cantidad de mdulos es poca (menos de 10), si la cantidad
de mdulos es mayor la interfaces puede verse cargada y poco
amena a la vista del usuario.
No se estar agregando mdulos constantemente, y de igual
forma no se eliminarn los ya existentes, en otras palabras el
4.6. Mdulo de tabuladores 91

contenido es esttico y no existirn variaciones mayores.

El contenido de los mdulos podra estar relacionado o ser pare-
cido.
4.6.2 Ventajas:
Al ser una interfaz muy utilizada tanto en interfaces de escrito-

rio como en web no habr confusiones en cmo funciona.
Es muy efectivo para ordenar una interfaz.
4.6.3 Desventajas:
Slo se puede visualizar un mdulo a la vez.

No es recomendado para aplicacin que constantemente se
reinventan o actualizan y agregan contenido segn las necesi-
dades.
4.6.4 Ejemplos
Los ejemplos presentan una versin en dispositivos mviles lo cual

presenta los tabuladores cmo botones, lo cual demuestra la variacin
que se le puede dar a dicho patrn. Despus Podemos observar una
interfaz muy normal en cuanto a la implementacin del patrn.
4.7 Acorden
ste es otro patrn que se basa en la separacin de mdulos, por lo

tanto es una variacin del patrn anterior. Sin embargo la idea de
dicho patrn es acomodar los mdulos en una pila de paneles que
pueden ser abiertos independientemente. Esto quiere decir que se
pueden mostrar uno o ms paneles al mismo tiempo, segn el tamao
del dispositivo dnde se visualice; esto no implica que no pueden ser

abiertos todos, pero dependiendo de sus dimensiones no todos sern

visibles al mismo tiempo.
Cada panel con su respectivo ttulo produce la activacin de su panel
asociado. Al ser una variacin del patrn anterior es igualmente uti-
lizado en pginas web y aplicaciones. La activacin de los paneles
usualmente es mediante un clic del mouse, la cual es la mejor op-
cin, sin embargo existen otros mtodos como el arrastrar el cursor
por encima. ste ltimo no es recomendable debido a que para el
usuario puede parecer molesto debido a la constante apertura y cierre
no deseado de los mdulos.
Se caracteriza por:
El usuario puede visualizar ms de un mdulo. Como se co-
ment repetidas veces es una variacin del patrn de tabu-
ladores, y su principal diferencia y punto fuerte es que puede
mantener ms de un mdulo abierto en caso de que el usuario
lo necesite.
Los mdulos pueden diferir en cuanto a su altura ms no su
ancho. Otro punto importante de diferenciacin que la altura
de los mdulos no debe ser necesariamente igual como en el
patrn anterior.
4.7. Acorden 93
Es importante usarlo cuando el nivel de cosas que se desea

mostrar es 2 como mximo, si fuera mayor a ese nmero la
interfaz se vera recargada y pesada a la vista del usuario.
Ayuda a mantener un orden lineal de los mdulos.
Los mdulos son parte de una paleta de herramientas, men de
2 niveles u otros sistemas de elementos interactivos.
El contenido de los mdulos puede estar relacionado. La
relacin puede ser en sus funciones, por ejemplo pueden ser
formularios cuya principal diferencia es la informacin solici-
tada al usuario.
4.7.2 Ventajas:
Son casi tan conocidos como los mdulos tabulados, por lo que
tampoco habr confusin en cuanto a su uso.
Ayuda a mantener una interfaces ordenada y limpia.
4.7.3 Desventajas:
Pueden llevar a la confusin del usuario si se usan de manera

anidada. Al poseer varios mdulos dentro de otros al momento
de ser abiertos van a ocupar mucho ms espacio del que de-
bera en la interfaz, con lo cual la vista de la aplicacin se ver
recargada con contenido secundario.
4.7.4 Ejemplos
El primer ejemplo demuestra uno de los principales usos que se le dan

a dicho patrn, el cual es para separa y visualizar archivos. En ste
caso imgenes. El segundo ejemplo presenta como podemos podemos
separa diferentes tipos de contenido y an as mantenerlo todo visible
al usuario.

4.8 Paneles plegables:
ste patrn es usado con elementos secundarios u opcionales de la

interfaz, ponindolos en paneles que pueden ser abiertos y cerrados
por el usuario. La idea es que los componentes que se sitan en esta
clase de paneles sean de ayuda o complementen el panel principal,
sin embargo su importancia no es la suficiente para permanecer en el
panel principal. Es importante no sobrecargar estos paneles, con esto
me refiero a que se pueden anidar unos con otros sin embargo llega
un punto donde son incmodos y molestos para el usuario.
4.8.1 Ventajas:
Simplifica la interfaz al ocultar contenido secundario. Ayuda

a mantener la interfaz limpia, aun as posee los componentes
necesarios para que el usuario realice las tareas que requiera.
4.8. Paneles plegables: 95

Es muy til para aplicaciones con que poseen muchas funciones

como por ejemplo el software para realizar Photoshop.
4.8.2 Desventajas:
Su ubicacin debe ser bien definida para no estorbar con el

contenido principal de la interfaces, haciendo que su imple-
mentacin no tenga sentido.
Los componentes presentes en estos mdulos deben ser bien
definidos ya que si un componente principal termina en un m-
dulo secundario ser un problema para el usuario final de la
aplicacin o pagina web.
4.8.3 Ejemplos:
El mayor ejemplo de los paneles plegables es sin duda alguna el sis-

tema operativo Windows, el cul le da uso para manejar los sitios a
los que accede el usuario en su directorio de carpetas y archivos.
El siguiente ejemplo son los navegadores, que en su mayora por no
decir todos, utilizan los paneles plegables para mostrar diferente con-
tenido. en este caso especfico son los marcadores de los sitios web
visitados.

4.9 Paneles Mviles
Consiste en poner contenido dentro de cajas separadas e independi-

entes una de la otra, con lo cual el usuario puede abrirlas o cerrarlas
segn sus necesidades adems de poder moverlas y colocarlas en la
configuracin que desee. Se utilizan principalmente cuando el usuario
muy probablemente necesitar ver ms de un mdulo.
En este diseo el tamao de los mdulos puede variar. Adems, posi-

cionamiento de la pgina es ms importante para el usuario que para
el desarrollador. La estructura por defecto de la pgina web o apli-
cacin no es de mucha importancia para el desarrollador debido a
que tan pronto como el usuario empiece a utilizar el software tambin
empezar a personalizarlo a su gusto con lo que la configuracin por
defecto cae en un segundo o tercer plano de importancia.
La cantidad de mdulos que se pueden mostrar es muy amplia por
lo cual se deben elegir unos nicamente, ya sea por el desarrollador
(mdulos a mostrar por defectos) o por el usuario (personalizacin).
Debido a que en toda aplicacin hay un espacio limitado, sea grande
o pequeo se debe definir de manera correcta las mdulos ms impor-
tantes para mostrar. Esto quiere decir que a pesar de los mdulos que
sean visualizados en la interfaz, existen ms mdulos que pueden ser
cambiados por los que se muestran.
Se le da la posibilidad al usuario de ocultar algunos mdulos, sin em-
bargo puede volver a mostrarlos. Esto quiere decir que aunque un
usuario por alguna razn decida que un mdulo no es de su importan-
cia y lo elimine, puede volver a recuperarlo y agregarlo a la interfaz
de manera fcil y rpida para l.
4.9. Paneles Mviles 97

4.9.2 Ventajas
La implementacin de ste patrn es muy usada en mviles, ms es-

pecficamente en el manejo de widgets en las pantallas de los disposi-
tivos. Se pueden mover los widgets en el lugar que el usuario necesita
y dependiendo del espacio puede tener ms de uno. Adems es el
usuario quin escoge cules widgets se muestran.
4.9.3 Ejemplo
El otro ejemplo es de una aplicacin web llamada trello la cul ayuda

a la administracin de tareas en un proyecto. Su interfaz permite
mover notas y tareas por realizar en el lugar que ms le convenga
al usuario que lo utiliza siento cada tarea o ventana independiente de
las otras.
4.10 Alineamiento derecha/izquierda
Este patrn se utiliza cuando se desea crear o disear un formulario

de dos columnas, en el cual los elementos de la izquierda representan
las etiquetas o informacin solicitada, mientras que a la derecha se

ubican los elementos que permiten al usuario ingresar o seleccionar

la informacin solicitada, pueden ser campos de texto, botones, entre
otros.
Se puede utilizar en formularios que tiene un conjunto de elementos
que llevan etiquetas en frente de ellos, tambin se puede aplicar en
la estructura interna de una tabla o bien en toda estructura que se
componga de dos columnas. Este patrn surge debido a que a las
personas no les gusta los formularios debido a su complejidad.
Adems explica que para los usuarios es importante llenar un formu-
lario de principio a fin y con un orden especifico y de esta manera no
tener que buscar campos deseados por todo el formulario.
Las etiquetas pueden tener varios tamaos, algunas pueden ser pe-
queas y otras grandes, sin embargo lo ms importante es no dejar
demasiado espacio entre una etiqueta y su campo asociado ya que
puede causar confusin en los usuarios. Si la etiquetas resultan ser
muy largas es recomendable dividirla en varias lneas.
El principal motivo por lo que se puede utilizar este patrn es porque
cuando se coloca la etiqueta al lado del componente que la asocia, se
crea un fuerte agrupacin perceptible permitiendo al usuario asociar
con facilidad los elementos de la interfaz.
Mientras que para el patrn de alineamiento a la izquierda es usado
cuando la informacin necesitada no es familiar, presenta menor clari-
dad en la asociacin entre la etiqueta y el campo. El cambio de tamao
de las etiquetas deteriora el diseo de la interfaz.
La forma en cmo se implementa este patrn, es tan simple como
alinear a la derecha de cada etiqueta textual el campo que describe
y con una distancia mnima entre ambos. No hay problema que las
etiquetas sean irregulares en su tamao o bien los campos respectivos
de cada etiqueta. Es importante que el espacio entre cada etiqueta y
su campo asociado sea el mismo para todos, de esta manera se creara
4.10. Alineamiento derecha/izquierda 99

un efecto simtrico hacia abajo siendo ms agradable a la vista y ms

fcil de comprender en su totalidad el formulario.
Como desventaja del patrn de alineamiento a la derecha se especi-

fica que la legibilidad se ve reducida, mientras que la desventaja del
alineamiento a la izquierda se describe que el espacio entre la etiqueta
y el campo no es el mismo para todos, lo cual dificulta la asociacin
etiqueta-campo.
Mientras que las ventajas del alineamiento a la derecha son que re-
duce el espacio vertical y que cada etiqueta se encuentra adyacente
a su campo de texto asociado permitiendo crear una lnea imaginaria
vertical entre etiquetas y campos y para el alineamiento a la izquierda
estn que el espacio vertical es reducido y que es fcil encontrar las
etiquetas.
4.10.3 Ejemplos
En el siguiente ejemplo se puede observar como las etiqueta se en-

cuentra lo ms cerca posible de su elemento asignado y se crea una
lnea imaginario vertical en medio de ambos, adems permite ubicar
fcilmente una etiqueta en la interfaz.
En este ejemplo de alineamiento a la izquierda se puede ver como
ya no se crea la lnea imaginaria vertical y hay ms espacio entre la
etiqueta y su elemento asociado, puede resultar ms difcil de aso-
ciar ambos componentes, sin embargo se puede buscar una etiqueta
especfica con facilidad.
4.11 Balance diagonal
Este patrn se puede utilizar cuando el diseo de la interfaz es sufi-

cientemente corto y no se tiene la necesidad de desplazarse.

4.11. Balance diagonal 101

Proporciona un equilibrio diagonal que permite al usuario desplazarse

fcilmente de una esquina a la otra, adems de dar la impresin de
un balance de peso en la pgina, y ser ms agradable a la vista del
usuario.
Este patrn consiste en organizar los elementos de la pgina en forma
asimtrica pero a su vez poniendo peso visual en zonas especificas
para evitar que la interfaz se vea sobrecarga de elementos en una zona
ms que en otra.
Este patrn se usa ya que los usuarios leen de izquierda a derecha y
tienen un movimiento natural de los ojos de la parte superior izquierda
hacia la parte inferior derecha, la solucin consisten en organizar los
elementos de manera asimtrica, equilibrar la interfaz poniendo peso
visual tanto en la parte superior izquierda como en la parte inferior
derecha.
Es un patrn diseado a partir del diagrama de Gutenberg que explica
que el movimiento natural del ojo de una persona es de manera diago-
nal, comenzando en la parte superior izquierda POA (Primary Optical
Area por sus siglas en ingls) y terminando en la parte inferior derecha
TA (Terminal Anchor por sus siglas en ingls) .
A continuacin se puede ver una imagen donde se especifica o explica
el modelo de Gutenberg
Este autor menciona que las interfaces con el patrn de balance diago-
nal son generalmente ejemplo de buenos diseos. Tambin menciona
que no todos los diseos se pueden resolver utilizando este patrn,
que no se recomienda forzar su uso
La estructura de este patrn consisten en colocar el titulo o algn

otro elemento fuerte en la parte superior izquierda de la pgina, los
botones en la parte inferior derecha de la misma y cualquier elemento
de cualquier anchura en medio dejando en la mayora de lo posible el
mismo espacio en blanco a ambos lados de la pgina.

Entre las ventajas que ofrece este patrn estn ser ms agradable a
la vista, y establecer la pgina para que los ojos del usuario se mue-
van con facilidad desde la parte superior izquierda a la parte infe-
rior derecha. Mientras que como desventaja est que un mal uso de
este patrn puede no ofrecer al usuario una interfaz agradable, por
el contrario se torna tosca y pesada, tambin se ve limitado a usar
los elementos correctos para provocar el balance y utilizar un tamao
correcto para la pgina.
4.11.3 Ejemplos
En la siguiente imagen se puede ver como las pestaas junto con los
botones de la parte inferior de la ventana principal equilibran la can-
tidad de informacin que los grficos pueden mostrar dando una vista
agradable y no pesada a la vista de la ventana principal.
4.11. Balance diagonal 103

En este ejemplo se puede ver que es un titulo de tamao considerable

junto con los botones los que crean ese balance entre los componentes
de la interfaz, lo cual demuestra que hay diversas maneras de crear
este efecto visible y las opciones para hacerlos quedan a decisin del
desarrollador.
4.12 Descubrimiento sensitivo
Este patrn consiste en mostrar al usuario elementos de la interfaz

conforme selecciona otros, comenzando con una interfaz simple, sen-
cilla, limpia, fcil de entender y seguidamente mostrar ms elementos
al usuario, generando poco a poco una interfaz ms compleja.
Se puede utilizar cuando el usuario va a realizar una tarea que muy
pocas veces se hace o bien que es muy complicada o compleja y que
no se desea guiar al usuario por diferentes pginas o ventanas, sino
ms bien se pretende que el usuario realice toda la tarea en una misma

pgina.
Sin embargo hay que tener mucho cuidado a la hora de utilizar este
patrn ya que si el espacio donde se realizara es muy pequeo o bien
si se utilizan demasiados elementos, podra provocar confusin en el
usuario y su vez hacer que este no utilice el sistema para efectuar la
tarea o que lo haga sintindose incomodo.
El patrn de descubrimiento sensitivo es usado ya que no todos los
usuarios necesitan todas las opciones habilitadas todo el tiempo.
Algunas pruebas prcticas que establece este autor son:
Priorizar aquellos componentes que el usuario necesite ms
comnmente para su habilitacin.
Este patrn es ms eficiente cuando el usuario inicia la habil-
itacin de componentes, sea cuando realiza alguna accin.
Mantener un enfoque consistente entre los componentes.
Este patrn es usado cuando los usuarios se encuentran con una serie
4.12. Descubrimiento sensitivo 105

de pasos que deben realizar para completar una tarea, cada uno de
estos pasos ser habilitado al usuario solo cuando sea necesario.
Se recomienda utilizar este patrn para hacer que un proceso pesado
se sienta ms ligero para el usuario. Este patrn surge debido a que la
informacin que no es necesario hasta cierto momento en especifico
puede distraer a los usuarios.
Adems describen que los usuarios pueden sentirse engaados si sien-
ten que la tarea est tomando ms tiempo de lo que pensaba y con ms
y ms pasos sin terminar. Para evitar que los usuarios se sientan as
es posible considerar el uso del patrn de Habilitacin sensitiva.
4.13 Caractersticas
La tarea se desarrolla frente al usuario de manera dinmica, eso quiere

decir que en principio se muestran solo los elementos bsicos para
comenzar la tarea y progresivamente se muestran los nuevos elemen-
tos junto con los anteriores. Esto permite al usuario poder regresar
fcilmente a pasos anteriores y cambiar de opinin, se debe mantener
todo en una sola pgina.
Como desventaja se pude ver que el usuario debe completar toda la

informacin que se le solicita en un paso para poder continuar, mien-
tras que como ventaja se puede ver que permite al usuario cambiar
de opinin en algn dato en cualquier momento y que evita que el
usuario ingrese datos innecesarios para completar tareas especificas.
4.13.2 Ejemplos
En el primer ejemplo se puede ver como en la pantalla inicial solo se

muestran las opciones bsicas para comenzar a realizar una tarea.

Seguidamente se muestran otros elementos en la misma pantalla que

permiten al usuario completar su tarea, estos elementos se muestran
segn la opcin que el usuario elija en el paso uno.
En la siguiente imagen podemos ver como al seleccionar otra opcin,
solo se muestran los elementos necesarios para realizar la tarea que el
usuario desea hacer.
En el segundo ejemplo se muestra la interfaz de una red social, la cual
permite al usuario iniciar sesin o crear una cuenta nueva, sin em-
bargo estos otros pasos no se muestran al usuario desde un comienzo.
Por el contrario se muestran una vez que el usuario a elegido alguna

opcin inicial, como es el caso de crear una nueva cuenta mostrndose
el formulario de ingreso de datos como se muestra en la siguiente
imagen.
4.13. Caractersticas 107


4.13. Caractersticas 109

4.14 Habilitacin sensitiva
Este patrn consiste en mostrar toda la informacin y elementos de

interfaz de usuario al mismo tiempo, pero inicialmente solo habilitar
aquellos elementos que son necesarios para el paso inicial. Luego
permite que el usuario interacte con otros elementos a medida que
los necesite.
Si toda la informacin que el usuario necesita para realizar la tarea
se muestra habilitada desde un principio puede resultar abrumador
para el usuario. Un gran nmero de elementos disponibles para que
el usuario utilice puede resultar desalentadores. En este patrn, la
interfaz de usuario le dice a ste las consecuencias de realizar alguna
accin, habilitando elementos especficos.
Este patrn consiste en una interfaz que presenta la mayora de el-

ementos deshabilitados desde un comienzo y que se habilitaran per-
mitiendo al usuario realizar ms acciones conforme este realice al-
guna otra accin, al igual que el patrn anterior, toda la informacin
se mantiene en una misma pgina y se va completando paso a paso,
mostrando todo lo realizado por el usuario para que este tenga facili-
dad si desea cambiar de opinin.
Como desventaja se puede mencionar que todos los componentes se

muestran en la pantalla an estando deshabilitados, lo cual puede con-
vertirse en un problema ya que si hacemos uso de este patrn en una
interfaz que no lo amerite podramos saturar la interfaz de elementos,
mientras que como ventaja tenemos que permite que el usuario no
realice acciones que metan en problemas al sistema al mantener los
elementos que no se estn usando bloqueados, tambin que la inter-
faz mantiene bloqueadas las opciones que no son necesarias haciendo
ms fcil la interaccin del usuario.

4.14.3 Ejemplos
En la siguiente imagen vemos como se habilitan solamente las op-

ciones bsicas para comenzar la tarea, sin embargo se muestran todos
los dems elementos que el usuario podra utilizar.
Ahora se puede ver que se habilitan solamente elementos segn la op-

cin que elija el usuario, en este caso se permite solamente el registro
de un nuevo usuario.
Mientras que en esta otra imagen se habilita solamente la opcin de
modificar un usuario bloqueando la anteriormente seleccionada.
En el segundo ejemplo tenemos la interfaz de un sistema para aplicar a
carreras de una universidad, en principio solo se muestran habilitadas
en una tabla las opciones de carrera que se ofrecen en las diferentes
universidades y deshabilitado el formulario de aplicacin a la carrera.
Sin embargo al seleccionar una de las opciones se habilita el formu-
4.14. Habilitacin sensitiva 111


lario permitiendo aplicar a la carrera seleccionada en la tabla.
4.15 Referencias
Best Practices for Form Design por Luke Wroblewski,

http://static.lukew.com/webforms_lukew.pdf
Designing Interfaces por Jenifer Tidwell,
http://designinginterfaces.com
Designing Web Interfaces por Bill Scott y Theresa Neil,
http://designingwebinterfaces.com/
Quince, http://quince.infragistics.com)
Welie, http://www.welie.com)


CHAPTER 5
Listas y tablas
Recopilado por: Jos Alvarado Monge
5.1 Selector de dos paneles
Este patrn consiste en mantener dos paneles en la ventana princi-

pal con el fin de mantener una lista de elementos en uno de ellos y
al seleccionar de estos elementos el segundo panel mostrar sus con-
tenidos.
Es muy til cada vez que se tiene una lista de tems que mostrar y
cada uno de ellos tiene contenido o informacin relevante asociado.
Permite que el usuario mantenga esa lista en plena vista todo el tiempo
y pueda navegar por sus elementos fcil y rpidamente.
Al tener un rea dedicada a cambiar, el usuario tiene mayor facilidad
concentrndose en esa rea, en oposicin a cambiar toda la ventana lo
que demandara una mayor atencin por parte del usuario.
La desventaja aqu es q se necesita suficiente espacio en pantalla, en
dispositivos que no llegan a ese requerimiento pueden usarse alterna-
tivas como es la Exploracin en una sola ventana.
115
Ejemplos comunes son las aplicaciones de correo electrnico, ven-

tanas de exploradores de archivos e interfaces de gestores de im-
genes.
5.2 Exploracin en una sola ventana
Una alternativa al patrn de Selector de dos paneles descrito ar-

riba. Aqu la forma de mostrar los contenidos toma todo el espacio
disponible, tanto la lista como la vista asociada a cada elemento.
La idea es que en muchas ocasiones no se cuenta con mucho espacio,
como sucede con muchos dispositivos mviles pequeos o widgets.
De igual manera puede suceder que el contenido de ambas vistas es
muy grande aun teniendo mucho espacio disponible, puede beneficia-
rse de usar todo ese espacio para mostrar la informacin como es el
caso de foros en lnea.
La desventaja es que el usuario tiene que estar devolvindose a la
pantalla de la lista para pasar de un elemento a otro, para ayudar con
eso se pueden agregar funcionalidades para navegar al siguiente y al
anterior.
Los ejemplos ms comunes son las aplicaciones para dispositivos
mviles pequeos que disponen de un rea relativamente pequea.
Asimismo los foros que se pueden encontrar en lnea utilizan mucho
este diseo ya que las desventajas de este patrn no lo afectan tanto.
5.3 Lista de incrustaciones
Esta es una lista normal como la que aparecera en la Exploracin en

una sola ventana, sin embargo en el momento que el usuario selec-
ciona uno de los elementos, este se despliega en la misma ventana,
sin pasar a otra y sin la necesidad de un panel adicional.
Al mantener el resto de los elementos en la misma vista, ayuda a crear
un mapeo visual para el usuario y entender mejor como se relacionan,
116 Chapter 5. Listas y tablas

tambin es un patrn que permite abrir ms de un elemento a la vez

y as poder comparar sus detalles, lo cual no se puede hacer con el
Selector de dos paneles ni Exploracin en una sola ventana.
5.4 Rejilla de Miniaturas
La rejilla de miniaturas (Thumnail Grid o simplemente Thumbnail)

consiste en presentar varias vistas previas de elementos de manera
que se obtenga una percepcin ms detallada de cada elemento. Este
patrn resulta particularmente til cuando se trata de mostrar infor-
macin en conjunto de imgenes o vistas previas de los elementos.
Actualmente es ampliamente utilizado en sistemas web de salas de
cine, tiendas electrnicas, sitios de visualizacin de pelculas y se-
ries entre otros muchos, adems de ser usado por los exploradores
de archivos para dar una percepcin ms rpida del contenido de los
documentos que se encuentran almacenados en un computador
5.4.1 Ventajas
Crea un entorno en el cual el usuario se le permite distinguir

rpidamente el contenido de un archivo o producto por su ima-
gen de vista previa
Con el tamao adecuado de imgenes y la correcta progra-
macin, un sitio que manipule este tipo de patrn genera una
muy buena y amigable vista para dispositivos mviles.
Los sitios web y sistemas adquieren un tono ms llamativo para
el usuario, en comparacin a si se presentara una lista de texto.
5.4.2 Desventajas
La carga de imgenes genera un mayor consumo de datos a la

hora de cargar un sitio web
5.4. Rejilla de Miniaturas 117

Si no se seleccionan las imgenes de un tamao apropiado y

uniforme puede generar visualizaciones asimtricas y dispare-
jas, lo cual es mal visto
Tener vistas previas de documentos de texto u otros tipos de
archivos no siempre es til o relevante lo cual puede generar
una experiencia negativa a la hora de navegar en la interfaz.
El implementar muchos elementos en la rejilla genera una so-
brecarga visual y ocasiona que se extienda mucho perdiendo su
practicidad
(Tidwell, 2011) (Welie, 2015) (Hassan, 2012)
5.5 Carrusel
Este patrn pretende mostrar una moderada o pequea cantidad de

elementos mediante una interfaz circular que se extiende primordial-

mente de manera horizontal, desde la cual el usuario puede visualizar

varias imgenes o contenido los cuales pueden rotar en intervalos o
moverse segn gusto del usuario. Este patrn es usado muy comn-
mente en tiendas virtuales y la mayor parte de sitios web por su atrac-
tivo visual. Es indispensable recalcar que cada elemento que se vaya
a mostrar en un carrusel debe poseer imgenes demostrativas signi-
ficativas, las cuales se puedan utilizar para mostrar al usuario la infor-
macin principal del elemento.
Finalmente, se debe contar con herramientas para desplazar los ele-
mentos del carrusel, por lo que normalmente se implementan grandes
flechas en los extremos izquierdo y derecho del elemento o utilizar las
flechas del teclado. En caso de las interfaces mviles suele ser ms
discreto y natural, permitiendo al usuario desplazar los elementos del
carrusel con un desliz de su dedo.
5.5.1 Ventajas
Este patrn es altamente amigable con entornos de dispositivos

mviles, donde el espacio de trabajo es mucho ms limitado
que en las PCs.
Genera un impacto visual agradable al usuario, el cual reconoce
fcilmente el contenido de los elementos.
til para visualizar pequeas cantidades de elementos de una
manera rpida y positivamente impactante.
5.5.2 Desventajas
Se recomienda utilizar pequeas cantidades de elementos para

evitar que sea muy difcil la navegacin en el carrusel, lo cual
limita si lo que se desea es mostrar cantidades moderadas o
grandes de elementos
La carga de imgenes posee una mayor gestin del ancho de
banda o de uso de procesamiento en comparacin al despliegue
5.5. Carrusel 119

de texto. Esto limita a evitar las imgenes de altas resoluciones

y calidades al a hora de incorporarlas al carrusel
(Hassan, 2012) (Tidwell, 2011) (Welie, 2015)
5.6 Filas en Rayas
En sitios web y aplicaciones suele mostrarse resultados mediante

tablas, estas en ocasiones se vuelven visualmente pesadas ya que su
contenido es extenso y difcil de interpretar a la vez. Esto aunado
que actualmente se tiene a mostrar mltiples tipos de informacin en
los resultados desplegados en tablas (imgenes, texto u objetos entre
otros), genera an ms sobrecarga visual. El patrn Fila en Rayas uti-
liza combinaciones de colores para diferenciar las filas contenidas en
una tabla, lo que facilita al usuario identificar los contenidos de una
fila como pertenecientes a ese registro.

Este patrn se utiliza en la mayora de pginas web y sistemas de in-

formacin. Normalmente la seleccin de colores es de dos, adems
de ser colores suaves y claros como el gris claro y el blanco, esto para
evitar generar estrs visual en el usuario y adems de no competir con
los colores de fuentes e imgenes. La implementacin de estas com-
binaciones de colores pueden en ocasiones remplazar los mrgenes y
encabezados de las columnas, lo que genera una vista ms limpia de la
informacin. Es importante destacar que dichos colores se intercalan
entre filas para generar el efecto deseado
5.6.1 Ventajas
Facilita la identificacin de los resultados contenidos en una

tabla
Reduce la implementacin de bordes y encabezados de colum-
nas lo que genera una interfaz minimalista
5.6.2 Desventajas
Las filas muy estrechas verticalmente pueden generar un efecto

visual negativo, ya que generan una sobrecarga visual.
El patrn puede llegar a ser innecesario en casos en los que
hayan muy pocos elementos que mostrar en el sistema (3 o 4) o
los elementos posean pocas columnas (2 o 3) con escasa infor-
macin.
Si se utilizan combinaciones de colores muy llamativos puede
generar un efecto negativo de respuesta por parte del usuario.
(Tidwell, 2011) (Welie, 2015)
5.6. Filas en Rayas 121

5.7 Listas en Cascada
Al implementar el patrn de Listas en Cascada se puede visualizar

y seleccionar informacin jerarquizada de una manera que se puede
visualizar toda la jerarqua de dicha seleccin. El patrn imple-
menta una secuencia de listas, alineadas preferiblemente de izquierda
a derecha, donde la lista que se encuentra ms a la izquierda repre-
senta el elemento padre de la informacin, seguidamente se acomodan
los descendientes hacia la derecha respectivamente segn su nivel en
la jerarqua. Al seleccionar un elemento de la lista padre aparecern
los elementos hijos en la lista inmediata a su derecha y as sucede
progresivamente con las dems hasta llegar al ltimo nivel.
Este tipo de patrn es particularmente til en sistemas de instalacin
de programas y software que posea niveles de personalizacin avan-
zados, como editores de texto y exploradores de archivos. Las listas
anidadas pueden combinarse con patrones de rejillas de miniaturas
para generar una vista de explorador de archivos. En caso de ambi-

entes mviles que poseen un limitado espacio, se puede implementar

este patrn desplazando las listas una vez que se haya seleccionado
el elemento de la lista que se encuentra en pantalla; en estos casos
se debe contar con opcin de regresar en la jerarqua de listas para
cambiar la opcin seleccionada en el nivel anterior.
5.7.1 Ventajas
Permite navegar claramente entre jerarquas de informacin de-

jando en claro siempre cual ha sido el camino tomado y permi-
tiendo ver las opciones de cada nivel de la jerarqua de listas
seleccionado.
til en muchos programas con alto nivel de personalizacin y
grandes cantidades de opciones como software de ofimtica y
manipulacin de imgenes.
5.7.2 Desventajas
Este patrn en poco prctico cuando se cuentan con niveles de

jerarqua relativamente pequeos.
El implementar este patrn en sistemas de jerarquas muy am-
plias puede generar vistas muy amplias lo que puede generar
confusin o sobrecarga visual.
(Neil, 2012) (Tidwell, 2011)
_figures/ejemplo_listas_cascada.png
5.7. Listas en Cascada 123

5.8 rbol en Tabla
El patrn posee las ventajas de presentacin de informacin que

posee
la herramienta de tabla y la disponibilidad de acceso a la informacin

contenida en el disco que presenta el rbol de archivos. Esta tcnica
presenta la posibilidad de visualizar el contenido de las carpetas selec-
cionadas del rbol de carpetas, esto a modo de tabla. | Se implementa
este tipo de patrones en muchos sitios web de correo, exploradores
de archivos, aplicaciones de base de datos. Es importante destacar
que la mayora de programas informticos que se encargan de modi-
ficar o editar archivos como por ejemplo archivos de texto, imgenes
y msica entre otros, poseen una funcionalidad para abrir archivos del
formato que trabajan, estas aplicaciones en muchas ocasiones imple-
menta este patrn con muy buenos resultados.
5.8.1 Ventajas
Combina la versatilidad del rbol de archivos con la facilidad

de despliegue de informacin de las tablas
Permite mostrar gran cantidad de elementos aun en entornos de
espacios reducidos.
El componente de rbol de carpetas facilita la navegacin en-
tre contenidos de un sitio o archivos de un computador de una
manera rpida.
5.8.2 Desventajas
Presenta un nivel de complejidad al usuario mayor que los otros

patrones, lo que puede requerir ms tiempo para familiarizarse
con el sistema.

Es poco funcional en sistemas y pginas que posean un con-

tenido indexado de manera jerrquica.
(Oracle, 2015) (Tidwell, 2011)
5.9 Fila de Nuevo tem
La principal funcin de este patrn es brindar al usuario una manera

rpida y fcil de crear nuevos elementos de un tipo en particular, pu-
diendo agregar nuevos atributos al mismo con la mnima cantidad de
pasos. Fila de nuevo tem (New-Item row) se aplica cuando los ele-
mentos son mostrados en tablas, listas o arboles de jerarqua, en este
punto debe bastar con una accin sencilla para que el usuario pueda
agregar un nuevo elemento a cualquier estructura de datos, dicha agre-
gacin deber venir acompaada de un corto proceso en el cual el
usuario le da atributos personalizados a dicho elemento. Se puede
apreciar la aplicacin de este mtodo en la mayora de software de
5.9. Fila de Nuevo tem 125

ofimtica como Microsoft Excel, Power Point, Word, donde con un

simple clic o presionar una tecla crea una nueva diapositiva o celda
en la tabla; adems este patrn est incorporado en las funciones de
guardar y abrir en Microsoft Windows, donde el usuario al guardar
o abrir un documento puede crear nuevas carpetas y nombrarlas; la
carpeta y el archivo a guardar en este caso son los nuevos elementos
y el nombre de ambos sera el atributo a personalizar.
5.9.1 Ventajas
Agiliza el proceso de trabajo del usuario, permitiendo crear sin

mucho esfuerzo nuevos elementos en su estructura de datos.
Es intuitivo y requiere un mnimo aprendizaje para su uti-
lizacin.
Evita saltar a otras ventanas para observar el resultado del ob-
jeto creado
5.9.2 Desventajas
El patrn se presta para la creacin de elementos de manera

errnea ya que los mtodos abreviados de creacin de elemen-
tos pueden utilizarse por error durante el trabajo regular con la
interfaz.
El carcter minimalista del patrn reduce la cantidad de infor-
macin que indica el tipo de contenido debe agregarse en cada
campo del nuevo elemento, lo que puede generar errores de
tipo.
5.10 Bibliografa
Hassan, Y. (09 de 11 de 2012). http://www.human-

computer.net/. Obtenido de http://www.human-
computer.net/blog/2012/11/patrones-de-diseno-de-interaccion/

Neil, T. (2012). Mobile Design Pattern Gallery: UI Patterns for

Mobile Applications. Canada: OReilly Media, Inc.
Oracle. (12 de 04 de 2015). Tree Ta-
ble Hierarchies Pattern Set. Obtenido de
http://www.oracle.com/webfolder/ux/applications/fusiongps/patterns/content/hier
Tidwell, J. (2011). Designing Interfaces. Canada: OReily Me-
dia, Inc.
Welie, M. v. (12 de 04 de 2015). http://www.welie.com/.
Obtenido de http://www.welie.com/patterns/index.php
5.10. Bibliografa 127


CHAPTER 6
Acciones y comandos
Recopilado por: Mauricio Gonzlez Snchez y Jos Pablo Hernn-

dez Hernndez
6.1 Grupos de Botones
En esta tcnica se presentan acciones relacionadas como un pequeo

grupo de botones, alineados y con tratamientos grficos similares.
Tambin, se pueden crear mltiples grupos si hay ms de tres o cuatro
acciones.
El grupo de botones ayuda a hacer una interfaz auto-descriptiva. Gru-
pos bien definidos de botones son fciles de distinguir en un dis-
eo complejo, y como son bastante visibles, comunican al instante
la disponibilidad de esas acciones.
6.1.1 Caractersticas Generales
Primero se debe determinar el grupo de los botones a mostrar. Se

deben etiquetar con verbos cortos pero sin ambigedades o frases
verbales, y no hay que utilizar vocabulario especializado a menos
que los usuarios lo esperen. No se deben mezclar los botones que
129
afectan a cosas diferentes o tienen distinto alcance, estos se deben

separar en diferentes grupos. Todos los botones del grupo deben tener
el mismo tratamiento grfico (bordes,color,altura, anchura, estilo de
iconos, efectos dinmicos).
Se pueden alinear en una sola columna, o colocarlos en una sola fila,
si no son demasiado grandes. Si todos los botones de un grupo actan
sobre el mismo objeto u objetos, se debe poner el grupo de botones
a la izquierda o a la derecha de los objetos. Se podra poner debajo
de los objetos, pero los usuarios tienen a menudo a ver un punto-
ciego en la parte inferior de los elementos de interfaces de usuario
complejas, como las listas de varias columnas y rboles.
6.1.2 Ventajas y Desventajas
Es preferible el uso del patrn cuando hay muchas acciones que

mostrar en la interfaz. Se recomienda que todos los botones estn
visibles siempre, sin embargo debe procurarse no saturar la interfaz
para evitar utilizar mas espacio del necesario.
Los grupos de botones bien definidos los hace ms visibles y fciles
de utilizar dentro de una interfaz compleja. Si un grupo de botones ac-
ta sobre un mismo tipo de objeto, este puede ser colocado a los lados
del objeto; sin embargo debe procurarse que no esconda elementos
que usualmente estn presentes en interfaces de usuario complejas.
6.1.3 Ejemplos
Fig. 6.1: Figura 1
130 Chapter 6. Acciones y comandos

Fig. 6.2: Figura 2
6.1. Grupos de Botones 131

6.2 Herramientas Flotantes
Las herramientas flotantes consisten en colocar los botones y otras

acciones junto a los elementos sobre los que actan, pero ocultos hasta
que el usuario pase el puntero sobre ellos.
Se debe disear cada elemento o rea flotante con suficiente espacio

para mostrar todas las acciones disponibles. Se deben ocultar aquellos
que desordenen demasiado la interfaz, y se mostrarn slo cuando el
usuario pasa el puntero del ratn sobre el rea en cuestin.
Se debe responder rpidamente al puntero del ratn, y no es adecuado
utilizar transiciones animadas, simplemente se deben mostrar las her-
ramientas de inmediato, y se deben esconder inmediatamente cuando
el usuario mueve el puntero fuera del rea del elemento. Del mismo
modo, nunca se debe ampliar el rea flotante o reorganizar la pgina
cuando el usuario pasa el puntero sobre ella. La idea es hacer que
la accin de flotar lo ms ligera y rpida posible, de manera que el
usuario puede acceder fcilmente a las herramientas necesarias.
Si el rea flotante es un elemento de una lista, es posible que se desee
resaltar el elemento, cambiando su color de fondo o dibujar un borde
alrededor. El acto de mostrar las herramientas llevarn los ojos del
usuario a esa zona, pero resaltando el tema lo har an ms.
Es comnmente utilizado en interfaces que poseen listas y se mues-

tran las acciones en cada uno de los elementos. Posee ventaja con
respecto a otros tipos de contenedores de acciones (Action Panel, List
Inlay), que tienen botones que se repiten para cada elemento. No es
muy viable utilizarla en interfaces tctiles ya que requieren que se
seleccione el elemento deseado para mostrar las opciones.

6.2.3 Ejemplos
Fig. 6.3: Figura 3
Fig. 6.4: Figura 4
6.3 Panel de Accin
Tambin conocidos como paneles de tareas. Los paneles de acciones

son esencialmente mens que el usuario no necesita mostrar, ellos
siempre estn visibles en la interfaz principal. Son un sustituto ele-
gante para las barras de herramientas cuando las acciones se describen
6.3. Panel de Accin 133

mejor verbalmente que visualmente. En lugar de usar mens, se pre-

sentan un gran grupo de acciones relacionadas en un panel que los
organiza y est siempre visible.
Es preferible usarlo cuando las acciones (para una lista de elementos)

son demasiadas para agregarlas en forma de Herramientas Flotantes,
pero no se quiere agregar una barra de men para contenerlas. Las
acciones del panel se pueden estructurar de diferentes formas:
Listas simples
Listas con columnas mltiples
Listas categorizadas
Tablas o cuadrculas
rboles
Los paneles que se pueden cerrar
Cualquier combinacin de estos en un panel
El Panel de Accin hace que las acciones estn siempre visibles, per-
mite tener un mayor espacio de interfaz disponible y libertad de pre-
sentacin. El Panel de Accin suele necesitar mucho espacio de una
interfaz por lo que no siempre es la mejor opcin para dispositivos
pequeos.

Fig. 6.5: Figura 5
Fig. 6.6: Figura 6
6.3. Panel de Accin 135

6.3.3 Ejemplos
6.4 Botn hecho Prominente
En esta tcnica se pone el botn que finaliza una transaccin al final

del flujo visual; este debe ser grande y bien etiquetado.
El botn con que finaliza la transaccin debe colocarse al final del

flujo visual debe ser grande y estar bien rotulado. Es preferible utilizar
este patrn cada vez que se necesite un botn Finalizar, Enviar, OK
o Continuar.
Para rotular estos botones es recomendable utilizar palabras que defi-
nan exactamente el procedimiento a realizar. Es usual encontrar este
tipo de botones ubicados luego del ltimo paso del procedimiento y
alineados a la derecha de la pgina.
Se recomienda posicionar el botn exactamente despus del ltimo
paso del procedimiento en cuestin, ya que puede que el usuario no
lo encuentre y no se finalice el proceso.
El tener un ltimo paso en la transaccin da el sentido de terminacin.

El usuario entiende que la transaccin se realizar cuando se oprima
el botn. Este ltimo paso debe ser muy obvio. Ofrece al usuario la
posibilidad de realizar sus procesos de forma fluida y continua evi-
tando detenciones no deseadas para buscar el botn para finalizar la
accin.

Fig. 6.7: Figura 7
Fig. 6.8: Figura 8
6.4. Botn hecho Prominente 137

6.4.3 Ejemplos
6.5 Items de Men Inteligentes
La tcnica de items u opciones de men inteligentes consiste en cam-

biar las etiquetas de los men dinmicamente para mostrar precisa-
mente lo que ellos hacen cuando son invocados.
Los elementos de men que dicen exactamente lo que van a hacer
hacen la interfaz de usuario auto-explicativa. El usuario no tiene que
detenerse y averiguar qu objeto se ver afectado. Es tambin menos
probable que haga accidentalmente algo que no tena la intencin de
hacer. Por lo tanto, fomenta la exploracin segura.
Cada vez que el usuario cambia el objeto seleccionado (o documento

actual, ltima operacin de deshacer, etc), se deben cambiar los ele-
mentos del men que operan en l para incluir los detalles especficos
de la accin. Obviamente, si no hay ningn objeto seleccionado del
todo, se debe desactivar la opcin del men, lo que refuerza la conex-
in entre el elemento y su objeto.
Inclusive, este patrn tambin podra funcionar para las etiquetas de
botones o vnculos, o cualquier otra cosa que es un verbo, en el con-
texto de la interfaz de usuario. Las acciones a las que se le aplica este
patrn suelen ser especficas para cada tipo de elemento que posee la
interfaz.
Este patrn tambin puede ser aplicado en botones, vnculos o casi

cualquier elemento de la interfaz sea sealizado con un verbo. Debe
estar bien definido el elemento de la interfaz que se ha seleccionado y
definir correctamente las acciones que aplican al elemento, esto para
evitar que el usuario aplique estas acciones en elementos no deseados.

6.5.3 Ejemplos
Fig. 6.9: Figura 9
6.6 Vista Previa
Esta tcnica muestra a los usuarios una vista previa o resumen de lo

que va a pasar cuando se realiza una accin.
Una vista previa ayuda a evitar errores. Un usuario puede haber
cometido un error, o que pudo haber malinterpretado algo que dio
lugar a la accin de que se trate. Por lo que mostrar un resumen o
una descripcin visual de lo que est a punto de suceder, le da una
oportunidad de volver atrs y corregir cualquier error. La vista previa
tambin pueden ayudar a las aplicaciones a ser ms auto-descriptivas.
6.6. Vista Previa 139

Fig. 6.10: Figura 10
Justo antes de que el usuario realice una accin, se debe mostrar toda
la informacin que le de una visin clara de lo que est a punto de
suceder. Si se trata de una vista previa de impresin, se debe mostrar
cmo se vera la pgina en el tamao de papel elegido, y si es una op-
eracin sobre una imagen, se debe mostrar un primer plano de cmo
se ver la imagen, y si se trata de una transaccin, se debe mostrar un
resumen de todo lo que el sistema sabe acerca de esa transaccin.
Mostrar lo que es importante, ni ms ni menos. Se debe dar al usuario
una forma de ejecutar la accin directamente desde la pgina de vista
previa. No hay necesidad de hacer que el usuario cierre la vista previa
o navegue a otro lugar. Del mismo modo, se debe ofrecer al usuario
una forma de volver atrs.
Se utiliza cuando el usuario esta a punto de realizar una accin muy

pesada y se desea tener una vista previa para comprobar que lo que

esta haciendo esta correcto.Puede poseer opciones adicionales a las

que ofrece el programa tales como cambios visuales, como aplicar un
filtro a una foto, o revisiones generales (revisiones de texto).
Previene al usuario de errores, al mostrarle un resumen o una descrip-
cin visual de lo que esta realizando, se le brinda la opcin de corregir
los errores. En caso de que la vista previa muestre informacin incor-
recta o esta no sea correctamente mostrada puede impulsar al usuario
a realizar una accin de una manera no deseada o hasta que no la
realice del todo.
6.6.3 Ejemplos
6.7 Indicador de Progreso
El indicador de progreso muestra al usuario cuanto progreso fue al-

canzado en una operacin que consume mucho tiempo. Esta tcnica
6.7. Indicador de Progreso 141

se utiliza en acciones que consumen mucho tiempo (ms de 2 segun-

dos) o para acciones que se ejecutan en segundo plano (background).
Se puede mostrar un indicador animado de cunto progreso a sido
realizado. Estudios muestran que si los usuarios ven un indicador de
cunto falta, ellos tienden a ser ms pacientes. Este elemento le dice
al usuario:
Qu est sucediendo.
Qu proporcin de la operacin ha sido completada
Cunto tiempo falta
Cmo detenerlo
El usuario se siente impaciente cuando parece que la aplicacin no
hace nada. Aunque el puntero cambie por un reloj, el usuario no
quiere esperar por un tiempo indeterminado.

6.7.1 Ejemplos
6.8 Cancelabilidad
La cancelabilidad consiste en proporcionar una forma de cancelar al

instante una operacin que consume tiempo, sin efectos secundarios.
Una operacin que consume tiempo interrumpe la interfaz de usuario,
o se ejecuta en segundo plano, por ms tiempo de dos segundos o
menos; por ejemplo, cuando se imprime un archivo, consultar una
base de datos, o cargar un gran archivo.
Alternativamente, el usuario se dedica a una actividad que cierra lit-
eralmente o aparentemente las dems interacciones con el sistema,
6.8. Cancelabilidad 143

como por ejemplo cuando se trabaja con un cuadro de dilogo modal.

Los usuarios cambian de opinin. Una vez que se inicia una operacin
que consume tiempo, un usuario puede querer detenerla, especial-
mente si un indicador de progreso le dice que va a tomar un tiempo.
O el usuario puede haberla iniciado por accidente.
La cancelabilidad ayuda a la prevencin y recuperacin de errores, el
usuario puede cancelar algo que sabe que va a fracasar, como la carga
de una pgina de un servidor web que se da cuenta que esta cado. En
cualquier caso, el usuario se sentir mejor acerca de la exploracin
de la interfaz y probar cosas si sabe que todo es cancelable. Esta
tcnica alienta la exploracin segura, que a su vez hace que la interfaz
sea ms fcil y divertida de aprender.
6.8.1 Ejemplos

6.9 Deshacer multinivel
La tcnica de deshacer multinivel provee una forma de deshacer f-

cilmente una serie de acciones ejecutadas por el usuario.
Generalmente esta tcnica se aplica en interfaces complejas.Interfaces
de usuario ms complejas que la simple navegacin o formulario.
Esto incluye los lectores de correo, software de base de datos, her-
ramientas de autor, software de grficos y entornos de programacin.
En concreto, se espera que este tipo de cambios sea posible en la
mayora de las aplicaciones:
Ingreso de texto para documentos u hojas de clculo
Transacciones de bases de datos
Las modificaciones a las imgenes o lienzos de pintura
Disposicin cambios-posicin, tamao, orden de apilamiento,
o aplicaciones grficas
6.9. Deshacer multinivel 145

Las operaciones de archivo, como eliminar o modificar archivos

Creacin, supresin o reorganizacin de objetos tales como
mensajes de correo electrnico o de clculo columnas de hoja
Cualquier cortar, copiar o pegar elementos
Esta habilidad de deshacer una larga secuencia de operaciones le per-
mite al usuario sentir que la interfaz es segura de explorar.
De esta forma el usuario puede aprender de la interfaz, y experimentar
con ella con la confianza que cualquier operacin equivocada puede
ser deshecha.
6.9.1 Ejemplos
6.10 Historia de Comandos
Con la tcnica del historial de comandos conforme el usuario ejecuta

acciones, se mantiene un registro visible de lo que fue hecho, a qu y
cuando.

Esta tcnica generalmente se usa cuando el usuario ejecuta secuen-

cias complejas de acciones, ya sea a travs de un interfaz grfica o
mediante la lnea de comandos. En editores grficos y los ambientes
de programacin se usa comnmente esta tcnica.
Algunas cosas que puede necesitar el usuario son:
Repetir una accin o comando hecho anteriormente, o que no
recuerda bien.
Recordar el orden en que algunas acciones fueron hechas.
Repetir una secuencia de operaciones, originalmente realizadas
en un objeto, sobre otro objeto.
Mantener una bitcora de sus acciones, para propsitos legales
o de seguridad.
Los ordenadores son buenos para mantener un registro exacto de las
medidas adoptadas; la gente no lo es, hay que tomar ventaja de eso.
6.10. Historia de Comandos 147


6.10.1 Ejemplos
6.11 Macros
Las macros son acciones simples compuestas de otras acciones ms

pequeas. Los usuarios pueden crearlas agrupando secuencias de ac-
ciones.
Este mecanismo se utiliza cuando el usuario quiere repetir una larga
secuencia de acciones o comandos. Por ejemplo, pasar a travs de
una lista de archivos, imgenes, registros de una base de datos, u otros
objetos; haciendo las mismas cosas en cada objeto.
Los macros pueden tener parmetros que pueden ser usados para
modificar su aspecto y su comportamiento.
Pero los macros adems pueden tener un conjunto de funciones y
algoritmos propios que les pueden otorgar una funcionalidad pre-
definida y/o modificable.
El mecanismo consiste de dos operaciones: definir la macro y ejecutar
la macro.
Las macros ayudan a que el usuario trabaje ms rpido y al mismo
tiempo disminuyen la cantidad de errores de digitacin.
Al comprimir una larga secuencia de acciones en un sola, el usuario
puede mantener su concentracin en la meta a largo plazo en lugar de
preocuparse en los detalles.
6.12 Bibliografa
[1] Jos Luis Abreu Len. (2014). Macros. 14/04/2015, Obtenido de

http://arquimedes.matem.unam.mx/Descartes4/doctec/doc/Macros.html
[2] Vista Previa. 19/04/2015, Obtenido de http://ui-
patterns.com/patterns/LivePreview
6.11. Macros 149


6.12. Bibliografa 151


CHAPTER 7
Formularios y controles
Recopilado por: Edgar Bello y Jos del Valle
7.1 Forgiving Format (Olvidando el For-

mato)
Este patrn se refiere a que el usuario pueda ingresar informacin sin

necesidad de tener un formato especfico, el sistema analiza y utiliza
el formato ms adecuado dependiendo del ingreso del usuario, as
el usuario no tiene que preocupar se por el formato, o que tenga que
esperar mensajes de error por medio del formato que ingreso. Adems
el diseador ahora espacio por medio de que no tiene que tener varias
entradas que le pidan informacin al usuario sino solo una entrada
general. Este patrn tiene la caracterstica que se da cuando varias
entradas tienen una accin que llevan a lo mismo, como por ejemplo
buscar por nombre, apellido o nmero de cdula, al final dan con el
mismo Usuario.
153
7.1.1 Ventaja
En vez de utilizar varios formularios que al final den la misma infor-

macin, se utiliza uno que pueda aceptar las entradas de los dems y
as se ahorra espacio en la interfaz y tiempo de llenado para el usuario.
7.1.2 Desventaja
No son buenos para casos donde se necesite algo especfico, o la in-

formacin que se busca no sea de fcil acceso, por lo que dividir entre
diferentes formularios podra facilitar el ingreso o bsqueda.
7.1.3 Ejemplos
1. En este ejemplo se muestra cmo se pueden ingresar nombres

y tambin cdigos postales (nmeros), el sistema define in-
teligentemente que es de lo que se le esta ingresando y escoge
el formato requerido.
2. En este ejemplo se puede ver como en web hay varias empresas

que utilizan este patrn como en este caso Facebook donde si
uno ingresa el nombre, el apellido, el correo entre otros, este
nos busca la persona que intentamos ver, como se puede ver
en el ejemplo no se necesita tener un formato en si el sistema
inteligentemente lo averigua y busca lo solicitado.
154 Chapter 7. Formularios y controles

7.2 Structured Format (Formato Estruc-

turado)
Este patrn de diseo, explica que cuando un usuario necesita ingresar

cierta informacin con un tipo de estructura diferente o especifico, se
puede utilizar otras entradas y acomodar las de forma que el usuario
pueda ver el formato de una forma simple y ligera, as el usuario no
se preocupa tanto por como es el formato.
7.2.1 Ventaja
El usuario puede ver rpidamente que es lo que se le solicita, como

cuando se va a ingresar un numero de telfono o una cdula, donde se
puede dividir en diferentes grupos de nmeros, as el usuario sabe el
tamao que busca el formato de una forma rpida y sencilla.
7.2.2 Desventaja
Este patrn solo sirve para grupos con informacin estructurada de

una forma igual, no se puede hacer general ya que puede haber grupos
donde no se utilicen los telfonos o cdulas con el mismo formato.
7.2. Structured Format (Formato Estructurado) 155

7.2.3 Ejemplos
1. Se muestra como se estructura el nombre, la fecha de

nacimiento, la cdula y la tarjeta de crdito para que el usuario
vea como se dividen las partes.
_figures/ejemplo2.png
2. Otro ejemplo es cuando ingresamos la clave de algun soft-

ware, muchos utilizan estructuras para que el usuario conozca
la forma de la clave.

7.3 Fill-in-the-Blanks (Llenar espacios

en blanco)
Se utiliza cuando se quiere informacin del usuario que se puede ir

llenando de forma secuencial conforme a las entradas. Se busca que
el usuario pueda ser guiado de una forma clara a la hora de llenar
los espacios en blanco conforme a lo que se le solicita al usuario. Se
utilizan muchas etiquetas para ir guiando al usuario.
7.3.1 Ventaja
Sirve para aclarar que tiene que llenar el usuario mediante una gua
rpida con etiquetas fciles de colocar, adems de que no sobrecargan
el espacio de los formularios.
7.3.2 Desventaja
No son muy tiles cuando se busca llenar muchos espacios donde

algunos no son necesarios.
7.3.3 Ejemplos
1. En el siguiente ejemplo se muestra como el usuario va llenando

espacios en blanco con la intencin de poder llenar un contrato.
2. En este ejemplo se puede ver como el usuario va llenando las
compras para que luego el sistema le indique el costo, se va
guiando al usuario con los espacios en blanco as el usuario
puede ver que est haciendo y de donde vienen los precios.
7.3. Fill-in-the-Blanks (Llenar espacios en blanco) 157


7.4 Input Hints (Ayuda en las entradas)
Son ayudas extra visibles sobre o debajo de espacios de ingreso en

blanco, esto para que el usuario tenga mejor conocimiento de que es
lo que se le est pidiendo. Lo que se busca es poner una pequea
explicacin o tambin ejemplos de lo que se espera en la entrada,
tambin se utilizan para dar informacin extra de lo que se va a utilizar
de la informacin, por ejemplo la privacidad de la clave o formato de
la clave.
7.4.1 Ventaja
Deja un poco ms claro que es lo que el usuario debe ingresar evitando

errores.
7.4.2 Desventaja
Puede sobrecargar los espacios de ingreso de informacin, adems de

que depende del espacio pueden estar de ms.
7.4.3 Ejemplos
1. Se muestran ayudas de texto debajo de las entradas para que

el usuario tenga ms informacin tanto de lo que va a ingresar
como de informacin de inters del contacto como seguridad
de su informacin.
2. En este ejemplo se puede ver como al ingresar un usuario a una
pgina o un sistema, la informacin del usuario puede tener un
formato donde se puede dar un mensaje de ayuda al usuario
debajo de las entradas, o tambin se puede redirigir al usuario
a otra pgina que le de ayuda a su problema.
7.4. Input Hints (Ayuda en las entradas) 159


7.5 Input Prompt (Entradas con pre in-

gresado de ayuda)
Cuando las etiquetas de las entradas no son 100% claras, se utilizan

palabras o frases pre-seleccionadas en las entradas para dejar ms
claro lo que se necesita en cada entrada. Muchas veces el usuario
no entiende con solo nombrar el formato, tambin necesita de ejem-
plos para que pueda ver y entender de forma fcil lo que se le est
pidiendo y con el formato. Este patrn ayuda a ahorrar espacio dando
el ejemplo en el mismo lugar donde el usuario va a ingresar informa-
cin.
7.5.1 Ventaja
Cuando un usuario no est seguro de lo que debe de ingresar, se puede

mostrar un pequeo ejemplo bsico de lo que debera de ingresar con
el formato requerido. Puede ser un texto, nmeros, correos, entre
otros, a un color diferente u otras formas. Lo que se busca es un
rpido reconocimiento de lo que el usuario debera de ingresar sin
que tome mensajes o muchas otras etiquetas que puedan sofocar la
interfaz del usuario, sirve en espacios pequeos donde se puede meter
informacin con formatos definidos.
7.5.2 Desventaja
No toda entrada necesita tanta explicacin, si se manejan mal se sobre

carga la interfaz de informacin innecesaria.
7.5.3 Ejemplos
1. Se muestra como se utiliza texto pre ingresado en las entradas

para indicar a los usuarios como debe ser la informacin que
se le est pidiendo, adems ayuda a mostrar la estructura de la
informacin.
7.5. Input Prompt (Entradas con pre ingresado de ayuda)

161
2. En este caso cuando un usuario intenta reservar una habitacin

en un hotel, se le pide informacin que en las partes de entrada
se puede ver un ejemplo o una leyenda que le indique al usuario
que es lo que se interesa ingresar en el espacio, como tambin
el formato de lo deseado.
7.6 Password Strength Meter
Este patrn busca darle a conocer al usuario que tan buena es la con-
trasea que est ingresando. Cuando un usuario ingresa una con-

trasea sin este patrn, no se da cuenta de que tan segura puede ser
su contrasea, lo nico que lo puede ayudar es el formato de la con-
trasea en s, pero puede ser tan fcil como el usuario lo permita.
Cuando se le muestra al usuario que tan segura es la contrasea que
acaba de escribir de una forma rpida y sencilla, el usuario puede
cambiar su contrasea o buscar agregarle dificultad por medio de for-
matos ms difciles, as garantizando que las contraseas no sean de
fcil acceso.
7.6.1 Ventaja
Permite que el usuario vea rpidamente que tan fuerte, as el usuario

no tiene que esperar y ver errores hasta despus de ingresar toda la in-
formacin. Esto permite que el usuario se concentre en una sola tarea
y cuando ya termine con la parte de la contrasea pueda continuar
con lo dems, sabiendo que la nueva contrasea es suficientemente
segura.
7.6.2 Desventaja
Un problema que se da es que por buscar hacer la contrasea con

mayor dificultad y mayor seguridad, puede que el usuario le cueste
ms recordar la contrasea y olvide detalles de la estructura haciendo
que tenga que volver a ingresar una nueva despus.
7.6.3 Ejemplos
1. Un ejemplo muy comn, es cuando se registra una contrasea

nueva, cuando se digita se muestra que tan segura es la con-
trasea ingresada, informando de inmediato al usuario de que
tan segura puede ser su contrasea, as el usuario se garantiza
una buena contrasea.
2. En el segundo caso se toma como mensaje de la contrasea que
caractersticas debera de tener la contrasea para as mantener
7.6. Password Strength Meter 163

una contrasea mas segura, este indica si debera de tener otros

caracteres.
7.7 Autocompletar
Se autocompletar un campo de texto mientras el usuario escribe en

este, anticipando posibles respuestas y mostrndolas en una lista.

Se utiliza cuando el usuario escribe algo que se puede predecir, como

una URL, nombres, fechas o direcciones. Las predicciones pueden
venir de una lista de bsquedas previas, o de una lista predefinida.
Este patrn facilita el uso de campos de bsqueda de diferentes tipos
o formularios.
El uso de ste patrn ahorra tiempo al usuario, as este no tiene que es-
cribir ms de lo necesario cuando la lista muestra la respuesta que ste
busca, especialmente con URLs muy largas o direcciones de correo
que pueden ser olvidadas, se previenen tambin errores, una hilera de
texto larga tiene mas probabilidades de tener un error, que con en-
tradas autocompletadas no suceden.
En dispositivos mviles es mucho mas til, debido a que escribir en
stos toma mas tiempo y se cometen mas errores que el autocompletar
soluciona, ahorrando tiempo y frustracin.
Tambin est presente en editores de texto y lneas de comandos. A
la hora que el usuario escribe, la aplicacin o consola puede ofrecer
sugerencias para completar lo que se est escribiendo.
Los motores de bsqueda utilizan este patrn desde que se empieza a
escribir, mostrando una lista con sugerencias que otras personas bus-
can o con contenido disponible.
Con cada letra que el usuario escribe, el programa forma una lista de
sugerencias que puedan completar la palabra o lnea de texto, otras
sugerencias pueden ser lineas ingresadas por el usuario previamente,
almacenadas en un historial; pueden ser tambin frases comnmente
ingresadas previamente por otros usuarios; posible contenido siendo
buscado en la pgina, que puede contener la letra o palabra que el
usuario escribe; y por ultimo listas de contactos o correos electrni-
cos.
Presenta las ventajas de que ahorra tiempo y esfuerzo al usuario, re-
cuerda al usuario lneas de texto que tal vez haya olvidado y ofrece al
usuario bsquedas comunes que realizan otros usuarios.
Se debe de ser cuidadoso con el uso de este patrn, ya que el xto
7.7. Autocompletar 165

de las sugerencias depende del algoritmo usado por el programador y

que sugerencias incorrectas podran irritar al usuario.
7.7.2 Ejemplo
Un campo de bsqueda de correos que muestra sugerencias segn las

letras que escribe el usuario.
Un sitio web en el que se buscan tiquetes areos, con dos campos

de bsqueda para ingresar las ciudades de origen y destino, ambas
utilizando el patrn de autocompletar.

7.8 Selector Dropdown
Men en forma de drop-down o pop-up que extiende las capacidades

de seleccin de objetos.
Se utiliza cuando el usuario necesita seleccionar una opcin de un

grupo grande, como la seleccin de colores, una fecha en un calen-
dario o un nmero, entre otros, sin tener que ocupar ese espacio en la
pgina o contenedor principal.
Fciles de entender si provienen de un icono como una flecha o un
cuadro de color, que signifique la apertura del drop down con ms
opciones. Los drop-downs ademas funcionan como una interfaz de
usuario adicional en un espacio pequeo, sin tener que comprometer
la pgina principal, puesto que solo aparecen cuando el usuario lo
desea.
7.8. Selector Dropdown 167

Cuando el drop-down se encuentra cerrado, se muestra un cono pe-

queo con la seleccin o valor actuales, puede tener una flecha a la par
o ser un cono por si solo, siendo clickeado se abrir el selector con
las dems opciones, se cierra al seleccionar una o clickear el cono de
nuevo.
Este debe de ser pequeo y su organizacin visual debe de ser de
formato familiar como una lista, tabla, un calendario, o calculadora.
Links o botones en el selector pueden abrir interfaces secundarias.
El selector puede comportarse de tal manera que muestre las selec-
ciones recientes o mas utilizadas por el usuario.
Ofrece las ventajas de que ahorra espacio en la interfaz, al esconder el
menu y ampla las capacidades de seleccin, dando al usuario muchas
opciones especficas en un espacio dedicado.
No incrementa la usabilidad de la pgina, puesto que a veces puede
ser complicado de usar si no se tiene el cuidado a la hora de colocarlo
en la pgina, y de como ste luzca.
7.8.2 Ejemplo
Un selector de fecha, que aparece al clickear un icono con la forma

de un calendario.
Un men dropdown en una aplicacin mvil, que despliega todas las
selecciones posibles.
7.9 Constructor de listas
Muestra listas de fuente y destino en una misma pgina, y permite al

usuario mover objetos entre las dos listas, arrastrndolos o mediante
botones.

Se utiliza cuando se le solicita al usuario crear una lista de objetos,

seleccionando elementos de otra lista.
Mostrar las dos listas en un solo lugar ayuda al usuario a observar
las dos al mismo tiempo y conocer su estado actual, ademas de evitar
que este tenga que brincar entre diferentes vistas para ver cada lista.
Tambin presenta la ventaja de que facilita la transferencia de datos
entre dos lisas.
Colocando ambas listas (de fuente y destino) una al lado de la otra,
o una debajo de la otra; entre ellas colocar botones para aadir o re-
mover los elementos de ambas listas, o por medio de drag and drop.
Dependiendo de las listas y la funcionalidad, se puede o no eliminar
el elemento de la lista fuente a la hora de agregarla a la de destino.
Es importante que las listas posean seleccin mltiple, permitiendo al
usuario seleccionar muchos elementos en lugar de uno por uno.
7.9. Constructor de listas 169


7.9.2 Ejemplo
Una seleccin de elementos que utiliza drag and drop o botones en

ambos sentidos para agregar o eliminar una imagen de la galera de
destino.
7.10 Buenos valores por defecto
Llenar campos en formularios con valores que el usuario quiere o

podra querer ingresar.
Se utiliza cuando se le solicita al usuario responder preguntas en un

formulario de texto o check-boxes y se quiere reducir el tiempo o
trabajo para los usuarios. Para preguntas tcnicas o semi relevantes el
usuario podra no saber o importarle la respuesta y elegira lo que sea
que el sistema sugiera.
Proporcionar respuestas por defecto es de cuidado, si las respuestas
son sensibles como claves de acceso, gnero de la persona o ciu-
7.10. Buenos valores por defecto 171

dadana. Asumir tales datos podra poner incmodo al usuario, como

por ejemplo un check-box activado por defecto para enviar publicidad
al correo.
Proporcionar respuestas por defecto razonables, se ahorra trabajo al
usuario, as este no tiene que pensar tanto ni escribir una respuesta
completa. Si la respuesta por defecto no es lo que el usuario esperaba,
por lo menos le da una idea a este de que informacin proporcionar.
Rellenar previamente campos de texto, formularios, combo-boxes o
otros controles con un valor por defecto razonable, sugerencias en lu-
gares innecesarios pueden irritar al usuario. Tambin el sistema puede
inferir datos, dada una respuesta del usuario, como por ejemplo, rel-
lenar los campos de ciudad o pas, dado un cdigo postal.
El usuario podra olvidar una respuesta proporcionada por defecto sin
entender las consecuencias de esto, como por ejemplo una pregunta
de seguridad para recuperar una clave.
7.10.2 Ejemplo
Un instalador de una aplicacin, que sugiere por defecto una ruta de

instalacin para sta, con la ventaja de que la mayora de usuarios
nunca cambia esa ruta.
Un sitio web para comprar automviles, el cual por defecto ofrece un
rango de precios y un ao del vehculo determinados.
7.11 Mensajes de error en la misma

pgina
Aparecen mensajes de error en la misma pgina de un formulario, con

indicadores a la par de donde se origina el error.

7.11. Mensajes de error en la misma pgina 173

Se utiliza en formularios donde el usuario pueda ingresar datos que

no son aceptados, cuando se pueda olvidar de llenar un campo, direc-
ciones de correo invlidas, entre otros. Se busca incentivar al usuario
a intentarlo de nuevo. Se busca sealar errores antes de que conviertan
en un problema.
Se facilita al usuario leer el mensaje de error en la misma pgina, y
le permite a este realizar las correcciones de una manera fcil. Aun
mejor es cuando los mensajes de error se encuentran al lado de los
controles donde ocurri el error. Da una idea al usuario de que tipo de
error sucedi, debido a los datos ingresados en un campo en espec-
fico y se evita que se ingresen datos incorrectos que puedan afectar el
funcionamiento de la aplicacin.
Primero que nada, se debe disear el formulario para prevenir errores,
usando los patrones vistos previamente en los campos donde sea nece-
sario. Si ocurre un error, se debe mostrar un mensaje arriba del for-
mulario, aun cuando se coloca un mensaje de error al lado del campo
donde ste se origina. Importante que sea arriba puesto que el usuario
es lo primero que ve. Agregar un cono de alerta para que sea mas re-
conocible y utilizar una letra mas grande en color rojo. Al lado de los
campos que causan el error, se debe poner mensajes mas especficos.
Toda validacin que se pueda hacer del lado del cliente agilizar el
proceso. Los mensajes de error deben ser cortos y detallados, en
lenguaje comn y educados, en caso contrario podran no ser enten-
didos por el usuario, o ser una molestia para ste.
7.11.2 Ejemplo
Una seccin de login o inicio de sesin en un sitio web, que despliega

un error si alguno de los datos ingresados es incorrecto.
Una seccin de creacin de usuario en un sitio web, que despliega un
error si la verificacin de contrasea no coincide.

7.11. Mensajes de error en la misma pgina 175

7.12 Bibliografa
1. Ui-Patterns.com, Forgiving Format, Extrado el dia 11-04-

2015, http://ui-patterns.com/patterns/ForgivingFormat
2. Ui-Patterns.com, Structured Format, Extrado el dia 11-04-
2015, http://ui-patterns.com/patterns/StructuredFormat
3. Ui-Patterns.com, Fillin The Blanks, Extrado el dia 11-04-
2015, http://ui-patterns.com/patterns/FillInTheBlanks
4. Ui-Patterns.com, Input Prompt, Extrado el dia 11-04-2015,
http://ui-patterns.com/patterns/InputPrompt
5. Ui-Patterns.com, Password Strength Me-
ter, Extrado el dia 11-04-2015, http://ui-
patterns.com/patterns/PasswordStrengthMeter
6. Tidwell, J. (2010). Designing interfaces. OReilly Media,
Inc..
7. Getelastic.com, Form Design: 11 Patterns For Ac-
cepting User Input, Extrado el dia 19-04-2015,
http://www.getelastic.com/form-design-11-patterns-for-
accepting-user-input/
8. Imagen logo Universidad Nacional:
http://images.frompo.com/i/una.edu.

CHAPTER 8
Diseo mvil
Recopilado por: Elizabeth Jimnez y Roberto Morales Jimnez
8.1 Filmstrip (Tira de pelcula)
El patrn Filmstrip (Cinta de pelcula) es esencialmente un Carrusel,

se usa para una rpida navegacin con el objetivo que el usuario se
deslice entre las pginas de nivel superior y pueda ver el contenido de
las mismas una a la vez.
Este patrn se asemeja mucho al patrn de navegacin secundaria
Page Carousel (Neil,2012:30).
En dispositivos mviles, una tira de pelcula es de man-
era similar una serie de pantallas, mostrada como una
tira continua, con espacios pequeos o marcadores entre
ellos. Cuando se centra una pantalla en particular, se
llena toda la ventana grfica. (4ourth mobile)
177
Un conjunto de informacin que puede ser presentada como un

conjunto de imgenes para la visualizacin y seleccin
Es soportada en varios sistemas operativos mviles y platafor-
mas de programacin
Una tira de pelcula es de manera similar una serie de pantallas,
mostrada como una tira continua, con espacios pequeos o mar-
cadores entre ellos.
Se utiliza este patrn en particular cuando las informaciones
que se desea presentar son conceptualmente paralelas, es decir
tiene relacin entre ellas.
8.1.2 Ventajas
Fcil deslizamiento entre contenidos.

Una manera sencilla para ver una presentacin de diapositivas.
8.1.3 Desventaja
Puede ser difcil de utilizar este patrn en particular en ciertas

plataformas, tales como dentro de las pginas web, debido a las condi-
ciones de desplazamiento de las mismas.
No se pueden utilizar demasiadas pgina de nivel superior, tambin
los usuarios se podran molestar si la cinta de pelcula es muy larga;
esto debido a que se deber durar ms tiempo para llegar al punto
deseado.
8.1.4 Ejemplos
1. A continuacin se presenta una aplicacin mvil de una tienda

de venta de zapatos para mujer, el cual implementa el patrn
178 Chapter 8. Diseo mvil

de filmstrim (tira de pelcula) para poder desplazarse entre los

diferentes estilos de zapato que la tienda ofrece y as de esta
manera es ms sencilla la visualizacin de los zapatos y pre-
senta la informacin detallada del mismo.
2. Este segundo ejemplo presenta la aplicacin mvil de una ca-
dena de deportes, el cual implementa el patrn para poder de-
splazarse entre las noticias deportivas con el simple acto de
deslizar con el dedo las imgenes presentadas en la tira de
pelcula. De esta manera el usuario puede moverse entre las
noticias de una manera sencilla hasta encontrar una de su in-
ters.
8.2 Bottom Navigation (Navegacin a

pie de pgina)
Crea un conjunto de elementos de men dispuestas verticalmente en

la parte inferior de la pgina, en vez de ocupar demasiado espacio al
tope de la pgina para la navegacin, se puede empujar la navegacin
global a la parte inferior de la pgina para hacer que encaje en un
espacio compacto.
Cabe destacar que este patrn se encuentra estrechamente relacionado
con el patrn Sitemap Footer. ( Tidwell,2011:110)
Vnculos globales de navegacin

Crear un conjunto de elementos de men colocados vertical-
mente en la parte inferior de la pgina.
Para los telfonos mviles con touch screens, resulta muy sen-
cillo el hecho de seleccionar los elementos del men de nave-
gacin.
8.2. Bottom Navigation (Navegacin a pie de pgina) 179


Disminuye la utilizacin del tope de la pgina, empujando los

links de navegacin hacia la parte inferior de la pgina.
8.2.2 Ventajas
Crean en la parte inferior de la pgina el men de navegacin dejando

libre la parte superior de la misma con el objetivo de no interferir con
los contenidos esenciales de la pgina.
En vez de tomar mucho espacio en la parte superior da la pgina, la
cual es la ms valiosa, se desplaza a la parte inferior de la pgina los
links para la navegacin.
8.2.3 Desventajas
Si se abusa de este patrn y se trata de integrar muchos links de nave-

gacin en la parte inferior, podra dificultar la seleccin de los mismos
debido al espacio que existira entre ellos.
8.2.4 Ejemplos
1. El ejemplo que se muestra a continuacin representa una apli-

cacin mvil para la reproduccin de msica, en el men de
8.2. Bottom Navigation (Navegacin a pie de pgina) 181

navegacin a pie de pgina se presentan las opciones de regre-

sar, avanzar y seleccionar una cancin. De esta manera toda
la informacin valiosa de las canciones, lbumes y artistas no
quedan obstruidas.
2. El ejemplo presenta una aplicacin de contenido social, el cual
el usuario en la parte inferior de la pgina puede seleccionar las
diferentes opciones que le permite la aplicacin tales y navegar
por la misma con este pequeo men que simplifica muchas de
las opciones que ofrece y resulta til para la navegacin dentro
de la aplicacin.
8.3 Infinite List (Lista infinita)
La carga inicial de una pgina es rpida y contiene algunos elementos

as el usuario no percibe la espera de cargar todos los elementos de
una vez, cada carga posterior de un nuevo trozo de elementos tambin
es rpido, y el usuario controla cuando necesita cargar ms elemento.
Es muy similar a la lista vertical con la principal diferencia de que
slo una parte de la lista es inicialmente cargada.
En el fondo de una larga lista, se aade un botn para recuperar y
mostrar una menor cantidad de cargas de la informacin y aade a
la vez ms elementos a la lista. El primer conjunto que se muestra
llenar la ventana grfica.
Este concepto del manejo de listas en el campo de la in-
geniera de software es llamada: lazy loading-carga pere-
zosa/diferida.(Neil,2012:94).
Carga y agrega ms elementos a la lista cuando se solicite.

Realiza bsquedas profundas

8.3. Infinite List (Lista infinita) 183


Cuando al cargar una larga lista el conjunto de informacin

es muy grande y se necesite hacer una bsqueda ms adelante
hasta alcanzar el objetivo de bsqueda del usuario.
8.3.2 Ventajas
Despliega inicialmente los resultados de una bsqueda y carga poste-

riormente un nuevo trozo de elementos rpidamente.
El usuario carga los elementos cuando los necesite, controlando de
esta manera el desplegar datos innecesarios y no solicitados.
El usuario nunca tiene que realizar un cambio de contexto Para ir a
una nueva pgina y realizar una nueva bsqueda de nuevos elementos
8.3.3 Desventaja
Muchas listas, como las listas de contactos, pueden existir para el

usuario con casi ningn contenido o con miles de articulos.se deben
tener en cuenta estas consideraciones la hora de seleccionar este pa-
trn, debido a que tiene que saber cmo manejar los dos tipos de
situaciones.( Hoober,2011:72)
8.3.4 Ejemplos
1. A continuacin se presenta la aplicacin mvil de una tienda

departamental la cual vente una serie de artculos relacionada
con la electrnica entre otros. Al lado de cada tem se mues-
tra la opcin de desplegar ms resultados relacionadas con la
bsqueda inicial del usuario.
2. El ejemplo muestra una aplicacin para realizar compras de
contenido musical se despliega un nmero limitado de resulta-
dos y si el usuario necesita cargar ms resultados para encontrar
el lbum de su eleccin.



8.4 Text Clear Button (Botn de limpieza

de texto)
Este patrn est asociado al patrn-clear Entry, los cuales permiten al

usuario remover fcilmente un campo de texto previamente cargado y
evitar la tediosa tarea de borrar letra por letra una cadena de texto.
Borra de un campo de texto con slo pulsar un botn, tpicamente se
posiciona una X o un botn de clear cerca del campo de texto
permitindole al usuario borrar cuando sea necesario.(Ribeiro,2015).
Sencillo de usar
Fcilmente reconocido
Proporcionar un botn que resetea un campo de texto si se nece-
sita en la interfaz mvil.
8.4.2 Ventajas
Ayuda al usuario a borrar de manera sencilla y fcil un campo de

texto.
8.4.3 Desventaja
No tiene una opcin de poder deshacer la accin.
8.4.4 Ejemplos
1. se presenta una simple aplicacin que solicita los datos del

usuario para poder ingresar, si el usuario de equivoca a la hora
de introducir los datos, fcilmente puede presionar el botn que

limpiara el campo de texto y podr continuar ingresando los

nuevos datos,
2.El ejemplo presenta una simple bsqueda que el usuario puede re-
alizar digitando la palabra que necesite buscar, si desea buscar otra
cosa, puede seleccionar el botn con la equis(x) y esto limpiara el
campo de texto para iniciar una nueva bsqueda.
8.4. Text Clear Button (Botn de limpieza de texto) 189

8.5 Richly Connect Apps (Aplicaciones

conectadas)
Dispositivos mviles no puede mezclar arbitrariamente pequeas can-

tidades de informacin de una aplicacin a otra, es por esto que es
necesario apoyar a la aplicacin mvil moviendo los datos de forma
automtica.
Al utilizar un dispositivo mvil el usuario solo puede visualizar una
aplicacin a la vez, es por esto que dentro de la aplicacin mvil se
utilizan enlaces directos a otras aplicaciones. Para esto se necesita
en la aplicacin realizar un seguimiento de los datos que podran ser
estrechamente relacionado con otras aplicaciones y de esta manera
cuando se seleccione y el usuario sea redirigido a otras aplicaciones o
servicios pueda utilizar pueda manejar los datos ah.
El usuario puede ver mltiples aplicaciones mviles a la vez.

Es capaz de realizar varias tareas dentro del contexto de una
misma aplicacin.
Se utiliza cuando se necesitan recursos dentro de la aplicacin,
tales como una cmara o la localizacin.
8.5.2 Ventajas
Elimina la necesidad d cambiar de aplicaciones para realizar distintas

tareas.
8.5.3 Desventaja
Al estar directamente conectas los recursos con la aplicacin, se puede

cargar material que no se deseaba inicialmente.

8.5.4 Ejemplos
1. la aplicacin representada utiliza el patrn de aplicaciones

conectadas para obtener la informacin de la ubicacin de
usuario, esto sin la necesitas de salir de la app actual.
2. En este segundo ejemplo se utiliza el patrn de aplicaciones
conectadas para desde una aplicacin de contenido social se
puede acceder a la cmara para tomar una foto y cargarla al
sitio si as se desea, o bien acceder a la galera del telfono y
cargar la imagen desde ah.
8.6 Vertical Stack - Pila vertical
Ordena el contenido de la pgina mvil en una columna vertical, per-

mitiendo que haya nicamente desplazamiento hacia abajo. Tambin
es llamado lista vertical.
Este patrn se debe usar cuando se disean pginas web para dis-
positivos mviles de distintos tamaos, especialmente si el contenido
est basado en texto y formularios. No es recomendable para aplica-
ciones residentes del dispositivo ya que se puede pasar de una pgina
a otra casi instantneamente, por otro lado las pginas web necesitan
de cierto tiempo para cargarse. Por lo general los vdeos y juegos
tienen un tipo de desplazamiento diferente y no utilizan este patrn.
Los dispositivos mviles tienen diferentes tamaos de ancho, por lo
que cuando se realiza un diseo de anchura fija que es muy grande
para la pantalla del dispositivo se debe desplazar hacia los lados para
poder ver el contenido, pero este tipo de diseo nunca ser tan usable
ni recomendable como permitir al usuario simplemente desplazarse
hacia abajo en la pgina.
8.6. Vertical Stack - Pila vertical 191



Se recomienda poner los tems ms importantes en la parte superior

de la pgina web para que sean ms visibles para los usuarios, y los
tems menos importantes en la parte inferior de la pgina. Se debe
evitar colocar logos, anuncios o barras de herramientas muy grandes
en la parte superior debido a que esto empuja la informacin impor-
tante hacia abajo. Adems, en los formularios se deben colocar las
etiquetas sobre los campos de entrada para ahorrar espacio horizon-
tal.
Es preferible el desplazamiento vertical en una pgina web mvil

muy larga, que tener que esperar tiempos de descarga al pasar de una
pgina a otra. Por esto, una de las principales ventajas de utilizar el
diseo pila vertical es el ahorro de tiempo. Adems, la forma en que
el contenido de la pgina esta organizado permite captar mejor el in-
ters de los usuarios al tener lo ms importante al inicio de sta. Sin
embargo, dependiendo del largo de la pgina web se podra consid-
erar una desventaja cuando lo que le interesa al usuario se encuentra
en la parte final de la pgina y se ve obligado a desplazarse para poder
encontrarlo.
8.6.3 Ejemplos
En el siguiente bosquejo se muestra el diseo de la pgina web mvil

de Yahoo!. Primero se muestra un carrusel de imgenes con las noti-
cias ms importantes que le pueden interesar al usuario. Luego se
muestran otros datos como la ciudad donde esta el usuario y la tem-
peratura, adems de informacin acerca de la bolsa de valores. Final-
mente se muestra una lista de noticias con los titulares y una imagen
donde el usuario se puede desplazar hacia abajo para verlas. El de-
splazamiento hacia los lados no es necesario.
En este otro ejemplo se aplica el mismo patrn, al inicio de la pgina
se muestra el ttulo de una noticia importante seguido de una ima-
gen y una breve descripcin de la misma. Conforme el usuario se


desplaza hacia abajo podr diferentes secciones con tipos de noticias,

por ejemplo las principales noticias, seleccin del editor, entre otras.
8.7 Touch Tools - Herramientas tctiles
Se muestran las herramientas solo cuando se toca la pantalla o se pre-

siona una tecla, las herramientas aparecen en una forma dinmica so-
bre el contenido y desaparecen despus de un tiempo determinado.

Es recomendable utilizar este patrn cuando se disean aplicaciones

que ocupan la pantalla completa del dispositivo, como por ejemplo
vdeos, imgenes, juegos, mapas y libros. Este tipo de contenido
necesita herramientas o controles de navegacin, multimedia, infor-
macin del contenido, etc.
Cuando el contenido de una aplicacin utiliza este patrn se muestra
directamente en pantalla completa y sin adornos. Es importante re-
saltar que tambin existen aplicaciones que dependiendo de la regin
de la pantalla donde se toque pueden aparecer diferentes tipos de her-
ramientas o no aparecer ninguna debido a que pudo haber sido un
toque accidental del usuario.
Las herramientas y controles se deben mostrar en un rea pequea y
translcida que parezca como si estuviera flotando sobre el contenido.
Luego de varios segundos o con otro toque de pantalla las herramien-
tas deberan desaparecer.
En un diseo mvil el espacio y la atencin del usuario son recur-

sos sumamente importantes, por esto la idea de este patrn es que
el usuario no se distraiga viendo los controles o herramientas que po-
dran desviar la atencin del contenido y adems ocupan espacio en la
pantalla. El usuario puede escoger cuando quiere ver las herramientas
o cuando no.
8.7.3 Ejemplos
La siguiente imagen representa el reproductor de msica de un tel-

fono mvil Android Galaxy Ace, donde al tocar la pantalla se mues-
tran los controles para retrasar, reproducir, adelantar o cambiar a un
orden aleatorio las canciones. Para que los controles se vuelven a
esconder se debe tocar otra vez la pantalla.
8.7. Touch Tools - Herramientas tctiles 197


Este bosquejo muestra el visualizador de imgenes de un telfono

mvil Android Galaxy Ace, la imagen se muestra en pantalla com-
pleta y sin ningn adorno sobre ella, pero al presionar la pantalla se
van a mostrar herramientas para aumentar o disminuir el zoom, un
men para compartir o borrar la imagen y otra opcin para ver todas
las imgenes en forma de presentacin.
8.7. Touch Tools - Herramientas tctiles 199

8.8 Thumbnail and Text List - Lista de

miniaturas y texto
Presenta una lista de tems seleccionables, donde cada tem cuenta con
una imagen pequea, texto y tambin puede incluir iconos pequeos
que representan ciertos detalles del tem.
El patrn es muy utilizado cuando se necesita mostrar listas de artcu-

los, listas de contactos, entradas de blogs, vdeos, aplicaciones u otro
tipo de contenido complejo.
Usualmente la imagen se coloca al lado izquierdo del texto. Tambin
se pueden colocar otros marcadores visuales como las estrellas de cal-
ificacin. En un contexto mvil se recomienda usar colores brillantes
y llamativos, esto debido a las pantallas pequeas manejan mejor col-
ores fuertes que las pantallas grandes. En este patrn cada lnea de la
lista debera ser seleccionable, por lo que no solo la imagen o el ttulo
del tem serviran como enlaces.
Las imgenes pequeas dentro de las listas mejoran la apariencia, ayu-

dan a una mejor identificacin del tem y brindan una altura apropiada
para el tamao de cada tem. Al mejorar la diferenciacin entre los
componentes de la listas los usuarios pueden explorar y analizar de
una manera ms rpida y fcil.
Actualmente este diseo es uno de los ms utilizados para mostrar
diferentes tipos de contenidos, muchos sitios web lo usan para pre-
sentar los links a noticias y blogs de forma que se vean mejor y ms
atractivos para los usuarios.

8.8.3 Ejemplos
En el siguiente ejemplo se muestra la aplicacin Play Store de Google

para comprar y descargar otras aplicaciones, juegos, pelculas, msica
o libros. Existen diferentes categoras para descargar aplicaciones, ya
sean gratis o pagadas, pero en todas se utiliza el patrn de lista de
miniaturas y texto. Aqu se puede observar como cada tem de la
lista tiene una imagen que lo identifica, el nombre de la aplicacin, la
compaa que la desarroll, estrellas de calificacin de los usuarios y
un men para instalar o actualizar.
8.8. Thumbnail and Text List - Lista de miniaturas y texto

201
sta imagen es similar a la anterior pero muestra la aplicacin de

Amazon, cuando se desea buscar un producto se mostrar una lista
con una imagen pequea, el nombre y la marca del producto, las es-
trellas de rating del producto y el precio.

8.9 Generous Borders - Bordes gen-

erosos
El objetivo de este patrn es dejar mrgenes grandes y espacios en

blando alrededor de botones, links u otro tipo de control que se pueda
presionar.
Este patrn es apropiado cuando se necesita utilizar botones con eti-

quetas de texto, una lista de tems, links ordinarios basados en texto o
cualquier objetivo tctil que no sea muy grande en la pantalla.
Por lo tanto, este tipo de componentes tctiles deben ser rodeados con
suficiente margen interno, borde y espacio en blanco para que sean
alcanzados con la punta de los dedos. Una manera de hacer esto es
convertir el espacio en blanco en un objetivo tctil, y con esto se gana
ms pixeles de sensibilidad en cada direccin alrededor del botn.
Nunca se debe poner informacin importante (etiquetas o instruc-
ciones) debajo de un elemento de la interfaz que puede ser tocado,
esto debido a que la informacin puede ser tapada por la misma mano
o el brazo del usuario al tratar de presionar el objetivo.
Todava no existe un consenso sobre el tamao ideal para los objetivos
tctiles, pero en libro Designing Gestural Interfaces se menciona la
siguiente frmula: Objetivo = (tamao en pulgadas del objetivo) *
(ancho de la pantalla en pxeles) / (tamao de la pantalla en pulgadas).
En este mismo libro se menciona la tcnica de la punta del iceberg
(iceberg tips), de esta manera los objetivos tienen un rea tctil ms
grande de lo que se ve.
Con este patrn se pretende que los objetivos tctiles sean los suficien-
temente grandes para ser alcanzados por dedos torpes, que suele ser
8.9. Generous Borders - Bordes generosos 203

difcil con botones o links que consisten solamente de texto.

Usando iceberg tips se puede aumentar el tamao del objetivo to-
cable sin necesidad de aumentar el tamao del botn u otro tipo de
componente, con esto se evita tener botones de diferentes tamaos en
la interfaz.
8.9.3 Ejemplos
El siguiente ejemplo es una aplicacin llamada Water Your Body,

utilizada para recordar al usuario beber agua cada cierto tiempo y lle-
var un registro de hbitos al beber agua. En esta aplicacin podemos
ver botones grandes con suficiente espacio en blanco y dejando mr-
genes que facilitan al usuario presionarlos.
La siguiente imagen es de una aplicacin llamada Clean Master
la cual utiliza este patrn de bordes generosos para algunos botones.
Como se puede ver en la imagen cada botn cuenta con mrgenes
grandes que tambin cuentan como rea tctil.
8.10 Loading Indicators - Indicadores de

carga
Mientras una pgina o una seccin de la pgina se carga se debe

mostrar un indicador del progreso en lugar donde aparecer el con-
tenido.
Se debe implementar este patrn cuando un usuario tiene que esperar

cierto tiempo mientras el contenido o una parte especfica de la apli-
cacin se carga, especialmente si la pgina cambia dinmicamente
como respuesta a una accin del usuario.

8.10. Loading Indicators - Indicadores de carga 205


Cargar nuevo contenido en una pgina web de un dispositivo mvil

o una aplicacin con conexin a internet puede ser lento y fallido,
por esto siempre se debe mostrar el progreso de la carga de la pgina
de modo que sea til para el usuario. Conforme el contenido se va
descargando, este se debe ir mostrando los ms rpido posible.
Los indicadores de progreso hacen parecer que el tiempo pasa ms

rpido para el usuario y muestran que algo est pasando en respuesta
a una accin.
8.10.3 Ejemplos
En la aplicacin de Facebook para dispositivos mviles se utiliza este

patrn cuando se quiere actualizar los posts que han hecho otras per-
sonas. Al presionar la pantalla y deslizarla hacia abajo aparecer un
indicador de carga mientras se actualiza.
Este patrn tambin se utiliza en la aplicacin de Youtube, mientras se
carga el video aparecer un indicador y de la misma forma se utiliza
cuando se desean ver los comentarios que han hecho otros usuarios
sobre el video.
8.11 Streamlined Branding - Racional-

izacin de marca
Al usar el logo, los colores u otros elementos de la marca de la or-

ganizacin en una aplicacin o sitio web mvil se deben mantener
pequeos y que sean rpidos de cargar.
8.11. Streamlined Branding - Racionalizacin de marca207



Todas las compaas que tengan un sitio web y pretendan crear una
aplicacin mvil deberan utilizar este patrn de diseo. Lo usuarios
deben ser capaces de identificar a quien pertenece la aplicacin o sitio
web.
Las pantalla mviles no tienen mucho espacio por lo que estas im-
genes deben ser pequeas, las conexiones de red en mviles suelen
ser ms lentas, por esto las imgenes no pueden ser muy pesadas ni
muy grandes de modo que no ocupen mucho espacio en la interfaz.
Se debe considerar crear diferentes versiones de la imagen de la marca
o el logo para los diferentes tamaos de dispositivos mviles. Los
colores de la marca y el tipo de letra se pueden aplicar para el diseo
de la aplicacin mvil. De este modo se ver mucho ms profesional
y con un mejor aspecto.
Al disear un sitio web o aplicacin para mviles se debe tener en
cuenta que el usuario podra utilizarlo en condiciones difciles, como
por ejemplo cuando no hay suficiente luz, cuando se va en vehculo
en movimiento o hay otro tipo de distracciones. Por esto siempre se
debe disear con el texto lo ms legible posible, los colores adecuados
y adaptar el logo o ciertos detalles de la marca a la plataforma que se
va a utilizar.
En estudios de usabilidad las personas responden bien al ver mar-

cas confiables y familiares para ellos. Esto permite que los usuarios
se sientan seguros al utilizar aplicaciones asociadas a compaas de
donde son clientes.
8.11.3 Ejemplos
En este ejemplo podemos ver como Intel adapta el logo y los col-
ores de su marca para que se adapten dependiendo del dispositivo de

donde de acceda, en la primera imagen vemos como se vera desde un

telfono mvil donde las imgenes son ms pequeas para que se car-
guen ms rpido. En la segunda imagen es la vista desde una ventana
en un browser (navegador) donde se cuenta con ms espacio para las
imgenes.
De igual manera en el siguiente ejemplo se muestra una comparacin

entre la vista del sitio web de Microsoft desde un navegador y un tel-
fono. En ambos ejemplos se trata de utilizar las mismas imgenes y
colores, para que de esta manera resultan familiares para los usuarios

sin importar el medio que se utilice para verlas
8.12 Referencias bibliogrficas
Tidwell, Jenifer. (2011). Designing Interfaces, Captulo 10.

OReilly.
Hoober, S., Berkman, E. (2011). Designing Mobile Interfaces.
OReilly Media, Inc.
Neil, Teresa. (2012). Mobile Design Pattern Gallery. OReily.
Saffer, Dan. (2008). Designing Gestural Interfaces: Touch-
screens and Interactive Devices, Captulo 2. OReilly Media,
Inc.
UIPatterns. Design Patterns. Consultado el 15 de abril de 2015,
disponible en: http://ui-patterns.com/patterns

8.12. Referencias bibliogrficas 213

4ourth mobile Patterns Wiki.Consultado el 9 de abril del

2015,de: Film strip/patterns.
Ribeiro, J.,(2015)Design Patterns. Consultado el 9 de abril del
2015,de: Clear Entry

CHAPTER 9
Editores y constructores
Recopilado por: Jos Joaqun Vasquez y Jos Navarro Camareno
9.1 Edicin en el sitio
Este patrn de edicin permite que el usuario tenga la posibilidad de

modificar texto dinmicamente por medio de un mini editor de texto
que se activa sobre el texto original para poder ser editado en el mismo
lugar en el que se encuentra el texto, en el sitio evitando editores
emergentes o incluso otras ventanas de edicin.
La edicin en el sitio funciona bsicamente dando doble click sobre
el texto que se desea editar, el cual va responder con un editor de texto
que contiene el texto original sobre el cual se presion, con el fin de
poder editar ese texto. Para terminar la edicin basta con presionar
algn lugar fuera del editor de texto.
9.1.1 Ventajas:
Esto permite que el usuario tenga mayor agilidad y flexibilidad para

tener acceso a la edicin de los datos. El hacer que el usuario no
vaya a otro lugar para editar el texto original es una gran ventaja ya
215
que reduce la percepcin de una interface complicada al no desviar

su atencin en otros lugares; sino que mantiene el flujo de visin de
trabajo de la aplicacin.
9.1.2 Desventajas:
Un posible inconveniente que puede presentar este patrn de edicin

en el sitio es que si el usuario no est familiarizado con el patrn, no
tendr la nocin de que puede editar el contenido que est teniendo
acceso; adems de esto para algunos casos en los que el texto es muy
complejo o con cierta justificacin se le puede dificultar el marcado de
un una palabra en particular (esto para usuarios con poca precisin).
9.1.3 Ejemplos
Las aplicaciones de desarrollo incorporadas en los navegadores

web permiten editar los campos de texto o valores de cada eti-
queta de html incluidos en la hoja de hipertexto presionando
doble click sobre el valor que se desea modificar haciendo uso
del patrn edicin en el sitio.
Cuando se quiere renombrar una carpeta o archivo al presionar
el click sobre el archivo dos veces con cierta diferencia permite
la edicin del nombre del archivo en un mini editor que al abrir
aparece el nombre original del archivo sobre el texto.
9.2 Seleccin inteligente
La seleccin inteligente consiste en la capacidad del software para

poder agrupar un grupo de objetos seleccionables de manera in-
teligente sin la necesidad de intervencin del usuario. La seleccin
puede ser desde un conjunto muy pequeo de pixeles hasta una pagina
entera de texto que el software agrupa segn un criterio ya preestable-
cido por el desarrollador.
216 Chapter 9. Editores y constructores

9.2. Seleccin inteligente 217

La seleccin inteligente funciona a travs del click mantenido y el

arrastre del mouse sobre los textos que se desean seleccionar, el soft-
ware decide que agregar a su seleccin y marcarlo pintando los pixeles
que rodean el objeto de un color representativo que generalmente es
azul.
Mouse Clic sostenido y arrastre por el espacio o texto.
Otra forma de poner en accin este patrn es presionando doble click
sobre un espacio en un texto para que automticamente se selecciones
la palabra o un conjunto de caracteres que se encontraba en ese punto.
Otro mtodo es la utilizacin del teclado a travs de la tecla shift que
permite seleccionar un texto de un punto a otro con ayuda del mouse
y la tecla presionada.
Shift sostenido + Mouse Clic de un punto a otro
9.2.1 Ventajas
Este permite al usuario agilizar la produccin y la manipulacin de

datos despus de mucho tiempo de practica con el mouse. Ademas
permite la agrupacin selectiva que da mayor precisin al usuario al
desarrollar algn proyecto.
9.2.2 Desventajas
Uno de los mayores inconvenientes que presenta es que el usuario

debe tener un cierto grado de precisin para seleccionar los tems por
lo que en algunos casos se torna complicado para el usuario especial-
mente si este es un usuario casual.
9.2.3 Ejemplos
Aplicaciones que permiten insertar grupos de imgenes y texto

combinados, tambin permiten la seleccin mltiple de los mis-
mos.

La seleccin de archivos (continuos o discontinuos) en una ven-

tana del explorador que provee el sistema operativo.
Cualquier texto habilitado para la seleccin de documentos pre-
viamente generados.
9.3 Seleccin compuesta
La seleccin compuesta permite determinar una seleccin de un ob-

jeto compuesto o alguno de los elementos que conforman ese objeto.
A travs de los click y segn el lugar que se ha seleccionado el soft-
ware determina si se selecciona el objeto en conjunto o alguno de sus
elementos internos. Suele ser comn la manipulacin de este tipo de
objetos en programas para desarrollo de interfaces y programas para
dibujo.
Este funciona bsicamente al hacer click sobre el objeto compuesto y
segn el punto de la pantalla que se haya seleccionado, el programa
9.3. Seleccin compuesta 219

determina si se hace la seleccin del objeto en conjunto o el elemento

interno que se intersecte con ese punto seleccionado. Esto se deter-
mina generalmente si el usuario selecciona el borde o el interior del
objeto, as si se selecciona el interior seleccionar el objeto interno
que coincida en ese punto y si se selecciona el borde del objeto com-
puesto seleccionar todo el objeto.
9.3.1 Ventajas
La principal ventaja de este patrn es que permite la fcil manipu-

lacin de objetos compuestos y a su ves la fcil edicin de objetos
individuales que forman parte de un objeto compuesto sin necesidad
de separar ese objeto.

9.3.2 Desventajas
Una de las mayores desventajas de este patron es la precisin que

deben poseer las personas que manipulan este tipo de programas, la
cual debe ser muy alta por lo que para un usuario inexperto sera muy
difcil poder utilizar este tipo de herramientas.
9.3.3 Ejemplos
La seleccin de elementos agrupados en editores grficos como

u conjunto de imgenes agrupadas y tener la posibilidad de se-
leccionar una sola de las imgenes o todas en conjunto.
La seleccin de elementos de Balsamiq Mockups en el cual se

puede seleccionar un elemento como conjunto o un elemento
simple.
9.3. Seleccin compuesta 221

9.4 Modo de una sola vez
El mtodo de una sola vez consiste en activar una funcin por medio
de un panel de botones o similares para crear un objeto que no se crea
constantemente con lo que el editor vuelve a su estado previo a la
activacin del botn inmediatamente creado el objeto. Esto se debe a
que un usuario generalmente no realiza iteraciones constantes sobre
una funcin de construccin si no que toma control sobre el objeto
creado para manipularlo a su antojo.
9.4.1 Ventajas
Una gran ventaja de la realizacin automtica de este proceso es evi-

tar que el usuario deba manualmente intercambiar entre las funciones
despus de haber utilizado un constructor. En la mayora de los casos
resulta fastidioso y lento estar cambiando de funcionalidad para re-
alizar una operacin diferente y el hecho de que el editor identifique

que no se usa con mucha frecuencia una operacin hace una expe-
riencia muy amena para el usuario. Ademas en muchos casos estar
subiendo o buscando el ultimo estado e incluso identificarlo puede
resultar difcil para el usuario.
9.4.2 Desventajas
Una desventaja es que depende meramente de lo que el usuario haga

con frecuencia para determinar que funcin debe cumplir con este
patrn, por lo que seria contradictorio decir que la funcin X sea
mas necesaria para un usuario en comparacin con otro, por lo tanto
no se puede determinar con facilidad a que funcin se debe aplicar el
modo de una sola vez.
9.4.3 Ejemplos
En un editor grfico cuando se desea crear un dibujo con una

figura, al seleccionar la figura el puntero del mouse se cambia
a modo drag and drop y el usuario puede escoger el tamao
y pintar esa figura deslizando el mouse con el botn click pre-
sionado de un punto a otro y luego de haber realizado la accin
sobre el canvas o lienzo, automticamente el programa vuelve
a poner el puntero del mouse en modo de seleccin.
En un editor de texto crear un objeto de tipo figura cumple una
funcin similar a la descrita anteriormente.
9.5 Modo activado temporalmente
Este modo consiste en que el usuario ejecute o pueda ejecutar ciertas

acciones mientras presiona una o ms combinaciones de teclas; una
vez que el usuario deja de presionarlas el sistema o ventana vuelve a
su estado previo. Este modo nace de la necesidad de los usuarios de
ejecutar acciones de forma rpida por necesidades de tiempo, trabajo,
efectividad y eficiencia, siendo los modos temporales facilitadores de
9.5. Modo activado temporalmente 223


la interaccin entre este y el computador; estas necesidades se ven

incrementadas si el usuario en cuestin es un usuario permanente del
software y por ende ms efectivo se vuelve este modo en el cual el
usuario memorizara las combinaciones o accesos rpidos a estos mo-
dos.
9.5.1 Caractersticas:
La principal caracterstica que debe cumplir este patrn es que las

combinaciones de teclas deben ser sencillas de memorizar (de ser
posible no ms de la combinacin de 3 teclas) y que sean combina-
ciones posibles de realizar en su mayora con una nica mano (preferi-
blemente mano izquierda), para dar independencia a la mano que
maneja el cursor o mouse y asi no intervenir de manera directa en
el uso del sistema.
9.5.2 Ventajas:
Una de las ventajas que tiene este modo respecto a otros modos op-
eracionales es que al ser una accin ejecutada de forma fsica por el
usuario (presionando teclas o combinaciones de estas), no hay forma
que este olvide que ha cambiado de modo por lo que se evitan errores
en este punto y as se evita retrasos en la ejecucin del trabajo del
usuario. Otra de las ventajas de este modo o mecanismo es que re-
duce el nmero de veces que el usuario tiene que buscar una accin
ya sea en algn men, paleta, lista, etc.
9.5.3 Desventajas
La principal desventaja de este modo es que es puede ser poco visible

o invisible en algunos casos en los que no existe en la interfaz al-
guna forma de informar al usuario de estos, por lo que el usuario debe
aprenderlos en la marcha, ir directamente al manual de usuario del
software o aprenderlo por medio de otras personas. De igual forma
9.5. Modo activado temporalmente 225

que en el modo de una sola vez, es difcil elegir a que acciones asig-
nar un modo temporal, ya que puede diferir mucho dependiendo del
usuario, en especial si el software es muy complejo y permite interac-
ciones en distintas reas.
9.5.4 Ejemplos
Algunas aplicaciones de edicin de texto posen el modo tem-

poral para seleccionar todo el texto mediante la combinacin de
teclas y adems de esto luego habilita otros mtodos temporales
sobre la accin realizada al ejecutar la accin anterior:
Ctrl + A
Algunos exploradores de Internet permite al usuario tener

varias pginas abiertas en una misma ventana, mediante el uso
de pestaas las cuales pueden ser creadas mediante un clic o
mediante la combinacin de teclas:
Ctrl + T

9.6 Modificacin restringida
Esta tcnica se base mucho en la usabilidad del software, ya que su

meta es ahorrarle al usuario gran cantidad de trabajo permitindole
enfocar la mayor parte del tiempo en ver como lucen los objetos. La
tcnica busca que el sistema permita tener operaciones o formas f-
ciles de cambiar el tamao a los objetos manteniendo proporciones
de los mismos o cambiar su tamao bajo ciertas situaciones o circun-
stancias.
9.6.1 Ventajas:
Permite que el flujo de visin sobre la aplicacin sea fluido para el

usuario, y los cambios que este realiza se vean reflejados de forma
inmediata sobre la vista del rea de trabajo.
9.6. Modificacin restringida 227

9.6.2 Desventajas
Una de las soluciones planteadas en algunos programas, es editar las

propiedades de la imagen o texto mediante formularios en los cuales
se digitan nmeros y esto hace referencia a alguna propiedad del
mismo; pero esta forma no es lo ideal ya que induce al usuario a
pensar matemticamente y no de forma visual, adems de que inter-
rumpe el flujo de visin de la aplicacin quitndole al usuario de ver
los cambios de forma ms notoria sobre la imagen o texto.
9.6.3 Ejemplos
Aplicaciones que permiten al usuario re dimensionar el tamao

de las imgenes sin perder la proporciones de la misma halando
con el mouse una de las esquinas de la misma hasta lograr el
tamao deseado y donde la imagen aun conserve un buen as-
pecto, sin perder de vista el aspecto de la misma logrando ver
el resultado final.

Algunos gestores de ventanas de sistemas operativos permiten

escalar o redimensionar las ventanas de las aplicaciones a un
tamao a gusto del usuario.
9.7 Magnetismo
Esta tcnica consiste en el ajuste automtico de los objetos hacia un

punto de interaccin conocido como imn. Uno de los usos ms
comunes de esta tcnica es cuando el usuario arrastra un objeto de la
interfaz a algn punto en particular o hacia otro objeto, este objeto
que est siendo arrastrado al pasar cerca del otro se une o adhiere a l
simulando el comportamiento de un imn.
Esta tcnica es muy utilizada en software de edicin grficos adems
del manejo de ventanas ya que permite una rpida realizacin de lo
deseado (bajo heursticas del mismo software y distintos usos).
9.7. Magnetismo 229

9.7.1 Ventajas
El uso del mouse se torna complicado para muchas personas y ms si

este se usa bajo entornos de mucha precisin como lo es el campo del
diseo; una gran ventaja y la cual es una de los objetivos que busca
este patrn, es ayudar a los usuarios con poca precisin a realizar
ciertas tareas.
9.7.2 Desventajas
En la mayora de situaciones este patrn acta bajo heursticas avan-

zadas y el comportamiento o uso de usuarios semi-expertos o expertos
en el uso del software, por lo que hay situaciones en las cuales acta o
realiza una accin la cual no era la deseada en ese momento, lo cual se
puede tornar incmodo y tedioso para algunos usuarios que buscan un
resultado distinto, por lo que usuarios con poca experiencia en el soft-
ware van a requerir ms tiempo en lograr sus objetivos aumentando la
curva de usabilidad del software.
9.7.3 Ejemplos
Algunos gestores de ventanas utilizan magnetismo para max-

imizar las ventanas o hacer que esta se ajuste a una posicin
especifica en la pantalla (media pantalla).
9.8 Guas
Consiste en tener lneas horizontales y verticales con forma de cinta

mtrica, la cual ayuda al usuario a saber la ubicacin de un objeto en
la interfaz, este elemento solo debe informar al usuario de la ubicacin
de los objetos y no permitir editar o moverlos, ya que de esa funcin se
encargan las herramientas de alineamiento las cuales estn diseadas
para actuar de forma rpida y resolver cualquier tipo de situacin por
ms compleja que sea.

Este elemento tambin es utilizado en muchas aplicaciones de manejo

de versiones o aplicaciones en las que usuarios trabajan sobre un
mismo objeto de manera simultnea permitiendo identificar la dis-
posicin de los cambios hechos por uno de los miembros.
En el momento de utilizarla se debe tener en cuenta que este elemento
no es parte de los objetos tratados por el usuario, sino una ayuda para
este, por lo que debe ser legible y debe tener una apariencia que lo
distinga de los elementos que trata el usuario. Otra aspecto que se
debe tener en cuenta al utilizarlo es que el usuario puede disponer o
no de ellas y a su vez puede elegir su posicin, tamao, etc. por lo
que deben ser ajustables segn la demanda del usuario.
9.8.1 Ejemplos
Guas utilizadas en los editores de texto para mostrar la ubi-

cacin donde se ubica una imagen o prrafo, as mismo la san-
gra y dems aspectos.
9.8. Guas 231

Guas utilizadas en editores de imgenes en los cuales mediante

una representacin de coordenadas se le informa al usuario de
donde se ubica el mouse y de donde parte un objeto (imagen,
texto, etc.)
9.9 Bibliografia
Johnson, J. (2010). Designing with the Mind in Mind. USA:

Elsevier.
Rolf Molich, J. N. (1990). Improving a HumanComputer.
USA: Communications of the ACM.
Saffer, D. (2010). Designing for Interaction. USA: New Riders.
Tidwell, J. (2010). Designing Interfaces. Canada: OReilly.

9.9. Bibliografia 233

Patrones de Diseño de Interfaces

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Patrones de Diseño de Interfaces

Încărcat de

Drepturi de autor:

Formate disponibile

Patrones de Interfaces

Editor: Armando Arce

June 02, 2015

5 Listas y tablas 115

7 Formularios y controles 153

8 Diseo mvil 177

9 Editores y constructores 215

Este documento consiste de la recopilacin de distintas tcnicas (pa-

Recopilado por: Eli Moreno Caldern, Sofa Barrantes Ziga y

2.1 Producto, Bsqueda y Navegacin

Este patrn es altamente usado en sitios web que se dedican a vender

Se recomienda utilizar cuando se ofrecen largas listas de productos

Su utilizacin consiste en colocar tres elementos en la pgina prin-

Este patrn de diseo, a travs de los aos ha obtenido gran aceptacin

6 Chapter 2. Organizacin de Contenido

bsqueda, mientras que otras personas no sabrn exactamente que de-

Actualmente, los usuarios y generalmente, los compradores en lnea,

Un sitio que emplea esta tcnica es ebay.es, la figura 1 hace referencia

2.1. Producto, Bsqueda y Navegacin 7

8 Chapter 2. Organizacin de Contenido

2.2 Flujo de Noticias

Este patrn es generalmente, usado en sitios o aplicaciones de redes

Se debe enumerar de manera que el orden cronolgico sea inverso,

2.2. Flujo de Noticias 9

Como opcional, se puede agregar un campo de texto en la parte su-

Al ser esta tcnica de modo informativo, requiere que el usuario este

10 Chapter 2. Organizacin de Contenido

2.2. Flujo de Noticias 11

2.3 Tablero de Mando

Este patrn se caracteriza por mostrar muchas listas de elementos

El primer paso es determinar la informacin ms importante para el

12 Chapter 2. Organizacin de Contenido

mode las diferentes listas, tablas y grficos de informacin en la pan-

Se utiliza cuando los sitios o aplicaciones ocupan flujos de entrada de

2.3. Tablero de Mando 13

lo que logra hacer la vida ms fcil de los usuarios y ayuda a tomar

Actualmente, los usuarios y generalmente, los compradores en lnea,

El sitio mint.com, versin beta, muestra informacin financiera, pre-

14 Chapter 2. Organizacin de Contenido

2.3. Tablero de Mando 15

2.4 Lienzo ms Paleta

Este diseo (conocido como canvas plus palette en ingls) se con-

Realmente, la tcnica usada en este patrn trae consigo muchas ven-

16 Chapter 2. Organizacin de Contenido

Como todo patrn de diseo, presenta desventajas entre aplicaciones,

En esta aplicacin, como lo muestra la figura adjunta, se ve la paleta

Otro ejemplo de canvas plus palette es Photoshop, que presenta pane-

2.4. Lienzo ms Paleta 17

el centro el lienzo, todo colocado en la misma ventana.

Este patrn (llamado wizard en ingls) lo que pretende es conducir

Cuenta con mltiples caractersticas ya que es usado cuando existe

18 Chapter 2. Organizacin de Contenido

La interfaz puede ser dinmica, puesto que el usuario puede tomar

Las desventajas encontradas para este patrn y una de las ms co-

del proceso, pues para el diseador de la interfaz va a ser difcil pon-

Cuando creamos un Facebook, aparece la ventana adjunta, donde ve-

2.6 Editor de Configuracin

Este patrn (setting editor en ingls) se encarga de proporcionar

20 Chapter 2. Organizacin de Contenido

2.6. Editor de Configuracin 21

Tiende a ser usado cuando se necesita manejar un gran nmero de

Por lo general, las ventanas de configuraciones tienen a ser fciles de

En algunas aplicaciones, cuando un usuario edita una propiedad, estas

22 Chapter 2. Organizacin de Contenido