David Lynch making a point on watching a movie on a mobile device, originally from the Inland Empire special edition, edited to fit the iPhone commercials theme.
Sure, you can't fully experience a great feature film watching it on a mobile device, you'd miss a lot of the emotions a movie can convey. But having the ability to read videos on the go can be great for other purposes than entertainment and art consumption, like getting informed or learning some skills.




via Kottke.

Labels: cellphone, cinema, emotions, interface, iPhone

How the Kindle is ugly and feels wrong, let aside the subjectivity of beauty or taste.

Quotes form the Newsweek article :

"If you're going to do something like this, you have to be as good as the book in a lot of respects," says Bezos.

First, it must project an aura of bookishness; it should be less of a whizzy gizmo than an austere vessel of culture.

Form factors

There's a little styling going on here.

While the overall shape seems to be well proportioned and balanced (considering the plain volume alone), I don't get the reason of being of these angled cuts. Does it add comfort when holding the device or interacting with it ? Does it help to frame the text better ? Does it relate to some cultural meaning ? As from today, I'd like to get a clue. To me this is just a subjective decision, style for the sake of it, and it hangs in there as a hair on the soup. Same feeling about the progressively slanted keys of the keyboard. Style is good, but it needs to be backed up with purpose.

ASSymmetry

I don't have anything against asymmetrical designs, and as said above, the volume itself is ok to me. But having symmetric elements (the keyboard and the screen) that weight the most visually included un-centered (left aligned) in an asymmetric shape can only result as a mess. If you choose asymmetry, stick with it. For example, don't make a symmetric keyboard when you can do an asymmetric one. But first, don't choose it when the purpose of the object is to display a book page that looks like it's having a center line (apparently they acknowledged this fact by placing the logo centered under the screen).

Let's go random

Why the hell would you formalize a linear notion such as previous/next in a non linear way ? I've been staring at this picture for a long time and I simply don't get it.

A little more visual noise, while we're at it

Somebody explain me why this separation on the right of the screen couldn't have been integrated in the screen as a graphic element rather than a plastic stripe. Does it have a function other than this one ?

Ergonomics

The comfort zones

I don't know for the guys at Amazon, but when I read a book, I like to grab it full hand. More importantly, when I lay on a couch or in a bed with a good book, I tend to change the way I hold it every now and then because it gets uncomfortable at some point. The picture above is highlighting the areas where you have the option to hold the Kindle without interacting with it. It is very little, far from being enough. Reading on the Kindle, you'll have this underlying stress of being careful to do not hit a button unintentionally, while a book while let you dive 100% in the text.

The discomfort zones

Speaking of reading comfort, here are highlighted the visual features that are distracting the eyes of the reader from the text. Far too much.

Established conventions

Usually, the left is associated with the past, and the right is associated with the future. Instead of having 2 sets of previous page / next page buttons, one on each side of the screen, why didn't they place the previous page button on the left of the screen, and the next page button on the opposite side ? Probably because they thought that lefties would be lost without a next page button on "their" left side of the screen I guess. Amazon is supposed to have great knowledge in the field of user interface, and I don't understand why they validated choices like this.

Some ideas

♦ Cover by default. A screen needs protection, and in the case of a book (electronic or not), a cover has a semiotic meaning. It's what distinguishes a pile of bound paper sheets from a book. So if you try to achieve some sort of bookishness, start from here.

♦ Get rid of the unnecessary elements like the keyboard, the logo or the "next" and "previous" writings (make them obvious instead) from the face where the text is displayed. This is a device which purpose is to stage text from an author and allow the reader to dive into it. Respect the text.

♦ Match the color and finish of the casing surrounding the screen with the ones of the e-ink screen to get closer to what happens on a book page. Making the sides darker will also help to get a better result by highlighting the "page" in the device.

♦ Make it waterproof. At least as some cameras like the Pentax K10D are. So you can feel comfortable reading the morning news while drinking your coffee.


♦ Here is a sketch of a possible scenario, assuming that touch screen are not available for e-ink displays.



a : previous page button.
b : next page button.
c : insert bookmark button.
d : book index, library, notes & bookmarks, volume, shop and news buttons.
e : slide out keyboard for additional controls and input.
f : scroll wheel to navigate menus or flick through pages while reading.

The cover would act as a power button. When it's open, it's on.
The connection points (usb, power, sound) would be accessible when the keyboard is slid out.

Labels: communication, eBook, interface, Product design, typography

Following this previous post describing a possible way to call or text your favorite contacts on an iPhone, I did an animation of how it could behave.
To keep things clear, I didn't add the symbol of a finger touching the screen, so here is a transcript of the actions involved :
- After unlocking the phone, flip it to launch the favorite icons screen.
- If you have more than a screen worth of contacts, tap the arrows on the side of the screen to navigate them
- Tap and stay on an icon to reveal the call/sms display. Moving up and release will launch a call, moving down and release will start a sms. Release in the middle neutral zone brings back all the contacts.

I'm very thankfull to Kontra from Counternotions.com who provided me with some good advices to get the interface where it's at. He gets all the credit for the move up/down to call/sms gesture, which is much easier and elegant than the one I had thought of at first.

Labels: cellphone, interface, iPhone, project, software, wish

Or how to call/sms your favorites with 2 click-and-drags on an iPhone.

The last update of the iPhone software gave the double click on the home button the same functionality of bringing up the favorites, but there is maybe a way to avoid these two clicks.

1. First click and drag : unlock the phone.



2. Rotate it anti-clockwise to display the favorites. It works to call the Coverflow interface when playing music, so it might as well work to call an action from the home screen. I guess. Anyhow, this is where the double click disappears.




3. Select one of the favorites : that's the second click (or tap, how do you call them...). As a result, the other contacts icons and names fade out a little, and two bars appear at the top and bottom on the screen to invite you to the next step.



4. Drag and release the icon of your contact on top to call (the result is a fade to the classic call screen of the iPhone), and on the bottom to send a text message (also fades to the classic sms app screen). Once the icon enters one of the area it changes color to tell the user ot has understood his call for this action and performs it on release (so it's always possible to change your mind even if you entered an active zone).




Recursive actions need to be simple so they don't get boring or tiring to perform, and this is what it's all about.
One limitation though is that it would work well if you have up to 10 favorites. Passed this number, I don't know if the interface sensibility can deal with smaller icons/names, and as I don't live in the US, I can't check for myself on the device. Maybe somebody can tell ?
On the other hand, 10 is way enough in terms of favorites as far as I'm concerned.

Labels: apple, cellphone, communication, interface, iPhone, software, tech, wish

A picture being worth a thousand words, here is an illustration of the idea explained in this first post.

This example displays four sets of albums, but the shelves could expand and the size of the covers shrink when you create news sets.
Each set could contain many more albums than the 6 shown here. To browse the content, you could either click to open, or skim through by hovering your mouse over the first cover.

Labels: apple, interface, music, software, tech

Ohhh, look how much albums I have in my iTunes collection, look at the lovely covers, I can scroll through them for a good thirty seconds full speed without actually seeing anything but that I have loads of them. Nice eye candy aye ?

Sure enough, Coverflow offers a much better way to visualize your digital music collection than going trough a list of names, and it came as a relief when I first used it. Lately though, I found some discomfort using it, as if I felt it had no end. I think I figured why.

I made a little math today, using the (crazy) 40 000 songs numbers advertised for the new iPod :

40 000 songs = 3333 albums (12 tracks each) = 12,8m / 42 ft of vinyls records or 33m / 108 ft of CDs in cristal boxes.

Yep, that's it, I feel just as if I was in front of a 30 meters long shelve of CDs. Well, it's even worse than that : in this dark place called Coverflow, I just can see a small portion of it, not the whole 30 meters thing. But I know it's there, looking at me and waiting for me. It's a record continuum coming straight from the Matrix. Even if I could afford a house to display my record collection in this horizontal manner, I'm not sure I would find it usable. It would be sure beautiful, very minimal, repetitive and graphic, perhaps dramatic, but it would take so much time to go through and pick a record to listen to.

Ah, time.

The time you need to identify a record from its cover is what paces your progression in the collection, not the speed of your finger (wether it's flicking physical records or a mouse button), neither the distance you have to physically cover while browsing. Time is the common limiting factor between the n meters shelve and the Coverflow display.
Coverflow is a giant horizontal stack you'd better be patient to deal with if you don't already know what you're looking for. Ok, it's an organized continuum, in its inner alphabetical nature, but still, it feels a bit uncomfortable to apprenhend past, say, a hundred records. Cover flaw ? Sorry, it's really bad but I had to make this one.

I know a few freaks having the habit to classify their records in alphabetical order, but they are few. Usually, people tend to organize them differently : by music label, by sleeve designs, by time of purchase, by family of artists, or even by personal taste (duh !). In the cd or vinyl world, these groups would end on different shelves, or parts of a shelve.

I'd like to look at my digital records collection just as I would do when I sit on my couch and look at my record shelves : I can visualize everything in a single look, and I can find the music I want to listen to even if I can't recall the name of the artist or album because I know it's in the upper left corner. Shelves formalize emotions, moods, and in the music world, mood is a much better option than the alphabet to find your way.

I'd love some shelves in Coverflow. Christmas ?

Labels: apple, interface, music, software, wish

This is the fourth post about a cell phone design project that started here.

Form factors

First, about the scale. We know that the technology won't stop us from going really really small here, and that the ergonomics are the limiting factors.
Ergonomic aspects needing to be considered :
· the size of the device. It must allow you to hold it comfortably, and allow the speaker / mic to work nicely along the ear and mouth distance. The smallest phone I've used so far was as big as a credit card, and I used these dimensions as a reference.
· the size of the buttons, of course.

Semantics : it should look like a phone, as it's nothing else. It should say that it's a USB key too, as it's one. Other ideas to express : basic, solid, reliable, durable, fit.

As it's not designed for a particular brand, the branding guidelines that are usually getting into action at this point are, well, non existent. So we're left with a relative freedom here. That's one of the pleasure of the personal project after all.

Three different tracks came up so far to give a character to this object.

1. In a way, the functionality of this phone is nostalgic and backward looking, as we are refusing all the possibilities that technology is offering us but the ability to be wireless and compact. The Daddy's track.

Grandaddy's got one too.


2. The hard core nature of the functionalities can lead us to the modernist way, "form follows function and we're not expressing anything else here, ok yes we do but ya know..." The Mies track.


3. As it's compact, it's likely that the user will carry the phone in a shirt or pants pocket, so it could be a well rounded and soft object that will prevent the garment to be torn. The Tender track.


Next

Labels: cellphone, interface, phone, project, tech

This is the third post about a cell phone design project that started here.

Extending the interface

The settings of the phone numbers assigned to the keys and the ring tone adjustments are made through the other interface the phone offers through its USB abilities : the computer to which it's plugged in when need be.

Here is a mock ups of the interface that would appear on the screen once the phone is plugged in. I guess an auto launch of a dedicated app sitting in the phone flash memory is something possible, so you could use the computer based functionalities on any computer you could use.



It displays the battery charge level and the reception level, and an eject button so you can unplug safely the phone when you need it.
There is also a text field where you can enter a phone number followed by a "send" button to allow you to place calls from the computer, using its mic and speakers if they are recognized by the software. The connection to the network is still made by the phone which acts like an antenna. Of course, this makes sense only if you can't make a good use of VOIP while using your computer.

When you click on 'Memorized numbers" in the bottom bar of the window, you are presented an interface with which you can set the phone numbers to the key numbers.



You can add the name of the contact so you can remember which contact has which fast dialing key the next time you get to set them. Clicking "Collapse panel" resizes the window to its original appearance.

When you click on "Ringtones", you get access to their settings.



You can choose from internal ringtones, or choose a sound file to be played instead. The sound file is copied on the phone's flash memory when you select it. To set the phone on vibrate, just lower the volume fader to its lower position.

I've been thinking of adding the ability to send sms from this interface, but it would make no sense since you wouldn't be able to receive them when you're not connected to the computer. You'd be better using email in this case.

> Next

Labels: cellphone, interface, phone, project, tech

I had to redesign my portfolio website recently, and as Coda had just been released by Panic, I gave it a try.
Of all the good features this app offers, the best experience I had with it was actually the Panic sans font rendering on the screen. It's sharp, rounded, very comfortable to read. I used to work with Monaco 9pt as I found it was the most lisible font I had to work with code, but Panic sans feels so much better, as you can see :

a. Monaco 9pt


b. Panic Sans 11pt


Working code with an inappropriate font is like sitting at work all day in a bad chair, and Coda's font is like sitting in a sofa for that matter. Of course there are other good aspects such as the easy way to upload files or the one window thing, but this is a little detail making a lot of difference. This font being named from the company who did the software, I guess they did put some work into the rendering of the font at these small sizes.

One con though about the app : having to be online to access the reference book doesn't seem right to me. Sure, web development often means being online, but not always. So yeah, that was a bit of a frustration the first time I tried to look for some information there and that I was said I had to be online to get there. Is this part of the trial's version limitations ? I'll know the answer soon I guess, as I'm considering buying it.

Labels: interface, software, typography

Can't wait to have a CAD program working with this multipoints touch screen interface. Sound waves coming along, check your volume.

Labels: communication, interface, tech