SXSW 2013: Fun & Games with CSS3

Chris Ruppel
Frontend Developer
Four Kitchens

Presentation Description

Chris Ruppel demonstrates some bleeding-edge creative concepts you can achieve using CSS3. Examples aren’t as practical as they are inspiring, showing off the possibilities of CSS3 and touching on components like animation, media queries, masks, transforms, transitions, filters, shaders, and 3D.

The audience should walk away with excitement, new awareness, and the desire to implement some of this awesome eye candy in a practical manner.

Presentation Note

We shouldn’t be calling it CSS3, as it is just CSS with modules. One of the modules just happens to be CSS2.1, which encompasses all of the existing styles.

Transforms

3D Transforms can be a little complex, but what is cool about them is they are inherited by their children just like other CSS properties.

Make sure to do all of your 3D Transforms with ems, as it will change monitor to monitor.

  • Translate (moving on x, y, z)
  • Rotate (x, y, z)
  • transform-style
  • perspective: an integer representing distance from camera, measured in px.
  • perspective-origin: vanishing point of the perspective effect
  • translate()
  • rotate()
  • backface-visibility: specifies if you can see this element when it is not facing you. A polygon traditionally in 3D rendering is off by default. However, with CSS3 they have enabled it by default.

Resources

SXSW 2013: Learning Experience Design from Superman

Timothy Parcell
Manager Experience Design
SapientNitro

Presentation Description

A geek’s breakdown of the history of comic books and the parallels and principles to modern experience design.

From their shared roots in the 1930s and 40s, with Siegel and Shuster’s Superman ushering in a Golden Age and Chapanis and Fitts establishing the field of experience design through their efforts to redesign airplane cockpits to consider human factors through more modern milestones like Watchmen, Y: The Last Man, Dyson Vacuums and the iPhone, the two fields have helped shaped our culture.

And while Norman coined the term ‘user experience’ and Nielsen has educated many designers on usability, Lee, Kirby and Eisner can certainly give lessons that any experience designer can apply to their next project to make it more engaging and memorable.

Explore the worlds of the Uncanny X-Men, Spirit, Green Lantern, Zappos and Amazon.com to discover that while the mediums are different, the fun and design are not.

Presentation Notes

How do you define experience design? The craft of building lasting relationships between people and brands. Information Architecture, user experience, usability, research, etc. are all different parts.

Brand

A brand cannot just be a symbol and icon. It must as well have values behind it. What are the values of the brand itself, of the people who buy the brand, and how do we tie those two together?

Design

One image can say a lot to a person. When you talk about design, you need to talk about the medium. In terms of mediums with comics, it is paper. With the Hulk, original printing presses would skew the color of him so much that sometimes he would be gray, black, brown, etc. It wasn’t until later that they decided to make him his iconic Green.

Stories and Themes

In experience design you look at how to engage, and how you engage in design. Experience design extends beyond just web design, because you need to look at how people view your product. Stories have memory moments, such as “with great powers, comes great responsibilities.”

Audience

Film makes you a spectator. Comics make you a participant. Comic books were one of the first medias to publish feedback from users in the back of the comics. In the 1980s DC took it even further and opened up two 1-800 lines and asked if Robin should die in the end or not. Fans didn’t actually think that DC was going to follow through on it, but Robin died.

Today, typical comic book readers are 18-35 years old. We need to take that into consideration with who is our target audience. On a bell curve you can see that there are new people on one spectrum, and nerds on the other. Somewhere in between, the most users of Comics, are everyone else. You need to target your largest audience, but don’t neglect the new people or the nerds.

Scalability

How does a system grow over time? Not very often do we have something that just stays the same size. The first Green Lantern (1940) had a horrible costume. It wasn’t until the 1950s that a new Green Lantern look and feel was released (the most iconic). Change is risky. Change is colorful. Change is violent. Change is fast.

Continuity

Things kind of remain the same, starting with one point and slowly changing instead of completely starting over. What can I do where? Target your audiences for each medium, but try and keep a continuity between them all. What does the audience expect at any given time? You’ll want to attract to experts on the bell curve by giving them easter eggs. For  the new people you’ll want it to still be usable.

Epilogue

Everything in comics has to work, or else it fails. We need to know how our customers feel.

  • Make your brand stand for something
  • Get the details right
  • Tell a great story
  • Make it simple
  • Make it for your audience
  • Know your medium(s)
  • Don’t be afraid to start over
  • Have fun

SXSW 2013: Sex & the Startup: Marketing to Women

Carley Knobloch
Founder
Digitwirl

Presentation Description

Move over tech portals — if you want rapid adoption for your startup, it’s all about lifestyle magazines and daytime talk shows. In case you haven’t heard, women make or influence over 85% of the household purchases, and they’re ravenous for technology that fixes their lifestyle problems. Will your startup deliver? Let’s discuss marketing tactics that work, and ones that will get you shunned by the fairer sex. I’ll share all I’ve learned developing my web show, helping tech startups and clients like Intel and Cisco reach women audiences, and serving up tech tips on the Today Show. Plus, I’ll poll my audience and peers in blogging and mainstream media to bring you real-life answers to common questions. Warning: Appealing to women just might help you build a smarter product.

 Presentation Notes

First, find out who you’re talking to. Create a customer avatar  such as a user-story (name, age range, things they may be interested in which influences your product).

Women are not looking for cool apps, or apps that are tech-loaded. They’re interested in simple apps that simplify their lives.

“Everything in your life, organized in ONE place” – Manilla

Designing great products for women = designing great products for people.

When you target women, you target everyone, as you’re implying simplicity.

Your product may be killer, but they’re not going to woe women unless they have a great marketing image right off the bat. One of the best ways to do this is to show a quick video. It’s one thing to say a camera is “waterproof” and it’s a different thing to say “your kids can throw it in the pool.”

If you’re designing a product that you want a female audience to adopt, it is probably a good idea to have a woman involved in the design and implementation phase of the product. In this case, you wont have to try so hard to market it.

SXSW 2013: 21st Century Application Architectures

Werner Vogels
CTO
Amazon.com

Presentation Description

Today’s applications have the opportunity to reach a global audience, upset the status quo and transform entire industries. With the arrival of Amazon Web Services, on-demand access to compute, storage and database resources has removed the constraints to building sophisticated, scalable applications that delight and disrupt. In this keynote, join Amazon’s CTO to explore the new rules of application architecture that power resilient, adaptive, data-driven applications. We’ll discuss new patterns of architecting for lower cost, continuous deployment, and greater scale used by some of today’s hottest start-ups such as Pinterest, Animoto, Airbnb and Instagram.

Presentation Notes

In the old world mentality, all resources were constrained: capital, physics, capacity, people, geography, and scope.

When you look at an actual capacity chart of what is being used, you’ll see lots of use on the weekdays and very little on the weekends. In old world thinking you choose to have a little buffer of 15% over the top points, and thus you have a lot of waisted resources that are not being used. Furthermore, at the end of November it spikes even more, making it a loss of almost 76% of their old world server mentality.

The new world is completely unconstrained. What does that mean? It means you can start building architectures in ways you could have never done before. This idea is: secure, scalable, high performance, cost-effective, and fault tolerant.

Everything is now, that used to be physical, a programmable resource: data cents, networks, compute, storage, database, local.

In the past, most of architectural resources went into knowing that you were restricted by those efforts. Not only can you build them in terms of resources, but you can build them so they fail less frequently. The reason why most old world servers failed is because you cannot accurately measure what resources you’ll need when customers change their mind and/or give you outlying needs for server reliance.

The Commandments of 21st Century Architectures:

Controllable

Architect with cost in mind. Resources can change throughout the lifecycle of the project. Decompose into small, loosely coupled, stateless building blocks. If you want to build an architecture that can scale very fine-grained, you need to build the boxes smaller and smaller.

If you want to build new applications, you should leave behind the old world mentality, and start using the cloud as native cloud.

Automate your application and processes. If you actually have to SSH into your server to manage it, you’re doing it wrong. Let business levers control the system and manage what is happening to it. These tools will allow it to determine when it needs to scale up, and when they need to scale down.

Resistent

The most important thing, even before security reliability, is security. Integrate security into your application from the ground up. With the cloud in AWS, they give you very fine tools to be able to protect yourself in terms of security groups, identity access management, and RAID.

Don’t treat failure as an exception. Working hard to prevent failure costs you more resources. Deployment isn’t much different than a failure path.

Amazon rolls out a change into production, on average, once every 11 seconds.

Adaptive

Objects should not be replicated beyond necessity. Those solutions, where you make the least assumptions, are likely to be the most successful. One of the things in modern architecture is you assume nothing. If our world is no longer constrained about resources, we don’t need to make any assumptions.

Change your mind, often, whenever you want. Don’t be afraid to make mistakes.

Data Driven

Instead of having models about how the world works, you’re going to instead use exact data to drive your application. Focus on the whole distribution. What does that mean? If you look at a bell curve, and it is based on customer experience, that means that you have 50% of customers that are getting the worst experience. And with this, you need to know how much worse. If you can actually focus on this, and you can control it, you will do great.

Amazon.com doesn’t try to recommend you anything you haven’t already bought. However, if you haven’t every bought anything with them, then you can just display anything. With past customers, they compare your last 1500 purchases, which is very process intensive. That needs to be fast.

Put everything in logs so you can determine everything that has happened in times of failure and success.

Lastly…

Keep in mind that you can always just switch it all off. When you go home at night, and you’re in testing, just turn it off. There’s no need to run processes when nothing is happening on it.

SXSW 2013: Interface Transitions: Designing the Space Between

Corey Chandler
Principal Interaction Designer
Deep Dive Design

Jorge Furuya Mariche
Lead UX Designer
HTC

Presentation Description

Interface transitions are the subtle (and sometimes not-so-subtle) transitions that take place between different points in a user experience. From the subtle effect of a pin dropping onto a map to the infamous Flash-based website splash-screens, interface transitions can add delight or dismay to the user experience. This session hopes to articulate the different types of interface transitions, show good and bad industry examples of their use, and help attendees be aware of how they can use interface transitions for their own work. As a bonus, we’ll even examine ways that other fields leverage conceptually similar transitions, including film, classical music, and architecture.

Presentation Notes

In many areas exist transitions, such as music, dance, architecture, and even culinary arts.

Why use interface transitions? Interfaces are meant to be tools to support activities and just like the tools we use in the physical world a polished transition adds perceived value to these tools.

Motion – perhaps the most used tool for establishing transitions in interfaces.

Akinetopsia – the inability to perceive motion in our field of view accurately. It iss a neuropsychological disorder. It’s your mental ability to remove transitions between objects movements to fill in the gaps.

Interface Transitions help us immerse people into the digital experience.

Create a subtle, effect that enhances the overall experience of an application subconsciously. There are 4 different categories of transitions that a designer may want to invoke.

  • Discreet: Transitions that you barely even notice that it is there. Fast motions that cause quick transitions often help soften the edges of your application.
  • Showcase:This introduces a recognizable effect for the user to perceive and enjoy. Transitions the user is supposed to watch and enjoy. Think about a video game where you have to watch the character reload a gun in a first person perspective. This is a slow process and transitions from an empty gun to a full one. It makes you feel like you’re actually in the environment. The time introduced in this case is actually a game element as well.
  • Educational: Educates the user as to how the system works. An initial transition that shows a user how to navigate a phone, for instance.
  • Processing: Masks the processing time. For instance, a loading screen, but in an interesting way.

All of these effects can be abused, rather it be causing a usability issue, or long wait time.

Considerations when creating transitions:

  • Consider introducing a discreet transition any time an experience suddenly changes.
  • The more often an interface transition is triggered, the more likely it should be discreet (it gets annoying).
  • When adding showcase transitions make sure they are not accidentally introducing false educational elements (such as things flying in from the side or bottom, without anything to do from that area).