ASNA Refines Its Mobile Tooling with Sharper Icons

June 4, 2013 Alex Woodie

Delivering a smooth user experience is critical when rolling out new mobile interfaces for applications that run on IBM i, or any other platform for that matter. But this can be a challenge for the typical IBM i shop accustomed to command line interfaces and keyboard-based navigation. ASNA hopes to make the user interface creation process easier with two new releases of its mobile application development tools, including Mobile RPG 6.1 and Wings 6.1.

That ASNA has two tools for creating interfaces and applications for mobile devices (smartphones and tablets) is an interesting story. The San Antonio, Texas, company initially planned to help customers retrofit their IBM i applications onto smartphones with Wings, an IBM i application modernization tool that it has been developing and selling for nearly 10 years.

However, it soon became apparent that Wings wasn’t the best approach to delivering “capital M” Mobile applications, as ASNA product evangelist Roger Pence calls those apps that people have become accustomed to using on their iPhones and Android phones.

“We had originally intended and hoped, and even said this at conferences and seminars, that Wings would be our mobile solution,” Pence says. “What we found is that, for applications that need to be on smartphones, that existing back-office applications don’t make good candidates. They have too much hierarchy to them. They’re too deep and they’re doing too much. It’s too hard to skinny the UI down to the form factor of a phone. And they’re not written to take advantage of the phone.”

That’s what led ASNA to develop Mobile RPG, which ASNA announced last fall and delivered earlier this year at version 6.0.

Mobile RPG works the opposite way from Wings. Whereas Wings takes the DDS output of IBM i applications and renders it as a Web-based interface, using a combination of Microsoft ASP.NET technology and the Rational Open Access handler from IBM, Mobile RPG starts with a user interface developed in MS Visual Studio, and generates the DDS that then talks with the RPG application. (The Mobile RPG DDS is then discarded in favor of another OA handler.)

“So in some ways Mobile RPG is Wings backwards. Wings imports for existing, and Mobile RPG exports for new. It was very interesting that we’re able to take pieces of Wings and put it in Mobile RPG. But they’re different. They both have different Open Access handlers. And they solve different problems. Wings is for existing things, and Mobile RPG is for new things.”

Wings is also best used with tablets, whereas Mobile RPG is mostly for smartphones. Wings has turned into the go-to tool when a customer needs a mobile workstation that gives them access to an existing IBM i applications from a 7- or 10-inch tablet, what Pence calls “small m” mobility (as in, yeah, it’s mobile, but not much else). Mobile RPG, on the other hand, is best used for creating new IBM i smartphone applications that deliver that “big M” Mobile experience that your average two-year-old can use.

Which brings us to the enhancements that ASNA has delivered with the 6.1 releases of the tools. They’re mostly minor, but important in delivering the different types of experiences that tablet and smartphone users demand.

Wings and Things

With Wings 6.1, the big new thing is that ASNA has made it easier to access and use the function keys and emulator. “Our guys slicked up and improved your ability to swipe your finger across the panel and pop up a nice little function key display. They also dramatically improved the ability to customize and to change the colors in the emulator,” Pence says.

The new release of Wings doesn’t deliver much in the line of new capabilities, but delivers an overall refinement of what was already there. “In some fashion, it was there before. It was just very crude,” Pence says.

The enhancements with Mobile RPG 6.1 are a little more palpable. The big news is the improvement in the display and the use of icons. The first release of Mobile RPG didn’t offer much in the way of icons. “We just kind of figured you would go get [your own] icons and that was that,” Pence says. “We realized it was working, but the applications were looking like Windows applications in 1998. Garish, ugly icons.”

The solution to the ugly icon problem was to take advantage of graphic rendering engines (GREs) that are now available for Web browsers that enable the display of higher quality vector graphics, including better-looking icons. To that end, ASNA developed and included a boatload of better-looking icons in Wings 6.1 that developers can use to do things in their new Mobile applications.

The result is better-looking and more functional Mobile applications, Pence says. “It was a substantial step forward in letting us build these things so that they look and feel the way they should. Because that’s important. If these things look goofy, if they’re off by one–and they did with those old color icons–then people won’t use them or accept them. They need to look like they grew up on the phone. And this ability to have these fonts, these icons, is really, really cool.”

Icons are critical to today’s Mobile applications, and ability of IBM i developers to map existing functions to the shiny little pixels will go a long way in determining success. “Developers need to stop thinking about 24×80, and start thinking about what a user expects with the mobile applications,” Pence says. “It’s a substantial change. That’s why we have to make this icon stuff easy for these guys. They want to make the sort of user interface these users are used to seeing.”

But let’s not go crazy with the icons, which can sometimes be as tough for adults to pull meaning from as the crayon squiggles of a two-year-old.

“We learned a long time ago with Windows applications that icons without some kind of hover-over were worthless. They made things harder, not easier,” Pence says. “So you have to be sensitive to the fact that these users won’t recognize those icons. On the other hand, you don’t need to explain everything. If there’s an icon of a green telephone, they’ll know that it’ll dial that telephone for you.”

When an icon resembles a toddlers markings, a little text under it can go a long way to speeding up user comprehension (as well as lowering blood pressure). Make the process easy for your users, and one day they’ll be navigating your app like the sharpest two-year-olds out there.

“One of these days, icons will be like function keys,” Pence says. “You don’t have to tell anybody in the AS/400 world that F3 equals exit. It’s always equaled exit since the beginning of time, and as you build these applications you’ll pick these icons that mean those things to your business and your applications.”