SXSW 2015: Green Screen UX: Designing For Context

Justin Smith
Sr UX Architect
Cartoon Network
@xenoabe

Presentation Description

Creating a scene on a green screen takes several things into account such as who the actors are, where they’re placed, and what they are doing. All of this creates the context for the scene. The same principles can be applied to designing UX. We’ll look at three specific types of context I call Person, Place, and Problem and draw the parallels between green screen cinema and UX design. Examples of good and bad implementations of these types of context will be examined and we’ll explore what these stories mean to UX. Attendees will walk away knowing how to look at their designs like a green screen and design for great context in their UX.

Presentation Notes

When users don’t have the full context, they cannot find what they need.

  • Person: The user
  • Problem: What are we trying to solve
  • Place: Where do we place the user when they’re trying to perform the task

Stories are about relationships between the people. But what we want to know is how we build relationships between our users and the product. If a user doesn’t come to your product and find a shared interest, they’re not going to come back. Once you figure that out and you speak to their interest, you use that to foster deeper connections.

1. Person

What’s the common ground?

  • Foster deeper connections
    • Netflix suggests things the more you watch
    • Pandora serves up things similar to what you like
  • What if we took that approach and used it places that currently don’t?

What about when the conversation is one way?

  • Often personalization requires login or cookies to know what they’re doing.
  • Sometimes the user needs to listen to the business.
  • When you go to youtube without being logged in, they show you the most popular videos.
  • Kids go to Cartoon Network’s homepage for games, so they show them front and center.
  • When you go to dropbox, it’s clean and simple and all it has up top is a login/sign-up button.

2. Problem

  • When users are coming to your product, they already know what they’re trying to solve. They expect you to have their resolution.
  • You can use label and copy to guide users. A lot of time you’ll see “laxy copy” like: see more, click here, discover, more info. What does that mean?
  • Give our users more context and build trust by providing meaningful labels.

Mistakes in copy

  • You’re trying to be too clever.
  • You’re trying to be too brief. There’s no reason to click into the content.
  • Involve your copy writer.

#1 Priority in UX: Clarity

3. Place

  • The question becomes: Where is the user in my product when they’re trying to accomplish a task?
  • If you look at the Cartoon Network website there are three sections: Video, Game, Community.
  • How do you organize the page to get the user the full picture they need?

What about when you get it wrong?

  • Demanding an email address before seeing the content. For instance, Groupon does this.

SXSW 2015: Exploring the Future of Connected Objects

Chris McRobbie
Prod & Brand Designer
@chrismcrobbie

Daniel Fogg
Founder
Graftt Ltd
@danielfrogg

Jennifer Dunnam
Assoc Creative Dir
frog
@jdunnam

Presentation Description

This session is an exploration of the future of connected objects and the internet of things. Using different frameworks to understand human motivations, such as the Seven Deadly Sins and Maslow’s Hierarchy of Needs, the panelists will explore what products and services might arise over the coming decades.

The panel is comprised of designers, technologists and entrepreneurs all currently working in the field of Connected Objects, with backgrounds in product design, academia, marketing, corporate R&D and military technology.

Presentation Notes

Physical object through a connection to the internet resulting in a service-layer that has enhanced features and functionality.

Maslow’s Hierarchy of Needs: Psychological theory that we all have to be happy to be able to achieve. Focused primarily on primitive needs, and reproduction. The further up the pyramid you go, the harder they are to solve.

Provocations (9 Levels)

  1. Physiology
    1. Breathing: As air pollution increases, breathable air will be less common. Networked air-masks will become mandatory. They will provide enhanced filtration, environmental sensors, etc. If our faces are covered, how can emotions be perceived?
    2. Food: Measuring physical health is done through what goes into and out of your body. Edible, pill sized sensors with a smart toilet that could catch the pills. This can be measured on a local/personal level, or at a city wide level by measuring everyone’s sewage. There’s a privacy concern with this task that is required by everyone, yet anonymous.
      1. Rome is doing this already to determine the amount of cocaine in the sewage supply.
  2. Safety and Security of…
    1. Health: Implanted items in your body that will check your current condition (vitals) and inject any medication you may need. Think diabetes and insulin.
    2. Resources: Physical materials (plastics, metals, electronics, etc) will be imbued with identifying DNA that’s added when manufactured. This will allow it to be scanned and sorted for recycling.
  3. Love & Belonging
    1. Friendship: Walkabout shoes that will guide you to places where your friends are without you knowing who it will be or without them knowing. These would essentially increase the strength of your friendship connections.
  4. Esteem
    1. Respect of/by others: Clothing with sensors that display your intake of love or emotions. It detects smiles, listens for positive words, showing who’s received their love quota. There are many t-shirts that exist today that describe an emotion, and this idea is quite feasible.
    2. Achievement: As technology for self-awareness advances, so does the opportunity to improve collaboration. Players are aware of one another’s biometric readings and simulated (either mentally or medically) to perform in rhythm for maximum achievement. This will apply well to orchestras, group bicyclists and other group collaboration activities. This reminds me of the new Apple Watch with the heartbeat sharing. This dea is already being tested/deployed to firefighters.
  5. Self-Actualisation
    1. Morality: With the ability to record our every action and interpret that action as morally sound (or not), we will see wearable devices that can judge whether we are good or not. Imagine a priest that provides a pin to his flock, newlyweds could give each other a pin as part of a prenuptial agreement, or politicians may be unable to run for office unless their moral judgement is published publicly first.
    2. Problem Solving: We’ll soon be able to outsource complex problem solving to quantum logic machines and get in-context guidance. This is essentially artificial intelligence, but there’s a qualitative approach to this that we don’t yet have. To solve for this, the quantitative calculation can be done by AI, but the qualitative portion could be human driven.

SXSW 2015: The Evolution of the Web

CJ Gammon
Computer Scientist
Adobe Systems Inc
@cjgammon

Presentation Description

The web has changed a lot in just the past few years and continues to grow in exciting ways. We have new devices and interaction paradigms as well as increasing expectations from users. In this session we will explore inspirational examples of where the web is headed and what new opportunities these provide. We’ll look at demos and techniques that allow us to take advantage of what we have today while looking to the possibilities of the future.

Presentation Notes

In native development for mobile, they use the GPU. As mobile moves forward, there will be more ways to hook into the GPU. For some CSS properties (transform, opactiy, filters) those use the GPU.

caniuse.com

CSS Transformations

There’s a hack where you can tell the browser that you’re going to use it as a 3d element, even though you’re not, which gives you a smooth transition. But this doesn’t work across all browsers, and we shouldn’t rely on them long term.

  • transform: translateZ(0)

There’s been a proposed CSS property that will prevent flickering across devices, and pre-render the transformation on the GPU.

  • will-change: opacity;

Graphics

We have 2d canvas now, but what if we want more? We need a lower level graphics API. Enter, WebGL. WebGL is a low level utilization which allows us to draw rich 3d graphics on the web.

It takes a lot of code (over 100 lines) just to produce a black square in WebGL.

Hardware

The web can now access the camera, gamepad API, Leap motion

Native & Web

The web is getting more capabilities, but there are always going to be exceptions and native may just always be better. We can always create Hybrid apps which allow you to deploy a happy mix. Use the best tool for the job.

Virtual Reality

Stereoscopic rendering can be done with WebGL. (it works with Three.js)

WebVR API allows you to tap into the hardware and see head placement and whatnot.

http://mozvr.com/

Augmented Reality

JSArtToolkit

Designers?

Libraries are great for developers, but how do designers get on board?

bit.ly/cameratool

Blender: Three.js Plugin

Photoshop

  • Word Girl

Flash

  • Flash has support for custom platforms, which allows you to export into any format you want. There exists one for WebGL and Canvas already.
  • He wrote a plugin to export to SnapSVG and load SVG animations in the browser.

Presentation Slides

http://bit.ly/sxweb2015 or http://slides.cjgammon.com/15-3-sxsw/

SXSW 2015: Understanding Ember.js

Luke Melia
Yapp & Yapp Labs
@lukemelia

Presentation Description

Ember.js is being rapidly adopted by companies large and small, from Vine (Twitter) & Yahoo, to startups left and right. This talk will explain why, and teach you about how Ember works.

I’ll explore Ember’s core concepts, and the design decisions behind them. An emphasis will be placed on proper flow of data and events through an Ember app, the division of responsibilities within the layers of an Ember app, and more.

Presentation Notes

Examples of Ember Apps

The big three today

ToDoMVC is nice, but it doesn’t really demo as the size of your app grows. Ember.js works well as your app grows.

  • The Router transitions between a collection nof routes, each representing a high-level application state
  • Each Route chooses the correct model for its state and handles high-level events appropriately (eg: transitions, url changes)
  • Model depends on what environment you program in
  • Controllers present data to a template fro rendering, by providing access to models and by managing local transient state.
  • Template define what the HTML should render (databindind and components)
  • Components …
    • Javascript portion lets you handle DOM events, lifecycle management, and more
    • HTML/Template describes the DOM output

The router DSL is a map of your app. (he showed an example of how that works)

Ember uses Handlebars

Handlebars is a superset of the Mustache templating language (know called “htmlbars”). Emphasis on keeping clean and declarative templates.

{{displayTitle}}
{{#if canEdit}}
{{#linkTo ‘post.edit’ this}}Edit{{/linkTo}}
{{/if}}

Ember’s Object Model (Computed properties and Observables)

  • Ember allows you to do class based inheritance.
  • It has Observers, in that whenever something changes you can have a function fire off.

Ember Data

  • Make it easier to read and write to JSON REST APIs
  • Supports working with relationships between models
  • 1.0 scheduled for June 12th

Embracing Web Standards, and Pushing the Web Forward

  • The Ember community is a leading force in vetting and influencing emerging web standards.
  • This includes Promises, ES6 Modules, and soon, annotations (He didn’t explain this well)
  • Core team member Yehuda Katz served on the TC-39 standards body and maintains close relationships there.
  • ember-cli apps ship with ember-cli-babel, which transpires ES6 features to ES5-safe code.

Testing

  • Excellent tooling for acceptance tests
  • Decent support for unit tests

Liquid Fire

  • Animation library for Ember
  • Very clean separation of concern
  • Demo
    • this.fromRoute(emberconf.speakers’),
      this.toRoute(emberconf.speaker’),
      this.use(‘explode’, {
      matchBy: ‘data-speaker-id’,
      use: [‘flyTo’, { 500 }]
      ….

ember-cli: Amazing development experience

  • It’s a command line tool that runs and watches the file system and automatically does rebuilds. It models your structure as a tree, notices when a branch changes, and just re-generates the changed branches (making it fast).
  • If you CMS+R and it hasn’t finished, it holds the HTTP request until it is done. (that’s neat)
  • Leverages express.js and has built in capabilities for mocks and proxies (see what it looks like if your API is slow vs quick).

Addon Ecosystem

Ember has a 6-week release cycle that’s modeled after Chrome. (Release, Beta, Canary)

In Ember 2.0 they’re not adding any new features, they’re just finally removing the depricated code. They’re making addons that will allow for backwards compatability of the depricated tags if you need them. (Smart!)

There’s an “Ember” extension in chrome which will show up next to “Console”. If you click $E in this new panel, you can then pull up “Console”, type $E, and have access to that object.

Downsides

  • SEO
    • Google sees it, but there’s no knowledge of how Google ranks dynamic JS vs static pages.
  • Time to initial render
  • Rerender performance

Solutions

  • Fastboot
    • Renders initial HTML on a Node.js server by running Ember app in Node-land. You could apply caching here.
    • Precedence in other frameworks
    • Currently under development
  • Glimmer!
    • Diffs dynamic nodes for very fast, update-only-what-is-necessary re-renders
    • In development
    • Initial stats put it on par or better than React’s performance.

SXSW 2015: No, I will (Probably) Not Redesign Your Website

Jon Setzen
Creative Dir
(mt) Media Temple
@jonsetzen

Presentation Description

Designers are always hungry for more creative challenges, always on the lookout for the next cool project to add to their portfolio. Although “everyone needs a website”, it doesn’t mean designers need to work on every project dropped in their lap. In this presentation, Jon Setzen will explain why being selective matters and why web designers should strive to choose good people over what seems like a good project. He will also touch on how web designers can benefit from stepping outside of their online comfort zone, and turn that “can you redesign my website?” project into something more. Setzen will let the audience in on his personal journey as a designer constantly working on multiple projects in multiple disciplines, on and off screen, and will address why the work designers choose today will define what they’ll be working on tomorrow.

Presentation Notes

“Quit your day job and do something you love.” keeps being thrown around at conferences. It should be: “Keep your day job and do something you love at night.” Nothing is better than being able to afford life, while still doing something you enjoy.

Paying the Bills Work vs. Portfolio Work

Our portfolios are filled with the best work we do, and they should be. The work you do today attracts the work you will do and where you’ll work. As you continue to work on Portfolio Work, it’ll eventually become day work. It takes several years of saying “Yes” to build a portfolio. Overtime you’ll realize it’s ok to say “No.” It doesn’t mean you don’t care, or that you’re a bad person, you just need to be selective.

Experience paired with Creative Satisfaction

There’s beauty in function. Even a boring lightswith has a beauty in its function.

We need to think about Desining for Devices, who the people are, where they are, when they are, and why they’re there.

Taking this off line: how can we do this to everything we touch

Rebranded “Better Booch” (kimboocha brand)

Working With Clients

Listen to the voice inside your head. When you start a project with a client, it’s a relationship. It’s ok to say no. It’s important to have red flags (eg: if someone asks for a reference after already seeing your portfolio).

  • You have to like the product or service.
  • You’d happily take the client out for a meal, sit across from them, and have a non-work conversation.
  • They believe you’re an expert.
  • You’d work on another project like this one.
  • The project has to be challenging. Go outside of your comfort zone.
  • You shouldn’t resent having to work on Saturday.

There’s a lot of crapy work out there. You can help people, offer them quality, solve problems, and then you can build a career.