I was full of mixed emotions. I had finally joined the Tribe! I had sold my soul. I can now develop iPhone apps! I am property of SJ. Yes, I had interned at Apple in the summer of ‘08, but I haven’t really paid much attention to OS X until I’ve owned one of these suckers for myself.

It’s not easy making the switch. Here are some of my gripes with OSX and some stopgap replacements I’ve found:

• No keyboard shortcut to maximize windows. (Solved with RightZoom)
• MacPorts really sucks (that is, having to compile everything from source is really slow). (Still outstanding)
• Switching windows between spaces is really clunky. (Sorta solved with Hyperspaces)
• No keyboard shortcut to “move active window to space”. (Still outstanding)
• No way to force windows to a grid. (Solved with Divvy)
• No right Ctrl key makes things really painful in Emacs. (Remapped right “Enter” with DoubleCommand)
• Aero Snap is cool. (Check out Cinch)
• The MacBook keyboard keys feel cheap compared to a Thinkpad. (Still outstanding)
• Really annoyed with Command-Tab switching. I just want to switch to a different window! (Still outstanding).
• Expose feels limited compared to Compiz’ Scale plugin. Cannot Expose all windows in all spaces. (Still outstanding)
• Closing window doesn’t kill the process. I suspect this is just a design philosophy I have to deal with. (Still outstanding)
• Not sure why, but my wrists generally tend to hurt more after using the MB rather than my work Thinkpad.

Okay, I’m not going to do all complaining. Some things I really enjoy:

• Drag-and-drop installation is totally elegant.
• Time Machine just works, and the zoomable interface is totally slick.
• Helvetica Neue, I love you.
• Something about the font rendering is just amazing.
• I get to look cool (and slightly cliche…) at coffee shops
• Desktop graphics & animations render smoothly with CoreAnimation. This stuff just looks slick.

I guess it’s not as bad as I’ve made it out to be. Well here I am. Swore I’d never do it, but you got me with all that shiny, Mr. Jobs. You got me.

My assumption is that you’re working with a local Git repository that is remotely linked to an SVN repository via the git-svn bridge. Let’s assume that your master branch is synced with the SVN repository, and you’re working on bug_12345_branch.

1. Make sure you have RBTools installed (sudo easy_install rbtools for me on Ubuntu Linux), and Review Board set up elsewhere.
2. Add a link to your Review Board URL in .git/config:

[reviewboard]
 url = https://(url_for_review_board)/

3. Make sure all your changes in bug_12345_branch have been locally committed.
4. post-review -o, and…
5. Voila! You should have a new review up on your Review Board instance.
6. (After you get reviews, you can modify bug_12345_branch, pull the changes into master, and then git svn dcommit, blah, blah, blah.)

Now typically, a YUI widget must be instantiated, then rendered onto the page. The render method is responsible for:

1. Writing the widget’s DOM elements out to the page
2. Binding handlers onto the DOM object.
3. Updating the widget state to match the JS object state.

(This information didn’t come easily. I had to dig around in some YUI slides and found this in Satyen Desai’s “A Widget Walkthrough” presentation at YUIConf 2009.)

Now we have a page that generates hundreds if not thousands of these tooltips. Instantiating each tooltip, rendering them into the DOM and generating event handlers for each was wasteful and slowed IE browsers down to a crawl. So this brought us to the decision to lazily instantiate each Tooltip instance. My first thought was that I should be able to overwrite the render() method to write to the DOM only after a mouseover onto the Tooltip trigger.

Here’s the folly: note that in the previous slide, the event handlers don’t go live until after the widget HTML is rendered into the DOM. Rats. Is there any way I can get around this?

Here’s some peculiar code for the Tooltip wrapper:

function ttWrapper(triggerNode) {
  this.tt = null;
  /* First mouseover will instantiate the real TooltipWidget. */
  var mOver = Y.on('mouseover', function (e) {
    this.tt = new TooltipWidget(/*config*/).render();
    /* Detach this listener so it won't intercept any more mouseovers */
    mOver.detach();
    /* A second mouseover must be simulated on the real TooltipWidget */
    Y.Event.simulate(triggerNode, 'mouseover'); 
  }, triggerNode);

}

The code installs a mouseover listener on the trigger node, then swaps itself out for the real mouseover listener that gets attached to the triggerNode when TooltipWidget gets instantiated. Event.simulate() is a strange, yet smart way to solve this problem.

File this under "Nobody is going to care", but I've always been instructed to write "Web site" in my technical communications class. I found it grating. Hooray for change!

Related posts:

1. A Web Site for Word Geeks Have you ever compiled long lists of words you thought...

The Marmite company apparently recognizes this dichotomy as well and so runs the advertising campaign accordingly:

Every section of the site is written from a love and a hate perspective. Check it out.

When you run a Web app like Wejoinin on minimal VPS resources (read: we’re too poor to get a beefy server), it forces you to go lean. We started to realize a year ago that our out-of-the-box Rails and nginx/Mongrel setup was starting to show its age; resource utilization would climb every so often and we’d have to kill and restart a Mongrel thread.

Well, with last night’s Wejoinin push, we’ve upgraded our server environment a few ways:

1. We’ve switched to prgmr.com with a killer deal on a 512MiB VPS. This is a step up from the 256 slice we used to hold at Slicehost at almost half the price.
2. We’ve switched from vanilla Ruby to Ruby Enterprise Edition  — advertised to take “33% less memory [when used with Passenger]”. It’s got a tweaked garbage collector, memory allocator and the ability to go in a tweak memory usage settings for yourself.
3. We’ve set up Unicorn, the new HTTP server on the block. It’s special in that each worker is in its own process, meaning that the load balancing is done natively by the OS. Also, this means that should a worker process start to get bloated, we can take it down gracefully without touching the others. Really. We can trust the OS. Plus, Git’s doing it.

With all these tweaks, we should be seeing Wejoinin rarin’ to go. Let us know what you think!

-Andrew

A couple of months ago I switched over to TypeKit, a cloud-hosted font service (buzzword! “cloud” gets me all warm and fuzzy). They basically take your font stack and enhance it with @font-face goodness, pulling in lots of fonts from their library.

Why not roll a @font-face implementation yourself?

The availability of good, high-quality, licensed fonts out there is still pretty small. The hoopla over @font-face has been centered around the fact that the fonts are unobfuscated, and anybody with the gumption to do so could go out to your site and steal yer font. So I’d say if you have a font you want to put up on the Web, you’d better make sure the font publisher/licenseholder is kosher with that.

(Ironically, Microsoft got it pretty right with their EOT font format, drafted way back in the days of IE 4 (!). Oh yeah, TypeKit takes care of EOT fonts for you as well.)

(Also, Mozilla is pushing their WOFF format which is currently supported in FF 3.6. Typekit does that too!).

So, how’s TypeKit working out for you?

Well, TypeKit’s not bad. If you’re running a cutting-edge browser (Safari 4, FF 3+, Chromium 4), you’re going to see the font shininess. If you’re not, you still get the default stack.

A problem way early on was the fact that Firefox for Windows was rendering certain fonts with very, very jagged features (see comparisons). Turns out this was a fault of both the font and the OS/browser — certain browsers and OSes don’t render hints properly.

The best solution I’ve found? Use a better font with better hinting.

I’m using FF Nuvo Web and FF Enzo Web Pro:

All in all, I’m pretty satisfied.

• people with autism have sensory sensitivity because they perceive details
• “if you want to understand animals, you must get away from language.”
• people w/ autism (and animals) focus on details, but not on gestalts
• the normal mind tends to drop out details
• those that switch from hand drawing to CAD usually do fine. Those who only do CAD when asked to do hand-drawing make all sorts of perceptual mistakes.
  • We need to switch back to hand-drawing
• Autism is about bottom-up thinking
  • Seeing details vs. the whole picture
• the brain makes file folders to categorize things into. Autistic kids have trouble making these folders
• sensory-based thinking is very specific: a man on a horse and a man on a foot seem like completely different men.
• Visual thinkers think with their subconscious
  • Grandin can see the decision-making process in pictures! Also, she has no subconscious.
• Inability to think of abstract concepts without visual picture to match to.
• In normal people, the language cortex covers up much of the visual, musical and verbal thinking.
• Designing for Grandin: things are too complicated. make them simpler, so they “just work.”

• We need to develop the talents of autistic kids as individual specialists
  • Visual - poor @ algebra
  • Music & math
  • Verbal - poor @ drawing

Martin Ware - Sonic ID - “The Future of Sound”

• does 3d sound installations in various places
• public spaces, for a good experience, must be beautiful, neutral
• how should electric cars sound like?

Alexa Andrzejewski - Adaptive Path - “Designing for Make-believe”

• Too often we copy instead of innovate
• Improve a product here and there based on technology results in only incremental improvement.
• people innovate only on what they know and see.
• Just because it’s possible doesn’t mean it’s desirable. With new “augmented reality” apps, people can violate social conventions by pointing
  cameras at each other.
• Activity: find the most interesting thing in the room. Now imagine it’s the next century’s new _.
• Called “body-storming”, or “tangible futures”

Jeffrey Veen - MyFonts - “Great Designers Steal”

• Good design isn’t just about plain copying — after all, you don’t know why the original designer chose to do what they did.
• Must understand first why they did that
• then take that and apply it.

Steve Gundrum - Mattson - “Designing Foods and Beverages”

How to design food and beverages to maximize profits?

Every product only has five ingredients:

1. Expensive ingredients (e.g. packaging)
2. Commodities (e.g. wheat, syrup)
3.  Water
4.  Air
5.  ATTITUDE

Your nose heavily influences your sense of taste.

Seminar Day 3: Todd Wilkens - “Making Thinking Tangible”

“Design is a full-contact sport.” In design, you’re asked to collaborate with people and gather feedback from everyone. How can we make the design
process clear, simple and smooth? By making our ideas tangible.

What does tangible mean? When everybody’s on the same page and thinking the same thing.

Symptoms you lack definition (of a solution)

• varying interpretationsa nd expectations
• feature creep
•  misalignment

The biggest challenge is getting everyone to agree on what your project is!

Use design to illustrate strategy.

Prototype the thing you don’t know vs. what you already know.

Symptoms you lack tangibility in research

• findings are just a list of complaints
• you know what people are doing but not why
• varying interpretations and expectations on same data
• unclear implications of study

People are:

• bad at predicting own behaviors
• good at recalling own behaviors
• bad @ explaining why they did things
• bad @ focusing on things they don’t care about.

Have users draw a diagram of their internal thinking processes. Ask them to use a “map” to make tangible and draw out workflow.

Tangible Iterations

• Rapid design iteration
• Ideas are neither scarce nor fragile.
• feel comfortable going forward
• the 7th idea is usually the best one, so get the first six out of the way!
• you have a large set of designs to evaluate and evolve
• safe context to fail forward
• can separate individual feelings from design ideas

From here on out, the speakers were a bit more unconventional, with more emphasis on the human interaction and experience side of things.

Sarah Jones

Sarah Jones, interviewed by Sarah Nelson (via Flickr - @quietaction)

Sarah is a Tony-award winning playwright, whose forte is giving a multi-character one-woman monologue. She delivered her hilarious and spot-on impressions of a Jewish woman, a rapid-talking Dominican American woman, and an African-American youth, all the characters giving their own takes on what UI and UX meant to them.

See her TED talk here: http://www.ted.com/talks/sarah_jones_as_a_one_woman_global_village.html

The application of her talk with UI and UX was in her process of “getting into character” and how that mirrors the persona-building and role-playing design process. Sarah described how she spent the majority of her time prepping in character — one story she shared was how she once prepared for the role of a homeless woman by actually dressing like one and sitting outside her theater and experiencing the fear and insecurity the woman must have felt.

• The work of UX affects the confidence of users
• UX bridges the gap between the haves and have-nots
• Can’t forget that these are personal experiences

Alexandra Zafiroglu - Intel - “Thinking Ethnographically about Technology”

One of Alexandra's slides (via Flickr - @quietaction)

Alexandra is a anthropologist at Intel assigned to study the habits of people and technology. She highlighted four interactions: one in Japan, one in Sweden, one in the USA and one in India.

Ethnographic moments surround us. Way of viewing, questioning, interpreting the world: what, why, how, etc.

Durable culture practices:

• Social connection
• meta-meaning (spirituality, religion)
• creative acts
• a story
• sense of identity
• secrets & lies

Tech changes faster than these!

Five (four?) ethnographic moments

1. Japan: Zafiroglu tasked one familiy to record one TV-watching moment with a Flip camcorder. Team received a clip of the father sprawled on the floor of a tiny room, the daughter giving him a massage.

Insights into:

• body mechanics
• sleeping practices
• affection & love
• filial piety

2. Sweden:

“yuppie teddy bear aphasia”:

• Term for burnout when the world becomes overly connected, wired.
• public expression of fear and distrust
• critique of free-market capitalism
• gendered protest: way for women to critique
• dealing with the death of socialist government

3. USA

Family fights over who gets to record what on the DVR. Mom wakes up early to delete shows that boys record, boys wake up earlier, etc.

Insights into:

• responsibility: family tensions, tech tensions
• thwarts mothering
• necessitates responsibility
• encourages autonomy, ingenuity

4. India

Man owns cell phone business, also a place where he loads up forbidden content onto customers’ phones. Also runs a PlayStation arcade.

Insights into:

• Trust and community
• Gendered play (men and boys)
•  Independence

I also got a chance to chat briefly with Alexandra while in line for lunch. Turns out her path to joining the tech industry through her Ph.D. has been a bit unconventional (after all, how many anthropologists get hired in the industry? These days, it’s a growing number.) Kudos to Intel for putting in the research to develop technologies that mold to culture practices.

Scott McCloud: “Experiencing Comics”

Scott is a graphic artist/illustrator who gave this really tight presentation on how the comic world deals with issues of time and space and where graphic storytelling is going in the future.

• “I’m a storyteller.”
• Comics is a kind of temporal map, a call & response between artist and reader
• Digital comics are a different beast — CDROMs were the center of experimentation in the 90’s.
• In comics, space = time
• Form affects storytelling.
• Typical comic strip: vertical layout. This is not the way we were designed to see. Shows horizontal frame — we should be displaying comics horizontally?
• How can we break out of the print format. Adapt to Web.
• Rich digital comics: Continuous space metaphor, deep-zoom.
• “Desire” as a motivator for stories. Look at stories around you. Note how a story is told when a character has a desire for something: Dorothy, to go home. The Little Mermaid, to be human, etc.

Erin McKean - wordnik.com - “How Words Work”

Erin McKean on stage (via Flickr - @quietaction)

• English is broken: expectations of how it’s supposed to work and how it actually works are different.
• Broken phrases: “Speed enforced by aircraft”, “slow — children @ play”, “can you pass the salt?”
• New words: “Fail”, “teh internets”
• We can choose to fight these new phrases or accept them. The right thing to do is accept them.
• How wordnik is designed: instead of dictionary experience (in, find def’n, out), refine as an exploratory experience.
  • See full usage in texts, Twitter, Flickr photos.

Seminar Day 2: Rapid Prototyping w/ Kate Rutter, Adaptive Path

How to (1) sketch/explore ideas, (2) bring lots of ideas together, (3) share & iterate with team.

Sketching: not about being good or bad, it’s about communicating an idea.

Use markers for emphasis, line weights. Not a pencil.

Label your mockups/prototypes often.

Tips to get creative:

1. “Use your words”: Acquire a big stash of words associated with UI (“bookshelves”, “tags”, “collapsible”, “carousel”, “quicklook”, …) and then try them out on your solution.
2. Inspiration: collect samples of interesting design work that inspires you and go back to it often.
3. Use dimensions to expand conceptual model.
4. Line weight draws attention to
5. Shading draws attention away
6. Labels are important.

Sketchboards: A way to prototype as a group.

1. Get large sheet of paper
2. Give it some structure (divide into functional sections)
3. Add inputs
   • Anything that drives thinking
   •  Requirements
   •  Personas

Drafting dots hold papers on a wall and can be used to affix sketches to boards.

Thinking top-down
A healthy sketchboard has depth (curiosity) and breadth (completeness)

Organize sketches breadthwise into modules, components

Then expand your ideas depthwise.

How to do a review session.

• Email people beforehand, prepare them.
• Use walls where people can come around your designs.
• Tailor design for who is in the room
• Pass the pen around and ask others to draw
• Refer back to inputs
• Black hat sessions - have folks play “devil’s advocate” and ask questions, critique.

Asking questions to drive design discussion

• Open-ended questions @ beginning leads to conversations
• Closed-ended questions @ end lead to decisions

Remember that sketchboards are just jumping-off points.

Design sprints

Quickly generate wireframes and comps from ideas generated from sketchboard.

A possible weeklong sprint:

• Monday: braindump, start sketches
• Tuesday: assemble sketchboards, share and review sketchboards
• Wed: Create higher-fidelity designs.
• Thursday: Share hi-fi designs, refine.
• Fri: Refine some more, complete.

Remember to take breaks!

Um, back to the main subject: I also attended a bunch of seminars and heard some brilliant talks.

Keynote - Matias Duarte - Designing webOS

Duarte illustrates the desktop metaphor (via Flickr - quietaction)

Matias came up and talked about how the process of webOS came to be. They apparently began with a vision of the “Mad Men” 1960’s-style office environment, complete with the desk, paper calendar, wall clock, assistant, etc etc. He proceeded to label each set of office equipment to its attributes, and showed us how that feature eventually made its way into the UI.

• Think of the filing cabinet and how it’s a place to start tasks. Its attributes are “spatial”, “searchable”, “favorites”. Now map it to webOS’s quick search bar, where you can find files and folders and launch apps.
• Think of how the office assistant will quietly interrupt your meeting to give you a message. Its attributes are “appropriate”, “courteous”, “available”. Now see how webOS’s taskbar will subtly notify you to incoming mail, messages, and other alert items.

Most folks I talked to, however, weren’t convinced that this was the exact ideation process behind the scenes — the “Mad Men” desk metaphor seemed just too perfect to fall together like that. Someone commented to me that that kind of pitch was what it would have taken to sell it to the higher-ups at Palm. All of us were pretty impressed by the OS, though. I’m sure a few iPhone users even got jealous.

All in all, their prototyping process took 6 months, involving paper, cardboard, cutouts, etc.

Take-home points:

• “We needed to demonstrate vision… Do you have a design vision for your team?”
• “Mobile needs a good solution to interruptions”
• Strong desktop metaphor as key to webOS success.

Aaron Forth - mint.com - Why Good UX and Design are Successful

Aaron Forth on stage (via Flickr - quietaction)

Aaron’s talk was a bit more business-oriented — I kind of felt like I was in some sort of entrepreneurship seminar! He gave a good glimpse on how mint.com developed in the early years.

“User experience is where strategy must begin.”

Branding challenge: unknown brand, small marketing budget, security concerns, legacy of user frustration in the industry. “mint”: refreshing, organic, different, benefits-oriented.

Design: Aaron mentioned how Mint’s design (a clean, airy feel) overcame the male-oriented nature of browsing patterns for certain Web sites. They have a 50/50 distribution.

User experience principles:

• Quick signup: < 3 min
• Reduce as much work as possible
• Design for “wow” moments
• Focus on providing insights

“Mint’s competitive advantage is that we build faster than the competition.” Aaron cited an example that the development team spent 20% of its cycles developing for IE6 — so they decided to drop support for it, opting to degrade gracefully and provide the right sort of upgrade message to IE6 users. This revelation provoked a lot of buzz among the audience. Drop IE6 support? Risky for some, but for a startup like Mint where development cycles are sparse, maybe that’s what needs to be done.

Aaron talked about turning security concerns on its head. “You can’t afford not to use Mint with your account information spread all over the Web.”

Audience member asked a question: “How does your revenue model affect user experience?” Aaron’s response: “We make money only if the user saves money” — that is, if the user has a good experience. How specifically? Lead generation for financial services (new credit card, etc).

On usability testing: Mint hasn’t done formal usability studies, rather going with a “friends and family usability” testing model — an informal way to dogfood the interface with friends and family.

Bernhard Seefeld and Elizabeth Windram - How Google Maps Keeps Innovating

Seefeld - PM
Windram - UX

Talked about designing for the Street View interface and how they released it into the wild.

Insight: “maps are about places”

Challenge is to incorporate new ideas while maintaining a cohesive whole.

Principles for innovation:

• Technical insights (new technologies, perhaps? AJAX in 2005, Street View cars, etc)
• Anyone can submit ideas (I assume there’s some sort of feedback form)
• Study the behaviors and motivations of users
• Be self-critical. Even though initial feedback for Street View was positive, the team chose to press in.
• Design for power users — the hardest ones to please (I don’t know if I agree with this one. I’d aim for a better balance between your power and novice users, primarily because it’s hard to elegantly design for advanced users without alienating or confusing the other 80%).
• Reward your users. Exploring in the GMaps interface results in simple “wow” moments (pan/zoom in Street view, the yellow man icon animates, etc).
• Use power to drive simplicity. Example given was removing Address/Business tabs under the location search box and instead using NLP to have the user simply write what they want in a single text box.

Changemakers.com Redesign: Charlie Brown and Henning Fischer

Brown and Fischer - on stage (via Flickr - quietaction)

Social entrepreneurship site seeks redesign of static site to facilitate community interactions. This wasn’t too relevant to me, but some interesting points came up;

• Design agency initially refused the project because the specs were too rigid and wouldn’t accomplish goals.
• Changemakers was flexible enough to push back and ask design agency to help them refocus their needs. A very humble attitude.

Seminar - Rachel Glaves - Sketching Fundamentals

Oh boy, my favorite part of the day — sketching class! We were given a bunch of Sharpies of different weights. (TODO: Here’s where I need to scan in my notebook sketches so these techniques make more sense. I’ll get around to them soon.)

We started out by practicing drawing straight lines and boxes. Tip for straight lines: draw from your shoulder, moving your whole arm (rather than drawing from your elbow). It helps to look at destination point and then draw toward that.

Draw in pen, not pencil. You can’t get the same amount of visual boldness, and you don’t have to waste your time retracing your drawings. Drawing in pen also helps you get over the need for perfection. If you mess up, just cross it out.

Techniques to increase visual weight:

• bolder line weights (thicker Sharpie)
• highlight with a yellow marker
• fill in with Prismacolor grey marker
• use depth: smaller when fading into bg. “This gives the user the sense that there’s a world in the page.”
• use motion: ghosting, arrows, gradients.
• under/overline to accent text/headers
• use simple lines and squiggles to signify text.

Some tips when sketching interface mockups:

• It’s helpful to draw in simple human figures with speech balloons whose voices represent the user, his/her motivations. “Here’s where I want to log in, gosh it’s so easy!” or “Now I want to save this comment into the thread.”
• Designing multitouch interfaces and have trouble drawing hands? You can always take a picture of your hand and trace it in Illustrator.