Need for Speed: Optimizing the User Experience

http://schedule.sxsw.com/2015/events/event_IAP33174

JAMES CHRISTIE – MAD*POW (BOSTON HEALTHCARE)
goo.gl/w0xp1p

https://www.evernote.com/shard/s12/sh/7a2e4f1a-cc90-445e-a125-65df4d34323f/09d8256227775b095cdd949267e9e3eb

Web speed in seconds:
if less than:
> 0.1 – instant (zappos, etsy)
> 1s – flow
> 2s – expected
> 3s – impatient
> 4s – start leaving – 1/3rd leave
> 7s – Intolerable – danger zone

Reasons for Performance:

  • Performance and KPI’s (Key Performance Indicators)
    • Transform dollars and cents – an increase of 100ms increase $$,
    • The opposite 1% decrease – decreases sales
  • Slow hurts mobile
    • Mobile by nature is even slower
    • Plus needs extra time to connect – 1-2sec
    • adding 300ms extra to the time

71% of the people know mobile is slower
31% use mobile only*http://whatdoesmysitecost.com/

  • Fast opens markets
  • Google hates slow sites – SEO – google penalizes
  • ***Slow sites are filthy (most countries are still coal powered)
    • Internet leaves 830 million tons of carbon footprint

How to fix it

1. Research:

  • Use browser developer tools to see how much time it takes a page to appear
  • Time to interact – Important!
  • Time Loaded – webpagetest – http://loadpagetest.com
    • Can test other cities
    • browser configurations
    • Type of connections
    • EnterpriseGrade: Gives you more analytics than google https://www.pingdom.com/
  • Use firefox tool to view a site in 3D and analyze for complexity of sites
  • Average load times
  • Specific load times for different people/markets
  • In king for what’s slow??? – review this note

2. STRATEGY/MARKETING:

Bring performance out to the public

  • Post performance in a pinned area
  • Sell the benefits
  • The first hit is free

Make performance cultural

Set a Goal – “Your website should load in X seconds”
CULTURE OF – DESIGN FOR PERFORMANCE

3. TECHNOLOGY:

Developers know @scottjehl
Outsource it
Changing hosts increases load time
Software testing tools

4. INFORMATION ARCHITECTURE AND CONTENT:

  • Page budgets
  • Set a time for audience
  • More mobile?
  • Guesstimate target
  • Content strategy
    • 1 video = 20 big images
    • 50kw =  35svg animations
    • Full Width Photo =  500 words … etc
    • ***** see graphic on optimization

5. WIREFRAMES = design while measuring

1.2mb images
100kb js
400kb social plugins
200kb webfonts
50kb html and css
————————————
TOTAL 300kb = Total required = 20

INTERACTION DESIGN TRENDS

  • Carousel – people won’t click beyond the second image
  • share buttons are usual 400 kb in images and scripts – only use on pages where people would really want to share stuff or get rid of it – embed as links
  • Maps – ?
  • Autoplay video – no
  • Placeholder content

VISUAL DESIGN

Optimize properly Safe for web Kraken.io – better than photoshop

Radical changes will be made if you follow these:

  • Use monochrome images – smaller if less color
  • Select to blur all except a specific area to reduce size of photo
  • Leave big hero photos in illustrator – smaller
  • if you need crispier photos, replace with vector images instead

goo.gl/RtvsUQ – presentation on svg


Recommended Books:

Recent books that do a great job on this topic:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s