Insight & Insanity

web development with a dash of life

An Event Apart Chicago 2014 Notes

Day 1

Understanding Web Design

Jeffrey Zeldman

  • Impossible to deliver a good product when your clients and their bosses bosses don’t understand what we do.
  • We only get to empower clients if they understand what we do.
  • Hired because you know what you know.
  • Things fall on deaf ears because clients dont understand.
  • Focus on specific goals
    • Anything that interferes with the priority goals needs to be gotten rid of
  • Design, goals, users
    • Deliver experience in simplest, smoothest, most friendly way possible.
    • On both small and large devices.
    • Anything that interferes with the user getting things done is bad.
  • Most problems on mobile devices aren’t technology, but design problems.
  • We Don’t Design for Browsers
    • We design for people.
    • Devices don’t matter, size, standards, etc.
    • The web is people, not devices, everything else is just a tool.
  • Web design is not like other forms of design. Web design is like type design.
    • An experience/form to let other people express themselves.
    • Steel and glass architecture.
    • We build for now and the future.
  • Good design is never passive, but only seems to be.
    • Direct the user.
    • Great design can be invisible or in your face.
      • Does it delight, surprise, direct?
  • Be an evangelist for our cause.
    • Explain why we do what we do and what the reasoning behind it is.

Touchy Subject: Creating Content for Sensitive Situations

Kate Kiefer Lee

  • Health and Medicine
  • Money and Banking
  • Private Information
  • Fundraising
  • Religion
  • Politics
    • Change tone and voice depending on page content types and goals.
    • Legal policies can be found as creative commons licensed.
    • Summaries
      can distract visitors from the real content of terms & conditions.

Atomic Design

Brad Foot

  • Multiple mockups on fake devices is a waste of time.
  • Frameworks are simply tools.
  • Style guides promote cohesion, ease testing, make things flat out easier.
  • Periodic table of the elements for HTML
  • You can create good experiences without knowing the content.
    • You cannot do the reverse.
  • Pattern lab eases designing for content, without bloat as with many grid/bootstrap type collections.
  • Responsive
    • Set expectations
    • We sell as paintings, instead we should sell content agnostic of screen or device type.
    • Cohesion between information architecture, visual design, and development is integral. We should work together.
  • Stylifyme.com helps with style guide generation
  • Interface inventory
    • Hash out differences, collect patterns.
    • A screenshot gallery of elements across a site in order to get a visual on what needs corrected and adjusted for better cohesion. #bankdesignsucks
  • Establish Direction
    • Hold off on photoshop, go back to basics.
      • Pencil and paper (draw some birds maybe)
    • Compartmentalize design options to show clients to get a feel for your advanced comps.
  • Roll Your Sleeves Up
    • Element collages, a simple collection of element appearances, help clients provide preference without investing in a full comp.
    • Sample content dropped into comps presented before final "real" content is injected.
    • Pipe in data to get a visual of how a design will respond.
  • Think of the process as a sculpture.
    • Chisel, chip, and hack down bit by bit until your final product is ready.

Screen Time

Luke Wroblewski

  • We have gorilla glass thanks to the
    polite demands of Steve Jobs.
  • Online time is screen time
  • Know Your Screen
    • Prioritize experiences
      • Not all screens are created equal
    • Forecasts say that 3-5′ devices will reign supreme, along with full sized tablets.
      • Sessions based on screen size
        • Small – 4%
        • Medium – 76%
        • Full sized tablet – 13%
      • 2017 Forecast
        • Mobile is the first time the consumer tech industry has sold to every single person on earth.
    • There is more to output than just the size.
      • Resolution and clarity.
    • Use CSS & web type whenever possible
    • Use SVG & icon fonts whenever applicable
    • Picturefill raster graphics
    • Resolution based media queries (they’re pretty smart)
    • "The Fold"
      • Basically is voldemort
      • For landscape, tighten things up. Literally move them UP.
      • For portrait
        • Maintain consistent UI
        • Off-canvas menus
        • Reposition to the bottom
  • Output
    • Trend toward high resolution
    • Trend toward widescreen aspect ratios
    • Media queries for height as well
    • Don’t attempt to switch between touch and mouse – just support both.
    • Media Queries Level 4
      • Pointer
        • (course, fine, mouse, finger, stylus)
        • Input device detection
      • Hover
        • Will return true or false if a device supports the hover state
      • Always report the LEAST capable feature
  • Input
    • Support all inputs
    • Communicate what is possible
    • Screen size is a poor proxy…for now
  • Posture
    • How do people interact with output & input?
    • Adjust for all perspectives, distances from devices.
    • Netflix
      • 500 SKUS (devices)
      • Posture narrows this down to four major distances at which a device is used.
    • View distance from a device determines what will be legible and aesthetically pleasing.
    • Includes light level as detected by mobile and tablet ambient light sensors.
    • Media Query Level 4
    • Design to human scale and environments, not to screen width

Mind the Gap: Designing in the Space Between Devices

Josh Clark

  • Multidevice
    • Average person changes devices 21 times per hour
    • 90% of us accomplish tasks across multiple devices
  • The Gap
    • Sending data from humans to devices and devices to devices
  • The Behavior Gap
    • Devices are independent of each other, yet tightly knit into our lives.
    • How can we ensure these devices, and our content on these devices, work together instead of silos.
  • WebRTC
    • Exchange data peer to peer, no web server required.
  • Web Audio API
    • Use computer audio detection to listen for ultrasonic audio to carry out a procedure.
  • Screens encumber and constrain our interactions.
  • The best parts of our lives do not happen in front of a screen.
  • We don’t necessarily need more tech, we need more imagination to create better interactions.

UX Strategy Means Business

Jared Spool

  • Design: The rendering of intent.
  • Everything we make has content.
  • Everything we make has design.
  • Content and design as we’ve learned are not and should not be separated. This is true user experience.
  • The best user experiences come when content and design are inseparable. 
  • If the content is wrong, the interface will suck.
  • Delivering the content is as important as the content itself.
  • Strategy
    • Used to achieve a desired outcome.
    • UX strategy can’t predict outcomes.
    • Five Strategic Priorities
      • Increase Revenue
      • Decrease Costs
      • Increase New Business
      • Increase Existing Business
      • Increase Shareholder Value
  • Strategy is a Business Model
    • Advertising disrupts the users’ experience supposedly to benefit the advertiser.
    • Ads don’t add.
    • Ads work in specific situations, and only in those situations.
    • Experience is in the moment of what the user is doing.
    • Advertising should be the business model of least resort.
  • Metered paywalls demand excellent content.
  • The best UX strategists create delight by working in the intersection of business and design.

Day 2

Enhance!

Jeremy Keith

  • We rewire our brains constantly.
  • We designed the web as if it was something else.
  • The web is not print.
  • Whenever a new medium comes along we take on the tropes of what came before.
  • Each new medium begins its life by imitating its predecessors.
  • Web Standards Project
    • Changed peoples minds and approach fundamentally
  • Presentation HTML Structure
    • Structure – HTML
    • Presentation – CSS
    • Behavior – Javascript
    • Progressive Enhancement
  • Structure – HTML
    • Fault tolerant nature
      • Shows content between tags regardless of what the tag is, without throwing an error.
      • The tag is therefore irrelevant
      • HTML empowers future use by allowing new tag usage without throwing an error.
    • Structural Honesty
      • Using the right element for the job.
      • Best tag to describe what is being marked up.
  • Presentation – CSS
    • Fault Tolerant
      • Three elements; selector, property, value.
      • If a selector is found that is misunderstood, it is simply skipped.
      • Same for a property or a value.
      • Every CSS rule is only a suggestion to a browser.
      • Material honesty
        • border-radius, not background image for rounded corners
  • Behavior – Javascript
    • Not Fault Tolerant
    • Safe defaults
  • Progressive enhancement is more about dealing with technology failing than technology not being supported.Government Service Design Manual Quote
  • Stop solving problems that you don’t yet have.
  • Libraries like jQuery, Modernizr, and the like can be like death by a thousand cuts to the end-user.

Icon Design Process

Jon Hicks

  • We use icons for wayfinding, recognizing functions, overcoming language barriers, giving feedback, and expressing emotion.
  • We have used icons clear back to the time of cave paintings.
  • "A likeness, or an image"
  • Why make your own?
    • Not the right size
    • Not the right style
    • Too many "spare" icons
    • Not the right icons
  • Research
  • Discovery
    • Know your audience
    • Find convention first
    • Localization
  • Hollow icons can be less clear and immediate than solid icons.
  • Iconic rather than symbolic fairs better.
  • Don’t get too fancy.
    • Use a house, not a mansion.
    • As simple as possible, but no simpler.
    • Context can explain an icon.
  • Decide on icon size and style
  • Save as SVG
  • Work on all icons together
  • Add details as icon size increasesr
  • Grid
    • All icons do not have to be the same size
    • Whatever *looks* visually heavier should be smaller
  • Alignment
    • Alignment is based on visuals
  • Space
    • Use negative space to find where shadows fall
  • Iconfonts
    • Good
      • One small file (kind of)
      • Accessible and scalable
      • Easily styled with CSS
      • No sprites
      • Supported IE4
    • Bad
      • Farty fiddly process
      • No meaning
      • Only monochrome
      • No font = no joy
      • Rendering inconsistencies
  • Why SVG?
    • Less hassle
    • Supported pretty well
    • Avoids sprites
    • Multiple colours
    • Style-able with CSS
    • Animations
  • https://github.com/filamentgroup/grunticon
    • Create bullet-proof svg icon sets with fallbacks and auto-generation

Hit it With a Pretty Stick

Jenny Lam

  • Even if it’s just text, it needs to have a face.
  • Visual design’s impact on the bottom like is real.
  • Every dollar spent on visual design promises return.
  • #1 factor in credibility is aesthetics
  • For designers to succeed they need empowerment through responsibility and accountability.
  • How does a visual designer make impact?
    • Find allies
    • Find senior individuals that can help champion your ideas, skills, and help you to the top.
    • Design internal items
    • Don’t wait to be asked. Take initiative.
  • Alone, visual elements don’t mean much.
    • Together, over time, they become memorable.
  • The visual interface has become the new logo.
  • We remember really, really good and really, really bad experiences. Everything in between is forgettable.
  • Shadow can create visual radiance.
    • Get rid of the unnecessary.
  • "When one is delighted, things have the perception of working better." – Don Norman

Just Enough Research

Erika Hall

  • Everyone wants to be right!
  • It is ok to want to get the right answer. But without the right question you can’t.
  • Admit when the answer you have is because you want it to be true.
  • Assumptions are risks.
  • "Ginger" AKA "IT"
    • Incredible amount of hype with no information.
    • "IT" was the segway, and landed with little real excitement.
    • Creators of the segway wanted to change the world, but changing their view of the world.
  • Structural change takes time.
  • If you want to improve the world you need first-hand knowledge of the world you want to improve.
  • Why are people resistant to change?
    • No time, money, expertise, or "it is too late" is not an excuse for not doing research.
  • Unmet needs are the right problems to solve.
  • Research is not asking people what they like, or hate.
  • Not a political tool.
  • But is not science.
  • How to Research
    • Form Questions
    • Gather Data
      • prototype
      • observation
      • reading
      • interview
    • Analyze Data
    • It does not deem creating a report of results, just generating usable knowledge
  • Group research allows our individual views to form a shared reality, view and goals.
  • Good questions for research need to be clear and concise to yield specific results.
  • Ethnography
    • Studying what people actually do versus what they say they do.
  • Your target customers have to love you more than they hate change.
  • Observational research has to be depersonalized. What does it mean to the subject being observed?
  • Any new product or service assumes it knows how the world works.
    • Make those observations yourself.

How Designers Destroyed the World

Mike Monteiro

  • Responsibility
    • Designers taking more responsibility for their careers
    • Creation without responsibility breeds destruction.
    • There is ethics in design.
    • Bad design can have severe real world implications.
    • It doesnt take malice to bring bad design into the world, it only takes carelessness.
    • We need to fear the consequences of our work, more than we love the cleverness of our own ideas.
    • You are responsible for what you put into the world.
    • To The World
      • In regard to design/apps/companies like Tinder – “Swipe left to go fuck yourself”
      • Stop flipping companies and start flipping tables.
    • To The Craft
      • Represent the craft, represent us all.
      • Stop free work, stop contests.
    • To Clients
      • You need to choose the right clients.
      • People who have problems that need solving.
      • Don’t work for anyone you’re afraid to say no to.
      • Be willing to get fired
      • Tell clients they are wrong
    • To Self
      • Responsibility breeds better work.
      • The work you choose to accept defines you.
      • Your portfolio is a record of your choices.
    • Your ego is fear getting in the way of solutions.
    • Destroy your fear.
    • You will get fired, you will make mistakes, you will fuck up.
    • You will upset people.
    • Be intentional with your actions.

How To Champion Ideas Back At Work

Scott Berkun

  • The real designer is the person with the power to make decisions.
  • The user experience of user experience events
  • Staying connected helps you champion ideas

Day 3

A Day Apart: Mobile Design Now

Luke Wroblewski

  • W.I.M.P.
    • Windows Icons Menus Pointers
  • We have much to learn on mobile, and much to unlearn on desktop.
  • Amazon tests increased usability with alternate user-interfaces and then folds it into the primary application.
  • Design Consideration
    • Components
      • Product Vision
        • What should the product do
      • Design Principles
        • Characteristics being aimed for
      • Design Patterns
        • Repeatable solutions in context
          • Specific solution for a specific problem
      • Design Considerations
        • How/what to think about while designing.
    • Layout & Navigation
      • Think outside the display box.
      • Scrolling is not a bad thing.
      • 75% of people scroll before the page even finishes loading.
      • Engagement peeks at just above the fold.
      • The issue isn’t whether the call to action is visible. The issue is whether your call to action is visible at the point where someone has become convinced to take action.
      • Use off-canvas to your advantage.
      • Put complexity behind the scenes instead of in front of the user.
      • People will scroll through primary content.
      • Secondary content can be off-canvas, but available when you need it.
    • Inputs & Actions
      • Obvious always wins.
      • Hamburger is the most easily recognized icon on the web.
        • Rational
          • Every site is doing it.
            • Many users didn’t actually understand what the icon meant or what it was for.
          • Facebook did it.
            • Facebook hadn’t even tested.
        • Accordances and clarity of language matter [when making buttons]
        • If something is visible, it will always trump something that is hidden.
    • Q&A
      • Inputs & Forms
        • Remove inputs on mobile.
        • Remove optional fields.
        • Remove inline input text, its not helping.
        • Use realtime inline validation.
          • Decreases errors and decreases completion time.
        • Popup notifications after trying to submit a form can also be useful.
          • Provide user correction ability instead of auto-correct.
        • Input type specific controls
          • auto-capitalize = off
          • auto-correct = off
        • Input mask
        • Get users into input mode as quickly as possible.
          • Auto-focus first input element on input pages.
        • On-screen keyboard uses at least half the screen. Account for this.
          • Manage the keyboard.
            • Tell it go away.
        • Picker Menu
          • Pick a value from a set.
          • Works best when you have a sense of the kinds of values.
        • Multiple Picker Menu
          • iOS up to four
            • Outputs combined values
        • Sencha/jQuery UI
          • Replicate these items in JS (not advised)
        • Device specific elements like these are to keep people in input mode.
        • Steppers are a good alternative to dropdown/select boxes.
        • Primary actions should always carry more visual weight or be obvious in the form hierarchy.
        • Progress indicators are like watching a ticking clock at the doctors office waiting for shots
          • Makes things seem longer and doesnt help anyone
        • Tips and Tours are ok but…
          • Provide tips when it is relevant to the action the user is taking
          • Tours only do any good is the design is clear to begin with
          • Onboarding gives users the least
    • Mobile First Responsive Web Design
      • Start with core experience that everyone can get.
      • Enhance capability depending on the device and platform.
      • Ajax-include to LOAD data when it is needed depending on device capabilities and screen size.
      • Responsive tables, drop columns, move headings, put in overflows.
      • OR
        • Stop thinking of tables as tables.
          • Start with card layout and move to tables?
          • Tables to cards?
      • In reality responsive websites are not much slower than mobile sites.
      • Opportunity #1 is reducing image payload
      • Opportunity #2 is reducing JS and CSS payload.
      • Content Parody
        • Desktop and tablet usage peaks in the evening and at night.
        • Mobile usage usage is increased 24/7.
      • Converting Desktop to Mobile
        • Add to mobile little by little adding desktop content/features.

If you have notes of your own, please feel free to comment or email them to me and I will gladly add them in where appropriate. More information including; links, the playlist, speakers, resources, and notes can be found on the An Event Apart website.

Discussion