Ask HN: Regarding UI's, need design advice.

2 points by epynonymous ↗ HN
what's the best way to represent a list of data in a web UI? an example being a list of pictures, or a list of contacts?

the only thing i can think of is by using a table, but i'm wondering if there's a more simplistic approach without all the heavy duty sorting, paging, etc of a table?

6 comments

[ 505 ms ] story [ 104 ms ] thread
Just something to consider if you're dreading implementing sorting & paging: unless you're dealing with millions upon millions of rows, this can be done client-side:

http://www.frequency-decoder.com/2006/09/16/unobtrusive-tabl...

thanks for sending the link, i will take a look. i was actually using a jquery plugin called datatables:

http://www.datatables.net/

and from a UI perspective, i believe YUI has an infinite scrolling mechanism that does away with paging, but i feel it's still a little clumsy.

Lists make me think of http://workflowy.com/ See if that solves your purpose.
i saw this last week, but i think this is no different than having a wiki that automatically provides some sort of flow for the unstructured text that i type in. i need structure, things need to be easily indexed, almost everything. i need to be able to perform searches on data like pulling up all ip addresses that i've recorded in my lists without having to type in the actual address.

i think workflowy is good for random notes, it's an interesting use case, one that i might use myself. and if you're suggesting that i look at the ui, i'll take a closer look, i think patterns are an obvious way to figure things out, however, i still think ui's are a bit behind relative to all the other technology out there.

I would say it depends on what kind of data you are displaying, how much of it you need to actually have to display, and what you want the user to achieve with the data.

What is the desired call to action when displaying your lists? Is there any way to guess what data the user is looking for so that you can sort the list showing the most important data first.

For contacts: Do you need to display all available contact information all at once, or can you just display the contact name (or picture) and have more details appear when the user clicks or hovers over the contact? Can the contacts be sorted after how frequently the user communicates with a contact? Can the user choose multiple contacts and then do some action with them, and how would this work when the list is spread over multiple pages?

thanks for the responses everyone, so here's the real impetus behind my post, i've had this idea brewing in my head for about 7 years, the idea is really simple: a collaborative spreadsheet that's easier and sexier than a spreadsheet and structured like a database. i don't like table views in general, for some things it's ok, like tracking finances, but there's got to be something more interesting. for the record, i've developed back end solutions primarily and i just haven't spent enough time contemplating UIs, but i know what i like and what i don't like.

i was reading an article yesterday on HN about the top reasons why people don't start their own company, one of which was that people would find multiple excuses so as to put up a protective buffer so that you could never finish (paraphrased), well, i've decided that 7 years is too long and this buffer must go, i must get this idea out there, not for the sake of necessarily making money (although it will), but for the sake of me needing something like this tool.

so lists can be very generic in nature, more rigid than say a spreadsheet, but certainly more flexible than a database. i would have data types like phone numbers, ipv4/ipv6 addresses, youtube links, enumerations, etc. datatypes could be created by certain users. i would have readily available schemas that could also be user generated: grocery list, to do list, contact address book, bookmarks, medical records, dj event list, my favorite porn star image urls, defect list, top 10 list, my favorite youtube music videos, product reviews, car maintenance records, etc.

since users could submit schemas, this would mean that the variations of lists and their layout could be different. i could imagine a picture list (i.e. photo album) much similar to a thumbnailed matrix view like all the popular photo sharing sites. but perhaps for something like a bug list, i'd want to have something akin to a table view, just because it's sortable, you could limit the number of shown entries, it's easy to scan from a human eye perspective.

but i'm not an expert on ui's. here's a thought, what if i could thumbnail every list entry type, and lay things out like a photo album? would a software defect list be interesting if it's laid out this way?

i guess table could be default view and offer something like a thumbnail view if there are imageable aspects of a record like a url, the user could toggle this.

i really like iphone's interface of having an alphabetically searchable index on the right side where you could skip, perhaps having indexes based on several things like the alphabet, date time, most commented, recently updated, most viewed, etc.

damn, i can see a custom jquery widget needing to be created.

anyone looking for ui work, i don't think i can pay much, this would be self funded, so when i say i really can't pay much, it's really not going to be much.