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.

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

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.

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.