Tcc antonio bandeira sugestoes2 by Clari

UNIVERSIDADE DO SUL DE SANTA CATARINA ANTONIO MARCOS BATISTELLO BANDEIRA

PROJETO DE REDESIGN DO FÓRUM DE DISCUSSÕES DO GAME BRASILEIRO TAIKODOM: LIVING UNIVERSE, COM FOCO NA EXPERIÊNCIA DO USUÁRIO

Florianópolis 2015

ANTONIO MARCOS BATISTELLO BANDEIRA

PROJETO DE REDESIGN DO FÓRUM DE DISCUSSÕES DO GAME BRASILEIRO TAIKODOM: LIVING UNIVERSE, COM FOCO NA EXPERIÊNCIA DO USUÁRIO

Trabalho de Conclusão de Curso apresentado ao Curso de Design, da Universidade do Sul de Santa Catarina, como requisito parcial à obtenção do título de Bacharel em design.

Orientador: Prof. Tiago André da Cruz.

Florianópolis 2015

ANTONIO MARCOS BATISTELLO BANDEIRA

PROJETO DE REDESIGN DO FÓRUM DE DISCUSSÕES DO GAME BRASILEIRO TAIKODOM: LIVING UNIVERSE, COM FOCO NA EXPERIÊNCIA DO USUÁRIO

Este Trabalho de Conclusão de Curso foi julgado adequado à obtenção do título de Bacharel em Design e aprovado em sua forma final pelo Curso de Design da Universidade do Sul de Santa Catarina.

Florianópolis, 24 de dezembro de 2015. ______________________________________________________ Professor e orientador Tiago André da Cruz, Ms. Universidade do Sul de Santa Catarina ______________________________________________________ Prof. Samuel Zandonadi, Ms. Universidade do Sul de Santa Catarina ______________________________________________________ Prof. Roberto Forlin Pereira, Ms. Universidade do Sul de Santa Catarina

Dedico este trabalho à minha mãe, pelo esforço obstinado em prover os melhores subsídios para minha formação humana, moral e acadêmica, ano após ano, numa infindável prova de amor incondicional, a qual jamais esquecerei.

AGRADECIMENTOS Agradeço ao Diretor, que em toda a Sua generosidade me devolveu à vida meses antes da conclusão deste projeto. A minha família, por acreditar em mim e me apoiar com muito amor e carinho, mesmo quando eu precisei me distanciar de todos eles, tantas vezes. Aos meus amigos, pela compreensão, pela tolerância e por todo o apoio, nas inúmeras ausências e distanciamentos que estabeleci durante o desenvolvimento deste trabalho. Aos meus professores orientadores, pela oportunidade de crescer com eles, cada dia mais. A todos os envolvidos de alguma forma para a realização dessa conquista.

Para ser grande, sê inteiro: nada Teu exagera ou exclui. Sê todo em cada coisa. Põe quanto és No mínimo que fazes. Assim em cada lago a lua toda Brilha, porque alta vive. (REIS, 1933)

RESUMO Estre trabalho apresenta o redesign do fórum de discussões de um game de temática espacial, produzido por uma empresa brasileira. O projeto foi estruturado primeiramente apresentandose o mercado de games e introduzindo a Hoplon e o TAIKODOM: LIVING UNIVERSE. Em seguida argumentou sobre a importância de um fórum bem projetado para o Taikodom e, por conseguinte, para os negócios da empresa. Levantou definições importantes a respeito de fundamentos de design e jogos digitais e utilizou a metodologia dos cinco planos da experiência do usuário, para contemplar todos os aspectos da experiência de uso. O trabalho então entrega um novo fórum de discussões para que os jogadores possam ter sua experiência de jogo ampliada e a empresa possa oferecer uma experiência mais imersiva aos seus clientes. A implementação deste fórum está descrita no corpo do trabalho com as imagens das principais páginas e a visualização de sua execução em navegadores web, e ainda conta, como apêndice, a demonstração da linguagem html e css para esta implementação.

Palavras-chave: Experiência do usuário; Games digitais; Fórum de discussões; Design digital.

LISTA DE ILUSTRAÇÕES Figura 1 - Diagrama dos Elementos da Experiência do Usuário .............................................. 17 Figura 2 - Modelo de arquitetura de informação simples ......................................................... 22 Figura 3 - Arquitetura estrutural resumida do fórum do TKD. ................................................ 30 Figura 4 - Fórum do EVE Online ............................................................................................. 34 Figura 5- Fórum do Diablo III .................................................................................................. 36 Figura 6 - Fórum do World of Warcraft ................................................................................... 39 Figura 7 - Fórum do StarCraft II .............................................................................................. 41 Figura 8 - Fórum do Taikodom: Living Universe .................................................................... 44 Figura 9 - Modelo conceitual do fórum do TKD...................................................................... 59 Figura 10 – Painel semântico para o redesign do fórum .......................................................... 60 Figura 11 - Diagrama da arquitetura de informação do fórum do TKD ................................... 61 Figura 12- Wireframe da página Categorias ............................................................................. 64 Figura 13 - Wireframe da página de subcategorias .................................................................. 65 Figura 14 - Wireframe tela de discussão .................................................................................. 65 Figura 15 - Wireframe da tela de perfil do usuário .................................................................. 66 Figura 16 - Exemplo da utilização da fonte Aldrich ................................................................ 67 Figura 17 - Família tipográfica Aldrich - Coleção de glifos .................................................... 68 Figura 18 - Paleta cromática ..................................................................................................... 69 Figura 19 - Imagem promocional do TKD, retratando as facções: Renegados e Consortium . 70 Figura 20- Tela inicial do fórum, ou Categorias. ..................................................................... 71 Figura 21 – Tela de listagem de discussões, ou Sub-categorias. .............................................. 73 Figura 22 - Destaque botão de iniciar uma discussão. ............................................................. 74 Figura 23 - Destaque do tool-tip com a pré-visualização da discussão. ................................... 75 Figura 24 - Atalhos para as discussões. .................................................................................... 75 Figura 25 - Detalhe para o recurso de breadcrumbs e para o acesso à outras páginas............. 75 Figura 26 - Tela de discussão, ou post, do fórum. .................................................................... 76 Figura 27 - Detalhe para o recurso de avaliar a discussão........................................................ 77 Figura 28 - Recurso de spoiler ativado. .................................................................................... 78 Figura 29 - Tela de perfil de usuário. ....................................................................................... 79 Figura 30 - Tela de lista de membros. ...................................................................................... 80 Figura 31- Discussões recentes ................................................................................................ 81 Figura 32 - Discussões sem respostas....................................................................................... 82

SUMÁRIO 1 INTRODUÇÃO................................................................................................................. 12 1.1 DELIMITAÇÃO DO PROBLEMA ................................................................................ 13 1.2 OBJETIVOS .................................................................................................................... 13 1.2.1 Objetivo geral .............................................................................................................. 13 1.2.1.1 Objetivos Específicos ................................................................................................. 13 1.3 JUSTIFICATIVA ............................................................................................................ 14 1.4 ESCOPO .......................................................................................................................... 15 1.5 ADERÊNCIA À LINHA DE PESQUISA ....................................................................... 15 1.6 PROCEDIMENTO METODOLÓGICO ......................................................................... 15 1.6.1 Metodologia da pesquisa............................................................................................. 15 1.6.2 Metodologia de projeto ............................................................................................... 16 2 FUNDAMENTAÇÃO TEÓRICA ................................................................................... 19 2.1 DESIGN DIGITAL E A EXPERIÊNCIA DO USUÁRIO .............................................. 19 2.1.1 A experiência do usuário segundo Garrett ............................................................... 21 2.1.2 Implementação HTML do fórum do TKD ............................................................... 24 2.2 UMA CONTEXTUALIZAÇÃO AO GÊNERO MMOG ............................................... 24 2.2.1 O Taikodom: Living Universe e o gênero MMORPG ............................................. 26 2.3 FÓRUNS DE DISCUSSÃO ............................................................................................ 27 2.3.1 O Taikodom Living Universe e o seu Fórum de discussões .................................... 30 2.4 REGRAS DE OURO DE SHNEIDERMAN & PLAISANT .......................................... 31 3 PESQUISA ........................................................................................................................ 33 3.1.1 Análise dos fóruns de destaque .................................................................................. 33 3.1.1.1 EVE Online ................................................................................................................ 34 3.1.1.2 Diablo III .................................................................................................................... 36 3.1.1.3 World of Warcraft ...................................................................................................... 39 3.1.1.4 StarCraft II .................................................................................................................. 41 3.1.1.5 Taikodom: Living Universe ....................................................................................... 44 3.1.2 Resultado da análise dos fóruns ................................................................................. 46 4 APLICAÇÃO DOS CINCO PLANOS DA EXPERIÊNCIA DO USUÁRIO ............. 48 4.1 PLANO DE ESTRATÉGIA ............................................................................................ 48 4.1.1 Objetivos do Produto .................................................................................................. 48 4.1.1.1 Entrevista com os gestores de comunidade ................................................................ 48

4.1.1.1.1 Síntese da entrevista ................................................................................................ 49 4.1.2 Necessidades do usuário ............................................................................................. 50 4.2 PLANO DE ESCOPO...................................................................................................... 55 4.2.1 Identificação, descrição e listagem de requisitos ...................................................... 55 4.2.2 Especificações Funcionais ........................................................................................... 55 4.2.3 Requisitos de Conteúdo .............................................................................................. 57 4.3 PLANO DE ESTRUTURA ............................................................................................. 58 4.3.1 Design de interação ..................................................................................................... 58 4.3.1.1 Modelo conceitual de interação para o fórum do game Taikodom: Living Universe 58 4.3.2 Arquitetura de Informação ........................................................................................ 60 4.4 PLANO DE ESQUELETO .............................................................................................. 62 4.4.1 Design da Interface...................................................................................................... 62 4.4.2 Design de Navegação ................................................................................................... 63 4.4.3 Design da Informação ................................................................................................. 63 4.4.4 Wireframe ..................................................................................................................... 64 4.5 PLANO DE SUPERFÍCIE .............................................................................................. 66 4.5.1 Design Visual ............................................................................................................... 67 4.5.2 Sobre a dualidade cromática do background do fórum ........................................... 69 4.5.3 Menu global do fórum................................................................................................. 70 4.5.4 Tela inicial .................................................................................................................... 71 4.5.5 Tela de listagem de discussões .................................................................................... 73 4.5.6 Tela de discussão (post) ............................................................................................... 76 4.5.7 Tela de perfil de usuário ............................................................................................. 78 4.5.8 Lista de membros ........................................................................................................ 80 4.5.9 Tela de listagem de discussões recentes ..................................................................... 80 4.5.10 Discussões sem respostas ............................................................................................ 81 5 VALIDAÇÃO DOS MOCKUPS ...................................................................................... 83 5.1 DIFICULDADES ENFRENTADAS NA IMPLEMENTAÇÃO .................................... 83 6 CONSIDERAÇÕES FINAIS ........................................................................................... 87 REFERÊNCIAS ..................................................................................................................... 89 APÊNDICES ........................................................................................................................... 93 APÊNDICE A – HTML DA PÁGINA CATEGORIAS ...................................................... 94 APÊNDICE B – HTML DA PÁGINA SUB-CATEGORIAS ........................................... 103 APÊNDICE C – HTML DA PÁGINA DISCUSSÕES ...................................................... 114

APÊNDICE D – HTML DA PÁGINA MEMBROS ......................................................... 122 APÊNDICE E – HTML DA PÁGINA PERFIL DE USUÁRIO ...................................... 126

INTRODUÇÃO O mercado de games, ou jogos eletrônicos, vem crescendo de forma expressiva no

mundo todo. Segundo um relatório anual da International Development Group (2014), empresa de pesquisa e previsões focada neste mercado, a arrecadação global com games movimentou cerca de 56 bilhões de dólares no mundo, só em 2014. No Brasil, este mercado também vem apresentando crescimento expressivo. Trata-se de um mercado relativamente novo que apresenta muitas possibilidades. Segundo a consultoria PWC (2012), o Brasil ocupa o quarto lugar mundial no mercado de jogos. Movimentou em 2011 cerca de 495 milhões de dólares. Este mercado vem crescendo 8,8% ao ano e em 2016 deve movimentar cerca de 640 milhões de dólares. Com uma população de 196.000.000 de pessoas e uma comunidade de jogadores (comumente chamados gamers) de 21.000.000 pagantes, o Brasil se apresenta ao mundo como o segundo maior mercado consumidor de jogos digitais da América Latina, com uma fatia de 31%, atrás apenas do México, com 47%. (PWC, 2012) No Brasil, a Hoplon é uma das empresas pioneiras neste mercado. Localizada em Florianópolis, no estado de Santa Catarina, está presente desde o ano 2000, quando começou o desenvolvimento do jogo Taikodom. A empresa conta com quase 40 funcionários nas áreas de programação, game design, artes gráficas, pesquisa e desenvolvimento etc. Atualmente, além de distribuir no mercado nacional outros seis jogos, a Hoplon produz o game TAIKODOM: LIVING UNIVERSE (TKD) (2013, informação verbal)1. Taikodom: Living Universe é um jogo no estilo Massive Multiplayer Online Game (MMOG)2, no qual o jogador é um piloto de espaçonave que precisa lutar para sobreviver e prosperar num universo espacial pós-apocalíptico do século XXIII. A principal característica do jogo é o aspecto dinâmico do seu universo ficcional, onde as decisões e interações dos jogadores podem influenciar o universo ficcional de jogo inteiro, exigindo atualizações constantes destas mudanças para toda sua base de usuários. O subtítulo Living Universe faz menção a esse aspecto “ao-vivo”, de um universo dinâmico, que atualiza os acontecimentos de dentro do game diretamente no website, nas redes sociais e no fórum do jogo.

Informações coletadas em reunião com o departamento de marketing e o departamento pessoal da Hoplon, em Florianópolis, em 27/05/2013. Massively Multiplayer Online Game é um estilo de jogo de fantasia online, que se caracteriza pela quantidade massiva de jogadores interagindo ao mesmo tempo (WOLFE, 2013).

Em linhas gerais, é esta interação dinâmica provocada pelos usuários, que visa tornar a experiência de jogo mais imersiva. Dessa forma, esse trabalho propõe uma reavaliação do fórum de discussões do TKD, argumentando sobre a importância deste produto para a experiência de seus jogadores e também para os negócios da empresa, utilizando os estudos e teorias de design para o projeto de um novo fórum de discussões para o jogo. 1.1

DELIMITAÇÃO DO PROBLEMA Com os avanços dos paradigmas tecnológicos provocados pelas novas

tecnologias, além da constante valorização do design e da questão da satisfação da experiência nos jogos digitais, as desenvolvedoras têm buscado atentar para todos os pontos de contato dos seus clientes com o produto, oferecendo sites, redes sociais e fóruns cada vez mais elaborados, visando o engajamento, imersão e fidelização de seus usuários. Este trabalho busca compreender a importância do uso do fórum do Taikodom: Living Universe na experiência de seus jogadores, oferecendo meios de valorizar essa experiência e fazendo com que seus usuários utilizem esse fórum como um recurso adicional de comunicação, imersão e fidelização, oportunizando dessa forma um incremento na monetização dessa base, através do engajamento e fidelização dos usuários.

1.2

OBJETIVOS

1.2.1 Objetivo geral Desenvolver o redesign do fórum do jogo Taikodom: Living Universe. 1.2.1.1 Objetivos Específicos



Compreender e descrever conceitos de design e de games, a fim de favorecer o entendimento e o desenvolvimento do projeto;



Descrever as informações e comportamentos fundamentais da interação do jogador com o Taikodom: Living Universe;



Pesquisar fóruns de referência, a fim de se parametrizar o projeto;



Averiguar às necessidades dos usuários do fórum do TKD;



Averiguar os objetivos estratégicos da Hoplon com o fórum do TKD;



Construir mockup de verificação para funcionamento nos principais navegadores da Internet.

1.3

JUSTIFICATIVA Os novos paradigmas tecnológicos tem levado o mercado de games a apresentar

produtos cada vez mais sofisticados, voltando sua atenção a todos os elementos da experiência do usuário, tal qual o fórum dos jogos. A importância de um fórum bem desenvolvido para um jogo com grandes quantidades de jogadores como o Taikodom: Living Universe é grande, porque tem a possibilidade de engajar cada vez mais seus jogadores com o universo ficcional do produto, favorecendo a fidelização e monetização. Para que o fórum do Taikodom: Living Universe apresente sensação de sofisticação e adequação à arte gráfica do jogo, para que ele favoreça a imersão e o envolvimento dos jogadores que o utilizam e para que ele se destaque no mercado de games, é preciso que se desenvolva um projeto de redesign com um foco maior na experiência do usuário, de modo que suas necessidades sejam atendidas e de modo que se contemplem também os objetivos da desenvolvedora em relação ao fórum do seu jogo. A disciplina de design tem a característica de sempre colocar o usuário no centro das

preocupações

projeto,

considerando

suas

necessidades,

expectativas

comportamentos, tendo em vista ainda os objetivos da empresa portadora do jogo. Nesse sentido, este trabalho justifica-se porque busca favorecer a satisfação dos usuários do fórum através do redesign do mesmo, objetivando um maior engajamento desses com o produto através da imersão no seu universo ficcional, o que favoreceria ainda a fidelização desses usuários, oportunizando inúmeras possibilidades de monetização por parte da publicadora. Ademais, a academia se beneficiará com este trabalho pelo fato de tratar-se de um documental específico de design para o projeto de um website para um game brasileiro que é referência na indústria nacional. Ainda, este pesquisador se beneficiará deste trabalho ao passo que poderá aplicar os estudos abordados na sua graduação num case real de mercado, num game que representa o maior investimento no mercado de games brasileiro.

1.4

ESCOPO Este trabalho tem como objeto de estudo o fórum do jogo Taikodom: Living

Universe. Não fazem parte deste trabalho o website do jogo ou da empresa, tampouco as interfaces do game em si. Limita-se à proposição dos modelos visuais e a verificação de uso do novo fórum com um mockups das principais interfaces e interações, sem o desenvolvimento de uma versão real de testes com alimentação da base de dados oficial do jogo e da empresa. Para isso, o trabalho se limitou às competências do design, que são as suas interfaces com a utilização das linguagens Hypertext Markup Language (HTML) e Cascading Style Sheet (CSS). Toda a parte de programação do fórum e sua operação ficaram ausentes desta pesquisa, visto fazer parte de outras atribuições que não a disciplina de design. Para a validação dos mockups, o navegador da internet utilizado foi o Google Chrome, da Google. Essa escolha se deu em virtude da esmagadora maioria dos acessos ao fórum se dar através desse navegador e ainda pelo fato da empresa portadora do jogo considerar apenas esse navegador no escopo de seus projetos. 1.5

ADERÊNCIA À LINHA DE PESQUISA Este trabalho trata de interfaces digitais, interação homem-computador (IHC),

experiência do usuário e internet. Orienta-se à Linha de Pesquisa: “Design para as Novas Mídias e Interatividade / Design Digital”. 1.6

PROCEDIMENTO METODOLÓGICO Para o desenvolvimento deste projeto escolheu-se dois tipos de metodologias -

uma para o levantamento de informações de caráter científico (método de pesquisa) - e outra para o desenvolvimento do projeto do fórum (método projetual). As duas metodologias são abordadas a seguir. 1.6.1 Metodologia da pesquisa Nas fases iniciais do projeto o pesquisador não estava familiarizado com o objeto da pesquisa e se fez necessário uma abordagem exploratória na bibliografia disponível a fim de se diminuir as incertezas em relação às fases iniciais do projeto. Conforme Gil (2002), essa

abordagem tende a elucidar as questões que ocorrem no início do projeto. A pesquisa se concentrou no levantamento de informações a respeito de temas como games, fóruns de discussão, metodologias de pesquisa e de projeto, e direcionou o trabalho ao passo que levantou a fundamentação teórica necessária para o início deste TCC. Após a realização da pesquisa bibliográfica, realizou-se uma breve análise de fóruns de games de destaque de modo a aumentar a familiaridade do pesquisador com o ambiente dos fóruns de discussão para a posterior realização do projeto do fórum do TKD. (MARCONI; LAKATOS, 2003) Essa análise buscou se basear nos conceitos gerais da disciplina de design, isto é, se eles apresentavam uma boa legibilidade; se favoreciam a usabilidade; se faziam uso de iconografia adequada; se ofereciam disposição apropriada de informações; se favoreciam a troca de informações com outros sistemas, sites etc. Além disso, foi utilizada a abordagem das 8 Regras de Ouro de Schneiderman e Plaisant (2010), na qual os autores sugerem oito princípios universais que visam aumentar a satisfação dos usuários ao se interagir com os computadores. Num terceiro momento, e seguindo a mesma abordagem supracitada, foi realizada uma breve análise do fórum do Taikodom para comparação com as informações levantadas na análise dos outros fóruns, a fim de se concluir se o fórum do TKD também estaria de acordo com aqueles princípios. 1.6.2 Metodologia de projeto Para o desenvolvimento do projeto foi selecionada a metodologia de Jesse James Garrett (2011), apresentada no seu livro The Elements of User Experience, no qual o autor propõe uma metodologia para o desenvolvimento de projetos de design digital e especialmente

websites.

Essa

metodologia

apresenta

uma

abordagem

sequencial,

desenvolvendo-se da base para o topo, que visa considerar todos os aspectos da experiência de uso, como pode ser visto a seguir:

Figura 1 - Diagrama dos Elementos da Experiência do Usuário

Fonte: Elaboração do autor, baseado na metodologia de Garrett (2011)

O primeiro Plano da metodologia (de baixo para cima) é chamado de Plano de Estratégia e busca contemplar duas preocupações fundamentais no planejamento da experiência do usuário: as Necessidades dos Usuários e os Objetivos do Site. A primeira se ocupa com o fato de que nem todos os usuários são iguais, buscando identificar e atender as necessidades da maior variedade possível de usuários. Para o levantamento dessas necessidades foi aplicado um questionário com esses usuários, diretamente no fórum do jogo. A segunda preocupação fundamental ao se planejar a experiência do usuário leva em consideração os objetivos da empresa com o produto, como: suas metas; suas perspectivas de negócio; sua estratégia de mercado etc. Para o levantamento dos objetivos da empresa, ocorreu uma entrevista com os responsáveis pela comunicação e marketing da empresa e do TKD. No segundo nível do diagrama tem-se o Plano de Escopo, no qual o projetista busca realizar uma listagem com as necessidades e requisitos do projeto, ou seja: quaisquer necessidades técnicas que o projeto necessitará para ser concluído, além do conteúdo que alimentará o site. Nesse projeto consideraram-se todos os apontamentos e definições

estabelecidos no Plano de Estratégia, para a elaboração de uma listagem que possibilitou uma visão ampla da dimensão do trabalho e de seus requisitos. Após a definição dos Planos de Estratégia e de Escopo, chega-se ao Plano de Estrutura, onde o projetista busca conceder uma estrutura conceitual ao site. Garrett (2011) divide esse Plano em duas partes: Design de Interação e Arquitetura de Informação. Nessa metodologia o Design de Interação ocupou-se em elaborar uma estrutura conceitual para as opções envolvidas na realização e conclusão de tarefas, através da criação de um modelo conceitual, conforme pode ser visto no desenvolvimento deste trabalho. Já a Arquitetura de Informação propõe uma estruturação física da navegação do usuário através das várias páginas do sistema. Conforme Mulling; Pereira (2008 p. 3550) “Como resultado [do Plano de Estrutura], o principal produto de um arquiteto de informação é o mapa do site, que servirá de base para o restante do processo.” O Plano de Esqueleto é parecido com o Plano de Estrutura, ao passo que também busca uma estruturação dos elementos da experiência de uso, só que de maneira mais refinada e detalhada. Garrett (2011) propõe que no Plano de Esqueleto a massa de requerimentos levantados no Plano de Escopo e no Plano de Estrutura defina o formato – ou esqueleto – do site, identificando seus aspectos específicos da interface, da navegação e da arquitetura de informação, que tornarão a estrutura em algo concreto e compreensível. O resultado prático do Plano de Esqueleto nesse trabalho é o wireframe do fórum. No topo do diagrama encontra-se o Plano de Superfície, onde toda a pesquisa e levantamentos realizados durante o projeto são convergidos em uma proposta para o aspecto visual do fórum. É neste momento que “[...] tornamos a atenção para os aspectos do produto que nossos usuários notarão primeiro: o Design Visual.” (2011 p. 133, tradução nossa). Nesse instante trabalha-se para que conteúdo, funcionalidade e estética convirjam em um produto que cative a atenção do usuário, não só como estrutura de informação, mas como interface gráfica. A aparência visual dos produtos é um determinante crítico da resposta do consumidor e do sucesso do produto. Julgamentos são muitas vezes feitos sobre a elegância, funcionalidade e significado social dos produtos baseados em grande parte na informação visual. (CRILLY, MOULTRIE & CLARKSON, 2004 apud MÜLLING; PEREIRA, 2008 p. 3551)

FUNDAMENTAÇÃO TEÓRICA Neste capítulo é desenvolvida uma revisão bibliográfica para conceitos e termos

específicos abordados neste trabalho. O objetivo é apresentar embasamentos teóricos de modo a contextualizar o leitor o design experiencial e ao universo do Taikodom: Living Universe. 2.1

O DESIGN DIGITAL E A EXPERIÊNCIA DO USUÁRIO O design digital é uma dentre as várias especialidades3 do design e busca conciliar

a criatividade e o senso estético apurado, característico da disciplina de design, com os recursos e habilidades no uso das ferramentas da computação gráfica, de modo a criar soluções para mídias digitais diversas (PUCPR, 2015). Dentre as diversas áreas de atuação de um designer digital, pode-se destacar: mídias digitais; design de informação; design de interação; arquitetura de navegação; design de navegação; design de interface; ensino a distância; videogames e Web-design – onde se situa este projeto (MORUMBI, 2008; PUCPR, 2015; ROYO, 2008). Com o advento das novas tecnologias, e a expansão cada vez maior da disciplina de design e sobretudo o aparecimento do design digital, os projetistas se viram na incumbência de tornar a experiência de uso desses produtos e serviços mais agradável, preocupando-se mais com a qualidade da experiência do usuário do que com as inúmeras características técnicas e funcionais do produto em si, caracterizando uma mudança de foco fundamental, do produto para o usuário. Nesse cenário surgiu a disciplina conhecida como Design Experiencial, também conhecida como UX Design ou Design de Experiência do Usuário (User Experience Design). Segundo Agni (2015), o termo apareceu pela primeira vez em 1995 e “foi cunhado por Donald Norman, quando ele era vice-presidente do Advanced Technology Group4 da Apple, pois ele acreditava que definições como Interface de Usuário e Usabilidade limitavam o entendimento sobre o que o trabalho dele representava.” Nas palavras de Silvano (2014 p. 37): 3

Aqui a palavra “especialidade” está sendo utilizada como habilitação, no sentido de que o design digital seria uma habilitação específica da disciplina de design. Da mesma forma que existe o design gráfico, o design de produto e o design de moda. O Advanced Technology Group era um laboratório de pesquisas avançadas da Apple criado por Larry Tesler em 1986, para permitir à empresa estudar questões referentes a necessidades dos usuários e diversas tecnologias. O laboratório funcionou durante 11 anos serviu de modelo para outros grupos de desenvolvimento da empresa ao longo dos anos (MILLER, 1998).

O Design Experiencial [...] é uma abordagem multidisciplinar a qual abrange a importância das experiências na relação do usuário com produtos e serviços. O Design Experiencial na prática busca tornar as experiências de uso de produtos e serviços, agradáveis, preocupando-se com mais do que os objetivos funcionais dos mesmos. Tem como objetivo, sobretudo, que a interação usuário-produto seja prazerosa, procurando agregar valores emocionais e subjetivos a esta.

Conforme colocado por Silvano, o Design Experiencial é uma especialidade de abordagem multidisciplinar, preocupada com a satisfação total do usuário. Também segundo Silvano (2014), a coordenação de disciplinas que compõe a área de experiência do usuário é um conceito inicialmente proposto por Saffer (2007), na sua obra Designing of Interaction, como pode ser visto abaixo:

Figura 2 - Disciplinas que compõem a área de experiência do usuário

Fonte: Designing for the Interaction

O termo design experiencial é um termo que vem sendo discutido e trabalhado pela academia e vem tendo suas bases conceituais construídas dia a dia. A esse respeito Shedroff (2009, apud Mulling, p. 37) comenta que: Design da experiência como uma disciplina é algo tão novo que sua própria definição está em fluxo. Muitos o vêem apenas como um campo para mídias digitais, enquanto outros têm uma visão mais abrangente, que combina disciplinas diversas como teatro, design gráfico, narrativa, design de exposições, design de parques temáticos, design de jogos, design de interiores, arquitetura e muito mais.

Para este trabalho adotou-se a definição de experiência do usuário de Garrett (2011), na qual o autor argumenta que, em resumo, a experiência do usuário é a forma como o produto se comporta e é usado no mundo real, ou seja, além de atentar para as suas funcionalidades e recursos, mas também para a percepção de como será o contato do usuário com esse produto. A abordagem de Garrett0 (2011) quanto ao projeto da experiência do usuário é discorrida a seguir. 2.1.1 O projeto da experiência do usuário na abordagem de Garrett Para o desenvolvimento deste trabalho foi utilizada a metodologia dos Cinco Planos da Experiência do Usuário, de Garrett (2011); a multidisciplinaridade desta metodologia, o seu enfoque na experiência do usuário e a natureza relativamente nova da disciplina de design no âmbito digital podem criar uma confusão conceitual no entendimento do processo. Dessa forma, é importante demarcar o entendimento dos conceitos abordados na metodologia para que se possa ter uma compreensão melhor deste trabalho. Num cenário onde as novas mídias estão em franco desenvolvimento, a preocupação com o projeto da experiência do usuário é vital para todos os tipos de produtos e serviços, entretanto, a metodologia supracitada é particularmente aproveitada em projetos de design digital. Através da sua abordagem, Garrett (2011) propõe uma divisão conceitual da prática projetual em cinco camadas: Estratégia, Escopo, Estrutura, Esqueleto e Superfície; outra subdivisão proposta pelo autor distingue o design de interface, o design de navegação e o design de informação (LISBOA, 2014). Além dessa divisão tripartida, o autor aborda outra divisão, que trata do design de interação e da arquitetura de informação. Para Lauzer e Fragoso (2011 p. 40), no caso de websites e projetos de design digital em geral, um fator fundamental para o projeto da experiência do usuário é a navegabilidade, que diz respeito ao “projeto estrutural de espaços de informação, abrangendo a organização, a rotulagem, a busca e a navegação de um website, cuja experiência se caracteriza pela usabilidade e facilidade na localização de informações.” Para Garrett (2011), a navegabilidade decorre diretamente da arquitetura de informação, que consiste em se criar esquemas organizacionais que prevejam a movimentação dos usuários através dos diversos ambientes (ou páginas) do site, como no exemplo abaixo:

Figura 3 - Modelo de arquitetura de informação simples

Fonte: Elaboração do autor (2015)

Na concepção de Garrett (2011), a arquitetura de informação está intimamente ligada às opções envolvidas no acesso do usuário às informações disponibilizadas pelo website; por exemplo: encontrar no website o contato da empresa, ou o seu link para o Facebook. Já o design de interação, por sua vez, preocupa-se em considerar as opções relativas à execução e conclusão de determinadas tarefas pelo usuário. “O design de interação está preocupado em prever o comportamento do usuário e definir como o sistema vai acomodar e responder àquele comportamento.” (GARRETT, 2011 p. 81, tradução nossa) Para prever o comportamento do usuário e responder adequadamente a esse comportamento, Garrett (2011) sugere a criação de modelos conceituais para o sistema, onde o projetista buscaria levar o usuário a enxergar o site de forma que seus recursos, ou suas funções, tivessem alguma familiaridade a eles, por exemplo: o modelo conceitual do sistema de compra de um site de vendas on-line poderia apresentar elementos que pudessem ser identificados em um sistema equivalente na vida real, como o conceito de um carrinho de compras, de um balcão de pagamento, preços a mostra, exibição do produto de maneira mais interativa possível, o que tende a aproximar o cliente do produto. Clarificados os conceitos de arquitetura de informação e design de interação, abordados no Plano de Estrutura, a compreensão da metodologia requer ainda a distinção entre três outras subáreas tratadas no plano de esqueleto da metodologia: design da interface, design da navegação e design da informação. Conforme Garrett (2011), no Plano de Estrutura o projetista define como o website se comportará; já no Plano de Esqueleto, busca-se definir qual forma aquelas funcionalidades terão.” Na perspectiva do autor, se a questão projetual envolver fornecer aos usuários a capacidade para realizar alguma determinada tarefa, trata-se de design de interface; se envolver fornecer aos usuários a capacidade de ir até algum lugar,

se trata de design de navegação; e se envolver a comunicação de alguma ideia ao usuário, se trata então de design de informação. O autor sugere que na etapa de design de interface o projetista tenha o cuidado de selecionar os recursos mais adequados para a interação do usuário com o seu sistema, como menus drop-down, recursos de hover, destaque em links visitados etc, valendo-se de convenções e metáforas existentes em outras interfaces parecidas, de modo a fazer sua interface consistente com outras as quais seus usuários já estariam familiarizados. A etapa do design de navegação, por sua vez, busca contemplar os aspectos inerentes a capacidade do usuário de se movimentar de uma página à outra do sistema. No plano de estrutura o projetista prevê os espaços por onde o usuário poderá percorrer, já no plano de esqueleto – e mais precisamente na etapa de design de navegação – o projetista precisa prever quais artifícios certificarão o usuário de que ele poderá ir de um ponto até o outro. Para isso o autor sugere a utilização de recursos como breadcrumbs5; presença de um menu global, com acesso aos links mais importantes do fórum; cores dos links diferentes do corpo de texto; presença de mecanismo de busca em todas as páginas do site etc. Já o design de informação é um elemento aglutinador do plano de esqueleto, ao passo que deve considerar todas as informações que serão passadas na interface e apresentalas da melhor maneira possível ao usuário. O autor não sugere nenhuma ferramenta para atingir esse objetivo, ao invés disso ele sugere que o design de informação deve se preocupar em transmitir a informação ao usuário da melhor maneira possível, e acrescenta: “O segredo é agrupar e organizar os elementos de informação de maneira que reflita como seus usuários pensam e apoiam suas tarefas. As relações conceituais entre esses elementos equivalem a um micro-nível de arquitetura de informação; design de informação entra em jogo quando temos que comunicar essa estrutura na página.” (GARRETT, 2011 p. 126, tradução nossa)

Como resultado prático do Plano de Esqueleto têm-se os wireframes, que são como esquemas visuais onde o design da interface, o design de navegação e o design de informação tomam a forma de um esboço visual de como a página ficará no final do projeto, mas sem o refinamento visual final – que é uma preocupação do design visual. “Wireframes capturam todas as decisões tomadas no plano de esqueleto em um único documento que serve

Breadcrumbs são recursos de navegação que ajudam o usuário a manter o controle de sua posição dentro do sistema, como: de onde ele veio, onde ele está e para onde ele poderá ir. O termo vem da trilha de migalhas de pão que João e Maria deixam para se localizarem, no famoso conto de fadas popular. (LEVENE, 2010)

de referência para o trabalho do designer visual e para a implementação do sistema.” (GARRETT, 2011) 2.1.2 Implementação HTML do fórum do TKD Para a implementação do sistema, é utilizada uma gama variada de linguagens de programação, que consistem em comunicar as informações dos jogadores – como a carteira de Hoplons6, o nível de experiência da personagem, o seu nome, localização, idade etc, com o fórum do jogo. Essa comunicação se dá através da linguagem Hypertext Preprocessor (PHP), que busca esses dados no servidor da empresa e disponibiliza no front-end do fórum.7 O desenvolvimento deste trabalho limita-se a utilização da linguagem de marcação HTML, para a marcação dos espaços de conteúdo, além da utilização da linguagem de folhas de estilo CSS, para a apresentação visual desse HTML. 2.2

UMA CONTEXTUALIZAÇÃO AO GÊNERO MMOG MMOG é um termo usado para definir um tipo de game no qual uma quantidade

relativamente grande de jogadores interage ao mesmo tempo num ambiente virtual persistente, compartilhando de um ou mais universos ficcionais (WOLFE, 2013). Um ambiente virtual persistente é um ambiente que pode existir com ou sem a participação do jogador, ou seja, é um mundo virtual que tem vida própria, que sofre modificações e que oferece interação a outros usuários, mesmo que esses usuários estejam presentes apenas em momentos diferentes (WOLFE, 2013; YEE, 2006a). O termo define uma série de jogos jogados não necessariamente em computadores ou videogames, mas também em, tablets, celulares e redes sociais. A presença e a influência dos MMOGs vêm crescendo de maneira surpreendente nos últimos anos, envolvendo usuários de todas as idades, gêneros e culturas, em todos os continentes, numa comunidade global multicultural que só tende a crescer. O pesquisador Christopher Wilkinson (2009) comenta que o mercado de MMOGs tem crescido além das expectativas, com um dos maiores lucros na multimilionária indústria do entretenimento.

Hoplons é a moeda oficial utilizada pela Hoplon na maioria dos jogos da empresa, em especial o Taikodom: Living Universe. Se trata de um valor convertido do Real para o Hoplons. 7 Informação verbal.

Num MMOG os jogadores possuem personagens8 com características e histórias variadas, no qual o elemento social é um fator muito importante para a jogabilidade e a imersão nesse estilo. Nos MMOGs os jogadores têm a possibilidade de interagir com toda a sorte de usuários, desde pessoas que eles conhecem pessoalmente até pessoas que nunca viram na vida, de todas as partes do mundo (RANGARAJAN, 2014). Uma pesquisa feita com 912 jogadores de 42 países revelou que essa relação pode ser “extremamente intensa ao ponto de criar fortes laços de amizades entre os envolvidos, com altas porcentagens de jogadores fazendo amigos e parceiros para a vida toda” (COLE; GRIFFITHS, 2007, p. 575 tradução nossa). Os MMOGs costumam ser mais “viciantes” quando comparados a outros games e isso pode estar relacionado a uma profunda sensação de imersão que esses jogos proporcionam, com universos ficcionais e enredos elaborados, organização social e política, economia complexa etc, evoluindo dentro de uma realidade alternativa na qual os usuários investem horas, dias, meses e até mesmo anos, desenvolvendo seus avatares (WILKINSON, 2009). Esses tipos de games podem ser tão envolventes que seu aspecto viciante não raramente é comparado ao de drogas pesadas, como cocaína e heroína (RAWSTORNE, 2010), tendo a revista inglesa The Economist (2001) chegado ao ponto de descrever o gênero como “insanamente viciante”, devido ao fato de seus jogadores considerarem se tratar de uma experiência tão social quanto competitiva, levando-os a investirem inúmeras horas de jogo na criação de personagens cada vez mais poderosos. Existem muitos estilos de MMOGs no mercado e a maioria dos contém elementos de interpretação de personagem, nos quais os jogadores assumem características da personagem que controlam, interagindo com os outros usuários no jogo em tempo real, através de seu avatar,9 e comunicando-se entre si através de texto e, ocasionalmente voz (YEE, 2006b). Essa interação que envolve alguns elementos de interpretação da personagem caracteriza um sub-gênero do estilo MMOG, conhecido como MMO Role Playing Game (MMORPG), que é o estilo adotado no jogo Taikodom: Living Universe e será abordado a seguir.

8 9

Normalmente chamados de avatares (YEE, 2006a) No contexto de MMOG um avatar é uma representação interativa da personagem do jogador ou ainda a personagem em si, que apresenta todas as características inerentes àquela personagem. Diferem da definição de avatar para uso em fóruns de discussão, mídias sociais etc – que são imagens normalmente estáticas.

2.2.1 O Taikodom: Living Universe e o gênero MMORPG O TKD é um MMORPG ambientado num futuro pós-apocalíptico, onde cada jogador assume o papel de um humano – também chamado de ressurecto, no jargão do game – que foi ressuscitado por volta do ano 2273 numa sociedade espacial hipercapitalista e meritocrática, após a humanidade ter sido expurgada do planeta terra por uma entidade de poder incomensurável (BERALDO, 2008). A primeira versão do game começou a ser desenvolvida em 2004 e começou a ganhar o mundo em 2009, através de uma parceria entre a Hoplon e a K2 Network, com distribuição para 31 países, em nove línguas diferentes. (COSTA, 2009) O TKD conta com um rico universo ficcional, criado em colaboração com uma equipe de escritores contratados pela Hoplon especialmente para isso; destacam-se os autores de ficção científica Gerson Lodi-Ribeiro e João Marcelo Beraldo. A empresa uniu esforços para buscar construir um universo ficcional que fosse o mais elaborado possível e que seduzisse o jogador, o que resultou num “universo ficcional rico e consistente, embasado num arco histórico que abrange mais de um quarto de milênio, desde o início do século XXI até meados do século XXIII e além” (BERALDO, 2014). Em 2008 a empresa lançou em parceria com a Devir Livraria o livro Taikodom: Despertar, de J. M. Beraldo, que conta a história de dois pilotos terráqueos que foram mantidos em estado de animação suspensa durante a diáspora terrestre para então serem ressuscitados num futuro espacial pós-apocalíptico – cenário no qual os jogadores do TKD estão inseridos. Em 2009 a empresa lançou o livro Taikodom: Crônicas, de Gerson LodiRibeiro, que é uma coletânea de sete contos que narram os acontecimentos considerados mais importantes do universo ficcional do TKD. Também foi lançada uma linha de graphic novels (espécie de gibis) baseada no universo ficcional do game. A magnitude desse universo ficcional é descrita na apresentação do livro Taikodom: Despertar, de J. M. Beraldo (2014, grifo nosso) no site da publicadora Devir: [...] Mas, um quarto de milênio é um período de tempo considerável. Do mesmo modo, com oitenta anos-luz de diâmetro, a esfera imaginária centrada no Sol que define o Espaço Humano constitui um volume imenso, apesar de representar apenas uma gotícula no oceano da Periferia Ignota. Portanto, com esse intervalo espaçotemporal tão vasto à disposição, não é de admirar que nossas narrativas nas diferentes mídias se desenrolem em várias épocas da História do Futuro e em diversos sistemas estelares do Espaço Humano, a tal gotícula de oitenta anos-luz é chamada de “Taikodom” pela maioria dos cidadãos, numa corruptela sutil da acepção original desse termo.

Esse complexo ecossistema funciona como um poderoso recurso de imersão, ao passo que ajuda a introduzir o jogador ao enredo e à atmosfera do jogo, além de favorecer o engajamento do usuário ao produto, isso porque o storytelling10 ajuda a complementar e enriquecer a experiência do jogador, fazendo-o mergulhar no universo do produto de maneira natural, criando uma relação emocional entre o narrador e a audiência (ALBUQUERQUE, 2011). A esse propósito, Salmon (2008) comenta que o storytelling acaba sendo mais eficaz do que a propaganda na arte do convencimento, porque não pretende modificar as convicções do usuário, mas sim fazê-lo participante de uma história apaixonante, de uma grande novela. Num universo ficcional tão rico o jogador do Taikodom se vê instigado a adquirir uma posição ideológica no meio desse emaranhado político e social, o que costuma refletir no modo como ele interage com o jogo e com os outros jogadores, reforçando o elemento de interpretação de personagem, característica do gênero MMORPG. A esse respeito, Williams et al (2006) comentam que ao incorporar essa forma de interação, os jogadores constroem e mantém relacionamentos duradouros, realizando tarefas dentro do jogo com outras pessoas e unindo-se em grandes grupos11 sociais, relação que é descrita como similar às da vida real e que ocasionalmente levando os jogadores a prolongarem a experiência para além dos limites do jogo enquanto software, extrapolando a experiência do jogo para outras mídias, como redes sociais, chats, e-mails e o próprio fórum do jogo – objeto desse estudo (WOLFE, 2013). 2.3

FÓRUNS DE DISCUSSÃO Os fóruns de discussão são ambientes virtuais criados para promover o diálogo

entre seus utilizadores através de tópicos12 elaborados pelos moderadores do fórum ou mesmo pelos seus usuários, em vista de favorecer a troca de experiências, informações, dicas, truques etc (FEERST; STEWART, 2007). Nos fóruns de discussão os usuários comunicam-se de maneira assíncrona, ou seja, os membros postam mensagens13 uns para os outros em momentos diferentes, sem que todos precisem estar online ao mesmo tempo (BEZERRA, 2012; DREUNEN, 2010). Por definição, os fóruns apresentam uma série de tópicos diferentes, devidamente categorizados e dispostos em formato de lista, como hiperlinks que conduzem os usuários às

Na tradução literal da palavra, storytelling significa narração, ou narrativa. Também chamados de guildas no jargão do universo MMORPG. 12 Neste trabalho a palavra tópico e a palavra discussão serão usadas com significados semelhantes. 13 Neste trabalho a palavra mensagem e a palavra post serão utilizadas com significados semelhantes. 11

discussões que estão sendo realizadas naqueles ambientes. Para Oliveira (2011, p. 4) essa dinâmica se caracteriza da seguinte forma:

Operacionalmente, o espaço destinado ao fórum pode estar dividido em diversos subníveis, cada qual representando a tentativa de centralizar as discussões em torno de um assunto. Existe a possibilidade de que todos os assuntos signifiquem aprofundamentos de um tema central eleito previamente. Nesta configuração, bastante comum, as mensagens iniciais (“provocadoras” da discussão) surgem em uma lista de hipertextos que são os títulos das respectivas mensagens. O usuário clica no link de seu interesse para ler o conteúdo disponível, tendo, posteriormente, a possibilidade de responder, inserindo uma nova mensagem que, por sua vez, poderá ensejar novas repostas, e assim por diante, em um ciclo potencialmente ilimitado .

A dificuldade em se definir o que é um fórum de discussão é problematizada por Lima (2010), no que diz respeito ao fato do fórum ser tratado na bibliografia ora como um ambiente, ora como um recurso, ora como uma ferramenta (FUTTERLEIB; DOS SANTOS, 2006; MARCUSCHI; XAVIER, 2005; OLIVEIRA E PAIVA; RODRIGUES JÚNIOR, 2004). A autora argumenta que isso se dá devido ao fato de o fórum de discussão estar inserido em diferentes tradições de pesquisa – desde linguística e comunicação, passando por gestão do conhecimento, tecnologia da informação e, principalmente, ensino a distância – “fundamentando suas definições e análises, portanto, em diferentes referenciais teóricometodológicos” (LIMA, 2010, p. 28). Para este trabalho adotou-se a concepção da autora, a qual considera o fórum de discussões como sendo tanto um ambiente quanto um recurso ou uma ferramenta, ao comentar que “[...] o fórum não representa para nós uma comunidade ou um espaço. Ele é um recurso, dotado de um plano ambiental, que pode ser utilizado como uma ferramenta para a criação de uma comunidade ou de um espaço.” (LIMA, 2010, p. 29) Nessa concepção ela constitui o plano ambiental de um fórum de discussões quanto as seguintes propriedades estruturais gerais (LIMA, 2010, p. 29):

a) Temático: Todas as ações realizadas no fórum giram em torno de um tema específico e abrangente; b) Participativo: Não existe fórum de discussão sem discussões, por definição; c) Assíncrono: Baseado no conceito de comunicação assíncrona; d) Topicalizado: Todas as discussões são inseridas de modo a criar um tópico novo (nova discussão) ou responder um já existente, não havendo o conceito de uma mensagem “solta” em um fórum; todo o tópico (respondido ou não) permanece armazenado cronologicamente no fórum;

e) Moderado: Existe um responsável por moderar as discussões, fazendo uso de recursos tecnológicos e/ou repreensão verbal, por exemplo; f) Relativamente perene: As mensagens, discussões e categorias ficam armazenadas no fórum indefinidamente, ou até que seu criador ou moderador as exclua; g) Assimétrico: Parte do princípio de que todo o fórum pertence a uma pessoa ou instituição que detém de todos os direitos sobre sua administração e configuração, tanto conceitual quanto social.

No que diz respeito a sua estrutura, a arquitetura de um fórum de discussão é separada por níveis; o primeiro nível estrutural apresenta as Categorias, que é a página principal do fórum; o segundo nível apresenta as Sub-categorias, que podem ser divididas em quantas vezes for necessário para se categorizar a informação; no extremo baixo nível dessa estrutura estão os Tópicos, que são as discussões propriamente ditas (VBULLETIN, 2015). A figura abaixo ilustra genericamente a arquitetura de um fórum de discussão, estrutura essa também utilizada no sistema do fórum do Taikodom: Living Universe:

Figura 4 - Arquitetura estrutural resumida do fórum do TKD.

Fonte: Elaboração do autor, baseado no fórum do TKD, 2015.

2.3.1 O Taikodom Living Universe e o seu Fórum de discussões Seguindo o conceito de fórum exposto por Lima (2010, p. 29), que diz que o fórum “é um recurso, dotado de um plano ambiental, que pode ser utilizado como uma ferramenta para a criação de uma comunidade ou de um espaço.”, além do conceito próprio da Hoplon para o seu fórum de discussões, o fórum do TKD pode então ser entendido como um recurso social utilizado pelos jogadores do jogo para socialização num ambiente comunicacional que aglutina diversas informações a respeito do jogo, da Hoplon, do universo ficcional etc, categorizadas e organizadas pelos gestores de comunidade da Hoplon de modo a facilitar o acesso a todas as discussões.

Nos fóruns de games os usuários normalmente procuram informações acerca da temática do jogo, como informações sobre seu universo ficcional, curiosidades a respeito do seu enredo, dicas de jogabilidade etc. Nesse aspecto, a grande vantagem de um fórum de discussão é permitir a visualização de todas14 as discussões para todos os usuários, o que facilita consideravelmente o acesso às informação naquele ambiente, fortalecendo ainda a integração entre os indivíduos envolvidos (BEZERRA, 2012). Devido a riqueza do universo ficcional do jogo, no fórum o jogador tende a incorporar algumas características da personagem que ele controla no jogo, se comunicando e agindo baseando-se no background social e político daquela personagem. No caso do game Taikodom: Living Universe o uso do fórum é importante devido ao fato do conceito Living Universe sugerir um ambiente ficcional vivo, que está em constante atualização, as quais precisam ser comunicadas a todos os jogadores de maneira rápida e integradora, sendo uma peça importante para o Taikodom como produto e também para os negócios da Hoplon, como publicadora e desenvolvedora. 2.4

REGRAS DE OURO DE SHNEIDERMAN & PLAISANT Para que este trabalho pudesse contar com um embasamento teórico durante a

análise dos fóruns de destaque e do fórum do Taikodom, e para que o projetista pudesse se orientar durante o desenvolvimento deste fórum, foram utilizadas as oito regras de ouro de Shneiderman e Plaisant (2010), que funcionam como diretrizes a serem seguidas na avaliação e desenvolvimento de interfaces interativas. As regras de ouro foram inicialmente apresentadas em 1986, com o lançamento da primeira versão do livro – Designing the User Interface. Hoje o livro está na sua quinta edição e já é considerado por alguns experts em design de interação como “[...] uma espécie de bíblia para quem deseja melhorar a usabilidade de projetos.” (AGNER, 2004). No quadro abaixo segue um resumo de cada uma das oito regras de ouro:

Quadro 2-1 As oito regras de ouro de Shneiderman e Plaisant. 1

Perseguir a consistência

O projetista deve se esforçar para manter um padrão para os elementos do sistema, como: cores, fontes, menus, layout, interações, sequências de ações etc. É importante manter a consistência em ações que requeiram ações similares e essa

Apesar poder existir discussões com configurações de privacidade que impedem que certa parcela dos usuários vejam determinada discussão, de maneira geral as discussões nos fóruns de discussão são abertas a todos.

consistência só poderá ser quebrada em casos como a confirmação do comando delete, por exemplo, e mesmo assim em número reduzido.

Atender à usabilidade universal Oferecer feedback informativo Diálogos e interações com início, meio e fim bem definidos

Deve-se estar atento para o fato de que existe uma variada gama de usuários de todos os tipos. Prever mecanismos para facilitar a usabilidade dos usuários iniciantes, considerando ainda a disponibilização de atalhos de usabilidade para usuários avançados e familiarizados com o sistema, de modo a encurtar essa interação. Para cada interação do usuário o sistema deverá oferecer um feedback apropriado. Quanto mais trivial for a interação, menor deverá ser a resposta do sistema e quanto maior a importância da interação, mais substancial deverá ser o seu feedback. Sequências de interações devem ser organizadas com um início, um meio e um fim bem definidos. O usuário precisa ter a clara noção de que completou uma sequência de ações com sucesso, de modo a se sentir satisfeito com a conclusão da tarefa, reduzindo assim a ansiedade.

Prevenir erros

Tentar ao máximo projetar sistemas nos quais o usuário não consiga cometer erros graves. Se o usuário cometer um erro grave o sistema deverá detectar o erro e fornecer orientação simples e construtiva de reparação.

Permitir a fácil reversão de ações

Essa funcionalidade alivia a sensação de ansiedade que um sistema pode causar ao permitir ações que não podem ser desfeitas. Sempre que possível as ações do usuário deverão ser reversíveis, de modo que o usuário tenha a ciência de que pode explorar a interface sem se preocupar com erros irreparáveis.

Favorecer o senso de controle do usuário Reduzir o uso de memória de curto prazo do usuário

O sistema deve ser projetado de modo que reaja às interações dos usuários e não que os usuários respondam às mudanças do sistema, ou seja: o usuário tem que se sentir no controle total daquele sistema. Esse princípio leva em consideração a limitada capacidade do ser-humano de processamento de informação na memória de curta duração. O projetista deve evitar que os usuários precisem lembrar das informações que memorizou numa página para usar em outra página.

Fonte: Designing the User Interface (SHNEIDERMAN; PLAISANT, 2010).

Como ocorre com inúmeras metodologias e processos projetuais, essas regras de ouro não são verdades absolutas nos projetos de interfaces. Há que se ter ciência que cada sistema difere de outro sistema, de alguma forma. Nesse sentido estes princípios devem ser interpretados e utilizados com sabedoria pelo projetista, conforme alerta Shneiderman: Esses princípios fundamentais precisam ser interpretados, refinados e estendidos para cada ambiente. Eles têm suas limitações, mas eles proporcionam um bom ponto de partida para designers de aplicações mobile, para desktop ou para a web. Os princípios são apresentados nas seções seguintes e focam em incrementar a produtividade do usuário provendo procedimentos simplificados de entrada de dados, displays compreensivos e rápido feedback informacional para aumentar a sensação de competência, domínio e controle sobre o sistema. (SHNEIDERMAN; PLAISANT, 2010, tradução nossa)

PESQUISA Após a verificação bibliográfica apresentada no capítulo anterior, iniciou-se a

pesquisa exploratória, que ajudou o pesquisador a se familiarizar com o tema da pesquisa, além de levantar informações a respeito dos fóruns dos jogos multiplayers de maior destaque no cenário atual. 3.1.1 Análise dos fóruns de destaque Como parâmetro avaliativo, definiu-se que o fórum do Taikodom deveria ser confrontado com fóruns de jogos multiplayers com a mesma temática ou características de jogabilidade semelhantes, como é o caso do EVE Online, videogame espacial de grande sucesso da empresa CCP, além dos três jogos da desenvolvedora e distribuidora Blizzard Entertainment: Diablo III, World of Warcraft e StarCraft II. Além da temática ou jogabilidade parecida com o TKD, os quatro jogos supracitados foram escolhidos para a análise por se tratar de jogos multiplayer de destaque no cenário de games, engajando grandes quantidades de jogadores, tendo o EVE Online, por exemplo, atingido a marca de 65,303 jogadores interagindo numa partida ao mesmo tempo, até então um recorde na indústria (DRAIN, 2013). Essa análise baseou-se basicamente nas oito regras de ouro de Shneiderman & Plaisant (2010), ocorrendo de maneira sistemática, acessando-se os fóruns supracitados e criando-se uma tabela para comparação. Também foram realizadas capturas de imagens destes fóruns para dar suporte à pesquisa. Além das regras de ouro, a análise focou-se nos seguintes aspectos:

a) Imagem de fundo; b) Cor predominante; c) Identidade visual corresponde com a do jogo?; d) Famílias tipográficas; e) Iconografia segue a identidade do jogo?; f) Qualidade da interação; g) Utilização de sons; h) Imagens animadas; i) Qualidade do espaço para o perfil do usuário;

j) Compartilhamento externo de informação. 3.1.1.1 EVE Online Figura 5 - Fórum do EVE Online

Fonte - CCP Games (GAMES, 2015)

Quadro 3-1 - Análise do fórum do EVE Online.

Perseguir a consistência

Mesma imagem com temática espacial para o background em todas as páginas do fórum. Todos os links apresentam a mesma cor em laranja. O corpo de texto tem a mesma cor em todas as telas, favorecendo a distinção entre link e corpo de texto. Os tons de cinza estão presentes como fundo de todas as células e colunas. Durante a criação de uma nova conta no jogo, o sistema envia automaticamente um email para

o usuário, para confirmação de email; o email de confirmação leva a mesma imagem de fundo do site do jogo.

Atender à usabilidade universal

Poucos elementos gráficos pelo fórum todo. Fontes sem serifas. Bom contraste de cores entre texto e fundo. Possibilidade de criação de conta do usuário e de login na conta, utilizando um único clique no botão do Facebook.

Oferecer feedback informativo

Efeito hover destaca uma célula ao se passar o mouse em cima de uma subcategoria, além de abrir tooltip com uma descrição daquela sub-categoria. Efeito hover destaca uma célula ao se passar o mouse em cima de um tópico, além de se abrir tooltip com as primeiras linhas daquele tópico. Links clicados pelo usuário não apresentam distinção visual daqueles que ainda não foram clicados. Efeito tittle sobre os ícones, para facilitar a compreensão.

Diálogos e interações com início, meio e fim bem definidos

Não foram observados recursos expressivos que favorecessem a noção de uma interação com início, meio e fim bem definidos. Ao invés disso, este fórum utiliza apenas o recurso breadcrumb no topo do site, para que o usuário saiba por onde passou, e tenha noção de onde está.

Prevenir erros

Por ser característica inerente a um fórum de discussão, o usuário pode deletar ou editar qualquer comentário que fez anteriormente.

Permitir a fácil reversão de ações

O usuário pode deletar ou editar qualquer comentário que fez anteriormente. O usuário pode dar like num post que gostar e, depois, caso mude de ideia, pode dar dislike.

Favorecer o senso de controle do usuário

Recurso RSS Feed, para poder acompanhar uma discussão sem ter que visita-la periodicamente. Recurso Forum Jump presente em todas as páginas do fórum, que possibilita ao usuário acessar qualquer categoria ou sub-categoria, de qualquer página. Possibilidade de se deletar ou editar qualquer comentário realizado pelo usuário anteriormente, favorecendo o senso de controle.

Reduzir o uso de memória de curto prazo do usuário

Recurso RSS Feed, para poder acompanhar uma discussão sem ter que visita-la periodicamente.

Fonte: Elaboração do autor, 2015.

O fórum do game EVE Online apresenta células e colunas retangulares bem definidas, bastante espaçamento na disposição das informações (2), tonalidades sóbrias de cinza por todo o fórum, e cor de texto neutra, o que confere um aspecto visual sólido e forte ao sistema. Os textos apresentam distinção de cor em basicamente duas cores: branco para o corpo de texto e laranja para os links. Este fórum se destaca pela pouca quantidade de elementos gráficos ornamentais e pelo foco na simplicidade e visual limpo. De modo geral pode-se dizer que o fórum respeita as oito regras de ouro de Shneiderman & Plaisant, apresentando feedback (3) visual para a maioria das interações do mouse com o sistema; células de informação sendo obscurecidas ao se passar o mouse em cima; links sendo sublinhados ao se passar o mouse; recurso de pré-visualização do post ao se

deixar o mouse em cima do título, consistência (1) visual em todo o sistema; atalhos (7) de interação, como o atalho para o topo do site ao se rolar a tela; link para a última resposta e para a resposta do admin do fórum; diálogos com início meio e fim e quase nenhuma utilização da memória de curto prazo do usuário (8). 3.1.1.2 Diablo III Figura 6- Fórum do Diablo III

Fonte: Blizzard Entertainment (ENTERTAINMENT, 2015a)

Quadro 3-2 - Análise do fórum do Diablo III 1

Perseguir a consistência

Atender à usabilidade universal

Apresenta células e colunas com espaçamento adequado na disposição das informações. Fórum rico em elementos gráficos. Fonte de corpo de texto sem serifas. Bom contraste de cores entre texto e fundo. Possibilidade de criação de conta do usuário para todos os jogos Blizzard utilizando uma única conta.

Oferecer feedback informativo

Efeito hover destaca células e títulos ao se passar o mouse em cima de uma categoria ou sub-categoria. Efeito hover destaca uma célula ao se passar o mouse em cima de um tópico, além de se abrir tooltip com as primeiras linhas daquele tópico. Links clicados pelo usuário apresentam distinção visual dos links que não foram clicados. Efeito tittle sobre os ícones, para facilitar a compreensão. Apresenta um resumo ou descrição das sub-categoria na página principal.

Diálogos e interações com início, meio e fim bem definidos

Não foram observados recursos expressivos que favorecessem a noção de uma interação com início, meio e fim bem definidos. Ao invés disso, utiliza apenas o recurso breadcrumb no topo do site, para que o usuário saiba por onde passou, e tenha noção de onde está.

Prevenir erros

Por ser característica inerente a um fórum de discussão, o usuário pode deletar ou editar qualquer comentário que fez anteriormente.

Permitir a fácil reversão de ações

Por ser característica inerente a um fórum de discussão, o usuário pode deletar ou editar qualquer comentário que fez anteriormente, favorecendo o senso de controle. Últimas mensagens dos moderadores ficam em destaque já na página principal do fórum. Existência de uma categoria chamada Suporte, com diversas sub-categorias com informações para os neófitos.

Favorecer o senso de controle do usuário

Caixa de busca retorna resultados que podem ser separados por: tudo; amigos; artigo; fóruns; suporte. Últimas mensagens dos moderadores ficam em destaque já na página principal do fórum, facilitando. Cada usuário tem um perfil próprio, com informações específicas dos seus personagens, como: atributos, habilidades, seguidores, heróis, carreira, amigos etc. O usuário pode saltar diretamente para a próxima resposta dos moderadores em cada tópico. O usuário pode votar em um post para que ele se torne um post fixo.

Reduzir o uso de memória de curto prazo do usuário

O usuário pode saltar diretamente para a próxima resposta dos moderadores em cada tópico. Possibilidade de fazer uma citação a um post inteiro ao se clicar em um único botão nesse post.

Fonte: Elaboração do autor, 2015.

Se o fórum do EVE Online é marcado pela sobriedade dos tons de cinza, e pela quase ausência de adornos gráficos, os fóruns da Blizzard são o oposto disso. A empresa é famosa pelas suas superproduções; jogos, sites e fóruns ricamente ilustrados e tudo apresentando uma atenção especial nos detalhes.

A expressão “Acabamento Blizzard” não se refere apenas às nossas experiências de jogo, mas a todos os aspectos de nosso trabalho. Encaramos cada tarefa com cautela e seriedade. Buscamos comentários honestos e os usamos para aprimorar a qualidade de nosso trabalho. “No final, a maioria dos jogadores não lembrará se o jogo atrasou, só lembrarão que ele é ótimo.” (ENTERTAINMENT, 2015b)

Os fóruns dos jogos da Blizzard seguem um mesmo padrão de design que se repete em quase todos os produtos da desenvolvedora. Todos apresentam um esqueleto e uma arquitetura de informação consistente (1), o que acaba facilitando a compreensão do usuário nos seus variados fóruns, independente de qual jogo ele possa estar jogando. Na página principal do fórum as categorias são dividas em sub-categorias e cada sub-categoria possui um ícone próprio, ou seja: o usuário não precisa ler o rótulo, ele pode apenas identificar o ícone daquele assunto (8). É possível perceber que cada categoria é adornada com elementos gráficos e texturas, facilitando a distinção entre si (2). Ao se comparar o fórum da Blizzard com o do EVE Online, percebe-se que ambos apresentam esqueletos bastante distintos da sua tela inicial – ou homepage. Enquanto o primeiro apresenta uma disposição de informações em duas colunas, com ainda uma terceira coluna, chamada Tópicos Populares, o outro apresenta um esqueleto em formato de listagem de conteúdo. O fórum do Diablo III apresenta bastante recursos gráficos, com imagem de fundo ricamente ilustrada contendo informações do jogo; uma estrutura de informações simples, separada em Suporte, Tópicos Populares, Comunidade, Jogo e Classes; iconografia característica, condizente com o aspecto gráfico do jogo; e a presença constante da empresa no fórum através dos administradores e moderadores das discussões (5). Também é possível notar que a maioria do site é interativo, com efeitos (3) animados ao se passar o mouse em botões, links e ícones - interações hover, o que acentua a sensação de controle do usuário. Por exemplo, na tela inicial do fórum existe a imagem de uma caveira com os olhos iluminados. Ao se passar o mouse na caveira o cursor se torna uma mão, sugerindo uma interação que, ao clicar, apaga a luz dos olhos da caveira. A esse respeito vale notar a gema preciosa que foi utilizada para finalizar o corpo do fórum: ao se passar o mouse sobre esta gema, ela apresenta comportamento de botão que, ao ser clicado, muda de cor, dando a impressão de que o artefato - supostamente mágico - foi ativado (7).

3.1.1.3 World of Warcraft Figura 7 - Fórum do World of Warcraft

Fonte: Blizzard Entertainment (ENTERTAINMENT, 2015c)

Quadro 3-3 - Análise do fórum do World of Warcraft. 1

Perseguir a consistência Atender à usabilidade universal

Mesma imagem para o background em todas as páginas do fórum. Todos os links apresentam cor distinta do corpo de texto. Utilização de iconografia e tipografia condizente com a do jogo. Mesmo esqueleto para todos os fóruns Blizzard analisados. Apresenta células e colunas com espaçamento adequado na disposição das informações. Fórum rico em elementos gráficos. Fontes sem serifas. Bom contraste de cores entre texto e fundo. Possibilidade de criação de conta do usuário e login

para todos os jogos Blizzard utilizando uma única conta. Efeito hover destaca células e títulos ao se passar o mouse em cima de uma categoria ou sub-categoria. Efeito hover destaca uma célula ao se passar o mouse em cima de um tópico, além de se abrir tooltip com as primeiras linhas daquele tópico. Links clicados pelo usuário apresentam distinção visual dos links que não foram clicados. Efeito tittle sobre os ícones, para facilitar a compreensão. Apresenta um resumo ou descrição das sub-categoria na página principal.

Oferecer feedback informativo

Diálogos e interações com início, meio e fim bem definidos

Prevenir erros

Por ser característica inerente a um fórum de discussão, o usuário pode deletar ou editar qualquer comentário que fez anteriormente.

Permitir a fácil reversão de ações

Favorecer o senso de controle do usuário

Caixa de busca retorna resultados que podem ser separados por: tudo; amigos; artigo; fóruns; suporte. Cada usuário tem um perfil próprio, com informações específicas dos seus personagens, como: atributos, habilidades, seguidores, heróis, carreira, amigos etc. O usuário pode saltar diretamente para a próxima resposta dos moderadores em cada tópico. O usuário pode votar em um post para que ele se torne um post fixo.

Reduzir o uso de memória de curto prazo do usuário

O usuário pode saltar diretamente para a próxima resposta dos moderadores em cada tópico. Possibilidade de fazer uma citação a um post inteiro ao se clicar em um único botão nesse post.

Fonte: Elaboração do autor, 2015.

World of Warcraft (WoW) é considerado um dos maiores MMOs de todos os tempos. Segundo um documento da Blizzard Entertainment (2014), o jogo conta com mais de 100 milhões de jogadores ativos, e mais de 400 milhões de personagens criados. Segundo o site SuperData Search (2013 apud UOL 2014) o jogo arrecadou cerca de 1 bilhão de dólares em 2013. Trata-se de um dos maiores sucessos da indústria dos games, com cifras impressionantes. O fórum do World of Warcraft - como o do Diablo III - impressiona pela riqueza de detalhes e segue basicamente o mesmo (1) esqueleto do fórum do Diablo III, assim como a mesma (1) arquitetura de informação característica de todos os fóruns de discussão. Cada elemento de texto e cada caixa de informação apresenta tratamento gráfico. Apresenta ainda um banner tipo slider na parte superior, com resumo das últimas mensagens (5) dos

moderadores e administradores do fórum e a temática de pergaminho dá um visual especial ao banner, em consonância (1) com a identidade visual do jogo. As seções Support, Community, Gameplay and Guides, PVP, Class Roles, entre outras, recebem tratamento iconográfico especial, tal qual o seu par: Diablo III. Com uma ilustração (8) pra cada seção do fórum. 3.1.1.4 StarCraft II Figura 8 - Fórum do StarCraft II

Fonte: Blizzard Entertainment (ENTERTAINMENT, 2015d)

Quadro 3-4 - Análise do fórum do Starcraft II. 1

Perseguir a consistência

Atender à usabilidade universal

Apresenta células e colunas com espaçamento adequado na disposição das informações. Fórum rico em elementos gráficos. Fontes sem serifas. Bom contraste de cores entre texto e fundo. Possibilidade de criação de conta do usuário e login para todos os jogos Blizzard utilizando uma única conta.

Oferecer feedback informativo

Diálogos e interações com início, meio e fim bem definidos

Prevenir erros

O fórum apresenta a categoria Suporte, para que o usuário possa tirar dúvidas.

Permitir a fácil reversão de ações

Favorecer o senso de controle do usuário

Reduzir o uso de memória de curto prazo do usuário

O usuário pode saltar diretamente para a próxima resposta dos moderadores em cada tópico. Possibilidade de fazer uma citação a um post inteiro ao se clicar em um único botão nesse post.

Fonte: Elaboração do autor.

Apesar de seguir a mesma (1) estrutura de esqueleto do Diablo III e do World of Warcraft, o fórum do StarCraft II é uma referência gráfica importante para o desenvolvimento deste projeto. No primeiro mês de vendas a sequência vendeu 3 milhões de unidades. A esse respeito, a desenvolvedora comenta o sucesso do game no seu site:

Com as vendas no primeiro dia atingindo a marca de 1 milhão de cópias, StarCraft II: Wings of Liberty se tornou o jogo de PC mais vendido nas suas primeiras 24 horas de lançamento. Nas primeiras 48 horas, as vendas ultrapassaram a marca de mais de 1,5 milhão de cópias vendidas, estabelecendo o recorde de jogo de estratégia vendido mais rapidamente de todos os tempos, além de receber inúmeros elogios da crítica, incluindo vários prêmios “a escolha do editor” das publicações de games mais importantes. (ENTERTAINMENT, 2015e)

O menu global no topo do fórum apresenta um tratamento gráfico com iluminação característica do universo ficcional do jogo (1), com botões que lembram uma interface de ficção científica, texturas de metais e um tom azul perene, tipicamente espacial, por todo o site. O banner slider conta com o resumo (5) dos posts da Blizzard – que também aparece em outros fóruns da desenvolvedora – apresenta interação e retro iluminação, condizente com os outros elementos da interface. Todo o fórum apresenta uma tonalidade fria, de azul eterno, adequado à temática espacial da série. Além disso, quase todos os destaques do tipo hover apresentam iluminação branca, o que sugere uma sensação de frieza e distanciamento. Nota-se ainda que a grande maioria dos elementos do fórum apresentam algum tipo de feedback (3), seja no clique ou no passar do mouse. Mesmo as células de comentários, que não apresentam interação numa primeira observação, oferecem opções de uso ao passar do mouse, como Reply, New Post e Login - recursos interessantes para usuários médios e avançados.

3.1.1.5 Taikodom: Living Universe Figura 9 - Fórum do Taikodom: Living Universe

Fonte: Screenshot do fórum do jogo (HOPLON, 2014).

Quadro 3-5 - Análise do fórum do Taikodom: Living Universe. 1

Perseguir a consistência

Mesma imagem para o background em todas as páginas do fórum. Todos os links apresentam cor distinta do corpo de texto.

Atender à usabilidade universal

Apresenta células e colunas com espaçamento adequado na disposição das informações. Fontes sem serifas. Bom contraste de cores entre texto e fundo.

Oferecer feedback informativo

Efeito hover destaca títulos ao se passar o mouse em cima de uma categoria ou subcategoria. Efeito tittle sobre os ícones, para facilitar a compreensão. Apresenta um resumo ou descrição das sub-categoria na página principal.

Diálogos e interações com início, meio e fim bem definidos

5 6

Prevenir erros Permitir a fácil reversão de ações Favorecer o senso de controle do usuário Reduzir o uso de memória de curto prazo do usuário

Por ser característica inerente a um fórum de discussão, o usuário pode deletar ou editar qualquer comentário que fez anteriormente. Por ser característica inerente a um fórum de discussão, o usuário pode deletar ou editar qualquer comentário que fez anteriormente, favorecendo o senso de controle.

O usuário pode saltar diretamente para a próxima resposta dos moderadores em cada tópico.

Possibilidade de fazer uma citação a um post inteiro ao se clicar em um único botão nesse post.

Fonte: Elaboração do autor.

O fórum do Taikodom: Living Universe, como os outros fóruns analisados, apresenta um background condizente com o visual do jogo (1), com uma paleta cromática relativamente pequena de tons de verde, ciano e branco, tonalidades relativamente frias. A estrutura deste fórum não diferencia dos outros fóruns analisados anteriormente – o que não é nenhum problema – visto que esta é uma estrutura bem aceita por definição. Isso acaba possibilitando (2) ainda o uso de breadcrumbs, que são atalhos criados baseados no caminho percorrido pelo usuário na interface, facilitando a navegação entre os tópicos. Da mesma forma que os fóruns da Blizzard, o fórum do Taikodom faz uso de ícones para as sub-categorias do fórum, mas aqui essa iconografia é genérica, com apenas um ícone para todas as sub-categorias. Essa é uma das poucas vezes em que o recurso de iconografia pode ser visto no fórum, o que pode ser um desperdício, visto que os fóruns analisados anteriormente (salvo o fórum do EVE Online) fazem uso intenso de recursos visuais. Quanto ao seu aspecto visual e ao esqueleto do fórum, este apresenta células que ocupam a tela inteira no sentido horizontal como grandes linhas, o que pode dar uma sensação de claustrofobia, devido ao fato da informação ocupar 100% da tela. O espaço entre as células dos tópicos, entretanto, é adequado (2) e facilita a leitura dos textos. Foi visto que os fóruns do Diablo III, WoW e StarCraft II apresentam interações animadas em quase todos os seus elementos. No fórum do Taikodom quase não se vê interações desse tipo. As animações de hover se resumem a sublinhar um título de tópico, ou apresentar um ícone que leva até o último post (7). Esse comportamento pode ser melhor resolvido no redesign do fórum do TKD.

3.1.2 Resultado da análise dos fóruns Após a análise dos fóruns dos jogos de maior destaque no cenário mundial e análise do fórum do Taikodom: Living Universe, percebe-se que alguns aspectos do fórum do TKD poderiam ter sido mais elaborados no que diz respeito a sua constituição estética e de uso, principalmente pelo fato de seu game apresentar uma temática visual considerada distinta, que é a temática espacial. Elementos de experiência como hover e funções de feedback de interação de cliques, por exemplo, são praticamente inexistentes no modelo atual. Outro ponto que foi notado nos outros fóruns analisados é que, mesmo que um game apresente uma qualidade estética e visual distinta, esse ponto não aparece necessariamente no seu fórum. Como é o caso do EVE Online, que apresenta uma abordagem mais neutra em relação ao fórum do StarCraft II, muito embora ambos apresentem temática espacial. Como resultado prático desta pesquisa, elaborou-se o quadro abaixo.

Quadro 3-6 - Análise dos fóruns de destaque.

Imagem de fundo Cor predominante

StarCraft II

Taikodom: Living Universe Arte conceitual do jogo

EVE Online

Diablo III

World of Warcraft

Quase inexistente

Imagem temática

Tons rubros

Tons azuis e brancos. Tons azul Tonalidade fria. petróleo

Tons de cinza

Tons terrosos

Identidade visual corresponde Não Não com a do jogo? completamente Absolutamente Absolutamente Absolutamente completamente Famílias tipográficas

Exocet Blizzard Lucida Sans Arial, sans-serif Light Arial, sans-serif Unicode

Arial, sans-serif

Iconografia

Moderada

Rica

Pobre

Qualidade da interação

Sutil, mas existente em todo o site

Rica, muitos elementos interativos

Pobre, pouca interação

Utilização de sons

Não

Imagens animadas

Não

Rico, com elementos dos personagens do jogador trazidos para o

Pobre, com quase nenhum elemento do jogo agregado ao perfil do

Qualidade do O perfil do espaço para o usuário é perfil do usuário simplista

perfil do fórum

fórum.

Compartilhame Não oferece Não oferece Não oferece Não oferece Não oferece nto externo de compartilhame compartilhame compartilhame compartilhame compartilhame informação nto externo nto externo nto externo nto externo nto externo Fonte: Elaboração do autor, 2015.

APLICAÇÃO DOS CINCO PLANOS DA EXPERIÊNCIA DO USUÁRIO

Neste capítulo é apresentado o desenvolvimento do fórum do TKD, utilizando-se a metodologia dos Cinco Planos da Experiência do usuário, de Jesse James Garret. 4.1

PLANO DE ESTRATÉGIA Na metodologia de Garrett (2011), o Plano de Estratégia é fundamental para dar

início ao projeto, pois é nele que se definem os direcionamentos estratégicos do site, ou seja: como ele se adequará aos negócios da empresa e como ele se comportará em relação a suas funções de uso. Esse plano divide-se em duas etapas que juntas buscam determinar as direções projetuais do trabalho, são elas: Objetivos do Produto e Necessidades dos Usuários. 4.1.1 Objetivos do Produto Neste trabalho, esta etapa buscou levantar considerações a respeito dos objetivos gerais da empresa com o fórum do jogo, ou ainda, qual a razão dele existir na sua perspectiva de negócios. Para apontar qual posição esse fórum ocupava na sua estratégia e como a empresa posiciona o seu produto em seu plano de negócios, foi realizada uma entrevista com os gestores de comunidade do fórum, tal qual pode ser vista a seguir. 4.1.1.1 Entrevista com os gestores de comunidade Os gestores de comunidade da Hoplon são profissionais que estão em contato direto com os jogadores e usuários do fórum. Além de monitorar e gerenciar o fórum do jogo, suas principais atribuições nesse ambiente são coletar informações e feedbacks dos jogadores de modo que tais informações possam ser filtradas e utilizadas pelas equipes de desenvolvimento e marketing nas suas operações. Essas informações são importantes porque podem levar à diversos incrementos no produto, como novas features, correções de bugs, melhorias no site, no jogo e demais aspectos do produto. Portanto foi definido que os gestores de comunidade deveriam ser consultados durante o desenvolvimento do projeto pois além de representarem a empresa, sob um ponto de vista do produto, eles ainda apresentam uma relação de proximidade com o jogador e por isso poderiam trazer informações fundamentais para o redesign do fórum. Tais entrevistas foram realizadas nas dependências da empresa, entre os dias 12 e 16 de outubro.

4.1.1.1.1 Síntese da entrevista A entrevista gravada em áudio durou pouco mais de 25min e foi realizada sob consentimento de seus entrevistados - Harkness e Hound15. Harkness era jogador assíduo, possuía uma variada coleção de títulos de games e costumava acompanhar o mercado e o desenvolvimento de jogos no Brasil há pelo menos cinco anos, atuando como gestor de comunidade na Hoplon há pelo um. Hound era gamer desde os doze anos de idade, estudava ciências sociais e, principalmente por isso, era incumbido da gestão de comunidade do fórum do Taikodom: Living Universe. A entrevista a respeito da comunidade16 do Taikodom e a sua participação na estratégia de negócios da Hoplon ocorreu numa ante sala da desenvolvedora, de maneira impessoal, como num diálogo livre, no qual os gestores da Hoplon iniciaram discorrendo a respeito do objetivo principal do fórum do TKD do ponto de vista de negócios. Segundo eles, o principal objetivo desse fórum seria o de engajar e fidelizar os jogadores, através da proximidade da empresa com a comunidade o que, na opinião de deles, era função dos gestores de comunidade fazê-lo. Também comentaram que, entre outras atribuições, era incumbida a eles a tarefa de ouvir e interpretar as necessidades e comportamentos dos jogadores no fórum e nas redes sociais, tarefa de grande importância para o direcionamento de negócios do jogo. Os gestores ainda comentaram que o fórum é um importante ponto de contato com o jogador por que ao acessar o fórum ele estaria demonstrando um interesse especial com o produto, diferente do que encontra no jogo, uma vez que ele já conheceria o jogo e estaria buscando em outras mídias um complemento para a sua experiência com o produto. É um comportamento muito especial para a empresa porque é uma oportunidade de se aproximar ainda mais desse usuário, podendo convertê-lo em lucro. Neste trecho foi sublinhado um ponto importante em relação à utilização do fórum por parte dos usuários: os feedbacks. Segundo os entrevistados, os feedbacks que os usuários do fórum dão à empresa é de grande valia e interfere diretamente nas suas estratégias de retenção, pois é através da observação dos relatos e sugestões dos usuários que as equipes de desenvolvimento e marketing costumam embasar suas decisões. Além disso, fatores como a quantidade e a qualidade desses feedbacks são sempre considerados com muito cuidado pela

15 16

Nomes fictício, usados pelos então gestores de comunidade do fórum do TKD. Aqui comunidade está relacionada ao fórum do jogo e ainda suas redes sociais.

desenvolvedora de modo que não se tome por verdade qualquer reclamação dos usuários, tendo seus feedbacks sempre confrontados com dados gerados por métricas internas de análise de produto. Os entrevistados também foram questionados a respeito das reais necessidades dos usuários com o fórum, como qual o principal objetivo dele estar ali? As respostas foram unânimes ao afirmar que estes usuários estariam buscando um lugar para conversarem, desabafarem e serem ouvidos. Apontaram ainda algumas melhorias que poderiam ser implementadas no sistema, baseadas nas percepções e experiências que tiveram com outros fóruns de jogos, como o fato do fórum poder apresentar categorias, o que facilitaria a navegabilidade. Comentaram ainda que a falta de notificação ou sinalização de resposta oficial da empresa nos posts obriga o usuário a procurar pela resposta manualmente entre os comentários do tópico, motivo este que levaria alguns usuários a desistir de utilizar o fórum. Por fim, quando questionados a respeito do aspecto visual do fórum atual – como a qualidade da fonte e outras características, de uma maneira geral – enfatizaram a necessidade e preferência por um design limpo, com boa legibilidade, bom espaçamento entre as células de informações, com contraste que favoreçam a leitura e o mínimo possível de informação que possam tirar o foco do assunto. “Você tem que facilitar e fazer com que ele se sinta confortável em usar o fórum”, comentou Harkness. Dessa forma, para facilitar a visualização e compreensão dos objetivos da Hoplon com o fórum do TKD, segundo seus gestores de comunidade, elaborou-se a seguinte listagem das necessidades do produto: a) Fidelizar os utilizadores do fórum a fim de engajá-los cada vez mais com o TKD; b) Capturar feedback natural dos jogadores, sem a interferência da empresa; c) Perceber e elencar as necessidades dos usuários do fórum; d) Representar a Hoplon de maneira humanizada; e) Aproximar a Hoplon de seus clientes; f) Complementar a experiência que o jogador tem com o TKD. 4.1.2 Necessidades do usuário Após a entrevista com os gestores de comunidade, realizou-se a etapa de levantamento das necessidades do usuário, na qual se procurou elencar informações a respeito das necessidades dos usuários em relação à utilização do fórum do jogo; quais as tarefas mais

executadas na sua utilização; quais informações a respeito da experiência de uso eles gostariam de destacar; quais suas maiores dificuldades em relação à utilização da ferramenta; e quaisquer outras informações que pudessem ser pertinentes para o desenvolvimento do projeto. Para se entender melhor as necessidades dos usuários a pesquisa entrou em contato com esses usuários através de um questionário disponibilizado diretamente no fórum do TKD, de modo que se levantasse, de maneira não intrusiva, a maior quantidade de informação a respeito da utilização e experiência dos usuários no fórum. Essa abordagem mostrou-se adequada uma vez que recolheu respostas espontâneas de quarenta e cinco utilizadores do fórum, como pode ser visto a seguir:

Gráfico 1 - Qual a sua idade?

Fonte: Elaboração do autor, 2015.

Gráfico 2 - Quantas horas por semana você gasta na utilização do fórum?

Fonte: Elaboração do autor, 2015.

Gráfico 3 - Em qual período você costuma acessar o fórum?

Fonte: Elaboração do autor

Gráfico 4 - Na minha opinião o fórum precisa ser...

Fonte: Elaboração do autor, 2015.

Gráfico 5 - O fórum é uma ferramenta indispensável para minha experiência com o jogo.

Fonte: Elaboração do autor, 2015.

Gráfico 6 - O fórum é uma ferramenta indispensável para minha comunicação com os outros jogadores.

Fonte: Elaboração do autor, 2015.

Gráfico 7 - O fórum enriquece a experiência que tenho com o jogo.

Fonte: Elaboração do autor, 2015.

Gráfico 8 - O fórum é importante para me comunicar com a Hoplon.

Fonte: Elaboração do autor, 2015.

Gráfico

fórum

oferece

informações

suficientes

respeito

TKD.

Fonte: Elaboração do autor, 2015.

Gráfico 10 - O fórum oferece uma boa experiência de uso, eu me sinto bem em utilizá-lo.

Fonte: Elaboração do autor, 2014.

A pesquisa mostrou que a maioria dos usuários concorda que o fórum é importante para sua experiência com o jogo. Mais de 50% deles respondeu que costuma gastar mais de 4 horas por semana na utilização do fórum (o que é um tempo considerável) e grande parte dos usuários considera essencial que o fórum seja bonito e funcional ao mesmo tempo. Quando perguntados sobre a importância da ferramenta, a maioria afirmou que se trata de um canal indispensável para sua experiência com o jogo, além de ser seu principal canal de comunicação com a empresa. É correto afirmar que mais da metade dos respondentes considera insuficiente as informações sobre a empresa, prestadas através do fórum. Por fim, foi perguntado aos usuários sobre sugestões de melhoria para o fórum através da pergunta: “Você tem alguma sugestão? O que você acha que falta no fórum atual e que poderia ser adicionado num novo fórum?”. A pergunta rendeu uma série de sugestões e insights para o redesenho do fórum, as mais importantes mostradas a seguir:

a) Sistema de pontuação (botão +1 e -1 nos posts); b) Liberdade de expressão total no tópico OffTopic; c) Mais interação dos jogadores com os moderadores e representantes da Hoplon; d) Chat entre os usuários do fórum ou alguma integração com o IRC; e) Integração maior com o site do jogo, assim como os da Blizzard; f) Mais respeito dos Conselheiros com os demais players; g) Sistema de agradecimentos nos posts; h) Chance de alterar username; i) Um botão para notificação de spoiler nos posts; j) Bloquear palavrões; k) Listar tópicos recentes. 4.2

PLANO DE ESCOPO O Plano de Estratégia teve como objetivo dar um direcionamento estratégico ao

projeto, através das necessidades dos usuários e dos objetivos da Hoplon com o seu produto. No Plano de Escopo esses apontamentos são registrados e avaliados, de modo a facilitar o controle dos processos no desenvolvimento. Garrett (2011) divide este plano em duas partes distintas, são elas: Especificações Funcionais e Requisitos de Conteúdo. 4.2.1 Identificação, descrição e listagem de requisitos O objetivo foi identificar e descrever as informações mais importantes para o projeto, de modo que se criasse uma listagem que favorecesse o desenvolvimento do trabalho. Isso ajudaria a prever com antecedência as necessidades e eventuais riscos que o projeto poderia apresentar, além de ajudar a se ter uma visão abrangente do projeto como um todo. 4.2.2 Especificações Funcionais Em se tratando de especificações funcionais e listagem de requisitos para projetos de interfaces é preciso ter em mente que listagens como essas devem se preocupar mais com a clareza de informações e precisão das especificações do que com o volume dessas

informações ou a quantidade de detalhes. Dessa forma, a listagem das especificações do fórum pôde ser simplista, principalmente pelo fato de um fórum de discussão possuir uma constituição mais modesta que um website tradicional, visto que este apresenta muitos links, muitas páginas diferentes uma da outra e uma arquitetura de informação mais robusta que a de um fórum. Nesse sentido, a tabela a seguir foi criada para listar sobretudo as principais Especificações Funcionais do projeto, baseando-se principalmente na pesquisa com os jogadores e na entrevista realizada com os gestores de comunidade do fórum.

Quadro 11 - Especificações Funcionais para o Fórum Taikodom: Living Universe ESPECIFICAÇÃO

DETALHAMENTO

O fórum precisa ser fácil de implementar.

O fato do fórum ser projetado, desenvolvido e implementado pelo pesquisador, obriga que o projeto apresente um nível de dificuldade adequado às suas habilidades.

O fórum utilizará uma estrutura tradicional de fóruns na web;

Isso quer dizer, uma estrutura de fórum tradicional: CATEGORIA > SUBCATEGORIA > TÓPICO > POST.

Fórum do TKD separado da estrutura do fórum da Hoplon;

Hoje em dia o fórum do game é abrigado no mesmo CMS da Hoplon. CMS significa Content Management System, e em tradução livre quer dizer: Sistema de Gerenciamento de Conteúdo. Os usuários querem que o fórum do TKD seja separado do fórum da Hoplon.

Sistema de pontuação +1 e -1 para os posts;

Sistema de votação para os melhores e piores posts.

Criação de um chat integrado ao sistema do fórum, para integração dos usuários;

Pop-up de chat para interação entre os usuários que estiverem online, disponível no lado direito inferior da tela e com possibilidade de minimizar/maximizar.

Maior integração do fórum com o TKD;

Integração dos dados do usuário do fórum com os dados dos personagens dentro do jogo, como ocorre com os fóruns da Blizzard. Por exemplo, o usuário do fórum poderia usar os dados da sua personagem no jogo, como: nível de experiência; quantidade de vitórias e derrotas; quantia de dinheiro na conta; classificação geral etc para incrementar sua identidade dentro do fórum.

Opção de bloquear palavrões para usuários, administradores e moderadores;

Opção para ocultar ou amenizar palavras de baixo calão.

Opção de ser notificado quando um gestor de comunidade responde ao seu post no fórum.

Opção para notificar o usuário de que a Hoplon respondeu seu post no fórum, e acesso rápido à resposta.

Opção para alterar o nome no fórum;

Opção que possibilita a alteração do nome do usuário do fórum, diferente da personagem deste usuário no jogo.

Fonte: Pesquisa com jogadores e entrevista com gestores de comunidade.

4.2.3 Requisitos de Conteúdo Ligado às especificações funcionais estão os Requisitos de Conteúdo, que são a segunda parte do Plano de Escopo. Neste momento o projetista se concentrou em elencar quais aspectos a respeito do conteúdo seriam oferecidos no fórum, como: imagens, vídeos, sons, elementos textuais, rótulos etc, que precisariam de considerações e definições ao longo do desenvolvimento, além de conteúdo necessário para o desenvolvimento do projeto do fórum. A tabela abaixo foi criada a fim de clarificar a dimensão do conteúdo que apareceria no fórum. Devido ao fato dos fóruns de discussão não variarem muito em função de sua estrutura e esqueleto, alguns requisitos de conteúdo basearam-se nos fóruns dos games analisados durante a pesquisa exploratória, outros foram elencados pelos gestores de comunidade do fórum do TKD, como segue:

Quadro 12 - Requisitos de Conteúdo do Fórum Taikodom: Living Universe REQUISITO

DETALHAMENTO

Post tradicional;

Conteúdo de um post tradicional, que deverá oferecer: espaço para o texto; espaço para a imagem do avatar do usuário; título do post; sub-título; data de postagem; informação de última postagem; botão de compartilhar o post; botão de negativar ou positivar o post.

Imagem para o background do fórum;

Imagem para o topo do fórum, ricamente ilustrada, que apresente o logo e que condiga com a identidade visual do jogo. Tamanho leve, no máximo uns 100kb. Provavelmente uns 1024x100px.

Avatar para identificação de cada usuário

Avatar no tamanho 130x130px, expansível. Quando o usuário clicar no avatar ele expandirá para uns 400x400px.

Sessão Fórum segmentada por categoria e Tópicos

Arquitetura tradicional de um fórum de discussões: CATEGORIA > SUBCATEGORIA > TÓPICOS > POSTS.

Assets para a arte do fórum.

Artes originais do TKD, que possam ser utilizadas durante o design visual do fórum.

Texturas para a arte do fórum.

Texturas mais utilizadas pelo marketing da Hoplon na comunicação visual do TKD.

Ícones do jogo.

Ícones oficiais do jogo, para eventual utilização no layout do novo fórum.

Gradientes do TKD.

Coleção de gradientes utilizada nas artes da comunicação visual do TKD.

Fonte: Pesquisa com jogadores e entrevista com gestores de comunidade.

4.3

PLANO DE ESTRUTURA

4.3.1 Design de interação O design de interação é uma disciplina que busca compreender o comportamento normal do usuário padrão de modo a se projetar em função desse comportamento; para isso acontecer existe uma série de abordagens disponíveis na literatura. Nesta metodologia Garrett (2011) sugere a utilização de uma técnica conhecida como modelo conceitual, que foi utilizada neste projeto e será apresentada a seguir. 4.3.1.1 Modelo conceitual de interação para o fórum do game Taikodom: Living Universe O esquema abaixo buscou estabelecer algumas relações conceituais para o projeto do fórum, levando em consideração quais conteúdos o fórum deveria apresentar, bem como a forma como esse conteúdo deveria ser exibido. O modelo conceitual foi baseado principalmente na literatura oficial do universo ficcional do TKD, mais especificamente nos livros Taikodom: Despertar, Taikodom: Crônicas; e no segundo volume da minissérie em quadrinho Eterno Retorno. Para esse projeto foi utilizado um modelo conceitual abrangente, que não tratou de um recurso específico do fórum, mas sim um modelo conceitual que orientasse o projeto do fórum como um todo, como pode ser visto a seguir:

Figura 10 - Modelo conceitual do fórum do TKD.

Fonte: Elaboração do autor (2014)

Dessa forma, após o levantamento dos conceitos fundamentais para o desenvolvimento do projeto, e após o levantamento de informações acerca da relação do fórum com seus utilizadores, foi possível identificar o surgimento de alguns conceitos específicos que se repetiam ao longo do seu universo ficcional, e que poderiam aparecer no projeto do fórum do TKD também, como: transmitir a sensação de um ambiente frio; inócuo; que esteja de acordo com a estética do jogo e do seu universo ficcional; que transmita a sensação de plenitude; que traga elementos que ajudem o usuário se sentir familiarizado àquele novo ambiente. Essas características puderam ser apresentadas através de num painel semântico e para isso foi desenvolvido o painel a seguir, de acordo com as características supracitadas.

Figura 11 – Painel semântico para o redesign do fórum

Fonte: Elaboração do autor (2014)

4.3.2 Arquitetura de Informação Devido à arquitetura da navegação dos fóruns de discussão ser relativamente simples, como já visto na fundamentação teórica e na pesquisa dos fóruns de destaque, este trabalho buscou valorizar o aspecto visual do site, valendo-se da proposta elaborada no modelo conceitual para propor um desenho que estivesse de acordo com a temática espacial do TKD. Pelo ponto de vista da arquitetura de informação do fórum, os esforços empreendidos entre o projetista e os representantes da Hoplon resultaram numa arquitetura simplista para o fórum, conforme pode ser visto abaixo.

Figura 12 - Diagrama da arquitetura de informação do fórum do TKD

Fonte: Elaboração do autor

4.4

PLANO DE ESQUELETO O plano de esqueleto é dividido em três partes complementares: Design da

Interface, Design da Navegação e Design da Informação. O primeiro está relacionado principalmente à escolha mais adequada dos elementos interativos e a sua disposição na tela; o segundo está relacionado à facilitação da movimentação do usuário através da interface; e o Design de Informação, transversal aos dois primeiros, está relacionado a representação visual da informação. 4.4.1 Design da Interface Quando se desenha uma interface é importante estar atento para o fato de que essa interface será utilizada por uma variada gama de usuários. Este trabalho procurou valer-se de convenções e metáforas de outras interfaces digitais e de outros fóruns de discussão de modo que essas convenções familiarizassem o usuário padrão com o novo fórum, antes mesmo de utilizá-lo. Este projeto buscou resgatar as metáforas e convenções dos fóruns de destaque analisados, além das referências encontradas no fórum atual do próprio Taikodom. A ideia aqui foi utilizar o conceito proposto no modelo conceitual e aplicá-lo em elementos da estrutura do novo fórum. Nesse momento do projeto, botões de interação, imagens de background, adornos dos espaços de informações e toda a sorte de ícones e elementos gráficos do fórum do Taikodom começaram a ser pensados considerando-se essa premissa. Dessa forma, seguindo a convenção adotada por outros fóruns de discussão, e valendo-se das metáforas propostas no modelo conceitual, foi definido que o design da interface do novo fórum poderia apresentar recursos como:

a) Menus drop-down para ordenação das discussões; b) Menus drop-down para opções referentes à conta do usuário; c) Menus drop-down para listagem das conversas recentes do chat; d) Destaque hover em links, células e botões; e) Destaque em links visualizados; f) Destaque em links clicados; g) Iluminação em elementos aleatórios da interface, como no logo do Taikodom, seguindo a ideia proposta nos fóruns da Blizzard.

4.4.2 Design de Navegação Design da Navegação é a disciplina preocupada em oferecer recursos que viabilizem a movimentação do usuário através da estrutura do sistema. No Plano anterior essa estrutura foi apresentada através do diagrama da arquitetura do fórum. Aqui, o design da navegação buscou levantar mecanismos facilitadores para essa movimentação, a fim de se garantir que o usuário tivesse ciência de que este botão levaria para aquela página, e viceversa. Neste projeto o Design de Navegação funcionou mais como uma filosofia de projeto do que como uma ferramenta, pelo fato de considerar algumas ‘boas práticas’ abordadas por Garrett (2011) para a facilitação da navegação, como: utilização de breadcrumbs; presença de um menu global, com acesso aos links mais importantes do fórum; cores dos links diferentes do corpo de texto; presença de mecanismo de busca em todas as páginas do site; e a utilização de menus drop-down para o acesso a links e menus. O planejamento destes artifícios ocorreu no momento do desenho dos wireframes, conforme pode ser visto adiante. 4.4.3 Design da Informação Design de Informação é o elemento aglutinador do Plano de Esqueleto ao passo que trespassa este Plano do ponto de vista de interface e do ponto de vista de conteúdo. Nesse momento buscou-se considerar as melhores práticas para a representação visual da informação, baseando-se principalmente no modelo conceitual apresentado no Plano de Estrutura e nas convenções já utilizadas nos fóruns analisados, juntamente com o fórum do TKD. Para isso, foram utilizadas convenções e metáforas próprias de fóruns de discussão, valendo-se de rótulos comuns a esse tipo de interface, como: ícone de lupa para a funcionalidade de busca; setas para informação de menu drop-down; nomes de sessões do fórum - como perfil, lista de membros etc; botão de adicionar usuário com formato ‘+’, seguindo convenção de outras interfaces digitais etc.

4.4.4 Wireframe Como a estrutura básica de um fórum de discussão é relativamente simples, definiu-se que seriam apresentados wireframes apenas para as sessões mais importantes do fórum, como: a página principal (categorias); as sub-categorias; as discussões e o perfil do usuário. Esses wireframes foram utilizados para nortear o design visual do fórum e podem ser encontrados nos apêndices deste projeto.

Figura 13- Wireframe da página Categorias

Fonte: Elaboração do autor

Figura 14 - Wireframe da página de subcategorias

Fonte: Elaboração do autor

Figura 15 - Wireframe tela de discussão

Fonte: Elaboração do autor.

Figura 16 - Wireframe da tela de perfil do usuário

Fonte: Elaboração do autor

4.5

PLANO DE SUPERFÍCIE O Plano de Estratégia identificou as necessidades dos usuários e do fórum do

Taikodom, além dos objetivos principais da empresa. No Plano de Escopo essas diretrizes foram convertidas em listagem, de modo a facilitar a compreensão do projeto em relação aos seus requisitos técnicos e de conteúdo. O Plano de Estrutura apresentou a estrutura pela qual o usuário poderia navegar - indo de uma página à outra. O Plano de Superfície é o último Plano da metodologia, e aborda principalmente o aspecto visual do site. Em resumo, no Plano de Superfície os wireframes, que representavam o esqueleto do site, começaram a receber o look and feel final do fórum, como segue nos próximos tópicos.

4.5.1 Design Visual O design visual do fórum iniciou-se pela escolha da família tipográfica, principalmente pelo fato do elemento textual ser abundante em toda a interface e desse modo poder transmitir o look and feel desejado em todas as telas do fórum. Optou-se pela fonte Aldrich, família tipográfica de constituição geométrica, acentuadamente quadrada, mas com bordas arredondadas e chanfros pontiagudos, mas com arredondamentos pontuais em certas partes dos caracteres. A fonte transmite certo ar de impessoalidade e severidade, que condizem com o ambiente frio e distante, característico do espaço sideral, além de emanar certa sensação de modernidade devido a ausência de serifas. Além das características supracitadas, a escolha da família tipográfica Aldrich se deu principalmente pelo fato desta fazer parte do projeto Google Fonts para utilização comercial em qualquer navegador. Isso significa que quando o navegador começa a processar a requisição de carregamento do fórum do TKD ele não baixa essa fonte dos servidores da Hoplon, mas sim dos servidores do Google, o que otimiza a velocidade de carregamento da página devido à robusta infraestrutura da empresa. A família tipográfica Aldrich apresenta uma coleção robusta de caracteres, que conta com quase 200 glifos diferentes.

Figura 17 - Exemplo da utilização da fonte Aldrich

Fonte: Elaboração do autor, 2015.

Figura 18 - Família tipográfica Aldrich - Coleção de glifos

Fonte: Google Fonts (2015)

A paleta cromática foi elaborada tendo em mente um modelo conceitual apresentado no Plano de Estrutura, buscando transmitir a sensação de frieza, serenidade, distanciamento, solitude e impessoalidade, característicos da temática espacial. Alguns pontos do modelo conceitual foram determinantes para a escolha dos tons frios de azul e a profundidade vazia do preto, tais quais: a)

Ambientação espacial, com o preto dominante e eventuais focos de luz;

Displays digitais, com alta luminosas;

Projeções holográficas e difusas;

Luz baixa para o ambiente, luz alta para os displays;

Brilhos pontuais, como em casos de placas de instrução etc;

Transparência e translucidez, como no caso dos hologramas.

Figura 19 - Paleta cromática

Fonte: Elaboração do autor (2014)

Os tons frios de azul estabeleceram a sensação de frieza que se buscava para o fórum e a tonalidade marrom avermelhada é uma mistura do preto dominante com o vermelho, este, representando uma das duas facções do jogo - os Renegados. O tom de azul ainda remete à antiga identidade visual do TKD. 4.5.2 Sobre a dualidade cromática do background do fórum O jogo Taikodom: Living Universe se passa num cenário espacial futurista onde duas facções disputam pelo controle sócio-político do espaço humano pós-apocalíptico. Neste cenário a humanidade está dividida entre Consortium - que luta pela criação de um estado civilizado, organizado e seguro - e os Renegados - que buscam liberdade, soberania e independência. Essa dualidade foi resgatada no projeto através da utilização de uma imagem promocional que havia sido desenvolvida para o marketing do jogo e que já vinha sendo usada como imagem de fundo do atual fórum. A imagem exibe as duas facções supracitadas enfrentando-se num cenário de combate espacial, reforçando a ideia de confronto, dualidade e conquista. Nesse sentido, a dualidade sugerida com o conceito de facções foi resgatada apenas nessa imagem e não no resto dos elementos do fórum.

Figura 20 - Imagem promocional do TKD, retratando as facções: Renegados e Consortium

Fonte: Acervo pessoal (2015)

4.5.3 Menu global do fórum O projeto do fórum do Taikodom utilizou uma barra superior (figura 21) para contextualização da identidade da Hoplon dentro do site, tal qual a Hoplon costuma fazer no seu site e nos sites de seus outros produtos. Essa convenção possibilitou a criação de um menu global para o fórum, que comportaria - além do tradicional logo da Hoplon - o acesso às particularidades da conta do usuário, um chat e um link para a listagem dos membros do site. A alocação desse conteúdo no menu global possibilitou o acesso rápido à maioria de funcionalidades que o usuário padrão precisaria para navegar pelo fórum, como: acesso ao seu perfil; acesso ao perfil de seus amigos; acesso a outros membros do fórum; acesso às suas discussões recentes; às discussões sem respostas e às discussões que ele próprio criou, facilitando bastante a navegação pelo fórum como um todo.

Figura 21- Destaque para o menu global do fórum

Fonte: Acervo pessoal, 2015.

4.5.4 Tela inicial Figura 22- Tela inicial do fórum, ou Categorias.

Fonte: Elaboração do autor, 2015.

A tela inicial teve como principal preocupação a distinção das diversas categorias do fórum, como: Informações Oficiais; Eventos e Torneios; Taikodom Living Universe; Área das Companhias e Comunidade de Jogadores. Esta distinção buscou favorecer a distinção desses grupos entre si, o que tenderia a facilitar o acesso às informações daquele grupo de discussão. Para isso utilizou-se um destaque de brilho azul difuso atrás de cada um desses

rótulos, destacando-os na composição visual através da acentuação do contraste de sua iluminação e tamanho de fonte. Cada categoria conta ainda com um sub-título, para auxiliar o entendimento de sua categorização, além da exibição da quantidade total de discussões, de comentários e de acessos, facilitado à última discussão criada em cada grupo. Além disso, o projetista utilizou bullets com efeito brilhante17 (figura23) para categorizar o fórum, buscando alcançar uma sensação de importância para aquelas categorias.

Figura 23- Destaque para os bullets das categorias do fórum.

Fonte: Acervo pessoal, 2015.

Pesquisas descobriram que o efeito glossy, ou efeito brilhante, promove uma sensação de sofisticação, luxúria e riqueza, vínculos que podem ir além da questão estética e pessoal, remontando a instintos básicos de sobrevivência (COSS; RUFF; SIMMS, 2003).

4.5.5 Tela de listagem de discussões Figura 24 – Tela de listagem de discussões, ou Sub-categorias.

Fonte: Elaboração do autor, 2015.

A tela de listagem de discussões apresenta a listagem das discussões exibidas em ordem de data de criação. Essa ordem é alterada pela utilização da metatag ‘Fixo’, recurso utilizado pelos moderadores e administradores para afixar uma discussão no topo da listagem. Além dessa metatag, existem ainda duas outras: Destaque e Quente. A primeira também é um recurso utilizado pela moderação e administração do fórum e é utilizada justamente para destacar aquela discussão; a segunda é uma metatag automática, processada e implementada automaticamente pelo sistema CMS do fórum para notificar os usuários que aquela é uma discussão que está rendendo muitos comentários. Ambas não alteram a ordem das discussões na listagem.

No canto superior esquerdo do esqueleto, logo abaixo do menu global, foi disponibilizado um menu local no estilo drop-down, para a ordenação da listagem de discussões. No extremo oposto, também abaixo do menu global, encontra-se o botão para o usuário criar uma discussão nesse grupo de discussões (figura 25). Este botão foi desenhado de modo a destacar-se da composição visual da página, de modo que seu acesso fosse visível para os usuários mais distraídos. A iconografia deste botão é utilizada também para outra tela do fórum, conforme pode ser visto adiante.

Figura 25 - Destaque botão de iniciar uma discussão.

Fonte: Elaboração do autor, 2015.

Cada discussão pode ser pré-visualizada sem que seja preciso navegar até ela. Para isso, repousa-se o mouse sobre a mesma para que então se abra um tool-tip (figura 26) com o início do texto daquela discussão. As discussões contam ainda com links para cada página da discussão, quando esta apresentar mais de uma página de comentários (figura 27), além da utilização do sistema de breadcrumbs (figura 28) para a facilitação da navegação pela estrutura do fórum, bem como atalhos para todas as páginas da listagem de discussões (figura 28).

Figura 26 - Destaque do tool-tip com a pré-visualização da discussão.

Fonte: Elaboração do autor, 2015.

Figura 27 - Atalhos para as discussões.

Fonte: Elaboração do autor, 2015.

Figura 28 - Detalhe para o recurso de breadcrumbs e para o acesso à outras páginas.

Fonte: Elaboração do autor, 2015.

4.5.6 Tela de discussão (post) Figura 29 - Tela de discussão, ou post, do fórum.

Fonte: Elaboração do autor, 2015.

A tela de discussão (ou tela de posts, no jargão técnico) é onde os usuários do fórum discutem a respeito de algum assunto específico através de um sistema assíncrono de envio de mensagens. Isso quer dizer, os usuários enviam seus comentários um de cada vez e esses comentários são adicionados ao final da discussão. Para o projeto do fórum do Taikodom tomou-se cuidado para que a discussão oferecesse condições suficientes para que esse usuário tivesse uma experiência confortável na tela de discussão, seja lendo a discussão em si, seja participando dela ativamente. Para isso concluiu-se que a tela de discussão precisava oferecer boa legibilidade; reduzida carga perceptiva e cognitiva; concisão; baixa densidade informacional do sistema; controle explícito do usuário sobre o sistema; proteção contra os erros e consistência. As características acima encontraram espaço através de uma composição arejada, com bons espaços negativos favorecendo a legibilidade; tonalidade serena de azul espacial; corpo de texto claro e legível, sem serifas, em Arial regular, tamanho 14pt, com um espaço entrelinhas de 14pt e a completa ausência de assinatura nos posts, diferentemente do que acontece em outros fóruns de discussão. Optou-se por vetar a utilização da assinatura nos comentários devido ao fato desse comportamento poluir visualmente o corpo da página de discussões no fórum antigo do jogo, com alguns usuários utilizando esse espaço para xingamentos ou provocações. Em contrapartida essa ideia de “assinatura” foi transposta para a tela de perfil do usuário, como será abordado adiante. A página de discussões ainda apresenta outras funcionalidades padrões observadas em outros fóruns, como: botões para avaliar o comentário publicado (figura 30); data da publicação da postagem; foto do dono do comentário; botão para mencionar o comentário; botão para denunciar o comentário etc.

Figura 30 - Detalhe para o recurso de avaliar a discussão.

Fonte: Elaboração do autor, 2015.

Para realização de um comentário na página de discussão, foi criado um editor de texto genérico ao final daquela página, com opções de edição de texto simples e HTML (funcionalidade pensada no usuário avançado do fórum) e ainda um botão para notificação de spoiler - texto que não convém a todos os usuários saber, como pode ser visto na figura abaixo:

Figura 31 - Recurso de spoiler ativado.

Fonte: Elaboração do autor, 2015.

A sessão de comentário também oferece um botão chamado “PRÉVISUALIZAR”, que é utilizado para o usuário avançado ter uma pré-visualização do seu comentário, principalmente na utilização do botão de edição de texto em HTML. 4.5.7 Tela de perfil de usuário No início da elaboração dessa tela a ideia era valer-se do modelo conceitual de um sistema de cadastro universal de pessoas, que teria a tela do perfil do usuário como uma espécie de RG ou CPF espacial. Isso não foi possível porque destoaria bastante do resto das páginas do fórum. Para preservar a concisão e a consistência entre todas as telas do sistema, o desenho desta tela procurou uma abordagem gráfica parecida com as outras telas do fórum. Nesse sentido a tela de perfil usa o mesmo background das demais telas do sistema, além de uma imagem de hangar na parte da baixo da página, para dar a sensação de que este é um ambiente diferenciado, particular, saindo assim do universo espacial para um refúgio interno, humanizado um pouco a imagem de fundo. A utilização da assinatura pessoal dos comentários - muito tradicional em fóruns de discussão - foi suprimida dos comentários e substituída por uma seção chamada Manifesto, na página de perfil do usuário, onde este poderia adicionar um comentário pessoal a respeito de si, personalizando um pouco seu perfil no fórum do game.

Figura 32 - Tela de perfil de usuário.

Fonte: Elaboração do autor, 2015.

4.5.8 Lista de membros Figura 33 - Tela de lista de membros.

Fonte: Elaboração do autor, 2015.

A tela de lista de membros apresenta um esqueleto simples, em formato de listagem, com a relação de todos os usuários do fórum dispostos em ordem alfabética. Da mesma forma que as telas anteriores, esta tela apresenta os recursos de breadcrumbs e o recurso de menu global, onde se tem acesso a listagem de usuários por letras.

4.5.9 Tela de listagem de discussões recentes

Figura 34- Discussões recentes

Fonte: Elaboração do autor, 2015.

Esta página lista as discussões mais recentes do fórum. Segue o mesmo esqueleto da página de discussões, ou sub-categorias, mas difere dessa pela ausência do recurso de ordenar as discussões por data de criação, quantidade de respostas ou quantidade de visualizações. De resto esta tela apresenta as mesmas funcionalidades que aquela. 4.5.10 Discussões sem respostas

Figura 35 - Discussões sem respostas

Fonte: Elaboração do autor, 2015.

Esta página lista as discussões do fórum que ainda não receberam resposta nenhuma. Tal qual a página de discussões recentes, esta página segue o mesmo esqueleto da página de discussões, ou sub-categorias, mas difere pela ausência do recurso de ordenar as discussões por data de criação, quantidade de respostas ou quantidade de visualizações. De resto esta tela apresenta as mesmas funcionalidades que aquela.

VALIDAÇÃO DOS MOCKUPS Quando um projetista desenha para a web, ele deve estar atento ao fato de que

nem todos os recursos ou funcionalidades projetados poderão ser implementados na versão final do produto. Isso se dá devido a inúmeras limitações que ocorrem no momento da implementação, em função de uma série de fatores, que vão desde recursos financeiros até recursos humanos, além do próprio prazo de entrega do projeto. Esta seção aborda as dificuldades enfrentadas na implementação do fórum do Taikodom: Living Universe no navegador Google Chrome.

Figura 36 - Tela das sub-categorias renderizada no navegador Google Chrome

Fonte: Elaboração do autor, 2015.

5.1

DIFICULDADES ENFRENTADAS NA IMPLEMENTAÇÃO Para que o fórum do TKD pudesse ser implementado de maneira fiel ao proposto

no Plano de Superfície, era necessário que diversas linguagens de programação fossem combinadas, como: PHP, JavaScript, Action Script etc. Em virtude do projetista não dominar essas linguagens e, principalmente pelo fato de extrapolar o domínio da disciplina de design, o escopo deste trabalho previu apenas a implementação do fórum utilizando as linguagens CSS e HTML.

As transparências das células do fórum, com efeitos multiply, overlay e screen (figura 37) não são suportadas pelo CSS atual e não puderam ser reproduzidos com esta linguagem, tendo sido substituídos por uma simples transparência (figura 38) no canal alpha, através de CSS.

Figura 37 - Exemplo de mesclagem da cor da célula com o fundo, no Adobe Photoshop.

Fonte: Elaboração do autor, 2015.

Figura 38 - Exemplo de transparência da célula com CSS, no Google Chrome.

Fonte: Elaboração do autor, 2015.

Os chanfros de algumas células (figura 39), propostos no Plano de Superfície, também não puderam ser reproduzidos com o CSS atual, obrigando o projetista a considerar formas mais simples (figura 40) para as células de informação do fórum.

Figura 39 - Exemplo de barra de menu com detalhe chanfrado, proposto no Photoshop.

Fonte: Elaboração do autor, 2015.

Figura 40 - Exemplo de barra de menu sem detalhe chanfrado, no Google Chrome.

Fonte: Elaboração do autor, 2015.

Detalhes de sombra e brilho, apesar de constarem no repertório CSS, não puderam ser reproduzidos fielmente ao arquivo do Photoshop (figura 41) e tiveram que ser substituídos por brilhos e sombras comuns característicos do CSS da geração atual (figura 42).

Figura 41 - Exemplo de brilho renderizado no Adobe Photoshop.

Fonte: Elaboração do autor, 2015.

Figura 42 - Exemplo de brilho renderizado no Google Chrome, com CSS.

Fonte: Elaboração do autor, 2015.

Além disso, animações e efeitos dos drop-downs e qualquer outros elementos animados também não puderam ser reproduzidos com as linguagens supracitadas.

CONSIDERAÇÕES FINAIS Este trabalho apresentou o projeto do fórum do Taikodom: Living Universe com

foco na experiência do usuário, tendo como projetista um aluno do curso de graduação em design da UNISUL. Dessa forma, sendo apenas um projetista para pesquisa, desenvolvimento e implementação do projeto, este projetista sentiu dificuldades ao utilizar a metodologia dos cinco planos da experiência do usuário de Garrett (2011), principalmente devido ao fato de se tratar de uma metodologia demasiadamente abrangente, que pretende contemplar todos os aspectos da experiência do usuário. A metodologia de Garrett (2011) é dividida em cinco níveis, abrangendo design de interação, arquitetura da informação, design da informação, design da navegação, design da interface e ainda, o design visual. Durante a fase de pré-projeto deste trabalho, quando o projetista estava levantando bibliografia para o início das atividades, essa metodologia parecia a ideal para o desenvolvimento do projeto do fórum do TKD, por apresentar uma abordagem abrangente na prática projetual de design digital. Entretanto, ao se iniciar a fase de desenvolvimento percebeu-se que em um projeto baseado na experiência do usuário é fundamental que se leve em consideração a opinião do maior número possível de usuários, com o objetivo de se levantar, elencar e resolver suas reais necessidades com o produto durante o desenvolvimento do projeto, favorecendo assim a satisfação total daqueles usuários. Apesar de ter-se elaborado um questionário que entrou em contato direto com os usuários do fórum do TKD, muito provavelmente este questionário não foi o bastante para levantar as reais necessidades dos usuários daquele fórum. Quarenta e cinco respostas não representam uma parcela expressiva da totalidade de usuários do jogo ou do fórum. Para trabalhos futuros, vale notar que as pesquisas de identificação dos usuários devem ser intensas se quiserem refletir as reais necessidades dos usuários para com o produto. Outro ponto observado é que a abrangência da metodologia de Garrett (2011), unindo diversas especialidades da disciplina de design, se mostra eficiente para o projeto de design digial em várias mídias, desde simples sites até portais completos, mas para isso é necessário que a equipe de projeto esteja alinhada, com funções bem definidas. Do contrário, a multidisciplinaridade da metodologia pode acabar criando certa confusão conceitual no entendimento dos seus processos, o que dificulta um pouco a comunicação entre os seus stakeholders.

Como aspectos positivos da utilização da metodologia de Garrett (2011) para este trabalho, vale notar que ela buscou prever todos os aspectos da experiência do usuário, valendo-se de pesquisa com este usuário e entrevista com os principais responsáveis pelo fórum do TKD, estabelecendo um tronco estratégico que facilitou o direcionamento de todo o projeto. Além disso, o documental proposto pela metodologia, com listagem dos requisitos no Plano de Escopo, o esquema de navegação do usuário com o mapa do site e a utilização de um modelo conceitual para clarificar o conceito do fórum, além da criação dos wireframes para o esboço do que seria a versão final do fórum, no Plano de Esqueleto, são recursos que clarificam o entendimento do projeto, tanto no desenvolvimento quanto Ademais, pode-se dizer que este trabalho atingiu seus objetivos ao passo que ofereceu uma nova proposta para o fórum do Taikodom: Living Universe, considerando as necessidades da Hoplon, do TKD e ainda dos seus usuários para com seu fórum de discussão. Ainda que essas necessidades possam não ter sido exploradas de maneira exaustiva por este pesquisador, é melhor ouvir uma pequena parcela de usuários do que nenhum usuário.

REFERÊNCIAS AGNER, L. Interfaces: Nove regras que valem ouro. Disponível em: <www.webinsider.com.br/2004/09/01/interfaces-nove-regras-que-valem-ouro/>. Acesso em: 15 jun. 2015. AGNI, E. Por onde começar na área de UX? Disponível em: <http://www.uxdesign.blog.br/user-experience/ux-por-onde-comecar/>. Acesso em: 16 jul. 2015. ALBUQUERQUE, A. C. DE. Um sistema de storytelling textual para gerar histórias que despertem surpresa, suspense e curiosidade. [s.l.] UNIVERSIDADE FEDERAL DE SANTA MARIA, 2011. BERALDO, J. M. Taikodom: despertar. [s.l.] Devir, 2008. BERALDO, J. M. Taikodom: Despertar. Disponível em: <http://www.devir.com.br/literatura/fc_taikodom_despertar.php>. Acesso em: 19 maio. 2015. BEZERRA, C. A INTERAÇÃO ENTRE APRENDIZES SURDOS UTILIZANDO O FÓRUM DE DISCUSSÃO: LIMITES E POTENCIALIDADES. [s.l.] UNIVERSIDADE BANDEIRANTE DE SÃO PAULO, 2012. COLE, H.; GRIFFITHS, M. D. Social interactions in massively multiplayer online roleplaying gamers. Cyberpsychology & behavior : the impact of the Internet, multimedia and virtual reality on behavior and society, v. 10, n. 4, p. 575–583, 2007. COSS, R. G.; RUFF, S.; SIMMS, T. All That Glistens: II. The Effects of Reflective Surface Finishes on the Mouthing Activity of Infants and Toddlers. Ecological Psychology, v. 15, n. 3, p. 197–213, 2003. COSTA, A. L. M. C. Um ano fantástico para a fantasia. Disponível em: <http://www.cartacapital.com.br/cultura/um-ano-fantastico-para-a-fantasia>. Acesso em: 19 maio. 2015. DRAIN, B. EVE Online smashes PCU record during anniversary celebrations. Disponível em: <http://www.engadget.com/2013/05/06/eve-online-smashes-pcu-recordduring-anniversary-celebrations/>. Acesso em: 15 jun. 2015. DREUNEN, J. X. M. VAN. Social Gaming and Discursive Play: Video Games as Communicative Exchange. [s.l.] COLUMBIA UNIVERSITY, 2010. ECONOMIST, T. Where there’s MUD, there’s brass. Disponível em: <http://www.economist.com/node/5039>. Acesso em: 12 maio. 2015. ENTERTAINMENT, B. Diablo III Forum. Disponível em: <http://us.battle.net/d3/pt/forum/>. Acesso em: 24 jun. 2015a.

ENTERTAINMENT, B. Dedicada a criar as experiências de entretenimento mais épicas de todos os tempos. Disponível em: <http://us.blizzard.com/ptbr/company/about/mission.html>. Acesso em: 15 jun. 2015b. ENTERTAINMENT, B. World of Warcraft Forum. Disponível em: <http://us.battle.net/wow/pt/forum/>. Acesso em: 15 jun. 2015c. ENTERTAINMENT, B. Starcraft II Forum. Disponível em: <http://us.battle.net/sc2/pt/forum/>. Acesso em: 16 jun. 2015d. ENTERTAINMENT, B. PRIMEIRO MÊS DE VENDAS DE STARCRAFT® II: WINGS OF LIBERTYTM ULTRAPASSA A MARCA DE 3 MILHÕES. Disponível em: <http://us.blizzard.com/pt-br/company/press/pressreleases.html?id=2860074>. Acesso em: 16 jun. 2015e. FEERST, E.; STEWART, D. Internet Communities And ForumsEstados Unidos, 2007. Disponível em: <http://www.videojug.com/interview/internet-communities-and-forums2#what-is-an-internet-forum>. Acesso em: 12 maio. 2015 FUTTERLEIB, J. A.; DOS SANTOS, R. P. Ferramenta é Instrumento, Ambiente é Cenário: E o Fórum de Discussões? - Recortes de Reflexão Sobre o Estudo da Física em Ambientes NãoFormais de Educação. Acta Scientiae, v. 8, n. 1, p. 47–66, 2006. GAMES, C. EVE Online Forums. Disponível em: <https://forums.eveonline.com/>. Acesso em: 24 jun. 2015. GARRETT, J. J. The Elements of User Experience: User-Centered Design for the Web and Beyond. 2a. ed. Berkeley, CA: Pearsons Education, 2011. GIL, A. C. Como Elaborar Projetos de Pesquisa. 4. ed. São Paulo: Editora Atlas, 2002. GOOGLE. Google Fonts Aldrich. Disponível em: <https://www.google.com/fonts/specimen/Aldrich>. Acesso em: 23 maio. 2015. HOPLON. Taikodom: Living Universe - Fórum. Disponível em: <www.taikodom.hoplon.com/forum/>. Acesso em: 11 dez. 2014. IDG. IDG Forecast Update. San Francisco: [s.n.]. Disponível em: <www.idgconsulting.com>. LAUZER, M. B.; FRAGOSO, S. Análise da aplicabilidade de uma metodologia de projeto de websites a partir de um estudo de caso (IxDA, Ed.)Anais – Interaction South America. Anais...São Paulo: 2011 LEVENE, M. AN INTRODUCTION TO SEARCH ENGINES AND WEB NAVIGATION. 2a. ed. New Jersey: y John Wiley & Sons, 2010. LIMA, M. Escrita, Interlocução Moderação Em Um Fórum Online Do Orkut. [s.l.] UNIVERSIDADE ESTADUAL DE CAMPINAS, 2010.

LISBOA, P. F. O DESIGN DA EXPERIÊNCIA DO USUÁRIO EM MUSEUS: O CASO DO WEBSITE “ERA VIRTUAL”Anais do VII Seminário Nacional de Pesquisa em Arte e Cultura Visual. Anais...Goiânia - GO: UUNIVERSIDADE FEDERAL DE GOIÁS, 2014Disponível em: <http://www.fav.ufg.br/seminariodeculturavisual/Arquivos/2014/eixo3/o_design_da_experien cia_do_usuario.pdf>. Acesso em: 9 jun. 2015 MARCONI, M.; LAKATOS, E. Fundamentos de metodologia científica. 5. ed. São Paulo: [s.n.]. MARCUSCHI, L. A.; XAVIER, A. C. Novas formas de construção de sentido. In: HIPERTEXTO E GÊNEROS DIGITAIS. 2. ed. Rio de Janeiro: Editora Lucerna, 2005. p. 13–67. MILLER, J. R. The apple advanced technology group. ACM SIGCHI Bulletin, v. 30, n. 2, p. 46–47, 1998. MORUMBI, U. A. Design Digital. Disponível em: <http://portal.anhembi.br/estudeaqui/graduacao/cursos/design-digital/>. Acesso em: 16 jul. 2015. MÜLLING, T. T.; PEREIRA, A. T. C. Projetar para a experiência: análise da metodologia para a construção de um website fundamentado nos 5 planos da experiência do usuárioAnais do 8o Congresso Brasileiro de Pesquisa e Desenvolvimento em Design. Anais...São Paulo: SENAC, 2008 OLIVEIRA, G. P. DE. O FÓRUM EM UM AMBIENTE VIRTUAL DE APRENDIZADO COLABORATIVO. Revista Digital de Tecnologia Educacional e Educaçao a Distância, v. 2, p. 13, 2011. OLIVEIRA E PAIVA, V. L. M.; RODRIGUES JÚNIOR, A. S. Fóruns on-line : intertextualidade e footing na construção do conhecimento. Gêneros: reflexões em análise do discurso, v. 1, n. 1, p. 171–189, 2004. PUCPR. Design Digital. Disponível em: <http://www.pucpr.br/graduacao/desenhoindustrial/designdigital/>. Acesso em: 6 jun. 2015. PWC. Global Entertainment and Media Outlook: 2012-2016. Nova Yorke: PricewaterhouseCoopers, 2012. RANGARAJAN, S. Asking the players: A mental models approach to how long-term players of a massively multiplayer online game perceive the risks associated with gaming. [s.l.] Iowa State University, 2014. RAWSTORNE, T. Can online games be as addictive as heroin? Disponível em: <http://www.dailymail.co.uk/news/article-1313794/Can-online-games-addictiveheroin.html>. Acesso em: 14 maio. 2015. ROYO, J. Design digital. 1a. ed. São Paulo: Rosari, 2008. SAFFER, D. Designing for interaction. [s.l: s.n.]. v. 42

SALMON, C. Storytelling: La máquina de fabricar historias y formatear las mentes. [s.l.] Ediciones Península, 2008. SHEDROFF, N. Experience Design, a Manifesto for the Creation of Experiences. [s.l: s.n.]. SHNEIDERMAN, B.; PLAISANT, C. Designing the user interface. [s.l.] Addison-Wesley, 2010. v. 19 SILVANO, P. F. Gamificação e as contribuições do vídeo game para uma nova educação. [s.l.] Universidade Federal de Santa Catarina, 2014. VBULLETIN. Forums, Topics and Posts. Disponível em: <http://www.vbulletin.com/forum/help?faq=vb3_board_usage#faq_vb3_forums_threads_post s>. WILKINSON, C. The economic and social impact of mmo virtual markets and identities. [s.l.] UNIVERSITY OF MASSACHUSETTS LOWELL, 2009. WILLIAMS, D. et al. From Tree House to Barracks. Games and …, v. 1, n. 4, 2006. WOLFE, A. Massively multiplayer online gamers: Motivations and risks. Dissertation Abstracts International: Section B: The Sciences and Engineering, v. 73, n. 12-B(E), p. No Pagination Specified, 2013. YEE, N. The Demographics, Motivations, and Derived Experiences of Users of Massively Multi-User Online Graphical Environments. Presence: Teleoperators and Virtual Environments, v. 15, n. 3, p. 309–329, 2006a. YEE, N. The Psychology of Massively Multi-User Online Role-Playing Games : by Nicholas Yee History of MMORPGs. p. 187–207, 2006b.

APÊNDICES

APÊNDICE A – HTML da página Categorias <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Fórum 2</title> <meta name="author" content="Antonio Bandeira"/> <link rel="shortcut icon" href="imgs/favicon.gif"> <link rel="stylesheet" type="text/css" href="css/estilos.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/rolagem.js"></script> <script type="text/javascript"> $(document).ready(function () { $("html").niceScroll(); }); </script> </head> <body> <header> <div id="header"> <div class="header"> <img id="logo-hoplon" src="imgs/logo_assinatura_hoplon.png"> <p><a href="">Ir para Minha Conta Hoplon</a></p> </div> <div id="menu"> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="perfil"> <a href="perfil_user.html"><div class="perfil"> <img class="avatar" src="imgs/arkano87_avatar.jpg"> <p>Arkano87</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div></a> <div id="perfil-sub"> <a href="perfil_user.html"><p>Meu Perfil</p></a> <a href="discussao_recentes.html"><p>Discussões recentes</p></a> <a href="discussao_sem_resposta.html"><p>Discussões sem respostas</p></a> <a href=""><p>Minhas discussões</p></a> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="chat"> <div class="chat"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/chat.png"> <p>Chat | 3 amigos online</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div> <div id="chat-sub">

<div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin2.png"> <p>NuuBr</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin5.png"> <p>Boris</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin8.png"> <p>Colleti</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin7.png"> <p2>Aciddevil</p2><br> <p2>Online há: 21h atrás</p2> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin3.png"> <p2>Annie</p2><br> <p2>Online há: 2 dias atrás</p2> </a> </div> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <a href="membros.html"><div id="amigos"> <div class="amigos"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/amigos.png"> <p style="text-decoration:underline;">Lista de Membros</p> </div> </div></a> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> </div> </div> </header> <section id="corpo"> <section id="busca"> <input class="busca" type="text" placeholder="Pesquisar..."> </section> <section id="cont-topicos"> <h1>- INFORMAÇÕES OFICIAIS -</h1> <a href="sub-categorias.html"><div id="topico">

<div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">INFORMAÇÕES E ANÚNCIOS</p> <p>Anúncios e informações oficiais sobre o Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>144 discussões</p> <p>1245 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin.png"> <div class="text-admin"> <p>Alterações no Fórum - Bloqu...</p> <p>Hound</p> <p>18 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">ATUALIZAÇÕES E NOTAS DE VERSÃO</p> <p>Informações de atualizações e notas de versão do Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>32 discussões</p> <p>856 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin2.png"> <div class="text-admin"> <p>Taikodom: Living Universe 3.11</p> <p>Slartibartfast</p> <p>21 Fev 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">ESTADO DOS SERVIDORES</p> <p>Informações sobre o estado dos servidores da Hoplon</p> </div> <div class="com-topic"> <p>32 discussões</p> <p>856 comentários</p> </div> <div class="avatar-admin">

<img src="imgs/avatar-admin3.png"> <div class="text-admin"> <p>Taikodom: Living Universe 3.11</p> <p>Slartibartfast</p> <p>21 Fev 2014</p> </div> </div> </div> </div></a> <h2>- EVENTOS E TORNEIOS -</h2> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">EVENTOS E CONCURSOS</p> <p>Anúncios e informações sobre eventos e concursos oficiais</p> </div> <div class="com-topic"> <p>27 discussões</p> <p>450 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin4.png"> <div class="text-admin"> <p>Concurso Hoplon Camisetas</p> <p>Harkness</p> <p>16 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">TORNEIOS DE COMPANHIAS</p> <p>Informações sobre os torneios de Companhias</p> </div> <div class="com-topic"> <p>21 discussões</p> <p>187 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin5.png"> <div class="text-admin"> <p>Evento premiação oficial!</p> <p>Hound</p> <p>29 Dez 2014</p> </div> </div> </div> </div></a> <h3>- TAIKODOM LIVING UNIVERSE -</h3>

<a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">TÓPICOS E DISCUSSÕES GERAIS</p> <p>Área para discussões gerais relacionadas ao Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>203 discussões</p> <p>450 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin.png"> <div class="text-admin"> <p>Alterações no Fórum - Bloqu...</p> <p>Hound</p> <p>18 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">INFORMAÇÕES, DÚVIDAS E SOLUÇÕES</p> <p>Área para informações e resolução de dúvidas do Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>45 discussões</p> <p>925 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin6.png"> <div class="text-admin"> <p>Taikodom: Living Universe 3.11</p> <p>Slartbartfast</p> <p>21 Fev 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">CONQUISTA DE REGIÕES E BATTLESPACE</p> <p>Informações sobre as batalhas da Conquista de Regiões e do Battlespace</p> </div> <div class="com-topic"> <p>65 discussões</p> <p>3072 comentários</p>

</div> <div class="avatar-admin"> <img src="imgs/avatar-admin7.png"> <div class="text-admin"> <p>Estado do Servidor - 12-11-13</p> <p>Ubber</p> <p>16 Dez 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">MERCADO, NEGÓCIOS E TROCAS</p> <p>Área para o comércio, trocas e vendas de itens no Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>20 discussões</p> <p>195 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin8.png"> <div class="text-admin"> <p>Estado do Servidor - 12-11-13</p> <p>Ubber</p> <p>16 Dez 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">HISTÓRIA E UNIVERSO FICCIONAL</p> <p>Discuta sobre as histórias e novos episódios do UF de Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>64 discussões</p> <p>1148 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin9.png"> <div class="text-admin"> <p>Estado do Servidor - 12-11-13</p> <p>Ubber</p> <p>16 Dez 2014</p> </div> </div> </div> </div></a> <h3>- ÁREAS DAS COMPANHIAS -</h3>

100

<a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">MURAL DE INFORMAÇÕES</p> <p>Área de informações sobre companhias e seus membros.</p> </div> <div class="com-topic"> <p>15 discussões</p> <p>1085 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin10.png"> <div class="text-admin"> <p>Ucrania X Russia</p> <p>Ubber</p> <p>18 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">RECRUTAMENTO DE PILOTOS</p> <p>Área destinada ao recrutamento de novos pilotos</p> </div> <div class="com-topic"> <p>11 discussões</p> <p>922 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin11.png"> <div class="text-admin"> <p>Irmandade Corp - Recruta</p> <p>Ubber</p> <p>25 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">LIGA DE COMPANHIAS</p> <p>Área para tópicos e discussões da Liga de Companhias</p> </div> <div class="com-topic"> <p>6 discussões</p> <p>154 comentários</p> </div> <div class="avatar-admin">

101

<img src="imgs/avatar-admin12.png"> <div class="text-admin"> <p>Estado do Servidor - 12-11-13</p> <p>St4rf0xXx</p> <p>05 Dez 2014</p> </div> </div> </div> </div></a> <h3>- COMUNIDADE DE JOGADORES -</h3> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">CRIAÇÕES DOS JOGADORES</p> <p>Área para publicação de conteúdos criados pelos jogadores de TKD: LU</p> </div> <div class="com-topic"> <p>45 discussões</p> <p>1393 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin13.png"> <div class="text-admin"> <p>61 Cygni Universo Oculto Ca...</p> <p>SHANTIUM</p> <p>08 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">SUGESTÕES CRÍTICAS E OPINIÕES</p> <p>Ajude os desenvolvedores do Taikodom: Living Universe com sugestões e opiniões</p> </div> <div class="com-topic"> <p>71 discussões</p> <p>2946 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin14.png"> <div class="text-admin"> <p>Você jogaria outro jogo pas...</p> <p>LadyZehan</p> <p>20 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico">

102

<div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">TAVERNA ESTELAR</p> <p>Área de discussões OFF-Topic, não relacionadas ao Taikodom: Living Universe</p> </div> <div class="com-topic"> <p>224 discussões</p> <p>9354 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin15.png"> <div class="text-admin"> <p>sem palavras para descrever...</p> <p>LC Junior</p> <p>26 May 2014</p> </div> </div> </div> </div></a> <a href="sub-categorias.html"><div id="topico"> <div id="bullet"></div> <div class="topico"> <div class="text-topico"> <p class="ti-topico">CONSELHO DE COMUNIDADE</p> <p>Área para tópicos e discussões do Conselho de Comunidade</p> </div> <div class="com-topic"> <p>32 discussões</p> <p>662 comentários</p> </div> <div class="avatar-admin"> <img src="imgs/avatar-admin16.png"> <div class="text-admin"> <p>Testes de Level Design</p> <p>Hank Mcclaus</p> <p>09 Dec 2014</p> </div> </div> </div> </div></a> </section> <footer></footer> </body> </html>

103

APÊNDICE B – HTML da página Sub-categorias <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Sub-categorias</title> <meta name="author" content="Antonio Bandeira"/> <link rel="shortcut icon" href="imgs/favicon.gif"> <link rel="stylesheet" type="text/css" href="css/estilos.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/rolagem.js"></script> <script type="text/javascript"> $(document).ready(function () { $("html").niceScroll(); }); </script> </head> <body> <header> <div id="header"> <div class="header"> <img id="logo-hoplon" src="imgs/logo_assinatura_hoplon.png"> <p><a href="">Ir para Minha Conta Hoplon</a></p> </div> <div id="menu"> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="perfil"> <a href="perfil_user.html"><div class="perfil"> <img class="avatar" src="imgs/arkano87_avatar.jpg"> <p>Arkano87</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div></a> <div id="perfil-sub"> <a href="perfil_user.html"><p>Meu Perfil</p></a> <a href="discussao_recentes.html"><p>Discussões recentes</p></a> <a href="discussao_sem_resposta.html"><p>Discussões sem respostas</p></a> <a href=""><p>Minhas discussões</p></a> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="chat"> <div class="chat"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/chat.png"> <p>Chat | 3 amigos online</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div> <div id="chat-sub">

104

105

<h1 style="margin:5px auto; position:relative; left:85px;">- GERAL -</h1> <div id="escada"> <div class="escada" style="position:relative; left:85px;"> <p><a href="forum2.html">Fórum</a> > <a href="forum2.html">Comunidade</a> > Geral</p> </div> </div> <div id="list-pages"> <div class="ordem"> <ul class="selected-ordem"> <p>ORDENAR DISCUSSÕES POR</p> <img class="seta-drop" style="margin:0;" src="imgs/seta-drop.png"> </ul> <ul class="sub-ordem"> <li><p>ATUALIZADOS RECENTEMENTE</p></li> <li><p>DATA DE CRIAÇÃO</p></li> <li><p>QUANTIDADE DE RESPOSTAS</p></li> <li><p>QUANTIDADE DE VISUALIZAÇÕES</p></li> </ul> </div> <div class="numbers-page"> <div class="list-pages"> <a href=""><p class="square-page selected">1</p></a> <a href=""><p class="square-page">2</p></a> <a href=""><p class="square-page">3</p></a> <a href=""><p class="square-page">4</p></a> <a href=""><p class="square-page">5</p></a> <a href=""><p class="square-page">6</p></a> <a href=""><p class="square-page">7</p></a> <a><p class="more">...</p></a> <a href=""><p class="square-page">123</p></a> <a href=""><p class="nextpage">PRÓXIMA</p></a> </div> </div> </div> </div> <div class="discussao"> <img src="imgs/icon-talk.png"> <p>INICIAR UMA<br>DISCUSSÃO</p> </div> </div> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub ti-destaque ti-cadeado">REGRAS DO FÓRUM</p> <div id="caixa-resumo"> <p>Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p>

106

<p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> <p><a href="">1</a>,<a href="">2</a>,<a href="">3</a>, ...<a href="">123</a></p> </div> <div class="com-topic-sub"> <p>16 respostas</p> <p>121 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin.png"> <div class="text-admin-sub"> <p><a href="">Hound</a></p> <p><a href="">18 May 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub ti-fixed ticadeado">INFORMAÇÕES E ANÚNCIOS</p> <div id="caixa-resumo"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu odio pharetra, maximus massa egestas, semper nulla. Vivamus dictum facilisis faucibus. Maecenas felis leo, eleifend vel tellus in, feugiat posuere odio. Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> <p>5 respostas</p> <p>245 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin4.png"> <div class="text-admin-sub"> <p><a href="">Solid</a></p> <p><a href="">16 Fev 2014</a></p> </div> </div> </div> </div></a>

107

<a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub ti-fixed ti-cadeado">REDES SOCIAIS HOPLON</p> <div id="caixa-resumo"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu odio pharetra, maximus massa egestas, semper nulla. Vivamus dictum facilisis faucibus. Maecenas felis leo, eleifend vel tellus in, feugiat posuere odio.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> <p><a href="">1</a>,<a href="">2</a>,<a href="">3</a></p> </div> <div class="com-topic-sub"> <p>8 respostas</p> <p>64 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin2.png"> <div class="text-admin-sub"> <p><a href="">Red Hawk</a></p> <p><a href="">4 May 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub ti-quente">Quando terá itens pra comprar através do site?</p> <div id="caixa-resumo"> <p>Vivamus dictum facilisis faucibus. Maecenas felis leo, eleifend vel tellus in, feugiat posuere odio. Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> <p><a href="">1</a>,<a href="">2</a>,<a href="">3</a>,<a href="">4</a></p> </div> <div class="com-topic-sub"> <p>54 respostas</p>

108

<p>325 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin5.png"> <div class="text-admin-sub"> <p><a href="">Beeelz</a></p> <p><a href="">29 Jan 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">onda de ataques em barnard!!! até quando??</p> <div id="caixa-resumo"> <p>feugiat posuere odio. Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> <p>16 respostas</p> <p>121 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin8.png"> <div class="text-admin-sub"> <p><a href="">Tiago100th</a></p> <p><a href="">16 Mar 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">descoberto central de encontro da força renegada!</p> <div id="caixa-resumo"> <p>Cras eu odio pharetra, maximus massa egestas, semper nulla. Vivamus dictum facilisis faucibus. Maecenas felis leo, eleifend vel tellus in, feugiat posuere odio. Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p>

109

<p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> <p><a href="">1</a>,<a href="">2</a>,<a href="">3</a>, ...<a href="">12</a></p> </div> <div class="com-topic-sub"> <p>245 respostas</p> <p>450 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">Hidden</a></p> <p><a href="">14 Mar 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">[off topic] descoberto central de encontro da força renegada!</p> <div id="caixa-resumo"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu odio pharetra, maximus massa egestas, semper nulla.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> <p><a href="">1</a>,<a href="">2</a></p> </div> <div class="com-topic-sub"> <p>21 respostas</p> <p>214 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">Arkano87</a></p> <p><a href="">18 Fev 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub">

110

<p class="ti-topico-sub">[Youtube] irmãos piologo jogando taikodom</p> <div id="caixa-resumo"> <p>Vivamus dictum facilisis faucibus. Maecenas felis leo, eleifend vel tellus in, feugiat posuere odio. Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> <p>98 respostas</p> <p>200 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">Velhinho</a></p> <p><a href="">18 May 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">galera, tem como editar as naves do jogo?</p> <div id="caixa-resumo"> <p>Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> <p>7 respostas</p> <p>58 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">SrMike</a></p> <p><a href="">18 May 2014</a></p> </div> </div>

111

</div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">25 motivos para jogar taikodom</p> <div id="caixa-resumo"> <p>Vel tellus in, feugiat posuere odio. Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> <p>14 respostas</p> <p>81 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">DarkInside/Endy</a></p> <p><a href="">18 May 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">ace of spades - melhores pilotos da semana ;)</p> <div id="caixa-resumo"> <p>Lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> <p>92 respostas</p> <p>141 visualizações</p>

112

</div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">NoMercy</a></p> <p><a href="">18 May 2014</a></p> </div> </div> </div> </div></a> <a href="post.html"><div id="topico-sub"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub">olá, povo! </p> <div id="caixa-resumo"> <p>Donec ac eros sit amet lectus tincidunt luctus sit amet at ligula. Proin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div id="pages-topico-sub"> <p><a href="">1</a>,<a href="">2</a>,<a href="">3</a>, ...<a href="">14</a></p> <div id="caixa-resumo"> <p>Troin nec velit purus.</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">12/12/1987 | 548 Visualizações | 54 respostas</p> <p style="font-size: 10px; text-transform: uppercase; margin: auto; color: #999;">Última postagem por: Rhastion360</p> </div> </div> <div class="com-topic-sub"> <p>112 respostas</p> <p>68 visualizações</p> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin10.png"> <div class="text-admin-sub"> <p><a href="">NANZINHO</a></p> <p><a href="">18 May 2014</a></p> </div> </div> </div> </div></a> <div id="list-pages"> <div class="numbers-page numbers-bottom"> <div class="list-pages" style="right:0;"> <a href=""><p class="square-page selected">1</p></a> <a href=""><p class="square-page">2</p></a> <a href=""><p class="square-page">3</p></a> <a href=""><p class="square-page">4</p></a>

113

</section> <footer></footer> </body> </html>

114

APÊNDICE C – HTML da página Discussões <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Post</title> <meta name="author" content="Antonio Bandeira"/> <link rel="shortcut icon" href="imgs/favicon.gif"> <link rel="stylesheet" type="text/css" href="css/estilos.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/rolagem.js"></script> <script type="text/javascript"> $(document).ready(function () { $("html").niceScroll(); }); </script> </head> <body> <header> <div id="header"> <div class="header"> <img id="logo-hoplon" src="imgs/logo_assinatura_hoplon.png"> <p><a href="">Ir para Minha Conta Hoplon</a></p> </div> <div id="menu"> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="perfil"> <a href="perfil_user.html"><div class="perfil"> <img class="avatar" src="imgs/arkano87_avatar.jpg"> <p>Arkano87</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div></a> <div id="perfil-sub"> <a href="perfil_user.html"><p>Meu Perfil</p></a> <a href="discussao_recentes.html"><p>Discussões recentes</p></a> <a href="discussao_sem_resposta.html"><p>Discussões sem respostas</p></a> <a href=""><p>Minhas discussões</p></a> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="chat"> <div class="chat"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/chat.png"> <p>Chat | 3 amigos online</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div> <div id="chat-sub">

115

<div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin2.png"> <p>NuuBr</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin5.png"> <p>Boris</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin8.png"> <p>Colleti</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin7.png"> <p2>Aciddevil</p2><br> <p2>Online há: 21h atrás</p2> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin3.png"> <p2>Annie</p2><br> <p2>Online há: 2 dias atrás</p2> </a> </div> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <a href="membros.html"><div id="amigos"> <div class="amigos"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/amigos.png"> <p style="text-decoration:underline;">Lista de Membros</p> </div> </div></a> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> </div> </div> </header> <section id="corpo"> <section id="busca"> <input class="busca" type="text" placeholder="Pesquisar..."> </section> <section id="cont-topicos"> <div id="cont-cate"> <div class="cont-cate" style="width:1280px;">

116

<h1 style="margin:5px auto;">- Guias e tutoriais da comunidade -</h1> <div id="escada"> <div class="escada"> <p><a href="forum2.html">Fórum</a> > <a href="forum2.html">Comunidade</a> > <a href="forum2.html">Geral</a> > Guias e tutoriais da comunidade</p> </div> </div> <div id="list-pages"> <div class="numbers-page" style="width:1280px;"> <div class="list-pages" style="right:0;"> <a href=""><p class="square-page selected">1</p></a> <a href=""><p class="square-page">2</p></a> <a href=""><p class="square-page">3</p></a> <a href=""><p class="square-page">4</p></a> <a href=""><p class="square-page">5</p></a> <a href=""><p class="square-page">6</p></a> <a href=""><p class="square-page">7</p></a> <a><p class="more">...</p></a> <a href=""><p class="square-page">123</p></a> <a href=""><p class="nextpage">PRÓXIMA</p></a> </div> </div> </div> </div> </div> <div id="topico-sub" style="background-image:url(imgs/bglines.png); background-size:100%;"> <div id="talk-topic"></div> <div class="topico-sub"> <div class="text-topico-sub"> <p class="ti-topico-sub ti-fixed">Guias e tutoriais da comunidade</p> </div> <div id="pages-topico-sub"> </div> <div class="com-topic-sub"> </div> <div class="avatar-admin-sub"> <img src="imgs/avatar-admin.png"> <div class="text-admin-sub"> <p><a href="">Hound</a></p> <p><a href="">18 May 2014</a></p> </div> </div> </div> </div> <div id="post"> <div id="perfil-post"> <div class="perfil-post"> <p id="user_name">Hound</p>

117

<img src="imgs/perfil-post1.png"> <p id="user_stat" class="user_online">usuário está conectado</p> <p id="user_posts">1820 postagens</p> <p id="user_information">Mais informação</p> <p id="user_sex">Masculino</p> <p id="user_date_renas">1987</p> <p id="user_country">Brasil</p> <p id="hash">#1</p> </div> </div> <div class="post"> <div id="text-post" style="background-image: url(imgs/bg-post.png);background-size: 100%;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius leo ac libero blandit lacinia eu at sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vulputate metus a massa aliquet consequat. Aliquam imperdiet est non ex vestibulum congue. Donec at porta ipsum, eget imperdiet lectus. Mauris ullamcorper lobortis tincidunt. Nam sodales malesuada sem, non facilisis metus pharetra sit amet. Curabitur gravida maximus magna quis tincidunt. Maecenas in tristique lectus, a ullamcorper risus.<br><br> Fusce eu blandit tortor. Phasellus at porta libero, nec tristique tortor. Suspendisse elit metus, maximus non molestie vitae, dictum rutrum ipsum. Nulla facilisi. Curabitur fermentum at purus luctus rutrum. Maecenas lacinia tellus fermentum odio faucibus, vitae placerat enim porta. In hac habitasse platea dictumst. Integer eu urna et sem ultricies finibus et a est. Aenean id libero euismod nisl pretium varius non sed lacus. Nulla pulvinar viverra justo ac finibus. Mauris a ipsum vulputate, mattis velit non, iaculis nibh.</p> </div> <p id="date_post">Postado Ontem, 07:00</p> </div> <div id="more_post"> <p id="mencionar">"Mencionar"</p> <p id="denunciar">Denunciar (!)</p> <div id="points"> <p>avaliar</p> <div class="points"> <img src="imgs/+1.png"> <img src="imgs/-1.png"> <p>+12</p> </div> </div> </div> </div> <div id="post"> <div id="perfil-post"> <div class="perfil-post"> <p id="user_name">CaioSparks</p> <img src="imgs/perfil-post2.png"> <p id="user_stat" class="user_offline">usuário está desconectado</p> <p <p <p <p <p <p

id="user_posts">1820 postagens</p> id="user_information">Mais informação</p> id="user_sex">Masculino</p> id="user_date_renas">1987</p> id="user_country">Brasil</p> id="hash">#2</p>

118

</div> </div> <div class="post"> <div id="text-post" style="background-image: url(imgs/bg-post.png);background-size: 100%;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius leo ac libero blandit lacinia eu at sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vulputate metus a massa aliquet consequat. Aliquam imperdiet est non ex vestibulum congue. Donec at porta ipsum, eget imperdiet lectus. Mauris ullamcorper lobortis tincidunt. Nam sodales malesua.<br><br> Requat. Aliquam imperdiet est non ex vestibulum congue. </p> </div> <p id="date_post">Postado Ontem, 07:34</p> </div> <div id="more_post"> <p id="mencionar">"Mencionar"</p> <p id="denunciar">Denunciar (!)</p> <div id="points"> <p>avaliar</p> <div class="points"> <img src="imgs/+1.png"> <img src="imgs/-1.png"> <p>+6</p> </div> </div> </div> </div> <div id="post"> <div id="perfil-post"> <div class="perfil-post"> <p id="user_name">Kempz (dead)</p> <img src="imgs/perfil-post3.png"> <p id="user_stat" class="user_online">usuário está conectado</p> <p id="user_posts">1820 postagens</p> <p id="user_information">Mais informação</p> <p id="user_sex">Masculino</p> <p id="user_date_renas">1987</p> <p id="user_country">Brasil</p> <p id="hash">#3</p> </div> </div> <div class="post"> <div id="text-post" style="background-image: url(imgs/bg-post.png);background-size: 100%;"> <div id="text-post2" class="spoiler"> <div class="text-post2" id="spoiler"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. erdiet est non ex vestibulum congue. Derdiet est non ex vestibulum congue. Nullam varius leo ac libero blandit lacinia eu at sem erdiet est non ex vestibulum congue.</p> </p> </div> </div>

119

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vulputate metus a massa aliquet consequat. Aliquam imperdiet est non ex vestibulum congue. Donec at porta ipsum, eget imperdiet lectus. Mauris ullamcorper lobortis tincidunt. Nam sodales malesua.m imperdiet est non ex vestibulum congue. Donec at porta ipsum.</p> </div> <p id="date_post">Postado Ontem, 07:34</p> </div> <div id="more_post"> <p id="mencionar">"Mencionar"</p> <p id="denunciar">Denunciar (!)</p> <div id="points"> <p>avaliar</p> <div class="points"> <img src="imgs/+1.png"> <img src="imgs/-1.png"> <p>+3</p> </div> </div> </div> </div> <div id="post"> <div id="perfil-post"> <div class="perfil-post"> <p id="user_name">Helena Thiesant</p> <img src="imgs/perfil-post4.png"> <p id="user_stat" class="user_online">usuário está conectado</p> <p id="user_posts">1820 postagens</p> <p id="user_information">Mais informação</p> <p id="user_sex" class="user_vazio">-</p> <p id="user_date_renas" class="user_vazio">-</p> <p id="user_country" class="user_vazio">-</p> <p id="hash">#4</p> </div> </div> <div class="post"> <div id="text-post" style="background-image: url(imgs/bg-post.png);background-size: 100%;"> <div id="text-post2"> <p id="how-say">CaioSparks disse:</p> <div class="text-post2" id="text-reply"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nullam varius leo ac libero blandit lacinia eu at sem.</p> </p> </div> </div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vulputate metus a massa aliquet consequat. Aliquam imperdiet est non ex vestibulum congue. Donec at porta ipsum, eget imperdiet lectus. Mauris ullamcorper lobortis tincidunt. Nam sodales malesua.m imperdiet est non ex vestibulum congue. Donec at porta ipsum.</p> </div> <p id="date_post">Postado Ontem, 07:34</p> </div>

120

<div id="more_post"> <p id="mencionar">"Mencionar"</p> <p id="denunciar">Denunciar (!)</p> <div id="points"> <p>avaliar</p> <div class="points"> <img src="imgs/+1.png"> <img src="imgs/-1.png"> <p>0</p> </div> </div> </div> </div> <div id="list-pages"> <div class="numbers-page numbers-bottom"> <div class="list-pages" style="right:0;"> <a href=""><p class="square-page selected">1</p></a> <a href=""><p class="square-page">2</p></a> <a href=""><p class="square-page">3</p></a> <a href=""><p class="square-page">4</p></a> <a href=""><p class="square-page">5</p></a> <a href=""><p class="square-page">6</p></a> <a href=""><p class="square-page">7</p></a> <a><p class="more">...</p></a> <a href=""><p class="square-page">123</p></a> <a href=""><p class="next-page">PRĂ&#x201C;XIMA</p></a> </div> </div> </div> </section> <footer> <div id="comentar"> <div id="perfil_comentar"> <img src="imgs/perfil-post5.png"> <p>Arkano87</p> </div> <div class="comentar"> <div id="opcoes_comentario"> <div class="opcoes_comentar"> <div id="icon_comentar"> <img class="icon_comentar" src="imgs/B.png"> </div> <div id="icon_comentar"> <img class="icon_comentar" src="imgs/I.png"> </div> <div id="icon_comentar"> <img class="icon_comentar" src="imgs/U.png"> </div> <div id="icon_comentar"> <img class="icon_comentar" src="imgs/iconbullets.png"> </div> <div id="icon_comentar"> <img class="icon_comentar" src="imgs/pre.png"> </div> <div id="icon_comentar"> <img class="icon_comentar" src="imgs/spoiler.png">

121

</div> </div> <p>RESPONDER ESSA DISCUSSﾃグ</p> </div> <textarea placeholder="Escreva Aqui" id="textocomentar"></textarea> </div> <div id="enviar"> <input id="button-enviar" value="Enviar Resposta" type="submit"> <input id="button-enviar" value="Prﾃｩ-visualizar" type="submit"> </div> </div> </footer> </body> </html>

122

APÊNDICE D – HTML da página Membros <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Membros</title> <meta name="author" content="Antonio Bandeira"/> <link rel="shortcut icon" href="imgs/favicon.gif"> <link rel="stylesheet" type="text/css" href="css/estilos.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/rolagem.js"></script> <script type="text/javascript"> $(document).ready(function () { $("html").niceScroll(); }); </script> </head> <body> <header> <div id="header"> <div class="header"> <img id="logo-hoplon" src="imgs/logo_assinatura_hoplon.png"> <p><a href="">Ir para Minha Conta Hoplon</a></p> </div> <div id="menu"> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="perfil"> <a href="perfil_user.html"><div class="perfil"> <img class="avatar" src="imgs/arkano87_avatar.jpg"> <p>Arkano87</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div></a> <div id="perfil-sub"> <a href="perfil_user.html"><p>Meu Perfil</p></a> <a href="discussao_recentes.html"><p>Discussões recentes</p></a> <a href="discussao_sem_resposta.html"><p>Discussões sem respostas</p></a> <a href=""><p>Minhas discussões</p></a> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="chat"> <div class="chat"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/chat.png"> <p>Chat | 3 amigos online</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div> <div id="chat-sub">

123

<div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin2.png"> <p>NuuBr</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin5.png"> <p>Boris</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin8.png"> <p>Colleti</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin7.png"> <p2>Aciddevil</p2><br> <p2>Online há: 21h atrás</p2> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin3.png"> <p2>Annie</p2><br> <p2>Online há: 2 dias atrás</p2> </a> </div> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <a href="membros.html"><div id="amigos"> <div class="amigos"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/amigos.png"> <p style="text-decoration:underline;">Lista de Membros</p> </div> </div></a> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> </div> </div> </header> <section id="corpo"> <section id="busca"> <input class="busca" type="text" placeholder="Pesquisar..."> </section> <div class="cont-cate" style="width:1280px; height:50px; float:none;"> <h1 style="margin:5px auto;">- Lista de Membros -</h1> <div id="escada">

124

<div class="escada"> <p><a href="forum2.html">Fórum</a> > Lista de Membros</p> </div> </div> </div> <section id="cont-membros"> <div class="cont-membros"> <a href=""><p>A</p></a><p class="p-noselected">-</p><a href=""><p>B</p></a><p class="p-noselected">-</p><a href=""><p>C</p></a><p class="p-noselected">-</p><a href=""><p>D</p></a><p class="p-noselected">-</p><a href=""><p class="p-selected">E</p></a><p class="p-noselected">-</p><a href=""><p>F</p></a><p class="p-noselected">-</p><a href=""><p>G</p></a><p class="p-noselected">-</p><a href=""><p>H</p></a><p class="p-noselected">-</p><a href=""><p>I</p></a><p class="p-noselected">-</p><a href=""><p>J</p></a><p class="p-noselected">-</p><a href=""><p>K</p></a><p class="p-noselected">-</p><a href=""><p>L</p></a><p class="p-noselected">-</p><a href=""><p>M</p></a><p class="p-noselected">-</p><a href=""><p>N</p></a><p class="p-noselected">-</p><a href=""><p>O</p></a><p class="p-noselected">-</p><a href=""><p>P</p></a><p class="p-noselected">-</p><a href=""><p>Q</p></a><p class="p-noselected">-</p><a href=""><p>R</p></a><p class="p-noselected">-</p><a href=""><p>S</p></a><p class="p-noselected">-</p><a href=""><p>T</p></a><p class="p-noselected">-</p><a href=""><p>U</p></a><p class="p-noselected">-</p><a href=""><p>V</p></a><p class="p-noselected">-</p><a href=""><p>X</p></a><p class="p-noselected">-</p><a href=""><p>Y</p></a><p class="p-noselected">-</p><a href=""><p>Z</p></a> </div> <div class="member"> <img src="imgs/membro-01.png"> <p>Edragorn | Registrado 10-Dezembro 14 | Jogador | 0 comentários</p> </div> <div class="member"> <img src="imgs/membro-02.png"> <p>Edrain | Registrado 26-Dezembro 13 | Jogador | 3 comentários</p> </div> <div class="member"> <img src="imgs/membro-03.png"> <p>edsonfast | Registrado 06-Dezembro 13 | Jogador | 12 comentários</p> </div> <div class="member"> <img src="imgs/membro-04.png"> <p>Elefes | Registrado 13-Dezembro 13 | Jogador | 8 comentários</p> </div> <div class="member"> <img src="imgs/membro-05.png"> <p>Enki Marduk | Registrado 25-Novembro 13 | Jogador | 338 comentários</p> </div> <div class="member"> <img src="imgs/membro-06.png"> <p>Escorpião | Registrado 25-Novembro 13 | Jogador | 338 comentários</p> </div> <div class="member"> <img src="imgs/membro-07.png">

125

<p>Estevancasarin | Registrado 25-Novembro 13 | 338 comentรกrios</p> </div> <div class="member"> <img src="imgs/membro-08.png"> <p>Ethos | Registrado 25-Novembro 13 | Jogador comentรกrios</p> </div> </section> <footer></footer> </body> </html>

Jogador

338

126

APÊNDICE E – HTML da página Perfil de usuário <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Perfil Usuário</title> <meta name="author" content="Antonio Bandeira"/> <link rel="shortcut icon" href="imgs/favicon.gif"> <link rel="stylesheet" type="text/css" href="css/estilos.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/rolagem.js"></script> <script type="text/javascript"> $(document).ready(function () { $("html").niceScroll(); }); </script> </head> <body> <header> <div id="header"> <div class="header"> <img id="logo-hoplon" src="imgs/logo_assinatura_hoplon.png"> <p><a href="">Ir para Minha Conta Hoplon</a></p> </div> <div id="menu"> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="perfil"> <a href="perfil_user.html"><div class="perfil"> <img class="avatar" src="imgs/arkano87_avatar.jpg"> <p>Arkano87</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div></a> <div id="perfil-sub"> <a href="perfil_user.html"><p>Meu Perfil</p></a> <a href="discussao_recentes.html"><p>Discussões recentes</p></a> <a href="discussao_sem_resposta.html"><p>Discussões sem respostas</p></a> <a href=""><p>Minhas discussões</p></a> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <div id="chat"> <div class="chat"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/chat.png"> <p>Chat | 3 amigos online</p> <img class="seta-drop" src="imgs/seta-drop.png"> </div> <div id="chat-sub">

127

<div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin2.png"> <p>NuuBr</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin5.png"> <p>Boris</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin8.png"> <p>Colleti</p> <p>Disponível</p> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin7.png"> <p2>Aciddevil</p2><br> <p2>Online há: 21h atrás</p2> </a> </div> <div id="online"> <a href="perfil_user.html"> <img src="imgs/avatar-admin3.png"> <p2>Annie</p2><br> <p2>Online há: 2 dias atrás</p2> </a> </div> </div> </div> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> <a href="membros.html"><div id="amigos"> <div class="amigos"> <img style="height:20px; float:left; margin: 10px 10px;" src="imgs/amigos.png"> <p style="text-decoration:underline;">Lista de Membros</p> </div> </div></a> <hr style="width:1px; height:50px; float:left; background:#2e798e; border:none;"> </div> </div> </header> <section id="corpo"> <section id="busca"> <input class="busca" type="text" placeholder="Pesquisar..."> </section> <section id="cont-topicos"> <div id="cont-cate" style="height:auto; margin:auto auto 10px; display:table;">

128

<div class="cont-cate" style="width:1280px;height:auto;"> <h1 style="margin:5px auto;">- HOUND -</h1> <div id="escada"> <div class="escada"> <p><a href="forum2.html">Fórum</a> > <a href="membros.html">Membros</a> > Hound</p> </div> </div> </div> </div> <div id="member"> <div id="user"> <div class="user"> <p id="user_name" class="name_user">Hound</p> <img src="imgs/perfil-post1.png"> <p id="user_stat" class="user_online bullet_user_on">usuário está conectado</p> <div id="social_user"> <div class="button_add"> <img src="imgs/add.png"> </div> <div class="button_mensage"> <img src="imgs/mensage.png"> </div> </div> </div> <div id="regi_user"> <div class="regi_user"> <p>Registro espacial:</p> </div> <p>Grupo: Comunidade</p> <p>Comentários: 1829</p> <p>Visualizações: 3587</p> <p>Idade: 26 anos</p> <p>Nascimento: 05/12/1987</p> <p>Gênero: -</p> <p>Localização: Florianópolis, SC</p> </div> <div id="discu_user"> <div class="discu_user"> <p>Discussões recentes:</p> </div> <p>Alterações no Fórum - Bloqueio de Novos Registros</p> <p>Criado em 22/11/2014 | Último comentário em 28/11/2014</p><br> <p>Como Detectar Speedhack e Denunciar Infratores</p> <p>Criado em 18/10/2014 | Último comentário em 28/11/2014</p><br> <p>ALERTA: Imagens de Naves de GM e Roubo de Itens</p><br><br> <p>Infrações e Bloqueios de Contas - Maio de 2014</p> <p>Criado em 12/08/2014 | Último comentário em 28/11/2014</p> </div> </div> <div id="members"> <div class="members_action">

129

<p>Cadastrado: 21/12/2011</p> <p>煤ltima atividade no f贸rum: 12/10/2014</p> </div> <div id="all_members"> <div class="ti_members"> <p>Amigos no F贸rum:</p> </div> <div class="all_members"> <div class="member_friend"> <img src="imgs/member01.jpg"> <p>Aether</p> </div> <div class="member_friend"> <img src="imgs/member02.jpg"> <p>Aggelus</p> </div> <div class="member_friend"> <img src="imgs/member03.jpg"> <p>AlexanToNY-Ku...</p> </div> <div class="member_friend"> <img src="imgs/member04.jpg"> <p>Batman</p> </div> <div class="member_friend"> <img src="imgs/member05.jpg"> <p>bigodelokos</p> </div> <div class="member_friend"> <img src="imgs/member06.jpg"> <p>Brutos</p> </div> <div class="member_friend"> <img src="imgs/member07.jpg"> <p>Cademo</p> </div> <div class="member_friend"> <img src="imgs/member08.jpg"> <p>Cardeal</p> </div> <div class="member_friend"> <img src="imgs/member09.jpg"> <p>CGCJr</p> </div> <div class="member_friend"> <img src="imgs/member10.jpg"> <p>Ch@k@l</p> </div> <div class="member_friend"> <img src="imgs/member11.jpg"> <p>ChronerLambda</p> </div> <div class="member_friend"> <img src="imgs/member12.jpg"> <p>ColetorDeAlma</p> </div> <div class="member_friend"> <img src="imgs/member13.jpg"> <p>Coriolano</p>

130

</div> <div class="member_friend"> <img src="imgs/member14.jpg"> <p>Draco</p> </div> <div class="member_friend"> <img src="imgs/member15.jpg"> <p>Dzy v Speed</p> </div> <div class="member_friend"> <img src="imgs/member16.jpg"> <p>flaviojose71</p> </div> <div class="member_friend"> <img src="imgs/member17.jpg"> <p>g.maicon</p> </div> <div class="member_friend"> <img src="imgs/member18.jpg"> <p>GabrielRdSouza</p> </div> <div class="member_friend"> <img src="imgs/member19.jpg"> <p>Kimi</p> </div> <div class="member_friend"> <img src="imgs/member20.jpg"> <p>Kira</p> </div> <div class="member_friend"> <img src="imgs/member21.jpg"> <p>Kronohc</p> </div> <div class="member_friend"> <img src="imgs/member22.jpg"> <p>LadyZehan</p> </div> <div class="member_friend"> <img src="imgs/member23.jpg"> <p>LAKOTA</p> </div> <div class="member_friend"> <img src="imgs/member24.jpg"> <p>Lannder</p> </div> <div class="member_friend"> <img src="imgs/member25.jpg"> <p>MASTERFUL</p> </div> <div class="member_friend"> <img src="imgs/member05.jpg"> <p>Mehiel</p> </div> <div class="member_friend"> <img src="imgs/member26.jpg"> <p>Mordekaiser</p> </div> <div class="member_friend"> <img src="imgs/member27.jpg">

131

<p>MOYKANO</p> </div> <div class="member_friend"> <img src="imgs/member28.jpg"> <p>Mun Ra</p> </div> <div class="member_friend"> <img src="imgs/member29.jpg"> <p>Munra</p> </div> <div class="member_friend"> <img src="imgs/member30.jpg"> <p>Nuclear</p> </div> <div class="member_friend"> <img src="imgs/member31.jpg"> <p>OKPotter</p> </div> <div class="member_friend"> <img src="imgs/member32.jpg"> <p>Pervy_link</p> </div> <div class="member_friend"> <img src="imgs/member33.jpg"> <p>Pombo</p> </div> <div class="member_friend"> <img src="imgs/member34.jpg"> <p>raZec</p> </div> <div class="member_friend"> <img src="imgs/member35.jpg"> <p>rodrigo775</p> </div> <div class="member_friend"> <img src="imgs/member36.jpg"> <p>Vevodg</p> </div> <div class="member_friend"> <img src="imgs/member37.jpg"> <p>xdcam</p> </div> <div class="member_friend"> <img src="imgs/member05.jpg"> <p>ZEROO</p> </div> <div class="member_friend"> <img src="imgs/member38.jpg"> <p>Zidius</p> </div> </div> </div> </div> </div> <div id="manifesto"> <h1 class="ti_manifesto">Manifesto:</h1> <p>â&#x20AC;&#x153;Morbi arcu quam, tempus nec luctus at, fermentum id diam. Nulla scelerisque ex et lectus tempus, vitae tempus orci tempus. Curabitur nec

132

varius mi. Donec venenatis vulputate velit sit amet cursus. Nunc scelerisque vestibulum libero.â&#x20AC;?</p> </div> </section> <footer> </footer> </body> </html>