Patrones de DiseñoUi Patterns

Patrones de diseño*Content-Pagination

*Tabs-Navigation tab

*Forms-Calendar picker -Password Strength Meter-Inplace Editor-Input Prompt

*Explaining the process-Wizard

*Search-AutoComplete -Table Filter

*Jumping in hierarchy-Home Link

Navigation Tabs

ProblemaNecesidades de contenido para ser separados en secciones y se accede mediante una estructura de navegación plana que da una clara indicación de la ubicación actual.

Uso-Se utiliza cuando hay entre 2-9 secciones de contenido que necesitan un modo de navegación plana.-Se utiliza cuando los nombres de sección son relativamente cortos

SoluciónUna barra horizontal contiene las diferentes secciones o categorías de su sitio web. Cada sección o categoría está representada por una pestaña que más comúnmente se asemeja a un botón. Por ello, el botón conjunto debe ser seleccionable, y no sólo el texto que etiqueta la sección.

JustificaciónEl patrón de las pestañas de navegación es una extensión de la metáfora del escritorio en el que los objetos físicos se representan como GUI elementos. Pestañas de navegación se derivan de la idea de carpetas en un archivador y por tanto son familiares para el usuario final. Pestañas de navegación proporcionan una indicación visual clara de qué contenido se puede encontrar en un sitio web y coloca la ubicación actual en el contexto resaltándolo.

CalendarPicker

ProblemaEl usuario quiere encontrar o presentar información basado en un rango de fechas o la fecha.

Uso-Se utiliza cuando el usuario desea elegir una fecha o rango de fechas con el fin de presentar, pista, datos de tipo, o de filtro. -No utilizar de forma aislada, cuando el usuario es más familiar y eficiente con otra forma de introducir una fecha. Algunos usuarios prefieren introducir una fecha a través de un campo de texto.

SoluciónEl selector de calendario se activa en una variedad de maneras: -Al hacer clic en un enlace que llevó para seleccionar una fecha -Al seleccionar un campo para introducir una fecha -Al hacer clic en un icono de calendario más a menudo colocado al lado del campo utilizado para introducir una fechaAl activarse, una caja con un mes calendario se visualiza en la página actual, lo que provocó que el usuario seleccione una fecha en el cuadro.

PasswordStrengthMeter

Problema Usted quiere asegurarse de que las contraseñas de los usuarios son lo suficientemente fuertes para prevenir ataques maliciosos.

Uso-Se utiliza cuando desea que sus usuarios elegir las contraseñas de sus cuentas de usuario que son difíciles de romper o adivinar por cualquiera de ayuda humana o computarizado. -Se utiliza cuando se desea aumentar la complejidad de las contraseñas de los usuarios y aumentar la barrera para los atacantes manipulación con el sistema.

SoluciónLa fuerza de un password se mide de acuerdo a reglas predefinidas y se muestra el uso de una escala horizontal al lado del campo de entrada. Si la contraseña es débil, se destaca sólo una pequeña porción de la barra horizontal. Cuanto mayor es la fuerza de la contraseña más se pone de relieve la barra horizontal.La fortaleza de la contraseña también se indica adecuadamente coloreando la barra en un asociativa color con buena o mala: verde indica una contraseña segura y rojo que indica una contraseña débil.

Define una contraseña segura cuando ...:

1.Tiene más de 8 caracteres2.Contiene tanto letras mayúsculas y minúsculas3.Contiene al menos un carácter numérico4.Contiene caracteres especiales5.Tiene más de 12 caracteres

InplaceEditor

Problema El usuario necesita para editar rápidamente y fácilmente un valor en una página.

Uso-Utilice cuando el usuario sólo tiene que editar un valor (o muy pocos) y no muchos-Se utiliza cuando el valor que el usuario tiene que editar es de un formato simple, es decir, una cadena de texto, en un cuadro desplegable.-Utilice si desea que el usuario sea capaz de editar un valor sin tener que ir a una página de la administración, pero al permanecer en la misma página.

SoluciónEl patrón inplace Editor permite la edición localizada de los elementos sobre la marcha. El patrón proporciona la facilidad de edición mediante la colocación de los controles justo al lado de los elementos que afectan.

JustificaciónUn editor in situ proporciona una manera fácil para que las piezas de edición de usuario de una página sin tener que ser redirigido a una página de edición. En su lugar, el usuario sólo puede hacer clic en todo en una página y editar los elementos que él o ella desea cambiar - sin tener que recargar la página.

InputPrompt

Problema El usuario tiene que introducir datos en el sistema

Uso-Se utiliza cuando la etiqueta de un campo de entrada no explica plenamente lo que debe ser llenado en él o cuando se utiliza una etiqueta como se siente como un exceso de explicar la interfaz. -Se utiliza cuando un texto de ejemplo o pregunta contesta lo que debe ser llenado en un campo de entrada tan bien como una etiqueta.-Se utiliza cuando desea guardar el espacio que una etiqueta de otro modo ocupa.

SoluciónUn campo de entrada está precargada con el ejemplo de texto o una pregunta que pide al usuario con lo que hacer o tipo.Los campos de texto utilizan el patrón del símbolo de entrada combinada con secuencias de comandos para eliminar el texto de petición de un campo, cuando se establece el foco del usuario. Una vez que el usuario entra en el campo de entrada para introducir el contenido, se elimina el texto que provocó y se reemplaza con nada para que el campo de entrada es libre para que el usuario rellene.

JustificaciónCuando un usuario rellena un formulario que es más a menudo con el propósito de completar el formulario lo antes posible para seguir adelante con el servicio ofrecido. Por ello, el usuario a menudo simplemente escanea a través de campos de formulario y etiquetas sin dar las etiquetas tanto de un solo vistazo. Mediante el uso de los mensajes de entrada, la atención inmediata se señala a lo que el usuario necesita para rellenar. El usuario no puede perder. Aunque se debe tener cuidado con la eliminación de las etiquetas del todo, ya que se elimina el símbolo de entrada una vez que el enfoque se ha establecido en el campo de texto.

Wizard

ProblemaEl usuario quiere lograr un objetivo único que se puede dividir en sub-tareas confiables.

Uso-Se utiliza cuando el usuario tiene que realizar una tarea o un objetivo que dicta más de un paso.-Se utiliza cuando el usuario tiene que realizar una tarea compleja que consta de varias sub-tareas confiables. -Se utiliza cuando el usuario necesita datos complejos de entrada en un sistema, pero las tareas se logra más fácilmente mediante la división del proceso en una serie de pasos más pequeños y simples.

SoluciónLa tarea de introducir datos en el sistema se separó en múltiples pasos. Cada paso se presenta al usuario una a la vez. El usuario debe ser presentada con la información sobre los pasos que existen, el progreso a través del proceso y que pasos se han completado.

JustificaciónAl separar las tareas complejas necesarias para lograr un objetivo en varios pasos, el proceso de ingreso de datos puede tomar varias direcciones diferentes en función de lo que de entrada se introduce.La compleja tarea de introducir grandes cantidades de datos confiables se puede ajustar y racionalizado para adaptarse a las decisiones de un usuario a través de un proceso. En el contexto de las decisiones que el usuario hace en cada paso, pasos innecesarios se pueden cortar y pasos importantes pueden entrar en el foco.Cuando los usuarios se ven obligados a seguir una serie de pasos predefinidos que son menos propensos a perder aspectos importantes de un proceso y por lo tanto van a cometer menos errores.

Wizard - Ejemplo

Pagination

ProblemaEl usuario tiene que ver un subconjunto de datos ordenados en una forma comprensible.

Uso -Se utiliza cuando no es adecuado para mostrar todos los datos en una sola página / pantalla. -Se utiliza cuando el conjunto de datos es de alguna manera ordenada.-No utilizar cuando no se desea que el usuario para hacer una pausa para navegar a la página siguiente.

SoluciónRomper el conjunto de datos completa de los elementos en partes secuenciales más pequeños y éstos muestran en las páginas secuenciales separadas. Proporcionar control de paginación para navegar de una página a página. Deje que el usuario vaya a las anteriores y próximos páginas, proporcionando enlaces a este tipo de acciones. Además, proporcionar enlaces a comienzo absoluto y final del conjunto de datos (nombre y apellido).Entonces, si el conjunto de datos tiene un tamaño conocido mostrar un enlace a la última página. Si el tamaño de la base de datos es variable, entonces no mostrará un enlace a la última página.

Justificación En primer lugar, las piezas de paginación grandes conjuntos de datos en trozos más pequeños que son manejables para el usuario leer y hacer frente. En segundo lugar, los controles de paginación transmite información al usuario acerca, el tamaño del conjunto de datos es, y cuánto se deja de leer o ver y cuánto han ya visto. Paginación proporciona al usuario un descanso natural a partir de la lectura o escanear el contenido del conjunto de datos, y les permite volver a evaluar si desean continuar mirando a través de más datos, o navegar fuera de la página. Esta es también la razón por controles de paginación se colocan más a menudo por debajo de la lista: para proporcionar al usuario una opción para continuar la lectura a través del conjunto de datos más grande.

Autocomplete

Problema El usuario necesita el reconocimiento de búsqueda con la ayuda al realizar las tareas de búsqueda que son difíciles de recordar o fácilmente escrito mal.

UsoSe utiliza para ayudar con la ambigüedad-temas, cuando un elemento se puede introducir en múltiples formasSe utiliza cuando el tipo de información introducida fácilmente se puede emparejar con una pieza específica de información en el sistema.Se utiliza cuando sugerencias de autocompletar pueden ser extraídos de un conjunto de datos que es manejable en tamaño.

SoluciónEl patrón de autocompletado es un mecanismo predictivo, reconocimiento basado utilizado para ayudar a los usuarios en la búsqueda. Un campo de búsqueda de autocompletado presenta los elementos que coinciden con la entrada de los usuarios a medida que escribe. A medida que el usuario escribe más texto en el campo de búsqueda, la lista de elementos que coincidan se estrecha hacia abajo.

JustificaciónSugerencias autocompletado y búsqueda ahorran las pulsaciones de teclado del usuario, haciendo coincidir la consulta de un usuario con posibles coincidencias que se muestran a medida que se escribe la consulta.Se reduce el número de pulsaciones de teclas y por lo tanto permite la entrada de datos más rápida. Consultas tedioso, largos y complicados, como direcciones de correo electrónico o nombres de los aeropuertos, se pueden encontrar y seleccionar con sólo unas pocas pulsaciones de teclas.

HomeLink

Problema El usuario tiene que volver a una ubicación de inicio segura del sitio.

UsoSe utiliza cuando los usuarios con frecuencia entran en el sitio web a través de una página que no sea la página de inicio. El usuario debe ser capaz de navegar fácilmente al punto de partida o en la página principal del sitio web.

Solución-Crear un vínculo con el punto de inicio o en la página principal del sitio web en el logo del sitio en cada página en el sitio web.-Si el sitio no tiene un logotipo, a continuación, crear un enlace a la página principal del sitio web con el texto 'Inicio'. -Los enlaces y / o vinculadas imágenes deben estar siempre en el mismo lugar en todas las páginas.

JustificaciónSe ha convertido en un estándar en diseño web, que el logo del sitio siempre está vinculado a una ubicación de inicio seguro para el usuario. Normalmente, se trata de la primera página del sitio, pero también podría ser la primera página de una sección en el sitio, o alguna otra ubicación de inicio seguro para el usuario.