Information Age: The dot com boom and bust, rise of e-commerce & social platforms, accessible to universal—intro lecture 13

I share screenshots of my first website and we all laughed at how primitive it was

This week we are going to ride the dot com boom and bust as the internet becomes a viable place for interaction designers. We’ve already talked about early communities moving from BBSs onto the web and AOL making the same transition. As the web matured and more HTML layout tools developed, more and more startups emerged.

Screenshots of the Yahoo! homepages from 1994 to 1996
Yahoo! homepages 1994, 1995 and 1998 (screenshots from the Wayback Machine)

This was the later 1990’s as a run up to the year 2000. Every idea you could imagine became a startup. And the money was flowing — nothing was too crazy to try. People were delivering groceries that could be ordered by a web page, they were ordering dog food and toys to be home delivered, they were buying and selling collectibles and more and more traditional media companies were putting their content online to expand their readerships — what seems commonplace now was exciting and new and in some cases reckless.

Screenshots of the AltaVista homepage from 1997 and 1999
AltaVista homepages 1997 and 1999 (screenshots from the Wayback Machine)

Tools like Yahoo! the internet directory and search engines like AltaVista and Dogpile emerged to help people find the things they were looking for. It was crazy and exciting and companies started hiring designers to layout pages and content.

Screenshots from the Adobe website from 1996
Adobe’s first website in 1996 — graphics were run through Debabelizer to downsample in order to increase load speed. Designed by erin malone. Grabbed off Wayback Machine from Internet Archive.

During this time we were still using dialup modems so the speeds weren’t great. We had to create bitmapped graphics and use tools like Debabelizer to turn full color images into less than 256 pixels of color to save download time and increase the speed of a page loading. CSS hadn’t been invented yet but we tried to create interactivity and animation with tools called Supersplash which became Flash, Macromedia Director and Java plugins.

Two screens from the author’s first website in 1995.
My first website from 1994–95. Straight HTML, tables didn’t exist.
Screenshot of the author’s homepage from 1996
My homepage from 1996 — all imagemap — no content.
Screenshots from the author’s website circa 2000
My website circa 2000 — using the blogging tool Blogger to create a daily weblog. I also was using the background image tag that had come online shortly before this. Over time my blog moved from Blogger to GreyMatter so I could host it myself, to MoveableType and finally to WordPress where I still keep my sites.

Everything was slow and quirky and anyone who moved from print design onto the web was sorely disappointed at losing all the type and layout controls we had been used to in print. On the other hand, designers coded, it was easy to try something, throw it up on the web, check it out and make changes in real time. Blogging was cool and hundreds of people wrote daily diaries and an entire universe of connected content moved people around the internet. There was a lot of experimentation and interactive art on the web — it was the wild wild west — it was extremely creative and fun.

screenshots of the HotWired homage 1994, 1995, 1996
HotWired from Wired Magazine. Jeffrey Veen was the lead designer/creative director for some (if not all) this time. You can see how the site evolved from 1994 to 1999 as bandwidth increased and expectations about content and numbers of clicks to find the content changed. (screenshots from the Wayback Machine)
Screenshots from HotWired homepage from 1996, 1997 and 1999
1996–1999 — more teasers and content directly on the homepage. (screenshots from the Wayback Machine)

Websites and interaction on the web consisted of links rendered in the fonts that people had on their computer or image maps — graphics that mimicked more well designed fonts and text and buttons — with links attached to areas in the graphic. In the early days, the work of Interaction Designers on the web was limited to simple interactions and a lot of page designs. As more and more information was uploaded and linked, Information Architects took on a larger role in the design process. Search engines and search engine optimization — titles, page descriptions, keywords, metadata — to help their product site be found easier, as well as development of taxonomies and general website maps were in the realm of responsibilities of the IA.

Screen shots from the homepages of eBay, cnet, Amazon and WebVan circa 1998
Early e-commerce and news. eBay, WebVan, Amazon and c|net which focused on tech. (screenshots from the Wayback Machine)

Many of the sites that were being developed at this time started out as just brochureware — text and images with no interactivity—but as companies like eBay, Amazon, WebVan, Pets.com and others started to sell things directly, we start to see e-commerce emerge. Having to develop authentication for security of transactions and credit cards plus designing shopping carts and the overall purchase process increased the amount of interactions and potentials for error, and it’s here when we see the role of the interaction designer on the web start to grow.

Early product design process diagram created for the portal AltaVista product, design and engineering teams. Our teams came from 3 companies that had been glued together in acquisitions each with its own culture. This diagram was intended to help articulate and visualize how projects moved through the teams to eventually be pushed out onto the the live servers. by Erin Malone, November 2000.

Teams of designers — information architects, graphic designers, user researchers, interaction designers — start to create more codified processes within the development process. The tools were still rudimentary — when I first started designing for the web, there was no way to create columns, then tables in HTML were created. We hacked together large images across tables and rows to game the download size issues. But before we had better browsers, better HTML and CSS tags, Flash took over. It wasn’t until the mid-2000’s when CSS & Javascript working with HTML (known as AJAX) was developed giving much richer design capabilities to the presentation of websites in a native way without plugins or other added software.

Eventually, this build up of companies jumping onto the web and the creation of more and more startups with more and more people coming from all over the world to Silicon Valley, began to collapse — it started first with the companies that had no real business model. As they collapsed, they brought down other companies that had been built up with the promise of partnerships and content from these vaporware businesses. Starting in the middle to late 2000’s the mass shutdowns and layoffs began. It was later estimated that between 2001 and early 2004, Silicon Valley alone lost 200,000 jobs.

While the dot-coms went away the internet itself didn’t go away. All of the money poured into tech companies in the first half decade of the Web 1.0 era built out the infrastructure and the learnings for what to do better that allowed the internet to mature— leading to Web 2.0 and the rise of complex and sophisticated applications delivered via the web.

Towards the end of the dot com boom, several new social sites started to become a part of people’s daily internet habits — online social spaces, formally called Community, became social platforms. Early examples include Apple’s eWorld — which was a competitor to AOL, but also web based Six Degrees, which was based on the notion that everyone is only 6 degrees away from anyone else; Orkut, which grew and then strangely became super popular in Brazil; Friendster soon followed and eventually evolved into a gaming platform in Malaysia. MySpace began and grew to become popular with teenagers for its customization capabilities and eventually it became the place to be for bands and music.

Screenshots from user designed pages in MySpace. circa early 2000s
Anything goes on MySpace pages from the early 2000s.

MySpace was a UI and Interaction Design nightmare because of the customization flexibility, but that’s also why it was so popular with teens. As it evolved to only allow more rigid templates and shifted its focus to music, its core user base evolved and moved on. Facebook got its start in colleges a few years after the bust, as specialty social sites like Flickr, Delicious, Blogger and others gained popularity and then diminished as Facebook grew. There are dozens of others that have come and gone over the years — either bought up by larger companies or killed as their user base outgrew them or moved on to the next popular thing. These applications, with their complex interfaces, engagement of their user base in creating and sharing content also contributed to the rise of the number of Interaction Designers working in the field on internet applications.

For the third part of this week’s material I had my students read about and then watch talks about accessibility and the evolution (or learnings) to universality. There’s a portion of the lecture Touchy Feely with Ellen Lupton (the first 24 minutes) as she describes designing an environmental museum experience to be accessible to everyone and designing typography for the blind. Students were also given Liz Jackson’s video and Haben Girma’s video to watch. I asked my students to learn more about designing to be universal — which means, if it works for someone with disabilities — it means it will work for everyone in better ways than anticipated. Then once they had watched these videos to think about a recent interaction they recently experienced. How would you redesign this if your users were blind? If they were physically disabled? If they had hearing issues? How has your thinking changed after watching the videos about accessibility and inclusivity in terms of how you might approach your design work?

Readings:
Accessible to Universal

Watch:
The Dot com bubble bursts (YouTube)
Disability & Innovation: The Universal Benefits of Accessible Design, by Haben Girma @ WWDC 2016 (YouTube)
Empathy Reifies Disability Stigmas with Liz Jackson (Vimeo)
Touchy Feely with Ellen Lupton(Vimeo)

Note: All these lectures were delivered via video with related slide decks of images. Following the intro, students had a series of readings and videos to watch related to the topics covered in the lecture or the overall time frame. They were then given a set of prompts to stimulate their thinking and writings which ended up in a class blog.

Information Age
Information Age: Information Architecture & Richard Saul Wurman, intro lecture 12

Computer Age
Computer Age: AOL, Girl Games, intro lecture 11
Computer Age: The World Wide Web, Browsers, Early Community, intro lecture 10
Computer Age: Early personal computers & games – intro lecture 9
Computer Age: Christopher Alexander, Muriel Cooper and Architecting Space, intro lecture 8

Silicon Age
Silicon Age: Visioning the Future, intro lecture 7
Silicon Age: The Mother of All Demos, intro lecture 6

Industrial Age
Industrial Age: Mid-Century Designers, Designing For People, intro lecture 5
Industrial Age: Between the Wars, intro lecture 4
Industrial Revolution & Manifestos, intro lecture3

In the Beginning
Read intro lecture 2 — In the Beginning Part 2
Read intro lecture 1 — In the Beginning Part 1

Setting the Stage
See the visual syllabus and how I approached putting this class together