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

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.

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.

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.

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. :-)

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.

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