Interface Homem Computador
Por: jonas1996 • 29/5/2015 • Projeto de pesquisa • 1.813 Palavras (8 Páginas) • 262 Visualizações
UNIVERSIDADE PAULISTA - UNIP |
[Digite o título do documento] |
IHC |
YARA SANTOS DIAS – T31335-0 JONAS ALVES - C358746 FELIPE MARCOS DENIS MAGALHÃES JENNIFER TALIA RODRIGO |
19/05/2015 |
Sumário
INTRODUÇÃO:
PARTE DO ADMINISTRADOR - NÍVEL 3
TELA: ACESSO ADMINISTRATIVO
TELA: ESQUECEU A SENHA?
TELA: USUÁRIOS CADASTRADOS
TELA: ADICIONAR USUÁRIO
TELA: PRODUTOS CADASTRADOS
TELA: RELATÓRIOS
INTRODUÇÃO:
Este trabalho tem por objetivo promover a introdução de conceitos aprendidos por nós, juntamente com o professor Edson, a importância significativa exposta aqui são bases, como semiótica que estuda os conceitos da imagem em relação aos sentidos, a engenharia cognitiva que engloba os sentidos humanos, como percepção e etc., também o quesito usabilidade, que retrata a questão da acessibilidade e quanto é feita a facilidade de quem se depara a primeira vez, já percebe a facilidade de usar suas funções e praticidade nos botões.
Neste trabalho explicaremos cada página que fizemos da nossa aplicação.
Cada parte terá uma explicação sucinta de cada tema abordado em sala de aula. Estes temas são: SEMIÓTICA, USABILIDADE e ENGENHARIA COGNIGTIVA.
Não será muito abordada a definição dos temas neste documento, apenas mostraremos onde (em que parte da aplicação) foi utilizada, conforme solicitado pelo professor de IHC. A explicação será feita da seguinte forma:
Primeiro haverá um TITULO com o nível ( ex: NÍVEL 3 – ADM) e haverá um subtítulo da página específica (ex: tela de “cadastro de usuário”)
Cada parte do trabalho mostrará onde foi utilizado o conteúdo passado em sala de aula (semiótica, usabilidade e engenharia cognitiva), além da explicação da tela citada.
[pic 1]
PARTE DO ADMINISTRADOR - NÍVEL 3
TELA: ACESSO ADMINISTRATIVO
[pic 2]
SOBRE A TELA:
A tela acima (Painel Administrativo) se refere à parte onde o Administrador deverá inserir login/E-mail e senha para ter acesso a todas as informações e permissões fornecidas á um adm.
Acessando esta tela, o ADM poderá fazer alterações da Aplicação, cadastrar usuários, entre outras permissões concedidas a ele.
SEMIÓTICA UTILIZADA:
“Ícones são signos substitutivos (podem ser usados no lugar da coisa representada)”
Seguindo esta pequena definição dentro da semiótica, utilizamos os ícones HOMEM e CADEADO, que simboliza Login(E-mail) e Senha.
[pic 3][pic 4]
Note também, no canto superior esquerdo o ícone de “menu”:
Ao vermos estes símbolos, fica claro o seu significado. É muito útil, pois, além de economizar espaço, traz uma interface melhor com o usuário.[pic 5]
USABILIDADE UTILIZADA:
“Na Interação Humano-computador e na Ciência da Computação, usabilidade normalmente se refere à simplicidade e facilidade com que uma interface, um programa de computador ou um website pode ser utilizado.”
Seguindo esta definição, a aplicação foi feita de forma a facilitar a utilização.
A tela de Login possui apenas as informações essenciais:
-Espaço para se digitar as informações, sempre bem alinhadas na tela.
-Link “ESQUECI SENHA” caso o usuário esqueça a senha ( Mostraremos mais tarde esta tela neste documento) está bem visível.
Definição dos texbox bem visíveis e legíveis.
ENGENHARIA COGNITIVA UTILIZADA:
“Ele sugere que o processo de escaneamento dos blocos de conteúdo acontece da esquerda para a direita e de cima para baixo, formando um Z, dessa forma, conseguimos identificar facilmente quais são as áreas mais significativas da tela, as chamadas Zonas quentes.”
Seguindo esta pequena definição de Engenharia cognitiva, utilizamos botões sempre alinhados a direita em nossa Aplicação. [pic 6]
Note que o botão “ENTRAR” se encontra do lado direito da tela. Este botão foi colocado neste canto da tela de forma proposital. Um botão bem posicionado é muito mais eficiente do que um botão grande piscando numa área ruim da tela.
TextBox alinhados um em baixo do outro.
TELA: ESQUECEU A SENHA?
[pic 7]
SOBRE A TELA:
Na tela de Login, ao clicar em “ESQUECEU A SENHA?” a aplicação irá direcionar para a tela acima.
O usuário terá que inserir o e-mail utilizado no cadastramento, clicar em “Redefinir senha”.
Após isto, será enviado para o e-mail ( caso ele tenha sido realmente cadastrado no sistema ) com o link para criar uma nova senha.
SEMIÓTICA UTILIZADA:
Nesta tela foi utilizado apenas o ícone de Login (utilizado na maioria dos sites). Veja ao lado.[pic 8]
USABILIDADE UTILIZADA:
A usabilidade desta tela é a mesma da tela anterior “Login do ADM”. Definição dos texbox bem visíveis e legíveis.
ENGENHARIA COGNITIVA UTILIZADA:
Como já dito anteriormente, utilizamos botões sempre alinhados a direita em nossa Aplicação.
Note que o botão “Redefinir senha” se encontra do lado direito da tela.
Acrescentando a definição. “A área do click de um botão é conhecida como superfície ativa, enquanto a área do botão sem click é chamada de ‘dead Pixel’”.
Para evitarmos que haja alguma parte sem clique, todos os botões da aplicação são retangulares ( e não redondos ).
TELA: USUÁRIOS CADASTRADOS
[pic 9]
SOBRE A TELA:
A tela acima (USUÁRIO) se refere à parte de usuários cadastrados.
...