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

1. Stop making bottleneck software

image

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.

image

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.

image

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.

image

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

image

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.

image

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:

Why Microsoft is failing at WP7.

It is easy to sit on the sidelines, point and laugh at how the overall Windows Phone 7 tire fire is burning daily. It is also greatly disappointing to see as whilst I had predicted from the start that Windows Phone 7 will fail with consumers but could win with business/enterprise it’s also bitter sweet victory in many ways to be right.

How did the product arrive at this state? Where a pittance of allegedly 1.6million units have been sold out of the 2million units known to be “in-market”. My thinking is as follows:

No Aesthetic Differentiation.

 

Stating that is bold and a bit of an eyebrow raiser, as clearly the Metro UI is different to the rest right? Not really, as you are probably looking at this through the lens of a TechEd T-Shirt wearing c# ninja aka Microsoft “aware” perspective. The reality is if you go into a mobile store of any kind around the world, you just have to stare at the buffet of phones on display and cannot really help but notice one thing. They all seem to look kind of like the iPhone in terms of shape – keep in mind we humans are pattern people, we seek patterns first and then adjust to what the pattern is second.

If all the phones have similar shapes then what does that say? Does it feel like an iPhone knockoff? It has the similar price tag. So why pay for a copy of a popular device when you can have the real thing?

Assuming you get past that train of thought let us look at it from a different perspective. You are in the store, you get excited over the initial 10seconds of “Wow, nice UI” moment(s). The more you use it, the more you start thinking “meh, what kind of apps does this thing have?” so now you have to grasp the concept of the Zune Marketplace – assuming you’re outside of the US and the brand Zune is “What the freaking hell is a Zune?” moment(s). How do you grasp Zune Marketplace while in a store? You click on Marketplace but nothing happens as most phones have no internet connection(s) in stores.

I have seen many a “marketplace” on the ye olde phones that were run by carriers so what makes this different to those as again who is Zune? What apps do you have and do you have Angry Birds? Skype? Foursquare? Facebook (yes its built in, but are others outside the Microsoft sphere of influence aware of this?) etc?

Too consistent & poor quality bands.

image

The differentiation is one thing but then comes the moment of too much consistency. All of the applications tend to blur into being the same old cookie cut style. There is not a real sense of change or theming in place other than games. Today’s twitter application looks like a thousand other twitter applications aside from some color changes. There is no real sense of depth and whilst the team has pushed for “authentically digital” which is a noble gesture in the art scene, it is but one lacking in the consumer space.

To put it another way, If I have a voice recording “memo” style application then please make it look like a recording application (i.e. iPhone uses this big Microsoft and it takes on this “theme” of being the app). There are some diamonds in the rough when it comes to the marketplace, not all are bad – most are though.

All it takes is any C# developer with some developer muscle and a lame brain idea around FlashLight, Twitter, Task list or Tip Calculator and pretty much soon you have a saturated idea brimming to the surface of applications made available to you for purchasing. The quality baseline for success in the market is measured around quantity not quality. iPhone is no different much like Android, the difference with those phones however is they aren’t the ones struggling to convince people that their old version isn’t the same as you see before you in the new version(s). They don’t have as big of a hill to climb back out of and arguing mediocrity in quality bands as an excuse as to why is plain stupid.

There is no switch up inside the phone, all apps tend to become the same look and feel repeatedly – so my point is this is not just a phone it’s a media device that should be filled with brainless eye candy as much as functional brilliance. Let the audience decide if Authentically Digital compositions are their cup of tea but forcing all to bow down to this mentality is simply locking you into a bubble of ignorance.

Dance with the girl you came with.

These are the end result of a local GOVT dept who bought HP iPAQ's instead of WP7 for development purposes? Sad?

Consumers are morons, and are easily tricked if you have a brilliant strategy. Urban legend of Colgate guy wanting to increase toothpaste sales that tried everything but in the end all he did was increase the diameter of the hole in which toothpaste pours out of by 3mm in the end sent sales through the roof (given we used more toothpaste unwittingly). It is a story I was told in my days of Marketing 101 training, but it stuck with me for obvious reason(s) – hopefully.

Microsoft is so preoccupied with “beating” the other guy (and we used to drink that compete rage elixir often) that its lost perspective on the places its getting success – Business/Enterprise. Go into a govt department, large mining company, finance sector the whole thing and ask them how they are coping with business related devices such as PDA’s and wanting field staff to do xyz. You would be surprised at the response you get – especially how iPhones, Androids and Windows Phone 7 are not even in the race. The reason being is simple – “How does one deploy a private app to my citizens?”

The reality is Microsoft’s spent the lion share of its marketing spend on US Consumers hoping that this like some kind of weird end of year Xbox style achievements metrics “Congratulations! You have Achieved Level 1 in sales!” moment(s).

Inside Australia for example the WP7 Marketing is a secret? As its rare you catch glimpses of its existence outside a mobile store and even then you have Windows Phone7 Logo right beside Windows Phone 6 devices.  Confused? I was.

The win here while it may not be loud (which sadly gets you career points in Microsoft) is that if Microsoft released an Enterprise follow-on with the WP7 devices focused on allowing draconian SOE overlords to brick the phones in such a way that forces its peon’s to adhere to the blah blah policy then you in turn would have a backdoor into consumer market.

The reason being is these are human beings the phones are being handed to during work hours. The more they use them, the more the grow accustom and forgiving towards the device you are giving your crack away via corporate mandates. Establishing a habitual usage amongst the business/enterprise community in turn creates natural evangelism, which in turn can either make or break you (if its crap phones it will be very loud as to why).

If you are in a meeting and you see many WP7 phones in the room, you cannot but help notice them – that is what they call “product placement” in marketing terms and you get it free amongst the business community.
Nobody is doing this right now, and I’ve witnessed thousands upon thousands of units of HP IPAQ like devices running Windows Mobile 6.5 as a result (right now I’m staring at a body of work I’ll need to work on soon in this space, simply because no Wp7 device is available for commercial usage).

Competitions are an act of marketing desperation.

image

I was once told inside Microsoft that if you get to a point where you are running a competition to excite developers around a product, you have failed. It is the last desperate refuge for a marketing to try to regain some lost momentum around marketing a product that really needed more than a “Win a new phone?” moment(s).

When I was doing my interviews for Product Manager on the Silverlight team, my bosses boss (Dave Mendlen) asked me how I would handle a competition etc for a product if had $50k to spend? I guess he wanted to see me break it down into its overall pieces etc. My response was simple

“I’d take the $50k,  put up a 1x Page website and simply give away a CAR in any country around the world for the best and fairest blah blah”.

My point was simple; competitions suck firstly so I would rather get this fool’s errand out of the way upfront. Secondly, if you are going to have competitions then go big or go home. Don’t pussyfoot around with $1k or below offerings, you want competition right? You want people to take notice and work hard to fight to the finish then put a carrot that is big enough that it feels both reachable and enriching at once.

I see way to many competitions for developers to write xyz Windows Phone App around lately and it’s just sad to watch. Microsoft needs to raise its game and seed the product in much smarter ways then weak competition tactics. Evangelism needs to be smarter and the marketing spend / product placement campaigns need to be better than it is today. Seeing a Windows Phone 7 on a TV show is a good start but it lacks follow-up(s).

If I go to a geek conference of any kind I want to see Wp7 branding everywhere but I also want to see someone doing something interesting with the phone(s). I want sizzle and holding creations as if the one Brandon Foy hostage to “If you get 200k+ views I’ll let you do a commercial for real” is like asking Don Draper to audition for entry-level copywriter. You had talent in front of you and you still missed it.

In Summary

The phone is failing and it is not really the actual phones fault it’s more direction, understanding of who needs the phone and lastly ensuring the quality bands associated with the phone raise. If you are going to go head to head with Apple who have shown repeatedly that Industrial Design / User Experience is what consumers are really attracted to. Bring it fully do not “version three we will get it right / marathon speech” it to death.

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.

image

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.

image

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.

image

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!

image

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.

image

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 month..man, 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:

Confirmation Bias explained in terms of Silverlight & HTML5.

Today I want to talk about HTML5 & Silverlight specifically around the existence of what I would class as "Confirmation Bias". First, lets look at the Wikipedia definition of this term.

Confirmation bias (also called confirmatory bias or my side bias) is a tendency for people to favor information that confirms their preconceptions or hypotheses regardless of whether the information is true.[Note 1][1] As a result, people gather evidence and recall information from memory selectively, and interpret it in a biased way. The biases appear in particular for emotionally significant issues and for established beliefs. For example, in reading about gun control, people usually prefer sources that affirm their existing attitudes. They also tend to interpret ambiguous evidence as supporting their existing position. Biased search, interpretation and/or recall have been invoked to explain attitude polarization (when a disagreement becomes more extreme even though the different parties are exposed to the same evidence), belief perseverance (when beliefs persist after the evidence for them is shown to be false), the irrational primacy effect (a stronger weighting for data encountered early in an arbitrary series) and illusory correlation (in which people falsely perceive an association between two events or situations).

The Setup.

image

One does not have to travel far in the digital news space before one see is a case of this tendency being played out. The way it plays out is companies like Microsoft, Adobe, Google and Apple are all touting the HTML5 existence as being the right path forward.  Immediately after this path has been presented a flurry of activity within the comment streams begin to occur with rants like "HTML is compatible, boo hiss at plugins" etc.  These rants are at the end of the day somewhat truthful as arguments put forward that HTML is probably the most purist form of technology on earth is somewhat in a sense correct – well to be specific, its really the only technology that has had absolute universal agreement on adoption.

At present, these rants typically do not zero in on what the heart of the HTML5 bias parasite is really attaching to. It is that the perception if more people adopt a given technology you in turn gain a wider pool of acceptance and stronger monetization models flow onwards. That is to say that if HTML5 were to be 100% compatible on all browsers / desktops tomorrow therefore we all stand a greater chance of success over the current routes which are a mix of device technology bets through to a skirmish in and around desktop development strategies.
The Reality.

The truth of the matter is that HTML5 is a placebo that the industry is being suckered into embracing – hear me out before you froth at the mouth of disbelief. A placebo such as this is given to us all because we are living under the assumption that friction for adoption of a technology is too hard and secondly that with HTML5 the browsers will all agree on a universal standard thus we are back to a baseline of user experience one can all bask & share in. Let me clarify these two points in more detail and how ill-conceived they are.

The Adoption.

image

Adoption firstly is a developer discussion not a consumer discussion as take Silverlight for example. Silverlight was a new technology, we had zero adoption at the start and it was just a name of a concept when it was first announced to the world. We knew straight away we had a long marathon ahead of us and we would often say things like "it’s not a sprint, it’s a marathon" as we weathered, the adoption storm(s) (mainly Flash vs. Silverlight). Immediately we knew that the core focus of our strategies around seeding this technology was developers, developers, developers – we had to convince every developer around the world that Silverlight was everywhere, no friction attached! In short, we needed to stimulate the illusion of what makes confirmation bias so powerful.

Many would now argue that consumers are not interested in installing plugins, it is not just developers it’s the "soccer mums" at home who are not technology savvy. Roughly over 100million installs of Silverlight occurred during the Beijing Olympics in 2008 and consumers of the site(s) would spend around on average 20mins+ viewing time (broke records as all other sites at the time had around 3-5mins) so before we use the "soccer mum" argument, understand, technology today isn’t as scary as the 1990’s once was. That is to say people online will install a virus if you convince them that the content they are about to get post install is worth a click of a mouse button as again, developers, developers, developers oh and marketers.  We proved developers are the ones that need convincing, not what they use as an excuse for hesitation in around adoption – confirmation bias.

The Browsers.

image

Browsers secondly are and will continue to race to the HTML5 parity finish line. At MIX 2011 you saw Dean & Steve give the "oh isn’t that interesting" competitive shallow comparison between Google Chrome and Internet Explorer 9, specifically on how Internet Explorer 9 is "better" now (developers, developers, developers).  The race has only just begun and you are already seeing the competitive knife fights begin, like two old enemies taking short, fast but deep cuts at one another (Google may respond or may not). Parity is the false promise now and it has got everyone transfixed on the innocence of it all – technology placebo!

Taking a step back from the discussion, one should consider the next steps post parity, that is to say if tomorrow all browsers were absolutely in line with one another around HTML5 then well, what’s the differentiator left? Speed? Performance? Extensions…  The browsers have to grow in terms of market share and Internet Explorer team aren’t ones to sit idle and do their jobs for the greater good of the people! The Google Chrome teams are made up of a lot of ex-Internet Explorer team so that inherited competitive DNA will definitely come out as well. The fork will occur, and I predict Windows 8 will be such fork.

The browsers will eventually make extras adaptable to the developer’s needs, things like Google Gears or Internet Explorer’s "Slices" are all essentially plugins that dip ones toes in the water to guage reaction from the developers, developers, developers.  Imagine if Internet Explorer 10 was on 80% of the world’s Windows based machines and you had HTML parity but still stuck in the ye olde JavaScript/CSS wasteland(s). The Internet Explorer team come out with a strategy in around allowing you to write Desktop & Device experiences that are universal but the tax is you got to use a special additive set of API’s to get it working (wrapped in some IF/ELSE statements for detection of Windows 8 devices/desktops). Do you pay that tax? And aren’t we not back to where we are today? A fork in experiences.

HTML5 vs Silverlight isn’t about which of the two is better, its which one can easily sell to developers, developers, developers. If this confirmation bias continues, what you will see is Silverlight shifted from being a plugin and more as being a additive solution to the HTML5 experience promise but with less emphasis on its existence and more on Internet Explorer 9 & Windows 8.

The Burden of Proof.

image

Want proof? Silverlight has always given up its annual numbers of installation every year it’s been at MIX – I was told today by an internal source that numbers have dropped!. It’s something inside the Silverlight team we used to agonize over as to how we can hide the stalled uptake but inflate it just a little to convince people that it’s winning! – This year, no numbers were announced.  We did see many Windows Phone 7 and Internet Explorer discussions though but hey, it is a web conference right? (Is that why no Windows Presentation Foundation discussions occurred this year? As opposed to years before?)

My point is simple.  As a developer you’re in the seat of power & influence, understand your role in this equation as once all become a little more collectively alert as to what’s going on the you in turn can shape what happens next. Corporations like Microsoft, Adobe, Google and Apple are more preoccupied with both Advertising Penetration stats. They would do whatever it takes, to get those numbers high, so play them do not let them play you.

News Articles worth reading:

Related Posts:

  • No Related Posts

UXCAST–Making Isometric Workflows inside Expression Blend–Part 1

Heroimage

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.

image
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.

iWantUsrMgmt

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.

image

 

image

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.

image

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?

image

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 csselite.com 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:

WPF lip service at it again

image

I’ve been watching the WPF Disciples list regarding FIXWPF with some obvious keen interest. The thread has taken on an interesting level of discussion and guys like Pete Brown are doing the right thing, listening, responding and taking notes.

Jaime however has jumped on and given the – we’ve heard it all before – riot act around the UX Platform guidance. You know the one, Good, Great and Ultimate splits sprinkled with “it depends” and basically comes around to the pitch that Microsoft is probably best known for around commitment pledges.

This isn’t an attack on Jaime, I’ve worked with him before and I liked his work in the past, as all he’s doing is talking to party lines and it will be the same guidance you are given no matter who you talk to inside Microsoft.

That being said the bulk of it is lip service and i’ll explain why.

RE: HTML5 vs Silverlight vs WPF (Good, Great and Ultimate).

This guidance is probably the oldest response to keeping the three pillars apart. It hasn’t changed in over 3 years and is unlikely until you see some dramatic increase in footprint regarding Internet Explorer 9 + HTML5.

The idea is to provide developers a linked approach to how the three dovetail with one another and when you look at it from the right angle it almost looks plausible. The reality however is it is poor guidance for one and secondly it doesn’t address the question.

The question really being asked is “which should I bet on” not “which is the right technology for the right job” as quite frankly for 80% of solutions out there i’d confidently state that all three could achieve your needs for line of business applications. The three each have their own taxes  you will end up paying but welcome to software and that’s life.

Back to the question, which should you bet on and this is where the lip service falls short. As the question is also asking which is Microsoft likely to continue investing into – the fact that Jamie for example is no longer a full time WPF evangelist and is now in the Wp7 evangelism rhythms is an indication to that answer. No Microsoftie is going to come out and say “yeah, you better get off WPF unless your writing C++  bridges to .NET, as its going to get murky soon” as the last time a softie even hinted at that kind of raw honesty was Bob Muglia and he was a Senior Vice President – currently looking for a new job.

Choosing between the three really is coming down to your team mates, your needs and lastly your personal investment in learning / continuance in your career. They are really the three core principles involved in making the choice between the three and the usual good, great and ultimate speech has never really returned any hint on success – I dare Microsoft to provide evidence of success here.

If your team mates are all HTML developers with ASP.NET Web Forms skills, then the question they are all having is around which is the easiest and best route to success next. WPF can provide you a core foundation for Silverlight/WPF development but it will test your patience and confidence levels greatly. There is a lot of information decay online around which version of the framework/API still work today vs when they did in the past and lastly WPF seems to have more questions than Silverlight go unanswered – according to StackOverflow.com.

Silverlight is still up for grabs although its clearly shifted its strategy from when I was on the team to be more of a Windows Phone 7 platform and less about the web more so as time continues to flow.

HTML5 is basically a bunch of new tags that are ready for browsers, but in the end you’re still hacking around in the weeds with JavaScript and CSS. To be fair, if you’re an ASP.NET WebForms team, then HTML5 would probably be the quick win – but – its not as much fun as Silverlight / WPF?

My point is, its confusing and the usual lip service really doesn’t bode well for Microsofties as they come off looking like they are a PR machines for one and secondly any trust within WPF vs Silverlight discussion has been eroded due to constant shifts in vision – clearly it highlights that this has been and will continue to be highly tactical reactive product management and less strategic.

RE: Customers want us to invest more into Silverlight.

Jaime goes on to say:

First of all,  a lot of our customers are telling us to invest more into Silverlight.  Let’s say (again made up) that demand is  4-to 1. How do we justify a revamp of the graphics architecture in WPF.  This is not trivial work; the expertise in this space is limited, we can’t clone our folks to 5x to meet everyone’s needs.  

Unless Microsoft’s feedback channels have gone through a massive upgrade / radical change in the last 6 months, I call bullshit on that one. The customers are likely to be folks like NetFlix or Vertigo? (we have no real tangible customer feedback pipelines in Microsoft. It was a nightmare to sift through the chaos to get such answers)  and secondly the reality of that comment is what I call “Oh dear, he didn’t say that” moment. If i was a journalist i would use that firstly as fodder for “See Microsoft just stated they have no interest investing into WPF” – not  only would it be fair game, it’s obviously correct so it’s also not healthy right now.

It’s important to also add that if you starve a product of its marketing budget, then your overall awareness for the product is going to drop dramatically. It’s also fair to state that if the bulk of your attention across the board within the company is on Windows Phone 7 and Silverlight, then its even more likely the customer focus is skewed towards what you’ve been waiving and shaking your hands at the most. To use a metaphor “It’s like giving a child candy and then asking if they should give you more vegetables?”

My only real response to that question is who’s going to walk up to AutoDesk and tell them “Well, we could fix performance issues in 3DS MAX 2010 with you, but sorry, Silverlight is our preferred bet… best you figure out an alternative route filled with C++ and roll your own rendering pipeline".

Jaime goes on to address the likely cost of WPF

Let’s assume we did take on the work.  My guess (again, I am not engineering) is that it would take two years to implement and thorougly test a release.  At the stage that WPF is at, a rearchitecture or huge changes on the graphics stack would be 80% about testing and 20% about the dev work.    It is not a trivial amount of work.   Would we get the performance you want across myriad of devices? We don’t know. WPF bet on hardware, and there is new devices out  there that are trading hardware for battery, weight, or simply for cost.  it would suck to do that much work, make you wait a long time, and then not get there. Let’s get real on the asks; you say “improve perf” but you are asking us to do a “significant re-write”; these two asks are different. 

He has a point, it would be a significant impact to the resources allocated to WPF to get it back to the core promise that was made in 2007 – trust us right? things keep changing? we don’t have a plan just right now, but as things happen we hopefully will!.

It’s a good thing that there are 200+ engineers right now ready to pounce on this problem so it should be a large amount of work, but with that many engineering cycles nothings not attackable according to Scott Guthrie, CVP of Developer Division.

That was a cheap shot Barnes! and it was. My response to Jaime’s remarks there would be “This affects me how?” as in the end you, Microsoft asked me to invest in you years ago. I did, and now you’re telling me its too hard and costly for you to invest back into me? how is that fair and again why am I trusting you over and over when you keep changing the rules? Is this not an abusive relationship now?

RE: We speak to customers.

Comments like this for me a red flags –

3)      You are asking us to listen to our customers.   We agree there and that is exactly what we are doing. Please keep in mind, you are not the only customer – even if you are my favorite one :)-.

image The reason they are red flags as the response at the end of the day says “trust us, we have this covered” as nowhere does Microsoft really ever decompress what customers they have spoken to and any substantial numbers to support it. For all you know, NetFlix and Nokia are the two customers they spoke to and NetFlix executive being on the board of Microsoft whilst Nokia’s new CEO was one of the ex-executives at Microsoft – well you can see how easily you could tear the argument apart if you set about doing so.

The point is, there’s no response you can give as the actual comment is supposed to make you feel isolated and that what you’re saying really is most likely a vocal minority.

Here’s the real deal guys and pay attention to this one as it will bake your noodles. Inside Microsoft there is no one team that handles customer feedback. Multiple teams do it and they approach it from a variety of angles. In the entire time i was a Product Manager and Evangelist within the WPF/Silverlight teams I never once saw or even heard of a central database of customer feedback. The closest we had was an annual survey / report that we collected which gave a health check of the entire Microsoft brand & its products. It was quite shallow in gauging what customers wanted and it’s main purpose was to be used as a large measuring stick for all roles almost in Microsoft to gauge success/failure was per year.

The only way you would get data from customers was if you invited them to Redmond (which is effectively the same as a band inviting a fan over for dinner and asking them what they could do better) or you outsource your needs to a company like Adaptive Path, Forester, Gartner etc to come up with a survey / research around the topic at hand (Don’t be shocked folks, but Gartner Research can be bought for the right price).

Having a listening post inside Microsoft around what customers want or need is chaotic at best and it depends on who’s listening and what the initial agenda is – more so how it maps across. It has nothing to do with constructive feedback or channels of delivery as the higher the decision making goes the further the customer feedback gets from these decision makers.

RE: Let’s compromise?

Jaime does go on to discuss the compromise:

he WPF has looked at the trade-offs, and risk many times.  We are also looking at what customers need. Jer, to you it is all about graphics.  To many others, it is about data.  So, how do we serve all customers??

The strategy is exactly what you have seen/heard:

1) WPF 4.5 is going to have some significant data binding performance improvements.  

2) We are not redoing the graphics framework, but we are doing a lot of work to let you interoperate with lower level graphics so that if you need more graphics perf you can get it, and still keep the RAD of the rest of the framework. 

I often see this style of response from Microsofties (hell, I used to give it). It’s one of those responses you just go “What the f… If you’re going to piss on my head from above at least have the courtesy of telling me its fresh water harvested from a pure spring – make an attempt to keep the illusion alive at the very least.” yes its colorful but the point is, please stop treating me like I’m an idiot as I’ve not given you any indication i think that of you have I?

Cheap shot again, sorry Jaime but we both know that’s a classic “let’s take this offline – abort abort” throw away pacification tactic. As what it really translates to:

“Look, we don’t have engineering cycles to really fix the core problem so what we are going to do is shift the focus in other areas in the hope you will just leave us alone long enough until we can regroup for a better story next year”

Cheap shots again.. but.. in my defense, I’m just thinking on both sides of this conversation. How would I react to the responses in WPF Disciples as a Product Manager / Evangelist and lastly how would i respond to the answers I just gave as a customer / adopter of Microsoft UX Platform.

Is this about Jaime or WPF though?

Now, normally remarks like the ones Jaime has given on a public mailing list are usually ones you give a free pass to with regards to most Microsoft staffers. As at times you find staff arm themselves in the riot gear and just bolt straight into the fray of civil geek unrest and try their best to calm peoples opinions from spiraling into a negative back to a positive.

Jaime, isn’t a young pup fresh out of Microsoft boot camp. He’s a seasoned Technical Evangelist at Corp, who over the years has had deep roots with the WPF team in terms of influence and awareness of their future(s). I’ve personally worked with Jaime a few times and he is very talented and smart person, so my point here is that what he’s just outlined was a slip between what he knows privately as to what’s going on vs what he shouldn’t disclose publically. Furthermore, he speaks for the WPF team and no matter how many times he can throw the prefix “personally, my thoughts are” to his remarks, if that’s what he’s thinking then its highly likely that’s the outcome you’re likely expecting or going to expect.

This isn’t about Jaime though, and I cannot stress enough that I have enormous respect for him professionally and personally. It’s about Microsoft and WPF, and this is simply a highly visible case of internal thinking spilling over into a mailing list. I cannot stress this enough, if this reads as me kicking the crap out of Jaime’s remarks on a thread then please can i simply say it’s not personal its the role Jaime is acting out that is up for grabs. You represent Microsoft, you speak as if Bill Gates himself sat in a room full of journalists and outlined his thoughts, there is no “but he’s a nice guy” moments.

image

This is why i have created FIXWPF.org and will work night / day to expose this kind of lip service but instead of opinionated pieces or argumentative out of context text grabs, i instead will hope to back it in a more factual manner with real-world data, so situations like this aren’t a case of constant streams of :-

“trust us, we have it covered”.

No you don’t have it covered, as it costs to much remember?

Related Posts:

UX Lab: Changing the way you handle CRUD workflow

I often see a lot of consistent patterns in the way applications are being built when it comes to generic create, read, update and delete (CRUD) workflows .

The usual pattern is that a screen starts off with a add/remove action followed by a very large datagrid and probably some paging. A user would then refine the datagrid’s result set, make a selection either inline on the datagrid or opens a modal via an action like double click which then presents the end user with a more detailed view of that record. This is probably so generic in the way it’s being approached that I’d probably dare say nobody’s really sat down and thought about its actual practicality – as it seems to be the unofficial standard for screen design (well the bloody apps I see day in day out anyway).

This pattern for me isn’t something I’m a fan of, maybe because it’s so common now that I simply crave for an alternative approach? I crave this alternative because I feel at times the workflow in itself seems oddly backwards?

The part that catches me out, is the overall approach taken. For instance, the end user has come to the said screen to get a detailed view of a record – maybe a summary, but doubtful. They wade around in the various amounts of turn-keys (filter settings) until they settle on a pattern of data that they can then scan (hunt/browse) for and proceed to get the modal open for a detailed view. It appears that majority of the practical usage is saved towards the end of the process pipeline? in that getting a detailed snapshot of the record seems to be an extension to the UI instead of probably being the focal point of the UI?

Armed with this style of thinking, today, I set out to try an alternative approach to the way this workflow could work. I decided to simply inverse the workflow, in that take a typical Security (add/remove users etc) workflow and try a different approach (see below).

SecurityUserScreenBkg

The idea is that when you click on “Find Users” the screen opens up to your summary view, in that since I’m logged in it reflects back my entire account profile found within the system. There are then a number of actions one can take in and around deciding on what to do next but the main key piece here for me, is well I’ve shown you the end point up front – I’ve seeded a contract with the end user around what screens will look like once they’ve found a user of their choosing.

How do I change the user from me to someone else?

image

The change button in this screen kicks off what is traditionally the first screen, in that if the end user clicks on [Change..] a modal will open over the top, presenting the end user with search criteria. The user then fires up some search results and can specify filters for their search. Once the end user has found the right user of their choosing, the modal closes and the original security profile (you) switches to the person in question.

SecurityUserScreen

Ok, I’m kind of with you, but what benefits does this give then?

I personally think it shifts the user into a more focused approach to how they handle the workflow. It’s quite easy to snap in a datagrid + tree control and hit F5/Ship. This approach in my opinion approaches the workflow differently, in that it asks the user to be specific in what they are really after. If you’re in the User Administration area of this application, then what is it you want to do? Manage users is probably the typical response here. So, let’s let them manage a User in a more focused fashion by exposing other areas of interest in a screen that’s more content specific and less cramped / buried in a floating modal.

The typical “list all users” with paging approach is quite unnecessary real estate to reserve for prime time, as well it’s merely a stepping stone to the end point. It’s almost throw away in the task process should the user want to change “John Doe” password or check when that user last logged in etc.

You could even approach the way I’ve done it differently, by simply providing a search box at the top with a label “Find User..”. Once the user types in “Scott Bar..” (auto complete) like experience fires, but instead of a pulldown it could then go off and grab all twitter feeds, flickr photos, facebook profiles, linked profiles etc and just start showing them on screen. This kind of approach is more helpful when you’re trying to figure out who that “Scott” fellow was last night, as now you’re meet with multiple forms of media to help guide your search detective skills down to a more informed end point.

The point is, it’s taking the equation of CRUD and flipping it into a more interactive experience. Why invest all this time and energy into some of the new UX platform’s out there only to use generic patterns like the original one mentioned in this post? How can you evolve this pattern further and where can the users gain in terms of data + contextual view beyond what they’ve typically been given.

It’s a new world people, try and break a few things as when you break something you in turn are rewarded with knowledge on where risk/failure can occur. Much more informative approach than “well everyone else is doing so i assume it works” policies :0

To be tested..

Related Posts:

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: