Steve Workman » Standards

UX Questions with Andy Budd

Steve Workman — Tue, 13 Jul 2010 10:27:22 +0000

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 Sketchnote - apologies to Andy Budd

No related posts.

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

Steve Workman — Thu, 07 May 2009 12:02:35 +0000

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

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

and
.

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 and 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.

If you liked this, you may also like:

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

Steve Workman — Fri, 20 Mar 2009 10:25:12 +0000

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.

If you liked this, you may also like:

CSS Matrix Layouts: Another Way?

Steve Workman — Fri, 13 Mar 2009 22:47:02 +0000

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.

If you liked this, you may also like:

Safari update makes itself obsolete on Windows

Steve Workman — Wed, 04 Mar 2009 12:57:48 +0000

Last week, Apple announced the Safari 4 beta with a whole host of updates and enhancements. Whilst all of this is great for Mac users, it renders the browser completely obsolete for Windows users. Let me explain:

Lets go through the list of new features.

Top Sites – Opera first added this feature 3 years ago, Google Chrome has it, all Apple did was make it fancy and unusable
Cover Flow – I like the live page preview (other browsers do have that) but cover flow, to me, is something that windows users will never understand
Full history search – Safari is the last browser to get this function
Tabs on top – Google spent a lot of effort getting this right, Apple haven’t put the same level of thought into it. If anything, it makes Apple look like they’re copying Google, badly.
Nitro engine – Makes pages run fast. Cool
Native look and feel – looks good in Vista, awful in XP. Considering Vista usage is < 10%, that’s not a good thing
Developer tools – once again, Apple is playing catch-up

So, what does this all mean exactly? Well, Safari is becoming more and more like Chrome. In fact, all Google has to do is update their Webkit rendering engine and they will be the same browser. In this manner, Safari for Windows has just shot itself in the foot by removing any differentiating features between itself and its nearest competitior.

I fully expect Safari 5 to make itself even more like Google Chrome (whatever that may look like in 2 years time).

If you liked this, you may also like:

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

Don’t just complain about CSS3, do something!

Steve Workman — Tue, 03 Mar 2009 13:00:56 +0000

A colleague of mine and I were discussing the current state of the internet, CSS3 and IE being behind the rest of the browsers in terms of standards adoption. He argued that IE was “rubbish because it doesn’t support CSS3 selectors/borders etc”. My reply to this was, “well, do something about it”.

IE doesn’t support any non-candidate recommendation CSS3 modules so they can’t be accused of not supporting standards. If you want this to change, we have to get CSS3 finished (at least one module!). To do that, the W3C needs help.

The CSS Working Group is made up of invited experts and representatives of the major web companies (Microsoft, Mozilla, Apple, Google, Opera and Adobe). It’s unlikely that you’ll get to go to one of their meetings any time soon, but everything that they talk about is discussed openly on their mailing list. I’ve been subscribing to this list for around 6 months and haven’t contributed a lot, but anyone can. They currently want people to comment on working drafts and come up with suggestions on how things should work and any problems you have day to day that you think can be solved with CSS.

So seriously, if you want to help, don’t just complain, do something.

If you liked this, you may also like:

Why iPhone Web Apps are Still Worthwhile

Steve Workman — Fri, 20 Feb 2009 19:56:17 +0000

I’ve been playing with iPhone development for a month now and I’ve understood the concepts and am ready to make my first app, but I haven’t.

See, my first exposure to the iPhone world was through a web app my company made for its partner group. It was a simple ruby on rails web app that used my patched version of iUI to drive the experience. It was such a big hit that I’m currently finishing up a third demo branch of this for a client, hoping to convince them that even large organisations can get on the mobile bandwagon. So, you may ask, why isn’t it being done as a native app? Well, there’s a lot of good reasons, but what it really boils down to is that if you’re writing a native app for the iPhone, you’re only writing it for the iPhone.

At Mobile World Congress this week we’ve seen new Android devices, new Windows Mobile devices and more of the Palm Pre, devices that have one important thing in common with the iPhone, a web connection and a browser.

The best thing about all of them having a browser is that 3 of the 4 run a version of Webkit with Apple’s transforms and animations built in (Windows Mobile users can download Opera ) So, really, when you’re creating a web app for an iPhone, you’re creating a web app for all other mobile devices with a half-decent browser (S60 included).

How much work would it be to port an Objective-C (iPhone)-based app to Java (S60 and Android) and then to .NET (Windows Mobile), only to have to create a web-based version for the Palm Pre! What all these iPhone developers need to understand is that if they want the full potential of the market they’d better start learning HTML5 databases and Javascript. Web apps are certainly still worthwhile.

All that said, App stores can’t push web sites to your phone, which is the main source of advertising and how the iPhone apps have become so successful. Maybe Apple should allow you to browse web apps too?

If you liked this, you may also like:

What Would the Best Mobile Web Toolkit Do?

Steve Workman — Tue, 18 Nov 2008 07:49:24 +0000

As I mentioned in a previous post, I’m planning a mobile web toolkit to replace iUI, but what would you want in it that’s not in iUI already? Should is work across all browsers, even Pocket IE and that godawful Blackberry Web Browser? Should it use progressive enhancement all over the shop or just create a new version for each browser? Should it focus on touch screens or is clicking important too?

Put your thoughts in the comments!

If you liked this, you may also like:

Easy Semantic Forms with CSS

Steve Workman — Sun, 26 Oct 2008 19:48:11 +0000

In the early days of the Internet, web sites were for gathering and displaying information. In its 20 year history, this hasn’t changed much! At some point on a site you have to enter your details or what information you’re searching for. So, it makes sense that the thing I spend most of my time doing is creating forms!

Most of the time you see a form, the label is on the left and the field is on the right, with validation or help after the input field. There are lots of ways this can be laid out, but the simplest and most semantically correct method is hardly ever used. What I’m going to show you is how to lay out a form properly with standards-compliant CSS.

The HTML
The most semantically-correct HTML takes the following structure

<fieldset>
<legend>Form Title</legend>
<form action="#" method="post">
<ol>
    <li><label for="field1">Field 1</label><input name="field1" type="text" /></li>
    <li><label for="field2">Field 2</label><input name="field2" type="text" /></li>
    <li><input type="submit" name="submit" class="submit" /></li>
</ol>
</form>
</fieldset>

The form is contained in a fieldset element, which, naturally, is a set of fields. This has a legend element, telling the user what this area of the form relates to. This is especially useful for giving context to the fields in multi-part forms. Inside this is the form element, after which we have the ordered list. It makes the most sense for this element to be used as a form is a list of questions and completing a form is an ordered process, starting from the first field and then submitting. The

The CSS
This is the tricky part, though it really shouldn’t be! Working on the principal that each list element takes up the whole width of the fieldset, it’s pretty simple to use them as floated block elements, as the code below shows:

legend {
	margin-left:1em;
	color:#000;
	font-weight:bold;
}
fieldset ol {
	padding: 1em 1em 0 1em;
	list-style:none;
}
fieldset ol li {
	float:left;
	clear:left;
	width:100%;
	padding-bottom:0.5em;
}
label {
	float: left;
	width: 10em;
	margin-right:1em;
}
fieldset.submit {
	float: none;
	width: auto;
	border-style: none;
	padding-left: 12em;
	background-color: transparent;
	background-image: none;
}

Starting at the top, the legend indents the text and sets it colour and weight. The ordered list then gets some padding and has its list style removed. This gets rid of any 1, 2, 3… notation that the browser adds.
The magic then starts in the list items. Firstly, they are floated to the left to allow for multiple elements on the same line. It then clears the float from any previous elements (i.e. the

above) and sets its width to 100%. This gives it complete ownership of the whole width of the fieldset – any subsequent list items will be on the next line down. Some padding is applied to the bottom of the list item to separate the fields making it easier on the eye.
The labels are then floated left within the list item. They are given a width of 10em and a right-margin of 1em. This gives enough room for most long labels and then all input elements to the right will be in line. The use of em is important here as users with non-standard font sizes will have consistent margins, whereas using % or px will produce an inconsistent look and feel.
Finally, the submit button is given a class of submit to correctly align the element with the input elements. This could also be achieved using input[type="submit] but IE6 doesn’t support attribute selectors so a class is used.
Notice that this CSS doesn’t style the input element at all. All elements after the label are free to be styled as required, they’ll all be in the correct alignment. This method works especially well with date pickers which have a small linked image at the end of the input element. The same goes for validaiton messages: no extra formatting is required.

This solution produces the following elegant form:

It doesn’t look pretty, but a few colour changes can make this simple form zing.

So, there you have it. Really simple, elegant, semantic forms.

If you liked this, you may also like:

CSS Animations on iPhones

Steve Workman — Thu, 14 Aug 2008 08:28:02 +0000

I’ve just come across this brilliant CSS 3 technique from Ajaxian on how to do web animations. This produces a great iPhone-esque technique by simply writing 6 lines of code!

Take a look, there’s a lot more that can be done with this.

If you liked this, you may also like: