It’s been a while since I first heard of UX Design and started my quest to learn everything I could about it. This is my guide for those who are interested in following a similar path.

I’m a London-based developer, so the below is especially useful for those from a similar background, although it’s pretty general and hopefully useful for anyone interested in the field of UX Design.

Introduction

User Experience (UX) Design is about designing digital products and services that enhance or extend the way people interact with technology in their everyday and working lives. It’s about making interactive products work harder to make our lives easier. About designing to help people complete their tasks and achieve their goals. And about making software easy to learn, and efficient and enjoyable to use.

“It’s not just what it looks like and feels like. Design is how it works.” - Steve Jobs

Whether it’s a household product, a piece of software, or a fashion item, all products evoke some sort of user experience, and so the name UX Design is frowned upon by many in the industry (including myself) for theft of a common term. Another term for UX Design is Interaction Design.

A large part of UX Design is about understanding the needs and characteristics of the target user group. This target group could range from inexperienced computer users, through to web savvy consumers, office workers or highly skilled and specialised users such as forex traders. Even developers! So the UX Design process features user involvement throughout the design process, which itself is research-based and iterative with evaluation findings feeding back into the design process.

Why is any of this important? Well, badly designed software interfaces can have serious consequences on a company’s commercial success, on staff productivity and on general welfare / happiness. Well designed interfaces can have the opposite effect, giving a competitive advantage in the market. To the client, it’s often the case that the interface “is” the product and the overall quality of the deliverable will be largely judged based on the interface.

Background

Books:

• Don’t make me think - Steve Krug
  • If you only have time to read one book about UX Design, read this practical book. It features as one of Jeff Atwood’s top five recommended texts for all developers on codinghorror.
• The Design of Everyday Things - Don Norman
  • A great introduction to some of the problems that Design tries to address in general, as well as psychological insight into how people think.
• The Inmates are Running the Asylum- Alan Cooper
  • This book discusses the main problems with how software is being produced.

Links:

• Complete beginner’s guide to Interaction Design
• Jakob Nielsen’s 10 usability heuristics
• 10 common misconceptions about UX Design

Interface Design

Books:

• Web Form Design - Luke Wroblewski
  • Or watch this 90 minute presentation on the web.
• Designing Web Interfaces - Bill Scott & Theresa Neil
  • This book covers modern methods for structuring slick web 2.0 style interfaces, covering a range of user interface widgets, controls and design patterns.
• A Practical Guide to Designing for the Web - Mark Boulton
  • UX Design is not just about how it looks, it’s about how it works. Visual Design makes up the “how it looks” portion of that statement and this book is mostly about Visual Design. However, learning UX Design does not require that you become an inspiring artist, and you don’t have to learn any Visual Design at all if you don’t want to. But learning the basics of Photoshop, layout, typography and colour theory will be useful.

Blogs / Twitter:

• smashing magazine
• .net magazine
• nettuts
• csstricks

Interaction Design Theory

Everything up until now will have given you a good grounding in practical interface design. But UX Design is based on more than common sense design principles and from this point onwards things get more interesting as we explore underlying theories.

Studying Interaction Design to a more detailed level will help you understand the theory behind determining the optimal approach to take when designing an interface. Interaction Design involves understanding how people think and behave, from the cognitive processes that help us learn and memorise, to the psychology behind emotions.

Interaction Design is a multidisciplinary topic, based on HCI (Human-Computer Interaction), computer science, ergonomics, psychology, informatics, various types of design and engineering.

Books:

• Interaction Design - Preece, Rogers and Sharp
  • This is the Interaction Design Bible, giving a great detailed account of the subject. It is an academic textbook aimed at undergraduates and features exercises throughout that are well worth doing.
  • The Open University run a 10-month part-time course that is based entirely around this book. Stanford University were also set to offer a free online course in HCI, although this seems to be on hold for the moment.
• About Face 3- Alan Cooper
  • A practical, process driven approach to carrying out Interaction Design, backed by a healthy amount of interesting theory.

Blogs / Twitter:

• Johnny Holland Magazine
• UX Booth
• User Interface Engineering (UIE)
• UX Magazine

London meet-up groups:

• UX Book Club
• London IA

Broader Topics

Books:

• Mobile Design - Brian Fling
  • Designing for mobiles and tablets brings a whole load of new challenges to the table.
• Information Architecture - Peter Morville
  • Information architecture is about the findability of content, and covers topics such as how to design search functionality and navigation, as well as how to display results for fast access and manipulation.
• Universal principles of design - Lidwell, Holden & Butler
  • A great book on general design principles.
• Designing for the social web - Joshua Porter
  • Covers some interesting social design patterns.

• What makes them click
• Paul Irish
• Addy Osmani

Rich Interface Development Patterns

• Asynchronous UI’s
• Single page applications
• JavaScript design patterns

HCI Theory

Some more advanced concepts for those that are keen.

Books / Papers:

• HCI Models, Theories and Frameworks - John Carroll
• Human Computer Interaction - Alan Dix
• Usability of programming languages
• Innovative user interfaces

Conferences

• UX London
• IA Summit

Here’s a video of a bungee jump I did back in 2002 while I was on holiday with friends in Spain. I “digitised” it by playing a VHS onto an LED flatscreen TV and videoing it on an iPhone.

A couple of weeks ago I went to see the David Hockney exhibition at the Royal Academy here in London. Hockney’s recent work is based on landscapes in East Yorkshire and the exhibition also included pieces that he has been famously creating digitally using an iPad.

You can click below to see a collection of these pieces, courtesy of Google Images.

Some of the works were ingenious and I thought one of the most striking aspects of Hockney’s work was his use of colour, with pieces almost looking like they’d been created in felt-tip pens.

This gave me an idea. And below are a few pieces that I’ve produced in felt-tip pens from a fairly random collection of images.

Below are the reference pieces if you’re interested.

January 23rd is statistically the most depressing day of the year apparently, so at work we decided to hold a stand-up comedy night at a local pub. I was the second act, and here are some highlights. Poor Chris didn’t know what was coming.

It’s 2012! And it’s a great time to be a web interface developer.

We’ve seen a lot of new changes on the web in the last year or two, so here’s a quick overview of some of the highlights and some examples from the best of the web.

There are a lot of links. Thankfully, they’re all good.

Browsers

In the last few days we saw usage of IE6 finally drop below 1% in the United States! USA! USA! USA!

And it’s not doing so bad here in London either. Must do better, China, still 25.2%.

IE9 is Microsoft’s best ever browser, and IE10 promises to be even better. The young ‘uns will never know the sacrifices we had to make during the web’s dark ages just so they could see these times…

And browsers are becoming much faster. Not just fast to start up, but with hardware accelerated JavaScript engines and graphics card rendering, some of the examples below will really show off what browsers can do.

HTML5

Twenty great HTML5 sites and the one below is a favourite.

HTML5 along with all its associated JavaScript APIs means that along with a few additional HTML elements to add greater semantic meaning to web pages there are cool additions like geolocation, offline storage (more than just a bit-sized cookie), web workers for running background JavaScript threads, and web sockets, which are like having Push turned on for your browser so that it can receive data without necessarily having to request it.

The HTML5 Boilerplate is a great starting point for any project, featuring lots of useful things you’ll need. Even if you don’t use it, check it out and use bits from it. There’s also a Mobile Boilerplate.

CSS3

Twenty CSS sites that rocked… especially this one.

Remember when if you wanted rounded corners for your website you had to fiddle and eff around jigsawing multiple image pieces together for a simple button? Well you don’t have to do that anymore. And along with rounded corners, CSS3 features goodies like dropshadow, gradients and transparency. This all means fewer images to have to load. And CSS3 also allows embedding of fonts.

There are already great examples of what is possible with new CSS transitions.

But it has to be said. CSS is hard. Oh it’s easy to learn but hard to do well. HTML is easy, especially if you’re good at CSS. Mastering CSS allows you to keep your HTML mark-up super clean and not pollute it with div tags, br tags and clearfixes. CSS pseudo elements and display types can take care of all of that for you.

But how do you keep CSS clean? CSS becomes especially hard as sites grow large and complex. New ideas are emerging that suggest current best practices are wrong. Object oriented CSS is a new way of thinking about how to structure CSS, as is SMACSS.

And even with CSS3, CSS is far from perfect. CSS still leaves a lot to be desired, made obvious from the popularity of CSS preprocessors like LESS and SASS which allow use of variables and mix-ins. There’s also a whole host of grid systems out there if you’re making something griddish!

Beautiful Websites

There are some great examples of full background websites out there.

And techniques for creating full height app layouts where headers and footers are always visible in fixed positions at the top and bottom of the page are becoming increasingly popular too.

In part this is all down to great advances in JavaScript with libraries like jQuery becoming almost the de facto standard for client-side development along with emerging frameworks like KnockoutJS and SpineJS for commercial application development.

Some neat ideas have developed on asynchronous web interfaces that provide an extremely fast and seamless user experience.

But websites are becoming bloated. The average size has increased by 25% in the last year alone and this is mainly due to JavaScript and CSS. There are a lot of things that can help in this area, from use of CSS sprites to use of web workers for delayed loading. But this trend is only going to continue and website performance tuning will become increasingly important.

Animation

The arrival of the HTML canvas element has brought with it a whole host of technologies like three.js and WebGL, which make it possible to build things like this (viewed best in Google Chrome):

and this

Does this mean the end for Flash? Only time will tell.

Twenty awesome 3D sites.

Mobiles and Tablets

Do you hold your mobile up to your ear with two hands? This lady does.

The trend for developing a single app in multiple native languages for iOS, Android, Windows, Blackberry, Nokia etc… will it continue? HTML5 mobile development is getting better all the time.

And instead of building apps for multiple platforms, what about multiple screen sizes? That’s where CSS media queries and responsive web design come in.

That’s all folks

Let the good times roll. Things move fast, and if you don’t keep up, you could find yourself quickly out of date. Like flowery wallpaper.

Now if only browsers could build something in so that the entire internet wasn’t littered with social Like buttons.

Here are some videos of a couple of Introduction to UX talks I gave in December 2011.

The first video talks about Design Context and the importance of defining Usability and UX Goals when designing a digital product. It also describes what User Experience Design is, why it is important, and talks about the UX process – Establishing Requirements, Design, Prototyping and Evaluation.

The second video talks about Mental Models, Cognitive Processes, Design Principles and quickly touches on Web Form Design and Visual Design before summarising Good and Bad UX.

Just found this old cartoon I drew 8-9 years ago in Microsoft Paint. Well it makes me laugh anyway.

Last week I went along to UX Sketch Club here in London, hosted by Eva-Lotta Lamm, and we learned to make sketchnotes – a visual note taking technique. Some excellent examples of sketchnotes are those on the RSA website, including this one.

And you can see loads more examples here on flickr.

The next time you’re studying for an exam, you could try making some sketchnotes from your existing, conventional, written notes to help consolidate what you’ve learnt. Having said that, during the class we practised making sketchnotes in real-time while listening to a speaker, which is a little more difficult.

It’s hard trying to sketch fast enough to be able to keep up with what is being said, and either you end up missing chunks of the talk or you end up with scribbles. We all discovered that when you only have a few seconds to draw something, any natural drawing talent disappears out of the window and it’s a level playing field.

The talk we listened to in Sketch Club was this talk, though we only listened to the first 5 or so minutes of it. It’s called “When Ideas have Sex”…

Erm… Eva, you sure you want us to sketch the stuff we used to sketch into the back pages of our books in high school?

Luckily we were all true professionals… to an extent. And the talk is mostly about how evolution and mixing of genes has led to us becoming increasingly smart and creative in what we do.

I present some sketches for your amusement. If you watch some of the TED talk, maybe you can work out what the hell I’ve drawn here. Bear in mind each sketch took about 20 seconds. :-)

Things didn't turn out as bad as we were expecting after all.

Nothing happens when I try clicking my rock.

I dont think this needs a caption.

And candles are so big...

Last week was quite a big week for User Experience Design in London, as designers flew in from all over the world to attend the three-day UX London event which featured a devastatingly good list of speakers.

Although I didn’t make it to UX London itself, I managed to get a spot for UX Bookclub London, which in April doesn’t usually involve reading a book much, it’s more an excuse to get together with some of the speakers from UX London to discuss all things UX.

I was lucky enough to meet the authors of many books that are lying on my shelf here, and shook hands with some of the pioneers of user centred design. It was a chance to pick their brains on a range of topics from the future of UX and our interaction with technology down to the small things that bug me at work each and every day. Like bugs.

A philosophy worth aspiring towards…

Saul Bass (May 8, 1920 – April 25, 1996)

There are a lot of messy desks in the world. But I’d guess that desks are becoming less messy these days, especially compared to the days when computers didn’t exist, paper was plentiful, and smoking at your office desk was the norm.

Are you thinking what I’m thinking?

Desks are nice and big though compared to the average computer screen, and it’s easy to push stuff out of the way for later and make space for what’s important now. Or if I want, I can lay stuff out easily if I need to look at lots of things at once.

Although computer screens are getting bigger, and we’re not too far away from having giant monitors that cover our desks, most of us still use screens that are only big enough to display one or two applications at a time.

But screen sizes aren’t just getting bigger. A lot of screens now fit in our pockets.

Tiny little Sheilas everywhere. In fact, mobile is so pervasive that even Google are advocating creating web applications for mobile first.

So how do we cater for such a wide range of screen sizes, from mobiles to tablets, laptops, desktops and even 50-inch HD TVs being used as monitors? Developing the same application multiple times, potentially in multiple programming languages is annoying and expensive.

Well a new CSS web page layout technique using media queries seems quite promising in making things easier. It allows developers to create pages that respond to changes in the width of the browser window, and is being termed responsive web design.

A good example of a site that uses media queries to full effect is http://css-tricks.com/. Try opening it and dragging to increase or decrease the width of the window. Notice how stuff appears and disappears based on the width.

If it’s not working for you and you’re using Internet Explorer then please don’t.

We, the people of Earth, at some point in the past thought it a good idea to adopt standardised paper sizes and it makes a lot of sense to have a range of standard screen sizes too. Measured in displacement units (in Europe, we’re keen on the metric system) rather than pixels, which vary in size from display to display.

But just because we happen to run an application on a screen of given size, it doesn’t mean that the application should assume it needs to use all of the space available to it. The reason I think a lot of people find mobile apps great is because of how simple and usable they are. With limited screen estate on mobile apps, and it being hard to type and fill forms in, functionality is stripped down until only the important and frequently used actions are available.

Why should mobile apps only run on mobiles? Applications should be designed to fit the available window space rather than the available screen space. I can think of many times while sat at my laptop when displaying 5-6 small windows all running mobile apps would have been less hassle than having a single maximised browser open with six tabs.

As screen sizes increase, applications simply won’t need to take up the full screen, and being able to resize and lay windows out will become very important.

And let’s face it, there’s a lot of room for improvement in this area.

Why, for example, would I opt for opening six tabs so that only one tab  is visible at a time and then proceed to  flick repeatedly between the tabs like some sort of madman?

Because we’re still using computers where users are forced to drag a window from its title bar to position it, and then move to the bottom right of the window to resize it. Oh and then move back up to the title bar to nudge it a bit more. And so on. Six times.

Praise the Lord that in Windows 7 it’s possible to resize windows from any corner. Not that I realised until I started writing this post.

And Windows 7 also has some neat features for resizing and positioning windows automatically e.g. fill half the screen or the entire screen by dragging to the side or top of the desktop. A very powerful feature and a real novelty. I’m a PC by trade, not a Mac, but I hear Apple have had similar functionality for years. Maybe Microsoft Googled for it.

Even then, these improvements are just the tip of the iceberg. Simple actions to move, resize and switch between applications should place minimum cognitive load on users and shouldn’t distract from completing the task at hand. You could say it should feel as easy as moving around paper on a desk…