67

Our local public transportation system uses electronic cards (something like RFID technology) to validate rides. Users enter the vehicle and place their contactless card against a reader, and a beep tells them that the system has registered their presence.

However, reading the cards takes quite a long time (2 or 3 seconds, so it's not just a regular swipe) and it's important that the card stay placed against the reader, otherwise it doesn't get recognised. The beep, on the other hand, only happens once the process is complete.

What often happens is that the users swipe the card, receive no feedback, and think that it's not working (the cards are meant to stay inside your wallet so it's easy to think that it's just not close enough).

How could this system be improved to communicate some (preferably audible) feedback that the card is being read, but that you shouldn't take it away just yet?

Some points to consider:

  • I thought of a beep that starts when you place the card, but that might bring users to believe it's all done
  • The city is trilingual, so spoken words are not practical
Improve this question
10
  • 6
    The public transport company Tisséo, in Toulouse, France, does that too actually; if the user removes the card too quickly, a double loud beep rings and a red LED lights up (it's a green led and a single beep when the card is read successfully). It's much faster than 2~3 seconds to read it though (less than 1, usually). In your case, I would suggest lighting up an orange LED until the card is read (but you would still need an audio feedback for visually impaired people).
    – Linkyu
    Commented Apr 16, 2015 at 0:04
  • 8
    Short, rapid beeps to say it's being read and a long beep when it's done.
    – Jon
    Commented Apr 16, 2015 at 2:58
  • 1
    Can you remember the rooter connecting song?
    – Yohann V.
    Commented Apr 16, 2015 at 9:33
  • 3
    I would say that a "tick-tock" sound that starts as soon as the card is read - and if your reader could make a "bonk" sound if people move the card before a read is successful...
    – Scott Baker
    Commented Apr 17, 2015 at 2:00
  • 8
    Why does it take so long? o_o
    – bjb568
    Commented Apr 17, 2015 at 3:06

9 Answers 9

Reset to default
90

Great question! This is an good case for microinteraction design.

Microinteraction objectives

In descending order of priority:

  1. Provide clear affordance for user to place card/wallet on reader
  2. Provide clear feedback that the user should hold the card on the reader until an outcome.
  3. Since this is public transportation, provide blind- and deaf- friendly interface.
  4. Make it fast and memorable, so that passengers will "get it and remember it".

Design

Here's a sketch of a reader pedestal which uses physical cues, signage, sound and light to accomplish the objectives above in a single micro-interaction (click to enlarge).

enter image description here

The physical interaction is (click to enlarge):

enter image description here

The soundtrack during progress can be a "working" sound or a crescendo. The confirmation beep at the end might be something like this sound if successful and this sound if there is an error:

enter image description here

Notes

  • Color, texture, signage, sound and light provide access and affordance for blind, deaf, and color-blind passengers.
  • Don't underestimate the soundtrack!!!
    • Users will remember and avoid (social stigma) the error in the future. Also, passengers waiting in line to board the bus can hear the sound and will understand what the "correct" interaction should sound like.
    • The soundtrack provides a good interface for the bus driver who may need to keep her eyes on the road/elsewhere...she can monitor unauthorized passengers.
  • The entire interaction is language-independent.
  • This is an integrated visual/audio approach. The console is designed so it can be physically retrofitted to existing readers (since it sits above the reader). If you don't have engineering or budget to do the visual bit, the audio design still works independently.

This was a great question, and it illustrates that even short microinteractions can require a lot of design work to get right (and by that I don't mean to suggest that i have anything close to the right solution :-)

Improve this answer
9
  • 4
    I note that this question, and your answer refers to accessibility benefits but you have included images with text in them and not provided the actual text outside of the image files. Therefore people reading this answer without images won't really be able to understand what you're suggesting. Really, you should show the images and provide the textual descriptions as text in the answer itself. Not just for accessibility but for searchability too.
    – JonW ♦
    Commented Apr 16, 2015 at 10:15
  • 11
    @gusdor the nice thing about stackexchange is, if you have a better approach please add your own answer and the community will benefit. As I noted at the end of the answer, I certainly don't presume to have the right answer here :-)
    – tohster
    Commented Apr 16, 2015 at 14:37
  • 4
    @JonW constructive feedback, thanks. I don't think I'll redo the graphics as it's too much effort but will keep in mind for future answers.
    – tohster
    Commented Apr 16, 2015 at 14:59
  • 10
    @Gusdor This approach is taken by contactless payment in the UK (bar of lights that fill up, beep on success, etc). Even my grandfather has been able to use it to make a payment which is more impressive than you may think. Don't assume that because someone owns something they're confident with [or physically capable] of using it, especially when considering the elderly or those with disabilities.
    – Basic
    Commented Apr 16, 2015 at 22:12
  • 4
    It might be necessary to distinguish two cases of failure: card has not been read completely before been taken away (progress indicators flash, or just stop?) and card has been read but is invalid (red light)
    – Bergi
    Commented Apr 17, 2015 at 14:21
27

This is where I'd argue that UX isn't the one to fix this. All they can do is apply duct tape and band aids to a poorly implemented technology.

Fix the technology. It simply shouldn't take 3 seconds to read an RFID chip. On top of that, asking each person to wait 3 seconds to pass through seems like a logistical nightmare for crowd management.

This is where it's critical that organizations understand that the technology decisions are the UX decisions. If the technology is poor, you've already failed at UX. I find it a common burden for UX teams to be seen more as 'make this bad technology slightly less bad' rather than a team that is brought in early enough to actually help with the technology decisions so that from day 1, the decision to implement a particular technology has a UX focus.

Improve this answer
6
  • 7
    I do agree, they are the slowest chip readers I've ever seen. But we can't ask to replace this technology, so UX is the next best thing.
    – LS97
    Commented Apr 16, 2015 at 17:48
  • 3
    @LS97 I don't entirely disagree, but do be wary. I often run into the situation where technology failures are blamed on UX due to bad design, mainly because the powers-that-be didn't realize that proper UX requires that good technology be used from the start. And while I love 'fixing' things, I also find that UX bandaids can actually hinder a proper solution as it can tend to mask the real problem that should be emphasized as the source of the pain point and fixed sooner than later. Point being, UX is the technology. If the technology is bad, UX is set up to fail from the get-go.
    – DA01
    Commented Apr 16, 2015 at 17:50
  • That's a good point. One that should have been brought up a few years ago when the technology was first implemented... thanks for the answer edit!
    – LS97
    Commented Apr 16, 2015 at 17:53
  • 3
    I'm inclined to agree, but it's quite possible that the delay isn't caused by the RFID reader at all (perhaps it tries to connect to a centralised server to validate the ticket balance, or perhaps it's writing data to the RFID). If so, the interaction is what causes people to refer to the task as "reading their card" and setting expectations accordingly.
    – Kit Grose
    Commented Apr 16, 2015 at 21:32
  • 2
    @KitGrose true. Point is there's a delay that probably shouldn't be there in the first place is UX is the focus.
    – DA01
    Commented Apr 16, 2015 at 21:36
18

In the Parliament of Ukraine they use both visual and audial means while voting, you can see youtube video (~10s).

The sound consist of several tones which are percieved as the sequence, so stopping it somewhere in the middle sounds not natural. The row has some kind of harmony and natural feeling of the length.

You could try to play some ~3s sound when the system recognizes the card and makes processing, so users understand the process is going on while sound is playing.

Adding even single LED will allow for visual feedback for the processing, too.

Improve this answer
2
  • 1
    In the US, aren't visual and audio cues required by the ADA?
    – Cole Tobin
    Commented Apr 15, 2015 at 22:46
  • 5
    That video seems to be the Parliament-wide countdown till the end of the vote, not something for an individual person's vote.
    – cpast
    Commented Apr 16, 2015 at 2:10
10

The XBox added a visual camera input device called the Kinect. They defined a number of gesture inputs, covered on the linked page and this one. This 2nd link includes the 'hold to select' gesture.

Hand icon is held over the input while the circle fills up around the hand

Point the palm of your hand toward the screen, and move the on-screen hand over the item you want to select. To select an item, keep your hand over the item until the circle completes.

This is somewhat cheesy, but it borrows the concept of a . For your use case of reading and validating data, this gets tricky. If there's a long delay, you'll fall into the trap of the dreaded file transfer dialog. However, I think this could still work for you.

  • System is not in use: screen shows animation of a hand moving a badge to the reader. Text: 'place card/ticket/badge here'
  • Reader recognizes a badge: screen changes to a static image of a hand holding a badge over the reader. Progress bar begins to fill up. Text: 'Please wait a few moments/while we validate your badge/for your information to travel to space and back'
  • It's important that the progress bar immediately show detectable movement. A user won't recognize the progress bar if it stays empty or fills up to 99% immediately. An animation of the first 25-50% filling over at least a second will get the point across.
  • The task completes: progress bar quickly finishes, screen changes to a check mark, smiley face, whatever. Text: 'Thanks! Enjoy your $_thing.

I mention the circle animation in particular because it seems to be gaining prominence. I've most recently seen it on the overly futuresque touch screen soda machines.

enter image description here

Improve this answer
2
  • Re-reading your question, it looks like you don't have any interactive visual feedback. If that's the case, then I apologize for my answer not being applicable.
    – Patrick M
    Commented Apr 15, 2015 at 19:53
  • 1
    The machine does have a large LCD display where the animation and progress circle could indeed be played. It's definitely a better use of the screen than it is now (a blank screen that turns into the image of a person when validated). A valuable suggestion, thanks!
    – LS97
    Commented Apr 15, 2015 at 20:34
7

You can start looking at existing systems in the public sector. Take for example pedestrian-crossing lights with a ticking sound for visually impaired people. It's a continuously ticking sound and it ticks fast enough to notice something is in progress. It can be a softer, shorter and different sound than the beep. For those who can't hear it can be combined with a visual sign which can also be borrowed from traffic lights: Red means "no card is hold against the reader", orange/yellow means "reading" and green "done". For color blind people you can support it with a status message or maybe simulate a real traffic light where the order of the lights matter.

Improve this answer
1
  • I like the idea of a traffic light -- a familiar pattern to users that is actually pretty appropriate in the field of transportation!
    – LS97
    Commented Apr 15, 2015 at 18:54
7

Adding to Alexey's great answer:

You could have the reader play a sequence of tones in a scale that move toward a resolution; when the card is done reading, a resolving chord would play.

This would make it even clearer that the reader is done, eliminating any doubt as to whether the sequence of notes is finished.

I believe this could be done in such a way that the resolving chord sounds right even when the reading-time is somewhat variable.

Something like a more informative version of this idea that James Murphy had.

Improve this answer
4
  • 2
    And to complement this, an error-like tone could sound if the user takes the card away too quickly.
    – LS97
    Commented Apr 15, 2015 at 22:17
  • Thank you for the link for Resolution. This definitely has big sense in audio interfaces. Sometimes you feel it intuitively when sound isn't finished and you expect the continuation. Now I know it's Resolution.
    – Alexey Kolchenko
    Commented Apr 16, 2015 at 8:56
  • This wouldn't provide any useful cues to a person with tone deafness, however
    – chbaker0
    Commented Apr 20, 2015 at 6:16
  • True, but a comprehensive solution would likely include visual feedback as well (e.g. @tohster's excellent answer).
    – Will
    Commented Apr 20, 2015 at 16:55
4

Audio only feedback - Play a rising tone that ends in a pleasant note when finished. Initially users would not know what the tone meant but once they use it the first time they will be trained. Or play a slightly annoying sound that ends once the card is read. Think like the scratchy changing sound of the geiger counter.

Visual feedback - A single yellow light that turns green would be very effective.

Or you could print sticks that say "Hold card here, and wait for beep" in 3 languages and put them over the reader.

Improve this answer
1
  • 2
    Possibly for audio, 3 low beeps & a high one like the starting sounds in the old 80's Atari game Pole Position. The card could have Braille on it to say "Hold on reader till you hear the high beep", as well as non-Braille print.
    – Matt Moran
    Commented Apr 17, 2015 at 9:32
2

As users are likely not used to technology working this slowly, the best system may be one that uses a combination of methods to help guide them to using the system correctly. However, (as other answers have shown) it's difficult to convey "waiting" through a static visual aid alone, and it may be too costly to add a screen conveying proper use. I think you may be able to get away with just auditory feedback if you use different tones to convey the three states of the system:

  • Working

You could make the system make short, quiet, periodic beeps (every 0.6 seconds or so - you can use this metronome at 100BPM to hear what that sounds like) to let the user know that the system is processing their card. The sounds need to be soft and frequent enough so that the user won't remove their card thinking that the first beep was an indication of success.

  • Error

If the user removes their card before the system finishes reading, it should play a low droning tone to convey that the system did not process it correctly. Users will be able to realize that an error occurred because the sound would only play after they remove their card while the "working" noise was indicating that the system was processing.

  • Success

A pleasant tone should play when the system finishes reading the card. The user will know that the system has finished processing because the "working" noise has stopped. Obviously, a short delay should occur before the system begins reading cards again so that the finished user can remove their card from the reading area.

Improve this answer
0

One system that is used in the city I live in: The reading apparatus is different between single beeps (check-in before entering the metro) and long reads (e.g. buying subscriptions). On the machines where the cards are read for a long time, the card is meant to be inserted in a sort of vertical slot, where the reader is, so it's I think evident for the user that the card stays there until told otherwise see picture, the slot is the gray rectangle just underneath the screen.

Improve this answer

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.