Archive for the ‘Standards’ Category

UX Questions with Andy Budd

Tuesday, July 13th, 2010

Last night was London Web Standards‘ UX Questions with Andy Budd  (of CSS Mastery and Clearleft fame)

My sketchnotes for this are at the bottom of the page. This is only a brief write-up, hopefully the LWS guys will put the video up soon. Much of this is para-phrased. Andy, if you do read this, let me know if you want any of these answers changed.

Q: Good UX vs Good design? (the actual question was a lot more wordy than that)

UX is a quality attribute, it can be good and bad. An aspect of good design takes UX into account, though there are exceptions i.e. the Phillips Juicer. Good design does not imply ease of use, UX is a design philosophy or style. A good UI designer understands HCI, social, environmental and cognitive psychology .

Q: User-Centric Design or Persuasive Design?

Both together please.

Q: How do you manage difficult clients?

Clearleft tend not to get them thanks to their reputation. Basically, just manage expectations all the way through.

Q: What should you do if you’re told to design “for IE 6″ or “inaccessibly”

Ignore the request. You’re a professional (dammit) and you need to use the right tools for the job. Don’t just keep patching a crumbling building, i.e. if you have an intranet made for IE6, don’t just patch it up, start again.

Q: What tools couldn’t you live without?

Pen and paper. Oh, and sticky notes.

Q: What makes a good UX designer?

  • Empathy
  • Inquisitive
  • Unsatisfied with life (want to make things better)
  • Desire to fix the world

Q: How do you get clients to invest in UX even if they have a small budget?

Design on paper to reduce costs. Too many designers just go straight into photoshop. This will allow for more iterations and less money in the long term. Remember that you’re also in a facilitation role so its up to you to guide the process.

Q: Is any testing better than no testing?

Yes.

Generally there’s lots of low-hanging fruit (if doing a re-design) so take that! You only need to do the deep level of thought if you’re solving a very specific problem.

Q: Are there any design patterns you use regularly? Should you make new ones?

Real-world patterns work very well, i.e. tabs. Most people don’t know that a site logo takes you to the home page, so always have a home link. If you’re making a new pattern, test test test, then think, would something else be better.

Q: Where do you get your inspiration from?

The real world. Architecture, a book called “Why people buy” (but not the section on the internet), the Disney Imagineers. Overall, it’s about how it functions, not how it looks.

Q: Is the user wrong? When does the designer know better?

Generally, the user isn’t wrong. It’s very rare that their opinion doesn’t count, so swallow your pride.

Q: How do you establish credibility in an organisation?

It’s difficult, very hard to do internally. You need to play the office politics game. Build a level of knowledge and use references as much as you can, so it’s not only you saying these things. Have confidence in you and what you are doing. Visualise it in your client’s language if possible.

Q: What should you do if a business objective creates a disjointed experience?

Andy can’t help on this one, this is an answer from the LWS crowd.

Switch it around, get buy-in from people and sell ti to them. Do it in the pub, many people are much more open there. With regard to “Dark Patterns” i.e. hiding a company’s phone number or directing through certain channels, read Dan Lockton’s post.

Finally, if you’re not happy in your job, there are loads of UX jobs out there at the moment. Clearleft is hiring a world-class interaction designer.

That’s it. Sketchnotes below. Hope you enjoyed it

UX Questions Sketchnotes

UX Questions Sketchnote - apologies to Andy Budd

Classitis (class-eye-tiss) – The new CSS disease

Thursday, May 7th, 2009

CSS has gone through many trends and phases in web development. Certain trends are welcome, like conditional stylesheets and developers refusing to do them for Internet Explorer 6. Other trends can have leave a web application with a disadvantage for the rest of its life, yes, in-line styles, I’m looking at you.

This is all well and good, people learn from their mistakes and in the end, best practice comes out. The latest trend seems to have brought us full-circle.

About a year ago, HTML was plagued by a trend known as divitis (div-eye-tiss), a syndrome where a web page was seemingly marked up entirely in <div> tags, making a mess of the markup and producing un-readable pages. This was mainly produced by new web developers who had just moved away from the safety of table-based design and into the world of web standards and can be easily remedied with some education on elements other than <div> and <br/>.

This disease now seems to have mutated and crossed over to CSS in a trend I’m calling classitis (class-eye-tiss). It’s easy to diagnose: the first sign is in the HTML. Look closely at each element, it may have a class attached to it. If it does, does the one above have the same one? If this repeats all over the page, you may have classitis. In the navigation of your site, do all the list items have the same class name? You may have classitis. The way to tell for sure is to dive into the CSS: If the styles are predominately classes (i.e. are “.className”) with ancestor selectors being few and far between, then you have classitis.

The root cause of such a syndrome relates to modern web programming languages, notably ASP .NET. I’ll try to explain:
ASP has a number of helpful server-controlled elements which when processed turn into regular HTML elements. These all have their own unique identifier, but this is the reference for the server, not for CSS. Therefore, each of these elements can have a CSS class applied to it, and developers use this constantly. The real kicker is that ASP encourages you to use its own controls rather than standard HTML elements, making this disease especially prevalent amongst users of ASP. What makes this even worse is that ASP has been the default option for enterprise level applications for a while now, and Microsoft have made ASP accessible to new users with the Express editions of Visual Studio. It’s now easier than ever to start coding badly.

Is classitis really that bad? Well, no, but it’s what it comes with that can cause problems. A recent web site template that I was given by a company that shall remain nameless, was riddled with classisits, even so far as that there was an individual class for each font type and size. Surely setting a single class for the body would be easier and using ancestor selectors after that would provide for simpler HTML. The real problem here is maintainability: my task was to add another page which used a three-column layout rather than their two-column one. I’ve ended up duplicating their code to make my new layout fit, even then, changes made to their stylesheet won’t be reflected in my layout.

It’s a sorry state of affairs, but the remedy is simple, learn to use HTML elements properly. Some developers seem to forget that <html> and <body> are tags like all the rest and can be used to dictate the styles of the whole page. For users of frameworks like ASP, remembering that there are more elements than the ones the framework provides is very important; though don’t rely on the visual designer. Classitis is curable, and education on its prevention is important. Lets hope it’s caught before it becomes a pandemic.

It’s time to upgrade your browser, no, really

Friday, March 20th, 2009

IE 8 Logo
Internet Explorer 8 has now been unleashed upon the Windows world to a small ripple of applause and a snigger from every other browser manufacturer. It’s a big step forward for Microsoft, the IE team have put in a lot of hard work and should be proud of everything they’ve done to enforce standards on the web.

Now it’s your turn.

IE6 still accounts for 20% of all web browsing, and its even higher for corporations where policy gets in the way of letting people upgrade.  This browser is now so far behind in terms of security, speed and browsing experience that it’s not even funny, and has become a perennial headache for all web designers who want to push the Internet forward as a medium.

So, I implore you, upgrade your browser today. I’m going to do so and declare from the rooftops that I shall no longer support IE6. My web sites will be standards compliant and I will not be making any exceptions for this browser.

So, farewell IE6. It’s been a long time coming, but you’re gone.

CSS Matrix Layouts: Another Way?

Friday, March 13th, 2009

Today, Jonathan Snook posted about CSS Matrix Layouts, a proposal for a third way for creating advanced layouts in CSS3, with Advanced Layouts and Grid Layouts being the others. His ideas are around creating a grid and defining sections (be it divs or natural HTML5 elements) that are effectively laid out like a table. Each section can span like a table can span rows and columns, with all those values being stored in CSS. Take a look at the post for an example, it’s quite simple once you get your head around it.

I raised some concerns about generated columns, and how the grid might not know how to react, and also that adding columns is a bit of a headache in complex layouts, but is relatively minor compared to the benefits that it would bring. In general, there’s a lot of support for the module. Hopefully we’ll see a draft on www-style very soon.

Of course, this is just all new stuff and unlikely to be fast-tracked to CR status any time soon. However, this module is similar to the CSS Grid Layout module, and some of Snook’s work could be very useful in that module. I’m going to investigate the working draft and if it looks like I can improve it, I might even have a go.