Transcript
Page 1: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Criação de Interface GráficaPara Rede Social

Acadêmica: Aline Mariê Tatara Hundensky

Prof. Orientadora: Mary Vonny Meürer

Page 2: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização

Redes sociais crescem cada dia mais.

Brasil país que mais acessa sites relacionados a comunidades. [78,4% Brasil | 73,7 Japão | 62,9% França] (Folha Online de

2008 )

Segundo Manuel Casttels “redes constituem a nova morfologia social de nossas sociedades e a difusão da lógica de redes modifica de forma substancial a operação e os resultados dos processos produtivos e de experiência, poder e cultura.”

E Mattar diz que o aspecto social do futebol no Brasil também é muito forte porque é uma modalidade que exige baixo investimento em termos práticos. Na verdade, tendo uma bola e um grupo de pessoas, você já tem futebol.

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Page 3: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

É possível concluir que em um país como o Brasil, no qual o futebol é “paixão nacional” e as redes sociais são mais acessadas pelos brasileiros, a união dos dois tem tudo para dar certo.

Contextualização

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Page 4: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 5: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 6: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Objetivo Geral:Desenvolver a interface gráfica da rede social Meio Campo.

 

Objetivos Específicos: Compreender e aplicar o conhecimento sobre redes sociais e futebol;

Aplicar os fundamentos do design para a concepção de uma interface adequada;

Aplicar critérios de ergonomia e usabilidade para desenvolver uma interface eficiente.

Page 7: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Problema de Projeto Superar a barreira usabilidade versus identificação do público

Auto-explicativa

Fácil acesso

Mesmas tarefas em poucos clicks

Hipóteses

Page 8: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Hipóteses Usar wireframe padrão para tornar mais familiar Customização da interface

Hipóteses

Problema de Projeto Superar a barreira usabilidade versus identificação do público

Auto-explicativa

Fácil acesso

Mesmas tarefas em poucos clicks

Page 9: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Delimitações do Projeto Exclui-se do projeto:

Área de programação Conteúdo

Novas Ferramentas

Que será feito pela empresa Involves.

Page 10: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Científica Projetual

Metodologia CientíficaLakatos e Marconi;

bibliográfica: para reconhecimento de informações acerca do tema, cliente, produto, público-alvo e concorrentes.

pesquisa de observação: direta extensiva com aplicação de questionários com perguntas abertas e de múltiplas escolha ao

público-alvo,

análise: interpretação e organização dos resultados obtidos.

Page 11: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Científica Projetual

Metodologia ProjetualRadfahrer, que afirmou que “cada designer tem uma metodologia

própria e particular, mas todas condizem mais ou menos à mesma coisa.

Figura: Metodologia de RadfahrerFonte: Tese de doutorado de Mônica

Stein (2003)

Page 12: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Científica Projetual Adaptada

Metodologia Projetual Adaptada

Figura: Metodologia adaptada

Fonte: Arquivo Pessoal

Page 13: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Fundamentação Teórica

Web 2.0interatividade, troca de informações, colaboração entre usuários

Rede Socialrede de computadores conecta uma rede de pessoas e

organização

Futebol oportunidade prática de exercitar a cidadania, é projeto e desejo

de coletividade

Empresa 2008, São José/SC - FabriCO, Rocler, Helio Print

Page 14: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Tipografia está relacionada não só a legibilidade,mas também a consistência das

interfaces, sendo apontada como recurso que pode facilitar a orientação do usuário,ao lado de outros códigos como a cor e demais elementos gráficos - recomendações de Nielsen , Bastian & Scapin, Schneiderman. Cor

desafio, pois usuários tem preferência em utilizar cores relacionadas aos times

Interface Gráfica designa o conjunto de programas e aparelhos materiais que

permitem sistema informativo e seus usuários humanos. (Lévy)

Page 15: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estado do Design-Notícias -Interface voltada ao futebol-Formas geométricas-Poucos ícones-Cores Neutras

Concorrentes- Kigol: os usuários se cadastram e passam a fazer parte de grupos, fóruns e blogs- Rayleague: jogadores amadores se tornarem profissionais e dos clubes, agentes e

treinadores - SFBr : é possível encontrar informação sobre time que torce, jogadores,

campeonatos e instituições.-Peladeiro: você pode ser o administrador de jogos de futebol pela internet. -Orkut, Twitter e Facebook.

Page 16: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

QuestionárioPerfil usuário: homens, 19 a 27 anos, conectado por 3 horas, possuem ensino

superior.

Redes que os usuários mais se identificam: Orkut e Twitter.

Cor: 66% não deixariam de acessar por causa da cor.

Símbolos: bola, gol e torcida

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Page 17: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Conceituação

ConceituaçãoSegundo Baxter(1995) , é necessário transmitir certos

sentimentos e emoções nos projetos, isso pode ser conseguido construindo-se diversos painéis de imagens visuais.

Page 18: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

estilo de vida, valores pessoais e sociais, costumes

Page 19: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

as palavras do conceito são ilustradas com imagens

Page 20: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

figuras que foram citadas na pesquisa, imagens que representem o projeto

Page 21: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

Figura : Fluxograma da Rede Fonte: Arquivo Pessoal

Page 22: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

Figura: Wireframe Padrão Fonte: Felipe Memória(2005)

Page 23: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

Page 24: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Page 25: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Page 26: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Page 27: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Page 28: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Page 29: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Alternativa Escolhida

Page 30: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Estrutura Wireframe Geração de alternativas

01 02 03 04 05

Alternativa Escolhida

Tabela de critério de avaliação sugerida por Baxter(2000, p.64)que também foi utilizada para selecionar a alternativa escolhida:

Page 31: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

VERDE simbolicamente a representa do campo de futebol

BRANCO grande destaque. Utilizada sob os conteúdos, pois é a mais indicada para a inserção dos mesmos por possibilitar um melhor contraste com os textos e imagens, tornando o site menos cansativo à visão do usuário.

E o GRAFITE, dá equilíbrio e estabilidade, por ser o

equilíbrio do preto e do branco.

Cores

Page 32: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia UsabilidadeVariação de Cor e

FundoVariação de cor e fundo

Page 33: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Variação de cor e fundo

Page 34: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Variação de cor e fundo

Page 35: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Variação de cor e fundo

Page 36: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Variação de cor e fundo

Page 37: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Variação de cor e fundo

Page 38: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Variação de cor e fundo

Page 39: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Neste projeto foram utilizadas duas fontes, Estrangelo Edessa e Verdana.

Estrangelo Edessa :títulos e texto curtos. Verdana: textos longos e outras informações.

Tipografia

Estrangelo Edessa

Verdana

Page 40: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Unidade: O site é formado por várias unidades, como: a cor do fundo, a marca da empresa, as formas geométricas, os textos, menu.

Segregação: Divisão em fundo, menu, conteúdo e rodapé, estas mesmas unidades segregam-se nas unidades comentadas no item anterior, que também segregam-se em novas unidades até que se possa esgotar a percepção das unidades visíveis.

Gestalt

Page 41: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Cor Tipografia Gestalt Ergonomia Usabilidade

Continuidade: As linhas que fecham as caixas dão sensação de continuidade.

Proximidade: Caixas de conteúdo

Semelhança: Cores e formas

Gestalt

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Page 42: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

InformacionalLegibilidade: fundo do site composto por cor e imagem, isolado das informações.

Leiturabilidade: textos curtos e diretos.

Pregnância Visual: segue o mesmo padrão em todas as páginas.

Ergonomia

De interfaces (Bastien e Scapin, 1993)Critérios e Subcritérios

Condução: usuário sabe sua localização 4 subcritérios: Presteza – indica o caminho, cores e botões.

Agrupamento/Distinção de itens – box conteúdo, amigos, times, prêmios. Feedback Imediato – resposta de ação.

Page 43: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Cor Tipografia Gestalt Ergonomia Usabilidade

Utilizando os 7 critérios básicos de Dias(2007):

Usabilidade

-Eficácia e eficiência de uso: Informações separadas, conteúdo de forma eficiênte. -Satisfação subjetiva: Estrutura simples, navegação fácil e conteúdo separado.

-Facilidade de aprendizado: Usuário já conhece outras redes, facilitando o acesso.

-Facilidade de memorização: wireframe padrão conhecido.

-Baixa taxa de erros: Usuário já utiliza redes sociais, sabe como corrigi-los caso ocorra.

-Consistência: terminologia, fontes e cores padronizados.

-Flexibilidade: acessar área de prêmios de diversas maneiras.

Page 44: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Conclusão

-Objetivos cumpridos,

-Layout esteticamente atraente,

-Atende aos conceitos definidos,

- O layout elaborado para atender as exigências do projeto,

- Recomendações e tendências,

-Diferencial destacado,

-Customização pré-definidas

-Conceitos de usabilidade e ergonomia

Page 45: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Marketing Analisado o composto de marketing criado por Jerome

McCarthy(1960), os chamados “quatro ps”,

Produto: rede social.

Preço: valor referente à criação do layout ,locação do servidor será no valor de R$60,00 mensais e o domínio de R$30,00 por ano.

Praça: Brasil, mas como este projeto é destinado ao meio virtual poderá ser acessado de qualquer lugar, o idioma e política de premiação não permitem que seja utilizado fora do Brasil no momento.

Promoção: a divulgação da rede social será feita através de vídeos virais, divulgação em campos de futebol, e-mail marketing e através dos parceiros (lojas que disponibilizaram os prêmios da rede social).

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Page 46: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Desdobramentos Futuros Primeiramente a empresa Involves pretende implementar este

projeto;

Disponibilizar a rede para desenvolvedores criarem novos aplicativos;

Criar o aplicativo móvel deste projeto, para facilitar ainda mais o acesso dos usuários;

Expandir a rede para outros países.

Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos

Page 47: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 48: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 49: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 50: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 51: TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Page 52: TGI - Criação de Interface gráfica Para Rede Social Meio Campo

brigada!

Contato: [email protected]

47-9924-124447-8483-4221


Top Related