Entries in Category "Design"

First episode of Usability Reviews

Des and I launched the first episode of Usability Reviews today. It’s a video blog where we talk about usability and give our thoughts on it.

In this episode we look at Bugzilla. You can read more about Usability Reviews over at Des’s blog.

Apologies for the audio and video quality... we had no external microphone and our tripod was four chairs, along with a cushion and a copy of the Evening Herald.

Don’t look sharp, look wonky

I've mucked around with the stylesheet here to piss Des off. Hopefully it works.

If you're using Internet Explorer, and you can actually read this... well, that’s got to be a miracle. It would certainly be a shock to me!

Small improvements

I’m currently working on a Ruby on Rails application for a client of mine. I hope to be able to write about the project, and the things I’ve learned, in detail once it’s complete; for now, I want to write about something I noticed yesterday.

The application involves camps for children’s and family camps. It’s useful to know the gender mix of the children’s camps so that accommodation can be arranged accordingly. Although I was already required to display the number of each gender, I thought it would be a good idea to provide a little diagram so that, at a glance, you could see what the gender ratio was.

It took thirty minutes to implement this, including all of the CSS and graphics. Those thirty minutes have arguably improved the usefulness of the application.

What I’ve noticed while working with Ruby on Rails is I don’t feel the same time pressures or mad rushes I’ve felt while using other programming languages or frameworks. As a result, I can afford to spend time adding in small improvements like this across the application.

It’s easy to dismiss these as relatively minor improvements. Maybe, instead of using this time to make many minor improvements, I should spend my time trying to add one or two major features? Surely this would make a better product?

I believe it doesn’t, and I think it all comes down to what makes a good day.

Joel Spolsky says in chapter one of User Interface Design for Programmers says:

So that’s what days were like. A bunch of tiny frustrations, and a bunch of tiny successes. But they added up. Even something which seems like a tiny, inconsequential frustration affects your mood. Your emotions don’t seem to care about the magnitude of the event, only the quality.

And I started to learn that the days when I was happiest were the days with lots of small successes and few small frustrations.

It’s a view I completely agree with. It’s rare that anything particularly wonderful or disastrous will happen in a day, so most of the time it comes down to the little things.

The diagram might save someone two minutes of calculation. But as it’s something inconvenient, that’s two minutes of frustration. By getting rid of that frustration, I’ve made their day slightly better. On top of all the other “minor improvements”, I might even have been able to turn there day from a bad one to a good one.

And that’s got to be better than adding a possibly unnecessary major feature. And if it does turn out to be a good thing to add, then it’s best to leave it to version two, when it can be given the attention it deserves.

Tease...

Still working on stuff, should be ready for public viewing by Friday. In the mean-time, here's the most obscure teaser I could think of. Watch this space.

In other news, the new A List Apart looks and feels fantastic.

You might as well take the blood from my veins while you're at it

I've been scoping out Adobe Creative Suite 2 Premium. I need to be able to some print work soon, and Adobe inDesign seems to be were it is at (and the other tools, like Illustrator and the new version of Photoshop, are pretty damn useful).

The package costs 895 sterling, which at today's exchange rate works out at just over 1300 euro, excluding VAT. It's a lot of money, but with a lot of work I think I'll be able to afford it over the next couple of months. I also reckon that the cost will be more than offset by the additional work I'll receive.

Here's were the problem starts. CS2 allows you to install the software on two machines, providing that both are not used at the same time. As I don't employ anyone, I'll be the only one using it. Grand.

I have a Mac laptop (I will be installing the software on the new one, if it ever arrives; but that's another story) and a PC desktop. The licence only allows you to install the software on one type of machine. If you buy the Mac version, then that software must only be installed on Macs. It's a similar situation for the PC version.

Here's the kicker... it is cheaper for me to buy a new Mac desktop or PC laptop than it is for me buy both the Mac and PC licence of CS2.

There's an excuse for a hardware purchase if I ever saw one.

Seperate

Got tons of ideas on what to include in your project? Want to seperate the wheat from the chaff?

Often, we'll have a lot of ideas that seem great at the time, but either these aren't good ideas or they just aren't suitable for the project. Here's a technique that I use, one that I find helps me to figure this out as early as possible - when I have the least amount of time and effort invested in the ideas.

You'll need a pen and some paper.

1. Write a list of everything you think should be included.
2. Re-write this list, and under each item write why this item should be included. If you can't think up a good reason, cross the item off the list.
3. Leave the list for a while, then come back to it. Look over the reasons you've written. If the reason doesn't sit well with you, then cross that item off the list.

By physically writing them down, I find the ideas and the reasons are made to feel more concrete, and shaky ones become more obvious. Besides: if you don't have a reason for doing something, are you really designing?

What do you think? How does your process work?

Talk

I'm giving a talk in Maynooth on Tuesday the 29th of March, at 6pm. I will be covering effective design. How do your know if your designs are effective? How do you make them so? Come along and find out.

More information on the talk.

Des hears things

The questions were interesting. One of his replies was Sir I will hereby bet 500 dollars that a blind person will be able to “read” and access all the material used here today by me, and in all my courses. Until you can make that claim, I will tell you to stick your “so what” comment up your ass.

He got a round of applause for that.

Des recalls a talk given by Brian Rosmaita at this years ACM SIGCSE Technical Symposium, in St. Louis. Brian was speaking on the use of web standards to improve accessibility.

Further design articles

You may be wondering what happened to the design series. Truth is, I have the scraps of four articles waiting to be completed:

1. Personas for this site
2. The structure of an article
3. Effective bookmarks
4. Design experimentation and out-of-order work

I need to tie them together into clear and distinct pieces. In the mean time, here's some out-of-order work I've been working on: a design experiment.

Basic web analytics

Web analytics is one of the less exciting, yet sometimes damn interesting, fields of the web industry. Web analytics helps you understand how your website is being used.

I had a quick peek at my web stats and came across a bit of a shock... quite a few people were clicking on the my recent projects link, then leaving the site.

The projects section had been long neglected. The “latest project” link in the sidebar lead to the only project I had bothered to post; worse still, it was little more than a couple of paragraphs from Lipsum.com. This was always something I intended to fix, but had simply forgotten.

Now, my laziness seemed to be having a negative effective on the visitors to my site.

Unfortunately, Webalizer doesn't allow me to filter out bots well, and my current host doesn't give me the level of access to stats that I'm used to. It's possible that a lot of these hits are from the Googlebot or similar agent. Yet, despite its flaws, it helped. It indicated that something was wrong with my site. Even the most basic of web statistics will give you some idea of what is going on with your site. If you do have access to them, take a look. You could be in for a shock.

The problem has now been given a quick patch, which will do until the redesign is completed. I also got rid of the ridiculous “Lorum ipsum sit ala mocktoo” text in the archives section. I'll be running some other patches on Thursday.

In other news, I am insanely busy right now.

Site launch: Zoomtard

Zoomtard is the online alias of a friend of mine, who wishes to remain anonymous (but it isn't Anonymous... guys, this is getting confusing).

I designed the original site a long time ago, and decided it could do with some improvements. I spent Friday night working on an XHTML / CSS template, and Saturday evening upgrading to MovableType 3.14, making the templates work nice with MT and installing plugins.

There's still a few bugs here and there - most notably in Safari and IE5/Mac - but for Firefox and IE/Win users the site is pretty much as it should be. I'll be adding Flickr integration and making some tweaks during the week.

The colour scheme is a modified version of the original Zoomtard scheme, designed to enhance the appearance of colour photography when used in the main content area.

As an aside, this coming week looks to be very exciting, if I ever get my set of web services working. They're part of a little project I've been working on. More on this as the week unfolds.

This isn't all about you

So far I've talked about what I intend to get out of my new site. These goals are very important, and they will shape the development of the site substantially. But my needs are not the only needs to consider. I will not be the only one using this site. What about my visitors?

You can look at a website as an interaction between the owner or owners of the site, and its visitors. This interaction involves explicit communication - text for example - and this is the most obvious interaction. But it also involves a lot of implicit and often subtle communication. This is the “body language” of your site, and is important to consider as part of the overall user experience.

What worth is it to have your business site claim to value its customers, if their experience of it is frustrating? If your site makes it difficult for a visitor to complete a task of theirs, it's as if you've turned your back on them. You should aim to support these tasks, and avoid annoying your visitors.

Like it or not, your site will behave in a certain way depending on the decisions that you make during its development. It's your job to make sure it behaves in the way that you want.

I know it's easy to make assumptions about the user experience your site provides, but such assumptions are dangerous. Perhaps it will help to think of it this way: when you visit a site that frustrates you, one that genuinely annoys you, do you think the designer of the site set out to piss you off?

It's unlikely. They probably just made bad assumptions about their visitors.

The first step you should take to avoid making such assumptions is to make an effort to understand them. Who will your site be aimed at? Who is your audience?

In the case of my own site, I already have a good idea of the audience I'm trying to aim at.

1. Web designers and developers, who may be interested in hiring me to work with them on a project or interested in using one of the products I plan to offer in one of their own projects.
2. Business owners who are looking for someone to hire for some design or development work.
3. Current clients.

If you do not know who the audience for your site is, you should find out. How can you design something for someone if you don't know who they are?

One tool used by designers to help keep their users needs in mind during development of a product (which is what a site is) is the persona. I was going to describe what a persona is and how it is useful, but Don Norman has done a better job than I ever could. I recommend you take a look at his essay “Ad-Hoc Personas & Empathetic Focus”. Read it. In the next installment I'll provide personas for each group I'm designing for, and expand upon the strategy of the site.

Making a start

The first part of the redesign series.

So now, a site must be designed, and work has to be done. But what will this work be? How do we decide how we are going to accomplish our goals?

The very first task is to decide what these goals are. This may seem obvious, but it's not as obvious as you may first think.

Getting site goals from a client

Often, a client will state their goals for a site, and it will read like a list of features. A client may say something along the lines of “Well obviously we need a home page, a product catalogue, and a contact page”. They may very well need all of these, but you should dig deeper than this. Be sure to ask them why they think they need these features.

If they've put any thought into it, they should be able to give you their reasons. If not, they've probably just assumed it needs to be there. Such assumptions are dangerous. You don't want to be locked into providing a feature on the site that you know shouldn't be there.

Let's take a look at the example of the product catalogue. Ask them if they plan on selling their products over the web. If they say yes, make it clear to them that the product catalogue will only be the public face of this; there is a lot more to an online store than what a customer sees.

If not, then what are the consequences? Can you imagine Amazon without the buy button? Depending on the products your client sells, a full product catalogue could do little more than annoy their customers.

If they are not going to sell their products over the web, why do they want a catalogue? If they want to use their website to increase their sales, there are better ways to do this.

In neither case is their actual goal to simply have a product catalogue. The client sees the product catalogue as a means to achieve their true goals. Discovering and clarifying these goals is one of the most important parts of making a website.

This site

You may be wondering why I'm mentioning this, as I'm designing my own site. But my client is myself, and in many ways I am the worst client possible. I may assume I need a certain feature on site, and push it through without making certain that it is necessary. It's easy to make such assumptions when working on personal projects.

O, and I'm paying myself terribly.

Why, for example, do I need a blog on my site? The answer is that I don't, unless it helps achieve a goal that I have set.

The goal of the new site is, first and foremost, to earn me more money. Goals like this need to be clarified. How do I intend to achieve this?

One of the things I'm working on is a product that will be very useful to a lot of web designers. To help me sell this product, I want to attract web designers to my site. A good way of attracting web designers is to become a solid resource to them. One way of doing this is by writing content that is of interest to designers, such as a running case study of a redesign.

I also offer web design and development services myself. I want people to hire me, so I must display my competence.

The goals of the new site

The site goals are:

• Help me make more money.
• Increase the number of visitors to my site from the target audience.
• Display competence in my abilities, so that I am more likely to be hired.
• Provide information about my product(s), in manner that raises interest and drives clients to contact me.
• Encourage potential clients into a one-to-one conversation with me as soon as possible.

Remember this: design is, at its most basic, problem solving. By setting clear goals, you can understand the problem well enough to solve it.

The design process

I'll be working on redesigning this site, as the design doesn't fit the new direction I have in mind. I've decided to open the design process up, so that people can see what I did to create the new site.

I'm not going to say that this is the one and only way to design websites, but I know that a real-world example would be very useful for people to study, particularly those who are just starting to learn.

Plus, as an added bonus to me, having to document my work in detail will help me to think a lot more about what I'm doing.

First update on Monday.

Site launch: Transware PLC

I did some work for Transware PLC recently, and I'm happy to announce that the site has been launched. I was involved with the visual design, template creation, and asset creation. This site was built using web standards.

Continuing the out-of-context confusion

Tshirt design #1

Thanks for the confusion, Monster.ie

I'm looking for work at the moment, and the easiest way to look for work is through my web browser. One of these sites is Monster.ie. Monster's site seems designed specifically to frustrate the user.

Here's an example. I'm looking for a web design or web development job. This means that a suitable job could be in any of these twelve categories:

• Web Application Developer
• Web Applications Developer
• Graphic/Web Designer
• Web Designer
• Web Designer/Developer
• Web Developer/Programmer
• Web Programmer
• Web Developer
• Sr. Web Developer
• Senior Web Developer
• Web Master
• Webmaster

What's worse is that they recommend you name your CV after one of the categories, without giving you a list of what categories actually exist, so that an employer can find it easily. What category should I choose? I chose Web Designer/Developer; does this mean that an employer looking for a Web Designer or Web Developer won't find my CV?

I've been using computers since I was five. If I find a site targetted at the general population difficult and frustrating to use, something is seriously wrong with their design process.

Test your websites

Now I can test my websites in a wide selection of browsers. I took this screenshot today. Running Panther on PearPC, I'm now able to test websites on the Mac without leaving my PC. The picture below should make a lot of people vomit.

Browsers used include:

• Internet Explorers 3, 4.01, 5.01, 5.5 and 6 (Windows) and Internet Explorer 5.2 (Mac)
• Mozilla Firefox 0.8 and Netscape 4.08 (Windows)
• Safara 1.2 (Mac)
• Opera 7.50 (Windows)

It's pretty nuts alright.

Work in progress

I've just finished some work doing a rough comp for the new design. This new design incorporates the changes to the information architecture of the site, and it looks pretty sweet so far:

Site update

I'm pretty busy at the moment with regards to paying clients. But here's something that should interest John Ryan at the least:

Because of the way MovableType works, I'm looking at probably four seperate "blogs" to run this site the way I want. This is insane... there needs to be a better way of handling a site like this.

I'm going to have to do some magic to get this to work cohesively, but there's certainly some things that I'll be doing that will be of interest to those using MovableType.

Site redesign

I've decided to do some clean up on this site. There's far too much crap on the pages. I doubt there's many people who require a 13-link blogroll on every page of the site.

The work will primarily involve usability and IA "tweaking" and, eh, "doing".

I'll be adding in a couple of new site features. There's a teaser for one in this post. I'm keeping my mouth shut.

This town was made for web standards

Found around Rathmines:

Practical design is a pain in the ass

There is no denying it... practical design is a pain in the ass. You want your design to be perfect, but the perfect design is the least of your problems. The client wants the site finished by a certain date, and even if they don't, there are other things to worry about. Is there enough cash coming in to make the business viable? Could your time be best spent on other jobs?

I'm glad I'm involved with the redesign of Boards. If anything, it's a nice leisure activity. I get to do all of the things I would like to do for a commercial web site, but without the pressures I've mentioned constantly grabbing my attention. I really wish I could be doing this with a commercial project, but to make it viable I'd need to charge at least double what I'm charging at the moment.

Speaking of which, the number of volunteers for the BERTs is over 160. Now I need to figure out a nice way for dozens of people to take BERTs as reliably as possible over the web.

Dude. Surf's up, dude.

Overwhelming response

On Saturday, Dan King (aka Regi) posted an announcement on Boards that said the redesign team needed some help.

I'm the leader of the redesign team. I wanted to do some bipolar emotional response testing on users of Boards to identify the brand of the site. I wrote a document explaining my purposes. So far, we have over ninety people volunteered; and that's not counting the thirty-five that couldn't send me a private message because my inbox was jammed.

The response has been overwhelming. Thanks to everyone who's volunteered; I should have some more information for you by the end of the week.

Random Title featured at the CSS Vault

My site has just been featured at the CSS Vault. Scrivs' comment: "Stealing the background color for my next design. Thanks.".

More information is available at the entry for Random Title at the CSS Vault.

Zoomtarded

Being skint means you can't afford to buy birthday presents, so when a friends birthday comes around you can ignore it or fall back on making them a present.

Not many people want a blog for their birthday, but Kevin seems to be happy with his. I'm pretty happy with it too. Aside from the Movabletype logo, it is all text, styled with CSS. And it is called Zoomtard.

Next project, Irish Citizens for Trustworthy Evoting.

In other news, the new Computer Science department website sucks.