¿Cómo resolver un problema de repetición en un diseño?

ACTUALIZADO: ProKeys actualizado con nuevo diseño está disponible. Puedes comprobarlo. ¡Gracias!

Hice un rediseño reciente de ProKeys para minimizar los fragmentos que ocupan espacio. Cambié esto:

Diseño antiguo

diseño antiguo(ignore las flechas y todo, pero observe que solo se muestran dos fragmentos a la vez)

a esto:

Nuevo diseño:

nuevo diseño

Ahora ahorra mucho espacio. Se muestran muchos más fragmentos en el mismo espacio. El usuario puede ver el fragmento completo haciendo clic en el botón "Ver". Pero si nota, hay mucha repetición de los tres botones: "Ver", "Editar" y "Eliminar", que se ven extraños cuando se ven a la vez.

Por lo tanto, quiero saber si hay alguna forma de mejorar esto para evitar la repetición.

Además, no puedo usar el efecto de desplazamiento porque las personas en una computadora portátil sin mouse pueden tener problemas.

ACTUALIZAR:

  1. He decidido ir con el enfoque de una flecha hacia abajo, que revelará las opciones al hacer clic. Compartiré el producto final cuando esté listo con todos ustedes.

  2. El enfoque de Mass Actions de Ilan también es muy agradable. Pero siento que sería difícil de implementar. Definitivamente sigue siendo una buena alternativa.

  3. El diseño final sería como: al hacer clic en la flecha hacia abajo, el fragmento se mostrará completo y solo se mostrarán los botones editar y eliminar, mientras que la flecha hacia abajo se convertirá en una flecha hacia arriba. Al hacer clic de nuevo se invertirá la acción. ¡Creo que esto sería fácil y más divertido!

  4. Gracias a todas las personas que respondieron. ¡Su esfuerzo fue realmente útil!

¡Gracias a todos!

Me gusta cómo lo hace el sitio web de Dropbox. Funciona prácticamente como los administradores de archivos: Explorer (Windows) y Finder (Mac) lo hacen. El clic derecho le da una lista de funciones, tales como: delete, rename, move, etc.... Puede seleccionar varios elementos con Ctrl o Cmd y hacer clic en Shift para realizar operaciones masivas. Y cuando selecciona varios elementos, aparece una barra de herramientas encima de la lista o en la parte superior de la ventana gráfica. Otros sitios similares usan el método de flecha en lugar de hacer clic con el botón derecho o además de eso y el método de casilla de verificación en su lugar o ctrl o cmd y cambiar la selección o además de eso.
@Joonas Esa es una información útil que compartiste sobre Dropbox. ¡Gracias! ¡Estoy seguro de implementarlo la próxima vez que haga algo similar!

Respuestas (5)

Escupiendo aquí, porque no conozco tus limitaciones.

Podría introducir algunos íconos (incluso podría dejar caer el color en el botón, aquí también. También podría deshacerse de todos los botones y usar una lupa).

ingrese la descripción de la imagen aquí

O puede colocar el color en los botones y agregarlo al pasar el mouse o activo (el desplazamiento solo debería ser un problema con los dispositivos táctiles, con el dedo en la pantalla).

ingrese la descripción de la imagen aquí

EDITAR:

Si desea agregar un ícono que abra un menú de opciones, este sería el ícono que usaría (mi única preocupación sería que la gente PUEDE confundirlo con un sistema de arrastrar y soltar, dado el hecho de que es una lista. Pero independientemente de este ícono se usa para cajones y listas desplegables en dispositivos móviles y de escritorio).

Recomendaría usar una lista desplegable, pero depende de usted.

También puede usar una "flecha" hacia abajo o un Triángulo hacia abajo.

ingrese la descripción de la imagen aquí

Me gusta la idea de los iconos. Además, de su publicación, también tuve la idea de tener un pequeño ícono a la derecha, que al hacer clic, permitiría que los tres botones se deslizaran a la vista. Pero con esta idea, no sé cómo se vería ese ícono y cómo dejaría el usuario que los botones se deslizaran fuera de la vista. Soy muy nuevo en el diseño, así que necesitaría su ayuda. ¡Gracias!

Tal vez podría poner un pequeño menú desplegable al final de cada entrada que lo expande a la vista completa cuando hace clic en él (similar a minimizar/maximizar). Los botones de edición y eliminación podrían luego agregarse a esa vista ampliada de cada elemento.

¡Buena idea! Pero, ¿qué sucede si el usuario desea anular la expansión del fragmento expandido? ¿Cómo lidiaría con eso? Además, ¿cómo debería verse el ícono desplegable? Lo siento, pero soy muy nuevo en el diseño, ya ves.
Tal vez como el trazo de un triángulo invertido con el lado superior borrado. Se vería como la función y=abs(x) de -1 a 1

Hay muchas opciones aquí. Lo que funcione mejor dependerá de sus usuarios particulares. Si el objetivo es simplemente minimizar el desorden visual, entonces sugeriría lo siguiente:

Vista estática:

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet

----------------------------------------------------

Al pasar el mouse sobre un elemento (en este caso, el segundo:

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet                       / Edit   X Delete
------------                       ------   --------
----------------------------------------------------

Your Snippet

----------------------------------------------------

Esto solo funcionaría para un dispositivo no táctil, por supuesto. Si el objetivo es admitir también dispositivos táctiles (lo cual es un buen objetivo), entonces no querrá depender completamente del desplazamiento. Algo a considerar.

Otra opción a considerar es considerar la importancia de que todas estas opciones aparezcan siempre en esta página. ¿Las personas necesitan editar y eliminar muchas cosas desde esta pantalla? Si no, tal vez mueva EDIT y DELETE a la página VIEW en su lugar.

Este es un problema muy común que generalmente se resuelve con "ACCIONES MASIVAS": le proporciona al usuario botones de radio y solo una línea de acciones masivas, mire la imagen, después de que el usuario elija los fragmentos, presiona las acciones deseadas. También debe proporcionar la opción para la acción masiva de las opciones de visualización.

ingrese la descripción de la imagen aquí

Este definitivamente será un buen enfoque. ¡Gracias!

Otra opción

Aquí hay una maqueta del menú desplegable completo mencionado en el comentario a continuación. (Se eliminó el diseño del botón original). Dado que el menú desplegable en este ejemplo abarca un área más grande, puede contener los 3 botones, así como información adicional. Se puede diseñar en consecuencia (colores, botones, estilos, alineación...), pero el truco es no dejar que el menú desplegable grande cubra los iconos de los botones desplegables del otro título.

ingrese la descripción de la imagen aquí

Para un ícono desplegable, generalmente es un cuadrado con 3 líneas horizontales, pero un triángulo hacia abajo también funciona. Qué tecnología usar para un menú desplegable es un tema extenso. Las soluciones implican el uso de JavaScript, jQuery o CSS. Si no le preocupan los usuarios que tienen JavaScript deshabilitado, tal vez jQuery o JavaScript sean el camino a seguir. Aquí hay un ejemplo de jQuery: https://coderwall.com/p/3uwgga .

¡Gracias por su respuesta! Pero en realidad, quería evitar cualquier repetición. Y así, quería evitar usar los botones una y otra vez.
De nada, y usted tiene una muy buena aplicación. Parece que BurninLemons agregó algunas nuevas maquetas desplegables de botones que pueden funcionar para usted. DA01 también tiene una buena idea al hacer que toda la fila muestre más información cuando se toca. Podría abarcar el ancho de la página y mostrar toda la información necesaria. Estoy bastante seguro de que querrá usar JavaScript o jQuery para la funcionalidad desplegable.
Tu nueva forma es realmente agradable. Voy a implementar una característica similar a ella. ¡Gracias!
De hecho, estoy usando esta técnica para convertir un mega menú de escritorio en una computadora de mano, y funciona bien. Algunas cosas a considerar son que si la lista es más larga que la ventana de visualización portátil, solo desea que el icono de flecha active el menú desplegable, no toda la fila de fragmentos. Si la fila es el activador, los usuarios pueden activar accidentalmente un menú desplegable si se desplazan demasiado lento. El otro punto es que el menú desplegable no cubra las otras flechas. Además, cuando se toca, la fila y el menú desplegable cambian a colores de fondo coincidentes, para mostrar la asociación. Gracias por los comentarios positivos y el seguimiento, se agradece :)
¿Cómo resolver un problema de repetición en un diseño?
RespuestasAquíPolítica de privacidad1y, 0v