Finally found some time to self-host ScaryEvilComputer.com and create a new theme. The new one is pretty clean and simple. And it’s based on Twitter’s Bootstrap so is fully responsive to the size of the browser / device, which is neat.

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:

Links:

Interface Design

Books:

  • Web Form Design - Luke Wroblewski
  • 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:

Tools:
  • Photoshop

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:

London meet-up groups:

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.
Blogs / Twitter:

Rich Interface Development Patterns

HCI Theory

Some more advanced concepts for those that are keen.

Books / Papers:

Conferences

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.

felt 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.

Golf course artwork

Sunset artwork

Big Ben artwork

Below are the reference pieces if you’re interested.

golf ref

beach ref

ben ref

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.