Elementos da experiência do usuário by Garrett e a estratégia de validação
A experiência pode ser planejada e projetada, isso diferencia o design levado como estratégia do design como recurso.
Projetar experiência do usuário não é algo trivial, porém é algo essencial para não cairmos na teoria da bala mágica e acreditar que solução de interface satisfez os usuários baseado na tua percepção do que é “bom”.
Ai você pode perguntar: mas como projetar uma experiência?
Jesse James Garrett, em meados de 2002, publicou em seu livro The Elements of User Experience uma estratégia para projetar experiências em interfaces de aplicações. Essa forma de projetar baseada em 5 camadas desmembra um projeto de interface para pensarmos em cada camada como uma etapa interdependente, formando uma estrutura de trabalho complementar.
As camadas
A ordem de leitura e abordagem é de baixo para cima, fazendo as vezes alusão a um iceberg por se tratar de um estudo que está sustentando o que se vê na superfície. Nos próximos tópicos você vai conhecer um pouco mais sobre cada um e como lidar com eles em seu projeto.
Estratégia
Qual é o objetivo por trás desse projeto?
Aqui é onde você fundamenta a criação, redesign ou melhoria desse projeto que levará você a criar uma forma de interação (interface). Essa fundamentação pode ser o objetivo descrito no roadmap, OKR ou diretriz, assim como pode ser uma validação de hipótese.
Um exemplo de estratégia pode ser alinhada a um KPI ou métrica de usabilidade, como diminuir o tempo do processo ou aumentar o engajamento de um perfil de usuário X ao produto.
Tendo em mente que esse modelo proposto por Garrett pode ser aplicado tanto na concepção inicial do produto quanto na sua atualização, reformulação ou correção, tudo vai depender realmente da estratégia da sua equipe aliada ao quanto o design faz parte da estratégia da empresa.
Escopo
Quais são os limites desse projeto?
Aqui é uma proximidade com o que os gestores de projetos, engenheiros e PMs conhecem como escopo: as descrições e delimitações do projeto.
É necessário ter em mente e documentado quais são os limites, envolvendo o público-alvo, tecnologias, recursos, abrangência da pesquisa, quais as funcionalidades envolvidas nesse projeto e quais as métricas iniciais.
Assim como a sessão anterior, essa aqui é um descritivo e pode conter tabelas que exponham as limitações e abrangências do projeto, assim como as exclusões.
Estrutura
Como estão distribuídos os dados e informações?
Essa é a parte que você pode utilizar mapas que ilustrem a arquitetura da informação e a estrutura de interação, deixando claro por onde o usuário percorrerá e quais as informações disponíveis nesse percurso.
Um sitemap é uma forma de ilustrar isso, assim como um mapa mental, um mapa de jornada ou de tarefas. O lance aqui é você documentar o que já foi descoberto e ideado enquanto informações disponíveis, sua hierarquia e taxonomia.
Esqueleto
Como vai ser a estrutura dos componentes visuais e onde eles estarão localizados na tela?
Esse é o momento de pensar em wireframes ou outras abstrações da interface que deixem claro qual é a abordagem visual, baseado no que você projetou lá na fase de estrutura, que suportará o conteúdo e o fluxo das interações/informações.
Você pode montar seus protótipos em baixa ou média fidelidade aqui, baseado na estratégia de fluxo que já mapeou lá na arquitetura de informação e validar com os usuários para obter um feedback de um momento diferente.
Superfície
Como será o aspecto final do projeto e sua folha de estilo?
Quando chegamos na etapa de pensar na superfície, assim como um iceberg, aqui é o que os usuários vão ver e interagir diretamente (seja passiva ou ativamente). Estamos falando aqui da aplicação da folha de estilo (styliguide) e aplicação de padrões do design system, assim como as microinterações e transições.
A superfície é uma segunda oportunidade de projetar pensando em ergonomia cognitiva e motora, pois aqui é o ponto de contato direto com o usuário e esse pode ter alguma necessidade especial. O atendimento da ISO 9241–11 e usabilidade em interfaces é algo que guiará um bom projeto nessa fase e na anterior.
As camadas e a estratégia de validação
Nas fases anteriores você também pode realizar validações, porém são com o objetivo diferente:
- Estratégia: valida-se a hipótese do problema, fazendo entrevistas, análise de dados e pesquisas quantitativas;
- Escopo: é um bom momento para validar os desejos X necessidades dos usuários, identificando o que entrega maior valor e as prioridades para que possa projetar uma arquitetura mais eficiente;
- Estrutura: aproveite que o escopo está validado, procure agora validar se os agrupamentos, os termos e o fluxo da informação faz sentido;
- Esqueleto: é um ótimo momento para validar fluxos de interação, entendimento sobre a identificação de hierarquia dos elementos e se está faltando algo, além de entender como os elementos se comportarão entre si na tela com as informações não interativas;
- Superfície: esse é o ponto que a estética encontra a estratégia, podendo validar tanto a paleta de cores quanto a tipografia e os detalhes da sua folha de estilo. Uma vez validado o fluxo e hierarquia na fase de esqueleto, aqui é importante validar se com a aplicação da sua folha de estilo tudo continua bem entendido. Procure utilizar textos reais, pois o Ipsum Lorem pode esconder armadilhas que o Writer vai ter que lidar em algum momento… ai vai ser mais caro para corrigir.
A visão como funcionalidade e informação
Um complemento ao entendimento que Garrett (2002) traz é sobre o produto quanto a suas funcionalidades e quanto a sua informação, onde temos uma expansão do entendimento:
Estratégia: para ambas as visões contempla o que os usuários precisam e o quais os objetivos do produto. Assim temos a visão interna e externa da estratégia e objetivos desse projeto. Ex.: O produto será uma integração com o meio de pagamento existente, o usuário precisa pagar com cartão de débito e crédito virtual e essas informações estão acessíveis quando necessário;
Escopo: contempla a especificações das funcionalidades e do conteúdo. Em outras palavras, é o entendimento sobre o que está na documentação de engenharia e o que será útil de conteúdo que o usuário terá usufruto. Ex.: o sistema utilizará a API buscaCEP para trazer o endereço, o usuário verá o endereço preenchido quando o CEP for válido;
Estrutura: a arquitetura da informação e os pontos de interação podem ser observadas como uma continuidade/inferência, onde a interação é referente às opções de contato com as funcionalidades do sistema e como ele se comportará. Já a arquitetura são os elementos que auxiliam o entendimento humano. Ex.: Teremos abas para acessar as sessões do formulário, onde as informações estarão sequenciadas pela hierarquia e necessidade do processo;
Esqueleto: pensando enquanto funcionalidade e informação, o design da informação (comunicação relevante ao usuário) está nessas duas partes, sendo desmembrada em interface e navegação. A primeira significa o arranjo das coisas na interface (posicionamento), já a navegação é o que permite ao usuário transitar entre as funcionalidades pela informação disponível e a comunicação utilizada. Ex.: os botões de menu principal ficam na parte inferior do app, para se cadastrar existe um link no menu e depois de preencher o formulário o próximo passo é clicar em avançar, indo para a página de sucesso e disponibilizando o link para a Home;
Superfície: o design sensorial é aquela parte que o usuário percebe a funcionalidade, o valor e a comunicação ao mesmo tempo (quando bem projetados, claro). Ex.: as opções de seleção, edição e exclusão estão visíveis quando o usuário precisa, alertando caso haja perigo em alguma das ações e orientando como utilizar a seleção múltipla.
Bom… essa última sessão foi mais uma pegada de cognição + tech, mas é importante ler esse livro de Garrett com uma atenção para a interpretação, pois ele descreve muito a parte de interação com projetos web — assim como Nielsen faz em Prioritizing web usability. Geralmente os autores que tratam de UX e usabilidade citam, comentam ou seguem por base a ISO 9241, isso faz com que haja um senso comum por trás das orientações e modelos.
A validação é um processo que pode fazer parte do discovery como um todo tendo objetivos e estratégias específicas para cada fase e meta. Nesse artigo falei um pouco sobre como ver o modelo proposto por Garrett e identificar as oportunidades de validação.
Espero seu comentário…
Referências e indicações
https://brasil.uxdesign.cc/o-que-%C3%A9-ux-strategy-e-quais-as-principais-diferen%C3%A7as-para-ux-design-31450d63ed9b
Garrett, Jesse James. The elements of the user experience: USER-CENTERED DESIGN FOR THE WEB AND BEYOND, 2º Ed. 2002.
