Should Programming be Taught at Schools? | March 25, 2013
There’s a lot of buzz around technology education at the moment.
The old ICT courses which taught children to be passive consumers are being overturned as schools in the UK are encouraged to set up their own curricula with programming at it’s core. At the same time after-schools clubs are growing in popularity with projects like Code Club operating in nearly a thousand British schools. This boom has been thanks, in part, to services like Code Academy and Scratch which have revolutionised the way people learn to programme, and to projects like the Raspberry Pi which hark back to the golden age of the BBC Micro.
While I don’t necessarily buy into the Rushkoffian rhetoric of “programme or be programmed”, I see huge benefits in leaning to code. For instance it’s a practical and engaging way of teaching other skills like maths and physics, while the problem-solving techniques you pick up are highly transferable. I also think it can provide young people with a sense of agency and purpose which is often lacking in their lives (computer games often fill this role). So as somebody in the technology industry I see this trend as a very positive move. However I also wonder if this could just be a case of selective bias?
Classicists argue that Latin is is one of the most important subjects to be taught at school as it’s the basis for all modern languages. Similarly business leaders argue that finance, law and entrepreneurship should take a central place in school curriculum. We even have sports people and celebrity chefs calling for health and nutrition to feature more prominently in schools. I bet if we asked most vocations, from engineers and architects to TV presenters and ballet dancers they’d be able to provide a string of tangible benefits their profession can teach. As such I struggle to tell how valuable learning programming at school really is or how we balance this against other subjects.
I also worry about the expectations we’re setting by teaching programming as a core subject. Are we creating a generation of children raised on the dream of becoming the next Internet entrepreneur only to end up creating an underclass of poorly paid Microserfts? What’s more, do we really want our education policy dictated by the Facebook’s and Google’s of this world, just to ensure they have a plentiful supply of engineers?
It’s a tough question and one that has me sitting on the fence. The benefits to me are immediate and obvious. However I still can’t shake the concern that the downside will only become apparent 5 or 10 years down the line when it’s Java (pun intended) programmers serving our coffee in Starbucks rather than geography graduates.
Trends in Web Design | February 17, 2013
The growth of UX Design vs. the decline of Interaction Design and Information Architecture
IA vs. CS
Agile Methodology vs. Lean Start-up
The growth of Responsive Design
It’s All Academic | February 2, 2013
Considering the World Wide Web was created to facilitate the sharing of academic research, I’ve always been surprised by how little of this I see online. In the early days of the Web, most of the sharing seemed to be done by amateurs and hobbyists. However as businesses discovered the value of the Web, these amateurs turned professional and the discipline of Web Design was born.
In most other industries, people tend to keep their information secret, for fear of giving away their competitive advantage. On the Web I’ve always been amazed by how willing people are to help others on Blogs, Mailing Lists and sites like Stack Overflow. It’s this willingness to share that led me into this career and is something I’ll always be thankful for.
When I first discovered the Web I was excited by all the new things I’d learned and wanted to share these with others. I quickly found likeminded souls and assembled them first into a Blogroll and later into a NewsReader List. When I declared RSS bankruptcy around 2007—shortly after joining Twitter as it happens—I was following around 600 websites. Out of these, only three could be considered from academic sources.
How was it that despite working in a medium designed for the dissemination of academic research, I was only following three people? I wasn’t being deliberately selective and only following practitioners. In fact I’d spent quite lot of time looking for relevant and interesting academic Bloggers and had failed every time.
With the exception of people like Don Norman and Jakob Nielsen, there was a distinct lack of academics speaking at conferences, publishing books or writing articles—at least ones that the industry was acutely aware of.
On occasion I’d meet a lone academic at a conference or BarCamp and quiz them on the subject. The conversation would usually go something like this.
Andy: “So how come we don’t see more academics speaking or attending at conferences like this?”
Academic: “My University expects me to publish a certain number of papers and I don’t get any credit from speaking at events like this.”
Andy: “Oh, OK. But why not speak anyway? Most of the folks here aren’t getting anything for speaking. They’re just doing it because they want to share.”
Academic: Blank Silence
Andy: “So what are you researching at the moment? Is there somewhere I can read about it?”
Academic: “I had a paper published in
a few years back, but you need access to . You’re not a student are you? If so your University Library will have a subscription.”
Andy: “No, I’m not. Sorry. Do you have a Blog?”
Academic: “It’s difficult for us as we need to publish original work or it won’t get accepted. So it’s not really possible to Blog.”
Andy: “How about once it’s been published?”
Andy: “I just discovered this great Blog by Dan Lockton about his research, do you know any others?”
Academic: “Yes, that Blog is great isn’t it. Let me think. Er, no I can’t think of any others.”
For a long time I’ve felt that I’ve been missing out on a wealth of academic information. Research I could use to demonstrate to people the value of usability testing, prototyping or some other design technique. Not to make more money but to help improve the Web experience for everybody. After one such conversation I actually looked into signing up to one of these academic journals but the cost was prohibitive. Unlike industry, it would seem that academia believe there is money to be made from sharing their knowledge, even if it has been created using public money.
This is a theme that was born out in a recent conversation I had with a lecturer. He explained that he was coming under increasing pressure from his administration to undertake original research because teaching just wasn’t paying the bills anymore.
I can definitely see this approach working in some disciplines like physics, biochemistry and engineering (Graphene anybody?) but I find it hard to imagine there’s a lot of money to be made from interaction design. So while I understand why private organisations may feel the need to hoard their discoveries, I believe that publically funded bodies have a duty to publish their findings for free and for the betterment of society.
This is starting to happen and I believe there are small but increasing number of free online platforms that provide academics with the credit they desire. However as academic publishing is big business, it is a trend that the traditional publishers are keen to resist, and as long as academic publishing is based on reputation, the well-known journals will continue to dominate.
I think industry has a lot to benefit from academia, but penetrating the academic world can be difficult. The London chapter of the UX Bookclub has been doing a great job of surfacing interesting papers for its members to discuss. However these kinds of bridges are few and far between.
In some small way I’ve also been trying to learn more about the academic world in an attempt to discover new speakers. I went to my first academic conference this year, but to be honest it was a bit of a struggle. I guess my expectations were two high as I was expecting to come away with some cutting edge research that was years ahead of current industry thinking. Instead I was shocked and dismayed by how out of date the talks were and had to sit through research that was presented as novel but was considered old news by industry. When discussing this with an academic friend of mine I was told that this was because the majority of sessions were from Masters Research and that I really needed to attend a conference based on PHD research to get the good stuff. So I’ve decided to attend CHI this year to see if I faire any better.
Thankfully more and more academics and researchers are speaking at industry conferences and publishing their thoughts on Blogs these days. So while I may have only been aware of three people back in 2007, I’m now following eight or nine and am keen to discover more. So if you happen to know any really interesting and well-written academic Blogs, please add them to the comments section of this post.
Designing in the Browser is Not the Answer | March 14, 2012
The argument for “designing in the browser” seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?
The reason is simple. The browser was intended as a delivery mechanism with HTML and CSS a means of describing content rather than defining it (a subtile distinction I know, but an important one). As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation. Instead this process is heavily abstracted through code. As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of cruft to the process.
Despite the ability to create rounded corners, drop shadows and gradients in CSS 3 (along with even more sophisticated effects using SVG and Canvas) it’s still preferable to present your richer design details as raster graphics. So designing in the browser forces you to do graphic production in one tool and then design layout in the other. Not only is this an inefficient process but it’s also the wrong way round. As such, “design in the browser” encourages a minimal design aesthetic based on the rendering capabilities of CSS. This may be acceptable for a small number of companies like 37 Signals, but I don’t believe this is desirable in most situations.
People seem to be treating “design in the browser” as a new idea, but in the early days of the web this was the norm. So it was only through the act of co-opting existing design tools like Photoshop that the quality of design on the web was pushed forward. Now I’m not saying that “design in the browser” will relegate us to 1999 style websites, as both the technology and our aesthetic abilities have moved on, but I do think it’s a step backwards rather than the great leap forwards as many people are suggesting.
This doesn’t mean that I believe that Fireworks or Photoshop are perfect tools and I’m fully aware of their inherent problems when it comes to the fluidity of the web. I just think that on balance and in most situations, these tools are the least worst options we have available. That’s not to say that all design must happen in Fireworks/Photoshop, or that no design should happen in the browser. After all I work for a company that believes in the power of HTML/CSS prototyping and does responsive design by default, so understand that a certain amount of back-and-forth is inevitable.
Until our tools evolve, traditional graphic design tools like Photoshop and Fireworks will remain the natural jumping off points for the majority of projects for many years to come. Designing in the browser isn’t the magic bullet many in the industry want (or are promoting) it to be. However I do think it’s a useful sign-post in what should be the true quest for a truly native web design tool.
Web Design Disciplines Explained Through the Medium of Dungeons & Dragons | January 27, 2012
First off let me apologise for the laboured metaphor I’m about to inflict on you, but I thought it could be entertaining to try and describe the web design industry using a medium I’m sure you’re all familiar with—Dungeons & Dragons. However I should point out that I’m no D&D expert, having played it last when I was 13. So please don’t leave comments to the line of “you got that all wrong as those character classes were changed in AD&D 2nd Edition, Unearthed Arcana.” or I’ll pull out my +2 broadsword and go Berserker on your ass.
In the world of Dungeons & Dragons, characters could have a variety of professions such as Fighter, Thief or Magic-User. These professions were loosely related to a characters natural abilities. So if you were intelligent you’d be well suited to becoming a magic-user, whereas if you were dexterous, becoming a thief was a good option.
In the real world, your natural interests and abilities will also dictate the career path you follow to some extent. It’s doubtful that you’ll have a natural ability in a particular discipline, but your innate attributes will make it easier for you to pursue certain careers than others. So if your a logical thinker, development is a natural avenue, while if you’re empathetic, people management is a good career. If you have both, you get to choose one or the other or maybe even combine those skills and become a scrum master.
In the world of Dungeons & Dragons, Fighters were the bedrock of any quest. For a new party, you wouldn’t get very far without a fighter or two to guard your back, while a group of fighters could easily operate on their own, without the assistance of other classes. The same is true on the web. Programmers are the fighters of the web. It’s entirely possible to start an online business with a couple of programmers and you”d be successful for a while at least.
Thieves are sharp, agile and good with technology. The hackers of the fantasy world. In a modern campaign you’d want at least one thief along to pick locks, disable traps and run interference. With their penchant to form guilds (The Guild of Accessible Web Designers anyone), Thieves were front end developers of the D&D multiverse.
Thieves and Fighters could make pretty good headway on their own, but throw an illusionist into the mix and you’ve got a powerful combination. Illusionists are learned in the arcane sigils (typography to you and me) and had the power to dazzle people with their magical incantations. Relatively useless straight out of college, they only came into their own at higher experience levels, where they become formidable allies. Illusionists benefit from being around higher-level magic users as they can swap spells and learn faster. Similarly design is typically a learned profession but novice designers struggle on their own. So they need lots of support from senior practitioners. However when designers start to become seniors themselves, they are amazingly powerful, and a good creative director is worth their weight in sharpies (£5,500 if you assume the average weight of a man is 62kg).
Clerics are the wise healers of the pack. Their job is to look after the spiritual and physical well being of the team. A little like a good project manager when you think about it.
Lastly you have the Rangers. Rangers require higher than average attribute scores across a range of different areas, so tend to be less common. Like Wizards and Thieves they are also a learned class, having to study things like tracking and animal lore. In fact, higher level Rangers even have the ability to cast certain spells or defuse traps. As such they are a bit of a hybrid. Rangers are great in open country and typically work alone. However they’re not much use in towns. So Rangers aren’t needed on every quest and are a bit of a specialism. To me, Rangers are the UX Designers of the D&D world. Highly trained specialists, of use in a subset of specific projects.
Characters in Dungeons & Dragons progress by gaining experience points which relate to the complexity of the quests they undertake and the level of the foes they defeat. If they do something themselves all that learning goes to them. However if they are part of a team the experience is typically distributed amongst everybody. So the more quests you undertake, and the bigger those quests are, the more you’ll progress in your careers. If you play infrequently and only accept easy challenges it can take you ages to move forward, while if you work with a small but experienced team on tricky adventures you’ll grow much faster.
The same is true with the web. Learning comes through experience and the more projects you undertake the better you’ll get. If you accept simple projects with little risk you’ll have an easy life but you won’t push yourself. It’s only by taking risks and working on projects that are slightly outside your comfort zone will you learn new skills and push your career forward apace.
With some character classes, new skills become available at higher levels. You could argue the same is true on the web. There are certain skills you would typically only pick up at higher experience levels and are unlikely to be present in junior practitioners. As such, your level of experience really does impact what you can and cant contribute to a project.
Now here’s where things start to get interesting. In D&D it’s possible for characters to follow multiple classes. However if you do this you have to split your experience across the different classes making progress much slower. In new of mid level teams, this isn’t so much of a problem. So a 2nd level Thief-Ilusionist can hold their own with a 4th level fighter. But a 6th level Theif-Illusionist would probably be outclassed by a 12th level Ranger.
This is also true in the real world. It’s totally possible to do both design and development, and in the early stages one will actually aid the other. But as you undertake one project after another you’ll find that it’ll take you longer to become an expert in either. So it’s great if you’re an all rounder in a team of all rounders, but becomes difficult to carve out a meaningful niche amongst a group of experts.
There is one caveat here and that’s that Bard character. Bards were a really weird class and therefore not something many people played. They had to have really high ability scores across a range of attributes. They also had to start out as a Fighter, then duel class as a Fighter-Thief and then finally duel class as a druid. It’s only after going through this long and laborious process that they could become a 1st level Druid and start all over again.
I think this is the position a lot of UX practitioners have found themselves in. Rather than going through the higher education track, they have worked their way thought the design and development professions, never settling on either. Instead they will get to a medium level of mastery before getting bored or distracted by something else. As such, there is a subtle but important difference between a designer and developer who does a bit of UX (think multi-class character) and a self trained UX practitioner (think a multi class character who took a specific set of steps in order to change class to a Druid).
And that’s it. My slightly laboured, incredibly nerdy description of the web design industry, as explained through the medium of D&D.
You have the initiative. What’s your next move going to be?
Visual Designers Are Just As Important As UX Designers | July 19, 2011
As I explained in my previous post, user experience design is a multidisciplinary activity which includes psychology, user research, information architecture, interaction design, graphic design and a host of other disciplines. Due to the complexity of the field a user experience team will typically be made up of individuals with a range of different specialisms.
On larger teams you’ll find people who focus on one specific area, such as user research or information architecture. You may even find people who specialise in specific activities such as usability testing or wireframing. This level of specialism isn’t possible in smaller teams, so practitioners tend to group related activities together.
Conceptually I believe you can break design into tangible and abstract activities. Tangible design typically draws on the artistic skills of the designer and results in some kind of visually pleasing artefact. This is what most people imagine when they think of design and it covers graphic design, typography and visual identity.
However there is also a more abstract type of design which concerns itself with structure and function over form. The output from this type of design tends to be more conceptual in nature; wireframes, site-maps and the like. One type of design isn’t any more valuable or important than another, they’re just different.
When products and teams reach a certain size or level of complexity, one person can’t undertake all these roles. When this happens, natural divisions occur. So in small to mid sized teams it’s quite common to describe people who specialise in tangible design as visual designers, while those who focus on more abstract activities are known as user experience designers.
Now we all know that visual design is an undeniable part of the way people experience a product or service, so it may feel a little odd that user experience designers don’t actually design the entire experience. It may also be confusing that when user experience designers talk about “the UX” of a product, they are often referring to the more abstract essence of the product as described through wireframes, site maps and the like.
This ambiguity can lead many visual designers to misunderstand what user experience design is, especially if they’ve never worked alongside a dedicated user experience designer. This has also led a lot of visual designers to mistakenly believe that because the work they create results in some kind of user experience, that makes them a user experience designer. While this may be true in the purely philosophical sense, this isn’t what people mean when they talk about user experience designers (try applying for a senior UX position without understanding user research, IA and Interaction design and see how far you get).
The term user experience architect was coined in 1990 but the roots reach back to the 1940s and the fields of human factors and ergonomics. We’ve had dedicated user experience consultancies for the last 10 years, and internal divisions before that. We’ve got numerous professional conferences attended by people who have been working in UX for much of their professional life. In short, User experience design is a distinct and well understood discipline that stretches back many years and isn’t simply a new buzzword to describe “the right way to design”.
Over the last 12 months I’ve come across far too many visual designers describing themselves as user experience designers because they don’t fully understand the term. Instead they’ve seen a few articles that explain how UX is the new black and decided to rebrand themselves.
I’ve also come across many fantastic visual designers who feel pressured into becoming user experience designers because they think this is the only way to progress their careers. It seems that due to a lack of supply, user experience design has somehow come to represent a higher order of design, or design done right. At best this is nonsense and at worst this is actually damaging to peoples careers.
So here’s the truth. Good visual designers are just as hard to find as good user experience designers. They have exactly the same status in the industry and earn pretty much the same rates. So you don’t need to became a user experience designer in order to take your career to the next level. Instead, surround yourself with experts, hone your skills and take pride in your work. With so few good designers out there, don’t go throwing away much prized and hard earned skills under the mistaken belief that you must become a UX designer in order to grow, as that’s just not the case.
Are SEO practitioners the digital equivalent of bankers? | April 1, 2011
This morning I’m going to be standing in front of a room full of SEO people to let them know how I feel about their industry. Here’s a rough outline on what I’m planning to say…
Capitalist society needs the banking institutions. It needs them to raise money, store money and move it around the world. Bankers provide the financial lubrication to grease the wheels of commerce and keep the market moving. However If I ask how many of you respect the banking institution or feel that it’s an honourable or worthy profession, I suspect few hands would be raised.
The recent banking crisis has exposed what many of us knew all along. That banking is a murky profession which skirts the edges of the regulatory bodies to probe for weaknesses in the system in order to seek out advantageous outcomes for their clients. As soon as one regulatory loophole is closed, the geniuses in Wall Street will discover another, more devious loophole to exploit.
I’m not saying that bankers are criminals, although some obviously are. The regulatory system has been constructed to prevent people from creating an unfair advantage and gaming the system, but game it they still do. And is it any wonder? The system is porous, the potential gains are high, and the bankers face constant pressure from their clients and peers to perform. So it’s easy to understand why so many of them work the system and why so few get found out.
I think one of the problems most people have with the banking industry is that they don’t really understand why these people are worth the fat bonuses they pull in. Sure they create monetary value for their clients, but the work their do is somewhat soulless and rarely adds much cultural or artistic value to the world. Their singular purpose seems to be gaming the system and reaping the rewards. Surely there is a more honourable way of making a living?
When I think about the banking industry, I’m reminded of the world of Search Engine Marketing. They too are trying to find weaknesses in a set of rules designed to level the playing field, in order to create a competitive advantage for their clients. It’s just that rather than these rules being laid down by central government, they have been developed in the labs at Google.
Google’s algorithm is explicitly designed to seek out high quality content while preventing external agents from manipulating the results for commercial gain. Back in the early days of SEO, bedroom hackers would gain a secret thrill in gaming the Page Rank algorithm and boosting their site to the top of the rankings. I know, I was one of them. Google quickly caught on and tried to damp down this effect, and the SEO arms race was born.
Agencies came up with all sorts of techniques to usurp the engines, from link building and keyword stuffing, through to doorway pages, cloaking and content farms. Out of this mire, the idea of “white hat” and “black hat” SEO emerged. The conceit being that “white hat” SEOs were honourable and law abiding while “black hat” SEOs tried to play the system. The truth, I believe, is slightly more nuanced.
The Search Engine industry is predicated on it’s practitioners ability to game a set of rules laid down by Google. As such, there can be no real “white hat” or “blank hat” practices, only varying shades of grey. Few SEO people would admit to dabbling in the black arts, but I suspect most of them do, behind closed doors and in the privacy of their own offices.
There are undoubtedly good people in the industry, just as there are good people in the banking world. In fact I’d say that the majority of practitioners fall into this category. I just struggle to accept an industry which exists in the same continuum as blog spammers and which is forced to label its members as “white hat” and “black hat”. After all we don’t talk about “black hat” doctors, “black hat” hairdressers or “black hat” designers. So by using these terms, the industry is knowingly complicit in the problem. In fact there exists an almost adolescent glee that they are involved in something slightly naughty.
I understand the need for SEO. After all, Google drives the engines of e-commerce and SEO companies are simply the grease on the wheels. However I find it a rather hollow and soulless world in which to work, buoyed by the thrill of beating Google rather than by creating truth or beauty.
A think a good barometer of the industry can be seen in the outrage many felt over the recent “farmer” update by Google, which downgraded sites it believed were using content farms to game the system. Like the indignant gambler ejected from a Vegas casino suspected of card-counting, many in the industry cried foul. However if you choose to play this game, you can’t really complain if you get ejected, even if this time you had nothing to hide. It’s Googles party and deception in the industry so rife, it’s one of the risks of the game.
Call me an idealist, but I believe that our ultimate goal should be to create user value, not just unqualified traffic. We can learn how to do this by studying user behaviour, uncovering user needs and satisfying these needs through relevant and appropriate content.
I realise that the search engine industry has been moving in this direction of late, but the drivers are somewhat different to mine. While I believe that good content attracts happy users, the SEO industry believes that one way to get users is to create good content. The ultimate result may now be the same, but the reasoning is more cynical and manipulatory. It is also a result of their less than pristine techniques slowly being cut off by Google, forcing them to focus on quality content over link building campaigns.
So Im going to make a request to any truly “white hat” practitioners out there. Please distance your self from the world of SEO, stop talking about search engine rankings and start helping your clients deliver real value to their users. Stop defining yourself by the discovery medium and focus on the content itself. I don’t mind what you call yourselves, be that digital marketers, content strategists or simply web designers. But whatever you do, remove the word “search” from your job title. It’s tainted and devalued and you’re much better than that.
Opera vs Microsoft | December 18, 2007
As you’re all probably aware, Opera founder Hakon Lie recently filed a complaint against Microsoft with the European commission. The first part of the complaint seems fairly reasonable, at least from a certain perspective. Hakon complains that Microsoft are using their desktop monopoly to force Internet Explorer on users, to the detriment of other browser vendors. You could argue that other desktop vendors like Apple use similar techniques, and you’d be right. However the issue has less to do with software bundling and more to do with the market effect.
Say there was a level playing field with Apple, Microsoft and Linux all having equal market share. If They each bundled their own browsers into the OS, no one company would dominate. So success in the browser market would be a result of normal market forces such as quality, price, marketing budget etc. However with a 90% market share, Microsoft are effectively a monopoly. If they bundle a new application or technology into their OS, they can dominate the competition and own the market with very little effort on their part.
A lot of people would argue that Microsoft has worked hard to gain market dominance, so why shouldn’t they exploit the fact? After all, if Apple were in the same position, wouldn’t they do the same? Well the answer is obviously yes, but that’s not quite the point. This isn’t a Microsoft vs Apple debate, it’s about preventing any company using its size to drown out the competition. Without viable competition, we all end up worse off.
This has in fact already happened in the video player market. By bundling Windows Media Player with their OS and discouraging computer vendors from installing other players, Microsoft were able to build up a dominant position very quickly. Why bother providing content in Quiktime or RealPlayer format when you know that 90% of visitors will have Windows Media Player installed. Thankfully YouTube and Flash has managed to put a stop to that debate and re-introduced some much needed competition.
Interestingly this is exactly how the European Commission viewed the situation, and ruled that copies of Windows sold in Europe should come without Window Media Player Installed. Annoying for Microsoft, but potentially good for competition.
The complaint from Opera seems in part a result of this case. However you do have to wonder why theyâ€”or anybody else for that matterâ€”didn’t try this avenue years ago. Back in 2000 Microsoft used it’s monopoly to win the browser wars and pown the market. It’s these monopolistic practices that left web development and the advancement of web standards in the doldrums for so long. With no credible competition Microsoft didn’t need to advance it’s browser technology and left us poor web developers pulling our hair out.
Like many monopolies, Microsoft spent the next few years acting like an absentee landlord and failed to see the groundswell of opinion turn against themâ€“either that or they just didn’t care. Along came Firefox, and while it didn’t quite topple the Internet Explorer crown, it introduced credible competition back into the marketplace. This forced Microsoft to start paying attention to it’s Browser again and resulted in IE7.
Had Opera done this 5 years ago, I think the majority of developers would have been behind them. However Microsoft are now back in the game and things appear to be moving forward, at least on the browser front. Instead of being the champion of progress, this move runs the risk of looking like a marketing ploy or a cynical manoeuvre to claw back some market share.
Despite the possible business motives behind this move, I do think it’s worth exploring some more. If Microsoft were no longer able to bundle Internet Explorer into Windows, what would happen? Well first off, computer manufacturers would be free to install whatever browsers they wanted on the machines they produced. We’d probably see Firefox take an upwards turn, and possibly Opera and Safari as well. Hopefully company IT departments would probably follow suite. Assuming Microsoft wanted to protect it’s market share, they would be forced to pick up the pace of innovation and create a browser that people actually wanted to download, rather than one that was there by default. This would help stimulate competition and we’d all benefit. Unless of course Microsoft decided that the future of the Internet was outside the browser and use it’s dominance elsewhere.
The main thing that irritates me about the Opera complaint is the fact they they bought web standards into the mix. I think standards are important, but I believe they should be voluntary and not enforceable by law. By conflating the two issues, I feel Opera has significantly weakened their argument. The cynical side of me wonders if this was purely a marketing ploy to get the anti Microsoft standardistas on their side. If it is, I fear the ploy may have backfired.
Alternatively it could just be the result of frustrations within the CSSWG. There have always been accusations of stalling techniques being used by companies to prevent disadvantageous features being included in the spec. So maybe this is just a last ditch attempt to force Microsoft to adopt some unpopular features like font embedding. Either way, I do share some peoples concerns about how this will affect the working relationship within the CSSWG. I realise that companies bring about spurious legal claims as a matter of course these days, but this one somehow feels a little closer to home than normal.
That being said, I don’t think the complaint by Opera and the obvious failings of the CSSWG have much in common, so I’ll leave that discussion for another day.
Layout Grid Bookmarklet | July 23, 2006
Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet
The above bookmarklet simply applies a layout grid image to the body of the page. I have also created a Layout Grid Overlay Bookmarklet which creates a div, positions it absolutely and then applies the background image to the div. Because the image is transparent, you get a nice overlay effect. By changing the position of the div to “fixed” you can also create a nice Layout Grid Fixed Overlay Bookmarklet which may be useful on occasion.
[UPDATE:] Marcus Breese just emailed me a show/hide layout grid bookmarklet, which is great becasue now I don’t have to make one. Thanks Marcus.
Select Box Usability Madness | May 30, 2006
Select boxes are difficult to use at the best of times, especially when you have to navigate down a very long list, such as a list of countries. Luckily, information architects normally order their lists alphabetically. This helps support known-item searching, as you can quickly scroll down to the entries starting with the same letter as the one you’re looking for, making things easier to find.
I was signing up for a new AIM account recently, and had to fill in my country details. This was the first usability gotcha in my mind as I really couldn’t see why an IM service would need to know which country I’m from. However I let that one slide as a clicked on the select box, and was presented by the following screen.
I’m based in England, which is part of Great Britain as well as the United Kingdom. However most websites use the United Kingdom, so this was the label I was searching for.
Some companies with a large UK user-base add a United Kingdom option near the top of the list, usually below the United States. This makes a lot of sense as there is no point forcing people to scroll down a long list of options, if the majority of visitors are from one or two countries. I did a quick scan for the United Kingdom at the top of the list, but couldn’t see the option, so assumed the user base was more diverse.
As a side note, it would be a nice usability touch if sites checked your IP address, made an educated guess at your location, and displayed this as the first option. Just a thought!
If this was a short list, I’d probably scroll down to the entries starting with my letter of choice. However as this was a long list, many people would type the first letter of the word they are looking for and be taken to that point in the list. I dutifully typed in “U” and expected to be deposited somewhere near the United Kingdom option. This is where things started to get a little confusing.
As you can see from the image, there was no United Kingdom option. Knowing that some people list it as Great Britain, I typed in “G” to see if was there. After a quick scan I couldn’t see Great Britain, but I did notice a listing for the United Kingdom.
You may think this was a small issue, as I did end up finding my country. However the whole process left me feeling a little confused, annoyed and mistrustful of the application.
I was expecting an alphabetically ordered list, and in most places that’s exactly what I had. However the UK was in the alphabetical position of Great Britain, despite being listed as the United Kingdom. I was happy to stuggle through, but that wouldn’t be the case for everybody.
Looking down the list, I noticed a lot of similarly annoying anomalies. For instance, in the first screenshot you’ll notice that the United Arab Emirates (commonly known as the UAE) is listed in the alphabetical position for Arab. Similarly the Netherlands (or Dutch) Antilles are listed in the position of just Antilles. In the second screenshot, Saint Vincent is listed in the “V” position, and in the third screenshot, Micronesia is listed under “F” for Federated States of Micronesia.
It looks like somebody has tried to be extremely clever with the naming convention on this list and ended up making the whole thing confusing for everybody.
How to be a Web Design Superhero | February 2, 2006
Inspired by the title of my SXSW talk, I’d like to know what you think it takes to be a web design superhero, and who your web design superheros are?
Web Design and Development Trends for 2006 | December 8, 2005
The Web Standards movement has increasingly been gaining speed over the last couple of years. Once the preserve of a few high profile bloggers and evangelists, more and more developers have become wise to the benefits of meaningfully marked-up documents that separate content, presentation and behaviour.
2005 saw a rising demand for standards based developers, both from web design agencies, and remarkably also from end clients. 2005 also saw the success of @media, Europeâ€™s first conference devoted to web standards.
I think 2006 will be the tipping point for standards based development as more and more companies come see web standards as a core part of their process.
The last few months of 2005 saw a huge flurry of activity, with a new high-profile web application launching almost every week. With advanced interactivity not seen before on the web, 2006 looks set to be the year of the web application.
2005 also saw the emergence of Ruby on Rails, the combination of an obscure yet elegant programming language with a rapid application development framework. Originally created by 37 Signals for their Basecamp project management tool, Rails promises unrivalled development speeds, some say as much as ten times faster than traditional methods. Rails also boasts close Ajax integration, and looks set to be the default development framework for many web 2.0 applications.
2006 is going to see Ruby on Rails development take off in a big way, with Rails developers never short of work. There will be an increasing number of hosts offering Rails support, as well as a slew of new books on the subject.
With 2006â€™s focus on web applications, slick user interface and interaction design is going to become even more essential. Some applications will attempt to mimic the desktop environment, and fail abysmally. Instead the trend for simple and elegant solutions will continue.
As resolutions increase in size, big fonts will dominate the first half of the year. With the success of the Firefox logo, the new breed of web 2.0 applications will choose soft, three-dimensional illustrative logos that pay homage to the icons of their desktop equivalents.
Designs will soften, with more rounded corners, pastel colours and hinted boxes. Drop shadows and gradients will remain, but in a much subtler form to avoid visual clutter. 2006 will also be a year of transparency, with a profusion of fade effects and the PNG becoming the rightful heir to the image crown.
Last, but by no means least, we will see the death of IE5.x and the birth of a new, improved Internet Explorer in the shape of IE7. With improved standards support, numerous bug fixes and native PNG transparency, IE7 will hopefully make all our jobs a lot easier.
Those are my predictions. What do you think 2006 will bring?
The New Face of Flash | September 26, 2005
Some of you may be surprised that prior to developing an interest in web standards, I was actually an ActionScript programmer. I used to really enjoy building flash based games and application, although I tried to steer clear of the ubiquitous “skip intro”. However I became increasing frustrated with the Flash development environment. By the time Flash MX came out, ActionScript was a fairly reasonably formed object oriented programming language. However all of your development happened in an environment designed for visual animation. Frustrating to say the least.
By the time Flash MX 2004 came out I was so fed up with Flash, I threw in the towel and never looked back. Since then my view of Flash has been locked in 2003. Flash to me meant sites opening up in full sized windows, user interfaces taking 10 seconds to build as elements would fly in from one side, fade in and assemble themselves, only to fly apart when you clicked on a navigation element and rebuild again on the next screen. Flash 99% bad indeed.
The other day I popped into Borders coffee shop for a much needed break from writing and bumped into friend and Flash supremo, Aral Flash Ant Balkan. We got chatting and in the space of half an hour Aral changed my view of Flash for ever.
Aral was working on a Flash application and we got talking about developing applications in flash. The first thing that really shocked was when Aral started talking about running user tests for his applications. A Flash developer knowing what user testing was, let along running one? Never heard anything like that before!
We started taking about why you would choose Flash over a more tradition approach and one of the main things was obviously the ability to maintain state. We briefly talked about the ability to do this in regular HTML pages now, using AJAX. However Aral quite rightly mentioned that what people are starting to do now using AJAX, Flash developers were doing 3-4 years ago. As such, the Flash developer community had learnt a lot from their early mistakes, the same mistakes AJAX developers are making now. Also the Flash client and server technology is a good few years ahead of the AJAX community.
Hmm, interesting, but I needed more convincing. Flash still seemed like a very clunky way to build applications. This is when Aral introduced me to MXML, an XML user interface language much like XUL. Rather than building his interface in Flash, Aral was editing XML files. Adding a <mx:TextInput /> tag would create an input box, adding a <mx:Button /> would create a button element. Aral explained that the MXML file was really intended for presentation only, and all the data and logic were dealt with elsewhere. Hmm I thought, separating presentation from data sounds familiar, I wonder where I’ve heard that before?
Aral then started walking me though his ActionScript framework. No longer did you need to embed ActionScript in your Flash files. It could all be held externally as .as files, the logic and behaviour being separated from the display. The framework really did look like any other object oriented framework except this was written in ActionScript and not PHP or Java.
It struck me that Aral was coming at things from exactly the same angle as me, wanting to build more usable applications, separating data from presentation and behaviour etc. He was just using a different tool to achieve the same goals.
It really made me think about how much Flash has developed in the last few years. What the standards and open source community have been talking about for years â€“turning the web into an application platform using technologies such as XUL and AJAX- flash developers have been doing for a while now. Obviously I’d prefer to be using open technologies rather than expensive and proprietary ones. However it does make you think and give you a possible glimpse of what Web 2.0 really could be like.
Three Books by Andy Budd | September 19, 2005
As Michael Heilemann quite rightly said, its not every day you can go to amazon.com and find your name listed as an author on a book. Its even less common to find your name listed on three, one of which you didn’t even write!
As Michael mentioned, myself, Richard Rutter, Simon Collison, John Oxton, Phil Sherry and Chris J Davis have all contributed a chapter to the forthcoming book, Blog Design Solutions. Each chapter tackles a single blog design, from graphic creation, through XHTML/CSS production, to implementation into a specific blogging application. My chapter covers the old grandaddy of blogging applications, MovableType, while the other chapters cover Expression Engine, Textpattern, Wordpress and rolling your own using PHP. Each chapter comes with it’s own set of ready to use templates and should be great for people wanting to sample different blogging applications to find the one that suits them best.
I wrote my chapter just after SXSWi, so it has actually been quite a while since I was involved. However one of the best things about this book was working with such a talented group of people, many of them proud, pant wearing Brit Packers.
So that is book one dealt with. How about book two?
Well book two is the one I’m really excited about as its my first full CSS book. Entitled CSS Mastery: Advanced Web Standards Solutions, this book is scheduled for release on December 19. Probably too late to buy as a Christmas present, but a perfect way to spend those Amazon book vouchers your auntie Dorris got you.
As the title suggests, the aim of this book is to help intermediate CSS developers push their knowledge to the next level. The book will cover some of the most useful CSS techniques around, brining them together in one neat and easy to reference package. With the basic techniques covered, Cameron Moll and Simon Collison will be putting them into action with two great case studies.
So if I’ve been a little quite the last few months, that is one of the reasons. The other reason I’ll explain tomorrow.
OK, Andy, so that is two books you have written, what about the one you haven’t written. Well, I was supposed to be writing a small CSS book 18 months ago, but for various reasons, had to back out. Russ Weakly picked up the mantle and the book, CSS in 10 minutes is going to be published in November. Rather unfortunately, somebody must have forgotten to tell the book cover designers about the change of authorship, as they have left my name on the cover by mistake. I’m sure this will get sorted soon, but I thought it was rather amusing that the first book I see with my name on the cover actually had nothing to do with me.
Web Design Publications | September 2, 2005
In the UK, there are a reasonable number of magazines dealing with the web. Unfortunately most of them are aimed at the hobbyist rather than the professional market. As such, they are full of website reviews and “How to” tutorials. Of the magazines available, the only ones I occasionally dip into are Computer Arts Magazine and Digit. Sometimes I’ll glance through New Media Age but it pretty much reads like any other industry trade journal. Company X wins contract from company Y. Creative Director from Company A moves to company B. You know the sort.
So I was wondering what the state of web magazine publishing was like in your country? Do you have any great web design magazines that you read every month? If your work was to be featured in one design or technology magazine, which one would it be?
Desert Island Fonts - Final Round | July 5, 2005
If you could only buy 6 fonts, what would they be?
The original sans-serif superstar, Akzidenz was turning tricks back when Helvetica was just a twinkle in Max Miedinger’s eye. I much prefer the elegant yet unrefined quality of this typeface’s letterforms over the newer, overused swiss variants. It’s sort of like an LP record… but it never skips.
For a period of about two years, I attempted to inject this font into every single project I worked on. Even if I couldn’t fit it into the main scene, I screened it back somewhere in the distance just to feel better about myself. For a brief time, I was actually creating design projects for the sole purpose of using Engravers Gothic in them. It was at this point that I sought professional help.
It’s quite simply the most readable sans-serif typeface ever invented… for print at least. On the web, that’d be Lucida Grande, but thanks to Apple, I don’t really have to buy that now, do I…
Designed by Christian Schwartz for House Industries, Neutraface captures the 1950s stylings of architect Richard Neutra in a beautiful typeface meant for application on the screen, in print, and in metalwork. If you are ever in need of a classy retro face, they don’t get any more polished than this.
Like a good mullet, this typeface has something for everyone. Its clean lines make it ideal for logotype, headings, and other professional applications, but its curvy flourishes keep it from looking sterile or uptight.
Originally designed in 1932, and then expanded to multiple weights and widths in the 1990s by David Berlow, this typeface can be made to look futuristic or retro. I’m partial to flexible faces, and Agency is second-to-none in this regard. Use it for old movie posters. Use it for your pathetic Star Trek Convention flyers. Agency feels at home in any environment.
Avenir, Avenir, Avenir. I’ve abused this typeface in both web and print work, and it’s held up to the abuse with flying colors.
Also abused in both web and print work, Palatino is undeniably versatile and (imho) a much better option overall than Times.
I’m counting down the minutes until this typeface is available. No joke.
Someone please give me an excuse to use this in my next project. I take that back — no excuse needed.
I’m a sucker for classic Roman letterforms, and it doesn’t get much better than Trajan.
I stumbled across this gorgeous typeface just recently, and it’s one of the hottest italics I’ve had the pleasure of using in recent months.
Akzidenz Grotesk is the classic alternative to it’s dowdy and overused relation, Helvetica. If you ever feel the need to use Helvetica, resist the urge and try Akzidenz instead.
Originally designed for the signage at Charles De Gaulle Airport in Paris, Frutiger is a beautifully fluid and legible typeface. Without doubt the most influential typeface in the past 30 tears, Frutiger has been the inspiration for many amazing fonts including the excellent Myriad Pro.
Futura is a wonderful typeface, although is can feel slightly sterile at times. Adrian Frutiger set about “humanizing” Futura and created Avenir in 1988. Avenir is a beautiful typeface but is restricted to just 12 weights. In 2004 the typface was completely revised and Avenir Next was released with a stunning 96 weights. If you are looking for a modern sans, you need look no further.
Tired of Futura and Gill Sans? Neutraface is a beautiful art-deco alternative. Modern yet retro, this typeface comes with loads of ligatures and 7 beautiful figure styles. If this typeface was a drink it would be a Vodka Martini, shaken, not stirred.
DIN stands for Deutsche Industrie-Norm, the German industrial standard. Originally used for German road signage, this typeface was the darling of 90’s graphic designers, and like FF Meta, is starting to make a comeback. With it’s wide open letter forms DIN is am extremely clear and legible typeface, great at any size.
If I had to choose one serif typeface it would be Mrs Eaves. Named after John Baskerville’s wife, this stylised version of Baskerville is loved by graphic designers around the world. Mrs Eaves is a modern serif that retains an air of antiquated dignity. Playful without being too scripty, it’s a fully featured typeface with a beautiful collection of ligatures.
Desert Island Fonts - Round 3 | June 27, 2005
If you could only buy 6 fonts, what would they be?
I’d have to have this one, as it’s used in the SimpleBits logo. I really dig the “e”.
Especially “Condensed”. Can’t live without this one for tiny interface bits.
I just purchased this for a project, and I’m loving it’s friendly roundness. So much better than Arial Rounded.
So common, but so euro-sans great.
I need a serif. This one is quite nice.
A highly screen readable, modern sans-serif. And it’s our corporate typeface.
A serif accompaniment to Lucida Grande (and designed to be readable on screen and in print). The italic is also infinitely superior to Georgia.
An elegant, highly readable Garamond derivative by Robert Slimbach (who also designed Myriad). My serif of choice for printed body copy. Works well on screen for headings and has a fabulous true italic.
A tight, tidy sans-serif that works well with Minion. Would be good for clients keen on classic rather than modern typographical feel.
Because you should always have a grotesque in your armoury, and this is a classic designed by Adrian Frutiger. Comes in heaps of different weights.
A fairly random sixth choice, chosen for its flexibility. Modern sans-serif for headings that works well in all sizes.
Good big and small, for headlines and body copy. It’s a workhorse a sans serif.
The grand daddy classic. It hurts to think of how many fonts were based off of Garamond (like the also gorgeous Sabon). It’s a beautiful achievement and a quintessential face.
One of the only pixel fonts that really matters, and includes the best pixel italic around. It’s more readable and practical than Mini 7, and carries quite a bit more personality.
Dependable and flexible as hell. Caslon drips with sophistication.
Stylish and subdued in the same breath, and nothing more than it needs to be.
A new face on the block, but oh so grand. Perfectly readable at minute sizes, breathtaking in a headline and a pleasure to set. You could use this font 10 different ways and not get sick of it.
Desert Island Fonts - Round 2 | June 20, 2005
If you could only buy 6 fonts, what would they be?
You just can’t go wrong with Helvetica. It has a timeless feel to it, and is one of the most perfectly readable fonts at any point size. It goes in and out of season, but it is guaranteed to remain a solid choice no matter what’s in fashion.
It’s almost become a clichÃ© at this point, but Gill Sans still warms my heart. It’s got personality a thousand times over no matter how often you see it, and it remains distinct no matter how often it is over-used. Great on business cards at low point sizes to retain readability with character. Great on large format printing for the exact same reason. It makes for a perfect counterbalance to almost any serif font that you would use for body copy.
As one can tell from my logo mark, Bodoni is one of my favorites. A classic that projects confidence, sturdiness and a calm energy no matter how wild the design. Bodoni is history, and is a constant reminder of how our language and our art evolved over hundreds of years. I love to use it for body copy for book design.
Reminiscent of the classic fonts of the Renaissance, Abode Jenson does a great job of capturing that hand-cut feel of the master typographers of old. It’s a great font for body type, but also work wells for headlines. Adobe’s Pro version has plenty of ligatures, small caps, swashes, European characters and old style variations on characters to keep the most demanding type connoisseur content.
Easily one of my favorite grotesque style fonts. This font is perfect for any headline or large format printing. It also does a damn good job with captions.
These are my “safe” choices. They are the ones I find I turn to over and over when stuck in a design problem, or when needing to ground my work in a solid, confident, timeless type face. So, for the last choice, I’ll pick something I’ve been experimenting with as of late that I find interesting and out of the ordinary.
I love the hand drawn characters in this font. Call me a fuddy duddy, I don’t care, but lost is a time when people’s penmanship was so interesting and full of character.
A wide range of sans serif weights and styles within one font package
I use this to death - probably should be banned from using it
Great for movie posters and older atmospheric Museum-style sites (though the lack of lower case is a pain)
Nice serif font
Range of serifs and semi-serifs
Number one has to be Helvetica. Why? Well, for me, it communicates European culture. Also I think it has the perfect lower case ‘e’.
Mrs Eaves / Baskerville
Mrs eaves is probably the best interpretation of Baskerville, particularly it’s ligature set. Distinctive typeface, with a contemporary balance.
Can’t beat a bit of Garamond. Wonderfully legible and sophisticated without trying too hard.
The Helvetica of the 90’s. Used to death during that decade but it’s still a timeless classic.
If you ever need a typeface to say ‘British’, this is it. Although the lower case ‘a’ at heavier weights is pretty grim.
Verdana (but only at a small size)
No list would be complete without Verdana. A relative baby in the world of typeface design but it has helped define a medium. Superbly legible at small size.
Desert Island Fonts - Round 1 | June 15, 2005
If you could only buy 6 fonts, what would they be?
It has to be doesn’t it? THE timeless classic - not the most beautiful typeface (more utilitarian), but certainly the most adaptable, and the full family is essential. Helvetica Neue Light has been overused on anything to do with health/lifestyle, but its still good.
I’ve only recently cottoned on to this one, but works as good as a display font as it does for body text. What’s good enough for Veer…
A bit of Identikal goodness, this is the face I’ve adopted for my logotype, so that’s an must.
The other sans-serif that I use. Thirstype’s contemporary sans-serif, but not one that will date too quickly. Hopefully this will be an Open Type font soon, and save the current nightmare of my font menus.
I guess I had to include a serif in this list, so this gorgeous face from Emigre with it’s sumptuous ligatures gets my vote. What’s good enough for Radiohead…
A very useful dingbats font. Mainly map symbols, but many make a good starting point for little icons.
If I were stuck with one sans serif font for the rest of my life, this would be it. No one ever got fired for using Futura in a logo. Maybe its not too creative, but you can’t argue with its elegance.
More people ask about my use of Ocean than any other font. You don’t see it used much at all, but it’s truly beautiful. Note the subtle diamonds on the “i” and “j”. We use the font at firewheeldesign.com for our headline text.
Another Firewheel favorite… works great at large and small sizes. Great ligatures.
The quintessential pixel font. Gotta have this if you’re into digital design.
Quite possibly the best looking pixel font there is. If I have a little more space to work with, I’ll use Odyssey over Mini 7.
Because sometime you’re going to need a script-ish font, and this is my current favorite.
Take Helvetica and throw it in the trash. Myriad has long been my sans-serif pick up truck and no overuse by Apple websites is going to change that. With Myriad around there is simply no need to be using Helvetica or that awful Microsoft knockoff Arial.
If anything Frutiger makes the list because this was the primary typeface for Studio Archetype, which is my all time favorite web design shop. Frutiger is a nice change of pace from using Meta FF throughout the years.
It’s the only serif family that I care to use anymore. Unlike other Times New Roman forgeries, Minion has it’s own look and feel that gives off a nice hot metal type look from the days of academia. The small caps alternate makes titles a joy.
There’s always a need for a good script font and after running through the gambit, Bickham continues to please the eye with it’s clean curves and plethora of alternate beginning and endings.
I love condensed type and EF Nord stands tall among other, more popular faces but this one has a killer ‘g’ and that makes it worth having alone.
I have tried several times to buy this font without success. Designed by an independent font designer who lives in Japan and doesn’t read/write English. I even enlisted the help of Steven from Typographi.ca and his global network but never got through.
The Ideal Web Team | April 26, 2005
Good things come in small packages and I believe the ideal web team consists of around 5 people.
To start with you need somebody to bring in the business. This person obviously needs to be a good salesperson, but not in a pushy, telesales kind of way. They need to be confident and charismatic, comfortable presenting to the board or mixing at networking events. As they will be dealing primarily with other business people, it helps if they come from a business background. However they still need to have a solid understanding of the web.
Next you need somebody to manage and run the business. This person would be responsible for keeping projects on track, on time and on budget. They have to have excellent people management skills and need to be highly organised. They’ll be ones keeping the office running, the wages paid and the accounts in shape.
Sometimes called a producer, information architect, or user experience designer, it’s this persons job to work with the client to shape the direction of the project. This person will work out the strategy, craft the documentation and steer the project to a successful conclusion. This person will need technical, creative and managerial skills and will probably have worked their way up from a design or production role.
For most web projects, design accounts for less than 10% of the workload. Gone are the days of the dedicated visual designer. Instead, the ideal web team needs a hybrid designer who’s as happy sitting in front of Photoshop as they are coding up a stylesheet. As well as being a being a great visual designer and knowing everything about web standards, this person needs to have an intimate knowledge of usability, accessibility and universal design.
Last but not least, you need a talented back end developer. More and more web design jobs are actually mini web applications, so programming is taking up much of the project cycle. However rather than an ivory tower developer, you need somebody who understands people as much as they understand code. As such this person needs to be a strong communicator.
For small teams to work well together, there needs to be a good overlap of skills. Each person needs to have an understanding of what the other person is doing and the problems they face. These skills will overlap the most with the user experience designer who’s job it is to direct the project. Each team member needs to be a good communicator and happy talking to clients, attending meetings or running pitches.
Labels are always a difficult one, but if I had to label these roles they’d be.
- Sales and Marketing Manager
- Project Manager and Office Manager
- User Experience Designer
- Front End Designer/Developer
- Back End Developer
That’s my ideal web team. What’s yours and why?
What's in a Name | April 18, 2005
Most mature industries have pretty fixed job titles and roles. Take the construction industry for instance. You’ve got Architects, Engineers and Draftsmen. You’ve got Electricians and Carpenters, Bricklayers and Plumbers, Foremen and Site Inspectors. Each one has a defined role and if you met one down the pub, you’d have a pretty good idea what their job entailed.
The movie industry is the same. Every film will have a Director and a Cinematographer. There will be Producers, Actors, Special Effects people and Stuntmen. Each person knows roughly what the other does and how all the roles fit together to produce a great â€“ or not so great â€“ movie.
Because the web design industry is pretty new â€“ practically it’s about 10 years old â€“ we are still in the process of defining our roles. There is also a size issue at play here. To work efficiently, large organisations need to be able to define roles. However in smaller companies, roles are often blurred as people are forced to wear multiple hats. While there are a few large web design companies, over 70% of web companies in the UK employ ten or less people. The smaller companies make up the bulk of the industry and it’s these people who are shaping the industry.
Until recently I wasn’t particularly bothered about having a title. I worked full time for a small web design agency and never really needed to succinctly describe what I did to another person. When people asked what I did for a living I’d usually tell them with an embarrassed shrug that I was a web designer.
I say “embarrassed shrug” for a couple of reasons. Firstly where I live, everybody is either a “web designer”, a “musician” or a “DJ”, and usually all three. Secondly, the term web designer has developed a bit of a stigma of late. In the late 90’s, being a web designer carried some social currency. It meant you were young, smart and professional. Now everybody “does” web design from the 14 year old next door to my hairdresser. Web design has been devalued from a professional endeavour to a trade at best and a hobby at worst. This may sound a little elitist. It’s not meant to be. I love the fact that web design is so accessible. If it wasn’t I wouldn’t be here today.
If you work for yourself or a small company, the title web designer is probably sufficient. However when you want to move to your next job or market your skills to a wider audience you need to do two things. Firstly you need to be able to explain to potential employers and clients what you do as succinctly as possible. Secondly you need to be able to differentiate yourself from potential competition, and the hordes of hobbyists out there.
Before going freelance, I thought long and hard about exactly what it is I do. The obvious choice was visual design and front end development. Obvious because it’s such a nice, distinct and easily marketable package. I come up with visual designs and then translate them into XHTML and CSS layouts.
However, that’s only a fraction of what I do on a daily basis. One of my big interests is usability. At client and internal meetings I’m the person thinking about how the system is going to be used. I’ll work with the client and my team to make sure the goals are set and the system is actually doing what the client wants it to do, in the simplest possible way. I’ll work up use-cases, user flows, wireframes and navigational schema. I’ll write user survey questions , plan and implement usability tests.
Related to this is Information Architecture. I’ve always thought of Information architects as creating taxonomies and controlled vocabularies. Yet a large part of what I do is pure IA. Planning site hierarchies and naming conventions, running card sorts and contextual surveys.
I know many people in the web design industry who do similar work to me, but no two people seem to share the same job title. Some people would call this role a Producer, although others would say that a Producer is more like a Project Manager. Some people would call this role an Information Architect, although I personally think that Information Architect doesn’t necessarily convey the scope of the work done. Some people have started using the terms “Big IA” and “Little IA” to make the distinction, however I feel that belittles the more academic side of IA somewhat.
Currently there seem to be so many job titles floating around. Some of the ones I’ve toyed with in the past include:
- Information Architect
- User Experience Designer
- User Interface Design
- User-centred Designer
- Interaction Designer
- Information Designer
- Web Producer
- Project Manager
- Senior Designer
- Team Leader
- Creative Director
The term I currently favour is User Experience Designer. It’s a term that focuses squarely on the user and is closely related to User-centred Design. The User Experience Designers role is to manage the strategic vision of the project. It’s their job to work with the client and design/development team to define the project and then make sure that definition is met. They write the specs, create use-cases and wireframes. They act as the first port of call when clients want to discuss technical or strategic issues and are ultimately responsible for the success of the project.
What does your role entail and what’s your current job title? Do you feel this accurately describes what you do, and if not, what title would you choose?
The Big Server-side Programming Language Smackdown | January 31, 2005
Maybe you’re a die hard PHP programmer, or possibly a Python fanatic? Perhaps you’re a newly converted Ruby fan or you may even use all three. What server-side programming language do you think is the “best” and why?
Site Maps | January 26, 2005
Personally I like the idea of site maps, especially for larger sites that burry important information like contact details so deep in their site hierarchies that you need a miners lamp to find it. From a website accessibility standpoint the Web Accessibility Initiative recommends that sites…
“Provide clear and consistent navigation mechanisms — orientation information, navigation bars, a site map, etc. — to increase the likelihood that a person will find what they are looking for at a site.”
A good site map helps give you an overview of the site structure and allows you a quick way of navigating to the content you’re after. Site maps aren’t used by many people, but they provide an important navigational contingency when the sites regular navigation has failed users. As such, site maps need to be as clear and concise as possible and “clever” graphical site maps are a definite no-no.
There is a temptation to put every page on the site on a site map. This may be fine if the site isn’t too big, but can lead to very complicated site maps on larger sites. A good site map needs to be large enough to give people an overview of what is in each section and subsection, without bombarding the user with too much information. Depending on the size and scope of your site, two to three level of hierarchy, on a page no longer than a couple of “screens” worth of info.
What’s your personal take on site maps? Do you love them or do you think they are pointless? What are the best sitemaps you’ve ever seen and what are the worst.
How to Build a Professional Database-Driven Website | January 20, 2005
If you didn’t catch the side bar link a few months ago, Ryan Carson of BD4D has put together an excellent one day workshop entitled How to Build a Professional Database-Driven Website. The workshop will be given by Mike Buzzard (K10K, Cuban Council, Newstoday) and Chris Lea (Newstoday, Media Temple) and is shaping up the be the UK’s answer to The Building of Basecamp.
A one-day practical workshop that will give you everything you need to build a powerful enterprise-level, database-driven website - focusing on PHP, Apache and MySQL. Find out how to plan the project, design the database, structure the code, develop and test the site, deploy it effectively, promote it professionally and maintain it efficiently.
If you’re a UK based web developer, this workshop is definitely worth checking out.
What Are Your Top 5 Fonts and Why? | December 14, 2004
I have to say that I’ve never been very adventurous when it comes to my choice of fonts. I guess if you come from a print background you’re used to dealing with different fonts on a daily basis. As a web designer into his accessibility, I tend to avoid “text as images” wherever possible. As such most of the time I end up using commonly installed fonts like Verdana, Georgia or—if I’m feeling a little wacky—Lucida Grande.
When choosing fonts for headlines and logos I tend to go for safe choices like Gill Sans, Helvetica, Frutiger, Futura etc or fonts like Dax or the extended versions of Akzidenz or Metrostyle. I’ve got stacks more fonts available to me, but I always tend to choose the ones I’m familiar with. I really like distressed fonts but never manage to work them into the stuff I do. I also like script fonts and am apparently not alone, but again they don’t often fit with my commercial work. I’ve got a bit of a fetish for pixel fonts and have far more than seems feasible. I mean how many ways are they of writing the alphabet in 8 point type? However because of their small size and relative inaccessibility, I tend not to use them much these days.
So in a quest to diversify my font usage I’d like to know what your 5 favourite or most used fonts are, and why you like them.
LiveSearch | September 29, 2004
Risky Business | August 19, 2004
For those of you who may have missed my side bar posting earlier today, I just wanted to let folks know that my first article for Digital Web has just been published.
Entitled Risky Business, it outlines how good risk management can benefit designers and clients alike.
Naming Conventions | August 5, 2004* Web Site or Website? * Site Map or Sitemap? * Log-in or Login?
No Going Back | July 14, 2004
I bank with First Direct. They were one of the first "telephone only" banking services in the UK and were amongst the first to adopt internet banking.
I've been pretty happy with their online service despite the fact that - until recently - I've not been able to use Safari to access their site. The one annoying thing is that the banking screen is popped open in a window (sans toolbar) to prevent you from using your back button. If you do attempt to go back - using the keyboard for instance - you get the following message.
Your internet banking session has been closed.
This was because either:
- the service remained unused and was timed out for security reasons, or
- you attempted to page backwards
Thank you for using first direct internet banking.
Now the first dozen or so times this happened it really annoyed me. However like a dog that gets electrocuted every time it tries to eat a bone, I eventually learnt not to use my back button on the site. I do sometimes forget, but generally the conditioning has worked.
Now I've always thought not allowing people to use the back button was kind of odd. I've experienced it in other places as well - usually at the end of filling in a multi page form - and the reaction I have goes from the mild annance to extreme frustration. I was never sure if it was a failing of the site designers or if there was actually some deeper reason.
A friend contacted me today about an email he'd received from his online bank Smile, explaining that they were also planning to log people out if they tried to use the back button. Being a developer himself, he contacted them to ask why it was necessary, and this is the answer he got back.
A lot of investigation went into maintaining the functionality of the buttons, however no acceptable, secure way was found to prevent this behaviour without affecting the site's accessibility and compliance with web standards. This is not likely to be changed.
Now I'm not really sure what these security issues are or how addressing them would have impacted on the sites accessibility or compliance with web tandards. If anybody could spread some light on this I'd be grateful as - at the moment - I'm just confused.
Web Design Companies | July 8, 2004
Accessibility, usability and web standards are starting to become more commonplace these days. I see quite a few individuals and micro businesses practising these techniques, yet the big web design companies seem slow to catch on. Which companies do you see leading the field in these disciplines and more importantly, which companies should but aren't?
Photoshop Stencil Art Brushes | June 27, 2004
As well as taking pics of stencil art, I've turned some of the best ones into Photoshop brushes. You can download them here for FREE. These brushes are donationware, so if you like them, please consider buying me something nice from my wishlist. It helps with my bandwidth costs and may encourage me to make some more. Oh, and If you do this, I'll send you a higher res set as way of thanks.
Meta Data: What do you use | April 30, 2004I was thinking about meta data earlier today. I see lot's of sites who's head tags are stuffed full of meta tags and link tags, yet I rarely make use of such data on the sites I build. So I'm interest In what meta data you put into your sites and why.
Sound on the Web - Whats Your Take? | April 26, 2004
I have to say that I really don’t like sound on the web. I usually surf while listening to iTunes, so any site with it’s own sound track just interferes with the music I’m already listening to. I frequently have numerous tabs open at any one time, so whenever these kind of clashes occur, it’s a mad scramble through all on my tabs to find the culprit. The cacophony is usually so great that my initial instinct is to close that site down as soon as possible. Sometimes I do look for a mute button, but usually can’t bear to wait that long.
More often than not, a sound track detracts from the user experience rather than add to it. It’s like elevator music or hold music. If I want to listen to music while I shop, I’ll bring an iPod. I don’t want to be force fed a 20 second loop of Vivaldi or Moby illegally downloaded of the web. And I definitely don’t want to hear some badly composed drum and base loop bought for $10 from annoying-flash-loops.com.
I was pretty surprised a few years back when D&AD decided not to hand out a website award because none of the sites made enough use of sound. For me this shows more about the judges lack of understanding of how people use the web, than a problem with any of the submissions.
I’m not saying that all sound is bad. Used intelligently it can make GUI’s feel more responsive and help brand a site. However, 9 times out of 10, sound on the web is just irritating. I’ve seen so many badly designed and useless sites that use sound that I immediately associate these negative qualities with any site that force feeds me a loop. Another reason why I’m quick to shut these sites down.
However, I realise that this is a very personal and subjective feeling, so I’m curious as to other peoples take on the subject. Do you likes sites with sound or do you find them irritating? If you like sites that use sound can you point to any that use audio intelligently?
Gurus v. Bloggers, Round 1 | April 9, 2004
Easter Reading | April 9, 2004
It’s Easter, so I’ve decided to post up some holiday reading. Some of these links are brand new, while others have been sitting in my todo file for ages.
- Personas For Content Development
- The Designer Is Dead, Long Live The Designer!
- Do You Want To Do That With CSS? ï¿½ Align Elements Left and Right
- Defining The Web
- Design Project Summary
- Project Definition: The Creative Brief
- Asterisk* 2004 Redesign Case Study
- Design Direction Dilemma
- Panther Secrets Declassified
Web Design is Information Design | April 2, 2004
Graphic designers tend to concern themselves mostly with the aesthetics of design. Do the colours work well together? are the shapes visually appealing? does the overall piece elicit the desired emotional response?
A good graphic designer is more akin to a commercial artist. Creating beautiful, evocative pieces of work that could be seen as art in their own right. Is it any wonder then, that print designers often refer to their work as "Artwork".
Information design is seen as the poor cousin of graphic design. While the graphic designers are off creating beautiful artwork for posters, logos or glossy brochures, an information designer is more at home designing airport signs or end of year reports.
Whereas the graphic designers job is usually to make something look good, the information designers job is to make something as logical and as easy to understand as possible. The information designer is less artist and more information architect and usability expert.
Designing information isn't particularly sexy (which is probably why so few people do it), but in an age where time is short and information is everywhere, Information design is critical.
And this is where the web comes in. The primary reason people use the web is to find information. If a web site has been designed well, it's easy for a visitor to find and digest the information they are looking for. Conversely, a badly designed web site will frustrate the user and make the content much less accessible.
I believe web design has much more in common with information design, than it does with straight graphic design. In fact, I'd go as far as to say, web design is information design.
This was hammered home to me the other day while working on a small redesign job. I was sat in front of Photoshop tasked with redesigning the home page for an e-commerce site. Knowing which elements were needed on the page, I started adding them one at a time. I'd start by adding the most important elements first, and when they were in the right place, I'd add the less important elements.
Once the page hierarchy was more or less right, I'd move things around within the hierarchy in order to promote certain bits of information and demote other bits. When things needed emphasising I'd emphasise them, when things needed separating, I'd separate them.
The design started out with a basic concept, but the end result was pure information design. Elements were placed on the page because that's were they made the most sense, not because that's where they looked the nicest.
I'd always associated web design with graphic design, but it really is much closer to being a subset of Information design.
Quick Quiz: H1's and Logos | March 18, 2004
Wrapping your logo in a H1. Good or Bad?
Web Superstars | March 5, 2004
Every creative field has it's superstars, from Music to Movies, Architecture to Interior Design. Who are the people in the web industry that really ring your bell? Would you walk a million miles for one of Zeldman's smiles or climb every mountain to hang out with Jakob Nielsen?
If you were stuck on a desert island with just a Laptop, a WiFi connection and a lifetimes supply of beer and junk food, which web superstars would you want to be marooned with and why?
Web Designer, Heal Thy Self | January 24, 2004
I'm really glad so many of you enjoyed my article on web accessibility. A few interesting points were raised in the comments that I think are worth expanding on.
Isofarro is correct that this site has a few accessibility issues of it's own. The text in the header is definitely a problem (as there is no text equivalent) and one I'll add to my growing todo list. I also agree that the main nav poses accessibility issues. The font I've chosen is a very small pixel font which a few people have mentioned is difficult to read. Also, because the nav items are rendered as images, you cannot change their size. However, unlike the first problem which was an oversight, this was actually a conscious decision.
This site was always intended to be a personal site. I never imagined it would get popular and the site was built with a limited audience in mind. Also, as it was a personal site, I wanted to have a bit of fun with the design and do things I wouldn't normally do on a commercial project. I'd previously use pixel fonts on my photo gallery (definitely not an accessible site) and wanted to carry the branding through to this site. At the time I did consider the accessibility issue, but decided in this instance, the aesthetic issue was more important. This is something many accessibility advocates would find hard to justify.
I believe you need a solid understanding of accessibility issues to build great websites. However I also believe that you need to balance them against other aspects such as usability, standards compliance, aesthetics etc. I'm not suggesting that you should ignore one for the other. The importance thing is to understand the issues and make conscious decisions based on all the contributing factors. At it's core, this is the essence of design. Understanding the problem at hand, all the contributing factors, and crafting something that's an elegant balance.
Accessibility, like usability and web standards, isn't a stick you use to beat people with, and it's also not an absolute. A site isn't either accessible or not (although some sites are pretty bad), it's a question of degree. When building commercial sites, I tend to aim for somewhere between AA and AAA compliance. In the case of this site, the lack of a textural equivalent for the header text means technically it wouldn't even get an A rating. However, apart from that minor oversight, this site stands up pretty well.
Building to a site to a set of accessibility guidelines is an indication of intent. It says that you have an understanding about the issues and you're doing something positive about them. These days, for most commercial sites I build, I suggest people have an accessibility statement outlining their policy and the guidelines they are aiming for (something that's also on the todo list for this site). The important thing to note is the word "intent". Very few sites get built that reach the guidelines 100% on each page, and fewer stay that way once they are live. An accessibility statement (and bobby rating) says "this is the level we're aiming for, but if you encounter any problems, let us know and we'll endeavour to fix them".
This brings me neatly on to my next topic, as the same holds true when building a site to web standards. I'm sure some people put up the little xhtml/css web standards buttons to say "ha ha, look at me, I'm totally compliant". However for most people it's simply an indication of intent. It says that you are aware of the issues and will aim to have your site validate to a set of standards. This is something I do on this site.
On the left hand side of my index page, under my blog roll and RSS feed, you'll see a couple of little validation buttons. Clicking on these links will take you to the W3C validation page which will attempt to validate this site. If you try it now, you'll see that the site doesn't currently validate. The site did validate when it was first built, and for a good few months after that. However over time a few errors have crept in. I added a couple of geo meta tags which I copied and pasted. In doing so I forgot that I needed to close the tags and this has caused a few errors. The rest of the errors are caused by character encoding, often from copying and pasting url's or writing posts in a word processor.
So does having these validation images/links make me a fraud. Am I trying to pull the wool over peoples eyes to make them think this site validates when it doesn't? Well, apart from the fact that there would be no benefit in me doing this, I'd be pretty dumb to add a validation link and not expect people to click it. The links are there as a demonstration of intent, to show transparency and hopefully, if errors creep in, people will be kind enough to let me know.
If you've read some of the article on this site, you'll realise that I have a strong interest in things such as usability, accessibility, design, process and web standards. Not being a single issue kind of a guy, I feel that all these competing pressures are of equal importance. Web design doesn't take place in a vacuum and requires a holistic approach to get right. There are a number of people who feel it's all or nothing. Either your site is 100% compliant or you're part of the problem. However I believe the right approach is to offer incentives to encourage people to build better websites, not beat them up if they don't as far as you'd like.
The Business Case for Web Accessibility | January 19, 2004
This article was originally written for Message
Until recently, few people had heard of web site accessibility. However due in a large part to the work of the RNIB, the subject of web accessibility has hit mainstream. From industry magazines to the BBC, the topic of website accessibility is starting to enter the collective consciousness.
However there is still a great deal of misunderstanding surrounding the issue of web accessibility. In this article I hope to give a brief outline about exactly what web accessibility is, and then explain how building an accessible website can have a positive impact on your business, both in terms of PR and ROI.
What exactly is Web Accessibility?
Simply put, web site accessibility is about making a site accessible to the largest range of people possible. For the majority of website owners, this is simply good business sense. After all, the more people you have using your site the better.
At It's core, making a website accessible involves removing potential barriers to access. Luckily the people in charge of setting standards on the web have provided designers with the basic tools to remove these barriers. However old habits are hard to break, and many designers are still building sites that can cause problems for a variety of individuals.
So who does this affect?
When most people talk about web accessibility, they usually start talking about people with physical disabilities. However web accessibility is a much wider issue and at a fundamental level affects all of us.
I've covered the issue of web standards and browser compatibility in more depth elsewhere. However to quickly recap, different web browsers were developed to understand different sets of rules. This meant a site would work on one browser and not another, causing huge accessibility issues. These days, browser manufactures have started settling on a standard set of rules (called web standards). One of the most basic steps of making a site accessible is to create a site using these rules. By using these web standards you can help ensure your site is accessible by the widest range of browsers available.
Here are some more groups of people that have problems accessing content on the web.
- People surfing the web using mobile phones and PDA's. These people are possibly the most affluent and technically advanced group of people suffering from web accessibility issues.
- People using old browsers or old computers. Many companies and organisations have standardised on older browser versions and don't use the latest computer equipment.
- People using slow internet connections.
- The "Silver Surfer" is one of the biggest growing markets on the web and has a large amount of disposable income. This sector has accessibility issues such as reduced mobility, reduced hand-eye co-ordination and poor vision.
- Young Internet users can also have poor hand-eye co-ordination, coupled with a low reading age.
- People who don't speak or understand English fluently.
- Blind, partially sighted and the colour blind are probably the most obvious group of individuals affected by accessibility issues. This group also makes up a very large percentage of web surfers
- People with physical disabilities, such as those with impaired mobility
So you can see, web accessibility is a wide-ranging issue that can affect a large proportion of web users. Each individual group may only account for a small percentage of your traffic, however all these percentages start to add up to meaningful numbers. On even a moderately busy site you could literally be turning busloads of people away every day.
So how does this affect me?
When trying to convince people of the importance of accessibility, most people (in the UK) focus on the Disability Discrimination Act . Under UK law it's illegal for a business to discriminate against people with disabilities. This relates to online and well as offline businesses. So if your site is inaccessible, you are potentially breaking the law.
However most people prefer carrots to sticks, so selling web accessibility on legal grounds tends to antagonise people. It makes much more sense to focus on the positive benefits web accessibility can bring.
The fact of the matter is, making your website accessible to as many people as possible is just sound business sense. Building in accessibility on a new site costs around 2% of the overall budget, but the rewards both in terms of PR and ROI can be great.
The positive aspects of having an accessible website are:
- Ability to tap into affluent niche markets like the "Silver Surfer" or people using PDA's and phones to access the web.
- The positive PR that comes from adopting a socially responsible attitude and complying with web best practices.
- Accessible websites are inherently more search engine friendly. After all, Google is the largest "blind user" on the web.
- Increased turnover due to more people using your site.
The negative aspects of an inaccessible website are:
- You could be turning away large numbers of potential customers each day without even knowing it.
- When people have a positive experience of a website they generally don't tell people. However if people have a negative experience they are likely to tell friends, relatives and colleagues about their experience. Excluding even a few people from your website can generate very negative PR
- Websites are legally required to be accessible to people with disabilities.
So you can see, web accessibility is a wide ranging issue and one that effects a large number of people, both web users and website owners. Many people misunderstand web accessibility and see it as another resource drain. However making your website accessible should be a matter of common sense. Combined with the benefits of having an accessible website, there is a very strong case for web accessibility.
The Importance of Process in Web Design | January 17, 2004
Web design is still a relatively new industry, run by a highly creative and technical workforce. However, because we focus so much on the creative and technological challenges of our work, we often neglect the business side of things.
New media also tends to be very incestuous. Most of the people involved with new media come from within the industry, leaving a general lack of experience from outside the sector to draw upon. As such, a lot of the day-to-day challenges we face in web design are not necessarily new, but they are often new to us.
One of the ways of dealing with these challenges is to have a good process in place. The idea of a formal process can scare some people. However most of us have our own processes whether we're aware of them or not.
One of the benefits of formalizing your process is you don't have to permanently carry it around in your head. Often if you have an ad hoc process you'll miss steps or will have to do the same thing over and over again for each project. By setting up and following a formal process it can cut down on a good deal of wasted time and really help boost your productivity.
For most web designers, their process consists of a plan outlining the various stages of a project, and the forms and templates used at each stage. The process you use really depends on the size of you your business and the needs of your clients. However a good process is one that's easily scalable to accommodate your changing circumstances.
Most new media jobs usually follow a fairly similar pattern.
- Discovery - Where you find out about the job, the client, their customers and the marketplace
- Clarification - Where you make sure everybody understands what they're doing and what's expected of them
- Planning - Where you allocate resources and lay out how the project will develop
- Implementation - The bit where you actually create the thing.
- QA/Testing - Where you make sure everything works to a sufficiently high standard
- Delivery - Where we give the client the finished work
And will require at least some of the following documents:
Proposal, Brief, Project Plan, Technical and Creative Spec, Wireframes, Personas, Contract, Invoices, Sign-off Forms, Change Management Forms etc
While this is a very simplified example of a web design process, it's enough for you to get the picture.
Often designers worry that a formal process will stifle their creativity. This may be one reason why very few print designers I know can even stomach using contracts, let alone follow a systematic approach to a project. However having a good process can actually help you be more creative. In the discovery phase the use of techniques like brainstorming, mood boards and personas can all help spark your creativity, while creating specifications can help put boundaries around the project allowing you to focus your creative direction.
Clients appreciate working with web designers who have a set process in place. For clients who've never commissioned a website before, your process explains to them exactly what you'll be doing and what's expected of them. For more experienced clients your process is a form of security blanket. It's say's that you know what you're doing and that you'll produce what you say you'll produce, on time and on budget. If things start to go wrong, both parties can fall back on a good process.
Large clients like public bodies will often require their suppliers to have a ISO ratified process in place. These clients are used to working with professional companies that follow set processes and usually have set processes themselves. In fact many companies will hire you on the basis of your process alone.
However one of the main benefits of having a good process is its ability to help guide, educate and sometimes protect you from your clients. The relationship between Client and Designers is no different from any other relationship. Communication is key, and a good process is the cornerstone to good communication. A good process aims to make sure there is understanding and consensus amongst all parties. It lays out the ground rules, allowing for objective rather than subjective decision making, and can help prevent costly last minute changes to spec.
Finally if a project ever does go bad, a good process will provide proof that you did what you set out to do and that you had the consciences of the client (through milestones and sign-offs) along the way.
Having a good, flexible process is one of the most important things a web design firm can have. However I'm constantly amazed by how many designers are taking on work without even the most rudimentary of processes in place. So what do you think about the importance of process? Do you have processes in place? If you do, what processes do you use? If you don't, why don't you?
For more info on the subject of the process of web design, have a look at some of the following books
- Web Redesign Workflow That Works
- Web Site Project Management
- The Elements of User Experience
- Return on Design
Photoshop Stuff | January 5, 2004
I've had a few people email me recently to ask questions about Photoshop. I'm no Photoshop expert but I have been sitting on some Photoshop Tutorial links which may be of interest to some people. To be honest I haven't actually had chance to look at them, so don't know if they are any good. However I really do need to improve my Photoshop Skills, so if I get a spare 5 mins I may give them a go.
- Steel Dolphin Creative - Photoshop Tutorials
- Polykarbon: Tutorials!
- Digital Illusions Explained
- B i C e r e b r a l
- DTG Magazine
- kirupa.com - Photoshop
- Computer Arts Magazine
- Team Photoshop
I keep meaning to buy a good Photoshop book. However all the ones I've found either seem to be of the "101 Cheap Looking Photoshop Effects" or the "How to Retouch 100 Year Old Photos" variety. If anybody has any recommendations about a good intermediate/advanced Photoshop book, please let me know.
Some Interesting Web Design Links | December 11, 2003
Here are a few interesting links that have been sitting in my "todo" bookmarks folder for a few days.
- Cooper – I really like the look of this web design companies site. It's simple without being stark. Professional without being stuffy. However what drew me to their site was their excellent articles section and in particular their articles on Personas. Well worth a read.
- Web Design Patterns – I keep thinking I've posted this one, but I'm pretty sure I haven't. It's basically a load of examples (with explanations) of web design conventions.
- More Image Replacement – However this method works if you have images turned off.
- Holy CSS Zeldman – Great title and great collection of CSS links, not least because this site get's a mention in the regular reads section. You should also check out Andrews blog as well.
- PTG's Dog Blog – Talking of blogs, you should also have a look at this blog brought to you from the creator of HTMLDog.
- Todd Dominey Interview – Todd, the guy who brought you the excellent PGA.com site gets interviewed over at WaSP.
The Importance of Good Copy | December 4, 2003
I work in the same building as a very talented direct mail copywriter. I'm constantly amazed at the amount of work that goes into creating a successful direct mail campaign. One of the interesting things about direct mail is that it's quite easy to measure success rates. For instance in most campaigns they will send out 2 or more versions and then see which produces the best results. This has lead direct mail copywriters to get very good a writing copy that sells.
When I talk about copy selling, I don't necessarily mean that it actually shifts products. In many instances it's as simple as getting the recipient to respond to the direct mail. Basically all the copy on the direct mail is there for a purpose. It's been designed to get people to follow a particular action.
Now it strikes me that writing for the web is very similar to writing for direct mail. With direct mail you've got to get the persons attention immediately. Once you've got their initial attention you need to spark their interest. The copy and design needs to say, read me and you'll get something out of it.
Once you've got the reader involved with your copy you need to build up their desire. Good copywriters do this by painting a picture, explaining values and letting the readers know what the benefits will be in an language they understand. Most DM copy will have a very strong value proposition and will be benefit, rather than feature led.
Once the desire is there the last job is to get people to act. Any good salesman will tell you the call to action is the most important part of a sales pitch. You can have the best product, let people know how useful it's going to be to them, but unless you actually get people to act it'll all be in vein.
In the DM world this process is called AIDA (Attention, Interest, Desire and Action) and it's a technique that most good DM copywriters will use on a daily basis.
Essentially it's about writing persuasive copy. Copy that provokes the desired response. On the web that could be anything from getting people to read the next page or follow a link, to signing up for a service or buying a product. The bottom line is that good copy sells and a good web copywriter is literally worth their weight in gold.
Unfortunately the state of copy on the web is pretty shocking. A large amount of web copy is recycled from brochures, mission statements and other marketing material. It's usually dumped on the web team because the commissioning company involved either doesn't see the value or doesn't have the resources to write specific web copy. This type of copy has inherent usability problems. It's generally too long, feature or organisation focussed and written in a language only an MD or marketing department would love.
Instead you need to write copy that is user focussed. Look at the words your visitors use and use them yourself. A great way of doing this is to look at your search logs and feedback forms. By speaking the same language you make your readers feel comfortable and it gives them the impression that you understand them and are on a similar level. Using the same language is also key to getting good search engine rankings. In fact good copy is the most fundamental part of a good SEO campaign.
Unfortunately what goes on a website is often more about company politics than joined up thinking. To keep the marketing department happy they'll want to put one thing on the site, to keep the MD happy they'll want to put on another thing. You end up creating a site that the company love. That is until they realise nobody is using the darn thing. To get around this you need to have clear goals from the start. Then when the MD wants to put a message on the home page (complete with board room picture and signature) you can say what a nice idea you think it is, but that you're concerned that it doesn't support the goals that she and the board set down in one of the many long meetings you had a few months back. You'd be happy to do it, but it would mean changing the goals in the project document and getting the change signed off.
We all know that web users have the attention span of a goldfish. We scan read, we have multiple pages open a once. If the copy doesn't grab our attention and spark an interest we'll move on. Keep mission statements to end of year reports and business plans. Nobody wants to read them on the front page (or any page for that matter) of your website.
Web copy needs to be more like DM copy. It needs to be short and sweet. It needs to be written in a language the reader identifies with and not in an obscure dialect of marketeese. The copy needs to be value led rather than feature led. Don't tell me why your offering is the best. Tell me what that means to me and how i'll benefit. Then close the sale with a call to action. Don't just lay your cards on the table, cross your fingers and hope the person knows what to do next. Give them a hand. Point them in the right direction.
Fundamentally web copy needs to put the reader at the centre of focus and in this respect there is a lot we can learn from Direct Mail.
If you're interested in learning more about writing web copy and building persuasive websites here a few possibly useful links.
- Submit Now: Designing Persuasive Websites
- ClickZ.com ROI Marketing
- GrokDotCom Newsletter
- Content Critical
- Hot Text: Web Writing That Works
The Pricing Problem | November 15, 2003
Working out a price for a website can be an extremely stressful exercise. If my experiences are anything to go by, most people will email you (and 100 other web designers) asking for a quote with very little or no information to go on.
Usually they simply ask...
"How much do you charge for a 20 page website."
Which is about as helpful as somebody walking into a car dealership and asking, "how much do you charge for a car with 4 doors". If you are lucky they may also throw in a few titbits like...
"We'd like something like xyx.com"
Where xyz.com is either the worlds worst website, or something so huge and expensive you just know they don't have the funds.
"It has to have a flash intro/news ticker/frame based navigation"
However you're a professional so you struggle on. You'll try to open a dialogue to extract a few more nuggets of info until you have enough to go on. Then you work up some prices and put together a proposal which can take anything from a few hours to a couple of days. You spend the time because you're a professional and because you want to let your potential client know as much about the web design process and what you do as possible.
You'll wait weeks and then if you're lucky you'll get an email back saying...
"Thank you for the proposal. Unfortunately we have found another designer who will do the job for x"
Where x is 5-10% of what you quoted. In fact it's about what you'd have charged for the time you spend putting together the prices and the proposal in the first place.
If you're unlucky you'll wait for weeks expecting an email and eventually, when one doesn't arrive, the memory of this proposal will fade into all the others.
These situations are really down-heartening. You've put a good deal of time, energy and creativity into your proposal and at the end of the day all your time was wasted. If you'd have known the potential client was speaking to lot's of other designers and that all they wanted was the cheapest price, you wouldn't have spent as much time on the proposal. Next time somebody approaches you for an estimate you'll be much more cautious and at the end of the day it's your potential clients who will suffer.
This seems to be an increasingly common event. There are so many web designers trying to eek out a living, many designers are willing to work for peanuts. It reminds me of the famous "will code for change" photo that was kicking around when the dot com bubble burst. Also there are so many web designers entering the industry who have never worked in a creative/IT sector before and have no idea how to set rates. I'm amazed by the number of freelancers who email me asking how much they should charge.
Combine this with clients ever increasing demands for cheaper over better websites and the ability for them to contact an ever wider number of designers, and you've got big problems brewing for the industry.
In Kevin Potts's excellent "The Pricing Woormhole" article, he points out these, and many more pricing related problems facing the web design industry. He agues that educating clients about the value of design is extremely important. This is something I've been arguing for some time.
However we work in a large and complicated marketplace and it's just not feasible to educate every client who comes through the door. In fact trying too hard to educate clients can actually backfire on you. People come to web designers for a website, not a market awareness course.
Kevin also points out that globalisation and the nature of the web is starting to have a big influence on our industry as well. I regulaly get emails from outsorcing companies from India and Russia selling low cost IT skills. Companies are starting to move their IT support departments off shore. How long before web design services follow the same suite?
The future of our industry is in the hands of it's practitioners. We need to develop sensible pricing policies and then stick to our guns. We also need to learn from other sectors and hone our business skills as well as our design and coding skills. We need to meet our clients needs more efficiently, but we also need to know when to walk away.
Fundamentally we need to distance ourselves from the image of the bedroom web designer/frontpage cowboy and brand ourselves firmly as professionals. You wouldn't choose you're doctor or lawyer based on the cheapest quote, why choose your web designer this way? What we need to do is make sure people use the same critical judgement the use when selecting our services as they do when selecting any professional service. How we manage this is another question.
Catch Up | October 30, 2003
Here are a bunch of links, some relatively new, and some I've been sitting on for a while.
- Web Design Practices - A site looking at how common certain web design practices practices have become.
- Why tables for layout is stupid - Entertaining seminar about tableless design
- Magmun P.I. - Magnum was one of my fav shows as a kid, so I was delighted to come across this pointless little gem when following a link from somebody's portfolio. Hyperlinks truly are a wonderful thing.
- Lynx for OS X - I'm now the proud owner of my very own copy of Lynx. I can finally hold my hear up high in geek circles.
- Advanced Web Ranking - OK, well it's not that advanced, but could come in handy to any Mac SEO'ers out there
- The World as a Blog - Watch bloggers post live on a big map of the world. I have no idea why you'd want to do this, but I still think it's cool.
- Creative Commons - This site got a CSS makeover a while back but I never got around to posting about it.
- Left in Front - One of the nicest sub:lime copies I've come across.
- Float Tutorial - The guys from Max Design do it again. Keep up the good work.
- Plains Capital - Nice, professional looking CSS/XHML site.
- HTML and CSS Dog - Odd name, plain looking site, but useful tutorials for most levels.
- Site Redesigns - 37 Signals style.
ReUSEIT! | October 29, 2003
Submissions to the ReUSEIT! competition close in two days, so if you want to enter a design, you'd better hurry.
Usability Testing Article | October 7, 2003
Doing Work On Spec | October 1, 2003
In the world of advertising, it's fairly common for clients to ask to see some design concepts in order to help them choose an agency. Most ad agencies don't object. These commissions can be very lucrative, often running into the millions, so spending a small amount of time on sample creative is a reasonable move.
Unfortunately web design clients have started asking for design concepts, and not just on big, 6 figure jobs either. People commissioning even the smallest jobs have started to expect to see design concepts.
This is a big problem for a number of reasons.
Spec work is dangerous
Visual design should start some way down the line after you've had chance to get to know the client, their business, their users and their competition. It's not something that should be done right at the start of a project, before you've even been awarded the job.
Unfortunately many clients hear the term "Web Design" and think the most critical part of the job is "Visual Design". Most people don't get the technical side of our jobs. They don't really understand about usability, information architecture, web standards etc. Why should they.
That's why clients generally ask to see creative. They have difficulty determining who would be best for the job based on all the technical jargon flying around so settle on design. Everybody feels qualified to make decisions about visual design.
However if a client is basing their decision on the spec work you create for them, a pitch ends up turning into a visual design competition. Visual design is so subjective, it's not usually the best company for the job who wins the pitch, or even the "best" or most appropriate design. It's the design that most appeals to the key decision makers in the room. Not really a good way to make an important, strategic decision.
If you end up getting the job, the main decision makers will already be wedded to your design concepts (after all that's why they chose you isn't it?). You'll end up being stuck with a design concept that the MD loves, but one that is likely to be inappropriate to the users goals and the business objectives of the site.
Spec work is not a good ROI
Pitching for work is time consuming at the best of times. Talking to the client, getting an idea of their needs, analyzing their RFP, meeting with the design team to discuss the response and putting together a proposal all take a considerable amount of time. For a small project this could be a couple of person days, for a large project it could take weeks or even months.
This is already a very large resource drain to secure a potential client and something that needs to be done in a considered and managed fashion.
If you're going to produce spec work, be prepared to be judged on that alone. This means the sample creative you produce has to be top quality. It's not something you can knock up in a few hours. It's something you'll need to spend days/weeks on. If you insist on creating spec work, you'll need to put in the hours, ask the right questions know the client, their product/brand and their customers inside out. You'll also need to be emotionally prepared in case you don't get the account.
This all takes time and effort, but is it a good ROI?
If the jobs big, the competition small (1-3 other design firms) and the clients are only wanting a feel of what you can produce (not what you will produce), then it's possibly worth it. However it's still worth asking to be paid for creative. It's not often people will pay you to pitch, but it does happen.
Unfortunately in this day and age, there are clients out there that will send a RFP to large numbers of design agencies. These clients tend to have the smallest budgets but the largest demands. They'll want to see designs from the largest number of people possible and will pick an agency based on the design, not the company's merits. These kind of clients are tire kickers, wanting the maximum return for the minimum risk. Who can blame them?. The ROI of creating spec work may be justifiable on a big job and low competition. If the job is small and the client has 6 other designers also producing work, walk away. It's just not an effective use of your time.
Spec work devalues the role of the designer
The job of a web design agency is to plan, design and build websites. It's as simple as that. We do have to spend time getting new business, but new business development is not what people pay us for, it's just something we have to do in order to secure work.
So if people pay us to design, why give this way for free? If it stops being a commodity people have to pay for, and starts becoming part of the standard business development practice, this greatly decreases the value of design.
Fundamentally people put value on something the have to pay for. If you charge £500 per day you're probably good, if you charge £1,000 you're probably better. What do you expect people will think if you're giving away design to anybody who asks? If something is being given away for free, most people put little value on it.
Personally I feel that doing work on spec sends the wrong signals about the value you put on your time. It also sends the wrong signals about the value of design as a whole.
When pitching for work, show the client you understand the brief. Explain to them how your process works. Give them examples of your previous work so they can see your creative skills. If they want to see creative fine, but they should pay for it and you should explain that the ideas you're showing are just ideas and the final work will need to be based on a whole raft of things that you'll only find out in the discovery phase.
If a client insists on seeing creative, you'll need to way up the pros and cons. However personally I believe only the largest jobs really warrant producing creative for a pitch, and even then, you have to set the parameters.
If you choose to stand your ground, politely explain your position. Explain that it's not possible to produce design ideas at this early stage as a large part of the design process is the discovery phase. Some clients will respect you for this, others won't.
However I know that the clients I want to work with are the ones who understand the value of design and respect me as a professional.
Playing with Dreamweaver MX 2004 | September 18, 2003
I've been playing around with DWMX 2004 today to check out it's new features. I started off by opening up a few CSS based websites to see how they rendered. The WHSmith site I just finished rendered fine. Much better than in DWMX. However the message website looked pretty much as bad as it did in DWMX. Considering they are both very similar in terms of layout, I was a little perplexed about the differences. So the CSS rendering is a little better than before, but by no means perfect.
Next I had a look at the new browser bug checking feature. This was something pushed at the recent Macromedia event in Brighton, despite this functionality having been in GoLive for some years.
Running some (validated) sites thought the browser checker came up with some interesting issues. Firstly apparently Netscape 6, Opera 6.0 and 7.0 and Safari don't support the title attribute when applied to an image, something which surprised me a little. Secondly apparently the name attribute is required for input tags in Mozilla 1.0, Safari 1.0 and Netscape 7.0. Again, I thought name was deprecated in place of ID's but I guess not.
I then had a play with the CSS code hinting feature. I've bee a longtime actionscripter, so love the code hinting in Flash MX. I was looking forward to CSS code hinting and wasn't disappointed. It's a great memory jog if you cant remember certain styles/attributes and it takes some of the grind out of typing. Generally very handy. I basically use DWMX as a glorified text editor with a built in FTP client and a really good find and replace mechanism, so this is the feature I'll get the most use out of.
The revised CSS panel is nice. Now, when you click on a style it opens up the relevant stylesheet and jumps to that particular style. It's a small thing i know, but quite handy. In DWMX I'd find myself constantly going to the site window to open up a stylesheet, making an amend and then closing it down again, so being able to do this from the design panel will hopefully speed things up a little.I quite like the fact that the body properties panel now sets styles rather than display specific html attributes. However it's a shame that all this is written into the page and not as an external style sheet. The same is true when adding text formatting. It's now all done using CSS (not font tags) but it's still all done in the document and not in an external style sheet. This could end up being a big pain, especially for people not used to CSS as they could end up with styles all over the place.
I have to admit that I was a little disappointed in performance. It was actually a lot slower than using DWMX. This may have been because I had the browser bug checking feature on but still there were times when it was painfully slow. However it hasn't crashed my OS once yet (touch wood) so that's a big improvement on my 1-2 daily crashes on DWMX.
However overall I liked DWMX 2004. Not a major upgrade and no real killer features. The UI has been tweaked to improve workflow. CSS support is better, but by no means perfect. A few nice little touches have been added. I especially like the fact that the file browser has been integrated into the main panel set's rather than floating around on it's own (I think this was just a Mac thing though).
I probably wouldn't advise people to rush out and buy it, but if you currently use DWMX and do a lot of CSS work, it's probably worth getting the upgrade just for the code hinting and marginally improved rendering.
I'd give it a 6/10.
Mac browser/plug-in detection woes | September 15, 2003
I'm sure most Mac users have been to websites that sniff for browser versions and end up falling over on certain Mac browsers. Usually you're redirected to a page saying that you either have an old browser or don't have the right plug-in, even if that's not the case. Sometimes, if people are aware of this issue they'll sensibly offer a get out clause, saying something like "If you know you have the Flash 6 player, click here". However more often than not, this isn't the case, and us Mac users are left out in the cold. Sometimes URL guessing works, but usually you're just buggered.
Macromedia is a big culprit in this. The Flash detection script that gets output when you publish a movie just flatly failed to detect the plug-in on Mac browsers. They did produce a more advanced version in a developers kit, but few people seemed to use it. (btw if you want a good flash detection script have a look at Colin Moocks one)
A while ago, somebody on the BNM list mentioned this problem happening on the Marks and Spencer site. A big discussion ensued prompting a number of people (including myself) to contact M&S to complain. They said they were on it, but several month later it's still a problem.
Well luckily, if your a Safari user and you get bounced by an overly strict browser detection script, there is still help at hand. Simply download the excellent Safari Enhancer, turn on the debug menu and you can change your user agent. That way you can get into sites like M&S that insist you need to use a different browser, when in fact apart from a few minor display quirks, the site seems to be OK.
Safari Enhancer also has a couple of other cool features like the ability to permanently turn off your cache, something every Safari user who is also a web developer should consider.
BD4D | September 13, 2003
Boxes and Arrows | September 12, 2003
Some interesting new articles on the Boxes and Arrows site
- Sitemaps and Site Indexes
- Searching for the center of design
- Colors Found in Nature and Interface Design
The last link is particularly interesting as it deals with a method of selecting colour pallets first suggested to me by Jeremy Keith. It's a really good idea and one that i'll definitely start to use.
MX2004 Studio Tour | September 11, 2003
I was quite excited about the launch of Dreamweaver MX2004 after reading about some of the new features on the Macromedia site. Also being into my Flash programming and enjoying building Flash games, I was looking forward to the new version of Flash MX2004 and in particular ActionScript 2.
When new bits of software come out, MM usually go on the road and today they came to Brighton to show off their new applications. Usually I quite enjoy these events. You get a chance to see the new software in action, ask question, do a bit on mingling and at the very least get a couple of hours out of the office. However I felt todays event was a bit of a letdown.
The main areas I was interested in were DWMX2004's improved CSS/Accessibility support, and Flash MX2004 being split into two version. However considering that MM were talking to a room full of developers, the talk seemed to be aimed at a much lower level than I'd expected. They focused far too much on cute little gimmicks which new or inexperienced users would probably get a kick out of, but nothing that was of much interest of a professional web designer.
For instance, I've always quite liked the idea of adding effects to Flash and this has appeared in MX2004. However from what I could see the effects were so simple and nasty, that apart from a few Flash newbies, I couldn't imagine anybody actually using any of them. If your trying to brand something as a rich application development tool, creating a fairly nasty, amateurish "explode" effect is probably not the way to go. There have been third party tools around for years that create much more sophisticated "text effects" than anything I saw today.
I was also a little concerned about how they were selling the whole CSS integration thing. They started off saying that the reason people didn't use CSS was because it was difficult to code (from a language point of view) and then went on to show what came across as being an extremely complicated way to manage page styles. In fact it made me fear that we'd suddenly see a rush of sites with huge bloated style sheets simply because people didn't really get CSS, in the same way as older WYSIWYG editors used to produce hugely bloated HTML files.
In general I felt It was far too focused on features and not benefits. I hope MX2004 studio is as a significant improvement on MX as the MM site makes out, but I couldn't help leave feeling that the new MX2004 studio was being aimed much more towards content creators and managers rather than professional web designers.
Here is another Brighton residents impression of the MX2004 studio tour.
Using a Wiki as a CMS | September 8, 2003Matthew Haughey explains how he modified phpwiki to produce a simple, updatable website.
Installing PHP and MySQL (and Apache2) on OSX | September 5, 2003
A while ago I wanted to install PHP and MySQL on my Mac, so I could develop locally rather than have to use a remote web server. Now I know a bit of PHP, and MySQL but my UNIX knowledge pretty much sucks. I can do basic UNIX tasks, but anything even slightly more advanced sends me into unknown (and quite frankly scary) territory. As such I was keeping my fingers crossed that installing PHP and MySQL would involve little on no need to use the command line.
When I first wanted to install these apps, there was no info on the Apple site. However I did come across a couple of articles on the O'Reilly OS X Dev Site detailing how to install PHP and MySQL on OS X.
I gave it a stab but very quickly got lost. I was following all the UNIX commands step by step, but things just weren't working so I eventually gave up. A while later I found details on the apple developers site about installing PHP and MySQL. These Instructions were much simpler to follow, but still caused problems and again I gave up feeling rather stupid and dejected.
Then a few days ago I came across this site offering painless installs of Apache 2, PHP and MySQL. They were not wrong. The whole download and install process took less than half hour for all 3. What's more the Apache and MySQL installs came with preference panes allowing you to do a lot of tasks you'd normally have to do in the command line.
So a big thanks to Server Logistics for making these packages available for the UNIX'ly challenged.
Another useful web development bookmarklet | September 4, 2003
I'm actually building up a nice little collection of Safari compatible bookmarklets/favelets, so when I get time I plan to add a Safari Bookmarklets section to this site.
Anti-Spam email address encoders | September 3, 2003
Dan Benjamin of Hivelogic has just updated his Anti-Spam Email Address Enkoder.
If this method starts to become popular, which it looks like it is, I'm sure the spammers will up the arms race and this method will become less useful. However with the amount of spam bots kicking about these days, if you run your own site it's probably worth protecting your email address one way or another.
Paper Prototype Usability Testing | August 30, 2003
I was up in London most of yesterday running a paper prototype usability test for an intranet project we're doing. If you're not sure what a paper prototype is, it's basically a paper version of a yet-to-be-built site. Paper prototypes can range from the very simplistic (often called low fidelity prototypes) to almost exact graphical representations of the site (often called high fidelity prototypes). For yesterdays test we were using fairly low fidelity prototypes which were little more than wireframes containing sample content.
Using paper prototypes to test a site is an extremely useful and practical thing to do. It's useful because it gives you a real insight into how people will use the final site, and always manages to throw up some really interesting and unexpected issues. If you're having a design dilemma, testing is often the best way to test your thinking. It's practical because paper prototypes are much quicker and easier to build than a real prototype, which means that testing can be done at a much earlier stage. This means you get user feedback much earlier in the process before you are too committed to a particular course of action.
Lo-fi prototypes are really good for testing general concepts early on in the design process. Because of their lack of design treatment, people tend to focus on bigger concepts like section naming, nav and user paths, rather than the look of the interface. Once the general concepts have been tested and refined, you can either test using hi-fi paper prototypes or possibly move straight to interactive prototypes.
Running a usability test using paper prototypes is actually very simple.You don't need a hi tech usability suite or anything flashy like that. Just a room with a desk, a notepad and possibly a video camera to record the users responses. Spend a bit of time planning the test. Work out what areas of the site you want to test and come up with suitable user tasks. Stick to a few core tasks 2-4 and aim for them to take between 30-45min in total. If possible, do a dry run with a friend/colleague before hand to make sure the timing works and you have everything you need.
Having a pre written script is a good idea. It should outline who you are, what you're doing and what you want from the test subject. You should explain that you are testing the the prototype not the user and encourage the user to talk aloud as much as possible. Explain that the moderator probably wont be able to answer questions during the test but there will be time afterwards to do this.
The moderators main job is to encourage the user to talk aloud and explain what they are doing. Use open questions like "what are you thinking" to encourage the user to think aloud. Often the user will ask question like "what does this button do" or "what should I do next". It's important not to prompt the user so you need to ask question back like "what do you think the button will do" or "If this were website what do you think you would do next". It's also a good idea to ask users why they did a certain action, what they expected to happen or what they understood by a certain term. This help clarify their thought processes much more.
The moderators job is also to take notes. However you tend only to notice the big things and it's often the small things that give away the users thought processes. As such I highly recommend using a video camera to record the sessions. For paper prototype tests I'll usually tape a folder or something to the desk and use this as the "computer screen", then focus the camera on this area. As long as the prototypes are on the folder you know that what the user does will be in shot. It sounds stupid but you must make sure you have enough tape for all the sessions and that you can plug your camera in and it will reach.
Being involved in testing is an extremely interesting experience. You'll be amazed when everybody understands things you thought would cause problems, and then don't get things which you thought would be obvious. You'll start to see that people don't actually read your carefully crafted headings and explanations. What they do is dive straight in and go for the first likely option they find. Only when they get stuck or make a wrong move do people actually start studying and reading things more. User testing is an amazingly enlightening process and one that more design teams should partake in.
Once the testing is over it's time to start the analysis. We create a table with the test subjects along the top and problems down the side. As we go thought the tapes, read our notes and look at the prototypes we will add problems down the side and then notes about how each user dealt with that problem. This way we can see if only one person experienced a problem of if it was more wide spread.
This information will be written up in a report which we give to the client, outlining the main issues and our recommendations on how to solve them. We'll use this information to amend the wireframes and inform the decisions we make in the design phase.
The whole process does take time. Usually around 3-5 person days. However it's well worth the effort. It allows us to test out concepts at a very early stage and prevents us from having to rework things latter on when change becomes much more costly. Testing gives us an amazing insight into how a site will actually be used and allows us to deliver a product that better meets user needs .Testing is also a lot of fun and being involved with usability tests can really help designers learn to build more intuitive and user friendly websites.
Nice Blogs! | August 29, 2003
For all you folks that haven't come across hicksdesign it's well worth a visit. The site is a beautiful example of CSS based design and should provide inspiration to us all.
Poking around in my comments I also came across this little gem from Jeff Croft. It's still under construction (aren't most blogs though?) but is already high on my reccomendations list.
Both these blogs have a few things in common. First off they both make use of
overflow: auto to create a scrolling "frame like" area for the content. Normally frames and their ilk bug me but in both these instances I feel they work really well.
Both blogs also make really nice use of colour. They both use a combination of orange and green. Hicks Design going for the fresh, natural look which Jeff Croft uses solid blocks of saturated colour to good effect. I find most blogs (including this one) tend to be a little on the plain side so it's good to see bloggers making more use of colour.
Lastly they typography on both sites is really nice. The titles are clear, the text is well spaced and generally the posts are very easy to read. It's a small thing, but so few bloggers seem to think about how to display their posts. Good clear typography can make a huge amount of difference.
Dreamweaver MX 2004 | August 27, 2003
I've been using Dreamweaver to build websites for some time now. I started using it (like most people) as a WISIWYG editor, but these days I use it more as a glorified text editor. I tend to work mostly in code view however I occasionally use split view as it's often quicker to locate an element visually than having to scan through lines of HTML.
I think DWMX's code hinting is useful, I like the integrated ftp client and the site wide find and replace is also very useful. Most of these features can also be found in BBEdit (which I use occasionally) but I'm much more familiar with DWMX.
DWMX has pretty good CSS support although the design view usually chokes on my pure CSS layouts. Most of the time I have my CSS files open and edit them by hand. However occasionally I can't remember the syntax (or can't be bothered to type in a long style) so use the styles panel to input a style.
Macromedia have been hard at work on the new version of Dreamweaver and have been paying particular attention to CSS and accessibility. Obviously the proof of the pudding will be in the eating, but it's good to see Macromedia is putting more effort into supporting web standards and accessibility.
The value of design | August 22, 2003
In my expirience most people view design as a superficial thing. It's about making something look nice, be that a business card, a brochure or a website. This is why many web designers jump straight into Photoshop when they get a new commission, and why clients expect to see designs before any requirements have been set. People just don't get what design is really about.
Good design is much more than just making something look nice. It's about taking a considered approach to a design problem in order to find the best solution. A good designer will spend time learning about a project, finding out about the clients business objectives and trying to marry these up with the users goals. With a clear understanding of the issues at hands, and firm goals in mind, the designer can start crafting the most appropriate solution.
However all too often people rush into design, with the sole objective of creating something that looks nice. This is a fatally flawed approach as looks are extremely subjective. What one designer or client may love, the rest of your users may hate. Design decisions need to be made for strategic reasons, but without a clear strategy they are usually decided by personal preference. This leads to a design that may look nice, but fundamentally ignores the strategic needs of the business as well as the goals of the user.
As an industry we need to start educating the public about the value of design. We need to change peoples perception that design is simply about "look and feel", about colour and composition. Good design is about creating strategic solutions to business problems and needs to taken as seriously as any other business service.
The Design Council | August 22, 2003
The UK's Design Council aims to help people and organisations understand and use design more effectively.
As part of this strategy they have an excellent About Design section on their site which focuses on design issues such as user centered design, information design, interaction design and inclusive (or accessible) design.
They also run a number of sister sites including the excellent Web design for business site. The aim of this site is to help small and medium businesses manage the process of designing a website. This includes information about setting requirements and writing a request for proposal (RFP), choosing a designer, developing the brief and finally building and reviewing the site. This seems like a great resource for potential clients and web designers alike.
Links-o-rama | August 17, 2003
I've spent the best part of today trawling though my bookmarks and creating this links page.
ReUSEIT design competition | August 15, 2003
ReUSEIT is a semi-official competition to redesign the Jakob Nielsen's site useit.com. I say semi-official because Mr Nielsen is aware of the competition, but the winning desing won't actually be used on the site. It's simply an oppertunity for you to have a crack at redesigning a site you love/hate.
It's the idea of Bob Sawyer who has also very kindly asked me to be a judge.
Google Does the Math | August 15, 2003
For all you folks that didn't know, you can now do sums on Google
Here is one I did eairlier.
It also knows various constants and can convert between different units.
Here is one somebody much smarter than me, did eairlier.
More Altruistic Redesigns | August 14, 2003
The trend continues. Who will be next?
More Safari Favelets/Bookmarklets | August 13, 2003
Here are some more Safari "safe" favelets/bookmarklets I use on occasion. To use the MT post one, you'll need to change the URL so it points to the version of MovableType running on your server. Also the last one I knocked up just now becasue I thought it would be more useful than just a plain wordcount for SEO.
- MT post
- View Cookies
- Linking to this site on Google
- Pages from this site on Google
- Word count
- Keyword desnity check
I've actually got loads more favelets/bookmarklets but i don't use most of them. If you want more I just found this site today, and they have stacks, many of which work in Safari.
Pixel Font | August 12, 2003
Even More CSS Image Replacement | August 12, 2003
Favelets/Bookmarklets That Work in Safari | August 12, 2003
Here are some of the Favelets/Bookmarklets I use on a regular basis that work in Safari. I've collected these from a variety of sources so really can't remember where they all come from (sorry!). To use them, simply drag the link onto your bookmarks bar.
- W3C (X)HTML validator
- W3C CSS validator
- Toggle Linked CSS
- Bobby check A
- Bobby check AA
- Bobby check AAA
- Resize browser to 640x480
- Resize browser to 800x600
- Resize browser to 1024x768
- Convert long URL to "tinyurl"
- PHP Function
- Show divs with colour
More css image replacement stuff | August 7, 2003
Altruistic web design, building a portfolio and generating new business | August 6, 2003
There seems to be a bit of a movement at the moment of web designers creating accessible and standards complaint versions of well known websites.
Recently Matthew Somerville created an accessible version of the Odeon website. I use the Odeon website often, and am constantly amazed about how tricky it is to use, so think Matthew has done a great job.
Now while these redesigns were motivated by nothing more than alturism and a belief in good web design, I can see people jumping on the bandwagon for more practical reasons.
It's very difficult for people stating out in the business to build a credible portfolio of work. Many offer free or cheap websites in order to build a portfolio. However this has the tendency to devalue web design as a profession and make it harder on everybody to earn a living.
A more sensible and less damaging approach is to create example sites that actually look like real sites but are there just to demonstrate ones skills. Some people have gone further with this and started creating example sites for a specific market and selling these sites on e-bay as ready made 'turn-key' sites.
However I think a really proactive approach would be for budding web designers with time on their hands to create versions of well known websites that address issues like usability, accessibility and web standards, and then pitch them to the site owners
If I worked in a big company and a freelance web designer came to me and told me what was wrong with my site I'd probably either ignore it or take note and then get my £2000 a day London agency to rebuild it. However if the same person came to me with a fully working prototype of the site that looked great and fixed all the issues I'm damned sure I'd take note.
Using CSS to replace text with images | August 6, 2003
For those not familiar with the FIR technique, it basically involves hiding some text using
display:none and then setting a background image to take the place of this text. It means that browsers supporting the CSS get to see a nice image version of some text, while those that don't get served up the text as is. It does require the page to be written especially for this method because it requires the use of a redundant span tag. However it seemed to work pretty well.
Then on one of the many lists I belong to today, there was a big discussion about the various pro's and cons of using this method. It turned out that Seamus Leahy and Stuart Langridge both came up with an alternative image replacement method which uses
overflow:hidden and doesn't require the redundant span. It involves using the box model hack to work in IE5 but seems like a good idea. It means you can apply this to sites without having to change the underlying code, which is always a bonus.
I was thinking of using one of these techniques to handle the nav on this site. However when getting feedback on the message site, somebody mentioned that they surf a lot with images off (because they use GPRS and it saves them money on bandwidth) and they could not see the navigation. I don't suppose that a huge proportion of people do this. However it renders the nav useless so doesn't really follow the "degrades nicely" rule I tend to use.
So I guess I'm going to stick to using nav bar images on this site for now. It means I probably won't be able to do any clever style switching for the mo but I guess I'll cross that bridge when it comes.
Zeldman on Web Standards and Acessibility | August 6, 2003
The lecture is interesting on a professional level as it clearly outlines some of the benefits (and debunks some of the myths) of using web standards. Something all the web designers out there not using web standards should take note of.
However it's also cool on a personal level. After featuring the new message site I designed on zeldman.com, Jeffrey emailed me to ask If he could use the site in his keynote speech. Obviously I was flattered and said yes.
The message site was used as an example of a site that uses CSS without restricting creativity, along with such well known sites as the PGA Open Championship, the new QuarkXPress website and the experimental CSS Zen Garden.
He's also posted up the notes from his accessibility lecture at the same event. If you're new to the area of web accessibility this should give you a good heads up.
Finally got round to it! | August 3, 2003I installed Movabletype at the beginning of summer in order to check it out and possibly start a blog. However the default styles were pretty shocking so I realized (being the design tart that I am) that I'd only use the thing if it looked nice. I did a search on Google for MT templates but just couldn't find anything even halfway descent so realised I'd have to make one myself. However I've been really busy with my photography portfolio so it's taken me till this weekend to sort something out. The design is very rough. It literally took me 2hrs to put together in Photoshop and then around 6hrs to build the stylesheets and tweak the templates. The blog is sufficiently complete that I can start posting to it. However there is a bunch of stuff I still need to do.
- I need to split off the styles into a basic and advanced stylesheet.
- I need to do some more browser testing. It seems fine on most modern browsers but IE5 Win98 has problems with the floating.
- Need to make sure it's standards compliant and accessible
- Want to add some css rollovers to the nav and possibly turn it into a list
- Need to add some links and stuff to the side bar