Windows 8 Training Camp: Makeup

Windows 8 Training Camp: Watermelon

Windows 8 Training Camp: Piano

Here’s how one team at Microsoft are approaching car interior design and make sure to check out more videos from this team at www.theintelligentcar.com

Micro Mayhem! from Stoopid Buddy Stoodios on Vimeo.

That mentality of filling space with confusion I partly blame on science fiction. I’ve often said in public that technologists look to science fiction for inspiration. Who wouldn’t want to have all the buttons and flashing lights that Uhura had in the original Star Trek? Those sets were designed to look complicated – after all, this being the future would surely mean that we would have invented many new technologies and devices and each of those would require at least one button, one light and an accompanying beep. That’s what made those visions of the future so exciting – the level of complexity and the thought that we’d need to be super clever and aware in order to operate these gigantic space engines. Did anyone think that we might also make sweeping advances in UI design so that it could all actually be controlled by a joystick with one button? Maybe, but I doubt that version of Star Trek would have been given the funding from the TV studios, this looks much more exciting:

When I look at games like World of Warcraft, the menus and the stats that you see are bonkers. The first time I played that game it was confusing, more then confusing, it was incomprehensible. Check this:

When I started playing, I wondered how I could ever be able to understand what any of that meant. But after a short amount of time, with a little investment, it became second nature and although there are options to turn parts of that UI off, I didn’t. It would have meant that my game play would be slower and I wouldn’t be as quick to respond. Part of being a player, a good player, was being able to read that interface. If this WoW talk is all gobbledygook to you then at least take a moment to enjoy Leroy Jenkins, one of my favourite examples of video that justifies the whole of the internet (WARNING: colourful language alert):

We have complicated UI on desktop programs – but they need to be complicated because they’re doing complicated things. For instance, Visual Studio – there’s even more detail required there than in WoW and complicated applications like that are not going to go away, here’s my current Visual Studio screen:

With Windows 8 we now have a new style of application – Windows Store applications. These applications seek to remove as much of the UI from the screen as possible – the concept behind this being that if there’s no UI on the screen then the user’s focus is on the content. Here’s a screenshot of a photo of mine in the Photo application:

There’s no UI on the screen – there doesn’t need to be and it means that the content gets my full visual focus. The content then becomes the UI, the inherent nature of that particular piece of content within the context of that application means I know if I touch and swipe I can then cycle through the other photos on my machine. We don’t need a button to indicate that that is the method of interaction, we’ve removed the chrome. However, if wanted to do something more than swipe through my photos, our approach is to employ on-demand UI.

On-demand UI

With Windows 8, if the content on the screen isn’t, or can’t be the interaction then we look to the edge. To the right for the Charms Bar for searching, sharing and settings, and if I want to find commands to interact with the screen, I swipe from the top or the bottom to pull up a control that we refer to as the Application Bar. Here’s the same photo after I’ve swiped in from the top:

You can see that I now have a back button on the top right (which takes me to a folder view of my images) or on the bottom application bar I can now perform some editing functions but I call on those functions only when I need them.

With the Modern UI, I celebrate the content and embrace the space available in the application. In the photo example above, that application is all about me enjoying my photos and not having to be distracted by buttons around the photos that could distract me from the task at hand. The Photos app is a very visual example, but how about an audible example, with Xbox Music. When I have that open, I’m enjoying the music that I’m listening to, I can glance at the screen and see exactly what track is playing without figuring out the UI first.

I can see what song is playing, where abouts in that track I am and if i’m not interacting with the app then I enjoy the additional imagery that’s pulled in from the cloud and that augments the experience. It’s like when the radio in my car would not just say ‘Radio 2′ but would say Radio 2, Chris Evans, and even tell me the name of the track. A small bit of information that doesn’t distract from the experience, but adds to the experience.

The same is true of Windows Store apps. That’s the beauty of the Modern UI. It’s all about the content. I don’t need to know the biography of the artist, I don’t need to know who the bass player is but at the time when I do, then by using the edges of the screen I can use the on-demand ui get to that information. That’s the key. 95% of the time it’s just visual noise, but if I need it I can get it.

Reduce distractions

If I’m reading a book, all I want to see is the words that the writer has written. I like the Kindle for this, there’s not even a clock on it – I’m sure there was a conscious decision made by the designers at Amazon at some point when it would have been so easy to incorporate a clock into the top corner of the screen. Maybe that’s their homage to the authenticity of a book. Maybe, they recognised that when you’re reading it’s about the story. It’s a feature that I find both annoying but also amazingly satisfying about reading on my Kindle. Any additional info that’s placed on the screen is only a distraction. ‘How long have I been reading?’ ‘How long do I have before I should go to bed?’ That’s why I love my Kindle, because it makes me just read and read and not care about the time and I’ll read till the early hours of the morning because the story is brilliant and there’s not a clock to remind me that it’s only 5 hours till daybreak. I don’t care. I want to know how Ender will finish his game.

Ho Designers

The same is true of Windows Store applications. When you decide what it is that your app is meant to be doing, don’t worry about the extra space that is available that you could fill with info, let the the user enjoy the content of the app, let the user revel in the content that you’ve worked so hard on and when they need to interact with your content, they know to look to the edge to find that interaction. Celebrate space.

This can be a difficult concept to grasp, especially when you’re coming from a different platform, be that a traditional Windows desktop applications or an application on another platform. But once you get it, you realise that it allows your user to enjoy and immerse themselves in the product they’re investigating, the article they’re reading, the image they’re viewing.

I spent some time with a chap at one of our workshops who had the most incredibly complicated desktop application. He had been tasked by his boss to turn it into a touch screen app. After reviewing the functionality, it was clear that this was never going to happen, however, when we talked through how his desktop app was used, it became clear that 10% of the time it required the complicated desktop application experience, 90% of the time it could be a touch screen app. So his desktop app did not and never will disappear, but it became apparent that there could be a touch app used 90% of the time to keep the day to day running of the app in place. That made me really happy. For 2 reasons.

1. Desktop apps will never disappear – some apps will always have a level of complexity that cannot be translated to a touch screen be that because of the complexity of the app itself or maybe the requirement for precise input of a lot of data (our fingers are not very precise when matched aginst a mouse) eg, Visual Studio, Visio or Photoshop
2. There are aspects of these programs that can become touch enabled and separated out to this new style of application, and as such become more accessible to a wider audience on a number of different devices

The lesson we learn there is – user context – recognise when your app is going to be used and customise for those user scenarios. Don’t try and convert an app to a tablet because that’s what you carry around in your pocket. Customise for touch, where touch is appropriate.

Celebrate the content

Allow the user to immerse themselves and only when they need to interact should they have to bring up the commands that allow them to do so. The application bar is your friend. For Windows 8 users it quickly becomes second nature. You digest the content on the screen and at the point where you need to change it, share it, move it, interact with it, you look to that first pixel and the on-demand UI gracefully glides in.

We are creatures of habit and we don’t like change. However, we are also brilliant at recognising and adapting to more efficient and beautiful ways of working.

Find out more: http://design.windows.com/.

I have a wireless NFC speaker which I carry around with me when on trips, to play music from my phone to the speaker, I simply place my phone on top of the speaker. I don’t even have to turn the speaker on, that small amount of power sent from my phone to the speaker brings it to life, tells it that I’m playing music and that I want to hear it louder. It works seamlessly, it works every time. There was a time when we expected technology like that to fail but these days, it really does just work, and it works well.

When it comes to applications, I still think of apps like I think of posts on my blog. There was a plugin that I ran for a while which would allow readers to choose which places they could share a particular post – the options were endless to the point of hilarity – hang on, I’m going to turn it on briefly and screen grab it…

That’s not even all of the options. Admittedly this still happens, but maybe not to the extreme that we can see above. Some have withered away into the digital graveyard, some are so specialized that we don’t include them, some solved the issue by creating their own toolbars, but the point is, we still share or expect to be able to easily share content – but we expect to be able to do it in a more visually pleasing way.

On the web, we used to be able to do that with a quick copy/paste (and we still can) but there’s a fantastic new way of sharing information that’s built into the very heart of Windows 8 and understanding how it works and more importantly, how users of your applications could share information from your app is one of the basic features that will help your application not only stand out from others, but it can make your app more powerful and useful.

The Share Charm

People want to share the things the love and they often want content from one app into another app. The Share Charm provides a lightweight, in-context experience for app to app sharing. Also, it’s universally accessible — users can always access it with just a single swipe from the right (or by pressing Windows C) to share content from your app. The key thing to bear in mind here is that the share contract is facilitated by Windows, you design and develop the parts of the experience that are unique to your app.

Sharing works by you (the experience designer) deciding which pieces of content may be shared from each screen, Windows then handles how this gets shared, it is then up to the application designer to decide if the type of content that is being shared can be then ‘consumed’ by their app.

From your application you can share:

• Plain text
• Uniform Resource Identifiers (URIs)
• HTML
• Formatted text
• Bitmaps
• Files
• Developer-defined data

By developer defined data I am referring to any pre-defined schema – restaurant info, hotel info, a TV Series, even down to the anatomical makeup of a medical condition. The best place to look for these so you don’t have to invent them yourself is http://schema.org.

Sharing breaks down into 3 parts as follows:

• The Share Source
• The Share Pane
• The Share Target

The Share Source

The Share Source is your application. The way to think about this is, for every screen in your application, what would a user want to be looking to share? It is as important as adding navigation to a web page – you need to consider in each screen what sort of content would/could be shared. Is it an image or a screen shot of a page they’re currently on? Is it a piece of text that they’ve selected? Is it a developer defined schema of a recipe – an incredibly powerful point to make here is that from a cookery application it would be possible to share the list of ingredients to a shopping application. That application could then add the ingredients to your order. Magic.

Not every application can share, if you try and share from the desktop, this is what you get:

It is only Windows Store applications that can share content – desktop applications can take advantage of this. Some applications require that you have selected an item to share, such as if I open the photos app but don’t select a photo it tells me:

This is a powerful feature to experience designers – you have the ability to lead your user so that they are able to understand what it is that they have to do in order to share information.

I don’t believe that any application should ever outright say ‘this application cannot share’. Even if it is to give someone the ability to send a link to your application on the web store to promote your app and push for more downloads, a screenshot of the app, a description of what it does, a link to download it – there is always some content that your app can share.

The Share Pane

The Share Pane is part of the Windows OS but you do have control over how this is presented to the user. It is not a separate app, it’s a scenario that should provide a consistent look and experience as the rest of your app. There are 2 widths available to you, a short pane (346px) or a wide pane (646px). When you decide what the experience is that you’re going to share within here is going to be, choose your width and my advice would be, only use the wider pane if you really need to – you want to avoid obscuring the user’s other content where possible. Some tips and advice:

1. Make it obvious to the user what sort of content it is that they are about to share
2. Once a pice of content has been shared – provide a message and confirm to the user that the content has been shared – some apps do this in the pane itself, some use a notification to confirm that the content has been shared – how you do this is up to you but it is really important that you give the user this feedback
3. Keep the interaction in this pane simple, the user will always be returned to the Share Source application so don’t try and take over this experience

The Share Target

Your app can act purely as a share source, that means that it can share content out of the app, but not receive content. If you want your app to be a Share Target, ie, allow content to be consumed by your app then you need to decide what data formats you want to support. If your application is an image editor, you probably want to be able to accept images. If your app is a postcard creator, you may want to be able to accept the standard address schema and then allow the user within your share experience to choose an image to add to a postcard. It really is up to you to decide how your application can receive content and what it can then do with that content. The image below shows how the Puzzle Touch application handles images as a share target.

Key point to mention here again is that if you’re going to accept different types of data, design the share target experience so that it is customized for each of those scenarios. A great way of looking at this is to go to Modern Internet Explorer and select different elements and then share. Depending on whether you’ve selected text, an image or nothing at all, the share experience you receive from other applications will be different.

The user is always in control

An important thing to bear in mind is that the user has full control over what apps appear in this sharing list. If I open the charms bar and go to the settings charm at the bottom, under ‘Change PC Settings’ there’s an option for ‘Share’. If I feel your application does a particularly good job of sharing, I can decide maybe to pin it to the top of the list so that it is always there. If I think otherwise I have the option of making sure that your app never appears when I invoke the Share Charm. Keep this in mind. Where the user is in full control you have to be respectful and relevant or they may just turn you off.

I can also choose to pin your app to the top of the list. If when I invoke the Share Charm and I touch and hold, the context menu that appears gives me the option to ‘pin’ which means that application would always be at the top of that list.

Summary

Applications that I feel provide a great sharing experience include Puzzle Touch and Rowi. Puzzle Touch is a brilliant example because it takes any picture and creates a puzzle from it. It’s not that I particularly like puzzles, but the power here is that whilst these applications know nothing about each other, they can extend themselves to take advantage of each other’s capabilities. Fresh Paint allows you to draw an image, but the developers of this application were concentrating on allowing a user to create an image. On the list of features they didn’t think that they would enable a jigsaw creating API but by taking advantage of the Share Charm, it means that you can have a jigsaw of any image you create with Fresh Paint. The power here is that neither of these apps know anything about each other, but the operating system can let the apps talk to each other. So I can take a picture from my holiday snaps and let my kids then put the image back together in a jigsaw format.

That’s just one example of the power of sharing in Windows 8. Below you can browse links to some developer resources on the subject, however, feel free to hit me up on Twitter if you have any specific questions.

Where do you want to take it from here?

This about how you can take advantage of the power of share in your applications. Can I share a piece of text to a dictionary app that will then give me a definition of that word. Or a thesaurus that will offer alternative words? Can you share a piece of music with a clothing store which will return results of clothes I should wear based upon that piece of music? Can you share a photo from your favourite picnic spot with a grocery app and be presented with a shopping list ideally suited to that location, on that day, for the known weather conditions?

Really, the possibilities are endless here, clearly some require more effort than others but there is a basic requirement from you as the designer or developer of an application to consider – what will happen when the user touches on the Share Charm on each screen of your app?

It’s a new world of sharing. Share it.

Sharing resources for Windows 8

• Quickstart: Sharing content (Windows Store apps using JavaScript and HTML)
• Sharing and receiving content (Windows Store apps using JavaScript and HTML)
• Sharing content target app sample
• http://schema.org/

SmartGlass allows me to connect my phone or PC to my Xbox so I can use the second device as a controller for the Xbox or, as you can see in this instance, use the second screen for additional content. Here I have my Surface RT connected with SmartGlass over WiFi to my Xbox (connection is a seamless experience as long as they’re on the same wireless network) and it acts as the SatNav for the game. Not only showing me where I am on a map, but being able to use it as I would the SatNav in my car. Brilliant stuff.

Ed Bacon (yes, actually Kevin Bacon’s dad) is the architect who conceived Philadelphia’s Love Park (aka JFK Plaza). The park was never intended to be used as a skatepark but the materials that were used and the sweeping lines meant that it became a mecca for skaters worldwide.

However, the city didn’t like this creative adaptation of municipal space and in 2002 the park was renovated to deter skateboarders from using it. Bacon didn’t like this so on October 28, 2002—at age 92 — Ed Bacon rode a skateboard to protest the ban on skateboarding. See and hear him in action below.

Edmund Bacon Skates Love Park from Andrew Norton on Vimeo.

Hear the full story on 99% Invisible: Episode 71- In and Out of LOVE.

This film goes some way to explaining how this might be possible. And it’s in English.

There’s some Modern UI style design aspects here too, the use of colour, bold type, space, later incorporating imagery. That his medium of choice is small print such as stamps and bank notes, reminds me of Erik Spiekermann talking about screens as ‘bad paper’.

Enjoy.

Small touch. Big smile.

Team Foundation Service is free for up to 5 users, plus for a limited time all use is free. I’d highly recommend giving it a try to keep track of your source files, for project management and task tracking. It makes it really simple for me to check-in my source files and also to share that source with other people, mainly when I need @thebeebs to fix something I’ve broken.

If you’re using the Express (free) version of Visual Studio to develop Windows 8 or Windows Phone 8 applications then I’d love to hear a reason as to why you wouldn’t take advantage of this great service.

Here’s an intro to TFS to get you started: https://tfs.visualstudio.com/en-us/learn/code/connect-vs/