!!Be the Future Can't see the future for the trees? It's time to take stock of where the Web is headed and what you can do to bring the technologies and techniques of tomorrow to the web users of today. We'll explore multi-modal communications, pursue Aldous Huxley's modern pleasure, catch up with Ted Nelson's future past and figure out how to future-proof our web sites. All this with lofty theories and concrete examples in one fell swoop. =========================================== !!INTRO: Sites deal with three Dynamic Tensions =========================================== "Don't fight forces, use them." - R. Buckminster Fuller 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: * Attraction: What the user wants <-> What the host wants * Concentration: Get out of their way <-> Get in to their brain * Evolution: Be Bug-wards Compatible <-> Be Future-Proof Each of these Tensions can have a profound impact on the creation and operation of a web site. =========================================== !!!Attraction =========================================== * Pull based on what the user wants * Push based on what the host 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. # 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: 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'. # 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. =========================================== !!!Concentration =========================================== * 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. Precisly 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. !!!Size The variety of screen sizes continues to grow. Living Room televisions, smartphones, and laptops of various sizes and shapes are makeing the 'average' irrelevant, or at least, self-referential. (Designing to the average is designing to the average that everyone else designs to.) Be ready to deliver your site at the size that your user wants it. # 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. # 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 # 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. !!!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.w3.org/Protocols/NL-PerfNote.html http://www.useit.com/papers/responsetime.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 What are we going to do when there is: # No Mouse # No Keyboard # No Hover # http://ask.slashdot.org/article.pl?sid=07/06/23/0028245 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. !!!!Multimodal learning # Pick your favorite model. Common models have 4 to 5 groups. * Myers-Briggs * Kolb * Kolb - Honey/Mumford Variations * Herrmann * Felder-Silverman # Cover all modes # http://www4.ncsu.edu/unity/lockers/users/f/felder/public/Papers/LS-Prism.htm # http://www.google.com/search?q=modes+of+learning # http://www.metamath.com/lsweb/dvclearn.htm Examples: The K - H/M Varations list the following styles/stages: # Activists/'Having an Experience': 'here and now', gregarious, seek challenge and immediate experience, open-minded, bored with implementation. # Reflectors/'Reviewing the Experience': 'stand back', gather data, ponder and analyse, delay reaching conclusions, listen before speaking, thoughtful. # Theorists/'Concluding from the Experience': think things through in logical steps, assimilate disparate facts into coherent theories, rationally objective, reject subjectivity and flippancy. # Pragmatists/'Planning the next steps': seek and try out new ideas, practical, down-to-earth, enjoy problem solving and decision-making quickly, bored with long discussions. Now if we take a simple Ecommerce site selling iWidgets, we can run through some example of applying site content and features to each of the styles: # Activists: make the widget come to life: Animations, videos, demonstrations, slide shows with narration, plus interactive demos. Will it blend? # Reflectors: Communication through message boards, forums, live chat/IM, blogs and blog comments, wikis. We try to be very responsive to e-mails and general requests. We could do more here. # Theorists: Facts and specificications, preferrably in columnar/tabular formats, ability to compare specs. Prices, lengths of terms, dates, times, etc., collected and laid out together. Planar Comparator. # Pragmatists: Big buy now, or start here buttons. This is a common impulse to need a strong 'call to action' is call to action can provide the next step that the pragmatists are looking for. Wizards/decision trees may also be appropriate for making the decision much more clear. Planar Home Theater: Authentic Expereince in every room: Product selector based on room characteristics. !!!Evolution =========================================== * Be Bug-wards Compatible * Be Future-Proof !!!Architecture 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. !!!Protocols 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. http://meyerweb.com/eric/tools/s5/ http://www.netzgesta.de/S5/ (+ other projects) ## 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? =========================================== !!WRAP: Be the Future =========================================== SciFi UIs: http://w5.cs.uni-sb.de/~butz/teaching/ie-ss03/papers/HCIinSF/ "We are called to be architects of the future, not its victims." - R. Buckminster Fuller