Anthony Milner

Over the last few weeks we’ve been designing, implementing and testing a new admin interface for our flagship product Community Manager (for those not familiar with CM it is one of Australia’s leading .net content management systems developed by Elcom Technology and you can find our more about it here). We’ve done some intensive testing and will be finalising the build towards the end of the week however a number of devs have logged an issue which pointed out an irregularity in the design. This email from the Dev manager sums up the issue.

The dev team have been doing a lot of testing of the release during the last few days. Nearly all of them have noticed and logged as a bug the fact that the cancel button is styled differently to the other buttons. Do you think clients will think the same thing?

There is definitely inconsistency here, but it is entirely intentional. I first noticed the use of irregular buttons when using products developed by 37 signals and later became aware of a technique as described by Robert Hoekman, jr in his book designing the obvious, as “leveraging irregularity to create meaning and importance”. The proximity of the cancel and publish button could lead to a user mistakenly click cancel when they mean to save a draft so differentiating it slightly acts as a subtle warning. This also applies to scenarios which have Add/Edit/Delete options.

So basically the rule we’ve applied is when creating content give them a nicely styled button, but if deleting content or cancelling give them a slightly differentiated button which says “are you sure you want to do this?”.

The other option is to physically increase the distance between the buttons but this can create longer round trips and lead to greater confusion as the user attempts to locate buttons.

Of course this does not replace confirmations and warnings, rather it’s a small and thoughtful measure that will hopefully ensure that user have a more pleasurable experience when using the application.

Do you have an idea for an all singing all dancing web 3.0 web app, widget, Facebook gizmo doodad. If you do then the first step is usually to dig around and do a bit of research to determine if it’s already been done. So you do some research and cannot find anything like it. Then you excitedly draw up some wireframes, use cases, maybe a full blown spec and start to build. After a few months of hard work you stumble on a site and to your horror you find that its been done. This was the fate of the tight web crew in the comedy “Knocked Up”. They find that their genius idea for an “informational” site has already been done and dusted. This is not the stuff of movies, it does happen and when it does, do you throw in the towel and go back to the drawing board? Derek Sivers, president and programmer for CD Baby and HostBaby suggests that it’s not about the idea but rather it’s all about execution…

It’s so funny when I hear people being so protective of ideas… …ideas are worth nothing unless executed. They are just a multiplier. Execution is worth millions. Explanation:

Awful idea = -1
Weak idea = 1
So-so idea = 5
Good idea = 10
Great idea = 15
Brilliant idea = 20

No execution = $1
Weak Execution = $1,000
So-so execution = $10,000
Good execution = $100,000
Great execution = $1,000,000
Brilliant execution = $10,000,000

To make a business you need to multiply the two. The most brilliant idea, with no execution is worth $20. The most brilliant idea takes great execution to be worth $20,000,000.

So don’t despair if you find your big idea has been done. If the execution is weak or even so-so, there is still plenty of room for good, great and brilliant.

George Oates is our very own Flickr co-founder and designer originally from South Australia. I was really interested in going to this talk because Flickr practically created what is now summed up in the overused and misunderstood term – web 2.0. Her talk gave us an awesome insight into how Flickr flourished.

Here is a snapshot of history, ideas and experiences that George shared with us…

What is Flickr…

It’s a great place to be a photo

It used to be a game called gameneverending [MMRPG] objective – pick paper off a tree, find/trade items, chat – funny charming game that pulled people in. Deepy social, conversational, collaborative. The core engine of this game was used for Flickr. Photo sharing in 2003 was being done by huge brands such as Kodak… there was a growing demand to host photos online. Camera phones had just started appearing.

1.5 billion photos – 3000 new photos every minute – 10 million members

Naiveté can be charming and productive. Naiveté applies to usability. Many people that arrive at a site know nothing

Didn’t sweat the technique – just designed stuff – made a ton of mistakes but learnt from this

There was a shared understanding of netiquette amongst the user base of GNEr’s and Bloggers

There was an appreciation of experimentation

A lot of web natives who knew the boundaries of trust, membership began to grow. Comments from users were absorbed and acted upon quickly through Flickr ideas

The Gamma release “a state of continuous improvement” – Improved search, nav and layouts.

Removing rules of engagement around people makes the space more co-operative

Tried to mirror the offline experience of photos

Metadata associated with photos mimics offline i.e writing on the back

Use personas with care – If you don’t know who you’re dealing with it forces you to bring your own creativity to the product

Design for zero data – i.e for people that are new to the site and have not yet uploaded anything e.g groups page on Flickr.

Sensible defaults for software – lots of options does not mean more choice – it makes it harder to use and is lazy design – keep it simple simple simple

Experience “gates” – instead of a lockstep process you could have a branching tree

Show activity – this is important e.g. facebook – The activity/dynamism is what makes it successful

Go UTF-8

Support structures – not everyone is comfortable. Supporting the community need to be addressed.

Organic growth – need to be hands on and have human contact. Welcome people in give them beer ask them if they’re comfy.

Community guidelines – give people boundaries (not rules).

Mantra – “Don’t be creepy” German translation – “You know what you’re doing – don’t do that” [J]

Provide excellent customer care – have humans answer emails and manage forums. Good measurement of this is whether or not you received a reply to your assistance

Maintain a neutral POV – with great power comes great resp. Let users negotiate the space on their own

Remember to keep calm and carry on i.e in the face of negativity

Be open – nobody like surprises – e.g. be open (and creative) about downtime

When the community gives you you’re wealth I have a strong belief that you give it back. Anita Roddick

Recommendations…

Book – Abstracting Craft by Malcolm McCullough
Website – http://Futurefarmers.com
Cool photo – The face of Sydney project

Cameron Adams, The Man in Blue, spoke about creating a range of interfaces either based on user customisation or website analysis. Designer’s make the choice of simplicity (Google) versus bombardment (Yahoo) – Its very hard to make a design that suits everyone, you can usability test it but at the end you’re not going to make everyone happy.

Enter dynamic interfaces – allow us to create a range of interfaces to suit the differing needs which translates to a better UX. We have tried this in the past (circa 2002) but now have the technology – CSS, JS, browser and system capability and performance are here.

Two approaches are…

1. Customisation

Increasingly important with the rise of social networks. People are more aware of design and how their personality is conveyed on the web

Examples….
Twitter supports background images, styles and colours
My space goes further and lets you put in anything you want however the customisation is quite hard and is beyond most people
Flickr invest a lot of time in UX and are constantly evolving their site. They recently introduced a change page layout option to choose from 6 potential layouts. By changing the layout it affects the way people interact with your page.
Netvibes or iGoogle widget based layout to display and position
Searchmash is a Google’s next gen search tool. Which display faceted search options as expand/collapse widgets
Alpha is Yahoo’s next gen dynamic search interface offering which allows drag and drop page layout.

Beyond HTML -> SVG. Canvas originally developed by Apple (being used on the iPhone and Yahoo pipes), for dynamic vector based rendering.

If offering customisation you must make it easy to use. Myspace has no constraints, we should impose some constraints.

To achieve all this dynamic goodness we must separate data, style and behaviour

2. Analysis

The website does the customisation for you and the interface automatically adapts.
Examples…
Ben Sherman print friendly page
Diff layout for diff resolutions as seen on the dependant layout and white pages
Tangler – if you know a user has downloaded something the site could remember that and remove the option from the pagehowever don’t shock users and just remove it, use an ajax lightbox to ask the user if they want it removed.
BBC progressivley cusomises the middle panel using server side analysis based on user behaviour

Other interesting points…

A CSS file can now be supplied to the iPhone using media=”handheld”
CSS 3 provides for dynamic page resolution query and adjustment and it currently works in opera.
Google Web Development Toolkit – good for rapid prototyping
Design for browser width not screen resolution
We did this in 2002, why is this different? – Today its more about content personalisation as opposed to presentation
Are we giving users to much rope to hang themselves? – Keep them in the bounds of good taste but still give them the opportunity to personalise aspects.

I was about to go to the Google Mashups, Web Apps and API’s talk and then got a recommendation from Michael Kordahi to go see Andy Clarke’s talk.

Andy spoke about and demonstrated the parallels between comic book and webpage design and layout.  Comic books like websites have a limited amount of space to convey a message.

Comic books use panel size to emphasise the amount of attention you should be giving to it. Using size and shape of panels in an ecommerce store can give the user more time to digest the offering.

Use of alternating content blocks with either backrounds or borders to draw emphasis to regions of the page.

Another interesting technique is using text contrast in various panels to help the user to flow through site more effectively.

Do we need to have a another look at splash pages? Not old school splash pages on the home page but rather a device to help someone new to understand where they are. E.G apple.com – iphone launch “Welcome to iPhone”

Drama is important in web design. Tell a story. Through design we should help the reader flow through the site/story we are trying to tell them. Too often we leave the user to their own devices.

Work on structure and page layout initially without colour. When colour is introduced it can dilute the message.

The success of blogging is in large part due to its simplicity. Most blog software requires you to do very little in terms of setup, just add content and your thoughts are elegantly displayed in a consistent and easy to navigate format. 

Another product that has experienced great success as a result of its simplicity is Basecamp, developed by 37 Signals. As the 37 Signals mantra suggests, Basecamp is an, “Elegant, thoughtful [project management] product that just does what you need and nothing you don’t”. At work we use Basecamp to manage multiple projects and I am yet to find a team member that doesn’t use it. I’ve used complex project management software that makes you coffee and takes the dog for a walk but isn’t touched by anyone working on the project except for the Project Manager. Basecamp has distilled the most important components of project management; communication of ideas, tasks, milestones and documents and made it child’s play to use.

MS Office is probably considered one of the biggest culprits in terms of featuretitis but Office 2007 has made a massive leap with the introduction of the “Ribbon”, a dynamic strip which endeavours to present only what you need (and what you didn’t know existed). Additionally Word 2007 has introduced the Blog Post feature which means I can use Word to create, edit and post blog entries without going near the WordPress editor.

This trend can also be seen in the number of companies approaching us to build web based applications. Besides the obvious benefits of “use it anywhere”, the browser environment is understood by the end user and can be easily modified/adapted to meet the needs of respective audiences.

We’ve probably all had enough of the “What is Web 2.0?” debate but elegant and thoughtful design is certainly a part of it.

I’m reading Dan Saffer’s book “Designing for Interaction – Creating Smart Applications and Clever Devices”. In the web space Interaction Design is a relatively new field. It’s a bit of an umbrella term that incorporates information architecture, user experience, graphic design, interface design and usability. In my experience with application development projects, the ones that concentrate on the interaction design on par with functionality are the most successful. It doesn’t matter if we build a kitchen sink or a simple widget that goes “ping”, it’s the interaction design that is often the difference between user take up and user rejection. The unfortunate reality is that application design is all too often driven by business priorities which usually translate to function over form and getting as much as possible done within the allocated timeframe and budget. The emphasis is on “we need it to do xyz” as opposed to “we need it to look good and be easy to use”. As practioners in this space we need to fight the good fight for interaction design because a great outcome for our client is important and its our best opportunity to market our capability and win more work.

According to Shane Morris, User Experience Evangelist at Microsoft, The age of functionality is over.
The age of User Experience is here

Functionality is assumed and expected, the differentiator is the design, usability and fidelity of the program or device.

A few of us attended a briefing at MS last night which focussed on the melding of Designers and Developers through a new application Expression Blend, the XAML file format and WPF (Windows Presentation Foundation)

As Wikipedia articulates…

WPF is the graphical subsystem feature of the .NET Framework 3.0. It provides a consistent programming model for building applications and provides a clear separation between the UI and the business logic. A WPF application can be deployed on the desktop or hosted in a (MICROSOFT) web browser. It also enables richer control, design, and development of the visual aspects of Windows programs.

And Microsoft exudes…

Expression Blend – Work together in a friction-free environment, sharing projects, code, and designs for better productivity and quality. Quickly build stunning prototypes, and then turn them over to developers with confidence. Your designs can be used intact in the final product so you keep creative control. Developers no longer have to try to recreate them; play the hero and rid the world of “developer art.” Open existing Visual Studio projects to re-design and re-skin the applications.

It looks super cool (despite an embarrassing freeze up) and we’re all looking forward to playing with it. For those interested, download a free trial of the really nice New York Times reader a rich client built on WPF.