Good Design for App Bar Button Placement

I’ve watched a few developers port their existing apps over to Windows 8.

The first thing they do is drop all of their UI into their new app and run it to see it work. It’s nice to see things work, but Windows 8 is more than just a new API for accessing modern computer hardware. It’s a completely new design for user experience as well. So after you drop all of your buttons into your new app and see it work, you should migrate most of those buttons to the app bar.

The app bar, for the uninitiated, is the bar that slides up from the bottom of the screen whenever the user swipes up from off screen (and sometimes it appears all on its own). That app bar is nice. It avoids bothering the user by appearing only when the user requests it.

Here are some questions that developers raise when they’re learning to design and develop for Windows 8…

  1. Why can’t I put my buttons on the screen like I always have?
  2. Okay, fine, but which buttons should I put in the app bar and which should remain on the canvas?
  3. Do I put the buttons on the left, the right, or what?
  4. What if they don’t all fit?
  5. How do I control when buttons appear?

I’ll take these one at a time…

Why can’t I put my buttons on the screen like I always have?

It’s because it’s 2012 now! The modern trend has been to cram as much information into a user’s screen as possible, but we’ve had enough! When I see so may things I cease to see anything. It’s time to take a step back, take a deep breath, and think about what the user is actually doing right now and dedicate every pixel on the screen to it, immersing the user.

Look at the website versus the Metro versions of the Times of India…

Most of the space in the website version is taken up with navigation commands (hyperlinks), which is a good example of an app telling you about “where you might go” instead of telling you where you are and letting the user navigate with the content.

Okay, fine, but which buttons should I put in the app bar and which should remain on the canvas?

First off, most of the buttons should be in the app bar. It won’t take long for a user to learn that that’s where the interactions are and start to swipe that bar up automatically. Since the app bar is hidden at first (usually), many wonder if their command won’t be apparent enough to the user. Keep in mind, however, that when a user draws up the app bar, they are specifically searching for a command. It takes away the need for discoverability and arguably makes your command more apparent - not less.

Some buttons should be on the canvas though. You would decide to put a button on the canvas when it’s part of the workflow a user is traversing. A case could be made that the workflow itself is the content at that point. If I’m adding products to my cart and checking out, I’m not here to browse content anymore. I’m engaged in the purchasing workflow. If you’re a retailer making a Windows 8 app, I would recommend that you diligently immerse the user in your products and their supporting media to make them love the browsing experience. Then when they decide to checkout, transition them to a slightly more utilitarian mode with canvas buttons and progress feedback.

Do I put the buttons on the left, the right, or what?

In general, the right side is for global commands, and the left side is for contextual commands. There are exceptions, however.

Global commands are those that apply to the entity represented by the current page. If you’re on the friend page, then add to favorites is a global command because it applies to the friend.

Contextual commands are those that apply to the entity or entities the user has selected. If you’re on the my friends page, then add to favorite is going to require that you swipe select one or more friends and would then be a contextual command.

One exception to this is when you don’t have any (and aren’t going to have any) contextual commands because you have nothing for the user to select. In this case, the entire app bar can be dedicated to global commands and the left and right sides should be used to separate the most disparate functions. You could, for instance, put your filtering commands on the left and your sort commands on the right.

What if they don’t all fit?

If you have more commands then you have app bar, then go vertical by combining commands into menus. For instance, if this is what you have on your app bar…

…then combine all of your filters into one menu and your sorts into another. That would bring 9 buttons down to only 4!

How do I control when buttons appear?

If you’re using HTML/JavaScript for your app, the recommended way to add app bar buttons and control when they appear is to declare them all on the default.html file and then in the .js file for each page just control their visibility. This avoids having to manipulate the DOM each time a page is loaded. There are easy functions for doing this such as…

appbar.showOnlyCommands(["add-template-item","delete-global"]);

If you’re using XAML/C# then (from what Jerry Nixon tells me), you will actually create the app bar buttons on the page where they’ll appear.

Finally, don’t forget to account for snap view. When your app is snapped, you only have room for 5 app bar command buttons. If you have more then they will wrap up to a second row and it will look funny and your users will laugh at you. And that’s not the response you’re likely looking for.

Happy commanding!

Gen Appathon!

If you’re anywhere close to Redmond, Washington, you’ve got to attend the Gen Appathon! It’s on November 9 in Building 33 on the Microsoft Campus. It’s going to be a big hackathon with great prizes and we’re going to have a lot of experts in the room helping you with Windows 8 and Windows Phone 8 apps!

Get all the information you need and register at https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532285

See you there!

Get An App Into the Windows 8 Store

As you likely know Windows 8 is coming in the near future. You can download, use it, and even develop apps for it today. At this point in time, the Windows Store is not open for everyone to deploy, but we are looking for the first wave of great applications which highlight the power of Metro and Windows 8, especially those developers that want to get to market first and build the awareness and brand for their applications.

In order to submit your application today, you need a token which is something I can help you get.

What do you need to do to get a token? Here are the key steps:

  1. Create a great application or game and get it ready.
  2. Let me know about it by contacting me via jeremy.foster@microsoft.com
  3. I’ll help you register so you can get your application through our Application Accelerator Labs where the app will get reviewed to confirm it is done and conforms to the Metro guidelines and certification requirements.

This is a great opportunity to not only be first to market with your app, but also to get feedback from a Microsoft Services Engineer to make your app great. If you are serious about creating an application this is a chance that you probably don’t want to pass up.

In addition, our team is holding a series of events and office hours to help you - we want to make sure you have what you need to be successful. You can come learn more about how to build apps for Windows 8 or show up and build your app with one of our evangelists or others in your community available to help you if you need it. You can find more information about our events and availability at…

Windows 8 Developer Camps

Redmond, WA (May 11)

Denver, CO (June 1)

Chandler, AZ (June 8)

Windows App Accelerator Labs

Los Angeles, CA (May 8-10)

Redmond, WA (May 15-17)

Mountain View, CA (May 22-24)

Query Selector Helper for Metro Apps

I wrote a post sometime back about selecting DOM elements in your Metro apps. I have since written myself a helper method that I find quite useful and perhaps you will too. It looks like this…

function q(query, context) {
context = context || document;
var result = context.querySelectorAll(query);
if (result.length > 1) return Array.prototype.slice.call(result);
else if (result.length == 1) return result[0];
else return null;
}

I just drop it in the global namespace (handslap) so I don’t have to worry about qualifying it with a namespace prefix. So, more specifically, I just add it outside of the function on the default.js page, and that makes it available to all of the pages in my app.

The original goal was to make it easier to type then things like…

var fredDiv = document.querySelector("div#fred");

…or…

var allDivs = document.querySelectorAll("div");

But I subsequently decided to combine the selection of single elements and multiple elements. The logic dictates that if multiple results are found, then they are all returned, but if just one is found then that one is returned. Furthermore, you can see that I am turning the NodeList result that comes back in the case of multiple results into a standard JavaScript array using a slice. This way I can use array methods like .map, .filter, etc.

It accepts a context which if it’s omitted will default to the document object. If provided, however, then the selection is done below the DOM element specified. Therefore this…

var allDivs = q("div");

…will find all div elements in the entire document, but…

var footer = q("div#footer");
var childDivs = q("div", footer);

…will find all div elements underneath the div called “footer”.

Use it if you like it. Happy selecting.

A Primer on LINQ and Lambda

Introduction

I still remember the day well. I had heard a ton of buzz about LINQ statements and lambda expressions, so I knew they were pretty big deals, but I didn’t have the concept. I didn’t know why they were important or when. In short, I didn’t know what problem they solved.

I looked all over the internet for a good description of the why/when… for the problem statement… for the concept, but I didn’t really find it. I found enough information to extrapolate the concept in rather short order, but I’d like to write a primer on the composite topic of LINQ and lambdas because it’s what I would have like to have seen.

This is just a primer and not an exhaustive introduction. There’s plenty of information on the web and I’ll include some links to get you started digging further, but this is just a brief attempt to relay the concept and get you started.

Here goes.

LINQ

The problem statement

LINQ exists because we do a lot with lists of data in a huge variety of forms.

LINQ is essentially a collection of extension methods that act on lists. It’s that simple. These methods filter lists, sort lists, and in many other ways they manipulate the individual items in a list. The cool thing is that any list (any list that is IEnumerable technically) can be “LINQed”. Furthermore, the extension methods can be overloaded to work not only on local collections such as lists and arrays, but they can also act on an endless number of more conceptual collections. So anyone can create a LINQ provider and allow developers to interact with their collections through this common set of methods. The Wikipedia page on LINQ includes a good list of providers. Some I find interesting are: LINQ to Twitter, LINQ to Wikipedia, and LINQ to CSV.

The best place to go to learn about LINQ is 101 LINQ Samples. But know this… when they created LINQ, they created a whole new way of writing the code. It’s called the LINQ query syntax and it feels a little like you’re writing SQL. But everything you write in LINQ can either be written using this LINQ query syntax or it can be written using extension methods. The 101 LINQ Samples writes everything in LINQ query syntax, but I all but never use this syntax anymore. I strongly prefer the extension method syntax myself.

So these are equivalent statements that filter a list of states for the ones that start with the letter a:

LINQ Query Syntax:

var statesThatStartWithA = from s in States where s.Name.StartsWith('a');

LINQ Extension Method Syntax:

var statesThatStartWithA = States.Where(s => s.Name.StartsWith('a'));

Lambda Expressions

The problem statement

Lambdas exist because delegates can be cumbersome.

Dynamic languages like JavaScript make handling and passing functions a beautiful thing. A function can be passed around just like a variable. The same can be done in C# using delegates, but it’s a pain in the butt. You have to declare the delegate and whoever uses it needs to have visibility to this definition.

Lambda expressions are simply anonymous functions. They’re just a really shorthand way of writing a function without even giving it a name.

Notice in the code above where we filter out the states that begin with a using the extension method syntax that the Where method takes a single parameter and that parameter is a lambda expression…

s => s.Name.StartsWith('a')

This is awesome because functions are powerful. In this case we use s => which means that our function takes in a single parameter (which we know is going to be the type of whatever item types exists in our list… in this case States) and it returns a Boolean value of true if the state starts with an a. If we did this (which would be silly of course)…

var states = States.Where(s => true);

…then we would get all states. They would not be filtered at all.

Notice also that our function doesn’t have any mustaches around it, doesn’t have a semicolon, and the return keyword is omitted. It doesn’t say s => { return s.Name.StartsWith("a"); }. This is another feature of lambda expressions. If you’re entire function is a single statement and evaluates to the return type that the lambda expression is expected to return, then the typical adornments can be omitted and it works. Know, however, that you are welcome to add the adornments and thus grant yourself the ability to get all sorts of fancy with your function. You can, for instance, do a few steps imperatively before you return a value. Let’s look at what that might look like although the following example is again rather silly except that it illustrates my point…

var statesThatStartWithA = States.Where(s => {
char letter = 'a';
bool result = s.Name.StartsWith(letter);
return result;
});

Lambda expressions work great with LINQ statements, but their usefulness by no means ends there. Remember, it’s just a shorthand way of writing a function, so you will find them all over the place.

That probably plenty of depth for a primer, but dig into more depth in the links I have included below.

Resources

101 LINQ Samples

MSDN: Introduction to LINQ

Wikipedia article on LINQ

MSDN: Lambda Expressions (C# Programming Guide)

Wikipedia article on anonymous functions

Get That WinRT Documentation Local

If you haven’t seen the modified help system in Visual Studio 11 then prepare to be impressed. Now when you go to the Help menu, you can choose Add and Remove Local Help Content. Upon doing so, you’ll be presented with a very helpful dialog box.

From here it is very easy to figure out how to choose which categories of help content you want to be installed locally and where it will be installed from.

I just installed all of the WinRT and JavaScript help content so now I can read it disconnected. Woohoo.

Overview of Windows' New Architecture

At the heart of Windows 8 development is WinRT. This is NOT Win32 and it’s not .NET. It’s a brand new set of APIs that’s designed for modern software development and designed for user experience with an asynchronous model that allows your app to remain fast and fluid.

The real joy is that you get to write code against this API in your language of choice. You can choose JavaScript, C#, Visual Basic, or C++. The code you author in your language of choice is projected into WinRT code and runs native on Windows. Additionally, you get all of the inherent benefits of your language. So for JavaScript, you still get to call all of the existing browser APIs. For the .NET languages, you get a tailored .NET profile with namespaces and classes that work much like you’ve come to expect. And with C++ you get to call C components and C/C++ libraries (again within a tailored subset of Win32).

All of this new functionality is available in addition to the ways you’ve always done things. It does not eliminate it. So you can still write web apps, .NET apps, and native apps against Win32 like you always have. That’s excellent.

In case it’s news to you, here’s an API overview of the Windows 8 Platform. You can find more information at buildwindows.com and dev.windows.com.

Which Windows 8 Language Stack Should I Choose?

I had a conversation with an attendee at the recent Windows 8 developers event at LA Live on Monday that I want to put into words and share in case it is of benefit. The question was this:

I’m new to development and I’m jumping in to Windows 8 development. Which language stack should I choose – HTML/JavaScript or XAML/C#?

It’s a good question because there are a lot of contributing factors.

I’ll leave the other languages (Visual Basic, C++) out of the discussion for the most part since they were not part of the question.

Here are the factors I’d like to compare on:

  • viability of employment
  • scale
  • interoperability
  • developer joy

Finally, a direct comparison is difficult because the nature of each of these language stacks tends to push developers into application architectures. XAML/C# applications tend to enable a developer to create a lot of custom business logic inside the application itself, whereas HTML/JS applications tend to encourage a developer to push the business logic up to a separate service to be consumed in a JSON feed for instance.

Let’s go.

Viability of employment

First of all, I have to say this. Don’t jump into application development with high hopes of being employable but without any passion for the trade. It won’t work. I would love to play guitar, but I can’t. Why? Because I don’t love it enough. If I loved it enough I’d practice it every day and then I’d become really good. I guess my analogy breaks down there, because I wouldn’t necessarily be employable :) You really need to love software development and you need to do it every day. You need to read programming books in bed and you need to experience genuine, heart-felt aggravation when things aren’t working.

But it’s good to be employed, right?! Still, I don’t think viability of employment (now and in the future) is too much of a concern. Given the current developer and consumer investments in HTML and JavaScript as well as XAML and C#, none of these languages are going to leave their developers on the street any day soon.

If, however, you want to be a very portable employee, you should choose HTML and JavaScript. I’m not talking geographically portable but technically portable – as in, you want to work in a variety of roles at a variety of companies doing a variety of things. The HTML and JavaScript languages are everywhere. We don’t just have browsers on our computers anymore. There are browsers in cars and kitchens and phones. So, every role in every company in every industry needs to know something of these technologies.

Still speaking technically, the employment options for a XAML/C# developer are going to be more narrowly defined.

Scale and maintainability

When I say scale, I’m talking about the ability for an application’s code base to go from small to huge. You might consider this dynamic if you suspect your application will be growing a lot - say going from 3 features to 30. In this case, your codebase needs to grow and your architecture needs to evolve.

On the UI side, I can’t see any advantages of either XAML or HTML in this area. Behind the scenes, however, C# has some huge advantages over JavaScript. I’ve seen C# codebases that are mind boggling and yet still quite easy for the developer to traverse and debug. Handling a huge JavaScript applications on the other hand is about like handling Jell-O - both are a little too dynamic. That’s not to say it can’t be done; I’d never make that claim.

Interoperability

How good are these language stacks at cross communicating with other applications? Both are very good. You might want to jump in here and tell me how much better JavaScript is because of it’s lightweight JSON objects, integration with the web applications, and the like. But C# can do all of that too. Any of the C# objects are one small serialization step away from becoming the same JSON object that a JavaScript app uses and likewise in the other direction. Just because your C# application is fat with business logic, doesn’t mean it can’t communicate lightly with the outside world.

Developer Joy

This is an important category in my opinion. You don’t technically have to enjoy writing software to write a lot of good software, but it most certainly helps.

I find a lot of joy writing both C# and JavaScript. In C#, I enjoy the traversal of types, type hierarchy, and type conversion. I enjoy lambda statements a lot, and I really geek out on LINQ. In JavaScript, I enjoy JSON and dynamically creating, extending, and manipulating objects. I enjoy anonymous functions and passing them around willie nillie.

I think you have to run through some tutorials for each language and determine for yourself which one you might enjoy using more. The problem is that so much of my language enjoyment has come later when I’ve used a language for hundreds of hours and I’m starting to feel like I get it.

See if you can browse a bunch of JavaScript code and C# code and see if either feels more right to you. See if one of them comes more quickly to your intuition.

Conclusion

Overall, whatever language you choose for developing Windows 8 apps, you’re going to end up with the ability to create some awesome apps, you’re going to be employable, you’re going have fun doing it, and with the amazing opportunity you have to reach hundreds of millions of potential users, you are even likely to make some money!

Happy app development!

Ban the #Region

Just in case you didn’t know, you don’t need to use the #region designator any more to collapse code. When you use the #region indicator, you create a region for everyone you share your code with, and some people hate having regions in their files. I’m one of them.

If I’m looking at a code file that’s long enough to require regions, I’d rather not look at it at all. Even “in the real world” files should contain a single class, classes should follow the single responsibility principle, and methods should be short. If your code doesn’t look like that and you use regions to attempt to make your code remotely readable, that’s sinful enough, but to force those regions onto your fellow developers is just downright morbid.

How do you get away from them you ask? Simple. You just highlight code that you want to group and hit CTRL + M, CTRL + H (or the alternative mouse longcut of going to Edit | Outlining | Hide Selection). The code collapses just like a regions, but here’s the kicker – it’s only hidden for you! The change is saved in your .suo solution file which is for you only (never check this into source control), and now you can go ahead and collapse what you will and leave your fellows free to work how they will.

There you have it.

Big Windows Developer Event in LA!

If you are in the Los Angeles area Monday event or if you can get there, you should stop by the Nokia Theater Live next to the LA Convention Center and get a whirlwind tour of Windows 8 from a developers perspective!

Everything from breakfast to dinner will be information straight from Microsoft to you. Then, after dinner, you’ll be joining us for Coding with the Experts where you walk through an excellent series of tutorials to create a full-fledged Windows 8 app. You’re guaranteed to walk away with skills.

I personally will be presenting on the tooling you’ll use to create Windows 8 applications: Visual Studio 11 and Blend. I’ll also do a presentation on designing Windows 8 applications including a complete design scenario, so it will be theory and practice in one presentation.

Come introduce yourself to me when I’m not on stage. I’d love to meet you. See you there.

Go to http://bit.ly/Jjd9dato to get all the details. See you there!