Casualidade, tendência e padronização de interfaces

CASUALIDADE, TENDÊNCIA E
PADRONIZAÇÃO DE
INTERFACES
Uma reflexão sobre padrões de interfaces e o
uso do Bootstrap Twitter

QUEM?
Daniel Corrêa
Analista de Sistemas
Arquiteto de Informação
Joomleiro desde o Mambo
UFMG
Atual campeão brasileiro
http://danielcorrea.me
@_danielcorrea

O QUE?
Vamos falar um pouco sobre:
Arquitetura de Informação
Organização da Informação
Tendência e Casualidade
Aproximação e Conectividade
UX
Bootstrap Twitter

FRENETICÍSSIMO
O que é usado hoje ainda o será nos
próximos dois anos ou até mesmo nos
próximos seis meses?
Como projetar algo que seja “usável”
por vários anos?

O NOVO
Existe um processo evolutivo e de
aceitação antes de qualquer nova
idéia ou produto.
Ninguém acorda e, repentinamente,
tem a idéia do novo.

TENDÊNCIAS
Cíclica Contínua
Pode ser interrompida por
algum fator limitador
Pode se repetir

IMPOSIÇÃO DE LIMITES
A tecnologia é responsável pela
imposição de limites e criação de
novas tendências.
O uso de novos materiais, métodos
de fabricação, redução de tamanho
e peso, e modelos de negócio
podem criar novas opções de design
e, mudar a forma de utilização.
#manipulaçãoDireta

TENDÊNCIAS
Anos atrás, a formalidade era algo
quase que imprescindível.
Usar um colete sob um terno era
comum.
A casualidade tem ganhado espaço,
principalmente na cultura ocidental.
#DressCode

CASUALIDADE
Que é relativo a situações ou
contextos em que há familiaridade ou
descontração.

REFLEXO DIRETO SOBRE A UX
Windows  Google 

SENTIMENTOS
Amizade
Respeito
Segurança
Confiança
Interação
União
Simpatia
Colaboração
#sentir-seParte

CASUALIDADE EM INTERFACES
Projetos recentes abandonam os
menus com inúmeros itens e as caixas
com elementos.
Textos soltos e com fontes maiores,
com um bom espaçamento, são
utilizados em detrimento ao uso das
caixas.
Ser casual tende a aumentar a
conectividade entre o leitor e o
produtor de conteúdo.

CASUALIDADE EM INTERFACES
bradesco.com.br nab.com.au

CASUALIDADE E INTERATIVIDADE
Fazer o leitor sentir como se estivesse em uma
conversa, trás como consequência, sua
permanência por mais tempo.
Gera conectividade

CONECTIVIDADE
tecnologia.terra.com.br

CONECTIVIDADE SOCIAL
O papel básico de uma rede social e
fazer as pessoas sentirem que estão
rodeadas por outras pessoas.
Indicadores de conectividade, como
feedback de mídia social, são
capazes de nos fazer sentir próximos
e, portanto, seguros.

“
”
DESDE O ADVENTO DA ERA INDUSTRIAL,
CONVIVEMOS COM UMA PALAVRA FORMIDÁVEL:
'MAIS'. [...] RESOLVEMOS NOSSOS PROBLEMAS
FABRICANDO INFINDÁVEIS PRODUTOS EM
QUANTIDADES CADA VEZ MAIORES.
WURMAN 1991

“
”
"SE LIVRE DA METADE DAS PALAVRAS DE
CADA PÁGINA E DEPOIS DA METADE DAS
QUE RESTARAM."
KRUG 2005

ARQUITETURA DE INFORMAÇÃO
Richard Saul Wurman
Arquiteto e Designer Gráfico
Em 1976: motivado por melhorar a leitura de mapas,
atlas, guias impressos, diagnóstico médico, etc.

ANSIEDADE DE INFORMAÇÃO
A ansiedade era causada pelo
sentimento angustiante provocado
pelo excesso de informação, que
diretamente causava o
distanciamento entre a compreensão
da informação e o que ela realmente
informava.

POR QUE NÃO PROJETAR UMA
ORGANIZAÇÃO MAIS SIMPLES E
RICAMENTE INTERATIVA?

TRÊS PILARES DA AI
Usuários – suas necessidades,
hábitos, comportamentos e tarefas;
Contexto – cada organização tem
suas necessidades, especificidades e
particularidades;
Conteúdo – documentos, dados,
aplicativos, multimídias, e outros tipos
que podem surgir no futuro.

OS 4 GRANDES SISTEMAS DA AI
Organização – agrupa e organiza
todo conteúdo informacional;
Busca – lista as perguntas que o
usuário pode fazer e as respostas que
podem ser obtidas;
Rotulagem – define como será a
representação da informação com
signos para cada segmento, e
Navegação – define os caminhos que
o usuário irá percorrer.

MANIPULAÇÃO DIRETA
Descobrir como podemos
manipular objetos por estímulos.
Ser a própria interface.

BOOTSTRAP TWITTER
Sleek, intuitive, and powerful front-end
framework for faster and easier web
development.

PRINCÍPIOS
 Vem com arquivos HTML, JS e CSS
 Baseado em HTML5
 Grid de 12 colunas
 Grid fluído
 Responsivo com classes de visualização (telefone, tablet,
desktop)

COMO USAR ISSO NO
JOOMLA!
<jdoc:include type="modules"
name="position-12" style =“xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules"
name="debug" />

SHOWCASE
Puro Sangue
 https://www.bagelhint.com/
 https://colibri.io
 http://atmail.com/
 http://globotv.globo.com/
No Joomla!
 http://stackideas.com/
 http://portal.mec.gov.br/
 http://joomladaybrasil.org/
 http://www.joomlart.com/
Sites feitos com o Twitter Bootstrap

PERGUNTAS
Não vou te mandar para o Posto
Ipiranga!
@_danielcorrea
http://danielcorrea.me

Casualidade, tendência e padronização de interfaces

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Casualidade, tendência e padronização de interfaces

Semelhante a Casualidade, tendência e padronização de interfaces (20)

Casualidade, tendência e padronização de interfaces