documento final ergonomia desenvolvimento

Prévia do material em texto

Colégio Politécnico da Universidade Federal de Santa Maria 
Avenida Roraima Cidade Universitária nº 1000 CEP 97195-900 Santa Maria RS 
 
Curso de Sistemas para Internet 
 
Especificação Requisitos 1 
 
 
 
 
 
 
 
 
 
 
Sistema de Cama, mesa e Banho: Conforto e bem estar 
Ltda. – Sempre perto de você. 
 
 
Documento de especificação do Projeto de Interfaces 
 
 
Autores: 
Maicon Luiz Anschau 
Débora Pinheiro 
Data de entrega: 
22/07/2013 
Professor: 
Giani Petri 
Data de entrega: 
22/07/2013 
 
 
1 Objetivo do Documento 
Neste documento estaremos especificando a elaboração de um sistema e-
commerce de produtos de cama, mesa e banho desenvolvido na disciplina de 
ergonomia de softwares o qual o propósito desse documento visa demostrar o 
desenvolvimento do sistema usando os critérios ergonômicos desenvolvidos em 
sala de aula. 
Com isso estaremos abordando cada interface explicando seus critérios e qual 
sua utilidade no sistema e quais os critérios ergonômicos usados para se chegar 
ao se elaborar as interfaces desse modo. Com isso todo o sistema irá possuir uma 
fonte padrão e também devesse pensar em como poder deixar o sistema mais 
leve, rápido e simples para o nosso usuário. 
2 Objetivo do Sistema 
2.1 Nome do Sistema 
O nome do nosso sistema é conforto e bem estar Ltda.- Sempre perto de você. 
2.2 Escopo 
O sistema Conforto e bem estar Ltda. Será utilizado como trabalho final da disciplina de 
Ergonomia de Software onde cada grupo ficou responsável por desenvolver um sistema 
ergonômico. Mas além de ergonômico devia ser simples pois deveriamos pensar que o 
mesmo sistema será usado por todos os usuários tanto leigos da informática como não tão 
leigos. 
A principal função do e-commerce é a venda de produtos para diversas pessoas que esteja, 
interessadas em determinado produto que aquela página possa estar oferecendo. Também 
definidos um tempo o qual nossos produtos devam ser entregues ao cliente mas tudo 
depende que quem ficar responsável pela entrega se for correios ou empresa de entregas no 
qual em nosso sistema é a espeto entregas. 
 
2. Especificação do Projeto das Interfaces 
 2.1 Interface de Login do usuário 
 
 
 
 
 
 
 
 
Na opção de login, o usuário fica responsável por informar seus dados que são 
seu e-mail e senha, se por alguma eventualidade acabar não lembrando sua 
senha tem a opção “Esqueceu sua senha?”, com isso ele será redirecionado para 
uma nova página onde deverá informar seus e-mail e através disso será enviado 
um link para seu e-mail como juntamente para seu celular avisando que ele 
solicitou uma nova senha. As recomendações ergonômicas que utilizamos foram 
as seguintes na caixa de texto há um texto de uma cor mais fraca indicando o que 
ele deverá digitar na caixa como por exemplo onde o usuário deve digitar seu e-
mail demonstramos com a palavra e a senha com pontos. Também é utilizada a 
navegação pela tecla tab minimizando a necessidade de troca de dispositivo de 
interação pelo usuário. A regra geral também é obedecida mantendo os rótulos 
acima dos campos a serem preenchidos. O botão possui uma ação verbal. 
 Um dos critérios ergonômicos usados nessa página são as Trilhas de link – 
breadcrumbs elas fornecem os níveis de informação que estão acima dos que ele 
se encontra no momento 
2.1. Página Principal 
 
 
 
 
 
 
 
 
 
 
 
 
Na página principal o cliente irá ver em uma apresentação em slides onde 
haverá uma pequena demonstração de produtos que estão em oferta 
naquele dia como justamente abaixo teremos os produtos que estão em 
oferta naquele mês, além de três produtos que são anunciados por cada 
categoria. Alguns critérios ergonômicos usados englobam o uso de apenas 
dois tipos de cores, uma destacando o preço e a quantidade das parcelas 
e a outra descrevendo o produto mas sempre não sendo muito chamativas. 
Os botões possuem ações verbais. Além disso o menu é composto de 
abas, esse padrão é utilizado para ajudar no deslocamento do usuário 
entre as estruturas hierárquicas. 
2.2. Interface de Cadastro de Produtos 
 
 
 
 
 
 
 
 
 
 
 
No cadastro de produtos, é aplicado inicialmente algumas informações 
adicionais caso o usuário necessite de ajuda e em seguida temos um 
formulário com as informações sobre o produto a ser inserido, não muito 
extenso e de fácil entendimento, após o preenchimento o usuário dispõe 
do botão “enviar”. Um dos critérios ergonômicos usados nessa página são 
as Trilhas de link – breadcrumbs elas fornecem os níveis de informação 
que estão acima dos que ele se encontra no momento e teclas tab. 
 
2.3. Interface de Cadastro de Clientes 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
No cadastro de clientes é usado um formulário. Nesta página também são 
usadas as Trilhas de link, como no item anterior. Também dentro dos 
critérios ergonômicos estão a fonte, os rótulos dos formulários escritos 
somente com a inicial em maiúscula, os campos obrigatórios destacados 
como devem ser preenchidos ou com alguma explicação atrás dos 
mesmos indicando o que o usuário precisa informar se aquele campo é 
obrigatório ou não, embora seja muito pouco recomendado letras 
maiúscula, nesse caso, usamos para destacar a área que está sendo 
preenchida pelo usuário. Para tornar a entrada de alguns dados mais 
segura o usuário apenas conseguirá se cadastrar quando informar um cep 
valido caso contrário ira aparecer uma mensagem indicando que o cep que 
o mesmo digitou não é valido. Também alguns casos que auxiliarão ao 
usuário na entrada de dados importantes como cpf rg data de nascimento 
é que acaba tendo uma demonstração de como os mesmos devam ser 
digitados e algumas informações não importantes também falamos para 
que possam auxiliar ao usuário. 
 
Menus 
 
 
 
Em relação aos menus os mesmos obedem as regras ergonomicas onde um 
menu principal e diversos painéis de menus de ordem inferior, que são 
acionados por meio de opções do menu de hierarquia Superior. 
Os menus que abrigam grande números de opções devem ser organizados em 
grupos ou submenus de 05 a 09 opções, no máximo. 
2.1. Detalhamento de Produto 
 
 
 
 
 
 
 
 
 
No detalhamento do produto disponibilizamos ao usuário além das 
especificações do produto, mais opções de fotos, com maior aproximação 
para mostrar melhor o produto. Um dos critérios ergonômicos podemos 
considerar o feedback ao usuário onde é informado um valor de desconto e 
quanto exatamente o usuário estará economizando ao comprar o produto. 
Dispomos de trilhas de link com as estruturas acima da atual. Na esquerda 
disponibilizamos ao usuário uma hierarquia de categorias destacando a 
categoria atual, e as opções disponíveis para o usuário navegar com mais 
facilidade. 
 
 
 
2.1. Carrinho de Compras 
 
 
 
 
Na página carrinho temos uma lista de itens comprados, é informado a 
descrição, o valor unitário de cada produto, a quantidade e o valor total dos 
produtos. É fornecido ao usuário dois botões ambos com ações verbais, 
para finalizar a compra ou comprar mais produtos se o usuário quiser 
remover algum item do carrinho ou adicionar. Nessa e em algumas outras 
páginas o usuário tem acesso a alguns itens que podem ser de seu 
interesse. Na lista de produtos usamos a formatação da linha uma de cada 
cor para facilitar a visualização do usuário.