Add this to digg, del.icio.us, etc.

I’m sure a major consideration in this Wired/Adobe solution is the print-centric nature of magazine design. Layouts appear to be adapted from print and ported to the digital screen, which is compelling for now. Where this model succeeds is that it’s much more compelling than pouring content into a “page” rendered by a browser, and may be precisely why readers still want to engage with a publication where each story is curated and designed.

Countering the criticisms

In casual discussions here at Punchcut, the chief criticism is that the UI still relies on a persistent overlay. The reader steps out of the magazine flow into a browsing flow with scrubber-bars for moving forward and back and for navigation. These exist as a layer on top of the content. For me, this is a minor nitpick in the UI. The Wired UI does allow for a more immerse experience at the story level, by allowing users to directly manipulate content on the touch screen.

Also, whether this is a future-proof design approach is in question, and in that sense, this approach may be a bit shortsighted. Yet, as a designer who misses some of the control of a printed page this is a strong step in the right direction for digital adaptation of print. It lets us preserve the notion that in a publication context, a designer in conjunction with her editor will treat the content, curate an experience and lead the reader along a story arc. This is storytelling and should not be confused with browsing.

Add this to digg, del.icio.us, etc.

Are you designing a promotion experience or a product experience?

App-vertising is emerging as a means for brands to engage with consumers through downloadable mobile apps. Marketing and advertising professionals herald the growing app trend as a more sure entrance into the elusive mobile landscape. The fragmented mobile device and mobile OS landscape confined marketing to the lowest common denominators: which meant WAP sites and SMS campaigns.

That landscape has shifted significantly and is primed for brands to connect more deeply with consumers. Four key reasons the opportunity is real:

1. Smart phones are capable of delivering rich applications (not just games and wallpapers);
2. A critical mass of mainstream consumers now have smart devices in hand;
3. Users have a voracious appetite for app downloads (and not just for iPhone, Android, Palm, Nokia all have app stores in play)
4. Brands can stand alone in app stores and are no longer constrained by carrier’s walled gardens

Yet, slow down a little before throwing your budget at an iPhone app. I’d like to offer insights on the approach that will make the difference between mobile experiences that get adopted – and therefore extend brands – versus those that provide merely a flash in the pan.

Forget the marketing funnel
The fat end of the marketing funnel doesn’t readily apply because mobile applications are not primarily an awareness-building platform. It’s not about creating brand loyalty or buzz with clever, but short-lived experiences. There will be exceptions: but as a rule, the mobile app marketplace is not the place to deliver a viral mega hit, no matter how “viral” your creative is. The app marketplace requires a user to install something that they will later have to delete, so thinking of mobile the way you think of YouTube is a recipe for a quick delete. The awareness and the buzz will come later, after your users are enamored with how nicely you’ve thought about making their life better and they tell their friends.

When brand managers embrace the mobile lifestyle they will begin to understand that the mobile app opportunity is a product development or even a product extension opportunity. Yes, there will be (and are) branded apps that “go viral”, but not becuase they are funny or witty or clever. The sticky apps will have become part of a users regular, rhythm. My aim is to provide some guidance for teams to develop that mindset.

The mobile context amplifies permission marketing
If you’re tuned into the advertising and marketing zeitgeist you’re of course aware of the post-advertising and post-marketing backlash that marketing authorities like Seth Godin and Story Worldwide have built their reputation on. Their prevailing belief is that interruption-based advertising will struggle against brands that first get permission from their audience and are driven by friend recommendations from socially connected experiences.

People are bombarded with information and ideas and are constantly filtering for things they can safely ignore. Permission marketing says if a user invites you in, you have their trust and you know they’re listening. And you don’t betray that trust with loud messaging. Those principles are only amplified in mobile because mobile is the least passive of media. We’re talking about the most intimate of media: a device that is always on, and that is with users at all times. A device where they select what apps they download, sites they view and people they connect with. It’s arguably easier for users to ignore intrusions in mobile than any other medium.

Mobile is the perfect vehicle for brands that understand the post-advertising age because interruptive marketing backfires in mobile. Bluetooth advertising was hailed in 2006 as the hottest mobile marketing opportunity. It was supposed to kick-start mobile, location-based advertising. It was hot for advertisers, not consumers. Users quickly shunned bluespamming as a completely intrusive and unwelcomed breach. Users revolted against the theaters and other locations that were broadcasting bluetooth spam.

Mobile devices are the means through which users will interact with the world around them and brands that want access to that device must be invited. Sure, the downloads indicate users are willing, but how do brands acknowledge that trust and enhance that relationship without becoming a throwaway app or worse, breach the trust that got them invited.

The mobile app mindset
In the app space, think productivity and tools. You have a chance to make life easier for your user. The deeper opportunity is to rethink your brand’s promise and conceive services, tools, and maybe for the right categories, entertainment. Any experience must deliver on your brand’s promise or extend a brand’s story.

How to gauge your mobile app concept
_ Does the app give users a reason to regularly use it?
If not, then you’ll probably getter impact from a mobile web site. Ask yourself: Am I designing this so that someone will play with it once, in hopes that they’ll refer it to a friend? Question yourself if you’re designing a single-use experience.

_ Does the app help users simplify the things they do or provide the quick ability to do something they’re already doing in other ways?

_ Does the application enhance a real-world experience?
Does it enhanbce a social environment among friends, in a retail space, at a theme park?

_ Does the application tap into the phone’s built-in features?
The devices native features like a camera, GPS, compass, contacts and messaging let apps go beyond what a mobile web site can do.

_ Why would somebody prefer this app over a mobile web site?
Or even a desktop web site?

_ Will the app compete in a compelling way with what’s already out there?
Brands are giving away great utilities for free in exchange for deeper brand loyalty from users in their category. The team behind the successful examples of these apps show some restraint. They correctly resist the urge to monetize the app or even include heavy-handed “where to buy” messaging.

_ Are there paid apps out there that my brand can deliver for free?
There are lots of great apps for tracking a diet or exercise regime. A fitness clothing brand could readily create an exercise regime management app and extend their brand story with a tool rather than merely a store locator or an outfit configurator tool.

Long term impact for brands
Mobile applications will become a more dominant part of the ecosystem through which brands connect with users. We’ll see lots of experimentation and innovation coming from ad agencies but in the end, the experiences that users adopt will be those that make their life easier, or more fun, and enable them to make deeper connections to the real-world around them.

So, to be clear, I’m not focusing on banner or text ads served from within apps (so called in-app advertising). The numbers indicate mobile has better click-throughs than the web, but I’m happy to leave that discussion to someone else’s expertise. (You may be interested in my thoughts on mobile web versus mobile apps.)

Punchcut is a user interface design and development company specialized in improving users’ experiences with mobile device, desktop and television user interfaces. Punchcut provides strategy, design, and development services – from original user research and usability studies to the complete design and development of custom interfaces and applications. Punchcut’s clients span the consumer electronics industry including device manufacturers, technology providers, service providers and content brands. Punchcut partners with clients to create solutions that engage customers, streamline transactions, and enhance digital user experiences.

We’re not a mobile marketing agency in the traditional sense. (We don’t develop marketing campaigns or mobile banner ad buys.) We focus rather, on applying our understanding of the mobile lifestyle – the ways, the features and the modes through which users engage their world – to our clients’ product and application interfaces.

Add this to digg, del.icio.us, etc.

Typographers have been organizing complex sets of information for hundreds of years. In that process they rarely rely on boxes to convey hierarchy and organization. Why do interface designers feel a need to draw a box around every element in a user interface? What is it about nested boxes, even three or four levels deep, on one screen? In this article I hope to lay out some basic tools perfected by typographers, that apply to interface design.

// Spacing

It’s a given that real estate on screens is precious. There simply isn’t that much to go around. Web designers are pressured to avoid horrific page reloads by packing everything onto one screen and it’s only compounded by the pressure to keep it all “above the fold”. For mobile designers with tiny screens the challenge is even more stark. Yet still, the temptation is to pack everything onto the idle screen of a device experience — “bubbling up” content from every app on the device. Desktop designers are pushed to keep every option in front of users at all times (button bars anyone?).

Print designers have faced similar pressures since forever. It’s expensive to chop down trees, mash them up, print stuff on it and truck it around. Even so, typographers talk about “white space” as a tool. They use it to establish hierarchies, where more important things get more space. They use it to separate individual elements. Sometimes a separating space doesn’t have to be any larger than the dividing line that another bounding box would add.

Mobile designers are rediscovering the value of space as touch screens enforce larger elements, and generous space in response to the physical limitation of human fingers. In the process they are discovering that a little space can be useful to communicate meaning.

Space is commonly used in typography: leading (the space between lines), indentation, letter spacing (giving words more impact by spacing our their letters). Other less obvious examples might be starting the text half way down the page at the start of a chapter or even blank pages at the beginning of books.

A little space can go a long way to creating a clear and uncluttered screen.

// Punctuation

How often do we draw another box, when a simple colon or pair of parenthesis would suffice? Ironically, the first boxes drawn around computer interface elements were drawn with punctuation on text-only screens.

Imagine the common problem of indicating that there are new messages available to view. Typographers might use punctuation, perhaps an asterisk or a number in parenthesis to indicate the related information. Interface designers often draw a box, perhaps inset with faux dimensionality into the box that contains the list item (which is contained by the box that is inexplicably drawn around the list that fills the entire screen).

Another example might be the the cursor in text only interfaces. The cursor is a typographic solution to indicate focus.

// The Grid

You don’t have to talk to a typographer about layout very long before “the grid” comes up. Looking at the design, however, you might not see evidence of any grid at all. The typography may appear to be haphazardly placed, with varied column widths and wide variation in placement from page to page. Somehow, magically, it all feels like it fits together though. Then the typographer reveals the mystery. They pull out a page showing a complicated mesh of squares, sometimes evenly spaced, sometimes not. At a second look, everything in the publication lines up with this invisible grid. Columns of text, headlines, lists, callouts all derive their structure from this consistent pattern that sits invisibly under the design.

Interfaces are seldom so disciplined. Sure, certain areas may be designated for specific purposes (a title bar, for example), but they get boring, never moving from screen to screen. This creates problems when attempting to differentiate and communicate a sense of place as users move between screens. (This often causes interaction designers to suggest color coding to solve the problem … yuck!) What’s more, size relationships between elements are haphazard, with each item shrink wrapped in their boxes to take just enough space. This can make for a messy screen layout, but gets even worse as different screen types are needed. There is no underlying system to order the chaos.

Typographers often use an even more rigorous structure called a baseline grid. This tricky beast requires that each line of type within a design align to an tightly spaced horizontal grid. Imagine a page of blue lined notebook paper in the background where all type sits on one of the blue lines.

While at first it may seem that the limitations of a grid would make designs more difficult, in reality it enables a kind of internal consistency that brings a design together. Because a consistent structure has been achieved, the designer is able to create greater extremes in other parts of the design system without throwing away its cohesion.

// The Typographer’s Scale

Graphic designers often use a “typographer’s scale.”. It’s basically a limited collection of sizes to be used in a design system. A common collection of sizes might be 9, 12, 18 and 36. You might recognize the sizes from font menus on computers, which drew their inspiration from these scales. The idea is that there can only be so many levels of size hierarchy before things get messy, undoing the purpose of the hierarchy in the first place.

Type systems created for interfaces are often arbitrary, depending on what will most easily fit the information. A small screen may have 7 or 8 different sizes and styles of type, which confuses the system. Alternatively, many devices only use one size and type style, making for a very unstructured layout, that then needs to be saved by drawing different colored boxes around everything to establish relationships.

The moral of the story? Use different type sizes, but not too many. It may not seem necessary to apply this type of rigor across an entire system. A type system that uses a limited number of sizes across all screens can create continuity that is not possible in a per screen approach.

// Indentation

Indentation is simple. It uses little space, yet it clearly communicates a break in text. A simple deviation from the left alignment might be used to indicate focus in a directional five key system.

// Weight / Italics

Bold and italic type variations are used by the most novice computer users to indicate differences in priority and meaning. Be careful about using too many different type styles on a single line or even on a single screen, though. Like with size and space, too many levels of hierarchy just make a mess.

// Type families

While the selection of specific type faces is extremely important, choosing the types is only a small part of the practice of typography. Good typesetters can make very bad fonts look passable and can make good fonts look amazing. Likewise, poor typography can ruin an otherwise fantastic face.

Here is a quick rule for picking a type face. Ask the question, “What does this type mean?” If you can’t answer the question, find out before you use it. Typographers learn to understand the subtleties of style and cultural context before they choose a face.

Good interface designers learn to ask similar questions about their work. Subtle changes in structure, rendering and motion may contain stylistic and cultural meaning.

Technical and usability considerations should also be taken into account when choosing a type. Does readability become a problem? Does the type perform well at the specific sizes where it will be used? Does it have the appropriate range of characters, sizes and weights for what is needed?

Another consideration is variety in type families. Often a combination of types can be more interesting than a single face. Be very careful here. More than two types in a system can cause problems. If you are using a second or third type, make sure that you weigh the impacts to the structure of the screens. Is it making relationships more clear, or is it just making a mess?

// Rules

Sometimes the page does need a little extra structural help beyond what the type can provide by itself. It might be that each line has many types of information, and things are starting to look messy. Before you draw another box, consider using a typographer’s rule. Try using a horizontal rule (a thin line) that does not go edge to edge. Also, don’t forget the possibility of a vertical rule.

// A Challenge

Here is a challenge for interaction designers: draw your wireframes without the frames today, excepting the frame around the screen. See if you can communicate the information through typography (scale, space, weight). And for visual designers: present a direction in your next review where there are no boxes around key elements. See if you can communicate your system on an open page, using typography instead of boxes to solve the problem.

Add this to digg, del.icio.us, etc.

ADOBE MAX 2009, LOS ANGELES - Christian Robertson, Design Director at Punchcut will present “Design Considerations for Contextually Aware Solutions” at Adobe MAX 2009 in Los Angeles. He will speak alongside Ali Ivmark, Design Manager on the Adobe XD team. They will discuss the design process for successfully creating multi-screen user experiences that adapt to changing contexts of use. They will include key process, prototyping and publishing insights for designing mobile and multi-screen user interfaces.

Session Title: Design Considerations for Contextually Aware Solutions
Presentation Time: 3:30pm Wednesday, October 7, 2009; Room: 510
Attendees can register for the session with the Adobe MAX Scheduler.

Add this to digg, del.icio.us, etc.

SELECT QUOTES

“Mobile is not a device, it’s a lifestyle. Life is mobile, media is mobile; your mobile is the ultimate social networking tool. The information and the tools built into the virtual world of mobile provide the ideal way to meet up in the real world.” — Jared Benson, Executive Creative Director, Punchcut

“[clients] are increasingly asking for embedded social networking aspects across device experiences. Our handset and carrier customers want to give users ubiquitous access to the people users care about. Users want to see their address book paired with location, so they can view their friends in the context of who is nearby.” — Joe Pemberton, Brand and Marketing Director, Punchcut

“We begin by asking, ‘How can we use a mobile device to help us connect in the real world? What contexts do we include, and what tasks do we want to perform?’ Consider how social networking can be combined with a mobile handset to supplement the physical experience of shopping. The mobile phone can enhance real experience by including maps to find friends …The virtual device adds to the experience.” — Shilpa Shah, Associate Director of Interaction Design, Punchcut

ABOUT COMMUNICATION ARTS

The magazine is in its 40th year and has a very strong reputation in the visual design and marketing communications fields and boasts a worldwide distribution of 60M.

Add this to digg, del.icio.us, etc.

Watch this piece demonstrating Cisco’s Webex app for enterprise iPhone users.

Add this to digg, del.icio.us, etc.

I’m not sure why Mashable is calling this an Easter Egg. Probably because “shake-to-activate-super-cool-feature” is not intuitive to discover at all. (I’m also not sure why Mashable suggests Yelp snuck this one past Apple.)

Puzzles abound. Nonetheless, enjoy the video.

Add this to digg, del.icio.us, etc.

It’s that time of year when SXSW Interactive puts all the approved talk submissions up for public vote. We hope you’ll take a moment and vote for these mobile and device user experience sessions. Voting ends September 4th.

1 // “Convergence: Already Here, and Gosh It’s a Mess!“
Speaker: Gabriel White, Punchcut
Convergence is here and it’s a big mess. People are using services and media within hacked-together ecosystems; systems without neat connections or beautiful symmetries. Punchcut will share the user insights and design principles needed to create applications and services that integrate into emerging digital lifestyles and convergent ecosystems.

2 // “It’s Slow, Ugly and Not What I Designed: How to Ship Good Design”
Speakers: Patricia Slechta & Christian Robertson, Punchcut

Has your user experience ever been lost in translation? You see the mobile device in the marketplace and you hardly recognize it? Punchcut will share insights and explore organizational principles that bridge design and the go-to-market reality. We will discuss ways to prevent user experiences from being lost in translation.

3 // Crowd Sourcing The Planet: How Mobile Devices Become Sensor Arrays That Can Aggregate A World Of Content
Moderator: Henry Tirri, Nokia

Mobile phones are becoming mobile computers with multiple sensory inputs such as cameras, GPS, WiFi, Bluetooth, light sensors, NFC and etc. Users of these devices have an enthusiasm for sharing data and content, and as more contribute the possibility of aggregating content together into new forms has wild potential.

4 // “Innovation for Hire: Innovating in the Client Relationship“
Speaker: Jodi Burke, Punchcut

Being a consultancy (or a freelancer) means working with clients to develop innovative concepts, but how do you prevent them from being pared-down, watered-down or shelved? This process-oriented session will present battle-tested techniques on how to partner with clients in order to get innovation to market.

5 // Time + Social + Location. What’s Next In Mobile Experiences?
Moderator: Josh Babetski, MapQuest

As more devices become location aware, social uses will continue to evolve beyond just who and what, to WHEN. Adding the temporal dimension creates new opportunities for social interaction. Learn about ways to leverage and use technology to add features at the intersection of temporal, social, and location.

6 // Death of the Browser
Speaker: Daniel Jacobson, National Public Radio

With the tremendous growth of the iPhone and other mobile devices, are we about to witness the death of the traditional desktop web browser? If so, how fast will it happen? Or can the browser and mobile phone live in harmony in the years to come? This panel will explore the future of the mobile space and how it will impact the way we interact with the Internet.

7 // Mobile Technology: What’s New, What’s Out, What’s Next?
Speaker: Anup Murarka, Adobe

There’s lots of talk about creating engaging experiences for consumers on their mobile phones… but what’s the reality? Hear some of the industry’s top players as they hash out what’s hot with mobile technology, what needs to be changed, and what the future holds.

SXSW Interactive 2010 is held in Austin, Texas in March 2010.

Add this to digg, del.icio.us, etc.

The Carnival of the Mobilists aims to showcase some of the best mobile-focused blog posts from the mobile blogging community and Punchcut is delighted to host edition #184 here at Idlemode. Our team has authored several articles featured in past Carnival editions, but if you don’t know us, we’re a San Francisco-based UI design company focused on strategy, user experience design and development for the digital lifestyle.

Contributions this week cover a breadth of topics from Tomi Ahonen, Dennis Bournique, Judy Breck, Tam Hanna, Volker Hirsch, Holly Kolman, Sanjeet Matharu, C. Enrique Ortiz, Howard Rheingold, and Peggy Anne Salz.

1 // Convergence - Converging between virtual and physical

Howard Rheingold at SmartMobs shares his observation and spider-sense on the convergence experience, titled Toward the era of (printed?) sentient things…

“Watch smart mobs emerge when millions of people use location-aware mobile communication devices in computation-pervaded environments. Things we hold in our hands are already speaking to things in the world. Using our telephones as remote controls is only the beginning. At the same time that the environment is growing more sentient, the device in your hand is evolving from portable to wearable. A new media sphere is emerging from this process, one that could become at least as influential, lucrative, and ubiquitous as previous media spheres opened by print, telegraphy, telephony, radio, television, and the wired Internet.”

2 // Mobile App Stores vs. the Mobile Web

Volker Hirsch has an insightful post touching upon the dilemma and pain points around developing for mobile app stores versus the mobile web in So, Google: App Store or Web? Or Both?.

“Whenever possible, services will move online because it is cheaper to produce. Whenever necessary, they will be delivered through dedicated apps because it is required to use them!”

Dennis Bournique at WAP Review has posted a response titled Is the Web on Mobile Phones “Total
Rubbish”? to Malcolm Murphy at Mobile Industry Review. Dennis thinks the problems of mobile web are fixable and being worked, but accessing web content using applications is not scalable.

“Applications are important and will be increasingly popular with users. There are some types of services like navigation and mapping that will probably always be better as done an app. But it is the browser where the real growth in the consumption of cloud based data will occur. The reason is scalability. Apps are not scalable on a couple of levels.”

In Resolving Device Fragmentation Issues - Mobile Web and Local Apps (and Google), C. Enrique Ortiz at About Mobility commented on Google’s comment at MobileBeat2009 about mobile apps and the future.

“But it is IMHO that local apps are here to stay; because limiting apps to browser-based apps will be too limiting, in functionality and richness and in programming models and at times in speed. And because it is about the developer community (internal and external), “limiting” will translate to less innovation.”

3 // Mobile Web Widgets

Sanjeet Matharu blogged about a devcamp event featuring Summer Of Widgets competition held by Betavine, Vodafone’s mobile developer community. Vodafone is offering weekly prizes to developers throughout July and August. The success criteria includes Ease of use, Creativity, and Value to the potential user. Here is what they meant by “Mobile Widgets”.

“Mobile widgets are mini applications that sit on a handset and can be personalised to retrieve relevant information from the web. They provide ‘always on’ services based on the information users want to receive, and are a new touch point for how consumers use the mobile internet.

Widgets are based on web code rather than on specialist programming language, which makes it possible for both professional and amateur developers to tap into their potential.”

Related Links:
Primer Cañas&Widgets en Madrid
Paco Marín (Vodafone): “Android es mejor que Symbian para crear comunidad”
www.flickr.com/vodafone_es

4 // Mobile Web

Holly Kolman has a post on how the .mobi domain name can make a site not only mobile-friendly, but kid-friendly.

“Keeping with the trend of corporations using a .mobi domain name to shorten an ugly long URL, Disney uses the domain name HannahMontana.mobi instead of trying to get kids to remember http://m.disney.go.com/m/hmt/t/index.”

5 // Mobile Phone Based Clinical Microscopy

Judy Breck at GoldenSwamp wrote an interesting piece, titled Collecting visual information mobilely to highlight a research product, CellScope, a mobile phone microscopy, developed by researchers at the University of California, Berkeley. It leverages portable, camera-enabled mobile phones for diagnostic imaging and telemedicine.

“…the ability to take images wherever you happen to be and transmit them to a clinician has major potential for improving health care in developing countries where to a large extent microscopes are not available.”

6 // Palm Pre

In Palm Pre market share - real US figures, Tam Hanna speculates on why Palm is not particularly talkative about the Pre’s market share based on some real US figures that have just been released by mobile advertising provider AdMob.

“Some Palm heads hoped that the Pre could become a success similar to the iPhone: this definitely hasn’t happened (and probably won’t happen in the near future). The real question we have to ask each other is if Palm can live off the Pre sales on the long run…and I am not sure if 300kpcs/quarter is enough to keep them afloat on the long run (especially without a constant revenue stream from apps)…”

7 // Smartphone Realism

Tomi Ahonen has posted part 2 of his Smartphone Realism series, titled Smartphone Realism Part 2; What is biggest factor to global market success discussing the role of the sales channel and of what is called “carrier relationships” for the handset makers.

“The enterprise oriented business smartphones for employees, are effectively selected by an IT department at any major corporation, that wants desperately to avoid any new systems to add to their complexity. Then in the markets where subsidies distort competition, the decisions of essentially awarding markets to given brands of phones and given phone models is with the carriers/operators; not with the handset manufacturers. Only in the unsubsidised consumer market, is there real undistorted competition to weed out the strong from the pack.”

8 // Mobile Advertising

Peggy Anne Salz at MSEARCHGroove offers a thorough analysis, called ANALYSIS: Blyk: Mobile Advertising Is Not A Technology Play; Why Operators Have Missed The Mark covering the news of Blyk’s partnership with Vodafone Netherlands, an exclusive Q&A with Blyk co-founder and CEO, Pekka Ala-Pietilä, and some questions around why mobile advertising is not the major revenue source compare to other mass media.

“‘Think of Blyk as a Coke.’ as this example makes our role easier to understand. We have the recipe and we have the brand. People understand Blyk; young people understand what it means when we come to a country. The recipe is how you make it work. The operators have the factories for making all the refreshments they need, and they have their existing distribution channels. Basically, they have the works. But if they bring Coke in there, they can get so much more volume and so much more value.”

That’s it for this week. Next week’s Carnival will be hosted by Eric Chan at Mobileslate. You can also check out the Host Schedule for the year.

Add this to digg, del.icio.us, etc.