I went to two days conference of Web Design World Boston. And man, I tell you, it was inspiring. So much to learn, so much to do.
Below is my random notes from the sessions that I attended:
TOC: Zeldman | Holzschlog/Marcotte | Bowman | Marini1 | Fried | Goto | Mulder | Kirkpatrick | Marini2 | Holzchlog
Keynote: Web Design – A Decade Under the Influence
Jeffrey Zeldman started this by saying, “I am not going to talk about web standards today.” That was shocking. — His web design project mentality: Everything goes to hell iun the last minute, so keep a paper trail and prepare to over deliver.” – 99% of successful project is picking right client — When presenting a design to a client, emphasize on the feeling that design represents, not the detail such as color and graphics. Example: “This design tells you that we are serious, stable and trustfull organization where this other design is more dynamic and not afraid to take risk” instead of saying ” this one is blue and use horizontal lines, where this one is red and use verticle lines.” — “Compeling contents beats any usability or great design.” — Think of your audience as community and they will eventually become one. Example: Slasdot: News for Nerds, stuff that matters — Cluetrain Manifesto “Markets are conversations” — Web is as much a heart medium as a brain medium — dontlink.com — Web is a focused, narrow medium — usability + design + writing, all has to work together, don’t fight! think of common goals — Passion. Truth not Hype — 90% of success is showing up — Give Time Time – Wake up in the morning and happy to be doing what you do. — presentation was created using S5
10 things to improve your web site – by Jeffrey Zeldman
- Focus and Go. stick to it, master it before expanding
- Follow your Heart “care” and it’ll show
- Be Original Your own turf
- Dessert or Floor Wax? Can’t be all things for all people. Doing one thing well is better than doing 12 things poorly.
- Avoid the Extraneous “Simple” Remove clutter, clear concept
- Know Your Audience Get to know them, Listen to what they have to say and grow with them. Don’t Make Me Think has a section on usability testing.
- Please your users Don’t worry about someone who is not your audience, he’ll click away anyways.
- Invest in Good Writing Ultimate upgrade a site can have
- View Stats but DON’T Stare Learn from it, why is one section getting no hits? Fix or remove.
- Web Standards, People!
The Marriage of Presentation and Structure
Molly Holzschlag and Ethan Marcotte — Semantic Coding – logical meaningful mark up — Cinnamon.nl, Disney Store uk, aol, CSS Zen garden
Creating beautiful Interfaces with CSS and Throwing Table Out the Window
It was crazy to be able to meet Douglas Bowman because he was the dude who when we were doing redesign of fast company, “how did he do it for Wired?” — he started the presentation saying: “I love what I do.” Great attitude — xhtml/css: beautiful, accessible, faster, simpler CODE, flexibIlITY, One version (PDA, Voice reader) — html file size reduced average 40% or so after conversion — Commercial sites are converting to xhtml/css — ESPN with 40mil page views saving is 2 tera bytes per day. $$$. — PGA CSS Drop nav, not flash — sprint, Quark, Adobe, Macromedia, Adaptive Path, Lee Jeans, Blogger — Grossweiler media, pixel perfect css layout — Chevrolet, Drop-down navigation done in css/JS — css vault — Style Gala — CSS Beauty — Web Standards Awards — White Space = GOOD Space — Implied boxes, don’t need to box everything just because css is block oriented… — List bullet don’t use list-style-image use background image — browsers default line-height is 1.2 em, too narrow. Bowman recommends 1.6em — avoid image replacement — single image rollover with negative background-position — switching color scheme use <body class=”cs1″> and #header {…} .cs1 #header {…} .cs2 #header {…}. Awesome. — Using table for tabular data, keep cellspacing=”0″ (you can delete everything else. — using favelets.com or boookmarklets.com –
Presentation slides
A Designer’s Introduction to XML
Joe Marini was awesome. He was a really funny guy who is a awesome front end coder (works for small start up in Seattle area called Microsoft, you may have heard of the company), I am an instant fan of him. I sat in two of his things and learned so much from them both. This xml one was a bit over my head, but much more understandable than any other “XML” presentation that I have sit in before. Especially useful was how he showed us inline xml within the html document (didn’t know you could do that!) … XML is used to describe data. download 143k zip file … simple business card example, just plain xml file with a link to stylesheet <?xml-stylesheet type=”text/css” href=”css_file.css” ?> you can use css2 things to pull attribute out of xml such as phone:before { content: attr(type) “: “;} will print <phone type=”cell”>617-555-1212</phone> as cell: 617-555-1212… however IE does not support CSS2, so use FireFox (“Did Microsoft guy just say that?”) … Using JavaScript/DOM to display XML. (Perhaps a better link at w3schools) … some simple (random) XSL syntax <xsl:template match =”tagname”><xsl:value of select=”text()”/>… <xsl:for-each select=”/path/to/”><xsl:value-of select”name”/><xsl:text>Text</xsl:text></xsl:for-each> … <xsl:if test=”@condition=’yes’”> __some loop__</xsl:if> … <xsl:sort select=”name” order=”ascending”> … (Those are taken from my hand written notes so syntax may be wrong)
Interface Design Insights
Jason Fried of 37 Signals – very radical interface design philosophy. Always remember to design from customer’s point of view… “Real Experience” Christopher Alexander is a architect who designs building from Real Experience”… Copy writing is the most important part of interface. (button titles and error messages) … “Epicenter Design” – what is epicenter? if you remove an element from the page/software and it still functions, then it is not epicenter. Start designing everything from epicenter… Three state of the web page/software – Ideal State, Blank State, and Error State. (All has to equally look nice for best experience) … Think “Visual Weight.” Avoid situation where everything on the page is competing from an attention.
Keynote: Web Redesign: Workflow redefined
Kelly Goto of Goto Media Web-Redesign.com Brand =”User Experience”… Bird by Bird : Some Instructions on Writing and Life by Anne Lamott… Build for Use by Karen Donoghue… User Experience. – Brand – IA – usability… Clear Communication … Define project Downloads… Target Audience … Action that user will take (or action you want user to take)… Homework on industry and competitors… “Card Sorting” from users point of view to organize content … Comments: We want to hear from you – “We would like to improve the site – what do you think of this redesign?” real user’s opinion… Consistency = “Comfort” “Reliable” and “Trust”… repeated good experience true brand … Long term design plan “Iterative design cycle” – Existing (v1.0) – Improvement (v 1.x) – Full redesign (v2.0) – Ongoing Updates and adjustment (v2.x) – Full CMS integration (v3.0)… Track Stats… Style Guide … Link… Downloads
How Users Surf
Steve Mulder of Molecular… first, a blanket statement about user is dangerous… w/that said certain behavior has patterns. … [Things to think about] How people use pages – Where users look – What they expect – How they scroll – How they read – When they browse vs. search – How they navigate – How they evaluate choices… “To predict the behavior of ordinary people in advance, you only have to assume that they will always try to escape a disagreeable situation with the smallest possible expenditure of intelligence.” – Friedrich Nietzsche… G and Z scan is a myth… Design encourage users how to scan… use color/images to place emphasis… Use consistent “page zoning” to guide the eye…. “Expectation of user”… Varies by the page type. There are mainly 4 page types. they have different user expectations and behaviors.
- Home: fewer user expectations = More design flexibility. Users are more patent than other pages. Will look more. See pointer’s eye track. “Where’s the navigation?”
- Section page: Scans body of the page first. “Put most important things in the body of page”… Users puts on “Blinders” on navigation. So don’t put child links on the navigation area. Also put things they may not expect in the body as well.
- Object page: Even stronger focus on the body. heavier navigation blinder. What draw the eye first? Create encouraged eye path.
- Search result: Body only. result is what they expect. Won’t look anywhere else. = no design freedom. If the user is drilled down in your certain areas of the site they expect search result to filter the stuff out.
Users will ignore graphical ads or things look like ads… users have instinct to close the popup… Certain things are expected in certain areas of the page, help in right to, home is left top or middle bottom etc… Wichita web site Location of Common Web Objects, Common E-Commerce Web Objects … YES people will scroll, WHEN (1) When they don’t see what they’re looking for but expect it on this page or (2) When they see what they’re looking for but it’s obvious there’s more of it… Avoid “scroll block”… reading, depends on task at hand … (Task 1) Scanning for recognizing choices (Task 2) Scanning for differentiating choices (Task 3) Found what he/she was looking for and read. … In general, scrolling is better than multiple pages…Very long line lengths can slow reading time Optimal Line Length: Research Supporting How Line Length Affects Usability… Shorter paragraphs get read more often… Search vs. Browse. a tie. Users will use best tool available, they don’t care how. Are There Users Who Always Search? … Users give up when searching, too few terms not enough filters, hoping to get lucky… Look at search logs for navigation labeling suggestions… Users are in a hurry, won’t read all when scanning, key headings… “Pogosticking” .. click on the link that looks good enough, then go “it that’s not it” hit back button, click on next link that looks good enough, etc… What makes a link purty? – keywords, can you tell its clickable? context – what’s near by?… Users tend to prefer fewer clicks BUT as longs as they feel they are closer to what they are looking for, they will keep going…
There are no stupid users… only stupid web sites
This was very good presentation – slides downloadable after filling stuff out
Rich Media Accessibility
Andrew Kirkpatrick, GBH
Sorry I need to keep writing …
Improving Usability with JavaScript and CSS
Joe Marini – This was GREAT. Loved it. I need to study Javascript.
The How and Why of Blogging
Molly
Related posts:
One Comment
I totally agree with your point of view