Criação de Interface GráficaPara Rede Social
Acadêmica: Aline Mariê Tatara Hundensky
Prof. Orientadora: Mary Vonny Meürer
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
É 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
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.
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
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
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.
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.
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)
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
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
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)
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.
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
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.
Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
estilo de vida, valores pessoais e sociais, costumes
Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
as palavras do conceito são ilustradas com imagens
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
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
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)
Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
Estrutura Wireframe Geração de alternativas
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
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
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
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
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
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
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:
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
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
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
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
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
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
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
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
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
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
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
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.
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.
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
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
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