12

6. Viso de Interface
Interface a parte do sistema com a qual o usurio ter contato, e ser atravs
dela que o mesmo far uso das funcionalidades oferecidas pelo sistema. Durante o uso do
sistema, o usurio consegue classific-lo como fcil ou difcil com base na sua interface. Essa
classificao denominada usabilidade do sistema. Outros fatores que so relevantes nessa
avaliao de usabilidade so a eficincia, a eficcia e a satisfao em uso.
Neste captulo descrevem-se as diretivas de usabilidade e os padres de
interfaces utilizados no Sistema de E-Commerce.

6.1. Diretivas de Usabilidade

Durante o processo de desenvolvimento do E-Commerce, foi utilizado algumas
diretivas para aperfeioar a produo do mesmo, tais como:
Diretivas para elaborao de contedo
Diretivas para produo de pginas
Diretivas para projeto arquitetural
Diretivas para projeto navegacional
Diretivas para elaborao do projeto de interface
Diretiva para realizao de testes
A usabilidade um fator de vital importncia para qualquer software
desenvolvido. a usabilidade que vai prover o feedback entre o usurio e a interface
apresentada. Para o site de E-Commerce a questo da usabilidade algo estritamente
necessrio, pois caso o usurio no se sinta a vontade utilizando o sistema apresentado, o
mesmo ir buscar em outro site, procurando por facilidade e confiana para realizar sua
compra.

6.2. Padres WEB de Montero

Padro pode ser definido como uma soluo conhecida, previamente testada e
que apresenta um nvel de sucesso satisfatrio para um determinado problema.
Os padres WEB apresentados por Montero so padres que visam facilitar a
construo de ferramentas e softwares para web. Tambm visam ressaltar as melhores praticas
para o desenvolvimento web e so divididos em trs grupos conforme ilustra a Figura 1:

12

Figura 1 - Linguagem de Padres Web de Monteiro

6.3. Apresentao do Prottipo

Um prottipo uma boa prtica durante o desenvolvimento, e utilizado para a
validao dos requisitos do sistema e apresentao de funcionalidade para os usurios.
O prottipo desenvolvido neste trabalho foi com base nos padres web de
Montero e sero descritos nos itens subseqentes, cada um em sua respectiva camada.

6.3.1. Camada Web

O padro Welcome descreve que o usurio precisa saber onde est, quais so
suas opes e o que ele precisa para visitar o site. Conforme ilustra a Figura 2, possvel
notar a clara inteno do site bem como uma boa recepo ao cliente na pgina principal do
site. Outros itens a serem avaliados dentro deste padro com os padres Homepage,
Indication, Ready, Polyglot, About This e Contact Us sero descritos com mais detalhes a
seguir.

12

Figura 2 - Linguagens de Padres de Montero - Welcome

Para permitir o acesso a todos, o padro Polyglot foi adotado. Atravs da

mensagem no rodap do site, como ilustra a Figura 3, o usurio informado sobre a melhor
resoluo e navegador para visitar o site, porm o site se ajusta para usurios que possurem
resolues e navegadores diferentes o mnimo especificado.

Figura 3 - Linguagem de Padres de Montero Polyglot

Com menus bem visveis, com descries bvias e disponveis todo o tempo, o
usurio sabe o que ele pode fazer a partir de qualquer ponto do site. A seguir, a Figura 4 que
ilustra o padro Indication para satisfazer essa necessidade.

12

Figura 4 - Linguagem de Padres de Montero - Indication

Para o usurio saber se est no mesmo site (padro Similarity), foi utilizada
uma nica folha de estilo e uma nica estrutura para disposio das informaes e
menus/links de acesso de forma a no confundir o usurio, conforme ilustra a Figura 5 a
seguir:

Figura 5 - Linguagem de Padres de Montero - Similarity

12

6.3.2. Camada de Pgina

O padro Homepage visa manter o usurio orientado, possibilitando que o

mesmo consiga navegar de volta caso se sinta perdido. Sua utilizao pode ser vista na Figura
2. Este padro assim com o Welcome discutido anteriormente, o Homepage tambm faz uso
de outros padres, tais como: Novelty, Tag Line, Search, Subscription, Contact Us e About
This, que sero todos discutidos a seguir.

Para manter o usurio no controle das operaes, foi adotado o padro Second
Chance. Sua utilizao pode ser claramente notada na Figura 6, que demonstra o carrinho de
compras do site. Neste carrinho, o usurio pode por conta prpria remover produtos,
recalcular o frete, atualizar os valores da compra e por fim efetuar a compra.

Figura 6 - Linguagem de Padres de Montero - Second Chance

Para obter as informaes dos usurios, foi adotado o padro Form,

principalmente na seo de cadastro. Atravs dos formulrios l contidos, o usurio pode se
cadastrar para acessar o contedo personalizado, conforme ilustra a Figura 7.

12

Figura 7 - Linguagem de Padres de Montero - Form

Para navegao entre as pginas do site foi utilizado o padro Polite, que
proporciona aos usurios o modo mais simples e claro de visualizao do contedo desejado.
Atravs de menus objetivos e claros, o usurio pode chegar at a seo desejada com poucos
cliques, conforme demonstra a Figura 8

Figura 8 - Linguagem de Padres de Montero - Polite

Plug-ins so bem comuns quando o assunto internet. Na web muito sites

utilizam se no o mais famoso Flash Player da Adobe. Para suprir a necessidade dos usurios
que pele primeira vez se deparam com a necessidade de instalao do mesmo para visualizar
corretamente o contedo a ele exibido, foi adotado o padro Danger, e para aqueles usurios
que no possuem o plug-in, foi disponibilizado o link para download, conforme ilustra Figura
9:

12

Figura 9 - Linguagens de Padres de Montero - Danger

6.3.3. Camada de Ornamento

A proposta do site tambm est bem clara, graas ao padro Tag Line adotado.
Atravs do slogan no janela do navegador, logo e das imagens contidas facilmente notado
que se trata de um E-Commerce, como ilustra a Figura 10:

Figura 10 - Linguagem de Padres de Montero - Tag Line

As informaes sobre a companhia so facilmente encontradas atravs do link

no menu rpido ou do menu esquerda, satisfazendo o padro About This como demonstra a
Figura 11:

12

Figura 11 - Linguagem de Padres de Montero - About This

No menu a esquerda pode-se notar o link para a busca de produtos do site.

Muito til para quem utiliza de deseja encontrar de forma rpida algo que procura, segundo o
padro Search. A busca por produtos apresentada possui dois filtros: por produto e por faixa
de preo, conforme visto na Figura 12

Figura 12 - Linguagem de Padres de Montero - Search

12

Para um E-Commerce de vital importncia prover aos visitantes do site,

informaes sobre novos produtos e promoes. Seguindo o padro Novelty, a Figura 13
ilustra os lanamentos dos produtos, colocando-os em destaque j na pagina principal do site.

Figura 13 - Linguagem de Padres de Montero Novelty

Em caso de alguma dvida ou comentrio, o usurio pode fazer uso do

formulrio de contato (padro Contact Us) para estabelecer comunicao com os
responsveis pelo site, conforme mostra a Figura 14:

Figura 14 - Linguagem de Padres de Montero - Contact Us

12

As informaes dos usurios so privadas e protegidas durante o

preenchimento das mesmas pelo usurio. Conforme descreve o padro Secret, esto
disponveis polticas de privacidade e termos de uso para o usurio verificar a confiabilidade
do site como demonstra a Figura 15 e Figura 16

Figura 15 - Linguagem de Padres de Montero - Secret

Figura 16 - Linguagem de Padres de Montero - Secret

As novidades do site tambm podem ser vista fora do mesmo. Atravs de

notificaes via email, os usurios que optarem por receber o informativo, estaro cientes das
ultimas novidades e promoes, como ilustra a Figura 17 (padro Subscription)

12

Figura 17 - Linguagem de Padres de Montero - Subscription

Para todas as pginas visitadas pelo usurio, o mesmo ir encontrar no topo de

cada uma a sua atual localizao (padro Location), conforme visto na Figura
18

Figura 18 - Linguagem de Padres de Montero Location

As cores do site tambm foram utilizadas seguindo o padro Colour, para

prover um melhor contraste entre imagens e textos, bem como locais de destaque com cores e
tamanhos diferente dos demais.
A disposio dos textos contidos no site foi feita com base no padro Print,
facilitando a leitura e impresso pela diviso em blocos de texto, conforme ilustra a Figura 19

12

Figura 19 - Linguagem de Padres de Montero - Print

Na web, um recurso muito interessante e que vem sendo utilizado com muita
freqncia a capacidade do site reconhecer o seu usurio quando o mesmo retorna ao site.
Para isso foi utilizado o padro Recognize e fornecido ao usurio do E-Commerce, seus
ltimos produtos visitados, conforme ilustra a Figura 20

Figura 20 - Linguagens de Padres de Montero - Recognize

6.4.Avaliao do uso de padres como ferramenta de projeto

Com a velocidade que a internet vem crescendo, junto com ela cresce o nmero
de usurios, sendo que cada um apresenta um perfil diferente. Um site hoje necessita atender
o maior nmero possvel de pessoas para atingir o sucesso. Uma forma bem eficiente e que j
demonstrou inmeros resultados a utilizao de padres para o desenvolvimento.
Os padres descritos por Montero facilitam o desenvolvimento com a certeza
de buscar solues para facilitar a navegao e o acesso dos diferentes grupos de usurios que
visitarem o site.