Douglas Santos Silva

Engenharia de Software
 Engenharia de Software

Diferença entre artesanal, profissional e amador

Amador:

Não segue uma regra ou padrões

Não entende muito do assunto apenas faz por prazer

Para que serve a engenharia de software?

Engenharia de software é o estudo que engloba todas as etapas do ciclo de vida de um
software desde a ideação, construção, entrega, manutenção e evolução. Servindo para
entregar no prazo com qualidade seguindo o padrão profissional com alto nível de princípios e
padrões técnicos, visando a qualidade e o desempenho.

• Desenvolvendo softwares e apps

• Gerenciando projetos ligados aos softwares
• Arquitetar o design estrutural dos programas
• Realizar os testes e a manutenção em sistemas
Uma grande falha de software é o bug do milênio pois, quando virou de 1999 para 2000 o
sistema identificou que iriamos de 1999 para 1900 pois, só contabilizava os 2 últimos dígitos do
ano 00 para armazenar memoria

Softwares imaturos
• Não tem treinamento necessário
• Projetos que não são claros
• Não tem ferramentas suficientes
• Os procedimentos não existem
• Os compromissos não são realistas (referente a datas, faltas de competências)
• Forças caóticas
• Sem estabilidade (falta de documentação ou complexidade alta)
• Falta de comunicação

UX: Relacionado com a experiencia e usabilidade

• Trata neurociência / psicologia
• Trata o sentimento
• Colocar no lugar do cliente
• Trabalha com manipulação
• Exemplo de UX na vida: um caminho reto bem bonito, e ter um atalho de barro,
gavetas organizadas da forma que eu quero
Consistências Teclas de salvar sempre vai ser Ctrl + s, consistências na chaleira tudo
tem um motivo
• Feedback clara – se eu clicar salvar tem que deixar claro que salvei ou claro que envie
Legibilidade
• Acessível (deficiências situacionais, temporárias e permanentes)
• Foco no usuário sempre pensando no usuário
• Feedback e iteração sempre o que melhorar
• Não relacionado somente com sites, aplicativos e propagandas
• Intuitiva Não é bom de falar

Convenções do UX
• Exemplo dos pratos na altura do olho (sempre no armário em cima)
• Talheres nas gavetas
• Funciona também na parte de e-commerce
• Mesmo que não entenda nada que está escrito, dá para entender seja com o ícone ou
até mesmo o padrão
UI: Relacionado com o visual
• Cores
• Ilustrações / ícones
• Fotografia
• Tipografia
• Design visual

UI e UX é a ponte entre o Usuário e o Software

Enquanto o UX pensa o que ele percebe:

• Qual o objetivo desse cadastro
• Quem vai preencher
• Qual a melhor forma desse usuário preencher o cadastro
• Wire frame
• Protótipos
• Interação com usuário
• Quantas páginas
• Cenários

UI Pensa no que o usuário ver:

• Cores
• Tipografia
• Layouts
• Visuais
• Formato das inputs
• Diagramação diferentes dos dispositivos

Talvez sua opinião importe: por que quem importa é o usuário

Palavra-chave dessa sprint é Empatia

(Jakob Nielsen, Don Norman e o NN/g)

 Fatores Humanos

Nem sempre as escolhas são suas:

Quando não pensamos no usuário, podemos introduzir o usuário ao erro

Frases negativas como:

“Tem certeza de que não quer lançar uma bomba na terra”

Acaba dando confusão ao usuário

Interface não é só apenas Tela, teclado e mouse

Exemplo: URA

Exemplo de site ruim: User Inyerface - Um experimento de interface do usuário de pior prática

Dicas do que não pode ser feito:

• Jargões
• Inconsistência de design
• Muitas informações ou sobrecarregado
• Labels incorretas
• Nossos sentidos impactam muito no que a gente faz

Característica da visão:

• Cores:

Eu posso ver que quando algo está vermelho ele está na urgência ou importante

• Coisas que mexem/piscam:

Algo que se mexe pode tirar a atenção do usuário ou até mesmo manter o foco neste lugar

• Organização:

Dependendo de como está organizado pode ser difícil ele entender qualquer coisa ou procurar
uma informação X

• Cores de forma incorreta:

Fundo escuro letras claras

Característica do Toque:

A bengala devolve retorno tátil liberando o seu sentido

Exemplo do controle que quando você toma um tiro você entende só pelo controle mexendo

Boas praticas

• Bordas e espaçamento apenas para grupar ou separar

• Precisa ser audível
• O áudio de voz deve ter texto reconhecível
• O texto deve ser ágil

Memoria

• Memória de longo prazo

Nosso HD que fica guardado

E dá para a gente fazer selects com um cheiro, uma música, Trazendo memorias (precisando de
um contexto para conseguir buscar ela)

• Curto prazo

Guarda mais informação (precisamos de bastante coisa para conseguir armazenar)

Exemplo: CPF eu sempre falo de 3 em 3 por que foi assim que eu lembrei e se caso alguém
falar diferente eu posso não conseguir identificar

Dependendo de muita informação que você recebe fica difícil você lembrar de fazer mais para
frente

• Sensorial

Buffer dos nossos sentidos

Quando a gente está conversando e não esquece o que estava falando antes

Ou até mesmo quando a gente vê um filme você utiliza

Modelos mentais:

Exemplo na qual um casal que um gato onde

A mulher: quer o gato para cuidar

O homem: quer que o gato cuide da casa pegando os ratos

Apertar no X fecha a página

Se colocar no lugar do outro

Entender como ele pensa

Como a gente faz isso?

Com pesquisas e entrevistas

Interações emocionais:

7 tipos de inteligência

1. Intrapessoal:
2. Visual
3. Cinético parcial: espaço
4. Musical: com voz
5. Voz com matemática: números
6. Linguística: fala
7. Interpessoal: comunicar com os outros

As interfaces podem manipular os sentimentos para atingir os objetivos específicos

• Pode manipular os usuários com as interfaces

• Um exemplo é colocar uma interface vermelha
• Interação emocional
• Feedback emotivo
• Provoca irritação ou ansiedade
• Exemplo de feedback emotivo pode colocar a pressão para alguém para conseguir
vender um produto e ele comprar no impulso
 Quem está no Controle Humano ou Sistema?

Teve um caso de uma pessoa que pegou 10 celulares e colocou no Waze para criar um transito
fictício simulando que tinha vários carros lá

Interfaces frustrantes

• Do erro
• Quando não faz o que o usuário quer que ela faça
• Quando não atinge as expectativas do usuário
• Informações insuficientes
• Pop-os confusas
• Interfaces Paternalistas (condescendentes) que peguem na mão do usuário
• Muitos passos e do erro e tem que voltar tudo de novo
• Abuso de efeito sonoro
• Número excessivo de
• Interface infantil

Por que evitar que sua interface não seja frustrante?

“Tem muitos sites que faz o que você faz, então é muito fácil o usuário trocar”

Mensagens de erro

• Tem que informar o que está dando errado para que o usuário consiga abrir um
chamado ou entender o que está acontecendo (ou de outras alternativas)
• Linguagem técnica não pode usar
• Tem que deixar o mais legível e entendível o suficiente
• EVITAR ILEGAL, BAD, FATAL, ERRO, INVALIDO, CATRATOFICO
• EVITAR MAISCULO
• MENSAGEM PRESCISAS

Tela de carregamento irrita o usuário

Garantir a atenção do usuário (colocando Loanding, ou no facebook que aparece a página)

Garantir a atenção do usuário quando tem uma pessoa online no facebook aparece, ou até no
whats quando você está digitando aparece
Deficientes situacionais

• Quando alguém está segurando um bebê ela está com deficiente naquela situação
podendo não utilizar o braço que está segurando
• Dirigindo

Deficiente definitivo:

Braço amputado

Deficiente temporário:
braço quebrado

Por que é importante isso?

Exemplo se eu estou fazendo um app para o Uber quero que todo mundo use em várias
situações mesmo em deficiências situacionais
exemplos:

estou saindo do mercado com várias sacolas e quero que meu usuário peça o Uber apenas com
1 mão

Ou até mesmo o Sportyfy que muda as músicas por que você está deficiente situacional e ele
faz isso automaticamente

A gente vai fazer um site para usar na rua?

Então tem que pensar em cores que ficam boas no sol

netnografia

Rosto para gerar empatia

Pesquisar no reclame aqui

Coisas genéricas quando eu tenho mais de 1 usuário (exemplo do uber que tem cores
genéricas)

Sobre o que trata a engenharia de software

Nossa visão pode ser afetada por ilusões?

De acordo com as boas práticas, as mensagem de erro devem ser construídas para que ?

Qual a importante do UX?

O que são deficiências situacionais

Depende do contexto: exemplo dirigindo ele fica deficiente da visão

O que são deficiências temporárias

Exemplo quando quebra o braço e fica temporariamente deficiente

Persona são objetos de estudos de UI

Você tem que visitar as personas para desenvolver uma interface baseada no publico

O que é modelo mental

O jeito que você vê o mundo, tudo o que você aprende ou

O que é o modelo conceitual

Exemplo um livro: a gente vai aprender para

Modelo conceitual?

É o que

Como se chama o esforço que o usuário faz para entender como utilizar uma aplicação?

Esforço cognitivo

Para que serve a jornada do usuário

Saber o passo a passo desde logar.

Para que serve a proto-persona

Para identificar o usuário

 Pesquisa UX

Sem pesquisa não podemos fazer nada

O que fazer

o que as pessoas dizem que fazem

(a gente fala o que a gente gostaria o que a pessoa visse da gente e não o que realmente
somos)

Toda pesquisa começa com uma pergunta ou um problema

How Might We (como podemos)

“como podemos aumentar as vendas de uma plataforma de e-commerce e melhorar a

experiência do usuário?”

A pergunta sempre tem que abranger o negócio e o público do usuário.

Uma aplicação que não existe

Ideia: uma plataforma

Desafio: Garantir a eficácia do ensino e motivação do ensino

HMW (How Might We): como podemos projetar interações envolventes que mantem o aluno
motivado ao aprender online

Temos que fazer um questionário sem usar coisas muito superficiais

Desk Research

É uma pesquisa de baixa custo que envolve a coleta de dados a partir de fontes secundarias
disponíveis publicamente como:

• Relatórios
• Livros
• Artigos
• Web
 Netnografia

Tem uma abordagem qualitativa e envolve a observação e análise das interações sociais

• Redes
• Fóruns
• Comentários de aplicativos
• Comentários em sites de reclamações (reclame aqui)

Perguntas importantes:

• Como identificar persona?

• Quem são?
• Qual a relação dela com o problema?
• Quais as dores e necessidade?

Benchmarking (avaliação comparativa)

Pesquisar projetos semelhantes para conseguir construir o nosso

• Definir objetivo – queremos comparar cores, padrão visual, conteúdo, fluxo de usos
etc.
• Identificar os concorrentes – como ele constrói os textos
• Análise de interfaces
• Pesquisar feedbacks dos usuários – negativos ou positivo reclame aqui
• Documente tudo

Qualitativas e quantitativas

Explorar o pensamento da pessoa

• Qualitativas = Perguntas abertas conversar com as pessoas (não é uma pergunta

fechada que tem sim ou não)
• Quantitativa = Perguntas fechadas (sim ou não ou multiplicas escolhas)

A quantitativa só é boa quando temos que simular o uso (Depois que o site estiver feito
podemos fazer uma pergunta quantitativa para ver se está tudo ok)
 Relembrando os princípios de UX

Pensando no livro (não me faça pensar)

Em UX são definidos:

• Quem são os usuários

• Quais serão as funcionalidades que sua aplicação terá
• Como o usuário utilizara a sua aplicação

As interfaces devem ser autoexplicativas e fácil de entender

Simplifique o máximo possível

Não faça com que os usuários pensem demais

• Sites com navegação complexa

• Formulários extensos e complicados
• Fluxos de compras confusos
• Desorganização no Design (Ui)
• Sites com textos muito complexos

O que o visitante não pode pensar:

• Onde eu estou?
• Onde devo começar?
• Onde eles colocaram o
• Quais as coisas mais importantes nessas páginas
• Por que eles deram nome a isso?
• Isso é um anúncio ou parte do site?

Os usuários não leem, eles escaneiam:

• Estamos sempre com pressa

• Sabemos que não precisamos de tudo (na verdade Precisamos de muito pouco)
• Muito texto na tela prejudica
• Nós não gostamos de saber como funcionam nós vamos direto ao ponto
• Ninguém gosta de lê manual
• A maioria vai tentando com erro e acertos

Por que isso acontece:

• Não é importante para nós

• Se encontramos uma forma que funciona a gente a segue e não tenta de outra forma
Convenções no mundo digital (mesma coisa que metáfora)

Convenções pode ser tanto o hover, navbar no mesmo lugar, nome da página no caminho,
rodapé também é uma convenção

A gente foca nas palavras e expressões

Que se parecem com o que queremos fazer no momento, nossos interesses pessoais e que
causam algum efeito sobre nosso sistema nervoso

Exemplo:

• Sexo
• Grátis
• liquidação
• Além do próprio nome

A vida como ela é

“Mas, meu site tem que ser único! Tem que ser diferente e inovador!”

Quer ousar? cuida para que seu site seja:

• Claro que não tenha curva de aprendizagem

• Acrescente tanto valor que valha a pena curva de aprendizagem

BreadsCrumbs (migalhas de pães)

Wire frame sem Loren is é melhor

 O que é UX Writing

Defina o tom de voz

• como sua empresa vai se comunicar com as pessoas?

• Quem que vai falar com os clientes?

Seja consistente:

• Tem que ser o mesmo tom de voz

Seja conciso:

Quanto mais poder resumir melhor

• Basta preencher seu e-mail favorito abaixo e você instantânea a primeira aula
• Digite seu email para acessar a primeira aula

Dicas:
Evite negação e termos negativos

• Não quero cancelar essa ação

• Quero cancelar essa ação

Comece com o objetivo da ação:

• Clique aqui para acessar sua conta

• Para acessa sua conta, clique aqui

Microcopy UX Writing

• Botões
• Hyperlinks
• Inputs
• Notificações
• Tooltips
• Etc..
 Dark UX

Termo utilizado para descrever práticas de design de interfaces que não são éticas ou são
moralmente duvidosas, pois manipula as emoções ou comportamentos dos usuários de forma
negativa

Onde encontramos práticas de DARK UX

• Jogos que induzem ao pay-to-win

• Estimular compra por impulso
• Vídeos com auto play
• Botões de opt-out escondidos
• Assinaturas de serviços e downloads Indesejados
• Linguagem ambígua para confundir os usuários
• Div’s fantasmas que direcionam clicks para sites indesejados
• Adicionar cartão de crédito para poder utilizar a versão gratuita
 Fontes dia 22/08

Fontes importam, pois se você disser uma frase

“Você será meu” numa fonte bonita parece algo fofo e carinhoso

“Você será meu” numa fonte aterrorizante vai ser assustador ou psicopático

Tem que vê se a fonte é infantil ou séria.

Fonte para produtos de beleza (pode mudar até

Serifa (abinhas)
Sem serifa (Reta)

Fontes Hieraquia

Ajuda a organizar o conteúdo

Exemplo colocar um título em negrito vai dar ênfase

Fonte pesos

Tipografo (o trabalho é criar fontes)

Dependendo da fonte não tem “ç” ou não tem negrito tendo somente o Regular

Proibido

Papyrus e comic sans

Permitido
arial Montserrat (fontes retas)

Comic Sans é para ser utilizada em quadrinhos, porém, por ser muito fácil de acesso ela é
usada em todos os lugares lapides, igrejas, restaurantes
 Organização visual

Bolds e maiúsculos

PARA CONSEGUIR DA MAIS IMPORTANCIA

Bold

Para dar importância, porém, não muita

Organização do 1 ao último

Vermelho para dar destaque e atenção

Perigo

Agrupamento

Aspectos Técnicos

• Hierarquia
• Semelhança e proximidade
• Respiro
• Leitura

Aspectos criativos

• Elegância
• Clean
• Moderno
• Complexo

Tecnica de espaçamentos Múltiplos de 8 (pois a maior das telas que a gente tem são múltiplos
de 8)

Fonte padrão 16 pixels (mesma coisa para fronte)

Preto e branco - balanceado

Amarelo – Otimismo

Vermelho - animante

Verde – pacífico

Azul – confiança

Roxo – criativo

Laranja – amigável

Laranja e azul juntos é bom para entretenimento

Azul traz de mistério e confiança

laranja sensação de ação aventura e entusiasmo

site bom para definir as cores complementares

Adobe Color - https://color.adobe.com/pt/

Palleton - https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Color design.io - https://colordesigner.io/

Basear site

Dribbble - https://dribbble.com/shots

Awwwards - https://www.awwwards.com/

Pinterest

Contraste check do figma

Objetivos gerais das cores

• Contrate
• Hierarquia
• Informação
• Estilo – design impacto