Interface Development – User Experience Thoughts and Final Decisions.

Instructions are back.

My partner attempted to use the visual-only version of the app and I found myself jumping in to explain exactly what was happening. So some basic interface instructions are necessary. So much for my highest honour.

Still no plate.

I still think it’s good that the plate is absent from the final version. What it could potentially add for cognitive affordance would be negated by the frustration a cluttered interface.

The earths output are necessary pinned to the bottom which leaves just enough for interactivity. If a plate were to be included it would need to be fixed on the screen also – which would be awkward as it’s a square shape. It might be possible to reorganise things similarly to how they were in the original mockup, however I don’t think this will work well on tablet displays – a key way this app would be used.

New affordances…

The food miles slider is slightly separate from the rest and stretches 100% while the others don’t at most screen sizes. This demonstrates it’s overarching influence.

The slider bars have a more pronounced cool to warm hue, giving the indication that left to right means less to more. Coupled with the knob icons initiating at the left, it will be immediately or momentarily clear how you interact.

Possible Questions

Is a dark background the best? As well as agreeing with my personal aesthetic, it’s a suitable background for the planet, and lends to visual popping for the other icons.

The Foodprint GuideThe app is fully responsive, the food sliders moving from one to three columns depending on the screen width. The size of elements also adjust to suit. Try it.

Now I just need to include my call to action. It will likely be a link in the sentence above the earths.

Thought: I’d like to make a spinning earth gif. Maybe bobbing up and down. It would be awesome if they would do it at different timing intervals. Hmmm.

Darker & Brighter

I brought the backgrounds down a knotch as well as brightening the icons. It all looks much clearer.

The Foodprint Guide


Published by


Graphic and web designer based in Brisbane Australia.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s