a means of organizing content into rows and columns, often but not always in a grid based layout where columns and rows have distinct relationships.
62
votes
7answers
5k views
To use or not to use “Zebra Stripes”, or Alternating Row Colors for Tables
Is there any research out there showing whether or not alternating the row colors for a table increases/impedes the time it takes to parse information? An example can be found at the following ...
13
votes
4answers
634 views
Making space for the “drop cue” in a drag-n-drop design
I'm developing a drag-and-drop reordering interface for books on shelves.
(You can try it live if you're on the latest WebKit.)
When you drag a book over a shelf, it accommodates space for it by ...
12
votes
9answers
4k views
How should large table columns be handled on a responsive design?
Related to This Question, I'm interested in what I should do with a responsive design theme where the users have control over the columns which are displayed in a tabular, data rich page. Users are ...
12
votes
4answers
559 views
How would you solve the column of check boxes problem?
So my question is a bit open ended. Basically, I am looking for possible solutions to the problem of lots of tabular data with check boxes. For example, if we look at Facebook's Account Notifications ...
11
votes
7answers
502 views
Research behind row height within a table?
There appears to be a trend in web-based table design to use a lot more space for each row in the table. In particular the new gmail default of "comfortable."
I'm also seeing it in the height of the ...
11
votes
7answers
477 views
How to make it obvious the contents of one table are based on the selected row of another?
Given a dialog with two grid-style tables, what's the best approach to visually showing that the selected row of the left table is what populates the right table? The best I can think of is an arrow ...
10
votes
6answers
369 views
Method of showing that a row has been edited and will be changed upon “Save”
What paradigms exist for denoting that a row of data has been modified and that a Save action on the view will change them in the data store? Which paradigms are recommended?
A few that we've ...
10
votes
4answers
171 views
What should happen when I add a Row to a paginated, sorted list
A user wants to add an item on a sorted and paginated List. If we keep the list sorted, the item might be on another page than we're viewing and if we just add it to the top of the list it will break ...
9
votes
10answers
317 views
Is it better to represent simple labeled information as table or just text with subheadings?
I'm redesigning a website that has some simple information presented as a table like this:
download bmml source – Wireframes created with Balsamiq Mockups
I read yet the again the Label ...
9
votes
4answers
3k views
Table usability/Readable font for a data table
What's the best font for a data table? Monospace is good but takes up more room, so you can't have as much whitespace between the items. Similarly, what are some good usability principles for data ...
8
votes
4answers
480 views
How to correctly encode a leaderboard with a gap in HTML
I want to display a leaderboard like so:
1 - John 232342
2 - Mary 45234
3 - Luke 234
59 - You 45
It's an ordered list but I can't make an ordered list that jumps from 3 to an arbitrary ...
8
votes
4answers
1k views
How should times be aligned in a column
I have a data grid of three columns of type [Time, Decimal, Decimal]. All records in the decimal columns have the same number of decimal places. I have right aligned these as they're numeric.
But I ...
8
votes
4answers
262 views
Is moving columns in a tree table automatically bad for UX?
I have a tree table that allows the user to group columns arbitrarily. Is it bad UX for me to move the grouped by columns to the front of the table right next to the tree controls? Would it be more ...
7
votes
5answers
278 views
Zebra striping for body text?
The general consensus is that zebra striping a table makes it a little easier for people to keep track of which row they're on...but is this reduction of cognitive taxes only for table rows? I at ...
7
votes
2answers
333 views
Too many checkboxes in a table?
A user should be able to change the settings for 5 different options for each day of the week at the same time.
I was thinking of something like this, but it seems a bit messy... Too many things ...
7
votes
1answer
253 views
When to save data?
When should i save data in an business application. We have a lot of applications and currently they have not all the same behavior. I am not very experienced with UX and would like to know when I ...
7
votes
3answers
786 views
tables with lots of columns
I have a table that lists various attributes of an individuals personal development plan; objective, time to complete objective, comments etc. The table is editable so the user can directly add ...
7
votes
2answers
717 views
What is the best way to display edit/delete actions on a row?
I am building a web application that deals with a lot of tables/lists of records. I am currently building an "AJAX edit-in-place" feature, so that you can edit a record while being on the same page. ...
7
votes
3answers
437 views
Showing extra information for a table row when that row's selected
In the app I'm developing, we have a table/list that makes use of a kind of master/details approach; when you select a row in the main table, a second table below it is populated with 'child' items.
...
7
votes
2answers
566 views
What do UX guidelines say about dropdown boxes in table cells?
download bmml source – Wireframes created with Balsamiq Mockups
I have been trying to look at Apple Interface Guidelines and Windows UX guidelines about what standard behavior for drop ...
6
votes
7answers
468 views
Best empty string
What is best way to represent empty value inside table of rows with some optional columns?
'', empty, N/A, -, -------- (number of allowed chars), any other advice?
6
votes
3answers
2k views
Examples of nice looking html tables [closed]
All tables on my app look like sh*t, it's making me lose hair, I've been trying to make them look better but I end up making them look worse, do you have any examples of nice looking tables? ...
6
votes
3answers
453 views
Responsive Design - How to deal with wide HTML Tables
I am doing a proof of concept with responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to shrink the tables width so there is no horizontal ...
6
votes
8answers
237 views
Alternative to color code in table cell
I am currently redesigning an LOB application that makes use of color coding in tables to 'categorize' each row of data.
For instance, in the picture above, the 'St' column (which stands for ...
6
votes
3answers
2k views
Best way to display more table columns than I have room for? [duplicate]
The web development office I work for is working on a fixed-width web site. On one page, we have a table inside of the fixed 960px space available. So far, this table has worked out great for us, but ...
6
votes
4answers
939 views
How to present heavy data tables on smartphones?
Problem: I've got a table with 10 columns and ~100 rows. What is the best way to present these on small screens? My idea: effective search + data displayed row-by-row. Is there any better solution?
6
votes
3answers
705 views
exclusive select in a table: radio button, rowclick, text only, text and icon, or icon?
If you have a table where each row can be selected,
and you are only allowed to select one row at a time,
and selecting a row causes a drill-down table to appear
to the side, how would you render ...
6
votes
5answers
176 views
Best way to represent null and empty data in an excel file
We have an application that allows users to design their own forms and export the data to excel. One problem is the representation of null or empty data. There are two scenarios that we need to ...
6
votes
6answers
606 views
Best way to show many user actions for table rows?
I currently have a table which shows a row for each created form a user has. For some users this will only be 1 or 2 items. For others, they'll have 40-50.
For every form there are many actions ...
6
votes
4answers
206 views
How can I avoid placing a legend on top of the table to tell the user what each icon means?
You can see an example here:
As you can see, I am stuck with having to tell the user what each icon means. I also mention what a functionality does, such as "Click on a feature to filter out ...
6
votes
2answers
193 views
Should table rows be numbered?
I've created a a form that generate a list of results in a table.
I'd to know if it's interesting to number each row of table, the default number of row is 20. there is a pagination too. 20 results ...
6
votes
3answers
816 views
Filtering through a large table of data, thoughts?
Example: I have a large amount of data, such as a library of blog posts, or a massive amount of contacts, I am thinking that a data table visually would be the best way to display all this data, it is ...
6
votes
3answers
190 views
Table Checkbox side best practices
When is it a best practice to allow for checkboxes to appear on the left/right and side of a table?
A wireframe came across my desk looking similar to the wireframe below. The justification the team ...
6
votes
3answers
528 views
Best UI approach to align the column titles of reports
I would like to know what are the best approach to align header columns according with the data type.
I haven't found any Human Design Interface article explaining this.
Do the header column must ...
6
votes
2answers
115 views
Numeric data input in a web based scientific software
(Note: I'm more a backend developer, so please forgive my lack of UX terminologies. Don't hesitate to edit the text or the tags)
We are working on an online scientific software with specific ...
6
votes
2answers
302 views
When is a table the proper way to present data?
UPDATE: added mockups
We are in the process of designing a web application interface for administering an online store. In such an interface there are pages for managing products, orders, customers, ...
6
votes
4answers
129 views
Merge multiple table entries
I am building a widget to merge Records. Lets say, this table is information on Cars. There are variable/data points like VIN, Milage, etc..
Now, there may be more than one entry of the same car in ...
6
votes
1answer
652 views
Reporting web app - how to design large data tables?
I'm working on a legacy webapp that's mainly focused on reporting large amounts of data - ie tables with 20+ columns reporting financial data. The main problem is table layout inconsistency depending ...
5
votes
4answers
198 views
Adding a state to a control that indicates a row hasn't been saved yet
I'm working on a web application that users use to approve a bunch of items from a list. Imagine, say, an expense report that someone has to approve every item that's listed.
Currently, the system ...
5
votes
3answers
131 views
Multiple similar tables with varying column widths
When multiple forms are displayed on a page that display the same type of data, grouped into categories, is it OK for the columns in each table to be varied or should fixed widths be used to enforce ...
5
votes
2answers
109 views
Filters on top or on side of the table
I have 2 options to show filters for a table. One option places filters on the top and the other on the side of the table. For both options we'll give users the ability to hide the filters (by ...
5
votes
2answers
504 views
Best way to do 'bulk edits' on a table
I am building a web application for managing a list of products (using jqgrid).
I need my users to be able to perform several 'bulk actions' on whichever products they select. I have copied Gmail ...
5
votes
2answers
469 views
UX for filtering a table of data
I have a table of data that can be filtered by name, location or status.
The data of each of these columns will be obvious to the administrators of the Portal (i.e that the first column is child's ...
5
votes
2answers
161 views
How to layout buttons/bars alongside a dynamically sized table?
I have a table of data with a dynamic number of rows. It could have none, one, or a hundreds. The width is fixed across the web page and it has a fixed number of columns: 9.
Along with this I ...
5
votes
3answers
222 views
Identifying multiple sort criteria
I have a table view with some data and I'm allowing users to sort on multiple columns. I wonder what are the options for indicating sorting precedence?
The obvious is to display a number right ...
5
votes
3answers
158 views
Should a table's head label eventual buttons?
Should a table's head (i.e html <thead>) include the label for eventual buttons or actions? Consider the following examples.
Example one, with label (notice "Modify" in the head)
Example two, ...
5
votes
3answers
263 views
Defining relationships between many users in one UI?
We have a UI on a web-page, where relationships between users can be defined by admins. Users are divided to two roles, in this case "Lorem" and "Lorem ipsum".
Right now a relationship between ...
5
votes
4answers
320 views
Better way to build a list
I've got an app in production where the user builds a list of beer prices to later on make into a PDF of shelf tags (it's for the beverage industry). The user picks a brand, then a package, types in a ...
5
votes
3answers
112 views
Form for property rent prices depending on season and length
Seeing the similar post about Form for inputting operating hours of a business, I am hoping you might help me with a similar issue.
We run a holiday property rental website. Properties can be rent on ...
5
votes
4answers
142 views
What might be the fastest way to delete (or modify) records from a tabular interface?
When managing huge number of records, its often a huge time confusing task when selecting a certain set of random records to do some task on them like, deleting, deactivation, activation etc.
...
