Instituto Politcnico de Bragana

Escola Superior de Tecnologias e Gesto de Mirandela

Tecnologias da Comunicao

Guio do site
Duplos Gmeos

DISCIPLINA: Projecto
DOCENTES: Manuela Carneiro
Ricardo Correia
Vtor Mendona

TRABALHO REALIZADO POR:

Elisabete Silva, n. 12590

Mirandela, 2007

1. Introduo
Para o desenvolvimento do site da Duplos Gmeos, uma empresa
de catering sedeada no Porto - Lea da Palmeira, tivemos a
preocupao, em desenvolver um layout que mostrasse a filosofia e
as mais valias desta empresa. Contudo, como sabemos que o design
na Internet representa grande parte do sucesso organizacional, mas
por si s insignificante, tivemos que implementar-lhe todos os
critrios de usabilidade.

A usabilidade no mais do que uma caracterstica daquilo que

utilizvel e funcional. Um dos sinnimos de usabilidade simplicidade,
ou seja, devemos sempre optar pela forma mais simples de fazer as
coisas, pois como Nielsen refere, Simplicity always win over
complexity. Este foi um factor que quisemos ver patente no nosso
site, pois quase sempre a simplicidade sinnimo de elegncia, que
um dos valores da imagem de marca da Duplos Gmeos.

Sendo assim, sabe-se partida que um site tem pouco tempo para
convencer o utilizador (cerca de 10 a 15 segundos), e por isso todos
os elementos da pgina precisam de ser avaliados, pesados e
medidos em termos de impacto.

Em suma, como aquilo que nos interessa agradar o utilizador, no

queremos que este saia irritado e frustrado do nosso site por no

conseguir encontrar a informao pretendida. Ser executado um

guia de planeamento e execuo do site da Duplos Gmeos para
conhecer melhor as necessidades do utilizador, uma vez que, No
o que considera sobre o seu site que conta, mas sim o que os
utilizadores pensam dele[Nielsen], e obtermos um resultado final de
maior sucesso.

1.1

Caracterizao do utilizador

J sabemos que um design focado no utilizador o segredo do

sucesso para qualquer site.
Na identidade corporativa da empresa Duplos Gmeos, temos como
pblico-alvo todas as pessoas ou organizaes pertencentes classe
mdia-alta, com elevadas expectativas na realizao de eventos
sociais e festivos. Sendo assim, decidimos utilizar o target que se
pretende atingir, sem restringir possveis visitantes com outros perfis,
que porventura mostrem interesse no contedo do site, dado o
ambiente amplo e diversificado da Internet.

1.2

Anlise da tarefa

Aps um brainstorming com os responsveis desta empresa de

catering, conseguimos enumerar as verdadeiras necessidades do
nosso utilizador.

Chegamos

concluso

que

utilizador

que

desta

aplicao

encontrar:

Tarefa n1- Identidade da empresa.

Tarefa n2- Servios que podem presenciar em qualquer tipo de

evento;

Tarefa n3- Especialidades

Tarefa n4- Contacto dos responsveis;

Na tarefa n1 o utilizador dever encontrar informao acerca da

entidade, nomeadamente os valores pela qual se rege e a caracteriza.
Em relao tarefa n2 ser disponibilizada informao sobre os
vrios servios prestados pela organizao. O catering, a animao, a
decorao e o babysitting so os elementos que devero ser
abordados neste item.
Quanto tarefa n 3, dever conter um texto informativo referente
qualidade, rigor e originalidade que a Duplos Gmeos faz questo
de ter sempre presente em todo e qualquer servio.
No que diz respeito tarefa n 4, os contactos dos responsveis
desta empresa devero ser disponibilizados.

1.3

Caracterizao do produto

Este site tende a ter como principal caracterstica, a total informao

disponibilizada a todos os utilizadores.

O utilizador que esteja interessado nos servios da Duplos Gmeos

encontra informao relativa identidade corporativa, o tipo de
servios que esta presta, assim como os contactos da mesma.

O site tende a ter uma viso comercial, uma vez que o principal
objectivo que os utilizadores se tornem clientes, ou seja, que
escolham os seus servios.

2. Desenho

2.1 Mapa de navegao

A estrutura de navegao constituda por todos os percursos

possveis a serem seguidos pelo utilizador e denomina-se por Mapa
de Navegao.

Introduo

Servios

Catering

Animao

Quem somos

Especialidades

Decorao

Babysitting

Contactos

A navegao desta aplicao uma navegao no-linear, na qual o

utilizador navega livremente sem lhe serem impostas restries,
podendo escolher a cada instante o percurso a seguir.

Ajuda

2.2 Storyboard

2.2.1. Layout Introduo

Este layout a introduo aplicao. Numa animao, as palavras

Mudana, Profissionalismo, Qualidade e Confiana surgem e
desvanecem uma de cada vez. Terminada a animao, o logotipo
preenche o centro do espao, juntamente com o slogan da empresa:
O seu sonho comea aqui
O utilizador tem a possibilidade de interagir na opo Saltar
introduo, localizada no canto inferior direito da delimitao que
contm a animao e o logotipo, tal como tem a possibilidade de ligar
ou desligar o udio.

2.2.2 Layout geral

Este layout ser a estrutura base para todas as restantes unidades de

contedo.
As suas principais caractersticas so:

Resoluo: 800 x 600

Fundo do ecr: a imagem de fundo composta por um

gradiente que vai desde um tom composto por R (28), G (28),
B (28) ao tom constitudo por R (57), G (57), B (57). Num
efeito de solo com perspectiva de profundidade, a tonalidade
vai de R (34), G (34), B (34) ao tom R (150), G (150), B (150).

Elementos:

1. Logtipo Neste espao ser sempre preenchido com o

logtipo da empresa, sem qualquer tipo de alterao do mesmo.

2. Imagem

Estes

elementos

identificam

cada

menu

relacionam-se com outros componentes do layout.

2.a. sempre ocupado por um elemento floral que assume
sempre a mesma tonalidade do elemento 3, variando com este.
2.b. Este espao sempre ocupado pela imagem e nmero de
cada menu seleccionado. O nmero assume a cor do elemento 3,
tal como 2.a
3.

Ttulo O contedo deste elemento varia consoante o menu

escolhido pelo utilizador e relaciona-se com o elemento 4. A fonte

AvantGarde Md AT, tamanho 23 e filtro anti-alias.
4. Texto Aqui est presente toda a informao de cada menu. A
fonte Arial, tamanho 14, cor #AFAFAF (cinzento) e o filtro antialias.
5. Barra de navegao Composta pelos vrios menus, este
elemento permite

que

o utilizador seleccione a informao

pretendida. A interactividade presente neste elemento, permite

que o utilizador possa ir para outras unidades de contedo.
6. Botes auxiliares Este elemento contm o boto on/off do
udio e o retorno introduo. Aqui, o utilizador interage com a
aplicao, uma vez que pode ligar ou desligar o som, tal como
pode voltar introduo.

2.2.3 Quem somos

Mantendo as caractersticas do layout geral, este ecr distingue-se

com o contedo do texto e com a cor que comum imagem e ao
ttulo. A cor composta por: R (255), G (153), B (0) e assume o
cdigo #ff9900.

2.2.3 Servios

As caractersticas do layout geral mantm-se. Este ecr distingue-se

com o contedo do texto, com a cor que comum imagem e ao
ttulo, composta por R (153), G (102), B (51) e assume o cdigo
#996633. Os links que links que permitem a interaco com o
utilizador so: catering, babysitting, animao e decorao e a sua
cor constituda por: R(234), G (234), B (234) e assume o cdigo
#eaeaea.

2.2.3.1

Catering

Este ecr corresponde ao link inserido em Servios. Com as

caractersticas do layout geral, assume em 2.a a cor do lugar ao
qual pertence. O elemento 3 tem a cor composta por R (153), G
(51), B (0) e assume o cdigo #993300. Neste contedo insere-se
mais uma imagem que acentua o contedo, situada na parte
inferior direita do elemento 4.

2.2.3.2

Animao

O link inserido Animao insere-se em Servios e respeita as

caractersticas do layout geral. Em 2.a a cor a mesma do mesmo
elemento do ecr Servios e o elemento 3 tem a cor composta
por R (153), G (51), B (0) e assume o cdigo #993300. Uma
imagem relativa ao contedo colocada na parte inferior direita
do contedo textual.

2.2.3.3

Babysitting

Com as caractersticas do layout geral, este ecr insere-se em

Servios e assume em 2.a a cor do lugar ao qual pertence. O
elemento 3 tem a cor composta por R (153), G (51), B (0) e
assume o cdigo #993300. Na parte inferior direita do elemento 4
colocada uma imagem referente ao contedo.

2.2.3.4

Decoraes

Tal como os ecrs dos links inseridos em Servios, esta unidade

de contedo assume as caractersticas do ecr geral. Em 2.a a cor
a mesma do lugar ao qual pertence. O elemento 3 tem a cor
composta por R (153), G (51), B (0) e assume o cdigo #993300.
Abaixo do contedo do elemento 4, insere-se uma imagem que se
relaciona com os contedos.

2.2.4

Especialidades

Este ecr mantm as caractersticas do layout geral e distingue-se

com o contedo do texto e com a cor que comum imagem e ao
ttulo. Esta cor composta por R (153), G (0), B (0) e assume o
cdigo #990000.

2.2.5

Contactos

Este ecr distingue-se com o contedo do texto e com a cor que

comum imagem e ao ttulo. A cor composta por R (0), G (128), B
(128) e assume o cdigo #008080. Mantm-se as caractersticas do
layout geral.

Ficha Tcnica de Design

Na fase de design fixamos, pormenorizadamente, o funcionamento da

aplicao, tal como o aspecto visual que vai assumir. Daqui, surgiu o
guio. Este documento identifica e descreve a estrutura (esquema de
navegao), apresenta os contedos que sero apresentados em
cada unidade de contedo (ecr), tal como as suas caractersticas
tcnicas e elementos interactivos do esquema de navegao.

A estrutura de navegao constituda por todos os percursos

possveis a serem seguidos pelo utilizador e fornece o fluxo lgico da
interface interactiva, descreve as hiperligaes entre ecrs e ilustra o
que acontece quando h interaco com a aplicao.

A navegao desta aplicao uma navegao no-linear, na qual o

utilizador navega livremente sem lhe serem impostas restries,
podendo escolher a cada instante o percurso a seguir. No entanto,
este

design

de

navegao induz o utilizador a um

percurso

aconselhado, segundo a importncia dos itens de informao que

contm:
1. Quem somos apresenta a organizao;
2. Servios mostra as tarefas que a entidade executa;
3. Especialidades informa o utilizador acerca da qualidade, rigor e
originalidade da
empresa;
4. Contactos disponibilizao de contactos.

A liberdade dada ao utilizador no desconcerta de modo algum na

utilizao da aplicao, porque esta por si s simples, de forma que
o utilizador no se perde no seu percurso. Esta aplicao multimdia
estruturalmente organizada segundo um conjunto de temas
associados organizao que o tpico principal.

Construdo o mapa de navegao, passamos para o storyboard que

esboa cada unidade de apresentao, acompanhado pela descrio
detalhada da combinao e disposio de contedos. Deste modo,
detalhamos a localizao precisa dos elementos interactivos que
facilitam a navegao e especificamos pormenorizadamente todos os
elementos que formam o contedo.

A informao que introduzimos na aplicao repartida em grupos e

a apresentao numrica segue a sua ordem natural, o que permite
ao

utilizador

uma

associao

ou

comparao

de

classes

de

informao. Os grupos esto separados sempre pela mesma distncia

e, este espao em branco, melhora a esttica com o seu efeito de
aragem visual. Por outro lado, uma mais-valia funcional, porque
estes espaos vazios induzem a ateno do utilizador para a
informao realmente importante, fazendo com que a apresentao
no seu todo alcance um sentido lgico.

Esta aplicao, uma vez que se destina a promover a empresa

Duplos Gmeos, o layout uma mais valia para ela, pois mostra
toda uma filosofia organizacional. A filosofia desta empresa assenta
sobre conceitos como:

Requinte

Juventude

Actualidade/ modernidade

Invulgaridade

Rigor

Iniciamos a concepo do layout a partir do local onde pretendemos

que o utilizador inicie o movimento do olhar, ou seja, comea por ver
o movimento da foto que surge do menu, depois observa-a no espao
central do ecr e, por fim, v a informao textual. A distribuio dos

elementos responde necessidade de leitura em Z, isto , da

esquerda para a direita e de cima para baixo.

Neste layout, como os utilizadores percebem primeiro os elementos

maiores e s depois os mais pequenos, pensamos em imagens que
traduzissem o contedo de cada seco, pois uma imagem vale por
mil palavras. Por outro lado, como os elementos mais escuros so
primeiramente percebidos do que os mais claros, as hiperligaes
tm um fundo em forma de rectngulo preto para que tal seja
possvel.

Como num ecr a leitura acontece na diagonal e sempre em busca de

um prximo link, o contedo situa-se em maior percentagem do lado
esquerdo do ecr, pois antecedem-lhe um conjunto de elementos que
compem a parte esquerda, induzindo a esta leitura digital.

Damos especial ateno s cores usadas, pois o uso indevido de

cores pode repelir a atraco visual desejada, tal como a rpida
identificao e o fcil reconhecimento dos objectos. Com isto, a
utilizao de cores imprprias pode confundir e inibir o bom
desempenho do utilizador. Aqui, optamos essencialmente pelo preto e
pelo branco, ou seja por cores neutras (ex.: preto, cinza, branco).
Esta conjugao, para alm de ser considerada das melhores para
uma leitura fcil e eficaz, assume como simbologia o total equilbrio
entre a atraco de opostos, tal como um excelente meio de
acentuar a expressividade de todas as cores que nelas se conjugam.
Deste modo, escolhemos um ecr com contraste negativo, no qual o
fundo escuro e os caracteres so brancos, o que permite uma
melhor percepo graas ao contraste figura-fundo. Esta percepo
designa as cores como acromticas, pois os objectos distinguem-se
do fundo a partir da luminosidade.

No ecr usamos seis cores, quatro delas so utilizadas para codificar

informaes: amarelo, castanho, vermelho e azul. Contudo, no
consideramos

as

cores

presentes

nas

fotografias,

porque

consideramos que 100% dos utilizadores consigam ver a informao

importante sem qualquer confuso; a fotografia repousa e adoa a
leitura visual, aumentando o conforto visual.

As cores esto distanciadas de modo a que se consiga uma boa

legibilidade. Alis, as fotografias so visualizadas isoladamente
quando se opta por outro link, do qual nasce outra fotografia, o
anterior baixa e desaparece. Deste modo, a leitura nica e no se
confundem imagens entre si.

As cores quando usadas para agrupar informao, devem estar

relacionadas com os contedos, isto , similares com os contedos.
Nesta aplicao, fizemos as seguintes relaes:
o Quem somos amarelo: provoca a sensao de atraco,
charme e alegria, consideradas adequadas para o primeiro link;
representa a criatividade e simboliza energia positiva tal como
jovialidade, adjectivo este que identifica esta organizao;
o Servios castanho: representa disciplina, observao das
regras, responsabilidade e firmeza; um tom sofisticado, tal
como todo e qualquer servio prestado pela Duplos Gmeos;
o Especialidades vermelho: estimulante mental, uma cor
quente e excitante; associada indicao e paragem, para
que realmente se note a unicidade desta organizao;
o Contactos azul: uma cor fria, que gera a sensao de
calma e de maior amplitude; logo, para expressa a prontido
da Duplos Gmeos em alargar conhecimentos a futuros clientes.

Com

isto,

pretendemos

alcanar

as

funes

psico-fisiolgicas

associadas ao ser humano, uma vez que cada cor produz sensaes
diferentes em funo da sua ampliao.

A nfase dada s cores baseia-se na saturao, isto , as cores esto

aplicadas na sua tonalidade pura, que sugere um maior contraste.
Por outro lado, esta nfase est tambm presente na luminosidade
que chama a ateno do utilizador para toda a informao que nela
habite; o brilho (luminosidade) fixa a ateno sobre um ponto. Na
aplicao destinada Duplos Gmeos, esta luminosidade situa-se no
centro e no inferior de cada unidade de contedo onde se situam as
informaes.

O tipo de letra escolhido est ausente de serifa, porque evita o efeito

de esbatimento e no sabemos qual a definio do ecr que o
utilizador vai usar; caso contrrio, as serifas funcionariam como rudo
visual.

Como pretendemos rapidez e boa percepo de leitura, assim como

uma transmisso de uma quantidade considervel de informao,
optamos pelo tipo de letra Arial, em tamanho 12. Estas escolhas
foram tambm baseadas nas caractersticas do nosso pblico-alvo.

Os textos da aplicao so distinguveis (distino clara da formafundo),

concisos,

legveis

estruturalmente

organizados;

com

combinao de maisculas e minsculas, permite uma leitura mais

rpida.

As imagens utilizadas, associadas aos links, adequam-se ao tipo de

explicaes que sero dadas nesse sector. Optamos por fotografias
que so visualmente ricas e proporcionam detalhes, do mesmo modo

que capta a ateno e transmite informao de forma realista ao

utilizador.

A animao tambm est presente nesta aplicao, precisamente no

logotipo. Destaca a importncia da organizao e faz com que o
pensamento seja direccionado sofisticao e elegncia que a Duplos
Gmeos pretende transmitir, tal como ao fulgor de cada servio
prestado.

O udio existente escolhido criteriosamente de modo a no se

tornar enfadonho, nem a ser ignorado com o decorrer da utilizao da
aplicao. Aqui, utilizamos a msica de modo a tocar os sentimentos
do utilizador num nvel inconsciente, expressando toda a subtileza de
servios e toda o requinte e modernismo da Duplos Gmeos.

A interaco desta aplicao est presente no menu, no qual a

seleco de uma opo resulta na mudana do estado da interface.
Neste estilo de interaco, os utilizadores no precisam de se lembrar
do item que desejam, apenas necessitam de reconhec-lo. Para tal, e
para que esta interaco seja eficiente, os itens do menu so autoexpressivos com a ajuda das fotografias.

O menu tem a desvantagem da ocupao de muito espao no ecr.

Portanto, optamos por assumir o menu como parte da composio de
modo a melhorar todo o sentido esttico de cada unidade de
contedo. Assim, as opes do menu esto agrupadas e seguem um
sentido lgico: apresentao da organizao, os servios prestados,
as especialidades dos servios e, por fim, os contactos.

Na interaco desta aplicao, a manipulao directa na qual o

utilizador age sobre os objectos da aplicao de modo directo; h

uma analogia entre o curso e a mo, e as representaes grficas e

os objectos.

USABILIDADE
o Orientao: este critrio de usabilidade est presente na ordem
lgica dos itens do menu, de modo a aconselhar, informar e
conduzir o utilizador; permite uma melhor utilizao do sistema
e possibilita o utilizador a localizar-se a qualquer momento.
o Presteza: h sempre informaes fornecidas aos utilizadores,
relativamente ao estado no qual ele se encontra e s aces
possveis, de modo a facilitar a navegao.
o Agrupamento/distino por localizao: os itens do menu esto
agrupados numa faixa na parte inferior do ecr e as fotografias,
assim, tambm se encontram agrupadas uma vez que nascem
de cada link do menu; os links esto por ordem numrica
crescente. O item sem qualquer agrupamento existente o do
udio, contudo situa-se num local facilmente identificvel e
equilibra tambm a composio no seu todo.
o Agrupamento/distino por formato: para alm de agrupados
geograficamente, os itens do menu tambm se identificam
pelas suas caractersticas grficas, o que permite a distino
entre outros objectos que constituem a composio.
o Feedback imediato: pretendemos um feedback rpido e eficaz,
para que se consiga a satisfao e confiana do utilizador
atravs de respostas rpidas; assim, o utilizador fica com boa
impresso do sistema.
o Clareza: factores como legibilidade das informaes tambm
so tidos em conta, nomeadamente a conjugao das cores
(preto e branco) e a relao forma-fundo (branco sobre preto).
o Carga de trabalho: os elementos da interface que reduzem a
sua

carga

perceptiva/mnemnica

so

as

fotografias

que

complementam a designao de cada link e a localizao

permanente do menu. As informaes presentes em cada

unidade de contedo so simples e pertinentes de forma a no
distrair o utilizador, garantindo uma melhor eficincia da tarefa.
o Conciso:

esta

aplicao

concisa,

pois

no

permite

interactividade de entrada de informao e os seus itens do

menu so extremamente sucintos, de modo a facilitar a leitura.
o Aces

mnimas:

este

critrio

tambm

atingido

nesta

aplicao na medida em que o utilizador no necessita de

efectuar

muitas

operaes

para

atingir

um

determinado

objectivo.
o Carga mental: relacionado com o critrio de carga da trabalho,
esta aplicao no exige do utilizador grande carga de trabalho
a nvel perceptivo e mnemnico e no impe memorizao de
informao e de procedimentos ao utilizador.
o Controlo explcito: o utilizador tem total domnio sobre a
interface, pois s v a informao que quer e ouve a musica
quando deseja.
o Aco explcitas: esta aplicao s efectua aces quando
solicitadas pelo utilizador, o que faz com que este no cometa
erros e no fique desorientado ao longo da utilizao.
o Controlo do utilizador: o utilizador tem sempre o controlo de
toda a aplicao, o que faz com que a aprendizagem seja fcil.
o Adaptabilidade/flexibilidade:

aplicao

tem

apenas

uma

possibilidade de se efectuar cada tarefa que atravs do clique

em

cada

link

do

menu

que

esta

sempre

presente,

independentemente da posio em que o utilizador se encontre;

deste modo, a interface no se adapta a cada utilizador, mas
independentemente do utilizador, este no qualquer dificuldade
em se situar e encontrar a aco que deseja.
o Considerao pela experincia do utilizador: a aplicao adaptase a qualquer utilizador, independentemente da experincia
dele, pois de uma simplicidade que permite boa navegao

tanto a utilizadores inexperientes, porque no necessitam de

muitos conhecimentos, como a experiente, uma vez que no os
confunde nem os satura.
o Gesto/proteco contra erros: a simplicidade da aplicao e o
facto de no aceitar qualquer tipo de entrada, possibilita a
diminuio de ocorrncia de erros. Com isto, esta aplicao
dispensa a existncia de mensagens de erro, tal como a
oportunidade de correco dos mesmos.
o Homogeneidade/consistncia: os objectos que constituem cada
unidade de contedo so padronizados, isto , a sua aparncia,
a sua localizao e denominao mantm-se.
o Significado dos cdigos: este critrio esta presente na relao
entre as fotografias e a informao de cada link ao qual cada
uma dela pertence. Esta codificao adequada permite que o
utilizador se recorde e reconhea o seu significado.
o Compatibilidade: na aplicao h compatibilidade entre as
caractersticas do utilizador e as tarefas, uma vez que uma
aplicao simples e vai de encontro s expectativas e costumes
de todos os utilizadores apesar de simples, uma aplicao
completa.

AVALIAO
o Ciclo de design: a avaliao efectuada durante o
processo de design, antes do sistema ter terminado,
atravs

dos

storyboards

(avaliao

formativa,

que

melhora a qualidade do sistema); quando terminado,

numa avaliao somativa, verificamos a funcionalidade de
toda a aplicao.
o Recolha de dados: os dados recolhidos para se analisar a
qualidade do uso, so recolhidos atravs da observao
de utilizadores de vrios nveis de experincia.

o Dados

recolhidos:

no

quantificveis,

os

dados

conseguidos relacionaram-se com sugestes de como

melhorar a interaco ou o aspecto grfico da aplicao.
o Anlise: numa anlise preditiva, previmos todas as
possveis dificuldades que o utilizador poderia encontrar
(desde a localizao dos itens do menu s conjugaes
das cores, formas e fundo).