21 Things I learned at the 2013 Future Insights Live Conference in Las Vegas

Graffiti Wall at the 2013 Future Insights Conference in Las Vegas

What happens in Vegas, should not stay in Vegas. At least when it comes to the knowledge gained during the three days I attended this fabulous conference (April 30 – May 2). A big thanks to Sara, Ryan and the other fine folks of Media Temple (the best web hosting you can find!) for providing the graffiti wall as well as free drinks and a very fun excursion to the Las Vegas Vintage Pinball Hall on Tuesday night. I won’t go into more detail…

 

1 .Web Design should not be done in Photoshop. Pixel perfect static layouts are dead. Well, the intricate design bits can be done in Photoshop because there is no other tool better suited to create the “look” and nice little details. But before opening Photoshop, it might be useful to use a tool called StyleTiles to get client approval on the basic structure, fonts, colors, overall feel. This starts the client conversation without spending lots of time and money, and it sets expectations that won’t kill you. When this basic design is established, build a fluid, ideally responsive prototype based on the wireframes you or an IA created in any of the web design & prototyping tools out there (thanks Dan Rose for your list). Or build it directly in a CMS if you have good knowledge of one, as Drupal expert Jason Pamental recommends. Test the hell out of that prototype, improve it, then finesse the design in Photoshop so it becomes a real beautiful UX experience.

 

2. Sketch out ideas on paper. Funny to hear that at a technology conference. I knew this, of course, as a member of late 80s and 90s advertising creative scene where we would carry stick figure drawings to the client. But shiny toys and technology had me distracted for a while there. Paper is unforgiving and calls out BS whereas shiny comps can hide emptiness and usability problems easily. And use paper and pen to sketch out hierarchy for 3 to 4 different screen sizes before building that responsive prototype!

 

3. Create Collages: Another thing I used to do back in the days before internet, was cut out cool type, graphics and images from magazines and fill look books with layouts and ideas for later inspiration. Now all that is back in digital form with what Dan Mall calls Element Collages. Element Collages are also great to save bits & pieces of ideas, like a digital scrapbook. Love the idea of playing around again before doing the pixel work in Photoshop. Why didn’t I think of that?

 

4. There is no perfect process. in the end every project is different and requires extreme flexibility warns Patricia Korth McDonnell from Huge in her talk Break the rules to start innovating. Dan Rose adds “Process supersedes software. The integration of the software into our process is key.” So, once you figured out the best process for a particular project, the software will follow. Guess this means having to learn something other than the Adobe Design Suite apps…


5. Quality and shipping are in a constant tussle for top priority. Cameron Moll quotes @markab: “Programmers don’t burn out on hard work, they burn out on… not shipping”. For control freaks and perfectionists like me that means it’ll good to let go of some control. OK, Cameron…

 

Countdown to free drinks sponsored by Media Temple (mt)

 

6. We are all impaired. At least temporarily. Blind developer Robin Christopher opened my eyes in his talk From Al to robots, from apps to wearables – let’s design for everyone, ok?  to why accessibility really applies to all of us. We are motor impaired while driving or vision impaired when trying to read our smartphone in the bright sun. Felix Baumgartner was vision impaired when he did his record free fall jump because the high altitude misted up his visor, so he couldn’t read any of the data feed and had to gauge when to deploy his parachute. With an additional audio feed this wouldn’t have happened.  People are distracted all the time, we cannot count on their 100% attention, so make the website or app “idiot-proof”. Luke Wroblewski calls it being there with one eye and one thumb. So think of all the possible ways how an experience can be made better by adding options for all of our permanent or temporary impairments.

 

Graffiti wall detail

 

 

7. If time and money didn’t matter, what would you spend your days doing? That’s what Carl Smith asked his employees and turned this flailing company around. So think of what you really love and do it. Don’t be shy to ask for help with skills and resources, or if you are an employer, help your employees with strategy, ideas and money to pull their ideas off the ground. You are not only making them happy, but your company will benefit as well from the publicity.

 

Hanging at the pool at MGM Grand during lunch break at the 2013 Future Insights Conference in Las Vegas

 

8. Take care of yours and others work life needs. Cameron Moll outlines in his talk Crafting Virtuoso UX Teams that taking a break from work improves it. A moderate level of ambient noise fosters creativity, so don’t tell the kids to turn the music off when doing homework (as long as it’s not Metallica on full blast)… There are even websites to give you that creativity enhancing background noise: the coffeeshop background or the sound of rain. Also important: finding a good balance between isolation and collaboration. Not everybody can work in open office spaces, and not everybody can work isolated from home. Think of interruptions as important to the work, not as interruptions.

 

9. You only get 9 seconds to capture your user. I believe this theory was first expressed by Sally Hogshead. Jon Setzen, Creative Director @mediatemple is even more pessimistic. In his brilliant Telling Stories Online talk he claims that goldfish have a 9 second attention span whereas we humans only have 5. Ever more important to make your homepage captivating by helping your customers see quickly how to solve their problem: with a clear story told mostly visually, be it a photo, video or both. This is setting the scene and crucial to grab your customer’s attention. The rest of the experience should keep telling that story with solid middle and end parts (the latter being the point where your customer can’t help by buy your product). Insert lovable characters, elements of surprise, unexpected twists, autobiographical stories and brand ambassadors (if you have them).

Examples of great home pages: Square, Bellroy, Method (set the scene), Arlo Jacob (autobiographical story). Of course, story telling goes beyond the homepage and should be used in whatever social media channels work best for the brand/concept. What will make your site memorable? Always remember that we are designing systems of relationships and hierarchy to infer meaning and importance. Think about design meaning, not pages, reminds us Jason Pamental. Steve Jobs said “Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.”

 

10. Test, test, test. I didn’t see Ashley Carroll’s presentation on A/B Testing, but the importance of testing your website / app / product was mentioned in almost every talk. Michael Jovel quoted Eric Ries “We shouldn’t waste time building stuff nobody wants” and Theodore Levitt “People don’t want to buy a 1/4″ drill, they want to buy a 1/4″ hole” in his inspiring talk Iterating Awesomeness: Designing Value through measurable outcome.

Usability testing can be done with a paper or live prototype, and can be as simple as observing people interact with it and noticing where confusion arises and people get stuck or frustrated. This shows any issues with the product before a lot of time and money are spent. Once a basic site with this feedback implemented, a tool such as Optimizely can help measure more detailed fine-tuning. For more device based testing Brad Frost recommends “Get all kinds of devices with different screen sizes and operation systems to build up your own little testing lab for ranges, it doesn’t have to be every device out there”. More details on device testing on his blog. And more info about basic usability. Cameron Moll advises to spend two hours every six weeks watching users interact with the product. He quotes Jared Spool “Hours of useless meetings could be replaced with just a couple hours of testing to see what users are actually doing.”

 

11. Make your website responsive, for christ sake. Or even better, create a multi-device design which considers the needs of different devices (which also change depending on what we are doing at the moment and where we are using it). Do so in the planning stages, because “RWD (Responsive Web Design) can be expensive if you try to make it after the fact” warns British Opera (the browser) man Bruce Lawson. “The Web has left the Building – it’s in the pocket, the car, on the couch, the table….” reminds us Jason Pamental.

 

12. Graphical user interfaces (e.g. websites) are becoming history. We are currently impressed by Natural User Interfaces such as gesture based input devices (xbox Kinnect, Axis Leap Motion, Google Glass) where the content itself serves as the interface and which makes use of motor skills learned in our lifetime because it can turn every day objects into sensors. Computing is now interacting with the real world, bridging the gap between input and output. The future though are First Person User Interfaces which Luke Wroblewski’s interesting talk was really about. They allow people to digitally interact with the real world as they are currently experiencing it. Interaction is triggered through a set of always-on sensors which give instant, relevant output based on your current position. This IPS (Indoor Positioning System) with NFC (Near Field) uses 9 different sensors, among them a gyroscope, altimeter, accelerometer, compass, magnetometer (compass) to pinpoint your exact location. One early example of this principle on a mobile is the yelp.com app on iPhone. Shake it and you’ll see real-time markers of places, restaurants etc around you (see screenshot below). Then there is also Google Glass as a wearable, more advanced version. I just wonder how socially weird it is when people keep tilting their heads back and forth to turn the glasses on and off… “Was that a YES, sir or are you just turning your Google Glass on?” Add to that the constant “Ok Glass” and you’ll get a whole bunch of socially awkward people walking around… Luke suggested that this emerging interface technology needs a lot of design help. The trends:

Hardware
Desktop: declining
Laptops: mature
Smartphone & Tablet: growth
Wearable: emerging

Interfaces
Command line: declining
Graphical user: mature
Natural user: growth
First person: emerging

Yelp app shows places around you in real time with 3D positioning

 

13. Reduce page load size for mobile: For images, scaling down images as much as possible, using media queries, adding webP image format to code (Chrome and Opera Mobile only), putting all image sizes into the svg file (@standardista), serve device appropriate image size by using tools such as sencha.io. More details on reponsive images, adaptive images and Standardista’s Clown Car Technique.  Use icons built into fonts versus using an image, but create a custom character library if you only need a few characters from a particular font. Avoid large gradients, in this case an image is better than a CSS gradient.

 

14. Research, Research, Research. Repeat. Jason: “Psychology and Cognitive Science are the New Black, Task-Appropriate Design is the Other New Black”. He recommends reading Neuro Web Design and Drive. Take at least an hour once a week to do research and expand your knowledge base. Schedule your work around it, not the other way around. Because Responsive Design is still new and UI patterns are evolving, even though conventions are emerging. Decode your favorite apps to see what pattern work, they might work on the web as well. Michael Jovel advises to build your own UI pattern library.

 

15. Let the Games Inspire You. The talk by Jeff Burtoft left me with three messages. First, without games we would still use slow computers. Second, the web is a viable game platform now. And third, we need to code for feature detection instead of browser/device detection, because the days of mouse-only or touchscreen-only devices are over with new laptops now having both. That means adding pointer media queries in CSS, and an (easy) migration from mouse events to pointer events in IE 10 (Microsoft). Guess what a “coarse pointer” refers to in code? Right, a finger. More info here. Jason adds “Tasks vary by circumstances of use. How users accomplish those tasks varies by device capability (hover, touch, swipe, shake)”. Bruce Lawson says instead of reacting to device specific user input, e.g. command Z on Mac, control Z Windows/Linux, shake on iPhone, the new command should just be “UNDO”. He calls this “Indie UI”  (Independent user input) in his talk The Future of Responsive Webdesign and it sounds promising, since I would actually be able to command a PC! @lchalvorsen did the brilliant illustration below during his talk. Love it!

 

 

16. Designing for TV: Bruce Lawson rants: “At normal viewing distance, the smart phone is larger than the 50″ TV screen!” It’s really not a place to do intricate design or require searching, browsing, updating and buffering! Viewing movies and photos are good on a TV screen, but that’s about it.

 

17. From Jeff Atwood’s talk I only understood one sentence: “Atwood’s Law: Any application that can be written in JavaScript, will eventual written in JavaScript.”

 

Cappuccino "jave" break at FIL Conference in Las Vegas

 

18. Kids, study Computer Science. There is not enough talent in Silicon Valley, number of computer science students are dropping, but the need and pay are huge.

 

19. Promote Code, Design and Business Literacy advises Michael Joval. But literacy is not fluency! There is no unicorn that can do everything. And – don’t get caught up in the process.

 

20. Own your data. Take your data important. Do not give it away for free, e.g. surveys, advises John, developer at PayPal.

 

21. Dave Shea’s CSS Zen Garden will be updated to HTML5 and CSS3 and launch for new submissions starting tomorrow, Tuesday May 7th, 2013! Yeah.

 

I didn’t attend any session on web fonts since there  hasn’t really been much of new development in the last year or so. Therefore just a reminder to finish this lesson: Don’t use Arial. Ever. Again.

Skoda Plus Banner

Skoda Plus is Skoda’s Guarantee Program for their Pre-Owned Vehicles. The interactive banner showed what buying a used car without Skoda Plus feels like.

skoda-plus

Click image to play banner.

Creative Director Digital: Claudia Muehlenweg
Agency: Leagas Delaney Hamburg (concept), Leagas Delaney Praha (execution)

Skoda Superb Banner

To advertise the all-new Skoda Superb, we selected a feature which was a world’s first: The Twindoor. The Twindoor is a simple but genius mechanism that lets you open the trunk door of the Superb Sedan in two ways: like a regular sedan and like a hatchback. That allows for transport of bigger items that wouldn’t normally make it through the trunk door of a normal sedan.

We created a floating banner that interacted with the website it ran on.

Click image to view.

 

Creative Director Digital: Claudia Muehlenweg
Agency: Leagas Delaney Hamburg
Interactive Agency: Freiland Hamburg

Bym-WG Banner

To increase traffic to newly-launched community site bym-wg.de, we created a banner concept that playfully reminded viewers just what life with roommates is like. Living with roommates 2.0 is what Bym-WG is all about: Sharing the fun without having to do the dishes. All banners were standard 25K banners.

Click images to see animations.

bympizza1

 

bymgeschirr3

 

bymwaschmaschine2

 

Creative Director Digital: Claudia Muehlenweg
Agency: Leagas Delaney Hamburg
Interactive Agency: Freiland Hamburg

Lexus US Open Tennis Banner

To advertise Lexus’s sponsorship of the US Open Tennis Championships we created banners which applied the pursuit of perfection to tennis balls.

Lexus US Open Banner

 

Art Director: Claudia Muehlenweg
Copywriter: Joelle Sellner
Creative Director: Gabrielle Weinman
Agency: Team One

Lexus ES Multimedia Banner

The ES multimedia banner is aptly named as it’s rather a flash microsite disguising as an expandable banner. It won Bronze at the IAAA 2006 (International Automotive Advertising Awards).

Banner animation [click to view]

ES Banner on Epicurious website

 

Video about banner [click to view]

ES Multimedia Banner Video

 

Art Director: Claudia Muehlenweg
Copywriter: Scott Ivener
Creative Director: Gabrielle Weinman
Agency: Team One

Lexus GS Hybrid Launch Banner

The new Lexus GS Hybrid is as fast as it’s green.

Click images to view animations.

GS Hybrid 728 Banner "Fast lane"

 

GS Hybrid 160x600 Banner "Fast lane"

 

Art Director: Claudia Muehlenweg
Copywriter: Scott Ivener
Creative Director: Gabrielle Weinman
Agency: Team One

Lexus GS Hybrid Multifunctional Banners

To build up sales volume for the newest addition to Lexus’s Hybrid line-up, the powerful GS Hybrid, we created a multifunctional banner campaign.

The banners included additional content such as information about the car as well as direct response options to Build Your GSh or sign up for a test drive.

Click images to view animations.

GS Hybrid 728x90 Banner "Energy"

 

GS Hybrid 728x90 Banner "Fast"

 

GS Hybrid 728x90 Banner "Colors"

 

GS Hybrid 336 Banner "Energy"

 

GS Hybrid 336 Banner "Fast"

 

GS Hybrid 336 Banner "Colors"

 

Art Director: Claudia Muehlenweg
Copywriter: Scott Ivener
Creative Director: Gabrielle Weinman
Agency: Team One

Lexus ES Autospies Banner

This banner for the all-new Lexus ES ran only on autospies.com. Therefore we were able to create a very unique message, tailored to the audience of the site: car freaks that want to know everything first.

Using the point of view of an Erlkoenig (is this word for a new prototype car being tested on public roads only used in Germany?) photographer who is desperately trying to get a shot of the new Lexus ES. Well, you guessed it: he was not successful. Instead viewer were sent to lexus.com where the newest shots of the car were already posted.

 

 

Art Director: Claudia Muehlenweg
Copywriter: Scott Ivener
Creative Director: Gabrielle Weinman
Agency: Team One

Lexus LX Sustaining Banner

The LX is the flagship SUV in Lexus’s line up and is as utilitarian as it is luxurious.

 

lx_banner

 

Art Director: Claudia Muehlenweg
Copywriter: Scott Ivener
Creative Director: Gabrielle Weinman
Agency: Team One