Menu

Wireframes - Eles deveriam realmente ser testados? E se sim, como?

wireframes should they really be tested

Experimente Nosso Instrumento Para Eliminar Problemas

Novos estagiários vieram a bordo e tivemos uma aula de treinamento para aprender conceitos de teste de software . Depois de ver aqueles rostos entusiasmados com suas mentes quase em branco (profissionalmente), decidi fazer um desvio para meu treinamento de rotina.

Após uma breve introdução, em vez de falar sobre teste de software como eu normalmente faço, lancei uma pergunta às mentes frescas - ' Alguém pode me explicar o que para wireframe é? '

A resposta foi uma pausa e, portanto, decidimos discutir o assunto. E foi assim que começou - Teste de Wireframe / Protótipo :)

teste de protótipo de wireframe

Então, o que é um wireframe? Deixe-me explicar com algumas analogias simples:

  1. O decorador de interiores não começa a colocar os móveis e a decorar a casa de forma aleatória. Ele coloca seu plano no papel (ou software de design), discute-o com o cliente, experimenta e modifica o plano da melhor maneira prática e então o implementa.
  2. Para entender a gravidade da lesão de uma parte do corpo, os médicos examinam uma radiografia. O raio X é basicamente um esqueleto do nosso corpo e fornece informações corretas sobre os ossos e as articulações.
  3. Um alfaiate prepara o tecido de papel (uma espécie de protótipo novamente), faz as modificações necessárias e usa-o como medida de base até que tudo esteja correto e ele esteja confiante para seguir em frente com a peça real que está costurando.

Acho que esses exemplos foram suficientes para qualquer pessoa entender o conceito de wireframe.

Wireframes são tipos de protótipos:

Eles são limitados por natureza, o que significa que podem conter páginas HTML vazias sem nenhum elemento funcionando ou capturas de tela estáticas que são representativas de uma página / função / elemento do aplicativo e podem não ter cores, gráficos e outros elementos do design visual real.

Para construir um aplicativo / site sólido, uma estrutura sólida é necessária e os wireframes ajudam a fornecer a estrutura, dando uma representação do layout da página, interface geral, navegação e funcionalidades.

Aqui estão alguns exemplos de wireframes:

wireframe exemplo 2

wireframe exemplo 1

Por que as empresas de software criam wireframes?

Exatamente pela mesma razão, o Alfaiate / designer de interiores / Médico decide experimentar primeiro - para evitar erros, eliminar suposições, obter a aprovação do cliente antes de definir tudo em pedra. Ajuda a identificar problemas desde o início e a dar uma ideia do software como ele apareceria quando concluído.

O que você aprenderá:

Importância de wireframes / teste de protótipo:

Então, por que testar algo que é um esqueleto e que não será visto pelo usuário do jeito que está agora? Em outras palavras - por que se preocupar com o intermediário quando ele ainda é um manequim?

Simplesmente - para ajudar na prevenção de defeitos - que é a agenda geral das equipes de QA (garantia de qualidade = prevenção de defeitos + Identificação de defeito )

Importância do teste de wireframe

O teste de wireframes pode ajudar no seguinte:

# 1) Identificação de requisitos ausentes:

Digamos se os requisitos afirmam que em um página de login deve haver 2 campos de entrada, ID de login e senha respectivamente e os 3 botões, OK-Cancelar- Reiniciar. Se o wireframe for o seguinte, podemos encontrar facilmente o botão Redefinir que falta no início e incorporá-lo ao aplicativo.

Ela é líder de projeto, com mais de 10 anos de experiência em testes de software.

# 2) Identificação de requisitos extras:

O inverso da situação acima pode ser que o requisito afirma que em uma página de login deve haver 2 campos de entrada, ID de login e senha, respectivamente, e 2 botões, OK e Cancelar. Se o wireframe for o seguinte, podemos facilmente descobrir que ele tem um botão Reset extra e buscar a confirmação se ele é realmente necessário ou não.

teste de wireframe 2

# 3) Usabilidade:

Wireframes são uma das melhores opções para testar a usabilidade do produto / aplicativo antes de ser desenvolvido.

Aqui está o wireframe para um dos formulários:

teste de wireframe 3

À primeira vista, parece ok.

Agora pense como um usuário final, o usuário que vai preencher as informações no formulário. Você acha que existe uma maneira, este formulário pode ser mais amigável? Bem, eu certamente acho que sim.

  • Fornece símbolo de calendário e restringe o usuário para selecionar a data do calendário. Isso seria útil para o usuário, pois ele não terá que ficar confuso sobre qual formato de data deve seguir e selecionar a data no calendário seria algo que todo usuário preferiria.
  • Uma dica explicando o que cada campo significa seria ótimo.
  • O nome da página como título é necessário para entender o wireframe e co-relacionar os campos.
  • Os campos obrigatórios devem ser marcados com o sinal * ou uma nota dizendo “ Todos os campos são necessários ”Deve estar visível.
  • O rótulo do primeiro campo deve ser “Nome da campanha”, em vez de apenas “Nome”, para evitar confusão para os usuários.

# 4) Teste funcional inicial:

o que pode abrir um arquivo json

No próprio exemplo acima, a partir do diagrama, podemos possivelmente adivinhar como a funcionalidade pode funcionar. Se não, pelo menos levará a mais pesquisas e a uma melhor compreensão da aplicação.

  • Por exemplo : E se o usuário quiser adicionar vários IDs de reserva? O aplicativo substituirá a entrada anterior ou permitirá várias entradas? Como isso vai lidar e gerenciar?

Como pode ser visto nos exemplos acima, testar wireframes realmente ajuda na identificação precoce de problemas por meio de um wireframe estático e evita que os defeitos se infiltrem no aplicativo real. Isso é muito benéfico, pois sabemos que os defeitos identificados no início do processo de desenvolvimento são mais baratos de corrigir do que os encontrados posteriormente.

Ferramentas para wireframing:

Existem muitas ferramentas disponíveis no mercado, mas deve-se usar a ferramenta de acordo com a adequação ao contexto. Embora a maioria das ferramentas como Axure, Power mockup, Simulify, Balsamiq etc sejam pagas, existem algumas ferramentas de wireframing grátis também:

  1. Cacoo : Cacoo é uma ferramenta de desenho on-line amigável que permite ao usuário criar uma variedade de diagramas, como mapas de sites, wireframes, UML e gráficos de rede.
  1. MockupBuilder : MockupBuilder ajuda o usuário a colocar rapidamente suas idéias na tela. É um aplicativo da web GRÁTIS com Silverlight.
  1. Projeto Lápis : Pencil Project é gratuito e fácil de aprender. Ele pode ser executado como um complemento do Firefox ou por conta própria.

Quando pode (ou ocorre) o teste de wireframes ocorrer:

  • Antes do desenvolvimento do produto: Isso pode ajudar a identificar lacunas ou requisitos ausentes, erros de projeto, problemas de usabilidade etc.- Prevenção de defeitos
  • Pós-desenvolvimento: Neste caso, os wireframes podem ser usados ​​como referências para validar a aplicação. - Identificação de defeitos.

No caso de teste de wireframe para usabilidade, geralmente é feito manualmente e na maioria das vezes os usuários em tempo real estão envolvidos. Eles recebem uma série de perguntas para entender sua experiência ou feedback ou recebem wireframes interativos para capturar o feedback.

Para ter uma análise detalhada de wireframes, às vezes especialistas no assunto também estão envolvidos.

Serviços como testando pode ser muito útil, onde se pode postar um link de wireframes e após o teste de wireframes, os resultados são gerados junto com o seguinte pontos de feedback:

  • Um vídeo da tela de cada usuário testando seu wireframe.
  • Áudio do usuário falando sobre como ele executa as tarefas.
  • Feedback valioso sobre como melhorar seu site.

Resultado do teste de protótipo:

Os resultados dos testes de wireframes são muito úteis em termos de compreensão do design, navegação, facilidade de uso, fluxo de trabalho geral e funcionalidades. Basicamente, após o teste de wireframes, os wireframes ficam mais claros e implementáveis.

Conclusão:

Para resumir, o teste de wireframes funciona como uma ação proativa e pode ser muito útil para encontrar brechas de usabilidade e design na fase de pré-desenvolvimento do aplicativo.

Com isso, estou encerrando o tópico, na esperança de que os leitores me tentem a escrever outro post sobre isso, fazendo perguntas e fornecendo feedback.

Sobre o autor: Este artigo foi escrito por Bhumika, membro da equipe STH. Ela é líder de projeto, com mais de 10 anos de experiência em testes de software.

Bons testes, como sempre :)

Leitura recomendada

^