Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.

Hot answers tagged

127

I don't know all the different ways of visually displaying a hierarchical list of 'nodes', but here are the four main ones I can think of: Stacks Columns Arrays Networks


73

What was the right course of action here? Is there a point at which the user's fear of change becomes an important UX consideration in its own right? This is an interesting question - I believe the answer is yes. The core tenet of user centered design is considering the characteristics and needs of your users in your design. If the fear of change so ...


54

People don't generally use hierarchical structures 'in the real world' -- it seems to be something that has been forced upon them, a technical remnant of the past. What needs to be understood is the way that people recognise and organise things. Our brains don't work in a hierarchical way (without generating a lot of heat). Instead, we recognise things by ...


53

Normally the users have a point. It may not be the point they think, but that does not mean there is not a valid issue at the heart of it. The choice of (a) "old way" or (b) "our correct new way" is rather stark. I have re-factored a lot of UI's and occasionally missed a much loved short-cut. I always found a way of blending the better design for learners ...


32

The plus key is very arbitrary and does not map well with the intention of moving up/down. Also it is mostly used to expand the tree node (i.e. windows explorer). I would suggest a different key combination for moving : ctrl + up/down arrow. So the arrow keys are used for navigating, but combined with the control key they move the object. This seems to be ...


26

You are actually asking how to ensure better interaction design while combining two elements which are not UX-friendly: tree structures and pagination. 1. Tree structures Unfortunately, hierarchical trees are one of the most inappropriately used controls in the toolbox. They can be highly problematic for users; many people have difficulty thinking in ...


25

There are several problems with trees: A tree is a single taxonomy. This requires the user's mental model to match the software developer's mental model of the domain. Navigating with trees requires high-precision mouse accuracy to expand a tree without selecting the branch. This is also very difficult to manage with touch interfaces. Navigating trees ...


19

To my mind, the way we redeveloped it is unambiguously better. That's great, but "Better" does not always equal "Best". You may have thought you had "Best" before you received user feedback. However, the feedback you received should have thrown up red flags in your mind. What was the right course of action here? First, be willing to re-evaluate your ...


18

An alternative that is used sometimes, is a Miller Columns view. The idea is that the subnodes for the selected item in column a, are shown in column a+1 next to it. A benefit, especially with trees that contain different types of nodes on different levels, is that each column only contains one a single type. That is easy to understand. One downside is ...


18

This is the however If the majority of users have rejected a design, it seems ludicrous for any UX professional to insist on that design because 'they know better what's good for the users'. Quite appropriately, the majority of the replies to your question follow that thinking. I would, however, like to offer an alternative take on this, which goes well ...


14

There are a number of options that can ease this, as the onus should not be on the user to feel they have to go and drop it in its original position - assuming they can even remember where that might have been. Undo/Redo One is to provide an undo redo capability. This puts users much more at ease in that they know even if they do drop something somewhere ...


14

Before ignoring the wishes of your users, you must first validate that your new solution is indeed better. The way to do this is to get a number of fresh, non-involved users of the system and test the existing and proposed options with them. When the uninitiated users prefer your new method, you have validated your approach, eliminated assumption and you ...


13

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....


13

You pretty much want to go for one or the other extreme, where the extremes are: Explicit Save for Everything. Everything needs saving through an explicit command. Autosave Everything. Everything is saved automatically and instantly. You want the user to have as simple a mental model of the system’s behavior as possible. You don’t want to burden the ...


13

I'll take a different tack from some of the others on this. If users hate it then chances are it made their job harder instead of easier. Drawing an arbitrary line in the sand and saying that 75 items isn't worth doing text filtering seems silly as well. Real users interact constantly with the system you are building, where you only interact with it on ...


12

Like This? 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 ...


12

Looking at the image, a few things come to mind: Flatten the hierarchy. Your hierarchy is deep, and (deep) trees are difficult to use Your tree is unclear, because it repeats the same nodes at different levels. Get rid of the repetition. For me, it is not clear what this actually means. Are you trying to represent a network in a tree widget? If you must use ...


11

Show only the current level of the hierarchy, and breadcrumbs


10

For certain types of hierarchies (such as nested text), a control that I call a 'NestView' might be suitable: This actually evolved from a number of answers given to a question on Programmers.StackExchange: https://softwareengineering.stackexchange.com/q/87077/27103


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 ...


9

Perception: A new market for low complexity ("entertainy") applications has developed - explosively. Thus, even with non-diminishing tree use, it diminishes in percentage and plays less of a role in discusison of "modern" UI and UX changes. Alternatives: One feature of a hierarchy - fast locatability - has been largely replaced by instant search. We now ...


9

Joshua Barron's on the right track with his leading answer. I do see some additions to make, but I'm not cool enough yet to add comments. Let's stick with the simple assumption that the new UI is better than the old one. That way, we're just talking about the Developers who are Right, and the Users who are Wrong. The key problem then is how do you ...


9

I'd say the design of a tree menu is much older than 10 years. Windows 3.1 had a tree structure as part of the UI in it's File Manager. Now, the fact that a design is 10 year old is no argument. Rolex is successful at selling watches of which the design is more than 50 years old and I don't hear anyone saying they don't understand user's needs. About ...


8

Showing the actions only on hover is the way that 37Signals do it in many of their products, and so far I haven't seen any problems with it, other than it not being usable on touch devices. That is a big downside if your customers are likely to be using touch devices. With the prevalence of iPads, this is becoming a bigger concern. Another possible method ...


8

This is essentially a hierarchical table and is very common in project management and spreadsheet applications. Given the parameters that you have stated, I would absolutely include column headers. The folder level ("and this") number of downloads should be a roll up of the total number of downloads contained within as stated by @benvds. Example download ...


8

Users reaction to change is an interesting topic, look at all the problems major services have when they update - Facebook/Windows 8/etc! Changes becomes a bigger issue where you have expert or repeat use users. They have invested in the process over time and will have developed a relationship with it. Even if the solution is easier from a pure usability ...


8

The list in the drop down is not long enough to justify the text filtering (about 75 items). A very interesting statement. Scrollbars aside, I would test both UI's on yourselves and see how well you perform a searching task with 75 items with or without filters.


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 ...


8

The Windows TreeView control uses the '+' and '-' keys for expanding/collapsing the currently selected node by one level (it uses '*' for expanding the entire tree below the selected node). I suggest that using '+' or '-' for moving nodes would be confusing to people used to the Windows UI. Oddly, however, I can't find a definitive (i.e. MS) reference to ...


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 ...


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