DESIGNA 2013 INTERFACE PROCEEDINGS
UBI
FRANCISCO PAIVA CATARINA MOURA (Orgs.)
DESIGNA
Conferência Internacional de Investigação em Design International Conference On Design Research
Título DESIGNA 2013 - Interface, Proceedings Organização Francisco Paiva Catarina Moura Design Gráfico Sara Constante Edição Universidade da Beira Interior Faculdade de Artes e Letras Departamento de Comunicação e Artes Rua Marquês d´Ávila e Bolama 6200-001 Covilhã, Portugal Impressão Serviços Gráficos da UBI Tiragem 500 exemplares Depósito Legal 368350/13 ISBN 978-989-654-139-2 (papel) 978-989-654-140-8 (e-pub) © Reservados todos os direitos.
978-989-654-141-5 (pdf)
O conteúdo desta obra está protegido por Lei. Qualquer forma de reprodução, distribuição, comunicação pública ou
Apoios / Institutional Support
transformação da totalidade ou de parte desta obra carece de
LabCom, Online Communication Lab
expressa autorização do editor e dos seus autores. A organização
Fundação para a Ciência e a Tecnologia
não se responsabiliza nem se pronuncia face à exactidão da informação constante deste livro. Os artigos, bem como
www.ubi.pt
a autorização de publicação das imagens são da exclusiva
www.designa.ubi.pt
responsabilidade dos autores.
Covilhã, 2014
COMISSÃO CIENTÍFICA \ SCIENTIFIC COMMITEE
Francisco Paiva (coordenação \ chair)
Jorge dos Reis
Universidade da Beira Interior PT
FBA Universidade de Lisboa PT José Bragança de Miranda
Ana Leonor M. Madeira Rodrigues
Universidade Nova de Lisboa PT
FAUTL Lisboa PT
Madalena Rocha Pereira
Anabela Gradim
Universidade da Beira Interior PT
FAL Universidade da Beira Interior PT
Maria da Graça Guedes
Anna Calvera
Universidade do Minho PT
FBA Universitat de Barcelona ES
Mário Bismarck
António Delgado
FBA Universidade do Porto PT
ESAD Instituto Politécnico de Leiria PT
Paulo Freire Almeida
Cristina Azevedo Tavares
EA Universidade do Minho PT
FBA, Universidade de Lisboa PT
Raúl Cunca
Catarina Moura
FBA Universidade de Lisboa PT
FAL Universidade da Beira Interior PT
Rita Salvado
Denis Alves Coelho
FE Universidade da Beira Interior PT
FE Universidade da Beira Interior PT
Rui Miguel
Elena González Miranda
FE Universidade da Beira Interior PT
FBA Universidad del País Vasco ES
Sheila Pontis
Fátima Caiado
LCC London University of the Arts UK
FAL Universidade da Beira Interior PT
Teresa Franqueira
Heitor Alvelos
DCA Universidade de Aveiro PT
FBA Universidade do Porto PT
Urbano Sidoncha
Helena Barbosa
FAL Universidade da Beira Interior PT
DCA Universidade de Aveiro PT Hélène Saule-Sorbé FBA Université Bordeaux 3 FR Inmaculada Jiménez FBA Universidad del País Vasco ES
\ REFEREES
Jacek Krenz FE Universidade da Beira Interior /UTGdansk PL
Anabela Gradim, António Delgado,
João Paulo Queiroz
Catarina Moura, Denis Coelho, Elena González Miranda,
FBA Universidade de Lisboa PT
Francisco Paiva, Heitor Alvelos, Helena Barbosa,
João Sousa Cardoso
Inmaculada Jiménez, Jacek Krenz, Joaquim Paulo Serra,
Universidade Lusófona do Porto PT
Madalena Rocha Pereira, Paulo Freire Almeida,
Joaquim M. Paulo Serra
Rita Salvado, Rui Miguel, Sheila Pontis,
FAL Universidade da Beira Interior PT
Teresa Franqueira, Urbano Sidoncha
CARACTERÍSTICAS PROJETUAIS DO M-COMMERCE: UM ESTUDO DE CASO SOB A ÓPTICA DO DESIGN DE INTERAÇÃO ID 153 Filipe Maciel Gonçalves Tobias Mulling Universidade Federal de Pelotas. Brazil
ABSTRACT This paper aims to analyze the projective characteristics of e-commerce, in order to propose a suitable solution to the purchasing process through smartphones (m-commerce), from the point of view of interaction design. It is a study of concepts around the areas surrounding the objective of this work, seeking to understand them to apply the relevant problem. Then it made a bibliographical survey of the meanings and functions of e-commerce and its derivatives, in order to interpret the process of purchasing of these systems and incorporate into the mobile environment. With literatures relating to interaction design proposes a project of buying a m-commerce process, based on e-commerce Extra. PALAVRAS-CHAVE m-commerce, design de interação, user experience, e-commerce, mobile design.
DESIGNA2013 - PROCEEDINGS - CARACTERÍSTICAS PROJETUAIS DO M-COMMERCE: UM ESTUDO DE CASO SOB A ÓTICA DO DESIGN DE INTERAÇÃO
143
INTRODUÇÃO A popularização do e-commerce é cada vez maior. Somente em 2012, no Brasil, foram faturados R$ 22,5 bilhões de reais com vendas on-line, um crescimento de 21% em relação ao mesmo período do ano anterior (E-BIT, 2013: 12). Em paralelo, os smartphones se tornaram tão importantes para os consumidores que 27% preferem ficar sem TV do que sem eles (GOOGLE, 2012). Este fato abre novas opções para se interagir com o comportamento das pessoas. O acesso à Internet tornou-se ainda mais ubíquo. Diferente do desktop, na qual o usuário precisava estar em um determinado local para ter acesso à rede, o mobile permite que pessoas conectem-se de qualquer lugar com uma estrutura de Internet sem fio disponível. Utilizando-se desta premissa, e baseando-se nas bibliografias recentes sobre design de interação, foi realizada uma proposta proposta de design do processo de compra (carrinho de compras) de um m-commerce, com foco para smartphones. M-COMMERCE O m-commerce é caracterizado como a compra e venda de bens e serviços através de dispositivos portáteis sem fio. Algumas características deste são: Comodidade: O consumidor está no aeroporto prestes a embarcar para suas férias. No entanto lembra que não efetuou o pagamento de algumas contas. Basta acessar os serviços das empresas contratadas através do seu smartphone e quitá-las dali mesmo, para então poder embarcar tranquilamente. Oportunidade: Através de aplicativos específicos o lojista pode conquistar a atenção dos e-consumidores disparando ofertas “imperdíveis” ao perceber que o mesmo encontra-se próximo de sua loja, utilizando o serviço de geolocalização presente na maioria dos smartphones. Impulso: O consumidor está retornando para casa após um dia inteiro de trabalho e, ao entrar no ônibus, percebe uma pessoa qualquer utilizando uma camiseta com o modelo novo de uma marca que gosta. Com um smartphone e conexão à internet disponíveis, ele tem a chance de pesquisar sobre aquele modelo e - por impulso - adquiri-lo antes mesmo de chegar em casa!
144 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR
Agilidade: Um casal decide ir ao cinema poucos minutos antes do filme começar. Antigamente poderiam perder ainda mais tempo em filas de bilheterias ou até mesmo comprando os bilhetes via desktop. Mas através do m-commerce, enquanto deslocam-se para o cinema, efetuam a compra antes mesmo de chegar ao local. Engajamento: Com o aumento das vendas via m-commerce o crescimento do s-commerce é consequência. Da mesma forma que os e-consumidores terão maior facilidade para comprar, eles terão a oportunidade de discutir, pesquisar, indicar ou criticar os produtos e serviços em questão. DESIGN DE INTERAÇÃO APLICADO A DISPOSITIVOS MÓVEIS Desenvolvedores, em vez de planejar e executar com a mente no sentido de satisfazer as necessidades das pessoas que compram e usam seus produtos, acabam por criar soluções tecnologicamente específicas, que são difíceis de usar e controlar (COOPER, 2007: 3). Para auxiliar neste processo existem quatro atividades básicas do design de interação (PREECE, 2005: 33): 1. Identificar necessidades e estabelecer requisitos; 2. Desenvolver designs alternativos que preencham esses requisitos; 3. Construir versões interativas dos designs, de maneira que possam ser comunicados e analisados; 4. Avaliar o que está sendo construído durante o processo. O design de experiência do usuário foca o processo no usuário: em suas expectativas, necessidades e atitudes. Constituído, em uma visão geral, pela intersecção de três características - forma, conteúdo e comportamento (figura 1).
Figura 1 Design de experiência do usuário (COOPER, 2007: xxxi.)
DESIGNA2013 - PROCEEDINGS - CARACTERÍSTICAS PROJETUAIS DO M-COMMERCE: UM ESTUDO DE CASO SOB A ÓTICA DO DESIGN DE INTERAÇÃO
145
O estudo do comportamento dos usuários é importante para que o projeto possa satisfazer suas expectativas com o menor esforço possível. É importante analisar e avaliar as atitudes dos usuários no ambiente off-line, antes de transportar esse comportamento para o ambiente on-line. APLICATIVOS MÓVEIS Aplicativos móveis são aqueles desenvolvidos para funcionarem especificamente em mobile. Existem, basicamente, duas formas de aplicativos móveis: os “native apps” e “web apps”. A escolha na forma de desenvolvimento de um aplicativo móvel é primordial para o designer.
Figura 2 - Principais diferenças entre native apps e web apps (CALORE, 2010; MUDGE, 2012)
146 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR
RECOMENDAÇÕES PARA O PROJETO DE APLICATIVOS MÓVEIS Apesar do rápido amadurecimento do mobile em relação à forma de navegação na web, ainda há um longo caminho a ser percorrido em termos de padronização no desenvolvimento de aplicativos móveis. Mesmo contendo princípios semelhantes ao design para websites, é necessário atentar-se para algumas diferenças a fim de apresentar uma boa experiência ao usuário. Resolução da tela: existem diversas resoluções de tela diferentes nos smartphones. Decidir qual a resolução será utilizada como ponto de partida para o projeto é um passo importante no processo.
Figura 3 - Resolução de alguns smartphones
Reduzir conteúdo: Reduzir a densidade de informação do aplicativo é o primeiro passo para a organização do conteúdo. Dispositivos móveis requerem equipes de desenvolvimento de software para focar apenas os dados mais importantes e ações em um aplicativo. Você tem que priorizar (WROBLEWSKI, 2009). É preciso olhar para o design do site de uma maneira nova, que é decididamente mais restritiva do que o projeto para navegadores padrão (CHAPMAN, 2010). Imagens: reduzir o número de imagens na aplicação torna seu carregamento mais rápido e sua navegação mais objetiva.
DESIGNA2013 - PROCEEDINGS - CARACTERÍSTICAS PROJETUAIS DO M-COMMERCE: UM ESTUDO DE CASO SOB A ÓTICA DO DESIGN DE INTERAÇÃO
147
Toque: é necessário projetar interfaces em que as áreas clicáveis não exijam esforço por parte do usuário. O guia de desenvolvimento de aplicativos móveis para o iPhone, por exemplo, sugere uma área mínima de 44x44 pixels para o toque. Interação: o uso do toque atribui um tipo de experiência diferente do desktop. Sendo assim, tornar as transições entre telas e comandos do aplicativo atribui valor à experiência do usuário. É importante, também, que o designer esteja sempre atento ao mercado industrial para que possa sugerir e implementar novas dicas e práticas. Com a evolução dos dispositivos móveis e dos seus sistemas operacionais passarão a surgir novas possibilidades de interação e navegação, oportunizando ainda mais a promoção de uma melhor experiência do usuário. DESIGN DE UM M-COMMERCE Para o desenvolvimento da web app foram priorizadas as informações e ações mais relevantes, deixando as demais em uma posição menos privilegiada. Por se tratar de uma tela com pouca área de visibilidade, optou-se pela utilização de uma barra de topo fixa (header) contendo 4 botões de ação nas áreas de navegação comum do site: página inicial, pesquisar, carrinho de compras e menu. Logo abaixo, também fixa, há uma navegação estrutural (breadcrumb) que auxilia o usuário a entender em qual região do web app está (figura 4).
Figura 4 Detalhe do produto
148 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR
O carrinho de compras é um resumo dinâmico de todos os produtos adicionados para compra (figura 5). Nesta página são exibidos alguns dados dos produtos e opções para adicionar serviços (como embalagem para presente e garantia estendida).
Figura 5 - Carrinho de compraso
Esta é a última etapa em que o header é exibida da forma padrão. A partir deste momento ela passa a ser simplificada, como na versão desktop, com o intuito de focar o usuário no processo da compra. O checkout, assim como na versão desktop, é composto por 3 etapas: login, endereço e pagamento, consecutivamente. Para evitar que usuários leigos não compreendam a mensagem chamamos a etapa “login” de “identificação”.
Figura 6 As 3 etapas do checkout
DESIGNA2013 - PROCEEDINGS - CARACTERÍSTICAS PROJETUAIS DO M-COMMERCE: UM ESTUDO DE CASO SOB A ÓTICA DO DESIGN DE INTERAÇÃO
149
O usuário antes de escolher qual a forma de pagamento já sabe quais serão as vantagens e as condições nas diferentes opções disponíveis. Para ressaltar a importância da ação a ser tomada, o botão “Finalizar compra” foi decorado com a cor verde (figura 7), com a pretensão de demonstrar ao usuário que é a sua última ação no processo de compra. Ao clicar no botão “Finalizar compra” o usuário encerra o processo de compra. Se os dados bancários estiverem corretos, a compra é consumada com sucesso.
Figura 7 Formas de pagamento
Durante a presente proposta optou-se por simplificar ao máximo a quantidade de conteúdo disponíveis, tornando as páginas mais leves e fáceis de se interpretar. O uso de uma navegação linear, na qual percorrem-se as telas obtendo informações em uma ordem coerente, permitiu que o usuário chegasse ao final da compra ciente dos avisos e valores atribuídos ao processo. CONCLUSÃO O presente estudo objetivou entender as técnicas e processos que cerceiam o design de interação aplicados ao m-commerce. Compreender o conteúdo a fim de torná-lo relevante para o usuário mostrou-se parte indispensável da pesquisa. Além disso, percebeu-se a necessidade de atentar-se ao comportamento do usuário. Forma, conteúdo e comportamento devem integrar-se, de maneira que o resultado final permita ao usuário utilizar as ferramentas disponíveis com consistência e facilidade.
150 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR
O aumento do uso de smartphones abre caminhos para que o m-commerce se desenvolva e passe a fazer parte, ainda mais, do dia-a-dia dos e-consumidores, transformando o comportamento do consumidor dentro das lojas físicas. Concluindo, o papel do designer é de extrema importância para os novos comportamentos humanos. Novidades tecnológicas surgem a todo instante numa velocidade superior a que os usuários em geral possam assimilar. A interdisciplinaridade da profissão exige que o profissional posicione-se como mediador entre a sociedade e a tecnologia, criando soluções para que todos possam usufruir com excelência os novos produtos e formas de interação com o meio digital criados. Estruturar estas tecnologias e apresentar soluções focadas na experiência do usuário passa a ser um desafio ainda maior do que resolver bem visualmente os projetos.
REFERÊNCIAS Calore, Michael. (2010). How Do Native Apps and Web Apps Compare. Retrieved 16 julho 2013 from http:// www.webmonkey.com/2010/08/how-do-native-apps-and-web-apps-compare/ Chapman, Cameron. (2010). Mobile Web Design: Tips and Best Practices. Retrieved 20 julho 2013 from http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html. Cooper, Alan; Reimann, Robert; & Cronin, David. (2007). About Face 3: The Essentials of Interaction Design. Indianápolis: Wiley Publishing. e-Bit. (2013). Relatório Webshoppers 27a edicão. Retrieved 02 julho 2013 from http://www.webshoppers. com.br. Google. (2012). Nosso Planeta Mobile: Brasil - Como entender o usuário de celular. Retrieved 10 julho 2013 from http://www.thinkwithgoogle.com/mobileplanet/pt-br. Mudge, JT. (2012). Native App vs. Mobile Web App: A quick comparsion. Retrieved 16 julho 2013 from http:// sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison. Preece, Jenny; Rogers, Yvonne; & Sharp, Helen. (2005). Design de Interacão: Além da Interacão HomemComputador. 1a Edição. São Paulo: Bookman Companhia Editora. Wroblewski, Luke. (2009). Mobile First. Retrieved 09 julho 2013 from http://www.lukew.com/ff/entry.asp?933.
DESIGNA2013 - PROCEEDINGS - CARACTERÍSTICAS PROJETUAIS DO M-COMMERCE: UM ESTUDO DE CASO SOB A ÓTICA DO DESIGN DE INTERAÇÃO
151
© DESIGNA 2013 - INTERFACE Proceedings Organização / Executive Commitee
Contactos / Contacts
Francisco Paiva
Faculdade de Artes e Letras
Catarina Moura
Departamento de Comunicação e Artes Rua Marquês d´Ávila e Bolama
Coordenação Científica / Chair
6200-001 Covilhã, Portugal
Francisco Paiva
+351 275242023
Administração / Administration
[email protected]
Mércia Pires www.ubi.pt Design Gráfico / Graphic Design
www.designa.ubi.pt
Sara Constante Covilhã, 2014 Informática / Informatics Marco Oliveira Relações Públicas / Public Relations Gisela Gonçalves - Mestrado em Comunicação Estratégica Parcerias / Partnerships Biblioteca Online de Design - www.bond.ubi.pt Museu de Lanifícios - www.museu.ubi.pt CooLabora - Intervenção Social - www.coolabora.pt Edição / Edited by Universidade da Beira Interior - www.ubi.pt Impressão / Printing (on-demand) Serviços Gráficos da UBI ISBN 978-989-654-139-2 (papel) 978-989-654-140-8 (e-pub) 978-989-654-141-5 (pdf) Apoios / Institutional Support LabCom, Online Communication Lab - www.labcom.ubi.pt Fundação para a Ciência e a Tecnologia - www.fct.pt
DESIGNA 2013 CONFERÊNCIA INTERNACIONAL DE INVESTIGAÇÃO EM DESIGN \ INTERNATIONAL CONFERENCE ON DESIGN RESEARCH 21-22 NOV 2013 UNIVERSIDADE DA BEIRA INTERIOR
www.designa.ubi.pt
978-989-654-139-5
COVILHÃ PT
