<figure><img src="image_1.png" /></figure>

# Metodologias Ergonômicas Aplicadas à Plataforma Mobile de E-commerce da Zara

## Ergonomic Methodologies applied to Zara's Mobile E-commerce Platform

### SOUSA, Mariana

Pontifícia Universidade Católica do Rio de Janeiro, Graduanda em Design

e-mail: mmosdev@gmail.com

### RAMALHO, Pedro

Pontifícia Universidade Católica do Rio de Janeiro, Graduando em Design

e-mail: pedroppvramalho@gmail.com

### MONT'ALVÃO, Claudia

Pontifícia Universidade Católica do Rio de Janeiro, Professora Associada do PPGDesign

PUC-Rio, D.Sc. em Eng. de Transportes

e-mail: cmontalvao@puc-rio.br

## RESUMO

A pesquisa busca elucidar o posicionamento do aplicativo de e-commerce da rede de varejo Zara nas questões que envolvem usabilidade e ergonomia, observando aspectos como critérios ergonômicos e arquitetura de informação e aplicando testes de usabilidade. A escolha da empresa Zara se deu por sua relevância internacional no mercado de vestuário, item que consta em segundo lugar entre os mais comprados online no Brasil (CONECTAÍ Express, 2016). Para a realização da pesquisa, foram utilizados os seguintes métodos: análise de usabilidade, arranjo de cartões para obter uma nova arquitetura da informação, análise da tarefa e testes de usabilidade. Como resultado, foram desenvolvidas sugestões de mudanças na interface do aplicativo, considerando as questões ergonômicas levantadas na pesquisa. Tais mudanças foram realizadas com a proposição de um redesenho de interface baseado nos dados coletados por meio das ferramentas utilizadas.

Usabilidade, Aplicativo de E-commerce, Ergonomia, Experiência do Usuário, Arquitetura da Informação.
<figure><img src="image_2.png" /></figure>

ABSTRACT

The research aims to portray the issues found in the e-commerce app from Zara regarding usability and ergonomics, through the appliance of usability heuristics, information architecture and usability tests. Zara was chosen to the research because of its international relevance in fashion market, the second best selling sector online in Brazil (CONECTAÍ Express, 2016). The following methods were used: usability analysis, card sorting in order to obtain a new information architecture, task analysis and usability tests. As a result, interface changes were suggested considering the ergonomic subjects identified through the research. These changes were performed by a redesign of the interface based on the collected data.

Usability, E-Commerce App, Ergonomics, User Experience, Information Architecture.

# 1. INTRODUÇÃO

O e-commerce tem ganhado cada vez mais relevância no mundo. Atualmente, o cliente já espera encontrar o varejista no meio digital (Ebit, 2019), o que explica o fato de a ampliação de serviços de varejo para o meio digital estar sendo efetuada por muitas empresas. Muitas investem não somente em sites como em aplicativos. As vendas do varejo cresceram mundialmente em 2.199 bilhões de dólares em apenas 5 anos (Statista, 2019). No cenário brasileiro, por sua vez, os itens de vestuário se destacam no varejo online como parte do segundo setor mais consumido em junho de 2016 (CONECTAÍ Express, 2016).

A empresa Zara se insere no mercado de e-commerce desde 2010, quando inaugurou lojas virtuais na Espanha, França, Portugal, Itália e Reino Unido (BBC, 2010). Buscando aumentar o impacto de vendas, estreou seu site ao Brasil em março de 2019 como uma estratégia de expansão nesse segmento, o que confirma a tendência de ampliação de serviços online (Exame, 2019). Fundada originalmente na cidade de A Coruña em 1975, por Amancio Ortega, a rede voltada para o público masculino, feminino, adolescente e infantil pertence ao grupo Inditex, que investe no e-commerce desde 2007, inaugurando as vendas online com a empresa Zara Home. A empresa Zara configura-se como a mais lucrativa do grupo Inditex, representando, em 2018, 69% do seu faturamento, o que corresponde a 26,1 bilhões de euros (Exame, 2019). Desse modo, por meio do aplicativo disponível para iOS e Android e do site, a plataforma de e-commerce no Brasil pode aumentar a capilaridade da empresa, disputando consumidores com marcas já presentes no setor como Riachuelo e Renner. Com o uso das ferramentas online, o cliente pode optar por receber a sua compra em casa ou retirar na loja, o que reduz o preço do frete. Em locais como Rio de Janeiro,
<figure><img src="image_3.png" /></figure>

São Paulo, Belo Horizonte e Curitiba, é possível receber o produto no dia seguinte à compra, demonstrando a agilidade nos serviços de entrega da empresa (Exame, 2019).

Por sua relevância no mercado brasileiro e internacional do varejo de roupas, optou-se por investigar como objeto da pesquisa a plataforma *mobile* da Zara, disponibilizada este ano para o público brasileiro.

O objetivo desse artigo, portanto, é analisar o aplicativo da Zara, considerando sua importância para o e-commerce, tratando de questões referentes à usabilidade, experiência do usuário e ergonomia.

## 1.1. Interface do Aplicativo

O aplicativo está disponível para Android e iOS, permitindo que o usuário possa acompanhar as novidades da loja, assim como seus *lookbooks* e campanhas para comprar objetos e roupas de seu interesse. Sua página inicial (Figura 1) conta com uma vitrine similar aos *Stories* do Instagram, em que se disponibilizam as novidades da loja, assim como suas coleções principais. Na região superior da tela, há uma barra de pesquisa e uma sacola de compras, enquanto que na região inferior é possível acessar um menu de coleções e a conta do usuário. Na região central, há um *banner* que dá destaque às coleções de maneira individual. Este *banner* responde a um *scroll* vertical (Figura 2), revelando *banners* das demais coleções. Ao tocar em um *banner* de determinada coleção, é apresentado ao usuário o menu com todas as coleções, porém também um submenu da coleção previamente selecionada.

<figure><img src="image_4.png" /><figcaption>Figura 02 - Menu de scroll vertical</figcaption></figure>

<figure><img src="image_5.png" /><figcaption>Figura 03 - Sacola de Compras</figcaption></figure>

<figure><img src="image_6.png" /></figure>

Fonte das figuras 1 a 3: Os autores. *Print screen* do app da Zara, 2019

Ao tocar em um submenu, o usuário é levado para uma nova página na qual são dispostas todas as peças correspondentes à categoria escolhida, em grupos de quatro peças por vez,
<figure><img src="image_7.png" /></figure>

visíveis mediante *scroll* vertical. Ao tocar em uma roupa, o usuário pode adicioná-la à sacola.

A sacola de compras (Figura 3) contém todas as peças adicionadas pelo usuário e, por meio dela, o usuário é capaz de realizar a compra.

## 2. ANÁLISE DE USABILIDADE

O primeiro passo desse trabalho buscou elucidar o posicionamento do aplicativo de e-commerce da rede de lojas Zara nas questões que envolvem a usabilidade. Foram utilizados para a análise os critérios ergonômicos propostos por Christian Bastien e Dominique Scapin (1993), assim como os componentes de qualidade de J. Nielsen (2003). Por questão de limitação desse documento, será somente apresentada a avaliação do atendimento ou não do *app* a tais aspectos. A análise foi realizada em um aparelho iPhone 7 com o sistema operacional iOS, na versão 12.3.1., no ambiente de uma sala de aula, sem voluntários.

### 2.1. Componentes de Qualidade de Nielsen (1993)

* Learnability. De acordo com a interação primária com o aplicativo, foi possível perceber uma interface relativamente intuitiva. À primeira vista, a funcionalidade com mais destaque é a exploração das diferentes categorias que a loja atende, por meio de banners com fotos chamativas dos públicos de cada categoria unidos ao nome de cada um desses públicos. Alguns desses nomes não foram entendidos, aparentando ser voltados a um público mais específico que já conheceria a nomenclatura das colecções da loja. O uso de palavras em inglês como "Size", "Join Life" e "Dress Time" (Figura 4) também dificulta a learnability, considerando que muitos brasileiros não falam a língua inglesa.

O usuário também pode optar por pesquisar aquilo que busca, por meio de uma barra de pesquisa também chamativa que acompanha o movimento de *scroll* do usuário, sempre se mantendo visível. A paleta de cores deixa claro o que é tocável pela cor preta sobre o fundo branco, ou por meio dos banners e círculos com fotos cuja estética indica a possibilidade de interação. Contudo, há um excesso de menus destinados às mesmas funções, causando uma certa desordem nas informações, o que dificulta o entendimento do usuário a respeito da navegação entre as colecções.

Por outro lado, a tarefa principal do aplicativo de realizar a compra pareceu bastante intuitiva. Bastou adicionar o item desejado à sacola por meio do botão "adicionar" (Figura 5) e tocar no botão da sacola ou no botão "ver" para checar o item recém-adicionado. Apenas
<figure><img src="image_8.png" /></figure>

ao tocar no botão comprar, a loja pedirá para que o usuário crie uma conta ou entre em um login já criado.

<figure><img src="image_9.png" /><figcaption>Figura 05 – Página de adição de item</figcaption></figure>

<figure><img src="image_10.png" /></figure>

Fonte das figuras 4 e 5: Os autores. Print screen do app da Zara, 2019

Essa estrutura é positiva, pois torna possível para o usuário navegar pelas coleções da loja sem que seja necessário ter uma conta, demandando a mesma apenas quando necessário. Tal abordagem evita a desistência de utilizar o *app* antes da possibilidade de navegação. Em parte, a *learnability* foi atendida, pois havia clareza nas áreas que permitiam interatividade, porém não havia clareza no modo de navegação.

* **Eficiência.** O *app* se mostra eficiente nas funcionalidades que se compromete a cumprir: comprar e navegar pelas coleções. Contudo, há uma ressalva quanto à última funcionalidade. Houve o desejo de ordenar os produtos por preço, porém isso não era possível. Tampouco era possível filtrá-los. Na configuração adotada de informações, era possível ver no máximo quatro itens por *scroll* (Figura 6), o que impedia uma visão mais geral e minimizada dos produtos disponíveis. Dessa forma, a eficiência ocorre, porém poderia ser melhorada por meio de alguns ajustes na navegação.

* **Memorability.** Esse aspecto não pôde ser analisado com precisão, pois não houve um período suficiente de tempo entre uma interação e outra. Contudo, pela facilidade alcançada na primeira utilização do aplicativo, pressupõe-se que a facilidade das demais interações seja igualmente alta, atendendo, portanto, ao critério de *memorability*.

* **Erros.** A partir da análise realizada, o usuário pode cometer erros diversos durante uma compra. Para esta análise, foi exemplificado o erro de adicionar um item indesejado à sua sacola. Para corrigir esse erro, o usuário deve tocar primeiramente no botão da sacola. Na tela da sacola, ao tocar no item indesejado não aparecem opções de
<figure><img src="image_11.png" /></figure>

modificar a cor ou mesmo de retirar o item, apenas de adicionar um item igual novamente (Figura 7).

<figure><img src="image_12.png" /><figcaption>Figura 07 – Adição de um item à sacola</figcaption></figure>

<figure><img src="image_13.png" /></figure>

Fonte: Os autores. Print screen do app da Zara, 2019

Desse modo, a resposta do sistema não atende às intenções do usuário de retirar ou modificar o item indesejado da sacola e ainda confunde o usuário, pois este pode pensar que está editando o item previamente selecionado com seu toque, quando, em vez disso, ele está prestes a adicionar um novo item igual, enquanto o anterior continua na sacola inalterado. O mecanismo de retirar um item da sacola disponibilizado pelo aplicativo é o gesto de deslizar com o dedo para a esquerda (Figura 8), seguindo o padrão de cancelamento ou delete de outros apps nativos do sistema iOS, como o Alarme. Erros de conta como o C.P.F., endereço, nome e celular podem ser editados facilmente: basta estar logado na conta. Email e senha exigem um processo mais elaborado. Para erros de compra, o app conta com um chat que possui horário de funcionamento.

<figure><img src="image_14.png" /><figcaption>Figura 08 – Gesto de cancelamento de item</figcaption></figure>

Fonte: Os autores, Print screen do app da Zara, 2019
<figure><img src="image_15.png" /></figure>

* **Satisfação.** O uso da interface não é prazeroso, considerando que determinadas funcionalidades não são oferecidas pelo aplicativo e que a navegação é confusa. Foi passada uma sensação de inconsistência, com possibilidade de melhorias facilmente perceptíveis.

## 2.2. Critérios Ergonômicos por Bastien e Scapin (1993)

Para a segunda parte da análise de usabilidade do aplicativo Zara, utilizaremos os oito critérios ergonômicos propostos por Dominique Scapin e Christian Bastien, em 1993. Apresentam-se, a seguir, somente os comentários sobre o atendimento ou não de cada critério.

* **Condução.** O aplicativo atende a este critério em parte. Ao abrir o aplicativo, nota-se uma mediana condução por parte dos desenvolvedores. A interface apresenta comandos e/ou guias que facilitam a utilização do app. Botões ligados ao fluxo de compra aparecem com mais destaque de cor e tamanho para conduzir o usuário a obter sucesso na função principal do aplicativo: comprar. Contudo, o excesso de menus atrapalha a condução. Para a solução deste problema, recomenda-se a redução do número de menus.

* **Presteza.** O aplicativo atende a este critério em parte. O aplicativo apresenta usabilidade de fácil acesso em alguns momentos, assim como ferramentas que proporcionam um bom diálogo com o utilizador. Ao executar determinadas tarefas, nota-se harmonização entre os comandos. No processo de entrada de dados, o aplicativo deixa claro quais dados faltam ser preenchidos com mensagens e exemplos de como preenchê-los. Contudo, outras tarefas não comportam sentido, como o fluxo de navegação para uma coleção. O usuário tem a opção de utilizar três menus para chegar às coleções. Tocando em uma das coleções, o usuário precisa tocar na tela mais uma vez para selecionar o tipo de roupa que procura antes que comece a ver as roupas (Figura 9).

Essa pausa atrapalha o fluxo de navegação, pois o usuário tem de decidir antes de sequer ver as roupas. Para a solução deste problema, recomenda-se tornar o fluxo de navegação até as coleções fluido e único, com o mínimo de toques possível, com o intuito de trazer clareza, especificação e fácil aprendizado.

* **Agrupamento/ Distinção de Itens.** O aplicativo atende em parte a este critério. Para a solução deste problema, recomenda-se tornar a interface com imagens e textos posicionados e bem organizados, fornecendo ordenação para o usuário. Com uma boa aprendizagem, o agrupamento/distinção de Itens leva a uma boa condução. Quanto ao subcritério Agrupamento/ Distinção de Localização, o app atende a este subcritério em
<figure><img src="image_16.png" /></figure>

parte. A forma como itens (textos, comandos e imagens) são posicionados implica em uma melhor ordenação. Contudo, não é possível organizar os produtos em ordem de preço ou visualizando mais itens por telas, o que restringe o agrupamento por localização. Há também um problema no posicionamento, pois há a repetição de itens em diferentes menus sem um motivo claro, o que dificulta o entendimento. Para a solução deste problema, recomenda-se permitir a organização dos produtos por preço. O mesmo pode ser dito sobre o subcritério *Agrupamento/ Distinção por formato, uma vez que o app apresenta tamanhos e cores distintos para cada classe, ocasionando a clara distinção e compreensão dos comandos pelo usuário*. Contudo, alguns itens aparecem repetidas vezes em diferentes menus (Figura 10), sem um motivo específico para a distinção de menus.

<figure><img src="image_17.png" /><figcaption>Figura 09 – Submenu da categoria “Mulher”</figcaption></figure>

Fonte: Os autores. Print screen do app da Zara

<figure><img src="image_18.png" /><figcaption>Figura 10 – Repetição do item “Dress Time” em dois menus</figcaption></figure>

Fonte: Os autores. Print screen do app da Zara

**Feedback Imediato.** O aplicativo atende a este critério em parte. O aplicativo apresenta fluidez e um bom processamento de dados, gerando confiança por parte do usuário com o sistema utilizado. Contudo, em determinados momentos, ao abrir o aplicativo, não era possível utilizá-lo, pois o carregamento da página não concluía.

**Legibilidade.** O aplicativo atende a este critério. Por tratar-se de um aplicativo de roupas, a interface necessita de um campo despoluído visualmente para que os produtos apresentados chamem a atenção do usuário. Nota-se que a tipografia usada, assim como a cor, o espaçamento e o tamanho de letra facilitam a leitura de informações.

**Carga de trabalho.** O aplicativo não atende a este critério. O aplicativo apresenta informações dobradas, aumentando dessa forma, a carga de trabalho. Há dados repetidos no app, ocasionando confusão no usuário.
<figure><img src="image_19.png" /></figure>

Brevidade. O aplicativo atende em parte a este critério. É necessário dar muitos toques para finalmente ver os produtos disponíveis para a compra. Primeiro é necessário escolher uma coleção e, depois, é necessário escolher o tipo de produto dentro de uma coleção (Figura 12) para poder visualizar os produtos disponíveis. Em relação ao subscritério concisão, o aplicativo atende a este critério, uma vez que apresenta títulos de janela, rótulos e denominações curtas. Já em relação ao subcritério de ações mínimas, o aplicativo força o usuário a dar mais passos do que o necessário. Contudo, as tarefas não chegam a ser numerosas e/ou complexas.

<figure><img src="image_20.png" /><figcaption>Figura 11 – Disposição de itens à venda</figcaption></figure>

Fonte: Os autores. Print screen do app da Zara

<figure><img src="image_21.png" /><figcaption>Figura 12 – Opções de categorias na coleção “Mulher”</figcaption></figure>

Fonte: Os autores. Print screen do app da Zara

Justificativa: Para permitir a realização de uma tarefa, o aplicativo força o usuário a dar mais passos do que o necessário. Contudo, as tarefas não chegam a ser numerosas e/ou complexas.

Densidade Informacional. O aplicativo não atende a este critério. Para o usuário inexperiente, o aplicativo pode dificultar a realização de simples tarefas por apresentar uma interface sinuosa. Para a solução deste problema, recomenda-se fornecer um menor número de dados para simplificar a experiência do usuário com o app. Para tal, deve-se reduzir o número de menus.

Controle Explícito. O aplicativo não atende a este critério. Para que o usuário obtivesse o controle sobre o aplicativo, suas ações deveriam ser previstas pelos desenvolvedores e cada uma delas deveria ser suportada pelo aplicativo. Determinadas organizações de dados personalizadas pelo usuário não são disponibilizadas, invalidando esse critério. A ação de retirada de um item do carrinho tampouco é completamente controlada pelo usuário, pois
<figure><img src="image_22.png" /></figure>

apenas um tipo de navegação para tal propósito é disponibilizado e as tentativas de realizar essa ação de outra maneira resultou em fracasso. Para a solução deste problema, recomenda-se prever ações do usuário e suas diferentes formas de retirada do carrinho, assim como controle da visualização dos itens compráveis. Em relação ao subcritério de *Ações Explícitas*, o app atende a este critério, já que Os dados e ações são processados apenas quando o usuário seleciona comandos que levem a tal processamento. O mesmo ocorre com o subcritério *Controle do Usuário*, uma vez que o aplicativo permite que o usuário insira suas informações apenas quando decide realizar uma compra. Enquanto isso, pode guardar itens em sua sacola sem a obrigação de comprá-los. Portanto, a entrada de dados depende do usuário. O usuário também pode cancelar sua compra em caso de desistência.

**Adaptabilidade.** Ao utilizar o aplicativo da Zara, esse objetivo não foi alcançado por completo, sendo evidenciado em poucas ocasiões. Alguns sistemas de e-commerce permitem a organização dos produtos conforme diferentes ordens e filtros: preço, cor, tipo de produto, público-alvo. No aplicativo da Zara, é possível separar os produtos apenas por algumas dessas categorias ou utilizando palavras-chave pela barra de pesquisa, sem dar possibilidades de separar itens por preço. Entretanto, a adaptabilidade foi percebida quando foi adicionado um item à sacola e havia duas maneiras de acessar a sacola. Por um banner temporário que continha o botão "ver" e pelo botão da sacola. Para solucionar a adaptabilidade, recomenda-se permitir a reorganização dos itens conforme as preferências do usuário, disponibilizando filtros de preço. O aplicativo atende em parte ao subcritério de *Flexibilidade*. Quanto à navegação, este critério não foi atendido, pois não foi fornecida pelo app a opção de configurar as telas e informações conforme os desejos do usuário. Quanto à compra, este critério foi atingido, pois o app permite que o usuário selecione diferentes opções de entrega, troca e devolução do produto comprado, englobando opções relacionadas ao tempo de entrega e ao local de troca. Quanto à escolha do produto, o critério também foi atingido, pois o app fornece ferramentas que auxiliam o usuário a ter controle sobre o produto que está comprando. Dentre essas ferramentas estão opções de tamanho (Figura 13) e caimento aliadas a dados sobre o grau de satisfação de clientes que selecionaram o mesmo produto. O aplicativo pede para que o cliente informe seu peso e altura para trazer dados de outros clientes que compartilham semelhanças de porte físico, ajudando na escolha do melhor tamanho para a compra. Para a solução deste problema, recomenda-se fornecer opção de reconfigurar as telas conforme os desejos do usuário.
<figure><img src="image_23.png" /></figure>

<figure><img src="image_24.png" /><figcaption>Figura 13 – Opções de tamanho de um vestido</figcaption></figure>

Fonte: Os autores. Print screen do app da Zara

**. Experiência do Usuário.** O app da Zara, de um modo geral, atende esse critério. O aplicativo já é relativamente intuitivo e, para usuários que ainda desejem tirar suas dúvidas, há um chat disponível. Quanto aos atalhos para os usuários experientes, há uma barra de busca em que se pode colocar palavras-chave caso já saibam o que procuram e também o ícone da sacola sempre à vista. O *login* também facilita a compra, pois nele as informações do usuário são salvas para uma próxima compra. Portanto, acredita-se que o aplicativo é capaz de atender esse critério.

**. Gestão de Erros.** O aspecto dos erros foi analisado anteriormente pelos conceitos de Nielsen (2003), porém será revisto em mais detalhes neste tópico. Engloba todos os métodos para evitar a ocorrência dos erros e promover sua correção. O aplicativo faz um trabalho razoável na gestão de erros, atendendo em alguns momentos e deixando a desejar em outros. O app da Zara permite que o usuário avalie o melhor tamanho de roupa para si com dados comparativos, evitando que ocorra um erro na escolha e uma consequente troca por insatisfação. Contudo, ao adicionar um item à sacola, o usuário não pode simplesmente tocar no item e editar possíveis erros (cor, tamanho, objeto em si). Para tal, ele deve deletar o item de sua sacola e adicioná-lo novamente, o que pode ocasionar erros. Quanto aos dados da conta do usuário, o *app* fornece guias sobre como devem ser preenchidos os campos de *email*, *sons*, *CPF* e *CEP* com banners inferiores contendo instruções. Caso o usuário preencha alguma dessas informações com erro, o *app* permite que ele salve os demais dados e tente concluir a criação de seu *login*. Ao tentar criar a conta, caso haja uma ou mais informações preenchidas incorretamente, o usuário recebe uma mensagem pedindo para que corrija tais informações sem que as demais informações se percam. Caso o usuário não queira corrigir a informação naquele exato momento e deixe o *app* em
<figure><img src="image_25.png" /></figure>

segundo plano, os dados ainda estarão salvos quando ele retornar ao app. Nessa situação, o app gere os erros com sucesso, pois não obriga o usuário a preencher todas as informações novamente. Para uma melhor gestão de erros, contudo, recomenda-se permitir que o usuário edite o item em sua sacola ao tocar nele, podendo excluí-lo ou reconfigurá-lo. O app é bem sucedido quanto ao subcriterio Proteção a Erros, uma vez que detecta possíveis erros na entrada de dados e, para evitá-los, fornece instruções de preenchimento das lacunas. Já quanto à qualidade das Mensagens de Erros, o app também atende à esse subcritérios, já que na entrada de dados, o app explica exatamente qual foi o erro ocorrido e dá exemplos de como cada lacuna deve ser preenchida, auxiliando o usuário a interagir corretamente com a interface a partir das mensagens. Os avisos são breves, claros e neutros. O aplicativo salva as informações corretas e mostra ao usuário exatamente a informação a ser modificada, evitando que seja necessário reescrever todo o bloco de informações. As correções são simples e exigem pouca navegação. As informações de tamanho, assim como os dados da conta, permanecem salvos, evitando possíveis erros. Com isso, pode-se dizer que o app atende ao subcritério de Correção de Erros.

Homogeneidade / Coerência (consistência).. O app atende a este critério em parte, uma vez que não mantém, em alguns momentos, a mesma linguagem. Os elementos selecionáveis/ tocáveis variam entre textos na cor preta sem preenchimento, textos na cor preta com contorno retangular preto e preenchimento transparente e textos na cor branca com preenchimento retangular preto, além de imagens com texto na cor branca ou preta. Entretanto, outros aspectos são coerentes, como a tipografia, que se mantém nos textos: maiúscula para categorias e minúscula para características dessas categorias. Além disso, os elementos imagéticos se mantêm coerentes em relação ao menu ao qual correspondem. Para o menu horizontal, todos os elementos são circulares com uma descrição posicionada logo abaixo. O menu de *scroll* vertical contém imagens maiores com um texto centralizado sobre elas que proporcione o máximo de contraste possível, para manter a legibilidade. A paleta de cores do app é preta, branca e cinza, e permanece coerente em todas as páginas acessadas. Os botões relacionados ao fluxo de compra são maiores e mais destacados que os demais, o que impele o usuário a facilmente visualizá-los e realizar a ação de compra. Os formatos de preenchimento também são coerentes, assim como as posições dos botões de fechamento e navegação pelas telas. Para a obtenção de uma maior coerência, contudo, sugere-se homogeneizar os elementos textuais tocáveis.

Significado de Códigos e Denominações. O aplicativo da Zara não atende a esse critério porque o aplicativo, por vezes, utiliza termos não muito expressivos para determinados públicos. Exemplos de códigos incompreendidos são as siglas "TRF" e "ZARA SRPLS" e as
<figure><img src="image_26.png" /></figure>

expressões "JOIN LIFE" e "STORIES", que aparecem nos banners fotográficos do scroll vertical na página inicial do app.

A navegação ao selecionar tais banners é confusa e leva a itens variados. Supõe-se que sejam coleções específicas da loja, porém não há nenhum indício evidente que comprove tal suposição. Por não se saber o que irá ser encontrado ao selecionar determinados itens, conclui-se que há uma falha do aplicativo em obedecer a este critério. Alguns outros códigos também causam confusão, como a separação das novidades nas categorias infantil, homem e mulher apenas por fotos correspondentes a cada público, sem que haja uma legenda que indique essa divisão. Outra associação que causa problemas é a associação da palavra "MINI" à foto de um bebê (Figura 14), em que só vendo a imagem o usuário consegue compreender que, ao selecionar tal categoria, irá para a seção de roupas infantis, e assim por diante. Desse modo, não há uma clareza dos códigos do aplicativo.
Para a solução deste problema, recomenda-se renomear certos códigos referenciais para a melhor compreensão do usuário ou fornecer algum tipo de informação extra que o faça compreender do que cada nomenclatura se trata.

<figure><img src="image_27.png" /><figcaption>Figura 14 – Banner da categoria “MINI”</figcaption></figure>

MINI

Fonte: Os autores. Print screen do app da Zara

## Compatibilidade.
Em linhas gerais, o aplicativo atende a tal critério, porque mostra correspondência entre a maneira de realizar uma determinada tarefa e os aspectos psicológicos do usuário que a desempenha. As expectativas e costumes do usuário são respeitados até certo ponto, pois o aplicativo não dá suporte para a realização de determinadas customizações de busca esperadas segundo os costumes do usuário. As informações são apresentadas de maneira utilizável, com ressalvas quanto a determinados códigos não muito claros que foram explicitados no critério anterior. Em resumo, o aplicativo atende ao critério em questão.

## 2.3. Conclusão da Análise de Usabilidade
<figure><img src="image_28.png" /></figure>

O aplicativo possui uma avaliação razoável em termos de usabilidade, obtendo sucesso em realizar suas principais funções. Necessita de alguns ajustes de nomenclaturas referenciais, coerência nas informações, opções de organização dos produtos e maior controle do usuário.

### 3. APLICAÇÃO DA TÉCNICA DO ARRANJO DE CARTÕES (CARD SORTING)

Para explorar os aspectos da arquitetura da informação do no aplicativo da Zara, foi realizada a aplicação da técnica de arranjo de cartões (card sorting), com 5 pessoas. Com a aplocação da técnica foi possível identificar padrões nas sugestões de mudanças para a interface. Na primeira aplicação da técnica foram sugeridas apenas alterações pontuais na estrutura de informações proposta pelo aplicativo. Em seguida, foi apresentada uma estrutura inicial a partir da qual o usuário poderia alterar, remover ou adicionar categorias. Por conta dessa estrutura inicialmente definida, não houve a iniciativa de reorganizar todas ou a maior parte das informações por parte do voluntário, o que resultou em poucas alterações na estrutura.

Por essa razão, foi decidida uma mudança na maneira de aplicar a técnica, passando para o *card sorting* aberto, de modo a dar mais liberdade às pessoas na organização de informações e promover resultados mais completos. Com isso, a segunda dinâmica foi realizada da seguinte maneira: foram espalhados cartões aleatoriamente sobre a mesa.
Estes cartões continham os nomes das categorias já propostas pelo aplicativo. O voluntário era orientado a organizar tais cartões da forma que fizesse sentido para si, podendo adicionar, retirar ou renomear cartões de sua diagramação. Por conta do fato de essa segunda abordagem permitir uma maior liberdade, os resultados foram mais completos e captaram a lógica de organização de informações dos voluntários, redefinindo toda a arquitetura de informação do aplicativo.

O segundo indivíduo a participar da dinâmica, por exemplo, optou por organizar os cartões por coleções (Figura 16).

Nas Figuras 15 a 17, os cartões em amarelo correspondem a novos cartões sugeridos pelo usuário, enquanto os azuis representam as categorias pré-definidas.
<figure><img src="image_29.png" /></figure>

<figure><img src="image_30.png" /><figcaption>Figura 15 – Arranjo de Cartões Fechado (voluntário 1)</figcaption></figure>

<figure><img src="image_31.png" /><figcaption>Figura 16 – Arranjo de Cartões Aberto (Voluntário 2)</figcaption></figure>

Fonte: Os autores, 2019

Na terceira aplicação (Figura 17), obteve-se uma divisão das informações por páginas. Cada cartão de maior tamanho no esquema abaixo representa uma das páginas sugeridas pelo voluntário. A partir dessas páginas, as informações seriam apresentadas em subcatgorias. Já na aplicação com os 2 ultimos voluntários (figura 18 e 19), obteve-se uma divisão bastante sucinta de categorias, em que se retirou a maior parte delas e se manteve apenas aquilo que se considerava essencial por cada voluntário.

<figure><img src="image_32.png" /><figcaption>Figura 17 – Arranjo de Cartões Aberto (Voluntário 3)</figcaption></figure>

Fonte: Os autores, 2019
<figure><img src="image_33.png" /></figure>

<figure><img src="image_34.png" /><figcaption>Figura 18 – Arranjo de Cartões Aberto (Voluntário 4)</figcaption></figure>

Fonte: Os autores, 2019

<figure><img src="image_35.png" /><figcaption>Figura 19 – Arranjo de Cartões Aberto (Voluntário 5)</figcaption></figure>

Fonte: Os autores, 2019

A partir dos resultados da aplicação da técnica de *card Sorting*, concluiu-se que havia padrões de mudanças que precisavam ser tomadas. Foram elas: a) Alterar a nomenclatura *Mini* para "Bebê" ou excluir essa categoria; b) Agrupar as novidades em apenas um local; c) Agrupar coleções sazonais em uma aba de coleções; d) Permitir a reorganização das peças à venda conforme as preferências do usuário; e) Permitir que o usuário editasse o item que estava na sua sacola ao tocar nele; f) Retirar os diversos menus com opções iguais, reduzindo a apenas um.

Considerando tais alterações e os esquemas organizados pelos voluntários, sugeriu-se uma nova arquitetura de informação do aplicativo da Zara (Figura 20), obtido a partir de uma dinâmica de *card sorting*, capaz de agrupar as informações em setores distintos, sem repetições.

<figure><img src="image_36.png" /><figcaption>Figura 20 – Solução Proposta de Arquitetura da Informação</figcaption></figure>

Fonte: Os autores, 2019
<figure><img src="image_37.png" /></figure>

## 4. ANÁLISE DA TAREFA

Nesta etapa foi realizada a Análise da Tarefa, que consiste na identificação do passo a passo e dos recursos necessários para que uma determinada tarefa seja realizada com sucesso. Sendo assim, selecionamos para análise a principal tarefa do aplicativo: a compra de uma peça de roupa. Neste caso, optamos por representar o fluxo de compra de um vestido vermelho liso vibrante de comprimento longo ou midi, para especificar nosso campo de pesquisa e possibilidades. A análise de tal tarefa está representada por meio de um fluxograma funcional ação-decisão, montado a partir da interação com um dispositivo iPhone 7 com o sistema operacional iOS, na versão 12.3.1.

A análise da tarefa permitiu determinar as ações que formariam o fluxo esperado de uso do aplicativo para a realização de uma compra. Com esse material, seria possível planejar testes de usabilidade para confirmar a suposição de fluxo levantada inicialmente.

## 5. PLANEJAMENTO DOS TESTES DE USABILIDADE

Como cerne do processo investigativo desta análise, foi selecionada a experiência do usuário na busca e compra de um determinado produto no aplicativo de e-commerce da Zara. Para entender melhor a interação do usuário com o app, foi montado um teste de usabilidade, que consiste em três etapas: perguntas de perfil, execução da tarefa observada e questionário. Com tais etapas, é possível traçar de antemão os voluntários para o teste adequados ao público do aplicativo, realizar as tarefas apenas com aqueles que atendam a esse perfil e, por fim, produzir as considerações finais de acordo com as respostas ao questionário. O teste foi pensado para ocorrer na presença de três pessoas. Uma é responsável por explicar do que se trata o teste, qual o seu objetivo e qual tarefa deve ser desempenhada. Esta pessoa também é responsável por apresentar o segundo integrante, que terá uma atuação mais silenciosa, voltada a anotar observações durante o teste. Por fim, há o voluntário, que deve pertencer ao público alvo do aplicativo para que sejam obtidos resultados contundentes. O modo de realização dos testes de usabilidade será descrito a partir dos pontos numerados abaixo.

### 5.1. Equipamento e Sistema Operacional

Os testes foram realizados em uma sala de aulas na PUC Rio, com pessoas na faixa dos 18 a 30 anos de idade. O equipamento selecionado para a realização do teste foi um iPhone 7 com o sistema operacional iOS, na versão 12.3.1. O aparelho celular estava em modo silencioso, com acesso à internet, pois o aplicativo da Zara necessita de acesso à internet
<figure><img src="image_38.png" /></figure>

para carregar os produtos. Um caderno foi selecionado como instrumento para registrar as informações. O teste foi realizado na presença de dois mediadores, um responsável por orientar o voluntário e outro por fazer anotações.

## 5.2. Cenário Apresentado

Foi apresentado às voluntárias do gênero feminino o seguinte cenário:

"Uma amiga próxima está prestes a se casar e convidou você para ser sua madrinha. Pediu a todas as madrinhas para que fossem com vestido vermelho liso vibrante de comprimento longo ou midi. Disse que no aplicativo da Zara existem coleções com roupas festivas em tons de vermelho vibrante que gostou e sugeriu que você comprasse na loja."

No caso dos voluntários do gênero masculino, o cenário foi apresentado da seguinte forma:

"Uma amiga próxima está prestes a se casar e convidou sua namorada para ser sua madrinha. Pediu a todas as madrinhas para que fossem com vestido vermelho liso vibrante de comprimento longo ou midi. Mas sua namorada está sem tempo, e pediu para você escolher e comprar um vestido para ela. Disse que no aplicativo da Zara existem coleções com roupas festivas em tons de vermelho vibrante que gostou e sugeriu que você comprasse na loja."

## 5.3. Roteiro do Teste

Para a realização do teste, foi elaborado um roteiro dividido em 3 partes que correspondem às etapas do teste, descritas abaixo.

As instruções iniciais tiveram o objetivo de informar o voluntário sobre o motivo da realização do teste e orientá-lo sobre o cenário apresentado: a). Explicar motivo e objetivo do teste; b). Perguntar se o voluntário costuma comprar online; c). Perguntar se o voluntário utiliza aparelhos Android ou iPhone; d). Instruir o voluntário sobre o cenário de uso; e). Instruir o voluntário a narrar suas ações em voz alta (para adquirir uma visão sobre as percepções do usuário sobre as ações que realiza no app).

Após a aplicação do teste de usabilidade foi questionado ao voluntário se sentiu alguma dificuldade com o sistema e se tinha alguma observação a fazer sobre o app ou sobre o teste.

Para o registro das informações, foi anotado, para cada voluntário, todos os passos da realização da tarefa proposta e observações extras feitas ao final do teste, assim como as respostas às perguntas realizadas.
<figure><img src="image_39.png" /></figure>

## 6. RESULTADO DOS TESTES DE USABILIDADE

Os testes de usabilidade foram realizados com um grupo de 4 pessoas: três mulheres e um homem. Todos completaram a tarefa prevista. Analisando os testes, pôde-se perceber o fluxo de busca mais comum dos usuários: a barra de pesquisa. Nesta seção, as observações se subdividem por cada voluntário analisado.

... A primeira voluntária não apresentou problemas ao utilizar o aplicativo da Zara. Durante o teste, notou-se que a primeira ferramenta escolhida pela voluntária para chegar ao produto foi a barra de pesquisa, localizada na parte superior esquerda do *app*. Ao final do teste, perguntou-se sobre a possibilidade de aplicar outro método para realizar a compra do produto. Contudo, a voluntária argumentou que, por ser um produto específico, o percurso escolhido por ela seria mais acessível e rápido.

... A segunda voluntária apresentou dificuldades ao utilizar o aplicativo da Zara. Ao inicializar o *app*, observou-se um certo desconforto durante a tentativa de chegar ao produto final. Seu primeiro passo no teste foi usar a barra de pesquisa, localizada na parte superior esquerda do *app*. Teve de reutilizar a barra de pesquisa algumas vezes, porque o sistema não possuía preparo para corrigir deslizes como erros de digitação e sugerir buscas a partir desses erros. Ao final do teste, perguntou-se sobre a possibilidade de aplicar outro método para realizar a compra do produto. A voluntária argumentou que, apesar de seus esforços, não sentiu facilidade em executar certos comandos, gerando um *feedback* negativo para o fluxo de compra *online*.

... A terceira voluntária não apresentou problemas ao utilizar o aplicativo da Zara. Por realizar compras *online* pelo *site desktop* da Zara, manusear o sistema não ocasionou nenhuma dificuldade. A voluntária não obteve complicações desde a inicialização até à compra do produto.

... O quarto voluntário apresentou problemas ao utilizar o aplicativo da Zara. Este, em especial, aplicou operações similares a outros voluntários, porém, ao contrário dos demais, demorou muito para chegar ao produto final, por conta de erros e imprevistos até a realização da compra. Argumentou que poderia estar sendo filmado ou gravado por voz, visto que todas suas buscas apresentavam apenas soluções para o público masculino, como camisas e calçados masculinos, e não para mulheres, apesar de suas pesquisas serem sempre vestidos.

Esse teste gerou um questionamento sobre a invasão de privacidade do aplicativo, pois o comportamento do sistema gerou indícios de espionagem e reconhecimento facial.
<figure><img src="image_40.png" /></figure>

## 7. SOLUÇÕES PARA O APLICATIVO

A partir da análise dos testes de usabilidade e das análises feitas nas etapas anteriores, foi possível chegar a algumas soluções para uma melhora no desempenho ergonômico do aplicativo. Desse modo, foram elaboradas três propostas, apresentadas a seguir.

**Proposta 1.** A primeira solução se deu na criação de *tags* para auxiliar na busca de determinadas compras (Figura 21). Adicionamos também três setores simultâneos (infantil, homem e mulher) para que todos possam ter a oportunidade de procurar produtos voltados ao setor que desejam. Com essa mudança, há a intenção de reduzir o tempo e o número de buscas, para que a chegada do usuário até o produto seja mais rápida.

**Proposta 2.** A segunda sugestão se baseia na mudança de posicionamento de determinados botões para simplificar a interface do *app* (Figura 22). O menu buscar e a sacola, agora estão posicionados no inferior da tela, para facilitar o clique por estarem mais próximos dos dedos. Também houve a criação do botão "meu perfil", que corresponde à conta do usuário. Além disso, retiramos o menu "coleção", por ser um menu com informações repetidas que já constam em outras áreas do aplicativo.

**Proposta 3** Na terceira solução (Figura 23), foram retiradas as imagens que correspondiam ao menu horizontal do aplicativo, deixando apenas texto. Essa mudança foi realizada com o intuito de deixar o aplicativo com uma interface mais limpa, sem informações desnecessárias que pudessem confundir o usuário. Desse modo, há a intenção tornar o menu horizontal mais acessível ao usuário, pois no teste de usabilidade ele não foi utilizado.

<figure><img src="image_41.png" /><figcaption>Figura 22 – Proposta 2</figcaption></figure>

<figure><img src="image_42.png" /><figcaption>Figura 23 – Proposta 3</figcaption></figure>

<figure><img src="image_43.png" /></figure>

Fonte: Edição por Pedro Ramalho, 2019
<figure><img src="image_44.png" /></figure>

## 8. ATUALIZAÇÃO DO APLICATIVO

Após a realização das propostas de mudança na interface do aplicativo da Zara, coincidentemente houve no mês de junho uma atualização do sistema que acatou algumas das sugestões propostas. Primeiramente, houve a retirada dos diversos menus de novidades (Figura 24) presentes no menu horizontal composto por formas circulares, que havia sido um ponto de crítica apontado no presente trabalho. Além disso, houve a adição de *tags* de filtros para a busca de produtos, separados por tendências, evidenciados em acesso ao aplicativo realizado em setembro (Figura 25).

<figure><img src="image_45.png" /><figcaption>Figura 24 – Atualização do Aplicativo</figcaption></figure>

Fonte: Os autores, *Print screen* do app da Zara (jun. 2019).

<figure><img src="image_46.png" /><figcaption>Figura 25 – Atualização do Aplicativo</figcaption></figure>

Fonte: Os autores, *Print screen* do app da Zara (set. 2019).

## 9. CONCLUSÃO

A análise do aplicativo da Zara permitiu a percepção de diversos pontos que necessitavam de ajustes. As propostas apresentadas como solução foram formuladas inteiramente com base nos métodos aplicados, gerando possibilidades de alterações. Algumas delas, encontradas durante a pesquisa, coincidentemente foram aplicadas em uma atualização do aplicativo. Destacam-se entre as mudanças a adição de filtros de seleção de produtos, a retirada de alguns itens do menu "coleção" e a substituição dos três menus de "novidades" por apenas um.

Desse modo, percebe-se o quão relevantes são os métodos de pesquisa desempenhados para descobrir falhas no aplicativo. Identificando tais falhas, é possível aperfeiçoar o
<figure><img src="image_47.png" /></figure>

sistema para que este cumpra os critérios ergonômicos e atenda a seus usuários de
maneira adequada.

Conclui-se com essa pesquisa que é imprescindível considerar as áreas de Ergonomia e Interação Humano-Computador ao realizar um projeto, pois os métodos por elas oferecidos tornam possível gerar um produto condizente com as necessidades e expectativas do usuário. Por meio da aplicação das ferramentas de análise oferecidas, gera-se um *design consciente* do consumidor, característica fundamental para o funcionamento de um *e-commerce*.

10. REFERÊNCIAS BIBLIOGRÁFICAS

CAESAR, Julia. Zara launches online retail store. BBC News, [S. l.], 2 set. 2010. Business, .
Disponível em: https://www.bbc.com/news/business-11155437. Acesso em: 14 set. 2019.
CONECTAÍ EXPRESS (Brasil). 90% dos internautas brasileiros costumam fazer compras
online. [S. l.]: IBOPE Inteligência, 25 ago. 2016. Disponível em:
http://www.ibopeinteligencia.com/noticias-e-pesquisas/90-dos-internautas-brasileiros-
costumam-fazer-compras-online/. Acesso em: 29 ago. 2019.

EBIT (Brasil); NIELSEN HOLDINGS PLC. Webshoppers. [S. l.]: Ebit, 1. sem. 2019.
Disponível em: https://www.ebit.com.br/webshoppers. Acesso em: 5 set. 2019.

GLOBO (Brasil). Gigante do varejo físico, Zara passa a vender pela internet no Brasil: E-commerce da marca estreia no dia 20 de março, atendendo todo o país. Globo: Época Negócios Online, [S. l.], 8 mar. 2019. Economia & Negócios. Disponível em: https://epocanegocios.globo.com/Empresa/noticia/2019/03/gigante-do-varejo-fisico-zara-passa-vender-pela-internet-no-brasil.html. Acesso em: 14 set. 2019.

INDITEX. Inditex: How we do Business. [entre 2017 e 2019]. Disponível em: https://www.inditex.com/en/how-we-do-business/our-model/stores. Acesso em: 4 set. 2019.
NASCIMENTO, Rafael Moraes do. E-COMMERCE NO BRASIL: PERFIL DO MERCADO E DO E-CONSUMIDOR BRASILEIRO. Orientador: Prof. Dr. José Mauro Gonçalves Nunes.
2011. Dissertação (Mestrado em Gestão Empresarial) - Escola Brasileira de Administração Pública e de Empresas, FGV, Rio de Janeiro, 2011. Disponível em: https://bibliotecadigital.fgv.br/dspace/handle/10438/8182. Acesso em: 29 ago. 2019.

NIELSEN, Jakob. Usability Engineering. San Francisco, CA, USA: Morgan Kaufmann Publishers Inc., 1993. Acesso em: 06 abr. 2019.

OLIVEIRA, Carolina. Zara estreia e-commerce no Brasil e acirra disputa com Renner e Riachuelo: Exame: Negócios, [S. l.], 20 mar. 2019. Economia & Negócios, p. B1. Disponível em: https://exame.abril.com.br/negocios/zara-estreia-venda-online-no-brasil-e-acirra-disputa-com-renner-e-riachuelo/. Acesso em: 6 set. 2019.
<figure><img src="image_48.png" /></figure>

SCAPIN, D. et. al. Critérios Ergonômicos. 1993. Disponível em:

http://www.labiutil.inf.ufsc.br/CriteriosErgonomicos/LabIUtil2003-Crit/100conduc.html.

Acesso em: 06 abr. 2019.

STATISTA. Retail e-commerce sales worldwide from 2014 to 2023 (in billion U.S. dollars).

[S. l.]: Statista, 30 ago. 2019. Disponível em:

https://www.statista.com/statistics/379046/worldwide-retail-e-commerce-sales/. Acesso em:

4 set. 2019.

ZARA (Brasil). Empresa. [S. l.], [2018 ou 2019]. Disponível em:

https://www.zara.com/br/pt/z-company-l1391.html. Acesso em: 29 ago. 2019.

AGRADECIMENTOS

À PUC-Rio e ao Congresso Internacional de Ergonomia e Usabilidade de Interfaces e Interação Humano-computador, pois nos deram a oportunidade de realizar este trabalho. A Deus, por nos prover energia, prudência e bênçãos neste ciclo caminhado. Aos nossos pais, por toda a orientação que nos deram durante nossas vidas para que seguíssemos caminhos positivos para nossa vida e pelo apoio ao longo do desenvolvimento deste projeto. Aos nossos amigos e companheiros, por estarem presentes em cada momento de incerteza, fornecendo suporte e acreditando em nosso potencial. Aos voluntários que se dispuseram a participar dos testes e arranjos de cartões, pois, sem eles, não teria sido possível chegar ao resultado obtido.