quinta-feira, 6 de julho de 2017

Descrição dos testes realizados:

Dentre as técnicas mostradas para efetuar a realização das avaliações, chegamos à conclusão que a Técnica Empírica é a que teria resultados mais efetivos na busca de informação sobre o usuário e o nosso produto, já que ele ainda não está disponível para uso. Então fornecemos nossa produto SMDride para alguns usuários em potencial enquanto observávamos e anotávamos as sensações que nos eram verbalizadas.
Foram realizados sete ensaios nas coletas de dados, cada ensaio com um respectivo usuário em potencial, explicando quem éramos e do que se tratava. Em todos, foi esclarecido que eles podiam desistir de todo processo a qualquer momento caso sentissem a necessidade, ou incomodados o bastante para tal.
Antes de iniciar os testes, fizemos um pré-questionário com as seguintes perguntas: “qual sua idade, seu sexo e seu semestre nesse curso?”, “você está familiarizado com redes sociais de cooperação mútua [ou seja, aquelas que os usuários possuem objetivos em comum ou convergentes]?”, “como considera sua capacidade de criar novos laços, muita, modera ou pouca?”, “em geral, sua experiência com caronas pode ser considerada como positiva, moderada ou negativa?”, “possui algum tipo de deficiência visual?”.
Após isso, demos início à interação. Nessa etapa, dávamos-lhes objetivos a serem cumpridos enquanto eles comentavam o que sentiam enquanto visualização e utilizavam o produto. Enquanto isso, foram notadas alguns obstáculos e ruídos, entretanto nenhum foi barreira.
Ao final, era solicitado ao usuário que desse uma avaliação geral, o que ele achou e como se sentiu na aplicação e após isso para avaliar as funcionalidades numa escala de 1 a 5, em que 1 significava completamente insatisfeito e 5 totalmente satisfeito, e a parte visual na mesma escala.
Os resultados obtidos foram satisfatórios e preciosos para aprimorar o produto. Como por exemplo, a detecção de barreiras e ruídos. No primeiro caso, encontramos um problema de usabilidade avançado: colocar as informações da placa do carro, que precisavam ter as letras maiúsculas, alguns usuários tentaram até 3 vezes, com exceção de um delas que já tinha hábito de utilizar a numeração da placa do carro e não precisou repetir a operação. Já de ruídos, encontramos a fonte em que era utilizado pelo parágrafo da página inicial, estava muito pequena e todos apresentavam uma aversão para lê-la, entretanto todos foram capazes de enxergá-la.
Abaixo, os dados coletados:




PRIMEIRO USUÁRIO
1) Pré-questionário:
  • Idade: 22 anos
  • Sexo: masculino
  • Semestre: 3º semestre
  • Redes sociais de cooperação mútua: familiarizado
  • Capacidade de criar laços novos: moderada
  • Experiência com carona: positiva
  • Deficiência visual: não

2) Interação e Observação:
  • Não utilizou o botão voltar para o topo no menu superior fixo na página inicial.
  • Aconselhou uma seta na lateral para voltar ao topo na página inicial.
  • Dificuldade no momento de preencher o formulário para oferecer carona, demonstrando maior problema em relação ao como inserir a formato de placa do automóvel e com a data e hora. Levou três tentativas para concluir o formulário.

3) Consideração final:
  • Sentiu-se bem, mas solicitou uma melhora nas metáforas, no contraste e no foco.
  • Funcionalidade: 4
  • Visual: 4


SEGUNDO USUÁRIO
1) Pré-questionário:
  • Idade: 20 anos
  • Sexo: masculino
  • Semestre: 3º semestre
  • Redes sociais de cooperação mútua: familiarizado
  • Capacidade de criar laços novos: muita
  • Experiência com carona: positiva
  • Deficiência visual: não


2) Interação e Observação:
  • Não utilizou o botão voltar para o topo no menu superior fixo na página inicial.
  • Foi incapaz de visualizar o relógio da hora da carona no formulário.
  • Dificuldade em encontrar postagem da carona que criou, pois ela estava no final da fila e não no começo.

3) Consideração final:
  • “Adorei”
  • O nome do aplicativo demonstrou uma dificuldade ao ser lida, então foi-nos aconselhado a alterar o nome de SMD ride para SMDrive.
  • Funcionalidade: 4
  • Visual: 3

TERCEIRO USUÁRIO
1) Pré-questionário:
  • Idade: 18 anos
  • Sexo: masculino
  • Semestre: 3º semestre
  • Redes sociais de cooperação mútua: não familiarizado
  • Capacidade de criar laços novos: muita
  • Experiência com carona: moderada
  • Deficiência visual: miopia

2) Interação e Observação:
  • Utilizou o botão voltar para o topo no menu superior fixo na página inicial.
  • Reclamou do contraste dos textos na página inicial
  • Conseguiu preencher o formulário sem demonstrar dificuldade
  • Não conseguiu encontrar o botão de “comentar” nas caronas disponíveis

3) Consideração final:
  • Funcionalidade: 4
  • Visual: 4

QUARTO USUÁRIO
1) Pré-questionário:
  • Idade: (não consta)
  • Sexo: masculino
  • Semestre: graduado
  • Redes sociais de cooperação mútua: não familiarizado
  • Capacidade de criar laços novos: muita
  • Experiência com carona: positiva
  • Deficiência visual: miopia

2) Interação e Observação:
  • Não conseguiu visualizar o aviso de erro ao errar a senha no cadastro
  • Disse que as informações no placeholder poderiam ser mais específicas para cooperar com o usuário
  • Demonstrou insatisfação ao errar um dado de preenchimento de formulário e todas as outras informações terem que ser reescritas mesmo que estivessem corretas

3) Consideração final:
  • Ficou surpreso positivamente com o que havia sido mostrado já na fase de testes
  • Solicitou um botão na tela inicial que levasse o usuário direto para caronas
  • Funcionalidade: 5
  • Visual: 5


QUINTO USUÁRIO
1) Pré-questionário:
  • Idade: 18
  • Sexo: feminino
  • Semestre: 3º semestre
  • Redes sociais de cooperação mútua: familiarizado
  • Capacidade de criar laços novos: muita
  • Experiência com carona: positiva
  • Deficiência visual: não

2) Interação e Observação:
  • “Que legal, gostei!”
  • Dificuldade na leitura de textos na página inicial
  • Dificuldade na hora de digitar a placa do automóvel
  • Sentiu falta de feedback ao comentar nas publicações

3) Consideração final:
  • “Gostei do visual”
  • Botão “agendar carona” causou uma confusão por sua ambiguidade contextual
  • Funcionalidade: 4
  • Visual: 4


SEXTO USUÁRIO
1) Pré-questionário:
  • Idade: 19
  • Sexo: masculino
  • Semestre: 3º semestre
  • Redes sociais de cooperação mútua: familiarizado
  • Capacidade de criar laços novos: moderado
  • Experiência com carona: positiva
  • Deficiência visual: não

2) Interação e Observação:
  • “Título ofuscado”
  • Botões pequenos demais
  • Falta interatividade com os botões
  • Sentiu-se incomodado de como as hierarquia das informações da página inicial
  • Demonstrou insatisfação ao errar um dado de preenchimento de formulário e todas as outras informações terem que ser reescritas mesmo que estivessem corretas
  • Não conseguiu observar a hora ao preencher o formulário de carona

3) Consideração final:
  • “Falta detalhes no design, como feedback e algo mais intuitivo”
  • Funcionalidade: 3
  • Visual: 4

SÉTIMO USUÁRIO
1) Pré-questionário:
  • Idade: 26
  • Sexo: feminino
  • Semestre: graduada
  • Redes sociais de cooperação mútua: familiarizado
  • Capacidade de criar laços novos: muita
  • Experiência com carona: moderada
  • Deficiência visual: miopia

2) Interação e Observação:
  • Apontou que existe uma inconsistência no menu superior fixo
  • Contraste maior de informações
  • “Fazer um comentário deveria estar antes dos comentários já feitos”

3) Consideração final:

  • “Falta detalhes no personalidade, está pouco consistente”
  • Funcionalidade: 4
  • Visual: 3

Design de Interfaces

Meta-princípios
A consistência foi um dos processos em que nos demoramos mais, pois precisávamos deixar com elementos que repetissem e se relacionassem de maneira a criar vínculos fáceis de serem lembrados pelo usuário durante a navegação. Buscamos por um design simétrico com uma linha guia centralizada para facilitar a condução do olhar do usuário.
A hierarquia da página foi disposta de maneira que o usuário soubesse primeiro onde se encontrava e abaixo dessa informação decorre as funções daquele local e as informações pertinentes. A relevância maior está na base superior. A busca por contrastes também foi intensificado para que a visualização de elementos importantes para concluir os objetivos fossem fácil.

Layout, tipografia e cor

As tipografias utilizadas foram a sem serifa Raleway (corpo) e a cursiva Courgette (títulos) para que houvesse um contraste entre as duas e houvesse uma jovialidade e personalidade mais forte, devido a tipografia cursiva.
A cor principal utilizada é a roxa (#674ea7) [geralmente associado à nobreza, espiritualidade e criatividade, o roxo foi escolhido como nossa cor principal], a cor secundária é a um tom amarelado (#FFA500) [além de ser um contraste de roxo, amarelo representa cor de alerta, representar clareza etc qualidades que temos interesse de possuir na nossa aplicação], a cor de base é branco (#FFFFFF), a cor do texto é preto(#000000), cor de alerta é vermelho (#FF0000) [vermelho, a cor da paixão, também é a cor da urgência e a mais comum para ser a cor de alerta] e a cor de sucesso é verde (#00FF00) [para opor a cor de alerta, obviamente, o melhor contraste é o verde, que simboliza a esperança, juventude e funcionalidade].
Tivemos duas fases de layout e grides, adaptamos a primeira para uma forma de melhor visualização.
O tamanho da tela utilizado foi de 400x711px. A unidade utilizada no grid (em tons de vermelho), possui 40px de largura e 10px de gutter. As margens, direita e esquerda, possuem 5px. O conteúdo foi centralizado para chamar mais atenção e ser menos agressivo.
(imagem abaixo)

prototipo.jpgprototipogg.jpg

Após essa primeira fase e após as avaliações, chegamos a esse resultado (imagens abaixo):

2.jpg

2g.jpg

1.jpg1g.jpg4.jpg4g.jpg3.jpg3g.jpg5.jpg5g.jpg7.jpg7g.jpg

© D'way
Maira Gall