Julie’s Vegas Flickr Set

Vegas. What else needs to be said? It’s been a few weeks since I returned and life is finally starting to get back to normal (ish). Future Insights Live was an amazing conference – there were great talks, great people, great insight, great parties ;), and, of course, great Vegas. This inaugural conference definitely rivaled the best of them, so hopefully we see it coming back year after year. Check it out if you have the chance!

Keynote – A Happy Grain of Sand

Aran Balkan | @aral

This was probably my favorite keynote of the week. It was a highly motivational, very entertaining kickoff to the conference. The core of Aral’s presentation was the idea that a person’s life is alike to an hourglass, with each grain of flowing sand akin to a moment in that person’s lifetime. Around this idea, we can try to create as many good moments as possible through friendly and intuitive experience design. With this we looked at various good and bad experience designs – everything from toilet arrangments, to laundry workflows, to websites. A few of my favorite quotes:

Your app shouldn’t look like your database just threw up.

Embrace the “Don’t Be A Fucking Idiot” design plan.

What We Don’t Know

Chris Coyier | @chriscoyier | Slides | Slide Writeup

Chris gave a very energetic talk on the many things we don’t actually know about our website visitors and what we should be doing to ensure they get the best experience. I won’t list out each of the things we don’t know – see the Slide Writeup above for a great overview. But I will list off a few of the helpful resources he presented:

A Responsive Process: One Web to Rule Them All

Steve Fisher | @hellofisher | Slides

Steve’s talk walked us through the responsive design process that his company, Yellow Pencil, follows. There wasn’t a ton of new stuff here, as it was fairly basic. But, a few very helpful resources were presented. First up, the process:

  • Discover – Abstract and understand the content before going to design.
  • Design
  • Develop
  • Deploy

The helpful resources:

Design Basics for Developers

RJ Owen, Michael Salamon | @michael_salamon | @rjowen | Slides

This was a pretty helpful high level overview of the design process and the decision making that goes along with it. First, we identified the core components of design, as laid out by the Paul Rand Retrospective: order, variety, contrast, symmetry, tension, balance, scale, texture, space, shape, light, shade, and color.

Next, we walked through the 6 Key Interactive Features of Don Norman’s Design Vocabulary:

  1. Visibility – obviousness (ie. pull cord on a lamp vs. touch-to-light lamp)
  2. Affordance – recognizable (ie. 3-line sortable item icon in mobile UIs)
  3. Feedback – assurance (ie. progress bars, download percentages)
  4. Mapping – conformity (ie. normal shower faucet controls vs. weird hotel ones)
  5. Constraints – error prevention (ie. smart date selectors)
  6. Consistency – in the way visual objects are used across various interfaces

Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.

jQuery Plugin Authoring Best Practices

Ben Alman | @cowboy | Slides

Ben hosted a very cool and unique talk on, you guessed it, jQuery plugin best practices. What was unique about his talk was that his presentation was entirely in the form of a javascript file – click the Slides link to see what I’m talking about. While many of the concepts of his talk were already pretty familiar to me, there were a few things that stood out – primarily the .end() and .pushStack() methods, which I had never used before.

.end() returns you to the previous element set. For example, the following line will collect all the ul’s, grab their children and append the class of ‘li’ to each, after which .end() is called which returns us to the original collection of ul’s to which we append the ‘ul’ class:

  $("ul").children().addClass("li").end().addClass("ul");

To create our own .end()-able method in a custom plugin, you simply need to return the element(s):

  $.fn.spans = function() {
    return this.find("span");
  };

The .end() method works great until you start returning things like this.parent().siblings().children(). Calling .end() after this would return us to the sibling elements, not to whatever this is. So you might write your plugin method like so:

  $.fn.cousins = function() {
    return this.pushStack(this.parent().siblings().children());
  };

Keynote – Pivoting from the free web to paid apps: how I reinvented Mahalo

Jason Calacanis | @Jason

Well, this was an interesting one to say the least. Calacanis is kind of an ego-maniac, but aren’t most VC entrepreneurs? After chewing out the app contestants for reading off cue cards (as a judge), he proceeded to read his entire presentation off his slides. Hm!

Anyway, he did have a few good points to contribute. I really liked his idea of weekly reviews and peer ratings. He said that implementing a process to review the quality of the application as well as the state of the company as whole, really improved the product and boosted team morale. People felt more invested and knew that their opinions, good or bad, would make a difference. He encouraged people to be as honest and critical as possible, with no fear of repercussion.

Keynote – The Real Me – Crafting Honest Customer Relationships

Aarron Walter | @aarron | Related Article | Designing For Emotion – A Book Apart

Aarron’s was another great keynote discussing the personality and humanity of design. He was yet another speaker talking about creating a great user experience. His biggest point was that creating emotion in people is what will get you and / or your product remembered. He showed a lot of great examples of this, for example: Holstee’s manifesto (I bought the poster), the GE Stories series, and Raleigh Denim.

The main tool Aarron discussed using to define our brands personality is a design persona that answers the question, “Who are we?” Once you’ve got your persona designed, Aarron suggested defining the persona’s voice and tone.

Beyond Attention: Emotion

Brian Wong | @brian_wong

Brian’s presentation was another favorite of mine. His energy and humor made him a highly engaging speaker. Once again, this talk touched on the theme of humanizing technology and creating emotion within the user. He ran through 10 techniques for creating these emotional responses in people:

  1. Moments instead of touchpoints – it’s about how interacting with the product makes you feel, not the laundry list of features – see Apple commercials
  2. Play – This is not gamification. There are 3 layers:
    • Action – posting a photo, reading emails, etc.
    • Achievement – identifying that action, maybe with a badge, this is not the reward
    • Reward – when that achievement is converted into real value
  3. Serendipity – Creating a pleasant element of chance, surprise and delight. When a reward is serendipitous, unexpected, it becomes much more impactful.
  4. Acknowleding and Validating – Approving and acknowleding when the user does something gives them the “eee!!” moment. Ex. Retweets
  5. Choice – Perceived, not true choice. See ShoeDazzle, Doodle Home
  6. Gifts & Rewards – Unexpected. Online acheivements => offline rewards
  7. Humanization of Product / Process – T-Mobile girl, Progressive girl. You can forgive a more human figure that represents a company vs. an inanimate object.
  8. Inception – Getting the idea in someones head before you explicitly tell them about it. Allow clients to come up with the idea themselves before you tell them.
  9. Build a Story – Allow people to follow along a story line, create a window that shows how happy people are when using your product.
  10. Feel or Die.

Help! My Stylesheets are a Mess!

Chris Eppstein | @chriseppstein | Slides

Chris’s talk was particularly relevent to us on Team Venture as our stylesheets continue to be rather messy, although they are much better than they were a year ago. Chris ran through a bunch of ways to create structure, patterns, and rules in your CSS. There were a ton of great concepts in his talk, so I highly suggest you look through the slides at his examples and check out his site’s styleguide. One very notable point was his CSS file structure:

  • Library – no output. mostly presentational in nature. (ex. config, typography, spacers)
  • Foundation – core, shared styles. maps presentation to domain. (ex. resets, layout)
  • App – features, one-off pages, experimental styles, server traffic patterns
    • Features
    • Pages
    • Products

Another relevant point to Team Venture was his color naming system. He sets up color variables with color names but then only uses those color-name variables as color values for other variables. For example:

$orange:            #E77B19;
$light-yellow:      #FFFCEE;
$light-green:       #E9EFCE;

$header-color:      $orange;
$link-color:        $light-green;
$link-hover-color:  $light-yellow;

h1 { color: $header-color; }
a { color: $link-color; }
a:hover { color: $link-hover-color; }

With that, he admitted that naming these variables is extremely hard to do. But by collaborating with designers, you can find names that describe the intent of the design element, rather than the appearance. He also suggested that too-specific a name is far better than too-generic a name.

Touchy-Feely Development

Dave DeSandro | @desandro | Slides

Dave’s talk looked at turning front-end developers into artists by encouraging more right-brain creative thinking when coding. To do this, he went through his front-end artist’s toolkit for creating “evocative interactions.”

  • Animations
    • Nothing in nature instantly appears
    • Best / cheapest way to get a “whoa”
    • jQuery animations
    • CSS transitions
    • CSS @keyframe animations
    • SVG path animations
    • GIFs!!
  • Reverse Transformation
  • Image Manipulation
  • Particles
    • A collection of items, each with the same behavoir but different properties
    • ex. Undulate Graphene

Conclusion

One of the biggest themes I kept hearing at Future Insights Live was this: give your users a positive emotional response by providing them with an excellent design experience. There are many ways to do this: responsive designs, animations, clean intuitive interfaces, humanized technology, and wow factors – just to name a few.

Additional Resources

Yay! You made it all the way to the bottom! As a gift to you, here’s my flickr Vegas slideshow! :)