UX Bristol 2013

UXBristol organisation changed from smaller venue to Mshed however they are trying to keep it small so people can interact better, have better experiences on workshops.

As always, with any concurrent talks on conference comes the question on which ones to choose. Sometimes your interests guide you enough so you can get exactly what you want, sometimes can be hard, especially if you want more than one at the same time. Nevertheless, below are the ones I made my decision about…


Positive Psychology and UX
by Patrick Jordan

Positive psychology has the same goals as self-help and how we can implement it through design. Understand the principles how people get happier.

Started 15 yrs ago (USA) to bring an ‘ok’ status to an ‘even better’

  • How to flourish: take responsibility, set goals, be positive, persevere intelligently, connect with others.
  • People matter!
  • User experience comes down to the behaviour of the individual (cabin crew politeness, one individual on a hotel can make or break your experience)
  • Empower people
  • Having little steps is less daunting, if you set the bar low, can be more empowering (Which one would you choose? every penny helps / every pound / give generously)
  • Make it personal (show how you would be “helping a child in Africa”)

Kiva – loan/donation for people and projects (under development countries) – loan goes directly to person (not a charity) so it is more personal.

Have clear goals
also be aware of units/measures

Step-by-step
Pre-contemplation, contemplation, preparation, action, maintenance
Immediate benefits (goodgym burn calories in a ‘meaningful’ way – London based, helping people with disabilities)

Couch to 5K app set little goals, give positive reinforcement (I found two: C25K and Change4Life)
Apps with positive feedback, view and correct trends, tracking over time, progress, build little successes,

Remove stress
Improve mood (moodgym) – coping vs savoring

Psychological priming (mind connect to our bodies?)
perception (medical treatment) on the active people vs sedentary/ordinary stereotype

In flow app (explore your happiness) – building a profile about who you are with and what are you doing.

Persevere intelligently – being fixed in our goals but flexible how we achieve it
knowing the facts (billion pound o-gram) – abstract concepts viewed on a graphical design sometimes makes it clear, understood.

Daily mail ‘oncology project’

Effect vs theatre – (environmental theatre, local bacon vs outsourced vegs, dog vs tv)

Emotional journey
peak and end – the boredom at queues (on parks) can be surpassed by remembering the ‘big moment’ (amazing ride) and the great finish to give a general good experience.

Tesco in the underground in Korea (QR codes on metro, shopping delivered before you get home) understand the context of people’s live and provide the experience.

Connect with others
Mumsnet – supportive networks (understand the cultural element around the community). Trust on younger women (mind the gap voice) stats appeared, but not ‘apparent reason’ behind the motive.
eHarmony – matching similarities, not much what you are looking for
Men’s shed – men like to be doing things together (do “stuff” in sheds)

Cycle routes as problem (not enough of them), if more cyclists, more voice, greater need of accommodating them.

http://www.patrickwjordan.net/
info@patrickwjordan.net


How to think like a content strategist
http://www.valuablecontent.co.uk/@valuablecontent

Can we have one? what is it?
Book: valuable content market

Plan from A to B, content first instead of design…

Not only about the page (url) but also the ‘satelites’ (FB, twitter, youtube, servietes with content on it, maps on cafe, etc). Think wide, as well, not only at the site. VALUABLE content.

Need to know the customer’s business and WHY they are doing it….

So, as an exercise, we got a group of people to discuss a real-business case: Roll for the Soul – cycle hub – and the goal is to create a focus cycle point in Bristol. One week cycle festival brings all people together in Bristol, so the owner thought ‘how about the other 51 weeks?’.

Business was recently opened (2 and 1/2 weeks old). Success aims: keep open for one to two years down the line, get more interest of people that doesn’t cycle, ‘get more people to cycle more often’. Non-profitable company, want the cafe to be full, busy.

Workshop pricelist, menu, describing services (cafe, cafe seating/lounge, function room/meeting room, bike workshop – two sides of business: catering and bike workshops), feeling of community, sense of fun. Serving ‘healthy fast food’, vegetarian (owner and cook are vegetarian, didn’t feel right to serve something that they don’t eat), cakes on the go. Business is all-inclusive, not only a niche of the cycle community. Family, athletes, commuters, etc.

Problem: how to engage the wider community.

Exercise about strapline of business (http://www.rollforthesoul.org/) and we chose “Feeding the cycling city”. Some other ideas in the room: “Your tasty community hub”, “pitstop”, “freedom”, “feel good fix”.

Ideas on how to engage, the persona: “Ed, mountain biking dad” – ways of attracting him: cycle lane developments, maps of routes, family events, parking availability/security, mountain bike talks, what can I do with my bike at the cafe (parking/workshop), can I talk with experts?

Interests:
Map my bike or Strava bike (mapping routes and sharing) – routes shared by people
Live talk or youtube/vimeo
Update on cycle lanes – twitter feed
Family services

Challenges (apps) to motivate youngsters and use of different routes…

Message: Get a goal, imagine possibilities for the business, curate and decide which ones are interesting for the business. Make a PLAN how to create/make this content.

Rethink about your own person online, the digital trails and footprints, get better content, ideas, thought process etc.

http://www.rollforthesoul.org/


UX Hacks
by Jan Strutek – @jansru

Coming with new ways (creativity) of doing stuff
The art of war on the Overground
Sketchplanations.com

“desire to improve things for better”

What UX hacks do you know???

  • creativity
  • productivity
  • wellbeing
  • research
  • sketching
  • a-b communication
  • prototyping
  • collaboration

Productivity
Read and apply “Getting things done” – David Allen

Creativity
Use mental notes for rapid ideation and lateral thinking – deck of cards by Stephen Anderson

A-B communication
Follow a process when presenting your designs (start with the problem, not the solution)

Sketching
Don’t look at the tip of the pen (to sketch nicer looking, straight lines)

Prototyping
Use custom widget libraries in you tools (‘better defaults’ for axure)

Research
Leave a longer gap after the first research session (for Q&A)

Agile/lean research
online forums are goldmines full of insights (pain points – if you don’t have time do to more research)

Collaboration
when sharing screen, remember to switch off

Welbeing
always try to end your day with something positive (even a small achievement will do – peak-end rule)


Tips and Tricks
From attendees of the UXBristol

  • Explain problem to other people, ask kids to solve problem or sketch an idea, voice the problem
  • Pull post-its downwards (instead of upwards) so they don’t curl
  • Have a no-meetings day
  • Focus@will, coffitivity
  • Walk around, talk to people instead of email
  • Check trend online, do keyword searching, go for a walk
  • Sketching (Paperbrowser), keep it simple
  • Put headphones on even if not listening to anything (to avoid people interrupting)
  • Don’t check work emails on Sunday
  • Frame a problem and walk away so your subconscious work it out
  • Ask WHY (why you did this? why this feature exist? why are you commenting? etc.)
  • Ask the CEO of company to do some user testing
  • To improve an existing system check what the user do to hack it (and make it usable for themselves)
  • Review often and iterate
  • If you are trying to make sketches either make it really good or purposely awful
  • Use clingfilm to write on the wall
  • Not only complain, provide a solution
  • Offer material to people collaborate on your project
  • Use dropbox, github, etc

UX Trade Secrets


UX Past, Present, Future
Joe Leech – @mrjoe

Psychology for designers book

Glass-ceiling (the unseen, yet unbreakable barrier that keeps minorities and women from rising to the upper rungs of the corporate ladder, regardless of their qualifications or achievements.)

Alex Morris: designing things, solving problems.
David Jarvis (VP of customer engagement): taking a business outcome and shaping a range of activities to ‘get there’.

Merging the physical and digital worlds.

UX future in 10 yrs:
‘make ux for telepathy apps and dream visualisations’
‘the same!’
‘almost definitely would like to work internally rather than agency side as the stress levels are much less’ Aaron @ Google
‘integrate design into core process’
Not UX since it will be already incorporated.

Integrations of physical and digital – lot of life is lived in the real world – interior design would be part of UX.


UX and physical products
Mathias Willerup

Didn’t know… One Volvo founders got into car accident in early days and safety was the drive of the company since them.

Physical to Digital merge: different skillset, software is key differentiator, agile process does not apply in device design, user center design is key, traditional design backgrounds fall short, digital design is increasing part of product experience.

S60/V60 sensors (camera top/front/back, laser, radar, ultrasonic front/back)

iPhone plug (should include? design for it? etc.)

Volvo UX centre: concepting, user interaction and prototyping

Their design process: brief > early concept > selection and development (of idea) > early development > technical development (of product itself) > develop for production. ‘Kano’ inspired model

Tech/Biz/UX/Design conjunctions.

Solutions: speeding visual clues, breathaliser connected to ignition, boredom (eye tracking) – air control/temperature, distraction


Launching probes and releasing trojan mice
Oli Shaw – www.olishaw.com – hello@olishaw.com

“Design is the job of solving problems”

Should we be doing this?/why are we doing this? instead of ‘How to solve this?’

Focus on defining the problem (instead of just jumping into solutions/wireframes)
How do you identify and define the purpose?

Explore, discover, create; you need resources, make alies and sometimes enemies…

Probes for information, discussion, innovation and disruption. Sometimes is just creating awareness.

Great technique: mission statement > elevator pitch > tweet(to align people)
Probing discussion – what’s the opposite you are trying to achieve?
Probes are exploratory! not evaluative… (just reveal a ‘bit more of the map’)

Trojan mice (by Peter Fryer) – because Trojan Horse are heavy, take lots of people and effort. Small focused changes, ongoing basis, inconspicuous way. Small enough to be owned by people concerned.

‘Pretotype it’ – (http://www.pretotyping.org/ ?)

Visibility and awareness. Co-location/colaboration.

Is this the right problem to solve?
Change the organisation to make better products.


Hello Lamppost
Clare Reddington
http://www.hellolamppost.co.uk/

The pervasive media studio – sometimes you have to sit and interact with people that are nothing like you.

Playable city (their answer to ‘smart city’) – anti-efficient drive.

People of any age could play, SMS was their choice (wider audience). Not a game or a toy, but people are defined as ‘player’. More an automator than I.A. Object knows time, weather, knows if you talked to it before. There is an ‘editor’. Character for each object (post office quite administrative). Brilliant from just a single experience… Also have to design to bigger audience. There are easter eggs and other surprises. Really important to test with real people, they had 659 unique players in one week.

Emergent behaviour, hacking and other uses. Promoting Bristol as some place different.


Neuroasthetics: science embraces art
Simon Norris

Colour impressions.
Why are some things considered beautiful?

What is the function of the brain? “The acquisition of knowledge…” – Zeki

A study that if you represent vertical lines ‘fire things’ in the brain. Zeki wrote many books about perception, colour, etc.

Brain structure, in basic (plain English) you have either pyramid or star cells.

“There are two kinds of brain concepts: inherited and acquired. The two kinds are intimately linked and one could not exist without the other.” – Zeki

  • consistency
  • abstraction
  • ambiguity

What can we use to help design?
– patterns and pleasure


Lightening talks

With great methods comes great responsibility
Vicky Teinaki @vickytnz

Kickstart project – constrains cards (design principles)

A pattern language, design patterns (elements of reusable object-oriented software)

How you can add your own experience?
UCDtoolbox
Yahoo Design pattern library (graveyard)

Book: the persona lifecycle (field guide for interaction designers)

Is your method:

  • an instrument? (solving something)
  • a competence? (helping you understand)
  • an agenda? (getting people on board)

http://starters.cc – investigating design

http://finalfinal.com – sharing the creative process

Think and talk about your methods.

Better Communication and Better design
@francisrowland

Just an idea, not a full-blown method.
Plain language is part of user centered design!
Helping people with design presentations, articles, posters with a particular audience in mind. So, they can get back and try to apply to their projects better.
Like a trojan horse but full of UX-ey love.

When content strategy is a matter of life and death
@catisnotpretty

Content strategy is about getting the right information to the right people, in the right way, at the right time.

The worst lighting talk in history – experiences with the anti-problem
Mark Dalgarno – @markdalgarno
UXCambridge

The anti-problem: sometimes we get stuck when thinking about how to solve the problem -> think about the opposite (the anti-problem).

Anti-problem: how could our team make our internal business customers hate us?

Surface differences of opinions and strong feelings
These can show what you haven’t already
What more can you do to make your customers burn down your office?
How to stuff people even more into smaller spaces?

Some links:

Responsive Day Out

I was happy to participate on the Responsive Day Out this year. Loaded with great speakers, some familiar faces and many tips, was a great way to either reinforce already acquired knowledge (from practice and other conferences I’ve been) and also learn some new interesting stuff!

Below are my humble notes but nevertheless “my” notes and I also included audio and slide links on this post. 🙂


The Responsive Workflow – Sarah Parameter – @Sazzy

Audio for this session

“You can create good experiences without knowing the content but you can’t create good experiences without knowing your content structure” – Mark Boulton

She mentions Mark’s post about the use of newspaper-like structure, saying that constraints are good and she likes to design with constrains. Check his writings at http://markboulton.co.uk/journal

She tested Browserstack (which I personally recommend, it is a great tool for testing your site in different browsers and OSs) with CrazyEgg for heat testing. It is good to know where your users’ click (and don’t click).

Sarah and her team are making use of pattern libraries which describe where and why to use an element within a site; but highlighted a difference in between pattern libraries and style guides – the latter just describes each element (this is a button, this is a quote, etc.)

Sarah highly recommend the use of Slicy which export PSD elements as assets for your website or app, including retina options.pp, including retina options.

Slicy

She finalises that her process is adaptive and the work carries on.


Responsive Navigation – David Bushell – @dbushell

Audio – and – Slide for this session.

My notes:
Remember the fullscreen size not always is used as it is, user might resize the browser then you need to consider the viewpoint.

List navigation on mobile hides the content, try to use a smaller (two lines) menu. Check site Gloople and Clearleft website itself for examples of navigation when different screen sizes are chosen, pay attention on menus and icons.

Patterns used:

  • Overlay (doesn’t push content down) – check Sony website on mobile.
  • Off-canvas – his own website (similar to Path)
  • Check ISO website ‘big footer’ on desktop and mobile.

But what about soul? blog post and menu brings a table of contents ‘with overlay’ on top of full page.

University of Surrey – focus away from menu on a more ‘magazine’ style for discovery.

Take-away: don’t overload menu; remember that feature detection is different than preferred usage; focus on discoverability (like the Surrey website); know your content hierarchy; single point of navigation = single point of failure.

This Is Responsive – Patterns, resources and news for creating responsive web experiences. bit.ly/TIRWD

This is Responsive

A responsive off-canvas menu using CSS transforms and transitions – bit.ly/offcanvas (he wrote)

“It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove”. – Antoine de Saint-Exupery


Cutting the Mustard – Tom Maslen – @tmaslen

Works for BBC, working with many devices, supporting different browsers.
Audio – AND – Slide for this session.

Premium experience > Not rubbish (ok) > Not supported. They started building from ground up. Simple page across as many browsers possible. Use css (2) to style the main feature (without javascript). Then they create enhanced experience with javascript and they give it to browsers that only use querySelector, localStorage and addEventListener.

Change from graceful degradation to progressive enhancement.

Sofa talk: Jeremy chatting with Sarah, David, and Tom

Audio for this session.

Educating client, instead of ‘telling them what has to be done’. Also experimenting with technologies and features without having the sign-off.


Responsive Web Fonts – Richard Rutter @clagnut

Audio – AND – Slide for this session.

Options:
1. default appears at it loads
2. dont’ send webfonts to small screens
3. show tet in the fallback fonts until all web font loads
4. swap fonts one by one as they load

Use a webfont.css and use media=”all and (min-width: 569px)” (or similar code):

<link href="webfont.css" rel="stylesheet" media="all and (min-width: 569px)" />

Web font loader – The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The WebFont Loader also lets you use multiple web-font providers. It was co-developed by Google and Typekit.


Asset Fonts – Josh Emerson @joshje

Audio – AND – Slide for this session.

Mentioned to use icons as fonts instead of bitmap versions. If creating something more complicated use SVG.

His step-by-step on Using Fonts for Resolution Independent Assets

Also, an amazing tool that I should be using soon: IcoMoon – is a custom icon font builder, which allows users to select the icons they need, and make them into a font. Basically you can upload an SVG file and download a font file.

Nice tip: remember to remove the text-to-speech option of icons using CSS, for example:

.icon:before{
  content:attr(data-icon);
  font-family:'xyz';
  speak:none;
}

Josh uses Fontforge to create font sets. He created forecast.is using Climacons icons. The project can be found at: github.com/joshje/forecast

Climacons

He also mentioned about the ligatures used on the fonts where instead of just leaving a symbol on the font set you can give it a meaning, so the ‘sun’ icon would have a ‘sunny’ meaning for his forecast.is application, and on the html what would appear is a legible ‘Sunny’ instead of any code. However, ligatures have to be set on browsers, using:

-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";


Design Systems – Laura Kalbag – @laurakalbag

Audio – AND – Slide for this session.

We have multiple devices and would like to have consistency across. (My obs: she gave a very nice presentation and selected great icon sets)

We have to have balance between Ideals and Practicality.

Core of the design system:

  • typography (the most-like item you will have on a website)
  • layout
  • shape/form
  • colour

Core design features

But also:

  • userflow
  • content strategy
  • tone of voice

What you are going to make it similar and what it would be differentiate in between different ddevices. She advocates same content no matter what device.

We should detach our design from the viewports, they will be different, and continue to grow different.

Do not stick to one tool, choose the best tool for the job today. Examples:

Mockup to create design ideas to developers, clients, etc. but mockup on different viewports – how the design “might look” at some different devices and points in time – (optimum points according to context).


RWD:The war has not yet been won – ElliotJayStocks – @ElliotJayStockshttp://elliotjaystocks.com/

Audio for this session.

Right or wrong directions? – people ditching responsive design because only 2% of their users use mobile (the article I believe he was quoting is https://gocardless.com/blog/unresponsive-design/. Speaker said it is not just about mobile, RWD is/should be design agnostic.

Risky, Wild Decisions – higher cost to companies/people in a way is an investment on yourself, on your skills, on the people in your team. Important for a designer to code too, at least the basic html/css to be able to test on browser.


Sofa talk with Laura, Elliot and guys from Clearleft

Audio for this session.

“the web has been always free” we’re starting to use it as before again, with the tools as advantage to go beyond to the default. Using the tools/knowledge instead of trying to retro-fit.

Mobile website can be the starting point for some business, but often (in their opinion) it can be replaced to a fully responsive site.

Careful in creating high expectations: creating the Photoshop mockups can be dangerous, high-fidelity and ‘perfect’, where something online will be different depending on the browser.

Font Squirrel and IcoMoon – subset of fonts.


Playing with Game Console Browsers – Anna Debenham – @anna_debenhamhttp://maban.co.uk

Audio – AND – Slides for this session.

Although devices are becoming ever more powerful and feature-rich, less capable devices continue to be developed as well. Paul Lloyd – The Web Aesthetic, A List Apart


The Anatomy of a Responsive Page Load – Andy Hume – @andyhumehttp://andyhume.net

Audio – AND – Slide for this session.

Contentencoding: gzip
Cache control maxi-age

Page load
Content, enhancement, leftovers
Script loading using
trade off on CSS
If (iswidedevice): Load larger CSS

Responsive server: relies on device detection,

Trade off on webfonts: progressive enhancement: support woff and fonts in local storge.

Trade off on responsive images: oocss, SMACSS, module patterns, systems, components – instead of media queries and they shouldn’t refer to media queries.
Picture element – use of image according to size of view port.

Lanyrd.com/ckwqy


What’s Next in StandardsLand – Bruce Lawson – @brucelbrucelawson.co.uk

Audio – AND – Slides for this session.

CSS device adaptation
@viewport {
Min width
Max width
}

Karen Luke website
Choice of filling viewport or not.

Flexbox
FixMyStreet hack without flexbox
Media queries level4
Pointer events spec smus.com/mouse-touch-pointer

John Hicks – http://www.hicksdesign.co.uk/

WebP lossless images 26% smaller in size compared to pngs and jpegs.
Image replacement:
Background-image: url(),
Background-image: image(.webp, .png),

Opera presto. Html5 video with media queries
http://responsiveimages.org@respimg


Sofa talk with Andy, Bruce and Anna

Audio for this session.

No body know better than audience.. They told a story that a blind man entered a skateboard store asking for a skate and sales person said: “how? why? you are blind!” but the skate was for his son. The store could potentially lose a client there…


Antiphonal Geometry – Owen Gregory

Audio – AND – Slides for this session.

Book recommendation: The Elements of Typographic Style by Robert Bringhurst

Device Spect ratio 3/4
Viewport percentage lengths
H1 font size 8vh
P font size 5vw
Article width 8vw

Chech ALA 362 – The Web Aesthetic


The Edge of the Web – Paul Robert Lloyd – @paulrobertlloyd

Main: is meaning, design is enhancement

CSS img replacement on CSS, image src in content, data image in decoration

Responsive Markup Patterns – http://paulrobertlloyd.github.com/responsivepatterns/

New layout for NY times – http://www.nytimes.com/skimmer/


In between – Mark Boulton

Audio – AND – Slides for this session.

Edges are knowable

Lots of people say “we broke the web”, we didn’t, we transformed the chaotic fluid web to something more comfortable.

To get rid of this discomfort forcing the fluidity. “fluid first design” then progressive enhancement and lots of tweaking.

The Responsive Day Out website has audio recordings of all 17 sessions (downloadable mp3) and also some of the slides from the speakers; the Lanyrd website have a complete coverage with pictures, audios, videos, slides and other blog posts from people that contributed to document this event.