Category Archives: 1′, 2′, 10′

Nick Bilton’s 1′, 2′, 10′ interface design class, spring 2009

1', 2', 10', CommLab, homework, midterm, presentations, stuffstash, wearables

Pictures vs. words

Leave a comment

A word is also a picture of a word

Remember how on March 5th I was supposed to give a presentation in 1′, 2′, 10′, but it got bumped? And then the following week’s class was canceled, and then we had spring break. So it wasn’t until three weeks later, March 26, that I finally got to take my turn squirming at the front of the room. Three extra weeks! So, naturally, I used all that time working on my project, right?

Oh, no, that wouldn’t have been fair. I did revise my slides, but I left it until the last fucking minute, as usual, so as not to have an undue advantage over my classmates. Right. That’s totally why.

What I did do in the interim, however, was stumble across this fab webcast by Nancy Duarte about how to give better presentations:

After hearing her talk, I bought and started reading her book, Slide:ology, which is a more detailed presentation of the same suggestions.

(Here’s another Nancy Duarte webcast, which I haven’t watched yet: Creating Powerful Presentations.)

So between that and taking copious notes on my classmates’ midterm presentations, especially in Wearables, I got a lot of ideas about how I should redo my slides, as well as my overall presentation style. The result is a deck that does not make any sense unless I’m standing there with a remote, explaining it to you (PDF, 1.1 MB)—and using a remote is, I decided after watching a lot of in-class presentations, a good thing to do. I got my Mac remote to turn pages in Acrobat using a program called iRed Lite. I can’t really recommend it, since it stumped me for quite a while the first time I used it, and the next time I tried, a few weeks later, I positively could not figure out how I had ever made it work in the first place. There’s something about the UI that confuses the hell out of me. But it can, theoretically, do the job, and it’s free.

Some other things I learned from watching classmates’ presentations:

  • Proofread, proofread, proofread.
  • Stand while you present, even if you don’t have a remote. Think of someone you know who’s poised and relaxed speaking in front of a group, and then try to channel that person for five minutes. Breathe between sentences. Make eye contact.
  • I really don’t care about the technical side of your project. Don’t tell me what hardware and libraries and so forth are used in it; describe it to me as though I were a normal human being who doesn’t have four Arduini in her apartment right now. Just because I have them doesn’t mean I know how to use them.
  • Those very corporate-looking system diagrams showing how information will flow through your application? They’re completely unintelligible. Skip them.
  • You don’t have to make all your graphics all slick, in Illustrator or Photoshop. Hand-drawn diagrams or sketches can be much more engaging.
  • As early as possible in the presentation, show me some kind of image of what your project will be—or, better yet, the prototype you’re working on—so that I can hold that in my mind as you go into all the background and process and detail. If I don’t know what your project is yet, I probably won’t find the rest of that information interesting. This was true even though I knew perfectly well what my classmates’ projects were. When I watched their presentations, if they didn’t show and describe what they were making early on, I was unable to hold my attention on whatever else they were saying instead. Context.
  • Don’t put a lot of text on the screen. If you’re talking and there’s a whole paragraph on the screen behind you, my attention’s going to be split. And if it turns out that you’re just repeating what that paragraph says, almost word for word, I’ll feel exasperated. People should be listening to you for the words in your presentation, not reading them off the slides.
  • If you don’t have anything sexy to put on a slide for a given portion of your talk, it’s fine to
    1. repeat a previous slide, or
    2. show a slide that contains just one word representing that moment’s topic—“research,” for instance, or “inspiration.” Treat that text as a graphic element—make it big, pay attention to how it looks.
  • Typography!
  • If you have a relevant quotation to share, don’t bury it in a whole long paragraph; give it a slide by itself.
  • Don’t try to cover too much. It’s better to give people a thoughtful, measured thumbnail-presentation of the project and stop talking early enough that there’s time for people to ask questions about the parts that actually interest them than it is to brain-dump every piece of information you have, leaving time for only a few dazed comments from your audience at the end.
  • Videos of a thing working are helpful, but you have to explain what’s going on while it’s playing. This may be a good time to unload some of those boring technical details, while there’s a moving image to spice them up.
  • Proofread, proofread, proofread. If I had a dime for every typo I saw during midterm presentations . . . I offered my services as a proofreader in the Webgrrls-style need/give session we had in 1′ 2′ 10′, but nobody seemed to think they needed such a thing. They are wrong.
  • If you’re going to read some text that appears on a slide, do it slowly, with feeling; don’t just rush through it breathlessly, making it impossible for people to either read the text for themselves or follow what you’re saying. Make it clear that you’re reading what’s on the screen so people don’t have to struggle to figure it out. If you’re not able to introduce the text with something like “I’d just like to read you this quote, which really inspired me . . .” you probably shouldn’t be giving it a slide.

So, here again are the slides I ended up using (PDF, 1.1 MB) for my midterm presentation. I suppose some day maybe I’ll write captions more or less like what I said in front of the class, but in the meantime you can read the old slides if you want to know the gist.

Photo: A WORD IS ALSO A PICTURE OF A WORD by gwalton1; some rights reserved.

1', 2', 10', final project, stuffstash

Stuffstash slides

Leave a comment

stuffstash cover

Was supposed to present this in 1′, 2′, 10′ today, but (a) I arrived late, and (b) the other presentations ran slightly long. So I have another week to work on it, before I have my turn with the projector. In the meantime, I’m putting together a little survey so I can try to narrow down the proposed feature set a bit. Details to come . . .

1', 2', 10', final project, stuffstash

StuffStash proposal

Leave a comment

fabric stash

For my 1ʹ 2ʹ 10ʹ project, I’d like to create a craft-supply shopping and inventory website, provisionally titled stuffstash.com.

There are lots of great craft sites—such as Ravelry.com, for knitting and crocheting, and PatternReview.com, Vintage Sewing Pattern Wiki, and BurdaStyle.com, for sewing—that allow registered users to catalog their material or pattern stashes—stash being the most common term for the sprawling collection of supplies that crafters tend to accumulate over time. None of these sites seems to have a dedicated mobile version, however, and none of them allows one to record all the little bits that a project requires—pattern, fabric or yarn, notions, needles. This is unfortunate, as it would be really useful to be able to look up, while one are in a store, what one has and what one needs.

The website would have uses at all three interaction distances.

1ʹ

The mobile application should have a clean, simple interface that’s optimized for (a) looking stuff up when you’re in the fabric or yarn store and (b) forcing other people to look at a slide show of your finished or in-progress projects. The shopping lookup would have two paths—pattern first or material first. That is, you’re either holding a pattern in your hand and trying to remember what fabrics or yarns you have at home, and how much, or you’re fondling some yarn or fabric and trying to think of what you could make out of it and how much you’d need to buy to do so.

Other handy features to have while craft-supply shopping would be a unit converter, a reference chart of yarn sizes (there are several systems for indicating yarn weight—names such as “worsted” and “fingering,” recommended stitches per inch + needle size, wraps per inch, supposedly industry-standard numbered categories, etc.), needle inventory, and notions inventory (e.g., 1 × 7˝ black zipper, 24 × 3/4˝ rhinestone buttons). For each pattern in your collection, you’d want to be able to include

  • photos or illustrations of each view;1
  • the notions needed (thread, buttons, seam tape, beads, etc.);
  • the quantity of material or yarn needed;2
  • the kinds of material or yarn recommended by the publisher or pattern author; and
  • the URL where the complete pattern can be found, if applicable.

2ʹ

All the gnarly data entry would happen in a regular browser, of course, because typing on a phone or iPod Touch completely sucks. It would be great to be able import data from Ravelry and PatternReview, but only Ravelry seems to have an API. CSV import might also come in handy. And one should be able to print a shopping list for a given pattern, to carry to the store, for those [me] whose phones are not qualified to do anything other than make calls.

10ʹ

The project slide show function would be appropriate for TV viewing, so that one could delight one’s loved ones with a slide show of all the stuff one has been making.

  1. A sewing pattern envelope typically shows photos or stylized drawings of several options, named with letters or numbers—View A, View 1. It also includes line drawings of the front and back of the finished garment.
  2. Yardage for sewing patterns is traditionally shown as a matrix of all the options for each garment size, fabric width, fabric direction (“with nap,” i.e., monodirectional print or texture, vs. “without nap,” i.e., a fabric in which there is no difference between up and down), and view (see note 1).
1', 2', 10', homework

Studio interface ideas

Leave a comment

materials

This week’s assignment for 1′, 2′, 10′ was a longie, and it stumped the hell out of me and, apparently, a couple of other people:

Like I’ve said in class before, the game changer for the computer industry was Apple’s innovation of WIMP (windows, icons, menus, and pointing devices) – Apple’s interface became popular because it was immediately intuitive and simple to use. People recognized a ‘desktop’ as a, well, a ‘desktop’. Folders as folders. A trash can as a trash can. etc. This hasn’t changed in 25 years and there are currently discussions to see if it should. So, our homework is to explore, research and document 5 new User Interface experiences that we could apply to a computer, from the real world. Examples that exist today and are changing this model are the multi touch ‘stretch’ for enlarging images, a play button for video, a trash can for trash etc.

We should think about new ways to say things in an online environment. How do you tell someone they are near the end of an article, in a non-digital setting you would could glance to the end, but digitally you have numbers like PAGE 1 of 5 etc. Is there a better way to make the show this? What about rethinking the desktop? Could it be multi-dimential? Maybe it becomes 3D? Maybe it becomes like the iPhone and it’s just icons of apps and only one thing can be open at a time… maybe not. The folder concept worked for small pieces of data, but now it’s not a great interface, the more data we create, the more folders we need and sub folders etc. What about a music player UI? Or a book interface? IMPORTANT: There are two things to think about here, there is the design / interface, and then there is the modality. An example is. The trashcan represents the Interface, but dropping trash into it represents the action.

Start to think about ways that we can make the exprience better than exists today. Please come with 5 examples of these and a brief description of how they would work. And try to push the boundaries. You can write them out as a description, you can sketch them out on your computer. You can use crayolas, pencils, markers or candle wax, but make sure you put effort into showing how it will work. And bring your research to discuss in class.

I scribbled down a bunch of lists of real-life contexts that might supply metaphors for a computer interface—kitchen, farmhouse, library, city—all of which seemed ridiculous. What’s wrong with the desktop metaphor that we have? Besides, you know, the fact that I’ve never been much of a desk-user, and why are those things called “windows,” and what’s with “icons,” and so forth. If you were to make a user interface based on where and how I actually work, it would have to include elements such as “couch,” “pile,” “bookalanche,” and “crumbs,” and the OS would have to be called something like “putter” or “noodle.” Probably not so useful to other people.

So, instead, I was thinking about what kind of interface might make more sense to my mom, who has been using computers for about twenty-five years and Macs for almost ten, and who does not understand what or where her “desktop” is, nor the difference between an application, a window, and the operating system itself. She’s an artist, so I thought a studio metaphor might make more sense. But also, inverting the nesting metaphor of the whole OS might help. That is, why does she have to know which application to use, and then open a file within that? Why can’t she just have stuff that she’s working on, and then use tools to modify it? So the “applications” become “tools,” and the “document” becomes a “work” made of materials and a process.

When you want to make a new work, you go to the materials shelf and choose a basic substance to start with—2D (e.g., paper, canvas) or 3D (a blob)? You drag it onto the easel, of which you can have more than one. Then you can select some properties of that material. Size? Color? How rigid or stretchy do you want it to be? How translucent? How smooth? Many of these would probably best be controlled using slider, though for something like texture, you’d probably want a swatch.

Choose a tool, such as a brush or roller, or type from a California job case; assign a color; and and start doing stuff to your material. To pick a color, you would have a palette and a mixing area, so that you could mix or dilute colors. The resulting mixtures could be added to a global palette or discarded. Use your 3D mouse to shape it. Pick another material off the shelf and attach it. Choose an (optional) adhesive (which could include staples, sewing) and the attachment point or surface. How hard are they pressed together—like, does one dent the other? You can type on any surface of an object. You can drag one material against another to transfer properties such as color or texture. You can fold the material by marking a scoring line and dragging one side over the other. You can flip a piece of 2D material over and work on the back.

When you’re done with a work, you can stick it in a drawer. Each work would be stored as a recording of its process of construction. At any time, you could select an existing work from a drawer and use a slider to move back along a timeline, if you want to undo something. To repeat an operation, you could select a segment of the timeline, copy, and paste it to the same work or to any other work.

1', 2', 10', homework

Repaving the DMV

Leave a comment

orange Ghia

Our first homework assignment for Nick Bilton’s 1′, 2′, 10′ class was to redesign the front page on the New York State Department of Motor Vehicles site. Not a difficult thing to improve upon, but still hard to get right. For me the assignment was complicated by the fact that I don’t know shit about what people want from the DMV site, since I don’t drive (though I do have a license, to the astonishment of all and sundry; my ongoing act of service to humanity is to abstain from using it). So for inspiration, I looked at some DMV sites from other states, as well as few government sites from abroad:

And then, after working on my mockup for about four hours, I had the delightful experience of having Illustrator crash, taking my unsaved document with it. Joy! So then I got to do it again, this time in InDesign—which only took about thirty minutes, because I’m so much more ept with ID than I am with AI.

Whine, whine. The result is as follows (click to see a PDF at actual resolution):

DMV redesign

I focused on getting rid of most of the graphic crap, moving some obviously unimportant information out of the way, and making the bulleted lists easier to read. There’s still way too much text on the page, but without knowing what people go there to find out, I didn’t think I was qualified to cut any of it.

Photo: ghia by Ryan Carver; some rights reserved.