ESTUDO DE USABILIDADE APLICADO EM DESIGN DE INTERFACE INTERATIVA PARA WEB USABILITY STUDY USED IN DESIGN OF INTERACTIVE WEB INTERFACE Denis Marques Solano1, Sharlene Melanie Martins de Araújo² (1) Acadêmico de design, Universidade Federal do Amazonas. e-mail: denis.solano@gmail.com (2) Graduada em design, Universidade Federal do Amazonas. e-mail: sharlene.melanie@gmail.com
Palavras-chave: webdesign, usabilidade, interação. Este trabalho consiste em desenvolver uma interface interativa para um site vitrine com o objetivo de divulgar os produtos da empresa Makindesh, uma empresa fictícia que aplica gestão e usabilidade para beneficiar seus usuários. Assim, desenvolve estudo das estratégias de mercado aliado aos conceitos de design.
Key-words: webdesign, usability, interaction. This work is to develop an interface to a storefront site in order to disclosethe company’s products Makindesh, a fictitious company that applies management and usability to benefit users. The study develops maketing stragtegies coupled with the design concepts.
1. Introdução No início da internet o processo de implementação de páginas web era um processo sem muita complexidade, as empresas que desenvolviam programas neste meio utilizavam apenas um browser para visualizar as páginas e levavam em consideração as imagens em relação ao texto. Com o advento de novas tecnologias e funcionalidades direcionadas à internet, o papel do designer expandiu consideravelmente, proporcionando uma relação entre designers, programadores, engenheiros de computação, profissionais de jornalismo, marketing, publicidade e dentre outros profissionais que buscam contribuições para o desenvolvimento de um projeto comum e que atenda à necessidade do usuário (KRUG, 2006). A pesquisa apresentada consiste em desenvolver uma interface através dos estudos de usabilidade, estratégia de negócio e design. Tais conceitos consideram as tendências mercadológicas para o melhor desenvolvimento de uma estratégia de negócio, aliada à comunicação da interface e criação de mídias, juntamente com a interação direta do usuário. Assim, definiu-se o que são as
redes sociais para o contexto de empresa virtual, qual o seu produto, sua marca e o tipo de estratégia que melhor se adaptou ao projeto.
2. Objetivo O objetivo geral deste projeto foi desenvolver uma interface através dos estudos de usabilidade aliados a estratégia de negócio e os conceitos do design. Assim seguem os objetivos específicos: construir uma interface que considere ergonomia, usabilidade, interação, estratégia de mercado; divulgar e aproximar os usuários através das redes sociais; e, coordenar uma experiência coesa entre o usuário e a interface. .
3. Métodos e Técnicas Esta pesquisa consistiu nas seguintes etapas: a) Levantamento e estudo do referencial teórico ligados às seguintes áreas consideradas: design gráfico, Ergonomia, Usabilidade, Interação Homem-Computador, Ergonomia cognitiva, Sistema de informação e Fatores Humanos. b) Abordagens da pesquisa: - Estudo de caso: empresa Makindesh. - Levantamento de dados e Análise do conteúdo.
c) Geração de alternativas: foram desenvolvidas três alternativas e a selecionada aquela que melhor se adaptaria ao sistema. d) Aplicação da teoria no desenvolvimento da proposta a partir das categorias descritas acima: para o desenvolvimento da alternativa, levou-se em consideração a heurística de usabilidade sugerida por Nielsen (1994).
4. Fundamentação teórica 4.1 Tecnologia e contexto Social Segundo Breton apud Lemos (2004), o advento da tecnologia do computador pode ser explicado por três condições históricas: condições técnicas, social e ideológica. A informática é uma forma de aliar o conhecimento da natureza às formas de funcionamento da sociedade onde se cria a possibilidade de leitura da realidade, traduzida pela linguagem digital, automatizando a informação. Lemos (2004) diz ainda que os novos meios de comunicação que coletam, manipulam, estocam, simulam e transitem os fluxos de informação criam uma nova camada que vem a se sobrepor aos fluxos materiais que se está acostumado a receber. Chama-se a isso de ciberespaço, um espaço sem dimensões, um universo de informações de forma instantânea e reversível.
4.2 Aspectos Ergonômicos A ABERGO (Associação Brasileira de Ergonomia) afirma que os domínios de especialização da ergonomia são: física, organizacional e cognitiva. Esta última se refere aos modelos mentais tais como percepção, memória, raciocínio e resposta motora conforme afetem as interações entre seres humanos e outros elementos de um sistema. Segundo Iida (2005) em um sentido mais amplo, informação pode ser considerada uma transferência de energia que tenha algum significado em uma dada situação. Assim, uma luz que se acende e apaga, um ponteiro que se move ou uma sirene que toca, transmitem informações. Como o homem interage continuamente com outras pessoas, as máquinas e o ambiente, há uma troca contínua de informações entre esses elementos, nos dois sentidos, ou seja, recebendo e transmitindo informações.
O autor supracitado, também afirma que os aspectos sensoriais (percepção e processamento de informação) falam da postura do usuário diante do modo em que capta a informação (percepção), armazena (memória) e faz seu uso no trabalho (decisão). Atualmente a eficácia de um trabalho na sua maioria depende mais da percepção humana em reter informações e tomadas de decisão. A sensação se refere ao processo biológico de captação de energia ambiental. Essa energia é captada por células nervosas dos órgãos sensoriais, sob forma de luz, calor, pressão, movimento, partículas químicas e assim por diante. A energia captada é convertida em impulsos eletroquímicos, que transmite ao sistema nervoso central, onde pode ou não ser processado. A percepção está ligada à recepção e reconhecimento de uma informação, comparando-a com uma informação anteriormente armazenada na memória. Depende também das experiências anteriores e fatores individuais como personalidade, nível de atenção e expectativas. A mesma sensação pode produzir percepções diferentes em diferentes pessoas, levando-as em diferentes tipos de decisões.
4.3 Usabilidade Para Cybis et al (2007) a usabilidade é a qualidade que caracteriza o uso dos programas e aplicações. Assim, ela não é uma qualidade intrínseca de um sistema, mas depende de um acordo entre as características de sua interface e as características de seus usuários ao buscarem determinado objetivo em determinadas situações de uso. Pela definição da International Organization for Standardization, usabilidade é a medida pela qual um produto pode ser usado por usuários para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso particular (ISO 9241-2002).
4.4 Engenharia de Usabilidade Para Cybis et al (2007) a engenharia de usabilidade se ocupa da interface com o usuário, um componente do sistema interativo formado por apresentações e estruturas de diálogo que lhe conferem um comportamento em função das entradas do usuário ou de outros agentes externos. Ela apresenta painéis com informações, dados, controle, comandos, mensagens, e é por meio dessas apresentações que a interface solicita e recepciona a entrada de dados, de controles e de
comandos do usuário. Sob a perspectiva dos citados autores, o desenvolvedor tem mais chances de sucesso ao construir o núcleo funcional dos programas do que interfaces com o usuário. O sistema tem comportamento definido inicio meio e fim. O desenvolvedor de interfaces, não possui as tais facilidades, pois o sistema humano x interface constituem um sistema sócio-técnico que exige conhecimentos, abordagens, métodos e ferramentas específicas, ainda em desenvolvimento. Em geral nem os programadores de software nem os designers gráficos recebem formação sobre o sistema cognitivo humano, sobre os princípios e as recomendações ergonômicas ou ainda sobre os métodos, as técnicas e as ferramentas de desenvolvimento centrado no usuário e no uso (CYBIS et al (2007).
Para tanto, o autor propõe que o processo de comunicação seja estruturado com base em 5 etapas: a) o emissor ou fonte: é a pessoa, coisa ou processo que emite a mensagem; b) transmissor ou decodificador: é o equipamento que liga a fonte ao canal; c) o canal: é o espaço situado entre o transmissor e o receptor; d) o receptor ou decodificador: é o equipamento que liga o canal ao destino. (ex: audição); e, e) o destino: é a pessoa, coisa ou processo para o qual a mensagem é enviada. Segundo o psicólogo Magalhães (2007) os sinais não-verbais têm as funções específicas de regular e encadear as interações sociais e de expressar emoções e atitudes interpessoais. Os sinais nãoverbais podem ser: expressão facial; movimento dos olhos; movimentos da cabeça; postura e movimentos do corpo; comportamentos nãoverbais da voz; e, a aparência.
4.5 Design de Interação O design de interação é o design de produtos interativos que fornecem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho. Design de interação significa criar experiências que melhorem e estendam a maneira como as pessoas trabalham, comunicam e interagem, sendo o projeto de espaço para comunicação e interação humana (PREECE et al 2008). Os mesmos autores relatam ainda que os sistemas de informação constituam uma outra área preocupada com aplicação de tecnologia de computação em domínios como negócios, saúde e educação.
4.6 Processo de comunicação Segundo Chiavenato (2005), comunicação é o processo de transmissão de uma informação de uma pessoa para outra, então compartilhada por ambas. Para que haja comunicação é necessário que o destinatário da informação a receba e a compreenda. A informação simplesmente transmitida, mas não recebida, não foi comunicada.
5. Definição e aplicação estratégica do negócio - Objetivos do negócio Procurando se lançar no mercado, a empresa fictícia Makindesh busca utilizar a internet como meio principal e norteador de negócio, adaptandose a nova maneira de pensar no meio mercadológico e tecnológico. Seu objetivo de negócio é estabelecer uma relação nova e duradora com os usuários da internet. Além de aumentar os lucros da empresa e fortificar a marca, melhorando a eficiência operacional e reduzindo custos com suporte ao consumidor. Ao mesmo tempo, aproxima o usuário do desenvolvimento de novos produtos e serviços. O foco da empresa é a criação de camisetas com estampas personalizadas que buscam atrair os mais variados públicos.
5.1 Entendendo a Estratégia A estratégia adotada para determinadas empresas consiste basicamente em elaborar, a partir da marca, mecanismos que fazem com que o produto seja conhecido no mercado. A idéia é compartilhar produtos e serviços nos meios convencionais de comunicação em massa (rádio, TV e etc) como descrito na figura 01 item 3. Ao alcançar o cliente este compartilha a informação (item 5) onde a partir das trocas de experiências se pode concluir o consumo ou não de determinado produto ou a marca (item 7).
inclusão da empresa nas ferramentas SEO (Search Engine Optimization - Otimização para mecanismo de busca) que consiste na inserção do site nas ferramentas de busca, potencializa uma melhor consulta para quem procura a vitrine virtual através das palavras chaves que são inseridas com a descrição do site no sistema (SEO). Essas estratégias têm o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados de busca e aplicar o SEM (Search Engine Marketing). A inclusão de anúncios da empresa nos sites de busca é dada a partir da relevância da pesquisa solicitada pelo usuário, item 6 da figura 02. Para finalizar o usuário poderá realizar a compra online como descrito no item 9. Pode-se resumir a criação do seguinte conteúdo: Site vitrine e perfis em Facebook, Twitter, Youtube e Orkut.
Figura 01: Estratégia adotada em algumas empresas. Fonte: Canal Empreendo - Youtube.
A estratégia proposta para atender a demanda da empresa Makindesh parte do mesmo principio, porém utilizando outros tipos de ferramentas que permite envolver o consumidor com as mídias convencionais e não convencionais. A mudança ocorre no item 3 da figura 02, onde é possível contar com outros dois fatores, a internet e o celular (mobile).
Figura 02: Estratégia da Makindesh. Fonte: Adaptado de Canal Empreendo - Youtube.
6. Desenvolvimento do sistema 6.1 Estudo - Fluxo de navegação
A troca de referencias acontece entre outras redes sociais com a empresa inserida nesta realidade, o que leva o consumidor não somente ao diálogo com familiares e amigos, mas incluem comunidades interligadas mundialmente através de blogs, microblogs, videologs e etc. O que torna a empresa dona de sua audiência na internet e na mídia que é cada vez mais vinculada com a TV. Isso acontece não somente através da presença da empresa nestes tipos de mídias, mas a partir da
O fluxo de navegação (Figura 03) mostra as ações disponíveis no site vitrine da empresa a partir do estudo feito das reais necessidades.
Figura 03: Fluxo de navegação.
6.2 Wireframe O wireframe é a base a qual o conteúdo está disposto junto à interface, subdividindo os espaços dentro da interface sugerida (Figura 04).
Figura 06: storyboard da página inicial
Figura 04: Wireframe – esqueleto do conteúdo.
6.3 Storyboard A partir do estudo de fluxo e do wireframe do site vitrine, criou-se o storyboard para prever o comportamento dos elementos dentro do espaço disponível. Foi possível determinar a melhor forma de interação entre os objetos clicáveis e ações previamente definidas, tornando consistente cada ação sem que o sistema fugisse ao controle, conforme as figura 05, 06 e 07.
Figura 05: storyboard da página de carregamento.
Figura 07: storyboard da página de destaques.
7. Avaliação Heurística Para o desenvolvimento foi considerado os seguintes itens de navegação, tendo como referência Kalbach (2009): a) Balanço entre o número de itens de menu visíveis na página (amplitude) principal. No caso 5, itens criados para 3 ou 4 níveis hierárquicos de estrutura (profundidade). Logo foi feita a relação entre itens e níveis de navegação determinando assim que com menos itens de navegação mais profunda será a estrutura. b) Os links escolhidos para determinarem a forma de navegação, possuem uma característica oculta onde ao passar o mouse é possível observar um ícone característico do ambiente a ser clicado. Esse tipo de navegação é indicado para sites cujo objetivo é demonstrar e entreter o usuário com produtos da empresa onde se busca audiências-
alvo. Esse tipo de ferramenta não é indicado para outros tipos de sites como o de comércio eletrônico ou sites institucionais.
Figura 08: item do menu contato caracterizando a forma de serviço.
Figura 10: Feedback dar ao usuário sua localização no sistema.
7.3 Eficiência 7.1 Consistência e inconsistência Na proposta que se segue os links aparecem em uma forma fixa na tela, ou seja, referente ao mecanismo e links. Ser consistente não significa que o site tenha que ser uniforme, pois na proposta há variações de posição, cores, rótulos e layout em geral, criando um sentido de progresso através do site.
Figura 09: a ordem de importância caracterizada pela posição dos rótulos (menu).
7.2 Feedback O visitante é informado do que esta acontecendo no sistema, além de ser utilizada a técnica de rollovers antes de selecionar uma opção de navegação mostra o ícone da possível posição do usuário no sistema. Além de destacar sua categoria na navegação (figura 10).
As informações fornecidas através da criação dos itens de menu evita cliques desnecessários e fácei, eliminando pontos de acesso duplicados, atalhos desnecessários e fornecendo pontos de escape.
7.4 Rotulagem Levando em consideração a perspectiva do usuário, os rótulos navegacionais fazem parte do conteúdo do site, uma vez que contam a ―história‖, dando ao site uma forma narrativa de navegação, atribuindo a cada elemento formas cognitivas e auto-explicativas de como a navegação ocorre. Para o ―menu‖ de navegação foram selecionados os itens (Figura 11), observando a perspectiva do usuário para o sucesso de navegação e a interação com o sistema. Os itens de navegação são os seguintes: destaques, downloads, produtos, blog e contato. O critério para escolha se baseia no fato de o usuário clicar em links, de forma que o mesmo possa criar imagens mentais das informações que irão receber dentro desta ótica. A imagem gerada não se baseia na informação diretamente observada pelo usuário, mas conta principalmente com sua experiência de navegação.
Por conseguinte, os resultados apresentados não esgotam a possibilidade de outras interpretações que possam ratificar ou negar essa forma de negócio. Porém, faz-se necessário a criação de novos meios de interação uma vez que o conteúdo deve ser constantemente atualizado e aplicado nos contextos interativos da ferramenta que é a internet.
Figura 11: Destaque dos rótulos escolhidos como menu do site.
7.5 Clareza visual Com o objetivo de tornar a experiência visual e informacional mais rica, foi possível criar um senso de navegação e usabilidade.
7.6 Adequação do tipo de site O site se caracteriza como de entretenimento através do apelo visual e navegação divertida, funcionando como vitrine para principais produtos da empresa.
8. Considerações Finais Através das análises e do embasamento teórico foi possível criar características nas mídias sociais de relevância com os principais produtos para exposição dentro das especificações da forma de negócios a serem realizados na internet. Inserção dos endereços de url nos sites de busca como Google, Yahoo e Bing juntamente com a inserção de palavras chaves para estas ferramentas (SEO), Criação de mídias para Youtube aplicando o marketing continuo (SEM). Em relação à interação com o usuário, a utilização de ferramentas de medição de audiência e permanência do usuário dentro do site vitrine e das redes sociais necessita de mais tempo para serem avaliados e validados. Dentro do que já foi desenvolvido, observou-se uma grande consistência nos dados e nos produtos, tornando positiva a disseminação da empresa via internet. Porém, verifica-se a necessidade de futuros testes de usabilidade com usuário em ambiente controlado para validação do sistema.
9. Referencial Bibliográfico BRETON, Philippe; PROULX, Serge (2002). Sociologia da comunicação. São Paulo: Loyola. CYBIS, W.A; BETIOL, A.H.; FAUST, R. Ergonomia e Usabilidade – Conhecimentos, Métodos e Aplicações . Novatec Editora, 2007 IIDA, I. Ergonomia – Projeto e Produção. São Paulo, Edgard Blucher Editora, 2005. Dados sobre e-commerce. Disponível em: http://www.e-commerce.org.br/stats.php#topo. Acesso em 27/05/2010 ISO (1997). ISO 9241-11: Ergonomic requirements for office work with visual display terminals (VDTs). Part 11 — Guidelines for specifying and measuring usability. Gènève: International Organisation for Standardisation. Disponível em: http://www.eihms.surrey.ac.uk/robens/erg/methods %20module/ISO_9241-11.pdf. Acesso em: 27/05/2010 KALBACH, James. Design de Navegação Web. Porto Alegre. Bookman, 2009 KRUG, S. Não me faça pensar: Uma Abordagem de Bom Senso à Usabilidade na Internet. Versão em Português. Rio de Janeiro, Alta Books Editora, 2006. LEMOS, ANDRÉ. Cybercultura – Tecnologia e vida social na cultura –contemporânea. Editora Sulina, Porto Alegre, 2004. NIELSEN, J.; TAHIR, M. Homepage Usability 50 Websites desconstructed,EUA, New Riders Editora, 2002. PREECE, J.; Rogers, Y. Sharp, H. Design de interação: além da interação homem-computador. Porto Alegre. Bookman Editora, 2008. Tipos de negócios. Disponível em: http://www.youtube.com/empreendo. Acesso em: 12/11/2010.