MO825 – Tópicos em Interfaces de Usuário
Profa. M. Cecília Baranauskas
Grupo 02
Fernando Marques Figueira Filho – RA 001715
Gustavo Henrique Mandolesi
– RA 037053
Tarefa 04
Projeto de Interface para Aplicação Web em um
Telecentro
Sistema Web
Balcão de Empregos
Aplicação dirigida ao público-alvo
O protótipo mostra a interação para o cadastro de um
novo usuário.
Metáfora
Diálogo de uma atendente com o usuário.
A atendente “fala”, solicitando informações do usuário, que
responde, fornecendo os dados.
Modelo simples, que representa uma situação corriqueira
da vida da maioria das pessoas.
Dispositivos de Ajuda Técnica
Têm a finalidade de aumentar, manter ou melhorar as
habilidades dos indivíduos com limitações funcionais
físicas ou sensoriais.
Fundamentais para que o acesso dos usuários aconteça
plenamente.
“Telecentro Acessível”
Dispositivos de Ajuda Técnica
 Monitor de grandes dimensões (19’’, 20’’, >)
 Simulador de teclado
 Leitores de tela
 Fones de ouvido
 Ponteiro do mouse com recurso de rastro
 Mouses e teclados adaptados
 Conversor de fala para texto
 Outros
Design
 Simplicidade
 Textual, com linguagem natural
 HTML + CSS
 Imagens com descrição textual associada
 Legibilidade: cores simples e contrastantes, fontes
grandes, espaçamento
 Deslocamento entre campos através de [Tab]
 Atalhos de teclado
 Tempo de resposta rápido e consistente (transações)
Design
 Navegação através de botões de fácil reconhecimento
 Gestão de erros (validação)
 Mensagens de erro claras, breves e explicativas
 Resumo das informações no final
 Recurso de ajuste do tamanho das fontes
 Recurso de inversão de cores (contraste)
 Link para retorno ao início da aplicação
Protótipo
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Olá! Seja bem-vindo ao Balcão de empregos
do Telecentro INTERHAD.
Você já possui cadastro?
Sim
Não
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Olá! Seja bem-vindo ao Balcão de empregos
do Telecentro INTERHAD.
Você já possui cadastro?
Sim
Não
HTML
CSS
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Olá! Seja bem-vindo ao Balcão de empregos
do Telecentro INTERHAD.
Você já possui cadastro?
Sim
Não
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Olá! Seja bem-vindo ao Balcão de empregos
do Telecentro INTERHAD.
Você já possui cadastro?
Sim
Não
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Para entrar no Balcão de Empregos, digite o seu
nome de usuário e a sua senha, e clique em
“Entrar”.
Usuário:
Senha:
Entrar
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Faremos o seu cadastro agora, então.
Você irá preencher 4 formulários curtos.
Clique no botão “Começar”, quando quiser.
Começar
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Digite o seu nome completo e a data de
nascimento.
Quando terminar, clique em “Próximo”.
Formulário 1
Nome completo:
Dia:
01
Mês:
Janeiro
Ano:
1900
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Você não digitou o seu nome.
Por favor, digite-o no formulário.
Validação
Formulário 1
Nome completo:
Dia:
10
Mês:
Outubro
Ano:
1965
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Você não digitou o seu nome.
Por favor, digite-o no formulário.
Formulário 1
Nome completo:
José da Silva
Dia:
10
Mês:
Outubro
Ano:
1965
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Agora, digite o seu endereço completo, por favor.
Ao terminar, clique em “Próximo”. Para voltar ao
formulário anterior, clique em “Anterior”.
Formulário 2
Endereço (Rua, Avenida, etc):
Bairro:
CEP:
Cidade:
Estado:
AC
<< Anterior
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Agora, digite o seu endereço completo, por favor.
Ao terminar, clique em “Próximo”. Para voltar ao
formulário anterior, clique em “Anterior”.
Formulário 2
Endereço (Rua, Avenida, etc):
Rua da Paz, 167
Bairro:
Cidade Nova
CEP:
Cidade:
Estado:
Campinas
<< Anterior
12345
678
SP
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Informe, agora, o número do seu RG.
Digite somente os números, sem traço.
Formulário 3
RG:
<< Anterior
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Informe, agora, o número do seu RG.
Digite somente os números, sem traço.
Formulário 3
RG:
12345678901
<< Anterior
Próximo >>
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Finalmente, digite o seu nome de usuário e uma
senha. Você deverá digitar a mesma senha em dois
campos seguidos, por favor.
Quando terminar, clique em “Fim”.
Formulário 4
Nome de usuário (até 15 letras):
Senha (até 10 letras):
<< Anterior
Fim
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Finalmente, digite o seu nome de usuário e uma
senha. Você deverá digitar a mesma senha em dois
campos seguidos, por favor.
Quando terminar, clique em “Continuar”.
Formulário 4
Nome de usuário (até 15 letras):
jose_da_silva_07
Senha (até 10 letras):
********
********
<< Anterior
Continuar
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Verifique se as informações estão corretas.
Se quiser corrigir alguma ficha, basta clicar em “Editar”.
Para entrar no Balcão de Empregos, clique em “Fim”.
Nome: José da Silva
Nascimento: 06/10/1965
Editar
Endereço: Rua da Paz, 167
Bairro: Cidade Nova
CEP: 12345-678
Campinas - SP
Editar
RG: 1234567890-1
Editar
Usuário: josé_da_silva_07
Editar
FIm
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Verifique se as informações estão corretas.
Se quiser corrigir alguma ficha, basta clicar em “Editar”.
Para entrar no Balcão de Empregos, clique em “Fim”.
Nome: José da Silva
Nascimento: 06/10/1965
Editar
Endereço: Rua da Paz, 167
Bairro: Cidade Nova
CEP: 12345-678
Campinas - SP
Editar
RG: 1234567890-1
Editar
Usuário: josé_da_silva_07
Editar
Fim
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Para alterar qualquer informação, basta clicar
no campo desejado e editá-lo.
Quando terminar, clique em “Continuar”.
Formulário 1
Nome completo:
José da Silva
Dia:
10
Mês:
Outubro
Ano:
1965
Continuar
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Para alterar qualquer informação, basta clicar
no campo desejado e editá-lo.
Quando terminar, clique em “Continuar”.
Formulário 1
Nome completo:
José da Silva Júnior
Dia:
10
Mês:
Outubro
Ano:
1965
Continuar
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Verifique se as informações estão corretas.
Se quiser corrigir alguma ficha, basta clicar em “Editar”.
Para entrar no Balcão de Empregos, clique em “Fim”.
Nome: José da Silva Júnior
Nascimento: 06/10/1965
Editar
Endereço: Rua da Paz, 167
Bairro: Cidade Nova
CEP: 12345-678
Campinas - SP
Editar
RG: 1234567890-1
Editar
Usuário: josé_da_silva_07
Editar
FIm
Protótipo
Aumentar letra (Shift+Alt+A)
Diminuir letra (Shift+Alt+D)
Inverter Cores (Shift+Alt+I)
Balcão de Empregos
Início
Para entrar no Balcão de Empregos, digite o seu
nome de usuário e a sua senha, e clique em
“Entrar”.
Usuário:
Senha:
Entrar
Referência
Metodologia de Atendimento e Acesso de Pessoas com
Deficiência a Telecentros
Partes I e II
http://www.acessobrasil.org.br
Pensamento
As inúmeras possibilidades que as tecnologias da
Informática e Comunicação podem trazer para o mundo
são inquestionáveis.
Tais possibilidades tanto podem permitir a inclusão
social quanto podem distanciar ainda mais as pessoas
dos benefícios que estas tecnologias proporcionam.
FIM
Dúvidas?
FIM
Obrigado pela atenção!