MIX10 Thoughts: Design, Windows Phone and Bill Buxton

Joey deVilla and Bill Buxton posing on the dance floor at LAX nightclub in Las VegasMe and Bill Buxton at the MIX10 Attendee Party last Tuesday night.

There’s one reason I’m particularly excited about Windows Phone 7 Series. The radically reworked look and feel is the surest sign that the company is really beginning to understand design and is willing to start from scratch (a risky and pricey proposition) to get it right. It would appear from Microsoft’s Principal Researcher Bill Buxton’s interview in The Register that I’m not the only one who thinks this:

"We kinda changed the water that we drink, in the sense that all through the design community within the company we talk, and we have a common goal in terms of trying to bring a certain change of sensibility," he said.

"For me it’s not even about the phone, but what’s interesting is that it’s the first product in the company with critical mass that’s embraced this … it will have an impact on other parts of the company."

If (or better still, when) you start building Windows Phone applications – or hey, any kind of application — I hope that you’ll follow the spirit of “Metro” (the codename for the design philosophy behind Windows Phone 7) and keep it in mind. Yes, it’s absolutely important to know the Silverlight and XNA APIs as well as how to read the touch sensors, GPS, accelerometers and so on, but it’s just as important to design your applications around the people who’ll use them. That means understanding your users, how they’ll use what you’re making, knowing how to give them what they need as quickly and unobtrusively as possible and delighting them. Yes, “a pretty interface” is included in all that – and there’s research to suggest that beautiful interfaces work better –but looks are merely part of the design equation.

Some Design Sessions from MIX10

Want some interesting lunchtime viewing on design? Look no farther than these two videos.

The first is Bill Buxton’s MIX10 session, simply titled An Hour with Bill Buxton, a conversation about design:

Get Microsoft Silverlight
Don’t have Silverlight? Get it here or download the video in
WMV, WMV (High) or MP4 format.

If you haven’t the time to watch the video of Buxton’s presentation, check out this hit list of metaphors complied by Sharon Chan at Microsoft Pri0.

If you’re planning on getting into Windows Phone 7 design, you’re going to want to learn the “design language” – not a programming language, but the guiding principles and philosophies behind the new user experience – behind it. Here’s the MIX10 presentation on that topic, Designing Windows Phone 7 Series with Albert Shum, Michael Smuga and Chad Roberts:

Get Microsoft Silverlight
Don’t have Silverlight? Get it here or download the video in
WMV, WMV (High) or MP4 format.

A World Without Design

Here’s a little something extra for those of you who like to think about design and user experience:

"A World Without Design": The same rock, described as a hammer, doorstop, paperweight and so on.

I whipped up this graphic, modelling it after a poster I remember seeing many years ago. I can’t remember what it was for – a museum, art gallery or exhibit, perhaps? – but I remember thinking that it was right on the money. If you remember the original poster and what it was for, please let me know, either via email or the comments!

This article also appears in Canadian Developer Connection.


Counting Down to Seven: User Experience with Microsoft User Experience Gurus Bill Buxton and Albert “Windows Phone 7” Shum

Get Microsoft Silverlight
Don’t have Silverlight? Get it here or download the video in
MP4, WMA, WMV, WMV (High) or Zune format.

Welcome to another installment of Counting Down to Seven, a series of articles about mobile app development that I’m writing as we count down the days to MIX10, when we reveal more about the up-and-coming Windows Phone 7 Series.

"Counting Down to Seven" badgeWe’re a week away from the start of the MIX10 conference! I like to refer to this as Microsoft’s most “right-brained” gathering, as its target audience and topic isn’t just developers and writing software, but designers, design and user experience.

With designers and design in mind, it’s only fitting that I show you a video featuring Nic Fillingham interviewing a couple of Microsoft User Experience gurus who also hail from Canada:

  • Bill Buxton: He’s a Principal Researcher for Microsoft Research, and before that, he was Chief Scientist at Alias Wavefront and a professor at University of Toronto. And I’m pleased to report that he got his bachelor’s degree – in music – from my alma mater, Crazy Go Nuts University (which some of you may know as Queen’s University). He was the guy who thought of applying Fitts’ Law to human-computer interaction, did some pioneering work with multi-touch interfaces and invented the pie menu (which means that we owe weapon selection in Saints Row 2 and the full combat/spellcasting system in Dragon Age: Origins to him).
  • Albert Shum: He’s the Director of Mobile Experience Design for Windows Phone 7. Albert’s from Winnipeg, studied engineering and architecture at University of Waterloo and went on to do design work at Nike before joining Microsoft. You can watch a video showing him talking about the new Windows Phone 7 experience and the thinking behind it in a previous article of mine, Albert Shum on Windows Phone 7.

This article also appears in Canadian Developer Connection.


Counting Down to Seven: Lou Reed, Mobile App Designer

Three Weeks to Go!

Counting Down to Seven (Mar 15th at MIX 10): A series about ideas for mobile appsWe’re three weeks away from the day when a lot more about Windows Phone 7 will be revealed. On Monday, May 15th, the MIX10 conference in Las Vegas is expected to open with a bang as developers and designers will learn about “WP7’s” programming and design models as well as the opportunities that Microsoft’s reworked-from-the-ground-up mobile phone OS will provide. As part of a team of evangelists who were picked to champion WP7, I’m looking forward to getting my feet wet developing for this new platform and sharing what I learn with all of you.

As good as the early indications are – the demos are impressive, and this is likely the first time that anything made by The Empire been described as “soulful” – WP7’s introduction won’t be without some significant challenges. As far as current-generation smartphones go, WP7 is a late entry into a fiercely competitive market featuring a rival who can boast about having an impressive 100,000 applications in its store. There’s the matter of the wait; the 7 Series phones won’t hit the market until later this year, and in the meantime, the Esteemed Competition will be releasing new models. There will also be the cries of “Too little, too late,” from the people who observed Microsoft squander an early lead with smartphones (I can understand the argument for “late”, but having seen some advance inside info on what these babies can do, “little” is not a valid argument).

The Real Challenge

Windows Mobile 6 user interfaceI think that the biggest challenge is going to be creating a new Windows Phone culture. I believe that one of the problems with the developer culture surrounding the old Windows Mobile was that they treated the mobile phone as simply a shrunken-down version of the desktop. As I’ve written before, the desktop is what made Microsoft a successful company, but it’s also turned into an albatross that has impeded forward movement. The company built their mobile OS in a specific way with a specific design philosophy for a specific audience: “suits”. The developers took their cues from those decisions and built applications to match. The end result wasn’t pretty in any way: business-wise, functionally or aesthetically.

We – that’s both Microsoft as well as the development community that we want to gather around Windows Phone 7 — need to create a culture that “gets” the smartphone and cares about software craftsmanship, both in the underlying programming as well as in the user experience. I want to see a development culture that encourages both technical and design chops, the way that the iPhone community does, as well as that the way web app developers like 37signals do. I want Windows Phone to set the standard for mobile applications.

To that end, I decided to write this series – Counting Down to Seven – as a way to get developers to start thinking about mobile applications. I’ve been looking at applications written for the Esteemed Competition’s phones, books and articles on mobile development for other platforms and ideas from the world of user interface and user experience design as well as from science fiction (a long-standing source of ideas for neat-o devices that fit in your pocket). My hope is to convince you not just to write apps for Windows Phone 7, but also to write apps that redefine mobile computing, do interesting and useful stuff and delight our users.

Take a Walk on the Phone Side

Lou Reed, in sunglasses, with a cigarette

There’s a mobile app that was designed by Lou Reed. Yes, that Lou Reed – the guitarist, vocalist and songwriter for the Velvet Underground, then Mr. Walk on the Wild Side and more recently, Mr. Laurie Anderson.

The app is called Lou Zoom, and although he didn’t implement it (that job went to Ben Syverson), he came up with the idea and co-designed it. That’s the sort of excitement that I’d like to see behind Windows Phone 7: so full of possibilities that even people who’d never think of designing applications start doing just that.

The idea behind Lou Zoom is quite simple: it’s a contact manager app, like the Contacts app that comes with the iPhone. The difference is that it has a couple of tweaks, no doubt born out of frustration with the current app. I’ve listed the tweaks below:

Tweak #1: Easy-to-Read Contact List

In the standard Contacts app, the list of contacts is shown as a standard list, with all entries the same size. In Lou Zoom, the list of contacts has variable-sized names: each name in Helvetica Neue, with the font size increased so that it is fills the width of the screen. Here’s a screen shot taken from the Lou Zoom page:

Screenshot of contact list from Lou Zoom app

This design might make the sort of designers who prize uniformity cringe, but think about this: phones have small screens and are often used in less-than-ideal reading conditions. If you’re going to remain under 30 forever, are guaranteed to always have 20/20 vision and vow to always remain stationary and alone in a well-lit room, you don’t need this feature. For the rest of us – including me, a guy in his early forties with standard issue Asian myopia, who finds himself squinting more and more at small type, who often uses his phone from places like dimly-lit cabs going over potholes at breakneck speeds or in crowded, dimly-lit conference spaces and having had a couple of caesars – this user interface tweak is very helpful indeed.

Tweak #2: Easy-to-Read Contact Pages

Just as the contacts are listed in nice big type, so is the info on each contact page:

Screenshot of contact info page from Lou Zoom app

As with the contact list, Lou Zoom goes for legibility and displays the information in large type. It goes one step further by displaying the text in high contrast. If the contact has multiple addresses, phone numbers or email address, a left or right swipe over the appropriate field will give you those alternates.

An Aside: Windows Phone 7’s People Profiles

The “Profile” page in Windows Phone 7’s “People” hub takes an approach that is stylistically similar to the way Lou Zoom displays contact info:

Screenshot of Windows Phone 7 profile page for a person in the "People" hub

…but it takes a markedly different approach to which items are displayed prominently. Windows Phone 7’s design is centered around what you want to do rather than with just throwing information at you. For example, the actions “call mobile”, “text mobile” and “call home” are in large type, while the person’s mobile and home numbers are in smaller text. This is a good idea — after all, what you really want to do is reach someone, not look up their phone number. The “address book” paradigm is a holdover from the days when phones weren’t smart enough to dial themselves.

Tweak #3: Search on Any Part of the Name

The standard Contacts app has a simple search function. Type in j and it will immediately present you with a list of all names in your contacts beginning with “j” (ignoring case, of course). If you expand that j to become john, you’ll get a list of all the names in your contacts beginning with “john”. The Contacts app will apply the search term you provide only to the leftmost end of the names in your contacts:

Screenshot of search for Lou Zoom app

Lou Zoom improves on search by letting you search on any part of the name. Typing in john gives you a list of all the names in your contacts containing “john” in any part of the name, such as “John Smith”, “Alice Johnson” or “Olivia Newton-John”.

The Lou Zoom site provides its own example:

Has Kate Bell recently become Kate Appleseed-Bell? Searching for "Bell" will still bring up her name in Lou Zoom. From there, her full info is just a tap away.

It’s also great for searching for people by nickname. For instance, typing in mclovin into Lou Zoom’s search will give you the name of your buddy, who’s listed in your contacts as Christopher “McLovin’” Fogell.

What Can You Tweak?

It’s time to take a page from Lou Reed’s book and find apps that could benefit from a little tweaking. Look around at mobile apps and if you find yourself and other people saying “if only it did this”. Those are opportunities! The best applications aren’t always brand-new paradigm-shattering ideas; sometimes they’re old ones with a couple of tweaks.

This article also appears in Canadian Developer Connection.


Windows Phone 7 Series: Now That’s More Like It!

Windows Phone 7 Series generic phone

A New Windows for the Phone

Ever since joining The Empire, I’ve been saying that Windows Mobile needs to go back to the drawing board. While there was good technology lying in its innards – mobile versions of the .NET framework, SQL Server and Office – treating the mobile form factor as “the desktop, but much, much smaller”, was the wrong approach. In the meantime, the Esteemed Competition were doing the right thing: designing their phones’ OS features and interface from the ground up rather than attempting to force-fit the desktop UI into a pocket UI.

Today at Mobile World Congress in Barcelona, Microsoft previewed the latest in a series of steps forward – consider Xbox to Xbox 360, Windows Vista to Windows 7, Live Search to Bing – there’s now Windows Phone 7 Series.

(The name’s a bit long. Whoever does the naming at Microsoft corporate HQ must get paid by the syllable.)

A Quick Look at Windows Phone’s Experience

A good starting point is this video, which covers Windows Phone’s features in three minutes, thirty seconds:

You can take an interactive tour of the UI at the Windows Phone 7 Series site:

Screenshot of the Windows Phone 7 Series site's home page

A Closer Look at the Windows Phone Experience

Over at Channel 9, Laura Foy has posted her interview with Joe Belfiore, VP Windows Phone 7 Program Management, who gave her a walkthrough of the goodies in Windows Phone (the video is 22 minutes, 18 seconds):

Get Microsoft Silverlight

Some quick notes from the video:

  • There are three mandatory hardware buttons, which are context-sensitive:
    • Back
    • Windows (the “Start” button)
    • Search
  • The screen is a capacitive touch-screen, capable of supporting multi-touch
  • The Start menu is built up of tiles: little block representing the information and features that you care most about
    • You can add your own custom tiles; Joe shows a “me” tile linked to his Facebook profile
  • A browser with:
    • Snappy performance
    • Support for multitouch actions such as pinch zoom, double-tap to zoom and finger drag
    • Very readable text, that to sub-pixel positioning in HTML
    • Phone number recognition in HTML documents; touch them to dial them
    • Street address recognition in HTML documents; touch them to get a map
    • Multiple tabs
  • The “People Hub”
    • Aggregates Exchange, Hotmail, Gmail, Yahoo! Mail and other mail contacts
    • Provides a live feed of your contacts
  • Context-sensitive search:
    • Press the “Search” button while in the People Hub, and you search your people list
    • Press the “Search” button while in the Start menu, and it runs a web search
      • Based on your query, it knows whether to give you a web search result or a local search result
      • In the demo, Joe does a search for pizza and gets a map and results for pizzerias near him, and a quick pan over to adjacent pages yield directions and reviews
      • A tap on “nearby” yield the locations of useful things like parking, ATMs and so on near the selected pizzeria
      • In another demo search, Joe does a search for “Avatar” and it returns a list of nearby theatres and times for the movie Avatar; a quick pan to an adjacent page yields the results for local business and places with “Avatar” in the name
  • Email:
    • Easy pivoting between unread, flagged and urgent emails
    • A caching system prevents you from seeing the dreaded “loading” screen
    • Press “Search” within email and you perform a search of your email messages, by subject, text and so on
  • Rotation: you can operate the phone in “portrait” or “landscape” mode
  • Calendar:
    • Support for both work and personal calendars
  • ActiveSync works in the background and keeps the phone synced with email, contacts and calendar
  • User-customizable UI colour schemes
  • The “Pictures Hub”
    • Gallery: Lets you browse all the pictures on your phone
    • Mosaic: Recent and favourite pictures
    • What’s New: New photos from your social networks
    • Camera roll: A folder for photos taken with your phone
    • Support for photo albums from Facebook and Windows Live, which you browse as if they lived right on your phone
  • Music and Video
    • History: Most recently played music and videos
    • New: New music and videos added since the last sync
    • Zune HD-style marketplace searching and support for Zune subscriptions with unlimited music plays
  • The “Me” tile
    • Lets you update your status on places like Facebook
    • Nice little typing features like auto-spelling-correction and a special soft keyboard for emoticons
  • The UI concept: Windows Phone is task-centric, not app-centric, with a hub associated with each: people, photos, media
  • There’s also a games hub, which ties into Xbox Live
  • Third-party applications and games? Wait…

Wait a Minute…What About Third-Party Apps and Games?

"MIX10: The Next Web Now" logo buttonCan you wait a month?

Here’s the deal: the announcement at Mobile World Congress was about showing what Windows Phone can do. As for what’s possible on the developer front, it’ll all be announced at the MIX10 Conference, which takes place from March 15th through 17th in Las Vegas.

There will be a dozen sessions at MIX10 for Windows Phone, and they promise to be quite interesting. I’ll be at MIX10, and will blog what I learn from these sessions when they take place.

You can save $200 off the price of MIX10 registration if you register before February 21st, so if you want to get in on the ground floor with Windows Phone and save some money, register now!

What the Tech Press is Saying

Pretty good stuff, actually. Rather than bury you with links to a zillion blog entries filed from Mobile World Congress, I thought I’d pick two of the big tech blogs, Gizmodo and Engadget:

Here’s what Gizmodo has to say about the new Windows Phone:

It’s different. The face of Windows Phone 7 is not a rectangular grid of thumbnail-sized glossy-looking icons, arranged in a pattern of 4×4 or so, like basically every other phone. No, instead, an oversized set of bright, superflat squares fill the screen. The pop of the primary colors and exaggerated flatness produces a kind of cutting-edge crispness that feels both incredibly modern and playful. Text is big, and beautiful. The result is a feat no phone has performed before: Making the iPhone’s interface feel staid.

If you want to know what it feels like, the Zune HD provides a taste: Interface elements that run off the screen; beautiful, oversized text and graphics; flipping, panning, scrolling, zooming from screen to screen; broken hearts. Some people might think it’s gratuitous, but I think it feels natural and just…fun. There’s an incredible sense of joie de vivre that’s just not in any other phone. It makes you wish that this was aesthetic direction all of Microsoft was going in.

Here are Engadget’s impressions, after having some hands-on time with Windows Phone:

The design and layout of 7 Series’ UI (internally called Metro) is really quite original, utilizing what one of the designers (Albert Shum, formerly of Nike) calls an "authentically digital" and "chromeless" experience. What does that mean? Well we can tell you what it doesn’t mean — no shaded icons, no faux 3D or drop shadows, no busy backgrounds (no backgrounds at all), and very little visual flair besides clean typography and transition animations. The whole look is strangely reminiscent of a terminal display (maybe Microsoft is recalling its DOS roots here) — almost Tron-like in its primary color simplicity. To us, it’s rather exciting. This OS looks nothing like anything else on the market, and we think that’s to its advantage. Admittedly, we could stand for a little more information available within single views, and we have yet to see how the phone will handle things like notifications, but the design of the interface is definitely in a class of its own.

(In another article, Engadget simply summed it up with “Microsoft is playing to win”.)

Watch this Space!

"Counting Down to Seven" badgeWe’ll have more announcements about Windows Phone over the next few weeks, so keep an eye on this blog!

This article also appears in Canadian Developer Connection.


Jason Alderman’s Pitch for His MIX10 Presentation

Two days remain for you to cast your vote for sessions at the MIX10 conference, which I wrote about in the previous article. A number of people who submitted proposals for sessions are wooing voters, and one of the best promotions is that of Jason Alderman, who put together this comic explaining why you should vote for his session, titled Guerilla User Research – Carrying Out Missions Behind Enemy Lines to Get the Insight You Need:

Comic: MIX10 needs a session (or two) on user research and testing!

This lovely hand-drawn comic is a reminder for me to fire up the scanner I bought for Christmas and get back to something for which I was notorious during my days at Crazy Go Nuts University: cartooning.

This article also appears in Canadian Developer Connection.


MIX10 Web/UX Conference: March 15 – 17 in Las Vegas

MIX10: The Next Web NowI’m going to be at Microsoft’s MIX10 conference, which takes place from Monday, March 15th through Wednesday, March 17th at the Mandalay Bay Hotel in Las Vegas, where I’ll be catching sessions and posting photos and reports. If you can spare a couple of days off work to attend Mix10, you should too – and soon, because the early bird discount is going to evaporate very soon!

What is MIX?

MIX10: Where designers and developers intersect to make the web a great place

The email sigs for people involved with MIX claim that it’s a “designer/developer lovefest for the web”, and I think it’s a pretty one-line summary of the event. It’s a conference for people who develop and design for the web, with particular attention paid to user interface and experience. This will be the 5th MIX conference, the first one having been held in 2006.

What Sort of Sessions Will There Be at MIX10?

The future of web design and user experience

Here’s a selection of some of the sessions and workshops at MIX10:

There are some other cool things happening at MIX10 that I can’t talk about until the conference. Be there, or if you can’t, watch this space!

You Get to Vote!

Open call for content voting is live. Vote now for your favortie session submissions.

You can help choose some of the content for MIX10! We took a number of submissions for presentations in an open call for content, and now it’s time to vote for them. You can see all the submissions here, and voting ends on Friday, January 15th.

Early-Bird Discount

Register by Jan. 15th and save: $600 on your pass and a free night at Mandalay Bay

If you register for MIX10 by January 15th, you’ll save US$600 off the admission and pay only US$795 – and you’ll also get a free night at the conference hotel, Mandalay Bay! After the 15th, the price goes up to a full US$1395, so if you want to go, register now!

This article also appears in Canadian Developer Connection.


Building Apps People Need (and are willing to pay for)

If you’ve taken a psychology course or have leafed through a user experience book, you’ve probably come across a diagram of Maslow’s Hierarchy of Needs:

Maslow's hierarchy of needs: from top to bottom -- 1. Self-actualization (Personal growth an fulfillment) / 2. Ego/Esteem (Achievement, status, reputation) / 3. Social (Belongingness, love, family, relationships) / 4. Safety (Protection, security, order, stability) / 5. Physical (Food, shelter, warmth, sleep)

Dan Zambonini of the web development shop Box UK took some inspiration from it and wrote an article titled Web App Business Models: User Needs and What People Pay For. In it, he writes:

As customers, we have a finite number of needs that we’re willing to fulfill by parting with our hard-earned cash. If you’re planning a web application that can’t build a business model around one or more of these needs, you may face difficulties generating sustainable revenue.

He breaks down people’s needs into the following categories, with an explanation of each one:

He also looks at how much people are willing to have different needs fulfilled. For example, people are willing to pay geometrically increasing prices for increasing comfort. Consider the 15x price difference between “cattle class” and first-class tickets on an airplane (even though both depart and arrive at the same times), or the 27x price difference between a bargain-basement pillow and a down-filled one:

Charts showing geometrically rising prices of increased comfort (economy/premium economy/business/first class plane seats and basic fibre/duck down/goose down pillows)

Entertainment, on the other hand, is a different beast. According to Zambonini, across the wide array of entertainment options from games for their mobile phones to vacations in the tropics, people are willing to pay the same rate: $5 an hour…

Chart showing linear scaling of entertainment prices

He categorized the top 100 U.S. sites by the needs he listed — here’s how they break down:

Pie chart showing breakdown of top 100 US websites by needs fulfilled: Entertainment (30%), Wealth (20%), Education (14%), Esteem (11%), Time (10%), Belonging (6%), Survival (6%), Comfort (2%), Scarcity (1%)

Naturally, such categorization is subjective and had to be drastically simplified, with each site being slotted into a single category. Sites about food were put into the “survival” category, even though a top 100 site on food would probably cover things like gourmet food and wine, which could arguably be put into the “entertainment”, “comfort” and even “esteem” categories.

He closes the article with a series of questions that you should ask about your application, such as “Does my app allow the user to do something more quickly?”, “Does my app allow the user to express their creativity?”, “Does my app provide entertainment for the user?” and so on. Your should be able to answer “yes” to at least one of these questions, and better still, you should be able to explain why.


This article also appears in Canadian Developer Connection.