Sumário
Sumário
Árvor
Árvore e OrganOrganizacioizacional nal do do Site Site ... 2... 2
Árvore Organizacional Completa Árvore Organizacional Completa ... ... ... 33
Guidelines Identificadas no Site da FATEC-SO ... 4
Guidelines Identificadas no Site da FATEC-SO ... 4
Guidelines Sugeridas para o Site da FATEC-SO ... 7
Árvor
Árvor
e Organizacional
e Organizacional do Site
do Site
A seguir, apresentaremos a árvore organizacional do site da FATEC-SO (http:// A seguir, apresentaremos a árvore organizacional do site da FATEC-SO (http:// http://www.fatecsorocaba.edu.br/), obtida por meio da ferramenta gratuita
http://www.fatecsorocaba.edu.br/), obtida por meio da ferramenta gratuita WebsiteWebsite Extractor
Extractor . A árvore apresenta os skins, scripts, imagens e tantos outros arquivos que. A árvore apresenta os skins, scripts, imagens e tantos outros arquivos que formam o site.
formam o site.
Figura 1: Site da
Árvore Organizacio
Árvore Organizacional Completa do Sinal Completa do Site da Fatec-SO:te da Fatec-SO:
Figura 2: Árvore Organizacional do site FATEC-SO completa. Figura 2: Árvore Organizacional do site FATEC-SO completa.
Guidelines Identificadas no Site da
Guidelines Identificadas no Site da
FATEC-SO
FATEC-SO
Guideline
Guideline 1 1 Utilizar Utilizar cores cores de de acordo acordo com com o o logologo principal FATEC
principal FATEC / ETEC, no caso, / ETEC, no caso, oo vermelho, o preto, o branco e cinza. vermelho, o preto, o branco e cinza. Exemplo
Exemplo A A aba aba principal principal de de botões botões possui possui fontefonte branca e fu
branca e fundo vermelho.ndo vermelho. Guideline
Guideline 2 2 Exibir Exibir notícias notícias de de destaques destaques em em umauma exibição de loop, seguindo a
exibição de loop, seguindo a formataçãoformatação padrão de
padrão de textos no decorretextos no decorrer do resto dor do resto do site
site Exemplo
Exemplo Na aba “Notícias”, há notícias de coisas Na aba “Notícias”, há notícias de coisas
novas na faculdade com fonte vermelha e novas na faculdade com fonte vermelha e fundo branco. Essas notícias ficam
fundo branco. Essas notícias ficam subindo e voltando embaixo,
subindo e voltando embaixo, rodandorodando constanteme
constantemente em nte em flash.flash. Guideline
Guideline 3 3 Exibir Exibir as as atualizações atualizações no no centro centro com com títulotítulo em destaque vermelho e uma breve
em destaque vermelho e uma breve descrição embaixo do mesmo. descrição embaixo do mesmo. Exemplo
Exemplo No No centro, centro, há há as as informações informações principais,principais, como vestibular, intercâmbio cultural, etc. como vestibular, intercâmbio cultural, etc. Guideline
Guideline 4 4 Utilizar Utilizar links links externos, externos, ou ou pop-ups, pop-ups, para para aa maioria das i
maioria das informações/notíciasnformações/notícias Exemplo
Exemplo Ao clicarmos no botão “Vestibular”, éAo clicarmos no botão “Vestibular”, é
aberto uma nova aba/janela do
aberto uma nova aba/janela do navegadornavegador com o site
com o site www.vestibularfawww.vestibularfatec.com.brtec.com.br Guideline
Guideline 5 5 Exibir Exibir o o calendário calendário do do mês mês atual atual com com aa data do dia atual em
data do dia atual em destaque, utilizandodestaque, utilizando fonte vermelha.
fonte vermelha. Exemplo
Exemplo Embaixo da aba “Notícias” há oEmbaixo da aba “Notícias” há o
calendário em destaque, com uma aba calendário em destaque, com uma aba exclusiva só para o mesmo.
exclusiva só para o mesmo. Guideline
Guideline 6 6 Destacar Destacar uma uma aba aba de de botões botões contendocontendo links que o levam ao site do Centro Paula links que o levam ao site do Centro Paula Souza e à outros (a minoria) lugares do Souza e à outros (a minoria) lugares do mesmo site.
mesmo site. Exemplo
Exemplo Os Os botões/links botões/links Clipping, Clipping, Vestibular, Vestibular, aa pesquisa, o
pesquisa, o clima, etc, abrem sclima, etc, abrem sitesites específicos para eles
Guideline
Guideline 8 8 Exibir Exibir botões botões ilustrativos, ilustrativos, abaixo abaixo dodo calendário, que levam à sites externos de calendário, que levam à sites externos de comunidades da FATEC-SO
comunidades da FATEC-SO Exemplo
Exemplo Embaixo Embaixo do do calendário, calendário, há há links links para para oo blog da FATE
blog da FATEC, facebook da C, facebook da FATEC,FATEC, vestibular, site da VIARAPIDA, twitter vestibular, site da VIARAPIDA, twitter dada FATEC e o Google Maps
FATEC e o Google Maps da FATEC-SO.da FATEC-SO. Guideline
Guideline 9 9 Exibir Exibir no no canto canto esquerdo, esquerdo, um um conjunto conjunto dede botões, sep
botões, separados por asarados por assunto, contendosunto, contendo os principais assuntos de diretoria e os principais assuntos de diretoria e alunos.
alunos. Exemplo
Exemplo No No canto canto esquerdo, esquerdo, temos temos as as sessões sessões dede Menu Principal, Diretoria Acadêmica e Menu Principal, Diretoria Acadêmica e Diretoria Administrativa.
Diretoria Administrativa. Guideline
Guideline 10 10 Utilizar Utilizar linguagem linguagem voltada voltada à à usuáriosusuários mais
mais avançadoavançados/intermediários.s/intermediários. Exemplo
Exemplo Há Há links links com com nomes nomes de de Clipping,Clipping, MSDNAA e Softwares Educacionais. MSDNAA e Softwares Educacionais. Guideline
Guideline 11 11 Exibir, Exibir, em em constante constante movimentomovimento
horizontal, links para todos os cursos que horizontal, links para todos os cursos que a faculdade oferece.
a faculdade oferece. Exemplo
Exemplo Bem Bem abaixo abaixo no no final final do do site, site, há, há, em em flash,flash, todos os cursos da FATEC-SO, que são todos os cursos da FATEC-SO, que são exibidos da direita para a
exibidos da direita para a esquerda emesquerda em velocidade média.
velocidade média. Guideline
Guideline 12 12 Exibir, Exibir, abaixo abaixo do do grupo grupo de de botõesbotões esquerdo, o clima do dia atual,
esquerdo, o clima do dia atual, contendocontendo informações de temperatura.
informações de temperatura. Exemplo
Exemplo Abaixo Abaixo da da aba aba Diretoria Diretoria Administrativa,Administrativa, há informações do tempo, de acordo com há informações do tempo, de acordo com o site TEMPOAGORA.
o site TEMPOAGORA. Guideline
Guideline 13 13 Organizar Organizar o o Corpo Corpo Docente Docente em em ordemordem alfabética, independente da área de alfabética, independente da área de atuação ou curso que mestra.
atuação ou curso que mestra. Exemplo
Exemplo O O Corpo Corpo Docente Docente é é exibido exibido dentro dentro do do linklink Corpo Docente em ordem
Corpo Docente em ordem alfabética,alfabética, independe
independente do nte do curso ou grade.curso ou grade. Guideline
Guideline 14 14 Exibir Exibir apenas apenas a a carga carga horária horária e e brevebreve descrição dos cursos que são
descrição dos cursos que são exibidos paraexibidos para clicar na home Page.
clicar na home Page. Exemplo
Exemplo A A informação informação de de Análise Análise ee Desenvolvime
Desenvolvimento de nto de Sistemas específica oSistemas específica o curso e detalha a carga horária (2880
curso e detalha a carga horária (2880 horas), mas não exibe as matérias. horas), mas não exibe as matérias. Guideline
Guideline 15 15 Utilizar Utilizar uma uma simples simples interface interface para para enviarenviar e-mails à faculdade.
Exemplo
Exemplo O O envio envio de de e-mail e-mail para para contato contato é é simples simples ee de fácil utilização. É apresentado os
de fácil utilização. É apresentado os campos para inserir o Nome, o E-mail, o campos para inserir o Nome, o E-mail, o Assunto e a
Assunto e a Mensagem.Mensagem. Guideline
Guideline 16 16 Evitar Evitar ao ao máximo máximo o o uso uso de de fotos fotos parapara destacar notícias, quadros e afins. destacar notícias, quadros e afins. Exemplo
Exemplo Em Em lugar lugar algum algum é é utilizado utilizado fotos fotos parapara exibir as mensagens. Há apenas fotos na exibir as mensagens. Há apenas fotos na sessão de fotos do prédio (algumas, sessão de fotos do prédio (algumas, apenas).
apenas). Guideline
Guideline 17 17 Separar Separar o o conteúdo conteúdo dos dos títulos títulos emem subtítulos que abrem, quando há, mais subtítulos que abrem, quando há, mais informações específicas.
informações específicas. Exemplo
Exemplo Na Na aba aba Menu Menu Principal, Principal, temos temos o o subtítulosubtítulo
“Institucional” que não abre mais “Institucional” que não abre mais
informações ao lado específicas. Já o informações ao lado específicas. Já o
subtítulo “Coordenadorias” exibe, ao subtítulo “Coordenadorias” exibe, ao
ficarmos com o ponteiro do
ficarmos com o ponteiro do mouse emmouse em cima, outros subtítulos ao lado direito cima, outros subtítulos ao lado direito comcom os cursos levando, então, a cada
os cursos levando, então, a cada coordenad
coordenadoria oria específica.específica. Guideline
Guideline 18 18 Utilizar Utilizar imagens imagens em em formato formato .png .png e e .pdf.pdf para informar sob
para informar sobre matrículas, notas re matrículas, notas dede alunos, estágios, e afins.
alunos, estágios, e afins. Exemplo
Exemplo Ao Ao clicarmos clicarmos na na sesssessão “Calendárioão “Calendário Escolar” é aberto um .pdf para download, Escolar” é aberto um .pdf para download,
onde o mesmo contém as informações onde o mesmo contém as informações específicas.
específicas. Guideline
Guideline 19 19 Tratar Tratar os os erros erros de de manutenção manutenção de de site site ee erros de login na mesma
erros de login na mesma página, nopágina, no centro, sem detalhes e/ou sons de alerta. centro, sem detalhes e/ou sons de alerta. Exemplo
Exemplo Ao clicarmos no link “Informações” daAo clicarmos no link “Informações” da sessão “Programa de Formação
sessão “Programa de Formação Pedagógica”, somos levados à uma Pedagógica”, somos levados à uma
mensagem de manutenção no mesmo site, mensagem de manutenção no mesmo site, no centro, com a mesma
no centro, com a mesma formatação doformatação do restante do site.
Guidelines Sugeridas para o Site da
Guidelines Sugeridas para o Site da
FATEC-SO
FATEC-SO
Guideline
Guideline 1 1 Manter Manter o o site site atualizado atualizado constantemeconstantementente Exemplo
Exemplo Sempre Sempre exibir exibir notícias notícias e e demaisdemais informações atuais.
informações atuais. Justificativa
Justificativa Muitas Muitas das das informações informações disponíveis disponíveis sãosão antigas a ponto de não serem mais de antigas a ponto de não serem mais de interesse. Além do fato de a parte inferior interesse. Além do fato de a parte inferior
do site exibir: “2011” em pleno Dez/2012 do site exibir: “2011” em pleno Dez/2012
Guideline
Guideline 2 2 Exibir Exibir som som de de alerta alerta de de erro erro e e fontesfontes alternativas em tratamento de erros de alternativas em tratamento de erros de logins e afins.
logins e afins. Exemplo
Exemplo Quando Quando ocorrer ocorrer alguma alguma informaçãoinformação inválida em login ou em
inválida em login ou em lugar de acesso,lugar de acesso, emitir um som suave de erro p/ alertá-lo. emitir um som suave de erro p/ alertá-lo. Justificativa
Justificativa Não Não há há sons sons ou ou detalhes detalhes especiais especiais para para oo tratamento de erros.
tratamento de erros. Guideline
Guideline 3 3 Alinhar-se Alinhar-se à à uma uma linguagem linguagem dede programação
programação Exemplo
Exemplo Seguir Seguir um um padrão padrão de de linguagem linguagem dede programação
programação de acordo com ade acordo com a especializaç
especialização dos que ão dos que o mantém.o mantém. Justificativa
Justificativa De De acordo acordo com com a a árvore árvore organizacionaorganizacional,l, há várias linguagens sendo util
há várias linguagens sendo utilizadas,izadas, como flash, css, html, clipping, asp, como flash, css, html, clipping, asp, etc.etc. Guideline
Guideline 4 4 Não Não utilizar utilizar recursos recursos que que não não são são dede interesse do público alvo do site. interesse do público alvo do site. Exemplo
Exemplo Informações Informações de de clima clima e e esportes esportes em em umum site acadêmico
site acadêmico Justificativa
Justificativa Há Há informações informações de de clima, clima, esportes esportes ee calendário, irrelevantes e poluindo a tela. calendário, irrelevantes e poluindo a tela. Guideline
Guideline 5 5 Utilizar/manter Utilizar/manter as as ferramentas ferramentas queque gerenciam o site
gerenciam o site atualizadas.atualizadas. Exemplo
Exemplo Qualquer Qualquer clique clique de de link/botão link/botão deve deve levar levar àà algum lugar de acordo com o
algum lugar de acordo com o esperado.esperado. Justificativa
Justificativa Há Há programação programação antiga antiga sem sem atualização atualização ee muitos dos links não levam a lugar algum. muitos dos links não levam a lugar algum. Guideline
Guideline 6 6 Manter Manter o o visual visual limpo limpo e e de de fácilfácil entendimento.
entendimento. Exemplo
Exemplo Não Não deixar deixar uma uma massa massa de de textos textos ee informações em conjunto.
informações em conjunto. Justificativa
Guideline
Guideline 7 7 Utilizar Utilizar imagens imagens para para destacar destacar notícias notícias ee assuntos relacionados.
assuntos relacionados. Exemplo
Exemplo Utilizar Utilizar uma uma imagem imagem nas nas notícias notícias dede programação
programação, dos prédios, ve, dos prédios, vestibulares,stibulares, etc.
etc. Justificativa
Justificativa Não Não há há imagens/fotos imagens/fotos para para destacar destacar osos assuntos do site.
assuntos do site. Guideline
Guideline 8 8 Organizar Organizar o o Corpo Corpo Docente Docente tanto tanto porpor ordem alfabética quanto por curso ou área ordem alfabética quanto por curso ou área de atuação.
de atuação. Exemplo
Exemplo Deixar Deixar o o Corpo Corpo Docente Docente mais mais fácil fácil e e comcom maior comodidade à partir da organização maior comodidade à partir da organização por área de a
por área de atuação e/ou cutuação e/ou curso.rso. Justificativa
Justificativa O O Corpo Corpo Docente Docente está está organizado organizado apenasapenas por ordem alfabé
por ordem alfabética.tica. Guideline
Guideline 9 9 Organizar Organizar os os e-mails e-mails que que são são enviados,enviados, repassá-los e garantir atendimento à todos. repassá-los e garantir atendimento à todos. Exemplo
Exemplo Ao Ao enviar enviar um um e-mail, e-mail, o o mesmo mesmo deve deve serser recebido numa caixa de e-mail específica recebido numa caixa de e-mail específica para o site.
para o site. Justificativa
Justificativa Muitos, Muitos, quase quase todos, todos, os os e-mail e-mail enviadosenviados não são respondidos ou j
não são respondidos ou justificados.ustificados. Guideline
Guideline 10 10 Organizar Organizar por por sessões sessões e, e, assim, assim, exibirexibir novas telas do site para informações novas telas do site para informações específicas.
específicas. Exemplo
Exemplo Ao Ao clicar clicar em em algum algum link, link, deve-se deve-se abrirabrir uma tela com o
uma tela com o assunto específico comassunto específico com uma formatação aceitável e
uma formatação aceitável e não fechada.não fechada. Justificativa
Justificativa Há Há várias várias informações informações jogadas jogadas numanuma mesma tela, dificultando o
mesma tela, dificultando o entendimentoentendimento e, portanto, compreensão do que gostaria. e, portanto, compreensão do que gostaria. Guideline
Guideline 11 11 Links Links alternativos alternativos devem devem aparecer aparecer nono canto inferior direito, a fim de manter a canto inferior direito, a fim de manter a organização.
organização. Exemplo
Exemplo Os Os links links do do facebook, facebook, blog blog e e twittertwitter devem ser colocados no canto inferior devem ser colocados no canto inferior direito com tamanho pequeno/médio para direito com tamanho pequeno/médio para não ocupar as outras
não ocupar as outras funções importantesfunções importantes do site.
do site. Justificativa
Justificativa O O blog, blog, facebook, facebook, twitter twitter da da FATEC-SOFATEC-SO não são de extremo interesse para terem não são de extremo interesse para terem oo
Justificativa
Justificativa Todos Todos os os textos textos e e descrições descrições estão estão nono mesmo padrão e sempre em massa. mesmo padrão e sempre em massa. Dificulta a leitura e
Dificulta a leitura e acarreta desinteresse.acarreta desinteresse. Guideline
Guideline 13 13 Manter Manter atualizado atualizado e e disponível disponível os os direitosdireitos do site na informação inferior do site. do site na informação inferior do site. Exemplo
Exemplo Os Os direitos direitos do do site site devem devem estarestar
disponíveis na informação inferior do site, disponíveis na informação inferior do site, a fim de
a fim de manter a organização e padrão demanter a organização e padrão de Direitos do Site com os demais sites. Direitos do Site com os demais sites. Justificativa
Justificativa Há o link “Legislação”, porém de difícilHá o link “Legislação”, porém de difícil
entendimento. entendimento. Guideline
Guideline 14 14 Manter Manter uma uma linguagem linguagem de de escrita escrita de de fácilfácil entendimento e acesso.
entendimento e acesso. Exemplo
Exemplo Evitar Evitar linguagens linguagens de de informática informática e/oue/ou
assuntou específicos, como “Clipping”, assuntou específicos, como “Clipping”, “Softwares”, “MSDNAA”.
“Softwares”, “MSDNAA”.
Justificativa
Justificativa Muitas Muitas das das informações informações disponíveis disponíveis sãosão voltadas à usuários, no mínimo,
voltadas à usuários, no mínimo,
intermediários em informática e/ou outros intermediários em informática e/ou outros assuntos mais específicos.
assuntos mais específicos. Guideline
Guideline 15 15 Manter Manter diferencial diferencial de de cores cores de de acordo acordo comcom as abas, botões e afins.
as abas, botões e afins. Exemplo
Exemplo As As abas abas de de botões botões devem devem ter ter cores cores de de tonstons leves, destacando a fonte. As abas devem leves, destacando a fonte. As abas devem conter uma fonte diferente, a fim de conter uma fonte diferente, a fim de diferenciar os conteúdos.
diferenciar os conteúdos. Justificativa
Justificativa Tudo Tudo no no site site está está em em vermelho vermelho e e branco.branco. Não há difere
