The World Wide Web in Ten Years

Ten years ago

Ten years ago, a lot of interface designers were using Flash to build websites because it allowed us to fully control the presentation of content. This was a powerful benefit at a time when it was a struggle to ensure consistency, across browsers, of even simple html formatting.

At about this same time, John Allsopp wrote the seminal A List Apart article entitled “A Dao of Web Design”. In it, he argues that interface designers should “make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen”. He wrote, “It is the nature of the Web to be flexible, and it should be our role as designers and developers to embrace this flexibility”.

At a time when Flash designers were trying to control the presentation of content, Allsopp was advocating separation of form and content.

As the World Wide Web continues to evolve, grow up and grow into itself, we are learning to better understand its true nature. As Allsopp identified, it is the adaptability of form that is one of the defining characteristics of the Web. It is this quality of flexibility that will continue to shape the growth of the Web over the next ten years.

It is the nature of the Web to be flexible, and it should be our role as designers and developers to embrace this flexibility.

John Allsopp

Responsive Design

Designers now realize that the interfaces they create must be readable on an increasing variety of devices. The presentation of an interface must be able to adapt to an ever-increasing number of screen sizes. Rigidity no longer makes sense when content is required to fit containers that vary in shape and size.

One in four American teenagers surf the Internet on gaming consoles. Smart phones are the most popular method of getting online in the world. Internet access is now being incorporated into devices ranging from refrigerators to cars. Designing a static state interface with the expectation that it will be viewed on a 1280×800 screen is naive.

Over the next ten years, the Web will be incorporated into an increasing variety of tools, and it will be crucial that the interfaces we design are able to adapt in shape, size and form to fit and fill these new tools.

In order to make this happen, interface designers must be able to visualize the separation of form and content. We must think of the interface as something fluid in form, held together by strong information design.

Just as a “mobile first” approach to interface design forces us to focus on the most important content first, it is increasingly important that designers focus on strong information design with “content first”.

Separating Form and Content

Currently, APIs like Readability and Instapaper reformat the semantic mark-up of html content. In ten years, I think that services like this will be more common. I think that there will be a continued growth in services like that enable the aggregation of content. Users will pull content into spaces of their own curation.

This personal aggregation, pull method of experiencing the Web will allow individuals to format content as they choose. I think that this may lead to an increased level of design literacy among non-professional designers … as well as a lot of bad design.

In this pull scenario, the ad-supported Web content model no longer works. If content can be separated from an interface, ads can be stripped away from content, and content providers that survive on advertising dollars will need to find other sources of revenue. Content providers, such as newspapers and magazines, may increasingly begin charging for content.

We may become more accustomed to paying for small pieces of content. Think of paying ten or twenty-five cents for an article, just as you now pay one dollar for a song on iTunes.

There will need to be new ways to pay – online equivalents to debit cards and cash that people without credit cards can use. Certainly, as the online transactional economy grows, online identity as well as the value of privacy will only become more important. To this end, Open ID, or some other standardized system of online identification, may finally be realized.

In ten years, the convergence of TV and the Internet, which has remained one of the other holy grails of the information age, will probably also have been realized.

Jeffrey Zeldman discusses differences in reading postures. He notes that while using a desktop computer, we “lean in” to the content, whereas the iPad and interfaces that have large type allow us to “sit back” and experience content. He suggests that we are more relaxed when “sitting back”.

TV is a medium that we are familiar sitting back to experience. In ten years, when we are more commonly surfing the Web on TV screens, we will probably see more use of a design aesthetic that includes large type that we can sit back and read. We will probably see a lot of websites that are almost like PowerPoint presentations, with chunks of content set in big type.

A Multiplicity of Devices

As an increasing number of device types are connected to the World Wide Web, interface designers may more commonly find themselves in situations where they need to consider hardware design in conjunction with software and information design.

Within the next ten years, mobile and location-based services will become ever more important. Information, when delivered in search results and services, will more commonly be contextual to neighborhoods and location.

As location-based intelligence gets smarter, we will experience information through new kinds of touch points.
By using mobile devices as lenses, we will see spaces and places that have been enhanced with data from the Web. In theory, augmented reality can turn anything and anywhere into an information space.

Consider the recent hybrid magazine/iPad advertisement that was created for Lexus. In ten years, we will more commonly see similar examples of analogue and digital worlds working in tandem. As the role of the World Wide Web becomes more prominent in the world, we will more often think of it as being a part of the world, as opposed to “that thing you access on a screen”.

Think of the viral video that shows a five year old making touch gestures on the pages of a magazine, or the feeling you get when you make a mistake, like spilling water for example, and try to push “CONTROL-Z”. The World Wide Web will increasingly become a part of our experience of the world.

Putting the ‘World’ in World Wide Web

The Web will not just become more ubiquitous within our own lives, but participation in it will also grow around the world in new populations.
People will be reading and writing to the Web in a greater multiplicity of languages, and translation tools will be smarter. We will more commonly consume information and services written in native languages that we don’t understand.

In ten years, speech readers and speech-enabled interfaces will be more common. Siri may actually be useful. Touch screens and gesture-driven interfaces will also be used more often. The mouse will probably seem almost like a relic of the past.

As the Web grows in size and prominence, Web standards, good design and our role as UX designers will become more important.

There will be more content, and as designers, we will need to put content first. Empathetic thinking will be critical as we design interfaces around the information that we think is most valuable to an audience.

Data are the new pixels - the cell units of ecosystem design. Algorithms are the new rules of style and composition.

Cindy Chastain

Ecosystems of Data

Cindy Chastain writes, “Data are the new pixels – the cell units of ecosystem design. Algorithms are the new rules of style and composition.” Certainly, as the World Wide Web continues to grow, there will be more data.

With an understanding that the form of things must be fluid, comes the idea that data will be the glue that holds it all together. Understanding how to use data (be it peer suggestions, geolocation, or personal usage patterns and history), and what to do with it to make a user experience richer will be an essential UX skill.

Experiences on the Web will be made richer in ten years through better use of data. As data is pulled from different sources and is used to pull websites and Web services together in new ways, we will think less about “designing a website” and more about designing “Web ecosystems”. It will be more critical to the job of an experience designer to think about how a range of customer touch points fit together. Mapping the customer journey will be critical.

In ten years, interface designers will be accustomed to thinking about designing systems, of which the website interface is just one component.

Good design won’t be about controlling things, but about creating systems that can adapt. It is not, and will not be the job of designers to control form, but to control content.

Designers aren’t pixel mechanics. Data are the new pixels.

Green Office Activities

Green Standard

In 2010, a group of us at Digital Cement started an initiative to reduce the company’s overall environmental footprint. We approached this project like any other — we measured our current activities as a baseline and used the measurements to help project ways to make future improvements.

We Measured Inputs And Outputs In 4 Areas:

  1. Energy
  2. Transport
  3. Waste
  4. Procurement

With our baseline emission metrics recorded, we developed an informed environmental footprint reduction plan. We planned to continually remeasure our activity and to track our progress in the form of a Report Card, to be shared bi-annually across the company.

Business is the force of change. Business is essential to solving the climate crisis, because this is what business is best at: innovating, changing, addressing risks, searching for opportunities. There is no more vital task.

Richard Branson

Getting Everyone Involved

Necessary for the success of our reduction activities was the participation and support of every Digital Cement employee. We needed to inspire employees to take action at work and in their personal lives.

The Following Actions Were Taken:

  • A Green IT audit (conducted by SoftChoice).
  • Default duplexing on all printers.
  • A Complete audit of all suppliers with a proposal to switch over to more environmentally friendly paper options, cleaning supplies and caterers
  • Bike/Walk to work days
  • A Five-day Transit Challenge
  • A Recycling vs. Waste education campaign
  • A weekly “tip” email
  • Branded portable and re-usable coffee cups
  • A monthly “fossil award”, themed each month, for most environmentally unfriendly employee

Will Farrell

We began under the name “The Green Team”. To avoid problematic associations with the dubious Will Farrell collective, we made a branding change. Several brand ideas were drafted and circulated to the company for a vote. The winning idea was “Green Standard”.

This Represents

  • A new baseline, a new way of doing things, a new normal
  • The gold/green standard for low footprint offices
  • A stamp of approval and certification for environmentally responsible behaviour

Small Steps, Big Move

Digital Cement was set to move our Toronto office from Liberty Village to Wellington and Yonge. We needed to let our friends and associates know that we were moving.

With our marketing hats firmly in place, we asked: what would the move and the new location say about us as a company? Or, rather, what did we want it to say? Obviously, we were moving on up, on to bigger and better things… We were moving from Liberty Village, in the wild west of Toronto, to the very core of the city, to the beating heart of the financial district.

We brainstormed various ways that we could position our new location. “But wait. Isn’t the journey just as as important as the destination?”, one lateral-thinker inquired. And that was it. We decided to send out a move notice describing not only our new location, but also the journey that got us there.

Small Steps

From our Liberty Village office to our new home in the East End it was pretty much a straight shot across the city.

I holstered my trusty Canon SLR and began to walk, snapping photos at every fifth step. At the end of the day, I had thousands of shots with which to create a stop-motion impression of a journey.

A few Instagram filters later, with a renewed appreciation of Adobe Lightroom and Adobe After Effects, a video was ready. I’d even managed to composite cameo appearance of all of our major clients into the sequence.

“This is great”, our company president said. “But what should we do for our preferred clients? I’d like to send them something in the mail”.

And so it was that our patent-pending analogue video — otherwise known as a flip book — was born. On the finest paper stock, we printed a sequence of about two hundred stills. By flipping through the pages, all of the stop motion video magic came to life.

Flip Book

Moving Forward

The one remaining piece of the puzzle was to draft up an email that would drive to the video.

Not content to relax back into traditional thinking, we opted instead to continue pushing boundaries. And so, we ended up with an email that scrolled horizontally instead of vertically. The idea of a journey forward was reinforced. Pertinent details were communicated. Attention was grabbed. Our work was done.

Flip Book

Green Roof Design

Roof Experience Design

Roof Experience Design

Edmond place is a community housing project in Parkdale, Toronto. It was named after Edmond Yu, a U of T medical student whose death ignited debate about the Toronto Police’s use of force when dealing with the mentally ill.

Mr. Yu was someone who “fell through the cracks” in Toronto. He had been diagnosed with schizophrenia and while he didn’t require full-time treatment, nor was he able to live on his own. Edmond Place was established as a home for people in similar situations. It was built in affiliation with PARC (Parkdale Activity Recreation Centre), a drop-in community centre that services the community of Parkdale.

Shared Community

While located in Liberty Village, on the edge of Parkdale, Digital Cement shared a community with PARC. During our tenure there, we helped PARC with various activities from fund-raising to helping out in the kitchen during the busy holiday season.

In 2011, we were asked by PARC to design a green roof space for Edmond Place. Many residents of Edmond Place have never lived anywhere with a yard or garden, and have never had a home of their own. This would be an opportunity, we agreed, to create a quiet garden oasis in the middle of the frantic city.

The Approach

We approached this project like any other design challenge. We thought about our users, researched their behaviour, and tried to design an empathetic solution. There was, however, a twist: A group of ten students from the York School in Toronto were scheduled, as part of their senior year community service program, to do some volunteer work at PARC. Digital Cement was asked to involve these students in the design process. We did.

I drafted a creative brief for the students that framed the roof project as a design challenge. I wanted to:

  • Teach the students about the creative process
  • Enagage them in helping us research
  • Get design input and ideas from them in the form of roof design sketches

Through the creative brief, the York School students were introduced to persona development and empathetic design thinking. We asked them to interview Edmond Place residents with the hope that they would get a better understanding of the people who they were designing for. We asked the students to sketch roof designs, to present their designs and to support the decisions that they made with design rationale.

The exercise was a success. Simple decisions such as including ashtrays in the garden plans showed that the idea of designing around user needs had been understood.

The Final Design

Using the student designs as an input, I set about drafting roof designs of my own. I lead a tenant meeting with Edmond residents to once again find out what they wanted from the space, and I circulated questionnaires with the same intention. It was very important that all stakeholders be involved in the design process so that there was a true feeling of inclusion among both internal and external stakeholders.

I drew upon knowledge from gardening and landscaping experts and used this as another design input. In so doing, I discovered an active community of urban gardeners in Toronto.

Planting Day

On July 15, we were ready to do the heavy lifting and to plant the garden. Cedar planter boxes had been commissioned and built by a talented local artist. They were carried up onto the roof along with 8 cubic meters of soil and a wide variety of annuals and perenials.

Residents were engaged in the planting, along with a rag-tag team of volunteers from Digital Cement.

At the end of the day we had created a usable garden oasis that met the needs and wants of the residents of Edmond Place.

A Communications Challenge

Digital Cement is a marketing communications company. While we were happy to flex our design muscles within a different medium, we couldn’t help but also look at the project and see a communications challenge.

Many of the residents of Parkdale are uneasy about having a home for people with mental illnesses located in their backyard. The community suffers from “nimbyism” (…not in my back yard…). The communications challenge that we identified was: how do we make Edmond Place seem less intimidating to the wider community? How do we persuade residents of Parkdale that Edmond Place can have a positive influence on the community?

We realized that the green roof could be the answer. We hoped to host a farmer’s market with the produce harvested from the Edmond Place roof. In so doing, Edmond Place would turn a friendlier, less intimidating face to local residents. The Edmond Place roof project could serve as an example of how easy it is to grow local food in the heart of the city.

Victory Garden

During World Wars I and II, so-called “Victory Gardens” were vegetable, fruit and herb gardens planted at private residences and public parks in the United States, United Kingdom, Canada and Germany. They served to reduce pressure on the public food supply. In addition to indirectly aiding the war effort, these gardens were also considered a civic “morale booster” — gardeners could feel empowered by their contribution of labor and would be rewarded by the produce that they had grown.

The move towards locally-grown food today creates parallels to the Victory Garden – local food gardening takes pressure off domestic food supply requirements. Can Edmond Place become a Victory Garden in Parkdale? Can it encourage positive change within the community while at the same time boosting morale among the residents of Edmond Place as well as the wider community?