Você está na página 1de 7

Faculdade de Tecnologia de Sorocaba

Tecnologia em Análise e Desenvolvimento de Sistemas

INTERAÇÃO HUMANO-COMPUTADOR: CONSTRUÇÃO DE GUIDELINES-


HOMEPAGE FATEC-SO
ATIVIDADE 9

Prof.º Sergio Moraes


Disciplina: Interação Humano-Computador

Rafael Pinheiro Troiano


Vinicius Mariano de Souza
Nilo Alan de Camargo Iturra

Sorocaba
Maio/2019
SUMÁRIO

1. INTRODUÇÃO ..................................................................................................... 2
2. DESCRIÇÃO GERAL DO SITE DA FATEC SOROCABA................................... 3
3. GUIDELINES NO SITE DA FATEC...................................................................... 3
4. SUGESTÃO DE GUIDELINES ............................................................................. 4
1. INTRODUÇÃO

Neste trabalho será feita uma análise e descrição do site da Fatec Sorocaba e, a partir
disso, serão apresentados os guidelines que o compõe, alguns positivos, alguns
negativos e, ao final, serão propostos guidelines para o aprimoramento da página da
Fatec, que peca em diversos aspectos, como não possuir responsividade para
dispositivos móveis e não contar com diretivas de UX – User Experience, que melhora
a interação do usuário com uma interface.

2
2. DESCRIÇÃO GERAL DO SITE DA FATEC SOROCABA

O site da Fatec Sorocaba segue um modelo de site empresarial. Na parte superior da


home page (ou index), há uma barra vermelha com o escrito “Fatec Sorocaba”,
seguido, à direita, de menus de cor branca, os quais têm todo o conteúdo necessário
para navegar-se no site, como “A Fatec”, “Cursos”, “Vestibular”, “Diretoria Acadêmica”,
“Diretoria Administrativa”, “Biblioteca” e “Alunos”. Abaixo dessa barra vermelha, há
uma barra cinza, de menor espessura, mas de mesmo tamanho, com o nome
completo da instituição de ensino (Faculdade de Tecnologia José Crespo Gonzales).
Imediatamente abaixo dessa barra cinza, há duas DIVs: a div da esquerda funciona
como um slide de informações importantes, como divulgação de vestibular, cadastro
de formandos e eventos que estão ocorrendo na Fatec, como a semana da
reciclagem, que está acontecendo agora, em maio de 2019. A div da direita possui
todas as notícias da instituição, como programas de bolsas, etapas do vestibular,
comunicados da direção, eventos no campus, etc. Abaixo dessas duas DIVs, há
outras 9 divs de mesmo tamanho, cada uma com o link e nome de um curso da Fatec,
mas falta uma div para o curso de “Manufatura Avançada”. Logo abaixo, há os eventos
previstos, que estão para acontecer, e links com programas e parceria com empresas,
como por exemplo, DreamSpark, ciência sem fronteiras (que não deveria mais estar
ali, uma vez que acabou), concursos públicos, SIGA, etc. Abaixo disso, há uma DIV
grande e cinza com os links contidos nos menus da barra vermelha de cima, e
embaixo, uma barra vermelha com o copyright da Fatec Sorocaba.

3. GUIDELINES NO SITE DA FATEC

1 – Separação simétrica de cursos: todos os cursos da Fatec, exceto o de manufatura


avançada, encontram-se separados em DIVs do mesmo tamanho na home page,
passando ao usuário uma sensação de simetria e facilidade para navegar nesses
links.

2 – Slides duram o mesmo tempo: na DIV que mostra uma apresentação de slide com
as notícias mais importantes, como vestibular, eventos que estão acontecendo,
cadastro de formandos, etc, todos eles têm a mesma duração, de 10 segundos,
transmitindo ao usuário uma sensação de organização.

3
3 – Evento dos menus da barra vermelha superior é o “mouse passing”: ao passar o
mouse nos menus da barra vermelha, com exceção de “vestibular” e “biblioteca”, são
exibidos numa div os links principais que há na página desses menus, como por
exemplo, ao passar o mouse em “cursos”, aparece “análise e desenvolvimento de
sistemas, eletrônica automotiva, etc”, um embaixo do outro.

4 – Abertura de arquivos PDFs em uma nova guia: todos os arquivos PDFs,


geralmente divulgação de listas de matrículas, ao serem clicados, são abertos em uma
nova guia para melhor facilidade.

5 – Quadro de docentes com os respectivos curriculum lattes: ao clicar no link dos


cursos, o usuário é levado a uma página em que há uma foto colorida do coordenador
do curso e fotos preto e branco de todos os professores que lecionam nele, as quais
ficam coloridas quando o mouse é passado em cima. Ao clicar na foto, é possível
visualizar o Curriculum Lattes do professor.

4. SUGESTÃO DE GUIDELINES

• Não repetir um link na mesma página.

Justificativa: o mesmo link em dois lugares diferentes na mesma página dá a


impressão de que esses mesmos links tratam de assuntos diferentes, podendo
confundir o usuário. Encontra-se, ainda, vários links para páginas que não existem.
As seguintes guidelines deveriam ser seguidas:

• Links criados para páginas que ainda não estão prontas devem ser encaminhados
para uma página dizendo “Página em construção”.

Justificativa: o sistema precisa manter os usuários informados sobre o que está


acontecendo.

• Links onde ocasionalmente levem para uma página não encontrada devem ser
tratados e reenviados para uma página dizendo que ocorreu um erro.

Justificativa: o sistema precisa manter os usuários informados sobre o que está


acontecendo. Outro problema presente no site é a falta de padronização quanto ao
tamanho e fonte da letra presente nos títulos. A mesma página chamada de lugares

4
diferentes possui o título com formatação de letra diferente. A seguinte guideline
deveria ser seguida:

• Todos os títulos devem seguir o mesmo padrão de formatação.

Justificativa: um ambiente padronizado é mais agradável ao usuário. Em algumas


áreas do site, algumas palavras estão abreviadas de modo que apenas quem conhece
a instituição sabe o que elas significam. A seguinte guideline deve ser seguida:

• Não abreviar palavras significativas.

Justificativa: o usuário pode não entender o significado da abreviação.

• Implementar responsividade no site.

Justificativa: como hoje umas parcelas consideráveis dos acessos aos sites são feitas
via dispositivos móveis, como smartphones e tablets pela sua conveniência, rapidez
e facilidade, é necessário que o site esteja adaptado para esses dispositivos para
facilitar a navegação do usuário.

• implementar diretivas de UX.

Justificativa: a inserção de diretivas UX pode melhorar a experiência do usuário com


o sistema. Esse guideline faz-se necessário não na home page em si, mas sim no
SIGA (sistema integrado de gestão acadêmica), onde há uma espécie de bagunça
nos links, como espaços excessivos entre um link e outro.

5
5. REFERÊNCIAS

Faculdade de Tecnologia de Sorocaba . s.d. http://www.fatecsorocaba.edu.br/


(Acesso em 20 de 05 de 2019).