An Event Apart finished strong with three good sessions. I hope that I get to attend next year!

Unified Design – Cameron Moll

We need to work around to a unified experience around screens. Previous experiences inform new experiences.

The best interface is the one within reach, but 49% of users email themselves a link to continue using the content later.

RWD ends where the browser ends – the spirit of RWD but unified all technologies – Unified Design. This is the next frontier of building sites – a consistent experience regardless of where or what device the user is using.

77% of searches on mobile are at work or at home (where one assumes there is a desktop nearby).

Screens and interfaces are converging and your audiences are looking for unified experiences.Example: People want to use Lightroom on the phone – but it’s very resource heavy. But users get frustrated expecting Lightroom to work the same way it’s worked before, on desktop.

Unified Design is the next frontier, building on RWD – a consistent experience regardless of where/what device the user is using.

Design has told us that form and function is most important – function is becoming way more important than form.

The concept of data symmetry – same data across items because 40% of online users start activity on one device and finish on another.

Slack – a great example of a cohesive experience across devices.

Best practices that foster unity:

• Unify internet presence #unityfirst – design the core experience first.
• Treat every facet of the user experience as a contribution to the experience.
• Moving towards an duocratic branding experience (user decides).
• Consider web views for native apps – web vs native is mattering less and less.
• Unify actions, not devices.
• Store data in the cloud, not locally (amazon cart)
• Language choices starting to matter – replace the term “click” with select or point.
• Replace the term mobile (which ppl tend to think as iphone) with small, smallish. Think beyond the phone/ipad/desktop dichotomy.
• Eliminate big screen bloat.

Compassionate Design – Eric Meyer

Build for humans, not users or consumers.

Autotagging can go awry – put terrible tags on photos that people can not even be aware of.

Project pre-mortem – a meeting where discussions are happening about the worst outcome that can happen. How things can fail. A person serves as a dissenter – identify assumptions and subverts them. Everyone gets a turn as this dissenter, practice deep thinking.

If we’re going to do this *feature*, how can we do this ethically?

Instead of edge case, consider a “stress case”

It’s important to Signal Intent

• Google should have signal intent with mic drop feature.
• Explain what we are asking and why we are asking it.

You have to go off brand to be a human and be compassionate sometimes.

Clarifying intent behind questions: The Question Protocol.

• Who is going to use this info and why?
• What are we going to do with it?

Making the case for compassion in your work

Be conservative with what you send and liberal with what you select. Compassion can help you make money, save money and decrease risk. Compassion is hard – takes courage, willingness to accept users how they are.

Empathy with our users is courtesy. Compassion is vital.

Designing for Performance – Lara Hogan

My brain sort of checked out at the end of the conference and I didn’t take the greatest notes for Lara’s talk, unfortunately.

A cellular device must establish a radio channel before sending and receiving data. In this speed, mobile devices are roughly analogous to dialup.

Image file size tips –

Blur background to reduce file size, because jpgs don’t handle edges that well.

Image sprites – a bunch of images in one file.

Old IE downloads all @font-face files, so only import font weights you need.

3d Firefox add on to visualize page depth – Tilt 3D (I couldn’t get it to work).

Make performance part of everyone’s workflow.

 

oregonstate.edu over a cable connection. Site is usable at 2 seconds.

Resilience: Building a Robust Web that Lasts – Jeremy Keith

Lots of history of the DARPANET and ARPANET and Sir Tim Berners-Lee. I wrote a paper about this in grad school so it’s all sort of review for me, so I didn’t take any notes. I did enjoy, however, seeing Sir Tim’s paper about dealing with information management (aka the www), complete with notes from his supervisor:

html – originally 21 elements

html5 – now 121 elements. How do you add 100 elements to something and it still works?

Because browsers just ignore the elements that they can’t render – they’ll ignore the tags but still show the content. This is a declarative, more resilient tool.

Compare this with Javascript, a more fragile, imperative tool.

html works well on the web because of the web’s inherent variability. We don’t know and can’t predict what browsers, interfaces networks, & user situations will look like in the future.

What we can do, going forward:

1. Identify core functionality of a site (i.e. help users complete a task)
2. Make functionality available with simplest technology
3. Enhance Enhance Enhance

examples: Provide news (any newspaper), send messages (Twitter), send images (Instagram).

A sad state of affairs – nasa.gov requires 3mb of javascript just to render text.

Adapting to Input – Jason Grigsby

Four truths about input

1. Input is exploding – voice control, fingerprint sensors, etc etc.
2. Input is a continuum – we’re device bending = and can no longer make assumptions based on screen size.
3. Input is undetectable – we can’t tell within a browser what a user is going to do to input. Only can tell after the fact.
4. Input is transient – just because I do one thing doesn’t mean I will do it again.

We need to adapt to input

• Design to the largest audience, by default
• Build it accessible – makes it easier for newer technologies to be adopted. See being resilient on the web!
• Design for multiple concurrent inputs because inputs aren’t binary. And…be more input agnostic in vocabulary.

***It’s time to retire “click here”**** We’re entering the era of pointer events – abstract contact with inputs.

Progressively enhance inputs – do the new cool stuff. Warby parker using the gyroscope, beacons instead of apps to control stuff in the future.

Make inputs part of your test plan. Your testing lab is the local Apple, AT & T and Verizon store.

Unfortunately, I had to miss Designing Meaningful Animation. 

I was bursting with excitement because…Gerry McGovern! I am inspired by his work and his singular focus on solving user’s problems and identifying user tasks. I am the living heart eye emoji when it comes to him.

Top Task Management: Making it Easier to Prioritize – Gerry McGovern

How can we get the information to you as soon as possible Google is about solving problems for you.
i.e. search results – to the info shown IN search results – to the info showing up in the URL.

When you understand the task the speed and expectation becomes faster.

Interesting test results – whichtestwon.com

Smart people sitting in a room – worst way to design a website. There is a huge difference between looking at and using a website. Preferring vs using – a gut instinct isn’t good to listen to.

***Tiny traffic is where the ego lies in an organization*** As if most people care what an organization says about itself. All this tiny traffic garbage damages users getting to actual tasks.

Organizations are really good at getting in the way of people doing what they need.

The most skill we can have is understanding our customer’s needs. Move away from ego towards empathy.

Marketing is like antibiotics; we’re becoming immune to it. More cynical to messages. Brand value is in decline and customer value is rising fast. Consumers and users are less and less trusting of messages.

Intangible assets

• customer base, intelligence
• trust moving away from orgs, moving towards friends and me.

Identify those tasks

• Top 50 search terms
• To 50 pages, files (PDFs count too!)
• Trad. media
• Emails – what are your customers emailing you about?

Discover the user ecosystem, instead of yours.

Web teams must manage the tasks – outcomes as well as components. When identifying tasks, teams must establish target times for completion.

Constantly improving and iterating – digital is never static. Always measure your tasks and environment.The distance between users and org is farthest in digital, and most crucial to understand.

The Physical Interface – Josh Clark

Interfaces are requiring us to be more robotics instead of interfaces being more human.

Interest lies in the mundane technologies (like auto car windows), them becoming:

• cheap
• functional
• accessible

The best interfaces translate intent into action. Mobile gives computing power to immobile devices through bluetooth – everything can be a sensor (diapers, asthma inhalers..)

What if a physical store could do what a online store does? Amazon’s physical store is the start of this. You could touch the product for more info, walk out of the store to buy it (just like Food Innovation Center’s RFID project!)

Where is the universal connector network? The physical web, broadcasting its interface -> like broadcasting a URL. (we could do this for user test screening!)

Objects should speak only when there are important things to say – goal is not to make things talk but to improve the conversation.

We’re moving into surveillance capitalism – at what point are we no longer controlling objects and are being controlled by them (ie. Siri teaching us to say names in a weird way). Our values amplify our humanity.

The Ethical Design Manifesto – check that they values of your creation bend to your lives.

Hello from Day 1 at An Event Apart Seattle. We got lunchboxes as swag – my kid will be thrilled.

Designing with Web Standards – Jeffery Zeldman

He started out the talk describing problems we are all facing – 1000s of devices, folds and feeling like a fraud and insecure because he can’t keep up with code, the new tools and the new things to do.

Do we need CSS? We can do it all in a JS framework! But scripts fail.
Bloat then – Dw
Bloat now – Bootstrap (“Using MS Word to send a text message”). Bootstrap’s a great way to prototype, not good for production code.

Modern web standards bible- Adaptive web design by Aaron Gustafson

Your brand happens between devices. CSS flexbox makes it easier to separate layout from presentation.

The people writing the CSS need to be talking to each other

• Make style guide
• Hire a code design director.

Rules for designing with web standards:

• Content & structure 1st
• Remove distraction. Design is 90% typography and 90% whitespace
• Design system to serve content
• Style is servant to brand and content
• Speed is very important
• Design to make user clever.

Designing Deliberately – Yesenia Perez-Cruz

Some of my really sharp coworkers have been talking to me about performance for over a year. Now I really get it.

Performance is a design feature. Prioritize performance from the beginning.

Beauty and usability are in balance. The goal is to deliver core content quickly, by being deliberate with design choices.

Three stages of the design: Core > Enhancements > Leftovers

A user’s perception of when the content was usable (readable) is more important than actual load time.

Ways to make performance a priority…

1. Make performance a project goal. Good for users (keeps em happy and coming back) which is good for business.
2. Set a performance budget – a tangible way to talk about speed. Every design choice has consequences. “That carousel will cost you 700kb”. Performance budget builder
   1. Videos are great for showing speed.
   2. Webpagetest.org
   3. For every design decision, we must ask – what value does this choice provide?
   4. When performance guides design decisions, decisions are made less arbitrarily.
3. Performance budgets help us design deliberately. Web fonts are overused and that comes at a cost. Do you really need web fonts for smaller screens?

Consistency does NOT have to mean identical – a singular design expression, never uniform or static.

The bad part about brand guidelines are that they can be too rigid – time to think about brands in more flexible ways.

A new web strategy – Start with clean experience, then layer on brand experience.

Designing modularity is a precursor to style guides. Identify reusable patterns and use only what you need. Think modularity to differentiate just enough.

cssstats.com – How many styles do we have?

Oregon State University: 34 unique colors, 53 unique background colors (total redundancies here), 12 font families, 33 font sizes (!!!)

Real Art Direction on the Web – Jen Simmons

I probably understood this session the least, but I understood enough to get excited about some of the possibilities!

Bootstrap and 960 Grid system is the reason that websites all look the same today. Turned web layouts into a multiple choice question.

Break away from that –

• Use negative space as a way to guide the eyes. Communicate using space. Create an oasis.
• Get off the grid design.
• Use odd number instead of even number of columns – gives you a different look.
• Give the users with the latest browsers great experiences – don’t kidnap everyone and hold them in IE 8-land.

labs.jensimmons.com

Viewport units – sizing things relative to the viewport size

Object-fit – controls the size of the box and adjusts the aspect ratio of the units.

Css-shapes – breaking out of squares to flow texts around objects. CSS Shapes editor (for Chrome) does the math for you.

Clip-path – breaking out of squares and rectangles.

Css-round – can’t really be used yet (browsers aren’t supporting). Using polar positioning to determine angle and distance.