APONTAMENTOS

WEBDESIGN
Introduo construo de interfaces web
1.Modelo de design centrado no utilizador
1.1.
Quem Don Norman?
1.1.1.Newsweek: The guru of workable technology
1.1.2.Autor do livro The design of everyday things
1.2.
Don Normans user centered design model
Processo no qual as necessidades, desejos e limitaes dos utilizadores so
o factor mais preponderante durante a fase de design.
User experience design often deals with questions of context. Aesthetic design
makes sure the button on the coffeemaker is an appealing shape and texture.
Functional design makes sure it triggers the appropriate action on the device. User
experience design makes sure the aesthetic and functional aspects of the button
work in the context of the rest of the product, asking questions like, Is the button
too small for such an important function? User experience design also makes sure
the button works in the context of what the user is trying to accomplish, asking
questions like, Is the button in the right place relative to the other controls the user
would be using at the same time?

1.2.1. Optimizar a interface

1.2.2. Optimizar a experincia de utilizao
When most people think about product design (if they think about product design at
all), they often think of it in terms of aesthetic appeal: a well-designed product is
one that looks good to the eye and feels good to the touch. (The senses of smell
and taste dont come into play for most products. Sound is often overlooked but can
be an important part of the aesthetic appeal of a product.)
Another common way people think about product design is in functional terms: A
well-designed product is one that does what it promises to do. And a badly designed
product is one that somehow doesnt: scissors that dont cut even though the
blades are sharp, a pen that doesnt write even though its full of ink, a printer that
constantly jams.

With more complex products, though, the requirements to deliver a successful user
experience are independent of the definition of the product. A telephone is defined
by its ability to place and/or receive calls; but there are practically infinite variations
on the telephone that can deliver on this basic definitionwith widely varying
degrees of successful user experience. And the more complex a product is, the
more difficult it becomes to identify exactly how to deliver a successful experience
to the user. Each additional feature, function, or step in the process of using a
product creates another opportunity for the experience to fall short. A modern
mobile phone has many, many more functions than a desk phone of, say, the
1950s. As a result, the process of creating a successful product has to be quite
different. Thats where product design has to be supported by user experience
design.

1.2.3. Simplificar a estrutura de tarefas

1.2.4. Esttica como acessria
Imposio/adaptao vs Optimizao

1.3.

Sete princpios de Norman

1.3.1. Utilizar o conhecimento do mundo e aquele que adquirimos ao

longo da vida
1.3.2. Simplificar as tarefas
1.3.3. Explorar os constrangimentos
1.3.4. Tornar as opes visveis
1.3.5. Facilitar o mapeamento mental
1.3.6. Desenhar para o erro (feedback)
1.3.7. Caso tudo falhe, utilizar standards

Em suma: make sure that the user figure out what to do, and the user
can tell what is going on
1.4.

Standards in The design of everyday things

1.4.1. Arbitrary aspects of cars and driving had to be standardized

1.4.1.1. Which side of the road people drove on
1.4.1.2. Which side of the car the driver sat on
1.4.1.3. Where the essential components were: steering wheel,
brake, clutch pedal, and accelerator (in some early cars it
was on a hand lever)

Which standardization, once you have learned to drive on car, you

feel justifiably confident that you can drive any car, any place in the
world.
Standardization is the solution of last resort, an admission that we
cannot solve the problems in any other way.

1.5.

The seven stages of action in The design of

everyday things
1.5.1.
1.5.2.
1.5.3.
1.5.4.
1.5.5.
1.5.6.
1.5.7.

1.6.

Definir um objectivo: Quero mais luz para ver melhor

Formar uma inteno: Eu vou ligar as luzes
Especificar uma aco: Andar at ao interruptor para ligar a luz
Executar a aco: Ligar a luz
Entender o mundo: Olhar em volta
Interpretar o estado do mundo: EU consigo ver melhor?
Avaliar o resultado: Se eu consigo ver melhor ento fui bem-

sucedido

Usabilidade

1.6.1. Pertence ao layout

1.6.2. Localizao dos elementos
1.6.3. Ux intuitiva

1.7.

Acessibilidade

1.7.1. Contedos acessveis a todo o tipo de pessoas

1.7.2. Design universal
1.7.3. Contedo passar nos testes de acessibilidade (3 prioridades A,

1.8.

AA, AAA)

Sistemas tradicionais

1.8.1. Contexto no importa

1.8.2. Sem necessidade de adaptao
1.8.3. Utilizao nica

1.9.

Sistemas multiplataforma

1.9.1. Contexto define o contedo

1.9.2. Responsive design = convergncia de dispositivos
1.9.3. O desenvolvimento de interfaces deve ser iniciado a partir do
contedo e nunca a partir da forma

Gerry McGovern: Manage the tasks, not the content

2.Conhecer a audincia
2.1.

O que so personas?

So personagens construdos com base na informao reunida durante a

fase de pesquisa de utilizadores
2.1.1. Deve existir uma persona por cada segmento de utilizadores
2.1.2. Idealmente 3 a 5 personas
2.1.3. Cada perfil deve conter foto, nome, bio, caractersticas,
actividades/motivaes, gostos

2.2.
Personas em projecto Web
2.2.1.O primeiro passo no user centered design fazer user
research
2.2.2.Saber quem so os utilizadores
2.2.2.1. Os seus comportamentos
2.2.2.2. As suas atitudes
2.2.2.3. As suas necessidades

2.2.3.Porqu?

2.3.

2.2.3.1.
2.2.3.2.
2.2.3.3.
2.2.3.4.
2.2.3.5.
2.2.3.6.

Decises devem ter por base os utilizadores

O negcio depende da satisfao destes
Ajuda tomada de decises
Entender como se ir utilizar o site
Encontrar padres
Informar

Cenrios em projectos Web

2.3.1.
2.3.2.
2.3.3.
2.3.4.
2.3.5.
2.3.6.

Descrio de situaes reais

Utilizar personagem num contexto simulado de utilizao
Expe problemas e oportunidades no design
Avalia o design em vrias perspectivas
Causa empatia
Pemite-nos reflectir e pensar

Construir com um propsito

2.4.
Arquitectura de informao
2.4.1.Refere-se estrutura ou organizao de um website
2.4.2.Descreve as formas como as vrias pginas se relacionam
2.4.3.Assegura que a informao est organizada
The entire user experience, inclunding the structure of the site, is built on
na understanding of your objectives and the needs of your users, () by the
time you can tell that you need to rework the arquitecture, your users are
already.
in The elements of user experience, pg. 91

2.4.4.Requisitos
2.4.4.1. Conhecer a audincia
2.4.4.2. Que funcionalidades sero utilizadas?
2.4.4.3. Definir as reas de contedo
2.4.4.4. Discutir com a equipa utilizando todos os dados
2.4.4.5. Organizar as reas de contedo de forma descritiva
2.4.4.6. Agrupar contedo
2.4.4.7. Criar o mapa do site
2.4.4.8. Definir a estrutura do menu
2.4.4.9. Nomear as reas
2.4.4.10.
Criar wireframes
Especificao funcional de requisitos
Descrevem as funcionalidades do website desejadas pelos clientes ou
seja, o que se espera que o website faa
2.4.5.Exemplos de requisitos funcionais:
2.4.5.1. Formulrios de contacto
2.4.5.2. Registo de utilizadores

2.4.5.3. Pesquisa
2.4.5.4. Upload de ficheiros

2.4.6.Tipos de arquitectura
2.4.6.1.
2.4.6.2.
2.4.6.3.
2.4.6.4.

Hierrquicas (relaes explcitas)

De matriz
Orgnicas
Sequenciais

3.Ferramentas de prototipagem online

3.1.
Baixa definio: paper sketch
3.1.1. Vantagens
3.1.1.1. Colaborativa
3.1.1.2. Todos podem desenhar
3.1.1.3. Todos podem participar
3.1.1.4. Sem necessidade de utilizar um computador
3.1.1.5. Descartvel, fcil reviso
3.1.1.6. Pode acontecer em qualquer lado, a qualquer altura
3.1.1.7. Portabilidade
3.1.2. Desvantagens
3.1.2.1. Esttico
3.2.
Mdia/baixa definio: wireframes
3.2.1. Vantagens
3.2.1.1. Permite testar a navegao
3.2.1.2. Verificar como o contedo assenta na pgina
3.2.1.3. Redifinir o UI e elementos interactivos
3.2.1.4. Avaliar o desempenho geral da pgina atravs de teste
de usabilidade
3.2.1.5. Determinar requisitos de desenvolvimentos/programao
3.2.2. Desvantagens
3.2.2.1. Esttico
3.3.
Grids
3.3.1. 960GS
3.3.2. Grids = ordem/harmonia
3.3.3. Previsibilidade/fluidez
3.3.4. Consistncia
3.3.5. Faceta colaborativa
To say a grid is limiting is to say that language is limiting or typography is
limiting

4.Fireworks
4.1.
Tipografia, cor e forma
4.1.1.Websafe fonts

4.1.1.1. Serif fonts

4.1.1.2. Sans-serif fonts
4.1.1.3. Google Web fonts (impact on load time)
4.1.2.Web colors

5.Desenho de interfaces
5.1.

Imagem vectorial (ficheiro geomtrico)

Imagem criada atravs de uma sequncia de comandos, ou

instrues matemticas que colocam linhas e formas num plano
bidimensional ou trimensional.
As instrues/comandos so guardados em sequncias de vectores.
5.2.

Imagem Bitmap (ficheiro mapa de bits)

Imagem criada atravs de uma matriz de pontos (pixels) onde cada

ponto tem uma cor prpria (descrita atravs de bits).
Web = 72dpi

6.Infografia interactiva
Uma imagem vale mais que mil palavras
6.1.