2

Looking for help in designing a navigation method (visual affordance) for space constrained Desktop app.

Below, I have a tree grid which is the primary navigation for the detail pane below the grid. Each level within the grid can have multiple nodes/children.

(It is possible for the user to basically hide the grid via a slider or to maximize the grid via the same method.)

Specific questions are: 1. Arrow up icon next to a 3rd Level Name for moving up in the grid from the navigation panel. Is this viable? Intuitive? planning for a mouseover. Is there a more elegant way- Win 8?- way to do this?

  1. Next to the 4th Level label and dropdown control, I have a mobile (iOS) Actions icon with a menu of actions- is this mixing metaphors? Is there a better icon or even better paradigm? Space is an issue.

The goal between these two (and they are a bit redundant here, but this is to explore options not final desing) is to enable a user to navigate the hierarchy from the details.

enter image description here

Improve this question

2 Answers 2

Reset to default
2

Arrow up icon next to a 3rd Level Name for moving up in the grid from the navigation panel. Is this viable? Intuitive? planning for a mouseover. Is there a more elegant way- Win 8?- way to do this?

Because your navigation structure looks just like a spreadsheet (which is very familiar for most people), I would say the navigation should be like a spreadsheet as well. That means as a user I would like to click on a level and then navigate to that level. Other navigation methods like the arrow you suggested (which is my opinion isn't very clear as a navigation button) could cause confusion. An axception to this would be navigating with keyboard arrows (up/down).

Next to the 4th Level label and dropdown control, I have a mobile (iOS) Actions icon with a menu of actions- is this mixing metaphors? Is there a better icon or even better paradigm? Space is an issue.

Using these kind of mobile icons could be a good practice because lots of people recognize them, but you should be aware of picking the right ones to avoid confusion. I'm not an iOS user myself so I can't say whether or not the icon you chose is the correct icon for an "Action" menu.

Improve this answer
2
  • The arrow up icon will have a mouseover. We tested with the business and they "got it" right away. Also, the tree grid echos the navigation- clicking on a level in the tree grid will navigate the user to that node. That functionality currently exists, so the user pattern is there.
    – Leslie M
    Jan 23, 2013 at 19:53
  • Oh, and the reason for the 'up arrow' is because the user asked to be able to navigate directly to the parent of the item they are on- without having to use the grid. The user will have the ability to hide/collapse the grid, to make more room for the forms at the bottom, and their work flow frequently takes them up the navigation (which is a many to one). There is not a workflow to go the other direction, because there are many children to one parent.
    – Leslie M
    Jan 23, 2013 at 19:56
0

The icon you've shown is the "Share" icon in iOS (and now Mountain Lion). "Share" doesn't map perfectly to performing actions on an item (although it does somewhat now that the sheet contains functions like printing). To me, the share icon in iOS maps closely to the "Share" charm in Windows 8:

The Windows 8 Share charm

In OS X, the convention for general actions is a cog. Here it is in the Finder and Mail respectively:

The Actions button in OS X Finder The actions button in Apple Mail

Interestingly, the same icon is now used for Smart Playlists in iTunes:

The actions button in iTunes 11

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.