Ментальная карта внутри мира UI/UX

Саураб Пандей – продуктовый дизайнер в Snapdeal. Он любит создавать восхитительные впечатления, используя пиксели и векторы для их передачи. Он обнаружил, что майндмэп – это полезный инструмент для обогащения концепций, и использовал XMind в своих проектах по UI/UX. В этой статье он делится своими мыслями и тем, как XMind помогает в его проектах.

Формулирование сложной мысли может быть сложной задачей, однако XMind упрощает стратегию, известную как майндмэппинг, что может сделать процесс намного проще.

Майндмэппинг

«Проблема, четко сформулированная, наполовину решена»

Майндмэп – это полезный инструмент для обогащения концепций. Следует уделять особое внимание майндмэппингу, так как он помогает в генерации новых идей и в выявлении связей между различными данными и информацией.

Лично я предпочитаю использовать XMind для создания майндмэпов.

Пример майндмэпа из одного из моих проектов

Получить XMind для Mac

XMind позволяет создать диаграмму, где одна основная идея разветвляется на связанные с ней.

Для начала введите свою основную идею, затем присоедините дополнительные «узлы» или подтемы. Каждый из них может отделяться на подпункты, которые, в свою очередь, могут делиться на свои собственные подпункты. Если в какой-то момент вы начнете терять общую картину, просто взгляните на текущий список всех созданных узлов.

Майндмэпы – это не только слова: в них можно вкладывать иконки, изображения, чтобы сделать их более привлекательными или упростить поиск узлов.

Помимо мозгового штурма, майндмэппинг также полезен, когда нужно разбить обширный проект на конкретные действия.

А Б В рисования майндмэпа

Древовидная модель

Большинство майндмэпов следуют древовидной модели: они начинаются с одного объекта, часто расположенного в центре, и затем разветвляются на несколько ветвей, представляющих связанные концепции. Каждая ветвь может разделяться на две или более ветви, но они никогда не сливаются: вся карта является иерархическим планом, где каждый объект имеет только одного «родителя», но может иметь множество «детей».

Разработано в XMind

Из-за своей низкой сложности эта модель быстра и легка для управления, но иногда ограничение иерархических отношений не позволяет достичь значимого представления: иногда нам нужна большая гибкость.

Майндмэп для UX-дизайнеров

Как видно, майндмэпы – это инструменты для мозгового штурма, распознавания паттернов и визуализации процессов, поэтому есть бесконечные способы, как майндмэп может быть полезен в нашей работе по UX-дизайну. Но я нашел один вид майндмэпа, который особенно полезен для нас, потому что он показывает сущности и то, как мы их соединяем: Онтологическая карта.

Онтология – это философское изучение бытия, она изучает концепции, которые напрямую связаны с бытием, а также основные категории бытия и их связи.

Онтологическая карта имеет некоторые сходства с диаграммой отношений баз данных, используемой разработчиками, и на самом деле у них одна и та же цель: они хотят представить отношения между существующими объектами системы. Тем не менее, онтологическая карта в большей степени является инструментом проектирования, а не инструментом документации, поэтому мы используем ее преимущественно на ранних стадиях проекта, чтобы помочь определить, как система может работать.

Онтологическая карта из студии Jack Magma

Характеристики майндмэпа

• Четкая организация и структура. Майндмэпы ограничены древовидными структурами. Они имеют четкие, направленные потоки от корня дерева к его листьям.

• Одна центральная тема. В майндмэпах все узлы (кроме корня дерева) имеют только одну родительскую ноду. У каждого узла могут быть дочерние, соответствующие подтемы этой концепции. Каждую концепцию в майндмэпе можно проследить прямо до центральной темы.

• Нет определения отношений. Нет различий между различными типами отношений между узлами — все ребра в дереве представлены одинаково и не имеют маркировки.

Использование в UX

Майндмэпы помогают организовать коллекцию информации, связанную с одной темой, и структурировать ее систематически и осмысленно. В UX они полезны при выполнении работы по категорийным идеям, например:

• Разбивка компонентов на конкретной веб-странице — например, для определения мини-IA страницы

• Планирование тематических тем внутри веб-сайта

• Карты информации, охваченной раздельным и гораздо более лучшим способом

Крутые функции, которые предлагает XMind

Особенности XMind, которые мне лично нравятся больше всего или помогают мне больше всего: Бесшовный опыт на всех устройствах: майндмэпы можно легко найти на ноутбуке и мобильных устройствах, и XMind работает идеально на разных платформах.

Темный интерфейс: XMind: ZEN поддерживает темный режим на любой десктопной платформе. Интерфейс можно переключать между светлым и темным в настройках.

Заключение

Создание майндмэпа на микроуровне может быть очень сложным и часто бесполезным. В целом, на ранних стадиях дизайна более продуктивно создавать Lo-Fi карты вместо того, чтобы тратить время на их детализированное и кодифицированное изображение.

Каждый дизайнер будет иметь свои собственные предпочтения относительно модели, которая ему больше всего нравится после взвешивания ее плюсов и минусов. Лично я предпочитаю древовидную модель из-за ее простоты.

Примечания: Эта статья опубликована Саурабом Пандей на Medium.