unidad 6 - uam azcaptzalcoacademicos.azc.uam.mx/jfg/diapositivas/interaccion/unidad_5.pdf ·...
Post on 24-Jul-2020
4 Views
Preview:
TRANSCRIPT
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
top related