Apresentação de conclusão do curso "UI Design Patterns: Usabilidade em Interfaces Mobile", fornecido pela Agência Econverse para aprimoramento de seus funcionários.

1. Padrões de Design para
Interfaces Mobile
Soluções elegantes para
problemas comuns de usabilidade

2. UX DESIGNESTRATÉGIA CENTRADO
NO USUÁRIO
ICONOGRAFIA
MAPA DE EMPATIA
DESIGN VISUAL SISTEMA DE DESIGN
PADRÕES DE DESIGN
PESQUISA CENTRADA
NO USUÁRIO
ACESSIBILIDADE
PERSONAS
(USER EXPERIENCE DESIGN)
(USER INTERFACE DESIGN)PROTOTIPAÇÃO
MODELOS MENTAIS ...
TIPOGRAFIA
UI DESIGN

3. Necessidades
ImpedimentosFrustrações
Para criar um Padrão de UI Design.
Limitações Propósito
Objetivos

4. Aplicando leis importantes para aproveitar ao máximo a
experiência do usuário.
Lei de Fitts (+ longe e pequeno = + tempo)
Lei de Hick (+ alternativas = + tempo)
10 Heurísticas de
Nielsen
Visibilidade do status do sistema
Compatibilidade entre o sistema e o mundo real
Controle e liberdade para o usuário
Consistência e padronização
Prevenção de erros
Reconhecimento ao invés de memorização
Eficiência e flexibilidade de uso
Estética e Design minimalista
Ajude os usuários a reconhecerem erros.
Ajuda e documentação

5. Mapa de Usabilidade Mobile

6. PADRÕES DE DESIGN PARA INTERNFACES DO USUÁRIO PADRÕES DE DESIGN PERSUASIVO
UI Design
Padrões
ENTRADA DE DADOS
NAVEGAÇÃO
PRIMEIROS ACESS0S
SOCIAL
FORMULARIOS
ABAS
CADASTRO
REPUTAÇÃO
MENUS
ORIENTAÇÃO
INTERAÇÕES
EXPLICANDO O PROCESSO
Definições
Arrastar e Soltar
Pré-visualização
Guias do módulo
Guias de Navegação
Registro preguiçoso
Registro de conta
Paywall
Conquistas colecionáveis
Entre os melhores
Depoimentos
Menu suspenso vertical
Menu suspenso horizontal
Menu Acordeão
Passo a passo
Lousa em branco
Marcas de treinador
Lista de amigos
Fluxo de atividades
Bate-papo
Mago
Passos à esquerda
Medidor de completude
OUTROS VIESES
FUNDAMENTOS DE
RECOMPENSA
COMPREENSÃO
TEMPO DE AÇÃO
DESIGN DE JOGABLIDADE
ATENÇÃO
SOCIAL
AVERSÃO A PERDA
Aversão à perda
Viés do Status-Quo
Viés do otimismo
Recompensas fixas
Recompensas variáveis
Redução
Tunelamento
Efeito de isolamento
Kairos
Loops de feedback
Desencadear
Eventos Periódicos
Desafio apropriado
Níveis
Sequenciamento
Chunking
Reconhecimento sobre recall
Autoridade
Gosto
Compromisso e consistência
Ilusão de controle
Necessidade de fechamento
Regra de ponta final
CONHECIMENTO
MECÂNICA DE JOGO
PERCEPÇÃO E MEMÓRIA
COMENTÁRIOS

7. BREADCRUMBBUSCA
Padrões UI Design
usados na Econverse
O usuário está procurando
algo específico e não sabe
onde está ou quer uma
rota direta para lá.
O usuário precisa conhecer
sua localização na
estrutura hierárquica do
site para possivelmente
voltar para um nível
superior na hierarquia.
Uma barra de pesquisa no
canto superior direito, esse
recurso encontra conteúdo
relacionado no site,
economizando o tempo do
usuário para ir aonde ele
deseja.
Mostre os rótulos das seções
no caminho hierárquico que
levam à exibição da página
atual.
Para alguns sites a melhor
forma de utilizar esse
Padrão é deixar sempre a
disposição do usuário, sem
ter que pensar muito.
Use quando a estrutura do
site segue uma estrutura
hierárquica estrita de
conteúdo formatado
semelhante.
PROBLEMA PROBLEMA
SOLUÇÃO
SOLUÇÃOAPLICAÇÃO
APLICAÇÃO

8. FAVORITOSMENU
LATERAL
Padrões UI Design
usados na Econverse
Demonstrar os links mais
importante da pagina sem
ocupar espaço dos demais
conteúdos.
O usuário deseja selecionar
itens para consumo
posterior
Criar um botão onde
forneça esses links numa
aba secundária dentro da
mesma pagina.
Forneça uma maneira de os
usuários salvarem itens de
interesse particular para
curadoria ou consumo
posterior. Considere permitir a
marcação ou adição de
descrições ou outros
metadados para ajudar os
usuários a recuperar itens
posteriormente.
Deixar o botão na lateral
esquerda superior, onde
terá acesso fácil e
garantido do usuário.
Use em produtos, matérias
e conteúdo que poderá ser
acessado novamente dentro
de um campo que ele
administre com facilidade.
PROBLEMA
PROBLEMA
SOLUÇÃO
SOLUÇÃO
APLICAÇÃO
APLICAÇÃO

9. CARTÕES
FILTRO
Padrões UI Design
usados na Econverse
O usuário precisa filtrar
categoricamente os dados
exibidos.
O usuário quer acessar
algo mas ainda não tem
ideia de qual conteúdo vai
encontrarForneça entradas suspensas que
apresentem as categorias pelas
quais o usuário pode filtrar os
dados configurados por. Depois
que o usuário seleciona uma
categoria e clica em "Filtro" ou
algo semelhante (quando o
usuário envia o formulário),
apenas a linha que pertence à
categoria selecionada é exibida.
Exiba pontos de entrada para
conteúdo detalhado e variado
em formas semelhantes. Um
cartão pode conter uma foto,
texto e um link sobre um único
assunto.
Use quando você tiver um
conjunto de dados muito
grande de resultados que é
muito grande para mostrar
em uma página
Use para exibir conteúdo
composto por diferentes
elementos
Use para exibir elementos
cujo tamanho ou ações
suportadas variam, como
fotos com legendas de
tamanho variável.
PROBLEMA
PROBLEMA
SOLUÇÃO
SOLUÇÃO
APLICAÇÃO
APLICAÇÃO

10. Anti-Padrões
Ofereça acesso com um clique à
página principal: permita que os
usuários retornem facilmente à
página inicial do seu aplicativo
móvel, de maneira rápida e
intuitiva.
São classes de más soluções
comumente reinventadas para
os problemas. Eles são
estudados como uma categoria
para que possam ser evitados
no futuro.
Não solte seus usuários em um
oceano de botões, você esta
forçando ele a pensar demais e
talvez nunca mais volte ao site.
Os usuários esperam que ícones
familiares ofereçam recursos
específicos, portanto, escolher
um ícone familiar e usá-lo de
maneira desconhecida causará
confusão.
VOLTAR A HOME
OCEANO DE BOTÕES
ÍCONES FAMILIARES

11. Estudo de Caso
Após estudos de usabilidade, foi
realizado alterações nos padrões de
design da interface do aplicativo, onde
melhorou totalmente a usabilidade para
os usuários.

12. Vlamir Carneiro Jr.
Designer de Interface
OBR
IGA
DO
OBR
IGA
DO
Perguntas?
Fiquem à vontade