Marco Gomes sobre User Experience

DESIGN DE INTERFACE@marcogomes, boo-box, 2009

quinta-feira, 11 de junho de 2009

A MANEIRA QUE VOCÊ EXECUTA TAREFAS COM UM PRODUTO - O QUE VOCÊ FAZ E COMO ELE RESPONDE -

ISSO É A INTERFACE.Jeff Raskin, 2000

quinta-feira, 11 de junho de 2009

DESIGN ANTES DA PROGRAMAÇÃO

quinta-feira, 11 de junho de 2009

Design antes da programaçãoFront-end antes do backend

A PARTIR DO MOMENTO QUE O OBJETIVO DO PRODUTO É

CONHECIDO, PROJETE A INTERFACE PRIMEIRO; DEPOIS PROGRAME DE

ACORDO COM A INTERFACEJeff Raskin, 2000

quinta-feira, 11 de junho de 2009

Design da interface

Idéia Programação

Teste

Tempo

Entrega

Teste Teste

quinta-feira, 11 de junho de 2009

GUIA GETTING REAL37signals

quinta-feira, 11 de junho de 2009

DESIGN DE EPICENTROComece do núcleo da página e construa pra fora

quinta-feira, 11 de junho de 2009

no começo, você ignora as extremidades: a navegação/menus, rodapé, cores, barra lateral, logotipo, etc. Em vez disso, você começa o epicentro e faz o design das peças de conteúdo mais importantes primeiro.

SOLUÇÃO DE TRÊS ESTADOSFaça design para os estados regular, branco e erro.

quinta-feira, 11 de junho de 2009

Regular: A tela que as pessoas vêem quando tudo está funcionando bem e sua aplicação é preenchida com dados.Branco/Vazio: A tela que as pessoas vêem quando estão usando a aplicação pela primeira vez, antes de dados serem inseridos.Erro: A tela que as pessoas vêem quando alguma coisa dá errado.

A TELA EM BRANCOSupere as expectativas com uma primeira experiência convincente

quinta-feira, 11 de junho de 2009

o estado natural da aplicação é vazia de dados. Quando alguém se cadastra, eles começam com uma tela em branco. Muito parecido com um weblog, cabe a eles popularem — o visual geral não toma forma até as pessoas colocarem seus dados: publicações, links, comentários, horas, informação de barra lateral ou o que for.

http://www.usabilitypost.com/2008/08/04/context-over-consistency/

O que faz sentido aqui, pode não fazer sentido ali

CONTEXTO SOBRE

CONSISTÊNCIA

quinta-feira, 11 de junho de 2009

contexto é mais importante que consistência. Tudo bem ser inconsistente se o seu design faz mais sentido dessa maneira. Forneça às pessoas apenas o que importa. Ofereça a eles o que eles precisam e livre-se de tudo o que não for necessário. É melhor ser correto do que ser consistente.

REDAÇÃO É DESIGN DE INTERFACECada palavra importa.

quinta-feira, 11 de junho de 2009

Você etiqueta um botão como Submeter ou Salver ou Atualizar ou Novo ou Criar? Isso é redação. Você escreve três sentenças ou cinco? Explica com exemplos gerais ou com detalhes? Etiqueta seu conteúdo como Novo ou Atualizado ou Atualizado Recentemente ou Modificado? Será Existem novas mensagens: 5 ou Existem 5 novas mensagens ou é 5 ou cinco ou mensagens ou publicações? Tudo isso importa.

UMA INTERFACEIncorpore funções administrativas em interfaces públicas

quinta-feira, 11 de junho de 2009

Para evitar a síndrome da tela-administrativa-lixo, não construa telas separadas para lidar com funções administrativas. Em vez disso, construa essas funções (isto é, editar, adicionar, deletar) na interface regular da aplicação.

MISSÃO: ACERTAR A HORA

quinta-feira, 11 de junho de 2009

MISSÃO: ACERTAR A HORA

quinta-feira, 11 de junho de 2009

MANTENHA O SIMPLES SIMPLES

quinta-feira, 11 de junho de 2009

Acertar a hora em um Relógio DigitalVCR (Video Cassete)

MISSÃO: ACERTAR A HORA

quinta-feira, 11 de junho de 2009

MISSÃO: ACERTAR A HORA

quinta-feira, 11 de junho de 2009

19:42

+ hora

- hora

+ minuto

- minuto

MISSÃO: ACERTAR A HORA

quinta-feira, 11 de junho de 2009

DIVIDINDO INFORMAÇÃO NO TEMPO E NO ESPAÇO

http://marcogomes.com/blog/2008/organizando-informacao-no-tempo-e-no-espacoquinta-feira, 11 de junho de 2009

No tempo, para ações não repetitivasNo espaço, para ações repetitivas

TEMPOBom para ações não repetitivas e onde o usuário se sente inseguro, como rotinas de cadastro e configuração. Não exige treinamento.

quinta-feira, 11 de junho de 2009

ESPAÇOBom para ações de rotina, como inserção e edição de dados. Pode exigir algum

treinamento nos primeiros usos (curva de aprendizado).

quinta-feira, 11 de junho de 2009

LEI DE FITTS

http://marcogomes.com/blog/2008/organizando-informacao-no-tempo-e-no-espacoquinta-feira, 11 de junho de 2009

Uma das regras mais importantes no desenvolvimento de interfaces

http://particletree.com/features/visualizing-fittss-law/

MT = a + b log2(2A/W)

quinta-feira, 11 de junho de 2009

MT = time to complete the movementa,b = relativos ao tempo de movimento e velocidade do dispositivoA = distance of movement from start to target centerW = width of the target along the axis of movement

http://particletree.com/features/visualizing-fittss-law/

WTF?MT = a + b log2(2A/W)

quinta-feira, 11 de junho de 2009

MT = time to complete the movementa,b = relativos ao tempo de movimento e velocidade do dispositivoA = distance of movement from start to target centerW = width of the target along the axis of movement

A DIFICULDADE PARA ATINGIR UM ALVO É UMA FUNÇÃO DA DISTÂNCIA

DO ALVO E DE SEU TAMANHOPaul Fitts, 1954

quinta-feira, 11 de junho de 2009

Facilidade para acertar

quinta-feira, 11 de junho de 2009

quanto maior o alvo, mais fácil acertar (grande coisa)

http://particletree.com/features/visualizing-fittss-law/quinta-feira, 11 de junho de 2009

a posição do cursor influencia

http://particletree.com/features/visualizing-fittss-law/quinta-feira, 11 de junho de 2009

a área de acerto também influencia, os dois últimos elementos têm áreas semelhantes, é mais fácil acertar o último. aumentar um pouco itens pequenos melhora exponencialmente a facilidade de acerto

http://particletree.com/features/visualizing-fittss-law/quinta-feira, 11 de junho de 2009

a fase de desaceleração é importante

http://particletree.com/features/visualizing-fittss-law/quinta-feira, 11 de junho de 2009

as margens da tela são os alvos mais fáceis, tem largura ou altura infinitas por não haver necessidade de desaceleração

http://blogs.msdn.com/jensenh/archive/2006/08/22/711808.aspx

Erraram por um pixel, corrigido no Windows XP

WINDOWS 98

quinta-feira, 11 de junho de 2009

No topo das telas de Mac OS X e Gnome

MENUS FÁCEIS DE ACERTAR

quinta-feira, 11 de junho de 2009

MENSAGENS AO USUÁRIO

http://marcogomes.com/blog/2008/organizando-informacao-no-tempo-e-no-espacoquinta-feira, 11 de junho de 2009

MINHA INTERAÇÃO É INÚTILEu não posso fazer nada além de clicar no “OK”,

a mensagem bloqueia o uso do navegador.

quinta-feira, 11 de junho de 2009

MENSAGEM HUMANANão exige uma interação inútil, some com o mover do mouse e

não bloqueia o uso do navegador

quinta-feira, 11 de junho de 2009

MENSAGEM INTEGRADANão exige uma interação inútil, aparece integrada ao conteúdo e

não bloqueia o uso do navegador

quinta-feira, 11 de junho de 2009

USE VERBOS COMO AÇÕES DE BOTÕES

versus

quinta-feira, 11 de junho de 2009

mesmo que o usuário não leia o que diz a caixa de mensagem, vai ler o que está escrito no botão.

LEI DE HICK

http://en.wikipedia.org/wiki/Hick's_lawquinta-feira, 11 de junho de 2009

Tempo para achar um item numa lista (menu)Menu com poucos itens, perde-se muitoMenu com muitos itens, perde-se pouco

O TEMPO NECESSÁRIO PARA ESCOLHER UM ITEM EM UMA LISTA (COMO UM MENU)

AUMENTA EXPONENCIALMENTE COM O NÚMERO DE ITENS QUE PODEM SER

ESCOLHIDOS

T = blog2(n + 1)

quinta-feira, 11 de junho de 2009

AO ADICIONAR UM ITEM EM UM MENU COM POUCOS ITENS VOCÊ

ESTÁ DIFICULTANDO, EXPONENCIALMENTE, A ESCOLHA

DOS USUÁRIOS.

quinta-feira, 11 de junho de 2009

DUAS LEIS DO DESIGN DE INTERFACE

1. Um computador não deve danificar seu trabalho ou, por inação, deixar que seu trabalho sofra danos.

2. Um computador não deve perder seu tempo ou exigir que você faça mais trabalho do que o estritamente necessário.

Jef Raskin, The Humane Interface, 2000quinta-feira, 11 de junho de 2009

REFERÊNCIA

• http://marcogomes.com/blog/2007/interfaces-humanas-modais-e-quasimodais-jef-raskin

• http://migre.me/20Ys

• http://www.mezzoblue.com/archives/2004/08/19/fitts_law/

• http://www.asktog.com/columns/022DesignedToGiveFitts.html

• http://en.wikipedia.org/wiki/Fitts's_law

• http://www.mindhacks.com/blog/2005/01/size_and_selection_t.html

• http://www.usabilitypost.com/2008/08/30/usability-tip-use-verbs-as-labels-on-buttons/

• http://www.mikewhobikes.com/hey-whats-this-button-do/

• http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/

• http://migre.me/20Z3

• http://gettingreal.37signals.com/GR_por.php#ch09

quinta-feira, 11 de junho de 2009

DESIGN DE INTERFACE@marcogomes, boo-box, 2009

quinta-feira, 11 de junho de 2009