our ideas, inspirations, and innovations

Nine Things I Love About Paper Prototyping

You wouldn’t expect mobile developers to spend a lot of time using pen and paper. Shouldn’t we be on the cutting edge, using lasers and cyborgs to speed up our design?

We are on the cutting edge. But sometimes that just means we’re using scissors.

That’s because paper-based prototyping is an important part of our design process. Paper-based prototyping is just what it sounds like: designing mockups of mobile apps using paper and pencil. Designing this way has real advantages over designing on the computer, with the perennial favorites “time and money” at the top of the list.

How can designing on paper possibly be state-of-the-art? Let me explain.

• It’s fast and easy. With mobile interfaces becoming more sophisticated, there’s often no time to build refined prototypes of every permutation of every screen in your interface. Working on paper allows you to create mockups in a matter of seconds.
• It’s cheap. No complex UI modeling software is required; no labor hours are spent coding or working in Photoshop. All you need are paper, pencils, and ideas.
• It’s focused. Working on paper keeps everyone – developers, designers, and clients – focused on functionality, not looks. When you’re working on Post-Its, it’s impossible to get distracted by your app’s “look and feel.”
• It encourages collaboration. Try gathering 10 people around a laptop to brainstorm. Hmm. Now gather 10 people around a table, show them your drawings, given them some paper and sticky notes … and watch the ideas start flying.
• It stimulates creativity. If you were designing a logo, you wouldn’t start in Photoshop. You’d probably start by sketching, evolving various ideas naturally before you commit them to pixels. Prototyping on paper opens creative doors in the same way.
• It encourages robust usability testing. Sometimes, a UI isn’t tested thoroughly because it’s just painful to design over and over. When you work on paper, you’re not hung up on time invested in creating tons of PSD documents. Revision is fast and painless.
• It gives insight into usability. Watching people interact with your drawings is totally different than emailing them a PSD file and getting back their notes. You can actually watch their minds work – see how your design fits or blocks their expectations.
• It’s nonthreatening. Using paper is great with clients. It takes development out of the realm of geeks and into their hands. They can add, delete, or reorder screens, for example, just by moving pieces of paper around.
• It’s fun. There’s something tactile and satisfying about working with paper. It appeals to nearly everyone. And if you really want to bring out the kid in your coworkers, arm them with scissors and glue-sticks. In this case, a childlike approach to work is a good thing.

 
Paper prototyping can’t identify every UI issue. And sometimes you have to get into the development phase to really see how your interface is going to fly.

But in many situations, working on paper is a great way to enable low-cost, highly creative design.

The Ever-Amazing WordPress

You’d think that using a certain app over and over might get boring. That you’d hit the limits of what it can do and where you can push it. Be ready to move on to something else.

This hasn’t happened yet with WordPress.

This amazing app got its start as a humble blogging engine back in 2003. It’s since become one of the most predominant content management systems used to manage modern websites. It’s used by literally millions of folks—from individuals to interactive developers to huge corporations. And the sites that are running this framework are seen by tens of millions of people every day.

In fact, we’ve found that as WordPress has grown in flexibility, it can be used to manage nearly any type of website or application. We’ve used it to manage Facebook apps, to create social networks, to build mobile web apps and ecommerce sites … and more.

In my opinion, there are several elements that make this radical usability possible.

First is WordPress’s extremely flexible theme and plugin systems. This combination allows for a huge range of sites to be managed via WordPress.

On top of this, WordPress allows custom site development to occur separate from the core framework files. This allows us to apply WordPress and plugin updates as they occur—giving the site increased stability and security.

In addition, WordPress is built on PHP and MySQL and is open source under the GPL license. This means that clients fully own and control their site, including the core CMS framework. There are no outside vendors, license fees, or hosting requirements involved, outside of the basic technology required.

It’s also cost-effective. Using WordPress saves clients time and money because we don’t have to write every piece of webware from scratch. Instead, we can utilize the ingenuity of a worldwide network of developers and designers who contribute to WordPress and its many plugins.

I continually find amazing uses for WordPress. And I love the ease with which I can create custom plugins and themes to fit nearly any site or application a customer desires. It’s great being part of the active developer community behind WordPress, and I look forward to finding new and fun uses for the platform well in the future.

Optimizing Your Website for Mobile Devices

Recently, I’ve been surprised to find that some of our customers are still uncertain about the value of optimizing their website for mobile.

It’s been a trend for a few years now. But let me throw down two statistics to explain why it’s increasingly important.

• Today, 15 to 30% of all searches are done on mobile devices.
• By the end of 2011, 50% of Americans will have a smart phone. 

In other words, a ton of people are already trying to search for you via mobile. Those numbers are only going to increase. And before your website can function effectively as a mobile website, it must be made compatible with mobile devices.

Atomic can accomplish this task for you, a lot more quickly than you might think. Ready to optimize your site for mobile? Here are a few points to keep in mind.

• Simplify. Make the layout simple. Complex graphics and unconventional navigation are lost on mobile users. What are the few critical pieces of information your customers need? Include that. Forget about everything else. 
• Resize. Make sure navigation links and buttons are large and easy to find. Your thumb isn’t as accurate as your mouse. 
• Prioritize. What content do you want your visitors to read? Make that the first thing they read. Users are much less likely to browse on mobile devices. They want to find the information they’re looking for immediately.
• Technify. You’re creating a mobile site. So maximize the capabilities of mobile devices with features like “Click to Call.” Click-to-call lets a user press your phone number and instantly place a call —rather than having to exit their browser function, call up the phone function, and enter your number manually.
• Streamline. Whether your goal is to increase phone calls or sales, make this task as simple as possible. If you want a phone call, break the process into three quick steps: provide a brief description of services or why a customer should call, offer an incentive for calling, then show the phone number (using click-to-call). If you want a sale? Provide a brief description of the product or service, let your user click to the product page(s), and then click again to checkout.

If you want to see the difference between an optimized and non-optimized site, compare Home Depot vs. Menards, or Smashburger vs. Applebees. The difference in usability is huge.

So ask yourself: Which way do you want your site to look?

Bringing Google Maps API to Your Website

Google Maps’ APIs are one of the most functional tools out there for businesses. They let you embed Google’s vast amounts of location data in any website you create, whether it’s desktop or mobile.

The newest versions of the APIs have been improved to load fast on mobile browsers like the iPhone and Android. They’re also highly customizable. That means you can take a standard Google map and make it reflect your own brand identity. You can change the colors, incorporate animation, remove or add data, and add custom icons and text labels.

Google Maps APIs in action

Here’s a map that we created for Hageman Trucking, for example. You’ll notice that we laid a transparent map of 17 Ohio counties on top of a standard Google map, showing Hageman’s service areas. We also created custom icons (miniature Hageman logos) showing the company’s two locations.

Another example is what we did for Koehlke Components. We created a streamlined map of the United States showing only state names. States turn a Koehlke red when you mouse over them, and when you click on a state, a text box pops up showing that state’s sales rep. If you click on “Contact Your Sales Rep,” you can email your rep right from that page, without jumping to Outlook. We used jQuery to create that special feature.

For the developer

From the developer’s perspective, the Google Maps APIs are pretty awesome. Unlike other APIs, they are nearly always fast and available. That makes a difference, because if you embed a third-party API in your customer’s website – and that API is unreliable – nobody’s happy. Not your customer, and not their customers.

Typical of Google, the documentation for the APIs is very user-friendly. What you can do with them is pretty much limitless. There’s also a huge community surrounding each of their API platforms (Google Maps, Google Earth, Google Charts, etc.). So there are a ton of other developers writing about how to solve certain problems they run into, and offering up new ideas.

Finally, because this is a JavaScript-based technology, it works just as well on mobile devices as it does on a desktop. And that’s when you need a map most, anyway – when you’re mobile.

Mobile Applications vs. Mobile Formatting

There’s a big shift in how people are shopping these days. “Let me Google that and see where I can buy it,” or “let me find a discount on Coupon Sherpa” are showing up in everyday conversation.

And people are searching for these things on their smart phones. If you want a chance at capturing these potential customers, you need to cater to their on-the-go search habits. That means you need a mobile website or application for your company — or both.

If you’re wondering about the difference, a mobile website is a condensed version of your site, optimized for viewing on a smart phone. The content and navigation are simplified and the images are minimized.

A mobile application is a self-contained program that runs on a smart phone. For example, Starbucks offers an app that lets users find a store using GPS. Chipotle has an app that lets you build, order, and pay for a burrito right on your phone.

If you haven’t thought about what kind of mobile presence your business needs, it might be time. Here are some questions to get you started.

• Who’s your audience? Are they new customers, who might need to find you using search? Are they loyal customers who might appreciate a special app?
• What are your goals? Sites and apps can have radically different purposes. Are you trying to build brand awareness? Provide information? Encourage a call or a purchase?
• What functionality do you need? Based on your goal, what functionality is required? For example, do you need to track and store a user’s GPS info? Does the app need to be usable if there’s no Wi-Fi or network signal? Does it need to run heavy animation?
• What device do you want to run on? iPhone? Android? Blackberry? Unfortunately, each platform has a unique language and process for pushing out applications, and its own internet browser. That means a site can look great on an iPhone but awful on a Blackberry. On the other hand, a site that works well on all platforms may need to have a generic look and feel.
• What’s your budget? As always, you may need to balance your goals and budget. Maybe there’s a strong business case for moving your company into the mobile space – so it’s worth it to stretch your budget. Or maybe mobile access isn’t critical for your business. In that case, scaling back on both budget and goals makes sense.

As with everything in business, there’s no cookie-cutter solution. Mobile apps and sites have awesome potential — but you want to think about what’s right for your business before you take action.

Mobilizing Your Organization’s Web Presence

The idea that you need a PC to browse online is nearly as old fashioned as, well, the Old Fashioned. Now more than ever, people use their mobile devices to do everything—from finding the recipe for a classic cocktail, to ordering repair parts online, to writing cell phone novels.

What’s more, U.S. sales of AT&T-based iPhones are expected to reach 21.3 million by 2011. With those numbers in mind, making your content mobile-accessible seems less of an option and more of an essential, ongoing consideration.

At Atomic Interactive, we help customers adapt their web content to the mobile world in a variety of ways:

• Create an application that has value to your audience. Coming up with a concept for your application is a great place to get started. Ask yourself a few questions: “What do my clients want?” “What struggles are they having?” “Is there something fun I can share with my customers to get them excited about my product or service?” We can guide you every step of the way from concept to completion of your application.
• Fitting your site to its users. With mobile-formatted websites, we use code to sniff out your clients’ browser preferences based on the device they use to find you—whether it’s an iPhone, iPad, Android, Blackberry, or mini Netbook. Your content is then displayed in an easy-to-read, mobile-size format, with the most important information up front.
• Using the latest technology. Since websites are much easier to update than applications, we’re using the latest web-development technology, such as Ajax, HTML5, and CSS3, to make functionality extremely user friendly, device-specific, and even downright sexy. We know how to optimize graphics to display well on both large and small screens, for example—so we don’t shortchange traditional users or overwhelm mobile users.
• Helping you navigate the “app” universe. Apps—the quirky, convenient applications that present information in personalized ways to mobile device users—are a great way to get multi-channel exposure (e.g., at the iTunes Appstore or the Android Market).

But how do you know which options to invest in, and whether they’ll attract customers? Our experts can help you review the online marketplace and make sure that a mobile application adds value to your brand and is useful for your customers. After all, even if you have a great app, if it’s not properly marketed, your target audience may not know it’s available.

We build sites and applications using clean code that prevent disruptions that can send mobile users running to the virtual competition. We also help prioritize your information with the mobile user’s briefer browsing habits in mind. And we always test our work from the most popular mobile platforms to be sure the content views correctly.

Want to learn more about maximizing your Web presence? Use your mobile device to find us online, send us an e-mail, or ring us up the old-fashioned way.