Not just fail in a business sense, in the way that even the best design can fail if it’s the wrong idea in the wrong place or at the wrong time, but fail specifically because of poor design. Why? Why do these projects with such excellent foundations deliver such ‘meh’ designs?

I’ve made a few uneducated and ill-informed guesses, but first an example to illustrate what I’m talking about: The Microsoft Kin phones.

The Kin

The Kin is actually a pretty cute looking phone with some nifty features that famously burst onto the scene in a blaze of ghastly flash website marketing glory (http://www.kin.com/) then was canned two months afterwards. Two months! Two months after launch Microsoft announced there would be no new Kin models and no models at all available in Europe. A lot of design effort went into this phone. By all accounts the designers involved are a smart, talented group of people. They did a lot of research, they seemed to gain genuine customer insight, and they had a 1st rate design process. But apparently (bear in mind I live in Europe so have never actually seen a Kin outside of the internet, I’m only going by reviews here) the design was not a success. Even ignoring the commercial failure of the product (which it seems was for a multitude of reasons, design being only one of them) the design of the UI itself was roundly (though not universally) panned.

So what goes wrong with these projects? I’m guessing one or more of the following:

The Wrong Kind of Designer

User Experience is a broad field that includes a diverse range of talents. Not every user experience role requires design skills. Individuals who excel at things like research, strategic thinking and user testing might not necessarily need good design skills (although they usually have them). But the UX practitioner who translates these elements into the actual design solution does. If you are designing a user interface, whether it’s a kiosk, a website, an application, a cockpit or a phone OS the primary way you communicate with your user is visual. This means that the primary way you solve your design problems is visual. You need to be a good visual thinker. This doesn’t necessarily mean you need to be a graphic designer or a good art worker (although god knows that helps) but at the very least you should be interested in visual design. Even if you are not good at design production you should be interested in how aesthetics, layout, type, space and colour are used to communicate so that at the very least you can communicate with people who can do design production. At the end of every strategy and design process these are the tools used to create the actual design itself.

I’ve seen on more than one occasions good, smart UX practitioners fail at design because for all their understanding of users and business problems they weren’t able to translate those ideas into an interface. They weren’t failed User Experience practitioners, they were experts at what they did, they were just asked to work in a part of the process that they weren’t interested in (and on occasion were open disdainful of) and therefor weren’t good at.

Too much design

Swinging the other way, even if you have the right kind of designer for your project things can still go pear shaped. And sometimes I think (and in direct contradiction to what I just wrote above) you can get a problem when designers are too much in love with design itself, or the idea of being a designer as a thing in itself.

As a consequence of being in love with idea of design, sometimes I think designers fall in love with a design idea. A design solution can be so elegant, so tidy and clever that it’s used even when a clumsier more mundane approach would get a better result. I wouldn’t go as far as this ‘Don’t try to be original, just try to be good‘ train of thought, which although appealing I think undervalues experimentation and risk, but at some stage you need to check you haven’t lost focus on the original problem you are trying to solve.

The Kin I suspect suffered a little from this. Early on in the design process after posting magazine cutouts on a wall during a brainstorming session the designers hit upon the idea of a magazine as a metaphor for the UI

“We started cutting them up and throwing them on the wall,” Friedman says. “But as we looked at that stuff, it wasn’t the content on the wall that spoke to us — it was the medium of the magazine, which is really rich and powerful.”

http://www.microsoft.com/presspass/features/2010/apr10/04-12windowsphonelaunch.mspx

But some of the interactions that arose from that idea didn’t seem that effective based on reviews, even the visual idea of presenting your social network as a magazine contents page seems to be problematic.

“The average Facebook user has 130 friends (we tested with accounts of over 700 and 200), Twitter adds noise to the mix, MySpace compounds it… and the phone only updates every 15 non-user-adjustable minutes. Sometimes less! What happens is that you can’t really keep track of any conversations, and your friends (or in our case, lots of people you don’t really know) become less about their individual voices, and more about random shouts in a big crowded room”

http://www.engadget.com/2010/05/05/kin-one-and-two-review/

I’m reluctant to go too hard on the Kin given that I’ve never used one. In fact there is a lot about it that is intriguing and I like the adventurousness of the effort that went into it. But if we can consider it an unfortunate tool to help us discuss a point for a moment then maybe the idea of the magazine itself was more clever than good. Perhaps a more mundane drilling down into the interactions that are needed in order to use a telephone and keep on top of your social life would be more effective than forcing a metaphor onto the look and interactions of a UI. Experimentation is really important and as an industry I generally think we are way too conservative in our approach to these things, but at the same time it’s really important to challenge yourself to think if the attractiveness of your solution has become more important than it’s ability to solve the problem.

The Usual Comedy of Errors

I expect that the real problem with the Kin was the challenge of trying to design within the apparently ever shifting power plays of Microsoft’s internal politics. Usually the reason most design solutions aren’t as good as they could be is that the were designed with half an eye on internal politics. We have made real progress as an industry in incorporating organisational realities into our design processes but it will always be a challenge. Anyone who works in the private sector knows how surprisingly random so much decision making is in business, and the bigger the company the more exposed it is to quirky personalities and design by committee. The market place may be more or less naturally efficient, I don’t know, but I do know that private companies often aren’t. And it seems to be that the larger they get, the more random and less efficient they get while at the same time the likely hood of them failing falls as they gain a kind of capital rich momentum to carry them though. Mmmm slightly of topic there, but needless to say, anyone who works as a designer knows that there are a thousand minefields completely unrelated to design that can derail a design project and need to be carefully navigated. A successful design project needs to have some thought put into it as to how it is going to navigate the structures and personalities that are paying for it. Short term irritation caused by pushy designers during a project is quickly forgiven if a result demonstratively excees expectations, but the bad taste of failure because design experts failed to show leadership lingers.

Poor designers

The uncomfortable bit. In the interaction design world we don’t like to admit sometimes the role creativity and talent play in what we do. In the profession of UX we are comfortable with the idea that some designers are smarter or more professional than others. We can demonstrate to people that we are educated, or experienced, or have good processes. That we understand design, and people, and how people use technology. We can point to the fact that we know when we don’t have the answers, and that we have the techniques to get them. It’s very empowering. It means that if we go into an organisation we are not telling them what to do, but enabling them to both teach us and learn about their business, their users and their products, our expertise is very positive and our value is easy to quantify.

But I think we spend so much time trying to empower people to embrace design that the idea that there will always be people who produce better designs just because they are more talented is a bit nasty tasting, or at least not very fashionable. The longer I work the more I think we under-estimate this, and the more I think that the number of really great interaction designers out there is not as high we think it is. It’s tricky because if you are hiring it’s actually really hard to measure how talented someone is, particularly because talented designers aren’t always they most successful. The most successful designers are often the ones who are the best communicators I think, they are usually talented as well, but let’s be honest, not always. I’m always amazed when I talk to other designers and when I think about my own career at how random the process of who gets what project is, how important networking is and how once you get one big name brand on your portfolio everything else is so much easier. And I don’t mean this is a bitter way, blind luck, networking and communication skills have definitely played a part in some of the successes of my career, and I am aware that my professional life was much easier after I got my first blue chip client even though the standard of my work was no different. The addition of emotion and psychology that the consumers of design bring to the table means that although good foundations are essential to maximise your chances of design success, you need imagination, empathy and creativity to consistently nail a result. It’s the difference between a design that ticks all the requirements and works and a design that exceeds expectations and is really transformative. And some people just seem better at it than others.

Which means …

When I think about these things, the role of the right kind of designer, the importance of good processes to manage business barriers and the value of a talented designer it seems to me that as an industry we are making really good progress on all of these except the last one.

I really believe that we underestimate the value of talent in interaction and User Experience design. That doesn’t mean that I think we overestimate the value of research and process, not at all. But if we take good process as a given, then the more I look around me at the difference between projects that really sing and projects that go ‘meh’ the more I think it’s the talent of the individuals involved that make a difference. I have seen designers with very little user experience history take the most meagre design recourses and produce really outstanding results just through being smart, hard working, imaginative, sensible and talented. And I’ve seen projects with a lot of recourses and talent thrown at the formative stage fail through stumbling when it comes to the actual design.

Which is annoying because that’s the hardest thing to control. Most designers have some trick to tell if someone is a good designer or not, most of which are completely contradictory. One friend of mine thinks you can prefect the quality of a designer through the books they read. I know a fairly high profile UX guy who rates designers by how much they blog and contribute to the community. Personally, I don’t think until someone designs for you you can tell. And if I’m right that means the factor that most determines if you get a talented designer or not, is luck.

Unfortunately like most ill-informed people I have a lot to say, so motivation to write is actually quite high. I’m not even that worried that only a handful of people read my blog, the process of thinking about what I’m going to write is really useful and enjoyable for me. It helps me to clarify my thoughts and work through issues. It’s just the process of writing itself that does my head in.

I persevere anyway because I’ve found it so valuable, but now that I have a new baby there is an increasing danger of not writing at all because I no longer have the time to bash away at something all week in my spare time. The funny thing is when I started this blog I thought the writing would be easy and I worried about the decision to do a new drawing for each post. But the drawings are the easy part, the literally take about 15 minutes each. Less than that even because since the aforementioned baby arrived I’ve just been rehashing older drawings. They would be better if I had more time to spend on them of course. So I’ve been wracking my brain trying to think how I can say just as much, just as often but spend less time doing it.

I’m thinking about maybe a mini blog, where I just spit out the guts of my thoughts and deliberately keep it short. This would be good for my writing I think, I’ve found the discipline of twitter to be very good for my writing anyway, it forces me to be less verbose. But I’m not sure if this will save time, making something short is harder than making something good and long for me. But I might give it a test run.

The other option is a podcast. I know from experience that with editing and whatnot these can be more time consuming than writing and who wants to listen to yet another designer mumble away into his microphone about typography. But maybe I could interview other designers I know. Keep it to a set length, not worry too much about audio/video quality (as long as it is listenable) and put it up unedited, no matter how rubbish it is. Quantity over quality! Although I don’t know any high profile designers I know a lot of designers in different fields, i.e interaction, user research, branding e.t.c. This idea appeals to me because I’m a much better communicator verbally than .. um.. writerly and then I can have a chat with other designers which is nice. It would be designers at the coal face if you like, people doing meat and potatoes design for a weekly wage or a day rate. So if I wanted to talk about writing about design for example I could talk to a copy writer, talk to them about writing specifically and about what it’s like on a day to day basis to work as a writer.

I’m going to give both these ideas a spin over the next few months to see if they float.

Google are now incorporating page load speed as one of the factors they measure in order to determine the relevance of pages in their search results.This is probably … fine. Google still seems to me to be the best performing search engine out there, consistently delivering relevant search results. Most probably they have figured out how to intelligently incorporate this factor into their voodoo and everything will be business as usual.

But it makes me nervous. It makes me nervous because page load time has nothing to do with the relevance of a search result but everything to do with the quality of the experience of the website that contains that result. It means Google are trying to measure the quality of a website’s user experience.

I can see the logic of that, the quality of the page effects how useful (and therefor relevant) it is. But in order to measure the quality of the experience they will be trying to quantify it. Which is a bit of a worry.

First of all I’m not sure if you can really quantify user experience, as the definition of a good user experience changes depending on context. We define a successful experience for an e-commerce site completely differently to a successful experience for a complex RIA.
Can Google somehow tell what kind of site site it is looking at and who it’s users are?
Different sites have different types of users, in different environments, on different machines trying to achieve different things. Can google figure out all of these variables for each site in order to define how page load should be balanced against other factors that define the user experience? Can they automatically measure what kind of people the users of a specific site are, what kind of aesthetic enhances the experience of a page for that user and how successful that design is in delivering that aesthetic? Can you measure the goals of a business transaction and wether the extra javascript load in a page creates a better user experience in achieving those goals? Because if you can’t measure all those aspects then the value of the aspects you can measure seems questionable. You can’t penalise a rich website for heavy page load unless you know for sure that the added value of that richness is less than the added value of a fast page load time.

Another reason I’m sceptical is because I don’t really rate Google user experience in a lot of areas. It’s not bad, I love their stuff and use a lot of it, it’s so amazingly useful and well thought out. But for me the experience is hardly a joy. I use it but I don’t love using it, it’s not the same pleasure to use that Apple (to use a abused example) stuff is. And judging by the relative reactions to the Google Nexus One compared to the iphone (with the exception of techies of course) I’m not alone. In a lot of ways the Google phone actually seems much better than the iphone, but a lot of people who don’t need iphones want them. Less so, it seems (so far) for the google phone. For you it might be different. Which really, is the problem with quantifying user experience, everyone is different. I don’t notice if a page takes a fraction of a second longer to load but I do enjoy using it more if the UI is gorgeous and intuitive. Other people couldn’t care less how it looks and do care about load time. But how can Google figure out if we are one or the other?

As a designer I wonder if I am going to be forced to favour the Googles aesthetic of low weight pages. And although I actually like the look and experience of web pages that are super low weight (with the exception of Googles), if the users for my project are better served by a lush heavy weight experience is their experience is going to be compromised if the business strategy requires high Google search ranking?

Many people have quite rightly pointed out that of course you can have a beautiful and functional page with low page weight. But there are legitimate cases where heavy load designs are optimal. Our personal preferences for lean low weight designs or heavy rich designs shouldn’t even matter, there is no universal truth about what makes a better experience, the answer depends on what works for each user and what the goals of each site are. Who are we to decide that one approach is the best for every project? Google?

It’s extremely difficult to measure this stuff. Actually the real problem is that it’s easy to measure if a website is successful or not, but much harder to measure why.

Well, not to worry. Google probably give page load a low weighting in their clever secret recipe and everything will be fine. I have a history of getting slightly over excited about these things and then feeling foolish afterwards. But the idea (even if it turns out not to be true) of google dictating the definition a good user experience for every online transaction give me the heebegebees.

The design rules we adopt usually come from the experiences of other designers we respect, revelationary experiences that have helped us in our work, a reaction against bad practices or ways of thinking that ring true to how we think about and execute design.

But in trying to turn these experiences into practical rules we can use to help our work we sometimes focus on the rules at the expense of what we’re trying to achieve. An excellent example of this is consistency. Anyone who has been flummoxed (or watched users become flummoxed in testing) by links that change style, menus that move around or any other factor that changes just when we think we have figured out how an interface works knows that consistency is vital in making something useable.

But the consistency rule can (and often does) take on a life of it’s own. Once a way of doing something is set it often becomes mandatory that this is consistently implemented across a system. But if in a specific context on that system the usability improves if that consistency is broken, then we are short changing ourselves if we carry on for consistencies sake. We’ve lost sight of the fact that consistency in this case is a way to enhance the usability of a system, it is not a goal in itself.

I’m sure this all seems blindingly obvious, in fact I initially questioned if it was even worth blogging about. But despite the seemingly obvious nature of how to use rules when we are designing I constantly come across designers defining good design with absolutist words like ‘never’ and ‘always’.

The ones that really make me chew on my own hands are the ones that start ‘A good designer never …’ or ‘A good designer always …’.
A quick example: ‘A good designer never allows form to dictate function’. This rule is too simplistic, the relationship between form and function is very intimate. This also completely ignores the fact that sometimes the function is the form. For example in household industrial design objects are sometimes on display more than they are in use. A kitchen radio may only be used a few hours a day and rarely retuned but it is always on display, the form is a vital part of the function of that object. It may be legitimate for the use of that object to hide tuning functionality out of the way if it improves the aesthetics of that radio.

In practise I actually think the form follows function thing works really well as a guideline and I rarely break it, but I resist it as a rule. If I come across a conflict between form and function I ask myself what benefits the overall experience favouring the functionality of favouring the aesthetics. And usually, despite how it may seem from all my ranting on this blog, I fall down on the side of functionality. But the point is I think about it, I don’t just immediately fall into a predefined position.

Hypocritically I’m aware that I veer towards this language all the time on this blog but this reflects my poor writing style rather than my lazy thought process as a designer. A good designer never says never I hope. Rules are useful but hopefully we are smart enough to think about the reasons behind them and think about whether they are relevant before we carelessly bust them out all over the place.

There seems to be a of conflicting advice around for interactive designers about how we should shape our careers. You will hear some people tell you that designers who are highly specialised are correspondingly more high valued in the market place (For an example see this video at about 21:20). If a business is looking for a graphic designer, then they want someone who is an expert at graphic design. Rightly or wrongly someone who presents themselves as a coder/designer is suspected as being not as good at either as someone who puts all there energy into mastering one or the other. There seems to be suspicion that the hours required to reach a high level of ability in one area can’t be be clocked up if you are distributing your time amongst various disciplines.

Conversely, other people will tell you that too narrow a specialisation leads to too narrow a thought process in that discipline (For an example see this ‘work with us’ page). They say that an understanding and experience of different disciplines makes you stronger and more creative in all of them. These people will reject someone who is too focused on only one area. They question how you can design for a complete experience if you don’t haven’t practised all the disciplines that are required to create that experience.

So which is it then?

To my mind the question is often approached in a way that is too absolutist. I’m constantly reading opinions about what approach makes the better designer and about what approach makes the most employable designer. But in my experience some individuals get better results by specialising and some individuals get better results by being generalists. It’s not an either or situation. And likewise the market place for design skills sometimes requires specialists and sometimes requires generalists. So I don’t think there is an absolute answer about what is the best approach that can be applied to everybody and every situation. The answer depends greatly on what you are like as an individual and what kind of skills market you are competing in.

So when tackling this question for yourself I think there are two things to consider:

1. What makes me a better designer?

The best possible place to start in my mind is what are you most interested in? Because there is no such thing I suspect as one approach or set of skills that makes someone the best possible designer for every possible challenge. There are some projects whose demands will be best met by someone who has a good grasp of interaction and graphic design. And there will be other projects that are best served by a specialist highly focused on interaction design only. The best designer is the designer who is the most highly skilled in the combination of abilities that are right for that project.

So the question is really what combination of skills enables you to do your best work as an individual?

And as far as becoming the best designer you can be as an individual I think pursuing what you are interested in is ultimately more important than pursuing what are you best at. That interest and enjoyment leads to a level of self motivated professional development that potentially can lead to a higher level of accomplishment than pursuing what you are naturally best at but aren’t interested in enough to develop in your own time. It’s not as simple as that obviously, interest and hard work with no ability will only get you so far just as talent with no investment will only get you so far. But you can’t underestimate how much of design skill is hard won through study and experience on top of whatever natural talent you have.

2. What makes me a more employable designer?

Obviously the commercial reality isn’t as quite as simple as how I’ve laid it out above. In any market for skills some types of design (and types of designers) are in more demand than others. You can be the best Flash animal husbandry micro-site researcher/designer/developer in the world but if no one wants any Flash animal husbandry micro-sites researched, designed and developed then it’s not going to do you much good. This doesn’t mean you can’t do it, just that the more niche your combination of skills or speciality the more competitive it’s going to be to get work in it. So until you establish yourself enough to get regular work in your area of interest figuring out if a specialist or generalist is more employable is pretty important.

Every job market is different in what it needs from designers, but talking to recruitment agents, looking on job boards and checking out agency websites can usually give you a pretty good idea about what people are asking for where you are working. The important things is to consider the overall picture of what is being asked for, not what specific individuals want. I’m wary when I hear individual employers or clients laying down exactly what they think designers need to be able to get work. They may be accurately telling you what they need, but that doesn’t mean that that is what the majority of employers or clients in your market need. It’s really important to think about the big picture in the specific market you are competing in.

Once you have your head around what your market is asking for, you may need to adjust how you present yourself if there are limited opportunities in the areas you are interested in. If for example the scene where you are is geared towards specialists but you are interested in being a generalist the you may need to focus on your favourite skill and put in some time doing that until you are competitive enough to start getting the smaller number of roles available for generalists.

In case you were wondering the contract market in London where I work seems to be focused more (although not exclusively) on specialists at the moment (Agencies here on the other hand seem to value a broader range of skills). Companies usually have a very specific part of a project they need outside help with (e.g user research, graphic design or interaction design) and they want someone they see as an expert with a proven track record in that specific area. Given that, you are still expected to have some knowledge and enthusiasm for all the aspects required to deliver a successful project. Within that there is some demand for people who while not complete generalists, have a speciality which is made up of a specific combination of skills. I tend to win contracts that need someone with experience in both UX design and graphic design for example.

Ultimately, I think you need to focus on what you enjoy the most. You’ll be better at it and if you’re good enough there will be opportunities out there that suit your specific approach. I know a guy who is an illustrator/flash developer/musician/graphic designer who works full time using all those skills to make flash games for a youth organisation. What are the odds of there being a job that needs all of those skills? And what are the odds of them finding someone who not only had all those skills but was good at all of them? This guy has had to be pragmatic and do all sorts of bits and bobs until this job came along but he kept up the skills he was interested in on his own time and when the opportunity came along he was perfectly placed to take it. If he had focused on only what he thought people wanted instead of what he was interested in he wouldn’t be there now. Despite what people may tell you those odd niches are out there, and someone is filling them. You just need to put in the time honing your skills until you find them.

The strategies for designing for the variable width of a browser and the strategies for designing for a variable height require quite slightly different approaches, so I’m going to handle them in different posts. This post focuses on how to handle designing for an unknown width.

Fixed Width Layout

The easiest option to implement technically and design wise is to constrain your content inside the browser window by setting a fixed width. Your design effectively sits in a block and in a larger window either floats in the middle or sits on the left or right edge.

The A List Apart website is set to a fixed width.

In a larger browser window the width stays the same, the content in anchored to the left hand side and the right margin increases.

There is also a good typographical reason to use this approach. Any line of text over 65 characters becomes difficult to read (arguably, see this post for a dissenting view). So text where the line width is a proportion of the screen width has the potential to become unreadable even on a 1024px monitor.

And there is also a lot of room for creativity in the design of fixed width content. Designs that aren’t contained within a visible container can look impressive on a large screen. If designed well the extra white space becomes part of the design as opposed to wasted space outside the design.That space can also serve as a great canvas for more design elements if they are designed in such a way that they also work if only a small portion of them are revealed.

Against this approach is what you sacrifice by not tailoring the design for different screen sizes. On a mobile phone a design with a width fixed for a conventional computer screen requires horizontal scrolling to use, and lots of design and interaction principles developed for a conventional computer monitor don’t translate well to smaller displays. Likewise the potential for large monitors to display more information, or display information in a more complex layout is missed.

Width as a percentage of the available screen

It is relatively easy to create a layout that expands to fill whatever width of view port it is displayed on. In practise this usually means either setting the left and right margins to fixed amounts and letting the content fill the whole space available in between or setting the content as a percentage of the available screen, effectively setting the margins as percentages as well.

The margins and content in Stuff and Nonsense are set as a percentage of the browser window.

In a larger window the widths of each element increases in proportion to the available width.

As discussed above the biggest problem with this approach is that it can lead to unreadably long line lengths. In practise even if each section of your page is set to an elastic width you will usually want to constrain the text inside each page with a maximum width.

In theory the width of any element can be set as a percentage but this needs to be treated with caution. Images set as a percentage will resize to become bigger or smaller depending on the window width but in many common browsers the quality of the image becomes severely degraded even when starting with a very large image and scaling it down.

Portion of a screen shot of a photograph at it’s native size in Firefox

Screen shot of the same photograph scaled up in the browser with noticeable pixilation

And setting margins and HTML elements as percentages can lead to a design that doesn’t work in a small screen or a large screen, so a little bit of care needs to be taken to ensure that the design displays in reality how you imagined it.

Specific Layouts for Each Screen Size

This is probably the most interesting but most complex option. There are several ways to design a page so that the layout changes depending on how it is viewed. This can be done either through the normal rules set in the style sheet or programatically. Through the style sheet usually means elements are floated so that if there is room they naturally float next to each other or otherwise sit one under the other. If done programatically, a specific layout is set for each screen size or set depending on the device. So for example we have one layout for a mobile phone browser, a different one for a small monitor and different one again for a large monitor.

Snow Mag dynamically changes it’s layout for a small screen …

… and for a large screen with elements moving up from the bottom of the screen to fit the available space.

ooOO in a smaller screen …

… and in a larger screen.

This greatly increases the amount of work both on the design side and the development side and in commercial situations you really need to be able to prove value for each layout. For a designer the challenge of a single design that dynamically changes itself according to the screen size is a real pleasure and the challenge of achieving design goals over shifting parameters is one of the elements that makes interactive design so appealing.

Gotchas

Even in a design where the impact of a variable width canvas has been carefully considered there a multitude of hidden gotchas for designers new to the web. Here are a few things to look out for:

Multiple Columns

Columns are a great way to preserve line width and keep content in specific areas for print, and there are ways to implement them on the web (see http://www.alistapart.com/articles/multicolumnlists/ as an example and http://www.w3.org/TR/css3-multicol/ for how this may be implemented in the future). In particular large cinema displays lend themselves to this way of displaying text as it allows large amounts of content in the viewport without cramming it in and removes the need for scrolling by the user.

But the variability of the browser window height can mean that columns of a fixed height can extend below the viewport creating the need to scroll both up and down the page in order to read them. This can be managed by testing for browser height and adjusting the column height accordingly but this introduces another complex level of logic to your design with all the implications on testing, browser compliance and timelines that go with that.

Attaching Elements to the Viewport

Attaching an element such as a logo, a decorative design element or navigation to the viewport (for example a logo that is always fixed on the left hand side, or navigation always at the top even as the user scrolls down) is a great way to make sure that users are aware of an element and don’t need to manipulate the page too much to get to it. It also introduces exciting possibilities for a design that changes and reveals itself as a user interacts with a page.

But be careful how you deploy it, if the element doesn’t enhance the users current activity then you need to question why it’s important that it’s always on display. A menu that is fixed to the left hand side makes sense if the user is constantly using it such as changing tools in an online application, but is potentially just an element cluttering up the screen if the user is engaged in content and only uses the navigation on occasion.

Horizontal Scrolling

Vertical scrolling is the norm on the web as it suits the way we naturally read but horizontal scrolling when used as a design technique (and not just because the with of the largest element is larger than the viewers screen) can be an interesting way to display content. It seems to work particularly well for displaying content in a narrative sequence. For a couple of interesting examples of horizontal scrolling behaviour see http://www.sectionseven.com/ and http://www.weshootbottles.com/

The danger here is the same one with columns, in that you can end up with content that requires horizontal and vertical scrolling to engage with. The examples above handle this by using extremely short vertical heights. Another risk with horizontal scrolling is that less adventurous users may not even realise there is more content to scroll to if there is no other means of navigation. There is a decent amount of research that shows users look for the vertical scroll bar as an indicator of more content down the page to scroll to, but the horizontal scroll bar is a less accepted convention. As always it’s a balance between displaying information in a way that users can easily engage with it and displaying information in a way that people want to engage with it.

That should be enough to get any new interactive designer started, the next part of dealing with the frame in web design is how to deal with variable vertical height, which is a bit of a minefield (‘The Fold! The Fold!’). I’ll have a ponder and try and post again soon.

« Print to Web: Teenage Poetry

Basically my faithful computer has had it and I need to replace it. Normally I would just get a new Macbook Pro but I’ve had a bit of a tiff with Apple and now have no idea what to get.

Here is what I need to be able to do:

• Run Adobe Suite. I can’t run an alternative because I’m almost always required to produce and work in Adobe formats. It’s pretty much the industry standard much to my software budget’s dismay.
• Run Microsoft Office for the exact same reasons above, although potentially I could fudge it with a product that produces MS format documents.
• Record music and edit video, do 3D rendering and animation. This isn’t work but is just for yuks, so I do all those things in a lo-fi crappy sort of way. I use Audacity, Garage Band, Blend, Flash and After Effects.

And here are my options as I see them …

Apple

I love OS X, and want to continue to work in it but I’m a bit fed up with Apple, it feels like they have slightly lost interest in people who use their machines to work in favour of all this iPad and iPhone palaver.

I started to get frustrated when they bought out their new line of Macbook Pros which only came with high gloss/high contrast screens. Anyone who ever needs to do serious colour work knows that these are no good, and although they have now introduced the option to get anti-glare screens, they took their time, only allowed it on certain models and charge you extra for it. And generally I’m not a fan of the new Macbook Pros compared to the old ones. I don’t like the Spectrum keyboard, the high gloss default screen as mentioned above or the big black bezel around the screen. And now just when I need to upgrade there is no indication of when their new line of Macbook Pros will come out, apart from a vague promise of maybe, something, later this year. They are already overdue, I’m guessing because of recourses going into the iPad, which is obviously no good to me as a work machine.

If I but a new Macbook Pro now, with all it’s features I don’t like, will I just be kicking myself when they release a new line that addresses those issues? Or if I hold on will I be limping along for months with a weezy computer (it works but not without an external monitor and keyboard) waiting for something that could be ages away and may not be what I need when it does come out? If I do wait I’ll need to get a cheap Netbook for work travel as well, do that’s 250 pounds gone right there.

What I really want is a proper OSX tablet like the Modbook but with real Apple style as opposed to a slightly clunky looking hack. I would settle for a Macbook Pro with a nice full keyboard and a good screen.

This has really bought to light for me how limited your choices are with OS X. If I go for windows I not only could have a fully functional tablet computer right now, but I have a huge range to choose from. This was never a problem before because I always felt that there were no other machines that even came close to Macs in style or execution, but if they take a turn I don’t like, such as the current screen and keyboard choice I’m stuck with it. They clamp down pretty hard on anyone who tries to offer another box that can run OSX.

Windows

Windows 7 is not too bad, sort of like OS X 5 years ago, and some parts of it are actually better than OS X I think. In theory this opens a world of choice up to me as far as the box the OS runs on but that’s where it gets complicated.

Because although I moan about not having a choice of box, I have never actually come across a windows computer that works for me as well as an Apple one. From little things like how long it takes them to wake up, to buggy things like how reliable they are, to petty things like how good they look. I’m typing this on my wife’s Dell which is a pretty nice looking computer from the top with a cool shiny red top and a nice full keyboard. But that Apple attention to detail isn’t there. From any other angle apart from the top it’s clunky and fudged and if it runs out of batteries while you’re using it this is what you get when you plug it back in.

Seriously, how crap is that? Is it 1995? I don’t know if that’s Windows or Dell but that looks massively amateur to me. Apple has made me fussy. So Windows opens up my choices to multitude of devices. None of which I like. And I suspect, eventually Apple will update OS X, and I will be sitting there on Windows 7, looking at an OS X that is 5 years more advanced and kick myself. Because I repurchased all my adobe Software in a Windows format and it will cost me 2 grand to change back.

Open Source

Specifically, Ubuntu. This appeals to me a lot, free of Apple and Microsoft who care for me not! I love the whole idea of it, it appeals to my inner nerd. I’m not that keen on any of the skins for it I’ve seen but potentially I could even design (or at least skin) my own custom OS for it, something I have always wanted to do.

But there are a few things that I’m a bit wary off. As far as the hardware goes it come with all the same problems as Windows, that level of design just isn’t there. And even though potentially you can run Photoshop on it the level of dicking around you need to do it is just too much. I’m not really a tech guy, and even though people I know who advocate for Ubuntu say it’s no different to using Windows these days, when you ask about specific problems the answer always seems to eventually involve typing in a command line or doing some other level of techy mucking around I’m not that keen on.

I know I expressed excitement about designing my own Ubuntu skin, which I genuinely do think is a fun idea, but realistically, It’ll never happen. I bought a LG Viewty because you can make a Flash file for it that allows you to build your own interface, and I’ve even knocked up a few rough design ideas. But so far I’ve has it 3 months and all I’ve managed to do so far is put a picture of my baby on it.

So there you go super-nerd friends. What should I do? I’m genuinely baffled at the moment and need your help.

I’ve been thinking about my early experiences of applying what I learnt at design school to the web. I majored in photography and got an excellent but very print orientated education. After I graduated I started doing a lot of web work and looking back I fell into a lot of pretty obvious gotchas for traditionally trained designers.

So maybe it’s worth writing a few posts about making that transition. A good place to start I think, is to look at a fundamental mistake in approach a lot of us make when we first take on web projects. Although basic visual design principles are the same in both web and print scenarios, a lot of the specific techniques we develop to apply those principles in print rely on manipulating graphic elements that are unpredictable a web environment. The problem is that often our first reaction isn’t to rethink those techniques but to try and manipulate the web environment to make it more like the print one we are familiar with.

A really common example of this is how we approach composing a page on the web. In print design we usually know exactly the format and size of the canvas we are designing for, for example an A3 poster or an A4 page in a magazine. But in web design we usually have no way of knowing what kind of screen a design will be viewed on. This means we can’t predict the physical size of each element on the screen, the ratio of the vertical and horizontal dimensions or the size of the browser window inside the screen. So whereas in print design we can design with careful consideration of each elements placement in a exact frame, suddenly we are faced with a context where the bottom of the design may not be displayed, or the width and height may change or where a design may need to be displayed as the equivalent a large poster in one scenario and as a tiny business card in another.

It’s like paper, but it glows

My initial reaction to this challenge was to try and pin down those variables so that I could establish a fixed frame to design within. So when I designed one of my very first web sites for a photography exhibition I figured out the most likely minimum screen area that would be available, created a fixed (and very small) rectangle that would fit in that area and then designed within that rectangle. To my mind then, this gave me the control over the canvas I needed to deliver a design that would look good on the most screens possible. It went a little something like this:

Ouch. Those corners. The typography. It’s not pretty and I don’t really like showing it but I will suffer for you in order to demonstrate what I’m trying to say.

To many of you this will seems such an obviously flawed approach that it is barely worth blogging about. By setting a fixed height frame I took away he ability of the users to access the content in a way that best fits the screen they are viewing it on. Users on smaller than 800 x 600 screens had to scroll left and right as well as up and down to read the content. Users on big screens had to navigate through multiple pages to view content that could have quite easily fitted on their monitor. And even users that had a screen that perfectly fitted my design lost the ability to conveniently scroll through large amounts of content, a widely favoured web convention. But this little rectangle solution was actually very common back then, and even if it is less common now the thinking behind it of making the web more like print so that familiar design techniques can be employed is still pretty common for print designers embarking on their first interactive projects. And in fact, dishearteningly, I still see a lot of talented, experienced and smart print designers offering up little rectangles full of content when they tackle their first web projects.

The problem of course isn’t the little rectangle itself, there are situations where this would be a fine approach I’m sure (although my situation wasn’t one of them). The little rectangle solution is really just a symptom of a designer applying techniques from one medium to another. In my case I tried to apply techniques that had served me well in the past without analysing whether they worked in the new medium I was working in. What I should have done was start with my basic design goals and work out how to achieve them from the ground up.

What could I have done differently?

One reason I wanted a fixed canvas was so that I could control the negative space between the edges of the page and the content, emphasising the content and giving it room to breath. I also wanted to allow enough of the background graphic to show to communicate the aesthetic of the exhibition. Thinking about the need to achieve those things in the context of a medium where the whole design can be viewed through an unpredictably sized window I would have been smarter to accept having no control over the bottom padding in favour of allowing the user to fit in as much content as their monitor allowed.

To achieve the goal of using the background photograph to communicate the aesthetic of the exhibition I could have taken advantage of the fact that the photograph actually has a natural horizontal flow where it fades into shadow at the bottom. By letting the height be defined by the amount of content and then blending the bottom of the photo into a solid dark colour I could have allowed the user to display as much content at once as their monitor allowed while still using the photograph as a background for aesthetic effect.

If I made the photograph bigger, so less detail fitted in the browser window then more of it could be revealed as the user scrolls down, turning the lack of control over the frame into an advantage instead of an obstacle. Instead of relying on the padding above and below the content to emphasise it I would have to be satisfied with a minimum of side padding being the only space that I can be reasonably assured will always be around the content. So I would need to use some other technique to emphasise the content over the background photograph such as more stylised typography. So that would be something like this:

Funnily enough, looking at the two designs now, if the first design was pretty much a text book example of 2005 web design, the design above is a fairly generic representative of the common design approach now. There is often a common reasoning behind design trends I think, as opposed to just designers copying one another. If I was doing this now, I would spend a bit more time on it and try and find an approach that was less generic and more tailored for an exhibition but this is adequate I think as a practical example the result of using design techniques developed for the web as opposed to print.

I’ll try and write a few more posts about how to approach the web if your background is in a more traditional design practice over the next year. But in the meantime this the best place to start I think, or at least the lesson I most wish someone had taught me when I first started: If you’re struggling to get your designs to work on the web, the problem may be you.

Print to Web: Frame! »

I’ve had a couple of experiences in the past of getting UX design teams I’ve worked in to open up to the role of visual design as a fundamental part of our design process. I’ve even been lucky enough to have had good managers who allowed me to advocate and take ownership of this issue. But even when I haven’t had that luxury, I’ve found that if I can engage people in a discussion about how aesthetics affect our goals, and if I can get them to realise that as the visual designer my goals are the same as their goals, then people are almost universally open to integrating visual design thought into our processes (as opposed to thinking of it as a bit of slap and jazz to be added at the end). So here is what has worked for me …

Keep your eye on the prize

Believe it or not my main concern when working on a project in a visual design capacity isn’t how it looks. What I care about is how well it works, how engaging it is, how efficient it is, what it enables people to do, how much money it makes; in other words whatever the deliverables for that project are. But because how it looks affects how well it works, and because if I’m a visual designer on a project I’m responsible for aesthetics then obviously that’s what I focus on. But the aesthetics are always considered in the context of how they contribute to the overall success of the project.

In a great team, this focus on how your area of expertise contributes towards the overall goals of the project is the same for everyone involved. The stakeholders, clients, developers, designers etc are all focused on making our project a success as opposed to just protecting our own deliverables. We are all focused on the goals of the design we are currently engaged in, and how our roles contribute to that. So when I want to use a specific font, or increase the white space, or have a bigger graphic, or whatever it is I feel we need to make to make our project look spanky, it’s always presented in terms of the effect on the overall user experience and the overall goals of the project.

Sometimes this means stepping back if an approach I want visually decreases the effectiveness of what we are working on overall (e.g. abandoning the use of a particular font if the technology used to embed it slows down the page load too much). Sometimes it means pushing back on other team members a little (e.g. explaining what a difference that font makes to the overall presentation of our experience and why that difference is important to achieving our goals). But because I’m focused on delivering the best possible experience, when I push back, people know it’s not just vanity or stubborness. And when I have to step back I’ve done so to support the overall experience, so it’s still a win.

Don’t be a dick

This is an easy one. People respect what you do if you respect what they do. So I take the roles of other people in the team seriously, and I treat them as experts which after all is how I want to be treated. Sounds blindingly obvious when I type it out, but I’m guessing we have all hit arrogant designers who view the needs of developers and project managers as barriers to good design, and developers who view all designers as vain prima donnas only interested in their portfolio and awards.
I’ve found that if people know I respect their expertise in their chosen field then when I do need them to push the boundaries in that field they are enthusiastic about doing that and we can work together to find a solution. And I do the same for them. Awwwwww.

Know your stuff

When I think back, my first year at design school was possibly the most useful. At the time it felt frustrating to learn a lot of things I felt that I instinctively already knew. I could already see how two elements related to each other on a page. What was the point of naming and cataloguing those relationships and then discussing them endlessly instead of getting on and doing it? But it’s clear to me now that developing an understanding of why certain things worked and didn’t work and learning how to talk about them was the most useful thing I did. Once I understood the reasons behind my previously instinctual understanding of design, my design decisions improved radically. And once I could explain clearly why I made certain design decisions I was much more successful in getting them accepted.

So you have to know the basics. You don’t necessarily need to go to design school but you need to know enough about why you make the decisions you do to be able to explain them to other people. And then of course you will need to extend that basic graphic design knowledge into how visual design affects interaction. You are going to have to argue design points with UX people, developers and managers all of whom may have strong opinions on visual design so it’s important that your expertise is self evident. Not in a shouty way, but just in that you make good decisions that get good results and that you can articulate those decisions clearly.

Advocate

Sometimes you need to explain why what you do is important very directly. By this, I mean advocating for the importance of visual design within your organisation. It starts with communicating within the design team, but really should include project managers, sales people, directors, and anyone who has control over decisions that affect design processes. You’ll need to consider how visual design fits into your organisation, identify how barriers to good visual design negatively affect the outputs of your organisation, and come up with proposals for how these barriers can be removed.


For example, if you think that current processes don’t include adequate time allocated for visual design work, then you need to identify why there isn’t enough time being allocated. Could it be that sales people in your organisation don’t understand how visual design adds value to a proposal and therefore aren’t communicating that adequately to clients? This sometimes makes visual design the first thing to be cut if budgets are getting tight. If that’s the case you need to talk to your sales people, engage them in a discussion about how what you do contributes towards R.O.I for clients – help them to sell you. You need to take their concerns and reservations seriously and back up what you say with examples and research. This helps you and it helps them. Again, Awwwww.

So, that’s all I have for this year probably. This post was a bit later than I had intended because between beginning and finishing it we had our first baby (yah!) which put the rest of our lives on hold for a bit. And with the Christmas break and the aforementioned new toy to play with I’ll probably give this a rest till the next month, so my 6 subscribers, have a great Christmas and New Year and I’ll catch you in 2010!

It came out like a weird half bird half fish genetic hybrid with a creepy open mouth like it’s waiting to be fed. Or to pleasure someone. It’s so wrong I can’t look away. Also made me realise that I have accidently nicked the Twitter blue. In my mind my Twitter icon has woken up and just discovered that it is now a hybrid mutant and is begging to be killed. I’m sorry bird/fish. You should have never lived.

It’s here by the way: Matt’s Brain