Vamos continuar nossa jornada destas heurísticas de design.

Antes de fazer, eu gostaria de lembrá-lo que muitas das interfaces

que nós vamos olhar poderiam caber em vários diferentes heurísticas,

e o mais importante é identificar o problema:

Se você identifica e corrigir o problema, o rótulo é de importância secundária.

Nossa próxima heurística é o "reconhecimento sobre recall."

Crie interfaces que fazem objetos, ações, opções e direções visíveis ou facilmente recuperáveis.

E um dos meus exemplos favoritos isso [que] é qualquer hora que você vê uma nota de Post-It,

Isso provavelmente significa que a informação relevante não está pronta à mão como deveria ser.

Aqui está uma foto que tirei de uma das nossas reuniões de almoço.

E aqui você pode ver que temos shwarma e falafel.

Que cada um tem um número sobre eles.

E nós temos um código que é usado para distinguir qual número, qual tipo de sanduíche.

E, claro, a razão para isto é que alguém gasta todo seu tempo fazendo estes deliciosos,

e não ter tempo para gravar o rótulo inteiro nele.

Por isso é compreensível e corrigível.

Mas, de uma perspectiva de design de interface, é mais rápido encontrar o shwarma de frango

se ele foi escrito diretamente por lá, ao contrário de no código.

Aqui está uma foto de tela de um site de compra, e o que você pode ver

é o que lhe dá algumas opções como comprar bilhetes para hoje ou para um dia futuro.

Há um par de problemas de uma perspectiva heurística com esta tela.

Para começar, e nós vamos chegar a isso em um pouco — o layout é tipo de todo o lugar.

Mas também o que nós vamos olhar aqui é o fato de que temos esta tela intermediária

que eu acho que poderia ser feito fora com design inteligente.

Por exemplo, trá-lo para uma página

que oferece os tempos de show para hoje e oferece-lhe uma caixa de diálogo para passar o dia.

E assim, ao estabelecer padrões razoáveis, você pode evitar obstáculos extras.

Além de líderes com padrões razoáveis, pode ser valioso para proporcionar visualizações.

Esta é uma captura de tela de uma ferramenta de design de web onde há muitos modelos disponíveis.

No entanto, todos os modelos são mostrados na listagem textural, que não é adequada para a tarefa.

Você tem que pensar se isso é o que você quer, e isso é uma coisa difícil de fazer de forma confiável.

Por outro lado, esta é uma ferramenta de design de web diferentes que oferece pré-visualizações de todos os modelos disponíveis,

e é muito mais fácil de ver se esse é o projeto que você gostaria.

Em seguida, flexibilidade e eficiência.

Um exemplo simples e direto de frente deste

é fornecer atalhos de teclado do acelerador e coisas semelhantes como esse para especialistas.

Este é o menu de exibição do navegador web Firefox.

E isso é um grande exemplo de oferecer a flexibilidade e o apoio de peritos de duas maneiras.

Em primeiro lugar, podemos ver que há atalhos de teclado disponíveis.

E em segundo lugar, o menu Exibir código-fonte permite recuperar a página fonte de qualquer página que você está olhando,

para que você possa olhar sob o capô, não é algo que a maioria das pessoas quer fazer; valioso para especialistas.

Esta é a pesquisa de hotel Expedia,

e ele faz um trabalho muito bom de fazer com que os casos comuns muito fácil chegar.

Cidades populares são mostradas com um botão de rádio.

Mas também, se você gostaria de ir a uma cidade menos popular,

há um campo de entrada grátis que você pode digitar qualquer coisa que você quer.

E por isso este é um bom exemplo de padrões com opções.

Interfaces flexíveis podem também primeiro plano e empurrar as informações ambientes relevantes.

Esta é uma captura de tela de BusyCal,

que permitirá que você ver a previsão do tempo na sua exibição semanal de seu calendário.

Aqui está outro exemplo de produtividade na interface do usuário: Este é o Gmail do Google,

que, se você clicar em Spam um beneficiário que sabe como cancelar a assinatura você partir,

oferecerá a oportunidade de você desinscrever diretamente esse e-mail também.

E eu acho que este é um exemplo de como, se você estiver indo para ser proativo em uma interface,

você precisa fazê-lo bem e oferecer um benefício claro, imediato, relevante para a tarefa.

As pessoas geralmente não gostam de interfaces pró-ativa que distraem, interrompem, interromper o fluxo ou fornecem informações irrelevantes.

Outro bom exemplo de apoio para uso mais rico é para oferecer recomendações sobre uma determinada página.

E assim, aqui você pode ver se você gosta desta uma bebida aqui, [há] outras bebidas que você pode gostar.

E, novamente, se você estiver indo para oferecer recomendações, ou outros tipos de proatividade, mantê-la relevante.

Este é um exemplo da Amazônia, de discussão para um para produtos

que são quase inteiramente alheios ao produto que está sendo mostrado.

E é só distrai do principal objetivo do usuário — na maior parte eles estão se perguntando

"Por que na terra estas coisas acabam no fundo de alguma página Web completamente alheios?"

E, finalmente, [embora] flexibilidade pode ser incrivelmente valiosa, é possível ir ao mar.

Esta é uma foto de Bill Moggridge que mostra uma entrevista com um usuário

que tinha cortado o seu telecomando para limitá-lo apenas a funcionalidade relevante que eles precisavam.

E assim, flexibilidade às vezes pode ser a tensão com o minimalismo.

Nossa heurística oitava é "design minimalista e estética."

Quando as pessoas exibir sua página da Web, por exemplo, eles estão vendo isso em uma tela,

e assim eles vêem não a página inteira, mas vale a pena uma tela em um determinado momento.

O que eles vêem é o que é chamado "acima da dobra" — vem de jornais.

Aqui está um exemplo de uma tela onde as informações relevantes —

Qual é a previsão do tempo — não é ainda visível em qualquer lugar acima da dobra.

Tudo acima da dobra é todo o cromo e o material extra,

mas as informações essenciais que você tem que rolar para baixo para.

E na medida em que você está tentando otimizar a experiência do usuário,

é melhor ter a informação do núcleo acima da dobra.

Como vamos falar sobre design visual, se você vai usar a cor e outras sugestões,

tê-los a dizer algo e fazer tão criteriosamente.

Aqui está um exemplo de uma página que está usando lotes de diferentes cores, confira

e tem uma cacofonia real em termos de sua organização hierárquica na tela, para nenhuma finalidade aparente.

E aqui está uma tela do sistema de ajuda do Google.

Google é muitas vezes considerado como um exemplo de design minimalista, e muitas vezes fazem isso muito bem.

Eu queria mostrar um exemplo onde, penso eu, mais algumas informações poderiam ser retiradas,

ou melhor algum ruído mais poderia ser retirado.

E o que eu estou olhando em especial essas coisas aqui,

onde todas as bordas da tabela e outras coisas são o que você mais vê,

Considerando que o que você realmente mais se preocupa com os dados da pesquisa,

e, portanto, se você se livrar de todas as linhas de extras e gráfico de lixo,

pode ser mais clara para ver as peças que lhe preocupava mais.

Aqui está um log na tela que eu acho que faz um bom trabalho de manter o endereço de e-mail apenas em um só lugar

porque é top aqui em cima, e então você começa a dizer

Se você é um cliente de retorno ou um novo cliente.

Se você é um cliente de retorno você digitar sua senha; ou se você é um cliente novo,

como a tela mostra aqui, você cria uma nova senha e digite-lo em e vá de lá.

Por outro lado, este site de pesquisa de voo tem as mesmas informações exatas —

número de paragens — em dois distintos lugares.

E é possível que este maior clareza.

No entanto, há um custo de complexidade, e também há um custo de imóveis de tela vertical,

se alistando a mesma coisa duas vezes, você está empurrando outras coisas para baixo.

Muitas vezes por serem dinâmicas sobre o que você mostra ou descobrir como mostrar as coisas de uma só vez,

Você pode ter todas as informações relevantes que caber mais claramente e de forma menos confuso na tela.

Um dos conceitos mais fácil para fazer uma equipe de projeto é que as pessoas que usam seu site vão cuidar como profundamente

e vai querer gastar tanto tempo usando o site como você passou o estaleiro.

E por isso pode ser fácil ter fluência característica e um monte de sinos e assobios e acessórios.

Mas isso não é necessariamente o que as pessoas querem.

Aqui está um exemplo de um site de empréstimo do estudante que lhe oferece a capacidade de adicionar widgets à sua tela inicial.

Agora, este é o tipo de site que você se logar para provavelmente algumas vezes por ano? [rir]

Não é provável que seja um site que você vai querer festão com todos os tipos de gadgets.

Próximo vamos falar sobre ajudando os usuários a reconhecer, diagnosticar e recuperar de erros.

Um dos primeiros passos de fazer isso é fazer com que o problema claro.

Aqui é um site de reservas do hotel onde tudo o que ele diz é: "erro. mês. para trás."

É difícil saber o que fazer.

Aqui está um que é um pouco melhor: é um site de inscrição para um evento.

E o que vemos aqui é que ele diz que você deve preencher todos os campos necessários.

Tudo bem, que é um pouco melhor. Mas quais campos não preencher?

Esta página é telas e telas longas; Há muitas e muitas coisas que precisam ser verificadas.

Que as inumeráveis coisas nesta página esquecer de verificar?

Talvez você poderia me mostrar apenas uma página que tem uma ou duas coisas esquecidas

em vez de toda a pilha de coisas e me forçar a percorrê-lo novamente.

Aqui está uma caixa de diálogo que mostra o erro e explica-o claramente,

mas ele não oferece muito em termos de resolução do problema.

Ele diz que não há espaço suficiente no iPod. Muito ruim.

Seria uma solução mais eficaz para oferecer alguma vista para o que está ocupando todo o espaço,

ou oferecer razoáveis maneiras de limitar a quantidade de mídia

que você está tentando colocar no dispositivo para que tudo possa caber.

E neste caso específico, as versões mais recentes deste aplicativo lidar com este problema melhor.

Um erro comum em mensagens de erro de escrita é oferecer uma caixa de diálogo de todas as possibilidades.

Aqui está uma foto de tela de tentar abrir um arquivo onde ele não sabe o tipo de arquivo.

E ele diz, "o aplicativo que você escolheu ('(null)'), pode não encontrado.

Verifique o nome do arquivo ou escolher outro aplicativo."

Bem isto seria muito melhor se nós estivesse falando a linguagem do usuário:

"Null" pode não ser a melhor escolha.

E também se nós ofereceu uma aplicação razoável para esse tipo de arquivo.

Um monte de tarefas comuns na web são tarefas baseadas em pesquisa.

Então aqui está um screenshot da procura de um voo,

onde a restrição especificada não rendeu nenhuma solução possível.

Para tarefas de pesquisa. se um usuário especifica um razoável conjunto de restrições,

uma das coisas mais poderosas que você pode fazer como um designer

é oferecer um relaxamento dessas restrições que isso torna mais viável.

Há muitos anos, trabalhei com Chuck Rich Mitsubishi Research, em Boston.

E ele estava trabalhando em um sistema de pesquisa chamado colágeno

que iria encontrar maneiras de relaxar inteligentemente essas restrições —

entre outras coisas — para ajudar os usuários a fazer o seu melhor trabalho.

E esse tipo de relaxamento inteligente pode ser uma técnica muito poderosa.

Eu queria acabar falando sobre erros em uma boa nota.

Aqui está uma caixa de diálogo do navegador web que permite que você saiba

Se você vai para uma URL que ele acredita para ser suspeito,

Ele permitirá que você saiba que você provavelmente não quer ser aqui,

e oferece a você sair daqui e explicar mais sobre por que esta página Web foi bloqueada.

Há provavelmente futuras inovações mais que podem acontecer neste tipo de trabalho de erro.

Mas eu acho que este é um começo muito bom danado e muito melhor do que a forma como as coisas costumava ser.

E isso nos leva à nossa última heurística, que é a melhor ajuda e documentação.

Pode ser fácil pensar ajuda como problema e não faz parte do aplicativo real de outra pessoa.

Felizmente, eu acho que na web, ajudar e documentos têm se tornam mais integrados.

Um dos meus exemplos favoritos para isso é aprender programação sistemas onde sites como PHP, .NET

pode ajudá-lo a aprender programação de sistemas, fornecendo exemplos.

Aqui está outra estratégia orientada para o exemplo do site da UPS.

Oferece-lhe a oportunidade de assinar uma série de listas de discussão.

E se você quer saber o que cada uma dessas listas pode dar-lhe,

em outra tela eu tenho lote-los juntos aqui.

Ele irá mostrar-lhe exemplos de cada uma dessas listas de discussão do conteúdo que são susceptíveis de receber.

Que é um tipo realmente poderoso estratégia de visualização.

E aqui está um exemplo de uma caixa de diálogo de impressão para lhe dizer qual é o problema,

mas não ajudá-lo a encontrar a solução.

Para começar, acho que alguém quer saber, é o material que está fora das margens relevante?

É apenas formalmente fora das margens, mas nada está realmente ficando cortado?

ou há importantes partes do documento que eu me importo com o que estão sendo cortados da página?

E, o que você acha que o caminho mais razoável é para resolver este problema?

Devo mudar o tamanho da página, ou orientação, ou mover o cabeçalho e o rodapé? Me ajude a resolvê-lo!

Aqui está uma caixa de diálogo para o recurso de mesclagem de foto do Adobe Photoshop Elements,

que é um recurso muito legal se você configurá-lo direito.

No entanto, você precisará especificar várias fotos como entrada o bin do projeto.

E isso é algo que a caixa de diálogo realmente poderia fazer um trabalho melhor de conduz você através de.

Ele poderia dizer deixe-me mostrar-lhe e ele poderia destacar o bin do projeto sobre a tela ou algo parecido.

Aqui estão dois screenshots do eBay.

À esquerda, temos uma abordagem interessante, onde o eBay construiu seu próprio sistema interno de mensagens.

E se, por uma questão de argumento, decidimos que são a coisa certa a fazer,

e que as mensagens internas são melhor que responder diretamente ao email —

Não tenho certeza sobre isso, mas nós iremos com ele para agora —

eles fizeram uma coisa inteligente, que é, quando você responde, diz que o endereço de email de resposta,

"Ei, use o botão amarelo," e no meio de responder a ele, você pode ver, "Oops, enganei-me.

É isso mesmo... Eu preciso usar o sistema de mensagens interno".

É um hack interessante.

E aqui está outra imagem do eBay, do lado direito,

onde quando é introduzida nova funcionalidade —

por exemplo, a capacidade de comparar várias opções em seu cartão-

Ele pode chamar que dentro da interface do usuário.

E eu acho que a habilidade de combinar ajuda diretamente na interface do usuário

é um dos avanços mais interessantes nesta área.

E é algo que foi menos comum em aplicativos de área de trabalho anteriores.

E aqui está um exemplo que eu acho que é interessante.

Esta é a caixa de diálogo de cancelamento para uma lista de discussão,

e se você clicar em "Recebo muitos e-mails"

ele diz que "Espera, você pode alterar a frequência"

e você tem a oportunidade de receber e-mails da lista de discussão em intervalos menos freqüentes.

Eu acho que este é um realmente uma boa solução,

porque às vezes você deseja receber alguns e-mail, mas não muito.

Em outros casos, talvez você vai ver isso como assédio

e você vai desejar que você só poderia ser feito com essa tarefa rapidamente,

mas em qualquer caso, eu pensei que era uma solução interessante e criativa.

Eu acho que é realmente importante que ajuda a ser sincero,

e há uma classe de ajuda e informações adicionais

que eu acho que pelo menos em vigor, não está, fornecendo aos usuários as informações que eles precisam,

e que é de EULA, ou acordos de licenciamento de usuário final.

Aqui estão dois exemplos de telas de EULA, onde é muito fácil de clicar sem nunca Leia o EULA.

E meu palpite é que quase todos os usuários clicar sem ler o EULA.

Se ninguém precisa saber os termos do acordo de licença, que é muito razoável,

mas meu palpite é que é a razão pela qual que essas coisas existem

porque eles têm conseqüência de alguma sorte, que o usuário provavelmente deve se informada.

E então, se você estiver criando um site que tem termos para os usuários,

pensar sobre "Existe uma maneira que você pelo menos pode resumir o que são as coisas principais, alguém é concordar com"

sem tê-los clicar ou ter nunca mesmo ou leu uma lambida de acordo em tudo.

E para fechar com uma nota positiva, uma coisa agradável

que você pode fazer com a ajuda de um site é ajudar as pessoas a se divertir.

Preenchimento de formulários pode ser realmente chato,

e aqui está um exemplo de um site de hotel, onde uma das opções tem uma piadinha no interior,

e tão pouco de leveza pode ajudar a aumentar a experiência do usuário.