// Internet Duct Tape

Using Mind Maps to Explore User Interaction

Posted in Programming Tools, Software, Technology by engtech on August 31, 2007

I’m “fortunate” to work at one of those companies where meetings are a way of life. Not only do meetings happen daily, but everyone and their dog is invited. Well, until one of the dogs bit an intern. Now the dogs are free to keep working on their projects, but everyone else is still stuck in needless meetings. The only good thing that has ever come out of these meetings is that I’ve developed a passing familiarity with mind mapping software.

Mind mapping is a technique for taking notes. You start with a central keyword or idea and then build up an ever expanding structure from around that starting point. I might have learned this before in grade three, but the Internet seems convinced that it’s the latest and greatest new thing. Note to self: go through kindergarten notebooks and search for ideas that haven’t been copyrighted. Mrs. Nelson, you will be my goldmine. Now I feel bad for falling asleep during story time.

mind map example

You can do mind maps easily by hand, but you can also use free or pay software to build them. It is a great technique for capturing the minutes and action items in a meeting because it is so freeform yet structured. But you don’t have to take my word for it, LifeHacker has given examples of writing mind maps for meetings, and Kathy Sierra has given mind maps a big thumbs up.

Back to the meeting.

I’m putting an appointment on my smartphone that I hate, and as usual I’m frustrated by how needlessly complicated their user interface is. Sell stock in Nokia and buy stock in Apple — you won’t go wrong. That’s when I remembered something I wrote in a blog post about how their UI design wouldn’t have hit the ground if someone had just drawn it out and realized that it takes 10 user interactions to place a phone call. I looked up at the projected mind map on the wall and I realized that I was looking at the perfect software for doing something like that.

Mind mapping begins with a central keyword, but instead you can think of that as the first screen in your application. Each depth in the mind map will represent a user action. One you have mapped out all the actions you can see the overall cogitative load of your program clear as day. Take a second to look at a mind map I did of the WordPress.com blog interface.

mind mapping a user interface

Once the big blob of your UI is mapped you can at a glance look at the most common actions a user would have to perform and see how many interactions it takes to get there. You could even use a mind map to design how content is linked on your blog and how hard it is to use. Admittedly, drawing out a UI like this is nothing new, but using mind mapping software for it is so damned convenient.

Key Points

  • Mind mapping software is not just for note taking and meetings
  • It can be used for mapping user actions
  • The finished diagram can be used to optimize the most important actions and clearly see what actions are redundant or unnecessary
  • The finished diagram makes a great 1 page tear sheet to help users remember where everything is

More Information About Mind Maps

25 Responses

Subscribe to comments with RSS.

  1. VicGee said, on August 31, 2007 at 11:42 pm

    That’s a great idea. I’m a longtime user of mindmaps, but I’ve always used flowcharts to grapple with a new piece of software. I’ll be trying this.

    The only problem I can forsee, is that there are often functions that are reached by multiple routes, but they end up at the same place. Think Ctrl+C; Edit menu, Copy; Right-click, select Copy from context menu. That’s a trivial one, but it happens a lot.

    There are only two options I can think of:
    To use the curvy lines – that for example FreeMind and MindManager allow – to link the duplicate routes into one function.
    To duplicate the function wherever necessary. I don’t like this.

    Did you find this a problem?

    Another issue (I’m thinking as I write, here) is what to focus on first: The interface components that lead to functions (as in your example), the functions themselves, or the user’s aims (the “what’s in it for me” approach).

    I’ll be chewing this one over. Thanks.

    By the way, another very comprehensive list of mind mapping software is in my sig line.

    Regards
    Vic

    http://www.mind-mapping.org

    The master list of mind mapping &
    information management software

  2. Jos Hirth said, on August 31, 2007 at 11:52 pm

    Good idea. While screen flow diagrams work pretty well for simple things they are hard to modify and grow very quickly. Mind maps are more compact and reorganization is usually a piece of cake with mind mapping applications.

    I’ll try this as soon as I get a chance. :)

  3. grant czerepak said, on September 01, 2007 at 5:49 am

    Shifting paradigms is always a good practice, but I don’t see any difference between this an a hierarchical model. You’re just making the root node a central hub. But if that is what turns your crank, map away.

  4. [...] Skip navigation Subscription OptionsMost Popular PostsIDT Labs – Free Software ToolsWordPress.com Resources – Tips, Tricks and ToolsWordpress.com Theme ReviewsWordpress.com Theme Review HelpGreasemonkey script: WordPress Category ResizerWordpress.com 7 Day Referrer ParserPerl Script – WordPress.com 7 Day Referrer ParserGreasemonkey Script: Akismet Auntie Spam for WordpressGreasemonkey Script: Find images that are too wideTag Cloud Generator for Wordpress.comTag Cloud Generator AdvancedTag Cloud Generator – Release NotesWordPress Themes by InternetDuctTape.comBlack and Blue and Read All Over Theme for WordPress SandboxMoon Under Uranus Theme for WordPress SandboxMiscellanious WordPress Scripts and ToolsGreaseMonkey Script: WordPress Comment NinjaTechnorati Favorite Your FansTechnorati Favorite Your Fans – Release NotesComic BloggerGreasemonkey script: Flickr always search for Creative Commons licensed photosGreasemonkey Script: Yahoo Pipe CleanerTag CloudAll Posts by Category and TitleSeriesGift Guide for Geekseaster eggsReader Appreciation for RSS subscribersWelcome to Internet Duct Tapebloggoogle1ec000b3808eedbf.htmlAbout MeDisclosureImages Credits « Using Mind Maps to Explore User Interaction [...]

  5. Kit said, on September 03, 2007 at 5:53 am

    This reminds me of http://www.thebrain.com . A runtime UI mindmap, maybe?

  6. Magnus said, on September 03, 2007 at 2:40 pm

    Great point. I’ve noticed that when starting a new project a mindmap is a great way to get an overview of the work that needs to be done.

    I’ve tried FreeMind and Microsoft Visio, but I like ink on paper better. Why? Because it goes very fast to switch color (I have three color pens) and when I want to insert a symbol I don’t have to look it up in a library first.

    Also I’ve found that it is very difficult to write software (I write lowlevel C drivers for embedded devices) without a graph or picture infront of me showing the pulses, layers or whatever. One day when I have lots of time I will write a real documentation that fullfill the quality departments requirements…

  7. engtech said, on September 05, 2007 at 1:16 am

    @VicGee:

    I wouldn’t duplicate the functionality — I would think that the duplicate paths to get to the same function is an indication of a fault with the UI.

    I think the context would be depended upon the view.

    One mind map would be “you’re here, here’s what you can do” and another mind map would be an FAQ where things are grouped by common actions.

  8. engtech said, on September 05, 2007 at 1:19 am

    @Jos Hirth:

    That’s what I thought about it as well. You can do the same thing with hierarchical flow charts, but it isn’t as easy to create and rearrange. With mind-mapping software it’s so easy to do that there isn’t any reason for the developer not to create it as part of designing the UI.

  9. engtech said, on September 05, 2007 at 1:28 am

    @Kit:

    Very much like thebrain, although the javascript drawings could look better.

  10. engtech said, on September 05, 2007 at 1:29 am

    @Magnus:

    Yup, by hand is also a great way to go for speed. What might be good is to start by hand and then transcribe it to machine once things have settled and you want to check the mind map into source control.

  11. VicGee said, on September 05, 2007 at 9:13 am

    I can’t see multiple paths to the same function as a UI error. Some users like to use the mouse, others the keyboard, so there will be dual routes in any well-designed UI, to my way of thinking.

    So the example I gave for Copy having three routes:
    – Ctrl+C;
    – Edit menu, Copy;
    – Right-click, select Copy from context menu
    is common to just about every app I use.

    Then there’s context. If I want to copy a slug of text from one line to the next, I can select it, hold the Ctrl key and drag, dropping it in place. But copying it from page 1 to page 77 is a different context. I’ll copy the slug of text to the clipboard with Ctrl+C, find the destination and press Ctrl+F. Drag with Ctrl held is a fourth option – is it bad design? I would not like to loose that.

    It’s not just a case of user preference. We have to design for beginners as well as experts.

    Windows has far too many ways of getting to the same place, it’s confusing and makes it harder to learn – I take that point – but while “too many” is bad UI design, I think just one way of invoking a function is not good. It ignores context, user need and user preference.

    Regards
    Vic

    http://www.mind-mapping.org

    The master list of mind mapping &
    information management software

  12. engtech said, on September 05, 2007 at 10:40 am

    @VicGee:

    I agree with having different ways of accessing the same function by menu, keyboard short-cut, right click context menu, and drag-and-drop. Those are all highly different ways of interacting with an application and most people (think mom & pop) never get beyond the menu.

    What I’m against is when the same function can be accessed multiple ways by the same method. It’s confusing to the users for no logical gain. Why should the same function be listed under Options and under Special Features? It’s counter-intuitive, and it creates more testing paths.

    Getting back to mind maps, I see UI mind maps being useful if all of the functions are accessed the same way:
    – a map for menu items
    – a map for access keys
    – a map for right click context

    I think comparing the maps would give some rich information, like your access keys should map onto the most commonly used functions in your menus.

  13. VicGee said, on September 05, 2007 at 11:01 am

    Yup, I’ll buy that!

    Regards
    Vic

    http://www.mind-mapping.org

    The master list of mind mapping &
    information management software

  14. SmoothSpan Blog said, on September 09, 2007 at 12:51 pm

    Using Mindmaps to Explore User Interaction and Create QA Test Plans

    Using Mindmaps to Explore User Interaction is a cool idea.  Basically, you depict the flow through the UI as a visual map:

    Doing so can give you an instant idea of how hard or easy it is to navigate the UI to key functionality.  I would venture to a…

  15. Bob Warfield said, on September 09, 2007 at 12:53 pm

    Great idea, but did you know there is a product that does this?

    http://smoothspan.wordpress.com/2007/09/09/using-mindmaps-to-explore-user-interaction-and-create-qa-test-plans/

    Best,

    BW

    PS This is also an indispensible tool for software testing, and a great paradigm for a future UI creation tool.

  16. jk said, on September 11, 2007 at 2:46 am

    grant czerepak said it right. These mind maps are the same as hierarchies. A good outliner makes a decent mindmapping software. Personally, I liked the old Frontier interface because it was so minimalist… but you could transform the data with code.

    Outliners are also the basis for presentation software. So mind maps can become presentations.

    Menus are also hierarchies. This includes “screens of menus” and websites with layers of navigation.

  17. Best links of the week | innerPlace said, on September 12, 2007 at 4:34 pm

    [...] Using Mind Maps to Explore User Interaction [...]

  18. engtech said, on September 13, 2007 at 5:21 pm

    @Bob Warfield:

    That user interface tool looks very interesting for it’s ability to automatically map out UI.

    Is that based on examining source code or hooking into the operating system some how?

  19. engtech said, on September 13, 2007 at 5:26 pm

    @jk:

    Yup, mind maps are definitely just the same ‘ole hierarchies.

    What I like about a mind map compared to a drop down hierarchy list is that it really illustrates that there is a start point in the middle and the user can go ANYWHERE from there… and how when something is far away from the middle (especially beyond depth 3 in a menu) that it can be hard to discover.

  20. Bob Warfield said, on September 13, 2007 at 9:03 pm

    Test Factory hooks into the OS to map the UI, so it works even if you don’t have the source code.

    Best,

    BW

  21. [...] Internet Duct Tape is a great Tech Writing blog with a huge following. More great workflow collaboration tools and concepts quoted from Using Mind Maps to Explore User Interaction « Internet Duct Tape: [...]

  22. Suzanne of New Affil said, on September 29, 2007 at 2:53 pm

    The part of this post that initially caught my eye was that the dogs are back working on their projects, while the humans still have to go to meetings! Keep up the great writing. I’m featuring this post on this week’s “Sunday Seven”. Stop by tomorrow to check it out.

  23. [...] Internet Duct Tape’s entry caught my eye not only because of the discussion of Mind Mapping, but also the dogs who work for his company, and why they are exempted from attending daily [...]

  24. [...] Eric somebody on Using mind maps to explore user interaction [...]

  25. how to draw people said, on June 08, 2010 at 10:04 am

    With so much spam posts around these days it’s great to find at least your site doesn’t have any.


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 288 other followers

%d bloggers like this: