Archive for the ‘Visual design’ Category

Six Circles – An experience design framework

Monday, January 30th, 2012

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.

Creating Hellogroup.com

Saturday, January 29th, 2011

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 – Visual Design

Tuesday, November 10th, 2009

Previously I introduced a UX framework and wrote about the first element – content.  This post is about visual design, perhaps the most immediately emotive ingredient to user experience. Seeing is believing, and what our eyes see immediately tells us if we either like or dislike what they are receiving. It has a sway on the other 5 elements of the UX framework as it is something that is very tangible and creates instant feeling in a person. As UX designers we need to be aware of the importance of visual design as a doorway to incorporate the other equally important facets in our work. Visual design, like it or not, is still king when it comes to the first few seconds that a user interacts with a product or service.

3524670137_80dd4cfc58 Saul Bass, the legendary graphic designer and film maker, described design as ‘thinking made visual’. In many ways visual design should communicate the more complex considerations of a solution in an immediately accessible way.Aesthetic usability
Think about a website that you like and there will probably be a good deal of visual design that helps you in understanding its content better, what it offers and how easy it is for you to use.

Aesthetic usability is a quality that arguably Apple have made very much part of their product offering. Consider their most successful devices, (iMac,iPod and iPhone) and there is an immediate attraction to getting to know the product, even before you really know what it can do.

As there is an emotive connection (one of delight or intrigue) it affords the product a level of forgiveness within the user when the product or system fails.

(more…)

User paths for conversion – elements in engagement

Tuesday, June 17th, 2008

 

 

clip_image002   This image was shown during Peter Moville’s talk about IA 3.0. What is interesting about it is how he linked this to Christopher Alexander’s text about design in architecture and also Peter Merholz’s essay Metadata for the Masses. In which he highlights ‘desire lines’ how paving is built once you see the paths that people tread.

If we look at online behaviour, user paths give us a solid idea of routes to content, where they return to and where they tend to go next. Human behaviour tends to follow patterns, see this article about mobile phone usage for an example of how predictable we tend to be. (more…)

Design principles for building user engagement

Thursday, May 15th, 2008

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. (more…)

Being that UX team of one

Thursday, May 8th, 2008

 

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. (more…)

IA and its changing general dynamics

Thursday, May 1st, 2008

 

milan   Mathew Milan – The Information Architect and the Fighter Pilot

If you click the image to the left you will go to a response to the presentation by Mathew Milan, that contains the presentation slides with audio and numerous comments from readers beneath it.

From my point of view this was the most thought provoking of the presentations because it touches on elements of my design education, that of reflective practice. But it is really important because of the ramifications of Milan’s observations, and the ensuing discussions

    (more…)

Designing Web Navigation

Thursday, March 27th, 2008

 

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. (more…)

Living Wireframes using Office Live

Monday, February 11th, 2008

 

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.

(more…)

Visual Language 1.0 – BBC layout guidelines

Thursday, January 31st, 2008

 

bbc   Any web designer or IA will find this document really interesting and high value. It makes you thankful for institutions like the BBC who readily share their research with the public. This openness and transparency is really admirable and only possible through public funding. Find out the style and layout properties for the forthcoming BBC web pages here.


Digg!