Going full Metro.

I uploaded one single Metro inspired design that I once did for Microsoft India/Asia and the next thing I know I’m being asked to do more for other clients. I shouldn’t complain, money is money and I’m the type of guy who will unzip if the price is right – there’s a lasting image.

image

It seems that when you show someone large monochrome simple shaped designs, folks often gravitate towards them over some of my other usual gradient filled drop shadow filled designs. At first, I am shocked if not appalled at how they could dismiss one design which takes me much longer for a design that essentially looks like a colored in Wireframe mockup.

Metro simply put feels like I am shoplifting design. It’s not a lot of work and the main focus I have is controlling myself from adding too many elements to the screen or keeping the typography unbalanced. Color selection is also important as you have to keep that tightly controlled otherwise it ends up being a rainbow pixel barfing.

Metro is Developer art friendly.

One such client I have at the moment has expressed an interest in getting me to come in – as per usual – at the tail end of a sprint season of coding and well make it look “pretty”. They have also asked if I could weaponise the approach so that other teams within the company could leverage the same work within their projects.

image

What to do.. I need to make my design(s) for WPF/Silverlight engaging, useable and lastly repeatable. Metro like a super hero from the 1950’s, makes its way to the top of the conscious thought pile. Turns out those crazy beige loving engineering culture filled geeks in Redmond may actually be onto something here. Metro’s secret is that it creates a way in which designers and developers can finally reach a compromise on design.

Using large blocky shapes and minimalist approach to screen while peppering large amounts of typography whilst also not saying the words “Wireframes colored in” – boom, you have a design revolution within the .NET community its name – METRO.

Metro isn’t all monochrome rainbows and puppies…

There is a catch though with Metro, one that as a designer is starting to ride my last nerve. They all look the freaking same. I can’t help it, I get into a pattern and before I know it I’m knocking out a mutated design that I did 5x metro designs ago. I feel like I am cheating now, it feels bad that I am in what I call a design rutt and It’s hard to break out of given most inspirational sites like TheFWA.com have no metro goodness.

image

There are only so many times I can look at the Microsoft Health / Futures videos before I also end up copying their designs without realizing it. I simply crave others like me who are injecting large enough doses of Metro to stop a gradient filled elephant in its tracks. I need to get off this crack or I’ll end up living in a typecast world filled with basic shapes and colors.

Metro’s concept isn’t isolated to Microsoft.

I am also starting to see the world in glyphs, typography and bold colors. I pass a highway sign and I go “ooh, that color could be used in a design of mi…stop it!…stop..”. I pass elevator filled corridors and I can’t but help notice Helvetica is the weapon of choice most of the time in commercial metro filled buildings. I’m going full metro!

Metro is the future of glass.

This morning, watching my usual twitter feeds I come across a re-tweet from one of my design demi-god like heroes – Mark Coleran. In this link filled with the future(s) nectar I so willingly crave, is a video projecting what the world would be like if we had more glass and multi-touch screens. At first I am absorbing this eye candy like a fantasy user interface addict that I am – only, boom..there it is, metro.

I’m Scott Barnes, and I am now addicted to metro. If you or a family member are suffering from Metro affixation, please contact me together we can find a way out of this disease / addiction.

If you want to see more of my designs, you can do so here:

Related Posts:

The principles of Microsoft Metro UI decoded

The phrase “authentically digital” makes me want to barf rainbow pixels. This was a quote pulled from a Windows Phone 7 reviewer when he first got a hold of the said phone. At first you could arguably rail against the concept of what Authentically Digital means and simply lock it into the yet another marketing fluff to jazz a situation in an unnecessary way.

I did, until I sat back and thought about it more.

Issues Presented.

Metro in itself has its own design language attached, they cite a bunch of commandments that the overall experience is to respect and adhere that is to say, someone has actually sat down and thought the concept through (rare inside Microsoft UX). I like what the story is pitching and I agree in most parts with the laws of Metro that is to say, I am partially onboard but not completely.

I’m on board with what Metro could be, but am not excited about where it’s at right now. I state this as I think the future around software is going through what the fashion industry has done for generations – a cultural rebirth / reboot.

Looking back at Retro not metro.

Looking at the past, back in the late 90’s the world was filled with bold flat looking user interfaces that made use of a limited color palette given the said video capabilities back then wasn’t exactly the greatest on earth. EGA was all the rage and we were seeing hints of VGA whilst hating the idea that CGA was our first real cut at graphics.

EGA eventually faded out and we found ourselves in the VGA world (color TV vs. black n white if you will), life was grand and with 32bit color vs. 16bit color wars coming to a conclusion the worlds creative space moved forward leaps and bounds. Photoshop users found themselves creating some seriously wicked UI, stuff that made you at the time thank the UI gods for plug-ins like alien ware etc as they gave birth to what I now call the glow/bevel revolution in user interface design.

Chrome inside software started to take on an interesting approach, I actually think you could probably trace its origins of birth in terms of creative new waves back to products like Winamp & Windows Media player skins. The idea that you could take a few assets and feed them into mainstream products like this and in turn create this experience on the desktop that wasn’t a typical application was interesting (not to mention Macromedia Director’s influence here either).

image

I think we all simply got on a user interface sugar induced high, we effectively went through our awkward 80’s fashion stage, where crazy weird looking outfits / music etc was pretty much served up to the world to gorge on. This feast of weird UI has probably started to wind down to thanks to the evolution of web applications, more importantly what they in turn taught us slowly.

Web taught the desktop how to design.

The first lesson we have learnt about design in user interface from the web is simple – less is more. Apple knocks this out of the park extremely well and I’d argue Apple wasn’t its creator, the Web 2.0 crowd as they use to be know was. The Web 2.0 crowd found ways to simply keep the UI basic to the point and yet visually engaging but with minimalist views in mind. It worked, and continues to work to this day – even on Apple.com

image

Companies like Microsoft have seen this approach to designing user interface and came to a fairly swift rationale that if one were to create a platform for developers & designers to work in a fashion much like the web, well desktop applications themselves could take on an entirely new approach.

History lesson is over.

I now look at Metro thinking back on the past evolution and can’t but help think that we’re going back to a reboot of EGA world, in that we are looking for an alternative to design in order to attract / differentiate from the past. Innovation is a scarce commodity in today’s software business, so we in turn are looking at ways to re-energize our thinking around software design but in a way that doesn’t create a cognitive overload – be radical, be daring but don’t be disruptive to process/task.

Inside Microsoft what I can presume, the ECG group found a way to hijack existing patterns in terms of user recognition and make use of modern signage found inside bus station, railways, elevator marshal areas etc and declared this to be the way out of the excess UI scourge.

I like it, I like this source of inspiration but my first instinct was simple – I hope your main source of success isn’t the reliance on typography, especially in this 7second attention economy of today. Sure enough, there it is, the reliance in Windows phone 7. Large typography taking over areas of where chrome used to live in order to fix what chrome once did. The removal of color / boundary textures in order to create large empty space filled with 70px+ Typography with half-seen half-hidden typography is what Microsoft’s vision of tomorrow looks like.

Metro isn’t Wp7, Metro is Microsoft Future Vision.

My immediate reaction to seeing the phone (before the public did) back inside Microsoft was "are you guys high, this is not what we should be doing, we are close but keep at it, you’re nearly there! don’t rush this!". This reaction was the equivalent of me looking at a Category 5 Tornado, demanding it turn around and seek another town to smash to bits – brave, forward thinking but foolish.

This phone has to ship, its already had two code resets, get it done, fix it later is pretty much the realistic vision behind Windows Phone 7 – NOT – Metro.

Disbelief?

Take a look at what the Industry Innovation Group has produced via a company called Oh, Hello. In this vision of tomorrow’s software (2019 to be exact) you’ll see a strong reliance on the metro laws of design.

The Principles of Metro vs. Microsoft Future Vision.

In order to start a conversation around Metro in the near future, one has to identify with the level of thinking associated with its creation. Below is the principles of metro – more to the point, these are the design objectives and creative brief if you will on what one should approach metro with.

Clean, Light, Open, Fast

  • Feels Fast and Responsive
  • Focus on Primary Tasks
  • Do a Lot with Very Little
  • Fierce Reduction of Unnecessary Elements
  • Delightful Use of Whitespace
  • Full Bleed Canvas

You could essentially distill these points down to one word – minimalist. Take a minimalist approach to your user interface and the rewards are simple – sense of responsiveness in user interface, reliance on less information (which in turn increases decision response in the end user) and a reduction in creative noise (distracting elements that add no value other than it was cool at the time).

image

In Figure 1, we I’d strongly argue you could adhere to these principles. This image is from the Microsoft Sustainability video, but inside it you’ve got a situation which respects the concept of Metro as after all given the wide open brief here under one principle you could argue either side of this.

Personally, I find the UI in question approachable. It makes use of a minimalist approach, provides the end user with a central point of focus. Chrome is in place, but its not intrusive and isn’t over bearing. Reliance on typography is there, but at the same time it approaches in a manner that befits the task at hand.

image

Microsoft’s vision of this principle comes out via the phone user interface above (Figure 2). I’m not convinced here that this I the right approach to minimalism. I state this, as the iconography within the UI is inconsistent – some are contained others are just glyphs indicating state?. The containment within the actual message isn’t as clear in terms of spacing – it feels as if the user interface is willing to sacrifice content in order to project who the message is from (Frank Miller). The subject itself has a lower visual priority along with the attachment within – more to the point, the attachment has no apparent containment line in place to highlight the message has an attachment?

image

Microsoft’s original vision of device’s future has a different look to where Windows Phone 7 today. Yet I’d state that the original vision is more in line with the principles than actual Windows Phone 7. It initially has struck a balance between the objectives provided.

The iconography is consistent and contained, typography is balanced and invites the users attention on important specifics – What happened, where and oh by the way more below… and lastly it makes use of visuals such as the photo of the said person. The UI also leverages the power of peripheral vision to give the user a sense of spatial awareness in that, its subtle but takes on the look and feel of an “airport” scenario.

Is this the best UI for a device today? No, but it’s approach is more in tune with the first principle then arguably the current Windows Phone 7’s approach which is reliance of fierce amounts of whitespace, reduction in iconography to the point where they clearly have a secondary reliance and lastly emphasis on parts of the UI which I’d argue as having the lowest importance (i.e. the screen before would of indicated who the message is from, now I’m more focused on what the message is about!).

image

image

 

Celebrate Typography

  • Type is Beautiful, Not Just Legible
  • Clear, Straightforward Information Design
  • Uncompromising Sensitivity to Weight, Balance and Scale

I love a good font as the next designer. I hoard these like my icons, in fact It’s a disease and if you’re a font lover a must see video is Helvetica. That being said, there is a balance between text and imagery, this balance is one struck often daily in a variety of mediums – mainly advertising.

Imagery will grab your attention first as it taps into a primitive component within your brain, the part that works without your realizing its working. The reason being is your brain often is in auto-pilot, constantly scanning for patterns in your every day environment. It’s programmed to identify with three primative checks, fear, food and sex. Imagery can tap into these striaght away, as if you have an image of an attractive person looking down at a beverage you can’t but help first think “that’ person’s cute (attractive bias) and what are they looking at? oh its food!…” All this happens despite there being text on the said image prior to your brain actually taking time to analyse the said image. To put it bluntly, we do judge a book by its cover with extrem amount of prejudice. We are shallow, we do prefer to view attractive people over ugly unless we are conveying a fear focused point “If you smoke, your teeth will turn into this guys – eewwww” (Notice why anti-cigarette companies don’t use attractive people?)

Back to the point at hand, celebrating typography. The flaw in this beast despite my passion for fonts, is that given we are living in a 7 second attention economy (we scan faster than we have before) reliance on typography can be a slippery slope.

image

In Figure 6, a typical futuristic newspaper that has multi-touch (oh but I dream), you’ll notice the various levels of usage of typography (no secret to news papers today). The headings on purpose approach the user with both different font types, font weight, uppercase vs lowercase and for those of you out there really paying attention, at times different kerning / spacing.

The point being, the objective is that typography is in actuality processed first via your brain as a glyph, a pattern to decode. You’ve all seen that link online somewhere where the wrod is jumbled in a way that you first are able to read but then straight away identify the spelling / order of the siad words. The fact I just did it then along with poor grammar / spelling within this blog, indicates you agree to that point. You are forgiving majority of the time towards this as given you’ve established a base understanding of the english language and combine that with your attention span being so fast paced – you are more focused on absorbing the information than picking apart how it got to you.

Typography can work in favor of this, but it comes at a price between balancing imagery / glyphs with words.

image

The above image (Figure 7) is an example of Metro in the wild. Typography here is in not to bad of a shape, except for a few things. The first being the “Pictures” text is making use of a large amount of the canvas, to the point where the background image and heading are probably duking it out for your attention. The second part of this is the part that irritates me the most, in that the size of the secondary heading with the list items is quite close in terms of scale. Aside from the font weight being a little bolder, there is no real sense of separation here compared to what it should or could be if one was to respect the principle of celebrating typography.

Is Segoe UI the vision of the only font allowed? I hope not. Is the font weight “light” and “regular” the only two weights attached to the UI? what relevance does the background hold to the area – pictures? ok, flimsy at best contextual relevance but in comparison to the Figure 3 above a subtle usage of watermarks etc. to tap into your peripheral vision would provide you more basis to grapple onto – pattern wise that is. Take these opinions and combine the reality that there is no sense of containment and I’m just not convinced this is in tune with the principle. It’s like the designers of metro on windows phone 7 took 5% of the objectives and just ran with it.

image

Comparisons between Figure7 and Figure8, the contrast in usage of typography is different but yet both using the same one and only font – Segoe UI. The introduction of color helps you separate the elements within the user interface, the difference in scale is obvious along with weight and transforms (uppercase / lowercase). Almost 80% of this User Interface is typography driven yet the difference in both is what I hope to be obvious.

image

Don’t despair, it’s not all dark and gloom for the Windows Phone 7 future. Figure 9 (Above) is probably one of the strongest hints of “yes!” moment for the siad phone I could find. Typography is used but add visual elements and approach the design of typography slightly differently and you may just have a stake in this principle. The downside is the choice of color, orange and light gray on white is ok for situations that have increased scale, but on a device where lighting can be hit/miss, probably need to approach this with more bolder colors. The picture in the background also creeps into your field of view over the text, especially in the far right panel.

image

Alive in motion

  • Feels Responsive and Alive
  • Creates a System
  • Gives Context to Improve Usability
  • Transition Between UI is as Important as the Design of the UI
  • Adds Dimension and Depth

I can’t really talk to these principles via  text on a blog, but what I would say is that the Windows Phone attacks this relatively ok. I still think the FlipToBack transition is to tacky and the reality between how the screens transition in and out at times isn’t as attractive as for example the iPhone (ie I really dig how the iphone zooms the UI back and to the front?). The usage of kinetic scrolling is also one that gives you the sense of control, like there are some really well oiled ball bearings under the UI’s plane that if you flick it up, down, right or left the sense of velocity and friction is there.

If you zoom in and out of the UI, the sense that the UI will expand and contract in a fluid nature also gives you the element of discovery  (Progressive disclosure) but can also give you a sense of less work attached.

image

image

Taking Figure 11 & Figure 12 (start and end) one could imagine a lot of possibilities here in terms of the transition were to work. The reality that Reptile Node expands out to give way to types of reptiles is hopefully obvious whilst at the same time the focus is on reptile is also in place (via a simple gradient / drop shadow to illustrate depth). Everything could snap together in under a second or maybe two but it’s something you approach with a degree of purpose driven direction. The direction is “keep your eye on what I’m about to change, but make note of these other areas I’m now introducing” – you have to move with the right speed, right transition effect and at the same time don’t distract to heavily in areas that aren’t important.

Content, Not Chrome

  • Delight through Content Instead of Decoration
  • Reduce Visuals that are Not Content
  • Content is the UI
  • Direct interaction with the Content

Chrome is important as content. I dare anyone to provide any hint of scientific data to highlight the negative effects of grouping in user interface design. Chrome can be over used, but at the same time it can be a life saver especially when the content becomes over bearing (most line of business applications today suffer from this).

Having chrome serves a purpose, that is to provide the end user a boundary of content within a larger canvas. An example is below

image

image

image

I could list more examples but because I’m taking advantage of Microsoft Sustainability video, I figure this would be sufficient examples of how chrome is able to breakup the user interface into contextual relevance. Chrome provides a boundary, the areas of control if you will in order to separate content into piles of semantic action(s). Specifically in Figure 15, the brown chrome is much like your dashboard on the car ie you’re main focus is the road ahead, that’s your content of focus but at the same time having access to other pieces of information can be vital to your successful outcome. Chrome also provides you access to actions in which you can carry out other principles of human interaction – e.g., adjustment of window placement and separation from within other areas offers the end user a chance of tucking the UI into an area for later resurrection (perspective memory).

Windows Phone 7 for example prefers to levearge the power of Typography and background imagery as its “chrome” of choice. I’m in stern disagreement with this as the phone itself projects what I can only describe as uncontained vast piles of emptiness and less on actual content. The biggest culprit of all for me is the actual Outlook client within the said phone.

image

The Outlook UI for me is like this itch I have to scratch, I want the messages to have subtle separation and lastly I want the typography to have a balance between “chrome” and “whitespace”.

image

Chrome can also not just be about the outer regions of a window/UI, it has to do with the internal components of the user interface – especially in the input areas. The above (Figure 17) is an example of Windows Phone 7 / Metro keyboard(s). At first glance they are simple, clean and open, but the part that captures my attention the most is the lack of chrome or more to the point separation. I say lack, as the purpose of chrome here would be to simulate tactile touch without actually giving you tactile touch. The keyboard to the right has ok height, but the width feels cramped and when I type on the said device It feels like I’m going to accidently hit the other keys (so I’m now more cautious as a result).

image

The above (Figure 18) offers the same concept but now with “chrome” if you will. Nice even spacing, solid use of principles of the Typography and clear defined separation in terms of actions below.

image

iPhone has found a way to also strike a balance between chrome and the previous stated principles. The thing that struck me the most about the two keyboards is not which is better, but more how the same problem was thought about differently.  Firstly as you type an enlarged character shows – indicating you hit that character (reward), secondly the actual keys have a similar scale in terms of height/width proportions yet the key itself having a drop shadow (indicates depth) to me is more inviting to touch then a flat – (its like which do you prefer? a holographic keyboard or one with tactile touch, physical embodiment?). If you were to also combine both sound and vibration as the user types it can also help trick the end users sense into a comfortable input.

I digress from Chrome, but the point I’m making is chrome serves a purpose and don’t be quick to declare the principles of Metro as being the “yes!” moment as I’d argue the jury is still not able to formulate a definitive answer either way.

Authentically Digital

  • Design for the Form Factor
  • Don’t Try to be What It’s NOT
  • Be Direct

I can’t talk to this to much other than to say this isn’t a principle its more marketing fluff (the only one with a tenuous at best attachment to design principles would be “design for the form factor” meaning don’t try and scale down a desktop user interface into a device. Make the user interface react to the device not the other way around.

Summary

Metro is a concept, Microsoft has had a number of goes at this concept and I for one am not on board with its current incarnation inside the Windows Phone 7 device. I think the team have lost sight of the principles they themselves have put forward and given the Industry Innovation Group have painted the above picture as to what’s possible, it’s not like the company itself hasn’t a clue. There is a balance to be struck here between what Metro could be and is today. There are parts of Windows Phone 7 that are attractive and then there are parts where I feel it’s either been rushed or engineering overtook design in terms of reasons for what is going on the way it is (maybe the design team couldn’t be bothered arguing to have more time/money spent on propping up areas where it falls short).

People around the world will have mixed opinions about what metro is or isn’t and lastly what makes a good design vs what doesn’t. We each pass our own judgement on what is attractive and what isn’t that’s nothing new to you. What is new to you is the rationale that software design is taking a step back into the past in order to propel itself into the future. That is, the industry is rebooting itself again but this time the focus is on simplicity and by approaching metro with the Microsoft Future’s vision vs the Windows Phone 7 today, I have high hopes for this proposed design language.

If the future is taking Zune Desktop + Windows Phone 7 today and simply rinse / repeating, then all this will become is a design fad, one that really doesn’t offer much depth other than limited respite from the typical desktop / device UI we’ve become used to. If this is enough, then in reality all it takes is a newer design methodology to hit our computer screens and we’re off chasing the next evolution without consistency in our approach (we simply are just chasing shiny objects).

I’ve got a limited time on this earth and I’d like to live in a world where the future is about breaking down large amounts of unreadable / unattractive information into parts that propel our race forward and not stifle it into bureaucratic filled celebrations of mediocrity.

Apple as a company has kick started a design evolution, and say what you will about the brand but the iphone has dared everyone to simply approach things differently. Windows Phone team were paralyzed at times with a sense of “not good enough” when it came to releasing the vnext phone, it went through a number of UI and code resets to get it to the point it’s at now. It had everything to do with the iPhone, it had to dominate its market share again and it had to attract consumers in a more direct fashion. It may not have the entire world locked to the device, but it’s made a strong amount of interruption into what’s possible. It did not do this via the Metro design language, they simply made up their own internally (who knows what that really looks like under the covers).

Microsoft has responded and declared metro design as its alternative to the Apple culture, the question really now is can the company maintain the right amount of discipline required in order to respect the proposed principles.

I’d argue so far, they haven’t but I am hopeful of Windows 8.

Lead with design, engineer second.

Related Posts:

Future UX showreels.

image There is something important you must do, in that if you are a regular reader of my blog and often read my rants about how UX this and UX that, then you need to get to the core of why I exist in this space.

Grab a beer, wine, Red Bull whatever your liquid of choice that kind of breaks you out of your mundane existence and sit down and watch the following videos. I guarantee you that if you’re not excited enough to crack open Flash, Silverlight, AfterEffects, Photoshop or whatever your software poison of choice is, then well, this space is simply something you’re not going to be great at – maybe good, but never great.

Warning: Do not sit too close to your monitor as drooling has been known to occur

(1) First

. Let’s do a lap around Mark Coleran’s private collection, I despise this guy’s talent and the constant opportunities he got to work on these projects and never once did he Skype me before hand asking for a chance to do them. *waves fist at Mark, damn you..daaaamn you!*..

Coleran Reel 2008.06 HD from Mark Coleran on Vimeo.

(2) Second

Microsoft has been slammed recently for lack of creative innovation. Look, its mostly true, the company does fumble a lot around this space but every now and then, they outsource to the right agency who manages to tell a story that exceeds peoples expectations of what the company is capable of. Microsoft Sustainability video by Oh, Hello in Seattle, is an example of this. If you suddenly don’t get all excited about Silverlight/WPF after this, then you’re just not into Microsoft.

(3) Third

This ones a local vision, but its from the Commonwealth Bank of Australia (CBA). It’s there vision on how the future will look via the CBA. The comedian in me chuckles a little at the notion that if I ring the hotline i get an immediate answer from a bank manager, but, it’s not about that its about painting a vision and for that, I’ll bank with CBA. Would love to know which agency did this? (Anyone know?)

(4) Fourth

Back to Mr Coleran, he’s done it again that talented so and so  (UPDATE: Not Mark Coleran, its from Peter Menich and 27Forty Studios for Alcatel). I like this one as I look at the concepts used and I see a lot of commonality in patterns used in either today’s UI’s as well as some of the future UI’s that others have through-up as well. My thinking is that if its a common collective vision it stands a greater chance of becoming reality.

(5) Fifth

I love this concept of how mainstream media like magazine can be turned into more of a interactive experience – in that no longer just static pieces of information. Kindle, iPad, Courier etc are all hinting in this space so its not that far removed from fantasy vs reality.

Mag+ from Bonnier on Vimeo.

 

(6) Sixth

This one is kind of weird, I kind of feel like Homer Simpson in that episode he finds his facial features in a Japanese Video and getting freaked out but excited at the same time. I don’t mind this one as it kind of goes to the extreme end on how Augmented Reality could occur should the right eyewear or face shield be built (think IRONMAN). (Thanks to: infocycde for the link)

(7) Seventh

This is the minority report come to life, and its exactly how a concept that Mark Coleran worked on in a movie suddenly appears in real life, again, FUI meets reality. Thanks Mark for the heads up on this one!

oblong’s tamper system 1801011309 from john underkoffler on Vimeo.

(8) Eighth.

Cynergy Systems have put together a brilliant presentation of how a portable device meets a surface table, whilst allowing a buying style concept to occur. It makes me think that whilst everything these days is pushing to be online that with this concept a store owner can still exist, but the physical component to a store doesn’t have to exist. In that you go into a store, speak with the store owner etc and simply drag the book into your device for purchase etc. I like this concept and what’s cool also about it is the fact its already done, it’s not so much a Fantasy User Interface for the future.

(9) Ninth

.<insert your find here> If you know of other showreels like this, please send me an email or drop a comment below with the URL, as I want to build out this page to include them all. I want them like a crack addict needs a new fix.

Related Posts:

FUI – Igniting the Fantasy User Interface spark.

 

Introduction

Every single time I’ve been given a brief to design something, I often will browse the internet for inspiration, in that I just need something to help nudge me into the direction of an idea. I also constantly keep mug shot’s of user interfaces that I often enjoy interacting with or spot parts of that simply are well designed.

In the past probably 3 years, Industrial Design has also gotten a hold of me, as the more and more I see how devices are emerging onto the world technology landscape the more and more I get excited about the software that drives them – hence my love for Flash/Silverlight over the years. These devices are starting to take into consideration the end to end experience, not just from the physical touch but also through to the emotive touch provided by the device once it’s given life.

At times however, these fake devices are simply a fantasy concept, illusion and/or to be continued. The would be inventors throw their idea out into the wild and soon it becomes a feeding frenzy in that it’s almost a glimpse to all as to what the future holds.

I myself, get excited by the idea of being the designer for such devices. In that, what if I got a job tomorrow and it was to design the next graphical interface for x new invention. That’s where the true fun is in software design in my opinion, its the ability to shape a culture through hardware and software at the same time. iPhone, Zune, XBOX etc are all doing this now, and its a no brainer at the success they are having.

In light of this core passion of mine, I had an idea today, what if I dared all to do just that, design the UI for the next generation invention. What would you all come up with? and how would you explain what it is you did?

Getting Started

I constantly am being asked every time I meet with developers etc in the Microsoft community – “How do I get started with UX”, I’ve attempted to answer this but I’m still not happy with that answer. Today, it hit me, and my answer is “design something you think is going to be the vNext”. I say this as I think it will first throw you into the deep end fast, secondly it will make you think about something that has not yet been invented and thirdly it exposes your level of passion in a raw format.

Carbon Motors E7

Today, there is a car called the Carbon Motors E7 it’s basically a futurist police car that has been designed and developed to help law enforcement world wide do their jobs more effectively. You can read more about the car at their website or below, but the thing that struck me about this car when I first read about in a magazine, was the level of detail the designers went to in terms of designing it. It’s a car begging for some CSI fake UI to help sell it’s idea to the world, in that take the car’s physical designs into place, what else could it use to help officers do their job?

This is where FUI (Fake User Interface(s) – term coined by Mark Coleran) comes into place, what if I dared you all to make the software for the car, you have unlimited budget and unlimited use of any technology, what would you implement into the car and what should it look like?

Let’s start with the middle console of the car. This is the nerve center of a cop, its his/her office and super computer in one. This area’s job is to provide officers an understanding of events and information not only within his/her patrol zone but also live situations outside the car itself (speeding cars, number plates etc).

What should this UI look like?

The HUD

Let’s Design.

The assumption for the car is this:

  • There is NextG broadband built into the car’s computer console.
  • The car is fitted with internal and external cameras (HD display) on the car (Fact: the car is actually fitted with an internal camera so police can monitor criminals in the back and it can also record 1500 number plates per minute of cars all around it).
  • The car can detect biological and nuclear readings.
  • The car can detect stolen cars both around it live as well as has the ability to recall a days worth of number plates that the car has seen during its patrol (Fact: It can do this, its not b.s)
  • The car’s cameras can also conduct facial recognition of suspects both in front, back and side views.
  • The car can provide live tracking of its self and other police cars within the area (GPS etc)
  • The cars screens are all fitted with touch panel capabilities.
  • The cars have voice and webcam capabilities (vide conferencing etc)
  • etc… use your imagination

The car today is actually pretty much fitted out with some of the above, but the possibilities of this concept are endless. The thing that gets my design propeller’s going is what would the HUD of the car look like, what would the console in the middle show when the officer first gets in.

I’m going to play around with this fantasy, and come up with some design mockups of how I would approach the GUI if i were given the task of being the interactive director for it. I’m going to ask various people I know around me for ideas on what they would put into and why etc. As this for me is a great case study for how user experience can empower a concept car like this further than its physical brilliance that’s out there today.

Related Posts:

Revolutionary Incremental UX Going unnoticed.

Friday I was on a flight from Perth to Melbourne and was watching the movie IRONMAN on my iPhone (3hr flight – welcome respite from Qantas’ usual propaganda TV). I love this movie for a number of reasons mostly because every time i see the FUI (Fantasy User Interfaces) it just gets my creative mojo going again. I find these types of Hollywood movies inspirational and firmly believe they bleed out into real life and affect UX designs world-wide.

One scene did catch my eye, it was a scene where the guy from Mad Money tells everyone to sell stocks in Stark industries.

image

I chuckled at seeing this scene, as for me I can’t but help laugh at the fact here we have this fantasy based device that 3 years ago, made people drool at the very idea of its existence. Fast forward to today, Apple announces the iPad which is probably the closest looking device of this kind on the actual market and has received mixed reviews, mostly how it lacks innovation.

image

Innovation, what does that mean? Wikipedia says:

The term innovation means a new way of doing something. It may refer to incremental, radical, and revolutionary changes in thinking, products .

Incremental and revolutionary are often not allowed to be used in the same sentence as they kind of fight with one another in terms of adhering to people expectations.

image For instance, I’ve often heard Microsoft Surface table being declared a “missed opportunity” and I can’t but help disagree with that remark. Today for instance I ordered a Dell Multi-Touch monitor and a new Dell Laptop with Windows 7. 1 year ago, it didn’t exist, today it does. Microsoft Surface did it’s job, it dared the mainstream hardware manufacturers to beat it in an open market place, it provided the necessary research and development skills to the Windows team to ensure multi-touch was baked into the next operating system (which has recently reported enormous growth potential). It’s expected by 2012, multi-touch devices are going to be as normal as a mouse/keyboard – yet, 5 years ago, it didn’t exist.

10 months ago, Silverlight was just a plug-in, today it’s a plug-in that sits within a browser but also has the option to pop out of the browser, sit on your desktop and then get this – have a browser within itself. It’s fast becoming a concept where you have browser meets desktop and the division between desktop client and browser start to blur.

Approx 2 years ago, Steve Ballmer wrote off the iPhone as just some luxury device that wouldn’t sell as well as folks believed it to. He was partially right, the iPhone hasn’t sold as much as people think, but what it did do was light a huge fire under the mobile device markets butts. Now, today, you’re being bombarded with “iPhone” envy based devices.

image

My overall point is this, somehow we are owed more yet we don’t seem to take time out to pause and reflect on what we have before us. User Experiences is a prominent fixture in our daily lives now, the “good enough” approach is fast becoming taboo, we are innovating and we are doing it via revolutionary increments. The software industry is probably at its most exciting point in time, its the time when operating systems and devices need to bring more to the table than they have that or find ways to expose what they have in a more UX favored light (innovation is often also hidden deep within the bowels of existing technology, waiting to be exposed).

Steve Jobs this week allegedly called Adobe lazy and in the same breathe cited HTML5 as the future. I agree Adobe have been lazy and immature for quite some time (its the core of my frustration with the brand) but I disagree with HTML5. The reason I disagree with HTML5 as i feel it goes backwards in innovation and not forward, its an incremental growth spurt that is taking forever to land. What happens with HTML5 thereafter? what’s next?

image

I’ll buy an iPad for the same reason it was shown in the movie IRONMAN as for me its going to be my interactive tv and newspaper in one. Fit for initial purpose to be exact. I bought a multi-touch capable computer now, because i want to implement some ideas I’ve had for quite some time, albeit implement my Fantasy UI.

I’ll continue to look at every device I can find that touches on User Experience and look at it from the lens of “What does it do? and what will it inspire its competitors to do?” and then judge it a success or failure. Incremental change needs to come from lessons learned.

image

Links you should click on:

Learn to Appreciate Technology

Related Posts: