Академический Документы
Профессиональный Документы
Культура Документы
Betim
Sistemas de Informação - Interface Homem Máquina
Professor: Gilberto Barbosa Mota
Betim
Maio, 2011
2
Especificação de Interface
3
Sumário
Introdução ..................................................................................................................................... 4
Apresentação ................................................................................................................................ 5
O Objetivo ................................................................................................................................. 5
O Problema................................................................................................................................ 5
O Processo de Negócio.................................................................................................................. 6
A Aplicação Web ....................................................................................................................... 6
Aplicação para dispositivos Móveis .......................................................................................... 8
Usabilidade .................................................................................................................................. 14
Acessibilidade .............................................................................................................................. 15
Ergonomia ................................................................................................................................... 17
Processo Cognitivo e Semântico ................................................................................................. 18
Sugestão e estrutura para a qualificação da Interface ............................................................... 19
Anexos ......................................................................................................................................... 20
Referências Bibliográficas ........................................................................................................... 25
4
Introdução
Apresentação
A criação do site foi solicitada e, portanto patrocinada, pelo departamento de marketing
da empresa, com o intuito de “alcançar” o maior número de pessoas possíveis. O publico alvo
compreende várias faixas etárias e graus de instrução, uma vez que o leque de possibilidades
proposto pela organização possibilita a qualquer cliente fontes dos mais diversos conceitos e
aplicações.
O Objetivo
O objetivo geral é comercializar livros das mais diversas disciplinas e áreas, desde
simples livros de literatura a livros de pesquisa cientifica avançada.
O Problema
O site visa facilitar e proporcionar o acesso e a comodidade ao cliente, uma vez que ele
não precisa sair de casa para poder encontrar um livro que procura, além de que muitas das
obras oferecidas pela livraria não são encontradas em qualquer lugar.
6
O Processo de Negócio
A Aplicação Web
Aplicação Web foi desenvolvida em .Net 4.0. Para que um layout padrão fosse criado,
utilizamos de seu recurso nativo de Master Pages. Além disso, definimos folhas de estilo para
que futuras alterações sejam feitas mais facilmente. Para interação Client-Side, utilizamos,
principalmente Jquery, com algumas aplicações de Ajax.
Na tela inicial o usuário possuirá a opção de visualizar quais livros estão em oferta, os
mais vendidos de caráter geral e as recomendações do site para o perfil de usuário. Essas três
opções de visualização foram construídas com o recurso de minimização, o usuário pode por
preferência, ocultar essas opções simplesmente clicando sobre o titulo, marcado como uma
linha de texto dentro de uma caixa de dialogo na cor amarela. Na lateral direita é possível
visualizar um menu, que possibilita filtrar a busca por livros nas mais diversas categorias,
sendo elas: Administração e Negócios, Agricultura e Agropecuária, Arquitetura e Urbanismo,
Artes, Atlas e Dicionários, Autoajuda, Ciência e Tecnologia, Ciências Biológicas, Ciências
Exatas, Ciências Humanas e Sociais, Comportamento e Sexo, Comunicação, Culinária e
Gastronomia, Didáticos e Educação, Direito, Economias, Enciclopédias/ Obras de Referência,
Engenharia, Esoterismo, Esportes, História em Quadrinhos e RPG, Informática, Jogos e
Recreação, Linguística, Literatura, Medicina e Saúde, Moda, Beleza e Dicas, Psicologia,
Religião, Viagem e Turismo e Outros.
Acima do menu categorias existe uma relação dos livros mais buscados, definida como
Top 5, em um momento inicial, a lista é preenchida com os 5 melhores livros no caráter geral,
após a filtragem por categoria a lista é então reformulada passando a ser composta pelos 5
melhores livros da categoria selecionada.
No canto superior da tela do lado esquerdo situa-se uma caixa de busca, aonde após
realizar a busca simples e não encontrar o produto, o usuário poderá buscar pelo nome do
autor, editora, obra e categoria.
A resposta para a pesquisa é então enviada ao usuário na forma de duas
possibilidades: se o texto relatado for encontrado, uma lista de itens que satisfaçam tal busca
será apresentada de forma ordenada com uma pequena foto e valor do produto; caso nenhum
objeto seja encontrado, uma mensagem de informação contendo o texto: “ Nenhum produto
encontrado” é apresentada na tela. Quando um produto é encontrado e então é selecionado, o
usuário é redirecionado para uma nova pagina onde consta: uma pequena imagem, preço,
descrição do produto assim como sua proveniência e data de lançamento, estes últimos,
dispostos em pequenas abas. O recurso conta ainda com a possibilidade de visualizar
comentários de outros clientes que adquiriram o produto ou então o próprio usuário pode
7
avalia-lo se esta for essa a situação. Se o usuário preferir ele pode ampliar a imagem
simplesmente clicando sobre ela, o recurso de pop-up é então ativado e para facilitar a
visualização, o restante da tela, colocada como plano de fundo, escurece gradativamente com
a finalidade de focar a atenção do usuário na forma “física” do produto.
Se o usuário buscar algum produto que não possua disponibilidade imediata de
estoque, haverá uma mensagem, abaixo da imagem do produto informando a previsão para a
disponibilidade do mesmo, como por exemplo, situações de pré-venda ou estoque esgotado.
Abaixo da linha de indisponível existe um botão de “avise-me quando estiver
disponível”, onde o usuário pode cadastrar seu e-mail e aguardar por uma mensagem
afirmando a disponibilidade do produto; esta opção está disponível para que o usuário não
precise se lembrar da data de reposição, lembrando que as datas de reposição podem ser
alteradas, dependendo da disponibilidade do fornecedor.
Acima da barra de busca avançada estão disponíveis telefones para contato entre o
cliente e a central de atendimento. Abaixo da logomarca existe um menu de acesso rápido,
composto por três opções: Meu carrinho, Meus pedidos e Logar/ Sair.
Nota: O tempo informado em cada uma dessas opções é calculado por aproximação
podendo conter uma margem de erro.
Nota 2: Um pedido não faturado pode ser cancelado, logo se esta situação ocorrer, o
status habilitará a informação “Cancelado”.
Log-in/ Log-out: O usuário é redirecionado para uma tela de Log-in, onde ele
informa o usuário e a senha, se este for o primeiro acesso do usuário, ele pode
efetuar o cadastro clicando sobre uma opção no canto inferior da tela de Log-in
e redirecionado para uma tela de cadastro, ele poderá informar seus dados
cadastrais. Após logado o usuário pode selecionar “Sair” (Log-out) e finalizar a
seção, podendo navegar pelo site como visitante.
Seguem abaixo, imagens das principais telas da aplicação, com breve resumo de seu
funcionamento e recursos, lembrando que, de forma sucinta, ambas as versões, tanto para
dispositivos móveis e não móveis, possuem a mesma finalidade e, portanto, o funcionamento
simétrico entre si, sendo necessária a criação de ambas as versões para atender o maior
número de usuários possível.
Uma caixa de busca avançada é apresentada na parte superior da tela, onde o usuário
pode buscar a obra desejada por nome de autor, obra e editora.
Abaixo da caixa de busca nos é apresentado três opções de gerenciamento de conta
de usuário: Meu carrinho, Meus pedidos, e Minha Conta (Log-in/Log-out).Em seguida nos é
apresentado a lista com os objetos encontrados ou pela busca avançada ou seleção de
categoria. Os produtos são apresentados pelo nome da obra, autor e valor. A opção para
adquirir o produto situa-se a direita da imagem e informações sobre o respectivo produto.
Esta tela é apresentada quando o usuário clica sobre “Minha conta” ou quando o
mesmo deseja finalizar uma compra, desde que, em ambas as situações o usuário ainda não
possua um cadastro prévio.
Nesta tela, o usuário deve inserir de cadastro de acesso como:
Nesta tela são apresentados todos os itens escolhidos pelo usuário, acompanhados do
botão controle “cancelar” ( Exclui um produto da lista de compra- Meu carrinho).
É possível visualizar no canto superior direito: o valor total ( somatória dos itens
presentes no carrinho), o valor do frete calculado em cima do CEP informado ou recuperado da
base de dados, A somatória do valor total com o frete e o endereço de destino( Pode ser
alterado pelo cliente se este preferir). No canto inferior direito está situado o botão de controle
de confirmação de pedido.
12
Meus Pedidos
Nesta tela são apresentados todos os pedidos de um cliente. Para que o cliente tenha
maior controle sobre o que já foi pedido na loja, assim como melhor feedback em relação à
entrega de produtos, por exemplo, para cada pedido é associado um tipo de alerta diferente,
que indica se um pedido foi enviado, se está em trânsito, se foi entregue ou cancelado.
13
Usabilidade
A usabilidade é definida pelo quão agradável é usar e navegar por um sistema.
O site torna-se simples no quesito navegação, uma vez que:
Qualquer usuário, mesmo sem contato anterior consegue utiliza-lo;
Todos os campos são delimitados de forma clara;
Cores: as cores empregadas não são agressivas, evitando o cansaço da visão
por parte do usuário, passando a ele maior tranquilidade (bege/ amarelo
contrastado com o branco);
Facilita a recordação, pois as aplicações são instrutivas;
Os recursos de interação: os comentários sobre os produtos, o Top 5, a
imagem ampliada do produto visam evitar que um cliente adquira um produto
que ele não goste, aumentando a eficiência da aplicação e portanto a
satisfação do usuário.
15
Acessibilidade
Acessibilidade define se é possível alcançar a informação e conseguir interagir com um
sistema
A aplicação é:
A aplicação possui:
O site não oferece funções especiais como “teclas atalho” para proporcionar
acessibilidade à usuários com necessidades especiais interligadas à coordenação motora, uma
vez que, essas funções causam certo conflito entre as teclas atalho do sistema operacional e
navegador de internet, tornando inviável sua implementação dentro da aplicação.
16
17
Ergonomia
Os links na página estão dispostos de forma ergonômica, uma vez que, os links
compreendidos dentro de uma sequência de ação estão bem próximos uns dos outros,
evitando movimentos “bruscos” e desnecessários.
18
Anexos
Seguem abaixo algumas imagens do sistema, assim como versões em preto e branco
para ilustrar a visão de um daltônico monocromático e para tanto, demonstrar que as cores
empregadas mesmo transpostas, ainda definem a aplicação como legível.
Imagem ilustrativa da tela “ Meu carrinho”, onde é possível visualizar todos os itens
escolhidos pelo usuário, gerencia-los, calcular o frete da entrega e finalizar pedido.
25
Referências Bibliográficas