What’s the best way to display events on a webpage?

Displaying events as a list makes it easier for your website’s visitors to quickly know when and where your events take place. Monthly views are more difficult to scan and to use. Let’s discuss this UX best practice about events.

Making most important information available at a glance

When reading an event page, your visitors quickly want to know those crucial information:

  • Date
  • Hours
  • Location and/or venue
  • Topic
  • Host

It’s based on this main information that your visitors will know what event they want to attend. Those items should be easy to identify. Displaying events as a list allows you to show all of them, whereas a month or calendar view only indicate the date and the topic.

The difficulty with a calendar view

I will illustrate a difficulty with a situation I personnaly lived recently. A colleague of mine told me about a workshop in her city on to how to live a zero waste lifestyle. I was interested but could attend it. I checked the website of the workshops host to know:

  • When is the next workshop?
  • Do they offer workshop in my city?

The navigation on the host website is easy: I quickly see the Events page and open it. Here is what it looks like.

Screenshot of an actual events page displayed as a calendar view
A screenshot of a calendar view on an events page

As you can see on this screenshot, I opened the page on the 23rd of March, 2018 (highlighted in green). Here are the difficulties I encountered:

  • I opened the events page at the end of the month: I first see past events before upcoming events
  • It is not easy to identify the location of the events
  • The beginning hours of events are not displayed
  • When I am at the end of the page, I am under the impression that there are no more events after March

A quick fix of this calendar view

I wrote that I was under the impression that there was no more events after March – I later noticed that I could in fact access the next months as well (I took me a few seconds, though). There are actually very discrete arrows at the top right of the calendar that allow me to see the next month.

Navigation on a calendar view
There are arrows so we can access the next month – they are a bit to discrete to be quickly found

So, in case developing a list view of events is not an option for this organization that does an amazing job to promote healthier and more sustainable lifestyle, here are my advice for a quick fix!

  • Those arrows could also be displayed at the bottom right of the calendar – where visitors likely are after scanning the calendar
  • The arrows would be easier to see if they were thicker or darker
  • Using words instead of arrows would also be a good solution (e.g. “Next month>”)

Displaying events as a list is more effective

When we use a list instead of a calendar to show events, we make a better use of the space.

We can also make the most important information stand out (date, hours, location).

Here is my proposal:

  • Write the title of the event on the first line, with no other information
  • On the second line, write the date, the hours, the venue, and the city
    • The order should always be the same to make it easier to scan through differnt events
  • Adding a picture of the event
    • It can be a unique picture for each event
    • It can be pictures that match the type events (it may be easier, as it asks for less pictures to find)
Mockup by Louiselle Morand Salvo for an events page. Events are displayed as a list for a better lisibility.
Mockup I created for an events page displayed as a list

Long list are easier to use with a filter

The organization I was checking is a great example: they offer workshops and conferences all over Switzerland, and in different languages. Offering a filter gives the opportunity to both

  • Show the diversity of the host’s offers
  • Make it easier for the visitors to see only relevant information

When the visitor opens the events page, all filter should be selected, so that all events are displayed.

Do you want more advice on how to make sure your visitors quickly get information about your service? Hire me!

The best way to display events on a webpage - Blogpost

Leave a Comment

Your email address will not be published. Required fields are marked *