App Developers! Users Need Your Help!

I have been using Windows 8 since last December, when the Developer Preview was out.  By the time the Consumer Preview was out, I had read all the articles about the (then) Metro design principles, learned how modern apps should be laid out, and about all of the new touch metaphors.  I then designed my app Memorylage, from the ground up, to properly make use of these features, and blend into the whole Windows 8 experience.

The problem?  While I may know and understand all of the new UI interactions for Windows 8; at this early stage, most of my users don't.  And there aren't currently many signs pointing them in the right direction.

A Leap of Faith

In designing the new modern interface for Windows 8, Microsoft made a very important decision early on.  They would create an interface that was as efficient as possible to use, but not as easy as possible to learn.

This is an amazingly large gamble for something as big as Windows, and one that we won’t learn the outcome of for quite a while still.  Can end-users really learn a new interface with no visual indicators?  Do they want to?

Regardless of the answers, the reality is that many new users are using Windows 8 for the first time, and as developers, our apps are one of the first experiences they have with it.  Like it or not, our apps will often be judged for things that we have no control over.

Under-Utilized Features

Here are some of the biggest features that people were missing when using my app.

The Share Charm

The charm bar is one of the more divisive UI elements in Windows 8, and one of the less obvious for new users to really understand.  They often don’t realize that it is context-sensitive to whatever app you are in, and think it is just for the OS itself.

Looking through usage data from my app, I saw that from the custom collages being created, over 38% of those were saved, but only 1.5% were being shared.  There may be a bit of preference towards saving an image over sharing it directly, but with numbers that drastic, it is obvious that the share charm is not being well utilized.

For those apps using the search or devices charm, be ready for the exact same issue.

Selecting Images

With touch, the way to select an item is to do a cross-swipe, where you swipe perpendicular to the direction of panning.  So if your content scrolls horizontally, you would swipe up or down on an item to select it.  This works great, as it allows you to quickly select or interact with an item, such as tapping to view full-size.

Unfortunately, it is not as obvious to the end user, and since you must select an item before being able to create a custom collage, many people I talked to didn’t find out about this feature, or considered it a “hidden” feature that they found eventually.

It also was not obvious to many that you could select multiple items without any special keys, which you would normally need in a program such as File Explorer.

Semantic Zoom

Semantic zoom is one of the new navigation methapors that Windows 8, and can work really well to quickly jump around through large lists.  And while it may be fairly easy to discover on touch, it is much less obvious for a mouse and keyboard.

Very few people know about the Ctrl/- keyboard shortcut, or to hold Ctrl while scrolling with the mouse wheel.  I use this all the time in my app, and people are always impressed when I show it to them, but for all the people I have shown the app to in person, not a single person has ever found it on their own.

Navigating From the AppBar

The three main functions of Memorylage are to view your photos as a series of dynamic collages, create your own custom collages from selected images, and to use the photo booth function to take new photos for a collage.

Many people find photo booth and the creation of collages to be the biggest strengths of the app, but they are both accessed through the app bar, while you start out in the browsing mode.  Since not everyone opens the appbar, and since the Custom Collage button is disabled until an image is selected, these are more features some people consider “hidden”.

A Gentle Nudge

The first thing I implemented, about a month ago, was a splash screen that displayed on the first run of the app, or after any update.  This helped with a few different issues.  It gave me a place to put a short getting started guide, let users know about new features being added, and gave me a way to get feedback from them through email or social media.  This helped a lot, but is something that a lot of people don’t stop and read when first opening the app.

…provides a much less obtrusive replacement to the MessageBox.Show method we all know and love.

To further help users, I used the Popup control to give helpful tips within the app, at the exact time when someone might want to do those things.  When first navigating to a new folder, it will let the user know about selecting images, and where the Custom Collage button is.  When opening up the Photo Booth section for the first time, it tells them how to use it.  For the share charm, I actually don’t mention it when first going to the Custom Collage page, but immediately after the first time they save a collage.

The Popup control is a great new addition to WinRT, and provides a much less obtrusive replacement to the MessageBox.Show method we all know and love.  In a future post, I will show the code I used to create a static class that closely resembles the MessageBox.Show method, allowing you to simply pass in the text you want to display, an optional heading, and an optional location.  it will then create the Popup control, with its content, and display it.  All in a single line of code.

The last change I made, to further highlight the Custom Collage and Photo Booth sections of the app, was to move those two buttons to a top app bar.  I have noticed that most buttons that navigate to s new section of the app are located in the top appbar, instead of the bottom.  Also, by having the two buttons separated, it highlighted them as well, making them easier to spot.

The navigation options in a custom top appbar

Store App Restrictions

It’s not just hidden features that confuse users, but also some of the store app restrictions that don’t apply to the apps people are used to.

One of the most requested features for Memorylage, is the ability to view images outside of the Pictures library.  I have gotten many bad reviews solely due to my apps inability to do just that.  This is of course a basic restriction on apps within the store, but the problem is that the average user doesn't know this.  This was made abundantly clear when I got a scathing 1-star review, saying how the app didn't support the synced SkyDrive folder on the desktop, and therefore wasn't even worth trying.

I ended up writing a short post on the Memorylage website, and made use of the splash screen to point all of my users to it.  Not only did it describe the restrictions the app had, and why it wasn't my fault, it helped inform them about how to fully utilize the Pictures library.  Many people don’t realize that you can add extra locations to it, and all of the files don’t actually have to reside there.  This is especially useful when adding in synced folders from SkyDrive.

Luckily, the user who wrote the 1-star review emailed me as well about the lack of SkyDrive support, and after explaining how it worked, and pointing him to the article, he actually revised his review and gave me 4-stars.

What is Microsoft Doing?

…they want to leave a fun element of “discovery”…

The big question remaining though is what Microsoft is doing to help with this.  I can’t describe the disappointment at seeing their “training” video during a new account creation.  This was supposed to be their way of teaching users the new interface, but it simply shows swiping in from a single side, and moving to a single corner with the mouse.  It doesn’t show what any of the other sides or corners do, or even describe what the first side/corner actually does.

I guess they want to leave a fun element of “discovery” for the user, but from what I have seen of many people trying it on their own; without some guidance from others, “discovery” is something many people will be missing out on.

As more and more people start to use Windows 8, and learn how the various features work, these issues should start to be less frequent. In the mean time though, educating the users is part of the price of getting in early on a brand new eco-system, and is a pretty small one, if you are aware of it.

Recursive Folder Thumbnails

Thumbnails Everywhere

One of the best new features of WinRT is the thumbnail API.  This allows you to very easily grab thumbnails of any type of item in the file system, such as an image, a song, a folder, or any other file type, and Windows will handle returning a proper thumbnail for it.

For images, this is even more useful, as it will take care of positioning and cropping the image correctly, so that an image of any aspect ratio or rotation can be returned in a standard size.  It always crops towards the top center of an image, as that is where the most important part of an image usually is, especially if it is of a person.  This is actually a very important part of how images in Memorylage are displayed.

Here is a great article about how to use the API for any type of thumbnail: Guidelines for thumbnails (Windows Store Apps)

A Minor Annoyance

For folders, the API will look for a file directly within it, and use that to an appropriate thumbnail, such as an image for an image file, or album art for a song.  The problem is that the file must be directly inside the folder, and not within a sub folder.  If you have a folder with many sub-folders (all containing images), but no files directly inside it, then no thumbnail is returned.

For the initial version of Memorylage, I used the GetThumbnailAsync() method as-is, and just displayed a default image if there wasn’t a thumbnail found.  This worked well enough in most cases, but it always bothered me a little seeing defaults in places that they really weren’t needed.  After seeing it mentioned in reviews of the app, and in emails from people using it, I decided to finally fix it up.

The Code

Fixing this was actually fun, because it was one of the few times outside of a classroom that I actually got to use recursion.  I also made it an extension method, so that it can easily be used in place of GetThumbnailAsync().
 

public static class FolderThumbnailExtensions
{
    public static async Task<StorageItemThumbnail> GetThumbnailRecursiveAsync(this StorageFolder inFolder,
        ThumbnailMode mode, uint thumbWidth, ThumbnailOptions options, bool tryThisFolder = true)
    {
        //try to get the thumbnail directly from the folder
        if (tryThisFolder)
        {
            var thumb = await inFolder.GetThumbnailAsync(mode, thumbWidth, options);
            if (thumb != null)
                return thumb;
        }


        //get the sub-folders of the input folder, and return null if there are none
        var folders = await inFolder.GetFoldersAsync();
        if (folders.Count == 0)
            return null;


        //try to find one with a thumbnail
        foreach (var subFolder in folders)
        {
            var thumb = await subFolder.GetThumbnailAsync(mode, thumbWidth, options);
            if (thumb != null)
                return thumb;
        }


        //if we reached this point, none of the sub-folders had a thumbnail, so call this method
        //recursively for each one until you find one
        foreach (var subFolder in folders)
        {
            var thumb = await subFolder.GetThumbnailRecursiveAsync(mode, thumbWidth, options, false);
            if (thumb != null)
                return thumb;
        }


        return null;
    }
}

Conclusion

WinRT shows a lot of promise, and seems to get a lot of things right.  It is still new though, and has quite a few holes compared to Win32 (as does the XAML side compared to WPF).  In the mean time though, many of the things are easy to implement yourself, and plenty of other people are doing so already.
An excellent example that everyone should check out is the WinRT XAML Toolkit.

Let me know if you have found any others.