,

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.

, , ,

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

maps-api
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.

, ,

Mobilizing Your Organization’s Web Presence

blog-pic-mobileapp

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.