Alternative Mobile Interfaces: How to Set Up SMS and Voice Menus

Now that mobile devices out number personal computers, it is imperative that we take into consideration all of the functionality that these devices give us. There has been plenty of talk about “mobile websites” and sites for “small screen devices”. Whatever you call this new breed of ubiquitous, always-on, always-connected tiny computing devices, we shouldn’t overlook some of their greatest assets.

Throughout media history, as we read a new paradigm, we tend to look back at the previous both for inspiration and guidance. When television began, it aped radio. People sat around a table and discussed topics. The only different between the radio and television is that you could see the people as well. As time progressed, people realised that the TV was a new medium unto itself. We saw similar attempts when the Web first became possible too. Service providers offered “channels” for entertainment. The Web was trying to be like television. We soon realised that the Web was different and had so many more possibilities.

We are now transitioning from the large desktop and laptop computers to small “smart” phones and “dumb” internet connected objects. So, like all media transitions, we look at the previous and try to apply the same thought processes. Accessing information on your phone is very different from accessing via your computer terminal. There are various reasons why this is, from screen size and resolution, to processing power, user-input (T9, soft/hard keyboards, touch, voice, sight, etc.), to situational characteristics. Are you using your device during a commute or on your couch at home or both?

As we mitigate issues with our current Web experience to account for much of these new paradigms in which people find themselves accessing this information, we tend to overlook some of the key benefits that phones and other mobile devices have over existing computer experiences.

This article isn’t about how to make a “mobile website”. Is it better to use media queries, to target specific devices, to run several front-end templates for different browser and device types, or even have separate sites? These are overlooking the more obvious question of whether the Web is the right medium in the first place.

This blog is all about building for mobile. Phones are first and foremost designed to make calls. Phones also have the quirky ability to handle asynchronous push messages called SMS. As designers and developers, we tend to jump straight into what we know best, the Web, but taking a few moments to stop and think about the alternatives could prove to be even more valuable to your customers.

Short Messaging Service

SMS messages are great ways to interact with customers. No matter what “social media experts” expound about the virtues of the social graph, boring old email mailing lists still generate incredible amounts of traffic, sales and return on investment. SMS messages can also fill this niche on phones. With the ability to push a message out to your customers, periodically or interactively, it is a tool to get the word out in a direct and personal manner. Many services exist to allow customers to send a message to a short-code, a 5 digit number, with some keywords and instantly get an automated reply. This is useful when requesting travel information, events for venues or other data. You simply text a keyword, possibly a bus-stop number, and you get how long until the next bus arrives. Maybe you text a venue name and see who is playing that night, or a post-code and get the next 5 days weather forecast.

Since these messages are asynchronous, the order doesn’t matter when they are sent. Each is time-stamped and will be accepted when the network can deliver it. For television voting, you could call a number, but the lines might be busy. With SMS, you send off the message and it gets delivered at a later date with a time stamp. This is important because it can handle large spikes. In emergency situations, such as tsunamis or earthquakes SMS broadcasts can be life savers. Inversely, services like Ushahidi can accept SMS messages and track the information.

SMS communications is an excellent way to accomplish out-of-band communications. If you forget your password, rather than emailing it to you, a temporary code can be sent. This allows for one more layer of authentication beyond just a name and password.

There are plenty of services out there that allow you to send and receive SMS messages for processing. I’ll be discussing an example of a service called Tropo in the next section.

Voice Menus

Have you ever called your bank or another company and gotten that dreadful voice menu system? You know, the one that asks you “Press 1 for a service representative, press 2 to query about your account, press 3 for lost cards…”. They can be a real pain. They are cold, monotone, boring and usually unresponsive to your actual needs. Let’s not blame implementation issues for ruining the whole concept of voice menus. Used correctly, they can offer an excellent way for your customers to quickly get information via a medium they are familiar with. Just because phones are now outselling personal computers, it doesn’t mean that every phone has the newest version of WebKit on a 3G network! Plenty of people still use non-smart phones on a daily basis. What percentage of those people are your potential customers that you are missing?

Building a voice menu system seems like something that costs a fortune and only enterprise level companies are capable of doing. If that’s what you thought, it couldn’t be further from the truth. Today, companies like Tropo and Twilio allow you to create amazingly complex telephony applications with only a few lines of your favourite programming languages.

To see just how easy it is, lets create a few quick applications right now.

Step 1

I am going to walk you through using the Tropo.com service, so you need to sign-up for an account. The entire service is free. You only pay to guarantee a quality of service. So as a developer, you can test as long as you like for free, but if you put this into production, you’ll need to pay a few dollars a month for volume. Either way, it is still much cheaper than trying to develop this yourself in house.

Tropo Step 1

Tropo Step 1

Step 2

We need to create a new application. This is where we attach code, phone numbers and other metadata. Choose to create a Scripting app rather than WebAPI. For the Application Name, you can use BuildMobileExample. You then want to choose hosted file, this just means that the code will sit on their server. In the future, you could run it on your web server so you can access your own databases and other resources. For now, we’ll keep it simple and use their hosting. Give this file a name, something like BuildMobileExample.php and create the file. You can choose from a variety of languages, including JavaScript. In this example, I’m using PHP, but it is easy to translate into anything else. Create the Application.

Tropo Step 2

Tropo Step 2

Step 3

Let’s edit the hosted file you just created. Click on the “Your Hosted Files” tab at the top then click Edit next to the file we just created. You should now see a pop-up box that is empty. Let’s fill that in with some simple code saying:

<?php
    say("Hello World");
?>
Tropo Step 3

Tropo Step 3

Save this with “Update File” and go back to the “Your Applications” tab. Under the BuildMobleExample application, you should see the Skype Voice number assigned to your application. You can also add additional phone numbers in a country near you. Skype numbers are free to call, so this is a good way to test.

When you call your new number, you should hear a computer voice say “Hello World” back to you. Tada, you have now created your first voice application. That wasn’t very hard! Let’s now edit that file and do something more useful.

Step 4

Asking a question! Using voice, you can accept menu commands and interact with your customers over the phone. It must be said, that we are all used to really bad experiences. If you are planning on adopting voice menus, you should really do your homework. Understand why cash machines choose depth versus breadth in their menus. How many choices is too many? Is there a way to go back? It isn’t easy, but done well it can be a valuable resource.

Using Tropo, if you want to ask a question, you simply add the ask() function. It takes two parameters, a string the system will read and an array of attributes. In this example, I am going to ask a simple diner menu choice. Would you like, beef, chicken or vegetables? The array has an attribute called “choices”, which is a comma separated list of potential answers. I also set a timeout and a few additional parameters to handle bad choices, time out issues and correct answers. Each of these functions is further defined to do some next step. In this case, after a customer makes a choice, it simply replies with a say() about how wonderful the choice is.

Tropo Step 4

Tropo Step 4

<?php
    say("Hello World");
    ask("What do you like better, beef, chicken or vegetables?", array(
        choices =>"beef, chicken, vegetables",
        timeout=>5.0,
        onTimeout=>"onTimeout",
        onBadChoice=>"onBadChoice",
        bargein=>false,
        onChoice=>"onChoice"
    ));

    function onChoice($event) {
        say("That's crazy, me too!");
    }

    function onBadChoice($event) {
        say("Sorry, I did not understand that!");
    }

    function onTimeout($event) {
        say("I know it's a hard choice, just call me back when you've figured it out!");
    }
?>

At this point, you should have a high level understanding of how to give commands and accept input via the phone using Tropo. Now you can go on to build much more complex voice menu systems to handle requests specific to your services.

Tropo has plenty of documentation about their API and scripts. You can read a lot more, and learn about how to play MP3s back over the phone as well as send and receive SMS messages.

Debugging audio menus can be very difficult. If you make mistakes, the phone just won’t ring. It has plenty of room for improvement, but don’t get too worried if you call and it says “invalid phone number”. That’s the phone’s way of saying “syntax error”.

Conclusion

Having a mobile interface via voice or SMS allows for you to augment museums, venues, transportation and cities with an additional layer of optional information via a device that already exists in most people’s pockets. Imagine a voice system where you could ring-up and ask for a list of amenities or give two street corners and the database will respond with appropriate information. Not through some shiny app that requires several different build platforms or permission from vendors, nor is it some HTML5 geo-locating webpage only available on the top 1% of smart phones. It is a system that could be easily deployed world-wide in any city, town or village that has a cell tower within range.

Building for mobile doesn’t only mean Web Standards, Android or iOS. There is a whole world of audio and SMS communications which is open to you. These features of a phone are incredibly robust, mature and exist on more phones than have web browsers. So the next time you think about opening your company and services up to customers via phones, consider not simply repackaging an existing medium, but focus on the devices’ strengths as a unique opportunity.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • jacy perks

    Excellent article! You’ve inspired my next choice of what to learn next to expand my development skills! Thanks

  • http://www.igcenterprises.com Joe Jollands

    Great Article! It’s good to hear someone talking sense about mobile usage, I’m all for developing Apps but I strongly disagree when people think having an iPhone App is the epitome of a mobile strategy. I’ll look into Tropo sometime.

  • John Wallace

    Could this be used to fill in inputs on a form?

    Like if I had a calculator for area:

    Voice says: Height
    User says: 25
    Voice says: width:
    User says 10
    Voice says: Area is 250 square inches

    ?

    • http://buildmobile.com Paul Bridgestock

      I imagine this is possible using the digits grammar and carefully considering how you handle the number of digits allowed. Just as Brian said, great attention must be paid to designing the experience. It’s an interesting idea you have there John.

    • http://suda.co.uk Brian Suda

      Numbers are slightly difficult with Voice systems. You need an enumerated list of values, so “10″ needs to be a choice in your list. if you are building a calculator, you’d need to have every number possible in your list, which is big to say the least. you could get smart about it, but it wouldn’t be easy.

      If you build a prototype, be sure to remember that the list of values needs to be the English spelling, so to represent “10″, your choice needs to be: one, two, three, four, …, nine, ten.