My mom won’t care about the Windows 8 Start button

Disclaimer: I am an independent Windows 8 developer who used to work for Microsoft. My family uses Windows PCs and iOS devices. When working on HTML5 projects I sometimes use a Mac to develop. Its crazy, I know.

There has been a lot of talk about the lack of a Start button in Windows 8.  Or more accurately, a statically placed visual icon in the Desktop app which the user can click on to return to the Start screen.

What happens if the user is in the Desktop app and moves there mouse into the same area, perhaps even driven by muscle memory?  A little thumbnail of the Start screen shows up and when clicked takes you to the Start screen.

For even faster travel back to the Start screen, just press the Windows key and you’re there. It’s stunning, really.

I do agree though, it’s not in your face and you have to learn how to do it. Should they put the Start button back in the task bar?  Sure, just use the new Win8 logo and you’re done.

BUT…

Do I think this is going to be a real issue for my mother, grandparent or my kids? No.  At least I hope not.  If so, something went terribly wrong.

Try this.

Go to one of your non-techie Windows-using friend’s computers and hit the amazing start button.  Take a look at the most commonly used programs.  What do you see?

This is what I found:

  1. Web Browser
  2. Photos, Music, Video, Messaging, Twitter, Facebook, Reader
  3. Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
  4. QuickBooks, Family Tree Maker, Minecraft, League of Legends

Those are examples of commonly used Windows Programs. Now how does that compare to the new fandangled Metro style apps which run from the Windows 8 start screen and not the Desktop app?  You know the one missing the Start button.

Web Browser
You can do just about everything in the browser, the web is amazing. You may even be able to build an OS on it.  Is there a Metro-style browser in Windows 8? Yes, its IE10 and hey it has way better support for CSS3.  Are there more coming? Yes, Firefox is confirmed.

Mail, Photos, Music, Video, Messaging, Twitter, Facebook, Reader
There are Metro-style apps already available in the Consumer Preview that perform these functions. Are they awesome? Almost, definitely promising, but I believe they will be better for release. And if not, there will be other options via the Store.

Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
These programs are not  yet available as Metro-style apps. If Microsoft does not make them available then they’ve failed here.  And the good news is, as far as the last three are concerned, there will be other options via the Store.

Quickbooks, Family Tree Maker, Minecraft, League of Legends
These are examples of programs that are likely not to be changed (ever or anytime soon) to Metro-style apps, for some reason or another – existing investment, technical philosophy, etc.  This is where it hits the most and we might need that little Start button back. And if you don’t convert or get a hook in the Store somehow, less and less Windows users will adopt your program and instead use one of the other options via the Store.

My mom won’t care about the Windows 8 Start button
Because hopefully she will be too busy hanging it in Metro style land; not breaking her computer rather finally getting to it enjoy it.  One of my first “ah-ha” moments with Windows 8 was looking at the Settings app.  “My family could use this!” I thought.  It’s way friendlier and less intimidating than the Control Panel.  Thanks Metro design language.

…other options via the Store
You may have noticed this phrase come up more than once in this post.  That’s because this is big clincher, the thing that makes everything work.

Quick, guess how many Windows programs my 10-year old daughter has installed? 0

Now how many apps has she installed on her iPod? At least 30 or 40.

What does the mean?  She loves her iPod way more. I believe that once she sets up her Win8 PC in the same manner as well she’ll be hooked. When my wife customizes her Win8 PC she’ll be happier and more productive. When my mom customizes her Win8 PC (or I do it for her) she won’t be lost anymore.

As for those of us power users
I need my Visual Studio and Photoshop to pay for all of these apps and Windows 8 PCs, so I need to learn to be comfortable moving between the Start screen and the Desktop app. The good news is it’s not that hard. You really just need to know Win, Win+X and Win+C.

Try it out. Besides, your other hand needs something to do while you’re mousing around.

Windows 8 AppBarButtonStyles enumerated and visualized

As a result of the WinJS AppBarIcons post yesterday, I’ve received a fair number of requests asking to see how this compares to what’s available for XAML-based projects.

AppBarButtonStylesThe results are in, but they don’t quite stack up.

Download the full image

There are currently 29 options compared to the 150 options in WinJS.  Additionally some of the names and icons conflict or are used in different ways.  I’m hoping this is ironed out before the full Windows 8 release.

Instead of a property, the appearance of the Button is set via a Style where the name of the icon is used as a prefix to the string “AppBarButtonStyle”. The Styles are defined in the “StandardStyles.xaml” resource dictionary which is part of the basic project template.

Sample code:

This works fine and is inline with how XAML-based controls are styled, but after doing so much WinJS work I will say it feel a bit heavy compared to just setting a property.  Custom icons are defined by setting the to “AppBarButtonStyle” and setting the Content property of the Button to your own PNG file.

Overall, I prefer the WinJS choice of names and icon usage over those used in XAML, except for the “find/Search” icon. Since the icon looks like the OS-level Search charm, I believe it should be named “search” and not “find” in WinJS.

Windows 8 AppBarIcons enumerated and visualized

Download the full image

While digging into the Windows 8 Consumer Preview, I found that AppBar buttons are now defined by using the AppBarCommand object which has an icon property. In order to work, the string value must be set to a property of WinJS.UI.AppBarIcon or a custom PNG.

Sample code:

This is wonderful functionality providing for both custom icons and 150 existing icons using the Segoe UI Symbol font.  Genius, now where is the list of available icons?

Oh, I see, there isn’t one available yet.  Ok, I’ll just make one for myself and my friends. Enjoy.

Fahrenheit to Celsius in the Win8 Weather app, a story of change…

From fahrenheit to celsius in Windows 8 Weather app from Adam Kinney on Vimeo.

This is a very short screen capture on how to change the settings of the Weather app in Windows 8 to use Celsius instead of Fahrenheit. Useful for those who want to make the change, but also indicative of the broader concept – Windows 8 is new, like really new.

Now that you’ve learned to use the Settings charm, you will find it in the same spot every time. And any development team who take the time to follow the pattern will have happy non-confused users.

This is fresh new path to be discovered, refined and molded. I’m looking forward to it as both a user and developer.

———–

As side note, the screen capture was created with Expression Encoder, which has no trouble running on Windows 8.

Cut the Rope in HTML5 is live

Its alive! Cut the Rope is now available in HTML5 on the web at www.cuttherope.ie

I was fortunate enough to be a part of this project and am pleased to see it up and running. Hats off to ZeptoLab for creating a great game with such a fun visual style.  And much praise to the two masters Joel Fillmore (JS Game Engine Lead) and Robby Ingebretsen (Project/Visuals/Everything Lead).

For more information on the developer story, checkout the Behind the Scenes site and grab some developer candy while you’re there.

Om nom, nom, nom.

Setting up your first use of the Animation library in WinJS

The WinJS Animation library provides some pre-scripted animation functions that allow you to easily reproduce the signature animations of Metro-style apps.  Since there is no “Animated Application” template (and I don’t think there should be).  I thought I’d share the first couple of steps needed to use the library in your own application.

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. In default.html, add an element to be animated.  I chose a header taking advantage of the provided classes of the theme CSS.

3. Next add a reference to the Animation library which is defined in the “animations.js” file under the “winjs/js” folder.  Additionally if you open this file, you will find in the comments at the top that this library is dependent on the “base.js” file and the “ui.js” file.  The first file is already referenced but “ui.js” needs to be added.  Add the references to your default.html file, like the following:

4. Switch over to default.js, and in the onmainwindowactivated method add the following code to locate the element and run the page enter animation.

Its important to notice the namespace is “Animation” and not “Animations”.  One reason I was prompted to write this post is because the Windows 8 dev center example code erroneously uses “Animations”. Certinaly frustrating when you’re just getting started.

Run. Run the example and you should see after the app starts up, the page title slides into view with a short animation.

What about chaining a second animation after this first animation? Since animation functions return promises its very easy to do so.  Check it out.

5. Add another element below your first in default.html. Let’s use the fadeIn function this time, so set the opacity to “0”.

6. Now go back to default.js and add a then call on enterPage. Inside define a function that locates the second element and calls fadeIn.

Run.  Now when you run the app, after the page title slides in, the paragraph below should fade in to view.

And that’s it to getting started! If you look at the WinJS.UI.Animation namespace you’ll find the other available scripted animations.

Looking through the “animations.js” file, I found it interesting to note that the available functions actually make a call to the Win.UI.executeTransition function, so if you’re looking to run some custom animations you can do that too.

I’m sure I’ll be posting more about the Animations library soon.  I’m not sure what everything does yet, but it sure is fun to poke around.

No Alert in WinJS! Use console or MessageDialog instead

Please excuse the superfluous exclamation point in the title, this is not a true emergency.

Most JavaScript developers have moved on from debugging with the alert function, but sometimes the quick and very dirty function comes up as an old instinct. This instinct will be squashed if you attempt to use alert or its siblings, confirm or prompt, when beginning your Windows 8/WinJS education.  A call to one of these functions will cause the Visual Studio debugger to break and throw an undefined exception.

Thankfully there is a JavaScript console available in Visual Studio so you can simply call console.log(). The following steps will take you that far:

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. Add an element to your default.html page providing something to click on. You could go with boring old text, but I went for a leaf image (pictured above, download) and i gave it an ID of “leafImage”.

3. Next add an event handler in the onmainwindowactivated function in default.js. You can remove the ActivationKind check as it doesn’t matter for this sample.  Now when adding the eventHandler I skipped over ‘click’ and instead attached to ‘MSPointerDown’ fully embracing the new Input system of Windows 8:

Run. Now if you run this code, you will see your text or image and once you click it with a mouse or tap it with your finger the event will fire. Alt-tabbing over to VS you should see the text logged in your JavaScript Console.

This does mean you need to alt-tab to see the information, but what about showing the info in the app?  You could use the other method of a debug div element sitting in your HTML that you can write to.  That still works perfectly fine.

Another option available is the MessageDialog, especially if this info is not just debug info but rather some information you want to share with user.  Possibly even allowing the user to make a choice or give their opinion. To use the Message Dialog you can use the following code:

And now let’s break it down.

4. (Line 5) Notice the MessageDialog is from the Windows namespace and not WinJS. This is an example of the native WinRT-integrated-frameworks-in-action.

5. (Line 10-15) a UICommand is added for each child of the resultOptions array.  Adding the label in invoked handler can also be set in the constructor.

6. (Line 18) Notice the use of the promise object with the then function.  This is how asynchronous methods are handled in WinJS, which is already an existing popular JS pattern in libraries like jQuery for example.

7. (Line 19) For some reason the event arg c is always equal to the last UICommand added to the collection, resulting in the need for the separate result variable.  Based on the documentation I’m not sure if this is an error, but it seems like it should return the selected UICommand instead.

Run. Running the app and clicking the image I found two different results. The left image is run from VS and shows the MessageDialog with a black background.  The right image is the app run in Interactive Mode in Blend showing the MessageDialog with a green (and I believe the correct) background.

Additionally while running the app in Blend I noticed that there was no JavaScript console there.  Let’s hope one is added before Blend 5 ships, as that will make debugging across the tools simpler.

Overall it is just a “Developer Preview”, but so far exploring Windows 8 has been a lot of fun. Expect more posts in the future.  This stuff is not well documented and I’m happy to share and get feedback on how things currently work.

Thinking of Pinned Apps conceptually on Windows Phone

One of the more distinctive features of Windows Phone is the Start screen – which includes nice big live tiles that you can add and organize however you prefer. Up until the latest release, pinned items have been limited to applications, contacts, websites and other native or system level items.

With the latest release, a new feature has been added for app developers called Secondary Tiles. The new tiles allow users to create shortcuts on the Start screen to a deep location (at least one-level beyond the homepage) of an application.

This is a big win for app users as it allows them quick access to something they really care about. And it is a big win for developers, as a unique feature of Windows Phone and as a way for their app to become even more valuable and loved by the user.

So how do you design your app with this feature in mind?

This is a design challenge I recently worked through and not finding much documentation on the topic, I’ve decided to share my thoughts.

Quick Tiles Overview

Before there were secondary tiles, there was the primary tile, formally known as the Application Tile.  The job of this tile is simple – open the application to the home page, defined by the default task in your WMAppManifest.xml file.  Even though they may not currently be pinned to the Start screen, they always exist and are accessible as the first entry in the ShellTile.ActiveTiles collection.

Secondary Tiles are created via code in response to user interaction (e.g. click of a “Pin to Start” button).  When created the tiles are given a unique NavigationUri, reflecting the purpose of the tile to link to a specific place or thing within the application.

Both types of tiles have six properties – Title, BackgroundImage, Count, BackTitle, BackBackgroundImage, BackContent.  The first three should be obvious in functionality.

The second three properties once set will cause the tile to flip, as though you were looking at two sides of the tile in space.  This is a great way to get the user’s attention, but could be abused by over usage.  For an avant-garde usage of flipping tiles check out Flipping Tiles.

For more information, check out the Tiles Overview on MSDN.

Just a Slice of the App

Now that we have the basics on the table, what does this mean for design?

Think of a Pinned App as a manifestation of the “Be ‘On the Go’ Capable” Metro Principle. By pinning a specific single unit (location, person, book, etc) to the Start screen, the user has less typing, less navigation and any other type of data entry to make it to their favorite or valuable object.

Since the intention is to focus on the single object, this gives you a license to only expose the object and the segment of the app that deals with the object.  Let’s take a look at a real example to explain the idea and see it in action.

The People Hub is used to expose all of your contacts information and statuses.  Its an easy way to get the most recent statuses or search for a contact in order to get in touch with them.  I can select a specific contact, check out their info and hit Back to return to the People Hub.

Now, I have this friend named Pinto Snows who like I to keep in close touch with. I can pin him to my Start screen, so I have quick access to his contact info and status by selecting him via his very own tile.  If I close the app, I return to the Start screen and not the People Hub.  For one thing, I came from the Start screen so that’s where I expect to return.  Secondly, I only wanted info about him, I don’t need to look up anyone else.

This is a very “on the go” interaction.

There is no need to go to the homepage of the app from here, this is just a slice of the app.

Development and Implementation

When developing the app, this “slicing” needs to be taken into consideration.

The page that loads from a Secondary Tile must be self-sufficient. It can’t depend on data being loaded from the home page or some other page. There are two simple ways to detect whether a page has been opened via a Secondary Tile:

  1. NavigationContext.QueryString – the Uri for secondary tiles should be unique and ideally pass an ID in the QueryString. Depending on how you have developed an app, this may be enough to detect the difference.  If you are already using QueryStrings to pass information, just use a unique parameter when setting the Uri for the SecondaryTile, such as “pinned=true”.

  2. NavigationService.CanGoBack – since the page is normally loaded by navigating within your app, this property will be true.  In a pinned situation where this page is loaded as the first page, the property will be false.

The biggest difference here is that when the user hits the Back button they are leaving your app, unlike a non-pinned situation where they go up one-level or to the homepage.  The good news is you have the previously mentioned ways to detect the situation as well as the normal application-level events to save state and data if needed.

For a good example of a third party application following this pattern, check out 4th and Mayor pictured to the right.  The first image shows the app and a specific location (below Settings) pinned to Start. The second image shows the location opened via the pinned tile.

One more suggestion (which is done in People, not in 4th and Mayor) is to disable the Pin button if the user has already pinned that object to Start.  You can easily check for the existence of the pinned tile be querying the ShellTile.ActiveTiles collection and comparing NavigationUri values.

Talking about HTML5 on Yet Another Podcast

Jesse Liberty was kind enough to invite me back on to his cleverly named podcast, Yet Another Podcast, to talk about the technology of been focused on lately, HTML5.

In YAP episode #48, we talk about the type of work I do as a UI/Interactive/Visual Design Developer and the sometimes large or small degrees between the design and development teams. After that we dive into thoughts on building HTML5 apps, mainly focused on data visualizations and games.

New Windows Phone “How Do I” Video Series

Working on a few WP7 videos

“How do I…do something new in and cool in Windows Phone ‘Mango’? This is Adam Kinney for Microsoft and today we’re going to answer that question by…”

If you are new to Windows Phone 7 Development or you want to get a look at on e of the new features in action check out the new Windows Phone “How Do I” Video Series

Each 10-15 minute video focuses on a single topic and walks through an example of code. I had a lot of fun putting these together and I think the “Mango” update will be huge for Windows Phone 7 developers and users. They’ve thrown in some really nice new features in there like deep linking tiles, flipping notification tiles, sockets, local database and more OS integration with new tasks and access to contacts and appointments data.

Here’s the full list of videos: