21 de set. de 2019

Mapa Mental Dentro das Paredes de UI/UX

Avinash Priya

Saurav Pandey é designer de produto na Snapdeal. Ele adora criar experiências agradáveis, utilizando pixels e vetores para transmiti-las. Ele descobriu que mapas mentais são uma ferramenta útil para o enriquecimento de conceitos, e ele usou XMind em seus projetos de UI/UX. Neste artigo, ele compartilha suas percepções e como o XMind ajuda em seus projetos.

A person standing in front of a flowchart with multiple connected boxes on a red background.


Articular um pensamento complexo pode ser desafiador; no entanto, o XMind simplifica uma estratégia conhecida como mapeamento mental, que pode tornar o processo muito mais fácil.

Mapeamento Mental

“Um problema bem definido é um problema meio resolvido”

Um mapa mental é uma ferramenta útil para o enriquecimento de conceitos. Uma forte ênfase deve ser dada ao mapeamento mental, pois ajuda a gerar novas ideias e a identificar relações entre diferentes dados e informações.

Eu pessoalmente prefiro o XMind para criar mapas mentais.

Mind map illustrating features and workflow of a maintenance app, including service requests, prioritization, and user roles.

Um exemplo de mapa mental de um dos meus projetos

Obter XMind para Mac

O XMind permite que você crie um diagrama onde uma ideia abrangente se ramifica em ideias relacionadas.

Three rectangular shapes in red, orange, and yellow on a dark background.

Para começar, insira sua ideia central, depois anexe ‘nós’ adicionais, ou subtópicos. Cada um pode se dividir em subnós, que por sua vez, podem se dividir em mais subnós próprios. Se em algum momento você começar a perder de vista o quadro geral, basta dar uma olhada na lista contínua de todos os nós que você criou.

Há muito mais nos mapas mentais do que meras palavras: pode-se incluir ícones, imagens para animá-los ou tornar os nós mais fáceis de encontrar.

Além do brainstorming, o mapeamento mental também é útil quando você deseja dividir um projeto extenso em itens de ação concretos.

A B C do desenho de um Mapa Mental

O Modelo de Árvore

A maioria dos Mapas Mentais segue o Modelo de Árvore: eles começam a partir de um único objeto, geralmente posicionado ao centro e desenvolvem então vários ramos que representam conceitos relacionados. Cada ramo pode se dividir em dois ou mais ramos, mas eles nunca se fundem: o mapa inteiro é um esquema hierárquico onde cada objeto tem apenas um 'pai', mas pode ter múltiplos 'filhos'.

Mind map titled

Desenhado no XMind

Devido à sua baixa complexidade, este modelo é rápido e fácil de gerenciar, mas às vezes a restrição das relações hierárquicas não permite uma representação significativa: por vezes, precisamos de mais flexibilidade.

Um Mapa Mental para Designers de UX

Como visto, Mapas Mentais são ferramentas para brainstorming, reconhecimento de padrões e visualização de processos, então há uma maneira infinita de um Mapa Mental ser útil no nosso trabalho de design de UX. Mas eu achei um tipo de Mapa Mental especificamente útil para nós porque ele mostra as entidades e a maneira como estamos conectando elas: o Mapa de Ontologia.

Ontologia é o estudo filosófico do ser, estuda conceitos que se relacionam diretamente ao ser, bem como as categorias básicas do ser e suas relações.

O Mapa de Ontologia tem algumas semelhanças com o Diagrama de Relacionamento de Banco de Dados usado por desenvolvedores e, de fato, eles têm o mesmo objetivo: querem representar as relações entre os objetos existentes do sistema. No entanto, o Mapa de Ontologia é mais frequente uma ferramenta de design do que uma ferramenta de documentação, então o usamos principalmente nas etapas iniciais do projeto para nos ajudar a definir como o sistema pode funcionar.

Diagram illustrating the Netflix ontology map, showing entities and their relationships, including movies, series, and user profiles.

Mapa de Ontologia do Jack Magma Studio

Características de um Mapa Mental

  • Organização e estrutura claras. Mapas mentais são restritos a estruturas de árvore. Eles têm fluxos claros e direcionados a partir da raiz da árvore até suas folhas.

  • Um tópico central. Nos mapas mentais, todos os nós (exceto a raiz da árvore) têm apenas um nó pai. Cada nó pode ter filhos correspondentes aos subtópicos daquele conceito. Cada conceito em um mapa mental pode ser rastreado diretamente de volta ao tópico raiz.

  • Sem definição de relacionamentos. Não há distinção entre diferentes tipos de relações entre nós — todas as conexões na árvore são representadas da mesma forma e são não etiquetadas.

Usos em UX

Mapas mentais ajudam a organizar uma coleção de informações conectadas a um único tópico e estruturá-las de uma maneira sistemática e significativa. Em UX, são úteis quando se faz trabalho de ideação categórica, tal como:

  • Divisão dos componentes em uma página específica - por exemplo, para determinar a mini-IA da página

  • Planejamento de tópicos dentro de um site

  • Mapeamento de informações de uma maneira segregada e muito melhor

Funcionalidades legais que o XMind Oferece

Diagram with interconnected shapes in black, yellow, and orange, displayed in a web browser format.

As funcionalidades do XMind que eu pessoalmente mais gosto ou que me ajudam mais são: Experiência contínua em todos os dispositivos: Mapas mentais podem ser facilmente encontrados em laptops e dispositivos móveis, e o XMind funciona perfeitamente através de diferentes plataformas.

UI escura: O XMind: ZEN oferece suporte ao modo escuro em qualquer plataforma de desktop. A interface pode ser alternada entre claro e escuro nas Preferências.

Conclusão

Desenhar um Mapa Mental no micro nível pode ser realmente difícil e muitas vezes inútil. No geral, durante as fases iniciais do design, é mais produtivo criar mapas Lo-Fi em vez de perder tempo detalhando e codificando-os.

Cada designer terá sua preferência pelo modelo que mais gosta depois de pesar os prós e contras. Eu, pessoalmente, prefiro o Modelo de Árvore por causa de sua simplicidade.

Notas: Este artigo é publicado por Saurav Pandey, em Medium.

Mais Publicações

Xmind logo - mind map and brainstorming tool

Funcionalidades

Soluções

Recursos

Xmind logo - mind map and brainstorming tool
Xmind logo - mind map and brainstorming tool
Xmind logo - mind map and brainstorming tool