Day 2 - “Expression”

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!

I’m here in San Francisco at UXweek 2009, sent by Riverbed, determined to learn all I can and rub shoulders with the best and brightest minds in the industry. It’s been a really cool couple of days so far. I’ve met some really cool designers and got to pick their brains on their team practices. The food, oh the food: it’s excellent (ahi tuna? creme brulee? smoked salmon? green tea cookies? Pinch me.)

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.

I’m currently in Botswana, doing volunteer work at a nonprofit Christian agency called Love Botswana Outreach Mission. Among my responsibilities are helping out with the organization’s IT needs. I was pleasantly surprised to discover that the organization is wired for 24/7 Internet access, despite being located about 10km out from the center of Maun, a medium-sized village.

Infrastructure

As far as I understand it, there is little-to-no telecom infrastructure here in Maun (i.e. there are no telephone, cable or fiber lines). Thus, most communication links happen via satellite or wifi radio.

The mission has a 100-ft radio tower, where a local ISP colocates a wireless repeater to hook into its wireless network. In exchange, the mission receives a special deal on its Internet access plan.

Existing network setup

Because of the relatively low price and quick setup of wireless access points, the mission currently uses a mix of wired switches and wireless repeaters to extend the reach of the network.

A directional antenna on the tower beams a signal to a directional antenna mounted above the IT office trailer to an access point connected through a gateway serving as the DHCP server and firewall. From there, the signal gets sent via a a wired Ethernet network to the other office buildings.

Wireless access points have been installed at various points along the wired office network, allowing wireless access onto the Net.

Only recently has Internet connectivity been extended to reach a cluster of family homes, situated about 200 meters away from the office buildings. A wireless access point is set up in the IT trailer, broadcasting on a +10dB omnidirectional antenna. The closest house to the office has an outdoor +10dB omnidirectional antenna hooked up to a wireless bridge/repeater. Thus, the link from the houses to the gateway is maintained via a wireless bridge. The houses themselves are connected on a hardwired Ethernet network.

Lessons from the field

Lesson: plan for environmental factors.

We observed that the wireless link from the homes to the offices would be intermittently reliable at best, often going down for no reason. We discovered later on that our link would fail on particularly humid days, because the signal quality over the wireless bridge would degrade significantly and decrease the range of the network.

Lesson: keep power voltages in mind.

I fried a power supply when I left it switched to a 115V (US) input, and plugged it into the 220V power plugs there. Sizzle. This led to a lot of apologizing and reassurances from the staff that this was a common thing for Americans to do.

Lesson: Clean computers frequently.

Dust is a common fact of life here. Thus, computer innards were frequently coated with dust, and more susceptible to overheating and/or a shorter lifecycle on moving parts (fans, etc).

Lesson: Scan for viruses, too

I don’t know why, but viruses just seem to be more common here. I’ve been passed a few flash drives that have been infected. In the states, I’d be (un)lucky to find one a year.

Lesson: Plan for low bandwidth and outages

In the States, we depend on always-on Internet. Here, however, the Internet seems to go down for any of a multitude of reasons. If it is up, it’s being shared by fifteen computers all downloading at once over an already-restricted pipeline. Thus, Web pages can’t be expected to load reliably, Skype sessions will cut out, and chat services won’t be accessible.

I’ve come to depend on Offline Gmail to compose email when the Internet’s down. Other productivity apps like Remember the Milk and Google Docs offer offline modes for their applications.

I rely on Bonjour-enabled chat (iChat on a Mac, Pidgin + Bonjour for Windows) for the times when the Internet or DHCP server goes down and I need to chat with somebody in another office or house.

When making large-ish downloads, I’ve gone to using a download manager (flashback to the days of the 56K modem trying to download a 20 MB file)! I’ve been using Free Download Manager. It’s not much of a name, but it’s a full-featured open source program allowing you to schedule, pause, resume downloads.

Just FYI: my downloads range between 900 bytes/sec up to 28KB/sec.

Lesson: Designing Web pages for low bandwidth is still a good idea

As a Web developer, I tend to make the erroneous assumption people have the same quality of high-speed connection as I do back home in the States. Now that I’m a continent away from most of the sites I visit, I’m beginning to realize that optimizing a site for bandwidth savings can be a lifesaver. Here, a round trip to and from the States can take up to 20 seconds. That adds up over the course of a page load. As a Web designer or developer, ask yourself if you can be doing anything for the “56K guy”: Are you using CSS sprites? A CDN? Compressing (gzip, mod_deflate) your output? Are you optimizing your image files for the Web?

Lesson: Knock out as many failure points as possible

Because the wireless bridge seemed to be the weakest link in our network, we decided to bypass it. We ran a really long Ethernet line from the IT office to the houses. This meant ordering a 200-meter length of cable, some sleeving and doing a lot of trench-digging to embed the cable under the dirt access roads. Our work paid off as everybody in the houses now enjoys a reliable network link to the main server (including me!).