Web, Design, and UX Trends for 2008

Slide 1: Hello, welcome to 2008

Slide 2: I’m Jeremy Johnson Jeremy ninja skills: Design, User Experience, Technology website: jeremyjohnsononline.com likes: Photography, lol cats, macs, gadgets I’m Dustin Dustin Askins ninja skills: Design, Front-End Development, Grids website: dustinaskins.com likes: Photography, running, cycling

Slide 3: We just got back from SXSW. 3/28/08 updated 4/22/08

Slide 4: So, what’s SXSW?

Slide 5: It’s an interactive conference of today’s top web professionals.

Slide 10: It’s A showcase of new technology.

Slide 15: It’s a place to meet like minded people.

Slide 23: And other stuff...

Slide 27: Learn more: http://pulse.sxsw.com/

Slide 30: Mountains of debt River of con s cious n es s Geospatial web Karma capitalism 5 Re-localisation Trend Blend 2008+ Ubiquitous connectivity 2 Spiritualism Russian nationalism Robotics Collectivism Tribalism Nanotech Search for meaning Xenophobia 4 Biotech Food inflation Celebrity worship Immigration Embedded intelligence Economic recession Risk aversion End of low-cost inputs The Environment RFID Litigation Industry convergence Open innovation Climate change Monolines Individualism Transparency Anti-incumbent elections GPS Virtual worlds Prediction markets Anxiety Public-private partnerships Data visualisation Happiness Ocean of liquidity Wireless Polarisation of markets Constant partial attention Ageing S t ream of unco ns cio usn e ss Digital money Device convergence Digitalisation Death of cash ‘Free’ Networked risk Fragmented families Shortage of talent Industrial provenance Private currencies The attention economy Private equity Debt Deregulation P2P lending Globalisation Chinese liquidity Mobile devices Urbanisation Labour migration Social networks Fear Corporate power Power shift eastwards Blended families Place shifting Celebrity politicians Nostalgia Single global currency CHIME liquidity Too much information Extended financial families NGO power Time Shifting Voter antipathy Single person households Downshifting Aggregation Pessimism Boomerang kids Decline of nuclear family Personalisation Middle class unrest Same sex couples (with kids) Declining fertility Online video Rhythm & balance Virtual protest LEGEND Web 2.0 Making things 3 - Global voting Line 1 Society Enterprise 2.0 Physiological neoteny - Line 2 Politics - Line 3 Demographics Simplicity Speeding-up - Artificial body parts VOIP Line 4 Economy 1 - Techophobia Line 5 Technology Humans 2.0 Reality mining Artificial intelligence 3-D printers under construction Female chauvinism 1 major interchange Fantasy & escape Scale: unimaginable This map is published under a Creative Commons Attribution - ShareAlike 2.5 License.

Slide 31: User Experience Design Technology http://www.baekdal.com/articles/management/trends-2008-web-developers/ http://www.lukew.com/ff/entry.asp?629 http://www.readwriteweb.com/archives/10_future_web_trends.php Marketing Business http://ana.blogs.com/maestros/2007/12/trends-to-watch.html http://venturebeat.com/2007/12/20/us-tech-trends-for-2008/

Slide 32: Interactive Advertising digital outlook report 2008 http://blog.guykawasaki.com/2008/02/avenue-a-razorf.html

Slide 33: Customer-Centric Engagement PORTABLE Interoperability Reality Virtual currencies 2008 Immediacy Mobile A/B testing Location-based Open platforms PRIVACY data control INNOVATION Does The Home Page Still Matter? Amazon's Web-developer initiatives Semantic Web six “c’s” A.I. web automation

Slide 34: AJAX, RSS, and Open Source. "Web 2.0", tagging, and co-creation. twitter, video, and social.

Slide 35: the past TRENDS: 2005 was AJAX, RSS, and Open Source. 2006 was "Web 2.0", tagging, and co-creation. 2007 was twitter, video, and social.

Slide 36: 2008

Slide 37: Let’s get 2008 started

Slide 38: Web 2.0 is dead Long live web 2.0

Slide 39: From 2006…Web 2.0.

Slide 40: People became fanatics of the Web 2.0 look… http://www.flickr.com/photos/mac_vegetarian/292941723/

Slide 41: Real logos from Web 2.0… http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/

Slide 42: Got out of hand! What “Web 2.0” meant to some people. Corporate logos redone in a Web 2.0 style… http://enthree.com/files/random/web2logos/

Slide 46: http://www.makemylogobiggercream.com/

Slide 47: The next Web? Web 3 Web 4 “The Semantic Web” “We need ubiquity to build Web4, because it is about "I have a dream for the Web [in which computers] activity, not just data, and most human activity takes place become capable of analyzing all the data on the Web – offline. the content, links, and transactions between people and We need identity to build Web4, because the deliverable is computers. A ‘Semantic Web’, which should make this based on who you are and what you do and what you need. possible, has yet to emerge, but when it does, the day-today mechanisms of trade, bureaucracy and our daily lives And we need connection to build Web4, because you're will be handled by machines talking to machines. The nothing without the rest of us.” ‘intelligent agents’ people have touted for ages will finally http://sethgodin.typepad.com/seths_blog/2007/01/web4.html/ materialize." http://en.wikipedia.org/wiki/Web_3

Slide 48: Whatever it is, it’s the new Web The trends we’re covering today might give us a glimpse. http://www.flickr.com/photos/clearlyambiguous/47022665/

Slide 50: Politics and the web Rock the vote.

Slide 51: Henry Jenkins at SXSW On education. On politics, it’s about “we.” On local. Henry Jenkins is the Director of the MIT Comparative Media Studies Program and the Peter de Florez Professor of Humanities. He is the author and/or editor of nine books on various aspects of media and popular culture, including Textual Poachers: Television Fans and Participatory Culture, Hop on Pop: The Politics and Pleasures of Popular Culture and From Barbie to Mortal Kombat: Gender and Computer Games. His newest books include Convergence Culture: Where Old and New Media Collide and Fans, Bloggers and Gamers: Exploring Participatory Culture. http://www.henryjenkins.org/

Slide 52: Election 2008 The internet sensations. http://www.ronpaul2008.com/ http://www.barackobama.com/index.php

Slide 53: YouTube Debates User submitted questions, and responses! http://www.youtube.com/youchoose

Slide 54: http://blog.wired.com/27bstroke6/2007/12/ron-paul-suppor.html

Slide 55: http://logobama.com/

Slide 56: Return of the command line and Natural Language Let’s party like it’s 1980!

Slide 58: Don Norman, 2007: ...Then graphical user interfaces (GUI) appeared, replacing arbitrary memorized commands with direct manipulation, where actions are performed by moving objects on the screen and selecting from menu displays. GUI has served us well, replacing the need to memorize geeky instructions with the ease of selecting from the visible items on the screen. But GUIs work well only when the number of alternative items or actions is small. When the number of items reaches the level within today’s complex operating systems, applications, and the information spaces of the internet, the GUI does not scale well. Even searching one’s email records is tedious with a GUI, and when it comes to photographs, music, extremely difficult. The internet, of course, cannot be navigated by just the visible structure.... ...Command line interfaces. Once that was all we had. Then they disappeared, replaced by what we thought was a great advance: GUIs. GUIs were – and still are – valuable, but they fail to scale to the demands of today’s systems. So now command line interfaces are back again, hiding under the name of search. Now you see them, now you don’t. Now you see them again. And they will get better and better with time: mark my words, that is my prediction for the future of interfaces. http://www.jnd.org/dn.mss/ui_breakthroughcomma.html Don Norman wears many hats, including co-founder of the Nielsen Norman group, Professor at Northwestern University, and author, his latest book being Emotional Design. He lives at www.jnd.org.

Slide 59: Command Line for the Common Man: The Command Line Comeback, 2007 Command line interfaces are bell-bottom out-of-fashion in the current Web 2.0 boom: I have yet to see an Ajax- enabled glass-reflected command prompt. Let’s face it, command line interfaces are extinct to the masses. The GUI dealt the first blow, and now the Web has nailed to coffin on the old style text interface, and it seems to have been a boon for the user. I don’t know if I can set up a printer on the command line, but I do know that I don’t want to try. But maybe that isn’t the fault of command line interfaces in general. Maybe it’s just the command lines we’re used to. The hard part of learning Unix is memorizing command names as unfathomable as Stonehenge’s origin. And even if I do remember the command name, remembering its options is like bobbing for apples in a cement mixer. I still have to ask my co-workers what flags are needed for untaring a gzipped file. “tar -xfvz”. How could I forget? If commands were memorable and their syntax forgiving, perhaps the command line wouldn’t be going the way of the punch card. And perhaps they aren’t. Perhaps, command lines are staged for a comeback. http://www.humanized.com/weblog/2007/02/24/your_grandmothers_command_line_the_command_line_co/

Slide 60: http://www.humanized.com/ http://www.youtube.com/watch?v=JXfjwZw8cj8 http://www.youtube.com/watch?v=8fRdbC5c37A

Slide 61: The Graphical Keyboard User Interface, 2007 -Just because the command line predated the graphical user interface doesn’t mean interfaces based on windows, icons, menus and pointers are always superior to interfaces based around using the keyboard for input. -Designing interfaces based solely around the mouse and standard GUI widgets, and adding keyboard accelerators as an afterthought, does not always result in creating the most effective and streamlined user interfaces for advanced users. -Interaction designers should consider designing keyboard-based graphical user interfaces, to simultaneously take advantage of both high bandwidth input, and high bandwidth output. http://labs.mozilla.com/2007/07/the-graphical-keyboard-user-interface/

Slide 62: http://blacktree.com/?quicksilver http://www.youtube.com/watch?v=EBvFUhTqKK4

Slide 63: DOS ain’t so bad after all, 2008 Is it possible the web interfaces we construct today are occasionally less efficient than DOS interfaces of yesteryear? Because I often don a suit and tie, I dry clean items nearly every week. When I drop off clothing by drive-through, the clerk zips through customer and product data with incredible speed. Last Friday I found myself purchasing a La-Z-Boy chair to accompany a sofa of the same style. The salesperson sprinted through inventory and delivery data with similar speed. In both scenarios, the interfaces enabling these quick experiences are DOS-driven. No gradients, no Ajax, no mouse. Fitts’ Law isn’t even of concern. Just alphanumeric characters and keyboard strokes. Admittedly, what should be understood is that both of these scenarios are point-of-sale transactions. The primary users are experienced employees who have been trained specifically to use these systems, which may often have steep learning curves. What’s interesting, however, is that in both scenarios, there are secondary participants: me, the customer. For all intents and purposes, that makes me a secondary user; that is, I’m just as dependent upon the speed of the transaction (interface) as the primary user: the salesperson or clerk. There’s a lingering temptation among those of us in the industry to replace all so-called “antiquated” means of doing things with newfangled web interfaces. And rightly so, given the many benefits the web provides. Yet, I cringe when I think about these two satisfactory DOS experiences being replaced with point-and-click web interfaces. Please keep me a DOS secondary user for the foreseeable future, point-of-sale citizens. http://cameronmoll.com/archives/2008/01/dos_aint_so_bad_after_all/

Slide 64: http://www.hackszine.com/blog/archive/2007/04/command_line_interface_for_wor.html http://thrind.xamai.ca/

Slide 65: What about Natural Language?

Slide 66: http://www.wundrbar.com/

Slide 67: http://quick.as/

Slide 69: » Remind me to move the car in 15 minutes » Remind me to pick up the dry cleaning in 3 days » Remind me to finish that TPS report by Monday morning

Slide 70: http://www.powerset.com/

Slide 71: http://www.google.com/search?hl=en&q=deﬁne%3Atravel&btnG=Google+Search

Slide 72: http://search.yahoo.com/search?p=time+in+Krakow&fr=yfp-t-501&toggle=1&cop=mss&ei=UTF-8

Slide 73: http://portal.acm.org/citation.cfm? id=1330535&coll=GUIDE&dl=GUIDE&CFI D=55158225&CFTOKEN=46726435&ret= 1#Fulltext Linguistic Command Line Interfaces

Slide 74: Ultimate Command-line? At Le Web 3, Ev Williams mentioned in his talk that Twitter can be thought of as a command-line. Twitter can be used as a device-independent, global command line that sits on top of a large user-base. This suggests several things for the future of applications that take advantage of Twitter: for example, you could create a service that takes in commands, via Twitter, from various input devices. For a business, there is a cost-saving to be had, as well as a rapid launch and the flexibility of multiple ways of interacting with people. http://twitter.pbwiki.com/Bots http://twitter.pbwiki.com/Mashups http://vpod.tv/leweb3/392057

Slide 75: Once you're setup, run the spellchecker by texting "d <your- lily-account-name> <word-to- check>" to 40404. You should receive an SMS back from Lily with the correct spelling shortly. http://blog.lilyapp.org/2007/04/twitter_spellcheck_bot.html

Slide 78: Yes I Twitter.

Slide 79: Semantic Web Almost famous? http://www.flickr.com/photos/drachmann/327122302/sizes/l/

Slide 80: http://www.ﬂickr.com/photos/inao/1757901166/

Slide 82: The bottom-up approach is focused on annotating information in pages, using RDF, so that it is machine readable. The top-down approach is focused on leveraging information in existing web pages, as-is, to derive meaning automatically.

Slide 83: 1. Bottom-Up and Top-Down 2. Annotation Technologies: RDF, Microformats, and Meta Headers 3. Consumer and Enterprise 4. Semantic APIs 5. Search Technologies 6. Contextual Technologies 7. Semantic Databases http://www.readwriteweb.com/archives/semantic_web_patterns.php http://www.readwriteweb.com/archives/10_semantic_apps_to_watch.php

Slide 84: Adding meaning to the web.

Slide 85: <h1> Title Canon EOS 5D 12.8 MP Digital SLR Camera </h1> <p> <strong>average rating:</strong> <img src=”5stars.jpg” alt=”5 stars”/ > </p> Image <img src=”canon5d.jpg” alt=”camera body” /> <p>The 12.8-megapixel Canon EOS 5D creates a new D-SLR category, combining a full frame CMOS sensor with a lightweight, compact magnesium-alloy body.</p> <ul> List <li>35.8 x 23.9-millimeter CMOS sensor</ li> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</ li> </ul>

Slide 86: <h1> Review Canon EOS 5D 12.8 MP Digital SLR Camera </h1> <p> <strong>average rating:</strong> <img src=”5stars.jpg” alt=”5 stars”/ > </p> <img src=”canon5d.jpg” alt=”camera body” /> <p>The 12.8-megapixel Canon EOS 5D creates a new D-SLR category, combining a full frame CMOS sensor with a lightweight, compact magnesium-alloy body.</p> <ul> <li>35.8 x 23.9-millimeter CMOS sensor</ li> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</ li> </ul>

Slide 87: BETA <div class=”hreview”> hListing <h1 class=”item fn”> Canon EOS 5D 12.8 MP Digital SLR Camera </h1> <img src=”canon5d.jpg” alt=”camera body” /> <p> Proposal for a distributed <strong>average rating:</strong> listing format. <span class=”rating” title=”5”> <img src=”5stars.gif” alt=”5 stars”/ > Suitable for embedding in XHTML, Atom, </span> RSS, and arbitrary XML. </p> <p class=”description”>The 12.8-megapixel Canon EOS 5D microformats.org/wiki/hReview creates a new D-SLR category, combining a full frame CMOS sensor with a lightweight, compact magnesium- alloy body. <ul> <li>35.8 x 23.9-millimeter CMOS sensor</li> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</li> </ul> </p> </div>

Slide 88: BETA <div class=”hreview”> hListing <h1 class=”item fn”> Canon EOS 5D 12.8 MP Digital SLR Camera </h1> <img src=”canon5d.jpg” alt=”camera body” /> <p> Proposal for a distributed <strong>average rating:</strong> listing format. <span class=”rating” title=”5”> <img src=”5stars.gif” alt=”5 stars”/ > Suitable for embedding in XHTML, Atom, </span> RSS, and arbitrary XML. </p> <p class=”description”>The 12.8-megapixel Canon EOS 5D microformats.org/wiki/hReview creates a new D-SLR category, combining a full frame CMOS sensor with a lightweight, compact magnesium- alloy body. <ul> <li>35.8 x 23.9-millimeter CMOS sensor</li> <li>3 frame-per-second burst</li> <li>0.2 second start-up time operation</li> </ul> </p> </div> http://www.slideshare.net/tbisaacs/microformats-an-overview/

Slide 89: Location Ways to connect. Ways to Find. Ways to Explore. http://www.ﬂickr.com/photos/the_maybe/459136519/

Slide 90: Social + Location Makes it easier to connect

Slide 91: http://www.dopplr.com

Slide 92: http://www.tripit.com

Slide 93: notification + Location Makes you easier to find (Friends and applications)

Slide 94: http://www.techcrunch.com/2007/11/04/yahoo-ﬁreeagle-a-platform-service-for-geo-information/

Slide 96: UGC + Location Makes it easier to explore the real world

Slide 99: Triangulation + Location Gives context to your location

Slide 101: Access + Location More options to get local

Slide 102: StrengtheningLocal outside.in http://outside.in/

Slide 103: Strengthening Local Yahoo! Local redesigns and hits the iPhone http://local.yahoo.com/

Slide 104: Connected Desktop Applications via air Desktop or web? How about both!

Slide 105: ? Application.air Java Applet Flash Content Web Content Flex Content WebKit Flash SQLite PDF AIR RUNTIME Browser Player Database Support OS integration via: Windows 2000 File System I/O Native Menu API System Drag & Drop Windows XP Online/Offline Right-click support Full Network Stack Mac OSX Windowing Clipboard Sync Linux BETA 51 Travel Network User Experience http://travisisaacs.com/

Slide 106: Finetune Deskop } Music streaming from Internet source + } Music from my local iTunes library 52 Travel Network User Experience

Slide 107: Pownce

Slide 109: Adobe Kuler

Slide 110: ebay Desktop 56 Travel Network User Experience

Slide 111: OS window Custom window chrome controls with alpha transparency } } 57 Travel Network User Experience

Slide 112: Multiple window support 58 Travel Network User Experience

Slide 113: Live updating 59 Travel Network User Experience

Slide 114: orce SalesBuilder SalesF

Slide 118: So What? ! Easy application delivery to the desktop with a lightweight runtime. ! Hybrid of thin & fat client model ! Online/offline capabilities via network API and local storage ! Integrates into the OS like a “real” application ! Rich windowing capabilities What else? ! Unproven in the enterprise ! Still in BETA 65 Travel Network User Experience

Slide 119: Revealing Interfaces hide complexity

Slide 121: Q. What is a revealing interface? http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html

Slide 122: A. An interface that hides complexity until initiated. http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html

Slide 123: Revealing Interfaces not only hide complexity, but reduce the number of separate pages needed to complete a task.

Slide 131: http://www.nintendo.com/

Slide 132: How do you test it if you can’t see it? “Progressive disclosure is the best tool so far: show people the basics first, and once they understand that, allow them to get to the expert features. But don't show everything all at once or you will only confuse people and they will waste endless time messing with features that they don't need yet” - Jakob Nielsen (2000) http://developers.slashdot.org/article.pl?sid=00/03/03/096223&mode=thread

Slide 133: Progressive disclosure 2.0?

Slide 134: View the full presentation: http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/

Slide 135: coopetition What side are you on?

Slide 136: “cooperation and competition”

Slide 138: Why would a dEsigner be well suited to work in these complex ecosystems?

Slide 139: Design minded folks are really good at: Observation. Framing problems. Prototyping solutions. Working with imperfect data. Focusing on people. Caring about the details. Creating narratives. Envisioning unseen opportunities. Casting visions of the future. Synthesizing information. Systems thinking. Abductive thinking. http://www.slideshare.net/stephenpa/business-needs-design-now

Slide 140: Looking at a recent successes like Apple, who has navigated the murky waters of bringing together consumers with record, TV and music companies and finding that sweet spot in-between is the type of strategy that is becoming more common across our industry. Consumers Record Companies Movie Studios Independent Content

Slide 141: Big D Design What side are you on?

Slide 143: “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs http://www.flickr.com/photos/acaben/541334636/

Slide 144: From 2007…

Slide 145: Designing for the “Oh no!” Preventing problems and affecting perception http://www.flickr.com/photos/paszczak000/553882131/

Slide 146: Designing for the “Oh no!” Preventing problems and affecting perception Aza Raskin http://www.flickr.com/photos/paszczak000/553882131/

Slide 147: Not how to handle errors, but… How do we design things so that “Oh no!” doesn’t happen? - This symbol still means save? Really? - “Want to save? Yes/No” - Accidentally hit “No” - Save should be automatic http://www.apple.com/macosx/features/timemachine.html

Slide 148: Affect perception… “This isn't slow, it’s working.” Mozilla Firefox “spinner” Sped it up in Usability, perception was speed Travelocity interstitial Bar doesn’t complete

Slide 149: “Every page is now a home page” Search is strong, not all visitors are starting at the Home page and following a fixed path. “Every page is now a home page, each of which will have a wider reach, a lasting shelf life, and the ability to attract a new audience like never before.” - Maintain some sort of visual unity across the site - Clear Global Navigation - Content grouped similarly from page to page - Advertising above the fold

Slide 151: http://www.bravotv.com/Project_Runway//index.php

Slide 152: http://wireandtwine.com/store/products/makeitwork.html

Slide 153: Design Students Connecting YouTube videos, communities http://www.youtube.com/results?search_query=what+is+graphic+design&search_type=

Slide 154: Movie about a font?! http://www.helveticafilm.com/

Slide 155: My Dad,

Slideshare.net (beta)