Read the previous talk in this series, The Arts & Crafts of Web Design - or What Would William Do? by Curt Cloninger, or view An Event Apart’s Table of Contents

Designing the Next Generation of Web Apps

Jeff Veen

• He’s going through the history of computers, how he liked Pong when he was six, and how it progressed.
• Jeff left Google about 5 months ago (today is October 14, 2008). 
• “When I’m feeling dumb, it’s usually not my fault. It’s usually someone not communicating something, [etc.]”
• Cholera - John Snow used design and the sanitation maps to show that a pump was causing the cholera, not the air. Took the map, drew all the deaths at each address, then used design by taking out everything that wasn’t proving his point.
• This is visual design oriented, not technical design. That’s why my notes here are sparse.
• Inspiration comes from all different places. If having difficulty, stop looking for a bit.
• Use the visual to help make statistics more real - The MegaPenny Project. (screens)
• Try to find the story in the data, and how to be a good data visualization designer?
• assign different visual cues to each dimension of the data. Maybe black marks next to each address, bullet points like an Indiana Jones global flight, whathaveyou.
• Remove everything that isn’t telling the story. Journalists already follow this.
• Learn to give up control, and that helps you on your way to be a good interactive designer. In can show up in any context, and that’s ok.
• CSS Zen Garden is a perfect example of giving up design.
• Jeremy Keith makes it clear that you can choose your style. My content can show up anywhere.
• An aggregator, so you don’t see any of the design. Relinquish control. 
• A braille browser. Letting go.
• Tons of data visualization analysis and examples. No links given out. New York Times Casualties of War. I wish he gave out links.
• Storytelling -> discovery. Allow them to discover their own stories.
• A huge percentage of Google’s audience was coming from outside the USA.
• 1) Start with the user 2) Know yourself, then an option #3, Then understand the user
• User research is important, but those two are so key. Put research into the context of what you know.
• “Everything I’ve built has come from the frustration that it didn’t yet exist.” - Matt Mullenweg, founder of WordPress
• Everywhere you look, inspiration can come from…. (he ends with screenshot of Pong from the beginning)

Skip to An Event Apart’s Table of Contents

Read the previous talk in this series, The In-House Designer by Cameron Moll, or view An Event Apart’s Table of Contents

The Arts & Crafts of Web Design - or What Would William Do?

Curt Cloninger

• It’s all about being like this William Morris dude, his ethic.
• Via Cameron Moll, http://tinyurl.com/6×4lg
• This William dude’s thing was:
1. Stay true to Nature and Materials
• What are the material properties of a pixel?
• We’re dealing with light: light coming off of a screen.
• Also dealing with code, but mainly, staying true to a pixel.
• Need not simulate a physical material
• Typography is our material: 
• push css-typography (like coudal.com )
• Coudal is using letter-spacing to change the kerning of these letters.
• http://poccuo.com/ If you learn one thing from this: Georgia, 40px. That’s all. Beautiful.
• oversized text = easy to use (vimeo vs. youtube, roov, twitter, 37 signals)
• Vimeo: It’s like it says, our service will be easy to use, see how easy it is to read this text!
• ROOV: Just use that space on the text, don’t fill it with a bunch of stuff
• 37Signals: “Work well”. It shows it is easy to use, gives you that feeling, so warm and fuzzy.
• Behaviour as material: It should look like it does what it does. When Ajax first came out, it was like “What! No. There needs to be a refresh.” So there needs to be a transitional animation so that it looks like it’s doing what it’s doing. Even though you don’t need to, just give the feeling, it’s our material.
2. Unite art (design) and hand craft
• When is “genius design” more appropriate than “user-centered” design? When contemporary visual culture becomes corrupted. When forging a new medium. Read: iPod is genius design. 
3. Unite the microcosmic and macrocosmic
• He started to get really interested in typography
• Started on the paper, the form of the type, etc, and went out wider until lastly, the printed matter on the page
• Showing detail on buildings
• If it doesn’t need to be scalable, don’t automate it, make each section slightly different.
4. value utility. value beauty.
• Beauty alone is a legitimate reason for something to exist.
• Now that everyone can make a cookie-cutter site for free, beauty and customization is more important than ever.
• This is not about taking over the page with ornamentation, but using it for flourish and make it beautiful. Great designers did these ornamental things for a long time, “until these Swiss designers came in and then everything went all” wonky. 
5. Enjoy work.
• Everyone is here because we enjoy what we’re doing and it makes us excited.
• So, ensure that what we’re doing is something that is pleasing to us.
• If you’re not excited, get excited by delving deeper, or maybe go into something else.
• Orchestrate things so that you do what you like (like what Cameron’s talk was on).
6. Redesign the whole world
• “My hope is to get mumbo jumbo out of the world.” - William Morris, on his deathbed. (As in, to eliminate it)
• Designers make the world. Design the context around your design.

View the next talk in this series: Designing the Next Generation of Web Apps by Jeff Veen, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Implementing Design: Bulletproof A–Z by Dan Cederholm, or view An Event Apart’s Table of Contents

The In-House Designer

Cameron Moll

• Cameron Moll works for LDS Church and in-house design.
• He’s excited about having the team be over 30 people and to work with a big team. He had been a freelancer. He can understand how both ways of working go.
• He’s using “designer” loosely.
• Designers spend their time 1) doing design (the work), 2) telling people about your design (publicity), and 3) convincing people to let you design (relationships).
• A key skill for in-house is the ability to influence and draw people in. Your employers are not exactly sold like they are when they are going to go hire an agency.
• Must build relationships to have the workflow go smoothly. That’s relationships betwen engineers and designers as well.
• Great designers are also great communicators. Communication (lack thereof) can often be the barrier between greatness and failure. The cake decorating dilemma (http://cakewreckers.blogspot.com)
• Discussion with a client, spent most of the time discussion color and aesthetics. 
• He ended up ending the projects and they never used the design. He presented it as it would look. 
• He wonders what would’ve happened if he just presented functionality first, and then as those discussions are complete, bring in visual.
• Later, introduce color, introduce layout, etc.
• The Design Excellence Program
• Build up the knowledge and capabilities of the designers working for the organization
• Annual Design review
• Weekly design reviews - his designers find it to be the most useful thing that they do.
• Workshops: Fundamentals of Type, HTML/CSS I, HTML/CSS II, First Principles of visual design, design leadership & Communication
• Design conferences (like An Event Apart!)
• bit.ly/checklist - checklist from a blind person about accessibility and things that really concern them, as well as other accessibility things
• Strengthen long-term relationships with others who may influence the work
• Internal departments
• Local colleges and universities - the schools need to be teaching designers this CSS/HTML curriculum as well, as they need to understand both aspects of it.
• Vendor relationships
• Establish the culture and environment necessary for good design to flourish
• northtemple.com is his LDS church’s internal blog.
• Journal of design
• Establish a culture so that the design can flourish
• It’s easy to let the environment around us hamper your work, but this is not necessarily so. Surround yourself with inspiration, including at home, or a place where you go to sit. 
• Telecommute! “Those of you who aren’t [telecommuting], I recommend you do so.” He does it once a week. There’s an article in this month’s Wired that is promoting telecommuting.
• Uninspiring workplaces are detrimental only if you allow them to be.
• “I just got dilberted. Again.” If you are not willing to compromise, know when to get out if you must.
• If you go to freelancing, make sure you have some sort of residual income. A product that you’re selling, or for him the authenticjobs.com website, anything like that.

View the next talk in this series: The Arts & Crafts of Web Design - or What Would William Do? by Curt Cloninger, or skip to An Event Apart’s Table of Contents

]]>

Read the previous talk in this series, Design Lessons in Chess by Rob Weychert, or view An Event Apart’s Table of Contents

Implementing Design: Bulletproof A–Z

Dan Cederholm

• Craftsmanship: Vermont is craftsmanship by nature. Why? Your impression of Vermont… “I think of a guy with a beard building something, a human behind the design, not a factory.”
• “When something is well-crafted, it reflects that a human was behind its design.”
• The browser landscape is changing - it is a time to embrace progressive enhancement (for JS) and progressive enrichment (for CSS).
• These items will be referencing his demo site, http://icedorhot.com
• A: Anchor links with meta information (a bulletproof example)
• Screenshot of popular drinks box from slide (10_populardrinks)
• a display block and use floats to keep things appropriated 
• B: Border-radius (progressive enrichment)
• border-radius is promised with CSS3, yay! (in 2000 years :/)
• Vendor-specific solutions of the -webkit and -moz options
• Layer background images and border radius with clip the background image so that it does not exceed past the rounded section, maintaining the rounded corner.
• Firefox2 not as great support for that clipping of rounded corner, so it’s a little bit of aliasing, but so it goes. It looks ok in FF2 if contrast is low enough.
• He puts these things in an enriched.css, so has border-radius and the webkit and moz styles in there, and only cool browsers use them.
• What about uncool browsers?
• Well, they get square corners. Tough cookies, still workers. That’s ok and that’s good. It degrades wonderfully. It affects the design in minimal ways.
• Great for prototyping before carving the images out.
• C: Color transparency with RGBa (progressive enrichment)
• Hovering over the city makes it semi-transparent with temperature (screenshot)
• opacity sets the value for the element AND all its children, including the text, blek!
• background-color: rgba(0,0,0,.7) 0,0,0 is black, and .7 is the opacity, and there is no usage of png or any other deal. ¡Que bueno!
• Tiled png would reach more browsers, but rgba is great for prototyping before carving out final images.
• D: Do websites need to look exactly the same in every browser(.com)? No!
• D: Decision makers who get it.
• It’s not the end of the world if some browsers don’t get the opacity from rgba and if they have square corners instead of round. IE6 is still perfectly usable.
• The h1 headings in foamee.com have little flourishes right after and before the name. uses generated css content to generate the image: PERFECT USE OF CONTENT PROPERTY for :before and :after
• It’s ok: tiny visual enhancements that do not affect the layout
• E: Easy-clearing floats (reexamining past methods)
• This is not what floats were intended for, but this is what we’re dealt so we have to play it
• Dan likes the clearfix:after clearing method. 
• Dan tried what I do and made a big giant list of things and not adding the clearfix class (but too unmanageable)
• So instead he changed it to .group and it doesn’t look as scary as .clearfix
• Then lists *+html .group: {min-height: 1px} and * html .group{height:1%;}
• IE8 will supposedly support generated content, wahoo!
• F: Frameworks
• He uses Meyer’s reset.css and saved himself 155 times of writing margin:0 padding:0 for mtv.com
• Also in his framework he built he includes the IE6 filter png fix (* html #selector{ filter: progid.blahblahblah}) as well the clearfix.
• G: Gridlasticusness (bulletproof)
• Dan doesn’t have a design background, so he’s been learning about web design as he’s going.
• Implemented grids on simplebits
• Each grid will have em value
• Em-based layouts force you to ensure ultimate flexibility
• Em/pixel values make more sense when using the 62.5% method - end up with a base ten emming math reference. 
• Ems should also be used for margins, borders, etc as well.
• Avoid setting font-size and width on the same element - gets confusing and you throw off your base. The calculated width is going to be different once you change your font-size.
• Adjusting font size can throw off your grid too.
• Set a max-width if using ems on elastic layouts!
• Think modular - don’t get overwhelmed by so many sections. Partition your sections.
• H: Horizontal grid. sure. vertical grids? Kind of. 
• Be realistic about what’s going to happen. Make lines jagged, put different lengths of content there so that it looks realistic and they know what to expect. (Screenshot of “everything is just fine here”)
• Use groupings so that things are grouped and at least sections have the same tops
• I: IE8 still refuses to resize text set in pixels (reexamining past methods)
• Say what?
• Dan logged a bug, and they closed it right away without even opening or validating it or posting a workaround. 
• He’s still using ems because of that.
• Page zoom is there, does this eliminate our issue of font-size? No, because the text size is still there. Dan uses text size quite a bit and his eyesight is decent.
• J: jQuery. 
• He’s never talked about Javascript in a talk before, but he’s just that excited about jQuery that he’s bringing it in here.
• He’s just expressing his love for it.
• K: Kitty (kitty screenshot)
• L: .last (bulletproof)
• Simple way? Just add the last class with jQuery $(”ul.lst li:last”).addClass(”last”);. Sooo, that may not work without JS disabled, but your site will still work and it’s just a presentational thing.
• M: Must skip a few letters if we’re going to get through this
• N, O, P, Q, R…
• S: Shifting backgrounds
• Silverback’s layered pngs and http://therissingtonpodcast.co.uk
• Position background with a -80% or other - percentage. 
• http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/
• T: Today’s MacBook release… MacBook Sun(tm), in ten minutes, it’s going to be huge.
• U: Ur stats.
• “When can we ___?”
• “The answer is simple: when your site’s (or sites’ if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless.” - Eric Meyer
• If you’ve got all IE6 users, may not want to do border-radius and other stuff
• Etc, etc. Listen to your user stats. Don’t care what other people do, because you’ve got to look to your audience.

View the next talk in this series: The In-House Designer by Cameron Moll, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Live Code Workshop with Eric Meyer, or view An Event Apart’s Table of Contents

Design Lessons in Chess

Rob Weychert

• Chess is cool.
• Rob Weychert really likes chess.
• Strategy: overarching, long-term plan. Tactics: Short-term, small things to support the strategy and make it happen.
• Visual design is a tactic.
• Keep your endgame in mind.
• Opponent as user: In Chess, you do your move and your opponent’s move, you are moving them to defeat. Limit your user’s options so that they can only do what you want them to do. Make the path to completion obvious
• Opponent as client: You make a move, say “I have this problem for you to solve” and client responds, on and on until the game ends.
• Opponent as colleague: You don’t want to play against someone who can’t challenge you, is boring. 
• Lessons in Chess
1. Content is king
• The king needs to be the center of everything you do
• You may weave this complex strategy with getting the queen, that you don’t even notice that the king is vulnerable and you lose sight of the end goal.
• Get caught up in various solution, you’ve overshot and you’re missing out that content is king. 
• A slide from Jeremy Keith: Style/CSS & Behavior(Javascript) = Structure(HTML) = Content ( King!) “Thank you Jeremy!”
2. Know your history
• 2 Things to know about Bobby Fischer: 1) Brilliant chess player 2) Real meaniehead. A difficult person.
• He arrives at the world championship and he makes all these demands: first 7 rows of chairs must be gone, TV cameras must go, etc, etc. Even before the game started, he’s working on his opponent by just being himself.
• It wasn’t just about the Chess game, it was all a bunch of KGB breathing down their necks and drama in the room and Fischer being a jerk and blah blah blah.
• So Fischer’s opponent cracked and lost. Awww :/
• Know what your client likes, look into the history of that information, and go from there.
• Album cover for his friend making an album in honor of Tesla. Yeah, the electricity guy.
• Friend loved Tesla’s overcoming the typical views of his work at the time, especially in the face of the “advertising” being done by Edison.
• Decided to pretend to make it an advertisement that Tesla might make offering his services today.
• So Weychert looked into the ads of the time period of Tesla, including making sure the typefaces he used were authentic, and built it and designed it from there
3. Think ahead
• http://www.epitonic.com/ - Never more than three things. Silly. Not thinking ahead.
• Jason Santa Maria’s site - beautiful, art, builds, forward-thinking
4. Don’t get too attached
• Don’t get too attached to the queen! People will protect the queen even more than the king. No.
5. Act with purpose
• A sister lesson to “Content is king”
• The king is your world. Every move has to be focused on capturing opponent’s king or defending your own.
6. Obey circumstance - you have to act in line with the things in front of you and adapt if something throws you a curveball.
7. Principles are your friends, except when they’re not. 
• “The man who knows how will always have a job. The man who also knows why will always be his boss.” - Ralph Waldo Emerson.
• We may tend to be too pedantic or not pedantic enough regarding our principles. 
• “I ran your site through the validator and there were 6 errors and I think you could be doing a more to justify your existence.” - Rob Weychert, imitating lame pedantic people on the web.
8. The Journey is as important as the goal
• “What I do is not play, but struggle.” -Alexander Alekhine
• We go through and we see what doesn’t work and struggle through, and it may never see the light of day. But we struggle through, learn, and progress.
• What we know it “the stuff we learned in not getting there.”
• On a comp for a company named Philebrity, he learned “The most important freelance lesson of all: Get half the money up front.”
• Businessdk - he learned that he really doesn’t want to do a newspaper site. Important lesson! Mountains of failure!
• If you take away one lesson: love your failures.
• “I had a client where the site was predominantly in yellow, and they told me that yellow is the favorite color of crazy people” - An apartnik’s comment
• “Nothing is ever wasted.” That time and energy may not pay off immediately but perhaps down the line.
• “Yellow is the color of intelligence because it takes the most energy to see it.” - another apartnik

View the next talk in this series: Implementing Design: Bulletproof A–Z by Dan Cederholm, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or view An Event Apart’s Table of Contents

Eric Meyer Live Code Workshop

Eric Meyer

In this talk, Eric will be going through CSS questions and websites previously submitted by An Event Apartniks.

• http://www.stratom.com
• Dropdown menus… “Are those coming back and I didn’t hear? Because last time I heard, that wasn’t so good.” - Eric Meyer
• menus: <li><span><a> - span had a background image, but li had none. Why not just take out the span and put that background image on the li?
• “Spanitis” 
• <div id=”menublock”> is wrapping the menu ul - why? Just put menublock on the ul. Not everything needs a container!  Sometimes just the element can contain itself!
• https://mms.mckesson.com/html/main.menu.mck… macdeek?
• A lot of px sized text. Tsk tsk tsk. It’s no longer a real issue though, now with the death of IE6 (IE6 is dead woohoo! Also more implementation of position: fixed is another sign of its death ;). “The death of IE6 does not mean that it is dead for you.” - Eric Meyer
• <p class=”p”> Stop! <p class=”topnews”> I can get, but =”p”? Stop! Inheritance!
• .mck files: incorporating branding into your file extension. Why not?
• No background-color included for html, body. Tsk tsk.
• Everything done in px is asking for trouble. If you’re going to use px, set the body to px, and then use percentages for everything else. Relative font-size is not going away. Set a baseline. Setting px on everything is the same problem as setting font-family on everything. A change is a big headache.
• li background-image: good for bullet replace, but put the background-image on the a element so that you can have a rollover without having to use JavaScript.
• overflow: auto magically makes floated elements expand to take up the height of their children. Sometimes have issues with scrollbars being invoked by browser, but magic. Eric hasn’t been able to have anyone explain to him why this works, but it does.
• http://www.delta.com
• A lot of style attributes on the markup. You’re combining style and markup, which we spent the better part of a decade trying to get away from. Try your best to eliminate inline styles.
• The “Book a Trip” section should really be a table - arguably, it is a data form where your data has yet to be filled in by the user. This begs the question, are all forms tables?
• Why does Eric use tables over dls or whatever? The semantics are a very subjective thing. He does whatever is most pain-free, so sometimes OL, sometimes DL, sometimes a table.
• Firebug input a -x-system-font: none; in the CSS, that doesn’t actually exist in their CSS. -x-blah is probably from Firebug and not from the actual CSS.
• “Using floats for layout is a hack.” - Meyer
• http://www.tablethotels.com
• Use shorthand CSS declarations so that your CSS is smaller, easier to manage, etc. Don’t keep it separated!
• The form as a lot of divs… 
• He has a hard time for getting irritated with form markup because of what he was saying to me earlier about it being so subjective and dependent on the developer’s feeling of semantics for that form.
• http://forwardlymphoma.org
• If something has an alt text of ” “, then why is it not a background-image? 
• <img> of a sphere, then <img> of a button text “Donate”, and both were alted to “Donate” “Donate”, annoyance for a screenreader. Just have alt text of sphere be “”, or even better make it the background-image.
• overflow:auto to have scrolling sections (the look of frames) may be getting more popular in the future! The bad thing with frames is that there are a million files all over the place, not the scrolling thing. 

View the next talk in this series: Design Lessons in Chess by Rob Weychert, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Underpants Over My Trousers by Andy Clarke, or view An Event Apart’s Table of Contents

Special Adobe Session: Web Workflow with the Adobe Creative Suite

Adam Pratt Sponsored by Adobe

• CS4 walkthrough
• This project includes >1700 Person Years of development time to “give
  birth to the baby”
• Photoshop
• GPU acceleration
• Real-time canvas rotation! Really, really cool(tm)
• 442MP camera capture. Lightning speed zooming on this massive file. 56.3% zoom and everything still looks great, from new anti-aliasing engine.
• You can clearly see signs that are 1.5miles and 2 miles away. Cool deal.
• New bird’s eye view to zoom in and out quickly. Shortcut key for it.
• Once you zoom over 500%, you can see the pixel display. Yes, each color for each pixel. Cool.
• Content aware scaling - rather than squashing 4 people when you want to squish a 4×6 to a 4×3, it would make people super skinny. But content aware scaling will keep the people normal but you can scale and crop it over… really snazzy.
• Illustrator
• Improved gradients.
• InDesign
• XFL - FLA format provided in XML. So you can take your inDesign document and bring it over to flash. Neato.
• Good for taking your print publications and taking them online. There’s a convert to web catalog type thing option (real name please?) - like “view my ad online” where you turn the pages and look through the catalog with flash. Some people have been doing this already, but either huge jpgs or junk looking text. Soooo this is awesome because then people’s print catalogs that you create can go straight to the web without any work at all.
• Flash
• The bowing tool - create separate but attached elements and the can interact, like sections to a crane’s hinges, and then move the pieces around and they are all attached.
• Motion Tween - with a couple clicks, can create a tween. Easy enough, but then you change your mind, and that’s never fun.
• Implementing tabbed browsing across the suite
• Fireworks
• color pallette is working right in the apps, running flash within their own apps
• Better PSD support
• Export to MXML directly to flex!
• Acrobat
• PDF export - use password to open doc OR if don’t know password, maybe they can see it but no printing, etc.
• a PDF created in CS4, someone can use comment tools in the FREE reader. ONLY because you created it in CS4, though, can they use the comment tools. Usually they would need the pro version.
• Dreamweaver
• Visual notification that files are too large. Allows to recompress the original - recompress the web saved graphic to a lower sized file. That’s pretty cool. You can clean up the slop without having to go back to a designer.
• Live Code/Preview
• Tab support still - new for Dreamweaver
• links under the tabs to the files that it references. Don’t need to hunt and peck like we used to.
• Running webkit inside of Dreamweaver - Safari - on both mac and windows
• Live Code option - the code changes live in the split source view. Annnnd, you can freeze JavaScript, so you can see the change in your code based on the JavaScript. Awesome for troubleshooting.
• Emulation of the Firebug style inheritance display (code and style navigator)
• Multi-touch support for Photoshop - the pinch and rotate. Was this included in CS3? Cool regardless.

View the next talk in this series: Live Code Workshop with Eric Meyer, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Designing the Details: Web-App UI Design Beyond the Basics by Jason Fried, or view An Event Apart’s Table of Contents

Underpants Over My Trousers

Andy Clarke

• A design related talk
• Comic book analysis- the transcripts of the comic from the writer
• “Final panel on this page, and it extends across the entire bottom tier of the page” - this is clearly a direction from the writer to the designer. This doesn’t happen anymore on the web.
• Don’t buy a CSS book, go buy “Understanding Comics”, to greatly influence web design.
• Eliminate the borders, and your eye extends beyond the normal bounds. In doing so, the reader will allow more time to read that block, as the amount of time to read a section of text (particularly with comics, the entire slideshow is comic screenshots) is bound to the size of the block that it is in, or without borders, it then extends to the boundary of your comic book or screen.
• How many divs for this?
• None. It’s a UL of news items. Code, replete with markup
• We can do lots of things inspired from comics to help people find their content. 
• Sort of break away from the grid approach, although the grid is still there, but just much more subtle. Looks less griddy.
• How do we draw the eye? Comics use speech bubbles. Web can use images. 
• We don’t build up suspense and drama for the web.
• Watchmen : pages 4 and 5 of slide PDF. 
• Kinda like splashpages. Forget what we used to think about them, they used to be front covers. No, instead make them front covers with content, explanatory and introductory.
• How much of your design process do you reveal to the client?
• Hardly at all. People don’t care about how, they just want to see the end result. That’s more a conversation you have with your peers more than you delve into with your client.
• Andy Clarke shows clients fewer Photoshop markups, he shows a working prototype.
• He deals with being a 1(to 2 to 3)-man shop by setting expectations properly in the beginning, so they don’t think you’re a 20 person company, and also have a good workflow and collaboration with the others in your setup.

View the next talk in this series: Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, On-the-Spot Usability Reviews by Robert Hoekman, Jr., or view An Event Apart’s Table of Contents

Designing the Details: Web-App UI Design Beyond the Basics

Jason Fried of 37 Signals

• Hilight the craftmanship of our product
• The calendar items that have active items are not emboldened, but normal, and the inactive pages are weakened. Don’t focus on normal and strong, but normal and weak. 
• People often design the screens with a series of functions and goals, but think about flow and how that’s going to work. Use JS/Ajax to make flow more smooth.
• Think about Before, During, and Next
• You should minimize having to use the mouse. You don’t want to keep using your mouse. Think how you can focus people’s attention on the next thing they have to do. 
• Add contact, the expected item pops up in Ajax popup, you select what you want. It pops up, the focus immediately goes to the text box where you want to type the note. They start typing, and then they use the mouse for the first time to add the item.
• Next time people will want to add a follow up task. So, add a little yellow bar there with the “Add a task” link deal to it, which will expand to a text box with the allowance of an addition of a task.
• Copywriting is key
• “Who can see this person?” It’s a permissions issue, but don’t make it “Permissions”. Make it “Who can see this person?” Then continue the conversation with the options: “Everyone, Only I Can, Select a group…, Select people…”
• Write your copy like you would talk to someone. Change things, don’t do person(s). Make it “Delete the selected person” and then “Delete the 2 selected people”. Just like we pay attention to pixels, these things matter because it contributes to the user experience.
• Be as explicit as you possibly can. Don’t do “Advanced”, give people an idea. 
• If you’re going to “add a category”, type “Add This Category” to the submit button. Don’t say “Submit”. No one says that. Say what you mean.
• When hovering over stuff and having sections activate (like a hover tab that appears on hover of a TR), let it stick around a bit in case they overshoot. They have found .25 seconds to be a good amount of delay time. If off the target for over .25s, it will disappear then. This is the same for certain areas that for someone reason you want to have a delay to appear as well: .25s.
• Allow things to have a delay. We’re accustomed in nature to things not happening instantly. When checking off an item in a todo list, allow it to relatively slowly (slower than instant) cross out, and then fade out to delete. This seems more natural.
• Photographic memory
• The app should remember things.
• Create a task - there is a checkbox for “Let everyone see this task”. After making the post, remember this. Remember the last default settings, because whatever they just had as a preference they will likely want to keep for the next time around.
• What just happened?
• Allow ppl to know that something has happened without having to reload the page. The Yellow Fade Technique™. Also known as .highlight, or whathaveyou. Before the page would reload, but now in the Ajax world, this allows a notification. It feels natural.
• Allow dialogs to come up that notify and then fade away. Give them some sort of confirmation that it actually worked.
• Drag and drop visual cues to allow people to do tasks with an immediate visceral experience
• reorder TRs by drag and drop
• Show information (the “drag this item to a page in the sitebar to move the note to that page” box) as it’s needed - not on an immediate click, but wait until they’ve gone 200px to the right (toward the sidebar).
• Eliminate error messages where you can.
• Most cases it’s not an error, but an inconvenience. They add a new to-do list without naming it first. Most apps would say “error, requires a name”. Well can you just name it “List” and they can change it later? I think so. Just do that. Don’t error, just apply a default.
• Applies thumbnails to a document as it is added, so on the grid view, can see the thumbnail next to the item. Must be generating it server side and applying an image thumbnail metadata to the piece of content.
• These things take extra time, but these things matter. Jump people to where they need to go, implement JavaScript to let them know where they need to go.
• 37Signals made a conscious decision that their products will not work without JavaScript. And that’s okay for them, some projects that won’t fly. But state that in the product requirements that you’re selling.
• 37Signals uses Prototype
• “We use Prototype because Sam, the guy who works for us, uh, he developed Prototype.” - Jason Fried
• He likes to use words as much as possible without icons
• The idea that everything has to be obvious is unimportant. The horizontal drag to a new page, that’s not mission critical, there’s nothing informing the user that they can do that, and that’s okay. If they don’t know that, it’s not a big deal either.
• 37Signals doesn’t use wireframes, doesn’t believe in them. Doesn’t use Photoshop very often. Doesn’t use a Photoshop mockup. They go straight to HTML, because that’s real and that’s what the customer is going to use.
• You never know if anything is any good until you build the real thing. Everything else is best guess, but once you start plugging in real content, it’s nothing. 95% of the time (cavalier made up stat) it is much better to start for realz.

View the next talk in this series: Underpants Over My Trousers by Andy Clarke, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Design Criteria: Actionable Ideas by Sarah Nelson, or view An Event Apart’s Table of Contents

On-the-Spot Usability Reviews

Robert Hoekman, Jr

• An interaction designer and usability specialist
• Purpose, benefit, usage are the three keys in analysing a site’s usability
• “Clutter isn’t good, texture is.” - Seth Godin
• Giving away copies of “Designing the Obvious”
• http://theideacenter.org
• Yellow on the site needs to go
• Any tips to educate the client to not mess it up?
• If this is supposed to be like a billboard, do that. Don’t unite. 
• People go right past text. They look, skim, and find “trigger words”
• http://asufoundation.org
• The tiny “Give to ASU” link is the whole point of this website. 
• Homepage-news blips should go somewhere else, make them three bullet points and then a take action button
• People skip blocks of text, so make these bullet points
• Then click “Make a gift online” and you start the payment process
• Before you get to the form, answer questions and paragraphs on previous pages. Make sure there is NOTHING on the page that is focused on getting them through the process
• The “Select a college or unit for investing” … dragons be there
• Just get rid of the dropdown menus for people who have come through a link from a specific fund, rather than have them be prepopulated
• Do as much as possible to the workflow to get that information out from that page and off to somewhere else, where then they click “give” and have it filled in from there.
• http://schooldude.com
• Not many complaints. Whatever your webpage is, make your entry points clear.
• No one is going to read the text on the homepage. Treat it like a billboard, just drive them to the current info. Make that the important information. Hilight it, and eliminate information 
• To get feedback on your own site:
• 5 second usability test. Show it to the user for 5 seconds - could be anyone, your mom, whoever. Then ask them to write down everything that they remember from the page. Your page should communicate its main purpose in 5 seconds and they should be able to remember that. Fast, cheap way to get that feedback.
• http://fivesecondtest.com/
• You upload your screenshot, it creates a link, and you email your link to people and they write the 5 bullet points they remember. Cool.

View the next talk in this series: Designing the Details: Web-App UI Design Beyond the Basics by Jason Fried, or skip to An Event Apart’s Table of Contents