Hot answers tagged tables
53
Jessica Enders wrote an article on A List Apart about three studies she did to determine whether "zebra stripes" are helpful.
The first study, described in an earlier article, tested users' ability to read and interpret data in a simple table. The second study was similar to the first, with an improved methodology. The third study attempted to determine ...
17
I think you're trying to solve a readability problem the wrong way.
Line length (measure) is your real problem. The number generally advised for a readable measure is about 60-70 characters. Cut the measure to about 60% of it's current length and you'll find you have far less trouble. The other way to solve it is a bigger font size ... that would be really ...
14
In a nutshell[1]: Information[2] Density[3].
While not exactly research, I can quote from Google themselves as to why they've made the changes: (From the Google GMail Blog).
We also thought quite a bit about the density of the information on
the screen in the new design. Gmail’s old design packs a huge amount
of information into a small space. While ...
12
You don't need the arrow, you can just play with colors, like follows (this is just a proof of concept, you can change the gray colors with whatever colors you like that matches your theme):
Another simpler way:
11
When designing for mobiles, the first question you should ask yourself is, "Do users need to be able to perform the same actions while on-the-go as they perform at their workstations?" The second question you should ask is, "Can all of these actions be performed comfortably on all mobile devices?"
When you're dealing with 100-row tables, that translates to ...
10
Option B is better for the user of the device at hand. There's no way that device is going to suddenly get a camera on it, so there really isn't a reason to show the user a function that they will never be able to use.
The reason that people recommend graying out options not currently available is so that a user will know that it is there and they could use ...
10
The responsive idea sounds good until you consider what you're going to show to which people. Responsive design is about showing the right information to the right device, not abusing CSS media queries because you've run out of space. Instead, take a step back and look at the real problem: you just don't have enough space.
Some options come to mind:
Just ...
9
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 ...
9
Your linked article is talking about the relationshiop between labels and input fields. The use case is in there is read, think, type. Input, process, output. And during output (typing) a user may want to revisit reading and label-on-top-of-input facilitates that.
The use case of the information you are presenting is read, read. Or maybe simply read. ...
9
Users will notice.
Interfaces that display the same information in different ways increases the cognitive load placed upon the user which makes the experience inefficient.
download bmml source – Wireframes created with Balsamiq Mockups
Allowing the user's eye to track vertically along a continuous line is a visual guide you provide which tells ...
8
MIL-STD 1472F Section 5.14.3.5 has a pretty good section on displaying tables in a user interface, although it could stand some updating for modern GUIs. Here are some of the standards, along with my interpretation marked with a bullet for GUIs:
5.14.3.5.4 Titles. For a table that takes up multiple pages, column headers shall be on every page for table.
...
8
I think indeed it may be the Approve button that throws off your users. The push-button style suggests an action already taken once you click the button. What is the problem of just using a normal checkbox instead? A check box does not carry the idea that an action will immediately happen if you check it. If you want to prevent users from unchecking them, ...
8
This is always tricky, but I think you could implement a list view as in StackExchange User Reputation League. Even if an item isn't added by a user per see, it could be used in your case as well. Add the newly added item to the top of the list keeping the sorting/filtering options intact. But make clear that this is not a part of the filter/sort by changing ...
7
I would go down a similar sort of route as 37Signals do with their to-do lists in BaseCampHQ: have the essential information displayed closer to the item (they're too far away in the OP's screenshot above), so you get an uncluttered appearance, and maybe I'd even go a step further and go without the box around the ticks. And then on hover, show the ...
7
The usual way that I've seen this done is with an ellipsis. Something like:
Edit: For markup I would use an unordered list and insert the numbers into the name and use the ellipsis as an item.
Otherwise you end up with some difficult situations when the user is #4, as you would have an ellipsis where it doesn't make sense, or when the user is #2.
7
Here's a couple of options - but I think li's value is deprecated in HTML4 - and I don't know if it can be done in CSS.
<ol start="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li value=59>Item 4</li>
<li>Item 5</li>
</ol>
<DL>
<DT>1
<DD>Item 1
...
7
Maybe these designs can be useful to you
15 Tips for Designing Terrific Tables
30+ Nicest Table CSS Designs You Can Apply Into Your Project
Tables in Web Design: Beautiful Examples and Best Practices
HTML Table Building: 30+ Beautiful Examples And Useful Javascripts
7
Based on your image above, I would suggest something similar to the mockup below. For a pure mobile (smartphone) I personally believe that you need to reduce the number of images that a user might have to download only to help save on their initial bandwidth. For Tablet user I restored some of the images because of the screen size, it really helps to give ...
7
I would use multiple visual cues to make it very clear what the current state of the data is.
Giving meaningful and immediate feedback is key to creating a positive user experience where there is no ambiguity about what has or has not been saved.
I would use a combination of an enabled/disabled save button, styled check boxes, icons, and color to represent ...
7
For the most part it is a design issue. But in general I would use a table when there is a lot of information present, and simple text when there is little information presented.
When you present in text, however, you should pay attention to the formatting so that it is quick and easy to tell the label apart from the data. In general I would also keep the ...
7
You have two ways out of this situation:
Option 1: Group the data, so that instead of presenting data for row 1 in 10 columns, you actually use 1 column with the data printed out in paragraphs, e.g.:
John Doe
Name: John
Surname: Doe
Email: johndoe@johndoe.com
Phone no.: 1234567890
This data usually would be split in 5 columns on bigger screens.
...
6
The last thing you want when you have a lot of tables/lists of records is to make the data less readable by having more noise and clutter from permanent buttons, links or drop down arrows, so I favour the hover approach in this instance.
Change the cursor on hover, to aid visual feedback. Align edited text with cell content where relevant so that it doesn't ...
6
Draw attention to the row, especially on hover. You're doing that with the pointer, but there's no other clear indication (from what I can see). You can do thinks like highlight the background subtly when hovered over as well, to draw attention to the row not the cursor, to make it clear the whole row is clickable, not just the cell/number/word the mouse ...
6
I would suggest to do the bulk edit in a dialog that is similar to a "detail view" dialog. I.e. a dialog that shows all fields for a given item/record.
When you use this dialog to do bulk edit, you mark each field that contains various data with [various value] and the fields that contains equal values are set to the actual value.
The user may edit all ...
6
Using large tables in devices with a compromised screen size is never a good idea if you can avoid it. The user will easily get confused and lost in a matrix that stretches far outside the viewport.
This will cause a lot of problems, like locating all alternatives and also looking back at what you have answered on previous questions.
Instead I would ...
6
What you are describing is standard wildcard functionality, so you could append a * to the end of the start string (which is nice and standard); or perhaps + which could be fairly intuitive; or even % which is used by various flavours of SQL. As well as the Regular Expression ^ as described by Ben Brocka (which would go at the start of the string).
I don't ...
6
How about "tagging" cells or rows with color-coded labels? Keeping the color helps people understand your data at a glance, and the text labels are descriptive enough for the colorblind.
Gmail uses this technique to categorize dense rows of data rather well:
6
I'd wouldn't use green and red into that fashion, because red tends to portray the feeling that whatever it's logged it has gone wrong. I'd use something like this instead:
download bmml source – Wireframes created with Balsamiq Mockups
for inputs
download bmml source
for outputs
The arrow pointing in an out of the icon indicates I/O ...
6
Note that in some cases it would be even better to leave out the labels entirely...
In your example it can look something like this:
download bmml source – Wireframes created with Balsamiq Mockups
Using less wording in your designs will always make the more clear and easy to scan.
Images (in the right amount) that will represent repetitive ...
Only top voted, non community-wiki answers of a minimum length are eligible
