creative-agency-banner

4 Times That The Misery Of Creative Agencies Made Me Happy

Clickbait titles are fun, but bear with me, good people. I’m trying the make a point.

This report was wafted under my nose the other day. It makes for depressing, but not terribly surprising reading. The first paragraph pretty much nails it:

Anyone who’s spoken to me in a professional capacity for the last 3 months will probably recognise that Smith & Beta’s report is quantitative confirmation of what I’ve been going on about for ages. Each one of these makes me sad – but also, because I am a shallow, vapid person, I still get to feel happy that I’m right.

1) Good quality creative requires good quality technical implementation

Agencies lead with creative vision and lean on technical skills (internal & external) to deliver this vision. No one ever won a pitch by saying that the creative will be a strong C+ but it’s going to be implemented really well. Sadly, the opposite is almost always true. The industry is generally OK with taking an amazing creative idea and delivering it late, over-budget and on top of a pile of bodies of fallen colleagues.

2) This technical resource – where it exists within an agency – is often siloed and over-committed

Because of the way the creative industry works, creative resource is always going to be an expense the agency is happy to invest in. Investing in technical resource however; is a more expensive, slower, trickier business.

Similarly, investing in older, more skilled resource is always going to be a harder sell when there are countless thousands of young and exploitable juniors clamouring for your attention.

An agency trying to walk the line between capability and capacity in order to really call themselves “Full Service” will end up with a safe but middle of the road offer. Conversely, an agency who shoots for the moon and invests in highly specialised and/or highly senior team may find that they’ve painted themselves into a very expensive corner.

3) It’s hard to hire your way out of this problem

I mean, duh, obviously. It’s hard to hire your way out of any problem. Recruitment, training and increasing retention are sloooooow processes. And the problems that this report outlines are problems of the now.

(Side-note: In my role here at Isotoma, I often end up talking to agencies about projects that we can collaborate on. I’m usually talking about projects that might be coming up in, say, 6 months, but people actually want help RIGHT NOW.)

4) These problems when considered together, reduce the satisfaction of the customer and shorten the lifetime of the account

As abusive as the client/agency model can be, there’s a satisfyingly stark bottom line to it: “Do good work; get more work.” Note that this is distinct from “Pitch good creative; get more work.”

As I said above, no one ever won a pitch for outlining a competent implementation plan, but once the project is over and the smoke settles, the customer doesn’t just remember the pitch.

(If you’re really unlucky, the people who were in the pitch don’t even work for the customer anymore…)

The knife edge that a marcomms agency has to walk is being able to deliver creative vision *and* technical competence in a way that doesn’t fundamentally alter what the company is. Go too far in one direction and you’re unable to deliver anything profitably, go too far in the other and you’ve magically become a company that you don’t want to be.

So this is one of the reasons that Isotoma do what we do. We’re already a technical agency. We’re already geared up to help you estimate, deliver and, crucially, support a creative campaign. We’re good partners. And the better we get at ploughing this particular furrow, the better we’re able to help and complement agencies who’ve chosen to plough another.

And that makes me happy.

(See? I was being cynically provocative to attract clicks. And the pug at the top? The cherry on the cake, my friend. Truly I am a monster.)

 

Refreshing a site into uselessness

Myvue.com was never what I’d call wonderfully designed, but it it did its job. It did it so well, in fact, that it’s one of the reasonably few sites I’ve bookmarked on my phone, and one of the even fewer bookmarks that I actually use on a regular basis.

Specifically, I bookmarked the URL of my local cinema. Here’s how it looked until a month or so ago:

Screenshot of Myvue website from 2015Pretty simple, right? It shows me a vertical list of movies showing today, and the times they’re showing at. It defaults to today, but at the top of the list are tabs for the next 5 days. It’s not exactly mobile-optimised, but it’s perfectly usable on my iPhone.

The site also does plenty of other things, all of which are pretty much useless. I’m not here to watch a trailer. I don’t buy tickets online as it takes a minute to buy at the cinema and it’s never sold out or full. Where do “user ratings” even come from and why do I care? Why would anyone go to this site to find films to watch by genre? Why would I register on a site like this? What’s the point of literally any of the rest of the site’s navigation? Anyway, that’s by the by. It does its central job well, showing me every movie that’s showing on that day, at what times, on one page.

So the other day I used my bookmark again and noticed immediately they’ve redesigned. It looks new and expensive. It adapts to my mobile device. And it’s now utterly useless, particularly on mobile. Since 99% of the time I use this site it’s on my iPhone, that’s what I’ll use for the rest this review.

This is what you now see at the same URL:

Screenshot of new Myvue site on iPhoneThe entire first screen is taken up by a film poster, which turns out to be a slideshow. Carousels are annoying enough, but this one makes it extremely difficult to know what page I’m on, because judging by what I see on the screen, I’m on a page for Sausage Party.

Just pause to consider how pointless this slideshow is (whilst adding who knows how much to the download time). It’s a sequence of movies showing at this cinema. Which is… exactly what the list below it is. Except this is a slideshow, and that’s a vertical list. Someone must have insisted on a slideshow.

Scrolling past this annoyance you get to the vertical list of movies showing that day. The posters are now so large only 2 fit on screen at once (even on desktop!), yet they’ve removed the short description, leaving only the title and… what’s this? “Get times & tickets”? Why don’t you just show the times like you used to?  So now I have to navigate to get the times for every movie I’m interested in?

[Update 14 Sep 2016: MyVue have added showtimes back in on the listing page! I wish they would also show the film’s running time as they used to, though.]

So I click “Get times & tickets” and… WHAT?! Another page for the movie I just clicked on, with an enormous backdrop image but no useful information on it, and another big “GET TIMES & TICKETS” button! So I click that, and a panel slides laboriously in from the right, displays a “working” spinner for all of 7 seconds, before finally showing me the times. Wow, it really worked hard to show me some text-based information. There’s no caching, by the way. Next time I request showtimes it’ll take another 7 seconds.

Screenshot of new Myvue site on iPhone, product pageNow I want to see what times other movies are showing, so I go Back. Back to the useless screen with the backdrop (let’s call it the Product screen). So I go Back again. Whoops, here comes the sliding panel with showtimes again. Clicking Back a third time is the charm. (Although it’s hard at first to tell I’m back on the listing, because an unrelated movie – the slideshow at the top – is filling the screen.)

The above buggy behaviour is actually the best-case scenario. If you clicked the X in the corner of the sliding showtimes panel instead of Back, you’d find yourself back at the Product screen with no escape. Clicking Back again would restore the showtimes panel, and so on, trapping you in an endless loop.

The bottom line is I’m removing this bookmark from my phone, as it is now useless. A google search for “what’s showing at vue fulham” gives me the information I want.

What went wrong here?

Screenshot of new Myvue site product page, on desktop

The product screen on desktop includes showtimes for today, which requires an extra click on mobile.

Firstly, despite the mobile-optimised layout, it’s obvious that the site was designed and built with a desktop or widescreen display in mind. It looks like the designers wanted something that looks like today’s media centre interfaces, like Plex or Apple TV. The enormous posters, backdrops and spacious page layouts are typical of a “lean-back” design. Also, the desktop version includes stuff that’s missing on mobile – the Product screen even has screening times for today, saving one click. But ask yourself: is this site anywhere in the same category as these media centre apps? Where are people likely to be when checking what’s showing at their cinema that evening? How quickly do they want this information? Mobile should’ve been considered of at least equal importance.

Media centre interfaces also necessarily involve deep levels of navigation, a handicap born of lack of space on the screen and a remote-control interface. On browsers it’s easier to scroll and click on targets, and if you can avoid deeper levels of navigation, you do so.

Screenshot of new Myvue Quick Book interface on iPhoneBut secondly, it’s clear that the designers had a very different idea of the primary user journey from me. You can see this clearly in the super-prominent “Quick Book” widget. On a desktop, you can at least see what the widget does, but on the mobile it’s entirely mysterious what “Quick Book” will do. But when invoked, it’s clear that the designers consider the website’s primary purpose to be buying tickets online, and that users don’t care so much about where or when it’s showing, as long as it’s the one movie they want. (The widget does not default location to the current cinema selected, and does not default date to today.)

Admittedly I don’t know how typical I am of Vue cinemagoers, but I don’t buy tickets online, I’m 99% certain to go to my nearest Vue rather than somewhere else, and there may be more than one movie I’m interested in seeing. My decision ultimately depends on what’s the most convenient time within the next 5 days. With the “Quick Book” widget, I’d have to use 3 dropdowns (which should be the UI of last resort) – 7 clicks – before even being able to see which times it’s showing for that day, which may well rule it out.

The damage

I used to be able to see what’s showing today at my local cinema, and when, with a single tap on my phone. Two taps if I wanted to check another day. Now, to check the times for a movie requires 3 taps, with loading time between each. Checking the times for another movie adds another 5 taps. Checking a different day… you get the picture. This redesign has rendered the site unusable, for me, and I would guess a large proportion of its previous users.

 

Going all-in on Flexbox

On a recent project we finally got to use Flexbox extensively for page layout. In the interests of increasing general knowledge about flexbox (including mine), I’ll explain a number of layouts that use flexbox extensively, organised in 3 sections:

  1. Main page layout (for a single-page JavaScript application)
  2. Fluid product grid and accordion-like summary box
  3. Product “cards” and “slabs”

Continue reading

Transforming a business platform

The-Key-Transform-CMS

As you may have seen in our previous blog post – Evolving The Key: insights from user research – after a year in design and development we recently helped The Key Support relaunch The Key for School Leaders and School Governors. This post looks at the technology selections for the refresh of The Key’s content management platform and why certain elements were chosen.

In the nine years since launching The Key has grown to support almost half of schools in England, with an amazing 75,000 registered school leaders and 17,000 registered governors having access to 5,000 original resources every month. It is now one of the most trusted sources of information in the education sector.

Selecting a platform

The sustained growth of The Key in both size and breadth meant there was a real need to TheKey-Screen1
update the underlying platform.  The new content management system (CMS) needed to be efficient at managing user subscriptions, making the right content available to the right users (The Key has 7 different classes of user), as well as being ready for any future expansion plans.

The platform for the past 9 years has been Plone, an open source enterprise content management system first released 15 years ago. In 2007 – when we built the first version of The Key – Plone was the ideal choice, but as the business requirements have expanded and been refined over the years we felt it was a good time to revisit that selection when we were presented with the opportunity to completely refresh both sites.

As The Key has grown in size so has the variety of content they are displaying on the site. As the breadth and types of this content has developed The Key have struggled with the restrictions created by the traditional template-driven nature of Plone. This prompted us to consider more flexible CMS options.

The solution? A shift from Plone to Wagtail.

The-Key-Wagtail-CMS

We were already pretty impressed with Wagtail, having already used it on a couple of smaller projects. Like Plone it’s an open source CMS written in Python, but Wagtail is built on Django, our preferred web framework, giving us all the advantages that Django brings. We wanted to make sure that the new platform would stand the test of time as well as the previous Plone solution had, so we ran a careful evaluation process between a group of Django based solutions – including Wagtail, Mezzanine, Django CMS and a bespoke pure Django approach – to see which would best meet The Key’s requirements. We’re pleased to say that Wagtail came out the clear winner!

There are a few reasons we were particularly impressed with Wagtail for an application of this size and scale…

  • It is highly extensible, meaning that we could push the user model very hard and accommodate the intricacies of The Key’s user base
  • There’s an extremely high quality ‘out of the box’ admin system, meaning that we could hit the goal of improving the editor experience without huge amounts of bespoke development
  • Wagtail supports the notion of page centric content management (through its StreamFields) which allowed us to build much richer pages than a traditional template driven CMS
  • There are powerful versioning tools built into the framework which would give The Key the level of control they need when managing changes to sensitive content

These features of Wagtail aligned beautifully with The Key’s requirements, allowing us to focus on delivering the features that they really needed.

Wagtail is a new and exciting open source platform which is constantly growing with new features and contributions. We were really looking forward to being involved and contributing some elements of our own.

Making the move…

One of the first tasks to complete as part of the move was to export the data out of Plone and into Wagtail. This involved the careful migration of over 30,000 pages across two websites, complete with full page history, allowing us to preserve all of The Key’s valuable content and metadata.

The goals of this project were manyfold for The Key:

  • Improve the member experience, making it easier to manage a school’s membership
  • Improve members’ ability to self-serve, improving their experience and reducing the workload of the team as the business grows
  • Improve the quality and measurability of online marketing activities
  • Improve the quality and robustness of reporting tools.

Making the move from Plone to Wagtail held so many benefits for The Key we couldn’t write about them all, but have summarised our favourites:

  • Improved user acquisition journey
  • Improved signposting of the huge variety of content on the site
  • It’s a long term solution, Wagtail can expand and grow alongside The Key
  • Flexible modular home page

Another important task was to ensure that any user behaviour tracking was successfully migrated over to Wagtail. The Key harness their large database of users to track and record vital information which is then translated into leading insights, ensuring The Key remain at the forefront of trends and industry changes.

Through our longstanding relationship with The Key we understand how valuable this data is, so we used a custom API to integrate a data warehousing service called Keen.io. This service intelligently stores the data allowing The Key to collate, store and build their own queries and analysis of user behaviour, allowing them to constantly refine and improve their content to better serve their members.

Monitoring performance

To ensure the stability of the complex infrastructure that supports a project of this scale we installed New Relic – a real-time software analytics program. New Relic provides deep performance analysis for every part of TheKey-Screen2The Key’s platform, enabling us to make faster decisions, monitor interactions, quickly pinpoint errors and achieve better business results for The Key.

What we’ve found working with Wagtail is that it’s so flexible, customisable, scalable and user friendly. It’s working wonders for some of our other clients too. If you’re interested to know what moving to Wagtail could do for the performance of your site then get in touch, we won’t try and sell you something you don’t want or need!

Stay tuned

The next blog installment: How has The Key benefited this update a month after deployment?

In our next blog post about The Key we’ll be revisiting the site a month after deployment to find out how their staff members got on with the CMS change and what impact it has had on the business.

If you found this article interesting and are looking for an agency to help you with an upcoming project, please do contact us and find out how we can help you. Alternatively you can read about some more of our work and see how we have helped other companies achieve their goals.

When a feature is invoked more often accidentally than on purpose, it should be considered a bug

Back in 2014 I tweeted this:

I’ve been meaning to revisit that statement for a while now. The link above refers to the following misfeature afflicting Mac users with external displays:

When the mouse cursor touches the bottom of an external display, MacOS assumes you want the Dock to be there, and moves it there from the primary display, often covering up what you were trying to click on.

This happens to me almost every day for several years now – never intentionally. I have looked into it thoroughly enough to know that it cannot be turned off without sacrificing all other multi-monitor features.

Our devices are full of such annoyances, born from designers’ attempts to be helpful. Sometimes they are just irritating, like the above. Sometimes they can be downright destructive.

Naked keyboard shortcuts

Keyboard shortcuts without modifier keys can be fantastic productivity enhancers, as any advanced user of Photoshop or Vim knows. But they are potentially incredibly dangerous, especially in applications with frequent text entry. Photoshop uses naked keyboard shortcuts (to coin a phrase) to primarily select tools or view modes. This may sometimes cause confusion for a novice (like when they accidentally enter Quick Mask mode with ‘Q’), but is rarely destructive.

Screenshot of Postbox Message menuPostbox, my email client, on the other hand, inexplicably uses naked keyboard shortcuts like ‘A’ to Archive and ‘V’ to move messages to other folders. What were they thinking? Email does involve frequent text entry. If you are rapidly touch typing an email, and the message composition window accidentally loses focus (e.g. due to the trackpad), there is no telling the damage that you can do. You may discover (as I have, more than once) that messages you know to have received have disappeared – sometimes only days later, without knowing what happened.

Any application that uses naked keyboard shortcuts should avoid using them for actions, as the application may come to foreground unintentionally. It’s safest to use them to select modes only.

Apple Pay

Here’s another example. Ever since Apple Pay came to iOS, I see this almost every day:

iPhone showing Apple Pay interfaceHow often do I actually use Apple Pay? About once a month, currently. Every time this screen appears unintentionally, I lose a few seconds – often missing the critical moment if my intention was to take a photo. (It is invoked by double-pressing the hopelessly overloaded Home button. A too-long press invokes Siri, which I also do unintentionally about 1 in 3 times.)

Gestures

After Apple announced yet more gestures in iOS 10 at WWDC last week, @Pinboard quipped

On touchscreen devices, gestures are a powerful and often indispensable part of the UI toolkit. But they are invisible, and easy to invoke accidentally. As I wrote in my recent criticism of the direction Apple’s design is taking, whilst some gestures truly become second nature,

[…] mostly they are an over-hyped disaster area making our devices seem not fully under our control, constantly invoked by accident and causing us to to make mistakes, with no reliable way of discerning what gestures are available or what they’ll do.

Since I use an iPhone where the top-left corner is no longer reachable one-handed, I rely on the right-swipe gesture to go back more and more often. Unfortunately, this frequently has unintended effects, whether it’s because the gesture didn’t start at the edge, or wasn’t perfectly horizontal, or because the app or website developer intended something different with the gesture. And with every new version of OS X on a Macbook, the trackpad and magic mouse usually have more surprises in store for the unwary. I’m sure voice interfaces will yield plenty more examples over time.

Accidental activation – a necessary evil?

In my Apple design critique, I lamented the fact that it is very difficult to make gestures discoverable, as they are inherently invisible – contributing to that sense of “simplicity” which is a near-religion nowadays. You can introduce gestures during on-boarding, and hope users remember them, but more likely they will be quickly forgotten and we all know no-one will use a “help” page.

So you could argue that accidental invocation is the price we may have to pay for discoverability. Even though I rarely use Apple Pay, I am confident I know how to do so – a consequence of its annoying habit of popping up all the time.

With gestures, accidental activation may be critical to their discoverability, and if well implemented need not be irritating. For example, many gestures have a “peek” stage during which it is possible to reverse the action. Unfortunately, today’s touchscreen devices no longer have an obvious, reliable Undo function, one of the many failings highlighted by Tognazzini and Norman.

What are designers to do?

So if you design a helpful, time-saving feature that risks being invoked by accident,

  • consider the value (to the user of the feature)
  • consider the risk (of the user invoking it unintentionally)
  • consider the cost (to the user of doing so)

Is the value of the feature or shortcut worth the cost of it sometimes annoying users? How big is the cost to users? Wasting a second or two? Or possible data loss? Is the user even aware what happened? Is it possible to Undo? What is the risk, or likelihood, of this happening? What proportion of users does it affect, and how frequently? What proportion of usages are unintentional?

Failing any one of these may be enough to consider the feature a bug. Or you could fail two but the positive may still outweigh the negative. It depends on the severity:

Venn diagram with 3 circles intersecting: Low value, High risk, and High user cost

Can a feature be activated unintentionally? Is it worth the risk? The Venn diagram of inadvisability.

So designers should firstly try to ensure unintentional feature activation is as unlikely as possible – preferably impossible. But if it happens, the user should be aware of what happened, and the cost to the user should be low or at least easy to recover from. User testing will be your best hope of spotting problems early. Beta testing and dogfooding, run over a longer time period, are great at finding those problems that may have low frequency but high cost. Application developers may also be able to collect stats on feature usage, and determine automatically if a feature is often invoked but then not used, or immediately undone, which may highlight problems.

Or stick with a simple rule of thumb: if a feature is activated by accident more often than on purpose, it’s not a feature but a bug. Feel free to share more examples!

Beating Cancer To The Punch: Isotoma Project Officer Goes Three Rounds For Charity

Fighting back against cancer

Our Project Officer Daniel Merriman took part in his first charity Ultra White Collar Boxing (UWCB) match last weekend to raise money for Cancer Research UK. In the interview below, I ask Daniel what drove him to get into the ring…

1. So, what made you decide to take part in a charity boxing match?
“It was a spur of the moment thing, really! I did some boxing at university over a decade ago, but never had the chance to fight in front of a big crowd. Then earlier this year I saw an article in the local paper about these charity boxing events, and I speculatively sent them a message asking what was involved. Three days later I was in the gym with forty other novice boxers.”

2. How long did you train for, did you discover any difficult areas in training?
“Training was two sessions a week for eight weeks at Chokdee Academy, under the watchful eye of former world thai boxing champion Rich Cadden. It brought back a lot of memories of when I trained at university, but also emphasised just how out of condition I’d become. I’d been doing some running as training for an upcoming 10km race, but the type of fitness involved is on a totally different level. There were plenty of evenings when I came home with bruises and aching joints, but it was also immensely satisfying to see (and feel) the improvement as the weeks passed. In fact, the most frustrating aspect for me was having to miss some sessions because I wasn’t able to get a lift to the gym!”

3. Tell us about the fight night…
“Fight night for me actually started around 1pm with a medical, checking my blood pressure, shining a torch in my eyes and signing the all-important medical consent form. There were then talks from the organiser and the referee, explaining the format for the evening and the rules for the event. Unfortunately it turned out that my bout was slot 21 out of 22, so I
had a long time toDan-Close-Up wait! I spent the next few hours out in the audience with my guests at our VIP table, watching the other bouts and trying to conserve my energy.

Eventually I went backstage to warm up and mentally prepare myself. I don’t remember feeling nervous especially, but by that point in the evening I was just desperate to get in the ring. When the announcer called my name and my music started playing, though, the adrenaline started pumping and I knew it was time to (attempt to…) put into practice everything I’d learned in the previous eight weeks.

The fight itself seemed to fly by. I had sparred against my opponent in training before so I knew he was tough, and so he proved. The first round was relatively even, but he got me with a good shot in the second round, and by the end of the third round I was gasping for air. It’s hard to overestimate just how much the adrenaline of being in the ring saps your stamina, but I had some great supporters cheering me on and they helped me dig deep and get through to the final bell.”

4. Were there any unexpected benefits to the experience?
“Well I’ve dropped two sizes in jeans, so that’s something! I guess the other thing is that I wasn’t sure how I’d feel fighting in front of such a large crowd of people – there were close to 1,000 guests in attendance, and I didn’t know how that would affect me. I’m confident enough with public speaking, having done talks in front of a hundred or so students in my past life as a lecturer, but this was a different world altogether. Once I was in the ring, though, I was able to focus entirely on the man in front of me.”

5. Have you got any plans to continue the sport?
“I’ll probably do another bout towards the end of the year, but for now I’ve got a 10km race to prepare for. A team of us from work have signed up to do the Leeds 10k next month, which will be my first race at that distance, so I need to get the miles in. A few of my friends have signed up for the next boxing event though, so I’m sure I’ll be sparring a few rounds with them over the next couple of months.”

6. Most importantly, how much money have you raised for Cancer Research UK?
“Thanks to the generosity of my supporters, and particularly to Isotoma who sponsored me and matched the amount raised by fight night, I’ve raised £890 so far for Cancer Research UK.”

Dan-Close-Up2

7. What advice would you give anyone who is interested in taking up boxing? 
“One of the great benefits of taking part in this event was the top class training I received at Chokdee Academy. If you have any interest in competing, definitely take your time in finding a good gym. Check if they have fighters there who currently compete at an amateur or professional level, talk to the coaches and see what the atmosphere is like at the club. Ask yourself: do I feel comfortable here? Anyone can run a boxercise class, but it takes knowledge and experience to teach a skill like boxing.

Also, don’t be afraid of being “too unfit”! There were plenty of people who fought at the event who, at the beginning of the eight week training cycle, were struggling to do a single push up. The training you’ll receive in a boxing gym, along with advice and guidance regarding diet, will get you fitter than you ever thought possible.”

Dan undertook 8 weeks of training with the professionals at Chokdee Academy to prepare for the fight. If you’d like more information about taking up the sport then please do get in touch with the team at Chokdee, or your local training centre.

Sites for The Key for School Leaders and School Governors shown on various devices

Evolving The Key: insights from user research

Last week the freshly redesigned The Key for School Leaders and School Governors went live, after almost a year in design and development. We’ve been working with The Key since their founding in 2007, and this is the third major update Isotoma has carried out.

In the nine years since launching The Key has grown to support almost half of schools in England, with an amazing 75,000 registered school leaders and 17,000 registered governors having access to 5,000 original resources every month. It is now one of the most trusted sources of information in the education sector.

It’s no small task to migrate that many regular, engaged users from a system they’ve grown used to across to a new design, information architecture and user experience. This post explains our process and the results.

The Key website shown on various devices

Learning from users

As an organisation answering questions from its members daily, The Key had a pretty good idea of some new features that they knew users would appreciate. For example, better information about their school’s membership: which of your colleagues are using it, when the membership renewal is due, etc. They also keep a keen eye on their web analytics, knowing what terms users are searching for, the preponderance of searching vs browsing, etc.

But other questions could only be answered through user research. How effective was the site navigation? Are certain features unused due to lack of awareness, or lack of interest? As we had done with the initial design of the site, I went on-site to observe school staff actually using The Key.

The left-hand navigation column was one such bone of contention. Article pages have always shown articles in the same topic in the column to the left. It was easy to argue that they were relevant “related content”, but did anyone ever use them? We found that, in fact, hardly anyone did. (A 2014 design change to make them look more inobtrusive until moused over simply made them more ignorable.) Users were more likely to click Back to their search results or previous topic page, or use the “See also” links. Out went the left-hand navigation – the savings went into a calmer, more spacious layout and a font size increase.

Comparison of 2015 and 2016 article page designs

The “See also” links, however, appeared at the top of the right-hand column, so were rarely on-screen at the time when users were finished with an article. So we made sure they reappeared when the user had reached the bottom of an article.

Homepages – what are they good for?

Another thing the user tests told us loud and clear was that the current homepage was not working. Nobody had anything negative to say about it, but most people couldn’t tell us what was on it, nor did it feature in their navigation journeys.

Screenshot of The Key member homepageHowever, we knew that most members were avid consumers of the weekly update emails, bringing news headlines and other topical articles to their attention. So the new homepage is designed much more like a magazine cover, promoting news and topical content in a much more eye-catching and easily scanned style. The new flexible grid-based layout allows the homepage design to be changed with ease.

Screenshot showing 'mini-homepage' below an articleWe know that most users’ journeys will continue to be task-driven, but we wanted to increase the likelihood of serendipitous browsing – all members said they do enjoy browsing content not related to their initial search, on those occasions when they have time to spare. We have also added what we refer to as a “mini homepage” below each article, with a magazine-style display of new and topical content. This does much the same job as the homepage, but does not require the visit to involve a visit to the homepage.

Getting users to their destination faster

Most people used Search to find what they’re looking for, but a significant number also browsed, using the site’s carefully curated Topic hierarchy. In both cases, we saw opportunities to speed up the process.

The Key screenshot showing suggested search resultsSwitching to a new, high performance search engine, Elasticsearch, let us present top search results for a query dynamically – in many cases, this should avoid the need to browse a page of search results entirely.

The Key screenshot showing dropdown navigation menuWe also introduced a large “doormat” style dropdown navigation on the main topic bar. This lets users skip entirely two or three pages of topics and sub-topics. It also makes it much easier to scan topics to decide on the most relevant area, without leaving the current page.

What else did we change?

There are too many other changes to list in this post. The customer acquisition journey – marketing and signup pages – was entirely redesigned. Some unused tools were removed and some under-used tools made more prominent. New article types were introduced such as article bundles, and dedicated News section was added.

Template changes

Under the hood the front-end templates were given a full overhaul for the first time since 2007 – they have held up remarkably well, even allowing a full “CSS Zen Garden” style redesign in 2014. But in other respects they held us back. We now have a fluid, responsive 12-column grid system and a whole library of responsive, multi-purpose modules. There is a module compendium and style guide to explain their usage and serve as reference design.

Screenshot of The Key for School Governors homepageThis was also our first site to use an SVG-based icon system. We went with the Grunticon system, which provides a PNG fallback for browsers that don’t yet support SVG (IE8 and below). Grunticon applies SVGs as background images, however, so they cannot be recoloured using CSS. Since the site has two distinct visual themes – for School Leaders and School Governors – each Grunticon icon was also sprited to allow a colour theme to be applied with only a CSS change.

A continuing journey

Our work is by no means done. The Key have many exciting developments planned in 2016, and we can’t wait to work on them… And expect another post from our development team on the process of migrating such a large site from one CMS (Plone) to another (Wagtail) in the not too distant future.

About usIsotoma is a bespoke software development company based in York, Manchester and London specialising in web apps, mobile apps and product design. If you’d like to know more you can review our work or get in touch.

In-car interaction design

I recently went to a fascinating IxDA (interaction design) meetup about in-car interaction design. Here’s a quick summary:

1. Driver distraction and multitasking

Duncan Brumby teaches and researches in-car UX at UCL. He described various ways car makers try to provide more controls to drivers whilst trying to avoid driver distraction (and falling foul of regulations).

I think most of us are sometimes confused by car user interfaces (UI), and with the advent of the “connected car”, are likely to be more confused than ever.

Ever wondered what those lights on your dash mean? Confusing car UI by Dave

Ever wondered what those lights on your dash mean? Confusing car UI by Dave https://www.facebook.com/davewittybanter/

Modern in-car UIs take different approaches. Most cars use dashboard UIs with or without touchscreens. Apple’s CarPlay takes this approach. Then there are systems like BMW’s iDrive which has a dashboard display but a rotary controller located next to the seat, meant to be used without looking. This avoids the inaccuracy of touchscreens due to the vehicle’s speed or bumpy roads. (So iDrive makes more sense on the autobahn, whereas touchscreen UIs make more sense when you’re mostly stuck in traffic.)

Brumby mentioned that the Tesla’s giant touchscreens are not popular with drivers, as their glare is unpleasant when it’s dark, and app interfaces often change as a result of software updates.

The other major problem is that even interfaces you don’t have to glance at (e.g. audio interfaces, so fashionable at the moment) still cause cognitive distraction – research has confirmed what many of us instinctively know, that you are less attentive when you’re on a phone call, even when using hands-free. (See UX for connected cars by Plan Strategic.) And of course audio interfaces (Siri and the like) are never 100% accurate they way they are in advertisements. Imagine having to deal with its misheard mistakes in the message you were trying to send, whilst driving.

Reduction in reaction times 54% using a hand-held phone 46% using a hands-free phone 18% after drinking the legal limit of alcohol

Reduction in reaction times – RAC research 2008. From UX for connected cars by Plan Strategic http://www.slideshare.net/planstrategic/ux-for-connected-cars-58076640

(Why, you may ask, is a hands-free phone conversation more distracting than a conversation with passengers in the car? People inside the car can see what the driver is seeing and doing. People instinctively modulate their conversation to what’s happening on the road, and drivers rely on that. A person on the other end of the phone can’t see what the driver is seeing, and doesn’t do that, unwittingly causing greater stress for the driver.)

2. ustwo: Are we there yet?

The talk by Harsha Vardhan and Tim Smith of ustwo (versatile studio that also made Monument Valley, and who hosted the event) was more interesting, even though I started off quite skeptical. They’ve published Are We There Yet? (PDF) which is their vision / manifesto of the connected car, which got quite a bit of attention. (It got them invited to Apple to speak to Jony Ive.) It’s available free online.

But what I found most interesting was their prototype dashboard UI – the “in-car cluster” – to demonstrate some of the ideas they talk about in the book. It’s summarised in this short video:

This blog post pretty much covers exactly what the talk did, in detail – do have a read. The prototype is also available online. (It’s built using Framer.JS, a prototyping app I’ve been meaning to try out for a while.)

As I said, I started off skeptical, but I found the rationale really quite convincing. I like how they distilled their thinking down to the essence – not leading with some sort of “futuristic aesthetic”. They’ve approached it as “what do drivers need to see” – and that this could be entirely different based on whether they’re parked, driving or reversing.

Is Apple giving design a bad name?

Legendary user experience pioneers and ex-Apple employees Don Norman and Bruce ‘Tog’ Tognazzini recently aimed a broadside at Apple in an article titled “How Apple Is Giving Design A Bad Name”, linkbait calibrated to get the design community in a froth.

The article has some weaknesses (over-long, repetitive, short on illustrations and with some unconvincing anecdata), but on the whole I think they are right. Apple’s design is getting worse, users are suffering from it, and they are setting bad examples that are being emulated by other designers. I would urge you to read the article, but here is my take on it. Continue reading

isotoma-blog-6

Sorting querysets with NULLs in Django

One thing which I’ve found surprisingly hard to do in Django over the years is sort a list of items on a database column when that column might have NULLs in it. The problem is that the default Postgres behaviour is to give NULL a higher sort value than everything else, so when sorting in descending order, all the NULLs appear at the top. This is particularly strange if, say, you want a list of items sorted by most recently updated, and the ones at the top are the ones that have never had an update.

If we were writing the SQL directly, we could just add NULLS LAST to the ORDER BY clause, but that would be a really rubbish reason to drop down to raw SQL mode in Django.

Fortunately, Django 1.8 has introduced a new feature: Func() expressions. These expressions let you run SQL-level functions like LOWER(), SUM() etc. and annotate your queryset with a new column containing the result. I didn’t want to run a database function, but what I discovered was that it is really easy to subclass and make your own Func() expression, giving you access to a template for generating SQL! The base class looks something like:

class Func(Expression):
    function = None
    template = '%(function)s(%(expressions)s)'

    # Other stuff

Normally you are supposed to override the function attribute, which then gets fed into the template and wrapped around the existing SQL statement. However, it is equally possible to override the template attribute itself and get rid of the wrapping function altogether! This led me to create my own “function” which just returns a boolean to say whether the current SQL statement (completely generated by the ORM and untouched by human hands) evaluates to NULL:

class IsNull(Func):
    template = '%(expressions)s IS NULL'

Welcome to Hacksville!

From here it’s simply a case of annotating your existing queryset with this field, and then adding it to the .order_by() statement:

MyModel.objects\
    .annotate(last_update=Max('update__created_date'))\
    .annotate(last_update_isnull=IsNull('last_update'))\
    .order_by('last_update_isnull', '-last_update')

First we sort on last_update_isnull in ascending order (it will be either true or false, so all the “yes, it is NULL” items will go to the bottom of the list). Then we use the last_update field, which is what we really want to sort on, as the secondary sort field, safe in the knowledge that all the NULLs are already out of the way.

So there you have it: my moderately hacky solution that is quite small and crucially still plays nicely with the ORM 🙂