Happy to share with you that Alejandro and I will be spending the first week in Sweden (Oredev) and the second week in Helsinki. In Helsinki we will participate as mentors in the worldwide Windows 8 hackathon event WOWZAPP and spend a couple days with Finish startups - very excited!

We are still available on Monday 12th and Thursday 15th - let us know if you have any user group session we can help host. Let us know too if you are in the area and need some design/UX consulting for your Windows 8 or Windows Phone apps.

Hello!

I wanted to let you guys know that my brother Alejandro and I will be speaking at Oredev in Malmö, Sweden from November 5th to 9th. We will be delivering a session on Skeumorphism vs Modernism design (a hot topic in the industry these days!) as well as an end to end session on how to design Windows Phone apps. If you will be at Oredev please drop us a note - we would love to meet with you and chat! If you are not - we will be providing some of this information in upcoming events so stay tuned

. 

.

We will be available all week of November 12th to 16th to provide Windows 8 and Windows Phone design and UX consulting in Northern Europe and Western.

We can meet and work with you and your team for 1/2 day, a full day, or more up to your needs. We can also gladly accommodate to present a 1 day Windows 8 and Windows Phone design seminar and workshop to your design and/or development team.

We can also do a design review of your Windows 8 and Windows Phone apps. Our PCs, pencils, markers and sketchbooks are coming with us! We will be able to do extensive live sketching and storyboarding for your apps!

By the end of our work session we will be able to leave you with high fidelity comps and a number of sketches and wireframes so you can quickly implement in your applications.

.

.
We are offering a special low rate given we are already booked for Oredev and will be close to you. Let us know if we can help you Drop me a note to  or send me a tweet!

. 

   Tweet

Pushing Metro Further with Design Inspiration

In this final post I won’t close the door. Instead, I want to leave the door open to the possibilities ahead with regards to Metro design. To push Metro design further. I love Metro design - as an architect I was helpless in appreciating the core principles and my admiration to the folks in the Windows Phone design team who consciously materialized/realized this design style. Metro has changed many things inside and outside of Microsoft and it will continue to do so.

Today in the industry I’m following two big design trends: Skeumorphism and Modernism. And I’m not referring to ‘Modern UI’ re: Microsoft rumored new term for ‘Metro-style’ but to digital user interface design inspired in the Modernist movement, a design movement that many other companies, agencies and designers have pursued much before Microsoft started Metro. Metro design is one the many UI languages that are inspired in Modernist principles. It wasn’t the first one and it won’t be the last one.

By now I hope we all agree on the difference between ‘Metro design’ and ‘Metro-style’ right? If not let me tell you the way I understand these two very different things:

Metro design is a design language inspired on Modernism movement principles and extends these to include principles that guide us in the digital era.

‘Metro-style’ is an application platform.  I’m so glad to hear the Windows team decided for the right path to drop ‘Metro-style’. There were multiple reasons they decided to do so. I won’t discuss that here but I’m glad they dropped this term. Microsoft has confirmed publicly and in private that the right way to refer to ‘Metro-style’ apps is Windows Store apps.

Ok, settled. ‘Metro-style apps’ is now Windows Store apps.

So the application platform issue is settled. How about Metro design? You know - the principles?

Do we really care how we refer to those? Argh, I’d like to say no but I kind of do. At the same time I don’t want to continue calling them Metro because as a friend of Microsoft I don’t wanna step on their toes. So how do we call them?

As far as I know the Windows design principles continue to be:

Show pride in craftsmanship
Be fast and fluid
Be authentically digital
Do more with less
Win as one

And the Windows Phone design principles to me still are:

Light, Clean, Open, Fast
Content, Not Chrome
Celebrate Typography
Alive in Motion
Authentically Digital

I’m looking forward to learning from BUILD 2012 more about these two sets of principles and how will Microsoft will refer to the different terminology. I plan to adhere to their guidance on this regard and will update this post as soon as we get some clarity here.

Independently of this I will leave you with a collection of links to sources of inspiration I’m currently following an exploring:

Pentagram

Swissted

Minimalist Apps not in the way the look but in the way they function

Microsoft Office Vision

Microsoft Office Labs Website

Microsoft.com - Hotness!

25 Beautiful Responsive Web Design Samples

Milwaukee Police - Badass!

Introduction to Genetic Algorithms

Programming Architecture

Tom Wiscombe of EMERGENT Architecture

   Tweet

Tips for Designing Tiles

If you are looking for Windows Tile design guidance check out this great blog post from Ratio Interactive.

Tiles and especially Live Tiles are one of the biggest contributions of Windows Phone to the ecosystem as a whole. From the static app icons in iPhone or Android (with minimal notification capability) comes a concept of a tile that is rich and immersive and informative. It is a way to take your app beyond your app. Users can gain value from what your app can provide before even launching your application. If you have a weather app, don’t make the user have to launch your app to find out what’s the current weather conditions. Instead present those conditions live, right there on the application tile. Live tiles allow you to present even more information as the tile rotates.

There is plenty of information about Tiles already. And keep in mind this will evolve once Windows Phone 8 is released as we will now have at least 3 different tile sizes. We’ll post an update in this blog when specs about those new tiles are available.

One of the coolest tricks I’ve seen with Tiles in Windows Phone is their ability to display PNG images with transparency. You can do all sort of fun tricks with this like the couple examples below…

The first example is an image of a glass created in Illustrator. It was exported as a PNG with the interior of the glass being transparent. When overlaid on the tile, the transparent area reveals the background color of the tile which of course happens to be the accent color of the user in her phone. This makes the branding of the app be nicely and smartly “customized” to a preference of the user (the accent color…) the fill color for the glass will change depending on the accent color.

Here is another example. These ones show different tiles layouts providing useful information. Pay attention to the martini glass example in particular. That was a photo of a martini glass, imported into Photoshop, where we isolated on of the RGB channels and selected its contents. We then pasted that selection to a grayscale document. What you end up with is a semitransparent image that allows once more, the user chosen accent color to “go through”. It looks pretty cool and makes your brand more personal to the user.

This is how you produce these type of images in Photoshop.

1 Open an image and desaturate it (turning it 100% to grayscale)

2 Switch to the Channels panel and turn off all color channels except for blue (or red, or green but just leave one of them visible).

3 Hit the Load Channel as Selection button. This will select the contents of this channel. Because some pixels only contain a portion (%) of Blue, then those pixels will only be “partially selected”… isn’t that cool? Photoshop can actually partially select a pixel J this is what will give us the transparency.

4 Press Ctrl-Shift-I to invert your selection

5 Press Ctrl-C to copy the selection and then Ctrl-N to create a new file. Leave the default size there (which if done correctly will be the size of the image copied to the clipboard)

6 Press Ctrl-V to paste the clipboard to the new image

7 Play with the Image Levels to adjust darkness and lightness. Sometimes I even duplicate the layer and then merge it to make it darker.

8 Remove or hide the Background layer and you will see the resulting glass with transparency. You are now ready to export this as PNG and continue working on it for use in your tile.

   Tweet

Alive in Motion is one of the Metro Design Principles. Motion is what gives Windows Phone depth. Windows Phone relies a lot on the concept of depth. It provides horizontal depth with controls like Pivot and Panorama which make you feel as if you were dealing with content that spans beyond the screen limits. Windows Phone also conveys depth on the Z axis with the help of motion. If it wasn’t for motion we would think Windows Phone is completely flat but it is with the swipes, rotations, slides and tilts that objects in Windows Phone reveal themselves as planes in 3D space… had you realized that? Metro is not flat. It is made out of 2D planes floating on a 3D space.

A catalog of animations are available with the Silverlight Toolkit for Windows Phone for designers and developers to apply to Windows Phone UIs. Here is a brief description of 5 of the animations available in the Toolkit. If you would like to see these in action please download this small Powerpoint slide deck which includes 5 short videos demonstrating each of these motions.

Turnstile

The Turnstile animation helps convey to the user that you are moving her into a different context. You are here, now I’m taking you there - to a completely different place. It is a more aggressive animation that tells the user that they are being “teleported” to another place. For example when you are moving from one app to another.

Continuum

Continuum is the opposite of Turnstile. It is meant to convey continuity between different sections of the same application. It is meant to tell the user that new or different information will be presented to her but that she will remain within context. An example is an email or messaging app - you are in a list view with all the messages and you tap one of them, the continuum animation plays and the contents of the message are displayed…

Swivel

Swivel is great for dialog boxes or transient UI. Imagine a dialog box that presents an OK button to the user… the user taps it and it gets dismissed. Or an Accept and Cancel button… the user selects one and the dialog is dismissed.

Slide

Slide is great for conveying dead end scenarios. For example you select a category of settings to define, you are taken to a selection mode, you make a selection and you come back.

Tilt

Tilt is an animation that plays when you tap an object. Lists for instance have list items, you tap one of them, it tilts to convey interaction and then an action occurs - perhaps this action links to one of the other four motions mentioned above…

   Tweet

Use of Images and Photography

Even though we’ve talked a lot about Typography, Metro is all about content and content of different types including imagery of different kinds like photography and information graphics. Let’s review a few examples to highlight the different ways to use images and photography in Windows Phone.

In this first example we can see a few interesting occurrences. You can see some information graphics floating on top the Panorama background. Notice these information graphics do not have a background themselves or a border… they are floating freely on top of the Panorama background. This makes them more integrated with the overall composition. Always try leaving infographics floating freely over the Panorama backgrounds.

The other thing we see here are photos. These photos and many we’ve all seen in Metro are usually presented as squares. No borders or drop shadows… One thing to consider here is photos do not have to be used or presented as squares all the time. Just adhere to the Windows Phone design grid and if you can tailor your photos to be squares great but if it makes sense then use another proportion - for example if you are presenting ‘movies’ - usually movie posters are portrait so you could use vertical rectangles. If you were presenting thumbnails of movies, then those tend to be horizontal and these days most possible 16:9 so you’d get horizontal rectangles.

In this other image notice the use of clusters of square shaped photos in groups of four. These is to present four of the golf players we are playing with. Second, notice the little infographic which shows an aerial view of hole 1 in this golf course. Notice how this infographic as mentioned previously is not enclosed in a rectangle or square, doesn’t have a border or other effects… it’s just there floating on top of the background.

In this final example we can see the XBOX experience. There’s an avatar there. Notice how the avatar is not enclosed in a rectangle and no borders are used. It is just there floating on top of the background. As we’ve mentioned before infographics look and work great when just left floating on top of the background.

   Tweet

I wanted to share a video with you that I really love. It’s a small segment part of the movie Helvetica. This video snippet is great because it perfectly describes and explains the philosophy behind Metro Design. Use only what is needed. In this video you can see the passion of a designer (Michael Bierut) who truly believes in being rational with visual communication. When sometimes we ask ourselves why Metro looks the way it looks, this video has the answer. It is simple. Period.

You can find more information the movie in the Helvetica movie website.

During the amazing week with Massimo Vignelli, my friend August de los Reyes pointed me to the right Helvetica to buy. It is called Neue Haas Grotesk. You can find it here. I bought it. It was pricey but man, it is gorgeous and will help me and my brother migrate towards dropping Segoe and using only Helvetica in all of our Windows Phone and Windows projects (as well as iOS and Android). The reason this Helvetica font seems to better than others is that this resurrects a lot of the original alternates and other devices from Max Miedinger.

Here are some of the design made during the week with Massimo, all using Neue Haas Grotesk.

   Tweet

We’ve talked about the Windows Phone Design Grid before so I will keep this post short. The key is to leverage the Grid for composing your Windows Phone UIs. The Grid has a 24 pixel margin to left and right. Always respect that margin. Then you have 25 pixel columns and 12 pixel gutters. It’s always best to deploy UI objects from within a 25 x 25 cell. Take a look at the Layout and Composition in Windows Phone posts in this same series to get a better idea of how to use the grid.

Windows Phone Grid for Expression Design.

Windows Phone Grid Plain in PNG (Transparency - great for Expression Blend) - Thanks Michael for recommending this…

Windows Phone Grid Basic Cells in PNG (Transparency - great for Expression Blend)

Photoshop and Illustrator format Grids (thank you Jaycob!)

GIMP .xcf Windows Phone Grid (thank you  Robert!)

   Tweet

Quick few tips about orientation in Windows Phone. Windows Phone supports three orientations.

Portrait (vertical)

Landscape Left

Landscape Right

I didn’t know we had those two different landscape orientations until a while after starting to study Metro. You can see the effects of these three orientations in the Calculator app that comes with Windows Phone. Try it out yourself – if your rotate  you get different calculators (normal, accounting and scientific modes). The take away from this is that you can leverage the different orientation modes for *different* functions in your app.

The old school approach to designing apps was to make them work on both portrait and landscape mode by reflowing or reformatting UI objects. But nah, no need to do that really. If you design your app you can focus your efforts on targeting a single orientation. Or, when it makes sense, you can support multiple orientations to provide different functionalities (or modes) in your apps like in the case of the Calculator. Now, honestly I would have never guessed on my own that rotating the Calculator the left or right would render different results… so I’d say some visual hints might be useful to let people know this is possible. Perhaps when running the app for the first time you get a visual indication that tells people it is possible to rotate the phone to accomplish different modes.

Here is another example that taught me a lot from the potential of using different orientations to convey different functionality or modes in your app. The app is a golf application demo created by the Windows Phone team. The cool thing about this app is it shows again how it is not needed to support the same functions in both portrait and landscape. Instead the team decided to use portrait mode for the overall set of functionalities of the app – it includes a number of Panoramas, Pivots and Pages.

Then, when the user rotates the phone (left or right), the app doesn’t reflow objects to make them look nice on landscape mode… instead, they do something smart, they completely and totally reshape the app to accommodate a score card. What a smart idea! Score cards are horizontal so a landscape mode works great – makes sense – strengthens the function and it is not gratuitous.

So takeaways: We have three orientations: portrait, landscape left and landscape right. Strongly recommend not to waste efforts in making an app functionality render on both portrait and landscape… (as in reflowing or re-laying out UI objects). Instead analyze your app and study the different user scenarios and your information architecture. Then leverage the best of portraying, landscape (right and/or left) to craft different application modes between orientations.

Here is a great article from Smashing Magazine on designing for different orientations in mobile devices…  

   Tweet

What is touch target? (scroll down to the Touch Target section).

In a touch device you use your finger or fingers to interact with UI controls on the screen. Our fingers are chubby in general J so if we present UI objects that are too tiny, it will be hard for users to target these. So the following guidelines give you some ideas for how to avoid user frustration and ensure UI objects on the screen are accessible and touchable by users.

The minimum recommended touch target is 9 millimeters. Giving you millimeters might only take you so far since we all use pixels when it comes to designing a screen UI. I usually use 9 pixels as the reference.

When you really need to have tiny elements you can go down to 7mm (around 7px).

Now, one thing is the touchable area and another is the visual size of the item. The minimum size for a touchable item is 4.5mm (some 5 pixels). So you could have a tiny elements of 5 pixels but with a touchable area of 9 pixels around it.

Try to avoid having two touch areas overlap.

Better to put them side by side… or if possible leave a bit of buffer in between.

Touch targets are so important when designing mobile apps that the Windows Phone Design studio came up with something called greenlines. Let’s start by explaining what redlines are. You know how in architecture there are blueprints? Basically detailed drawings with dimensions, heights, widths, and other information that then allows the contractor to build the house precisely as it was designed. Well, in interaction design things have gotten to a level of complexity that we use something called redlines which are just like the blueprints in architecture. Redlines specify the dimensions and positioning (and other details) of every UI object on the screen. These redlines are provided to developers so they can craft markup code (HTML, XAML) that represents the design with fidelity. So, all this said, greenlines are just like redlines but they focus on helping you specify *touch areas*. This is because touch areas are separate than the actual UI objects.

Here are a couple examples. This first example shows the phone call screen. Notice how the touch areas in green exceed the size of the actual UI objects. Also notice how none of these UI objects are tiny… they are actually decently sized yet the touch areas exceed their UI dimension… this is to help users find more touchable areas and get a higher success rate when tapping elements.

Here is a second example. It shows the touch target for the arrow button that takes you from the start screen to the application list in Windows Phone. Notice how the touch area is larger than the actual UI control

   Tweet

When going through the Windows Phone UX guidelines Gestures article (scroll down to the Touch Gestures section) you can see and explore the different out-of-the-box gestures that allow users to interact with UI controls in Windows Phone. However, I must say these gestures are listed more as a reference or and FYI than as something we can leverage. As far as I understand you can’t change the gestures you use to operate things… a Panorama will be panned. A push button will be tapped. A list item could be tapped or tap and held to reveal a context menu. But all these gestures are already baked into the Windows Phone control library so that’s why I say it seems to be more of an FYI list for us that something we can directly use.

One interesting concept to mention is the multi-touch gesture. Turns out Windows Phone supports up to 10 touch points as an operating system but there aren’t really any devices that support 10 touch points and the minimum support for all Windows Phone devices is 4 points. So there is the ability to design your own gestures by leveraging this four touch point concept. You will definitely need to work with a developer to make this work as it requires of coding.

Here is a quick summary of the gestures but I encourage you to visit the Windows Phone UX Guidelines to learn more about all these…

A tap is a single, brief touch on the screen within a bounded area and back up off the screen again.

A double tap is two quick taps within a bounded area.

A pan is a single finger placed down and moved across the screen in any direction. The pan gesture ends when the finger is lifted from the screen.

A flick is a single finger down moved rapidly in any direction and ends with the finger lifted up off the screen. A flick can follow a pan gesture.

Tap and hold is a single finger down within a bounded area for a defined period of time.

A pinch and stretch is two fingers down within separate bounded areas followed by the fingers moving closer together (pinch) or further apart (stretch).

Four points. Windows Phone supports four simultaneous user touch input points to enable unique application interactions.