Patrones de Diseño de Interfaces

Unidad 6

Introducción

Patrones de DiseñoUna vez que se entiende lo que el usuario desea de la aplicación o

del sitio, se elige la plataforma, un sitio web, una aplicación deescritorio, un dispositivo móvil o la combinación de varias de ellas

Arquitectura de la InformaciónSe refiere a a la organización de información en un espacio,

engloba la presentación, la búsqueda, la navegación, la colocaciónde títulos o etiquetas, ordenamiento, manipulación e inclusoocultamiento de información

Esquema GeneralEn este nivel del diseño y desarrollo se debe decidir que modelo

de interacción se utilizará, un sitio o aplicación para escritorio odispositivos móviles o ambos

Objetivos de Sitios o AplicacionesEn general las aplicaciones o sitios buscan alguno de los siguientes

objetivos:

1. Mostrar una sola cosa, una imagen, un video o información2. Mostrar una lista de elementos3. Proporcionar herramientas para creación4. Facilitar una tarea5. Herramientas de Configuración

Resaltar – Buscar y NavegarEs un patrón muy común en gran cantidad de sitios web,

especialmente en los que se ofrecen productos o contenido escrito

El efecto de resaltado engancha al usuario, la búsqueda permite alusuario escribir un criterio que tiene en mente mientras que lasopciones le dan la oportunidad de ir recorriendo hasta queencuentra algo de su interés

Buscar y navegar le proporciona a los usuarios dos maneras deencontrar elementos de interés

Mostrar un solo ElementoActualmente es poco común que un sitio muestre solamente una cosa,

normalmente se tiene al menos una lista que lo acompañe, sin embargositios muy populares como Google Maps son un buen ejemplo

Para dar mayor vista a una página con un solo elemento, ydependiendo del tipo de sistema o aplicación, se recomienda:

Un scroll vertical con información relacionada al elementoUna interfaz que permita realizar un zoom en ese dispositivoAlgunos controles en caso de que se tenga un elemento multimediaMostrar el contenido en más de una maneraElementos relacionados con un aspecto social

Desplegando Listas de ElementosEsto incluye el desplegar menús, tablas, tablas o listas de

imágenes, resultados de búsqueda, listas de mensajes ocomentarios entre otras

Lista de ElementosSe trata de mostrar los elementos, eligiendo la mejor opción en

cuanto al orden, cronológico, por nombre, por precio o alguna otracategoría. En el caso cronológico se prefiere que lo más recienteaparezca primero, esto da una sensación de actualización

Cada elemento de la lista debe dar la idea inmediata de qué es lo quecontiene, un título descriptivo, una imagen y una pequeña descripciónque llame la atención del usuario

Un ejemplo muy claro de esto son las búsquedas de noticias o lossitios en donde se anuncian productos de los usuarios a la venta

Visualizador de ElementosEs conveniente que se utilicen vistas en miniaturas, y algunos

controles para una interfaz que permita un manejo familiar.

Es conveniente utilizar una vista con la que las personas seidentifiquen, algo que ya sea conocido para ellos. El ejemplo másclaro de este estructura esYoutube

Determinar la información que el usuario quiere ver y definir loselementos que aparecerán en la vista, considerar que solo hay unelemento que debe resaltar sobre todos los demás

Herramientas para CreaciónLos editores y herramientas de construcción han crecido en las

últimas décadas, en donde han aparecido gran cantidad deherramientas de diseño de todo tipo, algunas de las característicasde estas herramientas son:

Paleta de elementosGran cantidad de ambientes de trabajoVistas alternativas

Herramientas para CreaciónLas herramientas para creación tienen una estructura bastante

definida, un espacio de trabajo y varios menús y elementos quefaciliten las tareas, es muy importante el uso del ratón, lasoperaciones deben poder realizarse de manera sencilla con pocosclics

Los títulos de los menú deben ser muy indicativos y agrupasactividades comunes, mientras que si se utilizan íconos pararepresentar acciones, éstos también deberán ser representativos delas actividades que se pueden realizar

Facilitar una TareaEsto se refiere más que el despliegue de información, a realizar

un trabajo: Registrar información, Imprimir, Subir información,Comprar algo

En ocasiones se recomienda romper la tarea principal enpequeñas tareas y manejarlas como pequeños Wizards

Facilitar una TareaPermite a los usuarios realizar una tarea paso a paso en un orden

prescrito, todos los llamados Wizards que hay caen dentro de estacategoría.

Se utilizan cuando se deben seguir una serie de pasos para realizaruna tarea y estos pueden llegar a ser complicados, considerar quemuchas veces el usuario no quiere pensar en los pasos, solo quiererealizar pocas acciones y que el sistema haga todo por él.

Facilitar una TareaEs importante saber la secuencia de las tareas y definir si en algún

momento ya no habrá marcha atrás, cuando esto suceda esnecesario dar un aviso al usuario y en ocasiones pedir laconfirmación al usuario para proceder.

Conviene poner una pequeña explicación, breve y concisa, de enque estado de la tarea se encuentra uno.

Herramientas de ConfiguraciónSon funciones que permiten modificar el comportamiento o

apariencia de una aplicación o interfaz

Para cambiar las configuraciones, se utilizan herramientas comolos Editores de Configuración que permiten realizar cambios avarias configuraciones

Herramientas de ConfiguraciónEs conveniente permitir al usuario modificar las vistas de manera

sustancial respecto a las que se ofrecen por defecto.

Estas funciones varían de aplicación en aplicación y puedenincluir desde tamaños de fuente hasta la manera en que sedespliega la información

Considerar las preferencias que tienen los usuarios, por ejemplo,vista, colores, tamaños

Herramientas de ConfiguraciónSiempre debe ser posible regresar a las funciones originales de manera

sencilla

Debería ser posible permitir el guardar varias configuraciones en caso deque varios usuarios utilicen el mismo dispositivos

Cada opción a configurar debe especificar claramente cuál será su efecto enel dispositivo o interfaz de manera que el usuario pueda entender qué es loque esta cambiando

En caso de querer cambiar varias configuraciones, se recomienda que loscambios se agrupen por categorías relacionadas entre sí.

Navegación

El Costo de la NavegaciónEl abrir una ventana o una interfaz de una aplicación, siempre

implica un costo cognitivo, especialmente las primeras veces

Siempre hay que considerar las formas, los elementos y sobretodo lo que uno desea realizar en esa interfaz, esto se conoce comoel cambio de contexto, incluso cuando ya se ha trabajado en eseentorno

El Costo de la NavegaciónCada que se cambia de página o de interfaz en una aplicación hay

un costo, por esta razón es necesario mantener estos costos lo másbajo posible, evitar muchos niveles de navegación llenos dediálogos y poca actividad

Modelos de NavegaciónUn modelo de navegación se refiere a la manera en que las

páginas de un sitio o en ocasiones, las interfaces de una aplicaciónse relacionan entre ellas

Navegación de EstrellaPrincipalmente se encuentra en los dispositivos móviles en donde no

se quieren muchos elementos en un a página. Se tiene una pantallaprincipal que sirve como acceso a todo el resto de las pantallas ointerfaces

Para ir de una interfaz a otra, se requiere regresar a la pantalla inicial

Completamente ConectadaMuchos sitios web siguen este modelo, hay una página o pantalla

principal, pero en cada una de las otras es posible navegar y llegar aotros sitios, aunque sea solamente a un nivel

MultinivelConfiguración muy utilizada en los sitios web, hay páginas

principales que están conectadas todas entre sí, pero las subpáginas están conectadas solamente entre ellas y a la páginaprincipal de la que descienden.

Paso a PasoConfiguración utilizada en las secuencias y Wizards en donde solo

se puede avanzar hacia un estado siguiente o regresar a un estadoanterior

Navegación PiramidalUna variante de la navegación Paso a Paso, aquí se tiene una

interfaz principal a la que se puede regresar desde cualquiera delos pasos

Navegación en Tiempo y PosiciónAplicable principalmente a elementos especiales, en donde se

puede avanzar a travéz de ellos con un zoom o recorriendo unabarra de scroll o de tiempo, dos buenos ejemplos son documentosmuy largos y videos o música

Otros Tipos de NavegaciónNavegación Plana. En donde no hay navegación, por ejemplo un

entorno de trabajo en donde se tienen disponibles todas las paletasa la vez

Panel Modal. Son las interfaces o pantallas en donde el usuario nopuede realizar actividades más allá de leer información, introducirdatos o cerrarlas, un ejemplo básico es una pantalla de login

Otros Tipos de NavegaciónPuntos de Entrada. Son interfaces que aparecen e indican al

usuario la primer tarea a realizar, especialmente se utilizan parareducir el tiempo de aprendizaje. Un ejemplo básico son lasentradas a ciertas aplicaciones que ofrecen las opciones básicaspara el usuario.

Otros Tipos de NavegaciónMarcadores. Se utilizan como puntos de entrada elegidos por el usuario, a los que puede llegar de manera inmediata, los marcadores en los navegadores son un claro ejemplos

Otros Tipos de NavegaciónPuntos de Escape. Se utilizan cuando un usuario quiere salir de una pantalla por que ha caído en un error o ha navegado a través de muchos niveles, estos puntos lo llevan a un estado conocido

Elementos para la Navegación

Menús AmpliosSe utilizan para desplegar una gran cantidad de opciones de

navegación ya que despliegan todas las secciones y sub seccionesque se puedan encontrar

Se recomiendan cuando el sitio tiene muchas categorías, de tresniveles en adelante y se quieren mostrar a todos los usuarios

Se recomienda colocar el nivel superior en una posiciónhorizontal y hacer un menú expandible

Menús AmpliosLo complejo es ocultar las secciones hasta que el usuario desee

ver cuáles son las disponibles

Se debe tener un estilo que se adapte al sitio en cuanto a colores,si la información es mucha no se recomienda utilizardescripciones, la indicación de que se puede encontrar estaría dadapor el título

Es conveniente agrupar los niveles de acuerdo a su categoría yordenar las ligas en orden alfabético

Menús CompactosSe recomienda que contengan solo las categorías

Pueden contener solamente agrupaciones diferentes de categorías

Pueden tener diferentes representacionesMenús superioresMenús lateralesPestañas

Pueden utilizarse en sitios web de escritorio o móviles y en aplicaciones

En caso de ser un menú superior se debe cuidar el número de elementos para que sean visible

Elementos de Acceso RápidoSe utilizan para tener acceso rápido a cierta información

La información se puede categorizar de diferentes maneras:Por TemasPor PopularidadAleatoria

Se utilizan normalmente en sitios web, en versiones de escritorio

Ayudan a que el usuario siga en el sitio tras finalizar una consulta

Mapa de Sitio en el FooterCuando se tiene mucho espacio en una página y poca

información, colocar un menú de navegación en el fondo o en elfooter, puede ayudar a disimular ese espacio

Estos menús se recomienda que sean menores que un menúamplio, incluyendo solamente las categorías o uno o dos niveles

Mapa de Sitio en el FooterEsto permite a los usuarios moverse en el sitio aunque se

encuentren al final del mismo, aunque también corre el riesgo deser omitido por lo que solo debe usarse como apoyo a otroelemento de navegación

Integrarlo con otros elementos comunes en el Footer como lainformación de contacto u organizacional, el Footer deberá estarintegrado estéticamente con el resto del sitio

Mapa de SecuenciaSe debe indicar en cada página que represente una secuencia el

paso que se está realizando, esto le da al usuario una clara idea deen donde está y que actividades le faltan por realizar

En un sitio web en donde no se tiene una acción, el mapa desecuencia puede cambiarse por las llamadas “migajas” que indicanlas páginas (secciones) que se han visitado hasta llegar a la vistaactual

Un mapa de secuencias puede ser tan sencillo como indicarcuántas imágenes faltan por visualizar

PaginaciónCuando se tienen muchos elementos con textos descriptivos o

imágenes es conveniente utilizar la paginación

Se recomienda mantener los elementos por página entre 10 y 15como máximo

Se debe indicar de manera clara en qué página se encuentra elusuario

Debe contarse con una forma de avanzar y regresar y de moverserápidamente entre páginas

Cajas de BúsquedaLa búsqueda se considera como una especie de navegación que permite llegar a una interfaz en particular de manera inmediata

La búsqueda debe incluir una caja de búsqueda que se note de inmediato y que no esté rodeada por mucho texto o por otras cajas de texto que ofrezcan otra funcionalidad

Estructura del Sitio

IntroducciónEl diseño de una página o su layout tiene por objetivo manipular

la atención del usuario en una interfaz de tal manera que se centreen algunos elementos o secuencias.

Principios de GestaltProximidad. Poner las cosas cerca hará que los usuarios las

asocien unas con otras. Es la base oara agrupar contenido ycontroles en un Interfaz de Usuario

Parecido. Si dos cosas tienen la misma forma, el mismo color uorientación, los usuario inmediatamente relacionarán una con laotra

Principios de GestaltContinuidad. La vista de los usuarios busca continuidad en la

organización de los elementos sin importar su tamaño.

Cierre. Es importante que se identifique el final de un bloqueo sección aunque no sea indicado explícitamente, un espacio enblanco es útil para este fin

Consideraciones Básicas de DiseñoExisten varios elementos que se consideran básicos al momento

de realizar un diseño de una interfaz:JerarquíaVisualFlujoVisualDespliegues Dinámicos

Jerarquía VisualLa jerarquía visual es un concepto fundamental, aunque sencillo,

significa simplemente hacer que el contenido más importantedestaque sobre el resto

Los títulos deben diferenciarse de subtítulos o del contenido engeneral, las listas de elementos deben parecer una lista

Un usuario debe ser capaz de distinguir la estructura del sitio apartir de su diseño

Implementación de JerarquíaSe debe considerar qué es lo más importante que se se quiere

mostrar en la interfaz y lograr que la atención se centre en eseelemento

Se deben ordenar los elementos de tal manera que la importanciavaya disminuyendo conforme van apareciendo en la interfaz

Una buena jerarquía visual de inmediato permite aclarar: laimportancia de los elementos, y las relaciones entre ellos

Elementos de la JerarquíaElementos que permiten lograr la jerarquía de distintos

elementos son: densidad, color de fondo, tamaño y posición yritmo.

Densidad. Un bloque con una mayor densidad que el resto de loselementos que lo rodean llanará la atención sobre el resto

Color de Fondo. El contraste entre el color de fondo y el textollamará la atención de un elemento, el color de fondo nuncadeberá opacar o dificultar al contenido que contiene

Elementos de JerarquíaPosición y Tamaño. Un bloque de texto que resalte en la parte

superior de la interfaz, de inmediato llamará la atención, mientrasque uno en la parte baja y con un tamaño pequeño pasarádesapercibido

Ritmo. Es importante mantener un ritmo que mantenga laatención del usuario, esto incluye listas, tablas, textos e inclusoespacios en blanco que permitan descansar visualmente al usuario

Resaltando Elementos PequeñosLos elementos pequeños que se desean resaltar, pueden colocarse

en la parte superior de la interfaz, en la parte lateral izquierda o enla esquina superior derecha

El uso de elementos para lograr una jerarquía también puedeutilizarse con elementos de pequeños, pero que pueden tener unsignificado o función importante

Relación entre Elementos de la Interfaz

Si se tienen varios elementos, a los que se les quiere dar la mismaimportancia, estos deberán tener el mismo aspecto y manejar unritmo adecuado para crear una línea visualizar

Esto se puede aplicar a párrafos, listas de elementos, menús

Una indentación significa una relación de padre e hijo

Flujo VisualEl flujo visual trata con las maneras en los elementos que los ojos

del usuario tienden a aseguir mientras recorren la interfaz

El flujo visual se relaciona con la jerarquía visual, ya que unabuena jerarquía visual se enfoca en aquellas zonas que captan laatención del usuario

Flujo VisualSe debe considerar la manera en que las personas leen, es decir,

de arriba hacia abajo y de izquierda a derecha

Esto se puede alterar con un elemento que resalte, aunque puedeser para bien o para mal

Puntos FocalesPuntos en los que los ojos del usuario no pueden resistir fijarse,

se deben de seguir de un punto fuerte a un punto débil

Una interfaz debe tener pocos puntos focales fuertes, muchos deellos quitan importancia al resto

Se debe construir un camino visual a lo largo de la interfaz,muchas veces al final se quiere un elemento pequeño que resalte ysin un camino visual, éste pasará desapercibido

Despliegues DinámicosEl despliegue dinámico surgió con las interfaces con las que el

usuario puede interactuar y se refiere a un uso apropiado delespacio para presentar contenido en diversas formas.

El elemento más común de despliegue dinámico es una barra dedesplazamientoEl agrupar el contenido por secciones, usando módulos, o pestañaso paneles expansibles

Patrones para JerarquíaTres patrones sirven para indicar la jerarquía de la interfaz:

FrameworkVisualCentradoMallas de Igualdad

Patrones de ContenidoCuando hay demasiado contenido para tener en un solo bloque,

hay ciertos patrones que ayudan con su distribución

Secciones resaltadasPestañasAcordeónPaneles que ColapsanPaneles MóvilesAlineación Derecha/IzquierdaBalance Diagonal

Patrones de Aspecto DinámicoDos patrones se relacionan con los aspectos dinámicos

Despliegue y Habilitación ResponsivaDiseño Dinámico

Listas de Elementos

Lista de ElementosPrácticamente cualquier interfaz medianamente compleja

presenta una lista de elementos, las listas se pueden agrupar en lossiguientes casos:

Idea General. Con solo ver la lista, se tiene una idea general de loselementos que contiene, no del elemento en particularElemento por elemento. Cómo accederá el usuario a un nuevoelemento, se abrirá en otra ventana o se expandiráBúsqueda específica. Debería ser sencillo para un usuario buscar enun a lista un elemento en particular

Listas de ElementosOrdenamiento y filtrado. Funciones de ordenamiento quefaciliten la búsqueda de un elemento en la listaModificación de elementos. Permite el modificar elementos,reordenarlos, eliminarlos o agregar nuevos elementos a la lista

Arquitectura de las ListasLos elementos a considerar en la arquitectura de una lista son:

Longitud. Se refiere a la longitud de una lista y por lo tanto al espacioreservado para ella

Orden. Se refiere al orden de la lista, alfabético, en base a tiempo uotra propiedad, si se podrá cambiar

Agrupamiento. Se refiere a decidir si se tendrán categorías en la lista ya la cantidad de niveles que se pueden tener de categorías

Arquitectura de las ListasElementos. Se refiere al tipo de elementos que tendrán, a su

complejidad, será una lista homogénea, a la estructura de loselementos en la lista

Interacción. Se refiere al grado de interacción de los usuarios conlos elementos de la lista y a su comportamiento en la misma

Comportamiento Dinámico. Cómo se comportará la lista cuandointeractúe el usuario con ella, se ocultará o se expanderá entreotras opciones

Patrones para ListasSe tienen tres patrones para indicar en donde se despliegan los

elementos de una lista: a su lado, dentro o en una interfazdiferente.

Panel de dos seccionesDespliegue en otra interfazDebajo del elemento

Patrones para ListasOtros patrones se refieren a la manera en que se mostrarán las

listas

Malla deVersiones PreliminaresCarruselDistinción de FilasPaginaciónListas en CascadaEstructura de ÁrbolModificación de Elementos

Diseño para Móviles

Patrones para Diseño MóvilLos principales retos para el diseño orientado a móviles son:

El reducido tamaño de las interfacesAnchos de pantalla variablesElementos táctilesDificultad para escribirAtención Limitada

¿Qué Espera el Usuario?Los usuarios de aplicaciones móviles o de sitios móviles, tienen diferentes necesidades a los usuarios de aplicaciones de escritorio

Les interesa más la velocidad con la que acceden a la informaciónBuscan elementos socialesQuieren solo información relevante

Cómo Diseñar para MóvilesEl primer paso es considerar que elementos no son realmente relevantes para excluirlos del sitio

Considerar todo el potencial que ofrece el hardware y que no está disponible en una computadora de escritorio

Manejar el contenido de manea lineal con una orientación vertical

Optimizar para tener solo las opciones más comunes e importantes

Considerar el ancho de los dedos de los usuarios

Patrones para MóvilPila Vertical

Movimiento basado en arrastre

Herramientas Táctiles

Navegación en el fondo

Listas con imágenes y texto

Listas infinitas

Bordes y márgenes amplios

Herramientas para limpiar cajas de texto

Continuidad