Over the River and Through the Woods, to Portland we will go.
I've never been to Oregon before last week and, despite the forecast for rain, I was totally excited to check out Hipsterville. Iconic places like Powell's Bookstore and Voodoo Donuts were on my list to visit, but I was really headed north for WebVisions Portland.
WebVisions digs into the future of web design, UX, tech and digital media in NYC,Chicago, Portland, Barcelona and Berlin.
When I first registered for this event in November, the summary seemed a little broad but everyone wants to know about the future, right? (Especially us here in Labs!) So I figured it'd be perfect - and it was! There was a fairly even split between developers, designers, and management, as well as a great variety of talks. Out of 50 talks in 2 days, everything from failure to WWE to "the future of the future" was included.
But before all these awesome talks started on Thursday, there were workshops on Wednesday! I had the opportunity to sit in Dan Saffer’s "Microinteractions" as well as Steve Fisher’s "Responsive Content Modeling."
Microinteractions | Dan Saffer (@odannyboy)
The details are the design.
This workshop was probably one of my favorites of the week. I thought I had no idea what microinteractions were before I stepped into the room, but nearly as soon as Saffer began talking, I realized that I knew all along! "Features" are complex; "microinteractions" are forgettable. They are the "feel" of a feature, and are often a signature moment like the Facebook "like" button.
Microinteractions are made up of 4 parts:
A trigger that initiates it
Rules that determine how it functions
Feedback that the rules generate
Loops and Modes that make up its meta rules
We studied each of these parts and participated in brainstorming activities that allowed us to come up with ideas that would potentially improve a product like a microwave, an online shopping cart and checkout process, and the LED light on a TV. While many of the ideas seemed unrealistic (or at least improbable), it put a new perspective on how we could make nearly any product better with small - and monumental - changes or additions.
Responsive Content Modeling | Steve Fisher (@hellofisher)
A website is a black hole without its content.
While I don't do much design or layout these days, something I have always had trouble with is finding the correct placement for content, especially when working with a responsive site. In the past I have always just built the frame of what I needed with something like Lorem Ipsum, then added real content when the product was closer to being complete. However, Fisher taught me that using principles of Atomic Design, your website can look, feel, and work much better.
Most of this workshop was spent working in teams to prioritize and organize content of a project. Step by step we created user personas, organized pages, judged and ranked content chunks and blobs, came up with design principles, and finally got a simple wireframe drawn on paper.
The process was a lot to squeeze into an afternoon, but the most important thing I took away from it is the simple ranking system.
To prioritize content, label as 1, 2, or 3:
Essential - doesn't necessarily have to be on the top of the screen, but MUST be there
Great - may or may not be missed
Nice to Have - isn't important and doesn't have to be included
Once content chunks are ranked, they can then be organized for the page. 1s will always be prominent on both desktop and mobile screens. 2s will always be included, but will not necessarily be in a prominent spot. 3s should probably still be included somewhere, but you want to make sure they don't clutter the page - these chunks are often "hidden" from the main view on a mobile device, but should still be accessible to some degree. Avoid hiding content altogether on smaller screens if you can.
Keynote: WWE Ethnography: Let’s Get Ready to Rumble! | Tomer Sharon (@tsharon)
Never have I ever learned so much about WWE. But it was such a perfect example for an intro to ethnography. Plus, Sharon even imitated The Game to kick off his talk: http://youtu.be/NefR0ViNQRo. How awesome is that?!
Your Web Font is Crap: Here’s How to Choose a Better One | Jim Kidwell (@jimkidwell)
I had no idea how much detail I should be looking for in web fonts! Usually I default to Helvetica but now I definitely want to branch out. Good fonts include:
extended characters for additional languages
Space Matters: Offering the Living Room Experience | Laura Hammond & Denise Su
The "living room experience" is all about providing comfort and familiarity to your users during testing. Being in the hot seat and being watched through a one-way mirror tend to make users extremely uncomfortable, so what can we do to make their experience better? Instead of a stark white room with a wimpy desk and office chair, change the environment to make it more comfortable - set up a relaxed environment, focus on the fine details, and minimize the hardware.
The 21st Century Campfire | John Hartman (@feedia)
When is the last time you had a single device in front of you? (I currently have 4!) Transmedia storytelling allows stories to be told across multiple platforms, whether that is leaving a task on one device and picking it up on another, or even multiple devices interacting with each other. Be NIMBLE: Navigating Interactive Media Beyond Linear Experiences.
Designing for Failure | Ben Fogarty (@benfogarty)
"Failure" is something we encounter often in Labs, so I thought this would be a good talk to sit in. Fogarty says that failure - planned and unplanned - is a valuable and inevitable element of creating anything significant. In the words of Thomas Edison, "I have not failed. I've just found 10,000 ways that won't work."
Pseudo-Element Master Class | Jason Lengstorf (@jlengstorf)
A classic example of a pseudo-element in action is a CSS clearfix, using :after on a wrapper or container. There are lots of fun things that pseudo-elements can help create, though, like drop caps with :first-letter or animation and effects using :before and :after. So when should these be used?
The stuff you're adding is decorative
The page still makes sense without them
You're providing hints or clarification
Keynote: News for Web Lovers | Tim Bray (@timbray)
Bray's talk was fairly pessimistic (and he acknowledged that), but I managed to keep my optimism in check and found myself determined to keep doing what I do. In his words, "there's a real risk that the whole Internet vanishes into one App Store or another," and apparently we are in danger of losing some goodies of the universal browser. This may be the case, but I figure continuing to learn and grow as a developer will keep me on the right track.
Keynote: Let’s do Humanity in the Machine: What Comes After Greed | Brian David Johnson (@IntelFuturist)
One word: Inspirational! By the end of this talk, I felt inspired to change the future for the generations to come. Johnson's job at Intel is to look 10-15 years into the future and come up with a vision of how people will interact with computers. It is hard to imagine what devices will look like a single year from now, let alone 15. Even so, he says it probably won't be as "science-fictiony" as people think. I, personally, can't wait to see.
Watch Your Wearables Disappear | K Mike Merrill (@kmikeym) & Marcus Estes (@marcusestes)
2014 is turning out to be the Year of Wearable Computing, and these guys are 100% on board. Merrill even had 2 bands on one wrist and a camera on his shirt pocket. They talked about plenty of devices that have already been released, but what kinds of wearables will be released in the future? Will wrist- and face-wearables continue to grow, or will they branch off to another body part? Technology will continue to get smaller and - potentially - "disappear."
The MARS Project: Teaching Afro-Futurism as Methodology of Liberation | D. Denenge Akpem (@denengethefirst)
"Afro-Futurism rethinks and remixes concepts of identity, hybridity, states of alienation, and belonging." Akpem's Mars Project allowed her students to think as pioneers of Mars and, using visual and performance art (like digital renderings and spoken word poetry), they used pieces of the past to create their own vision of the future.
Hammering Responsive Web Design Into Shape | Ken Tabor (@kentabor)
As a fellow employee of Sabre, I showed my support in Ken's talk and ended up finding his methods quite helpful! He provided a multitude of sites and repos that are available for testing different screen sizes, talked about using a virtual environment with Apache to test projects, and explained how to use that environment across multiple devices on WiFi. Another helpful hint: Google Analytics provides screen size, device brand, OS name/version, and browser type for everyone who has accessed your site!
Envisioning the Future of the Future | Ana Maria Pinto da Silva
Pinto da Silva works in Microsoft’s Strategic Prototyping group, who look at current and emerging technologies, like us here in Labs. She talked about the methodologies, ideas, and processes that lead to synthesizing, projecting, and transforming the world of technology. To do this, she walked us through 10 steps to take in the lab:
The Future of Augmented Reality | Lynne d Johnson (@lynneluvah)
Learning about augmented reality was a great way to end my day as well as the conference. Johnson began her talk with "OK Glass, take a picture" to one side of the room. I had not made the connection of Glass being AR, but "a layer of technology on top of reality" fits quite nicely. AR technology has the ability to provide utility in real-world experiences and, still an emerging technology, I am definitely excited to see where it heads.
Unfortunately I had to leave early Friday, so I didn't get to see the closing keynote by Maria Giudice. However, the rest of WebVisions was a great experience and I had a fantastic time. It is definitely something I would like to attend again, and would recommend it to anyone in the industry. (Maybe I can make it to Barcelona next time. ;))
Oh yeah… Voodoo? Best donuts EVER.
