Tag Info

New answers tagged

1

I'd put them at the right if you must choose. Unless you really need to filter your data to make sense of it, I'd tuck it out of the left-gutter view most people scan with. I've also has some really interesting usability sessions that suggest filters/search are confusing for non-techy people whom may rather just scroll. This all depends on the size of your ...


1

If the table is the only element displayed on the page, filters should be in a right or left column. and for tablet/mobile, just above the page title.


0

why don't you just use check-boxes for deleting and arrows for actions, similar to this -> keep is as clean as possible and it does not take much space


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


0

On the one hand server name/ip is the ID of the server and on the other it looks like the most important property is the server status. Not a clear answer here I think but just note you can combine both attributes to a single column. This is usually done by putting the primary information on top and the secondary below it, with smaller font and lighter ...


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


0

This problem has many parallels with database administration interfaces, where there are often many columns and rows. Both php myadmin and navicat solve this conundrum simply by allowing the user to configure column order to suit their own particular use case. Your domain is similar, you have technically adept users; detailed and complex technical data; ...


0

It depends on the weight you want each to have. The ones you put further to the left, the more likely and easily people will see them as we read left to right. In your particular case, I'd likely do status and then the server name because if a server is down I want the admin to immediately notice. I'd likely have it color coded as well, green or black for ...


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


4

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


0

Consider that users may miss an arrow. If an arrow does not also select the item then a miss on an arrow would select the item. So a missed arrow would select the item but an arrow hit would not select the item. From the UI is is not clear how the row is selected. A click anywhere in the row (including the arrow) is just simpler to deal with (in my ...


0

It's not stated in the question, but I would assume that whatever row is moved up or down in the list order still keeps, or tries to keep, its physical position on the screen, under the pointer/finger (while all other rows move down or up to accommodate it), so the button would be easy to use multiple times. In that case, selecting the row that gets moved ...


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


0

Suggestion: Name Time (hh:mm:ss) Test 1 0:45 Test 2 1:23:45 Avoid repeating the unit for each value - especially if this is a long list. The cost for casual observers (scroll up and match the unit pattern with the text) is IMO marginal compared to the reduced visual ...


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


0

The shown interface satisfies the following user stories: As a user I'd like to: Select a row. Promote a row. Demote a row. Note that it doesn't satisfy the following: Reorder rows. Move a row and select it. The reason you don't allow reordering is that reordering involves moving things more than one row up and down. Although it really depends ...


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.


0

Addition testing with actual users revealed that some people don't even notice the difference between Per Row vs Per Cell editing. So it may be more of a design preference as oppose to a marked difference in edit speed. Sample size was relatively small though (n=6). I'm leaning heavily on going with the Per Cell edit option since the action buttons are the ...


0

I think the best answer will come from how the data structure changes when you increase the hierarchy/depth. There is a point a which is doesn't make sense to be able to drill down into multiple levels because in those contexts you are dealing with a different set of information or user action/behaviour. It is hard to say where you would draw the line ...


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


0

It actually doesn't matter where you put your search results faucet filters because, in the end, you still need to test your design with users. Generally speaking, if your data is presented in a table, it's a common design pattern to put filters in the first row of each column. This has the advantage of showing users clearly which column is being filtered. ...


0

You're describing a simple survey. A lot of survey engines on the web do a great job with survey UX. Just visit Surveymonkey or Survs or any other leading survey engine and see how they do it. Google forms is also a must.


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


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


0

You can also consider using something like The Columns Project It enables mobile-friendly formatting/styling of HTML tables instantly, but it require you to upload a CSV file though.


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


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


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


0

Have you considered using Google spreadsheet's "highlight" matching fields approach? I'm making an assumption that the data you filter on will be directly shown on your table. This approach doesn't work if the data isn't on the table. As shown in the example, the highlight color stands out very well amidst your records. Because you're only highlighting ...


0

When constrained to a layout of table data there are a couple of ways to let the user know there are no more rows of data. 1. Tell the user that they have reached the end Adding text in the last row that simply says end of file or no more data is an easy change that ensures context to the actual last row of data above it. It's important to make sure the ...


0

Only give them what they asked for As you suggested in your question, it's best to filter out irrelevant rows and focus on what the user is searching for. Trying to show a queried row alongside unwanted data clutters the interface and adds mental overhead. Provide obvious filtering indicators You want to be very clear about the filtering and provide easy ...


3

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


0

Write "1 item found". Also, let the user know what they searched. E.g., "1 item found for search 'apple'", so they can retrieve the state of the system when they get back if they interrupt the task. Edit: you could have an extra column at the begining of the table. Inside of each cell, there would be a small coloured dot meaning that that row matched the ...


2

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


2

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



Top 50 recent answers are included