How to properly display an original countdown for a quiz app?

Question

I'm working on a small quiz app and I need to display a countdown. The app will be mostly used on PC/tablets but I have to think about mobiles too.

The UI is minimalist and clear (i. e. think Material Design)

Let's say the player has 20 seconds to make a choice (i. e. one click).

Even if it's a crucial data, I don't want to disturb the user too much with a big countdown on the screen. It has to be seen but not too much.

I was thinking about a thin progress bar. Is it clear enough? Do you think it should be progressive (0 to 100%) or decreasing(100 to 0%)?

What about a simple Time remaining : X seconds or just a decreasing number? I'm looking for something clear but a bit more original than a simple number countdown. Anyway, if I use a number countdown, should I include decimals?

Do you think about any other alternatives?

Answer 1

I would consider the idea of a countdown circle

I think something like this is a good option for a couple reasons.

One, you can give your users multiple types of visual feedback. They will be able to see the shifts in the amount of color (or colors) as well as the text change.

The other being that you can conserve some screen space by placing this in a corner. With something like this, it doesn't have to be a large circle. It just has to be large enough to catch the attention of your users so they notice the time shift.

A pro on both is it allows you to be flexible with how much text you put into it (ex: You can put decimal points if you want).

Answer 2

First thing which comes in my mind from timer is classical sand timer and I believe people across different culture are aware about this. One things to notice about this timer is that one part of object is releasing sand constantly and other one is filling. Ratio of sand and the speed at which it is falling combinely helps the user to know the overall status of time remaining and spent.

However designing this kind skeuomorphic pattern might be difficult programmatically or may not go well with your overall interface.

Here are few thoughts which I extracted out of this pattern and can be implemented to any simple shape like rectangle or circle.

For eg: In image below Red portion is showing utilized time while green is showing remaining. If you are planning something like this, use colors wisely. Some dark shades grab too much attention especially red, and that's the reason I used faded color.

This one I believe is more appropriate than upper one. Above design can be confusing in terms of which portion is utilized and which one is remaining. In this pattern you can achieve objective using only one color and it is more obvious that above pattern that green part is remaining.

Answer 3

If you use a simple text countdown I would suggest simple labeling and large clear numbers that change to show the countdown value ending at 0:

Time : XX seconds

or

Time: XX

Regarding the use of a thin progress bar, in my experience I have seen examples where this kind of feedback can be difficult for the user to see - both on a PC and a small device screen. If the user is focused on a task related to answering a quiz question, they may not be able to also focus on viewing the progress meter if it is located in a distant area of the display.

Answer 4

Any text or number changing periodically will create an ongoing distraction. 5...blink...4...blink... etc. This flashing occurs throughout the duration of the question. A smoothly moving progress bar will allow the user to leave their attention on the question, but give the info when needed.

For an example of minimalist timeout indicators, I would recommend you look at the various screens and functions in the latest version of Waze (a popular mobile navigation app.) They have timeout bars that recede across the bottom of the screen, and racetrack bars that wrap default controls.