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 ...
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 ...
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 ...
When your hierarchy is so large, there's no way to avoid clunkiness because it's there by design (large data sets are unwieldy). Miller columns with an "add" button on the bottom will be the most elegant solution here. They allow you to have as many hierarchical levels as possible while making selection process simple because they clearly separate the levels....
I'm picturing a vertical tree structure like one would see in an OS file browser (see below). Is this right?
Stripes can Improve Usability
I think horizontal stripes (or lines) can help, but the help they provide is most beneficial when dealing with a horizontally large tree or list. For example, in the image above, if I need to connect a file ...
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.
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 ...
1) Add location breadcrumbs at the top of the screen to indicate where in the hierarchy you are.
2) Don't let the new level cover the previous level. Let some pixels of each level be ...
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 ...
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:
- As a popup dialog
- By showing the attributes directly ...
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 ...
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.
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).
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 ...
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 ...
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 ...
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 ...
A couple of things spring to mind:
Use Greek letters. Your participants might be less familiar with these so any implicit ordering will be weakened.
Put the numbers/letters on the back where they can't see them. Then just lift the cards to record the order.
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 ...
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 ...
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 ...
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 ...
There are a couple patterns you can use here; I would recommend looking at the following articles for ideas:
Designing Effective Navigation: Descendant and Lateral Navigation, specifically the discussion of tabs and lists/grids/stacks/carousels. I'd also look at horizontal paging (swipe views).
Android Design: App Structure Pattern
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 ...
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 ...
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) ...
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 ...
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 ...
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 ...