World Usability Day: Design Trends For Web Applications

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

Slide 2: 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 2

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

Slide 4: Web Trends 2007 4

Slide 5: 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” 5

Slide 6: Now how much would you pay? 6

Slide 7: Ridiculously cheap hosting services It can get as cheap as $4 ! 7

Slide 8: 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  8

Slide 9: 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 9

Slide 10: Trends in web application design Stability of focus 1. Emergent, faceted navigation 2. Apps becoming more visual, interactive 3. Webtop merging with desktop 4. Network effects and collaboration 5. Rich Internet Applications 6. Simplicity and mini-task efficiency 7. Others? 8. 10

Slide 11: 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) 11

Slide 12: “Task-focused” UI example: lala 12

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

Slide 14: 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  14

Slide 15: 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 efficient building blocks for flash-based UIs. Some forms of visualization are 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  15

Slide 16: 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 through “code snippet”   ability to connect with interesting/useful others  through analysis of interests See  facebook  Linked-in  del.icio.us  Zoho, ThinkFree, Google  16

Slide 17: Connectbeam – collaboration through enterprise tagging Demo video  17

Slide 18: 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  See iGoogle, MyYahoo, Netvibes  Getting closer to the Personal Knowledge Base (2002) reality  Desktop apps (or offline states) 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  18

Slide 19: 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 19

Slide 20: Rich applications and components 20

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

Slide 22: Traditio nal We b Applicatio n Rich Inte rne t Applicatio n • Less waiting • Less bandwidth • Less server load <submit> <submit> <data> • Fewer errors <data> <data> <data> <data> <data> <data> <data> <data> <data> <data> <data> <data> 22

Slide 23: 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  23

Slide 24: 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” 24

Slide 25: 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) – LN using it  Microsoft Silverlight – not quite there yet 25

Slide 26: LexisNexis TotalPatent 26

Slide 27: Many-eyes matrix chart 27

Slide 28: 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, flickr  Character-string matching  e.g. gmail, google toolbar  Being specific vs. letting the computer figure it out  e.g. google "do you mean?“, Google Scholar  e.g. clusty - general search and category drilldown  Others?  28

Slide 29: 29 From tutorial by trulia

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

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

Slide 32: Questions? email:  richard.miller@lexisnexis.com  richmiller1@gmail.com  website:  www.boperation.com  bookmarks and tags  http://del.icio.us/richmiller  Slides for this presentation:  http://docs.google.com/Present?docid=dw42r5c_121g7k5jm  http://www.slideshare.net/rdm121/design-trends-for-web-app  32