Better way to present sparse, regularly recurring events?

Question

I'm trying to make up a listing of events that needs to fit in a small space, and I'm struggling with the right way to present the data.

There are four events that recur in this system. On any given day, there could be anywhere from none of the events to all four of the events.

The end user is going to use this in two ways:

1. Which events are happening today?
2. When is a particular event happening next?

The best method I've thought of so far is to use a table (for events A, B, C, and D), either horizontal or vertical:

 1 A . . .         1  2  3  4  5  6  7  8  9 10 11 12
 2 . B C .         A  .  A  .  A  .  A  .  A  .  A  .
 3 A . . D         .  B  .  .  B  .  .  B  .  .  B  .
 4 . . . .         .  C  .  .  .  .  C  .  .  .  .  C
 5 A B . .         .  .  D  .  .  .  .  .  D  .  .  .
 6 . . . .
 7 A . C .
 8 . B . .
 9 A . . D
10 . . . .
11 A B . .
12 . . C .

but this looks overly complicated. Is there a better way to present this information?

Answer 1

Showing just the day and the next-soonest event.

This is just showing 8 datapoints, which could be shown with 4 relatively small elements:

---

Showing each day/event

This is going to be tricky to compress. It's 12, almost 50 datapoints. More if you insist on listing dates. What you have is already pretty small and close to the smallest legible solution. It mainly looks cluttered due to the symbols used. Here's what it looks like if we simplify things, for example:

And you could expand on that by showing current (orange) day and history:

You could reduce this, but it would perhaps become too simple. But if it is supposed to be really tiny, you could go with a sort of timeline using nodes. Simply color different quadrants of a shape.

But you'll notice an obvious flaw; this looks a lot like a clock icon. Perhaps a different shape?

Still not great though.

I suppose if they're all coders you could write it all down as hexadecimal code in a 8 px font... ;)

Answer 2

I recently designed a calendar which may give you some ideas so I thought I'd share a demo link...

Calendar of Events

---

1. It conveys quite a bit of information and still works on mobile

2. It expands vertically when a day is clicked showing additional event details

3. It could potentially support more than 4 event types

Answer 3

I've taken your two important statements about what the user is most likely to do and put them in a simple dashboard:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If these are the 2 most important things, I think it's important to seperate them from the cluster of other data that is available (progressive disclosure). The user could click on one of the tasks to see an expanded calendar view which gives them: the exact dates of the events and an overview of what's coming up. You could designate the different tasks by an icon or other representation as well.

I have ordered the tasks by the upcoming date rather than the task list, but it's up to you what's most likely there.

Hopefully this kicks off some ideas. :)

Answer 4

I'll summarize what I think has been a very productive set of discussions and answers, and it will hopefully help you come up with an appropriate solution for your problem:

• Context: consider exactly how someone is going to use the information and perhaps also on what kind of device, because this will give you important design constraints that you'll be working with. For examples, if you decide to use a table and not a dashboard, will it work on mobile devices (i.e. smart phones rather than tablets) because of the narrow horizontal space.
• Information architecture/density: consider how much information and how quickly someone needs to be able to process, and whether there needs to be a secondary action to follow up on it. If they can just see the current day and work forward or backwards (probably not required since you only mentioned that they need to know what's next), why show everything at once? Alternatively, if they need a big picture then will drill down further, then don't bog them down with too much details. Maybe you need both views (decide the default presentation later) or perhaps you need a hybrid combination.
• Visual presentation: this is perhaps where we get into the nitty gritty part of the design. You have to think about data, symbols/icons, spatial positioning, layout, etc. Are there also connections between the different types of events that you can exploit in your design (e.g. similar icons/shapes for related events)?

Based on everything that you have provided, I think the dashboard style design where you list the events for the current day, along with when the next event of the same type will occur gives you these pieces of information to work with:

1. Current date
2. Event A (yes/no) + date of next occurrence
3. Event B (yes/no) + date of next occurrence
4. Event C (yes/no) + date of next occurrence
5. Event D (yes/no) + date of next occurrence

That's nine bits of information compared to what you proposed earlier, yet it satisfies most of your requirements and allows you to be flexible about your design.