Mobile Blog Posts

Undoubtedly you have heard about the great RIA war raging between Apple and Adobe. Apple claims that HTML5 is all you need for web applications and Flash has no future. Adobe shoots back that Flash is the best choice today and claims (not entirely convincingly) that it will remain relevant 5-10 years from now. So how do we make sense of this brouhaha as it relates to our own work designing SaaS and Rich Internet Applications for the Enterprise?

The enterprise desktop of 2010 relies on non-HTML5 desktop browsers

Regardless of what the future will hold, the reality is that in 2010, there is an enormous installed base of IE 6, IE 7, and IE 8 on the desktop - particularly in the Enterprise (with governments typically frozen on IE6!).

Consequently, for Rich Internet Application design work intended for Enterprise desktop web browsers, it is a non-starter to design solutions that don't run on IE7 at the very least. For this RIA market, HTML5-related technologies (see below) are simply not yet viable.

RIAs designed with Flex for the desktop user

For Enterprise web and SaaS applications, by far the majority of RIA work that we do is in Flex (Adobe's RIA platform based on Flash). It is predictable, has a good development environment, is scalable, and provides good performance.

What about Silverlight?

I should also note that we do a growing amount of work in Silverlight 4, particularly for desktop/surfaces/large display multi-touch and gesture applications.

RIAs on the mobile devices of 2010 = HTML5

But when it comes to mobile devices, it is a completely different story. On mobile devices over 90% of the smartphone and tablet market in the US (Apple, Android, WebOS, Rim soon) use the HTML5-savvy WebKit framework for the browser. Consequently our RIA and UI design work for mobile (smartphones and tablets) is increasingly HTML5 and associated technologies.

Key Features of HTML5 and associated technologies

For those who are interested, I just want to quickly note some of the most compelling aspects of HTML5 and the collection of technologies that almost always go with it (Note: I'm not breaking out which are core HTML5 vs associated tech). This list is not at all complete - it just references some of the things I think have intuitive appeal to both technical and non-technical audiences.

• Semantic Tags - for more meaningful markup that is great for search, accessibility and coders
• Audio and Video Tags - for plug-in-less audio and video with native controls
• 2D Canvas and Animations - for rich dynamic Flash-like graphics, animations and effects
• Geolocation/Location Awareness - makes the mobile device's geographic location available to a web application
• Offline Application Caching - cache an entire Web application for offline use so mobile users can access and interact with a Web app even outside of a coverage area
• Web Storage - allows information to pass between pages in a session or even across sessions
• Web Workers - enable developers to parallelize web application tasks for multi-core processors (mutli-core are not yet the standard for mobile devices but probably will be within a year or so)

Android, iPad, iPhone and Beyond

As a rule, Catalyst is technology agnostic. We design applications and UI for our clients using the technology that is optimal for their market and that is manageable by the organization's development team. For web applications intended for desktop users in 2010, this typically means Java, Flex or Silverlight. For applications and web applications intended for mobile users on the iPhone, iPad, Android devices, WebOS, and soon Rim and Nokia, this typically means HTML5 ( with fallback content adaptation for other mobile devices).

Remember David Byrne from the rock band Talking Heads? I recently listened to a talk he gave at the Ted conference, on how architecture helped music to evolve. Byrne's premise was eloquently simple. Artists create a style of music that works for the environment in which it will be heard.

Artists evolve musical styles to fit the playback environment

Byrne gives the example how West African music, with its intricate rhythms works outdoors in the open, but would be a disaster in a Gothic cathedral where reverberation would confuse everything. On the other hand, music that works in a Gothic cathedral (long notes, little rhythm) sounds flattened in outdoor environments.

Bach wrote music for playback in a room that was smaller and not as vaulted as a Gothic cathedral. Consequently his work could be more intricate and could change keys without risking large dissonances. His music was an evolution from previous styles, but also something completely new, designed to fit the context of the room.

Opera houses like La Scala, helped evolve yet another kind of music. Two hundred years ago, opera patrons did not listen in hushed silence. Instead they would eat, drink and yell out to people on stage and to each other. The dramatic and repeating melodies of operatic music evolved in response to this opera experience.

Today's music reflects the environment very clearly. Microphones enable soft personal sounds and complex inflections. Pop music is written for the MP3 player, capable of extreme detail but a limited dynamic range (too much dynamics could blow out your eardrums or at least force you to adjust the volume).

All of these examples illustrate the point that the context for playback determines the kinds of music that works and that evolves.

UI Design firms evolve information & tasks to fit the presentation environment

Now love of music aside, why did this all interest me?

Potential clients often approach us about developing mobile apps for the iPhone/Android phones or for the iPad. This is a high growth area for us. Most of these requests are from clients who already provide desktop or Web-based SaaS solutions and now want to scale this experience to a smaller screen and capture a slice of a very fast growing market.

Many UI firms quote the mantra "simplicity, consistency and usability are the keys to great mobile applications". While this is indeed true, it is not sufficient. Like music that evolves to fit its playback context, the user experience must evolve to fit its presentation context. This means looking at what people do in that environment and changing the very nature of the application and UI so that it takes advantage of the context.

Mobile application design as extensions to existing apps, not stand-ins

Good mobile UI design is not just about creating simpler and more streamlined interfaces (such as virtual keyboards that change depending on the kind of data you are entering), it is also about understanding how the context changes what makes for effective activities.

For example, on mobile devices, people are in extreme multi-task mode. The UI design needs to shift from being entirely focused on linear task completion (as in traditional desktop applications), to applications that are easy to enter and exist. They need to keep the user's mental and physical attention by being clear, visually rich and integrating gesture, touch and sound into the interface.

Mobile devices also provide unique behavioral and sense information such as motion and orientation via accelerometers, GPS data (location awareness), and the physicality of gestures. These can be used to refine the experience, anticipate needs and deliver options that are contextually relevant.

The most effective mobile applications act as extensions to existing web or desktop apps, not as stand-ins until the user can get back to a "real" computer.

The music of Mozart was not a stand-in for Gregorian Chants

So back to the David Byrne Ted talk; the music of Mozart was not a stand-in for Gregorian Chants performed in Gothic cathedrals. The musical styles were completely different to take advantage of the unique aspects afforded by the context.

The same is true with user experience design across different devices. The interface enables unique and valuable behaviors that can engage users in completely different ways. Whether it is a fit-in-the-palm-of-your-hand smartphone, a gesture-based tablet like the iPad, an instrument control interface like a fuel gauge, a desktop SaaS application or a speech-recognition-controlled security system, each context offers unique opportunities and the user interface should evolve accordingly.

This year Catalyst has seen a significant shift in areas of practice and the kinds of applications and interfaces we are engaged to develop. Part of this reflects changes in our own areas of interest, in particular, our work to support and develop sustainability initiatives. But I believe the shifts area reflective a larger move in the industry itself.

Compared to the last several years we have seen dramatic growth in the demand for application design services in sustainability and health care. There has also been continued growth in specific delivery styles of applications, such as SaaS and RIAs.  Desktop apps growth is relatively stable and flat, except in the area of health care, where this is an uptick in growth.  None of this is too surprising.

More interesting has been a rapid surge in interest for mobile application and gesture based interface design, as well as an increase in the requests for instrument control interfaces (perhaps reflecting the growth in embedded processors and remote monitoring).

For my own conceptual understanding of these trends I created color-coded matrix that shows the high growth areas relative to the lower growth areas.  It presents a heatmap-style view of application design trends with red representing hot areas and blue representing cool areas.

For most organizations, the writing is already on the wall - business applications are moving to the web as Software-as-a-Service (SaaS), enabling companies to accommodate a distributed and mobile workforce. Typically mobile has meant laptops. But as users become accustomed to web-based business applications, companies will will increasing adapt their mission-critical SaaS applications for handheld devices such as the iPhone and Blackberry, or smartphones that use Microsoft, Symbian, Palm or Android mobile OSs.

In a previous post, I wrote about best practices for designing enterprise SaaS applications for a diverse set of devices with variable screen real-estate, input devices, processor speeds and server access speeds. Tracking on these principals ensures that a SaaS implementation delivers an optimized business solution no matter whether the user is at their desk, at home, in a hotel, or waiting in line at Starbucks.

Below I have catalogued some of the recent SaaS offerings on mobile devices. End users will be the ultimate judge of their utility.

This list is not intended as a comprehensive cataloging by any means. But it does make it clear that mobile SaaS has established a beachhead, across a range of horizontal and vertical markets. It is an area in which we are actively working as a company and something I find particularly engaging.

The iPhone 3G and 2.0 software were released last week. As I perused the new App Store it struck me how much the iPhone and what it represents, will impact the strategy and design of web and SaaS applications at the enterprise level.

The iPhone is just the very visible beginning to an infinite variety of future form factors for internet-connected devices and applications.  There will be gesture-based iPhone clones of various sizes, tablets with or without keyboards, multi-screen large displays, MS “surfaces”,  as well as new laptops and desktops.  What this means for enterprise application design is that you cannot count on the guaranteed luxury of known screen real-estate, input devices, processor speed or server access speed.

Diverse form factors mandate particular strategies for the design of Rich Internet Applications (RIAs) and SaaS. The principals are not new.  But they are worth re-stating. Each point would be worthy of a dedicated blog entry, but in this post, I am only going to briefly point out a few.

Identify the high value scenarios, simplify business process and validate this with users

It is more critical than ever to identify and model the scenarios that are of highest value to the widest set users.  Then ensure that these scenarios/workflows are prominent in the software, easily understood, and require the fewest number of steps to complete. This likely also involves analyzing your business processes and streamlining them. The result is not a stripped down application - but rather one that is more refined, prioritized and elicits greater productivity. On smaller, low powered devices, the UI design should enable users to accomplish the high-value tasks in very short time. On larger devices you have the luxury to add in more options - but only when it makes sense.

Salesforce CRM for iPhone - high value tasks, integrated with email, phone and maps

Develop componentized, contextual interfaces

On-premise applications are typically dominated by the Windows OS desktop metaphor with drop-down menus, tabs, tables, combo boxes, modal windows, etc.  They require a lot of screen real estate and cram in a large number of options and settings to accommodate every imaginable choice and feature.  Applications on the web or mobile (where performance is constrained) need to surface just the components and data that are necessary for that device, at the moment.

Use agile design techniques to produce meaningful prototypes in a very short time

Internet-connected devices need to adapt to user feedback, new technology and real-time monitoring of user behavior (i.e. you can track what works and what doesn’t).  Agile development processes let you iterate quickly.  By using componentized design and user experience elements, you iterate prototypes with little wasted effort and are able to adapt to change throughout the development process.

Get your conceptual models right

Because you don’t have the real estate for sophisticated online help, or guaranteed ability of the mobile user to contact support, you need to make sure that users have the right conceptual models or previous experience models that users relate to high-frequency or high-value tasks. This will minimize training and support, and maximize adoption.  Validate with representative users.

Plan for information sharing and social media (aka Web 2.0)

Users on an iPhone are by definition, working on a communication device.  More broadly stated, user working on the web are likely involved in or familiar with some form of social interaction. Design SaaS and web applications to take advantage of the easy ability to share information.

Design for accessibility

People usually think of designing for accessibility as something for the visually or aurally impaired. But when you design for accessibility, you are by necessity also designing for devices that are resource constrained. Design for accessibility and you achieve several goals at once.

There are certainly many more strategic and design principals that I could cover. These are just a few that immediately jumped out at me when looking through the App Store.  What is clear, is that any enterprise developing a new web application or SaaS solution, must have a strategy to accommodate a wide range of dispersed users using a diverse range of devices.