Este artigo foi traduzido por máquina.

Usabilidade na prática

Um pouco mais a fundo

Dr. Charlie Kreitzberg e Ambrose Little

Dr.Charles B. Kreitzberg

Ambrose Little

Estilo vende.Que é verdadeiro sobre software como é sobre outros produtos.Um design visual ótima pode atrair compradores e sugerir um produto é interessante, bem planejado out e eficaz.Claro, um pacote muito não garante a qualidade do conteúdo, como well-worn proverbs como “ beleza é apenas capa profundidade ” e “ não julgar um livro pela sua tampa ” lembrá-nos.

Mas é importante design visual.Embora nenhum substituto para construção de qualidade ótima design visual, é um erro para descartar o design visual como marketing fluff apenas.No mínimo deve ser profissional e atraente.Se estão produzindo um produto para clientes ou o público, você pode considerar contratando um designer visual para desenvolver uma aparência distinta.E se você tiver um conjunto de produtos, uma aparência comum é importante.

Design visual é mais decorativo; ele tem um forte efeito sobre a experiência do usuário.Algumas áreas para enfocar são:

• Aparência  
• Legibilidade
• Descoberta de affordances
• Suporte a comunicações
• Emoções e confiança

Aparência and feel

Aparência é o termo usado para descrever a impressão geral (personalidade) de seu produto.Não é um termo particularmente bem definido, mas ele lembrar nos design visual bastante contribui para caracteres do produto.

O de aparência do termo geralmente inclui cores, fontes, elementos gráficos, logotipos e identificação de marca.sentir é um pouco mais amorfos e tenta capturar a qualidade da experiência do usuário na interação com o produto.Sensação é criada através da interação de design visual e design de outro elementos como a arquitetura de informações.Sensação é afetada por elementos, como animações, transições e idioma usado na interface.Sensação freqüentemente é descrita usando adjetivos e metáforas: back formal, casual, amigável, vibrante, agressivo, laid.Embora seja possível discutir aparência separadamente, na prática, eles devem formar um todo coerente.

Para ajudar você a pensar sobre a aparência, convém visitar do CSS Zen jardim.Criado por Dave Shea, um Web designer de Vancouver, o jardim de Zen CSS é um trabalho colaborativo onde designers visuais desenvolver uma aparência de um site HTML padrão.As regras são eles podem modificar um estilo CSS folha e adicionar elementos gráficos, mas não pode fazer alterações para HTML ou conteúdo.Portanto, nesse sentido, alguns a sensação definir — você não pode alterar o idioma verbal, mas você pode alterar a linguagem visual.

Quando você estiver no site, você pode inverter entre os designs.Eles estão todos muito boa, mas muito diferentes na aparência.Como alternar do design para design que você pode obter uma boa idéia quanto diferença a abordagem de design visual faz.

Certamente você irá preferir alguns designs no jardim de Zen CSS para outras pessoas.Escolher uma aparência é uma questão de gosto e adequação a finalidade do produto.Como com outros aspectos da experiência do usuário, é gosto e expectativas do seu público-alvo que deve tentar atender.

Você pode decidir que alguns designers quem contribuíram para CSS Zen jardim mais concentram na sua expressão self — arte — que sobre conteúdo do site.Este é um problema real.Muitos designers visuais são tão concentrados na sua arte são menos bem-sucedidas no aprimoramento legibilidade, mensagens, affordances ou marca, que são importantes.A novidade é que nem toda boa artista é um designer visual boa para software.

Você pode estar interessado na apresentação visual framework padrões no ( do Explorer de padrões de UX Quince.Lá você pode aprender design visual como pode ser usado para estabelecer uma estrutura ou “ design visual idioma ” que pode ser usado em toda sua solução (e além-lo em outros ativos) para que há uma estrutura de design consistente e adequado.

Legibilidade

Legibilidade altamente é afetada por design visual.Legibilidade, amplamente, é a capacidade do usuário para compreender e processar conteúdo.Concentraremos principalmente na legibilidade do texto, mas você deve considerar todos os tipos de conteúdo que são suporte.Quando se trata de legibilidade, design visual mão em mão funciona com arquitetura de informações do produto.Lembre-se de arquitetura de informações está preocupada com como informações são organizadas semanticamente em uma hierarquia visual.O designer visual determinará como os vários tipos de informações são processados.

Alguns sites que demonstram problemas com legibilidade (inadvertidamente) são SR. garrafade , de Bella DeSoto e HavenWorks .Esses sites são de Páginas Web que Suck , que não é sempre uma fonte confiável, mas uma maneira de exibir sites que algumas pessoas consideram problemáticas.Como examinar esses sites, considere o que está criando problemas legibilidade e como pode ser endereço.

Uma ferramenta de legibilidade interessantes pode ser encontrada no do legibilidade.Essa ferramenta permite que você explore tamanhos de fonte diferente e larguras de coluna e, por meio de um bookmarklet, aplicar a aparência desejada para páginas da Web arbitrárias.

Fontes e tipografia podem ter um efeito poderoso aparência do produto.Podemos freqüentemente tendem a pensar fontes como estático e utilitarian mas eles podem transportar muito impacto emocional.Vale a pena visitar webdesigner depot , onde você encontrará exemplos de 18 de tipografia usada com vídeo para transmitir mensagens poderosas.Enquanto você não pode ter muitas oportunidades para usar essa classificação de tipografia no movimento, você obterá uma noção de como uma ferramenta poderosa pode ser.

Tamanho do tipo é um dos fatores mais importantes na legibilidade.Geralmente os desenvolvedores (e criadores) são jovens e não pense sobre o fato de que usuários antigos tenham menos agudo visão.Como resultado, os tamanhos de fonte muito pequena são comuns.Escolher um tamanho de fonte menor pode ser tudo bem, como o design oferece suporte a ampliação através do navegador (supondo que esteja disponível) ou através de uma opção mais direta como vê em muitos notícias e outros sites de informações.

O contraste entre a fonte e o plano de fundo também é um elemento de legibilidade muito importante.Há uma tendência entre alguns designers para usar um tipo de cinza em vez de preto para texto normal.Ele procura elegante, mas pode ser difícil de ler.Compare o texto cinza (10 pt, #AAAAAA) com a versão em preto (10 pt, 000000 #) no do Figura 1.Pode ser eficaz para pequenas quantidades de texto que você deseja de-emphasize usar cinza.Usado dessa maneira, cinza pode ajudar a organizar a página.Mas usar cinza para conteúdo primário torna difícil de ler o conteúdo.

Figura 1 contraste de cor de texto e fundo

Do Figura 1, estamos usando texto “ lorem ipsum ”, que, como você provavelmente sabe, é usado pelos designers visuais para explorar tipografia e layout sem usar o conteúdo real.É uma ferramenta útil que pode às vezes facilitar o processo de revisão, como encoraja pessoas para comentar sobre a aparência visual em vez do conteúdo específico.Você encontrará um gerador de ipsum lorem útil no do Lorem Ipsum.Enquanto lorem ipsum pode ser útil durante a fase de design, lendo texto de espaço reservado não é mesmo como ler texto significativo.Por esse motivo, se você tiver acesso ao conteúdo, você deve experimentá-lo antes de finalizar o design visual.

É possível criar algumas cores de texto/plano de fundo realmente horrível em HTML e há exemplos de design realmente incorreto na Web.O W3C tem sugerida um algoritmo para determinar se duas cores tem contraste suficiente para funcionar bem juntos.

Criamos dois exemplos no do Figura 1, bem como o exemplo a forma de Figura 2 usando uma ferramenta de código-fonte aberto pouco interessante chamada do Designer Plaything.

Figura 2 do ruim contraste danos legibilidade

Outros fatores de legibilidade que você deve considerar incluem:

• Quanto espaço para colocar entre linhas.Muito pouco espaço cria uma aparência cramped enquanto muito espaço destruirá cohesiveness do parágrafo.Espaçamento de 1,5 pode ser uma boa maneira de iniciar.
• Quanto para tornar as linhas.Linhas muito longas são difíceis de digitalizar.Se você estiver usando um layout líquido as linhas podem ficar muito longas em alguns monitores, convém considerar restringindo o comprimento da linha não mais de 80 a 100 caracteres, dependendo do tamanho de fonte usado.Em muitos casos, menores larguras de linha são melhor e (como jornais longo tem compreendido) designs várias colunas realmente podem melhorar a legibilidade quando há muito texto.

É um recurso útil tipografia eBook, " os elementos de tipográficas aplicação de estilo para a Web de ."

Descoberta de Affordances

A terceira área que você deve considerar em seu design visual é tornando fácil para o usuário descobrir affordances.Affordances são indicações que permitem que você sabe que pode fazer algo com uma coisa, como sublinhado em um link para que o usuário sabe que o texto é clicável ou um botão que parece elevado, como se pode ser pressionado.

Em geral, um objeto UI bem projetado deve ser óbvio na maneira como ele funciona.O motivo 3D e sombras usadas para criar a ilusão de profundidade são eficazes que indica para o usuário que o objeto pode ser pressionado é que eles aproveitam uma metáfora do mundo real.Lembre-se que em nossa coluna de outubro (” Obtendo Inside Your usuários ’ HEAD de s ”), falamos sobre modelos mental.Este é um exemplo.Usuários compreendem como pressione os botões no mundo real para que eles transferir essa compreensão para uma representação gráfica bem projetada de um botão.

Usar um cursor mão sobre um elemento de tela é clicável é outra maneira de descobrir um affordance.Usado também pode ajudar a organizar uma tela, mas usando affordances somente são óbvios após um foco do mouse pode criar problemas de usabilidade.Ele pode ser uma boa idéia fazer as pessoas que mover o mouse para descobrir o que eles podem fazer com uma interface, especialmente se for uma ação principal.

Com a maioria dos controles que você use, você não precisa se preocupar muito sobre como os affordances são barra de rolagem presented–a geralmente é muito clara porque é uma convenção estabelecida, por exemplo.Mas se você estiver criando hotspots gráficas para controlar a navegação ou outras ações, é importante para o usuário saber onde clicar.E se os usuários não estiverem familiarizados com certos controles (há modelo mental novamente) precisa ser muito desmarque no design como eles funcionam.Recentemente em um teste de usabilidade, descobrimos que muitos usuários entendia como usar um controle accordion.Redimensionando o controle resolveu o problema.

Resumindo, o design visual deve comunicar elementos com o qual um usuário pode interagir.O design deve tornar óbvio quais ações são possíveis e qual será o resultado.

Suporte a comunicação

Muitos designers visuais abordagem o design de um produto definindo uma linguagem visual.Uma linguagem visual é um conjunto de princípios de design auxiliar na comunicação de idéias.Há vários aspectos de criação de uma linguagem visual.

Percepções e associações

Um elemento de uma linguagem visual tira proveito de percepção.Processamento Visual não passivo — simplesmente observando os objetos na frente de seus olhos — mas um processo ativo envolvendo seletividade e julgamento.Abordamos alguns desses problemas na coluna de outubro.O estudo percepção a especialidade chamada do Gestalt psicologia, e vale a pena se familiarizar com alguns dos princípios percepção como feriado, similaridade, continuação, proximidade e a figura e terrestre — consulte do The Principles Gestalt.

Outros elementos de uma linguagem visual são criados em associações mental comuns, como usando orgânicas sensação curvas para sugerir natureza, usando o disco rígidos ângulos e linhas para sugerir máquinas, usando disjointedness deliberada para criar um senso de disturbance e usando simetria para criar um senso de saldo e harmony.

Outras associações que podem ser aproveitadas incluem culturalmente condicionados elementos, tais como usando vermelho para verde para ok/ir e erros/parar.No entanto, esteja ciente de que tal associações podem ter diferentes elementos cross-cultural ou contextuais.Por exemplo, vermelho tem associações positivas na China e no contexto de um carro ou fantasia, vermelho sugere sexy.

Dada comuns como o vermelho/verde = ok/problema conectando é, é surpreendentemente comum encontrar cores usadas de forma não intuitiva.Por exemplo, podemos encontrou a mensagem Figura 3 em um programa de Fórum.Deliberadamente fizemos o texto indefinida para que você poderia obter uma impressão inicial com base no uso de cor.

Figura 3 cor vermelha sugere um problema

Enquanto o uso de cor sugere um problema, do Figura 4 mostra o que realmente diz.

Figura 4 Clashes A cor com a mensagem

Também Observe que o título é uma cor mais clara que o texto ele etiquetas.Revisando a mensagem alterando a cor da caixa de mensagem e o cabeçalho produz uma quantidade comunicação clara, como mostrado no do Figure5.

Figura 5 verde sugere uma mensagem positiva

Alterar a cor para verde é um design visual melhor para essa finalidade e o contexto.

Arquitetura de informações

Design visual também pode ser usado para reforçar a arquitetura de informações, especialmente a hierarquia visual.Por exemplo, quase sempre oferecemos títulos maiores e mais encorpados que o conteúdo que eles rotular.E podemos criar hierarquias de títulos para ajudar a esclarecer a estrutura do conteúdo.Dentro do texto podemos usar essas técnicas como de negrito , sublinhadode , italicizing , tornando maior e menor para enfatizar ou de-emphasize elementos e marcar o leitor sobre sua função.

Cor é outra área que pode ser aproveitada para ótimo efeito, especialmente quando utilizado com moderação.Quince possui um matizes alguns padrão que lida com limitando a paleta de cores para matizes apenas duas ou afirmativo e variar o intensidade (saturação) e o brilho dessas cores para reforçar sua comunicação visual.Cor pode ser usado para ótimo efeito, se a interface já não estiver saturada com cor para realmente desenhar elementos importantes, tais como chamadas a ação.

Cor também pode ser usado para extrair itens mais importantes para o primeiro plano por simplesmente de-emphasizing elementos menos importantes.Esta é uma situação onde o usando texto cinza, por exemplo, pode empurrar coisas menos importantes em segundo plano e trazer o que saiu frente e no centro.

Figura 6 do design Visual arquitetura de informações de suporte

Emoção e confiança

Design Visual afeta emoções e pode afetar a credibilidade de um aplicativo ou site e o senso de confiança (ou mistrust) desenvolve o usuário.Por exemplo, considere os dois sites na Figura 7 de e Figura 8 , cada um com o mesmo design de conteúdo mas diferente visual.

Figura 7 would você confiar este fornecedor?

Seria comprar uma TV em um local que tem esta aparência?  Você intrinsecamente confia-lo?  A maioria de nós já se deparou com o que parecem ser shady empresas online e nós não estiver inclinações confia neles.Considere esse design alternativo:

Figura 8 mesmo design de conteúdo, diferente Engenders mais confiança

Esse design é mais profissional, confiável, mais acertadas e confiável.Seria muito, muito mais provável entregar suas informações de cartão de crédito para um site como este.E, na verdade, houve pesquisa específica para esse aspecto do design visual pelo projeto Stanford Web credibility Research .Recomendamos que leia e siga as diretrizes.Don Norman escreveu um livro nessa área chamado Design emocional explora ainda mais o impacto de estética na aceitação de produto.

Impacto significativo

Design visual é muito mais do que capa profundidade.Aparência, legibilidade e clareza de vários controles podem fazer uma grande diferença na usabilidade do produto e a experiência do usuário; não é apenas olho balas ou gosto pessoal.

Design visual boa ajuda o usuário identificar quais elementos de tela são affordances, portanto afeta diretamente a facilidade de interação com o produto.Design visual também oferece suporte a arquitetura de informações, tornando mais fácil para o usuário processar informações sendo transmitidas.Design visual pode evocar emoções no usuário por meio de fotografias e ilustrações, tanto mais sutilmente através a aparência geral.Além emoções, design visual pode ajudar criar (ou danificar) um senso de confiança.Resumindo, enquanto alguns desenvolvedores descartar design visual como sem importância, olho balas ou lipstick, ele pode ter um impacto significativo.

Porque é uma ferramenta poderosa assim, é importante para os desenvolvedores a pensar sobre design visual e instruir próprias em seus aspectos mais funcionais como podemos ter utilizadas aqui.Poucos de nós tem habilidades para criar designs visuais de alta qualidade e freqüentemente é melhor colocar um profissional.Mas se você fizer o design visual sozinho ou o trabalho com outras pessoas, é importante entender as noções básicas.Instruções elementares boa é elementos the de design gráfico: Espaço, Unity, arquitetura de página e Type (Allworth Press, 2002), que dispõe de princípios fundamentais criado em torno de sete componentes de design.

Para além de leitura sobre design, olha em muitos exemplos estabelecidos de bom design (tente procurar sites premiada), bem como designs vêm e pense são bons.Analisá-los para descobrir por que os designs são bons.Se você encontrar designs são menos atraentes, pense sobre por que devem ser aperfeiçoados e como.Exposição mais obter para bom design, quanto mais você será capaz de reconhecê-lo e mesmo fazê-lo melhor sozinho.Nunca pode se tornar um designer visual profissional, mas funcionarão melhor com eles.E, inevitavelmente, quando você tem que fazer o trabalho sozinho, irá fazer um trabalho melhor.

Design visual pode realmente ajudar produzir ótimos produtos criando Excelência em elementos que são mais visíveis para seus usuários e os interessados.

Dr.Charles Kreitzberg de é CEO de Cognetics Corporation, que oferece consultoria de usabilidade e usuário experiência design serviços. Sua paixão é a criação de interfaces intuitivas que envolvam e delight usuários enquanto objetivos comerciais do produto. Charles mora na parte central de Nova Jersey, onde ele também como músico.

Ambrose Little mora com sua esposa e seus quatro filhos na parte central de Nova Jersey. Ele trabalha com projeto e desenvolvimento de software há mais de 10 anos e tem a honra de ser um palestrante da INETA e MVP da Microsoft. Recentemente, ele é deslocado do design técnico para criação para pessoas e agora é um designer de experiência do usuário para da Infragistics.