Transcript
Page 1: Web, Design, and UX Trends for 2008

Hello, welcome to 2008

Page 2: Web, Design, and UX Trends for 2008

I’m Jeremy

I’m Dustin

ninja skills:

Design, User Experience, Technologywebsite:

jeremyjohnsononline.comlikes:

Photography, lol cats, macs, gadgets

ninja skills:

Design, Front-End Development, Gridswebsite:

dustinaskins.comlikes:

Photography, running, cycling

Jeremy Johnson

Dustin Askins

Page 3: Web, Design, and UX Trends for 2008

We just got back from SXSW.

3/28/08 updated 4/22/08

Page 4: Web, Design, and UX Trends for 2008

So, what’s SXSW?

Page 5: Web, Design, and UX Trends for 2008

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

Page 6: Web, Design, and UX Trends for 2008
Page 7: Web, Design, and UX Trends for 2008
Page 8: Web, Design, and UX Trends for 2008
Page 9: Web, Design, and UX Trends for 2008
Page 10: Web, Design, and UX Trends for 2008

It’s A showcase of new technology.

Page 11: Web, Design, and UX Trends for 2008
Page 12: Web, Design, and UX Trends for 2008
Page 13: Web, Design, and UX Trends for 2008
Page 14: Web, Design, and UX Trends for 2008
Page 15: Web, Design, and UX Trends for 2008

It’s a place to meet like minded people.

Page 16: Web, Design, and UX Trends for 2008
Page 17: Web, Design, and UX Trends for 2008
Page 18: Web, Design, and UX Trends for 2008
Page 19: Web, Design, and UX Trends for 2008
Page 20: Web, Design, and UX Trends for 2008
Page 21: Web, Design, and UX Trends for 2008
Page 22: Web, Design, and UX Trends for 2008
Page 23: Web, Design, and UX Trends for 2008

And other stuff...

Page 24: Web, Design, and UX Trends for 2008
Page 25: Web, Design, and UX Trends for 2008
Page 26: Web, Design, and UX Trends for 2008
Page 27: Web, Design, and UX Trends for 2008

Learn more:

http://pulse.sxsw.com/

Page 28: Web, Design, and UX Trends for 2008
Page 29: Web, Design, and UX Trends for 2008

Information Architects KK Internet Brand & Strategy (c) 2006 A4 and A3 versions under http://www.informationarchitects.jp/webtrends2007

Page 30: Web, Design, and UX Trends for 2008

LEGEND

3

1

5

4

Spiritualism

Collectivism

Search for meaning

Celebrity worship

Risk aversion

Litigation

Individualism

Re-localisation

Russian nationalism

Tribalism

Xenophobia

Immigration

The Environment

Ubiquitous connectivity

Robotics

Nanotech

Biotech

Embedded intelligence

RFID

Blended families

Extended financial families

Single person households

Boomerang kids

Same sex couples (with kids)

Personalisation

Online video

Web 2.0

Enterprise 2.0

Climate change

Anti-incumbent elections

Mobile devices

Social networks

Pessimism

Fear

Constant partial attention

Time Shifting

Aggregation

Corporate power

Celebrity politicians

NGO power

Voter antipathy

Urbanisation

Decline of nuclear family

Declining fertility

GPS

Karma capitalism

Public-private partnerships

End of low-cost inputs

Industry convergence

Monolines

Prediction markets

Data visualisation

Polarisation of markets

Fragmented families

Digital money

Death of cashIndustrial provenance

P2P lendingDeregulationDebt

Networked risk‘Free’

Private currenciesShortage of talent

Private equityThe attention economy

Chinese liquidity

Labour migration

Power shift eastwards

CHIME liquiditySingle global currency

Humans 2.0 Reality mining

Artificial body parts VOIP

Artificial intelligence 3-D printers

Food inflation

Economic recession

Open innovation

Wireless

Place shifting

Too much information

Geospatial web

Downshifting

Transparency

Simplicity

Ageing

AnxietyVirtual worlds

Digitalisation

Globalisation

Line 1 - SocietyLine 2 - PoliticsLine 3 - DemographicsLine 4 - EconomyLine 5 - Technology

major interchange

Scale: unimaginable

under construction

Happiness

Nostalgia

2Trend Blend 2008+

Stream o f unconsc iousness

Mountains of debt

Riv

er o

f co

nsci

ousn

ess

Rhythm & balance

Making things

Physiological neoteny

Speeding-up

Techophobia

Female chauvinism

Fantasy & escape

Middle class unrest

Device convergence

Virtual protest

Global voting

1

This map is published under a Creative Commons Attribution - ShareAlike 2.5 License.

Ocean of liquidity

Page 32: Web, Design, and UX Trends for 2008

digital outlook report2008

http://blog.guykawasaki.com/2008/02/avenue-a-razorf.html

Interactive Advertising

Page 33: Web, Design, and UX Trends for 2008

Interoperability

Immediacy

Mobile

Reality

INNOVATION

PORTABLE

PRIVACY

Virtual currencies

Semantic Web

Location-basedOpen platforms

A/B testing

Amazon's Web-developer initiatives

data control

A.I. web automation

Does The Home Page Still Matter?

Customer-Centric Engagement

six “c’s”

2008

Page 34: Web, Design, and UX Trends for 2008

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

Page 35: Web, Design, and UX Trends for 2008

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

the past

Page 36: Web, Design, and UX Trends for 2008

2008

Page 37: Web, Design, and UX Trends for 2008

2008Let’s get started

Page 38: Web, Design, and UX Trends for 2008

Web 2.0 is dead

Long live web 2.0

Page 39: Web, Design, and UX Trends for 2008

From 2006…Web 2.0.

Page 40: Web, Design, and UX Trends for 2008

http://www.flickr.com/photos/mac_vegetarian/292941723/

People became fanatics of the Web 2.0 look…

Page 41: Web, Design, and UX Trends for 2008

Real logos from Web 2.0…

http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/

Page 42: Web, Design, and UX Trends for 2008

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/

Page 43: Web, Design, and UX Trends for 2008
Page 44: Web, Design, and UX Trends for 2008
Page 45: Web, Design, and UX Trends for 2008
Page 46: Web, Design, and UX Trends for 2008

http://www.makemylogobiggercream.com/

Page 47: Web, Design, and UX Trends for 2008

“We need ubiquity to build Web4, because it is about activity, not just data, and most human activity takes place offline.

We need identity to build Web4, because the deliverable is based on who you are and what you do and what you need.

And we need connection to build Web4, because you're nothing without the rest of us.”

http://sethgodin.typepad.com/seths_blog/2007/01/web4.html/

"I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web –

the content, links, and transactions between people and computers. A ‘Semantic Web’, which should make this possible, has yet to emerge, but when it does, the day-to-

day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The

‘intelligent agents’ people have touted for ages will finally materialize."

http://en.wikipedia.org/wiki/Web_3

The next Web?

Web 3“The Semantic Web”

Web 4

Page 48: Web, Design, and UX Trends for 2008

Whatever it is, it’s the new WebThe trends we’re covering today might give us a glimpse.

http://www.flickr.com/photos/clearlyambiguous/47022665/

Page 49: Web, Design, and UX Trends for 2008
Page 50: Web, Design, and UX Trends for 2008

Politics and the web

Rock the vote.

Page 51: Web, Design, and UX Trends for 2008

Henry Jenkins at SXSWOn education. On politics, it’s about “we.” On local.

http://www.henryjenkins.org/

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.

Page 52: Web, Design, and UX Trends for 2008

Election 2008The internet sensations.

http://www.ronpaul2008.com/http://www.barackobama.com/index.php

Page 53: Web, Design, and UX Trends for 2008

YouTube DebatesUser submitted questions, and responses!

http://www.youtube.com/youchoose

Page 55: Web, Design, and UX Trends for 2008

http://logobama.com/

Page 56: Web, Design, and UX Trends for 2008

Return of the command line and Natural Language

Let’s party like it’s 1980!

Page 57: Web, Design, and UX Trends for 2008
Page 58: Web, Design, and UX Trends for 2008

...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.

...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....

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.

Don Norman, 2007:

Page 59: Web, Design, and UX Trends for 2008

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/

Page 61: Web, Design, and UX Trends for 2008

-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.

The Graphical Keyboard User Interface, 2007

http://labs.mozilla.com/2007/07/the-graphical-keyboard-user-interface/

Page 63: Web, Design, and UX Trends for 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.

DOS ain’t so bad after all, 2008

http://cameronmoll.com/archives/2008/01/dos_aint_so_bad_after_all/

Page 65: Web, Design, and UX Trends for 2008

What about Natural Language?

Page 66: Web, Design, and UX Trends for 2008

http://www.wundrbar.com/

Page 67: Web, Design, and UX Trends for 2008

http://quick.as/

Page 68: Web, Design, and UX Trends for 2008
Page 69: Web, Design, and UX Trends for 2008

» 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

Page 70: Web, Design, and UX Trends for 2008

http://www.powerset.com/

Page 73: Web, Design, and UX Trends for 2008

which one tries to represent objects, places, and abstract thoughts in image form. It’s a hard game, and there is no reverse game. Because informa-tion density is drastically greater in pictures than in prose, a picture is indeed worth a thou-sand words, but only when they describe a concrete visual like a graph or a portrait. In the realm of the abstract, pictures fail. How would you pictorially represent Marxism? You could try a picture of Marx, but that doesn’t distin-guish between the person and the school of thought (and requires your viewer to know what Marx looks like; otherwise it’s just a guy with a beard). Words can capture abstractions that pictures cannot because language has an immense amount of descrip-tive and differentiating power. Abstract thoughts are exactly represented by the words that give them names. It is this power that comes to the rescue in speci-fying functionality.

Standard GUIs, with their drop-down menus, check buttons, and tree-lists, cannot compare to the range of options that a text interface effortlessly provides. With just five alphanumeric char-acters, we can choose one out of 100,000,000 possible sequences. And choosing any one sequence is, in approximation, as fast as choosing any other (typing five characters takes roughly one sec-ond). It’s difficult to come up with a non-text-based interface that can perform as well.

Using language to access func-tionality brings to mind the old-form command line, which is still one of the most powerful inter-face paradigms we have for con-trolling our computers. Although command lines are hard to learn

Two current programs attempt to deliver linguistic command-line interface to users: Humanized’s Enso, and Blacktree’s excellent Quicksilver. Enso uses a more natural-language syntax, and works like this:

1. At any time, the user presses an activation key to call up a text-entry area.

2. Next, the user begins typing what they want to do. For instance, “translate to Japanese.”

3. As the user types, Enso autocompletes to the most likely command, and related suggestions appear below the typed text.

4. The user either continues typing until the command desired is specified, or arrows to a preferred command.

5. The user dismisses Enso, and the specified command is executed.

Enso then takes the selected text, uses the Google translation service, and places the results back into the text. With just one implementation, the ability to translate to and from languages is available anywhere on the computer, always with the same interface, and accessible in a few mnemonic keystrokes. Enso uses copy and paste as the graphical equivalent to standard out and standard in, allowing it to speak to almost any application in an implementation-agnostic manner. Because of the power of language, adding a large number of commands scales well. It’s always easy to get to the functionality desired.

Linguistic Command Line Interfaces

inte

rac

tio

ns

Ja

nu

ary

+ F

eb

rua

ry 2

00

8

21

FEATURE

http://portal.acm.org/citation.cfm?id=1330535&coll=GUIDE&dl=GUIDE&CFID=55158225&CFTOKEN=46726435&ret=1#Fulltext

Page 74: Web, Design, and UX Trends for 2008

http://twitter.pbwiki.com/Mashups

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://vpod.tv/leweb3/392057

Page 75: Web, Design, and UX Trends for 2008

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

Page 76: Web, Design, and UX Trends for 2008
Page 77: Web, Design, and UX Trends for 2008
Page 78: Web, Design, and UX Trends for 2008

Yes I Twitter.

Page 79: Web, Design, and UX Trends for 2008

Semantic Web

Almost famous?

http://www.flickr.com/photos/drachmann/327122302/sizes/l/

Page 81: Web, Design, and UX Trends for 2008
Page 82: Web, Design, and UX Trends for 2008

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.

Page 83: Web, Design, and UX Trends for 2008

1. Bottom-Up and Top-Down2. Annotation Technologies: RDF, Microformats, and Meta Headers3. Consumer and Enterprise4. Semantic APIs5. Search Technologies6. Contextual Technologies7. Semantic Databases

http://www.readwriteweb.com/archives/10_semantic_apps_to_watch.phphttp://www.readwriteweb.com/archives/semantic_web_patterns.php

Page 84: Web, Design, and UX Trends for 2008

Adding meaning to the web.

Page 85: Web, Design, and UX Trends for 2008

Image

List

<h1> 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>

Title

Page 86: Web, Design, and UX Trends for 2008

<h1> 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>

Review

Page 87: Web, Design, and UX Trends for 2008

hListingBETA

Proposal for a distributed listing format.

Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.

microformats.org/wiki/hReview

<div class=”hreview”><h1 class=”item fn”> Canon EOS 5D 12.8 MP Digital SLR Camera</h1><img src=”canon5d.jpg” alt=”camera body” /><p>

<strong>average rating:</strong><span class=”rating” title=”5”>

<img src=”5stars.gif” alt=”5 stars”/ ></span>

</p>

<p class=”description”>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.

<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>

Page 88: Web, Design, and UX Trends for 2008

hListingBETA

Proposal for a distributed listing format.

Suitable for embedding in XHTML, Atom, RSS, and arbitrary XML.

microformats.org/wiki/hReview

<div class=”hreview”><h1 class=”item fn”> Canon EOS 5D 12.8 MP Digital SLR Camera</h1><img src=”canon5d.jpg” alt=”camera body” /><p>

<strong>average rating:</strong><span class=”rating” title=”5”>

<img src=”5stars.gif” alt=”5 stars”/ ></span>

</p>

<p class=”description”>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.

<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/

Page 89: Web, Design, and UX Trends for 2008

Location

Ways to connect.Ways to Find.Ways to Explore.

http://www.flickr.com/photos/the_maybe/459136519/

Page 90: Web, Design, and UX Trends for 2008

Makes it easier to connect

Social + Location

Page 91: Web, Design, and UX Trends for 2008

http://www.dopplr.com

Page 92: Web, Design, and UX Trends for 2008

http://www.tripit.com

Page 93: Web, Design, and UX Trends for 2008

Makes you easier to find (Friends and applications)

notification + Location

Page 95: Web, Design, and UX Trends for 2008
Page 96: Web, Design, and UX Trends for 2008

Makes it easier to explore the real world

UGC + Location

Page 97: Web, Design, and UX Trends for 2008
Page 98: Web, Design, and UX Trends for 2008
Page 99: Web, Design, and UX Trends for 2008

Gives context to your location

Triangulation + Location

Page 100: Web, Design, and UX Trends for 2008
Page 101: Web, Design, and UX Trends for 2008

More options to get local

Access + Location

Page 102: Web, Design, and UX Trends for 2008

StrengtheningLocaloutside.in

http://outside.in/

Page 103: Web, Design, and UX Trends for 2008

Strengthening LocalYahoo! Local redesigns and hits the iPhone

http://local.yahoo.com/

Page 104: Web, Design, and UX Trends for 2008

Connected Desktop Applicationsvia air

Desktop or web? How about both!

Page 105: Web, Design, and UX Trends for 2008

Travel Network User Experience 51

AIR RUNTIME SQLiteDatabase

FlashPlayer

WebKitBrowser

Application.airFlex ContentWeb ContentFlash Content Java Applet

?

PDFSupport

Windows 2000Windows XP

Mac OSXLinux BETA

File System I/OOnline/OfflineWindowing

System Drag & DropFull Network StackClipboard Sync

OS integration via:Native Menu APIRight-click support

http://travisisaacs.com/

Page 106: Web, Design, and UX Trends for 2008

Travel Network User Experience 52

Music from my localiTunes library}}Music streaming from

Internet source

Finetune Deskop

+

Page 107: Web, Design, and UX Trends for 2008

Pownce

Page 108: Web, Design, and UX Trends for 2008
Page 109: Web, Design, and UX Trends for 2008

Adobe Kuler

Page 110: Web, Design, and UX Trends for 2008

Travel Network User Experience 56

ebay Desktop

Page 111: Web, Design, and UX Trends for 2008

Travel Network User Experience 57

OS window controls}

Custom window chromewith alpha transparency}

Page 112: Web, Design, and UX Trends for 2008

Travel Network User Experience 58

Multiple window support

Page 113: Web, Design, and UX Trends for 2008

Travel Network User Experience 59

Live updating

Page 114: Web, Design, and UX Trends for 2008

SalesForce SalesBuilder

Page 115: Web, Design, and UX Trends for 2008
Page 116: Web, Design, and UX Trends for 2008
Page 117: Web, Design, and UX Trends for 2008
Page 118: Web, Design, and UX Trends for 2008

Travel Network User Experience 65

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

Page 119: Web, Design, and UX Trends for 2008

Revealing Interfaces

hide complexity

Page 120: Web, Design, and UX Trends for 2008
Page 121: Web, Design, and UX Trends for 2008

Q. What is a revealing interface?

http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html

Page 122: Web, Design, and UX Trends for 2008

A. An interface that hides complexity until initiated.

http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html

Page 123: Web, Design, and UX Trends for 2008

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

Page 124: Web, Design, and UX Trends for 2008
Page 125: Web, Design, and UX Trends for 2008
Page 126: Web, Design, and UX Trends for 2008
Page 127: Web, Design, and UX Trends for 2008
Page 128: Web, Design, and UX Trends for 2008
Page 129: Web, Design, and UX Trends for 2008
Page 130: Web, Design, and UX Trends for 2008
Page 131: Web, Design, and UX Trends for 2008

http://www.nintendo.com/

Page 132: Web, Design, and UX Trends for 2008

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”

http://developers.slashdot.org/article.pl?sid=00/03/03/096223&mode=thread

- Jakob Nielsen (2000)

Page 133: Web, Design, and UX Trends for 2008

Progressive disclosure 2.0?

Page 134: Web, Design, and UX Trends for 2008

http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/

View the full presentation:

Page 135: Web, Design, and UX Trends for 2008

coopetition

What side are you on?

Page 136: Web, Design, and UX Trends for 2008

“cooperation and competition”

Page 137: Web, Design, and UX Trends for 2008
Page 138: Web, Design, and UX Trends for 2008

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

Page 139: Web, Design, and UX Trends for 2008

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

Page 140: Web, Design, and UX Trends for 2008

Consumers

Movie Studios Independent Content

Record Companies

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.

Page 141: Web, Design, and UX Trends for 2008

Big D Design

What side are you on?

Page 142: Web, Design, and UX Trends for 2008
Page 143: Web, Design, and UX Trends for 2008

“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/

Page 144: Web, Design, and UX Trends for 2008

From 2007…

Page 145: Web, Design, and UX Trends for 2008

Designing for the “Oh no!”Preventing problems and affecting perception

http://www.flickr.com/photos/paszczak000/553882131/

Page 146: Web, Design, and UX Trends for 2008

Designing for the “Oh no!”Preventing problems and affecting perception

http://www.flickr.com/photos/paszczak000/553882131/

Aza Raskin

Page 147: Web, Design, and UX Trends for 2008

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

Page 148: Web, Design, and UX Trends for 2008

Affect perception…“This isn't slow, it’s working.”

Mozilla Firefox “spinner”Sped it up in Usability, perception was speed

Travelocity interstitialBar doesn’t complete

Page 149: Web, Design, and UX Trends for 2008

“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

Page 150: Web, Design, and UX Trends for 2008
Page 151: Web, Design, and UX Trends for 2008

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

Page 152: Web, Design, and UX Trends for 2008

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

Page 153: Web, Design, and UX Trends for 2008

Design Students ConnectingYouTube videos, communities

http://www.youtube.com/results?search_query=what+is+graphic+design&search_type=

Page 154: Web, Design, and UX Trends for 2008

Movie about a font?!

http://www.helveticafilm.com/

Page 155: Web, Design, and UX Trends for 2008

My Dad, an accountant, is even a bit typography wiseDoesn’t use Arial because it’s a rip-off of Helvetica.

http://ilovetypography.com/2007/10/06/arial-versus-helvetica/

Arial Helvetica

Page 156: Web, Design, and UX Trends for 2008

Accessibility

What side are you on?

Page 157: Web, Design, and UX Trends for 2008

AccessibilityFrom 2007…

Page 158: Web, Design, and UX Trends for 2008

Target Lawsuit UpdateNow a class-action suit

http://en.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corporation

http://nfb.org

Class consists of all legally blind individuals in the United States who have attempted to access Target.com and as a result have been denied access to the enjoyment of goods and services offered in Target stores.

Proceedings still under way, but the class-action was granted after the Judge found that Target.com, like the stores, are "places of accomodation" are subject to the American with Disabilities Act of 1990

Page 159: Web, Design, and UX Trends for 2008

http://www.flickr.com/photos/fstorr/249586939/

Page 160: Web, Design, and UX Trends for 2008

http://www.nbc.com/The_Office/

“It’s about people.”

Page 161: Web, Design, and UX Trends for 2008

http://ironfeathers.ca/routes/14/

Page 162: Web, Design, and UX Trends for 2008

Conferences on AccessibilityFrom 2007…

Page 163: Web, Design, and UX Trends for 2008

Travelocity Efforts

Page 164: Web, Design, and UX Trends for 2008

Mobile

Back again...

Page 165: Web, Design, and UX Trends for 2008

So, what’s new for 2008?

Page 166: Web, Design, and UX Trends for 2008
Page 167: Web, Design, and UX Trends for 2008
Page 168: Web, Design, and UX Trends for 2008

http://www.skyfire.com/

Better Mobile Experiences

Via the browser...

Page 169: Web, Design, and UX Trends for 2008

Similarly, surveys by Yankee Group, a Boston research firm, show that only 13 percent of cellphone users in North America use their phones to surf the Web more than once a month, while 70 percent of computer users view Web sites every day.

“The user experience has been a disaster,” says Tony Davis, managing partner of Brightspark, a Toronto venture capital firm that has invested in two mobile Web companies.

While many phones have some form of Web access, most are hard to use — just finding a place to type in a Web address can be a challenge. And once you find it, most Web content doesn’t look very good on cellphone screens.

http://www.nytimes.com/2007/11/25/technology/25proto.html?ex=1353646800&en=1ede36007f8baff4&ei=5124&partner=permalink&exprod=permalink

- 11/2007

Page 170: Web, Design, and UX Trends for 2008

“One interesting statistic that was revealed was that 60% of U.K. iPhone users are sending or receiving more than 25 MB of data a month.”

“Google on Wednesday said it had seen 50 times more searches on Apple‘s iPhone than any other mobile handset, adding weight to the group’s confidence at being able to generate significant revenues from the mobile internet.”

http://www.ft.com/cms/s/0/c4af8bd4-b1c3-11dc-9777-0000779fd2ac.html?nclick_check=1http://www.ft.com/cms/s/667f13de-da60-11dc-9bb9-0000779fd2ac.html

http://www.flickr.com/photos/jason_coates/2175766721/

Page 171: Web, Design, and UX Trends for 2008

Good Hardware?

Responsive Software?

High Bandwidth?

Better Experiences?

For 2008 do we finally have...

Page 172: Web, Design, and UX Trends for 2008

Mobile User Adoption

HIGH

LOW

SMS

$ Cost of development and maintenance

HIGHLOW

(voice!)

Business SMS: 42%Leisure SMS: 34%

* Data from Forrester: Travel eBusiness Execs: Focus On Mobile Data Now: Mobile Data Creates A New Way To Distribute Travel And Engage Travelers

WAP 2.0

* Business Internet: 15%Leisure Internet: 12%

email* Business email: 14%

Leisure email: 10%

Travelers w/ mobile devices*:

Java ME App. 5% ?

* Travel eBusiness Execs: Focus On Mobile Data Now OK, here’s a shocker: Ownership of mobile phones is nearly ubiquitous among North American travelers. More than eight in 10 leisure travelers and nearly 87% of business travelers have one; among online travelers ownership is even higher (see Figure 1).1 What makes all of this noteworthy is that 37% of leisure travelers and 45% of business travelers use mobile data services such as text messaging, sending or receiving picture messages, email, or accessing the mobile Internet. How does usage of these services break out?

M:Metrics says 9.9 million U.S. subscribers accessed mobile content via a downloaded application in March, up from 7.4 million in March 2006. (this is a small percentage of mobile internet users, and an even smaller percent of the total mobile device users...)

http://gigaom.com/2007/05/07/do-you-mobile-download/

Don

’t fo

rget

» M

obile

AJA

X Br

owse

rs...

(the

wild

car

d!)

Custom OS App.

MMS

* Business MMS: 20%Leisure MMS: 16%

“Google hits everything but MMS, they even do voice (1-800-goog-411), which has near 100% adoption”

(or other non-native OS app.)

2007

Page 173: Web, Design, and UX Trends for 2008

complex.

mobile web mobile applications

JAVA MEBREW

Palm OS

Windows Mobile OS (and smartphone)

BlackBerry OS

Nokia S60

Flash Lite

“Widgets”

XHTML-MP

WML

Small Screen Rendering

Reformatting(squeezing)

Mobile Style Sheets

“desktop web” (Deepfish, Mobile Safari, S60)

+ all the different browsers (40+)

2007

Page 174: Web, Design, and UX Trends for 2008

It’s not about

Page 175: Web, Design, and UX Trends for 2008

It’s about creating a unique mobile experience.

Page 176: Web, Design, and UX Trends for 2008

T-Shaped People

Branch out.

Page 177: Web, Design, and UX Trends for 2008

“people who are so inquisitive about the world that they're willing to try to do what you do. We call them "T-shaped people." They have a principal skill that describes the vertical leg of the T—they're mechanical engineers or industrial designers.

But they are so empathetic that they can branch out into other skills, such as anthropology, and do them as well. They are able to explore insights from many different perspectives and recognize patterns of behavior that point to a universal human need”.

Tim Brown, founder of IDEO

Page 178: Web, Design, and UX Trends for 2008

Information Architecture

Visual Design

Interaction Design

Marketing Communication

Front-End Development

Usability

User Experience

etc...

T-shaped people:

http://www.peterboersma.com/blog/2004/11/t-model-big-ia-is-now-ux.html

Page 179: Web, Design, and UX Trends for 2008

... not afraid to branch out

... great at soaking up new information

... quick learners

... great problem solvers

People who are...

But most of all...

Page 180: Web, Design, and UX Trends for 2008

NOW HIRING

PASSIONATE

EMPLOYEES

Page 181: Web, Design, and UX Trends for 2008

http://customerevangelists.typepad.com/blog/2005/08/hiring_for_atti.html

“The world is filled with ... employees who have no interest in their work. Just a paycheck.”http://money.cnn.com/2006/07/11/news/economy/

annie0712.fortune/index.htm

“Steve Jobs has said he wants to hire only people who are truly passionate about their work”

Page 182: Web, Design, and UX Trends for 2008

We’re frequently called to...

Make that button bigger!

Help define what our customers want in the next 3-5 years.

Tactical

Strategic

Page 183: Web, Design, and UX Trends for 2008

Lifestreaming (TMI?)

http://www.flickr.com/photos/luc/1824234195/

Page 184: Web, Design, and UX Trends for 2008
Page 185: Web, Design, and UX Trends for 2008

“digital life manager”

Page 186: Web, Design, and UX Trends for 2008
Page 188: Web, Design, and UX Trends for 2008
Page 189: Web, Design, and UX Trends for 2008
Page 190: Web, Design, and UX Trends for 2008

http://tumblr.com

Page 191: Web, Design, and UX Trends for 2008

http://adactio.com/journal/1202

Page 192: Web, Design, and UX Trends for 2008

http://facebook.com

News feedPrivacy and control of personal info paramount

Page 193: Web, Design, and UX Trends for 2008

Haptic is the new touch

Why touch when you can feel?

Page 194: Web, Design, and UX Trends for 2008

Haptic technology refers to technology which interfaces the user via the sense of touch by applying forces, vibrations and/or motions to the user.http://en.wikipedia.org/wiki/Haptic

Page 195: Web, Design, and UX Trends for 2008

It has been shown that tactile feedback can be added to button presses using standard mobile phone vibrotactile actuators and can be beneficial to mobile device users, increasing typing speeds and reducing errors.

http://code.google.com/p/iphone-haptics/

Page 198: Web, Design, and UX Trends for 2008

Thin Client

Thin is in

Page 199: Web, Design, and UX Trends for 2008

The Thin Client is ComingFrom 2007..

Page 200: Web, Design, and UX Trends for 2008

Mozilla PrismGet rid of the address bar, tabs, status bar, etc.

http://labs.mozilla.com/2007/10/prism/

Page 201: Web, Design, and UX Trends for 2008

iPhonePotential to be a thin client?

http://www.hackint0sh.org/forum/showthread.php?t=17960http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore?productLearnMore=MB128LL/A

Page 202: Web, Design, and UX Trends for 2008

Shorts!

Page 204: Web, Design, and UX Trends for 2008

Facebook and its AppsDo they make the company worth $15 bil?

http://www.facebook.com/applications/

Page 205: Web, Design, and UX Trends for 2008

24% Can’t Find Google

designers are not users.

...for this round of research we're deliberately recruiting above-average users, so the success rate across all Internet users is probably lower than our finding.

http://www.useit.com/alertbox/designer-user-differences.htmlhttp://www.marketingpilgrim.com/2008/03/24-cant-find-google.html

Page 206: Web, Design, and UX Trends for 2008

VoiceVoice-in, data out

http://jott.comhttp://www.google.com/goog411/

Page 207: Web, Design, and UX Trends for 2008

Music

http://www.amazon.com/MP3-Music-Download

http://www.apple.com/pr/library/2007/05/30itunesplus.htmlhttp://last.fmhttp://www.imeem.com/

What ya’ listening to?DRMInhibited more than sharing with friends, device issues.

Page 208: Web, Design, and UX Trends for 2008

JavaScript LibrariesMatured, much more than visual changes, they include memory leak scripts, compression, and other advanced functions

Page 209: Web, Design, and UX Trends for 2008

http://abriefmessage.com/2008/03/12/gordon/

Page 210: Web, Design, and UX Trends for 2008

Grids are Big Right NowSpacing system, order, like newspapers

Page 211: Web, Design, and UX Trends for 2008

Tapping Into the CollectiveCrowdsourcing, not just Wikipedia anymore.

http://labs.live.com/photosynthhttp://www.ted.com/index.php/talks/view/id/129

Page 212: Web, Design, and UX Trends for 2008

Watch out for...

Page 213: Web, Design, and UX Trends for 2008
Page 214: Web, Design, and UX Trends for 2008

http://www.salesforce.com/platform/

“What if developers could focus on creating applications that precisely solve their companies’ business problems, rather than the software and infrastructure to run them?”

Page 215: Web, Design, and UX Trends for 2008

What:Design approach that focuses on service offerings. Considers touchpoints across channels, interactions at those points, and the connections between them. Also integrates complementary products in a service ecosystem.

Why:Applies many of the tools from product design to creating human-centered services. Lower barrier to entry for innovation for services compared to mature product categories. Uncovers new markets for business and new value for users.

http://www.nform.ca/tradingcards/service-design

Page 216: Web, Design, and UX Trends for 2008

Cool sites

Page 217: Web, Design, and UX Trends for 2008

http://www.slideshare.net/YouTube for geeks ;-)

Page 218: Web, Design, and UX Trends for 2008

Tapes are back!http://muxtape.com/

Page 219: Web, Design, and UX Trends for 2008

Lost and ffffound.http://ffffound.com/

Page 220: Web, Design, and UX Trends for 2008

What’s the buzz.http://tweetscan.com/

Page 221: Web, Design, and UX Trends for 2008

http://www.thesun.co.uk/sol/homepage/news/article902014.ece

…the minute it he twittered about it, I received it via SMS.

“track travelocity”Another example of human language in the command line

Page 222: Web, Design, and UX Trends for 2008

Better Presentationshttp://www.sliderocket.com/index.html

Page 223: Web, Design, and UX Trends for 2008

Better Video sharinghttp://vimeo.com/

Page 224: Web, Design, and UX Trends for 2008

Thanks!

http://www.jeremyjohnsononline.com/

http://www.dustinaskins.com/


Top Related