Interfaz CMS Lógica. - ¿Es este el mejor enfoque?
Estoy desarrollando un sistema de cms. Actualmente estoy trabajando en la interfaz para agregar nuevos elementos de menú a un menú. (Debido a la lógica cms, los menús son fijos, el usuario no puede agregar o eliminar menús, solo eliminar todos los elementos del menú y Asignar elementos del menú a los menús o elementos del menú).
Para agregar un nuevo elemento de menú, el usuario debe hacer clic en el área grande arriba de los menús (ver imagen 2). Esto hará que aparezcan los campos de entrada. Si guarda sus entradas, aparecerá un nuevo elemento de menú en el cuadro "Sin asignar". Para colocar el elemento del menú, simplemente arrástrelo a uno de los menús a la posición deseada.
Si desea eliminar un elemento del menú, simplemente arrástrelo a la papelera. Si desea editar un elemento, simplemente haga clic en él, el elemento se resaltará y los campos de entrada (como los que se agregan para agregar un nuevo elemento) aparecerán llenos con la información del elemento de menú seleccionado. Simplemente cámbielo y haga clic en guardar. Para cambiar la posición de un elemento simplemente arrástrelo a la posición deseada.
Espero que todo sea fácil de entender.
Mis preguntas son:
¿Es esta idea fácil de usar y lógica? ¿Es la mejor manera de hacerlo o tienes una idea mejor? ¿Tiene algún comentario/idea para mejorar?
img 1
img 2
// Actualización.
Bien, hice una maqueta. Sí incorporé todos los comentarios de ArchieVersace tal como los entendí. En cuanto al cuadro modal de edición: es solo un boceto rápido, por lo que no hay entradas reales, tamaño, ...
// Actualización 29/10/2010
Entonces mis cambios actuales:
- sin papelera
- estructura arbórea vertical
- botón agregar (al lado del nombre del menú, pero puede ser reposicionado)
- elemento de menú sin asignar sobre los menús si se crea sin elegir la posición antes de poner 3 menús (cantidad promedio de mis proyectos) uno al lado del otro, cada uno tiene un ancho de aproximadamente 300 px. Eso debería ser suficiente, porque casi nunca tengo un menú con más ancho. Agregaré botones para colapsar el menú, pero tendría todos los elementos no colapsados al inicio (pero tal vez guarde la última preferencia a través de una cookie).
De todos modos, necesito JavaScript para mi cms, no se distribuirá como WordPress, sino que se venderá por proyecto, por lo que puedo requerir js. Esto significa que no es necesario recurrir (guardar/cancelar) para el posicionamiento del menú.
Mi usuario puede estar utilizando el sistema casi a diario, pero algunos también pueden actualizar el contenido de su página web solo cada dos meses. Por lo tanto, creo que debería ser lo más fácil posible. Debido a esto, creo que es vital incluir otro botón de agregar que siempre esté visible. Agregar un elemento de menú con este botón da como resultado un elemento de menú no asignado a ningún menú. En este caso, la parte sobre los menús podría aparecer sosteniendo el elemento recién creado.
¿Crees que es buena idea? No será visible/ocupará espacio si no se crea un elemento de menú.
Creo que el diseño horizontal del menú podría ser confuso. Primero, no tiene sentido jerárquico: ¿por qué solo el primer nivel se presenta horizontalmente y los otros niveles son verticales? Otro problema es ¿qué sucede cuando hay más artículos de primer nivel? El desplazamiento horizontal no es una gran solución en la mayoría de los casos. Haría todo vertical y luego sangraría los subelementos como ya lo ha hecho.
Las secciones de papelera y meta menú son innecesarias, en mi opinión. Si solo tiene 3 entradas para completar para cada elemento del menú, la recuperación de la basura no es tan importante. Además, la funcionalidad de la sección del meta menú podría ser reemplazada por una copia del menú existente cuando esté creando un nuevo menú. (Si se completa automáticamente en todas las páginas del sitio, nuevamente, debe pensar en la escala). Ambas secciones podrían reemplazarse con una sección de elemento de menú de edición.
Aparte de eso, se ve muy bien. Me encanta la simplicidad de tu maqueta.
Si solo miro estas pantallas sin su larga explicación, es difícil saber qué hacer, en qué hacer clic y cuál es el orden de interacción. Eso en sí mismo es bastante revelador: una excelente interfaz de usuario generalmente necesita una explicación mínima (piense en algo como el iPhone o la Wii, donde es muy obvio lo que debe hacer sin necesidad de un párrafo de texto para comenzar) .
Entonces, lo primero que haría es mostrar estas pantallas a algunas personas más (IRL) y ver cómo responden sin su explicación. ¿Lo entienden? ¿Saben lo que están viendo y qué se espera de ellos aquí? Si no, si necesita explicar cosas, entonces debería considerar reorganizar las pantallas. Puede hacerlo mediante la recopilación de comentarios de las personas, o creando un prototipo de la aplicación y haciendo que la gente la use (tenga cuidado de sugerirles lo que deberían hacer: déjelos tropezar por sí mismos).
Los comentarios que reciba en esa etapa serán mucho más útiles que cualquier opinión que las personas aquí puedan darle.
Además, tenga en cuenta que, dado que sus imágenes son actualmente en blanco y negro, será más difícil determinar el peso visual para las personas que miran el diseño que si aumenta un poco la fidelidad, agrega color y usa la tipografía en diversos grados para ayudar con cómo mis ojos deberían moverse sobre la pantalla.
Puedo ofrecerle ayuda con ciertas interacciones (como tengo a continuación), pero solo será de uso limitado, ya que no sé lo que está tratando de lograr. Lo que realmente necesita hacer es establecer los requisitos del sistema. ¿Qué están tratando de lograr sus usuarios? ¿Con qué frecuencia usarán el sistema? ¿Cuáles son sus niveles de habilidad? etc.
Por ejemplo, un usuario poco frecuente del sistema puede olvidar cómo usarlo entre usos, por lo tanto, en este caso necesitaría hacer que la interfaz sea muy simple de usar y recoger. Sin embargo, si sus usuarios visitan con frecuencia, un enfoque demasiado simplificado puede ser frustrante ya que los usuarios no se quedan como principiantes por mucho tiempo; muy rápidamente se convertirán en usuarios intermedios que demandan potencia adicional. No digo que haga algo difícil de usar, pero para los usuarios intermedios no debe tener miedo de agregar potencia y complejidad adicionales.
En términos de la maqueta que ha proporcionado, aquí hay algunas sugerencias específicas:
- Elimine los paneles no asignados, agregar y eliminar, ya que no ofrecen al usuario suficiente funcionalidad útil para la cantidad de espacio que ocupan.
- Ponga el botón Agregar en el contexto de dónde se agrega también, de modo que el usuario pueda agregarlo donde lo desee en lugar de agregarlo y luego colocarlo.
- Cuando un usuario desea configurar un elemento del menú, muestra un cuadro gris con los campos para recopilar la información
- Agregue un botón de edición y eliminación a cada elemento del menú
- Agregue botones de contrato y expandir a cada nivel dentro del menú, por defecto todos los niveles se contraen.
- Permita una buena cantidad de espacio para elementos de menú más largos.
- Debería considerar agregar opciones de reversión como guardar y cancelar botones
A continuación se muestra una maqueta: 
Otra actualización 
No estoy seguro de perder el botón Agregar. ¿La gente descubriría cómo agregar elementos de menú fácilmente?
Además, ¿cómo haría para que sea posible agregar elementos de menú como el mismo nivel o subnivel? El que está en este momento probablemente me subnivele (en realidad para esto, el botón debe moverse un poco a la derecha). Pero, ¿cómo agregaría un nuevo elemento del mismo nivel en el lugar deseado?
En el menú de pie de página intenté mostrar cómo se vería arrastrando un elemento de menú a una posición diferente.