Tag Archives: design

Getting Started with the Windows 8 Consumer Preview

There are plenty of posts around on how to actually install the Windows 8 consumer Preview, so I’m not going to both covering that right now, but there were a couple of really useful resources that I wanted to highlight.

First up is some great design resources for designing the user experience for Metro style apps: http://design.windows.com. This includes:

  • Guidance on how to implement common design patterns in Metro style apps for navigation, commanding and touch interaction.
  • PhotoShop design assets for common controls and layouts.
  • Detailed UX guidelines.
  • Guidance for assessing usability.

The other resource is a collection of approximately 200 sample applications in C#, VB.NET, C++, and JavaScript covering pretty much every topic for the new SDK for Windows 8 Metro-style application development: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples.

Go forth and enjoy!

DESIGN: “Ephelis” – A Client App for Freckle

PrimaryTileFreckle is an awesome service that takes the friction out of tracking your time and is great for freelancers, consultants and small teams. At Pixel Lab we use it for our timesheet system and it works great for permanent employees and per-project contractors.

As a long time Windows Phone user, the first thing I wanted was an app to use with this service, but there isn’t one. There’s a third-party app for iOS and I believe they’re working on an official client, but there’s nothing for Windows Phone. So, as a Windows Phone developer, I set myself the challenge of creating one.

Key Requirements

Freckle.PopupFor me, the most important thing about this app is tracking time spent against projects. This might sound obvious, but it’s easy to over-implement in apps and I think that’s a mistake. Freckle provides charts, reports, administration and a host of other features besides actually entering the time you spend against a project. This helps make Freckle as awesome as it is, but they do it really well on their website and I see no need to replicate that (at least in v1). They have a web-based timer pop-up that does exactly that, it focuses solely on tracking time and this was my inspiration; I wanted my app to be at least as simple and easy to use as this pop-up. So, while I could easily have set about designing a panorama-based home page with charts, reports, and widgets all over the place, I went down a simpler, single page path.

Three Screens and Some Icons

The application consists of three main screens: Sign In, Time tracking, and Time Entry, plus a fourth for providing access to Settings. There’s also the ever important tile and pinned variations.

Single Image

Take a look at the above picture at full size to see the design for each screen. You can find the same image over on Forrst.

Sign In

The Sign In screen is the user’s first introduction to the application (after the tile, which I’ll come to) because there is no splash screen. This is a conscious decision for two reasons:

  1. The application can start quicker without it and speed is of the essence.
  2. It can contradict the design when being theme-friendly.

If you’re application loads quickly enough, then you don’t need to present a splash screen, and in fact, it will load quicker if you don’t. In order to help the user focus on the key task, the faster the application launches, the better.

I decided from the outset that I wanted the application to be theme-friendly. I don’t just mean that I wanted to use the user’s accent colour, I mean that I wanted it to heed the user’s choice of light or dark theme, too. I believe that this gives the user a greater sense of ownership of the application and will ultimately help them work better and faster. Because the splash screen is a fixed JPEG file, it is impossible to incorporate the theme and accent colours into it, so to have used a splash screen would have immediately contradicted the rest of the application design (apart from the rare chance when the colours I choose match the user’s choices).

So, the Sign In screen introduces the user to the application’s branding: we see the application logo (repeated from the tile) and the accent-coloured background texture, which takes it’s inspiration from the official Freckle logo. Both the logo and the logo are bold enough to be seen, but not so bold that they get in the way of the task at hand.

The Sign In screen also clearly provides the user with a way to create an account if they don’t already have one.

One final noteworthy point in the design at this stage is that I’ve included the System Tray. Users repeatedly complain or are confused about the disappearance of the System Tray when using various apps. When you’re using a battery hungry smartphone and on the move then signal strength, WiFi status, and battery level are always important, whichever app you’re using, so I also made a conscious decision to ensure that the application design worked with the System Tray available at all times.

Time Tracking

On this (and all other screens) the logo and background texture are less prominent. The user has been introduced to the branding, but now we need to ensure that nothing else detracts from the primary function of each screen, so the opacity is reduced.

This screen is about two things:

  1. Enabling the user to start/stop projects quickly and easily.
  2. Showing how long the current project has been active.

So, the time on the current project is shown clearly at the top of the screen, and the projects are listed below. The current project is always moved to the top of the list and there is sufficient spacing around all touch elements to prevent mis-hits.

The common play/pause symbols are used for starting and stopping activity on a project, and the “tick” symbol shows when a project has an activity that can be submitted.

Freckle automatically assigns a colour to each project that you create (though this can be edited), and so this is shown as an underline to each project for faster project identification for user’s that make use of this feature.

The context menu for each project enables the user to pin that project to the Start screen to make it even easier for the user to work with common projects.

Time Entry

When submitting a time entry for a project, the user is presented with the relevant information already filled out, though the time can be edited. Freckle uses a per-project time rounding system, which is honoured at this stage, too.

Instead of managing tasks as separate entities, Freckle uses an account-wide tagging system. Ephelis presents the users with a list of the tags that have already been used on this project in a checkbox-based layout that is easy to interact with by simply tapping the relevant tags. Selected tags are shown in the user’s accent colour, making it easier to see which tags have been selected. The user can also type directly into the textbox, which uses auto-complete on all tags.

Start Screen and Tiles

As the designer of an application, we should never underestimate the importance of the application’s tile. In the Marketplace this is the first thing the user will see for your application; it is what separate’s it from similar applications in the app list and is prominent on the Start screen when pinned.

Sticking with the ownership theme mentioned before, I opted for an accent friendly icon using the same shapes as the logo within the application. The main tile includes the application name in the custom font to help identify it. For projects that can be pinned to the Start screen the application’s name will not be shown at the bottom of the tile, so I thought it was important to include the name somewhere and this served the purpose well.

For pinned projects, the colour matches the project’s custom colour (auto-assigned by Freckle) and shows the full project name on the front and back of the tile. The front of the tile also includes either a play or pause icon depending on whether the project is active.

Award Winning

OK, “award winning” might be a bit of a stretch (but journalists use over-sensationalised headlines all the time, so why can’t I?), but the design for Ephelis was recently announced as a Finalist in the Core77 Fast Track to the Mobile App design challenge. I’m hoping to become a “Notable Finalist” by getting the app developed and into the Marketplace as soon as possible.

Future Features

Thanks to some great feedback fro the guys at Freckle, I’ve already extended the design to include the ability to set the date when submitting a time entry, which enables the user to add historic time entries.

The application will also include features such as configurable alerts/reminders for projects that are left running, location-based automatic start/stop of activities, caching of entries when offline, and (eventually) a standalone version that does not require (but can synchronise with) Freckle.

Development has already started on the application, so I’ll be looking for beta testers some time soon; let me know if you’d be interested. I’ll keep you posted on progress.

Introduction to Windows Phone 7

Windows PhoneWindows Phone 7 is the new smartphone operating system from Microsoft. Instead of continuing the development of the Windows Mobile series (currently at 6.5), which has struggled to compete with both the iPhone and Android devices, Microsoft decided to “reboot” their smartphone operating system taking a fresh new look.

Hardware

In a break from previous smartphone efforts Microsoft decided to have complete control over the hardware specification allowing manufacturers and carriers to modify only the applications and hubs that are provided on device. They also get closer access to the hardware enabling applications such as LG’s Look n Type messaging application that shows the live camera feed and ScanSearch that provides augmented reality search facilities with the camera.

The minimum hardware specific for Windows Phone 7 devices is:

  • Windows Phone 7 HardwareWVGA 480×800 or HVGA 320×480 screen[1].
  • Capacitive touch screen with at least 4 contact points.
  • GPU acceleration with DirectX 9 support and video acceleration.
  • ARMv7 Cortext/Scorpion or better CPU.
  • At least 256MB RAM, 8GB Flash or more.
  • A-GPS and accelerometer sensors.
  • 5 mega pixel camera or better, with LED flash and dedicated shutter button.
  • Dedicated hardware buttons for Back, Start, and Search.

The WP7 Device Hub at WMPoweruser.com lists all the confirmed and rumoured Windows Phone 7 devices with specifications.

[1] At launch (and at the time of writing) only WVGA devices are available.

The Metro Design Language

The Windows Phone design team took inspiration from sources included Swiss-influenced print and packaging, transportation signage, and the Zune client software to create a design language called Metro to be used as the guiding principles for designing and developing Windows Phone 7 applications.

Metro Design Language

Metro Design Principles

  • Typography: Use the right balance of font weight and positioning to create a visual hierarchy and help lead the eye to more content.
  • Motion: Use consistent motion and animation to bring the interface to life.
  • Content not Chrome: Remove all chrome to bring content to the forefront.
  • Honesty: Design explicitly for the form factor taking into account the high resolution screen and touch-based interaction.

If you want to learn more about the Metro design language, you should check out the Metro Design Language for Windows Phone 7 tutorial on the Microsoft design .toolbox and From Transportation to Pixels by the Windows Phone Design Team.