Advertisement
  1. Code
  2. Designing

Diseño de interfaz de usuario para desarrolladores: Introducción

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

Diseñadores contra desarrolladores: es un argumento tan antiguo como las computadoras. La verdad es que, sin embargo, ninguno puede vivir sin el otro. Un diseño de interfaz de usuario brillante es tan inútil sin funcionalidad como el mejor código con una interfaz fea e inutilizable. En esta primera publicación sobre Fundamentos de la interfaz de usuario para desarrolladores, voy a tratar de diseñar algunas reglas básicas simples que los desarrolladores puedan seguir para asegurarse de que sus aplicaciones, plantillas y prototipos sean tan hermosos como el código en sí, y que puedan ser utilizados para arrancar.

Piensa: la primera impresión es la última impresión.


Alineació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 se alinean entre sí, la alineación usualmente 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.

Diseño de formulario

Alignment of form fieldsAlignment of form fieldsAlignment of form fields

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 asegura que la asociación entre cada etiqueta y su campo de entrada es clara y el usuario no se confunde si algunas etiquetas son demasiado pequeñas, mientras que otras son largas.

Piensa: asegúrate 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 los campos de entrada de alineación a la izquierda.

Texto

Text alignmentText alignmentText alignment

Para texto, es ideal usar alineación izquierda cuando se designe para la pantalla. Debido a que la mayoría de los métodos de representación del tipo de pantalla no pueden distribuir el espacio de forma adecuada cuando se justifica el texto en ambos lados, la alineación izquierda mantiene el texto legible y bien organizado. Por supuesto, puede usar el centro y la alineación derecha cuando el diseño lo exija, pero generalmente están reservados para casos especiales y trozos de texto más pequeños.


Fluir

El objetivo principal de cualquier interfaz de usuario es permitir que la interfaz del usuario con la aplicación. Esto, lo creas o no, no será posible a menos que le digas al usuario lo que debe hacer y en qué orden. Ya que no estará detrás de cada usuario para ayudarlos con esto, la interfaz debe proporcionar todas las pistas. Aquí hay algunas preguntas para hacer al evaluar si el flujo de trabajo deseado es apropiado:

  • ¿Qué tan crítico es que la tarea se realice en un orden de pasos determinado?
  • ¿Es obvio para el usuario dónde comenzar y qué hacer después?
  • ¿El resultado previsto es explícito o implícito, implícitamente, si no explícitamente?
Search with category selection n iStockPhotoSearch with category selection n iStockPhotoSearch with category selection n iStockPhoto

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 adivinó correctamente) el campo de búsqueda y el botón Buscar.

The income/expense entry dialog in cashbaseThe income/expense entry dialog in cashbaseThe income/expense entry dialog in cashbase

Otro ejemplo es el diálogo de entrada de ingresos / gastos en la aplicación cashbase. Los campos se organizan de acuerdo con el flujo de trabajo típico que se utilizará 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 utilizará con mucha menos frecuencia, como la fecha que está por defecto hoy, y la opción de repetir o cancelar, están disponibles, pero son mucho más sutiles.

Otras lecturas:


Proximidad

Los elementos relacionados en una interfaz deben agruparse. Esto puede parecer sentido común cuando lo menciono, pero no siempre se entiende bien. La razón por la cual todos los enlaces de navegación de la página en la mayoría de los sitios web se presentan en una única barra horizontal, es para que el usuario pueda identificar la relación de un vistazo y elegir interactuar con ellos sin confusión.

The message toolbar in GmailThe message toolbar in GmailThe message toolbar in Gmail

Veamos este ejemplo de Gmail, una aplicación que muchos usan regularmente. 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 en función de lo que hacen: acciones que se usarían para deshacerse del mensaje (archivo, correo no deseado, eliminar), para cambiar la importancia del mensaje (cuando utilizando la bandeja de entrada de prioridad), acciones relacionadas con la etiqueta y finalmente un menú desplegable con opciones secundarias.

Feature grouping in ZootoolFeature grouping in ZootoolFeature grouping in Zootool

Otro ejemplo del buen uso de la proximidad es la barra de opciones en Zootool. La barra de herramientas en la parte inferior se divide en tres conjuntos, cada uno correspondiente a los tres paneles de la aplicación: los paquetes de listas a la izquierda, la ventana de correo en el centro que contiene todos sus marcadores y el panel de detalles a la derecha.

Otras lecturas:


Jerarquía

No todo en una interfaz de usuario, o en 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 qué es más alto en orden, qué viene después, y así sucesivamente.

A layout with no sense of hierarchy within elementsA layout with no sense of hierarchy within elementsA layout with no sense of hierarchy within elements

Miremos este ejemplo aquí e intentemos identificar cuál es el orden de precedencia. Como todo, títulos, etiquetas y texto de párrafo, se ve igual, uno tiene que leer todo para tener sentido. Si la misma interfaz se modificó un poco como a continuación, el impacto general en la legibilidad y, a su vez, la usabilidad de la interfaz es enorme.

The same layout with a better sense of hierarchyThe same layout with a better sense of hierarchyThe same layout with a better sense of hierarchy

Como regla general, el encabezado de la página debe ser más grande y más visible en la pantalla. Esto es seguido por títulos de sección, subtítulos y luego etiquetas más pequeñas. El texto del párrafo puede ser más o menos prominente dependiendo de su propósito. Tampoco se limita al texto. Los botones de acción primaria se pueden diferenciar de las acciones secundarias al hacerlos 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 demás. Podría seguir, pero creo que entiendes la idea.


Contraste

Otra consideración muy importante cuando se diseñan interfaces es asegurar una clara diferenciación entre los elementos. Por supuesto, desea que el texto sea legible en segundo plano, pero el contraste va más allá del simple uso de texto claro sobre fondo oscuro o viceversa. Los títulos y el texto del párrafo deben ser claramente distinguibles. Los paneles y las barras de navegación deben segregarse unos de otros para que el usuario sepa qué es qué. La lista continua.

El contraste se puede establecer usando una o más de las siguientes características:

Color

Esto debería ser obvio, pero es increíble la frecuencia con la que la gente no entiende este punto. Si su fondo es claro, obviamente desea que el texto esté oscuro para garantizar la legibilidad. Aunque en teoría los colores complementarios deberían funcionar bien juntos, no siempre es tan fácil. Intenta colocar texto verde brillante sobre un fondo rojo y sabrás lo que estoy diciendo.

Good & bad examples of contrastGood & bad examples of contrastGood & bad examples of contrast

Las posibilidades aquí son ilimitadas, por lo que mi primera recomendación para cualquiera que busque seleccionar colores es elegir una paleta de colores populares de sitios como Adobe Kuler o ColourLovers. Son contribuidos, evaluados y votados por usuarios apasionados que generalmente conocen el color. Por lo general, todos los aspectos básicos de la coincidencia de colores y el contraste se tienen en cuenta, por lo que solo es cuestión de decidir qué combinación de colores funciona en el contexto de la aplicación.

Browsing through color palettes on Kuler & ColourLoversBrowsing through color palettes on Kuler & ColourLoversBrowsing through color palettes on Kuler & ColourLovers

Sin embargo, una nota de precaución: tenga mucho cuidado de no exagerar con el color. No desea que eclipsen la utilidad y la usabilidad de su aplicación.

tamaño

Otra buena forma de diferenciar elementos, según la jerarquía, la categorización o el flujo visual, es usar diferentes tamaños. Esto se aplica tanto al texto 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 solicitudes opcionales pueden ser más pequeñas y más claras que las etiquetas primarias en un formulario.

Yesterday, today and tomorrow in TeuxdeuxYesterday, today and tomorrow in TeuxdeuxYesterday, today and tomorrow in Teuxdeux

La aplicación TeuxDeux hace un brillante trabajo al usar el color para diferenciar entre días pasados, presentes y futuros. Dado que el diseño está orientado hacia una semana de trabajo, se utilizan diferentes tamaños de texto para garantizar que los nombres de los días sean fáciles de identificar, mientras que las fechas son comparativamente más sutiles.


Interacción

Dado que el objetivo principal de cualquier interfaz de usuario es permitir a los usuarios interactuar 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 ya no tienen paciencia para 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 ampliamente claro en qué partes se puede hacer clic, pulsar, arrastrar, en resumen, interactuar.

Todo el mundo sabe cómo activar un interruptor eléctrico, ¿verdad? Lo que hace que sea obvio para cualquier persona que un interruptor deba presionarse en un cierto punto para cambiar de estado se llama affordance. En la superficie plana de una pantalla (de escritorio, móvil u otra), 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 comúnmente utilizado, aunque hay muchas otras maneras creativas de hacerlo.

Aquí hay unos ejemplos:

Each interactive element has a different interaction objective, and therefore a different visual treatmentEach interactive element has a different interaction objective, and therefore a different visual treatmentEach interactive element has a different interaction objective, and therefore a different visual treatment

Siguiendo el ejemplo del interruptor, ¿cómo sabes si presionar el interruptor hizo lo que se suponía que debía hacer? La luz se enciende o se apaga, o en algunos casos una luz dentro del interruptor ayuda a aclarar si el interruptor está encendido o apagado.

En una aplicación, tal retroalimentación puede ser muy obvia en casos donde un botón navega a otra página o abre una ventana emergente, pero ¿qué pasa con las situaciones donde todo lo que hace es procesar algunos datos en segundo plano, como guardar cambios en la configuración del usuario? Algún tipo de mecanismo de retroalimentación es crítico para que los usuarios sepan que su acción fue exitosa. Esto podría ser tan simple como un mensaje "se guardaron sus configuraciones", una breve notificación en la parte superior de la página o un resaltado rápido alrededor del área que se actualizó.

Two-level feedback in Remember the MilkTwo-level feedback in Remember the MilkTwo-level feedback in Remember the Milk

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 el fondo (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:

  1. aparece un resaltado verde por un par de segundos detrás de la tarea en la lista para señalar dónde se ha agregado, y
  2. aparece un mensaje muy destacado sobre un fondo amarillo en la parte superior de la página que le permite al usuario saber qué sucedió exactamente.

Tipografía

El texto en su aplicación, desde el logotipo hasta los títulos, las etiquetas y la copia, es su principal modo de comunicación con los usuarios. Dado que es la forma en que los usuarios acceden a la información sobre la aplicación o a través de ella, la forma en que establezca 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 tiene que ser, bueno, bien; pero muchas otras decisiones también influyen en cómo los usuarios consumen información.

Fuentes

Paso uno: defina sus fuentes. Me sorprende cuántos desarrolladores simplemente nunca se molestan en cambiar la fuente en la que se genera el texto. Las fuentes predeterminadas cambian de OS a OS y de navegador a navegador, lo que significa que, a menos que especifiques explícitamente qué fuente quieres usar, tu texto se verá diferente en cada sistema operativo y combinación de navegador. Además, Times New Roman, que muchos navegadores aún usan como fuente predeterminada, simplemente no es una buena fuente para leer en pantalla. Mi primera recomendación suele ser utilizar una fuente sans-serif, aunque Georgia o la nueva fuente Cambria en Windows 7 también se ven bien.

Sans-serif fonts make a big difference to the readability of text over Times New RomanSans-serif fonts make a big difference to the readability of text over Times New RomanSans-serif fonts make a big difference to the readability of text over Times New Roman

Si decide utilizar fuentes distintas a las seguras, disponibles universalmente como Arial / Helvetica, Georgia, Tahoma, etc., asegúrese de que haya una manera de hacer que se procesen de manera similar en todas las plataformas. Si Flash es su entorno de desarrollo preferido, incrústelo 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 primordiales para usted, apegarse a las fuentes básicas es su mejor opción.

Descargo de responsabilidad: Sí, 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.

Importante

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 CSS) sea al menos 140% del tamaño de fuente para asegurarse de que sea fácil de leer. Menos y su texto va a ser mucho más difícil de leer y, lo que es más importante, escanear.

Text leading makes a huge difference to the readability of your textText leading makes a huge difference to the readability of your textText leading makes a huge difference to the readability of your text

Localización

Si planea traducir su aplicación a uno u otro idioma, y ​​realmente debería hacerlo, es mejor probar la interfaz desde el principio con diferentes scripts. Por lo menos, la cantidad de espacio que requiere determinado mensaje puede variar drásticamente en diferentes scripts. Los scripts de Asia oriental usan menos palabras en promedio pero necesitan un tamaño de letra más grande, los scripts indios (índicos) también deben ser un poco más legibles y los de medio oriente (como el árabe) van de derecha a izquierda en lugar del izquierdo habitual -a derecha.

Terminando

Eso es todo por ahora. Espero que estos consejos cubran los aspectos básicos suficientes para que pueda comenzar a aplicarlos en sus proyectos de inmediato. Al igual que con la mayoría de las disciplinas relacionadas con el diseño, no hay reglas rígidas y rápidas a seguir, y todos tienen su propia opinión sobre cómo deberían funcionar las cosas. Entonces, si no está de acuerdo con alguna de las sugerencias anteriores, o incluso si está de acuerdo con ellas, pero tiene una perspectiva diferente, hablemos de ellas en los comentarios.

A continuación, tomaremos toda esta sabiduría e intentaremos aplicarla a una interfaz real. ¡Manténganse al tanto!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.