46

I think Steam just haven't noticed this problem. Here are some reasons to put the logout button at the bottom of the dropdown: Avoid Accidental logouts - as you pointed out putting the logout at the top of the list could create accidental logouts for users that are used to double clicking on elements. Follow standards - when browsing the internet users ...


17

Make it harder to find destructive buttons If you do need to include destructive buttons, you should definitely find a way to make them harder to find than the primary action button Best practices for buttons It's very important for businesses today to keep the users engaged with their products, and no one wants to give them an easy access to the ...


15

I don't like tree views, but sometimes they really are the most appropriate widget. Before you write the tree view off, it's worth thinking about whether it can be redesigned better for tablets. 1. Issues with tree views The drop-down icons are usually too small. They're hard to click even on desktops, let alone on tablets (see Fitt's law). Idea Can we ...


13

User Flow Think about each menu item as a task. You can perform tasks sequentially, like task1, task2, task3.... taskN . Which would be the very last task you can perform? Answer is easy: logout. App Ergonomics By adding the logout link at the bottom of the menu, you make it harder to accidentally click that element. See graphic below: Once you open the ...


11

Show only the current level of the hierarchy, and breadcrumbs


10

We are facing a similar situation where our client has a huge catalog and wants to allow its users to successively filter down the content by drilling down into a hierarchy defined by them; a hierarchy they can decide to change anytime and as much as they want. Add to that the fact that the target platform is Android, its omnipresent back button and ...


10

You're on the wrong path, here. The problem is that you try to show the attributes in different trees. The tree should contain the content. The attributes should be displayed as attributes to each node. This can be done in various ways depending on the importance of attribute. As a column: ...or: - As a popup dialog - By showing the attributes directly ...


8

My company's product uses several entities that work like tags and form graph-ish tree structures, much like your example shows. (The product isn't public, so I can't get too detailed, sorry.) From a UX perspective, the main win that we've found is that the system is very flexible and can often describe more complex subject matter than a flat tag list or ...


8

Anything is commonly considered organized when it looks like everything has a correct order or placement. But it's only ultimately organized if any element has no difference on time taken to find it. In that sense, organizing can also be defined as to place different objects in logical arrangement for better searching. --http://en.wikipedia.org/...


8

Luke Wroblewski has done a lot of research on web forms.This article on dependent dropdowns would probably answer this question more fully for you. He breaks selection dependency into a few different visual displays: page display, tabs (section and finger), section selectors, and exposing with radio buttons (below, within, inactive, and groups). Depending ...


8

Consider panels that come out from underneath each other to reflect the hierarchy in dimensions. The top is some major classification that you can still trace back. As you go deeper into the hierarchy previous panels slip off to the left. You can go back up the tree by swiping them back to the right. When you finally hit on an option that has no more ...


7

This is a great opportunity to get creative. download bmml source – Wireframes created with Balsamiq Mockups Smart programming can take care of your performance issues hopefully. Just load things as you need them. Allow users to hide things they don't care about. Use a tree (it just makes sense logically) but don't let yourself be stuck in linear ...


7

I have not seen this pattern employed exactly as you describe. My relevant experience in information-rich webapps stems from enterprise health-monitoring and deployment software, which has a deep navigation hierarchy. In my opinion, the left-navigation and the main content should not both employ accordions. Left hand navigation is typically vertical, and as ...


7

When designing for presentation of information, it is important to try and fit the interface as closely to the underlying data structure and the relationships between the different sets of data as possible. In general the aim is to make the relationships as simple as possible, and it might mean also using a combination of data structures if it makes sense to ...


6

This question is quite broad, so I'll try and give a primer. The Graph Drawing entry in Wikipedia makes a good starting point for this genre of visualizations. Graph Drawing is a general term for pictures that show how things are connected. Synonyms and more specific variants abound: Node-Link Diagram, Relationship Diagram, Network Diagram, Social ...


6

Microsoft have left the TreeView display in mind when they introduced Windows 8. Now you move down the hierarchy by clicking items (categories) and using the back button to brows back. This is the default style of hierarchical navigation on Windows 8. So a TreeView control in the style of Windows 7 and previous Windows versions does not apply. Take the ...


6

You can use background color to represent going deeper in the hierarchy and avoid using too much indentation. If you do not want to color the entire background of the post, you can do just highlighting the edge with a color. In any case, I would still have the tiniest amount of indenting because it is a much stronger visual cue. You can compensate the ...


6

Another option is to use Miller columns, which is essentially a treeview flipped around and structured in rows. This is a rather common approach in file organizers, but you may find it a little bit tricky when there are too many levels of hierarchy. You could also look at an organisational chart or graph that is commonly used to represent hierarchy within ...


6

To my understanding, the log out button is the button in the dropdown that has a different action than the rest. The rest of your menu account details, preferences, view profile etc are navigation elements for the user, but the log out button is an action that would make the user log out from the system. What is sure is that the Log out and the ...


5

I can't answer from a mathematical perspective, but from a UX perspective the root node is not required if it conveys no information about the hierarchy, and especially if it is liable to cause confusion about what the root actually represents. The primary reason for including a root node is to represent an actual object which is a superclass of all its ...


5

Yes tags can be hierarchical and there is actually a lot of (not yet widely recognised) potential in it. Although some people (probably like the question asker) have been curious and/or after hierarchical tagging for years, the reason it is not present on the CMS market now is more because of technical obstacles rather than not seeing point in it. With pure ...


5

I don't see a big difference in difficulty of implementation between the two models you describe but this ins't an implementation discussion. Only people with much more information about the project can determine whether the extra cost of implementation to achieve greater usability will pay off. My initial reaction (and that of most people here I think) ...


5

Remove the chrome. People don't like living in houses with scaffolding. Similarly, it's hard to read an expression where everything is surrounded by a box and has several buttons attached. Generally you want to start by asking "What is the most understandable format that I can write this expression in?" Use a whiteboard, and imagine you're trying to explain ...


5

For simplifying and making your visual encoding system more consistent you can use the set:


5

I have a similar set up for a test environment and a production environment. I found myself accidentally adding test data to the live database. So I wanted to make sure that it was easy to identify which server I was on. I could glance at the address bar, but it was too easy to forget. I wanted the differences to be minimal but obvious. I chose to add a ...


5

Some improvements are: Remove agressive black border as it takes too much attention Use single grid, it creates simple visual structure Align numbers to the right for easy scanning and reading Remove repetitive 'Score'. It breaks the numbers reading Don't use too long empty lines Be careful with zebra-coloring the lines, as printed version could be hard ...


5

This a common case in a complex workflow or process, which can be solved with progressive disclosure, like:- Initially show all parent tasks with their progress indicated and also childs status with notation like 2 off 5 childs is comleleted (indicated by showing 2/5). For more detail user can always expand a parent task to get sub-task details which in ...


5

In my experience this is one of those places where shadow works great to show deeper layers. A slightly different font weight/color treatment would help as well.


5

Personally, I think your main issue is to use a table, which complicates things and provides an affordance that collides with what you want to achieve. Think about this: I see your categories list, and see there are 10 per page. Great. Now, I expand your category... and now I see subcategories but some of the categories I was seeing disappeared! This is a ...


5

I think your second option is going to get confusing when the users will start using the sort functionality, you will lose the visual hierarchy between the elements. I would go for the 1st option.


Only top voted, non community-wiki answers of a minimum length are eligible