The Web As You Don’t Know It

This week Truth was invited to speak about future web design at That Conference. The talk was based on a session we gave earlier this year at SxSW13 as a part of our MaKey MaKey hack-a-thon. As usual, it was a packed event and we had a great time. Below are some highlights and a short recap of the talk.

Overview

When I started thinking about topics for this talk I searched through various session lists in all the usual places (sxsw, future of web design, google io). There were tons of talks on responsive design, mobile practices, wireframing — what’s happening now. And it made me think “What’s not happening now”?

That is the premise for this talk. It explores some of the less-common areas of web design and some upcoming trends.

What is the talk really about?

I’m a design-guy so the content is slanted towards user experience, front-end, and interaction design. That said, I decided to focus on three main areas :

  1. Devices — The web runs on a lot of devices. Aside from your laptop and phone, there other devices we should be considering.
  2. Input — Still using your fingers? Micro-controllers offer new ways of thinking about input.
  3. Sites — It looks and feels like and app, but it’s a website. New web tech is enabling fresh web experiences.

Devices

The web runs on a lot of different devices. The obvious ones are phones, tablets, laptops & desktops. Two not so obvious devices are TVs and Cars. A hot topic in web-design is “responsive design” — designing to accommodate many screen sizes. But what does responsive design mean for your tv? For your car?

Responsive design for TVs

Modifying sizes and adjusting typography for long viewing distances. This is what responsive design for TV is today. In general, reading websites on a TV suck. Simply replicating web content on a TV isn’t a great responsive design strategy. A better approach is to leverage what the TV is good at — consuming media. And leverage the devices around you to create a unified companion experience. One example of this approach is the Xbox Smart Glass. As web tech evolves I expect this concept show up in everyday websites.

Responsive design for Cars

We’ve seen the first round of web-enabled apps for cars. They’re ok, but there is room for improvement. Some cars, like the Tesla Model S, have large touch screens with full embedded web browsers. This is a good step from a hardware perspective, but poor from a tactile and usability perspective. So how do we design responsively for cars? I believe being responsive in a car will be less about the layout and typography and more about the utility.

Figure 1.1 | Responsive design for cars. Apps should respond to the driver and environment as well as the screen size.

Input

In the last year there has been an explosion of micro-controllers hitting the scene. Devices like the Leap Motion, MYO, and MakeyMakey are pushing the bounds of what’s possible. These devices are offering up some new ways to think about input.

Figure 1.2 | Micro-controllers allow you to create task-specific input which can be more efficient than keyboard and mouse alternatives.

For UX and interaction designers, micro-controllers offer a means to explore new interaction paradigms. Haptic feedback, nature gestures and custom devices are changing the way we give input to our computers. It’s interesting to think the mouse and keyboard have existed as the be-all solution for input for so long. Products like the Makey Makey allow us to create very task-specific controllers that are potentially more intuitive and efficient than their counter parts.

Sites

This part of the talk isn’t so much the web as you don’t know it as it is the web as you will soon know it. The single page architecture has become popular in the web dev world. In addition to the technical paradigm shift, there is a also design paradigm shift. App design and web design are starting to converge. The things we love about our mobile apps are starting to show up on our websites — rich motion treatments, content over clutter, and snappy interactivity.

Figure 1.3 | Single page sites tend to be app-like in nature and have the perception of feeling light and snappy.

Most importantly is the way these single page websites “feel”. They feel snappy and light-weight, even when the data coming down the pipe is heavy. They have a continual stream of content choreographed onto the page and they avoid page refreshes providing a solid sense of context and place. These types of sites make designing for the web fun again.

The Goods

There is a lot more content in the slide deck below, be sure to check it out. Also, download them from Slide Share to see additional notes and links.

Best,

Erik

dribbble.com/eklimcz | twitter.com/eklimcz

Originally published at blogs.truthlabs.com on August 14, 2013.