No Section...

VIII.2 March 2001
Page: 55
Digital Citation

Industry briefs: Informaat


Authors:
Nico ten Hoor

back to top  Philosophy of Design

Informaat uses a user-centered design process that attempts to include not only traditional design disciplines but also information as well as content design. In this approach the close collaboration of multiple disciplines (e.g.: information design, user interface design and visual design) is preferred.

At Informaat the main discipline within the field of human interface design is called user interface design. Visual design and Information design are seen as complementary, but separate and specialized disciplines.

Informaat's user interface designers come from different backgrounds, such as industrial design or cognitive ergonomics. Depending on background, experience, and personal interest, the capacities of the user interface designers vary. While most interface designers have graduated from Cognitive Psychology or Industrial Design (with an emphasis on HCI), there are also several HCI designers who have training in the arts or computer science and attained their proficiency in HCI more through experience than educational background. Typical tasks performed by Informaat's user interface designers include task analysis, requirements analysis, concept design, design of navigation structure and of interaction style, prototyping and evaluation, specification and standardization and outlining guidelines.

Informaat's visual designers come from backgrounds such as graphic design, interaction design or industrial design. For visual design the most appropriate background seems to be graphic design. Still the (Dutch) academies of arts and design seem to educate largely for the traditional realm (print and television) and might focus more on issues paramount to designing for dynamic media. Tasks performed by Informaat's visual designers include realization of a consistent visual language, application of an organization's corporate identity, visualization of navigation structure, operation styles and status of operation, and the meaning of content and atmosphere. Actual designs usually constitute lay out (grids), typography, color schemes, illustration and photography, iconography and animations.

Informaat's information designers come from a heterogeneous background: writers, library science, and other information sciences (some were also originally visual and/or interface designers depending on their experience).

back to top  Design Process

The design process usually has the following phases: Briefing, Analysis, Concept Development, Design, and Production. Complex projects usually involve the participation of a multidisciplinary team. The disciplines involved in such a team vary from Information Design, Technical Writing, User Interface Design, and Visual Design to Software Engineering. Although they all contribute to the final product, they contribute in different proportions during different phases of the project.

Informaat considers certain formal phases (i.e.: Briefing, Analysis, Concept Development) as crucial stages in the projects it undertakes, each with its own spaces. As user-centered design requires an iterative design process, the stages listed above will be repeated, if usability checkpoints seem to indicate this is necessary.

In the briefing phase, a problem space is identified; this is the identification of the problem that a proposed product or service wants to address. In the Analysis phase this problem space is researched in context by performing site visits to end users and conducting user interviews on their experience of the problem.

While researching the problem space, it is useful to draw a design space which displays the project's (sometimes opposing) requirements, because the design space can serve as a map for possible design directions. The basics for design decisions are usually set in creative sessions that can involve varying brainstorming techniques.

A consistent design of the user interface project often requires the establishment or application of a visual identity. Studying different tones of voice or visual styles often starts in the Concept Development phase as a parallel action to the design of the human interface design concept. User testing is an important means of evaluating the design decisions. This takes place throughout the entire design process with prototypes of ascending levels of detail (from paper prototypes to screenshots to mockups to draft applications).

As applications become more complex, the need for a thorough grasp of concept and consistency towards design increases. With applications becoming more media-rich, the possibilities for original evocative design solutions expand. At the same time this calls for a more critical attitude towards the graphical enhancement of a user interface. There seems to be a delicate balance between the functional issues of information management and retrieval, and issues regarding the user experience and/or the (hidden) agenda of the broadcaster (the brand/make of the application or the company/organization behind a Web site).

It is our dream that with the expansion of possibilities of applications, the user possibilities will grow as well. This is not per se a logical outcome. I would like to witness the arrival of user interfaces that not so much limit the users or force the user to perform their tasks in prescribed ways, but rather stimulate the user to be creative. At its best the user interface is versatile and can be operated in many different ways, depending on opposite views that different users might have on an application. I imagine a user interface made up of building blocks that are highly customizable to personal wishes that stimulates users to organize and maybe even alter the way they work.

back to top  Design Project Example

bullet.gif About the application

The design problem discussed here is related to InfoRay Vision, a databrowser released by InfoRay Holding (www.inforay.com) that was designed by Informaat. The navigational device discussed here is still in the design phase and some refinements are due.

bullet.gif The design problem

The design problem entails a navigation device within a GUI that can fulfill two entwined functions: It should facilitate an exploring and switching mechanism. The exploring part concerns the need for disclosing user objects that are stored in a specific hierarchy; the switching mechanism offers available options for viewing the (contents) of the chosen user objects. The availability of views largely depends on the type of the user object; in this case the type is congruent with the hierarchical level of the user object. Also the availability of options for viewing the user objects can depend on a user's access permission to the repository of user objects.

What we set out to achieve was to have the navigation device make clear the subordination of hierarchic level over viewing options.

bullet.gif Project participators

Participating in this project were four Informaat members and the client's main software engineer/application designer, respectively Jonathan Arnowitz (main user interface designer), Gert van der Meulen (user interface designer), Liesbeth Vorst (GUI developer), Nico ten Hoor (visual designer) and Eddy Meijer (main software engineer/application designer).

bullet.gif Design process

The concept for the exploring mechanism was based on an earlier version of this application. From what we had learned from previous user testing, this seemed an appropriate solution. We wanted to research whether the switching mechanism could occupy a frame of the screen that had had no strong function in the earlier versions of the application. The frame had served to contain imagery related to the product's visual identity, and on occasion the changing of the state of the application would be reflected through the changing of scenes in this frame. We wanted to see if we could keep these functions while adding the function of switch-view to this frame. As the frame was positioned beneath the frame used for the exploring mechanism, the dependability of the switch on the explorer seemed in accordance with the way a user is likely to read the navigation device.


We hope to witness the arrival of interfaces that stimulate users to be creative, rather than forcing them to perform tasks in prescribed ways.


In the effort to accomplish a solution there were several brainstorming sessions, which led to primary sketches. Initial design concepts for the switching mechanism varied from spheres with thumbnail-like previews of the pages to which they served as a trigger, to color-coded planet-like objects, to three state buttons that combined text with iconography (expressing the view type). These first efforts all had different advantages and drawbacks but they failed to position the switch as a logical extension of the explorer.

In our latest version we managed to link the compounds of the switch to the hierarchic level of the selected user object (in the explorer). Before describing this latest version of the switch, a summary of the design rationale for the explorer seems useful.

Since some of the interaction possibilities differ very specifically from, say a tree widget like the one within MS Windows Explorer, we felt we needed different iconography so the user would not be tricked into false expectations. One very specific characteristic of the tree in this application is the fact that the type of the user objects derives from the hierarchic level. These levels are not interchangeable, nor can tree items spawn child items of the same type.

In very early versions of the application, a real world metaphor had been tried for the family of tree items, but this proved to be far too literal and too closely linked to the old world of static paper documents. It also proved unable to convey the delicate relationship the end leaf and the last parent tree item hold with each other.

The current iconography for the family of tree items uses a more abstract visualization, with the following intentions:

  • To reflect the fact that all tree items (except for the end leaf) are parent items which store the next level of parent items; these tree items are designed as forms that contain subdivisions. Each next level of tree items uses the transformed shape of its parent's subdivisions as its base form. This principle becomes especially apparent in the expanded state of the parent items wherein one of the subdivisions takes the shape of the base form for the next level of tree items.
  • To reflect the fact that the user objects that are high in the hierarchy are closely related to the data sources (the beginning of the information) and are fairly stable and merely mathematically modeled. These objects have been designed using geometrical forms and less saturated colors. In comparison, the user objects low in the hierarchy that stand close to the user are more concrete and more viable for change; they have also been designed using less strict forms and more saturated colors. The second to last tree item, the Report, is one of the most concrete objects for the general InfoRay user. To some extent it can be read as a document. These are the user objects that can be altered and stored in the data repository by the general user. The iconography uses a square with basically no further sub-divisioning to reflect this statement. The last tree item, the Dynamic Page, can be seen as sheets with a somewhat fluid behavior. They can be easily interchanged within the reports. The iconography relates this by providing a page sheet-like form, albeit with the earmark bent backwards.

The compact form of the family of icons allows for easy addition of flavors to the tree item icons for signaling all kinds of specific states these user objects can have.

The design rationale for the switch calls for having the switch visually synchronized with the followed route in the explorer, so that the user can learn which dependencies exist in order for the viewable options to be available. This is probably best explained by going through the details of each level. (See figures 1 to 8.)

The design solution outlined here can be regarded as a high-fidelity prototype. The next step in the development is user testing for validating the concept.

back to top  Author

Nico ten Hoor
Visual Designer at Informaat, Netherlands Tel: +31 35 54 31 222.
Nico.ten.Hoor@Informaat.nl

back to top  Figures

F1Figure 1. On the highest level, the application neighborhood, a choice for a user model has to be made; a switchable view is not available. This can be perceived as the beginning of the information; classifications are yet to be made.

F2Figure 2. On the next-to-highest level a user model is selected and the root unfolds. Only one view option is available: the content of the user model. Just as if this was a single radio button real interaction is not possible. The object in the switch merely functions as an indicator for which level in the tree is the currently selected level. Please note that the object is designed as a three-dimensional representation of the tree level to which the view option is available. One of the subdivisions already uses the color of the next tree item icon.

F3Figure 3. At the following level (Library level) a second view option is available: X-Ray. Choosing this view option causes the contents pane to project a map of basic information components useable for that specific Library.

F4Figure 4. The next level (Collection level) differs not so much in function from the previous level. Please note however the slight changes in the design of the switch for the view option named 'Content'. Just as the tree item for Collection uses a more saturated color than its parent tree item, the switch follows suit.

F5Figure 5. The next to lowest level (Report level) offers an extra view option. The X-ray view is here split in an Available X-Ray view (maps all basic information) and a Current X-Ray view (maps a subset from the basic information components currently used). Please note that the Current X-Ray switch is designed as a slice of the X-Ray representation. The Content switch is designed as a cube, the three dimensional presentation of the square-like Report tree icon. Please note the separation line on the cube.

F6Figure 6. The lowest level (Dynamic Page level). This is where the actual significant information of the end leaf is displayed in the content pane. The Content switch is here split to the Table and the Graph view option. Please note that the switches here are again three-dimensional reinterpretations from the (2D) Dynamic Page tree item icon. The Table view is the default view at this level.

F7Figure 7. Choosing the Graph view option results in the display of a graphical presentation of the same content of the end leaf.

F8Figure 8. Choosing the Current X-Ray view option results in the display of a map with a subset from the basic information components currently used.

UF1Figure. Nico ten Hoor

back to top  Sidebar

Job titles for design & usability positions:

  • User interface designer
  • Visual designer

Customary job qualifications for these positions:

  • User interface designer: education in cognitive ergonomics or software ergonomics
  • Visual designer: education in arts, specialization electronic media
  • Number of individuals employed in design and usability: Thirty

Breadth of project teams:

  • Multidisciplinary teams: visual design, user interface design, information design, technical writing, software engineering, web development

back to top  Sidebar: Practitioner's Workbench

Favorite Periodicals:

  • Eye (on graphic design, British) Emigré (on typography, American)
  • Form + Zweck (on design philosophy, German)
  • Metropolis M (on contemporary art, Dutch)

Favorite Publications:

  1. Rick Poynor. Typography Now series, Booth-Clibborn Editions, London.
  2. Liz Farrelly, Urgent Images, Booth-Clibborn Editions, London, 1994.
  3. Tomato. Process: a Tomato Project, Thames and Hudson Ltd, London, 1996.
  4. Rem Koolhaas and Bruce Mau. S,M,L,XL, 010 Publishers, Rotterdam, 1995.

Favorite Webzines:

  • Atlas (www.atlasmagazine.com/)
  • Kaliber10000 {The Designer's Lunchbox} (www.k10k.net/)
  • Netbaby, fun! (www.acne.se/netbaby/)
  • Web design gallery: Digitalthread (www.digitalthread.com/)

Tools Used to Design On-Screen Interfaces:

  • Adobe Photoshop for designing and image editing.
  • Adobe Illustrator for vector based design and editing.
  • Adobe ImageReady and Macromedia Fireworks for designing and optimizing web graphics.
  • Iconfactory IconBuilder Pro for icon production.
  • Macromedia Director for prototyping.

Essential Web Plugins:

  • Adobe PDF Viewer
  • Apple QuickTime
  • Macromedia Shockwave Flash.

Favorite Quotes:

  • "Allow events to change you. You have to be willing to grow. Growth is different from something that happens to you: You produce it. You live it. The prerequisites for growths are the openness to experience events and the willingness to be changed by them."--Bruce Mau
  • "Capture accidents. The wrong answer is the right answer in search of a different question. Collect wrong answers as part of the process. Ask different questions."--Bruce Mau

Magazines:

  • Dazed & Confused, Index, Speak and *Surface

Web sites:

  • A|B|C| (www.quam.it/abc/)
  • Bullseye Art (www.thing.net/~bullseye/)
  • Anything by Future Farmers (www.futurefarmers.com/)
  • Lowroad (www.nolo.de/index/splax/splashbot.htm)
  • Starving (www.hungryfordesign.com/fsHungry.html)
  • Suture ö stockholm ö (www.suture.com/)

Music:

  • Scanner
  • Pan Sonic

back to top 

©2000 ACM  1072-5220/01/0300  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2001 ACM, Inc.

Post Comment


No Comments Found