DAY 1

OVERVIEW

This workshop is about the devlopemnt process of navigation structures. We will work on the annual Trcks DVD. You will get a general overview of this topic which will enable you to develop a structures for mostly all digital interactive systems.
We will look into a conceptual model which breaks the whole developemnt process down into its single steps.

After this we will start to develop a content and information structure for the Trcks DVD by looking mainly into Information Architecture.

"The focus of good navigation design is organization, not graphics. Although creative graphics can add to the aesthetic value of the navigation, your primary goal is to make it easy for visitors to find their way to and from any part of the site you design."
(From Chapter 7 of "The Non-Designer's Web Book, 2nd Edition", by Robin Williams and John Tollett)

WHAT DO WE KNOW?

First, we need to know some things about digital systems and the whole system development process. Questions like: What is a digital interactive system? or Where do I start with the development? will be answered in the following section.

THEORY: Introduction of Garretts' Approach: Elements of User Experience

strategy,
incorporates both the creator’s goals and users’ needs and determines what’s in scope and what’s not. (Objectives, User Neeeds)

scope,
determines the features and functionality which will be included into the conceptual structure of the product. (Functional Specifications, Content Requirements)

skeleton,
is the concrete implementation of the underlying conceptual “structure” that organises the overall features and functionality. (Interaction Design, Information Architecture)

structure,
organises the visible components. (Interface Design, Navigation Design/Information Design)

surface,
is defined by its visible components. (Visual Design)

THEORY: THE PROCESS

Each layer is connected to its sourrounded layer (before and after).
Changes will affect not only the actual layer, it will also affect all underlying and sometimes even further layers.

THEORY: WHAT IS?

What is Navigation?
What is Usabillity?
What is Interaction Design?
What is Information Architecture?
What is Interface Design?

ACTION: EXAMPLES

We have a look at example DVDs

DVD former "trcks" DVD
DVD "anime" - Digital design trends and works from the book "anime".

ACTION: YOUR TURN!

Let us look at some websites you like and tell us why you like it.

Try to tell us something about the handling, the structure and how you feel when you use this website. Perhaps you could already say something to the navigation and content structure?

THEORY: SYSTEM

Deeper look into Garretts' Approach: Elements of User Experience

strategy
User Needs - are the goals for the site/product reagrding the end-user.
Site Objectives - are any kind of goal the site/product should reach (for example a business goal).

scope
Functional Specifications - a detailed description of teh "feature set" of the site/product.
Content Requirements - a description of the various content elements that will be required

strcuture
Interaction Design - definition of the system behaviour in response to the user.
Information Architecture - the arrangemnet of content elements within the information space.

skeleton
Interface Design - arrangemnet of the interface elements to enabl eusers to interact with the functionallit yof the system.
Navigation Design - the set of screen elements that allow the user to move through the information architecture
Information Design - the representation of onformation in a way that facilitates understanding.

surface
Visual Design - the look of teh finished product.s

Reference: The Elements of User Experience: User-Centered Design for the Web
Sample Chapter with the model

Olsens' modification

Strategy
Reference: Expanding the Approaches to User Experience

DISCURSE

What is the difference between Garretts' approach and Olsens' modification?
Which model should we use? When is it used?

THEORY: STRUCTURE DEVELOPMENT

Focus

Information Architecture
"Information Architecture (often abbreviated "I.A.") is the practice of structuring information (knowledge or data) for purpose. These are often structured according to their context in user interactions or larger databases. The term is most commonly applied to Web development, but also applies to disciplines outside of a strict Web context, such as programming and technical writing. [..]
Information Architects in this context help define such things as the division of topics and set the specialization of content types, and set guidelines and examples for the type of information that goes into specific content object types. The creation of categories and taxonomies is inherent in information architecture. This type of information is typically designed for a high level of re-use, with the intent that a single content object can be deployed to different media types, including print, online help, marketing materials and on Web pages." (Wikipedia)

How does an Information Architect work? - Mostly they create deliverables like site maps, flow diagrams and screen-level design prototypes to represent the structure of a Website or interactive application.

Categorisation
Which categorisation type do we use?

Taxonomy
"Taxonomy (from Greek verb tassein = "to classify" and nomos = law, science, cf "economy") was once only the science of classifying living organisms (alpha taxonomy), but later the word was applied in a wider sense, and may also refer to either a classification of things, or the principles underlying the classification. Almost anything, animate objects, inanimate objects, places, and events, may be classified according to some taxonomic scheme." (Wikipedia)

Folksonomy
"A "folksonomy" is a collaboratively generated, open-ended labeling system that enables Internet users to categorize content such as Web pages, online photographs, and Web links. The freely chosen labels – called tags – help to improve search engine's effectiveness because content is categorized using a familiar, accessible, and shared vocabulary. The labeling process is called tagging." (Wikipedia)

THEORY: Navigation Structure

How do we navigate through the content? We need to know some navigation models to answer this question:

All in one.

This is the simplest possible model. Everything goes on a single Home page. It's interesting to see many more sites using this approach, to simplify the experience and to reduce maintenance.

Flat.

A flat pattern is where all pages are arranged as peers, and every one is accessible from every other one. This is very common for simple sites, where there are a few standard topics, such as: Home, About Us, Contact Us, Products

Index.

An index structure is like the flat structure, with an additional list of contents. An index is often organised in some way, to make stuff easier to find. For example, a list of files in a web directory (the index page), or could be an index of people's names ordered by last name. Dictionaries and phone books are both giant indexes. Look at the corners of the pages, where the data 'index' is: it may be the first few letters of the word, or a marker that shows the alphabetical range on the page. Indexes work well when there is a medium amount of data, and also when that data can be ordered in a way that makes it easier to scan to what you want.

Strict hierarchy.

A strict hierarchy describes a system where you can only access a lower-level page via its parent. This could apply to a real-world model where there is a strict parent-child relationship between objects, such as arranging pages for company offices by their country. An office cannot be in more than one country. Many data models also have strict parent-child relationships, such as Message boards, Threads and Posts. Every thread belongs to one message board; a message board can have many (child) threads. Each thread can have one or more subsequent (child) posts. The important thing to remember about this is that, even if there's a strictly hierarchical real-world model, that doesn't mean that a strict hierarchy is the best way to represent it online. You should consider your users' goals and contexts of use. For example, while it's possible to arrange all your products by product category, that might not be the most intuitive way for a user to find it. Supermarkets often place the same items in more than one place, knowing that consumers will think about them and look for them under more than one category.

Multi-dimesional hierarchy.

A multi-dimensional hierarchy is where there are many ways of browsing to the same content. In a way, several hierarchies co-exist, overlaid on the same content. The structure of the content can appear to be different, depending on the mode you're looking in. A typical example is a site like Amazon, which lets you browse books by genre, or by title, and also lets you search by keyword. Each of these hierarchies corresponds to a property of the content, each of which can be useful for people in different situations.
(http://www.webdesignfromscratch.com/ia_models.cfm)

DAY 1 | DAY 2 | DAY 3 | Links | Contact

DAY 2

THEORY: NEXT What is?

After defining the structure we will have a look into the next development steps:

Interaction Design (structure)
How does the system, navigation, and interface behave?
How does the user feel the system?

General Definition:
"Interaction design is the branch of user experience(UX) design that illuminates the relationship between people and the machines they use. While interaction design has a firm foundation in the theory, practice, and methodology of traditional user interface design, its focus is on defining the complex dialogues that occur between people and interactive devices of many types-from computers to mobile communication devices to appliances. Best practices in interaction design can be described with an Interaction design pattern" (Wikipedia)

Interface Design, Information Design, Navigation Design (skeleton)
How to develop a visual language?
Call back of the user needs, our goals, and the technical environment definition. Bring them together to a visual language.

General Definition:
"User interface design or user interface engineering is the design of computers, gadgets, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction. Unlike traditional design where the goal is to make the object or application physically attractive, the goal of user interface design is to make the users interaction experience as simple and intuitive as possible—what is often called user-centered design. Where good graphic/industrial design is bold and eye catching, good user interface design is often subtle and invisible.
User Interface design is involved in a wide range of projects from mall kiosks to software applications to car navigation systems to e-commerce sites; all of these projects have some things in common yet also require some unique skills and knowledges. As a result, user interface designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, web design, or industrial design. What all these projects have in common is, of course, the focus on how the user interacts with the device/system/application." (Wikipedia)

"Information design is an emerging field; in the last years several designer and researcher from different disciplines are tackling this area. In general information design is focusing on transforming data into information, by combining different fields like typography, graphic design, psychology, ergonomics, linguistics, computing and others. Each field provides methodologies and principles, which are used to make complex information easier to understand and to use. Information design is dealing with so many different scientific fields that it could be seen as the metadesign of design and its different visualization fields."
(Kalle Kormann, 2005)

"The focus of good navigation design is organization, not graphics. Although creative graphics can add to the aesthetic value of the navigation, your primary goal is to make it easy for visitors to find their way to and from any part of the site you design."
(From Chapter 7 of "The Non-Designer's Web Book, 2nd Edition", by Robin Williams and John Tollett)

ACTION: GOAL DEFINITION

We will look at the DVD "anime" to see how they build the system and we will make a list of pro and contra points of things we liked and disliked to define our Strategy and Scope.

ACTION: LETS WORK

We have to decide what kind of navigation and category model we want to use.
We have to get to know our audience. Who will get this DVD? to define our User Needs.

How to structure Content
Content Overview/Review
We need to have a look at our content and information we are working with.
We need to classify each item and make a list of content types.

How to connect the content
We need to find Content Relations through sorting the content into the classes we developed.

When we finished the structure we will discuss it and try to find gabs and improve it. And we will look if it fullfill our User Needs.

ACTION: LETS GO FURTHER

Further we will generally collect thoughts and views for the design or other related output.

Now, it is your turn to do something.
Finally we would like to see some kind of creative ouput dealing with navigation structures and the conceptual structure we have developed.

It could be something like:
a graphical representation of the DVD structure,
a visual language for the DVD production (a kind of CD/CI development),
an interface design (perhaps a kind of prototype, which shows the functions),
an abstract work which uses the navigation structure as source,
a programming exercise where you try to visualise the structure,

DAY 1 | DAY 2 | DAY 3 | Links | Contact