Webdesign

e Arquitetura de Informação
Daniela Szabluk
Gissele Cardozo
Webdesign
Webdesign A multidisciplinary pursuit pertaining to the planning and production of Web
sites, including, but not limited to, technical development, information
structure, visual design, and networked delivery. (Powell, 2002)
Webdesign É a medida pela qual um produto pode ser usado por usuários específicos
para alcançar objetivos específicos com efetividade, eficiência e satisfação em
usabilidade um contexto de uso específico (ISO 9241-11).
Webdesign A efetividade permite que o usuário alcance os objetivos iniciais de interação,
e tanto é avaliada em termos de finalização de uma tarefa quanto também em
usabilidade termos de qualidade do resultado obtido.
Webdesign Eficiência se refere à quantidade de esforço e recursos necessários para se
chegar a um determinado objetivo. Os desvios que o usuário faz durante a
usabilidade interação e a quantidade de erros cometidos pode servir para avaliar o nível
de eficiência do site.
Webdesign A terceira medida de usabilidade, a satisfação, é a mais difícil de medir e
quantificar, pois, está relacionada com fatores subjetivos. De maneira geral,
usabilidade satisfação se refere ao nível de conforto que o usuário sente ao utilizar a
interface e qual a aceitação como maneira de alcançar seus objetivos ao
navegar no site.
Webdesign Usability and user satisfaction are directly related. (Powell, 2002)

usabilidade
Webdesign Ambiente do usuário comum (POWELL, 2002, p. 28)

usabilidade
Webdesign Reação do usuário comum (POWELL, 2002, p. 28)

usabilidade
Webdesign Sete pecados capitais na criação de sites

usabilidade Pecado I: dificultar as ações de navegação em um site.

Pecado II: seguir tendências não garante a originalidade do site.

Pecado III: negligenciar a semântica do código de um site.

Pecado IV: não pesquisar as necessidades do usuário.

Pecado V: não considerar a necessidade do negócio na escolha da tecnologia.

Pecado VI: não justifi car o uso de elementos na composição gráfica da

interface.

Pecado VII: tratar o conteúdo apenas como novidade.

Webdesign Pecado I: dificultar as ações de navegação em um site.

usabilidade Felipe Memória - Interaction designer - HUGE-NY - www.hugeinc.com

―O primeiro deles é ignorar solenemente as necessidades do público-alvo e

seus objetivos. A grande maioria dos sites tem duas ou três tarefas principais
que serão executadas pelos usuários. Uma de suas missões é, portanto,
facilitar a execução dessas tarefas.‖

Quem não caiu em tentação: www.amazon.com

Webdesign Pecado II: seguir tendências não garante a originalidade do site.

usabilidade Tulio Paiva - Diretor de criação digital - Giovanni+DraftFCB -

www.giovannidraftfcb.com.br

a) Camisa de força - a obediência cega a guidelines, templates e afins,

desenvolvidos para outras plataformas e utilizados sem critério ou senso
crítico, comprometendo a dinâmica on-line e, conseqüentemente, a
experiência. Identidade visual é uma coisa; gesso é outra.

b) Falta de verdade - a busca da originalidade não pode fazer com que as

marcas abandonem seu DNA. Há que se inovar sempre, mas sem perder
a autenticidade jamais.

c) Modismos - seguir tendências nem sempre é sinônimo de originalidade.

Cuidado para o seu site não parecer um ‗jovem de butique‘ ou um ‗punk
de butique‘, por exemplo.
Webdesign Pecado II: seguir tendências não garante a originalidade do site.

usabilidade Tulio Paiva - Diretor de criação digital - Giovanni+DraftFCB -

www.giovannidraftfcb.com.br

d) Perder o foco - todo o poder emana do usuário e em seu nome será

exercido. Se você piscar, pode se perder no overdesigning, no
gadgetismo, no conteúdo colaborativo ou em outra armadilha qualquer.
Lembre-se: você quer que o seu consumidor se sinta em casa, e que ele
tenha vontade de voltar sempre para lá.

e) Benchmarkismo - os sites da concorrência, de outros segmentos e até

mesmo aqueles premiados em festivais, e que você naturalmente admira,
são referências, não leis universais. Cada problema tem sua resposta
específica.‖

Quem não caiu em tentação: www.redbull.com/flightlab

Webdesign Pecado III: negligenciar a semântica do código de um site.

usabilidade Everaldo Bechara - Coordenador acadêmico - Centro de Treinamento iLearn -

www.ilearn.com.br

―Um código bem construído e validado é fundamental para que os agentes do

usuário (aplicativos que interpretam seu conteúdo) possam entender o que
está escrito e interpretar seu site da melhor forma possível.

Outra questão muitíssimo relevante, e que alguns designers e

desenvolvedores, por muitas vezes não levam em consideração, é a
semântica em seus códigos.

Infelizmente, ainda existe uma legião de designers e desenvolvedores que

desconhecem a importância de uma semântica correta. Uma vez aplicada,
seu código passa a ter relevância para os agentes e conseqüentemente um
melhor posicionamento no Google, por exemplo.‖

Quem não caiu em tentação: www.w3c.org

Webdesign Pecado IV: não pesquisar as necessidades do usuário.

usabilidade Guilhermo Reis - Especialista em arquitetura de informação - Try Consultoria

e Pesquisas - www.try.com.br

―Para satisfazer as necessidades dos usuários, o primeiro passo é conhecê-

lo: quais são as suas necessidades, seu comportamento, as informações que
necessita para tomar decisão e qual é a sua linguagem, que termos e
palavras ele utiliza.

Para obter esses dados, as empresas precisam investir em pesquisa: ir a

campo e entrevistar, conversar, observar, realizar estudos de usabilidade no
site atual, nos concorrentes e em similares. Isso pode ser feito contratando
consultorias especializadas no tema e também consultando informações
internas da empresa.‖

Quem não caiu em tentação: www.uol.com.br e www. globo.com

Webdesign Pecado V: não considerar a necessidade do negócio na escolha da
tecnologia.
usabilidade
Fabio Seixas - Sócio-diretor do Camiseteria.com - www.camiseteria.com

―A escolha da tecnologia é um ponto crucial na definição de um projeto de

internet. Apesar de eu ser agnóstico tecnológico, vejo que os principais erros
são:

- definir a tecnologia do projeto baseado apenas no conhecimento da

equipe técnica ao invés de considerar as necessidades do negócio da
empresa;

- selecionar tecnologias que possuem escassez de profissionais no

mercado, e, principalmente, tecnologias que não garantem uma boa
Escalabilidade.‖

Quem não caiu em tentação: www.youtube.com

Webdesign Pecado VI: não justificar o uso de elementos na composição gráfica da
interface.
usabilidade
Victor Sahate - Head of design - Agency Republic (Londres) -
www.sahate.com.br

―Os erros mais comuns na busca do equilíbrio em um website estão

relacionados à ergonomia, funcionalidade e aspectos técnicos do meio, como
resolução, calibragem gráfica em diferentes monitores, interface, peso do site
em relação à banda de acesso do público-alvo e padrões de acessibilidade.
Tudo isso é parte atuante e fundamental de um bom design e não deve ser
deixado de lado nem pelos designers mais artistas.

Falando então da parte artística e tratando apenas de puro design gráfico,

supostamente o que tenho que responder aqui, os erros mais comuns, por
incrível que pareça, acabam não sendo ligados à escolha de fontes e aos
padrões de cores e sim a argumentação e a sensibilidade do designer perante
estas escolhas.‖

Quem não caiu em tentação: www.the-affair.com

Webdesign Pecado VII: tratar o conteúdo apenas como novidade.

usabilidade Bruno Rodrigues - Consultor em informação para a mídia digital do website

Petrobras - http://bruno-rodrigues.blog.uol.com.br

―Erro mais comum: achar que conteúdo é sinônimo de notícia, e por isso só
merece destaque na página principal uma vez na vida. Nem todo conteúdo é
material noticioso, então cuidado para não transformar seu site em um
cemitério de informações, onde só a ‗novidade‘ merece destaque.Trabalhar
todo o conteúdo de um site, em seu potencial máximo, é um dos segredos do
sucesso.‖

Quem não caiu em tentação: www.bue.gov.ar

Webdesign Nos anos 90 um bom web designer era aquele que poderia codificar o site de
seu cliente de 5 maneiras diferentes, para o Netscape 3, 4, IE 3, IE4 entre
standards, outros.
linguagens,
scripts Desta forma era necessário usar linguagens de scripts completamente
incompatíveis e scripts diferentes por browser e tudo deveria estar on-line ao
mesmo tempo. Desse modo os sites ficavam muito mais pesados do que do
que deveriam.

Tudo isso mudou com a semântica (X) Html, CSS layout, javascript e DOM. O
que proporcionou maior liberdade a criação dos designers, assim como menor
tempo para as alterações.
Webdesign A W3C, criou a WAI (Iniciativa para a Acessibilidade da Web), que aponta as
situações e características que o usuário pode apresentar:
acesso
1 – Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade (quando
universal não a impossibilidade) de interpretar certos tipos de informação.
acessibilidade 2 – Dificuldade visual para ler ou compreender textos.
3 – Incapacidade de usar o teclado ou o mouse, ou ambos.
4 – Insuficiência de quadros, apresentando apenas texto ou dimensões
reduzidas, ou uma conexão muito lenta.
5 – Dificuldade para falar ou compreender, fluentemente, a língua em que o
documento foi escrito.
6 – Ocupação dos olhos, ouvidos ou mãos, por exemplo, no trabalho em um
ambiente barulhento.
7 – Desatualizarão, pelo uso de um browser antigo, ou por utilizar um browser
completamente diferente dos habituais, ou por voz ou sistema operacional
menos difundido.
Webdesign (POWELL, 2002,. p 135)

modos de 1. First impression

2. Home page pretesting
avaliação de 3. Sub-page pretesting
sites 4. Navigation pretesting
5. Task analysis
6. Execution Analysis
7. Final Impression
Webdesign (POWELL, 2002,. p 135)

modos de First Impression

The first thing to do before you start the detailed evaluation is to stop and write
avaliação de down your first reaction to the site‘s home page.
sites
Webdesign (POWELL, 2002,. p 135)

modos de Home Page Pretests

The first few pretests conducted will give you a basic sense of the usability of
avaliação de the homepage. Some of the pretests will require you to make some logical
sites assumptions that you will later verify to show usability of the site, so don‘t start
using the site yet or you‘ll spoil this part of the evaluation. Just keep the home
page onscreen and your hands off the mouse and keyboard.
Webdesign (POWELL, 2002,. p 135)

modos de Sub-Page Pretests

The primary sub-pages of the site—namely, those that are directly accessible
avaliação de from the home page—should be tested using the same pretests as the Home
sites Page Pretests. However, for the identity pretest, focus more on the purpose of
the page than on the organization. The navigation pretests should proceed
normally. While this may seem like a lot of work for an average size site, it
should proceed rather quickly if the sub-pages follow a consistent design and
navigation pattern. If they do vary greatly, you are probably facing a site that
has a high degree of design and navigation inconsistency
and deserves significant analysis.
Webdesign (POWELL, 2002,. p 135)

modos de Site Navigation Testing

Once the first layers of the site have been examined, it is time to perform
avaliação de simple tests to probe the quality of the global site navigation. Good sites will
sites provide consistent, well-executed navigation and should provide alternative
navigation schemes, such as site maps, indexes, and search engines.
Webdesign (POWELL, 2002,. p 135)

modos de Task Analysis

Generally, on the Web, users are doing one of three general tasks:
avaliação de
sites 1. Reading
2. Looking for something
3. Performing some interaction

The third task covers user activities like interacting with menus, filling out
forms, or other mechanical tasks. Our testing should make sure that the site
supports all three of these general task groups. Once we have verified that, we
should consider the specific tasks unique to a particular site.
Webdesign (POWELL, 2002,. p 135)

modos de Execution Analysis

Execution testing focuses on trying to make sure the site is built correctly.
avaliação de Execution includes issues with content, visuals, technology, and delivery.
sites
Webdesign (POWELL, 2002,. p 135)

modos de The Final Question

Given how much you know now about the site, do you think it is a great site or
avaliação de not? Were you able to accomplish the tests easily? Would you take away a
sites positive, neutral, or negative feeling about the site? Consider listing a few of
the reasons that made you skew one way or another.
 MEMÓRIA, Felipe. Design para a Internet: projetando a experiên-cia perfeita.
Referências Rio de Janeiro: Elsevier, 2005.

ROSENFELD, Louis; MORVILLE, Peter. Information Architecture for the world

wide web. 2. ed. Beijing: O'Reilly Media, 2002.

2.pdf (objeto application/pdf). . Disponível em

<http://www.arteccom.com.br/webdesign/downloads/60/2.pdf>. Acesso em: 4
Nov. 2010, .

wai-pageauth.pdf (objeto application/pdf). . Disponível em

<http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf>. Acesso em: 4
Nov. 2010, .