I’m not going to renew the davidgilletthasablog.com domain and so it’ll revert to davidgillett.wordpress.com within the next few days and eventually it will reside on davidgillett.co.uk/blog.
The reason being I’d like to pull my branding together a little more and create a custom wordpress.org template. Also I’ve been posting so infrequently the blog doesn’t warrant it’s own URL.
In the meantime you can enjoy the new…ish davidgillett.co.uk that I put live a month or two ago.
The target audience for my site is primarily web agencies I’m looking to work for, which means creative directors, studio managers and designers. At this point in time I’m not thinking about freelancing full-time or setting up my own company and so the site is solely aimed at web professionals.
With this in mind I made two assumptions about the user’s profile:
Technically
They have a modern web browser with a recent version of Flash installed, a resolution over 1024×768 and access to headphones or speakers. The site is optimised for such a person without excluding users with lower technical profiles.
Experience
They are web savvy and spend many hours a day online, they have produced or managed the production of websites and on occasion have browsed designers portfolio sites. They are familiar with a large variety of navigational styles and are comfortable with conceptually led websites.
I was fairly confident that my target audience wouldn’t have issues understanding, navigating and consuming information on my site. The user journeys and interactions hadn’t changed from the three year old portfolio site. The original’s navigation and use of typography was unusual as I took the unique opportunity to express my personal tastes and communicate with users of a similar demographic to my own.
Having worked at an agency that put usability at the core of everything it did I wanted to test that my assumptions were correct and I had created a site that worked well for its audience.
To test version 1 of the site I employed these user testing methods:
1) Informal user testing:
I simply asked the opinion of the site’s demographic; designers, user experience consultants, creative directors and observed how they used the site, an example of a recorded session can be found here. The sessions brought up a number of issues:
i) There is no categoratisation of the projects.
ii) The large letterforms look like active elements rather than passive graphics.
iii) The large letterforms are seen to give sections meaning (i.e. the W section contains only projects starting with the letter W).
iv) The non-linear nature of the site caused confusion.
v) The exploratory nature of the website was inappropriate for employers who need facts quickly.
2) Thinking Aloud:
This involved getting users to verbalise their thought processes as they looked around the site. I was present to answer questions but to not led the interactions. In addition to the points raised by the informal testing Thinking Aloud brought up these issues:
i) Potential employers could be concerned that I would translate the “slightly obscure” approach to site’s layout to their clients projects.
ii) It’s not immediately obvious that the menu letters are section links and are clickable.
iii) The highlight colour on a section might not be enough to indicate to the user they are within a section.
iv) It’s not clear where the contact details are.
v) Screenshots within the slideshow could be mistaken for clickable games or websites.
3) Fivesecondtest:
Fivesecondtest is a simple online usability testing application that helps identify the most prominent elements of a user interface. It presents users a single screenshots and asks them to click on areas which stand out. Firstly I ran the test on, for want of a better word, the splash screen:
Click map for splash screen
The results showed 50% of people clicked on the letterforms, 50% on the ‘Portfolio of David Gillett’ button.
I also tested one of the site’s sections.
Click map inner page
The results showed only 3% of people clicked the ‘more details’ button, 42% of people click on the characters faces, 16% of people clicked on the inactive large W, 23% of people clicked on the already active menu states in pink, 0% users clicked on the active sub menus and 0% users clicked on the external site links. These were the test’s conclusions:
i) There was some confusion over where to click on the splash screen. Although clicking on any of the letters would activate the site, any unnecessary confusion should be avoided.
ii) A large percentage of users were clicking on inactive elements of the design, confusing active and highlighted states.
iii) A tiny percentage of users noticed the link to the slideshow. Although clicking anywhere on the image would activate the slideshow any unnecessary confusion should be avoided.
iv) Images based around characters rather than screenshots would encourage interaction.
vi) Users often labeled the WORK.ME links as a logo.
vii) Some users thought the link to the slideshow would either take them to the site in question or would led to a game.
4) Userfly:
Userfly enables you to remotely record users mouse movements and clicks therefore removing any danger that one could influence their behavior. Unfortunately Userfly doesn’t work with Flash content so I had to create a simple HTML version using imagemaps.
Userfly play back feature
After playing the user sessions back they highlighted these issues:
i) One user clicked the back button to return to a previous section.
ii) Several users mistook the large screenshots in the slideshow for active games or websites.
5) Kampyle:
Kampyle is an online tool for creating custom feedback forms that ask the user to rate and comment on a site. None of the users have chosen to given written feedback yet but the site has an average rate of 4 out of 5. I intend to keep a Kample button on the site for a number of weeks after it’s launch so I can continue to gain feedback and improve the site.
Kampyle tab on the side of the website
Clearly there were still concerns about the site’s usability and so I created another version of the site.
Version 2
To try and address some of the issues in the new version I took these actions:
i) Created a larger and more prominent button to launch the slideshow. The button would also indicated it’s action by including the word ‘Play’ or ‘Slideshow’.
ii) Removed the large graphical letters from the body area and increased the size of the preview image to simplify the design.
iii) Organised the work into clearer categories.
iv) Added a section title to indicated which category the user is in.
v) Added rollovers for the primary menu to aid navigation.
vi) Removed the splash screen.
I then conducted the same round of testing procedures as before, although much improved, clearly usability issues still remained. Further ‘Thinking Aloud’ tests revealed that even with the section title and rollovers the WORK.ME menu system was still not obvious enough. In particular the information on contacting me took too long to locate, an example of these tests can be found here.
The fivesecondtest results showed the number of people clicking on the slideshow button increased by 20% and users had started to notice the links to the external websites. A significant number of users were still clicking on the highlighted menu item, W in this case and misidentifying it as a logo or title of the site. This pointed to improved but still flawed usability.
Click map for version 2
To address the remaining concerns I created a third and final version.
Version 3
These were it’s modifications:
i) The introduction of a traditional top navigation with the site’s sections clearly visible.
ii) The inclusion of a simple logo.
iii) The slideshow’s screenshots were presented within a computer screen surround to show they weren’t an interactive element.
iv) The client and studio the work was produced for was added to the copy for legal reasons.
A final round of Think Aloud user testing and informal feedback suggested that the all the major usability concerns had been addressed. The fivesecondtest also showed a sizable increase in the percentage of people clicking on the slideshow button and banner image. A moderate number of users were still clicking on the highlighted menu item although the Think Aloud tests showed that they quickly find the other section links.
Click map for version 3
i) The simple user testing undertaken for the redesign as vastly improved the usability of the site.
ii) Although the number of users involved in the testing process was small the usability gains were significant. Jakob Nielsen has proved that 85% of usability problems can be found with just 5 users.
iii) All of the testing methods were free and relatively easy to execute. Cost, both in time and in monetary terms often wrongly put off small agencies from performing any testing at all.
iii) It’s vital to perform user testing at an early stage in the process and not once the pixel has bolted. I rebuilt rough versions of the site three times which put it’s production way off schedule.
iv) Simple wireframes and paper prototypes would have helped iron out some of the site’s issues at an earlier stage.
v) Assuming that because you have a clear idea of the site’s demographic you can judge how they will behave is folly.
In hindsight all of these points are obvious and where possible I have applied them to client’s sites in the past. When it came to my own portfolio I allowed my personal preference for an exploratory website to overshadow it’s purpose, which is to quickly show employers my work and to be contacted.
I’m currently populating the site with content and will be launching within the next two weeks.
In an ideal world I would have scrapped the old site entirely and adopted a standard compliant, dynamic, minimalist portfolio. Unfortunately I simply couldn’t afford the time for such an undertaking as I knew applying for work and freelancing would get in the way.
So the options were: adapt a WordPress template or update my current Flash site.
I’m a big fan of WordPress but decided to go down the Flash route again for a number of reasons:
i) Flash gave me the ability to create case studies that have voice over explanations of the projects. These would give the portfolio a more personal touch and save the need to write word perfect project summaries. I’m no word smith as I’m sure you’re aware by now and images alone wouldn’t reflect the parts of the project which were non-graphical.
ii) WordPress has become de facto portfolio creation tool and rightly so in many cases, but it can mean it’s hard to tell how involved the designer was in the technical creation of the site. I’m keen to have a hand in the design and build of my site.
iii) I felt tweaking an existing site would be quicker than starting from scratch, even with a WordPress site. I’m not sure that has been the case in the end, but that was the theory.
I was well aware of a number of flaws in my current site that I was keen to eliminate with my revamp:
Problem:
The very short copy describing each project in no way reflected my involvement in the project.
Solution:
Expand on the project explanations with a voice over.
Problem:
The small projects images meant it was hard for the user to gain much of a sense of the design. The fact they quickly changed without interaction was a source of frustration for the user.
Solution:
Double the size of initial project image and create a user initiated slideshow of images at or near their original size.
Problem:
With the site coming up to three years old it was starting to look very dated in my eyes.
Solution:
Freshen up the site with a background image, new font face and altered colour palette.
Problem:
I had barely updated the site’s content in three years and so plenty of the links no longer worked and no recently created projects were shown.
Solution:
Introduce new projects and remove old ones.
The visual evolution of my site:
Previous site
Updated site
Apart from the audio slideshow I completed all the changes within a week or so. I planned to start from scratch in the new year but for the moment I was quite happy with the results of my quick spring clean of the site and it’s development was progressing at a reasonable rate…
…that was until I decided to run some user testing.
Coming up in part two: The results of the user tests and the consequences for the site
I’ve submitted my quick and dirty tea based design to Threadless, vote for it here. If it gets enough votes it’ll get printed, ok it’s not very original but I’d wear it.
It was originally created as part of my Tea based project (which has gone a bit quiet lately)
These have kept be busy the past few months:
Concept Design Development Delivery: Dear Downing Street
Concept Design Development Delivery: Raycomm
Concept Design Development Delivery: Skanska Sustainability
Concept Design Development Delivery: Digerati Sessions
I’ve also been working on the concept/design of an iPhone Application for Digerati and various pieces of work for Orange including Flash ActionScripting for an Hero module and reskinning a cloud based storage application…watch this space.
The problem with communicating a brand’s values through the written word on a website is that we’ve heard it all before.
How many companies brand share these values; friendly, customer focused, straight-forward, responsive, transparent, reliable? Quite a number.
So what’s the solution? A series of images which take visual cues from company’s core business and mix them with its values perhaps. Well often this can work but is problematic when it comes to technology companies whose output is not primarily created for consumers.
One such company – Raycomm – commissioned Digerati Studio to design a new website for them. Raycomm design, develop and deliver sophisticated solutions to wide-ranging technological challenges encounted in creating:
custom mobile applications
server and client-side web and desktop systems
software and electronics for embedded devices
After the initial meeting it became obvious that not only do they live their brand values of being friendly, approachable and pro-active but also they’re true creative technologists.
So the question became how do we get this across visually without resorting to staid photographs of technological hardware or generic aspirational stock shots that are meaningless.
After working closely with Raycomm we decided it was important to practically demonstrate their distinctive attributes. This was achieved in two ways, with a Labs area and unique interactive news feed.
The Labs area is a place where Raycomm can reveal their latest experiments with, and their thoughts on, emerging technologies. This not only lets the reader know they walk the walk but is also testimony to the companies openness. In addition it gives a lot of great content for search engines when the ‘index’ they website.
The interactive news feed is an area at the top of each web page which graphically alludes to Raycomm’s extensive knowledge of electronic engineering. The area is filled with fine ‘wires’ which draw comparisons with magnetic field lines or fibre optics. These wires react subtly to the mouse cursor’s presence and give the impression of attraction or repulsion from an invisible force.
Hanging from the wires are nodes which contain snippets of news. The nodes’ information can be accessed by clicking on them or if left untouched the nodes are stimulated by pulses of light which travel along the wires.
This area is not the sole source of accessing the news but a way to bring alive potentially flat pages, demonstrate Raycomm’s constant quest for innovation and give the site a unique graphical hook that differentiates it from competitors. The idea of the interaction is to communicate all these levels of information effortlessly and without the need for laborious explanations, like this one!
Of course the site’s success is due to more than a few simple interactions and a lab area. There’s a great deal of thought and work that went into planning the site’s structure with wireframes and user journeys. The site’s aesthetic was carefully considered so that it was pitched perfectly for it’s target audience. Also the tone of some of the key pages text was crafted by an experienced copy writer. Unusually for a Digerati Studio designed website we didn’t build the site but instead this task was tackled by the very technically competent client Raycomm.
Head over to raycomm.co.uk and hopefully you’ll see the 600 words I’ve used describe the philosophy behind the website interactions and structure are communicated in a few simple mouse clicks.
A lot of motion graphics pieces have at their core a narrative, though these can be short and abstract. The web in particular has given motionographers the chance to make the narratives they create interactive. That means the audience will engage with the media in a difference way, it’s like the difference between being absorbed in a film and engrossed in a computer game, both are immerse experiences where the audience is taken on a journey.
Making a piece of motion interactive means giving up a certain degree of control over the way an audience experiences a brand. Some company’s confidently embrace this and others give the viewer no more control than letting them chose the pace at which they want to experience the narrative.
The first example of interactive narratives I’ve have is a piece which accompanied a mini series on the Sci-Fi Channel, The Tin Man. It’s designed to reflect the series surreal nature and hints at the characters and plot rather than hand holding you through a linear story. The simplicity of the interaction is masked by the level of illustrative detail that is contained within the piece.
Sometimes with interactive motion the viewer is left to piece together the overall narrative themselves from sections of story they discover themselves. Although the order in which the viewer experiences the story can differ, an overall plot can be created. Introducing interactivity messes with the traditional narrative arcs of beginning, middle and end. It makes narratives trickier to create as designers and motionographer but can build a strong link between the brand and it’s audience. An interactive storyboard could look something like this:
The HBO Voyeur project was designed as a promotional campaign for the HBO TV channel and used multiple platforms, TV, mobile, a website and a projection on the side of building. The plot is intentionally open to interpretation with elements being scattered across the web on blogs, YouTube and flickr. The audience is feed snippets of information across various media and left to draw their own conclusions. The audience is introduced to various stories in multiple connected scenes. The scenes generally start off innocently enough but get progressively darker.
If well executed interactive motion can lead to the viewer having a high level of emotive connection with a piece. The viewer is often an invisible character in interactive narratives, this can place the them directly within a scene rather than passively observing the action from the perspective of the fourth wall.
Interactive narratives can sometimes tell a linear story but from multiple perspectives. This is quite common in film with the same story being told by different characters, interactive motion means it’s possible to show different spatial perceptives of the same story as well.
Radiohead ‘filmed’ their video of the song House of Cards using a technology similar to radar. This meant they could store all the recorded information in three dimensions rather than traditional film’s two. The band released all the data into the public domain so people could interpret it as they liked. Here’s one visualisation of the information from the video.
The band Arcade fire released several interactive music videos, this one is Neon Bible.
Another example of a brand bringing interactivity to traditionally shot footage is the Night Driving campaign by Volkswagen.
Interactive motion doesn’t have to based around the web, a London company called Minivegas created interactive idents for Welsh Broadcaster S4C. The ident’s motion is controlled by the announcer’s voice, so the ident is different each time it’s used.
This is an except from a brief introduction to interactive motion given on the Motion Graphics option module at UWE on 06-03-09.
In 10 hours and 38 minutes I start teaching on the motion module for level 2 students at UWE.
As an on going attempt to link industry and academia I’m spending two days in January at The University of Gloucestershire teaching the theory and practice of creating a personal website.
These are in equal parts invaluable and easily lost in dark corners of the mind. Whilst preparing some notes for a lecture at the University of Gloucestershire I came across a helpful little quote to illustrate a point. This blog entry marks the beginning of a growing bank of quotes that I find useful. To call 12 entries a repository is ridiculous, but Rome wasn’t built in day…make that 13.
It’s not where you take things from – it’s where you take them to
Jean-Luc Godard
Imagination is more important than knowledge
Albert Einstein
The secret to creativity is knowing how to hide your sources
Albert Einstein
The consumer is not a moron, she is your wife
David Ogilvy
If each of us hires people who are smaller than we are, we shall become a company of dwarfs. But if each of us hires people who are bigger than we are, we shall become a company of giants
David Ogilvy
We all have a tendency to use research as a drunkard uses a lamppost — for support, but not for illumination
David Ogilvy
It has been found that the less an advertisement looks like an advertisement, and the more it looks like an editorial, the more readers stop, look and read. Therefore, study the graphics used by editors and imitate them. Study the graphics used in advertisements, and avoid them
David Ogilvy
I do not regard advertising as entertainment or an art form, but as a medium of information
David Ogilvy
Much of the messy advertising you see on television today is the product of committees. Committees can criticize advertisements, but they should never be allowed to create them
David Ogilvy
Sell the sizzle, not the steak
Unknown
Ride with death on your shoulder
Unknown
If I want to explore a new direction professionally, it is helpful to try it out for myself first
Stefan Sagmeister
IF YOU MAKE EVERYTHING BOLD, NOTHING IS BOLD
Art Webb
Content precedes design. Design in the absence of content is not design, it’s decoration
Jeffrey Zeldman
If I’d asked people what they wanted, they would have said a faster horse
Henry Ford
Form and function should be one, joined in a spiritual union
Frank Lloyd Wright
A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them
Pär Almqvist
Inspiration exists but it has to find you working
Pablo Picasso
All suggestions are welcome. There’s agood bunch here: quotesondesign.com.
|
