On September 15th, Roundarch participated in the launch of Microsoft’s Internet Explorer 9 Beta. As most of the industry is now aware, IE9 has been designed from the ground up by Microsoft to be the most compliant HTML 5 browser available, with a lot of additional features including a new, simplified user interface (sans browser chrome), and hefty performance improvements thanks to real hardware-backed graphics acceleration and a fully rebuilt JavaScript engine.

Because of our experience with Rich Internet Application design and development and our existing expertise with HTML5, Roundarch was approached by Microsoft to design and develop a demo application that would leverage the new features of IE9. Microsoft suggested that our team partner with OneRiot, a realtime advertising service, which archives and makes searchable news, videos and blogs being discussed on the social web, all ordered to reflect current social relevance.

Working with Microsoft and OneRiot, we decided to develop a purely conceptual trending news viewer application with the goal of demonstrating both form and function, leveraging a variety of technologies to make a rather complex experience seem deceptively simple, fast and useful.

The Demo Concept

The concept of the application is quite simple, and I’ve included videos below to help you visualize things.

The application allows a user to view current and historical trending news topics (and associated links), as these topics are made popular on social networks and across other Web sites. Not only can users view trending content, but do so in a manner that provides a way for users to visualize changes in the trending topics over time.

Because of IE9′s strict adherence to specifications, the application is 100% standards-compliant HTML5, but still demonstrate user experience patterns that have historically only been possible by leveraging a multimedia-enabling plugin.

The OneRiot “AdBubbles” demo represents trending topics as translucent, physics-driven bubbles – for which color represents whether or not a trend is heating up or cooling off, and which with their size represents the total number of online articles/posts that referenced that trending topic.

To help the user visualize the change in trending topics, the “bubble tank” refreshes itself once each minute, loading the most current trending topic data which causes a visual transformation of the size and color of the currently displayed “bubbles”.

Rather than trying to explain the full application in writing, let’s just take a look at the video clips:

Application Loading

When the application loads, the bubbles fall in from the top. The color of the bubbles represent whether or not the trending topic is cooling down or heating up (cool = blue / hot = red). The size of the bubbles represents the amount of online chatter.

Digging Into a Trending Topic

The bubbles in the user interface all represent trending topics from the RealTime Web. Double clicking a bubble will load a modal window with the latest article results from OneRiot’s partners.

Ignoring and Following Trending Topics

Since trending topics will refresh over time, and a user might want to view a topic in the future that is no longer part of the trends, we’ve allowed the user to drag or toss bubbles at either the “following” or “ignore” containers that are present on the screen. Should a user choose to follow a subject, it will remain available for them to recall the latest OneRiot partner articles. If a user doesn’t care about a particular trending topic, they can toss it towards the “ignore” container, which will prevent this topic from refreshing within the user interface.

The Timeline Viewing Trending Topics and Changes Over Time

To make the most out of the trending topics visualization, we thought it important to be able to view the changes in popularity for topics over time.
The 24-hour timeline allows a user to navigate across time to view how the trends have changed. When a user clicks on a new point in time, the application will compare the current trends with the historical data, and the bubbles on screen will transform accordingly.
Should the topics not exist in both data sets, they will simply dissolve and disappear from the interface and new topics will drop in from above to fill the gap. Should topics exist in both data sets, the bubbles will change size and color, based on their popularity and trending meta data.

“Auto Play” Mode

If the user does not actively use the interface for a set period of time, the software will go into “autoplay” mode. When this happens, the application will randomly cycle through the trending topic bubbles, and display an associated article headline and short description in large typographic text. This is displayed behind the canvas control / physics engine bubble chamber.

The Technology Behind the Experience

I am not going to get too far into the technology here, as Jeff Karova, the lead interactive developer on the project has broken things down in this recent post that discusses the technology behind the demo application.

I will, however, summarize our approach: To drive the user experience, we created an Azure application, hosted on Microsoft’s Azure cloud infrastructure. This application regularly connects to, parses and archives data in Azure SQL from the OneRiot API, which is later accessed by the
HTML5 demo via Web service requests.

There are really two types of data: Trending topics and articles/posts related to them. Each time the application requests a new set of trending topics and/or articles, they are stored in the Web browser’s local database, allowing for an experience that remembers your previous sessions, and gives users the ability to navigate between current and historical sets of data.

The user interface, which relies most heavily on the HTML5 canvas tag, features both a physics simulation to help render the bubbles / trending topics and a timeline component to that gives users the ability to explore trending topics as they change over the course of the last 24 hours.

Introducing the Concept of Time-Release Design

The application also has a very purposeful design feature, that will most likely be taken for granted by users until they’ve had the opportunity to use the application over the course of time. The interface was designed and developed with the concept of “time release” experience in mind.

What in the world does that mean?

Just like it sounds, a “time release” experience is one that becomes more valuable to a user that uses the application over a longer time period. We sometimes use this as a way to introduce novice users to more advanced features within a software application, revealing functionality as the user becomes more familiar with how the software they are using works.

Clearly, this isn’t applicable to all types of software. But for a casual news discovery application… why not?!

The concept works quite well, and the more that you interact with the OneRiot “Adbubbles” demo, the more interesting and valuable the experience becomes.

The application provides a new, unique and experimental way to discover interesting news items. Time and again, we’ve heard feedback from users about how they’ve found interesting content using OneRiot that they probably wouldn’t have found any other way, based on their browser habits.

Some Thoughts on HTML5 and Impact on RIA Design & Development

Working with the great people at OneRiot, as well as with the IE9 team at Microsoft was a great experience. The Microsoft IE9 beta is the most robust and HTML5 compatible browser available for Windows computers, and it’s performance is extraordinary, especially when compared to Microsoft’s previous incarnations of their hugely popular Web browser.

At Roundarch, we’ve gained a lot of experience related to HTML5, as many of the current and recently launched projects that our teams are working on take advantage of the new HTML specification, as well as what is now available using CSS. HTML5 shows great promise, and plays an role as another important tool in the developer toolbox.

There is a lot of talk about HTML5 being the end of other RIA technologies. With our experiences, that doesn’t seem to be the case, as there are many examples where HTML5 just can’t do what other technologies can. In time, as browsers incorporate WebGL and relative technologies as well as the ability to run applications that allow for native/compiled code execution, HTML and Javascript have their place, as do more robust technologies like Adobe Flash and Microsoft Silverlight.

Another consideration for HTML5 for complex RIAs right now must be that developers must still rely on users viewing their applications and content using one of many different browsers. It seems that the competing browser technologies and companies behind them simply can’t seem to align across the board on how features are implemented, and what priorities are in their overall product-feature roadmap. This means the potential for a repeat of 1996 and the original browser wars. This means that the amount of testing and tweaking required for HTML5 RIAs should not be underestimated when planning projects.

HTML5 shows great promise, and the next year or two should be quite interesting as more feature-rich browsers are offered up to consumers and as the HTML5/CSS3 specification continues to mature.

Do you want to know more about HTML5 and how it can be leveraged to create standards-based, desktop-like applications that run solely in the browser? Drop me an email, or reach out to our team at Roundarch.

For more information on Microsoft’s Internet Explorer 9, and to see how it’s helping make a more beautiful Web, check out beautyoftheweb.com.

To learn more about OneRiot, and their perspective on the HTML5 Demo application developed by Roundarch, see their blog post on the topic.

If you want to experience the OneRiot HTML5 Application, it’s online at http://adbubbles.oneriot.com .

Here at Roundarch we’ve been keeping an eye on Kinect (formerly code named Project Natal), the new controller-free gaming and entertainment system that will soon be available for use with Microsoft’s Xbox. The technology behind Kinect seems to be unlike anything we’ve ever experienced and we can’t help but think that it will affect many things beyond gaming.

If you’re not familiar, here’s a little bit of background:

In 2006, Nintendo released a new gaming console called the Wii and it changed the way we play games. As you’re all aware by now, the Wii uses a handheld controller that detects movement in three dimensions. The fact that the game player just holds the device while interacting with the on-screen game made the Wii a very intuitive and easy interface to grasp for people who don’t normally play video games. Thus the Wii reached a wider demographic of grandparents and moms and kids than other more “hardcore gaming” systems like the Sony PlayStation 3 or Microsoft’s Xbox 360. This translated into record sales for Nintendo.

PHOTO: http://www.theconsolezone.co.uk/~consolep/images/nintendo-wii-remote-jacket.jpg

Fast forward to 2009. Sony and Microsoft are still trying to catch up to the Wii. Last year Sony announced an upcoming motion-sensing game controller platform for the Playstation 3. Sound familiar? PlayStation Move uses a handheld motion wand as a device for game play. The game player moves around, while holding the wand, to interact with the game. It has been noted that the PlayStation Move’s movements are much more precise and accurate than the Wii’s, but nonetheless its main mode of input is still a motion-sensing wand. PlayStation Move will be available in North America in mid September.

PHOTO: http://www.videogamesblogger.com/wp-content/uploads/2010/03/playstation-move-controller.jpg

So, that leaves Microsoft. A safe bet would be to guess that they’d enter this market with an add-on to the Xbox bundled with some sort of motion-detecting controller or wand, in a similar fashion to Nintendo and Sony. But here’s where Microsoft has kicked it up a notch… or 10 notches. Microsoft Kinect is an add on to the Xbox, but there’s no motion sensing controllers to hold. You just move. That’s it.

PHOTO: http://www.blogcdn.com/www.engadget.com/media/2010/06/kinetic-e3-product001-rm-eng.jpg

Kinect does full-body motion capture with both vocal and facial recognition and there’s nothing to hold on to. No motion-sensing controller or wand. You just do it. Move your body and the system recognizes your actions. This picks up right where the Nintendo Wii left off. People who have never picked up a gaming controller in their lives instinctively know what to do. See a ball? Kick it. See a dancer? Follow the moves. In addition, Kinect also is a new interface for watching movies and TV, listening to music, and chatting with friends.

Check out this video of Kinect in action.

All of this is accomplished through one simple Xbox 360 add-on device, which has both an advanced camera and a microphone. Kinect will be available on November 4 and there will be 15 game titles at launch. The price has not been announced but estimates are at about $150.

So, what do you think? Is Kinect just a gimmick? Or is it a complete game changer (pun intended)? How could the technology Kinect is using influence our everyday lives?

To quote Steven Spielberg, “This is a pivotal moment that will carry with it a wave of change, the ripples of which will reach far beyond video games.” What changes do you think we’ll see in the future as a result of this new technology?

Will we no longer need 3 remotes to control our entertainment center? Maybe everything is voice-activated. Moving beyond the television, do you see a future where we can control many kitchen appliances, our stereos, heating and cooling controls, and home security systems with voice and face-recognition and gestures? How about business presentations? Making a swipe motion to go to the next slide would be pretty cool. Or, what if we could virtually whiteboard while collaborating with remote offices? What if our cell phones had motion sensors? We can imagine a world where the cell phone detects sign language and translates it to text or audio. What if the military could practice field operations at home before going on a mission? Finally, think of all the implications in the retail and advertising space. You could “try on” clothing from the comfort of your home using a virtual replication of yourself on your television and an online catalog from your favorite clothing store. Maybe waiting for the bus isn’t so boring when all of the advertising on the bus stop is interactive. The possibilities seem limitless.

Last Month we had the chance to once again work with the Chicago band Wilco on updates to the successful iPhone application.  The updates gave us a chance to improve some of the features already in the application and add even more.  Wilco has always been dedicated to using new technologies to help the band connect to their fans and these improvements strengthen that connection.  The new version features an all new roadcase with live concert recordings from the Boston, MA and Madison, WI performances.  We were able to improve the photo and poster galleries and add a section dedicated to the upcoming Solid Sound festival.

I had a chance to discuss the app at last Month’s Mobile Monday Chicago Mobile Demo Showcase held in Chicago on June 21.  The presentation focused on some of the updated features of the app and highlighted the cloud based data integration with wilcoworld.net, the official Wilco website.

In addition to the iPhone app updates we also worked with the band to update the website’s discography using the latest HTML5 audio technology.  You can now enjoy the bands discography on your iPad and other modern web browsers like Chrome and Safari.

Stay tuned for future updates coming very soon that will enhance the Solid Sound section and allow you to listen to the concerts and album tracks while multitasking.

Despite 30 years spent automating financial transactions, financial institutions offer customers no more financial insight than when people used passbooks and accordion files.  The first institution to buck this trend will redefine the industry.  And there is no guarantee that it will be a bank…or credit card company.

Read the full American Banker article here.

Read the full Story here.

Working on my first iPad app has really forced me to think about design, usability, and user experience issues that creep up that are unlike any platform I have ever worked on. The iPad is not like a desktop app. Having only briefly worked on an iPhone app before, I think that it’s not all too dissimilar but there are even more issues to think about.

No it’s not a laptop! (in your best Arnold impersonation).
Because of the size, people might be inclined to think that this device is like a laptop or a netbook. Nothing could be further from the truth. If you are used to building rich desktop apps (like I am), you will be used to many conventions.

Come on puppy, Rollover
One convention is hover states or rollover states. The iPad being a touch device does not support the concept of hover or rollover states. You either touch a button or you don’t. You can not interact with a user interface (UI) control such as a button, a list, or textbox without activating or taking action on it.

I’m all thumbs.
Another convention of Web 2.0 app is to cram tons of functionality in the form of small buttons or icons. This doesn’t work all that well on a 10″ screen when your index finger is about half an inch in diameter. You just don’t have the accuracy that you get with a mouse pointer. Thus apps need to think about negative space and larger surface area for buttons and icons.

What’s Your Orientation?
For most people interacting with computers/laptops nowadays, it’s taken for granted that you have a widescreen monitor. Many web apps are still designed to fit 1024×768 resolution but more and more sites resize the content and layout dynamically to handle the extra real estate. Not much thought however is given to the orientation of the screen because it never changes. The situation is a bit different on the iPad since the screen size is a fixed 1024×768 which isn’t all that much nowadays. Well designed iPad apps commonly use a split view UI when presenting information in landscape mode and switch to a single detail view in portrait mode because of the smaller horizontal space. Which brings me to my next point.

No it’s not a giant iPhone.
Many people dismiss the iPad as a giant iPhone. While it certainly looks like a iPhone with a pituitary gland problem, it doesn’t have to act like one. The iPhone screen is cramped. 480×320 means you can really only show and thus focus on one task at a time. Most iPhone apps revolve around the concept of viewstacks. If you want to see a list, that’s a view. If you drill down into that list, you get to see the details of that list but you can no longer see the original list. For that you have to hit the back button. The simple reason is because there’s just not enough room. The iPad doesn’t have the same limitation. The extra space lets you display both the list items and the detail view at once.

Input Overload
Your webapp or RIA probably never had to worry about what happens when users click on multiple things simultaneously. A mouse is a single input device. You can only do one thing at a time with it be it opening a dialog, clicking on a listbox or pushing a button. A device like an iPad can handle multiple touch points at once. That also means your app could potentially get into a state you never anticipated. Take for instance this wonderful fish pond app Pocket Pond. Touching the water makes the surface ripple. Touching the water with 2 fingers makes the water ripple from two points. Now try it with 10 fingers, and really shake the water.

These are just some of the considerations when designing for the iPad which I’m sure will apply to other tablet devices.

Jeff Maling, President and Chief Experience Officer, and Geoffrey Cubitt, President and Chief Technology Officer, of Roundarch talk with Vidya Drego from Forrester for her Q&Agency blog series.

Welcome to Q&Agency! Each week, I get to talk to agencies small and large and get to hear (in their words) what differentiates them and the experiences they create. To help bring some of that information to you, I’m showcasing an ongoing series of interviews with small to mid-size interactive and design agencies. If you’d like to see your agency or an agency you work with here, let me know!

On May 5th, I talked with Jeff Maling the President and Chief Experience Officer and Geoffrey Cubitt the President and Chief Technology Officer of Roundarch. Edited excerpts from that conversation follow.

Forrester: Tell me a little bit about your agency?

Jeff: Roundarch was founded in 2000 by Deloitte and WPP. At that time, the idea was to bring together the technology and program management skills of Deloitte with the creative skills of WPP to tackle large web problems. Over the past year or more that has translated into large digital problems of many types including mobile, touch screen, etc. But for the most part, we’ve stayed true to the vision because we’re specialized in large-scale digital solutions for fortune 500 companies, the government, and large international organizations. We have about 220 full-time employees primarily in New York and Chicago, smaller offices in Denver and Boston, and a virtual office in DC (where we mostly work in secure locations). Like any good agency or consultancy, we also have a few nomads who refuse to move into one of our offices.

We create breakthrough experience design and build the technology associated with it. To do that, about 50% of our work is focused on strategy and design, and 50% is focused on technology. Our people divide out the same way. We check that math a few times a year, and it always breaks out like that and we strive to keep it at that balance. It’s our core belief that the interplay between design and technology is essential to digital.

Geoff: That’s something we’re religious about. On most engagements, we try to lead both sides of that, sometimes we work on one piece or the other, but we’re always involved in the interplay. It delivers better results. If it looks cool but doesn’t work, it doesn’t solve the business objective. If it’s a great technical solution but no one can use it, it’s not good for the business either. You need both of those things to work together.

Forrester: What is your elevator pitch?

Jeff: We design and develop digital solutions for the world’s largest organizations. That includes customer-facing web sites like we’ve created for our clients at Avis and HBO; complex B2B sites for global financial services firms focusing on wealth management, custodial, credit card services, trading apps, etc.; or an app that tracks assets for the Air Force. We also create mobile experiences for clients like, Avis, HBO and the band Wilco. We’ve made the transition to all things digital. We’re currently working on an executive dashboard surface experience for a client that will utilize a large touch screen.

Geoff: We’re also working with Tesla on their next-generation touch screen infotainment dashboard display that will be connected to the Internet. So we’re expanding beyond just the web to all digital tech interfaces but generally leveraging web or internet technologies.

Forrester: What are the three key things that differentiate you from your competitors?

Jeff: 1. We take a very strategic approach to problems. We have our own maturity model and strategy methodology that we use to create an entire multi-year strategy for clients. We don’t often work only on a campaign. 2. We have some of the deepest user experience capabilities in the field focused on complex applications. We deal with issues like taxonomies and metadata, using methods and principles like rigorous user testing and interaction design. 3. We work with strong enterprise-class technology. Most of our projects result in hardworking enterprise solutions where there’s a core interface that users and customers interact with that’s tied into complex back-end systems. In these instances things like security, scalability, and performance are all considerations when thinking about how to deliver best experience and value for the business. 4. If I can add a fourth…we’re built around complex relationship management – probably from the heritage from Deloitte and WPP. We work with really complex organizations like financial services companies and the Air Force. We are really good at managing in those environments. They can be frustrating, slow moving, and require a lot of consensus building, but we’re really able to get things done in large, complex, bureaucratic enterprises. We actually deliver on solutions where they’re normally challenged to deliver successful outcomes. They want someone not just to design cool stuff but to also have the knowledge to get it done in their environment.

Forrester: Why is your agency well suited to deliver a great customer experience for your clients (and their customers)?

Jeff: There are two reasons really. The first: We do mainly our own customer research – this is not dissimilar to the Forrester approach. We do our own interviews, inquiries, create personas, design scenarios, the whole bit. We follow all the typical market trends, but we do a lot of deep user research.

Geoff: It’s a very user-centered design process; one that really begins with a lot of user study.

Jeff: The second is that we’re passionate about concept design. We like to open the aperture really wide on a problem and think about a long-term solution that could solve the client’s problems for many years. Then we make it bulletproof by testing it, getting feedback, trying to break it, bringing in technology teams to make sure it’s buildable, scalable, etc. Finally we flesh it out in detail and scope it appropriately – usually in a multi-phased roadmap. Given budget and timing, we decide what the first release will look like and then how subsequent releases will allow us to achieve our vision while continually learning from what we release.

Geoff: We’re big on having an associate creative director, a customer experience lead, and a technical person at the table during concept design. The multidisciplinary approach leads to the best solution. It’s not just technically constrained design; it’s sometimes even technology-led because they know the capabilities of the technology best. Both technical and experience design teams push and constrain each other. That’s important. Our people are deep specialists but we collaborate often and create an appreciation for each others’ skills.

Forrester: What’s it like to work at Roundarch?

Jeff: We have a lot of people who’ve been here for a long time and a lot of boomerang employees that have returned to Roundarch. I think that speaks to the great culture we have here.

Geoff: That culture takes constant gardening. We’re always trying to empower people. We’ve got smart people that are passionate and work well together. They work for big name clients, do cool projects, and are fun to work with. We spend time nurturing all elements of that by getting feedback from employees, understanding what keeps them stimulated and trying to keep that as the core part of our culture.

Jeff: We give out Core Value Awards in four areas that represent our culture: respect, client satisfaction, focus, and results. Respect is a huge one for us. We don’t want to be an elitist firm that values only one type of skill set. We’re also very focused on clients. We don’t have office heads or hierarchy outside of client relationships to help keep the client at the center of our structure. Of course we want to remain focused on solving specific problems for clients. And finally, results – this is not just external results for clients but also results internally: are projects profitable, successful, etc. We’ve been giving the awards for a long time, and we find it helps set a tone for how people act in the organization because they know what we value.

See the entire post on Vidya Drego’s blog.

Read the full story here.

Don Rescigno, the director of marketing for NYSTROM Herff Jones Education, has written a post on the Official Google Enterprise Blog about Nystrom’s partnership with Roundarch and how together we are changing the face of what today’s classrooms look like with the creation of StrataLogica.

StrataLogica will be featured at Google I/O May19-20 in San Francisco.

I recently read an article exploring the idea that new tablet devices, including the iPad, will create a greater demand for SaaS and cloud storage.  This is an interesting perspective to me because I don’t think we’re too far away from the day when “iPod as a service” becomes a reality and there is no more need for DRM.  Paying $9.99 a month for listening to any song ACROSS any compatible device you have, and having the option not to “own” any of the albums or songs sounds good to me.  Rhapsody has an early model in place already that does this to an extent (it supports a few devices, but not ANY device). With the continued development of “As A Service” business models and frameworks I can’t think of a reason why iTunes or a future “Google Tunes” cannot do it tomorrow

What used to be called Storage Area Networks a decade ago and was intended to make enterprise storage more robust and accessible is now commoditized and called the Storage Cloud. Computation is also becoming an accessible commodity with the Elastic Compute Cloud. Access to applications and storage is now more consumer friendly and unlimited. If you think about it we’re in a sense going back to the Mainframe days. Only now you can access a “mainframe” with theoretically unlimited computing and storage power, for personal use, through your phone, sitting on a train and not just for dedicated scientific or business applications. Everything is becoming more seamless and transparent. For once we needn’t worry about operating environments, compatibility, or file formats. We can now focus less on the Information Technology and more on the Information.

The defining characteristic behind the adoption of any pervasive computing enabler (SaaS being the front runner right now) has been the degree of mobility of the associated commercially available User Agent (iPad, iPhone, HP Slate, Android devices like ICD Gemini etc). While it can be argued that these devices are still in their infancy, if Moore’s law is anything to go by, we’ll see significant improvements in associated enabling technologies, specifically connectivity and bandwidth, as these devices gain market share. As the enablers do more the devices themselves need to do less without overall loss of functionality. In other words pretty soon you will find fully functional clients getting smaller and thinner simply because the technology has matured to the degree that storage and computation is not a constraint anymore. Just so long as you are connected to a pipe that’s fast enough to shuttle data back and forth without latency (IEEE 802.16 anyone?).

Taking the idea of smaller sizes and integrated capabilities a bit further I can’t help but imagine what new possibilities nano-scale technologies and quantum computing will offer in the near future. For those more inclined towards theoretical computing foundations there seems a greater push to look beyond the traditional Church-Turing conjecture that all computing technology based on registers and pointers is arguably inspired by. What seemed like sci-fi fantasy 20 years ago is in our pockets today. Mark Weiser’s Smart Device is now a reality, the internet of things is probably not too far away. By all indications could “Hyper-computation” be doable in 20 years or less? Regardless with the advent of full virtualization, on demand licensing and increased bandwidth we’re in for some good times ahead!