Resumo Design de Interface

Prévia do material em texto

É preciso entender o conceito de interface.
Steven Johnson explica que:
1. Tecnicamente falando, a "interface" do livro são palavras impressas numa página, e a "interface" do cinema são imagens em celuloide.
EM TERMOS AMPLOS
"interfaces" são SUPERFÍCIES DE CONTATO entre duas entidades.
2. Design de interfaces informacionais, como conceito mais específico no que tange a computadores e outras plataformas digitais, refere-se à criação de imagens, sons e palavras que podem ser manipulados em telas.
Steven Johnson diz ainda que, hoje, o termo [interface] se refere a softwares que dão forma à interação entre usuário e computador. A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra.
E qual seria o objetivo das interfaces digitais?
Dar sentido à informação em sua forma bruta.
Em 1968 Doug Engelbart se postou diante de matemáticos, diletantes e hippies no San Francisco Civic Auditorium e fez uma demonstração de um produto que mudou o curso da história das interfaces.
Ele foi o inventor do mouse e pioneiro na interação entre humanos e computadores.
1. Foi além da representação de um documento, ícone ou janela. Ele criou a manipulação direta;
2. Não era mais preciso digitar comandos obscuros para mandar o computador fazer algo, bastava agora apontar e você mesmo poderia fazer.
Sistema de janelas em geral
O território que vemos através da janela não é a paisagem habitual de planícies, árvores e oceanos, mas uma paisagem de informação cujos marcos são palavras,
números, gráficos, imagens...
Os nossos velhos hábitos de organizar informação são subvertidos pela exposição a um sistema que tem por modelo não o lápis, mas o modo como a mente humana
processa a informação.
Interfaces gráficas digitais na atualidade
Flat Design X Skeumorfismo
O flat design é um estilo de design minimalista (o foco é na redução do design para o essencial), exemplo: o design do Windows Phone 7 e windows 8.
Do grego skeuos (recipiente ou ferramenta) e morphe (forma), é a palavra que se refere aos objetos criados a partir de outros elementos. Começou a ser utilizada no meio digital para se referir aos elementos gráficos que utilizavam recursos visuais do mundo real.
Objetivo do designer de interfaces
Projetar (interfaces) que proporcionem a melhor experiência do usuário (UX)
ao consumidor de nossos produtos.
Sites
Institucionais / Hotsites / Blogs / Plataformas de interação social
Portais
Negócios / Notícias / Conhecimento
Apps
Desktop / On-line - SAAS / Mobile
Vendas
E-commerce / M-commerce / S-Commerce / F-Commerce / T-Commerce / V-Commerce
Internet
Pilares:
Design
Front-end
Back-end
Gerenciamento
Front-end
Organização (HTML | XML)
Interagindo (JAVASCRIPT)
Maquiando (CSS)
Aparecendo (SEO | SEM )
“Conteúdo é rei”
Para que saber quais são os Padrões da Web?
Na dúvida, a preferência é a da convenção.
A Marca
Surgiu derivada da cultura ocidental de leitura: da esquerda para a direita, de cima para baixo.
A Busca
Os dois elementos que as pessoas procuram são: logo e busca. A busca é um dos recursos mais importantes de um website grande.
Navegação Global
Popularizada pela Amazon.com e desenhadas de forma a sugerir guias, abas ou fichas (metáforas do mundo real).
Navegação Contextual
A utilização da navegação na coluna esquerda não é o posicionamento mais utilizado, entretanto, sua utilização ainda é recomendada.
Navegação Estrutural
Utilizado como navegação auxiliar, sempre usa de diferentes formas para separar seus links (essas formas devem representar continuidade).
Princípios Básicos de design
Ajudam a controlar a diagramação de suas páginas, são eles:
• Proximidade
• Alinhamento
• Repetição
• Contraste
Proximidade
Itens relacionados entre si deveriam ser agrupados. Quando vários itens estão próximos, tornam-se uma unidade visual, e não várias unidades individualizadas.
Alinhamento
Nada deve ser colocado arbitrariamente em uma página. Cada elemento deve ter uma ligação visual com outro elemento da página.
Quando colocar outros itens na página, é importante que cada um deles tenha um
alinhamento visual com outro item 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 uma fonte em bold, uma linha fina, um elemento de design, relações espaciais etc.
Pode ser considerada como "consistência", na verdade seria um esforço consciente para unificar todos os elementos do design.
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.
O contraste é um ponto crítico na organização das informações, à primeira passada de olhos o usuário deveria ser capaz de compreender imediatamente o que o layout representa..
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
A terminologia deve ser baseada na linguagem do usuário e as informações devem ser organizadas conforme o modelo mental do usuário.
3) Saídas claramente demarcadas
O usuário deve poder controlar o sistema (abortar uma tarefa, desfazer uma operação e retornar ao estado anterior).
4) Consistência
Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.
5) Prevenir erros
Evitar situações de erro.
6) Minimizar a sobrecarga de memória do usuário
O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, 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
Deve-se apresentar exatamente a informação que o usuário precisa no momento.
9) Boas mensagens de erro
Linguagem clara e sem “floreios”, 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 ou documentação. Se for necessário, deve estar facilmente acessível.
O que é grid?
• Malha composta essencialmente por linhas guias, colunas e margens.
• Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout.
1. Conhecendo os componentes
1.1 Coluna
São áreas verticais que contêm textos, imagens, vídeos e elementos interativos.
1.2 Módulos
São divisões separadas por espaços uniformes, possibilita grids ordenados e repetitivos.
1.3 Margens
São áreas protetoras periféricas. Representam a quantidade de espaço entre a borda e o conteúdo do site.
1.4 Zonas Espaciais
São agrupamentos de módulos ou colunas que podem formar áreas específicas para textos, anúncios, imagens ou outras informações.
1.5 Guias Horizontais
Não são efetivamente linhas, podem ser espaços ou elementos que guiem o usuário pela tela.
1.6 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.
Sketches (esboços) (Baixa Fidelidade)
Muita gente ainda tem receio de assumir o sketch como etapa do desenvolvimento do projeto, por:
• Não dominar a técnica de desenho;
• Considerar algo muito imaturo e muitas vezes infiel ao resultado final da interface.
Não é uma entrega
• Não são entregues ao cliente,
• Servem apenas para os próprios profissionais.
• À medida em que as soluções vão se aperfeiçoando, eles são deixados de lado e substituídos por protótipos mais completos.
Mais sobre grid...
• Grids não são utilizadas apenas para alinhar ou enquadrar, mas também para proporcionar elementos;
• Daí que surgiu a teoria da grid.
O que seria a teoria da grid?
Proporção ÁureaA 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 “estruturas de arame”
São rascunhos de uma tela[...] que posicionam a informação e a navegação[...] É um 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.
Vantagens:
• Demonstrar quais serão as informações e elementos que estão contidos no projeto;
• É muito mais rápida do que construir o layout final.
Tipos de wireframe:
• Baixa fidelidade;
• Alta fidelidade.
Para que servem?
Arquitetos de Informação; que mostram e validam uns com os outros o futuro site, além de usarem na forma de protótipo em testes de usabilidade.
Diretores de Criação; que usam como base gráfica para o desenvolvimento do Layout.
Redatores; que preenchem a estrutura com o conteúdo.
Desenvolvedores; que irão fazer tudo funcionar.
Clientes; que validam tudo de acordo com os requisitos do projeto.
Usuários; que irão usá-lo como protótipo nos testes de usabilidade.
Sketches (esboços) (Baixa Fidelidade)
Identificação Mockup – (versão ainda pouco detalhada do wireframe)
Representação (Wireframe = protótipo de Alta Fidelidade)
Baixa Fidelidade 
Vantagens
• Rapidez
• Baixo custo
• Liberdade para o designer
• Fácil de ser refeito se houver necessidade
Desvantagens
• Pouca credibilidade (principalmente com clientes)
• Maior margem de erros
• Difícil de ser testado
• Exige mais de programadores e designers
• Requer desenvolvimento em conjunto.
• Menos intuitivo.
Alta Fidelidade 
Vantagens
• Validação consistente e persuasiva junto ao cliente
• Facilita a compreensão de montagem do layout e da programação dos aplicativos.
• Possibilita testes mais fiéis com usuários antes da definição do layout.
Desvantagens
• Requer esforço e tempo, o que pode atrasar o processo e aumentar custos
• O foco pode se desviar prematuramente da arquitetura de informação para a interface e design visual
• Pode amarrar o trabalho do designer
Informações importantes a respeito do projeto de interfaces visuais digitais:
1) Distribua o conteúdo em ordem de importância decrescente, de cima para baixo, da esquerda para direita.
2) Lembre-se que já existem algumas convenções. Se necessário, pesquise (de forma crítica) o que já existe.
3) Enumere as páginas do Wireframe/Protótipo.
4)Coloque nomes claros nas páginas do Wireframe e nos arquivos de protótipos, incluindo a data da última revisão.
5) Não sobrescreve arquivos trabalhados. Grave cada um“ (use e abuse do recurso “salvar como” numerando os arquivos, por exemplo : home_wire_9set _001/home_wire_9set_002, etc.)
Acessibilidade
Diz respeito a remover as barreiras que de outra forma excluiriam algumas pessoas de usar um sistema completamente.
• Motivos para exclusão:
– Fisicamente:
• Instalação inadequada do equipamento
– Conceitualmente:
• Não poder entender instruções complicadas
– Economicamente:
• Não poder arcar com os custos de tecnologia essencial
– Culturalmente:
• Metáforas inadequadas
– Socialmente:
• Equipamento indisponível em determinado momento e lugar
• Se pessoas não pertencem a determinado grupo social e não podem entender
mensagens específicas
Usabilidade 
Usabilidade para aplicações desktop
• Efetividade: – precisão e completude com a que usuários conseguem alcançar objetivos (realizar tarefas pré- determinadas) acessando a informação correta ou gerando os resultados esperados;
• Eficiência: – precisão e completude com que os usuários atingem seus objetivos, em relação à quantidade de recursos gastos;
• Satisfação: – conforto e aceitabilidade do produto, medidos por meio de métodos subjetivos e/ou objetivos.
EFICÁCIA
É a capacidade de resolução de problemas associado ao grau de realização dos objetivos. O sistema deve fazer o que eu espero que faça, permitindo:
• uso e alcance de objetivos;
• aprendizagem garantida;
• realização de tarefas; e
• acesso às informações necessárias.
EFICIÊNCIA
O sistema deve auxiliar o usuário na realização da tarefa e, de certa forma, pode ser entendida como velocidade de uso para o alcance do objetivo.
Com relação à ISO 9126 eficiência pode ser quebrada em duas condições:
1- Comportamento em relação ao tempo: atributos do software que evidenciam seu tempo de resposta, tempo de processamento e velocidade na execução de suas funções.
Pergunta chave: Qual é o tempo de resposta e de processamento?
2- Comportamento em relação a recursos: atributos do software que evidenciam a quantidade de recursos usados e a duração de seu uso na execução de suas tarefas.
Pergunta chave A: Quantos recursos são utilizados pelo usuário para concluir a tarefa?
1. Facilidade de aprendizagem: o sistema deve ser fácil de assimilar pelo usuário, para que este possa começar a trabalhar rapidamente;
2. Eficiência: o sistema deve ser eficiente para que o usuário, depois de o saber usar, possa atingir boa produtividade;
3. Facilidade de memorização: o sistema deve ser facilmente memorizado, para que depois de algum tempo sem o utilizar, o usuário se recorde de como usá-lo;
4. Prevenção de erros: o sistema deve prever erros, evitar que os usuário os cometam e, se o cometerem, permitir fácil recuperação ao estado anterior.
5. Satisfação: o sistema deve ser usado de uma forma agradável, para que os usuários fiquem satisfeitos com a sua utilização.
Princípios de usabilidade de Norman
• Visibilidade
• Restrições
• Mapeamento
• Consistência
• Retorno (feedback) 
• Affordance (pistas)