c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
esc
cancel

Latest Updates: hci RSS

  • 5:22 pm on February 8, 2009 | 0 Permalink | Reply
    Tags: , hci, ,

    Sketching interaction stories with markers and iPhones

    I recently posted about Bill Buxton’s book, “Sketching User Experiences, so I thought I’d share an example on using these kinds of techniques on a recent project.

    The problem at hand involved concepting a number of new features for an existing website, and sharing these concepts with a remote team. (When you can’t get everyone in the same room, it’s key that the team can quickly share ideas.)

    For this session, we used:

    • Whiteboards
    • Paper
    • Markers, scissors, and tape
    • iPhones
    • Keynote

    The goals were to:

    • Tell a story
    • Leave room for creative thinking
    • Validate concepts
    • Align thinking

    After open brainstorming and traditional white-boarding, a number of concepts were quickly sketched on paper (generally one sheet per screen.) These screen sketches were taped to a whiteboard, allowing quick note-taking and annotations:

    photo of whiteboard working session

    After walking through the concepts (and iterating) with a number of local victims, the screens were captured with an iPhone camera and pulled-into Keynote to create the storyboards. With each screen as a slide, a story can be told within the presentation format:

    bringing images into Keyboard

    Using this approach, stories can be shared globally, and changed in minutes. The hand-drawn images ensure that no-one gets hung-up on colors or copy writing, and they require a little creativity on the part of the reader, which gets the gears turning and leads to fantastic questions.

     
  • 6:44 pm on January 25, 2009 | 0 Permalink | Reply
    Tags: , , , hci

    Book: Sketching User Experiences

    I finished “Sketching User Experiences: Getting the Design Right and the Right Design last week in preparation for the upcoming UX Austin Book Club meeting.

    It’s 400+ pages, but a rather easy read. The book covers a range of topics, including:

    • The value of good design.
    • Good design only happens when designers understand the context of use, and explore many possible solutions.
    • Sketching allows designers (and potential customers) to explore ideas at low cost.
    • Sharing sketches enables early feedback.
    • Techniques for sketching interactivity.
    • Sketching can involve computers, cameras, and smoke-and-mirrors provided that it remain quick, inexpensive, disposable, etc.
    • There are many examples of quality sketching available in the archives of HCI history, and replicating these experiments is good practice for a budding interaction designer.

    My opinions on the book are mixed. It definitely offers positive motivation for sketching — and some great stories to feed those “why are we drawing pictures instead of coding” conversations that come up all-to-often with clients unfamiliar with UX Design. However, the book does come across a little passive, yet arrogant at times, while making numerous references without context. This gives it a somewhat academic feel, reading more like a light-weight thesis than a typical design book. That said, if you work in UX Design, being familiar with the ideas in this book will go a long way toward helping your career.

    While reading, I highlighted a few quotes, which I’ll list out below. I grabbed these not because they represent the theme of the book, per se, but because they had unique meaning to me, or something I’m working on. (For example, I’ve already used one of the quotes below in a presentation on the design process.)

    Quotes:

    “In order to design a tool, we must make our best efforts to understand the larger social and physical context within which it is intended to function.”

    This is a classic UX/HCI principle of understanding the user and their context for interaction as a design constraint/criteria. It’s a basic requirement in designing a product/solution that delivers value to a customer.

    This next quote is an interesting one for companies thinking that they can solve “design” simply by hiring a few designers:

    “It does not matter if you already have the talent to save your company among your current employees. If you do not have the vision, will, and power at the highest level, then that talent is almost certain to remain as wasted as it is frustrated.”

    Becoming a design company isn’t as easy as hiring designers (just like becoming an innovative company cannot happen simply by filling the ranks with a few smart people.) Companies can only lead the pack when these values go all the way to the top. Until that happens, organizational practices (and politics) will keep those talented stars from shaping the companies’future.

    This one’s fantastic (and the one I used in a presentation):

    “Even if you do a brilliant job of building what you originally set out to build, if it is the wrong product, it still constitutes a failure.”

    Meaning, that even if your company can execute a product vision perfectly (ie., you have great developers/craftsmen/etc.), you’re still wasting your time, and money, if you haven’t validated that your concepts will provide the market value you’re trying to achieve.

    On the reason it’s important to share all ideas when brainstorming:

    “…better idea[s] would never have come about were it not for the idea that it replaces.”

    In other words, even bad ideas provide value via the thinking that occurs when we consider them.

    On team dynamics and the work environment:

    “A healthy team is made up of people who have the attitude that it is better to learn something new than to be right.”

    “A design studio without ample space to pin up sketches, reference photos, clippings, and the like,… is as likely to be successful as an empty dance club.”

    And finally, a reminder on why you never skip peer reviews:

    “It is better to have your preliminary work critiqued by your colleagues while there is still time to do something about it — no matter how difficult the criticism might be — than to have the finished project torn apart by strangers in public.”

     
  • 11:00 am on January 23, 2009 | 0 Permalink | Reply
    Tags: , , , hci, ,

    IDEO Labs LiveView: an iPhone app for on-screen prototyping

    IDEO Labs just released a killer app for iPhone prototyping called LiveView. The application allows the iPhone to view, and interact with, a region of your desktop machine’s screen. Using this, you can have a prototype (or even an XCode application) running on your desktop, and try it out from your iPhone.

    LiveView screen shot

     
  • 3:27 pm on January 24, 2008 | 2 Permalink | Reply
    Tags: hci, ,

    Hiding an idle mouse cursor on Ubuntu

    One of the obscure features of OS X that I love is that the mouse cursor hides itself when idle. By doing so, it stays out of the way when reading on-screen. When I made the shift to using Ubuntu at work, the non-hiding cursor was one of those little details that annoyed me. Of course, like most things on linux, someone else had the same opinion and has solved the problem already. The solution is a tool called unclutter (easily installable with a `sudo apt-get install unclutter`.)

    Unclutter takes a few optional parameters. I like: `unclutter -idle 1`, which hides the cursor after one second of inactivity. The hidden cursor not eliminates the potential annoyance while reading on-screen, but may also serve to remind the user that keyboard shortcuts are faster anyway ;-)

    For more, see: unclutter: hide the mouse cursor after a period of inactivity

     
  • 12:19 am on January 23, 2008 | 0 Permalink | Reply
    Tags: , , hci, ,

    Lily: Visual programming in JavaScript

    I have an odd fascination with Visual Programming languages, and while I’ve gotten so far as sketching out some UI concepts and object models for a text-processing focused, web-mashing, visual programming environment, I’m a long way from having anything that works. Much to my surprise then when David Ascher dropped a link to the Lily project on his blog today. Holy cow this is sweet. Think PD or Max/MSP written in JavaScript, running in a browser, with modules for popular Web API’s and JavaScript frameworks (ex., “Amazon, Flickr, Wikipedia, Yahoo; UI modules that wrap widgets from YUI, Scriptaculous, JQuery, Google Maps….”)

    Check out one of the demo’s here:

    (Via: Lily: JavaScript, visual programming, fun.)

     
  • 3:16 pm on December 28, 2007 | 5 Permalink | Reply
    Tags: , hci

    Touchscreen keyboard (could be killer with tactile feedback)

    The Optimus Tactus keyboard:

    Optimus Tactus keyboard

    …a programmable, touch-screen that acts like a keyboard. Pretty amazing potential for experiementing with user interaction interfaces. Could be even better if merged with some of the haptic/tactile feedback work that Apple and Nokia have been doing. Ex:

     
  • 10:22 pm on September 4, 2007 | 0 Permalink | Reply
    Tags: , , hci

    User error vs. machine error vs. interaction design

    Why the high volume of discarded stickers? What does this tell you about the users? What about the machine?

    The full context:

    The design of this self-service, produce-pricing machine includes an area for discarded “mistakes”; but at what point is it an indication that it’s no longer user-error?

     
  • 11:44 am on August 25, 2007 | 0 Permalink | Reply
    Tags: , , , hci

    Interface design on Sparkfun’s new GeoChron

    Interface design on Sparkfun’s new GeoChron

    Sparkfun just released a new, stand-alone GPS logging device, which looks to be a slick alternative to all the “mobile-device + Python + bluetooth GPS” hacking I’ve resorted to for similar tasks. It’s a pretty tempting package if you need dirt-simple GPS logging. However, I’m a bit confused by the switches. Take a look at the picture of the device below:

    There are two toggle switches: one for on/off, and one for standby/run. Take a minute to look at the switch diagrams and labels, and think about how to use this device. How do you turn it on? How do you make it start logging?

    Now that you’ve thought about it, was it clear? What does the ’1′ on each switch mean to you? What does the graphic under each switches label mean? Ignore the ’1′ and ’0′ and look just at the diagram. Based on the graphic alone, which switch position should “on” be?

    I used to get the ’1′ vs. ’0′ on switches backwards when my mental model was of the ’0′ indicating a completed circuit. Now I use a binary metaphor, where a ’1′ bit is on, and a ’0′ bit is off. That seems to be what the switch means. But if I take that approach on the GeoChron, then the standby/run switch is installed backwards. Personally, I think I’d drop the graphic under the switch labels (I think it’s more confusing then helpful), and flip the standby/run swtich so that ’1′ means ‘run’, and so that the switches are both pressed in the same direction when the device is on and logging. With a device this simple, you really shouldn’t have to think about how to turn it on. (I still want one though ;-)

     
  • 4:33 pm on August 22, 2007 | 0 Permalink | Reply
    Tags: , hci,

    Any shape or size…

    “when an object can be any shape or size, what shape or size should it be?”

    I love following Jan Chipchase’s Future Perfect blog. It documents an amazing level of ethnographic research that most companies simply don’t have the luxury to participate in. The quote above is a closing slide in one of his presentations. It stuck me because of it’s dual use as both a design meditation, and a serious question designers of any product should be able to answer. It also begs the reverse question for existing design:

    If this object could have been any shape or size, why did it end up like this?

    (Via: Insight & Innovation: Design Research, Nokia Connection 2007 [ppt])

     
  • 1:03 pm on March 27, 2007 | 2 Permalink | Reply
    Tags: hci, ,

    Interesting video demonstrating Photosynth, an application for navigating 2D photos in 3D space: “Dive into the world of Photosynth.”

    From the site:
    “Our software takes a large collection of photos of a place or an object, analyzes them for similarities, and displays them in a reconstructed three-dimensional space.”

    “Each photo is processed by computer vision algorithms to extract hundreds of distinctive features, like the corner of a window frame or a door handle. Photos that share features are then linked together in a web. When the same feature is found in multiple images, its 3D position can be calculated. It’s similar to depth perception – what your brain does to perceive the 3D positions of things in your field of view based on their images in both of your eyes. Photosynth’s 3D model is just the cloud of points showing where those features are in space.”

    (Via: My Icon. Your Icon?.)

     
  • 2:00 pm on August 23, 2005 | 0 Permalink | Reply
    Tags: , hci,

    “Extreme Programming vs. Interaction Design”

    Here’s a topic that hits rather close to home: In the interview, “Extreme Programming vs. Interaction Design“, Kent Beck and Alan Cooper discuss opposing views on producing better software, and unfortunately, I can’t say that either one really “wins” the argument.

    The piece hits close to home because I used to work in Interaction and Information design, so I fully grok the value proposition Cooper presents. The argument is the typical Human-Computer Interaction (HCI) / User-Centered Design (UCD) pitch — that up-front interaction design will (1) produce a higher-quality product, and (2) will reduce development costs by solidifying technical requirements. However, what surprised me in the interview is that Cooper seems inflexible on how to best apply this UCD process, insisting that it is a design “phase” that starts and finishes before any development begins.

    The central assumption in Cooper’s argument is that programming is expensive and programmers are unwilling to throw out prototype code. Because of this, Cooper believes that you should not allow programmers to begin working on a project until 100% of the requirements are set. I used to believe that too, but I have since seen the light.

    The trouble is, rigid processes with pre-defined phases and deliverables are best used when managing a large group of low-to-moderately skilled developers. However, small teams of smart people change the rules and the outcome. Development teams that recognize the value in Agile Development and XP also understand that the assumptions driving waterfall-style development phases are based on faulty assumptions, which easily fall apart given the following findings: (1) It *is* possible to reduce the cost of developing code (see Python and Ruby on Rails); (2) Better products are often the result of iterative design (compare a forth-gen iPod to a first-gen); and (3) If your programmers aren’t capable of “sketching in code”, you need to hire better programmers (see all of Paul Graham‘s and Joel Spolsky‘s articles ;-)

    This isn’t to say that interaction design isn’t helpful, because it most certainly is, and any company serious about serving it’s customers should at least consult a user experience and interaction designer about their products, if not have such a designer on the team; However, there is even greater value in rapid iterative development — both in interaction and implementation, and companies that understand how to utilize this advantage will produce higher-quality user experiences in a shorter time-to-market.

    (via Signal vs. Noise.)

     
  • 10:43 pm on March 28, 2005 | Comments Off Permalink
    Tags: hci

    Invisible Interfaces

    I love the idea of integrating information feedback into one’s environment. Ambient Devices has done some interesting work with this concept, but their devices still aren’t invisible. But putting a display mechanism into one’s contact lenses certainly could be! A project at the Center for Fluorescence Spectroscopy is designing “a contact lens that would change colour like a traffic light – from green to yellow to orange to red – enabling the wearer or an observer to determine a [broad] range of blood sugar level, from too low to too high.” It’s a wonderful idea, and apparently not as far fetched as it may sound.

    (from Contact lenses that react to blood-sugar levels and Contact lenses react to blood-sugar levels.)