Tufte on Windows Phone 7 Series interface design | Hacker News Reader

Tufte on Windows Phone 7 Series interface design

edwardtufte.com

58 pointsterrellm22 comments

I've got to give Microsoft credit: they tried! For the first time, it's an interface which isn't shackled to the ridiculously inappropriate desktop metaphor. They've designed something genuinely new for the phone.

On the other hand, I'm disgusted by the UI. Incredibly low information density, unbalanced visual elements, and many actions required to accomplish simple tasks. The transitions are beautiful, but they really should have focused on a concise interface suited to small displays.

What designer thought allocating 30% of the screen to show the second half of the word "Pictures" would be a good idea?

I have a ton of respect for Tufte, but I think he is wrong about a few things here.

After using the Zune for a few months, I'm surprised to see him say that it looks like it was designed on a larger device and then shrunk down to fit a handheld.

The UI is quite effective, and I believe the 'negative space' is actually quite effective at training the user to recognize scrollable areas vs. non-scrollable, as well as providing some breathing room rather than a full screen which would look too busy.

I do agree with the comments about the animations. Many animations on the Zune are very well done, and effective, but some (like the swirling name when going to an artist list from a currently playing) does seem to break context and takes a bit too long.

I'm sure they'll be tweaking the animations in future updates.

I haven't used a Zune but I'd really like to. Have you used an iPhone or Android and, if so, do you feel like it's easier to tell scrollable vs. non-scrollable on Zune than them?

I have an iPod touch, so I'm familiar with the interface. In some ways it is MUCH simpler to tell scrollable vs non-scrollable. At the same time, it isn't really a huge issue on the iPhone, but yes there is a difference.

The iPhone home screen may be the best example. I've got a screen full of icons, and nothing really tells me that there is another page of icons waiting (unless I look at the very small dots at the bottom of the screen). On the ZuneHD, I have two cues. 1) the gap at the top, and 2) the last item is partially cut-off as a hint that there is more to come.

If zune had just had the list without the gap at the top, you would only know you've reached the top by the end of scrolling. The negative space, I find, to be a nice way to say that you're at the top or bottom, without adding another UI element like a bar or something.

On the iPhone, they've accomplished this with an 'over scroll' which shows me just black space and then springs back to the icons. Try it yourself, on your home screen scroll too far right, or too far left. The Zune has the same effect, though it isn't necessary because they've added the negative space.

The Zune uses negative space in applications as well, though I feel they could have done a better job, I'm sure it will improve. As for the negative space on the right, on the Zune, you can use that to control volume in the music player (though it brings up a function screen which I'm not a huge fan of), the use of a large negative space makes it so I can control the volume without having to look at the device (changing tracks can be done with a swipe, so no look for that is really good too). For some reason he button which is located at the usual volume spot on the iphone doesn't change the volume. I'm not sure why.

Thanks very much. I look forward to trying out a Zune.

  I've got a screen full of icons, and nothing really tells
  me that there is another page of icons waiting (unless I
  look at the very small dots at the bottom of the screen).

This thing only takes once to learn. From then on those small dots will tell you where in the screens sequence you are without taking much space.

  The Zune has the same effect, though it isn't necessary
  because they've added the negative space.

Without effect you might be left to wonder, is my device stuck, or is there really nothing more. When it springs back you are sure, that it responsive and there is indeed nothing more to see.

Exactly. Looking at pictures and videos of this UI and actually using it will certainly change ones prior opinion. I thought the Zune ui looked especially awkward. After using it as my personal music player it began to seem efficient and the information hierarchy extremely well thought out.

I think the biggest negative aspect of Microsoft being this late in the game in rebooting the windows mobile line is that theres now an inherent familiarity with the current smartphone interfaces. When all you interact with is an android device all day, the new windows phone ui seems alien. But again; once you use it that perception definitely changes. I know thats my experience as an android user with a Zune. The central question with the new Windows phone is how well does that 'metro' ui scale in the context of a smartphone device.

brandonkm,

Nice to know that I'm not the only Android user with a Zune. ;-)

Killer Quote:

"...Instead of impressing focus groups, designers should do a thought experiment: Imagine what Steve Jobs and Jonathan Ive would have to say about your interface..."

Really? I liked: "Of course Microsoft's customers are already familiar with deep layerings and complex hierarchies."

Seriously.

I thought the mantra of presentations and UI design was Know your Audience. It would dopey to design for designers rather than trying things out with the people who are going to use the thing.

On the other hand, there's a good chance that the opinions of the people in their test groups are completely arbitrary, and will change once they hear the opinion of their early-adopting designer friends. Also, the UI looks like it was designed for (and/or by) marketing people, not designers.

  I thought the mantra of presentations and UI design was
  Know your Audience. It would dopey to design for designers
  rather than trying things out with the people who are going
  to use the thing.

The problem is: your audience does not know itself. Your audience in general will only know what it wants. Knowing your audience means knowing that,knowing how it is different from what it needs, and knowing what it really needs.

At the famous Ford quote goes: “If I’d asked my customers what they wanted, they’d have said a faster horse”.

Jobs and Ive do know those differences so asking questions "what would they say" is not "designing for designers" it is speculating the opinion of those who know the difference.

I haven't used the device itself, but a friend of mine that works at a microsoft shot has. He took snapshots that I wish he would share. It runs on a very similar processor as the nexus one, an arm snapdragon.

According to him, the device is actually quite nice. It is surprisingly fluid and very snappy. He currently uses a G1. From the screenshots I've seen, it looks very nice indeed.

I guess this is where it pays to be a bit ignorant of design- I liked the design and the home screen seemed great to me. I guess it's because I wasn't aware of all the "negative space" they were wasting.

Edward Tufte is definitely a recognized design guru but ever since I found out about him I have been _very_ puzzled about the design of his website. I would expect a design guru to have a better website.

It has text that can be read. What else do you need?

shoemakers' children, and all. The same complaint is regularly registered towards Jakob Nielsen (http://www.useit.com/alertbox/) although it looks like his site is significantly more usable than it used to be.

Context, man, context. That site design is running Ars Digita, Philip Greenspun's original community system (http://openacs.org/), circa 1995. If I recall correctly, Greenspun helped set it up. Full disclosure: I am at least partially responsible for a few tweaks to the GUI circa 2007 (constrained the comments, added the local menus (with optional thumbnails).

Here's all the CSS for that site:

.fullwidthtable {}

.forum {color: #CC0000; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 15px;}

.text { font-size: 15px; color: #000000;font-family: Arial, Helvetica, sans-serif; line-height: 21px;}

.textsm { font-size: 14px; color: #000000;font-family: Arial, Helvetica, sans-serif; line-height: 21px;}

.textxsm { font-size: 13px; color: #000000;font-family: Arial, Helvetica, sans-serif; line-height: 21px;}

.link { text-decoration: none; color=#CC0000}

.link:hover { text-decoration: underline; color: #CC0000}

.belink { text-decoration: none; color=#000000}

.belink:hover { text-decoration: underline; color: #CC0000}

.taglink { margin-top: 4pt; }

This seems like off the top of the head M$-style ranting- he hasn't used an actual device so this is just guesswork.

It's hardly a rant when it comes from a guru like Tufte. The guy has literally written the books on displaying information, so he has a lot of experience to speak from.

Also, he provides specific examples (negative space by cross hairs, top & right margins on home screen).

You spelled _Microsoft_ with a dollar sign, nyuck-nyuck. How's Slashdot these days?

I rather think you're confusing part of his accusation as his own statement.

Reply on news.ycombinator.com