Design Trends for Web Applications Rich Miller Research Scientist, LexisNexis World Usability Day – 11/08/2007

The state of web application design We are in the midst of perhaps the most dramatic change in web user interface design history, enabled by… Increased bandwidth More efficient communications e.g. AJAX Better design/development tools e.g. Adobe Flex The web 2.0 movement The lowering barrier of entry

We are in the midst of perhaps the most dramatic change in web user interface design history, enabled by…

Increased bandwidth

More efficient communications

e.g. AJAX

Better design/development tools

e.g. Adobe Flex

The web 2.0 movement

The lowering barrier of entry

The web2.0 triangle create consume connect/share As applications mature, they move toward the middle, e.g. GoogleMaps adding mymaps

Web Trends 2007

One of the millions of new sites appearing… Q: What does this have to do with anything? A: It demonstrates the “lowering barrier of entry”

Now how much would you pay?

Ridiculously cheap hosting services It can get as cheap as $4 !

The lowering barrier of entry The barrier of entry for competing on the web is approaching zero Anyone wanting to start a web-based business can do so with very little startup costs Hosting services are getting ridiculously cheap and it’s not just space you are getting for your money tons of tools come along with the space e.g. Ruby on Rails

The barrier of entry for competing on the web is approaching zero

Anyone wanting to start a web-based business can do so with very little startup costs

Hosting services are getting ridiculously cheap and it’s not just space you are getting for your money

tons of tools come along with the space

e.g. Ruby on Rails

Trends in user behavior, expectations  computing outside work raises expectations for tools used at work  demand for simplicity  demand for collaboration tools that are not so lame, e.g. enterprise 2.0 = blogs/wikis rather than email  transparency, trust and sharing e.g. LinkedIn, Facebook  need for control, participation user customization, remixing voting, weighing in, supporting decision-making See http://goodexperience.com/blog/archives/010138.php In some cases , users… appreciate software-like aspects of websites want to learn from other users’ contributions, share their data with others, and network with other users

 computing outside work

raises expectations for tools used at work

 demand for simplicity

 demand for collaboration tools that are not so lame, e.g. enterprise 2.0 = blogs/wikis rather than email

 transparency, trust and sharing

e.g. LinkedIn, Facebook

 need for control, participation

user customization, remixing

voting, weighing in, supporting decision-making

See http://goodexperience.com/blog/archives/010138.php

In some cases , users…

appreciate software-like aspects of websites

want to learn from other users’ contributions, share their data with others, and network with other users

Trends in web application design Stability of focus Emergent, faceted navigation Apps becoming more visual, interactive Webtop merging with desktop Network effects and collaboration Rich Internet Applications Simplicity and mini-task efficiency

Stability of focus

Emergent, faceted navigation

Apps becoming more visual, interactive

Webtop merging with desktop

Network effects and collaboration

Rich Internet Applications

Simplicity and mini-task efficiency

Stability of focus Web app mental model changing from… The page metaphor New page for each action Frequent task flow interruption …to UIs that keep the user in the same place Bring UI to user, don’t make user go to the UI Yield more stable, controllable user interfaces Enabled by emergence of AJAX and rich internet applications (RIAs)

Web app mental model changing from…

The page metaphor

New page for each action

Frequent task flow interruption

…to UIs that keep the user in the same place

Bring UI to user, don’t make user go to the UI

Yield more stable, controllable user interfaces

Enabled by emergence of AJAX and rich internet applications (RIAs)

“ Task-focused” UI example: lala

From tutorial by trulia “ Task-focused” UI example: trulia

Emergent, faceted navigation The proliferation of user-generated content has given rise to… emergent navigation systems, or folksonomies they “emerge” from metadata supplied by users, e.g. tags Tag-oriented data is a natural fit for faceted browse approaches Folders are “tired”, facets are “WIRED” See del.icio.us (or video ) and amazon See Elsevier Engineering Village See Nature Connotea

The proliferation of user-generated content has given rise to…

emergent navigation systems, or folksonomies

they “emerge” from metadata supplied by users, e.g. tags

Tag-oriented data is a natural fit for faceted browse approaches

Folders are “tired”, facets are “WIRED”

See del.icio.us (or video ) and amazon

See Elsevier Engineering Village

See Nature Connotea

Apps becoming more visual and interactive Many recent advances in both… chart/visualization design and… rendering technology Adobe Flash has blown open the potential design space and Adobe Flex offers building blocks Some forms of viz, becoming ubiquitous Basic charts Tag clouds Network diagrams See many-eyes multiple charts and visualizations Google Finance timeline VisualComplexity network diagrams yahoo pipes programming logic lastfm charts and quilts

Many recent advances in both…

chart/visualization design and…

rendering technology

Adobe Flash has blown open the potential design space and Adobe Flex offers building blocks

Some forms of viz, becoming ubiquitous

Basic charts

Tag clouds

Network diagrams

See

many-eyes multiple charts and visualizations

Google Finance timeline

VisualComplexity network diagrams

yahoo pipes programming logic

lastfm charts and quilts

Network effects and collaboration  integration with, leveraging of the web and its resources e.g. Why build your own video tool when you can embed YouTube videos in your site? same for news/data feeds, bookmarking, “digging,” and many other services gadgets and badges enable resource sharing See Newser integrated into boperation  ability to connect with interesting/useful others through analysis of interests See facebook Linked-in del.icio.us Zoho , ThinkFree , Google

 integration with, leveraging of the web and its resources

e.g. Why build your own video tool when you can embed YouTube videos in your site?

same for news/data feeds, bookmarking, “digging,” and many other services

gadgets and badges enable resource sharing

See Newser integrated into boperation

 ability to connect with interesting/useful others through analysis of interests

See

facebook

Linked-in

del.icio.us

Zoho , ThinkFree , Google

Connectbeam – collaboration through enterprise tagging Demo video

Demo video

Webtop merging with the desktop The line between desktop and online is blurring Recent/ongoing flood of new server side applications Significant proliferation of server-side apps, yielding many benefits, e.g…. freedom of place and device collaboration revision histories other “network effects” Cyberspace homes being established As predicted by yours truly  (Personal Knowledge Base, 2002) See iGoogle , MyYahoo , Netvibes Desktop apps or offline states now emerging from web apps For the “occasionally connected” Tools available to convert web apps into desktop apps e.g. Adobe AIR used to create ebay desktop app

The line between desktop and online is blurring

Recent/ongoing flood of new server side applications

Significant proliferation of server-side apps, yielding many benefits, e.g….

freedom of place and device

collaboration

revision histories

other “network effects”

Cyberspace homes being established

As predicted by yours truly  (Personal Knowledge Base, 2002)

See iGoogle , MyYahoo , Netvibes

Desktop apps or offline states now emerging from web apps

For the “occasionally connected”

Tools available to convert web apps into desktop apps

e.g. Adobe AIR used to create ebay desktop app

Rich Internet Applications (RIAs) Common characteristics more interactive, compelling user experiences exploit selective asynchronous data transfer rich media integration real-time collaboration and messaging easier integration with services/APIs can appear as desktop apps for “occasionally connected” RIA components can be embedded in a HTML app RIAs represent the transcending of the “page metaphor” within the web user experience e.g. users no longer need to go to different places to accomplish different tasks

Common characteristics

more interactive, compelling user experiences

exploit selective asynchronous data transfer

rich media integration

real-time collaboration and messaging

easier integration with services/APIs

can appear as desktop apps for “occasionally connected”

RIA components can be embedded in a HTML app

RIAs represent the transcending of the “page metaphor” within the web user experience

e.g. users no longer need to go to different places to accomplish different tasks

Rich applications and components

User Experience Evolution WEB APPLICATIONS CLIENT/SERVER MAINFRAME Text UI Integrated media GUI Local Global 1992 1998 2004 RICH INTERNET APPLICATIONS

<submit> <data> <data> <data> Rich Internet Application Traditional Web Application Less waiting Less bandwidth Less server load Fewer errors <submit> <data> <data> <data> <data> <data> <data> <data> <data> <data> <data>

Less waiting

Less bandwidth

Less server load

Fewer errors

Why use RIAs? Better user experience Users like them and they better enable task flow They enable tasks that HTML cannot Generally superior for… Finding and manipulating content Completing transactions Consuming multimedia, viewing visualizations It is time to move past the page metaphor Re-use of UI design and engineering Allow for component extension and customization Much open source code available Easier to manage UI consistency UI consistency rules can be built into components

Better user experience

Users like them and they better enable task flow

They enable tasks that HTML cannot

Generally superior for…

Finding and manipulating content

Completing transactions

Consuming multimedia, viewing visualizations

It is time to move past the page metaphor

Re-use of UI design and engineering

Allow for component extension and customization

Much open source code available

Easier to manage UI consistency

UI consistency rules can be built into components

Usability Issues with RIAs Accessibility Far from perfect, but people are working on it Book-marking Also not quite there, but people are working on it Desktop design bias of RIA dev tools Beware of the Uncanny Valley of UI Design Robots too similar to humans begin to repel humans ?= web apps that look like desktop apps repel users? in other words, “don’t force it” Avoid falling into trap of applying a desktop look-and-feel Technical limitations conditions have yielded less-complex designs … so let’s not blow it now that we have more power use the best of HTML with the best of RIA, e.g. Google Finance Ray Valdez: “a mistake to apply the technology in a monolithic manner”

Accessibility

Far from perfect, but people are working on it

Book-marking

Also not quite there, but people are working on it

Desktop design bias of RIA dev tools

Beware of the Uncanny Valley of UI Design

Robots too similar to humans begin to repel humans

?= web apps that look like desktop apps repel users?

in other words, “don’t force it”

Avoid falling into trap of applying a desktop look-and-feel

Technical limitations conditions have yielded less-complex designs

… so let’s not blow it now that we have more power

use the best of HTML with the best of RIA, e.g. Google Finance

Ray Valdez: “a mistake to apply the technology in a monolithic manner”

What are the RIA tools options? AJAX-based toolkits Original RIA-enabling technology Toolkits assembled as usage increased Examples Dojo toolkit Google Web toolkit Client runtime based Adobe Flash/Flex/AIR(Apollo) – rockin! Microsoft Silverlight – not much there yet

AJAX-based toolkits

Original RIA-enabling technology

Toolkits assembled as usage increased

Examples

Dojo toolkit

Google Web toolkit

Client runtime based

Adobe Flash/Flex/AIR(Apollo) – rockin!

Microsoft Silverlight – not much there yet

LexisNexis TotalPatent

Many-eyes matrix chart

Simplicity and mini-task efficiency Main benefit = ease of learning and preservation of task flow Simple interfaces based on basic, uncluttered feature sets Many newfound interactions enabled by AJAX Staying in place, editing in place More direct interaction less select then hit far-away menu or button more editing in place and selecting neighboring link e.g. many eyes chart-viewing options, Google Finance timeline slider More visibility of commands/options less burying in menus e.g. gmail Character-string matching e.g. gmail, google toolbar Being specific vs. letting the computer figure it out e.g. google &quot;do you mean?“ e.g. clusty - general search and category drilldown Others?

Main benefit = ease of learning and preservation of task flow

Simple interfaces based on basic, uncluttered feature sets

Many newfound interactions enabled by AJAX

Staying in place, editing in place

More direct interaction

less select then hit far-away menu or button

more editing in place and selecting neighboring link

e.g. many eyes chart-viewing options, Google Finance timeline slider

More visibility of commands/options

less burying in menus

e.g. gmail

Character-string matching

e.g. gmail, google toolbar

Being specific vs. letting the computer figure it out

e.g. google &quot;do you mean?“

e.g. clusty - general search and category drilldown

Others?

From tutorial by trulia

Example web applications Data feed mash-ups Cool, organic user interface yahoo pipes Data set sharing Visualization many eyes Relationships and connections ; facebook hosting mini-applications Enterprise wikis Enterprise tagging, folksonomies, people connections Facebook / Linked-in Socialtext Connectbeam Hybrid application with HTML + RIA component Google Finance Revolutionary bookmarking, tagging and searching system Led the way for emergent, faceted navigation systems del.icio.us amazon Refreshing approaches to solo productivity apps Buzzword an RIA built with Adobe Flex Buzzword Slideshare Jumpcut Server-side office suites Ease of collaboration Ease of access Zoho Office ThinkFree Office Google Apps / iGoogle Category/Characteristics Applications

Data feed mash-ups

Cool, organic user interface

yahoo pipes

Data set sharing

Visualization

many eyes

Relationships and connections ; facebook hosting mini-applications

Enterprise wikis

Enterprise tagging, folksonomies, people connections

Facebook / Linked-in

Socialtext

Connectbeam

Hybrid application with HTML + RIA component

Google Finance

Revolutionary bookmarking, tagging and searching system

Led the way for emergent, faceted navigation systems

del.icio.us

amazon

Refreshing approaches to solo productivity apps

Buzzword an RIA built with Adobe Flex

Buzzword

Slideshare

Jumpcut

Server-side office suites

Ease of collaboration

Ease of access

Zoho Office

ThinkFree Office

Google Apps / iGoogle

Trend strength by site H H H M H M H yahoo pipes M L H M H M M many eyes L L M H L M L facebook Linked-in L M L L H L M Google Finance L L L M L H L del.icio.us H H M M M L H buzzword H H H H L L H Zoho ThinkFree Google mini-task efficiency RIAs webtop desktop networkcollabo  viz faceted nav stability of focus

Questions? email: [email_address] [email_address] website: www.boperation.com bookmarks and tags http://del.icio.us/richmiller Slides for this presentation: Insert URL here

email:

[email_address]

[email_address]

website:

www.boperation.com

bookmarks and tags

http://del.icio.us/richmiller

Slides for this presentation:

Insert URL here