I’ll be going to Blogger Social in New York in a week, and in preparation I’ve been reading (and helping write) Steve Woodruff’s series of Socialite profiles. Now, for easy downloading, here are:
The 48-page full-size PDF (5MB) and the booklet PDF (4.8MB).
The booklet (courtesy of my new software toy CocoaBooklet) can be printed double-sided and stapled in the middle to make a cute little pocketable guide.
Enjoy!
Back to main AEAChicago2007 post
located a mile and a half directly east of here
colocated with 37Signals
create names and identities, ad campaigns, short files, tv
commercials, package design
for their own businesses and for others
many people have private projects that we have enthusiasm and
passion for
and also 9-5 jobs where we have bosses and clients that we have
less passion for
so how can you get passion into client work and pragmatism into
personal projects?
spent night worrying about microformats - no, drinking with others
one bridge is craft
becoming better typographers, filmmakers, writing clean code,
learning about pre-press
all that translates from work to personal projects and vice versa
learn things that are both related and unrelated in the two arenas
Coudal is in many senses a very traditional design company, and
in others totally bizarre and new
curiousity got them into this position
1959 C. P. Snow's The Two Cultures lecture/book: growing divide
between art and science
specialization and people being stuck in roles
so much information necessary: all your brainpower devoted to
being a thermal engineer
humanity is worse off for the loss of the generalist
for today, define the gap as between designers and programmers
also between clients and creatives
what's the one reason he's all over the place?
their voracious and extremely short attention spans
filmmaker who works for Coudal has series called Regrets
"whereas a normal person would see a bird and say "oh look, a
bird," then go back to their life"
"find a good spot to watch spastic rocks"
*** find this. no really.
for him, it's the discovery that's important. "ooh, headphones!"
it's not necessarily a negative to have a short attention span
when you bail on something, you create room for more enthusiasm
if you can manage that enthusiasm, you can do amazing things
"This all might be a big rationalization for the fact that I can
never finish anything."
last winter someone called and said they'd made a new print of
Days of Heaven
new Criterion Collection DVD coming out
showing new print at Music Box on north side
"people are talking really good eavesdropping stuff"
they're the kind of conversations that you never have
went out for a drink and started talking about way to develop
business idea
show these very accessible American films that you almost never
see projected - Chinatown, The Godfather, Days of Heaven,
series of Tuesday nights, meet at bar afterward, website with links
and short essay
get back to studio and everybody's enthusiastic
start doing research - spreadsheet for cost of space, getting print
start designing an identity - "Projective, I'm in the dark"
and then client thing bursts into flames, and then swapmeet, and
then something else
eventually Projective is like in Tupperware at the back of the
refrigerator
sounds like a story about a failure, or at least a waste of time,
but really a great success story
"we learned all kinds of crap that we didn't know before."
sharpened business skills
got to design a logo with no client, so that was worth the whole
thing right there
and all that knowledge is going to show up somewhere else
so how do you get some of that into your day-to-day business?
basic concept at Coudal is very subtractive
get together, talk about it, do research, argue, start throwing
things away until we're done
best way to find answer is like peeling the onion
(remove everything not the statue)
going to use logo design as an example
pretty smart but don't often hit a home run instantly
some Japanese designer, very famous, old, tons of corporate
identities in Japan
has 12 junior designers who work with him, each gives him
12 ideas
goes to meeting with client and displays all 144
says "This is the work we've done for you." then takes out
145th and says "And this is your logo."
which he has designed
can't build a company based on design director getting a
brainwave at a toll booth
don't have too many meetings, marketing speak, employee
handbook, vacation policy
but need process, procedures that help maximize that
spur-of-the-moment brilliance
capturing "wouldn't it be cool if" ideas
use a metaphor for process, like roads
assuming have to struggle through, do the research and get up
to speed quickly
the one skillset you have working for clients that can be most
beneficial working for yourself
is the ability to learn quickly, get up to speed
get up to speed, talk a little, work to get 10-11 ideas
not sketches, pretty fully formed, but not complete
works well for logos and names
some are expected probably, some innovative, some derivative,
some from left field
then sit down with client and go through it all and talk
educating the client how got to where we are at the same time
as plumbing for interpretations
want to get the most sunlight on the most concepts we're
interested in, especially weird ones
also do meeting to get rid of most of them. get rid of 7, now have 5.
now try to get out of sterile environment of presentation board
Photoshop onto billboard, put on t-shirt, etc.
get client back in, talk about these five, open for a late arrival,
get it down to 2.
then do again and get down to 1.
advantage is have opportunity to have most interesting ideas
see the most light
other advantage is client is in boat when leave the harbor
like what Jeffrey was talking about
client has helped make all the decisions with us
so very rare get to end of road and have to restart
not a trick, a collaboration
nothing will kill your revenue like doing jobs twice
next way to get spur of moment into designs is to rip off designs
unless your a student, then you have to be your own professor
"we value, above all else, we value taste"
above technical ability, speed, amiability, cuteness
can teach anything but taste
need to look at two things and know which is better
not enough to just know, need to investigate why you feel that way
great way to investigate is to rip off the design - recreate, remake it
reason you're doing it is not to take advantage, but when you
remake, you talk to the maker
it's also another skill, you understand that poster in a way that's
much more real
in web design particularly appropriate, because web site is art
and view source is science
so easy to see how people have done things
if you think all websites look the same, same is true of other
genres ('50s fashion magazines)
"I like the way he did that" and change it to work for me
we are getting more specialized and also getting more insulated
you might work by yourself, even if you're in a cubicle
or you're at your house, or in a distributed corporation, or in
very small teams
power of adult conversation cannot be overemphasized
easy to get caught up in details and dead ends when by yourself
without serendipitous conversation
at Coudal, conference room B is actually the bar down the street
don't get so tangled up in yourself
last part is do the work. don't talk it to death.
have to understand how to set a headline, whatever it is.
while you're doing the work, you can find inspiration, whether
work or personal project
perhaps you could avoid that by coming up with buzzwords
Coudal video about Agency.com video to try for the Subway account
buzzwords like "activate their customers" -> sandwiches are awful
Agency.com video is linked on Coudal's site
if the RFP is more than two pages, we don't respond. Happy Cog
maybe goes to five.
if they spent all that time, prorated cost by sending it to everyone
when we evaluate whether to take the job, ask three questions
1. Are we going to be able to make money? (not always required,
but usually)
2. Are we going to be proud of the work?
3. Are we going to learn something new along the way?
career as continuing education
most of the time, the learning question is required.
can also use own personal projects to learn about corporate
work and vice versa
made short film to be shown to five people in a boardroom -
looking for a licensing deal
involved buying every single cocktail umbrella in the Chicago area
could do anything we wanted if communicated what they wanted
communicated
fascinated by Apple Mac commercials - not because love John
Hodgeman or hate PCs (though both are true)
love background - antiseptic but warm white
so made film using that idea
have done a lot of things on coudal.com - contests, blogging, etc.
used those ideas on client sites
one other chasm: between people who write the words and people
who design the layouts
Copy Goes Here video - new copywriter teaches coworkers to read
and is let go
fun, got attention
don't often show to audience who get the Paul Rand and CMYK jokes
Back to main AEAChicago2007 post
This presentation was otherwise known as “how fast can you type?”
was in advertising for 15 years before got into the web (musician, filmmaker, etc.) got into the web so he could work in his underwear got into it because no one really know how to do it first website he worked on, client didn't say "change this", client was just grateful could work from home, flexible hours, etc. "many years of unhealthy weirdness and great productivity" but a couple of years in, clients started to have lots of opinions David Segal, Creating Killer Websites first talked about graphic design popularized tables and layout but had little fetishes 1996 client: "shouldn't we start this site with an entrance tunnel?" before the Flash intro, there was the static HTML intro first site he worked on, Batman Forever, used Perl script to make bat grow by reloading so the clients came back Thomas Muller from Razorfish was in Miami showing film about new office in Helsinki news to him that could have multiple offices while doing web design still had to do client services, had to learn to communicate was about getting outside the cubicle most of us introverted, happy with Photoshop/text editor, nice monitor, no interruptions but have to learn to relate to people in order to get work done first day at ad agency in New York, had laid of 80% of staff was a guy Ed who was getting laid off and wasn't employable he'd been doing the kind of work one client loved for ten years, and it was terrible we're all passionate about best practices, and we have to be able to get that across not just for fulfillment now, but because ten years from now, you may need to get a job need portfolio that shows you know what you're doing if you're not the main person interfacing with the client or the boss, still need these skills it's the relationship, stupid. you already have relationships. "The only way to do great work is to have great clients." -Lou Dorfsman, creative dir, CBS "but yet there are no great clients... you have to make them" Dom Merino worked in ad agencies (Volkswagon gas pump to the head) in glory days of '70s he said he'd never had a great client. they'd kill great ads, no direction eventually they'd buy something endless scope is one way to do great work. eventually they buy something, if it's quality. but respect flows both ways - want to be able to work with the client sometimes person we talk to doesn't respect our work, so we don't respect them but being respectful can make the relationship become productive "The client is an idiot." wait a minute: "The client is *not* an idiot." may not be paying attention to you because they're great at their own thing so "Don't choose idiots for clients." he was a terrible employee (late, smoking, clueless), then changed, then was fired what's wrong? "I just don't believe it." couldn't get first impression out of her head. hopefully you have the luxury to pick your next employer or look at RFPs and pick clients so now methods and techniques Avoid bad clients. learn to smell trouble - bad assignments pack paperwork they obscure their address and phone number - not on the website instead have downloadable project planner if not willing to fill out planner, can't call and bother anyone not true for back-end developer - want what they want, what technology, all possible information but for designers, too much information is like a first date about all the tragedies of a life a literary magazine sent them an RFP - right up alley, could be pretentious and artsy and brag probably don't have money, could be an interesting job, all evens out, portfolio piece then sent 37-page RFP - looked like applying for government work 14 pages of wireframes existing site was one page with links to PDFs, ten years old, in 2006 if come and say "we have no money but we're prestigious. we don't know what we're doing." then maybe that's someone you can work with if they're coming to you and saying "can you help us"?" but bringing you committee-created wireframes, just don't do it Listen for bad date vibes. might be different for other people. they like having a good time while working. respond to people respectfully but also playfully. if respond poorly, can't work with them. "Your emergency is not my problem." every so often reads BusinessWeek or Forbes or something - on plane and forgot or finished book and iPod is dead, and they're not showing a movie - then reads Forbes had article saying if they're in a rush, you can get them to agree to anything like someone who just robbed a bank and I run a car lot when come to an outside vendor with a job that's an urgent rush, that means they can't decide means they needed in January, coming to you in August, with site needed in September if in rush, means all decisions will be made that way they'll agree, they'll sign the contract, but they won't live up to it Build trust. every time he says "if can't make work, change jobs", someone in the audience decides they should The non-webby client lack of web experience doesn't make them a dummy can help them get up to speed mosquito.happycog.com - anonymized organization in Chicago working with teenagers head of organization wasn't web-savvy and said so proposal was to move from static brochure site to community for teens and teachers immediate clients said that was fantastic, but needed to convince person at top of pyramid so they made a presentation about the web and how it works and the aspects they want to use first talk about who they are and what they've done talked about discussion sites and blogs - discussion as part of site (comments) or whole (/.) showed them the sites to explain "this is Metafilter, it's been around X years, X readers" needed to persuade would need someone to moderate forums showed example of bulletin board spam - wimonwillison.net Bulletin board spam this post about bulletin board spam got spammed. Bill Wyman, Rolling Stones, and Osama hasn't deleted, though comments are closed showed discussions for teens by teens - MuggleNet, Mogget's Old Kingdom, Youth Guardian Services perhaps there's no spam because when a community is vested in a site, they do their own policing same way people don't clean fast food restaurants but keep their own house clean took time to reassure client on various points so would allow them to do what they do How-to: have a process. be calm and methodical never know how will solve problem, but know what stages the solving process has tell that before engage and keep reminding what stage they're in "Some business people think some creative people are weird flakes." by having a process, like them, demonstrate you're fellow professionals How-to: before showing designs, build relationship. wireframes build relationships. ask "who are your users?" say "meet our IA." lots of time talking to them, even if their ideas are terrible, so they know they're heard translate into understanding of what their problems are then present next steps. "here are problems we've identified, and here's what we'd like to do." How-to: the Alzheimer's method his mom had Alzheimer's. would constantly, in gentle and calm way, remind of what was just said each time talk to client, say what last decided, what they asked to do, how has done it not top of mind for them, so need to remind. "We're in the wireframing process, and last time we decided to first only look at the homepage." there are really more phases, but no need to say "phase 3.2" How-to: as in any relationship, learn to translate wife says "that sweater's beautiful." two days later "it's cold in here." when surprise her, just showing that understand and listen valued in partner and by clients as well was showing some navigation, and client said "is there an ideal number of navigation items?" start to think about 7+-2 and sometimes it's 5 plus 3, and then realize that's not the issue instead asked, "is there something we're missing? is there something users couldn't find?" had one bad client, where returned own drawing after seeing three comps, with more tabs than items "Everybody understands design." - Hillman Curtis you don't have to explain design, because people react to it you don't have to tell people what they're looking at "when we did this one, we went with black and white, and in this one with color." Our job is to convey the meaning of design. question on planner is "What one problem are you trying to solve?" "What one action do you want to user to take?" always get three or four answers instead of one use design to show how would look with each of those objectives, to help choose who they are Sell ideas, not pixels. Amnesty International (slides show ideas, not finished) hadn't been able to articulate primary function of new design 1. Impact: pick two horrible, compelling stories that Amnesty is trying to change now shock out of complacency, make you uncomfortable, angry 2. News channel: if you're concerned about these issues, come learn what's going on in the news 3. Humanity: give the issues human faces faces, warmer color palette, eventually African rug pattern basically bought the third had discussion about three different emotional connections they could be making one way to avoid the ex-girlfriend's quilt color Kansas City Chiefs - competant website but not really designed what do they want to be? what problem should we be solving for them? so thought they're an unusual team - kind of socially conservative, respectful, not marketing only team he knows of where cheerleaders are treated as nice young women who'll go to college 1. Like no other - different from normal football sites 2. Heritage - took tour, saw cool stuff from '60s, nostalgic feel, color scheme and clunky arrow arrowhead watermark everywhere 3. Big boys - big NFL football team just like all the other big NFL football teams ended up with third sometimes "just like" would be a bad thing, but here wanted to be part of the group York Industries - Long Island manufacturer of high-tech stuff 80-year-old coming in every day, "people don't retire, they go out in a box" Polish immigrants who came not speaking English and were taught English and then promoted place had a family vibe Victor Lombardo was information architect 1. Personal touch - human, warm, we're an unusual place we make high-tech stuff, but we're more like a family business would go out of their way even if not their regular product - buy from competitors to send it to customers 2. Product focus - we're a hardware company, damn it so really started like ads, where one campaign is about how human and one how proficient and then split the difference. 3. Hybrid - "you can have your axle and your humanity too" AIGA - has some problems connecting with online community some people feel is great organization for some people but doesn't care about me 1. Consumer - you're perceived as a cold, elite organization, and maybe you want to change that maybe you want to reach out by feeling more consumer-y, lifestyle-y, Apple, Martha Stewart 2. Elite - no, "make a virtue of the fact that we're cold, elitist, heartless bastards" Swiss poster, modernist aesthetic, little color, very design-y 3. Inspirational - two narratives. normal AIGA website plus stuff at top from design archives with wild random colors, not who you think we are really inspire designer - bored, goes to site, gets great hit of color and ideas each design positioned as trying to solve a different problem all Jason Santa Maria combined designs 2 and 3 for final product Responding to criticism: That color is ugly. "Well, where did you go to art school?" never helps. might say "Well, what is it about it that makes you uncomfortable?" or "Well, yes, for people like you or me, but remember it's for 14-year-olds." pull out user research from beginning of project to demonstrate why the choice was made Responding to criticism: That button is too big again, research. big problem is people bail out of shopping cart. they don't know what button to push, so that's why we made it big. like Luke's talk about forms, user data like eye-tracking studies. Responding to criticism = translating. Dan Brown says when all else fails: 1. Push back. 2. Offer to look into it. 3. Shock them. Agree. "You're right, the logo does need to be bigger."
Back to main AEAChicago2007 post
the 800 pound gorilla is awake again! (King Kong pic)
IE was dead, rolled into the operating system, but now it's back
"if it steps on me, I'm going to be a small raspberry stain."
tower biplanes played, in this case, by Firefox and Safari and so on
IE's group program manager announced 100 million installations
after a couple months
at first there was a question about whether people would install it at all
making IE upgrade part of a Windows update was one of the best things
Microsoft had done in years
WebSideStory reported 25% of people using IE7, but their statistics
aren't really great
really you care about the browsers visiting *your* sites
was in charge of Netscape DevEdge editorial (and some development)
for two years
initially assumed could design for Firefox and Gecko
but IE accounted for 60% of their traffic
IE7 advances in CSS
fixed positioning
things static with respect to the viewport (browser window)
i.e. fixed footers at the bottom
legal teams will probably want to make copyright visible all the time
but you can also use for navigation elements, etc.
make sure to put padding on the bottom of the body so it doesn't
get hidden behind
another good use was a blog's comment form fixed in the sidebar
(since redesigned)
idea: JavaScript so you could click a paragraph and have it quoted
into comment
min-width, max-width, min-height, max-height
attribute selectors
div[class] is any div that has any class
div[class~="val"] is any div with a class attribute containing val,
like div.val
div[class|="val"] is any div with a class attribute starting with val
img[alt|="figure"] would be all images with alt tag figureX
CSS3 has more: [attr*="val"] will find anywhere in string, like
[href*=".org"]
though that will also catch www.organic.com
also selectors for begins with and ends with
input[type="text"] finally, instead of making radio buttons
hundreds of px wide
input[value="required"] so input with "required" inside is red/bold
then when JavaScript blanks text, when user types it's not red/bold
can visually type PDF links, with href ends in .pdf or title has (PDF
then add background, padding, etc to display PDF icon
that's an example of progressive enhancement
but is it an enhancement or does it break things for your users?
doesn't work for IE6, so if vital the icons appear, can't do it
this way
but then it's probably better to make it an img tag anyway
might not be an accessibility problem if screenreader reads URL
of links, or might be
similar idea for a[href^="https"] with a lock icon
might be bad on normal sites but great on a banking site, for instance
would be great for associations with member-only areas
th[scope="col"] border-bottom, but th[scope="row"] border-right
or th[scope="row"] + td (td next sibling after th for row) gets
left padding
could put different borders on gifs and jpgs to check that are
using correct format
believes values are case-sensitive
child selector >
can use to mark top-level so can explore:
body>div {border: 1px solid red}
ul.interesting>li won't get nested links
technically a combinator, but we refer to it as the child selector
adjacent sibling selector
:first-child
pseudo-class, like :hover
body:first-child isn't right, want body > *:first-child
body:first-child is everything below a first-child body
since body is generally not the first child of html, that's nothing
td:first-child will get you tds that are the first element in their row
chained classes and pseudo-classes
arbitrary-element :hover
full background-attachment: fixed
alpha channel in PNG images
abbr tag
how they determined what to add was driven by looking at the
design community
they tried to fix things that people had been complaining about
for five years
positioniseverything.net
they asked the community. can't do all of CSS2, so what's most urgent?
diagnostic styles
selecting images by types
any div with an id, put a border on it: div[id] {border: 1px dotted red;}
images missing alt attributes img {border: whatever}
img[alt] {border: none !important;}
can create diagnostic stylesheet, similar idea to a reset stylesheet
could help with accessibility testing on a shoestring
was hoping to publish one here, but it's not quite done
[here it is]
Dean Edwards' IE7 script is a library to make lots of things work in
IE5 and IE6
used to be IE proprietary behaviors, then rewritten in JavaScript
the IE7 team looked at it to help decide what to fix
it's been 0.9 (alpha) since he finished it four years ago
con: extra stuff to download
many dead bugs, dead parsing bugs
mostly the dead bugs make it good that the parsing bugs are dead
a fix for IE6 isn't needed by IE7, and IE7 doesn't read the parsing
bug hack
new parsing bugs!
*+html
* + html
html*
p/**/#example
@import url() media;
or can use conditional comments
his clients have chosen CSS hacks over conditional comments
theoretically you can use the not pseudo-class to select, say, elements
without class foo
but it's CSS3 and no one supports it
"and its syntax makes my eyes bleed."
Back to main AEAChicago2007 post
Derek Featherstone’s post about his presentation
ironfeathers.ca (just did triathlon, Ironman) icanhaz.com/accessibility (new tinyurl competitor) developers actually creating the site from its design often have checklist syndrome "here's what you need to do to make your site accessible" creates a compliance mentality it's something that happens at the end of building something, part of QA should be related to the people who're using the site used to do a lot of checklist compliance checking then had a transformative experience on this particular site Search Terms label is in the searchbox itself have JavaScript so when that field gets focus, the words go away doing user testing, tab into field, value is there so announced to screenreader user types in terms, hits Tab to get to Go, then hits Shift-Tab to check was written correctly and then his search terms were blanked, and he said "what happened, am I somewhere different?" so two keystrokes and he was lost Derek looked for a place to fail the site on a checklist and couldn't find one so take accessibility beyond the checklist patterns and techniques from real sites, interplay between XHTML/CSS/JavaScript hopefully add new techniques to coding arsenal current web trend is custom widgets Google Maps built own controls for zooming, moving, traffic, pinpoints all these are custom widgets and you can use API to place them on page they're not actual widgets that do anything, though so need to test accessibility accessibility isn't just screenreaders - task: voice recognition software to zoom in maybe each control is a link? voice recognition command "link" numbers the links then say "twelve" and link twelve would be clicked no links highlighted in Google Map then "button" - only one button, Search Maps at top cannot tab to any controls in Google Map definitely a problem set out when building ironfeathers to solve this problem API lets you do custom pretty much everything voice recognition software can say "mouse grid", pick ninth of page, drill down then click control once you found it don't even get tooltip saying Zoom In until activate it with a click command ironfeathers built their own controls using the button element tabbable and recognizable by voice recognition software if using custom widgets, choose appropriate code to build provide us with more intuitive controls than HTML allows, but require design/code to emulate instead of <div onclick="doSomething()"> used <button onclick="doSomething()"> inline editing - Basecamp to-do list shows tools on hover no way to activate using keyboard could instead have an "expose all controls" button available sometimes, AJAX helps accessibility. stay in same place after editing. live updates - think about positioning put "characters available" after a field if "updating" meter is in HTML but only sometimes shown, will screenreader user know when? if things update on other parts of the page, how does someone know when one happens? on mobile client, have "your status has been posted" message after update button should have on other clients as well how do we indicate the page is being updated? how do we alert the user that there's new content? Amazon tagging with screenreader "forms mode on" so shortcut keys don't jump to headings, etc. when AJAX box popped up, turned forms mode off Add button doesn't have alt text, so reads source attribute of image no label for text box, so reads "Edit [whatever's in the box]" then reads javascript: void(0) box with potential completions, but it's not a selectbox so don't know suggestions are there example of tree widget - need to build custom in HTML title attribute isn't read by default, and if it is used, it replaces the link text so had to put hidden span in the link itself tried to replicate what screenreader would say if reading a real tree (operating system) collapsed, expanded, number of children error/advisory information each field has a label; some have additional information that needs to be associated problem with label-field-advisory is advisory is after the field put it all in label. <label for="uname">Username <em>must not contain spaces</em></label> he uses em for advisory, strong for error use JavaScript to update label, though it may not be seen (i.e. password strength) form linearization don't put form elements after the submit button in the HTML, etc. put elements in order to be read, then position with CSS could also use tabindex, but hard to manage especially with back-end systems generating code search results often redisplay the form, but that can push results below the fold repetition of the form can confuse people reading the page linearly create mechanisms to move around the page <form method="post" action="search-results.html#results"> Found X results for <keyword> link at top that links to results anchor Search again link at bottom that links to form anchor translating visual language United Methodist Church design of navigation example from IASummit color and position tell us a lot same color says same section position says main tabs are at same level, ones below are subordinate difference in color, style, position says tool navigation is separate but with styles off, not telling the same story tools nav nested within an item secondary navigation is completely separate, and not in a list so separate tools nav; add labels for Site Menu and In This Section elearning course accessibility needed to make crossword puzzle accessible so had to really think about what learning objectives were need entry of data, removal of data, keyboard-friendly, scalable clues are labels for form fields so click on label and get focus on crossword field color for visual focus, typing automatically advances after each letter can use backspace key to remove actually coded as fieldsets for each clue, field for each letter javascript copies letters from across to down and vice versa labels at bottom of file title tags aren't really useful in screenreaders or for keyboard input likes to keep input outside the label so has another style hook only reads first label assigned to a particular field best resource for finding what works is local college assistive services and students don't buy a screenreader, see real people using the technology have skip links more often now, should AJAX pages have "no JavaScript" links? been thinking about that, but also sometimes AJAX is better (i.e. with tree)
Back to main AEAChicago2007 post
Luke Wroblewski’s post about his presentation
designs web applications - eleven years of designing a lot of forms online shopping experience is browsing until you find what you want, then a form so forms stand between you having money and the company getting it from you i.e. MacBook Pro takes your picture for your account - very personal try to sign up for, say, Vox, all about community and blogging -> form forms for managing financial data, for voting, etc. forms are how customers talk to companies online. they make money. they enable participation. they permit engagement. YouTube's upload form has been redesigned seven or eight times already Jared Spool fixed a design problem in a two-field form and made a company $300,000 a month gave talk at Society for Technical Communicators - one person liked filling out forms so minimize the pain of filling in forms, have clear path to completion forms are conversations: "give me your name. what's your birthday. what's your secret password." lots of different departments may want different information that all goes into one form most forms are artifacts of the data structures behind them - database structure data sources: usability testing, eye tracking, customer support, best practices, site tracking design patterns: information + interaction + feedback slides have a *lot* of information label alignment depends on information familiarity, ability to extend vertically, etc. when eBay redesigned its input form, it had to restate its earnings upwards indicate which fields are required/optional when only a few get the designation when B&N redesigned its account form, they kept *s on every field but dropped explanation Walmart does this correctly - the one optional field is marked required asterisk on label is much better than on input field try to avoid things that are optional the number one thing you can do to increase completion rates is to get rid of fields text labels for required/optional are best, but asterisk is pretty good text saying "use five digits" for zip code is less good than making the field that big use field length as an affordance, or else use consistent lengths to reduce visual noise group things with least visible differences Luke has said not all form actions are equal - make primary action more visually dominant eBay Sell Your Item: Add Subtitle - "What the hell? How can you mess up a one-field form?" in eye tracking survey, fewer fixations and less time when buttons were same when people talked about what they saw, they liked the difference people said "It slowed me down", "It prevented me from making an error" might become quicker over time worst performance was continue/submit on far right, go back/cancel on far left three successful variations of Submit | Cancel with top labels, people followed very clear path to completion, submit button left bottom if possible, get rid of secondary actions - nobody uses reset help and tips can create visual clutter: automatic or activated help for current element best eBay Sell Your Item: Choose a Selling Format has too much help three radio buttons, >10 help items on the page many different ways of displaying contextual help exactly as needed primary goal for every form is completion have smart inputs so you don't have to require a particular phone number format have smart defaults to reduce choices people have to make alignment helps define path to completion - let eye scan straight down for long forms, let people see their progress and save make sure tab order is correct - use tabindex attribute use progressive disclosure: show people features when they need them use gradual engagement: let people use the site and then register example: jumpcut.com and geni.com Fidelity myPlan uses sliders. it dynamically shows you information without form submissions. there are many ways to expose dependent inputs - think about all your options slides explain lots of the possibilities use inline validation for error-prone fields - validate inputs, suggest valid inputs, etc. i.e. people really like "how secure is your password" progress bars i.e. when picking a username, show whether is available prominently indicate an error, show what the error is, say how to fix it by the field, use red and bold (doubled visual language, not just red because of colorblindness) again, say how to fix disable Submit button after it's clicked so people know something's happening provide in-progress indicator communicate that submission has been successful avoid changing inputs that have already been provided tell people before they start filling out a form if they need anything hard to get (VIN, etc.) <label>, tabindex, accesskey, <formset> wufoo.com, formassembly.com, icebrrg.com will create forms for you Pownce signup is good - but don't need to ask for birthday, gender checking availability of username could be automatic
Back to main AEAChicago2007 post
how to approach adding behavior to your site
will give copies of his book, Bulletproof AJAX, away to good questions
be pure: separation between HTML, CSS, JavaScript
so progressive enhancement, beginning with a solid structure and then
building on top
begin with the content, add structure, then presentation on top and
behavior on top of that
structure = HTML, presentation = CSS, behavior = JavaScript
the beauty of this is you can strip away each layer and still have
something useful
CSS and JavaScript are subservient to structure
DOM = document object model, the vocabulary used to talk about the
loaded document
CSS and JavaScript are in some ways similar
for CSS, use p{}. for DOM, document.getElementsByTagName("p")
not that different from CSS in terms of visualizing the page
page is elements with properties
English: get all the p elements
lolcat: i can has p elementz
CSS: #foo{} vs DOM: document.getElementById("foo")
CSS: #foo p{} vs DOM:
document.getElementById("foo").getElementsByTagName("p")
on adactio.com, right-hand column has behaviors
Click on headline and content will hide
Customize choose a theme part
think about it in English first, then translate
get all the headers in the sidebar, then attach the toggleHeader
behavior to each onclick
toggleHeader finds all the elements in the same div and hides all
but the header
didn't touch the markup. just added the behavior. "I'm being *pure*."
in the real world, sometimes have to add extra div or class
"The standards police aren't going to come visit you in the night."
be vigilant: try to avoid mixing layers
try not to use inline styles
similarly, don't do <a href="javascript:..."> "This is the spawn
of Satan."
because it's not a valid hypertext reference (href). JavaScript
isn't a protocol.
avoid it like the plague, there's no good reason ever to use it
similarly <a href="#" onclick="..."> "href equals octothorpe"
it's mixing up your behavior and your markup when you should
keep them separate
think about the semantics - is it a link, is it a paragraph
common pattern of "add your review and rating" page
can do star hovering rating with CSS
semantic purpose of star rating isn't five links, it's a select
(or radio buttons)
so mark it up as a select, then enhance
stolen code for function selectReplacement from Aaron Gustafson
it replaces a select element with a dropdown unordered list
you can style
new book Advanced DOM Scripting, final chapter by Aaron about
this code
redeparede.com - started as Brazilian version of Craigslist, now spread
select category, then select related subcategory (i.e. Community
Discussion, Art)
first semantically mark up, with subcategories related to categories
- optgroup element
optgroups are a way of associating sets of options in a select
so just make one select for the subcategory, since can figure out
category from subcategory
sometimes more clicks are better: subcategory list is long but only
one click
better to click twice and have the category and subcategory
so use createSelectFromOptgroups to replace the one subcategory
select with two
"Feel free to nitpick the code and tell me what I'm doing wrong."
JavaScript has started to be used unobtrusively instead of evilly in
the past few years
and then AJAX came along, and people suddenly started ignoring
separation of behavior
but can apply progressive enhancement to xmlhttprequest: he calls
this "hijax"
"If I've learned anything from Jesse James Garrett, it's that buzzwords
will get you everywhere."
if you want to build an AJAX website, build a non-AJAX website first
once that's all working, then go in and intercept those clicks: hijack them
use xmlhttprequest to shuttle data back and forth to the server
"Don't try to do business logic in JavaScript in the browser; that way
lies madness."
that's creating an unnecessary technological barrier to getting stuff done
rapha.cc example - expensive cycling wear
widget on page for adding to shopping basket - just changes shopping
basket part of page
built with full page refreshes first
request.open('POST', 'basket-update.php', true); (true says is
asynchronous request)
request.onreadystatechange - if ready and status done, set
basket.innerHTML
challenges of AJAX don't lie in the code, though
tricky bit is the design challenges
you're taking the browser out of the equation (browsing model) and
must replicate functionality
what's happening? what happened? what does the Back button do?
what does bookmarking do?
browsers have progress bar or spinning icon to show they're working
you need to provide status information - progress bar, spinning circle, etc.
look to the Flash world because they've had to do this for years
conventions can be good, especially since AJAX is new and scary
37Signals's yellow fade indicating something just updated
if users want to bookmark a changed state, you probably shouldn't be
using AJAX
same for using the Back button
you're changing too much of the page, and users aren't comfortable
to see whether you're changing too much, do user testing
if you're changing the markup with JavaScript, how can you say
you're separating behavior?
create new markup, not new content in the document. rearranging is OK.
same thing Eric was talking about with
for rollover images that are links that just pop up info, what use instead
of href="#"?
using link because links do :hover properly
would suggest using onmouseover instead of CSS
:hover and :focus are getting behavior in presentation
"Hover considered harmful" blog post
he'll use :hover for changing link color, etc., though
difference between GET and POST?
don't use GET to create, update, delete anything on the server
had Delete links in Basecamp - it's private instead of spiderable,
but things got autodeleted
people had Google Accelerator that prefetches links, so it was
prefetching the Delete links
because the links were GET instead of POST
no one supports PUT or DELETE requests
Back to main AEAChicago2007 post
International Jugglers Association was in next room to Webvisions 2006 color, typography, iconography, microformats, flexibility start by keeping one object in the air, then two, then.... special announcement: has a new site, toupeepal.com (Wig 2.0) color color is emotional - becomes a problem when working with clients "I hate that green. It reminds me of my ex-girlfriend's quilt." clients say "more wow", like it's a Photoshop option interesting idea: choosing colors picked from nature photos - B&A article by Luke W. can use pixilate function in Photoshop to find major colors in photo (picture of Trump, founder of toupeepal....) Flickr group "Two colors or less" Drawn! illustration blog interview with Art Lozzi blend background colors so are harmonious, not competing with each other or foreground 31Three pulls dark blue menu color down into background of main part of page grain texture in background - add noise filter in Photoshop, monochromatic, reduce opacity reuse colors from palette (fourish colors) to unify page open color picker and reduce/increase saturation link color carries weight - on a link-heavy page, that color is important typography don't need many fonts, just need to use them well AIGA uses Georgia and Verdana - italics, letter-spacing, etc. Georgia responds well to all-uppercase with letter-spacing Robert Bringhurst, The Elements of Typographic Style "In heads and titles, use the best available ampersand." often want the italic version <span class="amp">&</span> webtypography.net transforms guidelines from book to web examples make sure fonts in graphics also harmonize can get on mailing lists for type foundries veer.com will send you cool stuff myfonts.com has a great email newsletter - interviews with type designers, history, etc favicons - the most important design element of any site! well, important, anyway. feeds, bookmarks, Subtraction's footer, tanyamerone.com same, cellphone really easy to make or really difficult scale down logo if possible, choose fragment of logo, or do something totally different maybe pick part of brand that isn't the logo toupeepal can just shrink logo. various examples in slides. or can use avatar of you (eep), which is apparently popular Flickr uses its branding but not its logo create in Photoshop, paste into Iconographer Delta Tango Bravo has a great collection of favicons Smashing Magazine has another add detail without adding complexity dropshadow can just be 2px repeating image across bottom of box suggest the box - background fade, round one corner only, gradient fade of one corner reuse themes, colors, graphics so e.g. backgrounds tie things together microformats way to make data available for someone's future application takes the guesswork out of how to mark up a particular piece of content http://microformats.org/code/hcard/creator SimpleBits's contact page has Download vCard link SPARQL - can query for only reviews by buddies (XFN) Scrugy is a wine review site - scrape wine reviews including from Cork'd "accidental API" - Brian Oberkirch Drew McLellan presentation, Can your website be your API? get greater results by using many microformats together microformats.org bulletproof content in slides turn images off style alt text so it doesn't look awful - and isn't black on black turn CSS off increase font size validate has he met Gary - purchases of Cork'd - and is he as crazy as on his videos? no and yes (phone). future plans for toupeepal, will he cater to the bald by choice community? hope to be acquired by someone like Google. are talking to Trump about funding. how do you design a decent-looking website around a bad existing logo? try to de-emphasize logo; those are the projects you don't talk much about with color, find the colors that are OK and focus on them with emotional reactions to colors, how do you prevent yourself from being the shrink? it's hard. change slightly, etc. important part is whether works for design. if client doesn't want to go into code view to do microformats, how can you convince them? depending on the CMS, might not have the ability to add markup put microformats into the templates; snippets for CMSs that support that interesting to have a microformats zen garden? yes, start building. there are content types that seem microformattable that don't fit the current ones create a format, use it, get others to use it, join mailing list and process. resolution designs for? bigger than 800x600 is fine now why does your octopus have ten legs? it's a decapus.
Back to main AEAChicago2007 post
Liz Danzico’s post about her presentation
Definitely the most controversial presentation.
abriefmessage.com - with Khoi Vinh edits many people but project with Adobe was first time she'd been edited in a while Adobe's design center editor redlined a sentence that ended with a preposition rules are easy, guidelines are hard lists with numbers are commandments, people writing them are experts, etc. Joe and Josephine, first personas in industrial design - Henry Dreyfuss, The Measure of Man Strunk & White, The Elements of Style Christopher Alexander, A Pattern Language many many others. Chris Messina, flickr Patterns Yahoo! Pattern Library Navigation must always be consistent. you can recognize a Chinese menu from a small window UT Austin, The Shape of Information, presented by Victor Lombardi at IA Summit can recognize Amazon left nav from color, content, space, leading, etc. Rapunyi Hills in Tokyo is beautiful very few street names in Japan, so they use landmarks, and those are on the Google map don't need Google searchbox of homepage on the Google Maps page need -> interpret -> navigate -> react, with interpret being the important step new Apple nav "inconsistent at every single page, which is awesome" So: Navigation must always be predictable and familiar. There is a magic number seven (plus or minus two). individuals can only keep about seven items in short-term memory but broad and shallow navigation structures are easier to navigate than deep ones So: There is a magic number but it always just "depends". Users must get to all parts of the site all the time. when you're dealing with a closed system, then provide navigation to all parts John Gruber of Daring Fireball talked at the AIGA/Apple speaker series asked audience who knew about the event from whom, and pretty much everyone knew from DF it's OK to get to an AIGA event without being notified by AIGA think about interconnectedness of web So: Users must get to everywhere from everywhere - but that includes external everywheres. Users must know where they are at all times. when wayfinding breaks down, people take matters into their own hands daylife's purpose is for you to get lost on the site YouTube doesn't have sense of place or structure, just jump around Barnes & Noble gains a significant part of its revenue from "people who bought this also buy" So: Users must know what's next, where can I go from here. The user experience must be seamless. Apple's Human Interface Guidelines has a very complete style guide - windows named "untitled" WordPress has its Codex to codify its interface original twitter sketch (my.stat.us) is about what you're doing "What are you doing?" and character limit are only constant across applications So: The designer must design beautiful seams. Shorter is better. how often do people make a mistake with Amazon One-Click? longer is often better: No one belongs here more than you, by Miranda July So: Short is better, and long is sometimes better too. Information architects do information architecture. cloaked society, secret handshake discipline good reason for explicit person to be responsible for deliverables we talk about moving between phases, really jarring words used to work at Razorfish when trying to figure out what IA was GM said "from now on, each one of you is your own project manager," and they were shocked instead of saying "we need to hire an IA", we should all figure out how to do IA So: Information architects do information architecture, and so should developers, designers, writers, clients, and users. this is scary, because pointing at research can stop an unwise client in their tracks you can point to research, but consider doing your own you can also point to this talk :) there's a chance Steve Krug is thinking about another book on usability testing on a shoestring students often flounder without rules - how do you avoid reinventing the wheel? Razorfish interviewing 8 people a day, hiring 3 people a week how do you teach people your practices when you don't know what they are yourself? created a project called Shallow Dive Project - like Dateline Deep Dive three days to solve a design problem using the resources in the company just gave them a brief, then after three days present to the entire company they found their own rules make research available to students, but present problems where they can experience the rules then let them decide which "rules" are actually useful how do you teach clients to catagorize content for a new CMS installation? subjective process, have to work through it together a favorite lie is "users will not scroll horizontally" relativist bent of this talk - learning rules to know when to break them there's value to learning rules, but people should be encouraged to decide when to follow them users may not need to know where they are, but do they need to be able to get back? studied news: the more tools people had to use the internet, the more excited and proud they were combination of bookmarks, RSS readers, friends, del.icio.us watch what they're doing - use of del.icio.us and bookmarks suggests need save feature what happens to accessibility when you're breaking the rules? what you do depends on audience
Back to main AEAChicago2007 post
internal search logs are a missing tool Jakob Nielson says 50% of users are search-dominated Zipf curve - long tail distribution - for search results in this case, try to optimize the short head look for seasonal patterns cluster types of queries to look for patterns how to capture search queries: search logs, local database, commercial search solution most frequent unique queries? do they retrieve quality results? which retrieve zero results? click-through rates per frequent query? most frequently clicked result? what are the referrer pages for frequent queries? which queries retrieve popular documents? then you generate specific questions i.e. Netflix which most searched and clicked titles are least frequently added to the queue? analytics won't tell you the answer to a problem, but they'll tell you the problem is there. User Research type SKUs into catalog site that they looked up in the printed catalog BBC has reports for "people who searched on X also searched on..." using session data segment needs by security clearance, IP address, job function, account information or extrapolate segments directly from the data associate real queries with a persona - now you really know what they care about Content Development start from failed queries - does content exist? are there titling, wording, metadata, or indexing problems "best bets" results defined manually identify points with no or way too many results where you could add help query syntax helps select search features to expose if people are using queries with boolean operators, make them more visible if get zero results, could show options to broaden search if get too many (200 or whatever), could show options to narrow Interface Design: search entry interface, search results consider what elements to include in search results - i.e. author name for books get more clickthroughs on result 10 than 6-9 on a page with 10 results Financial Times saw people entering dates; so let them sort results by date Retrieval Algorithm Modification Deloitte, Barnes & Noble, Vanguard show basic improvements (i.e. best bets) aren't enough needed to go into more complicated and expensive customizations add spell checking weight company names in metadata highly Navigation Design if created "best bets" to show at top of query results, can also use to generate index Michigan State University builds A-Z index automatically based on frequent queries cuts across organizational sils from what pages are searches initiated? those pages are failing and people are stuck. what are the queries from those points? Metadata Development classify queries as types of metadata, then mark documents with that information Netflix had movies, people, and genres get possible values for those categories - natural language, jargon, localization (lorry) most common queries are known-item - there's one correct answer long tail is often research queries, more open-ended do some sampling in long tail to check if it's very different from short head organizational impact bad search results demonstrate what happens when content authors don't follow guidelines look at common queries and make sure good documents aren't falling in results Google Analytics and others make it easy to email reports - viral spread of information Financial Times looks for spikes in queries to find breaking stories complements qualitative methods that can tell you *why* people do something need better tools for parsing logs, generating reports - thinks will get good this year Hitwise and Comscore can help you benchmark against other sites, but are expensive Google Trends may also be helpful having a hard time writing book because can't get data from people middle area of the tail may have fast-rising or slowly falling items has free template for analyzing queries
I'm an Internet Strategist at Amplify Public Affairs in Washington, DC, with a background in development and information architecture. (More.) The views expressed on this site are my own and don't necessarily reflect those of my employer or its clients.
You are currently browsing the archives for the Conference category.
del.icio.us links