Martin Joiner's Blog

Confessions of a binge thinker
Posted on December 14, 2015

Security and accessibility both get lost in over-specialisation

While reading a short blog post by Alastair Campbell titled Security parallels I was struck with how much his observations felt connected to some of my own recent thinking.

Taking a UX point of view, Alastair demonstrated that the language used in reports and advice by security people are equally valid when re-framed as advice by accessibility people, suggesting the two schools of thought are both victims of the same failures in planning. This sounded remarkably familiar to my own recent observation that over-specialising roles in the delivery chain can cause things like security and accessibility (along with optimisation for speed) to become lost.

When I say "over-specialise" I do not mean professionals becoming too good at their specialism but instead becoming too not-good at everyone else's! When the designers start to focus only on making stuff look striking and the UX people start to focus only on convenience and conversions. When the back-end developers bury their head in code and front-end developers get punch-drunk on a whirlwind of new in-browser potential, the tasks of considering security and accessibility get done by no-one because they are the responsibility of everyone.

I think this bystander apathy effect is a product of out-dated and lazy job role definitions becoming comfort blankets that over-promise to the employer and exonerate the employee. With regard to caring about the important issues of security and accessibility, this factory production line model makes those on the team who are aware feel dis-empowered and those who don't care feel inconvenienced. The natural defensive response to the realisation that something's been missed is to hunker down even more and play the job title card in defense: "Oh I'm just a [insert any role] I don't know about security or accessibility". The inevitable outcome -- other than an inaccessible website with gaping security holes -- is a dysfunctional team that hemorrhages talent.

So the conclusion I draw from all this is that hybrid job roles might solve the problems of many people. Stop carving the delivery chain up into myopic specialists and let everyone learn everything. Schedule time for training and share knowledge with those outside your area of expertise. Re-analyse that old trope "Jack of all trades, master of none" and reassure yourself that we are all doing the same trade -- which is building great online products -- and mastering it will involve us learning many areas of design which are exactly that and not individual trades. More and more of the big wins in building the web are solvable by a holistic approach which will require less divergent minds and less specific job titles.

Filed under: The Web Tagged as: 1 Comment
Posted on December 11, 2015

I gave some objectivity to Matt

In response to my offer of free help, Matt from Bristol-based CPD for Teachers got in touch wanting a phone call with a fresh pair of eyes on his website. It was part usability testing, part expert evaluation and if you're someone who builds sites, I suggest you do the same for your local network.

Everyone involved in making a website spends every working day looking at the same interface for some period of time. In agencies this might be as short as a couple of weeks, for website owners it could be decades (literally, at comcar.co.uk our flagship product had been delivering the same service in roughly the same way since 2002). Whatever the time period, the unfortunate side-effect is that your power of objectivity gets permanently lost and with that goes your ability to spot obvious quick fixes to those little design problems that crept in during build. An external brain is all that's needed.

So what sort of things did my fresh eyes see that his couldn't? Things like a button appearing to be associated with a specific block of neighbouring content despite it not being. Just a re-alignment and a bit of whitespace will fix this confusion. Secondly, I found an enigmatically-worded yet serious-looking call to action a bit intimidating. I suggested a reassuring bit of microcopy below it would make me feel confident enough to press it. Finally, I spotted the wording on the same button that appeared across a few pages was inconsistent and made me think "Is there a difference between 'Add yourself' and 'Create profile'?". 

These observations took less than 30 minutes on the phone. I checked the call log, it was a 44 minute call and we spent at least 15 of those talking about Bitcoin. My point is, spotting those quick fixes gives him some low-hanging fruit to go after and the value of that -- in terms of re-kindling an expert's interest in the development process -- is huge. It was such an easy block of time for me to volunteer that if I was trying to deliver this as a paid service it would almost be embarrassing to invoice for it.

But what if such a service -- delivered in 30 minute blocks every few weeks -- could exist in our network on a casual labor-exchange basis? We all know a handful of trusted, skilled professionals through the tech socials we attend, but I suspect we also feel it would be taking the piss to phone them up during working hours and ask for a bit of perspective. But I reckon many of us wouldn't actually mind gifting 30 minutes here and there, providing we were not up against a looming deadline at the time or busy on a by-the-hour client booking.

Should we as a community make an effort to each clarify to our circle what our personal stance is on giving ad-hoc remote expert evaluations? Would you value the option of being able to call that person you chat to at that monthly meetup? Or would you begrudge the cost of the occasional interruption outside booked time? I would welcome your comments on this.

Filed under: The Web Tagged as: No Comments
Posted on December 9, 2015

I’m free… how can I help you?

I am on sabbatical for the next couple of months and I am giving away little blocks of my time to help a variety of people achieve whatever goal they are working toward. If you're near Bristol and could use a fresh pair of eyes on a problem then get in touch with me.

Spending a little time assisting others helps my own creativity. It's like reading 5 different books, filling my head with new thinking and letting those ideas have sex, eventually giving birth to new ones.

I do not mind if you want just a 1 hour chat (like Paul did), a whole day to demolish a concrete barn (like Richard has signed me up for) or 3 hours being the time-keeper for a white collar boxing match (like Simon needed). If my presence can be the catalyst for a little win then it's been beneficial for all I am grateful for the involvement.

So what skills have I got to offer you? Firstly, my skills in the tech industry: Website development, UX and design are all documented on my CV and my LinkedIn profile. I also have a talent for drawing and mural painting, click the "Art" link at the top to filter this blog or check out my Instagram profile. I can drive and I am handy with a set of tools so physical builds are all good. I have the gift of the gab: I am a confident public speaker and a good ice-breaker in group situations. But most importantly my creative mind has earned me a track record of problem solving in professional situations.

Get in touch, my email address is on my home page or invite me to an event via my Meetup profile.

Filed under: Life Tagged as: No Comments
Posted on September 10, 2015

Lightning talk at SWUX

Martin-Talking-at-SWUX

I recently had the honour of presenting a 10 minute talk during the September lightning talks for the South West User Experience group (SWUX for short). The Bristol event happened on a Tuesday evening and featured a total of 6 talented speakers.

I presented on the subject of displaying large tabulated data (think spreadsheets) on small mobile screens. The talk had a little technical how-to demo and followed an overriding theme of keeping your big juicy technical features available to your users when redesigning your desktop site to work at mobile level. In other words, avoid the lazy gut instinct to just chop them out and tell yourself that people don't do difficult jobs on phones.

The feedback was positive with 1 audience member thanking me for giving him the confidence to keep fighting the cause with his current team who don't share his vision. In the days following several Twitterers requested my slide deck and examples which can be found on codepen.io/martinjoiner

 

Filed under: The Web Tagged as: No Comments
Posted on August 29, 2015

HTML5 Autofocus attribute is sweet

Inspired by Steve Krug, I try to only use examples from websites that are generally very good, but could be improved in specific areas.

RightMove-Input-Roadblock

My preferred property search website — since Zoopla hid the View results on map feature god-knows-where — is RightMove (screenshot above). They have used a UX speed bump (not quite a roadblock) to make on-boarding a smooth and focused experience. Using contrasting size and a healthy dollop of whitespace, they draw the user's attention to 1 task and promote the main function of the site above all.

After landing on the homepage, all the user has to do is focus-in on the big input box by clicking (or tapping), enter some geographical keywords and finally hit the "For sale" or "To rent" button. I love this 3 step no-brainer process, great work RightMove!  But what if desktop users didn't even have to do the first click to set the text cursor flashing?

One of my favorite new HTML5 features is the autofocus attribute. It is an empty attribute which basically means it doesn't have to be something equals something (this="that"), it just has to exist as a single word on the tag as follows...

<form>
    <input type="text" autofocus>
</form>

If RightMove added the autofocus keyword to the big input box it would make it focused as soon as the page loads (at least on non-touch-screen devices). Furthermore, the non-intrusive animation of the flashing text cursor would be an enticing draw, subtly inviting the user to start typing and helping promote the theme. No functionality would be lost by adding this and backwards compatibility wouldn't be affected. It's win win!

We (web developers) regularly poke our heads through the HTML5 looking glass to experience a crazy whirlwind adventure of fantastical features. We spend an hour getting drunk on potential only to be violently spat back out into the cold lonely reality of backwards compatibility where HTML5 is not fully supported. But that doesn't mean we shouldn't start adding them as a form of progressive enhancement and earn some bonus brownie points for over-delivering!

Filed under: The Web Tagged as: No Comments
Posted on July 23, 2015

Preparations underway for Upfest ’15

Upfest-drill-540x303

Over 500 boards get setup by the volunteers for Upfest each year, ready to be painted. Right now, Bedminster has more battleship grey than the guts of a Ginsters pasty!

Filed under: Art Tagged as: No Comments
Posted on July 20, 2015

:invalid pseudo class works on form elements too!

Discovered this by accident and there seems to be very little coverage in the blogosphere so I thought I'd share.

You're adding HTML5 validation on your input boxes now, right? And you're using styling to give the user helpful visual feedback, yeah? But did you know that when an input box inside a form is invalid, the parent form also has the :invalid pseudo class? This means we can now style any elements that are a sibling of the invalid input, amazing!

Here's an example where we make the submit button look disabled when an input field is invalid...

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        input{
            padding: 0.6em;
	}        
        input[type=submit]{
            cursor: pointer;
        }
        form:invalid input[type=submit]{
            cursor: default;
            opacity: 0.5;
        }
        input[type=text]{
            border: 1px solid #666;
        }
        input[type=text]:invalid{
            border-color: red;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" name="username" pattern="[A-9a-z0-9 ]*" required>
        <input type="submit">
    </form>
</body>
</html>

The result is conventional and familiar visual feedback that suggests the form is being disabled/enabled....

FormInvalidBig

Obviously the button is not actually having it's disabled attribute changed, for that you would need some Javascript. But this is a pretty neat, low-level CSS option and remembering that the :invalid pseudo class operates at the parent form level might come in pretty handy.

Filed under: The Web Tagged as: No Comments
Posted on July 13, 2015

What is the skv prefix and when to use it

I came up with the skv prefix sometime during 2014 and it has been readily adopted by the team so I wanted to share it with you. Our team uses a rough approximation of Hungarian notation as our naming convention and adding skv was definitely our best mod to the popular standard.

skv stands for "Structure of Key-Pair Values" and is used for objects in Javascript, associative arrays in PHP and structs in ColdFusion that do not have any methods and can therefore be converted to a JSON string without losing anything. Distinctly different to objects (that we prefix with obj) which have methods which would be lost during serialisation/encoding to a string notation.

(Note: The skv prefix is not used for standard numeric arrays which are prefixed with arr)

Example time...

PHP (some server-side page that returns plain-text JSON)

<?php
// Set the content type for good practice
header('Content-Type: application/json');

// Create a variable with some information about a monkey
$skvMonkey = array(
    "strName" => "Martin",
    "numBananas" => 7
);

// This feels right! We're not destroying anything
echo json_encode( $skvMonkey, true );
?>

Javascript (in browser)

<script>
// AJAX call to PHP page returns object
var skvMonkey = ajaxCallToPHP();

// Hazaar! This variable has everything it did when it was server-side and I know it has no (non-native) methods because it is not prefixed with obj!
console.log( skvMonkey.strName );
</script>

We tend to pass a lot of complicated datasets back and forth between Javascript and server-side pages (or caches). Serialising these bundles of information as JSON allows us to strongly bind the variable name and the variable value, making our code more robust and quicker to debug. However, I was frustrated by the lack of distinction between an object that could be safely JSONified and those that could not.

Objects (or components) are like high-tech vending machines full of colourful sweets. Their methods are the coin-operated interfaces that instruct mechanical arms to pick out exactly the right chocolate bar, deliver it to the easily accessible letterbox and sort the remaining products. Pushing something as beautiful as that into a JSON converter feels like bribing a thug to smash the glass with his fist, tip all the sweets into a sack and burn the machine. Using the skv prefix is basically a green light to a developer to say "this is just a box of sweets, you can be rough with it, I've packed it really well".

Filed under: The Web Tagged as: No Comments
Posted on July 11, 2015

Mulshing boards in prep for Upfest ’15

Mulshing - [present tense version of verb: mulsh] - Colloquialism used among the urban paint fraternity to describe the process of preparing a surface for painting by making it a single colour, usually with the use of household emulsion paint.

 

 

wpid-wp-1436629797565.jpg

52 of the small 6x4 boards, still sporting the slightly ropey can skills of last year's kids section, laid out in the yard.

wpid-wp-1436630168761.jpg

Boom! More whitewashing than a political sex scandal!

Soka piece

Soka's excellent hipster Spiderman piece has had it's time in the limelight.

wpid-wp-1436630320173.jpg

Bosh! Gone, hidden behind a satisfying sea of grey.

The 93 boards that we did today takes us to a total of 400 meaning we only have about 150 left to do before the big day. I am just 1 in a whole team of volunteers, beavering away to make it happen, but we could always use an extra pair of hands if you are near Bristol and willing to lend an hour of your day.

Exactly 2 weeks 'til Upfest 2015!

Filed under: Art Tagged as: No Comments
Posted on July 10, 2015

Eco self-build somewhere near Bristol

Eco_House_FrontEco_House_Back

My long-term plan of self-building my very own eco home will take a lot of time and planning. Using Google Sketchup I have made some 3D renders of the kind of structure I want to build based on my personally preferred aesthetic and building methods. These basic renders are in no way finalised plans but more to serve as a jumping off point when holding discussions with the many experts who I will have to consult on my journey.

Filed under: Eco Tagged as: No Comments