154. Sitemap - fluxo
Antes de prototipar, crie coletivamente
(designers, arquitetos de informação,
desenvolvedores front/back, analista de
negócios, gerentes, etc.)
fluxos com os principais passos dos
clientes em seu site/sistema.
155. Um Vocabulário Visual para AI e Design de Interação
http://iainstitute.org/pt/translations/000332.html
http://migre.me/wI0X
156. Um Vocabulário Visual para AI e Design de
Interação
http://iainstitute.org/pt/translations/000332.html - http://migre.me/wI0X
O vocabulário é baseado em um modelo
conceitual simples que engloba
arquitetura de informação e design de
interação:
• O sistema mostra caminhos ao usuário.
• O usuário move-se ao longo destes
caminhos por meio de ações.
• Estas ações fazem, então, com que o
sistema gere resultados.
157. horizontal gluedot
is attached to the end of this arrow
vertical gluedot
is attached to the end of this arrow
http://www.jjg.net/ia/visvocab/garrett_ia_ppt.zip
158. Protótipos
Depois, crie
“coletivamente" protótipos
em papel, em computador...
160. Prototipação
A prototipagem é uma cultura de projeto:
• Ferramenta de colaboração
• Ajuda a controlar o risco
• Propicia descobertas felizes (sorte!)
• Modo rápido e barato de resolver
problemas
Faber Ludens – Érico Fileno
161. “Erre logo para ser bem
sucedido mais cedo.” IDEO
Faber Ludens – Érico Fileno
162. • O único jeito de você descobrir
se aquela idéia funciona ou não
é com um protótipo!
Faber Ludens – Érico Fileno
175. Usabilidade
Usabilidade é definida como a
capacidade que um sistema
interativo oferece a seu
usuário, em um determinado
contexto de operação, para a
realização de tarefas, de
maneira eficaz, eficiente e
agradável (ISO 9241).
176. Desenhar sistemas com
usabilidade significa
proporcionar ao usuário:
(ISO 9241-11 / International Standards Organization)
http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share
179. 1 - Efetividade
Um site com boa efetividade permite
que o usuário alcance os objetivos
iniciais de interação.
Exemplos:
- Percentual de usuários que completam a
tarefa com sucesso.
- Número de erros do usuário.
- Taxa de interações com sucesso/erros.
Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/
181. 2 - Eficiência
É a quantidade de esforço necessário
para se chegar a um determinado
objetivo. Quanto menos esforço o
usuário tiver, melhor.
Exemplos:
- Tempo para completar uma tarefa.
- Tempo gasto usando a ajuda ou
documentação.
- Tempo de aprendizagem
Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/
184. 3 - Satisfação
Talvez seja a mais difícil de medir e
quantificar, pois pode estar relacionada a
fatores altamente subjetivos. Geralmente
a satisfação se refere ao nível de conforto
ao utilizar a interface.
Exemplos:
- Nota da satisfação do usuário.
- Proporção de afirmações durante o teste que são
positivas / negativas.
- Proporção de usuários que dizem que eles preferem
usar o sistema do que o de algum concorrente.
- Freqüência das reclamações.
Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/
185. “Efetividade, eficiência e
satisfação são as medidas de
usabilidade mais
freqüentemente consideradas
em relação a websites. Apesar
de algo subjetivas, servem de
parâmetro para alcançar
melhorias.”
Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/
188. ● Facilidade de aprendizagem:
http://www.flickr.com/photos/bocavermelha
189. Eficiência
de uso
Grau de
produtividade
atingido pelo
usuário depois
que aprendeu
a utilizar o
sistema.
http://www.flickr.com/photos/arkworld/472578586/
191. Baixa taxa de erros
● Medida do quanto o usuário
pode ser induzido ao erro
pelo sistema e o quanto pode
se recuperar do mesmo.
http://www.flickr.com/photos/kalimistuk/2226314453/
199. Como o cliente explicou O que o cliente
o que queria realmente precisava
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210. Principais Métodos
- Teste de usabilidade
tradicional: solicita aos
usuários que realizem
determinadas tarefas no site
em análise, pensando em
voz alta, enquanto são
observados.
http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share
211. Testes de Usabilidade (camtasia)
Vídeo: Teste de Usabilidade
site Olhar Digital
http://www.youtube.com/watch?
v=9LAApah_UrQ
212. Vídeo do Steve Krug realizando um teste de usabilidade
(seu objetivo com o vídeo foi mostrar como o teste de usabilidade pode
ser uma tarefa simples e que pode ser realizada por qualquer um).
http://www.youtube.com/watch?v=QckIzHC99Xc
Livro do Steve Krug:
Simplificando coisas que parecem complicadas
http://www.altabooks.com.br/simplificando-coisas-que-parecem-
complicadas.html
Documentos em português para preparação e realização
de testes de usabilidade
http://www.altabooks.com.br/index.php?
dispatch=attachments.getfile&attachment_id=41
214. Teste de usabilidade -outras
técnicas:
Teste dos 5 segundos
Utilizado para avaliar o conteúdo
das principais páginas de seu site
(com exceção da homepage e
outras páginas com muitas
prioridades).
http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share
215. Teste dos 5 segundos
- Mostrar ao usuário a página de conteúdo
durante 5 segundos. A sua tarefa será prestar
atenção a tudo que for visto na página.
- Cria-se um cenário: você procura
informações sobre planos de hospedagem de
sites. Entre no site X e observe a página
durante 5 segundos. Agora escreve em um
papel tudo o que viu e percebeu. Marque com
um X o que chamou mais sua atenção ou achou
mais importante.
Técnica interessante para comparar duas
soluções para o design de conteúdo.
216. Teste dos 5 segundos – primeiro site
Preste atenção a tudo que for visto
na página.
Você terá apenas 5 segundos...
217.
218. Teste dos 5 segundos – primeiro site
Escreva tudo o que viu e percebeu.
Agora marque com um X o
conteúdo mais importante.
219. Teste dos 5 segundos – segundo site
Preste atenção a tudo que for visto
na página.
Você terá apenas 5 segundos...
220.
221. Teste dos 5 segundos
Escreva tudo o que viu e percebeu.
Agora marque com um X o
conteúdo mais importante.
223. First clic test.
Se o usuário não clicar certo a primeira vez, a
chance de clicar certo depois será muito baixa.
A técnica muito boa e rápida para testar se os
seus links/botões/arquitetura estão funcionando.
Chame o usuário e crie alguns cenários para
testar a homepage, como, por exemplo:
“Sua senha foi clonada e você precisa mudá-la
com urgência... Onde você clicaria para mudar a
senha?”
E observe o usuário.
224. Procure o local onde poderá
se cadastrar para receber
ofertas.
225.
226.
227.
228.
229.
230.
231.
232.
233. No site dos Correios, faça
uma rastreamento por:
SS987654321BR
238. - As 10 heurísticas de Nielsen
1) feedback
2) falar a linguagem do usuário
3) saídas claramente demarcadas
4) consistência
5) prevenir erros
http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html
239. - As 10 heurísticas de Nielsen
6) minimizar a sobrecarga de
memória do usuário
7) atalhos
8) diálogos simples e naturais
9) boas mensagens de erro
10) ajuda e documentação
http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html
240. - 1 heurística importante para
e-commerce “Call to Action”
250. Teste A/B
http://webop.com.br/blog/wp-content/uploads/2012/06/endo-ab-test.jpeg
251. Teste A/B é o nome que se dá a
estratégia de colocar duas ou mais
experiências no ar, ao mesmo tempo,
para que, com base nos resultados,
se descubra qual das opções foi a
melhor aceita pelas pessoas.
252. The red button outperformed the green button by 21%
http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx?source=Blog_Email_
[The+Button+Color+A%2fB]
272. • 44% custo de
delivery caro.
• 41% não estava
pronto para comprar
• 27% quer comparar
preços
• 25% os preços estão
acima do desejado
• 24% querem salvar a
compra para depois
5 principais razões não são problemas de design / usabilidade
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
273. • 14% não queria se
registrar
• 12% Achou que o
site pedia
informações demais
• 11% Checkout
confuso e longo
demais
• 11% Website muito
lento
• 10% Falta de
informações
Próximas 5 razões por problemas de design / usabilidade
http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
274. "Por alguma razão, uma oferta de frete grátis
que faz o cliente economizar R$ 6,99 é mais
atraente para muitos do que um desconto que
reduz o preço de compra em R$ 10,00
David Bell, WhartonSchool Business
275.
276. 59% dos compradores esperam o custo total
antes de fecharem a compra - OneOpenWeb
311. tela pequena
bateria
rede inconsistente
dedo gordo
sensores
@lukew
312.
313. Outras limitações:
● Capacidade de processamento reduzida.
● Uma aplicação em HTML5 para mobile
pode ser até 100 vezes mais lenta que em
desktop.
http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
314. Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”
315. Por isso, em projetos mobile,
precisamos estratégia,
IDADE (n)(e design de verdade