Interação Humano-Computador: Construção De Guidelines

[pic 1][pic 2]

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

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

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.

1. 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:[pic 3]

[pic 4][pic 5]

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

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.

[pic 6]

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

[pic 7]

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

[pic 8][pic 9]

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

[pic 10][pic 11][pic 12][pic 13][pic 14][pic 15][pic 16]

[pic 17]

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

[pic 18]

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

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.

[pic 19]

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

[pic 20]

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

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.

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

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

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

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

[pic 21]na questão de acessibilidade e usabilidade das interfaces, ou seja, a plataforma em si.