COSMAKE.NET: DESIGN DE UM SITE DE REDE SOCIAL TEMÁTICA PARA COSMAKERS by Kao Leen

UNIVERSIDADE FEDERAL DE PELOTAS Centro de Artes Curso de Design Digital

COSMAKE.NET: DESIGN DE UM SITE DE REDE SOCIAL TEMÁTICA PARA COSMAKERS

Caroline Cousen Mor

Pelotas, 2018

Caroline Cousen Mor

COSMAKING: DESIGN DE UM SITE DE REDE SOCIAL TEMÁTICA PARA COSMAKERS

Defesa de Trabalho de Conclusão de Curso apresentado ao Centro de Artes da Universidade Federal de Pelotas, como requisito parcial à obtenção do título de Bacharel em Design Digital.

Orientadora: Prof.ª Dr.ª Helena de Araújo Neves Co-orientador: Prof. M. Roger Langone Leal Pelotas, 2018

Banca examinadora:

________________________________________ Prof.ª Dr.ª Helena de Araújo Neves (Orientadora) Doutora em Educação pela Universidade Federal de Pelotas ________________________________________ Prof. M. Roger Langone Leal (Co-orientador) Mestre no Programa Memória e Patrimônio da Universidade Federal de Pelotas __________________________ Prof.ª Dr.ª Gabriela da Silva Zago Doutora em Comunicação e Informação pela Universidade Federal do Rio Grande do Sul __________________________ Prof.ª Dr.ª Cilene Estol Cardoso Doutora em Design pela Universidade Federal do Rio Grande do Sul

Agradecimentos Esta pesquisa se fez presente em quase todo meu percurso acadêmico e até acabou se prolongando mais do que deveria devido a momentos bons e ruins. Por isso, preciso agradecer a todos os professores e colegas com os quais compartilhei este caminho e que contribuíram para meu crescimento pessoal e profissional, em especial à professora Gabriela Zago, por ter me ajudado a dar o pontapé inicial nesta pesquisa, à minha orientadora Helena Neves, por ter permanecido ao meu lado tanto nos momentos em que tudo funcionou como nos mais difíceis. Agradeço ao professor Roger Langone, por ter aceitado entrar nesse trem para nos ajudar quando parecia já descarrilhado. Agradeço também aos meus pais, José Carlos Plaza Mor e Zeli Cousen Mor, que apesar de todas as nossas desavenças sempre fizeram o possível para que eu pudesse estudar – e em grande parte do tempo sem precisar trabalhar. Sou grata ao Pablo Tiago Gonçalves – médico que salvou minha vida quando estive internada com sérios problemas de saúde. Agradeço à minha madrinha Dárcy Mor Pinto, por todo o apoio e à minha prima Marilene Gouvêa, por ter tomado conta de mim no hospital quando minha mãe precisava ir para casa dormir e também por ter sido o ombro que eu precisava naquele momento. Sou grata ainda à Camila Gamino, por ter alegrado meus dias no ensino fundamental e

por ter me apresentado o cosplay. À minha amiga Natália Martins, simplesmente por ser minha amiga – mesmo quando as coisas não foram fáceis ou quando eu cometi o erro de afastá-la. Aos meus colegas Bruno Souza e Gabriele Schoenherr, por terem me ajudado a revisar os textos e as traduções em inglês – necessários para esta pesquisa. Não duvido de que eu tenha esquecido alguém, pois têm muitas pessoas que foram essenciais para que eu fosse capaz de concluir este trabalho ou que impactaram a minha vida pessoal e acadêmica de forma positiva ou negativa. Contudo, percebo que se faltasse uma só dessas pessoas no meu caminho eu já não seria a pessoa que sou hoje, por isso deixo registrado aqui a essas pessoas os meus sinceros agradecimentos!

Resumo Este Trabalho de Conclusão do Curso realizado junto ao bacharelado em Design Digital da Universidade Federal de Pelotas teve como principal objetivo realizar o projeto de desenvolvimento do site de rede social temática intitulado Cosmaket.net, voltado ao universo cosplay. Para sua construção foram utilizados como metodologia de projeto os planos da experiência do usuário desenvolvidos por Garrett (2011), além de adotadas as técnicas de análise heurística (NIELSEN, 1993) e benchmarking – que foram aplicadas a interfaces similares à projetada – com o intuito de que essas análises contemplassem a estratégia de construção do site de rede social temática. O desenvolvimento teórico da pesquisa se utilizou dos estudos de Recuero (2009) e Montardo (2010) para definir um conceito de site de rede social temática, além de mesclar ao projeto do site conceitos de Krug (2008) e novamente de Garrett (2011). Como resultado a pesquisa apresenta a proposta do referido site de rede social temática tendo sido desenvolvido wireframes estáticos e telas das principais funções do site com suas devidas adaptações para mobile, tablet e desktop. Palavras-chave: Redes sociais; Sites de redes sociais temáticas; Design Digital; Cosplay.

Lista de Figuras Figura 1

Página inicial do SRST Cure World Cosplay............................. 39

Figura 2

Página inicial do SRST Cosplanner........................................... 40

Figura 3

Página inicial do SRST Cosplay.com......................................... 41

Figura 4

Página inicial do SRST Cosplayers.Global................................ 42

Figura 5

Página inicial do SRST Gaia Online........................................... 43

Figura 6

Página inicial do SRST My Anime List....................................... 44

Figura 7

Página inicial do SRST Skoob................................................... 45

Figura 8

Página inicial do SRST Good Reads..........................................46

Figura 9

Página inicial do SRST Flickr..................................................... 47

Figura 10

Página inicial do SRST Beautiful People................................... 48

Figura 11

Os Elementos da Experiência do Usuário................................. 50

Figura 12

Representação gráfica da cidade de Königsberg......................59

Figura 13

Legenda para as imagens de distrações no Layout do

Facebook e do Filmow............................................................... 67 Figura 14 Figura 15 Figura 16 Figura 17 Figura 18

Distrações no Layout do Facebook........................................... 68 Distrações no Layout do Filmow em comparação ao

Facebook................................................................................... Forrest J. Ackerman e Myrtle R. Douglas, durante a Worldcon de 1939……............................................................................... Imagem de exemplo da campanha “Cosplayer é gente igual a você”.......................................................................................... Imagem de exemplo da campanha “Cosplayer é gente igual a você”..........................................................................................

69 74 84 85

Figura 19

Inconsistência de idioma........................................................... 102

Figura 20

Inconsistência de idioma........................................................... 103

Figura 21

Inconsistência de idioma........................................................... 104

Figura 22

Inconsistência de idioma........................................................... 105

Figura 23

Inconsistência de idioma........................................................... 106

Figura 24

Inconsistência de idioma........................................................... 107

Figura 25

Inconsistência de idioma........................................................... 108

Figura 26

Inconsistência de opções de cadastro..................................... 109

Figura 27

Inconsistência de opções de cadastro..................................... 110

Figura 28

Inconsistência de rótulo de botões............................................ 111

Figura 29

Inconsistência de rótulo de botões............................................ 112

Figura 30

Falha na barra de pesquisa........................................................ 113

Figura 31

Dashboard..................................................................................115

Figura 32

Página inicial.............................................................................. 116

Figura 33

Barra de pesquisa Cosplanner...................................................118

Figura 34

Barra de pesquisa Cosplanner...................................................119

Figura 35

Páginas sem fim........................................................................ 121

Figura 36

Páginas sem fim......................................................................... 121

Figura 37

Registro de usuários suspenso.................................................. 122

Figura 38

Cosplay.com.............................................................................. 124

Figura 39

Mapa de calor........................................................................... 126

Figura 40

Publicar..................................................................................... 127

Figura 41

Cadastro Gaia Online................................................................ 129

Figura 42

Página inicial Gaia Online...........................................................130

Figura 43

Página inicial My Anime List...................................................... 132

Figura 44

Visualização de Perfil My Anime List......................................... 133

Figura 45

Inconsistência de livros na estante............................................ 134

Figura 46

Informações de livros................................................................. 135

Figura 47

Erro da função importar amigos................................................ 137

Figura 48

Pesquisa de série e página de série.......................................... 138

Figura 49

Página inicial Filmow................................................................. 139

Figura 50

Importar amigos do Facebook................................................... 140

Figura 51

Importar amigos da conta do google ou e-mail......................... 141

Figura 52

Página inicial do site Cure World Cosplay na versão mobile.....143

Figura 53

Tela inicial do Flickr sem login................................................... 148

Figura 54

Tela inicial do Skoob sem login................................................ 149

Figura 55

Convenção estrutural de página inicial...................................... 155

Figura 56

Convenções de navegação web................................................ 157

Figura 57

Feed do site Flickr...................................................................... 158

Figura 58

Feed do site Cosplayers.Global………………...……..…………. 159

Figura 59

Feed do site Cosplayers.Global com usuário logado................ 159

Figura 60

Feed do site Filmow................................................................... 161

Figura 61

Feed do site Skoob.................................................................... 162

Figura 62

Feed do site Cosplanner............................................................ 163

Figura 63

Tela de edição perfil do site Skoob........................................... 164

Figura 64

Página de perfil do CureWorldCosplay...................................... 165

Figura 65

Página de perfil do CureWorldCosplay...................................... 166

Figura 66

Página de conexões do CureWorldCosplay............................. 166

Figura 67

Página de início do aplicativo do Flickr..................................... 167

Figura 68

Página de início do site do Flickr aberta no smartphone......... 169

Figura 69

Pesquisa no aplicativo do Flickr................................................ 171

Figura 70

Persona 1: Helena...................................................................... 178

Figura 71

Persona 2: Sérgio....................................................................... 180

Figura 72

Persona 3: Amélia...................................................................... 181

Figura 73

Persona 4: Bruno....................................................................... 182

Figura 74

Sitemap do Cosmake.net.......................................................... 188

Figura 75

Funções 1 e 2............................................................................ 193

Figura 76

Funções 2.1 e 2.2.......................................................................194

Figura 77

Função 3.................................................................................... 195

Figura 78

Função 4.................................................................................... 196

Figura 79

Wireframes mobile..................................................................... 197

Figura 80

Wireframes do feed, pesquisa e meu perfil desktop................. 198

Figura 81

Primeira ideia de marca............................................................ 200

Figura 82

Primeira ideia de marca............................................................. 200

Figura 83

Processo de construção do símbolo do Cosmake.net............. 202

Figura 84

Ícone que incorporou o símbolo da marca............................... 203

Figura 85 Figura 86

Apresentações em horizontal e vertical (respectivamente) da marca......................................................................................... Definição da paleta de cores a partir de imagem no Adobe

Color CC....................................................................................

204 205

Figura 87

Definição da paleta de cores no Adobe Color CC..................... 206

Figura 88

Paletas de cores definidas através do Adobe Color CC........... 206

Figura 89

Códigos das cores da paleta disponibilizados no Adobe Color CC..............................................................................................

207

Figura 90

Grid base para mobile (retrato e paisagem) e tablet retrato...... 209

Figura 91

Grid base para tablet paisagem e desktop................................ 210

Figura 92

Grid completa para os três dispositivos.................................... 211

Figura 93

Landing page do Cosmake.net.................................................. 213

Figura 94

Tela de Login do Cosmake.net.................................................. 215

Figura 95 Figuras 96 e 97 Figura 98 Figura 99

Completar dados de cadastro pelo Google/Facebook do

Cosmake.net..............................................................................

216

Confirmar e-mail de cadastro do Cosmake.net......................... 217 Diferenças entre os botões de cadastro.................................... 218 Resultados de pesquisa do Cosmake.net com o usuário logado........................................................................................

220

Figura 100

Pesquisar................................................................................... 221

Figura 101

Feedback do número de resultados da pesquisa..................... 224

Figura 102

Detalhes da barra de navegação............................................... 225

Figura 103

Formato das publicações.......................................................... 226

Figura 104

Detalhes das informações das publicações no feed................. 227

Figura 105

Detalhe do ícone “nova publicação”..........................................228

Figura 106 Figuras 107, 108 e 109 Figuras 110, 111 e 112 Figura 113

Criando nova publicação pop-up.............................................. 229 Páginas de tutorial e nova publicação....................................... 231 Páginas de perfil e pesquisa de usuários.................................. 233

Feed de notícias e Meu perfil para desktop...............................235

Lista de Abreviaturas e Siglas EUA

Estados Unidos

SRSPG

Site de Rede Social de Propรณsito Geral

SRST

Site de Rede Social Temรกtica

UFPEL

Universidade Federal de Pelotas

MMO

Massive Multiplayer Online

RPG

Role Playing Game

MMORPG

Massive Multiplayer Online Role Playing Game

Sumário 1. INTRODUÇÃO......................................................................................... 27 2. ASPECTOS METODOLÓGICOS............................................................ 35 2.1 Metodologia científica.........................................................36 2.2 Metodologia projetual......................................................... 49 3. CONCEITUANDO REDES SOCIAIS....................................................... 55 3.1 Do mundo físico para a internet........................................ 57 3.2 Redes sociais temáticas na web e sites de redes sociais temáticas........................................................................................ 4. O COSPLAY COMO TEMA PARA UM SITE DE REDE SOCIAL TEMÁTICA...................................................................................................

64 72

5. COSMAKE.NET: A CONSTRUÇÃO........................................................89 5.1. Plano da estratégia............................................................ 90 5.1.1. Princípios da avaliação heurística.................................. 93

5.1.2. As heurísticas................................................................. 97 5.1.2.1. Documentação das avaliações................................ 101 5.1.3. Benchmarking................................................................ 145 5.1.3.1. Execução do benchmarking..................................... 146 5.1.3.2. Considerações finais referentes ao benchmarking.. 172 5.1.4. O que se quer desse produto? - Os objetivos do produto......................................................................................................... 5.1.5. O que os usuários querem deste produto? - As Necessidades do Usuário............................................................................

174 176

5.1.5.1. Personas...................................................................178 2. Plano do escopo................................................................. 182 5.2.1. Especificações funcionais.............................................. 183 5.2.2. Requisitos de Conteúdo................................................. 185 5.3. Plano da estrutura.............................................................. 187

5.3.1. Mapa do site (todas seções do website)........................ 188 5.3.2. Principais funções do site.............................................. 189 5.4. Plano do esqueleto: Wireframes....................................... 196 5.5. Plano da superfície: Memorial descritivo......................... 199 6. CONSIDERAÇÕES FINAIS..................................................................... 238 REFERÊNCIAS............................................................................................ 243 APÊNDICES................................................................................................. 252 Apêndice A................................................................................. 253

1. Introdução

1. Introdução Em meio a um contexto sócio-histórico em que muitas pessoas se mantêm conectadas à internet, durante a maior parte do tempo em que estão acordadas, o uso dos sites de redes sociais acaba se destacando. Um site de rede social é aquele que se constitui por um perfil de usuário e por um espaço específico para publicações e conexões entre os usuários1. Ao observar dados sobre os anos anteriores, transpondo-os para o presente, é possível traçar visivelmente um período em que o Orkut era o site de rede social mais utilizado, assim como quando decaiu e perdeu seu lugar

para outros da categoria como Twitter e Facebook. Tais sites de redes sociais são inclusive comumente usados como meios de comunicação. Entre seus usos comuns se encontram as abordagens e discussões de temas específicos ou genéricos. Outro aspecto a ser considerado é que as redes sociais não são um conceito exclusivo do meio digital, contudo, nesta pesquisa, o enfoque se deu no meio digital. Os sites de redes sociais mencionados, quais sejam: Orkut, Twitter e Facebook, eram voltados estritamente à comunicação entre os usuários sem se restringirem a um único tema. O propósito inicial do Orkut era o de dar 1

Este assunto será aprofundado mais adiante no capítulo dedicado a redes sociais com base em Recuero (2009).

possibilidade de criar e de participar de grupos temáticos, porém no espaço geral do site não havia um único tema, mas sim vários, os quais poderiam ser criados, modificados ou excluídos pelos usuários. Atualmente a rede social

Orkut teve as suas atividades encerradas e o Twitter mantém suas funções, que buscam priorizar a comunicação instantânea e objetiva entre os usuários. O Facebook, contudo, diferentemente das suas características iniciais, acrescentou páginas e grupos temáticos à sua interface possibilitando atender temas e discussões mais específicos – como antes ocorria com o Orkut por meio das comunidades. Observa-se, portanto, que tais páginas, grupos ou comunidades temáticas se caracterizam como exemplos de redes sociais temáticas2, pois correspondem a um conjunto de nós e suas conexões que giram em torno de um tema e mantêm-se restritas a esse. Tal conceito, que ao ser relacionado ao de um site de rede social mencionado anteriormente, auxiliará na definição de o que é um site de Rede Social Temática3 (SRST)4 – um dos principais pontos abordado ao longo desta investigação.

Este assunto será aprofundado mais adiante no capítulo dedicado a redes sociais com base em Montardo (2010). 3 Conceito melhor discutido no capítulo de redes sociais. 4 Ao longo do trabalho será adotada a sigla SRST para referir-se aos sites de redes sociais temáticas devido ao grande número de vezes pelo qual o termo é mencionado.

É importante destacar que o tema SRST tornou-se o principal foco deste trabalho de conclusão de curso, pois além de buscar solucionar possíveis problemas nessas redes ao se utilizar do design digital, a intenção foi a de também fazer uma relação com a formação anterior da pesquisadora que realizou esta investigação, qual seja: formação técnica em Vestuário. Tais dimensões também foram associadas ao interesse pessoal da autora – que acreditou que essas características auxiliariam na empatia necessária para criar uma prática projetual para os usuários selecionados. Assim, o objeto de pesquisa desta investigação acabou por se justificar inicialmente em âmbito

pessoal. De igual modo, o foco selecionado para o projeto prático teve relação com os interesses de quem o pesquisa e, por isso, foi estabelecido o

cosplay5 – que alia a formação anterior da pesquisadora com o seu apreço pelo universo de mangás, animes e games6 – uma vez que a investigação se construiu a partir da vivência de alguém que participa do meio cosplay e, por isso, pretendeu-se que o SRST projetado como resultado prático desta pesquisa abordasse esse universo, como será visto posteriormente. 5

Temática abordada no capítulo 4. Os conceitos de mangás, animes e games serão apresentados futuramente no capítulo que aborda o cosplay como tema de um SRST. 6

Foi com base nessa paixão, aliada ao design foi que surgiu a ideia de desenvolver uma interface que suprisse uma necessidade percebida no meio em questão, qual seja: a ausência de um meio ou fonte eficiente para descobrir e compartilhar métodos de confecção e interação para cosplayers e

cosmakers. A pesquisa do tema foi iniciada como participante no grupo de pesquisa “Design Digital na Cibercultura”. Logo no começo dos estudos notou-se que praticamente não havia publicações sobre redes sociais temáticas – ou mesmo que essas não eram encontradas com tanta facilidade. Com isso, ao mesmo tempo em que se estava suprindo um interesse pessoal foi encontrado um tema de pesquisa que merecia ser pesquisado no âmbito acadêmico, uma vez que redes temáticas facilitam a abordagem de temas específicos com sua estrutura, em comparação, por exemplo, ao site de Redes Sociais de Propósito Geral (SRSPG)7 Facebook que apresenta diversas distrações, tal como foi apresentado em pesquisas anteriores em forma de resumo8 e resumo expandido9.

Sigla que será adotada para tratar de sites de redes sociais de propósito geral ao longo do trabalho. 8 Para mais informações sobre o resumo acesse Mor (2015) em http://hdl.handle.net/10183/136479.

Sendo assim, esta pesquisa respondeu a seguinte questão de pesquisa: como projetar um site de rede social temática voltado para as necessidades do universo Cosplay? O objetivo geral desta investigação foi então o de projetar um site de rede social temática voltado a suprir a necessidade já mencionada como resultado prático desta investigação. Tal site será apresentado no capítulo dedicado à prática projetual. Para isso, como objetivos específicos, pretendeu-se: a) Executar uma análise heurística dos sites que compõem a amostra estipulada; b) Fazer

um benchmarking voltando-se, principalmente, para aspectos estruturais da amostra; c) Definir as funcionalidades do site; d) Executar o projeto do site de rede social temática. Os objetivos específicos apresentados foram executados dentro dos planos da experiência do usuário de Jessie James Garrett (2011)10 e a seleção dos componentes da amostra foi definida na metodologia da pesquisa exposta posteriormente.

Para mais informações sobre o resumo expandido acesse Mor (2015) em http://cti.ufpel.edu.br/siepe/arquivos/2015/LA_00835.pdf 10 Método que será apresentado no capítulo da metodologia projetual e relatado em maiores detalhes nos capítulos correspondentes à prática projetual.

Com base nisso, esta pesquisa foi construída a partir dos seguintes capítulos: no segundo delineiam-se os processos metodológicos científicos e projetuais para a realização da investigação; no terceiro abordam-se os conceitos de redes sociais pertinentes ao trabalho; no quarto capítulo apresenta-se o cosplay como sendo a temática do site de rede social temática projetado e no último capítulo expõem-se a execução do projeto prático e a apresentação do produto final seguindo-se das considerações finais.

2. Aspectos metodolรณgicos

2. Aspectos metodológicos Este capítulo aborda os meios metodológicos científicos e projetuais utilizados ao longo deste trabalho de conclusão de curso. Em alguns momentos os meios de coleta e análise científicas se mesclam com a metodologia

projetual,

por

isso

foram

mencionados

ambas

metodologias. 2.1. Metodologia científica Esta pesquisa consistiu em uma pesquisa de caráter exploratório

segundo a definição de Gil (2002) como sendo construída em torno de um objetivo geral e de possuir foco principal em aumentar a familiaridade com o problema apresentado. Além disso, a classificação se justificou pela existência de levantamento bibliográfico sobre o tema e análise de exemplos que estimulem a sua compreensão (GIL, 2002). A condução da pesquisa se deu primeiramente a partir de uma revisão bibliográfica que estruturou-se a partir do estudo de livros e artigos científicos. Seguiu também como técnica de coleta de dados o uso de pesquisa documental – devido ao uso de fontes documentadas no meio digital – tais como as telas de alguns sites.

A investigação além de basear-se em revisão bibliográfica também incluiu a execução de análises, que serão apresentadas posteriormente, a partir de uma amostra intencional – composta por um total de nove sites. O caráter intencional da amostra se deu devido à falta de informação no que diz respeito ao total de SRST existentes no mundo; pela dificuldade de encontrálas; e ainda por se tratar de uma pesquisa qualitativa que não tem a intenção de estabelecer generalizações a partir de estatística (GIL, 2002). Além disso, o tempo hábil para o estudo não permitiria estudar uma amostra ampla, por isso tal amostra foi composta prioritariamente por SRST e suas possíveis adaptações a outros dispositivos – cujo tema estivesse direta ou indiretamente relacionado ao universo cosplay. Com a amostra coletada foi utilizada uma análise heurística (NIELSEN, 1993) e posteriormente um benchmarking (SPENDOLINI,1993, apud COSTA et al. 2007) a fim de priorizar uma pesquisa aprofundada acerca dos componentes que apresentassem as melhores práticas e se encaixassem no projeto prático pretendido. Destaca-se que tanto as análises heurísticas realizadas como o benchmarking acabaram por mesclar elementos de metodologia científica e projetual. Isso se deu, pois tais técnicas foram aplicadas também como meio para aprofundar o conhecimento do objeto de pesquisa, além da base exclusivamente teórica apresentada na revisão bibliográfica.

É necessário enfatizar que apesar da amostra incluir sites não brasileiros o SRST resultante deste trabalho de conclusão de curso se concentrou apenas nos usuários brasileiros – perfil que é conhecido da autora desta investigação. Para o design de um site que abrangesse um público internacional seria necessária uma pesquisa muito maior levando em conta o público-alvo e os aspectos culturais que poderiam influenciar de alguma forma a interpretação das informações na interface, o que não seria possível de executar neste trabalho. Apesar desses propósitos expostos, só foram encontrados quatro SRST

diretamente relacionados ao tema cosplay. Por isso, foram selecionados intencionalmente outros sites com temáticas relacionadas ao universo, tais como: animes, games, filmes, livros, que comumente inspiram cosplays – ou que a autora julgou que pudesse acrescentar informações para o projeto de SRST em questão. Assim, estabeleceu-se uma amostra para condução das análises e que servisse de referência para a prática projetual criada. Tal amostra foi composta pelos seguintes sites: Cure World Cosplay (ver Fig.1), caracterizado pela divulgação e comunicação entre cosplayers do mundo inteiro; Cosplanner (ver Fig. 2), focado no planejamento da confecção e execução do cosplay, por ser relacionado

acreditou-se

poder

acrescentar

informações

pesquisa;

Cosplay.com

(ver

Fig.

3),

semelhante

Cure

World

Cosplay;

Cosplayers.Global 11 (ver Fig. 4), também semelhante ao Cure World Cosplay; Gaia Online (ver Fig. 5) e My Anime List (ver Fig. 6), ambos têm por enfoque animes e games; o Skoob aborda livros (ver Fig. 7); já o Filmow (ver Fig. 8), expõe a temática de filmes; e o Flickr (ver Fig. 9), que concentra-se em divulgação de portfólio e imagem.

Figura 1 – Página inicial do SRST Cure World Cosplay Fonte: Cure World Cosplay12

Foi disponibilizado para usuários brasileiros em abril de 2017 segundo o artigo no site Animesphere (disponível em http://www.animesphere.com.br/plataforma-online-cosplayersglobal-e-oficialmente-lancada-em-10-linguas/, acesso em: 30 de janeiro de 2018). 12 Disponível em http://worldcosplay.net/, acesso em: 20 de fevereiro de 2017.

40 Figura 2 – Página inicial do SRST Cosplanner Fonte: Cosplanner13

Disponível em http://www.cosplanner.net/index.cfm, acesso em: 20 de fevereiro de 2017.

Figura 3 – Página inicial do SRST Cosplay.com Fonte: Cosplay.com14

Disponível em http://www.cosplay.com/, acesso em: 20 de fevereiro de 2017.

42 Figura 4 – Página inicial do SRST Cosplayers.Global Fonte: cosplayers.global15

Disponível em https://www.cosplayers.global/, acesso em: 04/02/2018.

43 Figura 5 – Página inicial do SRST Gaia Online Fonte: Gaia Online16

Disponível em https://www.gaiaonline.com/, acesso em: 20 de fevereiro de 2017.

44 Figura 6 – Página inicial do SRST My Anime List Fonte: My Anime List17

Disponível em https://myanimelist.net/, acesso em: 20 de fevereiro de 2017.

45 Figura 7 – Página inicial do SRST Skoob Fonte: Skoob18

Disponível em https://www.skoob.com.br/, acesso em: 20 de fevereiro de 2017.

46 Figura 8 – Página inicial do SRST Filmow Fonte: Filmow19

Disponível em https://filmow.com/, acesso em: 20 de fevereiro de 2017.

Figura 9 – Página inicial do SRST Flickr Fonte: Flickr20

É importante destacar que alguns sites de redes sociais temáticas apresentavam condições ou diretrizes restritas para a participação do usuário como, por exemplo, ter uma renda anual mínima ou um padrão de beleza específico – exigência presente no site Beautiful People (ver Fig. 10). Por isso, tal gênero de interface não foi levado em consideração para a definição da amostra devido a tais condições de acesso.

Disponível em https://www.flickr.com/, acesso em: 20 de fevereiro de 2017.

Figura 10 – Página inicial do SRST Beautiful People Fonte: Beautiful people21

É necessário enfatizar também que o foco da pesquisa se deu nos SRST, portanto as análises se concentraram nas redes desse tipo de

Disponível em: https://www.beautifulpeople.com/en-UK, acesso em: 9 de outubro de 2016.

plataforma – apesar de existirem redes sociais temáticas em forma de aplicativos móveis. 2.2. Metodologia projetual Como já foi mencionado na descrição da metodologia científica esta etapa acabou por mesclar-se com parte da metodologia de pesquisa, devido à execução das análises e do benchmarking das interfaces selecionadas terem sido utilizados também como ferramenta para o estudo do objeto de pesquisa – ainda que costumem ser ferramentas adotadas com caráter projetual. As direções da prática projetual, portanto, foram tomadas a partir dos planos de experiência do usuário de Jessie James Garrett (2011) que aborda o projeto da interface a partir de cinco planos como é possível observar na figura a seguir:

Figura 11 – Os Elementos da Experiência do Usuário Fonte: Jesse James Garrett.net, 2000

Os cinco planos apresentados na figura são chamados por Garrett (2011) de Elementos da Experiência do Usuário e contemplam um projeto de

interface digital desde a sua concepção, tido como o nível mais abstrato do projeto, até a finalização – momento em que se pode visualizar a interface em sua forma concreta. O plano que diz respeito à etapa de concepção do projeto é denominado pelo estudioso (Ibidem) de Plano da Estratégia, no qual são contemplados os objetivos do site e as necessidades dos usuários. Nesta investigação, tal plano englobou os capítulos dedicados à revisão bibliográfica, à execução das análises da amostra e à definição de personas. Na sequência, ele apresenta o chamado Plano de Escopo, etapa focada na definição de funcionalidades – como as necessidades mencionadas no Plano da Estratégia serão atendidas e quais os requisitos de conteúdo para estas funcionalidades. Em seguida, desenvolve-se o Plano da Estrutura, dedicado aos aspectos estruturais de informação e interação, englobando arquitetura de informação e design de interação. O foco se dá no planejamento da forma com que o usuário acessará as funcionalidades do site e como a informação será exposta na estrutura, objetivando facilitar o acesso ao usuário. Tal estrutura foi definida e apresentada nesta investigação por meio de um

sitemap. A próxima fase aborda o Plano do Esqueleto, que é quando ocorre a montagem da estrutura base das áreas do site, contendo a definição dos

espaços; a navegação e o design da informação. Sendo assim, é no esqueleto do site que ele começa a aparecer visualmente. Inicialmente era prevista a construção de wireframes navegáveis, mas devido ao volume de trabalho e atrasos no cronograma foram mantidas as versões estáticas feitas à mão pela autora. Por último, desenvolve-se o Plano da Superfície, que contempla os aspectos do design visual como as cores e a tipografia estabelecidas. Neste caso também foi necessário englobar os aspectos referentes à construção de uma identidade visual para uso no site. Tal identidade foi tomada como ponto

de partida para a definição dos componentes estéticos das telas. É importante destacar que os planos de Garrett (2011) foram escolhidos para a execução da prática projetual resultante desta pesquisa não só devido à familiaridade que a autora adquiriu com essa ao longo de sua graduação, mas em virtude da possibilidade de englobar todos os aspectos citados (experiência do usuário, design da informação, arquitetura de informação e usabilidade) de forma consideravelmente simples através de seus diferentes planos. A partir dessa divisão dos planos da experiência do usuário de Garrett (2011), foi elaborada a prática projetual, qual seja: a elaboração de conceito e interface de um SRST que aborda o tema cosplay, intitulado de

Cosmake.net. â&#x20AC;&#x201C; que terĂĄ suas etapas de desenvolvimento apresentadas posteriormente.

3. Conceituando redes sociais

3. Conceituando redes sociais Ao que tudo indica, conforme ocorre o avanço tecnológico, mais dependentes dos eletrônicos as pessoas parecem se tornar e, principalmente, da internet. Em meados de 2004 um computador de mesa com acesso à

internet era por muitos usuários – presentes no círculo de convivência da autora na época – tido como supérfluo, frente ao que ocorre hoje. Atualmente quem não possui ao menos um dispositivo que se conecte à internet muitas vezes não consegue trabalhar ou estudar uma vez que a internet facilita o acesso a informações e também pode ser usada como meio de comunicação

e manutenção das relações interpessoais. As redes sociais na internet – tanto sites quanto aplicativos móveis – se fazem presentes como meio de comunicação básico – prática que antigamente era ocupada apenas pelas empresas de telefonia fixa. Tais novas formas de comunicação tornam possível estabelecer relações com pessoas com as quais não seria possível devido a fatores geográficos, além de permitir que essas pessoas estejam “presentes” e interajam em um mesmo espaço, de acordo com o interesse dos envolvidos. O avanço tecnológico também possibilitou, de certa maneira, a globalização de relações sociais e criou oportunidade para que empresas – como o Facebook e o Orkut – surgissem e explorassem essas possibilidades,

dando origem a alguns dos maiores sites de redes sociais – embora o Orkut tenha sido fechado, como mencionado anteriormente. Contudo, o mercado da comunicação digital enxergou tal oportunidade e hoje existem vários sites e aplicativos de redes sociais com diferentes enfoques. Assim, ao longo deste capítulo, irá se abordar aspectos das redes sociais. Tudo isso para buscar compreender a mecânica desses suportes e informação, seguindo a ideia de que com uma melhor compreensão da categoria de site pode-se adquirir um entendimento necessário para a prática projetual resultante desta investigação.

57 3.1. Do mundo físico para a internet Como um dos pilares norteadores desta pesquisa é necessário ressaltar o que é e o que caracteriza uma rede social. É importante notar que, apesar do foco desta investigação se concentrar nos meios digitais, as redes sociais que atualmente são formuladas como sites são oriundas das relações do ambiente físico, tal como menciona Recuero (2013, p. 51): [...] não era esperado que tais ferramentas tivessem um impacto tão profundo nas redes sócias e que sua transmutação para o ambiente on-line pudesse igualmente impactar de forma tão pungente as práticas sociais também no espaço off-line.

Constatação que destaca a existência das redes sociais mesmo fora do ambiente virtual, junto à conclusão do impacto causado no meio físico por sua migração para o ambiente virtual. Ao fazer essas reflexões a estudiosa (Ibidem) apresenta fenômenos em que mostraram o potencial dos sites de redes sociais. Como, por exemplo, na campanha presidencial do candidato Barack Obama, no ano de 2008. Ou nas inundações que ocorreram no estado de Santa Catarina, em novembro do mesmo ano. Nas duas situações os sites de redes sociais foram determinantes meios de comunicação, apresentando o que Recuero (2009) chama de

“advento da Comunicação mediada pelo Computador”. Uma vez que nos dois casos sites de redes sociais foram utilizados como forma de comunicação e, ainda, amplificadores da capacidade de conexão e consequentemente do alcance de informações como destaca (Ibidem). Assim, tornando possível que redes sejam criadas e expostas nesses espaços, denominadas redes sociais mediadas pelo computador, sobre as quais propõe não apenas como expressões das redes sociais do ambiente físico, mas como meio de complexificá-las (Ibidem). Levando em consideração a existência prévia de redes sociais no ambiente físico se chega à sua devida caracterização. Redes sociais e os estudos de redes dos quais partiram não são recentes. A metáfora de rede

que as descreve foi utilizada pela primeira vez por Leonard Euler, em 1736 (BUCHANAN, 2002; BARABÁSI, 2003; e WATTS, 2003 apud RECUERO, 2009) na publicação de um artigo sobre o enigma das Pontes de Königsberg. No artigo Euler mostrou que era impossível cruzar a cidade utilizando cada uma das sete pontes apenas uma vez – aparentemente os habitantes da cidade divertiam-se tentando resolver tal enigma. A impossibilidade foi apresentada através da representação gráfica dos pontos da cidade (nós) e as sete pontes (arestas ou conexões) que os conectavam (Fig. 12), tornando visível que a rota procurada não existia.

Figura 12 - Representação gráfica da cidade de Königsberg. Fonte: RECUERO, 2009, p. 19.

Euler justificou que para que isso fosse possível cada ponto deveria conter pelo menos duas pontes – uma entrada e uma saída – e o início e o fim do trajeto poderiam contar com somente uma ponte cada – considerando que não seria necessário ter uma entrada e uma saída a não ser que constasse na mesma porção de terra – porém, cada nó apresentado possuía um número ímpar de conexões o que impossibilitava o trajeto. Atualmente a forma de representação que Euler usou no enigma das pontes é chamada de grafo e marcou o surgimento da teoria dos grafos, que é comumente utilizada como forma de representação de redes sociais (RECUERO, 2009). O resultado visual

dos grafos se assemelha a uma rede – o que origina a metáfora que nomina as plataformas que esta pesquisa tem como objeto de estudo. O caso das pontes convém também para exemplificar as redes sociais no mundo físico considerando a definição de Recuero (2005) em que uma rede social trata-se de um conjunto de nós e de suas conexões. Montardo (2010) parte dessa definição de rede social e afirma que uma rede social temática na web consiste em um conjunto de nós e suas conexões que giram em torno de um único tema e restringem-se a ele. Apesar da definição não considerar o meio – físico ou digital – além da forma com que é chamado, isso permite que sejam observadas redes sociais temáticas também no mundo físico tal como os cosplayers presentes em um evento (onde a rede e o tema

seriam compostos pelos cosplayers presentes em tal evento). Ainda que não envolva pessoas – o grafo de Euler, cujo tema a ser apresentado é a cidade de Königsberg e ou o enigma das pontes da cidade, pode também ser considerado como exemplo de uma rede temática no mundo físico. Uma explicação mais simples sobre a ideia de rede é considerar um grupo de pessoas como os pontos (nós) e a forma como estes pontos se ligam (arestas) formam uma estrutura semelhante a uma rede, ou seja: representa a forma como as pessoas se relacionam, indicando as suas conexões com cada membro do grupo (RECUERO, 2009).

Sites de redes sociais, definidos por Boyd e Ellison (2007, apud RECUERO, 2009; BASTOS, et al. 2015) são espaços da web que permitem a criação de um perfil ou página pessoal; a interação através desse perfil; adicionar amigos e exibir a lista de conexões entre os amigos comentários de outros usuários e a devida exposição da rede social de cada usuário. Além disso, para Recuero (2009), eles podem ser sintetizados em: perfil de usuário; um feed ou histórico de publicações e ou interações do usuário dentro da sua própria rede; a exibição das conexões existentes entre os usuários como, por exemplo, os seguidores do Twitter, os amigos do Facebook e do antigo Orkut. Entretanto, Ellison e Boyd (2013 apud RECUERO, et al. 2015) perceberam que alguns dos fatores considerados por elas no ano de 2007 –

como a lista de amigos, por exemplo – deixou de ser um fator definitivo para um site de rede social. Isso porque também se fazem presentes em outros tipos de mídias sociais, assim como ocorreu o surgimento de outros elementos diferenciadores – como o newsfeed22, API’s, social graph e outros. Por isso, elas e retornaram ao conceito inicial e alteraram tal definição para: Um site de rede social é uma plataforma de comunicação em rede na qual os participantes 1) possuem perfis de identificação única que consistem em conteúdos produzidos pelo usuário, conteúdos fornecidos pelo sistema; 2) podem articular publicamente conexões que podem ser vistas e cruzadas por outros; e 3) podem consumir, produzir e/ou interagir com fluxos de conteúdo gerado por usuários fornecidos por suas conexões no site (ELLISON & BOYD, 2013 apud RECUERO et al. 2015).

Para Ellison e Boyd (Ibidem) com a nova definição o foco saiu dos perfis dos usuários e se transferiu para a circulação de conteúdo. Consideram ainda como principal diferencial entre um site de rede social e as formas tradicionais de mídia – tais como o rádio e a televisão – a experiência do usuário e o fato de o conteúdo ser diferente para cada pessoa, de acordo com a formação da rede e da sua atividade. Assim, um site de rede social com

Este termo será repetido várias vezes ao longo do trabalho e pode variar em: newsfeed, feed de notícias ou apenas feed. Se refere ao componente da página que apresenta as atualizações da rede de conexões do usuário e também demais conteúdos que ele possa ter selecionado como interesse.

base nos conceitos apresentados pode ser sintetizado em perfil de usuário; uma forma de lista de conexões visíveis aos demais usuários e a possibilidade de interação com a stream – acompanhamento de transmissão dos conteúdos, em alguns casos chamada de newsfeed ou timeline. Os sites de redes sociais, além da conceituação exposta, possuem aspectos que os diferem e geram ramificações dentro da definição de redes sociais, tais como Recuero (2009) menciona – a partir de dois elementos trabalhados por Boyd e Ellison (2007) – que são a apropriação e a estrutura.

Sites de redes sociais apropriadas têm como ideia central manter redes sociais dando-lhes sentido. Por outro lado, um site de rede social tido como estruturado se concentra na exposição pública dos usuários. Sites como o

Facebook e Twitter, por exemplo, se concentram na exposição pública dos usuários, bem como sugerem as perguntas na área para redigir as publicações – “No que você está pensando?”, “O que está acontecendo?” -, se caracterizam como um tipo estruturado. São caracterizados por terem sido pensados desde o princípio como site de rede social. Já os sites de redes sociais apropriados, por sua vez, se focam em manter relações sociais e atribuir um sentido e ou motivo para isso. São sites que não eram inicialmente pensados como uma rede social, mas foram apropriados como tal. Um exemplo disso é o YouTube – que apesar de ser um

site no qual se compartilha vídeos – possibilita, também, ligações entre os canais e os demais usuários que podem seguir as publicações de um determinado canal, interagir com outros usuários nos comentários e ainda ver sugestões de canais e vídeos relacionados. A partir da ideia de sites de redes sociais estruturados e apropriados torna-se simples pensar que um site com características apropriadas, acaba por ter maiores chances de ser um SRST uma vez que inicialmente não foi pensado com o intuito de ser um site de rede social. Entretanto, as características de apropriação ou estrutura não influenciam na

caracterização de um SRST e sim na existência de uma temática única envolvida ou não. Em linhas gerais essa contextualização foi necessária para o entendimento básico do objeto principal desta investigação e que será projetado a partir desta, ou seja: um SRST. Cabe aqui destacar que o site projetado a partir desta investigação caracteriza-se como um SRST estruturado como tal, ou seja: planejado desde o início para ser um SRST. 3.2. Redes sociais temáticas na web e sites de redes sociais temáticas Uma rede social temática para Montardo (2010) se constitui de um conjunto de nós e suas conexões que giram em torno de um tema específico e se mantém restrita a ele. Novamente enfatiza-se que apesar da definição ser

apresentada para web pode ser aplicada a redes sociais temáticas em demais plataformas ou no mundo físico. Um exemplo dessa ocorrência seria considerar os professores do curso de Design da Universidade Federal de Pelotas (UFPEL) como uma rede social temática de professores do Design. Isso é possível porque uma rede social temática – como já apresentado – segundo (Ibidem) – consiste nas relações (conexões) existentes entre as pessoas (nós), porém categorizadas em grupos tais como os colegas de trabalho; os colegas de aula; os familiares, etc. Ao serem transportadas para a web essas redes podem adquirir diversas representações, o que torna necessário ressaltar que: uma rede social temática na web é diferente de um SRST. A definição de Montardo (2010) para redes sociais temáticas na web não indica plataforma ou suporte em nada a não ser sua nomenclatura e pode ser percebida em outros meios como já foi mencionado. Todavia, mesmo limitando a definição apresentada ao meio

online é preciso notar que segundo ela um grupo temático no Facebook; um fórum temático; um chat de grupo em um aplicativo, todos são considerados redes sociais temáticas na web apesar de nenhum deles ser um site próprio para tal. Grupos temáticos no Facebook se constroem dentro de um SRSPG – um site de rede social sem um tema específico -, um fórum temático não é considerado um site de rede social por não possuir um meio de stream ou

histórico. Os chats em aplicativos também não são sites – por mais que muitos possam ser considerados como redes sociais. O site é um tipo de suporte, mas não é estritamente necessário para definir uma rede social temática na

web. Contudo, nesta pesquisa serão levados em consideração apenas SRST para a condução do estudo e análises. Compreende-se que um SRST define-se inicialmente por seu suporte que deve ser um site próprio. Sendo assim, inserir-se dentro de um SRSPG não faz com que uma rede social temática seja considerada um SRST. Um dos principais motivos considerados para tal restrição é que se esse

estiver inserido dentro de um SRSPG – como o Facebook – elementos da interface dessa rede social que contém outros focos podem distrair o usuário do tema levando-o a desvirtuar a discussão do tema, problema que não ocorre com a mesma frequência em SRST – segundo as análises de Mor (2015). Tal aspecto é possível observar nas imagens apresentadas a seguir (ver Figuras 13, 14 e 15). Antes de apresentar tais imagens destacam-se os parâmetros estabelecidos para realizar a análise das imagens.

Figura 13 – Legenda para as imagens de distrações no Layout do Facebook e do Filmow Fonte: Adaptado de MOR (2015)

Figura 14 – Distrações no Layout do Facebook Fonte: Adaptado de MOR (2015)

Figura 15 – Distrações no Layout do Filmow em comparação ao Facebook Fonte: Adaptado de MOR (2015)

Como pode-se observar, não são poucos os elementos de distração existentes em tais redes sociais. Contudo, é importante considerar que um SRST deve conter os elementos anteriormente mencionados para um

site de rede social – possibilitando a criação de um perfil de usuário; uma lista de conexões visíveis e a possibilidade de interação com a stream, além de também, como apresentado por Montardo (2010), restringir-se a um único tema. Apresentada a definição do objeto de estudo desta investigação, parte-se agora para as especificidades da prática projetual resultante desta

investigação. Contudo, a partir de tais conceitos foi necessário ainda ampliar o entendimento sobre o tema do SRST a ser projetado, o cosplay, que será debatido a seguir.

4. O Cosplay como tema para um site de rede social temรกtica 72

4. O Cosplay como tema para um site de rede social temática A princípio é necessário ressaltar que a escolha do nicho cosplay para o desenvolvimento da etapa prática deste trabalho se deu por que a autora faz parte do meio atuando como cosplayer e cosmaker. Em função disso, percebeu algumas necessidades presentes nesse meio que acreditou que pudessem ser solucionadas com a implementação do SRST proposto nesta pesquisa. Sendo assim, parte-se agora, para uma brevíssima contextualização sobre a origem do cosplay, conceituando-o, indicando quem são as pessoas que fazem cosplay nos dias atuais e abordando como funcionam as competições – com base nas experiências vivenciadas pela autora. Segundo os sites23 “Click e aprenda”24 e “World animation21”25 o

cosplay surgiu em 1939, nos Estados Unidos, quando na primeira edição da

Outras fontes consideradas de menor importância utilizadas para contextualização histórica acessadas na mesma data são: Blog dos cursos; Cospandy; Jedirio; Sintonia geek; Brasil Escola UOL; Info Escola e Mundo cosplay; Para mais informações verificar as referências bibliográficas ao final deste trabalho. 24 Disponível em http://clickeaprenda.uol.com.br/portal/mostrarConteudo.php?idPagina=21904, acesso em 9 de fevereiro de 2017. 25 Disponível em http://worldanimation21.blogspot.com.br/2014/10/afinal-o-que-e-cosplay-ondesurgiu.html, acesso em 9 de fevereiro de 2017.

Worldcon26 – convenção internacional anual da Sociedade de Ficção Científica Mundial (World Science Fiction Society), evento dedicado a celebrar e homenagear obras de ficção científica da cultura pop –, em Nova Iorque, Forrest J. Ackerman e Myrtle R. Douglas foram fantasiados ao evento (ver Fig. 16).

Figura 16 – Forrest J. Ackerman e Myrtle R. Douglas, durante a Worldcon de 1939 Fonte: Website Sintonia Geek27

Para mais informações acesse o site oficial, disponível em: http://www.worldcon.org/, acessado em: 20 de fevereiro de 2017. 27 Disponível em http://sintoniageek.com.br/historia-do-cosplay/#!prettyPhoto, acesso em 10 de fevereiro de 2017.

Segundo o site World Animation21, nos eventos seguintes demais frequentadores aderiram à ideia e começaram a se fantasiar. Com o crescimento da prática foi criado o concurso chamado de masquerades28, em que era de costume não apenas confeccionar e vestir a fantasia, mas também interpretar os personagens trajados pelos participantes. No começo a prática era conhecida por costuming ou fan

costuming e a denominação cosplay, assim como a expansão para outras áreas da cultura pop29 e para o Japão – local que muitas pessoas pensam ter se originado a prática – veio somente em 1984, com a visita de Nobuyuki Takahashi (do estúdio japonês Studio Hard) à Worldcon. Nobuyuki acabou por se impressionar com a prática publicando-a em revistas de ficção científica japonesas, assim como o masquerades, denominando a prática de cosplay. (Ibidem) O termo cosplay 30 é oriundo da junção das palavras em inglês

costume (fantasia) e roleplay (brincadeira ou interpretação ou ainda brincar de interpretar). Na sua prática os participantes se vestem como personagens 28

Termo em inglês que significa mascarados. Segundo Soares (2013 apud AMARAL, 2014) o termo cultura pop pode ser definido como produtos populares orientados à massa, produzidos dentro de grandes indústrias da cultura – televisão, cinema, música, etc – sendo que no Brasil costuma ser chamado de “popular midiático” ou “popular massivo”. 30 Disponível em http://www.significados.com.br/cosplay/, acesso em 18 de abril de 2016. 29

fictícios da – em sua grande maioria – arte japonesa, oriundos de games31,

animes32 e mangás33. O termo também engloba quando tal caracterização é voltada à cultura pop ocidental, permitindo que o personagem seja de origem de séries, livros, filmes dentre outras mídias que apresentem personagens. A pessoa que veste a roupa e interpreta o personagem é denominada cosplayer (do inglês em que player significa jogador ou aquele que joga) e muitas vezes também é aquele que faz a fantasia – se tiver habilidade para tal, todavia no universo cosplay aqueles que se dedicam à confecção do cosplay são chamados de cosmaker (em inglês make significa

fazer, confeccionar ou construir). O cosmaker 34 é quem elabora e produz roupas e acessórios inspirando-se em mídias já existentes, comumente trabalhando desde a modelagem e escolha do tecido à finalização de perucas e adereços. O trabalho envolve pesquisa e experimentação de longos períodos, podendo durar meses. Enfatiza-se que, assim como pode se notar nas definições, todo cosplayer não necessariamente é um cosmaker e vice versa. 31

Palavra inglesa que traduzida para o português significa jogo. Um jogo segundo Schell (2011) é “uma atividade de solução de problemas, encarada de forma lúdica”. 32 Palavra do japonês para se referir a desenho animado. No Brasil é utilizado para categorizar desenhos animados de origem japonesa. 33 Palavra do japonês para o que chamamos de histórias em quadrinhos. Comumente utilizado no Brasil para se referir a histórias em quadrinhos de origem japonesa. 34 Disponível em http://tenshissoul.weebly.com/o-que-eacute-cosmaker.html, acesso em 18 de abril de 2016.

Este é apenas o caso vivenciado por quem realiza esta investigação – ainda que se considere nesta pesquisa que possam existir muitas pessoas para quem essa realidade também se aplica, tal como alguns grupos de contato da autora desta investigação. A confecção das fantasias pelos próprios cosplayers era tradição no

masquerades, mas ao ser difundida no Japão a prática acabou por se perder um pouco. Frente à grande popularização da prática no país, formou-se uma indústria específica e muitos dos cosplayers encomendam ou compram prontos seus trajes e acessórios. O cosplay só se difundiu no ocidente na década de 1990, quando os animes e os mangás se popularizaram e acabaram por trazer a prática do

cosplay junto consigo, pois foi absorvida fortemente pelos fãs japoneses. Quando isso aconteceu, o cosplay foi reintroduzido nos EUA em uma proporção muito maior do que a anterior – o que acabou fazendo com que muitas pessoas pensassem, ou pensem até os dias atuais, que o cosplay nasceu no Japão (World Animation21, ver rodapé 25 da página 79). Atualmente qualquer referência da cultura pop presente nas mídias influencia a prática do cosplay, diferentemente das origens em que essa era típica, tais como séries e semelhantes específicos de ficção científica ou

mesmo da ideia errônea de que só é cosplay se for baseado em personagens de origem japonesa. Histórias em quadrinhos, desenhos animados, filmes, livros, vídeos,

games, personagens de origem folclórica ou mitológica, costumeiramente podem ser utilizados em cosplay. Todavia, até o presente momento a autora percebeu que geralmente nas competições os regulamentos admitem somente cosplays com imagens e contexto de referência para serem avaliados. Essas competições variam entre desfile e apresentações, cada categoria é dividida em tradicional ou livre e ainda individual, duplas ou em grupos. Nas

categorias tradicionais são exigidas referências já existentes tanto na versão do traje como na cena a ser interpretada nas apresentações. Nas categorias livres são permitidos personagens originais, de versões feitas por fãs, junção de personagens de origens diferentes na mesma apresentação e até mesmo apresentações satíricas ou alternativas. É preciso ressaltar que o cosplay não se restringe por idade, gênero, cor ou tipo físico (apesar de existirem casos de preconceito como infelizmente ocorre em qualquer lugar) possuindo um público bastante amplo, pois o ideal do cosplay é homenagear um personagem que se admira ou se identifica e, para essa escolha, não há restrições.

Durante as vivências no universo cosplay a autora desta investigação encontrou dificuldades em certas etapas do trabalho de

cosmaker. Isso por não possuir grande experiência na área – apesar da formação prévia como técnica em vestuário. Isso ocorreu, pois os trajes

cosplay são compostos não só por peças de tecido, mas por vários outros tipos de materiais com texturas diferentes, muitas vezes utilizados na construção dos acessórios da vestimenta, que são um desafio para quem costura. Além disso, por causa da especificidade de peças e dos acessórios na maioria das vezes é necessário confeccionar até mesmo os sapatos – objetos que apresentam um grande grau de complexidade. Contudo, a etapa de confecção é uma das favoritas da autora, apesar de não se encontrar facilmente meios e materiais para a execução de certos componentes. Além disso, muitas vezes as informações sobre a construção e sobre os materiais são fragmentadas, incompletas ou duvidosas, deixando clara a necessidade de um espaço em que seja possível consultar e compartilhar informações de qualidade sobre a construção e a compra dos materiais necessários para a confecção da fantasia. Atualmente é possível observar a relação dos cosplayers com as redes sociais – contudo, percebe-se o uso mais como divulgação do trabalho do que como algo que auxilie o trabalho em si. Por isso, esta pesquisa propôs

o desenvolvimento de um SRST voltado para cosmakers, com a finalidade de atender a essas e possivelmente outras necessidades que pudessem vir a ser percebidas durante a pesquisa. É interessante ressaltar, por fim, que o cosplay para muitos não é somente um passa-tempo caro – considerando custos de importação, tecidos e confecção – o que faz com que os trajes possam custar altas somas para ficarem fiéis aos dos personagens. Há quem viva dessa atividade como profissão, por isso, bem diferente do que muitos pensam, para muitos o

cosplay não é uma brincadeira e os cosplayers, fora dos eventos, são pessoas

como quaisquer outras. Todavia, como a prática acabou por ser apropriada por diferentes lugares no mundo muitas pessoas podem acabar conhecendo-a e, talvez, até aderindo sua prática sem conhecer a sua totalidade. Esse aspecto pode acabar por resultar em uma imagem errada a respeito da prática e daqueles que a exercem. É mediante isso que, nesta pesquisa, se identificou o cosplay a partir de um fenômeno de popularização descrito por Gladwell (2009, p.9) como comparável a uma epidemia, situação na qual “ideias, produtos, mensagens e comportamentos se espalham como vírus”. Tal pesquisador menciona dois casos distintos de difusão comportamental, dos quais optou-se por destacar apenas o primeiro devido à sua pertinência e à possibilidade de

ser relacionado à popularização do cosplay. O caso relatado por ele está vinculado à moda – ou ao lançamento de uma – através do contágio dos costumes da vestimenta de personalidades. Outro princípio que se soma ao caso descrito pelo pesquisador e a popularização do cosplay é o desejo de aderir a um produto ou prática pela sensação de pertencimento a um grupo, descrito por Karsaklian (2012) como Grupos de associação e referência. A partir dos casos exemplificados por Gladwell (2009), ele acaba por constatar três princípios em comum comparando-os ao contágio do sarampo que se dissemina em uma sala de aula ou como ocorre quando a gripe aparece no inverno: 1) a possibilidade de contágio – comportamentos contagiantes, neste caso; 2) pequenos gestos acarretando em grandes efeitos (Forrest J. Ackerman e Myrtle R. Douglas provavelmente não imaginavam que dariam origem ao que é atualmente chamado de cosplay) e ainda, 3) que a mudança de comportamento não ocorre gradualmente, mas em um momento decisivo – o chamado ponto da virada. O autor se concentra ainda em expor como tal “epidemia” comportamental é explorada em ações de Marketing e em meio à difusão de produtos e afirma que tal como um vírus poderá chegar em um momento decisivo – em que se espalha ou desaparece, tal qual uma epidemia.

Com base nesse cenário acredita-se que as ações que resultaram no surgimento e estabelecimento do cosplay, ou até mesmo a denominação da prática, tenham sido aparentemente ações despreocupadas, sem a intenção de se espalharem como uma epidemia. Contudo, acabaram dando origem a um movimento ou uma espécie de tribo35 urbana. Considera-se uma “espécie”, pois não se trata de uma prática utilizada no dia-a-dia e também por que não interfere diretamente no comportamento ou personalidade dos praticantes. O cosplay, como já foi mencionado, é somente praticado em

eventos específicos voltados para a cultura pop. Todavia a compreensão do que é a prática não é tão difundida – o que acaba por gerar desentendimentos resultando em reportagens errôneas ou mesmo contendo sátira. Como ocorreu em uma reportagem em vídeo36 publicada no UOL no dia 21 de agosto de 2015. Nela os cosplayers eram retratados como pessoas com distúrbio de personalidade e que acreditavam ser o personagem – não somente como uma interpretação, mas como fazendo parte de si. O que se observa é que neste 35

Segundo o site Toda Matéria (disponível em: https://www.todamateria.com.br/tribos-urbanas/) este termo foi cunhado pelo sociólogo francês Michel Maffesoli em 1985, mas não foi possível encontrar o texto a que corresponde o que não possibilitou maior aprofundamento neste aspecto. 36 Apesar de a reportagem ter sido retirada pela UOL o vídeo ainda pode ser acessado no link: https://youtu.be/AFf61p4OqGM, acesso em 28 de novembro de 2017.

caso fizeram uso de entrevistas realizadas com cosplayers em um evento da área e se utilizaram maldosamente de edições para manipular as falas dos entrevistados. Tal reportagem gerou uma grande reação dos internautas que forçou a retirada da reportagem além de uma nota de retratação37 do UOL que foi publicada no dia 25 de agosto de 2015. Uma das reações à reportagem foi a campanha realizada pela revista 4Cosplay Magazine que pedia que os cosplayers enviassem em suas redes sociais suas fotografias usando cosplay, além de fotografias em seu diaa-dia. O intuito era o de mostrar os dois lados de um cosplayer, expondo que ele poderia ser um estudante, uma mãe ou exercer qualquer profissão. Tal incentivo estava ligado à campanha intitulada “Cosplayer é gente igual a você” ação que pode ser observada nas Fig. 17 e 18 a seguir:

Disponível em: https://noticias.uol.com.br/ultimas-noticias/erratas/2015/08/25/uol-noticias-etv-uol-reportagem-sobre-cosplay.htm, acesso em 28 de novembro de 2017.

Figura 17 – Imagem de exemplo da campanha “Cosplayer é gente igual a você” Fonte: Website Action e Comics38

Disponível em: http://www.actionecomics.com/2015/09/cosplayer-e-gente-igualvoce.html#.Whxd-0qnGM8, acesso em 28 de novembro de 2017.

Figura 18 – Imagem de exemplo da campanha “Cosplayer é gente igual a você” Fonte: Website ABC Geek39

Apesar da intenção positiva da campanha apresentada pela revista acredita-se que a reportagem do UOL relatada não foi o primeiro nem o último caso de conteúdo a abordar o cosplay de forma errônea ou distorcida. Em abril de 2017, por exemplo, os internautas se manifestaram novamente contra 39

Diponível em: https://www.abcgeek.com.br/2017/05/cosplayer-e-gente-igual-voce.html, acesso em 1 de fevereiro de 2018.

um personagem da novela “A Força do Querer” da Rede Globo de televisão. Na novela foi feito um personagem viciado em cosplay e tecnologia que só se comunicava por mensagens de celular – mesmo estando em casa no convívio da sua família – além de permanecer fantasiado o dia inteiro. Levando em conta o amplo alcance do canal de televisão foi feita a campanha “#yurinaomerepresenta” a fim de mostrar que a realidade não é como a retratada na novela, além de desejar que a prática fosse apresentada aos que não a conhecem de forma correta e sem distorções. O criador da campanha deu uma entrevista40 ao UOL – que aparenta

ter aprendido com o erro anterior – sobre a campanha e sobre os maiores problemas com relação a forma como a novela apresentou o cosplay para o público. Sendo estes os fatores elencados: 1) a maioria dos cosplayers não possui uma vida reclusa e nem antissocial, são pessoas comuns que trabalham, estudam, são mães, pais, como na campanha “Cosplayer é gente igual a você” apresentada anteriormente; 2) é um erro achar que cosplayer gosta de viver outros personagens porque está descontente ou insatisfeito com a própria vida; 3) não há vício em cosplay. Como já mencionado

Disponível em: https://estilo.uol.com.br/comportamento/noticias/redacao/2017/04/06/cosplayers-criamcampanha-para-criticar-personagem-de-nova-novela.htm, acesso em 28 de novembro de 2017.

anteriormente cosplayers só se caracterizam em eventos específicos, não faz parte do dia-a-dia do cosplayer sair caracterizado, não é algo fora do controle ou que afete a vida de quem o faz. Como pode-se observar a partir dos casos apresentados, a prática hoje tem maior visibilidade, mas ainda sobre distorções fora do meio cosplay. Em função desse desconhecimento ocorrem equívocos que precisam ser esclarecidos e este Trabalho de Conclusão de Curso opera nesse sentido. Os cosplayers se fizeram presentes através da internet e das redes sociais a fim de defender uma apresentação correta da prática. Apesar da emissora de TV que expos o personagem exemplificado não ter dado qualquer tipo de resposta, é perceptível o uso de redes sociais como ferramenta de combate à discriminação do universo cosplay. Com base em tais episódios verificou-se a possibilidade de considerar o design de um SRST como sendo uma ótima forma de abordar as necessidades desse público e isso foi feito na prática projetual apresentada a seguir.

5. COSMAKE.NET: A CONSTRUÇÃO

5. COSMAKE.NET: A CONSTRUÇÃO O

processo

construção

SRST

desenvolvido

nesta

investigação se estruturou primeiramente em torno dos planos de experiência do usuário descritos por Jesse James Garrett (2011). Estes dividem as etapas de um projeto em estratégia, escopo, estrutura, esqueleto e superfície. Tais etapas correspondem aos diferentes planos que Garrett (2011) considera ideais para que um projeto tenha condições satisfatórias no que se refere ao aspecto de experiência do usuário. Estas, em seus planos de experiência do usuário, contemplam também pontos que atendem questões de arquitetura de

informação e usabilidade. Conjuntamente aos planos de Garrett (2011) foram cruzados pontos focados em usabilidade apresentados pelos autores Nielsen (1993) e Krug (2008). Isso ocorreu, pois tais autores possuem teorias e métodos aplicáveis à prática deste projeto – como será abordado a seguir. 5.1. Plano da Estratégia O plano da estratégia é o primeiro contemplado por Garrett (2011). Neste plano é definida a estratégia a ser utilizada, momento no qual deve-se entender e definir melhor os objetivos, as necessidades e as metas do projeto.

Garrett (2011) sistematiza essa etapa a partir de duas simples questões: 1) O que se quer com este produto? e 2) O que os usuários querem com ele? Na primeira questão devem ser descritos os objetivos do produto estabelecidos pela organização que o projeta. A segunda questão diz respeito às necessidades do usuário. Por isso, a seguir serão apresentados os objetivos da plataforma, as necessidades dos usuários e as ferramentas utilizadas para estudar e assim traçar boas estratégias para este projeto. Tudo isso é necessário, pois: A base de uma experiência do usuário bem sucedida é uma estratégia clara e articulada. Conhecendo ambos: o que nós queremos que o produto faça para nossa organização e o que nós queremos que faça para os nossos usuários, informa as decisões que temos que fazer sobre cada aspecto da experiência do usuário. Mas, responder a essas simples questões pode ser mais complicado do que parece. (GARRETT, 2011)41

A fim de contemplar a primeira questão apresentada por Garrett (2011) foi feita primeiramente uma revisão de literatura – apresentada nos capítulos anteriores – com a intenção de ampliar o entendimento a respeito do produto e ao que viria a caracterizar o seu conteúdo (o tema do SRST). Tradução minha para: “The foundation of a successful user experience is a clearly articulated strategy. Knowing both what we want the product to accomplish for our organization and what we want it to accomplish for our users informs the decisions we have to make about every aspect of the user experience. But answering these simple questions can be trickier than it looks.” (GARRETT, 2011, p. 35) 41

Posteriormente foi definida uma amostra de SRST – já introduzida no capítulo que aborda as metodologias desta investigação –, para que com a análise de produtos semelhantes fosse possível ampliar o conhecimento do objeto de pesquisa e produto a ser projetado. Com isso, adquiriu-se referências práticas, além da definição teórica que foi atribuída no capítulo dois desta investigação – a partir dos conceitos para site de rede social de Recuero (2009) e redes sociais temáticas de Montardo (2010). Devido ao fato de tais análises terem sido conduzidas não só com o objetivo de referência visual para o projeto, como também um meio de ampliar o conhecimento em

relação ao objeto de pesquisa, esta etapa acabou por mesclar aspectos de pesquisa teórica com a execução do projeto prático resultante desta investigação. Como ferramentas de análise da amostra foram utilizadas uma avaliação heurística (NIELSEN, 1993) e ainda um benchmarking (SPENDOLINI, 1993 apud COSTA et al. 2007), os quais permitiram analisar a amostra com relação aos aspectos relacionados à sua usabilidade, aos seus elementos compositivos básicos (login, perfil, etc.), à estrutura das páginas e à estética, sendo apresentados nas páginas seguintes.

5.1.1. Princípios da avaliação heurística Uma avaliação heurística é feita com o objetivo de encontrar problemas de usabilidade no design de uma interface e caracteriza-se por ter um pequeno grupo de avaliadores examinando (individualmente) a interface e julgando se ela está de acordo com os princípios de usabilidade (as “heurísticas”) que serão apresentados posteriormente neste subcapítulo (NIELSEN, 1993). Apesar de descrita por Nielsen (Ibidem) como possuindo um pequeno grupo de avaliadores, nesta investigação, todavia, devido ao caráter individual do projeto e ao tempo hábil para a sua execução, as análises foram executadas somente pela autora. Ao longo deste subcapítulo, portanto, aplicou-se as análises levando em conta as direções apresentadas por Nielsen (1993). É necessário ressaltar que para tal estudioso, por mais que o processo possa ser executado por um único avaliador corre-se o risco de ele deixar passar a maioria dos problemas de usabilidade da interface. Segundo ele, quando a avaliação é realizada apenas por uma pessoa encontra-se uma média de 35% dos problemas de usabilidade das interfaces enquanto que com quinze avaliadores pode-se encontrar uma média de 95%. Por isso, ele recomenda que seja executada por no mínimo três avaliadores (capazes de encontrar uma média de 65% dos problemas). Ainda que se conheça esta

orientação, por conta do escopo desta investigação, tal etapa foi efetuada por uma pessoa. Sendo

assim,

durante

execução

das

avaliações

foram

documentados quaisquer apontamentos de forma escrita e ainda foram feitas capturas

tela

dos

problemas

encontrados

(capturas

que

serão

apresentadas juntamente às avaliações heurísticas de seus respectivos sites). Após executadas as análises os problemas descritos nas anotações foram distribuídos em níveis de gravidade para a composição do relatório escrito e para assim ser incorporado ao texto apresentado no subcapítulo que

contempla a documentação das avaliações. A vantagem de um relatório escrito é possuir um registro formal da avaliação, porém exige um esforço extra do avaliador além de precisar ser lido e somado ao restante dos resultados por um gestor de avaliação (NIELSEN, 1993). Ainda que as análises tenham sido executadas por uma pessoa só, esse foi o método que se considerou mais indicado para esta pesquisa – dentre os mencionados pelo autor. Inclusive pelo fato de o relatório escrito ser necessário para a composição da prática projetual resultante desta investigação. A sessão de avaliação implica que o avaliador passe pela interface várias vezes inspecionando elementos de diálogo e relacionando esses com

uma lista de princípios de usabilidade reconhecidos – as heurísticas – regras gerais que parecem descrever propriedades comuns de interfaces usáveis. Essa lista de heurísticas gerais é considerada para todos os elementos de diálogo. O avaliador também pode considerar quaisquer princípios de usabilidade adicionais ou resultados que possam ser relevantes a qualquer elemento de diálogo. Cada avaliador pode decidir por si como quer proceder com a avaliação da interface, mas uma recomendação comum é que eles passem pela interface pelo menos duas vezes com os seguintes objetivos: 1) com a intenção de sentir o ritmo da interação e do escopo geral do sistema; 2) para se concentrar em elementos específicos da interface enquanto aprende como eles se integram com o todo. Tal recomendação foi seguida durante a execução das avaliações da amostra selecionada para esta investigação – o que acarretou nas telas de criação da conta tomando um tempo maior do processo de análise, considerando que não seria possível voltar à página da criação de conta, uma vez que esta já teria sido criada. Como os avaliadores não usam o sistema para executar uma tarefa real, é possível executar uma avaliação heurística em interfaces que existam somente no papel e ainda não tenham sido implementadas, tornando possível usá-la no início do projeto. Tal aspecto permite, por exemplo, a aplicação da avaliação heurística no projeto prático resultante deste trabalho de conclusão

de curso, que não possui, no momento, previsão de implementação. A vantagem de usar o método da avaliação heurística foi ter uma lista de problemas de usabilidade das interfaces com referências aos princípios de usabilidade que foram violados pelo design em cada caso. Contudo,

uma

avaliação

heurística

não

provê

método

sistemático para solucionar os problemas de usabilidade ou um meio para avaliar a provável qualidade de qualquer redesign. No entanto, a avaliação heurística tem a intenção de explicar qualquer problema de usabilidade tendo como base princípios de usabilidade. Com isso, torna-se simples gerar um

design revisado de acordo com as diretrizes providas pelo que foi violado. A avaliação heurística é aplicada como um método de desconto da engenharia de usabilidade. Assim sendo, não garante resultados “perfeitos” ou mesmo encontrar todos os problemas de usabilidade de uma interface. Apresentadas as orientações e as particularidades que envolveram a execução das avaliações realizadas nesta investigação, a seguir são expostos uma breve descrição do perfil da avaliadora; o navegador utilizado para a realização das avaliações e os critérios que foram levados em consideração durante a realização destas.

5.1.2. As heurísticas É necessário ressaltar que a autora desta investigação que realizou as avaliações possui uma experiência com computadores e internet de quatorze anos e detém um entendimento básico de inglês. O navegador utilizado para acessar os sites no computador foi o Opera, uma vez que ele não possui as extensões que a autora costuma utilizar (extensões de navegador em muitos casos alteram a forma como o site é apresentado ao usuário. Bloqueadores de anúncios são um exemplo disso) e não possuir problemas de renderização. Para a execução das avaliações foram criadas novas contas mesmo em sites que a autora já utilizava, para ser possível avaliar as telas de criação de conta também. Dito isso, os critérios utilizados para a avaliação heurística, da amostra selecionada para esta pesquisa, foram “as dez heurísticas de Nielsen” disponibilizadas no site Nielsen Norman Group, quais sejam: 1) Visibilidade do status do sistema: O sistema deve sempre manter os usuários informados sobre o que está acontecendo através de feedback apropriado, em um tempo razoável. 2) Compatibilidade entre sistema e mundo real: O sistema deve utilizar a linguagem do usuário, com palavras, frases e conceitos familiares para ele, ao invés de termos específicos de sistemas. Seguir convenções do

mundo real, fazendo com que a informação apareça em uma ordem lógica e natural. 3) Controle e liberdade para o usuário: Estão relacionados à situação em que os usuários frequentemente escolhem as funções do sistema por engano e então necessitam de "uma saída de emergência” claramente definida para sair do estado não desejado sem ter que percorrer um longo diálogo, ou seja, é necessário suporte a undo e redo. 4) Consistência e padrões: Referem-se ao fato de que os usuários não deveriam ter acesso a diferentes situações, palavras ou ações

representando a mesma coisa. A interface deve ter convenções não-ambíguas. 5) Prevenção de erros: Os erros são as principais fontes de frustração, ineficiência e ineficácia durante a utilização do sistema. 6) Reconhecimento em lugar de lembrança: Tornar objetos, ações, opções visíveis e coerentes. O usuário não deve ter que lembrar informações de uma parte do diálogo para outra. Instruções para o uso do sistema devem estar visíveis ou facilmente acessíveis. 7) Flexibilidade e eficiência de uso: A ineficiência nas tarefas pode reduzir a eficácia do usuário e causar-lhes frustração. O sistema deve ser adequado tanto para usuários inexperientes quanto para usuários experientes.

8) Estética e design minimalista: Os diálogos não devem conter informações irrelevantes ou raramente necessárias. Cada unidade extra de informação em um diálogo compete com unidades relevantes e diminui sua visibilidade relativa. 9) Auxiliar os usuários a reconhecer, diagnosticar e recuperar erros: Mensagens de erro devem ser expressas em linguagem natural (sem códigos), indicando precisamente o erro e sugerindo uma solução. 10) Ajuda e documentação: Mesmo que seja melhor que o sistema possa ser usado sem documentação, pode ser necessário fornecer ajuda e documentação. Tais informações devem ser fáceis de encontrar, ser centradas na tarefa do usuário, listar passos concretos a serem seguidos e não ser muito grandes. A ajuda deve estar facilmente acessível e on-line. Os nove sites da amostra foram avaliados de acordo com tais critérios e a cada problema encontrado foi atribuído um grau de severidade sendo estes: 0 - Sem importância (não afeta a operação da interface); 1 Cosmético (não há necessidade imediata de solução); 2 – Simples – (problema de baixa prioridade (pode ser reparado); 3 – Grave – (problema de alta prioridade que deve ser reparado); 4 – Catastrófico – (muito grave, deve ser reparado o mais rápido possível).

Tais níveis de severidade foram atribuídos por Nielsen (1993) no intuito de estabelecer uma ordem para a resolução dos problemas das interfaces analisadas. Todavia, como para esta investigação se tratava de um meio de coleta de informações para um projeto de criação de uma nova interface e não de um redesign, tais níveis de severidade foram considerados somente no âmbito de gravidade do problema. Apresentadas as heurísticas, parte-se então para a documentação destas avaliações indicando os problemas encontrados em cada componente da amostra e expondo as possíveis soluções para que tais problemas não

100

viessem a se repetir no SRST projetado.

5.1.2.1. Documentação das avaliações Site: Cure World Cosplay

Endereço: http://worldcosplay.net/

Descrição: SRST com temática de portfólio cosplay. Permite a cosplayers,

cosmakers e fotógrafos exporem seu trabalho, adquirirem conexões, admiradores e ainda competir através do ranking. Total de heurísticas violadas: 4

Problemas encontrados: 7

Heurística violada: Consistência e padrões (4). O problema: O site é internacional e possui como idioma principal o inglês, todavia, mesmo que seja selecionado o idioma preferido há inconsistências de idioma por todo o site como, por exemplo, os idiomas se misturam em uma mesma página (ver Fig. 19, 20, 21, 22 e 23). Gravidade da violação: 3

101

102

Figura 19 – Inconsistência de idioma Fonte: Cure World Cosplay

Figura 20 – Inconsistência de idioma Fonte: Cure World Cosplay

103

104

Figura 21 – Inconsistência de idioma Fonte: Cure World Cosplay

105

Figura 22 – Inconsistência de idioma Fonte: Cure World Cosplay

106

Figura 23 – Inconsistência de idioma Fonte: Cure World Cosplay

O problema: No site há uma opção “announcements” dedicada a links de notícias sobre games; animes; séries e semelhantes. Porém, mesmo que o

idioma tenha sido selecionado todas as notícias, novamente, aparecem em japonês (ver Fig. 24 e 25 a seguir). Gravidade da violação: 3

107

Figura 24 – Inconsistência de idioma Fonte: Cure World Cosplay

108

Figura 25 – Inconsistência de idioma Fonte: Cure World Cosplay

O problema: Há inconsistência entre as janelas de cadastro e criação de conta do site. Ao acessar o site pela primeira vez, o usuário visualiza uma janela que o convida a se registrar. Tal janela exibe somente a opção de cadastro através de e-mail, enquanto que na mesma página (por trás da janela) é possível observar mais opções de cadastro (ver Fig. 26 e 27 a seguir). Gravidade da violação: 1

109

Figura 26 – Inconsistência de opções de cadastro Fonte: Cure World Cosplay

110 Figura 27 – Inconsistência de opções de cadastro Fonte: Cure World Cosplay

O problema: No dashboard vazio (porque a conta foi recém-criada) é mencionado o botão “avaliar” caso o usuário tenha gostado de alguma fotografia. Contudo, na página das fotografias o botão utilizado para tal função é o “curtir” (ver Fig. 28 e 29 a seguir). Gravidade da violação: 2

111

Figura 28 – Inconsistência de rótulo de botões Fonte: Cure World Cosplay

112

Figura 29 – Inconsistência de rótulo de botões Fonte: Cure World Cosplay

Heurística violada: Prevenção de erros (5). O problema: A opção de pesquisa do site coloca como opção padrão a procura por imagens. Acaso os resultados constem em outra categoria são automaticamente exibidos em outra aba não existindo, assim, opções de filtro de pesquisa. Isso pode ocasionar frustração no usuário por não encontrar o que pesquisou (ver Fig. 30 a seguir). Gravidade da violação: 3

Figura 30 – Falha na barra de pesquisa Fonte: Cure World Cosplay

Heurística violada: Consistência e padrões (4); Prevenção de erros (5); e Flexibilidade e eficiência de uso (7). O problema: O uso do termo dashboard ao invés de timeline ou newsfeed pode confundir tanto os usuários experientes como os inexperientes. Independentemente do uso da tradução trata-se de um rótulo que do ponto de vista desta pesquisa não é muito comum em sites de redes sociais. Foi considerado o fato de que talvez usuários que tenham mais afinidade com a língua inglesa não considerem o termo confuso. Entretanto, o site é voltado para público internacional, tornando isso um possível problema, pois apesar da possibilidade da falta de afinidade com a língua inglesa ser possivelmente um motivo para a confusão da autora desta pesquisa, assim como ela outros

113

usuários poderão ter o mesmo problema considerando que este site é voltado para um público internacional. Além disso, também não é autoexplicativo – sendo necessário que o usuário teste-o para saber o que de fato ele é. Além da dificuldade de compreensão da função ocorre ainda a ausência de prevenção de erros – tendo em vista que o usuário acaba por explorar a opção às cegas (ver Fig. 31 a seguir). Gravidade da violação: 3

114

115

Figura 31 â&#x20AC;&#x201C; Dashboard Fonte: Cure World Cosplay

Heurística violada: Estética e design minimalista (8). O problema: A página inicial contém muitos elementos (ver Fig. 32 a seguir). Gravidade da violação: 1

116

Figura 32 – Página inicial Fonte: Cure World Cosplay

Site: Cosplanner

Endereço: http://www.cosplanner.net/index.cfm

Descrição: Apesar de não se intitular como um site de rede social cosplay, apresenta funcionalidades para tal (perfil, conexões e newsfeed). Concentra-se no planejamento da confecção dos cosplays e o compartilhamento do processo. Este tornou-se o único SRST encontrado que se concentra no processo de criação e planejamento do cosplay (ao invés de apenas divulgar portfólio). Total de heurísticas violadas: 1

Problemas encontrados: 2

Heurística violada: Prevenção de erros (5) O problema: Ao pesquisar por conexões ou cosplays o site não sugere nomes ou correções. Sendo assim, o usuário deve fazer a navegação às cegas (ver Fig. 33 a seguir). Gravidade da violação: 2

117

118

Figura 33 – Barra de pesquisa Cosplanner Fonte: Cosplanner

O problema: Observou-se ainda que na função “pesquisar” ao invés de possuir o botão para iniciar a pesquisa do lado da caixa há, ao contrário, um botão de limpar – o que pode levar o usuário a se confundir e apagar o texto que escreveu na caixa de pesquisa. Para iniciar a pesquisa o usuário deve apertar o comando enter no teclado (ver Fig. 34 a seguir).

Gravidade da violação: 3

119 Figura 34 – Barra de pesquisa Cosplanner Fonte: Cosplanner

Site: Cosplay.com

Endereço: http://www.cosplay.com/

Descrição: Possui a temática de portfólio cosplay e prioriza a divulgação das fotografias. Total de heurísticas violadas: 3

Problemas encontrados: 3

Heurística violada: Visibilidade do status do sistema (1). O problema: Ao pesquisar as fotografias de um cosplayer ou cosplay não houve algo que indicasse o número total de páginas, o que faz com que o usuário não saiba quanto falta para chegar ao fim dos resultados (ver Fig. 35 e

120

36 a seguir). Gravidade da violação: 2

Figura 35 – Páginas sem fim Fonte: Cosplay.com

Figura 36 – Páginas sem fim Fonte: Cosplay.com

Heurística violada: Visibilidade do status do sistema (1); e Auxiliar os usuários

121

a reconhecer, diagnosticar e recuperar erros (9). O problema: O registro de usuários está suspenso momentaneamente, mas não há nenhuma explicação do motivo ou previsão de reativação desta função (ver Fig. 37 a seguir). Gravidade da violação: 2

122

Figura 37 – Registro de usuários suspenso Fonte: Cosplay.com

Heurística violada: Estética e design minimalista (8). O problema: A página inicial do site contém muitos elementos. A princípio foi constatado que o problema seria pouco espaço para “respiro” da página, mas posteriormente notou-se que o que causava essa sensação era o fato de

grande parte dos elementos contidos na página serem anúncios e não conteúdo. Apesar de relacionados ao tema, e provavelmente necessários para a manutenção do site, tais anúncios acabam por somar elementos desnecessários à página. Aparentam, por fim, terem mais “peso” visual do que o próprio conteúdo (ver Fig. 38 a seguir). Gravidade da violação: 2

123

124

Figura 38 â&#x20AC;&#x201C; Cosplay.com Fonte: Cosplay.com

Site: Cosplayers.Global

Endereço: https://www.cosplayers.global/

Descrição: Com o foco em portfólio cosplay este é um SRST internacional, lançado em torno de abril de 2017, contendo suporte para dez idiomas diferentes. Algumas funções ainda não foram disponibilizadas e o acervo de personagens não contempla muitas séries. Total de heurísticas violadas: 4

Problemas encontrados: 3

Heurística violada: Visibilidade do status do sistema (1); e Flexibilidade e eficiência de uso (7). O problema: Possui uma funcionalidade que nomeia de “Mapa de calor”, a qual mostra os países com maior número de usuários cadastrados no site. O mapa, todavia, não possui nenhuma legenda (ver Fig. 39). Gravidade da violação: 2

125

126

Figura 39 – Mapa de calor Fonte: Cosplayers.Global

O problema: A mesma funcionalidade do “Mapa de calor” (Fig. 39) possui um efeito de mudar o tom da cor do país ao passar o mouse dando a entender que ali é possível clicar. Contudo, quando o usuário clica não acontece nada. Gravidade da violação: 2 Heurística violada: Compatibilidade entre o sistema e o mundo real (2); Consistência e padrões (4); e Flexibilidade e eficiência de uso (7). O problema: Ao clicar na opção “publicar” ou na opção “novo” não acontece

nada. Apesar de ambas opções serem clicáveis elas apenas atualizam a página. Para efetuar uma publicação é necessário clicar em um sinal de soma presente no canto inferior direito da página (ver Fig. 40). Gravidade da violação: 3

127

Figura 40 – Publicar Fonte: Cosplayers.Global

Site: Gaia Online

Endereço: https://www.gaiaonline.com/

Descrição: É um SRST com temática de animes; séries e games que permite, além da criação do perfil, a concepção de um personagem. O usuário, por sua vez, poderá executar missões dentro do site para conseguir meios de customizar seu personagem. Percebeu-se que trata-se de uma junção de site de rede social, fórum e jogo. Total de heurísticas violadas: 1

Problemas encontrados: 1

Heurística violada: Estética e design minimalista (8).

128

O problema: O site como um todo possui muitas cores e vários elementos de diálogo, tornando-o um tanto complexo de se compreender (ver Fig. 41 e 42). Gravidade da violação: 3

129

Figura 41 â&#x20AC;&#x201C; Cadastro Gaia Online Fonte: Gaia Online

130

Figura 42 – Página inicial Gaia Online Fonte: Gaia Online

Site: My Anime List

Endereço: https://myanimelist.net/

Descrição: O site se concentra em compartilhar informações e críticas para

animes e mangás permitindo, ainda, que o usuário monte sua lista de animes e mangás preferidos organizando indicações para os demais usuários. Além disso, também é possível divulgar resenhas sobre o que já leu ou assistiu. Total de heurísticas violadas: 1

Problemas encontrados: 1

Heurística violada: Estética e design minimalista (8). O problema: As partes verticalmente centrais do site possuem aglomeração de informação (ver Fig. 43 e 44 a seguir). Gravidade da violação: 2

131

132

Figura 43 – Página inicial My Anime List Fonte: My Anime List

133

Figura 44 – Visualização de Perfil My Anime List Fonte: My Anime List

Site: Skoob

Endereço: https://www.skoob.com.br/

Descrição: Função semelhante ao My Anime List anteriormente analisado, só que voltado para livros. Total de heurísticas violadas: 2

Problemas encontrados: 2

Heurística violada: Consistência e padrões (4). O problema: O número de livros apresentados pelo menu lateral e pelo topo da página na estante são inconsistentes (ver Fig. 45). Gravidade da violação: 2

134

Figura 45 – Inconsistência de livros na estante Fonte: Skoob

Heurística violada: Estética e design minimalista (8). O problema: Página dedicada às informações sobre os livros. Verifica-se que possui muitos elementos (ver Fig. 46 a seguir). Gravidade da violação: 2

135

Figura 46 – Informações de livros Fonte: Skoob

Site: Filmow

Endereço: https://filmow.com/

Descrição: Temática muito semelhante ao do My Anime List e Skoob. Neste, contudo, o foco se dá em filmes e séries. Como mencionado no capítulo dois desta investigação esta não foi a primeira vez que a autora estudou este site. O Filmow foi o primeiro componente a fazer parte da amostra e a auxiliar na formação da base teórica sobre SRST apresentada na fundamentação teórica desta investigação. Total de heurísticas violadas: 3

136

Problemas encontrados: 2

Heurística violada: Visibilidade do status do sistema (1); e Flexibilidade e eficiência de uso (7). O problema: A função de importar amigos não funciona e nem há algum sinal ou mensagem após o clique. O usuário é redirecionado para a página inicial sem qualquer sinal de execução ou erro da função (ver Fig. 47 a seguir). Gravidade da violação: 3

137

Figura 47 – Erro da função importar amigos Fonte: Filmow

Heurística violada: Estética e design minimalista (8). O problema: Todo o site mantém muitos elementos em uma única página (ver

Fig. 48 e 49 a seguir). Gravidade da violação: 2

138

Figura 48 – Pesquisa de série e página de série Fonte: Filmow

139

Figura 49 – Página inicial Filmow Fonte: Filmow

Site: Flickr

Endereço: https://www.flickr.com/

Descrição: É um SRST concentrado em compartilhamento e portfólio de fotografias e vídeos. Total de heurísticas violadas: 2

Problemas encontrados: 2

Heurística violada: Visibilidade do status do sistema (1); e Flexibilidade e eficiência de uso (7). O problema: A função de importar os amigos do Facebook acusa que a senha está incorreta (mesmo depois de o login ter sido efetuado sem problemas).

140

Isso é possível verificar na Fig. 50. Gravidade da violação: 3

Figura 50 – Importar amigos do Facebook Fonte: Flickr

O problema: Também não funciona importar os amigos pela conta do google ou pelo e-mail cadastrado (ver Fig. 51). Gravidade da violação: 3

141

Figura 51 – Importar amigos da conta do google ou e-mail Fonte: Flickr

A partir da execução das avaliações heurísticas apresentadas foi possível observar que a grande maioria dos componentes da amostra tinha problemas em manter uma estética e design minimalista (heurística nº 8) especialmente em suas páginas iniciais. Outros problemas encontrados foram: visibilidade e status do sistema (heurística nº 1), consistência e padrões

(heurística nº 4), prevenção de erros (heurística nº 5), flexibilidade e eficiência de uso (heurística nº 7) e auxiliar os usuários a reconhecer, diagnosticar e recuperar erros (heurística nº 9). Uma vez que esses foram os problemas de usabilidade mais comuns encontrados na amostra foi necessária uma maior atenção para esses aspectos – em especial ao desenvolver a prática projetual proposta por esta investigação que será exposta posteriormente. É necessário acrescentar que apesar de as análises não terem sido executadas em outros dispositivos, tais como smartphone ou tablet, a autora tem ciência de que o SRST Cure World Cosplay possui uma versão do site

142

diferente para dispositivos móveis (ver Fig. 52). A versão é como se fosse um

site diferente, tendo pouca consistência com a versão para computadores de mesa, o que caracteriza violação a heurística nº 4.

143

Figura 52 – Página inicial do site Cure World Cosplay na versão mobile Fonte: Cure World Cosplay

Considerando tal problema estabeleceu-se que o SRST criado por meio desta pesquisa deveria utilizar-se de design responsivo. Isso porque o

design responsivo usa de um grid flexível para adaptar-se aos vários dispositivos existentes a fim de manter a consistência entre eles (MARCOTTE, 2011). Com relação ao “adaptar-se” aos vários dispositivos, considera-se um mesmo site cujas informações adaptam suas disposições na página de acordo com o tamanho da tela. Tal destaque fez-se necessário, pois mesmo o site

CureWorldCosplay, que foi apresentado como exemplo de problema de consistência entre dispositivos, possui uma versão mobile. Este tipo de

144

adaptação trata-se de realizar um outro projeto de um mesmo site e não o mesmo site com seu conteúdo adaptando-se à tela. O mesmo vale para aplicativos móveis feitos como adaptação para sites desktop, uma vez que não se trata do site se adaptando, mas sim de uma versão daquele site projetada no formato de aplicativo. Entretanto, como design responsivo pede pelo menos telas previstas para mobile, tablet e desktop a fim de atender as telas de diversos dispositivos e, devido à profundidade e quantidade de páginas de um site de rede social, foi decidido que seriam feitas somente as telas correspondentes às funções consideradas como principais do site.

Levando em consideração que a maior parte da amostra apresentou problemas com a quantidade de elementos nas páginas e a necessidade de um design responsivo para manter a consistência entre os dispositivos, uma solução encontrada foi utilizar o content first. O que implicou em filtrar o conteúdo mínimo que seria necessário e a partir desse conteúdo projetar a interface. É necessário destacar que o conteúdo para qual se atenta o content

first pode ser tanto a informação escrita como as funcionalidades, os botões, as imagens, o vídeo, o áudio, etc (DESIGNMODO, 2018). Dadas as principais técnicas selecionadas para evitar, no SRST projetado, a repetição dos problemas encontrados na amostra, partiu-se então para as práticas encontradas na amostra que foram utilizadas como referência ou mesmo reutilizadas no design do Cosmake.net. 5.1.3. Benchmarking Um benchmarking é descrito a partir de Spendolini (1993, p. 10

apud COSTA et al. 2007, p. 3) como “um processo contínuo e sistemático para avaliar produtos, serviços e processos de trabalho de organizações que são reconhecidas como representantes das melhores práticas”. Tal aspecto sugere o estudo das melhores práticas da área em questão para se tornarem referências de aprendizado e melhorias. No caso desta investigação, o site

145

Flickr, contido na amostra, foi a maior referência em termos estéticos. Isso se deu por este ter sido considerado pela autora desta pesquisa como um dos

sites melhor resolvido sem excesso de informação e fácil de usar. Além disso, também por ser visualmente agradável e por possuir uma adaptação satisfatória para aplicativo móvel. 5.1.3.1 Execução do benchmarking O principal objetivo da realização do benchmarking para esta investigação foi, além de obter boas referências em termos de estética,

146

também observar os quesitos estruturais. Os sites que compuseram o

benchmarking consistiram na mesma amostra da avaliação heurística, com o enfoque direcionado apenas para as práticas que a autora desta investigação considerou como satisfatórias. Para sistematizá-lo em aspectos estruturais foram consideradas duas categorias de usuário, quais sejam: um usuário ainda não cadastrado no

site e um usuário já cadastrado. Isso ocorreu com a intenção de visualizar as telas que seriam indispensáveis de serem analisadas no benchmarking e as que seriam essenciais para um SRST. A lista de telas que se fizeram necessárias seguindo o critério estabelecido foram: Usuário não cadastrado>

conta> login> tour> início> concluir perfil; Usuário já cadastrado> página inicial> login> início (perfil, conexões e linha do tempo)> perfil> tópicos que participa> tutoriais. A partir dessa lista de páginas foi construída a estrutura básica do SRST observando se seriam necessárias mais páginas para suprir as funcionalidades do SRST. O benchmarking foi feito começando pela página inicial. Nesse caso considerou-se a página que é exibida ao usuário quando ele entra no site mesmo sem estar logado. A respeito dessa página os componentes da amostra se dividem em: os que possuíam uma página inicial “limpa” – não apresenta reais conteúdos além de no máximo uma breve introdução ao site e seu tema - com os formulários para login e cadastro em destaque na página (Fig. 53); e os que abriam direto na página de início – por página de início aqui entende-se como aquela que disponibiliza acesso ao conteúdo – com o

newsfeed apresentado ao usuário por padrão e por um convite de cadastro ou login em algum lugar da tela ou janela pop-up (Fig. 54).

147

148

Figura 53 â&#x20AC;&#x201C; Tela inicial do Flickr sem login Fonte: Flickr

149

Figura 54 â&#x20AC;&#x201C; Tela inicial do Skoob sem login Fonte: Skoob

Optou-se pelo modelo apresentado na Fig. 53, por possuir menos elementos e permitir que o usuário não precise pensar no que fazer e onde deve ou pode clicar. Tal ideia parte do que é exposto por Krug (2008) que considera ser a característica mais importante para se assegurar que um site seja fácil de usar, qual seja: “Não me faça pensar!” Para ele uma página deve ser evidente e autoexplicativa, permitindo ao usuário entender o que ela é e como usá-la sem precisar de esforço para isso. Durante a execução das avaliações heurísticas foi considerada a possibilidade tanto de incluir um tour pela interface como também de

150

acrescentar um vídeo tutorial na página inicial. Isso porque muitos dos sites da amostra possuíam demasiados elementos, como no caso do “Gaia Online”, no qual o usuário pode realmente se perder devido à quantidade de elementos e funcionalidades do site (isso de fato ocorreu durante a execução das avaliações desse site). Porém, se a quantidade de elementos e funcionalidades forem evidentes, ou pelo menos que exija o mínimo de raciocínio, um tutorial não será necessário. Além disso, cabe destacar que tanto um tour quanto um vídeo tutorial podem ser considerados chatos e, mesmo que sejam deixados à disposição do usuário, não há garantia de que ele não vá ignorá-los e sair explorando o site às cegas.

A principal coisa que você precisa saber sobre instruções é que ninguém irá lê-las – pelo menos não até depois de repetidas tentativas fracassadas de aprender sozinho e, mesmo então, se as instruções forem prolixas, as chances dos usuários encontrarem as informações que precisam são bastante baixas. (KRUG, 2008, p. 47).

Por isso, o ideal é focar em projetar algo que não precise de instruções para ser utilizado. Prosseguindo com os testes, a seguir a atenção foi voltada para as opções de registrar uma nova conta ou de entrar em uma conta existente. Em todos os casos da amostra tais opções estavam presentes nas páginas se o usuário não estivesse logado. Além disso, na maioria dos casos foi possível visualizar as páginas internas do site. Caso o usuário tivesse chegado a partir de um link externo - tal como uma pesquisa do Google, por exemplo – o cadastro seria obrigatório somente para interagir com os outros usuários do site e usufruir de demais funcionalidades. Entretanto, nos casos do Cosplanner e do Gaia Online, não é permitido que o usuário navegue através dos conteúdos dos sites a não ser que esteja logado. Por isso, ao projetar o SRST Cosmake.net foi considerado que muitos usuários poderiam chegar nele a partir do Google, uma vez que os conteúdos principais do site serão tutoriais publicados pelos usuários. É

151

comum que pessoas acessem o Google para buscar alguma informação, por isso acredita-se que muitos usuários poderiam recorrer ao Google para tirar suas dúvidas ou buscar como executar determinada parte de um traje ou acessório e com isso chegariam no Cosmake.net. Assim, foi estabelecido que seria seguido o formato demonstrado em grande parte da amostra e o cadastro seria requerido somente se o usuário resolvesse interagir com outros usuários

registrados

site

usufruindo,

assim,

funcionalidades

relacionadas. Ainda com relação ao cadastro de uma nova conta cabe destacar

152

que nem todos os componentes da amostra necessitaram de um e-mail para a confirmação da conta. Apenas o Flickr, o My Anime List, o Gaia Online e o

Cosplayers.Global enviaram um e-mail notificando a criação da conta. No caso do Flickr o usuário recebe ainda uma conta do Yahoo. Apesar de nem todos os componentes da amostra utilizarem este recurso optou-se por utilizá-lo considerando a necessidade de dar um feedback para o usuário informando que a sua conta foi realmente criada. Nenhum dos sites da amostra disponibilizou um “tour” pela interface – mesmo que simples – para introduzir a mesma ao usuário. Todavia, a análise heurística executada anteriormente revelou que um dos problemas mais recorrentes entre os sites da amostra foi o excesso de elementos no

design da interface ou apenas de algumas páginas desta. Esse fato que por si só deveria justificar uma apresentação da interface de acordo com o nível de gravidade do problema. De todos os sites analisados essa apresentação inicial se considerou indispensável na interface do Gaia Online, devido à sua grande quantidade de elementos e funções. Tal site carrega características semelhantes a um jogo MMORPG (Massive Multiplayer Online Role Playing

Game) que corresponde, segundo o site Significados42, como uma junção dos formatos MMO (Massive Multiplayer Online, multijogadores massivos online, na tradução literal) e RPG (Role Playing Game, jogo de interpretação de papel/função43, em tradução literal). Baseia-se, portanto, em jogos com vários jogadores simultâneos tal como o formato MMO e contendo o aspecto exploratório do RPG – no qual não há uma ordem cronológica ou ações prédefinidas. O jogador é livre para explorar todo o mundo virtual do game, fazer missões alternativas e ir personalizando o seu personagem ao longo do progresso do jogo. No entanto, é necessário destacar que de acordo com a experiência da autora desta investigação com estes tipos de jogos eles geralmente possuem um personagem nativo do jogo que introduz a história e Disponível em: https://www.significados.com.br/mmo/, acesso em 21 de setembro de 2018. Disponível em: http://www.nerdmaldito.com/2009/07/diferencas-entre-mmo-rpgmultiplayer-e.html, acesso em 21 de setembro de 2018. 42 43

153

a interface para o jogador – o que o Gaia Online não possui. Tornando inválida, assim, a possível justificativa de gamefication para os obstáculos encontrados ao explorar o site. Entende-se por gamefication ou gameficação a técnica de “utilizar de mecânicas utilizadas em jogos, estéticas e pensamento de jogos para engajar pessoas, motivar ações, promover o aprendizado e solucionar problemas” (KAPP et all, 2014)44. Partindo então para a página de “Início” foi possível observar que a grande maioria concentra o newsfeed na coluna central da página contendo as demais informações nas laterais e opções relacionadas ao perfil situadas no

154

cabeçalho. Ao mesmo tempo, percebeu-se que as informações e opções de perfil em todos os componentes da amostra se localizam no cabeçalho e geralmente à direita da página em questão. Foi também possível observar que as conexões não estão presentes na página de início em nenhum dos sites da amostra. A partir de tais constatações foi montada uma convenção para a estrutura básica que utilize as melhores soluções presentes nos sites da amostra (Fig. 55):

Tradução minha para “Gamification is using game-based mechanics, aesthetics, and gamethinking to engage people, motivate action, promote learning, and solve problems.” (KAPP; BLAIR; MESCH, 2014) 44

155

Figura 55 – Convenção estrutural de página inicial Fonte: Dados da pesquisa

Tal convenção estrutural foi estabelecida tendo em vista que um dos focos deste benchmarking foi observar aspectos estruturais dos

componentes da amostra, por isso é conveniente destacar padrões que se repetem a fim de estabelecer possíveis convenções para sites de rede social. Krug (2008) apresenta algumas convenções para sites da web, mas elas acabam por não se aplicar totalmente a sites de rede social devido à ausência dos componentes que caracterizam um site de rede social tais como: perfil de usuário, newsfeed, conexões (RECUERO, 2009) que já foram mencionados nesta investigação. Já que Krug (2008) não apresenta convenções para tais elementos essenciais para um site de rede social, estas foram atribuídas a partir do que

156

foi observado nos sites da amostra (como foi mostrado na Fig. 55) em termos de disposição do newsfeed, informações de perfil e conexões nas páginas do

site. Isso também se deu na estrutura de páginas que o compõe (como, por exemplo, a necessidade de cadastro e quais páginas são indispensáveis neste processo). convenções só se tornam convenções se funcionarem. Convenções bem usadas facilitam que os usuários possam ir de um lugar para outro sem ter muito trabalho descobrindo como as coisas funcionam. (KRUG, 2008, p. 35)

Assim sendo, foi decidido tomar tais aspectos de posicionamento como convenções, para que o usuário consiga compreender cada elemento

de forma mais simples e sem precisar deliberar um esforço extra para tal. É necessário destacar que na convenção estrutural básica (ver Fig. 55) são encontradas algumas das convenções de navegação web apresentadas por Krug (2008) tais como: navegação local e global; a pesquisa e a versão em texto pequeno. Estas informações são exemplificadas pelo autor na figura a seguir:

157

Figura 56 – Convenções de navegação web Fonte: Krug (2008, p. 61)

A respeito das características do newsfeed apresentado por cada

site analisado notou-se que os sites tentaram outros métodos além de apenas apresentar uma lista. O Flickr e o Cosplayers.Global, por exemplo, apresentam as publicações em forma de mosaico de imagens no feed de notícias (Fig. 57, 58 e 59).

158

Figura 57 – Feed do site Flickr Fonte: Flickr

Figura 58 – Feed do site Cosplayers.Global Fonte: Cosplayers.Global

Figura 59 – Feed do site Cosplayers.Global com usuário logado Fonte: Cosplayers.Global

159

O Filmow apresenta o feed quando o usuário clica para visualizar seu próprio perfil – ao invés de apresentá-lo na homepage. Por isso, é necessário que o usuário clique em “perfil” e depois em “atividades” para ver o

feed de notícias (Fig. 60). O Skoob tem uma dinâmica semelhante, mas para visualizar o feed basta clicar em “perfil” (Fig. 61). O Cosplanner também apresenta uma dinâmica diferente, mas ao clicar no logotipo no canto superior já estando logado o usuário pode ver as informações da sua rede de conexões de acordo com as classificações disponibilizadas pelo Cosplanner (Fig. 62).

160

161

Figura 60 â&#x20AC;&#x201C; Feed do site Filmow Fonte: Filmow

162

Figura 61 â&#x20AC;&#x201C; Feed do site Skoob Fonte: Skoob

Figura 62 – Feed do site Cosplanner Fonte: Cosplanner

Dando continuidade, a seguir o usuário tem a opção de página do perfil, suas edições e customizações. Nesse caso, é diferente para cada componente da amostra. Todavia, ao acessar a página de perfil, as credenciais de perfil que são apresentadas em outras páginas do lado direito nesta são expostas com um tamanho maior e do lado esquerdo da tela – o que também é possível observar nas Figuras 59, 60, 61 e 62. As opções de edição e customização são comumente apresentas por meio de formulários

163

(vide o exemplo do site Skoob na Fig. 63), tal como é comum na criação de uma nova conta nos sites.

164

Figura 63 – Tela de edição perfil do site Skoob Fonte: Skoob

As conexões que não são exibidas nas páginas de início acabam por serem apresentadas ao visitar o próprio perfil (Fig. 64 e 65). Ao clicar para visualizar a página em questão é vista a exibição das conexões em forma de

uma lista de miniaturas, geralmente apresentando a imagem que cada um selecionou para o perfil bem como o nome de usuário – possivelmente acrescentando outras informações que o site costume apresentar. Um exemplo

seriam

sites

Cure

World

Cosplay,

Cosplay.com

Cosplayers.Global que apresentam também os países uma vez que são sites internacionais (ver Fig. 66).

165

Figura 64 – Página de perfil do CureWorldCosplay Fonte: CureWorldCosplay

166

Figura 65 – Página de perfil do CureWorldCosplay Fonte: CureWorldCosplay

Figura 66 – Página de conexões do CureWorldCosplay Fonte: CureWorldCosplay

Posteriormente foi percebida a necessidade de referências para projetar as telas mobile, as quais foram em maior parte destacadas do aplicativo móvel do Flickr e da visualização do site em dispositivos móveis. Com isso, foi possível notar uma grande redução do uso de palavras nos rótulos do menu de navegação global (Fig. 67) e o uso do movimento de slide (deslizar em tradução literal) para navegar horizontalmente entre as opções desejadas.

167

Figura 67 – Página de início do aplicativo do Flickr Fonte: Flickr

Além do exposto, também foi percebido que diferentemente do que Krug (2008) considera comum em uma navegação na web, não há uso do logotipo do Flickr em nenhum lugar dentro do aplicativo – ou mesmo no título de página. Para o autor isso é uma convenção necessária, pois: A identificação do site ou o seu logotipo é como o nome do prédio para um Website. Na Sears, eu só preciso ver um nome na entrada. Assim que estiver dentro, eu sei que ainda estou na Sears até que saia. Contudo, na Web – onde o meio principal de viagem é o teletransporte – eu preciso vê-lo em todas as páginas. Da mesma forma que esperamos ver o nome do prédio em cima da sua entrada, também esperamos ver a identificação do site no topo da página – geralmente no (ou pelo menos próximo do) canto superior esquerdo45 (KRUG, 2008, p. 63)

168

Essa informação foi levada em consideração no momento de projetar nesta pesquisa, uma vez que torna necessária tal identificação para que o usuário saiba em qual site está navegando. Contudo, no caso analisado, presumiu-se que a ausência de tal convenção poderia ser justificada pelo fato de se tratar de um aplicativo e não da visualização do site – considerando que as chances do usuário clicar em algo que o redirecione para fora do aplicativo são consideravelmente menores do que em um site. Como é possível observar na Fig. 68 o site mantém esta convenção contando com a presença do 45

O autor destacou em nota de rodapé em seu livro que esta posição possivelmente se aplique apenas em páginas web escritas para línguas que são lidas da esquerda para direita.

logotipo do Flickr no topo da página. No entanto, este aparentou não se adaptar muito bem a dispositivos móveis. Concluiu-se, assim, que as opções de navegação global não cabem inteiramente na tela e as opções de interação com as publicações do feed (tais como favoritar imagem, comentar e compartilhar) aparecem deslocadas.

169

Figura 68 – Página de início do site do Flickr aberta no smartphone Fonte: Flickr

Como a visualização do site não apresentou uma performance tão boa nos dispositivos móveis decidiu-se tomar o aplicativo como referência principal, já que este mostrou um desempenho melhor. Outro ponto em relação ao aplicativo que se sentiu necessidade de destacar foi a barra de pesquisa. Esta permanece oculta na página de início, ficando sinalizada apenas pelo ícone de uma lupa (Fig. 67). A barra se revela caso o usuário clique ou deslize a tela para a opção de pesquisa, onde os filtros de busca são exibidos somente quando o usuário clica na barra para digitar (Fig. 69).

170

171

Figura 69 – Pesquisa no aplicativo do Flickr Fonte: Flickr

Nesta mesma figura ainda é possível verificar uso de cor e de uma espécie de sublinhado para indicar ao usuário onde ele se encontra dentro do aplicativo. Uma das formas através das quais a navegação pode contrabalancear o sentimento de ‘perdido no espaço’ inerente à Web

é me mostrando onde estou em um esquema da mesma forma que um indicador ‘Você está aqui’ no mapa de um shopping center – ou um parque nacional. Na Web, isto é feito destacando-se minha localização corrente em barras, listas ou menus navegacionais que apareçam na página. (KRUG, 2008, p.74-75)

Conclui-se aqui a exposição das melhores ou mais interessantes práticas presentes na amostra. Parte-se, então, para a síntese do que foi estabelecido para ser usado no projeto. 5.1.3.2. Considerações finais referentes ao benchmarking

172

A sistematização do benchmarking acabou por deixá-lo bem reduzido, levando em conta a atenção em componentes específicos que seriam aplicados à prática. Todavia, devido ao caráter diferenciado do projeto, há algumas páginas e funções que foram percebidas necessárias e não se encontravam nos sites que compunham a amostra, tais como: os tópicos em que o usuário participa (de tutoriais no caso); e a página destinada a exibição de um tutorial e seu respectivo passo-a-passo. As páginas que realmente compõe o SRST projetado serão apresentadas nas etapas seguintes. Um aspecto que foi possível observar é que, independentemente de possuírem a opção de os usuários de comunicarem através de mensagens, elas aparentam não ser o real foco do site e isso se repetiu em todos os

componentes da amostra. Aspecto que possivelmente diferencia SRST de SRSPG é que, pelo menos nos casos analisados neste trabalho, o tema é mais enfatizado do que a interação social em si e as conexões acabam se tornando meios para contribuir para o desenvolvimento de conteúdo em torno deste único tema. O que acaba por reforçar o exemplo mencionado no capítulo 2.2 deste trabalho, situação na qual possivelmente não só as distrações existentes em SRSPG influenciem de forma negativa na abordagem de temas específicos (MOR, 2015), como também o próprio objetivo e ou foco desses sites seja diferente. Acredita-se, com isso, que enquanto SRSPG parece instigar maior interação entre os usuários, os SRST aparentam priorizar a alimentação do tema de concentração da rede. Por isso, por mais que tais constatações não fossem esperadas a partir do benchmarking, sentiu-se a necessidade de destacar o que fora percebido nesta etapa da investigação. Levando em conta o que foi observado no benchmarking apresentado, foi decidido que, no projeto em questão, seria mantida a ideia de página inicial “limpa” com a opção de login e cadastro em destaque. Também definiu-se que seria mantida a possibilidade de o usuário visitar e navegar o

site mesmo sem estar logado – e caso venha acessar a página a partir de link externo – existirá uma sugestão de login e de cadastro no topo da página. Em função de se ter observado que a grande maioria dos sites da amostra

173

apresentava muitos elementos na página inicial foi decidido apresentar o feed de forma mais simplificada. Além disso, a fim de facilitar o entendimento do usuário para com a interface, também foram utilizadas algumas convenções comuns em sites da web apresentadas por Krug (2008) somadas às que foram percebidas durante o benchmarking no que se refere ao posicionamento do perfil, newsfeed e as conexões. Posteriormente serão indicadas quais foram selecionadas e como tais convenções foram aplicadas. No que diz respeito às referências advindas do aplicativo móvel do

Flickr, foi estabelecido que se manteriam a forma de navegação simplificada

174

em ícones; o layout básico da página inicial e o formato da barra de pesquisa com seus respectivos filtros. Também foi definido manter a ideia do uso de cores e do sublinhado nos indicadores de localização, contudo considerou necessário manter uma forma/elemento presente em todas as páginas – para servir como identificação do site. 5.1.4. O que se quer deste produto? - Os objetivos do produto Para Garrett (2011) a importância da definição dos objetivos se dá para garantir que os envolvidos no processo de desenvolvimento do produto tenham um mesmo entendimento sobre ele deixando claro o que ele realmente faz. Dentro de uma equipe a definição do objetivo evita que cada um dos

envolvidos tenha uma visão diferente do que o produto realmente é ou faz. No entanto, devido ao caráter individual desta pesquisa, os objetivos serviram exclusivamente para deixar claro o que é o produto e estruturar o projeto em torno dele, respondendo a questão: “o que se quer deste produto?” mencionada anteriormente. O produto em questão e o principal objetivo desta prática projetual eram apresentar uma proposta de interface de SRST que permitisse, em um único lugar, o compartilhamento de informações de qualidade sobre a confecção de cosplays. Para Garrett (2011), os objetivos especificam como avançar os objetivos da organização e como isso ajuda a encontrar as necessidades dos usuários. Tentando também estabelecer um equilíbrio entre ser muito específico ou muito geral, para evitar ir cegamente atrás de soluções enquanto ainda não se conhece totalmente os problemas. Para ele a melhor forma de evitar isso é estabelecer claramente as condições para o sucesso, sem definir estritamente o caminho. Assim, definiu-se os objetivos como: 1) criar um sistema que permita aos cosmakers compartilharem seu conhecimento sobre confecção de cosplays – seus tutoriais –, além de informações sobre materiais; e 2) incentivar a produção de conteúdo de qualidade e uma interação saudável

175

entre os usuários a partir da implicação de um sistema de reputação, com base nas avaliações que as publicações dos tutoriais receberem. 5.1.5. O que os usuários querem deste produto? - As Necessidades do Usuário A segunda questão que Garrett (2011) usa como norteadora para trabalhar o plano da estratégia implica no conhecimento do usuário e suas necessidades e expectativas com relação ao produto. A principal ferramenta para a visualização desses aspectos foi a construção de personas, que

176

segundo Garrett (2011, p.49)46: Você pode fazer seu usuário mais real transformando ele em personas (algumas vezes chamadas de modelos de usuário ou perfil de usuário). Uma persona é um personagem fictício construído para representar as necessidades de um grupo inteiro de usuários reais. Colocando rosto e nome nos pequenos dados fragmentados adquiridos através de pesquisa de usuário e trabalho de segmentação, personas podem ajudar a assegurar que você mantenha os usuários em mente durante o processo de design.

Tradução minha para “You can make your user more real by turning them into personas (sometimes called user models or user profiles). A persona is a fictional character constructed to represent the needs of a whole range of real users. By putting a face and name on the disconnected bits of data from your user research and segmentation work, personas can help ensure that you keep the users in mind during the design process” (GARRETT, 2011, p. 49). 46

É necessário destacar que as personas definidas foram inteiramente criadas e ilustradas pela autora desta investigação e inspiradas em pessoas que fazem ou fizeram alguma vez parte do grupo de contato da mesma, tendo sido construídas com o objetivo de abordar de forma ampla alguns dos perfis encontrados no meio cosplay. No meio não há requisitos de idade, gênero, aparência ou interesses específicos, o que acaba por gerar um público possivelmente muito maior do que as personas aqui definidas puderam contemplar. Contudo, essa metodologia serve justamente para dividir o público em segmentos e acredita-se ter concretizado isso. Além disso, optou-se por desenhar cada uma das personas seguindo uma estética semelhante à utilizada em animes e mangás, pois apesar do cosplay sofrer influência de várias áreas da cultura pop estas são as que mais influenciam os cosplays da autora desta investigação.

177

5.1.5.1. Personas Nome: Helena Idade: 35 anos Pseudônimo

apelido:

Hinako

Senshi Helena é pedagoga, pratica

cosplay como hobby e gosta muito de tendências

moda

origem

japonesa – ou que façam referência

178

aos animes e séries que ela admira. Usa Hinako Senshi como pseudônimo, sendo Hinako um nome comumente apresentado em animes e Senshi uma referência ao seu anime favorito: Sailor Moon.

grande

parte

Hinako

compra seus trajes e acessórios ao invés de fazer ela mesma, no entanto a possibilidade de encontrar à venda, ou Figura 70 – Persona 1: Helena Fonte: Dados da autora

alguém que confeccione, foram

empecilhos que incentivaram-na a tentar aprender por si mesma. Ela tambĂŠm considerou que hĂĄ um melhor custo-benefĂcio desta maneira e por isso recorreu ao Cosmake.net.

179

Nome: Sérgio Idade: 54 anos Pseudônimo ou apelido: Wolverine Sérgio

trabalha

como

atendente de uma ferragem na cidade onde mora e pratica cosplay como um

hobby. Sua atenção é mais voltada a séries e filmes de super heróis como, por exemplo, os Vingadores e os X-

180

Men. Sérgio recebeu o apelido de Wolverine no meio cosplay, pois esse é o cosplay que ele mais usa. Ele recorreu

Cosmake.net

para

pesquisar os materiais e tutoriais para a confecção dos acessórios de heróis, além de compartilhar seus próprios tutoriais.

Figura 71 – Persona 2: Sérgio Fonte: Dados da autora

Nome: Amélia Idade: 22 anos Pseudônimo ou apelido: Mei Amélia universitária

estudante

trabalha

como

cosmaker. Adotou como pseudônimo o nome Mei. Ela utiliza o Cosmake.net principalmente tutoriais

cosmaker.

Figura 72 – Persona 3: Amélia Fonte: Dados da autora

para

seus

divulgar

trabalhos

seus como

181

Nome: Bruno Idade: 12 anos Pseudônimo ou apelido: Zoro Bruno é um estudante do ensino fundamental e começou a se interessar por cosplay através da influência de seu irmão mais velho, além de seu apresso por videogames e animes. Adotou o apelido Zoro, pois

182

é o mesmo nome de um dos seus personagens favoritos de One Piece. Figura 73 – Persona 4: Bruno Fonte: Dados da autora

Conheceu o Cosmake.net através do seu irmão e usa a rede para consultar tutorias de cosplays para que eles possam fazer juntos.

5.2. Plano do Escopo No plano do escopo, a partir do que foi definido nos objetivos do produto e nas necessidades dos usuários, são definidos os requisitos funcionais e de conteúdo. Para Garrett (2011), o escopo é o momento no qual

ao invés de questionar “por que fazer este produto?” passa-se a questionar “o que fazer?”. O autor apresenta duas razões para a definição dos requisitos, quais sejam: 1) saber o que você está fazendo; e 2) saber o que você não está fazendo. Para ele definir os requisitos ajuda a conhecer tanto as metas do projeto como também a identificar quando elas devem ser cumpridas, além de evitar a inclusão de boas ideias que não tenham necessariamente a ver com os objetivos do projeto. Garrett (2011), divide estes requisitos entre os de funcionalidade, que se referem aos requisitos do produto como software indicando o que ele deveria fazer e o que faz de fato, e os requisitos de conteúdo – que correspondem à parte da informação. Neste caso indica editorial e marketing como exemplos – tais requisitos serão apresentados a seguir. 5.2.1. Especificações funcionais A interface permite: - Que o usuário crie um perfil com fotografia e um apelido único (ele será livre para alterar seu apelido/nome de usuário a qualquer momento, mas nomes repetidos não serão permitidos); - Postar e encontrar tutoriais para a confecção dos trajes e acessórios;

183

- Trocar informações a respeito dos materiais para a confecção de trajes e acessórios, quais sejam: onde é possível encontrar este material e o preço médio pago por ele; - Seguir outros usuários para acompanhar suas atividades (tais como publicação de tutorial, avaliação ou comentário); - Pesquisar os materiais que são comumente utilizados para determinada parte de traje ou acessório; - Avaliar e comentar os tutoriais (se funciona ou não. Caso marcar que não funciona o usuário é obrigado a explicar nos comentários o que deu

184

errado); - Entrar em contato com outros usuários através de comentário ou mensagem; - Se a publicação do usuário estiver entre as com mais avaliações positivas naquela semana ela se enquadrará na categoria destaques, podendo ser vista por todos os usuários – mesmo os que não seguem o usuário por trás de tal publicação. Além disso, se estiver entre os dez primeiros, aparecerá na

landingpage do Cosmake.net. - O site fará uso da tecnologia html5 para codificação, além do uso de design responsivo para a manutenção da consistência entre diferentes dispositivos.

5.2.2. Requisitos de Conteúdo Como se trata de um site de rede social a maior parte do conteúdo será produzida pelos usuários que vierem a fazer uso dele. Assim, são citados a seguir os requisitos impostos para o conteúdo dos usuários: -

conteúdos

publicados

não

devem

conter

conteúdo

pornográfico ou ofensivo e não podem violar direitos autorais de terceiros; - A breve descrição necessária das informações dos tutoriais não deve ultrapassar 280 caracteres, para evitar textos muito longos e cansativos. As descrições das etapas de confecção, por sua vez, não possuem limite de caracteres; - Cada tutorial publicado deve possuir imagens ou vídeos apresentando as etapas do mesmo, juntamente com suas devidas descrições; - Os formatos de arquivo de imagem aceitos são: .jpeg, .jpg, .png e .gif; Já os formatos de arquivo de vídeo aceitos são: .mp4, .rmvb, .mkv, .avi e .webm; - A imagem selecionada para o perfil do usuário deve ser quadrada e não pode conter conteúdo pornográfico ou ofensivo; - Caso o usuário não tenha selecionado uma imagem de perfil será exibido apenas o símbolo do Cosmake.net em escala de cinza no lugar da fotografia de perfil;

185

- O site proíbe a publicação de todo e qualquer conteúdo pornográfico ou ofensivo. A violação desta regra resulta na remoção da publicação e, em caso de reincidência, a conta do usuário será suspensa. Importa destacar que na primeira ocorrência a suspensão da conta ocorrerá por uma semana, na segunda por um mês e em caso de uma terceira vez a conta do usuário será excluída e seu nome de usuário ficará disponível novamente 47 . Durante as fases de suspensão da conta o usuário pode consultar conteúdos, mas não pode publicar tutoriais, comentários, avaliações, enviar mensagens ou seguir outros usuários além dos que já constam em sua

186

lista. - Um e-mail de uma conta uma vez excluída por má conduta não poderá ser utilizado para a criação de uma nova conta. - Em caso de má conduta a reputação do usuário ficará zerada durante o tempo da punição e essa ficará registrada no seu perfil logo abaixo da reputação. - É permitida apenas uma conta de usuário por endereço de e-mail.

Os nomes de usuário não podem ser repetidos, portanto se alguém já criou uma conta com tal nome de usuário ele não está disponível para outros criarem conta com ele. Quando uma conta é excluída o nome de usuário que era usado fica disponível para criação de novas contas.

Tais requisitos foram intencionalmente delimitados com base nos que costumam ser padrões em sites de rede social, mas em caso de dúvidas dos usuários essas estariam dispostas nas perguntas frequentes (FAQ) e ou nas regras da comunidade. 5.3. Plano da Estrutura No plano da estrutura, após definidos os requisitos, foi possível visualizar mais claramente o que iria ser incluso no produto final. Contudo, destaca-se que os requisitos não descrevem como os pedaços se encaixam para formar o todo (GARRETT, 2011). Foi nesta etapa que foi definido como cada parte se liga ao conjunto. Para isso foi construído um mapa da estrutura do site, como será possível verificar a seguir.

187

5.3.1. Mapa do site (todas seções do website)

188

Figura 74 – Sitemap do Cosmake.net Fonte: Dados da autora

O mapa do site apresentado na Fig. 74 foi construído utilizando o vocabulário visual para descrição de arquitetura de informação e design de interação de Jesse James Garrett. 5.3.2. Principais funções do site Como já foi mencionado anteriormente, devido à profundidade e quantidade de páginas que compõem um site de rede social foram feitas somente as telas pertinentes às principais funções do site. Tais principais funções foram inicialmente delineadas através das personas anteriormente apresentadas – situação na qual as funções relacionadas à página de tutorial são o principal foco – mesmo que cada persona se relacione com esta de forma diferente. Um possível exemplo seria a relação da Persona 1, que tem por caraterística comprar seus trajes e acessórios, um dia decidir confeccionalos em função do custo benefício. Tal situação pede que para este tipo de usuário sejam apresentadas informações sobre os materiais incluindo custo e onde estão disponíveis – além do modo de confeccionar. Isso porque este usuário ainda não possui contato com os processos até o momento em que decidiu tentar confeccionar seus próprios trajes e acessórios. As Personas 2 e 3 também necessitam dessas informações, mas se encontram em um nível mais avançado: elas já estão mais habituadas a confeccionar seus trajes, mas

189

precisam dessa troca de informação não só pelo custo benefício como para aumentar a qualidade do produto final. Elas também possuem a necessidade da divulgação de seu próprio trabalho – mesmo que apenas a Persona 3 trabalhe profissionalmente com isso. Ambos como cosmakers que têm mais experiência e conhecimentos a compartilhar, por isso podem auxiliar quem está apenas começando a confeccionar seus trajes. A necessidade que essas personas possuem de divulgar o seu próprio trabalho, tornaram necessário que também fossem questionadas as opções de compartilhamento e a visibilidade que estes tutoriais teriam. Tal fator retoma de certa forma o que foi

190

problematizado ao expor o Benchmarking, que é a possibilidade de visualização do site através de links externos. Esta opção foi mantida tanto para auxiliar na visibilidade do conteúdo publicado, como para auxiliar quem precisa desta informação e provavelmente chegaria no site através de outros caminhos. Dentre as Personas o melhor exemplo de alguém que claramente não possui o conhecimento e precisa da informação seria a 4, pois não conhece meios, preços ou materiais, mas aderiu à prática por influência de alguém próximo. Contudo, quer compartilhar desse apresso com essa pessoa, possuindo o menor nível de experiência na confecção de cosplays em relação às outras personas que foram apresentadas. Outro ponto que se fez necessário planejar foram as possibilidades de comunicação entre os usuários

e como isso seria feito. Apesar das opções comumente usadas em publicações de sites de redes sociais percebeu-se que isso poderia dar lugar a comentários que nem sempre se relacionam com o assunto apresentado – tirando o foco e a produtividade da discussão (ponto apresentado no capítulo dedicado a redes sociais temáticas). A fim de evitar isso, os comentários foram incorporados ao sistema de avaliação de tutoriais, sendo facultativo caso o usuário avalie um tutorial de forma positiva e obrigatório caso o usuário avalie de forma negativa, para que este justifique a sua avaliação negativa. Além disso, as avaliações estariam atreladas ao sistema de reputação para que potenciais comentários e críticas gratuitas sejam freados pela necessidade de manter uma boa reputação na rede. Será disponibilizada ainda a opção de troca de mensagens entre os usuários. Apesar de necessária, como ocorre nos componentes da amostra analisada, a comunicação direta entre os usuários não é o principal foco da interface, mas sim a troca de conhecimentos a respeito do tema. Tendo selecionado as principais funcionalidades, e considerando as necessidades e a experiência do usuário estabelecidas a partir das Personas, foi necessário pensar em como elas seriam apresentadas aos usuários e as etapas necessárias para isso. Para que fosse possível determinar quais eram

191

as telas e etapas necessárias foram montados fluxogramas simples ilustrando os passos que seriam necessários para cada função (Figs. 75, 76, 77 e 78).

192

193

Figura 75 – Funções 1 e 2 Fonte: Dados da autora

194

Figura 76 – Funções 2.1 e 2.2 Fonte: Dados da autora

195

Figura 77 – Função 3 Fonte: Dados da autora

Figura 78 – Função 4 Fonte: Dados da autora

196

5.4. Plano do Esqueleto: Wireframes No plano do esqueleto deu-se uma forma mais palpável às funções previamente definidas (GARRETT, 2011). Esta “forma” comtempla os designs da interface, da navegação e da informação. Acreditava-se que o ideal para a representação desta forma fosse a construção de um protótipo navegável, no entanto foram realizados apenas protótipos estáticos devido ao volume de telas em relação ao tempo disponível para a execução da investigação. Garrett (2011) chama esses protótipos de esquemas de página ou wireframes. Para este projeto foram feitos wireframes para as versões mobile (retrato e paisagem), tablet (retrato e paisagem) – as quais devido usarem apenas de ajustes de escala utilizaram a mesma estrutura - e desktop, a telas que

possuiriam diferenças estruturais em relação ao que foi definido para mobile e

tablet (ver figuras 79 e 80 a seguir).

197

Figura 79 – Wireframes mobile Fonte: Dados da autora

198

Figura 80 â&#x20AC;&#x201C; Wireframes do feed, pesquisa e meu perfil desktop Fonte: Dados da autora

5.5. Plano da Superfície: Memorial descritivo O plano da superfície contempla os aspectos que os usuários costumam notar primeiro o que, para Garrett (2011), trata-se do design sensorial, pois é nesta fase que o conteúdo, a funcionalidade e a estética se unem para produzir um design finalizado – que é prazeroso aos sentidos ao mesmo tempo em que atende às metas estabelecidas nos outros quatro planos. Para criar um padrão estético a ser seguido em todo o site foi necessário, primeiramente, criar um nome e uma marca que o identificassem. O nome do site foi denominado de Cosmake.Net unindo os termos cosmaker e

social network (rede social). Trata-se de um site voltado para compartilhar e consultar tutorias e materiais para cosplay. Inicialmente a grid da marca havia sido construída pensando na trama de uma renda e nos nós que se conectam em uma rede social – brincando com o espaço vazio deixado pelas tramas, como é possível verificar a seguir:

199

Figura 81 – Primeira ideia de marca Fonte: Dados da autora

200 Figura 82 – Primeira ideia de marca Fonte: Dados da autora

No entanto, o resultado acabou sendo visualmente muito poluído (Fig. 82), por isso buscou-se por algo semelhante aos sites como Flickr, Facebook e Linkedin – que utilizam de sua nomenclatura e inicias na composição da marca. Assim, partiu-se então para a construção do símbolo a partir da combinação das letras C, M e N em caixa alta, utilizando ao acaso uma tipografia sem serifa nativa do pacote Adobe (Bahnschrifit). A partir do teste de

várias combinações das três letras decidiu-se usá-las para compor um elemento que fosse relacionado ao assunto do site (ver Fig. 83). O primeiro elemento que pareceu satisfatório foi o formato de uma máscara – fazendo referência

origem

cosplay com o Masquerades, mencionado

anteriormente. No entanto, o formato era ambíguo e necessitou de ajustes, tendo seu formato modificado para que se parecesse com os cabos de uma tesoura de costura. Foi escolhida a tesoura, pois era simples de adaptá-la a partir daquela combinação de letras inicial e também por ser um item indispensável para a confecção de trajes e acessórios. A forma que compõe o símbolo foi também utilizada na composição de um dos ícones dos filtros de pesquisa que corresponde à categoria tutoriais (Fig. 84).

201

202

Figura 83 – Processo de construção do símbolo do Cosmake.net Fonte: Dados da autora

Figura 84 – Ícone que incorporou o símbolo da marca Fonte: Dados da autora

No que diz respeito ao logotipo, o nome Cosmake.net foi escrito inteiramente em caixa baixa utilizando a tipografia DIN Pro – Medium, por ter certa semelhança visual com a Bahnschrifit que foi utilizada como base para a construção do símbolo e por ter sido considerada uma tipografia menos formal – característica presente no SRST projetado. O naming Cosmake.net, por ser uma junção dos termos cosmake e

social network, acabou resumindo o que é o produto o que torna dispensável o uso de uma atividade fim junto à marca prioritária. Contudo, ao usar a marca em materiais de divulgação (os quais não foram previstos por não serem o foco desta investigação), por exemplo, será aconselhável usar como atividade fim “site de rede social para cosmakers” e como slogan “Crie, vista e

203

compartilhe”. Este deverá também estar presente na landing page do site. É importante destacar que esse slogan foi criado com base no benchmarking realizado, uma vez que na landing page do site Flickr existe essa informação, qual seja: Encontre sua inspiração. O slogan funciona, portanto, para descrever o objetivo do SRST.

204 Figura 85 – Apresentações em horizontal e vertical (respectivamente) da marca Fonte: Dados da autora

A paleta de cores definida para compor a marca e a composição das telas partiu do estilo de moda japonesa denominado Sweet Lolita. Neste predominam cores claras e doces, além do uso de vestidos inspirados nos de bonecas vitorianas – caracterizados por serem cheios de rendas, laços e babados (foi também por isso o uso da renda como ideia inicial para a construção da marca).

Sendo assim, para definir as tonalidades foi feita uma busca de imagens sobre o estilo Sweet Lolita no Google. Após selecionada uma imagem esta foi disposta no recurso da Adobe denominado Adobe Color CC. Com este recurso foi possível selecionar pontos de cor da imagem e obter seus códigos hexadecimais para utilizar na composição das telas (Fig. 86, 87 e 88). O recurso também permite selecionar outros tipos de harmonia de cores a partir da cor selecionada como principal, tais como: análogo, monocromático, tríade, complementar, composto, sombras e personalizado.

205

Figura 86 – Definição da paleta de cores a partir de imagem no Adobe Color CC Fonte: Dados da autora

206 Figura 87 – Definição da paleta de cores no Adobe Color CC Fonte: Dados da autora

Figura 88 – Paletas de cores definidas através do Adobe Color CC Fonte: Dados da autora

207

Figura 89 â&#x20AC;&#x201C; CĂłdigos das cores da paleta disponibilizados no Adobe Color CC Fonte: Dados da autora

Como é possível observar na Fig. 89 foram definidas três categorias gerais de cores, além das cores base obtidas a partir da imagem quais sejam: sombras, realces e complementares. Isso foi feito pensando na definição dos níveis

hierárquicos

interface

dos

destaques

necessários

para

determinados elementos a partir das cores. Na composição das telas foi utilizada uma leve sombra ou borda para descolar os botões do fundo. Tal ideia foi aplicada a fim de facilitar a percepção do usuário de que aquilo é um botão. Esse tipo de informação foi inserido nas composições de forma sutil para atender ao mesmo tempo à

208

estética de design minimalista (fator que grande parte da amostra pecou durante as avaliações heurísticas) e para minimizar o nível de raciocínio necessário por parte do usuário (KRUG, 2008). A tipografia definida para o texto de todo o site foi a Helvetica Neue e suas variações, primeiramente porque se trata de uma tipografia sem serifa, o que se considera melhor para leitura em tela. Além da leiturabilidade, foi também considerado que apesar de não se tratar de uma tipografia livre ela é comumente utilizada por sites de rede social enfrentando poucos ou mesmo nenhum problema de renderização. A partir deste ponto descreve-se o que foi feito nas telas projetadas para mobile (apresentadas nas Figs. de 93 a 113) e que posteriormente

também foram aplicadas nos demais dispositivos. É necessário destacar que se optou por resolver as telas para mobile primeiro porque os sites da amostra selecionada possuíam vários problemas em suas versões para celular, ainda que as análises não tenham sido focadas nas versões dos sites para mobile (ainda que seja visível o constante aumento do uso de smartphones para acessar a internet). Sendo assim, destaca-se que a grid para o design responsivo do site foi baseada na mesma utilizada na disciplina de Design de Interação I, devido à dificuldade de serem encontradas dimensões tidas como padrão para mobile, tablet e desktop (ver Figs. 90 e 91).

209

Figura 90 – Grid base para mobile (retrato e paisagem) e tablet retrato Fonte: Dados da autora

210 Figura 91 – Grid base para tablet paisagem e desktop Fonte: Dados da autora

Tendo por base essa grid base foi construída uma grid horizontal na qual a altura de cada linha equivaleu à largura do intervalo entre as colunas (o qual está destacado em azul nas Figs. 90 e 91). A composição final da grid pode ser observada na Fig. 92 apresentada seguir:

211

Figura 92 – Grid completa para os três dispositivos Fonte: Dados da autora

Na composição da landing page do site (Fig. 93), foi utilizada a ideia de apresentação de slides utilizada pelo Flickr. As imagens de fundo serão

originas das publicações em destaque daquela semana. A fim de passar a ideia de que todas as imagens fazem parte de um mesmo conteúdo e para atender requisitos de legibilidade foi aplicada sobre as imagens uma camada de cor com pouca opacidade. Cada imagem quando exibida na landing page incluiu o nome do usuário que a publicou no canto inferior esquerdo. O posicionamento do lado esquerdo se deu para funcionar como contrapeso aos elementos referentes ao login e à criação de conta – posicionados por convenção no lado direito do cabeçalho. Já a direção da rotação do nome de usuário da foto em destaque foi decidida pensando-se no sentido mais

212

confortável para ler tal informação.

213

Figura 93 â&#x20AC;&#x201C; Landing page do Cosmake.net Fonte: Dados da autora

A estrutura da landing page apresenta de forma integrada as telas de

login e cadastro para diminuir a quantidade de telas que o usuário teria que esperar carregar durante o processo. Entretanto, a tela de login (Fig. 94) é apresentada ao usuário por meio de uma transição de slide vinda do lado direito da tela, enquanto a de cadastro por meio de scroll vertical. A direção da transição de slide se dá devido ao sentido de leitura ocidental, dando a ideia de folhear as páginas de um livro.

214

215

Figura 94 – Tela de Login do Cosmake.net Fonte: Dados da autora

Foi utilizada a cor verde para o fundo dos botões de cadastro (Figs. 95, 96, 97 e 98) por ser uma cor complementar à paleta derivada de tons de rosa do site. Neste mesmo botão foi utilizada uma sombra sutil no canto inferior direito para passar uma ideia de botão em relevo.

216

Figura 95 â&#x20AC;&#x201C; Completar dados de cadastro pelo Google/Facebook do Cosmake.net Fonte: Dados da autora

217

Figura 96 e 97 â&#x20AC;&#x201C; Confirmar e-mail de cadastro do Cosmake.net Fonte: Dados da autora

A cor da tipografia sobre o botão verde que sobrepõe as imagens de fundo está num tom mais escuro e acinzentado que a cor principal da identidade com o objetivo de contrastar com outros textos e elementos próximos. Já o botão verde disposto mais abaixo da página apresenta o texto em cor branca para fins de legibilidade e porque os elementos próximos não possuem um nível visual hierárquico semelhante que peça uma diferenciação como no outro caso (ver Fig. 98).

218

Figura 98 – Diferenças entre os botões de cadastro Fonte: Dados da autora

A distância utilizada entre os botões de cadastro com o Google e

Facebook equivale à metade do grid horizontal – para que pelo menos um pedaço do botão seguinte apareça e mostre que há mais conteúdo para o usuário rolar a página. Nas lacunas de cadastro foi utilizado uma espécie de sublinhado, pois os comuns retângulos brancos não ficariam legíveis em relação à cor de fundo. Também foi utilizada a pré-visualização de texto

nessas lacunas como rótulos, a fim de indicar ao usuário qual informação ele deverá informar e em qual lugar. Com isso, se dispõe uma quantidade menor de elementos na interface. A opacidade da cor das divisórias dos utilitários (Figs. de 93 a 99) foi colocada em 30% para não competir com o texto em termos de peso, mas ainda assim manter o contraste.

219

220

Figura 99 â&#x20AC;&#x201C; Resultados de pesquisa do Cosmake.net com o usuĂĄrio logado Fonte: Dados da autora

Quanto à barra de pesquisa o texto que sugere o que pesquisar está com 80% de opacidade para que seja possível notar que não é uma informação fixa e sim uma sugestão do que pode ser pesquisado. Além disso, o texto de sugestão de pesquisa indica qual categoria de filtro de pesquisa está selecionada e apresenta a barra comumente utilizada para demonstrar digitação, ilustrando que a informação não é permanente. (Fig. 100)

221

Figura 100 – Pesquisar Fonte: Dados da autora

Também é necessário destacar que a miniatura de perfil não é exibida enquanto a barra de pesquisa estiver ativa pelo cabeçalho (Fig. 100). Isso se dá porque assim é liberado mais espaço da tela para a barra de pesquisa, o que é necessário devido a leitura em uma tela de tamanho pequeno como a de um smartphone. Também é necessário destacar que mesmo que a miniatura fosse exibida durante o período em que a barra de pesquisa estivesse ativa, acredita-se não ser possível que um usuário digite e acesse o perfil simultaneamente inclusive pela limitação do tamanho da tela.

222

A opacidade da barra de pesquisa sobre o cabeçalho 100% opaco foi colocada em 80% para evitar um branco muito duro e que destoasse do resto das cores. (ver novamente Fig. 100) A barra de pesquisa manteve o mesmo modelo do aplicativo do Flickr apresentado no benchmarking e, além disso, foi utilizado um texto que sugere quais categorias podem ser pesquisadas (Fig. 100). Para os ícones foi definido que o ideal seria que todos se relacionassem de alguma forma com o cosplay. Os filtros de pesquisa são três: tutoriais, materiais e pessoas. Para representar tutoriais fora construído um ícone de tesoura a partir dos cabos que compõem o símbolo da marca do site, o que pode facilitar ainda mais a visualização desta na marca. A tesoura, por ser uma ferramenta muito utilizada por quem

costura, representa neste caso a ação de confeccionar algo, assim remetendo a tutoriais. Para representar a categoria de materiais foi utilizado um botão, pois

cosplays utilizam de muitos materiais alternativos o que torna complicado prever um tipo de material diferenciado e simples de visualizar em um ícone que não seja um simples botão. Já para o ícone de pessoas foi escolhido um ícone genérico para representar usuários. Além destas categorias, também é possível fazer uma busca em todas estas categorias, a qual foi representada por um símbolo do infinito englobando todas as categorias presentes nessa opção de pesquisa. Todos os ícones projetados constam no CD (ver Apêndice A). É necessário destacar que para a nomenclatura destas categorias usouse de apenas uma palavra para cada, a fim de fazer relação direta com o que é e diminuir o tempo de raciocínio necessário ao usuário para entender do que se trata (KRUG, 2008). Os resultados de pesquisa são num geral exibidos da mesma forma que as publicações no feed: expostas numa lista de publicações. Logo abaixo da barra de pesquisa foi situado o título da pesquisa e o número de resultados encontrados (Fig. 101).

223

Para solucionar o problema das “páginas infinitas” encontrado na amostra durante a avaliação heurística, abaixo dos resultados iniciais foi apresentado um texto abordando quantos resultados estão sendo exibidos e a opção de carregar mais resultados (Fig. 101). Esta opção auxilia a reduzir o tempo que o usuário vai precisar esperar para a página carregar e também a controlar o consumo de dados de internet.

224

Figura 101 – Feedback do número de resultados da pesquisa Fonte: Dados da autora

Na barra de navegação o texto da aba não selecionada possui o corpo do texto 2pts menor do que a selecionada, a fim de criar uma diferença hierárquica e evitar que o usuário confunda qual está realmente selecionada (Fig. 102). Além disso, foi feita uma diferenciação através da cor e por meio do uso de uma linha no topo da aba que estiver selecionada, indicando novamente em qual das abas o usuário estará.

Figura 102 – Detalhes da barra de navegação Fonte: Dados da autora

A sombra por trás da aba selecionada foi aplicada para descolá-la do fundo auxiliando na percepção de qual aba está selecionada (Fig. 102). O texto dos rótulos das abas apresenta-se na variação bold para distingui-lo do texto das publicações. Na aba de navegação foi adicionada uma camada da mesma cor da base, porém levemente transparente para que a cor não ficasse chapada (Fig. 102). A respeito do formato das publicações no feed foi mantido um formato semelhante ao do Flickr mostrado anteriormente. No entanto, aparece no topo

225

da publicação o título da publicação e o nome do usuário que a postou (ver Fig. 103).

226

Figura 103 – Formato das publicações Fonte: Dados da autora

Além disso, ao invés de exibir os primeiros comentários já no preview do feed, foi usada a opção “ver mais” com um ícone de seta – para reduzir a quantidade de informação no feed e linkar para a página da publicação completa. O centro das setas foi alinhado com a linha de base do título da publicação. Para dar a ideia de link clicável tanto o nome de usuário abaixo do título como as setas foram colocados em uma das cores da paleta de realce (Fig. 104).

227 Figura 104 – Detalhes das informações das publicações no feed Fonte: Dados da autora

Ainda no feed é apresentado o ícone para nova publicação, o qual foi projetado em verde porque se destaca mais na interface que foi constituída majoritariamente em tons rosados (Fig. 105).

Figura 105 – Detalhe do ícone “nova publicação” Fonte: Dados da autora

Foi utilizado o preenchimento do ícone em gradiente com os tons disponíveis na paleta para evitar uma forma completamente chapada. Além disso, foi aplicada uma leve sombra para descolá-lo dos elementos do fundo. Quando este é selecionado tal sombra é convertida em uma leve luminosidade

228

a fim de destacá-lo e demonstrar ao usuário o que ele está selecionado. Além disso, ao selecioná-lo a tela inteira é sombreada e abre uma janela pop-up na qual o usuário opta por continuar escrevendo algum rascunho existente ou escrever uma nova publicação (ver Fig. 106). Enfatiza-se que a intenção do uso da janela pop-up se deu para que não fosse necessária a construção de outra tela para o usuário selecionar caso ele queira continuar um rascunho.

229

Figura 106 – Criando nova publicação pop-up Fonte: Dados da autora

As telas consideradas as mais importantes são as das páginas de tutorial e de publicação de tutorial (Figs. 107 a 109), isso porque essa é a funcionalidade principal do Cosmake.net. Para estas páginas os pontos mais importantes a destacar são: 1) os comentários seriam feitos somente por meio das avaliações, por isso não há uma opção para comentar no tutorial, já que a opção é nativa da avaliação; 2) foram utilizadas “gavetas” expansíveis uma vez que ao mesmo tempo em que se mostra para o usuário tudo o que contém no tutorial em uma única página é possível evitar uma longa espera para o carregamento de todos os elementos da página; e 3) a página correspondente

230

a escrita de novo tutorial foi construída preferencialmente utilizando os tons menos saturados da paleta, para lembrar a ideia de rascunho por ser acinzentado.

231

Figuras 107, 108 e 109 – Páginas de tutorial e nova publicação Fonte: Dados da autora

Para finalizar a descrição das telas mobile são apresentadas as telas de perfil próprio e de perfil de outra pessoa quando, por exemplo, ela é encontrada através da barra de pesquisa (Figs. 110 a 112). É interessante destacar que devido à forma arredondada do símbolo da marca todos os botões e ícones também foram também projetados com essa estética arredondada. No canto superior direito há o que Krug (2008) chama de nome da página ao mesmo tempo em que podem ser considerados “caminho de migalhas” para indicar ao usuário onde ele está.

232

233

Figuras 110, 111 e 112 – Páginas de perfil e pesquisa de usuários Fonte: Dados da autora

A respeito das demais telas e dispositivos todas as telas constam no CD localizado no apêndice desta pesquisa. Em termos de detalhes, estética e conteúdo os elementos que compõem as telas permaneceram os mesmos independentemente do dispositivo. Todavia, em alguns casos alguns elementos tiveram de ser realocados. Isso ocorreu, pois não houve necessidade de outros ajustes além da escala entre as versões mobile retrato, paisagem, tablet retrato e paisagem. Contudo, dessas para a versão desktop a forma de exibição das publicações no perfil, feed e dos resultados de pesquisa que foram alterados (Fig. 113).

234

235

Figura 113 â&#x20AC;&#x201C; Feed de notĂcias e meu perfil para desktop Fonte: Dados da autora

Em linhas gerais esses foram os processos percorridos para a criação da rede social temática proposta por esta investigação.

236

237

6. ConsideraĂ§Ăľes finais

238

6. Considerações finais Esta investigação foi pensada inicialmente com a intenção de suprir uma carência do universo cosplay, qual seja: a ausência de um meio ou fonte eficiente para elucidar e compartilhar métodos de confecção e interação para

cosplayers e cosmakers. Para atender tal necessidade teve-se como objetivo geral projetar este meio necessário: um site de rede social temática voltado para o universo cosplay – o que de fato se concretizou na conclusão desta investigação. Contudo, torna-se necessário destacar que a fim de contemplar este objetivo foi primeiramente executada uma revisão bibliográfica a respeito de redes sociais, buscando também conceituar o próprio universo cosplay – que se tornou o tema da rede social projetada. Por isso, espera-se que esta investigação também tenha contribuído para ampliar o entendimento a respeito do cosplay diminuindo possíveis preconceitos. Uma vez que pode se tornar um tema um tanto quanto desconhecido, ou mesmo apresentado de maneira simplista ou equivocada como debatido por esta investigação. Por isso, espera-se que tenha sido possível elucidar alguns aspectos sobre a prática do cosplay, além de destacar a relevância de projetar um produto para um público que é cada vez maior. Com relação às redes sociais temáticas, ao iniciar a investigação percebeu-se que não se tratava de um tema suficientemente debatido no

239

âmbito acadêmico – o que por um lado dificultou o acesso a materiais, mas por outro demonstrou a relevância de concentrar esta pesquisa nessa temática. Por isso, espera-se que esta investigação contribua para o avanço do estudo acerca das redes sociais somadas ao campo do design. Neste espaço de considerações finais torna-se necessário ainda destacar que na etapa de qualificação desta pesquisa a autora estava tentando enfocar muitas áreas desnecessárias para a investigação deixando o trabalho sem foco. Por isso, foi necessário ponderar o que realmente importava para a concretização da pesquisa – processo que acabou reduzindo

240

o escopo da investigação auxiliando na qualidade de um resultado final. Levando-se em consideração o tempo que se utilizou para se chegar a essas constatações percebe-se, agora nesta fase da conclusão do estudo, que seria importante ter tido mais tempo para um contato com os usuários bem como para a execução de um protótipo navegável, etapas que, infelizmente, em função do que foi exposto, tiveram que ser cortadas. Por isso, sugere-se como etapa futura validar a rede social temática projetada junto aos potenciais usuários. Por fim, reflete-se que a conclusão deste estudo levou mais tempo do que o previsto em função de diversos empecilhos que acabaram por impossibilitar ou reduzir consideravelmente a produtividade da autora. Apesar

dos obstáculos, atrasos no cronograma e cortes necessários para a finalização do projeto prático, considera-se que as intenções com esta investigação foram atingidas e acredita-se que com algumas lapidações – tais como a aplicação das técnicas que tiveram de ser cortadas – a interface poderá a vir a ser implementada.

241

242

ReferĂŞncias

243

Referências ABCGEEK: Cosplayer é gente igual você. Disponível em: <https://www.abcgeek.com.br/2017/05/cosplayer-e-gente-igual-voce.html >. Acesso em: 1 fev. 2018. ACTIONECOMICS: Cosplayer é gente igual a você. Disponível em: <http://www.actionecomics.com/2015/09/cosplayer-e-gente-igualvoce.html#.Whxd-0qnGM8>. Acesso em: 28 nov. 2017. AMARAL, Adriana. Manifestações da performatização do gosto nos sites de redes sociais: uma proposta pelo olhar da cultura pop. Revista Ecopós: Comunicação e Gosto, Rio de Janeiro, v. 17, n.3, 2014.

244

ANIMATION21 World: Afinal o que é cosplay e onde surgiu. Disponível em: <http://worldanimation21.blogspot.com.br/2014/10/afinal-o-que-ecosplay-onde-surgiu.html>. Acesso em 9 fev. 2017. ANIMESPHERE: Plataforma Online Cosplayers.Global é oficialmente lançada em 10 línguas. Disponível em: <http://www.animesphere.com.br/plataforma-online-cosplayers-global-eoficialmente-lancada-em-10-linguas/>. Acesso em: 30 jan. 2018. BASTOS, Marco; RECUERO, Raquel; ZAGO, Gabriela. Análise de Redes para Mídia Social. Porto Alegre: Sulina, 2015. 182 p. BEAUTIFULPEOPLE: BeautifulPeople. Disponível em: <https://www.beautifulpeople.com/en-UK>. Acesso em: 9 out. 2016.

CLICKEAPRENDA: A origem do Cosplay. Disponível em: <http://clickeaprenda.uol.com.br/portal/mostrarConteudo.php?idPagina=2190 4>. Acesso em: 9 fev. 2017.

COSPANDY: Cosplay: como tudo começou. Disponível em: <http://www.cospandy.com/index.php?option=com_content&view=article&id= 75%3Acosplay-como-tudo-comecou&catid=40&Itemid=121&lang=pt>. Acesso em: 9 fev. 2017. COSPLANNER: Cosplanner. Disponível em: <http://www.cosplanner.net/index.cfm>. Acesso em: 20 fev. 2017. COSPLAY.COM: Cosplay.com. Disponível em: <http://www.cosplay.com/>. Acesso em: 20 fev. 2017. COSPLAYERS.GLOBAL: Cosplayers.global. Disponível em: <https://www.cosplayers.global/>. Acesso em: 4 fev. 2018. COSPLAY, Mundo do: A história do cosplay. Disponível em: <http://mundodocosplay.blogspot.com.br/2013/07/a-historia-docosplay.html>. Acesso em: 9 fev. 2017. COSTA, Ana Carolina Ribeiro; TEIXEIRA, Ana Maria Batista; CAMELO, Gerda Lúcia Pinheiro; ARAÚJO, Hamonaísa Silvina Souza; SOUZA, Sávyo dos Santos. Práticas de benchmarking como ferramenta estratégica de competitividade para empresas norte-riograndenses. In: CONNEPI, 2007, João Pessoa. Anais eletrônicos. Disponível em: <xa.yimg.com/kq/groups/21657826/383440933/name/benchmarking.pdf>. Acesso em: 5 fev. 2018. CURSOS, Blog dos: Cosplay: o que é e como surgiu. Disponível em: <http://blogdoscursos.com.br/cosplay-o-que-e-e-como-surgiu/>. Acesso em: 9 fev. 2017.

245

DESIGNMODO: Creating Better Design with Content First Approach. Disponível em: <https://designmodo.com/better-content-first/>. Acesso em: 28 de nov. 2018. ESCOLA, Brasil: Cosplay. Disponível em: <http://brasilescola.uol.com.br/artes/cosplay.htm>. Acesso em: 9 fev. 2017. FILMOW: Filmow. Disponível em: <https://filmow.com/>. Acesso em: 20 fev. 2017. FLICKR: Flickr. Disponível em: <https://www.flickr.com/>. Acesso em: 20 fev. 2017.

246

GAIAONLINE: GaiaOnline. Disponível em: <https://www.gaiaonline.com/>. Acesso em: 20 fev. 2017. GATHERCONTENT: Designing Content-First for a Better UX. Disponível em: <https://gathercontent.com/blog/designing-content-first-for-abetter-ux>. Acesso em: 23 de nov. 2018. GARRETT, Jesse James: Elements. Disponível em: http://www.jjg.net/elements/translations/elements_pt.pdf>. Acesso em: 12 fev. 2017. GARRET, Jesse James. The elements of user experience: usercentered design for the Web and beyond. 2. ed. Berkeley: New Riders, 2011. 172 p. GEEK, Sintonia: História do cosplay. Disponível em: <http://sintoniageek.com.br/historia-do-cosplay/#!prettyPhoto>. Acesso em: 9 fev. 2017.

GIL, Antonio Carlos. Como elaborar projetos de pesquisa. 4. ed. São Paulo: Atlas, 2002. 175 p. GLADWELL, Malcolm. O ponto da virada. Rio de Janeiro: Sextante, 2009. 288 p. INFOESCOLA: Cosplay. Disponível em: <http://www.infoescola.com/cultura/cosplay/>. Acesso em: 9 fev. 2017. JEDIRIO: Breve história do cosplay no mundo. Disponível em: <http://www.jedirio.com.br/artigos/cosplay/breve-historia-do-cosplay-nomundo/>. Acesso em: 9 fev. 2017. JJG.NET: A visual vocabulary for describing information architecture and interaction design. Disponível em: <http://www.jjg.net/ia/visvocab/>. Acesso em: 28 nov. 2018. KAPP, Karl M.; BLAIR, Lucas; MESCH, Rich. The Gamification of Learning and Instruction Fieldbook: Ideas into Practice. São Francisco: Wiley, 2014. 480 p. KARSAKLIAN, Eliane. Comportamento do consumidor. 2. Ed. São Paulo: Atlas, 2012. 344 p. KRUG, Steve. Não me faça pensar!: uma abordagem de bom senso à usabilidade na web. 2. ed. Rio de Janeiro: Alta Books, 2008. 201 p. MARCOTTE, Ethan. Responsive Web Design. Nova Iorque: A Book Apart, 2011. 153 p. MONTARDO, S. Redes temáticas na web e biossociabilidade online. Revista FAMECOS, Porto Alegre, v. 17, n. 3, p. 295-303, 2010.

247

MOR, Caroline Cousen. Design Digital e Arquitetura de Informação: Grupos no Facebook X Redes Sociais Temáticas In: XXVII SALÃO DE INICIAÇÃO CIENTÍFICA DA UFRGS, out., 2015, Porto Alegre. LUME Repositório Digital. Porto Alegre: UFRGS, 2015. Disponível em: <http://hdl.handle.net/10183/136479>. Acesso em: 11 fev. 2017. MOR, Caroline Cousen. DESIGN E REDES SOCIAIS TEMÁTICAS: UM ESTUDO DE CASO SOBRE O FILMOW In: XXIV CONGRESSO DE INICIAÇÃO CIENTÍFICA DA UFPEL, set., 2015, Pelotas. Anais eletrônicos. Pelotas: UFPEL, 2015. Disponível em: <http://cti.ufpel.edu.br/siepe/arquivos/2015/LA_00835.pdf>. Acesso em: 11 fev. 2017.

248

MYANIMELIST.NET: MyAnimeList.net. Disponível em: <https://myanimelist.net/>. Acesso em: 20 fev. 2017. NERDMALDITO: Diferenças entre MMO, RPG, Multiplayer e MMORPG! Disponível em: <http://www.nerdmaldito.com/2009/07/diferencasentre-mmo-rpg-multiplayer-e.html>. Acesso em: 21 set. 2018. NIELSEN, Jakob. Usability Engineering. São Francisco: Academic Press, 1993. NIELSEN, Jakob. Usabilidade na web. Rio de Janeiro: Elsevier, 2007. 406 p. RECUERO, Raquel. Atos de ameaça à face e à conversação em redes sociais na internet. In: PRIMO, Alex (Org.). Interações em rede. Porto Alegre: Sulina, 2013. p. 51-70.

RECUERO, Raquel. Comunidades virtuais em redes sociais: uma proposta de estudo. In: E-Compós, Brasília, v. 4, dez. 2005. Disponível em: <http://www.raquelrecuero.com/seminario2005.pdf>. Acesso em: 13 fev. 2017. RECUERO, Raquel. Redes sociais na internet. Porto Alegre: Sulina, 2009. 191 p. RESPONSIVEDESIGN.IS: Content First Design. Disponível em: <https://responsivedesign.is/design/content-first-design/>. Acesso em: 23 nov. 2018. SHELL, Jesse. A arte do Game Design. Rio de Janeiro: Elsevier, 2011. SIGNIFICADOS: Cosplay. Disponível em: <http://www.significados.com.br/cosplay/>. Acesso em: 18 abr. 2016. SIGNIFICADOS: Significado de MMO. Disponível em: <https://www.significados.com.br/mmo/>. Acesso em: 21 set. 2018. SINTONIAGEEK: SintoniaGeek. Disponível em: <http://sintoniageek.com.br/historia-do-cosplay/#!prettyPhoto>. Acesso em: 10 fev. 2017. SKOOB: Skoob. Disponível em: <https://www.skoob.com.br/>. Acesso em: 20 fev. 2017. TENSHISSOUL: O que é cosmaker. Disponível em: <http://tenshissoul.weebly.com/o-que-eacute-cosmaker.html>. Acesso em: 18 abr. 2016. TODAMATÉRIA: Tribos Urbanas. Disponível em: <https://www.todamateria.com.br/tribos-urbanas/>. Acesso em: 28 nov. 2017.

249

UOLNOTÍCIAS: UOL Notícias e TV UOL: vídeo sobre cosplay. Disponível em: <https://noticias.uol.com.br/ultimas-noticias/erratas/2015/08/25/uolnoticias-e-tv-uol-reportagem-sobre-cosplay.htm>. Acesso em: 28 nov. 2017.

UOLESTILO: Cosplayers criam campanha para criticar personagem de nova novela. Disponível em: <https://estilo.uol.com.br/comportamento/noticias/redacao/2017/04/06/cospla yers-criam-campanha-para-criticar-personagem-de-nova-novela.htm>. Acesso em: 28 nov. 2017. WORLDCON.ORG: Worldcon.org. Disponível em: <http://www.worldcon.org/>. Acesso em: 20 fev. 2017.

250

WORLDCOSPLAY.NET: WorldCosplay.net. Disponível em: <http://worldcosplay.net/>. Acesso em: 20 fev. 2017.

251

ApĂŞndices

252

ApĂŞndice A

253