7

I have an application with a simple GUI for recording video:

  • In default state, button says "REC", pressing it starts recording.
  • While recording, button says "STOP", pressing it stops recording.

This button also serves as the only indicator of whether or not recording is active (since it says "STOP" when it's active and "REC" when it's not).

My question is: What color(s) should this button be to mimic the most common setup in video recording hardware (which I have little experience with)?

My instinct is that "REC" should be red, but then I am not sure what color "STOP" should be, because I also feel like red would indicate "recording in progress".

Note: I cannot change the shape of the button, and I'd prefer not to add an additional recording indicator.

4
  • 1
    It's not just your instinct. Recorders used to have red REC buttons often. Random example.
    – Mast
    Commented Apr 3 at 10:47
  • Is that 'western' recorders used to have red REC buttons? Colours mean different things to different cultures.
    – Neil
    Commented Apr 4 at 18:54
  • 1
    Sidenote: While "STOP" clearly shows that it is currently running, "REC" could mean that it is currently recording or that it would start recording. Could you perhaps make it instead a more commonly-styled button that always says "REC" but has a clear visual indication that it is currently pressed (e.g. with border shadows "pushing it in") (or a toggle button that is clearly on)?
    – lucidbrot
    Commented Apr 5 at 13:45
  • While you cannot change the (outer?) shape of the button, can you add interior graphics to simulate a shape change? Commented May 6 at 17:24

3 Answers 3

15

Handycam/Camcorder era:

  • Static physical button for record/stop
  • Blinking red/solid red indicator light for recordings
  • Stop is a square icon
  • Record is a circle icon

Smartphone era:

  • Dynamic digital button for record/stop
  • iPhone: after record red record circle click, button icon becomes a stop red square
  • Samsung camera app: after record red record circle click, button icon becomes a stop dark grey square

Both dark grey and red should be recognizable for stop. REC should def be red. Changing from a circle to square on record would be ideal. Adding a blinking red would also be ideal if you do use any animation. You can safely assume that users will recognize record becomes stop with minimal visual indication, it's a very consistent standard.

8

If the button has text, I think it is big enough to be able to show with some type of animation that there is an action running, without making a big color change. In this way you not only highlight the subtle difference of the button but also the semantic reinforcement of stopping an action: the recording and the animation.

enter image description here

4
  • 2
    Be careful to first conduct the appropriate research to ensure you do not induce seizures or migraine headaches with such animations. Commented Apr 5 at 6:52
  • 2
    I would like an animation in this case, but not THIS animation. As @EndAnti-SemiticHate says, it might not be well perceived. For me, it's too fast, unnecessary angled and why not use something circular, which brings the cassette look and feel back for an old fart like me?
    – Marcel
    Commented Apr 5 at 10:55
  • The animation of this answer is a random one, one that I found on the internet customized.
    – Danielillo
    Commented Apr 5 at 10:59
  • If you go with text, one option would be adding the word "recording" if it fits, ie "Stop recording". Or you could have some indicator nearby with the word "recording"; it can be nice to know what the app does if you for example leave it for a while and get back.
    – pereric
    Commented Apr 5 at 12:23
4

In the physical tape era when record also meant overwrite (and therefore erase) record would be warning-coloured: red or orange.

But for file-based recording there is no need for that to protect your original.

Just use the media controls symbols from Unicode:

⏭ ⏮ ⏯ ⏵ ⏸ ⏹ ⏺ ⏻

etc.

Repeated as an image because some people don't have an appropriate font installed: these glyphs from font Noto Sans Symvols2

12
  • 8
    How universal is the support for those? At least on my browser on my work computer, two of them (nr. 4 and nr. 8) are missing glyphs.
    – gerrit
    Commented Apr 3 at 6:52
  • 4
    For me, the first 3 display as emojis (a white symbol on a rounded box filled with a gradient of bluish gray), the next one just as a black symbol, the next 3 as emojis in the same way again and then logout as a symbol. This inconsistency could not be tolerated IMO. (I am using iPadOS, btw.)
    – leo848
    Commented Apr 3 at 9:34
  • 3
    I can see all symbols (Firefox 124.0.2, 64-bit, Windows 11). Commented Apr 3 at 12:03
  • 2
    @Gábor I also have Firefox installed on the same machine, and the symbols are displayed correctly (all black, as in the second row). So apparently it's not the matter of fonts installed, but fonts used by the browser.
    – Trang Oul
    Commented Apr 4 at 7:05
  • 4
    In file-based recording there is absolutely a need for a high-focus visual indication of Record. Usability Heuristic #1 is Visibility of System Status. Record is an important action that has task-based, storage, and legal considerations. If I was auditing an application that's only indication of recording status was a button with a black circle icon changing to a black square icon I would flag it as a heuristic violation.
    – It's Dylan
    Commented Apr 4 at 15:00

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.