DESIGNDIGITAL
dDESIGN | UFPE
SUMÁRIO
ARQUITETURA DA MÍDIA
COMPUTACIONAL
PARTE 1
{
}
MÍDIAS
COMPUTACIONAIS
NEW MEDIA
MÍDIA ON
MÍDIA DIGITAL
MÍDIA ALGORÍTIMICA
MÍDIA INTERATIVA
</>
INTERNET
MÍDIAS SOCIAIS
CÓDIGO INTERPRETADO
CÓDIGO COMPILADO
FORMATOS
FRAGMENTAÇÃO
PETER MORVILLE
A INTERNET PRODUZIU UMA GRANDE BAGUNÇA DE INFORMAÇÃO.
WEBSITES CRIADOS SEM PLANEJAMENTO PARA CRESCER; PROBLEMAS NO GERENCIAMENTO DE CONTEÚDO; ALTOS CUSTOS DE REFORMULAÇÃO DE WEBSITES;
USUÁRIOS PREJUDICADOS.
FRONT-END
BACK-END
</>
{;}
DIFERENÇAS ENTRE
DISPOSITIVOS DE I/O
E RECURSOS
DISPONÍVEIS
LARGURA DE BANDA
E RESTRIÇÕES DE TRANSFERÊNCIA DE DADOS
CAPACIDADE DE PROCESSAMENTO
CONSUMO DE MEMÓRIA
DISPONIBILIDADE
CAPACIDADE DE PROCESSAMENTO
CONSUMO DE MEMÓRIA
INCOMPATIBILIDADE DE SOFTWARE
LIMITAÇÕES
TÉCNICAS
INCOMPATIBILIDADE DE SOFTWARE
WINDOWS
C#, C++, .NET, JAVA
APPLE
SWIFT, OBJ-C
ANDROID
JAVA
GAMES
XNA, MONO, LUA, UNITY, UNREAL, C++, C#
COMPUTAÇÃO FÍSICA
PROCESING, C++, ARDUINO
SERVIDOR
PHP, JSP, PYTHON, RUBY, .NET
BANCO DE
DADOS
SQL SERVER, POSTEGREE, MYSQL
ARTE
GENERATIVA
C++, CINDER, OPENFRAMEWORKS, PROCESSING
@
WEB
HTML, CSS, JAVASCRIPT
LINGUAGENS
DE PROGRAMAÇÃO
MEDIA ECOLOGY
SEAMLESS
SECOND SCREEN
DESIGN / PROJETO
PARTE 2
PROCESSOMANIFESTOPROPOSIÇÃO
FORM FOLLOWS FUNCTION
FORM FOLLOWS CONTENT
PROJETAR É UM PROBLEMA METODOLÓGICO
PRODUTO TÍPICO DA APPLE
PRODUTO TÍPICO DO GOOGLE
PRODUTO TÍPICO DA SUA EMPRESA
PROJETO
POR
QUE?
COMO?
O QUE?
PROJETO NÃO É JOB
PROJETO PRECISA DE PESQUISA CONSTANTE
PROJETO PRECISA DE REFLEXÃO PERMANENTE
PROJETO = PENSAR + FAZER +
REPENSAR + REFAZER
UM PROJETO DESESTRUTURADO / SEM FOCO
ADOÇÃO DE UM MÉTODO PROJETUAL
CONCISÃO
IDENTIDADE
INTEGRIDADE
SOLIDEZ
CLAREZA (LEGIBILIDADE)
UTILIDADE
FRAGMENTAÇÃO
DESESTRUTURAÇÃO
AUSÊNCIA DE FOCO
"PICADINHO"
"QUEIJO SUIÇO"
"PICADINHO" OU FRAGMENTAÇÃO
TRABALHO PROJETUAL NÃO É INSTRUMENTAÇÃO TÉCNICA, MAS UM PROCESSO INVESTIGATIVO E REFLEXIVO
"ENSINAR DESIGN ENVOLVE CRIAR TANTO HÁBITOS MENTAIS QUANTO ARTEFATOS ESTÉTICOS. SE UM ESTUDANTE NÃO PODE REFLETIR SIGNIFICATIVAMENTE SOBRE SEU PRÓPRIO PROCESSO AO FINAL DE UM EXERCÍCIO DE DESIGN, EU CONSIDERO ISSO UM FRACASSO, NÃO IMPORTANDO A QUALIDADE DE SEUS PROJETOS."
TRACY FULLERTON
PROFESSORA ASSOCIADA E CATEDRÁTICA DE ARTES ELETRÔNICAS EM ENTRETENIMENTO INTERATIVO DA UNIVERSITY OF SOUTHERN CALIFORNIA
DESIGN É PROCESSO
(NÃO É O COMO O OBJETO SE APARENTA, MAS ELE FUNCIONA)
EIXO PRAGMÁTICO
EIXO TÉCNICO-CONSTRUTIVO
FORMA
MÍDIA
PLASTICIDADE / APARÊNCIA
EIXO SIMBÓLICO
SENTIDO
LINGUAGEM
USO
FUNÇÃO
DESIGN USADO COMO INSTRUMENTAL TÉCNICO
PROBLEMA
SOLUÇÃO
WATERFALL / ANÁLISE ESTRUTURADA
DP
CP
RD
AD
C
MT
E
M
V
DC
BRUNO MUNARI
PROBLEMATIZAÇÃO E HIPÓTESES
PRÁTICA
REFEIÇÃO PARA 4 PESSOAS
ARROZ VERDE PARA 4
PESSOAS
ARROZ, SAL, CEBOLA, ESPINAFRE, AZEITE, ETC,
ALGUÉM JÁ FEZ ANTES?
COMO FEZ? COMO POSSO FAZER, TRANSFORMAR
OU CRIAR?
QUAL ARROZ? QUAL PANELA? FOGÃO OU FORNO?
VARIAÇÕES DA RECEITA, FORMAS DIFERENTES DE PREPARO
MELHOR FORMA DE PREPARO, MANEIRA MAIS
PRÁTICA DE COZINHAR
SUFICIENTE?
FICOU BOM?
O QUE MELHORAR?
REGISTRAR
A RECEITA
STANSFORD D.SCHOOL
IDEO
DESIGN THINKING
DEFINIÇÃO (IDEO): É UMA ABORDAGEM CENTRADA NO USUÁRIO PARA A INOVAÇÃO QUE SE APROPRIA DA PRÁTICA DE DE DESIGN PARA INCORPORAR A NECESSIDADE DAS PESSOAS, AS POSSIBILIDADES TECNOLÓGICAS, E OS REQUISITOS NECESSÁRIOS PARA O SUCESSO DE UM NEGÓCIO
DEFORMAÇÃO DO CONCEITO: ORGANIZAÇÕES INVESTINDO EM "DESIGN" COMO UM EMBELEZAMENTO, SEM QUE SEUS PRODUTOS OU SERVIÇOS REFLITAM NECESSIDADES REAIS SENDO RESOLVIDAS
INTERPRETAÇÃO: MÉTODO DE SOLUÇÃO DE PROBLEMAS ATRAVÉS DA EMPATIA. SIGNIFICA PASSAR TEMPO CONSIDERÁVEL COM PESSOAS, CONHECER SUAS NECESSIDADES, APRENDER COM ELAS, ENTENDER SEUS CONTEXTOS E REALIZAR EXPERIMENTOS/TESTES ANTES DE TENTAR SOLUCIONAR PROBLEMAS
NEGÓCIO
DESEJO
VIABILIDADE
NEGÓCIO
DESEJO
VIABILIDADE
ESTRATÉGIA
MARKETING
OPERAÇÃO
FINANÇAS
TECNOLOGIA
ENGENHARIA
CAPACIDADE PRODUTIVA
TÉCNICA
ANTROPOLOGIA
SOCIOLOGIA
PSICOLOGIA
ETNOGRAFIA
PROCESSO DE PRODUÇÃO
TECNOLOGIA PRODUTIVA
CADEIA DE SUPRIMENTOS
PROTOTIPAÇÃO RÁPIDA
MANUFATURA
EQUIPE
RECURSOS HUMANOS
DINÂMICA
GERENCIAMENTO
NEGOCIAÇÕES
COMPORTAMENTO
ORGANIZACIONAL
FORMA+FUNÇÃO
SUSTENTABILIDADE
PRAZER DE USO E USABILIDADE
ESTÉTICA / PROGRAMAÇÃO VISUAL
INTERAÇÃO
INOVAÇÃO
B
P
C
T
H
I
B
P
C
T
IxD
H
I
IMERSÃO / PESQUISA
ANÁLISE / REFLEXÃO
IDEAÇÃO / CRIAÇÃO
PROTOTIPAÇÃO / TESTES
IxD
FASES DO DESIGN SOCIAL
IMERSÃO
ANÁLISE
CRIAÇÃO
PROTÓTIPO
CONHECIMENTO DAS PRÁTICAS E PONTOS DE VISTA
NECESSIDADES E DESEJOS DOS USUÁRIOS
REFERÊNCIAS E REPERTÓRIO
DIAGRAMAS
PAINÉIS DE REFERÊNCIA
PROXIMIDADE DE IDÉIAS
PERSONAS
MAPPING
CONCEITO
REQUISITOS DO PROJETO
(FUNCIONAMENTO)
ESTUDOS E
WIREFRAMES
LAYOUT
SIMULAÇÃO DO USO
PROTÓTIPO FUNCIONAL
PESQUISA
REFLEXÃO
IDÉIA
TESTE
SEPARAR E ANALISAR COMPONENTES E RELACIONAMENTOS
AVALIAR (ATRIBUIR VALORES)
CLASSIFICAR
COMPARAR
EXEMPLIFICAR
INTERPRETAR
EXPLICAR
SINTETIZAR
CRITICAR
INVESTIGAR
PESQUISAR
ENTREVISTAR
OBSERVAR
LEVANTAR
DUVIDAR
OUVIR
QUESTIONAR
ANOTAR
REGISTRAR
PROCURAR
PROPOR
CRIAR
PENSAR
INVENTAR
PRODUZIR
DESENVOLVER
TENTAR
DESENHAR
MANIFESTAR
MATERIALIZAR
REPRESENTAR
TESTAR
AVERIGUAR
VERIFICAR
AVALIAR
REPENSAR
DISCUTIR
DECIDIR
AÇÕES
MDA
MECÂNICAS
DINÂMICAS
VISUAIS
MECHANICS
DYNAMICS
AESTHETICS
CONSUMO
PRODUÇÃO
LeBLANC, HUNICKE & ZUBEK
ARQUITETURA DA
INFORMAÇÃO
CONTEÚDO
CONTEXTO
USO
IA
METADADOS
ARQUITETURA DE INFROMAÇÃO APLICADA A UM TICKET DE EMBARQUE POR TYLER THOMPSON
COISAS QUE PODEMOS APRENDER DE UM REDESIGN
MARTIJN DE WALL
THE CITY AS INTERFACE
PLATAFORMA
PROGRAMA
PROTOCOLO
TROCAS, CONVENÇÕES, REGRAS, PADRÕES
CONTEÚDO,
ATIVIDADES
FORMA,
INFRAESTRUTURA
FLUXO
ORGANIZAÇÃO
RELACIONAMENTO
NAVEGAÇÃO
TAXONOMIA
CRITÉRIOS
DESIGN DE INFORMAÇÃO
≠
ONTOLOGIAS
PROCESSO DE ANÁLISE
DESIGN SISTEMATIZAÇÃO
=
INSTRUMENTOS /
FERRAMENTAS
DE PROJETO
CAMPOS/COMPETÊNCIAS DO DESIGN
FORMA
CONTEÚDO
COMPORTAMENTO
DESIGN GRÁFICO
DESIGN DE PRODUTO
ARQUITETURA DE INFORMAÇÃO
SOUND DESIGN
ANIMAÇÃO
DESIGN DE INTERAÇÃO
COOPER, REINMANN & CRONIN
DESIGN DE INTERFACE
DESIGN DE INTERAÇÃO
O QUE É
COMO É. COMO FUNCIONA
ENGENHARIA DE USABILIDADE
PRINCÍPIO FORMULADO POR DONALD NORMAN E JAKOB NIELSEN
EM SEUS TRABALHOS (1986 E 1991/1993)
PREOCUPAÇÃO COM A FACILIDADE DE USO DOS OBJETOS DO DIA-A-DIA
ESTUDOS E AVALIAÇÕES PARA PROMOVER O APERFEIÇOAMENTO DO USO DE OBJETOS E SUAS INTERFACES COM O USUÁRIO
PRINCÍPIOS DA USABILIDADE
PRATICIDADE
FUNCIONALIDADE
SEGURANÇA
PERFORMANCE
APRENDIZAGEM
RECORDAÇÃO
O QUANTO SIMPLES E FÁCIL É O PROCESSO
PARA QUE ALGO SEJA FEITO?
A INTERFACE DE USO AUXILIA PARA QUE O OBJETO SEJA UTILIZADO NA PLENITUDE DE SEUS RECURSOSE PARA QUE DESEMPENHE SEU PAPEL
A INTERFACE EVITA QUE AÇÕES PERIGOSAS OU INDEVIDAS SEJAM REALIZADAS INADVERTIDAMENTE?
A INTERFACE É RÁPIDA E ÁGIL? RESPONDE CONVENIENTEMENTE ÀS EXPECTATIVAS DO USUÁRIO?
É FÁCIL DE APRENDER A USAR?
EU CONSIGO LEMBRAR COMO USA, DEPOIS?
ELEMENTOS DA USABILIDADE
VISIBILIDADE
FEEDBACK
RESTRIÇÕES
MAPEAMENTO
CONSISTÊNCIA
AFFORDANCE
O QUE MOSTRAR E O QUE OCULTAR?
AO ACIONAR UM BOTÃO, HÁ UM SOM PARA CONFIRMAR QUE A FUNÇÃO FOI ACIONADA? HÁ UMA INFORMAÇÃO VISUAL OU SENSORIAL PARA QUE O USUÁRIO TENHA CERTEZA QUE SUA SOLICITAÇÃO ESTÁ SENDO ATENDIDA?
FÍSICAS, LÓGICAS OU CULTURAIS; BARREIRAS PARA QUE AÇÕES SEJAM LIMITADAS?
AÇÕES SEMELHANTES PROVOCAM
INTERAÇÕES SEMELHANTES?
WIREFRAMES
A/B TESTS
HEATMAPS
USER TESTING
PESQUISA
TESTES
PROTOTIPAR NÃO É PROJETAR
PROTÓTIPOS SERVEM PARA VALIDAR / TESTAR IDEIAS
UXKITS.COM
UI PATTERNS
USUÁRIO
USER MAPPING
PENSAMENTO
AUDIÇÃO
VISÃO
MOTIVAÇÃO
CONTEXTO
COMPORTAMENTO
INTERFACE
USER MAPPING
GRAMÁTICA DE AÇÕES
CAPTURAR AS ATIVIDADES DOS USUÁRIOS E TRANSFORMÁ-LAS EM UNIDADES BÁSCIAS DE TAREFAS INTEGRADAS A UM SISTEMA COMPUTACIONAL.
SE PROJETA COM (E NÃO PARA) O USUÁRIO
O MATERIAL DE EXPERIMENTAÇÃO É O PRÓPRIO USUÁRIO, E NÃO A MÍDIA
O PROJETO É SOBRE AÇÕES E COMPORTAMENTOS...
NÃO SOBRE A MÍDIA
USER JOURNEY MAPS
ATENÇÃO
INTENÇÃO
GATILHO
AÇÃO
FEEDBACK
RESULTADO
JOY OF USE, ENJOYMENT, FUNOLOGY & PLAY
FUNCIONAL
CONSISTENTE
ÚTIL
EMOCIONAL
CONFIÁVEL
DIVERTIDO
EXCITANTE
PRÁTICO
IDENTITÁRIO
CRIATIVO
ARROJADO
SÉRIO
USABILIDADE
LIMITES DA ENGENHARIA DA USABILIDADE COMO
SOLUÇÃO PROJETUAL
FUNOLOGY / JOY OF USE
NOS RELACIONAMOS COM OBJETOS NESTES 3 NÍVEIS
INTELIGENTE
ESFORÇADO
PERSPECAZ
ELEGANTE
DESPOJADO
ETC.
LIMITES DA ENGENHARIA DA USABILIDADE COMO
SOLUÇÃO PROJETUAL
FUNOLOGY / JOY OF USE
O SABER DESTINADO AO MUNDO PRODUTIVO É COMPLETAMENTE INADEQUADO PARA O ESTUDO DO PRAZER
E DO VIVER
criatividade
SUBLIME.FYI
107 OF THE BRIGHTEST CREATIVE PEOPLE IN WEB DESIGN
CRIATIVIDADE É UM JOGO?
UMA BRINCADEIRA?
UM MODO DE AGIR SOBRE O MUNDO
PLAYFULLNESS
...E RISCO!
REDUÇÃO
A FORMA MAIS FÁCIL DE SE ATINGIR A SIMPLICIDADE É PELA REDUÇÃO
ORGANIZAÇÃO
A ORGANIZAÇÃO FAZ UM SISTEMA COMPLEXO PARECER SIMPLES
TEMPO
O QUE DEMANDA MENOS TEMPO PARECE SEMPRE MAIS SIMPLES
CONHECIMENTO
CONHECIMENTO FAZ AS COISAS SEREM MAIS SIMPLE
DIFERENÇA
SIMPLICIDADE E COMPLEXIDADE SÃO COMPLEMENTARES
CONTEXTO
O QUE ESTÁ NO ENTORNO NÃO É IRRELEVANTE
EMOÇÃO
MAIS EMOÇÃO É MELHOR DO QUE MENOS
CONFIANÇA
CONFIAMOS NA SIMPLICIDADE
ERRO
ALGUMAS COISAS NÃO TEM COMO SEREM SIMPLES
REGRA 1
SIMPLICIDADE É SOBRE SUBTRAIR O ÓBVIO E ACRESCENTAR O SIGNIFICATIVO
10 LEIS DE MAEDA
INTERAÇÃO
PARTE 3
O QUE É INTERAÇÃO?
TRANSFORMAÇÕES NO
CULTURA MATERIAL
CONCEITO DE INTERAÇÃO
HCI
IA
ID
UCD
IxD
UX
1970
1980
1990
2000
ENGELBART
XEROX PARC
WURMAN
MORVILLE
SUTHERLAND
NORMAN
NIELSEN
GARRET
MOGGRIDGE
2010
PARADIGMA DA INTERAÇÃO
CONTROLE / DOMÍNIO
1960 - 1975
ENTRAR INSTRUÇÕES NA MÁQUINA
RETER INFORMAÇÕES DA MÁQUINA
INTERAGIR
I/O
RESSONÂNCIA DO PENSAMENTO CIBERNÉTICO
NORBERT WEINER
E TEORIAS MATEMÁTICAS DA COMUNICAÇÃO
HCI
TRANSMITIR É COMUNICAR
CIBERNÉTICO
CONTROLE DA INFORMAÇÃO
A AGE SOBRE B
QUE AGE SOBRE A
A
B
A
SPACEWAR, MIT 1962
NOLAN BUSHNELL, COMPUTER SPACE, 1971
TENNIS FOR TWO, 1958
IVAN SUTHERLAND SKETCHPAD DEMO, 1963
MOUSE, DOUGLAS "DOUG" ENGELBART
STANFORD RESEARCH CENTER, MENLO PARK.
FALL JOINT COMPUTER CONFERENCE, SAN FRANCISCO 1968
XEROX PALO ALTO RESEARCH
CENTER (XEROX PARC)
XEROX ALTO, 1973
IT WAS SO OBVIOUS THAT EVERY COMPUTER WOULD WORK THIS WAY SOMEDAY
STEVE JOBS, 1979
PARADIGMA DA INTERAÇÃO
ACESSO À INFORMAÇÃO
1975 - 1990
THE INTERACTION STATES THAT EVERY APPLICATION HAS AN INHERENT AMOUNT OF COMPLEXITY. THIS COMPLEXITY CANNOT BE WISHED AWAY AND HAS TO BE DEALT WITH, EITHER IN PRODUCT DEVELOPMENT OR IN USER INTERACTION
LARRY TESLER, XEROX PARC
NAVEGAR PELA INFORMAÇÃO
INTERAGIR
LEGIBILIDADE
RESSONÂNCIA DO DESIGN GRÁFICO SOBRE
A COMPUTAÇÃO
ARQUITETURA DE INFOMAÇÃO E DESIGN DE INTERFACE
INFORMAR É COMUNICAR
ORGANIZAÇÃO E ESTRUTURAÇÃO DE CAMPO
RICHARD SAUL WURMAN
DAR ORDEM AO CAOS DE INFORMAÇÕES PRODUZIDAS EM LARGA ESCALA
DAR MAIS ATENÇÃO À COMO INFORMAÇÕES SÃO APRESENTADAS
XEROX STAR, 1981
LOGITECH MOUSE, 1983
BUSINESS COMPUTER
X
PERSONAL HOME
COMPUTER
USUÁRIO CORPORATIVO
X USUÁRIO DOMÉSTICO
BANCOS DE DADOS RELACIONAIS
PARADIGMA DA INTERAÇÃO
USO COTIDIANO
1990 - 2000
USAR
INTERAGIR
COMUNICAÇÃO
BULLETIN BOARD SYSTEM (BBS) MAIL SYSTEM, 1994
APPLE NEWTON, 1993
DESIGN CENTRADO NO USUÁRIO
USUFRUIR É COMUNICAR
INTERNET COMERCIAL
COMPUTAÇÃO EM REDE DOMÉSTICA
DESIGN PATTERNS
CHRISTOPHER ALEXANDER
GoF (GANG OF FOUR)
IxD
IA
JESSE JAMES GARRETT
EYE4U.COM
YUGO NAKAMURA
THA.JP
INFORMATION ARCHITECTS
USEIT.COM
PARADIGMA DA INTERAÇÃO
EXPERIÊNCIA / VIVÊNCIA
2000 - 2010
DIALOGAR
INTERAGIR
COMPARTILHAR
CO
WORK
CO
LABORAÇÃO
MULTIPLAYER
CONSTRUIR EXPERIÊNCIAS EXIGE SENSIBILIDADE E LIDERANÇA
USER ADVOCATE
NOKIA COMMUNICATOR 9500
MOBILE OFFICE
COMPAQ/HP IPAQ H6310
NOKIA N95
MOBILE ENTERTAINMENT
PALM PILOT
PERSONAL DIGITAL ASSISTANT
(PDA)
TECNOLOGIA
A BUSCA PELA INOVAÇÃO DISRUPTIVA
NEM SEMPRE CONSIDEROU O USUÁRIO
OU A INTERFACE
A ÊNFASE POR MUITAS VEZES PERMANECEU
NO HARDWARE E NA TECNOLOGIA, NÃO NO
USO OU NA EXPERIÊNCIA
EXPERIÊNCIA MOBILE APERFEIÇOADA
SIMPLICIDADE DE USO
DISSONÂNCIA
AINDA QUE O VALOR DA EXPERIÊNCIA E DO USO TENHAM SE TORNADO ÓBVIOS, CONTINUA DIFÍCIL CONVENCER O UNIVERSO CORPORATIVO A INVESTIR NESTAS MELHORIAS
NÃO HÁ COMO SE MEDIR A EXPERIÊNCIA
WITTGESTEIN
GRANDE PARTE DAS QUESTÕES DE UX SÃO SUBJETIVAS
LIDAMOS COM A DIFERENÇA, MAS TAMBÉM COM MUITOS TRAÇOS COMUNS
DEVERÍAMOS SAIR DE UM PARADIGMA DE UM PRODUTO BONITO PARA O DE UMA INTERAÇÃO/EXPERIÊNCIA BELA
OVERBEEKE, FRENS, DJAJADININGRAT, WENSVEEN
INTERAÇÃO FLUÍDA
BOA CONTEXTUALIZAÇÃO
DE USO
BOA INTERFACE
ADAM GREENFIELD
COMO DEFINIR O QUE É UM BOM USER EXPERIENCE?
I INVENTED THE TERM "USER EXPERIENCE" BECAUSE I THOUGHT HUMAN INTERFACE AND USABILITY WERE TOO NARROW; I WANTED TO COVER ALL ASPECTS OF THE PERSON'S EXPERIENCE WITH A SYSTEM, INCLUDING INDUSTRIAL DESIGN, GRAPHICS, THE INTERFACE, THE PHYSICAL INTERACTION, AND THE MANUAL. SINCE THEN, THE TERM HAS SPREAD WIDELY, SO MUCH SO THAT IT IS STARTING TO LOSE ITS MEANING.
DON NORMAN
USABILIDADE?
INTERFACE?
FUNCIONALIDADE?
EXPERIÊNCIA DE USO É
CRIAR FORMAS PARA QUE
OS PRODUTOS SEJAM
USADOS DE FORMA
MEMORÁVEL / DESEJÁVEL
NENHUMA DAS COISAS?
@MENSÕES?
SOFISTICAÇÃO?
POLIMENTO?
FORMAS
USER EXPERIENCE
DEFINIÇÃO (NN/g): "USER EXPERIENCE" INCORPORA TODOS OS ASPECTOS DA INTERAÇÃO ENTRE O USUÁRIO FINAL E UMA EMPRESA, SEUS SERVIÇOS E SEUS PRODUTOS
INTERPRETAÇÃO: VEJA O QUADRO MAIS AMPLO; VEJA O TODO; SEJA CURIOSO.
DISTORÇÕES: TRATAR
"USER EXPERIENCE" COMO APENAS UMA PARTE DO TODO.
NÃO EXISTE UM UX DESIGNER
MDA
TEMOS LIDADO COM AS QUESTÕES DE AI E UX SUPERFICIALMENTE?
USUÁRIOS SÃO CONSIDERADOS DE MANEIRA MECÂNICA E FISIOLÓGICA
OS PROBLEMAS DE ARQUITETURA E EXPERIÊNCIA SÃO OPERADOS APENAS NO NÍVEL DESCRITIVO
O QUE NOS ESTÁ ESCAPANDO?
A EXPERIÊNCIA EM SI
LIKE IN THE OLD FABLE, WE ARE THE FOOLS LOOKING AT THE FINGER WHEN SOMEONE POINTS AT THE MOON. GAMES ARE THE FINGER; PLAY IS THE MOON.
MIGUEL SICART
EXPERIÊNCIA É ATENÇÃO?
EXPERIÊNCIA ESTÁ RELACIONADA AO VIVER E À VIDA, DIRETAMENTE
PREOCUPAR-SE COM A EXPERIÊNCIA É DEDICAR-SE A FAZER COM QUE UM OBJETO/MÍDIA PASSE A FAZER PARTE DA VIDA DE ALGUÉM
UX É RELEVÂNCIA
UX É UMA LUTA CONTRA A IRRELEVÂNCIA
TODOS ACREDITAM QUE SEUS PRODUTOS E CRIAÇÕES SÃO VITAIS PARA OS USUÁRIOS
A REALIDADE É QUE A ESMAGADORA MAIORIA DOS OBJETOS É IRRELEVANTE PARA A VIDA DAS PESSOAS
SÃO APENAS
FERRAMENTAS
SÃO PROVISÓRIOS
SÃO SUBSTITUÍVEIS
SÃO IRRELEVANTES
A DIFICULDADE DE UX SE ENCONTRA NO ÂMAGO DOS PRÓPRIOS
OBJETOS
MEMÓRIA
O CONTÍNUO PROCESSO DE LEMBRAR / ESQUECER / LEMRAR NOVAMENTE
SIGNIFICAÇÃO
O JOGO NO QUAL COISAS GANHAM E PERDEM SENTIDO PARA NÓS
VALOR
TODOS OS SIGNOS SE RELACIONAM NA MENTE / MEMÓRIA
APENAS AQUELES QUE SE FIXAM EMOCIONALMENTE GANHAM SENTIDO / VALOR
IMPORTÂNCIA DA QUESTÃO ESTÉTICA NA EXPERIÊNCIA
UM PROBLEMA ONTOLÓGICO
A EXPERIÊNCIA DE USO É PARTE DA CONSTRUÇÃO DE UMA ESTÉTICA DE SI
DA FORMA COMO QUEREMOS EXISTIR | VIVER | AGIR
PARADIGMA DA INTERAÇÃO
LIGAÇÃO / CONEXÃO
2010 -
ESTENDER / AMPLIAR O SER
INTERAGIR
PENSANDO FORA DO
SANDBOX
EXTENSÕES DO HUMANO
PENSANDO FORA DO SANDBOX
OBJETOS "INTELIGENTES"
INTELIGÊNCIA ARTIFICIAL
OBJETOS INTERAGINDO ENTRE SI
COMPUTAÇÃO AFETIVA
WEARABLE COMPUTING
QUANTIFIED SELF
COMPUTAÇÃO FÍSICA
REALIDADE AUMENTADA
KINETICS
RECONHECIMENTO DE IMAGEM
BIOHACKING
ROBÓTICA
INTERFACES TANGÍVEIS
INTERFACES HAPTICAS
VIDEO MAPPING
CÓDIGO CRIATIVO / ARTE GENERATIVA
GAMES
CIMÁTICA
INSTALAÇÕES INTERATIVAS
OBJETOS INTELIGENTES
MENTEM E TRAPACEIAM
COMPUTAÇÃO FÍSICA
COMPUTAÇÃO FÍSICA
VIDEO MAPPING
SENSORES & COMPUTAÇÃO FÍSICA; PUBLICIDADE INTERATIVA
CONECTIVIDADE; PUBLICIDADE INTERATIVA
JOGOS ELETRÔNICOS COM VIDEO MAPPING, RECONHECIMENTO DE IMAGEM, COMPUTAÇÃO FÍSICA
REACTABLE, INTERFACES TANGÍVEIS
TANGIBLE MEDIA GROUP, MIT; COMPUTAÇÃO FÍSICA E INTERFACES TANGÍVEIS; REALIDADE AUMENTADA
REALIDADE AUMENTADA
BIOHACKING
TATUAGENS DIGITAIS
BIOHACKING
BIOHACKING - HEADPHONES
CIRCADIA, GRINDHOUSE WETWARES BIOHACKING
STEVE MANN, PAI DA WEARABLE COMPUTING
GOOGLE GLASS
LINGUAGEM
PARTE 4
LINGUAGEM
DISPOSITIVO COGNITIVO DE PREDIÇÃO
ENQUADRAMENTO DE CLASSES E DE
DIFERENCIAÇÃO
MECANISMO DO RACIOCÍNIO E PENSAMENTO HUMANO
PADRÃO, ESTRUTURA, CÓDIGO, LEXICO
GRAMÁTICA, SINTAXE
CODIFICAÇÃO E DECODIFICAÇÃO DE
SENTIDOS
CONSCIÊNCIA
O SER HUMANO É UMA CRIATURA DE LINGUAGEM
(NOSSO PENSAMENTO FUNCIONA ATRAVÉS DA LINGUAGEM)
O QUE SOMOS NÓS?
NA LINGUAGEM REALIZAMOS TANTO PROCESSOS CRIATIVOS QUANTO PROCESSOS NORMATIVOS
A LINGUAGEM IMPÕE LIMITES AO PENSAR
REAFIRMAÇÃO
INSTITUI / REFORÇA / ENRAIZA SIGNIFICADOS JÁ PRESENTES NA
CULTURA
NÃO TENTA MUDÁ-LA
LINGUAGEM /
ENTENDER E LIDAR COM A CULTURA E SEUS ARTEFATOS
DECODIFICAÇÃO
DO MUNDO
PARÁFRASE
POLISSEMIA
REAFIRMAÇÃO
SENTIDOS SEDIMENTADOS
ALGO QUE SE MANTÉM
RETORNO AOS MESMOS ESPAÇOS DO DIZER
ESTABILIZAÇÃO
RUPTURA
DIFERENÇA
MULTIPLICIDADE DO SENTIDO
O QUE ESTÁ FORA DO ORDINÁRIO
DESESTABILIZAÇÃO
DESLOCAMENTO
VARIEDADE
NO INTERIOR DO QUE JÁ ESTÁ DITO
PARÁFRASE
POLISSEMIA
TENSÃO
JOGO
MOVIMENTO
MUDANÇA
O MESMO
O DIFERENTE
ATRAVÉS DA LINGUAGEM
TORNAMOS ALGO COMUM
TORNAMOS EM CUMUM
MÍDIAS COMPUTACIONAIS NÃO MIMETIZAM A LINGUAGEM DE OUTRAS MÍDIAS
HIBRIDIZAÇÃO
HIBRIDIZAÇÃO
HIBRIDIZAÇÃO
VIDEOCLIP INTERATIVO
CARD INTERFACES
TRANSFORMAÇÕES NA LINGUAGEM DAS MÍDIAS COMPUTACIONAIS
MOBILE FIRST
GOOGLE GLASS CARD INTERFACES
RESPONSIVE WEB
TRANSFORMAÇÕES NA LINGUAGEM DAS MÍDIAS COMPUTACIONAIS
RESPONSIVE ICONS
320 PX
480 PX
655 PX
767 PX
835 PX
979 PX
1200 PX
1024 PX
MEDIA QUERY
WEB PATTERNS
BOOTSTRAP
FLAT DESIGN
SKEUMORPHIC DESIGN
ABSTRAÇÃO
SPECIES IN PIECES, 2015
SWISSINCSS
GOOGLE MATERIAL DESIGN
UMA GRAMÁTICA PARA AS MÍDIAS COMPUTACIONAIS?
MATERIAL DESIGN MUSIC APP INTERFACE
INTERACTIONS OF THE WEEK
LINGUAGEM + NARRATIVA
EM NARRATIVAS INTERATIVAS
NARRATOLOGIA APLICADA AO USO DE MÍDIAS COMPUTACIONAIS
LUDOLOGIA E OS ASPECTOS LÚDICOS DA
LINGUAGEM DAS MÍDIAS COMPUTACIONAIS
NARRATIVAS INTERATIVAS
ESTÉTICA DA INTERAÇÃO
PARTE 5
ESTÉTICA MODA
ESTÉTICA BELEZA
ESTÉTICA PLASTICIDADE
=
=
=
≠
≠
≠
ESTÉTICA = RAMO DA FILOSOFIA QUE ESTUDA A ORIGEM / NATUREZA DA BELEZA
ESTÉTICA = AQUILO QUE PROVOCA A PERCEPÇÃO DA BELEZA, AFETOS, E O SENTIDO
DE SUBLIME
LITTLE ORCHESTRA
VIENNA ART ORCHESTRA
SUBLIME
OS 3 BULES DE CHÁ
PHILLIP STARK
DON NORMAN
ATUALIDADE DAS MÍDIAS COMPUTACIONAIS
AWWWARDS
BRAUN: MID-CENTURY DESIGN / ESCOLA SUIÇA DE DESIGN (ULM) / INTERNATIONAL STYLE
DIETER RAMS
DESIGN QUE PROPORCIONA FELICIDADE
O PRAZER É UMA DISCUSSÃO ANTIGA, PASSANDO PELOS FILÓSOFOS GREGOS (ARISTÓTELES, PLATÃO) ATÉ A PSICANÁLISE MODERNA (FREUD, LACAN)
A EMOÇÃO / SENTIMENTO SÃO TRAÇOS DOS ANIMAIS SUPERIORES, E NÃO SE OPÕEM À RAZÃO
FELICIDADE
PRAZER VISCERAL
PRAZER COMPORTAMENTAL
PRAZER REFLEXIVO
MIHALY CSIKSZENTMIHALYI
FLOW THEORY
FLOW É A PROPORÇÃO ÁUREA ENTRE HABILIDADES E DESAFIOS NA REALIZAÇÃO DE UMA ATIVIDADE
FLOW
IMERSÃO PROFUNDA
EUFORIA
DIMENSÃO LÚDICA
COLOCAR AS MÍDIAS EM UMA CONDIÇÃO DE JOGO
É UMA FORMA DE REVOLTA CONTRA UMA ESTÉTICA MAQUÍNICA E CONTRA RELAÇÕES PROGRAMADAS
(PLAYFULLNESS)
JOHANN SEBASTIAN JOUST
JOGAR
JOGO COMO EXERCÍCIO
JOGO SIMBÓLICO
JOGO ESTRUTURADO
DOMÍNIO
PERÍCIA
HABILIDADE
CONTROLE
CORPO
IMAGINAÇÃO
CRIATIVIDADE
ASSOCIAÇÃO
SENTIDO
DESCOBERTA
SOCIAL
HIERARQUIA
JUÍZO
REGRA
VALOR
IMPROVE EVERYWHERE
IMPROVE EVERYWHERE
TO PLAY IS TO BE IN THE WOLD. PLAYING IS A FORM OF UNDERSTANDING WHAT SURROUNDS US AND WHO WE ARE, AND A WAY OF ENGAGING WITH OTHERS. PLAY IS A MODE OF BEING HUMAN.
MIGUEL SICART
ABSTRAÇÃO
LEGIBILIDADE (CLAREZA)
OBJETIVIDADE
PADRONIZAÇÃO
MATERIALIDADE CONCRETA
DECORAÇÃO
ORNAMENTAÇÃO
EXCEPCIONALIDADE
LEVEZA
AGNOSE/ASSEPSIA
INDECISÃO ENTRE VALORES DA AUTOMAÇÃO
E VALORES DE UMA DANÇA
ESTES PRINCÍPIOS ESTARIAM ARRUINANDO O BOM DESIGN?
?
O ABANDONO AOS GUIDELINES DEFINIDOS POR DON NORMAN ESTÃO CRIANDO PRODUTOS PIORES NA APPLE ATUAL?
A ÊNFASE EM UMA INTEGRIDADE ESTÉTICA PODE SER PREJUDICIAL A EXPERIÊNCIA?
REFERÊNCIAS
PARTE 6
PUBLICIDADE
EDITORIAL
Visual Editions
BRANDING
ENTRETENIMENTO
TRANSMÍDIA & CONVERGÊNCIA
MEDIA ECOLOGY + SECOND SCREEN
INTERFACES
2017 © PROF. DR. GUILHERME RANOYA
[OLD] Design Digital
By Guilherme Ranoya
[OLD] Design Digital
[OLD] APRESENTAÇÃO DA DISCIPLINA DE DESIGN DIGITAL DA UNIVERSIDADE FEDERAL DE PERNAMBUCO (dDESIGN|UFPE)
- 2,578