Need a better way to list events

Question

Our site, http://www.racedayworld.com has events that you can register for which are listed in a table with sortable rows ...

I'm basically not too enthused with the design, but can't think of anything better .. any ideas?

Answer 1

@David already touched this issue but allow me to elaborate:

Sorting can be a very useful feature for items that it makes sense to sort. This is the case for columns Date and Event, although:

• A "from/to" selection interface might be even more useful for the Date column, and
• The Event column would probably not be worse off with a filtering mechanism.

Filtering should be used when data are not immediately sortable. In this case I find this to be true for column Type in particular: Why is a "Walk/Run" at the bottom when what I really want is to list all running events? Filtering (i.e., typing run) would give me exactly what I was looking (plus informing me that one of the events is also a walking event).

You can discuss the usefulness of filtering on the Location column. I'd say that filtering and sorting are almost equally ill-suited (but I had already drawn the image). Perhaps you should go for a (multi)select?

^{Proposed handles on event listing. Parenthesis are alternatives. For the 'Location' column be sure to read the relevant answer text.}

Answer 2

Since your site is in it's infancy I would include a broader search pattern, people sometimes travel a huge distance to take part in racedays / marathons. Also creating a google calendar (ics file) people can subscribe to, & a link to a regular blog post on what you are thinking about.

A uservoice suggestions forum might help give you ideas to make your site more welcoming & helpful to prospective users.

Answer 3

I think it would be beneficial to have a couple of views.

Calendar View One view would be calendar centric. Basically, you would have what looks like a calendar for the month with event titles on the appropriate day. When the user clicks on a day in the calendar they see an expanded view of the events, or if there is only one event on that day they go straight to that event's page.

List View This view would be the result of clicking on the calendar day or as an alternative to the calendar. Events would be listed in a "card format", which allows some more freedom to display summary information. For example the first line would have the date and the event name, the second line would have summary information such as where the event is. As a potential bonus, you might consider an icon for event type and incorporate that on an edge or corner of the card.

The card format provides a dense amount of information in an easily digestible format, something that plain tables of information don't do very well.

Lastly, provide "affordances", as Donald Norman calls them, for anything you can click on. Basically, the area that can be clicked as to look like it can be clicked. Also, using Fitt's Law (bigger things are easier to click) you can make the whole card clickable. As long as you are only doing one thing with the card, it really makes sense. To give the card a sense that it can be clicked, change the style of the card when you hover over it. For example, make the background of the card look like a button. Alternatively you can make them all look like buttons but highlight the button you are hovering over to call attention to it.

Answer 4

I think your list is quite OK:

• I would try to make it clear what is clickable (link blue color, undreline) or >> or the best would be a View Event button

• for more inspiration check out patterntap: http://patterntap.com/tap/collection/32/1

Answer 5

There are some issues with scale- basically everything is big enough that it is truncated. I think you need to go back and reconsider your hierarchy. I would start by bringing things down a few points and emphasizing what is important. The other thing that is hurting you is the strict columns- it makes it hard to read and breaks up the information in a way that makes it tough for a user to get a quick overview of what the event is all about. Great calendar interfaces don't use the columns, rather they often stack information in a natural way so that you get a scannable card that represents the event.

Listing sites like this typically don't gain a whole lot from sorting- rather a good filter would provide as much value. Bring some visibility to the advanced search options by making categories and other filters clickable in the sidebar.

Look around at the design patterns on facebook and yelp both have thoughtful approaches to the challenges of listing events.