Usabilidade visual de um novo site

Trabalhar fora do design de interação para uma tarefa é um senso comum parte e uma lógica de parte quando se trata de descobrir os widgets para uso e o fluxo para organizá-los. O resto é tudo design visual. A própria colocação, agrupamento, arranjo relativo, e design de seus componentes interativos podem percorrer um longo caminho para fazer uma tarefa de fluxo bem ou parar em suas faixas.

Dar feedback rollover

Uma maneira de deixar as pessoas sabem que as coisas são interativos é fazê-los mudar sua aparência ou desencadear alguma ação quando o cursor entra em contato com eles. Quando o cursor entra em contato com algo na tela, ele é chamado de rolar. Uma série de coisas pode ocorrer quando o ponteiro do mouse rola sobre um componente interativo. Se o elemento tem um link, o cursor em si muda de uma seta para um dedo indicador. Isso é uma simples built-in modo, para fornecer feedback visual para que você possa deixar as pessoas sabem que um elemento é interativo. No entanto, você pode fornecer comentários adicionais sobre rollover - feedback que pode até mesmo treinar alguém em como usar a navegação. Aqui estão algumas maneiras de fazer isso:

• Alterar a aparência do gráfico.

  Muitas vezes, os designers não se preocupam com o fornecimento de um estado clicado. Lembre-se, cada estado é um gráfico original que você tem que produzir - e que o navegador tem que carregar.

• Expandir ou animar o elemento.

  
  Um rollover muda de aparência quando um usuário rola ou clica nele.

Projetando botões site que parecem clickable

Se você simplesmente confiar no feedback rollover (digamos, o cursor se transformar em uma mão-com-apontando-dedo sobre rollover), você está fazendo o matagal usuário o cursor por toda a tela à procura de coisas interactiva. Por isso, é importante fazer elementos interativos Veja clickable para começar.

Em geral, você pode fazer elementos da interface gráfica olhar mais clicável em uma de três maneiras:

• botões de etiquetas com frases de ação. É uma melhor prática de design para colocar curto, para-a-ponto de etiquetas em botões e levar o usuário com verbos de ação no-nonsense, como Impressão ou Ver mapa. etiquetas passivas como Excursão virtual ou nebulosa de marketing falar rótulos como viagem mágica são menos eficazes.

• Adicionar dimensão. Faça elementos de botão fisicamente destacam-se na página, dando-lhes uma qualidade tridimensional.

Tomando pistas da vida cotidiana

O design visual e textura de seus componentes interativos ajudar as pessoas a saber como interagir com eles. Objetos que interagem com você em uma base diária, como botões, gavetas, e mostradores são grandes inspirações para o desenho de elementos interativos em sua página web. As pessoas já estão bem treinados para usá-los todos os dias Objects- todo mundo sabe como apertar botões, puxadores de gavetas, e transformá-mostradores.

Dê uma olhada tanto a interface de marcação eo esquema de gaveta no QuickTime player da Apple. Descobrir como usar esses pequenos widgets para controlar o volume e acessar um menu de opções é fácil. Para o volume, clique e arraste o botão para ligar o áudio para cima ou para baixo. Para a gaveta de opções, você pega a área pega-like e arraste para baixo.

Agrupamento e elementos de nidificação em um site

A localização relativa e agregação de componentes interativos é tão forte uma pista à sua natureza interativa como qualquer outro tratamento visual. Por exemplo, apenas agrupando uma série de elementos de interface de aparência semelhante juntos em uma unidade gráfica pode dar-lhes uma aparência clickable - mesmo se os próprios gráficos individuais não olhe clicável.

Se você grupo e contêm uma série de elementos de texto simples que têm o mesmo tratamento da fonte, você cria um elemento gráfico forte que se destaca das outras coisas na página e implica interatividade. Vendo elementos como concebido juntos em um grupo realiza duas coisas:

• Um grupo implica interatividade. Um conjunto de texto ou gráficos elementos agrupados cria uma unidade visual que chama a atenção das pessoas.

• Um grupo implica uma função semelhante. Ao associar visualmente um conjunto de links, você implica que todos eles desempenham funções semelhantes e têm a mesma prioridade relativa no site.

Você pode também implica em uma relação dentro de itens agrupados por nidificação certos elementos sob outros.

fornecendo # 147 Você está aqui # 148- gabarito

Quando os usuários navegar através de sites, eles gostam de ter uma noção de onde eles estão no esquema das coisas e, se eles estão trabalhando através de tarefas, quanto tempo antes que será feito. Para ajudar a responder a estas perguntas, a interface pode fornecer # 147, você está aqui # 148- feedback como segue:

• Realce opções de navegação selecionados. Quando um usuário clica em um item de navegação, mesmo que eles selecionaram algo dentro de um menu drop-down, é melhor para manter essa secção realçada para que eles saibam que a secção em que estão.

• Mostrar o progresso. Se alguém está trabalhando através de uma tarefa de várias etapas, é uma boa idéia para mostrar uma barra de progresso deixando que eles sabem onde estão e quanto mais eles precisam fazer.

  
  Este site coloca a sua navegação global verticalmente para baixo do lado esquerdo, mas ainda é claro, para ver qual seção você está dentro.
  
  As etapas numeradas ajudar a faixa usuário sustento de onde eles estão em um processo.