18

I am working on a little widget that shows the events a person has attended. An event typically has two stages, a pre-registration and an attendance. If a person pre-registers for an event but does not attend, they take a spot for someone that would've loved to go, so we want to discourage.

We want to visually show when a person has pre-registered but not attended.

The idea I have in mind is an icon with two puzzle pieces. The top piece becomes highlighted when a person has pre-registered. The bottom piece becomes highlighted after the person has attended. A complete puzzle means you have completed all your task.

I am not convinced this will be intuitive enough and I'm wondering if you have any suggestions to accomplish this task.

Improve this question
1
  • So there are basically two related states? "Registered, event did not happen yet" and " Registered, did not attend event"? Because it sounds like you want to portray the latter as a negative, while you obviously can't blame someone for the former.
    – MSalters
    Commented Jun 18, 2015 at 14:50

4 Answers 4

Reset to default
35

Your puzzle piece idea sounds like an excellent way to take advantage of users natural tendency to seek closure. In order to make it more intuitive try listing the completed and uncompleted tasks.

gamification

Improve this answer
4
  • Thanks to all. I can only mark one answer as accepted, so I'm accepting yours because it got the most votes. This is what I have so far: i.imgur.com/CpH8UzV.png.
    – RommelTJ
    Commented Jun 18, 2015 at 0:08
  • May I suggest using a different color in the half-done example to emphasize even more that it isn't "done"? Not necessarily a pushy color like red or yellow, just not green.
    – Roman Reiner
    Commented Jun 18, 2015 at 5:21
  • 2
    Above green heart example looks great to me. But in your blue mockup it's not clear that the icon on the right (with the puzzle pieces) is dynamic or represents progress. It looks the same as the icon on the left (with the presentation), which is just a static icon.
    – Coleman
    Commented Jun 18, 2015 at 19:32
  • 1
    Empathy goes a long way when connecting with a user. I like how the heart is "broken" when you pre-register for an event but don't attend and then after you attend it implies we "love" that you were able to attend.
    – DaveAlger
    Commented Jun 18, 2015 at 19:40
11

Elements with arrows to suggest sequence/transition is one option. Transitional nature seems more obvious when there are three or more stages (but don't force in a 3rd stage for this reason only).

This is reminiscent of breadcrumb navigation, so you want clues to indicate it is a progress indicator and not a navigation feature (the "Status:" label). A progress indicator is not clickable, while breadcrumb navigation is clickable. There are many ways to style staged progress indicators, the boxes-with-arrows-on-one-side is just one option. You want to be clear as possible that it's progress indicator and not a navigation feature (e.g. visually distinct from clickable buttons, different background color, etc.).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
8

It's hard to design this without a better idea of how many events you're showing, and what kind of information and interactions you are displaying with each event.

Two approaches to showing lists of items with completion are:

1. Linear progress indicators

This example uses bubbles, but you could use bars, flags, stars, etc.

enter image description here

2. Table with explicit status and progress background

enter image description here

Again, it's hard to design a better solution when the question is being asked so vaguely.

Improve this answer
0
3

I love the idea of a visual encouragement to follow-through on pre-registrations.

With this idea, how would you differentiate between an even I pre-registered for and have not yet attended, vs. an event I pre-registered for and DID NOT attend. It seem the first case requires notifications/reminders, whereas the second case requires some sort of visual penalty.

The puzzle metaphor isn't a bad one, you could show a complete puzzle for people who attended and a broken (not just a missing piece) for people who didn't show.

Improve this answer
2
  • I think I wasn't planning to differentiate between an event pre-registered but not yet attended vs a no-show event but now I see how this may be a good idea. I won't give up with the puzzle metaphor, but have you seen this done in a different way?
    – RommelTJ
    Commented Jun 17, 2015 at 18:24
  • I like Obelia's idea better.
    – Phillip Quintero
    Commented Jun 17, 2015 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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