A brief talk exploring some near future trends in web and interaction design. This talk was given at sxsw 2013 and as a guest speaker at an internal Microsoft event. Be sure to download for the links and notes.
After looking around at various conference session lists. I decided to focus on things that people aren ’ t talking about much today. This talk is meant to touch on some design and development trends that will be popular in the next 6months - 2yrs.
Everyone is talking about responsive design for mobile devices. But more and more TVs and Cars are showcasing web browsers. What does responsive design mean for them?
We ’ ve tried this before. What can we learn from our mistakes?
Concept - tv companion experiences, rather than tv-optimized experiences.
Simply replicating sites on a tv doesn ’ t make great use of what a tv is good at.
TV companion uses the screens around you to create a unified experience. TVs are good at video. Phones are good for controlling, and deeper content. Leverage what the device is good at.
Example - Xbox Smart Glass. The experience is split between a big screen and a little screen. The content on each screen is appropriate.
Smart glass is a step in the right direction. But you don ’ t need proprietary technology to pull it off.
Example - Google Sync Sports http://chrome.com/supersyncsports/#/webapp/
Example - Mixparty by Nokia Music mixparty.nokia.com. Some tech used to build something like this: HTML5 - http://www.html5rocks.com/en/ Web Sockets - http://www.html5rocks.com/en/ tutorials/websockets/basics/ Node js - http://nodejs.org/
Visit Mixparty.Nokia.com on your Xbox to see the app in action.
Currently, TV and large-screen advertising is not very relevant nor actionable. If I see something, I should be able to get it on the spot with minimal friction. The companion concept works well for this.
Some of us have had the web in cars for a while.
These types of apps are the first cut and they are OK. But they are inhibited by old-school controls and existing hardware. The
Telsa Model-S is better, but arguably worse in some cases since you loose the ability to feel the controls without looking at them.
Responsive design in a car will mean - being responsive to the driver and its location. -The car should respond to voice and eliminate cumbersome interactions -The car should be responsive to the location and serve up relevant information -The care should be responsive to its surrounds and automatically adjust routing information based on traffic conditions.
In general, this industry is largely untouched by technology and design and ripe for the picking. General Motors in-vehicle coding platform: https://developer.gm.com/index.php
Makey Makey is based on the Arduino controller. And allows you to link simple keyboard commands to any conductive material. http://www.makeymakey.com/
Makey makey lets us create controllers that are more tactile in nature. This example shows a squishy ball controlling a soft physics body on-screen. This experience is more 1-to-1 than a mouse controlling a soft physics body.
the mouse and keyboard were designed as a one size fits all solution. Arduino and micro-controllers allow us to explore task-specific controllers, which can be much more effective solutions.
The makey makey offers a low-barrier, low-cost way of exploring new interaction concepts.
We held a makey makey hack-a-thon at sxsw13. People used various materials to build controllers that were used to play the mini games.
Another example of where makey makey come in handy for building a prototype. Thumb Wrestling + HTML5 + Arduino. Read more at : http://bit.ly/13hnTaW
Mobile devices are thought of as “ touch-first ” . But websites tend to be touch-second.
More and more devices are touch-enabled. Websites will need to design for touch as a first class citizen soon.
www.ContreJour.ie This is an example of a site that handles multi-touch just as good as a native app. The tech is there, designers and devs need to embrace it.
Many page sites are commonplace now. For many cases this is fine. But in many ways we desire more. We like apps. Aside from their inherent utility they also posses aesthetic qualities they delight us - motion, responsiveness, and great design. Web tech is finally in a position to give us what we like.
Single page web architecture helps us get closer to this goal.
A bunch of major web properties are embracing app-like designs for the web. The convergence of web and mobile will continue to be a hot topic for near term.
This site is a great example of how rich a single-page website can feel. Note the detailed motion treatments and how snappy the UX is.