“Tornei-me terapeuta ou psicólogo” - Vitaliy Fridman sobre testes UX e interfaces móveis

Embora os fornecedores front-end tenham conhecido e apreciado muito Vitaliy Fridman (co-fundador da Smashing Magazine ), esse nome pode ser muito menos conhecido pelos desenvolvedores e testadores de dispositivos móveis. Mas Vitaliy, que recentemente conseguiu ocupar os dois primeiros lugares ao mesmo tempo nos principais relatórios do HolyJS 2018 Piter, agora chegou a conferências sobre dispositivos móveis e testes com o novo relatório “Extremos de testes: truques dos cantos escuros das interfaces móveis”.

Portanto, antecipando Heisenbug e Mobius, perguntamos a ele sobre testes UX e interfaces móveis: desde como esses testes são realizados especificamente na Smashing Magazine e até smartphones.

- A pergunta é para aqueles que não estão profundamente imersos nos testes UX: entendemos corretamente que, embora se refira aos testes, essa é uma área bastante peculiar e isolada? O teste de unidade é verde ou vermelho, e você tem matéria alta aqui.

"Exatamente." Nos testes que eu conduzo, você não pode dizer "verde" ou "vermelho". Há muita coisa subjetiva aqui: usuários diferentes vêm com uma certa quantidade de preconceito e com as habilidades aprendidas em outros sites. Por exemplo, uma pessoa só pode acessar o site de intercâmbio ou o site de notícias. A maneira como ele vê a Internet e as interfaces é muito diferente de nós e de outras pessoas. Portanto, nesse contexto, é muito importante estudar o público-alvo de um site específico, ver quais outros sites ela visita, como os utiliza, quais são seus hábitos.

O mais difícil é o subjetivo de que alguém possa gostar, mas não alguém, selecionar algo objetivo na interface para que a ideia alcance diferentes usuários, todos entendam o que precisa ser feito e como. É preciso procurar não o que é feito "bem", mas o que tem uma boa experiência de recuperação.

Ou seja, mesmo que uma pessoa tenha uma experiência de usuário diferente e cometa um erro no site, é necessário que ela possa retornar rapidamente a um estado normal e continuar seu caminho aonde quer que vá. Essa é a parte mais importante que é difícil fornecer totalmente com cobertura de código, por exemplo.

Então agora eu tenho problemas com um plano um pouco diferente. Examino como você pode alterar pequenos detalhes, por exemplo, o texto de erros adaptativos. Suponha que, se o pagamento por cartão não passou, você precisa não apenas informar isso, mas também dizer o que exatamente aconteceu e como corrigi-lo.

Minha tarefa é examinar todos esses detalhes, e o teste automático de tais processos é impossível. Precisa assistir as pessoas. Portanto, acho que, em certa medida, me tornei terapeuta ou psicólogo. Olho constantemente as pessoas, as observo e tiro conclusões com base em como elas olham para a tela, onde clicam, onde não clicam, como o cursor do dedo ou do mouse se move. Este é um lado ligeiramente diferente, mais abstrato, humano.

- No teste "usual", a humanidade já chegou à conclusão de que é importante mesmo sem testes. E no caso dos testes de experiência do usuário, onde tudo é mais abstrato, eles geralmente acenam com as mãos e não prestam atenção suficiente?

Sim, com muita frequência. O problema é que, para mim, o UX é sempre um grande número de experimentos. Existe uma ideia: você precisa experimentá-la e ver como isso mudará a conversão ou o envolvimento. Muitas vezes, o problema é que assumimos que você pode mudar alguma coisa e trazê-la imediatamente à tona. Mas no UX, o efeito geralmente é muito longo, a longo prazo.

Se você desligar um pop-up e ver quantas pessoas clicam nele, esse é um efeito de curto prazo, será fácil medir. Obviamente, se houver erros graves, por exemplo, ao comprar (uma pessoa não entende o que é necessário para concluir um pedido), eles percebem isso rapidamente. Mas algumas coisas só aparecem por um longo tempo.

Há algumas coisas relacionadas, por exemplo, a textos em que não está claro o que um recurso, produto ou seu objetivo significa: você precisa de um tempo para ver se as pessoas usam esse recurso, retornam ou jogam fora, porque inicialmente eles não entendiam o que ela estava fazendo. Isso pode ser medido pelas taxas de cliques e métricas de engajamento, mas o problema pode não ser que as pessoas não precisem desse recurso, mas que não está claro como ele ajuda o usuário ou quando exatamente usá-lo. Portanto, a única coisa que fazemos para sistematizar esse processo é conduzir regularmente uma entrevista com pelo menos seis usuários toda sexta-feira.

Existe alguma versão do produto, temos uma implantação contínua, alguns recursos - estamos olhando para ver se uma pessoa entende o que está acontecendo na interface. É mais rápido para ele passar a pagar pelo pedido ou pelas informações de que precisa. Observamos a conversão e como uma pessoa entende o que está acontecendo na interface em geral. É mais rápido para ele passar no checkout as informações que está procurando. Essa é a única maneira de realizar de alguma forma a automação, que é nos testes clássicos.

- Os gigantes de TI abordam cuidadosamente os testes de UX usando rastreamento ocular e similares. Mas as pequenas empresas podem pensar: "Este Google está pronto para alocar um laboratório especial, mas para nós algo para se intrometer nos testes de experiência do usuário". Sem grandes recursos, é possível obter resultados aqui?

Claro. Existem muitos recursos, incluindo os gratuitos, que permitem testes. O rastreamento ocular pode ajudar, mas em situações difíceis. Pode ser usado, por exemplo, no caso de rotas, quando as pessoas não conseguem encontrar como chegar a algumas salas do museu. Nesse caso, é útil saber para onde as pessoas olham quando vão ao museu e por que não encontram o que parece ser muito fácil de encontrar. Você pode verificar na interface onde as pessoas olham, no que prestam atenção e no que veem.

Os mapas de calor são um método bastante simples, existem muitas ferramentas para criá-los. Eles analisam o tráfego e geram fluxo. Você pode gravar vídeos para cada usuário - para onde ele foi, onde estava o mouse, para onde se moveu, para onde clicou, para onde voltou e assim por diante.

Por outro lado, existem ferramentas que permitem contratar pessoas do pool de testadores que recebem dinheiro para cada teste e lhes atribuem uma tarefa - por exemplo, o site usertesting.com. Isso já é muito mais caro (US $ 49 por teste de vídeo), mas você pode escolher os dados demográficos nos quais está interessado, dar uma tarefa à pessoa e o chamado "protocolo de pensar em voz alta" é usado lá. Isso significa que quando uma pessoa vai para a página principal da interface e se move de uma para outra, concluindo a tarefa, deve dizer se entende tudo, o que vê, o que é este site, o que espera quando clica no botão. Se você coletar 6-7 desses vídeos para dispositivos móveis e 6-7 para a área de trabalho, poderá ver muitos padrões. Além disso, você precisa monitorar cuidadosamente a aparência das pessoas e como elas se comportam com o mouse ou o touchpad.

Muitas vezes, há situações em que alguém não entende algo na interface. As pessoas adoram botões e quaisquer elementos interativos. Eles começam a se mover em sua direção, mas não clicam nela, mas torcem o mouse ao redor do botão. E só então eles clicam. Este é um dos sinais de que uma pessoa não entende bem o que acontecerá se você pressionar um botão. Essas coisas podem ser facilmente encontradas sem dispositivos muito caros.

“No caso de outros tipos de teste, existe uma idéia da separação de tarefas:“ aqui temos os desenvolvedores que escrevem testes de unidade para o código, mas os testadores manuais o fazem ”. E testes de experiência do usuário - de quem é esse cuidado?

- Eu acho que depende da estrutura da empresa. As empresas ocidentais costumam ter UX-designer ou até testador de usabilidade, é claro que fazem isso o dia todo. Mas se a empresa for pequena, a outra pessoa será responsável. Se houver um designer de front-end (mais próximo do UX, não do JavaScript), ele terá um. E qualquer pessoa que lide com protótipos terá a responsabilidade de realizar esses testes se não houver um testador de usabilidade separado.

- E como os testes de experiência do usuário são realizados especificamente no caso da Smashing Magazine?

- Tudo é muito simples conosco: assim que novas idéias aparecem, reunimos de 5 a 7 pessoas a quem eu pessoalmente atribuo tarefas e conduzo entrevistas.

A tarefa é encontrar informações ou tentar efetuar um pagamento. Eu assisto como eles fazem isso, com o consentimento deles, registro o comportamento e o rosto e, muito, muito lentamente, assisto a cada vídeo. Leva-me uma hora e meia para um vídeo ter uma visão detalhada de como as pessoas se movem, usam o mouse, onde olham, o que percebem e o que não.

Também geramos automaticamente um mapa de calor: onde as pessoas clicam, há algo que elas não percebem. Com base nesses dados, estamos melhorando a interface e fazendo o mesmo uma semana depois. Temos uma pequena empresa, menos de 20 pessoas. Nas empresas maiores, será aproximadamente o mesmo, apenas a diferença será que vários testes serão paralelos ao mesmo tempo.

E monitoramos não apenas o que acontece se você alterar o botão, sua localização ou texto na página. Existem dois tipos de testes: por um lado, testes A / B - botões e outras pequenas coisas. Por outro lado, você pode tentar alterar algo completamente, isso é chamado de teste A / Z. Por exemplo, quando substituímos completamente o design e o testamos.

Pode ter cores semelhantes, tipografia, mas será completamente diferente em termos de organização de informações, layout, com um arranjo completamente diferente de todos os componentes. Se você simplesmente mudar a posição do botão, provavelmente atingiremos um máximo local, uma conversão local, independentemente do KPI. Um design completamente diferente pode permitir que você saia e alcance um nível de conversão completamente diferente, o que é difícil de fazer com pequenas medições locais.

- Você pode dar um exemplo específico quando fez algo pela primeira vez na Smashing Magazine e depois mudou significativamente após o teste?

- Por exemplo, quando eles introduziram uma assinatura paga com diferentes recursos. Tínhamos três planos tarifários, pensamos por muito tempo quanto as pessoas poderiam pagar por cada um deles.

E então testamos e descobrimos que para muitos de nossos leitores esses planos são completamente inadequados. Eles, especialmente as pessoas de grandes empresas, precisavam de um plano anual: para não reportar todos os meses, para onde foram de US $ 7 a US $ 9. As pessoas não conseguiram encontrar o plano anual - apesar de ter sido solicitado, mas simplesmente não conseguiram encontrá-lo. Como resultado, adicionamos o botão correspondente, alteramos um pouco a interface e as pessoas começaram a perceber.



- Vamos para o destino das interfaces móveis. Anteriormente, era possível ouvir sobre como a participação da Internet móvel está crescendo - e o que acontece em 2018, quando as vendas de smartphones param de crescer?

- Em 2018, isso continua. Além disso, eu diria que este é um ano muito importante, porque este ano tivemos muitos pontos de virada.

Não importa o que levamos - varejo, consumo de conteúdo de música e vídeo, até rádio - em quase todos os lugares em que vemos que o tráfego móvel cruza o tráfego de computadores. Eu não diria que o tráfego de computadores está caindo drasticamente, apenas não cresce e o tráfego de dispositivos móveis está crescendo muito.

Agora, o tráfego móvel está chegando à Índia, Ásia, África e América do Sul - há um tremendo crescimento, muito maior do que o que temos agora na Europa ou na América.

E, no final, o tráfego móvel é muito importante, porque pela primeira vez em todos os tempos deste ano, a conversão móvel excedeu o computador. Por muitos anos, os profissionais de marketing disseram que não vale a pena investir no mercado móvel, porque a conversão é pequena. Este ano tudo mudou - agora não há nada mais importante do que o tráfego móvel.

Não se trata apenas de telefones, mas também do Apple Watch, de qualquer outro dispositivo, IoT. Os refrigeradores conectados à Internet também podem exibir algumas informações. Obviamente, também estamos falando de coisas como a interface de conversação e os bots de bate-papo, que são otimizados principalmente para uso móvel.

- Mesmo anos atrás, o primeiro dispositivo móvel (a criação de interfaces principalmente para dispositivos móveis) se tornou a palavra-chave na interface do usuário - e o atual "ponto de inflexão" significa que, para muitas empresas, isso agora está se tornando a principal prática da palavra-chave?

"É." Atualmente, estou trabalhando com uma empresa que pensou seriamente em como eles organizam toda a corporação. Inicialmente, eles ignoraram o mercado móvel, e o desktop existe há 15 anos - é um grande varejista de comércio eletrônico. E de repente um mercado móvel apareceu.

Obviamente, eles fizeram otimização, design responsivo. Isso já é bom, mas ainda existem aplicativos para Android e iOS. Como resultado, verificou-se que a grande maioria dos desenvolvedores e designers trabalhava no site para computador e um pequeno grupo trabalhava no site para celular. Agora eles estão pensando muito sobre o que precisam mudar, porque percebem essa tendência.

O desktop é estável, no caso deles não cresce, mas o mercado móvel e o tráfego estão crescendo muito. Portanto, eles planejam alterar toda a arquitetura para que tenham tudo para começar primeiro com o dispositivo móvel, alguns recursos chegarão primeiro apenas aos dispositivos móveis e depois ao desktop.

Eles tiveram que pensar muito sobre o que isso significa para organizar uma equipe, pois uma equipe pequena agora tem uma responsabilidade muito grande. E eles também pensaram em como mudar para o celular primeiro, não apenas em termos de interfaces, mas também como fazer uma "transformação digital" de toda a organização.

Para eles, como para muitos, é mais provável que nem seja móvel, mas primeiro o conteúdo. É possível organizar informações sobre qualquer formato: relógios, telefones, tablets e assim por diante. É dada mais atenção à organização, filtrando, exibindo informações de forma acessível, para que não sejam demais, para que seja conveniente para uma pessoa usá-las. Novamente, este é o momento em que o teste apropriado se torna muito, muito importante.

- Vale a pena criar interfaces significativamente diferentes para a versão móvel do site e da área de trabalho, ou melhor, algo adaptável às mudanças mínimas?

- Eu acho que há situações em que você precisa ser muito diferente. Por exemplo, houve um projeto da IKEA que permite projetar a "cozinha dos seus sonhos". Esse projeto não pode simplesmente ser “transferido” entre o desktop e os dispositivos móveis, eles têm recursos diferentes. Na área de trabalho, parece um aplicativo de área de trabalho comum e no celular como um aplicativo de AR / VR, onde é possível ver o objeto diretamente à sua frente em 3D. Este é um cenário completamente diferente, aproveitando o dispositivo.

E para sites clássicos, eu diria que a coisa mais simples é criar um site com alterações mínimas. Obviamente, isso não exclui a existência de aplicativos. Além disso, agora com a ajuda do PWA (Progressive Web Apps), é possível tornar o site também um aplicativo que pode ser instalado no nível do sistema. Mas, em geral, para a maioria, seria mais razoável ter um site e uma base de código e usá-lo o máximo possível em diferentes dispositivos.

- A Smashing Magazine também é um aplicativo Web progressivo, certo?

- Sim, você pode usar o site offline, adicioná-lo como um aplicativo, há cache. Mas isso não é nada de especial. E há empresas que estão tentando criar algo como "comércio eletrônico offline", quando uma pessoa pode fazer uma compra offline. Não é tão fácil, mas a idéia é boa, porque se você usar o PWA, terá um desempenho muito bom. Isso significa que você pode fazer rapidamente um pedido (ou pelo menos preparar) um pedido, sem erros e acesso constante ao servidor.

Como fazemos isso, por exemplo, no caso do git, quando escrevi algum tipo de confirmação, e há um push no servidor, mas todas as alterações ocorrem primeiro localmente. A ideia é semelhante e acho que pode funcionar muito bem. Esta é uma grande vantagem do PWA.

- A Smashing Magazine possui estatísticas atípicas dos usuários (por exemplo, os compartilhamentos de navegadores não são distribuídos de maneira semelhante na Internet como um todo), então, gostaria de esclarecer: qual é a sua proporção de visitantes móveis e computadores?

- Há três anos, tivemos 11% do tráfego móvel, agora cerca de 22%. Honestamente, isso é muito pequeno. O fato é que temos artigos muito longos. Lê-los leva de 40 a 50 minutos. Ler muito pelo telefone é bastante difícil. Em média, os sites agora têm muito mais tráfego móvel, mas por causa de nossos recursos, ainda não chegamos a esse ponto.

- Artemy Lebedev criticou as interfaces móveis, dizendo "quanto maior a tela, melhor a interface". Você tem a sensação de que, com a transição para telas pequenas, ficou mais difícil criar um bom design?

- Eu acho que fazer um design bonito, pelo contrário, se tornou mais conveniente. Eu sou um grande fã de qualquer tipo de restrições. Todo projeto precisa de algum tipo de restrição. Ao desenvolver um conceito, muitas vezes tentamos nos forçar a pensar fora das formas usuais. Começamos a projetar e criamos, estabelecendo limites para nós mesmos.

Por exemplo, "neste projeto, não podemos usar mais de duas cores". Isso não significa que usaremos apenas duas cores, mas nos levará a uma solução incomum. Ou dizemos que não usaremos triângulos, círculos e quadrados. E o que podemos usar além disso? O tamanho dos dispositivos móveis é uma grande limitação em si. E isso nos faz pensar em soluções interessantes.

Eu acho que você pode desenhar uma interface bonita em qualquer lugar. Obviamente, dificuldades surgem em algum momento. Por exemplo, os bots de bate-papo não têm componentes visuais em termos de cores ou tipografia, basta enviar o texto. Mas também pode haver beleza nela.

Quanto mais avançamos na direção do relógio ou de pequenos dispositivos ou interface de conversação, mais visibilidade é perdida, apenas a essência permanece. , , , , , . , , , . .

— ? , , , . - ?

— , , . , , . , . , — , , . , . , , , .

, . , . , , .

— , , , ?

— , . IKEA. , WebVR, , - , . , , . , , .

, , , mobile first content first. , desktop last. . , Smashing Magazine . mobile first, 1800 , .

. , . . , mobile first, , . , , mobile , . . mobile first and desktop first.

— «» . «» , . , , UX?

— . , . 2% , «» . 98% , .

, . , , . , «» . .

: Heisenbug ( 6-7 ) Mobius (8-9 ). , , , — .