Gerando ícones para e-commerce

Transcrição

1 Gerando ícones para e-commerce Celso Luiz de Souza, Luiz Carlos Bambirra Torres, Felipe Castanheira Morais, Cayley Guimarães Centro Universitário de Belo Horizonte UNIBH - DCET Av. Prof. Mário Werneck, Estoril Belo Horizonte MG - CEP: {celsols,profcayley}@yahoo.com.br,{luizbambirra,felipeshaman}@gmail.com Abstract: The use of tecnology, on the information society, is fundamental on all human activities. The computer, and the internet, it's main symbol, constitute the new spaces of realizations, as is the online shopping transactions. The appropriate use of metaphors and significative and identifiable icons can reduce the complexity, increasing the usability and must be used when projecting e-commerce websites. This paper studies the dificulty of the brazilian users with the identification of icons related to e-commerce because of the lack of usability; stabilish a way to represent this necessities in pratical symbols, testing them, showing the most significative metaphors whose icons were tested with users to decide a group. Keywords: usability, e-commerce, icons Resumo: Na nova Sociedade da Informação e do Conhecimento, o uso das tecnologias permeia todas as atividades humanas. O computador, e a Internet, seu símbolo mais visível, constituem os novos espaços de realizações, entre elas as transações comerciais. O uso apropriado de metáforas e ícones significativos e identificáveis pode reduzir a complexidade, aumentando a usabilidade, e devem ser usados ao se projetar sites de e-commerce. Este trabalho estuda as dificuldades dos usuários com a identificação de ícones ligados ao e-commerce brasileiros causadas pela falta de usabilidade; e estabelece uma forma de representar estas necessidades em símbolos identificáveis, testando-os. Apresentam-se as metáforas mais significativas, cujos ícones foram testados com usuários para se determinar um conjunto. Palavra-chave: usabilidade, e-commerce, ícones 1. Introdução A revolução provocada pelas novas Tecnologias de Informação e Comunicação (TICs) transformou a sociedade em Sociedade da Informação e do Conhecimento, que se caracteriza por novas formas de se realizar as atividades humanas, dentre elas o comércio. A Internet é o expoente mais visível desta nova sociedade, e se apresenta como o canal por excelência para as relações de trocas comerciais (Sorj, 2003). A cada dia cresce o número de sites de comércio eletrônico, ou e-commerce, e cresce também a quantidade de usuários que deles se valem para comprar os mais diversos produtos e serviços, tanto físicos (CD s, livros, computadores etc.) quanto virtuais (música, filme, consultorias, etc). Para que tenham sucesso os sites de e-commerce devem apresentar uma interação e interface para o usuário, que permita fazer uma mediação entre o usuário e o sistema

2 computacional, permitindo assim, a integração entre eles. O sistema computacional funciona a base de 0 s e 1 s, matemática e lógica computacional; já os humanos se valem de palavras, conceitos, imagens, associações, etc. Esta tradução que a interface deve fazer é, portanto, semântica de significados e interpretações, com o objetivo de facilitar a vida do usuário, sob pena da comunicação não ocorrer. O sistema de e-commerce deve apresentar-se ao usuário em uma linguagem que esse compreenda, e isto pode ser feito através de ícones e metáforas identificáveis. Pois, se o usuário não compreender o sistema e não souber usá-lo, de nada adianta um sistema eficiente. A falta de usabilidade impede o sucesso do site de e-commerce (Pio & Guimarães, 2006). Este trabalho foi realizado em várias partes, adaptando os passos do processo de construção de metáforas proposto por Madsen (1994) e Rocha & Baranauskas (2003): Levantar, a partir dos estudos anteriores, as necessidades dos usuários em sites de e- commerce; Estabelecer metáforas e ícones que atendam a essas necessidades, minimizando as dificuldades; Avaliar os ícones e metáforas propostos, com o objetivo de obter um denominador comum. 2. E-commerce: Interface, Usabilidade, Ícones e Metáforas Para se fazer entender pelo usuário, os Sistemas de Informação, entre eles os de e- commerce, se valem de metáforas, que são o idioma essencial da interface gráfica da Internet; o uso generalizado de ícones revolucionou o modo como os seres humanos usam os computadores, incluindo neste novo uso os próprios sites de e-commerce. Criar metáforas para novas tecnologias faz parte da história humana: as ferrovias já foram comparadas a serpentes de fumaça, e o sistema ferroviário a artérias que percorriam o espaço físico. O termo computador também se referia aos humanos que trabalhavam com cálculos e números. 2.1 Interface Por sua vez, pode-se imaginar que, para o usuário, a interface é o sistema, em que tudo no monitor são superfície e símbolo, e estes são os elementos com os quais ele lida. Esses elementos são decifrados, na prática, por sua conta e risco. Ao se trabalhar com metáforas, busca-se apresentar ao usuário semelhanças entre elementos do computador e outras realidades que lhes sejam familiares para facilitar este processo de entendimento e uso de um sistema, centrando-o no usuário (Laurel, 1990). Quando ocorre um desentendimento, os erros são evidências de uma quebra na interpretação dos significados. Surge então a noção de metáforas de interface (Carroll & Moran, 1996) (Wozny, 1989) que fornecem aos usuários um modo de prevenir tais enganos. 2.2 Usabilidade De acordo com Scapin (1993) usabilidade envolve a habilidade do sistema em permitir que seus usuários sejam capazes de atingir facilmente seus objetivos de interação com o sistema. Em suma, é um usuário usando um sistema para realizar uma tarefa, para ele, problemas de usabilidade estão diretamente relacionados à interface. Segundo Carroll & Moran (1996) as principais características necessárias a um sistema para apresentar uma boa usabilidade são: facilidade de uso, fácil entendimento de como

3 operá-lo para a execução da tarefa desejada, sucesso na execução das tarefas, percepção dos erros e recuperação dos mesmos. O ser humano é o objetivo principal de qualquer sistema, e, portanto, uma boa interação entre o Sistema de Informação e o usuário é de essencial. O design de um sistema deve levar em conta: a tarefa, o usuário que vai executar a tarefa e o contexto social do mesmo, para que a interação seja a mais adequada possível (Sorj, 2003). 2.3 Metáforas e ícones Os sites de e-commerce usam metáforas (semelhanças entre elementos) e ícones (figuras) para facilitar a vida do usuário (Carroll & Moran, 1996). Estes elementos servem para realizar tarefas, conferir funções, fazer pedidos, especificar serviços, entre outras. Um exemplo muito comum deste uso em sites de e-commerce é o ícone carrinho de compras para guardar os produtos selecionados para serem comprados. No entanto, transmitir o significado desejado não é tarefa fácil e nem sempre ocorre com os ícones (Rogers, 1986). Norman, (2004) alerta que um ícone que não é bem interpretado pode levar o usuário a achar que o sistema tem funções que na verdade não estão lá. E, quando este símbolo é acessado por usuários de culturas diferentes, a atribuição de significado pode ser mais diversa ainda, este tipos de problemas afetam o uso e, conseqüentemente, a compra/venda (Yuki, et al. 2007). Como já foi dito, o ser humano pensa através de conceitos. E as metáforas permeiam o nosso cotidiano e a nossa linguagem (Erickson, 1990). Gastamos dinheiro, nos irritamos com o trânsito engarrafado, etc. Estas metáforas nos auxiliam na atribuição de significados ao novo (computador), nos ajudam a construir modelos mentais sobre o computador, permitindo-nos usá-lo com base em conhecimentos prévios, concretos para dar estrutura a conceitos abstratos. Neste aspecto, (Neale & Carroll, 1997) alerta que as metáforas sugerem o relacionamento entre dois domínios (usuário e computador). As metáforas podem ser classificadas como: estruturais (ao compararem um conceito a outro); orientacionais (com função de orientação espacial); convencionais (baseadas no que já é intuitivo); ou ontológicas (que relacionam conceitos com objetos). A imagem que representa o conceito de maneira não-verbal pode ter características de semelhança (pictografias), analogia (símbolo) ou costume social (signo) (Standing, et al. 1970). Estas últimas metáforas, que nos fornecem interfaces pictográficas (ícones ou símbolos), têm como objetivo tornar o software mais amigável. Elas podem reduzir complexidade e reduzir a carga mental do usuário (Lodding, 1983), podem representar comandos, funções ou estados do sistema sendo que o ícone mais efetivo é o que mapeia o objetivo diretamente (Rogers, 1986), são mais facilmente reconhecidos e lembrados (Standing, et al. 1970). 3. Construção de conjunto de Ícones e Metáforas Erickson (1990) propõe um processo que se inicia pelo entendimento da funcionalidade do sistema, identificar as partes mais difíceis para o usuário e finalmente, gerar e testar possíveis candidatas que ajudem o usuário a superar as dificuldades. As candidatas podem ser retiradas da própria dificuldade, e devem expressar uma funcionalidade do sistema a partir da estrutura (para o usuário pensar no sistema), da aplicabilidade (se é

4 relevante ao problema), do poder representativo (imagens e palavras específicas), da adequação ao uso e ao usuário (cultura e entendimento da metáfora). Um processo semelhante é proposto por (Madsen, 1994, pp ), composto também de três fases: I) Geração de metáforas: Observar como os usuários entendem os sistemas; Construir sobre metáforas já existentes; Usar artefatos predecessores; Notar metáforas já implícitas no problema; Procurar eventos do mundo real que exibam aspectos chave. II) Avaliação de metáforas candidatas ao design: Escolher uma metáfora com estrutura rica; Avaliar a aplicabilidade da estrutura; Escolher uma metáfora adequada ao usuário; Escolher uma metáfora direta; Não necessariamente incorporar a metáfora ao design final. III) Desenvolvimento do sistema: Elaborar o conceito principal; Procurar novos significados para o conceito; Reestruturar a nova percepção da realidade; Elaborar suposições tornando explícito o que a metáfora esconde ou salienta; Relatar sobre metáfora, falando do domínio alvo como se ele fosse o domínio fonte; Identificar as partes não usadas e Gerar situações de conflitos. 4. Contexto do e-commerce As estatísticas sobre o universo de empresas de e-commerce no Brasil são ainda dispersas e desencontradas, mas apontam para um volume crescente de transações, de usuários e de faturamento. Segundo Massa (2006) o faturamento no primeiro semestre de 2006 foi de R$ 3,9 bilhões, comparados com R$ 2,5 bilhões do mesmo período de O número de usuários em 2005 foi de 4,7milhões. A idade destes usuários: de 18 a 24 anos (14%), de 25 a 34 anos (34%) e de 35 a 49 anos (37%). CDs e DVDs corresponderam a 21%, das compras, livros (18%), eletrônicos (9%), saúde e beleza (8%), Informática (7%) e outros (37%). Já segundo Pallota (2007), a projeção para o faturamento de 2007 é de R$ 17,4 bilhões, comparados com R$ 13, 3 bilhões de Quanto à previsão de compras nos próximos 12 meses, 98% de compradores pretendem voltar a comprar. E 80% de NÃO compradores pretendem comprar nos próximos 12 meses. Conforme já dito, embora desencontrados, os números mostram a importância crescente de negócios realizados em sites de e-commerce. E cabe aos desenvolvedores destes Sistemas de Informação torná-los cada vez mais atrativos para aumentar ainda mais as transações. Parte deste trabalho passa pela usabilidade desses sites. 5. Metodologia e testes Para este estudo utilizamos voluntários que tem conhecimento em informática. Foram formados dois grupos distintos e denominados A e B, sendo A voluntários com idade média de 26 anos que usam a internet com freqüência diária e o grupo B voluntários com idade média de 28 anos que usam a internet pelo menos três vezes na semana. Ambos são compostos por 30 voluntários alunos do Centro Universitário de Belo Horizonte. Este grupo de voluntários pode induzir a um viés no resultado da pesquisa, por serem alunos de um curso de computação. Mas, a comprovação da falta de usabilidade para um grupo com habilidade computacional acima da média pode até mesmo reforçar a tese defendida, uma vez que, se os ícones não são facilmente identificáveis para eles, provavelmente terão ainda menos significado para um usuário com menos experiência. Os testes foram realizados em duas etapas: identificação dos problemas e testes de possíveis soluções para o problema.

5 5.1.1 Etapa I - Identificação dos problemas Ao grupo A foi solicitado que entrassem em dois grandes sistemas de e-commerce brasileiro e que realizassem as seguintes tarefas: a) Localizar um produto a ser comprado; b) Após a seleção do produto desejado, adicionar outros à sua lista de pedidos); c) Quanto ao envio do seu pedido? É necessário confirmar o status do envio?; d) Sobre a segurança do site? Você deseja ver a política de segurança do site?; e) Dúvidas quanto ao pagamento? Procure pela função de confirmação de pagamento; f) Ainda não satisfeito, você deseja enviar um com essas dúvidas; g) Você deseja atualizar suas informações e deseja receber novas informações sobre o seu relacionamento com o site. Nestas tarefas os usuários deveriam verificar a usabilidade dos sistemas e ao final deveriam opinar quanto à usabilidade dos sites, nas seguintes categorias: Design, Aparência, Navegabilidade, Qualidade da informação e Consistência de funções. Foi usada uma escala do tipo Likert (Padilha, 2004), para que os pesquisados dessem notas: 1 muito ruim; 2 ruim; 3 regular; 4 boa, mas precisa melhorar; 5 boa Resultados e análise da Etapa I Nesta etapa observamos o tempo de resposta para cada tarefa e a usabilidade, conforme descrito nas Tabelas 1 e 2. Site 1 Site 2 Tarefa Tempo resposta Confuso Não completaram Ilógico Ícones ruins Tempo Resposta Confuso Não completaram Ilógico Ícones ruins A % B % % 10% - - C % 10% 10% % * - 20% D % 20% * - 10% % 10% * - - E % 10% * % 10% * - - F 3 40 * % 20% * - - G % * % 20% * - - * Desistência após 5 minutos Observa-se que: Tabela 1- Avaliação das tarefas Média das notas Critério Site 1 Site 2 Design 2,6 3,3 Aparência 2,5 3,5 Navegabilidade 2,2 2,9 Qualidade da informação 2,8 2,8 Consistência das funções 2,4 2,9 Tabela 2 - Avaliação da usabilidade a) Para os dois sites o tempo médio de execução de cada tarefa foi bastante elevado; b) O índice de desistência das tarefas, em ambos os sites, foi bastante elevado.

6 Estes dois fatores combinados indicam falta de usabilidade. Tanto pelo tempo gasto, quanto pela desistência, pode-se concluir que o site está perdendo vendas. Principalmente pelo fato que, na Internet, normalmente o cliente não gasta tanto tempo tentando executar uma tarefa (acredita-se que em uma pesquisa acadêmica o pesquisado insista um pouco mais). Isto pode levá-lo a comprar em um site concorrente. c) Quanto aos critérios de usabilidade, nota-se que os usuários consideram o Design, a Aparência, a Navegabilidade, a Qualidade da Informação e a consistência das funções bem abaixo do desejado. Tudo isto contribui para que a experiência de compra nestes sites não seja a mais adequada. Novamente, observamos a possível perda de vendas Etapa II, possível solução para o problema Considerando os resultados anteriores, foi feita uma entrevista semi-estruturada com os pesquisados do grupo B. A eles foram explicados o contexto de comércio eletrônico, foram mostrados os problemas encontrados pelos pesquisados do grupo A. Em seguida, foi pedido aos pesquisados do grupo B que identificassem, para os problemas anteriores, e outros que eles considerassem importantes, a função que o site deveria apresentar e o significado e tarefas associadas ao e-commerce. Com isso foram relacionadas sete tarefas, para cada tarefa os autores definiram duas metáforas. Conforme dito antes, para transformação do conceito da metáfora em ícone foi adotado e adaptado o processo sugerido por Madsen (1994) descrito na seção 3, sendo assim cada metáfora tem o seu ícone. Tarefa Buscar produto Adicionar produto Produto sendo enviado Segurança do site Envie um Atualizar pedido Pagamento via transação eletrônica Metáfora 1 Lupa Sinal de adição Caixa com avião Globo com cadeado Carta Setas indicando um ciclo Cartão Aceitação / média * 70% 3,43 80% 4,25 50% 3 80% 3,65 3,5 60% 2,67 100% 3,4 * Média da pontuação da escala Linkert Metáfora 2 Lupa e objetos Sinal de adição e objeto Caixa com selo Escudo Envelope Setas indicando um re-ciclo Elipses e cartão Aceitação / média * 4 3,75 30% 3,33 Ícone 1 Aceitação / média * 50% 4,4 60% 3,87 Tabela 3 - Tarefa, Metáfora e ícones associados ao e-commerce Ícone 2 Aceitação / média * 50% 3,6 4,25 A Tabela 3 mostra os resultados do teste de aceitação dos ícones propostos, onde os foi solicitado aos voluntários que dada à tarefa qual a metáfora associada e sua relevância definido através da escala do tipo Likert (Padilha, 2004), onde os pesquisados dessem 4,5 70% 3,43 50% 3,4 70% 4,0 80% 4,25 20% 4,5 3,5 0% 100% 4,1 30% 2,33 20% 4,5 90% 3,89 80% 3,62 10% 3,0

7 notas: 1 ruim; 2 regular; 3 boa, mas precisa melhorar; 4 boa e 5 ótima. Aos ícones criados pela metodologia foi adotado o mesmo critério, ou seja, os entrevistados deveriam associar a metáfora ao ícone Resultados e análise da Etapa II Observa-se na tabela 3 que o conjunto de ícones e metáforas gerou um conjunto em que foi possível aos entrevistados fazer uma correção entre a tarefa e o ícone, sendo identificável (com índices de aceitação médio de 75% e o grau de satisfação média 4, considerado um boa identificação). Em algumas tarefas como Pagamento via transação eletrônica a metáfora cartão foi de grande relevância, pois 100% do usuários identificaram, e o grau de aceitação foi de média 3,4, ao transformar em ícone o número de usuários se manteve, porém o ícone permitiu uma melhor compreensão da função que ele representa, onde a satisfação dos usuários teve média 4,1, ou seja, de fácil compreensão. Este ícone facilita para o usuário do sistema compreender a função que o ícone representa. Na tarefa de Buscar produto, a metáfora lupa foi apontada por 70% dos entrevistados e a representatividade da palavra para a metáfora tem o grau de relevância de média 3,43 o que o torna um ícone aceitável. Já a metáfora Lupa com objeto foi apontada por dos entrevistados, e o grau de satisfação foi 4 o que fornece um patamar bom, porém apontado por um número baixo de usuários. 6. Conclusão Podemos concluir que o conjunto de tarefas executadas na Etapa I apresentou falta de usabilidade, o que compromete o sucesso do sistema, ou seja, o usuário deixa de efetuar a compra. Outro ponto é que existe um consistente desencontro entre a necessidade do usuário e o sistema, onde os significados dos ícones e as funções atribuídas (ou não) pelos desenvolvedores, ou seja, uma grande dificuldade dos pesquisados em compreender o significado correto dos ícones e funções. Tal fato se constata a partir de dois fatores, tempo elevado de execução das tarefas, e o número elevado de desistências, em que o pesquisado não conseguiu completar a tarefa. Além disto, no que se refere à opinião dos pesquisados sobre a usabilidade dos sites, (representados por Design, Aparência, Navegabilidade, Qualidade da Informação e Consistência das Funções) observa-se que as notas foram abaixo do desejável, podendose concluir que existe uma falta de usabilidade dos sites. Ressalta-se a necessidade de testes de usabilidade em um item tão importante em sites de e-commerce, uma vez que, se o usuário não consegue entender o significado do ícone e/ou da função, pode não conseguir usar/comprar no site. Na Etapa II mostrou um processo em que se parte de um problema do usuário, cliente do site de e-commerce. A partir deste problema foi possível construir um conjunto de Metáforas adequadas e de significados relevantes e facilmente entendíveis. A criação dos ícones que sejam facilmente associados à metáfora facilita para o usuário realizar a sua tarefa no site. O conjunto de ícones, gerados têm um alto grau de entendimento por parte dos pesquisados e indica que este processo é de grande potencial, e deve ser melhor explorado pela comunidade acadêmica e comercial.

8 Referencias Carroll, J. M., & Moran, T. P. (1996). Design Rationale: Concepts, Techniques, and Use. New Jersey: LEA: CRC. Cheng, H.-I., & Patterson, E. P. (2006). Iconic hyperlinks on e-commerce websites. Applied Ergonomics. EALE, D. C., & CARROLL, J. M. (1997). The Role of Metaphors in User Interface. In: M. Helander, L. T. K., P. Prabhu, & E. S. Ltd (Ed.), Handbook of Human-Computer Interaction. NY: North-Holland. Erickson, T. D. (1990). Working with interface metaphors. In: B. Laurel, The Art of Human-Computer Interface Design, SF: Addison-Wesley. Laurel, B. (1990). The Art of Human-Computer Interface Design. SF: Addison-Wesley. Lodding, K. N. (1983). Iconic interfacing. Computer Graphics and Applications. Madsen, K. H. (1994). A Guide to Metaphorical Design. Communications of the ACM, 27 (12). Massa, G. (2006). Brasil vive o boom do e-commerce. Acesso em 15 de setembro de 2008, disponível em Neale, D. C., & Carroll, J. M. (1997). The Role of Metaphors in User Interface. In: M. Helander, L. T. K., P. Prabhu, & E. S. Ltd (Ed.), Handbook of Human-Computer Interaction, NY: North-Holland. Nielsen, J. (1993). Usability Engineering. SF: Morgan Kaufmann. Norman, D. A. (2004). Don Norman's jnd website. Acesso em 15 de setembro de 2008, disponível em Padilha, A. V. (2004). Usabilidade na Web: uma Proposta de Questionário para Avaliação do Grau de Satisfação de Usuários do Comércio Eletrônico. Dissertação de mestrado. Florianópolis: UFSC. Pallotta. (2007). ESTATÍSTICA: O Brasil Online. Acesso em 18 de Setembro de 2008, disponível em: Pio, F., & Guimarães, C. (2006). E-commerce Qual ícone vale mais que mil palavras? Lavras: Anais do SBC/IV SMSI. Rocha, H. V., & Baranauskas, M. C. (2003). Paradigmas da Comunicação Humano Computador e o Design de Interfaces. In: H. V. Rocha, & M. C. Baranauskas, Design e Avaliação de Interfaces Humano-Computador. Campinas: NIED/UNICAMP. Rogers, Y. (1986). Evaluating the meaningfulness of icon sets to represent command operations. Proceedings of the IIº Conference of the British Computer Society. NY: Cambridge University. Scapin, D. L. (1993). The need for a Psycho-engineering approach to HCI. Anais do IIº congresso latino-americano e VIº seminário brasileiro de ergonomia. Florianópolis, SC, Brasil: ABERGO/FUNDACENTRO. Sorj, B. (2003). Brasil@povo.com: a luta contra a desigualdade na sociedade da informação. Rio de Janeiro: Jorge Zahar Editor Ltda. Standing, L., Conezio, J., & Haber, R. N. (1970). Perception and memory for pictures: Single-trial learning of 2560 visual stimuli. Psychonomic Science, 19. Wozny, L. A. (Dezembro de 1989). The application of metaphor, analogy, and conceptual models in computer systems. Interacting with Computers, 1. Yuki, M., Maddux, W. W., & Masuda, T. (2007). Are the windows to the soul the same in the East and West? Journal of Experimental Social Psychology, 43.