Content on the Stats NZ website - page count

When developing the new website for Stats NZ, one thing was clear from the start, and that was that we needed a better strategy towards content.

How many pages?

How much content we even had was anyone's guess in fact, when I joined the project I was told we had about 200,000 pages. Not believing it could ever be that high I kept asking and got 70,000. Apparently there was no way in the CMS to recover a page count, and GA hadn't been configured to merge doubles with trailing slashes, or extensions.

Communicate the problem simply

In the end I got as accurate picture as I could by exporting a years worth of data, then running it through a small C# script I wrote to merge pages. I then did some further processing on the result and managed to produce a single image which resonated with senior level management, and justified the case to reduce content succinctly.

statsContent2.jpg

Nice fade - lerping everything

A common question I still get asked by Unity users is how to fade or translate something over a specific period of time.

I usually like giving them this coroutine solution for this, as it's callable by any MonoBehavior and easy to understand. You can use this for anything including:

  • Fading between colors 
  • Moving something from one position to another
  • Changing a float or int value over time (something like a light.intensity)
  • Rotating something over time

Here's one that fades a light color from it's current color to red over a time period: 

IEnumerator FadeLightToRed()
{
    Color startColor = light.color;
    Color endColor = Color.red;

    float elapsed = 0f;
    float timeForEffect = 2f;

    while (elapsed < timeForEffect)
    {
        light.color = Color.Lerp(startColor, endColor, elapsed / timeForEffect);
        elapsed += Time.deltaTime;
        yield return null;
    }

    light.color = endColor;
}

How it works

The code is simple, you take a start color from the current light color, you define an end color and then set a time for duration of the effect.

The coroutine then enters a while loop where the elapsed time is incremented every frame until it exceeds the time for effect, at which point it exits and finalizes with exact desired output.

 

Making it more flexible

You can make this much more flexible by moving some of these fields to parameters:

IEnumerator FadeLightColor(Color endColor, float timeForEffect)
{
    Color startColor = light.color;    
    float elapsed = 0f;    

    while (elapsed < timeForEffect)
    {
        light.color = Color.Lerp(startColor, endColor, elapsed / timeForEffect);
        elapsed += Time.deltaTime;
        yield return null;
    }

    light.color = endColor;
}

More control over the fade style

So, the above will always give you a linear fade (Hence the name Lerp, Linear Interpolation) over time, but with the help of Unity's built in animation curves, we can get some very easy interpolation options. First, outside of the coroutine we serialize and AnimationCurve in the monobehavior:

[SerializeField]
AnimationCurve fadeCurve;

This will expose a simple curve editor we can play with!

Now, to have that curve interpreted by our fader, just change the lerp to read:

light.color = Color.Lerp(startColor, endColor, fadeCurve.Evaluate(elapsed / timeForEffect));

That's it, now you can design any kind of curve you like to add personality to your fades!

 

Doing something after the effect

Another thing I sometimes get asked as a followup question is how to do something once the effect is finished, and I often see people run a timer alongside the coroutine. However, if you want, you can add a simple callback to the coroutine instead. Just make sure you include "using System" in your .cs file.

If you don't want to always assign a callback, you can either overload the method or just send it null.

In this case, your final script supporting a parameterless callback with all changes looks like this:

IEnumerator FadeLightColor(Color endColor, float timeForEffect, Action callback)
{
    Color startColor = light.color;        
    float elapsed = 0f;

    while (elapsed < timeForEffect)
    {
        light.color = Color.Lerp(startColor, endColor, elapsed / timeForEffect);
        elapsed += Time.deltaTime;
        yield return null;
    }

    light.color = endColor;
    
    //Check callback wasn't set to null
    //Unity/Mono doesn't support later versions of c# yet which make this easier
    if (callback != null) 
    {
        callback();
    }
}

Further reading

That's it, but I'd encourage you to read up on these functions if you're not familiar with them:

Color.Lerp

Mathf.Lerp

Mathf.LerpUnclamped

Vector3.Lerp

Vector3.LerpUnclamped

Quaternion.Lerp

Quaternion.Slerp

AnimationCurve

If you have any questions, please feel free to ask :)

Reddit's Android 2.1.9 update

Today let's talk about some Reddit Android app changes (but also celebrate that things do get changed!). There's some interesting design decisions in here today. Let's just say I am now aware of r/redditmobile and r/changelog, two subreddits I really shouldn't ever need to know about.

The long press to collapse comments

This is why I found r/redditmobile. I thought I might be alone in disliking this change, I wasn't.

In my interaction with Reddit, the action I perform the most is the comment collapse. I've done it forever on the desktop website rather than scroll a page, and I have carried that behavior to the mobile app. The long press change has highlighted just how right the original (short press) function got it for me - I had never thought about the process.

However I also had never visited r/redditmobile, where apparently a lot of users were unhappy. There was an intended outcome the team were driving for - making it harder to miss a tap on a link and accidentally collapse the comment containing it instead.

If we could assess whether the outcome was a positive one for us nimble comment collapsers, this exchange between Redditor and community manager might some it up:

Q "Why did they remove easy thread collapsing?
A "It is still somewhat easy [...]

First here's some untested assumptions:

  • Regular users read comments quickly. Really quickly. The Reddit app works because it's lets you explore content quickly, often in moments when you don't have a lot of time.
     
  • Regular users dismiss comments they don't need really quickly too, and want to move on as fast as possible. Sometimes there will be 3 or 4 comments in a row you'll want to collapse in search of one which covers your question, or has other relevance to you.

Now the side effects of the new intended outcome:

  • Time - if you increase the time it takes to dismiss a comment from 0 seconds to ~1 second, you are adding a significant overhead to the time a user has to spend on a thread. When on mobile I might read a thread for 20 seconds. If I collapse 10 comments this thread takes 50% longer to read now.
     
  • Failure feedback - sometimes you may slip when you begin the press. Because it's now a long press, you wont realise the gesture is going to fail until your estimate of the dismissal time has expired (your estimate will be longer than 1 second to be certain). This is not fun, and there's no easy feedback solution to this.
     
  • Discovery - because it's a long press and you have no onboarding tutorial for the feature, people won't discover it. This has been evidenced by people coming to r/redditmobile asking why collapsing isn't working, or to confirm an intended change was made, and that's users that knew it was a feature.

As trivial as all this might sound, it's a legitimate deal-breaker for me. It makes the whole UX feel so much slower and more cumbersome to me.

Let's Fix it

Luckily, if Reddit thinks this is an important change to keep for the reasons stated, they can fix it by simply making it an option in the settings to restore the short tap functionality for us dexterous tappers.

As for the onboarding itself, a simple "what's new" modal would solve the pain for the indifferent users, who don't care about the press length either way, but simply need guidance if a feature is changed because it's now non-obvious how to use it. If you wanted to be fancy, you could capture the first post-update short tap on a comment and pop a modal too.

Not addressing stuff like this can lead to attrition, which with so many 3rd-party apps available is not particularly improbable.

better onboarding

As the app is becoming more feature filled, it's also becoming more complex, and could really benefit from sharing it's features more clearly (such as the now less-visible subreddit search). It's never safe to assume even your core users know what they can do - when Microsoft asked users which features they wanted in Office, they discovered 90% of the requests were already there.

The Navigation menu

Another change a number of users seem upset about is the inclusion of the new bottom nav menu, and the removal of the hamburger side menu. Personally I don't feel as strongly about this, but I will say, if you are doing this for your customers, explain it as such, don't say:

The new navigation menu brings the Android and iOS apps more inline with each other.
Android has adopted the same designs schema as iOS.

This sounds much more like a business need than a customer one. Most people don't own Android and iOS devices, they pick one that they prefer, inclusive of it's design patterns. A lot of users feel strongly about not being second class users because of their platform choice. Implying one follows the design principle of the other for no other reasons than above suggests you are doing this for your developers, not your customers.

Anyway, good luck Reddit, please let us have our short tap back!

Cocktails

Browsing a stationery store recently I stumbled across index cards sold in packets of 100. For those of you too young to have seen these in the wild, they were most commonly found in libraries and other places where cataloging was worthwhile pre-computer proliferation.

I immediately wanted to use them for something and so I decided to embark on a small design project to support a hobby I started about a year ago - cocktails!

I decided to use them like recipe cards, and make a small illustration for each one. For the illustrations, I wanted a minimal, line drawn, flat colour style, with each cocktail presented in isometric. Being an avid Blender user for years now, rather than use Illustrator for these, I modelled each one in 3D and then used Freestyle (which is built into Blender) to create the line drawn style I was after.

Here's what a single card looks like for my favourite cocktail, the Negroni!

Here's what a single card looks like for my favourite cocktail, the Negroni!