This page has grown too large: and so leaves out whole chunks of interesting stuff: It is also a shuffles between interactive navigational experiments and "standard-code"structured navigational web-design

this is a short list of seminal reading/authors/practitioners and is far from definitive or extensive: just a set to start: like the listmanias on Amazon

Marshall McLuhan - (Understanding Media) and The Gutenburg Bible)
Rick Poyner (Design Without Boundaries: or a new book Communicate!) both are interview with key "new" typographic designers
Nicolas Negropointe - (Being Digital)
Jakob Nielson
Don Norman - (The Psychology of Everyday Things)
Brenda Laurel (The Art of Human-Computer Interface Design) "Of course this book doesn't metion the web. It was written back when the WWW was not even a twinkle in Netscape's eye. Forget the black and white preaching of Jakob Nielson this is the true holy book of digital interface designers. I've been in interviews where they ask about this book."
Games: Chris Crawford (on video games). Noah Wardrip-Fruin (First Person,) academic papers, I'm afraid, from key game designers
Coders: John Maeda; Jobe Makar; Kai Krause; Jeff Veen;
Cinematography by Peter Ettedgui interviews with great filmmakers:
Walter Murch, Francis Ford Coppola In the Blink of an Eye
Erik Spiekermann/Neville Brody

Cyber-fiction: Richard Adams; Philip K. Dick; William Gibson;

Sites with coding experiments, visual examples and examples of the code-- there are loads with code or experiments alone (see yugop, joshua davis, Sinnzeug, Whitney Artport, Andy Foulds, Design Chapel, Vector Lounge, Natske )

Flash Examples just a reminder that there are samples of Flash scripting on the menu-link above

Uncontrol, poblob, and codedoc (to a lesser extent) tell you how

UNCONTROL www.uncontrol.com I like the way the topframe animation keeps a record of what you've visited and (if you want it) the order. Try wriggle and clock, reflection, macro

POBLOBhttp://www.podlob.com/ (URL calls php to use javaScript to open new windows) try "resizing slideshow" "navigation dock" "xml" , "dynamic singleframe menu" -- selfscrolling dropdown is an interesting idea

KIRUPA http://www.kirupa.com/ tutorials and some downloadables -- Flash 5 and Flash MX scipts will almost certainly work with MX 2004

http://flashAPI.yestoall.com

other scripting sites
were-here.com : : ultrashock: : moock.org : : actionscript-toolbox.com : : actionscript : : virtual-fx.net : : swishzone : : flashkit : : swishspot.com : : swish-tutorials : : wow-factor : : flashkit : : nick's : :
robert penner : : http://www.flashguru.co.uk/ note the sites done in stylesheets

This is a pretty damn good trick (you need a webcam) http://www.webcamtastic.com/

Interactive navigation has many options - but there are also some standard function which are expected/accepted currently -- see comments by Jeff Veen, Steve Krug and Jakob Neilson. It is particularly worth remembering that you won't be able to stand next to the user of your navigation - pointing to where they should click. But I don't think that should stop you experimenting

There are categories of navigation depending on what the user wants to do: and whether they want to spend time learning how to do it.
For information design: there are there is a basic separation: between the user who is browsing towards a vague goal, one whose is seeking a specific item.
For immersive navigation, for games and software: assumes a bigger commitment to learning the navigation, and the interaction and navigation can be more complex.

Most people will say that there are rules to creating good information navigation:
1/ The "distance" between the start of the user's search and wuncovering the information is as short as possible: the least number of decisions:eg mouse-clicks, the least cognitive load: eg changes to layout, a clear label for each section of information.
2/ The "route" back is easy to find: a clear indication of the route taken to get there: "breadcrumbs" or tabs. The need for memory is kept to a minimum. A good structure for the information.

These guidelines suggest that the design should make the information path as "flat" as possible; ie as many levels of information should all be visible at one time as possible - with a design to explain and separate the levels available.

3/ The information should be presented in a manner useful and appropriate to the user ie the level of complexity, the right information, enough information, the right level of language, the right medium to help explain the information

4/ The information found can be kept or recalled. The user should have the chance to end their interaction with something to show for their time.

In a virtual environment there is a temptation to build a "real" enviroment. A real environment has two advantages:
a/ it means that the user will naturally understand the navigation and clues, and
b/ the setting will put the information in the right context, making it easier to remember and understand.

this is a site where you can test how your site is used (its sort of free)

Please remember that a virtual reality does not have to follow the rules of reality: it can deform and alter to match the contents and users requirements. The information generally includes graphics and text and abstract concepts. Most established forms of user information navigation use graphic, unreal devices -- eg the dropdown menu

VODAFONE FUTUREShttp://www.vodafone.com/ a stylish use of navigation and "3D" photos/video

Kartoohttp://www.kartoo.co.uk/ data-visualising interesting search engine based on proximity -- see alternative at Sinnzeug www.sinnzeug.de
Visual Thesaurus http://www.visualthesaurus.com/

They Rule http://www.theyrule.net They Rule allows you to create maps of the interlocking directories of the top companies in the US in 2004. The data was collected from their websites and SEC filings in early 2004, so it may not be completely accurate - companies merge and disappear and directors shift boards.
Horde of Directorshttp://www.lcc.gatech.edu/~bogost/horde/ puts the player in the role of an activist trying to advance a social agenda in the complex world of interrelated corporate and government interests. By creating simplified experience of corporate interconnectedness players learn that every board director leads to a whole new network of cohorts, who sit on other influential corporate boards and government organizations.
Etnies Boots Deutch www.etnies-germany.com Playful interface, I liked the reduced screen to say where you had visited. For no good reason I could see except skateboard style.-- but compare it with http://www.etniesgirl.com/



Leo Burnett Canada well worth a look (winner of a Pencil at D&AD 2006)

Japanese Interactive Adverts
Cute intro -- but I can't guess what you are supposed to do: in fact you click on the far right text to go to the awards

Mercedes S-class -- Bloody Excellent -- if you don't like this you aught to think about what you are on the award for. Designed interaction that fits the message and looks good to boot. Navigation is a bit tiresome -- but kinda nice despite that

Bringing object close together, bring them into the main focus of the user (or onto the screen) while allowing other possible connections and navigation routes. Proximity is a less rigid way of structuring information; though it will be harder to code

PostToolshttp://www.posttool.com/index.html a nice portfolio site. the navigation is simple and clear -- the sliding is much too slow.
Chicago stock-exchange -- http://www.chx.com/sitemap.htm very clear and well designed, clean typography and use of space and very quick
Elephant Seven http://www.E-7.com- great use of grids
WILKAHNwww.wilkhahn.com -- serious Swiss clean layouts
AUTOMAT http://www.automat.at/2004/index.html another grid -- but has a look at both commercial and uncommercial (I like the change cvolur background -- give it a while).

Grids -- clean, light touch -- both on the layout, images, animations and navigation drop-downs
Elephant Seven is made with Cascading Style Sheet, wilkahn is made with Flash -- both are made for css use, but Flash manages embedded fonts more effctively

ZEN GARDENhttp://www.csszengarden.com -- variation of css + there are links to tests for Accessibility and other properties on the (in varying places depending on the design

Eye Magazine http://www.eyemagazine.com/ --elegent -if slightly complex navigational layout/searchengine through ten years' back-issues of Eye Magazine - all text all on graphics -- slightly frustrating

My Netscapehttp://www.mynetscape.com the visual design is a bit boring, but excellent for presenting an easy to understand and operate concept for the user. FITCH www.fitch.com separate windows but this time in Flash

LAST CLOCK http://www.lastclock.co.uk/not so much a navigation as information presentation -- but its construction links to the two sites above. Its style suggests methods of navigation Last is a clock that is a record of its own history. It has a second hand, a minute hand and an hour hand. The hands are arranged in concentric circles, the outermost circle being seconds, the middle circle is minutes, and the innermost circle hours. Each of the hands of Last are made from a slice of live video feed. As the hands rotate around the face of the clock they leave a trace of what has been happening in front of the camera.

SMART MONEY www.smartmoney.com - maps the proportions of each market sector
Table Lens http://www.inxight.com/products/sdks/tl/ Inxight's patented Table Lens technology to visualize large amounts of tabular data at once with an innate understanding of how to draw information from that data.

RELEVARE www.relevare.com a simple but very effective way to flatten navigation levels -- using Flash
take a look at http://www.flashguru.co.uk/ note the sites done in stylesheets -- (and he's so young)
INXIGHThttp://www.inxight.com/products/sdks/st/ - a rival to Revelare, using asimilar technique to flatten the navigation levels - though it
LEMMINGS this zoom lets the user see the whole panorama (including the bits thrown off-screen)

The overhead zoom was imported into information mining from games like lemmings and sonic; you needed both a close-up and general overview to work out the right paths

MEDIA LAB http://www.nestafuturelab.org/events/past/be_images/explode/space.html

REBOOThttp://www.may1reboot.com/flash.html competion of designers navigations-- submitted by designers lots of movement in the navigation

DONNIE DARKO http://www.donniedarko.com/ ground-breaking combination of interaction and narrative, spot on desigfor its intended audience-- imaginative use of html and coding (javascript) -- and it looks good. So, amazingly its still online
Forbidden Siren http://www.forbidden-siren.com/ a similer site to Donnie Darko -- from the same author

JUXT interactive http://www.juxtinteractive.com/ the old portfolio site has gone -- but the design has still got attitude (though its navigation is basid -- but the portfolio is stillinteresting. Death Clock angular uptight almost the opposite

360 Degrees http://www.360degrees.org/360degrees.html simple navigation -- but its nicely themed.
Design Challengenestafuturelab.org/events/past/design_challenge is also a simple navigation (sections get bigger on focus) but nicely themed again

Metadesign www.metadesign.com uses a horizontal sweep and vertical tabs
Habitat http://www.habitat.net/uk/main_uk.htm The site keeps a consistent style thoughout, which is a well focused to meet its client asparations

http://www.havaianas.com.br/#


FORM DEUTSCH www.form.de Basic Tabs -- simple, but simple to understand as well: and some nice colour drift in background, and scroll a long page to catch the logo shift (give it a bit of time). There not much else to say.
SALT http://www.saltlondon.com/main.php a lot of movement -- mostly quite sensible and giving feedback on the navigation choice -- maybe slightly over the topdesign by de-construct http://www.de-construct.com

ONE LIFEhttp://www.bbc.co.uk/radio1/onelife/fun/health/excess/drop_test.html a good piece of focus on delivery. The content and the design is well focused on the potential audience. And the timing of the deliery releases the information at the right pace

E}{PERIMENTS

Yugopwww.yugop.com was the site for experimental interaction

JOSHUA DAVIS the codes can probably be found around -- Joshua Davis has put them in books if not the web
http://www.joshuadavis.com and http://www.joshuadavis.com/portfolio_web/web_2003/giant_octopus/liquid_nav/

ANDY FOULDS http://www.andyfoulds.co.uk/ photographer and interactive experimenter

WHITNEY ARTPORT http://www.whitney.org/artport/gatepages/index.shtml The archive of "gate pages," which function as portals to net artists' works. Each month, an artist is invited to present their work in the form of a gate page with links to the artist's site and most important projects. (check the faces in the peoples portrait

Random Media http://www.randommedia.co.uk/ -- 'extraordinary people who produce extraordinary work. They are creative, friendly, out-going and they have their finger on the pulse.

Vector Lounge http://www.vectorlounge.com/ experiments mostly in animation
NATZKE www.natzke.com/ further experiment in Flash try Proximity and Pattern reflection
http://www.exonemo.com/SiV/THD/index2.html experimental javascript playing with html windows probably better done in Flash now - see DonnieDarko

3D interfaces

3D interfaces and simulations are standard for games, of course, most action games now generally give the user a choice of:
1/ First person POV, or an over-the-shoulder (if the main character is an important part of the game's plot, eg Tomb-Raider, Zelda.
2/ Third person -- a veiw from near-by ( generally side-on- but usually with a panoramic camera movement available to help get the genaral layout of the enviroment:
3/ Overhead or isometric (generally with zoom) -- to give a broad idea of the game enviroment (and possible goals). An "overhead", zoomable map can be used to give user's a cognative map of where goals and information is regardless of content -- see Relevare above

Older platform games have much more limited choice of views -- which in some ways enhances the game-play (as it limits the information and feeds the imagination), but it limits the immersive, narrative and cinematic nature of the experience.

3D rendering of realities partly appeal to our sense of wonder -- aiming to provide brilliant images of unseen lanscapes and events, this aesthetic appeal does not have to mean realism. There was a lovely site called bonsaka.com which navigated through an illustrated lanscape of theatrical flat scenery.

ArtificialEnvironments -- online games and "viral videos

HABBO HOTELhttp://www.habbohotel.com/habbo/en/ a classic 3D interface for a discussion board -- the isometric style allows users to move their 'avatars' around and see where they are in the rooms. Isometric layouts make the code much easier as well, because the movements are regularly spaced. Isometric are generally set at 30 degrees, but can be set at 45 degrees
SYDNEY OPERA HOUSE http://www.sydneyoperahouse.com/sections/tours/virtual_tour/vrtour2.asp the best use I've seen of quicktimeVR as basic panoramic. Probably pointless, but must have been used enough to be re-worked with an asp backend. The QTVR has been used separately. The smaller panoramas have been stitched together in a QT image-maker, but they are set inside (and operated by) a Flash navigation. The HiRes versions are worth loading though
Second Life -article on secondLife- http://secondlife.com/ a 3D games with bulletin board tecnology -- on-line gaming with community interaction -- the old game of Dungeons and Dragons writ large.
HalfLife and Tomb-raider (examples of the power of eyecatching visuals in game-play)

Online branding -- ok book -- Keith Drew London Laurence King 2002 : 741.60285 Review of sites in book

Inspiring creative web design : past, present, Chris Brock - Crans-près-Céligny AVA 2002 Review of sites in book

ORISINALhttp://www.ferryhalim.com/orisinal Flash games

DEVIENT ARThttp://deviantart.com/ its a bulletin board with some interesting stuff on it

entering information

The reason these sites are here (the reason why these businesses are still here) is they the interface reflects the users' scenarios: their decision making processes -- eg "I wonder what books people who've bought this one were interested in?" and " can someone give me a list of good books on this topic?" and "I want to know if my book has been sent off yet" etc etc

opodo.com and www.amazon.co.uk (amazon's backend is so well structured you can replace "com" with "co.uk" in the URL and reach the same book listing).

NISSANwww.nissan.co.jp - made with 3d software - not that interesting -- it doesn't explan enough, the realism

The Jerusalem Aechaeology Park www.archpark.org.il - scroll -- front page a little too "techy" for me and the subject. the scroll bit is eyecatching -- very extensive site but I didn't warm to the site.
National Geographic Pearl Harbour www.nationalgeographic.com - pearlharbour - zoom

flashsupport

yestoall.com
actionscript-toolbox.com
flashkit
ultrashock.com
third party for Flash
swfstudio
Flash studio pro fs-command creator
Flash 'N Pack
FlashAnts
Jugglor
LPFlashEX
mProjector
userDetectorForFlash
turbine - flash video encoder
javascript site
director 8
cell_phone/mobil/wireless toolkit

jobs

mandy.com -- media jobs many parttime/freelance
Digital Arts Network

Other peoples link pages

image Collections

http://britain.deviantart.com/
Mark Squires Links
Digital Arts links page
phono.com link
www.squidfingers
http://www.db-db.com

http://www.artdaily.com/links.asp?idl=5

On-line Help

www.digital-tutors.com
www.cgtalk.com (3D)
www.cgnetworks.com (3D)
learning-maya newbies (3D)
http://www.w3schools.com/