ATIVIDADE INDIVIDUAL - UX

Julia Marinho De Carvalho Cândido

Turma 01
Professor Yuri Lott
Introdução:

Com o objetivo de fazer-se entender do processo de desenvolvimento de

um produto digital (Website, App, Mobile Website, dentre outros) fez-se este
compilado de informações sobre o processo, com detalhes de cada fase do
mesmo assim como sua explicação em ordem cronológica de acontecimentos.
 Desenvolvimento:

A partir do momento que o cliente entra em contato inicia-se o processo

inicial do Briefing do projeto que trata-se de uma espécie de entrevista com o
cliente onde o mesmo irá relatar todos os detalhes do que deseja do produto,
assim como detalhes sobre a marca, tais como público-alvo, objetivo do
produto, dentre inúmeros outros, para que a empresa consiga entender melhor
tanto o cliente quanto o produto para iniciar a fase de validação do mesmo.
Fechado o briefing começa a fase de Benchmarking que consiste no
processo de coleta de informações do seguimento (e de concorrentes que
obtiveram tanto sucesso quanto falhas) para verificar o que já existe dentro do
mercado, assim não cria-se apenas mais um dentro de um mar de mesmos
produtos, pegar as melhores práticas do que já foi feito do mesmo seguimento
e aplica-las dentro do produto para a condução a um desempenho superior.
Após a validação inicial ocorrida no Benchmarking, onde você tem uma
breve noção se o seu produto já não existe e conseguiria concorrer ou não com
outros, é criada as Personas. São personagens fictícios criados para
representar os diferentes tipos de usuário dentro de um alvo demográfico,
atitude, comportamento ou cultura, que poderia utilizar o seu produto para que
no desenvolvimento do mesmo tenha-se um direcionamento do que esse
usuário fictício esperaria, conseguindo segmentar o seu mercado e atingir
aqueles que realmente usufruiriam do seu produto.
É então definido o MVP (produto viável mínimo) que seria a versão mais
simples de um produto que pode ser lançada com uma quantidade mínima de
esforço e desenvolvimento, não seria o MVP pronto ainda, apenas a definição
do que seria o mesmo, para ser apresentado como uma espécie de protótipo
para o cliente. O MVP aparecerá novamente mais no final do processo, como
observa-se no final desse texto.
É utilizada da metodologia ágil para simplificar e dinamizar os processos
da concepção da ideia até o produto final. A MA se trata de um conjunto de
técnicas e práticas para gestão de projetos que oferecem mais rapidez, eficácia
e flexibilidade. A título de curiosidade o objetivo inicial desta metodologia era
agilizar o desenvolvimento de softwares, mas foi tão bem sucedida que
ampliou-se para outros setores de tecnologia e hoje revolucionam a gestão de
empresas em diversas áreas. Dentre as principais características da MA
podemos destacar:
 Desenvolvimento incremental;
 Cooperação entre equipe e cliente (com foco no ciclo de feedback
constante);
 Entregas rápidas e de alta qualidade;
 Flexibilidade de escopo do projeto;
  Criação de valor progressiva e de acordo com as necessidades
do cliente;
 Adaptabilidade às e alto nível de inovação.
Com esta metodologia, é possível verificar resultados de forma rápida e
obter feedback constante durante todo o processo, ao invés da tradicional
metodologia cascata, onde uma alteração pode acabar sendo custosa tanto de
tempo quanto em dinheiro. Cada etapa do projeto (dentro da MA) é
considerada como um mini projeto, assim a cada etapa um mini projeto é
concluído e ao final de todos os processos todos os mini projetos tornam-se o
projeto final que teve todos os mini projetos aprovados e ajustados de acordo
com o feedback dos usuários testes e do cliente.
É construído então o Wireframe do website, que é um protótipo usado no
design de interface que sugere a estrutura de um sitio web (que seria o site em
si) e os relacionamentos entre todas as suas páginas e elementos. É uma
espécie de ilustração que antecede o layout de elementos fundamentais da
interface, ou seja seria o “esqueleto” de uma peça digital. Nele constam:
 O desenho da estrutura;
 O posicionamento das chamadas de destaque e menus;
 Definição de páginas e suas funcionalidades;
 Dentre outros.
O que facilita e norteia o desenvolvimento, contribuindo na previsão de
soluções amigáveis/usabilidade para o usuário que vai navegar no portal (site).
E após definido o Wireframe é que surge o Layout do site, podemos entender a
grosso modo que o layout seria o design que dá a “vida” ao projeto, ou seja, é a
parte visual que engloba a estética do projeto. Não é de hoje que existe o
ditado “Primeiro come-se com os olhos” e produtos digitais não fogem da regra,
sites com funcionalidade confusa e uma estética considerada “feia” são fatores
que fazem com que o cliente abandone o mesmo e procure outro, afetando até
na credibilidade que a marca passa.
Algumas vezes alguns pontos definidos no Wireframe não funcionam
bem no layout proposto, por inúmeros fatores, nesse momento é aconselhável
que se atente mais ao Wireframe e reveja o Layout, afinal a navegabilidade tem
que ser muito agradável e sem prover dificuldades para o cliente em sua
compreensão e usabilidade. Temos sempre que compreender que nem todo o
cliente entende de tecnologia, então o Wireframe e o Layout tem que atender a
ambos os públicos (leigos ou não em tecnologia).
Ao desenvolver a estrutura e o Layout do site é necessário atentar-se a
acessibilidade, como mencionado no parágrafo anterior, que se trata da prática
inclusiva também a pessoas com deficiência. Um site acessível a todos eleva o
valor pessoal e emocional da marca. Sites com pouca acessibilidade e
usabilidade tem dificuldade até mesmo na hora da entrada em ranking de sites
de pesquisa, já que os usuários não costumam ficar muito tempo neles e isso
afeta as métricas e algoritmos dos sites de pesquisa, que optam por mostrar os
concorrentes melhores cotados primeiramente, o que pode fazer com que o
usuário nunca chegue a conhecer o seu site através das formas comuns de
pesquisa e se por meio de um anúncio patrocinado, não venha a permanecer
muito tempo no mesmo por não ser de simples leitura por parte do usuário.
Um design limpo, com mensagem direta e destaque para o botão com a
chamada para a ação são normalmente postas como prioridades no
desenvolvimento de um site, existem alguns hábitos que ajudam na
acessibilidade e usabilidade do mesmo dentre eles estão:
 Link para página inicial no logotipo;
 Página 404 (a comum página de erro) personalizada;
 Tratar o usuário com uma pessoa impaciente, ou seja, garantir
que o design seja amigável;
 Páginas carregando rapidamente;
 Layout limpo (clean) sem muita poluição visual;
 Arquitetura da informação;
 Interação com o usuário (tal como botão de chat);
 Cores do site;
 Velocidade do site;
 Versatilidade/Responsividade/Mobilidade do site (se o seu site
não funciona bem em tablets e mobile, além do desktop, o usuário
pode deixar de querer estar ali)
No desenvolvimento de um site há também a construção do SiteMap,
que será mais aplicável na hora de análise de métricas. O SiteMap nada mais é
do que um arquivo que esclarece aos buscadores a estrutura de um site, tal
como suas atualizações e as principais páginas do site a serem indexadas, ou
seja, ele ordena e “traduz” os dados do seu site para a língua dos buscadores,
resumindo isso de forma legível. O uso deles se deve a agilização dos
rastreadores da web de detectar o conteúdo do seu site, ou seja, se eu tenho
um arquivo que diz o que contém em cada página, uma pessoa buscando por
algo específico é redirecionado de forma ágil ao meu site, ao invés dos
rastreadores demorarem longas pesquisas até entenderem que o meu site se
trata daquilo.
Após toda a estrutura e todos os estudos efetuados, é construído então
um protótipo, que nada mais é que um produto de trabalho da fase de testes ou
planejamento de um projeto, ele é o seu produto a ser testado para a lapidação
do mesmo. Dessa forma consegue-se testar a usabilidade, aceitação por parte
do usuário, evitando um lançamento desastroso de produto.
Com o protótipo finalizado inicia-se o teste de usabilidade, que tem como
objetivo a verificação da facilidade que o software ou site possui de ser
claramente compreendido e manipulado pelo usuário. É nesse momento em
que é verificado absolutamente tudo sobre o site, desde se o sistema utiliza
manuais, ajuda on-line, assistentes eletrônicos, se houveram bugs, etc. Em
resumo, teste de usabilidade é uma técnica de pesquisa utilizada para avaliar
um produto ou serviço. Os testes são feitos com usuários que fazem parte do
público-alvo definido lá nas personas. Eles devem ser feitos com usuários
representativos, não adianta testar com um público que não é o que te atende,
já que eles não serão os seus futuros clientes, não haveria conversão, assim
como com pessoas que são muito próximas de você, já que elas podem
enviesar o teste por não querer dar uma avaliação honesta com medo de “ferir
os sentimentos”.
O teste de usabilidade serve para responder perguntas do tipo: Os filtros
de busca são fáceis de usar? Como podemos melhorar o checkout? O menu é
claro? O direcionamento funciona? Meu usuário consegue navegar com
facilidade? Ele foca nas questões que envolvem navegação e entendimento da
interface.
E não responde bem perguntas do tipo: A maioria das pessoas vai pela
busca ou pelo menu? Que cor de botão converte melhor? Qual melhor opção
de nome para o meu produto?
Existem também a avaliação heurística, que é uma técnica de inspeção
que ajuda a identificar problemas de usabilidade em uma interface, é como
uma revisão da interface, levando em consideração os aspectos da experiência
do usuário recebidas após o teste de usabilidade.
Essa avaliação não substitui o teste de usabilidade, apesar de referir-se
a usabilidade do mesmo. Ela fornece um feedback rápido e relativamente
barato, pode ser feita em diversas fases do projeto e pode ser utilizado em
conjunto com outras metodologias de testes de usabilidade, entretanto ela
requer conhecimento e experiência para que seja aplicada de forma eficaz.
Tanto que é recomendável a utilização de vários especialistas diferentes
(normalmente de 3 a 5 profissionais) e problemas mais graves tendem a ser
passados despercebidos, por isso o ideal é que ela seja feita após o teste de
usabilidade.
Após tudo isso ser efetuado e o site ser lançado é necessário o
acompanhamento da análise de métricas. Métricas são medidas quantificáveis
utilizadas para analisar o desempenho de algo. Existem diversas métricas a
serem analisadas, ficar de olho nelas faz com que tenhamos um feedback de
coisas como: O meu usuário utiliza mais o meu site pelo menu ou pelo campo
de busca? O botão verde é mais acessado do que o vermelho? Qual a página
ou conteúdo do meu site que é mais visitado?
Com a resposta dessas perguntas é possível aprimorar cada vez mais e
entregar sempre o melhor resultado para o cliente. Efetuado todas essas
etapas e o cliente dando a aprovação o projeto é dado como finalizado e
entregue ao cliente.
BIBLIOGRÁFIA:
KALBACH, J. Design de navegação web: otimizando a experiência do usuário.
Porto Alegre: Bookman, 2009.

KRUG, S. Não me faça pensar. Uma abordagem do bom senso à

navegabilidade da web. São Paulo: Market Books, 2008.

LAUBHEIMER, P. Which UX deliverables are most commonly created and

shared? NN/g. 2015.
Disponível em: <https://www.nngroup.com/articles/common-ux-deliverables/>.
Acesso em: 11 ago. 2018.

LEAL FERREIRA, S. B.; NUNES, R.R. E-Usabilidade. 1. ed. LTC, 2008.

LÉVY, P. Cibercultura. São Paulo: Editora 34, 2003.

MARTIN, L. A lógica do consumo. Rio de Janeiro: Nova Fronteira, 2008.

MOORE, M.; KEARSLEY, G. A educação a distância: uma visão integrada. São

Paulo: Thomson Le, 2010.

MARKOVÁ, I. A fabricação da teoria de representações sociais. Cadernos de

Pesquisa, [s.l.], v. 47, n. 163, p. 358–375, 2017. DOI: 10.1590/198053143760.

MARKOVÁ, I. Dialogicality and social representations: the dynamics of mind.

Cambridge: Cambridge University Press, 2003.

MORVILLE, P.; ROSENFELD, L. Information architecture for the World Wide

Web. O`Reilly Media, 2006.

MOSCOVICI, S. Representações sociais. 8. ed. Petrópolis: Vozes, 2011.

MOTA, M. DA. Uma introdução ao estudo cognitivo da memória uma

introdução ao estudo cognitivo da memória a curto prazo: da teoria dos
múltiplos armazenadores a memória de trabalho. [s.l.]: [s.n.], [s.d.]. Disponível
em: <http://www.scielo.br/pdf/estpsi/v17n3/02.pdf>. Acesso em: 11 ago. 2018.

NIELSEN, J., 2012. Introduction to usability. Disponível em:

http://www.nngroup.com/articles/ usability-101-introduction-to-usability/. Acesso
em: 13 de jun. 2014.

NIELSEN, J.; MACK, R. L. Usability inspections methods. 1. ed. New York:

John Wiley & Sons, 1994.

NIELSEN, J.; TAHIR, M. Homepage: Usabilidade. 50 websites desconstruídos.

Rio de Janeiro: Campus, 2002.
NIELSEN, J; LORANGER, H. Usabilidade na web – projetando websites com
qualidade. Rio de Janeiro: Campus, 2002.

NIELSEN, Jakob. How to conduct a heuristic evaluation. Nielsen Norman

Group, 1995. Disponível em: <http://www.nngroup.com/articles/how-to-conduct-
a-heuristic-evaluation/>. Acesso em: 12 nov. 2013.

NIELSEN, Jakob. Projetando websites. Rio de Janeiro: Campus, 2000.

NIELSEN, Jakob. Usability engineering. 1. ed. San Diego: Morgan Kaufmann,

1993.

NONAKA, T.; TAKEUCHI, H. Gestão do conhecimento. 2. ed. Porto Alegre:

Bookman Companhia ED, 2008.

NORMAN, D. 1988. The design of everyday things. New York, Basic Books.

NORMAN, D. 2004. Emotional design: why we love (or hate) everyday things.
New York, Basic Books.

NORMAN, D. A. Emotional design: why we love (or hate) everyday things.

Basic Books, 2003.
PADOVANI, S.; SCHLEMMER, A.; SCARIOT, C.A. Usabilidade & user
experience, usabilidade versus user experience, usabilidade em user
experience? Uma discussão teórico-metodológica sobre comunalidades e
diferenças. In: 12. Ergodesign – Usihc, 2012, Natal. Anais. Natal: LEUI –
LEXUS, 2012, p. 13- 01-13.

PINKER, S. Como a mente funciona. 3. ed. São Paulo: Companhia das Letras,
2012.

PRADEEP, A.K. O cérebro consumista. São Paulo: Cultrix; 2012.

PREECE, J.; ROGER, Y.; SHARP, H. Design de interação. 3. ed. Porto Alegre:
Bookman Companhia ED, 2013.

REIS, G. A. Dos. Centrando a arquitetura de informação no usuário. 250 p.

2007. Disponível em: <http://www.guilhermo.com/mestrado/Guilhermo_Reis-
Centrando_a_Arquitetura_de_Informacao_no_usuario.pdf>. Acesso em: ago.
2018.

RIES, E. A Startup Enxuta. [s.l.]: [s.n.], 2011.TOFFLER, A. A terceira onda. Rio

de Janeiro: Record, 1997.

ROSENFELD, L. e P. MORVILLE. Information architecture for the World Wide

Web. Sebastopol, CA: O'Reilly, 1998.
SANTOS, Robson. Usabilidade de interfaces e arquitetura da informação:
alguns aspectos da organização de conteúdo para o meio digital. In: Anais
Abergo, Gramado: 2000.

TEDESCO, Donna; SCHADE, Amy; PERNICE, Kara e NILSEN, Jakob. Site

Map Usability. Nilsen Norman Group, 2008. Disponível em:
<http://www.nngroup.com/reports/sitemaps/ SiteMapUsability-2nd-edition.pdf>.
Acesso em: 16 ago. 2012.

TEIXEIRA, F. UX Collective __. [s.d.]. Disponível em:

<https://brasil.uxdesing.cc/>. Acesso em: 11 ago. 2018.

TEIXEIRA, F. UX Tools for every step in your design process – UX Collective.

[s.d.]. Disponível em: <https://uxdesing.cc/ux-user-research-and-user-testing-
tools-2d339d379dc7>. Acesso em: 11 ago. 2018.

THE INFORMATION ARCHITECTURE INSTITUTE. 2010. Teste de

usabilidade. Disponível em: http://iainstitute.org/. Acessado em 25 de
novembro. 2013.

VENEZIANI, A. C. 2013. Norma ISO 9126. Disponível em:

http://usabilideiros.com.br/index.php/qualidade-de-software/item/5-norma-iso-
9126. Acesso em: 10 abr. 2015.

WHALEN, J.; LYONNAIS, S. The Six Minds of UX Design | Adobe Blog. 2016.
Disponível em: <https://theblog.adobe.com/the-six-minds-of-ux-desing>.
Acesso em: ago. 2018.

TEIXEIRA, F. UX Tools for every step in your design process – UX Collective.

[s.d.]. Disponível em: <https://uxdesing.cc/ux-user-research-and-user-testing-
tools-2d339d379dc7>. Acesso em: 11 ago. 2018.

CARD SORTING: a arquitetura de informação construída pelos usuários. [s.d.].

Disponível em: <https://coletivoux.com/card-sorting-a-arquitetura-de-
informação-construída-pelos-usuários-54b9f892e38e>. Acesso em: set. 2018.

PADOVANI, S.; RIBEIRO, M. A. Card sorting: adaptação da técnica para

aplicação ao design de sistemas de informação não digitais. InfoDesign –
Revista Brasileira de Design da Informação. [s.l.], v. 10, no 3, p. 293–312,
2013.

REIS, G. A. Dos. Centrando a arquitetura de informação no usuário. 250 p.

2007. Disponível em: <http://www.guilhermo.com/mestrado/Guilhermo_Reis-
Centrando_a_Arquitetura_de_Informacao_no_usuario.pdf>.

LASTRES, H.; ALBAGLI, S. Informação e globalização na era do

conhecimento. Rio de Janeiro: Editora Campus Ltda, 1999. 163 p. ISBN: 85-
352-0489-X.
ROGERS, Yvonne; SHARP, Helen; PREECE, Jennifer. Design de interação –
além da interação homem-computador. 3. ed. [s.l.]: Bookman, 2013.