Respond17 (Sydney) was held in the light-filled Level 1 Conference Centre at the Maritime Museum.

#respond17

Old school jump menu

Image credits

  • The event was sketchnoted by Matthew McGain (sketchvideos.com.au) and he generously gave permission for me to use photos for this post. If you like what you see, please give Matty a shout. Note that I’ve used quick snaps from a mobile phone here, not high-quality scans. The notes look much better for real and when properly photographed!
  • Other images as per embed captions, or in some cases from the presenters’ slides.

Unofficial themes

  • questioning the limits you perceive
  • experimentation and pushing the boundaries of CSS
  • accessibility! this was baked in (ha ha)
  • conversational UI where less is more
  • animation as communication

Day One

Vitaly Friedman: New Adventures in Responsive Web Design

“This is not best practices… this is maybe bad practices! This is new stuff.” Smashing Mag has been getting a redesign; and they have done a lot of work on the technical side to get the result they want.

The presentation will be RESPONSIVE ADVENTURES... this will be a game, who wants to go EASY/MEDIUM/HARDCORE? (crowd overwhelmingly votes HARDCORE)

Level 1: Storytelling.

Design process is weird because it’s for people who are also weird (squiggle process). But it’s really more like a set of paths and dead ends.

Illustration - usual squiggle design process, vs a more structured paths and dead ends process

On the web today, it all boils down to one single thing: outstanding storytelling through great art direction.

When we think about storytelling, we tend to think of fairy tales and not the interface of the Uber application. “I don’t feel like I’m involved in the story…” But then with Mailchimp, Vitaly does feel involved, they have a really engaging brand. He’d switch from Uber without a worry, but leaving Mailchimp would be emotional and need a really big motivation.

We have a lot of commandments about design. Thou shalt not… thou shall… your design process ends up bouncing between all the rules. But can we break the rules and make something memorable?

Example:

  • Bloomberg Businessweek Design 2016 – madly animated, breaks all the rules… the conference sold out in six minutes.
  • aftershock.cc – it’s memorable, you don’t have to go to that level but take some inspiration from breaking out of the rules.
  • hansbrinker.com/amsterdam – terrible hotel that made use of being the worst hotel, they hired a comedian to write stupid copy and just own it.
  • storytrail.co – they take one thing, the line, and use it everywhere. They build a design around that one unusual feature.

Level 2: the system

We want wonderful design, but we also have problems like supporting 7 different languages. How do you support that? Simple things like dates can change per language. The language may be LTR or RTL. How do you make all this work? If you optimise for any one language you will get problems in another.

(slide of very-long German word breaking out of a box)

The crucial asset is building “neutral”, configurable components which can be easily extended and adjusted.

BBC News used .json files for configuration, capturing things like the language, the direction, the social media networks to show. Their SCSS had things like…

$russian = true;
...
@if $russian {}

Contextual style could then happen based on language direction, known quirks of the language like being particularly short or long. They had a flip mixin that could choose things like left/right floats.

Bonus level for extra points

Who has played with the battery status API? It lets you work out how much battery the user’s device has left. You can load without animation and video if the user’s battery is low. You could have a 'night mode’ for low battery && not charging.

Level 4: hover

Is there a way to reliably detect if the user can hover? With CSS4 there is a hover media query which works out the primary input. Together with supports you can tailor your styles to the user’s device.

Level 5: selectors

We know the fancy CSS selectors but are we using the simple and powerful things like :not()?

Example: cats in boxes showing primary/secondary/tertiary hierarchy… uses the quantity selector (quantityqueries.com)

Selectors start getting hard to read… remember that they are parsed right-to-left!

li:nth-child(n+6)

...six or more items

li:nth-child(n+6):first-child ~ li {}

...adding the general sibling selector allows you to find the condition then select everything around it.

li:nth-child(3n):first-child ~ li {}

...find the sets divisible by three

Range selector – use multiple nth-child selectors to find a range of elements.

Progressive Web Apps

There are things to consider, eg. offline-first might be a bit weird, but nothing will beat offline storage for performance. People probably don’t really expect your website to work offline, but they’ll like the speed.

Most people don’t install lots of apps, they have a small number of apps and then they don’t have room. Also retention of apps is low – people often stop using an app after a couple of weeks. Mobile web usage is growing twice as fast as app usage.

examples of good PWAs: Flipkart, Konga, eXtra Electronics, 5miles, AliExpress. Washington Post saw 5x increase in user engagement.

You should ask – should you switch your design language on each platform? Should iOS and Android look the same? Should you go fullscreen, standalone or leave the full browser chrome (display-mode)?

Stat to remember: 2/1000 of mobile users tap share buttons. Two out of a thousand.

But while not every user will add your app to their homescreen, everyone who visits will install it and get the service workers.

Be really careful about using push notifications – most people (52%) find them annoying!

Service workers

Service workers behave as a proxy. They take very little resources to start up.

A common offline strategy is quite simple: explicitly cache static resources, cache the homepage in case network fails, for other pages have a 'fallback’ offline page.

You just need to register a service worker and define its scope (probably / so it applies everywhere). Install the service worker. Cap the cache of your serviceworker.js at 24 hours. Populate offline cache. Then activate the service worker. Now you are ready to intercept requests, with the fetch event.

Search: “pragmatic guide to service workers”, it has lots of great copy and paste code; “frontend performance checklist 2017” on Smashing.

the end

Don’t be afraid to get into this. Go out and break the web, so we can repair it in a few weeks!

@smashingmag

Rebecca Hendry: Design Systems & Dreams

Rebecca leads with “full disclosure”: she is not a developer, not a designer… but an enabler! She doesn’t do those jobs but is well versed in the challenges of them.

Talking about the way Westpac GEL got its start, how it happened and what’s next.

The start

Westpac once had it easy, like most of us… one brand, one tiny little website. Fast forward to now with six brands, each with their own visual identity. Plus the world and the web had changed, with multiple operating systems and so many devices.

Trigger points:

  1. They were inspired by a talk about bbc.co.uk/gel (yes they nicked the name ;))
  2. Hired a Digital Brand Director – it was the first time Westpac had someone dedicated to the problem

How to start? Top down, bottom up..? Top down is when you have budget,buy-in and leadership support (BBC Gel). Or you go bottom up like GE, start with the developers and work up through the layers.

The Westpac team was swamped with work as it was, so finding time was hard.

They knew they needed five things:

  1. skillset
  2. attitude
  3. toolset
  4. support (executive buy in)
  5. projects to apply it

They dreamed of Westpac GEL (Global Experience Language).

They had all the skills except a frontend developer, so they had a go at using Bootstrap (v3, 2013). It proved to be a good way to get the project off the ground, even if they eventually hit insurmountable constraints.

They started with the classic base: colour, typography, iconography and grid.

What worked?

  • just start – they had just enough of everything to get going, don’t wait for perfect
  • get your hands dirty – use it for real, apply ideas to real things
  • work out who to add to the team next

What didn’t work?

  • asking people to change the way they work – you get “pockets of appetite” but a lot of resistance, try to engage people at the beginning
  • co-iterate – not co-create, just get something out and iterate with people using it
  • not starting by creating an end-to-end story which takes the full situation into account

Staying the course

The system was up and running, it was time to sell the idea up the chain.

So they went out and sold its efficiency and quality, cutting through arguments and getting things to market. They talked about the vision, showed cases where it was working for other companies people respected, and talked about the risks of not doing it.

While the team felt they’d made a compelling case, it didn’t stick. People needed to hear more about the roadmap of getting there. How to bring brand, digital and tech together.

People asked is it really that urgent? Where’s the roadmap? Who are you telling us how to do our jobs?

So they moved on with 2.0 of the team, brought in a frontend dev and a product owner.

Atomic design was a great anchor point – it was not just a little team telling people what to do, it gave an industry framework to refer to.

They created a website and started building their own framework to replace Bootstrap… The Blender. They also created starter kits for both devs and designers. It was important to create resources so other teams could self-serve; and become part of a community of people using the system.

They linked up with existing communities within the enormous Westpac organisation – finding communities of practice, generally running the project on the open source model. They ran workshops, ran a community on slack, started taking contributions.

People did feel GEL would be a constraint on creativity.

The Sell 2.0: living design system (and shared toolkit) + collaborative work practices (to design and build quality UI) + sponsorship & buy-in at all levels (and a roadmap across programs). Design Quality was elevated to be a key area/team within Design.

What worked?

  1. had a destination
  2. the system was modular and simple
  3. had recognition & the right mix of skills
  4. listened more

What’s next?

  1. adoption
  2. distributed ownership (better than the 'solitary overlord’ approach) – adding a middle band of champions between the core team and the implementation teams
  3. end-to-end 'owned’
  4. your ideas!

Recommendation: Team Models for Scaling a Design System – Nathan Curtis – good read if you are trying to scale things.

They have a good mix of optimists and pessimists – balance is good. You need both. This work is hard and some days are demoralising. They have a saying “don’t let the dream die”. You got this!

Michael Taranto: Building a ubiquitous design language with components

Wireframes only share the outcome of a design process; and they ask a developer to reverse engineer the idea from a few pictures. They need to work out the purpose and semantics, make it accessible and responsive. It tends to result in inconsistency.

Focus on building a common language, the markup that will be used at build time. Largely this is expressed by abstracting the markup away and building components. Even then we tend to focus on widgets like buttons and inputs and not so much on principles.

So Michael’s team are trying to capture the designers’ intent and not just the outcomes.

Remove the pixel translation layer – get to the bottom of “what’s not right?”. Most of the build-time discussions were about spacing. So they set typography first.

What does a 21px heading on 27px line height really mean? It’s part of a type hierarchy scaling on a base value. It’s not 21px, its 2.1 x base size of 10px. The line height was not 27px, it was 3 x 9px row height.

This is based on extracting the design principles and not just the design outcomes. This means the code can be following the right paths. They can extend the language without talking about pixels – px only exist in the compiled output.

Then you realise “CSS does not speak design”. Line-height means something entirely different in CSS than it does in Typographic Layout. True typography measures line height from the baseline, so the height isn’t right – leading to build-time “nudging”.

You can pull this information into SCSS variables: capture the descender height and nudge the text down to where the designers expected it to be. In EM units, Roboto has a descender height of 0.15em.

open source library to do this: Basekick

Now the conversation is happening in design principles, rather than pixels. Component interface becomes your design language. It’s the way to form understanding between teams.

This applies to colour as well – what is the intent of some green text? It was being used to reinforce positivity. “Positive” beats “green” as a design language.

Controlling the snowflakes: people always think they have a special case. To begin, Seek are driving consistency by default, and pushing variation into design discussions that can be mainstreamed.

What’s worked? Components everywhere – small, composable components. Cross-discipline pairing.

What’s hard? Naming things is hard. Justifying the 'why’ is even harder.

seek-oss.github.io/seek-style-guide if you are interested to see their work in action.

@michaeltaranto

Adem Cifcioglu: The Anatomy of an Accessible Auto-suggest

Every framework out there has an autocomplete, but very few are accessible.

Step 1: understand the requirements

Search field needs:

  • a label element
  • role="combobox"
  • aria-autocomplete attr
  • aria-owns attr
  • aria-activedescendent attr

You need to manage the keyboard access: make sure you can use it with keyboard, that there are visible focus states, use arrow keys for moving through suggestions (highlight as you go). Press enter or right arrow to select an option and close the list; arrows should wrap inside the list; pressing esc should close the list and leave what’s been typed in the input.

Suggestions must be directly after the input field both visually and in code order; and if no suggestions are available, the list must not appear. The number of suggestions should be announced to screen readers.

List needs:

  • role="listbox"
  • each suggestion has role="option"
  • selected has aria-selected="true"
  • (check full codepen)

Step 2: understand the code

(a walkthrough to see how all the pieces relate – if you are reading this later just go read the code :))

Used to announce info: #announce.visually-hidden[aria-live="assertive"] (be really careful with aria-live!)

Demo

Adam ran video of a bad autocomplete and a good one – the difference is extreme, most implementations simply don’t announce the autosuggests, many will block the input.

Code: ademc.me/respond17

If you break it please tell Adam so he can fix it and share it!

@ademcifci

Mike Riethmuller: advanced fluid typography

In some ways this is an alternative approach to responsive design. Move past breakpoints and media queries and look at things like relative units and the power they bring.

We do tend think in pixels. Everything is an abstraction of px! On the base of 16px we think of 1.5em as 24px.

Limitations shape our thinking. We also perceive limitations that aren’t really there. Like cats who will sit inside a circle of tape, we just sit where we think we have to. We take the limits of previous technology forwards into the next technology, just as early TV sounded like radio.

So it takes effort to break the paradigm of pixels.

Let’s start with some browser fundamentals. Unit types and values in CSS. There are 27 css units, but we mostly use about 2 or 3.

Browsers break down CSS in a three step process (look up “CSSOM”):

  1. specified value – author specified
  2. computed value – resolves the specified value as far as possible without rendering the page
  3. used value – used in actual rendering

Understanding calc() – it allows us to do simple calculations in native CSS (normal order of operations applies). Two key rules for calc():

  1. you can add and subtract units with a similar type (eg. length units, calc(10px + 2rem) resolves to 42px)
  2. you can multiply an divide real numbers with CSS units (eg. calc(3 * 2rem))

Which brings us to responsive typography. Existing techniques aren’t ideal – eg. relying on breakpoints.

Viewport units are different – vw, vh, vmin, vmax. On their own they can be difficult, eg. text becomes too small or large.

But you can set a minimum size via calc: calc(18px + 3vw) and you can set a max size via a breakpoint using font-size / (viewport units / 100) to calculate the breakpoint.

We can do better, using a function in CSS.

You can apply this to the HTML element, then selectively disable it simply by applying a fixed font size to a class or other selector. Or, you can set the fixed width to HTML and enable fluid type with a class. To make life easier you can just use a mixin in SCSS.

Now we have fluid type, we can move on to Fluid Modular Scales (eg. where each heading level is 1.2 times as large as the last).

To do this, we use a modular scale for small and large screens; calculate the values with a tool like type-scale.com or modularscale.com … then the scale will fluidly change as the screen size changes.

This technique has very high browser support. You can set a fixed fallback if you want to; you can add +100% to fix some bugs with mobile Safari and IE10.

This works with things other than typography. You can scale images and layout. Purely for fun, you can even change colours based on viewport.

Interpolation in design…

Media queries generally reflect limits of a design, that is where will the design stop coping with the content. They are fixed points along a scale, where some of the problems change more fluidly.

Mike talks about viewport sizes that apply higher or lower levels of pressure on the design – when things are in the ideal range, things look great, as you move out of that ideal range there is increasing pressure on the design. Then you hit a breakpoint and change to find another sweet spot.

Variable fonts: the future of fluid typography. Variable fonts allow you to scale the glyphs/shapes/weight of a single web font.

Article: Live Font Interpolation on the Web

Mike has an open issue with the CSSWG for a native interpolation function in CSS.

It’s easy to be caught thinking about new tech in the frame of the old tech. Remember to look for the new techniques, to break away from perceived limitations.

Always question constraints. Think about your intentions and how available technology can help you reach your goals.

@mikereithmuller | madebymike.com.au | Responsive typography codepens

Mandy Michael: the power of three (text effects on the web)

It’s easy to forget the power of CSS. There are three really powerful things to use:

  1. data attributes
  2. pseudo elements
  3. clip-path

We can make a copy of our content available in a data attribute: 

<h1 data-heading="hello">Hello</h1>

Then we can add and style pseudo elements:

<h1 data-heading="hello">
::before
Hello
::after
</h1>

h1::before {}

This is the base of a range of techniques… see Mandy’s codepen for demos

  • Split layout (where text colour changes size 50% in the viewport)
  • Fractured
  • Reflected text
  • use multi-layered fonts to create further text effects
  • combine emoji…!

You can do more cool effects with clip-path. This allows you to draw a shape onto an element and then screen out/clip the content in that shape.

twitter: mandy_kerr | codepen: mandymichael

Brett Snaidero: SVG animation

(tech heavy, check the codepen!)

Will look at SVG, inline SVG, elements and attributes of SVG, styling them with CSS and animating them.

SVG is awesome because they can scale infinitely. Just as designers needed something to scale up to billboard size, we need things to scale to the viewport. SVG looks and feels similar to HTML and you can put it directly 'inline’ in your HTML. You can work with SVG elements the same way as HTML elements – inspect them, style them, use JavaScript on them.

<svg viewbox="0 0 10 10"></svg>

This sets up a 10×10 grid (0,0 at the top left, 10,10 at the bottom right.

Elements inside the SVG are placed according to that grid – knowing this syntax makes it easy to write SVG by hand… although in most cases you probably will make the original in some kind of software then just tweak it later.

Once an SVG is available inline, you can apply CSS eg. via a class: 

<path class="star" d="..." />

This is really powerful when you start using animation and transform.

Animating the stroke (border) of SVG elements allows a lot of amazing effects, like loading bars; animated icons; etc.

Creating the animated hamburger:

  1. created a graphic with three paths that are the 'rails’
  2. use stoke-dasharray and stroke-dashoffset to animate 'lines’ along those 'rails’
  3. add some transitions to get easing and control the speed of the three lines

SVG has a lot of advantages including scalability, small file size, ability to make them accessible and so on. There are lots of JS libraries out there to help if you want to use JS; and they provide nice things like easy tweening.

Think of SVG as an extension of HTML which allows you to do more in the browser. It’s easy to read and understand, yet it’s really powerful.

brettsnaidero.github.io/svg-animation-slides

twitter & codepen: @brettsnaidero

Rachel Nabors: The Web In Motion

Let’s play a game called “app vs site”!

Web apps have all kinds of stateful animation, but sites often vary from apps. They may have high fidelity of typography and colour but still vary a lot with animation, or the site may simply have no animation at all. AirBnB and Amazon are examples where the animation varies a lot.

It is possible to have a 1:1 app:site relationship with animation – Duolingo does a great job, even though the form factor is different the experience feels the same as well as looking the same.

Rachel runs webanimationweekly.com (and its slack channel) which are a good resource for getting started with animation.

Before we get to animation… let’s consider the brain! Well actually first a little grounding for animation, then the brain.

At its core, animation is the visual representation of a rate of change over time. It’s a visual doppler effect. You can get this effect by speeding up a sound (example video of a zebra crossing with beeps that speed up when you need to hustle).

Animation can be used to reinforce relationships, structure, cause & effect… in UI this helps the user understand the experience.

Meanwhile the web is working purely with jump cuts. No animation, things just appear and disappear. This makes sense because when the web was being built, computers didn’t have the grunt for lots of animation. But it hasn’t caught up in the decades since.

So, the brain. Cause and effect: when one thing follows another, we think the first causes the second. We also mentally fill in the blanks of transitions. Because we stare at screens all day, we can understand a jump-cut dropdown… but it makes the brain work.

If animation is provided, the brain effectively offloads it to the visual cortex. The brain’s GPU. It’s the high road through the brain. It means you can handle more information and tasks, because your brain is not actively processing as much.

(This is a simplified description, there are deeper details about the way the brain works – but just go with it ;))

Animacy: how “alive” something appears to be.

Human attention can be grabbed by two things: colour and motion. We are deeply wired to not eat the dangerously-coloured things and to notice the movements of dangerous things approaching. To abuse this, make an ad bright and jiggly!

We are more likely to notice a colour change in the centre of our field of vision; and more likely to notice animation at the edges. So in the middle of your app, it will be better to use colour. On the edges, animation.

But don’t overdo anything: New Yorkers do not notice the overwhelming amounts of animation at Times Square any more. When everything vies for our attention, nothing commands our attention.

A brief history of the web: in 1996 we had Flash, then in 1999 we had SMIL... then a decade passed… then in 2009 we got CSS animations and transitions. Then we got the infamous letter from Steve Jobs which basically killed Flash. Meanwhile Microsoft decided three APIs was too much and wanted to replace SMIL+animation+transition with the Web Animations API. It is good, but it took many years; and SMIL died out in the meantime.

The Web Animations API has awesome stuff in it like the ability to sync multiple animations; seeking fowards and backwards along a timeline…

rachelnabors.com/waapi for details…

Support? It’s happening, please keep voting for Edge features on uservoice… in the meantime there’s a polyfill (web-animations-js).

So animation is an official part of the frontend developer toolkit. Firefox and Chrome have good dev tools for animation.

What else can we take from animation to the web? Storyboards. They are used in film, why not for the web? Animatics – the frames from a storyboard just strung together with a soundtrack. Note they are not deliverables or good for user testing. They are great for buy-in and for explaining things. You need prototypes for that.

Great prototyping tools:

Systems like Material Design showed animation could and should be a core part of a design language.

...

Animation belongs to all of us now.

Let us set the web in motion together.

@rachelnabors | rachelnabors.com

Day Two

Cordelia McGee-Tubb: The Great Accessibility Bake Off

Accessibility is about making products, services and spaces that everyone can use and enjoy in all contexts, regardless of their abilities.

We tend to think about things in four dimensions: visual, motor, auditory, cognitive. This includes situational and temporary disabilities – someone in a loud bar has the same problems hearing their phone as someone who is hearing impaired. Trying to use a system in a language you don’t know is a cognitive problem.

We should consider everyone’s experiences from the start and not try to tack on accessibility at the end… it should be baked in, not added on. You can’t add the blueberries to a blueberry muffin after you bake them! If you cram blueberries into a baked muffin, you end up with a mess.

The web is full of buttonish things, where people create a clickable div and have to cram in lots of extra markup to make it work like a button. Just use the button in the first place!

Quick introduction of the Great British Bake Off, a show where amateur bakers compete in a range of challenges (signature, technical and showstopper) to be the best baker. But they are really competing with themselves rather than each other, it’s a quite charming show.

So we will be doing the Great Accessibility Bake Off, considering a set of users with different needs – mouse, touch screen, braille input, voice control, laptop, single-button clicker.

Main ingredients of an accessible UI:

  • semantic HTML
  • a dash of ARIA
  • alt attrs
  • names for all interactive items
  • sufficient text contrast
  • mouse/keyboard parity

Semantic HTML is the foundation of accessibility. If you just send your users divs, spans and as, you really aren’t giving them anything meaningful.

As we move into web apps, plain HTML doesn’t handle 100% of the complex interactions we now have. That’s where ARIA comes in – it helps you describe rich interactions. ARIA lets you communicate role, state and properties to assistive tech when HTML alone won’t suffice. The first rule of ARIA is don’t use it if you don’t have to. Think of it like cinnamon – it’s good, but not if you try to eat a whole spoonful!

Alternative text is the next piece. Images with contextual content should have the text you’d want in a text-only version of the page (alt="Home"), for decorative images include an empty alt (alt="") or apply aria-hidden="true".

Criteria for the accessibility bake off:

  • Does it look amazing?
  • Does it function as expected?
  • Did you over/under-engineer it?

Test everything with…

  • mouse
  • keyboard
  • screen readers – beware that specific combinations make a big differences
    • NVDA+firefox
    • JAWS+IE11
    • Voiceover+Safari
  • grayscale mode
  • real users!

Signature challenge: make an accessible form

(on the show this is making a simple thing really well)

Simple subscribe: text input, email input (required), checkbox, button. You need:

  • visible focus indicators
  • label associated with its input with the for attr
    • placeholders are not labels! they are low-contrast, they look like the field has been pre-filled, they disappear when you start typing (puts a lot of cognitive load on people, and most screen readers don’t make it available after you start typing)
  • associate error messages with aria-describedby linked to the input by ID
  • put an icon on the error as well as changing the colour, so people in grayscale mode see something

Technical challenge: accessible tree view (file system)

(on the show, this is a challenge where contestants get a recipe with pieces of information missing; so they need to fill in some blanks to create the final product)

Tree views really don’t have markup for this, but ARIA has a tree view! W3 provides a lot of recipes, including this: http://www.w3.org/TR/wai-aria-practices#TreeView

You can still hit bugs though; and now you have to determine where the problem lies –

  • your code
  • the browser
  • the screen reader

This can be hard to debug. Good resources:

When Dropbox followed the W3’s recipe, it worked everywhere except Safari+Voiceover – the arrow keys were not reading things out. They did a lot of reading and found each item needed an aria-label.

Showstopper challenge: drag’n'drop

(on the show, the Showstopper is the grandest piece – a huge and extravagant creation)

Drag and Drop is really challenging. It has a huge amount of things going on. Thankfully it’s not really that hard, if you simply think of it as a way to move something.

Drag and drop patterns usually fall into one of three patterns:

  • drag something into a bucket (file uploads, kanban boards)
  • rearranging lists (ranking something)
  • move an element on a canvas (less common on the web, but likely to happen more in future)

Kanban board: focus the card, press space/enter to open a menu that lets you choose which column to move the card into.

ARIA 1.1 has deprecated aria-grabbed and aria-dropeffect… although don’t worry too much as they’ll probably keep working. It seems the ARIA authors are hoping to rely on the native drag and drop API

Good article: sitepoint.com/accessible-drag-drop

Dropbox also gives users an alternative interface, where they click “move” and simply choose the new location in a modal.

For positioning on a canvas you can use arrow keys, or provide inputs for x/y coordinates.

Give people choice and flexibility. They will pick the method that works for them.

So is this all great?

We need to talk to our users and find out if they are happy. Test and review. Ask people who really use this whether it’s working for them.

@cordeliadillon

Q&A

  • Lots of apps use custom keystrokes as keyboard shortcuts – how do these work with assistive tech, if at all?
    • works well but be consistent with general conventions
  • Is there a caniuse for ARIA?
    • not yet… would be wonderful if there was, there are some resources for specific attributes
  • If you have images with a lot of technical content, eg. a graph – what’s the best way to label that?
    • there is a longdesc but there is a lot of politics around… (Adem says regardless of debate, “it works!”)
    • you can also just link to (or reveal) a transcript, which is great because anyone can read it and it’s searchable
  • Do you think we are doing enough to tell people that accessibility options are available… are there any good resources that we can provide?
    • no, in general we are not. There’s a lot of discussion in game accessibility about this… xbox team have done a lot of work on a11y and also put out information promoting that. Other teams do the work but don’t promote it.

Wayne Thompson: Designing Our National Font

Wayne has been working on a typeface for the ABC, “ABC Sans”. Trying to capture Australia’s identity in a font is a difficult challenge!

Wayne has worked on type for decades, inspired by a Letraset book he ended up with as a kid. He studied other things but eventually carved out his own job as a typeface designer. There really isn’t a course you can do – while you can learn typography, there’s no formal way to learn typeface design.

You’ve just gotta be a really stubborn bastard and do what you want to do.

The brief

The brief was extensive: a 13-page document, which is unusual in the field but not so unexpected from the always-thorough ABC. They’d even interviewed Australian prominent designers asking about “the Australian style”.

There were three key elements of the brief:

  1. how might the ABC make a coherent experience for all its properties?
  2. how could this typographic system encapsulate Australia’s eclectic and multicultural identity; and express a contemporary and relevant ABC?
  3. how can ABC Sans be a major brand carrier for the ABC?

This brief is obviously difficult and a little terrifying!

National identity

So what is our national character? What defines us as a nation?

Wayne asked people on Facebook and got lots of aussie words (straya, carn, maaaate, thongs…) and 99.94 – Bradman’s batting average.

Most of it wasn’t useful but some key phrases started emerging, including “wide, brown land”. The outback is a unique identifier, although since most of us live on the coast beach imagery is at least as relatable as the outback.

The key thing about both the outback and the sea is a sense of space. The endless sky. A place that still has more land than people.

Over it all, an impossibly open sky, dwarfing everything. – Tim Winton

Three characteristics that Wayne settled on:

  1. open space
  2. proudly inclusive
  3. larrikin element

Also looked at other typefaces supposed to represent a nation’s character. Not a lot, but a few…

  • Sweden Sans (soderhavet.com) – it has a principle of lagom – balance, avoiding excess. The vertical bar in the Q is balanced.
  • Johnston, the typeface used for the London Underground – not intended, but it’s become strongly associated with things that are very English.
  • Helvetica – known as being very Swiss.

Start drawing

So where to start? Just start drawing. He had ideas of Uluru shaping caps and a strong baseline to show 'connected to land’. They weren’t good ideas, but they were part of the process. You have to meander your way to the final result, it’s never a straight path.

Things started to clarify:

  • inclusiveness: open rather than closed apertures
  • connection to country & open space: wide measure, generous proportions when compared with other fonts
  • the ABC’s logo is a lissajous figure, which gives a curve that could be used on some letter shapes

He sketched a great deal on paper, leading up to clean alphabets on A3 tracing paper.

Wayne kept all of this in a sketchbook so he could show the process later. He finally presented this to the ABC and found himself being filmed for posterity. He was still terribly nervous but got the immediate green light to go ahead and make the typeface!

The build

At that stage the first vectors were created and tested with real content. Issues came back that the wide measure wasn’t efficient; and the type colour was inconsistent (some areas would look darker than others). The double-decker g had to go. Some of the rounded corners had to go; along with faceted corners on some letters.

So most of the ideas about national identity were being dropped in order to make a usable and legible typeface. The wide measure and open apertures had survived. This does hold up, the typeface feels more open than Helvetica for example.

Legibility hits issues like differentiating I, L, i, 1. The ABC originally requested a zero with a stroke; that was eventually dropped for a differently-shaped character without the stroke.

Legibility also demanded a large x-height, ascenders that go above the cap height, good counters and apertures.

Accessibility – type being distinguishable for people with dyslexia, for example. The spurs on the p/q and u/n are different so they are not mirror/flipped images of each other.

Lining vs non-lining numbers – ABC Sans has both. Wayne may just possibly prefer non-lining numbers for their visual appeal. Lining numbers are common as they are essentially fixed-width, meaning numbers will line up with each other.

The J & Q dilemma: should they have descenders or not? The typeface had to include inline J and Q that did not extend out of the line.

The final steps

There was a full day workshop with the entire design team, where most people on the team contributed something to the final shapes.

The final typeface was created, moving shapes from Illustrator to Fontlab. At this point he had to fill in the entire character set; and then create all 11 weights of the font using interpolation to set the basics, then a manual review.

The ABC also needed some specialty weights like the italic, bold condensed, rounded and rounded bold (for kids programming).

Then three serif weights (ABC Serif) were produced for internal text use. The serif font shares a common DNA with the sans.

Spacing between letters is set, then kerning variations (it has 777 kerning pairs with adjustments). Some of this work is really tedious! But it results in a font that has good reading rhythm.

In use, and finding issues

So finally the font goes into use! You start seeing it in the wild; and on retina screens it looks awesome. It went into apps, websites and finally started filtering onto TV screens. On HD TV it looks good, on older TVs… it doesn’t look so good.

A couple of letters will need a shape revision to help with issues discovered as the font went out to every possible place it needs to be used.

The “li” combination has spacing that feels a little wrong.

There’s also a lot of issues the font itself can’t fix. The non-lining numbers interfere with the rhythm when used in a paragraph. Sometimes people change the spacing between characters via CSS, so the spacing of ligatures no longer makes sense.

The response

From the public, the response has been really positive.

However since all Australians feel a level of ownership of the ABC; and there’s been some commentary about the ABC 'wasting money’. Chris Kenny had a dig about using non-system fonts and wildy over-estimated how much money had been spent to product ABC Sans. Sen James Paterson pulled up in front of the senate estimates committee.

There’s a difference between public organisations being accountable vs being micro-managed. The cost of a custom font also needs to be considered against the cost of licensing a typeface for many thousands of employees.

But anyway, Wayne’s mum likes it.

Conclusion

It was exciting, it was a privilege to work on the national typeface. The ABC design team were truly collaborative. The success of the end product was a team success.

Does it truly capture the national character? It’s probably impossible to tell, although Wayne feels like it is imbued with some level of Aussieness.

The best font joke ever

The font should have included a Reverse Italic…. perfect for the ABC because it leans to the left!

They didn’t go for it.

Mike Sharp: Designing For Growth

It’s nearly lunch… won’t mention food… so, lettuce start with the hamburger menu!

All established patterns were new once. Who knows when the hamburger was first used?

(People thought it appeared in the last few years.) Turns out the earliest known use was 1981, designed by Norm Cox for the Xerox Star.

Growth Design

What is Growth Design? Using metrics and data to inform the way we design. It does not replace our gut, but it’s a way to include qual and quant data in the process.

So you start with the experimental hypothesis:

We believe that [this change]
will result in [a specific, measurable outcome]
because [we have a rationale that says..]

Qualitative and Quantitative…

  • Qual: user testing, prototypes. Great for highlighting problems early in the process.
  • Quant: A/B test between the existing and the new shiny version. Good for validating if a change 'worked’.

Five Fs of Design

  • Foundation
  • Fast
  • Feature
  • Facts
  • Future
Foundations

Set up your pattern library, baking a11y in, tone and voice, design system, analytics. Getting things like accessibility baked in early is critical. It’s a good time to set up analytics. This phase sets you up for success. Many people start with Google Analytics, but it doesn’t give you details about how people are using the product. Something like Heap will capture everything. So start by working out what you actually want to track. Check out the Big Ol’ List Of Tools for options.

Fast

Going with your gut, using established patterns, fast iteration. Just get things out there. You don’t have enough users at this point to do decent quantitative analysis. Nurture those users you do have – they will be your advocates in the future.

Feature

This is where most people probably work. Getting to know your users, doing personas, slower cadence, sometimes it takes longer because you’re trying to make things closer to 'perfect’ before release.

Facts

Most analytics packages do the heavy lifting for you. If you can get a data scientist, use them! Define your funnel. Pirate metrics (AARRR): acquisition, activation, retention, referral, revenue.

These metrics help you work out how you are getting and losing customers. Teamwork is really important to get value from this phase: it’s fast, you need to iterate quickly, do design sparring, get ideas that have been worked on already.

Be careful not to blow the results – eg. changing the copy will invalidate tests. Be aware of the whole experience, not just the specific piece you are focused on.

Be aware that most experiments will be inconclusive, but you’ll learn something new every time!

Future

Don’t be afraid to push boundaries, but don’t make the experience worse for the sake of experimentation.

Validate new patterns with qual before moving on to quant. Sometimes it pays to stick with your gut sometimes.

Established patterns all started somewhere. If something goes well, roll it into your design language.

Tips for growth design

  • sit with your devs, collaborate with them
  • spar with other designers
  • be aware of the bigger picture

You never know, you may discover your own hamburger!

@msharp | Big ol’ list of tools: goo.gl/DQt2yC

Shefik Bey: Think Aloud User Testing

Creating products that resonate requires:

  • deep customer empathy (why)
  • target acceptance (what)

If you don’t get it right out of the gate, you’re done! – Aarron Walter, True North Podcast

Anecdote of a runner leading so fast in a marathon he outpaced the markers and ended up off course. He had a 55km run in the end and didn’t win despite extreme performance. You need to be sure you are on the right track.

Think Aloud method

The objective of the Think Aloud method is to get people to verbalise in a monologue as they use the product. What are they thinking, what is their process.

It’s a good process when it works as helps you get into their mind. It gives powerful insights into customer behaviour, motivations and preferences. Jakob Nielsen advocated doing 5 sessions – it would be enough to get usable data.

Still, it’s many years later and Loop11 opted to leave Think Aloud out of their platform, because there’s some research that suggests verbalising your process alters the way you are interacting with the product. It becomes a form of bias.

Influence on natural behaviour:

  • fixation – what are people looking at and focusing on
  • fewer tasks – it takes up some time to think aloud
  • takes longer to complete tasks
  • increased cognitive load – think aloud requires multitasking

Case study: Amazon Prime Video

Set up three tests:

  • standard loop11 usability test, no think aloud (50 people)
  • standard loop11 usability test, with think aloud (50 people)
  • video recording study with a third party tool, with think aloud (10 people)

Each study had identical tasks:

  • find cost of prime video
  • find cost of a series
  • find out if prim will work on my tv

Findings – broadly, pretty low success rates. They found the site wasn’t catering to natural mental models of information discovery, eg. catching people in an onboarding process that didn’t include pricing.

The tests had an inverse relationship between NPS/advocacy and SUS/usability. This seems odd – why is that happening?

Contributing factors

  • cognition and natural usage (does Think Aloud change this? it seemed to)
  • participant sampling (ruled out)
  • incentive (people tend to put more effort in if they’re paid more)
  • participant ratings – this is the one they felt had contributed the most in this case. In test 3, the testers get rated (high ratings lead to getting selected for more tests). This leads to a bias in the tester audience.
  • branding – Amazon is a big brand, so most testers were already users. That can impact results.

Where to from here?

So will Loop11 include Think Aloud in future?

  • be mindful of data and sentiment
  • augment with natural testing behaviour – combine data from sessions that do and don’t include Think Aloud
  • encourage further research – what have other people run into? can we find more tests and get more data? The findings of this test were a surprise.

Whenever you find yourself on the side of the majority, it is time to pause and reflect. – Mark Twain

Think Aloud is a widely-used technique, but do we stop and challenge it?

@shefikbey

Elizabeth Allen: Adventures In Conversational Commerce

It’s only recently that brands started to engage with their customers on social media. It’s still a little weird but it’s how things are. What a time to be alive! ;)

Talking to brands is becoming known as Conversational Commerce.

Things have changed in a lot of ways, there was a time not very long ago that you generally had to physically go into a store to buy things. Physical shopping was conversational, you’d deal with sales staff who represented the business or brand. So it’s not truly a new thing to talk to brands online, it is in some ways natural.

As a UX researcher for Shopify Elizabeth does a lot of user testing in stores, talking to merchants. One of their channels is instant messaging, eg. facebook messenger.

Shopify use quite a few bots at the moment. Elizabeth will be talking about two of them:

  1. Kit: helps merchants market their products. Texts you suggestions and runs small campaigns for you. Entirely automated, no human intervention.
  2. Messenger Bot: helps merchants communicate and sell. There’s a “message us” button on stores; which starts in an automated browsing system. Real people from the merchant can jump in if they are available. Sales can be done entirely in Messenger.

In reality these are “baby bots” rather than proper bots with natural language processing (NLP).

Tips if you want to make a bot:

  1. Know your users
  2. Understand the medium the bot lives in
  3. Simplify the interactions
  4. Be thoughtful about the bot’s personality
  5. Solve problems, don’t create new ones

What does Shopify know about their users?

  • Merchants are busy, lonely, often not tech-savvy, #1 stuggle is marketing.
  • Customers: shopping online, don’t know shopify, may be skeptical of bots (don’t think they are any smarter or faster than humans).
  • Understanding users and their context helps make good choices with bots.

The medium

  • “The medium is the message” – a conversational medium like messenger should be conversational
  • Customers may open up more in a social medium; you can even learn from the emoji they use
  • People find Messenger feels very personal
  • People tend to say thanks more in Messenger than they do for automated emails
  • ...so it’s nice if your bot knows how to acknowledge that! “Thanks” “Happy to help”

Simplicity

  • Simple purpose
  • Simple process

Kit helps with marketing, which isn’t actually simple; but it sticks with things that are relatively impersonal like running an ad campaign. Shopify push back on suggestions of trying to do full customer service because NLP isn’t really good enough for an authentic-feeling experience. Yet.

Balance being proactive with giving the user control. Give people options, but not so many options they get into decision paralysis.

Messenger – they focused on making sure it worked well out of the box for busy merchants. Use data to guide the decisions; keep things simple and set smart defaults.

Personality

Bots have no personality or culture unless you create it for them. Users will tend to project their ideas onto the bot regardless, eg. despite the gender-neutral name, most women think Kit’s male and most men think Kit’s female.

Keep it consistent – eg. don’t randomly change the tone from serious to informal. With Kit they have prototype conversations where they work through the way an exchange should go.

Because Kit is an assistant, it should behave like one. The principle became “collective success”, Kit’s a member of the merchant’s team. So Kit says things about “we” and “our” about sales and products.

Solo merchants really like the impression that there’s “someone there working with them”, and yes sometimes it gets a little weird. They also have had people send messages that really sound like they think Kit is a real person, although that is rare (most people are clear it’s a bot).

Watch out for lack of understanding from the user; negative reactions to the bot; context mismatch between the bot-world and the real-world. They had trouble with Kit occasionally talking about “our first sale” as the first interaction, ie. before Kit had done anything to help.

Solve problems, don’t create new ones

Bots are tools, they should solve problems.

Problems that can occur:

  • Not respecting the user’s time
  • Not respecting the user’s context

Merchants are busy! That includes configuring the bot, you can customise the messages sent by the Messenger bot but most merchants haven’t done it.

Don’t make the bot feel like the aggressive salesperson!

Sometimes the messenger bot replies too fast – it makes people feel pressured to keep going

Merchants often feel it would be too creepy to jump into a session and take over from the bot, because it reveals they’ve been watching the user.

If the user says “no” to Kit a few times, it will ask why and their feedback goes to the team.

Wrap up

Hopefully by following these guidelines, you will end up with interactions that are fun and enjoyable for people.

@elizallen_ | polaris.shopify.com | ux.shopify.com

Laura Summer: The (ancient) art of conversation

Let’s think about how bots and conversational interfaces could look like in the future.

First though, let’s go back in time to ancient Greece and the beginning of democracy. There was an argument going between Plato and the Sophists, who were teaching rich people to speak in public. They were the dark pattern designers of the day; and Plato worried they’d fool people into making decisions against their own interests. Aristotle rejected Plato’s view and wrote a book about persuasion (The Art of Rhetoric).

Part of the idea was persuasion at scale: how to convince a large number of people to do something. This is basically the same thing people are trying to achieve with chat bots and other conversational interfaces like recommendation engines.

Conversational UI has had a lot of bubbles and fizzles. People don’t have a good reason to trust bots or expect a good result. Some of these failures can be solved by finding new heuristics. We can look to those early philosophers for inspiration.

(NB: Laura warns this is cherry picking the most relevant parts, not a full brief on Greek philosophy. It’s worth reading further if you are interested. Although perhaps not diving straight into the original texts which tend to be pretty dense language.)

Aristotle’s Rhetoric has three rhetorical appeals:

  • Logos – the use of logical argument (convincing people with facts)
  • Pathos – the use of emotion (convincing people by evoking an emotional response, which can be both positive and negative emotions)
  • Ethos – the degree to which the audience perceives the speaker as credible. Intrinsic ethos comes from the domain; while extrinsic are signifiers like “I have been working in the field for 20 years”.

The five cannons of rhetoric (Cicero in ancient Rome)

  • invention – finding an interesting way to get into the domain (comedians do this a lot)
  • arrangement – the order of the speech. In form design, clustering related fields contextually is an example.
  • style – the design of the language you can call on (Bus Uncle tells you about public transport but trolls you at the same time)
  • memory – recall, the ability to recall the speech; having a bot remember previous conversations
  • delivery – the tone, the speed and inflection of the speech

A challenge and an opportunity – conversational UI can be deep or shallow, it can adapt to context.

One thing to take away: you already are a great orator, you are using rhetoric in your marketing. A good book to read is Words Like Loaded Pistols

We should one day expect our interface to communicate with speech and reason, not just colour and shape.

@summerscope | http://summerscope.github.io/slides/conversation

Warwick Cox: Removing everything and having a crap UI

Note: This is a short write-up, since this is a great story but I can’t really do justice to the telling of it here :)

Warwick has a core value: “No excuses, just results”. Also that you should love your job, believe in it and believe in the leaders.

Warwick is the founder of Crowd Delivery – a service where you write a shopping list conversationally, even across multiple shops, and their “delivery hero” runs around and collects it all; then delivers it.

Originally the UI followed a lot of shopping apps, but a key piece of feedback was that someone didn’t want to do a lot of work selecting products, they “just want to type in their shopping list”. So they stripped it down to that and the business took off.

Amazing stat: 88% of Crowd customers had never used online shopping before.

But why not, when you can do things like ask for two avocados that are ripe and ready; and two that are hard and will ripen later…?

Warwick does customer deliveries every other day and uses the chance to get feedback. He’ll ask them what worked, were they happy.

The design of the app isn’t great, but it works. When problems come up, the delivery staff ring the customer and talk to them.

Hey this lettuce isn’t good, I wouldn’t buy it, do you want me to go to another shop or is there something else you’d prefer?

In ~10k deliveries they’ve had ~5 returns, which is simply incredible.

So much of the app’s success came from removing most of the UI and just letting people type things in. Humans read it and ring and ask questions when they need to. It works!

Mina Markham: Styling Hillary

Working on Pantsuit was kinda like an 18 month nationally televised hackathon. During that period Mina did an extraordinary amount of things, but most of all had the time of her life.

How do you get that job anyway?! It started with a vague and mysterious email which Mina ignored, but they followed up and she got the job. The tech team ended up being pretty big, by election day there were about 80 people.

Brief: We need a Bootstrap. And it needs a good name.

Naming things is hard! They built…

  • pattern library – the library of UI patterns
  • framework – the frontend code that codified the patterns
  • style guide – how to put the patterns together
  • design system is all of the above and more

Pantsuit? Mina thought no no it’s funny but she couldn’t possibly really name it Pantsuit… but people loved the name.

When time is short, why spend the time to build a system?

hillaryclinton.com was an umbrella for multiple projects handled by different teams; with different code bases. But they needed to share a single UI so people didn’t know that when they were using it.

There were many stakeholders, but the “Pantsuit team” was just Mina. Luckily there was a lot of buy-in very quickly.

It was immediately obvious that done is better than perfect. Pantsuit 1.0 was built in about 6 weeks. Technical debt becomes your “friend”. You have to just accept it to get things out quickly. There was no real need for maintainability, stability was much more important. At the end of the campaign the code was going to go away. Mina learned to let it go.

Before starting Pantsuit she started with analysis of the existing CSS (the number of selectors, colours, etc), did a UI audit (the various buttons, etc)... and used this to help brief the stakeholders. There wasn’t a big need to secure buy-in but that’s how Mina would do it… even though it seemed to kind of break her design director to see it all!

She used cut up printouts as part of this process, in part because the analogue artefacts seemed to help the more visual thinkers on the team. This was organised into groups of elements that were then turned into abstracted UI kit designs, with generic versions that could be used widely. There was a lot of dogfooding and “pixel engineering” sessions designing in-browser.

The changes would sometimes originate in the UI Kit, sometimes in the Framework, sometimes right in the site.

The last part of the process was testing and iterating. She had a page called The Closet which had one of every single element, just to see how they looked outside of context. Then there were in-context tests. Used WAVE to test accessibility; plus manual testing of things like keyboard accessibility.

How did she do it herself? She didn’t really do it alone! She collaborated with various people, particularly as the project went on and more people wanted input. There was a “Pantsuit Council” that brought people together, with Mina overseeing it to provide consistency.

Documention was the next piece. It was really important for people to be able to consume Pantsuit easily. It included details on how to consume the assets (download, NPM, CDN); how to contribute to the code; starter kits to design and build things with it. It became a source of inspiration for people working on the apps.

Mina automated as much as possible. There was a Slackbot to tell people when a new version of Pantsuit was released. Everything was versioned and notifications were based on pushing git tags with new versions.

What was the outcome?

When you work on a project for a very famous person, a lot people start talking about you!

What was really important was the feedback from her team mates. They felt Pantsuit helped them build things as fast and efficiently as possible. But it was particularly nice to get positive feedback from Hillary herself.

Unfortunately Mina also got a lot of extremely nasty attention from horrible people on the internet. Mina tried to go with “haters gonna hate” but some of these people were planning direct attacks. Main moral of the story is that Reddit is a wasteland. Mina posted a joke on her LinkedIn that she had spent the past year fighting fascism. It was a joke but this went on to show that Twitter is a wasteland. Ultimately every part of the internet eventually showed itself to be a wasteland.

There were attack ads that tried to emulate the style of Pantsuit. This is one of the reasons Pantsuit was not open sourced. Even without the source and full details being easily available, people were able to reproduce the style with a high level of fidelity. You can’t truly hide web code.

The main take away Mina truly wants to give though is that in truth she felt loved, trusted and respected while working on the campaign.

Working on a campaign is tiring and hard. People tend to lose contact with friends while it’s going on. There are a lot of long hours and booze. There were a lot of Oreos, lots of junk food, lots of cakes baked.

She met former presidents.

She saw the web URL on the side of the campaign plane.

She showed hillaryclinton.com to Hillary herself.

Even after it was over, with the result people hadn’t hoped for… they found the local children had chalked messages of thanks outside their office. She remembers messages of support on walls in NYC. The last time Mina saw Hillary, Hillary spent all her time consoling the staff who had run the campaign and giving messages of hope.

Was it worth it? HILL YES!

@minamarkham | http://mina.codes | Pantsuit