Google Chrome - Grupos de guias aprimorados

Nov 27 2022
Estudo de caso - Uma avaliação dos grupos de guias do Chome (android) por meio do princípio da heurística e uma solução para melhorar a experiência do usuário. ÍNDICE 1] Como começou 2] Redesenho — o que mudou? 3] Por que escolher o Google Chrome 4] Identificando o problema 5] Ideando 6] Wireframing 7] Prototipagem 8] Teste do usuário 9] Feedback COMO COMEÇOU! Tenho pesquisado e experimentado os princípios de UX.

Estudo de caso - Uma avaliação dos grupos de guias do Chome (android) por meio do princípio da heurística e uma solução para melhorar a experiência do usuário.

ÍNDICE

1] Como tudo começou

2] Redesenho — O que mudou?

3] Por que escolher o Google Chrome

4] Identificando o problema

5] Ideação

6] Wireframing

7] Prototipagem

8] Teste do usuário

9] Comentários

COMO COMEÇOU!

Tenho pesquisado e experimentado os princípios de UX. No meio do caminho, de alguma forma, acabei em um workshop de orientação de 2 semanas.

O workshop aprimorou meus fundamentos e também me familiarizou com uma perspectiva diferente de observação.

Nosso mentor Anudeep lançou um desafio de UX Design com um limite de tempo de 48 horas. E é assim que posso fazer um breve estudo de caso no Google Chrome para Android.

REDESIGN — O QUE MUDOU?

Foram 2 mudanças principais propostas e implementadas. Uma mudança é visual e, portanto, fácil de detectar, enquanto a outra mudança ocorre na funcionalidade de elementos já existentes e, portanto, não é visível a olho nu.

1] Dê um nome aos grupos de guias

Redesenho 1

Aqui, selecionamos um grupo de guias e adicionamos um recurso de edição para nomear os grupos de guias. Para simplificar, usamos o ícone de edição com o qual os usuários estão familiarizados e o combinamos com o estilo de design do ícone do Chrome.

Criamos uma tela de prompt pop-up, que se tornará acionável sempre que o usuário desejar fazer alterações no nome.

2] Mova as guias

Redesenho 2

Aqui, a área marcada em Vermelho é o local onde a nova opção de Arrastar é disponibilizada e habilitada.

Isso é feito para ajudar o usuário a classificar e organizar sua guia da maneira que preferir. Uma vez organizado, ajudaria o usuário a economizar tempo e ser eficiente.

3 ] Impacto nos usuários e nos negócios

Guias e grupos de guias são uma alternativa rápida aos favoritos no Chrome Mobile. E as mudanças introduzidas devem afetar positivamente tanto o Usuário quanto o Negócio.

✔USUÁRIOS:

As mudanças ajudam o usuário a economizar tempo e esforços. Isso os ajuda a gerenciar suas guias com mais eficiência e facilidade. Nomear grupos ajuda a identificar as guias mais rapidamente e, assim, reduz o estresse mental que os usuários, de outra forma, teriam ganho para se lembrar das coisas.

Com as guias de arrastar habilitadas, o usuário pode organizar as guias de acordo com suas necessidades e prioridades para economizar tempo e esforços.
Também reduz as etapas que o usuário teria executado em pelo menos 3.

✔Negócios:

Quando o usuário não encontra o que precisa, fica frustrado e pode ir para outros aplicativos (chamada, msg, notas, insta msg etc) para recuperar as informações.

Isso pode resultar em perda de TEMPO DE TELA .

O usuário também pode esquecer/adiar sua tarefa ao navegar em outros aplicativos.

Isso pode diminuir as MÉTRICAS DE RETENÇÃO.

Tornar o processo dos usuários fácil e eficiente ajuda a economizar tempo e esforço e, portanto, ajuda a aumentar a RETENÇÃO DO USUÁRIO .

Por que escolher o Google Chrome?

As escolhas feitas foram baseadas em mais de um motivo.

  • Para começar, o Chrome é um aplicativo amplamente usado e, portanto, possui uma grande base de público. Qualquer melhoria feita pode ajudar um grande número de usuários.
  • Em segundo lugar, como o Chrome é amplamente utilizado, encontrar pessoas para testar é relativamente fácil. E assim podem dar respostas detalhadas, ajudando-nos a desenhar melhores soluções.
  • Terceiro, eu mesmo estou muito familiarizado com o produto. E assim me ajuda a evitar a criação de soluções de design duplicadas.

A solução é tão boa quanto o problema.

Para identificar os problemas utilizamos os 10 princípios da Heurística e os testamos na área especificada do produto.

Redesenho - Identificação do problema

Problema (R1) identificado:

Ao percorrer o conteúdo de uma guia, você a considera útil e deseja priorizá-la. A incapacidade de controlar os arranjos da guia dificulta o controle e a liberdade do usuário.

Princípio heurístico — CONTROLE E LIBERDADE DO USUÁRIO

Problema (R1) identificado:

É de conhecimento comum entre os usuários de tela sensível ao toque que pressionamos e arrastamos longamente para alterar a posição. O mesmo está faltando nos grupos de guias do Google - dentro.

Princípio heurístico - FLEXIBILIDADE E EFICIÊNCIA DE USO

Problema (R1) identificado:

O usuário agora está muito acostumado com práticas comuns, elas vêm naturalmente. Portanto, ao implementar práticas comuns (arrastar) em elementos elegíveis, mas não receber a resposta pretendida, o usuário fica frustrado

Princípio heurístico — CORRESPONDÊNCIA ENTRE O SISTEMA E O MUNDO REAL

Problema (R2) identificado:

Ao organizar suas guias em grupos, você deseja que elas sejam facilmente identificadas quando necessário. A incapacidade de criar/marcar grupos de guias para ter uma identidade distinta minimiza o controle e a liberdade do usuário.

Princípio heurístico — CONTROLE E LIBERDADE DO USUÁRIO

IDEIAÇÃO

Aqui encontramos algumas soluções para os problemas que identificamos. Classificou e eliminou alguns com um método de tentativa e erro. E escolher a melhor solução para o nosso problema.

As restrições foram identificadas e definidas antes da identificação das soluções, de acordo com a capacidade e disponibilidade de recursos.

Redesenho - Ideação

WIREFRAMING

Idéias são apenas sonhos, a menos que sejam postas em prática.

Aqui criamos protótipos de baixa fidelidade com base nas ideias que imaginamos.

Um caminho adequado para as novas alterações foi mapeado e sua viabilidade para ser implementada no sistema de produto atual foi verificada por meio de vários esboços.

Depois de algumas tentativas, a ideia visualizada na imagem abaixo foi escolhida para ser a base para a próxima etapa.

Acesse o Link para protótipo de baixa fidelidade, CLIQUE AQUI

Redesenho – Wireframing

PROTOTIPAGEM

Nesta etapa, convertemos os wireframes de baixa fidelidade em um protótipo visualmente agradável e funcional.

alterações feitas

✏️Adicionamos um ícone de edição para que o usuário possa nomear os grupos de guias no Chrome.

✏️Adicionamos uma tela pop-up, na qual o usuário pode adicionar/alterar o nome. Este pop-up será exibido quando o botão Editar for acionado

✏️Adicionamos uma opção de arrastar à barra inferior do grupo de guias

Acesse o Link para protótipo de alta fidelidade, CLIQUE AQUI

Redesenho - Prototipagem

TESTE DE USUÁRIO

A parte mais importante de um projeto é testá-lo. O teste mostra a resposta e o interesse dos usuários pelo produto, além de ajudar a identificar problemas do usuário e corrigi-los.

Um produto não apreciado por seus usuários é um mau investimento.

Encontrar usuário

É importante identificar as pessoas certas para testar seu produto. Eles devem pertencer ao grupo de público-alvo.

Como o Google é usado por uma grande massa de pessoas, não foi difícil encontrar usuários para testar nosso produto. Tirando os poucos “Não me incomode”, “Não tenho tempo”, rapidamente encontramos o usuário e observamos o resultado.

Tarefa para o usuário

⚡Edite o nome de um grupo de guias.
⚡Peça para eles entrarem no grupo de guias e navegar em qualquer uma das guias.
⚡Altere a posição dessa Aba no grupo, diretamente da página em que o usuário está.
⚡Sua opinião sobre as mudanças.

O que observar

Observe a rapidez com que o usuário encontra a opção de edição e se encontra algum problema ao fazer as edições.
Observar qual escolha o usuário faz ao tentar mudar a posição da aba.
Eles encontram o caminho em uma tentativa?
Caíram perdidos?

Redesenho - Notas de observação do usuário

Percepções

Você sempre pode aprender algo de Todos e de Tudo.

Não importa o quão popular ou amplamente utilizado seja um produto - Sempre pergunte ao usuário se ele usa o produto ou se está familiarizado com o produto ou não.

O usuário pode ficar preso/encontrar problemas com elementos pré-existentes que você não redesenhou.

FEEDBACK

Após análise dos dados recolhidos junto do utilizador e das observações por nós efetuadas, chegámos à conclusão de que não são necessariamente necessárias quaisquer alterações adicionais.

Quando o usuário já está muito claro e satisfeito com o produto que projetamos, quaisquer alterações mais forçadas podem afetar adversamente o produto.

No entanto, ainda introduzimos uma pequena alteração no produto. Adicionamos “Zoom On Hover” à barra inferior da guia Group.

Redesenhar — Passe o mouse

Conecte-se comigo no Linkedin, CLIQUE AQUI