Resumo Design de Interface

Prévia do material em texto

Resumo Design de Interface 
 
"Interfaces" são SUPERFÍCIES DE CONTATO entre duas entidades. Como conceito mais 
específico em plataformas digitais, refere-se à criação de imagens, sons e palavras que podem 
ser manipulados em telas. A interface atua como uma espécie de tradutor, mediando entre as 
duas partes, tornando uma sensível para a outra. 
O objetivo das interfaces digitais seria dar sentido à informação em sua forma bruta. 
 
Doug Engelbart​ ​foi o inventor do mouse e pioneiro na interação entre humanos e computadores. 
Indo além da representação de um documento, ícone ou janela, ele criou a manipulação direta; 
 
Hoje as interfaces gráficas digitais podem ser: FlatDesign (um estilo minimalista) ou 
Skeumormfismo (elementos gráficos que utilizam recursos visuais do mundo real). 
 
O objetivo do designer de Interfaces é projetar interfaces que proporcionem a melhor experiência 
do usuário (UX) ao consumidor. Ex.: 
● Sites​ -​ ​Institucionais / Hotsites / Blogs / Plataformas de interação social 
● Portais​ -​ ​Negócios / Notícias / Conhecimento 
● Apps​ - Desktop / On-line - SAAS (Software as a service) / Mobile 
● Vendas​ - E-commerce / M-commerce / S-Commerce / F-Commerce / T-Commerce, 
V-Commerce 
 
Os ​pilares da internet​ são: design, front-end, back-end e gerenciamento. 
O ​front-end​: Organização (HTML | XML); Interagindo (JAVASCRIPT); Maquiando (CSS); 
Aparecendo (SEO | SEM ); “Conteúdo é rei”. 
 
 
Na dúvida, a preferência é a da convenção. 
 
 
Design de Interação 
Os princípios básicos de design ajudam a controlar a diagramação de páginas, eles são: 
 
● Proximidade: ​itens relacionados entre si devem ser agrupados. Quando vários itens estão 
próximos, tornam-se uma unidade visual. 
● Alinhamento: ​cada elemento deve ter uma ligação visual com outro elemento da página. 
isso cria uma aparência limpa, sofisticada e suave. 
● Repetição: ​o princípio da repetição afirma que algum aspecto do design deve repetir-se no 
material inteiro. Pode ser considerada como "consistência". 
● Contraste: ​Cria-se quando dois elementos são diferentes. Se eles diferirem um pouco mas 
não muito, não acontecerá o contraste e sim um conflito. 
 
As 10 Heurísticas de Nielsen 
 
1. Feedback - o sistema deve informar continuamente ao usuário sobre o que ele está 
fazendo. 
2. Falar a linguagem do usuário - as palavras tem que ser entendidas e organizadas 
conforme o modelo mental do usuário. 
3. Saídas claramente demarcadas - O usuário deve poder controlar o sistema (abortar, 
desfazer e retornar uma operação). 
4. Consistência - Um mesmo comando ou ação deve ter sempre o mesmo efeito e estar no 
mesmo lugar. 
5. Prevenir erros - Evitar situações de erro. 
6. Minimizar a sobrecarga de memória do usuário - o sistema deve mostrar os seus 
elementos sem a necessidade de lembrar um comando específico. 
7. Atalhos - Para usuários experientes executarem as operações mais rapidamente. 
8. Diálogos simples e naturais - apresentar exatamente a informação que o usuário precisa 
no momento. 
9. Boas mensagens de erro - Linguagem clara, para ajudar o usuário a entender e resolver o 
problema. 
10. Ajuda e documentação - O ideal é que um software seja tão fácil de usar (intuitivo) que não 
necessite de ajuda. Se for necessário, deve estar facilmente acessível. 
 
O que é grid? 
É uma malha composta por linhas guias, colunas e margens que servem para definir as relações 
de alinhamento, proporção e posicionamento dos elementos de um layout 
- Coluna​: áreas verticais que contêm textos, imagens, vídeos e elementos interativos. 
- Módulos​: divisões separadas por espaços uniformes, possibilita grids ordenados e 
repetitivos. 
- Margens​: áreas protetoras periféricas que representam a quantidade de espaço entre a 
borda e o conteúdo do site. 
- Zonas Espaciais​: agrupamentos de módulos ou colunas que podem formar áreas 
específicas para textos, anúncios, imagens ou outras informações. 
- Guias Horizontais​: não são efetivamente linhas, podem ser espaços ou elementos que 
guiem o usuário pela tela. 
- Marcador​: auxilia o usuário a navegar pela página, são eles: navegação global, local, de 
rodapé e de contexto, bem como títulos e ícones. 
 
Proporção Áurea​ - A Escola Pitagórica observou a ocorrência de um padrão matemático tão 
frequentemente na natureza que, segundo criam, era divinamente inspirado. 
 
Wireframes​ são rascunhos de uma tela que posicionam a informação e a navegação, é o 
esqueleto que organiza os elementos de interface, sem a interferência do projeto visual. 
Em projetos que envolvem interfaces gráficas digitais, são os documentos de representação da 
organização, diagramação e funcionamento dos elementos de uma página. Eles podem ser de 
baixa ou alta fidelidade 
 
 Vantagens Desvantagens 
Alta fidelidade Validação consistente e 
persuasiva junto ao cliente, 
Facilita a compreensão de 
montagem do layout e Possibilita 
testes mais fiéis com usuários. 
Requer esforço e tempo, o que 
pode atrasar o processo e 
aumentar custos; e o foco pode 
se desviar prematuramente da 
arquitetura de informação para a 
interface e design visual 
Baixa fidelidade Rapidez, Baixo custo, Liberdade 
para o designer e Fácil de ser 
refeito se houver necessidade 
Pouca credibilidade, Maior 
margem de erros, Difícil de ser 
testado, Exige mais de 
programadores e designers, 
Requer desenvolvimento em 
conjunto, e é Menos intuitivo. 
 
 
Para que servem? 
● Arquitetos de Informação:​ usam na forma de protótipo em testes de usabilidade. 
● Diretores de Criação:​ usam como base gráfica para o desenvolvimento do Layout. 
● Redatores:​ preenchem a estrutura com o conteúdo. 
● Desenvolvedores:​ irão fazer tudo funcionar. 
● Clientes:​ validam tudo de acordo com os requisitos do projeto. 
● Usuários:​ que irão usá-lo como protótipo nos testes de usabilidade. 
 
Sketches: ​ são os esboços, eles possuem baixa fidelidade 
Representação: ​ é o Wireframe que é um protótipo 
Identificação: ​são mockups que consistem em uma versão mais detalhado que o wireframe 
 
Utilizando a metáfora do iceberg defina as etapas de um projeto correspondentes a cada camada: 
 
A-​ a primeira camada, a que fica acima da superfície da água é o 
que os usuários veem, é o visual, o design, a interface do usuário. 
B -​ Wireframes 
C-​ Arquitetura da informação 
D-​ escopo do projeto