Better-looking search.cpan.org results

hex on 2008-06-13T14:29:48

The current appearance of search results on search.cpan.org is a little old-fashioned-looking and doesn't use space effectively (notice the huge empty space on the right hand side). I had a play around and have come up with this mockup of how it could look. The little icons are direct download links.

What do you think? If people like it, I'll ask Graham if he'll consider implementing it.


Good Job!

Ovid on 2008-06-13T14:46:55

Two huge thumbs up. I like that a lot.

Too wide

stu42j on 2008-06-13T15:24:42

Too wide for my typical browser window. I think the current design is easier to scan.

Re:Too wide

hex on 2008-06-13T15:36:22

The search results contained a very, very long module name that stretched everything out (i.e., an edge case). What do you think now that I've commented it out?

Re:Too wide

hex on 2008-06-13T15:42:42

Actually, I've restored it with a linebreak in the middle. Trivial to do in most templating systems.

Re:Too wide

stu42j on 2008-06-13T15:45:32

I think it looks nice but I still prefer the traditional style. I like that I can scan straight down and see all the details without looking right/left.

Spreading it out does have its virtues, though. However, there are long-named modules in CPAN and the design need to account for that without screwing up the whole page.

Re:Too wide

hex on 2008-06-13T16:21:47

Yeah, I just wrote some Perl to deal with that. Of course, the search.cpan code isn't public, so I don't even know what templating language I could offer it in....

Re:Too wide

stu42j on 2008-06-13T16:36:12

Of course, the search.cpan code isn't public
Yeah, pitty that.

Re:Too wide

Aristotle on 2008-06-13T23:17:21

I like that I can scan straight down and see all the details without looking right/left.

Same here. Lining columns up horizontally would be nice, but spreading the whole thing over the entire page width is a no-no.

Re:Too wide

hex on 2008-06-14T00:36:59

How wide works for you?

Re:Too wide

Aristotle on 2008-06-14T01:30:49

Works in what sense? I’d prefer the data arranged primarily vertically, in a table something like this:

+-----------------------+----+-------+------------+
|                            |                    |
| Module::Name               | xxxoo (1 review)   |
+-----------------------+----+-------+------------+
| short description blurb                         |
+-----------------------+----+-------+------------+
| Module-Name-0.01 [DL] | 2008-01-01 | A. U. Thor |
+-----------------------+----+-------+------------+
|                                                 |
| Module::Name                                    |
+-----------------------+----+-------+------------+
| short description blurb                         |
+-----------------------+----+-------+------------+
| Module-Name-0.01 [DL] | 2008-01-01 | A. U. Thor |
+-----------------------+----+-------+------------+
|                            |                    |
| Module::Name               | xoooo (23 reviews) |
+-----------------------+----+-------+------------+
| short description blurb                         |
+-----------------------+----+-------+------------+
| Module-Name-0.01 [DL] | 2008-01-01 | A. U. Thor |
+-----------------------+----+-------+------------+

Of course the table frame wouldn’t show – I’m just drawing it to show which things would line up how. And the font sizes would obviously vary between interface elements.

The point is that the current layout is largely good, but there is no horizontal alignment between corresponding elements of each list item, making it harder to scan than necessary. The only problem is with potentially very distribution names, which I would ellipsise in front of the version number part. (It would be nicer to show just the version number, but the structure of a distribution name is not formally specified, much less is any such formalism enforced, so there is no getting around showing the name in full.)

In contrast, spreading things out horizontally over ~1300px (on my screen) with acres of blank space between them doesn’t ease scanning at all.

The proper way to use the blank area would be to columnise the list so it takes up a single vertical page and fills all the horizontal space available. Unfortunately, browser support for the relevant CSS properties is mixed as yet, and legacy browsers do not support them at all, so on today’s web that’s not a feasible proposition. (Sigh.)

How about both mainstream and developmental ?

mw487 on 2008-06-13T18:44:03

Since you have >= two lines of text at the left, how about using two lines at the right when there is a developmental version and listing it under the mainstream version?

Re:How about both mainstream and developmental ?

hex on 2008-06-13T19:06:50

Well, developmental versions aren't currently listed in search results - it would be up to Graham Barr to make a change like that. (I should note that I have no connection with search.cpan.org beyond being a user.)

Guts!

jonasbn on 2008-06-14T07:35:11

First let me congratulate you on your courage. I think it is brave that you have the guts to post a graphical presentation/mock-up and opening the discussion of it's contents. Where I come from everybody has an opinion on layout and this can generate immensely disproportionate discussions on details.

So even I have an opinion on your mock-up as well and some feedback, which I hope you will find constructive.

1. Headings for the columns would be nice, it is always a good idea to tag your data with some sort of identification of what they are and represent, ahref=http://search.cpan.org/rel=url2html-24371http://search.cpan.org/> is not just used by CPAN regulars and PAUSE users, this can be expected to be many Perl users first interface to CPAN and therefor, googling distribution names at least give results leading to ahref=http://search.cpan.org/rel=url2html-24371http://search.cpan.org/>

2. Sortable search results, based on headings, all should of course be reversible. We have this in the author page: http://search.cpan.org/user/jonasbn/

Where you can sort on distribution and release date, both ascending and descending.

Well the columns you list, could have the following sort behaviour:

        - name (alphabetical sort)

        - distribution (alphabetical sort)

        - release date (newest first)

        - author (alphabetical sort)

        - review (by score)

3. Your example shows a search done in the context of 'All', your example is from this perspective not the best for another example:

See: http://search.cpan.org/search?query=pod%3A%3Ahtml&mode=all

The included example shows a result set including different result types, such as scripts, modules/packages and distributions.

It would be nice if search results could be tagged with an icon indicating their type since a search with the context of 'All' could yield a result set containing varies items as the times I mentioned above.

In addition it would be nice if the following files could be searched: README, Changes and tests and could be included in search results, but that is not what you attempt to address with your mock-up and should probably be addressed elsewhere.

4. In addition to the data you have in your search results page, perhaps additional data could be included, such as: License

I think that was about my 2 cents, for now.

And to get back to the topic on guts, I guess we all would love so see and hack on the guts of search.cpan.org, but since this is apparently never going to happen and alternative open sourced implementation might the way to go.