welcome to usemedia, .digital .interactive .media .design, contact: joes koppers // news: news may 2011, human interference at new site for metamaticresearch.info semi self organizing cards for berend strik's portfolio at berendstrik.nl 20 feburary 2010, browse 299.520 images at laptopreflections.org, a project by Conditional Design. june 11th — december 08, Usetext, please touch on show at Graphic Design Museum Beyerd, Breda, Netherlands winter 07 — spring 08, working on interaction design for 7scenes.com july 2007, website online for MediaGuild summer 2007, updates over last 6 months have been slow due to some projects being under NDA... fall 2006, navigating experiences at bliin.com OOGlive september 29, now partly archived at ooglive.com usemedia nominated for isoc awards 2006 march — june 2006, Touch me at Next Level exhibition, Stedelijk Museum Amsterdam october 2005, usemedia.com is new. the (almost) complete archive of USE is now available & searchable under find. // items: ------------------------------------------------------------------------------------------- * Smart Newsreader - Interaction design for an online language education tool Created for Stichting Educatie Technologie / EDIA. Interface / interaction design and front-end development for ALANE Smart NewsReader, an application for language learning through current news bulletins. A user reads at his own level and is supported by translations and example sentences. Each read text is concluded by a short auto generated task. The design consists of a single page approach, with three distinct vertical sections, each with a number of horizontal sliding subpages. Technically: all html is javascript generated and communication with the (java) server is done through JSON protocol. The online application is currently only available at the public library of Amsterdam (OBA) ------------------------------------------------------------------------------------------- * MediaGuild - Website for MediaGuild, using new standards from HTML 5 proposal Created for MediaGilde / MediaGuild, an organisation that supports development of creative talent and entrepreneurship in ICT and new media. The interface shows four overlapping sections with the MediaGuild logo in the center. Content items are represented as colored circles, placed around this center, their color defined by the section or overlap they are positioned in. A section can be 'selected' — by clicking the section name — revealing more items in it. The same effect can be achieved by dragging the M logo around. Clicking an item will 'open' it, and shows its full text and media contents. The site is a first in using the CANVAS element, as proposed in the HTML 5 standard by WHATWG. MSIE compatibility is provided by Google's ExplorerCanvas project. Back-end used for the project is usemedia CMS. Communication between front- and back-end is done through JSON protocol. ------------------------------------------------------------------------------------------- * bliin - Bliin is a live community that lets you share images, audio, text and video from wherever you are, and it's shared with the world on the bliin Google map Created for bliin.com, a social network for sharing personal experiences, in real-time, located on a world map. The design concept is built around two 'i' shapes — representing you vs. other users — positioned on both ends of the screen. The world map forms an always present backdrop on which users and shares are displayed. All interface controls are initially folded into a compact bliin circle in the top left corner. The interaction with user shares — commenting, linking, tagging — all takes place in the expanded view of the medium itself at its geo location on the google map. The previous version of bliin included a mobile application, used to broadcast your live location, adding photo's and browsing your direct surroundings. Currently there's a dedicated mobile site for your handset. ------------------------------------------------------------------------------------------- * OOGlive - an interactive interface to multiple live news streams and related artworks Created for OOGlive event — artist commentary on the news — september 29, Westergasfabriek, Amsterdam. Presented by Volkskrant / Paradiso. The interface appears as a television mosaic, projected on a large screen, showing 18 channels/sources playing simultaneously. The sources consist of live streams (CNN/NOS/Al Jazeera), live webcams, a live camera feed, chat windows and the artist contributions to the program. On top of the mosaic, continuous scrolling RSS headlines are shown, altering between multiple online sources. At various moments in the program, the static mosaic (grid) transformed into a three dimensional world — a spinning globe, controlled by mouse movement — revealing many more sources to choose from. When collapsed the world produces a new selection of 18 sources on the grid. Any source can be dragged onto one of the four 'channels' at the bottom of the interface. These channels represent four more projected screens, placed on the side walls on location. The side-screens are also used to present 'breaking news', during which the interface 'world' expands, resulting in a viewers perspective from inside the globe. More info on the OOGlive event can be found at ooglive.com, including a small (non 3D) version of the interface. ------------------------------------------------------------------------------------------- * Touch me - Touchscreen game in which visitors of the museum become targets, while other visitors can deform and destroy them Created for "Next Level, Art Games & Reality", Stedelijk Museum Amsterdam, 2006 Touch me is a touchscreen game in which the visitors of the museum step into a game and become "targets" themselves. Other visitors, by touching the screen, can deform and ultimately destroy (explode!) these targets into pixels, erasing them off the screen. The 2 by 2.6 meter touchscreen is using the same custom touch technology as developed earlier for USETEXT, please touch, programmed by Arjen Keesmaat. A special thanks to Fabian Roth for providing the pinch mathematics. ------------------------------------------------------------------------------------------- * Respect2All - Educational project, making possible for schoolkids to record and publish videostatements about respect online A Dutch educational project about respect, created for stichting Respect2all / Oranjefonds. A collaboration with designer Luna Maurer Based on a simple grammar game, the designconcept for this project consistently uses 4-word statements following a strict structure: subject - verb - adjective - object. This mainly typographic style uses the latest font by Underware, Auto 1. The website makes it possible for all schoolkids to record short videomessages (statements), via a free of charge distributed webcam and the 'statement recorder', a password protected part of the website that can capture video/audio of any locally connected webcam and stream it to the server. The technology used for this is Macromedia Flash Communication Server. site: www.respect2all.nl print design: lesbrief.pdf (all content is in Dutch) ------------------------------------------------------------------------------------------- * DITVOORST DVD-box - The complete collection of Dutch director Adriaan Ditvoorst films on DVD Release by totalfilm, all in Dutch. Deze 7 DVD-box bevat alle films - 4 speelfilms en 5 korte films - van Adriaan Ditvoorst (1940-1987) in de allernieuwste digitaal gerestaureerde versies; PARANOIA ('67), FLANAGAN ('75), DE MANTEL DER LIEFDE ('78), DE WITTE WAAN ('83) en de korte films IK KOM WAT LATER NAAR MADRA ('65), CARNA ('69), ANTENNA ('69), DE VAL ('70) en DE BLINDE FOTOGRAAF ('72). Een uitgebreide geïllustreerde biografie in boekvorm - MORGENSTER - plaatst de filmer Ditvoorst in een historische context. Twee unieke DVD's completeren de box: DE DOMEINEN DITVOORST, de bekroonde documentaire uit 1992 en DITVOORST SOLITARY GENIUS (A LIFE IN PIECES), een interactieve DVD gemaakt door Thom Hoffman en Joes Koppers. Op deze DVD maakt u op verrassende wijze kennis met leven en werk van Adriaan Ditvoorst in meer dan honderd fragmenten uit diens intrigerende oeuvre. ------------------------------------------------------------------------------------------- * Frequency 1550 - Complete (interaction) design for a mobile game pilot project Waag Society developed a 'mobile learning game' pilot together with IVKO, part of the Montessori comprehensive school in Amsterdam. It's a citygame using mobile phones and GPS-technology for students in the age of 12-14. It is a research pilot examining whether it's possible to provide a technology supported educational location-based experience. In the Frequency 1550 mobile game, students are transported to the medieval Amsterdam of 1550 via a medium that's familiar to this agegroup: the mobile phone. The pilot took place in 2005 from 7 to 9 February and was supported by KPN Mobile's UMTS network. Try the functional design demo (use a PNG supporting browser) and browse an overview of interface designs. More at project URL: freq1550.waag.org ------------------------------------------------------------------------------------------- * ITEMS 6 - Portfolio article in ITEMS magazine Max Bruinsma was asked by Dutch design-magazine ITEMS to write a text about the work of USE / Joes Koppers. It was published in ITEMS nr. 6, december '04 - january '05. The complete text (in Dutch!) can be read at maxbruinsma.nl. ------------------------------------------------------------------------------------------- * DITVOORST solitary genius - Interactive DVD about life and work of Dutch filmmaker Adriaan Ditvoorst Presented at Dutch Film Festival Utrecht, 2004. Concept created in STIFO@Sandberg workshop 2001/2002. A collaboration with filmmaker and fotographer Thom Hoffman. DITVOORST solitary genius is an interactive documentary about life and work of Dutch filmmaker Adriaan Ditvoorst. The viewer is invited to browse through a labyrinth of images, clips, that are connected via thematic words. These words appear on the four sides of the screen, while watching the filmfragment. Each side is connected to the corresponding direction key on the remote control, which means the viewer can navigate the whole DVD (131 minutes total) by solely using the 'up', 'down', 'left' and 'right' arrowkeys. Besides the over 100 fragments large labyrinth, the DVD offers a 'biography track', a chronological overview of Ditvoorst's life and films explained in interviews with his friends and collegeas. Read more in this pdf (article in Dutch). The (short) online version of this interactive documentary can be found at ikonrtv.nl/ditvoorst. This site uses interactive QuickTime and offers a simular navigation as found on the DVD. (content in Dutch) ------------------------------------------------------------------------------------------- * USETEXT, please touch - "this is not a text, this is not a paper..." touchscreen installation based on usetext.com Created for the Stedelijk Museum 2004 "Municipal Art Acquisitions Graphic Design". USETEXT, please touch is a 2,70 by 1,90 meter touchscreen, based on the online text tools at usetext.com. It shows an alernate version of the layered text browsing tool#01. The installation uses a backprojection and a custom developed infrared touch sensing mechanism. The screen does not have to be actually touched, at certain distance the text already reacts on the users hands/body. Every object (hand, arm etc) pointed at and nearby the screen will produce an interactive 'cursor', making the installation (unlimited) multi-user. The touch sensitivity is based on analizing a video-image produced by a high senitivity black&white camera and infrared lights. ------------------------------------------------------------------------------------------- * Fused Space - OPTIONALTIME / public expanse wins second prize in international 'fused space' competition The third OPTIONALTIME concept "public expanse" wins second prize in international competition themed 'new media in/as public space'. Read the concept text at fusedspace.org. A collaboration with videoartist Susann Lekås. optionaltime.com ------------------------------------------------------------------------------------------- * browser browser - A browser for the best of the sandberg browsers Created for the exhibition "10 years Sandberg Design". Browserbrowser is a browser for the (best of the) Sandberg students' browserconcepts, submitted for International Browserday over the last years. The interface - in good browserday website tradition - consists of draggable and scalable browser windows, that act as (media) filters on the content. browserbrowser ------------------------------------------------------------------------------------------- * Optionaltime2 - An interactive video-installation blending multiple timelines reacting to the movements of the audience Second in the OPTIONALTIME series, created for the public entrance of NEMO science museum, Amsterdam. A collaboration with video-artist Susann Lekås. This interactive video installation shows three independent timelines blended together as one image and scene. Each timeline is connected to the viewer's actions in a separate zone in front of the projection. The audience shift the timelines, and create ('direct') an endless story. The movie is filmed at the same location as it is shown and creates an illusion of extended reality. all details at optionaltime.com ------------------------------------------------------------------------------------------- * Spirits United - Interactive documentairy-film build from short clips. The viewer is free to select the amount and order of the viewed clips. Created for Mixed-Up series of Dutch broadcaster NPS, online at cinema.nl. More about the project in this interview (in Dutch) A collaboration with Belgian filmmaker Nicolas Provost. Spirits United is an interactive interface to a collection of filmfragments made by Nicolas on his trips through Africa and the US. The user is free to watch and combine many different clips and soundtracks, all in one fluent filmic experience. This project uses the interactive capabilities of Apple's QuickTime Player. ------------------------------------------------------------------------------------------- * useware.com - useware.com is a future spot for publishing software tools useware.com is a future location for publishing various software tools. ------------------------------------------------------------------------------------------- * My Brave New Window - Live videoshow using 6 beamers creating a panoramic projection Performed at Museumn8 (museum night), Scheepvaartmuseum, Amsterdam. Originally created (2002) for Badischer Kunstverein Karlsruhe, Germany. A panoramic projection with 6 video beamers. Three videolayers of animated photographs create a three dimensional world which is sampled live to the music. The audience is recorded and placed within this new world. ------------------------------------------------------------------------------------------- * Deep Sites - Book by Max Bruinsma featuring some usemedia works Max Bruinsma's book "Deep Sites, intelligent innovation in contemporary webdesign" features usemedia.com and other urls by USE. deepsites.maxbruinsma.nl ------------------------------------------------------------------------------------------- * Windows 17.01 - Outdoor projection on Mediamatic's Supermarkt building. Reallife rendition of earlier windows experiments. Created for Mediamatic Supermarkt Outdoor projections, 2003 "Windows 17.01 apparently shows an ordinary exhibition private view behind three ‘windows’, a snack, a drink…. But then, for a brief moment, that image is unhinged as one of the windows focuses on a visitor and follows her through the space. The window breaks away from its fixed position; it even transgresses onto the frames of the other windows, and then settles itself down again. For a moment, the trompe-l’oeil is revealed for what it really is: an optical illusion, a manipulated projection of an earlier recording..." (excerpt from Mediamatic article by Geert-Jan Strengholt, read the full article here). ------------------------------------------------------------------------------------------- * usetext.com - A series of online text publishing and reading tools Today a large percentage of online content is (still) text based, and more than often this text is directly transferred from the paper to the screen. Forgetting about the specifics of a digital medium, authors have their online readers scroll through endless pages of linear text, on a screen that is not even pleasant to read from. usetext.com hosts tools that specifically think about publishing text for a (dynamic) screen. Usetext is a service, subscribers to usetext get a personal online database where they can write, store and publish texts using the usetext tools. A collaboration with writer Max Bruinsma ------------------------------------------------------------------------------------------- * 6th Browserday, Amsterdam - Website for 6th International Browserday, held in Amsterdam, May 2002. The website for 6th International Browserday was designed around this edition's theme: 'Wireless, Rich Air'. Four 'wireless' windows move and vibrate randomly onscreen, together creating a view on the content, which is placed on a fixed position on the desktop. The 'wireless windows' act as viewfinders; being dragged around the screen, they reveal the content underneath. A fifth window is provided with links to the different content sections of the site, a click on a subject in this window groups the four 'wireless' windows together and loads a new content page in their 'view'. Turn off any popup-blocking to view this site! view site ------------------------------------------------------------------------------------------- * Optionaltime - An interactive video installation in which the viewer takes part in the movie First OPTIONALTIME, created for 'Nonlinear Editing' exhibition at Museum De Paviljoens, Almere. A collaboration with video-artist Susann Lekås. "Between reality and fiction, before meets after." Optionaltime blends the moments present, past and future together into one experience. The viewer plays a role in a movie, sharing an elevator journey with fictive characters. The live image of the audience is captured by cameras in the installation and mixed into the movie, creating non-linear experience of time. all details at optionaltime.com ------------------------------------------------------------------------------------------- * Lectures & presentations - Past lectures and presentations 12 Faculty KMT, HKU, Hilversum. Subject: interaction design 06 Mediamatic workshop, Amsterdam. Subject: interactive storytelling 05 Ongoing Series, De Paviljoens, Almere. Subject: browsers 05 Input festival, Rotterdam. Subject: "DITVOORST - solitary genius" 05 6th Browserday, Paradiso, Amsterdam. Subject: website ------------------------------------------------------------------------------------------- * 5th Browserday, Berlin - Website for 5th International Browserday, held in Berlin, December 2001. The 5th edition of the International Browserday carried the theme 'Mobile minded'. The design of the website plays around this theme, providing four 'mobile windows' that can be dragged around the screen. Making combinations of the windows by placing them next to eachother reveals the content pages, spread over all four windows alligned. A fifth navigational window is added with shortcuts to the content as well. A click on a subject in this window automatically alligns the mobile windows in the correct order and displays the requested page. Turn off any popup-blocking to view this site! view site ------------------------------------------------------------------------------------------- * nl-design.tv - Online interactive TV channel with movies by and collected by NL.Design, Amsterdam Created for NL.Design NL-Design.tv is an online interactive TV channel, that features divers (design) clips in thematic channels. The interface is a custom skinned QuickTime move, allowing the viewer (user) to browse the different channels, watch all programs in a channel, or only selected programs in any order. Everything is on demand available. For the demanding viewer, there's an iChannel, which allows the user to create his own order of programs, selected from all available channels. The interface is simple drag and drop of program thumbnails until the iCH is conform wishes, after which a click on the 'lean back' button will commence playback of the created playlist. While watching a program, the viewer can have additional info scroll into view, with credits, links to related content and TV-style zap buttons. This QuickTime movie integrates Macromedia Flash for the interactive GUI. NOTE: since version 7.1.3 Flash support in QuickTime is disabled by default. To view nl-design.tv first check 'QuickTime preferences -> Advanced -> Enable Flash' NOTE 2: since version 7.3, Flash support in QuickTime is dropped entirely. This project can only be viewed with older installs of QuickTime ------------------------------------------------------------------------------------------- * Lectures & presentations - Past lectures and presentations 12 5th Browserday, Volksbühne, Berlin, Germany. Subject: website 10 Interface Explorer, Vienna, Austria. Subject: browser concept 09 Catalogue of strategies bookpresentation, Amsterdam. Subject: nl-design.tv premiere 05 HD new graphics bookpresentation, RAS galleria, Barcelona, Spain. Subject: usemedia.com 03 4th Browserday, Cooper Union, New York City, USA. Subject: "Changing the behaviour", read pdf 01 Film- and television studies, UvA, Amsterdam. Subject: Interaction design 01 Montevideo, Amsterdam. Subject: new.usemedia.com ------------------------------------------------------------------------------------------- * duck - a html puzzle featuring an animated bathtub duck Part of Please in Pieces, a series of interactive works/tools, in collaboration with Nirit Peled. Being online for more than 5 years, this little html puzzle is still gaining popularity on the net. Put the pieces in the right order to find a surprice... Turn off any popup-blocking! start ------------------------------------------------------------------------------------------- * archived. - The original interface of usemedia.com Late 2000 the first interface of usemedia.com was launched, mainly to link the first interface experiments 'say.' and 'new.' The interface used custom transparent scrollbars to 'scroll for less options and more detail', focussing on one of the four main sections, while scrolling the background image horizontally. usemedia.com has since served as a experimental webserver to test and publish a variety of interaction designs. In 2003 usemedia.com was updated to a layout simular to today's design, archiving the older interface and works under archived.usemedia.com. ------------------------------------------------------------------------------------------- * Lectures & presentations - Past lectures and presentations 11 e-culture fair, RAI, Amsterdam. Subject: 'PLEASe in pieces' 10 Browserday brainstorm, FIT, New York City, USA. Subject: interfaces, browser concept 07 Film- and Television studies, UvA, Amsterdam. Subject: 'PLEASe in pieces', webdesign 05 3rd Browserday, Paradiso, Amsterdam. Subject: 'underwater', videobrowser 04 new work 1, Sandberg Institute, Amsterdam. Subject: 'PLEASe in pieces' 03 WAAG, Amsterdam. Subject: 'browser browser' ------------------------------------------------------------------------------------------- * browser - Winning browserconcept presented at the First International Browserday First prize winner @ First International Browserday. More articles: eye magazine, mediamatic magazine (dutch version) The basic principle behind Browser was 'expansion', as in expansion of the access to content. While the browsers we're now familiar with usually aim at filtering and personalizing (both of which actually represent a kind of narrowing), Browser also allows random elements to come into play and offers a special interface which quickly gives a broad overview of the content. The principle here is that the more you look, the more you get. Expansion until you get something interesting. Browser doesn't have any fixed interface elements, such as a menu bar or buttons. The layout of the screen depends on how you surf. The mode of navigating through the content is connected to the user's actions, which can by turns be aggressive, intent, goal-oriented, fidgety, impatient, slow or fast. In the first version of Browser, the navigation is directly coupled to the mouse's speed and movements. Browser comes equipped with a large set of functions; the program itself decides which ones to employ depending on the user's current 'state of browsing'. This selection can be called up at any arbitrary moment by pressing a specific key (the 'option' key), but it can also appear automatically. Functions always appear at the mouse's position as so-called contextual menus, and thus they're not only coupled to the 'state of browsing' but also to anything which is located at the mouse's position, or any of the position functions as well. An example of this is the 'scroll' function, which appears when the mouse is moved to a spot where the text or image runs off of the screen. One of Browser's important functions is the on/off function. You can turn Browser completely off, at which point it only takes you to a site (which you then see full-screen) without doing anything more. The principle behind this is that content providers have to begin investigating the possibilities of the medium. Thus no general navigational standard to which all websites have to defer. The browser should be nothing more than an invisible intermediary. A medium, not an interface. The fast, impatient user As the first example of a kind of browsing, we have the fast, impatient user. This user will often not wait until a page has been completely loaded, but instead immediately clicks further. Browser reacts to this by inserting a new 'window' alongside the requested link, containing either a random or possibly a relevant location. As long as the user continues to browse at high speed, more and more 'windows' will be opened. Eventually Browser will completely switch over to the "zap state of browsing", in which the windows will no longer display the sites at their actual size, but instead will show small previews. If Browser's functions are called up at this point, they will be limited to three options: 'rewind', 'forward', and 'stop', i.e. only the functions which the user now needs. After the program has switched over to this mode, the mouse cursor changes into 'looking' mode, i.e. your eyes. If it ever becomes possible to actually implement this, the device will look where you look. A white frame then appears around the cursor, your focus area. The more you look around (via mouse movements), the bigger this frame becomes, and the random factor becomes greater within the frame. More and more previews begin to appear. The principle behind this is that the more you look, the more you get, up until the point where your attention has been caught, and your focus area becomes smaller (automatically, via less mouse movement). And now Browser generates, around the central point of interest, more previews, associations and relevant sites, relevant to the one you're currently looking at. This process repeats itself endlessly so that eventually you get generations of previews, guided by whatever grabs your attention. Ultimately, the user can decide to completely zoom in. This is done by clicking on the relevant preview, which causes the site to appear full-screen, and you wind up back in a so-called 'normal' browser. The slow, attentive user The second example concerns a compensatory style of browsing: a slow, attentive user. This user will stay on the same page for a longer period of time, and will for example scroll in order to go through the remainder of a long text. When Browser detects this behavior, the program switches over to the "layer state of browsing", which means that new links or information will be offered in different kinds of 'windows', namely 'layers'. These are placed on top of the current document, and retain a certain degree of transparency. Underlying documents are no longer invisible, but instead remain recognizable. Layers are activated by a simple pass of the mouse. This interface allows the user to easily retain an overview. It also becomes possible for the user to compare different kinds of information very quickly by switching between the various layers. In this way, research into a certain topic, for example, can be simplified. If Browser's functions are called up at this point, the user will find that there are quite a few extra options available. One of these extra functions is "locator", a tool which also serves to maintain the overview: it gives a graphic outline, with the help of spheres and lines, meant to represent the spatial structure of the information. Locator indicates where you are situated in regard to other documents or pages. It is a navigational tool within a specific site, and thus not one within the entire Internet. The most important characteristic here is that a distinction is drawn between direct and indirect links. With locator, you can skip certain steps, an expanded form of 'back' and 'forward'. At the same time, it's also possible to browse via associative links, represented by freestanding spheres — these concern related topics that Browser searches out for you. You can see locator in action at the Rietveld Academy's site, for which this navigation tool was initially developed.