-
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.
