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

Bruno Felipe Do Amaral Gurgel 0030482023041

Douglas Patrick Santos 0030482023009
Mayara Sabrina Dos Santos 0030482123009

Sorocaba
OUTUBRO/2021

1
SUMÁRIO

1. Introdução....................................................................................... 3
2. Descrição Geral do site................................................................. 4
3. Guidelines que existam no site da Fatec...................................... 6
4. Sugestões de guidelines................................................................ 8
5. Referências...................................................................................... 11

2
1. Introdução
O seguinte trabalho visa apresentar os tipos de guidelines que são
atualmente utilizados no site da FATEC-SO (link:
http://www.fatecsorocaba.edu.br/) com exemplos práticos e visuais. Abordando
os pontos positivos e negativos, se baseando nos conceitos apresentados em
salas de aula da matéria de Interação Humano-Computador e também serão
propostos algumas guidelines com o objetivo de melhorar a experiência do
usuário com o site da instituição, com o objetivo final de aprimorar a interação
entre o usuário e o computador.

3
 2. Descrição geral do site

O site da Fatec-SO é um site acadêmico com o visual totalmente empresarial,

onde encontra-se todos os dados referente a instituição desde contatos até os
cursos que oferecem e até mesmo a descrição de cada um. Entrando do site através
do link “http://www.fatecsorocaba.edu.br/” vemos na parte superior da home page
(ou index) uma barra vermelha com o nome do site “FATEC SOROCABA” e junto
desse mesmo cabeçalho (ou header), à direita encontra-se o menu (ou nav) onde
possui todo o conteúdo necessário para que o usuário possa realizar a navegação
do site:

(Home page e menu do site: http://www.fatecsorocaba.edu.br/)

Abaixo da barra vermelha do cabeçalho (ou header) da página temos o nome
completo da instituição de ensino “Faculdade de Tecnologia José Crespo Gonzales”,
após essa barra cinza temos duas divs que são apresentadas em formato de slides
e scrolling em que a primeira do lado direito do site mostra as notícias importantes
divulgadas sobre a instituição sobre a instituição e ao lado esquerdo é basicamente
uma divulgação de comunicados, programas de bolsas, abertura de novos
vestibulares:

Após essas informações principais do site da Fatec-SO, temos outras divs

que são divididas em caixas dos mesmo tamanho (ou boxes) mostrando os cursos

4
oferecidos, onde cada qual possui links que levam para outras páginas com suas
repectivas descrições. Logo após essas divs, temos ao lado esquerdo uma lista com
os possíveis eventos que a instituição pode realizar e ao lado encontra-se divs
(boxes) com links voltados para as pessoas que frequentam e trabalham no local.

E por fim temos o rodapé da pagina (ou footer) onde está todas as
informações apresentadas, e quem desenvolveu o web site:

5
3.Guidelines que existam no site da Fatec

1- Menu Congelado:

• Na página inicial a primeira barra com os menus do site vermelha podemos

ver o logo da Fatec bem exposto onde sempre que clicamos no mesmo
voltamos a tela inicial e o mesmo da acesso a todos os menus da plataforma,
por meio de hiperlink ele abre outras janelas partindo do click comando do
usuário a sua necessidade.

2- Home Page com menus:

• Na página inicial vemos também algumas opções de navegação que o site

oferece a seu serviço e a utilização de seu cliente (Alunos, Professores,
Estudantes, etc.). Ao passar o mouse nas mesmas, vemos uma lista de
acessibilidade para cada link que está ligado aquele assunto e apenas a
opção “Vestibular” e “Biblioteca” não se divide em links sendo o assunto
principal.

6
3- Caixa de “Notícias”:

• Vemos também na Home Page uma caixa com notícias atualizadas ligadas
as eventualidades da organização de ensino Fatec informando todos que
acessam a página, é uma caixa com links em cada opção de notícia que ao
Clik, o mesmo é aberto na mesma Guia e te leva para os dados e
informações da publicação.

4- Apresentação de Slides:

• Na home Page ao lado da caixa de Notícias vemos também uma

apresentação de slides com algumas notícias de maior relevância da
organização, possivelmente utilizado “JQuery” e “bootstrap” em sua

7
 codificação. Em determinado período de tempo ele muda automaticamente
com os slides ali postado e com uma funcionalidade de clik em botões para
passar ou retornar o slide.

5- Separação de Cursos:

• Na home Page os cursos são aprensentados de forma Gráfica e Escrita, com

uma imagem para cada qual e ao passar o mouse em cima muda a cor dos
mesmo sendo uma cor para cada curso, estabelecendo cada curso o seu
escopo definido.

4.Sugestões de guidelines que poderiam ser usadas no site da

Fatec.

1- Efeitos Sonoros:

• O site não sendo responsivo não tem necessidade de conter efeitos sonoros,
porém seria uma ferramenta a mais no auxílio do mesmo, locando assim

8
 advertências para chamar a atenção do usuário ao inserir algum dado errado.
Ao passar por imagens ou links de informação mais relevante também ser
acionado essa ferramenta a mais auxiliando a atenção do evento exposto.

2- Mapa com a extensão da Organização:

• Sabemos que a questão de localização é uma das necessidades mais

importantes hoje em dia seja para alunos como professores e também
colaboradores ligados a instituição, o site deveria gozar de um mapa
geográfico assim instruindo os mesmos a um acesso mais seguro de sua real
localização por ser um site oficial e atualizado.

3- Linguagem Literal do Site:

• O site para atingir um maior público deveria também conter uma plataforma
com disponibilidade para mudança de linguagem para a inclusão de
estrangeiros.

4- Inclusão Social “PCD”:

• Incluir ao site uma Guia “TalkBack” Trata-se de um software que faz leitura de
tela voltado para acessibilidade, ou seja, dedicado as pessoas que portam
necessidades especiais. Contribuindo com o auxílio e inclusão dos mesmos
em um site que tem a responsabilidade de fazer esse trabalho social.

5- Responsividade do Site:

• O site poderia ser mais responsivo na questão de adaptar-se a dispositivos

móveis, pois hoje em dia os usuários nem sempre gozam de um equipamento
mais apropriado ao estudo, como por exemplo um computador, notebook e
etc. E com a melhoria do site sendo responsivo todos tem a mesma facilidade

9
na questão de acessibilidade e usabilidade das interfaces, ou seja, a
plataforma em si.

10
5.Referências:

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

(Acesso em 30 de outubro de 2020).

11