II Conferência Internacional de Design, Engenharia e Gestão para a inovação Florianópolis, SC, Brasil, 21-23, Outubro, 2012
O DESIGN DE EXPERIÊNCIA NO PROCESSO DE REDESIGN CAMILLA IVETE PICCOLI1, LISANDRA DE ANDRADE DIAS2 1
Universidade Federal de Santa Catarina,
[email protected]
2
Universidade Federal de Santa Catarina,
[email protected]
Resumo: This research sought to demonstrate how knowledge gained from Experience Design can be used for a project of a web interface. Within the theoretical framework it was showed how Usability and Experience Design are inserted into Experience Design. The practical framework was started with questionnaires with representative users of the target audience. Then, the usability test on the existing virtual environment was realized to identify problems and potential improvements. From the results, it began the implementation of the methodology proposed by Garrett to interfaces development, resulting in a new interface proposal to the studied virtual environment. Palavras chave: Usability.
Experience Design, Interface Design,
1. Introdução Ao projetar interfaces, passou-se a valorizar de forma mais concreta os aspectos referentes às necessidades dos usuários, bem como a participação destes neste processo, o que é de suma importância ao considerar o projeto centrado no usuário. Diz-se que esta valorização é recente devido ao fato de que somente no ano de 2001, conforme descrito por Robson Santos em artigo online, a AIGA disponibilizou o documento que estabelecia as definições e atribuições do campo de estudos denominado Experience Design. Para que os representantes do público-alvo sejam inseridos no projeto é possível contar com método, como a metodologia proposta por Garrett (2011) associada a ferramentas eficientes de desenvolvimento de interfaces, tais como pesquisas, Arquitetura de Informação, wireframes e os próprios elementos componentes da interface. Para esta pesquisa utilizou-se dessas ferramentas acima citadas para demonstrar como o Design de Experiência pode ser inserido no processo de redesign de um ambiente virtual.
2. Design de Experiência É importante declarar que apesar de o Design de Experiência ser um campo de estudos relativamente recente, o design tradicional sempre esteve fortemente relacionado com as emoções dos indivíduos (FORLIZZI et al., 2003 apud FREIRE, 2009, p. 39), levando os profissionais a idealizarem projetos ligados às necessidades das pessoas. Karine Freire (2009) descreve que Thomas Mitchell, no livro Redefining designing: From form to experience, lançado em 1993, apresenta a convicção de que o foco de design deveria ser as necessidades e desejos das pessoas, deixando de lado o design centrado exclusivamente nas qualidades do produto e contando com a participação dos usuários nos projetos através do design colaborativo: “[...] O design colaborativo referese a buscar um meio no qual designers e não designers possam participar como parceiros iguais no processo de design, moldando não apenas os resultados, mas os próprios objetivos de projeto (FREIRE, 2009, p. 39)”. A partir do momento em que o usuário foi situado no centro das atenções dos designers, passou a ser considerado não somente um recebedor passivo de informações produzidas, mas sim um indivíduo com vontades, gostos, desejos e emoções importantes a serem considerados. Para Royo (2008), a experiência do usuário está fortemente relacionada às emoções vivenciadas pelo mesmo, constituindo um conjunto de
II Conferência Internacional de Design, Engenharia e Gestão para inovação- IDEMi 2012 Florianópolis, SC, Brasil, 21-23, Outubro , 2012
valores obtidos a partir da utilização dos produtos e equipamentos. É possível assumir então que o termo “Design de Experiência” pode ser qualificado de acordo com os conhecimentos adquiridos a partir do tempo, interação e uso das coisas, permitindo que se busque entender as emoções envolvidas no projeto, que por sua vez deve inserir o usuário como centro das preocupações do designer que desenvolverá os produtos ou serviços. É um campo bastante vasto, que define o designer não mais como um criador de objetos e produtos, mas sim como um facilitador de experiências (COOPER; PRESS, 2009). Marc Hassenzahl (2010, tradução nossa) determina que o método de Design Experiencial deve ser interpretado como um diálogo no qual o indivíduo e o designer devem negociar para encontrar as soluções mais apropriadas para o produto ou serviço projetado. Para que as melhores soluções sejam encontradas propõe-se uma meta de trabalho composta por três níveis, chamados de Why (por quê), What (o quê) e How (como): ▪
▪
▪
WHY: Está relacionado ao porquê de as pessoas interagirem com certos objetos, quais as necessidades delas e as emoções envolvidas. Este aspecto deve ser o primeiro a ser considerado, de forma a definir quais as emoções que se quer proporcionar, em primeiro lugar. Este nível é o que diferencia os produtos que proporcionam a experiência dos usuários. De forma generalizada, este é o nível relacionado com a essência dos produtos e dos objetos; HOW: Referente ao como as pessoas interagem com este artefato e como o design deste, propriamente dito, interfere no modo de utilização. Este aspecto está ligado à ação de tornar a funcionalidade acessível através da estética (HASSENZAHL, 2011, tradução nossa); WHAT: Referente ao “o quê” é possível que se faça com o produto proposto, a partir das funcionalidades que o mesmo deve executar. Este aspecto está intimamente ligado ao gênero de produto ou a tecnologia empregada (HASSENZAHL, 2011, tradução nossa).
A partir do momento em que estes três níveis interagem entre si e harmonizam é possível que produtos e serviços diferenciados sejam projetados.
3. Usabilidade e Design de Interfaces Usabilidade, segundo a ISO 9241-11 (2002), é a medida pela qual usuários específicos podem utilizar produtos para alcançar objetivos específicos com eficiência, eficácia e satisfação em um contexto específico de uso. Betiol, Cybis e Faust (2007) apresentam a essência da usabilidade como um “acordo” feito entre a interface, o usuário, a tarefa a ser desempenhada e o ambiente no qual a tarefa é realizada. Para Nielsen e Loranger (2007) existem três elementos essenciais dos quais a usabilidade depende: ▪
O usuário: Agente que manipulará o aparelho a partir de seu entendimento e conhecimentos, de acordo com a capacidade de uso oferecida por este;
▪
O aparelho: Artefato que será manipulado através da interface proposta pelo designer (funcional e visualmente);
▪
O contexto: Elemento que influenciará no uso do aparelho, em alguns casos modificando, inclusive, seu significado.
A usabilidade dos aparatos deve ser um elemento de extrema importância ao se projetar interfaces. Uma vez que a interface é a camada mediadora entre sistema e usuário, esta pode causar as mais diversas emoções e reações nos usuários, conforme descrito por Bonsiepe (1997 apud DIAS, 2002): ▪
Satisfação, frustração ou irritação;
▪
Facilidade ou dificuldade na aprendizagem;
▪
Diversão ou monotonia;
▪
Relações entre informações ou confusão entre elas;
▪
Possibilidades de ação efetiva instrumental ou comunicativa.
Donald Norman (apud ROYO, 2008) aponta as seguintes possibilidades como responsabilidade do designer de interfaces: ▪
Limitar as ações disponíveis em cada momento, priorizando o que será utilizado pelo usuário mais provavelmente e deixando o restante como adicional;
▪
Oferecer a visualização do sistema para que o usuário obtenha a sensação de controle do mesmo, através de metáforas e das possibilidades encontradas;
II Conferência Internacional de Design, Engenharia e Gestão para inovação- IDEMi 2012 Florianópolis, SC, Brasil, 21-23, Outubro , 2012
▪
Oferecer respostas aos usuários de forma que este seja capaz de identificar onde se encontra, o que está acontecendo no sistema e o que acontece cada vez que executa uma ação;
▪
Facilitar o entendimento da interface de forma natural, correspondendo com as expectativas dos usuários.
Para que uma interface seja projetada é necessário considerar alguns fatores básicos de desenvolvimento da sua estrutura. A metodologia proposta por Garrett (2011) determina cinco planos conceituais através dos quais é possível que se estruture uma interface desde a estrutura mais profunda até a mais superficial, ou bottom to top conforme denominado pelo autor. Os planos devem ser executados consecutivamente, de maneira que o seguinte seja iniciado somente quando o anterior for concluído.
4. Coleta e Análise de Dados Para esta pesquisa optou-se por aplicar testes de usabilidade com representantes do público-alvo para o qual a interface pesquisada se voltava, de forma a observar e encontrar os principais problemas presentes nesta e possibilitar a correção dos mesmos com a ajuda dos participantes dos testes, de forma colaborativa. Para que os testes fossem aplicados foi necessário definir alguns parâmetros básicos: ▪
O tipo de verbalização escolhido foi o simultâneo, que permite que os usuários descrevam, durante a realização dos testes, o que estão pensando, o que estão fazendo e justifiquem as escolhas feitas ao longo do percurso. Nestes momentos o analista dos testes convidou os participantes a descrever estas etapas através de questões como “Por que você fez isso?”, “O que está sendo feito?” ou “O que você está pensando agora?”, por exemplo;
▪
O local dos testes escolhido dividiu-se entre o local de trabalho dos participantes e a própria empresa na qual a interface está sendo desenvolvida, de acordo com a disponibilidade de cada participante. A observação no local de trabalho permitiu, de acordo com o que sugerem Betiol, Cybis e Faust (2007), que se observasse o usuário em um contexto mais próximo do real, demonstrando circunstâncias difíceis de reproduzir no laboratório, como interferências alheias à tarefa;
▪
A amostra de usuários foi composta por oito usuários em igual número de gênero e dividida em
dois grupos, de acordo com o perfil de público (neste caso os que atuariam como alunos e os que atuariam como professores sobre o ambiente virtual estudado). Esta quantidade mostra-se de acordo com o que é recomendado por Nielsen (1994 apud BETIOL; CYBIS; FAUST, 2007), que sugere que se considere uma amostra composta por 6 a 12. Todos os usuários eram representantes do público-alvo e foram convidados a participar como voluntários nos testes em questão; ▪
Para o roteiro de tarefas foram priorizadas as atividades relacionadas às funcionalidades mais importantes, as que possivelmente seriam mais utilizadas pelos usuários e as que poderiam causar menor clareza durante o uso, constituindo problemas de ergonomia e usabilidade. Resultou-se em nove tarefas básicas;
▪
O teste-piloto foi realizado com um voluntário, com o objetivo de verificar possíveis erros no roteiro de tarefas ou no andamento dos testes. De fato, uma das tarefas mostrou-se inadequada aos testes por se tratar de uma funcionalidade do ambiente virtual que ainda não estava completamente desenvolvida. Esta tarefa foi então substituída por outra de importância semelhante.
Inicialmente foram aplicados questionários individuais com todos os componentes da amostra, possibilitando estabelecer similaridades e diferenças entre os envolvidos, conhecendo-os melhor e tornando mais consistente a posterior utilização da técnica de criação de personas. Com a aplicação dos questionários, dentre outras descobertas, foi possível saber a faixa etária média dos participantes, profissão, sobre uso ou não de sistemas informatizados semelhantes, sobre o uso da internet e principais aparatos eletrônicos utilizados para o acesso. Para a realização dos testes de usabilidade, os usuários foram novamente orientados sobre como deveriam proceder e sobre objetivo de sua participação, além de serem instruídos sobre como o orientador procederia, sobre a ausência de sua interferência nas tarefas e ajuda durante a realização destas. Após a finalização dos testes foram feitas entrevistas individuais com os participantes, de forma que estes pudessem discorrer com liberdade a respeito das dificuldades encontradas, sanar as dúvidas e ainda apresentar sugestões, o que se mostrou extremamente benéfico para delinear as principais necessidades dos
II Conferência Internacional de Design, Engenharia e Gestão para inovação- IDEMi 2012 Florianópolis, SC, Brasil, 21-23, Outubro , 2012
usuários que poderiam ser exploradas pelo ambiente virtual desenvolvido. Observou-se que os principais problemas encontrados estavam diretamente relacionados ao desrespeito às orientações e recomendações básicas de usabilidade, tais como o posicionamento do menu principal (do lado direito da tela) e feedback inexistente dos links ao usuário, por exemplo, além de rótulos pouco claros e abreviaturas confusas. Sendo assim, a etapa de análise dos dados foi o momento no qual os erros foram classificados de acordo com a prioridade de correção, a partir da frequência em que aconteciam entre os usuários. Após os dados coletados e analisados, deu-se início à execução da metodologia proposta por Garrett, cumprindo com os cinco planos conceituais para o desenvolvimento de interface web.
5. Plano de Estratégia De acordo com os resultados dos testes de usabilidade, bem como as observações feitas durante a aplicação dos questionários e entrevistas, traçaram-se as estratégias sobre as quais o ambiente deveria se apoiar. Com a descoberta de problemas bastante graves, a primeira e mais importante estratégia foi definida: o redesign do ambiente. Para que este redesign acontecesse de maneira eficiente, a segunda estratégia definida dizia respeito ao maior respeito pelas recomendações de usabilidade sobre posicionamento, localização e apresentação de itens, de maneira que grande parte dos problemas de usabilidade encontrados já fosse resolvida. Algumas das necessidades dos usuários observadas durantes os testes foi de facilidade (uma vez que nenhum dos usuários demonstrou disponibilidade ou interesse em usar um ambiente complicado) e velocidade (já que alguns usuários alegaram falta de tempo para o uso de um ambiente lento e interesse na velocidade proporcionada por um ambiente online). A partir destas necessidades definiu-se a terceira estratégia: a criação de um ambiente virtual ágil e simples de usar, que atuasse como uma ferramenta facilitadora das atividades dos usuários.
Para a criação dos conceitos-chave que direcionariam o redesign do ambiente recorreu-se à utilização de painéis semânticos, os quais demonstraram duas situações: o relacionamento do público-alvo entre si no momento da prática de suas atividades e a prática das atividades propriamente ditas. Sendo assim dois conceitos foram escolhidos: agilidade e integração. Em seguida foram criadas quatro personas, com o objetivo de se criar personalidades que se tornariam presentes nas decisões a serem tomadas ao longo do projeto, sendo lembradas com frequência. Neste primeiro plano definiram-se também os principais diferenciais do ambiente e pesquisaram-se informações a respeito do público-alvo em bases de dados confiáveis, como IBGE e IBOPE.
6. Plano de Escopo O Plano de Escopo foi o momento em que os aspectos mais funcionais do ambiente foram decididos: ▪
Funcionalidades: Por se tratar do redesign do ambiente, grande parte das funcionalidades já existia, mas precisava ser melhorada e adequada. Para que as estratégias traçadas fossem alcançadas foi necessário determinar as principais funcionalidades oferecidas pelo sistema, constituindo um ambiente de uso enriquecedor para o público ao qual se voltava. Os diferentes tipos de papéis dos usuários também foram definidos neste momento;
▪
Tecnologias: As tecnologias envolvidas foram determinadas para atender às funcionalidades definidas anteriormente. A linguagem de programação a ser utilizada também foi escolhida, levando em consideração tanto a facilidade para os programadores quanto à facilidade de se incorporar conteúdo. Uma vez que uma parte do sistema já havia sido desenvolvida, sabia-se o que seria empregado como back-end neste quesito;
▪
Seções: O agrupamento de informações existentes no ambiente havia causado algumas confusões, principalmente em relação aos nomes utilizados para cada seção, conforme observado nos testes. Com o objetivo de resolver estas dificuldades, novos rótulos foram definidos para as seções problemáticas, enquanto as demais permaneceram como se encontravam, embora fosse claro que a construção da Arquitetura de Informação poderia resultar em alterações nestes rótulos, já que contaria
II Conferência Internacional de Design, Engenharia e Gestão para inovação- IDEMi 2012 Florianópolis, SC, Brasil, 21-23, Outubro , 2012
com a participação do público-alvo para definir os agrupamentos mais adequados.
ordem de navegação e adequação posicionamento dos botões, por exemplo; ▪
7. Plano de Estrutura A Arquitetura de Informação foi o resultado final da etapa do Plano de Estrutura. Para que esta fosse construída utilizou-se a técnica de card sorting, a qual objetiva descobrir a representação mental construída pelos usuários a respeito do conjunto de itens de informação que se pretende inserir em um programa ou aplicação (BETIOL; CYBIS; FAUST, 2007). Entrou-se em contato novamente com os participantes dos testes para convidá-los a participar desta etapa, na qual foram construídas fichas representando os itens de informação do ambiente, que seriam agrupadas pelos usuários, criando seções que seriam nomeadas pelos participantes. A partir dos agrupamentos mais frequentes criados construiu-se a Arquitetura de Informação do ambiente, contando com os principais agrupamentos e nomes de categorias apontados. Foram contempladas as principais ferramentas do ambiente, de maneira que se pudessem organizar as informações de forma simplificada e coerente para os participantes. O resultado foi de estrutura hierárquica, de forma a facilitar ainda mais a navegação fornecida aos usuários, sendo que a profundidade da navegação não ultrapassou o sexto nível.
Por fim a forma visual final da interface foi desenvolvida, tendo por base os wireframes construídos no plano conceitual anterior. Neste momento foram considerados os elementos visuais da interface, tais como o grid, as cores e a tipografia a ser utilizada: ▪
Grid: Optou-se pelo grid do tipo hierárquico, de maneira a permitir a organização dos elementos na tela de forma mais adequada, respeitando as recomendações de usabilidade. Samara (2007) aponta este tipo de grid como o mais utilizado para websites;
▪
Cores: As cores originais da interface foram mantidas, não havendo necessidade de alterá-las, uma vez que segundo o que foi observado durante os testes, estas não apresentaram problemas. As cores foram utilizadas como forma de fornecer feedback de links e padronizar a interface. As principais cores utilizadas foram os tons de cinza e preto, bem como o laranja – em respeito à identidade da marca, objetivando reforçar a identidade do ambiente – e azul – por atuar como complemento da cor laranja, servindo como ponto de atenção para o usuário e para demarcar os links de ação, conforme recomendam Loranger e Nielsen (2007). As demais cores escolhidas foram tons saturados de roxo, vermelho e verde, já existentes na versão testada do ambiente virtual. Esta escolha deu-se em virtude de estas cores em tons saturados estarem de acordo com a tendência observada em websites do mesmo segmento de mercado, bem como pelo fato de não haverem apresentado quaisquer problemas durante a fase de testes de usabilidade. Os formulários e itens que exigem maior atenção e leitura foram mantidos em tons de cinza e branco, de forma a não interferirem na atenção do usuário;
▪
Tipografia: Em relação à fonte escolhida, optou-se por fonte sem serifa (Arial), de tamanho base de 12 pontos, em conformidade com as recomendações de Nielsen (2000) para atender o público geral. Pelas mesmas recomendações, os links menores auxiliares
No Plano de Esqueleto os itens a seguir foram trabalhados: Navegação: Três sistemas de navegação seriam utilizados neste ambiente, sendo eles os breadcrumbs (proporcionando segurança e facilidade de localização no ambiente), a navegação global (presente em todas as telas para apresentar as opções de navegação mais gerais) e a navegação contextual (de acordo com a seção em que o usuário se mostrasse presente);
▪
Interface: Determinou-se como seriam corrigidos os principais problemas encontrados na fase de coleta de dados. A maior parte se referia à adequação de elementos da interface, como a localização do menu principal, maior atenção quanto ao feedback de links, melhorias nos rótulos utilizados, adequação na
Informação: Foram desenvolvidos todos os wireframes do ambiente, demonstrando como a interface final se pareceria em relação ao tipo de elementos e à localização destes na tela. Os wireframes demonstraram como seriam corrigidos os problemas de interface descritos anteriormente, apresentando a localização dos itens, os rótulos principais e tipos de elementos, por exemplo.
9. Plano de Superfície
8. Plano de Esqueleto
▪
no
II Conferência Internacional de Design, Engenharia e Gestão para inovação- IDEMi 2012 Florianópolis, SC, Brasil, 21-23, Outubro , 2012
foram mantidos em tamanho menor, de 10 pontos, de forma que ainda oferecessem legibilidade. Para manter o respeito às questões de usabilidade e recomendações utilizou-se quatro diferentes tamanhos de fonte, no total, de maneira a hierarquizar o conteúdo – assim como o estilo, em itálico e regular e o peso, bold e regular.
10. Conclusão A realização desta pesquisa permitiu que se verificasse como o Design de Experiência pode ser inserido em um projeto, priorizando os aspectos humanos dos serviços e a valorizando as pessoas que serão beneficiadas por estes, resultando em ganhos no projeto. A participação dos usuários nos projetos tem sido cada vez mais valorizada pelos profissionais – reflexo do modo como as pessoas passaram a interagir com os serviços, não sendo mais suficiente atuar como consumidores passivos; os usuários passam a buscar a participação no processo e compartilhar experiências. Este comportamento deve ser visto pelos designers como uma oportunidade de conhecer o público para o qual projetam e estabelecer uma relação mais colaborativa com este. Sendo assim, este estudo reforça a necessidade de se adotar as recomendações do Design de Experiência tanto nos projetos novos quanto nos projetos cujo resultado final seja um redesign. Mais do que apenas criar interfaces, as diretrizes propostas pelo Design de Experiência devem servir para que o público revele necessidades e demonstre o caminho a ser seguido pelo designer.
Referências BETIOL, Adriana Holtz; CYBIS, Walter; FAUST, Richard. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações. São Paulo: Novatec, 2007. COOPER, Rachel; PRESS, Mike. El Diseño como Experiência: El papel del diseño y los diseñadores en el siglo XXI. Barcelona: Gg Design, 2009. DIAS, Lisandra de Andrade. Desenvolvimento de Interfaces de Ambientes Interativos para Usuários Novatos: o caso de trabalhadores rurais. 2002. 83 f. Dissertação (Mestrado) Universidade Federal de Santa Catarina, Florianópolis, 2002.
FREIRE, Karine. Reflexões sobre o conceito de design de experiências. Strategic Design Research Journal, São Leopoldo, p. 37-44. – jan.-jun. 2009. Available at: http://www.unisinos.br/sdrj/pdf/63.pdf. [Accessed 18 September 2011]. GARRETT, Jesse James. The Elements of User Experience. California: New Riders, 2011. HASSENZAHL, Marc. Advice on Designing with Experience in Mind: User Experience and Experience Design. Entrevistador: R. Friis Dam. Darmstadt: 2010. Entrevista concedida ao Interaction-Design.org Foundation. Available at: http://www.interaction-design.org. [Accessed 21 September 2011]. ______. Marc. User Experience and Experience Design. 2011. Available at: http://www.interactiondesign.org/encyclopedia/user_experience_and_experience_d esign.html. [Accessed 02 October 2011]. ISO 9241. Requisitos Ergonômicos para Trabalho de Escritórios com Computadores. Parte 11: Orientações sobre Usabilidade. LORANGER, Hoa; NIELSEN, Jakob. Usabilidade na Web: Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000. ROYO, Javier. Design Digital. São Paulo: Rosari, 2008. SAMARA, Timothy. Grid: Construção e Desconstrução. São Paulo: Cosac Naify, 2007. SANTOS, Robson. Experience design: atração e engajamento. Webinsider. 2004. Available at: http://webinsider.uol.com.br/vernoticia.php/id/2287. [Accessed 24 August 2011].
