1

I'm looking to design a section of the UI which will list phone numbers, and:

  • Either list the phone numbers as non-interactive if a user cannot make a call, or as interactive if they can. (ie traditional phone vs traditional tablet, but I'm aware exceptions to this rule are becoming more commonplace)
  • Be used on both tablet and phone,
  • Not require the native device UI and popups due to requirements

As the user may be unable to call due to:

  1. Lack of sim
  2. Airplane mode
  3. No signal

...is there a traditional method for displaying "Can make a call" vs "Cannot make a call"? Should I just always allow the user to progress to the dialer and let that handle the problem? Or should the phone numbers gray out if there is no signal or a lack of sim?

[Added later] Just to clarify:

  • It is not a webpage, it is an installed app (if that makes a difference).
  • It may occur on tablet devices which do not have a dialer, but may have apps such as Skype which allow dialing even if there is no phone signal.
Improve this question
8
  • Graying it out seems to be a legit and easy way to go about doing that. Of course that also depends if you decide you do need to do that for the user (vs, just let him call and find out). Another way would be to add a small sign to specify something is disabled like a gray not available sign next to the number.
    – Angelos Arnis
    Oct 2, 2015 at 10:21
  • Is it even technically possible for the site / app to detect if the user is currently able to make a call? I would confirm that before you worry about whether or not to use that functionality. Don't forget that there are things like Skype that can automatically detect phonenumbers on the page and allow the user to link via that. I'd confirm the technical restrictions / possibilities first. (Unless you've done this already and are sure it is 100% possible?)
    – JonW ♦
    Oct 2, 2015 at 10:23
  • 1
    Just to clarify: - It is not a webpage, it is an installed app (if that makes a difference) - It may occur on tablet devices which do not have a dialer, but may have apps such as Skype which allow dialing even if there is no phone signal.
    – Oz Mills
    Oct 2, 2015 at 10:24
  • A/B Testing is what you could do. Create a version with a not avail. number, and a version where the user can click the number and see if they can connect or not. Then test those and get the feedback on what works best.
    – Angelos Arnis
    Oct 2, 2015 at 10:30
  • @AngelosArnis I don't think AB testing would work for this actually. What is the end 'conversion' page that you'll be testing which version works better at getting to? I don't know how you'd have a measurable item to test for here.
    – JonW ♦
    Oct 2, 2015 at 10:42

1 Answer 1

Reset to default
2

Use your Link / CTA color

If you are using a consistent color for text-based links in your app, I would continue that visual theme. If the device is capable of making a call, then display the number with your link/CTA color. If not, use your standard display text color.

Don't grey-out / fade information

The numbers aren't just buttons/links; they're information. Since you are looking to visually indicate the user's ability to call, I would avoid greying-out the number as that would seem to reflect on the number itself (is the number actually valid?) and not the device's capability.

Greying-back the text may also hurt readability under challenging lighting conditions, making it more difficult to see and dial the number on a phone.

Improve this answer

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.