• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design Trends For Web Applications

Design Trends For Web Applications






Total Views
Views on SlideShare
Embed Views



4 Embeds 13

http://www.slideshare.net 6
http://wildfire.gigya.com 3
http://www.linkedin.com 2
https://www.linkedin.com 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Design Trends For Web Applications Design Trends For Web Applications Presentation Transcript

  • 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
  • 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
  • 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
  • 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
    • 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
  • 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
  • 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
  • Connectbeam – collaboration through enterprise tagging
    • 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
  • 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
  • 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>
  • 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
  • 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”
  • 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
  • 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?
  • 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
  • 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