Will Edge put “people first”…or will designers get Flashed?

Compared to 2006, Adobe is a real standards-based group these days. New products from Adobe, like those from Microsoft, show that there’s a real interest in building a better web. With standards like HTML5 and CSS3 going great guns, things look rosy. But we’ve been here before – look back to 1998.

During the chaos of the Web 1.0 “browser wars”, Macromedia purchased a small company producing named FutureWave Software, which had developed a program called FutureSplash Animator in 1996. This program enabled lightweight, efficient vector animation for the web, in contrast to the leaden web performance of Director/Shockwave multimedia. In short order, FutureSplash, renamed Flash, became a universal standard. Most browsers could load the Flash plugin, and it provided a uniform user experience lacking in the HTML wars.

Fast-forward to the early 2000s, in some ways an “ice age” for the Internet. With the death of the dotcoms, Internet Explorer commanded 90% market share. MSFT, after making some real strides with IE6, sat on their work, and developed increasingly quirky features designed to appeal to IT departments.

In this world circa 2004, Flash was the “design” alternative. Back then, Flash was still being touted for building entire websites. But by this time, Flash had changed from standards-bearer to standards-breaker. Flash websites broke usability standards, were hard to analyze in terms of traffic, and locked out people with disabilities. It is possible to design in Flash correctly and support accessible access, but few designers did – they treated this as “cramping their creativity.” Eech.

Today, we have Flash in decline, the rise of standards in HTML5, and Adobe Edge, in particular Adobe Edge Animate. Adobe’s decisions to go with HTML5 and CSS3 and JavaScript has the potential to make web animation and vector design standards-based (and therefore more sustainable). However, there is a monster lurking in the wings like there was in the late 1990s – that of “too much freedom.”

Will designers (and it was designers who did this) wreck Edge the way they wrecked Flash?

Disclaimer: I’ve worked with Flash, but mostly at the programming level. We’ve used it in our web program at school to teach students the basics of Object-Oriented Programming OOP. We’ve also used it to teach game design, and most students have a few simple Flash-based games in their portfolio. In our market in Los Angeles, Flash is still very popular among clients for banner ads and also “landing pages” for films or other media. So, my problem is not with Flash itself, except for the drawing tools – I’ve never liked them.

My problem is with the designers – the ones responsible for the long, crappy history of Flash design. Flash design was by and large unsustainable, and it made the web a more broken and fragmented place. For years, designers felt that Flash freed them from the constraints of the web, and let them be more “creative.” It may have been so for them (though I suspect they just wanted to stay in their comfort zone), but their creativity was bad for the rest of us. 

Design was the problem, not software…

Designs were created for Flash like they were, well, AfterEffects, Photoshop, and Illustrator. Almost always, it was “designer centric design”, rather than customer-centric or even client-centric in orientation. In nasty terms, designers treated Flash as a way to “colonize” the web, with web standards being overwritten by the very different set of rules for traditional (eeeh) computer-based vector graphic design tools. Unlike other web development, there was lots of cooooooool design (of course lots of it was really cool) and a nearly complete disregard for user experience. In order to emulate the stuff designers were doing in behemoths like AfterEffects, layer after layer of design and code was added to the program.

The result was that Flash turned into a big, bloated, “kitchen sink” program that doubled the energy consumption of a web page. It is not that Flash was written poorly – it was it was used – a replacement for a web page, running in a web page. It was a colonizer that took over the web page. In order to run, both the browser and the Flash plug-in had to be active. It also meant that Flash + Browser took up more RAM. In the early 2000s this was not a huge problem. But when the mobile world began to rise, the energy/RAM hog of the Flash + Browser combo began to be felt, in terms of drained batteries and frequent crashes. Flash became an energy hog, exactly what we want to avoide in sustainable web design. One of Apple’s reasons for removing Flash from iOS was its penchant to crash regular Macs at a high frequency. This was often due to bad programming of eye candy, which caused assets to slowly explode and use up all the available RAM.

I want to emphasize this was not really a problem with Flash itself. Adobe worked hard to make the system work on the Internet. It was designers, who in the pursuit of “creativity”, used Flash in an unsustainable way. By 2006, it almost seemed that there were two worlds – the world of standards-based web development, with lots of thought about the audience and User Experience, and the world of Flash, with an “anything goes” attitude that was clearly designer-centric instead of consumer-centric.

Well, the party came crashing down when Apple left Flash off the iPhone in 2007. Not many today recall the prediction that this would either doom iOS, or that Apple would be forced to accept it on their mobiles. The opposite happened.

So, Adobe responded by killing Flash Mobile for (including for Android), and working on an HTML5, standards-based approach to the web. In fact, all their new stuff, with the notable exception of Adobe Muse, is really working to make the web a better place. Edge Animate is a key element in this idea.

The problems ahead will not lie with Adobe, but how Edge is used, along with stuff  in the “Creative Cloud” like Typekit. Will it encourage sustainable design? Or will it be an invitation for designers to once again ignore the web as a unique, interactive medium, and impose their fixed-width, monster-file, huge-screen workstation graphic vision of reality?

Let’s think about this relative to the 10 Principles of Inclusive Web Design, as described by  Sandi Wassmer. These principles are “people first” in the way that all sustainable frameworks in Industrial Design and Agriculture are. This is one way we can look at sustainability beyond Web Performance Optimization (WPO) to the big picture.

Below, I list the features of inclusive design, and note how Flash designers often violated them in pursuit of artist-centric “creativity”. I’ve graded designers on their past actions relative to the “people first” principle common to sustainability frameworks. In my mind, the lack of a people-centric approach was the real problem with Flash, not the timeline, ActionScript (a great OOP teaching language, btw), or the various security bugs in the program. As usual in this blog, we hold that “design is the problem,” and designers, not engineers will determine future sustainability.

Inclusive Design in the Flash Era

1. Be equitable – a “B-“

Provide user experiences with equally valuable outcomes. Not too bad here. Flash was uniquely cross-platform during its heyday. On the other hand, if you were blind, or were a search engine spider, Flash completely shut you out. Even after Adobe added “meta” tag style information to Flash, nobody used it.

2. Be flexible – a “D”

No one size fits all, provide options for your users by building for different outcomes. Here, Flash failed miserably. The fixed-width model ensured that you had to have a specific screen size. There was no route to “graceful decay”, much less a strategy like Progressive Enhancement. It fit end with the artistic conceit that the user “has” to accept what the artist dishes out in a one-way pattern, instead of the user getting access based on their needs and abilities.

3. Be simple and intuitive – an “F”

Every feature adds value, not complexity, but Flash did not. Flash was supremely eye candy, both visual and animation. The lack of standard controls or interactions ensured that each Flash movie had a different way it had to be used. Knowing how a button looked, or where it appeared onscreen did not help – it was different in each Flash movie. In fact, many artists interpreted their “creativity” as the right to manufacture “mystery meat” navigation to show how cool of a designer they were.

4. Be perceptible – an “F”

Communicate information in several ways to enable different “learning styles”. Another fail. Flash communicated in only one way, visual eye candy. Most designs and animation (I’m not including actual narrative storytelling in cartoons) resembled cheap film titling.

5. Be informative – a “B-“

Provide information all along the website experience. Flash movies often provided real information, with a big wrapper of eye candy. However, in many cases it helped. The big problem was that it was short. How often did designers make their Flash-based site send email from a Flash form? Whether or not the email actually worked, they invariably said “your mail has been sent.” Eech.

6. Be preventative – a “D”

Minimize errors by providing support, and engender trust. Self-styled “creatives” don’t think about their audience. In a postmodern navel-stare, they’re thinking about themselves. The last thing anyone would think of is whether the audience would understand. The attitude was that “they should”.

7. Be tolerant – an “F”

Be gentle and supporting users in correcting errors. Most Flash apps didn’t consider failure, so recovering from failure wasn’t even on the menu.

8. Be effortless – a “D”

Your site needs to be a light, breezy, hassle-free experience. Don’t make them think. Usually, the first steps in a Flash app were pretty easy. It was when you tried to do something Interactive (e.g., send email) that the learning curve shot up. Designers, freed fromweb standards, followed practices in videogames and invented their own custom way of doing things. There was no consistency to the user interface. Buttons could appear in any position, act in any way, and there was no common features from one Flash app to the next. The result? A Flash web that was, in the words of Web Pages that Suck, “mystery meat navigation.” No, it’s not good for users to try to pick through an “innovative” design. Most commonly, these were not better Ui but rather artistic conceit.

9. Be accommodating – a “B”

Use space correctly so people feel comfortable visiting (interior design flow?). Since many of the most self-absorbed designers were in fact good visual designers, they often did a good job of making people feel at home, at least at first. This was one place where the Illustrator-like design canvas was useful, much less intimidating than the link forest of a Web 1.0 page. Flash had Web 2.0 focus before Web 2.0 was khul…

10. Be consistent – a “DOUBLE SECRET PROBATION F”

Provide a familiar environment with memorable navigation, features and functionality, using standards, guidelines and best practices.

The era of Flash was not a great one in many ways. However, we are moving from the wild experimentation of the 1990s and early 2000s into a more sober era of web design and development. Edge will be part of this. What’s the chance of getting it right the next time?

Inclusive Design in the Web Era

By writing Edge to crank out HTML5 and CSS3, Adobe is introducing constraints beyond the edges of a fixed-width image. On the other hand, Adobe will be under pressure from “creatives” to let them create a lousy, “mystery meat” user experience.

Below, I’ve listed the same principles as I considered above, this time with an idea how Adobe could encourage designer – even the self-centered, postmodern, artsy ones – to respect the web and its community. In quite a few cases, this won’t just be a function of Edge. It will be a will for designers to be usable, accessible, and thefore sustainable.

1. Be equitable

Provide user experiences with equally valuable outcomes. For this to happen, Edge has to provide for

  • Responsive Design
  • Progressive Enhancement
  • Graceful Decay (when all else fails)

These principles have to be part of the design. It should be hard for a designer to create without setting up a “baseline” design for what they’re doing without being confronted with missing pieces. It should be almost impossible not to include meta-tags, and documentation should stress making design that works for everyone.

2. Be flexible

No one size fits all, provide options for your users by building for different outcomes. For this to happen, it will be necessary for designers to consider possible outcomes. Edge is a tool, but designers must step up to the plate. No more navel-staring. The fact that a design shows up on all the major browsers does not ensure that everyone is served.

3. Be simple and intuitive

Every feature adds value, not complexity. This is also a designer rather than Edge issue, and will happen with a long-term decline in artist-centric design. Now, it might seem impossible – these days, postmodernist navel-staring is considered the noblest form of art. But postmodernism isn’t science – it is a trend whose value is only subjective. It is not more “modern” or “advanced.” Changes in society, like the current move to supporting the group over the individual, could easily lead to another design trend. The Strauss & Howe model for generational change sees our current era as moving away from individualism to “pluralism” of community – in fact, the newest, post-Millennial generation (born after 2004) is now being called “the Plural Generation” by Frank N. Magid Associates.  If we’re moving into a collective era, as described by Morley Winograd and Mike Hais, an idea of collective art with community value may replace the late 20th century idea of art as a reaction to oneself and one’s art.

4. Be perceptible

Communicate information in several ways to enable different “learning styles”. For this to happen, HTML5 tools like Edge have to enable the equivalent of the audio and braille stylesheets which are part of the web. This is a technical feature, which could “nudge” designers in the right direction.

5. Be informative

Provide information all along the website experience. One of the biggest sins of Flash-based websites was brevity of information in exchange for eye candy. Information was shoehorned into the design (typically a small Flash movie) rather than design around the information. Edge must promote the ability to provide lots of meaningful information in its interface. Compared to Flash, it should be much easier to add text without breaking the interface. Edge may be helped by the rise of interest in typographic design for the web, which has 400 years or so of effective information design.

6. Be preventative

Minimize errors by providing support, and engender trust. Fortunately, User Experience (UX) is a big issue today, unlike 15 years ago when Flash debuted. Compared to a Flash site of bygone years, Edge sites are likely to have a UX designer as part of the process.

7. Be tolerant

Be gentle and supporting users in correcting errors. For this to happen, we need to ensure that design remains tied to what works. There’s a large body of research on what people understand, and the first “creative” thought of a designer is unlikely to match this. Designers need to be educated in usability – as I’ve said elsewhere, we need “hybrid” designer-develoeprs, “hybrid” designer-UX, and so on.

8. Be effortless

Your site needs to be a light, breezy, hassle-free experience. Edge developers will need to remember that a site should “get out of the way” of a task that its audience wants to perform. You’re not putting on a show – you’re creating a seamless experience that isn’t about the chrome.

9. Be accommodating

Use space correctly so people feel comfortable visiting. Great visual design will have a place in the HTML5/Edge world. But don’t expect people to get excited about elaborate chrome or gnome-lawns of icons – that era has passed away on the web. Instead, Edge designers will have to remember that users want to accomplish tasks, not visit a small-screen art gallery. An uncomfortable website that puts people “off” is only appropriate for one’s fellow artists and creative directors, who like that kind of puzzle-solving edginess.

10. Be consistent

Provide a familiar environment with memorable navigation, features and functionality. There’s some real hope here. In contrast to Flash, which never had or defined any consensus in design standards, Adobe and others will likely emphasize a consistent W3C standards environment from the start. For example, rather than creating completely custom controls, Edge will provide a large set of standard ones comparable to those used elsewhere on theweb. The thing designers will have to remember is that a timeline means you go on a journey. It isn’t just a group of cool screens stitched together.

Can Edge succeed where Flash failed? I’m guessing it will. As Jacob Neilson has pointed out, home page “makeovers” are more incremental than x-treme these days. We’re learning what does and does not work on the web and in the mobile world. We’re moving from “discovery” on the web into a long-term sustainable medium. With this support, Edge won’t be the second coming of Flash, but its own, sustainable platform.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.