Why I am a UX developer

So recently there was a debate about the title UX Development, following on from a blog post by Leisa Reichelt and a response by Andy Budd. A lot of good points raised on both posts as well as in subsequent comments and tweets. I can see validity on both sides of the argument so I am not here to argue so much with either side, but simply talk about why I felt the title UX Developer suited what I do.

A little history about myself

I started working in this industry in 1999, learnt HTML/CSS and managed the design, build and evolution of a commercial site for a publisher for eight years. I also designed and built my own site as well as others on a freelance basis (such as this one in 2001, apologies for the font, not my choice, I was young. Oh and the code, ouch). I didn’t even realise I was properly a front-end developer until I started looking for a new job nearly four years ago, ofcourse I had heard the title, just didn’t realise that’s what I did. Up to this point I didn’t give much thought to titles, as I mostly worked on one site and was effectively a one-man web team.

I did indeed then become a front-end developer proper, along with some design as well. I sat in the design team and for a while I simply cut code directly from PSDs (either ones I had designed or from others’ PSDs). A little while after I started, we in the design team embarked on a journey into user-centered/user-experience design. Not because it was the cool new thing but because it made a lot of sense with designers getting more involved in the process of understanding the need, context, users and problems and creating a solution rather than just colouring in wireframes. It was a big push and took a lot of effort by my colleagues in the team.

I have always been interested in audience/user motivations and behaviours, wether it was from my art school days from the perspective of the audience reaction to my work or later as I gobbled up the writings of Alan Cooper in About Face. Involving users in the process of defining products was no brainer for me and I used some of the techniques from About Face (particularly user interviews) in the mid 2000s. In addition I read alot about the theory of perception (a top influence was Edmund Wright – Language, Perception Language and Faith) and how important it is to understand intentional perspective.

So in essence this was not something I thought I needed to get into because it (‘UX’) was what all the cool kids were doing but a natural and obvious reflection of my personal beliefs and interests (as well as a clear need for it within our professional approach).

A journey into UX

So as my company and design team colleagues started to get more involved with user research / user testing / wireframing / user journeys and the like, I wanted to get involved as well and not just be the guy that turns coloured pixels into css. I wanted to be more involved with the decisions about how the product/service/application comes to life and felt I had something to offer in this respect. So after dipping my toes in a couple of workshops and toying around with wireframes and sketching I went to UXLX in 2010, found much of what was said made a lot of sense and realised I actually did some of this naturally in my work. I read lots, learnt from colleagues, made massive mistakes and had some successes. I got more involved in the initial discovery phase through stakeholder research and end-user workshops, utilising techniques such as those written about in Gamestorming. I enjoyed it massively and found the experience really fulfilling.

Developing experiences

When it came to me actually developing sites UX massively influenced my approach. If time was an issue for users, I would reduce the number of clicks required to get to a service. If the need was to quickly browse a complex set of information I would architect a complex hierarchical taxonomy and content types to enable the user to tailor navigation of the site to their needs. If mobile access was a need I would ensure responsive design was a part of the build. It often was small details like ensuring the button in the header was just a few pixels bigger to ensure that users can actually click it without overshooting with their mouse. Increasingly I am using advanced CSS3 and HTML5 techniques that wouldn’t necessarily be represented on a sketch, wireframe or PSD. It might even just be a simple CSS property or HTML attribute:

1
2
a.button:hover {cursor:pointer;}
img src="image.png" alt="Assisting the user"

Whatever the need, I like to think these methods enhance the user experience and in some cases are essential, for example image attributes for where the user is visually impaired or responsive design for mobile usage.

In addition I do quite a bit of WordPress development, If I install a bunch of plugins that means the load time of the site is 5 seconds, does that affect the user experience? I think so. We might do the perfect discovery and design phase, but if the do phase ends up meaning the user has to wait 5 seconds for a page to load all that previous good work can be invalidated.

So what we do in the development phase is essential as a part of the UX gestalt, infact bringing development into the discovery phase early on can ensure we make technical decisions and start the solution early, more informed and ensure the end result is likely to align with the original needs and expectations. Sometimes it’s simply advisory, ‘is feature x viable?’, other times it’s essential to be involved in the early phases and workshops to properly realise user needs. Even if it’s to ensure the vision is carried through the implementation phase and not diluted by technical limitations or extended throughout an application where wireframes don’t go (404 pages, user notifications, admin systems). As was mentioned in the comments on Andy Budd’s piece ‘long after a user-experience designer has left the project’. Maybe people that ‘dabble’ in UX as developers might just ensure the end solution matches the initial need more directly that if we try and separate out the roles too much. Maybe we don’t need to reflect that in their titles, but certainly we need to reflect that UX is not the domain of designers only.

So, finally…

So that’s what I think, maybe there aren’t many of us that run workshops, perform user research & testing as well as building websites. So maybe ‘UX developer’ is a niche term or clunky combination of skills, or yes, yet another UX title to add to the growing hoard:

But for me, I wanted to ensure my title reflected the fact I do both. Other titles I considered put me too firmly in one camp – designer (or UX) or developer, leading to perception that I either don’t understand UX or Development. I want to span them both as in my experience this often produces the best outcomes when any technical implementation is required in a project (esp. as the scale of the project increases).

If anything I intend to take this role’s definition further, utilising UX principles further into development (consider an activity stream algorithm that considers more user context and need?) as well as consultancy (devising training programs for users or informing strategic thinking?). I am a strong believer in cross-team collaboration and see my role as being able to further encourage that through the lens of UX.

When I started out in this industry we pretty much just had web designer and web master, neither of those reflected what I did then, not many do now. But ‘UX Developer’ is the closest thing to what I do, so I am going to stick with it for now.

I love animated gifs – boom

Click to see the animated gif, as I made it a bit large to display right here – 32mb – ooops

Boom

Especially now I know you can create them via the command line and ffmpeg.

ffmpeg -i file.mov -pix_fmt rgb24 -s qcif -loop_output 0 animated_gif_ftw.gif

¡Viva la Revolución!

How To Build a Modern Website in 2011

Simply brilliant article on some of the emerging concepts, techniques and philosophies that have hit us through-out 2011 in the world of web design/development. It’s been a truely epic, transformative year, it’s really exciting to see the development of responsive design, mobile first, web typography, HTML5, CSS3, solid web design principles that are enabling us to build the next generation of websites. It feels like industry has reached maturity and now we are ready to fly.

Prepping for 2012

So think this is the third new design for this site in 2011. Which is 3 times the numer of posts for 2011 so far…truth is twitter, facebook and increasingly instagram and foursquare keep me entertained yet allow me to communicate effectively with my networks.

However a constant itch I feel the need to scratch is the wider narritive. Twitter, facebook et. al. are great, but they tend to be short format, quick thoughts or feelings, a snapshot if you will. I always liked this space for a bit more indepth thinking and musing on subjects du jour.

So I’ve said it loads of times but yet again, as I appraoch 8 years of running this thing it’s time to try again. I think I have a fair amount to say and would like to give it another crack. Blogs may be somewhat 2002 now but hey, I always enjoyed blogging so even if I am madly writing away to myself I would like to give it another crack. Maybe not so much pressure to blog frequently, but about once / twice a month seems fair.

As part of preparing this post I thought I would dive into some old themes and get some snapshots of this blog through the ages….going from 2004 by year. Seemed like a nice way to review what I have done over the last 8 years and was pretty fun activating the old themes and seeing what broke. Surprisingly apart from some legacy plugin code most of them worked even the theme built for WordPress 1.2! Now I am on the shiney 3.3. WordPress has come such a long way, such a great platform to develop and write on. Although the less said about some of the markup I chose to use the better .

Why Labour lost

Great quote from Andrew Rawnsley on why Labour lost:

New Labour was too insolent about civil liberties, too cringeing to high finance, too tolerant of sleaze, insufficiently dynamic about public services and too crabbed about welfare and constitutional reform

Cultural change is free

One of the best critiques for the modern phenomenon of target driven system design, where outsourcing, rationalisation, target driven methods, standarisation lead not to the intended outcome of increased efficiency and lower costs, by higher costs, demoralisation and customer disatisfaction.

The main guy, John Seddon is a brilliant, thought provoking and eloquent speaker that manages to make you laugh, cry and shout in agreement.

Some choice quotes / themes from the presentation.

* Gaming the system – if you set points targets etc, people like to maximise points and will do so at the expense of finding the best solution to just finding the easiest solution to score the point

* Your workers are the system make them improve it

* Management changes from adversarial role to co-operative working on the system with the worker

* Understand where the demand is, understand differences and reasons

* You can’t to the wrong thing right

* By imposing arbitrary targets into system you create a purpose – hitting targets, you also constrain method

* Three things every manager needs to know about targets:
1. Always makes performance worse
2. No reliable method for setting a target (i.e. last year + 10%)
3. Real measures derived from the workers, workers doing to work you receive benefits you would never dream of setting as a target

* Have you ever seen a 5 year plan that says we will get worse

* We never re-visit plans to see if we were right

* The only plan is ‘get knowledge’

* The only work is what the customer wants to pull, everything else is waste

* Change is emergent

* Change starts by studying the current system » study demand until you can predict demand going forward » you take your value demands (the things you know you are going to get a lot of) » follow them (the value demands) through the flow » see where they go » keep following the demands

* One-size fits all – enormous forms – feeding the machine

New box model army

I love the Observer magazine’s new layout design, particularly the use of mixed fonts and bold header styles.

It got me thinking web design and how new techniques such as CSS3, HTML5, jQuery and Typekit (or more generically type replacement techniques) are allowing for much richer designs and interfaces to be applied easier and more semantically. This is a very good thing, sure with a combination of markup, classic javascript and background images (sprites) we can get pretty complex designs applied, yet it always felt slightly ‘wrong’. Having to create 4 nested divs and negative margins to create a scalable, rounded corner box just felt icky and too heavy to feel proud of actually constructing something out of divs and gifs.

Also fonts, sigh, having to deal with 4 or 5 fucking fonts for a decade is really frustrating, sure we can use images, flash placement etc etc, yet again having to pad my code with so much stuff just to get a font outside, Verdana, Helvetica and Arial (and a few others plus a few sans-serif fonts Georgia, Times et. al.) again seemed like a large overhead and had too many disadvantages (flash issues, slightly non-accessible) to be used unless really necessary (brand guidelines, client preference).

Anyway that’s part of the history and frustration, but then the future started to push through. CSS3, HTML5 and font replacement has been tantalisingly close for what seems like ages. For me the need to carry on supporting IE and it’s backwards and verging on the offensive support from emerging standards has kept front-end development frozen in time, attempting to create increasingly complex and exotic work arounds to achieve new methods for building new web designs (that are not restricted by standards only imagination). Yet there seems to have been a change in heart over the last six months, maybe it’s a tiring of support for a browser that refuses to embrace modern standards, maybe a need (user) or desire (advanced interfaces) to use modern techniques to take the web to the next level and be damned the browser that refuses to grow-up.

Certainly my feelings have changed, where once I felt all users deserve an equal experience (functionality and form), I now feel that if a user chooses to use a browser that doesn’t support modern technologies then why should they expect them (one wouldn’t expect ABS brakes or power steering in an antique car). Ofcourse some people do not have the choice to move away from Internet Explorer, and I do sympathise with those users, yet again, that should not mean we shouldn’t experiment or push the boundaries, I don’t want to be 40 before I can use native rounded corners in CSS. Obviously this is not an approach I take to client sites or important functionality. I believe in the Aggressive Graceful Degradation model where the site is still accessible, readable and usable, but if Internet Explorer users don’t get rounded corners on a form button then will I or they lose sleep at night, well probably not. Hey maybe the proliferation of these more advanced sites will encourage Microsoft, Organisations and Users to upgrade or move away to something more suitable to the 20th century (low-shot I know – but hey)

So people with modern browsers get the treats, like people with modern televisions, computers, mobile phones, and cars get the treats of modern technology. We wouldn’t expect to be able to get HD on a CRT monitor, so why should all users get the same interface?

Also for my own personal development it’s important I keep up with new emerging standards, If I stand by and await for Redmond to grace the web with a decent browser then it’ll be too late for me to catch-up with people that have decided to launch fully into the HTML5 and CSS3 world, especially those which have been brought up on Firefox and Safari (launched 6 years and 7 years ago respectively).

All of this is a very long way of saying I am looking at new techniques and methods to deliver richer designs in html and css. Anyway back to the beginning of the article, the Observer Magazine redux and how much I liked it and how it could be done in native HTML/CSS with more advanced techniques. So I thought I would give it a try, by using typekit to deliver the fonts and CSS to get the rounded corners. First the original (examples from The Magculture blog)

Observer magazine

So thinking I might be able to take care of the circle via -border-radius declaration, with a border radius of half the width and height of the block element in question. But then using a mixture of absolute positioning, margin, padding, z-index and background-image for the border (I had trouble with the simple border declaration and the stack order of the various elements). The benefits of this approach is it’s really easy to change the background colour of the circle element and ofcourse the text as style is set by css not markup or images.

All in all it’s just simply lovely to be able to see a technique in another medium not restricted by technological standards and replicate it in a nice clean(ish) way in CSS3/xHTML/TypeKit – the future is starting to look really quite exciting and I haven’t even really touched on HTML5 yet 🙂

So here is a screen-grab of the header:

Observer magazine - CSS and HTML

And the mark-up (click here to view the demo on a standalone page):

Food & Drink
pie chart - mmmm pie

Heading: The detail

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Something Something

And the CSS:

	/*section colors*/
	#magazine-header span.orange {background-color:#dc8100;}
	#magazine-header span.red {background-color:#e00000;}
	#magazine-header span.pink {background-color:#d800a3;}
    
	/*magazine style header*/
	#magazine-header {
		position:relative;
		width:100%;
		background:transparent url(bg.gif) 0 bottom repeat-x;
		height:120px; 
    	overflow:hidden;
	}
	#magazine-header span.caption {
	    text-align:center;  
		color:#fff;
		display: block;
		width: 120px;
		height: 120px;
		-moz-border-radius: 60px;
		-webkit-border-radius: 60px;   
		position:absolute;
		bottom:-15px; 
		right:20px;
		z-index:100; 
		}
	#magazine-header span.caption em {
		display:block;
		padding:40px 25px 0; 
		font-family: "bello-pro-1","bello-pro-2",sans-serif;    
		line-height:20px;
		font-size:20px; 
	} 
	#magazine-header div.excerpt {
		width:auto; 
		display:block;  
		position:absolute;
		bottom:20px;
		margin:0 350px 0 100px;
	}
	#magazine-header div.excerpt h2 {
	   font-size:14px; 
	   font-weight:bold;
	   margin:0;
	   text-transform:uppercase;
	   font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
	   margin:0 185px 0 0;
	}  
	#magazine-header div.excerpt p {
	  font-size:12px;
	  line-height:14px; 
	  padding:0;  
	  margin:0 185px 0 0;
	}
	#magazine-header h6.meta {
		color:#fff;
		position:absolute;                                             
		bottom:0;         
		right:135px;
		line:height:1em;
		font-size:10px;
		margin:0;
		font-family: "bello-pro-1","bello-pro-2",sans-serif;
	} 
	#magazine-header h6.meta span 
	{
		color:#fff;
		font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
	} 

I’m back!

And on a shiney new server! Thanks @shanemarsden for getting all the apache and php stuff sorted on our box so I can install lovely wordpress.

It’s been over six years since I started here and at another junction where I try and work out what the purpose of this website is, but seeing as I change my mind all the time and the interwebs changes likewise, I guess it;s going to be that way for ever.

But as it’s election time I guess there may be the old politics post 😉