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


DESIGN ANTES DA PROGRAMAÇÃO


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


Design da interface

Idéia Programação

Teste

Tempo

Entrega

Teste Teste


GUIA GETTING REAL37signals


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


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.


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


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


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.


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


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


MANTENHA O SIMPLES SIMPLES


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

19:42

+ hora

- hora

+ minuto

- minuto



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

http://marcogomes.com/blog/2008/organizando-informacao-no-tempo-e-no-espaco


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.


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


LEI DE FITTS


Uma das regras mais importantes no desenvolvimento de interfaces



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

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


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




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


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


http://en.wikipedia.org/wiki/Paul_Fitts

http://en.wikipedia.org/wiki/Paul_Fitts

Facilidade para acertar


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




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




a fase de desaceleração é importante




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




No topo das telas de Mac OS X e Gnome

MENUS FÁCEIS DE ACERTAR


MENSAGENS AO USUÁRIO




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

a mensagem bloqueia o uso do navegador.


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

não bloqueia o uso do navegador


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

não bloqueia o uso do navegador


USE VERBOS COMO AÇÕES DE BOTÕES

versus


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

http://en.wikipedia.org/wiki/Hick's_law

http://en.wikipedia.org/wiki/Hick's_law

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)


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

ESTÁ DIFICULTANDO, EXPONENCIALMENTE, A ESCOLHA

DOS USUÁRIOS.


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


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




http://migre.me/20Ys

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://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://migre.me/20Z3

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




DESIGN DE INTERFACE@marcogomes, boo-box, 2009


marco gomes sobre user experience

Technology