UXOxford with Nathan Ford and Fabio Carneiro

Nathan Ford – Connecting aesthetics and UX by focussing on the content

“Designing for everyone is designing for no one”

How to communicate for different types of people?

Their team tried: Waterfall, then Agile and what works now is “everything all the time” (EATT)
With all that happens to cope with RWD, basic principles of design still apply (typography, colour theory, etc.)

1. Workflow – who is doing and who is responsible for RWD
2. Testing (then test, test, test…)

Examples of problems with grids: sevens, drifters, pinches, giving up
Remember – as designers – to use type, colour and form.

Check Grid Systems book.

A more natural approach to fluid layout…
Idea of ‘content out’:

  1. Start with content
  2. Construct your layout from the content out.
  3. Bind the content to the device (in meaninful ways)

Harmonious proportions (in book design) of content within the page –> ratios

Connecting content
1. Constraints (check sizes, proportions, aspect ratios, fonts sizes)
2. Patterns (what type of site you are building?)

build content with relationships instead with columns, using ratios.
Types of ratios: “Golden ratios”, 12 orthogons Quadrat (Square/Even) – 1:1 <--- many others here ---> Doppelquadrat (Halves) – 1:2

Check article: Composing the New Canon: Music, Harmony, Proportion – Owen Gregory

The formula: target/content = result (a further explanation/examples by A List Apart)

Example of relationship: text and image (example 27% / 73% approx ratio)

Using ratios instead of grid. Use ratio in general, then apply again for the internal/child elements. So, apply ratio for main layout then apply again for aside elements, other posts or highlights.

Connecting device
1. choose a ration and scale based on your content demands
2. build content grids for patterns
3. divide available viewport space with layout grids
4. (missed that one 🙁 )

Aljazeera.com.tr/?gridset=show (cmd + g to show/hide)

Chaparral website/layout created with grid based on height of lowcaps and highcaps letters and the delta in between them.
The font: Chaparral – https://typekit.com/fonts/chaparral-pro
The article: “Deriving layout from your typeface” http://blog.typekit.com/2014/02/26/deriving-layout-from-your-typeface/


Fabio Carneiro – Hard-won Lessons in Email Design
Neapolitan – Mailchimp new tool, with drag-and-drop ‘components’

So, why bother with responsiveness on email?

91% of people in EU own a mobile phone
majority of people (67%) send and receive email via mobile

30% of world have mobile internet

Incredibly fast mobile growth, need to adapt and be responsive for this demand.

User experience in email

“Cardinal rules”
Design within constraints
Email readers not supporting latests technologies (many of them strip headers, css, allow only inline styling)

Design for distraction

“one eyeball, one thumb and at arms’ length”

Making the experience easier and less interrupting for people, helps transmit a clearer message.

Design with purpose
In social media people ‘come to you’ for a message; in email, they trust you that you won’t fill their inboxes with ‘garbage’ and and transmit a focused, concise information message and sometimes, well-crafted images.
Examples of email types: selling or offers (sales/announcements usually with images); call for action (subscribe/attend/etc); reading emails (blog posts, news, etc.); transaction email (very specific finite amount of data, but with all the relevant information, appropriate – no space for jokes

Design for email
Do not bloat email with headers, navigation, loads of footer links and sharing elements. Make it simple, focused, related to interest of recipient (if possible – personal).

Building responsive emails

Modular pattern-base email – reduces the likelihood of email will break, reduce the amount of CSS.
Fabio maps out patterns (sketches) that have purpose on emails. He starts with scaffolding, in a Zendesk example we could see a header with company logo, social icons, then a ‘free form’ in the middle that any component/module can be inserted and footer has contact information/unsubscribe. Minimal, clean and uncluttered email.

Mobile first in email – most email clients don’t support media queries and/or max width – he worked with a table container with 100% width (not supported in Outlook), solution was to use conditional comments with a fixed width. Issues in OS still (Apple mail) that he solved with media queries (since it is webkit).

Table layout shifting – in emails you cannot use floats or positioning, to solve you can use a hack. Example, to use two columns on email, each column would be represented in a table, one after the other with their own width. The ‘hack’:

@media only screen and (max-width: 480px){
     table[class="templateBody"], table[class="templateSideblock"]{
display:block !important;
width:100% !important;

Email design resources
Email Template Reference from MailChimp – http://templates.mailchimp.com

There is also a github repository with email templates https://github.com/mailchimp/Email-Blueprints

UX newsletter on mailchimp – http://www.theuxnewsletter.com

From SmashingConf, another templating resource that was mentioned: ZurbInk – http://zurb.com/ink/

Litmus community – forward emails to various email clients and send you back screenshots – https://litmus.com/email-community

Event link: http://www.meetup.com/UX-Oxford/events/165973222/

Bunnyfoot – @bunnyfootsays

Oxford Geek Nights 35

Pre-SmashingConf talks!

I loved this OGN. It was reduced number, actually controlled and it gave more space for people to talk, mingle, “network”, and you could actually ‘breathe’.


Responsive Redesign Projects
Joe Leech – http://joeleech.net/

Big clients/hotel projects. Bigger customers, higher numbers and bigger responsibility about costs (in a multimillion company a small error/problem could cost millions).

He suggests: conversion numbers in between non-responsive and responsive -> get closer to a parity. (A/B testing, etc.)

Introduction To Digital Adaptations
Paul Boag – http://boagworld.com/

Need for helping and advising customers changing mentality to have web not as aside tool, but as a business motivation and more at is centre (core maybe?).

He suggests: Help customers/company to ‘integrate’ instead of being the ‘code monkey’.

How I Put The Domesday Book Online
Anna Paul-Smith – http://anna.ps@darkgreener

Created a great historic map with added metadata based on the Doomsday Book – http://domesdaymap.co.uk – using geodjango

A Fresh Take On Content Management
Tom & Ollie – from wagtail

Created streamlined, clear-looking CMS, using Django.
“NIH – not invented here”


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

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.


How to think like a content strategist

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?

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.


UX Hacks
by Jan Strutek – @jansru

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

“desire to improve things for better”

What UX hacks do you know???

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

Read and apply “Getting things done” – David Allen

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)

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

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

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)

when sharing screen, remember to switch off

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

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?
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

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

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

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: