Recentemente, alguns problemas antigos em interfaces de usuário tem encontrado soluções. Por exemplo, temos o problema antigo de lidar com grandes quantidades de botões em aplicativos tais como Adobe Photoshop. Nesse sentido, podemos observar a questão da escalabilidade: botão é um conceito útil, mas que possui potencial para piorar a experiência do usuário quando é preciso lidar com centenas deles. Nos últimos anos, aplicativos tais como o Microsoft Visual Studio Code e Blender adotaram o conceito de Command Palette (“paleta de comandos”), uma interface que permite pesquisar o comando pelo nome. Na minha experiência, esse tipo de interface reduz a confusão e fadiga visual ao lidar com grandes quantidades de botões.

Outros exemplos de tendências inovadoras são as tags em aplicativos de organização pessoal, que permitem organização não hierárquica, e a interface de stories de redes sociais, que permite acessar a próxima página em um toque, reduzindo a possível fadiga que ocorre ao realizar scroll repetidamente.

Apesar de algumas soluções terem sido encontradas, comumente ainda nos deparamos com sites e aplicativos cujas interfaces causam desconforto. Isso ocorre até em aplicativos extremamente populares. Por exemplo, é comum que usuários possuam dezenas ou centenas de abas abertas em seus navegadores de internet e tenham dificuldade em organizá-las. O problema é informalmente conhecido como “tab overload” (“sobrecarga de abas”) ou “tab hoarding” (“acúmulo de abas”). CHANG et al. (2021) menciona que o problema persiste desde a introdução das abas nos navegadores, há cerca de 20 anos. Qual seria a causa dessa demora para implementar uma solução para o problema? Falta de incentivo monetário? Ou talvez medo de que a tentativa de inovar confunda o usuário e impeça o sucesso da aplicação?

Sem um esforço ativo para estudar, comparar e tentar solucionar problemas atuais de design, pode ser que soluções demorem anos para acontecerem. Levando isso em consideração, a proposta deste trabalho é compilar tendências práticas e inovadoras em UX/UI e organização pessoal na tecnologia, mostrando exemplos e listando pontos positivos e negativos.

Para cada tendência, apontarei quais problemas ela resolve e qual design antigo costuma causar esses problemas. Na elaboração da monografia, pretendo buscar informações e artigos acadêmicos sobre princípios do design e conceitos de UX/UI, de forma a poder utilizar vocabulário mais técnico para descrever os problemas de cada interface. Também pesquisarei críticas e elogios feitas às interfaces e mais exemplos de interfaces inovadoras, de forma a enriquecer o conteúdo do trabalho.

Como projeto de programação, tentarei solucionar o problema de organização de dezenas/centenas de abas dos navegadores. A intenção é que o projeto case com tópicos descritos na monografia, e tente resolver, por meio de um design inovador, esse problema que já possui mais de uma década.

Após um brainstorming de possíveis soluções para o problema, posso implementá-lo por meio de uma extensão de navegador. A ideia atual consiste em organizar as abas visualmente em um canvas e em dois eixos. O dado organizado por cada eixo poderia ser configurável, podendo ser por exemplo a data de abertura, último acesso, categoria, similaridade ou organização manual.

Na monografia, explicarei a motivação por trás do projeto, os princípios envolvidos, o processo de desenvolvimento e as funcionalidades programadas. Descreverei os problemas com o atual design de abas, listarei os pros e cons da minha solução e como ela resolve os problemas.

Se possível, publicarei a extensão meses antes da entrega final do TCC e incluirei feedback dos usuários. É parte do conceito de design thinking obter feedback, entender quais pontos da jornada do usuário possuem empecilhos, e realizar melhorias no projeto.

O projeto pode ser estendido para também englobar organização de favoritos. Na minha experiência, de forma similar às abas, é comum possuir centenas de favoritos e nunca consultá-los e não conseguir organizá-los.

Dessa forma, proponho os seguintes conjuntos de tarefas para a realização do trabalho

  • Pesquisa preliminar
    • Pesquisa - Exemplos de interfaces inovadoras
    • Pesquisa - Críticas e elogios informais sobre interfaces específicas
    • Pesquisa - Abas. Tentativas anteriores para resolver o problema, críticas, elogios.
  • Fase preliminar do projeto
    • Projeto - Brainstorming de possíveis soluções
    • Projeto - Brainstorming de features da solução escolhida
    • Projeto - Escolher quais features priorizar, estabelecer um MVP
    • Projeto - Pesquisa de qual tecnologias/bibliotecas usar no projeto, e que atendam os requisitos do projeto
  • Pesquisa aprofundada
    • Pesquisa - Críticas acadêmicas feitas a interfaces, estudos de caso
    • Pesquisa - Princípios de design, design thinking e conceitos de UI/UX
  • Desenvolvimento da monografia
    • Monografia - Detalhamento do problema das abas
    • Monografia - Compilar, em uma tabela, exemplos de interfaces, seus pros, cons, quais problemas resolvem, quais problemas causam e interfaces alternativas/complementares que podem ser usadas.
    • Monografia - Escolher quais interfaces se quer falar sobre
    • Monografia - Escrever a análise das interfaces selecionadas, começando pelas mais importantes, e incluindo referências da bibliografia quando possível
    • Monografia - Detalhar conceitos de design e UI/UX que foram relevantes para a análise, incluindo referências acadêmicas
  • Primeiro ciclo do projeto
    • Projeto - Elaboração da versão inicial/MVP, com aparência minimamente trabalhada
  • Primeiro feedback do projeto
    • Projeto - Coletar feedback inicial da orientadora e de amigos
  • Segundo ciclo do projeto
    • Projeto - Implementar mudanças
    • Projeto - Polimento da aparência
    • Projeto - Realização de testes
  • Segundo feedback do projeto
    • Projeto - Liberar a primeira versão para o público geral
    • Projeto - Divulgar levemente extensão em algumas redes sociais
    • Projeto - Pedir novamente feedback de orientadora e colegas
  • Descrição do projeto na monografia
    • Monografia - Descrição dos problemas do design de abas atual
    • Monografia - Explicar a motivação por trás do projeto, os princípios envolvidos, o processo de desenvolvimento, as funcionalidades programadas
    • Monografia - Listar os pros e cons da minha solução e como ela resolve os problemas do design atual de abas
  • Finalização
    • Monografia - Introdução, conclusão e outros requisitos
    • Monografia - Polimento final
    • Monografia - Preparação do poster e apresentação
    • Site - Versão final

Organizando as tarefas em um cronograma aproximado:

gantt title Cronograma dateFormat YYYY-MM-DD axisFormat %d/%m section Entregas Conversa de acompanhamento 1 : crit, 2022-06-01, 1d Conversa de acompanhamento 2 : crit, 2022-10-01, 1d Entrega final : crit, 2022-12-01, 1d section Tarefas Pesquisa preliminar : a1, 2022-05-01, 30d Fase preliminar do projeto : a2, after a1, 30d Pesquisa aprofundada : a3, after a2, 90d Desenvolvimento da monografia : after a2, 90d Primeiro ciclo do projeto : after a2, 30d Primeiro feedback do projeto : 10d Segundo ciclo do projeto : 30d Segundo feedback do projeto : 10d Descrição do projeto na monografia : 30d Finalização : 30d

Referências

CHANG, J. C. et al. Tabs.do: Task-Centric Browser Tab Management. The 34th Annual ACM Symposium on User Interface Software and Technology, 10 out. 2021. Acesso em: 30 abr. 2022.