Windows Phone 7: Typography makes the interface

James Deux's picture

Wanted to share this with all:

http://gizmodo.com/5590572/windows-phone-7-gallery//gallery/12

Shots of the new Windows Phone 7 in action—with its UI up and running. It appears that the type and copy will be the UI's principle element. I do not know the typeface but it's crisp and warm. ( EDIT: Type appears to be Segoe UI here.

Gizmodo's thoughts on the interface:

"The Interface
The phrase "authentically digital" makes me want to barf rainbow pixels, but Microsoft's description of the Windows Phone 7 interface is truth: It doesn't try to feel like anything but a flat, digital interface. There is no attempt to depict three dimensionality or any kind of real-world mimesis. No gradients, shadows, gloss or shading. Everything is crisp and flat. Everything pops, bright primary colors and white text on a black landscape. Touch a tile on the main screen, and the interface flies away like exploding puzzle pieces, revealing the app you wanted to see. Oversized text is the order of the day. (Yes, it still runs off the screen in lots of place.) It feels gloriously modern. I love it. I wonder how gracefully it'll age."

I'd have to agree. A complete breath of fresh air in the age of Web 2.0 iconography.

aluminum's picture

It feels a bit 'brochurish' and that while the UI is pretty, it might end up getting in the way. BUT...I'll give MS credit for really trying something new. And it's hard to say if I'll like it until we can touch it, but it's definitely a new concept for a touch interface.

Hopefully they'll actually release it some day.

Nick Shinn's picture

There is no attempt to depict three dimensionality or any kind of real-world mimesis.

Surely that's the opposite of "authentically digital"?
Digital, except in its most primitive bitmapped expression, is by nature mimetic.

And the font appears to be that well-known airport signage face designed in 1968.
Combine that with a minimalist layout and all-lower-case look, and what you have is a retro style, "mid-century modern".

joeclark's picture

The fact that this phone cuts off text at its margins has been lampooned elsewhere.

Why is it being tolerated, even in this forum?

I know Simon reads everything here and I strongly suspect he dies a little inside when work of this calibre sees the light of day, but isn’t the idea of running text off the edge of a viewport so clumsy and ass-backwards it could only come from a zero-taste, antitypographic culture and platform like Microsoft and Windows?

No, really – I mean that.

Si_Daniels's picture

>I know Simon reads everything here

No I don't. :-)

James Deux's picture

And the font appears to be that well-known airport signage face designed in 1968.

Okay I laughed. But just a bit, though.

Steven Acres's picture

Why is it being tolerated, even in this forum?

The software being shown here is nowhere NEAR release date, so I'm sure they'll fix a lot of these things.

I currently own a Zune HD and its layout and colors are wonderful, definitely prefer it over the iOS's.

joeclark's picture

From my reading, it isn’t beta software and no, I don’t think they’re going to fix it. They’ll be too visually unsophisticated (“stupid” or “autistic” are other words that could be used) to notice, let alone bother.

Si_Daniels's picture

In identifying the fact that practically no one (on Typophile or elsewhere) is calling out what they consider bad typography on devices, I think Joe is onto something. Stewf’s iPad review and a few of Joe’s blogs posts being the notable exceptions.

I’ve pointed the team to this thread. To their credit I think they’re trying to do something that no one has ever tried before in the smartphone space - building a device UI that relies primarily on typography - without relying on bevels, boxes, fake 3D, Photoshop lens-flares and brushed metal bitmaps used in other devices. Also worth remembering that this is a beta of a v.1 product.

A bigger question is where are the apps, games and devices that showcase flawless typography. Is anyone making them? I don’t own an iPad, Kindle, Sony Reader, iPhone, Android phone, etc., actually I don’t own any devices (with the exception of a $20 Nokia phone that has one app – the “phone call” app). But I for one would be first in line for a typographically savvy device.

Nick Shinn's picture

I don't think minimalism is somehow more "flawlessly" typographic than layout styles which use devices such as boxes, rules, and drop shadows.

When you run text over a disruptive background (e.g. a "screensaver" pattern), then a drop shadow is also typographic: the offset, blur, and density have to be gauged to the type style, colour, and background, for optimum readability. Setting these values is a matter of typographic taste and discrimination, is it not?

The page on the Phone 7 that shows type "surprinting" a photo could do with some drop shadows.

If you have a lot of hierarchical text categories in a layout, boxes and rules are a good way to demarcate information.
By the same token, going the minimalist route does require "white" space.

And in the Phone 7 GUI, that space seems to be latent, scrollably-accessible, in a way that I always associate with early Flash-enabled web pages.

So the question is: how problematic is latent space?
Have we become used to seeing the picture cropped, and scrolling across it -- especially in map apps -- to the extent that a word which appears cropped and illegible when a page opens, is acceptable? Especially if it is the title of a frequently-visited page. Is becoming familiar with this partial word any different than becoming familiar with an icon -- learning its meaning? If you are going to a page via a link, don't you already know its title?

It's a premise of Donald Norman, the philosopher behind the Mac GUI, that one learns by doing, that an interactive medium is not just information that sits there revealing all without being prodded.

So good luck to those trying to out-Mac the iPhone with a minimalist GUI.

And to those who would judge it by looking at static photos, that's a bit premature, the proof of the pudding is in the eating.

**

Si, CS4 replaced eye-candy (mostly) by text:

My take on GUI evolution (on the Mac).

Steven Acres's picture

From my reading, it isn’t beta software and no, I don’t think they’re going to fix it.

It is definitely beta (edit: maybe not "beta" but certainly not ready to be released) software. But, now that I look at the pictures, the cutoff is fine. You need to see video (see here) of how it works. It's zoomed out so you can see multiple lines of text, without cutoff, then when you go into a specific category, as you swipe left and right, there's a parallax effect of the type/content/background, therefore the rest of the type comes into view.

dberlow's picture

Sii> To their credit I think they’re trying to do something that no one has ever tried before in the smartphone space - building a device UI that relies primarily on typography - without relying on bevels, boxes, fake 3D, [...].

I'm still laughing. After nearly 20 years of using phone devices who's UI's rely exclusively on typography, I'm wondering who would want that. But Wow! look how big the fonts are and thin sans fonts at that! What a truly original design.

Cheers!

aluminum's picture

"From my reading, it isn’t beta software"

It's a MS product. Of course it's beta.

I think it's also hard to fully judge it based on static photos. It's a motion based interface.

Si_Daniels's picture

>What a truly original design.

I agree. I spend time on the gadget blogs every single day, and not just to hunt down devices using unlicensed versions of our fonts, and I have to agree with you and the bloggers, it's a truly original design - although maybe not everyone's cup of tea.

Steven Acres's picture

I'm still laughing. After nearly 20 years of using phone devices who's UI's rely exclusively on typography, I'm wondering who would want that.

lol uh... I wouldn't really call this (image attached) "typography." There's a difference between straight "text" and "typography."

bstrom's picture

At the very least, isn't this a step in the right direction? A focus on typography & a nearly medium-specific aesthetic?

Seems a lot more authentic than Apple's gloss & beveled art style... unless you believe that every style can be native to the computer.

aluminum's picture

"At the very least, isn't this a step in the right direction?"

Only if one assumes that only one direction is correct.

The "gloss & beveled art style" isn't just about 'looking cool' but has deep foundations in human factor/UX design. For instance, when a button is beveled and has a shadow one sees that as being 3 dimensional which offers an affordance to the user that it is a clickable object. This can be an important factor for general usability of the device.

But that's not to say it's the only correct direction. The flat type-centric UI of Win7 mobile may work nicely as well. We'll have to wait and see.

Steven Acres's picture

For instance, when a button is beveled and has a shadow one sees that as being 3 dimensional which offers an affordance to the user that it is a clickable object.

The key here is that most users know what's clickable and what isn't, these days.

I've used the Zune HD (review here http://www.youtube.com/watch?v=ZlR3vA7D3rk) and I like the interface a lot. As others have mentioned, some of the type gets cut off, but in using it, it doesn't really bother me. As it's a UI and not a typographic poster, I don't think every instance of type needs to be "perfect."

Ray Larabie's picture

Shiny buttons will go in an out of style every 10 years for at least another century.

bstrom's picture

Shiny buttons will go in an out of style every 10 years for at least another century.

Thats closer to what I was trying to get at. I see I must choose my words very carefully here :)

Nick Shinn's picture

I hate the buttons on appliances &c. that don't have a neat "click".
In fact, I would prefer if most appliances and tools just had one large on/off switch, or a turnable knob, rather than all this programmable BS.
I have an electric space heater that I turn on when the room gets a bit cold, and off when it's warmed up, but I have to press several buttons in the correct sequence to get it to turn on.
I guess you know where I'm coming from:


(Yeah, it's functional.)
http://www.thinkgeek.com/interests/retro/7830/

John Hudson's picture

Hey Nick, speaking of typography on mobile phones...

aluminum's picture

"The key here is that most users know what's clickable and what isn't, these days."

That'd be nice but in user testing I've seen/been a part of, that's not always true, unfortunately.

Bottom line, though, we can only judge visual aesthetics of the UI at this point. I think it's unfair to claim it's successful or a failure prior to actually being able to touch the thing and understand the total user interface and experience.

Si_Daniels's picture

>Shiny buttons will go in an out of style every 10 years for at least another century.

I predict once holographic haptic multi-touch Kinect-driven augmented reality displays are commonplace they will make a comeback.

Ray Larabie's picture

We're probably a decade away from screens where objects can actually be shiny or not. Then we can have buttons which are flat colors but actually shiny. Typophile threads about shiny buttons will be really boring.

Joe Pemberton's picture

Windows Phone 7 is the heir to the Zune's typography. And if MS is smart they'll take the best UI elements from the Kin UI (may it rest in peace) and infuse them into Windows Phone 7.

Regarding the earliest bitmap fonts on mobile devices were nearly all "designed" by engineers, which means they were designed for efficiency of space or efficiency of file size (speed), not efficiency of glancing, scanning, or reading.

The best example is the lowercase g on some old devices (Nokia, Samsung) whose "descender" sits on the baseline, looking like a timid 9.

vegfarandi's picture

http://www.youtube.com/watch?v=XiqgmAYrd3c

The general look and feel was designed for that video originally. This is Microsoft's future direction.

dberlow's picture

>This is Microsoft's future direction

You mean computer graphics in every commercial, or the apple devices without apple logos? ;)

Cheers!

staydecent's picture

Joeclark and anyone else who thinks "The fact that this phone cuts off text at its margins" is somehow, without testing, an immediate mistake, or stupid decision, you are making an opinion with a very narrow vantage.

Ignoring the fact that this discussion is about the joy of a typographic UI(who cares?), I think you should really ease up on the untested hate. The UI may be entirely usable, I mean, it is still entirely readable in screenshots.

My point being, aesthetics only matter to a point, and they only please a very small, niche, group of people. What actually matters is the usability. And, pretty can only get you so far.

So, if a word is cutoff, but is readable(1/3 of the last 'e' being hidden doesn't create any mystery for me) then what is the problem?

Also, authentically digital, or whatever the words were, is so purely subjective, it's better if we all just leave that one alone. But I do think the one claiming digital, in its birth, was to imitate life is slightly mislead: Virtual is more of an adjective describing imitation.

jakes's picture

The Zune HD which Window 7 phone is based off of is more visual pleasing than the iPhone/iPod...imho. It's more clean & sophisticated. I have no problem what so ever with the word being cutoff cause it's still very readable/recognizable as well as adding a nice design element to the UI.

Nick Shinn's picture

... the one claiming digital, in its birth, was to imitate life is slightly mislead: Virtual is more of an adjective describing imitation.

I said that "Digital, except in its most primitive bitmapped expression, is by nature mimetic."
In terms of visual appearance (as opposed to functionality), can you name a quality that is not mimetic, in, say, a typeface?

**

Such things as dimensional buttons are not intended to be trompe l'œil (i.e. virtual).
As Darrel (Aluminum) says, they "offer an affordance" to the user that they are clickable objects.
The dimensionality is symbolic mimesis within graphic design, not virtual reality within a simulated environment.

rs_donsata's picture

The amount of bashing from the Mac living - Windows hating community only shows how good has Windows done this interface, campioning great original type design instead of using old tired Helvética to Lolo "designerly".

Some text looks cut off on a photo still because it actually scrolls, come on people!

Sorry for the ortography, I'm in a clumsy iPhone keyboard.

dberlow's picture

>I'm in a clumsy iPhone keyboard.

Well climb out of the escape key.;)

Cheers!

riccard0's picture

While I don’t think that cut-off words are bad per se (a little retro as far as aesthetics go, maybe), surely this style would make localisation in languages which typically present word longer than their English equivalents (I’m thinking German and Italian) much worse than already is.

Steven Acres's picture

In that case, I assume they would reduce the font size.

The amount of bashing from the Mac living - Windows hating community only shows how good has Windows done this interface, campioning great original type design instead of using old tired Helvética to Lolo "designerly".

I think the brilliance and success of Win7 also did the same.

Nick Shinn's picture

c[h]ampioning great original type design

Correct me if I'm wrong, but this "original type design" is the same as that used to advertise the iPhone:


.

riccard0's picture

Steven Acres: In that case, I assume they would reduce the font size.

And it seems to you an optimal solution, in general and for interface elements in particular?

joeclark's picture

Sorry, kids: It isn’t OK to truncate text. Especially when, as is plainly evident here, visually unsophisticated, or stupid, or autistic Microsoft “engineers” merely let it happen.

rs_donsata's picture

Text isnt truncated, it is scrolling.

The font used is Segoe UI, a later development from the original
Segoe font licensed from Agfa Monotype by Microsoft.

staydecent's picture

Joeclark, that's what we call nonconstructive criticism.

Unsophisticated, in the manner that the words are still readable? are understood? or at one point in an active UI, were fully readable? Or how about the fact that the cutoff demonstrates the sort of, massive plane interface that MS has created.

It gives a sort of feeling of exploration, knowing there is this big, connected plane of information and media, and it slides in and out of the viewport.

Truncated text has been used for many years in graphic design(sorry no example as I am lazy). Would it not be better suited to have truncated text in interactive design, where the truncated portion is not lost forever, as apposed to printed?

Nick Shinn:

Do you think there is a point were digital is so understood, or accepted, or a part of ones life that it doesn't need to mimic to offer understandable(predictable) usability, but starts developing it's own traits and patterns?

Broadening the metaphor(away from just type), screen size, is almost a unique feature of the digital world. And even the swipe action(where it produces the same, expected result as an iPhone does). But I suppose that is just functional. And you may have been talking purely on the design.

What about underlined text? It hints at the same reaction that of a button, but does not mimic life.

Nick Shinn's picture

Do you think there is a point w[h]ere digital is so understood, or accepted, or a part of ones life that it doesn't need to mimic to offer understandable(predictable) usability, but starts developing it's own traits and patterns?

In terms of appearance, rather than behaviour, digital has ABSOLUTELY NO original visual qualities, so that point will never occur. Bytes are like that.

The "swipe" action (formerly known as "scrolling" isn't uniquely digital: before the invention of the codex (book), documents were in scroll format. In movies, what are pan and zoom if not truncations exposed? In the 19th century, before even the invention of photography, there were scrolling panoramas: http://en.wikipedia.org/wiki/Moving_panorama

In music, it is possible to digitally engineer sounds that no analog instrument could produce, but that is not the case with static visual images.

I once claimed that my Beaufort face, with its asymptotic pointed serifs, demonstrated a unique digital quality of super-sharpness, but was straightened out by Kent Lew, who argued that resolution is a function of output device, and that metal type was far sharper than digital-to-offset.

**

(Blue) underlined text as hyperlink: no, it doesn't look like a button, but there is nothing especially "digital" about underlining a word. It is repurposing, in a similar manner to Ladislaw Sutnar's repurposing of parentheses to indicate area code, or the use of @ for email addresses, or the > symbol in emails.

Some RGB colors are quite unique, however.

aluminum's picture

"The amount of bashing from the Mac living - Windows hating community"

How does every thread about technology turn into a Mac hating thread?

"Joeclark, that's what we call nonconstructive criticism."

Around here, we just call that 'joe clark'.

Steven Acres's picture

Nick Shinn:

Zune original (the older models) featured this typographic styling (which was around before the iPhone). I don't think the originality comes from knocked out sans-serif (which has been around for quite a longer time than these electronic devices), but comes from the fact that it's the first (or best) example of a GUI based on this aesthetic. And it takes it a step further in making the type a much larger size than usual. The iPhone ads are knocked out sans, but the type isn't oversized at all. I think that's what everyone is referencing when they mention the "originality."

Ray Larabie's picture

Perhaps current designers don't give it as much thought but just a decade ago, 3D buttons & windows were really cool. Pushing a button in and out of the screen is useful. But there was a wow factor attached to simulated 3D interfaces. Mid 1980's operating systems and devices weren't 3D because they couldn't be. On a Macintosh, there was no gray scale but 3D was indicated with a heavier lines on the bottom and right. There were hacks to make the Amiga Workbench interface look more 3D but it looked pretty lame because the desktop palette was limited.

I ran a hack on my Amiga that would create drop shadows for desktop windows but the drawing was painfully slow. I'm not sure when the Mac went 3D, but Windows 3.1 showed a little gloss. Buttons and windows had a little light and shade. Even though the colors were ugly, back then it looked pretty slick. Functionally, that was as 3D as an interface needs to get. You could tell what's clickable and how windows are overlapping. After Windows XP, the desktop was no longer restricted to the limited Windows default palette. Buttons had (ugly) shading, words had drop shadows and it made older operating systems look flat. Around the same time, the same thing was happening on the Mac with the transition from OS9 to OSX. Drop shadows, realistic textures, all designed to look 3D. While in XP, the effect was so poorly done that it looked unrealistic, in OSX, it looked very realistic. If you've never seen a computer before, you might think windows were suspended above the surface and buttons were shiny glass beads.

If you were to design a semi-flat interface like 0S9 in 2005, it would look old fashioned. The man of 2005 might think the interface wasn't flat on purpose . . . just incapable/cheap. A phone interface with a color screen in 2005 with flat buttons looked lower tech than a phone interface with shiny buttons. If you had millions of colors with work with, you could even make those buttons look like shiny plastic.

That's the state we're still in. If it's not glossy, it's low tech. The glossy interface used on the iPhone is trompe l'œil. Look at the start screen in iOS4. There's a glass shelf on the bottom with shiny plastic buttons suspended on it. The background has raindrops which look 3D. Whether we believe it's really 3D or not is not the point. It's an attempt to fool the eye into thinking that a flat "painting" is three dimensional. The only reason they don't have stuff hanging into the "picture frame" like some of the more clever trompe l'œil, is because they can't yet. If they could make the metal shelf in iOS4 pop right out of the screen, they probably would.

Syndicate content Syndicate content