A bit of fun with home links

Here’s a neat little design detail I’d love to see more of online:

094C527F-EDD7-45B0-8F3B-F5F56B1495AF

This is the logo for Balsamiq, a low-fi, rapid wireframing tool. Like most company / product websites, Balsamiq’s logo lives up in the top-left corner of every page. And just like pretty much every other website, selecting the logo will take you to the homepage.

What’s notable here is that Balsamiq’s web designers have added a neat little animation when you hover over the logo. Do that, and here’s what you see:

111C2D85-1A0A-4AE0-B58A-6165016C1EBA

This playful visual cue confirms that clicking the logo will take you to the homepage. While this isn’t really necessary (homepage logo links are a well-established interaction paradigm), this little touch nevertheless reinforces the convention and shows that Balsamiq’s designers went just that little bit further to make their site more usable and fun.

If nothing else, it may raise a smile.

(A version of this post was originally published to my now defunct Tumblr blog in February 2013.)

Nintendo eShop card codes

Here’s a nice piece of interaction design I noticed this morning on the Wii U.

A1C240D3-BAE3-491F-9577-E07F0AF2E2B1

The image above shows the Wii U gamepad when accessing the Nintendo eShop (Nintendo’s online digital store). This screen is for entering the 16-digit code from a pre-paid eShop card, giving you funds to spend on downloadable games.

This interface is notable for two reasons:

First, the 16-digit code is broken down into four, four-character chunks. This encourages a four-beat, read/type rhythm that makes entering the code easier.

Secondly, eShop card codes (which are made up of seemingly random alphanumeric characters) don’t contain ambiguous letters that commonly get mistaken for numbers. These letters (I, O, Z) are inactive and greyed out on the keyboard, ensuring that nobody confuses them with the numbers 1, 0 and 2.

Overall, the Nintendo’s digtal offerings leave much to be desired, but design decisions like the ones above show that at least someone at the ’big N’ is thinking about the user experience.

Merry Christmas

I’ve been pretty busy over the last few weeks and as a result I’ve been neglecting the blog. Christmas is usually a pretty quiet period; work tends to wind down as we creep closer to December 25th, but this year things didn’t really go quiet until Christmas eve.

I have a load of draft posts I’ll be fleshing out over the holidays, so I’m hoping to have a prolific (start to) 2015. I just wanted to take this opportunity to ‘check in’ and post something in the interim. Like bowel movements, blog posts are best when they’re regular. :)

I’m also planning to grow the blog in 2015 by adding some functionality (comments & analytics) and content (‘about’ & ‘portfolio’ pages). The pace at which these features are added depends on the speed of development of the Ghost platform itself. Gone are the days when I enjoyed spending hours in code editors hacking theme files to add custom features to my blog. These days I just want to write. I want to let my blog to grow naturally with the Ghost platform, so as soon as the Ghost team add functionality like code injection, I’ll start adding those bells & whistles.

Aaaaaanyway… to whoever may read this: I hope you’re having a great holiday. Catch you in 2015.

UX Discuss

Thursday lunchtimes have quickly become UX Discuss hour.

UX Discuss is a weekly Twitter discussion centred around a single UX-flavoured topic. Three questions are posted on the UX Discuss website a week in advance, giving participants a chance to form ideas and formulate opinions before the event.

Before UX Discuss I’d never taken part in a group chat on Twitter. I expected chaos, but the founders, Hugo Froes and Rob Whiting do a good job of facilitating the conversation and keeping the discussion on-track. The three-question format, hour time limit and Twitter’s 140-character restriction keep things snappy and prevent anyone from getting overly verbose.

After each discussion, selected tweets are compiled into a Storify story, creating a kind of snapshot of current thinking within our industry. (Here’s the story from last week’s discussion about empathy: How important is empathy in UX?)

2EEB52CD-C559-4528-BDD7-FA6B2939052E

I think it’s important to write about what we do. To quote Sally Kerrigan in one of my favourite articles:

“When you write about your work, it makes all of us smarter for the effort, including you – because it forces you to go beyond the polite cocktail-party line you use to describe what you do and really think about the impact your work has.”

For me, UX Discuss is a chance to take an hour a week to think about what I do and to bounce some ideas off my peers, which often helps me better understand the meaning and impact my work has.

UX Discuss is open to all. To be part of the discussion you just need to use the hashtag #UXDiscuss. The next discussion is today at 1pm GMT and focuses on UX Roles. I hope to see you there!

Post-it Plus gets a fantastic 1.1 update

Post-it Plus, one of my favourite iOS apps got updated to version 1.1. today, adding a bunch of great new features.

The new pen and eraser tools can be used to create new notes digitally, or to edit notes captured from photographs (very cool). The app now supports Handoff too, so you can seamlessly work on the same boards across your iOS devices.

If you’re not familiar with Post-it Plus, here’s a video explaining what it does:

I regularly take photos of a wall of Post-it notes after a workshop. Before owning Post-it Plus I’d sometimes take those photos and use Omnigraffle to recreate the notes digitally, one-by-one so that I could rearrange and edit them after the workshop was over. This is not fun!

Having Post-it Plus on my phone means I can snap a photo of a bunch of Post-it notes and the app will automatically digitise them, letting me rearrange and edit them before exporting the board to one of the many useful formats the app supports.

In the two months since its release, Post-it Plus has become an integral part of my UX toolkit. I’m going to do a full write-up of the app soon, but in the meantime I recommend heading over to the App Store and grabbing the newly-introduced Editor’s Pack (which adds the eraser tool and extra note colours) while it’s on sale for an introductory £0.69.

Post-it Plus is available on the App Store.

Aled

Read more posts by this author.

So long, Polar

Somehow I completely missed the news that Google bought Polar back in September.

Polar was a great little iOS (and later web) app for creating, sharing and voting on binary polls. Co.Design called it the Instagram of Quick Quizzes – an apt description. For me, Polar stood out because (like Instagram) it represented a masterclass in mobile interaction design.

Polar’s designers understood the nuances and limitations of using a mobile device and built an interface that worked brilliantly in this context to deliver a wonderful user experience.

Here’s a video of an early version of Polar, demonstrating two key interactions:

The video shows how a combination of large hit targets, thumb-friendly gestures and layout, and some clever shortcuts made Polar feel nearly effortless to use. It was also the first app I came across that challenged established password masking behaviour. Instead of masking (hiding) your password by default, Polar showed the characters of your password as you typed them but gave you the option to hide them if you felt it was necessary. This resuled in improved usability at the cost of questionable security gains. (More on this in a future post.)

This attention to detail was no accident; Polar was co-created by digital design guru Luke Wroblewski, whose ethos and expertise shone through in the app’s design.

Here’s an excerpt from Luke’s blog back in 2012:

People use their smartphones anywhere and everywhere they can, which often means distracted situations that require one-handed use and short bits of partial concentration. Effective mobile designs not only account for these one thumb/one eyeball experiences but aim to optimize for them as well.

Polar was a great app that really set the standard for mobile app design. It’s a real shame that it’s gone.

Collaborate 2014

Today I was lucky enough to attend Collaborate, a UX conference organised by my employer, Nomensa. Without exaggeration or lie, it was a great day with quality speakers imparting wisdom and insight by the bucketload.

I used Twitter as my notebook throughout the day, and for the first time I really ‘got’ the value of tweeting at a conference. Collectively posting thoughts, quotes and photos under the same hashtag results in a kind of shared diary that’s really quite magical. (Here’s a link to the conference hashtag.)

Below I’ve listed a single thought or idea that stuck with me from each of the eight speakers. These don’t necessarily represent the key themes or take-homes from these speakers’ talks, they’re just things that stood out to me.

(I’ve paraphrased heavily and have added my own interpretive elaborations.)

Nick Finck – The nuances of UX

There are infinite intangible (and uncontrollable) variables that contribute to the subjectivity of a user’s experience. We need to remember this, because it means that we can’t design a user experience, we can only design for it.

David Peter Simon – Representing information across channel

Some of David’s ideas reminded me of Alan Watts’ writings about language shaping the way we think.

“We seldom realize, for example that our most private thoughts and emotions are not actually our own. For we think in terms of languages and images which we did not invent, but which were given to us by our society.” – Alan Watts

We need to be mindful of the language we use to discuss problems to avoid being unconsciously constrained (or forced towards a wrong / sub-optimal solution).

Joshua Marshall – Empathy as a core feature

If you’re designing something that nobody really wants to use (e.g. a government website), simplicity is key. Do as much work for your users as you can. Ditch ego, ditch vanity and focus on user needs.

Simon Norris – Digital first: A philosophy

My choice nugget from Simon’s talk neatly captures an idea that Nick Finck also touched upon – that users’ experiences don’t switch off. They extend between and beyond screens. Digital transcends devices / technology.

Maya Middlemiss – The users’ experience of user experience

I’m a great believer in applying what we do to what we do, i.e. applying our methodologies, tools and expertise to our own processes in order to improve the way we work.

Maya highlighted a great opportunity for us to do this by giving us candid views into the worlds of user research participants and their experiences of taking part in our research. We need to consider the experiences we foster for our participants, just as we do for our users.

Something as small as offering a cup of tea can make a huge difference.

Dan Healy – …Engaging millennials online

If you’re tailoring your written content to a particular audience (for example, under 18’s) be scientific and don’t rely on preconceptions or (gasp) stereotypes. There are tools out there to help you write at the right level.

Ben Bywater – UX research: from full fat to lean

Ethnographic research is a great tool for making sense of the proliferation of contexts made possible by a multi-device world.

The more devices people have, the more weird and wonderful ways they’ll think of to use them, and use them together. Hacks, workarounds and cross-device usage are hard to uncover by just talking to someone.

I wrote a blog post about this topic a few months ago.

Thomas Wendt – The broken worldview of experience design

This idea ties in with David’s thoughts about language subconsciously shaping the way we think.

We often think of a problem and its solution as being a dichotomy, but the line between them is blurred and they overlap. Defining (and testing) solutions often helps us better understand the problem.

Summary

Today was a good day that left me feeling inspired and excited to apply some of these ideas to my work. Just what you want from a conference really.

It was also nice to hear the word empathyused so often. As UXers I don’t think we use that word often enough. We are professional empathisers after all.

How to fix vertical videos using iOS8 video extensions

If you’ve spent any time on YouTube, you’ve probably come across tall, narrow videos with thick black bars on either side. These are vertical (or portrait-oriented) videos. Here’s an example:

The Comic Sans of videography

Portrait orientation has become the Comic Sans of videography – there’s nothing intrinsically wrong with either of them, but they’ve been misused so often that it’s become difficult to take either of them seriously.

The thing about vertical videos is that a lot of the time they’re created unintentionally. Given that our smartphones are designed to be held upright, we instinctively hold them that way when we’re given just seconds to record that sudden, cool and unexpected thing that just happened.

While some filmmakers choose to record video this way, years of exposure to 4:3 and 16:9 (aka landscape) aspect ratios have established landscape orientation as ‘the norm’.

Objectively speaking, horizontal videos are just better in most everyday use cases because they fill more of the most common screen sizes, giving a bigger image. You’re likely to agree with this statement if you’ve ever been disappointed to discover that the video your friend took of that never-going-to-happen-again thing you just saw was shot vertically and looks tiny on your smartphone’s screen.

Our smartphones should be smart enough to automatically record all video horizontally by default, but since they’re not, it’s up to clever app developers to give us the tools we need to cure Vertical Video Syndrome.

Enter Horizon

Horizon is a cross-platform mobile app that can produce horizontal videos no matter how a device is held. You can use it to record videos or you can use it to convert videos you’ve already recorded through another app.

Horizon isn’t new, but on Monday the developers added support for iOS 8 video extensions, meaning you can now convert your vertical videos from within the iOS Photos app itself. Here’s how:

  1. Download Horizon from the App Store(currently £1.49 and also available on the Google Play Store and the Amazon App Store)
  2. Open the Photos app and select the video you want to convert
  3. Tap the ‘more’ iconA44744FF-09E4-4130-B00F-F1EC60F05E13
  4. Tap ‘More’ again (you’ll only need to do this once)
  5. Switch Horizon to ‘on’ (you’ll only need to do this once)
  6. Open the Horizon extension
  7. The horizontal preset is already selected for you, so it’s just a case of hitting ‘Done’ to convert your video

1EEBF81D-6709-4A06-B8E9-D318CEED83B1

The results

Voila! Your portrait-oriented video is now displayed in a much more palatable landscape orientation. Here’s the same video from above after it’s been corrected using Horizon:

You’ll notice that a lot of the image has been lost, which may end up in something really important being cut from the video, so bear that in mind. This is not a one-size-fits-all solution.

Fret not however – what’s great about iOS 8 photo and video extensions is that they’re non-destructive, so the original files are kept in case you change your mind and want to undo the changes you’ve made. All you need to do is open the video, access the extension menu and choose ‘Revert to original’, as shown below.

3493CEBD-BFB5-4575-935F-7785B797042C

So there you have it!