The Livetyping Blog

  • Dusty Digital Albums

    I was thinking about how we relate to our music. And specifically how this has changed with the move from physical media (vinyl, tapes, CDs) to digital music that has no physical manifestation.

    In the old days (eight, ten years ago) you would have CDs on shelves. Maybe some old tapes and vinyl albums in a box somewhere too. Your CDs might have been organized alphabetically. Or maybe by genre. Maybe even by color.

    But if you are like me, the stuff that you listened to most often would be the most easily accessible (for me, that means the top shelf). The stuff I listened to less often (or never) would be on the lower shelves. And some would even be in a box in a cupboard or in the attic, gathering dust.

    But these days we have iTunes. And all your albums are there, on an equal footing, as it were. Sure, you can order stuff by number of plays or date last played, but it's not very elegant. (Try ordering by plays and see what a mess it makes of cover flow—it doesn't show an album once, but once per song.)

    Maybe we could take a cue from the physical world, as Apple is urging us to do when it comes to designing iPad apps. Perhaps cover flow could have shelves.

    iTunes + shelves

    The top shelf would contain the albums you have listened to the most, but somehow taking time into account too. An album that I listened to continuously for two months three years ago but have hardly listened to since would drop down to the second or third shelf. Maybe an album like this would accumulate a layer of dust, which I could choose to blow off now and again by listening to the album.

    And why limit it to music? Why not books as well? Why not movies? Why not games? And what about documents? Spreadsheets even?

  • Transitions and States

    Wow! Buxton was right. The transitions are just as important as the states (if not more so).

    As I play around with jQuery (+HTML + CSS, obviously) as a prototyping tool, I'm finding that I really need to play around with the details of the transitions to make it obvious what is happening (something that it is hard to do in my head, for me at least).

    For example, in my prototype I have a thing where you can add new rows (like adding attachments in Gmail). But I'm constrained for vertical space—there's only space for four rows. So I have set it up so that when there are more than four rows, this part of the screen gets a scroll bar.

    Having a newly-added row simply appear works fine when you have unlimited space, but with scrolling it gets awkward. What happens if the new row is out of view? Well, we should automatically scroll so that this new item is visible. But this kind of sudden transition is a bit jarring and disorienting.

    I found that animating the addition of the row and the automatic scrolling makes it much more clear what just happened, and where things have been moved to. (I must just stress that this is animation done sparingly and not for its own sake.)

    What did I learn? That when you're at the prototyping stage, you really need to roll your sleeves up and get your hands dirty to find out exactly how to best handle subtle transitions like this.

« Page 17 / 18 »