Web, Design, and UX Trends for 2007

Slide 1: Hello. Welcome to 2007.

Slide 2: We’re here to talk about trends.

Slide 3: We’re here to talk about trends 200 slides, 90 minutes, no problem (quickly).

Slide 4: I’m Jeremy jeremyjohnsononline.com

Slide 5: I’m Stephen poetpainter.com

Slide 6: We’re part of the Travel Network User Experience Group. (Jason was (These two were on loan...) getting married...)

Slide 7: In previous years, we discussed... (2005) CSS/Web Standards AJAX Flash Does Design Matter? (2006) Place to hangout online Web 2.0 (and Web 2.0 in the Open Source / Creative Commons Enterprise) Firefox New Social Web Tools RSS Ajax BitTorrent Tagging Blogging Social Sharing / Co-Creating Value DIY Agile Design and Development Ways to keep up UI Trends Ubiquitous Computing/Everyware Designing for Experiences Sharing/Collaborative Philosophy Podcasting/Videoblogging

Slide 8: 2006 -> 2007 Agile -> Agile+UX Enterprise 2.0 -> new Enterprise apps, Google Office Ajax -> Maturing. Security. Frameworks. Cross-Channel IA -> yup! Explosion of startups -> exponential explosion of startups

Slide 9: Let’s start with something fun.

Slide 10: Twitter your time away (literally). twitter

Slide 11: The biggest thing since blogs?

Slide 12: twitter is: IM SMS/Texting Blogging Notification Location Aware What you had for lunch

Slide 15: You subscribed to me. I’m broadcasting to... I’m listening to... me You approved me to listen to you.

Slide 16: » twitter can deliver updates via: web, SMS, or IM. » You can post a twitter badge on your Blog. » You can view the top 100 twits: http://twitterholic.com/ » You can view where people are twittering: http://twittermap.com/maps » You can download a mac client: http://iconfactory.com/software/twitterrific » You can download a PC client: http://rareedge.com/twitteroo/

Slide 17: Travel Is the gnome twittering? Idea

Slide 18: Internet video killed the TV star. Online video

Slide 19: It’s BIG.

Slide 20: It’s MOBILE.

Slide 21: It’s SOCIAL.

Slide 22: But, please no flash video ads...

Slide 23: More than eye hand coordination. Learning from games

Slide 25: http://2007.sxsw.com/blogs/video.php/2007/03/16/keynote_will_wright http://www.lukew.com/ff/entry.asp?324

Slide 26: WoW is millions of people with diverse backgrounds collaborating, socializing, and learning while having fun. It represents the future of real-time collaborative teams in an always-on, diversity-intensive, real-time environment. WoW is a glimpse into our future. - Joi Ito in Wired Magazine

Slide 27: and how about games moving to the real world?

Slide 28: “Starwood Hotels & Resorts is launching its new Aloft Hotel in the virtual land of Second Life in September, months before the chain of hotels opens in real life.”

Slide 31: Let’s talk tech.

Slide 32: Taking it off-line off-line web applications

Slide 33: Firefox 3 will deliver support for offline applications. This is significant because you'll be able to use your web apps - like Gmail, Google Docs & Spreadsheets, Google Calendar, etc - in the browser even when offline. “...involves marking necessary resources with <link rel="offline-resource">” “In my new job at Mozilla I've been working on adding offline support to Zimbra as a proof of concept of the new Firefox offline capabilities. Zimbra is heavily ajax based and gives a good idea of how difficult or easy it is to convert an existing application to use the offline support...” http://www.bluishcoder.co.nz/2007/02/offline-zimbra-with-firefox.html

Slide 34: New Platforms Can be both - online and off “Occasionally Connected” http://renaun.com/blog/2006/06/13/39/

Slide 35: Windows Presentation Foundation http://www.thirteen23.com/labs.html

Slide 36: Travel How about preparing for my trip, Idea while on the plane?

Slide 37: No need to reinvent the wheel. JavaScript Libraries

Slide 38: JavaScript Libraries Love them or loathe them, JavaScript libraries are making a huge impact in the area of DOM Scripting. As AJAX matures, and the complexity of the scripts required to support its expanding use increases, it becomes much less feasible to produce custom code from scratch for every project. http://www.sitepoint.com/article/javascript-library http://del.icio.us/stephenpa/library

Slide 39: JavaScript Libraries Yahoo UI Library Script.aculo.us / Prototype dojo jQuery Moo.fx / Mootools Rico (started at Sabre!) Google Web Toolkit Microsoft Atlas MochiKit (python) flapjax ... http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/

Slide 40: JavaScript Libraries “Why should I need to know about a developer library?”

Slide 41: JavaScript Libraries http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui

Slide 42: Which should I use? http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/ http://www.jackslocum.com/blog/2006/10/09/my-wordpress-comments-system-built-with-yahoo-ui-and-yahooext/

Slide 43: One ID to rule them all. Open-ID

Slide 44: Open ID “Wouldn’t it be great if you could use the same account to log in to multiple sites and applications, without having to trust them all with your password? Wouldn’t it be even better if you could do this without having to hand ownership of your online identity over to some monolithic third party? (I’m looking at you, .NET Passport Microsoft Passport Windows Live ID.)” http://simonwillison.net/2006/Dec/19/openid/

Slide 45: Open ID http://www.iconbuffet.com/people;login

Slide 46: Open ID

Slide 47: Open ID

Slide 48: Open ID VOX is an OpenID provider.

Slide 49: Open ID Easy as: 1) Sign up with an OpenID provider 2) Point your own site at your new OpenID - via some HTML (or use the provider URL) 3) Log in to something! Single Sign-on for the web! Learn More: http://simonwillison.net/2006/Dec/19/openid/ http://openid.net/ http://www.openidenabled.com/ http://iwantmyopenid.org/

Slide 50: In future versions Open ID may expand into profiles, why not start Travel a open standard to hold travel Idea data? (Home Airport, favorite locations, activities, ???)

Slide 51: I ______ IE5.5 Browser Watch

Slide 52: Browser Watch Current Stats: Below are the current browser stats, up-to-date for 2/2007. Stats from “The Counter” - Stats from WC3 School - These 350,000 These stats represent a stats represent a more tech general web population. savvy audience. 262,500 45.00 33.75 175,000 22.50 87,500 11.25 IE6 IE7 0 IE6 0 IE5 Firefox IE7 IE5 Safari Firefox Safari Trend Watch! As you can see above IE7 is quickly gaining market-share due to the launch of Vista and the automatic update to IE7 for Windows XP. You can also see more and more tech savvy web users are switching to Firefox.

Slide 54: Opera Firefox Safari Visually Supported Not Supported Functionally Supported IE7 Netscape IE5.5 IE6 http://www.jeremyjohnsononline.com/2007/02/23/its-2007-what-is-your-browser-baseline/

Slide 55: Who was the lone android on the Enterprise? Open Data, Useful Data, Meaningful Data

Slide 56: Open Data. MicroContent & “Core + Paths”

Slide 57: “Today real information architects’ mighty deeds are moving from macro-organization of one web site for one organization, to the micro-organization of information creating a web of data.” XML http://www.iasummit.org/proceedings/2007/real_information_architecture

Slide 58: A web of data sources, services for exploring and manipulating data and ways that users can connect them together Tom Coates

Slide 59: http://www.slideshare.net/aregh/corepaths-a-design-framework-for-ﬁndability-prioritization-and-value/

Slide 63: Structural design of shared information environments becomes... Shared design of semi-structured information environments http://www.slideshare.net/gsmith/social-information-architecture-workshop

Slide 64: Useful Data. Web Analytics. Behavioral Targeting. Data Seepage. Data Mining. Tagging. Algorithms. Embedded Intelligence. Social Behaviors. Clustering. Ranking. Collaborative Filtering. Interestingness.

Slide 65: Digg. (Changing their algorithms around diggs, traffic, reports on user, history of activity, etc)

Slide 66: Meaningful Data. The Semantic Web, MicroFormats, Pattern Languages, etc.

Slide 67: K! AC HB AS FL <span class=“header”>Trip Itinerary!</span> VS. <h1>Trip Itinerary!</h1> (this is the Semantic Web)

Slide 68: A re cool! Microformats are a way of adding simple markup to human-readable data items such as events, contact details or locations, on web pages, so that the information in them can be extracted by software and indexed, searched for, saved, cross-referenced or combined. More technically, they are items of semantic markup, using just standard (X)HTML with a set of common class-names. They are open and available, freely, for anyone to use.

Slide 69: Elemental Microformats Design Patterns hCalendar hResume hReview hAtom Datetime Pattern hCard XFN VoteLinks microformats.org rel="contact" rel="parent" rev="vote-for" <abbr class="foo" • adr rel="acquaintance" rel="spouse" rev="vote-against" + country-name rel="friend" rel="kin" rev="vote-abstain" title="YYYY-MM-DDTHH:MM:SS+ZZ:ZZ" • extended-address rel="met" rel="muse" >Human Date Time</abbr> + post-office-box rel="co-worker" rel="crush" Rel-Nofollow + postal-code rel="colleague" rel="date" rel="nofollow" Include Pattern • street-address <object + locality rel="co-resident" rel="sweetheart" Rel-Tag class="include" + region rel="neighbor" rel="me" rel="tag" • type rel="child" type="text/html" • affiliation Rel-Directory (Draft) data="#idref" ¤ author rel="directory" /> + best ! + bookmark (rel) Rel-License <a class="include" + bday • • category rel="license" href="#idref">...</a> + + class ! contact Compound Microformats + + description dtend + dtreviewed hCard hCalendar hResume (Draft) ! dtstart class="vcard" class="vevent" class="hresume" ! dtstamp class="adr" class="category" rel="tag" class="affiliation" (hcard) duration class="type" class="class" class="education" (hcalendar) • education • email [work|home|pref|postal|dom|intl] class="description" class="experience" (hcalendar) • type class="post-office-box" class="dtend" (ISO Date) class="publication" (citation) • value class="street-address" class="dtstamp" (ISO Date) class="skill" rel="tag" ! entry-content class="extended-address" class="dtstart" (ISO Date) class="summary" • entry-summary class="region" class="duration" ! entry-title class="contact" (hCard) • experience class="locality" class="location" ! ! fn class="postal-code" class="status" + geo class="country-name" class="summary" Address (Draft) + latitude class="agent" class="uid" class="adr" + longitude class="type" ¤ hentry class="bday" (ISO Date) class="url" • hfeed class="class" class="last-modified" [work|home|pref|postal|dom|intl] ! hresume class="category" rel="tag" class="post-office-box" ! hreview class="email" hAtom (0.1) class="street-address" ! item class="hfeed" class="extended-address" + key class="type" • label class="value" rel="tag" class="region" + last-modified class="fn" class="hentry" class="locality" + license (rel) class="geo" class="author" (hCard) class="postal-code" + location class="latitude" rel="bookmark" class="country-name" • logo + mailer class="longitude" class="entry-title" + n class="key" class="entry-content" • additional-name class="label" class="entry-summary" Geolocation (Draft) • family-name class="logo" class="published" (ISO Date) class="geo" • given-name class="mailer" class="updated" (ISO Date) class="latitude" • honorific-prefix class="longitude" • honorific-suffix class="n" rel="tag" • nickname class="honorific-prefix" • note class="given-name" hReview (0.3) + org + organization-name class="additional-name" class="hreview" • organization-unit class="family-name" class="dtreviewed" (ISO Date) + permalink class="honorific-suffix" class="description" • + photo class="nickname" class="item" • publication class="note" ! published class="fn" publisher class="org" class="url" + rating class="organization-name" class="photo" + rev class="organization-unit" rel="license" + reviewer class="photo" + role class="permalink" rel="bookmark" • skill class="rev" class="type" + sort-string

Slide 70: <div id="hcard-Stephen-Paul-Anderson" class="vcard"> <span class="fn n"> <span class="given-name">Stephen</span> <span class="additional-name">Paul</span> <span class="family-name">Anderson</span> </span> <div class="org">Sabre</div> <a class="email" href="mailto:stephen@poetpainter.com">stephen [at] poetpainter [dot] com</a> <div class="adr"> <div class="street-address">4636 Ringgold Ln</div> <span class="locality">Plano</span> , <span class="region">TX</span> , <span class="postal-code">75093</span> <span class="country-name">USA</span> </div> <div class="tel">214.632.2852</div> <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/ hcard">hCard</a> created with the <a href="http://microformats.org/code/ hcard/creator">hCard creator</a>.</p> </div> http://adactio.com/contact/ http://microformats.org/code/hcard/creator

Slide 71: How do I use this thing? New UIs (off the web)

Slide 72: New UIs (off the web) interface-free » Multi-Touch » Very cool :-) http://cs.nyu.edu/~jhan/ftirtouch/ http://www.youtube.com/watch?v=zwGAKUForhM

Slide 73: New UIs (off the web) iPhone » June this year » 1 button » Touch Screen » Software UI http://www.apple.com/iphone/phone/

Slide 74: New UIs (off the web) Wii » 6+ million units » Motion control » 10ft design UI http://wii.nintendo.com/

Slide 75: New UIs (off the web) Looking Glass » Built in Java » Open Source » “3D” desktop http://www.sun.com/software/looking_glass/

Slide 76: Going Mobile. Mobile design/development

Slide 77: Mobile design/development State of mobile data usage (in the US) via: Forrester* *(Forrester is a great place to go for trends and insights!) http://www.forrester.com/

Slide 78: Mobile design/development

Slide 82: Mobile design/development Mobile Day - Forrester Research to Present on Current and Projected State of Mobile Space Wednesday, April 4, 2007 10:00 AM - 11:30 AM Building B - Room 157

Slide 83: Mobile design/development What does this mean? (in 2007) » It’s time to create a strategy » get moving in the right direction » don’t push too hard with monetization

Slide 84: Mobile design/development Is designing for the mobile web the same as the “real” web? No, it’s very different. You need to: » Remember the entire mobile ecosystem » Support: Environment, Activities, and the Device (Display, Input, and Platform) » Be aware of the number of “clicks” » Simplify, beware of task complexity

Slide 85: Mobile design/development Is developing for the mobile web the same as the “real” web? Yes, it’s very similar. You need to: » Get up to speed on WAP 2.0 and XHTML-MP » Bandwidth is a factor again » Test on a variety of mobile devices (and you thought just browser testing was hard!) MicroSoft just released a new mobile browser “Deepfish” http://on10.net/Blogs/larry/exclusive-video-new-mobile-web-browser--deepﬁsh/ * and don’t forget minimo http://www.mozilla.org/projects/minimo/

Slide 86: via: Brian Fling Simple Complex Slower SSR Reformat Stylesheets Va lu e Mobile Specific Site Faster Context vs. Content Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 88: Mobile design/development Want to know more? http://www.blueﬂavor.com/blog/mobile/sxsw_2007_mobile_web_presentation.php http://www.blueﬂavor.com/blog/mobile/dotmobi_mobile_web_developers_guide.php http://www.developershome.com/wap/xhtmlmp/xhtml_mp_tutorial.asp?page=introduction http://www.slideshare.net/xian/mobile-information-architecture/ 100s of links await you: http://del.icio.us/jeremyjohnson/mobile

Slide 89: Marco! Location Aware

Slide 90: Location Aware Location-aware technologies & Location-aware applications were both on Gartner’s 2006 Emerging Technologies list. Location-aware applications will hit mainsteam adoption in the next two to five years. An increasing number of organizations have deployed location-aware mobile business applications, mostly based on GPS- enabled devices, to support queue business processes and activities, such as field force management, fleet management, logistics and good transportation. http://www.gartner.com/it/page.jsp?id=495475

Slide 91: Location Aware ...Sony Ericsson’s latest idea is to sell phones which automatically change the way they behave, depending on the time, date and place. Rumors of Apple releasing a laptop with built-in GPS. Mobile hardware manufactures are opening up location APIs, making it easier to develop for LBS

Slide 92: Location Aware

Slide 93: Location Aware It’s about... Connecting to the real world.

Slide 94: Command Line UI “Seriously?” 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 95: http://lifehacker.com/software/top/geek-to-live--ﬁnd-free-music-on-the-web-136578.php Even though these three services are called “search engines,” in fact they are becoming “answer services” controlled through their command line interfaces. These modern command languages have some major virtues over the ones in the past. They are tolerant of variations, robust, and they exhibit slight touches of natural language flexibility. As a result, the requirement of strict adherence to syntax and form that characterized the earlier control-line languages is not required. http://www.jnd.org/dn.mss/ui_breakthroughcomma.html

Slide 96: http://www.humanized.com/products/enso/launcher/

Slide 97: http://yubnub.org/

Slide 98: Travel Idea What if this could accept native Sabre or natural language?

Slide 99: Do you speak binary? Natural Language Processing

Slide 100: For real this time?

Slide 101: Essentially, it’s a wiki that analyzes what you are writing in real time and offers up related search results from other pages in that wiki, the web in general, your uploaded OPML file of RSS feeds, your emails and any files the system is given access to. http://www.systemone.at/en/platform/overview#

Slide 102: Newly-launched webapp Stikkit organizes your bookmarks, calendar events, todo's, contacts and jottings in a personal library of digital sticky notes. The best part about Stikkit is its smarts: create a new "stikkit" that reads, "Lunch with John Smith on December 1, 2006 at 12PM" and Stikkit automatically recognizes the person and event, adding John Smith to your contacts list and the event to your calendar.

Slide 103: The difference between Powerset and the traditional search engines is that while typical search engines like Google and Yahoo don't take into account stopwords (by, after, the, etc), stopwords are a very important part of the engine for Powerset. Why? Because Powerset relies on a semantic capability that can be triggered by using these stopwords. So while the "book by children" and "book for children" queries return exactly the same results in Google, Powerset evaluates them separately and somehow cares about your stopwords as well. Matt Marshall at VentureBeat has revealed that Powerset, the natural language search startup, is licensing technology that Xerox PARC (now just PARC) has been developing for over 30 years... http://www.linguify.com/

Slide 104: http://knowitall-1.cs.washington.edu/Opine/Search.aspx

Slide 105: Do the right thing.

Slide 106: Everyone is invited. Accessibility

Slide 107: Accessibility Who doesn't want their site to be accessible by everyone?

Slide 108: Accessibility But unfortunately many sites...

Slide 109: Accessibility ...give the wrong impression. http://en.wikipedia.org/wiki/No_Meals_on_Wheels

Slide 110: Accessibility Check out: Target, accessibility and opinions http://www.boagworld.com/archives/2006/02/target_accessibility_and_opinions.html

Slide 111: Accessibility “Ensuring your website meets basic accessibility requirements is a quick, simple job that will be a heck of a lot cheaper than any bad publicity or litigation you could potentially face” It’s also the right thing to do...

Slide 112: Accessibility Who does an accessible site help? » Blind Users » Partial or Low Vision » Color Blindness » Keyboard or Alternate Device Navigation » Deaf Users » Users with Learning Disabilities It can even help with: » Browser Choices » Connection Speeds » JavaScript » PDAs and Mobile Devices Learn More: http://www.joedolson.com/what-is-web-accessibility.php

Slide 113: Accessibility May 7, 2007 An energetic, practical, full-day workshop by top web accessibility expert Derek Featherstone. http://furtherahead.com/workshops/texas/ “Your reputation—and the reputation of your agency or company—depends on bulletproof, functionally elegant web apps that will work now and in the future. Using your application shouldn’t frustrate users; their experience, regardless of who they are, should be effortless.”

Slide 114: Accessibility Dig deeper. http://boxofchocolates.ca/ http://www.alistapart.com/articles/wiwa/ http://www.knowbility.org/main/ http://joeclark.org/ http://www.webaim.org/

Slide 115: Al Gore invented Hybrid Cars. Going Green

Slide 118: Time to kick it up a notch! (still awake?)

Slide 119: Do I have your attention? Attention Trust, Attention Engine, APML, Attention Points

Slide 120: attention? Some Real world examples: 1) Amazon uses a “Attention Profile” to recommend books to you. 2) With 1,000s of RSS feeds coming to you, which are most important to YOU? Which deserve your attention? It’s about control, and filtering out the noise.

Slide 121: Attention Trust Our Attention data has real value and needs to be protected. AttentionTrust is a not-for-proﬁt organization that puts the user in control of their Attention data. Until now, only companies on the other side of our clicking captured the value. Mission: Empower people to exert greater control over their "attention data," i.e. any records reﬂecting what they have paid attention to and what they have ignored. We accomplish this by promoting the principles of user control, by distributing our Attention Recorder, and by supporting the development of other appropriate tools, standards and practices. http://www.attentiontrust.org/

Slide 122: Attention Engine News is not email. Unlike email, every article is not necessarily something you should read [...] Let the news flow by you and relax [...] - Dave Winer “just focus on the stuff you care about.” An Attention Engine (as far as we were concerned as it related to Touchstone) was something that consumed data from any source (be it straight RSS from a blog, the result of a Meme Engine or even a Meme Engine skewed with your personal attention data) and found interesting ways to manage your interruptions for you while you were being productive. http://www.touchstonelive.com/

Slide 123: APML: attention profiling mark-up language » Keep control of your own Attention Profile - it's very valuable (read attentiontrust.org) » Ask Amazon to export an APML file of your Attention Profile (the same one they use to recommend books to you) so you can move to another bookstore (just like OPML lets you easily switch feed readers). » Upload your APML file to Digg to get a customized view of Digg stories that match your interests. » Use your APML to filter incoming alerts (using something like Touchstone) » Submit your APML to an Attention Brokerage service to allow synchronized access to your Attention Profile across all APML compatible services. In this way all your sites and services can keep track of your changing interests. http://www.apml.org/

Slide 124: Attention Points (This is a little off topic.... but a good idea) When designing a page, how do you decide what says and what goes? Check out: Signal-to-Noise ratio and the elimination of the nonessential http://www.presentationzen.com/presentationzen/2007/03/signaltonoise_r.html

Slide 125: Attention Points (This is a little off topic.... but a good idea) Attention Mapping: The 10-Point Exercise This exercise is simple in principle, but difficult in practice. It will make you think. It will make you doubt. And (most importantly), it will make you sacrifice. 1. Identify what is being designed 2. List components of the overall message 3. Cut the fat 4. Distribute 10 “attention points” among the message components 5. Clean up the list 6. Obey the list Example: (for a product site) » Product catalog (2 points) » Testimonials (1 point) » New seasonal lines (3 points) » Return policy (0 points) » Blog (2 points) » Contests (1 points) » Coupons (0 points) http://www.fortymedia.com/blog/post/59

Slide 126: Travel Recommend something I want. Idea My attention is valuable. Travel sites are already doing this in a small way.

Slide 127: Travel Recommend something I want. Idea My attention is valuable. Or... How about... $ You may be interested in “The Da Vinci Export/Share APML from Amazon Code Guided Walk” in Paris. Into Travelocity

Slide 128: Defining Deliverables “I’ll show you mine if you’ll show me yours..”

Slide 131: But deliverables aren’t what it’s about... Deliverables that define solutions VS Deliverables that define problems, together http://www.slideshare.net/jessmcmullin/project-touchstones

Slide 132: Also... What sells an idea?

Slide 133: Pleasurable Design Useful, Usable, AND Desirable http://www.poetpainter.com/thoughts/article/presentation-notes-slides-for-creating-pleasurable-interfaces

Slide 134: “It is not enough that we build products that function, that are understandable and usable - we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty, to people’s lives.” -Donald Norman

Slide 135: Hedonic Design Joy of Use Fun Emotional Interface Affective Computing Persuasive Pleasure Design Narrative User Interfaces Social Computing Funology Emotional Design Seduction Beauty, goodness, and usability Desirability Scent

Slide 136: Changing times: usability as a dissatisfier ...because customers have come to expect products to be easy to use, usability has moved from being what marketing professionals call a ‘satisfier’ to being a ‘dissatisfier’. In other words, people are no longer pleasantly surprised when a product is usable, but are unpleasantly surprised by difficulty in use. ... By looking at the relationship between people and products in a more holistic manner, the disciplines can contribute far more. Such holistic approaches are know as ‘pleasure-based’ approaches and are increasingly being adopted by industry-based human factors professionals – many examples will be given throughout this book...

Slide 137: "At this point in experience design’s evolution, satisfaction ought to be the norm, and delight ought to be the goal. So how do we do this as experience design professionals? If the word “experience” is in your title or department, it implies you’re considering these issues." Parish Hanna (2002)

Slide 138: Good interaction design focuses on what people want to... ✓ Know (content, good IA) ✓ Do (tasks, UI Design) ? Feel... “feel?#!!??”

Slide 140: Why are Goggle earth, Google maps (maps.google.com), the Beta version of Yahoo! maps (maps.yahoo.com/beta) and Microsoft’s Windows Live (local.live.com) so compelling, addictive, delightful? They provide the same information as the older, static maps from Yahoo!, MapQuest, MSN, and others, and the very same driving directions. They aren’t any more usable or easy to understand than the older, more static sites – some people have even found them more difficult, especially in their beta deployments. But they are more fun and engaging... The immediacy of response is both fun and useful. The fluidity of the graphics is engaging. These are visceral experiences: viscerally exciting websites. The traditional map sites, with sensible, reasonable interaction and instructions are behaviorally appropriate, but they lack excitement. I believe that a good deal of the visceral excitement comes from the graceful movements. Donald Norman: "Emotionally-Centered Design" http://www.jnd.org/dn.mss/emotionallycentered.html

Slide 141: http://www.davidarmano.com/

Slide 142: http://headrush.typepad.com/

Slide 143: http://www.poetpainter.com/thoughts/article/ia-summit-2007-tasks-to-experiences-poster

Slide 144: “I am finally seeing that concept [whole product design] come to fruition as we move from a focus on product usability, where ease of learning, ease of use, and satisfaction with the interface and documentation are paramount, to broader issues that include branding, aesthetics, fun, and pleasure. This evolution follows a hierarchy of user needs...” (2005) Chauncey E. Wilson "Usability and User Experience Design: The Next Decade"

Slide 145: SUBJECTIVE / QUALITATIVE Focused on “It Experiences pro Have a believable story (People, Activities, Context) und Co-create value with customers we Connect people in community Prioritize Aesthetics (no, not Graphic Design) tha Are part of a bigger system (visual, behaviors, sounds, psychology) ple Appeal to emotional, spiritual, and Design for FLOW (boredom vs anxiety) bea social values Leverage Game Mechanics/Learning Theory Create a tolerance for faults at (completeness) lower levels Have a Personality Are tied to a person’s self-image, highly personal Meaningful Create conversational and context aware Has personal significance interactions (“Adaptive Interfaces”; narrative IA structures) Pleasurable Elicit Desire Memorable experience worth sharing (Limited availability, limited access, curious and Simplify, organize, and clarify seductive experiences) information Convenient THIS IS THE “CHASM” THAT IS REALL HARD FOR ORGANIZATIONS TO Display information visually Super easy to use, works like I think Reduce features and complexity Are easier to understand Usable Use language for more natural Can be used without difficulty Creating Pleasurab interactions Add features that support desired Reliable Is available and accurate Getting fom Tasks to behaviors (offline browsing) presented by Stephen P. Ander Functional (Useful) Works as programmed Focused on Tasks (Products, Features) OBJECTIVE / QUANTIFIABLE http://www.poetpainter.com/thoughts/article/presentation-notes-slides-for-creating-pleasurable-interfaces

Slide 147: http://www.ﬂuxiom.com/

Slide 150: But ‘the important stuff’ changes over time... What about different ‘time-based’ layouts?

Slide 151: But ‘the important stuff’ changes over time... Confirmation What about different ‘time-based’ layouts?

Slide 152: But ‘the important stuff’ changes over time... Navigation What about different ‘time-based’ layouts?

Slide 153: But ‘the important stuff’ changes over time... Check-In What about different ‘time-based’ layouts?

Slide 155: (Does this sound a little bit like game design?)

Slide 156: http://www.linkedin.com/ (Does this sound a little bit like game design?)

Slide 157: What if... we noticed that a user was ‘missing’ the button. We could increase the button size! (Credit to Derek Featherstone for this one!)

Slide 158: Experiences!

Slide 159: The introduction of the iPhone sets the bar high... these companies must innovate — particularly on the user experience — to compete with Apple. —Forrester

Slide 160: Better Experiences... ✴Create an opportunity for higher margins ✴Keep us competitive: “Experience Based Differentiation” ✴Result in cost savings from increased productivity ✴Encourage customer satisfaction and retention ✴Make selling easier (customer acquisition)

Slide 161: The Real World. Research Getting Real

Slide 162: Research Getting Real How do you research your users? (and remember users = people)

Slide 163: Research Getting Real vs.

Slide 164: Research Getting Real (vs. )

Slide 165: Research Getting Real It’s sometimes called... Design Research Exploratory User Research pseudo-ethnography behavioral research user anthropologist User Field Research ethnographic research anthrodesign experience modeling human behavior human research for commerce

Slide 166: Research Getting Real Quick introduction...

Slide 167: Research Getting Real

Slide 168: Research Getting Real Jan has a “bucket” of tools: » Street interviews & observations » Diary (everything-i-touch) » Shadowing » Home visits » Contextual interviews » Mystery shopper » Use & abuse » Work environments “The way we work is called user centered design ...technologies can change quickly, human motivations for doing things change slowly”

Slide 169: Research Getting Real Dig deeper. http://www.janchipchase.com/ http://www.janchipchase.com/publications http://research.nokia.com/people/jan_chipchase/ http://www.businessweek.com/innovate/content/mar2007/id20070314_689707.htm http://www.slideshare.net/mobileuserexperience/exploratory-user-research/ http://www.experientia.com/blog/the-jan-chipchase-controversy-corporate-ethnography-is-primitive/

Slide 170: I’m listening. The Community Manager

Slide 171: The Community Manager Jeremiah Owyang has a recent article that sums up the “Community Manager” role: 1) Community First Puts the community or the customers as a priority over the company. This person is an advocate for the customers, and will often go ‘join’ the community, rather than try to build it. (I learned this from Tara) 2) An Educator, two-ways Teaches the community about the company and it’s products, often in a non-invasive manner. 3) Uses the tools and communication style of the community In 2007, this is primarily blogs, online pictures. I see this moving to Video, Twitter, and a vast array of emerging tools. 4) Puts a Human Face on the company This person actually shows their real face, both online and at events. Forget those stock images of the pretty Asian woman at the computer, and use a real person, who can relate to the community. 5) Not just a Marketing Role This is not just a PR or marketing role, this role actually extends to: Customer Support Product Marketing and Engineering 6) Knows when to get out of the way Sometimes this role is to connect the right people in the company (who know more about the product details) with the right customers. Also this role will connect prospects with customers, in a new form of “customer references”. 7) Pushes the “Membrane” Scoble told me about this in 2005, he pushed the corporate membrane at Microsoft, which is a pliable movable invisible wall. Once he felt he pushed it, and was just about to poke through, he would back off. If Corporate Comms and Management gets uncomfortable with the community manager, then you’re doing the job right. http://www.web-strategist.com/blog/2007/03/26/understanding-the-technology-evangelist-role-a-few-of-my-favorite-folks/

Slide 174: The Community Manager The community can also be your customers service.

Slide 175: The Community Manager » 30boxes - 3 employees, 30,000 users, forum only help - they spend about 4-6hrs a week on customer service » 60% of questions are answered by users

Slide 176: The Community Manager Find ways to get closer to the customer.

Slide 177: Lightning Round! (which means very little supporting information, but we thought we should at least mention it here...)

Slide 178: The new social. The social web

Slide 179: The social web was... You me Someone Else Someone Else

Slide 180: The social web is... You Someone Else

Slideshare.net (beta)