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

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

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.

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

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

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

Área de programação Conteúdo

Novas Ferramentas

Que será feito pela empresa Involves.

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.

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)

Científica Projetual Adaptada

Metodologia Projetual Adaptada

Figura: Metodologia adaptada

Fonte: Arquivo Pessoal

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

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)

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

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.

estilo de vida, valores pessoais e sociais, costumes

as palavras do conceito são ilustradas com imagens

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

Estrutura Wireframe Geração de alternativas

Figura : Fluxograma da Rede Fonte: Arquivo Pessoal

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

01 02 03 04 05

Alternativa Escolhida

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:

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.

Cor Tipografia Gestalt Ergonomia UsabilidadeVariação de Cor e

FundoVariação de cor e fundo

Variação de cor e fundo

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

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

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

Proximidade: Caixas de conteúdo

Semelhança: Cores e formas

Gestalt

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.

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.

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).

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.

brigada!

Contato: alinemariedesigner@yahoo.com.br

47-9924-124447-8483-4221

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

Design

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

IMPLEMENTAÇÃO DE UMA INTERFACE GRÁFICA PARA CÁLCULO ...repositorio.roca.utfpr.edu.br/jspui/bitstream/1/10888/1/CP_COELT_2… · Implementação de uma interface gráfica para

Linguagem de Programação Interface Gráfica · •Interface gráfica com o usuário (graphical user interface – GUI): Apresenta um mecanismo amigável ao usuário para interagir

interface gráfica em java

Relatório de Validação da Interface Gráfica do Portal ...

Desenvolvimento de Interface Gráfica como Suporte para ...lemag.ufpa.br/publicacoes/colares_momag2010.pdf · al r Desenvolvimento de Interface Gráfica como Suporte para Soluções

Técnicas de Programação - bb.cruzeirodosulvirtual.com.br · Aplicação de Interface Gráfica. 5 • Aplicação de Interface Gráfica · Nesta Unidade, o aluno terá uma visão

Interface gráfica blender

Linguagem de Programação II · Linguagem de Programação II / Java –Interface Gráfica com o Usuário Linguagem de Programação II GUI Interface Gráfica com o Usuário ...

Interface gráfica para cálculo luminotécnico no Matlab

INTERFACE GRÁFICA APLICADA AO CONTROLE DE VELOCIDADE …

INTERFACE GRÁFICA DO USUÁRIO PARA APLICATIVO DE …pdf.blucher.com.br.s3-sa-east-1.amazonaws.com/designproceedings/ped... · uma interface gráfica com o objetivo de gerar ... o

Java classes, métodos e interface gráfica

Interface Gráfica - lsi.usp.brpaiva/linguagem/3-gui.pdf · 1 Linguagem Java - Prof. Luciana Porcher Nedel 1 Interface Gráfica • GUI (Graphic User Interface) • AWT e Swing •

Fernando a Interface Gráfica

Desenvolvimento de uma interface gráfica para simulação de ...

INTERFACE GRÁFICA Elementos da interface gráfica –janelas –menus –ícones –figuras geométricas –caixas de diálogo –caixas de mensagem –barra de ferramentas.

Desenvolvimento da interface computacional gráfica em estereotaxia.

MOHID - Interface gráfica do usuário

Java interface gráfica swing

BEMLAB2D: INTERFACE GRÁFICA DE MODELAGEM, … · bemlab2d: interface grÁfica de modelagem, visualizaÇÃo e anÁlise com elementos de contorno – uma aplicaÇÃo em problemas elastostÁticos