Checklist de Atividades de UX e de UI para (Re)Lançamento de um Website - 12 Atividades a Considerar - PARTE 1
Introdução
Como todos os lançamentos ou relançamentos de um website é preciso, além de objetivos bem claros e definidos, é preciso ter em atenção as atividades que são necessárias desenvolver e planeá-las. As atividades para o lançamento ou relançamento de um website atravessam várias áreas do digital: desde atividades de UX, passando pelas atividades de UI e de Conteúdos, e atividades de SEO ou de Analytics.
Obviamente que à partida estou a considerar que os Objetivos do Website (lançamento ou relançamento) já foram ou estão definidos com recorrência e suporte das atividades de UX Research, nomeadamente no Estudo de Personas; Estudo da Experiência (pain points e love moments) e no Benchmarking e das Best Practices de UX/UI.
Neste artigo que será o primeiro de quatro irei elencar que atividades de UX e de UI é preciso ter em consideração no lançamento ou relançamento de um website.
1 – (Re) Definição da Arquitetura de Informação
- O que é: Se procurarmos o significado etimológico da palavra “Arquitetura” vemos que significa “primeiro construtor”. E em UX/UI também não é diferente o seu significado. A Arquitetura de Informação como atividade de UX/UI para (re)desenho de um website significa criar as bases e os alicerces do sistema de informação do website e a forma como as mesmas são apresentadas e como se interligam e comportam em resposta a ações do utilizador.
- Para que serve: A Arquitetura de Informação de um website defini-se como sendo páginas do website A arquitetura da informação é uma atividade que pode e deve ter também o deliverable respetivo. Além disso, é uma atividade que deve ser pensada em conjunto com as área de SEO e de Conteúdos, porque no primeiro caso vai ser preciso criar o sitemap dessa arquitetura para colocar ou a) na raíz do código fonte do website; 2) compará-la com o sitemap criado automaticamente via plugin do CMS do website. No que respeita à área dos Conteúdos, simultaneamente com a área de SEO, terão a responsabilidade de analisar e verificar se as keywords utilizadas no sitemap estão em consonância com aquilo que os utilizadores pesquisam.
- Quais são os seus componentes: Sendo a Arquitetura de Informação um sistema, é elementar que seja composto por vários processos e são eles: os processos de organização, os processos de rotulagem; os processos de navegação e os processos de pesquisa. Estes 4 processos devem ser trabalhados em simultâneo.
- Quem deve estar envolvido: Equipas de UX, de Conteúdos, e de SEO
- Entregáveis: O principal entregável da Arquitetura de Informação para o (re)desenho de um website é o sitemap que não é nada mais nada menos do que um mapa com a hierarquia das diferentes páginas do website bem como denominação dos tipos de conteúdos das mesmas, nomeadamente ao nível dos títulos.
2 – Criação dos User Flows
- O que é: Os user flows são uma forma de representar, graficamente, o caminho ou os caminhos que os diferentes utilizadores (personas) irão “percorrer” ao navegar no novo ou redesenhado website. E existem 3 tipos de user flows, sendo que todos eles representam atividades, mas uns podem ser mais rudimentares do que outros no sentido em que podemos estar apenas a falar de um simples fluxograma (task flow) ou de um fluxograma relacionado com wireframes já feitos (wire flow) ou exatamente a mesma coisa, mas para cada uma das personas (user flow).
- Para que serve: Eu, pessoalmente, considero haver 2 motivos para ter que se desenhar user flows: 1 – perceber se a Arquitetura de Informação está bem pensada ou deve ser revista; 2 – Garantir que o novo ou redesenhado website têm endereçadas todas as atividades que nos propusemos e que queremos que o utilizador, porque é uma necessidade dele.
- Quais são os seus componentes: Se estivermos a falar de task flows os componentes são os de um fluxograma típico e ilustrativo de uma atividade. Se estivermos a falar de wire flows, os componentes são os diferentes ecrans dos wireframes ligados entre si. As componentes dos user flows são idênticas às do wire flows, mas são inerentes a cada uma das personas estudadas previamente, uma vez que podem haver diferentes use cases de navegação.
- Quem deve estar envolvido: Equipas de UX e de SEO, se necessário
- Entregáveis: O principal entregável são os diferentes user flows de todas ou das principais ações que os utilizadores podem fazer no website.
3 – (Re)Desenho dos Wireframes
- O que é: Os wireframes são os “esqueletos” daquilo que será o novo website, seja novo no sentido estrito da palavra, seja renovado. oOs wireframes dão uma visão geral da estrutura de cada uma das páginas do website – arquitetura de informação – do layout, dos diferentes user flows e funcionalidades que despontarão os comportamentos dos utilizadores.
- Para que serve: Os wireframes servem para, essencialmente, para dois objetivos:
- Apresentar a estrutura, conteúdo e layout do website (imagens e copy e alguma interatividade) desenvolvido com base naquilo que são as necessidades dos utilizadores.
- Reduzirmos os custos de design – UI – e desenvolvimento – DEV – no desenho ou redesenho de um website e, portanto, utiliza-se, na verão mais “pobre” lápis, papel e borracha para se desenhar os tais esqueletos do website – wireframes.
- Quais são os seus componentes: Não existem componentes dos wireframes de um website. Mas, posso alertar que não é preciso ser um designer para produzir wireframes. É preciso saber desenhar “círculos”, “quadrados”, “triângulos”, “semi-retas”, saber escrever e pouco mais.
- Quem deve estar envolvido: Equipas de UX e de SEO e de UI, se necessário.
- Entregáveis: O próprio wireframe em papel ou em ficheiro de softwares como o Axure, Balsamiq, Figma e similares.
4 – (Re)Desenho dos Protótipos
- O que é: Os protótipos nada mais são do que “wireframes on steróids”. Ou seja, são wireframes que já foram mais trabalhados no sentido de já ter alguma componente gráfica e de cores, de já ter mais animações e ser muito mais interativo.
- Para que serve: AO grande e principal objeto do desenho dos protótipos é o de serem testados com os utilizadores finais, já que os protótipos por regra, e depois de toda a fase de estudo das necessidades dos utilizadores, devem ser muito idênticos em termos de arquitetura de Informação, user flows e interatividade, ao produto final – UI.
- Quais são os seus componentes: Não existem grandes componentes num protótipo já que é quase o produto final. Podemos é ter protótipos do website, de uma app.
- Quem deve estar envolvido: Equipas de UX, e se necessário de UI
- Entregáveis: O principal entregável é o protótipo em si, feito em Figma ou em Sketch, por exemplo.
5 – Definição do UI – User Interface
- O que é: O user interface nada mais é que o “desenho” puro e duro daquilo que foram os wireframes e os protótipos. É dar vida, ou melhor dizendo, dar fogo à peça.
- Para que serve: Nesta Checklist de 12 atividades de UX/UI que devemos ter em conta ao (re)desenhar um website, o desenho do user interface – UI – é a fase final do processo, antes do mesmo ser passado para os developers. É como se fosse o “pintar” as paredes exteriores da casa.
- Quais são os seus componentes: Se estivermos a falar de implementação de um Design System, existem muitos componentes associados. Por exemplo, existem os Princípios de Design, os Logos, a iconografia, a tipografia, o layout com grelhas e breakpoints, ilustrações, animações, e os diferentes componentes gráficos per si – botões, tabelas, gráficos, overlays, listas….mais recursos de e para consulta. Se não for esse o caso, provavelmente os componentes resumem-se a paleta de cores e tipografia e logos e pouco mais.
- Quem deve estar envolvido: Equipas de UI e potencialmente, dependendo do trabalho e do entregável, equipas de UX Writing.
- Entregáveis: Se estivermos a falar de equipas de UX/UI e restantes áreas digitais numa Empresa com maturidade e cultura digital avançada, o entregarem pode e deverá ser um Design System ou um update ao Design System. Se, pelo contrário, a empresa não tem essa maturidade, os entregáveis podem passar por um Guia de Estilos onde podem estar descriminados as cores principais e secundárias a serem utilizadas, família tipográfica, tom de voz, logotipos e suas dimensões e pouco mais.
6 – Update e/ou Criação do Design System
- O que é: Um Design System é um conjunto de regras padronizadas que permitem às empresas escalarem os temas de design, reduzindo o esforço das equipas, os custos e a redundância, uma vez que todos trabalham seguindo uma metodologia que permite ter uma linguagem visual comum e consistência entre ativos digitais e canais.
- Para que serve: Como visto acima, o Design System serve para as equipas operem segundo uma linguagem visual comum e construam ativos digitais consistentes para os diferentes canais em que a Empresa tem presença. Obviamente que isto irá permitir às empresas reduzirem o time to market ou o time to launch dos seus produtos digitais.
- Quais são os seus componentes: Os componentes de um Design System variam de empresa para empresa, mas de uma maneira geral poderemos ter: a secção dos Fundamentos do Design System, onde estarão incluídos, entre outros, os Objetivos e os Princípios de Design; a secção de Componentes, que será o core do Design System, com todos os elementos/componentes gráficos necessários para o desenho e escalamento dos ativos digitais; Fontes de Estudo/Pesquisa.
- Quem deve estar envolvido: Equipas de UX, UI e outras se necessárias
- Entregáveis: Repositório ZeroHeight, por exemplo com todos os elementos que compõem um Design System e Biblioteca Figma, por exemplo com todos os componentes gráficos que servem de base ao Design System.
7 – Definição das Questões de Acessibilidade
- O que é: A acessibilidade é desenhar e desenvolver os ativos digitais tendo sempre em mente a inclusão de todo o tipo de utilizadores, nomeadamente utilizadores com problemas de visão, cognitivos, de surdez, físicos, verbais, neuropsicológicos, mas não só. Por exemplo utilizadores sem este tipo de problemas, se tiverem de ver um website no smartphone que não está adaptado para o efeito é também uma questão de usabilidade.
- Para que serve: O objetivo do design para todo o tipo de utilizadores é o da inclusão. Não será à toa que todos o a grande maioria dos websites públicos portugueses estão desenhados com estas regras. Por exemplo, o website da Presidência da República Portuguesa.
- Quais são os seus componentes: nd
- Quem deve estar envolvido: Equipas de UX, de UI e, se necessário, de Conteúdos e de SEO
- Entregáveis: O As especificações de acessibilidade podem vir descriminadas no Documento final de especificações para os developers.
8 – Especificações dos Direcionamentos das Páginas
- O que é: Os direcionamentos das páginas significam qual a navegação que o utilizador vai ter ou vai fazer ao visitar o website.
- Para que serve: AOs direcionamentos servem para os utilizadores navegarem ao longo do website.
- Quais são os seus componentes: Os utilizadores podem navegar no website seguindo 3 vias: Navegação Global – feita através do menu principal e até mesmo secundário do website; Navegação Hierárquica – feita através dos menus específicos de cada página; e Navegação Local/Circular – ; e Navegação Circular – Feita via os diferentes botões (CTA – Call-To-Action) ou hiperligações presentes nas diferentes páginas do website.
- Quem deve estar envolvido: Equipas de UX e, se necessário de SEO
- Entregáveis: Os direcionamentos das páginas podem estar especificados no entregável para o efeito com outras especificações, por exemplo de interatividade e de SEO ou pode-se produzir um Excel com o mapeamento dos URLs das diferentes páginas do website e indicação para onde devem encaminhar o utilizador.
9 – Especificações de Headings das Páginas para SEO
- O que é: São os principais componentes do conteúdo das diferentes páginas do website, no que ao copy diz respeito. Para cada uma dessas páginas do website funcionam como os títulos principais e secundários (headings) de um índice de um documento.
- Para que serve: À semelhança daquilo que acontece com a Arquitetura de Informação, a definição dos Headings de páginas para SEO serve para os utilizadores e os motores de pesquisa entenderem a arquitetura/hierarquia de informação das diferentes páginas, através deste processo específico de organização e rotularem de elementos – títulos, sub-títulos e parágrafos de texto. Também serve, em termos de acessibilidade, para os utilizadores poderem ler, com os screen readers, e perceber como está construída a página.
- Quem deve estar envolvido: Equipas de UX e equipas de SEO
- Quais são os seus componentes: Considero que os componentes dos Headings para SEO podem ir desde o atributo HTML <H1> até ao <H6> e para textos poderemos estar a falar de atributos HTML <p>. Mas por norma, uma página de um website, em princípio, não terá mais do que 2 ou 3 atributos destes, ou seja terá um atributo H1 e depois tudo atributos H2 ou uma mescla entre atributos H2 e atributos H3.
- Entregáveis: O entregável desta atividade pode ser o protótipo onde em cada titulo de página e/ou subtítulo devem estar especificados que tipo de Headings devem ser considerados no desenvolvimento dessa página pelos front-end developers.
Pode também ser construído de raíz um documento de especificações, em que deverá ter uma secção que contemple as especificações de headings de SEO para os diferentes títulos, sub-títulos e textos das diferentes páginas do novo website Documento composto pelas diferentes páginas do novo website.
10 – Definição dos break points para outros Dispositivos – Responsive Design
- O que é: São testes de usabilidade feitos ao protótipo e junto dos utilizadores finais.
- Para que serve: Os break points servem para o website se poder adaptar em termos de conteúdo aos diferentes ecrans dos diferentes dispositivos, sejam eles computadores, telemóveis, tablets, televisores, smartwatches, quiosques.
- Quem deve estar envolvido: Equipas de UX, UI e Developers
- Quais são os seus componentes: N/D.
- Entregáveis: Documento das especificações com os diferentes breakpoints para cada um dos dispositivos.
11 – Especificações dos Elementos das Páginas e Outros para Desenvolvimento
- O que é: Uma vez terminado todo o trabalho de UX/UI em termos daquilo que é a estratégia e o design do mesmo, é preciso especificar uma série de elementos para as equipas que vão desenvolver e implementar o website novo ou redesenhado.
- Para que serve: As especificações servem para os developers entenderem aquilo que tem de fazer para dar vida ao website. É como se fosse um briefing das equipas de UX/UI, SEO, Analytics e Conteúdos para as equipas de desenvolvimento.
- Quais são os seus componentes: Existem diferentes tipos de especificações, por exemplo: Especificações sobre as páginas: dimensões de grelhas, e dos breakpoints; Especificações UI: especificações hexa dos diferentes elementos das páginas como do textos, dos CTA, dos backgrounds, dos foregrounds, dos hiperlinks, entre outros; Especificações de interatividade: movimento e animações dos menus, animações e movimentos dos CTAs, animação das mudanças de páginas, entre outras animações de elementos; Especificações de SEO: headings, nomenclaturas dos URLs, direcionamentos, meta descrições… Especificações de Acessibilidade: contrastes entre cores, os próprios headings, responsável design, nomeação de imagens.…
- Quem deve estar envolvido: Equipas de UX, de Conteúdos, e de SEO
- Entregáveis: O principal entregável pode ser o protótipo HF com as diferentes especificações ou um documento word/powerpoint com as especificações.
12 – Desenvolvimento dos Testes de Usabilidade
- O que é: São testes de usabilidade feitos ao protótipo e junto dos utilizadores finais.
- Para que serve: Simples: Testar se o que foi criado é perceptível pelos utilizadores e vai ao encontro daquilo que são as suas necessidades.
- Quem deve estar envolvido: Equipas de UX
- Quais são os seus componentes: N/D.
- Entregáveis: São essencialmente 3, os entregáveis desta atividade: 1 – Guião com as diferentes questões e atividades que, respetivamente, queremos fazer aos utilizadores e queremos que eles façam no protótipo; 2- o próprio protótipo apresentado presencialmente ou remotamente e 3 – uma apresentação dos principais findings e insights.
Conclusão
Lançar um website ou relançar um website dá muito trabalho. Implica muito tempo e muitas atividades. E temos sempre 2 hipóteses: fazê-lo bem ou fazê-lo mal.
Hipótese 1 – Para fazê-lo bem feito devemos:
a) ouvir os utilizadores e
b) seguir esta checklist de 12 atividades de ux/ui para (re)lançamento do website.
Hipótese 2 – Para fazê-lo mal feito, indo pelo caminho mais fácil e pelo caminho do adivinhar, também temos 2 hipóteses:
a) compramos um template ou
b) começamos logo com o design e a adivinhar features que ficariam bem no website, sem ouvir ninguém.
No primeiro caso temos sempre retorno no segundo temos sempre problemas.
E vocês que outras atividades de ux/ui acrescentariam a esta lista?
