Six Circles - An experience design framework

cover

This ebook has taken far too long to write but at last it is finally finished. The beauty of self-publishing is also the major problem with it – nobody pushes you, you aren’t paid and for all you know nobody will read it once it’s published. I wanted to see how the many different aspects of the book may develop conversations within the user experience community.

Elements of the book have already aged, but the principles continue, even though the examples may not! However, I hope you enjoy the read and I am really interested to know your thoughts, either here or on twitter. Currently it is only an ePub available for mobile devices but if the demand is there, other versions will be made available.

Download Six Circles for Epub readers
(See the comments section below for browser-based ePub readers)

Download Six Circles as a PDF

Some accompanying thoughts

In the last year I have seen how the different elements of the Six Circles transcend user experience, into the fields of brand strategy, service design and customer experience. It is my view that in ten years time we will be talking about what we do today in very different terms due to the contexts that we have to design for, using technology that is only beginning to become pervasive in our physical environment. I predict that UX and Service Design will cease to be differentiated, as they will be so entwined it would be too difficult, and potentially inefficient to separate into different disciplines.

I have seen enough of touch and tablet usage, mobile devices, ‘Everyware’ (and even Microsoft’s shift of it’s Windows 8 platform towards the touch paradigm) to feel that we are in for an exciting decade ahead.

Call it the legacy of Steve Jobs, but what he has left us with is a global population who are more instantly engaged with technology than we could have imagined ten years ago. To allow the very young and very old to interact with content through the same device is a stunning achievement, and for the interface and interaction designers to be able to support a richer experience is truly exciting.

Unfortunately companies are still catching up, fearful of failure and what they perceive as risk. Watching their competitors to see who makes the first move but the time for businesses to be brave and bold is now. There is not much time remaining for some businesses to make use of the power of meaningful, rich experiences delivered by brands that satisfy the culture and contextual uses of the users. Those companies that achieve this will simply dominate at a rate that is faster due to the networked society.

But all the talk of technology misses the point. It is the human needs, desires and emotions and their interactions with each other that create our insights that in turn drive innovation and success for companies. These experiences make the difference. It is the quality of experience that is the differentiator for any company in a crowded market.

Solving people problems will inevitably solve business problems. The challenge is to get businesses to believe in it, and trust those to deliver on the promise of user centred design. But with a process that is understood and a philosophy that appeals to many, there is alot we can do to ensure the business world adopts a path to greater product development, that builds on the needs and wants of people at its core.

Social computing on Interaction-Design.org

A free platform that offers so much content of benefit to interaction designers the world over is a rare thing. So I am really happy to be able to promote it here  - not least because this particular content was filmed in my home town of Copenhagen, in the impressive building of the IT University.

IMG_2394

Tom Erikson discusses content from his book about social computing – a theme that these days has more relevance then ever in our mobile, ‘always on’ world. Social interaction, between people via machines is at the heart of this work and makes for very interesting viewing if you are even slightly interested in the prominence of social media networks and online communities.

This content aside, some of the brightest minds in the field of user experience have contributed essays, articles and important design research on a free platform - Interaction-Design.org. I’m still discovering content and it’s a brilliant idea to have a place where so much good material can be accessed and shared.

Huge credit must go to Mads Soegaard and Rikke Dam whose initiative started in 2002. It is another example of the passion that people in this community hold, and a similar view point as to why I started my blog in the first place.

Documenting and sharing knowledge will help us all in our future work. Seeing a work of such magnitude makes me relieved that others believe that knowledge that will benefit society should be freely available.

Creating Hellogroup.com

Recently we launched Hello Group’s site after 4 years of (let’s say diplomatically) sub-optimal solutions. With the best intentions, getting a site together that everybody in a company will be happy with may never happen. When it is a design centered company this can be even less likely. As it is what we do and are passionate about, we all tend to have an opinion and want it heard. Of course we can’t take all opinions into account, otherwise the project will lack focus, direction and will be difficult to maintain progress and reach a launch date.

 

helloweb_home

 

Other factors come into play such as content. Where there is content there are firm opinions that go to the very core of the strategic direction of the company and what is communicated externally about the business. The site becomes a vehicle that must satisfy so many factors (and people) that there is always a risk that it will not do anything particularly well.

Direction and collaboration
The realisation of this fact early on, led to us having a core group of UX and visual designers working on the project together, after we had gained a clear strategic and creative vision of what we wanted to say. A day was set aside to see how far we could push the project, and though not all objectives were met it gave us a cohesive view of the design direction and interactive elements of the site.

We wanted a platform that tied together our other digital spaces (Facebook, Twitter etc) and did it in a way that we could easily build on. Once the design was decided we could brief the developer on something that was tangible and easy to explain. There was a lot of iteration and discussion between the visual, interactive and dynamic areas of the site between developer, designer and the UX team. Without constant dialogue the project would have become harder to complete satisfactorily.

We also had to involve the other parts of the business throughout in a way where their inputs would help shape the site but not derail the process of building to a deadline. I have no doubt that not everybody is as satisfied with the outcome as I am, but these issues will be resolved and importantly the site must be seen as a living entity that enables change as we go. It has been designed and built with this in mind.

Below are some factors, or principles, that led to a solution that for our market and our company’s values we feel is the right approach. A large part of the philosophy was realizing the importance of not communicating everything. That what you do not communicate is equally important as what should go on the site.

 

case  

Simplicity
What we really strived for with the new design was to produce something that clearly told something about the company, showcased our work, allowed an insight into our people and their interests. But we wanted it to be entirely easy to access, with minimal clicks and interaction. The main reason was that building the site is a first step before growing it, into something more experimental and ambitious. Rather than focus on grand designs we wanted to set a foundation for us to be able to move around content and present new ideas easily. More importantly using Wordpress allowed us to have a CMS (though custom made) that allowed everybody to be able to edit and contribute content very easily.

Flexibility
The front page is modular, meaning elements can be switched or turned off depending on the need of focus. News is an important part as we often do things beyond client work that are interesting and valuable to know. The main dropdown also allows extra elements to be inserted inside the structure of the site without interfering with the main navigation. Jobs, news and other elements will appear as they warrant the inclusion through the amount of content available to the user.

Interaction
The website works well on the iPad – some content may be missing (Flash based video – which will be changed) but it does not harm the experience of using the site. So designing for tablet usage has enabled us to see what we are producing is beyond the browser but more about the platform. We had to think about a dual way of looking at user interaction. Touching and clicking on elements on a screen have to have a common element of interaction. The areas needed to be big enough, give appropriate feedback instantly, and convey a way of interaction that is intuitive. Expect more in the future as this crossover allows us to explore this way of designing interfaces further.

Personality
Why show our people? Well apart from giving our clients the ability to work out who does what, we wanted people to put names to faces, and to see where they fitted within the company. As we are only a small number of people it is critical that those who may deal with us know who they are talking to and have the ability to get in touch directly. Not least it gives us a human angle. Humanizing the web is something there simply isn’t enough of. We also wanted to show what some of these people thought, wrote or created. The Follow section allows us to have an area that links the other spaces where we occupy (blogs, Flickr etc) and allow us to pour this content into a general area of interest.

 

follow

 

Content creation
The platform used by Wired, Mashable and TechCrunch is very accessible and is easy to manage content through a team that can collaborate through the interface. It also allows permissions to be set up that require different user roles to produce and publish the content. A very necessary element of producing a site is to ensure that there are methods to publish live, and instantly, when needed. Wordpress allows this in a way that is supported by a multitude of plug-ins that ensure other concerns (such as SEO and social media) are addressed. Simply put, Wordpress is a free back-end system that helps you run a website professionally. Yes we used extra coding to get things done how we wanted, but the system that runs the ability to add more content is out of the box.

 

fonts   Known issues
We use a home made font solution to render Helvetica on many browsers. Chrome manages it the best but Safari suffers on the Mac (though not on the iPad due to the font renderer on the tablet). This has caused issues and will be rectified for the Mac user. Some elements of the animation of the list are a little clunky and these will be ironed out as we go.

 

Key people
You will find success in making sure you stick to the goal and remaining committed to it throughout. Setting achievable deadlines and communicating that to the other team members is critical. Technical problems may delay a launch but resource issues shouldn’t derail the building of a site – that’s just bad planning or lack of foresight. Also a creative developer was critical to this being built – his can-do attitude with an eye for details and creative flair ensured we have a site we are happy with, and can improve easily. Without his skill it would have been much harder to achieve our vision for the site.

Also make sure you have somebody who can continually badger people to get things done (if like me you haven’t the stamina to do it yourself). I luckily has a great PM to help and she kept on at the team to provide what we had laid out in the plan. At times you will get disheartened but remember that your ability to achieve the goal is mirrored in your personal belief that it is achievable. Always remain positive and it can be done with dedication and team work.

 

work

 

A site for the future
Conceiving, designing, building and refining a website can be a straight forward process or a challenge that will test the patience of all involved. Thankfully by adopting an agile strategy to design and user experience we managed to have a very clear direction quickly about how the site was organized , and the interaction and visual design was produced in a matter of days.

Content held us up and producing cases perhaps took (and takes) longer than we wish. But often they require feedback from all stakeholders and this takes time. What we do have upon launch is a site that has attracted attention and we are happy with. The best part is it is a platform that works well on tablets and laptops, we can add elements and ensure that we have a medium for communication that supports our demands.  

This site represents a new beginning for Hello – and that was a key theme in it’s design. The designers managed to encapsulate this feeling in a look that is fresh, bold and in-keeping with the company. After all the work it is a very satisfying feeling to experience what has been built. The launch is just the start. The evolution of it can now begin…

UX design framework - Interaction

Interaction

I have already covered content, visual design and behaviour as part of the UX design framework but now for the important topic of interaction…

A major element of UX, it has been described as

“the design of behavior, positioned as dialogue between a person and an artifact. A person commonly doesn’t talk to an object; they use it, touch it, manipulate it, and control it. Usage, touching, manipulation and control are all dialogical acts, unspoken but conversational.” – Jon Kolko

and also…

“a design discipline dedicated to defining the behavior of artifacts, environments, and systems (i.e., products)”. – Robert Reimann

Undoubtedly interaction design is a design discipline that has become a defining element of UX. Though the preceding two quotes assert the alignment with a user’s behaviour they do so here in relation to their interaction (the person and the artifact).

Read more…

Changing online banking

piggy banks

Photo courtesy of Daniel Y. Go
  Before I moved to Denmark I used HSBC for fifteen years. Their online banking system was adequate initially, and has grown better over time with improvements to its functionality and speed. But its amazing what you take for granted when you are forced to use an alternative.

My bank here in Denmark, though not Danish, is courteous and helpful in the physical world but digitally they are atrocious. Their online banking system is a world apart from HSBC and I can only think its because of an overtly paranoid view of security.
Read more…

The answer is in the interface

 

googlemaps  

A recent article by Alex Iskold brilliantly captures the separations of where we imagine semantic search should be and the reality. Even if it were trying to knock Google off a top spot, what he highlights is that it would be an unnecessary exercise.

Google does its thing very well. Few would argue with that. Alex suggests that semantic search should do something completely different…

Read more…

Design principles for building user engagement

luke   Luke Wroblewski – Content Page Design Best Practices
One of the talks at the IA Summit was by Luke Wroblewski, author of two books and various resources published on his site. If you can see/hear the presentation at this location, I would urge you to do so. There will be something in there I have missed! The content he shared, was an insightful window into how we design pages and how the business requirements of a page may actually work against it. It really reminded me about the mechanics of persuasion, and he highlighted some insights explicitly. The following observations were made by Wroblewski. Read more…

Being that UX team of one

 

leah_buley   Leah Buley – How to be a UX team of one
If there was an award for the most enthusiastic and passionate speaker I think Leah Buley would take it.Her presentation, How to be a UX team of one was a real hit, at the recent IA Summit in Miami. Anything with cartoons immediately gets my vote.

It was engaging and inspirational with the hand drawn elements serving to convey the speaker’s personality and it was a refreshing change to the usual slides. Read more…

IA convergence and emergence

 

P11_AndrewHinton
Andrew Hinton (Inkblurt) –
linkosophy  

Ok a bizarre word to start off with. That grabbed the attention and yes, the talk covered links. But it was more about an explanation of IA, and as Hinton stated, ‘moving the conversation about it forward’.

From the start Hinton mentions emergent theory and I think that’s a very good place to start. If you look at the practice of Information Architecture it is very much in an emergence. It is only as old as web design itself.

Read more…

Yahoo! Pattern Library is open for all

 

yahoo   All this talk of recession and the web is currently awash with generosity. After my favourable words about the BBC who gave us a view of their new design language, Yahoo! have decided to go one better and provide their entire pattern library and developer tools for free.

Very kind and of course there is a monetary side to it but the new site is live here and during the day long workshop they gave at the IA Summit 2008 the complete set was given away on a memory key.

Read more…

Designing Web Navigation

 

designing_web_navigation  

James Kalbach succeeds in bringing together the fundamental components that determine great, and not-so-great, user interfaces. The UI itself must always be respected and the author illustrates exactly why in the journey the book takes us on.

What the book does is show how this can be achieved, from the past, notably from the present and into the future. The illustrations are in colour (critically important for any design book) and give clarity to the text’s important insights. Read more…

Concept models explained - Dan Brown from EightShapes at IXDA

 

Dan Brown at IXDA The most popular post on this blog is about concept models and recently Dan Brown talked at the IXDA conference on the subject. He effectively walks through the chapter of his book, giving an in-depth talk on what they are and why you should use them. Its 37 minutes but well worth it, here.
I have used concept models for a year on 7 large projects and I personally think they are the most valuable design deliverable. Basically its because all other steps in designing a site fall out from this in-depth analysis.

Some interesting points of note from the talk were about collaboration and buy-in, which are so key to the success of any project.

Dan Brown - Eightshapes


Digg!

Persuasion Architecture - getting the ROI on IA

 

persuasion   Persuasion Architecture has been around for years, Bryan Eisenberg (and his brother Jeffrey) founded the term and has been successfully establishing it as a concept and a measurable process. However, in a recent post, he states that after 7 years we still must be aware of usability and optimising the user experience. Regardless of the passage of time, sites still struggle to be successful. Read more…

Living Wireframes using Office Live

 

wire_live   The challenge that faces any design project that uses wireframes is that they can easily be snapshots in time and become static. As soon as they are printed or circulated around a stakeholder group they become a moment in the site development’s life cycle. They often can be made redundant due to forces outside of the design project. This can be a potential point of weakness for this valuable deliverable.

Read more…

Design Pattern Libraries - cataloguing success

 

soa2  

These serve so many different elements to a website design. To not use them seems a bad mistake.

Initially they can help overcome issues about how an element may work on the site. More importantly they clarify the purpose of every element that appears on the page and states the user interaction.

Read more…

Wireframes - illustrating design strategy

 

page_sketch  

The powerful thing about the wire frame is that it removes many emotive aspects of design that will cause division amongst clients. There are no uses of branding , colours or elements of graphic interest on a good wire frame. When they are stripped back to absolute functional essentials it is much easier to explain exactly why key elements are placed in certain areas on the page.

Read more…

ComputerWeekly.com- An IA case study


cw_screen_old
The old computerweekly.com

This was not so much a redesign, or even a relaunch, but more of a resurrection of a site that had become tired, old and ineffective. Its many shortcomings were highlighted with the onslaught of the new generation of sites from competitors that used user-generated content and a more social networking approach to their presentation layer.

As this site represented the best of computer related business journalism, it was apt that it should be the company’s first site that underwent a complete overhaul from the ground up.

Read more…

Apple.com

Just had a look at the Mac section on Apple’ site and the new slider widget at the top of the page that helps a user see all the products.

 This makes me laugh a bit as it seems to be a throw back to the time of frames and horizontal scroll bars.

Wonder why we don’t see horizontal scroll bars on web pages? Oh yes because they go against user screen use, ie although the eye scans down a page and across the screen it somehow feels awkward to do the same with the mouse.

Thanks to David Malouf for making me aware that successful companies with years of design experiences still get things wrong….weird.

Collaborate or feel the consequences

After reading this article http://www.peterme.com/?p=536 I was somewhat saddened and the also transported back to a time 7 years ago when I was a lowly web designer working for an information architect who headed up our design team.

She was of the opinion that the surface design was all we were good for, our thoughts concerning interaction of the user with the interface was little more than icing on the cake that she had lovingly baked. She was frustrating, she ring-fenced her domain, no colleague or client could get into her information utopia. Don´t get me wrong, we respected and admired her courage and stubbornness. She usually got her way but she never got user centred design.

Back in the room….yes 7 years on and the old problems seem to still be there. There appears to be a disconnect in IA from a UCD approach. Even in the Polar Bear book we have overtones of how UCD is the poor relation to information organisation. I would like to propose we drop this outlook and the reasons are clear. As more people with different ideas contribute to the information mix we will have to embrace the user, put them at the centre of everything we do and allow their behaviour to permeate through our taxonomies. Let our taxonomies become Persona led and multi-faceted.

Just as IA is reaching its highest point it is in danger of falling flat on its face. I emplore it as a discipline to embrace interaction and interface design. Collaboration is the key to its success as we are on the threshold of implementing processes that are solid and enduring.

Interface dilemmas

As a designer you want it to look good, the user wants it to work. Is there a happy compromise? Often simplicity is the answer – strip it back to the skeleton and only build in the minimum gloss and sheen. A brand colour, logo and all the whistles and bells – including badly written copy and too many content types will overwhelm and confuse a user.

Without strong direction aligned with the needs of the user, a design will not hit its mark. There is so much in making a good design great. Often it is the research that spurs evidence based decisions and this will do much of the thinking and win most of the arguements about placement of content or interface elements. By being stubborn and telling the right people constantly can change minds. Just ensure you have the evidence to back up your arguements!