Redesign iTest Learning

Interação Humano-Computador

PROJETAR A INTEFACE DE UM SISTEMA SEGUINDO AS QUATRO ATIVIDADES

BÁSICAS DE UM DESIGN

Alunos: Thiago Pereira Rosa

[email protected]

Matheus Souza de Carvalho [email protected]

Professora: Andréia Sampaio

[email protected]

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


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.


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.


Interface “Ranking”

Obs: Nenhuma.


Interface “Sobre Nós”

Obs: Nenhuma.


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.


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.


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.


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.


Interface “Sobre Nós”

Obs: Nenhuma.


Interface “Rodapé”

Obs: O rodapé contém as informações dos Coordenadores e Desenvolvedores e deve ser exibido em todas as interfaces.


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/

Redesign iTest Learning

Education

Transcript of Redesign iTest Learning