CraftedINFORMATION

UX Cambridge November 2012

Photo

: © A

ndre

w D

unn,

19

Dec

embe

r 200

4. h

ttp:/

/ww

w.a

ndre

wdu

nnph

oto.

com

/

CraftedINFORMATION

CraftedINFORMATION

UX Cambridgewww.uxcambridge.net | #uxcam

1.0 The Power of Imagination

2.0 BeCurious: helping patients manage chronic disease

3.0 New, Smarter Defaults in Web Design

4.0 UX in SwiftKey: Why, When and How

5.0 Rapid Product Design in the Wild

6.0 From Print to Digital: designing The Week Magazine’s iPad app

7.0 Better Product Definition with Lean UX and Design Thinking

8.0 People, not process: The craft of being heard

9.0 User Experience Does Not Exist

10.0 Small Business Owners and Perceived Website Mysteries

11.0 From Darwin to Design

12.0 Small Cognitive Psychology for Big Interaction Design

13.0 Photos - The unsung heroes of user experience design

The Crafted creative team was lucky enough

to attend UX Cambridge, a community-driven,

practical User Experience conference. All of

the team, without exception, found both days

extremely useful with some strong themes

running throughout the conference. Here is

a quick round up of what they saw.

CraftedINFORMATION

1.0

The Power of ImaginationRichard Caddick – CX Partners. @richardcaddick

Richard’s presentation centered around how we can apply the power of our imagination to better understand our audience and create more powerful user experiences, or how we can better use our imaginations to solve problems.

Richard began his presentation by talking about imagination itself and how it can be defined as a venn diagram, imagination being the point at which what has been, what is and what could be, overlap. He also spoke about how a similar diagram consisting of creativity, empathy and insight could be applied to the UX process.

CreativityRichard used examples to demonstrate the power of creativity and imagination and how they are shaped by experience:

• The artist Turner changed the style of his painting considerably over the course of his

life as he learned from his tutors, travelled and as newer materials became available. His

imagination also inspired to him to work with immense rigour, producing over 19,000 works over his lifetime.

Empathy & InsightRichard spoke about how empathy and insight work together to develop a deep understanding of a subject. However, it is important when using empathy to solve problems that we are wary of making assumptions. Richard used an example where researchers gave subjects two cameras, one with a happy face on to record things that made them happy and one with a sad face on to record things that made them sad. Although the photos helped to greatly increase empathy for the users, the researchers had made assumptions about the meaning of some of the photos and so misinterpreted them until they interviewed their subjects.

Richard also used a personal example of a cancer scare to illustrate the same point. Having first hand experience of cancer moved him from empathy with cancer sufferers to a real understanding of how it feels to be in that situation, and also a realisation that it’s easy to forget patients as people with lives, not just ‘cancer sufferers’. In the same way it can be easy to forget our users as people with complex lives and needs.

• The baker Christina Tosi spent her childhood experimenting wildly with food

which allowed her to develop a unique flair for combining flavours.

• Felix Baumgartner, who recently jumped from space, was drawing pictures of himself

parachuting while his family looked on as early as age 5.

The fact that imagination and creativity are shaped by experience means that we can in fact continually and actively develop them through:

• Practice• Experimentation• Observation• Reflection• Questioning• Teaching

Richard admitted that for him teaching and presenting to others is a process of learning for himself, an opportunity to explore hisown ideas.

“See the value of imagination,” said Holmes. “It is the one quality which Gregory lacks. We imagined what might have happened, acted upon the supposition, and find ourselves justified.”~ Arthur Conan Doyle

By Barnie Mills, @basscakeHead of Design, Crafted

CraftedINFORMATION

As humans our ability to feel empathy for complete strangers is a huge part of our makeup. Advertisers play on this all the time and as UX professionals we can make use of it too. Richard spoke of his first hand experience working as a consultant for a local council website. Rather than going through a superficial process of simply making text and calls to action clearer, the team used empathy mapping to build a more detailed picture of the user.

Project DynamicsMoving on to how we approach projects, Richard described them (suitably festively) as a Christmas tree on its side – multiple, gradually shrinking, periods of creativity and imagination focusing to a point of refinement until project conclusion. Within this pattern the dynamics of projects often tend to fluctuate between periods of fast paced activity followed by a period of slower refinement.

Taking this idea of fast and slow Richard also talked of different ways to stimulate creativity using the following examples:

Zoom In, zoom out - look at the detail but also be able to step back and look at the whole.

Encourage, Challenge – having someone who is able to do both is hugely important in order to give us perspective.

pick up, Richard’s final case study was one that was obviously drawn from one of his own loves, cycling. The inventor of the Brooks cycle saddle, John Brooks, was a leather manufacturer whose horse died. He ended up borrowing a friend’s bike. At the time all bikes just had a wooden plank for a saddle. Brooks used his creativity and experience as a leather manufacturer to patent a comfortable leather cycle saddle. The saddles are still made today, they need breaking in but this means that they actually get better with time. This is what we should all be striving for - to design experiences that improve with time!

Richard concluded his presentation with a quote by Oscar Wilde “Be yourself, everyone else is already taken.”

Key takeawaysAll of the ideas Richard shared came back to using our creativity, the experience we build up on a daily basis and our inbuilt empathy with other humans to build a better picture of the end user and not just blindly following a set of design principles.

Constraint, Freedom – Sometimes constraints can be more useful to a designer than freedom as they force us to look at things in a way we perhaps normally would not.

New, familiar – Designers are always trying to come up with something new and creative but actually sometimes users need to see something familiar. We need to use both in design.

Not only can all these ideas span a single project, the same fluctuations can continue across multiple projects.

PlayIt is important to remember that we are not the only people that possess creativity and imagination, users do as well, they want to think and imagine. By designing interfaces with hooks and levers for users to pull on and explore, we can engage and inform the user often better than if we try to restrict them and force them down a route they do not feel they have imagined for themselves.

Richard gave several case studies that illustrated how users often use sites and apps in ways that were not imagined by the designer.

Is this itReiterating that we should always be moving forward, applying the skills and experience we

CraftedINFORMATION

2.0

BeCurious: helping patientsmanage chronic diseaseDr Rachel Jones, Instrata, Cambridge

“BeCurious is a mobile app being developed to help patients manage chronic disease by integrating a care treatment plan with a person’s mood, thereby customising the proposed activities and improving the person’s motivation based on the stage of their condition and on an understanding of their emotional state.”

Dr Rachel Jones talked us through the process undertaken in the development of the app and some of the following design techniques:

• Scenario-based design• State descriptions• Mockups and testing• Persuasive design

The main objectives of the product were to:

• Provide a support network and help to manage chronic disease

• Provide tailored care to offer better health outcomes

• Focus on mobile to increase patient access• Allow the app to be configurable for

different diseases

In scoping the functionality the team needed to decide what to build first by deciding what was critical to the app DNA. High-level functionality included the following:

• Support – social and emotional• Tailored care• Managing help• Information seeking• Physiological input• Clinical advice• Carer support

Rachel explained how these decisions were supported and validated with early Balsamique mockups. Early prototypes were built with interchangeable graphics to ensure that changes could be easily made without the need for a high workload.

Market analysis was carried out to define the value proposition of the app. Areas covered included the cost of chronic disease to the NHS/ Government and segmentation of consumer health apps.

Rachel described how initial search phases were informal, for example workshops with patients to help define the product feature. The team also carried out desktop research into academic evidence and alternatives behind chronic disease care, how social influence could be leveraged and also around our increased access to health information (who hasn’t looked up their symptoms on Google?!). The main emphasis for the design process was to design early, sketch test and explore the scope and look at potential USPs through lots of iterations.

The team also looked at how ‘Persuasive Design’ sometimes called ‘Nudging’ could be used to change behavior around disease management by making the care provided by the app person centered and looking at how to manage the patient’s emotional well being.

By Barnie Mills, @basscakeHead of Design, Crafted

The brand for the app was developed early in the process to help secure funding from VCs, to give users a better feel for the product during the testing and also to help the team feel more motivated about the product.

The design of the app ran parallel to and juggled alongside the research, analysis and value proposition. Icon styles for users to rate mood, pain etc within the app were developed and tested. Options included happy and sad faces and weather themed options (sunshine for positive, dark clouds for negative). Considerations such as cultural perceptions of weather were taken into account.

Key takeaways• The link between the emotional and

the functional• Concentrate on user need rather than user

state (understand what is ’core’)• Scope the feature set• Remember to prototype and iterate early

CraftedINFORMATION

3.0

New, Smarter Defaults in Web DesignVasilis van Gemert – Mirabeau. @vasilis. Slides

increasing the width of our designs to accommodate large screen resolutions for monitors and televisions many designs seem to neglect the fact that these sites still need to work on much smaller screens. Smart phones and tablet devices are increasing in popularity and the average user’s interaction with the Internet needs to work on multiple levels and screen sizes.

Although ‘Responsive design’ seems to be discussed as a new method to accommodate new technology, it has actually been around for a long time. ‘Fluid’ page templates have been used in the past. So are we going back a step?

Everybody has a mouse – This is no longer true. Touch screen devices such as smart phones and tablets and even televisions are in widespread use. Therefore we need to consider how design elements work alongside across technology to improve usability. For example, a drop down navigation that is activated on rollover using a mouse will behave differently with a touch device and may even break to some extent. From a usability point of view this is a problem.

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands. With his knowledge of what’s possible in the browser he advises clients like KLM and ING about current and future web design solutions. He writes articles for Smashing Magazine and the Dutch edition of Web Designer Magazine and is also connected as a teacher and advisor to the University of Applied Science in Amsterdam. Needless to say Vasilis knows what he is talking about.

In his talk Vasilis looked at some practical design patterns, but also highlighted some of the possibilities presented by new web technologies. His talk aimed to help designers and developers get rid of old habits and to raise the issue that we need New Defaults for the rapidly changing web.

The web has changed… or has it?Vasilis re-introduced us to many of the design patterns we as designers, for the most part, adhere to and explained how the assumptions we often make are incorrect. For example:

Screen size/resolution – Gone are the days of the 800x600 layout... or are they? Although we are

By Ally Wright, @allyraraSenior Designer, Crafted

Everybody has Broadband – Although this is improving all the time, many areas are still without high speed broadband. We also have to consider the use of mobile devices using the sometimes painfully slow 3G. For example, on a 3G connection large images on a site could force the page to timeout. In an age where we want bite-sized information fast, page loading time is very important. This is a strong case towards designing for smaller devices, perhaps a unique m. site or a reactive/responsive layout.

Monitors collaborated – As designers we are often lucky enough to have the best equipment and technology at our disposal. However, not everyone does. Although retina displays and HD graphics are becoming the norm in terms of new product releases we still need to consider the average user is likely using a much lower quality monitor.

This difference in calibration and quality can impact web sites design and effectiveness dramatically. For example, if your calls to action are a certain colour and a users low quality machine cannot render the colour

The web looks different for everyone.

CraftedINFORMATION

contrast the key information could potentially be invisible.

Computers get faster every year – Although this is true to some extent, great strides in technology are happening all the time, pushing our capabilities in web design and development. However, we must also consider that generally people cannot justify updating their computers or devices every year. As a general rule consumers want technology to last longer, be value for money, have a longer battery life and so on.

Therefore we have to consider that that the average user is on a slower, older machine compared to what we may be using.

Remember: The web looks different for everyone. We should as a matter of course test our design and development projects on a range of outputs, including lower quality technology.

On reflection many of these points seem obvious, but for some reason the majority of projects run on as they ever have and we tend to think that we are original and creative while often we fall back to old habits because of lack of time or budget.

Vasilis made it clear that this way of working will not hold up in the long term, we as designers and developers need to evolve with the internet and design for the future as well as for now. A group of respected peers have put this far more

occur is with the layout. Therefore we should be designing for the smallest screen size first. It is much easier to grow than it is to shrink!

By focusing on a smaller screen size and how content is displayed, key usability issues are highlighted early on in the design process. For example, forms on a smaller device are easier to complete if the labels are above the fields rather than on the left, which forces the user to scroll back and forth.

Vasilis illustrated how we can use the typography as a guide to where breakpoints for responsive layouts should be, rather than trying to keep track of the myriad of possible resolutions and screen sizes. Typography is a common element, it works on all browsers and can be seen on all screen sizes. There are also hundreds of years of tried and tested typographic rules that we can use to help legibility. For example, any more than 72 characters in a line of type becomes hard to scan and read easily – why not use this ‘measure’ to define breakpoints for our responsive layouts and adjust the layout once we hit this line length limit.

Content FirstWe should consider other elements of our design such as hierarchy of content, what does or doesn’t add to the design or function of the site. Rather than following formulaic layouts (logo top left, full width header, left hand navigation and right

hand widgets) we should let the content lead the layout. For a more refined design solution begin to ask:

• Do we need widgets?• Do we need a subnavigation?• Do we need a header?• Do we need a logo?

CLI (command line) firstAnother key point raised was that we should be testing functionality before we design it. Making sure that the idea works, by testing the core function of the app first, should be a priority. This allows for flexible design and flexible interaction and raises issues earlier in the process so alternatives can be decided on. The key point being that the development team should be involved at an earlier stage in the design process.

TakeawaysRemember that ‘The web looks different for everyone’ . Design with these ‘new defaults’ in mind:

1. Solid API/Functionality2. Focus on content3. Small screen first4. Design for touch

eloquently and produced the ‘Future friendly manifesto’.

With this philosophy in mind Vasilis continued on to propose a set of ‘New defaults’ that we as designers and developers should use moving forward.

Touch FirstDesign for touch first and foremost. This will mean that functionality will work for both touch screen and mouse interaction. It is also worth considering keyboard navigation and tab navigation; these can help the user navigate the site with only a keyboard and are often neglected.

Layers of Progressive EnhancementWhen designing we should be thinking about the technology the user is viewing the website on. We need to consider

• Old browsers• Mondern browsers• Future brwosers• Robots• Humans• Small screens• Fat fingers!• Etc…

Small screen firstWe need to be more aware in the design process that the key stage where restrictions and issues

CraftedINFORMATION

4.0

UX in SwiftKey: Why, When and HowNikiforos Karamanis – TouchType.

When Swiftkey VIP was launched, a more private forum where only a small group of trusted users were able to earn the privilege to read and post was used. This enabled the team to release exclusive new features to these users and get feedback before releasing in the wild. It also allowed them to maintain a close relationship with their users by responding to their feedback.

They focused on language related feedback as this was high priority. As users reported issues with the different keyboard layouts across different languages, the team were able to rectify the issues quickly.

By organising language-based focus groups, one-to-one sessions and observations the team were able to get up close and personal with their users. By standing behind someone and watching how they used the app they were able to see any issues with the product directly and also how user reacted.

The company also performed traditional usability testing. They also found sketching to be a very useful way to improve their product.

I went along to this session to learn about user experience from the perspective of another company. Niki from Swiftkey delivered an interesting presentation about how he and his team implemented UX principles to deliver a great product.

The SwiftKey product is a smart keyboard app for Android devices that actually learns and provides predictions as you type. It has achieved the top paid app in Google Play in multiple countries, rave reviews, and has been downloaded more than seven million times!

Niki explained how they formed a close-knit community, that communicated via forums, around their product. Users would post feedback and the team were able to use this feedback to make major design decisions. Getting feedback directly from the community is great because you’re getting feedback from users who are actually using the product, in real situations, on a daily basis, rather than dedicated testers navigating through the app.

By Charlie Gordon, @cbg Junior Designer, Crafted

One of the key outcomes of the talk was that teams need to be adjustable, patient, collaborative and constructive when thinking about UX in their products.

Key takeaways• Communicate with your audience, use

feedback to make design decisions• Create good relationships with your most

loyal users• Focus on the highest priority issues first.

SwiftKey is a smart keyboard app for Android devices that provides word predictions as you type. Why, when and how were UX principles appled to improve the product.

CraftedINFORMATION

5.0

Rapid Product Design in the WildMichele Ide-Smith – Red Gate Software. @micheleidesmith. Slideshare

market and approaching them at an appropriate time and location any data gathered would be valuable in terms of developing the concept.

Continuing this targeted approach the team, rather than bombarding people with information and questions, approached attendees between talks with clear and simple ‘bite-sized’ questions such as “are you an oracle developer?” and “would this software be something you would find useful?”. This approach didn’t waste anybody’s time if the project wasn’t applicable but allowed the opportunity to gather relevant data where available.

By engaging with the attendees in this fashion, real world scenarios could be developed and potential users/clients could provide insight into exactly what was needed and any pain points or issues that they may come across.

Feedback As data was gathered it was important that all members of the team, and indeed the conference attendees, were aware of it. Several Agile methods were used to keep everyone up to date and

Michele is a User Experience Specialist at Red Gate, working on tools for SQL and Oracle developers. She enjoys collaborating with Agile development teams and encouraging team ownership of User Experience. Michele is active in the UX community, co-organising the Cambridge Usability Group talks and blogging at www.ide-smith.co.uk and ux.red-gate.com.Michele’s talk was a case study on creating a prototype for a software tool, in three days, at a trade show.

Michele deconstructed the task that her team underwent and shared the Agile and Lean User Experience methods utilised in the process, as well as highlighting the learning outcomes of the experience.

Research Michele’s team had obviously gathered enough information to support their concept before flying members of the Redgate team to a conference held in Texas. The conference selected was perfect for the ‘Live Lab’ task, as it would be teeming with potential users of the software that they were proposing. By getting to know the target

By Ally Wright, @allyraraSenior Designer, Crafted

involved with the projects progress. These included:

• Agile feedback sessions (simple yes or no questions, postit boards for comments)

• Empathy maps• Affinity maps (which help to analyse

feedback and prioritise data)• Newsletter sign up• Bite size surveys

After the event, Michele highlighted the importance of ‘Keeping the conversation going’. Having engaged the potential users/ clients at the early stages of the concept development it is important to keep them informed and involved in its progress. This was achieved using:

• Interviews and remote usability testing• The opportunity to join a beta program• The release of updates as they materialised,

no matter how small. (This kept the user / client interested and up to date with the progress of the project)

• Newsletter sign-ups

Michele Ide-Smith share what we learnt about using rapid, iterative prototyping techniques and customer feedback sessions ‘in the wild’ at a trade show, to develop a minimum viable product.

CraftedINFORMATION

Design & Development Michele used paper prototyping to develop the UI and design of the software. The environment was very fast paced and changes and ideas needed to be explored quickly. Rather than the usual design process consisting of wireframes on a screen, the team instead printed out UI elements that could be moved and adjusted quickly and tested by the team and potential clients/users.

This produced a ‘working’ prototype for the developers. The approach highlighted issues early on and allowed them to be resolved quickly rather than amending code once it had been implemented.

Sprint based development was used to manage the project – small chunks of work that kept team members and other participants interested. It also made it easier to track progress through the workflow, allowed flexibility for changes in requirements or strategy and aided in the prioritisation and assignment of tasks by displaying the progress of the project on a board split between pending → in progress → resolved → closed.

The developed prototype itself was built in css/html using twitter bootstrap for speed. This

allowed tangible results for the potential users to feedback on.

Communication methodsThroughout the process the communication between the team and the attendees was the key to the success of the task.

The Redgate brand stood out clearly to those at the conference, the stand itself was adapted to suit the project with clear areas for specific information, seating for discussions and testing and a large screen showing the development of the concept.

Team meetings were regularly held throughout the process, making sure everyone was on the same page and keeping productivity and enthusiasm going. Michele commented that many times during these meetings the conference attendees would join in and further add ideas and feedback.

Over all the process was very effective, the methods used by the team worked well and helped to develop a very strong concept. Although it is unlikely that many agencies would be able to go to the lengths in this case study, it does highlight some key methods of

working that could prove successful; whatever the environment.

Key Takeaways:• Targeted research – speak to the users• Listen to feedback – Put your work up for all

to see, comment on and be open to change• Paper prototyping – Save time and iron out

any issues before you go in to development • Sprint development – Develop in bite sized

tasks, and be ready to change requirements at any stage

• Transparency – Show your progress!

CraftedINFORMATION

6.0

From Print to Digital: designing The Week Magazine’s iPad appHarry Brignull – Clearleft. @harrybr

meaning that once a content strategy was finalised it could be easily adhered to. Each subject is split into event, editorial, commentary and future. This layout is always the same to meet the main aim of the magazine; to allow the user to scan and process information quickly.

The main issue was that the available real-estate on an iPad screen is much less than that on a printed page of the magazine itself. This meant that mimicking the print issue design directly made readability an issue, squashing content into a small space and making it impossible to scan-read an issue in the same way that print readers are able to.

One issue that the team made sure they avoided was adding too many bells, whistles and interactive elements to the app. They identified The Mail Online iPad app as being particularly guilty of this, it requires a 19 page in-app tutorial before the user arrives at any content.

The team decided to create two user personas to identify how key markets would feel about how

“We are all big, fat liars.” Was the first thing that Harry Brignull told us in his talk. He pointed out that we pretend our designs happen in a clear linear process, from concept to solution and this is normally how we present it to our clients. In actual fact we have no map and we have to explore to find the solution. The process is less of an A to B route and more like a treasure map, where we must explore different points to find the treasure.

To illustrate this point he took us through Clearleft’s process in designing the iPad app for The Week. The Week is a magazine that summarises the week’s news into one magazine making it easier to digest. Unlike a lot of print magazines it actually has a steadily growing subscription. This meant that the brief for the iPad app from The Week was very clear, unlike many magazines which are wanting to claw readers back via the iPad, The Week simply instructed Clearleft to ‘not screw it up’!

The initial research into the challenges and benefits of The Week brought up a few things. The Week’s layout is almost identical every week

By Chris Plowman, @cplowmanDesigner, Crafted

the app. They decided upon an existing iPad user who finds the app with no, or limited prior knowledge of The Week and an existing print subscriber who will get the app bundled as part of their subscription.

Once they had produced an initial working prototype the team tested it using a group of likely users. It was a huge failure! The prototype had articles split into sections with full screen ads that only appeared when the user switched actions. The team didn’t realise that users would skip readily between sections and therefore were seeing an advert every couple of screens which led them to complain. The navigation also had problems, section pages and article pages were too similar so the user often didn’t notice there had been a change and that they had to navigate back a level to return to the sections menu.

The team revisited the entire design, settling on a two pane layout like those used in many email clients. This layout made the article and section selection easy and made the navigation clearer.

Harry Brignull of Clearleft explores, very honestly, how the process of designing the successful iPad app for the magazine ‘The Week’ went and why we should be more honest about how design works.

CraftedINFORMATION

They made sure there was a clear difference between contents and articles and then tested the prototype again.

The usability tests were much better. The product was launched and recieved great reviews.

Harry made it clear that the success of this project was due largely to the reaction to the usability testing from both the team and the client, both of whom didn’t panic. The client understood that getting to the final product was a process and that it would take time and possibly some false starts to get to the right solution. To have this relationship with clients’ it is important that your sales team understands how the design process works and that this is passed on to the client from the very start of the project.

We should not be afraid to make mistakes in our work, if you don’t make mistakes you aren’t exploring and will never do anything new.

Key takeaways• Design is a process that very rarely goes

straight from inception to solution. If we tell our clients this from the start we can have a better working relationship

• Don’t panic when things go wrong. The feedback you get is invaluable to getting to the right answer

• Don’t be afraid to make mistakes.

CraftedINFORMATION

7.0

Better Product Definition with Lean UX and Design ThinkingJeff Gothelf – Neo. @jboogie

Having read quite a bit about the idea of Lean UX Jeff Gothelf ’s presentation was one of the real draws for me when we signed up to UX Cambridge and it really helped to confirm the validity of the ideas I had read.

Jeff opened with a case study about Plancast a social platform for sharing events. The product was initially very promising with lots of interest from users and investors and a had a huge number of sign ups when it launched. However, retention was not good and users were not using the key features of the site, this ultimately led to it failing. The founder of the site published a post-mortem of the site after its failure in which he stated that the reason it failed was because the whole idea was based on an assumption that ultimately was proved to be incorrect.

Requirements are actually Assumptions!We can’t know what users requirements are, we can only make assumptions until we get user feedback. By building a culture of experimentation and embracing failure we can create better user experiences.

In the same way that we need to shift our thinking about requirements we also need to shift our language to ‘we believe’ rather than ‘we know’.

We believe [this assumption], will achieve [this outcome], we will know we are successful when we see [this signal from the marketplace]

Jeff used a case study of a company called ‘The Ladders’. Based on an assumption the company changed its approach to customer service, giving each of its customers their own personal assistant, in order to improve customer service. This required a huge, and expensive change in the way the company worked. The idea failed and the investment was ultimately wasted. If Lean UX had been applied to the process then tests could have been devised to prove the initial hypothesis that the change would improve user experience at a fraction of the cost.

Outcomes not outputTeams should be driven from managing output to managing outcomes – even though this can be

To achieve this we can apply:

• Empathy for our customers• Creativity in generating insights• Rationality to analyse context

(all three of which tie in neatly with Richard Caddicks keynote form the previous day)

Lean UXLean UX is an approach that places less emphasis on deliverables and greater emphasis on shared understanding. We should prioritise learning over growth. In other words don’t spend five months building the finished product. Spend five hours building a prototype, test it, decide what works and then spend five months refining it.

In order to do this we need to consider:

• Who the customer is• What pain points do they have• How will the product solve those pain points• What features are important• What is our differentiation

Requirements-driven product definition is a sure-fire way to get 100% of the wrong product launched. The assumptions that requirements are based on are usually not accurate enough to determine the exact solution those requirements dictate

By Barnie Mills, @basscakeHead of Design, Crafted

CraftedINFORMATION

more challenging to manage. When working collaboratively and iteratively in multi-disciplinary teams to brainstorm ideas and testing the ideas generated we can make decisions based on objective observations. This allows us to make decisions about the success of an outcome gives us the opportunity to:

Kill it – the outcome and approach are not working, don’t waste anymore time on itPivot – The outcome is sound but the approach isn’t working so let’s try a different approachDouble down – the outcome and the approach are both working focus resources here

By taking this approach we can mitigate risk by testing early to prove a hypothesis before wasting resources on it. Jeff gave some examplesto illustrate this point: In launching a tablet based learning platform for Sesame Street to be used in classrooms the whole project was treated as a hypothesis. Tests were conducted to test the hypothosis in the classroom. In the first instance the researchers observed classrooms to see if teachers would actually have the time to effectively use the platform. Once they had established that this was the case then other tests were built.

that there was demand for such an event they conducted a series of tests mitigate risk before commiting and investment to booking venues etc…

To start with they spent a couple of hours building a simple landing page to capture interest. In the space of a weekend 250 people had signed up to register interest.

Taking this as a good sign they then set up an Eventbright page to sell tickets, still having only commited to a date. The tickets sold and it was decided that it was probably time to book a venue!

Lean UX isn’t just for designersLean UX is not just an approach for designers, by applying it across the whole team it can bring the following benefits:

• Bring perspective to product definition• Bring increased empathy for the user• Help teams understand the why behind every initiative• Help teams to learn more, faster

Working as a consultant for Paypal Jeff has encouraged them to take this approach to the point at which they in fact physically breaking

down walls within the office to help teams work together more easily.

Key takeawaysJeff summed up his presentation by reiterating that defining the product upfront:

• Reduces time spent building the wrong product• Builds team-wide momentum and shared

understanding• Ensures resources are spent on the right things

In order to achieve these benefits we need to:

• Admit that requirements are actually assumptions

• Focus on outcomes not output• Work together to come up with ideas• Test ideas ruthlessly

Although I had heard about Lean UX prior to UX Cambridge, hearing Jeff ’s presentation really helped me to see the true benefits to be had from taking this approach and also that it doesn’t have to be something that is only applied to large projects. Testing hypothesis can be a quick cost-effective process suitable to any size of project.

PDF content test - The team put PDFs of example content on a tablet and watched them being used and the interaction in class for two days.

Card sorting – teachers were asked to sort cards with proposed content and features into buckets to help define content grouping

Clickable prototype – a clickable wireframe prototype was built.

During all of these tests not a single line of code was written, but the team was able to gather information on what features and content actually worked without the risk of building the actual product.

Jeff also gave an example of a company trying to revitalise its subscriber base after it had flatlined. To launch a redesign would be a big investment and also run the risk of cannabalising the existing members with no guarantee that the relaunch would have the desired effect. Instead of diving into an immediate relaunch a prototype was built and feedback was gathered at a user convention. Based on five days of effort the original scope was vastly reduced.

The final example Jeff gave was of launching UX NYC. The team had made an assumption

CraftedINFORMATION

8.0

People, not process: The craft of being heardIan Fenn – Chopstix Media.

To illustrate this point, Ian showed statics for why “Most frequent usability issues go unfixed”. The main reason being that they conflicted with the decision maker’s belief or opinion.

In an attempt to help us be heard as designers and UX experts, Ian urges us to consider the following:

Start with people not process Consider why a particular client has chosen us over other agencies or designers.

Arrive armed with knowledge Read up on UX design so that you can back up your design choices and suggestions.

Be dressed for successYou don’t have a lot of time in meetings for your client to get to know you, although they are more interested in what you have to say rather than what you look like it is important to show the ‘best version’ of yourself and your company. Being well dressed goes a long way in portraying professionalism. Make sure you stand out for the right reasons.

Ian Fenn is an award-winning UX consultant with a career spanning 16 years. For the past seven years Ian has worked as a consultant for clients such as BT, Virgin Media, LexisNexis, and agencies such as M&C Saatchi and Conran Design Group.

Ian’s talk focused on his years of experience in dealing with different kinds of people. He asked us questions such as “have you ever had the feeling you’re pounding the closed door of common sense?” and “Have you been left crestfallen after stakeholders over-ruled your thoughtful and heavily researched recommendations?” As designers, I am sure we have all felt that way!

Ian highlighted a quote from a well-known book (Design is a job, by Mike Monteiro) “A designer solves problems within a set of constraints”

The reality, as Ian points out is:

“A designer solves problems, that they often have to help identify, within a set of ever-changing constraints. Without Authority.”

By Ally Wright, @allyraraSenior Designer, Crafted

Show your HRT (heart)Humility – You are not center of the universeRespect – You genuinely care about others that you work withTrust – You believe others are competent and will do the right thing

Meet the project sponsor Ian highlighted a quote by Rudyard Kipling from his “Just so Stories” (1902):

I keep six honest serving-men(They taught me all I knew);Their names are What andWhy and Whenand How and Where andWho.

Get to know your client and begin to develop a relationship based on trust. Make sure you ask key questions such as:

Why are we doing this? – Address the business needsWhat do the users need? – Supplying these needs generates turnover

A designer solves problems, that they often have to help identify, within a set of ever-changing constraints. Without Authority.

CraftedINFORMATION

Developers and designers• Involve them early on• Share your work and collaborate often• Understand their constraints

Relationship Principles Ian went on to highlight a few key points that we can address when working on a project across multi disciplinary teams. These relationship principles were as follows:

Integration Breaking down walls… literally. If at all possible work as close as you can to other members of the team. A large open space where collaboration is encouraged is an ideal solution for Agile and Lean UX implementation.

Communication Don’t be afraid to ask stupid questions, getting to know team members and developing a relationship across disciplines will make work flow run smoothly and hopefully provide a better overall product or solution. Flexibility Be open to adapt your techniques, your design or processes. Do your best to promote transparency, share your process with everyone involved and show your work and its progress.

Respect This speaks for itself.

Being aware of members of your team as individuals is the key in helping a project run smoothly. Everyone is different and reacts differently to certain situations or experiences. Getting to know your team will help you learn how best to speak to and work with them on an individual basis.

Personality TypesIan proposed that we all complete a personal assessment based on the theory that there are four core types of personality. These types, set out in ‘Personal styles and effective performance’ by David W. Merrill, are:

• Analytical• Driver• Amiable • Expressive

A number of questions were asked and we chose which was closest to our own personalities. The data collected from the answers provided an insight in to our own personality types.

Based on these personality types Ian provided a few tips on how to deal with these types of people, based on his experience.

Where do they want it? - Website, device, television‘Who is doing it?’ – Establish a dedicated point of contact you can deal with‘How long do we have?’ - Manage the clients expectations carefully‘How will we measure success?’ – Establish a goal to track progress

Meet the team members Get to know the team that you will be working with, this will help the project run smoothly. Consider asking the following questions:

• What’s their history?• How do they work?• What has been useful in the past?• What has annoyed them?• What are their expectations?• How do they like to communicate?

Ian split out different members of the team and provided tips when dealing with them:

Project managers• Treat as you would a project sponsor• Be honest about timings and try to

stick with them• Keep them informed• Ask them to coordinate feedback

CraftedINFORMATION

5. Don’t push for too much detail6. Don’t hurry them7. Don’t confront or attack them 8. Don’t be dictatorial or autocratic

ExpressiveAn animated, impatient, creative who has the focus of attention and a sense of humour

1. Focus on the future and the big picture2. Illustrate concepts with stories3. Seek their idea and input4. Show personal interest and involvement 5. Stimulate their creative impulse6. Compliment them7. Don’t be too serious8. Don’t talk down to them

Ian moved on to discuss potential cultural issues that may play a part when communicating with people. For example in the UK Ian states that “Humour is regarded as one of the most effective weapons in a British citizen’s arsenal” but with certain cultures such jokes could potentially offend or confuse a person.

Ian went on to provide us with some useful tips on how we can use language to be clearer and more positive. Useful phrases include:

“What we might do is…”“We could do…”“Would you…”“I appreciate it when you…”

Ian’s presentation offered an interesting method of moving forward with a team and or project. The title ‘People, not process’ sums it up nicely. When dealing with individuals whether a client, a project manager, a developer or designer we need to remember that we are all people. We are not robots, and we are all different. Being aware of this and managing the way we communicate is vital in the success of a project.

Ian closed his presentation with a great quote from the stand-up comedian, Sarah Millican:

“This is Millican’s Law. If you have a hard gig, quiet, a death, a struggle, whatever, you can only be mad and frustrated and gutted until 11am the next day. Then you must draw a line under it and forget about it. As going into the next gig thinking you are shit will mean you will die.

Equally, if you nail it, slam it, destroy it, whatever, you can only be smug about it until 11am the next day (in the past, I have set an alarm so I could get up and gloat for an extra half hour) as if you go into the next gig thinking you are God’s gift to comedy, you will die. That is Millican’s Law and it totally works. It means you move on quickly.”

Analytical Slow, quiet thoughtful, someone who prefers to be on their own.

1. Focus on the past2. Talk facts3. Focus on detail and accuracy4. Be logical, well organised and serious5. Tell them exactly what you will do and when6. Don’t rush things7. Don’t be too personal8. Don’t be overly casual

DriverFast, intense, formal, a risk-taker and someone who likes to be in charge.

1. Focus on the present2. Get to the bottom line3. Speak in terms of short-term concrete results4. Give them options5. Don’t get too personal6. Don’t get in to a control contest7. However, don’t back down if you believe you are right

AmiableSlow, easy-going, quiet and friendly, both inviting and forgiving.

1. Be flexible 2. Be easy and informal3. Be personal and personable4. Emphasize a team approach

CraftedINFORMATION

9.0

User Experience Does Not ExistAdrian Howard – Quietstars. @adrianh

There are now a number of ways to define UX roles. Such as architects, designers, strategists, and champions. Adrian even met someone who was an “Experience Modeller”!

Adrian went on to discuss how UX is just a Reification. Much like the economy, we talk about them like they are real things but they are not, you can’t grasp or hold them, they are just a set of concepts. When we start treating this concept as a real thing, odd things start to happen. Doing this has good and bad aspects. On one hand it brings us together, at conferences for example. But it can also exclude people.

Job roles are not discrete, he explained how you shouldn’t be defined by a job title and UX itself shouldn’t be defined. What if we pretended that we didn’t have job titles, how would you define yourself to your organisation? How would it change your conversations? Job titles can ignore the other skills that somebody has that don’t fall under their job role. For example, Adrian explained that when hired as a designer the employer didn’t want to know about the development skills he had and vice-versa.

Adrian began with a quick history lesson! In the late 1950s and early 1960s computers were only used by governments and large businesses, they were too bulky and complex for use in the home. In 1977 engineer Ken Olsen stated “There is no reason anyone would want a computer in their home”. At the time this was true but soon in the 1980s normal people were beginning to use them everyday. We started seeing more planning, prototyping and user observation and today we define this thinking as user experience.

In 1993 the “User Experience Architect” job title was born, coined by Don Norman while he was Vice President of the Advanced Technology Group at Apple. He invented the term because he thought user interface was too narrow a term to define the role.

In 2000 Jesse James Garrett created a diagram called “The Elements of User Experience”, Adrian talked about how nobody discusses the small print, how the picture is incomplete and does not account for secondary considerations such as the development process and the roles within a UX development team.

By Charlie Gordon, @cbg Junior Designer, Crafted

Adrian went in to detail about how the current models we work within involving just UX work are not sustainable. The rate at which people are building software is increasing and there aren’t enough UX professionals. He also explained that the ‘fuzzy border’ around what we define as UX doesn’t exist and unless we start bringing in new skills we need to build better user experiences or they are going to suffer and fade away. We need to start building a community that will be able to succeed into the 21st Century.

Key takeaways• UX is just a set of concepts that can be changed.• Don’t be defined by a job role, pretend you

don’t have a job title.

Can UX survive into the middle age - or will new communities of practice take over? Do we want a future of UX professionals - or a future where everybody is doing UX work?

CraftedINFORMATION

10.0

Small Business Owners and Perceived Website MysteriesInga Spouse – Websites Working Wonderfully. @IngaSpouse

The websites of small businesses largely existfor two reasons:

1. To sell more product – whether that be a physical product or a service

2. To grow the business – Where this is linked to the first it could be that the growth comes from advertising opportunities or something similar.

If the website isn’t doing either of these then the strategy of the site needs to be reassessed.

To have an effective website for a small business the builder of the site needs to clearly translate the business into a website. Consultation needs to be had with the client to get to the bottomof what the business does and how they can work online. In some cases however the straight translation of exactly what they do in the real world may not be appropriate and the business model needs to be adjusted to accommodate the website.

The site builder must also take into account that the website will often be the prospective clients first ever contact with the business and, as with

There are two things that ultimately make a website work. It makes money for the business and it gives the users the answer they were looking for. The best result is that both are satisfied.

Inga Spouse helps small businesses get the most out of their websites by making sure that they work for them, for their users and prospective customers. She outlined the challenges involved in this from both sides.

The first thing to define in this subject is who are ‘small business owners’? They are usually solo traders, non-technical people, who know all there is to know about their business because they have to manage all aspects of it.

With regard to their websites they usually fall into two categories; either over confident or under confident. The over confident have built the site themselves or had it built by a friend and love everything about it. The under confident will claim to know nothing about the web and claim to have no idea about what they want from their website.

By Chris Plowman, @cplowmanDesigner, Crafted

anything, first impressions count. The site needs to be looked at from the perspective of a brand new user who arrives there via Google and has no idea what they are going to see. As with all people this user has clicked on a search result that they believe will be directly useful to them, you never click a Google result that you don’t think is going to be useful.

It is like stepping out from the tardis, you know roughly where you are but you don’t know what you are expecting.

There are 3 key factors that help this initial impression

• Colour – Colour creates a feeling that can welcome the user into the site. What the client’s favourite colours are is irrelevant!

• Layout– A familiar layout will help the users navigate quickly and easily allow them to get to the information they want

• Images– The images must be carefully chosen and appropriate to the business. Always ask what does this image say about the business?

The users reaction time and their willingness to abandon the site is remarkably fast. Inga refers to this as the ‘toe dipping rule’. You’ve got 2 seconds to get a user to engage. After two seconds, if the user hasn’t abandoned the site, they begin to ask themselves why am I here? At which point the content of the site must take over the job of keeping the users interest.

There are two things that ultimately make a website work. It makes money for the business and it gives the users the answer they were looking for. The best result is that both are satisfied.

The designers need to look at websites from both perspectives, and ultimately the users issues may be more important than how the business owner wants to make money.

Key takeaways• The website must work for both the business

owner and the users/customer.• First impressions are all important, you

may have as little as 2 secs to get and keep the users attention.

CraftedINFORMATION

11.0

From Darwin to DesignStuart Church – Pure Usability. @stuchurch

being the gradual change of characteristics over successive generations, or survival of the fittest. It can be split into two areas; biological evolution (genes) and cultural evolution (memes).

Biological evolution or genes are influenced and under pressure from:

• Prey• Mating• Competition• Physical environment• Disease• Predators

Cultural evolution or memes are influenced and under pressure from:

• Motivation• Social factors• Utility / function• Meaning

Good designs stay and bad designs are forgotten. In evolutionary terms the idea design that doesn’t work will mean that animal does not survive and

An understanding of evolutionary theory (particularly in the fields of evolutionary and behavioural ecology) can provide us with rich new ways to think about and frame questions about design. Can an understanding of animal communication inspire the way we design products?

Stuart started his presentation by explaining his background was originally in Academic Research, specifically animal behaviour before he moved into the field of UX. He explained how he felt that the two fields are actually very similar both essentially dealing with behaviour (UX dealing with human behaviour).

Biomimicry, taking design cues from nature, has always been used in design; turbines based on the shape of whale fins, material for swimming suits based on shark skin, lizards feet that inspire adhesives and sticky burr seed that inspired velcro for example. The link between the animal world an UX is not perhaps so immediately obvious.

Richard gave a brief overview of evolution and adaption. Evolution as most people are aware,

By Barnie Mills, @basscakeHead of Design, Crafted

so does not pass on the genes containing that design to the next generation. Likewise cultural ideas that do not work are forgotten.

ImplicationsEvolution can be thought of as one big A-B test with different variations on a theme being constantly tested and discarded or developed. This experimental approach ties in neatly with the experimental, iterative approach of Lean UX; generate more ideas to see which work. This approach will inevitably lead to more mistakes than successes. 99.9% of all the species that have ever existed have failed. Similarly 80-90% of all products fail in their first year.

Stuart raised the point that when we think about innovation then we should also take a cue from evolution. Innovations don’t have to be radical they can be familiar. He then talked about ‘The Adjacent Possible’, taking the next feasible closest step to solving a problem and building innovation incrementally rather than looking for a huge leap. The most successful ideas tend not to be that different from what already exists.

What can models of evolutionary cooperation tell us about customer relationships and service design? Can there be too much innovation? What lessons can evolutionary interactions teach us about design processes?

CraftedINFORMATION

Mixing things upMixing things up can drive innovation too. In the animal world mating allows new combinations of genes to be experimented with. Although there is a risk in this approach that sometime you risk loosing good traits rather than gaining them. Some species actually use a tactic known as optimal inbreeding where they will try to mate with relatively closely removed individuals (ie cousins) to ensure they keep similar traits while making sure the individual is far enough removed to avoid problems caused by inbreeding. In terms of design innovation many ideas are created when groups of individuals come together rather than when an individual is working alone.

Is it possible for ideas to be too innovative? The Apple Newton handheld device was launched in the 90’s. Despite being a forerunner of the hugely successful iPad the Newton ultimately failed because the infrastructure to support a mobile device of its kind was not available at the time. Because it was ahead of its time (potentially too innovative) it failed.

Evolution is not gradualEvolution is not a steady, gradual process it runs in fits and starts, with periods of relative calm followed by bursts of opportunity and innovation. This is known as ‘Punctuated Equilibrium’. Stuart again used the iPad as an example to illustrate this in relation to design, comparing the evolution of the tablet before and after the success of the iPad.

different behavior. Prisoners questioned separately about a crime. They can give the same answer as each other, say the other prisoner did it, say they did it. The different outcomes have been well documented but the main question that the problem addresses is that of a quick pay off vs long term benefit. Reward points offered by retailers are a good example of this rather than having the quick fix of lower prices they reward loyal customers long-term.

Signalling and StatusIn nature animals use signaling to indicate status. The peacock is the most obvious example of this. Although there are benefits to the peacock signaling in this way to attract a mate it can also be a handicap to have invested all its energy in looks, for example a peacocks looks come at the cost of losing the ability to fly or camouflage itself. Smoking humans can be used as a similar example in humans, it inevitably starts as a status symbol, the risk being that it is incredibly bad for your health.

Optimal foraging theoryAnimals naturally forage optimally ie the amount of energy they use does not exceed the amount they gain. Prey and ‘patch’ choice can be predicted scientifically.

By thinking of humans as information (or informavores!) and applying the idea of optimal foraging we can predict what will attract users to pieces of information by making it look

‘nutritious’ or like an ‘easy catch’. Giving users these teasers to allow them to get the ‘information scent’ can help us to guide the user through content. However, users will leave if it is too hard to find the content (even if it is good) or if the content is easily found but offers only ‘empty calories’ (nothing of value).

“The two main strategies are to make your content look like a nutritious meal and signal that it’s an easy catch. These strategies must be used in combination: users will leave if the content is good but hard to find, or if it’s easy to find but offers only empty calories.” ~Jakob Nielsen

Key takeawaysThinking of the design process in the way described by Stuart, raised lots of interesting points and certainly made me think about the design process from a very fundamental level.

• Mistakes are part of the design process, try ideas out to see what works

• Small innovations are often more succesful than huge leaps

• Working as a team can help create a greater volume of ideas

• Make content attractive and easy to digest

Can innovation be too fast?In nature some viruses mutate very quickly but at an optimum level that prevents immune systems from wiping them out but still allows them to keep their identity (known as Error Catastrophe). In design we need to be wary of innovating too fast, users need to be able to keep up with innovation otherwise it will not be adopted (gadget fatigue)

Geographical IsolationMany advances in evolution in the natural world are made when species are separated geographically. A good example of this is the different species of tortoise that have evolved in the Galapagos islands. Those living on drier islands where there is very little grass and low vegetation for thm to feed from have evolved a shell shape that allows them to lift their heads to feed from higher vegetation, those living on islands with abundant grass have not evolved this feature as it is unnecessary to survival. Designs often manifest themselves or evolve differently depending on where they are developed. For example an operating system from the US will be different from one in Asia to account for the cultural differences and norms of each area.

Evolution and BehaviorBehavior is also subject to natural selection. To illustrate this Staurt used the case study of ‘The Prisoners Dilemma’ a game theory problem that highlights the advantages / disadvantages of

CraftedINFORMATION

12.0

Small Cognitive Psychology for Big Interaction DesignJan Srutek – Flow Interactive. @JanSru. Slideshare

Short-term memory The most important area for designers. It is often said that people can hold around 7(+/- 2) things in their short-term memory but this is ‘rubbish’. In fact humans have the ability to hold 4(+/- 1)chunks of information. This is the reason we often group phone numbers into smaller chunks, groupings and patterns help us to retain information.

Short-term memory is limited but these limitations only apply when people are trying to remember things or when they are problem solving. This means that if users are being presented with items on a screen these issues don’t apply, for example there is no reason to limit the number of navigation items on the scree, the user doesn’t need to remember them, they are on screen to be read when needed.

The main problem with short-term memory in the context of design and UX is that it is easily disrupted. Whenever possible users should not be interrupted from the flow of what they are trying to do. For example obscuring errors with

Jan Srutekis looked at applying how our minds work to how we design. What capabilities and limitations of the human brain should we be taking into account when we design interactive systems for users.

Cognitive psychology is the study of the how the human mind works and as the systems that we build are used by humans then we should be looking into how our users function. Cognitive psychology helps us understand human cognitive abilities and limitations, knowing the basics of it can help us evaluate our designs and design patterns more meaningfully.

There are three relevant parts of the brain for UX and interaction professionals to look at: memory, learning and attention. Jan explained how each affects how we should be designing.

MemoryMemory is split into two types, the short term memory and the long term memory.

By Chris Plowman, @cplowmanDesigner, Crafted

pop ups isn’t helpful, it doesn’t allow the user to see both the error message and the error at the same time. Inline validation displays the error next to the form, helping users associate the error message with the actual error allowing them to easily correct it without having to retain any information.

Long-term memoryLong-term memory is for more permanent memories, ones that can last for an entire lifetime. How well a memory is stored and retrieved is based on the level of processing involved. Information that is analysed deeply is recalled more easily than information that is analysed superficially. We can use this in our designs to help people engage and remember our product more easily by ensuring our content is either:

• Relevant• Emotional• Humorous• Surprising or shocking• Requires elaboration & reflection

Cognitive psychology is the study of the how the human mind works. The systems that we build are used by humans so we should make sure we are looking into how our users function.

CraftedINFORMATION

These qualities require the user to use a higher level of processing to engage with the content and therefore it is more likely to stay in their long-term memory.

LearningPeople prefer to jump right into using services and products rather than read manuals. They form a hypothesis about how things should work and then test this by exploring and playing. We can allow users of sites to do this by allowing them to build a clear mental model of how the site works. This is done by giving them a good starting point that orientates them in the world of the site and giving them continuous encouragement to explore.

Tests have shown that people perform better when working out how to use system if they are told what the system is for. A good example of using this fact in web design is the use of a stepped pattern, often 1,2,3 in forms, quote engines or checkout processes. This gives people a start and makes it clear how the system works making it easier for people to use.

To encourage exploration the system must do three things.

1. Prevent error and facilitate recovery2. Make things consistent and predictable3. Provide clear feedback for all actions

These three things allow people to continually test and either confirm or adjust their mental model.

Computer games are a good example of a system that promotes exploration but also gives good feedback and guidance. Most have in-game tutorials so that people don’t have to read manuals, crucially this information is usually given when it is immediately relevant meaning it doesn’t have to be recalled from memory and is instantly more engaging.

Another element of learning that can be put to the users benefit is that the brain is better at recognition rather than recall. People are better at recognising steps rather than recalling how things have to be done. For example, having an auto complete function on a website that searches for train times means that the user doesn’t have to remember the entire spelling of the train station just recognize it when it appears, this changes the brains function recall to recognition.

AttentionDuring any one second the brain is receiving one billion items of data just from your eyes, the brain must choose which of these data points is important enough to focus on.

As designers we need to use progressive disclosure to reveal functionality and content in a planned fashion so we only show what is

needed at any given time. Attention can be actived in two ways, top down, where the user chooses to focus on a particular thing, or bottom up, where the users attention is drawn for example by movement. This ability to detect movement means that we can, for example, use animation to draw the user’s attention to where we want it to be.

Key takeaways• Understanding how our user’s brains works

allows us to build systems that better serve the user and our own needs.

• Short-term memory is limited and easily disrupted. Don’t make your users do too much work to use your website.

• Creating content that engages the users long term will help you to create a better relationship with them from a view of your brand and your website.

CraftedINFORMATION

13.0

Photos - The unsung heroes of user experience designJames Chudley, CX Partners, @chudders. Slides

(It fits in a VW Polo and I have a Ford Mondeo so it will fit for me too)

Photos can also have a negative effect on the impression your site gives as well. In general users have become wise to the use of stock photos and can readily identify images on a site that are staged or don’t look like ‘real people’. Users identify much better with a regularly shot image of a real person doing real things than a perfectly shot image of a generic model.

The message that the images on the website are giving should also be carefully considered. James gave the example of http://www.theaa.com/ which at the time of writing had an image of a single female driver stranded at the side of a country road at dusk being helped by an AA employee. While the photo illustrates nicely what the company does it also plays on peoples anxieties and helps to allay those fears. It shows that the company will come to you wherever you are, that you can feel safe in their company, that as a woman driver you won’t be left alone, that you’ll be helped at any time of day and that their staff

As humans we can’t ignore photos, we have a dedicated area of the brain that will scan images, our surroundings and inanimate objects for patterns that we recognize as faces. We can develop a strong feeling based on the emotion of that face. This ability can be used by UX professionals to draw people’s attention to areas of the page containing calls to action or important text.

In ecommerce photographs are useful to help aid a complicated purchase. James used the example of a pushchair which can also be known by many other names, stroller, travel system, pram, buggy etc… Users of a site will arrive at the site knowing what they want, the one they saw someone else pushing recently, but may not know which of the many names it falls under. A simple image can explain each category in seconds, in a much clearer fashion than paragraphs of text would. They can also be used to illustrate other aspects of the product such as how easily it will fit in the boot of a standard family car, the user will most likely not know the dimensions of their boot but they can probably relate its size to a given example

By Chris Plowman, @cplowmanDesigner, Crafted

are friendly. Multiple important messages all conveyed in one photograph. It is these intangibles that photos are able to easily convey that are their real power.

James identifies that photos can be used for many purposes:

• Supporttheprimarytask– For example large photography on a estate agent website helps the user imagine themselves in the property

• Conveytheintangibles - Buffalo Systems, a company that makes outdoor wear in Sheffield, key selling point is being handmade in Sheffield. This sense of authenticity and quality is portrayed in a series of photographs of workers and the factory.

• Showthebenefits – Multi benefits can be shown in one photograph. For example, by showing a product in use a user can glean many facts about it’s abilities

• Credibility – Photos of a product can help the user to see its quality. Photos of a credible source on the site can give the entire site a greater credibility

Photographs have a massive impact on people’s feelings and perceptions toward your product, brand and/or website. We need to understand the impact that photographs have so we can control this influence.

CraftedINFORMATION

• Showhow – Step by step guides can use photos to show how to do a complicated process and give the user reassurance and guidance along the way.

• Humanising – Showing the faces behind web services or businesses helps the user to relate to the product.

• Consistency – John Lewis has a consistent and recognisable photography style that helps the user focus on the products as each photo is shot in exactly the same way.

• Detail – Zoom options help show the detail in a product

• Strategicphotos – Emotional photos can be used to show products in a lifestyle setting, allowing the user to imagine themselves, or their family, with the product. These should be used on website landing pages or in promotional material. Rational photos of the product itself can be used later in the process to show a more detailed view of the product.

James discussed a framework he has begun to set out by which the photos on your website should be evaluated.

1. Photo fundamentals – Is it in focus, well composed, of a good size and quality, properly exposed and sensibly cropped

2. Effectiveness a. Does it have a rational appeal (is it useful? Helpful? Constructive? Instructional?)

b. Does it have an emotional appeal (do I want it? Is it entertaining? Is it aesthetically pleasing?)

c. Does it have a reputation/brand appeal? (Is it appropriate? Does it match the brand? Is it believable?)3. Message communicated – What does the photo

say to you?4. Anticipated user response – Does the photo

change the users behavior or aid their decision making? Does it change their opinion? Does it create a desire?

So how do we use all of this in our projects going forward?Think about photographs at the wireframe stage. Annotate wireframes with ideas or by placing the proposed photography. Photography should not just fill a square on a wireframe, it should be an integral part of the page and its visual flow. What type of photo is going to sit where should be considered as early as possible.

Research what works and doesn’t work on your sites and include photography in this report.

Evaluate each photo on your site carefully to see if it is working as hard as it could be.

Create task models that show how a user will progress through the site and work out what kind of photo will best illustrate the process at each

point. This will give you a shortlist if you are commissioning photography.

Sketch out the photos you want. If you are getting photography commissioned and you have a clear idea of the photography you want, sketch it out to illustrate how it will work.

Key takeaways• Photographs have a significant impact on

people’s feelings and perceptions towards your product, brand and/or website.

• We need to understand the impact that photographs have so we can control this influence and most importantly not make the mistake of having a negative impact.

• Photography should be thought about at the wireframing stage of the design process, it should be integral to the flow and feel of the site.

• Evaluate the photography that appears on your site to see if it is fulfilling all the criteria it should be.

CraftedINFORMATION

Ipswich Studio

32 Fore Street

Ipswich IP4 1JU

T. +44 (0) 1473 213222

E. hello@crafted.co.uk

London Office

Clerkenwell Workshops

27/31 Clerkenwell Close

London EC1R 0AT

T. +44 (0) 20 7061 6216

www.crafted.co.uk