UNIVERSIDADE FEDERAL DE ITAJUBA – UNIFEI

ANALISE DE USABILIDADE DE UMA PLATAFORMA MOBILE

Autor(es)Samuel Fernandes Filho

UNIFEIItajuba2019

Analise de usabilidade de uma plataforma mobile

Samuel F. Filho1,

1Instituto de Informatica e Computacao – Universidade Federal de Itajuba (UNIFEI)Av. BPS, 1303, Pinheirinho Itajuba, Minas Gerais

2

Abstract. Technological changes and evolution significantly extend user de-mands and the ability to improve the task, structure, and functionality of mobiledevices. Due to the large market available in the world of application cre-ation, competition for the development of cutting-edge applications has beenincreasing. This study focuses on the creation and analysis of a textit mobileapplication. Usability has taken its place in the market and today is consideredone of the most important factors for the development of good applications, bethey textit mobile, textit web or textit desktop. Therefore, under the view ofNielsen heuristics the application will be submitted evaluations to be possibleto have an evaluation about their qualities and defects. At the end of the test itwas possible to verify that although the application has some usability relatedstrengths, there is still room for improvement.

Resumo. As mudancas tecnologicas e a evolucao ampliam significativamenteas demandas do usuario e a capacidade de melhorar a tarefa, a estrutura efuncionalidade dos dispositivos moveis. Devido ao grande mercado disponıvelno mundo da criacao de aplicacoes, a concorrencia para o desenvolvimento deaplicativos de ponta vem aumentando cada vez mais. Esse estudo tem comofoco a criacao e analise de um aplicativo mobile. A usabilidade assumiu seuespaco no mercado e hoje e considerada como um dos fatores mais importantespara o desenvolvimento de bons aplicativos, sejam eles mobile, web ou desktop.Portanto, sob a otica das heurısticas de Nielsen o aplicativo sera submetidoavaliacoes para ser possıvel ter uma avaliacao sobre suas qualidades e defeitos.Ao fim do test foi possıvel constatar que apesar do aplicativo possuir algunspontos fortes relacionados a usabilidade, ainda ha espaco para melhorias.

1. Introducao

Desde sua introducao, plataformas, como Airbnb, Facebook, atraıram milhoes deusuarios, muitos dos quais integraram essas plataformas em suas vidas. Embora suasprincipais caracterısticas tecnologicas sejam bastante consistentes, as culturas que surgemem torno das plataformas sao variadas.

A maioria das plataformas suporta a manutencao de grupos sociais pre-existentes,mas outros ajudam os estranhos a se conectarem com base em interesses compartilhados,visoes polıticas ou atividades. Alguns sites atendem a publicos diversos, enquanto outrosatraem pessoas com base em linguagem comum ou em identidades raciais, sexuais, reli-giosas ou de nacionalidade compartilhadas. Os sites tambem variam na medida em queincorporam novas ferramentas de informacao e comunicacao, como conectividade movel,blogs e compartilhamento de foto/vıdeo.

Esse artigo tem como base o desenvolvimento de uma aplicacao mobile construıdasob o modelo de plataformas, utilizando o framework Reactive Native e o banco de da-dos Firebase. O principal objetivo desse artigo foi a analise das questoes de usabilidade,visando encontrar pontos de falha e possibilidades para a criacao de um sistema mais com-pleto e eficiente. Para a realizacao dessa analise foi utilizado um questionario, baseadonas heurısticas de Nielsen, que foi repassado aos avaliadores escolhidos para a realizacaodo teste.

A aplicacao e um sistema responsavel por unir pessoas e bares. Os bares saocategorizados de acordo com caracterısticas proprias, como por exemplo bares focadosno publico jovem. Os usuarios do sistema utilizam sua conta do Facebook como maneiraunica para o login. Apos seu login o usuario sera encaminhado para seu perfil e entaopodera ver os bares de sua cidade, sua localizacao sera pega atraves do GPS do celular.Assim que o usuario chegar a um bar, ele sera, automaticamente, conectado aquele bare podera curtir, ou nao, o perfil dos outros usuarios presentes no mesmo bar. Caso elecurta uma pessoa que curtiu seu perfil, os dois sao adicionados como amigos, e entaopoderao trocar mensagens entre si. Para o usuario desconectar do bar ele so precisa sair,fisicamente, dele.

2. Trabalhos relacionados

Para Constantinos et al. (2011), o termo usabilidade possui diversas definicoes, porem,varias dessas definicoes propoem que a usabilidade e uma ferramenta utilizada paraalcancar um objetivo particular com base num certo contexto. A qualidade das aplicacoesWeb esta ligada a qualidade de sua usabilidade. Matera et al. (2006) aponta que a usabil-idade vem se tornando cada vez mais forte dentro de industrias e empresas, assumindoassim um lugar de importancia entre os fatores a serem considerados durante o desen-volvimento de uma aplicacao.

Baharuddin et al. (2012) em seu estudo trabalhou na criacao de um conjunto decriterios utilizados para a avaliar a qualidade de aplicacoes moveis. Grande parte dos ar-tigos e livros eram voltados para o aplicacoes Web e Desktop devido a esse fator o estudovisava compilar as principais diretrizes de forma a produzir uma maneira consistente dese realizar a analise da usabilidade dos aplicativos. Ao final da pesquisa foram encontra-dos 10 dimensoes importantes para a analise da usabilidade, elas sao Eficacia, Eficiencia,

Satisfacao, Utilidade, Estetica, Aprender habilidade, Simplicidade, Intuitividade, Com-preensıvel, Atratividade, Acessibilidade, Memorabilidade, Aceitabilidade, Flexibilidade,Consistencia, Adaptabilidade, Operabilidade, Confiabilidade.

Em Matera et al. (2006) e feita uma exploracao sobre os principais pontos dausabilidade, avaliando sob a otica de Nielsen, e apresentando exemplos de interfaces quedemonstram os conceitos. Apos a analise das 10 heurısticas de Nielsen, e passada umavisao detalhada sobre os principais modelos de analise de usabilidade e o impacto quecada um pode ter sob resultado final do estudo. Por fim e feita uma analise baseada emuma aplicacao real.

3. O que sao plataformasExistem diversas definicoes para a palavra plataforma. Portanto, nessa secao sera ado-tado o termo plataforma como modelo de negocios. Shoppings sao enquadrados comoum antigo exemplo de plataformas, pois, sao responsaveis tanto por atrair seus clientes,quanto por ceder o espaco para empresas realizarem seus negocios. Segundo Evans eGawer (2016), todas as plataformas possuem caracterısticas unicas, porem, todas temcomo objetivo causar um efeito bola de neve, no qual os proprios usuarios sao re-sponsaveis pela aquisicao de novos clientes para a plataforma. Com isso, a partir de umcerto ponto, as plataformas comecam a ter menos custos na aquisicao de novos clientes.Plataformas tambem podem ser caracterizadas como negocios que buscam juntar gruposde pessoas com necessidades em comum, provendo a essas pessoas formas de se en-contrarem e se comunicarem. As plataformas tambem podem ser sub categorizadas emdiferentes grupos como transacao, inovacao, integracao e investimentos.

Evans e Gawer (2016) caracterizam plataformas de transacao como negocios quepossuem como foco na criacao de um ambiente, no qual sao feitas transacoes entre pes-soas e empresas. Uma organizacao brasileira que adota esse modelo de negocios e oMercado Livre, ele permite que tanto empresas quanto pessoas tenham a possibilidadede fazerem compras e vendas atraves de sua plataforma. Apesar da maioria dos casos,essas plataformas estarem relacionadas a compra e venda, nem sempre e assim. Platafor-mas de transacao tambem podem lucrar atraves da conexao de pessoas. Como a empresaFacebook, que da a seus usuarios uma forma de se encontrarem, compartilharem seusgostos e opinioes pessoais de maneira gratuita, visando ter um ganho monetario atravesde anuncios.

Evans e Gawer (2016), apontam que plataformas de inovacao sao blocos de tec-nologia que permitem que outras pessoas criem outras coisas sobre elas. Como exemplotemos o console Xbox, o qual e uma plataforma de inovacao pois permite que empresascriem jogos que funcionam sob a sua tecnologia. Alem disso tambem e possıvel destacaro Iphone, que tambem e uma plataforma de inovacao, pois, permite que outras pessoasdesenvolvam aplicacoes que sao utilizadas atraves desse aparelho.

Segundo Evans e Gawer (2016) a plataforma integrada e uma tecnologia, produtoou servico que e uma plataforma de transacao e uma plataforma de inovacao ao mesmotempo. Essa categoria inclui empresas como a Apple, que tem plataformas de corre-spondencia como a App Store e um grande ecossistema de desenvolvedores de terceirosque oferece suporte a criacao de conteudo na plataforma.

Por fim, Evans e Gawer (2016) caracterizam como plataformas de investimentos,

aplicacoes que permitem que usuarios encontrem e facam investimentos atraves de suaplataforma. No Brasil, diversas corretoras utilizam dessa metodologia para atrair clientes,e conduzir negocios de uma maneira mais eficiente. Como exemplo, as empresas Rico eXP Investimentos.

4. Mercado

Nessa sessao sera feita uma breve analise sobre o impacto que as principais plataformaspossuem sobre o mercado e o espaco para a criacao de novas plataformas. SegundoEvans e Gawer (2016), empresas que souberam aproveitar desse modelo de negocios, temcrescido durante a ultima decada e podem ser encontradas em todos os continentes. Hojeas plataformas nao atuam, apenas, nos ramos mais convencionais como: livros, redessociais e musicas, ha tambem plataformas inseridas nas areas de transporte, bancos, entreoutros. Em 2016 o valor combinado das maiores empresas, que possuıam plataformasintegradas em seus negocios equivalia a 4.3 trilhoes de dolares. A figura 1 mostra onumero de plataformas, o numero de empregados e o marketing de das principais regioes.Os continentes com o maior numero de plataformas eram a America do Norte com 64empresas, as quais combinadas chegavam ao valor de 3 trilhoes de dolares, e a Asia com82 empresas que equivaliam a 930 bilhoes de dolares. A America Latina possuı umnumero muito baixo de plataformas criadas, o que, por sua vez, demonstra que existeum espaco para criacao de plataformas que visam lidar com os problemas internos docontinente e seus paıses.

Figura 1. Numero de plataformas por regiao

5. Usabilidade

Segundo Raj e Seshu (2012), tanto os telefones celulares, quanto suas aplicacoes setornaram uma parte essencial do dia-a-dia e por ser algo tao importante, a expectativasobre a qualidade do software oferecido para os usuarios vem aumentando cada vez mais.Dados sobre a companhia Apple demonstram o crescimento do mercado de celulares. Noprimeiro quadrimestre de 2008, aproximadamente 1 ano apos o lancamento do Iphone,

sua receita foi $9,6 bilhoes Apple (2008). Ja no primeiro quadrimestre de 2019 a receitada companhia foi de aproximadamente entre $55 e $59 bilhoes Apple (2019).

Com esse crescimento surge a tambem uma maior necessidade de desenvolvi-mento de aplicacoes para esses dispositivos, e, por consequencia, o mercado se torna cadavez mais competitivo. A usabilidade se apresenta como uma ferramenta na construcao desistemas melhores para seus usuarios. Matera et al. (2006) descreve a usabilidade comoa qualidade do produto a partir do ponto de vista dos usuarios. Ja para Baharuddin et al.(2012), uma das formas de se apresentar a usabilidade e a capacidade de um produto de seratrativo, de simples aprendizado e compreensıvel para seus usuarios. Por fim, Maciel et al.(2004) aponta que grande parte das avaliacoes de usabilidade buscam, primeiramente, vero custo cognitivo relacionado ao aprendizado na utilizacao de um devido produto ou sis-tema.

Matera et al. (2006) Aponta, tambem, que uma das formas de definir usabili-dade mais adotadas e a de Nielsen, a qual prove um modelo simples e completo para acaracterizacao da usabilidade e para analises relacionadas a usabilidade de sistemas. Suadefinicao e:

• Facilidade de aprendizado: simplicidade para o aprendizado de como executartarefas no sistema.

• Eficiencia: o nıvel de produtividade possıvel apos o usuario ter aprendido a utilizaro sistema.

• Memorabilidade: Simplicidade para a memorizacao de execucao das tarefas dosistema.

• Poucos erros: capacidade do sistema de dar suporte aos erros cometidos pelosusuarios e tambem evitar o maximo possıvel de erros.

• Satisfacao do usuario: o quanto os usuarios se sentem bem utilizando o sistema.

6. Avaliacao Heurıstica

Segundo Duh et al. (2006) todos os inumeros metodos de avaliacao de usabilidade podemser categorizados em 4 areas principais : heurıstica, cognitive walktrough, testes de us-abilidade, comparacao com base em guias. Todos os metodos possuem seus pontos fortese fracos, portanto, a escolha do metodo a se utilizar varia de acordo com as caracterısticasdo projeto. Nielsen e Molich (1990) apontam que grande parte das avaliacoes feitas,sao heurısticas. Porem, esse metodo de avaliacao nao e transparente em relacao as seuspassos, e, por isso, acaba sendo visto como inferior por grande parte dos pesquisadores.

Nielsen (1995) ressalta a avaliacao Heurıstica como um metodo criado para en-contrar problemas relacionados a interface de usuarios. Ele e, geralmente, composto porum pequeno time de avaliadores, que irao examinar a interface e buscar por erros combase em guias, criadas sob os princıpios da usabilidade. A avaliacao, quando realizadapor apenas um avaliador, nao apresenta resultados tao positivos, por isso, e aconselhavelque um grupo de pessoas, com conhecimentos diferentes sobre usabilidade, facam asavaliacoes, para assim, garantir uma maior eficiencia ao final da vistoria. Em Nielsen(1995) tambem e recomendado o uso de 5 avaliadores.

A avaliacao heurıstica sera feita com base nas heurısticas de Nielsen, apresentadasem Nielsen (1995)

Heurıstica Explicacao

Visibilidade do status do sis-tema

Os usuarios devem sempre serem informados so-bre o que esta acontecendo no sistema, atraves defeedback apropriados.

Similaridade entre o sistema eo mundo real

O sistema deve se comunicar, com seus usuarios,atraves de uma linguagem compreensıvel aosusuarios. Fazer com que as informacoes aparecamde forma logica e e natural para os usuarios.

Controle do usuario e liber-dade

Durante o uso da aplicacao os usuarios do sistemairao cometer erros, portanto, e necessario que osusuarios consigam lidar com essas falhas.

Convencoes

Usuarios nao devem ter a necessidade de avaliaro significado de diferentes palavras, situacoes ouacoes. A aplicacao precisa seguir convencoesclaras.

Prevencao de Erros O desing deve ser estruturado de forma que errossejam evitados.

Reconhecimento ao inves damemoria

Minimizar o uso da memoria dos usuarios. Ousuario nao deve ter a obrigacao de lembrarinformacoes de uma tela, ou dialogo, passado.Para isso e necessario que as informacoes estejamacessıveis a todos os momentos.

Ajudar usuarios a reconhecer,diagnosticar e se recuperar deerros

Mensagens de erro devem ser transmitidas demaneira direta ao inves de codigos ou mensagensde erro tecnicas.

Ajuda e documentacao A documentacao deve ser simples, direta e comfoco nas acoes dos usuarios

FlexibilidadeA aplicacao deve permitir que usuarios mais ex-perientes consigam realizar suas acoes de umamaneira mais rapida.

Design Dialogos devem ser diretos em relacao a men-sagem que desejam passar para os usuarios.

7. Desenvolvimento mobilePalmieri et al. (2012) aponta que acompanhado do crescimento do numero de usuariosde celulares veio a demanda por aplicacoes e sistemas mais completos. Tanto a Google,quanto a Apple oferecem um ambiente de desenvolvimento rico em bibliotecas e fun-cionalidades para serem acessadas e utilizadas pelos desenvolvedores. Porem, a criacaoe estruturacao do programa e completamente diferente em ambos sistemas. Devido adiferenca entre os sistemas operacionais das empresas, novas alternativas de desenvolvi-mento surgiram e ganham cada vez mais suporte dos programadores. O desenvolvimentocross-platform pode basear-se na utilizacao de estruturas de desenvolvimento Web, comopor exemplo HTML, CSS e Javascript para a criacao de aplicacoes que funcionem emambos sistemas operacionais.

Segundo Raj e Seshu (2012) existem diversas formas de criacao de aplicacoescross-platform e cada uma delas tem um impacto diferente no aplicativo gerado. Algumas

metodologias se baseiam na fase construcao da aplicacao enquanto outras fazem a con-versao durante a execucao, ambos buscando a performance mais nativa possıvel. Devidoas diferencas entre as formas de criacao de um aplicativo hıbrido cabe ao desenvolvedorentender o contexto em qual ele esta inserido e qual tera o melhor impacto na perfor-mance do aplicativo, para assim conseguir produzir aplicacoes que tenham apelo aos seususuarios. Existem quatro formas de desenvolvimento hıbrido, elas sao, Web Approach,Hybrid Approach, Interpreted Approach e Cross Compiled Approach.

7.1. Web approach

Raj e Seshu (2012) descrevem o aplicativo mobile web como um aplicativo projetadopara ser executado no navegador da web de um dispositivo movel. Aplicativos mobileweb sao desenvolvidos usando HTML, CSS e JavaScript. Nesta abordagem, o dispositivomovel nao tera nenhum componente especıfico do aplicativo instalado. Os aplicativos saobaseados no navegador e os dados do aplicativo sao controlados pelo servidor. Como oaplicativo e baseado em navegador, ele e independente de plataforma. Nessa abordagem,algumas operacoes o sao executadas no lado do cliente, enquanto outras sao conduzi-das pelo servidor. O cliente hospeda a interface de usuario do aplicativo e a logica devalidacao de dados do usuario, enquanto o servidor implementa a logica de negocios

7.2. Hybrid approach

Raj e Seshu (2012) apresentam a abordagem hıbrida como modelo entre o desenvolvi-mento web e nativo. O aplicativo hıbrido e desenvolvido usando tecnologias da Webeexecutado dentro do conteiner nativo no dispositivo movel. A abordagem hıbrida usao mecanismo do navegador do dispositivo que renderiza e exibe o conteudo HTML nocontrole de exibicao da Web em tela cheia. Os recursos do dispositivo sao expostos aoaplicativo hıbrido por meio de uma camada de abstracao. A camada de abstracao expoeos recursos do dispositivo como APIs JavaScript (Application Programming Interface). Aabordagem hıbrida pode aproveitar as vantagens do mecanismo do navegador e dos recur-sos do dispositivo e tambem pode ser utilizada para aplicativos suportados pelo servidor eindependentes. Ao contrario dos aplicativos da Web, os aplicativos hıbridos precisam serbaixados e instalados no dispositivo movel.

7.3. Interpreted approach

Raj e Seshu (2012) colocam aplicativos interpretados como aplicacoes nas quais o codigodo aplicativo e implantado no dispositivo movel e e interpretado a partir de entao. Ex-iste um interpretador que executa o codigo em tempo de execucao. Os recursos nativossao disponibilizados por meio de uma camada de abstracao. O interpretador interpreta ocodigo-fonte no tempo de execucao em diferentes plataformas e, portanto, suporta o de-senvolvimento de aplicativos entre plataformas. O aplicativo interpretado interage com acamada de abstracao para acessar as APIs nativas (Application Programming Interface).Os aplicativos interpretados utilizam elementos da interface do usuario nativa especıficosda plataforma para interacao do usuario. A logica da aplicacao e capturada de maneiraindependente da plataforma. Isso pode ser um conjunto de comandos em XML ou outralinguagem de descricao.

7.4. Cross compiled approachPor fim, Raj e Seshu (2012) descrevem a cross compiled applications, como a conversaodo codigo-fonte em binarios nativos. O cross compiler e responsavel por gerar o codigoexecutavel para uma plataforma especıfica. Os desenvolvedores podem escrever o codigo-fonte em uma linguagem de programacao comum e o cross compiler compila o codigo-fonte em codigo nativo especıfico. Toda essa abordagem depende do compilador cruzadode eficiencia e confiabilidade.

8. Ferramentas utilizadas para a criacao da aplicacaoNesta secao sao apresentados os requisitos necessarios para a preparacao do ambiente.Para a realizacao do trabalho foi utilizado um computador Intel core I7, com 8 gigas dememoria. A linguagem escolhida para a realizacao do aplicativo foi o EcmaScript e osistema gerenciador de bancos dedados utilizado foi o Cloud Firestore.

8.1. EcmaScriptECMAScript e uma linguagem de programacao baseada em scripts. Desde a publicacaoda primeira edicao, em 1997, a ECMAScript tornou-se uma das linguagens deprogramacao de uso geral mais utilizadas no mundo. E mais conhecida como a linguagemincorporada nos navegadores da Web, mas tambem foi amplamente adotada para aplica-tivos incorporados e servidores. (Ecma, 2018).

ECMAScript e uma linguagem de programacao orientada a objetos, construıdapara realizar calculos e manipular objetos computacionais dentro de um ambiente dehost. O ECMAScript, conforme definido aqui, nao pretende ser computacionalmenteauto-suficiente; de fato, nao ha provisoes nesta especificacao para entrada de dados exter-nos ou saıda de resultados computados. Em vez disso, espera-se que o ambiente computa-cional de um programa ECMAScript forneca nao apenas os objetos e outras facilidadesdescritas nesta especificacao, mas tambem determinados objetos especıficos do ambiente,cuja descricao e comportamento estao alem do escopo desta especificacao, exceto paraindicar que eles podem fornecer certas propriedades que podem ser acessadas e certasfuncoes que podem ser chamadas de um programa ECMAScript. (Ecma, 2018).

8.2. React NativeO React Native e um framework em JavaScript que possibilita o desenvolvimento deaplicacoes mobile, tanto para Android, como para iOS, utilizando apenas Javascript. Elee baseado no React, a biblioteca JavaScript do Facebook, utilizada para criar interfaces deusuario. Mas, contrario do React, em vez de segmentar o navegador, segmenta platafor-mas moveis.

Os desenvolvedores sao capazes de escrever aplicativos moveis que parecem ver-dadeiramente nativos, pois todo o codigo escrito e convertido para a linguagem nativado sistema operacional. Semelhante ao React, os aplicativos React Native sao escritosusando o JSX. (Eisenman, 2015).

8.3. GitO Git e uma ferramenta de controle de versao. Essa ferramenta foi inventada por Li-nus Torvalds para suportar o desenvolvimento do Kernel Linux, mas desde entao tem semostrado valioso para uma ampla gama de projetos. (Loeliger, 2009).

A principal diferenca entre o Git e qualquer outro Sistema de Controle de Versoes(Subversion entre outros) e a forma como o Git lida com seus dados. A maioria dos outrossistemas armazena informacoes como uma lista de alteracoes baseadas em arquivos. Essessistemas armazenam as mudancas considerando o arquivo que foi alterado. O Git naofunciona dessa forma, ele considera o sistema como um todo, salvando uma snapshot da oestado do sistema quando e feito um commit. Como forma de conseguir mais performanceo Git nao armazena os documentos inalterados, ao inves disso, ele utiliza um link quereferencia esses documentos.(Chacon e Straub, 2014).

8.4. Cloud FirestoreEm 2014, a Google concluiu a aquisicao de uma empresa sediada em Sao Franciscochamada Firebase, Inc. A Firebase, Inc. forneceu uma serie de solucoes para desenvolve-dores projetadas para acelerar a integracao de recursos baseados em nuvem em aplicativosmoveis e da web. Depois de comprar a empresa, a Google combinou servicos fornecidospelo Firebase com varios recursos complementares incluıdos anteriormente como parte doGoogle Cloud Platform. Os recursos combinados das duas plataformas sao conhecidossimplesmente como Firebase Smyth (2017).

9. AplicacaoA aplicacao desenvolvida para realizar este estudo se encaixa na definicao de umaplataforma de transacoes e possui como foco a conexao entre pessoas, porem, tambemserve como uma forma conectar pessoas a bares e boates.

O Aplicativo possuı 8 telas, que serao apresentadas nessa secao. Elas serao apre-sentadas de duas formas distintas, a primeira forma sera responsavel por indicar o fun-cionamento da tela, ja a segunda ira demonstrar, parcialmente, os componentes e estadosresponsaveis para o funcionamento do codigo.

9.1. Perfil do usuarioA primeira tela que e referenciada pela figura 3. Apos a realizacao do login o usuario elesera redirecionado para seu perfil. Essa tela nao possui muitas opcoes. Aqui, o usuariopodera apenas alterar sua descricao. Para realizar essa acao o usuario deve clicar no ıconedo lapis, no canto esquerdo da tela, apos clicar nesse ıcone a descricao se tornara umcampo de texto e ele podera entao alterar suas informacoes, para confirmar o envio eledevera utilizar o mesmo botao. Porem, o ıcone estara diferente para sinalizar o envio damensagem, caso o usuario nao tenha interesse em alterar sua descricao ele pode simples-mente mudar de tela.O nome do usuario, foto e idade foram todas tiradas da Graph APIdo Facebook. O acesso a essas informacoes e requisitado no processo de login.

O perfil e composto pelos componentes UserProfile, UserCarousel, Descrip-tionRow. A hierarquia e composta pelo componente UserProfile sendo o de mais altonıvel, tendo, entao, a responsabilidade de se comunicar com o Redux para ter acesso asinformacoes base do usuario. Os outros dois componentes sao responsaveis apenas pormostrar dados na tela, nao se comunicando com nenhum outro componente alem do com-ponente que os invocou. O UserCarousel mostra o carousel com a imagem do usuario,representado na parte superior da figura 3. Enquanto, o DescriptionRow mostra o conjuntodo botao na lateral esquerda, abaixo da foto do usuario, e as informacoes da descricao dousuario.

O metodo saveNewDescription e utilizado para alterar a descricao do perfil deusuario, ele sera um trigger para iniciar a comunicacao com o Firebase e entao salvara nova informacao no banco de dados. Todas informacoes que sao salvas no banco, au-tomaticamente invocam algum observable que atualizara o estado do objeto na store. Ocodigo, referenciado na figura 2 demonstra um dos observables utilizados para controlaro estado dos usuarios.

Figura 2. Metodo observeUser

Como demonstrado no codigo essa parte ira fazer o dispatch da action updateUser,que nao faz nada alem de enviar o novo objeto do usuario populado para o reducer re-sponsavel pelo controle dessa parte do estado da aplicacao, apos isso o reducer ira atu-alizar o estado do objeto e entao os dados serao mapeados de volta para a tela, fazendocom que a aplicacao funcione em tempo real, permitindo que todos os usuarios possamver a alteracao assim que ela for feita.

Figura 3. Perfil do usuario

9.2. Pessoas conectadasA segunda tela, apresentada na figura 4, esta relacionada ao bar em que o usuario estaconectado, caso ele esteja conectado a algum. Quando o usuario esta conectado a algum

bar sao mostrado, a ele, todos os outros usuarios presentes naquela mesma localidade.Atraves dessa tela o usuario tem a possibilidade de acessar o perfil de outras pessoase entao, caso ele deseje, curtir aquele perfil. O processo de conexao a um bar e feitoautomaticamente pelo aplicativo, ou seja, o usuario, assim que entra nas coordenadasgeograficas, e conectado ao estabelecimento. Alem de acessar o perfil de outros usuarios,tambem e possıvel realizar buscas pelo nome de uma pessoa.

Essa tela e composta pelos componentes Search, SearchResult, PubHeader eSearchBar. A hierarquia e composta da mesma forma que no componente do perfildo usuario, sendo 1 componente de alto nıvel, neste caso o Search, responsavel pelacomunicacao com as actions e reducers e os outros, componentes de baixo nıvel, apenasrecebendo informacoes do componente de nıvel superior. A busca por usuarios e respon-sabilidade do componente SearchBar, ele fica localizado na parte superior da figura 4, e ecomposto por um botao e um campo de texto. O componente SearchResult e o retangulono qual e mostrada a foto, nome e descricao dos outros usuarios logados nesse bar, essecomponente esta inserido dentro de uma FlatList, componente do framework React Na-tive, significando que ele pode ser repetido na tela.

Figura 4. Bar em que o usuario esta conectado

A renderizacao de usuarios, presentes no mesmo bar, e feita com base no objetoconnectedUsers do banco de dados. Esse objeto e composto por um array de objetos quecontem as informacoes userName, picture e uid. O metodo responsavel por fazer essaalteracao, connectUser, recebe as informacoes do usuario que entrou nas coordenadas dobar e entao altera a informacao no banco de dados. Esse metodo e referenciado na figura5

Apos a informacao ser alterada no banco de dados o observable observePubs iraser informado dessas alteracao e ira chamar o metodo updatedPub() responsavel por se

Figura 5. Metodo connectUser

comunicar com o reducer e fazer com que a aplicacao tenha seus dados espelhados como Firestore. Por fim o componente Search ire receber as alteracoes do estado e mostraras informacoes em tempo real, estejam elas relacionadas a conexao ou desconexao de umusuario no bar.

9.3. Perfil de outro usuario

A setima tela, referenciada pela figura 6, e o perfil de algum outro usuario conectado nomesmo bar, existem apenas 2 interacoes possıveis nessa tela, demonstrar interesse pelaoutra pessoa ou voltar a tela do bar. A cor do botao de interesse, localizado a direitano centro da tela, muda de acordo com a relacao entre os usuarios. Quando nenhumusuario demonstrou interesse pelo outro a coloracao e roxa, como demonstrado na figura6. Caso o usuario tenha enviado a solicitacao para outra pessoa, a cor do botao seraalterada para amarelo. Por fim, caso eles sejam amigos, ou tenha recebido a solicitacao deoutro usuario, a cor do botao sera vermelha. O metodo acionado quando o botao de curtire pressionado e o saveRequest. Ele ira verificar a relacao atual entre os dois usuarios,apos a verificacao, ele ira despachar as acoes necessarias para a atualizacao do status deamizade. Essa atualizacao do status de amizade precisa ser feita nos dois usuarios, poisdentro do banco a informacao de amizade e replicada para cada usuario.

Figura 6. Perfil de um amigo

9.4. Bares

A terceira tela, mostrada na figura 7, e a responsavel por mostrar todos os bares existentesnaquela cidade, cada imagem dentro do carousel e referente a um bar. Nessa tela o usuariotera a possibilidade de checar os bares que tem em sua cidade. Os bares podem serdivididos em diversas categorias diferentes, como por localidade, interesses, entre outros.Porem nessa versao os bares sao divididos em apenas 2 categorias principais, bares como maior numero de usuarios conectados e todos os bares da cidade. O usuario tem apossibilidade de clicar na imagem de algum bar, assim que for realizada essa acao elesera redirecionado a pagina do bar que ele selecionou, nessa pagina serao mostradas asinformacoes do bar escolhido e as pessoas que estao online. Apesar da busca aparecer noparte superior da figura 7 ela nao foi implementada nessa versao do sistema.

Figura 7. Bares na regiao

Essa pagina e composta pelos componentes Pubs, SearchBar e PubsCarousel. Damesma forma que nas outras telas, a hierarquia e representada por um componente maior,Pubs, e outros 2 componentes menores que apenas recebem informacoes. No estagio atualda aplicacao todos os bares cadastrados sao pegos do banco de dados. Assim que o usuariofaz o login na aplicacao o observable dos bares e inicializado, ele entao se comunica como Firebase verificando se algum novo bar foi inserido ou nao. A decisao de qual bar deveser mostrado como bar com mais pessoas e feita da atraves das funcoes referenciadasna figura 8. O metodo sort, invocado no array pubs e implementado nativamente noEcmacript, e responsavel por ordenar um vetor, com base em um metodo, e entao retornanovo vetor ordenado. Ja a funcao compare tem como objetivo comparar o numero depessoas conectadas em cada bar e entao retornar o valor da comparacao.

Figura 8. Metodos responsaveis ordenar os bares

9.5. Bar

Na quarta tela, referenciada pela figura 9, e mostrado o perfil do bar, na qual e possıvelencontrar o nome do bar, sua localizacao e tambem ver os usuarios conectados. O usuariopode apenas interagir com o botao no canto superior esquerdo da figura 9, esse botao seraresponsavel por levar o usuario ate a tela anterior, a qual e responsavel por listar todos osbares da cidade do usuario.

Esta tela e composta pelos componentes Pub e PubsCarousel. As informacoesespecıficas sobre o bar, diferente da maioria dos outros componentes de alto nıvel, saorecebidas atraves do componente de navegacao, a qual e feita atraves de uma biblioteca,desenvolvida por um dos times do Facebook. A informacao e requisitada no metodo con-strutor desse componente, ou seja, antes do usuario poder ver essa tela essa informacaoe recebida. So apos a confirmacao do recebimento desses dados o componente e render-izado.

Figura 9. Perfil do bar

9.6. Lista de amigos

A quinta tela, representada na figura 10, mostra todos os usuarios que demonstraraminteresse um pelo outro. A partir dessa acao eles se tornam amigos. Para demonstrarinteresse em uma pessoa, curtir seu perfil, o usuario necessita, primeiro, estar conectado aalgum bar, e entao ele podera ver o perfil de outras pessoas e acessa-los para entao curtiro perfil. Nessa tela o usuario pode efetuar o clique em qualquer um de seus amigos, essaacao o levara para a tela de conversas, referenciada na figura 12.

Essa tela e composta por dois componentes Messages e MessagesResults. O com-ponente principal e o Messages, ele e responsavel por receber as informacoes do estado daaplicacao e chamar as actions necessarias caso alguma acao seja executada. Os amigos,do usuario principal, sao listados atraves do objeto storedUsers, esse objeto contem todos

os usuarios, conectados na aplicacao. O relacionamento entre os usuarios e feito atravesdo metodo createUserRelation(). No qual, e avaliado qual e a relacao entre o usuarioprincipal e os outros usuarios logados. Sao possıveis 4 relacoes entre usuarios, elas saosender, receiver, friends e nenhuma. Um usuario tem a relacao de sender quando ele foio primeiro a curtir o perfil de outra pessoa.A relacao de receiver acontece quando outrousuario curtiu seu perfil. A relacao de friends existe quando ambos curtiram o perfil umdo outro. E a relacao vazia, quando nao existe nenhum valor, referente ao outro usuario,dentro do array de objetos friends.

Figura 10. Lista de amigos

Figura 11. Metodo createUserRelation

9.7. Chat

A sexta tela, mostrada na figura 12, e a tela de conversa. A partir dessa tela, os usuariospodem trocar mensagens entre si. Para chegar nessa tela, primeiro, o usuario deve teralgum amigo adicionado, apos esse passo ele conseguira o acesso atraves da tela repre-sentada na figura 10. Nessa tela sera possıvel enviar uma mensagem, utilizando o campode texto e o botao de envio na parte de baixo da tela, e tambem voltar para tela anterior,utilizando o botao de voltar no canto superior esquerdo.

Essa tela sera composta pelos componentes Chat e ChatMessage. O componenteChat e o componente no topo da hierarquia. Ele e responsavel por receber e enviar todasas mensagens digitadas pelos usuarios. O processo de envio de uma mensagem comecaatraves do metodo addMessage. Quando o botao, no canto inferior direito da figura 12,e pressionado ele fara uma chamda para o addMessage, esse metodo e o responsavel pormostrar a nova mensagem na tela e tambem chamar a action responsavel por mostrar anova mensagem.

Figura 12. Chat

Figura 13. Metodo addMessage

10. Metodologia do estudoA avaliacao da usabilidade da aplicacao sera dividida em tres etapas. Em sua primeiraetapa foi feito um estudo de artigos relacionados a avaliacao da usabilidade, com basenesse estudo foi definida a metodologia de avaliacao. A segunda etapa foi composta pelaselecao dos candidatos que iriam avaliar a aplicacao desenvolvida e pela avaliacao dastelas da aplicacao. A Equipe de avaliadores e composta por 5 membros, como recomen-dado por Nielsen e Molich (1990). Dentre os membros quatro sao bachareis em Sistemasde Informacao pela Universidade Federal de Itajuba e o outro candidato se encontra cur-sando o mesmo curso. Para a realizacao da avaliacao cada aluno configurou o ambientenecessario para emular a aplicacao em seus computadores e entao fizeram a analise combase na tabela abaixo. A terceira fase foi composta pela analise dos dados. Nessa faseforam divididos os resultados dos questionario e entao a analise foi feita em busca deidentificar os problemas presentes na aplicacao.

Heurıstica Explicacao Avaliacao

Visibilidade do status dosistema

Os usuarios devem sempre serem informa-dos sobre o que esta acontecendo no sistema,atraves de feedback apropriados.

◦◦◦◦◦

Similaridade entre o sis-tema e o mundo real

O sistema deve se comunicar, com seususuarios, atraves de uma linguagem com-preensıvel aos usuarios. Fazer com que asinformacoes aparecam de forma logica e enatural para os usuarios.

◦◦◦◦◦

Controle do usuario eliberdade

Durante o uso da aplicacao os usuariosdo sistema irao cometer erros, portanto, enecessario que os usuarios consigam lidarcom essas falhas.

◦◦◦◦◦

Convencoes

Usuarios nao devem ter a necessidade deavaliar o significado de diferentes palavras,situacoes ou acoes. A aplicacao precisaseguir convecoes claras.

◦◦◦◦◦

Prevencao de Erros O desing deve ser estruturado de forma queerros sejam evitados. ◦◦◦◦◦

Reconhecimento aoinves da memoria

Minimizar o uso da memoria dos usuarios.O usuario nao deve ter a obrigacao de lem-brar informacoes de uma tela, ou dialogo,passado. Para isso e necessario que asinformacoes estejam acessıveis a todos osmomentos.

◦◦◦◦◦

Ajudar usuarios a recon-hecer, diagnosticar e serecuperar de erros

Mensagens de erro devem ser transmitidas demaneira direta ao inves de codigos ou men-sagens de erro tecnicas.

◦◦◦◦◦Ajuda e documentacao A documentacao deve ser simples, direta e

com foco nas acoes dos usuarios ◦◦◦◦◦Flexibilidade

A aplicacao deve permitir que usuarios maisexperientes consigam realizar suas acoes deuma maneira mais rapida

◦◦◦◦◦

DesignDialogos devem ser diretos em relacaoa mensagem que desejam passar para osusuarios.

◦◦◦◦◦

11. Resultados

Nesta sessao sera feita uma analise sobre os resultados da avaliacao Heurıstica. O objetivoprincipal e avaliar os dados e compreender como eles podem levar a construcao de umaversao melhorada da aplicacao. Os resultados foram representados na figura 14.

Figura 14. Resultado das pesquisas

11.1. Visibilidade e status do sistema

O sistema obteve 2 como avaliacao media. O aplicativo nao apresenta muitas mensagensde erro o que fez com que os testadores se sentissem perdidos em relacao a sua utilizacao.Nao era possıvel identificar se o erro havia acontecido dentro aplicacao, ou se existia al-gum problema no celular do testador, como por exemplo a falta de conexao com a internet.Uma possıvel solucao para esse problema seria reavaliar a aplicacao e tentar compreen-der em que ponto os principais erros existem, apos isso deveriam ser implementados maisblocos de try/catch para poderem ser tomadas as devidas acoes caso algo aconteca.

11.2. Similaridade entre o sistema e o mundo real

Nessa area a aplicacao obteve um resultado aceitavel, tendo uma media de 3,8. O sistemafoi bem direto em sua comunicacao com os usuarios, tendo falhado apenas em algunsaspectos. Uma das possıveis maneiras de melhorar a aplicacao, nesse ambito, seria umamelhor descricao no sistema de curtidas da aplicacao.

11.3. Controle do usuario e liberdade

O sistema nao prove muita liberdade aos usuarios, portanto, obteve a nota 1,8 como media.Nessa versao da aplicacao nao e possıvel remover uma curtida feita sem a intencao, ou aremocao de mensagens ja enviada. Para aumentar o score dessa heurıstica e de extremaimportancia implementar essas possibilidades, para que, assim, usuarios consigam tertotal controle sobre suas acoes dentro da aplicacao.

11.4. Convencoes

Apesar do sistema ser direto em relacao a maior parte das tarefas ele peca em alguns que-sitos e, por isso, sua nota media foi de 2,6. O sistema de curtidas, apesar de ter como umıcone um coracao, ainda da espaco a interpretacoes incorretas sobre sua funcionalidadedevido a utilizacao de cores para entender quando o usuario teve seu perfil ele curtiu o per-fil de outra pessoa. Alem desse fator a escolha do ıcone para enviar uma nova descricao,para o perfil do usuarios, nao se apresentou muito satisfatorio fazendo com que algunsdos testadores se sentissem confusos em relacao a esse dado. Para conseguir melhorar osistema seria necessario informar, no login da aplicacao, como realizar essas acoes.

11.5. Prevencao de Erros

A prevencao de erros do sistema obteve uma nota agradavel, sua media foi de 3,6. Odesign do aplicativo foi criado de maneira a evitar erros dos usuarios, mantendo botoesimportantes distantes dos outros e, tambem, com cores fortes. Para melhorar essa notasera necessaria uma reavaliacao do design da aplicacao.

11.6. Reconhecimento ao inves da memoria

Essa foi a maior nota dentro das heurısticas utilizadas para a avaliacao da aplicacao, suamedia foi de 5 pontos. A escolha de ıcones e o design da aplicacao foram de encontroao de outros aplicativos utilizados no mercado, fazendo com que esse aplicativo obtivesseuma boa nota.

11.7. Ajudar usuarios a reconhecer, diagnosticar e se recuperar de erros

A nota da aplicacao nessa heurıstica foi 0,4. O sistema nao permitia ao usuario lidarcom grande parte dos erros cometidos, como por exemplo curtidas efetuadas de formaincorreta, mensagens erradas e cancelar a alteracao da descricao.

11.8. Ajuda e documentacao

A aplicacao teve 0 como nota. Nao foi feita uma documentacao para este aplicativo,portanto e normal de se esperar que sua nota fosse 0 nessa heurıstica. Para melhoraressa nota seria necessaria a criacao de FAQ explicando para os usuarios quais sao oserros possıveis e como lidar com eles, alem disso seria necessario tambem explicar ofuncionando da aplicacao durante o login do usuario, isso garantiria que os usuarios quenao compreendem algum aspecto da aplicacao conseguiriam ter algum lugar para buscaro conhecimento.

11.9. Flexibilidade

Por ser uma aplicacao pequena o seu domınio se torna mais facil, devido a esse fatora nota, media, do sistema foi de 2,6 pontos. A aplicacao permite que usuarios maisexperientes compreendam melhor suas funcionalidades e consigam, assim, realizar suasoperacoes de maneira mais agil. Entretanto, nao foram implementados atalhos para asacoes da aplicacao, portanto, essa seria uma forma de melhorar sua utilizacao.

11.10. Design

Todos os dialogos sao diretos, por isso a media do sistema foi de 2,8 pontos. Aaplicacao apresenta um design minimalista, que busca diminuir a confusao dos usuariosda aplicacao. Porem, existem areas que poderiam ser melhoradas dentro da aplicacao,como por exemplo a mudanca do botao utilizado para a alteracao da descricao do usuario.

12. ConclusaoEste projeto surgiu da necessidade de conectar pessoas que frequentem os mesmos bares.O principal objetivo desse artigo foi a construcao de um aplicativo, e entao, com base nosprincıpios de Nielsen, realizar uma avaliacao heurıstica do aplicativo. Como visto nassessoes anteriores existem diversas melhorias a serem implementadas nessa aplicacao,porem, o aplicativo apresentou um resultado satisfatorio.

A tecnica de avaliacao heurıstica foi escolhida por se tratar de um metodo cen-trado no usuario capaz de prever as falhas do aplicativo antes dele ser comercializado. Aavaliacao do produto final possibilita entregar um produto com garantia maior de qual-idade. Como trabalho futuro propoem-se alterar o aplicativo, de forma a resolver suasprincipais falhas, e entao submete-lo ao mesmo teste. Apos essa submissao, se o aplica-tivo apresentar resultados promissores, e proposta a sua comercializacao.

ReferencesApple. Apple reports record first quarter results. best quarterly revenue

& earnings in apple history mac, ipod & iphone sales break previousrecords. Apple Inc., 2008. https://www.apple.com/newsroom/2008/01/22Apple-Reports-First-Quarter-Results/.

Apple. Apple reports record fourth quarter results. services, mac and wearables setnew all-time revenue records. Apple Inc., 2019. https://www.apple.com/newsroom/2019/01/apple-reports-first-quarter-results/.

R. Baharuddin, D. Singh, e R. Razali. Usability dimensions for mobile applicationsareview. 2012.

S. Chacon e B. Straub. Pro Git. Apress, 2014.K. Constantinos, Coursaris, e D. J. Kim. A meta-analytical review of empirical mobile

usability studies. Journal of usability studies, 2011.H. B.-L. Duh, G. C. B. Tan, e V. H. hua Chen. Usability evaluation for mobile device: A

comparison of laboratory and field tests. 2006.Ecma. Ecmascript R© 2018 language specification. 2018.B. Eisenman. Learning React Native. O’Reilly Media, Inc., 2015.P. C. Evans e A. Gawer. The rise of the platform enterprise: A global survey. 2016.J. Loeliger. Version Control with Git. O’Reilly Media, Inc., 2009.C. Maciel, J. L. T. Nogueira, L. N. Ciuffo, e A. C. B. Garcia. Avaliacao heurıstica de

sıtios na web. 2004.M. Matera, R. F., e C. G. T. Web usability: Principles and evaluation methods. pages

143–180, 2006.J. Nielsen. How to conduct a heuristic evaluation. 1995.J. Nielsen e R. Molich. Heuristic evaluation of user interfaces. 1990.M. Palmieri, I. Singh, e A. Cicchetti. Comparison of cross-platform mobile development

tools. 2012.R. Raj e Seshu. A study on approaches to build cross-platform mobile applications and

criteria to select appropriate approach. 2012.N. Smyth. Firebase essentials. Payload Media, Inc., 2017.