Usando o Notion para explicar como construir um bom design multiplataforma

Apresentação

Meu nome é Pedro e sou um estudante de UX Design. Desde que conheci o TabNews pela proposta do Filipe, eu achei a ideia demais e pensei em um dia começar a escrever alguns conteúdos aqui para a plataforma, entretanto queria fazer algo que fosse enriquecedor de alguma forma. Finalmente esse dia chegou e me propûs a divulgar um pouco de conhecimento da área de UX Design, o que julgo ser muito importante, pois costumo ver muitas pessoas pensando que UX é apenas sobre criar telas bonitas, quando, na verdade, envolve sempre um processo complexo de concepção e ideação de produtos.

O conteúdo que decidi falar sobre hoje é um conteúdo, porém, que não visa a ajudar só aqueles que são da área de UX Design, mas que também pode engrandecer o trabalho de programadores (que acredito serem maioria aqui), de profissionais da tecnologia como um todo e de nós todos como usuários. Decidi falar sobre a construção de um bom design multiplataforma para um produto e acho que isso pode contribuir muito para deixarmos cada vez melhores nossas ações relacionadas a responsividade. Acho que, pensando um pouco nos pontos que aqui trago, é possível entregar produtos cada vez melhores.

O que é o Notion?

O Notion é um produto multiplataforma que promete ser um all-in-one workspace, isto é, uma grande área de trabalho que reúne as mais diversas ferramentas necessárias para organização e gestão. Recomendado para diversas áreas, o Notion é muito usado para gestão de tarefas, escrever textos, organizar notas de estudo, organizar dados em tabelas e muitas outras funcionalidade.

O que é design multiplataforma?

Diz-se multiplataforma um programa ou sistema que pode ser executado em mais do que uma plataforma ou tipo de dispositivo. O Notion é considerado multiplataforma principalmente por estar disponível nas suas três frentes mais efetivas: web, desktop app e mobile app.

Dizer que determinado produto tem um bom design multiplataforma, entretanto, significa que não só esse produto está disponível em diferentes plataformas, como também ele é pensado e projetado para cada uma delas, visando a oferecer uma boa experiência para o usuário, o famoso UX.

Como fornecer uma boa experiência multiplataforma?

Entre as responsabilidades de um bom UX Designer está projetar a experiência do usuário considerando a plataforma utilizada por ele, que pode ser uma das inúmeras possíveis hoje em dia, levantando em conta que vão de computadores, tablets e celulares até smart TVs, relógios, geladeiras inteligentes e muitas outras opções. Ao considerar a plataforma pela qual o usuário acessa um produto, o design deve ser criado pensando em diferentes aspectos e noções, que podem ser resumidos em quatro elementos, que podemos chamar de 4 C’s.

Esses elementos não são úteis apenas para UI/UX Designers, mas também para programadores, engenheiros, e profissionais de tecnologia que estejam envolvidos no processo de criação de um produto digital multiplataforma e, eu diria que para qualquer produto digital na verdade, já que, ao meu ver, não oferecer produtos multiplataformas hoje em dia é estar bem atrás do que pedem as demandas do mercado.

Esses quatro C’s seriam: consistência, continuidade, contexto e complementaridade. De forma resumida e direta, esses conceitos representam:

• Consistência: Seguir a identidade da marca, sua aparência visual e a voz da empresa, independente da plataforma, mantendo-se fiel a seus estilos e gerando familiaridade em todas as plataformas.
• Continuidade: Manter o progresso e o acesso ao mesmo conteúdo de uma plataforma para outra, fazendo com que, mesmo que a experiência seja diferente, a funcionalidade do produto se mantenha sincronizada.
• Contexto: Entender as particularidades de cada plataforma e o contexto em que ela está inserida. Em cada plataforma o usuário preferirá interagir com o conteúdo de certa maneira. Um exemplo é como, no mobile, as ações costumam ser mais rápidas e pontuais, enquanto no desktop a navegação é mais longa.
• Complementariedade: Garantir que cada plataforma acrescente algo novo para o usuário que faça sentido exclusivamente nela, enriquecendo o produto ao oferecer experiência adaptadas e novas em cada dispositivo.

Nem sempre o Notion foi exemplo

Durante meus estudos, fui provocado a encontrar um produto multiplataforma no qual eu fosse capaz de identificar aplicações dos 4 C’s e pensei em analisar o Notion, já que é um aplicativo que eu uso diariamente (estou escrevendo esse texto nele, inclusive 😃) e que gosto muito tanto da sua versão para o computador quanto para o celular.

Além disso, me lembro que, quando comecei a utilizar o Notion, sua versão mobile era praticamente uma replicação da versão web e isso me incomodava bastante, pois a experiência não era pensada exclusivamente para a plataforma e era extremamente mal otimizada, o que tornava o aplicativo muito lento e, por conseguinte, a experiência não tão boa. Em julho do ano de 2022, porém, o Notion lançou uma atualização que me animou demais em relação ao produto e que me fez usá-lo 200% mais frequentemente, porque o app teve um redesign voltado para o mobile e foi desenvolvido de forma nativa para o IOS e para o Android.

A partir dessa atualização, o Notion passou a ser exemplo de multiplataforma, oferecendo experiências completas tanto para o computador quanto para o celular, e isso só foi melhorando ao longo de cada atualização lançada.

Vale ressaltar que, no campo do UX Design e de concepção de produto, é inevitável que ele seja pensado e projetado inicialmente para uma plataforma central, a partir da qual se pode repensar e realizar processo de design para mais plataformas. A maturidade e a evolução do produto são parte do caminho e o Notion alcançou isso.

Como o Notion aplica os 4 C’s?

Consistência:

Toda a identidade do produto, seguindo de maneira fiel o guia de estilos da marca e recriando as mesmas sensações com os componentes que são refeitos do computador para o celular, é mantida, mesmo que o aplicativo seja construído em base nativa do IOS e Android.

Por exemplo, a identidade visual das páginas com cover, ícone e título – que talvez seja a marca visual mais representativa do design do Notion – é transportada de maneira quase idêntica para o mobile, mesmo que a grande largura do desktop ajudasse a compor tal visual. Veja:

Além disso, é muito interessante como o App é capaz de transportar, na maioria das vezes quase de maneira excelente as páginas criadas no desktop pelo próprio usuário (ainda alguns componentes deixam um pouco a desejar por não serem muito comuns no mobile, como as tabelas e as fórmulas matemáticas, que definitivamente precisam ser melhoradas). Não é tão fácil manter a responsividade quando quem cria as páginas dentro de seu produto é o próprio usuário. Por ser personalizável e por ser, sobretudo, um repositório de documentos do usuário, tornar responsivas páginas escritas e diagramadas manualmente por ele não é uma tarefa tão fácil, mas o app consegue fazer da maneira mais natural possível e entregando o suficiente para uma boa experiência no celular.

Continuidade:

Talvez esse seja o “C” mais essencial no multiplataforma do Notion, justamente pela natureza do produto. Se propondo a ser um lugar para reunir e organizar todo tipo de documento em apenas uma ferramenta, é fundamental que o produto ofereça acesso aos mesmos conteúdos em qualquer plataforma e de maneira agilmente sincronizada.

Apesar de não poder afirmar categoricamente que este é o uso do app mobile do Notion mais relevante (por não estar dentro da empresa e ter acesso às pesquisas rsrs), eu acredito veemente que a maioria dos usuários do app mobile o utilizam mais para acessar de maneira rápida, e em qualquer lugar, os conteúdos guardados no workspace e que foram escritos em outra plataforma. Sendo assim, eu diria que a continuidade é a grande chave que faz do Notion um excelente produto multiplataforma.

Contexto:

A minha afirmação anterior não se faz apenas por suposições aleatórias, mas sim pelo fato de que dispositivos desktop são mais adequados para escrita, criação visual e diagramação, enquanto dispositivos móveis são mais efetivos para leituras, consultas rápidas e acessos esporádicos.

Entender o contexto no qual o usuário acessa cada plataforma para usar o produto é essencial e o Notion foca bem nas adaptações para cada plataformas voltadas para os objetivos do usuário.

No desktop, oferecer atalhos de teclado para escrita, opção de texto menor para obter uma visão mais ampla da página, grande largura e centralização do conteúdo principal, entre outras características do design demonstram uma experiência voltada para criação e escrita.

No mobile, o design vertical voltado para o scroll, um destaque quase integral para o conteúdo da página e não para outras ações, a utilização de tipografias com fontes maiores, o destaque para a ação de pesquisar na barra inferior do app, entre outras características do design demonstram uma experiência voltada para leitura e consultas.

Complementariedade:

Apesar de o maior foco do multiplataforma do Notion ser em transportar as funcionalidades do desktop (onde o produto nasceu e onde ele ainda tem seu carro chefe) para o mobile, o app ainda assim tenta oferecer funcionalidades específicas para a plataforma do Mobile e do Desktop App, fazendo com que a experiência seja nova e enriquecedora por estar em outra plataforma.

No desktop, por exemplo, é oferecido um recurso de visualização prévia (preview) de componentes que se integram a outros serviços desktop e web, como o Figma, Dropbox, Zoom e Microsoft:

No mobile, por sua vez, o Notion implementou componentes em cards que mostram as últimas páginas acessadas ou editadas (que considera até os acessos no desktop: olha a continuidade aí), isto é, uma aba de recentes, baseando na ideia de que dispositivos móveis são mais utilizados para consultas.

Implementou-se também features de copiar e colar mais facilmente os textos e de interação direta com QR Codes.

Conclusão e melhorias

Obviamente o design multiplataforma do Notion não é perfeito e ainda há muito para melhorar, principalmente nas funcionalidades de escrita e criação no mobile e em alguns componentes pontuais como as tabelas e as fórmulas matemáticas, como foi citado anteriormente. Entretanto, é muito interessante parar para analisar um aplicativo que uso diariamente e que pude acompanhar sua evolução em UX Design Multiplaforma, sentindo os impactos na pele de um usuário mesmo.

A intenção desse texto era que eu pudesse aprender analisando um produto que uso e observo e que pudesse buscar, de maneira mais prática, os conceitos teóricos que venho aprendendo. Espero ter contribuído com conhecimento que, como eu disse anteriormente, não é útil apenas para UX designers, mas também para programadores, profissionais da tecnologia, e até mesmo para nós como usuários.

Obrigado por ler até aqui! 😄

Além disso (um mini jabázinho), queria dizer que sou freelancer também e, como UX e UI Designer, estou disponível para qualquer programador que esteja precisando de uma mãozinha nessa área. Abraços