3

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?

  • Is there a particular reason this is vertical instead of horizontal? Also, are all the events icons/checkboxes that small, or will actual information (time, location, etc) be displayed? – PixelSnader Apr 6 '16 at 19:31
  • Either vertical or horizontal would work. A letter/icon for each event is sufficient -- there are only four, and everyone involved knows exactly what they mean. – Joe Apr 6 '16 at 19:41
  • Do all the users need to attend all four types of events? – Eric Stoltz Apr 6 '16 at 20:04
  • @EricStoltz, all users care about all four event types. – Joe Apr 6 '16 at 20:05
  • How much information for each event needs to be shown? – Eric Stoltz Apr 6 '16 at 21:00
2

Showing just the day and the next-soonest event.

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


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:

enter image description here

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

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. enter image description here

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

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... ;)

| improve this answer | |
  • Would you have a row above with the date in it? Otherwise this wouldn't meet the second criteria. – Midas Apr 7 '16 at 11:59
  • @Midas You could. I figured that, in the interest of saving space, people could simply look at the first column and see if there was something going on today, and count/estimate when the next event would be. Personally I'd go for something interactive with hovers/clicks and expansion to show more detailed information. First solution with latest solution underneath; top shows today by default, different day when hovering over it. Something like that. – PixelSnader Apr 7 '16 at 14:16
3

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

calendar expand

| improve this answer | |
  • Nice! How does this test in terms of accessibility when you rely solely on colour to differentiate? Particularly thinking about red/green colourblind folks, but also more generally contrast between the colours. – Midas Apr 7 '16 at 12:02
  • This was a personal project for my kids and I to track who is doing what when (yes I color coded my kids a long time ago). For a larger audience you may want to combine color with shape as a backup for colorblind users. – DaveAlger Apr 7 '16 at 19:58
2

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

mockup

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. :)

| improve this answer | |
  • +1 I like the simple dashboard design direction, although the calendar one is problematic if you have all four events occurring on the same date. – Michael Lai Apr 6 '16 at 23:03
  • I agree with Lai, but it may have a simple solution. There's no indication from the OP that users need to see the relation of the occurrences of different events (e.g., which days have both A and B). Thus, clicking on Event/Task X could show the calendar for X only. Or maybe it's a list of dates for Event/Task X, and not a calendar at all. Do users need to see how many days between occurrences? – Michael Zuschlag Apr 7 '16 at 12:11
1

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.

| improve this answer | |
  • Dividing the 9 chunks of info between text and visual presentation (graphic coding) should achieve maximum compaction: show only the date and/or days until the next occurrence of each event, with any events for TODAY! emphasized somehow (e.g., bold font). It's only four things to look at -easy enough to see which if any occur today. – Michael Zuschlag Apr 7 '16 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.