UE with Progressive Disclosure on a Calendar, or Control Move

Question

I've got a quandary that I need some advice/help with. The issue is as follows.

I'm currently working on an event calendar for a sports website where each 'event block' has an event title, and secondary match info underneath. We've also designed the Event Title to be a control for a popup that displays the full event information, and has editing controls. The match information is not clickable as there's no pertinent redirect that the Title didn't already cover.

For the monthly view and for mobile (calendar has weekly/monthly only), we need to truncate the information because of very limited space, and the clients would like the match info as the information that we prioritize.

The problem that I'm faced with is that either I have to choose between moving the controls for accessing the popup to the 'secondary info' creating a UI inconsistency, or we have to default to showing the event title, and progressively disclose the match info (this info is contained in the popup).

Which would you believe is the worse of the two evils here? Creating an irregular UI behavior (which I initially have a strong reaction against), or force users to have to click on the event title to access the secondary info (which I'll admit is a little inconvenient)?

---

Edit:

Images (left to right, underline is clickable to show full event details in a popup):

1. Weekly View, 3 events (3 matches per event)
2. Currently Monthtly View, 2 events (2 matches per event)
3. Alternate Monthly view, 4 events

Answer 1

Force an extra click

From their web experiences, users expect links to provide details to the specific information presented in the link label. Thus, users will expect tapping the secondary match info to take them to details about the match, not the event info. They probably won’t expect “drilling down” to take them to less specific super-ordinate information (i.e., a step up in the information hierarchy). So moving the control to secondary information is not just an irregularity, but also contradiction. Users who are looking for event information may not even think to try tapping the match information because they’re so sure it’ll just give match details, and thus they never get the event info they want. That’s a total usability failure for an informational web site/app.

I’d go with the “alternative” with the control on the event title, unless thorough testing shows you can get away with moving the control to the match info. If I were testing it, I’d show users the current design (with realistic example data) and first ask, “What do you get if you tap Match X? In lots of users say “details about Match X,” you’ve a problem. I’d then ask, “How would you get information about the event Match X is in?” If any users answer with something like, “I’d go back to the top,” then you have a real problem.

…Or maybe not

Or maybe, with some graphic design, there’s a way to make it work with the match information displayed instead. Iterative testing like above will tell you when you got it right.

The key is to make all the event information look like a single control. Then users will see all the match information as a collective “label” for the event information that comprises the matches. You’re part way there already by grouping the match information together, separating events with white space. Drawing a rounded-corner rectangle around the matches in an event might help users see it as all one big tappable button.

However, I think the real key is the icon. Instead of one icon per match, have one icon per event. You probably also want to make the icon rectangular (taller than wide) so it spans all the matches in the event, thus marking the hierarchical relation between event and match. In essence, make the icon be the label for the event. “Rollup” the title of the event from the web page into the icon.

Users might think they have to tap the icon itself for the event information, but that’s okay –at least they’re getting to the event information. If the event’s match information all “lights up” briefly when the user taps the icon, that should help users to see the icon and match information as a single tappable unit, and eventually they’ll start tapping the match info to get event info (which is easier since it’s a larger target).

You may want to use the same “tall icon” graphics for the web page to help users make the transition between web and mobile.