For a project I need to list a lot of data, and I mean a lot :) Technically the database spawns a 3 column table containing text data (unicoded characters, words). Due to the endless possibilities and numerous database-entries I added filter and sort options on top of the table (yes, the output is currently rendered as a htlm table).

enter image description here


  • Genusname = a single word with link
  • Classification = a single letter (A to H) with a link
  • Parent taxa = also a single word, also with a link

A pager will appear based on the user's choice to display a certain number of results. This can be set in the top section under the filter/sort options. At the moment the current maximum limit is set to 250 rows, both to ensure a decent loadtime and to avoid 'endless scrolling'.

What is the best way to

  • optimize the UX?
  • make the displayed data grafically more appealing?

I've been looking for good examples but didn't seem to find any. Although this seemed to be something very basic, I've been doing a lot of wireframes/mockups and research to find the best solution but I'm afraid I'm kinda stuck here at the moment.

Any advice/help/words of wisdom would be greatly appreciated!

closed as too broad by DA01, tohster, msp, Matt Obee, Charles Wesley Apr 22 '15 at 14:59

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Hello Ziepe, I'm afraid you have not provided enough information for any answers. "Visually appealing" is not much on topic here anyway, and the Internet is full of examples for nice tables. As for "optimize the UX", you have described nothing which needs optimizing. What is wrong with the table? What is it used for, and in which cases do your users have a problem with it? What is their problem? – Rumi P. Jan 21 '15 at 11:59
  • Hey, as you describe your problem I don't know how to help either. Nonetheless I found a very instructive gif about table display and making it look better. Please tell me if this helps: reddit.com/r/gifs/comments/220a98/… – Leths Jan 21 '15 at 15:37
  • How to make data look nice is a really broad topic and tends to boil down to 'use standard design and typography principles' like balance, prioritization, white space, contrast, color, etc, etc. For laying out data, everyone should read Tufte's volumes on the topic: edwardtufte.com/tufte/books_be – DA01 Apr 22 '15 at 2:49

Just keep it simple, brutha. If you want the text to have more appeal, try contrasting it. You can use contrasting colors, contrasting sizes, and so on. When something "looks good" it normally has high contrast. Big and small, dark and light. Bold + narrow headings, thin/regular text ;)

  • Contrast is good. Too much contrast can be overwhelming, though. – DA01 Apr 22 '15 at 2:47

Your data set is huge to be displayed(250 rows). And the type of data, that is, one wrod or one letter with and without link, suggests that your users will be more interested to sort the data at a click. Or filter.

There can be couple of ways I feel, the UX can be improved. Use of dashboard view can be great, where you present the charts and detailed table as per demand.

  1. Graphical Display - Use of pie chart to show distribution of those single letters entity, single word. This can be one case, I am assuming, you may not require at all actually. :)
  2. Table with Filters and colors. Try using colors that help your users to read the data at a glance. Using filters and grouping with same color can be interesting.

I have tried to depict the idea below.

enter image description here

And a dashboard example is as follows. You can try using this. I don't know how relevant it can be as you haven't mentioned much information in your question. But these certainly give you pointers. enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.