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

674 views

Published on

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 24

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
674
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. CASUALIDADE, TENDÊNCIA E PADRONIZAÇÃO DE INTERFACES Uma reflexão sobre padrões de interfaces e o uso do Bootstrap Twitter
  2. 2. QUEM? Daniel Corrêa Analista de Sistemas Arquiteto de Informação Joomleiro desde o Mambo UFMG Atual campeão brasileiro http://danielcorrea.me @_danielcorrea
  3. 3. 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
  4. 4. 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?
  5. 5. 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.
  6. 6. TENDÊNCIAS Cíclica Contínua Pode ser interrompida por algum fator limitador Pode se repetir
  7. 7. 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
  8. 8. 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
  9. 9. CASUALIDADE Que é relativo a situações ou contextos em que há familiaridade ou descontração.
  10. 10. REFLEXO DIRETO SOBRE A UX Windows  Google 
  11. 11. SENTIMENTOS Amizade Respeito Segurança Confiança Interação União Simpatia Colaboração #sentir-seParte
  12. 12. 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.
  13. 13. CASUALIDADE EM INTERFACES bradesco.com.br nab.com.au
  14. 14. 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
  15. 15. CONECTIVIDADE tecnologia.terra.com.br
  16. 16. 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.
  17. 17. “ ” 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
  18. 18. “ ” "SE LIVRE DA METADE DAS PALAVRAS DE CADA PÁGINA E DEPOIS DA METADE DAS QUE RESTARAM." KRUG 2005
  19. 19. 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.
  20. 20. 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.
  21. 21. POR QUE NÃO PROJETAR UMA ORGANIZAÇÃO MAIS SIMPLES E RICAMENTE INTERATIVA?
  22. 22. 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.
  23. 23. 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.
  24. 24. MANIPULAÇÃO DIRETA Descobrir como podemos manipular objetos por estímulos. Ser a própria interface.
  25. 25. BOOTSTRAP TWITTER Sleek, intuitive, and powerful front-end framework for faster and easier web development.
  26. 26. 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)
  27. 27. ESTRUTURA
  28. 28. 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" />
  29. 29. 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
  30. 30. PERGUNTAS Não vou te mandar para o Posto Ipiranga! @_danielcorrea http://danielcorrea.me

×