Partilhar via

Princípios da interface do usuário

Este tópico discute como implementar princípios de design intuitivos de interface do usuário e experiência do usuário em aplicativos do Windows.

Introdução

Os desenvolvedores muitas vezes não levam em conta a perspetiva do usuário final. Os desenvolvedores trabalham duro para fazer o aplicativo funcionar — os clientes apenas esperam que ele funcione e sua perceção do software gira em torno desse requisito. Isso é especialmente verdadeiro se você desenvolver software de varejo, ou algo que será usado por pessoas não técnicas. Os desenvolvedores devem estar cientes das necessidades do usuário final durante todo o processo de design de software.

Uma aplicação de software deve ser tão fácil de navegar e utilizar quanto possível. Com a quantidade de software sendo criada, estima-se que 4 em cada 10 aplicativos de software tenham uma ótima interface do usuário que o usuário final realmente goste e se sinta instantaneamente confortável em usar.

Uma enorme quantidade de software de uso interno é criada para corporações. Seja desenvolvido internamente ou sob os cuidados de um consultor, muitas vezes um mínimo de tempo, esforço ou dinheiro é investido na criação de uma interface do usuário melhor. O papel de "designer" é raro no ciclo de desenvolvimento, especialmente no mundo dos aplicativos do Windows.

Existem algumas regras básicas a seguir para ter uma interface do usuário muito mais bonita e funcionando melhor para o seu aplicativo. Não requer muito investimento de tempo ou dinheiro da sua parte, e adiciona um bom retorno sobre o investimento.

Antes de prosseguirmos, vamos diferenciar entre interface do usuário e experiência do usuário — pelo menos para o escopo deste artigo. Interface do usuário, ou interface do usuário, refere-se aos visuais e controles do seu aplicativo, enquanto a experiência do usuário, ou UX, engloba tanto a interface do usuário e o comportamento do aplicativo relacionado à interface do usuário, bem como a "sensação" que o usuário obtém do seu aplicativo. Não se trata apenas de projetar uma interface do usuário de ótima aparência, mas também de garantir que ela funcione bem.

Aqui vamos discutir 20 pontos de UX design que você pode integrar facilmente na sua fase de design de aplicação. O resultado serão aplicações mais ricas com melhor funcionalidade intuitiva — uma "UX humana". Como todos sabemos, a geração de aplicativos do Windows Vista precisará parecer e se comportar de forma diferente. Este tópico irá ajudá-lo a preparar-se para aplicações futuras, dando aos seus utilizadores atuais uma amostra do futuro.

As seções a seguir discutem os conceitos básicos do design adequado da interface do usuário.

Os princípios básicos da interface do usuário adequada

Uma UX com aparência profissional depende destes quatro fatores:

  • Espaçamento e posicionamento
  • Tamanho
  • Agrupamento
  • Intuitividade

Com versões do Microsoft Visual Studio anteriores à 8.0, o espaçamento e o dimensionamento eram subideais. Uma grelha 4x4 ou 8x8 nem sempre funciona. Com a inclusão do SnapLines, o processo foi bastante simplificado. Alinhar um rótulo com uma caixa de texto ou, pior ainda, alinhar vários rótulos com suas caixas de texto correspondentes era extremamente difícil em versões anteriores do Visual Studio. Os SnapLines simplificaram muito esse processo.

As seções a seguir descrevem quatro dos aspetos mais importantes do UX design profissional.

Espaçamento e posicionamento

O espaçamento entre dois controles é importante. A captura de tela a seguir demonstra um formulário de entrada Informações do Usuário mal projetado — as duas caixas de texto superiores estão muito próximas, a lista abaixo delas está muito longe e há muito espaço não utilizado no formulário.

captura de tela de um formulário mal projetado.

Na captura de tela a seguir, você pode ver uma caixa de diálogo de aparência mais profissional com espaçamento adequado e controles de tamanho apropriado. Este é o mesmo formulário da captura de tela anterior, mas foi modificado para usar o espaçamento recomendado pelo SnapLines. É sempre recomendável alinhar um rótulo com a linha de base de texto da caixa de texto ou outro controle ao lado dela, em vez da borda inferior real do controle. As SnapLines giram uma cor diferente quando esse alinhamento é alcançado, geralmente apenas alguns pixels acima da borda inferior.

captura de tela de um formulário mais bem projetado.

Embora não existam regras exatas para o espaçamento, os SnapLines fornecem diretrizes extremamente úteis para o espaçamento adequado. Outras ferramentas para ajudá-lo a manter o espaçamento adequado são os controles de layout no grupo Caixa de ferramentas Contêineres. O TableLayoutPanel também é muito útil para criar caixas de diálogo de estilo de formulário de entrada.

Tamanho

As mesmas considerações se aplicam ao tamanho. Quando você arrasta um botão da caixa de ferramentas para o formulário, ele tem a altura e a largura perfeitas. A largura máxima recomendada (salvo quaisquer razões seriamente importantes) é duplicar a largura original.

Se você olhar para a janela Executar no menu Iniciar ou para a caixa de diálogo Propriedades de qualquer objeto do Windows Explorer, os tamanhos dos botões estão 'certos'. Se você tem uma função muito importante que você precisa que seu usuário final perceba sem falhas, existem outros métodos além de usar um botão grande ou cores não padrão berrantes (mais sobre isso mais tarde).

Na imagem a seguir, você pode ver três botões. O primeiro botão é o tamanho mais recomendado e é o tamanho criado por padrão quando arrastado (ou clicado duas vezes) da caixa de ferramentas. Às vezes, o texto extra exige que você aumente o botão. O segundo botão mostra um tamanho grande, mas aceitável. Não criaria uma confusão para estabelecer outros controles. O terceiro botão, no entanto, é um tamanho completamente inaceitável. Você pode ver que ele até distorce ligeiramente os bitmaps de tema que o Windows usa para desenhar controles temáticos. Também dificultará o alinhamento intuitivo de outros controles em torno dele.

imagem de três botões, aumentando de tamanho da esquerda para a direita.

Agrupamento

Normalmente, um aplicativo contém muitos controles. Somente através de um agrupamento adequado e intuitivo você pode tornar todos esses controles mais fáceis de usar. O agrupamento baseado em função ou categorizado é feito melhor pelos controles Tab. Por exemplo, 'Contas', 'Relatórios', 'Funcionários' e 'Projetos' seriam candidatos perfeitos para guias em um aplicativo de negócios típico. O agrupamento de irmãos — controles que contribuem para o mesmo resultado final — é melhor feito por controles de grupo. O uso de painéis com bordas para esse agrupamento não é recomendado. Os controles de grupo economizam o peso extra de um controle de rótulo, especialmente se os subcontroles forem autoexplicativos.

Controles de grupo dentro de controles de grupo não são recomendados, a menos que não haja mais de 2 ou 3 deles dentro de um controle de grupo grande.

Intuitividade

Este é o aspeto mais importante de uma ótima experiência do usuário. A UX intuitiva diminui a necessidade de explicações. O usuário só sabe o que os controles fazem.

Um tópico importante no design intuitivo é o código de cores. Um bom exemplo é apresentado no Windows XP, que apresentou novos botões soft-square para funções como navegação em aplicativos temáticos, o Log Off e caixas de diálogo Desligar do computador, entre outros.

A coloração desses controles foi determinada com base na gravidade do resultado desse botão sendo pressionado. A navegação é verde, tal como um semáforo "Go". Shut Down, que resultaria em uma potencial perda de trabalho, é colorido de vermelho como um sinal de alerta. Os botões semicríticos, como Log Off ou Hibernate, são amarelos. Botões neutros que não têm efeitos críticos nos processos de trabalho do usuário, como a Ajuda, são azuis suaves. Ao criar uma interface do usuário com capa, esses aspetos de cor devem ser mantidos em mente.

Um bom exemplo de reconhecimento de conteúdo por cores é o Microsoft Office OneNote. As guias do aplicativo podem ser definidas para cores diferentes, enquanto ainda se parecem essencialmente com uma parte adequada do design geral do estilo do Windows XP.

Outro aspeto importante é o texto em seus aplicativos. Recentemente, houve vários esforços para simplificar a linguagem usada para as instruções escritas no software Windows. O uso de texto dentro do software será discutido mais tarde, mas observe o seguinte detalhe pequeno, mas importante.

O MSN Messenger tinha uma caixa de seleção em sua caixa de diálogo Opções marcada como "Compartilhar recursos da webcam". Desenvolvedores e pessoas amigáveis à tecnologia sabem o que isso significa, mas um usuário iniciante pode pensar que você poderia deixar outro usuário do outro lado do bate-papo usar sua Web cam também. Em uma versão recente, eles mudaram para "My Webcam: Allow others to see that I have a webcam". Isso é perfeito para o público-alvo que pode não ter conhecimento técnico e está acostumado com uma linguagem simples.

Embora uma linguagem mais simples facilite a compreensão, há também uma vantagem adicional. Estudos científicos mostram que nossa mente trabalha mais facilmente com uma linguagem mais simples quando tentamos entender algo novo. Muitas vezes, nosso cérebro processa palavras como 'isso', 'para', 'aquilo' e outras palavras comuns de forma tão rápida e sem esforço que mais 'largura de banda' é alocada para entender as palavras que se destacam, como 'Webcam' ou 'Outros', no exemplo acima.

Títulos de caixas de mensagens, legendas de GroupBox e outros blocos de texto facilitam a transmissão da função de um grupo de controles para o usuário final com apenas algumas palavras.

A intuição também nasce da familiaridade. Por exemplo, o posicionamento dos botões OK e Cancelar é tão uniforme e bem colocado em nossas mentes que, se uma caixa de diálogo mantiver esses botões em uma sequência inversa (Cancelar, então OK; em vez de OK, então Cancelar) — você pode simplesmente pressionar Cancelar em vez disso. Depois de usar um padrão específico para fazer coisas — aplicativos baseados no Windows, por exemplo — por mais de um ano, os hábitos se desenvolvem. Seguir os padrões da indústria (por mais não declarados que sejam) torna o seu software mais fácil de usar.

Em uma das primeiras compilações de visualização do Windows Vista, os botões Minimizar, Maximizare Fechar de qualquer janela se tornaram diferentes. Em versões anteriores do Windows (especialmente ao usar um único monitor), você desenvolve o hábito de mover o cursor no canto superior direito da tela e clicar. Isso sempre resultou no fechamento da janela. Agora, nesta compilação específica do Windows Vista, havia aproximadamente 8 pixels de espaço entre o botão Fechar e a borda mais à direita da janela. O espaço extra fez com que parecesse legal (e provavelmente era necessário para a animação de brilho legal que o botão ostentava), mas era irritante porque não permitia que os usuários fechassem janelas abertas com tanta facilidade. Recondicionar a mente pode ser difícil. Felizmente, na compilação seguinte, esse problema foi resolvido. Agora, ainda há espaço entre a borda da janela e o botão de fechar, mas clicar nesse espaço também faz com que a janela seja fechada.

Um fator muito importante do design intuitivo é a quantidade de "largura de banda mental" – a quantidade de tempo que nossa mente pode levar para compreender algo – ele usa. Quanto menor for a utilização da "largura de banda", melhor será a sua experiência de utilizador.

Estas são pequenas coisas que contribuem para a "experiência" de usar uma aplicação de software. Os exemplos a seguir fornecem dicas sobre como melhorar seus aplicativos com dicas e truques do mundo real.

20 dicas para uma experiência de usuário melhor e funcional

O objetivo de uma melhor experiência do usuário é ter uma interface do usuário mais simples, fácil e funcional que também pareça boa. Essas dicas ajudarão você a moldar sua interface do usuário para ser mais eficaz.

Padrões de uso

Os padrões estabelecidos de qualquer ambiente de software — seja no nível do sistema operacional, da marca ou do aplicativo — são muito importantes. Além da marca, os padrões funcionam como um esquema proverbial na mente do usuário. Quando o usuário passa longos períodos de tempo trabalhando com um aplicativo de software, ele ou ela automaticamente aumentará a produtividade devido à crescente familiaridade.

Antes de discutir padrões, vamos primeiro discutir quais são exatamente esses padrões. Os padrões incluem tudo, desde o layout dos controles de uma maneira específica nas caixas de diálogo — como os botões OK e Cancelar, a forma da interface do usuário — cantos arredondados da parte superior da janela, como nas caixas de diálogo do Windows XP, estilos de ícones, estilos de quaisquer outros gráficos, comportamento interativo do seu aplicativo, e afins.

Se a sua aplicação se enquadra num nicho específico, então pode ser melhor seguir um conjunto diferente de normas. Por exemplo, se o seu aplicativo oferecer suporte a um aplicativo ou um complemento para o Office OneNote 2003, é aconselhável seguir os estilos de interface do usuário e os padrões de interatividade do Office — e do próprio OneNote, em particular. Isso inclui usar as barras de comandos no estilo do Office em vez das barras de ferramentas padrão e outras coisas do tipo, tanto visuais quanto comportamentais. Se seu aplicativo deve fazer parte da categoria Microsoft Visual Studio .NET, então você tem um conjunto separado de padrões. Na verdade, para esses complementos ou aplicativos de suporte, empresas como a Microsoft lançam diretrizes escritas. Observe também que, às vezes, os conceitos gráficos e de design são propriedades intelectuais protegidas. Verifique sempre a documentação adequada para se certificar de que tem a licença para criar tais projetos.

Um terceiro exemplo de padrões seria o ambiente Tablet PC. Esses padrões cruzam os limites entre as diretrizes do sistema operacional e as diretrizes do aplicativo. A documentação do SDK do Tablet PC contém algumas informações muito úteis no tópico "Planejando seu aplicativo". Em contraste com as diretrizes do Office 2003 ou do Visual Studio, essas recomendações de design afetam diretamente como o usuário interagirá com seu aplicativo e como ele deve se comportar por sua vez. Por exemplo, se você tiver janelas de encaixe em seu aplicativo, a documentação recomenda que você verifique se ele pode detetar quando a orientação da tela é alterada e que as janelas de encaixe se reorganizam corretamente em uma orientação retrato ou paisagem, conforme necessário. Mesmo que você não esteja projetando seu aplicativo para ser específico do Tablet, você deve revisar essas diretrizes.

Com a ascensão dos Smart Clients, as aplicações estão agora a ultrapassar as fronteiras entre diferentes hardwares — PCs normais, Tablet PCs, Dispositivos Móveis ou Ultra Móveis, PCs Media Center e assim por diante. Cada situação exige que se siga um conjunto diferente (ou adicional) de normas.

Quando os aplicativos compartilham os padrões de nível de sistema operacional ou de aplicativo, os usuários se sentem mais em casa com o software, o que facilita o aprendizado e o uso. Este resultado é um impulso direto à produtividade. Os usuários querem ser capazes de se tornar produtivos com o novo software o mais rápido possível.

Chamar a atenção para botões importantes

Às vezes, você precisa direcionar o usuário para os botões mais importantes, mesmo quando você tem quatro ou cinco outros botões ao seu redor. Se você experimentar o tamanho, a cor ou a fonte, quebrará os padrões, o que não é recomendado. Em vez disso, você pode usar alguns truques simples para conseguir isso.

A primeira é converter os outros botões não críticos em LinkLabels, como mostra a imagem a seguir. Dessa forma, o usuário sabe que esses links executarão uma tarefa, mas sua atenção irá primeiro para o botão que se destaca, sem quebrar as diretrizes de design padrão.

imagem de três botões convertidos em linklabels.

O segundo é colocar o botão crítico em primeiro lugar na linha, seja à esquerda para layouts horizontais, como mostrado na imagem a seguir, ou na parte superior para layouts verticais. Observe que isso pode mudar dependendo da cultura do usuário alvo — você pode se sair melhor se colocar o botão em questão na extrema direita se seu aplicativo for qualquer idioma escrito da direita para a esquerda.

imagem de três botões onde o botão crítico é mais à esquerda em um layout horizontal.

A opção recomendada é definir para receber foco por padrão. Por exemplo, em uma caixa de diálogo de confirmação de exclusão, a opção Sem deve ser destacada, pois isso evita que o usuário exclua acidentalmente algo.

Simplifique o reconhecimento com ícones

Os ícones, especialmente os ícones e bitmaps da barra de ferramentas do Windows XP e do Office 2003, ajudam a acelerar a cognição da interface do usuário e da tarefa que o usuário precisa executar.

Por exemplo, quando você vê o ícone de exclamação mais frequentemente visto na Caixa de Mensagem, você instantaneamente se torna ciente do nível de risco associado aos controles ao lado desse ícone. Da mesma forma, quando seu aplicativo coloca muitos controles, não importa quão bem organizados, pode ser assustador encontrar o conjunto de controles que você está procurando.

No Windows XP Service Pack 2, uma guia atualizada é adicionada ao miniaplicativo Propriedades do Sistema painel de controle chamado "Atualizações Automáticas". Há quatro opções presentes: baixar atualizações automaticamente, baixar atualizações, mas permitir que o usuário decida quando instalá-las, notificar o usuário se houver atualizações disponíveis, mas não iniciar o download, e desativar completamente as atualizações automáticas.

Um novo usuário de PC pode não estar ciente do que são essas atualizações e pode não saber qual opção seria melhor escolher. Assim, a Microsoft colocou um ícone de escudo verde com uma grande marca de seleção ao lado do mais recomendado que significa uma opção "segura", e um ícone de escudo vermelho com um grande "x" ao lado daquele que seria potencialmente prejudicial para o usuário. Isso é muito útil em situações críticas, especialmente quando o usuário não tem tempo para ler muito texto.

No mesmo miniaplicativo Propriedades do Sistema , cada guia tem várias GroupBoxes com controles diferentes para tarefas diferentes. Um gráfico relativo é colocado ao lado de cada grupo que significaria facilmente a tarefa do grupo de controle. Este tipo de código gráfico é semelhante ao código de cores em arquivos físicos ou estacionamentos. Isso também funciona com o mesmo princípio de ter pelo menos alguns visuais em um artigo de revista – mantém o interesse do leitor.

Escolher o ícone certo também é importante. A Microsoft fornece muitos gráficos padrão como parte do Visual Studio 2005. Esta seria a melhor escolha. Se você criar seus próprios ícones, é altamente recomendável que você siga os padrões de nível de sistema operacional ou de aplicativo para esses gráficos, conforme mencionado na seção Usar padrões acima.

O Diretrizes de Interação da Experiência do Usuário do Windows contém um guia muito útil para criar ícones de estilo do Windows.

Simplifique o reconhecimento com cabeçalhos

Os cabeçalhos são a maneira perfeita de explicar toda a caixa de diálogo em uma única frase (e, opcionalmente, um gráfico). Às vezes, os cabeçalhos podem até ajudá-lo a acomodar a navegação e os comandos dentro deles também. Os cabeçalhos funcionam de forma mais eficaz do que os rótulos de descrição normais porque são a primeira coisa que um usuário vê quando a caixa de diálogo aparece.

Os assistentes do Windows Installer são talvez os cabeçalhos mais populares: um ícone simples na extrema direita; um rótulo de título descrevendo a caixa de diálogo (por exemplo, Selecionar pasta de instalação); e um subtítulo que descreve a finalidade da caixa de diálogo (por exemplo, Selecione a pasta onde os arquivos de software serão instalados).

Digamos que temos um aplicativo de negócios típico com uma seção de contas. Seguindo o paradigma de design defendido pelo Windows Vista, podemos fornecer informações de missão crítica e comandos relacionados no próprio cabeçalho (ou rodapé, se o cenário exigir). Nosso usuário abriu o arquivo de conta para "Big Company," e o cabeçalho seria algo parecido com o mostrado na captura de tela a seguir.

captura de tela de uma caixa de diálogo que contém um rodapé detalhado.

A captura de tela a seguir mostra um exemplo de um cabeçalho detalhado em uma caixa de diálogo.

captura de tela de uma caixa de diálogo que contém um cabeçalho detalhado.

Da mesma forma, você pode evitar ter que adicionar painéis de tarefas no estilo do Windows XP, especialmente quando você tem apenas alguns comandos, o que desperdiçaria muito espaço vertical, movendo esses comandos para o cabeçalho.

Há algumas coisas que você deve ter em mente ao projetar cabeçalhos:

  • Verifique se a cor do plano de fundo é diferente da cor do plano de fundo da caixa de diálogo. Na maioria das vezes, um cabeçalho branco sobre uma cor de rosto de controle intrínseco padrão do Windows serve. Mas se você realmente quiser ter certeza de que nenhum tema especial ou cores personalizadas atrapalham seu cabeçalho, desenhe um LinearGradient usando o Color.FromKnownColor com as cores ControlLight e ControlDark.
  • Se possível, mantenha a altura do cabeçalho abaixo de 150 pixels. Normalmente, uma altura de 100 ou 120 serve. Como regra geral, certifique-se de que é inferior a 1/4 de toda a altura do formulário.
  • Se você quiser adicionar edição in-loco para as informações mostradas no cabeçalho acima, substitua dinamicamente o LinkLabel por um Textbox e troque-os novamente assim que a edição for concluída.
  • Se você tiver um rótulo de título com uma fonte com mais de 10 pt de tamanho, use Arial, ou Franklin Gothic Medium. MS Sans Serif parecerá muito irregular e pouco profissional. Franklin Gothic Medium é a recomendação na documentação das Diretrizes de Design do Windows XP. Para aplicativos destinados ao Windows Vista, use a fonte Segoe UI que é a fonte padrão do sistema.

Usar caixas de mensagem personalizadas

As opções disponíveis na caixa de mensagem padrão do Windows são muito limitadas. Quando você tem que fazer ao seu usuário uma pergunta que não pode ser respondida com um simples sim / não ou OK / cancelar, torna-se complicado.

Os aplicativos do Windows estão se tornando mais simples de usar devido ao alto volume de usuários não técnicos. Às vezes, pode ser muito mais simples fornecer botões com textos mais amigáveis e até mesmo alguns controles adicionais — LinkLabels, por exemplo — para facilitar a realização da tarefa em mãos.

O Microsoft .NET Framework facilita a implementação de caixas de diálogo personalizadas. Apenas atribuindo algumas propriedades em seu formulário de diálogo personalizado ou com uma única linha de código, seu formulário pode funcionar como uma caixa de mensagem padrão. Em um evento de clique de botão, defina a propriedade DialogResult da caixa de diálogo como DialogResult.Ok ou DialogResult.Cancel. Use o método ShowDialog([OwnerForm]) do formulário pai. Esse método retorna o DialogResult valor.

Você pode usar todos os membros DialogResult. Essas mesmas opções são usadas pelo método padrão MessageBox.Show.

Como alternativa, você pode simplesmente definir a propriedade AcceptButton da caixa de diálogo como btnOKe a propriedade CancelButton como btnCancel. Isso mapeará automaticamente as teclas Enter e Esc para os btnOK e os respetivos eventos Click dos botões btnCancel.

Aqui estão algumas dicas para apimentar suas caixas de diálogo personalizadas:

  • Para tópicos complicados, forneça links para a Ajuda local ou on-line com um LinkLabel informando "Saiba mais" sob o rótulo de texto apropriado.
  • Em vez de botões Sim/Não/Cancelar, use textos que indiquem claramente o resultado de clicar no botão, como "Salvar arquivo e sair", "Sair sem salvar" e "Não sair". No entanto, mantenha o padrão Sim/Não, OK/Cancelar, e tais botões padrão sempre que possível. A familiaridade contribui para uma grande produtividade.
  • Mantenha 50 pixels de espaço de margem no lado esquerdo (ou direito, dependendo das configurações de cultura de destino) e adicione um ícone representando o cenário para a caixa de diálogo. Se for uma caixa de diálogo de informações, você pode usar o ícone "i" usado pelas caixas de mensagem padrão; Se for uma caixa de diálogo de segurança, você pode usar um ícone de cadeado ou um ícone de chave. O Visual Studio 2005 é fornecido com ótimos gráficos de alta qualidade.
  • Certifique-se sempre de fornecer navegação de teclado adequada para esses botões — os usuários usam muito os atalhos de teclado para caixas de mensagem (por exemplo, O para Ok, Y para Sim, C para Cancelar e assim por diante). Eles certamente achariam chato se seu diálogo personalizado não os usasse.

Incluir comandos alternativos

Dois fatores importantes ditam a necessidade de métodos alternativos de entrada: frustração e preguiça. A frustração é uma coisa que ocorre com muita frequência para os usuários de computador. Quando você está frustrado, você quer que sua tarefa seja feita rapidamente. Um clique extra ou uma espera extra de alguns segundos realmente enfurece uma pessoa sob estresse – você sabe como é, todos nós já estivemos lá. A preguiça muitas vezes pede que você termine a tarefa apenas com o teclado ou mouse — o que você estiver usando no momento. Mas, além desses dois fatores, ter métodos de entrada alternativos torna mais fácil para o usuário realizar tarefas.

Por exemplo, se você tiver uma caixa de listagem com dois botões — "Adicionar" e "Remover" — em ambos os lados, deverá adicionar um menu de contexto para essa caixa de listagem com comandos de menu análogos a esses botões. Isso dá ao usuário a oportunidade de escolher o método que ele ou ela acha o mais adequado. Os usuários iniciantes, como afirmam as Diretrizes de Experiência do Usuário do Windows Vista, usam muito os menus de contexto e esperam que eles estejam em qualquer lugar em que cliquem com o botão direito do mouse.

Da mesma forma, usamos controles visuais para entrada de texto ou números. Por exemplo, controles deslizantes são usados para especificar inteiros e controles de calendário são usados para entrada de data. Às vezes, pode ser mais confortável apenas inserir digitando. Muitas vezes, pode fazer a diferença para o usuário se você adicionar um controle de Up-Down numérico vinculado a um controle deslizante ou usar um DateTimePicker em vez do controle Calendar.

Como lidar com ações críticas

Ao executar uma função crítica e irrecuperável, geralmente é uma boa prática fazer um pop-up de caixa de mensagem para confirmar a ação. Vamos levar isso até um degrau. Na captura de tela a seguir, você pode ver uma caixa de mensagem personalizada semelhante, mas com uma vantagem adicional: um temporizador mostrado visualmente com a ajuda de uma barra de progresso.

captura de tela de uma caixa de diálogo de ação crítica.

Há algumas variações específicas do cenário que você pode usar. Se a ação a ser tomada for muito crítica (desde sobrecarregar uma usina nuclear até excluir arquivos permanentemente), a ação padrão depois que o temporizador se esgotar deve ser cancelada. A caixa de diálogo não deve desaparecer, mas sim as alterações do rótulo de texto para mostrar que a ação foi cancelada. O usuário pode optar por confirmar o comando ou cancelamento.

Certifique-se sempre de que os botões que executam operações críticas estão claramente marcados — use sempre texto claro que descreva com precisão a ação. Se a ação for a exclusão de arquivos, não escreva "Remover arquivos do repositório"; escreva "Excluir arquivos do repositório". Ao trabalhar com listas de arquivos, se um comando de menu Excluir excluir os arquivos selecionados do próprio disco rígido (em oposição à remoção apenas da lista de arquivos), você deve enfatizar adequadamente a natureza crítica disso e enfatizar explicitamente que a ação excluirá permanentemente os arquivos.

Alguém disse uma vez: "Você é tão bom quanto seu pior trabalho". O mesmo se aplica às aplicações de software. Uma única experiência ruim com seu aplicativo pode causar uma grande impressão negativa no usuário. Para garantir que isso não aconteça, uma coisa que você pode fazer é garantir que, se seu aplicativo falhar, ele caia normalmente. Se você puder adicionar recuperação de dados, ou permitir que o usuário tente salvar uma cópia desses dados, pode ser uma grande vantagem. O usuário deve ser devidamente notificado se o aplicativo falhar. Uma JIT-Debugger ou uma caixa de diálogo de erro crítico não é uma coisa boa. Embora falar sobre como lidar com falhas vá além do escopo deste artigo, recomendarei que um diálogo simples que peça desculpas ao usuário e o informe da situação (e possivelmente com um link para mais informações sobre como se recuperar dessa falha) seria muito útil para o usuário.

Se você quiser dar um passo adiante, você pode fazer o que um dos meus aplicativos favoritos de design gráfico faz. Se ele falhar, ele mostrará uma caixa de diálogo de recuperação que permitirá que você salve uma cópia separada do arquivo que está sendo trabalhado e, em seguida, lhe dará uma caixa de diálogo de feedback onde você pode inserir informações sobre a falha (informações pessoais opcionais, é claro) e enviá-lo para os criadores.

RadioButtons ou ComboBoxes?

À primeira vista, o método para fazer uma seleção única não parece tão difícil ou importante. Às vezes, pode ser, especialmente se o cenário for um aplicativo usado para trabalhos sensíveis ao tempo.

Vamos dar uma olhada em um exemplo da vida real. A Microsoft lançou recentemente uma versão prévia de um aplicativo gráfico, Expression Graphics Designer (anteriormente codinome "Acrílico"). Eu tinha cerca de 20 objetos gráficos aos quais eu tive que atribuir uma determinada propriedade separadamente nesta aplicação. Foi um processo sombrio. Para fazer isso, eu tive que selecionar o objeto, clique no botão para abrir a janela de configurações e definir as opções. Em uma dessas opções, duas opções tiveram que ser escolhidas de uma ComboBox, como você pode ver na captura de tela a seguir.

captura de tela da caixa de diálogo Textura de franja para o Expression Graphics Designer.

Quando você tem que soltar a lista ComboBox e selecionar o segundo item (de apenas 2 itens) pode ser realmente irritante. O que geralmente não percebemos é o tempo que leva para a lista suspensa aparecer. Pode desperdiçar muito do seu tempo e pode ser frustrante. Isso poderia ser resolvido facilmente colocando um GroupBox com dois RadioButtons, especialmente quando há tanto espaço disponível. Encontrei problemas semelhantes em aplicativos como CorelDRAW, Microsoft Access e outros.

Além de perder tempo por causa da animação suspensa, também desperdiça nossa "largura de banda mental". Com dois RadioButtons "sempre visíveis", nossa mente saberia subliminarmente a posição para o cursor clicar. Com a ComboBox só será processado depois de a lista ter sido sorteada. Embora possa parecer muito pouco importante, na verdade é muito importante.

Às vezes é melhor usar RadioButtons, especialmente se você tiver 4 opções ou menos.

Nunca perturbe o utilizador!

Além de colocar uma arma na cabeça, essa é a coisa mais destrutiva que um desenvolvedor pode fazer com os usuários. Quando seu aplicativo, desnecessariamente ou não, interrompe o usuário enquanto ele está trabalhando em outro aplicativo com uma caixa de mensagem ou um flash da barra de tarefas, você ganha pontos negativos do usuário.

Os flashes da barra de tarefas podem ser úteis, é claro, mas devem ser chamados apenas quando o processo do seu aplicativo requer a entrada do usuário para continuar, ou se você tiver algo crítico para transmitir ao usuário. Se o usuário manteve a barra de tarefas em Auto-Hide, um botão da barra de tarefas piscando pode obstruir o usuário de acessar a barra de status ou outros controles de baixa ancoragem, pois a barra de tarefas estaria em cima dela e não se ocultará novamente até que o usuário tenha clicado no botão piscando.

captura de tela de uma janela do sistema.

As janelas de "brinde" (veja a Figura 10), tornadas famosas por clientes de mensagens instantâneas como o MSN Messenger, são uma ótima solução para informar o usuário sobre algo sem incomodar ou interromper seu fluxo de trabalho. Há um ótimo artigo de Bill Wagner sobre criação de janelas Toast. É boa política (e maneiras) não perturbar os brindes de qualquer outro aplicativo. A obstrução de tais janelas pode ser irritante e improdutiva. Uma solução é usar o ToastSemaphore Mutex fornecido pelo sistema operacional para evitar a colisão do sistema.

Às vezes, você pode precisar mostrar vários itens pelo brinde. Aparecer 3 ou mais torradas não seria realmente aconselhável. Em vez disso, andar de bicicleta através de cada um estourando/desbotando um brinde após o outro seria melhor. O Microsoft Outlook implementa uma solução semelhante ao notificar o usuário de e-mails recebidos.

Fornecer status de progresso

Muitas vezes, há tarefas que exigem que o usuário aguarde. Claro, esta é uma das coisas que o usuário simplesmente odeia fazer. Mas pior é quando estão à espera sem saber o que está a acontecer. Às vezes, seu aplicativo pode precisar se conectar a um serviço Web ou a um computador remoto, ou talvez esteja processando grandes blocos de dados — seja qual for o motivo, o usuário deve estar ciente ou, pelo menos, vagamente ciente do que está acontecendo sob o capô. Existem diferentes métodos para o fazer, com base na situação.

Se você estiver se conectando a algum objeto distante, como um serviço Web ou algo colocado em uma rede ou servidor de Internet, seria aconselhável mostrar uma caixa de diálogo de progresso simples (veja a imagem a seguir) ou uma barra de progresso hospedada na barra de status. Um rótulo de acompanhamento deve descrever o estado atual do processo. Por exemplo, se você estiver se conectando a um serviço Web para processar alguns dados, basta dizer "Conectando-se ao serviço Web... " ou "Por favor, aguarde, processando... " Se este processo for síncrono, é aconselhável desativar todos os controles que o usuário pode acessar até que o processo tenha sido concluído, ou apenas mostrar o progresso como uma caixa de diálogo modal.

captura de tela de uma caixa de diálogo da barra de progresso.

É altamente recomendável que você defina o estilo da barra de progresso para o modo Letreiro se estiver usando uma barra de progresso e o tempo de processamento for desconhecido ou se você não tiver um valor máximo.

Outro método que está se tornando popular é uma janela fixa do sistema que exibe o progresso. O downloader/atualizador do Microsoft AntiSpyware ou as notificações do sistema de verificação de e-mail do Norton AntiVirus são bons exemplos disso. É claro que isso deve ser usado apenas para processos assíncronos. Caso contrário, o usuário pode se sentir desconcertado. Essas janelas são melhor usadas para processamento em segundo plano, como baixar uma atualização ou executar uma tarefa agendada, e nunca devem ser definidas como "Sempre no topo".

Simplifique etapas complexas com assistentes

É seguro supor que, se confrontado com uma infinidade de controles em um único formulário, um usuário típico será confundido sem fim. Às vezes, nenhuma quantidade de agrupamento, dimensionamento ou espaçamento pode ajudá-lo quando você tem muitos controles importantes.

Um assistente é a melhor coisa para esses cenários. Você pode dividir os controles por tarefa ou categorias, conforme aplicável, e colocá-los em etapas separadas. Isso pode ajudar o usuário a manter o foco e não se intimidar com a tarefa. Você pode fornecer ajuda específica de etapas ou tarefas com um botão Ajuda. Para obter mais detalhes, consulte Wizards.

Os assistentes também são uma boa maneira de ajudar a configurar a configuração inicial do seu aplicativo. Muitos aplicativos usam esse assistente para configurar a configuração personalizada logo após a conclusão da instalação ou no primeiro uso. Esse assistente inicial também deve ser opcional, se possível — se o usuário cancelar a qualquer momento, as configurações não especificadas vão para valores padrão. Se você puder tornar o assistente um pouco gráfico (consulte a seção Use Pretty Graphics), isso torna a tarefa de configuração muito mais fácil.

Acerte o tom do seu texto

No Windows User Experience Interaction Guidelines, um ponto muito importante foi feito sobre "Tom de texto". Esta é a impressão e o sentimento dado pelo texto na sua aplicação. Isso pode ser qualquer coisa, desde uma simples dica de ferramenta até um controle de etiqueta de instruções.

Anteriormente, discutimos a mudança de texto na opção Webcam no MSN Messenger. Isso é chamado de tom de texto adequado. Ao lidar com usuários não técnicos ou iniciantes, transmitir a mensagem assume um aspeto diferente.

Se você escrever "Caminho de destino" acima de uma caixa de texto em um aplicativo de extração automática, um usuário técnico pode facilmente saber que você insere algo como "C:\Temp\MyPath". Um usuário novato (pense "Mãe") pode facilmente ficar perplexo e precisaria consultar o manual, ligar para o suporte técnico ou, pior, desistir. Uma boa alternativa é especificar o que você deseja que o usuário faça: "Selecione a pasta onde você gostaria de colocar esses arquivos." Você pode até mesmo renomear o "Procurar... " ao lado dessa caixa de texto para "Selecionar pasta... "

Fornecer uma descrição clara do que você deseja que o usuário faça também diminui a necessidade de arquivos de Ajuda ou, pelo menos, diminui os detalhes que você precisa incluir nos arquivos de Ajuda.

Uma sugestão muito boa das Diretrizes de Interação da Experiência do Usuário do Windows se aplica a qualquer software. Afirma que o escritor deve manter o texto conversacional. As Diretrizes definem isso como: "Evite palavras que você não diria a outra pessoa pessoalmente".

Algumas dicas para escrever texto:

  • Evite falar sobre o usuário na terceira pessoa. Diga "Você" em vez de "O usuário".
  • Sempre que possível, use criteriosamente "Meu nome:" ou "Meu endereço de e-mail:" em vez de "Nome:" ou "E-Mail:"
  • Ao dar várias opções, escreva o texto da perspetiva do usuário. Por exemplo, se você tiver dois RadioButtons sob um rótulo como "Select permission for [Username] on this network" acima de dois RadioButtons, como "Allow" e "Deny", substitua o texto RadioButton por "Quero permitir [Username]" e "Quero não permitir [Username]".
  • Sublinhe o texto somente se ele for usado para links. Ele confunde o usuário se o texto sublinhado não for um link.
  • Chame a atenção para informações importantes com um rótulo em negrito, mas use-o com cuidado. O excesso de texto em negrito é confuso e reduz o impacto geral do formulário.
  • Ao escrever o texto para uma caixa de seleção, certifique-se de que é fácil saber o que acontecerá quando ele for selecionado e quando estiver desmarcado ou desmarcado. A opção recomendada é escrever o texto diretamente como resultado da seleção da caixa de seleção. Por exemplo, escreva "Envie-me informações úteis de seus parceiros" em vez de "Não me envie informações úteis de seus parceiros". Embora eu possa imaginar muitas pessoas de marketing discutindo sobre este exemplo em particular, tenho certeza de que você sabe o que quero dizer.
  • Se você tiver um controle semelhante a um botão (geralmente um RadioButton com uma aparência de Botão de Comando) que controla Ativado/Desativado, certifique-se de rotulá-lo corretamente. Se o processo estiver ativado, escreva "Ativado" em vez de "Ativar" ou "Desativar". Se você escrever Habilitado, ele mostrará o status atual. Se o botão for clicado (ativado) e o botão disser "Ativar", pode ser confuso e problemático. "Ativar" pode solicitar que o usuário clique nele pensando que o processo não está ativo.

Às vezes, um ListView é melhor

Muitas vezes nos apegamos a DataGrid ou ListBox ou até mesmo ComboBox para tarefas de seleção, mas com o Windows XP e versões posteriores do Windows, usar um ListView pode lhe dar opções maiores.

Os pontos finos do controle ListView:

  • Acelera o reconhecimento de itens com ícones e bitmaps.
  • Exibe informações adicionais com os modos de exibição Detalhes ou Bloco.
  • Com o Visual Studio 2005, você pode até mesmo ter grupos para categorização adicional. Os grupos abrangem todas as vistas e são flexíveis. Os grupos também podem ser usados para nivelar uma exibição de hierarquia (como uma TreeView) onde há mais nós filho do que nós pai. Um bom exemplo disso é a caixa de diálogo Conexões de Rede no Windows XP, quando visualizada com "Mostrar em Grupos" e a exibição definida como Detalhes.
  • Para personalizar um controle ListView, pinte-o manualmente definindo a propriedade OwnerDraw e usando os DrawItem e eventos DrawSubItem.
  • Suporta edição rápida in-loco de itens ListView.
  • Suporta facilmente a reordenação manual.
  • Permite que os usuários selecionem a exibição (ícones grandes, ícones pequenos, lista e assim por diante) com a qual se sentem mais confortáveis.

Simplifique a navegação com controles de trilha e barras laterais

"Subnavegação" é a chave para uma interface do usuário complexa. Às vezes, você não consegue escapar de ter uma interface do usuário complicada. A melhor coisa a fazer em tal situação é tornar a experiência o mais fácil possível para o usuário. Uma barra lateral que consiste em rótulos de link, ou um TreeView para navegação baseada em hierarquia, sugere uma navegação de nível irmão para a tarefa da caixa de diálogo atual. Isso torna muito fácil para o usuário saltar entre as etapas do processo, sabendo onde ele ou ela está.

Se você optar por uma navegação baseada em hierarquia com TreeViews ou outra navegação igualmente complexa, um bom utilitário para o usuário seria um controle breadcrumb. Embora o Visual Studio ainda não seja fornecido com um controle interno para isso, consulte Criando um controle de trilha para obter informações sobre como criar um por conta própria. Um controle breadcrumb facilita a localização atual em relação à hierarquia.

A navegação de trilha pode ser facilmente mesclada no cabeçalho se o formulário tiver um. Consulte a secção anterior sobre cabeçalhos.

Use gráficos bonitos

Todo mundo adora aplicativos com gráficos legais — a maioria gosta, pelo menos. Embora uma interface do usuário com gráficos bonitos não seja uma escolha lógica para todos os aplicativos, ela ajuda a causar uma boa impressão e pode ser um prazer trabalhar. Claro, os gráficos não devem impedir a produtividade, mas se usados corretamente, eles podem aumentá-la!

Não tem de haver muitos gráficos, nem exigem necessariamente muito trabalho. Uma tela inicial projetada profissionalmente ou um cabeçalho (como o que falamos anteriormente) faz o truque. Se o seu orçamento permitir, você pode usar gráficos bem projetados para barras de ferramentas, assistentes e muito mais. Eles tornam seu aplicativo bonito e mais profissional também. É um efeito sutil, mas um olhar profissional transmite confiança e estabilidade. Se você é uma empresa relativamente pequena criando aplicativos de varejo, este é um aspeto fundamental a considerar.

Sempre faça questão de usar gráficos projetados profissionalmente. Os gráficos royalty-free estão facilmente disponíveis e a preços acessíveis. Você também pode contratar um designer. Mas se os gráficos não são o seu forte, não tente você mesmo. Se você não pode adquirir ou usar gráficos projetados profissionalmente, então é melhor não usá-los em tudo.

Para gráficos pequenos, você sempre pode optar pelos ícones e bitmaps fornecidos com o Visual Studio 2005. (Os gráficos fornecidos com versões anteriores não são recomendados!)

Forneça formulários redimensionáveis quando possível

As janelas redimensionáveis são um pouco parecidas com as janelas independentes de resolução. As janelas independentes da resolução têm o mesmo aspeto quer utilize ecrãs de 96DPI ou 300DPI. Independentemente de a interface do usuário do seu aplicativo ser independente de resolução, ela se sairá melhor se for redimensionável. É claro que isso não se aplicaria a muitos cenários, mas é uma boa regra de uso geral.

Se sua janela lida com listas de qualquer tipo, especialmente ListViews, isso se torna ainda mais importante. O redimensionamento permite que o usuário veja mais dados ao mesmo tempo.

Por exemplo, temos uma aplicação onde o utilizador tem de selecionar uma imagem de uma grande coleção. A caixa de diálogo aberta permite que você selecione uma exibição de miniatura, mas a caixa de diálogo é de tamanho fixo e a lista de miniaturas mostra apenas 4 miniaturas de cada vez. Se a coleção tiver uma centena de imagens, rolar e olhar – uma tarefa repetitiva – pode ser bastante cansativo e uma diminuição na eficiência. Se a caixa de diálogo for redimensionável, o usuário pode torná-la tão grande quanto for confortável ou pelo menos tão grande quanto a tela permitiria, e ser capaz de concluir a tarefa rapidamente. Se a sua lista tiver rolagem horizontal, como um ListView detalhado ou DataGrid, é ainda mais cansativo! Janelas redimensionáveis são muito úteis em tal situação.

Forneça mais funcionalidade com barras laterais/painéis de tarefas

Como os cabeçalhos que falamos anteriormente, barras laterais e painéis de tarefas são uma maneira maravilhosa de fornecer funcionalidade extra e comandos utilitários. Por exemplo, os painéis de tarefas no Office Word 2003 são muito convenientes, acessíveis e não intrusivos. Eles também funcionam de forma assíncrona ao se conectar a recursos on-line, fornecendo ao usuário a opção de multitarefa.

Criar um painel de tarefas ou uma barra lateral é tão fácil quanto criar um painel de encaixe, com a opção de colocar um gráfico liso na parte superior para funcionar como uma barra de título. Você pode até usar um controle Label colorido para isso. As oportunidades para painéis de tarefas são muitas!

Se você tiver funcionalidade adicional e quiser fornecê-la de forma não intrusiva ao seu usuário, não há lugar como o painel de tarefas. Você também pode tornar os painéis de tarefas "Ocultar automaticamente" ou recolher como as janelas de ferramentas do Visual Studio.

Dar uma opção de notificação

Anteriormente, vimos como fazer uma caixa de mensagem personalizada. Se uma caixa de mensagem em seu aplicativo vai ser mostrada com frequência para o usuário, então pode ser prudente adicionar uma caixa de seleção que o usuário pode selecionar para desativar essa caixa de diálogo de ser mostrada no futuro. Essa opção é especialmente boa para mensagens mais óbvias.

Um exemplo familiar disso é a caixa de diálogo Localizar do Visual Studio. Quando você pesquisa ou substitui texto, o Visual Studio mostra uma caixa de mensagem informando os resultados. Mas também lhe é dada a opção de desativar essa caixa de mensagem. Pode ser muito chato se você tiver que pressionar Enter ou clicar em OK toda vez que pesquisar.

Outra coisa legal que o Visual Studio faz é que, mesmo se a caixa de diálogo estiver desabilitada, ela ainda exibe os resultados dessa operação na barra de status.

Forneça dicas de ferramentas!

Às vezes, as dicas de ferramentas podem economizar muito tempo. Botões, caixas de seleção e outros controles podem ser ambíguos e o usuário pode não ter certeza do que fazer. As dicas de ferramentas fornecem a melhor forma de Ajuda sensível ao contexto em apenas uma linha. O usuário pode decidir rapidamente o que fazer sem procurar nada no arquivo de Ajuda ou abrir outra janela.

As pessoas muitas vezes ignoram isso em seus aplicativos. Faça questão de adicionar dicas de ferramentas a todos os controles ambíguos — ou a TODOS os controles, se possível. Não repita o texto de um rótulo de acompanhamento ou o próprio texto desse controle, mas forneça informações adicionais sobre esse controle. O texto deve explicar a função do controle em apenas algumas palavras.

Não se esqueça das pequenas coisas

As pequenas coisas podem incomodá-lo, mas ignorá-las pode afetar a impressão que você causa. Uma vez usei um aplicativo feito por uma pessoa importante na indústria de software que tinha seu formulário BorderStyle definido como Sizeable, mas os controles no lado direito do formulário não estavam ancorados. Por causa disso, o aplicativo criado por um peso-pesado da indústria tinha uma sensação não profissional.

Esses tipos de "pequenas coisas" são o núcleo da impressão geral. A interface do usuário e a experiência do usuário do seu aplicativo são o que os usuários julgarão seu aplicativo — pelo menos no início. Se eles virem bugs óbvios em sua interface do usuário, eles podem perceber que seu aplicativo é menos poderoso e eficaz.

Conclusão

Abordamos apenas uma pequena parte da experiência humana do usuário. À medida que a experiência do usuário se torna mais simples, eficaz, divertida e amigável, a tarefa de criar essa experiência do usuário se torna muito mais complexa. Mas com alguma previsão e bom planejamento, você pode criar uma ótima experiência do usuário.

A melhor maneira de criar a experiência de usuário perfeita é fazer testes de usabilidade direcionados especialmente para a interface do usuário, seja com um grupo de teste especial ou sozinho. Quanto mais tempo você gastar testando a experiência do usuário antes de lançar seu aplicativo, melhor. Irá poupar-lhe muitos problemas mais tarde.