Existe uma maneira "agradável" de mostrar ícones de navegação para que não interfiram na interface do usuário?

Basicamente, duas idéias aqui, a primeira está mostrando pequenos círculos, a destacada no centro é a página/álbum atual sendo exibida, quando você clica nas setas, destacará a próxima/anterior. Isso dá aos usuários uma idéia de quantos álbuns estão disponíveis para o artista em questão.

(redefinição de Matt Lutze excelente ASCII))

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

O próximo pode ser mostrado quando houver mais do que 6 álbuns para um artista, que está apenas mostrando o álbum 1 do total de álbuns.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

Dessa forma, os elementos ainda estão presentes e mostram uma fila visual (ou literal) de que há mais para exibir/ouvir.

Random Idea: É claro que eu realmente gosto da idéia de clicar na capa e poder olhar para dentro, que neste caso simplesmente mostraria uma lista das músicas disponíveis nesse álbum. Essa seria a opção de tocar uma música 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          >>

Os botões de navegação parecem ruins devido a dissonância visual

• Eles são redondos e a imagem é quadrada.
• Eles são fortemente luminosos em 3D e a imagem é plana

e

• O espaço que eles gastam acima e abaixo é cinza achatado sem uso, sem usar decoração semelhante aos botões, portanto, também não se harmoniza com os botões.

Apartamento retangular estreito abotoa toda a altura da capa do álbum, usar ">" 'empilhados (ou "<"') no meio resolveria esses três problemas, mas a capa ainda seria separando seus controles de navegação. Vai funcionar melhor ter os controles de navegação em um pedaço visual.

Aqui está um solução antiquada (esquerda) e um solução mais moderna (direita).

O estilo dos botões (chanfro/arredondamento/sombra projetada/o que você tem) deve corresponder ao estilo para o quadro da arte da capa.

A esquerda tem a vantagem de que você pode aumentar facilmente o tamanho dos botões esquerdo/direito, dependendo da quantidade de imóveis que você deseja fornecer e da facilidade com que deseja que eles sejam atingidos.

O da direita tem um mini carrossel olho de peixe embaixo dele. Você precisaria tirar fotos antigas das imagens em miniatura quando não estiver ativado, para não se distrair com a arte da capa, e terá pouca escolha em relação aos tamanhos.

A esquerda é simples e eficaz, a direita tem mais elogios para os olhos. Eu prefiro a esquerda. Você provavelmente pode adivinhar de qual era o meu gosto musical.

Como outra sugestão, o CoverFlow da Apple usa uma barra de rolagem horizontal abaixo da capa para permitir que o usuário passe pelas capas.

Vantagens:

• Pode esfregar rapidamente através da arte. Pode não ser um requisito para o seu aplicativo.
• Escalas okish com grande número de arte.
• Permite uma boa pesquisa aleatória, deslizando para frente e para trás.

Desvantagens:

• Não é óbvio quantos itens existem.

Só porque um elemento da interface do usuário não é imediatamente óbvio, isso não significa que é uma má escolha. Eu definitivamente iria com algo em que clicar no lado direito da capa avança um passo e clicar no lado esquerdo volta. (Supondo que isso será usado apenas nos idiomas da esquerda para a direita?)

Em vez dos sinais + e - do site de fotos, sugiro <e>. E eu não gostaria que eles transformassem ou seguissem o cursor, apenas os colocariam no meio direito e no meio esquerdo.

Você pode experimentar clicar no meio para reproduzir/pausar o álbum.

Esse tipo de interface de usuário quase invisível é tão fácil de usar quando você a encontra, e parece muito melhor do que ter botões separados por aí que (como sempre) se parecem com botões. O extremo estético disso seria incorporar todos os elementos da interface do usuário em elementos invisíveis na visualização da capa. Para que você apenas veja a capa (e talvez o título da música) quando o mouse não está passando o mouse sobre ela. Talvez isso funcione para o seu aplicativo, e talvez não.

Pergunta interessante e alguns bons pontos com as duas respostas existentes.

Em relação aos controles onipresentes x ocultos: eu recomendaria inclinar-se para controles sempre visíveis, mas que não sejam visualmente perturbadores. Verde, azul, estampado; todos têm o potencial de ser pelo menos um pouco perturbadores. Eu geralmente concordo com Nir aqui em usar setas simples ou símbolos "maiores que"

<< {Image} >>

vs. ícones/botões.

Também estenderia a sugestão aos seus principais ícones e, talvez, sugira que o conceito faça uma ponte visual entre o limite do aplicativo de desktop/aplicativo da web:

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

Eu geralmente tenderia a tornar a arte da capa o objeto dominante na interface. Linha fina de botões de link de texto na parte superior, o título e, em seguida, uma imagem grande da capa, com barras de retrocesso estreitas em ambos os lados. Ou algo assim.

Seja como for, eu sugiro pelo menos não usar indicadores dinâmicos inovadores como um ícone de ponteiro do mouse em mudança. Muitas pessoas ficam assustadas ou nervosas quando o ponteiro muda; Pela minha experiência, o usuário espera que o ponteiro faça coisas previsíveis após ações previsíveis e não as surpreenda.

Projeto limpo e obrigado pela discussão. Estou curioso para ouvir o que os outros pensam.

Como alguém que responde a emails de suporte, posso dizer que, se um elemento da interface do usuário não for imediatamente óbvio, uma boa porcentagem da sua base de usuários nunca o encontrará.

Eles também nunca lerão os documentos ou qualquer mensagem pop-up.

Um recurso deve ser óbvio (e muitas vezes até ter um botão não é óbvio o suficiente) ou apenas funcionar sem incomodar o usuário (o verificador ortográfico sublinhado de rabiscos vermelhos é um bom exemplo, você não precisa encontrá-lo - ele está lá ).

Você pode mudar o estilo dos botões para que não fiquem tão grandes e se misturem mais com o plano de fundo. Por exemplo, se você substituir os botões por duas pequenas setas que não possuem essa moldura pesada, elas não destacariam enquanto ainda sinaliza para o usuário, há algo mais disponível.

Consulte a Web para obter orientação. É onde a maioria dos usuários mora e orienta suas expectativas de interface do usuário. Procure em sites populares o seu público-alvo alvo e veja como eles gerenciam a navegação. A navegação pela música é semelhante à navegação pelas fotos; procure orientação nos sites de jornais e revistas.

A navegação desse tipo geralmente é realizada por pequenos botões acima do gráfico ou por botões transparentes que aparecem ao passar o mouse. Se sua interface do usuário foi projetada para que o usuário clique na capa de um álbum para ouvi-la, eles descobrirão os botões transparentes com rapidez suficiente.