Scaling up

Part 5

Awkward full-width list items are a common problem when layouts designed for phones screens are scaled up to tablet sizes. Multi-pane layouts and margins are a couple of simple solutions.

I even took a shortcut on the new multi-pane level selection. It’s just a separate PageIndicator implementation for wide screen layouts. On phones you get tabs. On landscape tablets you get a list.

twopane

Other screens have been modified with margins when they extend beyond 620dp in width.

margins

These tablet optimisations tie in nicely with the Google Play Games cloud save integration. Users can now split their game activity between multiple devices, with a UI optimised for each, and without ever losing their game progress.

Beta

The 1.3 release is almost ready, so this post concludes the series. Head over to the beta community to try it out!

Designing consciously

Part 4

It would be fair to call the old scoreboard screen “engineer design”. All the right information was there, but it didn’t provide much value. It hadn’t been designed from the user perspective. It was text heavy. It was awkwardly balanced. It displayed empty cards for levels that had never been played.

scoreboard_before

The card paradigm makes sense here, but the content needed to be rethought. The screen also lacked an overview of progress. I sketched out some new card ideas to answer questions like: How many games have I played? What level were they? What’s my best time?

redesign

A new summary card provides a helicopter view of progress in the game, with the total number of completed puzzles. The graph animates as you land on the screen, visualising the level distribution of those puzzles.

scoreboard_after

This screen is now home to the Google Play Games features too, making it the single location for progress and competition.

The score cards themselves mirror the summary card, displaying the total completed games for each level. The stats are close to their descriptions, making it easy to extract the best and average times at a glance.

The illusion of integration

Part 3

The padlock icon on this in-app purchase list item was intended to reflect the puzzle pack state, but it often caused confusion. Sometimes a purchase would fail and the user would ask: Is the pack locked? Do I need to unlock it to buy it? 

packs_before

The alternative was to mimic the buy button style from Google Play, giving us the illusion of tighter integration. Now the purchase flow feels like it starts with puzzle pack selection, rather than in the subsequent pop-up dialog.

packs_after

The resulting layout is cleaner and more familiar. It removes a source of confusion in the worst possible place. It’s a neat example of a high impact change from just a couple of small layout updates.

Ditching old deserts

Part 2

The next update of Sudoku will be the first to target Android 4.0 and above. This means that 17.5% of the current user base will not get the option to upgrade, but it also means faster iteration in a cleaner codebase.

The analytics data suggests the Android 2.3 users are disproportionally less engaged with the game, producing only about 10% of sessions. The return on investing that extra ~30% (gut feeling) of development time in backwards compatibility was dwindling. Moving to minSdkVersion=”14″ allowed dropping several compatibility dependencies and provides more opportunities to use newer APIs.

total_installs_pie

The experience for the pre-ICS user is not that bad either. They’ll continue to be able to use the current, stable version of the app.  Around 12% of new installs on any given day are Android 2.3. Those users may never get the latest features, but the other 88% will get them a whole lot sooner.

Adding and removing

Part 1

This begins a series of posts following progress towards the next update of my sudoku game. Version 1.3 will bring Google Play Games integration and a series of UX improvements. I’m going to write about the latter here.

Simplicity is at the core of this particular sudoku game. I receive a lot of feature requests, but only pursue ones that align with this goal: simple, beautiful sudoku for Android. The next release features two often-requested enhancements. Completed games can be filtered out from puzzle selection. ‘Solved’ digits are automatically disabled during gameplay.

hide_completed

I also spent time examining the performance of existing features to see what wasn’t being used and what didn’t quite fit. Two features have been cut. Analytics showed that a setting to turn off conflict highlighting was almost never used. The solver screen was also removed. It always felt a bit like clutter, so it will continue as a separate app.

This is first time I’ve really planned a release of the game. A little analysis of the feature set really helped me to focus on the important bits and keep an eye on creep.

One-shot banners

There’s not much more frustrating than a modal “Rate this app!” dialog minutes after installing a new app.

It would be nice to invite users to do that at some appropriate moment, though. Only if they want to. It needs to be easy to ignore. It needs to be easy to make it go away forever.

I’ve been experimenting with what I’ll call the one-shot banner pattern in Sudoku.

A borrowed idea

We ran a private beta when I was working on the Songkick Android app. The most common piece of feedback by far was that existing users wanted to log in straight away and couldn’t find the option. (It typically presents itself when you take an action that requires an account.)

songkick_login

We sketched out a few different options: dialog, notification and banner. The banner won. It sits within the context of the app, it’s immediately visible without being jarring and it’s friendly to users that don’t want to take either action yet.

Current implementation

The version in Sudoku evolved a little. It has more in common with the action bar, sharing a consistent height and action pressed states. It’s also slightly transparent to hint that it’s a transient feature of the UI.

In practical terms, this is just a Fragment added to the bottom of the Activity layout. Completing the action or pressing the dismiss button will remove the Fragment and SharedPreferences are used to maintain the shown state. All quite simple.

banner_plus

The user is invited to +1 the game after 2 completed puzzles. This is just pressing a button so it’s low commitment.

banner_rate

I want to ask the user to rate the game once they’ve played long enough to have formed an opinion. (Hopefully the fact that they’re still playing means they like it.) This action takes the user out of the app to Google Play, which is potentially disruptive, so it’s shown after 5 completed puzzles.

banner_store

After 10 puzzles, the user probably knows what difficulty they like to play. They might even be running low on puzzles of a particular level. This is a good time hint that there are more available.

Click-through rates

Roughly 3.3% of users presented with the rating banner click through. This suggests that it’s serving a purpose. It also makes a strong case against doing something modal. The vast majority of users aren’t interested in rating the app even though they’re highly engaged.

Resources

Stefano Dacchille wrote a great blog post on holding off asking users to rate an app if they’ve experienced a crash recently.

Holo Sudoku

Building a game for fun

Back in November, I was browsing games on a boring 4 hour train journey. There are a lot of sudoku games on Google Play. Some of them have respectable ratings and millions of downloads, but none of them felt right to me. They didn’t feel at home on Android, so I started to sketch out what a sudoku game could look like with the Holo design language.

I didn’t want fancy graphics or complicated customisation options. I wanted something clean, simple, flat, familiar and content-first. This quickly became something I was going to do. The game in my head seemed so obviously missing. I tweeted my fear that I was about to sink a lot of time into something people would never find in such a saturated category. Okay, maybe not quite a stroke of genius, but I was excited.

When the train arrived, I had a project on GitHub and a really clear idea of what I was building. The first version took two months of spare evenings and weekends. I finally had something that I was comfortable releasing and hit the button on Christmas eve.

Getting featured

I was on that same train last Friday when I noticed a bunch of crash reports for the game in my inbox. I’d never had two on the same day before, so I loaded up Google Play to check the featured section. That was a bit optimistic, really, but I knew that the featured apps changed on Fridays. It had happend! The game has been downloaded over half a million times since then.

Featured

I’ve worked on a couple featured apps before, but this felt different. It’s always been as part of an incredible team. This was just me. It wasn’t my job. I did it for fun, in my spare time.

Taking it places

The sudden influx of users has brought a lot of great feedback. I’ve read every email and comment. They’ve been amazingly helpful in planning the next couple of updates. There is definitely more to come.

Download the game and let me know what you think.

WAKE_LOCK or not

One of the most frequent pieces of feedback on Sudoku is that users don’t want the screen to dim when they’re playing. I noticed a few similar apps requiring the WAKE_LOCK permission, but there is a simpler, less dangerous solution.

View has a neat keepScreenOn attribute. Set this attribute in an XML style and the screen will no longer dim when that View is visible. No permission required.

Cleaner screenshots

App screenshots on Google Play often display the system nav bar and have distracting notifications in the status bar. Here are a couple of tricks for making cleaner screenshots – no Photoshop required.

Lose the system nav bar

Create a custom emulator device from the Device Definitions tab in AVD manager. Configure the device with one of the supported screenshot resolutions (such as 720×1280) and change the Buttons toggle to Hardware.

Full health

The emulator status bar will be empty but it displays the battery as discharging by default. Telling the emulator that it has full battery is just a couple of commands (5554 is the default emulator port).

Consistent times

Set the same time between screenshots for maximum consistency. You can even try to reflect the current app version number in the time, if you’re feeling super nerdy: adb shell date -s 20130411.130000

Result

Cleaner screenshot

February hack day

We have regular hack days at The Guardian. (They actually tend to be pairs of days, but we still call them “hack day”.) These are a great opportunity to build something completely different or explore a new idea. However, I decided to use this one to throw together a feature I wish we had on the Android app: home screen widgets!

dashclock-extension

The first feature I built was a latest news extension for DashClock. DashClock has a really neat API, so the whole thing was finished in a couple of hours.

locscreen-widget

I went on to build a resizable picture widget. It works really nicely on the lock screen.