Skip navigation

…to my own domain: tactile.co.za
Please find my new UI / UX / CSS blog posts there :)

A date picker based on one real-world interaction

Lovemore recently posted on his blog about calendar-based date-picker solutions within the jQuery UI framework.
Upon seeing his ‘sliders’ design, shown below…

Sliders for setting hours and minutes

…for setting the Hour and Minutes, it got me thinking: Have you ever tried to set the time on one of those old time-tumbling alarm clocks?

The hour and minute ‘plates’ each had a tactile cog on the right of the number that you could rotate, tumbling the hour or minute depending on how much you wanted to change the current time.

Tumbling alarm clock

What about using something similar for our online interactions?

 

Affordance at play again

Now, couple the retro-inspired-idea above with the principle of affordance.  Instead of giving the user one massive field to enter a fully-qualified date, provide them with fields for each data type within the date. e.g.

ccyymmdd

 

Progressive Enhancement as the cherry on top

Then get the JS to attach a CSS-based image of a cog to each field.  When you mouseover each ‘cog’, the cursor changes to a horizontal dividing line.  If you click and drag down, the date starts to tumble down.  The further you move the cursor from the start point (while still holding down the mousebutton) the faster the date or time will tumble.

 

Microsoft Windows uses something similar with their Date/Time settings, only you have to set focus to the hour if you want to change the hour using the up and down arrows:
Windows Time

 

Here’s a crude example of my previous date fields with tumblers attached:

Tumbling date pickers

 

Now imagine you need to set your birthdate using the above control.

We could initialise the date with an arbitrary date such as: 1980.06.15.  The User would tab or click through each field and correct it as necessary. [Aside: Isn't it worse to correct predefined dates than enter new ones from blank - has anyone tested this?]  The user could manually type each field, or use the tumblers with the mouse.  One could also capture the Arrow keys.  If the down arrow was used, the date could increment up by each keystroke.

If they reached the logical end of say, the day field (31), it would loop around to the first day (01).

 

Pros and Cons

So, what do you think so far?  Is it feasible?

The biggest drawback I can think of, is having to deal with multiple fields for the date.  You’d have to do lots of stringing and unstringing to get a fully-qualified date field.

Second drawback would be the difficulty in making the graphics intuitive enough that the user knows they can pull down the tumbler ‘cog’ to change the date.

The biggest benefit, is allowing the user two options for entering dates.  Either manually by typing in each field and tabbing to the next, or using the tumblers.

The second benefit is no fly-outs for full calendar date pickers.  I hate these with a passion, but I end up having to use them anyway, because it’s easier than guessing the full date format for a single date textfield.

 

Thanks to Lovemore for the idea-inspiring framework of his blog entry.

A List Apart is one of the world’s best resources for Web Development news and tips.  They cover a number of topics including HTML, CSS, Usability and Accessibility.

Last year ALA ran a survey to help those involved in Web Development gain more understanding of what they’re worth and where their colleagues are distributed.  A first for the industry.  33,000 people from around the globe responded and the results are available in a 1.6mb PDF.

It’s time for Round 2!

If you’re South African and involved in any form of Web Development, be it Graphic Design or a Project Management, I’d encourage you to complete this year’s survey.  (To help balance the surveyed income, so it doesn’t look like I’m underpaid!)

Once you’re done, then you too can put a little banner on your site.

Internationally, User Experience is a hot topic in terms of web development. Sleepy South Africa is only just awakening to the UX day.  (Maybe that’s just my perspective, since I started learning about User Experience Design within the last 3 years after picking up a copy of Don’t Make Me Think.  I’m more aware of it now.)

My perspective is also that SA is ripe for UX pickings.  Only a few South Africans have the capability and experience to promote UX services in our Software Development Industry.  I wonder why that is?

It could be a facet of ignorance – Not many companies know about the benefits of User Experience Design.
It could also be about arrogance –  Many companies think that Usability doesn’t need to be tested.  That their design work is perfect.
It could also be about perceived costs – It’s seen as an unnecessary cost on an already expensive software project.

User testing is a humbling process and needn’t be expensive.  The initial cost is an investment. The outcomes of a User Test promote better software, acceptable software.  All that’s left is our ignorance.

 

How can I educate myself in UX matters?

University-related Training opportunities in Usability and HCI are quite limited locally.  UNISAs B.Sc curriculum in Information Technology only offers 2 modules over the course of 3 years.  UCT are doing HCI research in their Faculty of Science, but I don’t see any mention of courses tailored to User Experience.

Human Factors International (with a branch in Pretoria) offer a set of very short certificate courses, they’re niche but decidedly expensive.

If your time and budget are restrictive, you could always resort to reading the relevant books. I recommend:

 

Is there a local community?

It took a Bright Boy from Johannesburg to start the SA UX Forum which is open to anyone with an interest in UX.  Since its inception in April 2007 its member base has expanded to 95 souls.

More recently, we’ve had GeekDinner-style Meet-ups to create awareness and network.  (The next Cape Town meetup is scheduled for the 20th of August, why not pop by?)  The meet-ups have proved a great opportunity for learning and meeting those with similar experiences.

 

Who can guide us?

Well, Phil Barrett is one. Director of Flow Interactive and general User Experience Guru who emigrated to South Africa last year or so.  Phil has been the proverbial awareness gypsy, presenting numerous talks at StarCamp, 27 Dinners and Heavy Chef cookups.  Now Phil is central to the Cape Town happenings of the SA UX forum.

He’s the sorta guy that would gladly visit your office and give a presentation on User Experience Design and explain why it’s so important for any software development project.

 

Where to now?

Beyond the likes of Phil and Jason Hobbs in Johannesburg, it’s up to us.

Talk about it, ask questions.  Mingle with the right folks. Promote UXD within your company.

CSS has reached a level of maturity now where it’s safe to use in a cross-browser environment. Gone are the days of maintaining reams and reams of presentational markup – That’s hard work. CSS is all about working smart.

Working with someone else’s CSS can be a little tedious. Rules all over the place. And in what order? Finding matching rules used to be a complete pain before FireBug came out. (Have I mentioned before just how useful FireBug is?)

There are a few things you can do to make your CSS more readable for others and yourself.

It all starts with dividing your CSS up into at least 3 sections.

 

A Section for General Rules

First, start off your CSS with a section dedicated to general rules. Ambigious rules. Set the colours of your links, contrasting background colours, your default font sizes, etc.

/* =============================== *\
|  General                          |
\* =============================== */

a:link {}
a:visited {}
a:hover {}
a:active {}

a img {border:0;}
.aural {display:block; position:absolute; top:0; left:-999em;} /* Off-left technique */

If you’re using a resetting CSS, you might want to skip the above step and replace it with an @import rule instead.

 

A section for your Document Tree

The next section is your homage to your HTML. (Without rocksteady HTML foundations, your CSS will be fragile.) From page to page, your HTML should seem familiar in it’s use of elements and identifiers.

Take this snippet of common HTML as an example…

<div id="container">
<div id="header">
<h1 id="site_name">Acme Inc</h1>

Welcome to Acme Inc.  Explosives 'R Us.
</div>
<div id="navigation">
<ul>
	<li class="active">
				<a href="/">Home</a></li>
	<li>
				<a href="/about">About Acme</a></li>
	<li>
				<a href="/contact">Contact Us</a></li>
</ul>
</div>
</div>

Now, your CSS can reflect this structure. If you’re familiar with your own HTML (as you should be!) then laying out your CSS in a fashion similar to your document tree will go a long way in making your CSS more readable.

Start with empty rules for each element in your common HTML:

/* =============================== *\
|  Document Tree                    |
\* =============================== */
body {}
	div#container {}
		div#header {}
			h1#site_name {}
			div#header p {}
		div#navigation {}
			div#navigation ul {}
				div#navigation ul li {}
					div#navigation ul a {}
				/* Active navigation item */
				div#navigation ul li.active {}
					div#navigation ul li.active a {}
[...]

 

Indenting as Ancestry

By using tabs, we can indicate which elements are subordinate to their parents. A tab for each generation. This does shift your properties into the right-hand side though – Some folks aren’t happy with horizontal scrolling in their IDE of choice, but once you get over that you can quickly navigate your CSS. It’s very important at this stage to disable Word-Wrapping, else it won’t make visual sense.

 

Describing identifiers

You’ll notice I prefix each one of my identifiers (e.g. #navigation) with its associated element. In this case, a div prefix. One typically doesn’t assign an identifier to any other type of element, so why not improve the readability of your code by describing what element it is.
div#navigation says a lot more than just #navigation. Some of the kilobyte purists out there might disagree, but if you had to inherit this code, which would you prefer?

 

Prioritised Properties

A lot of folks write out a property for each line, like so…

div#navigation ul a {
display:block;
float:left;
background:transparent url(img/bg_nav_item.gif) top right no-repeat;
text-decoration:none;
color:#000;
}

I find that difficult to separate rules from properties, even with syntax highlighting on.

I prefer to layout the rules horizontally so that it doesn’t break the document tree we created earlier.

div#navigation ul a {display:block; float:left; background:transparent url(img/bg_nav_item.gif) top right no-repeat; text-decoration:none; color:#000;}

This requires a prioritisation exercise though.

Once you start assigning properties to each rule, it’s important to order these properties based on how ‘drastic’ the rule is.

  1. Block level changes and layout properties should come first.
  2. Follow that up with background properties
  3. Then tail it off with text and font decorations and colour.

 

Modular CSS

I then create a section in my CSS for reusable modules within the site.

I typically create a module for:

  • Tables
  • Forms
  • General Content

An example:

/* =============================== *\
|  Modules                          |
\* =============================== */
div.form {}
	div.form form {}
		div.form fieldset {}
			div.form div.form-row {}
				div.form input.text {}
[...snip...]
div.table {}
	div.table table {}
				div.table thead th {}
				div.table tbody th {}
				div.table tbody td {}
[...snip...]
div.general {}
	div.general p {}
	div.general ul {}
		div.general ul li {}
[...]

 

Live time

Hopefully your software project doesn’t end before it begins. But when it’s time to go live, you’ll need to optimise your CSS, especially in its use of spaces and tabs. Strip out all the tabs and remove unnecessary spaces. Of course, you could leave it as is if you have to maintain it later.

Thank goodness for caching!

 

Conclusion

I hope this article helped you in creating easy-to-read CSS. CSS doesn’t have to be dirty and difficult to maintain. Keep it clean and it’ll look after your site’s styling needs in an efficient and intelligent manner.

Consider the following photo…

It looks like a textbook example taken out of Donald Norman’s “The Design of Everyday Things”.

Can you spot what’s wrong with our urinal subject?

First some background. This urinal never used to be part of a waterless system. Some time ago the building custodians at Riverpark Mowbray upgraded all the urinals in an effort to save water and therefore costs.

I can’t help but relate this urinal upgrade with software enhancements.

The Users Perspective
The upgrade could have been so simple from a User’s perspective. All the User needs is the urinal. Just remove the pipe. Plug the hole in the wall or maybe even cover it with an informational poster on the waterless system and how it’s contributing to the saving of our environment? Heck, it could even be an advertising opportunity! (Those are quite nice when you’ve got a long pee)
Instead, just like user’s scan webpages, the message is ignored. There is perceived action that the urinal needs to be flushed, the principle of Affordance.

The Upgrade Costs
Add the cost of the upgrade to the waterless system plus shutting off the water plus creating the sign. I assume some external contractors were brought in to change the drain and reservoir system? Costly, but worth it. The sign is made of perspex, reasonably high-quality too. Costly, but not worth it. Why?

Pointless Feedback
The Message is not needed. The Message, if needed, is inappropriate. One simply can’t flush the system because there is no water to begin with. In fact, if there was no pipe attached to the urinal, one wouldn’t feel the need to flush afterwards. We’re so tuned into using the devices we’re given, that even if they don’t work, we try use them anyway.
I’ve noticed on several occasions after using this urinal that I still lift my hand to flush and nothing happens. The message is not working because the device to flush is still present.

A case for User Testing?
User Testing this situation would have resolved the oddities with this urinal. (Wouldn’t that be awkward!) Sure, there’s an extra cost, but as a metaphor for Software Development, a cost that would be worth improving the User Experience.

Victims of the Best of Intentions
The only losers here are those men with faulty prostates who use the flushers for the same reasons Pavlov rings the bell, to trigger a reaction. Poor guys.

What do you think?

Brad Abrams was recently in Cape Town to talk at Mix. Ernst pointed out that the SADeveloper.net crowd managed to steal Brad for a night to give us a talk on the upcoming MVC Framework for ASP.net.

I know very little about ASP.net and I’m quite interested in MVC frameworks. (since most of my work involves the V in MVC). Have Microsoft finally come to the MVC party then? I put my name down for the Wednesday night talk to investigate.

In the past, as an outsider, I always looked at Microsoft-related web application frameworks with some manner of distaste. The markup it produced was horrible. It required licensing fees. And the caliber of the average developer was nothing short of mediocre. My ignorant, judgemental foundations. I decided to cast my judgements aside and see how the other half works.

Brad’s talk gave a brief intro of MVC. Familiar territory. A Controller prepares the Model for a View. Views are presentation only, etc. In contrast, ASP.net is what’s traditionally known as a Model 1 Framework. Business logic can be and is used within the View. To get the most out of ASP.net, some developers have created their own MVC frameworks using ASP.net with much success. This is the first time Microsoft is adopting MVC in an official capacity. About time.

Brad described how the team in Seattle was working through the transition from View-Centric architecture to the more separated MVC approach. They’ve broken many things along the way, but they’re forging forward.

The ASP.net IDE is quite a beast. Helper functions pop out of every period. I imagine that a competent developer can generate code at lightning speed within Visual Studio. Quite the stark contrast between say using Emacs.
Being familiar with Altova‘s excellent XMLSpy, I almost felt a kinship with Visual Studio’s interface.

The IDE has it’s typical Projects folder, with subfolders for Models, Views and Controllers, and interestingly enough a whole section dedicated to Unit Testing components.

Brad flipped through some Unit tests, created a Controller Function and generated a corresponding View. No more horrible markup, the markup is as you want it. Semantic HTML output baby! Then I was stumped by the template syntax. Apparently they’re working on the presentation logic, but it was like stepping back in time. Run-time Percent tags wrecking the View. Brad explained that they’ve had to resort to old template syntax until the View matures and they start using Tag Libraries or such.
Then it was just like they did in those cooking shows: The buzzer went and the chicken popped out the oven, freshly roasted. A full blown web app chicken. The buzzer in my brain went off too, I realised at that point that I really need to do more development – make my own apps, to tinker and understand.

On the whole, the dot net MVC Framework has legs. The majority of the audience was keen to adopt MVC, with the provisor that the framework mature a little. I think a lot of developers present have a vested interest in the old ways, since so much work has been done there already, it’s also quite a mindshift from just working in the templates. Still, MVC could potentially be used on a new project.

I came out of the talk with a new found respect for ASP.net and the rather-formal Microsoft geeks. I think the adoption of MVC as a Web App Framework is a positive step forward by Microsoft. (I’m too happy with Python and Genshi at this point to switch over though.) The Views in ASP.net MVC still have a long way to go before it can be considered a worthy contender in the Web Application Framework games though.

Update: Brad Abrams has blogged about his stay in South Africa, plus put up the slides and demo from his talk about MVC.  Good one Brad!

A journey of a thousand miles starts with a single step

Almost a year ago, a wise friend told me that I should really invest some time in getting a blog up. A blog to cover my experiences as a User Interface Developer, Standards advocate and Information Architect.

It should facilitate the sharing of knowledge. It should be my suit for the web office-party. It should be my platform. I hope it will be all those and more.

Join me, or just take mental pictures.

Follow

Get every new post delivered to your Inbox.