Cross Platform Mobile Applications

Archive for January, 2008

How to reach 100 million customers

The Apple iPhone has shaken up the mobile industry. Operators are baffled to see that User Experience can command a premium price. Customers actually values usability, not only subsidy.

So what is the magic formula? Donald A. Norman, well known usability expert and author of The Design of Future Things explains Apples approach. Don’t design for a specific demographic, make products that work well and looks good.

But while most of Apple’s designs seem aimed at that young, artsy slacker it features in its clever TV commercials, Apple’s approach isn’t about targeting hipsters, says Donald A. Norman, a professor at Northwestern University and author of The Design of Future Things. Rather, the company’s design genius lies in its dedication to making simple, elegant devices for specific activities, not demographic types, he says. Its early markets were learning and publishing; now they’re creativity and entertainment. “The proper way to design is not to target an individual type of customer. You want 100 million customers,” says Norman.

Link to Business Week article

A look at Yahoo! Go 3.0

Yahoo recently updated their mobile application Yahoo! Go 2.0 (beta) to Yahoo! Go 3.0 (beta).

I’ll admit I have always had great sympathy but at the same time mixed feelings about Go. It holds a lot of promise: everything you need, conveniently in one place, optimized for mobile. But Go has failed to deliver in my opinion… Not that there is all that much wrong with the app itself, it is based on some sound principles, it looks good, and I bet it demoes well!

versions

The Go philosophy

The Yahoo approach is to deliver optimized content for your mobile existence. There is no “one web” thinking going on here! Yahoo massages content into a form suitable for constrained bandwidth, small screen devices. The idea is to deliver small relevant bits of information. The app uses contextual information (like location) to deliver a generous variety of relevant results and require as little text input as possible from the user.

Search for “pizza” and Go will return Pizza restaurants in your area, pictures of pizza, news about pizza, web search results for pizza, mobile web search results from pizza. To be mobile optimized, the results should not be a bunch of URLs but contain the actual information, sized for mobile. Restaurant names along with the physical distance from your current location, thumbnail images, news headlines etc.

This approach has been picked up by both Google Mobile and Windows Live Mobile.

Speed

One of the main usability issues with Go is the apparent slowness. The application invites you to explore, but its slowness punishes exploration. There is a delay every time you click anything that really takes away from the experience. The application feels sluggish, the huge download, and the occasional crashes adds to the feeling that this is a house built on sand, even if it’s not.

The early version 2.0 tried to pre-fetch feeds from all content sources when the app started. I don’t know if it was due to platform problems or poor programming, but the app was pretty sluggish for a couple of minutes after start. With the later version 2.0, this improved and the application felt a faster. Version 3.0 feels like a step back again in this regard.

It is of course more complex than just optimizing the application for speed. There is a balance between cool features/interactivity vs. speed. As history has shown, it is often a better long term strategy to spend your time creating cool features and leave it to the hardware manufacturers to fix the speed problem.

I’m sure that if you measure it, Go retrieves data faster than a browser would. But it feels slower. The browser builds up the page gradually, you see that its working. It may be slow but it feels like progress. Go displays a pendulum and the text “Please wait”. Simply changing the pendulum to a progress bar would help.

A new architecture

Yahoo has done some fairly substantial changes to the architecture in version 3.0. All sections of the application (finance, news, sports, etc) are now “Widgets”. 3rd party developers can create additional widgets that can run inside Go and on Yahoo mobile web sites. A widget gets a spot in the carousel. In this version 3rd party widgets lives on the server. Offline storage (ala Google Gears) will be added in the next version, according to Yahoo.

Snippets are mini-widgets with a standard layout that are designed to display a little bit of text or an image and be a link to a widget or a web site. Widgets and snippets must be approved by Yahoo and there are no 3rd party widgets or snippets available yet.

I have removed everything but Mail, Maps and Flickr and the application now makes a lot more sense! It also starts faster. I mean, now the app only contains stuff I need, while earlier it mainly contained stuff I did not need.

Beautification

beautification

The main reason 3.0 feels slower is probably increased use of graphic effects. The UI has received major beautification. No one avoids the iPhone effect. As you can see from the above screen dumps, the fonts are now anti-aliased, there is a lot of gradients and shadow effects. A lot of this probably done with increased use of SVG (Scalable Vector Graphics). SVG is of course the way ahead, but even the Nokia N95 I tested on (which has its own dedicated graphics processor) does not render SVG that fast.

Btw, the next version of Symbian will have a new graphics architecture called ScreenPlay. It is optimized for vector graphics rendering and image composition. But my guess is that come March or April, we will see an blazingly fast iPhone version of Go.

User interface issues

labels

Yahoo has had problems with figuring out softkey labeling. It may seem like buttons are preferred in the US while softkey labels are preferred in the rest of the world. Any way, version 3.0 is a mess in this regard. There is way too many message boxes and dialogs in Go and no consistent handling of them.

UX decisions I think is questionable:

  • Lists don’t loop (they don’t jump to the first item if you scroll past the last item in the list).
  • Version 2.0 had a great feature where you could search by just starting to type from anywhere in the application. This is now gone.
  • Version 2.0 had a nice demo mode that ran the first time you started the application. Version 3.0 has dropped this. Worse is that it introduces a number of new concepts, features and settings but there is absolutely no explanation even for the interested user.

popup

I just hate the use of the Macintosh pop-up menu, a selection control as a command button. The pop-up menu has been around since the early Macs back in the ’80s and its behavior is pretty well established. Also, don’t use the standby power symbol for an Exit command.

Messing with the popup list and the standby symbol gives the impression of poor attention to getting a clue.

Back

In previous versions of Go, the Back command took you back to the Carousel. The effect was that the Carousel, the main menu, acted as the center of gravity in the application. If you feel lost, back-step until you are in familiar territory. With version 3.0, back is now an application wide stack like the web browser history. The same change was done from Windows Mobile version 5.0 to 6.0. I think this is an improvement.

Mobile web content

Go displays web content in an internal browser that only renders text, images, and links. Web pages are run through a transcoder that strips everything else including forms. Pretty much all phones that runs Go has a much better internal browser and I would prefer Go to display web content in the browser. Even mobile web pages are transcoded.

web

A random mobile web site (from BBC). The transcoding removes the search feature and splits the site up, leaving it pretty much useless. You might of course say that the Yahoo version is less ugly and you would have a point there.

Who is version 3.0 for?

With the previous versions of Go, Yahoo obviously did a lot of thinking about what a good mobile application should be like. The new version 3.0 is all about solving problems for Yahoo, not for the users of the application. I get the impression Yahoo needs an “answer” to Google Android, an “answer” to Nokia Widgets, an “answer” to the iPhone.

Based on a few hours of fiddling with the application and I’d say that there are some visual improvements and some user experience decay. The primary personae for version 3.0 may well be “a Yahoo shareholder”. So, if you are one, get this version!

Posts like this tends to focus on problem areas, after all this is a blog about Interaction Design issues, not a product review. I’m going to keep using Yahoo Go 3.0 for a while. The new widget concept holds some promise. I want to stress that Mail, the Map and the Flickr widgets are pretty decent apps! The maps especially is very impressive and quite useful. If you haven’t yet done so, go check it out here.

mBricks receives MobileMonday Business Applications Award 2008

peer-award-2008-3 copy

The mBricks mobile application platform received yesterday one of the MobileMonday Norway Peer Awards 2008 at the opening event of the MoMo Norwegian chapter. We received the MobileMonday Business Applications Award 2008. We are happy to be recognised as a true enabler of enterprise mobility by making business application development smooth and ease the industry pain of fragmentation. During the event the members of the panel pointed out to a number of new mobile applications. We hope one day all those will be built with mBricks. We know that is possible!

Rosa María Correa, Head of marketing, mBricks

Fonts for prototyping mobile UIs

I’ve seen many prototypes of mobile UIs that can’t be built and if they could, would not be legible on a small LCD screen. So I thought I’d provide some pointers that might help those of you that is starting out. Often, people starting out prototyping mobile phone UIs get the size of the display right but the size of the font wrong. They try to stuff way too much in there, and they use a font size and font family that is not available in the phone.

If you design applications, you can make pixel perfect designs. If you design mobile web pages, you go for a rough estimate. Having the correct font is important if you design applications, less important if you make mobile websites.

Most current phones use anti-aliased fonts and many of these are available in TrueType versions that you can use on your PC. I’ve provided links to “official” sources, you may find more if you search the web, but quality may vary.

Font families

Below is an overview the OS fonts used by Tier 1 manufacturers.

Nokia Series 40 and S60

  • Nokia BW fonts
  • S60 Sans (Monotype Inc.)

You can get a TrueType version of the S60 Sans font by downloading and installing one of the Nokia S60 SDks. The fonts currently used in Series 40 devices are the same (or close enough). Note that Series 40 and S60 does not use the same font size for the same screen size however.

Prior to 3rd edition, Nokia used BW fonts, one font for S60 and one font for Series 40. I handmade TrueType versions of these fonts 3 or 4 years ago. If you need them for the purpose of mobile UI prototyping, send me an email.

Sony Ericsson OSE and UIQ

  • Sans-Serif (Monotype Inc.)

You can get a TrueType version of this font by downloading and installing the UIQ 3.0 SDK from the UIQ website.

Motorola (various proprietary OSes)

  • SynergyBasic (Bitstream Inc.)

I have a Bold only version that I once found somewhere on the intertubes, but I can’t locate it anymore. The font is similar to Univers and you might get by with that.

Samsung and LG (proprietary OSes)

I don’t have information on what fonts their feature phones uses. If you know, leave a comment or send me an email and I’ll update it here.

The Symbian versions uses the S60 Sans font, the WM versions uses Segoe Condensed or Tahoma.

HTC, Motorola, Samsung, etc running Windows Mobile 6

  • Segoe Condensed (Monotype Inc.)
  • Microsoft Nina for East Asian

Available in Regular, Bold, Italic and Bold Italic.

TrueType versions of Segoe and Nina are installed with Vista and Office 2007. If you don’t have the Condensed version of Segoe, you can get it by downloading the Windows Mobile 6 Standard SDK.

(Windows Mobile 6 Professional or Classic includes Tahoma and Courier.)

Others

Google Android

  • Droid (Ascender Corp.)

The Droid font family has a sans, a serif and a monospace version. Strangely, the sans version does not have italics.

Sans (Regular, Bold)
Serif (Regular, Bold, Italic, Bold Italic)
Mono (Regular)
Sans Asian (This is also the fallback font. Meaning it includes a glyph for all Unicode characters.)

You can extract the fonts from the Android SDK.

LiMo and other Linux variants

  • Vera (Bitstream Inc.) and DejaVu

Bitstream gave the Vera font to the open source community. Vera has been modified and evolved into DejaVu. You can find these fonts a number of places, just google them.

RIM Blackberry

Did you know that Blackberry typography is the universally accepted definition of the word “awful”? I would prefer to just put my head in the sand and pretend it didn’t exist – or at least looked better. But let’s put the pixel policing aside, here are the fonts you have access to from Java:

  • Millbank
  • Millbank Tall
  • System

All are available in Regular, Bold, Italic and Bold Italic, AFAIK. I have not found TrueType versions of these fonts anywhere.

iPhone

According to John Gruber, these fonts are included in the iPhone OS X:

  • American Typewriter
  • American Typewriter Condensed
  • Arial
  • Arial Rounded MT Bold
  • Courier New
  • Georgia
  • Helvetica
  • Marker Felt
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Zapfino

Since there is no official iPhone SDK available yet, you can only use these fonts in the browser. The way to get these fonts is of course to own a Mac. (Btw, I have a really, really nasty case of MacBook Air lust and I’m trying to convince my wife that we need yet another computer in the house.)

Font sizes

In Java ME you have 3 set font sizes Small, Medium and Large. With the new anti-aliased fonts, you have to measure what font size matches what phone screen size for the different manufacturers.

Get some screen dumps from the phone, open them in Photoshop and Visio (or whatever software you prefer) and measure what point size equals the font size on the phone. For example: a 240×320 screen Series 40 phone uses font heights of 16, 20 and 24 pixels. This equals a point size of 16, 21 and 25 in Photoshop.

In a phone web browser you can specify the font size, but how its rendered is dependent on the capabilities of both the phone and the browser. It ranges from a single font size for all text to continuously variable size. I don’t think it makes sense to spend a lot of time in Photoshop designing mobile web pages.

The entire mobile font size/screen size issue is somewhat complex and I’ll try to cover it in a future blog post.

Beam It Up, Scotty!

If you are like me, you often need to upload stuff to a mobile, either your own phone or a phone you or someone else uses for testing. There is a new website that does exactly that called Beam it up, Scotty. You can use it to send any file you want to any phone. You upload the file and the service sends a download link to the phone. The service will optionally convert and compress media files.

Best of all, its completely free! I have no idea whey their business model is, but they are located in Germany and operates under German law, so their business model can’t be harvesting phone number(s). Use it while it lasts.

Going for the World Record?

In a recent interview in Mobile Entertainment the CEO of Glu, Greg Ballard, claims that they made 25.000 versions of their Transformers mobile phone game. Wow, that’s scary!

We all know that fragmentation is a major hurdle for mobile application development, but this has to be a world record! How did they end up with that number of versions? While there is a large number of handsets out there, people don’t carry 25.000 different phone models.

Glu is a games developer and they distribute their games through more than 150 operators and distribution partners in 65 countries. The games are localized to several languages and many of these operators demand small adjustments in order to carry the game. Even accounting for this, Glu probably creates 50+ versions for each language.

(If you want to read the interview, you have to download the Print Edition of Mobile Entertainment here.)

mBricks © 2010. All rights reserved