The sheer numbers of pageviews and visitors were gigantic, in November, Comscore reported:

News Corp.’s MySpace recorded 38.7 billion U.S. page views last month, compared with 38.1 billion for Yahoo, according to comScore Media Metrix. MySpace’s growth was 2% over October and triple the 12.5 billion recorded in November 2005.

38.7 monthly billion pageviews is roughly 900,000 pageviews each second. Later there was talk about MySpace inflating the number of pageviews, while Yahoo tried to lower the number by using AJAX to load new content into pages (which obviously doesn’t qualify for a page view).

Now, the February numbers are somehow modified to adjust for this new situation, according to this article on “Mashable” by PeteCashmore:

The problem, of course, is that MySpace is a pageview factory, while Yahoo is trying to improve the user experience through the use of ajax, which reduces the number of pageviews per user. Stat companies rarely admit their stats are wrong, but ComScore had the guts to change direction: we got a press release to say they’ve created a new “Visits” metric for measuring user engagement.

They’re now measuring the “average visits per visitor” and unique visitors. They’ve also been fairly apologetic to Yahoo, emphasizing the effect that ajax had on Yahoo’s rank in particular. And the change in positions is pretty startling for the month of February 2007: Yahoo comes first using both visit-based metrics, while Fox/MySpace drops to 6th place in uniques during February 2007. It comes in 7th for average visits per visitor.

An interesting lesson here, I think:

User experience is a unique measurement, not related to any traffic measurement. More pageviews does not necessarily mean better user experience or more satisfied users. In my opinion, go for the best user experience, the best user satisfaction, and don’t worry about other metrics.

More info:

• USA Today: ComScore: MySpace tops Yahoo in November
• The Next Net: Page Inflation at MySpace?
• Mashable: MySpace vs Yahoo – ComScore Backs down
• Justaddwater.dk: Definition of User Experience Revisited

Technorati Tags: yahoo, myspace, traffic, analysis, visitors, pageviews, user experience, uxp, web statistics, stats

I can highly recommend using this calendar in projects as wallpaper. But good luck on using it for actual planning.

This year’s version contains advice regarding AJAX, overwhelming use of graphics, advertising, and much more.

Download Bad Usability Calendar 2007

• English (560KB PDF)
• Norwegian (1.2 MB PDF)
• Danish (3.3 MB PDF)

Related articles:

• Thomas Baekdal: Bad Usability Calendar – in Danish
• Netlife Research: Bad Usability Calendar 2007 is here!
• Justadddwater.dk: Bad Usability Calendar 2007 Finally Ready
• Justaddwater.dk: Bad Usability Calendar (2006)

Technorati Tags: usability, accessibility, calendar, anti-usability, user experience, ux, uxp, humor, ajax

Below some notable quotes on AJAX. I really like his style a lot. Also, I can recommend his talk from 2005 on high performance systems (via IT conversations), where he mentions that one Google blog has experienced up to 120,000 hits per second.

A good tool should be transparent, should execute actions in less than half a second and should involve interactive bottom-up learning, “because you change your mind as you go,” he said.

Natural language was billed as a replacement for the GUI, but it failed to achieve that. It also failed as a query language for databases, as a calculation language for spreadsheets and as a document creation language, Bosworth said. “Humans expect a human level of comprehension,” he said, noting that database queries and spreadsheet formulas have to be exact.

But natural language got a second life, too, triggered in part by Microsoft Help, and the next step turned out to be Google, Bosworth said. The trick to being successful with natural language is to “start with a fuzzy problem, one no human can resolve anyway…orient it around search, and the magic is just in the ranking,” he said.

Drawing on the lessons he learned from the initial failure of AJAX, Bosworth admonished developers to think about user activity. “Ask what the frequency is,” he said. “Unless an app is used over and over each day, make it simple, even if more clicks [or] pages are required.”

Also, “Ask how long it takes to execute a requested task,” he said. “If it takes more than 2 seconds, consider not providing the task or splitting it up into small, user-controlled tasks.”

Moreover, “sites where people don’t go a lot don’t need AJAX-style UIs [user interfaces],” Bosworth said. “If we started building AJAX for AJAX’s sake we wouldn’t be doing our customers any favors.”

Technorati Tags: google, ajax, adam bosworth, microsoft, ie4

Direct download: Bad Usability Calendar 2007 (1.2 MB PDF)

Very nice to see that the calendar actually is released under a Creative Commons license, so you can translate it into you native language as long as you keep the reference to NetLife Research.

Related posts:

• Bad Usability Calendar (2006)
• Bad Usability Calendar 2007 open for proposals

Technorati Tags: usability, accessibility, calendar, anti-usability, user experience, ux, uxp, humor

My favorite of Chris McEvoy’s work is the Jakob Nielsen spoof article “Why Ajax Sucks (most of the time)” where he basically just replaced “Frames” with “Ajax” in the original 1996 article “Why Frames Suck (Most of the Time)“.

Technorati Tags: usability, anti-usability, chris mcevoy, jakob nielsen, ajax, frames, usabilitymustdie

From UI 11 Conference, Cambridge, Boston October 9, 2006. David’s and Bills presentation notes available.

Macromedia coined the term “Rich Internet Application” originally because they wanted to create buzz around Macromedia Flash MX.

Usability tests often raise the Q: “Why doesn’t this work like my windows desktop”. So emulation of desktop behaviours.
* trees
* panels
* drag and drop
* spinner
* slider
* form validation
* context menu

Example Google Spreadsheet.
* doesn’t look like a desktop application.
* Also holding on to some web specific metaphors: underlined links

Cinematic effect. Animated effects like for minimize to show you where to find the minimized programs again.
Amazon bookstore example from Lazlo Systems: Add to card button activates a cinematic effect that makes the “cart” column jump very subtle. That indicates where to find the info.

“There is no [page]” – Neo watching the spoon.
David’s formulation: “page is a metaphor of a moment of uninterrupted context”. Another example: Kayak.com where results constantly flow to the browser.

What’s all the fuss about Web 2.0? Marketing buzz, but really nothing new: All existed separately.

Technical side of it: Pure browser. Open standards. AJAX new info from server without refresh.
* A Javascript call makes a query to the server
* server returns XML
* Javascript reformats content and updates browser page
This is visualized with JJG’s visual explanation .

Flash
Flash
* to add animation for web pages — not for creating applications
* requires plugin (very common)
* uses vector graphics

Bill adds: Flash adds the graphical aspect for html pages.
David demos Goowy (a Mac like desktop).
Goowy Made in flash.
* Can do most of what javascript does
* good image manipulation
* good audio support

Firefox “I can’t leave firefox because I’m addicted to it’s extensions” – David Malouf

An example: Google Notebook (as a Firefox extension). Add your notes to any page. You can even share and publish notes.

Q to what point will you aim for “emulating” a desktop application? Too much desktop emulation? A: It depends [on user expectations]. Certain things that never get there no matter how hard you try.

Example: Back button on home-made application. Opens a seperate window to show that back button not working. One user comes in with a 5-button mouse. Uses thumb as user command for going “back”.

Bill adds: Yahoo mail beta (looks like outlook). Didn’t look like a web app, and therefore users didn’t expect back button usage. Users also tried double click. So in all, there is an aspect here: It has to look EXACTLY like a desktop app.

David example for popup window that gets blocked by the standard browser behaviour. After a little while, page detects that new window is not open, and shows a message: (something like) “it seems a popup blocker prevented the window from opening. Click this button to open”.

Backend frameworks
* DOJO
* Script.aculo.us
* Rico (on top of prototype)
* Ruby on Rails
* ASP.NET
* Yahoo! User INterface Library (YUI)
* Backbase

At Yahoo! Rails really doesn’t fit well: We have a lot of JavaScript + HTML inventory that sticks around. Solution for Yahoo: Creating the open-source YUI library (public released Jan 2006)

Atlas renamed to Microsoft AJAX Framework.

Important note on Backend frameworks: The more you know about them, the better you can form your design.

What makes AJAX big now is that Netscape 4 went away.

In a b-to-b
Banks has a locked image as an end-user, you have to go to IT dept to get anything special installed. AJAX sidesteps all that. As long you use AJAX, you’re good to go.

I even tried to sneak flash in there (a bank) but the Flash player that is installed is an older version than the one thats most used on the web.

Q Flash accessibility: Can you navigate through your controls by using tab. A: Yahoo solved that problem (maybe on yahoo maps). It’s doable, but you have to add some code. If you want more details on that, I can give you that later.

Q AJAX accessiblity, assistive technologies? Again, it’s doable, but you have to do it on purpose.

The design. Could be

David: I’m a big advocate for every designer learning to code something. That will actually make your designs more code-able.
Meetups and barcamps are free. You learn by contributing, that’s the model.

Quick excercise: Meet your neighbours.

How many people have tried that technology is selected before you actually know what application to build.

Power of Patterns
Style guidelines tend to be thick and tend to not being read.
Recommend the non-designers design book (amazon link).

Examples of patterns. Bill’s role is not just AJAX evangelist, but more Rich patterns evangelist (lots of examples of terms).

The classic model: page, send to server, page went away. in fact this is a constant interruption of flow. Can be useful sometimes.

Affects wireframing applications. Because wireframes works best for page to page applications.

Affects payment models because is based on page views.

Desktop apps never worked for wireframing: It was better to prototype because the experience was so rich.

Principle: Keep it direct
Alan Cooper whereever there’s output there should be input.
Patterns
* Inline editing
* Drag and drop
* in-context tools
Guideline: Prefer interaction within the page.
What about discoverability? Example from Flickr. On hover: yellow background and title tip: Click to edit. Sometimes works also with little small “edit” links.

Added note: Redundant is good for discoverabilities. So the more “invitations”, the better. David: “when developers say ‘this is redundant’ I actually say ‘Good’ ”

Use direct editing on page content.
What about save/cancel? Example from Flickr.

37Signals Backpack uses an onhover approach shows an edit+delete link that’s carved out of the background.

Provide in-context tools
Only good for single atomic operations. Can actually slow you down: Example backpack where a list of todo-items are checked rapidly. Some of the items are resurrected from the dead, because of the technical implementation.

Use drag-and-drop appropriately. Not for simply setting an attribute. (bad example drag and drop movie rating)

Leave a light footprint. (makes more people creating content).
Patterns: remembered collection (Gap shopping bag for checkout)
Pattern: rating an object (recommend this story)
Pattern: in page action (digg button)

Kevin Rose, Digg creator: When he added AJAX digg button, participation exploded exponentially. Source: BayCHI meeting

Design for engaging moments.
Use invitations “write a review”, “vote”. Keep it fun, engaging and light.

Use lightweight events: Hover, click.

Principle:
Principle: Cross borders reluctantly
Pattern: endless scrolling
Pattern: in-context expand. (is sometimes misused, where you could have lazy loading instead)

Pattern: inline assistant (Gap store example)
Pattern: Hover details (Y! news stody links onhover photo + blurb)
Pattern: Lightweught popups (the lightbox effect)

Rethink process flows: Every page jump is a mental speed bump.
Rethink paging (vs. floating). It’s the users model not the paging model.

Scrolling vs. paging. For search it’s not that useful, because for search results, users are mostly interested in first page. Also, what do you do at the end of the scrollbar??

Lazy load.
My yahoo paging-like scrolling model, where you click and add more news items to the list, and UI sort of scrolls it down.
Animate that transition, where you kind of scroll them in.

Plan for linking, crawling and back button.
Not everything is a single page application.
What will the user think the back button does?

Example: Users actually didn’t expect back button to “remember” all the little micro-steps.

Use overlays. For momentary interruptions, can replace page tranistions.
When editing an individual more complex item.

Example a lightweight popup where you need more space for editing content.
Also where it’s OK to overlay other content of the page.

Use in-context expands.
Example Yahoo trip planner where you can expand details.
Example netvibes expand edit options.

Principle: Provide Live feedback
Pattern: live suggest
Pattern: auto complete

Keep the goal in mind. Is it narrowing or distracting?

Example: Alltheweb.
Combined the suggest with live search.
autocomplete builds a list below search box. with linked keywords. Add live-search results in main content frame.

(didn’t release as rebranded Yahoo search: Would triple the number of servers needed)

Keep the user engaged
Time passes faster. Look for engaging moments.
Example time
For the user

Use live-previews.
Look before you leap.
Example Google’s password stength validator.

Keep feedback focused.
GMail “your message has been sent” is located according to heatmap near searchbox.

Principle: Offer an invitation
shift-click doubleclick, even tripleclick for desktop apps.
Pattern: Tooltip invitation + hover invitation
Pattern: Drop invitation
Example flickr, where a dropped photo actually ondrop is showing a bomb explosion.

Keep actions out of it.
Don’t make the user afraid to explore.

Use invitations to aid discoverability
Two challenges: idiom & features
Adding signposts, always-on clues doen’t scale:
Example from backpack todo list where delet/edit links are all over.

Example Y! homepage. Where all but searchfield is dimmed (lightbox effext). As a guided tour for discoverability.

Example Turbotax, where a flash movie talks about all the wonderful things

Example Y! Maps too slow animation and the really bad thing that map grows on hover of a link. Makes it work like advertising.

Principle: Show Transitions
Pattern: Fade transition + selv-healing transition.
Pattern: slide + animate
Ex flicr where scroll is on horisontal arrows and content slides.

Speak to the BRAIN
understanding attention processing. Book Mind hacks (tom stafford and matt webb). Amazon link.

Example: Apple widgets on dashboard flies at you when dissappearing — not down to it’s icon.

Animations, transitions is actually important:
* speed up time
* slow down time
* show state change
* show relationships between objects
* focus attention

But remember to keep it sane.
“cut in half” rule of thumb
When you think you’re done, cut that time in half.
Example Y! mail time for object to snap into place, was cut in half.

Principle: Think in Objects
Example Trip planner
The power of sharing
Bloggable, shareable, findable
How to dial-in community
Collections

Web 2.0 as a platform
Rich objects fit the SOA model
Creates a good separation of concerns, microformats
Mashups

Easy way to geocode: Flickr example. Made it easy to geocode. Drag objects (images) onto map: 2 million photos geocoded the first 24 hours. Amazing participation.

[Bill coughs again: "I almost made it through"]

Engineering: We used to say no. Now we can actually say yes.

Yahoo homepage evolution
* old and clunky (2-3 multiple select boxes. Page reload)
* click on page: “move up/down, move to top/bottom”
* drag and drop new positions

Example Add to my stories, where the plus sign flies up to the “my stories” tab. Plus is too little.

Q shift of paradigm affects advertising model.
A work tightly with comscore advertising bureau.

Q discoverability of autocomplete
A autocomplete seems to be secondary functionality, so in that way it’s not critical.

Invitation has to be subtle. Point to waste as little brainpower as possible before you start typing. With better discoverabililty, less brainpower is wasted before typing starts.

Reccomends Jen Tidwells book Desinging interfaces (amazon link).

Design

When you draw (apply ink to paper) there is actually synapses crossing in the brain, connecting the two brain halves.

So, sketching is important. Also, you can communicate quite a lot you sketch on 10 seconds. Sketching is rapid and rough.

When people see too much permanence, they stop giving feedback.
* rapid and rough
* multiplicity (multiple sketches)

Don’t forget your digital camera when you work with whiteboards.

Next step: Framework and language
* create structure
* Navigation
* Language
– object
– action
– modifiers

Next step: Refinement
When you cross a boundary on details, people start thinking it’s the real thing.
* Details
* Behaviour (on a very deep level)

Next: Designing behaviour.
* User stories. Example: Kevin Chang using cartoon strips as design element early in the design process.
* Communicate “intra contextual moments”. Very hard to communicate.

Sample process:
* sketch on paper/whiteboard
* Scan/photograpth into digital environment
* Trace or re-draw using computer tool
* Use “blocking” tool (like visio) to define framework
* As further detail is required to refine framework fills in blocks using a higher fidelity drawing tool.
* Add interactivity so that behaviour can be experienced, evaluated, tested, and reflected upon.
Example: Add hotspots to your visio and export to html. OK, but
One guy (Anders Ramsay?) advocated XHTML, CSS, JavaScript for wireframes
Other tools mentioned: Axure, iRise, Serena, Macromedia Fireworks.

[Jesper's note: Nobody mentions using Ruby on Rails as Prototyping tool.]

Pain.

Wireframing Ajax is a [expletive]… We have to determine all of the things a user might do, and wireframe the blessed moments of each possibility.

- Jeff Zeldman, Web 3.0

The shift [from PIA to RIA]

PIA = Page-based Internet Application (or Poor Internet Application)
RIA = Rich Internet Application

Assumption
* All interaction is course-grained at page level
* Wireframes capture layout, priority, behaviour and content

Impact
* Full page refresh replaced by small content update
* hyperlink, submit are replaced by a full range of interactive elements
* Micro-interaction, micro-updates leading to micro-states
How to express micro-patterns as wireframes. From

Prototyping is highly important. Must see to make it happen. Paper based prototyping is not able to capture these prototypes
If you can’t actually prototype it, you could find someone doing it similar, and then talk about what you would change on the presentation level/behavioural level.

Q: How high fidelity should prototype have?

Bill working with iterative prototypes. Getting users in one day, then refining it and presenting them to results the next day.

Back to comic strips: 90 % of the time, computer is turned away from reader. Comic strips can show movement, feedback, time passing, etc…

Nuances in the interface are multiplied
* invitation
* activation
* deactivation
* affordances
* constraints
* timing
* delays
* rate of feedback

Benefits from being as close as possible to real code.
Example: Use css classes to indicate, drag-objects and drop-zones

Bill Scotts. Drag and drop interesting moments.
Not just event states, but interesting moments where you can interact with the user.
About a total of 15 different “interesting moments” for drag and drop.

Drag and drop objects
* cursor
* drag object
* drop target
* etc…

Drag & drop matrix (bills article Interaction Matrix)

Engineering teams are thrilled about this level of detail, and can be created in an agile way

Y! did that for different patterns
* drag drop
* inline editing
* 6-8 different examples

Working overseas: You can’t have enough detail when working overseas. In normal documentation there are so many assumptions in it.

Adaptive Path: Micro states. aka key frames
Storyboard add timeframe.

Axure, PowerPoint, Sketchup, Ruby on Rails.
Bill: Wish we would have a tool more like Sketchup. That you are just using without thinking about it.

It’s really hard to find that rapid prototyping tool that works good.

Animation with visio: on bill’s blog and boxes and arrows
Example: Inline editing with visio.

Example: Animation with Photoshop (Photoshop CS2).
Blog entry (used 20 minutes or so to take existing video and update the timings)

Q: Reviewing wireframes and an actual web page is very different. How to overcome differences?
A: (David) I try not to reflect so much about the background, but want my colleagues to explain my wireframes.

Good to project your wireframes on a whiteboard so you can start adding to it while discussing it.

Collaborative process. I tend to do all my presentations in front of all teams. Because I want everybody to hear everybody’s reaction.

The designers role is really to be a facilitator.

After coffee / fruit break a talk about design.
Design used in different ways. Design as noun/verb.
[Jespers note: I'm not blogging that part (it's a more philosophical discussion that's not directly relevant for my daily work)].

Design exercise: Design a few screens for a bus ticket kiosk.

Tool for sketching/prototyping: Denim.

Q and A closing questions

Q: Good way of debugging when working with Ajax.
A: Firebug (firefox extension). Make sure any javascript libraries are scoped. Name spacing helps a whole lot.
Comment: Google web toolkit (built in java) if you have the option to do that

Q: keyboard equivalents to hovering, clicking, doubleclicking, drag&drop
A: keyboard commands like GMail and Y! mail.

Q: Talk tomorrow different from today?
A: Some of it will be new.

Q: Accordion
A: We wrote it for Rico, but never transferered over to YUI library

Why agile development continues to grow in popularity

Rare combination: Companies that are strong both on agile development and user experience.

Wrong assumption. Agile is just about finishing something faster
It isn’t just about finishing faster. It’s about finishing faster. I’ll explain some more about that later.

Greedines, short-sightednes and blame

Common things go wrong when projects go wrong.

To software developers, people like you [UXP people] are just “the requirements people”

Business case:
Consider a fictitious product:
– our business people tell us it will earn us $300K monthly after release
– development costs are $100K monthly
– it will take 12 months to design, develop, test, and release
– release costs are roughly $100K
this seems like a reasonable venture
– looking at a 4 year time window – development + 3

Then suddenly
* add features (Mona Lisa with candy bar and opera house)
* cut scope
* delays and risks

Outside the process
* political
* financial
* loss of key talent

Political: “I’ve seen a lot of projects die when new management take over”. Killing predecessors descendants

Once we release it, we may be off target.
* doesn’t meet business goals
* may be unusable
* may be technical weak

Also there may be reducing financial return.

So this is our problem: We have got all these risks that may affect return of the project.

Let’s look at the opportunity

* all released features is $300 K
* 25% features might earn us $120K

Business cases go from annual release go semi-annual to quarterly
Even with the added cost of 100 K per release, were earning more money and have an annual busines casse.
Overall we earn 9% better return on investment (actually IRR)

We can even contemplate to skip the 4th quarterly release and we’ll still earn more money.

Book: Software by numbers (amazon link)

Multiple cycles to reduce risks

Multiple user stories wrapped into an iteration

Planning phase (synonym for design and vice versa)
For agile people, testing usually means automated testing.

Different levels here:
* feature
* iteration
* incremental release
* project

In theory stakeholders feel more involved. More opportunities to adjust.

Agile

Common things that go wrong with agile projects

1. planning and releasing smaller releases often results in unusable releases
2. no one really understood where the value came from in the first place
3. keeping design simple now and worrying about usability later

Why prioritization go wrong is when noone really understands the value of the customers

Not involving design people. They are good at understanding who users are, what are their values. This is actually not an agile problem, but a software development problem.

I’m
and i’m usually pulled in when things go really bad.

Q’s like
* who’s gonna use it
* what’s the value for those people
=> lot of user reasearch debt

Conversation with stakeholder:
- We already did user research
- Let me get what you already researched
- Well, this was the requirements when we started

Adding User Experience people

At least They don’t use UML, so that’s a big advantage.
Top mistakes:
1. “reasonable” research period usually too long
=> Truth is: Often a small amount of research yields preliminary designs. Also known as assumptions
=> Engaged in research often means disconnected with rest of team

2. Desing solution is too large
=> the “ideal” solution is often so big that it has to be broken down to match releases
Results in ugly releases
=> Often diff between something optimal and something slightly sub optimal. Diff for development effort is sometimes enormous.

3. not understaning impmlementation costs compared to user value.

Agile strategies recommended

* defer specific design until late
* keep scope task centric
* create useful releases to users
* grow design iteratively

Latest responsible moment borrowed from lean manufacturing.
UXP people might translate to
* doing enough research to understand users, their problems and goals

User story

User story
* able to write on a 3×5 card
* reminder for a conversation
* wikipedia is dead wrong

write user stories using this simple template (credited to Rachel Davies in Cohn’s User Stories Applied)

As a [type of user]
I want to [perform some task]
so that I can [achieve some goal]

As a [harried shopper]
I want to [locate a CD in the store]
so that I can [purchase it quickly, leave, and continue with my day.

The car metaphor

Agile question: Which feature do you want us to build first: The tires or the breaks?
All features are equally important
=> adjust scale: Kia, Toyota, Mercedes-Benz

"The simplest thing that could possibly work"

In an agile context, its only works when you understand that you may add other things later.

All these elements have some of these things in it.
* Necessity
* Flexibility added later. Make feature useful in more situations
* Safety
* Comfort (usability), luxury (UXP) and performance (run faster, smoother)

If you're in a usecase driven approach, flexibility maps to alternative paths.

[Changed slide]
Bar diagram when adding to user story or feature
symbolizes discussion
* simplest task
* flexibility (what if)
* fair bit of safety
* usability is important

maps to
* necessity
* flexibility
* safety
* comfort, luxury, performance

Agile development needs help
* so much late decision making
* often end up building luxury, but forget necessities.

Agile softwaer development isn’t called rapid, or cheap
Agile because it’s maneuverability.

Linn miller, Alias. Written a report, recommend to download.
Good job at describing

Yahoo! has done a good job adopting Scrum, just didn’t have time to report about it yet.

I have more failures to report than successes.

[My live notes from UI Conf. All UI Conf notes. Expect updates of thes rough notes, with references, images, etc. within the first few days – this footnote will stay, though. Feel free to add comments, links to similar notes, presentations, correct quotes and add where appropriate. thanks! Also I post my pictures on Flickr tagged uiconf]

Technorati Tags: david malouf, bill scott, uiconf, ui11, ajax, ria, google spreadsheets, prototyping, irise, axure, rails, visio

Ajax security considerations. Subject to the additional precautions enumerated below, Ajax applications can be made as highly-secure as the web technologies upon which the Ajax model is based.

The article mentions several issues and Scott has put some thoughts in how to secure their enterprise Outlook replacement, Zimbra.

• Use SSL/TLS (i.e., HTTPS)
• No server-side interpretation of JavaScript or other client-submitted code
• Limited or no client-side interpretation of JavaScript within user data
• RESTful URLs: No HTTP GET requests modify data (only POST or PUT requests)

Zimbra blog: Securing Ajax.

Technorati Tags: zimbra, ajax, javascript, web2.0, security, web development

London @media 2006 was a Conference about frontend and web user interface in all its dimensions: strategy, design and building and after attending the W3C Technical Plenary at Cannes — more technical — it was the chance to see other people that have most influenced the user experience on the web and talking with them. Really, it felt like a rock concert full of fans.

I’ll divide this post in two parts: first, I’ll start with my personal impressions and second, links to the presentations and materials (so you can jump to the bottom of the page).

The past, present and future of the web lies in the community and the open sharing of information

The web was born to help the community, and was evolved by the work and generous work of passionate experts as Eric Meyer pointed out on his keynote. Formal structures and big companies have proved to be inadequate to make the web evolve.

I have learnt so much from the web design community so surely I have an obligation to give back to it.
– Eric Meyer

The web is about people and passion

Listening to all the speakers, the web is about people and passion. Passion and emotion were some of the most repeated words in all sessions.

Never underestimate the effect of a small select group of passionate experts.
– Eric Meyer

And as Andy Clarke points out in his blog:

On a more personal note I was left humbled by the passion of almost everybody I spoke with. While conferences like @media provide a focus for ideas, it’s in the day-to-day life of a designer or developer where the real hard work takes place. There seemed to be no lack of passion or excitement about design, standards or accessibility and still a great deal to talk about.
– Andy Clarke

The community is your best teacher. Play, learn and share

“Do we need a formal structure, such as qualifications or a professional body, to identify the understanding of abilities of web designers?”. The panelists agreed on having a formal qualification could be, even, a drawback.

Courses and certifications do not guarantee quality on web design because most of them are obsolete. Flow with the community as the way to learn and stay up to date.

“Most of the training materials on web design I see on Universities and Companies are from the last century”
– Eric Meyer

Usability is getting more diluted on the design process

Usability, as the brand aesthetic Mr. Nielsen represents, sounds out of context in @media. The terms used to describe the interaction between users and website were more sophisticated: aesthetic, pleasure, quality, design, emotion, user experience, or even the more technical, accessibility.

The term Usability, seem to be out of fashion among the twopointoh crowd. No speaker mentioned the term usability. The closest one was Jeff Veen talking about ease of use as one of the important features of the so called Web 2.0.

The community does not need deliberations or theories, the community needs practical standards today

On web design issues, the community pay more attention to the Webstandards Group because of their sense of practice and empathy with the design and development professionals.

The fast growth of the microformats use, as a way of embedding semantics on the interface, is another example.

The W3C is loosing credibility and empathy among the community

Is W3C going out of the game? Web Content Accessibility Guidelines 2.0 (WCAG 2.0), have been criticized by web accessibility gurus as Joe Clark, members of the Webstandards Group, and designers and developers for being impractical and difficult to assimilate.

Also, mentioning future W3C standards like CSS 3.0, SVG 2.0, XHMTL 2.0 or XForms as 2007 hot topics, made the audience break into laughs while community supported standards as microformats were applauded by the audience.

The Javascrtipt Golden Years are coming

The 2003-2005 period was CSS + XHTML era: books, weblogs, articles and design superheroes will have their place for sometime, but this year and the forecoming, will be the Javascript Golden Years. Rich Web Interfaces, demand good javascript programmers. Specialists in bringing to life sleepy interfaces and creating great user experiences. The next generation of web heroes will be that ones that can develop rich and accessible web interfaces.

There’s a need to evolve actual web design by breaking old patterns

Actual web design is based on old and boring patterns and standards that are proving not helping the user. As Andy Clarke pointed out on his talk, a change of perspective is key to make a great web design. Actual web standards give lot of freedom to the designers and developers to make a whole new thing, escaping from that traditional software like interfaces, and getting to design usable, and also pleasurable and aesthetic products.

Designers and Developers are becoming Devigners and Desilopers

Molly Holzschlag talked about the different approach of solving problems among designers and developers. The gap is closing and there are good designers and developers that control all the aspects of web design. Andy Clarke or Cameron Adams are paradigms of the future web design proffesional

Having fun is still part of this “web stuff”

Keep on evolving and growing the web takes so much effort. This could not be possible without passion and a sense of fun of the web design colleagues: Being sorroundend by porfessionals that enjoy playing, experiencing, learning and sharing their work will be key for the future of the user experience on the web.

Download Presentations

While all official materials -presentations, podcasts and all that stuff- are being processed by the Vivabit team, these are links to materials taken from the sessions and speakers:

• Good Design vs. Great Design (4.1 MB zipped PDF) by Jon Hicks, Veerle Peters and Cameron Moll
• Bulletproof web design (20 MB PDF) by Dan Cederholm
• Yahoo! vs. Yahoo! by Nate Koechley
• Designing for the Next Generation of Web Applications (18 MB PDF) by Jeff Veen
• Microformats. Evolving the Web (HTML format) by Tantek Çelik
• Transcending CSS: The Fine Art Of Web Design (50 MB PDF) by Andy Clarke
• Fine Typography on the Web (HTML format) by Dave Shea

Luis Villa works in Spain at The Cocktail, User Experience Consulting Company, owner of La Coctelera, biggest blogging platform in spanish language and fully developed on Ruby On Rails. He’s one of the founders of alzado.org, and he’ll speak at Fundamentos Web 2006 International Conference. You can learn more about him in his personal blog grancomo.com (Spanish).

Technorati Tags: web, conference, event, @media, @media 2006, w3c, jon hicks, eric meyer, veerle peters, cameron moll, nete koechley, jeff veen, tantek celik, andy clarke, dave shea, molly holzschlag, joe clark, accessibility, usability, user experience, javascript, ajax, presentation

• Beyond AJAX: Asynchronous JavaScript ™ Technology and XML Native Processing
• Corporate Cola: Visualizing Your Email
• Stronger Than AJAX: Swing in a Server-Side Web Architecture
• Extreme Web Caching
• Java™ Technology, AJAX, Web 2.0 and SOA
• Evolving JavaServer™ Faces Technology: AJAX Done Right

I’ve put my whole session schedule online, but keep in mind that this is just resevations I made from home, so I might skip some of them or join other sessions.

Traveling experiences

Delta must truly be an air line company of the world. A flight attendance actually gave me visa and immigration forms written in Dutch! I thought I spoke Danish. A couple of my colleagues also got Dutch forms – the rest got them in French?! I managed to fill them out without understanding the questions. I’m writing this on the plane, so I don’t know yet if I’m gonna be allowed inside the States… “Bent U ooit betrokken geweest bij spionage of sabotage?” – I answered “yes” – I hope that was correct. The info screen displaying outside temperature and altitude was in some weird language that I don’t even know of. Oh yes… they where showing two in-flight movies. But the whole row of seats where I was sitting had a malfunction so the earphone plugs didn’t work ;)

This is how you look if you try hard to keep a straight face, arriving at a hotel after traveling for 19 long hours, being awake 24 hours straight with only 4 hours of sleep before that:

Good night :)

Technorati Tags: JavaOne, java, Delta Air Lines, convention, conference, USA, Dutch, immigration, San Francisco, California, AJAX, SOA, JSF

Today this object is implemented by all the major browsers. But because there is no standard dictating how this object should behave, the implementations are a bid different. That in turn means that web-developers the world over have to deal with browser compatibility issues (and we all remember to good old days of web-development in the 90′s right?).

Currently the W3C have a “first draft” of the standard ready for the public to take a look at.

From the draft:

The XMLHttpRequest object is implemented today, in some form, by many popular Web browsers. Unfortunately the implementations are not completely interoperable. The goal of this specification is to document a minimum set of interoperable features based on existing implementations, allowing Web developers to use these features without platform-specific code. In order to do this, only features that are already implemented are considered. In the case where there is a feature with no interoperable implementations, the authors have specified what they believe to be the most correct behavior.

Technorati Tags: W3C, web standards, AJAX, JavaScript, XML, browsers, Firefox, Internet Explorer