DESIGNER Generalista

BRUNO

ZIMMERLE

AROUCHA

ESTUDOS DE CASO EM 04 FASES

Projeto: "A lua e o loureiro"

"[...] certa vez trabalhei com um jardineiro. Ele me passou uma tesoura e me disse para cortar um loureiro na forma de uma bola [...] não conseguia atingir a forma de uma bola, por mais que me esforçasse. Uma vez tirava demais de um lado, outra vez de outro. [...] O jardineiro falou, decepcionado:

‘Certo, isto é uma bola, mas onde está o loureiro? ' ”

( Bertolt Brecht )

INÍCIO

SERVIÇOS

EXPERIÊNCIA

TRABALHOS

CONTATO

PROJETO

A LUA E O LOUREIRO

EM 4 FASES

.

.

.

.

.

.

 

OBSERVAÇÃO

Fase 01 02 03 04

 

 

Visão geral do problema

Como ocorre de tempos em tempos com todo designer, eu resolvi atualizar meu portfólio. Só que desta vez fazendo um site totalmente novo, do início ao fim. Usando as heurísticas de Jacob Nielsen e os 10 princípios do bom design de Dieter Rams, este portfólio foi feito e posto no ar, somente com verificações heurísticas, sem validações de uso. Era todo em preto e branco; todas as interações eram baseadas no contraste entre “aceso” e “apagado”; só era navegável por um único botão, uma seta. Meu objetivo na época era fazer dele uma peça simples de atualizar e editar, além de expressar um “rigoroso minimalismo”.

Nenhum texto superava os 200 caracteres (que normalmente só cabiam algo como “Este projeto foi realizado com o design thinking adaptado de...” ou “Este projeto foi realizado com o double Diamond em um design sprint

 

Um portfólio sóbrio e modesto. Coloquei ele no ar com a certeza de que era um recipiente limpo e transparente do único conteúdo que importava: os meus trabalhos. Como devia ser um “bom Design”. E segundo a opinião gentil e duvidosa de amigos e familiares, ele era bom! Era ótimo!... “Mesmo sendo meio sério.”

 

 

Talvez fosse sério mesmo, mas os fatos demonstravam que ele estava longe de ser bom. Passados dois meses, o Google Analytics entregava indícios de fracasso: não havia nenhum acesso espontâneo, nenhuma interação relevante (por exemplo, não houve nenhum preenchimento no formulário de e-mail), parte significativa dos usuários não passava da primeira página, o tempo médio de acesso era de pouco mais de 5 minutos. Cinco minutos. Ora, ou meus usuários tinham uma leitura dinâmica ou eu estava abusando da paciência deles deixando OITENTA trabalhos nas galerias.

Investigando o problema

Resolvi correr atrás do prejuízo e fiz um questionário semiestruturado, com 11 perguntas de múltipla escolha, a resposta de cada uma delas gerava uma pergunta solicitando uma resposta de no mínimo 300 palavras, de maneira que cada usuário respondeu 22 perguntas. Uma parte delas era para avaliar o funcionamento da interface e outra a satisfação da experiência de uso. Os usuários selecionados pertenciam ao público que meu portfólio se destinava, que são: possíveis clientes, recrutadores, outros designers e possíveis colaboradores. A amostragem total foi de 20 Usuários.

Conclusões gerais da investigação

A interface e o sistema, apresentou um funcionamento entre ruim e regular. Nenhum problema de funcionamento, como travamentos ou carregamentos lentos foram relatados na versão Desktop, a não ser uma queixa quase generalizada de que muitos dos links dos sites que eu já tinha feito na categoria de “web design” não funcionavam mais, ou porque a empresa não existia mais ou porque mudou de domínio, fazendo desta aba uma coletânea de links quebrados.

Eu não havia especificado em que tipo de dispositivo o usuário deveria testar o portfólio, mas 4 usuários que o testaram no celular relataram alguns problemas, um dos principais era a dificuldade de passar de uma imagem para outra, o que os fazia desistir de ver todas as imagens. Nenhuma dificuldade de legibilidade foi relatada.

Sobre a experiência, as impressões foram bastante negativas e quase ninguém economizou as 300 palavras para expressar insatisfações. Apesar do portfólio ter sido projetado para ser enxuto e minimalista, todos os usuários expressaram algum tipo de reclamação sobre a grande quantidade de informação e uma experiência cansativa. A avaliação do visual e do layout ficou entre o péssimo e o regular, alguns relataram “monotonia” e “falta de ousadia”. Todos responderam que havia um excesso de imagens na galeria e dois usuários detalharam essa impressão explicando que seria mais interessante alguma explicação sobre o processo criativo dos trabalhos “as legendas são curtas e como há muitas imagens, elas acabam incomodando por não dizerem quase nada”. Acentuando este problema, mesmo todos dizendo que havia trabalhos em excesso nas galerias, a maioria dos usuários identificaram que não encontraram tudo o que esperariam de um portfólio. Ah, cem por cento das pessoas disseram que NÃO voltariam ao portfólio e NÃO o recomendariam a um amigo.

 Os Resultados foram um tanto decepcionantes.

Eu pensava que fazer um portfólio minimalista com muitos trabalhos seria uma forma de compensar uma coisa com a outra, de expressar simplicidade e diversidade, matando dois coelhos com uma cajadada só. Sendo que o questionário demonstrou que este portfólio tinha uma forma vazia e desinteressante e um conteúdo volumoso e cansativo.

Como o Jardineiro de Brecht, ao podar o Loureiro em forma de bola, eu formei uma bola e sumi com o Loureiro. E o pior, que esta forma tão “modesta” não cumpria nenhum propósito. Ora, se eu estou projetando o site, eu poderia muito bem fazer um portfólio mais singular, mais impactante (se fosse para não ter nenhum diferencial, ser austero e discreto, então melhor e mais fácil seria só ter uma conta no Behance mesmo).

E esta escolha de ter poucos textos, acabou não adiantando nada, porque nenhum trabalho tinha suficientes explicações sobre os processos criativos que uso, o que tira ainda mais o sentido de ter tantas imagens expostas. Isto sem falar no péssimo funcionamento dele em dispositivos móveis. E a escolha desta estética despojada de qualquer personalidade tinha a intenção de expressar o que exatamente? Este estilo “feio, forte e formal” teria algo a ver com meu jeito de trabalhar?

Então por que este portfólio estava no ar, ora bolas?

Definição do problema

O questionário revelou que o portfólio não conseguia expor meus trabalhos nem minha forma de trabalhar porque ele tinha uma forma desagradável e um conteúdo desorganizado, o que causava uma experiência incômoda e cansativa.

Para resolver este problema definido, elenquei um conjunto de providências a serem tomadas em ordem de prioridade:

Backlog de problemas:

1. Reduzir o esforço do usuário

2. Implementar responsividade

3. Adicionar explicações de processos criativos

4. Depender menos de sites de antigos clientes

5. Apresentar um visual de impacto

6. Tornar a experiência do usuário mais agradável

 

Enquanto listava os problemas, escrevendo e arrancando post-it's de uma quadro,  lembrava do dilema do conto de Brecht. Eu precisava podar, mas também precisava dar vida ao portfólio. Cortar, mas também fazer crescer.

Além destes problemas mais urgentes, era preciso providenciar soluções mensuráveis, algo que eu pudesse testar e avaliar constantemente.

Este conjunto de problemas deveria ser resolvido na forma de um protótipo testável em, no máximo, 30 dias (eu estava levando em consideração na época o meu período de férias, então eu só teria 30 dias para uma dedicação mais intensa a este projeto).

Para saber em quais premissas eu poderia me apoiar (certezas) em quais propostas de solução eu deveria validar (suposições) e quais perguntas projetuais eu deveria responder com os testes (dúvidas) eu organizei alguns dados nesta matriz CSD:

Muito bem, para elaborar uma proposta testável, eu precisava esboçar um conceito, algum princípio que pudesse dar coesão ao conteúdo escrito, ao visual, à navegação, à arquitetura de informação (com que tipo de estrutura?), à divisão de categorias (quantas e quais?), descrever processos criativos (quais processos? De que forma?) ...

 

 

E ela me aparece debaixo da mesa. Minha velha amiga Lua, sempre garantindo momentos de desviar o foco, de tomar um ar livre em um passeio. Minha parceira de distrações.

Aliás, não só minha: eu tenho certeza que as pessoas ainda insistem em me ver e me visitar com o pretexto de ver e visitar Lua.

“Lua dá engajamento” pensei um pouco de brincadeira. Mas também um pouco sério.

Era isso, já estava distraído demais, era hora de descansar e depois voltar ao trabalho.

Fui deitar na rede e Lua veio comigo (quando ela era mais jovenzinha, adorava cochilar na rede). Entre um balanço e outro, me pareceu uma bonita coincidência que processos criativos como o Double Diamond se repartam em quatro, da mesma forma que as fases da lua se repartem em quatro, do ponto de vista linear.

 

 

 Do ponto de vista cíclico, muitos processos iterativos como o Design thinking, e quase todo tipo de Design sprint começam com uma etapa análoga com a última, com três etapas distintas entre si no meio.

 

E por falar em ciclos, é interessante também pensar que a Lua (não aquela que dormia na rede, a outra) seja não só uma fonte de organização de diversos processos, mas também um sinal visual da passagem de diversos ciclos naturais.

Organizando acontecimentos (a maré, a reprodução dos animais, o crescimento das plantas) como também sinalizando visualmente as coisas que acontecem. Um instrumento maravilhoso para dividir o tempo num espaço visual.

Não é à toa que ela remete a um vasto repertório imagético presente em todas as partes do planeta. Inclusive, minha amiga dorminhoca foi batizada de lua justamente porque quando foi adotada ela tinha uma manchinha (que depois desapareceu) quase amorfa na sua testa que lembrava vagamente uma lua.

E por que lembrava? Ora, porque a imagem da lua é muito reconhecível, muito simbólica, compreendida em qualquer parte do mundo, que afeta inclusive diferentes animais que...

 

Hum...

.

.

.

.

.

.

 Aí estava, tinha encontrado algo promissor. Era hora de sair da rede e começar o trabalho.

Você também, Lua.

 "...Hein..?"

.

.

.

.

.

ESTRATÉGIA

Fase 01 02 03 04

 

 

Minha memória é fotográfica, me lembro com se fosse hoje, eu e Lua estávamos a todo vapor, muito animados para trabalhar.

" [...] Se você precisa de um bicho trabalhador, vai adotar um CAVALO, porque EU MESMA não pretendo sair dessa rede."

Com este conceito “Lunar” que seria provisório (e acabou sendo definitivo) eu também usaria a amiga Lua aqui e ali para adicionar o humor e a personalidade que tanto faltava no portfólio anterior. E também o diferencial que a definição do problema identificou, afinal, transformar uma cachorra em uma cohost num portfólio de design soava excêntrico demais para que fosse um recurso que muita gente usasse (eu nem precisava fazer um benchmark para ter certeza que esta imprudência não andava na moda). Para não ser um completo rebelde, adotei o uso de “página única” já que boa parte dos portfólios na pesquisa de similares estavam neste formato.

distribuindo a informação

A decisão anterior de limitar tudo a legendas de 200 caracteres era uma padronização vazia que não cumpria nenhum propósito, portanto este limite que eu determinei acabara de ser revogado por mim mesmo. O que era um perigo, pois eu precisava cumprir dois itens do backlog que entravam em conflito tratando-se de textos: “1- Reduzir o esforço do usuário” “3- Adicionar explicações de processos criativos.” Isto é um dilema parecido com o do “loureiro em forma de bola”. Como reduzo o esforço do usuário com textos mais longos?

Salomonicamente decidi testar o seguinte modelo: as imagens teriam legendas curtas que não passariam de duas linhas (a unidade seria por linha e não mais por caractere) na menor resolução do site, ou nem mesmo teriam legendas, pois a síntese do processo criativo que utilizo estaria explicada em um texto maior, na introdução do próprio portfólio na página de “quatro fases criativas”. Esta proposta era um pouco arriscada, mas era razoavelmente testável, então, valia a pena tentar.

As galerias, estas deveriam ser reduzidas mais drasticamente, sem choro nem vela. Se antes eu tinha 80 trabalhos distribuídos em 9 categorias: Identidade visual, design editorial, web design, ilustração, animação, edição de vídeo, design gráfico, design de produto e design digital, naquele momento eu tinha que fazer um corte imenso: 4 categorias, com 4 trabalhos em cada. E aqui tinha que ser quatro mesmo, porque a ideia de “ciclo” (1, 2, 3, 4, 1) não fazia sentido aqui. As categorias foram separadas em:

1- Design visual

2- UI/ web design

3- Motion design

4- 3D design

 

 

Com receio de que a parte de “trabalhos” talvez não recebesse a importância que deveria, elaborei um trajeto de uso em que todas as páginas teriam uma sugestão que faça o usuário ir diretamente para “trabalhos:

 

Dividindo a informação

O conceito baseado em figuras lunares me permitiria fazer os primeiros testes, tomando decisões rápidas de interface. O grid? Múltiplo de quatro ou com três divisões contidas e duas divisões análogas entre si (1, 2, 3, 4, 1). Quantas seções teriam o portfólio? Quatro ou (1, 2, 3, 4, 1). Quantas galerias? Quantos trabalhos por galeria? Quantos... Quatro, tudo quatro. Precisava de decisões rápidas e esta era a que eu tinha.

O princípio do (1, 2, 3, 4, 1) me permitia dividir algumas coisas por cinco, de forma que parecia quatro, assegurando duas divisões iguais ou semelhantes, um princípio que seja igual ou semelhante ao fim. Um desígnio estrutural, muito adequado para textos e seções. Isto já me permitiu esboçar um “rabiscoframe” horroroso (boa sorte para conseguir entender):

Tipografia

A tipografia, para acelerar esta primeira versão de teste, usaria a mesma família utilizada no portfólio anterior, a Trebuchet MS, com as mesmas configurações projetadas anteriormente. Como na definição do problema não emergiu nenhuma questão sobre a tipografia, não fazia sentido reprojetar esta parte da interface.

Mas, para que o conceito da divisão por quatro fosse sugerida para o usuário, todos os caracteres numéricos seriam da família da Georgia, que marca um bom contraste com a Trebuchet, na forma, mas sobretudo no alinhamento.

 

Repertório gráfico

De momento, não queria decidir muitas coisas sobre o visual da interface, pois eu queria uma versão beta que eu pudesse ir ajustando conforme os testes evoluíssem, mas algumas coisas foram se estabelecendo naturalmente. Embora eu soubesse que usaria fotos no portfólio, eu tinha quase como certo que o visual seria Flat e não Skeumorfista, já que o flat design seria o mais imediatamente recomendável para a interface responsiva que almejava.

Neste sentido, alguns aspectos do portfólio anterior poderiam ser aproveitados, pois ele se baseava em alto contraste (branco/ preto, aceso/ apagado), isto produzia bons resultados de uso operacional e era conceitualmente simples para manejar naquele projeto. Evidentemente que no projeto da Lua e o loureiro eu precisava considerar os aspectos visuais do conceito de “Lua”, que disponibiliza um repertório muito mais vasto e, portanto, muito mais perigoso. Me precavendo desta infinita fonte de possibilidades, reaproveitando o quarteto de “branco/preto, aceso/ apagado” passei a usar o “preenchido/ não preenchido, aceso/ apagado”, adotei os grafismos básicos de gravuras astronômicas da idade média, principalmente do mundo islâmico, pois lá havia uma riqueza geométrica baseada em elementos muito simples: o ponto vazio, o ponto preenchido, a linha contínua e a linha fragmentada.

 

Cores

Mas e as cores, poderiam ser pretos e brancos de novo? Era tentador, mas era melhor ter uma escala básica de 3 cores principais e 3 tons suplementares para assegurar uma hierarquia de informação com categorias mais variadas (e com um contraste menos agressivo, já que um dos objetivos era reduzir o esforço do usuário). A escolha da nova paleta de cores foi feita com a ajuda de minha velha amiga:

 

Coletar cores para depois fazer ajustes finos no contraste é algo bastante trivial; não valeria a pena detalhá-las aqui. Mas a DISTRIBUIÇÃO destas cores, foi, isto sim, uma decisão projetual que implicava em riscos, e demandava maiores testes.

No portfólio anterior, a distribuição entre o branco e o preto era de 95% + 5%, fazendo com que o branco fosse um elemento solitário de destaque, sem uma competição agressiva de um contraste 50% +50% de preto e branco. Aliás, agressiva e também silenciosa, um contraste intenso permite juntar o pior dos dois mundos.

Já sabemos o que esta e outras providências de baixa intensidade sensorial provocou no portfólio anterior. Neste com uma paleta de três cores (as outras duas seriam só para efeitos de hover, ou links externos), recomendaria uma abordagem comum em UI: a proporção de 60% + 30% + 10%  que é a mais usada e, portanto, a mais bem testada. Mas, sabendo da oportunidade de fazer testes exclusivos para aquele protótipo, decidi distribuir as cores da paleta dentro desta proporção fixa, mas alternando a sequência desta distribuição sempre que cada parte do portfólio “mudasse de assunto”. Garantir consistência visual, com variações em bandas regulares tem um nome: ritmo.

Não bastava fazer um protótipo mais colorido, era preciso fazê-lo mais dinâmico também. Aquilo que se entende por “harmonia visual” é justamente excluir a “agressão” sem recorrer ao silêncio. Claro que existem ritmos que incomodam mais que um ruído repetido, portanto isso também deveria ser objeto de atenção no teste posterior.

Protótipo

O loureiro e suas folhas cortadas

Excetuando os detalhes do sistema (o HTML5, o CSS3, o Javascript) este foi o desenvolvimento do protótipo. Não fiz uma versão responsiva, mas sim uma versão desktop e outra mobile para poder deixar a elaboração de uma versão responsiva da interface para quando tivesse os primeiros dados concretos de uso.

Este protótipo não tinha nenhum conteúdo nas galerias da página “trabalhos” pois se desejava observar a experiência de uso deste sistema, sem que a avaliação subjetiva de trabalhos na galeria interferisse na observação dos usuários. Não foi bem documentado na época, mas posso dizer com quase certeza que toda esta parte até aqui se deu num lapso de uma semana. Ainda me restavam 3 semanas de trabalho, estava relativamente adiantado no cronograma.

Notícia boa hein?

 

"Ah…Ô! sim, estou tão radiante. Como conter tamanha emoção?"

Restava agora conduzir a parte que deixara de fazer na versão passada: as validações com usuários reais. 

.

.

.

.

.

TESTAGEM

Fase 01 02 03 04

 

Teste piloto

Esta observação teve uma amostragem bem menor que a anterior, desta vez foram 6 sujeitos, para garantir uma observação mais próxima e focada. Todos tiveram sua tela e áudio gravados (foi sugerido que os usuários poderiam falar livremente enquanto faziam uso do protótipo). A eles foi entregue o seguinte conjunto de tarefas: abrir o link do portfólio, baixar o arquivo contido em uma das páginas de nome "currículo profissional", enviar uma mensagem com um "olá" no formulário do e-mail e voltar para o topo, isto na versão desktop. Na versão mobile foi pedido que eles baixassem o "currículo acadêmico" depois preenchessem o formulário com o e-mail dizendo "olá" (esta repetição foi feita, entre outras coisas para verificar se a versão mobile era coerente com a desktop, para além de avaliar o bom funcionamento de um ou de outro). Em seguida, foi aplicado o mesmo questionário semiestruturado do teste anterior para fazer uma comparação dos resultados.

Considerações sobre a interface

A interface e o sistema da versão desktop e mobile, apresentou um funcionamento entre regular e ótimo em 100% das impressões. As telas gravadas denunciaram um carregamento bastante lento, embora isso não tenha despertado nenhuma expressão de insatisfação, seja nos questionários, seja no áudio gravado. Todas as tarefas foram concluídas com êxito parcial, pois ninguém utilizou a seta de “voltar para o topo”, conforme era esperado, mas todos navegaram no site eficazmente à sua maneira, tanto na versão desktop quanto na mobile.

Considerações sobre a experiência

Sobre a experiência, as impressões foram melhores que o esperado, sendo considerada ótima em 100% dos casos. Todos avaliaram a experiência como “fluida e natural”, ninguém relatou dificuldades de entendimento nem do conteúdo do protótipo, nem do conceito que o regia. Apesar de todos terem passado por todo o portfólio, com mais interesse do que pressa, nem todos parecem ter lido o texto das “4 fases criativas” por inteiro (havia razoável certeza que apenas um dos usuários leu o texto completo) e, lembrando que nesta versão não havia galerias, podia-se duvidar se realmente o esforço do usuário havia sido diminuído. Esta informação precisava ser melhor medida no teste final.

A avaliação do visual e do layout também colheu máxima satisfação, nas observações por áudio e por escrito, todos chamaram atenção para a presença de Lua, que era muito "engraçado", que era "criativo", etc. Depois que a página de erro apareceu, em dois casos os usuários buscavam links que não funcionavam só para ver a página de erro novamente, e as gravações de tela indicaram que todos pararam para ler as legendas das imagens onde aparecia Lua, mesmo aqueles que não pararam para ler o texto das “quatro fases do processo criativo”. A captação de áudios serviu para colher risos e expressões como "oohh" ( difícil reproduzir por escrito, mas seria algo no tom de "que fofinho". Coleta de dados qualitativas tem destas coisas).

O assunto mais recorrente entre os entrevistados foi isso:

 

 Isto era uma boa notícia? Talvez, páginas de erro e interdições de imagem costumam ser frustrantes ou desagradáveis, não é comum gerar tamanho entusiasmo. Mas... será que isto deveria chamar tanta atenção assim? Isto serve ao propósito do projeto? era preciso investigar.

 O usuário n° 3, o único que conhecia o portfólio anterior, relatou que o protótipo era visualmente mais “carregado” que o antigo, tinham muitas informações em cada página, mas isto “não era necessariamente uma desvantagem, era uma diferença”. Eu precisava de uma impressão mais objetiva a este respeito, então perguntei na entrevista se ele identificava algum exagero visual. Ele disse que não, mas ao mesmo tempo disse que às vezes não sabia por onde começar a ler “mas isto não é um problema, é uma forma de aproveitar também”, voltou a reforçar.

Dado que isto era um site e não uma pintura pendurada em uma galeria, isso provavelmente era sim um problema. Era preciso investigar isso também. Além deste, emergiu um problema ( aliás, não sabia se era um problema ou uma oportunidade) inesperado: a presença de Lua não só não causou nenhum mal entendido ou falha de uso, como também despertou mais interesse do que os outros conteúdos do portfólio, dado que o texto de introdução, aquele que só um usuário leu, gerou menos interesse do que as legendas das fotos em que Lua aparecia.

Por um lado, isto era um alívio, pois meu medo era que alguém achasse o site com cara de um petshop ou coisa do tipo.

Na pesquisa quantitativa, todos disseram que encontraram MAIS do que esperavam de um portfólio (lembrando que as galerias estavam vazias, embora suas respectivas categorias estivessem indicadas) no entanto, na parte dos comentários dois dos usuários disseram sentir falta de alguma parte que mostrasse minhas experiências profissionais, mesmo tendo disponibilizado o currículo para download. Era razoável supor que um recrutador pensasse o mesmo.

Uma coisa ficou definitivamente provada: realmente Lua engaja muito mais do que eu.

Por falar em provas, vamos ver o que já pôde ser verificado, validado e respondido da matriz CSD:

Backlog- atualizações com o teste piloto.

1. Reduzir o esforço do usuário

2. Implementar responsividade

 

NÃO AVALIADO – A implementação foi posteriormente feita na fase 4.

 

3. Adicionar explicações de processos criativos

4. Depender menos de sites de antigos clientes

NÃO AVALIADO – Implementação foi posteriormente feita no teste final, ainda aqui na fase 3.

5. Apresentar um visual de impacto

6. Tornar a experiência do usuário mais agradável

 

Conclusões preliminares

O item 2 do backlog: “Implementar responsividade” só seria testado na fase 4, mantendo o protótipo numa versão desktop e outra mobile pra o teste final. O item 4 do backlog “Depender menos de sites de antigos clientes” seria testado ainda na fase três, escolhendo 4 interfaces para colocar na categoria “UI/ web design” que não dependesse da manutenção de sites de terceiros.

 

Teste final de uso

Depois de processar todos estes dados, alguns ajustes foram feitos no protótipo, mais uma vez ele foi enviado aos sujeitos para que eles realizassem a mesma tarefa. Em seguida, eles receberam um questionário semiestruturado, elaborado exclusivamente para cada um deles, baseados nas suas impressões passadas. Com as respostas destes novos 6 questionários em mãos, mais alguns ajustes foram feitos e com isso, se iniciou a elaboração do site responsivo, que passou por testes de funcionamento para depois finalmente ser enviado ao servidor, sendo desta maneira publicado.

Preparações para o teste final com usuários

A presença de Lua não só não causou nenhum mal entendido ou falha de uso, como também despertou mais interesse em detrimento de outros conteúdos do portfólio. O texto de introdução, aquele que só um usuário leu, gerou menos interesse do que as legendas das fotos em que Lua aparecia. Por isso, o texto dos processos criativos foi dividido em três partes, em lugares diferentes do portfólio, sempre próximos de alguma “manifestação” de Lua ou de uma animação que pudesse desacelerar o olhar para um ponto de atenção específico. Foi adicionada uma seção a mais, de “Experiências” onde se descreve meu currículo resumidamente.

É, eu sei, isso contradiz o conceito desenvolvido na fase dois. 

 

 

Calma, calma, deixa eu explicar...

 

Era para isso que servia o teste, para ver o que funciona e o que não funciona. E o propósito que o portfólio deve satisfazer não é seguir cegamente por um caminho ou por outro. Lembram do “fantasma do bom design”? pois bem. No início do livro “Elementos do estilo tipográfico” há uma bela passagem que nos dá alguma segurança para “alcançar pontos individuais de saída”:

"[...] sinta-se à vontade para sair da estrada quando quiser. (Esta abertura, aliás, é o que define mais precisamente a utilidade de uma estrada: alcançar pontos individuais de saída.) Fique também à vontade para quebrar as regras - quebre-as com beleza, deliberadamente, bem. Esse é um dos fins para os quais elas foram criadas."

(Robert Bringhurst)

Bem, prossigamos. Para garantir uma melhor navegação, as setas de passar para a próxima página e subir para o topo foram destacadas do seguinte modo: primeiro a seta de passar para a próxima página, (que era a mais importante, pois “ensinava” o usuário a utilizar a seta de “voltar para o topo”) ganhou uma animação mais exagerada de “bounce in down”.

Adicionalmente, os elementos em volta dela tiveram uma inclusão de uma animação em paralax que ao ser ativada com o hover ela“bagunçava” levemente a página inicial, fazendo com que os usuários se demorassem mais nela (caso quisessem fazer esta interação) fazendo com que eles movimentasse o mouse mais vezes neste lugar, encontrando a primeira seta a partir de um outro efeito de “hover” em amarelo e com um efeito de “pressed” com o grafismo de “luz” do repertório  visual.

 

 Para garantir a coerência da interface, o mesmo estado de atividade/ inatividade foi colocado em outros elementos clicáveis.

 

 

Tentando resolver o problema de “não saber por onde começar a ler” os conteúdos de cada página tiveram o contraste acentuado na forma, nas cores e desta vez também nos movimentos.

Como nem todos tiveram paciência de ler o texto sobre o processo criativo, como ninguém utilizou a seta clicável, mas todos tiveram uma impressão positiva dos “avisos” de Lua, foram incluídos mais dois avisos para encorajar uma tarefa mais exitosa nestes dois quesitos, tanto da navegação quando da leitura dos textos ao longo do portfólio: 

 

 

 

 

Inclusive, saibam que eu recebo este tipo de ameaça todo o dia.

 

“(Risos diabólicos)”

Fica a denúncia.

Adicionalmente, o protótipo recebeu todos os 16 trabalhos na galeria. Assim, se concluiu a preparação para o teste final.

Teste final de uso- Conclusões

Sobre a interface

Todos os usuários cumpriram a tarefa, com 100% de êxito, a diferença entre os tempos de cada um não foi tão diferente como no teste anterior, pois todos eles se comportaram de uma maneira muito parecida, inclusive com a leitura de todos os textos e o uso das setas de “ir para a próxima página” e “voltar para o topo”. Ninguém notou, pelo menos não conscientemente, a inclusão de animações nesta versão diferentemente da anterior, o que nos leva a concluir que os objetos animados não perturbaram o uso de alguma forma negativa. O que os questionários e a observação não revelaram concretamente foi se estas animações contribuíram para hierarquizar a ordem que as coisas deviam ter ao serem lidas/ clicadas. Ou seja, tampouco foi identificada uma contribuição positiva. Isto era algo para investigar no futuro, mas de momento, elas (as animações) foram mantidas. Mesmo com a inclusão das imagens nas galerias e da sessão suplementar de "experiências" na página, não se observou nem na gravação de tela, nem nos áudios, nem nos questionários, nem na posterior entrevista qualquer sinal de incômodo e/ou esforço por parte do usuário.

Sobre a experiência

Não tratarei aqui das impressões sobre os trabalhos nas galerias, pois como disse, isto não vinha ao caso. Sobre o protótipo avaliado, mais uma vez, surgiram várias impressões positivas sobre Lua, todos acharam sua presença muito engraçada, mesmo sem o elemento surpresa do teste anterior. Algumas impressões interessantes sobre os textos foram compartilhadas, como “achei instrutiva esta parte que relaciona o design com a sapataria [...]” “Este texto do cozinhar para experimentar[..] poderia se tornar um texto maior[...]” Estas observações levam a crer que os textos são relevantes e contribuem para o entendimento geral do processo criativo que utilizo. Na entrevista não estruturada, todos os sujeitos expressaram o mesmo desejo e a mesma impressão contraditória: todos queriam mais inclusões de Lua, mas todos também achavam que “os outros” poderiam não entender muito bem proposta. Poderiam não entender a presença de Lua ali, estes "outros".

Eu confesso que desde o início eu compartilhava deste mesmo receio. Mas, pelo menos com estes resultados apresentados, ninguém expressou nenhum tipo de confusão ou dúvida, ninguém pensou que esta página pudesse ser um site de um pet shop ou coisa do tipo (lembrando que eu entreguei o protótipo sem explicar nada sobre o site). Tanto os sujeitos participantes do teste como eu parecemos subestimar “os outros”. Mas este julgamento se baseia em algum dado concreto?

Não, diante de todo este estudo, isso não passava de um palpite.

Mesmo que a amostragem de usuários tenha sido relativamente pequena, a partir dela acreditava-se que se poderia sustentar a hipótese de que seria um tanto absurdo se alguém deixasse de identificar o site como um portfólio de design porque viu a imagem de uma cachorra. Talvez, a linguagem possa ser considerada como “inadequada”, mas mesmo o conceito geral justifica a presença de Lua. E mais: pelas impressões de alegria e carinho (sim "carinho” mesmo) observadas, acreditava que o risco de mal entendidos era bastante aceitável. Dito isto, 

.

.

.

.

.

.

.

.

.

.

.

“Vai, chegou a hora”

 

Já tínhamos informações suficientes para fazer a versão responsiva definitiva e colocar o portfólio no ar. Queria adiar um pouco, fazer uns aprimoramentos, mas, não restou mais nenhuma pendência para ser testada. Hora do lançamento, que venha a fase 4. Eu só vou alí tomar um cafezinho e já volto.

.

.

.

.

.

 

SOLUCIONAR ( para OBSERVAR )

Fase 01 02 03 04

 

 

 

 

Olá, quem quer que esteja lendo. Aquele "já volto" demorou um pouco, mas o que importa foi que voltei e mesmo que não pareça, estou me sentindo mais ou menos bem.

A versão totalmente funcional e responsiva ficou pronta, demorou semanas, estourou o prazo, em alguns dias. Mas como foi eu mesmo que estabeleci o prazo…

Dessa vez eu deixo passar.

 

Aê fera, bom trabalho!

 

Antes dos finalmentes, vamos lá dar uma olhada no backlog?

✔ Reduzir o esforço do usuário (soluções implementadas: validadas)

✔ Implementar responsividade (soluções implementadas: validadas

✔ Adicionar explicações de processos criativos (soluções implementadas: validadas)

✔ Depender menos de sites de antigos clientes (soluções implementadas: validadas)

✔ Apresentar um visual de impacto (soluções implementadas: validadas)

✔ Tornar a experiencia do usuário mais agradável (soluções implementadas: validadas)

 

 

Em menos de três meses o google analytics passou a registrar um tráfego espontâneo mais de 5 vezes maior, passamos a ficar bem ranqueado no buscador da google com certas palavras-chave (as vezes fico em primeiro lugar sem pagar um centavo de anúncios), minha caixa de entrada passou a receber mensagens tanto de pedidos de orçamento, como coisas aleatórias como: “Beijo p Luaaaa” ou desaforos como “a lua me traiu” ( eu respondo a todos com abraço e um questionário de satisfação ). Em tempos de tik-tok o tempo médio de visualização em lapsos superiores a 14 dias dele já passou de 25 minutos.

Vinte e cinco minutos! Toma essa, New York times!

Tudo por causa de uma ideia que rapidamente puxava outra. Tudo por causa da manchinha na testa de Lua, mas também da marca indelével que ela mesma costuma deixar nos corações que batem por aí.

Enfim, o loureiro tomou uma forma.

 Uma forma de Lua.

E mais um ciclo termina

O portfólio é cheio de trabalhos, do mesmo jeito que uma planta é cheia de folhas, mas não só isso. Também é a expressão da forma com que o trabalho é feito, a forma do pensamento de seu autor, tal como uma planta em “forma de bola” é uma façanha de um bom jardineiro. Era preciso fazer cortes, mas eu também deveria permitir o crescimento de novas ramas em outras direções. Era preciso garantir que aquela forma tivesse algo VIVO, algum elemento pessoal, com o conteúdo daquilo que eu faço associado com uma parte daquilo que eu sou.

Isto era tão essencial como manter a vida de um loureiro.

Antes isso parecia difícil. Era tão mais fácil a neutralidade do preto e o branco. Um pedaço de uma descrição pessoal sempre parecia ou incompleta ou exagerada. Quando era muito sintética, não tinha muita personalidade, quando era muito expressiva, me sentia exposto demais.

“[...] Uma vez tirava demais de um lado, outra vez de outro [...]”

 

Quando eu não sabia como mostrar este meu pedaço, minha amiga Lua me deu o sinal de que isto era muito fácil

De que maneira mais fácil de mostrar um pedaço de mim

 

 

 

Era mostrar um pedaço de nós.

 

Ah, caso você não tenha vindo de lá, o portfólio está aqui:

http://www.bruno-za.com.br/

 

O ciclo que começa

Fase 01 02 03 04

 

Cuidando do loureiro, pouco a pouco, eu via que crescia uma ramificação.  Cortando as folhas em volta, descobri que não era só uma rama.

Lá no portfólio nasceu uma nova necessidade:

 

 Um novo loureiro.

Mas este era novo, antes de podar, tinha que fazê-lo crescer forte.

Esta necessidade era de abrir um espaço para expor estudos de caso. Um espaço para trabalhar com textos mais longos ( beeem mais longos), com uma linguagem mais projetual, mas também mais livre, onde eu pudesse explicar os produtos do ponto de vista do contexto de uso, expondo as fases do processo de criação.

Em quantas fases?

Em quatro, é claro =)

Este é o primeiro texto do "Estudos de caso em quatro fases", espero que tenha gostado deste estudo. Se você chegou até aqui, obrigado pela sua atenção (Lua está mandando um forte abraço). Logo, logo sairão os próximos estudos.

Ok, logo, logo não. No máximo, na próxima lua cheia, aguardem ;)

A casa, as luzes >> A ação e a reanimação >> A noite e a meia-noite

 

Enviando formulário…O servidor encontrou um erro.Recebido :)

 

 

Bruno Zimmerle Lins Aroucha - Todos os direitos reservados. Se copiar, Lua MORDE.

 

CONTACT

1100 Downtown Square, 1250 18 Street

New York, NY USA

 

123.456.7899

info@neotemplate.com