Here are some gems

Visual Design attempts to solve communication problems in a way that is at once functionally effective and aesthetically pleasing. (p1)

By communication, we mean the full process by which the behaviour of one goal-seeking entity comes to be affected by that of another through the reciprocal exchange of messages or signs over some mediating physical channel.p1

The goal of communcation-oriented design is to develop a message that can be accuratley transmitted and correctly interpreted, and which will produce the desired bhavioral outcome after it have been understood by its recipient.p2

We refer frequently to a visual language, by which we mean the visual characteristics (shape, size, position, orientation, color, texture, etc.) of a particular set of design elements (point, line, plane, volume, etc.) and the away they are related to one another (balance, thythm, structure, proportion, etc) in solving a particular problem. Any language system defines both a universe of possible signs and a set of rules for using them. Every visual language thus has a formal vocabulary containing the basic design elements from which higher-level representations are assembled, and a visual syntax describing how elements may be combined within that system.
p2

In the context of GUI toolkits, “…most toolkits impose unnecessary design restrictions as a side effect of their own implementation or internal structure.”p4

Basic principles of visual organisation developed through centuries of experience with print media have rarely been applied to the on-screen media, and communication has suffered as a result. p5

“… a way to feed our undiminished yarning for foundations and grounding, while at the same time avoiding the reductionism and ideological fundamentalism that have so bedevilled prior fundamentalist approaches.” (p4)

“Bedevilled”? pelase! Anyway, now that I have vented I feel better. If I don’t end up throwing the book out the window in a fit of unintelligible rage, then I will move progressively review each chapter over the next three months. Pease note that I am not the only one that bitches about the complexity of this book, simply do a search for the book title, or look on Amazon, and you will see that I am not alone.

Jesse James Garrett defines user experience as “how the product behaves and is used in the real world” (p10). The above definition is interesting because it means that user experience, in a design context, follows form, and we all know that form follows function. That is, understanding how a user experiences an object takes place after a product has been put into a context where people are “realistically” using it. If the user experience takes the form of study to inform the design process, then it forms a feedback loop.

Anyway, Garrett (p22-23) breaks the elements of a user’s experience into 5 planes. These five elements are not concrete elements themselves, but more like logical development methodologies that come together to make a final form. The layers start from abstract ideas, such as the goals and user needs, and which slowly materialise into concrete representations as some sort of a user interface:

• The surface plane: presentational elements of a design
• The skeleton plane: the logical organisational structure of elements within the design
• The structure plane: overall logical structure of all the content of a web site and the logical content blocks which are presented to user as they interface with the site
• The scope plane: the scope of functionality on the site, and the logical tools that allow users access to that functionality
• The strategy plane: defines the aims and objectives of the site.

Design decisions made at any level ultimately affect the effectiveness of every other level.

Although lacking any historical data, Garrett (p28-29) describes the shift (and continual development) of the web as a publishing medium to an application platform: “Technology continued to advance on both fronts as all kinds of sites made the transition from static collections of information that changed infrequently to dynamic data-driven sites that were constantly evolving.”

Garrett continues by describing a web development community that was divided into two groups: those that approached the web from a software engineering approach, applying knowledge routed in traditional desktop software development. The other group approached the problem from a media distribution/electronic publishing perspective, relying on knowledge from electronic publishing, media distribution models, and information science. He describes this as a problematic duality of sorts, were half view the web as a software interface, and the other half as a hypertext system (p30).

Garrett continues (p31), stating that understanding the web as a software interface means looking at tasks. : “the steps involved in a process and how people think about completing them… we consider the site as a tool, or set of tools that the user employs to accomplish one of more tasks.” However, on the hypertext system side, the problem becomes one that relates to information: “what information the site offers and what it means to our users. Hypertext is about creating an information space that users can move through.”

Garret takes the development methodologies used by each group to refine the five layers listed above. This produces a hybrid development methodology where the needs of the needs of the business are juxtaposed with the needs of users. On strategy plane, we now find user needs and site objectives. For a banking website, for example, users need tools to be able to do their banking on-line, while the bank needs to cut costs of maintaining ATMs by introducing a web-based service.

On the scope layer, we now find functional specification and content requirements. The functional specification is the complete feature set to be used on a website, while content requirements includes what content is required for the site.

On the structure plane we now find information architecture and interaction design. Interaction design refers to “how the system behaves in response to the user” (p32). Information architecture refers to the logical groupings of content so that it makes sense to the user.

On the skeleton layer, we find information design covering both the software and hypertext side, but it is also complimented by interface design and navigational design. Information design refers to “the presentation of information in way that facilitates understanding” (p34). Interface design refers to “arranging interface elements to enable users to interact with the functionality of the system.” And, navigational design refers to “the set of screen elements that allow the user to move through the information architecture.”

Lastly, on the surface plane, Garrett puts visual design, what he defines as “the look of the finished product.” (all quotes are from p33-4)

To summarise, elements fall into either software interface (SI) or hypertext systems (HS) discourses, or on both sides (BS):

• Surface
• Visual design (BS)
• Skeleton
• Information design (BS)
• Interaction design (SI)
• Navigational design (HS)
• Structure
• Interaction design (SI)
• Information architecture (HS)
• Scope
• Functional specifications (SI)
• Content requirements (HS)
• Strategy
• User Needs (BS)
• Site Objectives (BS)

In practice, the expertise from each field becomes the goal of each layer. Each layer is a goal, not finished one at a time, but done relative to each other. The lower levels have a higher priority in the creating cycle, because they are the foundation and ultimately determine the form of the system.

The strategy plane

“the foundation of a successful user experience is a clearly articulated strategy” (p39).

Site objectives – what does the business want to get from the website (p41)

Business goals

Bran identity – as is relates to the political agenda in the communication process (p42)

Suceess metrics – what tools are used to measure the successful implementation of the site objectives and user user needs. “Concrete indicators how effectively the user experience is meeting the strategic goals.(p44)”

User needs – what do the users need from the website

User segmentation – used to identify different user groups (p47)

Demographics: age, gender, education level,

Psychographic “profiles descbbe the attidudes and perceptions that your users have about the world or agbout the subject matter of your site in aprticular.” (p47)

Håkon starts his thesis by considering (X)HTML as a structured document format, and argues that the abstraction level in HTML is ‘just right’ for structuring documents on the web (px). That is, the elements that are the structuring mechanisms for a document are complex enough to effectively describe the structure of a document, yet not overly complex as to force users to deal with low level formatting/typesetting of documents. He also argues that, in the web’s early history, the introduction of stylistic elements into HTML by browser makers threatened this balance: “the creators of HTML intended it to be usable in many settings but presentational tags threatened device independences, accessibility, and content reuse.” (p.29)

In the thesis, he outlines some important differences between print-based stylesheets and stylesheets for the web. particulalry, how the web, as a medium that is both interactive and networked, has different stylistic requirements thank print dcouments. When comparing print to web, Håkon states that (p32),

• “Paper-centric publishing becomes screen-centric”: documents are now experienced on screen, instead of being experienced on a medium like paper.
• “Single output becomes multiple outputs”: Although most documents on the web are viewed on screen, it was a possibility that users would access documents on other devices (PDAs, mobile phones, screen readers, print).
• “Author control becomes shared author/user influence”: In print media, a user receives a document in its final form and cannot directly affect what a document looks like. On the web, documents are assembled on the user’s computer; the user has the ability to intervene in the formatting process and change the document to suit their needs. For instance, the user can change font sizes, or even link colors, etc.
• “Stand-alone documents become hyperlinked”: where once citations was the means by which ideas where linked together, on the web ideas are linked by hyperlinks over HTTP or other protocols.
• “Dependent delivery becomes uncertain”: content and style in a document become linked to a sometimes unreliable internet resources. Unlike print, where the user recieves a document in its final form, the author needs to prepare for situation where resources are unavaliable but content is still accessible and presentable. Håkon (p32) states, “with the introduction of the web the focus of style sheets is shifted from being an author’s tool in the authoring process to being a tool for content reuse after the contented has been generated.”

The thesis paints a clear history of the the print-centric foundations of both HTML and CSS – particularly as both have close relations to Scribe/ODA/SGML/DSSSL/FOSI/TeX. However, it does not cover the (graphic/print) design related decisions made in those formats. Ie. Why where those languages designed (speaking from a print layout design perspective) to support some particular features but not others? What theory went into desgining those languages/technologies? The thesis, however, does not talk about why particular stylinng elements where included in CSS. It is simply that they W3C copied much of what was already available from other specifications and technologies. The box model, for instance, is heavily influenced by TeX’s layout model (p219). “The VMF [CSS Visual Formatting Model] should be able to replicate common typographical effects. Ideally, one should be able to take any book or magazine and design a CSS style sheet to achieve the same layout.”

According to Håkon, in order for a style sheet langauge to be suitable for the web, the language must be (p187-8):

• stream-based: so styling can be applied incrememtally as the style sheet downloads.
• screen-based: units used in the langauge must be suitable for screen display.
• able to negotiate between conflicting stylistic preferences: the cascade model.
• able to support media specific style sheets: able to support different presentation contexts, such as projections, PDA’s, etc.
• able to style hyperlinks: able to apply styles to hyperlinks.
• robust: able to function with the unreliability of the web.

CSS was designed to present structured documents, not interfaces (although, regardless, I believe CSS is very effective at presenting interfaces even if the structural semantics are lacking in HTML).

Another interesting thing in Håkon’s thesis is his brief discussion on displaying content on small screents (p243-247). Håkon describes the approaches used to scale content to small screens:

• “cascading: The browser applies a browser style sheet to the document;
• linearization: The browser linearizes the document presentation by turning table cells and and positioned elements into normal block-level elements;
• element removal: The browser removes certain elements unfit for display on small screens; and
• element resizing: All elements are given a maximum width equal to the screen size, and are scaled down if necessary.”