Las aplicaciones web son cada vez más frecuentes en Internet. Algunos pueden argumentar que son simplemente sitios web más complicados. Independientemente de su definición; ¿Qué sucede cuando estás diseñando para grandes cantidades de datos que fluctúan constantemente?
Hay algunos ejemplos de interfaces controladas por datos y todas tienen que manejar una gran cantidad de datos variados que cambian constantemente. Las más comunes son las áreas de administración y los paneles analíticos. Los datos pueden tomar muchas formas; Gráficos, tablas, tablas o texto. Cada una puede mostrarse de varias formas diferentes según el contexto y el significado que intenta transmitir con los datos. Una cosa para recordar es que rara vez puede estar seguro de la longitud o cantidad de los datos que necesita atender; así que piensa simple para empezar?
Consistencia y previsibilidad
Uno de los aspectos más importantes del diseño de interfaces fuertemente impulsadas por datos es hacer que sean consistentes. La coherencia permite a los usuarios familiarizarse con un área de una interfaz y poder usar cualquier otra área simplemente por los esquemas creados con el área anterior. Así es como se hace predecible una interfaz; Jugar con los modelos mentales existentes y el comportamiento aprendido.
Para hacer que las áreas sean coherentes, debe comprender el contexto más amplio de la interfaz y ver qué tan bien sus ideas de interfaz iniciales pueden soportar el escrutinio de datos variados.
Por ejemplo: es posible que no sea necesario filtrar u ordenar una tabla en una vista, pero ¿qué sucede cuando se le presenta otra tabla en un área diferente? ¿Puede usar la misma interfaz que acaba de crear si la segunda tabla necesita filtrarse y tiene puntos destacados que requieren una clave o leyenda?
La consistencia consiste en permitir que el diseño se adapte retrospectivamente, en función de su creciente conocimiento de la complejidad. Esta es la razón por la que es mejor comenzar con prototipos de baja fidelidad y probar sus ideas con casos extremos (cosas que no sucederán muy a menudo pero que podrían romper el diseño).
¿Se utilizará el patrón de la tabla en otras áreas que puedan tener funciones adicionales? Si la mayoría de las tablas necesitan ordenarse, diseñe teniendo esto en cuenta. El objetivo no es tener que "atornillar" nada a un componente existente para que se sienta fuera de lugar. Es más fácil eliminar un botón de una barra de herramientas que averiguar cómo incorporarlo sin una barra de herramientas.
Patrones, estados y componentes resuables
Para hacer que la coherencia sea una realidad, necesitas construir inteligente. Si no diseña para cada vista individual, puede producir un conjunto de reglas que se pueden aplicar a alguna ver. Una pintura por números si quieres. Esto permite a su cliente u otros diseñadores ensamblar rápidamente nuevas páginas o diseños con un mínimo de esfuerzo.
Patrones
Un patrón es un pequeño conjunto de elementos que van juntos. Esto podría ser una sección de una barra de herramientas, o tal vez un conjunto de botones de calificación, y generalmente son una forma de organizar la información conectada. Una etiqueta y una entrada también serían un patrón dentro de un formulario.
A continuación se muestran algunos grupos de patrones de productos de Google:
- Ordenar desplegable
- Navegación izquierda y derecha
- Selector de rango de fechas
- Casilla de verificación desplegable
Los patrones son de diferentes productos pero son consistentes y, por lo tanto, son predecibles para los usuarios. Juntos forman el componente de la barra de herramientas.
Estados
Los patrones pueden tener diferentes apariencias visuales dependiendo de un conjunto específico de circunstancias. Quizás haya un error, un botón esté deshabilitado o un gráfico no tenga datos. Cada necesidad debe ser considerada. En general, se clasifican en las siguientes categorías (algunas las reconocerá de diferentes pseudo selectores de CSS):
- Defecto
- Flotar
- Activo
- Atención
- Error
- Discapacitado
- Vacío
Componentes
Un componente es más grande y puede contener múltiples patrones o incluso múltiples componentes. Cuando se diseña para sitios fuertemente controlados por datos, el objetivo es proporcionar un conjunto de componentes flexibles hechos de patrones reutilizables. A continuación se muestra uno para http://phosho.co en pantallas pequeñas:
Trabajando desde un producto existente
Si está trabajando con un producto existente y está limitado por los flujos de usuarios existentes (y en algunos casos, el diseño), debe realizar una 'auditoría de plantilla'. Enumere algunos flujos de usuarios clave y tome una captura de pantalla para cada paso.
- En una Mac solo presiona Comando-Shift-3 para guardar la pantalla actual en el escritorio.
- En la PC, puede usar algo llamado Problem Steps Recorder para grabar sus pasos en un archivo .mht. A continuación, puede guardar las imágenes de ese archivo. Hay un excelente tutorial aquí.
Una vez que haya completado un flujo de usuario; agregue las capturas de pantalla a una carpeta que describa el flujo de usuarios, como 'agregar nuevo registro'. Luego imprímelos. Todos. Hay algo que decir para tener cada pantalla involucrada en un flujo de usuarios frente a usted. Fácilmente puede detectar similitudes y diferencias.
La idea de una auditoría de plantilla es comprender cuántas plantillas hay, cuántos patrones hay en cada plantilla (y en qué estado se encuentran). La mejor manera de hacer esto es colocarlos en la pared en una cuadrícula y asignar una letra para las columnas y un número para las filas (o con lo que te sientas cómodo). Esto actúa como una referencia cuando escribes cada componente.
Por ejemplo, puede tener:
- Encabezado de tabla (A2)
- Cuerpo de mesa (A2)
- Pie de tabla (A2)
- Menú Lateral - Cerrado (A1)
- Menú lateral - Abrir (B1)
- Calendario (C3)
- Calendario - Deshabilitado (C4)
Esto le permite enumerar todos los patrones que existen, pero también hacer referencia a ellos para que pueda ver rápidamente cómo se ven. Una forma de comprobar si ha enumerado todos los patrones y componentes es elegir una plantilla y ver si puede recrearla a partir de la lista de patrones y componentes que acaba de crear. Si te encuentras con algo que no está en la lista; agregalo
Trabajando desde cero
Al trabajar desde cero, tiene la libertad de crear los patrones que desee, pero también puede ser mucho más difícil, ya que no tiene nada que seguir al principio. Como se dijo anteriormente; Al diseñar componentes reutilizables, debe iniciar lo-fi con bocetos. No tienen que ser increíbles, pero son rápidos y le permiten explorar fácilmente diferentes opciones sin quedar atrapados en los detalles que a menudo ocurren en Illustrator o Photoshop.
- Crear un flujo para una tarea. debe completarse y enumerar el contenido que se puede incluir en la página.
- Dibuja algunas direcciones diferentes y las ideas. Mientras más, mejor. Luego puede comenzar a ver si hay alguna superposición con el contenido y cómo puede ser posible distribuirlo.
- Refinarlos en los esquemas de alambre y evalúe si hay áreas que tienen funciones similares pero soluciones diferentes. Considere cómo se pueden combinar para hacer una interfaz más consistente. ¿Cuáles son los patrones que está utilizando?
- Romperlo.瘩 瘩 deliberadamente 緘 緘 defiende al abogado del diablo y ve lo que tienes que hacer para romper tu interfaz. Decida si es probable que ocurra la acción de ruptura y si vale la pena abordarla.
Iconografía
La iconografía es una forma de entender el significado del contenido mediante el uso de una imagen. Hay casos en que el texto es mejor que un icono; Por lo general, cuando el concepto es abstracto y tiene un bajo costo. No toda acción necesita un icono.
Si le preocupa que los usuarios no puedan entender un ícono. Usted está probablemente Correcto. Una forma rápida de probarlo es aislar el ícono y preguntar a las personas qué creen que hace. Si tienen varias conjeturas y ninguna de ellas está cerca de forma remota, es posible que tenga un problema. Sitúe el icono en contexto y repita el proceso. Si la disponibilidad del contexto refuerza el uso correcto del icono (es decir, la gente puede adivinar qué hace desde su posición en la interfaz), entonces es probable que esté bien. Si la gente aún no puede adivinar, considere cambiar el ícono o agregar algún texto o microcopia.
Reducción progresiva
Existe un concepto interesante llamado reducción progresiva que se puede aplicar en circunstancias en las que desea capacitar a los usuarios que un icono inusual se relaciona con una acción específica. Al comenzar con un ícono acompañado de texto (para que sea obvio en el primer uso) y simplificar gradualmente la interfaz a medida que se usa, los usuarios comienzan a asociar el ícono con una acción que sería imposible de adivinar con solo usar el ícono solo.
Entregables
Ahora que ha creado algunos wireframes refinados que expresan flujos de usuarios clave, que abarcan una masa de patrones y componentes reutilizables; ¿Qué le muestras al cliente?
Hay una serie de advertencias que pueden afectar lo que usted entrega, como por ejemplo, si está haciendo el HTML / CSS / JS, o si está siendo manejado por un tercero. En cualquier caso, para garantizar la longevidad del diseño y, lo que es más importante, la consistencia a medida que se implementan más funciones, necesita algún tipo de referencia o guía que cualquier persona pueda ver y (o incluso actualizar) que sea la base para todas las decisiones futuras sobre La interfaz.
El lavabo de la cocina
El Fregadero de la cocina es HTML / CSS y, a veces, JS, que muestra todos los diferentes componentes y patrones en una sola página, lo que garantiza que no se rompa nada (ni diseño ni código) cuando se colocan en varios órdenes. En su forma más simple, son solo elementos HTML nativos que garantizan que se cubren los aspectos básicos.
- Fregadero de cocina HTML Rand 箭 y 嚙 瞑 aul Randell
- Patrón Primer 嚙 箭 y Jeremy Keith
Kits de interfaz de usuario
Los kits de interfaz de usuario suelen ser PSD estáticos y contienen versiones estilizadas de elementos html fundamentales. Por lo general, incluyen botones, entradas, cuadros de selección, así como controles deslizantes y seleccionadores de fecha. Algunos pueden ser muy completos y generalmente se entregan cuando el proceso de construcción será realizado por un tercero. Evitan que tenga que producir una maqueta de cada pantalla en cada estado.
- Kits de interfaz de usuario Dribbble
- Kit de interfaz de usuario transparente Victor 箭 y Victor Erixon
- Kit de interfaz de usuario limpio Matt 箭 y Matt Gentile
- Silky Light UI 嚙 箭 y Okidoci
Guía de estilo visual
Las guías de estilo visual van mucho más allá de las referencias visuales a un diseño. Son instructivos y, a menudo, incluyen pautas sobre cuándo y dónde deben mostrarse los patrones y componentes y en qué estado. Se producen mejor en código y pueden actualizarse a medida que pasa el tiempo.
La clave para la consistencia y para mantener esa consistencia en un producto en expansión, fuertemente impulsado por datos, es tener una base sobre la cual se derivan todas las decisiones de diseño. Tener una 'copia maestra' y un conjunto de reglas fáciles de seguir significa que cualquiera puede construir (casi) cualquier cosa y hacer que se ajuste al diseño existente.
Cuando se encuentra con algo que no está incluido en la guía de estilo, puede crear una solución a su problema y agregarle elementos, patrones o componentes adicionales adicionales con algunas instrucciones que lo pongan a disposición de todos.
Las guías de estilo son evolutivas y nunca se terminan. Entonces necesita ser mantenido sin embargo. Si no es así, gradualmente la gente dejará de usarlo, ya que está desactualizado y es cuando los productos comienzan a divergir.
- Twitter Bootstrap
- Google Styleguide
- Paul Robert Lloyd Styleguide
- BBC Global Experience Language
- Directrices de la interfaz humana de Apple
Recuérdalo establece las expectativas de sus clientes. Si usted dice que va a entregar maquetas de píxeles perfectos, entonces eso es lo que van a esperar.
Conclusión
Los usuarios se centran en las tareas y, a menudo, se encuentran en el "camino más corto hasta la finalización", lo que significa que debe diseñar para que puedan completar su tarea de la mejor manera posible con el mínimo esfuerzo.Los patrones valiosos aceleran este proceso al permitir a los usuarios usar lo que han aprendido de un aspecto de su interfaz y aplicarlo a otro. Se vuelven rápidos para completar nuevas tareas porque confían más en sus acciones.
Una advertencia: no se deje arrastrar por el aspecto de la interfaz en lugar de la función; la forma en que se ve algo es lo último que les importa a los usuarios. Así que, antes de apresurarse a Photoshop, recuerde eso primero y ante todo; a los usuarios les importa si algo trabajos. La consistencia y la previsibilidad tienen un gran papel que desempeñar en esto.
Lectura adicional
Artículos
- Front End Styleguides by Anna Debenham
- CSS Systems por Natalie Downe
- Diseñando para una jerarquía de necesidades por Steve Bradley
Recursos
- Patrón de tap
- Estados vacios
- Patronaje
- Patrones UI
- PTTRNS
- Galería de elementos de diseño