IME - USP ANDRÉ OLIVEIRA JONATAS CESAR
Janeiro/2016
INTRODUÇÃO
4
PÚBLICO ALVO
5
PERSONAS
6
MAPA DE NAVEGAÇÃO E INTERAÇÃO
9
PROTOTIPAGEM
10
CARD SORTING
12
IDENTIDADE VISUAL
14
LAYOUT FINAL
16
UX CANVAS
18
ANÁLISE HEURÍSTICA
19
TESTE DE USABILIDADE
20
REFERÊNCIAS
21
INTRODUÇÃO Sob orientação do Professor Hamilton Fernandes de Moraes Junior foi ministrado e discutido em sala em aula c onceitos sobre engenharia de usabilidade e design de interação. Aspectos cognitivos. Problemas típicos em sites web. Avaliação Heurística.Teste de Usabilidade. Técnicas de um sistema web e mobile. Em sala também foram produzidas atividades para colocarmos em práticas o onteúdo estudado, e como projeto final, montamos um grupo com quatro integrantes para produção de um relatório de usabilidade para um site ou aplicativo de livre escolha. Em reunião com os integrantes resolvemos criar um projeto para reuinir pessoas para praticar esportem em comum.
4
PÚBLICO ALVO
Pessoas de 16 aos 54 anos, que gostam ou praticam esporte, que usam smartphone e redes sociais como facebook, twitter instagran entre outros.
Dados O percentual de pessoas que praticam atividades físicas durante o tempo livre passou de 30,3% para 33,8% nos últimos cinco anos, revelou a pesquisa Vigitel 2013 (Vigilância de Fatores de Risco e Proteção para Doenças Crônicas por Inquérito Telefônica) fonte : www.brasil.gov.br
5
PERSONAS Nome: Luiza Almeida Sexo: Feminino Idade: 30 Deficiente: Não Reside: Av Francisco Morato - São Paulo Profissão: Vendedora Nível de escolaridade: Ensino Médio Completo
Perfil: Luiza trabalha numa loja de rua no centro de São Paulo, tem o cargo de vendedora. É interessada por esportes praticados ao ar livre e que não tenha um custo alto. É muito ativa em redes sociais e por conta disso, se interessa por eventos apresentados em grupos nas redes, de diversas modalidades. Gosta de música e peças de teatro. Busca sempre ter acessibilidade à grupos de estudos, também. Tem interesse em iniciar a faculdade no próximo ano e usar uma bicleta como meio de transporte. Estilo de Vida: Apesar de ainda não ter uma graduação, Luiza busca sempre estar amparada de conhecimento, sobre os assuntos que mais lhe interessam, como profissão: educadora física. Tem muita facilidade em comunicar-se com os demais nos grupos, o que lhe garante uma grande rede de amigos.
6
PERSONAS Perfil: Álvaro Silva é um paulista de 26 anos, mora no bairro do Grajau. Cursa Produção Musical, tem um canal no YouTube em que ele posta vídeos tocando seu violão. Gosta de jogos eletrônicos e não larga seu smartphone muito menos quando está interagindo com seu circulo social.
Nome: Álvaro Silva Sexo: masculino Idade: 26 anos
Estilo de Vida: Alvaro gosta muito de esportes e acompanha seu Deficiente: preferido, basket ball. Por passar muito tempo sentado não em seu trabalho, ele gosta de praticar esporte para tirar Reside: a ansiedade e nervosismo. Grajau - São Paulo Profissão: Atendente de telemarketing Nível de escolaridade: Ensino Superior incompleto
7
PERSONAS Nome: Carlos Augusto Alcantara Sexo: masculino Idade: 30 Deficiente: não Reside: Itaquera - São Paulo Profissão: Corretor Nível de escolaridade : Superior Completo
Nome: Andressa Pereira Sexo: feminina Idade: 20 Deficiente: não Reside: Embu Guaçu São Paulo Profissão: Recepcionista Nível de escolaridade: Ensino Médio Completo
8
TELA INICIAL
MAPA DE NAVEGAÇÃO E INTEREÇÃO
0:00 PM
Logo
ENCONTRE PESS OAS E LOCAIS PARA PRATICAR SEU ESPO RTE
CHAT
LOGIN
0:00 PM
0:00 PM 0:00 PM
PERFIL
Chat
abaixo escolha os esporte de sua preferencia DissensioDissensio
Lorem ipsum dolor sit ametv.
Dissensio
Monday 3:56PM
FUTEBOL LOGINTO YOURACCOUNT youremail@mail.com
Nor again is there anyone who loves or pursues or desires.
HOME
BASQUETE VOLEI
password
FUTEBOLAMERICANO
Forgot Password?
ESPORTE
LOGIN
ESPORTE
Monday 3:57PM
Et harum quidemrerum facilis est et pedita distinctio. Nam libero tempore. Monday 3:56PM
Send
Lorem ipsu|
ESPORTE
Login With Facebook
0:00 PM
ESPORTE Create Account
Logo
ESPORTE
LOGIN
DADOS AGENDA 0:00 PM
January
0:00 PM
0:00 PM
Webview
Webview Logo
Logo
February, 22, 2014
February, 22, 2014
CONFIRMAÇÃO DE PRESENÇA
PARABÉNS
FUTEBOL CAMPO DOOÃ J O
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo nventore i veritatis et quasi architecto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo nventore i veritatis et quasi architecto
OK
CONFIRMAR SUA PRESEN ÇA
S
M
T
W
T
F
S
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
LOCAL ESCOLHIDO
9
PROTOTIPAGEM
10
PROTOTIPAGEM
11
CARD SORTING Card sorting é uma técnica de categorização de cartões, feita de forma coletiva e colaborativa, que ajuda a produzir a arquitetura de informação da interface, e categorizar conteúdos, separando por temas e assuntos, que por sua vez, afeta diretamente o usuário, pois através de uma boa categorização, é que o usuário consegue muitas vezes achar o que procura na interface.
Ultilizamos desta técnica para elaborar a arquitetura de informação, através do site mura.ly , onde cada integrande fez um agrupamento, e por ultimo reunimos e em acordo fizemos um novo agrupamento, com base nos agrupamentos antingos, retirando cars repetidos e criando novos grupos. O resultado final encontra-se na próxima página. 12
13
IDENTIDADE VISUAL
14
SPORT MAPS
s
+ Com base em pesquisas iconográficas e painéis semânticos definimos duas cores padrão para a marca. Sendo a matiz azul e o verde.
+ S
SPORT MAPS
#1ABC9C
SPORT MAPS
LOGOTIPO FINAL
#2E8ECE
15
LAYOUT FINAL
16
LAYOUT FINAL
17
UX CANVAS
18
ANÁLISE HEURÍSTICA DO SITE MEETUP HEURÍSTICA VIOLADA
Consistência e padrão
ERRO O site não possui uma alinhamento entre as imagens e os textos , causando uma confusão mental, na hora de entender o conteúdo
Ao logar-se no site, é possível ver todos os grupos ao qual você faz parte,e caso Controle de liberdade sejam muitos, ao descer a barra de tarefa, do usuário o usuário tem um exausto esforço para chegar ao topo Ao pesquisar uma palavra que o site não Visibilidade do apara dentro de algum meetup, eles dão status do sistema qualquer resultado Visibilidade do status do sistema
Prevenção de erros
quando o usário está na fila de espera ele não sabe a sua posição na lista Dentro doeventoMeetupcriado,é exigido a inserção de alguns dados, caso eu clique em confirmar sem inseri-los não é apresentado nenhuma mensagem e a aplicação continua.
LOCAL
Página de cada meetup
Pagina inicial
GRAVIDADE
2
3
em todas as páginas
5
nas páginas de evntos
5
EventoMeetupcriado
2
SOLUÇÃO Organizar com uma grid o layout, mantendo os conteúdos sempre alinhados uns com os outros, e usando o mesmo de borda Colocar no rodapé um botao que volta para o inicio da página. organizar a pesquisa com o banco de dados do sistema mostrar a posição do usuário na fila de espera Impedindo fluxo do sistema caso os dados exigidos não forem inseridos e mostrar mensagens de aviso
19
TESTE DE USABILIDADE Objetivos
Métricas
Os usuários conseguiram encontrar pessoas praticando o esporte de sua preferência?
Percepção Cognitiva
Os usuários saberão como avaliar o local aonde estão praticando atividade?
Entendimento e utilização da aplicação
Os usuários conseguiram identificar de primeiro momento qual o esporte e quantas pessoas são mencionados no local indicado?
Quantidades de cliques para completar um tarefa
Serão usadaos os perfis das pernas 1, 2, 3 e 4.
4 Tarefas para serem realizadas pelos participantes
4 Cenários correspondentes a cada participante
Encontrar um local para a pratica esportiva
O usuário está em casa procurando um local e algum esporte para praticar
Avaliar um local Solicitar participação de equipe Identificar com êxito os ícones usados para identificação dos esportes
o usuário já encontrou um local mas quer ver se tem alguém próximo a ele pratica um esporte de sua escolha Logo após sair do trabalho o usuário se prepara para praticar algum esporte O usuário baixa o aplicativo para informar-se melhor sobre variados esportes 20
REFERÊNCIAS
Material de Engenharia de Usabilidade para Sistemas WEB fornecido pelo Prof. Hamilton Fernandes de Moraes Junior. Universo da Cor (Israel Pedrosa - Editora SENAC) Guidelines Goolgle (http://developer.android.com/design/index.html) UX Design (Casa do Código - Fabrício Teixeira) 21