casualidade, tendência e padronização de interfaces
DESCRIPTION
Palestra realizada no Joomla! Day Brasil 2014 - São Paulo/SP - em 02/05/ Link para o vídeo - http://danielcorrea.me/blog/85-palestra-joomla-day-brasil-2014.html - sobre Manipulação Direta de Objetos - slide 24TRANSCRIPT
![Page 1: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/1.jpg)
CASUALIDADE, TENDÊNCIA E
PADRONIZAÇÃO DE
INTERFACES
Uma reflexão sobre padrões de interfaces e o
uso do Bootstrap Twitter
![Page 2: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/2.jpg)
QUEM?
Daniel Corrêa
Analista de Sistemas
Arquiteto de Informação
Joomleiro desde o Mambo
UFMG
Atual campeão brasileiro
http://danielcorrea.me
@_danielcorrea
![Page 3: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/3.jpg)
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
![Page 4: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/4.jpg)
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?
![Page 5: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/5.jpg)
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.
![Page 6: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/6.jpg)
TENDÊNCIAS
Cíclica Contínua
Pode ser interrompida por
algum fator limitador
Pode se repetir
![Page 7: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/7.jpg)
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
![Page 8: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/8.jpg)
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
![Page 9: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/9.jpg)
CASUALIDADE
Que é relativo a situações ou contextos em que há familiaridade ou
descontração.
![Page 10: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/10.jpg)
REFLEXO DIRETO SOBRE A UX
Windows Google
![Page 11: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/11.jpg)
SENTIMENTOS
Amizade
Respeito
Segurança
Confiança
Interação
União
Simpatia
Colaboração
#sentir-seParte
![Page 12: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/12.jpg)
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.
![Page 13: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/13.jpg)
CASUALIDADE EM INTERFACES
bradesco.com.br nab.com.au
![Page 14: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/14.jpg)
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
![Page 15: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/15.jpg)
CONECTIVIDADE
tecnologia.terra.com.br
![Page 16: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/16.jpg)
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.
![Page 17: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/17.jpg)
“
”
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
![Page 18: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/18.jpg)
“
”
"SE LIVRE DA METADE DAS PALAVRAS DE
CADA PÁGINA E DEPOIS DA METADE DAS
QUE RESTARAM."
KRUG 2005
![Page 19: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/19.jpg)
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.
![Page 20: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/20.jpg)
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.
![Page 21: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/21.jpg)
POR QUE NÃO PROJETAR UMA
ORGANIZAÇÃO MAIS SIMPLES E
RICAMENTE INTERATIVA?
![Page 22: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/22.jpg)
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.
![Page 23: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/23.jpg)
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.
![Page 24: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/24.jpg)
MANIPULAÇÃO DIRETA
Descobrir como podemos
manipular objetos por estímulos.
Ser a própria interface.
![Page 25: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/25.jpg)
BOOTSTRAP TWITTERSleek, intuitive, and powerful front-end
framework for faster and easier web
development.
![Page 26: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/26.jpg)
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)
![Page 27: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/27.jpg)
ESTRUTURA
![Page 28: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/28.jpg)
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" />
![Page 29: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/29.jpg)
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
![Page 30: Casualidade, tendência e padronização de interfaces](https://reader034.vdocuments.pub/reader034/viewer/2022052623/559ba3241a28abed148b4700/html5/thumbnails/30.jpg)
PERGUNTAS
Não vou te mandar para o Posto
Ipiranga!
@_danielcorrea
http://danielcorrea.me