Esta não é realmente uma resposta de "design gráfico", mas você também pode querer ver se pode alterar o texto. Nos seus exemplos, não acho que a arte do botão "instalar" seja particularmente mais parecida com o botão do Outlook. No entanto, o texto nele é um verbo bem conhecido e, portanto, está associado à execução de uma ação. Na mesma linha, "Iniciar o Outlook" pode atrair mais cliques do que simplesmente "Outlook".
Do ponto de vista gráfico, (além dos comentários de jhocking & luckycypher), algumas outras coisas que você pode tentar:
Faça as bordas brilharem ao passar o mouse
alterar esquemas de cores de fundo / borda ao passar o mouse
adicione uma sombra sutil (com ou sem chanfrar a superfície) para que o botão apareça levantado da página
adicione um pequeno ícone ao lado do texto para indicar qual ação será executada (se eu 'Outlook', o que estou fazendo?)
coloque seu botão em um local em que outros botões normalmente sejam colocados no seu site
faça o tema do botão corresponder a outros links / botões de navegação no site.
Você também pode tentar perguntar sobre o UX outros pensamentos centrados na interface do usuário.
Spot on. Pergunte a si mesmo: qual é a ordem de ação desse botão? Os botões geralmente fazem alguma coisa e a ação deles faz com que o usuário o identifique como clicável. Veja por exemplo botões / links nessa página: edit, close, flag, add comment, post your answer(intencionalmente ignorado link, pois pode ser confuso às vezes) - todos têm claramente alguma ação para executar.
Jari Keinänen
11
Para adicionar: mesmo que possa parecer confuso, linké claramente visto como um botão, pois parece o mesmo que os botões óbvios ao lado. Os usuários geralmente buscam padrões. Por exemplo, se você tivesse um installbotão, um botão e um outlookestilo da mesma maneira, os usuários provavelmente os interpretarão como botões. (OK, muita repetição para a sua resposta, mas isso apenas prova que você está no :-D faixas direita)
Jari Keinänen
5
A chave aqui é a disponibilidade - pistas visuais para que o usuário possa determinar o comportamento e o uso pretendido de algo à distância - antes de interagir com ele - como um prato plano na porta diz empurrar e uma maçaneta diz puxar.
Veja aqui meus próprios exemplos de disponibilidade.
As principais dicas são bordas chanfradas e preenchimentos de gradiente para uma sensação 3D e, se apropriado, com bordas sombreadas distintas, indicando um botão real levantado e arredondado que faz você sentir que deseja pressioná-lo, combinado com um plano de ação claro , como um etiqueta apropriada e / ou ícone bem escolhido. Observe que os cantos arredondados são mais amigáveis e os cantos quadrados parecem duros aos olhos.
Veja meu tutorial sobre a criação de botões simples de metal e efeito brilhante / de vidro usando o Inkscape.
Também adicione um estado de foco, com css ou javascript.
laphiloctete
CSS seria preferível neste caso.
Kyle
3
você deve usar dois tipos de imagem, um ativo e outro normal, o estado normal parecerá gravado
anexando um SS e veja como eles esclarecem as diferentes estatísticas de um botão,
e sempre que o usuário entrar no botão, mude o cursor para a mão, ele se parecerá com um link, se possível, você pode escrever em um pequeno clique aqui para instalar .. ou você pode apontar esse botão com a ajuda de qualquer seta ou algo parecido ...
veja como outras pessoas exibem os botões de download / instalação.
Acho que o estilo de cor e borda do seu botão não é o principal problema do seu botão. Pode ser que seja muito grande! Parece mais uma palavra / título em um quadro do que um botão. Tente apenas torná-lo um pouco menor para que o texto seja preenchido (pelo menos na altura).
Como outros já disseram, também ajudará a aparecer de alguma maneira no mouseover.
Por que você não sublinha o texto no botão (ou o torna azul) - dessa forma, ele será percebido como um link e os usuários saberão que clicar nele o levaria a algum lugar.
edit,close,flag,add comment,post your answer(intencionalmente ignoradolink, pois pode ser confuso às vezes) - todos têm claramente alguma ação para executar.linké claramente visto como um botão, pois parece o mesmo que os botões óbvios ao lado. Os usuários geralmente buscam padrões. Por exemplo, se você tivesse uminstallbotão, um botão e umoutlookestilo da mesma maneira, os usuários provavelmente os interpretarão como botões. (OK, muita repetição para a sua resposta, mas isso apenas prova que você está no :-D faixas direita)A chave aqui é a disponibilidade - pistas visuais para que o usuário possa determinar o comportamento e o uso pretendido de algo à distância - antes de interagir com ele - como um prato plano na porta diz empurrar e uma maçaneta diz puxar.
Veja aqui meus próprios exemplos de disponibilidade.
As principais dicas são bordas chanfradas e preenchimentos de gradiente para uma sensação 3D e, se apropriado, com bordas sombreadas distintas, indicando um botão real levantado e arredondado que faz você sentir que deseja pressioná-lo, combinado com um plano de ação claro , como um etiqueta apropriada e / ou ícone bem escolhido. Observe que os cantos arredondados são mais amigáveis e os cantos quadrados parecem duros aos olhos.
Veja meu tutorial sobre a criação de botões simples de metal e efeito brilhante / de vidro usando o Inkscape.
fonte
Chanfre o gráfico para que fique tridimensional.
fonte
você deve usar dois tipos de imagem, um ativo e outro normal, o estado normal parecerá gravado
anexando um SS e veja como eles esclarecem as diferentes estatísticas de um botão,
e sempre que o usuário entrar no botão, mude o cursor para a mão, ele se parecerá com um link, se possível, você pode escrever em um pequeno clique aqui para instalar .. ou você pode apontar esse botão com a ajuda de qualquer seta ou algo parecido ...
veja como outras pessoas exibem os botões de download / instalação.
Siga este tutorial para criar botões tão bonitos
fonte
Acho que o estilo de cor e borda do seu botão não é o principal problema do seu botão. Pode ser que seja muito grande! Parece mais uma palavra / título em um quadro do que um botão. Tente apenas torná-lo um pouco menor para que o texto seja preenchido (pelo menos na altura).
Como outros já disseram, também ajudará a aparecer de alguma maneira no mouseover.
fonte
Por que você não sublinha o texto no botão (ou o torna azul) - dessa forma, ele será percebido como um link e os usuários saberão que clicar nele o levaria a algum lugar.
fonte