it-swarm-pt.tech

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

Eu tenho um pequeno aplicativo de desktop que verifica as pastas de música e escolhe aleatoriamente um álbum para reproduzir. A primeira versão é WinForms e possui botões "anterior" e "próximo" de ambos os lados da capa do álbum que são ativados quando há mais álbuns do mesmo artista.

enter image description here

Não estou feliz com essa interface do usuário, pois os botões ocupam muito espaço.

Estou reescrevendo o aplicativo usando o WPF e procurando uma maneira melhor de indicar que existem outros álbuns do mesmo artista. Eu experimentei exibir os botões na parte superior da arte da capa e mostrá-los apenas quando o mouse passa por sua posição, mas não estou satisfeito com o resultado principalmente porque não há indicação de que as opções estejam lá.

Encontrei um truque interessante no site Brian Stevens Photography , onde o cursor muda para "+" e "-" sobre cada metade da imagem para indicar a navegação, mas também uso um clique na imagem para reproduzir esse álbum, então eu teria que adaptar essa abordagem se quisesse usá-la.

Existe uma maneira melhor ou um carrossel ou um fluxo de tampa controla o caminho a seguir?

Por um pouco mais de fundo, leia isto publicação no blog minha.

10
ChrisF

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          >>
9
Drofnas

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.

enter image description here

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.

5
James Crook

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.
3
ICR

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.

3
Scott Newson

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.

2
Matt

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.

2
Nir

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.

1
David Veeneman