Culture of Perf.md

Creating a culture a performance -- @iancarrico @rupl

For a small site, some slightly larger sites, none of this is mind-blowingly difficult it's just a matter of setting it up and commiting to it. @tsmith512

Getting everyone on board w/ performant on board w/ peformance.

Buy in at all levels

• CXO - How will this effect our bottom line? People will stay around longer if website is quicker, more responsive. Loads ads more quickly. More pages, more ads
• Product Owner - "We don't have time to work on performance" - Document in backlog to defer work to later. "Responsive cannot be performant" - Study "responsive" adds ~10% more code, and good techniques (lazy load images) take care of perf better.
• Great UX is more important. Not true, speed is part of UX and UX can be made performant.
• Product Manager - How can we add this to a story? Include a high level metric/benchmark, factoring in concern.
• Designer - "You can't have good design and be performant. Don't take a way my webfonts." Do we need all of them, can we reduce to a performant matter. "The PSD was already approved." We can't add 50 fonts, we're not designing for a brochure, we need to think about the medium.
• Developer - "I don't have time to do it." It's important to the final goal, it matters to what the site is. There are many easy wins here. You can brag about it on Twitter - that's really important. "I can't test perf easily." There are tools that can set up.

Performant choices

• Performance Budget. What is our budget, that we can allow for our project.
• Team-wide agreement on what the goals are. Weight under 1MB, Speed Index under 1000.
• Includes performance in all discussions. Just like financial budget.
• Automated tools prevent anybody from being teh "bad guy". Page speed / yslow / new relic.

Performance Goals (for existing projects)

• Be honest. Share the info honestly & openly.
• Celebrate success. Performance hero.
• Constant Reminders. Dashboards that show goals and status.
• Continous Integration. Build tools (eg Gulp), frontend tests, CI Server Testing

Designin for Brains.md

Designin for Brains

Doctrine:

• Research, Personas, Emapthy

Psych + Design

Principles of psychology will remain the same, as will the design rules of psychology will remain the same. Donalt

Kown your Users' Errors, Biases & Limits

• Persona 1: Elderly Elanor, pre-google, pre-gui. pc & tablet. "please don't explain it me".
• Persona 2: Average Joe, multi-device often at once. Struggles to work online. "i'm still figuring out how to set i tup" ** Dislikes: helpers, modals, interfaces

Streamline visits for even our power users.

• Curb cuts. Wheelchairs, but also suitcases, strollers.
• Hieararchy Needs (Maslow Pyramid)
• Users will desight (must haves wroking)

1. Discover & Experience
2. Think & Understand
3. Decide & Act

We think "great literature", humans think "billboard at 60mph".

• We often don't notice small notices
• Visual Hierarchy
• Draw attention carefully
• Add animation or sound cues
• 1/2 users give upif something takes 3+ sec
• Our attention online spans just a few min, in 8 sec chunks.
• Shopping cart abandonment - 67%
• Carousels waste a lot of space - people look around them
• Simplify designs to reduce noise, use white space.
• Break stuff (into chunks), really scannable
• Force focus w/ less options
• How users read the web, they don't.
• We're skimmers, users have time read 20% at most of a page.
• Humans are wired for reading
• 43% of US have low literacy
• User visuals over copy
• Keep copy legible
• Jason's Web Type Scale https://bit.ly/jprwt
• Simplify Messaging
• Target for your Audience

2. Think & Understand

• Mental Models - Conceptual models how believe something works.
• Use existing models to teach something new
• Existing site patterns enhance communication
• Inverted Pyramind - Most important stuff at the top.
• Use expected navigation, like in header (cart in top-right)
• Affordances - Actionable properites between world & person. Door - knocking, opening, closing.
• Perceived Affordances - Visually queued
• Signifiers - maps out actions are possible.
• Make affordances perceivable -- or add signifiers
• Draw our own maps can lead to misunderstanding.
• Do your homework (esp in new market)
• Make sure audinece has the righ context
• Sometimes mental modals are wrong
• Relationships are hard - .15s assume causes & effect. Form doesn't respond it didn't listent
• People are trying to understand the impact of their actions.

3. Decide & Act

• We processs most info outside of awareness, incl judgements
• Critical Decisions take 100 seconds to make
• Most of the decision making time, isn't making decision. It's rationalizing the desicision to ourselves (congitive dissonance…)
• Appealing Visual Design -> A Credible Website
• We love shortcuts
• Satisficing - choosing first reasonable option not the best one ** Search for URL in Google, then click on it
• Mistakes ** Made when we misunderstand rules or knowledge ** Intentionally, but not intentional
• Slips ** We didn't intentionally click on something.
• We blame ourselves for bad experiences ** Learned Helplessness
• Reduce mistakes & keep them cheap
• Let them go back
• Swiss Cheese Model - extra layers of defence before break.
• Design Redundancy for defence
• We need to adapt as designers

Millenial Melissa

• Don't design for us
• Design for them
• Simplify. Reduce complexity as much as possible.
• Reduce friction - Clarity. Consistency. Common Sense.
• Reduces choices. More choices - harder decision
• Understand & Prioritize Needs
• Enjoyment > Ease and Efficiency
• Understand Goals Holistically w/ Pyschology

We have to accept human behavior the way it is, not the way wish it should be. David Norman