Casualidade, tendência e padronização de interfaces
-
Upload
daniel-correa -
Category
Presentations & Public Speaking
-
view
441 -
download
1
description
Transcript of 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 TWITTERSleek, 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)
ESTRUTURA
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