UX DESIGN INTRODUZIDO NO DESENVOLVIMENTO DE ..., Provas de Design

Baixe UX DESIGN INTRODUZIDO NO DESENVOLVIMENTO DE ... e outras Provas em PDF para Design, somente na Docsity!

SUPERIOR DE TECNOLOGIA EM DESIGN GRÁFICO

ALLAN PETTERSON DA SILVA PINHEIRO

UX DESIGN INTRODUZIDO NO DESENVOLVIMENTO DE

INTERFACES GRÁFICAS

Brasília - DF

ALLAN PETTERSON DA SILVA PINHEIRO

UX Design Introduzido No Desenvolvimento De

Interfaces Gráficas

Trabalho de conclusão de curso (TCC) apresentado como requisito para obtenção ao grau de tecnólogo em comunicação social – Design Gráfico.

Orientadora: Claudia Busato

Brasília - DF

Dedico este trabalho a minha mãe por ter sido meu maior exemplo em toda minha vida.

AGRADECIMENTOS

Gostaria de agradecer primeiramente a Deus por ter me dado saúde para ir atrás dos meus objetivos. Aos meus pais por terem me educado com disciplina e amor, formando-me uma pessoa honesta. A minha namorada, Amanda Paula, por ter me dado total apoio e incentivo em todo o decorrer do meu curso. E a minha orientadora Claudia Busato por oportunidade e apoio na elaboração deste trabalho.

RESUMO

Este trabalho falará sobre Design de Experiência do Usuário ( UX Design ) e como ele pode ser um forte aliado no desenvolvimento de interfaces gráficas. Procederemos a partir do problema de estudo: O UX Design pode favorecer a relação do usuário com uma interface de aplicativos móveis, sites ou softwares? Ele tem como objetivo central destacar a importância do UX design na elaboração de interfaces gráficas, colocando o usuário no centro do processo. Procedimentos mutáveis, resultado da evolução de filosofias projetuais, tecnologias e contextos socioeconômicos, em que seus significados são produzidos tanto pelos designers que pensam na solução quanto pelos usuários que a experienciam.

Palavras-Chave: UX design , UI design , design de interação, interfaces gráficas usabilidade.

ABSTRACT

The present study analyzes User Experience Design (UX Design) and how it can be a strong ally in the development of graphical interfaces. We proceed from the case study: the UX design can foster users relationship with a mobile application interface, sites or software? It was aimed at highlighting the importance of UX design in the development of graphical user interfaces, putting the user at the center of the process. Mutable procedures, result of development philosophies projective, technologies and socio-economic contexts in which their meanings are produced both by designers who developed the solution as the users that experience it.

Keywords: UX design, UI design, Interaction Design, Graphics interface, Usability

SUMÁRIO

• 1. INTRODUÇÃO
  • 1.1 Tema
  • 1.2 Justificativa
  • 1.3 Objetivos
    • 1.3.1 Objetivo geral................................................................................
    • 1.3.2 Objetivos específicos
  • 1.4 Metodologia
• 2. UX DESIGN
  • 2.1 Elementos do UX design
    • 2.1.1 Interface
    • 2.1.2 IHC e usabilidade
    • 2.1.3 Acessibilidade
    • 2.1.4 Arquitetura da informação
    • 2.1.5 Design de interação
• 3. PLANEJANDO UMA INTERFACE
  • 3.1 Definição da estratégia........................................................................
    • 3.1.1 Blueprint
    • 3.1.2 Consumer journey map (mapa da jornada do consumidor)
    • 3.1.3 Personas
  • 3.2 Produção de ideias..............................................................................
    • 3.2.1 Brainstorming
    • 3.2.2 Storyboards
    • 3.2.3 Taxonomia
  • 3.3 Planejamento
    • 3.3.1 Sitemap (mapa do site)
    • 3.3.2 Roadmap
  • 3.4 Pesquisa e validação
    • 3.4.1 Focus group (grupo de foco)
    • 3.4.2 Teste de usabilidade.....................................................................
    • 3.4.3 Card sorting
    • 3.4.4 Avaliação heurística......................................................................
• 4. DESIGN DE INTERFACES.......................................................................
  • 4.1 Sketches
  • 4.2 Wireframes
  • 4.3 Protótipos
  • 4.4 Pattern library ( biblioteca de padrões).................................................
• 5. CONSIDERAÇÕES FINAIS
• 6. REFERÊNCIAS

comportavam enquanto utilizavam ferramentas complexas e submetidas a diferentes ambientes. Don Norman popularizou o termo “ user experience ” enquanto trabalhava na Apple nos anos 90. Jakob Nielsen, escreveu em 1995 as famosas 10 heurísticas de usabilidade, que iremos citar mais a frente. Segundo o Think with Google^3 :

UX , é a experiência do consumidor ao usar seu produto ou serviço. O UX tem um papel tão importante hoje que mesmo profissionais de marketing precisam entender um pouco disso. Isso porque o UX trabalha com questões funcionais e práticas, mas também com todo o lado emocional da experiência. Para isso, você faz perguntas como: Quem é seu consumidor? O que ele quer? Ele conseguiu? Ele navegou com facilidade? A experiência foi prazerosa? Ele usaria seu produto ou serviço novamente? Antes, todo mundo fazia sites para um usuário que estava sentado, na frente do computador, com uma tela grande, um teclado e um mouse. Quando você despluga o usuário da frente do computador, o contexto passa a ser essencial. Ele está no supermercado com duas crianças puxando a barra da calça? No carro, dirigindo, e nem deveria estar digitando? Ou está no sofá da sala, vendo TV, navegando e fazendo buscas ao mesmo tempo?

Este termo não tem um único significado, ele abrange várias áreas e aspectos que partem do pressuposto: proporcionar uma experiência satisfatória ao usuário. Iremos transitar entre as diversas disciplinas que compõem o UX Design, tais como: Interação Humano-Computador, Design de Interação, Arquitetura da Informação (AI), Usabilidade e Princípios Heurísticos. Além de apresentar algumas das mais empregadas técnicas para projeto, desenvolvimento e avaliação de interfaces. Edu Agni (2012) traz sua opinião pelo site UX.BLOG^4 sobre as diferentes disciplinas presentes no UX Design :

De fato, considero a área que hoje chamamos de User Experience Design nada mais é do que uma mediação coordenada de diferentes disciplinas. Não é que possamos projetar a experiência de um usuário, afinal cada pessoa traz consigo sua própria cultura, talento, sensibilidade, desejos, motivações e comportamento. Porém, ao tratar o projeto de forma mais holística, alinhando as diferentes disciplinas a objetivos comuns, podemos trabalhar para que os produtos forneçam recursos que permitam que os usuários criem boas experiências com eles.

(^3) Think With Google. UX - A experiência do usuário. Disponível em <https://www.thinkwithgoogle.com/intl/pt-br/articles/ UX -user-experience.html>. Acesso em: 16 de Março de 2016. 4 AGNI, Edu. As disciplinas da Experiência do Usuário. Disponível em: http://www.uxdesign.blog.br/user-experience/as-disciplinas-da-experiencia-do-usuario/. Acesso em: 16 de Março de 2016.

UX Design vai além da usabilidade percorrendo o lado emocional do usuário, provocando uma resposta emocional em relação ao que ele acabou de efetuar. Sua missão é transformar experiências comuns em experiências excepcionais. “Interface gráfica é um conceito da forma de interação entre o usuário do computador e um programa por meio de uma tela ou representação gráfica, visual, com desenhos, imagens, etc. Geralmente é entendido como a “tela” de um programa.” (ELIAS, Marcos. O que é interface gráfica?. Disponível em: http://www.explorando.com.br/o-que-e-interface-grafica/. Acesso em: 28 abr. 2016 Por intermédio do livro de Duarte e Barros (2005) utilizaremos o método de pesquisa bibliográfica onde autores como Krug (2001), Memória (2006), Johnson (2001), Santa Rosa e Moraes (2012), Teixiera (2014), Rogers; Sharp e Preece (2013), Nielsen e Loranger (2007) e Kalbach (2009) nos ajudarão a alcançar os objetivos do trabalho. Para Duarte e Barros (2005, p. 51) a pesquisa bibliográfica “[...] é um conjunto de procedimentos pertinentes ao tema estudado e proceder à respectiva anotação ou fichamento das referências e dos dados dos documentos [...]”. No segundo capítulo iremos apresentar conceitos sobre UX design à luz de autores como Teixeira (2014) e Memória (2012). Traremos mais a fundo conceitos sobre cada disciplina que compõe o UX à perspectiva de autores como Johnson (2001) para conceituar inteerface. Santa Rosa e Moraes (2012), Teixeira (2014), Nielsen e Loranger (2007) para trazer conceitos e princípios sobre IHC e usabilidade. Além de conceituar acessibilidade através das obras de Kalbach (2009) e Rogers; Sharp e Preece (2013). Apresentaremos alguns conceitos sobre arquitetura da informação e alguns métodos que os arquitetos utilizam por meio dos autores Santa Rosa e Moraes (2012), além de artigos da internet para complementar o assunto. Definiremos design de interação através dos autores Rogers, Sharp e Preece (2013) e Teixeira (2014). No terceiro capítulo apresentaremos métodos eficazes para planejamento e pesquisa em UX design , através de autores como Santa Rosa e Moraes (2012), Teixeira (2014) e Krug (2001). No quarto capítulo apontaremos um fluxo bastante usado para o design de interfaces que parte do sketch , wireframes , protótipo até a biblioteca de padrões. Através de autores como Teixeira (2014), Rogers; Sharp e Preece (2013) e Kalbach (2009).

1.4 Metodologia

As ferramentas utilizadas para concluir um trabalho é crucial, em função disso, pesquisamos qual método mais acrescenta ao nosso estudo. Nos últimos anos foram publicados vários livros sobre UX Design e sobre suas disciplinas, por ser um assunto bastante amplo decidimos partir do método de pesquisa bibliográfica. Segundo Duarte e Barros (2005, p. 51):

Pesquisa bibliográfica, num sentido amplo, é o planejamento global inicial de qualquer trabalho de pesquisa que vai desde a identificação, localização e obtenção da bibliografia pertinente sobre o assunto, até a apresentação de um texto sistematizado, onde é apresentada toda a literatura que o aluno examinou, de forma a evidenciar o entendimento do pensamento dos autores acrescido de suas próprias ideias e opiniões.

O mesmo autor acrescenta, ainda, que a pesquisa bibliográfica trata de um conjunto de procedimentos que visa a identificar informações, selecionar documentos referentes ao tema pesquisado e fazer anotações e fichamentos dos mesmos, para que seja possível a sua utilização no trabalho acadêmico. O Design de Experiência do Usuário é um assunto com bastante volume teórico, muita prática e é, também, um objeto de estudo que faz parte das ciências humanas, portanto, não há fórmulas exatas que determinem um mesmo resultado em 100% dos casos. Muita bibliografia resultante de incessantes estudos e testes, enquadrando pessoas e máquinas, foram surgindo e enriquecendo as possibilidades de conquista de melhores resultados, por meio da aplicação desses conceitos. Levando isso em consideração, a pesquisa bibliográfica parece ser um método extremamente adequado e importante para o desenvolvimento deste projeto. Ainda citando Duarte e Barros (2005, p. 52): “A revisão da literatura é uma atividade contínua e constante em todo o trabalho acadêmico e de pesquisa, iniciando com a formulação do problema e/ou objetivos do estudo [...]”. Essa revisão se estende até mesmo a avaliação dos resultados. Palavras-chave foram selecionadas para fundamentar as partes de UX através de uma bibliografia mais adequada a cada uma dessas partes. Iniciamos conceituando UX Design através do conteúdo apresentado por Teixeira (2014) e Morville (2004). Conceitos foram trazidos para complemento do trabalho, conceitos estes sobre: Interação humano-computador, usabilidade, interface, arquitetura da informação e design de interação; definido pelos autores Nielsen e Loranger (2007), Santa Rosa e

Moraes (2012), Krug (2001), Memória (2006), Johnson (2001) e Rogers; Sharp e Preace (2013). Para o assunto principal do trabalho que é UX Design trouxemos referências atuais como Teixeira (2014) e Memória (2006), contando também com artigos da internet para enriquecimento do conteúdo. E por fim, todo o processo de desenvolvimento centrado no usuário por etapas, colocando em prática toda a metodologia estudada. Como diz Memória (2006, p. 7), “[...] um dos princípios que devem ser seguidos por aqueles que projetam produtos centrados nos usuários: as pessoas nunca estão erradas”. Baseando-se sempre no usuário desde a concepção do produto.

Figura 1 – Sketchpad , A Man-Machine Graphical Communication System.

Fonte: Computação Gráfica e Cinema. História da computação gráfica: Sketchpad , A Man-Machine Graphical Communication System. Disponível em: <https://computacaograficaecinema.wordpress.com/2013/07/05/historia-da-computacao-grafica- sketchpad-a-man-machine-graphical-communication-system-2/>. Acesso em: 30 abr. 2016.

Depois, vieram produtos digitais. Websites , aplicativos de celular, caixas eletrônicos, quiosques interativos, tablets , TVs digitais, videogames. O princípio continuou o mesmo: a experiência de usar um site , por exemplo, pode ser positiva ou negativa, dependendo do seu fluxo dentro dele. Normalmente, a experiência é positiva quando você consegue realizar a tarefa sem demora, frustração ou sem encontrar problemas no meio do caminho. Essa tarefa pode ser tanto funcional (entrar no seu internet banking para pagar um boleto bancário) ou emocional (entrar no site de uma rede social para saber o que seus amigos andam fazendo). (TEIXEIRA, 2014, p. 2).

O ser humano sempre buscou diferentes formas de estudo sobre o usuário para facilitar o uso dos objetos que são criados ao longo do tempo. Teixeira (2014, p. 2) apresenta diferentes pontos em relação a experiência:

Experiências são, obviamente, subjetivas. Cada pessoa tem uma experiência diferente ao usar um caixa eletrônico, por exemplo. Essa experiência é influenciada por fatores humanos (sua habilidade em usar caixas eletrônicos, sua visão, sua habilidade motora, sua capacidade de ler e entender o que está escrito na tela, seu humor naquele momento etc.) e por fatores externos (o horário do dia, o ambiente onde o caixa eletrônico está instalado, o fato de ter uma fila de pessoas atrás de você). Mas, apesar de subjetivas, essas experiências são projetadas por alguém. Alguém pensou e desenhou a

interface digital do caixa eletrônico para que os clientes do banco pudessem fazer transações sem precisar da interface humana. É a tal “interação homem- máquina” (HCI — Human-Computer Interaction ), um campo de estudo grandiosíssimo que mobiliza profissionais de vários perfis ao redor do mundo.

Pela variedade de perfis de usuários é necessário pesquisas, testes e mais estudos para identificar o público-alvo, mais a frente iremos apresentar alguns métodos mais utilizados para avaliação e projetos. Também iremos descobrir um pouco mais sobre Interação Humano-Computador no próximo capítulo, onde falaremos sobre essa matéria interdisciplinar que foi um dos primeiros estudos entre o usuário e a máquina. Figura 2 – Marcos históricos.

Fonte: Adaptado de (SOUZA, Rafaela. O que é UX Design? Disponível em: <http://www.raffcom.com.br/blog/o-que-e- UX -design/>. Acesso em: 30 abr. 2016).

Peter Moville (2004) criou um diagrama baseado nos aspectos do UX Design , o chamado “ User Experience Honeycomb” visível na Figura 3.