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

HOMEPAGE FATEC-SO
ATIVIDADE 9

Prof.º Sergio Moraes

Disciplina: Interação Humano-Computador

JENNIFER RHAYRA PIRES DE CAMPOS R.A.: 0030482113007

JULIO CESAR DE CASTRO R.A.: 0030482023036
MATHEUS RAMOS RUBIO R.A.: 0030482023027

Sorocaba
Outubro/2021
 SUMÁRIO
1 INTRODUÇÃO ........................................................................................... 3
2 DESCRIÇÃO GERAL DO SITE DA FATEC SOROCABA .......................... 4
2.1 GUIDELINES PRESENTES NO SITE DA FATEC SOROCABA .......... 4
2.2 SUGESTÕES DE GUIDELINES .......................................................... 5
3 CONCLUSÃO ............................................................................................ 8
4 REFERÊNCIAS ......................................................................................... 9
1 INTRODUÇÃO
O modelo de design de interface definido por Shneiderman (2005) e citado
por Rocha e Baranauskas (2003) consiste basicamente em um modelo
metafórico de três pilares, sendo eles (1) Guidelines, que define o início do
processo para a construção de interfaces; (2) Ferramentas Soft, que se baseia
na criação de protótipos de interfaces utilizando ferramentas adequadas; e (3)
Testes de Usabilidade, que é a avaliação feita por especialistas e testes
realizados com os usuários.
Com base nisso, a presente atividade propõe uma análise do site da
Faculdade de Tecnologia (Fatec) de Sorocaba, com foco nas atuais guidelines
do site, promovendo um olhar crítico sobre elas, além de sugerir uso de novas
guidelines para tornar o site mais eficaz e eficiente.

3
2 DESCRIÇÃO GERAL DO SITE DA FATEC SOROCABA
Com a análise feita no site da Fatec Sorocaba, podemos afirmar que ele
segue um modelo de site empresarial. No topo da página inicial (ou índice), há
uma barra vermelha com a inscrição "Fatec Sorocaba" e um menu à direita, que
contém todo o conteúdo necessário para navegar pelo site, como "A Fatec",
"Cursos", "Vestibular", "Diretoria Acadêmica", "Diretoria Administrativa",
"Biblioteca" e "Alunos". Abaixo da barra vermelha, existe uma barra cinza de
menor espessura, mas do mesmo tamanho e com o nome completo da
instituição de ensino (Faculdade de Tecnologia José Crespo Gonzales). Logo
abaixo da barra cinza, há dois DIVs: O DIV à esquerda é usado como
apresentação de slides para informações importantes, como divulgação de
vestibular, inscrição de formandos e eventos ocorridos na Fatec. O DIV à direita
contém todas as notícias, como programas de bolsas, etapas do vestibular,
anúncios, eventos do campus etc.
Seguindo no site temos mais 10 DIV’s que são links para os cursos da
Faculdade (porém ainda falta o link para o curso de Gestão Empresarial – EAD),
uma DIV para informações de eventos e 9 com links de programas e parcerias
feitas pela Faculdade. Já no final do site temos uma barra cinza com os links
contidos nos menus da parte superior e uma barra vermelha com o copyright e
dados da Fatec Sorocaba.

2.1 GUIDELINES PRESENTES NO SITE DA FATEC SOROCABA

Aqui serão apresentados alguns dos guidelines observados no site da Fatec
Sorocaba (http://www.fatecsorocaba.edu.br/), e a sua justificativa de uso (todos
elaboradoras pelos autores).

Guideline 1: Apresentação dos cursos da universidade.

Exemplo: Todos os cursos são apresentados na homepage de forma
uniforme.
Justificativa: Facilita a visualização e navegação dos alunos e
vestibulandos no site.

Guideline 2: Navegação do site distribuída na parte superior do site.

4
 Exemplo: O cabeçalho do site apresenta a função a função “mouse
passing”, que apresenta as possibilidades de navegação.
Justificativa: A função permite uma navegação pelo site com poucos
cliques e mantem a aparência limpa do site.

Guideline 3: Notícias no topo da página.

Exemplo: Espaço para as notícias referentes ao foco da universidade.
Justificativa: É apresentado notícias referentes ao setor de tecnologia em
ordem: mais recente – mais antiga. Logo no topo da página
para manter o usuário sempre atualizado.

Guideline 4: Todo o conteúdo do site está centralizado.

Exemplo: Todo o conteúdo da home é apresentado em uma DIV
centralizada.
Justificativa: Permite navegação em um ponto no site sem faltar
informações para o usuário, mantendo uma visualização
agradável.

Guideline 5: Principais opções de navegação estão presentes na

home.
Exemplo: Sugestões de páginas mais visitadas pelos usuários do site,
como: Vestibular, Biblioteca e E-mail Institucional.
Justificativa: Facilita identificar os links mais acessados dentro do site e
coloca-los de forma mais explicita, diminuindo o tempo do
usuário para encontrar o que deseja.

2.2 SUGESTÕES DE GUIDELINES

Após uma análise no site da Fatec Sorocaba, são apresentadas aqui cinco
sugestões de guidelines para tornar o site mais eficiente e eficaz, melhorando a
interação dos usuários. As sugestões foram elaboradas pelos autores.

5
Guideline 1: Facilite a leitura
Exemplo: O usuário precisa consumir o conteúdo textual do site de
forma fácil e confortável. Assim, é preciso se atentar na hora
de escolher as fontes dos textos.
Justificativa: Dessa forma, o visual do texto fica mais limpo e padronizado,
fator que melhora a leitura — ou seja, a facilidade com que o
usuário consegue absorver todo o conteúdo textual.

Guideline 2: O design de site deve ser responsivo

Exemplo: Um site responsivo é um site que possui um layout que se
adapta perfeitamente ao tamanho e resolução da tela do
usuário, reorganizando de forma automática o conteúdo e
proporcionando uma melhor experiência de navegação,
principalmente em dispositivos móveis como tablets e
smartphones.
Justificativa: O design responsivo passou a ser uma obrigação para
qualquer empresa que possui um site, os smartphones
ultrapassaram os PCs, tornando-se o aparelho preferido do
brasileiro para acessar a internet.
O próprio Google também anunciou que as buscas via
dispositivos mobile já ultrapassaram as buscas via desktop,
e que os sites responsivos vão ter prioridade nos resultados
das buscas. Com base nisso, hoje é imprescindível que os
projetos de design para websites contemplem o fator
responsividade.

Guideline 3: Adote ações para aumentar a velocidade do site

Exemplo: Muitas vezes esquecida, a velocidade de carregamento das
páginas deve ser uma prioridade. Assim como o site precisa
ser bonito e moderno, é essencial que ele também seja
funcional.

6
Justificativa: Nesse momento, as escolhas feitas para a página devem ser
tomadas tendo como foco a experiência de navegação,
assim, ele deve rodar bem e carregar as páginas
rapidamente em qualquer plataforma.

Guideline 4: Manter os links de acesso atualizado no site

Exemplo: É possível perceber que tem páginas não funcionando
(Exemplo: “Microsoft DreamSpark”).
Justificativa: O sistema precisa manter os usuários informados sobre o
que está acontecendo, 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”.

Guideline 5: Implementar diretivas de UX.

Exemplo: Um dos pilares para uma boa interface está na arquitetura de
informação do seu site. É fundamental que ela seja
organizada, coerente e intuitiva, alinhado com o perfil dos
seus usuários e dados das pesquisas feitas até então.
Inclusive, é com o uso de serviços profissionais que essa
estruturação torna mais fácil encontrar o quê se procura.
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.

7
3 CONCLUSÃO

Pôde-se observar durante a realização da atividade a importância das

guidelines nos projetos, sejam eles sites ou outros aplicativos. Foram apontadas
sugestões de melhoria no site da Fatec Sorocaba, mostrando a necessidade de
acompanhamento e melhoramento constantes na aplicação.
É possível perceber que o uso de guidelines se mostra como uma
ferramenta prática e muito útil na aplicação de conceitos de interfaces voltada
para o usuário em projetos de software. São elas que asseguram que a aplicação
criada será bem aceita e operará de modo produtivo, sem a necessidade de
treinamento ou uma experiência adicional. Quando falamos das guidelines do
ponto de lista do desenvolvedor/designer, são elas que proporcionam o aumento
da produtividade, a redução de custos e tempo de desenvolvimento.

8
4 REFERÊNCIAS

FACULDADE DE TECNOLOGIA JOSÉ CRESPO GONZALES. Fatec

Sorocaba. Disponível em <http://www.fatecsorocaba.edu.br/>. Acesso em
outubro 2021.

ROCHA, H.V., BARANAUSKAS, M.C.C; Design e Avaliação de Interfaces

Humano- Computador. Campinas: NIED/UNICAMP, 2003.