Neste ano, o tema “Nós com eles, nós sem eles” abordava as relações interdisciplinares do design, sua repercussão e contribuição na sociedade. A mesa redonda, a qual fui convidado a participar, tinha como foco discutir “Interação, experiência e ciência”. Junto a mim participaram também:

• Gonçalo Baptista Ferraz
• Mileni Kazedani Gonçalves
• Rodrigo “Scama” Otávio dos Santos
• Haroldo Osmar de Paula Junior (mediador)

De início fomos convidados a fazer uma breve introdução e exposição sobre o tema. Comecei contando minha trajetória nos antigos computadores MSX ao final da década de 80 e como os aplicativos gráficos dessa plataforma despertaram interesse em mim. Além do gosto pela arte e de fazer desenhos simples a lápis e aquerela, descobri outros softwares para ilustração e manipulação de imagens. Com o tempo fui identificando meu interesse em design gráfico e webdesign (na época definida pelos webmasters), até chegar no momento de decidir o curso que gostaria de seguir na faculdade: Desenho Industrial – Programação Visual.

Profissionalmente já vinha descobrindo o design de interação e a riqueza dessa área. Então para o meu projeto final de graduação desenvolvi um aplicativo para o aprendizado de música chamado Musiclick, o que me fez pesquisar sobre interface, usabilidade, multimídia e tantos outros recursos que vão muito além de uma mensagem gráfica.

Pensando na experiência que tive em descobrir as ferramentas que me levaram a definir minha carreira, fiz uma relação com a experiência do usuário, pensando como nesse caso os softwares causaram expectativas em descobrir o quanto poderia se atingir com tais recursos.

Como o design pode criar experiências ricas através dos recursos (tecnologias) disponíveis? Se pensamos em tecnologia, vamos muito além de dispositivos hi-tech, interfaces touch screen, telas coloridas, etc. Tecnologia vem desde a roupa que utilizamos, desde a forma como nos comunicamos… linguagem é tecnologia! E muito antes de termos uma linguagem definida, nos expressávamos e nos comunicávamos através de gestos. Partindo deste ponto, podemos pensar em desenvolver produtos ou serviços interativos low-tech… por quê não?

Talvez seja este um paradigma que o design venha a quebrar no futuro: no ciclo tecnológico, voltar a explorar interfaces pessoa/pessoa, valorizando as relações humanas. Atualmente vivemos num cenário de ansiedade de informação segundo Richard Saul Wurman e essa enxurrada de informações tende a ser até mesmo uma agressão à nós. Já nos anos 80s era possível observar o caos informacional através das mídias presentes na época como a TV, o rádio e os impressos. Com a transposição aos meios digitais, a acessibilidade proveniente da internet e a multiplicação de meios ativos de propagação, vivemos um vício tecnológico.

Temos essa ideia de multi-tarefa inserido no contexto dos sistemas operacionais de computadores modernos que achamos que devemos ser assim também. As pessoas estão falando conosco e estamos ao mesmo tempo escrevendo sobre outra coisa no twitter, colhendo as plantinhas na Colheita Feliz e a cada dia achando mais e mais ferramentas para nos prender. Temos tão pouco tempo e estamos sempre correndo que vivemos na superficialidade: não damos mais atenção ao que as pessoas ao nosso lado estão falando, não nos aprofundamos nas coisas que gostamos, não valorizamos os momentos que passamos, não observamos as pequenas coisas, nem mesmo apreciamos beber um copo de água num momento crítico com relação à escassez por vir.

O Gonçalo Ferraz fez uma analogia muito interessante: imaginemos uma pessoa parada e que aos poucos começa a entrar em movimento até iniciar uma caminhada. Ao longo do tempo, vai aumentando a velocidade até começar a correr e então chega num ponto em que sai voando. Esse cenário representa o “boom” da informação há cerca de três décadas atrás. Quando um aluno questionou se devemos então continuar neste ritmo, lembrei de um antigo mito onde os homens queriam se tornar deuses e por conta disso ocasionaram eventos cataclísmicos. Fazendo uma relação metafórica, talvez não tenhamos surgido com o propósito de voar, afinal se assim fosse, já haveríamos desenvolvido asas.

Design é projeto e todo projeto surge no plano das idéias: deriva do plano mental, sendo preciso plasmar através de vários passos, até chegar a um resultado perceptível no mundo físico, sendo tangível ou não. Acredito que devemos transmutar nossas ideias e buscar um novo arquétipo: o de um ideal mais humano.

Rodrigo Scama, Tersis Zonato, Gonçalo Ferraz, Mileni Kazedani e Haroldo de Paula

Formar empreendedores foi o foco de atuação de várias instituições, acreditando-se que esses seriam os responsáveis pelo desenvolvimento do país. Porém quando se trata da qualidade de formação, é comum agregar valores universais na educação? De que serve um empreendedor com muito conhecimento técnico e pouca visão humanista? Precisamos de pessoas que aprenderam sobre matemática financeira e utilizam o saber para driblar os impostos?

Através da simulação de situações cotidianas, o sistema busca o questionamento dos alunos, relacionando valores como honestidade, respeito e responsabilidade.

No jogo não há vencedor ou perdedor. Através de estatísticas concretas geradas pelo sistema, os professores podem discutir com os alunos sobre cada um dos temas abordados nos oito módulos e sobre a importância de escolhas em suas vidas.

Vídeo promocional:

Clique aqui para assistir o vídeo inserido.

A resposta do Instituto Faber Ludens é o Cubezilla, uma metáfora de navegação baseada no Cubo Mágico de Rubik. Cada cor do cubo representa um grupo de websites: amarelo poderia ser para redes sociais, verde para buscas, azul para finanças ou o que mais o usuário quiser. Quando o mouse passar sobre a face, miniaturas dos sites correspondentes aparecem. Quando clicar no cubo, é possível trocar a face. A face pode ser maximizada, mostrando mais opções.

Além da navegação no modo tradicional (com o mouse), um cubo real pode ser usado como artefato para a interação com o navegador por meio de Realidade Aumentada. É possível usar gestos, como girar o cubo para mudar o lado, aproximar para um zoom das miniaturas e tocar cada face do cubo para abrir sites. Assim a navegação se torna uma experiência mais parecida com as atividades que realizamos diariamente, usando os braços e mãos, além de permitir que o usuário se livre do uso do mouse.

Vote no projeto Cubezilla no site Mozilla Challenge.

Desenvolvimento da ideia

Leonardo Spolador, Alexandre Ribeiro, Tersis Zonato

Melhores momentos da discussão sobre como usar um Cubo Mágico de Rubik como metáfora de navegação para o Firefox. No primeiro vídeo, há uma discussão conceitual:

A segunda parte possui alguns testes, incluindo uma demonstração usando o plugin Cooliris:

Grupo discutindo detalhes de metáfora de navegação:

Grupo:
Alexandre Ribeiro
Ana Carla Bortoloni
Bruno Duarte
Cassiano de Azevedo
Érico Fileno
Frederick Van Amstel
Fernando de Oliveira
Leonardo Spolador
Natália Veiga
Rodrigo Gonzatto
Samille Sousa
Tersis Zonato
Vicktoria Ribeiro

Vote no projeto Cubezilla no site Mozilla Challenge.

Tarcísio focou sua apresentação mostrando ferramentas e recursos para angariar usuários, conceitos de SEO, estratégias para campanhas publicitárias, etc.

Quando chegamos ao assunto de como manter o usuário em um site, chegou minha vez em apresentar alguns conceitos. Comecei abordando a discussão “o que é Web 2.0: um termo de marketing ou uma nova forma de conhecimento?”. Expliquei sobre alguns conceitos como a internet como uma plataforma, o usuário como colaborador, folcsonomia, etc.

Então abordei rapidamente sobre linguagens e tecnologias envolvidas no processo de desenvolvimento de um website. Enfatizei a importância da relação entre o designer e o programador, levantando possibilidades e restrições que o sistema pode apresentar. Ressaltei também a escolha entre quais tecnologias devem ser utilizadas dependendo do caso.

Então cheguei na parte principal que envolve os temas acessibilidade e usabilidade. Na primeira, defini o conceito como flexibilidade de acesso, mostrando que não apenas usuários com necessidades físicas dependem disso, mas outros fatores como limitações de dispositivo ou de software também podem impedir a interação. Apresentei o conceito de web standards, a padronização proposta pela W3C e o termo relativamente novo da web semântica, além de dar algumas recomendações para a melhoria dos sistemas.

Em usabilidade, defendi a facilidade de uso e mostrei os resultados que isso pode gerar. Conceituei um modelo prático de sistema usável e apresentei as 10 heurísticas de usabilidade de Jakob Nielsen.

Por fim apresentamos alguns cases da pH Design, mostrando como as tecnologias e os conceitos de acessibilidade e usabilidade foram empregados de modo a alcançar a melhor experiência do usuário em cada situação.

Confira abaixo os slides:

Baixe em PDF (908kb)

A descrição é sobre o objeto visto no trailer:

00000000000000000000
00000000000000000000
0000............0000
0000....OPEN....0000
0000.....THE....0000
0000.....BOX....0000
0000............0000
www.whatsinthebox.nl
00000000000000000000

Quando a tela principal aparece no site oficial, podemos ver um anel vermelho. É uma referência direta à caixa mística do vídeo. Procurando por evidências, a conclusão é que provavelmente o evento ocorre em 6 de agosto de 2018.

Cada quadrante manda o usuário para uma página com algumas coisas estranhas. Clicando no quadrante inferior, uma caixa de inserção de texto aparece na parte de baixo da tela. Depois de tentar inserir algumas palavras e não chegar a nenhum resultado, fiquei tão curioso e isso soôu como um desafio.

Passando com a seta do mouse sobre o anel, há uma sequencia de números hexadecimais mostrados na seguinte ordem:

0.0.F.F.C.F
F.F.0.0.D.0
8.E.0.1.F.F
D.A.F.F.0.0
F.F.0.1.0.1
0.1.D.4.F.F
0.0.0.B.F.F
4.2.F.F.0.0

A primeira coisa que me veio à cabeça foram os códigos de cor hexadecimais. Então procurei para encontrar que cores seriam essas mas não cheguei em nenhuma pista que representasse o conceito do video. Sem conclusões, tentei pesquisar sobre operações hexadecimais, mas não consegui linkar informações para resolver o quebra-cabeça.

No quadrante direito, existem alguns recortes de jornal com artigos e notícias sobre o incidente em vários idiomas. Depois de algum tempo, descobri que algumas letras podem ser clicadas. Tão logo encontradas as regiões clicáveis, apenas algumas letras são mostradas e elas formam a palavra EXPOSED.

Vasculhando o código HTML, encontrei estes comentários:

/snd/jables.mp3

Um sentimento estranho veio a mim assim que ouvi: há uma voz dizendo algumas coisas de trás para frente. Se você reverter o áudio, você terá: “local protection team report back”.

Soou como códigos militares/operações táticas. Me lembrou muito o filme Cloverfield, que algumas pessoas descobriram frases invertidas e muitas conexões entre o filme, vida real e a internet.

Na mesma página há também estes comentários:

www.babel-research.eu
some things will only be revealed through mirrors and light
Unmask the URL

A dica de que algumas coisas podem ser vistas apenas através de espelhos e luz faz referência à palavra “exposed”, por exemplo. Em monitores com alto contraste é muito mais fácil perceber as regiões através de um destaque de brilho sutil.

Entrando no site Babel-Research, é possível ver vários símbolos como o infinito e a imagem de um olho no topo da página. Na parte inferior, há o ícone de um gato que desaparece e aparece após alguns segundos. E o mais curioso: um logo do Hanso Foundation (uma fundação fictícia de pesquisas científicas criada para a série de TV Lost formada pelo personagem Alvar Hanso.

Essa foi a primeira pista que eu tinha para digitar no campo de texto. E devo dizer que quando digitei a palavra “hanso”, o resultado me causou arrepios: um sentimento estranho de medo e dúvida. Se você é um fã de Lost, tente isso!

Checando o código HTML do site Babel-Research encontrei os comentários:

/snd/hidden.mp3

Revertendo o som, você irá ouvir: “yankee november”

Os códigos hexadecimais mostrados anteriormente estão de volta, escondidos em classes CSS chamadas “lock” e “combi”:

... class="combi" key="00ffcf" ...
... class="combi" key="ff00d0" ...

Tentei muitas combionações na campo de login (Direct Access login) mas não obtive resultados.

Há uma div com uma imagem chamada “schrodinger.gif”. Essa imagem é a do gato mencionado anteriormente. Ao final do código há um estranho comentário que parece ser um palíndromo. Se ler atentamente, irá encontrar a frase “Was it a cat i saw”:

WASITACATISAW

Buscando as outras páginas, encontrei outros arquivos de som escondidos nos códigos-fonte:

/snd/ragekage.mp3

Revertendo o som, você irá ouvir: “we have a 14-juno situation”.

Depois de passar algum tempo tentando alcançar todas as informações, fiquei convencido de que o conteúdo ainda estava escondendo muita coisa. Mais tarde nesta mesma noite, passei um tempo procurando na web para mais respostas e depois de ler alguns fóruns e tópicos, encontrei um link que possui muita informação sobre isso tudo.

É importante analizar como o viral foi construído na web, os resultados e o impacto em comunidades online. Quanto ao design e desenvolvimento web, há grande apelo para as pessoas dessas áreas (principalmente) e também do público em geral, sempre provocando e causando sentimentos de curiosidade, medo e dúvida.

Esse caso não está completamente resolvido. Acredito que ainda há muito mais por vir: talvez uma sequencia… talvez um filme… talvez um jogo… ou talvez, um incidente?