¿Existe una forma "agradable" de mostrar los íconos de navegación para que no abarroten la interfaz de usuario?

Básicamente 2 ideas aquí, la primera es mostrar círculos pequeños, la resaltada en el centro es la página/álbum actual que se muestra, al hacer clic en las flechas resaltaría la siguiente/anterior. Esto les da a los usuarios una idea de cuántos álbumes están disponibles para el artista en cuestión.

(readaptación de Matt Lutze excelente ASCII dibujo)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

El siguiente podría mostrarse cuando hay más de 6 álbumes para un artista, que solo muestra el álbum 1 del total de álbumes.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

De esta manera, los elementos todavía están presentes y muestra una cola visual (o literal) que hay más para ver/escuchar.

Random Idea: Por supuesto, me gusta mucho la idea de hacer clic en la carátula y poder mirar dentro, que en este caso simplemente mostraría una lista de las canciones disponibles en ese álbum. Esta sería la opción de tocar una canción específica.

[Settings]  [Random album]  [Info]

 {   1. Song Names here       ^ }
 {   2. Song Names here         }
 {   3. Song Names here         }
 {   4. Song Names here         }
 {   5. Song Names here       v }

 <<           1 of 10          >>

Los botones de navegación se ven mal debido a disonancia visual

• Son redondos y la imagen es cuadrada.
• Son muy luminosos en 3D y la imagen es plana

y

• El espacio que desperdician arriba y abajo es gris plano sin usar, no utiliza una decoración similar a los botones, por lo que tampoco armoniza con los botones.

Plano rectangular estrecho abotona la altura completa de la carátula del álbum, usando ">" 's (o "<"' s en el medio resolvería estos tres problemas, pero la carátula aún sería separando sus controles de navegación. Funcionará mejor teniendo los controles de navegación en un fragmento visual.

Aquí hay una solución antigua (izquierda) y una na más moderna (derecha).

El estilo de los botones (bisel/redondeo/sombra paralela/lo que sea que tenga) debe coincidir con el estilo para el marco de la portada.

El izquierdo tiene la ventaja de que puede aumentar fácilmente el tamaño de los botones izquierdo/derecho según la cantidad de bienes inmuebles que desee darles y la facilidad con la que desea que se golpeen.

El derecho tiene un mini carrusel con ojo de pez debajo. Debería tomar una foto antigua de las imágenes en miniatura cuando no esté activada para no distraerse de la portada, y tiene pocas opciones sobre los tamaños.

La izquierda es simple y efectiva, la derecha tiene más felicitaciones. Prefiero la izquierda Probablemente puedas adivinar de qué época proviene mi gusto por la música.

Como otra sugerencia, CoverFlow de Apple utiliza una barra de desplazamiento horizontal debajo de la portada para permitir al usuario desplazarse por las portadas.

Ventajas:

• Puede desplazarse rápidamente por el arte. Puede no ser un requisito para su aplicación.
• Escalas okish con gran cantidad de arte.
• Permite una buena búsqueda aleatoria al desplazarse hacia adelante y hacia atrás.

Desventajas

• No es obvio cuántos elementos hay.

El hecho de que un elemento de la IU no sea inmediatamente obvio, no significa que sea una mala elección. Definitivamente iría con algo donde hacer clic en el lado derecho de la portada avanza un paso, y hacer clic en el lado izquierdo retrocede. (¿Asumiendo que esto solo se usará con los idiomas de izquierda a derecha?)

En lugar de los signos + y - del sitio web de fotos, solo sugeriría <y>. Y no quisiera que se transformaran o siguieran el cursor, simplemente los colocaría en el medio derecho y medio izquierdo.

Puede experimentar haciendo clic en el medio como una forma de reproducir/pausar el álbum.

Este tipo de interfaz de usuario casi invisible es tan fácil de usar una vez que lo ha encontrado, y se ve mucho mejor que tener botones separados colgando alrededor (como de costumbre) parecen botones. El extremo estético de esto sería incorporar todos los elementos de la interfaz de usuario en elementos invisibles en la vista previa de la portada. Para que solo veas la portada (y quizás el título de la canción) cuando el mouse no se mueva sobre ella. Tal vez esto funcione para su aplicación, y tal vez no.

Pregunta interesante, y algunos buenos puntos con ambas respuestas existentes.

Con respecto a los controles omnipresentes frente a los ocultos: recomendaría inclinarse hacia controles que siempre son visibles, pero que no distraen visualmente. Verde, azul, estampado; Todos tienen el potencial de distraer al menos un poco. Generalmente estoy de acuerdo con Nir aquí en el uso de flechas simples o símbolos "mayores que"

<< {Imagen} >>

vs. iconos/botones.

Extendería la sugerencia hacia sus íconos superiores también, y tal vez sugiera dejar que el concepto puentee visualmente el límite de la aplicación de escritorio/aplicación web:

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

En general, tendería a hacer que la portada sea el objeto dominante en la interfaz. Fina fila de botones de enlace de texto en la parte superior, el título, luego una imagen grande de la portada, con estrechas barras hacia adelante y hacia atrás a cada lado. O algo así.

Independientemente de cómo lo balancee, al menos le sugiero que no use indicadores dinámicos novedosos como un ícono de puntero de mouse cambiante. Mucha gente se asustará o se pondrá nerviosa cuando cambie su puntero; Desde mi experiencia, el usuario espera que su puntero haga cosas predecibles después de acciones predecibles y no sorprenderlos.

Proyecto ordenado, y gracias por la discusión. Tengo curiosidad por escuchar lo que piensan los demás.

Como alguien que responde correos electrónicos de soporte, puedo decirle que si un elemento de la interfaz de usuario no es inmediatamente obvio, un buen porcentaje de su base de usuarios nunca lo encontrará.

Tampoco leerán los documentos ni ningún mensaje emergente.

Una función debería ser obvia (y, a menudo, incluso tener un botón no es lo suficientemente obvio) o simplemente funcionar sin molestar al usuario (el corrector ortográfico subrayado rojo de garabato es un buen ejemplo, no tiene que encontrarlo, está ahí ).

Puede cambiar el estilo de los botones para que no sean tan grandes y que se mezclen más con el fondo, por ejemplo, si reemplaza los botones con dos flechas pequeñas que no tienen ese marco de botones pesado, no sobresaldrán mientras sigues señalando al usuario que hay algo más disponible.

Mire en la Web para obtener orientación. Es donde viven la mayoría de los usuarios, y guía sus expectativas de UI. Mire los sitios populares para su grupo demográfico objetivo y vea cómo administran la navegación. Navegar por la música es similar a navegar por las fotos, así que busque orientación en los sitios de periódicos y revistas.

La navegación de este tipo se realiza con mayor frecuencia mediante pequeños botones sobre el gráfico o mediante botones transparentes que aparecen al pasar el mouse. Si su IU está diseñada para que el usuario haga clic en la portada de un álbum para escucharla, descubrirá los botones transparentes lo suficientemente rápido.