Sleeper for Windows Phone 7

Image

The other night I was lying in bed with a million things racing through my head, mostly, all the things I had to do the next day, and couldn’t sleep at all. I tried to take my mind off them and just get some rest but I always seem to slowly start thinking about things again.

There has to be an app for that right? Something to take your mind off things. 

Well I got out of bed and jumped in front of Blend for an hour or 2 and came up with sleeper. It’s a very simple app, just something to keep your mind off all the other stuff and relax and doze off to sleep.

Most of the time was spent designing up the little sheep, banging it together in Blend was actually probably the quickest part. 

Barely any code, a bunch of animations and vector graphics and and a handful of behaviours and I had my little sheep counting app up and running in no time. 

Image

It’s in the windows phone marketplace now if you’re interested. 

http://www.windowsphone.com/en-GB/apps/b79c0db9-bcc9-4662-8d38-adc94b99ced4

Thanks

Alex

10 quick notes to design polished Metro Apps

I went to a UX workshop recently for Windows 8 and thought it would be cool to share my notes and take-aways from the event.

Besides a few tips and concepts, I have also added a few things I think are important to keep in mind when designing your application so you don’t run into and road blocks down the track.

And just remember, these are just some quick notes and things to keep in mind and I may have doubled up on a few items in other posts, sorry about that

1. Skeuomorphism is out.

I have written about this before so I won’t dwell, but your application is running on a screen, its digital, its pixels on a surface. Let’s leverage it and see it for what it really is. We are moving past the need to make users comfortable by making UI’s look realistic and familiar. We are well into the digital age now.

Examples of Skeuomorphic design

2. Type Ramp

There is a suggested type ramp for your Metro Apps and follow it will provide a consistent flow for all the type in your app.

These are the sizes I use, and I think they are pretty close to Microsoft’s recommendation. This is just a guide though, use your best judgement.

Check out this type ramp post for more info 

3. Fonts

Segoe is Metro. This font family has been designed for use in metro applications. It’s clear, clean and doesn’t muck around.

It’s suggested the only time you move away from this font family is to meet branding guidelines. There are some concessions around these though, for example, if you make a eBook/Reading application, you can use a Cambria or Calibri. Calibri is also suggested to be used when creating a writting app.

4. Grids

Designing your app on a grid is one of the most important parts of making a really polished Metro app. Make sure all your elements line up to the pixel.

A good trick is to set up a custom grid in photoshop when designing your app. You can do this by going to View > Show > Grid to turn on the grid, and then change its measurments by going to Edit > Preferences > Guides, Grids & Slices.

Set your Grid settings to:

Grideline Every: 20 Pixels
Subdivisions: 4

This will make make nice 20 pixel boxes with 5px sub divisions to work with.

5. Designing for touch 

Windows 8 and Windows Phone are very focused on touch as being a main point of interaction. There are a few things to keep in mind to support this.

7mm is the perfect size for touch targets

Uncritical items can be smaller.

Make sure padding between items is no less than 10px.

Visual feedback for items is really important for touch because you lose the haptic feedback you get from a physical keyboard. Use animations to show that buttons have been pressed and items have been interacted with.

6. Panoramas

Panoramas are a long list of items, intended to show off your app. Make sure they contain a few feature items that people might be interested in and then allow the user to dig deeper into the app to find/refine the content.

7. Semantic Zoom

When creating semantic view for your app, remember it’s an overview for users to quickly jump from section to section in your panoramas and lists.

The user should only be able to select groups of content in the list and not specific items.

Semantic view can look very different to your standard list so use this to your advantage, for example, instead of showing all the content items, just show a heading and how many items are under that section.

8. Tiles

Creating meaningful tiles one of the most important elements of your app. It’s the front door and if used well, will encourage users to return to you app.

Make sure the content pushed to your tile is useful, relative and always fresh. Not only will it keep people interested in your app, but will make them want your tile front and centre on their start screen.

Also consider the ability to pin more than one tile for your app. If you have different sections that you feel people might want to deeplink into, allow them to pin those items to their start screen as well.

9. Animations

I mentioned before the importance of using animation to show feedback, but Metro considers animation as a first class citizen to be used in every part of your app.

Use it to make your content feel alive. The way items flick into place and fly out. Use animation to create a mental model to help users know where they are in the app. By making the content fly off to the left, it makes users feel like the next page is just right of the last content. It’s arbitrary, seeing as the content is not actually there at all, but can really help users understand the app and navigate easier.

Direct manipulation has become a very important part of touch applications as well these days. Real time gestures are powerful and allow the user to feel in control. Use them to your advantage.

10. Screen size

Windows 8 supports a huge array of screen resolutions. Design your app to accommodate and use the screen wisely. Make sure you content adapts and fills the available real estate.

Windows 8 also supports different pixel densities or DPI. It has been limited to 3, so if you have art work, make sure you create it at 100% 140% and 180% to avoid pixelation on denser screens. Windows will handle the images and change them when needed.  It will also make sure your fonts and vector graphics are scaled accordingly so everything looks nice.

For a whole lot more info on screen capabilities in win8 check out this post 

Some other things to check out

Here are a few links that have some great info about creating apps for Metro.

Great post from Arturo Toledo on Metro 

Helpful content from Microsoft

Interesting case study about redesigning an iPad app for Metro 

Conclusion

Well that’s about it for the moment. Hope this has helped out a bit  and you are on your way to creating some awesome apps.

Thanks

Alex

The Digital Surface – Windows 8

Image

With the launch of Windows 8 preview and working on Windows Phone 7 and Xbox, I have been spending a good part of my days working with Metro (Microsoft’s design language). I recently did a presentation at a local Melbourne user group about the subject and one part of the talk that seemed to gel with lots of people was the idea that we are designing UI for a digital surface. The idea that it’s pixels on the screen and nothing more, so why aren’t we playing to it’s abilities.

Image
 Digital Authentic.

Image

I have been watching lots of future UI videos lately and after a while you start to see patterns, these videos are not focusing on highly graphical UI but relying on the interactions, content and the technology behind it to make them look amazing. 

As soon as we start realising that you don’t need to make the graphics in an app represent real world objects, we can really start to focus on making experiences that are completely inline with the way users are interacting with them. On a screen. Whether its touch, mouse/keyboard, voice, or full body gestures, we should be playing to the abilities of the device, instead of taking what we know from the real world, and trying to make it work on a digital platform. 

Image
 Examples are Rock’n’Roll!

I feel one strong example of real world objects not working so well in applications are knobs. For some reason (especially music applications) designers insist on using the metaphor. Image

This is a bit of a pet hate, controls like this work fantastic in the real world, they are compact and allow accurate control. But the idea just doesn’t translate as well on a screen. Even when a user can directly interact with the control through touch, what is the standard? Applications use up and down, left or right and even a circular motion to change the value. It always a bit of a guessing game and if you are using 10 different apps with knobs that are all different, it can get pretty frustrating. 

Sticking with the metaphor, I designed up a quick concept of how to utilise direct manipulation and the digital platform to create a better experience.

Image

This does a couple of things well, whilst retaining the fine control element of a real world knob, it also helps avoid screen occlusion by the hand a bit. Its not perfect, but its a start.

Image
 Moving past Skeuomorphism.

Metro design language moves past the need to complex graphics and gradients to achieve it’s goal, which is to complete tasks and deliver content to users in most cases. It takes a step back and focuses on what is the most important part of an application, the content

This isn’t without its own set of problems though, the first being the lack of affordance, how do users know what they can press and interact with, when a button doesn’t always look like a button? 

Image
 We can’t afford a bad experience.

Through the use of animation and direct manipulation we are able to make experiences that feels alive and interactive. Allowing the user to feel connected to the content and in complete control will urge users to explore your application with confidence, and with that in mind, consistency becomes very important. 

Making sure your user feels at home with your application is an easy task to achieve with Metro if you spend the time to understand the platform and guidelines. Making your content interactive and using common controls can go along way when you are not relying on graphical affordance within your app.

Another way Metro combats this, is by placing all action controls in a common place. The use of app bars and charms gives users a big head start when they are seeing an app for the first time. If an app follows the guidelines, users can be pretty sure that all the content is interactive (able to click through items to drill into more content ect.) and any actions that may be needed can be found in the same location as all the other apps they use day to day.

Image
 Summary

Metro is the base design language for Windows 8 and Windows Phone 7, so anyone who uses one of these devices should have a good feeling for it already and through consistency, should feel comfortable to jump right into your app and get things done.

 

What do you guys think?

Thanks for reading. 

Alex

Windows 8 Car Stereo Concept

The Background

Between being completely flat out with running Xamling and being lucky enough to have a little time to do a bit of travel, there has been one personal project I have continued to chip away at over the last few months.

In one of my earlier posts I spoke about how annoyed I was when I bought my new car and decided to spend a bit of money on getting a good stereo installed. Turns out it was not very good at all. Besides a few of the features not working as advertised, my biggest issue was the interface. It’s a touch screen device and as far as I can tell, it just has buttons littered all over it like someone has thrown darts at a design to decide where they should go.

Being an interface designer, this probably annoys me a lot more than your common consumer, but I just can’t understand why they can’t add a nice capacitive screen with some tasty gestures to make the driving/music experience better. I would be happy to fork out a few more bucks, although I shouldn’t have to, seeing as I already paid over $1000 for something that is not even a quarter as good as an ipad.

I have also noticed a bit of movement in this area lately, with Ford teaming up with intel and Project Detriot by westcoast customs going to town with adding win8 stuff in cars, which are awesome, but I feel it’s kinda missing the point a bit. I want a head unit I can buy off the shelf, plug into my car and have a great experience when driving and listening to music. Those systems seem to be focusing more on features rather than a simple and easy way to listen to music.

Anyway, I set off on designing an interface for a car stereo and hope to one day get something similar running in my car.

Seeing as I am an designer that works a lot with windows 8 and wp7 that seemed like the obvious path to take, so the design is based on the idea that it would use win8 (probably embedded) to power it.

The Designs

This is the basic home screen, you will notice just one button, pause. and it’s a decent size so it’s simple to hit. Just about everything in the interface is controlled via gestures.


Next/ Previous track: 2 fingers left/right


FastFoward/Rewind: 2 Fingers Left/Right (hold until position)

Users can also use the scrubber for quicker skipping (not for when driving)


Search/SubMenu: Pinch (the UI would shrink to sub menu)


Volume: 2 fingers up or down (this would slowly raise or lower volume)

Volume can also be controlled by the slider at the right (this also shows user current volume)


Attenuate: Tap anywhere that isn’t a button or action (this lowers the volume to very quiet quickly, and also returns to current volume when tapped again)

There are a couple of other actions you can perform on the screen that help the user find music with more ease.

The user can click the name of the artist or the album to be taken directly to that list. I can’t tell you how many times I have thought, “oh I love this band, I wanna listen to their whole album”, and then not bothered because it’s a bit of a PITA.

The weather would use GPS location to keep you updated, but it could also cycle through current location and destination.

Searching

This screen is accessed by pinching on the main screen. From here you have search as your main screen, but can access other data sources from the tiles across the top. At the moment, these designs only really cater for HDD music, but it wouldn’t be to hard to get videos and other media items in there as well.


Users can scroll left/right to flick through the albums, or quickly search via the letters across the bottom if they know what they are after.


2 fingers down gesture will take the user to the parent menu, in this case it would be artists.

I haven’t got as far as design how the other sources would work at this stage but it’s something I will look into soon.

Other Features

I have been toying around with is using wifi to sync with your PC inside the house. Allowing the user to update their music from their computer without needing to interact with the car. This could be achieved through having the car stereo staying on for a short time when it’s connected to the wifi and simply syncs up.

Also providing other means to update your music if your car park isn’t close enough

Another concept is a phone app companion. This would allow you to set up your trip before you have even left the house.

Input GPS info

Set up a playlist

and the app could also act as a remote for passengers in the back seat (via bluetooth)

Conclusion

I guess that’s about all I have at the moment. My main goal here is to try and make an interface that is relatively easy and safe to use whiles driving. Most of the actions can be performed without even needing to look at the screen.

The best part is, it’s all very achievable with today’s technology, all it needs is a small form factor tablet, windows 8 and a bit of time up your sleeve.

Let me know what you guys think about it, I would love to take it further and maybe even get a prototype up and running at some stage, just have to find the time for it.

Thanks

Alex

Windows 8 black screen issue

So Windows 8 Developer preview was released the other day and I decided to give it a whirl on my HP TouchSmart TM2 laptop. I had a few problems installing it at first, but realised that it was a dodgy USB boot stick.

Once I got it up and running and started playing around, I had just about enough time to set up my accounts and a few other bits and pieces and BAM! Black screen…. Rebooted it, it started up ok but then a few seconds later it went black again, and the next time I booted, nothing at all, just black.

Was kind of annoying.

So anyway, I was guessing it was the drivers, so I tried installing some different drivers and thing, which nothing worked, mostly because it just wouldn’t install on win8. To cut a long story short, it was the Windows Update trying to install a driver for my ATI Radeon HD card. Apparently it’s not quite there yet or something. So i just turned off Windows updates for the time being and everything seems ok… At least now I can play around with it for a bit.

To turn off the Windows update, goto Desktop, right click and select personalise, and then in the search bar at the top, type update, the second item in the list should be turn windows update on or off.

It’s not the best answer but at least I can play around some more!

Hope this helps…

Metro: Everything is starting to look the same

I have been working on a few different projects lately, some for phones, tablets, web and other cools things. It’s rad because it allows me to think back on each project and draw inspiration from them. I also tend to do a bit of research and draw inspiration from what other people are doing, and I have started to notice a problem especially around Metro and Windows Phone 7.

Everything is starting to look the same!

Metro is a the style coined by Microsoft for the phone’s platform and also seems to be filtering through to Windows 8 (what we have seen so far). There is an awesome style guide available to everyone so people can get a good feel for what Metro is and how to design an app that fits in with the style.

The problem is, people are taking it to seriously. App after app is hitting the marketplace with no personality. Sure they look pretty good, but when you start to realise there is no variation from application to application, everything starts to blur together. There is nothing special for users to remember your application, besides functionality of course.

Applications need personality to be memorable and make it exciting for the user to use and want to come back again. I mean, I would choose a twitter application simply on looks, most of them do similar stuff, some have an extra feature or 2, but in the end, what I remember is the look and feel. If it looks a little better or swishes around a bit nicer, then it’s a winner for me.

Most app are no different, it needs that edge over the competition, that special User Experience that people really enjoy and that memorable element in the design that people never forget. These are the applications people come back to, and tell their friends about.

Companies do this with their logos and marketing, they create an iconic piece of media that hopefully you will never forget, and when ever you see it you know exactly what it is and what it stands for and they spend insane amounts of money to achieve it.  There is a massive advantage if everyone knows your name.

I think Metro is great, I love the ideas behind it and a well made Metro application can look and feel incredible. I just hope we don’t get lost in a sea of applications that all look the same.
What do you guys think about Metro?

MVP Award

On July 1st, I was awarded an MVP award for Silverlight for the second year in a row. I know I’m a bit late with it, but I just wanted to say thanks to everyone at Microsoft for the award and the program itself, and to all the people who read my blogs, because if people didn’t read this stuff, I wouldn’t bother writing it! :D…

Cheers

Follow

Get every new post delivered to your Inbox.