DesignMichel : UX, UI and Design in Microsoft

Le design, l'expérience utilisateur et les interfaces pour les applications, sous Windows 8, Windows Phone et les plateformes Microsoft

The windows Phone 8 design style

The windows Phone 8 design style

Rate This
  • Comments 4

 

I’m not surprised. To tell you the truth, I could have that prediction. Windows phone 8 devices are hitting the market pretty hard, and even if it is a quiet revolution, the first sales forecasts are encouraging. That means that all we’re talking about since the launch of Windows Phone 7 was right, about the new User interface and the brand new experience, about the clean and straightforward design, about the new vision of what is an authentically digital approach. And it finally comes to an upper level with Windows Phone 8. Let’s see precisely how it works:

 

Windows 8 / Windows Phone 8, same paradigms?

Yes. YES! But, do you use your tablet or your PC the same way you use your phone? Are you the kind of person who take pictures with your tablet? NO, you’re not, because, you have from a long time learned that the experience with an ultra-mobile device is VERY different from the one you could have with a tablet or a PC. For example, most of the time, you only use one finger to control the interface of a phone. One finger. And half of the time you are using the phone outdoor, with a bright sunny sky, or, on the opposite, a rainy or a nightly environment. With high constraints. Do I have to mention that sometimes, you even use your mobile while you are driving your car? Aren’t you? So, you cannot imagine one single second that the guidelines that rule the Windows 8 UI should be the same as the ones that lead the Windows phone experience.

Remember also that, depending on how polite you are, you should use your phone with the sound off, or with no speaker. I also guess that you have cut off the typing sounds, do you? No sound feedback at all. And, on top of that, the device is small. It’s only 5’ wide. Not that much when speaking about complexity…

With all that in mind, and taking into account all those restrictions, yes the Windows 8 paradigms apply here the same way. The interface should be clean, proper, and elegant. It should empathize the fonts, because they are beautiful, the content should lead the navigation, you should leverage the white spaces and think twice before laying the stuff down to simplify, concatenate, reduce or simply delete all the unnecessary things, controls, … Classical design skills in here?

image_thumb[2]

 

Talking ‘bout fingers

Keep in mind that the user will often use only one finger to interact with its device. And, if the device is a NOKIA, the user may eventually wear gloves while playing with an application. So you have to carefully lay the interactive things down to avoid touch mismatch or gesture error. The minimum size for a touchable item is 7 px, and the minimum recommended size is 9 px. Note: If you want to make a text touchable, always use a transparent grid or border just under the text. This is that plain object the user will interact with.

 

Two way navigation.

One of the most different behavior between a Windows 8 application and a Windows Phone app is the way you can control the layout. Depending on how you hold the device, you can scroll horizontally AND vertically. In fact, the navigation in itself is mostly organize on the horizontal axis, and the content is laid vertically. Inside this pattern, you have two controls at your disposal. The panorama control lets you scroll smoothly among the sections of your app, in a One-way scroll. Otherwise, you should use a pivot controls which will let you scroll horizontally from one page to another, allowing you to browse throughout your content in a more distinctive way.

Yes, I’m talking about controls. These are technical glitches that let you drive your layout the way you need them to respond. These controls are coded in XAML, a specific and powerful language when it comes to create your own layouts. Of course, you can edit these controls and your layouts with a Wysiwyg editor. It is called Blend for Visual Studio. We will come back to that later.

image_thumb[4]

 

What are the paradigms?

If you have experienced the Windows 8 design, you should be pretty confident with the “so-called” Modern UI design of Windows Phone 8. But the main thing is that WP 8 is much more flexible (especially because you can scroll in both axis). I mean, you have a lot more significant ways to improve and organize your UX. As for the start screen. You must have noticed that tiles have now three sizes (small square, medium square, big tile). And this is only one little spot of the overall design. The major points of the WP 8 UI are bound to those paradigms:

- It uses the modern signage. Iconic, relevant, and straightforward representation.

- The devices may be used with only one finger…

- …outdoor, indoor, nightly, when the user drives, drinks, eats (not in the same time, obviously…)

- The UX should feel fast, quick and responsive.

- The UX must be app-centric, and must remain focused on the primary target of the application.

- The UI must do more with less, and favor the content (rather than the chrome).

- The UI should leverage the white spaces…

- … As it must leverage a clean and straightforward font (not only readable, it must be clean and beautiful). Segoe WP is the best for the price.

- Full screen is the only scenario.

- The navigation is driven by the content.

- Use an app bar to lay down interactions…

- …but animations bring organization, and discoverability.

- Animations are the trick to add context and usability.

- Transitions bring depth.

- A good grid is the key to success.

- The magic number is 12. For example, the empty space, on the left of the display, is tied in 24 px (2x12). Space between blocks should be equal to 20 px.

- The items must not be placed with an inner space under those 20 pixels.

- UI must be designed for the form factors (landscape/portrait).

- The UI should take into account the theme of the user.

- The UI should be authentically digital.

- UX must be authentic. Don’t try to be what you are not.

- Be YOURSELF. A guy hired you for your specific talent. So go for it, and find your way among all those paradigms

 

image_thumb[8]

 

What do I need to create WP8 designs?

Well, first of all, you need to have a brain. Eventually add a pen and a paper to draw onto. That’s pretty much of what you need. To begin sketching, I mean. This is where you try out your first concepts, see if they are relevant, and probably find out if it deserves the trash bin. If you think your projects deserves improvement, eventually you will need some extra tools. Let’s begin with Windows. To develop for Windows Phone 8, you will need to acquire Windows 8 PRO (because you will soon see that the emulator requires virtualization).

Then, you can install the Office suite, and specially PowerPoint. Yes, I saw you laugh. But if you also install Visual Studio 2012 (required later, for Blend for Visual Studio), you will gain access to a cool feature for storyboarding purposes. Give it a try, you will not be disappointed, believe me.

Ok, you have installed Visual Studio on Windows 8 pro, you have PowerPoint to sketch things up. You only have to download the Windows Phone SDK, available here:

http://dev.windowsphone.com/en-us/downloadsdk

And, after installation, you should be ready to begin something great. Oh yes, do not forget to anticipate the graphical needs with a good bitmap or vector paths editor (As Photoshop, Illustrator or Expression Design).

 

The Grid

As I said previously, the grid is just über important when you’re trying to reach a consistent and relevant State of the Art of layouting. And as I mentioned before, the magic number in the Windows Phone universe is 12. But, prior to edit your grid, remember that Windows Phone 8 comes with three resolutions: WVGA (800x480 px), WXGA (1280x768 px), or 720p (1280x720 px).

The right margin, before any content can be added is 24 pixels. The baseline (where stands the name of your app) will be set around 110/120 px from the top (depending on how you respect the 12 px grid). The section line (where the name of the section is laid) should be set to approx. 220/240 px. And finally, the first item name will be disposed at approx. 350 px.

The grid is not a stack of similar squares. In fact, here is the trick to do it right: Place the right and left margins (24 pixels). Cut the resulting space vertically in two equal parts, separate by a column of 20 pixels. 24+24+20 = 68 pixels already used. In a standard 768 pixels wide resolutions, you should have two big spaces of 350 pixels to use. Now, feel free to subdivide those areas, by adding 20 pixels columns.

image_thumb[10]

 

Remember to leave enough room in the bottom of the layout for the application bar.

 

Layouting

So, you have drawn sketches on your paper, you have created storyboards with Powerpoint. You are now set to get deeper in the creation process. It’s time to begin a more graphical approach of your UX and add some colors. The best advice I can give you at this point is to take time to set the grid properly. This is the only thing that could lead to a total mess if it is not precisely set. Do not forget the magic number (12px). A lot of “Photoshoping” actions required there.

When you or your customers are fine with the “look and feel”, you can now switch to the layouting part. It is now the time to open Blend for Visual Studio. Once Blend is open, you can choose the type of project you want to design. There are three types of design for Windows Phone 8 app :

A brand new project, with no by default controls at all. Not recommended for newbies, because you do not inherit any behavior with that kind of project.

A Panorama application: It comes with a full panorama support, allowing a nice smooth-scrolling experience. It’s then up to you to modify the existing layout by tweaking the several properties of the different controls, to achieve what you have in mind. But, mostly, the panorama is filled with Panorama items, containing Listbox of items (Note that you can quickly edit the content of those Listbox simply by right clicking on it -> Edit Additional templates-> Edit generated items).

image_thumb[12]

A Pivot applications, coming with a page by page navigation, is the second option to navigate through an app. Open a new project, Pivot Style. But, instead of editing a Panorama item template, you will edit a…Pivot item. Once you have beginning to edit your templates, you can press the F5 key to launch the Emulator (the strange thing that requires the Pro version of Windows 8). Note that you can specify the form factor of the emulated device in the Device tab of the Blend Interface.

 

image_thumb[14]

 

image_thumb[16]

 

 

Assets

To complete your quest for the perfect app, you will need to create a bunch of assets. They’re required to obtain a good looking app (with a cool splash screen), or to achieve a specific function. Here is a list of the assets you will have to provide:

Splashscreen (Slapshscreenimage.png): (768x1280 px for all resolutions), for WVGA, 480x800, SplashScreenImage.screen-WVGA.png, for 720p SplashScreenImage.screen-720p.png, for WXGA 768x1280 px SplashScreenImage.screen-wxga.png.

Default lock background: If you want your app to be on the first place. DefaultLockScreen.png (768x1280 px for all resolutions)

Panorama background (PanoramaBackground): For all resolutions, 1536x1280 px. For WVGA, 480x800

The application icon (ApplicationIcon.png): For all res, 99x99 px.

Small iconic tile (IconicTileSmall.png: For all resolutions 110x110 px.

Medium iconic tile (IconicTileMedium.png): For all res, 202x202 px.

Small flip or cycle tile (FlipcycleTileSmall.png): For all resolutions 159x159 px.

Medium flip or cycle tile (FlipCycleTileMedium): For all resolutions 336x336 px.

Large flip or cycle tile (FlipCycleTileWide.png): For all res 691x336.

App bar buttons (Appbar&1.png): 48x48 px for WVGA.

Lens icon: WVGA (Lens.Screen-WVGA.png) 173x173 px. 720 p (Lens.screen-720.png) 259x259 px and for WXGA (Lens.Screen-WXGA.png) 277x277 px.

Lock button: (LockIcon.png), 38x38 px.

Small file handler icon (SmallLogo.png): 33x33 px.

Medium file handle icon (MediumLogo.png): 69x69 px.

Large file handler icon (LargeLogo.png): 179x179 px.

Catalogue image (CatalogueImage.png): 300x300 px.

Merchandizing image (MerchandizingImage.png) : 1000x800 px.

And now, you should be damned ready to go through the creative process of the Windows Phone User Interface. See you soon on the Store!

Comments
  • The exact grid is still not very clear.

  • Error:

    Panorama background (PanoramaBackground):

    For all resolutions, 1536x1280 px.

    For WVGA, 480x800.

    For WVGA it should be 960X800

  • I made my panorama background 1536 x 1280 PNG at 96 DPI, but on the app it looks as if it has been stretched horizontally, by a very noticeable amount.

  • I mean this is just the greatest post ever. On a designer point of view.

    I was looking for the panorama background and This is where I found it.

    Thank you Rousseau Michel.

Page 1 of 1 (4 items)
Leave a Comment
  • Please add 4 and 2 and type the answer here:
  • Post