Embed Size (px)
DESCRIPTION
A presentation I gave with Stephen Anderson about trends for 2007. http://www.jeremyjohnsononline.com
Citation preview
Hello.Welcome to 2007.
We’re here to talk about trends.
We’re here to talk about trends (quickly).
200 slides, 90 minutes, no problem
I’m Jeremy
jeremyjohnsononline.com
I’m Stephen
poetpainter.com
We’re part of the Travel Network User Experience Group.
(These two were on loan...) (Jason was getting married...)
(2005)CSS/Web Standards
AJAXFlash
Does Design Matter?Place to hangout online
Open Source / Creative CommonsFirefox
RSSBitTorrentBlogging
DIYWays to keep up
(2006)Web 2.0 (and Web 2.0 in the
Enterprise)New Social Web Tools
AjaxTagging
Social Sharing / Co-Creating ValueAgile Design and Development
UI TrendsUbiquitous Computing/Everyware
Designing for ExperiencesSharing/Collaborative Philosophy
Podcasting/Videoblogging
In previous years, we discussed...
2006 -> 2007Agile -> Agile+UXEnterprise 2.0 -> new Enterprise apps, Google OfficeAjax -> Maturing. Security. Frameworks.Cross-Channel IA -> yup!Explosion of startups -> exponential explosion of startups
Let’s start with something fun.
Twitter your time away (literally).twitter
The biggest thing since blogs?
twitter is:IMSMS/TextingBloggingNotificationLocation AwareWhat you had for lunch
me
You
I’m listening to...I’m broadcasting to...
You
subscribed to me.
approved me to listen to you.
» 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/
Travel
IdeaIs the gnome twittering?
Internet video killed the TV star.Online video
It’s BIG.
It’s MOBILE.
It’s SOCIAL.
But, please no flash video ads...
More than eye hand coordination.Learning from games
http://2007.sxsw.com/blogs/video.php/2007/03/16/keynote_will_wrighthttp://www.lukew.com/ff/entry.asp?324
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
and how about games moving to the real world?
“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.”
Let’s talk tech.
Taking it off-lineoff-line web applications
“...involves marking necessary resources with <link rel="offline-resource">”
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.
“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
New Platforms Can be both - online and off
“Occasionally Connected”
http://renaun.com/blog/2006/06/13/39/
Windows Presentation Foundation
http://www.thirteen23.com/labs.html
Travel
IdeaHow about preparing for my trip, while on the plane?
No need to reinvent the wheel.JavaScript Libraries
http://del.icio.us/stephenpa/library
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
JavaScript Libraries
Yahoo UI LibraryScript.aculo.us / Prototype
dojojQuery
Moo.fx / MootoolsRico (started at Sabre!)
Google Web ToolkitMicrosoft Atlas
MochiKit (python)flapjax
...
http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/
JavaScript Libraries
“Why should Ineed to know about a developer library?”
JavaScript Libraries
http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui
JavaScript Libraries
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/
Which should I use?
One ID to rule them all.Open-ID
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/
http://www.iconbuffet.com/people;login
Open ID
Open ID
Open ID
VOX is an OpenID provider.
Open ID
Learn More:http://simonwillison.net/2006/Dec/19/openid/
http://openid.net/
http://www.openidenabled.com/
http://iwantmyopenid.org/
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!
Open ID
Travel
Idea
In future versions Open ID may expand into profiles, why not start a open standard to hold travel data? (Home Airport, favorite locations, activities, ???)
I ______ IE5.5Browser Watch
Browser Watch
Current Stats:
0
87,500
175,000
262,500
350,000
IE6 IE7 IE5 Firefox Safari
Stats from “The Counter” - These stats represent a general web population.
011.2522.50
33.75
45.00
IE6 IE7 IE5 Firefox Safari
Stats from WC3 School - These stats represent a more tech savvy audience.
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.
Below are the current browser stats, up-to-date for 2/2007.
Visually Supported
Functionally Supported
Not Supported
IE7 IE5.5
Firefox Safari
IE6
Opera
Netscape
http://www.jeremyjohnsononline.com/2007/02/23/its-2007-what-is-your-browser-baseline/
Who was the lone android on the Enterprise?Open Data, Useful Data, Meaningful Data
Open Data. MicroContent & “Core + Paths”
XML
“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.”
http://www.iasummit.org/proceedings/2007/real_information_architecture
A web of data sources, services for exploring and manipulating data and
ways that users can connect them together
Tom Coates
http://www.slideshare.net/aregh/corepaths-a-design-framework-for-findability-prioritization-and-value/
Structural design of shared information environments
becomes...
Shared design of semi-structured information environments
http://www.slideshare.net/gsmith/social-information-architecture-workshop
Useful Data. Web Analytics. Behavioral Targeting. Data Seepage. Data Mining. Tagging. Algorithms. Embedded Intelligence. Social Behaviors. Clustering. Ranking.Collaborative Filtering. Interestingness.
Digg.(Changing their algorithms around diggs, traffic, reports on user, history of activity, etc)
Meaningful Data. The Semantic Web, MicroFormats, Pattern Languages, etc.
FLASHBACK!
<span class=“header”>Trip Itinerary!</span>
<h1>Trip Itinerary!</h1>
VS.
(this is the Semantic Web)
Are 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.
class="vcard" class="adr" class="type" [work|home|pref|postal|dom|intl] class="post-office-box" class="street-address" class="extended-address" class="region" class="locality" class="postal-code" class="country-name" class="agent" class="bday" (ISO Date) class="class" class="category" rel="tag" class="email" class="type" class="value" class="fn" class="geo" class="latitude" class="longitude" class="key" class="label" class="logo" class="mailer" class="n" class="honorific-prefix" class="given-name" class="additional-name" class="family-name" class="honorific-suffix" class="nickname" class="note" class="org" class="organization-name" class="organization-unit" class="photo" class="rev" class="role" class="sort-string" class="sound" class="title" class="tel" class="type" [home|work|pref|fax|cell|pager] class="value" class="tz" class="uid" class="url"
r12
KEY ! Single Occurrence Required
¤ One or More, Required
hCalendarclass="vevent" class="category" rel="tag" class="class" class="description" class="dtend" (ISO Date) class="dtstamp" (ISO Date) class="dtstart" (ISO Date) class="duration" class="location" class="status" class="summary" class="uid" class="url" class="last-modified"
hReview (0.3)class="hreview" class="dtreviewed" (ISO Date) class="description" class="item" class="fn" class="url" class="photo" rel="license" class="permalink" rel="bookmark" class="type" [product|business|event|person|place|website|url] class="rating" (0.0 - 5.0) class="best" class="worst" class="reviewer" (hCard) class="summary" rel="tag" class="version"
hAtom (0.1)class="hfeed" rel="tag" class="hentry" class="author" (hCard) rel="bookmark" class="entry-title" class="entry-content" class="entry-summary" class="published" (ISO Date) class="updated" (ISO Date) rel="tag"
VoteLinks
Rel-Tag
Rel-Nofollow
Rel-License
Rel-Directory (Draft)rel="directory"
rel="license"
rel="nofollow"
rel="tag"
rev="vote-for"rev="vote-against"rev="vote-abstain"
microformats.org
Elemental Microformats
Compound Microformats
adr country-name extended-address post-office-box postal-code street-address locality region typeaffiliationauthorbestbookmark (rel)bdaycategoryclasscontactdescriptiondtenddtrevieweddtstartdtstampdurationeducationemail type valueentry-contententry-summaryentry-titleexperiencefngeo latitude longitudehentryhfeedhresumehreviewitemkeylabellast-modifiedlicense (rel)locationlogomailern additional-name family-name given-name honorific-prefix honorific-suffixnicknamenoteorg organization-name organization-unitpermalinkphotopublicationpublishedpublisherratingrevreviewerroleskillsort-stringsoundstatussummarytag (rel)tel type valuetitletypetzuidupdatedurlvcalendarvcardveventversionworst
hAto
m
hCale
ndar
hCard
hResum
e
hRevie
w
¤
!
!
•!
¤•
!
•
+
•+
+
!
!
+
+
+!
•
!
++
!
•+•++•++•
+•+
•••
!
+++
+•
•++•••••••++•
•
+
+
++
••••+
++
•
!
•
!
•
•
!
+
•
•
+
!
++
+
+
!
!
!
++
+
+
+•
+
+
++
hCard
+ Single Occurrence Optional• Zero or More Occurrences
suda.co.uk
hResume (Draft)class="hresume" class="affiliation" (hcard) class="education" (hcalendar) class="experience" (hcalendar) class="publication" (citation) class="skill" rel="tag" class="summary" class="contact" (hCard)
Include Pattern<object class="include" type="text/html" data="#idref"/>
<a class="include" href="#idref">...</a>
Datetime Pattern<abbr class="foo" title="YYYY-MM-DDTHH:MM:SS+ZZ:ZZ">Human Date Time</abbr>
[Common List of Values](data format)
class="adr" class="type" [work|home|pref|postal|dom|intl] class="post-office-box" class="street-address" class="extended-address" class="region" class="locality" class="postal-code" class="country-name"
Address (Draft)
class="geo" class="latitude" class="longitude"
Geolocation (Draft)
Design Patterns
class="xfolkentry" class="taggedlink" class="description" rel="tag"
xFolk (RC1)
XFNrel="contact"rel="acquaintance"rel="friend"rel="met"rel="co-worker"rel="colleague"rel="co-resident"rel="neighbor"rel="child"
rel="parent"rel="spouse"rel="kin"rel="muse"rel="crush"rel="date"rel="sweetheart"rel="me"
http://microformats.org/code/hcard/creator
<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:[email protected]">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/
How do I use this thing?New UIs (off the web)
New UIs (off the web)
interface-free» Multi-Touch» Very cool :-)
http://cs.nyu.edu/~jhan/ftirtouch/
http://www.youtube.com/watch?v=zwGAKUForhM
New UIs (off the web)
iPhone» June this year» 1 button» Touch Screen» Software UI
http://www.apple.com/iphone/phone/
New UIs (off the web)
Wii» 6+ million units» Motion control» 10ft design UI
http://wii.nintendo.com/
New UIs (off the web)
Looking Glass» Built in Java» Open Source» “3D” desktop
http://www.sun.com/software/looking_glass/
Going Mobile.Mobile design/development
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/
Mobile design/developmentMobile design/development
Mobile design/development
Mobile design/development
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 AMBuilding B - Room 157
Mobile design/development
What does this mean?» It’s time to create a strategy» get moving in the right direction» don’t push too hard with monetization
Mobile design/development
(in 2007)
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
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!)
Mobile design/development
MicroSoft just released a new mobile browser “Deepfish”http://on10.net/Blogs/larry/exclusive-video-new-mobile-web-browser--deepfish/
* and don’t forget minimohttp://www.mozilla.org/projects/minimo/
Co
pyr
igh
t ©
20
06
Blu
e F
lavo
r. A
ll tr
ade
mar
ks a
nd
co
pyr
igh
ts r
em
ain
th
e p
rop
ert
y o
f th
eir
res
pe
ctiv
e o
wn
ers
.
Context vs. Content
Mobile Specific Site
Stylesheets
Reformat
SSR
Complex
Simple
Slower Faster
Value
via: Brian Fling
Co
pyr
igh
t ©
20
06
Blu
e F
lavo
r. A
ll tr
ade
mar
ks a
nd
co
pyr
igh
ts r
em
ain
th
e p
rop
ert
y o
f th
eir
res
pe
ctiv
e o
wn
ers
.
Mobile Web Options
SSR Reformat Stylesheets Mobile Specific
Want to know more?Mobile design/development
http://www.blueflavor.com/blog/mobile/sxsw_2007_mobile_web_presentation.php
http://www.blueflavor.com/blog/mobile/dotmobi_mobile_web_developers_guide.php
http://www.developershome.com/wap/xhtmlmp/xhtml_mp_tutorial.asp?page=introduction
100s of links await you:http://del.icio.us/jeremyjohnson/mobile
http://www.slideshare.net/xian/mobile-information-architecture/
Marco!Location Aware
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
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
Location Aware
Connecting to the real world.
Location Aware
It’s about...
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/
Even though these three services are called “search engines,” in fact they are becoming “answer services” controlled through their command line interfaces.
http://www.jnd.org/dn.mss/ui_breakthroughcomma.html
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://lifehacker.com/software/top/geek-to-live--find-free-music-on-the-web-136578.php
http://www.humanized.com/products/enso/launcher/
Travel
Idea
What if this could accept native Sabre or natural language?
Do you speak binary?Natural Language Processing
For real this time?
http://www.systemone.at/en/platform/overview#
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.
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.
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/
http://knowitall-1.cs.washington.edu/Opine/Search.aspx
Do the right thing.
Everyone is invited.Accessibility
Accessibility
Who doesn't want their site to be accessible by everyone?
Accessibility
But unfortunately many sites...
Accessibility
...give the wrong impression.
http://en.wikipedia.org/wiki/No_Meals_on_Wheels
Check out: Target, accessibility and opinionshttp://www.boagworld.com/archives/2006/02/target_accessibility_and_opinions.html
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...
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
Accessibility
“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.”
May 7, 2007An energetic, practical, full-day workshop by top web
accessibility expert Derek Featherstone.
Accessibility
http://furtherahead.com/workshops/texas/
Accessibility
Dig deeper.
http://boxofchocolates.ca/http://www.alistapart.com/articles/wiwa/http://www.knowbility.org/main/http://joeclark.org/http://www.webaim.org/
Al Gore invented Hybrid Cars.Going Green
Time to kick it up a notch!(still awake?)
Do I have your attention?Attention Trust, Attention Engine, APML, Attention Points
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.
Our Attention data has real value and needs to be protected.
AttentionTrust is a not-for-profit 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 reflecting 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.
Attention Trust
http://www.attentiontrust.org/
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.”
http://www.touchstonelive.com/
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.
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/
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 nonessentialhttp://www.presentationzen.com/presentationzen/2007/03/signaltonoise_r.html
Attention Points(This is a little off topic.... but a good idea)
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
Attention Mapping: The 10-Point Exercise
Travel
IdeaRecommend something I want.My attention is valuable.Travel sites are already doing this in a small way.
Travel
IdeaRecommend something I want.My attention is valuable.Or... How about...
$
Export/Share APML from Amazon
Into Travelocity
You may be interested in “The Da Vinci Code Guided Walk” in Paris.
Defining Deliverables“I’ll show you mine if you’ll show me yours..”
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
Also...What sells an idea?
Pleasurable Design Useful, Usable, AND Desirable
http://www.poetpainter.com/thoughts/article/presentation-notes-slides-for-creating-pleasurable-interfaces
“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
Pleasure
Emotional Design
FunHedonic Design
Seduction
Emotional Interface
Funology
Beauty, goodness, and usability Desirability
Scent
Affective Computing
Joy of Use
Persuasive Design
Social Computing
Narrative User Interfaces
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...
"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)
Good interaction design focuses on what people want to...
✓ Know (content, good IA)
✓ Do (tasks, UI Design)
? Feel... “feel?#!!??”
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
http://www.poetpainter.com/thoughts/article/ia-summit-2007-tasks-to-experiences-poster
“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"
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences(People, Activities, Context)
Focused on
Tasks(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without di!culty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design) (visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory (completeness)
Have a Personality
Create conversational and context aware interactions (“Adaptive Interfaces”; narrative IA structures)
Elicit Desire (Limited availability, limited access, curious and seductive experiences)Simplify, organize, and clarify
information
Display information visually
Reduce features and complexity
Are easier to understand
Use language for more natural interactions
Add features that support desired behaviors (o!ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and social values
Create a tolerance for faults at lower levels
Are tied to a person’s self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006
“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
THIS IS THE “CHASM” THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO CROSS
http://www.poetpainter.com/thoughts/article/presentation-notes-slides-for-creating-pleasurable-interfaces
But ‘the important stuff’ changes over time...
What about different ‘time-based’ layouts?
Confirmation
But ‘the important stuff’ changes over time...
What about different ‘time-based’ layouts?
Navigation
But ‘the important stuff’ changes over time...
What about different ‘time-based’ layouts?
Check-In
But ‘the important stuff’ changes over time...
What about different ‘time-based’ layouts?
(Does this sound a little bit like game design?)
http://www.linkedin.com/
(Does this sound a little bit like game design?)
What if... we noticed that a user was ‘missing’ the button. We could increase the button size!
(Credit to Derek Featherstone for this one!)
Experiences!
The introduction of the iPhone sets the bar high... these companies must innovate — particularly on the user experience — to compete with Apple.
—Forrester
✴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)
•
Better Experiences...
The Real World.Research Getting Real
How do you research your users?(and remember users = people)
Research Getting Real
vs.
Research Getting Real
(vs. )
Research Getting Real
pseudo-ethnography
Research Getting Real
anthrodesign
user anthropologist
ethnographic research
human behavior
human research for commerce
Design Research
behavioral research
Exploratory User Research
User Field Research
It’s sometimes called...
experience modeling
Research Getting Real
Quick introduction...
Research Getting Real
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”
Research Getting Real
Dig deeper.http://www.janchipchase.com/
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/
http://www.janchipchase.com/publications
I’m listening.The Community Manager
The Community Manager
Jeremiah Owyang has a recent article that sums up the “Community Manager” role:1) Community FirstPuts 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-waysTeaches the community about the company and it’s products, often in a non-invasive manner.
3) Uses the tools and communication style of the communityIn 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 companyThis 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 RoleThis 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 waySometimes 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/
The community can also be your customers service.
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
The Community Manager
Find ways to get closer to the customer.
The Community Manager
Lightning Round!(which means very little supporting information, but we
thought we should at least mention it here...)
The new social.The social web
meYou Someone Else
The social web was...
Someone Else
My dataMy Interests
The social web is...
meYou Someone
Else
Photos
Music
VideosInterest connection
Blog
Music connection
Photo connection
Travel
Someone Else
MacsCars
“Connecting around objects of interest”
http://www.slideshare.net/rashmi/design-for-social-sharing-workshop
Favorite new apps/sites?Shelfari. SlideShare. HighRise. Twitter. Joost. Stikkit. SystemOne. Wufoo. Popurls. Original Signal.
(How Business 2.0 magazine classifies Web 2.0 services)
Web 3.0 / Humans Augment Machines
Complete simple tasks that people do better than computers. And, get paid for it.
Welcome to Google Image Labeler, a new feature of Google Image Search that allows you to label random images to help improve the quality of Google's image search results.
http://www.androidtech.com/knowledge-blog/2006/11/web-30-you-aint-seen-nothing-yet.html
The Web that wasn’t
http://www.slideshare.net/awright249/the-web-that-wasnt
Design + Business Value Centered Design
“Five years ago designers were begging for a seat at the table. Now they’ve got it, and many aren't sure what to do.”
VisioncastingPaint the picture of how it should be.Then march towards that goal.
Lifestyle Home 25
Lifestyle Home 21
A blank scrapbook for digital mediaThe media tablet is a digital domestic scrapbook that assists Simone - and her partner - with the informational needs of their busy and changeable lifestyles. Simone can load this initially blank, lightweight mobile display with a personal selection of content and services from her home menu, and can use it to take notes and annotate content. Equipped with a pen and a simple interface, it provides access around the home to everything from her photos to live news and her pregnancy services in a more richly interactive, intimate and !exible way than the TV.
No user manual requiredThe tablet is highly intuitive and fun to use. Tapping the screen with the tip of the pen causes four ‘active’ concentric circles to appear, each with an option so the user can create, delete, copy pages and take notes or draw. All loaded content and services are conveniently kept on the desktop, with no menus or hidden folders, and different
icons make it easy to distinguish between them. Interaction with the object is visually inviting and playful in a !uid, ‘organic’ way. Virtually no instruction whatsoever is required.
Enjoying content anywhere in the homeWhen Simone unpacks the media tablet and turns it on for the "rst time, it automatically communicates with her TV, activating a related section in her lifestyle home menu. She can then personalize it to suit her lifestyle and preferences. For instance she can load it with photo albums stored on her set-top box, which are then shown as icons on the tablet’s display. Tapping on an icon opens the photos, which are streamed using WiFi, so she can view them - or share them electronically with family and friends - using the tablet anywhere in the house or garden. In the same way she could watch a cartoon in the hammock with her daughter, do her prenatal yoga in the spare room with the help of an instructional video, or follow a recipe on-screen while cooking in the kitchen.
Recognizing the userShe can just as easily watch television programs or access on-line services, such as a pregnancy discussion forum or health encyclopedia. Simone is in full control of the tablet’s content. Interestingly, the same tablet can just as easily be personalized by her partner, who can arrange his own interface with links to his photos, music and favorite services. When the tablet is in standby mode, it is touch sensitive. If Simone picks it up, it uses BodyAura technology* to automatically recognize who she is, and switches to show her interface. Similarly, if her partner picks it up, it ‘magically’ switches to show his content.
* Body Aura (BCC) is a Philips technology
that provides automatic, secure electronic
identi!cation via natural interaction with devices
As companies from more and more countriesresearch, develop, manufacture and mar-ket their goods and services, this requiresa radical increase in the flow of data. Con-versely, the use of modern communica-tions technology promotes the process ofinnovation. In turn, knowledge and skillsbecome the true generators of value. Forthis reason, e-learning will be one of thepreferred forms of further training. Theneed to filter, structure and personalize in-formation will present one of the majorchallenges. Fortunately, enhanced soft-ware will help us solve this problem.
The advent of improved programmingmethods will lead to the development ofsoftware modules and systems that arefault-tolerant and increasingly resemble
genuine artificial intelligence. With suchapplications, electronic devices will be ableto understand speech, gestures and facialexpressions, as well as recognize and as-sess certain situations. This intuitive, “hu-man” use of machines is very much in linewith the trend toward personalized solu-tions, easy operability and “emotional” interactivity. In the future, there will alsobe an increasing use of humanoid virtualfigures, software agents or even actualrobots, which are able to act autonomouslyin certain situations and can adapt to aperson’s needs and preferences. Moreover,routine tasks will be increasingly con-ducted by technical systems, which will becapable of learning from experience andmanaging themselves in alliance withother machines. Thanks to miniaturizationin microelectronics and increases in soft-ware power, many devices will be outfittedwith integrated sensors, artificial intelli-gence and the ability to communicate. As such computing intelligence comes toinhabit more and more commonplace ob-jects, it will increasingly become an invis-ible part of everyday life.
11
Mobile
communications of
the future: A video
conference with busi-
ness associates or a
video mail from a
friend on vacation
Pure entertainment:
High data-transfer
rates in fixed
networks will enable
users to download 3D
movies from the
Internet. Similarly, it
will be possible to
play highly realistic
games between
mobile terminals.
Real-time
communications
worldwide and
electronic decision-
making aids will
assist the managers
of tomorrow.
(Start with the experience)
Prototyping(more popular than ever!)
Ajax, now that the dust has settled.
Mashups
Enterprise 2.0
“Firms using Web 2.0 technologies are driven by gains in worker efficiency and a fear of competitive pressures. For non-adopters, a perceived lack of business value and priority impedes adoption; however, almost all of the CIOs that we surveyed recognized Web 2.0 as more than a passing fad.”-Forrester
Roll your own appsDabble DB, Yahoo Pipes, Ning, Rollyo,
various CMS Systems
Design PatternsGo read this:
1
DESIGN PATTERNSDEFINING AND SHARING WEB DESIGNLANGUAGES
LUKE WROBLEWSKISOUTH BY SOUTHWEST, 2007
http://www.lukew.com/ff/entry.asp?484
PREVIEW
sabreux.com
look for it 5.1.2007
Thanks!
