Hardware permissions in browsers

Question

We're building an app that allows people to upload or record their voice or video using HTML5 (not flash). We've run into a problem where users can't seem to find the button to allow the app to use a microphone or webcam. On chrome it's a little topbar that slides down when an app requests permission to use hardware.

The users that we're working with are very low -> low in technical literacy.

Has anyone had a similar problem? how did you guys handle the communication?

Answer 1

You could use overlays to point to the appropriate button, or the general area of it. You'd need to detect the browser type and draw the help accordingly.

Start out with your regular page, with your button/link/whatever that starts the recording process:

^{download bmml source – Wireframes created with Balsamiq Mockups}

On pressing the button, you can display an overlay that displays a small instruction set with a pointer to the button's general area.

^{download bmml source}

If might be possible to detect when the user grants permission, I'm not sure. If so, you can use that event to remove the help overlay. Perhaps an event that recording has actually started if not the action of actually granting it. If not, you could include a confirm button in the overlay to remove.

Answer 2

It sounds like a problem that is best solved with a help page with clear instructions and screen shots of what the users should expect in different browsers.

You could also detect the user's browser and tailor the help to that. However, I would still make the help for all browsers accessible to everyone in some way. Allow the possibility that someone could look at the instructions on a different computer than they are actually going to use. For example, users with low computer literacy are likely to ask someone else for help, who may want to go look at your site.

Display a prominent link to the help page whenever your app detects that you don't have access to the camera.