• 120 million iOS devices have shipped since Apple launched the first iPhone. (source)
• Apple activating 230,000 iOS devices a day (not counting upgrades). (source)
• Over 6.5 billion iOS apps have been downloaded to date. Over 200 iOS apps are downloaded every second. (source)
• There are over 250,000 iOS apps, and 25,000 of them are iPad apps. (source)
• Apple has sold a total of 275 million iPods. (source)
• The iPod touch is the #1 portable game player in the world and the most popular iPod. iPod touch outsells Nintendo and Sony portables combined. It has over 50% market share of portable gaming worldwide. Over a billion and a half games and entertainment downloads have been made happened on the iPod touch alone. (source)
• People have downloaded 11.7 billion songs from iTunes. Over 450 million TV episodes. 100 million movies, and 35 million books.(source)
• ITunes has 160 million accounts with credit cards and 1-click. It's the number one online media store in the world. (source)

• Sometime this month, the 5 billionth device will plug into the Internet. And in 10 years, that number will grow by more than a factor of four. (source).
• Today, there are over 1 billion computers that regularly connect to the Internet. That class of devices, including PCs and laptops and their associated networking gear, continues to grow. (source).
• In 10 years, there will be 6 billion cell phones, most of them with Internet connectivity. An estimated 2.5 billion televisions today will largely be replaced by TV sets that are Internet capable, either directly or through a set-top box. More and more of the world’s one billion automobiles will be replaced by newer models with integrated Internet access. (source).
• Ericsson estimates that there’s more than five billion mobile subscriptions worldwide using nearly 225,000 terabytes of data a month as of the second quarter of 2010. (source).
• Mobile data traffic for Ericsson tripled over the past year and is growing 10 times faster than voice. (source).

Official Description

More often than not, the mobile experience for a web application or site is designed and built after the PC version is complete. Learn the three reasons web applications should be designed for mobile first instead: mobile is exploding; mobile forces you to focus; and mobile extends your capabilities.

Hope to see some of you there!

Official Description

As Richard Farson’s truism “no one smokes in church no matter how addicted” points out, context informs almost everything that happens in an environment. Online social experiences are no exception.

How a product’s social model is set up can impact not only who contributes, but how much, and why. From permission-based subscriptions to one-click follows, Luke will discuss the attributes and implications of several popular social models by looking at data and behavior in the Web’s most popular social applications.

Hope to see some of you there!

• In July 2010, Pandora had 60 million listeners registered. This is up from 50 million in April, and 40 million in December. (source)
• Previously, it took Pandora all of 2009 to double in size from 20 million to 40 million. (source)
• In December 2009 alone, 3 million new listeners joined Pandora — of which 2.7 million of them activated the service on a device other than a computer. (source)
• Pandora is available for the iPhone, the Blackberry, the Palm Pre, and devices running Google's Android and Microsoft's Windows Mobile operating systems. (source)
• About 90,000 new people a day activate Pandora on a mobile device and that number is growing (source)
• Pandora currently has hundreds of thousands of songs in its catalog from over 90,000 different artists. 80 percent of those artists are played each month. (source)
• Out of 100 hours, 1 hour and 15 minutes of radio is listened to on Pandora. (source)
• Pandora has 3/4 of a million songs so far; 90 million of those three-fourths were played last month. (source)
• 1 out of every 4 or 5 songs gets a thumb (whether up or down). (source)
• On average an individual listens to 17 hours of radio per week. Of the 17 hours of radio listened, 96% are listened to through broadcast radio (so NOT Pandora because it is a unicast radio). (source)

Splash screens try kid's patience

Back in 2002, I outlined the ills of splash screens on the Web. These pointless "intros" only serve to frustrate anyone trying to get to content or start an application. Especially young kids whose patience already runs thin.

I do understand that sometimes loading screens are inevitable when applications start-up but consider the impact of the multiple splash and loading screens that kick off the Toy Story 3 app experience. Each one of these screens is displayed for several seconds. Which means kids have to wait and wait before they can see or interact with anything fun. Oh and waiting... is not fun.

GUI's not for kids

When kids interact with software they explore and engage with anything that looks interesting. Especially if it looks like content. Graphical user interface components don't.

Consider the example of Dr. Seuss's ABC book on the iPad. The intro screen uses colorful blobs to bring attention to large hit targets. But tap on one of these elements and up pops a standard modal menu asking you to select from one of three options. Modal menu dialogs and kids don't mix.

The contrast between these components and the rest of the app couldn't be more stark. Every other page of the book features large images kids can tap and and full pages they can swipe to turn like a book. In order words, the rest of the app makes content the UI -a first order principle of natural user interfaces (NUIs).

Press and hold to tap

Many touch-based applications for kids don't forgive errant fingers. So when a child is holding the corner of the screen with one finger and tapping with another -no action is taken. The app is waiting for a tap gesture and wouldn't take a press and hold gesture for an answer instead.

In order to better accommodate the dexterity of small children, applications designed for kids should consider treating press and tap gestures the same as tap gestures. Chances are a kid inadvertently has another finger touching the screen most of the time.

In fact, its a good idea to make your application as forgiving as possible if you want it to work well for toddlers.

Hold the encore

Kids are an enthusiastic bunch. If they see something they like, one tap won't do. Tap, tap, and tap again is often the norm. But just because an application element got some rapid fire tapping doesn't mean it should respond with rapid fire feedback -especially in the form of audio.

Many applications designed for kids don't check to see if an action is in progress before they start it anew. So when a child taps an image that plays a sounds then taps it again, the same sound will play over itself. Tap the image a few times and you have the same sound overlapping and echoing to the point of distortion.

If possible, apps should check to see if an action is already in progress rather than running multiple instances of the action at once. Another example of some forgiveness in the UI.

• 500 million people all around the world are actively using Facebook. (source)
• 50% of active users log on to Facebook in any given day. (source)
• People spend over 700 billion minutes per month on Facebook. (source)
• Average user creates 90 pieces of content on Facebook each month. More than 30 billion pieces of content (web links, news stories, blog posts, notes, photo albums, etc.) are shared each month. (source)
• Americans spend nearly a quarter of their time online on social networking sites and blogs, up from 15.8 percent just a year ago (43 percent increase). (source)
• There are more than 150 million active users currently accessing Facebook through their mobile devices. (source)
• In a survey of mobile web users, there is a double-digit (28 percent) rise in the prevalence of social networking behavior, but the dominance of email activity on mobile devices continues with an increase from 37.4 percent to 41.6 percent of U.S. mobile Internet time. (source)
• Facebook Mobile is the most downloaded mobile app by users with Android, Blackberry, Windows Mobile, iOS and Symbian powered devices. (source)
• The United States alone accounts for almost 24% of Facebook’s users. (source)
• The United States has 4.6 times as many Facebook users as the second-largest country on Facebook, the United Kingdom. (source)
• The top 10 countries on Facebook account for almost 58% of its users. (source)
• 65 million Facebook users are liking things on a daily basis through Facebook. (source)
• If a user comes on more than once and is willing to give Facebook a very basic piece of information – their gender – that seems to be the strongest predictor of whether they will stay on the site. (source)

.net magazine Issue No. 206, goes on sale August 17th in the UK and next month in the US, where it goes by the name “Practical Web Design”.

Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!

Big thanks to Jeffrey Zeldman and the .net team for asking me to be part of this great issue.


Tags: mobile, css, user experience, devices]]>2010-08-12http://www.lukew.com/ff/entry.asp?1176In a recent conversation about design tools and process, I tried to articulate what gives me the most confidence when making product design decisions. Basically, when trying to figure out a design I strive for two approaches: real and fast.

Real

Real refers to using realistic data and environments to design. Get your hands on as much actual data as you can. The more real data you consider while designing, the better you'll be able to define the right product experience.

Real data is not Lorem Ipsum. That just fills space and results in layouts based on "wishful thinking" instead of reality. Designing without real content/data is art at best. Decoration at worst.

Real data also gets you to a scalable designs.

The other part of real is environment: realistic context. Get into the actual code your product will run in as fast as possible. Look at your designs on the actual device you are targeting. Get out to where your product will actually be used.

Don't spend too much time polishing deliverables far removed from pixels or real components. Working far from real environments separates your solutions from the actual experience, constraints, and opportunities of your medium.

Fast

The sooner you can see things live (real) and interact with them, the sooner you can make the right design decisions. Go as high fidelity with real data as fast as possible to see if things make sense.

Additional Notes

• Big companies have a problem getting to real and fast as they usually have too many layers between getting something to play with and the ideas behind it.
• I bought Getting Real by 37signals years ago but never had a chance to read it. Yet for some reason, I think the book may espouse similar ideas.

We spent about an hour talking about design tools, processes, and how Apple's presentation software, Keynote, can help. An increasing number of designers (myself included) are turning to Apple's presentation making software, Keynote, to design and prototype software applications. Find out why.... You can check out the video on iTunes or The Conversation site:

• Watch the video
• Download the video (230 MB mp4)
• Listen to the audio
• Download the audio (22.3 MB mp3)

Big thanks to Dan and Travis for having me on!

• Google is now activating 200,000 a day. In June 2010, they were activating 160,000 a day. In May 2010 it was 100,000 per day. (source)
• AT&T activated 3.2 million iPhones in Q2 . That's 35,000 phones activated per day. Which is 10 times as many iPhone 4s as 3GS. (source)
• Android accounted for 33% of all smartphones purchased (in terms of subscribers) in Q2, ahead of RIM (28%) and Apple (22%). Android now installed in one of every three smartphones sold at retail. While the Google-developed OS took market share from RIM, Apple’s iOS saw a small gain this quarter on the strength of the iPhone 4 launch. (source)
• Android devices collectively represented a 34% share of the US market in the second quarter, and with growth of 851% Android became the largest smart phone platform (in terms of sales per quarter) in the United States. (source)
• Android’s rise is even more noticeable among new smartphone subscribers in the last six months where Android has nosed past Apple’s iOS in the last quarter to grab a 27% share of those recent smartphone subscribers. Apple has 23%. Rim as 33%. (source)
• The United States smart phone market grew 41% year on year. It is the largest smart phone market in the world by a significant margin, with 14.7 million units accounting for 23% of global shipments in Q2 2010. (source)
• By the end of 2011, smartphones are predicted to overtake feature phones in the U.S. market. (source)
• Global handset sales will grow to 1.3 billion units in 2010. Smartphones will experience 20% annual growth over the next six years (source)

More Android and iPhone Comparisons

• May 2010: As Google's Android operating system makes its way onto more smartphones, it edges closer to Apple's iPhone in several ways.
• Application Interface Models: the iPhone & Android operating systems handle application access & management differently. Does either approach lead to more app customization?
• Customer Satisfaction: does Apple's focus on the iPhone user experience result in higher customer satisfaction than Google's Android?
• Ad Campaigns: the contrast between the advertising campaigns for these two smartphone platforms is quite striking.

We'll be discussing Designing with Keynote. An increasing number of designers (myself included) are turning to Apple's presentation making software, Keynote, to design and prototype software applications. We'll talk about a few reasons why and some tips learned along the way. You can tune in to The Conversation this Friday at 10:00 AM PST (1:00 PM EST).

Soon after the live taping, the show will be available as a video and audio podcast in the iTunes store and on The Conversation website. Hope some of you can watch!

Design For Mobile is the first and only North American mobile user experience conference and features mobile design leaders from Google, eBay, Microsoft, and more. The conference focuses on mobile strategy and tactics for user research, product definition, interaction design, and usability.

If you are as excited as me about this event and interested in going, feel free to use the discount code: lwroblewski for 15% savings on the event cost.

Hope to see some of you there!

Detailing Interactions

Personally, I (LukeW) use Keynote for two reasons: detailing interactions and integrating a product overview within a broader presentation. While Keynote does not have a robust set of tools for working through interaction details, the basic animation controls the program provides can get you 90% of the way there. When combined with image masking and simulated taps/clicks, these animation controls allow a designer to illustrate a wide range of user interface transitions, feedback, and states.The process of animating user interface changes in Keynote forces you to think through how the actual interface will work. For instance:

• How quickly should this item fade?
• Will moving this control disrupt a user's workflow?
• What's the best transition to bring certain elements into focus?
• And so on...

Having a running simulation of your application in Keynote means you can illustrate scenarios and key points with a broader presentation using actual application UI. So when presenting a company strategy -you can show how it comes to life in the product (without leaving Keynote). Since Keynote is presentation software, key points can be illustrated in sequential narratives or user stories -a great way to communicate the value or purpose of an application.

Some tips for detailing interactions using Keynote:

• Divide interface changes/sequences across multiple slides. When designing in Keynote, you can quickly get to more than ten animations on a single slide. If you do, stop and continue the sequence on the next slide by starting the first animation right when the slide loads. This will make updates much more manageable.
• Mask elements behind a simulated viewport by creating a layer of rectangles (or other shapes) that sits in front of your UI. See illustration above.
• Use image masks to separate images into their components rather than trying to manage many images of each component. Aligning elements is much easier when they come from the same image.
• Align with opacity. Set opacity to 50% on a newly added element to align it properly. When the alignment is right, set opacity back to 100%.
• Pro tip: To align move actions, click on the red diamond representing the staring point of the movement, then navigate to the Metrics Inspector to enter pixel values. You sometimes need to go back and forth between the Build Inspector and Metrics Inspector to get the position to update. See illustration below.

Travis Isaacs uses Keynote to quickly describe interactive details in a narrative manner and has developed the Keynote Wireframe Toolkit to help you do the same. In his own words...

With Keynote, I solve design problems faster because I can capture, iterate, and communicate ideas faster and more efficiently than any other tool out there.

Interactivity is so important in how your product feels. I used to jump into HTML/CSS/JavaScript early on just to iron out interaction details because I couldn't capture them in a static medium like a wireframe or visual comp. Keynote can simulate these interaction details with transitions/animations really effectively.

Like many designers, I used to go from sketches to creating visual comps in Photoshop. Almost by accident, I discovered that with Keynote I could design interfaces with the fidelity between a wireframe and a comp two or three times faster than Photoshop. Because the investment to capture an idea is so low in Keynote, I don't become attached to it, freeing me to try more permutations until I get it right.

Some designers categorically oppose showing wireframes to clients for various reasons. Mainly, they are confusing. In my opinion, it takes a lot of imagination for a client to understand "traditional" wireframes. My Keynote wireframes have enough character and polish that it’s engaging to the customer and a lot easier to digest. I can interactively describe the details in a story-like manner.

Using Keynote well:

• Always design in master slides: This gives you a base layer to store all of your non-interactive elements. This base layer can be applied to any number of regular slides. This is handy for showing layers or menus.
• Keep you slide size reasonable: Embrace the constraint of the default 1024x768 slide size, as it represents a reasonable "view port" for a desktop or web interface. Tools with infinite canvases can deceive you.
• Don't repeat yourself: Along the same lines as "always design in master slides" - you should reuse as often as possible in Keynote. Use the copy/paste style to copy style attributes from one element to another. Use master slides to avoid duplicating common interface elements. Keep a library (or ahem, a toolkit) of common reusable interface elements that you can drop in when you need them.

Amir Khella uses Keynote to spec out complete application interactions. To speed up the process, he's developed Web, iPhone, and iPad Keynote prototyping libraries. In his own words...

Keynote is a great prototyping tool disguised as a presentation app. It's got the right amount of features to keep me in the flow, without distracting me with more than I care for. I like its powerful layout engine, multiple slide masters, and hyper-linking screens to add interactivity. I no longer need to write long requirement documents - I just annotate my prototypes and let developers interact with them.

If you want to use Keynote for your next prototype, here are a couple of tips:

• Create master slides for main screens first, then normal slides for pop-ups, and add hyperlinks last.
• Use PDF export to send your presentation to the iPhone or iPad, then you can tap through it as if it were a working prototype.
• Create or buy a good interface library that you can use in your projects, and work with two monitors: one for your library, and one for your prototype.

Joshua Porter compares using Keynote to another popular design tool: Adobe Fireworks

• Speed to high fidelity. I can create something high-fidelity faster in Keynote. It's fast enough that I can often skip low-fidelity (or simply sketch quickly and then go into Keynote)
• Quickly make changes.
• Show sequences super easily (even if it's just manually clicking to the next slide) This is very powerful for presenting to others.
• Can easily add comments that help explain what's going on.
• Copying styles with command-D. This is a huge time-saver...I can do it in Fireworks but it's not as fast.
• Easily work with images/screenshots/videos.
• Master pages work as templates...can get something up really fast (pages is something that Fireworks only recently added)

Per day in 2006...

• More than 60 billion emails were sent.
• An estimated 1 billion text (SMS) messages were sent worldwide.
• 1.2 million blog posts were written (50,000 per hour).

Per day in 2010...

• More than 247 billion emails are sent. (source)
• 4.1 billion text messages are sent in the United States alone. (source)
• 60 million updates are published on Facebook. (source)
• 50 million updates are published on Twitter. (source)

If interested, you can check out audio, video, and PDF versions of my Shifting Role of Design talk that touches on the impact of these trends for design.