Notes from Web Design Day 2015

These are my notes from Web Design Day, held on June 12 2015 in Pittsburgh, PA.

Table of Contents:

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

Back to Top

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

Back to Top

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?

Back to Top

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

Back to Top

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

Back to Top

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

Back to Top

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

Back to Top

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
    • The Illusion of Life by Frank Thomas and Ollie Johnston - a vocabulary framework for Disney animators to talk about animation
    • Whitney museum logo design - lightweight set of rules for many variations on the logo
    • Gershner (?) font framework - enumerated all the ways fonts could vary, allowed creation of new fonts based on various characteristics - design systems support solutions
    • “Content-out layout” on A List Apart - vocabulary for when elements need to adapt
    • 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

Back to Top

Comments