UNIVERSIDADE TECNOLÓGICA FEDERAL DO...
98
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ CAMPUS CURITIBA - SEDE CENTRAL DEPARTAMENTO ACADÊMICO DE DESENHO INDUSTRIAL CURSO TECNOLOGIA EM DESIGN GRÁFICO RENAN TAKAHASHI MEIRA ABROADLY: UM APLICATIVO MOBILE PARA INTERCAMBISTAS TRABALHO DE CONCLUSÃO DE CURSO CURITIBA 2018
Transcript of UNIVERSIDADE TECNOLÓGICA FEDERAL DO...
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ CAMPUS CURITIBA - SEDE CENTRAL
DEPARTAMENTO ACADÊMICO DE DESENHO INDUSTRIAL CURSO TECNOLOGIA EM DESIGN GRÁFICO
RENAN TAKAHASHI MEIRA
ABROADLY: UM APLICATIVO MOBILE PARA INTERCAMBISTAS
TRABALHO DE CONCLUSÃO DE CURSO
CURITIBA 2018
RENAN TAKAHASHI MEIRA
ABROADLY: UM APLICATIVO MOBILE PARA INTERCAMBISTAS
Trabalho de Conclusão de Curso de graduação, apresentado à disciplina de Trabalho de Trabalho de Conclusão de Curso, do Curso Superior de Tecnologia em Design Gráfico do Departamento Acadêmico de Desenho Industrial - DADIN - Universidade Tecnológica Federal do Paraná - UTFPR, como requisito parcial para obtenção do título de Tecnólogo.
Orientadora: Profa. Isabela Mantovani Fontana.
CURITIBA
2018
TERMO DE APROVAÇÃO
TRABALHO DE CONCLUSÃO DE CURSO 089
Abroadly: um aplicativo mobile para intercambistas
por
Renan Takahashi Meira – 1559990
Trabalho de Conclusão de Curso apresentado no dia 30 de novembro de 2018 comorequisito parcial para a obtenção do título de TECNÓLOGO EM DESIGN GRÁFICO,do Curso Superior de Tecnologia em Design Gráfico, do Departamento Acadêmicode Desenho Industrial, da Universidade Tecnológica Federal do Paraná. O aluno foiarguido pela Banca Examinadora composta pelos professores abaixo, que apósdeliberação, consideraram o trabalho aprovado.
Banca Examinadora: Prof. Marco André Mazzarotto Filho (MSc.)Avaliador IndicadoDADIN – UTFPR
Profa. Priscila Daienny Zimermann Nardon (Esp.)Avaliadora ConvidadaDADIN – UTFPR
Profa. Isabela Mantovani Fontana (MSc.)OrientadoraDADIN – UTFPR
“A Folha de Aprovação assinada encontra-se na Coordenação do Curso”.
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁPR
Ministério da EducaçãoUniversidade Tecnológica Federal do ParanáCâmpus CuritibaDiretoria de Graduação e Educação ProfissionalDepartamento Acadêmico de Desenho Industrial
AGRADECIMENTOS
Agradeço a todos que apoiaram e incentivaram a conclusão deste trabalho. Em
especial aos meus pais e família, por todo suporte e apoio durante o percurso da
minha trajetória acadêmica. Aos meus amigos que puderam compartilhar comigo
muitas dificuldades encontradas durante os últimos cinco anos. À professora Isabela
Mantovani Fontana, pela atenção, otimismo e simpatia que foi disposto no decorrer
deste trabalho.
Por fim, agradeço a todos que tiveram participação durante a minha formação,
incluindo colegas, parceiros de trabalhos, e aos professores do Departamento
Acadêmico de Desenho Industrial (DADIN) que puderam compartilhar o seu
conhecimento e ser uma fonte de inspiração pessoal. Em suma, a todos que, de
alguma forma, estiveram ao meu lado durante a graduação, sempre me incentivando
e me ajudando a buscar o meu melhor.
RESUMO MEIRA, Renan Takahashi. Abroadly: um aplicativo mobile para intercambistas. 2018. Trabalho de Conclusão de Curso em Tecnologia em Design Gráfico – Universidade Tecnológica Federal do Paraná. Curitiba, 2018. Este trabalho apresenta o projeto de pesquisa e desenvolvimento do conceito de produto, e da interface e navegação de um aplicativo móvel voltado para intercambistas. Para isso, o autor utilizou como fundamento a metodologia de Garrett, que divide o desenvolvimento das interfaces em cinco planos. Durante a execução das etapas do projeto, foi necessário a realização de pesquisas acerca do problema, análises, questionários e teste de usabilidade com o público-alvo. Para tanto, foi buscado respaldo em conceitos e diretrizes do design de interface e usabilidade, a partir de um estudo bibliográfico. Estes conteúdos permitiram a geração de alternativas que puderam ser pensadas e projetadas para que no final, a solução pudesse ser efetiva, intuitiva e acessível. O aplicativo proposto visa dispor uma plataforma online voltada para intercambistas, disponibilizando informações úteis sobre cada período de intercâmbio e permitindo o compartilhamento de experiências pessoais, e a interação entre os seus usuários. Palavras-chave: Design, Aplicativo mobile, Intercâmbio, Interface gráfica, Design de usabilidade.
ABSTRACT MEIRA, Renan Takahashi. Abroadly: a mobile application for exchange students. 2018. Final Undergraduate Project – Technology in Graphic Design, Technological Federal University of Paraná. Curitiba, 2018. This final undergraduate project presents the research and development of the concept and the graphic user interface and navigation of a mobile application aimed to exchange students. For this, the author made use of Garrett’s methodology, that defines the interface development in five plans. During execution of the project steps, it was necessary to conduct research over the identified problem, analysis, questionnaires and tests with the target audience. Therefore, it was sought support in concepts and guidelines of interface and usability design, from a bibliographic study. These researches and methodology allowed the creation of alternatives that could be thought and designed in a way that the final result would represent an effective, intuitive and accessible solution. The developed application aims to provide an online platform for exchange students, providing useful information about each step of an exchange program and allowing the sharing of personal experiences and the interaction between the users. Keywords: Design, Mobile application, Exchange program, Graphical user interface, Usability Design
LISTA DE FIGURAS
FIGURA 1: CONSULTAS RELACIONADAS AO INTERCÂMBIO..............................28
FIGURA 2: PLANO DE ETAPAS PARA O DESIGN DE INTERFACE.......................35
FIGURA 3: PAINEL SEMÂNTICO..............................................................................37
FIGURA 4: GUIA DE RETORNO AO BRASIL...........................................................39
FIGURA 5: GUIA DE RETORNO AO BRASIL, PÁGINAS INFORMATIVAS.............40
FIGURA 6: APLICATIVO TWITTER...........................................................................41
FIGURA 7: TELAS DE NAVEGAÇÃO PARA REGISTRO DE HUMOR DO APP COGNI........................................................................................................................42
FIGURA 8: TELAS DE ACESSO AOS RELATÓRIOS DE EMOÇÕES DO APP COGNI........................................................................................................................42
FIGURA 9: TELAS DO APP CÍNGULO......................................................................43
FIGURA 10: TELAS DO APP CÍNGULO....................................................................44
FIGURA 11: AVALIAÇÃO DOS RECURSOS PELOS USUÁRIOS............................48
FIGURA 12: FLUXOGRAMA DO APLICATIVO..........................................................50
FIGURA 13: TELAS DE WIREFRAME: TELAS DE ACESSO...................................51
FIGURA 14: TELAS DE WIREFRAME: FEED E PERFIL..........................................52
FIGURA 15: TELAS DE WIREFRAME: MENSAGENS..............................................53
FIGURA 16: TELAS DE WIREFRAME: NOTIFICAÇÕES E NAVEGAÇÃO...............54
FIGURA 17: TELAS DE WIREFRAME: NAVIGATION DRAWER E DIÁRIO PESSOAL…………………………………………………………………………………...55
FIGURA 18: TELAS DE WIREFRAME: GUIA EMOCIONAL…..................................56
FIGURA 19: TELAS DE WIREFRAME: LOCALIZAR EVENTOS E INTERCAMBISTAS…………………………………………………………………..........57
FIGURA 20: TELAS DE WIREFRAME: CONFIGURAÇÕES DO SISTEMA..............58
FIGURA 21: TESTE COM OS USUÁRIOS.................................................................59
FIGURA 22: TELAS DO WIREFRAME FINAL: NAVEGAÇÃO…………….................62
FIGURA 23: TELAS DO WIREFRAME FINAL: INFORMAÇÕES ÚTEIS...................63
FIGURA 24: PAINEL SEMÂNTICO............................................................................64
FIGURA 25: ROBOTO ...............................................................................................65
FIGURA 26: ORIENTAÇÕES APLICAÇÕES TIPOGRÁFICAS .................................65
FIGURA 27: PALETAS DE CORES ESCOLHIDAS PARA LAYOUT.........................66
FIGURA 28: PAINEL SEMÂNTICO CRIADO PARA A LOGO....................................67
FIGURA 29: GERAÇÃO DE ALTERNATIVAS PARA A LOGO..................................68
FIGURA 30: LOGO ESCOLHIDA...............................................................................68
FIGURA 31: LAYOUT FINAL: TELAS INICIAIS.........................................................69
FIGURA 32: LAYOUT FINAL: TELAS DE ACESSO…..............................................70
FIGURA 33: LAYOUT FINAL: PRIMEIRO ACESSO..................................................70
FIGURA 34: LAYOUT FINAL: FEED DE POSTAGENS………..................................71
FIGURA 35: LAYOUT FINAL: APLICAÇÃO DE FILTROS NO FEED…....................72
FIGURA 36: LAYOUT FINAL: NAVEGAÇÃO….........................................................73
FIGURA 37: LAYOUT FINAL: LOCALIZAR EVENTOS E INTERCAMBISTAS.........74
FIGURA 38: LAYOUT FINAL: NOTIFICAÇÕES........................................................75
FIGURA 39: LAYOUT FINAL: MENSAGENS….…....................................................76
FIGURA 40: LAYOUT FINAL: CONFIGURAÇÕES DE PERFIL................................77
FIGURA 41: LAYOUT FINAL: NAVIGATION DRAWER............................................78
FIGURA 42: LAYOUT FINAL: DIÁRIO PESSOAL……..............................................79
FIGURA 43: LAYOUT FINAL: GUIA EMOCIONAL…................................................80
FIGURA 44: LAYOUT FINAL: INFORMAÇÕES ÚTEIS.............................................81
FIGURA 45: LAYOUT FINAL: CONFIGURAÇÕES DO SISTEMA............................82
FIGURA 46: FLUXO DE TELA FINAL.......................................................................83
LISTA DE TABELAS
TABELA 1: SUPORTE OFERECIDO AOS ESTUDANTES PELAS IES....................19
TABELA 2: SENTIMENTOS PRESENTES NO MOMENTO DO RETORNO............21
LISTA DE GRÁFICOS
GRÁFICO 1: PERCEPÇÕES DO BRASIL NO MOMENTO DE RETORNO..............20
GRÁFICO 2: PESQUISA FEIT COM INTERCAMBISTAS BRASILEIROS................24
GRÁFICO 3: NÚMERO DE BRASILEIROS EM PROGRAMAS DE INTERCÂMBIO.27
GRÁFICO 4: INTERESSE DE PESQUISAS SOBRE INTERCÂMBIO NOS ÚLTIMOS 8 ANOS .....................................................................................................................28
GRÁFICO 5: RELAÇÃO DE ACESSO À INTERNET POR DISPOSITIVOS.............30
LISTA DE QUADROS
QUADRO 1: TABELA COMPARATIVA ENTRE OPÇÕES ANALISADAS................45
QUADRO 2: LISTA DE NOMES DE APLICATIVOS..................................................46
QUADRO 3: PALAVRAS-CHAVE REFERENTE AO DESENVOLVIMENTO DO PROJETO...................................................................................................................46
QUADRO 4: GERAÇÃO DE ALTERNATIVAS PARA NAMING.................................47
QUADRO 5: LISTA DAS PRINCIPAIS FUNCIONALIDADES DO APLICATIVO.......49
QUADRO 6: AVALIAÇÃO DE RECURSOS PELOS USUÁRIOS-TESTE.................60
LISTA DE APÊNDICE
APÊNDICE A: QUESTIONÁRIO COM O PÚBLICO ALVO........................................90
APÊNDICE B: RESULTADOS DO TESTE COM USUÁRIOS....................................91
APÊNDICE C: WIREFRAMES FINAIS ......................................................................92
APÊNDICE D: LAYOUT FINAL...................................................................................95
SUMÁRIO
1 INTRODUÇÃO ....................................................................................................... 15
1.1 PROBLEMA .................................................................................................... 15
1.2 OBJETIVO GERAL ......................................................................................... 17
1.3 OBJETIVOS ESPECÍFICOS ........................................................................... 17
1.4 JUSTIFICATIVA .............................................................................................. 17
1.5 PROCEDIMENTOS METODOLÓGICOS........................................................ 24
2 FUNDAMENTAÇÃO TEÓRICA .............................................................................. 26
2.1 INTERCÂMBIO NO BRASIL ........................................................................... 26
2.2 APLICATIVOS ................................................................................................. 29
2.3 DESIGN DE USABILIDADE ............................................................................ 30
2.4 DESIGN DE INTERFACE ............................................................................... 32
3 METODOLOGIA ..................................................................................................... 35
4 DESENVOLVIMENTO ........................................................................................... 37
4.1 ESTRATÉGIA ................................................................................................. 37
4.1.1 Análise de similares ............................................................................... 38
4.1.2 Nome da marca ..................................................................................... 45
4.2 ESCOPO ......................................................................................................... 47
4.3 ESTRUTURA .................................................................................................. 49
4.4 ESQUELETO .................................................................................................. 50
4.4.1 Alternativas de esqueleto ....................................................................... 51
4.4.2 Teste de usabilidade .............................................................................. 58
4.4.3 Esqueleto final ....................................................................................... 61
4.5 SUPERFÍCIE ................................................................................................... 63
4.5.1 Painel semântico.................................................................................... 63
4.5.2 Tipografia ............................................................................................... 65
4.5.3 Cores ..................................................................................................... 66
4.5.4 Logo ....................................................................................................... 67
5 RESULTADO ......................................................................................................... 69
5.1 TELAS DE ACESSO ....................................................................................... 69
5.2 NAVEGAÇÃO ................................................................................................. 72
5.3 NOTIFICAÇÃO ................................................................................................ 74
5.4 MENSAGENS ................................................................................................. 75
5.5 PERFIL............................................................................................................ 76
5.6 NAVIGATION DRAWER ................................................................................. 77
5.7 DIÁRIO PESSOAL .......................................................................................... 78
5.8 GUIA EMOCIONAL ......................................................................................... 79
5.9 INFORMAÇÕES ÚTEIS .................................................................................. 80
5.10 CONFIGURAÇÕES DO SISTEMA ............................................................... 81
6 FLUXO DE TELAS FINAL ...................................................................................... 83
7 CONCLUSÃO ......................................................................................................... 84
REFERÊNCIAS ......................................................................................................... 85
GLOSSÁRIO ............................................................................................................. 88
APÊNDICE A - QUESTIONÁRIO COM O PÚBLICO ALVO ...................................... 90
APÊNDICE B - RESULTADOS DO TESTE COM USUÁRIOS ................................. 91
APÊNDICE C - WIREFRAMES FINAIS .................................................................... 92
APÊNDICE D - LAYOUT FINAL ................................................................................ 95
15
1 INTRODUÇÃO
O projeto desenvolvido como trabalho de conclusão de curso do qual este
documento se refere, apresentará o processo de desenvolvimento da criação de
interface para um aplicativo direcionado à intercambistas brasileiros. Os principais
conceitos que serviram como fundamento para este projeto são design e usabilidade
e de interface, além de informações primárias acerca do problema.
Nos próximos capítulos, será apresentado os elementos que envolvem a
problemática deste projeto, que é definido pelo momento no qual, desavisado, o
intercambista de primeira viagem, ao retornar à sua terra natal, pode se deparar com
o estresse de aculturação de retorno (DANTAS, 2014), desencadeando assim, uma
série de dificuldades em se adaptar à sua antiga rotina e cultura. No entanto, o impacto
causado por este estresse pode ser menor e melhor controlado caso o estudante seja
melhor instruído antes de retornar ao seu país de origem (SEARLE; WARD, 1990).
Em vista disso, encontra-se a necessidade de se oferecer uma alternativa de
solução para este problema, onde seja possível fornecer informações e recursos para
os intercambistas, acerca deste momento que eles virão a passar, a fim de diminuir
os efeitos do choque cultural reverso.
1.1 PROBLEMA
O intercâmbio pode ser definido como o “estabelecimento de relações
recíprocas de ordem cultural, comercial, social, etc.”. Em um sentido mais abrangente,
o intercâmbio pode proporcionar a vivência de experiências por meio da visita e
estadia, seja por um curto ou longo período de tempo, em outros países (DALMOLIN
et al, 2013).
Esta experiência, além de contribuir para engrandecimento do currículo
profissional, expande os horizontes e perspectivas do intercambista e promove um
crescimento emocional e de organização pessoal, tendo em vista os obstáculos a
serem superados com a vivência em outro país com a adaptação ao novo ambiente
(SOUZA, 2008; DALMOLIN et al, 2013).
16
Por isso, devido ao fato da maioria das experiências com intercâmbio
tenderem a serem positivas e únicas, durante o momento de regresso dos
intercambistas ao seu país de origem, algumas dificuldades emocionais podem
acabar surgindo durante a sua readaptação (FAZITO, 2010), principalmente quando
o estudante está passando por este tipo de experiência pela primeira vez
(SZKUDLAREK, 2010).
Estes sentimentos, que podem ser caracterizados como estresse de
aculturação de retorno, representam um desajuste situacional multifuncional
(SEBBEN, 2015), que pode durar de seis meses a dois anos após o retorno do
estudante. A readaptação à antiga cultura, pode ser ainda mais difícil do que se
adaptar em um país estrangeiro.
Um dos efeitos que podem surgir durante este período, é a sensação de não
pertencimento ao seu lugar de estado atual. “Os seus horizontes se alargaram, mas
quem ficou, não teve essa oportunidade. Por isso, a pessoa se sente incompreendida
e sozinha no problema”, explica Andrea Sebben, especialista em Psicologia
Intercultural (2014).
Muitos imigrantes não possuem um preparo emocional para a volta, pois eles
não sabem que podem acabar encontrando dificuldades em se readaptar ao seu
antigo lar, Dantas (2014) enfatiza que “há relatos de pessoas que dizem não entender
como não conseguem se adaptar ao país que idealizaram por tantos anos. E os
amigos e a família que ficaram não compreendem o problema”. Caso o estudante
fosse instruído antes de retornar ao seu país de origem, sobre o choque de cultura no
qual ele pode vir a passar, os impactos podem ser menores e melhor controlados
(SEARLE; WARD, 1990).
A dificuldade de readaptação ao Brasil, já é um problema identificado pelo
Ministério das Relações Exteriores, porém, ainda não foi possível, chegar a cerne da
questão. Como uma alternativa de proposta para reintegrar os brasileiros, foi
desenvolvido pelo Itamaraty (2010) o Guia de Retorno ao Brasil. Contudo, este
material tem como foco, brasileiros que tiveram experiências negativas no exterior e
buscam orientações de reinserção social. Neste caso, este material acaba não
suprindo as necessidades a respeito do desencontro cultural e pessoal.
Sendo assim, encontra-se uma abertura para o desenvolvimento de uma
solução para esta problemática, que será apresentado em forma de aplicativo para
dispositivos móveis, que consiste em uma rede social voltada exclusivamente para
17
intercambistas. Deste modo, os seus usuários poderão encontrar informações
dispostas pelo próprio sistema, assim como acompanhar outras pessoas que já
passaram por situações parecidas, podendo-se compartilhar as suas experiências e
dicas.
1.2 OBJETIVO GERAL
Desenvolver um aplicativo para dispositivos móveis de sistema operacional
Android, que visa proporcionar interações sociais online entre intercambistas,
possibilitando assim, a troca de informações sobre os períodos que envolvem o
intercâmbio, principalmente o momento do retorno, a fim de diminuir possíveis
problemas e dificuldades que possam surgir durante este tipo de experiência.
1.3 OBJETIVOS ESPECÍFICOS
● Analisar, em linhas gerais, o período de readaptação de intercambistas brasileiros,
assim como informações sobre o estresse de aculturação de retorno, e
informações técnicas para o desenvolvimento do projeto;
● Analisar aplicativos e ferramentas similares;
● Classificar e definir recursos que serão disponibilizados no aplicativo;
● Estruturar o projeto com base nos conceitos presentes no design de usabilidade;
● Criar fluxo de telas e wireframes;
● Realizar testes com o público-alvo acerca de avaliar a usabilidade do sistema;
● Finalizar o layout e identidade visual do aplicativo.
1.4 JUSTIFICATIVA
Como apresentado no tópico 1.1 Problema, o período da volta ao país de
origem pós intercâmbio, pode desencadear no estudante o estresse de aculturação
de retorno, que pode acabar gerando dificuldades emocionais que atrapalham o
período de readaptação do intercambista. Este período tende a ser único (DANTAS,
2014), onde cada indivíduo tende a se comportar de acordo com fatores internos
18
(como cada um lida com a experiência), e externos (que representa os elementos que
constituem a sua volta).
Para Sebben (2001), nos primeiros dias ou semanas após o retorno, ocorre a
fase de “lua de mel” do estudante, onde o indivíduo se sente feliz e importante por
conta da atenção e interesse de seus amigos e familiares acerca de suas experiências
e sobre a sua vida (STEUTEN, 2015), contudo, após um curto período de tempo, o
choque cultural reverso começa a ter impacto sobre o estudante.
Este choque cultural reverso pode ser definido como um “processo de
reajuste, reaculturamento e reassimilação de um indivíduo com relação à sua cultura,
após tervivido em uma cultura diferente por um significativo período de tempo’’ (GAW,
2000). Para Gullahorn (1963 apud GAW, 2000), um dos principais fatores que
envolvem o momento do choque cultural reverso, são as expectativas, que neste caso,
dizem respeito às mudanças que ocorreram durante o período em que o estudante
esteve fora.
Estas mudanças vão além das que o próprio intercambista acabou passando,
mas também, o fato de que a vida dos familiares e amigos também mudaram, e que
o estudante há de se adaptar com estas novidades, que até então, não eram
esperadas.
Além disso, a psicóloga Sylvia Dantas, coordenadora do Núcleo de Pesquisa
e Orientação Intercultural da Universidade Federal de São Paulo (UNIFESP, 2014),
reforça que ter a ciência de que este é um momento natural e que todos costumam
passar, pode ser muito útil, pois mostra ao intercambista que ele não está sozinho, e
por isso, existe uma necessidade deste tipo de informação ser repassada para estas
pessoas, pois questões referentes a este tema, é algo muito recente, e a sociedade
pode acabar não compreendendo esta problemática.
Através de uma pesquisa coordenada pelo autor Franco Gatelli Périco (2016),
foi-se coletado informações de 586 participantes que realizaram algum tipo de
programa de intercâmbio durante os anos de 2012 e 2015, sendo estas informações
categorizadas em 4 segmentos: perfil dos respondentes, período anterior ao
intercâmbio, período vivido no exterior e retorno ao Brasil. Para que seja possível o
alinhamento de dados dispostos nesta pesquisa ao problema abordado neste
documento, os principais pontos a serem analisados são as informações levantadas
acerca do período de retorno ao Brasil vividas pelos intercambistas.
19
Por conta desta pesquisa ter sido divulgada e elaborada online, ela pôde
contar com a participação de pessoas de todas as regiões brasileiras. O perfil dos
participantes são estudantes, em sua maioria de 84% jovens entre 20 a 25 anos, que
tiveram como foco do intercâmbio a mobilidade acadêmica, onde grande parte
(67,7%) teve a ajuda de programas governamentais para a realização destes
programas. Por conta disso, 53,8% dos entrevistados, afirmaram que nunca estiveram
no exterior anteriormente, sendo o intercâmbio, a primeira experiência internacional
delas.
Neste cenário, houve-se a importância de fazer o levantamento de dados a
respeito do suporte oferecido por suas Instituições de Ensino de origem, tanto antes
quanto depois do intercâmbio. Com este questionamento, pode-se perceber que no
geral, há muito pouco apoio aos estudantes, principalmente no momento de retorno,
onde apenas 6% indicaram ter recebido bastante suporte, conforme demonstrado na
Tabela 1.
Tabela 1: Suporte oferecido aos estudantes pelas IES Fonte: Périco, 2016.
Como alternativas encontradas para orientação após o período de intercâmbio,
a Universidade Feevale (2016), de Novo Hamburgo, possui um Centro Integrado de
Psicologia (CIP) que dispõe atendimento para alunos que estão para embarcar ou
estão retornando de algum programa de intercâmbio, através de grupos de
preparação, gerido por estudantes de psicologia, acompanhados por professores,
onde são discutidos assuntos desde questões culturais, até tópicos burocráticos.
Porém, este tipo de acompanhamento específico para intercâmbio pode acabar não
sendo disposto em todas as universidades, e os alunos podem acabar nem chegando
a saber desta possibilidade de auxílio.
Com o retorno ao Brasil, o choque cultural reverso pode desencadear no
estudante, diversas sensações, que variam de pessoa para pessoa. Para que fosse
possível compreender melhor as percepções de vida que envolveram o momento de
retorno ao país, esta pesquisa gerou perguntas específicas a este período, onde foi-
se possível perceber que muitos tiveram dificuldades em se readaptar a vida diária ou
se sentir parte da sociedade novamente, como apresentados no Gráfico 1.
20
Gráfico 1: Percepções do Brasil no momento de Retorno Fonte: Périco, 2016.
Entretanto, o acesso à informações contendo orientações sobre este
problema, em um ponto de vista clínico, é limitado, reduzindo as alternativas de
solução que podem ser disponibilizadas por em eventual sistema, uma vez que este
tipo de problema costuma ser de cunho pessoal, pois ele depende de várias
circunstâncias (SEBBEN, 2015), e com base nisso, vale destacar os pontos sobre a
sensação de não se encaixar na sociedade, e de raramente se sentir entendido por
pessoas que nunca viveram no exterior, como apontados no gráfico anterior. A
proposta de se desenvolver uma rede social, visa justamente, conectar pessoas que
possam se identificar com as outras, e assim, poder encontrar alternativas que
possam ajudar ou facilitar questões relacionadas ao período do intercâmbio.
Ademais, foi apresentado os principais sentimentos que envolveram o
momento de retorno, onde dadas as opções, o participante poderia escolher em qual
21
situação ele melhor se encaixava. Estes dados comprovam que cada um tende a lidar
com esta situação da sua maneira, onde fatores internos e externos podem fazem a
diferença. Na Tabela 2, vale destacar o número de estudantes que voltaram de seus
intercâmbios, com a percepção de serem “novas pessoas” (74,5%), refletindo assim,
na mudança de mentalidade e visão sobre do mundo.
Tabela 2: Sentimentos presentes no momento do retorno Fonte: Périco, 2016.
Em uma pesquisa complementar, para validação de justificativa do problema
identificado, foi desenvolvido um questionário online através da ferramenta Google
Forms, divulgada nas redes sociais, voltada para pessoas que já realizaram algum
programa de intercâmbio. O formulário contou com a participação de 35 pessoas, e
foi produzida com questões voltadas para a proposta deste projeto, sendo elas:
● “Após o retorno do seu intercâmbio, você recebeu algum tipo de orientação
com instruções e dicas para a sua readaptação de volta ao Brasil?” - Essa
pergunta teve como foco, comprovar a falta de suporte após o término do
programa de intercâmbio por parte das instituições responsáveis pelos
programas.
● “Como você classificaria o seu período de readaptação no retorno do seu
intercâmbio?” - Com esta pergunta, é possível se identificar se há uma
dificuldade ao retornar ao seu país de origem após o período de intercâmbio.
● “Caso houvesse tido alguma orientação sobre o retorno ao Brasil, você acha
que este período de readaptação poderia ter sido mais fácil?” - Aqui, o intuito
da pergunta era tentar coletar informações que pudessem comprovar o efeito
da falta de orientações sobre o retorno dos intercambistas.
● “Você considera que ter orientações sobre o programa de intercâmbio em todas
as suas etapas (pré, durante e após), como algo importante?” - Com base nas
22
respostas de pessoas que já passaram por este tipo de experiência, é possível
classificar a importância de orientações sobre o programa em todas as suas
etapas.
● “Caso você seja estudante, você sabe se a sua universidade possui um centro
de atendimento voltado para ajudar e orientar intercambistas?” - Esta pergunta
sendo como opcional, foi adicionada para se entender se este tipo de
informação é bem divulgada e explorada por parte das instituições.
● “Caso houvesse um aplicativo de rede social apenas para intercambistas,
visando a troca de experiências e dicas, você acharia interessante?” - Esta
pergunta serviu para testar o interesse do público alvo para o desenvolvimento
deste projeto.
Depois da coleta de respostas (Gráfico 2), foi possível de se analisar que 91,4%
dos participantes acham importante a necessidade de se ter orientações sobre todos
os períodos pertencentes ao intercâmbio, desde o momento de pré-viagem, até o
retorno, porém, 97% dos participantes afirmaram que não tiveram nenhuma
orientação sobre o período de readaptação no Brasil, onde 60,6% dos entrevistados
tiveram uma readaptação difícil, 21,2% tiveram uma readaptação mediana, e 18,2%
passaram por este momento de maneira tranquila. Por fim, 54,5% informaram que
caso eles tivessem sido melhores instruídos sobre o período de retorno, eles
acreditam que as suas readaptações poderiam ter sido menos complicadas.
23
24
Gráfico 2: Pesquisa feita com intercambistas brasileiros Fonte: O autor, 2018.
Com base nos dados apresentados, é possível de se identificar a dificuldade
que alguns intercambistas podem encontrar ao encerrarem as suas experiências em
outros países e terem de retornar às suas antigas rotinas, e a importância de se ter
instruções sobre os períodos que envolvem o período do intercâmbio, assim como o
acesso à informações sobre eventos e assistência existentes, que pode ser ineficiente
ou até mesmo inexistente.
1.5 PROCEDIMENTOS METODOLÓGICOS
Como introdução ao desenvolvimento deste projeto, foi realizado um estudo
acerca de conceitos de design de experiência e usabilidade do usuário. Por intermédio
25
do livro “Don’t Make Me Think” do autor Steve Krug (2008), no qual se foi possível
encontrar os significados sobre o que a usabilidade representa em um sistema digital,
assim como, conceitos gerais sobre a comunicação visual da interface, opções de
navegabilidade e facilidade de uso.
Para uma análise mais consistente e eficaz sobre a questão técnica da
interface de aplicativos similares, o livro “Designing Web Usability The Practice of
Simplicity” do autor Jakob Nielsen (1999), foi utilizado, onde através de fundamentos
sobre características da engenharia por de trás da usabilidade do usuário, o autor
consegue apresentar a aplicação dos métodos na prática, com exemplos de
interfaces, que serviram como guia para que os principais pontos-chave em um
sistema de interface pudessem ser identificados.
Além disso, para a execução do desenvolvimento das interfaces, a
metodologia apresentada pelo autor Jesse James Garret (2011), no livro “The
Elements of User Experience: User Centered Design for the Web and Beyond”. Os
conceitos apresentados no Google Material Design, também foram utilizados para a
elaboração gráfica das interfaces. Estes conteúdos destacam a importância de uma
boa estruturação da comunicação visual, para que o usuário consiga fazer um uso
apropriado do sistema.
26
2 FUNDAMENTAÇÃO TEÓRICA
A fim de aprofundar o conhecimento acerca do tema deste documento,
encontra-se a necessidade em compreender o cenário brasileiro em relação a
programas de intercâmbios para encontrar informações pertinentes para o problema
identificado.
Como justificativa para a escolha em se desenvolver um aplicativo para
smartphones, foi levantado dados sobre este nicho de mercado, que foram alinhados
com informações a respeito do público-alvo definido para este projeto.
Além disto, foram realizadas pesquisas sobre conteúdos referentes à criação
e design de interface voltados para dispositivos móveis, através de materiais
disponibilizados em livros e artigos.
2.1 INTERCÂMBIO NO BRASIL
A popularização do intercâmbio no Brasil vem aumentando cada vez mais,
seja por conta de programas de mobilidade ofertadas pelas universidades, ou na
facilidade e aumento de opções encontradas no mercado através de agências de
turismo. Mediante informações obtidas pelo Ministério do Turismo (2018), é possível
de se identificar o crescimento de agências voltadas exclusivamente para este nicho
de mercado, onde entre 2009 e 2016, o número de empresas cadastradas no
Cadastur, passou de 945 para 5.425.
No cenário brasileiro, há uma procura maior por cursos de idiomas, podendo
ser com ou sem algum trabalho temporário, assim como, cursos de graduação e de
certificação profissional. Além disso, programas de mestrado e doutorado vem
ganhando popularidade e aparecendo entre as principais escolhas de pessoas que
buscam algum tipo de programa, ao mesmo tempo em que as alternativas voltadas
para o ensino médio, vem diminuindo, como mostra uma pesquisa realizada pela
Associação de Agências de Intercâmbio (BELTA, 2018).
Em relação à faixa etária de pessoas que buscam e realizam intercâmbios, há
uma grande discrepância entre as idades, onde em sua maioria são representadas
por jovens entre 22 e 25 anos (BELTA, 2016). As principais razões que levam esta
alta demanda de buscas, pode ser justificada pelo interesse de se ganhar experiência
pessoal e, principalmente, na profissional (LIMA, 2016), pois no mercado atual,
27
empresas tendem a valorizar mais profissionais que tenham conhecimento em outras
línguas e habilidades interculturais, segundo o Guia do Estudante Erasmus (2015).
No cenário acadêmico, de acordo com de Oliveira e Pagliuca (2012), o aluno
que busca este tipo de experiência, motiva-se por razões que vão além do
aprendizado, pois o intercâmbio é capaz de proporcionar desenvolvimento
psicológico, independência, autoconfiança, aperfeiçoar a capacidade de se relacionar
com pessoas, e sentir-se um cidadão global, ou seja, uma pessoa que se sente parte
da humanidade, e não somente de um estado (EVANS, 2016).
Através de dados apresentados por pesquisas realizadas pela BELTA (2018),
é possível perceber o crescimento na busca de estudantes em realizar o intercâmbio.
Por conta disto, a atenção e o acesso às informações perante o momento de retorno
ao país de origem devem ser maiores, pois pessoas mais novas tendem a sofrer mais
com o impacto do choque cultural reverso (COX, 2004).
Ademais, no ano de 2003, o número era de apenas 34 mil brasileiros que
realizaram alguma viagem ao exterior para estudos. Já em um cenário mais atual, em
2017 o número de brasileiros que realizaram algum tipo de intercâmbio, foi superior
ao número de 2016, representando um crescimento de 23%, totalizando um número
total de 302 mil estudantes brasileiros, como exemplificado no Gráfico 3.
Gráfico 3: Número de brasileiros em programas de intercâmbio Fonte: Adaptado de portal de notícias G1 (2018), e Associação Brasileira de Agências de Intercâmbio (2018).
Por meio da ferramenta Google Trends (Google Inc., 2018), é possível analisar
as tendências de buscas realizadas no buscador Google, a respeito do termo
“intercâmbio”, que possui um nível de interesse constante acima da média (Gráfico 4),
28
durante o período entre 2010 e 2018, mostrando-se ser um termo buscado
frequentemente popular entre os brasileiros há um bom tempo.
Gráfico 4: Interesse de pesquisas sobre intercâmbio nos últimos 8 anos Fonte: Google Inc., 2018
Os termos relacionados a estas pesquisas, são em sua maioria, voltados para
os principais países de escolha entre os intercambistas, assim como, dúvidas sobre o
que é e como fazer intercâmbio (Figura 1), não sendo encontrado questões perante
informações sobre choque cultural e o estresse de aculturação de retorno.
Figura 1: Consultas relacionadas ao intercâmbio Fonte: Google Trends (Google Inc.), 2018
Em relação a duração dos programas de intercâmbio, no ano de 2016 (BELTA,
2017), 68,5% dos estudantes optaram por opções de duração de até três meses no
exterior, e 24,1% realizaram intercâmbios com uma duração de até doze meses, já o
restante da porcentagem é dividida em períodos de curta e longa duração. Szkudlarek
(2010) ressalta que, quanto mais longa for a estadia em um outro país, maior será o
impacto do choque cultural reverso, já que o indivíduo teve um período de tempo maior
para se desprender de sua cultura de origem.
Com base nas informações levantadas, é possível perceber o aumento no
número de pessoas que buscam intercâmbios atualmente no Brasil, e com isso, vem
a necessidade de se pensar em novas soluções e meios que sejam possíveis de se
29
transmitir informações e orientações para que as suas experiências sejam melhores
aproveitadas.
2.2 APLICATIVOS
Cada vez mais os smartphones vêm se inserindo e ganhando espaço no
cotidiano dos brasileiros. Segundo estatísticas apresentadas pela FGV de São Paulo
(2018), o número de celulares inteligentes ativos no Brasil, já passa de 220 milhões,
superando assim, a marca de um smartphone por pessoa no país.
Além disso, o mercado brasileiro é um dos maiores em relação ao número de
downloads de aplicativos, tanto para o sistema operacional Android (Google Play),
quanto para o iOS, voltados para produtos da marca Apple, como apresentado pela
empresa App Annie (2017). Com isso, a estimativa de tempo gasto diariamente em
aplicativos para smartphones conectados à internet, chega ser 200 minutos diários,
20 minutos a mais que a média global (APP ANNIE, 2017). Uma das razões que
motivam esta disponibilidade de tempo se dá pelas “facilidades proporcionadas pelas
tecnologias condensadas em um único smartphone estão transformando o dia a dia
de incontáveis pessoas em todo o mundo”, como avalia Marcia Ogawa (2016), sócia-
líder da Deloitte Consultoria.
Por conta da facilidade de se condensar diversos aplicativos e ferramentas em
um só equipamento, o número de acessos à internet exclusivamente via desktop vem
caindo drasticamente nos últimos anos, enquanto o uso de smartphones vem
aumentando exponencialmente, como apresentado a seguir no Gráfico 5, com dados
levantados pelo Comitê Gestor da Internet (2017).
30
Gráfico 5: Relação de acesso à internet por dispositivos móveis Fonte: TIC Domicílios, 2017.
Em um formulário, desenvolvido através do Google Forms e compartilhado em
redes sociais, destinado à pessoas que já realizaram um ou mais programas de
intercâmbio, a resposta de 86 participantes puderam ser coletadas, ao qual, quando
questionadas sobre o uso de aplicativos durante as suas viagens, 88% afirmaram
fazer uso de aplicativos em geral, que em sua maioria, eram redes sociais. Esta
informação aliada a cultura do uso de smartphone por parte dos brasileiros, indica
uma abertura que representa uma facilidade de se propor uma solução dentro da área
mobile.
2.3 DESIGN DE USABILIDADE
Para que a proposta de solução de interface seja desenvolvida, é necessário
se considerar os conceitos básicos sobre usabilidade e experiência do usuário. O
autor Steve Krug (2008), retrata o comportamento do usuário em sistemas digitais,
destacando 3 fatos de como nós lidamos com toda a estrutura visual de informações
e recursos em interfaces.
31
A primeira é acerca de como lidamos com as informações: por conta da
variedade de informações que estão presentes em nosso cotidiano, muito do uso, seja
por web ou aplicativos em smartphones, os usuários são motivados pelo desejo de se
economizar tempo. Existe uma tendência de o usuário tentar desprender o mínimo de
tempo possível para que os principais pontos-chave sejam encontrados ou de fato
entendidos.
O segundo fato apresenta pontos pertinentes que envolvem o momento da
criação das interfaces, uma vez que, é de se esperar que durante a arquitetura da
comunicação visual, o designer tende a supor que os usuários irão examinar a página
como um todo, considerando assim, todas as opções disponíveis para que assim, se
seja possível escolher a que melhor atenda às suas necessidades. No entanto, o
usuário tende a seguir uma estratégia conhecida como “satisficing”, escolhendo
assim, a primeira opção razoável que possa ser a resposta para as suas
necessidades.
Por fim, Krug (2008) apresenta o terceiro ponto, retratando as questões do uso
do sistema, onde o usuário pode fazer uso da interface e da ferramenta, sem ao
menos compreender o mecanismo como um todo. As pessoas tendem a não gastar
tempo lendo instruções e orientações, seguindo em frente procurando as alternativas
mais rápidas para atingir os seus objetivos.
Estas questões são importantes na hora de se projetar a solução, pois levando-
se em consideração que nem todo o sistema pode prever como o usuário irá lidar com
as informações, e “se o público for agir como se você estivesse projetando um painel,
então projete muito bem” (KRUG, 2008, p. 29).
Além disso, é importante ressaltar algumas regras básicas de usabilidade que
possam servir como guias durante as etapas de desenvolvimento e prototipação de
um projeto. Ben Shneiderman, autor do livro “Designing the User Interface”,
desenvolveu métodos importantes acerca do design de interface, definidas como as
“8 regras de ouro”, que consiste nos seguintes fundamentos:
● Consistência: o projeto deve se manter um padrão em quesito de
formas, layouts, cores, ícones e fontes;
● Atender à usabilidade universal: inclusão de recursos que possam ser
utilizados entre todos os usuários, independentemente do nível de
conhecimento, faixa etária, etc.;
32
● Oferecer feedbacks informativos: através das ações realizadas pelos
usuários, o sistema deve fornecer um feedback, seja uma mensagem,
um aviso, independentemente de ser uma ação frequente ou de menor
importância;
● Projetar diálogos que indicam o fim de uma ação: as ações do sistema
devem ser organizadas em grupos com começo, meio e fim;
● Evitar erros: é um estágio de tentar prever as situações que possam
levar o usuário a não cometer erros. Caso o usuário ainda passe a vir a
cometer algum erro, a interface deve detectar o problema e oferecer
instruções;
● Possibilidade na reversão de erros: permitir que o usuário consiga
reverter possíveis erros no sistema
● Controle do usuário: dispor o poder do comando a respeito da interface
ao usuário, a fim de evitar surpresas e erros inesperados;
● Reduzir a carga de memória de curta duração: levar em consideração a
limitação das pessoas sobre o processamento de informações na
memória de curta duração, para que as interfaces não sobrecarreguem
os usuários.
A partir destes conceitos e princípios, será possível realizar o desenvolvimento
desta proposta de interface, assim como, testes de usabilidade com os usuários.
2.4 DESIGN DE INTERFACE
O Dicionário Michaelis (2018) imputa múltiplos contextos para a palavra
interface e dá três significados para o âmbito da informática e meios eletrônicos, o
primeiro identifica o ponto no qual um sistema de computação termina e outro começa,
a seguinte conceitua interface como um circuito, dispositivo ou porta que permite que
duas ou mais unidades sejam interligadas num sistema padrão de comunicação,
permitindo que se transfiram dados entre eles, e por fim, parte de um programa que
permite a transmissão de dados para um outro programa.
Em suma, interface seria àquilo que integra dois sistemas. Em uma relação
entre um sistema e usuário a interface facilita a interação entre usuário para com os
software e hardware. Moran (1983), descreve que a interface deve ser entendida
como sendo a parte de um sistema computacional com a qual uma pessoa entra em
33
contato física, perceptiva e conceitualmente. Essa descrição demonstra um elemento
físico, que o usuário pode manipular demonstrando também um componente que seja
interpretado, de forma conceitual. Uma Interação Homem-Computador, que busca
harmonizar usuário e sistemas computadorizados.
O desenvolvimento do aplicativo em questão, trouxe os princípios abordados
pelas autoras Rogers, Sharp e Preece (2013), que foram utilizados como diretrizes
para a definição de funções e hierarquia em quesito criação da estrutura, esqueleto e
testes de usabilidade. Dentre os princípios destacados por elas são:
● Visibilidade: Projetar as informações para que as funções fiquem visíveis
aos usuários, para que eles saibam como proceder propriamente dentro
do sistema. Neste caso, deve-se haver a hierarquia para as funções
mais importantes;
● Restrições: É necessário se pensar nas delimitações de possíveis
interações entre o usuário-máquina, deste modo é permitido definir a
maneira de como as informações apresentadas pelo sistema serão
interpretadas;
● Affordance: Representa as características atribuídas aos elementos,
tornando a experiência mais intuitiva. Consequentemente, o usuário
pode interagir de uma maneira mais simplificada e efetiva.
Além destes pontos, as autoras também mencionam aspectos acerca do
feedback do sistema perante as ações do usuário e a consistência gráfica da interface,
pontos já mencionados anteriormente por Shneiderman (2009).
Levando em consideração estes princípios, o desenvolvimento deste projeto foi
direcionado para o sistema operacional Android, e por isso, as orientações fornecidas
pelo material do Google Material Design, desenvolvido pela Google, foram utilizadas
para a criação da interface, uma vez que os elementos apresentados neste guia, são
nativos do sistema Android, otimizando-se assim, a capacidade e velocidade no
processamento dos elementos visuais do sistema operacional.
Como definido pela própria empresa Google Inc. (2014), este material possui
em seu conteúdo, orientações acerca da linguagem visual, que sintetiza os principais
aspectos clássicos sobre um bom design, contendo a inovação tecnológica e,
também, científica. Ademais, os atributos apresentados pelo Google Material Design
(2018), facilitam a usabilidade do usuário, tornando o processo mais fácil de se
entender e também mais intuitivo, como sugerem Rogers, Sharp e Preece (2013).
34
Entre as guidelines presentes no Google Material Design (2018), são
apresentados elementos acerca da navegação no sistema (botões, recursos), ícones,
tipografia, cores, grid, entre outros. Deste modo, o desenvolvimento da interface com
o uso dos padrões do Material Design, possibilitam a padronização dos aspectos
visuais em variados tipos de dispositivos Android, estes aspectos serão mais
aprofundados no capítulo de Desenvolvimento.
35
3 METODOLOGIA
A metodologia é um conjunto de especificações e métodos que visam
padronizar uma produção, e consecutivamente, se obter o resultado desejado. Ela
possui um detalhamento explicativo sobre toda e qualquer ação a ser desenvolvida
por um método. É o esclarecimento de etapas, que explica o que acontece, como
acontece e como vai acontecer. Deste modo, é possível se prever o tempo previsto
para execução de cada processo, recursos necessários, entre outras necessidades.
Para Maia (2011), a metodologia é “o conjunto de métodos e técnicas aplicadas para
um determinado fim. É o caminho percorrido, a maneira utilizada para atingir um
objetivo”.
Para este projeto de design, o método proposto por Garrett (2011) consiste no
desenvolvimento de uma interface através de cinco etapas, que funcionam como
planos estruturados hierarquicamente do primeiro grau de concepção até a
maturidade do projeto, incluindo um ponto de vista concreto e abstrato (Figura 2).
Figura 2: Plano de etapas para o design de interface Fonte: Garrett, 2018
36
● Estratégia: Neste primeiro plano, ocorre a identificação do problema e o
público alvo, onde através de análises e pesquisas, pode-se ser
constatado, as necessidades do usuário;
● Escopo: Aqui, ocorrem-se as especificações funcionais do sistema,
tendo como objetivo, estabelecer as funcionalidades e informações que
sejam relevantes para atender as ideias estabelecidas no plano anterior;
● Estrutura: Nesta etapa, com base nos conceitos do Design de Interação,
o objetivo é realizar o planejamento da estrutura das informações que
serão disponibilizadas no sistema (aplicativo), mapeando e
hierarquizando o conteúdo;
● Esqueleto: Este plano consiste no desenho da estrutura das telas,
botões e menus. O propósito desta etapa é planejar a organização
estrutural dos conteúdos nas telas de interface. Através de wireframes,
é possível definir o design da navegação e disposição dos principais
elementos das telas;
● Superfície: No plano mais palpável, é possível se definir os elementos
que envolvem a orientação estética da interface. Aqui é desenvolvido o
design visual e os padrões de layout, permitindo assim, a conjunção
entre o conteúdo, a parte funcional, e a estética visual.
Desta forma, o projeto será direcionado através do procedimento metodológico
apresentado por Garrett (2011), onde cada etapa será apresentada entre capítulos de
desenvolvimento, seguindo a ordem e conceitos apresentados na Figura 2.
37
4 DESENVOLVIMENTO
Seguindo o modelo de desenvolvimento proposto por Garrett (2011), conforme
explicado anteriormente, o processo de 6 etapas (estratégia, escopo, estrutura,
esqueleto e superfície) será segmentado neste capítulo. Aqui, para o desenvolvimento
do escopo e estrutura do aplicativo desenvolvido, foi utilizada a ferramenta Adobe
Illustrator. Já para a criação do esqueleto do aplicativo, para a elaboração de
wireframes, foi utilizado o software Adobe Xd, e por fim, para a criação do layout e
prototipação foi utilizado Adobe Xd.
4.1 ESTRATÉGIA
Com base na ordem das etapas apresentadas por Garrett (2011), o
desenvolvimento do projeto parte do plano da estratégia, onde através do objetivo
geral e específicos, como já apresentados no capítulo de introdução, aqui, será feito
uma análise de similares, assim como, definir o nome do aplicativo desenvolvido. Para
uma visualização do conceito abordado neste projeto, é apresentado em um painel
semântico (Figura 10) para melhor representar esta proposta, que consiste na criação
de um aplicativo que forneça recursos e informações para intercambistas, a fim de
diminuir o estresse de aculturação de retorno.
Figura 3: Painel semântico Fonte: O autor, 2018.
38
4.1.1 Análise de similares
Para o desenvolvimento do produto, além do levantamento de dados teóricos
acerca de especificações técnicas sobre design de interface, entre outros pontos
relacionados ao problema, foi necessário realizar uma pesquisa de referências de
aplicativos e serviços que tenham relação com a proposta deste documento.
Como definido pelo dicionário Michaelis (2018), benchmarking pode ser
explicado como um processo de avaliação que conta com a análise de métodos e
procedimentos perante ao desempenho dos concorrentes, podendo-se incorporar as
informações operacionalmente eficientes para o aperfeiçoamento deste projeto, se
adequando assim à uma possível disputa do mercado.
Para a análise de produtos similares, quatro serviços foram selecionados de
acordo com a função principal de cada um. Além de uma análise geral sobre os
recursos disponibilizadas em cada alternativa, alguns pontos acerca do design de
interface foram analisados com base nas referências citadas nos capítulos de design
de interação e usabilidade.
Como já mencionado no Capítulo 1, o Ministério das Relações Exteriores
lançou em 2010 o Guia de Retorno ao Brasil, um documento bilingue que disponibiliza
serviços, recursos e informações importantes para brasileiros que voltaram para o
Brasil em situação de desvalimento e vulnerabilidade. Este material pode ser
encontrado e baixado gratuitamente através do Portal Consular, onde ele também é
distribuído nas embaixadas.
39
Figura 4: Guia de retorno ao Brasil Fonte: Ministério das Relações Exteriores, 2010.
O documento possui um total de 38 páginas, e é trabalhado com a seguinte
estrutura de conteúdo:
● Introdução - breve resumo sobre para quem este informativo é indicado;
● Programas do governo - informa alguns programas na área de trabalho,
assistência financeira, educação, moradia e proteção. Eles apresentam breves
descrições sobre algumas das opções existentes junto ao endereço virtual de
cada um destes programas, onde o leitor pode encontrar mais informações;
● Serviços - uma lista categorizada por estados, com serviços na área de saúde,
casas-abrigo, assistência social e atendimento LGBT;
● Telefones úteis - é indicado alguns números de telefones que podem ser úteis
para os imigrantes.
40
Figura 5: Guia do retorno ao Brasil, páginas informativas Fonte: Ministério das Relações Exteriores, 2010.
Apesar do material conter informações relevantes, ele possui uma proposta
diferenciada como solução do problema identificado na introdução deste documento.
Além disso, o formato em que este guia é apresentado pode não ser o mais indicado
para o público-alvo deste projeto, que é representado por jovens com idade entre 16
e 25 anos.
O Twitter é uma rede social com estilo microblogging que permite que os seus
usuários compartilhem e recebam atualizações pessoais dos seus contatos em tempo
real através do feed e no perfil de cada usuário. A ferramenta conta com uma limitação
de caracteres por postagem, limitando a escrita entre 280 caracteres, criando-se
assim, um padrão sobre a informação vinculada a esta rede. Os usuários podem
interagir entre as postagens, com a possibilidade de repostar e curtir os seus
conteúdos favoritos, além de seguir os seus perfis desejados, trocar mensagens
privadas, e ver os assuntos mais comentados do momento.
41
Figura 6: Aplicativo Twitter Fonte: Twitter Inc., 2018.
Com a possibilidade de uso tanto para a versão web, quanto para a mobile, a
interface de suas telas são bem limpas e não possui muitos conflitos entre elementos.
Analisando a sua versão mobile, o Twitter faz uso de algumas práticas presentes no
Google Material Design (2018), como por exemplo, um menu inferior de navegação,
que dispõe as funções primárias do sistema. Além disso, foi adicionado recentemente,
um botão flutuante que permite que o usuário realize a principal função de cada tela,
no caso da Figura 5, o botão direciona o seu usuário para a tela de fazer uma nova
postagem. Esses dois itens otimizam ainda mais a usabilidade do usuário em relação
às interfaces.
O aplicativo Cogni (2018) também foi analisado, pois este, é uma solução
destinada para que os seus usuários consigam registrar as suas emoções sempre em
que algo marcante aconteça com eles, podendo fazer anotações a respeito da
situação e, também, as ações que foram tomadas em decorrência desses
acontecimentos (Figura 7).
42
Figura 7: Telas de navegação para registro de humor do app Cogni Fonte: Spotwish, 2018.
O usuário consegue ter acesso ao seu relatório de emoções, onde ele
consegue visualizar a frequência dos seus estados emocionais, junto às informações
coletadas no momento dos registros. O aplicativo também disponibiliza uma opção
(Figura 8) onde o usuário consegue enviar este relatório diretamente para o seu
terapeuta ou psicólogo, através de um recurso inserido dentro de suas
funcionalidades.
Figura 8: Telas de acesso aos relatórios de emoções do app Cogni Fonte: Spotwish, 2018.
43
A interface do aplicativo Cogni contém poucos elementos gráficos e de texto,
o que reduz as chances do usuário ter dificuldades ao interagir com as telas, fazendo
com que ele consiga direcionar o foco para as funções necessárias e
consecutivamente, as páginas acabam ficando mais compactas, dispondo apenas as
informações necessárias (KRUG, 2008, p. 45).
Por fim, o Cínculo (2018) é um aplicativo voltado para o bem-estar emocional
(Figura 9), que foi desenvolvido por especialistas em neurociências, apresenta
recursos e informações para que o usuário consiga ampliar a sua consciência e reduzir
a ansiedade, estresse, insegurança, aumentando a sua autoestima, ânimo e atitude.
Figura 9: Telas do app Cíngulo Fonte: Código da mente, 2018.
O sistema possui uma função de autoavaliação, que são testes periódicos,
feitos através de perguntas em formato de escala linear, que servem para acompanhar
o estado emocional de seus usuários. Além disso, o app dispõe sessões diárias de
autoconhecimento, trazendo conteúdos em formato de texto e técnicas em áudio para
ajudar os seus usuários com problemas emocionais (Figura 10).
44
Figura 10: Telas do app Cíngulo Fonte: Código da mente, 2018.
Em uma função nomeada como “SOS emocional”, o usuário pode escolher qual
emoção ele está sentindo, e ao clicar em alguma das opções, ele encontrará
conteúdos que possam amenizar os efeitos destas emoções, através de conteúdos
gratuitos e pagos, pois o aplicativo trabalha com um sistema de assinatura, onde o
usuário poderá acessar conteúdos e recursos exclusivos. Por fim, o Cíngulo também
possui um diário emocional que funciona no mesmo estilo do app Cogni, como
mencionado anteriormente.
A partir desta análise de aplicativos, foi-se criado um quadro comparativo
(Quadro 1), destacando as principais funções de cada um, com base no contexto do
desenvolvimento deste projeto.
45
Quadro 1: Tabela comparativa entre opções analisadas Fonte: O autor, 2018.
Com base na tabela, foi-se possível fazer a listagem das principais funções
para a solução do problema do público-alvo do aplicativo desenvolvido neste
documento. O foco consiste em funções que entregue informações pertinentes para
os seus usuários sobre o período que envolve o intercâmbio.
4.1.2 Nome da marca
Para que o nome do aplicativo desenvolvido neste projeto pudesse ser
desenvolvido, foi realizado um levantamento entre os aplicativos mais baixados em
apps stores, onde foi possível identificar que a grande maioria dos aplicativos de
serviço, utilizam nomes singulares ou compostas, com a junção de duas palavras.
Além disso, a lista de opções (Quadro 2) passou a ser filtrada com base em alguns
aspectos como aplicativos que possuem um nome curto e de fácil memorização,
adequado ao serviço que é oferecido e poder ser pronunciado internacionalmente. Em
46
seguida, após este levantamento, foi-se criado um quadro (Quadro 3) com as
palavras-chave que representam a proposta deste projeto.
Quadro 2: Lista de nomes de aplicativos Fonte: O autor, 2018.
Quadro 3: Palavras-chave referente ao desenvolvimento do projeto Fonte: O autor, 2018.
A partir das palavras-chave, foi possível identificar algumas variáveis dentro
destes termos, podendo-se expandir as alternativas de nome para o app. A seguir
(Quadro 4), são apresentadas algumas das opções geradas, categorizados em 3
partes:
1. Nomes de animais: aqui, uma pesquisa sobre animais migratórios foi realizada
(em referência deles viverem em diferentes lugares), e com base nos
47
resultados, duas espécies de animais puderam ser selecionadas: Bobo-Escuro
e Pinguim;
2. Variáveis com algumas palavras-chave;
3. Combinação de duas palavras em uma só.
Quadro 4: Geração de alternativas para naming Fonte: O autor, 2018
Com base nas opções levantadas, através de opiniões coletadas e também
pessoal, foi decidido que o aplicativo seguirá com o nome Abroadly, partindo da junção
da palavra “Abroad” e o sufixo “Ly”, criando uma nova palavra que não possui uma
tradução e definição exata para o português, mas pode ser caracterizado como o ato
de estar em um lugar diferente, no exterior.
4.2 ESCOPO
Nesta etapa do projeto, é definido e organizado os requisitos funcionais do
projeto a ser desenvolvido. Aqui, o escopo começa a tomar a forma de requisitos de
conteúdo através das informações já coletadas e analisadas na pesquisa de similares,
e também, será utilizado um questionário para se coletar mais informações sobre o
sistema a ser projetado.
Para a validação da alternativa de solução deste projeto, foi preciso se focar na
necessidade do usuário, onde por intermédio de um questionário online, desenvolvido
com a ferramenta Google Forms, foi apresentado para os participantes, as principais
funções que este aplicativo poderia ter que foram definidas com base no problema
identificado e na análise de similares, para que assim, fosse possível identificar quais
48
recursos o aplicativo poderia dispor aos seus usuários. Entre as opções, encontram-
se as seguintes funcionalidades:
● Poder interagir com perfil de outros usuários;
● Compartilhar experiências próprias;
● Buscar informações por assuntos específicos;
● Salvar postagens favoritas;
● Documentar acontecimentos diários;
● Poder interagir com as postagens de outros usuários;
● Acompanhar conteúdos desenvolvidos por profissionais com dicas e
orientações.
Seguindo a ordem de funções, os usuários puderam selecionar quais eles
consideravam mais importantes para a proposta do aplicativo, incluindo uma opção
de poder sugerir alguma função que não foi sugerida. As duas opções que mais
receberam votos foi a de buscar informações por categorias específicas e no
compartilhamento de experiências próprias. Também é possível se identificar (Figura
11) a necessidade da interação entre os usuários.
Figura 11: Avaliação dos recursos pelos usuários Fonte: O autor, 2018.
Com base na análise de similares e com o feedback dos usuários em relação
às opções apresentadas, para uma melhor exemplificação sobre as principais telas e
funcionalidades, foi criado uma lista contendo mais informações sobre os recursos do
app (Quadro 5).
49
Quadro 5: Lista das principais funcionalidades do aplicativo Fonte: O autor, 2018
4.3 ESTRUTURA
O plano da estrutura, segundo Garrett (2011), é uma das partes mais
complexas, pois aqui é definido como os requisitos e funcionalidades da aplicação irão
se encaixar, elaborando-se assim o contexto de navegação do projeto. Aqui, o escopo
ganha uma estrutura dentro do contexto de interfaces, estabelecendo como o sistema
se comporta em resposta às interações do usuário. Para que a estrutura seja melhor
50
exemplificada, foi desenvolvido um fluxograma (Figura 12) para a identificação das
telas e elementos de conteúdo.
Figura 12: Fluxograma do aplicativo Fonte: O autor, 2018
4.4 ESQUELETO
No plano do esqueleto, é onde os planos da estrutura se tornam concretos,
através da organização visual do conteúdo, por meio de wireframes. Kalbach (2009,
apud MEURER, 2014, p. 128) descreve wireframe “como esboços preliminares das
telas do produto nas quais podem ser observadas a estruturas, organização, ordem e
natureza dos elementos e a hierarquia e densidade das informações”. Segundo
51
Garrett (2011, p. 34), os esqueletos devem dispor de elementos que permitam a
interação do usuário, de modo em que a informação possa se relacionar diretamente
com a experiência de entendimento do mesmo. Para isso, foi se utilizado os recursos
presentes no software Adobe Xd.
4.4.1 Alternativas de esqueleto
As primeiras telas (Figura 13) são as de acesso ao aplicativo, onde o serviço
requer um cadastramento de perfil para o que o sistema possa funcionar
propriamente, permitindo a verificação de identidade e suporte ao usuário. Para
facilitar o processo, o usuário poderá se conectar através de suas redes sociais
(Facebook ou acesso Google), ou criar uma conta no próprio sistema.
Figura 13: Telas do wireframe: telas de acesso Fonte: O autor, 2018.
Após o usuário entrar no sistema, será disponibilizado, a tela com o feed de
publicações (Figura 14, n. 1), contendo posts dos usuários que ele irá vir a seguir. Os
conteúdos foram organizados em formatos de cards. Além disso, é disposto na tela
inicial, um menu de navegação inferior, que permite a navegação entre a localização
das ações primárias do app. Também, foi adicionado um botão flutuante, que permite
que o usuário escreva um novo post, e é um conceito apresentado pelo Material
Design (Google, 2018), reforçando o princípio do affordance (ROGERS, 2013), onde
alguns recursos são dispostos na interface para facilitar a usabilidade do usuário.
52
Em seguida, explorando as funções dispostas no menu inferior, o usuário pode
acessar diretamente o seu perfil (Figura 14, n. 2), contando algumas informações
básicas como nome, biografia, localidade, outras redes sociais, mídias (como fotos e
vídeos) e suas postagens.
Figura 14: Telas do wireframe: feed e perfil Fonte: O autor, 2018.
Seguindo nas opções dispostas no menu de navegação inferior, se encontra
a tela de mensagens (Figura 15), onde o usuário verá a lista de mensagens existentes
(Figura 15, n. 1), podendo fazer a pesquisa por nome para iniciar uma nova ou buscar
uma antiga conversa. Nesta tela, o usuário poderá editar as suas mensagens,
apagando as opções desejadas, acessar o perfil dos usuários em que existe uma
conversa, e também, enviar anexos como localização atual, mensagem de voz, e
enviar fotos ou vídeos (Figura 15, n. 3).
53
Figura 15: Telas do wireframe: mensagens Fonte: O autor, 2018.
Também no menu de navegação inferior, há o botão que direciona o usuário
para a tela de notificações (Figura 16, n. 1), onde ele poderá encontrar informações
como novos seguidores, curtidas e compartilhamento em suas postagens. A seguir,
na tela de pesquisa (Figura 16, n. 2), o usuário poderá buscar qualquer tipo de
informação no sistema, desde perfis de pessoas, até postagens que possuem alguma
palavra-chave pesquisada. Nesta tela, o usuário poderá também encontrar
informações segmentadas pelo período de intercâmbio, onde ele será capaz de filtrar
as postagens por localidade, e por fim, na tela de busca, o aplicativo disponibilizará
alguns dos temas mais populares do momento.
54
Figura 16: Telas do wireframe: notificações e navegação Fonte: O autor, 2018.
Seguindo conceitos do Material Design (Google, 2018), foi desenvolvido uma
navigation drawer (Figura 17, n. 1), que permite a navegação do usuário entre os
destinos e funções do app através de um menu lateral, que é representado pelo ícone
de menu. Aqui, o usuário terá como opções de navegação: o diário para registro de
acontecimentos e sentimentos, um guia emocional com algumas informações e
conteúdos que podem ajudar o intercambista em momentos difíceis, procura por
eventos e pessoas próximas à sua localização atual, configuração do sistema e opção
de logout.
O diário (Figura 17, n. 2) permite que o usuário registre um sentimento,
podendo ser: muito feliz, feliz, normal, triste e muito triste, e compartilhe com o sistema
algumas informações sobre aquele momento vivido. Aqui, o usuário deverá responder
às seguintes perguntas:
● “Por que você está se sentindo assim?” - Deste modo o usuário poderá
descrever melhor o porquê de ele estar se sentindo feliz ou triste, assim como
adicionar mais emoções que ele pode estar sentindo;
● “Descreva uma dificuldade do momento” - Esta pergunta permite que o usuário
pense em algum obstáculo encontrado no caminho durante aquele dia ou
situação, pois em um intercâmbio, todos os dias costumam ter alguma
55
dificuldade, por menor que seja, e isso é o que faz com que a experiência seja
tão válida;
● “Compartilhe uma superação sobre a situação” - Identificando-se uma
dificuldade, espera-se que o usuário também consiga encontrar meios para
superação daquele obstáculo, deste modo, o usuário poderá ter um acervo
pessoal sobre como ele conseguiu lidar com situações difíceis ao decorrer da
experiência de seu intercâmbio.
Após responder estas perguntas, o usuário poderá guardar a memória para si
mesmo, ou postar estas experiências de modo público em seu perfil. Ainda na função
do diário, o usuário poderá encontrar o histórico de todos os registros adicionados,
assim como um relatório emocional, que mostrará de maneira visual, um gráfico que
apresentará a variação de acordo com a seleção do sentimento no momento de adição
de um novo registro, o relatório será mensal (Figura 17, n. 13).
Figura 17: Telas do wireframe: navigation drawer e diário pessoal Fonte: O autor, 2018.
Um outro recurso disponível no aplicativo, é o guia emocional (Figura 18, n.1).
Nesta opção, o usuário poderá encontrar uma lista pré-selecionada de emoções como
ansiedade, estresse, desmotivação, nostalgia, entre outros, e o aplicativo irá
apresentar alguns conteúdos relacionados desenvolvidos pela equipe do aplicativo
Abroadly (contando com a ajuda de psicólogos-intercultural e especialistas em
neurociência), contando com dicas e técnicas de como aliviar os efeitos daqueles
56
sentimentos (Figura 18, n. 2), assim como, encontrar postagens populares de outros
usuários que compartilharam suas experiências sobre aquelas emoções, neste caso,
o aplicativo irá listar as postagens que receberam mais engajamento, e ele será
verificado pelos administradores do aplicativo, para que estes posts fiquem fixados às
páginas de cada emoção.
Figura 18: Telas do wireframe: guia emocional Fonte: O autor, 2018.
Através de uma sugestão de recurso para o aplicativo, coletado na entrevista
apresentada no capítulo 5.2 Escopo, foi adicionado a opção do usuário conseguir
encontrar outros usuários do aplicativo encontrados próximos à sua localização
(Figura 19, n.1), permitindo que pessoas possam se conhecer e trocar informações
locais, assim como criar e compartilhar eventos que possam ser úteis, como palestras,
workshops e programas de assistência psicológica. O usuário deverá configurar as
opções de privacidade e localização na configuração do aplicativo, caso ele não queria
57
ser exibido para outros usuários através desta opção, ele poderá fazer as devidas
configurações.
Figura 19: Telas do wireframe: localizar eventos e intercambistas Fonte: O autor, 2018.
Por fim, foi desenvolvido as opções pertencentes as configurações do sistema
(Figura 20), contando com a possibilidade de alteração nos dados pessoas e de
privacidade, assim como termos de uso, privacidade, e opção para a desativação da
conta.
58
Figura 20: Telas do wireframe: configurações do sistema Fonte: O autor, 2018.
4.4.2 Teste de usabilidade
Por conta de este projeto possuir princípios básicos sobre design de
usabilidade, se foi necessário realizar testes de navegabilidade perante o sistema e
organização de informações inicialmente desenvolvidas, através da análise de
usabilidade envolvendo três possíveis usuários para o aplicativo.
Este teste foi realizado por meio do desenvolvimento inicial das telas do
aplicativo e organizadas em um protótipo interativo digital montado no software Adobe
Xd, permitindo que os usuários testassem a interface diretamente em seus
smartphones, fazendo com a simulação se tornasse mais fiel a proposta apresentada.
Ademais, o protótipo também pôde ser testado pelo computador.
O teste de usabilidade serve para que seja possível se detectar possíveis
problemas no fluxo de tarefas do aplicativo, entender a percepção dos participantes
sobre as funções dispostas, assim como a compreensão das razões por detrás de
cada recurso, e avaliar a satisfação geral dos usuários sobre a proposta desenvolvida.
Para isso, 3 pessoas que já realizaram algum tipo de intercâmbio foram recrutadas
para a realização do teste, que foi realizado em 3 etapas, sendo elas:
59
● O preenchimento do formulário de pré-teste, contendo perguntas sobre o
perfil dos participantes;
● O teste em si, onde foi disposto um roteiro do teste (Apêndice A),
desenvolvido a fim de ser possível a análise da navegação do usuário entre
as principais características do app;
● Considerações finais sobre o participante, contando com as suas opiniões,
criticas, pontos positivos e possíveis melhorias, incluindo uma avaliação sobre
os recursos do aplicativo.
Figura 21: Teste com os usuários Fonte: O autor, 2018.
O teste foi realizado de maneira assistida, permitindo que o usuário
esclarecesse as suas dúvidas em tempo real, e também recebesse algumas
orientações sobre a usabilidade do protótipo. Com base nas informações coletadas,
algumas observações tiveram um destaque maior, sendo elas:
● O filtro na tela inicial do feed ficou confuso, sendo sugerido que caso o usuário
queira filtrar os conteúdos da timeline, ela se tornasse o padrão, não havendo
a necessidade de se ter dois feeds. Assim sendo, um botão de configuração foi
adicionado no feed, onde o usuário pode configurar os tipos de posts em que
ele quer ver em sua timeline. A opção de “filtros” substituída pelo botão de posts
favoritados pelo usuário.
60
● A opção de encontrar pessoas e eventos no menu lateral ficou deslocado,
sendo sugerido que estas funções fossem direcionadas para a aba de
pesquisa, no menu de navegação inferior.
● Quando o usuário adiciona um registro novo em seu diário, foi percebido que
seria importante se ter uma mensagem de confirmação do sistema, notificando
que a postagem foi salva.
● A adição de um recurso novo no menu lateral de navegação, a seção de
“Informações Úteis”, contendo informações dispostas pelo próprio sistema
contendo os principais conteúdos sobre as etapas do intercâmbio. Por
exemplo, na página de informações sobre o período do retorno, o usuário
conseguiria encontrar informações sobre o estresse de aculturação de retorno,
sugestões de como procurar ajuda profissional, principais emoções do
momento, etc.
Além disso, através de uma avaliação sobre os recursos relacionados às
principais características do aplicativo, foi-se possível identificar a necessidade de
reestruturação de informações ou de recursos de acordo com o que foi apresentado.
Quadro 6: Avaliação de recursos pelos usuários-teste Fonte: O autor, 2018.
Com base nas considerações levantadas durante o teste e a avaliação,
serviram para o desenvolvimento final dos wireframes, fazendo com que a estrutura
61
passasse por um processo de maturação, conseguindo-se ter uma estrutura de
informações mais concreta e completa.
4.4.3 Esqueleto final
Levando como base as principais considerações obtidas com o teste de
usabilidade com os usuários, algumas mudanças no fluxo de navegação e alteração
na disposição de alguns recursos tiveram que ser redefinidos. Estas modificações não
tiveram um grande impacto no fluxo geral do aplicativo, por conta disso, somente
algumas telas foram alteradas.
Anteriormente, o feed continha uma seção de filtros, onde o usuário podia
estabelecer quais conteúdos ele gostaria de ver, podendo ser definido por período de
intercâmbio e por localização. Porém, a maneira em que este recurso foi disposto na
interface, acabou gerando uma certa confusão nos usuários. Contudo, como este
recurso de filtro foi-se entendido como interessante, esta opção acabou sendo
realocada, se transformando uma outra tela de configuração, que pode ser acessada
através do ícone de configurações no canto superior direito na tela do feed (Figura 21,
n. 1).
Em seguida, na primeira versão dos wireframes, no menu de navegação lateral
havia a seção de encontrar outros intercambistas próximos e eventos criados pelos
usuários, entretanto, foi sugerido que esta opção fosse realocada para a página de
busca, localizada no menu de navegação inferior. Sendo assim, a tela de busca
passou a ser organizada por abas, ou tabs, como definido pelo Material Design (2018),
permitindo que o conteúdo seja disposto em diferentes telas em uma só tela (Figura
21, n. 2).
62
Figura 22: Telas do wireframe final: navegação Fonte: O autor, 2018.
Deste modo, uma nova função foi adicionada ao aplicativo no menu de
navegação lateral, sendo inserido a seção de informações úteis (Figura 21, n. 1). Aqui
os usuários podem encontrar informações fixas sobre cada período do intercâmbio.
Caso o usuário clique na página sobre o retorno do intercâmbio, ele poderá encontrar
informações sobre o estresse de aculturação de retorno (Figura 21, n. 3), por exemplo.
Estes conteúdos passariam por uma curadoria, para que as principais informações
pudessem ser eficiente para os usuários.
63
Figura 23: Telas do wireframe final: informações úteis Fonte: O autor, 2018.
Além disso, pequenas melhorias e alterações foram adicionadas às telas para
a otimização do uso do sistema. Com a base das principais funções e organização de
informações, o projeto pôde seguir o seu desenvolvimento para o plano de superfície.
4.5 SUPERFÍCIE
Nesta etapa, surge a necessidade de se desenvolver um tratamento visual para
as interfaces. A superfície abrange componentes do design gráfico como cores e
tipografia, assim como, elementos da identidade visual, através da marca. Estas
características serão estabelecidas através de pesquisas, geração de alternativas e
testes, visando um resultado esteticamente atrativo e funcional.
4.5.1 Painel semântico
Com base em elementos relacionados à temática do aplicativo desenvolvido,
um conjunto de elementos visuais contendo fotografias e imagens foi coletado e
reunido em um formato de painel semântico, com o intuito de orientar o
desenvolvimento da identidade visual deste projeto. A busca visual também teve como
64
objetivo, encontrar referências em identidades visuais de aplicativos, que
preferencialmente, fizessem uso do flat design, uma linguagem gráfica que utiliza
cores sólidas para proporcionar um alto contraste entre botões e outros elementos
gráficos.
Figura 24: Painel semântico Fonte: O autor, 2018.
65
4.5.2 Tipografia
A tipografia em uma interface funciona como um meio de apresentação
eficiente e clara de seu design e conteúdo. Para este aplicativo, foi definido que a
família tipográfica utilizada seria a Roboto (Figura 25), sendo ela a fonte padrão
apresentada pelo material design (2018), que também apresenta as orientações sobre
os usos dos diferentes tipos de pesos e tamanhos da fonte, como exemplificadas na
Figura 26.
Figura 25: Roboto Fonte: Google Inc., 2018
Figura 26: Orientações aplicações tipográficas Fonte: Google Inc., 2018.
66
4.5.3 Cores
Através das 8 regras de ouro criadas por Shneiderman (1992), a consistência
presente no sistema, é um dos princípios que não podem ser desconsiderados. As
cores funcionam como um meio de comunicação para o usuário, onde através de
determinadas escolhas de cores, pode-se ser definido um padrão visual, o que irá
facilitar a usabilidade no sistema. Assim como indicado pelo autor, é sugerido o uso
de até 4 cores de destaque, com a escolha de algumas cores adicionais que devem
ser reservadas para usos ocasionais (SHNEIDERMAN, 1992, p. 80).
Para este projeto, conforme apresentado anteriormente no painel semântico,
foi-se decidido usar tons relacionados ao nascer e no pôr do sol, se remetendo a ideia
de que cada dia é único, mesmo durante ou após um período de intercâmbio. Por isso,
as principais cores escolhidas foram o amarelo e o azul, que são cores
complementares, facilitando o contraste de tons. Deste modo, a paleta de cores
utilizada no aplicativo foi definida (Figura 26).
Figura 27: Paletas de cores escolhidas para o layout Fonte: O autor, 2018.
67
Com base nestas escolhas, a organização e a hierarquia de informações
podem ser melhores dispostas. O branco será uma cor predominante, principalmente
entre os backgrounds das telas, as cores de tons amarelados e azulados serão
utilizadas para destacar botões e funções, já os tons escuros serão utilizados nos
elementos tipográficos e de navegação.
4.5.4 Logo
Para o desenvolvimento do logo, além das imagens presentes no painel
semântico, apresentado anteriormente, foi-se feito um brainstorm sobre palavras e
elementos relacionados com intercâmbio, e a partir disso, um novo painel semântico
voltado para exclusivamente para o desenho da nova marca.
Figura 28: Painel semântico criado para a logo Fonte: O autor, 2018.
A geração de alternativas (Figura 28) se deu por meio manual e digital, sendo
a segunda a principal. Entre os principais conceitos, a figura do avião foi escolhida
para representar o aplicativo, por ser um elemento de fácil associação a viagens.
68
Figura 29: Geração de alternativas para a logo Fonte: O autor, 2018.
Após uma análise pessoal, foi decidido que a logo seguiria sendo apenas
tipográfica, possuindo o ícone do aviãozinho de papel, como um elemento gráfico de
apoio para outras aplicações (Figura 30), como por exemplo, no catálogo das lojas
onlines para download de aplicativos. A fonte tipográfica Varela Round foi a escolhida
por conta do seu aspecto arredondado, a deixando com uma aparência mais
amigável.
Figura 30: Logo escolhida Fonte: O autor, 2018.
69
5 RESULTADO
O aplicativo que foi desenvolvido durante este trabalho, visa trazer informações
a respeito do período de intercâmbio em todas as suas etapas, incluindo o momento
de retorno, que em muitos casos, podem acabar faltando instruções e informações
para os intercambistas. Deste modo, através de uma rede social voltada
exclusivamente para conteúdos acerca do intercâmbio, espera-se que os seus
usuários consigam ter uma visão maior sobre o que cada período representa,
conseguindo assim, desenvolver um melhor preparo para estes momentos. Um
protótipo online foi criado para que o aplicativo pudesse ser apresentado, e pode ser
acesso em https://adobe.ly/2ORrC7W.
5.1 TELAS DE ACESSO
A primeira tela de acesso para o usuário (Figura 30) apresenta as opções para
o login e o cadastro, que podem ser realizadas através de redes sociais para facilitar
o acesso ao aplicativo (Figura 31, n. 2). Algumas informações de perfil poderão ser
adicionadas posteriormente nas configurações. Além disso, o sistema
permite que o usuário redefina a sua senha, caso ele esqueça sua chave de acesso.
Figura 31: Layout final: telas iniciais Fonte: O autor, 2018.
70
Figura 32: Layout final: telas de acesso Fonte: O autor, 2018.
Após o usuário realizar os procedimentos de acesso ao aplicativo, a primeira
tela disposta para ele, é o feed de publicações. Caso este seja o primeiro acesso dele,
o sistema irá dispor a possibilidade de ele vincular os amigos do Facebook, que
possuem as suas contas vinculadas ao aplicativo, permitindo que o usuário já siga
perfis e comece a consumir os conteúdos postados (Figura 33).
Figura 33: Layout final: primeiro acesso Fonte: O autor, 2018.
71
Caso o usuário já tenha o seu perfil criado e já realizou tarefas como a de seguir
pessoas, o feed apresentará as últimas postagens feitas por estes usuários (Figura
34, n. 1). O feed conta com duas abas, a de publicações e as de posts salvos (Figura
34, n. 3), que podem ser favoritados pelo usuário, além de dispor um botão flutuante
que permite a criação de um novo post.
Ao fazer uma nova publicação (Figura 34, n. 2), o usuário deve escrever um
título, selecionar o período do intercâmbio em questão e adicionar tags, que não
aparecerão na postagem, mas que são necessários para a otimização do algoritmo
do sistema. Além disso, o usuário poderá adicionar mídias como fotografias e vídeos,
e também, marcar amigos em sua publicação.
Figura 34: Layout final: feed de postagens Fonte: O autor, 2018.
O aplicativo dispõe um sistema de filtro no feed de publicações (Figura 35),
onde o usuário pode definir ver postagens a respeito de um período de intercâmbio e
localização específica, se houver a necessidade. Para isso, o usuário pode acessar a
tela de configuração, clicando no ícone de engrenagem presente no canto superior
direito da home.
72
Figura 35: Layout final: aplicação de filtros no feed Fonte: O autor, 2018.
5.2 NAVEGAÇÃO
Partindo da ordem das funções primárias do aplicativo, dispostas no menu de
navegação inferior, a tela de navegação, representada pelo ícone de lupa, permite
que o usuário encontre qualquer informação presente no sistema. Em sua tela inicial
(Figura 36, n. 1), é apresentado 3 cards indicando os momentos de intercâmbio, onde
em cada um, o aplicativo irá dispor as publicações mais populares feitas pelos
usuários, além de trazer os assuntos e categorias mais comentados de cada período
(Figura 36, n. 2).
73
Figura 36: Layout final: navegação Fonte: O autor, 2018.
Na tela de navegação, o usuário poderá encontrar a opção de encontrar outros
intercambistas e eventos próximos a ele, através do sistema de localização. Esta
opção pode ser acessada através da aba localizada no topo da página. Além de
encontrar os eventos públicos mais populares, criados por outros usuários, o usuário
poderá criar os seus próprios eventos, podendo estes serem privados ou não.
74
Figura 37: Layout final: localizar eventos e intercambistas Fonte: O autor, 2018.
5.3 NOTIFICAÇÃO
A tela de notificações (Figura 38) reúne todas as atividades relacionadas ao
perfil do usuário, aqui, são notificadas ações como: novos seguidores, convite para
eventos, e curtidas, comentários e compartilhamento em posts. Caso haja alguma
interação com um post que possua alguma mídia anexada, a miniatura será
apresentada junto às atividades.
75
Figura 38: Layout final: notificações Fonte: O autor, 2018.
5.4 MENSAGENS
A troca de experiências e relatos por parte dos intercambistas é um dos
principais intuitos do aplicativo, por isso, é necessário a possibilidade de troca de
mensagens privadas entre os usuários. Localizado no menu de navegação inferior, os
usuários poderão mandar mensagens para os seus seguidores quando eles quiserem
(Figura 39, n. 1), podendo-se enviar anexos como fotos e vídeos, localização, arquivos
e compartilhar eventos (Figura 39, n. 3). O aplicativo dispõe o status de atividade dos
usuários, mostrando qual foi o último acesso deles ao aplicativo. Nesta tela é
apresentado um botão flutuante que permite o envio de novas mensagens.
76
Figura 39: Layout final: mensagens Fonte: O autor, 2018.
5.5 PERFIL
Por fim no menu de navegação inferior, é disposto o direcionamento para o
perfil do usuário, onde ele poderá editar a sua foto de perfil de capa, ver as suas
publicações, mídias e seguidores (Figura 40, n. 1). O sistema permite que o usuário
vincule suas redes sociais externas em seu perfil, como o Facebook, Instagram e
Twitter, que podem ser configuradas na configuração de perfil (Figura 40, n. 3).
77
Figura 40: Layout final: configurações de perfil Fonte: O autor, 2018.
5.6 NAVIGATION DRAWER
Outros recursos do aplicativo podem ser encontrados no menu de navegação
lateral (Figura 41), ou navigation drawer, como definida pelo material design (2018).
Este recurso permite que as informações fiquem melhor organizadas e facilite a
usabilidade do sistema. Aqui são dispostos 5 possíveis destinos para o usuário: o
diário pessoal, guia emocional, informações úteis, configurações do sistema e logout.
78
Figura 41: Layout final: navigation drawer Fonte: O autor, 2018.
5.7 DIÁRIO PESSOAL
O recurso do diário pessoal permite que o usuário registre acontecimentos em
seu dia a dia, podendo eles serem bons ou ruins. Independente de qual foi o
sentimento escolhido (Figura 42, n. 1), o usuário deve registrar um acontecimento bom
e ruim do dia, deste modo, ele conseguirá guardar um acervo pessoal contendo os
registros de sua própria vivência (Figura 42, n. 2). O sistema também permite que o
usuário anexe imagens e vídeos aos seus registros. O conteúdo criado nesta página
pode ser adicionado de modo público, sendo disposto na timeline do usuário e seus
seguidores. Além disso, o sistema criará um relatório emocional com base nas
emoções registradas mensalmente pelo usuário através de um gráfico (Figura 42, n.
3).
79
Figura 42: Layout final: diário pessoal Fonte: O autor, 2018.
5.8 GUIA EMOCIONAL
Nesta tela será apresentado ao usuário alguma das principais emoções que
um intercambista pode vir a passar, independente do momento no qual ele está
inserido (Figura 43, n. 1). Deste modo, ao selecionar uma emoção, o usuário poderá
encontrar posts elaborados pela equipe do aplicativo (Figura 43, n. 2), que conta com
profissionais da área de psicologia intercultural e especialistas em neurociências,
contando com dicas e técnicas de como lidar com aquele sentimento.
O usuário também poderá conferir posts de outros usuários em relação àquela
emoção (Figura 43, n. 3), posts que serão avaliados pelos administradores do
aplicativo antes de serem dispostos nesta página. Este conteúdo pode ser acessado
pelas tabs.
80
Figura 43: Layout final: guia emocional Fonte: O autor, 2018.
5.9 INFORMAÇÕES ÚTEIS
Este recurso do aplicativo consiste em apresentar as principais informações
que envolvem cada período do intercâmbio (Figura 44). O conteúdo presente nesta
seção irá passar por uma curadoria, sendo apresentada junto às suas fontes de
referência. Aqui, informações como ansiedade pré-intercâmbio e o estresse de
aculturação de retorno serão apresentadas no intuito de mostrar para os
intercambistas possíveis complicações que podem acabar surgindo durante suas
experiências.
81
Figura 44: Layout final: informações úteis Fonte: O autor, 2018.
5.10 CONFIGURAÇÕES DO SISTEMA
Por fim, o aplicativo também dispõe recursos sobre o seu sistema, envolvendo
as suas configurações onde o usuário pode fazer a alterações de informações
privadas e de perfil, assim como ajustar privacidade de localização, desativar
notificações e acessar termos de condição e de privacidade (Figura 45).
82
Figura 45: Layout final: configurações do sistema Fonte: O autor, 2018.
83
6 FLUXO DE TELAS FINAL
O fluxo de telas final (Figura 46) foi elaborado para que se fosse possível ter
uma visão geral sobre a estrutura desenvolvida para este aplicativo neste trabalho.
Esse fluxo também foi utilizado para que a prototipação do sistema pudesse ser mais
completa e efetiva.
Figura 46: Fluxo de tela final Fonte: O autor, 2018
84
7 CONCLUSÃO
A razão na qual o tema deste projeto se foi levantado, partiu inicialmente de um
princípio pessoal, onde através da busca de informações, foi possível perceber que
este problema não é algo singular, e que é uma dificuldade que pôde ser identificada
na vivência de diversas outras pessoas em seus intercâmbios. Por conta do
crescimento e da popularização de programas de intercâmbio, a necessidade de se
oferecer soluções e informações que venham a somar pontos positivos para este tipo
de experiência, é algo que vem se mostrando essencial.
Para este projeto, foi necessário a busca de informações metodológicas que
auxiliassem o desenvolvimento deste trabalho. Partindo do ponto da busca de
informações, onde foi possível enxergar um cenário maior sobre o problema, além de
um ponto de vista pessoal, assim como pensar em tipos efetivos de solução.
O design é uma arte que permite se integrar a qualquer aspecto. No cenário
deste trabalho, os princípios sobre design de interface e usabilidade serviram como
uma das principais base para a execução das etapas. Estes conceitos aliados a
metodologia de Garrett e às orientações sobre o design gráfico de interface
apresentadas pelo Google Material Design, garantiram que este trabalho pudesse ser
desenvolvido de maneira apropriada.
A necessidade de se envolver o público-alvo também se mostrou algo muito
importante durante o desenvolvimento, pois através dos olhos de outras pessoas, nós
conseguimos enxergar pontos que muitas vezes podemos não prestar atenção. Deste
modo, a efetividade da solução proposta acaba se tornando maior.
A finalização deste trabalho representa o término de apenas mais uma etapa,
uma vez que ao longo do processo de desenvolvimento, questões sobre
possibilidades e aprimoramento do aplicativo foram levantadas, como por exemplo,
uma versão desktop do aplicativo, além da necessidade de se encontrar meios de
monetização do app, visando a criação de um time de profissionais que possam ajudar
na elaboração de mais conteúdos e métodos voltados para este público-alvo, para
que no futuro, uma possível implementação do aplicativo possa vir a acontecer.
85
REFERÊNCIAS
AGÊNCIA NACIONAL SÓCRATES E LEONARDO DA VINCI. Guia do Estudante Erasmus.2005. Disponível em: < sigarra.up.pt/flup/en/noticias_geral.noticias_cont%3Fp_id%3DF1671411213/ERAS MUS-Guia%2520Estudante2005.pdf > Acesso em: 09 de outubro de 2018.
BAECKERT, Liliana Tinoco. Sonho da volta ao Brasil pode ser tornar pesadelo. 2014. Disponível em: < https://www.swissinfo.ch/por/sociedade/retorno-dif%C3%ADcil_sonho-da-volta-ao-brasil-pode-se-tornar-pesadelo/38312634>. Acesso em: 20 de agosto de 2018.
BAECKERT. Liliana Tinoco. Síndrome do retorno: sonho da volta ao Brasil pode se tornar pesadelo. Disponivel em: < http://www.psicologiahailtonyagiu.psc.br/materias/esclarecendo/257-de-volta-ao-pais-brasileiros-sofrem-sindrome-do-regresso > Acesso em 20 de agosto de 2018.
BELTA. 2018. Gasto médio de brasileiros com intercâmbio aumentou 82% em 2016. Disponível em:< http://www.belta.org.br/gasto-medio-de-brasileiros-com-intercambio-aumentou-82-em-2016/>. Acesso em 15 de agosto de 2018.
BELTA. 2018. Pela primeira vez, Brasil ultrapassa 302 mil estudantes no exterior, revela pesquisa da Belta. Disponível em:< http://www.belta.org.br/pela-primeira-vez-brasil-ultrapassa-302-mil-estudantes-no-exterior-revela-pesquisa-da-belta/> . Acesso em 05 de junho de 2018.
COX, J. Ben. The role of communication, technology, and cultural identity in repatriation adjustment. International Journal of Intercultural Relations, v. 28, n. 3 2004.
DALMOLIN, I. S. et al. Intercâmbio acadêmico cultural internacional: uma experiência de crescimento pessoal e científico. Revista Brasileira de Enfermagem; Brasília Vol. 66, n. 3, 2013.
DUB SOLUÇÕES. Estatísticas de uso de aplicativos no Brasil. 2017. Disponível em: < https://www.dubsolucoes.com/single-post/estatisticas-de-uso-de-aplicativos-no-Brasil >. Acesso em 05 de agosto de 2018.
EVANS. Hugh. 2016 O que significa ser um cidadão global?. Disponível em: < https://www.ted.com/talks/hugh_evans_what_does_it_mean_to_be_a_citizen_of_the_world/transcript?language=pt-br > Acesso em: 04 de setembro de 2018.
ESTADÃO, 2018. Brasil já tem mais de um smartphone ativo por habitante diz estudo da FGV. Disponível em: https://link.estadao.com.br/noticias/geral,brasil-ja-tem-mais-de-um-smartphone-ativo-por-habitante-diz-estudo-da-fgv,70002275238 Acesso em 04 de junho de 2018.
86
FAZITO, Dimitri. Análise de redes sociais e migração: dois aspectos fundamentais do“retorno”. Revista Brasileira de Ciências Sociais. Vol. 25 n° 72, fev., 2010. GAW, Kevin F. Reverse culture shock in students returning from 69 overseas. International Journal of Intercultural Relations, v. 24, n. 1, 2000.
GARRET, Jesse James. The Elements of User Experience: User Centered Design for the Web and Beyond, Second Edition. Berkeley: New Riders, 2011.
G1. Viajantes podem recorrer a auxilio para se readaptar na volta para casa. 2016. Disponível em: <http://g1.globo.com/rs/rio-grande-do-sul/novos-futuros/noticia/2016/10/viajantes-podem-recorrer-auxilio-para-se-readaptar-na-volta-para-casa.html > Acesso em 13 de junho de 2018.
GOOGLE INC. Material Design. Disponível em: <Design - Material Designhttps://material.io/design/>. Acesso em: 10 de junho de 2018.
HILGA, Paulo. Celular se torna principal meio de acesso à internet no Brasil. 2017. Disponível em: < https://tecnoblog.net/252838/celular-principal-meio-acesso-a-internet-brasil-tic-domicilios-2017/ > Acesso em 15 de fevereiro de 2018.
KRUG. Steve. Don’t Make me Think, Revisited: A Common Sense Approach to web Usability. 2016. Londres, New RIDERS Publishing, Ed. 3.
MAIA, Naurelita. Educadores de Sucesso: O que é metodologia?.2011. Disponível em < http://educadoresdesucesso.blogspot.com.br/2011/02/o-que-e-metodologia.html > Acesso em 31 de maio de 2018.
MINISTÉRIO DAS RELAÇÕES EXTERIORES – DIVISÃO DE ASSISTÊNCIA CONSULAR. Guia de retorno ao Brasil. Returning to Brazil – Informações úteis sobre serviços de programas de acolhimento – Useful Information on available services and programs. 2010. Disponível em: < http://www.portalconsular.itamaraty.gov.br/cartilhas/guia-de-retorno-ao-brasil > Acesso em 23 de abril de 2018.
MICHAELIS. 2018. Disponível em: <http://michaelis.uol.com.br/busca?id=qO5NA>. Acesso em 15 de agosto de 2018.
NIELSEN, Jakob. Designing Web Usability: The Practice of Simplicity. São Francisco, New Riders, 1999.
O GLOBO. Número de brasileiros viajando para o exterior volta a crescer. 2018. Disponível em: <https://oglobo.globo.com/boa-viagem/numero-de-brasileiros-viajando-para-exterior-volta-crescer-22512464> Aceso em 20 de agosto de 2018.
OGAWA, Márcia. Uso de smartphones já alcança 80% dos brasileiros. 2016. Disponível em: <https://goo.gl/FgPE8v>. Acesso em: 22 de abril de 2017.
OLIVEIRA, Mariana Gonçalves de; PAGLIUCA, Lorita Marlena Freitag. Programa de mobilidade acadêmica internacional em enfermagem: relato de experiência.
87
Gaúcha de Enfermagem. Porto Alegre, mar; 33(1):195-8, 2012.
PÉERICO, Franco Gatelli. Intercâmbio acadêmico: uma análise sobre a readaptação de intercambistas no retorno ao Brasil. 2016. Disponível em: <http://frispit.com.br/site/wp-content/uploads/2016/10/PÉRICO-Franco-Gatelli.-Intercâmbio-acadêmico-uma-análise-sobre-a-readaptação-de-intercambistas-no-retorno-ao-Brasil.2016-02.pdf> Acesso em 25 de fevereiro de 2018. ROGERS, Yvonnei; SHARP, Heleni; PREECE, Jennifer. Design de Interação:além da interação humano-computador. Porto Alegre, Bookman, 2013.
SEARLE, Wendy; WARD, Colleen. The prediction of psychological and sociocultural adjustment during cross-cultural transitions. International Journal of Intercultural Relations, v. 14, n. 4, p. 449-464, 1990.
SOUZA KV. Intercâmbio educacional internacional na modalidade doutorado sanduíche em enfermagem:relato de experiência. Esc Anna Nery Rev Enferm. V.12, n. 2, 2008.
SZKUDLAREK, Betina. Reentry - A review of the literature. International Journal of Intercultural Relations, v. 34, n. 1, 2010.
SEBBEN, Andréa. Intercâmbio Cultural: um guia de educação intercultural para ser cidadão do mundo. 2. ed. Porto Alegre: Artes e Ofícios, 2001.
STEUTEN, Mirjan. La coherencia nacional en el proceso del choque cultural inverso de ex-estudiantes internacionales en Santiago de Chile. Tese de Mestrado. Universidade de Utrecht. 2015. Disponível em: <http://dspace.library.uu.nl/bitstream/handle/1874/320177/Tesis%20de%20master.% 20Coherencia%20nacional%20y%20el%20proceso%20del%20choque%20cultural%20inverso%20en%20Santiago%20de%20Chile.%20Mirjam%20Steuten.%204188187.%20Augosto%202015..pdf?sequence=2 > Acesso em: 11 novembro 2015.
SHNEIDERMAN, Ben. Designing the User Interface – Strategies for effective human-computer interaction. Londres, Pearson, 2009.
TERRA. ‘Síndrome do retorno’ afeta migrantes na volta à terra natal. 2015. Disponível em: < https://www.terra.com.br/vida-e-estilo/saude/bem-estar/quando-voltar-para-casa-vira-uma-sindrome,34dcab828f2b9667ec5f6c09224a2164z14588e6.html>. Acesso em 30 de julho de 2018.
88
GLOSSÁRIO ANDROID: Nome do sistema operacional da Google. CARDS: Traduzido para o português, significa cartão. Seguindo a definição do Google Material Design, são superfícies que dispõe conteúdos e ações em um só tópico. CHAT: Alternativa para comunicação a distância online FEEDBACK: Retorno de alguma ação LOGIN: Processo de se acessar um sistema
89
MOBILE: Dispositivo móvel NAVIGATION DRAWER: Menu que dispõe acesso para recursos de um sistema SMARTPHONE: Aparelho que reúne recursos de computadores pessoais TIMELINE: Ordem das publicações feitas em redes sociais WIREFRAME: Esqueleto visual da interface
90
APÊNDICE A - QUESTIONÁRIO COM O PÚBLICO ALVO
91
APÊNDICE B - RESULTADOS DO TESTE COM USUÁRIOS
92
APÊNDICE C - WIREFRAMES FINAIS
93
94
95
APÊNDICE D - LAYOUT FINAL
96
97
98
![Ofertas válidas de 26/12 a 31/12/2018. Enquanto durar o ... · garantimos a quantidade mÍnima de 10 unidades por loja dos produtos aqui anunciados ou enquanto durar o estoque. [2]](https://static.fdocumentos.com/doc/165x107/5c2f681909d3f2040c8d2a30/ofertas-validas-de-2612-a-31122018-enquanto-durar-o-garantimos-a-quantidade.jpg)
