2017-11-10-wdsummit-2.md

Web Directions Day 2

10/11/2017

Genevieve Bell (@feraldata) - Artificial Intelligence: Making a Human Connection

• Making sense of AI, an ethnographic approach
  • What would an Anthropologist say about AI and is it a worthy encounter?
  • Conversation everywhere
    • Job replacement
    • Self driving cars
    • Good/Bad data algorithms
    • Conversations don't help us make sense of it
  • Machine learning, deep learning, computer vision, algorithms
  • Made possible by larger computing power and data sets
• As anthropologists, we hang out with people to research them
  • How do you hang out with AI?
• The Ethnographic (semi-structured) Interview
  • Descriptive questions
    • "Describe your world in your own words"
    • Choices of language they use to identify themselves, describe who they are and where theyre from
  • Structural questions
    • How do people make sense of the way they organize their world?
    • "What tools do you use? How do you get to work? How do you shop for something?"
  • Contrast questions
    • Ask why they aren't like other people?
    • How do you identify yourself by contrasting from others?
  • How do you ask these of AI?
  • First descriptive question: "Who are you?"
    • How is "Artificial" good? What other notions do we get from this?
      • Contrast to "Natural"
      • Built
    • What is "intelligence" not about?
      • Emotion
      • illogic
      • It's not "artificial human"
    • Machine Learning, Computer Vision – Tech + Human attribute
  • "Who raised you?"
    • Ai - 1956, Dartmouth college, 10 week conference of mathematicians crafting research plan to make machines simulate human learning, language and rationality.
    • Von Neumann, B.F. Skinner
      • Rendered the body like a machine
        • Believed humans can be programmed, trained
    • 1946 - 1953 – Macy's conference in Cybernetics
      • People were concerned with human/machine interactions, a world with more machines
      • Social engineering
    • Not just "who is your written inventor", but also "Who funded you?" "What was the geopolitical situation?" "Who was written out?"
  • "Where did you come from?"
    • Mary Shelley's Frankenstein - Electricity reanimates Frankenstein's monster – 199 years ago
    • "The shitting duck"
      • Voltaire: "Without this duck there is no glory for france
    • AI has a history of intellectual and cultural genealogy
      • Years of "What happens when things come to life"
    • Part of our anxiety about AI has been written into it by us, since its conception
  • "What do you do every day?"
    • AI is not fully fledged, but is already everywhere.
      • Algorithms that are automated processes are well entrenched in your existence.
    • Built on data. Data is always retrospective.
      • Incomplete, non-ideal, not always reflective of the world you're observing.
  • "What are your dreams?"
    • Would AI create? Or automate?
    • What would it be to imagine algorithms that were interventions? Not recommendation engines?
    • What is AI not? How do we think about that?
    • What else is inside AI that determines what they are and aren't?
      • We need to do a better job of pushing on our tech to find out where it's from
      • Naming is important
        • Self-driving car vs Autonomous Vehicle
          • "Self" has implications of individuality
    • What work isn't being done? How do we want to be builders of better tehc?
  • AI stories matter
    • Is it possible that our AI is normalizing our world?
    • How do we remember that we also ought to ask more questions?
• Making sense of AI
  • 4th wave of industrialization: Cyberphysical systems
    • As we scaled from original tech to broader systems, we didn't know what to do
    • Institutional responses evoked
    • Wave 1
      • Build new ways of being and new ways of thinking
        • Ecopolytechnic school in Paris, 1700s
          • Engineers were gonna be the people who stabilized democracy
          • Blended science, phylosophy, ethics, law, literature
    • Wave 2
      • Structural institutional responses
        • Capital
      • Warton Business school in 1881, philadelphia
        • GDP, measuring economic success
        • Labor management theories
        • Workers vs Management
        • Branding experiments
        • Market research
    • Wave 3
      • Computers require proprietary programs
        • American govt approached Stanford Uni to train people to write programs that were outside the Businesses that built computers
        • George Forsyth built Comp Sci curriculum
        • Remarkable structural act that Comp Sci curriculum can be globally driven
    • What is the next wave of institutional response?
      • Managing data?
      • IoT?
      • Scale and Abstraction? New Applied Science?
  • Requires interdisciplinary questioning
    • Autonomy
      • Ascenscions? Consciousness?
      • Loaded cultural term? How to move through that idea - coemergence vs autonomy
      • As humans we have a bad track record of what Autonomousness means
        • Robot = "Robat" in CZ; Work, slave, inequity
        • Historically, Women less autonomous than Men, Children less autonomous than Adults, Masters vs Slaves, etc..
      • Where is the transparency of this autonomy? How do we understand what autonomous programs acting on behalf of institutions are thinking?
    • Agency
    • Assurance
  • abc.net.au/boyerlectures

"The next billion seconds" - Mark Pesci

Jina Anne (@jina) - Design Systems are for People

• There are parallels between the story of "The Founder", and our work in Design Systems
  • "Increase supply, demand will follow"
  • Design systems will help you ship faster, but business is often too busy, "We'll do that later"
  • "The burger ballet" – choreography of layout and people is essential for the business to work smarter
• "The way we build" - airbnb.design
  • "Here's the simple truth - you can't innovate product without innovating the way you build them"
• NYC Transit Authority Graphics Standard Manual
  • Standards Manual, LLC
  • Design with a purpose - "orient people within the subway environment"
    • The passenger will give information at the point of decision, never before, never after.
    • eliminate visual clutter and information that is misleading or unnecessarily repetitious.
• Why are we here?
  • Whether its a passion, or a fun time to be in design systems
  • Design systems will help grow our products
    • quality and speed
    • time to ship
    • code written
    • purpose is people
• Lightning Design System
  • Company looked to team to help them make decisions
  • Language for motion, iconography, sound, voice, code,
  • Design tokens
  • Shared language between designers and developers
  • Connection between organisation and users
  • Most important tool for Salesforce was design principles
  • Clarity, Efficiency, Consistency, Beauty
• designsystemsbook.com
  • Always use them, always include them, always refer to them, always display them
  • Don't have too many of them
• "The more decisions you put off, and the longer you delay them, the more expensive they become"
  • Spec ranking can be used to weigh options
    • will this break consistency, but enable efficiency?
• As exciting as they are, some do fail
  • Failure due to a lack of vision, shared language
• Your internal customers
  • Your community feels ownership of your ecosystem if they relate to your system
  • Does your organization feel empowered to join in
    • see,learn,adopt,consume,evangelize,support,iterate,love
  • It's better to have everyone able to contribute, regardless of expertise
    • True collab isn't throwing designs over a wall, it's sharing responsibility to build quality product.
• Design Systems Ops -- @kaelig
  • Needs understanding of eng requirements, and design mission
  • Design ops vs Design Systems ops
    • scaling a more efficient organization using design
    • Design system ops are more focused on systems, pattern libraries etc.
    • Design ops focused on people and process as well
    • It really doesn't matter - we spend a lot of time defining things and naming things
    • "Distilling how we think about design systems" - Sarah Federman
      • "whatever works for your team is the right answer"
• Empathy
  • It's not about what tools and methods are used, it's about empathy with the user
    • Source of truth can be sketch ui kit, or a coded component library
• Creativity
  • Jazz has a framework of common patterns. When these patterns are mastered, musicians can collaborate and improvise, and still have time for their solos.
    • A good design system is a collaboration tool, not a hindrance on creativity.
• The Design Systems Community
  • A "Metasystem", collectively helping each other serve our people.
• Standards and quality vs speed of scale
  • Be open, inclusive, share
  • We build products to serve people
• publication.design.systems
• news.design.systems
• clarityconf.com

Chris Eppstein - The Cascade is dead! Long Live Stylesheets!

• Every presentation about CSS is largely how to manage the cascade
• CSS-in-JS
  • Scoping styles
  • Smarter optimizations
  • Critical CSS
  • Package mgmt
  • Non-browser styling Also,
  • No meaningful cascade
  • Anonymous rule sets
  • Determining styles for an element is straightforward
  • Deleting an element deletes the styles
• CSS at linkedin became slow and bloated
  • Before even launching, new single page app had 3.2mb of CSS
  • Specificity was out of control and was measurably impacting site speed
  • Designs and implementations that were out of compliance with the design system
  • Hard for apps to down-level their style patterns to the design system
• We had constraints on our possible solutions
  • Design system for dozens of apps built in different tech stacks and of varying architectures
    • Pure css/scss deliverable for legacy apps
  • Making performance a 1st order consideration -Where a tradeoff must be made, prefer runtime performance to developer experience
• Properties of an ideal solution
  • Scale down to third-world mobile
  • Scale up to 100s eng on one app
  • SSR
  • Inline critical styles
  • CSS code splitting
  • Great dev experience
  • Empower design systems
  • Tree shaking
• Opinions
  • worried CSS-in-JS will make css less appriachable to people with a design background
  • CSS-in-JS leads to JS-in-CSS - because abstractions
  • Theoretically, it's worse for performance
  • Atomic CSS and other declaration-oriented systems create high-performance garbage.
  • THE_BEM__naming-system--is-atrocious
• The Plan
  • Component-oriented selectors
  • Build a better BEM
  • And optimize shared declarations into shared rule styles
  • Use build-time code transforms to maximize benefit from optimization
  • Generate code split styles and
  • "uglyify" css indents to maximize gzip efficiency
• CSS Blocks
  • CSS for your design system
  • After code splitting, compression – linkedin CSS less than 5% of current size.
  • Seems to good to be true?
    • Does it handle dynamic style changes?
    • Is there runtime overhead
    • What about template sizes?
    • Is it hard to use?
    • Is it hard to adopt?
      • yes.
  • What is a Block?
    • A collection of related design elements and their various modes and interaction states.
  • Defining a block
    • Block root - Root element class
    • Block state - different modes or interaction states that the whole block can be in
    • Class - a type of element styled within the block
    • Class state - a state that class can be in. Only affects element of that class.
    • Every block needs to be in it's own file.
    • Classes are nouns, states are adjectives.
  • A block is an interface to a design concept
    • Classes and states are inferred from selectors that implement them
    • a block can inherit from another block
      • classes and states of the same name inherit from the classes and states of that same name in the base
      • Additional classes + states can be added
    • A block can implement another block's interface
  • Rules
    • Key selector must target single block or class, or pseudo
    • Any number of states or pseudos allowed
    • Selectors may be contained within @-rule
    • Combinators forbidden except when context selector is one or more block-level states
    • !important forbidden, and unnecessary
    • basically BEM's rules for selectors
    • Minimizing coupling helps with maintainability of your software
  • HTML Rules
    • Not required for optimization, but for definitions
    • Don't put a block class outside the root element's HTML subtree
    • Two classes from the same block may not be applied to the same HTML element
  • Block-specific syntax
    • Requires specialized syntax
    • Syntax always removed from css output
    • resolve property conflicts using resolve() function.
      • Create an override resolution - "This property we want to resolve against another class inside of the block"
    • yield() vs override
  • Fine grain control over conflict resolution
    • constrain() for value constraints
  • Works with any preprocessor, reads content of Sass, optional post-processor
• OptiCSS
  • Analysis-driven optimizer for CSS and Markup
  • Completely independent of CSS Blocks
  • Configurable and extensible

Tammy Everts - Performance is about people, not metrics

• For impatient web users, an eye blink is too long to wait
  • Sequential flow activities are done without any obstruction/distraction
    • Our brains stutter when waiting
    • Computers are first instance of an interaction where we have to wait on something, not instant
      • We used to hunt, camp, draw together. That was sequential, and instant.
  • The average web user believes they spend 2 days a year waiting for pages to load
• "Web stress"
  • When apps or sites are slow, we have to concentrate up to 50% harder to stay on task
• Could we replicate the results found for mobile users?
  • Expectation: Mobile sites are slow
  • Rage clicks: series of clicks done in frustration
  • Phone rage: 62% of people behave normally when encountering a slow site, everyone else is violent with their phones (swearing, throwing, yelling)
• Slow websites (and apps) suck for your visitors
  • Bounce rate increases with page load time (Load times vs bounce rate)
  • Walmart: 1sec improvement = 2% conversion increase
  • Staples: 1 second off, improved 10% conversion
  • WPOStats.com
• Impact of HTML delays on mobile business metrics
  • Retention dropped in a throttled experience
• Define "slow"
  • The real thing we're after is to create a UX people love. No matter who we are, we are perception brokers.
  • How to measure perception at scale?
    • Many metrics are bad indicators to measure good UX
    • Load time: Time from start of initial navigation until the beginning of window.load
    • Start render: Time from start of initial navigation until the first non-white content is painted to browser
    • Speed Index: When visual content (e.g. images and video) renders within viewport
      • Indicator of good, complex visual content present on screen
    • Visual complete: First time when visual progress reaches 100%
      • Problem: Too slow. Opposite of most metrics, people can interact with a page before all visual assets loaded.
    • Time to First Meaningful Paint (TTFMP)
    • Time to Interact (TTI)
  • We need better metrics to measure UX
    • Correlates to what users see in browser
    • Recognize that not all pixels and page elements are equal
    • Allow us to customize what we measure on specific pages
    • Is easy to use and accessible out of the box
    • Custom metrics FTW
• Custom Metrics
  • Measure performance with high-precision timestamps
    • How long does it take to display the main product image on my site?
      • You can measure the parts of the site that matter to you.
  • Ticks almost all the boxes (of better metrics)
  • Only 15% use custom timers
• Hero Times
  • A set of metrics based on hero elements on the page
    • h1, largest image, largest background image, hero element timing
    • speedcurve.com/blog/web-performance-monitoring-hero-times
    • correlate which are significant in your pages, weigh them that way and cherry pick them
• Why should you care?
  • Kids are the future, they use the web in ways we can only begin to understand
    • We're designing for them, we don't know what they want
  • Design for seniors – you will be senior one day
    • You have no control over your change in perception of the internet the older you get
    • 65% of seniors use the internet
    • 65 or older are 43% slower at using websites than users aged 21-55
    • Between 25-60, our ability to use web declines 0.8% per year
      • We develop hacks over time to make up for deficites but it still doesn't help
• Takeaways
  • Performance === user experience
    • a11y, speed, load times, usability
  • There is no unicorn metric
  • You can't understand what you don't measure
  • You can't measure what you don't understand
  • Performance is a team effort
  • Small changes make a big difference
    • Tiny improvements === instant credibility

Sarah Pulis - Designing for extremes

• Ordinary australian = speaks english at home, born in Aus, parents born in aus, christian, english ancestry, married, partner & 2 kids, 3br house and mortgage, two cars, yearly family income of $104-$130k
  • 0.2% of Australians match this characteristic
• "The End of Average"
  • struggle to understand why pilots didn't like cockpit design
    • designed for average pilot in 1920s.
    • assumed that some pilots would not fit all of their 10 dimensions for average man
    • 0 fit 10 dimensions, 3% fit 7 dimensions
  • As individuals we're all different
  • As designers, our products and services should support diversity and adaptability
• Behind every great site or application lies thought, empathy and inclusion. This doesn't happen by accident, it happens by design. How we get there is as wnique original and diverse as the people who use our products.
  1. Awareness
     • National Transition Strategy - Raised awareness of A11y and inclusion, wcag
     • Government built capability, but were very focused on a checklist approach
       • Had they or hadn't they met that standard?
       • Significant improvement in govt, but didn't stick
     • Certain departments have embraced a11y as a culture shift, but the deadline came and went for many because it wasn't in their DNA/culture
  2. Culture
     • a11y often seen as something done at the end of project.
     • Seen more often with corporates
       • ROI
       • Untapped markets
       • Competitors who are addressing inclusion
         • This has lead to a more cultural approach
  3. Innovation
     • 70% of presentation at UX australia talked about some sort of diversity and a11y
     • Still only talking about "making something accessible", not leveraging human diversity
     • AustraliaPost Boxes
       • SMS and notification aids people with anxiety in crowds, gives control of when they can pick it up
       • What opportunities are we missing by looking at something as an access requirement as opposed to an opp for innovation?
• Designing for extremes to the benefit of all
  • According to US statistics
    • 26k people have permanent disability that affects mobility
      • Desiging for these situations also designs for:
        • 13m with temporary disability
        • 8m with situational disability
      • Total: 21m people.
  • Looking at a11y as inclusion not checklist
  • Iceberg principle:
    • 90% hidden from us - we're not always digging below the surface
    • 3 mil aussies live with depression or anxiety
    • 2mil have dyslexia
    • 11 mil experience mental health condition during their lifetime

    • 4mil have disability

    • 44 mil... ><
• Diversity in Research
  • Re: project for identification without going in store
    • We need to be able to cater for extremes
    • Instead of a system where case is too hard, pushing back into store wasn't good enough
  • We can't design for every diversity in humanity
    • Use inclusive design principles covers as much as we can
• Diversity in testing
  • a11y is just another part of testing
  • We can't measure how usable a site is based on a checklist
  • Nobody is perfect
    • user testing is essential for diversity testing
    • Not just about adding people to research base/testing base
    • find out what's important with testing for users in extremes, and users in the medium
• Extremes should become normality, since everybody is diverse
  • Neurodiversity = An exploration of what has thus far been considered mental illness, is just human difference in thought. We should embrace this.

Kazjon Grace - Personalized Curiosity: Why and how machine learning can keep your users surprised and engaged

• We're surrounded by machines that know what we want, and give it to us
  • Side effect: we chop too much, binge watch too much, eat too much
  • We don't have to listen to someone we don't already know we agree with
  • Algorithms in some sense responsible for this.
• Personalised web = Hyperpartisan focus = Everyone gets what they want when they want it
• Discovery algorithms are the opposite
  • Helps you to discover new things that you may like
  • only happens if there's a business motivation
  • Users already motivated to try new things
  • Works for music, and some media functions
  • What about trying to get people to eat differently?
    • Health as a byproduct
  • To read news/literature more broadly?
    • Difference of thought
• How can our experiences motivate users to try new things?
  • Simulate curiosity to stimulate it. = Curiosity Machines
  • Inbetween Design, psychology, AI
    • We're trying to induce a change in behaviour, not just explore behaviour
• Example:
  • Qchef: Recommends food based on food you like, try new things
    • Secretly healthy. Adult equivalent to hiding vegetables in your food.
  • Curiosity as a state not a trait (interest+surprise)
    • I'm curious about this thing, not I'm generally curious about stuff
• AI, working entirely in the rules of the game, can surprise people
  • Lee Sedol vs Deepmind AI
• Diversive curiosity = Undirected surprise-seeking
• Specific curiosity = focussed on a discovery
  • To build these models, we have to understand the psychology of these experience.
    • "Let me lead you along the breadcrumbs"
• Personalised curiosity = User gives feedback to system, receives personalised suggestions
• Kreatopita
  • Looking at co-occurence of this recipe's ingredients in other recipes
    • Seeing "eggs, parsley, cinnamon" together was weird. This recipe had an unusual flavour profile
    • If this is the surprising combo, generate similar combos
    • Returns "Spicy Fried Pork Chop"
• Serendipity in health
  • "Newborn infants learn while asleep: study may lead to later disability test" (Sleep disorders and dyslexia)
    • Similar correlations: Food intolerances + tuberculosis
• Surprising computer science
  • Gathered thousands of articles, grouped related topics together
    • Research, social, study, group, community,
    • Algorithm, program, graph, compute, time
    • Two groups rarely formed together, but added to "Star Search: effective subgroups in collaborative social networks"
• This isn't about trying to give us what we want, it's about improving us
  • Change us, diversify us
  • "Algorithmic diversification"
• "Curiosity Machines"
  • Simulate, learn about us in order to make us more diverse
  • Implications in health, media, design, politics
  • Requires AI, cognitive science, design

Elle Meredith - Latest in Browser Development Tools

• [contenteditable] - lets you change text on page
• right click + "scroll into view"
• $0 selects last inspected element
• Color picker in devtools includes color contrast ratio details (Canary v64)
• Better support for grids
  • Displays css grid cells on inspect
• Console
  • Preferences > "Preserve Log" option
    • Still keep log for debugging when changing pages
  • Set breakpoints directly from DOM tree - right click
  • Console.log string interpolation
    • `console.log('hello, i am an interpolated %s string', 'yep')
    • Many other improvements, see image
  • Data fetching
• Sources
  • Pretty print option
  • Local overrides view
    • Defines local folder to create js/css you can work on, loads sources locally instead
    • Save sources locally automatically
• Network
  • Throttling network speed for page load
• Device toggle
  • actually emulates touch events, based on device selected
• Audits
  • Lighthouse integration
    • Makes caching and compression recommendations, unused js, a11y, seo etc
• Modern tooling, testing and automation -- Chrome DevSummit 2017