Notes from Web Design Day 2015

Banish Your Inner Critic

Denise Jacobs (@denisejacobs) - slides

  • Fear is the enemy of creativity, suppresses creative brain activity
  • How to recognize the inner critic
    • really busy - inner critic is driving you
    • “should have done X by now” - comparisons to others
    • impostor syndrome
      • not the same as Dunning Kreuger
      • can’t have it unless you’re actually pretty good (“Wait, this means I’m actually a badass!”)
    • it needs to be perfect, or procrastination - these two things feed each other
  • How to manage
    • eliminate should/must/ought
      • means there’s something you don’t actually want to do
      • make a “to don’t” list and delegate or drop those things if possible
    • say no to comparisons
      • you only see other people’s highlights
      • compare to yourself a year ago, not to others
    • ask the critic questions
      • where does it come from? the person who gave you that insecurity might have been wrong
      • it’s trying to save you from failure, but it gets in the way of creativity–“I don’t need you right now” and save for editing
    • remember your successes
    • connection between brain and body - power pose for 15-30 seconds - Amy Cuddy TED talk
    • perfectionism - shooting for the beautiful idea in your head and focusing on the outcome rather than process
      • new potters told to throw the perfect pot throw fewer, worse pots than potters who are told to throw as many as possible
      • “done is beautiful”
      • egocentric, but other people aren’t actually watching you that closely
      • decouple your performance from who you are - your job is just this thing you do
      • reframe failure - it isn’t happening right now, and when it does it’s an opportunity to begin again more intelligently
      • kids learning to walk don’t care what it looks like
      • satisfice - your C is someone else’s A, and getting the rest of the way there will kill you
      • make something bad on purpose, then you have something to build on
    • procrastination
      • the task is too onerous to do, need to increase the meaning and value
      • mind tricks - get ready to do it but don’t plan to do it, then you might as well just do it
      • structured procrastination - work on todos 2 and 3 so you’re still doing something useful
      • eliminate distractions - digital blocking
      • pomodoro technique, etc, or fill a quota

Content Strategy for Slow Experiences

Margot Bloomstein (@mbloomstein) - slides

  • Signs for roadside attractions on the way to Disney World didn’t convince her parents to stop - more content is not motivating if it isn’t the right time, and they already had a destination
  • Chevy test track at Epcott - pre-ride experience builds sense of excitement, people are engaged, anticipating, discovering, building foundation for coming experience
  • Frustrating experiences seem slow, delightful experiences seem fast, regardless of actual time taken
    • Don’t need to speed things up or allow snap decisions, taking time isn’t necessarily bad - e.g. Amazon has 1-click, but also numerous ways to change an order; speeding up can actually increase frustration
  • When to slow things down?
    • exploration/discovery, e.g. Ikea
    • make deliberate choices
    • focus attention
    • if people already know what they want, don’t get in the way
  • How to slow people down
    • editorial style
      • Crutchfield - long form content, conversational tone like sitting with a friend over lunch
      • Fidelity - short sentences to get people off homepage fast, long form, long sentences, passive voice, multiple steps for things that need consideration
    • discovery and comparison-oriented content types
      • sales person in a high-end store asks preferences, shows things that go with what you’re buying
      • re-validate at multiple points that this decision is right, needs time and space to consider
      • REI product comparisons - in store, try on backpack with weights; online, product comparison grid
      • Ikea - see what you can fit in a cabinet both in the store and in online widget
    • Long-form content, e.g. Crutchfield and REI additional content off of product pages

Use Your Words - Why You Should Write About Your Work

Lisa Marie Martin (@redsesame) - slides

  • writing makes you a better designer - “design is thinking made visual” and “writing is thinking on paper”, practicing the same thing in a different way
  • helps you understand yourself
    • it’s easy to focus on doing and forget about why, writing focuses on why
    • explain yourself, justify your design, make your thinking real so you can understand it differently
  • help your career - you need to be able to communicate your work, sell yourself
  • good for everyone else
    • contributing to the conversation is what makes it a conversation
    • how does your work change you, and have the potential to change someone else?

Falling in love with forms

Aaron Gustafson (@aarongustafson) - slides

  • Code examples
  • Break things down into reusable patterns
  • Basic pattern - name in contact form - input with required attribute, label with for attribute
  • Email builds on that, different input type and aria-describedby to add an additional note
    • aria-labelledby and aria-describedby can take multiple ids, unlike label for
  • button element can contain headings, paragraphs; can use to build complex, clickable submits
  • other new input types
    • number - needs patern=[0-9]* for numeric keypad in iOS
    • datalist for predictive typing; can have falback with select inside datalist with “other” input outside
  • suggested organization - put field rows in a list to tell assistive tech how many fields, give each item a class for the field type in case you need to style them differently
  • checkboxes, e.g. newsletter confirmation - can have label with for as above, or can wrap label so you can remove input css from inputs that are decendants of labels
    • keep for attribute on wrapping label to make sure it’s clickable in all browsers
  • multiple-choice - each checkbox as above, then inside list and fieldset with legend
  • related fields, e.g. day and time - fieldset with legend, and hide individual labels with css but keep for screenreader
    • can use aria-labelledby to have both fieldset legend and label for each subfield if that reads more naturally
  • small screens
    • Increase label padding and decrease margins for bigger tap area
    • don’t put field and label side-by-side, browser zooms on focus and label no longer visible
  • validation
    • put tabindex 0 on notes for the whole form, like note about required fields, so screen reader definitely reads it
    • new field types have native validation, but safari will still allow you to submit the form
    • pattern attribute - can push the same regex and custom error messages from the backend into the form
      • he has a polyfill on github for custom error messages using the data attribute
    • role=alert for div at the top of the form with errors, each error with an id link to the field
    • use aria-invalid and aria-describedby to associate error messages with the field

Conflict is Key to Great Experiences

Steve Fisher (@hellofisher) - slides

  • workshop questions: what do you do, what’s painful, what you love, what you wish
    • uncover and address the conflict in the stories people tell
  • framework to create a safe environment, shared language to answer those questions:
    • audience (who does the project address?)
    • vision
    • design principles, values of project
    • goals, things you can measure
  • look for agreement, not compromise - need to sove the underlying conflict or it will pop up again later

Intercultural Design

Smitha Prasadh (@holasmitha)

  • this is based on field of intercultural communication
  • society may value individualism vs collectivism
    • individualism: personal achievements
    • collectivism - group harmony, face saving more than individual well-being
    • appeal to people individually vs part of a group
  • high power distance (hierarchical?) vs low power distance (flat?)
    • symbols of authority, allowing only some people to do some things are high power distance
  • uncertainty avoidance
    • low risk tolerance, reliance on law to create clarity
    • strong visual cues, avoid ambiguity
      • e.g. warning messages for unconventional behavior
  • masculinity/femininity, strength of division of gender roles
    • masculine - bold, in your face
    • feminine - subtle aesthetic to appeal more broadly
  • long term culture vs short term actualization
    • “it’ll be worth it” vs “it’ll be over soon”
  • color and symbol meanings vary throughout the world
  • technical limitations vary - browser, OS, internet speed, device, and technical needs of the language

Design Decisions Through the Lens of Performance

Yesenia Perez-Cruz (@yeseniaa)

  • Process of balancing fast, functional, and light-weight vs memoral and on-brand
  • Considerer overall experience, not just visuals - performance is how fast you deliver that experience to the audience
  • think about performance from the beginning
    • cant retrofit mockups for performance after they’re approved, need to plan features and style around it
    • share case studies with clients to get them to care, align it with user and business goals
    • create a UX assessment that includes performance to compare before and after, or to competitors
  • performance budget
    • frame decisions about what is/isn’t included early in the project - if images go over budget, need to cut elsewhere
    • webpagetest, google page speed
    • get baseline from competitors or from average bandwidth at user location
    • can base on load time or bytes, Dan Mall performance budget chart has conversions between
  • communicate and document
    • need to check with devs throughout for what’s possible, what are alternatives
    • need to communicate value to client throughout
    • unexpected client requests may blow the performance budget - remind them, educate
    • teach client to maintain the optimizations - e.g. optimize any new images they add
    • create a styleguide
  • move design into code to optimize sooner, figure out what can be loaded after initial page load
    • still in design phase with client, can still make changes if necessary
    • test on real devices early, more efficient than trying to add up bytes
    • Grunt perfbudget to test in dev

Laziness in the Time of Responsive Design

Ethan Marcotte (@beep) - slides

  • websites are a network of content rearranged at any screen size to convey a message: we want to work below the level of grids and columns, on individual components
  • layout
    • use less code to better effect, e.g. nth-child for grid columns
      • start with 1 column, enhance css at major and minor breakpoints for appropriate number of columns at any size
      • don’t put grid in html classes, less work in html and a bit more in css for much greater flexibility
    • frameworks are great for prototypes and learning, but class-driven frameworks are conceptually heavy, rigid
    • we need a different type of framework that focuses less on execution and more on quality
    • use breakpoints to defend the integrity of the content
  • navigation
    • fivethirtyeight, wallmart.ca use off-canvas pattern and pull things out at widescreen
    • hamburger icon
      • may not be self explanatory, e.g. same as chinese trigram for sky, Time added an overlay to explain its use
      • challenge with concealing nav in general, e.g. Disney has a very long nav, they avoid the larger challenge of well-designed IA; if it doesn’t fit, do we really need it here?
    • BBC - overflow “more” link, more is shown as the page gets wider
    • Guardian - “all sections” button, but primary nav is never hidden
    • Filament Group - different designs on home vs deeper pages, does not need to be the same design solution throughout the site
    • Frank Chimero - flexbox nav and logo, even less code than floats
  • design transactions, not the interface - what is the html to support this interaction? this is the basic, device agnostic version, then enhance using html states
    • see experience on two very broad tiers, not infinite combo of device/browser/network
    • BBC has a fast baseline, loads just enough code to see if your browser can handle more code for the enhanced version

Notes from IA Summit 2015 Day 3

A tale of twin cities

Kristina Halvorson (@halvorson) and Karl Fast (karlfast)

  • Content strategy developed out of collective anger, getting called in the last minute when everything falling apart, none of the design artifacts were considering where the content was coming from
  • User Experience is the term that non-practitioners have adopted and understood, we may not like that term but it’s a wedge to get into the conversation.
  • Karen McGrane has done the same with Content Strategy for Mobile - mobile as a problem is a way to get structured content as a topic
  • Fundamental question of IA is what is information? just like physics doesn’t know what space and time are, trying to come to a deeper understanding of the topic
    • bottom-up set of concepts, how they relate to each other, how they evolve
    • Content strategy is entrepreneurial in that you’re never satisfied, but you need pragmatic, useful tools that help you start doing the work for people who just heard about the field - there’s an element where you’re wrestling with this stuff, but at some point you just have to get the work done, get something reasonable and acceptable or the whole field will get stuck
  • Joe Golner - relationship between data, informtion, knowledge, content
  • We are the change mangement people of the 21st century, we connect the dots between people in the organization and design the future
    • Number 1 question: how can I convince my boss that this is important?
  • Lisa Welchman introduced the term “web governance” - Managing Chaos

Closing Keynote - Starstuff: networking with nature

Brenda Laurel (@blaurel)

  • human creations aren’t necessarily different from creations of nature
  • technological tools are natural extensions of human nature - not separate, part of us
    • distributed cognition
    • caledonian crow uses stick as tools to eat, improvisational play
  • tools made through improvisation, invention, design
  • many of the most significan tools extension of our own desire to see and know - e.g. telescope to see ships at war, planets
  • nested entities
    • entity has perception, representation, action loop - perceives environment, represents that environment internally to map perception to actions
    • even dna contains entities
  • humans better at passing on increasingly complex information than lone wolf - e.g. through story
    • lemombo bone is 42,000 year old lunar calendar
    • we have time-displaced conversations with 44,000 year old cave paintings
  • relics of entities tell us how they work, how they live(d)
    • abalone shell refraction shows ocean temperature when it lived - need data from several disciplines to model all the data in the shell
  • make entities self-revealing - augmented reality - give annotations of place to mobile when someone gets close
    • next step - demonstrate relations between multiple entities
  • ecosystem composed of many different entities living at different scales in a dynamic equilibrium; can be seen as a dynamic information network, containing entities within entities
    • there are entities inside entities: human microbiome
  • conversations with ecosystems are often descriptive, not causal or dynamic
    • NEON using domain-specific data to describe dynamic relationships
  • Markus Covert - first complete molecular model of an organism synthesizing data from many experimental sources, modeling allows us to predict and discover new things
    • uses 26 sub-models
  • model the amazon with different levels - individual trees in amazon overlaid with carbon uptake, all of brazil overlaid with fire hazard
    • next best step: pluggable models with data and model protocols that connect them
  • what do we need to do:
    • small set of data protocols for modelling natural systems
    • model protocols to use data from other models as input to plug things togother
    • protocols for interstiltial layers as connective tisuues between models to represent causality and relationships
    • a commitment to a Gaian view of earth
  • steps in social domain to create interconnected models
    • expose your code! make it useful beyond the current project
    • release the data!
    • don’t publish a scientific paper without publishing both!
  • be in the world and of the world. what does it mean to represent it?

Notes from IA Summit 2015 Day 2

Applied behavioral economics for IA and UX

Robert Neal (@robertjneal)

  • dual system theory - brain operates in fast intuitive mode (system 1) and slow, methodical, cognitive and energy heavy mode (system 2)
    • example: lilly pads cover pond by doubling every day; if 48 days to cover, how long to half? System 1 says 24 days, system 2 says 47
    • if system 1 is involved, the conclusion comes first and the arguments follow
    • applies equally to experts in their field
    • design for what you want people to think, rather than just present logical outcome – don’t leave inferences up to the reader, make them explicit
  • indifference map: two decisions, indifferent between them, e.g. more vacation vs higher salary; traditional economics says this remains constant over time, but actually if you choose one and then you change it you feel like you’re losing something, no longer indifferent
    • uber surge pricing: instead of presenting as a loss, just show current pricing and remove reference point to “standard” pricing; could also show projected cost over the next hour to give people an option, feel like they’re making a good choice to go now or wait
  • attribute substitution: people offer a reasonable answer to a question that has not been asked
    • e.g. set thermostat very low so house cools down faster, but that doesn’t actually work that way, cooling is at a constant rate - thermostat is asking what temperature you want the house to be, people are telling it how fast they want the house to get cold
      • maybe show how long it will take to get to the set temperature - predict what question users will try to answer and provide feedback to that question
  • anchoring - provide a reference point that changes people’s perspective (could even be unrelated)
    • judges read cases, roll die, then decide a sentence - judges who roll lower numbers give shorter sentences
    • presenting the lowest price first has a strong anchoring effect, other prices seem high; if start highest, other prices seem cheap
  • framing effect -
    • 10% chance that the patient will die vs 90% chance that patient will survive, more likely to proscribe in second scenario
    • show that you’re saving when you pay more for bulk price
  • base rate neglect - when presented with statistics, it’s difficult to pay attention to base rate in population vs story
    • people will say more likely to be bank teller AND feminist than just bank teller
    • Nike compares you to other Nike+, who are other active people, more likely to be more active than you than the base population; but you’d compare much more favorably to the base population but then you’d have less motivation to improve
  • books
    • Daniel Kahneman, Thinking Fast and Slow
    • Richard Daylor, Nudge
    • Gerd Gigerenzer, Gut Feelings

What we mean by meaning: new structural properties of IA

Marsha Haverty (@mjane_h) - slides

  • structural integrity of meaning across contexts - nature of information and meaning through lens of embodied cognition
  • relationships between surfaces, edges and textures is invariant structure, information–don’t have to have seen every possible angle of chair to recognize it; recognize from invariant relationships
  • actor observer brings goals and actions, meaning emerges where goal directed actor observer engages with information in the environment
  • visual, mechanical, chemical, linguistic information, gesture, introspection part of information environment
  • perceptural information’s invariant structure = affordances, perception-action coupling
    • how does an outfielder know where to catch the ball? perception-action coupling to angle relationship of the ball, outfielder moves to eliminate angle on the ball, series of course corrections to maintain angle position, drift to the correct position
  • invariant structure of language? don’t have a word for that
    • information-behavior coupling is how and where meaning emerges, but not static, goals, actions and environment all changing
  • meaning is flow; flows have
    • viscosity (ease of flow)
      • is information like water? pressure, temperature affect phase state of water
      • perception flows easily, reflexive; language is more viscous - awareness, associativity, requires attention
        • (graph of linguistic information on y-axis and perceptive information on x-axis; top left is entirely linguistic interface, very viscous, conceptual; bottom right is entirely perceptual interface, very reflexive, visceral; line from 0,0 to 1,1 is even mix of both, but more of each triggers emotion, then overload)
      • example: twitter before they added images, dominated by language with images (avatars) in the periphery
        • active scanning, concept hopping - high-attention scanning
        • when they introduced inline images, moved toward reflexive from conceptual
      • design projects probably fall into linguistic half, with some perceptual components
        • but designs get phase shifted by surrounding ecosystem to more extreme modes - mitigate by using perceptual cues for changes, but to interact you need more attention
        • car touch-screen radio is gesture-based, muscle-memory, using perceptual information to suit the nature of the environment
      • need to think about design itself and greater information ecosystem - need to know when to use higher-viscosity language and when to offload some information to perception
    • texture
      • controlled vocab - language dominated, intense concentration
      • taxonomy more perceptual, including hierarchy
      • content strategy maps both perceptual and linguistic, balanced
      • concept spectrum: concrete to abstract
        • more concrete concepts balanced between linguistic and visual, something abstract like “calculus” requires more attention to engage with - but Vannevar Bush’s differential analyzer makes calculus concrete, makes abstract concept more perceptual, visceral
        • can do the same with metaphor, context priming - providing concepts phase shift concepts into a more perceptual space
      • use ways we detect environment differences to communicate conceptual differences?
      • events - locomotion, transformation, occlusion - Kavid Kirsh, external representations; Karl Fast, epistemic interactions
    • permeability - engaging and controlling the flow of meaning
      • when we interact with the invariant structure of information, some things can filter that - understanding vs not
      • need to be able to detect structure of information and then coordinate our behavior to it; failure to do either is loss of permeability
      • continued engagement requires structural persistance - outfielder needs to continue to see where the ball is to adjust his position
      • tolerance - how precise must the behavior be to mainting coupling
        • dashboard panel, put fingers anywhere on the screen, drag vaguely up or down - high tolerance

Shaping organizations to deliver great user experiences

Peter Merholz (@peterme) - slides

  • internal services model - centralized, your in-house agency
    • pros: strong design comunity, wide range of projects, design costs understood
    • cons: design not strategic (solving one small problem in product team’s solution), little influence on important decisions, designers easily dismissed, us vs them
  • decentralized and embedded - each product team has its own designers
    • cross-cut with director of design, product, engineering across teams to figure out strategy
    • pros: design included throughout lifecycle, part of the team
    • cons: one problem for a long time, lonely, fractured ux
  • centralized partnership - create a set of design teams that service different products, plus a couple of core design teams; design leadership within the team coordinate with a couple of different product teams
    • each product team has it’s known design point of contact, but that point of contact has a shared design team behind them
    • centralized design community still delivers as part of product team
    • reorgs don’t disrupt the customer experience because organizing principle for design is a different model than the engineering organizing principle, more stable
    • structure of each design team:
      • 4-7 people with a spread of design skills
      • singlular strong middle-management managing down to team, across teams, and up to execs and stakeholders - hire carefully, grease in the gears if they’re good, sand in the gears if they’re not
        • allows better project planning - low-level designers aren’t credible to upper management, just have to do what they’re told
      • organize around business problems, not functions
    • double-diamond model - diverge in ideation, converge on definitions and requirements, create plan, diverge on iterative design, converge on implementation
      • usually one plan, then multiple executions - but better to iterate on ideation and prototyping than in execution, less of an investment
      • lean/agile? lean and agile focused on execution once you already have a plan, only second diamond
    • challenge: every product team needs design, how to distribute the design time between them? no control of their own destiny
    • challenge: partner teams don’t understand the cost of design
    • challenge: maintaining singular leadership as group scales: operational matters trump creative matters, one person can’t really do both - other disciplines split creative and organizational management, like manageing editor vs editor in chief
    • leverage: CEO can go to design team and just look around to see everything that’s going on in the company; design can be a driving force instead of recipient of the plan, make org more ux-friendly - but needs confidence, evidence, and commitment
    • tech -> features -> experience
      • e.g. first phone that gets on the interet -> blackberry -> iphone
      • this model still stuck at features, driven by optimal number of engineers working together
        • designers can create a rich experience, but limited by model that organizes by features and engineers; what does a model organized around what designers can deliver on, rather than what engineers deliver on look like?
  • complimentary set of designers in team is better than multiple unicorns working alone - no one can be the best at everything, but you can have everyone be the best at something in a team

Let’s hear it for the seams

Discussion facilitated by Dan Willis (@uxcrank) and Livia Labate (@livlab)

  • people make myths when don’t understand, like myth of either mobile or desktop
  • channels != devices, people are channels too
  • Michal Levin - multi-device experiences: consistent, continuous, complementary
    • consistent - bank same info on desktop and mobile
    • continuous - buy ticket on computer, use with phone app
    • complementary - phone as remote for tv
  • elegant seams can trigger emotions based on expectations - e.g. can be creepy
  • best practice? provide a ragged version when elegant version fails
    • netflix starts at the beginning if they haven’t synced to the right location yet
    • not easy for uber driver and passenger to connect if the gps fails
  • best practice? if you can define elegant but can’t quite get it today, do what you can but keep trying
  • digital enhancement doesn’t necessarily help ragged seam between people
    • how does access to data change people’s behavior? e.g. bar arguments
  • properties of elegant seams
    • affordances, semantic information - how do you know what to do next?
    • intentional emotional impact
    • direct manipulation of information
    • flows as expected
  • properties of ragged seams
    • easy to identify when something goes wrong
    • impose certain reactions
    • data constrained by touch points, data doesn’t flow as expected
    • cross a boundary that user doesn’t want you cross
    • a bump in the road - could be to your advantage if you need focus or attention
  • aspects of seams to think about
    • feedback level
    • the space it happens in
    • locale, like uber cars and passengers
    • time/duration
    • storage, data
    • fidelity of channel

Designing webs: IA as a creative practice

Paul Rissen (@r4isstatic) - slides

  • More than 2.5million program pages on the BBC website (1 page for every episode, every series)
    • includes e.g. Doctor Who all the way back to 1963 with info for every episode
    • ensure that every tv and radio programme … has a permanent, findable web presence
  • use the web as a medium for creative expression
  • content model of episodes of dr who
    • plot, characters, scenes
    • trace chacaters through action, through time
      • first thing that happens to one character, to another character - same event through different lenses
    • fabula - raw material of a story, events of the story world
    • syuzhet - the way the story is organized - may not be chronological
    • knowledge that the audience has
    • story world events are not straight lines, they are webs - just because the narrative is linear doesn’t mean the world below is linear
      • don’t have to recreate the linear narrative online, can create the world as a web of information
    • story telling is IA in its purest form
  • BBC - Mythology engine - navigate archive of Dr Who by plot
    • link from one clip to related clip that it refers to
    • same event may be multiple clips across cliffhanger episode
  • creating structure of information unlocks it from the silos of traditional media
  • same narrative index can work for news, documentaries, etc.
    • trace significant person through history and see clips of BBC coverage
    • trace narrative of past elections
  • Amazon now having X-Ray feature on video platform
  • Can IA be a creative discipline - use IA to be imaginative, silly
  • Scott McCloud - understanding comics
    • creation of any work goes from content, form, idiom, structure, craft, surface
    • UX talks about the last 3, first 3 should be investigated more - we know the web is changing but we aren’t investigating the fundamental properties of the medium of the web - material exploration
      • we start by looking at existing user behaviors, then port them into new medium with slight modifications, building to predefined plan, but are we taking advantage of the possibilities of the medium? use playful projects to see what we can do with it
  • even earliest forms of information hyperlinked, we just didn’t have the medium to express it fully
    • sculpt data into the most useful, delightful shape
  • the material is the web (urls, hyperlinks), the form is the network
  • IA of the internet of things? concentrate on raw information, regardless of form - not mobile first, take a no screen approach
  • the world we live in is not a physical one, we mediate the physical world with thought, “Ideaspace”
  • Internet of things and internet of fictional things
  • if we only concentrate on serious things, then when we make mistakes we’re going to run into big problems. playful things are a good way to explore the medium
  • laws of alchemy
    • alchemist must have a medium for any form of alchemy to succeed - we have the semantic web
    • alchemist must fully understand the structure of matter - that’s what we do as IA, every story is a web
    • symbols and objects are treated interchangeably so that action on one affects the other - internet of things
  • designing webs
    • not just websites, think webs
    • web is a medium to express creativity, not just a platform for existing media
    • engage with the networked world, internet of things

Evening keynote: Living in a time of (un)ethical algorithms

Elizabeth Buchanan (@stout_ethics)

  • Ethics is about what’s possible, good, just, appropriate
  • We hear more about people who are unethical, and we think about compliance more than ethics but they’re not the same
  • personal not the same as professional ethics
  • Ethical possibilities, not just challenges
  • What happens when ethical questions are not asked?
    • FB emotion experiment, AOL data de-anonymized
      • in a few years this has become our new normal. how much of our lives are being manipulated?
    • Eric Meyer FB year in review
    • Drop-down male/female, marriage license with place for man and place for woman
  • what values do we embed or sustain that we don’t realize?
    • implicit bias can be unlearned, and we can encourage and benefit from differences: values-sensitive design, community-based participatory design, anticipatory ethics, etchical algorithms, action research - situate stakeholders as empowered and informed, experience ethical opportunities in our work
  • ethically speaking, what has changed? What ethical issues are we now experiencing in light of pervasive computing?
  • algorithms smarter, faster, intimate (they know us pretty well, if they’re working well)
    • in theory, they make our computing experience better, solve epistomological, ontological problems, help us make decisions about what we do/experience/share/know/exist
    • we see what we want, ignore probabilities, minimize risks that uproot our hopes; but algorithms offer what makes statistical sense, maybe they can help undo our biases?
    • With big data, we can find correlations across anything (see spurious correllation website)
    • computer algorithms can be so complicated that it can be subtly influenced while appearing unbiased
    • simple algorithms create tyranny of the majority
  • ethical algorithms Jeremy Pitt
    • resource allocation, find way to allocate scarce resources fairly based on past, present, future
    • alternate dispute resolution - automate mediation process - e.g. loser of judicial case should still appreciate that the process was fair
  • IDEO codifying company research ethics - Little Book of Ethics
    • respect - honor participants’ limits and values
    • responsibility - act to protect people’s current and future interests - what are potential downstream harms?
    • honesty - truthful in communications and work
  • book: the winter of our disconnect

Notes from IA Summit 2015 Day 1

Opening keynote

Jorge Arango (@jarango) - transcript

  • design serves as a catalyst for societal change: early 20th century - brick and mortar to concrete and steel
    • how do you live a human life under these conditions? how to allow people to flourish, be human
    • work in dialogue with zeitgeist, drive to make the world a better place
    • harness industrial spirit in service of humanity
  • How can IA serve human needs, move with the zeitgeist
    • Polar bear book 17 years ago
    • fundamentals still present - still need ontologies, semantic structures, but manifest in devices with different contexts, constraints
    • “Information environments” inc websites, apps, ??
  • principes of IA
    • places made of language: differences in language and structure define distinct places (lang diff between auto insurance vs recipe sites)
    • consistency across contexts: facilitate understanding that the user is interacting with a single entity, IA is an abstraction instantiated in different ways depending on context and constraints - language of nav same across devices, but function will be different
    • systems thinking: how to channels interact and influence each other. Have a high-level comprehensive understanding of the whole system, but don’t need to design the whole system up front (“a complex system that works evolved from a simple system that worked. a complex system starting from scratch never works”) - evolve over time from components
  • goals
    • make information findable
      • facilitate access to information people need - library science, Marsha Bates
      • people use the products and services we design because they have an information need - solving human needs through access to information
    • make information understandable
      • creating a framework within which information is presented which sets it into a particular context
      • Richard Saul Wurman - can only understand things in relation to things we already understand
      • bank and hospitals look different, their websites look different - semantic elements in user interfaces, frames information differently for different understanding - we need to make sure information is framed correctly

The Crossover Role: PM + IA + UX

Emily Witt (@emilyawitt)

  • Project management not enough to drive the project forward, help customers understand what site redesign involved; IA and UX deliverables help describe project, help recruit people who can contribute to team
  • constant change - environment (e.g. Google search alg) & user expectations - need to constantly reevaluate what we’re doing - crossover role understands how change impacts team at large & different skillsets, overall project health, and communicate that
  • data-driven approach - understand how to use data across multiple types of artifact and across design process - not just UX or IA, maybe also affects development process
  • crossover lives at the intersections where the ball gets dropped, help things move smoothly
    • e.g. when you have strategic goals, ready to gather data: crossover role able to bring discovery and goal setting into user research and strategies and make sure it aligns with strategic goals, then look at data through broader perspective
    • e.g. explain user stories to developer and how it should be implemented and why with whole context
  • characteristics
    • know strengths and weaknesses, who can help with what
    • understand and influence a variety of stakeholders
    • keep process moving along
    • accomodate top strategic priorities, this is why we’re doing this
    • may have one specialization, but knowledge in a lot of areas and agility to shift
    • understanding of process start to delivery and who is involved
    • understanding of web experience, what it means to use and to provide

Panel: the secrets of master ux consultants

Lyle Kantrovich, Louis Rosenfeld, Dean Barker, Semantha Bailey

  • most critical skills:
    • Samantha - hustle, put yourself out there, face rejection, look for opportunities
      • if you don’t have that skill, find someone who does
      • Lou - also share your enthusiasm
    • Dean - communication skills - have to speak, write, present - hard to teach, good to hire on soft skills, tech skills are easier to teach
    • Dean - drive and enthusiasm for learning and prof development - field so large and always changing
    • Samantha - never say no even when you’re terrified
      • Dean - say yes and then we’ll figure out how to do it
  • Lou - consulting != contracting
    • consulting - when people ask you to help them, you tell them what to do
    • contracting - you people ask you to help them and they tell you what to do
    • need to not be in that submissive position, we need to stick up for ourselves
    • raise your prices - people will see you as people of value, like lawyer, not html monkey
    • Dean - contracting ok, but you need to know where you stand, what your skills are, people do need good contractors
      • Lou - but hard to move from contracting to consulting within an organization
      • can be good financial foundation to do consulting work elsewhere
  • Secret to winning a proposal
    • Lou - don’t do RFPs - you should be having conversations that lead to contracts, not responding to RFPs
      • can contact source offering to be their helper to rewrite RFP and find vendors
      • should not respond to RFP as they have been written
    • Samantha - RFP is a sign that so many organizational issues that it will be impossible to do good UX work
      • only going to invest time and energy outlining the work if pretty sure she’ll get it–unless she’s hungry….
    • Dean - internal initiatives can be very good, but there has to be an appetite for them
  • tips for getting client engagement off on the right foot
    • Samantha - want to learn as much as possible as quickly as possible about the client culture, how to orient yourself, where the money is coming from in relationship to the person who brought you in
    • Dean - repoire, socializing
    • Lou - kickoff meeting and continue largely through meetings - books on running meetings: Kevin Hoffman meeting design, Gamestorming - games e.g. pre-mortem exercise to get at what might go wrong before it does, banning words with 0 meaning (what does “redesign our portal” mean) to force people to start using actual language and diagnose actual problem
    • Samantha - learning client’s language where possible, e.g. that “customization” and “personalization” mean opposite things for different client - pick your battles unless their terms are really impeding some point she needs to make
  • tips for making sure you get paid in a timely fashion
    • Lou - get a PO or partial payment in advance - sometimes has to nag, but doesn’t really have a problem. And don’t begin the work unless there’s an actual agreement in place. Your client is not the person who would sign, you don’t want to find out later that you need to talk to procurement to get paid
    • Samantha - break amounts in chunks and have pay some amount early, and the bigger the number the easier it is to get paid without hassle - dealing with someone more senior who can get stuff done
    • Lyle - get money up front, ask for higher rates if they’re giving you bad terms
      • Lou - with 60 or 90 day terms, they’re making very small business people their bank - try to hold the line to force 30 day terms
      • Lyle - but sometimes it’s just policy that it’s always 60 days, work it into the price and know going in up front
    • Samantha - she needed to use a line of credit to cope with the ebb and flow of work, plan for a rainy day
  • how to remind old clients about you to deal with flood/drought
    • Samantha - send things that are relevant to them that you recently read - not just hello, please remember me, but also I am someone who is always adding value
  • how to start consulting
    • Dean - figure out what your super power is, your unique value proposition, differentiation to build a reputation
    • Samantha - be on the lookout everywhere for opportunities, kickstart opportunities when people tell you about pain points, figure out what you can do to help people
      • start small, get practice with hussle factor
    • Lou - consulting success has little to do with technical skill, are you someone people want to be around – you’re more an information therapist than an information architect
    • Lyle - get clients - everything else you’ll figure it out, just get the work

DesignOps Skunkworks

Russ Unger - slides

  • “Never do a shitty job well”
  • John Boyd OODA loops - observe, orient, decide, act
  • Kelly Johnson - aircraft engineer - worked on XP80 - needed to beat germans or would lose the war - 150 days to deliver prototype jet fighter capable of beating germans, delivered in 143
  • 15 rules and practices, Russ has distilled down to 8 for design (will be online)
  • 3 types of design skunk works projects
    • hackathons - intensely collaborative during set period of time toward targeted goal
      • management crap is out of the way, people do their thing
      • example - new hire hackathons, quick hits for new hires - project list, high level objectives, extimated project duration, team size, assign project, get out of the way
      • get a bunch of things taken care of that wouldn’t have gotten taken care of in the past
      • every project has a learning outcome, despite success or failure
    • labs - separate location to let people focus without worrying about business or politics
      • keeps people out of the line of firefighting - working on the future, not the now - not mortgaging your future to work on the crap that’s going on today
      • keep teams away from office beureaucracy
      • maintain innovative spirit
    • weaponized downtime - similar to hackathons - provides an established set of initiatives that need to be fulfilled, without a rigid timeline
      • e.g. time between project or when project cancelled or time when meetings cancelled, etc., nickel and dime time
      • work on something like list of projects from hackathon suggestions above, or something larger with no timeframe
      • lower priority, high impact projects - e.g. design library in axure
      • need good docs for these projects for people to roll on/off

Defining the damn data

Jen Matson (@nstopUX) - slides

  • not just user research, also google analytics, working with business teams to make better decisions
  • data != insight
  • can be difficult to be rational using data
  • example: Q&A page
    • step 1: define problem/opportuny, why, where
      • analytics say high traffic, high bounce, but they have a lot of related content users could go to
    • step 2: define your users
      • what motivates? how can we help them?
    • step 3: define desired business result
      • what is product success?
      • what results are expected? are some metrics expected to go down? (prepare people beforehand so people don’t freak out)
    • step 4: define highest-value work
    • step 5: what to design and build and how
      • changes, how long, how many people, what’s highest value fastest
    • step 6: define metrics, measurement, launch
      • what data will we use to determine success/failure, and do we have the ability to measure it now?
      • how many people will see this prototype on what devices/regions - work with business analysts to determine statistical significance
    • step 7: design, build, instrument
    • step 8: launch, observe, learn

Testing taxonomies: beyond card sorting

Alberta Soranzo (@albertatrebla), Dave Cooksey (@saturdave) - slides

  • taxonomy is not IA
    • taxonomy - terms and relationships
    • IA - UI and interactions on top of taxonomy
    • both practices information space supports user needs - this is about how to measure that support
    • taxonomy is an expert activity
      • validation is expert practice, not testing - user has a different background, testing helps you know if taxonomy works for the user in context – accidental taxonomies (book)
      • validation most necessary when info prepared by subject matter experts who don’t know how to organize, make sure you have all the terms you need and no more
    • taxonomy about logical abstract structure, divorced from UI and CMS
      • we talk about it in terms of the experience it drives, but when we design studies we need to divorce it from the experience, only test one at a time
    • avoid methods until you know what question you want to answer, then focus on the study
      • study the right thing, the right sample size, the right recruits, etc.
  • basis of taxonomy
    • search logs
    • analytics
    • google adword
    • comparative analysis
    • keyword research
    • user research and vernacular - users don’t use the same as the industry jargon
    • existing taxonomies
  • testing methods
    • testing is not difficult
    • testing needs to happen as early as possible to validate nav structure before other things get in the way
    • traditional card sort
      • gives you an insight into mental model, doesn’t give complete taxonomy
      • open - no predefined groups, ask to sort into groups that make sense for them, then label - “generative”: generates labels and groups
      • closed - you have the groups, user puts them in the category - use to prove points, like that existing system may be wrong - “evaluative”
        • may have a bunch of cards left over, those groups don’t make sense for all items
      • hybrid - allow users to make their own groups for items that don’t otherwise fit
    • Delphi-method card sorting
      • like card sort, but 8-10 participant round-robin - first works on card sort, then second changes, third, etc.
      • can start with existing taxonomy (better) or allow first tester to create it, but they will set the tone for everybody and they may not think like everyone else - good idea to seed the deck usually
      • do initial interview to understand background and mental model, eases them into the conversation
      • add, delete, move, re-label
      • nothing leaves the table, flip things over so the next person can see and comment on others’ changes - comments are key to understanding different people’s mental models
      • work on deck until it stabilizes - people moving the same things, commenting on the same problem areas
      • less re-work than regular card sort - focus, lower cost, can run and get vetted taxonomy in one day
    • usability studies
      • if a person is interacting with an artifact, they’re not interacting directly with the taxonomy
      • can piggyback on existing study
      • create simple step-by-step tasks so you can follow someone through system
      • need an interactive UI - no lorem ipsum
    • Optimal workshop tools
      • treejack testing - ceate nav structure, set up tasks, analyze result
        • task analysis for each task, click path to show where people thought they would find something
      • mixed card sort
        • can do in-person and scan into system, they do analysis of online and offline data set
        • can stadardize categories (spelling, etc)
        • dendograms, similarity matrix, predictive analysis (possible IAs, but only as good as the information that you put in, and doesn’t replace human analysis)

Is design metrically opposed?

Jared Spool (@jmspool) - slides

  • Example: book website: more email sign ups with less information about book
    • are more addresses better? are all email addresses equal? really wants to know which site generates more sales
  • observations vs inferences
    • what you observe, what you infer from what you deserve, then take inferences to inform design decisions
    • what did we see, and what does it mean
  • wells fargo search box - most popular query is empty, why?
    • enter button broken? didn’t see box, expecting button to ask them what to search for after clicked? looking for advanced search? maybe the log file is broken?
      • four theories for one observation, lead to very different design decisions - how do you know which inference to choose?
  • almost every observation has multiple inferences, we usually go with the first one, but whatever we come up with is more likely to be a mistake
    • need to do more research, conduct experiment to find the right inference
    • research turns inferences into observations we can make decisions on
  • we use stupid metrics
    • measure is something we can count, metric is a measure we track, analytic is a measure that software tracks - doesn’t necessarily mean it has anything to do with what you do
    • time on page has no meaning, we get it because computers can measure it easily - that’s what most analytics are - no inference data that means anything
    • agenda amplifier, can support any argument you want to make
    • many are intermediate step - e.g. conversion rate can increase by increasing sales or by decreasing visitors, what you want is to increase sales, not conversion rate
    • Google analytics can’t tell you why
    • Satisfaction surveys - satisfaction is a very low bar, and what’s the difference between somewhat and very satisfactory
    • These things change all by themselves when we don’t do anything
  • We need metrics to help us improve our experience
    • customer journey map - rate each stage on scale of frustrating to delightful from usability test, can hone in on what parts are good/bad
    • have to instrument the right steps, e.g. ecommerce shopping cart, log in (reset password, etc.) to checkout - and segment to part of checkout flow, to error messages
  • combine qualitative and quantitative analysis, drive quantitative findings from qualitative research
  • most useful metrics are custom built - e.g. total lost revenue from abandoned shopping cart doesn’t come out of the box from Google Analytics
  • UX team needs to own and understand UX metrics, not another team
  • Instagram, after Facebook bought it, turned off twitter cards so they could get click-throughs to increase monthly average users - worse user experience to increase a metric
  • Article - the Constant Customer - the Gallup CE11 to tell you how people feel bit.ly/gallup-ce11
    • use to show change in attitude before and after usability study, and study shows why it changed

Evening keynote: New fields and feeled effects

Ted Nelson - transcript and video

I didn’t adequately capture this one, my computer was dead and the man talks so fast. It was pre-recorded, here is the video

  • IA is a new (to Ted Nelson) field - new fields compete with hundreds of other fields for resources and attention
    • need to establish the field’s name and competence
    • what is special about IA that differentiates from library science, hci, etc. etc.
  • are we really doing something new? language has been around 1 million years, information shaped by story, cave paintings, writing
    • scrolls, books, newspapers, tvshows, even email chains are all standardized ways of packaging information–what are we changing?
  • user experience is about effects that the user feels
  • information can come in fluid forms: a book, a ballet, etc., mix of assertion and presentation; lead the recipient, model subject as related to the mind of the reader
  • Q&A
    • he doesn’t understand the semantic web, only simple things can be derived from documents automatically, human communication is much more complex and you can’t see the connections between pages on the web
    • if you’re in one paradigm it’s impossible to see the next
    • abstraction is the center of thinking: what do things have in common (constructive, like architecture) and what is different (subtractive, like science). IA is probably constructive.
    • “vividness, clarity and motivation”
      • vivid: things jump out at you
      • clarity: you get the idea, communicate the essentials to the slowest people and a bit more to others
      • keep people motivated and on the right path
      • all ideas are intrinsically interesting, but showing that is hard.

Reading List 2

I've been migrating my blog from Wordpress to Jekyll, and in the process I've been going over some of my old half-written drafts. This one is from 2011, and all it had in it were two links. I have no idea what I originally intended to say about them, but they're both interesting, and they're both roughly about finding failures early to get to a better outcome. This is something I try to do in my own design process: embrace the possibility that I am wrong, try alternatives, and maybe I'll find something better.

Pixar's Motto: Going From Suck to Nonsuck

Pixar's film development process involves many iterations of storyboards before they even get to a script, and even then they still iterate and critique and may still be working out problems in the story shortly before release. The idea is to "be wrong as fast as we can," and every piece of the film will be picked apart repeatedly before they finally get to something good.

Visual vs Action Oriented Design

This article is about game design, and in particular about how often games start out with a general idea of how it looks and feels, which are easier to sell, but neglect the basic mechanics, which are ultimately what make a game fun. Focusing on the mechanics can allow game designers to iterate faster to get to something fun, like Pixar's storyboards. However, the prototypes will be ugly and abstract and harder for executives and players to connect with.

What are design docs?

I've talked to several people lately about potentially helping projects they are working on with the design. As a designer coming into a project, it's helpful for me if I can see the design work you've done already so I don't duplicate work, step on toes, or go in a different direction than has already been decided on. A lot of people have no idea what sort of thing I'm looking for though, so here are some things I find helpful (though by no means an exhaustive list!), and several of them can be useful to non-designers, too!

Note that it's absolutely ok if your project doesn't have these. They're good to have, but if you don't, that's good to know, too, and a designer can help you create them!

Project Goals

Basically, what problem are you trying to solve? What are your overall goals, how do you plan to achieve them, how will you know if you're successful in achieving them?

Ideally, a design starts with some problem you're trying to solve, then do research to verify and clarify the problem, come up with a number of possible solutions, and then validate which one will solve the problem best. But to be perfectly honest, the only projects I've worked on like that were in design school. Most projects seem to start with a pretty hazy idea of the project goals, if that, then jump straight to how to implement the solution. That's ok, but you do need to figure out what problem you're solving before you know if your solution is solving it well or not.

I've found these things to be helpful not only to me in designing and validating designs, but also for keeping conversations and features focused. Goals help you decide what work is important, what isn't, and what features outright detract from your purpose.

Research

Any research involved in creating the goals and plans above, or research suggesting changes in your audience over time and how people are actually using your product. This can include contextual research, interviews, usability studies, market research, surveys, statistics and analytics, or really, any other work you've done talking to people about the problems you're solving and how they use your product—it doesn't have to be formal, anything you have is useful.

If you don't have the up front research about your goals—or even if you have, since things can change over time—it might be a good idea to have your new designer do that now with the people who are currently using your project. You may find out that it does poorly on the things you thought you were doing, which can sting if you're really attached to the idea, but that people are using it to solve an entirely different problem, which can be really enlightening. These are good things to know, and you can take them back and revisit your goals and solutions.

Style Guides

These can be visual and granular like what colors to use and how to style buttons, more structural, like what context calls for what sorts of widgets, or verbal, like what tone of voice to use in different parts of the interface. They can also include design assets like logos, photoshop templates, color palettes, etc. Here are some examples of nice ones:

Style guides are useful to maintain consistency across the whole system and help developers put new pages together faster using existing patterns, but to remain useful they have to be kept up to date with new design patterns as they are added.

Other Design Artifacts

  • information architecture (think sitemap, or more generally, what things should be grouped together?)
  • interaction descriptions or diagrams (when this page is displayed, if user clicks this do this...)
  • sketches, wireframes, mockups, and prototypes
  • discussion surrounding all of the above

If you haven't had a designer before, you may not have anything formal, but even just sketches, annotated screenshots, and white board diagrams can be helpful. And in particular, if there's an online record of the discussion on new features, for instance why something was done one way and not another, that can be particularly useful in absence of more formally documented style guides and research.

Reading List

I frequently have a number of tabs open with long articles that I read throughout the day, and in the interests of keeping more of my thoughts in a space I actually control here are some interesting things I've read lately. There may or may not be other posts like this in the future.

1491

An interesting dive into the scholarship of what the Americas might have been like prior to the arrival of Columbus. The article makes no conclusions, but presents several scholars who believe that 1) many parts of the American natural environment, including the Amazon rain forest and the great plains were in fact human-constructed, and 2) the Americas were much more populous than originally believed, with possibly over 90% mortality from European diseases spreading ahead of the explorers, giving the false impression of an untouched wilderness. I don't know if that's true, and probably we'll never know, especially since the scholarship can't be dissociated from political and moral implications, but it's interesting to contemplate.

How White People Got Made

An argument that whiteness as a race--vs individual country affiliations like English, Irish, French, Dutch, etc.--was invented in colonial Virginia as a divide-and-conquer technique to keep the colonists from all rebelling together. Now, I don't know that I'd go quite that far, there was certainly language about civilized European Christians vs "savages" before that, but there's probably some truth to it too. Certainly the effect of dividing a group by giving some a small privilege and taking away from others has been replicated many times, e.g. in the Stanford prison experiment.

Both of which remind me of this, which I read some time ago:

How presidential elections are impacted by a 100 million year old coastline

Richer soil from the ancient coastline led to more slave-owning plantations which now means more black voters in that area. Our culture is forever shaped by all of history and all of pre-history.

The Secret Casualties of Iraq’s Abandoned Chemical Weapons

I was opposed to sending soldiers to Iraq, but since we sent them, it's our responsibility to take care of them. Starting a war on false premises led the military command to fail in that responsibility, and that is unacceptable.

"You Are Not Alone Across Time": Using Sophocles to treat PTSD

Our culture doesn't talk about sorrow much, but it's a normal part of life, especially in traumatic circumstances. Knowing that someone else has experienced the same thing, that you aren't the only one, that this isn't a singular, personal failure, is huge.

Kafka’s Cognitive Realism

I haven't read this, but I'm delighted that it exists. Kafka-inspired philosophy of mind meets embodied cognition.

Against the Grain

A roundup of research about gluten intolerance. Gluten-free diets seem so faddy, but the article points out that 1) many of the people who are "intolerant" to gluten probably aren't, but may have a sensitivity to some other compound in wheat; 2) there is an increase in diagnosed gluten intolerance that probably can't be explained by better awareness alone; 3) there is substantially more gluten in commercial bread and other foods than there was before it was mass-manufactured.

Photo essay: What’s growing in West Virginia’s urban ruins?

Repurposing abandoned urban wastelands for farming. I found myself wondering about other times this has happened in human history, e.g. Europe after the fall of Rome. Farms -> cities -> farms ->cities -> farms.

Inspirograph

Not an essay or book, just a toy. I loved my Spirograph when I was a kid, this is the web version. I'm disappointed that it doesn't work on my iPad, but it's still great.

Pictures

Finally got around to uploading some pictures from the last year.

Niagara Falls

Chicago

Nostagia, in CSS

The other day I was working on a table and I realized that the colors I was using for table striping reminded me of that old green bar printer paper--you know, the kind with the tear-off strips of holes on the side? A little bit of tinkering later and I ended up with some css for green bar paper and ditto-machine ink. I'll probably tinker with it some more to make the holes better and try out text masking to give the effect of a bad ditto run-off, but here it is:

See the Pen Ditto by Pam Griffith (@pamgriffith) on CodePen

Someone should write this, part 2

Tezcatlipoca as a jazz musician in the 1920s. Quetzalcoatl should show up and sass him, but then maybe they end up saving the world together. Or maybe not. There should be speakeasies and Gatsby-esque decadence. It might take place in the same world as American Gods and Anansi Boys.