modelo - especificação de interface

25
Pontifícia Universidade Católica de Minas Gerais Unidade Betim Sistemas de Informação - Interface Homem Máquina Professor: Gilberto Barbosa Mota Traço de Vida- Interface e Aplicativo de vendas Ariadna Martins Barbosa Mansur Darlan Almeida Rodrigues Felipe Bacelar de Aguiar Gabriela Fonseca Ribeiro Mariana de Fátima Silva Roundenberquison Runior Almeida da Silva Betim Maio, 2011

Upload: gabriella-fonseca

Post on 04-Jul-2015

513 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Modelo - Especificação de Interface

Pontifícia Universidade Católica de Minas Gerais – Unidade

Betim

Sistemas de Informação - Interface Homem Máquina

Professor: Gilberto Barbosa Mota

Traço de Vida- Interface e

Aplicativo de vendas

Ariadna Martins Barbosa Mansur

Darlan Almeida Rodrigues

Felipe Bacelar de Aguiar

Gabriela Fonseca Ribeiro

Mariana de Fátima Silva

Roundenberquison Runior Almeida da Silva

Betim

Maio, 2011

Page 2: Modelo - Especificação de Interface

2

Especificação de Interface

Page 3: Modelo - 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

Page 4: Modelo - Especificação de Interface

4

Introdução

A internet proporciona ao mundo o fenômeno denominado globalização, ato de redução

das barreiras espaciais e, portanto troca de informações instantâneas de qualquer lugar para

qualquer parte do mundo em questão de segundos. Vivemos em uma época de busca

incessante pela automatização dos mais diversos processos com o intuito de proporcionar

maior conforto no momento de executa-los. E é devido a esse fato que grande parte das

organizações tende a seguir esse movimento, absorvendo todos esses conceitos e se

inteirando com a tecnologia; esse trabalho ilustra bem essa situação onde a internet torna-se o

caminho para a realização do e-commerce, ou comercio eletrônico, onde o cliente pode

comprar sem se deslocar do lugar. Esta especificação tem por finalidade então, levantar e listar

de forma organizada os pontos que devem ser levados em consideração ao se desenvolver a

interface para o site de vendas da livraria “Traço de vida”. Esta por sua vez oferece produtos

das mais diversas áreas e disciplinas, logo se torna essencial um estudo cauteloso de como

desenvolver tal aplicação, colocando na balança recursos que permitam a usuários portadores

de diversas necessidades especiais e também usuários de diversos graus de instrução, acesso

e navegação com comodidade, praticidade e se possível, satisfação.

No decorrer desta especificação torna-se possível visualizar todas as principais

funcionalidades da aplicação assim como as características que atestam qualidade no quesito

usabilidade e acessibilidade.

Page 5: Modelo - Especificação de Interface

5

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.

Page 6: Modelo - Especificação de Interface

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

Page 7: Modelo - Especificação de Interface

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.

Meu carrinho: Clicando sobre essa opção é possível visualizar a quantidade e

os nomes dos produtos que estão dentro do carrinho. Nessa tela o usuário

possui a opção de excluir o produto, alterar sua quantidade, adquirir mais

produtos, calcular o valor do frete ou finalizar o pedido.

o Alterar quantidade: Acrescentar ou retirar número de cópias de um

produto.

o Adquirir mais produtos: O usuário é redirecionado a tela anterior à

seleção de qualquer produto, para que ele possa fazer novas buscas e

se possível, novas aquisições.

o Excluir: Exclui o produto e atualiza o valor da lista de compras assim

como o frete se este já tiver sido calculado.

o Calcular o valor do frete: O usuário informa o CEP de destino e então

torna-se possível o calculo do valor do frete simplesmente clicando-se

sobre a opção “calcular”.

o Finalizar pedido: Clicando-se sobre essa opção o usuário é

redirecionado para uma nova tela, se ele já possuir um cadastro no site

ele pode selecionar a forma de pagamento, a bandeira do cartão, e

inserir os dados pertinentes ao cartão de credito, se esta for a opção

de pagamento, se for boleto, um boleto será gerado automaticamente

e ficará disponível para a impressão. Se o cliente não for cadastrado,

ele será redirecionado para uma pagina de cadastro.

Page 8: Modelo - Especificação de Interface

8

Nota: Os dados pertinentes à um cliente cadastrado são buscados no banco de dados

ao concluir-se o pedido, tal como o endereço de destino, porém o cliente pode optar por

selecionar um novo endereço.

Meus pedidos: O usuário é redirecionado para a tela de “log-in” se não estiver

logado, e após a realização do “log-in” o usuário poderá visualizar um pedido

em especifico ou a lista completa com todos os pedidos já realizados pelo

responsável por aquela conta de usuário. Quando um pedido é selecionado é

apresentado ao usuário uma descrição completa do pedido, incluindo um

contador de status, ou seja informando o seu atual posicionamento, o contador

de status é composto pelos seguintes pontos:

o Pedido faturado: Informa a hora em que o sistema faturou o pedido.

o Liberado para a transportadora: Informa a hora em que o pedido foi

entregue ao prestador de serviços de transporte.

o Em transporte: Indica a hora em que o pedido efetivamente entrou

em processo de transporte para o endereço de destino.

o Entregue com sucesso: Informa a suposta hora em que o produto foi

entregue ao cliente.

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.

Nota: As imagens da aplicação estão situadas no final da especificação, no tópico anexos.

Aplicação para dispositivos Móveis

Visando acompanhar o desenvolvimento da tecnologia, é proposta ao usuário uma

versão desenvolvida especialmente para dispositivos moveis. As informações e opções de

controle são bem distribuídas, e todo o recurso de espaço é otimizado.

Page 9: Modelo - Especificação de Interface

9

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.

Tela de Compra (Aquisição)

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.

Imagem ilustrativa da Tela de Compra

Page 10: Modelo - Especificação de Interface

10

Tela de cadastro de usuário (Criação de conta)

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:

Nome de usuário( nome de acesso, pode ser um “Nickname”)

E-mail

Senha

Confirmação de senha

E dados de cadastramento de usuário:

Nome de usuário real ( Completo de preferência)

CPF

Registro geral

Telefone fixo e celular

Endereço

No canto inferior direito está situado o botão de controle “confirmar”,

responsável por validar e solicitar o armazenamento das informações no banco

de dados.

Page 11: Modelo - Especificação de Interface

11

Imagem ilustrativa da tela de cadastro de usuário.

Tela Meu Carrinho

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.

Page 12: Modelo - Especificação de Interface

12

Imagem ilustrativa da tela “Meu carrinho”.

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.

Page 13: Modelo - Especificação de Interface

13

Imagem ilustrativa da tela “Meus Pedidos”.

Page 14: Modelo - Especificação de Interface

14

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.

Page 15: Modelo - Especificação de Interface

15

Acessibilidade

Acessibilidade define se é possível alcançar a informação e conseguir interagir com um

sistema

A aplicação é:

Legível e os espaços são bem definidos e alinhados

A aplicação possui:

Objetos ordenados, facilitando a compreensão dos mesmos.

Dispositivos de navegação legíveis e fáceis de distinguir.

Menus organizados por tipo de informação como no caso das categorias, facilitando a

busca.

Todas as imagens dos produtos são bem explicadas e especificadas.

Menus que possuem frases curtas, normalmente compostas por uma única palavra.

O uso de alternativas para não atrapalhar o processo de compreensão de usuários

portadores de necessidades especiais como, por exemplo, o daltonismo dicromático ou

tricromático, pois ícones que fazem uso de cores de forma significativa como “cancelar”

- (cor vermelha) podem ser facilmente interpretados, uma vez que um “X” (processo de

cognição) ou a própria palavra “cancelar” é apresentada.

Estrutura para portadores de daltonismo monocromático, uma vez que eles também

conseguem visualizar de forma eficaz a aplicação, já que as cores empregadas,

mesmo transpostas para o preto e branco, ficam bem definidas.

Recurso de aumento do tamanho da fonte das palavras compreendidas dentro do site,

com a finalidade de proporcionar maior conforto para usuários que possuam disfunções

visuais como miopia.

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.

Page 16: Modelo - Especificação de Interface

16

Page 17: Modelo - Especificação de Interface

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.

Page 18: Modelo - Especificação de Interface

18

Processo Cognitivo e Semântico

Todos os símbolos que representam botões, tem significado diretamente relacionado a

aplicação do botão correspondente, exemplo:

Botão Meu carrinho: O carrinho de compras lembra bastante um carrinho de

supermercado onde um cliente pode colocar todos os produtos que ele deseja adquirir.

Botão Meus pedidos: O desenho da nota lembra bastante uma nota fiscal ou uma lista

de pedidos.

Botão Log-in/Log-out: O desenho com os dois bonequinhos lembra a relação entre

duas pessoas, no caso, o usuário e o sistema.

O fato de a lista de Top 5 está disposta no topo da tela passa a ideia de ascendência,

de ser melhor e maior, chamando a atenção do usuário, uma vez que a tela é vista de cima

para baixo.

O idioma empregado é bem claro e todos os símbolos conhecidos por qualquer pessoa

em qualquer grau de instrução, possibilitando a interpretação correta das informações.

Page 19: Modelo - Especificação de Interface

19

Sugestão e estrutura para a qualificação da Interface

Os testes utilizados para a criação da nossa interface envolvem diretamente outros

sites que já estão no mercado há algum tempo, visualizamos o que cada um possuía de

construtivo, de inovador, e procuramos adicionar à nossa interface, com a finalidade de melhor

atender ao usuário final. Baseado no estudo das cores, definimos a melhor cor para a

aplicação e a partir dela definimos o contraste de imagens e informações.

Page 20: Modelo - Especificação de Interface

20

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 parte superior da pagina inicial, mostrando a logomarca a esquerda, o

Top 5 e as categorias a direita.

Page 21: Modelo - Especificação de Interface

21

“Imagem ilustrativa da parte inferior da página inicial, mostrando as opções de visualização de

“Recomendados para você”, “Mais vendidos” e “Ofertas”. A direita é possível visualizar o menu

categorias.

Page 22: Modelo - Especificação de Interface

22

Imagem ilustrativa do detalhamento de um produto, é possível perceber que, situado à

direita da imagem está o nome do Autor, o valor da Obra e a opção de aquisição da mesma.

Vale ressaltar que abaixo situa-se uma descrição mais completa do produto, dividida em abas,

sendo elas: Sinopse, características e produtos relacionados.

Page 23: Modelo - Especificação de Interface

23

Imagem ilustrativa da tela de “Avise-me quando chegar”, nota-se o uso do recurso de

pop-up junto ao recurso de escurecimento gradativo da tela como plano de fundo.

Page 24: Modelo - Especificação de Interface

24

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.

Page 25: Modelo - Especificação de Interface

25

Referências Bibliográficas

_________. Oito Características de uma Interface de Sucesso.

http://desenvolvimentoparaweb.com/usabilidade/8-caracteristicas-de-user-interfaces-ui-de-

sucesso/ . Acessado dia 10 de Abril de 2011.

_________. Usabilidade em Dispositivos Móveis.

http://www.avellareduarte.com.br/projeto/dispositivosMoveis/dispositivosmoveis_usabilidadeAs

pectos.htm . Acessado dia 05 de Maio de 2011.

DUNLEY, Caroline. Daltonismo e suas definições.

http://intra.vila.com.br/revista2003/caroline_e_fabiana/daltonismo!!.htm Acessado dia 12 de

Maio de 2011.

LEMES, Celso. Menu do Lado Direito ou Esquerdo: Qual é o melhor para o

posicionamento? . http://www.criarsites.com/menu-para-o-lado-esquerdo-ou-direito-qual-e-o-

melhor-para-o-posicionamento/. Acessado dia 12 de Abril de 2011.