Este artigo foi traduzido por máquina.

Facilidade de uso na prática

Estratégias para Criando Navegação de aplicativo

Dr. Charles Kreitzberg and Ambrose Little

Conteúdo

O VIEW COGNITIVA
Navegação É uma metáfora
Por que os usuários obter confusos
Agrupar várias páginas em seções lógicas
Criar um quadro
Usar a Ajuda de navegação
Levar crie
EXIBIR O SOFTWARE
Copiando a equipe de grande
Classificar do cartão
Padrões de design UX
Limpar pontos de entrada
Implementação
Controles
Teste, controle e ajuste
Em resumo

O VIEW COGNITIVA

Dr. Charles B. Kreitzberg

Obtendo a navegação direita é um dos aspectos mais importantes do projeto. Navegação é a estrutura no qual telas, interação e a aparência visual são criados. A axioma mais básica de usabilidade é o que deve fazer interação com o software tão fácil quanto possível, permitindo que os usuários se enfoque nas tarefas que eles o software em primeiro lugar. A medida que navegação é confusa e requer atenção do usuário para calculá-la, facilidade de uso será ser prejudicado.

Navegação É uma metáfora

O termo "navegação" transmite a idéia de viagem de um lugar para outro. Ele sugere que há caminhos que você seguir para obter de ponto a ponto e uma estrutura subjacente que direciona (e restringe) como você chegar lá. Ainda, embora falamos livremente sobre navegar através de um produto de software, nunca na verdade, vamos em qualquer lugar. Nós permanecem em um local enquanto a imagem para as alterações de tela em resposta a nossas interações com ele. Portanto, "navegação" é realmente uma metáfora, um mental, jogo para obter nossas mentes ao redor o design.

Quando a maioria das pessoas pensam sobre navegação, elas enfocam menus como a maneira de mover de tela a tela. Mas é bastante possível escrever programas poderosos criados em torno de uma única tela. Pense sobre o Microsoft Word, por exemplo. Apesar de sua funcionalidade abrangente e poderosa, quase todo o programa é criado em torno uma única tela, como você ver na Figura 1 .

A Figura 1 Deconstructing Word — ele ’s tudo na tela uma

O documento sendo trabalhou é central no design de tela. Ferramentas selecionadas a partir da Faixa de Opções são aplicadas ao documento e alterar seu conteúdo ou aparência. Quando uma ferramenta requer uma interação complexa, ele normalmente aparece uma janela filho sobre o documento. A janela filho pode ser uma janela restrita em que o usuário deve concluir a interação e descartar a janela filho antes de retornar ao documento — um exemplo é o comando de imagem de inserção. Talvez seja um assistente que orienta o usuário através de um processo. Como alternativa, a janela filho pode estar sem janela restrita, como o comando de dicionário de sinônimos, nesse caso ela estiver encaixada no lado onde ele pode permanecer aberto enquanto o usuário trabalha no documento.

A vantagem de uma simples, uma tela navegação abordagem é que o usuário nunca se torna desnorteado. O documento permanece no modo de exibição simples o tempo todo. O usuário ainda precisa saber onde encontrar as ferramentas e como eles funcionam, mas serão nunca obter perdidos em cyberspace ou saber onde deu a seu documento. Juntamente com seu uso quase universal em programas de processamento de texto, o paradigma de uma tela foi usado com êxito em programas de elementos gráficos como Microsoft Paint e a planilha programas como o Microsoft Excel. O Excel demonstra uma maneira eficiente para manter a metáfora de uma única tela com vários documentos ao alternar do documento ativo quando o usuário clica na guia associada, que você pode ver no canto inferior esquerdo da Figura 2 .

A Figura 2 o Excel também usa uma única tela

Há uma grande quantidade de valor na simplicidade da metáfora única tela. Mas a maioria dos programas são criados ao redor a metáfora de várias telas (ou páginas). Se você decidir criar a camada de apresentação ao redor de várias páginas, você pode gerar muita confusão. Como resultado de observando muitos testes de usabilidade, já vêm perceber que toda vez que você tirar os usuários uma nova página, você corre o risco de disorienting-los.

Por que os usuários obter confusos

Quando você pensa sobre ele, não é surpreendente que navegar de tela a tela é disorienting. Disorientation significa que o usuário tiver perdido direção. Observe os dois usuários na Figura 3 . Bob está trabalhando com um programa projetado ao redor de uma única tela. Suzana está trabalhando com um programa projetado ao redor de várias telas.

Observando esse diagrama, é claro que Suzana tem uma tarefa de percepção mais difícil. Não só o ele precisa pensar onde ela está e qual precisa ir, mas o processo complicado de desenvolvimento de um mapa interno é mais complicado pelo fato que Suzana somente está vendo uma tela por vez. Sem uma vista detalhada do terreno, ela precisa peça seu modelo mental juntos ao mesmo tempo que ela está aprendendo software desconhecido. Que é muito trabalho extra e ele pode levar a uma curva de aprendizagem steep.

A Figura 3 Obtendo o usuário confuso

O site ou navegação do produto serve para emoldurar o design inteiro da camada de apresentação. Se você obtê-lo à direita você irá um longo caminho para aumentar a usabilidade do produto. Considere as seguintes sugestões de como começar a criar a navegação:

Recurso de navegação de página única sempre que possível

A metáfora única página é simples e poderoso. Colocando mais funcionalidade em uma página pode melhorar usabilidade muito, desde que você for cuidadoso com o design de tela para que o usuário não seja confundida ou sobrecarregado. O que é eficiente sobre o design de única tela é que pessoas não perder o contexto enquanto eles estão observando as novas informações.

Como resultado do documento-orientação da Web, a freqüência com a qual os mecanismos de pesquisa levam um usuário a uma página interna, as restrições de técnicas de SEO de otimização de mecanismo de pesquisa e a página clunky redesenhar as características de HTML e seus controles de interface do usuário primitivos, ele se tornou comum criar muitas páginas da Web como uma prática de design padrão. Há situações em que é certo ter muitas páginas e solte o usuário em qualquer local, mas elas são raras. O gratuito vinculando que seja a joy e a eficiência da World Wide Web é ótimo para navegação mas não converter bem a situações na qual tarefa fluxo esteja envolvido.

A falha para perceber como disorienting pode ser mover um usuário de uma página para outra freqüentemente leva a criação de mais páginas que são necessários. Tive usuários informar em testes de usabilidade que eles vão diretamente para a caixa de pesquisa para localizar a página que deseja, em vez tentam combater com navegação do site.

Hoje, têm a capacidade criar páginas da Web sofisticadas com controles de interface do usuário sofisticadas. Guias, carousels, accordions, dicas de ferramentas e janelas filho estão prontamente disponíveis e podem reduzir a quantidade de navegação de tela a tela necessária.

Uma idéia de design que eu levado a sério é evitar navegação de tela a tela quando consigo. Um exemplo simples mostrará a você por que. a Figura 4 mostra um design de navegação da Web típico.

A Figura 4 típica navegação da Web

Aqui a empresa tem uma série de produtos que são apresentados como uma lista na primeira página. Clicar na utiliza de nome de produto desejado ao usuário uma página de informações do produto na qual ele pode retornar à lista produto ou ir para uma terceira página e exiba a garantia.

Agora vamos examinar uma versão única tela a navegação (consulte a Figura 5 ). Nesta versão três produtos são apresentados em um controle guia. Clicar na guia revela a descrição do produto. Se o usuário clicar no link "informações de garantia", uma janela pop-up modal exibirá as informações. Quando o usuário fecha a janela pop-up, ele ou ela é novamente na página inicial.

A Figura 5 um modelo de navegação de tela único

Obviamente, as guias não dimensionado bem se for necessário lidar com várias opções, portanto, você pode considerar um controle de modo de exibição de lista ou um controle mais interessante como um carousel. Apenas os diagramas, você pode ver como muito mais simples o segundo modelo de navegação. E tem a vantagem de que você pode ter vários links nas guias de produto e abrir uma janela separada (ou Assistente) para cada um. Você sempre retornar a sua base com um único clique, e ele é tem o mesmo produto mostrando como quando é exibida a janela pop-up. Os usuários achará muito mais simples porque ele mantém o contexto. O usuário nunca deixa a página para obter os detalhes.

Obviamente, a maioria dos produtos que criar possui várias páginas. Afinal, não há limites para a quantidade de funcionalidade que pode caber em uma única página. E usado com cuidado, várias páginas podem simplificar a interface do usuário, agrupando funcionalidade de uma maneira significativa. O truque é a perceber que sempre que você tomar um usuário a uma nova página você perder o contexto e riscos disorienting o usuário, para que usá-los com moderação e cuidadosamente. E acho que rígido sobre a forma à direita para segmentar as páginas.

Agrupar várias páginas em seções lógicas

Meu pesadelo navegação é o link HTML humble. (É realmente um pesadelo meu colega Ben Shneiderman e ajudou perpetrate com HyperTies, um navegador de hipertexto pre-Web — mas essa é uma história pela outra vez.) Sempre que um usuário clica em um link, eles são transportados para uma nova página. Sinta-se sem design cuidadoso, navegação pode facilmente à como sendo perdidos em uma floresta.

Quando você está criando um produto de várias páginas, pense rígido sobre como você escolhe agregar as páginas em seções. Figura 6 mostra um design de navegação comum que grupos de páginas em subseções.

A Figura 6 um design de navegação normal

O menu principal é uma série de guias, começando com a home page e oferecendo três seções. Quando você insere uma seção, um menu de seção permite navegar por páginas da seção. Na área de conteúdo, ou bem, mostrei um controle de conteúdo multistate. Seção 1 tem um controle guia e seção 2 tem um controle accordion.

Um design assim pode gerenciar muita de páginas. Por exemplo, se você teve sete seções do menu principal e cada seção teve sete páginas, e cada página tinha um controle de conteúdo multistate com sete painéis, você poderia efetivamente esteja controlando 73 ou 343 páginas exclusivas. E como cada painel de conteúdo pode exibir um número ilimitado de pop-ups, você pode gerenciar um grande volume de imóveis cibernético. Se for necessário mais páginas, você pode estender os menus usando menus de slide-out e em cascata.

Onde você precisa tomar cuidado principalmente é em situações quando você encontrar a necessidade de criar a navegação fora do menu. É tentador com freqüência para Planta de um link ou botão no conteúdo da página que leva o usuário em algum outro lugar. Já vi-lo a criar problemas várias vezes. Sempre que possível, manter a navegação através do menu e use links incorporados ou botões para alterar o estado de um controle ou criar um pop-up.

O modelo de navegação mostrado na Figura 6 tem uma hierarquia implícita. Você pode ver que claramente se os caminhos de diagrama.

O diagrama na Figura 7 , você pode ver a navegação horizontal da seção para seção e a navegação em uma seção. Há várias perguntas que precisam ser tratados.

A Figura 7 navegação entre seções

1. Quando você navegar de uma seção para seção onde você parar? Ele depende o fluxo que você está tentando atingir. Na maioria dos casos a opção menos confusa seria parar o usuário na primeira página da seção (por exemplo, A página no diagrama) na primeira visita da sessão. Você pode criar a página como um entryway para uma seção (ou seja, uma página de seção doméstico). Em seguida, eu poderia manter o estado do menu de barra lateral para que se o usuário à esquerda da seção e retornado, ele ou ela deve ser na mesma página.
2. E se você precisar obter da B de página (por exemplo) para a página G?

Tenha muito cuidado porque se você quebrar o modelo de navegação você acabará confuso o usuário. A primeira pergunta para solicitar é por isso você precisa fazer o salto entre duas páginas internas. Se o usuário precisa ir para ambas as seções para concluir uma tarefa, o design pode ser necessário ajuste. Dividir uma tarefa entre duas páginas internas é complicado e ineficiente.

Eu recentemente teve isso com um programa de transferência de arquivo que grava um arquivo de dados e um arquivo de log. Porque eu estava em um ambiente no qual as letras de disco mapeada alterada diariamente como resultado de unidades USB conectadas check-in e check-out, precisei redefinir as letras de disco sempre que eu usei o programa. Eu tive que vá para seção" A" para definir o local do arquivo de dados e a seção" B" para definir o local do arquivo de log. Era bastante inconveniente e demorado.

A solução para uma situação como essa é colocar todas as informações de disco em uma única página ou, se que não pode ser feito, abrir uma "cópia" de sombra o segundo disco em uma janela pop-up para que o usuário possa preenchê-lo em sem precisar navegar até a segunda página.

Se é apenas uma questão de conveniência, você precisará decidir que se a complexidade adicional pena clique você está salvando o usuário. Isso depende freqüência na qual o usuário precisará fazer a mudança. Se ocasional, seria vou com a navegação mais simples e clique do mouse extra. Se é freqüente, seria considere usar um menu drop-down de páginas na barra de menus horizontal para que o usuário possa obter a uma página interna em uma única etapa. Não é possível acho das circunstâncias no qual que poderia mapear transporte simplesmente o usuário de uma página interior outro. Grande em viagem de estrela que funciona, mas tende a ser bastante disorienting no software.

Criar um quadro

A área final que quero enfatizar é como o design visual pode suportar facilidade de navegação. Primeiro, considere quais elementos você deseja para o quadro de página — os elementos que aparecem de forma consistente de uma página para outra. Uma das melhores maneiras de manter o usuário orientado a é ter elementos consistentes em locais previsíveis. Eles se tornam âncoras visual para o usuário.

Um elemento importante para a maioria dos quadros é um título de página. Não apenas isso ajudar o usuário associar a página com um nome, mas facilita a discussões a equipe de suporte.

Considere a codificação de cores bem. No exemplo anterior, usei azul claro ao código de cor da seção doméstica, verde para seção 1 e laranja para seção 2. Essas cores ajudam os usuários saber qual seção ele ou ela está em. Eu também devem usar forma e a textura no design visual para oferecer suporte a usuários color-blind.

Usar a Ajuda de navegação

Dois auxílios de navegação comuns vale a pena incluindo são trilhas e um mapa do site. Apenas não dependem delas para solucionar problemas de design. Muitos usuários não ver nem entender trilhas. Mas para aqueles que fazem, eles são um recurso útil. No site do facilidade de uso guru Jakob Nielsen, useit.com, ele observa que os usuários de mais e mais confiar no trilhas. Ele também torna o ponto (com o qual eu concordo totalmente com) que trilhas devem refletir a hierarquia de navegação, não o histórico de páginas visita.

Mapas de site podem ajudar um usuário ter uma idéia do layout navegação, mas eles são usados raramente. No entanto, eles devem ser incluídos porque eles ajudam o usuário ver do pássaro necessários olho a navegação. Apenas não espera que sejam compensar problemas de design.

Um dos piadas a posição na comunidade de facilidade de uso é que cada pergunta de usabilidade tem a mesma resposta: "depende." Infelizmente, que é verdade para navegação bem. Existem algumas regras de design; a maioria é diretrizes e heurística. É por isso que é tão importante estudar os usuários e entender o contexto de uso antes de criar a interface do usuário.

Com essa limitação em mente, aqui estão algumas práticas recomendadas sugeridas:

1. Minimize o esforço necessário para compreender e tomar decisões sobre as opções de navegação. Menos esforço necessário para usar a interface do usuário, a melhor usabilidade.
2. Verifique use de designs única tela quando você pode. Usar ricos, multipane controles, pop-ups e assistentes para permitir que o usuário executar tantos da tarefa possível sem recorrer à navegação para os lados.
3. Ao criar várias páginas, combiná-las em seções. Facilitam Ir para seção seção com um controle de navegação principal e use um controle secundário para navegar em seções. Tente não vá mais profundo de você puder evitá-lo. Quanto mais simples a navegação, o mais rapidamente os usuários obterá proficiência.
4. Certifique-se de que elementos chaves, como menus, títulos e outras informações que são exibidas em todas as páginas são apresentados consistente do ponto de vista de visual. O usuário deve ter sentido de que alguns elementos da tela são estáveis e ser capaz usá-los para manter a orientação.
5. Tenha cuidado com elementos de navegação que os usuários da página interior de uma seção para a página interior de outra de transporte. Ela pode ser feito, mas é fácil disorient o usuário.
6. Usar auxílios de navegação secundária, como trilhas e mapas de site mas não dependê-los.
7. Pense 7.Always expansão futura. Se você espera que o produto para incorporar a nova funcionalidade no futuro, decidir no início como você irá expandir a navegação para perfeitamente incorporar novas telas.

Obtenção de navegação à direita é um das coisas mais importantes que você pode fazer para garantir a usabilidade do seu produto. Levar o tempo para fazê-lo à direita, confirme se o projeto com testes de usabilidade, e você terá os resultados desejados.

EXIBIR O SOFTWARE

Ambrose pequeno

Navegação é um dos itens a maioria das pessoas software Obtenha de concedidas e como com a maioria das questões de design, tendem a examinar apenas que outras pessoas estão fazendo e execute o cliente potencial. Obtemos obrigações dos gerentes de — "criá-lo parecer com o Office " ou " criá-lo aparência Amazon.com"—but acho como desenvolvedores voltados para fazer programas funcionar, nós não sobressalentes muito tempo para pensar muito sobre o design.

Alguns de nós são fortunate o suficiente para que as informações reais arquitetos trabalhar com nós (ou outras pessoas UX jack-of-all-trades). Mas, às vezes, esperamos que os designers de gráficos a lidar com navegação como parte do seu design, mesmo que muitas delas não tenha especialidade ou plano de fundo. Felizmente, existem muitos boas recursos por aí que resolvem o problema de auto-adesivo de navegação, e gostaria de tocar em poucas aqui.

Copiando a equipe de grande

Em primeiro lugar, não é sempre ruim seguir o que os líderes do setor estão fazendo. Há uma boa chance de que eles realmente tem gasto muito tempo e recursos de arquitetura de informações para obter-direito e, portanto, definir o tom para que as pessoas tem vindo para esperar. De certa forma, eles criar convenções e definir padrões, alteração, conseqüentemente, as expectativas sobre o software de maneira deve funcionar.

Dito isso, como pontos de Charlie, é muito melhor entender, na verdade, as pessoas que estiver usando a solução e os elementos que você está lidando com. Esses elementos incluem as informações e conteúdo de um site da Web ou os objetos em seu domínio. Uma parte principal do Noções básicas sobre as pessoas é entender suas metas para interagir com a sua solução, e se você receber esse direito, ele irá um longo caminho para garantir que você estruturar seu aplicativo corretamente.

Você pode aprender muito do equipe grande, mas você não deseja seguir cegamente porque seu público-alvo pode ser diferente. Talvez você tenha um público muito menor ou talvez seu conteúdo ou os produtos são muito diferentes para os produtos delas. Um dos exemplos melhores eu vi dessa diferença é a tentativa de imitar a Faixa de Opções do Microsoft Office (consulte a Figura 8 ).

A Figura 8 faixa do Microsoft Word (parte do Office Fluent da interface do usuário)

Como a última na linha de esquemas de interface do usuário do Office, a faixa de opções tende a ser as por muitos desenvolvedores. O problema é que a Faixa de Opções parece ampliar o design de navegação inválido. Se você mal executar menus padrão, as guias e outros controles, você pode obter imediatamente com design de navegação incorreto, mas se você estragar até a faixa de opções, você quebrar a metáfora.

As guias devem ser baseadas em usuário metas e tarefas. Assim, há uma guia para inserir elementos, uma guia para layout de página, uma guia para revisar um documento. Em seguida, em guias, há grupos (como área de transferência e fonte na Figura 8 ), que são novamente usuário concentra-se e agrupados com base em tarefas relacionadas e ações de comando. A Faixa de Opções usa botões de vários tamanhos baseados em dados de uso (o ícone colar grande versus menor recortar e colar) para ajudar as pessoas mais facilmente descubram e usar as funções mais comuns.

Em resumo, muito esforço é necessário para criar elementos de estilo da Faixa de Opções eficazes. Portanto, não adapte-cegamente para seu aplicativo como um mecanismo de navegação.

Portanto, antes de você imitar outros aplicativos, você precisa decidir se o seu design faz sentido na sua situação. Você tem a mesma escala? (Amazon.com e Netflix use recomendações fundamentadas em muitos dados de usuário, que leva um pouco boa de escala para obter à direita.) Escritório tem toneladas de comandos que se beneficiar da organização em múltiplas camadas da faixa de opções, mas se você tiver apenas alguns comandos, um menu típico é provavelmente a melhor.

Você tem o mesmo tipo de conteúdo? O que funciona para um site de comércio eletrônico como Amazon não pode ser a escolha certa para um site informativo no ambiente. O que funciona para um site informativo pode não funcionar para um aplicativo. Conforme discutido Charlie, quando as pessoas estão tentando concluir uma tarefa, o modelo de navegação informal comum na Web provavelmente haverá apropriado — você deseja ajudar pessoas atingirem suas metas, não distraem ou levá-los para baixo coelho buracos.

Portanto, onde é que deixar você? Não despair! Mesmo se você não tiver especialistas UX consultar, existem técnicas que você pode empregar para ajudar a tornar sua navegação melhor. Uma técnica é chamada de classificação do cartão.

Classificar do cartão

Classificação do cartão é uma maneira para obter pessoas, preferência de seu público-alvo, para participar de ajudá-lo a organizar seu conteúdo ( Figura 9 mostra um exemplo). Ele leva algumas semelhanças para outras técnicas de envolvimento do interessado, como cartões de class-responsabilidade-colaboração (CRC) (um design orientado a objeto, ou OOD, técnica), textos de usuário e assim por diante, que ele utiliza os interessados a ativamente participar o projeto da solução (e usa cartões). Normalmente, ele é usado para organizar informações em sites da Web, mas as técnicas podem ser usadas para ajudar a organizar comandos em um aplicativo.

A Figura 9 exemplo de cartão de classificação de usability.gov/ design/cardsort.html

Ele é uma abordagem centralizada de usuário em vez de centralizado solução (ou domínio-centralizado) e, portanto, ajuda a descobrir o design que faz sentido para alguém que realmente irá interagir com a solução. Entrarei em profundidade na técnica real. É suficiente dizer que ela envolve os usuários a categorizar o material para você. Há muitos recursos livremente disponíveis online (comousability.gov/design/cardsort.HTML), e na verdade, há um número de pacotes de software para ajudá-lo, como OptimalSort. Mas antes de usar o software, considere a abordagem de cartão de índice. Especialistas em concordam que Obtendo pessoal real juntos pessoalmente e uso de cartões reais geralmente produzirá bons resultados.

Padrões de design UX

Provavelmente um dos melhores recursos no projeto UX é padrões. Não é nenhuma surpresa que há muitos padrões de design de navegação, variando de breadcrumb, que ajuda os usuários a orientá-los, a navegação Faceted, que usa facetas (metadados) sobre os resultados de pesquisa para filtrá-los, ativamente para painel de janela restrita, que examina para a caixa de diálogo modal familiar, e muitas coisas entre. Como exemplo, a Figura 10 ilustra uma amostra do padrão de pontos de entrada não criptografado.

Limpar pontos de entrada

Pode não ser óbvio que as pessoas podem ou devem fazer quando iniciar um aplicativo ou visitar um site. Você precisa fornecer um conjunto de pontos de entrada não criptografado de pessoas no aplicativo ou site com base em suas tarefas ou destinos mais comuns.

A Figura 10 exemplo primário de pontos de entrada de limpar

Sem pontos de entrada não criptografado, novos ou esporádicos usuários podem se sentir perdidos imediatamente na abertura de um aplicativo ou site. Ao orientar as pessoas com pontos de entrada não criptografado, você tirar a carga para descobrir o que eles podem ou devem off deles.

Esse padrão funcionará somente se você tiver ou pode descobrir um conjunto de tarefas ou destinos de um segmento grande de seu público-alvo mais comuns. Se não é possível fazer isso, o padrão, na verdade, causa mais problemas porque ele obtém da forma e, na verdade, não guia pessoas para que eles deseja fazer.

É importante que a maioria dos seus usuários ser novos ou esporádicos usuários porque, a menos que as tarefas em questão seja a tarefas somente relevantes, usuários regulares pode localizar que limpar pontos de entrada obter da forma.

Não ser enganado em pensar que fica óbvio o que as pessoas devem fazer. Várias home pages são um smorgasbord de tudo que da organização por trás dela tem a oferecer e as pessoas são esquerda confuso e não saber o que fazer ou onde ir. Pontos de entrada não criptografado eliminam a confusão.

Implementação

O truque para o padrão de pontos de entrada não criptografado é identificar com êxito as principais tarefas ou os destinos. Se você empregado design centralizada de usuário, você deve já identificou como as tarefas que abordar os principais objetivos para os usuários. Use essas informações para criar os pontos de entrada não criptografado.

Se você não seguir design centralizada de usuário, você precisará fazer algumas pesquisas, provavelmente internamente e externamente, para determinar tarefas principais e destinos dos usuários. Se seu aplicativo ou site é já existir, examinar os logs de uso é uma grande ajuda. Você pode separar também geralmente principais tarefas mesmo de especificações funcionais, mas você deve tentar validar os com usuários ou em menos participantes de negócios para garantir que as tarefas que você está selecionando estejam de acordo com as metas principais que serve o aplicativo ou site.

Depois que você depois de configurar suas tarefas principais, você deve considerar como eles precisam ser apresentado. Se você tiver mais de poucas, você deve pensar como você pode agrupá-los visualmente, mas lembre-se, isso não deve ser uma réplica da sua navegação principal — ele realmente deve representar tarefas essenciais.

Exibir as tarefas muito bem e centralmente na exibição inicial do seu aplicativo ou site. Certifique-se de que a frase-los em termos de tarefas o usuário está tentando concluir, em vez usando marca terminologia como nomes de ferramenta ou outra terminologia que os usuários não estiverem familiarizados com. Se você consegue comunicar-se a tarefa em poucas palavras, que é ideal, mas você provavelmente deve complementar nomes com descrições útil que o tornam abundantly desmarque o que as pessoas podem realizar, escolhendo essa tarefa ou de destino.

Verifique se que você não estiver criando portas de ajuste de registro por meio do qual os usuários são ignorados, de repente, no meio de sua estrutura de solução. O destino atingirem, escolhendo a tarefa deve estar conectado com clareza para a tarefa; isso é um bom começo para um assistente, mas não precisa ser baseada em assistente — apenas fazer uma conexão segura entre a tarefa selecionada e os usuários de modo de exibição chegar, selecionando a tarefa.

Se não houver subtarefas que as pessoas podem saltar diretamente no, você pode considerar com aqueles ser reveladas quando a tarefa principal é selecionada. Mas lembre-se, isso não deve ser um menu normal ou esquema de navegação.

É recomendável visualmente Enfatize as tarefas mais comuns sobre as menos comuns, desenho automaticamente os usuários a elas. Esta exibição do ponto de entrada principal não deve ficar entre a estrutura de navegação normal ou ferramentas auxiliares/informações. Oculte os ausente para manter o foco em pontos de entrada.

Se você pensar a respeito, verá que controles são normalmente apenas implementações dos padrões, formalizas em código reutilizável. Se você já tentou fazer qualquer desenvolvimento do Silverlight, especialmente o Silverlight 1.0 (ou heavy-duty desenvolvimento da interface do usuário da área de trabalho), provavelmente você chegar em um maior reconhecimento do que fazer controles para você. Ter que desenhar manualmente e manipular mesmo as interações básicas de uma caixa de texto é fácil não exatamente.

Além disso, controles, especialmente os controles de plataforma, como aquelas em que a especificação HTML, criar implícitas convenções de padrão de interface do usuário padrão. Há várias outras opções para seleção múltipla, mas o controle HTML SELECT tornou o controle de fato para a tarefa na Web. Com plataformas de aplicativo (RIA) Internet sofisticadas, as opções são maiores, mas sem dúvida que os controles fornecidas na caixa serão eventualmente formar convenções (que será, obviamente, influenciadas pelo uso do controle de plataforma anterior). Há muitos padrões mais complexos e úteis com freqüência que você pode implementar com controles personalizados, ou você pode tirar proveito dos controles de um dos fornecedores de terceiros, como Infragistics.

Para navegação, obviamente, o controle mais comum é o hiperlink, que como pontos de Charlie, precisa para ser usado sabiamente e até mesmo com moderação em aplicativos orientados a tarefas. Há controles guia que facilitam o agrupamento de itens semelhantes, a navegação entre os grupos e uma maneira implícita de indicar qual coisas que um usuário está olhando (por meio da guia selecionada no momento). Há controles de menu fly-out na Web e plataformas da área de trabalho: se você usar esses, tenha cuidado para não mais de três níveis de profundidade (de preferência dois), fornecer porque é preciso um pouco boa de agilidade de mouse usá-los (como quando o usuário tentar desperately mover rapidamente para os lados um menu para o outro), que provavelmente trata como uma surpresa techies que moram e respirar menus. Há marca controles de nuvem que facilitam a implementação desse padrão, controles de paginação que o ajudam com esse padrão, controles de diálogo para ajudá-as e assim por diante.

Tagging e nuvens marca são excelentes maneiras de criar uma organização flexível para ajudar pessoas a localizar o que estão procurando. Eles podem complementam um esquema organizacional mais formal, como menus. a Figura 11 mostra um exemplo.

A Figura 11 nuvem de marcas de Flickr

Lembre-se apenas — reflexão sobre o controle (padrão) que você escolher. Não apenas usá-lo porque é a maneira mais fácil ou porque você está mais familiarizado com ele. Consulte um catálogo padrão para obter uma melhor compreensão sobre quando usar os padrões e você pode também usar os padrões para orientar sua escolha de qual implementação (se houver algum) para selecionar.

Teste, controle e ajuste

Não importa o esquema de navegação e organizacional você criar, ele será errado — menos em parte. Mesmo se estiver certo por enquanto, é provável que suas necessidades mudarão longo do tempo. Portanto, você precisa investir em fazer um design de navegação escalonável, como disse Charlie, bem como um flexível.

Você não deseja regularmente fazer alterações substanciais estruturas de navegação, mas você deve ajustá-los com base em dados de uso real e testes de usabilidade. Testes de uso é uma boa opção porque você pode rastrear problemas antes de liberar o aplicativo; apenas certifique-se de deixar espaço no plano de projeto para fazê-lo e fazer alterações com base nos resultados.

Se você tiver dados de uso (como como de logs da Web ou o uso de recursos de controle), usá-lo para ajudar a compreender como pessoas estiverem usando o design existente e fazer alterações de acordo. Os logs de pesquisa são especialmente informativos porque eles podem indicar pontos fracos do seu esquema de navegação em caso de usuários para procurar a navegação. Se você não estiver usando o controle com base na Web, considere a criação uma infra-estrutura controle de uso para que você tenha dados para backup e informar modificações futuras.

Criar boa navegação pode parecer um pouco difícil quando você tem muito mais se preocupar como um desenvolvedor. Se você não tiver especialistas à sua disposição, você pode tirar assuntos em seus próprio mãos seguir algumas sugestões que já descrito aqui.

Navegação é extremamente importante; vale o tempo e recursos que você irá investir. Você pode fazer isso incrementalmente com a ajuda de padrões, e você pode usar primers ótimas e fácil de leitura como do Steve Krug não tornar me Think e do Peter Morville Findability ambiental, entre outros. As pessoas que precise usar o software será happier para ele.

Dr. Charles Kreitzberg é PRESIDENTE do Cognetics Corporation (www.cognetics.com), que oferece a facilidade de uso de consultoria e usuário experiência de serviços de design. A paixão está criando interfaces intuitivas que envolva e delight usuários ao suporte metas de negócios do produto. Charles reside no Central Nova Jersey onde ele moonlights como um músico de desempenho.

Ambrose pequeno mora com sua esposa e quatro filhos no central Nova Jersey. Ele foi criando e desenvolvendo software para mais de 10 anos e é liquidados ser um palestrante da INETA e MVP da Microsoft. Recentemente, ele é deslocado do design técnica para criação para as pessoas e agora é um designer de experiência do usuário para Infragistics.