Original post – 06.24.2007
I recently attended the Web 2.0 expo conference in San Francisco, CA. The Web 2.0 Expo is companion event to the web 2.0 summit put on by O’Reilly media. The event was targeted to web professionals, entrepreneurs, IT and marketing to discuss the next generation of the web. The event featured a host of key note speakers and targeted workshops to discuss, share, and present what’s hot and how to leverage the new web.
The event was packed full of web development professionals and provided several interesting workshops concerning the new technology and information concerning what’s new in the market and how people are using this technology to drive the second coming of the web.
Here are my notes from the different workshops and keynotes that I attended:
Workshop – The new Hybrid Designer
Design and User Experience Track
Emily Chang, Co-Founder and Principal, Ideacodes
Kelly Goto, Principal and Founder, gotomedia
Richard MacManus, Read/WriteWeb
Chris Messina, Citizen Provocateur, Citizen Agency
Web design may still be in its infancy compared to other design fields, but the changes have often occurred in leaps and bounds — whether it’s the adoption of a new technology or a social shift. Modern web design requires the coding savviness of a developer coupled with the aesthetics and user awareness of a designer. What does this New Creative look like? What skills has she picked up that are essential for competing in today’s changing job market, and how does she stay current on the latest trends? This panel will explore how the advent of the social and participatory Web has changed the role of the designer, and provide insight into what you need to know today to design for tomorrow’s web.
The new hybrid designer has the knowledge and expertise to move from 1.0 to 2.0 and the lines are blurring between designer and developer. The most beneficial job knowledge contains a key eye for design as well as the technical knowledge around technical and architecture aspects of development.
In the old world of web 1.5 the emphasis was on the Interface , User Interactions, and benefits gained from separation of the Content and presentation using CSS.
In the new world of web 2.0 the focus is on the new technologies around AJAX, XML and content separation. This new world on the web has brought about the concept of “placelessness” which content can be ported to RSS, mobile, web, into blogs and really to any separate device.
This new hybrid design role focuses on :
1. XML
2. Web Services
3. Mixing Content
4. Emergent Navigation
5. Meta Data
6. Shift to programming
Skills of the hybrid designer
Know the communication technology lingo
Proactive Researcher
Encourage technology education
Commitment to solve problems
User Centric Design Principles
Know how information flows
Agile Development Knowledge
Technical skills and gateway tools of the hybrid designer
ASP
PHP
Droople
Open Source
Ruby on Rails
AJAX
CSS
Semantic Markup
RSS
API’s
Agile Development
Agile development is the key to successful development methodologies in today’s web 2.0 world. All the panel members agreed that successful corporate technology groups were using some blend of agile development techniques for their online and web development. Mockup and prototypes are the basis for agile development and provide the visual medium necessary for web development today. The old way of using site maps to show old static pages on the web is out and is being replaced by using task flows to show the interaction of today’s web 2.0 sites and pages.
Site maps
Sitemaps show overall site structure and relationships of content. For larger sites may document patterns of organization that are applied across similar section, instead of account for every single page. Document site structure to ensure that all content is account for. Guides navigation design, site index, and content migration. Good for hierarchical organization but is less effective visualizing very large sites, facets or tags.
Task or process flows
Diagram to show process that includes conditions, branching and logic. Focus is on defining possible user behavior and corresponding business rules. Documents how a person can use the system to accomplish different tasks. Ensures that error conditions and alternate paths are considered.
Discussions led to tools and frameworks that are in play in today’s web 2.0 market.
The first discussion centered around Adobe’s new suite of tools named Apollo. Apollo is the code name for a cross-operating system runtime being developed by Adobe that allows developers to leverage their existing web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy rich Internet applications (RIAs) to the desktop.
Apollo
Apollo enables developers to create applications that combine the benefits of web applications – network and user connectivity, rich media content, ease of development, and broad reach – with the strengths of desktop applications – application interactions, local resource access, personal settings, powerful functionality, and rich interactive experiences.
http://labs.adobe.com/
Silverlight
The second discussion lead to Microsoft’s new product line Silverlight which is a new set of tools. Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web.
Silverlight is the catch up strategy for Microsoft to address competition to Adobe’s flash product for the web.
http://www.microsoft.com/silverlight
Ruby on Rails
The third discussion talked about the Ruby on Rails applications that is a web application framework that aims to increase the speed and ease with which database driven web sites can be created and offer skeleton code frameworks that can be used from the outset. Often shorted to Rails or ROR, this is an open source project written in the Ruby programming language using rails framework that uses the model-view-controller design pattern.
Mashups
The forth discussion centered on the concept of mashups which means a website or web application that combines content or applications from more than one source. Content that is used by more than one source is typically sourced from a third party via a public interface of API. Other methods of sourcing content include web feeds (RSS or Atom), web services and screen scraping. Many sites are experimenting with mashup technologies such as google, ebay, amazon, flickr, and yahoo.
Several sites are using mashups to create a location mash up using google maps through google API set. A few examples are:
http://www.plazes.com/
http://www.trulia.com/
AJAX
The fifth topic discussed was concerning AJAX. AJAX is the application of animated navigation to the web and is the newest technology to change the user experience and interface on the web. More and more companies in the web 2.0 world are beefing up their knowledge base and implementing leading edge changes to the technology of the web sites enabling the new user friendly interface that is pleasing to use and easy on the backend.
AJAX Wikipedia definition
AJAX – shorthand for “Asynchronous JavaScript and XML“, is a development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page’s interactivity, speed, functionality, and usability. Ajax is also usable on many operating systems and architectures as it’s based on JavaScript and XML.
The core justification for Ajax style programming is to overcome the page loading requirements of HTML/HTTP-mediated web pages. Ajax creates the necessary initial conditions for the evolution of complex, intuitive, dynamic, data-centric user interfaces in web pages.
The most obvious reason for using Ajax is an improvement to the user experience. Pages using Ajax behave more like standalone applications than typical web pages. Clicking on links that cause the entire page to refresh feels like a “heavy” operation. With Ajax, the page often can be updated dynamically, allowing a faster response to the user’s interaction.
Some disadvantages to AJAX is the dynamically created page does not register itself with the browser history engine, so triggering the “Back” function of the users’ browser might not bring the desired result. Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application. Network latency — or the interval between user request and server response — needs to be considered carefully during Ajax development. Websites that use Ajax to load data which should be indexed by search engines must be careful to provide equivalent data at a public, linked URL and in a format that the search engine can read, as search engines do not generally execute the JavaScript code required for Ajax functionality. This problem is not specific to Ajax, as the same issue occurs with sites that provide dynamic data as a full-page refresh in response to, say, a form submit (the general problem is sometimes called the hidden, or deep web). Ajax relies on JavaScript, which may be implemented differently by different browsers or versions of a particular browser. Because of this, sites that use JavaScript may need to be tested in multiple browsers to check for compatibility issues. It’s not uncommon to see a JavaScript code written twice, one part for IE, another part for Mozilla compatibles. Many web analytics solutions are based on the paradigm of a new page being loaded whenever new or updated content is displayed to the user, or to track a series of steps in a process such as a check-out. Since Ajax alters this process, care must be taken to account for how to instrument a page or a portion of a page so that it can be accurately tracked. Analytics systems which allow for the tracking of events other than a simple page view, such as the click of a button or link, are the ones most likely to be able to accommodate a site which heavily utilizes Ajax.
Other web sites mentioned:
http://www.stopdesign.com/
http://www.gmail.com/
http://www.flock.com/
http://www.twitter.com/
http://www.conferenceer.com/
http://www.9rules.com/
http://developer.apple.com/
Workshop – Embracing the Chaos: Designing for and with the Community
Mike Beltzner, UX Lead Mozilla
A big part of The Web Arts is community. But community is a sticky proposition that inherently reduces the control you have over your content, your brand, and other elements that were once the dominion of top-down hierarchies. How can you open up your design process to be more inclusive of community feedback without feeling overwhelmed or indignant about the criticism you get? How can you learn to work with outsiders and folks who might not share the same gestalt as you? And, on the flip side, what can open source projects learn from designers — what’s missing from their process that designers could offer? Whatever your role or process, how do you embrace the chaos without losing your mind?
Mike lead into the workshop by outlining a few goals:
Listen to your community – separate the signal from the noise
Lead your community – state the commanders intent
Let your community play and experiment
Mozilla has a feedback site that is used for all feedback comments. This is fed into site used for contributors to the mozilla project. The feedback is published to a newsgroup or mailing list and wiki site in which contributors to the project can comment and input information that is used to solve other problems. The site is called Hendrix since Jimi Hendricks was credited with using feedback in the creation of music.
Usage of an on going feedback tool such as this could reap some big savings from JPMorgan’s way of capturing all emails with any questions or comments and having to “work and respond” to each and every email. Could use as a way to cut back on email staff and still provide feedback avenue for participants.
Book suggestion – Down and Out in the Magic Kingdom by Cory Doctorow
Big Idea is to Apply Order
Not everyone can approve change
Need strong leadership
Open Source Design
Easier to comment on the design than the code
Camps are formed Quickly in terms of preference
Identify and evaluate smart contributors
Educate around the design principles
Leadership Principles
Set your structure for design
Create small teams with responsibility to specific areas of interest.
Evaluate discussion with data and research whenever possible to stop the preference debates
Treat disagreements as negotiations
Mozilla publishes a online wiki to post all information going on in the development world with the company. Great example of wiki usage to collaborate and share information with a group, committee, or organization.
Listen better
Provide more tools to allow you to listen
Use simple tools like sad face or happy face choice for feedback tools on new functionality
Lead by Design
Blog
Document UI
Document Process
Document Research and publish
Gets people into the right mindset
Workshop – Microformats, Much more than just promise
John Allsopp, CIO Westciv
Microformats are community-generated standards for identifying types of data in normal web pages. How do these rapidly spreading conventions make it easier to design interactions for the Web? How can you create scripts or stylesheets to leverage these simple formats, and what new applications exist that haven’t been explored?
The main concept with Micoformats is to make information data Human & Computer readable.
Timeline of concepts
1993 – The Web was like a book – Finding information was the objective
2005 – The Web turned more like radio – Getting information delivered.
2008 – The Web will become more of a switchboard to data and information.
Microformats are small applications that will push data and information in a community – generated standard of information. Aggregators such as magnolia, edgio and revish are using these as well as Publishers like Geo microformat. RSS was a early adopter of microformats providing aggregation feeds of news and information.
Some examples are:
hCalendar = Calendar and Events – many are using for event planning
hCard = People and Organizations – LinkedIn and many are using for Contact information
hAtom = magnolia provides News
hResume = LinkedIn provides Resumes
hReview = Opinions, Ratings and Reviews (VoteLinks)
iCal – apple Calendar entry
RSS icons should all use the standard orange icon. Contacts, Location and Calendar formats should all use standard icons.
Microformat usage on the Web:
Use open standards
Make Human Interactions easier
Micro Pollination
Mozilla FireFox 3 using tagging and idea to change the icon cursor on rollovers.
http://www.mag.nol.ia/
http://www.microformatique.com/
http://www.microformats.org/
http://www.opentable.com/
http://www.bloglines.com/
http://www.upcoming.com/
http://labs.mozilla.com/
Workshop – Moving from 1.0 to 2.0: Philosophies and Structures for change
Scott Hirsch, Founder, Management Innovation Group Matt D. Jones, Concept Development Manager, Nokia Lionel Menchaca, Digital Media Manager, Dell Jeremiah Owyang, Director of Corporate Media Strategy, PodTech.net Jeffrey Veen, UX Manager for Content, Collaboration, and Community, Google, Inc.
The 2.0 web world is more than just embedded technology – it is a philosophy. Companies who embrace this thinking are more flexible, agile, and innovative in their strategy and approach, but moving in this direction means rethinking structure, management style, workflow, and culture. How teams are structured, educated, and implemented in your organization is key. Are you a design firm, individual freelancer, or corporation trying to migrate past ‘old-school’ thinking and move yourself, management, or team into a more progressive era? Come hear how others have made innovation a priority– through carefully guided leadership and an environment that fosters creative thinking and collaboration.
Philosophy is the designers and engineers are now disruptors.
Panel talked about creating a wiki for industries which could become you live focus group dedicated to your development.
Digg.com is pioneering the new concept of letting the community decide what information and ideas get moved to the top.
One idea discussed expressed that Marketing with its corporate control is a thing of the past. User Based controls allow you to gain credibility and the customers respect.
Design and developer roles have moved to more of an educator and cheerleader role for new technologies. Community Manager is a new job role creeping into the web 2.0 environment.
Google development has been using consumer interest, competitive information and compassion to drive products. Developers should always strive to create language that matches a person / group. This will help to drive credibility. You need to interpret web 2.0 features for your specific company. Technology needs to be there but not the end all. One of the best things to do is to experiment with free tools to prove concepts and get buy in for direction.
Wiki’s – internal
Blog – external
Social community wish list – external
Agile development (not waterfall) – internal
Beauty of accessibility is enabling us to rewire our brains to think differently. Web standards is focusing on :
1. Separation – small groups loosely coupled
2. Progressive Enhancement
o Structure – content is king using html, markup
o Add presentation layer with CSS
o Add behavior with DOM Scripting and external java scipt
Development needs to apply structure first and then look at bandwidth, benefits, and process. Flexibility will allow you to serve up content to people who don’t even have CSS, Images or JavaScript.
Term universality applies to frameworks that are set up to work with mobile, search engines (search bots) and screen readers.
Story was shared concerning the first global effort to standardize something was done with the screw. Now there is the http://www.w3.org/.
Concepts of Open data dominated the discussion and included information on RSS, API and XHTML.
http://machinetags.org/
http://adactio.com/ – presenters blog
Corporate Makeover
Wells Fargo has outstanding earnings, growth and margins. They have a time tested business model and customer centric policy has made this company a success. Their business model is more like the retail model with common distribution. Customer can choose and cross selling is a big focus.
Business model has three main sections that come together and create some overlap and conflict. Customer Relationship management, product innovation and infrastructure management are built to manage operations efficiently.
Wells is best at customer relationship management. They should keep doing this but they should focus on opening up the product innovation to let 3rd party and user community influence the builds. Infrastructure should share and reuse data.
Suggested that Wells take the progressive insurance model to apply at wells. This would allow site to show other companies mortgage rates along with their own to gain credibility and respect.
Wells should help answer the question concerning “How am I doing?” Benchmarking with peers on money and rates obtained.
Compare rates you get back and allow a section for peers to make bids on loan offers. This idea is peer to peer financing. You could post how much you want to borrow and others could ask questions and loan you money.
Create a friends section that allows you to communicate online. Allow for community ratings of products and services.
Three big ideas:
1. Compliment what you have
2. Collective Intelligence – lets customers help each other
3. Aggregate data – show other options.
Idea to give users a gage by showing a credit profile. Include benchmark with peers such as, “Your credit report is better than 75% of your peers.” Show people testimonials of products and services.
WAMU
Blue whale labs took a local bank site and applied some web 2.0 practices to it. Here are some examples of changes:
1. First items was that most people come to see balance and that’s it. So the big idea was to make the balance updated to a larger font and style to see more easily.
2. Redo nature of data to have a time centric approach to the data. Graphs and sliders to offer different views across time with data. Use rollups and sorting to make data information easier to obtain.
3. Use AJAX to have each data line contain a link that when you rollover will create a pop up with bigger and more detail
4. For each transaction allow the ability to add notes, keywords, tags and maps.
Experience Bank (loosely based on Bank of America)
Site is primary task focused and set up to pay bills. The big idea is to look at the same type of data in different ways.
Incorporate historical views
Allow quick sort of data
Allow categories and changes to user tags
Design established for bank to be more fluid in presentation. Using AJAX and other tools to:
ü Reduce latency (no wait policy)
ü Move Seamlessly and guide visually
ü Use animated navigation to avoid page refresh that breaks concentration.
ü Vary presentation of same stuff
ü Content before the controls helps the user think about the task not the UI
ü Delight comes from something working better – not recycling the old system
Workshop – Measuring the web 2.0 Track
Speaker from UNICA.com company
Web 2.0 isn’t just page tracking anymore. Its:
Event tagging functionality
Flash/Flex Apps/Movies/Action scripting
AJAX/DHTML/JavaScript Tagging
Need to be able to create custom reports with in your web tracking tool to track web 2.0 applications. Target for application tracking and/or feature tracking.
Study event streams to gain information on what to further usability test to resolve issues.
Another big concept was to not ignore offline activity. Bridge the gap between online activity vs what they do with other touchpoints.
http://www.brightcove.com/
http://www.digg.com/
http://www.flickr.com/
http://www.twitter.com/
Workshop – Ebay
What goes into eCommerce?
Supply Chain
Payment
Marketing
Delivery
Communication
Security/Trust
Answering the How…
Component-based design
Fine-grained tracking
State-of-the-art analytics
Grid management framework
Workshop = XP at Staples and Pixtal Labs
Three things that we do in XP that any team should do:
Weekly Demos
Daily Standups
Pairing
Caution – may provide resistance and hostility
The scale of the development process is gigantic. Starting from Large Scale down to small scale here is a recent to do list:
Concept
Business Goals
User Tasks / Motivations
Site Flow & Wayfinding
Supporting systems
Navigation
Widgets
Global Styles
Language
Buttons
Graphics
Fonts
The hard problems are people problems relating to…
(mis) communication
(not enough) feedback
(not fully) comprehending constraints
The hard problems are process problems relating to…
deadline and resource management
design flexibility in the face of frequent change
Where can we find a people – oriented process and process oriented people?
Launch Pad Session
Luke Sontag, President, Vidoop Dmitry Dimov, Cofounder & Product Chief, Swivel Mike McCue, President, CEO & Co-Founder, Tellme Brian Mulloy, Co-founder and CEO, Swivel
Lauch pad session were concerning the product pitches of three new products by companies.
Swivel – Traditionally data is bad and photos and videos are good. Company is a data integrator with private data services like Idata. They webize data, do data comparisons, breakdown data source and partner with OECD. They had some cool charting capabilities for stock prices over time. Etc.
Vidoop – Pushing envelope in the authentication industry. The old vault for authentication used to be the User ID and Password. The new vault for authentication is moving toward two things:
Multifactor Authentication
Combating phising and keystroke logging
Vidoop company was tackling a new authentication method to move to a new vault credentials making the new authentication user friendly by making a non text log on. Process was to :
Enter User ID
Receive a series of image selections with letters on the images
If from a different workstation – Type in a out of band password using image selections
Tell me company was a recent purchase by Microsoft. Their product was integration with mobile phone and internet services. Using voice xml access http://studio.tellme.com/ or call 1-800-555-tell. If you call them up and tell them you are in Kansas City and want to eat the best BBQ closest to you. The would text a message back to your cell phone with a browser based app and map with directions from your location.
Key Note Presentations
State of the Web 2.0: Measuring the Participatory Web Bill Tancer, General Manager, Global Research, Hitwise
In a Web 2.0 Expo exclusive, Bill Tancer, general manager of global research for Hitwise, provided insight into the current “State of the Web” for popular and growing Web 2.0 sites, as well as appropriate methods for measuring Web 2.0 site growth. Using the Hitwise sample of over ten million U.S. internet users, Tancer also revealed results of a recent research study on demographic and psychographic differences between “traditional” and Web 2.0 internet users.
Hitwise manages the largest worldwide sample on the Internet. He talked a lot about Participatory Web Measurements. Web 2.0 over the last two years has spurred a huge growth increase in activity among sites supporting web2.0 functionality. Sites like Wikipedia and Photo sites have had incredible growth in terms of users and volumes.
Participation vs. Users on web 2.0 sites
90 % are just viewers
9 % are highly involved contributors
1 % are creators
http://www.wikipedia.com/ reports:
18-34 age group – more viewers
35-55 age group – more editors
http://www.youtube.com/ reports:
18-24 age group – viewers
25-55 age group – uploaders
55+ age group – viewers
Male vs Female is about split 50/50 for viewers
Male vs Female is about 80% male and 20% female for uploaders
HE talked about the product lifecycle showing innovators, early adopters and contributors in the early stages.
He mentioned some sites a having money and brains behind them:
http://www.yelp.com/
http://www.stumbleupon.com/ – this is a cool site
http://www.veoh.com/
http://www.weeworld.com/
http://www.imeem.com/
http://www.ilovedata.com/ – Hitwise blog
High Order Bit David L. Sifry, Founder and CEO, Technorati, Inc
Sifry talk about the impact of the Blogosphere. Blogging has become so huge that 1 new blog is being created every second. 1.5 million posts per day and 16 new posts per second.
Facts:
72 million people have a blog
15.3 million people are using and have active blogs as of March 2007
Out of the top 100 most linked to web sites – 22% are blogs with Mainstream media being most of them
Bloggers Mind set
Post at least once a day
Stay at it – bloggers that have been at it for at least 1-2 year are most influential
Don’ be intimated
Languages:
36% of bloggers – Japanese
33% of bloggers – English
30% of bloggers – other
With the new live web tagging is a concept that has also increased significantly. Author created and community created.
Google keynote:
Eric Schmidt in Conversation with John Battelle Eric Schmidt, Chairman of the Board of Directors, Google, Inc. & Novell, Inc.John Battelle, Program Chair, Web 2.0 Conference; Chairman & Publisher, Federated Media Publishing
Big announcement was that google is announcing their online document and spreadsheet capability. The question came up right away around the competition up against Microsoft office suite. Schmidt shrugged off the notice of competitiveness and seemed to try to focus on the sharing and collaboration benefits of a free online answer to word and excel.
Schmidt talked about the acquisition of http://www.jotspot.com/ and http://www.doubleclick.com/ for 3.1 billion dollars.
Google focus:
Super Computer build out
End Users
Advertising – applying the art and science of relevance and efficiency
Culture
Question being raised with doubleclick’s buy out is, “Does google know to much?” Schmidt focused on the opt in features of his products and what it means to opt in vs. opt out. The Antitrust comments were also shrugged off but the news will tell us what comes form the whole situation.
Talked about youtube pirates issue that was brought up. Mentioned the you tube has responded to alleged copyright violations by creating a claim you content tools and way to take off at risk material.
Talked about the importance of Net Neutrality and the Mobile space being the next frontier. Talked about Amazons new web based platform business and that it is great and they are doing it in a different way. He emphasized the local space market will continue to grow. Search, targets, advertisement will all be a part of it.
He mentioned the biggest online thing right now is determining Scaling issues where we need a better global plan.
Mobile 2.0
Ajit Jaokar, CEO, futuretext
Mike McCue, President, CEO & Co-Founder, TellmeIlkka Raiskinen, SVP, Multimedia Experiences, NokiaPaola Tonelli, Head of Center, Group Research and Development, Vodafone Spain
While so many terms have ’2.0’ suffixed after them today, Mobile 2.0 can be defined simply as: Next generation access (network) and Next generation data services which are possible due to the evolution of the network. The core telecoms network is being transformed through technologies like IMS, WiFi, Wimax, VOIP and others. As the mobile network evolves, it is aligning itself with the Internet i.e. becoming Open. Intelligence is also shifting to applications i.e. edge of network and we are seeing the dawn of entirely new services which were not possible even a few years ago. This session discussed Mobile 2.0 i.e. the evolution of the network and the consequent emerging applications