Category Archives: Design

The ‘trouble’ with Ice Cream Sandwich

Posted on by
6

I really feel I must write a follow-up to yesterday’s post given that i’ve just spent the morning playing with the Galaxy Nexus, Ice Cream Sandwich, and the new Chrome mobile browser.

Honestly, if you had any illusions of micro-managing the web experience on devices, this new OS and browser will make you cry. Here are some initial highlights of the new browser settings:

  1. Request Desktop Site is a lovely (prominent) little option that lets users request the desktop version of a site they are looking at. I presume Google simply switches to a known non-m.dot/.mobi/mobile/touch/iphone site (elegant how we name these isn’t it?). As you can imagine, if the site is responsive this option does absolutely nothing. Logical when you know what’s going on underneath, yet pretty confusing for users. Your responsive site will appear broken…even though it’s technically not. Not sure how to handle that one…
  2. Then come the Accessibility features! These are really quite awesome (for users…maybe not so much for designers and developers…can you feel a trend here)? These consist of all sorts of well thought out and (so far) well implemented settings. My favourite so far is Force enable zoom which enables users to “override a website’s request to control zoom behaviour”. I haven’t tried it yet but I presume this means overriding any custom viewport meta tag settings which prevent sites from auto-zooming at landscape mode. End result…you should now presume some users will see the width they want to see, not the one you’ve optimised/designed for.
  3. The old Zoom Level settings (the ones I mentioned in yesterday’s article) are still there, but they are now in the Advanced settings panel.
  4. To augment the zoom levels, we now have a cornucopia of alternate settings such as Text Scaling, a lovely slider with a default of 100% and a range of 50-200%. Then there is the Zoom on double-tap slider, enabling users to control how much the content will zoom (i.e. it no longer appears to simply fit to screen on tap…it can zoom at different increments, which can result in content pushed horizontally off-screen, even on a mobile site).
  5. Not to be outdone we also have a Minimum font size setting (OMG!!) ranging from 1pt to a whopping 24pt. I’m not sure what the default even was (10 or 12 maybe?) as i’ve already adjusted it and there is no implicit default for these types of things…you just go with what ‘feels’ right (especially as they’ve labelled it points, not pixels, ems or percentages).
  6. There is also a Save for offline reading option (was this there already?) that does exactly what it says, and in the process disables most real-time behaviours such as those triggered by JavaScript, hyperlinks, and even in-page anchor elements. The document becomes so static, it may as well now be a PDF…until that is, you hit the magic Go live option which brings it back to life with a subtle page refresh (you almost expect to see those animated stars that Tinkerbell used to summon up in old Disney cartoons).
  7. There is also the usual handy Load images setting (now quite prominent as one of the few things in the Bandwidth management section).
  8. And finally, to make the brand managers quiver there is a Contrast setting (which currently seems to be disabled)…just in case you really need to see those brand colours in super high or low contrast.

When all is said and done, users have totally won this time around. They can now adjust and control just about everything related to the display of content on their device.  And why shouldn’t they? The challenge now for the industry is to find that ‘happy place’ where we learn to control far less while still offering much more.

The slow death of a (good-enough) smartphone

Posted on by
1

How long does it take for a device model to disappear off the shelves? Clearly, it takes quite some time.

Last Christmas I watched an older lady buy three Samsung Tocco Lites at about £49 a piece. Given the cost and the time of the year, these may have been stocking stuffers for her grand children.

The Tocco was released in 2009, shortly after the now infamous Nokia “Tube” and was one of the many (pre-Android) first-generation touch devices. It sported a decent resistive display and a ‘first kick at the can’ touch operating system. While by no means advanced, it was easy to use, friendly and approachable. The phone included a so-so Jasmine browser (HTML 4.01, CSS 2, tidbits of CSS 3, basic JavaScript) and a collection of repositionable app-like contraptions on the home screen. I think there was even an app store.

So in other words, to the layman, it was (and still remains) a smartphone.

To be honest, by now I expected the Tocco to be history given the sheer number of £50-ish smartphones available at the moment (most of them running Android). And yet here it is again for Christmas 2011, this time for £39.95 (£10.50/mth on contract) sitting proudly side by side with the iPhone 4S, Galaxy Nexus and Galaxy SII.

In fact, I still see Toccos on the street on a regular basis. Developers (designers, product managers…) often assume an old phone must in fact be an “old” phone…just about to be replaced, when in fact, an old phone may be brand new to the person who just unwrapped it at Christmas.

Don’t presume that just because it’s old people won’t buy it. :-)

Favourite quote (so far) from Business to Buttons

Posted on by
Reply

The ‘From Business to Buttons‘ PDF and Keynote presentations are live along with some video (look for the ‘Web TV ‘link top right of the page.)

How many times have we heard this before :-P

“Here is another new thing we have developed which will help people do things they always wanted to do and will now do everyday. We have made the important decisions, worked out how it will work, chosen the suppliers and built a very expensive prototype. You have two weeks to design it, or we will be late and it will be your fault.”

Clive Grinyer, Lipstick on a Pig.

iMode vs vending machine on a cold Tokyo morning

Posted on by
1

Hillarious video (part of a larger presentation Bill Moggridge, IDEO on Interaction Design at the 2007 Potsdam Innovation Forum) demonstrating the incredible patience required to extract a soft drink from a Japanese vending machine via iMode/QR code etc. Scrub through to about 9:35 for the iMode video.

The whole video is worth a listen and begins with an interview with iMode co-founder Takeshi Natsuno regarding the creation of iMode and follows with the creation of the first computer mouse, the designs that led to the creation of MicroSoft Windows, the iPod, Google etc.

Keitai Fashion in Thailand

Posted on by
1


I was chatting with Anina about phone fashion last week and went on a bit of a recon of what’s available in Bangkok right now. This is what I found.

Phone Jewelry (Phone Bling :-)

Plastic diamonds and gemstones for your phone are available for about $3-4 a package. Most consist of sticky diamond hearts and multi-sized and coloured gems that you can randomly stick on your phone. Others however, are pre-arranged to form a shape like a heart or hello kitty character. Others still, are meant to fit perfectly around the keypad and designed with particular models in mind.

Stickers

These mostly seem to come out of Korea and China. For about $3 you get a sheet of stickers (hearts, balloons, kawai characters etc.) that you can arrange at will—or larger stickers that are meant for particular spots on the handset. The later are die-cut to fit around the keypad although there don’t seem to be any particular models in mind so it looks like some creative trimming may be involved.

I also ran into some privacy screens which are basically screen protectors designed to evade handset eavesdropping by making it difficult to see the screen from an angle.

Branded Phone Straps

There are tons of these around. The price ranges from $2 all the way up to $20 or more depending on where you buy them and what branded character is hanging off the strap (and how legally the character has been licensed.) Sanrio and San-X characters are pretty popular but the fad right now is Kubrick style vinyl bears. Most of them are very cheaply produced but I saw one store with at least 30-40 different styles of bear straps. A great example of some of the stuff available here can be found on this site devoted entirely to Japanese phone straps.

Fashion Straps

For the older crowd, there are lots of alternatives as well. I ran into a rack of supposedly Calvin Klein straps which were quite elegant—just a short leather strap with a small diamond on the base. Others are a bit louder and include sequins, diamonds and bells (lots and lots of bells!) It’s also easy to find straps aimed at the ethnic Chinese minority with good luck charms and the ubiquitous beckoning cat.

Interesting to note as well that despite their perceived cute-ness, phone straps are in use by young and old of all genders. It’s not unusual to see adults (even men) with small branded characters dangling off their phones. My favourite last week was a 20 something man on the subway carrying a 6680 with a huge fuzzy pink heart dangling off of it. The heart was bigger than the phone!

Phone Rests

I love these things. Basically, they’re bean bag chairs for your phone—usually with a hole in the middle so that the handset sits in a comfortable vertical position with the screen and softkeys visible. These can be as expensive as $20 and often also include some sort of branded property.

Phone Cozys

Basically these are things to carry your phone in. They’re often no more than little cloth drawstring bags but some can be quite stylish. At the cheap end, they can cost as little as $2.

Fashion Covers

These have been popular for years. For starters, you can buy a plastic coloured cover for almost any Nokia or Sony available. Some vendors carry nothing but covers and it’s quite amazing to watch them pop an old cover off and pop the new ones on. Every time I try i’m convinced i’m going to permanently damage my phone.

Lately, the fashion seems to be cases rather than cover. These are thick slightly opaque plastic (similar to certain iPod covers) and make the handset almost bullet-proof as a result. Once again, they are specially designed for your model and often emulate the brand (or even another brand) somewhat. A popular cover lately is a pink floral 6680 cover that makes the phone look like a pink N70 from a distance. Here again, the price ranges from $3 to $10 or more.

[Lots more on the Thailand mobile scene in this older post.]

SVG and Monotype Fonts

Posted on by
Reply

My graphic designer roots are showing :-) Yee olde font house Monotype is partnering with Ikivo (which provides mobile SVG products and players) to release a series of scalable (!) fonts for mobile devices. The ESQ® Mobile series includes 200 fonts and quite a nice selection (PDF) at that.

“Monotype Imaging’s ESQ® Mobile mobile fonts are based on the industry standard TrueType and OpenType font formats and can be licensed by developers, content creators, application providers, mobile publishers, wireless operators and handset manufacturers. Integrated with your application, content, game, service or user interface, ESQ mobile fonts allow you to differentiate your product with something powerfully simple—scalable type that’s distinctive in style.” [via UK Mobile Marketing Magazine)

This is not the first scalable font announcement i’ve heard (and of course embedded desktop/print-designed fonts in Flash Lite do scale—though not always reliably in my experience.) Other announcements have been focused on Asian font sets exclusively. This mobile SVG-specific announcement is particularly interesting as the SVG deployment stats are already quite impressive. The most up to date list of models that are shipping with SVG Tiny 1.1 is pretty big (especially once you take into account the popularity of some of these handsets.)

  • Motorola: C975, C980, E770V, E1000, i580, i870, i875, i880, i885, V3X, V975, V980, V1050
  • Nokia: 3250, 5500 Sport, 6125, 6126, 6131, 6136, 6151, 6233, 6234, 6265, 6280, 6282, 6288, 7370, 7373, 7390, 7710, 8800 Sirocco Edition, E50, E60, E61, E62, E70, N70, N71, N72, N73, N75, N80, N90, N91, N92, N93, N95
  • Panasonic: MX6, MX7, SA6, SA7, VS3, VS7
  • Sagem: my-X8, my-V76, my-V85
  • Samsung: D600, E350, Z300, Z500, Z560, ZV10, ZV30
  • Siemens: C65, C70, C75, CF65, CFX65, CL75, CX65, CX70, CX70 Emoty, CX75, M65, M75, S65, S75, SF65, SL65, SL75, SK65, SP65
  • Sony Ericsson: D750, F500, K300, K310, K320, K500, K508, K510, K600, K608, K610, K700, K750, K790, K800, M600, P990, S600, S700, S710, V600, V630, V800, W300, W550, W600, W700, W710, W800, W810, W830, W850, W900, W950, Z500, Z520, Z530, Z550, Z558, Z710, Z800

and there are many more. According to Ikivo, shipments of SVG have to date reached 150 million units and over 150 devices. (PDF)

Depending on the implementation and availability within products and services, scalable fonts could—at the very least—enable accessiblity features, allowing users to adjust fonts for size and legibility within the O/S. On a more personal level however, fonts as fashion/lifestyle may finally become available to the mobile realm as they already are in print and digital.

“Now that text-writing has become digital, design-savvy Koreans have paved the way for a growing market for fonts, the style that is used in text design. Revenue for buying fonts to use on blogs is increasing and graphics firms are developing more Korean fonts. Chin Mi-young, a college student in Seoul, uses different fonts to write on her Cyworld Web site, depending on her mood. “I don’t like the conventional-looking fonts, but the ones that look like real handwriting,” she said. “When I’m happy, I want to express myself with a cuter font.”…

Pyun Suk-hoon, head of Yoon Design, one of Korea’s largest commercial typography-developing graphics companies, said that these trends show that fonts are now considered a fashion. “Young people like to express their individuality and their culture visually, which is why they decorate their Web sites with different designs and now, different fonts,”" [via Joong Ang Daily)

Mobile Usability & Design Resources

Posted on by
1

Most of this stuff is from Nokia and specifically S60 related but there’s lots of good information regardless of the O/S or platform you’re developing for.

  • Usability Culturally Speaking: Short paper by Nokia introducing common issues such as differences in text direction, colour usage, iconography, number and date conventions etc.
  • Series 60 UI Style Guide: Just what it sounds like :-)
  • Series 60 Usability Guidelines for J2ME Games: This is a really useful document. Many issues addressed will be useful to not only Flash Lite developers but creators of small advertising or content based application. Also includes sections on game experience and gameplay.
  • Turn Limitations into Strengths: Design one Button Games: Another good one for Flash Lite developers. Short but useful article with reference to an old Gamasutra article/tutorial and a great quote by Noah Falstein “When you find yourself constrained by a difficult circumstance or combination of limitations in design, look for a solution that turns those very limitations into a fun solution. Try to make the limitations work in your favor, not against you.”
  • User Experience Checklist for J2ME Applications: Once again, good reference for everyone with headings to indicate which checklist items apply best to which OS or type of application (ie. games etc.) Lots of good stuff including handy tips like “Application has been tested with actual end-users, not just in-house developers, The user is not forced to guess the right format for information and Obscenity or foul language is not used.” LOL!
  • Designing XHTML MP Content: From Nokia again. Includes a checklist of “top guidelines for optimizing mobile XHTML services” as well as details on each XHTML MP element. Found through the W3C Mobile Web Best Pactices reference section.
  • Browsing on Mobile Phones: Short paper from Nokia discussing usability as it relates to mobile web content and the Opera-style single column layout.

And just for fun, the Series 60 Themes Illustrator Sketching Templates. Great idea this—an Adobe Illustrator file including real vector S60 UI layouts and menu elements. Great vector artwork. Very handy for mockups!

BTW-Most of these were found on Forum Nokia.

Casual Mobile Snacks for Everyone

Posted on by
11

Juniper Research has just released a white paper (PDF) on future trends and market opportunities in mobile gaming.

The casual games sector is going to be the market driver, even though it may not be at the leading edge of mobile games technology. Casual games make most use of the inherent advantages of the mobile platform. People want to fill ‘dead time’ with easy to use, but fun games. This is the same in just about every culture.

This is hardly news. Casual games, content and entertainment are ideal to fill those ‘in-between-moments’ you spend with your devices. Dave Gosen, CEO of I-Play calls it “snacking“

“mobile gaming is a snack, console gaming is a 3-course meal. They are a different user experience”.

At Vidfest last week, I overheard Pierre-Paul Trepanier, Director of Marketing for Nintendo Canada explain that with Brain Age, they’re starting to see a shift in game and device buying patterns. While it’s impossible to tell the age group that’s actually purchasing the game (is it gift? personal purchase? etc.) what they have been able to track is the overall contents of purchases.

So far, they’ve found that most people seem to be buying Brain Age along with a Nintendo DS—which would indicate that some of them are maybe not already gamers. Or at the very least, are new to the DS (or possibly—handheld gaming) market.

A Cingular webcast I sat in on yesterday listed the top 5 casual game genres as

  • Arcade/Puzzle (32.1%),
  • Casino (20.7%), Card (19.1%),
  • Retro Arcade (14.2%), and
  • Strategy (12.2%.)

(Top 5 Mobile Game Genres by Country: % of Average Monthly Downloaders, quarter ended Jan 2006, via Cingular “Introduction to Downloadables”)

This is all well and good and certainly would indicate that the casual game market will grow; but I think the term ‘casual game’ may be a bit narrow.

Let’s forget games for a moment and talk about play.

Think back to your typical ‘break-time’ at school, as a child. Twenty kids scattered around the room. Some are alone—reading, building stuff, sorting stuff, examining stuff, breaking stuff, staring out the window, contemplating the pattern in the weave of the carpet. All good stuff.

Others are in small groups—maybe 2-4 kids—doing very much the same thing—just together in some way. Even there, differences emerge. Some participants are passive. Others prefer to lead the interaction or instruct others.

Then you have the kids who roam or browse around the room. Call it low attention span or call it curiosity. (Does it really matter?)

Now look around the office during break time. Are adults really that different? And do our current casual ‘games’ offer something for all these different types of ‘users?’ (nasty impersonal word btw…must stop using it…)

Do current mobile games allow for quiet time, playful time, competitive time, learning time, contemplative time, silly time..?

We have a unique opportunity with mobile devices in that they can be insanely personal and private while being incredibly social and contextual (presence, location etc.) They can offer small moments of quiet play or learning—no peers, no pressure—or small moments of highly networked interaction and competition. Not to mention hybrids of the two.

I think we’re currently just scratching the surface.

Play...?

Photo credits:

‘old pic| traffic’ by miss_pupik on Flickr, licensed Creative Commons Attribution 2.0

‘Karen plays as Luigi’ by drag on Flickr, licensed Creative Commons Attribution 2.0

Mobile Tomorrow

Posted on by
Reply

I read an interesting white paper from TechSmith entitled UX 2.0: Any User, Any Time, Any Channel.

The premise was this: Web 2.0 is allowing users to create their own experiences. They can use APIs (and API-based UIs and services) to choose what they see and interact with, or mix and mash it to create an experience of their choice. This creates a problem—how do you build for, and anticipate user’s actions when you don’t really know what data or widget they will be interacting with?

This got me thinking about the future of mobile design—especially using fairly rapid and iterative-friendly development tools/platforms like Flash Lite and Maxdox.

(But first, a look at where we came from)

The Desktop

In some ways, designing for the desktop was dead easy. Development times were typically long (lots of time to plan and test), most of the products were applications (lots of functional requirements but relatively easy to test “Can the user easily find and use the print button—or can’t he? Does he get the expected result to his actions? “) Users typically only had two input mechanisms (a mouse and a keyboard) and screens were large—accommodating a seemingly endless number of dialogues and controls. Very soon, we began to figure out the language and means of desktop interaction…

  • the window/tabbed window
  • the dialogue box, check box, radio button, input field
  • the drop down/jump menu
  • the actions: click, double-click, drag, highlight, scroll
  • the toolbar(s) (stacked, floating, or docked)

Sure there’s been evolution (the Macromedia’s stacked menu interface, 3DS Max’ endlessly multi-layered scrolling pane, and Microsoft’s next release of Office are good examples) but, a decade onwards, the overall interaction for the user is still pretty consistent. You almost never come across an application that asks you to only navigate using the letter ‘f’, quadruple-click to select, or overrides a whole bunch of keys for custom interactions.

Enter mobile devices

On your typical handset we now have…

  • a small screen
  • a device that’s typically operated with one hand/thumb only
  • a wide—yet restrictive—number of keys
    and controls

    • 2-4 (?) soft keys (some customizable, others not)
    • a (5 way) navi-pad
    • the occasional custom key
    • the occasional jog dial
    • a fairly standard set of numerical keys

Pretty different, yet historically, the mobile development process has actually been fairly similar to that of desktop apps.:

  • relatively long development time (C, J2ME)
  • lots of planning and testing
  • develop mostly applications or games (vs content)
  • carrier and OEM standards meant even more testing
  • upside: after all that time, testing and money—you hopefully had something pretty usable
  • downside: you likely had little patience for true experimentation in choice of content, user interface design or functionality (too risky, too high cost)

Now enter rapid development tools for mobile devices. They have many advantages…

  • easy and quick to prototype
  • freedom to experiment with completely different forms of interaction
  • freedom to make mistakes and correct them based on user input
  • freedom to develop content or products with more organic functional requirements and interfaces

as well as disadvantages…

  • freedom to come up with and release bizarre unusable interfaces
  • freedom to barely create an interface at all
  • freedom to hijack standard keys for unusual purposes
  • freedom to define new audiences or completely forget you have one
  • freedom to have an audience of one and not really care
  • freedom not to test, document or provide support :-)

In other words, it’s kind-of about re-mixing and user-generated content all over again. (Except I hate the term ‘generated.’ It brings to mind cold impersonal data rather than the type of playfulness, creativity and intent that is required to make something special and personal.) A better example of what i’m getting at…

A few months back an Australian educator told me that certain districts had purchased copies of Flash to begin incorporating mobile content creation into their technology curriculum. Faced with a small blank canvas, a navi-pad and a couple of keys—what will the mobile designers of tomorrow create? What rules will they break? Will they do things we corporate folks have been too scared to do?

What ways will they incorporate location, context and personalization into what they create? And what will they choose to create for an audience of peers?

Whatever it is, it’s bound to be interesting…

“I dream of the day when users will tend to their interfaces like to a collection of beautiful, nimble, integrated, task-focused widgets.

I dream of the day when our mobile networked tools will take full advantage of our playfully messy world-making capabilities.

I dream of the day when our little screens will cease to be aquariums for our data and truly become seamless conduits to our world of relationships with people, with information, with things.”

(via this brilliant post by Freegorifero)