Andrew Hao’s thoughts on design, Web development, and anything shiny.

Shiny font overhaul!

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.

Posted on March 12, 2010 with no comments.

UXweek Day 3 – Perception

Prof. Temple Grandin - Colorado State - “Autism, Drawing and Design”

  • 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
Folgers Starbucks
Heinz Grey Poupon
Tropicana Sunny D
Kellog’s Granola Bear Naked

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
Posted on September 18, 2009 with no comments.

UXweek Day 2

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 and Sarah B Nelson

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”

Alexandra Zafiroglu 01

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 McCloud 01
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 01

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.

Exploratory Sketching Refinement Sketching
Good to make mind go free Take several ideas and narrow down
Use 6-up template Use 1-up template

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!

Posted on September 17, 2009 with no comments.

More Entries