interface gráfica para busca
de prestadores de serviços
domésticos
2
Universidade Federal de Uberlândia
FAUeD - Faculdade de Arquitetura e Urbanismo e Design
Curso de Design
Trabalho de Conclusão de Curso de graduação
em Design apresentado à Faculdade de
interface gráfica para busca Arquitetura e Urbanismo e Design, da
Universidade Federal de Uberlândia.
Aluna: Thais Lopes Francisco de Souza
de prestadores de serviços Orientador: profª. Dra. Sabrina Maia
domésticos
Uberlândia / MG
2017
Conclusão 3
interface gráfica para busca
de prestadores de serviços
domésticos
Trabalho de Conclusão de Curso de graduação
em Design apresentado à Faculdade de
Arquitetura e Urbanismo e Design, da
Universidade Federal de Uberlândia.
Aluna: Thais Lopes Francisco de Souza
Orientador: profª. Dra. Sabrina Maia
Banca de Avaliação:
Rafael Siqueira Profª. Drª. Viviane dos Guimarães Alvim Nunes Profª.Drª. Cristiane Alcântara
Uberlândia / MG
2017
4
Resumo
No decorrer dos anos a tecnologia mudou a vida dos
seres humanos e hoje ocupa um papel essencial no cotidiano de
milhares de pessoas. Aos poucos as pessoas foram substituindo
as listas telefônicas, agendas e cds por aplicativos no celular, fato
esse que transformou o modo de viver e de como as pessoas
se relacionam com a sociedade. Atualmente observamos que
existe uma interação virtual entre os indivíduos e os serviços,
as empresas viram na tecnologia mais uma aliada para fornecer
seus serviços e expandir seus negócios. Aliado ao crescente
uso da tecnologia, o número de pessoas que moram sozinhas
também aumentou, e desse modo uma crescente procura por
serviços domésticos. Este Trabalho de Conclusão de Curso tem
como objetivo principal o desenvolvimento de um aplicativo
para auxiliar a interação/contratação dos usuários/clientes com
prestadores de serviços domésticos. Como objetivos especíicos
podemos citar: Estudar o conceito de Ux e Ui, assim como
o design de interação; Compreender o serviço oferecido, o
público alvo e suas necessidades, arquitetando a informação do
aplicativo; O desenvolvimento da interface gráica, culminando
em um protótipo navegável de alta idelidade.
Palavras-chave: User Experience, design de Interface, Ui, Ux,
serviços domésticos, arquitetura da informação, aplicativo,
interação
Conclusão 5
Lista de figuras Figura 16: Processo de Pesquisa...............................................................26
Figura 1: Gráico por Jess James Garret...................................................12
Figura 17: User Stories.................................................................................27
Figura 2: Teorema do Iceberg....................................................................12
Figura 18: Entrevista com Stakholders..................................................28
Figura 3: Teorema do Iceberg com cronograma do processo.....13
Figura 19: Personas........................................................................................34
Figura 4: Site Map do aplicativo GetNinjas.........................................16
Figura 20: Personas 1....................................................................................35
Figura 5: Site Map do aplicativo GetNinjas.........................................16
Figura 21: Personas 2....................................................................................36
Figura 6: Site Map do aplicativo Helpling.................................................18
Figura 22: Personas 3....................................................................................37
Figura 7: Site Map do aplicativo Diarissíma...........................................19
Figura 23: Personas 4....................................................................................38
Figura 8: Mind Map .......................................................................................23
Figura 24: Personas 5....................................................................................39
Figura 9: Orientações....................................................................................23
Figura 25: Personas Conclusão 1............................................................40
Figura 10: Orientações.................................................................................23
Figura 26: Personas Conclusão 2............................................................41
Figura 11: Mind Map Rascunho................................................................23
Figura 27: Personas Conclusão 3............................................................42
Figura 12: Fluxograma do Mind Map.....................................................24
Figura 28: Personas Conclusão 4............................................................43
Figura 13: Motivações dos Usuários ....................................................25
Figura 29: Personas Conclusão 5............................................................44
Figura 14: User Stories..................................................................................26
Figura 30: Swot Analysis...............................................................................45
Figura 15: Processo de Pesquisa..............................................................26
6
Figura 31: Processo de Swot................................46 Figura 47: Card Sorting - Pessoa 2...................58 Figura 62: Ìcones, botões e boxes do projeto........76
Figura 32: Processo de Swot ...............................46 Figura 48: Card Sorting - Pessoa 3...................59 Figura 63: Grid/Composição........................................77
Figura 33: Processo de Swot................................46 Figura 49: Site Map...............................................62 Figura 64: Grid/Composição 2....................................77
Figura 34: Processo de Swot................................46 Figura 50: Site Map...............................................63 Figura 65: Grid/Composição 3....................................78
Figura 35: Swot Analysis.........................................47 Figura 51: Wiframe.................................................65 Figura 66: Grid/Composição 4....................................78
Figura 36: Fluxograma de Estratégias..............48 Figura 52: Wiframe Visão Geral.........................66 Figura 67: Notiicação....................................................79
Figura 37: Fluxograma de Estratégias.................49 Figura 53: Wiframe Tela de Casdatro e Figura 68: Style Guide.....................................................80
Peril.............................................................................67
Figura 38: Card Sorting.............................................52 Figura 69: Style Guide......................................................82
Figura 54: Prototipagem ...................................67
Figura 39: Processo de Card Sorting....................53 Figura 70: Avaliação Heurística.....................................84
Figura 55: Prototipagem do projeto................68
Figura 40: Processo de Card Sorting....................53 Figura 71: Usability Testing...........................................86
Figura 56: Moodboards........................................70
Figura 41: Processo de Card Sorting....................54 Figura 72: Teste de Usabilidade 1..............................87
Figura 57: Moodboards do projeto..................71
Figura 42: Card Sorting Inicial................................55 Figura 73: Teste de Usabilidade 2..............................87
Figura 58: Ui design................................................72
Figura 43: Processo de Card Sorting - 1...........56 Figura 74: Teste de Usabilidade 3..............................88
Figura 59: Skechts do Logo................................73
Figura 44: Processo de Card Sorting - 2...........56 Figura 75: Teste de Usabilidade 4..............................88
Figura 60: Logo inal................................................73
Figura 45: Processo de Card Sorting - 3.........56 Figura 76: Teste de Usabilidade 5..............................88
Figura 61: Teste paleta de cores.........................75
Figura 46: Card Sorting - Pessoa 1........................57 Tabela 1: Quadro Síntese................................................21
definição - projeto de pesquisa
Etapa de deinição do projeto de pesquisa e apresentação de análise dos
cases / similares.
- Introdução
- Justiicativa
- Objetivos
- Fundamentação Teórica - Metodologia
Análise de Cases - Similares
- Escopo dos apps
- Especiicações Técnicas
- Site Map
- Usabilidade
conclusão- 89
se torne cada vez melhor para seus usuários.
conclusão do projeto Em relação ao projeto inal, os testes feitos com os
usuários foram postivos e pode se dizer que o aplicativo con-
seguiu atingir o seu principal objetivo: facilidade na interação e
Desde o início do estudo do projeto e nos primeiros busca de prestadores de serviços domésticos. A interface icou
métodos aplicados a complexidade sempre esteve presente. Es- simples e sem grandes complexidades para os usuários. Impor-
tudar e compreender mais sobre os conceitos e aplicações de Ux tante lembrar que se tratando de aplicativos eles sempre po-
e Ui foram um grande desaio, cada método aplicado foi estuda- dem melhorar e devem ser atualizados mediante o feedback dos
do e analisado antes para que se conseguisse o melhor resultado usuários.
e consequentemente o projeto pudesse avançar. Concluo que estudar e desenvolver um projeto de-
Porém a cada etapa e de acordo com o resultado dos sign gráico de interface foi um grande desaio principalmente
métodos foi necessário realizar mais de uma vez os testes, o que por ser um assunto complexo e nunca visto antes durante o
tornou o processo de criação e desenvolvimento longo e demo- decorrer da faculdade. Porém ele foi de grande importância para
rado. Neste projeto foram selecionados alguns dos vários méto- o meu fechamento deste ciclo, principalmente por me fazer sair
dos que existem dentro de Ux e Ui, tentando abordar as várias da zona de conforto e aprender algo diferente e que com certeza
áreas e seguindo o Teorema do Iceberg. será levado adiante na minha carreira proissonal.
O Teorema do Iceberg foi fundamental para se traçar
uma linha de raciocínio mediante um assunto tão complexo e
com várias vertentes de estudo. A cada etapa avançada o projeto
foi tomando forma, provando que os métdos aplicados foram es-
senciais para que se chegasse no prototipo inal e comprovando
que o Teorema do Iceberg está correto. O projeto inal do apli-
cativo foi construído devido primeiramente uma base sólida de
estudos e estratégias de Ux e como consequência o design inal
se desenvolveu.
Sabemos que quanto mais testes e métodos são apli-
cados melhor o projeto pode icar, pode-se reinar cada vez mais
o aplicativo. Erros e complicações em relação a usabilidade po-
dem aparecer, e devem ser registradas pelos usuários como uma
forma de feedback do projeto. Para ir eliminando esses possíveis
erros, atualizações do projeto irão surgindo para que o mesmo
90
referências Uilab, Os princípios do design em User Inter-
face. Disponível em: < [Link]
princ%C3%ADpios-do-design-em-user-interface-80f300c-
b81e0> Acesso em: 26 de abril de 2017.
TEIXEIRA, Fabricio. Introdução e boas práticas em
Ux zDesign. São Paulo: Casa do Codigo, 2015. 270 p. GetNinjas, Quem Somos. Disponível em: < https://
[Link]/quem-somos> Acesso em: 26 de abril de
GARRET, Jesse James. The Elements of User Experi- 2017.
ence. Berkley: New Riders, 2011.
Por Onde Começar na área de Ux. Disponível
O iceberg de Ux. Disponível em:< [Link] em:<[Link]
[Link]/o-iceberg-de-ux-d8002393924a> Acesso em: 15 de %C3%A1rea-de-ux-49237cc7de90. Acesso em: 12 de Outubro
agosto de 2017. de 2017.
Diarissima, Quem Somos. Disponível em: <https://
[Link]/quem-somos/> Acesso em: 25 de maio Using Mind Map for Ux. Disponível em:<[Link]
de 2017, 08:28 [Link]/2013/02/10/using-mind-maps-for-ux-design-
Marketing Moderno, A inluência das cores na pub- part-sketch-mapping/> Acesso em: 25 de Setembro de 2017.
licidade e propaganda. Disponível em: <[Link]
[Link]/a-inluencia-das-cores-na-publicidade-e-pro- Entrevistas. Disponível em:<https://
paganda/> Acesso em: 25 de abril de 2017. [Link]/tag/entrevista/> Acesso em:
15 de outubro de 2017.-
[Link], Helpling permite que usuário contrate
diarista pela internet. Disponível em: <[Link]
br/tecnologia/helpling-permite-que-usuario-contrate-diaris- [Link]ível em: < [Link]
ta-pela-internet/> Acesso em: 22 de maio de 2017. br/gamiicacao/> Acesso em: 28 de outubro de 2017.
Raffcom, O que é Ui?. Disponível em: <[Link] WHY DOES YOUR MOBILE APP IDEA NEED A
[Link]/blog/o-que-e-ui> Acesso em: 25 de abril de SWOT ANALYSIS? Disponível em: < [Link]
2017. com/blog/marketing/swot-for-mobile-app/> Acesso em: 01 de
Conclusão 91
outubro de 2017. jun. 2018.
Avaliação Heurística: O que é e como conduzir. MATIOLA, Willian. O que é UI Design e UX Design?
(Disponível em: <[Link] Disponível em: <[Link]
heuristica -o-que-e-e-como-conduzir/ > Acesso em: 18 de Junho sign-e-ux-design>. Acesso em: 16 jun. 2018.
de 2018).
NUNES, Mark Claus. UI Style Guide — Deinindo a
Teste de Usabilidade - Christian Rohrer, 2008 Abordagem Visual. Disponível em: <[Link]
(Disponível em :< [Link] lab-school/ui-style-guide-deinindo-a-abordagem-visual-fb8c-
research-methods/>) 682b2c7e>. Acesso em: 15 jun. 2018.
SHEDD, Catriona. Using Mind Maps for UX Design: TREINAWEB, Redação. Avaliação Heurística: O que
Part 1 – Sketch Mapping. Disponível em: <[Link] é e como conduzir. Disponível em: <[Link]
com/2013/02/10/using-mind-maps-for-ux-design-part-sketch- br/blog/avaliacao-heuristica-o-que-e-e-como-conduzir/>. Aces-
mapping/>. Acesso em: 12 abr. 2017. so em: 18 jun. 2018.
ANNA. WHY DOES YOUR MOBILE APP IDEA (FIGUEIRÊDO, Eduardo. A INFLUÊNCIA DAS
NEED A SWOT ANALYSIS? Disponível em: <[Link] CORES NA PUBLICIDADE E PROPAGANDA. Disponível
[Link]/blog/marketing/swot-for-mobile-app/>. Acesso em: em: <[Link]
01 out. 2017. cia-das-cores-na-publicidade-e-propaganda/>. Acesso em: 25
abr. 2017),
SANTANA, Flavio. Card Sorting: a arquitetura de
informação construída pelos usuários. Disponível em: <https:// AGNI, Edu. Por onde começar na área de UX? Dis-
[Link]/card-sorting-a-arquitetura-de-informação-con- ponível em: <[Link]
struída-pelos-usuários-54b9f892e38e>. Acesso em: 4 out. área-de-ux-49237cc7de90>. Acesso em: 12 out. 2017)
2017.
NAHRA, Alessandra. Os protótipos navegáveis e o
charme da documentação interativa. Disponível em: <http://
[Link]/2016/02/23/os-prototipos-navega-
veis-e-o-charme-da-documentacao-interativa/>. Acesso em: 14