Experience Design
- his definition: “looking at usability from a contextual perspective”
- “it’s just a hammer”; the tool is not the point
- world of developers vs. world of designers blah de blah *(Bri’s opinion: Get over it, people, just talk and educate each other and stop freakin’ fighting already.)
- experience design involves bridging the two worlds
- problem: people get siloed into creative or engineering (ergo, if you’re not “a creative” then you’re not creative)
- but really it’s all about design & technology that live together in a creative space
- what we do is a craft, craftmanship involves equal parts artistry and engineering

Process
- the natural flow of web development is: IA, design, development (put another way: layout, aesthetics, execution)
- all are thinking about their craft; but who’s thinking about the user?
- their process has IA, design, development all in one room
- iterate, create a concept, build it, use it as the starting point for the next round
- quick cycles; days or weeks-long, NOT months
- everyone agrees to communicate & maintain a level playing field
- start with sketches & storyboards on paper - quick quick!
- then create prototypes
- all three roles participate in both of these phases
- quick feedback among roles reduces designer anger (*Bri sez: which is measured in Anthonies, of course) & developer frustration
- “designers are a lot less hostile than we think, they just don’t trust us” (*lol)
- look at it as putting the extra cost and time at the beginning, rather than having to fix things at the end

Case Study
- 2 weeks to put together a pitch for Martha Stewart
- started with post-it notes exercise
- have to have a person in the room with final decision-making authority during this phase; no delegation allowed
- observed people looking at books, magazines at a bookstore
- what do they look at? which parts of the book do they go to? how do they use it after they buy it?
- from this they got features like highlighting, clipping out content and saving it
- tested out the idea of highlighting/clipping content in code, for feasibility & beginning grasp of the interaction
- meanwhile sketching out structure and page layouts (on paper!)
- inspired by video editing software w/a timeline; but then realized that users wouldn’t be familiar with it so had to change
- when done, moved to a clickable jpeg-based prototype with a few faked-up interactions added in
- used prototype/scriptaculous for interactions
- large blocks of the prototype are images, only “live” areas with the interactions they want to show are actually built
- 2 weeks total, from beginning to faked-up prototype

- recommendation: “Go buy a designer a beer”

… is totally awesome.

(My laptop died right when this session began, but that’s mainly what I took away.)

http://ui.jquery.com/
jQuery UI Demos

(Note: This is one of the sessions I was most excited about in the whole conference. This is some stuff I’m just starting to really understand, and I find it fascinating.)

- recommendation: use Firebug console as a learning tool to play with different code snippets & styles

Objects
- an object is basically a hash
- it possesses keys and values
- a value can be a function, which becomes a method on the object
- object literal: var obj = {a:1, “a b c”:2, myFunc:function(){}, f:45}
- an array is an object in which the keys are auto-incremented numbers, with a few extras like .length
- JSON is an object literal, but requires quotes around all keys and non-numerical values
- there are no classes in javascript

Functions
- functions are also objects, therefore they can be assigned to variables, augmented, etc.
- when assigning a function to a variable, the function *can* be named and can have a different name from the variable name
- using .call(), can call a function and pass in the “this” as the first argument, setting “this” to something besides the default
- a function can return a function

Constructor
- the only thing that makes a constructor a constructor is that it is called with new before it
- no indication that it is a constructor in the function itself
- when called with new, a constructor creates and returns a new “this”
- convention: constuctors have initial caps, other functions don’t
- aThing.constructor gives you access back to the constructor function of aThing
- tip: use empty literals to initialize objects, arrays, functions, regex; don’t use formal constructor calls

Prototype
- prototype is a property of every function object
- this is tricky: prototype belongs to the constructor function, not directly to every object created by that constructor function
- prototype is linked to by those objects, not included within them
- BUT if you augment prototype, that change is instantly accessible to all objects created by that constructor function (because any calls on an object check the object’s prototype if they don’t find something in the object itself)
- prototype can be used to make functions and properties available to an object
- you can use hasOwnProperty to tell if something is a property of the object (will return false if the property is in the prototype)
- you can use isPrototypeOf to test if a prototype belongs to something
- don’t use the __proto__ property, it’s not exposed in all browsers
- prototype is what allows us to do inheritance in javascript: set an object’s prototype to an instance of the parent object to inherit all of that parent’s “stuff”
- this is why it’s called prototypal inheritance (vs. classical inheritance - using classes)
- quirk: with this type of inheritance, aThing.constructor = AThingParent(); have to fix by explicitly resetting the constructor property, with aThing.prototype.constructor = AThing;
- prototype allows you to augment built-in objects like String (but there are problems with this in different browsers, also with interoperability)
- augmenting objects with prototype is better on memory, because it only creates one copy of a function/variable which is shared, rather than one copy for each object if the function/variable were declared within the constructor

Scope
- no block scope, only function scope
- implied global scope if you declare without “var”; watch out!!!
- avoid global scope - put everything inside a function or object to avoid global scoping

Closures
- closure means accessing properties from an outer function within an inner function
- when the inner function is called, it will have access to properties of containing functions, even if those functions have already returned
- those properties will have the value they had when the containing function returned, NOT when the inner function was initially called (e.g. in a loop, all inner functions using the loop counter will be using the end value of the loop)
- in order to fix this, have to create another inner function, assign the value explicitly when the function is created
*( he started going really fast on this part, and I didn’t catch everything; need to research more)

- IE8 Beta 2 currently available

IE8 developer toolbar
- multiple document modes - can test different versions of IE within IE8
- idea is to be able to debug everything within IE, don’t have to go to any other program
- basically copied firebug on everything: look, layout, features (* Bri’s opinion: no complaints, really)
- CSS cascade, DOM inspection, box model layout, etc.
- js console, live debugging
- js profiling, include time & execute time, how many times it was called

Visual Studio 2008
- javascript editor/debugger
- colorization, formatting, code completion, debugger
- works with popular js frameworks
- free download: Visual Web Developer Express 2008
- code completion works with dynamic typing, will show you the code completion for the current type
- code completion across libraries, user-defined objects & functions
- can annotate functions to tell it param and return types for code completion
- can annotate to explicitly bring in other js files to the code completion

jQuery Partnership
- fully documented jQuery included, with full code completion
- with jQuery, if reference minified version, will automatically bring in the debug version for development

* At this point I stopped paying attention as they went into their ASP.NET AJAX framework and related stuff.

(Note: Lightning rounds are limited to 5 minutes.)

Image Optimization
- on average, images are around 50% of page weight
- no GIFs, save 20.4%
- crush PNGs save 16%
- strip JPG meta, save 12%
- tool called smush.it, http://smushit.com
- firefox extension, goes through the page and “smushes” the images, allows you to download the smushed images

Intro to Dreamweaver CS4
- better code completion, including autosuggest from both imported libraries and user-defined objects
- worked with the OpenAjax Alliance
- inserts of widgets from libraries work (move) in live view
- uses WebKit for rendering

Comet Overview
- pushing information from the server to the client
- reverses the traditional pull architecture
- helps deal with server load, server doesn’t have to respond immediately, can delay answering until it is able to answer
- “remembers” the client requests it receives
- 5 minute window for the server to answer
- e.g. with stock prices, only answer when the price changes

Firebug is Awesome
- upcoming: performance, make the debugger localized to a particular page rather than all tabs
- upcoming: better stability
- upcoming: unit testing ability built into firebug, “test” panel with full test suite and test runner built-in

Episodes (A Shared Approach for Timing Web Pages)
- measuring performance of websites
- current measuring stops at the onload event
- ajax introduces a lot of other “done” states and important points in the process
- performance monitoring by embedding measuring scripts into your web app (Jiffy is one product)
- Episodes is a shared, open-source approach to timing javascript
- built using custom javascript events

Hacking Netflix
- launching a public API this week
- embeddable widgets that act on your netflix queue
- search, access info, reviews, etc.
- catalog API and users API
- XML and JSON
- http://blog.netflix.com for the announcement

Interviewing Javascript Gurus
- what to look for when hiring top javascript talent
- (or, what to learn if you want to be top javascript talent)
- software engineering: OOP theory, patterns, etc.
- web development: HTTP details, DNS, caching, CGI, all of the details
- browsers: knowledge of browsers, works in different browsers, security
- CSS: how you use it
- javascript the language: namespaces, inheritance, constructors, “this”, closures
- attitude: loves javascript, isn’t trying to make it into another language

Cappucino/Objective-J
- designed for “desktop-class” applications
- recently open-sourced
- objective-j: new programming language built on javascript
- introduces classical inheritance, code importing, ruby-esque features, optional static typing
- is a strict superset of javascript
- no plugin required, no compiling
- cappucino: application framework
- handles document management, content editing, graphics and views
- http://cappucino.org

ShiftSpace.org
- browser plugin
- provides a contextual menu to do operations on web content, e.g. image swap
- other people can see the operations that you do, can view shifts that other people make
- community commenting
- built using greasemonkey and mootools, avoided XUL for portability reasons
- can extend to create your own tools to add operations

Milescript
- OO language that compiles to javascript
- goal to make it easier to do large-scale javascript apps
- try to bring advantages of static compiled languages to javascript

-goals of the Chrome project: stability, performance, and easier web development

Stability
- goal was to build a stable/reliable browser for use with web apps
- browser crash with web apps is more catastrophic
- browser crash should become comparable to BSOD in rarity
- multiprocess: one browser process + rendering processes for each tab and plugin
- everything within a tab is contained to that tab
- plugins have their own processes & are isolated
- really takes advantage of multi-core machines
- chrome has its own task manager where you can kill the individual processes
- no direct JavaScript access to multi-process capabilities *(Bri’s opinion: thank God)
- the Browser Process: network requests, cookies, browser UI (tabs, address bar, etc.)
- basically no third-party code allowed here, for increased stability & security

Performance
- “browsers are holding back the performance of web applications”
- startup time improved
- memory usage: each process uses a minimum amount, but smartly allocated among processes
- does DNS pre-fetching

Page Rendering
- modified version of WebKit
- WebCore (HTML/CSS)
- JavaScriptCore was replaced by V8 engine written by GOOG from scratch
- engine partly written in JavaScript itself

Enabling Web Development
- didn’t want to introduce yet another rendering engine
- some differences from Safari:
- uses Windows-style text rendering and form controls
- no @font-face, no HTML5 storage
- bugs Please file them! “Want to fix bugs before you have to hack around them.”
- dev build at dev.chromium.org/getting-involved/dev-channel
- hacking around: navigator.userAgent.match(/WebKit | Chrome | Safari/);
- Developer tools:
- V8 debugger (currently text-based, GUI is coming)
- WebKit Web Inspector (check it out in the WebKit nightly builds)
- put in a thing to kill infinite alerts (”don’t generate additional alerts”) *(Bri says: yay!)

What’s Next
- Mac and Linux ports “pretty far along”
- raytracing, cryptography, etc. in the browser; web apps as first-class citizens
- more stability, better performance, more improvements to web development

Open source project home: http://code.google.com/chromium

(Note: This ended up being more of a “design basics for non-designers” type of talk, rather than a talk aimed toward designers.)

Opening Thoughts
“We learn to describe the things we see, but we also see the things we describe.” - David Womack
As developers, we can tell often good from bad design but have a hard time articulating why, especially in visual design. (Bri’s opinion: This is true.)

“Is design the new black?” (aka it’s everywhere, but often used in a really vague way)
Fields of design: visual, interaction, information, service

What a “good” design is depends on the perspective of the user. “Good for whom?”
Have to know who your users are, and design for all of them. Prioritize users.

He used that layer diagram from Jesse James Garrett that we’ve all seen a million times.

Strategy
- what the heck are we doing?
- find the overlap between user needs and company/developers’ goals.
- know your stakeholders & site objectives
- traditional demographic methods (demographic profiles) don’t really give too much help in designing web apps
- Have to talk to/observe users
- Write a mission for your site or app that is not too general and not too specific

Scope
- what features go in
- don’t try to be everything to everyone
- avoid an algorithmic or voting-based approach to feature selection; have to select initial features as a coherent set that makes sense together, in context
- old model: first the cake, then the filling, then the icing
- new model: start with a cupcake, grow into a birthday cake, evolve into a wedding cake
- providing an API allows you to draw upon the efforts of passionate users

Structure
- how the pieces fit together; interaction design and information architecture
- interaction model needs to be consistent throughout the site; think modular/reusable when thinking about interactions
- have navigation elements at a consistent level of granularity
- use the language of the customer, not internal language
- use labels consistently across the site

Skeleton
- discoverability: make finding things easy
- use non-intrusive invitations to access more information
- provide helpful, contextual information based on what the user does
- recoverability: make actions without cost
- don’t lose any information upon errors
- provide error notification as quickly as possible, and clearly associated with the site of the error
- provide ability go back or change options without having to redo things that remain the same (live filters, etc.)
- prevent errors when possible by helping the user with just-in-time, contextual information (autocompletes, live password checkers, etc.)
- context: use time, place, and actions to add meaning
- tell users where they are in a process
- help them see where they came from and where they can go next
- feedback: let users know you saw what they did
- don’t include extraneous information in feedback (internal error numbers, etc.)
- keep feedback minimal, “just enough”
- use added item indicators, progress indicators
- ajax allows action at a distance (parts of the page affecting each other), but be careful with it
- make sure that updated areas are going to be visible to the user (could they scroll down and not see it? etc.)
- “not-suck-ability”
- many little annoyances are worse than one big annoyance
- minor annoyances that the user interacts with a lot can kill the user experience

Surface
- design is not just cosmetic, but visual design is also important
- attractiveness bias exists, might as well take advantage of it for your web app
- first impressons are important! people make a judgment in 1/20th of a second
- What is the personality of your site? How can the design/content of the site reflect that?
- recommends on visual design: “The Non-Designer’s Design Book”
- CRAP: contrast, repetition, alignment, proximity

A note on documentation:
- wireframes used to work really well for conveying layout
- what about when a page can have 27 different states?
- dev/des have to work more closely together
- some options:
- storyboards
- frame-by-frames
- wireframes with key frames of the interaction
- D.V. recommends “something more like a prototype”
- lo-fi animations (basic Flash, etc.)
- working prototype on which designers and developers are acting closely together

Prototype flavors:
- HTML/CSS/JavaScript with no backend
- working frontend drawing on xml/json instead of a “real” backend
- functional backend with a non-production backend language/architecture (e.g. Rails)

Have to work with the team that you have - what works best to increase/enable communication?

jQuery UI overview
- offers richer effects than jQuery Core
- Core Effects extends Core API
- most effects hook into the show, hide, and toggle methods of Core
- also hook into add/remove/toggleClass
- added morphClass, switchClass (both are the same) - morph between 2 classes
- added effect method - works with effects unrelated to showing and hiding
- offers intelligent color animations
- offers advanced easing for animations (nonlinear transitions) * not found in YUI
- list of plug and play effects (many ported from scriptaculous)

Drag and Drop
- draggables: offers snapping to elements, auto z-index control, constrained dragging along axis or within boundaries
- only library that maintains relative and fixed css positioning during drags, still provides absolute position to callback
- uses placeholder dragging by default
- dynamic helper creation (helper meaning drag a placeholder instead of the element directly)
- check on pixel distance or time delay before starting drag operation, to prevent unintended dragging
- dynamically accept/reject draggables at drag time (check based on for example content of the current draggable)

Drag and drop sorting
- sortables: draggable ul/li list, or table rows
- nested sortables: can make items sortable from one level to another
- checks for & maintains float status automatically
- supports all options from draggable API (see list above)
- built-in method serialize results and push to servers, including over multiple lists that are connected
- supports difference tolerance modes for dropping (cursor over area, or edge of element over area)
- sortables and draggables are interoperable, can be used to drag and drop back and forth
- callbacks on pretty much every single event in the operation
- by default, shows a placeholder of the dragging element wherever it would be dropped
- sortIndicator: can specify your own indicator to show the new position of the element, instead of placeholder

- tutorial on how to use jQuery UI (refer to presentation slides)

Extending jQuery UI
- extending jQuery UI, creating new plugins (refer to slides for syntax details)
- Core contains widget factory, use .widget to register plugin
- through the widget factory, in init, have access to this.element, this.options
- then use .extend to add defaults and getters to the plugin
- getters make methods return a value

* At this point, my laptop battery died.

- After this he talked about what’s upcoming in the future (check out jQuery UI roadmap on website for more)

(Note: I thought that this session was going to be about the technique of progressive enhancement, or designing ajax sites that will still work with a reduced feature set when the user has javascript disabled. Turns out, not so much, it was more of a general intro to jQuery from a designer’s perspective.)

Philosophy of jQuery:
- unobtrusive javascript
- write less, do more
- basic model: select elements, interact with them

Interjection — Bri’s opinion:
* YUI is weaker on the select elements part, as well as the “write less” idea
* YAHOO.util.Dom.getElementsByClassName(”blue”)
* or, $(’.blue’)
* 46 characters, vs. 10 characters
* one of jQuery’s biggest strengths is its selector model which is both intuitive and expressive
* other strength: plugins!

Syntax stuff
- CSS selectors: same as in CSS, just wrapped in a $('’) (such as, $(’div.blue’) or things like that)
- form selectors: $(’:input’), $(’:button’), etc.
- custom selectors: $(’:visible’), etc
- traversal methods to move up, sideways, down, filter in various ways
- implicit iteration when doing operations on selector results ($(’li’).something() does for all li elements)
- methods to find width, heght, scrollpos, offsets
- event handling: .bind(), .unbind(), .trigger()
- built-in effects like slideIn, slideOut, fade, animate
* see documentation for more on all of these things

Tipz
- tip: store selectors in variables when used more than once
- tip: use length of selector to check for existence when necessary
- naming convention: use $variable when assigning a jQuery object
- tip: have to use string concatenation to pass in values within the $('’)
- tip: clone() is better for performance than creating new nodes from scratch, when adding lots and lots of new elements

* opinion: jQuery is pretty okay

* Then I thought we were going to get to progressive enhancement. He started showing a code example of a To Do list that he built using jQuery, which sort of used progressive enhancement in some ways, but not really. The end.

- fastest growing and most popular framework according to Google trends
- by far the most popular (68%) among “designers who use a js library”(as opposed to developers) according to Ajaxian survey
- also the most popular among developers, but by a lesser margin
- 3 releases within the past year
- 1.2.2: new Event API for plugins, mouseenter, mouseleave, ready, and mousewheel events; $(DOMElement) 300% faster
- 1.2.3: new methods: .data(), removeData()
- 1.2.6: performance improvements (event handling, css selectors, offset(), css(), dimensions plugin made part of core
- jQuery 1.3: “all about performance” - new selector engine, 10x faster DOM manipulation, no more browser sniffing in jQuery core (out this fall)
- jQuery UI 1.5: improved code quality, faster, bug fixes
- Nokia integrating jQuery into WebKit phone browser on all new Nokia phones
- Microsoft making jQuery part of dev platform, integration with Visual Studio
- instead of browser sniffing based on user-agent string, using a features-testing model which does some DOM operations and tests the results to determine what browser quirks and bugs are present