1) O documento discute o projeto de interfaces de um sistema seguindo quatro atividades básicas de design: identificar necessidades, desenvolver designs alternativos, construir versões alternativas e avaliá-las. 2) Apresenta duas interfaces alternativas para o sistema, com detalhes de cada página como "Inicial", "Ranking", "Sobre Nós" e "Rodapé". 3) As interfaces visam fornecer uma navegação intuitiva e objetiva para o usuário, com animações sutis e recursos como ajuda sempre dispon

1. Interação Humano-Computador
PROJETAR A INTEFACE DE UM SISTEMA
SEGUINDO AS QUATRO ATIVIDADES
BÁSICAS DE UM DESIGN
Alunos:
Thiago Pereira Rosa
thiagor@engineer.com
Matheus Souza de Carvalho
matheussouzadecarvalho@gmail.com
Professora:
Andréia Sampaio
andreiasampaio@gmail.com

2. TRABALHO FINAL - DESIGN DE INTERFACES
2
Índice:
Interface X Computação................................................................................................3
Interface Visual ..............................................................................................................3
Quatro atividades básicas de Design ...........................................................................3
Interface 1 (oficial).........................................................................................................4
Interface “Inicial”........................................................................................................................ 4
Interface “Ranking” .................................................................................................................... 5
Interface “Sobre Nós” ................................................................................................................ 6
Interface “Rodapé”..................................................................................................................... 7
Interface “Ajuda”........................................................................................................................ 8
Interface 2 (alternativa)..................................................................................................9
Interface “Inicial”........................................................................................................................ 9
Interface “Ranking” .................................................................................................................. 10
Interface “Sobre Nós” .............................................................................................................. 11
Interface “Rodapé”................................................................................................................... 12
Referências..................................................................................................................13

3. TRABALHO FINAL - DESIGN DE INTERFACES
3
Interface X Computação
O conceito de Interface é amplo, pode se expressar pela presença de uma
ou mais ferramentas para o uso e movimentação de qualquer sistema de
informações, seja ele material, seja ele virtual.
O dicionário define interface como o conjunto de meios planejadamente
dispostos sejam eles físicos ou lógicos com vista a fazer a adaptação entre dois
sistemas para se obter um certo fim cujo resultado possui partes comuns aos dois
sistemas, ou seja, o objeto final possui características dos dois sistemas.
Interface Visual
Uma interface com utilizadores que recorre ao mouse e imagens de mapa de
bits para simplificar grandemente as operações básicas do computador para os
usuários iniciantes.
Os recursos típicos da interface visual são os quadros de advertência,
clipboard ou áreas de transferência, os acessórios, de mesa, a metáfora do desktop,
os quadros de dialogo, as setas de paginação, a possibilidade de utilização de
diversas fontes na tela, a equivalência entre conteúdo da tela e a página impressa e
a abertura de várias janelas na tela.
Quatro atividades básicas de Design
1. Identificar necessidades e estabelecer requisitos;
2. Desenvolver designs alternativos que vão ao encontro desses requisitos;
3. Construir versões alternativas de maneira que possam ser transmitidas aos
outros e apreciadas;
4. Avaliá-las, isto é, medir sua aceitabilidade.

4. TRABALHO FINAL - DESIGN DE INTERFACES
4
Interface 1 (oficial)
Protótipo inicial de baixa fidelidade da Primeira Interface (oficial).
Data: 14/11/2013
Versão: 1.0
Interface “Inicial”
Obs:
Está é a primeira tela com que o usuário final se depara ao acessar o sistema.
O intuito é ser o mais objetivo possível e ainda exibir as funcionalidades principais do
sistema, além de realizar o merchandising das marcas UFC e ES.
- Os itens de menu são animados sutilmente com desdobramento e
então ocorre a troca de cores, sempre que o usuário posiciona o cursor
do mouse sobre o ítem selecionado.
- Ao retirar o cursor, o menu volta ao estado inicial.

5. TRABALHO FINAL - DESIGN DE INTERFACES
5
Interface “Ranking”
Obs:
Nenhuma.

6. TRABALHO FINAL - DESIGN DE INTERFACES
6
Interface “Sobre Nós”
Obs:
Nenhuma.

7. TRABALHO FINAL - DESIGN DE INTERFACES
7
Interface “Rodapé”
Obs:
O rodapé é estático, pertence a todas as páginas, mas permanece oculto, o usuário
deve rolar a página para que ele seja exibido (é uma técnica relativamente nova, que
proporciona mais interatividade com o usuário).
Assim deixamos a interface limpa e objetiva, mas com todas informações referentes
ao sistema sempre disponíveis ao usuário (auxiliando inclusive em SEO, devido o
cumprimento dos critérios de classificação).
- Uma paleta de cores diferente da padrão é utilizada para diferenciar visualmente o
papel dos stakeholders e informações do sistema.

8. TRABALHO FINAL - DESIGN DE INTERFACES
8
Interface “Ajuda”
Obs:
A interface de ajuda também permanece oculta (seguindo os mesmos princípios do
“Rodapé“), nela o usuário encontra informações que podem auxliliá-lo em
determinado contexto ou atividades a serem realizadas no sistema.
- Esta tela pode ser acessada quando o usuário clicar no ícone de
ajuda/dúvida (sempre disposto no lado superior direito de todas
interfaces que necessitam deste recurso).
- Ao posicionar o cursor sobre o ícone, é exibido uma tooltip.
- Um novo clique no ícone oculta a tela de ajuda.
- A exibição e ocultação são apresentadas com animações sutís.

9. TRABALHO FINAL - DESIGN DE INTERFACES
9
Interface 2 (alternativa)
Protótipo inicial de baixa fidelidade da Segunda Interface (alternativa).
Data: 14/11/2013
Versão: 1.0
Interface “Inicial”
Obs:
Esta é a página inicial com que o usuário final se depara, nela está disposta o menu
principal e um link para o usuário iniciar o jogo.

10. TRABALHO FINAL - DESIGN DE INTERFACES
10
Interface “Ranking”
Obs:
Na interface de Rankings serão exibidos gráficos com pontuações e informações
dos melhores jogadores e equipes que participaram do jogo.

11. TRABALHO FINAL - DESIGN DE INTERFACES
11
Interface “Sobre Nós”
Obs:
Nenhuma.

12. TRABALHO FINAL - DESIGN DE INTERFACES
12
Interface “Rodapé”
Obs:
O rodapé contém as informações dos Coordenadores e Desenvolvedores e deve ser
exibido em todas as interfaces.

13. TRABALHO FINAL - DESIGN DE INTERFACES
13
Referências
http://pt.wikipedia.org/wiki/Interface
http://mmldesignlab.com/blog/2013/05/04/principios-basicos-do-design-i/
http://www.slideshare.net/tiagosantiago/principios-bsicos-design
http://www.luisvieira.me/principios-de-interaction-design/