UX: Refine, don’t re-design

Refine, don’t re-design I’m sure this saying has been said. I’m sure I read it in Steve Krug’s seminal UX how-to guide Don’t Make Me Think. I’ll be damned if I can find it to block quote with any certainty.

Wherever I heard it, it stayed with me. Unsurprisingly as this motto has been with me through my drink and drug addled 20’s it’s origin story is lost and confused. But through my offline DM days and into my digital CRO days I’ve always thought it to be a truism not often repeated. a K.I.S.S rule for the CRO’ers and UX’ers.

From a users perspective

Users flipping hate change. You ever been on the Internet when Facebook changes it’s layout and everyone goes on it to cry about it like Zuck’s ceremonially sacrificing the last unicorn? It’s hell. For a few days, then they forget about it.  Most users get around the new layout, learn how to do their old tricks the new way and ignore anything new or gets in the way of them repeatedly Liking things.

Facebook is one of those exceptions to the rule though. They have tremendous lock-in with near ubiquitous use. I may not tend to use Facebook myself, I do my shouting into the void via Twitter, but I still have an account.

Does your site have this tremendous lock-in value? Congrats, you probably run something that can be loosely defined as a social network. I’d class email client in here. Anything that keeps users connected to other users has this value as we tend to prize keeping touch and we tend to have routes of communication. No, it’s far more likely that you have a website and owners of a website should make large changes strategically and fully backed by insight.

I have a website why should I refine it based on UX rather than just redesign it with all my grand ideas?

Apart from the fact they are probably shit from your active audiences perspective? If your site is has any frequently recurring users your site no longer belongs to you. You have an unspoken partnership with your users and if they don’t like your decisions they will go elsewhere and they will forget about you very, very, quickly.

Large changes that haven’t been conversion or user tested invariably leads to issues usually less of whatever key metric you judge your site by. The problem is what are the issues that caused said drop off? With large scale changes its impossible to tell. Least of all because any form of visual refresh causes some cognitive dissonance for users, let alone which includes page architecture changes. Which they ALL do. There is nothing more heart breaking than putting in all the effort of a refresh and seeing conversions plummet.

People don’t want to do this though. It’s the longer route, it needs mor rigor and bottom line, to do properly it would cost more. But even costing more should be caveated with in the short term as a site that has been tested to perform better will always be generating more conversions.

For me I would run a series of AB tests on any wireframed changes to page layout on an existing layout, measure results and repeat a few times. THEN apply new visual styles, where possible without presenting branding conflicts, and test again. Positive results equal a “progress onwards with testing other aspects of site” card otherwise back to testing layouts.

I can see the frustration could creep in with constant testing and repeating but for me I always think for 90% of business this their front of house, their store. I would be investing maximum resources time and care to ensure users are enjoying using my site alas best as possible.

Thought about content creation

I have often struggled with briefs that expect innovative (ha!) design before being briefed with content.

This statement  is especially true when I consider my SEO related work. I remember info graphic days saying “make a graphic about our *xyz service * and we will add the stats later.”

“What?” Is what I should have said. “No.  The data should inform the layout.” But, inevitably I knocked out some crap anyway.

The truism struck me again like a lightning bolt to the old noodle bucket on a stormy eve and the realisation triggered a guilt that ran through me and compelled me to write.

In retrospect, it boils my fricking piss. A visual design on a topic should be led by the content, the marketing message. Too many times I see poorly thought out briefs and too many times I see solutions with piss poor success.

Communication is key but this is a multi lock door. Proper planning has the all the keys on a key ring. The trick is to get all the keys ready to go at the right time, when you need them and that’s a tricky juggle.

Returning a return value from a resume() callback in Swift

Having trouble with Swift functions that run an async session e.g. getting image or JSON data from a server? Me too. This post on Stack Overflow saved my mental state from debilitating further.

To fix you want to set your function up like this:

 getJsonOffServer(imageId: String, completion: ((image: UIImage?) -> Void)) {
    let url:String = "https://dummyUrl.com/\(imageId).jpg"

    let task = NSURLSession.sharedSession().dataTaskWithURL(NSURL(string: url)!) {(data, response, error) in
//Do stuff... and when finished use the completion
        completion(image: UIImage(data: data))


and call it like this:

getImageFromServerById("some string") { image in
    dispatch_async(dispatch_get_main_queue()) {
        // go to something on the main thread with the image like setting to UIImageView

Dear Stack Overflow user 0x7fffffff, thank you for answering that, it was doing my actual head in and wasting far too much of my time.

A complication with Clockkit complications

I’m currently messing around creating complications for an IOS/watch app I’m building. One thing that I’ve found particularly weird given the number of templates available is that you can’t overlay text over an image on the fly. You can do a lot of other layouts, but you can’t do that.

One potential reason I can see for this is ensuring text doesn’t overlap the edges of the artwork in the background and then bleed onto the actual watch background. With no inset padding control, there is no way to guarantee this won’t occur and if I was Apple, the one place I don’t want the Watch software  to look broken EVER is on the actual watch face.

So how do Apple achieve something like the moon phase complication?

Seems if Apple are using the same templates as us they must be using something like CLKComplicationTemplateModularSmallSimpleImage and then based on moon phase data they are matching the phase to a particular pre-built image set and showing that on the complication. So they have ~28 moon images waiting on the Watch and pull from the right one on the refresh. This works great for something with a limited number of steps however creating a thermostat complication you would need an image for each potential temperature.

So whilst achievable it’s a lot of images to transfer across at app install time. Just considering celcius I’d want to capture 0°-30° positive temperature and down to -10°  on the minus side. So 40 individually created images to set and test if we are just using this technique with CLKComplicationTemplateModularSmallSimpleImage at 42mm. Of course if you were to use this technique for other complication templates you’d have the same again and then you have the sizes for the 38mm which are technically 4px smaller. Apple prefers correctly sized images to limit performance hits from resizing images.

Thank god I don’t consider fahrenheit a real measure of temperature otherwise you are looking at double that amount again!

Time is precious, what to do?

There is obviously a time implication here in terms of set up and build, but it just doesn’t feel robust. Like, Apple probably should have a CLKComplicationTemplateModularSmallComplexImage template available at WWDC 2016 so a lot of time would be wasted here implementing all these images. Especially if another template is a few months away and one of the existing templates can plug a gap (if not fitting YOUR vision)

I will say it is bloody weird that one of the templates doesn’t allow for text directly over an image. Roll on WatchOS 3?

*Update 28/01/16 Barbecuesteve in the comments of this post on Big Nerd Ranch suggests that this could be created using core Image to comp the images together as and when required but advises their may be a performance hit

Do try and catch my errors in Swift 2

This is bugging me, I keep forgetting it, I’m noting it down.

Swift 2 has changed error handling, just as I was wrapping my head around error handling in Swift 1. Typicals.

The easiest thing to do is wherever you see a method which ends with error e.g.:

audioRecorder = AVAudioRecorder(URL: soundFileURL, settings: recordSettings as [NSObject : AnyObject], error: &error)

This will kick in an error from the debugger. Bugger. Solve it by wrapping the method in a do block and catch the error after the block so the above becomes:

audioRecorder = try AVAudioRecorder(URL: soundFileURL, settings: recordSettings as [NSObject : AnyObject])
} catch let error as NSError {
  print("Error: \(error.domain)")

This StackOverflow answer set me straight on my errors with error handling and allowed me to retain a greater amount of my hair in the process . As always, praise be to the digital gods for StackOverflow.

Sandwich emails

Every week I amuse myself by conversion testing the weekly sandwich email at work using the very un-scientific method of testing whatever.

A few insights I have gleaned over time:

  • Short emails with just the words “order now” work less well than an email with a joke in there.
  • Emails sent closer to lunch (either side) convert less than emails sent at 4pm when everyone is feeling hungry again.
  • Telling people they are going to die from eating red meat or talking about the horrible deaths of animals has no effect on conversions.
  • emails tied to events like staff parties or worldwide events such as the world cup convert better than those that are not.
  • Subject lines make little difference unless you completely obscure the fact that this is the weekly sandwich email then conversion drops
  • More people like bacon than sausage. Not an innuendo, just a fact.

This week was my magnum opus, I went full-on Woot-style with a bit of long form copy. I’d be a fool to try and top this and so I won’t, I’m running out of ideas anyways:

As some of you may be aware, young Arron suffered a terrible injury to his leg on Tuesday when Mickey proper booted his legs in during some sort of organised ball kicking game.

Being a great friend I went to LGI last night to visit him. As I got there he’d just woken from surgery, flanked as he was by his girlfriend, doctors & porters. I could hear the kerfuffle from down the hall.
“what’s going on?” I asked as I approached
“We had to take the leg” the Doctor told me
“You had to take the leg?”
“We had to take the leg”, the doctor repeated “This poor lad had a severe deficiency of essential nutrients, it looks like he hadn’t been eating enough red meats which provide the necessary proteins and amino acids the body needs to rebuild itself after a trauma like this”
“Christ” I said as I sat down “so, if he’d eaten more bacon sandwiches he’d still have both legs?”
“Exactly” he said, shaking his head “it’s an all too common story, but it never gets the press so no one knows about it”
“I understand” I said, sadness tinged my voice, “but why have you left the amputated leg beside him? Bit cruel innit?”
“New government policy I’m afraid: hate the poor, torture the sick. Bloody tory government”
I’d stopped listening, to cheer Arron up I’d picked up the leg and started swinging it around the room, making lightsaber noises as it swung.
Vaaaaaawom, Vaaaaaawom
Arron started to cry. “Why didn’t I just order more bacon sandwiches on Thursday?”
Vaaaaawom, Vaaaaawom
“Dunno” I said, “the choice was there. The impetuousness of youth I suppose”
Vaaaaawom, Vaaaaawom. His cries got louder, dunno why, maybe it was the pain.
“At least you’ve still got Syd” I said as I gestured over to his girlfriend. She was leaving with a young porter who was proudly still sporting a symmetrical set of limbs.
“Do you think it will grow back?” he asked me.
I put the leg down. The doctor and I just looked at each other. Who would break his little heart this time?
Dear reader (you’re still reading this? Do some work!), I think the moral of the story is fairly unambiguous here. Can you imagine yourself, lying there, knowing you didn’t order that bacon sandwich? Knowing if you had ordered a bacon sandwich everything would be perfect, everything would be okay and you’d be a little more healthy than you were on a Thursday?
Arron asked me to share this story with you so you don’t make the same mistake he did: order your hot sandwich now. In memory of Arron if nothing else.
Order now!!!!!!


Centrally aligned text and readability

Because it’s bugging me:
Centrally aligned text shouldn’t be used for paragraphs, it’s a trend and because it looks better atheistically and is easier for responsive sites people are using it way too much, industry-wide.

The science of why you shouldn’t use so much centrally aligned text, by cleverer people than me:

When should you use centrally aligned text? When the text you are setting is 2-3 lines in length, then it’s usually about as readable as justified text or produces about as much fatigue. Anymore than that and I would forget about using it. If you are setting that much text centrally, consider whether you need that text at all or whether that’s something that you can shake out of the design because no one is going to read it.
This acceptable use rule also comes with a big BUT, if you are designing a responsive site and it sets perfectly at 2-3 lines at desktop when that scales to mobile you will suddenly have 8-12 lines of copy, centrally aligned again. What to do? What to do? For me, left align at mobile level and centrally align when the line numbers are suitable again.

An example of centrally aligned text being dog shit?

Sure, coming from a place that should know better. Saw the centrally aligned version on the Apple Store app, the left aligned version is from the web version. See how much easier that is to read left aligned?
example of longform centrally aligned text handled badly
Also line length and leading/line-height of the set text will play a part in general readability here but not as much as that consistent starting position for the eye to read from.

Responsible use of responsive centrally aligned text

The big issue with using centrally aligned text is when displayed on a mobile device. The designer will have set this copy at desktop (probably using a line length that is too long again if they are using bootstrap) and then done the same thing when designing for mobile. Designers don’t consider that users tend to see the copy in isolation and tend to design for consistency.
However responsive design is about creating experiences optimised for the device users are using, there is nothing wrong with setting text as left-aligned for mobile devices and setting centrally for a desktop device. Your users will thank you for it!

Interesting statement by IAB – “We messed up”

Give it a read through when you get chance.
Their solution to the ad-blocking storm in a teacup* post release of iOS9 sounds like they want to move to a solution similar to ad network The Deck. I approve. Users would too if most of them had any conception of what was going on behind the scenes. Marketing on the web is just gross.
*saying that, I do now use an adblocker on iOS. The difference in page load time is ridiculous, especially on The Verge, but then again, I’ve pretty much given up on The Verge, the reporting has become sub-Gizmodo standard and reading through Nilay Patel’s screed on why the mobile web sucks followed by his crying about ad blockers being used on the site was pretty much sealed the deal. I hate it when good sites go bad.

Terminal commands I always forget

This ongoing list is more for me so I don’t have to keep searching for these, but if someone else ever finds this useful then I’ll feel like I did a little bit of good in the world for 5 minutes. Then I’ll go back to being my usual hideous self.

If you are new to terminal then the asterisks surrounding text should also be deleted when changing to your value

Regenerate ssh keys for when I get the REMOTE HOST IDENTIFICATION HAS CHANGED warning

ssh-keygen -R *hostname e.g.*

Remove a directory and all it’s siblings

sudo rm -r *folderName e.g. ~/folder or ~/"folder with spaces"*

Copy an image to an SD card

It’s easier just to link to this as it’s long, check on the raspberry pi site