Se necesita acción adicional o se proporciona información
Hasta donde yo sé, el primer uso de The Dots en una interfaz de usuario gráfica se remonta a los primeros sistemas operativos Apple y Windows lanzados en 1984 y 1985 respectivamente (corríjame si me equivoco). En ambos casos, se utilizó para indicar que al hacer clic en un elemento del menú se obtendría información adicional o se requeriría una acción.
Los puntos en Macintosh System 1 en 1984 (fuente: winworldpc.com)
Los puntos en Windows 1.0 en 1985 (justo al lado del ícono de la hamburguesa, por cierto) (fuente: PCMag vía Diancheng Hu)
El patrón continúa hoy en el sistema operativo actual de Apple. En este ejemplo, al seleccionar “Preferencias del sistema…”, “App Store…” o “Reiniciar…” se mostrará una ventana adicional donde se deben realizar acciones por parte del usuario. Por el contrario, seleccionar “Suspender” o “Acerca de esta Mac” simplemente realizará una acción de inmediato.
Los puntos en MacOS Big Sur
Según Apple,
“Utilice puntos suspensivos siempre que elegir un elemento del menú requiera una entrada adicional por parte del usuario. El carácter de puntos suspensivos (…) significa que se abrirá un cuadro de diálogo o una ventana separada que solicitará al usuario información adicional o que elija”.
Microsoft también tiene mucho que decir sobre este uso.
(ver aquí, aquí y aquí):
“Si bien los botones de comando se utilizan para acciones inmediatas, es posible que se necesite más información para realizar la acción. Indique un comando que necesita información adicional (incluida confirmación) agregando puntos suspensivos al final de la etiqueta del botón.
“Generalmente, las elipses se utilizan en las interfaces de usuario para indicar que el contenido está incompleto. Los comandos que muestran otras ventanas no están incompletos: deben mostrar otra ventana y no se necesita información adicional para realizar su acción. Este enfoque elimina el desorden de la pantalla en situaciones donde las elipses tienen poco valor”.
También ofrecen una advertencia:
“Esto no significa que debas usar puntos suspensivos cada vez que una acción muestra otra ventana, sólo cuando se requiere información adicional para realizar la acción. En consecuencia, cualquier botón de comando cuyo verbo implícito sea “mostrar otra ventana” no lleva puntos suspensivos, como ocurre con los comandos Acerca de, Avanzado, Ayuda (o cualquier otro comando que enlace a un tema de Ayuda), Opciones, Propiedades o Configuración. .”
Al igual que Medium, muchos sitios y aplicaciones utilizan The Dots en lugares donde se le pide al usuario que ingrese texto, como un comentario o una actualización de estado, o un término de búsqueda. De hecho, Salesforce recomienda usar The Dots para todas las indicaciones en las que un usuario pueda ingresar texto:
Utilice puntos suspensivos en el texto fantasma para indicar que los usuarios pueden actuar. A menos que el texto fantasma termine con un signo de interrogación, finalice con puntos suspensivos.
— Guía de estilo de Salesforce
Los puntos en mensajes de comentarios en Facebook y LinkedIn
The Dots en mensajes de búsqueda en CNN y Wayfair (a través de John Saito)
Los puntos animados aparecen cuando alguien escribe en muchas aplicaciones de mensajería.
El SDK de iOS genera automáticamente un botón “Más” cuando es necesario
Los Dots también se pueden encontrar en un contexto independiente, donde al interactuar con ellos se mostrará un menú completo. La primera vez que recuerdo haberlos visto usados de esta manera fue en iOS 1 para iPhone, específicamente, como parte del elemento “UITabBar” (esa gran barra de íconos en la parte inferior de la pantalla). Hay una razón por la que este patrón se encontró en tantas primeras aplicaciones de iPhone: al crear una aplicación usando el SKD de Apple, aparecía automáticamente cada vez que la barra de pestañas incluía más de cinco elementos. Si hubiera seis elementos, el quinto y el sexto se agruparían en el botón “Más”. Este comportamiento predeterminado todavía está presente en el SDK y los resultados aún se pueden ver en muchas aplicaciones que usan la UITabBar nativa, incluida la aplicación iTunes Store. (fuente: Apple HIG)
De hecho, además de aparecer The Dots dentro menús, este uso de ellos lanzar Los menús se han vuelto tan frecuentes tanto en las aplicaciones como en la web que Google y Microsoft lo han incluido como un patrón de interfaz de usuario central en su documentación.
Por lo tanto, hay varias formas en que se utilizan los puntos en las interfaces de usuario del software. Tantas que a veces puede resultar un poco abrumador. Tome esta selección de capturas de pantalla de LinkedIn donde aparecen en todos los rincones posibles.
LinkedIn no tiene reparos en utilizar The Dots
Aquí, se utilizan para representar texto truncado, iniciar menús, indicar que seguirán acciones adicionales y solicitar la entrada de texto.
Incluso su aspecto visual está en juego. Últimamente, los puntos a menudo se muestran alineados en una columna vertical (probablemente popularizada por Google), alejándolos mucho más de sus raíces tipográficas. Se los llevaron tan lejos de casa que ni siquiera los diseñadores de mi equipo se dieron cuenta de su origen, de ahí surgió la idea de este artículo.
No puedo decir que sea un gran admirador de la versión alineada verticalmente, solo porque la semántica aquí es un poco exagerada, pero parece ser un patrón que llegó para quedarse, gracias en parte al uso predominante en las aplicaciones de Google. , documentación en su guía de estilo e inclusión en el kit de Material Design.
Los puntos como botones de “desbordamiento de acción” en la “barra de acciones” de Android y la “barra de aplicaciones” de Material Design
El ícono de la hamburguesa y su usabilidad han sido criticados desde hace años. En mi opinión, ha superado la joroba y ahora es un símbolo ampliamente reconocido y una abreviatura útil. ¿Pero qué pasa con Los Puntos? Si bien claramente han existido durante tanto o más tiempo que la hamburguesa, no han visto un uso tan generalizado hasta hace poco, aparentemente explotando en las pantallas de todas partes en los últimos cinco años. Aunque la semántica es cuestionable, el símbolo también parece haber dado el salto de “muleta de diseñador” a “abreviatura útil”. No me apoyaré completamente en esto, pero, después de pasar la mayor parte de una década en Google, confío en que probarán la mayoría de las cosas en el terreno. Si han descubierto que The Dots es eficaz, es una señal fuerte.
Yo, por mi parte, doy la bienvenida a nuestros señores de la puntuación. Creo que son lo suficientemente claros como para ser efectivos, aunque no siempre fue así. También creo que son lo suficientemente flexibles como para ser comprensibles en muchos contextos. ¿Se pueden llevar demasiado lejos? Quizás (te estoy mirando a ti, LinkedIn), pero no dejaré de usarlos en mi propio trabajo. Así que la próxima vez que te encuentres con The Dots o los incluyas en uno de tus diseños, recuerda de dónde vienen.
El Colectivo UX dona US$1 por cada artículo publicado en nuestra plataforma. Esta historia contribuyó a Bay Area Black Designers: una comunidad de desarrollo profesional para personas negras que son diseñadores e investigadores digitales en el Área de la Bahía de San Francisco. Al unirse en comunidad, los miembros comparten inspiración, conexión, tutoría entre pares, desarrollo profesional, recursos, comentarios, apoyo y resiliencia. El silencio contra el racismo sistémico no es una opción. Construya la comunidad de diseño en la que cree.