Other notes

Mentioned ‘You Are Here – The Design of Information’ [Until 15 May 2005] (Design Museum)

Who am I?

Writer

On interactive media since mid-90s
Author of What is Web Design? (RotoVision, 2003). Image: book cover
And chapter in Communicate: Independent British Graphic Design since the Sixties (Laurence King Publishing/Yale University Press, 2004). Image: book cover

Facilitator

1996: Designing the Internet, with Central Saint Martins College of Art & Design
2000: Design For Usability, with Jakob Nielsen
2000-present: AIGA Experience Design London [(if you are a regular visitor to London please sign-up to the announcement list)]

Consultant

In design strategy and management

Reflection

In March 2001 I presented a talk entitled ‘Design Agendas for the Naughties’, critiquing the ethical trends in design. This is a subject I am currently revisiting in an article for the DMI Review.

I also talk widely on professional practice. This is complementary to the critique of design ethics, in which I observe that at best it distracts from good professional practice – which is the area in which designers can contribute most to the world. In that talk I argued that designers should “Embrace new areas of knowledge and design”.

The first talk I gave at the University was in 1996, on the ‘Pitfalls of Web Design’. [I argued that:

“Printing with moveable type originated in the fifteen century, but it wasn't for another hundred years that the form of the book with which we are now familiar became recognisable: cataloging info, contents page, folios and running heads”]

An I looked at the roots of British Web Design. In some ways not much has changed since then…

Roots of British Web Design not in graphic design

The backgrounds of early designers ranged from the rave or club scene to the arts and television production, and their skills ranged from programming to architecture and human-computer interaction.

These first movers came to their new discipline with a less restricted view of its boundaries or possibilities.

Though graphic design did have an influence it was indirect. See Communicate chapter. The situation was different in the US, where individuals with a training in graphic design, such as Terry Swack, embraced interactive media. (Of course, there were exceptions in the UK, such as Neville Brody and Malcolm Garret, but their involvement in interactive media has been variable.)

Why is interaction design so important?

Why is Web/interaction design so important? If we extend it to interaction design, you will find it is all around you:

• The Apple iPod [and PDAs (personal digital assistants)]
• Digital TV and personal video recorder (PVR) interfaces, [and digital Hi-Fi systems]
• Ticket machines on the London Underground
• Bank ATMs
• [High-end cars]
• [Mobile phone interfaces]

Images: iPod, TiVo user interface, London Underground Oyster card charging machine, bank ATM

Interaction design is the design discipline of the twenty-first century, [and will inform all other design disciplines]. It will help realise the potential of the digital/network society.

What is unique about interaction design?

What is unique about design for interactive media and products? Many people are hung up on aesthetics.

• They have four conventional dimensions: screen dimensions, depth/layers, time-based change, plus user-based interaction. For instance, interaction with a Web form, and the validation of the form, seen in one’s interaction with a bank Web site. [We haven’t learned much in this area from software graphical user interface (GUI) design. See also games design, where people don’t talk much about formal aesthetics. There is beauty in this when it is done well, as there is in games. Which is not to say that formal aesthetics isn’t important – and it will become more important in future.]
• Also person-to-person interaction. [See services such as Ebay and Betfair, and Weblogging.] Image: Plastic Bag Weblog [PlasticBag.jpg]
• Also, about designing complex systems and information structures Image: Contempt eDesign flow diagram, presented in the What is Web Design? book
• Understanding human cognition: In the area of interaction, interfaces need to communicate to the user what they do and how they are to be used, what state they are in, and how to correct errors. Image: Ideo testing, presented in the What is Web Design? book

Graphic design’s influence on Web design

A muted response from graphic design: In the UK, graphic designers have been slow to grasp this. And as I discovered writing the Communicate chapter, established British graphic designers have had little influence on the development of Web design. They are focused on experience, and not sure how to achieve the necessary degree of control. They forget their design process and methods, and get obsessed with tools.

Nevertheless, graphic design has had an influence. We need to understand this at three levels:

Aesthetics and typography

For instance:

• Commitment to addressing the “the tiny details that are so easily overlooked” Nykris co-founder Nikki Barton, inspired by Cartlidge Levene Image: Entourage screen [NYKRIS Office vX Entourage.jpg]
• ‘Municipal design’ Matt Jones, Nokia Image: British Rail sign at Sevenoaks [BritishRailSignSevenoaks.jpg]

Conceptual ways of thinking

• Seeing the big picture
• Working across media (‘media neutrality’ as the advertising folks have it)
• Complex problem-solving
• Information design, eg: Nigel Holmes, Richard Saul Wurman, Edward Tufte – though the latter two are not British. Image: Nigel Holmes [racunalo_tx.jpg]
• Use of grids and other devices. Image: Society of Typographic Designers (STD) site by Poke [may not have launched] [06journal.tif]
• Humour. Image: Nykris mobile phone-based toilet finder [WAP image.jpg]
• Story-telling

Processes and methods

• Sketching and iteration, multiple solutions. Quote: We would typically present clients with two to three design pathways – “way out, sober, and middle-of the-road” Frances O’Reilly of Recollective
• Methods. Quote: “I came in when there was no process”, says Bill Galloway of The Butterfly Effect. “We learned process, and drew some of this from the technical side.”
• Working with clients

Graphic design’s problems with Web design

Lack of critical understanding

In designland UK we still don’t have widespread critical and practical engagement with design for interactive and networked media”

In many ways this lack of engagement and enthusiasm is surprising. Britain is home to some of the best designers in the world, and excels in the design of advertising and editorial, corporate identity and brands, products and packaging, fashion and interiors.

Just another design discipline

Design for interactive media is just another design discipline. (This is a key theme of What is Web Design?.)

The ‘Designing the Internet’ conference I co-programmed in 1996 reflected this, with its subtitle “when digital design demands analogue thinking”

Imposing a caricature of graphic design on the Web

Many people bring a caricature of graphic design thinking to Web design. This is seen in:

• Desire for fixity in Web interfaces
• An over-emphasis on the use of imagery and traditional typography
• Imposition of the page metaphor onto the screen
• A perception of the Web as a static or linear medium. Image: Brandchannel.com Books [BrandchannelBooks.jpg] uses screen grab of text, which is slow to load, inflexible, can’t be searched, and doesn’t work on small displays
• Failure to be ‘true to materials’. Quote: Florian Schmitt, German-born co-founder of Hi-ReS!, believes that British designers “didn’t consider the Web to be as precious as print”, though, he adds, “it is getting there”.[i]
• Branding: Although branding is understood by some, such as Wolff Olins, as being more than visual – delivering experiences rather than things, extending through the company’s identity and its services – this has rarely been translated into interactive media.[ii] Image: Orange Web site [Orange.gif]

What is missing?

Significance of interaction

Understanding that interaction design needs to convey what a system can do, what state it is in, how to interact with it, and the outcome of the interaction (including how to correct errors). Image: Sacramento Bee online edition showing floating tool palette with rollover ‘hover help’ [SacbeeFloatingTools.jpg]

Separation of content and presentation

It is important to understand that content may be presented on different platforms, for instance using Cascading Style Sheets (CSS) to allow it to be formatted in different ways. Image: Usability News on a computer Web browser, ‘Pocket’ version for phone- and PDA-based browsers, and RSS version for ‘news readers’ (in this instance shown on a PDA). [UN_AllTheLatestRSSPalm.jpg/UN_AllTheLatest.jpg/UN_AllTheLatestPalm.jpg]

The role of tools

The lack of confidence and clarity about how to approach the design process diverted some designers into an obsession with tools. Quote: [E]stablished British designers fetishised tools to the point that the first question many graphic designers ask when confronted with a Web project is “What software shall I use?” rather than “What is the challenge and how shall we go about addressing it?” Nico Macdonald, PRINT magazine

Importance of client and implementation

In relation to graphic design, projects are often:

• Larger,
• Cross-organisational, and
• Key to the businesses they are for, eg: FedEx and its package tracking tool

Importance of user research

New media is still a new field where we know little about how people use it.

Thus we need to think carefully about them, and not project our own experience onto them.

And context of use

Understanding where some one will need the information or service, how preoccupied they may be, and whether their orientation (standing, sitting, etc).

The place of usability testing

An appreciation that in the early days of a medium the ability to design successful solutions is not a given, and designers will learn important things from any testing that is done.

Influence of Web design

Improvement or not, the Web and Web design have also had a profound influence on graphic design.[iii]

Vector aesthetic

In illustration and graphical time-based media.

Use of Web fonts and Internet nomenclature

From Verdana to lower case typography, and dot-everything

Web elements, such as navigation

And presenting print as hypertext

Reaction: emphasis on tactility

Designers are struggling to understand what print is best for, and often settle on its tactile elements and the designer’s hand, eg: Graphic Thought Facility’s work, Visionaire magazine

Upshot: new views on graphic design?

In fact, we can gain a better understanding of the graphic design process by examining through Web design spectacles. By applying some of the processes and techniques made explicit by Web design, it may even be possible to help graphic design improve further.

The need for graphic design

If British designers are serious about making a difference with design, as well as bringing design to centre stage in society, they will need to get to grips with interaction design.

Things are (finally) getting serious

These developments will be facilitated by technology innovation; greater adoption of the medium by business, government and other organisations; and the lowering cost of devices and access.

Just getting interesting

Ironically, the early noughties, after the ‘crash’, is when the sector really started to become interesting, as new platforms, including mobile devices and interactive television, came of age; Web technologies matured and stabilised; millions more people came online and real services – from both business and government – started to be delivered via the Internet.

Stasis a product of success

In many respects these disciplines [Web design/interface/interaction design] are in a kind of stasis, an ironic result of the enormous success of the personal computer and the Web. [It is perhaps surprising that graphic design, founded in systems thinking and focused on the visual communication of ideas, has not had a more profound influence on Web design.] But it is not too late. Graphic design thinking may be able to give momentum to the next leaps we need to make, particularly as we take the necessary steps of grounding these technologies in the physical and social worlds.

Directions for graphic design

Good typography

Better quality, larger and lighter screens [(as well as ‘electronic paper’)].

This will demand a better understanding of typography, particularly readability, and of design for time-based media. [It will also demand better editorial design.]

The general possibilities for typography are expanding and will continue to expand. Image: Hyphen Press site, designed by Eric Kindel [hyphen_ftp.tif]

Information design

The proliferation of (high quality) screens will also facilitate greater use of information visualisation for data presentation and analysis, as well as for the more mundane but equally useful presentation of structured information such as timetables and financial data.

And interactive infographics with Flash. Image: BBC Post-Saddam Iraq map [BBC_NewsPostSaddamGraphic.jpg]

Information visusalisation

Making the most of our visual and mental capacities.[iv] Image: Edward Tufte poster of Charles Joseph Minard visualising the losses suffered by Napoleon’s army in the Russian campaign of 1812

Design for greater bandwidth

Designers will need to learn more about [the use of imagery and photography, and] designing around time-based media.

And presence

Knowing the availability of colleagues and friends. An application that requires very little data, but that connections be ‘always-on’. Image: iChat window [iChatFullOfPeople.jpg]

Semantic information rather than Web pages

Designing around element of information that carry information about themselves, eg: allowing searching for portraits of Colin Searls and finding only those (as opposed to pictures by or related to him, or full-figure images). Image: LinkedIn ‘six degrees of separation’ tool [LinkedInContactsList.jpg]

Breaking out of the browser

Desktop ‘widgets’ that are designed for one task, fit into your information environment, and support better interactions. Image: Konfabulator Internet-enabled desktop layer (see also the ‘widgets’ in forthcoming MacOS X Tiger) [KonfabulatorDesktop.jpg]

Internet-enabled applications

And software design. Quote: Durrell Bishop “Why aren’t graphic designers involved in designing tools, such as phones and software. Graphic designers are supposed to be communicators. Someone who communicates well should be doing this, not engineers. What offends me is software design is so bad.” Interact1: Mentor/Curator discussion of work [October 7, 2004] (London College of Communication) [Not to be directly cited.] Image: the Internet-enabled iTunes application and Music Store [iTunesTrackListing.jpg/iTunesQueryCDDB.jpg/iTunesMusicStore.jpg]

New user interfaces needed

We also need new user interfaces.

[The world has moved on and GUIs need to move on, too. Computing is now used by a wider variety of people, in more varied activities – for Web browsing, email reading and instant messaging more than document processing. Computing power is orders of magnitude greater, more portable and pervasive, embedded in a wider variety of devices, and used in an amazing diversity of contexts. But we are stuck with the same interface, which can’t be adapted to support these new uses.[v]] Images: LeapFrog LeapPad. Ambient Devices’s ‘Orb’. And the Interaction Design Institute Ivrea ‘Mobile Embodiments’ research project by Analia Cervini, Juan Kayser and Mack Thomas.

Deliver and print

Delivering information, for instance a personalised newspaper, to an Internet-enabled printer in the home, for reading in transit or at the breakfast table.

Portable devices

Such as phones and personal digital assistants, with small and low resolution screens. Image: Palm screen for Vindigo [VindigoPalm.jpg] Image: Handspring Treo

Design for desire and delight

Learn a greater appreciation of the qualities of interactive media, bringing desire and delight as graphic design can do in print

Build on design patterns

Designing to support updating and creation by non-designers.

As general rules and patterns for the design of interactive products and services continue to be become established it should be easier for graphic designers to build on this solid foundation. This will allow non-designers to create good designs day-to-day, much as happens with subs in a newspaper editorial office. Image: Movable Type publishing tool [SpyDesignAndSociety.jpg]

Independence of thought

It is important to appreciate the “independence of thought that is bred in colleges” and the need for “problem solving and thinking beyond the aesthetic or programming issues” Patricia Austin, a course director at Central Saint Martins College of Art and Design[vi]. This will help solve interactive design appropriately and imaginatively, and help clients to consider their needs in a new light.

Modes of thinking

The modes of thinking that are core to graphic design will enable designers to adapt to the twists and turns new media has taken, and will take in the future.

Thank you and Questions

[i] ‘In with the New’ Nico Macdonald, Creative Review, September 2004, pp49-52 http://www.creativereview.co.uk/ [Not published online. To be published at http://writing.spy.co.uk/]

[ii] ‘British Evasion’ Nico Macdonald, PRINT, LVIII:VI, November/December 2004. How they missed the boat in yet another revolution led by the Americans. http://www.printmag.com/ [Not published online. To be published at http://writing.spy.co.uk/]

[iii] PRINT, ibid, p213

[iv] See ‘Information visualisation’ Nico Macdonald, Eye, No 49, Vol 13, Autumn 2003 http://www.spy.co.uk/Articles/Eye/DataVisualisation/ [Includes PDF of article. Article on Eye site at http://www.eyemagazine.com/feature.php?id=71&fid=470]

[v] See Second Sight ‘Interface design and innovation’ Nico Macdonald, Guardian Online, 9 September 2004. http://www.guardian.co.uk/online/story/0,3605,1300747,00.html [Documented, with link to comment facility, at http://www.spy.co.uk/Articles/Guardian/HCIandInnovation/]

[vi] Creative Review, ibid