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