Sender 11

Pecha Kutcha: Mobile Paradigms

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

A couple of weeks ago we had a Pecha Kutcha event at work. It was my first. If you don't know what Pecha Kutcha is, it's a presentation with 20 slides where each slide lasts 20 seconds. That makes your presentation 6 minutes 40 seconds long. It's about keeping the audience entertained.
I thought I'd talk about paradigms. Sounds daft, but it's really food for thought if you, well, take time to think about it. Which is precisely what you don't have in a Pecha Kutcha presentation...
I didn't have a lot of time to prepare, but I grabbed some previous slides from here and there and went for it. Here is the result, I've fleshed out my notes so they make sense to a reader.
If you are going to do a Pecha Kutcha presentation, don't do it this way, ha-ha. Way too much content. It's about 1/3 too much text, but a larger problem is that I'm trying to touch on too many points. You really need to limit the number of points you want to touch on, because the audience will need more than 20 second to digest each.

I didn't put in all the slides here, but I've numbered each 20 second slot as you see below.

1. We are in the business of organizing stuff visually, - not for ourselves, but for other people.
   One major problem we, as Interaction Designers, have is to understand how those “other people” think. We can't read other peoples minds just yet. Since people talk more than they draw, we listen to how they talk. What they say isn't that interesting, really. Lets be honest, he-he. It's how they talk, what words they use, that is interesting.
    
2. When we design something, we have a mental model in our head of how the thing work. And we use metaphors to make our design understandable. The metaphor defines the personality of the product. Using the product is basically a dialogue between the designer and the end-user, just separated in time. You put a button “here” telling the user “click me”. After the user clicks you say something else - it’s a dialogue.
    
3. How well does the metaphors we choose fit the users conceptual model? What do the people you design for bring to the problem you are trying to solve? A lot of their existing thinking is going to be a part of the system you end up designing - whether you are aware of it or not!
   If they look at something and think “Oh, it’s a thingamabob”, when it's really a doohickey, you’re in trouble.
    
4. And we are witnessing a pretty serious paradigm shift right now. The phones themselves are changing, the OS’es are changing and the form factors are changing.
   We invite users to enter a place or use a piece of software that we have created. In order to make it understandable and coherent, we like to use metaphors. The desktop metaphor is well known from the computer, we have used it for 25 years now. "Files" are in "Folders", the “Trashcan” is for deleting stuff and everything is placed on a "Desktop". The Desktop metaphor is the dominant organizing principle for the computer. Bill Verplank talks about Interaction design paradigms, or "computer paradigms":
    
    
5. Computer as Brain
   An early metaphor was the Computer as a Brain. Thinking machines. The machines will take over thinking for us.
   If the computer is a brain, then how intelligent is it? How do I talk to it? Can I use spoken language, handwriting? Artificial intelligence. You can see where this leads to all sorts of efforts to develop artificial intelligence where the goal often is a computer that  know how to do things for us.
    
6. Computer as Person.
   The computer is an agent, an avatar. The computer becomes a “personal assistant”. It pops on screen, is friendly, talks to you. It also distracts you. Give the computer some high-level instruction and it scoots off and come back with what you want.
   Verplank: An agent-based interface is going to require a lot of trust. And so far no one has been able to demonstrate anything remotely worthy.
   By the way, I think The Semantic Web (Web 3.0) is really a revisit of "Computer as Agent".
   
    
7. Computer as life is an extension of Computer as Person. You could argue that computers are already a life-form of sorts. Computer viruses are here and they can multiply. The robots are coming. Let's hope they will be vegetarian, not carnivores.
   Verplank: Should systems have magic in them? No, computers should not have magic.
   
     
8. Computer as Tool
   This paradigm is all about efficiency, empowerment etc. Users have tasks, they have jobs to do. The computer provides tools that empowers them to do good jobs. It's all very IBM and "Microsoft". This tool paradigm is where "usability" comes from. A good tool is half the work, right? Computer as Tool uses a desktop metaphor.
    
9. When computers became a tool, we started doing direct manipulation, grabbing something and using it directly.
   Verplank: Interaction style changed radically. Before this we "set up" a task; We entered data, adjusted levers and then clicked "Go". The computer went to work and after a while spat out the result.
   Web forms are indirect manipulation. Enter a bunch of stuff and click "Submit". AJAX promises to bring "toolness" back to the web.
   
   
10. Computer as medium
    The Computer as Medium: Right out of Nicholas Negroponte's Media Lab.
    Multimedia. Ways to publish, communicate, persuade, engage and entertain. Convey a message and deliver content. Doesn't this sound a lot like the media industry? Computer as Medium use a page metaphor from the web.
    Lately we’ve seen a lot of the river metaphors like in Facebook, Twitter, and a lot of others. Strong sense of time in this paradigm. 
     
    
11. What are the Mobile Phone paradigms?
    Ever since the phone manufacturers started adding features they have tried to figure out what they are actually making.
    What are people calling their phones? What are we as designers calling the phones? What is marketing saying? We're not using the same words.
     
12. A phone is a phone
    For many people, for most people actually, the phone is semitransparent – it has a very sub-servant personality. When people pick up the phone to call someone, they don't really see the phone. Their inner eye see an image of the person they are about to call or send a message. So they dont feel like they are interacting with the phone much.
    
     
13. Phone as computer
    “Smartphone” is a marketing term, “dataphone” is a people term.
    Originally Apple didn’t want the iPhone to be a computer. But developers saw it as a computing platform and started hacking it. But it didn't become a computer to the users. Still, smartphone-users interact directly with the phone. It is no longer semitransparent.
     
14. Phone as media
    Is the iPhone designed as an entertainment device? No, but it has become one. If you look at what sells in the App Stores, host people see them as entertainment devices.
     
15. Converged devices
    Nokia: Multimedia Computer. This is the voice of convergence delivering a (weak?) marketing message. Or the message is good, but the execution is not.
    Sony Ericsson has 3 product lines: Walkman Phones, Cybershot Phones and Smartphones. They have tried to brand these segments separately with good success. Now in trouble since the feature phone segment collapsed and their smartphone OS went the way of the Dodo.
     
     
16. Phone as Fashion
    Most of us don’t consider ourselves to be in the fashion industry. Apple is clearly into fashion when it comes to their products. According to Steve Jobs you have to buy a new iPod once a year in order to keep up. The iPhone would probably follow the same pattern was it not for the 18 or 24 month contracts.
    Apple markets a bolt of lightning that connects to your ears and lets you dance down the street.
     
17. If the phone has become a computer, what kind of computer is it?  A brain? Media? A Tool? Computer as person. Maybe it is neither.
     
18. Phone as a container
    Phone as container for your "life story". Christian Lindholm of Nokia has worked a lot on this with "Lifestreaming". The place that stores the content of my life. But is it on the phone or is it really on the internet, - and the phone is just a way to access it? The answer to that question is important for anyone who designs software and services for mobile.
    
    
19. The phone is my room, my personal place, my purse. What I have there is not for others to see? I share with others that I wish to communicate. Family, Friends. Flirting. It also have a work connection there, after all work is part of my life. Work and personal may exist on the same phone, but are separate parts of my life. I think this is what we are currently thinking as designers, when we work on mobile phone software. So let's hope the users see it the same way :-)

Somewhere in there, there was one more slide...but I can't remember what that was. Anyway, I encourage you to check out Bill Verplank for more on computer paradigms.

Run for cover

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

The americans are coming!

Now, Robert Scobble is not my favorite blogger either, but you got to admit that he has an uncanny ability to put the finger where it hurts on interesting stuff.

He has just put up a post on the Travelling Geeks site about the sad state of affairs in European mobile. Just a few years ago the americans were way behind in mobile in most every aspect. Their phones were sad little things - they only turned them on when they had to make a call outside the house. Their operators were terrible and there was no coverage anyway. And they lacked interoperability - they couldn't even send an SMS message to a someone on a different carrier. Not that they would know how to anyway.

But what is the situation now? The iPhone, Android and the Palm Pre is setting the standard. Granted that the tech press is predominantly US based and more or less blind to anything going on outside the home turf. But the press over here in Europe is touting the same. And they are rignt. Not to mention the europeans that are buying iPhone and Android phones by the boatload.

I usually am polite and say I’ve seen some stunningly cool companies, like Spotify (who won four TechCrunch Europa awards last night) but in the back of my head I remember how cocky the same entrepreneurs used to be when showing me their cell phones and noting how far ahead of the world they were. That cockiness is done and that has deep implications for entrepreneurs across Europe. They must now visit Cupertino and Mountain View to get access to customer bases.

Read the post here: Europe no longer matters to lead position in mobile.

Appstores: The new ringtone business

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

The credit crunch grabbed the mainstream headlines, but 2008 brought us an equally fascinating display of market mechanics: Apple launched the App Store on the iPhone and the price of applications crashed.

In the six months of its operation, more than 10,000 applications have been launched. Every day about 180 new applications appear in the store. 70% of them are paid applications, and most of them costs 99 cents. Here is a chart from Charles Teague:

 

The low price of applications frustrate developers.

Be careful what you wish for

It is perhaps ironic that Apple never intended to have neither an App Store nor any application developers for the iPhone. iPhone Apps has come about as a result of pressure from developers. When the iPhone was announced, Steve Jobs clearly stated that the iPhone was a gadget, and no one could put applications on to it. Developers would have nothing of it and started jailbreaking what they saw as a very nice application platform. The developers raised such a stink that Apple decided to give the developers what they wanted: Tools, distribution and billing.

Since then, application developers has been hard at work creating useful applications, only to realize that the only way to sell anything on the App Store was to lower the price to $0.99. It seems like no matter how useful software you make, people value it at $0.99.

Mental model

There is a “mental model issue” at work here. Developers see the iPhone as a computing platform because it runs a proper OX, has developer tools etc. Most people don't see their iPhone as a computing platform, the see it as a fancy gadget. They don't expect to use it for typical computing tasks like word processing. They buy a laptop for that. People are ok with paying what they see as a reasonable price for an office suite for their PC. Say, $150 for a word processor, a spreadsheet and some extra apps. No problem. Millions of people buy a copy of MS Office every year.

Ask them if they are ok with paying $150 for MS Office for their phone and they say no. OK, but if the price was really low… say $50? That’s only 30% of the PC price, a fantastic bargain? No? $25? $15? No? When you cut 90% off the price and people are still not interested, you know you have a problem.

Do you really take the office with you?

An office suite is of course an extreme example, but its meant to prove a point. Almost no one will buy a word processor and a spreadsheet for their phone - at any price. But a laptop without a word processor and a spreadsheet is unthinkable. Office suites have been available for mobile phones for years, and they sell in very small volumes. Office tools for phones are not going to produce a new Microsoft Corp. Neither is any other sort of productivity application.

People are willing to pay for productivity features at the point of purchasing the phone, but not thereafter. They are willing to pay a premium for a phone with nice email, maps, music player, etc. while in the store. But they will not pay for the same features as downloadable applications when they come home. Maybe they will in the future, but not today.

Entertainment

On the other hand people seem more than willing to pay $0.99 to download an application that provides a little bit of amusement or entertainment value. I believe the current best-seller is an application that makes rude body noises. (Now you know what the iPhone demographic “31 year old affluent urban males” are into. In case you ever wondered...)

If you are a developer hoping to hit it rich, maybe you should stop developing that incredibly useful organizer application and get to work on the next iFart app. iOink perhaps?

Designing the Sprint Instinct

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

At the Design for Mobile conference last week Mike Lundy, Design Lead for the Sprint Instinct, talked about the design and development process for the phone. He had some pretty interesting things to say.

(This is my impressions and takeaway from the talk, any errors are mine, etc, etc.)

The Instinct has become the most successful device launch in Sprint history. The Instinct represented a change in the design relationship between a carrier, an OEM and application providers. More importantly, it represented a fundamental change in development tactics and design authority within the carrier. 

 

In addition to selling well, the Instinct also got some pretty good reviews. Mike Lundy and his cohorts must have done something right.

The degree to which an operator customizes a phone before they sell it varies a great deal. Some operators do nothing, they sell phones just as they come from the manufacturer. Some customise the look with colours and icons and their own web start page. And some, like Sprint, put a lot of extra software on the phone.   

The Old Approach (meddling)

Sprint has a multivendor approach where many different companies (OEM’s) deliver different parts of the phone software. In addition to the phone manufacturers own OS, there may be a dozen more applications, all with slightly different different buttons, menus, user experience.

For each feature, like music, email, navigation etc. operators have their own product managers with different budgets and objectives. This often leads to a very bureaucratic development process. Typically, product managers fight to give their service highest priority, without worrying too much how much this may affect the overall user experience of the device. They are after all measured on how well their service are doing, not everybody else's. In short: there are way too many cooks in the kitchen.

The UE team may have the task of creating a unified experience, but often not the means since the UE team does not own the overall design. Sprint used to do feature level requirements, and only bug level enforcement were possible. This means handing off a word document or a wireframe to the developers, and all you can do if you don’t like the result is file a bug report. More, when design decisions were made, there were no engineers and no visual designers in the room.

The new approach adopted for the Instinct

A small dedicated team of only 12 people (The Tiger Team). Visual lead, Design lead, some engineers, some product managers and one exec who informed externally. The team had clearly defined roles, clearly defined goals and executive backing.

Development was done in isolation from the rest of the organization. The rest of Sprint didn't know about the project, if I understood Mike correctly. The team moved out to a different building with their own security (I guess that was to keep product managers out). Samsung sent 20 or 30 developers to the Sprint site to work on the phone.

Very fast turn around. 24 hours to come up with a design suggestion to any given problem, 48 hours for the design lead to evaluate it.

With the Instinct, the design team were owners of the overall design.

Why did they do it?

Competitive pressure from the company that shall remain unnamed, the touch trend and experimentation with a new design approach.

Design goal

The design was centred on habitual use, not on ease of discovery or ease of learning. "When you adopt it, it is so efficient to use that you don't want to change".

There was very little user testing or input, it was a very heuristic design process.

Challenges

There were only 9 months from project start to shipment and 36 apps to redesign. 13 vendors contributed, all had apps that had to be adapted to the new UI.

The hardware/software platform was chosen before the team started their work. The hardest thing about the entire project was that the hardware was underpowered for the task, it was never designed to do what they asked it to do. To make matter worse, the various applications to be included ran 4 different systems (Native RexOS, Java, BREW and TAT.) The effect can be seen. The address book runs native code and the list scrolls very smoothly. The music player is written in Java (that runs on top of BREW in this implementation, making it very slow) and the lists doesn’t really scroll, the text jumps to simulating scrolling.

Tech enforced consistency

All existing Samsung UI code was thrown out. The design team created a a common set of UI widgets that all vendors had to adapt (framework widgets). This drove design consistency. When the vendors complained about UI shortcomings, this brought attention to exceptions.

Dedicated Visual Design support

No more “paint by numbers” for the visual designers. Visuals was included in the wireframes sent to engineers so they had pixel perfect designs in hand. Visuals were also used to improve and clarify interactions including the physics of the interactions, acceleration and deceleration formulas for gestures.

Feature purge

Screen real estate is at a premium on a touch screen device because everything has to be visible on the screen.   
The Swiss army knife approach was rejected. All features were removed by default and every feature was interviewed again for inclusion.    
For example; 70% of revenue for one music service came from a banner ad (presumably because the service has hard to use and people didn't buy music). The new design did not include the banner ad, and the music product manager was upset. 70% sounds like a lot, but on closer examination it turned out that it was 70% of very little. It would be better to improve the service so people actually bought music. The ad was not included in the new design.

The phone was going to be sold on unlimited data plans only. That meant they could remove a lot of warnings and alerts. It also reduced user anxiety over billing and reduced purchase anxiety (there is no choices to be made by the buyer. It's one package only.)

Leanings from the process

• Enforce consistency through code, not through wireframes
• Determine how to make money. Subjugate all other considerations to design.
• Use visual designers up front
• Have a clear goal
• Limit complexity
• Make the product managers work for their salary. Why should the feature they want go into the design? If they want something in the design, make them make a case for it, dig up numbers, state their case.

Here is an interview of Mike Lundy where he talks more about designing the Instinct.

Muscle memory

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

This is the main entrance of the building I work in. Eh, to be precise it's the user interface to the door lock. (There are actually 2 user interfaces there. The door bell for the first-timers, and the panel below for "experienced users"). It's standard issue: Swipe your ID card, type in your code and the lock opens with a bzzzzz.

As you can see the numbers are worn off. They can't be read. How do people get in through the door? No they don't ring the door bell. But if they can't see the numbers, how can they enter their code? When I get to work each morning, there isn't a queue of 150 people outside failing to get the door to open. So they must be able to get the door to open somehow.

Muscle memory

We don't enter numbers, we leave it to our hand to type in the code. If we do it often enough, the hand learns the code, an effect called Muscle Memory. The hand does not remember the numbers, it remembers a movement pattern. Many people, when asked what their PIN code is, have to type it on a real or simulated keypad and look what numbers their hand type. In fact, when I asked my colleagues about the panel at the main entrance, none of them had even noticed that the numbers were missing!

The brain-to-hand connection is very well developed in humans. Manipulating something with our hand does not take much mental effort. As a result, direct manipulation feels effortless. The flip side of this is of course that if your software is inconsistent with learned behavior, your users will be frustrated.

Mobile menus

It's worth repeating that you should not design your software to be consistent across devices. You should design your software to be consistent with the device it runs on. Your users are unlikely to use your software on many different handsets. When your software runs on an old Sony Ericsson phone, it should use the hardware Back key down to the left. When it runs on a Nokia Series 40 it should use the softkey back to the right. Here are some common key layouts:

 

(Click to enlarge)

Common ground

Thankfully the handsets are converging towards this common behavior:

The panda and the blue button

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

A panda walks into a cafe. He orders a sandwich, eats it, then draws a gun and fires two shots in the air.

"Why?" ask the confused waiter, as the panda makes towards the exit. The panda produces a badly punctuated wildlife manual and tosses it over his shoulder.

"I'm a panda," he says, at the door. "Look it up!"

The waiter turns to the relevant entry and, sure enough, finds an explanation.
"Panda. Large black-and-white bear-like mammal, native to China. Eats, shoots and leaves.

Just like spoken or written language, visual language has its grammar. Without grammar, language would not make sense most of the time.  Without grammar, visual language is just as confusing.

Proximity is the Comma of visual grammar

In the above image we see three separate figures. In the image below we see the two figures on the right as a group, and the figure on the left as not belonging to the group. The only difference is that the figure in the center is moved a few pixels to the right. It's like putting a "visual comma" in between the first and second figure. The entire meaning changes.

(Images liberated from the infamous Artemy Lebedev)

Your brain is not passively receiving and storing visual input. The brain is actively trying to make sense out what you see, whether you want it or not. It can't be turned off. Designers who are not mindful of these principles can (and often do) confuse people.

Some of the rules the brain uses are described by the Gestalt Principles. If there ever was a visual grammar, the Gestalt Principles of Perception is it.

The sum is greater than the parts

The brain tries to give meaning to chaos, divine relationships between objects. The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts. Here are some of the principles:

The Law of Proximity

We see objects close to each other as forming a group.

The Law of Similarity

We group elements if they are similar to each other.

"This is a great example of the gestalt law of similarity employed in interior design. [...] In this case, all of the dining room chairs are black. The shared color makes the chairs form a group based on similarity. The grouping effect is so strong that you really have to look closely to notice that the chairs are a mix of different designs."

(Gary Fisk, Applied Psychology)

The Law of Prägnanz (figure-ground)

Something is always "the object", the rest is "background". This effect is often used in optical illusions like the well known Rubin Vase above. Do you see the vase or the two faces?

In the Mac logo above, you either see the happy face frontal or a face in profile. In cases where two interpretations are possible, your brain can switch between them, but it can only see one interpretation at a time.

The Law of Symmetry

When we perceive objects we tend to perceive them as symmetrical shapes that form around their center.

A typical textbook example of the law of symmetry consists of a configuration of a number of brackets (the illustration above). When perceiving the configuration, we see three pairs of symmetrical brackets as opposed to 6 individual brackets, or two pairs and two singles. This happens despite what is suggested by some of the brackets immediate proximity to each other. (more here).

The Law of Closure

We perceptually complete objects that are incomplete.

The brain is constantly filling in the gaps in order to form whole objects out of separate component parts. Its surprisingly good at it; we identify patterns faster than the separate parts of the pattern. It might be an evolutionary issue. "Is that shadow over there a wolf preparing to attack me, or just a bush behind the three?" You want to make up your mind fairly quickly.

It is not only our visual system that does this. Our brain is a fill-in-the-gaps machine. Check this video interview with David Ariely.

 

Spot the errors:

Yahoo and Blackberry: The Yahoo! Flickr screen is quick to scan and easy to understand. To understand the Blackberry screen, you have to read every single word on the screen. What Gestalt Principles could the Blackberry designers use to make the screen better organized and less confusing?

AccuWeather: There is no way of knowing if the upper or the lower button is selected in the screen above (both states are shown). Is there a Gestalt Principle that the designers could have used to avoid the confusion?

Google Maps: What Gestalt Principle has the Google designers used to ensure that you don't confuse the search results with symbols on the map itself?

The quote is from the book Eats, Shoots & Leaves: The Zero Tolerance Approach to Punctuation by Lynne Truss. Apologies for punctuation errors in the text! :-D

More on mobile screen size trends

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

I recently wrote about screen size trends and the trend is clear: 240 x 320 (aka QVGA) is the new baseline screen size, both for feature phones and smartphones. Smaller screen sizes like 176 x 220 is disappearing and the 128 x 160 size is pushed down into basic phones.

QVGA will be the new small size, but it is not clear what the new dominant large screen size will be, or if there is going to be any.

What is pretty clear is the trend towards widescreen and landscape orientation for high-end phones. QVGA and larger phones are getting automatic screen rotation. Landscape is often preferred for media consumption and handheld movie consumption has been "promising" for quite some time.

The primary design objective for the iPhone (in my opinion) was to make the optimal video iPod. When you have 70% marked share you need to grow into new markets. Several new phones from other manufacturers seem to have the similar design objectives.

I have compared some available and coming devices that could represent a trend. LG and Samsung seems to be partial to the 400 x 240 screen size. They have released several devices with this screen size the last year or so. Nokia has recently tipped their hand with the Nokia Tube. The name obviously refers to a video use-case. At MWC in Barcelona in February they showed a demo that ran on a 360 x 640 screen. This gives a 16:9 resolution, the same as HDTV. 640 x 360 is also called QHD for "Quarter HD".

The Sony Ericsson Xperia has been developed for the US market specifically. It runs WinMob 6.1 on a 800 x 600 screen, a resolution not supported in any official Microsoft documentation, but I guess Microsoft saw fit to go the extra mile in this case :-) The Xperia has an extreme resolution, it has more pixels on 3 inches that a good ole VGA desktop screen. I'm not sure that the Xperia exact screen size and resolution represents a trend, is kind of an extreme case. But it underscores the general high-end widescreen trend.

Pixel dimensions and aspect ratios

I used 9 as lowest common denominator for ease of comparison.

Physical screen size

Most of the devices uses 3–3.5 inch screens, something that does not leave much space for a keyboard. The phones are either clamshell or pure touch. They are also fairly similar in physical size.

Gestures, pixels and bandwidth

After years of designing for really small screens and always in portrait orientation, these devices sure feels like drowning in pixels. I absolutely expect to see some great and innovative user interfaces coming out of gestures, pixels and bandwidth!

[Note:] No mention of Motorola here, for the simple reason that I have no idea what they are up to.

[Edit] Just to be clear, the reason I'm exited is because the phones above makes it possible to design for a wide screen. I'm aware that many or most of the standard functions in most of the phones above is intended for vertical use.

Mobile screen size trends

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

Over at mBricks my colleagues have put a lot of work into the device database (we work with WURFL data and contribute back as well as we can). I took the opportunity to take a closer look at screen size trends. The data I have covers about 400 different device models sold from 2005 to today.

This shows the the most significant screen sizes, from the smallest to the largest. I have added a couple of upcoming phones as well, they are the ones with the dotted lines.

Over the years the relative screen size difference has increased. The difference between the smallest (128 x 128) and the largest (800 x 480) is now a factor of 23. That means the largest screen is 23 times bigger than the smallest one.

You can see that the smaller screens have a portrait orientation and the large screens have a landscape orientation. Between them are the phones that can change orientation, they can work in both landscape and portrait. 240 x 320 is the dominant screen size overall.

Resolution

I did a rough dpi (ppi to be exact) calculation for some popular phone models. The pixel density actually increases when the pixel count increases. The screens are not only getting bigger, they are getting sharper at the same time.

There is an upper limit to what dpi is meaningful. At a certain density, the eye can no longer see any difference. If the specs are correct, the upcoming Sony Ericsson Xperia X1 will have a pixel density of 298. That is the highest I've seen on a mobile phone yet. The human eye can resolve about 340 dpi at one foot viewing distance IIRC, but tests show that most people don't see much difference between a 150 and a 300 dpi image. So 298 dpi should be plenty.

Unfortunately, for LCD screens, increased pixel density doesn't give us more brightness. More brightness makes the screen easier to read outdoors and is more important than resolution from a usability perspective. OLED displays will help with this, but we are drifting off topic.

 

Yes, a grand total of 26 different screen sizes. I only counted phones that had a color screen, ran Java and had a browser.

As you can see, just a handful of variants makes up the majority of phones. Lets take a look at them:

 

It is obvious that 240 x 320 (also called QVGA) is on a roll. It is by far the most common and it is growing rapidly. If you develop, this should be your target screen size.

 

When you develop, you primarily need to worry about the width of the screen. For most practical purposes, the height takes care of itself. I have lumped together 176 x 208 and 176 x 220 for this graph. There is still a lot of them in the market, but their numbers have been decreasing since January 2007. In 18 months this screen size may be out of the market. Nokia haven't launched a phone with this screen size in 1,5 years. I have also lumped together 128 x 128 and 128 x 160.

Phone screen sizes has had a tendency to come in pairs. Each manufacturer had their own variation on large-screen high-end models and small-screen low-end" models.

Manufacturer	small screen	big screen
Sony Ericsson	128 x 160	176 x 220
Nokia	128 x 128	176 x 208
Samsung	128 x 160	176 x 220
Siemens	130 x 130	132 x 176

 

Individual variations is disappearing, the trend is:

Manufacturer	small screen	big screen
Everybody+dog:	240 x 320	?

 

The majority of odd-sized screens are disappearing. No phones with the above screen sizes have been introduced for at least 4 quarters.

The dead and dying are partly BenQ-Siemens (who has left the market), partly the old Sony Ericsson P-series and partly the Nokia hires versions: E60/70 and N80/90.

The odd ones

What about the other ones, the not so popular, but not dying? These are the ones that do you in.

Fashion phones:
128x220	Samsung F210
240x400	LG favorite. Prada and Viewty.
Handheld touchscreens of the iPhone variety:
240x440	Various Palm and HP
240x480	LG KF700
Typical Palm/Blackberry form factor. US enterprise with portrait or square displays:
240x240	Samsung F210
240x260	Blackberry Pearl 8100
320x240	Various
320x320	Palm and Samsung
Clamshell:
640x480	HTC X7500, Qtek 9000, etc.
800x352	Nokia E90 Communicator
800x400	Sony Ericsson Xperia X1

 

Future

What will be the dominant screen sizes in the future? Well, the 128 width screen sizes are moving down from feature phones to basic phones and there are very few manufacturers that still uses 176 width screens. It looks like 240 x 320 is the new base line.

What will the dominant large screen size be? Let's hope there will be one. Right now there are a lot of different ones, every manufacturer has their own and I can't see a clear trend. The two hottest form factors right now is the handheld touch screens (ala iPhone) and the QWERTY clamshell (ala HTC).

For the handhelds, the 320 x 480 iPhone size is a possibility. It has an ok resolution for a 3,5 inch size. The Nokia "Tube" phone will have a 360 x 640 size (my estimate) and is another possibility.

For the clamshell form factor, 640 x 480 screen size would be my bet.

About the data

The data includes all the 400 different phone models sold in the Norwegian market from 2005 to 2008. I've given them four quarters of life time past the quarter they were introduced. That means an average of 14,5 months. This might be a little short.

I have left out basic phones. Only phones that has a color screen, support for java and a browser are included.

The Norwegian market is not very different from most other European markets. It's GSM only, the majority of handsets are sold with 12 month operator binding. Sony Ericsson, Nokia and Samsung are market leaders. Motorola is weak, HTC is up and coming in the enterprise market. The data includes the iPhone even though it has no official distribution. There is quite a bit of "black" iPhone imports.

Reliable sales figures for each individual device is not available, so the data is not weighted on popularity. But I don't think popularity would give a very different conclusion. I've checked "top ten" lists where available and none of the "odd" screen sizes seem to be big sellers.

Note: all sizes are written as width x height. So a 240 x 320 screen is portrait while a 320 x 240 screen is landscape.

iPhone App Store turnover

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

I don't believe it for a second when Apples suggests that their 30% cut merely will cover their costs. There is money to be made from the App Store, both for Apple and for the developers.

How much does people spend on mobile content?

Example: Norway is a small country in northern Europe with 4.5 million people. There is 4 million mobile subscribers in Norway, about the same as the number of iPhones sold. The total market for mobile content is about $200M. (These numbers are a couple of years old and were growing.) So on average every subscriber purchased mobile content for $50 yearly. The figure is the total turnover on the two available billing mechanisms, "Premium SMS" and "wap-billing" for all Norwegian operators. The figure is gross payout (including sales tax) from the operators to the content providers. Mobile content billed otherwise is not included but is probably negligible.

The revenue was divided in these categories:

• $20M Directory services (people looking up phone numbers via SMS) 
• $30M TV-interactivity (typically voting by SMS for televised competitions and reality shows) 
• $30M Adult 
• $80M Phone Content (40% ringtones, 40% games and 20% other content)

(The last couple of years ringtones have lost share while games and other has increased.)

Average spending was $50 per year, but that does not mean that every subscriber spends the same amount. For example, the age group 20-29 spends twice as much as the average. In fact, most people don't buy content at all. I don't have exact numbers, but our educated guess was that around 15% of the subscribers did ALL the shopping. That of course makes each buying customer even more valuable.

So, are iPhone owners "big content spenders"?

You can argue that the iPhone is a luxury item sold in fashion stores to people that just want to flash their elite status. Or you may argue that the iPhone is every geek's dream come true, and that that they can't wait to stuff their phone full of fun, useful, bizarre and/or interesting applications. Apple probably knows, but I don't, so I won't make a guess. No, I won't. No.

Ok, ok: I think iPhone owners will purchase more music, video and applications than other phone owners. The reasons I believe this are many, probably the subject for a separate blog post. Basically, the demographics align. And shopping phone content on most operator portals is a deeply broken experience: not receiving what you pay for, unethical business practices (like inadvertently being signed up for a subscription that you can't cancel without changing phone number) etc, etc, etc. Compare with iTunes. Apple knows how to move goods smoothly and quickly past the checkout counter without hassle or unwanted surprises.

 

App Shop revenue

Of the above $50 per user mobile content revenue, only "Phone Content" would be sold through the App Store. So let's say $22 is a reasonable revenue per iPhone owner. (Compare this to music sales on iTunes. Each iPod owner buys $15-$30 worth of music per year on iTunes.) On what will the $22 be spent? Mainly on games.

By the end of this year, if Apple has sold 10 million iPhones, this would mean a $220M turnover and a $66M contribution for "running the store". By next year end, if Apple has sold 25 million iPhones (analysts prediction) Apple would receive $165M for running the store.

Man, this was easy! I could become an financial analyst. He-he. Maybe not. If you think Norwegians in general are very different from iPhone owners in general, adjust the numbers to your liking. But I believe a $22 per user turnover is likely for the iPhone App Store.

Backstepping on a mobile phone

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

Mobile applications have two ways to use the Back function; As "History" or as "A Path Home". This blog post discusses those approaches and backstepping in general.

Back as history:

Say I am in the phonebook and I click an address. The map opens. In the map I do a search and the search result includes an email address. I click it, the email editor opens and I send an email.

I have jumped from "application" to "application" in the phone. How do I want the Back-function to work? I'd want to backstep from the email to the map to the phonebook. This is the behavior we are used to from Internet browsers.

Back as "A path home":

On most phones the Back-key does not step back through a history. It takes you back to the main menu or idle screen. The advantage is that users never get lost and can fairly quickly get back to known territory.

The Home key

A prerequisite for the history stack approach is that the phone has a "Home" key. You don't want the user to have to press Back 20 times to get to the main menu. In addition to WinMob, Android and the iPhone uses a hardware Home key. Btw: In version 6 Windows Mobile changed the back behavior from "A path home" to a history stack.

If you want to have a history function in your application (assuming your application is large and/or deep), and the phone does not have a hardware Home key, what are your options? Your only choice is to give the right softkey double or triple duty as Back + Home or Clear + Back + Home key. It is doable, but has to be thought out carefully and it may not be worth the trouble.

How Back works in Browsers

Current Internet browsers use a stack to implement the Back and Forward button behavior: the effect is that a person can use these buttons to move up and down the single hierarchical path captured by the stack, but cannot use it to revisit any pages that branched off that path as these are popped off the stack.

To illustrate this problem, let us take a person who starts at page A and visits page B. He then clicks the Back button to return to page A, then visits page C. This navigation path can be shown as A → B ï A → C. The contents of the Back menu will now be {A,C}. Page B has been pruned out of the menu entirely. (source)

This behavior corresponds poorly to the mental model of most people. Most people are incorrectly thinking that the Back button models a history list of all pages visited. It may seem that this system is confusing and frustrating, but research reveals no major problems with stack based navigation! An advantage of Back navigation is that it represents a very light cognitive load. People tend to use a simple "click until the desired page is recognized" strategy, and are happy to trade "true back navigation" for this simple model.

Techniques more sophisticated than the stack could be employed, but the simplicity and the effect of conditioning from a decade of browser use, dictates that the Back navigation functionality should mimic the one seen in Internet web browsers.

Don't store everything

The following states in the UI should not be included in the history stack:

• Notifications 
• Confirmation dialogs 
• Login or password screens

The Back key

The right softkey is default back navigation. The ultimate Back (from the application perspective) is an exit to the idle state, (closing of the application). In this case the right softkey is labeled Exit instead of Back.

Many Sony Ericsson phones have a hardware Back key. Some phones have a Clear key that does double duty as Clear and Back key. The preferred behavior is that the control keys work the same way in the application as they do in the phone OS.

And note: Back navigation cannot be used as an Undo function. After backstepping to the previous page, the screen should look the same as before. The focus must be returned to the same items, and items  kept in the same positions on the screen. However, any data that is committed will not and should not be undone by "Back". An Undo function must be labeled "Undo" and must be UI widget-oriented and not page-oriented.

Back behavior in mBricks

We are contemplating this mBricks history stack behavior:

1. Navigation to a page pushes a page to the stack top. This is done by a call to historyPush(). historyPush() stores the page and the appearance of the page (focus, highlight and scroll). 
2. Using historyBack() or historyForward() moves the stack pointer down and up the stack respectively, displaying the page at that stack location. The actual stack contents are not altered when navigating with these functions. 
3. When navigating to a new page, any entries on the stack above the current position are popped off the stack, and the new page is added. Pages popped off the stack cannot be revisited using the historyBack() or historyForward() functions.

The mBricks history stack is page oriented. Populating the stack is controlled by the developer. All page visits are pushed to the history stack by default and the history stack has a 20 item limit.