Curso Design de Interface

Conceitos Gerais
Grid - Serve como linhas base para posicionar os elementos do layout

Wireframe

- Esboço do projeto que demonstra a arquitetura do site, sistema ou aplicativo.

- É nesta fase que o escopo, validação de ideia e requisitos devem ser feitas junto ao
cliente, para evitar dores de cabeça durante o desenvolvimento do projeto

- Exemplos de Wireframe de baixa, média e alta fidelidade estão disponíveis no EBOOK

do curso. (Página 8)

User Experience (UX)

- A Experiência do Usuário é uma forma de englobar todos os aspectos da interação do

usuário final com a empresa.

- Ela é responsável por estudar as melhores maneiras de atender as necessidades dos

usuários e deixá-los satisfeitos com todo o processo.

User Interface (UI)

- Refere-se a toda parte visual de uma interface tanto digital como física

Architecture Information (AI)

- É a área de estudo responsável por organizar as informações de uma interface de

forma a facilitar seu entendimento pelo usuário

Interação Ser humano Computador (IHC)

- É a disciplina que estuda o comportamento do ser humano e sua interação com a

máquina. Engloba não só design, mas psicologia, computação e engenharia

Usabilidade

- Usabilidade é a capacidade do Sistema em fazer com que o usuário tenha sucesso na

execução de suas tarefas.

Briefing
Perguntas Importantes:
1- Qual o nome da empresa?

2- Qual o segmento da empresa?

3- Qual o público-alvo da empresa?

4- O projeto se refere a (1) site, (2) sistema ou (3) aplicativo? Ou todos?

5- A empresa possui Marca ou Manual de Identidade Visual?

6- Qual o objetivo do projeto?

7- Quais são os 3 principais concorrentes da empresa? (Estudar os Concorrentes)

8- Quais são as 3 referências de sites modelo?

9- Qual o prazo de lançamento do produto?

10- Vamos fazer um contrato, ok?

Sites para fazer um Briefing

https://www.typeform.com/

https://www.survio.com/br/

https://pt.surveymonkey.com/mp/how-to-create-surveys/

googleforms

Site para calcular preço de um projeto freelancer

https://www.99freelas.com.br/apps/calculadora-freelancer

Figma
 Na tela inicial, no menu Community você tem acesso a UI kits, Wireframes,
Design Systems e mais.
 A Artboard é chamada de Frame
 O Zoom é Segurando o CTRL
 O Figma tem mais opções de ajuste de Grid do que no Adobe XD
 Clicando duas vezes em cima de uma imagem, você pode fazer uma breve
Edição de imagem
Arquitetura da Informação
 O Principal objetivo é tornar as informações mais fáceis de compreender.
 Facilitar a compreensão das informações
 Estruturar o Conteúdo
 Definir a navegação entre as seções
 Definir a interação com o conteúdo
 Trabalhar alinhado com a Experiência do Usuário (UX)
 A Primeira etapa antes de começar um projeto, é saber quem é o público alvo e
para qual ou quais plataforma será projetado ?

Fundamentos da AI

- São eles: Contexto, Conteúdo e Usuário.

1. Contexto

- Se Trata da Jornada de Consumo

 Objetivo do Cliente
 Exigências
 Expectativas
 Restrições ( o que não deve ter no projeto )
 Tecnologias aplicadas

2. Conteúdo

 Formatação do Produto
 Saber a quantidade de conteúdo
 Como será a entrega do conteúdo ( email marketing, video aula, etc )
 Como será a estruturação do conteúdo

3. Usuário

 Realizar testes com usuários do públivo alvo

 Entender a maneira que o Usuário usa o projeto

Sistema de Organização

 Agrupamento e a forma de categorizar as informações

 Exemplos : (OLX, Cifras Club, CVC)
Sistema de Rotulação

 Apresentação das informações ( Título )

Sistema de Busca

 Perguntas que o usuário pode fazer e como ele recebe as respostas

 Parte fundamental da Experiência do Usuário
 Entenda o que os usuários buscam de verdade! E entregue!

Obs: Google Adwords = Ferramenta para saber saber mais sobre buscas
( Planejador de Palavras-Chave)

Usabilidade
 Facilidade de uso da interface.
 Facilidade de aprendizado na utilização do Produto.
 Facilidade de memorizar a utilizazção do Produto.
 Realizar as Tarefas de forma rápida e eficiente.
 Minimizar a taxa de erros.
 Maximizar a satisfação do usuário.

4 Príncipios da Usabilidade

 Encontrar as informações (auxiliado pela AI)

 Entender as informações (auxiliado pela forma de apresentação do conteúdo,
web writing)
 Prazer na Leitura ( Prazer na Leitura das informações do projeto )
 Realização de Pesquisas ( auxiliado por localização e formato adequados do
procedimento de busca e apresentação de qualidade dos resultados)

Testes de Usabilidade

 É uma técnica de avaliação para o seu produto.

  O Teste deve ser realizado apenas com uma Pessoas que façam parte do
Público Alvo do produto.
 Roteiro de Tarefas ( Anota em um papel todas as Tarefas que o usuário terá que
realizar )
 Anotar a experiência do usuário enquanto usa o produto. ( Filmar suas
expressões faciais para identificar uma possível dificuldade no uso, Anotar todas as
dificuldades de uso)
 Os testes podem ser presencialmente, lado a lado. Ou remotamente gravando
a tela do usuário e suas expressões faciais.

Análise de Nilsen e Regras de Ouro

 1. Feedback – Visibilidade do Estado do Sistema

- O Sistema deve informar sempre ao usuário o que ele está fazendo.
- 10 Segundos é limite para manter a Atenção do usuário.

 2. Falar a linguagem do usuário – Equivalência entre o Sistema e o mundo real

- As Informações devem ser organizadas conforme o modelo mental do usuário

 3. Saídas claramente demarcadas – Liberdade e controle do usuário

- O usuário controla o sistema, ele pode, a qualquer momento, abortar uma
tarefa, ou desfazer uma operação e retornar ao estado anterior

 4. Criação de Padrões
- 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.
- Manter um padrão visual para as cores, Layout e fontes. Utilizar a mesma
terminologia em menus.

 5. Prevenir erros – Minimizar o Risco de erro do lado do usuário

- Evitar situações de erro.
- Conhecer as situações que mais provocam erros e modificar a interface para
que estes erros não ocorram.
- A interface não pode dar vias para o usuário cometer erros graves, e caso
ocorram erros, devem haver mecanismos que tratem, corrijam na medida do
possível, e caso não seja possível, instrua o usuário para uma possível solução.

 6. Baixa carga de memorização

- 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.
- O sistema deve conter uma interface simples para memorização. Para isso
requer uma boa Estrutura e Equilíbrio para relacionar elementos e facilitar a
memorização subjetiva das telas, sem exigir esforço.

 7. Atalhos
- Para usuários experientes executarem as operações mais rapidamente.
- Abreviações, teclas de função, duplo clique no mouse, função de volta em
sistemas hipertexto.

 8. Diálogos simples e naturais

- Deve-se apresentar exatamente a informação que o usuário precisa no
momento, nem mais nem menos.
- A seqüência da interação e o acesso aos objetos e operações devem ser
compatíveis com o modo pelo qual o usuário realiza suas tarefas.

 9. Boas mensagens de erro

- Linguagem clara e sem códigos.
- Devem ajudar o usuário a entender e resolver o problema

- Não devem culpar ou intimidar o usuário. ( Colocar a culpa no sistema)

 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ária a ajuda deve estar facilmente acessível on-line.
  11. Reversão de ações
- Sempre que possível, as ações devem ser reversíveis, de forma que tranqüilize
o usuário e lhe dá mais coragem para explorar o sistema.

Obs: Acessar as checklists de Usabilidade e acessibilidade do usuário

Obs: Conferir os 8 Critérios de Ergônomicos no PDF do curso

Experiência do Usuário (UX)

 Facilitar a Experiência do Usuário na utilização do projeto.
 Encontrar os problemas, e Encontrar o Caminho para resolver o problema.
 O UX Designer precisa entender bem o processo de criação do produto, da
estratégia. Se comunicar bem com toda a equipe. E principlamente entender
de pessoas.

Fundamentos da UX

 Design de Interação
- A base para a utilização de Qualquer produto é a Interação.

 Interface do Usuário
- Reúne todos os elementos que o Usuário irá interagir com a interface. Botões,
listas, imagens, menus,etc.

 Design Visual
- Aspectos de tipografia, ilustrações, layout e até espaços em branco. Questões
de estética.

 Usabilidade
- Diminuir a carga cognitiva e a curva de aprendizagem é o mínimo.
  Arquitetura de Informação
- Corresponde a criação de uma estrutura que permite que o Usuário saiba onde
ele está, para onde tem que ir e o que tem que fazer.

Elementos da UX

1. Estratégia
- Expectativas do Usuário perante o produto. Objetivo do dono do site.
Abordagem do produto.

2. Escopo
- As funcionalidades e conteúdo que o produto terá.

3. Estrutura
- Páginas, telas que o website terá, hierarquia das páginas, caminhos do Usuário.
(AI)

4. Esqueleto
- Posicionamento dos elementos interativos na tela, Quais links estarão no
menu.

5. Superfície
- Desenho da Interface (UI), Como será a apresentação dos elementos. (UI)

Ferramentas de UX

- Para Prototipação (MarvelAPP, QuantUX)

- Criar sempre um Guia de Estilo.

OBS: Utilizar animações para deixar o produto mais sofisticado e interativo, causando
assim uma melhor experiência para o usuário.

Não é para encher o site de animações, a animações são importantes em áreas mais
desgastantes, para o produto ficar mais divertido e minimizar o desgate do usuário.
Sites para pegar exemplos de animações:

https://tympanus.net/Development/TextInputEffects/

https://tympanus.net/Development/TextInputEffects/index2.html

Documentos do UX

 Briefing.
 Análise do Concorrentes identificando as funcionalidades de cada um.
 Brainstorm com o time.
 Fluxo de telas do usuário, toda a parte navegacional.
 Análises Heurísticas
 Teste de Usabilidade.
 Biblioteca de Padrões e Guia de Estilo.

Iniciando o Wireframe
 Entender o Briefing.
- Saber tudo que o cliente deseja Inserir neste processo, sem exagerar na
Quantidade de informações.

 Pesquisar bem antes de iniciar o esboço

- Pesquisar concorrentes, Sites de referência, modelos parecidos, crie um painel
semântico com as referências para o projeto

 Esboço inicial ( Wireframe médio )

 Validação da Ideia com o Cliente (Aprovação 1)
 Ajustes, Produção UI (Aprovação 2)

Design Responsivo = é uma técnica que permite que a interface de um site ou

aplicativo seja adaptada em qualquer tipo e tamanho de tela, tornando-a responsiva,
ou seja, sem distorções ou inacessibilidade no conteúdo em todos os dispositivos.

Mobile First = Você vai projetar o site primeiro para o mobile.

Pesquisa e Esboço = Após analisar o Briefing, desenha em uma folha de papel todas as
inspirações, e itens da interface. Após realizar a pesquisa com o concorrentes e
analisar o que tem de bom em cada um, e oq todos tem em comum, começar esboço
no papel.

Design Mobile
Padrões de interface mobile

-https://material.io/ (Android)

-https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/
color/ (Apple)

-https://pixplicity.com/dp-px-converter (Calcular Espaçamentos da Interface) DP/PX

Converter

- Barra do Sistema Operacional Android = 96px