• Greetings from Portland
• Thanks to Nick
• My Work @ Planar
• My Work @ PSU
• My past work (Hot Pepper, OMSI)
• Any Timbers Fans in the room?

Press the right and left arrow keys to more forward and backwards in this presentation.

• RBF used the term Dymaxion (Dynamic Maximum Tension) to describe a number of his projects. Here I use it to describe three tensions that impact a user's experience on a web site:

• Each of these Tensions can have a profound impact on the creation and operation of a web site.
• Discuss the opposing forces that make these tensions

• We already know the Who, and the Where.
• These consitute the Why, What, and How questions. [NEXT]
• Why: Why is the user coming here? (Attraction) [NEXT]
• What: What are they doing? (Concentration) [NEXT]
• How: What are they using? (Evolution)

• Pull based on what the user wants

If the user wants something and they know it's there, then there's less reason to show it off. There's no need to convice a user that they want to get to what they already want to get to. [NEXT]

Example: Users expect a Contact Us page with e-mail and maybe street addresses. A simple menu item in the top nav or in the footer will suffice. Even if that information is 90% of what an audience uses, there's no need to dedicate the precious space 'above-the-scroll'. [NEXT]

It's like Judo: Utilize the momentum of the user to get them to the parts they know about

Let's rephrase that.

• Push based on what the host wants

If the site is trying to give users something they don't expect, then it's important to show off the 'thing'. The User has no motivation and it's important to provide that motivation for that behavior.

Example: If there are forums or services or add-ons that need to be promoted, this is when you have the additional space, this is when you add subtle touches to draw the attention (Images of eyes always capture attention.)

The goal is to take the motivation of the user into consideration when faced with balancing front page and navigation real estate.

• Get out of their way
• Get in to their brain

Users are waiting. Waiting and waiting to get to the information they want.

By removing the barriers between the user and the information, we make the web site more useful and give them a strong reason to revisit and use these tools.

Precisely by getting out the way of the user, we give them an environment where information can be most easily absorbed, because we reduce the separation from the user's inital impulse and the reaction that the site provides.

[NEXT] The variety of screen sizes continues to grow.

Living Room televisions, smartphones, and laptops of various sizes and shapes are making the 'average' irrelevant, or at least, self-referential.

(Designing to the average is designing to the average that everyone else designs to.) [NEXT]

Display Variety

• 10 foot interface: Requires large actions, large elements and big short text.
• 2 foot interface: Today's standard interface. Good enough for now?
• 6 inch interface: iPhone, Smartphone, wristbands? Potentially even more difficult than the 10 foot interface. No bevels, extremely high contrast icons and text. [NEXT]

Text

• Multiple sizes based on quality of user's eye sight. Design large: People who want more densly packed information already know how to downsize web text. Older users do not know how, and can't change it for themselves. They will simply walk away.
• Multiple resolutions based on pixel density. Chart of Apple Display hardware DPI: http://daringfireball.net/2007/06/high_res_macbook_pro [NEXT]

Images

• Images don't resize. How do we deal with this? Thumbnails should always open to larger versions and be badged as such. Flikr's got a standard way of showing larger sizes. Perhaps we should piggy back on this?

Navigation

• Less is more? Taken to the extreme, does the removal of naviagtion to the point where a web page has the same navigational elements of a gopher page?
• Example: iPhone hides all but the most basic navigation. This is still being reviewed, but most commonly used actions can be accomplished here.
• Example: Windows Media Center and TiVo hides all but the most basic navigation.
• Example: Desktop experience provides all the UI at once
• There has been an overlap between navigation tools and location display. Is this necessary? Does knowing what page (in what sub-section, in what parent section) I'm in mean anything? Parent, child and immediate siblings may be all that are necessary.
• c.f. Linear interface

Zoom in and out

• Becoming easier and easier on Macs
• Standard part of Opera
• Used on iPhone
• As we approach higher density displays, it will be critical to prepare for them. Hopefully most of the issues will be dealt with in the browsers, but what can we do? Stylesheet switching is an option, but interface affordances are necessary to improve their usability. Browsers provide only rudimentary and often, non-contextualized options.

• Get out of their way
• Get in to their brain

Speed

"Speed, it seems to me, provides the one genuinely modern pleasure." - Aldous Huxley

Be ready for the worst case scenario. The slowest connection is the one to target: 300 baud. Every other speed benefits from increased communication efficency. Our target: 0.1 seconds until usable/engaging content becomes available.

• http://www.useit.com/papers/responsetime.html
• http://www.w3.org/Protocols/NL-PerfNote.html
• http://www.useit.com/alertbox/9512.html

Potential techniques you may be overlooking:

• Reduce Total Files
• Don't Nest Includes
• Preprocess Static Includes
• Good Old Image Optimization
• Tabs To Indent Code, Not Spaces, Or Code Compression.
• Multi Thread With Multiple Hosts
• http://www.stevekallestad.com/blog/pipelining_and_task_management.html
• http://blog.danbartels.com/archive/2006/09/19/Tweaking-IE-_2D00_-10-Connections-per-Server.aspx
• http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=162&format=html

http://www.websiteoptimization.com/speed/

Touch

• No Mouse
• No Keyboard
• No Hover (Link)

Touch interfaces have no hover state. What does this mean for your average CSS or JavaScript menu? Can your top level navigation provide pages that substitute for the drop-down items?

Aural

Aural interfaces are at their core, a linear interface. Touch is about removing the mouse and keyboard, what happens when we remove the display?

• No visuals
• 1-800-GOOG-411

There is a general trend to flexible interfaces and there's no reason why voice-delivered web pages should not be on this list. Information retrival via the phone is coming. There are times when a display is not an option. This is the the only real answer.

The linear interface requires even further paring of the non-content elements: Site mastheads, ad banners, incidental images, navigation are all on the chopping block.

Rule of thumb: if you have to use a "Skip to.." link to make your page more accessible, you have a fundamental problem.

Pick your favorite model. Common models have 4 to 5 groups.

• Myers-Briggs
• Kolb
• Kolb - Honey/Mumford Variations
• Herrmann
• Felder-Silverman

Cover all the modes.

How does your site work with older tech and with future situations?

• Future proofing a site starts with considering the URLs that will be used over the lifetime of the site. Make sure that the directories and URLs are refective of content, not technology.
• PermaURLs: When migrating and 'cleaning up', be sure to use either redirect files, server settings or mod_rewrite to help incoming links migrate to the new locations.
• http://www.w3.org/Provider/Style/URI
• Pages as Bundles (.app bundles)
• An important part of getting pages to be future-proof is removing all references to the technology used to produce the page. This is common with most of the larger blogging tools, but is relevant to all Web work.
• At Planar, we consider pages much like Mac OS X applications, which are actually structured as files directories with a .app extension on the root folder. All of the resporces for that application (bitmaps, property lists, etc.) are stored in that directory.
• On our sites, each static page is a directory with an index.asp or .cfml, or .html and all incoming links refer to just the directory, not the file name directly.
• This has alrady saved us a few times as we've migrated pages from being staticly rendered to using ColdFusion to Classic ASP and to whatever else might be coming.

• Future proofing a site starts with considering the URLs that will be used over the lifetime of the site. Make sure that the directories and URLs are refective of content, not technology.
• PermaURLs: When migrating and 'cleaning up', be sure to use either redirect files, server settings or mod_rewrite to help incoming links migrate to the new locations.
• http://www.w3.org/Provider/Style/URI
• Pages as Bundles (.app bundles)
• An important part of getting pages to be future-proof is removing all references to the technology used to produce the page. This is common with most of the larger blogging tools, but is relevant to all Web work.
• At Planar, we consider pages much like Mac OS X applications, which are actually structured as files directories with a .app extension on the root folder. All of the resporces for that application (bitmaps, property lists, etc.) are stored in that directory.
• On our sites, each static page is a directory with an index.asp or .cfml, or .html and all incoming links refer to just the directory, not the file name directly.
• This has alrady saved us a few times as we've migrated pages from being staticly rendered to using ColdFusion to Classic ASP and to whatever else might be coming.

As the web evolves in jumps and spurts, what can we do to improve the distribution of the tech? A great example is Dean Edwards' "IE7" Javascript library. http://dean.edwards.name/IE7/

This is a great example of how bugs in browsers can be overcome. By using JS libraries to patch over these bugs, our content and styles can be more streamlined. Other opportunities exist far beyond this. Some possibilities:

Site/Page to Slideshow via S5 Take the S5 library and use it to create a presentation based view of your web site. This 'slide show style' might also be the basis for a linear/aural-based version.

CSS3 via JS - http://www.css3.info/preview/ The CSS 3 specs are in Working Draft stages. Using JS we can emulate or even implement the specs.

VRML? 3DHTML? Going even further a field we could imagine bringing VRML or some other 3Drendering to life by using SVG.

Microformats Microformats have only reached a limited audience. Is something that a JS library might be able to do to to make this info more apparent or accessible?

• SciFi UIs:
• http://w5.cs.uni-sb.de/~butz/teaching/ie-ss03/papers/HCIinSF/