Tag Info

Hot answers tagged

22

If the data is tabular, then I see no reason why one shouldn't go with tables? After all, the whole purpose of table element is for showing such type of data. But if your query is how to make the tabular data look more beautiful, then read this article - http://darkhorseanalytics.com/blog/clear-off-the-table/ In nutshell, it follows the principle of 'Less ...


10

While it can be computationaly and mathematically complex, the concept of heat maps can help you out here. The point of a heat map is you add a third dimension to a 2 dimensional plot not by actually having an additional axis, but by using color. For example, your X axis could be "employees", your Y axis could be "project", and time could be represented by ...


4

You can simple use "actions" button which opens on click all available action for specific row. Example:


3

You could Consider a more graphical approach as this will help you move away from tabular data and allow you to add more details if you wish to do so. This has also the advantage of providing an immediately understandable and comparable view of time units used. opting for a progress bar as in the mockup below, users will be able to get the information they ...


2

This isn’t a whole lot you can do with a card view that you can’t do just as well or better with a table. Both allow the user to easily see and interact with (e.g., edit in place) a modest number of attributes (or fields) for each data object. If you design your table to work on a mobile in landscape orientation, then you’ll be able to show about as many (or ...


2

You shouldn't need to rely on something as rigid as a table to have consistency in a UI. How to present non-tabular content (which I agree this is) is a design problem, and can be solved with layout positioning, typography, background colors, and fixed-width elements. I think the Amazon example doesn't feel consistent because the heights of the sections ...


2

I detest the iTunes UX, so I'm a fan of any competition :-) The 'conventional' way to sort is by clicking on the column headers. So I think any solution should attempt to be compatible with this behavior. For multi-column sort, things become more difficult. Columns can quickly get cluttered with tiny arrows or badges. The tiny directional arrows can be ...


2

There was a similar question posted a little bit back about visualization combinations (see Best visualization for combinations). In addition to the heat map posted above you also have a couple other choices which are similar but distinct. Contour Plot A contour plot is very similar to a heat map except that it displays the boundary of the regions. There ...


1

If you're already concerned about screen readers, all the better. Depending on the design, the filter might be after the title in the screen reading sequence. In that case, changing the title will not be taken up by the screen reader, since they usually operate from the focus point onwards. Hence, the people for whom you added the title will never see (or ...


1

Here's a rule of thumb on data tables. For people who read from left to right, you assign priority from left to right because that's how they read. (Note: it'll be reverse for right to left languages e.g. Arabic) Columns used for ID & scanning gets higher priority Because we read and scan information using the "F-pattern", you want the identifying ...


1

Where should the delete option be? I see many examples placing the delete icon or text on the far-right of the row. Is this best practice? Is it always advisable to swap row delete to checkbox selection/batch delete? I believe the far right location is because you don't want user to accidentally click on delete. It depends. For a really long (tall) ...


1

Typically a user will pick a row based on its contents, not on its current relative position (as in "I want the row labelled 'Bob' or '30s' I could care less if it's the 3rd or the 17th"). So in your example, you have two different interactions: Ability to select a row to <perform some type of action on> Ability to reorder rows My initial feeling ...


1

The one that is originally selected should hold that selection. For example, if the user hits up twice the highlighted '30s' should be at the top of the list. The selection should be based on the items, not the row.


1

I think what you're looking for is a "definition list" or <dl>. Those are for just this kind of scenario where you have a series of heading / text pairs. The attributes like "color" and "size" would be <dt> and the "blue" and "XL" would be <dd>.


1

@JonW the content you want to display fits exactly with the structure of table content - headers on the left, and content on the right, so yes, it is appropriate to use a table to display this information. To illustrate the point, try using vanilla html with this content and you'll see that the pattern which most closely matches your content is a table. ...


1

@JonW, please refer to the official HTML5 Specification. My personal opinion, and one that many have is that if it looks like a spreadsheet, then it belongs in a table. The HTML5 table page says this: Contexts in which this element can be used: Where flow content is expected. Precise rules for determining whether this conformance requirement is met ...


1

From a ux perspective there isn't a reason to avoid a tabular layout if it's appropriate. If you're concerned about it from a semantic web perspective then use divs to achieve your layout. EDIT: I, as have many people, have come to expect tabular data. It's quick and easy to scan information. For a clothing website that may not have every size and color for ...


1

How are the two related? I am asking this since a contact person, I assume will always be related to the customer. In which case, once the customer is selected, can you just show the list of available contact which would be a a relatively shorter drop down? I am getting to the point of you making sure that all the fields within your form are needed, seems ...


1

For me, the primary difference in these two layouts is content. Tabular views allows users to see a lot of information in rows. Referencing the header when needed, the information is always available and takes precedence. Card views allows the user to always have reference to the header information in each 'cell'. The best option here would be to ...


1

Card views and tabular views solve fundamentally different problems. Although I have to admit that card views have become the flavour de jour, they are often not the right choice. Card views work best when your primary goal is to view the data for a single item. Tabular views work best when your primary goal is to compare data between items. So which one ...



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