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).

SXSW 2013: The Sports Tightrope: Balancing Your Content

Richard Clarke
Managing Editor
Arsenal Media Group

Presentation Description

Official websites are now a major player in the sporting landscape. Sports teams now see themselves as media organizations – offering news that competes with more traditional outlets such as print and television. (And they both have enough problems as it is.)

I am the Managing Editor for one of the world’s most famous soccer clubs. Arsenal Football Club pride themselves on history, tradition and integrity as much as on-field success.

We have also developed highly-successful digital and social media strategies. Our numbers stack up alongside the most successful sporting franchises in the world.

We certainly engage with our fans. But, in the modern world, what form should that engagement take?

Is the ‘homer’ now transparent and irrelevant?

Or, in a digital world in which Twitter has lifted speculation, snap-judgment and bar-room debate (forever the currency of the sports fan) on to a higher plane, is it more important than ever?

That is the question I will explore.

Presentation Notes

How do you make an official site, such as a sports website, meet the demands of the digital age? At what point does an editorial draw the line at social media? With football fans, there isn’t any financial return, it’s not just engagement, it’s love for the game. They want immediate knowledge and data, and they want it now. Is Twitter the answer? How do we balance it correctly?

The position of the Optimist/Realist. We’ve already got the person who we’ll be writing for, but we’ll need a Balance between Cheerleading (hooray!) and Hardening (negative feedback). Optimist/Realist is somewhere between being Balanced and Cheerleading. If you, however, are in the middle like that then you’re lacking a certain amount of residence for those fans who want the Balanced approach. Taking a Balanced position over an Optimist/Realist approach seems better for Arsenal as that’s what the fans want.

First and Formost. Arsenal focuses on Formost as they aim to try and sign players on before it gets out on Twitter, and then be the ones who announce the update before it has begun to spread, but that hardly ever happens. They are the legitimating site, which confirms what really just happened. Thus, they are Formost.

SXSW 2013: The Real Responsive Process?

Aaron Gustafson
Principal
Easy Designs LLC

Samantha Warren
Designer
Twitter

Steve Fisher
Dir of User Experience
Yellow Pencil

Yesenia Perez-Cruz
Designer
Happy Cog

Presentation Description

The web is not a fixed width. So if the medium is fluid, should the process be fixed? Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow.

Diving into responsive design projects can be daunting. Old design practices are cumbersome when thinking in terms of web systems that will span a wide variety of devices and dimensions. Four industry leaders will delve into how they handle the responsive process or how they don’t. A fluid process to match the fluidity of responsive design. Bam! We’ll also explore some of recent successes and failures while establishing why a responsive process is a responsible process.

One web to rule them all?

Presentation Notes

The content should be available no matter what screen size, but just presented differently.

97% of devices were met with a responsive design.

Is responsive web design boring? No, if you’re using the same patterns over and over then you’re not thinking like a designer. It gives us the idea to redesign a process and get into patterns ourselves.

Responsive design gives us the availability to sit down, look at a system, and determine how it is different.

How do we show a wireframe to a client if it is to be responsive?

While Bootstrap and Frameworks are perfect for prototyping, they are becoming a crutch for doing simple things that damage bandwidth such as simple animations that could be done other ways. Using a framework can also make it feel like it is all the same as any other site in a framework (such as Bootstrap). However, on the other end of the argument at least the content is easy to access and see.

Style Tiles are good for companies that already have established brands. So, how do you communicate with those types of clients who already have that? It’s about creating deliverables in a fashion that you can quickly share and get feedback. mood-boards and comps also do this.

Implementing responsive design involves team participation. Two of the most important things for any team is to communicate, and to trust one another. Put both the designers and developers in the same room to create quick mock-ups and ideas for how things will/can function.

Resources

SXSW 2013: The Best Interface Is No Interface

Golden Krishna
Designer
Samsung Design America

Presentation Description

Many believe the future of design is in screens. They’re wrong. It’s time to kill the interface. Because when we think only in screens, we design based upon a model that is inherently unnatural, inhumane, and has diminishing returns. It requires a great deal of talent, money and time to make these systems somewhat usable, and after all that effort, the software can sadly, only improve with a complete overhaul.

This conversation will explore a better path: No UI. A design methodology that aims to produce a radically simple technological future without digital interfaces. In its most sophisticated form, it centers around learning about individuals, continuously improves and becomes exponentially pertinent. Eliminating counterintuitive input mechanisms for natural inputs inverts the contemporary focus of software design to have computers adapt for people, rather than people adapt for computers. The results can have a profound impact on our lives, and your design process.

Presentation Notes

There’s a terrible trend in tech today, and that is we’re getting away from solving people’s problems. What is so fascinating about this awful trend is that it started with something good. However, originally computers were all text base, and that wasn’t very good. Then we got GUI interfaces. Today, our love for the digital interface has gotten out of control. How do you build a better car? Slap a screen on it, and track things that are “more important” than your driving such as Twitter and Facebook.

User Experience (UX) is not a User Interface (UI). We are surrounded by screens, and we should start dreaming of a world with no screens. The best interface, is no interface.

Principals:

  1. Embrace typical processes instead of a UI. Using one of the new smart phone apps to unlock a car-door is 12 steps. The user interface is 10 of those steps (step 1 is “Walk up to car” and step 12 is “Unlock the door”). We think, as a developer or user, that this is a good way to do it as that’s what we’ve gotten used to.
  2. Leverage computers instead of catering to them. Computers should do things we don’t want them to do, but what they should do.
  3. Create a system that adapts for individuals. We’re all unique.

Automatic solutions? They’re very hard to get right, but when you do get them right they become part of our lives. Some people are using UI as a backup. For instance, some hardware is allowing you to tweak features although the normal hardware is fine by itself. Such as an automatic door, which you can always push to open if it fails.

How can we think in this no-UI way? The real problem with the interface is that it is an interface.

NoInterface.com

SXSW 2013: Why Tiny Habits Give Big Results

BJ Fogg
Founder & Dir
Behavior Design Lab at Stanford University

Presentation Description

Over the last year, I’ve coached thousands of people in creating new habits.

Human behavior is not as complicated as most believe. And the received wisdom about habits is often wrong.

From my research and my hands-on practice, I’ll share key insights and surprises about how behavior works.

Presentation Notes

Persuasion Boot Camp

Typically two-days, Crash Course

Path vs. Span: If you set yourself up to do something you have to do day after day, you’re going to fail (path). It’s better to set a tiny goal (baby-steps) of just a few days, you’re more likely to complete your goal (span).

So, how can we get people to do things to get your company to become more successful? In order to have a successful company you have to be able to influence the things people do. We need to, however, be able to span goals down into baby-steps.

If changes are small enough, you don’t have to rely onto motivation.

Tiny Habits Method

Tiny Habits method If you can design your life to create Success Momentum, then you are on your way to achieving big things. Success Momentum is being able to complete little things, but then see that you’re completing a much bigger thing the more you do.

Whenever someone says “motivate behavior change” a red-flag should go off. It’s better to say “trigger behavior change” because behavior isn’t always about motivation. “The new you” is all about revolutionizing your life quickly, and this isn’t right. It is almost impossible to radically change yourself quickly.

You’re going to fail if your goal is to do 25 pushups each day. Your goal should be much smaller, such as 2. You’ll never create a habit if you’ve set it up to fail.

With the term “break a bad habit” the word “break” implies getting rid of it. The best thing to do would be to unsnarl it instead. BJ isn’t an expert in breaking bad habits, but instead he creates good behaviors. So, for instance, if you want to stop snacking, you should focus on the smallest snack you do (grabbing candy when you walk into the office) and then later focus on the more unhealthy snacks (like a snickers bar after lunch).

Priority Mapping

Write down specific behaviors each on different post-it. Then, prioritize them in two dimensions. Top to bottom would be at the top it promotes the business and/or is important (some can be on the same level). Then, after you finish that you do it with your teammates. You then sort them side-by-side as a feasibility rating.

Fogg Behavior Grid

If a university calls and gets a donation commitment of $10/year, compared to someone else who gets $1000 once, what one is more likely to donate more throughout their lifetime? The $1000 once will.

Fogg Behavior Grid

Get “crispy”: Have specific tangible goals. Don’t say “I will drink 8 glasses each day” but instead say “I will put a glass of water on my desk each morning.”

Baby steps are easy to achieve. Big Leaps are not. However, if your big leap is something enjoyable you may be just fine. But when it comes to things that hurt you, like lifting heavy weights, you’re setting yourself up to fail.