3

So, For our app, we have a 'matchlist' screen where all the people you've matched with are listed. We are now introducing timer/countdowns. You will have 24 hours to initiate a conversation to your match or he/she will disappear. Once a conversation is initiated, the countdown will disappear, but the match will expire in 14 days (from start of match date).

The problem we're facing is creating a UI where this is very clear. We've played around with 2 different timer systems, icon vs no icon, color-coded styling, etc... but it seems very complex and confusing. Does anyone have any good solutions on how to display this timer system? Personally, I'm not even sure we need a 14-day timer display on the matchlist view, but would love to hear other thoughts.

Matchlist view: new convos in red, chat-started in black Chat-started with coach mark

|improve this question
6

This is a complex situation and I feel like a lot more info is needed. However, there's a part where an answer can be provided, and it's whether to mix (or not) the times. And the answer is NO.

Check your own screen capture: you have 22h, then 14d and even 13m. And according to your description, these times are measuring different actions (one is for a match, the other for an initiated conversation, 2 totally different actions sharing the same data spot!)

What I'd do is to clearly separate the data for both actions while providing some visual information at first glimpse, then users could choose to learn more.

For this purpose, I'd add very clear text below the names, a visual "time lapse aid" over the avatars. Note: I suggest using monochrome versions for color blind users, but since you mention color aids, there you go. You could also consider opacity of the avatars, so 100% opacity is for 14 days and 0 opacity (just a hollow border) would be 0 days, so you can easily add CSS rules like the pseudo-code below

$opacity : $days_left
if $days_left=1 {echo '7%'}
elseif $days_left=2 {echo '14%'}
elseif $days_left=3 {echo '21%'}
....

Then, on a different visual and informational dimension, clocks only for hours and minutes and only as data for initiated conversation action. So, this clock would measure this action, and if action is not initiated, then clock is inactive and shows a "start" link to communicate affordance.

A quick mockup using your own screen capture:

enter image description here

remember: this is just an idea for you to get going, and more information is needed, but since you have it, I hope this helps you visualize the issues

|improve this answer
  • Devin, I would want to see faces of people I am prompted to write to asap. In matching apps pictures are crucial and the coloring in your proposal blocks them out. I mean, one could make a lifetime mistake here by writing to a wrong person. Or not writing to a right one in time. – Zoe K Aug 14 '15 at 22:50
  • that's the whole idea, to somehow provide a sense of urgency. See how I'm using transparencies, so faces are still visible, which can be enhanced with the non-blocked face on the second step as mentioned by the OP. What I'm doing here is to provide a higher preference to action over content so the app is more used. As I mentioned, I'd need more details for additional features or how the flow is, hence why I added the last paragraph from the very beginning. But your last sentence is exactly what I'm trying to solve: use the app, time is of the essence! – Devin Aug 14 '15 at 23:13
  • Thanks Devin! I like the idea of separating the UI treatment of the 14-day match expiration and the 24-hour new match expiration. Not sure about the overlay on the faces, however. It's not ideal to be covering up visibility of your matches, and we didn't want a physical countdown UI, as it would be a little overwhelming. Of course we want a sense of urgency, but we also want them to feel comfortable and not rushed. – Aalok Trivedi Aug 17 '15 at 16:47
  • As to additional info, the matching flow works like most other apps: We give you a certain amount of people to 'rate' yes or no to; mutual likes will result in a 'match' and would be seen in your matchlist view. Once you've matched, either party has 24 hours to start the conversation. If the conversation has started, you will have 14 days (from start of match date) to engage with your match before it expires – Aalok Trivedi Aug 17 '15 at 16:48
1

I think this screen definitely needs a timer on a matchlist because users will be unpleasantly surprised when matches suddenly start to disappear without some sort of time tracker. The problem with the clock is that it is normally associated with hours or precise time (like an alarm clock), and here it represents all kinds of units: days, hours, minutes. I think the variety of units might be confusing in it's own right, and maybe it would be better to keep days only (showing the last 24 hours as 0 days). I'd test it, however.

Anyway, back to your problem: I used progress bars here because they are visible enough, they give a nudge but they are much less annoying and less personal than the clock icon, especially a red one.

enter image description here

|improve this answer
  • Thanks Zoe. Hmm, I think the progress bar is an interesting idea. The problem is trying to reduce anxiety. Since the timer system already induces some form of initial anxiety, We didn't want a physical countdown UI. I feel like the seeing the bar slowly decrease increases anxiety even more, rather than text form. I've tried the same treatment with the time on the right-hand side, and I feel that it was confusing because it didn't feel like a timer; it felt like a 'last seen/sent/active' indicator, since this treatment is a common UI pattern in list views such as email nd messaging apps. – Aalok Trivedi Aug 17 '15 at 16:32
  • Hi Aalok, that's an interesting point… I can't say I'm threatened by a progress bar, but then again I'm spending a lot of time around DataVis so I might be simply biased. But hey, if the goal is to remove the pressure, then I'd definitely get rid of all red elements and I'd use dark blue instead. Maybe it will resolve the progress bar and make it less intimidating. But even if you decide to go with Devin's idea, I'd stay away from red, it gives a very clear signal of critical timing. – Zoe K Aug 17 '15 at 19:47
0

If we want to convey that a match will expire then showing timer is ok. The UI looks ok, add some sort functionality in the UI so that it's easier for the user to review data based on a specific set of parameters - by expiring time, by last seen time... etc. That will solve confusion to a greater extent

The data should be sorted on the basis of who expires first by default. I guess that's not the case from the snapshot above.

|improve this answer
  • Thank you! Yea, we've thought about a sorting system for a v2, but for now, we're trying to eliminate as much confusion possible from the get go. – Aalok Trivedi Aug 17 '15 at 16:25

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.