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 o 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. 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.

Introduo

Servios Quem somos Especialidades Contactos Ajuda

Catering Animao Decorao Babysitting

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 e

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 anti-

alias.

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 forma-

fundo), concisos, legveis e 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 auto-

expressivos 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: a 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 adapta-se 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).

guião do site duplos gémeos

Documents