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.
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.
- 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.
- Complete beginner’s guide to Interaction Design
- Jakob Nielsen’s 10 usability heuristics
- 10 common misconceptions about UX Design
- 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:
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.
- 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:
- 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.
Rich Interface Development Patterns
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
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.
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%.
Twenty great HTML5 sites and the one below is a favourite.
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.
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!
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.
Some neat ideas have developed on asynchronous web interfaces that provide an extremely fast and seamless user experience.
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):
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.