I’ve spent much of the last year thinking about how to improve the user experience of a product I have been working on (more on that in future post).
One of the most important things to consider when crafting a user experience is the context in which the user interacts with the product.
A prime example of why context is so important when designing a product is the electric hob built-in to the counter top of the kitchen in my flat. One of the choices that the manufacturer would have had to make was what form the buttons would take — unfortunately they didn’t take the context in which the hob is used into account and therefore made the wrong choice.
On first look the hob is quite stylish — but let’s be honest, its a hob — and features touch buttons for the power button and heat selection. Whilst the touch buttons are quite attractive, and easy to clean, they fail to register touches most of the time. Not ideal when they manage the heat being applied to boiling pots of water. But why is this?
Touch buttons fall into two broad categories, capacitive and resistive. Resistive touch buttons use the pressure of your finger to register a touch whilst capacitive touch buttons measure the electric field generated by your finger.
The hob manufacturer opted to use capacitive touch buttons for the hob. What they failed to take into account was that capacitive touch buttons register for any conducive material including one which is often found in kitchens — water. This means that the situation in which you want to affect the heat quickest, e.g. when the pot overboils, you cannot! Sometimes you continue to be unable to use the button even after it appears to be dry, it is incredibly sensitive to water.
This means that whilst the product looks fit for purpose and likely works well in a situation in which there are no spillages (for example in the manufacturers R&D facility, or the shop in which it is demonstrated to customers) in real life it causes a lot of unnecessary problems and is a regression from hobs that had physical buttons.
I hope this blog post comes to mind when you are next making decisions around the user experience of a product you are working on and you remember to imagine not just the user using your product, but the context in which they do it and what they are trying to achieve whilst using your product.
A few weeks ago a link was posted on the Microsoft UK Student Developer Group detailing a Windows Phone 7 – Windows 8 weekend in London. Originally the location wasn’t released, presumably whilst Microsoft worked out how many people would come and how much room they needed, but eventually we were told it would be at the Commonwealth Club at Embankment in London. This is the nice building you can see in the above photo! The event itself was this weekend just passed, I couldn’t make the Sunday but thoroughly enjoyed Saturdays festivities.
It was a snazzy place, and a great place to stay for the day, but I’ll talk more about that later. The idea of the weekend was to show people how to port their application from Windows Phone 7 to Windows 8. It also showed off some of the new API’s, Runtimes and paradigms that make Windows 8 apps an improvement over those of the phone — though I’m sure there will be API and feature parity in Windows Phone 8.
When I got to the commonwealth club I was shown to the basement floor which had been taken over by Microsoft (the only company who would schedule a Phone related event in a basement with no phone signal ;))
One room was the “Work Zone” where developers could actively work on porting their applications from Windows Phone 7 – Windows 8 with the help of the Microsoft Evangelists.
The “Work Zone” — Posh
Another was the “Game Zone” where people could play Star Wars Kinect competitions to win prizes such as DAB radios. The final area was the “Talk Zone”, in which mini lectures were held with topics that had been voted in by the people at the event.
The C# 5 / .NET 4.5 / WinRT Asynchronous Framework
The most popularly requested talk, and therefore the one we got to see first was a talk on C#, .NET 4.5 and WinRT’s new asynchronous framework. Whereas at the moment to send a WebClient to fetch some data and then display it you’d have to do some code like the following:
//Actual simplified (i.e. no error reporting etc) code from the Hull CS Blogs app for Windows Phone 7
//Set up downloader somewhere
WebClient contributorsXMLDownloader = new WebClient();
contributorsXMLDownloader.UseDefaultCredentials = true;
contributorsXMLDownloader.DownloadStringAsync(new Uri("http://www.dantonybrown.com/hullcompsciblogs/contributors.xml", UriKind.Absolute));
contributorsXMLDownloader.DownloadStringCompleted += contributorsXMLDownloadComplete;
//In another totally seperate place
public void contributorsXMLDownloadComplete(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
XDocument xdoc = new XDocument();
xdoc = XDocument.Parse(e.Result, LoadOptions.None);
contributorsList.LoadFromXML(xdoc, FileOrigin.internet);
contributorsListBox.ItemsSource = contributorsList;
}
}
As you can see, we set it up and then at a later time the method we specified in the event handler earlier is called once the download is complete. If you have loads of these async calls, or worst yet async calls within async calls it all gets very confusing, very very quickly.
In C# 5 two new keywords have been implemented to ease this situation. Async, which as you can guess marks a method call as being one that is executed asynchronously and await which says “don’t execute code under me until this async method is complete”.
For example we can convert our above code to a HTTPWebRequest using the new keywords. Look how simple it is!
public async void DownloadContributors()
{
HttpClient http = new System.Net.Http.HttpClient();
//Notice how we're awaiting this response right here rather than going to an event handler
HttpResponseMessage response = await http.GetAsync("http://www.dantonybrown.com/hullcompsciblogs/contributors.xml");
//We'll only get here once the response has completed!
string result = await response.Content.ReadAsStringAsync();
//Business Logic that would normally be in the event handler
XDocument xdoc = new XDocument();
xdoc = XDocument.Parse(result, LoadOptions.None);
contributorsList.LoadFromXML(xdoc, FileOrigin.internet);
contributorsListBox.ItemsSource = contributorsList;
}
It’s nice because everything is where it should logically be. Together. Anyway, theres a hell of a lot more to talk about that I can fit in this already packed blopost, for example any method which calls another method which is marked as async has to be async itself, but you can find out all this at Channel 9.
The Windows 8 User Experience (UX)
Metro is all about making an experience for the user, from Live Tiles which mean you don’t have to even enter an application to get its content to the exact alignment and size of text of titles, sub-titles and paragraphs in apps. Andrew Spooner delivered a great talk on how to achieve the best user experience for users when porting your application from Windows Phone to Windows 8.
Although a lot of things can be directly ported in some ways — a panorama application on Windows Phone can be a panorama application on Windows 8 — some things can’t. Windows 8 has no concept of a Pivot page for example.
A Pivot Screen – There’s no similar control in Windows 8
Because pivot screens are often used to filter content, in my example the blog pivot shows only blog posts whilst the twitter pivot shows only tweets, there are a few ways to get round the limitation. You could use an application bar, a context menu or change the overall layout of the page.
Andrew also explained about the different modes a page can be in. Landscape, Portrait or pinned to the side, and how to deal with each. You can find out more about redesigning your Windows Phone 7 application to Windows 8 or designing a new application from scratch here.
The idea behind a contract is that it is a way for an app to communicate with other applications in a standard way, even ones it doesn’t know about. For example a share contract says “I have these images that can be shared”. Any application that can accept images then says “I can accept these images and do something with them”. Notice how the sharing application doesn’t say what it wants done with the images and the receiving application doesn’t tell what it can do — this is on purpose to allow more interesting experiences.
If the user selects that your application it receives the images and can do anything with them, for example allow the user the edit them or share them straight to a social network. 🙂 Its all really cool stuff and allows experiences that no one would previous think of, the example given was a cooking application that shares pictures of food. An application that accepts pictures could then make it into an interactive Jigsaw. Why anyone would want to do this is unknown… by everyone. But you can see it allows us to do things we wouldn’t previously have thought of. I mean who, when writing a cooking application writes in a MakeJigsaw() method? No one 😛 But Windows 8 will allow this important functionality! 😉
Search isn’t the only type of contract. Previously to this event I hadn’t seen the Settings Contract but it looks quite cool. It allows your app to store its settings in a uniform way within the right hand pane which comes up when the settings charm is pressed. Some of this might not make sense now, but it will when you use Windows 8. Its nice because it allows applications to have application specific settings in the same place as universal ones such as “Allow this app access to location data” 🙂
Background Tasks on Windows 8
Background tasks on Windows 8 are very similar to background tasks on Windows Phone 7… apparently. I’ve never used them, but it’ll be a nice easy port for those people who have. There are all the sort of optimized background tasks you expect:
Media player (Audio AND Video, whereas on Windows Phone 7 it can only do audio)
VoIP
Background downloading
Update Tile and Notification
There’s also a generic background task which is unoptimized but allows you to do whatever you want. We were advised that this was a last resort and if we could use one of the more optimized background tasks to do whatever we wanted to achieve we should. Background tasks can be activated in several ways:
By a timer
When a certain condition is met (e.g. WiFi connection state changed)
By custom rules (e.g. Connection State changed && connection state is online)
In a background task you can write any code you want and are totally unlimited. The only thing to be aware of is that normal applications only get 1 second of background task CPU time ever 2 hours in order to retain battery life.
New in Windows 8 are notifications on the lock screen. 1 application, chosen by the user, can display its notifcations on the lock screen. Much like the calendar application does on Windows Phone 7. This chosen application is special because it gets 2 seconds of CPU time every 15 minutes.
Posh Food
One of the interesting but non-CS parts of the day was the dinner. It was kind of weird, but cute. Lots of small versions of popular dishes such as burgers, there are some pictures below.
The best kind of beer is free beer!
We had a good choice of drinks too!
The worlds smallest burger!
Burger compared to a small tea candle
Getting on the Windows 8 Marketplace for Day One of General Availability
One of the opportunities of the event was to discuss getting a “store token” which allows your application to be on the store the day Microsoft releases Windows 8, days — possibly weeks before your competitors. I spoke to Paul Lo about this and should find out if I’ve successfully received a token soon!
Getting help with Hull CS Blogs for Windows 8
The best and most helpful part of the day for me was having a 40 odd minute chat with Andrew Spooner about porting my applications design to Windows 8. We used a programming statement and some use cases to think about the experiance — this was a methodology I haven’t used before and I found it incredibly useful, I shall be using it from now on!
A programming statement is a paragraph or two explaining what your application or program is all about, for example my one was
The Hull CS Blogs application aims to deliver the content of all the bloggers at the University of Hull Computer Science department to users in an attractive way whilst allowing people to discover more about each contributor, via the use of twitter streams and a list of applications they have worked on. The application will also deliver a regularly updated list of featured applications developed by people within the universities computer science department.
Having this statement allows you to have something to refer back to when you’re thinking about features, for example. “I’m writing an application which allows people to discover about the contributors through the use of twitter, do I need to have a reteweet feature?” Well, the use of twitter in the application is to discover things, not necessarily interact with content, so this should be left out til a later release where there aren’t other more important features to be developed. (By the way, this idea was actually one discussed about the Hull CS Blogs application)
A set of use cases are the “stories” of how you envisage people using your application. For example one of mine was
Russell has missed a guest lecture at university, he wants to read up about it and knows that his fellow computer scientists will most likely have blogged and tweeted about it. He opens the Hull CS blogs app and views the latest blogs and reads a couple. He then looks at the latest tweets for more minute by minute information, and then drills down into James’ contributor page because he cares about james’ opinion and wants to see more about what he has to say about the event both via twitter and his latest blog posts.
Reading this makes you realise what features are crucial to your app. So in this situation you would need.
Latest blog list
Feed of all tweets by all users
A page for each user
Without this user case I wouldn’t have thought about implementing an overall twitter feed in the main panorama rather than just a per user feed in each contributors page.
Anyway in the end we went from these initial designs, which are essentially a direct port of the Windows Phone app:
Main Panorama Initial Idea – Hull CS Blogs for Windows 8
Contributor Page Initial Idea – Hull CS Blogs Windows 8
To this overall view of the application in a hierarchical order:
Andrew Spooners improvements On My Initial Ideas – Entire App – Hull CS Blogs
I will be using this design for the actual version of the Hull CS Blogs app for Windows 8, so check back here to hear more about that.
I apologise for the length of this post but it really was such a packed day! I hope this blog has made you look forward to developing for Windows 8 and porting your existing WP7 applications, because I certainly am! I’d like to thank Microsoft for treating me so well as they always do, with lots of support, free drinks and some amazing free food. Truely an experience worth remembering!
dannybrown.blog 