Creating a designer & developer workflow end to end.


When I was at Microsoft we had one mission really with the whole Silverlight & WPF platform(s) – create a developer & designer workflow that keeps both parties working productively. It was a mission that i look back on even to this day with annoyance, because we never even came close to scratching the surface of that potential. Today, the problem still even with Adobe and Microsoft competitive battles in peace-time hasn’t actually been solved – if anything it kind of got slightly compounded or fragmented more so.

Absorbing the failure and having to take a defensive posture over the past five years around how one manages to inject design into a code-base in the most minimal way possible, I’ve sort of settled into a pipeline of design that may hint at the potential of a solution (i say hint..).

The core problem.

Ever since I think 2004, I’ve never been able to get a stable process in place that enables a designer and developer to share & communicate their intended ideas in a way that ends up in production. Sure they end up something of a higher quality state but it was never really what they originally set out to build, it was simply a end result of compromises both technically and visually.

Today, its kind of still there lingering. I can come up with a design that works on all platforms and browsers but unless i sit inside the developer enclosure and curate my design through their agile process in a concentrated pixel for pixel way, it just simply ends up getting slightly mutated or off target.

The symptoms.

A common issue in the process happens soon after the design in either static form or in prototype form gets handed off to the developer or delivery team. They look at the design, dissect it in their minds back to whatever code base they are working on and start to iterate on transforming it from this piece of artwork into actual living interactive experience.

The less prescriptive I am in the design (discovery phase) the less likely i’ll end up with a result that fits the way i had initially imagined it to begin with. Given most teams are also in an Agile way of life the idea that I have time or luxury of doing a “big up front” design rarely ever presents itself these days. Instead the ask is to be iterative and to design in chunking formations with the hope that once i’ve done my part its handed off to delivery and then it will come out unscathed, on time and without regression built in.

Nope. I end up the designer paying the tax bill on compromise, i’m the guy usually sacrificing design quality in lieu of “complexity” or “time” derived excuses.

I can sit here as most UX`ers typically do and wave my fist at “You don’t get us UI and UX people” or argue about “You need to be around the right people” all i want but in truth this is a formula that gets repeated throughout the world. It’s actually the very reason why ASP.NET MVC, WPF and Silverlight exist really – how do we keep the designer and developer separated in the hope they can come together more cleanly in design & development.

The actual root cause for this entire issue is right back at the tooling stage. The talent is there, the optimism is there but when you have two sets of tooling philosophies all trying to do similar or close to similar things it tends to kind of breed this area of stupidity. If for example i’m in Photoshop drawing a button on canvas and using a font to do so, well at the back my mind i realise that the chances of that font displaying on that button within a browser is less likely to happen then inside the tool – so i make compromises.

If i’m using a grid setting that doesn’t match the CSS framework i’m working with, well, guess what one of us is about to have a bad day when it comes to the designer & developer convergence.

If i’m using 8px padding for my According Panel headers in WPF and the designs outside that aren’t sharing the same constancy – well, again, someone’s in for a bad day.

It’s all about grids.

Obviously when you design these days a grid is used to help figure out portion allocation(s) but the thing is unless the tooling from design to development all share the same settings or agreed settings then you open yourself up from the outset to failure. If my grid is 32×32 and your CSS grid uses 30% and we get into the design hand over, well, someone in that discussion has to give up some ground to make it work (“lets just stretch that control” or “nope its fixed, just align it left…” etc start to arise).

Using a grid even at the wireframing stage can even tease out the right attitude as you’re all thinking in terms of portion and sizing weights (t-shirt size everything). The wireframes should never be 1:1 pixel ready or whatever unit of measure you choose, they are simply there to give a “sense” of what this thing could look like, but it won’t hurt to at least use a similar grid pattern.

T-shirt size it all.

Once you settle on a grid setting (column, gutters and N number of columns) you then have to really reduce the complexity back to simplicity in design. Creating T-shirt sizes (small, medium, large etc) isn’t a new concept but have you even considered making that happen for spacing, padding, fonts, buttons, textinputs, icons etc etc.

Keeping things simple and being able to say to a developer “Actually try using a medium button there when we get to that resolution” is at the very least a vocabulary that you can all converse in and understand. Having the ability to say “well, maybe use small spacing between those two controls” is not a guessing game, its a simple instruction that empowers the designer to make an after-design adjustment whilst at the same time not causing code-headaches for the developer.

Color Palettes aren’t RGB or Hex.

Simplicity in the language doesn’t end with T-shirt sizing it also has to happen with the way we use colors. Naming colors like ClrPrimaryNormal, ClrPrimaryDark, ClrPrimaryDarker, ClrSecondaryNormal etc help reduce the dependency of getting bogged down into color specifics whilst at the same time giving the same adjustment potential as the T-shirt sizes had as well – “try using ClrBrandingDarker instead of ClrBrandingLight”. If the developer is also color blind as in no they are actually colorblind, this instruction also helps as well.

Tools need to be the answer.

Once you sort the typography sizing, color palette and grid settings well you’re now on your way to having a slight chance of coming out of this design pipeline unscathed but the problem hasn’t still been solved. All we have done really is created a “virtual” agreement between how we work and operate but nothing really reinforces this behavior and the tools still aren’t being nice with one another as much as they could be.

If i do a design in say Adobe tools I can upload them to their creative cloud quite quickly or maybe even dropbox if have it embedded into my OS. However my developer team uses Visual Studio’s way of life so now i’m at this DMZ style area of annoyance. On one hand i’m very keep to give the development team assets they need to have but at the same time i don’t want to share my source files and much the same way they have with code. We need to figure out a solution here that ticks each others boxes as sure i can make them come to my front door – cloud or dropbox. That will work i guess, but they are using github soon so i guess do i install some command line terminal solution that lets me “Push” artwork files into this developer world?

There is no real “bridge” and yet these two set of tools has been the dogma of a lot teams lives of the better part of 10 years, still no real bridge other then copy & paste files one by one.

For instance if you were to use the aforementioned workflow and you realize at the CSS end that the padding pixels won’t work then how do you ensure everyone see’s the latest version of the design(s)? it realises heavily on your own backwater bridge process.

My point is this – for the better part of 10 years i’ve been working hard to find a solution for this developer / designer workflow. I’ve been in the trenches, i’ve been in the strategy meetings and i’ve even been the guy evangelizing  but i’m still baffled as to how I can see this clear linear workflow but the might of Adobe, Microsoft, Google, Apple and Sun just can’t seem to get past the developer focused approach.

Developers aren’t ready for design because the tools assume the developer will teach the designer how to work with them. The designer won’t go to the developer tools because simply put they have low tolerance for solutions that have an overburden of cognitive load mixed with shitty experiences.

5 years ago had we made Blend an intuitive experience that built a bridge between us and Adobe we’d probably be in a different discussion about day to day development. Instead we competed head-on and sent the entire developer/designer workflow backwards as to this day i still see no signs of recovery.

Related Posts:

The Cost of Design.

It was the HTML generation that first gave mainstream hints that with a good designer in the cubicle you could in turn have a positive effect to business. That is to say by opening a simple browser, navigating to an address and interacting with “forms” that you in turn could begin taking consumerism to a new level of shop-less input(s0.

Fast forward today the cost of design has not only increased but has also gotten higher in its requirement in terms of automating the shop-less facade. User’s albeit consumers are targeted in a variety of device ridden channel delivery and the cost of having a traditional developer and designer team has not been reduced.

Specialised Teams

Cubicles of tomorrow aren’t going to be housed with team members who can write  and design for multiple devices at the same time. They will be broken into specialised teams and the more and more business(s) begin to consolidate their branding into the device market(s) the more they will look to simplifying their product portfolios and brands.

A team of .NET developers who write HTML and WPF client(s) will most likely need to include an iPhone/iPad, Android/Blackberry team(s) who mirror their offering. Companies will aggressively recruit and look for people who are agnostic in one or mediums but realistically given the complexity involved in all the current UX Platform(s) it just isn’t feasible to find that many people on the market waiting for a job call.

Browser Forking

Having a specialised team isn’t restricted to proprietary solutions, it will also factor into a more traditional medium of HTML development and design. As strange as this may sound to hear, the idea that HTML5 will bring the industry into a global position of unanimous parity of it’s implimentation amongst all browsers is simply not correct.

The only browser that i’d argue has a vested interest in remaining pure would be Google Chrome and that’ simply because having the entire globe of online consumers still accessing HTML work’s to the search engine and advertising model of Google.

Having a browser fork in API and extend beyond HTML/JS works to Apple, Google and Microsoft’s favor as well. In fact, I’d argue Microsoft are banking on the ye olde embrace / extend model it’s had in the past (with great success).

Diverse a Product Portfolio

Once companies have audited and forecasted what their internal current development team models will look like for the next 2-3 fiscals, they in turn will need to reflect on which bets to place in which markets that are dictated by their choice of development. It will depend on their choice but even then they still need to figure out how they can leverage an iPhone more than they can an Android (or substitute your own technology bet here). For every device you target brings a variety of constraints and expectations that you need to meet prior to even beginning development.

Diversity in choice will ultimately have an impact on a companies brand and consistency model in how they want to broadcast their personality to their respective users. If you target an iPhone for example you have a pretty prescriptive UI design to leverage so it pays to run with it and not against it, given it will reduce your time to market cost(s). Same applies with Android and especially with Windows Phone.

Problem with prescribed design isn’t its ability to convey a uniform user experience with an end user it’s core issue is the reduction of being able to stand out amongst your consumer(s). If you spend more you can overcome the prescribed approach but in doing so you also need to ensure you can leap beyond the baseline of expected behavior.

Metro-style could winout

Prescribed user interface design in turn will slowly become more and more weaponised in a way to again have a single designer rule many device(s). If you can invest in a smaller group of design professionals who have custodianship of a brand and the personality that comes with it, you in turn can reduce your costs on having less investment on design and more on engineering.

A company may prefer the model of having a centralised design team that works with 3-4 device teams as a way of offsetting cost’s associated with multi-targeting.

Metro-style design in turn plays a comfortable role as Android and Windows Phone 7 pretty much lend themselves well to this vision of the way design should be. iPhone/iPad however goes in the opposite way that is to say the composition found within these devices are much more detailed and focused in around theming the experience as much as it’s about enabling an input driven experience.

The design(s) to date using metro oppose the idea of having real-world objects embedded into the 2D design composition (less turning knobs, wooden textures etc). The cost for design here is hugely decreased as a result meaning in reality a design team need only wireframe the composition of what they want a particular screen to look like, layer in color and ensure it adhere’s to some basic principles that relate to consistency, minimalism and lastly shape driven pictography / typography (pattern recognition 101).

Having a metro-style solution going forward can work on all device(s) and whilst it may go against the iPhone/iPad design grain, it can still sit within and more to the point it would reduce a brand’s chance of inconsitency and personaltiy (closer to the one design on all belief).

Designers did this to themselves

Companies like Microsoft, Adobe, Google and even Apple have reacted to a problem that was created by designer(s). The problem started the day when designer’s went against the developer grain, that is they forked off onto their own technology stack which was designed for them (Apple).

In forking their work flow away from mainstream development this in turn created a workflow issue and in turn fueled companies like Microsoft to invest in a lot of tactical decisions around how to solve this said problem (WPF, Silverlight etc).

The forking also gave way to a different approach whereby companies like Adobe began to also invest not just in a x-platform tooling but also for a while there in a x-platform delivery that works with the said tools that designer(s) had grown to love (Flex, Flash).

Once Apple had also moved to an Intel chipset this in turn gave away to what I would call the “Apple Developer” generation where over time more and more of a developer centric foundation was being build to which a series of tools could also now target the designer(s) (amongst other creative professionals).

Design for the better part still remained in its own cut-off from the rest area and the more and more developer communities that didn’t have a dependency on Windows began to emerge, the more they instead crossed the divide and began to work on Apple with their designer sister & brother(s).

The developer defection to Apple created a huge amount of issues and problem(s) from within Microsoft as now they are facing a massive problem around having developers target Windows but also ensuring there are the right amount of designer(s) ready to support such developers. The more applications being built on Windows the more they sell Windows is the simplified formula.

Google also now posed an issue whereby they have no real dog in the fight, that is to say Apple or Windows it didn’t matter provided you targeted HTML and helped fuel their Advertising & Search revenue streams of tomorrow.

I won’t go further into the various competitive back and forth that has gone on suffice to say at the heart of this entire issue around choice lies the designer. The illusive designer who often costs a lot and produces what will soon become the main differentiator in a companies offering – user experience.

Function is no longer important form is

As the industry reacts to the competitive changes that are ongoing, much like a teenage boy does around the time of puberty – design in will start to become the focal point of such change.

A designer will feel suddenly more wanted, targeted and will be taunted and attracted with some quite lucrative offers. Developers will also see this and start or have began to shift career gears and start looking into ways of becoming a designer. Some will fail whilst others will discover a suppressed design gene within lurking and waiting to be unleashed.

The designer will however become the leader of the pack, so used to being the one at the back or considered replaceable, they in turn will now become the most sort after as in turn what is replaceable is engineering (the market optimised for function instead of form for over 20years).

Here in lies the issue, the designer isn’t really equipped to decide the outcome of a generation of computing, they will always prefer to take the right amount of time to do the right job in a way that adhere’s to their internal principles around how the world should look.

Winter’s not coming, a Fork is

A designer today hasn’t gone down in price or time to market, the time it takes to produce a design still takes just as much time and effort as it did last year and the year before that. It however got a little more complicated as the canvas now comes in not just a 1024×768 screen (or there abouts) it now comes in a whole host of screen sizes and operating system level imposed limitations.

Once the corporations that fork their design teams figure this out, styles like the metro-style will begin to emerge as they in turn can bypass the designer if in some fairly competent hands. As in reality the importance of User Experience Principles has become weaponised with the more specialised teams making their work public for all to borrow/steal.

Don’t be suprised if a team in the near future had a designer but now doesn’t and solutions that look like Microsoft Metro were being produced.

Google and Microsoft have began and in parts Adobe’s tooling also adhere’s to this as well.

Having real world objects in 2D design isn’t a bad or limiting thing, it’s an ongoing design evolution around trialing & erroring deeper design beyond flat monochrome wireframes that have or haven’t been colored in.

Don’t knock it as the alternative isn’t as deep in its composition.

Related Posts:

Decoding the use of grey in Visual Studio vNext

Visual Studio team have put out some UI updates to the vNext release. The thing that struck a chord with this update is how flat and grey it’s become, that is they’ve taken pretty much all colors out of the tool and pushed it back to a grey based palette.

Here are my thoughts:

On the choice of grey.

Grey is a color that I have used often in my UI’s and I have no issue with going 100% monochrome grey provided you could layer in depth. The thing about grey is that if it has to flat and left in a minimalist state it often will not work for situations where there is what I call “feature density.”

If you approach it from a pure Metro minimalist approach, then it can still work but you need to calibrate your contrast(s) to accommodate the end users ability to hunt and gather for tasks. That is to say this is where Gestalt Laws of Perceptual Organization comes into play.

The main “law” that one would pay attention to the most is the “Law of Continuity” – The mind continues visual, auditory, and kinetic pattern.

This law in its basic form is the process in which the brain decodes a bunch of patterns in full view and begins to assign inference to what it perceives as being the flow of design. That is to say, if you designed a data grid of numeric values that are right aligned, no borders then the fact the text becomes right aligned is what the brain perceives as being a column.

That law itself hints that at face value we as humans rely quite heavily on pattern recognition, we are constantly streaming in data on what we see; making snap judgment calls on where the similarities occur and more importantly how information is grouped or placed.

When you go limited shades of grey and you remove the sense of depth, you’re basically sending a scrambled message to the brain around where the grouping stops and starts, what form of continuity is still in place (is the UI composition unbroken and has a consistent experience in the way it tracks for information?)

It’s not that grey is bad, but one thing I have learnt when dealing with shallow color palettes is that when you do go down the path of flat minimalist design you need to rely quite heavily on at times with a secondary offsetting or complimentary color. If you don’t then its effectively taking your UI, changing it to greyscale and declaring done.

It is not that simple, color can often feed into the other law with Gestalts bag of psychology 101, that is to say law of similarity can often be your ally when it comes to color selection. The involvement of color can often leading the user into being tricked into how data despite its density can be easily grouped based on the context that a pattern of similarity immediately sticks out. Subtle things like vertical borders separating menus would indicate that the grouping both left and right of this border are what indicates, “These things are similar.”

Using the color red in a financial tabular summary also indicates this case as they are immediately stand out elements that dictate “these things are similar” given red indicates a negative value – arguably this is a bit of digital skeuomorphs at work (given red pens were used pre-digital world by account ledgers to indicate bad).

Ok I will never use flat grey again.

No, I’m not saying that flat grey shades are bad, what I am saying is that the way in which the Visual Studio team have executed this design is to be openly honest, lazy. It’s pretty much a case of taking the existing UI, cherry picking the parts they liked about the Metro design principles and then declaring done.

Sure they took a survey and found responded were not affected by the choice of grey, but anyone who’s been in the UX business for more than 5mins will tell you that initial reactions are false positives.

I call this the 10-second wow effect, in that if you get a respondent to rate a UI within the first 10seconds of seeing it, they will majority of the time score quite high. If you then ask the same respondents 10days, 10months, or a year from the initial question, the scores would most likely decline dramatically from the initial scoring – habitual usage and prolonged use will determine success.

We do judge a book by its cover and we do have an attractive bias.

Using flat grey in this case simply is not executed as well as it could be, simply because they have not added depth to the composition.

I know, gradients equal non-metro right. Wrong, metro design principles call for a minimalist approach now while Microsoft has executed on those principles with a consistent flat experience (content first marketing) they however are not correct in saying that gradients are not authentically digital.

Gradients are in place because they help us determine depth and color saturation levels within a digital composition that is to say they trick you into a digital skeumorphism, which is a good thing. Even though the UI is technically 2D they do give off a false signal that things are in fact 3D? which if you’ve spent enough time using GPS UI’s you’ll soon realize that we adore our given inbuilt depth perception engine.

Flattening out the UI in the typical metro-style UI’s work because they are dealing with the reality that data’s density has been removed that is to say they take on more of a minimalist design that has a high amount of energy and focus on breaking data down into quite a large code diet.

Microsoft has yet to come out with UI that handles large amounts of data and there is a reason they are not forthcoming with this as they themselves are still working through that problem. They have probably broken the first rule of digital design – they are bending their design visions to the principles and less on the principles evolving and guiding the design.

Examples of Grey working.

Here are some examples of a predominately grey palette being effective, that is to say Adobe have done quite well in their latest round of product design especially in the way they have balanced a minimalist design whilst still adhering to visual depth perception based needs (gradients).



Everything inside this UI is grouped as you would arguably expect it to be, the spacing is in place, and there is not a sense of crowding or abuse of colors. Gradients are not hard, they are very subtle in their use of light, or dark even though they appear to have different shades of grey, they are in fact the same color throughout.

Grey can be a deceiving color given I think it has to do with its natural state, but looking at this brain game from National Geographic, ask yourself the question “Is there two shades of grey here?”


The answer is no, the dark & light tips give you the illusion of difference in grey but what actually is also tricking the eye is the use of colors and a consistent horizon line.


I disagree with the execution of this new look, I think they’ve taken a lazy approach to the design and to be fair, they aren’t really investing in improving the tool this release as they are highly most likely moving all investments into keeping up with Windows 8 release schedules. The design given to us is a quick cheap tactic to provoke the illusion of change given I am guessing the next release of Visual Studio will not have much of an exciting set of feature(s). The next release is likely to either be a massive service pack with a price tag (same tactic used with Windows7 vs. Windows Vista – under the hood things got tidied up, but really you were paying for a service pack + better UI) or a radical overhaul (I highly doubt).

Grey is a fine color to go full retard on (Tropic Thunder Quote) but only if you can balance the composition to adhere to a whole bunch of laws out there that aren’t just isolated to Gestalt psychology 101 but there is hours of reading in HCI circles around how humans unpick patterns.

Flattening out Icons to be a solid color isn’t also a great idea either, as we tend to rely on shape outlines to give us visual cues as to how what the meaning of objects are and by at times. Redesigning the shape or flattening out the shape if done poorly can only add friction or enforce a new round of learning / comprehension and some of the choices being made is probably unnecessary? (Icons are always this thing of guess-to-mation so I can’t fault this choice to harshly given in my years of doing this it’s very hit/miss – i.e. 3.5” inch disk represents save in UI, yet my kids today wouldn’t even have a clue what a floppy disk is? …it’s still there though!).

I’m not keen to just sit on my ivory throne and kick the crap out of the Visual Studio team for trying something new, I like this team and it actually pains me to decode their work. I instead am keen to see this conversation continue with them, I want them to keep experimenting and putting UI like this out there, as to me this tool can do a lot more than it does today. Discouraging them from trying and failing is in my view suffocating our potential but they also have to be open to new ideas and energy around this space as well (so I’d urge them to broker a better relationship with the community around design).

Going forward, I have started to type quite a long essay on how I would re-imagine Visual Studio 2011 (I am ignoring DevDev’s efforts to rebrand it VS11, you started the 20XX you are now going to finish it – marketing fail) and have sketched out some ideas.

I’ll post more on this later this week as I really want to craft this post more carefully than this one.

Related Posts:

Just an old observation about Apple.

Over the past week I’ve been quite busy writing a Product Strategy for a mining consultancy who today has a very specific niche offering here in Australia. The company is for me personally a fun place to be in, despite the weirdness of working for the mining industry (if you’re going to innovative UX, trust me, mining companies have the investment and vision to allow it).

The reason I like this gig and the work that we do is we are essentially focused on a market or idea around what the mining industry should look like from a geological standpoint over the next x-years. Loads of data that need user experience driven solutions to help unravel it.

I won’t go into details about what specifically the above means (as with this company, I actually have an NDA this time 🙂 ), suffice to say we are focused and in the course of writing this strategy combined with the constant RSS feeds over the last 72hrs about Steve Jobs that it hit me what makes Apple such a powerful force today.

They are focused.


Looking at Apple’s website, you see they are in a number of products but the more you look at each individual product and how they relate to one another it’s clear there is a coherent strategy in place. There is still a case of multiple threads flowing at once yet they are still interconnected at some point.

I look at the iPhone and then look at the Macbook’s on offer and one can sit back and easily assume that the iPhone is an extension of the Macbook that the idea is to get you into the iPhone ownership whilst then bait you into the desktop solution there after – it just works right?

Everything in Apple orbits the iPhone, its realistically today the center of all products that Apple produce’s gravity, it’s clear to me personally they are focused on a strategy – how well the retain custody of this vision or strategy with the passing of Steve Jobs is yet to be written, suffice to say they have one of the best foundations to build from.

I observe often just how focused has become as a website, every line of text, every picture right down to the consistency in design seems to say “we have an idea, wouldn’t it be cool…”

To put it in perspective on the influence, I watched a colleague of mine – better to not name him – design (which imho kills on all sites). I watched him sit down and do everything in his power to avoid opening and it’s not because he hates Apple or drinks the Microsoft kool aid, quite the opposite he’s at heart a pure designer – one of the best I know – he avoided opening it because he wanted to beat it because he appeared to want to put Microsoft’s best foot forward and not have a site like Apple overshadow it.

He had a lot of fools in his way, but he navigated the mess with class and kept a strategic focus on a simple principle – user experience first around the products he managed.

My point is this, Apple and Microsoft are opposite from one another, we all get that but if one thing about writing my 8th Product Strategy and living by the a sense of “focus on the user experience and work your way back” has taught me, that at times you just need the Bill Gates, Steve Jobs etc of this corporate focused discipline we call the software industry to just do what they do best and stop crowding them with bullshit and have a point or focus.

Microsoft, Adobe and even Google just seem to have this scatter shot approached to product strategy & marketing.

Personally, it’s quite frustrating to just watch given their huge amount of potential they have? We should have 10 Steve Jobs personas in our industry with the same level of UX focus for a brand? That’s what people are probably the most down about in his passing – who’s going to lead us now?

Related Posts:

Decoding Windows 8 UX Principles– Let Context breathe instead of the UI!

Last night I was sitting in a child psychologist office watching my son undergo a whole heap of cognitive testing (given he has a rare condition called Trisomy 8 Mosaicism) and in that moment I had what others would call a “flash” or “epiphany” (i.e. theory is we get ideas based on a network of ideas that pre-existed).

The flash came about from watching my son do a few Perceptional Reasoning Index tests. The idea in these tests is to have a group of imagery (grid form) and they have to basically assign semantic similarities between the images (ball, bat, fridge, dog, plane would translate to ball and bat being the semantic similarities).

This for me was one of those ahah! Moments. You see, for me when I first saw the Windows 8 opening screen of boxes / tiles being shown with a mixed message around letting the User Interface “breathe” combined with ensuring a uniform grid / golden ratio style rant … I just didn’t like it.

There was something about this approach that for me I just instantly took a dislike. Was it because I was jaded? Was it because I wanted more? ..there was something I didn’t get about it.


Over the past few days I’ve thought more about what I don’t like about it and the most obvious reaction I had was around the fact that we’re going to rely on imagery to process which apps to load and not load. Think about that, you are now going to have images some static whilst others animated to help you guage which one of these elements you need to touch/mouse click in order to load?

re-imagining or re-engineering the problem?

This isn’t re-imagining the problem, its simply taken a broken concept form Apple and made it bigger so instead of Icons we now have bigger imagery to process.

Just like my son, your now being attacked at Perceptional Reasoning level on which of these “items are the same or similar” and given we also have full control over how these boxes are to be clustered, we in turn will put our own internal taxonomy into play here as well…. Arrghh…

Now I’m starting to formulate an opinion that the grid box layout approach is not only not solving the problem but its actually probably a usability issue lurking (more testing needs to be had and proven here I think).

Ok, I’ve arrived at a conscious opinion on why I don’t like the front screen, now what? The more I thought about it the more I kept coming back to the question – “Why do we have apps and why do we cluster them on screens like this”

The answer isn’t just a Perspective Memory rationale, the answer really lies in the context in which we as humans lean on software for our daily activities. Context is the thread we need to explore on this screen, not “Look I can move apps around and dock them” that’s part of the equation but in reality all you are doing is mucking around with grouping information or data once you’ve isolated the context to an area of comfort – that or you’re still hunting / exploring for the said data and aren’t quite ready to release (in short, you’re accessing information in working memory and processing the results real-time).

As the idea is beginning to brew, I think about to sources of inspiration – the user interfaces I have loved and continue to love that get my design mojo happening. User interfaces such as the one that I think captures the concept of Metro better than what Microsoft has produced today – the Microsoft Health / Productivity Video(s).


Back to the Fantasy UI for Inspiration

If you analyze the attractive elements within these videos what do you notice the most? For me it’s a number of things.


I notice the fact that the UI is simple and in a sense “metro –paint-by-numbers” which despite their basic composition is actually quite well done.


I notice the User Interface is never just one composition that the UI appears to react to the context of usage for the person and not the other way around. Each User Interface has a role or approach that carries out a very simplistic approach to a problem but done so in a way that feels a lot more organic.

In short, I notice context over and over.

I then think back to a User Interface design I saw years ago at Adobe MAX. It’s one of my favorites, in this UI Adobe were showing off what they think could be the future of entertainment UI, in that they simply have a search box on screen up top. The default user interface is somewhat blank providing a passive “forcing function” on the end user to provide some clues as to what they want.

The user types the word “spid” as their intent is Spiderman. The User Interface reacts to this word and its entire screen changes to the theme of Spiderman whilst spitting out movies, books, games etc – basically you are overwhelmed with context.

Crazy huh?

I look at Zune, I type the word “the Fray” and hit search, again, contextual relevance plays a role and the user interface is now reacting to my clues.


I look back now at the Microsoft Health videos and then back to the Windows 8 Screens. The videos are one in the same with Windows 8 in a lot of ways but the huge difference is one doesn’t have context it has apps.

The reality is, most of the Apps you have has semantic data behind (except games?) so in short why are we fishing around for “apps” or “hubs” when we should all be reimagineering the concept of how an operating system of tomorrow like Windows 8 accommodates a personal level of both taxonomy and contextual driven usage that also respects each of our own cognitive processing capabilities?

Now I know why I dislike Windows 8 User Interface, as the more I explore this thread the more I look past the design elements and “WoW” effects and the more I start coming to the realization that in short, this isn’t a work of innovation, it simply a case of taking existing broken models on the market today and declaring victory on them because it’s now either bigger or easier to approach from a NUI perspective.

There isn’t much reimagination going on here, it’s more reengineering instead. There is a lot of potential here for smarter, more innovative and relevant improvements on the way in which we interact with software of tomorrow.

I gave a talk similar to this at local Seattle Design User Group once. Here’s the slides but I still think it holds water today especially in a Windows 8 futures discussion.

Related Posts:

UXCAST: DataGrid or should it be Data Visualization.


I am working on a secret squirrel application. Can’t say much suffice to say I had a situation where a bunch of clients connect to a network – like most apps I guess.

In this situation, I needed to inject a listening app to the overall network in that it needed to keep a pulse check on how the clients within the network are doing. This listening application needed to show the information in a meaningful way but at the same time; I do not want to have to inspect every single one of them each time they connect/disconnect.

I needed to visually show the connection states but I wanted it to be more reactive to me vs. me reactive to it.

Armed with problems like this, I now draw your attention to my biggest pet hate – DataGrids. A developer and you know who you are – would often take a situation like this and go "Ok, got it, what we need is a datagrid and the columns show machine name, state and blah blah metadata – easy peasy!!"

If you are that developer, I want you to do me a favor, remove yourself from the screen design team as you are hereby in a time-out.

Again, the problem is that I want to have a sense of all things are ok but I want to be alerted when things are not. I want to put this UI onto a large screen and just let it sit there keeping an eye on things and the moment something’s amiss – tell me!

Here is what I came up with. It is a hexagonal grid, each tile represents a new client connection and what it does is when a client activates it pulsates (the tile also gets added randomly in the grid). Yes, it pulsates but slowly, so it gives the impression that the "grid" (i.e. network grid) is breathing just like an organic machine.

When something bad happens, the tile flips to a red alert state and if there is a massive network outage the entire screen flickers with red pulsating tiles all yelling "help me, help me".

If more than 10x tiles fail an overall, alert text flows over the top giving you the old "Warning will Robinson, warning" alert.

The point here is simple. I could of easily just taking a data grid and view model, bound the two together and walked away. I actively choose not to do that as it’s a case of thinking about the problem creatively and trying an approach that makes sense but at the same time underpins an important principle – We work with software. We shouldn’t just use software"

That’s why I hate datagrids.

Related Posts:

The 6 things that annoy me when you design my software.

1. Stop making bottleneck software


Technically you could write most software today as one big mega-class with loads of switch / if&else statements. If you did that, not only would every other developer you come across immediately punch you in the nose but it would also become hard to maintain over time.

We agree that would be stupid right. I mean one large file for all code! – yet why do I always see software designed in such a way that it becomes the Swiss army knife of all tasks associated to the user, in that it becomes feature-heavy based around feeble arguments of "but the user wanted.."

The user is 80% of the time a jackass.

You are armed with a plethora of programming models today, stop crowding (thereby creating UX bottlenecks) the user interface for every single role known to man. Figure out the "persona’s" attached to your software and if need be, make smaller contextually relevant versions of the software per person (whether it be modular or separate specific installations).

2. Third Party Controls do not negate the need for a designer.


When I first left Microsoft and joined the working class (mwahah), I was often thrown into the deepened of projects that needed some UX makeovers. Given I have both a programming and design background it seemed a natural fit so sure, go with the flow I say. I’d walk into a typical gig and sure enough I’d see 3rd party controls lurking about (ie Telerik, Component One etc).

Nothing against these brands but if you are dealing with WPF or Silverlight then let me give you a heads up on why this is a bad idea. Firstly, the 3rd party controls are just a quick dirty fix to get around bad UI design, I get it, budgets are non-existent so you do the best you can. Secondly, these controls are made for multiple developers around the world, so there are many keys to turn on and off for them to snap together – which means your controls are not on a diet. Thirdly, you need to walk a mile in the shoes of say a C++ programmer or some language that used to have to play a game of memory Tetris to really grasp the concept of the second point.

Diet is the keyword. If you are dealing in Silverlight space the leaner and smaller footprint your code has, the snappier things are going to get. I am not talking about pure CPU no-holds bar processing time; I am talking about rendering pipeline time. I am yet to see an example of 3rd party controls improving performance and not subtracting them.

Stop outsourcing design for third party controls and I am looking at you graph boy/girl.

3. Every screen has a soul.


In UI Principles space there’s this little concept call false affordance. It means something that looks like it was supposed to do xyz but does nothing (i.e. Push the button and all negative energy will disappear scams).

If you have some software that has a hierarchy of navigational elements, you click on the first node, and it does nothing but expand to the second node but at the same time shows a view with some "weak" summary (i.e. description etc.). Stop, you are doing it wrong.

Every click has a purpose of existence. If you have a dashboard, what is its purpose? Think about its relevance in the grand scheme of things. Should it be fresh content daily/weekly/monthly? Is a holding pattern screen necessary?  The screen, which is like the UX principles are buffering between two major waypoints – you know the one screen in the app that really has no purpose other than to get you from A to C but somehow you felt the need to keep B in place.

If you have a screen that is filled with say two Input controls and that is it. That is a freakin dialog box, it is not a screen. Stop being lazy and think about the problem not how easy it is for you to just whack up an app. It’s not about you, it is about them *points to the end user*.

4. You are not a magician so quit giving me the constant "surprise" moments.


Ever used an application that when you click on something random inside a screen suddenly a piece of User Interface randomly appears somewhere in the screen? Maybe hidden inside a secondary tree node somewhere?

This is not a magic show and you are not a magician. Progressive Disclosure is great when done in a way that leads the user on a journey, no more "I’ve just modified the screen, if you guess what I just did you get a fluffy kitten" moments.

5. Humans are smarter than you think


I have covered this quite a lot but let me re-iterate in the theme of this post. Over 90% of the world’s computer population right now has some piece of overly complicated unnecessary piece of crap software installed on their hard drive that they have somehow managed to figure out partially its inner workings.

The benchmark for success right now in this space is so low you could trip over it and still succeed.  My point is the end users are actually smarter than you give them credit for. If you are in a team and someone says, "Yeah our users aren’t smart enough to.." challenge that jackass upfront. As did he conduct a survey where One in Five housewives came back being dumber than he anticipated?

If an average worker-bee can sit through SAP ERP or any piece of software that Oracle/Microsoft throws at them, they can sit through your software as well.

The trick is to make it enjoyable for them, to be the software that does not feel like the others – the stand out. Rather than holding them hostage to complexity because of your own arrogance, try to think less about the complexity levels and more the enjoyment levels. Software should be enjoyable as we work WITH software – we do not USE it.

6. I did not buy a cat so it could be my master.


My kids wanted a kitten and so me being the "fun" dad I bought one. Today that cat rules the house most of the time because we react to it, not the other way around.

In software, this often is similar to what happens. We buy software thinking it will save us time and money as it will improve the master/slave relationship to our daily lives. Instead, we become more enslaved in its processes.

An example. Today I went to my bank ANZ (which I am ditching – F*K you ANZ). I said, "I’d like a copy of my home mortgage statement to give to your competitor so I can leave your dumbasses – i.e. YOU ARE FIRED"

I watched the teller pound away at a keyboard for like 5mins before she arrived at a point of some kind that then needed her co-worker to give her instructions on generating a printable report.

I am sitting there thinking the following things:

  • Why are you typing so much?
  • Why can’t I do this online myself? You give me access to every other account functionality yet why not this?
  • Why am I giving you everything but a DNA sample to authenticate I am who I say I am still to this day?

My point here is that aside from a crappy online service from ANZ Bank, the teller herself should have a simple input control that has a button next to it. Inside that input control, she types, "Print <AccountNumberXYZ> Mortgage Statement as of Today"

The input box then does the following:

  • Looks up my account number and verifies it still is active.
  • Takes the verb Print to mean "fetch" and the words Mortgage Statement as being what should be fetched whilst the word "Today" meaning as in Now(). Then spit out a piece of paper with that information. In otherwords “PrintMortgageStatementWorkflow(custId, date);”

I think I make my point(s) in saying why are we jumping through hurdles to make software do the work when it feels like we are a separate background thread in the software’s world.

Related Posts:

THELAB: User Story Management – think beyond cards.

As a Hybrid I want the ability to create user stories into clusters so that I can isolate ideas into more finite pieces.

The Problem.

Seeing that most are probably likely to ask what the heck I mean?  A User Story by SCRUM standards is just a small two-sentence tid bit that gives one clues as to what one should develop in software vNext? The problem with this line of thinking is that it goes against the nature of human phycology in that to isolate streams of thought into abstract finite forms does not work.

Want proof?

Ever sat in a Story planning session and as the stories begin to flow you immediately start to cluster these in your mind into groups? You visualize them into clusters when you see them that are because we as humans are massive fans of chunking information so that we can process them in more digestive formats. Is this a problem? No, it is just a natural primitive instinct to encourage you, as an entity that has grown opposable thumbs into ensuring the thing in front of you is both learnable and adaptable to suit what happens next.

Today, if you were to look around on the inter-web you would see a bunch of SCRUM friendly software and most of them try their best – and fail – to re-create the experience of User Story capturing.  The approach they often take is to create a rounded rectangle and display them onto the user’s screen as:

"this is a card and therefore it’s like the one you have in your cubicle in paper form. Please use this the same way in which you would that..”
Signed Software Designer.

Recently I learnt a very important snack of UX goldenness and that is we do not use software, we work with it. Software should reflect who I am and what is contextual relevant or albeit synchronized to suite my needs vs. having to ask me to adapt to its needs. Handing someone a virtual card on screen does not offer anything of value, all it does is remind me the constraints put forward – I need to cram an idea in under two sentences in abstract form so that I can break it down further into sub-forms in order to generate software feature(s).

The Flash of Genius.

I sat down today to tackle what I call the "Opening Act" in my UX magic show for an upcoming application I am making in WPF debut titled: IWANT – Weaponizing Agile.  As I sat staring the blank canvas, I began to panic a little, as I did not want to just re-create a grid of cards and declare victor to do that is to admit I have not thought about who the end user is.  Instead, I went for a walk and asked myself a simple question – Why does it have to be card and what else could it be? The more I thought about the form of media given to every SCRUM disciple out there the more I started to question its sanity – more to the point, who the freaking hell said a card was the best solution to this problem? A group of people who conjured up this religion we actively calls SCRUM today?

The SCRUM founding fathers if you will have some brilliance, but I’m not sure user experience or human phycology was at the forefront of their minds when producing this thing we call User Story management via card sorting.  I would however put forward the theory that they were thinking of ways to force we humans into the existence of tearing down our natural instincts to cluster / chunk information in forms that are more isolated / streamlined.

Armed with this moment of brilliance, I sat down and began grinding pixels. I began to think about the problem in the fashion of idea clouds, just like as if we were about to read these stories in comic book form.  Yes, comic book form – as name any child today that doesn’t find reading more enjoyable in such format and I put it to you that we adults need to recapture our lost youth as much as we can.

The Objectives.

Like all good experimenters, I need to assign some objectives to this newfound awareness. They are along these lines:

  • I want the ability to visualize clusters of user stories in ways that respect my primitive instincts but at the same time respect the existence of SCRUM.
  • I want the ability engage the experience with a sense of depth that is not flat, lifeless and typical response to visual grid ways.
  • I want the ability to get in and get out when I need to resurrect a User Story of a specific type.
  • I want the ability to just create in a fast responsive manner and I want the said creation to have dependency links throughout that are of contextual relevance.

The solution.

Armed with this tall order, I bring you thine creation.


The Terminology

Story Clusters. A Story cluster is a group of user stories that fall under a theme / category. The idea is to allow teams to partition their ideas into taxonomy of their choosing but more so to ensure they can feed the idea threads around a particular concept – Security? Customer Management? File Storage etc as but examples of "theming".

User Story vs System Story. They are one in the same the difference however is to give developers or engineering minded people a free pass in terms of allocating some ideas to either a person(a) or a technical agent of their choosing. An example of this is

"As a User I want the ability to save my blog posts so that I can share it with others!" – User Story.
"As a UI Client I want the ability to CRUD a blog post so that I can allow users to manage blog posts" – System Story.

Some SCRUM masters may have a mental seizure at the sight of this – deal with it you jackasses.  The reality is when someone sits down to write a User Story majority of the time the  person is trying to force themselves out of a cycle of developer eyes and into something, they are not. The purpose in my opinion of this exercise is to tease out the idea; we can break it down further later but get the idea captured!

The UI Teardown.


View Finder. It’s here you will find the User Story cluster(s). The clusters are grouped into a cloud like existence and the more stories found within the cluster the larger it becomes. I choose to enlarge these to enforce dominance for one and secondly to attack the end user in a subliminal manner by encouraging those to break it down into a separate cluster if it is getting to large. This is exactly like a container of any kind, if you keep cramming it with stuff it gets bigger and eventually you start to think about the problem again but now are already looking at ways to fork its contents.

Notice also, how the clusters are blurred and have a sense of depth.  This is to ensure the end user does not take what is in front of them for granted, I want them to focus and I want them to explore the data. I do not want "at a glance" viewing; I want interaction and comprehension around what is in front of them. Explore, interact and adapt.


Search Box.  Given the end user for this product is someone who’s stuck in the mental model of "As a blah I want.." style thinking, it’s important for me to not interrupt that conscious thought.  If they are looking to find a specific task, user story or note of any kind then it’s here I expect them to take a leap of faith and search.  Important thing to note here is I am not relying on this massive data grid or tree control to allow my users access to the data.  Why not? It is important to not give them a crutch to lean on; I want them to think about what they are asking and how they ask it. Providing a DataGrid or Tree Control is encouraging them to embrace perspective memory way to much (i.e. they will next want the ability to pin that area of navigation, taking up valuable real estate simply because at the heart of it they don’t want to have to collapse / scroll to that sweet spot again). Instead get them into UX Rehab, ask them to treat the software as if they were turning to a co-worker and asking "hey, where did you put that file.." – behold the power of search!


Create Only. Notice I do not give much in the way other than "Create" options at first.  I do this deliberately as I want the end user to build first tear down / fix next. Find the thing you want to do other stuff to but here, all I am interested in is giving you ways to add to the web of data.
Some of you may notice I used a Skull as the icon to represent the User Story.  The reason I choose that icon instead of a typical silhouette head of a human is simple – we are creating digital Shakespeare.  You are telling a story, so it is fitting – that and this is the spot where good ideas may go to die.


Stats.  I am a sucker for fun facts or a sense of proportion but more importantly, it is about keeping a score of what is going on. Too many times software hides data to the point where you either underestimate or overestimate the complexities of a given problem because of such things as software hiding key pieces of information.  I choose to keep a cycle of statistics around Story telling within iWANT so that as users are working on the feature catalogs of tomorrow they are also getting some fun facts so that they may turn to one another with stuff like

"oh shi.. We have like 300 stories added this, we are never going to get this done in time.." (Invoking maybe a rethink in customer expectations?) etc.

The Conclusion.

My concept is unproven and untested. It may very well fail or it could succeed but right now any feedback or questions around this approach is simply "I think" and not "I know".  What I am confident about is that it will spark a different round of thinking in terms of how one approaches user story telling. My objectives are clear enough to outline the overall intent that is to provide a safe haven for undisciplined and disciplined thinking around what goes into software of tomorrow.  SCRUM is a little too religious in tis procedures and I find at times it goes against the grain of human psychology thus forcing a practice into place that at times is unnatural.

iWANT is a solution I am to challenge this thinking but at the same time allow development teams of all sizes the ability to get the administrative overheads out of the way fast, cleanly and smoothly so that they can focus on writing code, grinding pixels and marketing their product(s).

Related Posts:

UXCAST–Making Isometric Workflows inside Expression Blend–Part 1


I did it! and I feel exposed. I sat down tonight and put together my first of what may or may not be many (depending on how badly I get crit) screencasts around UI / UX + Microsoft Technology.

In this video, I show folks how one can take a workflow design concept and inject it into your canvas of choice but in an Isometric format. I like Isometrics simply because you can get more of a spatial view than most screen angles that and it derives from my old Pixel-art days so..yeah..Isometrics are the way!

Hope you enjoy, and feedback welcomed.



RIGANEIC – UXCAST – Isometrics in Expression Blend from Scott Barnes on Vimeo.

In this screencast I show how one can take a Isometric workflow map and transpose it into Expression Blend 4.

Related Posts:

5 Things you ought to know when designing metro screens.

Having recently, gone full METRO lately, I have in turn created what I’d call my 5 things you ought to know going full metro list.  Here are five (5) things you probably might want to know if you head down this path like me?

1. Color choice is critical.

The thing that stands out about most "metro" inspired designs is they pretty much settle on around 2-3 primary colors of choice. They also then rely heavily on either black or white (maybe a shade of gray) for their canvas as well.

It’s probably good thing to start by choosing your canvas to paint on upfront. White is great, it gives you more room to play around with and does not come across as obvious in terms of empty space. Black is also great, but keep in mind your empty space may become more obvious if you do not plan your designs as carefully.

Once you have outlined your canvas now comes the choice of a base color, any other accent you choose feeds off this color. Selection of your base color needs to keep one thing in mind; it will haunt you throughout your design.

The base color defines the "chrome" boundaries will give the user the pattern they have made a choice on something. Having often used the base color as both the partial chrome and when it comes to a selection. The reason I do this is in my own warped mind, the selection is part of the chrome, it’s essentially a choice an active one at that so why does it need to be constantly visible in terms of difference? In that I’ve made my choice, I’ve noted the choice is visibly in place, let’s move on please and focus on the parts I haven’t made a choice on, am about to make a choice on and/or need to figure out whether a choice needs to be made?

After you have defined your base color, head on over to Adobe’s Kuler site (that or use the Kuler extension found within Photoshop CS4+).  Inject your base colors into the "create" area, and then decide how your color compliments by selecting an alternative/complimentary color. Kuler is pretty spot on in terms of helping you decide this, as if you choose a bright green; you have many colors to choose.


Example, one of the designs shown uses a bright blue, at first it seemed quite bright – but then after while of using it (own opinion), becomes a welcome relief from the green.

This alternative or secondary accent in your color, should become the color in which you decorate your buttons or inputs into.

Example, if you look under the hood of a new car, you will see areas colored yellow whereas the rest is the same color of the engine etc. Car manufacturers do this on purpose, they want you to touch yellow yourself but if it is not yellow and you are not mechanically minded – leave alone.

Having liked this principle and having fused it into designs constantly and personally used the secondary accent color to draw people’s attention to the fact "I’m ok if you touch this, you won’t break anything if you do" thinking. Personally, not entirely sure how popular it is amongst the UX/UI fraternity.  So far, no users have made obvious complaints from this approach.

I have not seen data that contradicts my theory here, but ultimately the data I do see is if the end users are given a breadcrumb trail in terms of pattern recognition, you have won them over – complexity and efficiency formula’s aside.

image One digresses; finally keep your color palette to around four (4) shades in total. It forces you to keep your selection pretty consistent and close to the base as possible.  Having liked this approach, as it prevents color conflicts occurring and again. It also maintains a pattern that is consistent – almost expected.

That is the interpretation of metro and colors so far – personal opinion based off current design style (which is slowly evolving – personal UI journey here).

2. Typography consistency is good, focus on that.




Designs shown are an example of how they do not keep typography settings consistent, as they will often fluctuate between 8pt to 30pt text depending on design purpose. These choices made only during the testing out layout composition from wireframes phase. The idea here is to see how it all stacks together inside Photoshop before you take the concept over into Expression Blend.

Once inside Expression Blend – much like HTML/CSS – I settle on a consistent and semantically named theme sizes.  An example would be H1FontSize would be around 30pt, H2FontSize would be around 24pt and so on. The key here is to keep the approach in which you attack your UI consistent in your font size settings – goes without saying.

FontSizes are not the only issue, UpperCase, Camel Case, Lowercase etc. are all equally important.  Do try to keep these consistent to their relative function, in that navigation kept lowercase but headings etc. all uppercase.

Zune team does this with the Zune Desktop, the actual navigation, and nav-headings and maybe category headings are all lowercase. The rest of the text fluctuates between all Uppercase and normal case

Not entirely convinced of a killer formula here as its one of those areas where more experimentation could be done around what can work vs. what cannot.  Typography experts will definitely have an opinion here. Have yet to see one that outlines this. (Ping me if you have any bookmarks in this area of expertise).

Color choice per heading is also something that seems to have a bit of a formula around when it comes to my designs. I’ll often use the base color on labels that I think are important enough to capture the users attention but then use opposite to the canvas colors in order to retain a normal state.

I typically think about this as a case of highs and lows in vocal tones. In that if describing a current screen to someone, one might say, "this is the USER MANAGEMENT screen within the security management area". This is personally, done naturally via voice emphasis the "User Management" vs. "Security Management". As who cares where it lives, it is not the end is it.


Welcome feedback on this approach, but the point is color selection helps carry that forward.

3. Text Chrome vs. Text Content balance it out.

This is one of those pet hates I have with the current implementation on Windows Phone 7 – in one way the team decided to abandon chrome artifacts in favor of text, the problem I personally have is switching gears between "Chrome" text and "Content" text.  I find myself at times pausing and thinking, "ok, can I touch that..nope..ok what’s touchable here..".

imageOvertime, personally, will develop some muscle memory in this space and will soon learn what the differences are but in given the current metro virginity I have, I just noticed this as a pattern which was not obvious (again, let users notice the scent for pattern recognition).
Would one put heading labels etc. as being the "Chrome" text category? Striking a balance here of too much text is important and again color choice can help you out here. I rely heavily on monochrome filled shapes and text in my current metro style, so for me it’s a demon I’m always trying to wrestle to the ground – keep my text minimal and restrain from too much on the screen, especially if there is allot of data to view.

4. Element minimizations are ok, but add some life please.

Over lunch today, a colleague and I were discussing the metro way of life really does not allow too much in the way of gradients or watermark elements – most of the designs I have seen in this space are clean / white.
Is purity in no element additions bad or good?


I for one cannot honestly answer that as I am the type of guy who often just does not know to back off on the decals, I love a busy UI and it has nothing to do with the user experience it is more of an artistic habit.

Agreed, less is more, but sprinkle in some energy into the user interface. Think about what the end user is supposed to feel or relate to the said User Interface. One screen rather has a lot of fun with the idea that a boring concept like task tracking can take on more of a Bourne Identity / CIA feel.  I then throw in a world map, as hey, all Fantasy User Interface(s) within Movies always have the map of the world behind them when hacking a large mainframe or accessing global data of some kind (it works, I love it, back off).

Point is, don’t be a lemming and follow each other over the pure white cliff, sprinkle in some decals to take the edge of the seriousness of the UI and allow the end user to feel a small connection with the work you’ve put in front of them.

5. Fantasy User Interfaces in movies are your best friend.

Having found it difficult to get inspiration sources for metro and instead turning to local train stations etc., but they also have a much-prescribed look and feel throughout Australia.  Often one use Google/Bing images and searches other transit signs etc. to get a pick out of what is out there in the wild – metro style.

The main source however for inspiration, is to watch movies that have kickass user interfaces in them and then pick them apart frame by frame. I analyze them and try to force myself to think outside the box more and how these concepts could relate to real-life user interfaces.

I like what Fantasy UI brings to the table, it creates this nice illusion within a TV Show or Movie that convinces you in under 30seconds that the actor is doing something high tech.  It is obviously not real software, but you forgive it and go "yeah, suppose, I could buy what you’re selling here" for that brief moment.

I think it’s important to call that out, as it’s at the core of probably our reaction to software and it gives off this pure signal of "that works" moment.

Metro can lend itself to simplistic Fantasy UI’s, as often the user interfaces are very basic in their structure. Take the work of Mark Coleran (current geek UI hero); looking at his work, he has kept the UI basic in terms of color choice, composition and decals.  The actual magic comes to live when there is animations etc. on it, but in the end, it is relatively simple in composition. – It works!

This is the only reason I am remotely convinced metro as a style so far (the one I am working towards anyway) might have some legs. It is not entirely rainbows and kisses, but at the same time, it is.

Also, look at HTML/CSS sites within galleries for inspiration as well. As these sites typically rely quite heavily on CSS for their design governance – so in a way the metro concept really hails from this if you ask me…

Related Posts: