In building mobile sites, you simply cannot optimize for every device/browser/OS out there. So before you can think about a test plan, have your client pick their top 5 browsers/OS configurations and screen sizes — based on their scope, product, audience and locale — and shoot to optimize for those. Just like regular browsers, there will still be minor differences here and there.

Help your client narrow down mobile browser/OS configs:

1. Start by viewing their mobile analytics, of course.

2. Determine the scope of their mobile offerings, as well as their audience and locale.

3. Check out DeviceAtlas. Navigate deeper to see specs on each device, such as operating system, screen size, color depth, etc.

4. What are the top mobile configurations, you ask? Well it largely depends on locale, what’s new, etc. etc. They change frequently, but here’s a relatively current list of Top 10 selling smart phones spanning more than six continents and 50 countries.

The testing side:

Note that a good bit of testing can be done without an emulator or mobile device. Depending on the scope of the site, of course, it is possible to do most of your functionality testing on a full-size browser. Then move to the mobile to focus on design elements/rendering, formatting, usability. Don’t forget to check both portrait and landscape modes.

1.  Before writing your test plan, familiarize yourself with W3C Mobile Web Best Practices and Mobile Web App Best Practices. These are looooong, I know. But at least skim them to get a feel for some of the high-level best-practices. (At some point, I want to take a stab at whittling those docs down for a quick-hit view.)

2. On a full-size browser:

• As far as running automated tests, such as checking links, you can run your normal link validator. I use Web Link Validator and InSite.
• As usual, enable your JavaScript error notifications.
• Use your regular tools for validating analytics as well as dev and design elements (though not necessarily browser formatting): dev toolbars, Fiddler, Firebug, etc.
• Test your site for mobile readiness: Visit mobiReady or W3C and plug in your URL or file (on W3C) and go. They list errors in order of severity, error location and best practices around each error. Both are very user friendly. mobiReady even spits out estimated speed on WiFi, 3G, GPRS (what about EDGE?).

3.  Emulators: I recommend the actual hardware if you can get your hands on it, even if you have to ask people around the office to use their mobile for a while. If you must use an emulator, I’d start by simply searching for emulators on the product maker’s website. i.e. Go to Apple and search for iPhone emulators. Here are some links to emulators by manufacturer. As a last resort, there are generic emulators aplenty out there.

I haven’t done this yet, so I can’t really speak to it … but it looks interesting, and I intend on giving it a go. Test mobile sites using Firefox extensions.

Finally, remember that mobile sites are often a very pared down version of the full site, for good reason. Utilize user agent sniffers to determine if the user should be auto-directed to the mobile site, but always give them the option to view the complete site in case that’s what they prefer.

 

The mobile computing revolution has produced a multitude of products and new ideas about how we interact with these devices. I’ve explored many of these approaches from stylus to rollerball to touch-screen functionality. Of all of these approaches, multi-touch functionality is the most powerful, and I think the most likely to become the standard for mobile interaction and beyond.

I was recently tasked with creating iPad desktop icons for some of our clients’ websites and began to wonder how this type of device — and multi-touch in general — would impact web design in the future.

Up until now, website navigation has been done exclusively with a mouse. As users explore a site with a mouse, we look for clues to determine their intention and then provide content or interactive events to help them to navigate. Designing for such interactions has produced a library of elements such as rollovers, dropdown menus, underline text links, tool tips, etc.

How will these behaviors transfer to multi-touch? And how will user experience diagramming (wireframes) adjust to handle it?

Some interactions such as two-finger scrolling or two-finger pinch-zoom are fairly intuitive and have been widely adopted on mobile devices; however, without the mouse, we more or less lose the concept of intent as a “trigger” for interaction events. We can still utilize richer and more elaborate interactions, but must create a type of standardized iconography, which details the type of interaction necessary.

Take for example a tool tip or a hover-state event. You could approach this by forcing someone to call the tool tip with a touch (but not revealing a call to action until the additional content is presented). Repeat visitors may find this inefficient or annoying. You could also approach it with a secondary button for more information. Or you could utilize multi-touch by allowing the user to see additional content with a two finger reverse pinch to “open” the content. You could identify this action with some iconography in the corner of the element.

I’ve also considered global navigation, which previously has been the dominant element at the top of every website. A nav being a utility to access content, I always strive for ways to minimize its presence and give content the spotlight. For multi-touch, I considered the option of accessing a nav from anywhere on the site through a single global gesture such as a three-finger reverse pinch. Make the gesture and your options are available to you at the location of the gesture.

From a UX perspective, I’ve thought of iconography that could be used in wireframing to create a shorthand for these multi-touch gestures: simply a number representing the number of digits with directional information about the motion involved for the gesture (see image above). I feel this could be used to outline functionality and could be included in final design elements as well.

These points are by no means meant to be final solutions for multi-touch interaction, but are food for thought and discussion. I personally find this to be a very exciting change in interaction design and look forward to the challenge of taking it on.

 

Recording personal data isn’t new, but the ease with which data can be recorded, organized and displayed for analysis is. And it’s gaining in popularity. New websites and apps that help people monitor their habits, feelings and behaviors are being released every day. According to the New York Times Magazine article, The Data-Driven Life, over one million people are on the geo-tracking site Foursquare and over 30,000 personal tracking projects are started every month on MedHelp.

Self-improvement and self-insight
People track their data to aid in progress toward goals such as quitting smoking, losing weight or being more productive. Seeing the raw data removes some of the emotion from the process of change and can also, over time, offer personal insight into correlations between activities, moods and outcomes.

Community
With the popularity of Facebook and Twitter, people don’t seem to have many qualms about sharing their data. Many online communities are built around the exchange of personal data. For example, creating a profile on a dieting site that publishes your food intake, exercise patterns and weight loss progress for like-minded individuals to view. Or personal data can be published manually via Twitter or Facebook (tweet your breakfast) or automatically (check in at the Pizza Parlor via Gowala). The social aspect of the web actually promotes the collection of personal data. From The Data-Driven Life:

“The more they want to share, the more they want to have something to share.” Personal data are ideally suited to a social life of sharing. You might not always have something to say, but you always have a number to report.”

Where is this all headed?
In this fascinating video, Carnegie Mellon Professor Jesse Schell talks about how score keeping and tracking devices will creep further into our everyday lives (skip to the 20:00 mark if you are short on time). Sensors will get smaller, more powerful and be embedded everywhere. Just brushed your teeth? The sensor in your brush awards you 10 points. Brush twice a day for a week? You’ve earned a bonus – redeem your points for a toothpaste coupon.

But can you trust companies with this much information?  
It’s all well and good as long as they are using your data so sell you things you want. But what happens when your grocery store threatens to use your buying habits against you in a legal case? Or maybe your health insurer offers them big money for your data — could your rates go up because you buy too much junk food?

In summary
If recording your personal data benefits you in some way, do it. Enjoy the insights and benefits the modern technology can provide. Just be aware that your data may not always be private and you should be selective about what you record.

Popular personal data tracking sites, apps and devices to check out: 

• Daytum uses Google API to track and publish just about any type of data.
• me-trics is where Google Analytics gets personal.
• RescueTime is time management software for individuals and companies.
• Trixie Tracker can track and monitor your baby’s habits.
• Sleeptracker is a wristwatch-like sleep phase monitor and alarm clock.
• FitBit is a small device that tracks exercise and sleep.
• Moodstats allows you to record and rate how your day is going.
• MedHelp is a medical community and forum with tracking tools for pain, sleep, etc.
• Traineo tracks food, calories, exercise and fitness goals.
• FitDay is for tracking and analyzing your nutrition, weight loss, diet and fitness goals.
• Calorie King has detailed food, nutrition and exercise trackers.
• MotionBased is a web app from Garmin that translates GPS data into functional analysis and online mapping.
• Nike+ captures running stats (distance, pace, time and calories), which can be uploaded into the Nike+ community.
• Foursquare and Gowala are geo-tracking applications where users “check-in” at locations.
• Mint is a personal finance tracking software.
• CarChip is a device for cars that collects driving and engine performance data from the on-board computers.
• My Mile Marker tracks mileage and fuel consumption.
• The Energy Detective is an energy consumption device/monitor.

 

 

Imagine you’re in the NYC subway. You have to get across town and your train is about to leave. You sprint over to a kiosk and navigate through a complex series of screens to find the right pass. It is taking forever. You fumble as you attempt to insert your cash because it is not recognizing the magnetic strip on your credit card. Finally you receive the ticket as the last train pulls away! Enter mobile ticketing.

Check out the video above to see how mobile ticketing works in Japan. Ok, maybe not, but in all seriousness...

What is Mobile Ticketing?

Mobile ticketing refers to someone who purchases a ticket and stores it on his or her phone for later use.

What Does The Future Hold?

Juniper Research predicts that 2 billion mobile tickets will be delivered in 2010 and 15 billion by
 2015.

What Are The Benefits?

1. Reduced costs of ticket printing/mailing.
2. Improved consumer convenience.
3. Reduced infrastructure costs.
4. Increased revenue by increasing accessibility to tickets.

What Technologies Are Being Leveraged?

1. Barcode – once you purchase the ticket, you receive a barcode that’s displayed on your screen, which is scanned at the station.
2. SMS – a text message with either a redemption code or a link to a barcode is delivered to your phone.
3. Applications – an iPhone, Blackberry or Android app that allows the smart phone owners to purchase tickets.
4. Contactless RFID and NFC – similar to “wave-and-pay” systems that many credit card companies have employed. These both require the phone to have an actual chip in the phone.

Near Field Communication, or NFC, is the latest and standard and is being quickly adopted by the subway system in Japan and some European mass transit systems. NFC is certainly the future of mobile ticketing. In fact, Apple filed a patent for it to be used on the iPhone, integrated with an app that would allow you to book your entire travel itinerary via your phone!

Which Verticals Can Benefit From Mobile Ticketing?

• Mass transit
• Airline check-in
• Cinema ticketing
• Concert/Event ticketing
• Trade shows
• Consumer voucher distribution

What About Vending Machines?

Take a look, getting junk food just got a whole lot easier.

The Social Reach

What has not been touched upon is how this could allow retailers to increase revenue while making it easier for customers to share their experiences. The future of mobile ticketing is indeed bright.

Additional Links

Card and Chip Suppliers to Offer Open Transport Ticketing Standard

Juniper Research's Whitepaper: Mobile Ticket to Ride!

Expanding Mobile Ticketing Globally

Juniper Research: 15 Million Mobile Tickets by 2014

Mobile Ticketing in a Central London Station

I’ve been given great opportunities at Springbox to help manage social media projects. Social media projects often present unique project management challenges. Here are some of the lessons I’ve learned along the way that help keep social media projects on track and lead to success: 

1. Be prepared for the quick turn. A huge benefit of social media is the ability to share information quickly with people you’re connected with. Creating a schedule for immediate interaction is next to impossible. The solution? Define your “go-to” people for quick-turn social media work and allow for a buffer in their daily workloads to take on last-minute work.
2. Plan for the unknown. In the new world of Facebook application development, we often know what we are capable of doing; however, sometimes, we’re not quite sure how we will do it. Work with your developers to build time into schedules for discovery and research.
3. Roll with the punches. Social media platforms are regularly changing. New features are added. Key functionalities are optimized. Many times such changes aren’t communicated to agencies right away. Make sure you and your teams are staying up-to-date on changes, so you can quickly adapt to them as needed. 
4. Play by the rules.  As more and more brands enter the social media world, social networks, such as Facebook, are developing rules to protect their users and their environment. Know all the rules of engagement and make sure they’re included in your project briefs.
5. Get in on the fun. Don’t just create social networking accounts, get involved in those networks and see what your friends and brands are doing. The better you understand the landscape, the easier it will be to understand and guide your social media projects.