Share
Diseñadores contra desarrolladores: es un argumento tan antiguo como las computadoras. Sin embargo, la verdad es que ninguno puede vivir sin el otro. Un diseño de interfaz de usuario brillante es tan inútil sin funcionalidad como la mejor pieza de código con una interfaz fea e inutilizable. En esta primera publicación sobre Conceptos básicos de UI para desarrolladores, voy a intentar establecer algunas reglas básicas simples que los desarrolladores pueden seguir para asegurarse de que sus aplicaciones, plantillas y prototipos sean tan hermosos como el código en sí, y que puedan utilizarse para iniciar.
Piensa: la primera impresión es la última impresión..
La alineación se refiere a la posición u orientación de un elemento en relación con otro elemento o consigo mismo. Cuando nos referimos a dos elementos que están alineados entre sí, la alineación generalmente se refiere a qué lado de ambos elementos está en línea. En el contexto del texto, la alineación se refiere al lado en el que el texto está anclado en una línea recta.
En la imagen de arriba, el segundo ejemplo de un diseño de formulario simple muestra etiquetas que están alineadas a la derecha entre sí con campos de entrada que están alineados a la izquierda. Esto garantiza que la asociación entre cada etiqueta y su campo de entrada sea clara y que el usuario no se confunda si algunas etiquetas son demasiado pequeñas mientras que otras son largas.
Piense: asegúrese de que los campos de entrada no estén demasiado lejos de la etiqueta más larga. Si la variación en el ancho es pequeña, intente alinear a la derecha las etiquetas y alinear a la izquierda los campos de entrada.
Para el texto, es ideal utilizar la alineación a la izquierda cuando se diseña para la pantalla. Dado que la mayoría de los métodos de representación de tipo de pantalla no pueden distribuir el espacio de manera adecuada al justificar el texto en ambos lados, la alineación a la izquierda mantiene el texto legible y bien organizado. Por supuesto, puede usar la alineación central y derecha donde el diseño lo exige, pero generalmente están reservados para casos especiales y trozos de texto más pequeños..
El propósito principal de cualquier interfaz de usuario es permitir que el usuario interactúe con la aplicación. Esto, lo creas o no, no será posible a menos que le digas al usuario qué debe hacer y en qué orden. Ya que no estará detrás de cada usuario para ayudarles con esto, la interfaz debe proporcionar todas las claves. Aquí hay algunas preguntas que debe hacer al evaluar si el flujo de trabajo previsto es apropiado:
Tomemos el ejemplo de una selección de categoría de búsqueda en iStockPhoto. En este caso, puedo buscar todo o seleccionar una categoría específica para limitar mis búsquedas a ese tipo de información. Dado que el acto principal es ingresar un término de búsqueda y presionar Buscar, estos deberían ser bastante obvios. Un posible paso intermedio es seleccionar una categoría, que puede ser una lista desplegable entre (lo acertó) el campo de búsqueda y el botón Buscar.
Otro ejemplo es el cuadro de diálogo de ingreso / gasto en la aplicación cashbase. Los campos se organizan de acuerdo con el flujo de trabajo típico que se usará para registrar dicha información: ingrese la cantidad (que es el elemento más importante), seleccione una categoría, agregue una nota si es necesario y haga clic en Agregar. La información secundaria que se usará con mucha menos frecuencia, como la fecha que de forma predeterminada es hoy y la opción de repetir o cancelar, está disponible, pero es mucho más sutil.
Los elementos relacionados en una interfaz deben agruparse. Esto podría parecer sentido común cuando lo menciono, pero no siempre se entiende bien. La razón por la que todos los enlaces de navegación de la página en la mayoría de los sitios web se presentan en una sola barra horizontal, es para que el usuario pueda identificar la relación de un vistazo y tomar la decisión de interactuar con ellos sin ninguna confusión..
Veamos este ejemplo de Gmail, una aplicación que muchos utilizan de forma regular. Esta es la barra de herramientas que aparece en la parte superior cuando abre un correo. Aunque todos esos botones realizan alguna acción en el mensaje abierto, se agrupan aún más según lo que hacen: acciones que se usarían para deshacerse del mensaje (archivo, correo no deseado, eliminar), para cambiar la importancia del mensaje (cuando usando la bandeja de entrada de prioridad), acciones relacionadas con la etiqueta y, finalmente, un menú desplegable con opciones secundarias.
Otro ejemplo de buen uso de la proximidad es la barra de opciones en Zootool. La barra de herramientas en la parte inferior está dividida en tres conjuntos, cada uno correspondiente a los tres paneles de la aplicación: la lista de paquetes a la izquierda, la ventana de correo en el centro que contiene todos sus marcadores y el panel de detalles a la derecha.
No todo en una interfaz de usuario, o cualquier diseño, tiene la misma importancia que todo lo demás. La jerarquía es la disposición de los elementos de una manera que denota lo que es superior en orden, lo que sigue, y así sucesivamente..
Veamos este ejemplo aquí e intentemos identificar cuál es el orden de precedencia. Dado que todo, títulos, etiquetas y texto de párrafos, se ve igual, uno tiene que leer todo para que tenga sentido. Si la misma interfaz se ajustó un poco como a continuación, el impacto general en la legibilidad y, a su vez, la facilidad de uso de la interfaz es enorme..
Como regla general, el encabezado de la página debe ser más grande y más visible en la pantalla. A esto le siguen los títulos de las secciones, los subtítulos y luego las etiquetas más pequeñas. El texto del párrafo puede ser más o menos importante dependiendo de su propósito. Tampoco se limita a texto. Los botones de acción primaria se pueden diferenciar de las acciones secundarias al hacerlas más brillantes, más grandes o más elegantes. Los campos de entrada para entradas obligatorias se pueden hacer más obvios que los otros. Podría seguir, pero creo que entiendes la idea.
Otra consideración muy importante al diseñar interfaces es asegurar una clara diferenciación entre los elementos. Por supuesto, usted quiere que el texto sea legible en el fondo, pero el contraste va más allá de simplemente usar texto claro sobre un fondo oscuro o viceversa. Los encabezados y el texto del párrafo deben ser claramente distinguibles. Los paneles y las barras de navegación deben estar separados unos de otros para que el usuario sepa qué es qué. La lista continua.
El contraste se puede establecer utilizando una o más de las siguientes características:
Esto debería ser obvio, pero es sorprendente la frecuencia con que las personas se deslizan en este punto. Si su fondo es claro, obviamente desea que el texto sea oscuro para garantizar la legibilidad. Aunque en teoría los colores complementarios deberían funcionar bien juntos, no siempre es tan fácil. Intente colocar texto verde claro sobre un fondo rojo y sabrá lo que estoy diciendo.
Las posibilidades aquí son ilimitadas, por lo que mi primera recomendación para cualquiera que busque seleccionar colores es elegir una paleta de colores popular en sitios como Adobe Kuler o ColourLovers. Los usuarios apasionados contribuyen, evalúan y votan a menudo, quienes por lo general conocen el color. Por lo general, todos los aspectos básicos de la combinación de colores y el contraste se tratan, así que es solo una cuestión de decidir qué combinación de colores funciona en el contexto de su aplicación..
Sin embargo, una nota de precaución: ten mucho cuidado de no exagerar con el color. No desea que ellos eclipsen la utilidad y la facilidad de uso de su aplicación..
Otra buena manera de diferenciar los elementos, en función de la jerarquía, la categorización o el flujo visual, es usar diferentes tamaños. Esto se aplica al texto tanto como a las imágenes, fondos y elementos estáticos o interactivos. Es posible que desee poner más énfasis en el botón de acción principal, por ejemplo, y mantener los botones secundarios comparativamente menos accesibles. O las indicaciones opcionales pueden ser más pequeñas y livianas que las etiquetas primarias en un formulario.
La aplicación TeuxDeux hace un trabajo brillante al usar el color para diferenciar entre el pasado, el presente y el futuro. Dado que el diseño está orientado hacia una semana laboral, se utilizan diferentes tamaños de texto para asegurarse de que los nombres de los días sean fáciles de identificar, mientras que las fechas son comparativamente más sutiles.
Dado que el propósito principal de cualquier interfaz de usuario es permitir que los usuarios interactúen con la aplicación, es imperativo que los alumnos sepan intuitivamente qué hacer. Como creadores de la interfaz, es muy fácil olvidar que no estará allí para que cada usuario les diga qué hacer. Los usuarios tampoco tienen la paciencia de leer manuales y guías de inicio rápido antes de sumergirse en el uso de una aplicación. La interfaz es necesaria para que quede bien claro qué partes de la misma se pueden hacer clic, tocar, arrastrar, en resumen, interactiva..
Todo el mundo sabe cómo accionar un interruptor eléctrico, ¿verdad? Lo que hace que sea obvio para cualquier persona que se debe presionar un interruptor en cierto punto para cambiar de estado se llama pago. En la superficie plana de una pantalla (de escritorio, móvil o de otro tipo) se pueden utilizar diferentes técnicas para permitir a los usuarios hacer clic intuitivamente en un botón o escribir dentro de un campo de entrada. Al crear hipervínculos de texto, agregar un subrayado para el enlace es el estándar más utilizado, aunque hay muchas otras formas creativas de hacerlo..
Aquí hay unos ejemplos:
Siguiendo con el ejemplo del interruptor, ¿cómo sabe si al presionar el interruptor hizo lo que se suponía que debía hacer? La luz se enciende o apaga, o en algunos casos una luz dentro del interruptor ayuda a aclarar si el interruptor está encendido o apagado.
En una aplicación, dicha información puede ser muy obvia en los casos en que un botón navega a otra página o abre una ventana emergente, pero ¿qué pasa con las situaciones en las que todo lo que hace es procesar algunos datos en segundo plano, como cuando se guardan cambios en la configuración del usuario? Es fundamental algún tipo de mecanismo de retroalimentación para que los usuarios sepan que su acción fue exitosa. Esto podría ser tan simple como un mensaje de "se guardaron tus configuraciones", una breve notificación en la parte superior de la página o un resaltado rápido alrededor del área que se actualizó.
Cuando agrega una nueva tarea en Remember the Milk, puede aparecer en la lista en la misma página o simplemente agregarse a otra lista en segundo plano (si, por ejemplo, la tarea se ha asignado a una categoría diferente). Por lo tanto, la retroalimentación para la acción se proporciona en dos niveles:
El texto en su aplicación, desde el logotipo hasta los títulos, etiquetas y copia, es su principal modo de comunicación con los usuarios. Dado que es la forma en que sus usuarios acceden a la información sobre la aplicación o a través de ella, la forma en que establece el tipo puede significar la diferencia entre el éxito y el fracaso. Por supuesto, los títulos tienen que ser más grandes que el texto del cuerpo y la letra pequeña debe ser, bueno, fina; Pero muchas otras decisiones también influyen en cómo los usuarios consumen información..
Paso uno: define tus fuentes. Me sorprende la cantidad de desarrolladores que nunca se molestan en cambiar la fuente en la que se genera el texto. Las fuentes predeterminadas cambian de un sistema operativo a otro y de un navegador a otro, lo que significa que, a menos que indique explícitamente qué fuente desea utilizar, su texto se enviará a Se ve diferente en cada combinación de sistema operativo y navegador. Además, Times New Roman, que muchos de los navegadores aún utilizan como fuente predeterminada, no es una buena fuente para leer en pantalla. A menudo, mi primera recomendación es usar una fuente sans-serif, aunque Georgia o la nueva fuente Cambria en Windows 7 también se ven bien.
Si decide utilizar fuentes que no sean las seguras, disponibles universalmente como Arial / Helvetica, Georgia, Tahoma, etc., asegúrese de que haya una forma de renderizarlas de manera similar en todas las plataformas. Si Flash es el entorno de desarrollo de su elección, insértelos donde sea necesario. Para aplicaciones basadas en HTML / JS, use @ font-face en CSS o cualquiera de los servicios de fuentes web como Typekit o Google WebFonts. Sin embargo, recuerde que estas técnicas vienen con una advertencia de tamaños de archivo adicionales para las fuentes incrustadas. Si la velocidad y la capacidad de respuesta son fundamentales para usted, apostar por las fuentes básicas es su mejor opción..
Renuncia: Sí, sé que Arial y Helvetica no son exactamente similares, pero son lo suficientemente similares para que la mayoría de los usuarios no noten la diferencia.
La cantidad de espacio entre dos líneas de texto es la principal. Desea que el encabezado de su texto de párrafo (altura de línea en lenguaje CSS) sea al menos el 140% del tamaño de la fuente para asegurarse de que sea fácil de leer. Un poco menos y su texto será mucho más difícil de leer y, lo que es más importante, de escanear.
Si planea traducir su aplicación a cualquiera de los idiomas, y debería hacerlo, es mejor probar la interfaz desde el principio con diferentes scripts. Como mínimo, la cantidad de espacio que requiere un determinado mensaje puede variar drásticamente en los diferentes scripts. Los scripts de Asia Oriental utilizan menos palabras en promedio, pero necesitan un tamaño de fuente mayor, los scripts Indian (Indic) también deben ser un poco más grandes para ser legibles y los scripts del Medio Oriente (como el árabe) van de derecha a izquierda en lugar de la izquierda habitual -a derecha.
Eso es todo por ahora. Espero que estos consejos cubran lo suficiente para que puedas comenzar a aplicarlos en tus proyectos de inmediato. Al igual que con la mayoría de las disciplinas relacionadas con el diseño, no hay reglas estrictas que seguir, y cada uno tiene su propia opinión sobre cómo deberían funcionar las cosas. Entonces, si no está de acuerdo con alguna de mis sugerencias anteriores, o incluso si está de acuerdo con ellas pero tiene una perspectiva diferente, escuchémoslas en los comentarios..
A continuación, tomaremos toda esta sabiduría e intentaremos aplicarla a una interfaz real. Manténganse al tanto!
Accentsconagua