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:

Posted in Uncategorized | Tagged ,

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:

Posted in Uncategorized | Tagged

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:

What happens when you bring the UX person in last.

How many of you have been to a conference that has a UX/UI Person on stage discussing the mystic art of software development and design? In that said session they at some point raise the slide that outlines you should engage a UX person early and think about UI/UX from the start.

How many of you then go back to your respective cubicles, nodding in agreement but then immediately go into a new project ignoring the said suggestion?

Don’t lie, I see you looking back in a nervous manner and shouting out reasons like “Well, we didn’t have the budget” or “My boss wouldn’t …” etc.

Meet Mr Wolf

image

Just like in Pulp Fiction, a guy like me is called in after the crime has been committed. I’m the guy you bring in after you accidently killed someone and its my job to navigate the mess in order to get you back to your life without prison time. If I succeed, you don’t’ spend the rest of your life in jail if I fail, well, learn how to fight using prison rules.

When I come into a team in this situation, the thing that I notice the most is they are looking for guidance around a plan, in that it’s a case of me analyzing the situation, asking a series of specific questions relating to the said scene and then giving them a task list to execute on – whilst being clear to stick to my rules or well, good luck in jail.

The problem with this approach at times is that you have usually one or two people in the room who ask for your help but at the same time are giving your orders on how to clean the mess up quicker – each time they do this they in turn increase their chances of prison time.

It’s a hard balance to participate in from my perspective as I have to figure out a way to firstly give a design and experience to the software’s targeted end users in a way that isn’t just a screen after screen of tree controls and datagrids whilst at the same time having a low impact to the codebase and lastly but more importantly doing it within a very tight timeframe/budget?

Its hard work and you know what, its going to cost you so don’t whine about it.

Had you called me from the start, it would have been a completely different outcome and yes, you’ve heard this thousands of times at whatever conference you last attended – engage a UX person early and let them direct the screens overall compensations – design first engineer second.

I personally have been pulled into over 30+ projects in the last year that have this exact situation unfolding before me, in that it’s the last two sprints of a project, I’m playing a massive game of UX Tetris with WPF/Silverlight or Wp7 and I’m constantly being harassed on time/budget questions.

It sux but that’s the reality of the role I play in this business, the guy who can code and design at the same time. Its why I charge the amounts I do and sure the price attracts attention but in truth If you follow my rules and approach you will come out with a finished result. If you interject along the way with the way you think it should be done, fine, I’ll do it your way but if it fails – given the inexperience so far, it will – then to be fair, you were warned.

My way or the wrong way.

The way I approach situations where I’m brought in at the last hour is via the following routine.

  • The Primitives. In every application you have what I call the primitives, in that these are the buttons, modal windows, textbox's, scrollbars, checkboxes etc. .. the stuff you get out of the box for free with .NET. My first attack posture is to start building out a resource dictionary library for you to bootstrap your UI against. In that for example TextBox and Button controls I start putting into what I call the UI-Shirt-Sizes, Large, Medium and Small. If your form in question requires the user enter 15chars min/max, who cares, the end user is open to the idea that this textbox is a small one that magically doesn’t let me type more than those pre-defined characters.

    If your software has a large sentence like “Find a users profile”  labels on buttons - guess what I’m going to do, re-label that as “Find..” keep it simple less extraneous cognitive load and more assume the user has used software before they picked up yours.

  • The Layout. Chances are you’ve probably put together a UI that I can only describe as a DataGrid orgy followed by copious amounts of Modal windows and screens that probably looks like the dashboard of a Qantas Jet in terms of fields/inputs etc. Just for giggles, I’m also likely to find a TreeGrid control because of some random hierarchy based navigational weird mutation of a need (you know who you are, there's no shame in admitting that)

    I’m going to simplify this down to the point where the data flows in a fashion that makes sense to the outcome of the screens purpose. I’m also going to look for ways to make use of a party trick called “progressive disclosure” as you do want the user to feel like they stand a chance at success should they use your software don’t you?

    This is what I call the hostage negotiation in that chances are there is an entity in the room that is locked on the way it works at the moment and its my job to find a way to get you to release parts of the UI so I can find a happy resolution to the situation. I’m going to ask you to give me a little control over how the UI comes together and in return I’ll turn the lights back on followed by some pizza. We need to build trust and you got to work with me on this one, I can make good on some promises if you do!

  • The Validations. I have seen some crazy ways that developers have approached the simplistic concept of alerting the user that they did something wrong. What I have noticed the most is its kind of OnChange vs OnSubmit mode of approach. The reality is validation isn’t that, as you have the “Hey before we show you this form, here’s where you need to focus”, “Hey I just noticed you filled out that field wrong, can you fix it”, “Hey I am about to send this data off and noticed the form isn’t really done yet?” and lastly “hey I know at the time you sent this the form felt like it was good, but the server just called me and told me its wrong, so can you go fix” .. point is, IDataErrorInfo implementation is only going to work so far.

    I focus on this area is this is where at times bugs tend to get brought up and it can be a case of where the most effort can be spent trying to undo user fail. Its important that one approaches this in a way that makes sense to the end user and you also find ways to decode the error in a meaningful way – not one that aims to reduce the user to a dribbling mess of “I don’t speak computer geek?”

    Validation styling and alert states are crucial.

  • The BackgroundWorker. Its not about just fixing the UI look and user experience fail points its also about shift the work into areas that make the application feel snappy. In WPF the UI Thread is an absolute pain in the butt when you at times talk to WCF – in that I have seen a lot of apps that keep the entire workload under the one thread only. In Silverlight this can be a fairly low risk situation given Async works ok, but in WPF it means your application grinds to a halt until the service layer comes back from the dead. It also isn’t just a threading issue its also a latency issue as well.

    Latency is a buzz killer in making the user feel like the application is responsive, it creates this effect in which the user punishes themselves and attempts to pay their debt by trying again and again etc if left unchecked. Its situations like this I look for ways in making the user aware that they did a good job but at the same time finding ways to NOT remind them of time – as time is the enemy given each millisecond you are banking hate debt with the user?

    This is where I look for ways to use some slight of hand techniques to convince the user there isn’t a problem and everything is fast / efficient in the software. I also may lie to the user if I can eg Please wait while Security authenticates you” – damn those Security Nazi’s I agree, it sux but what can you do – its actually an effective way to pacify users as you all collectively shake your fist at IT Department for always riding you about security – when I reality I’m waiting for blah service to wake up from its slumber?

    Point is, find a common villain to throw under a bus or find a way to keep peoples attention away from their watch (eg: Now herding llamas for the great stampede …< MAXIS do this in their games, it works)

I’ll leave there as this is turning into a tomb of gospel around how I approach my job, but the point is that I do have a process and there is a method to my madness. I’ve been in a lot of fire drills with WPF/Silverlight and WP7 and I’ve now settled on some patterns that have produced results  around nice UI/UX and customers happy.

The reality is this though, you could of saved yourself minimum double through to quadruple the amount of money it cost by bringing me in early instead of late. I can’t say it enough, engage early and upfront you will save, you may be skeptical htats fine, but either way a person like me gets paid – its just a matter of how much?

Related Posts:

Posted in Uncategorized | Tagged

The rise and fall of Microsoft’s UX platform – Part 4

 

WPF Time of Death.

Time to call it, December 2nd 2010. Seriously, I have thought about the Silverlight Firestarter event for a few weeks now with a focus on reading how the rest of the world kind of digests the vNext of Silverlight.

Its very clear if you read between the lines that Silverlight is shaping up to replace the WPF workload, and whilst Microsoft will roll out the engineers + shipping routine its pretty much all they aren’t doing before WPF is officially declared dead. Shipping is realistically the one thing they have left and even that’s looking a bit sketchy and cumbersome to watch.

It’s clear with Silverlight5 my old comrades in arms at Redmond have even stopped paying lip service to the x-platform discussion with many of the new features being Windows specific. It’s also clear given Windows Phone 7 failing in the market that now is not the time to give Microsoft’s biggest competitor, Apple momentum or face an internal career firing squad.

WPF has enormous amount of hidden potential, its not marketed but its there. It’s not a bad desktop platform to build against and majority of the issues that I have personally faced with the product are due to basically quality assurance sloppiness. Its still got work-around solutions though, so you in turn forgive it’s sins.

Technically being ok is not enough though, you need to go wide and far in promoting its existence and the return on investment you could potentially yield from the platform. That's not happening and its also clear that there’s zero paid community evangelism efforts in market right now to uphold this line of thinking.

An example, Where is the WPF fire starter Microsoft? where is any event for that matter that focuses on exploring the bounty of WPF?

Scott Guthrie’s blog is typically a marketing announcement channel given his geek-fame over the years. It’s often we in marketing would joke (sarcasm) “its a good thing we have ScottGu’s blog, as boy we almost needed an official marketing site for Silverlight” – jokes aside, Scott doesn’t talk about WPF at all (check out the below tag cloud)

WPFDead

If i were to audit Microsoft today online and tally up WPF vs. Silverlight, which would win? Argue with the notion that something is dead or isn’t but its definitely clear that WPF hasn’t a bright future as its technology cousin – Silverlight.

Windows Phone 7 – Fail.

I have predicted that I think WP7 is going to not win consumers over but I figured that it would take a couple of years before that is realized. Hearing reports that the device has small units of sale and now some resellers are slashing prices in a hope to stimulate the market to buy, is just downright disappointing.

Its not that the phone is bad, its actually got a load of potential. As whilst I’m a WPF fan at heart, I do still also enjoy working with Silverlight (which has this kind of polarizing effect on me). I just think that the Metro User Interface is simply killing the products potential.

It’s important to call that out, given this is the “face” of the brand. It looks tacky, not well thought out and clearly lacks usability principles needed to navigate a small device. It puts to much emphasis on typography and downplays visual elements to provide structure and grouping to the components within (ie Extraneous Cognitive Load).

The keyboard is to primitive and the keys are narrow. I’ve sat down and looked at the iPhone and Wp7 keyboards and for me the WP7 looks like a prototype version of the concept. The keys don’t necessarily guide you to aim for the middle, where as the iPhone keys are spaced but at the same time the hit area isn’t exactly confined to that space. You in turn are more likely to focus on your target even though the spacing is artificial.

Typography is weak and at times doesn’t even do the basics – in outlook a list of bold means new, unbold means read, yet you still don’t even get this? The menu system is a endless vertical nightmare, as whilst its great to list things its important to also balance out your screen between scrolling and displaying. I find the constant scrolling down to be cumbersome and annoying especially when you’re debugging an Application you’re writing for the phone.

I could list more and I’ll be talking 1:1 with Wp7 Product Management, but i think my point here is made, this phone needs more energy and focus. It has enormous potential ahead of it but for the space price or thereabouts as its biggest 800lb gorilla competitor is simply unrealistic. Lower the price or fix the UI, make a choice as the UX for Microsoft is dying as-is. Which brings me to my next point.

Designers aren’t interested anymore.

If you look at the AppStore market place, majority of the apps are visually engaging and have definitely some design bloodlines in the room. If you look at the Microsoft marketplace its pretty clear that designers aren’t in the room in large quantities.

No designers means wasted technology, wasted technology means some team internally right now is coming up with the “fix” for this (which in their minds is an engineering problem not an engagement problem). The reality is you can throw all the tools you want at this problem as well as the platforms, but unless you truly evangelize in a non-aggressive way to this market. You’re just wasting good money on technology that goes nowhere.

If you were to compare 2007/2008 Evangelism efforts to present, You would see this massive disconnect between strong in your face marketing to the art community to today being a bunch of engineers high fiving one another about how awesome things are.  The reality is, unless you can add some design blood lines to this new UX driven world, your technology hasn’t moved forward, you’re just rebadging old technology with much weirder UI.

Summary

Silverlight 5 is WPF’s new replacement, and I really don’t have that much of a problem with this other than if you’re going to make this the vNext desktop focus, then commit. Don’t do it half-assed, get those 200+ engineers and get your butts into gear and open it up more. If you aren’t going to do this, then take 100+ engineers out of that 200 and get them to focus on doing more with WPF so that the two are more aligned to save cross-targeting related issues – as news flash Redmond, nobody really thinks that far ahead as to which technology is likely to give them an outcome they desire. Choosing Silverlight first then hitting a wall and retreating back to WPF is unrealistic as it means people need to know its faults completely end to end and how these map to their business constraints upfront? sorry no.

Windows Phone 7 needs something. It needs a more structured approach to user experience and it needs to solve WPF and Silverlights initial problem – how to get designers to the cause. Unless Microsoft gets off their butts and re-invest into the designer focused communities, these products are destined to follow the same non-starters as previous incarnations of the Windows Phone operating systems as well as the low saturation levels in the wild of both Silverlight/WPF publically.

“There are certainly some functionality shortfalls, and we are going to work to address them,” – Joe Belfiore  / Microsoft.

Microsoft needs to get back to evangelism 101 and more importantly the notion that just because you ship doesn’t mean you’re committed to the future. Creating features and releasing them isn’t enough, unless you broadcast and win the hearts & minds over all you’re effectively doing is having a bunch of engineers in Redmond high five one another over a release that could be epic if it got momentum – FAIL.

Related Posts:

Windows Phone 7 – Where is Don Draper when you need him?

I’m looking at the latest in many of bad experiences found on Microsoft.com regarding the new improved Windows Phone 7. My first thoughts are, I guess the budget was low this year for the website but then thinking on it i’m probably going to wager that around $200-$500k USD was probably spent on this site via some internal global vendor.

Let me deconstruct the site so you can maybe get a sense of what I see (Lots of visuals). I’ll also compare it to the already entrenched and spark of creation for this phone – the iPhone and its respective site.

Value Propositions.

If you’re taking a product to market, you pretty settle on what you would call the “Value Proposition” in that its your initial promise that you want people to remember the most – it’s what I call the impact / aka upper cut. Windows Phone 7 isn’t clear on what its main value proposition is, its a phone OS which is fine, but what does this phone do that all phones don’t do. More to the point, why did Microsoft spend so much time and energy getting this phone ready for market – what’s the secret sell or sizzle that I'm about to be knocked over in its sheer awesomeness?

Comparison.

Microsoft

.

image

The very first entry page of the site (assuming I come in from here) puts me through approx 5sec animation of what the introduction to the phone is. The first parts are a bunch of squares or tiles which overload me with brands ranging from Bing to Zune (care factor, as these aren’t a household name as yet world wide)?

 

image

 

Secondly I'm hit with what I can only describe as Dr Suess style messaging.

…Say hello to Windows phone
the only phone with live tiles.
less stop and stare more glance and go
less out of touch more in the know?..

I don’t even know what that means. Live tiles? stop and stare? is that even a problem? its less out of touch and more in the know? what do you mean?

It’s one thing to open with a question to trigger an action, its another to completely ignore you and confuse.

Looking beyond the animation and assuming you can read the sequences fast enough, let’s assume the user scans down to the bottom, where I can only guess as being the main hubs of navigation.

  • Explore my choices.
    I’m guessing this is a good start for me to shop for the said phone, important if i already know ahead of time about the phone and i just want to jump straight into purchase mode.
  • Make Windows Phone Yours.
    Demo area, good, so you have a virtual phone I can play with. I’m liking this, as rather then sit through silly marketing speak, i can just play. I click on this, boom, Facebook.com – guess what guys, most corporations around the world specifically block Facebook as a URL given the ample amount of time waste that goes on there (hey i disagree with this but it is what it is). Furthermore, why am I now on facebook? and why aren’t i able to just play with this inside the same website? what If I want to explore what else you have to say? where are my options?
  • The place to shop?
    Oh so this is Microsoft’s “AppStore” ok, I’m seeing some potential here, but can we first establish what the phone is first? I’ll get to that a bit later maybe?

Where is the navigation? oh its the small text above in vertical stack formation with poor spacing.

image

Apple

image

The first thing you see when you visit the iPhone website is a highly impact visible slide show presentation on the value proposition of the iPhone4. Its bright, its impactful and no branding overload. They could of went to town here on Google maps, iTunes, eBay, Safari etc.. they didn’t, they kept it on point and you focused – here’s what the phone can do that we think is important  upfront.

They also underpin the value propositions with clear well spaced list and palatable enough read around what the said slide show probably just told you should you still not pay full attention. The point is, they are reinforcing what they think you should be focused on and not distracting you off the site. They are making the pitch to you, and are working hard to retain your full attention.

image

Looking below this page, notice how they break the navigation into areas of interest. It essentially is attacking the user from a matrix of context as in for those who just want to know what;s inside the phone, features is probably a good bet. For those who are interested in the design of the phone, again, feast your eyes on that link called – Design. OS itself your cup of tea? here you go, here’s whats new and old in the operating system. Apps, Gallery and Technical specs again clearly partitioned and you can at a glance get some deep understanding of what this phone story looks like.

image

Apple are very good in their website design comparison to Microsoft, but my points above here is that you are immediately left with a sense of both what’s potentially inside this new gadget as well as given a sense of spatial awareness around finding out ways to find more information should the value propositions still not convince you to go into a store and play.

The main important piece here is getting you into their stores, buying online is fine but lets face it, you will most likely want to play with this phone physically first before you buy. Once I have you in my store i can attack you from all points via customer service reps through to convincing you my promise (value prop) is true. Trust.

Less is More.

Moving beyond the initial sell, let’s go deeper into the site and explore true functionality of the phone. Having a sense of awareness of the depth of the Windows Phone 7 is important  but at the same time you don’t want to overload them with excess information. Let them play with the phone in store or virtually if you can will answer a lot of that excess data but the most important thing is to attack them in a way that they will appreciate in that – give me the basics, give me what i get that i normally wouldn’t get and lastly how does this look visually!

Comparison

Microsoft.

If you click on Discover you are given what I can only describe is a list of random points that dont seem to have a sense of grouping and lastly a sudden need to cram branding overload into the pitch.

image

Why do i care about XBOX Live? Bing? Windows Live? Facebook? and more importantly where is Twitter? hey since we are in the mood for name dropping why stop with these.. point is, it’s Microsoft teams pitching themselves first customers second here. It’s obvious and shallow and unnecessary.

The headings are ok, I’m fine with the three (3) sections of break downs, but keep it simple stupid?

It gets worse, I can’t even click on the phone it’s inviting to me that the phone looks virtual, but wouldn’t this be a great opportunity for me to play around with it? explore it? go deeper? ignore your sales pitch and play? as you’re probably not helping me anyway?

As I click on each of the “Discovery Points of Interest” I soon realize that i am first meet with a tagline followed by another click on reading more? I’m all for white space Microsoft but really, this forces my reading habits to slow down to a pace that I'm probably not as comfortable with. Give me the opportunity to speed read through the areas I think could be interesting vs the ones I probably think aren’t? instead I have to go through a 3 click uninspiring process of both reading text and keeping an eye on animation(s) at the same time – i think this may actually qualify for cognitive overload.

image

More importantly, what is a hub by the way? (I know because I’m an early adopter and its my job to know) but have we clarified what a Hub is on the website btw? I can’t seem to find out the story behind that? Ignoring the Hub definition if you then click on the Music + Videos Hub you will be meet with the similar looking tagline followed by a more action..clicking on the more action you are then given a fairly reasonable looking paragraph about the story of Music + Video. It however still wants me to click more on finding out about this thing called Zune (living outside the US, Zune isn’t known, so wtf is a Zune?). After that click, I'm now taking to a different area of the site with really what I call a “Well good luck, hope you figure the rest out” purpose. There’s no elegant hand off to this part of the site and more importantly you just broke my concentration.

Shallow experience here in the discovery of this phone. Microsoft are being lazy and not really delving deep into an immersive experience that gives me clear precise clarity around what this phone has or hasn’t got. I can’t skip ahead and i’m reduced to a pace that probably isn’t going to make impact.

Apple

image

Let’s not muck around, Apple are good at their feature break-outs, but the thing I liked the most is you can watch a video on the phone itself (Good entry point to watch that expensive advertisement you put into TV/Online no?)

Furthermore, the page asks one thing of you, and that is “Are you happy to scroll down?” and to be fair its a habitual ask meaning its already baked into all users on the web as part of their day to day muscle memory.

The more you scroll down the more you see what’s inside the phone and its simple, Tagline, paragraph, big visual and a learn more point which takes you to a deeper insight into that feature. They position the phone well, they treat you with respect as a potential consumer and they are working hard to entice you into areas of your interest and less Apple’s.

Apple also won’t burden you with brand overload here and when they do, they do so in a way that is digestible. Constant re-use of the phone and screens within the phone that highlight areas of interest. Clicking on iPod you get a good sense of what Music will look like under the iPhone regime and yes they introduced the brand iPod – but they are allowed to, know why? iPod is ubiquitous around the world its an established brand. Zune isn’t.

image

 

Conclusion.

image Microsoft Marketing need to wake the hell up, get back to basics and find a Don Draper style character to head-up their online presence. Loose the Barney & Friends commercials and treat this product like it was the first time in the world you’ve told people about the story of Microsoft and Phones. Stop playing a game of hide and seek with information and more importantly down-play other brands if they aren’t as well seeded.

Everyone in that team needs to pick up a book “Don’t make me think” and learn usability 101 mixed with marketing 101. Get people to stores to play with the phone, make them promises online but make sure you can back them up world-wide. This isn’t a US focused product, its a world-wide one and you need to entice the consumers in a way that makes sense to them as well as keep up to speed with your competitive issues.

This phone needs to beat iPhone and Android, and it needs to win.

Related Posts:

UX Creator Tip: Fear the surrogate user.

image

Ever sat on a project and heard someone give their account as to why the user base won’t like xyz feature or UI change? Ever sat in a cubicle and listen to someone rail against the idea of change for fear it would upset the user base to the point where the helpdesk would be flooded with “Please Explain” calls.

Surrogate User - people used as a substitute or representative for users, in order to provide information in design meetings, user testing, and so forth.

The reality is this, end users are surprising beasts and often will surprise you in what they can and can’t do. The end user especially in enterprise is so used to crap-tac-ula software day in day out that anything really that you do as of today onwards is highly likely to be much simpler to what they are used to (especially given the consumerism within Enterprise these days). Furthermore should they dislike the software they aren’t likely to all abandon their jobs simply because of a bad UX decision – as 9/10 they are under duress around crappy software decisions made by other teams anyway.

Instead, the end user is probably thirsty as ever for software that feels simpler to use and actually looks like someone took the time to think about them and their needs instead of how it solves one finite problem only. Software’s job is to react to the end user, not make the user react to it! 🙂

End users are also making use of a variety of software so whilst one particular UI pattern that has been adopted is “the way they are used to today” doesn’t necessarily mean they are ignorant of all other UI patterns out there on the market.

The key is to leverage existing muscle memory as much as you can today and less showing off on what you can and can’t do with some of the UX Platforms at your disposal. Be creative but don’t be overly creative, you get no points for showing off.

Layer-in complexity is what I always tell people, as it’s much harder to reduce complexity later than it is to bring it in slowly. It’s also the best discussions to have, as if the business or end users are complaining that the software is too simple – which let’s be clear, I dream of these discussions – then you have more of a baseline to draw from going forward around feature weighting and selection (which plays into UX + Agile in a way).

The surrogate user is someone you should fear in all software projects as they often bring pre-existing bad habits forward and lastly suffer from the “I’m in touch with my audience” arrogance (sometimes without realizing. I’m told that a Surrogate User when done right works, i’m yet to see one of these unicorn beasts, but i’m told just the same.

Whenever I hear someone say “Users don’t like..” my first instinct is to respond “Oh? Did 1 in 5 housewives tell you that or is this something you’re just making assumptions on?” – Meaning is this “I think” or is it “I know”.

Surrogate Users are dangerous unless they are moderated by someone who has the “UX” somewhere buried in their resume, as they can often decode the “personal bias” from the science of what these entities represent.

Related Posts:

Posted in Uncategorized | Tagged

Project Salvaging is Microsprinting

Microsprinter

Situation is simple, you’re someone who has been brought into a project at its last witching hour, there are not a lot of project management fundamentals in the room and everyone is constantly emphasizing the “we have to get this done, no time” analogies and metaphors at you. What do you do? How do you navigate this and salvage what’s left of the project to turn this around into a productive and usable solution.

Answer is Microsprinting.

The past 6 months now, I’ve been constantly brought into projects that have gone off the rails for one reason or another and it typically comes back to scope creep and lack of discipline in terms of leadership or more to the point communication.

This is why SCRUM is a concept that every developer should borrow ideas at the very least from, it’s not so much a rule book but a communication protocol that all can agree to and figure out ways not to bump into one another.

That being said, setting up sprints that go for week(s) are great but when you’re faced with a deadline that is measured in hours whilst having to also work back from an unmovable deadline you simply need to calibrate your effort to a micro format.

The List.

The way forward is this. You first analyze all the features that were expected to be in the release for the project, don’t worry about who did what wrong or where it went pair shape. Sit down, take a deep breath and focus on getting a list together that outlines all the features needed to be done. Take this list and break it down to a point where it’s not to finite but at the same time granular enough that all can accurately see what the effort ahead looks like.

The wireframes aren’t the spec.

A lot of times I see wireframes and folks are looking at these and going “Ok, I need that wireframe to be designed” which is a perfectly valid request, in reality though as an interactive designer your job is to not just paint pixels here but also decide on how the moving parts become interactive. More to the point, you’re also analyzing each of the boxes that say “news” and thinking about how the data template will look per item in the ListBox and so on, you really need to map this out per screen and come up with a fairly comprehensive list of both the interactive specification as well as a list of visual states that need to be designed end to end.

I say this as a box on a wireframe can turn quite dramatically into 2-6hrs worth a work depending on which direction the interactive designer decides – “Ok this box when clicked now will go to this screen and the transition needs to be fade along with a loading of individual boxes to lead the user as to what’s change in an elegant fashion etc”

Break the wireframes into detail as again the project is off the rails you don’t have time to sit back and create high fidelity prototypes for each wireframe around its interactivity. You simply need to outline what’s likely to be the effort and do the best you can to not screw up given the constant variables of time/budget is much shorter than you’d ideally like to work towards.

8 is the number, not 7 or 6 or 2…

Break your day into 8hr segments and these are effectively the Microsprints. Every 8hrs regroup and triage what needs to be done and what has been done, agree and move onto the next microsprint. It’s also important that you work with a stack ranked list, keep it simple, rank it from 1 to whatever and attack the list one by one until you get to the finish.

Chances are you may have 100 items but in reality given the timeframes are short whilst the budgets are tight; you’re effectively likely to end up with 70 items done at the end of the deadline.

It’s time to start sacrificing and yeah it sucks but if the project had of been mapped out properly from the start you’d have the full 100. The reality is its off the rails, you got to start triaging in a cold but fair way sort through the items that are going to have a chance of life and simply send flowers/apologies to those who want the items that aren’t likely to have a chance at life in this project.

Tough decisions but necessary ones.

Stakeholders are likely to be suffering from denial. “I wanted that box. Can’t we just..” the moment I hear “can’t we just..” is the part where I stop and think to myself “ok, is this a new idea or is this simply a creative way of trying to get agreement on something that just can’t be done”.

It’s now a point in time where you have 6 things on the table and you can only have 3. Choose as if you fail to make these tough decisions now, you will end up having less – it’s a reality and fact.

Don’t shoot the project manager.

At some point the project is off the rails, someone steps up and says “ok, I’m now leading this band of misfits”. It’s important that someone lead, but it’s also equally important that all understand that this is probably one of the worst positions to be in now. Projects off the rails remember, someone just stood up and said “I’ll now assume responsibility for this delivery from here on out” – give them the benefit of the doubt as they just did something you weren’t willing to do yourself.

They may say no more than yes, they may ask you to sacrifice your core beliefs on how things should be done in order for a Band-Aid or two. It sucks, but deadline is looming and having a 115 lines of code to do something that can be done in two may piss you off, but ship it. Ship it is the goal, refactor later.

Learn from your mistake.

Typically after I leave everyone has that exhausted look on their face, chances are some of the folks in the team will vow never to work with one another again. Emotions were high, we got it done, it wasn’t great but we got success.

Put your pettiness aside, understand this, it was a group failure that later turned into a group success. You just accomplished something that not a lot of teams can do, you made the deadline.

The thing is also, that whilst you know there is around 30 items off the list, and chances are the end users have no clue as to what those 30 items were. You’re just beating yourself up over a quality issue vs. an actual specific requirement.

Should that requirement manifest into a missing feature, you have the next round now ahead of you only this time, PLAN it.

Get the interactive designer into the planning meetings early; don’t leave the design to last. The interactive designer is responsible for the look, feel and way this user interface is going to interact. The UI designer is the person who will paint the pixels per state and lastly your user experience / usability rock star is the one who will navigate the cognitive science associated to the UI.

If you find a person who can do all three, lock them in and don’t let them leave. If you can’t find a person to do any of the above, start hitting Amazon and start researching as one of you needs to assume that position and take responsibility early for it.

Developers need leadership, someone needs to be the Program Manager, make them accountable for features getting to developers hands early. Project / Release managers are there to co-ordinate what should come first and lastly when.

You can have SCRUM approach, but democracies are only as good as its people. If the people aren’t clued into its virtues, see the above.

Learn from what you did wrong, don’t nail people to the cross for it..just learn from it.

Embrace MVVM.

If you’re doing Silverlight/WPF no excuses use it now. Don’t screw around, get onto it now. A friend said to me yesterday “..Dude, saying MVVM is half the understanding, once they’ve said it then they now know it..i mean Model..View…ViewModel whats the mystery?”

It’s a basic foundation for all to work towards and it’s just easy to set things in order in a solution.

Related Posts:

Silverlight Installation / Preloader Experience – BarnesStyle.

When I was in the Silverlight Product team, I had many visions of where I wanted to take the product beyond where some of my co-team mates were comfortable with (slow painful incremental growth in terms of change). One of the main focal areas I wanted to fix, was the overall Installation and Preloading Experiences for Silverlight. In that, i think it’s essentially the like the IRAQ war of software (i.e. meaning, its so far embedded now that fixing it is going to take generations of change). Here is how I’d love to see it change course.

Change the way Silverlight Boostraps.

If you new-up a project within VisualStudio or Expression Blend, you will effectively get an automated boostrapped solution, meaning inside your main Silverlight project via App.xaml.cs for example, you should see something like this:


        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
        }	

What effectively is happening here is that Application Class is the default root for Silverlight and when you inject “MainPage()” into the RootVisual its pretty much the same as if you went:

	UserControl MyUserControl = new UserControl();
	MyUserControl.Content = new MainPage();
What I would love to see firstly is a separate Project called “BootStrapper” created as part of the new-up Project template – that or it prompts you to create one much like it does at the moment with ASP.NET Website (More on that below) The point is, it draws the developers around the worlds attention to the fact that the Spinning Balls are really bad idea to hand out to public facing websites.
Why are they bad you may ask?
It has to do with the way end users approach your experience and assuming they have Silverlight in place, it’s important that you give the end users some clues as to what they are loading and what is the likely time or more to the point is this going to take forever? Impatience is a virtue all users have so its going to be very hit or miss depending on what the context of your application expected usage is and lastly the end users broadband connection and tolerance for plug-in experiences in general (I counted like 5 variables of failure that can occur per user when I did some research on this back at Microsoft). The rotating balls don’t offer much value, there’s nothing to keep you entertained or interested in the experience other than balls rotating and some % of where I'm at.

Soliciting the end users.

Just like a hooker, your job is to entice the person before you to take faith in the hopeful reality that this will be an experience to remember (ok that analogy just took a nose dive in very bad way). Your job is to firstly convince the end user to install Silverlight should it not be in place and secondly and just as importantly your job is to convince the end user that sticking around is also equally important SHOULD they have the installation in place of Silverlight. You first need to have inside your webpage “You don’t have Silverlight, go get it and here’s what you will get in return” vs the dreaded “Get Silverlight” medallion.
To illustrate this importance; when I was at Microsoft we noticed on Microsoft properties an increase in installation of Silverlight when we actively went out of our way to solicit end users to Install vs the default “Get Silverlight” medallion – information is power, users want power just as much as the next person, power of choice.
Once they jump through that hurdle, you need to again keep their attention on you and try and convince them to avoid the temptation of alt-tabing and twittering etc while they wait – think of all end users as a 3 year old child's attention span and you will be better positioned for success here. You need to create a preloading experience that is as helpful and joyful as the intended experience you’ve just spent $thousands of dollars creating (why drop the ball at the last yard! – for you NFL fans) In this you create something that is part of the theme or take a page out of MAXIS Games where you insert random crap that’s quite funny – example:
“…Initializing launch codes for anti-nuclear attack" ”…Growing Llamas feet so it can walk…” ”…Handing a Monkey a nail gun for entertainment value..”
Keep them informed but not too informed as you want to balance out keeping them informed whilst not making them aware of “time” as that is the enemy, “time”. I’ve even lied once due to a latency hit that I couldn’t avoid, so I put in the initializing splash screen “Checking Security Credentials”  (Given I found end users were more likely to wait for a serious thing like Security to validate vs.. staring at rotating balls of stupidity). That all aside, this is the “Why” both Preloading/Splash Screens and Install Templates are critical for SIlverlight’s future success as this in turn is what end users judge the technology on (Do i need to bring up the “Skip Intro” debacle of the early 2000’s where Flash Intros were all the rage and bad bad experiences with Flash occurred as a result).

First: Install Templates.

Imagine if you will, you new-up a Silverlight Project. You’re asked obviously what type of project you require and then in the next step it prompts you with the below: image You then choose your Install Template and it can be both an Online or Local template (more on Silverlight Marketplace potential later). Once you select the template, this then will take a vanilla themed experience and injects in into your MySilverlightProject.BooStrapper project. You as a developer and/or designer can then focus on swapping out these assets and messaging to suite your intended experience context for your brand etc (much like the larger brands have done with Silverlight today – e.g. MSNBC etc).

Second: Preloaders/Splash Screens.

Same approach as the Install Templates, except it automatically attaches the intended original Silverlight project you wanted as being the “First” to load (but with enough breadcrumbs in code that you can also swap this out should you choose to). image Once you have gone through these three templates, your solution should have 3 projects in place.
  • Project1 – MyProject.Silverlight.BootStrapper This project’s job is to handle the preloading of Project2, as in order to preload you first have to have a project that is very small in size for Silverlight to load, then once it’s loaded, Silverlight can then automatically bring down the .XAP file (secondary but main project) in a more controlled and aesthetically pleasing manner.
  • Project2 – MyProject.Silverlight This is the project you originally intended to use, exact same structure(s) as you have today in Silverlight.
  • Project3 – MyProject.Silverlight.WebThis is the project which is in place today in terms of automatically generating the said ASP.NET / HTML project code you need to test with. Except, it also injects a bunch of files/scripts which handle the “Does the end user have Silverlight?" which then based on a Boolean result reacts and produces a prompt that goes beyond the “Get Silverlight” medallion.

The Marketplace.

Ok, you can technically write a VS Template or WPF/WinForms app today do the above without having to bug Microsoft (i’ve started and stopped 3 times – stopping only due to boredom or busy). Why this needs to come from Microsoft is simply put – Marketplace. We should have a concept where we can buy/sell Themes, Behaviors, Preloaders and Install Templates etc from one another whether it be by cash, XBOX Live Points or whatever currency you want to barter with. Point is, we should foster more of an exchange based community that is more consolidated and branded under a single point of entry for both Silverlight and Expression (say NO to Expression and Silverlight/WPF segregation– designer / developers need to cross-pollinate). I’d love to see a similar concept as preloaders.net and scalenine.com for the Silverlight community only less fragmented and one that has a much smoother tooling integration experience (I’ll come back and work at Microsoft if need be to make this happen).

Summary.

I’d like to see us as a community leap frog the Flash community in terms of handling these two experiences. As the below illustration highlights the fatigue gates associated with any plug-in experience. image Why leap frog Flash? it’s nothing to do with their community it has to do with “learning from their mistakes” as at the moment Flash folks have figured this out and have a bunch of strategies (whilst fragmented) in place to fix this broken situation. We on the other hand are like the retarded step-child twice removed when it comes to picking up on this, and it erks…ERKS..me (for I am ERKED) to see the rotating splash balls and Get Silverlight Medallion – which incidentally were just a placeholder animations and images that someone forgot to come back and replace. We fix this we drive Silverlight installation experiences up by minimum 20% per month, I guarantee you that much. As it will lesson majority friction associated with Silverlight and drive a much more deeper awareness of the product amongst consumers who aren’t reading the blogsphere for “What is Silverlight?” The “What Is Silverlight” is still a question being asked a lot today. It’s one thing to answer that, but it’s another to attach friction to and users experience of the said product once they’ve found a satisfactory answer to that question with bad preloading/installation experiences – OUTSIDE – of Silverlight today. This is both a Microsoft and Community problem that needs immediate resolution. Call to Action: Contact Microsoft and hammer away at this issue, get more of a community groundswell behind it so that we can all move forward. I remember inside the team, community reaction was one thing we often would use to trigger emails with one another on why change is important. Vote here so this can be escalated to the Silverlight Feature planning team! - : http://dotnet.uservoice.com/forums/4325-silverlight-feature-suggestions/suggestions/632735-silverlight-installation-and-preloader-experience-

Related Posts:

Context and Experience Matters.

Hold your hats folks, I’m about to praise Adobe and yes I’m now a confused UX soul as a result of it.

What has got me all hot and bothered in the right way about Adobe, is the Adobe.TV site, as for me it just brought something to life in which I was often quite vocal internally in Microsoft about – contextual synchronization.

In fact, you can see the very deck I used a few years ago on the said subject and it was mainly focused at how stupid and silly Microsoft is with its constant “File->New” website approach. I not only was vocal internally but external as well – recently as last year being picked up by other sites such as Slashdot.org, Tim Andersons Blog  and InfoQ on the very subject.

(Note: Download the deck for full effect here)

 

Adobe have designed the concept where it appears folks who sign in are able to have the content react to their needs vs the end user reacting to Adobe’s needs. As a result, I think this will provide more signal vs noise to consumers of the content (hopefully) but the main thing for future planning around content is that I think it will put Adobe in a better position to see what areas they need to focus on the most. I say this as every time you the end user narrows your selection down,  you are essentially voting with your fingers on the said selection.

image

I like this as they have broken the self-selection down into not just categories but also have managed to involve other filtering mechanisms such as “what others say” (ie Most Viewed, Highest Rated etc)

I have dreamt about this concept for quite some time and I hope that the Microsoft various website owners are paying close attention to it.

Why is this a good idea?

Firstly, when you onboard to any technology you face a multitude of challenges most of which is confidence. You need to have this sense of “easiness” associated to a new technology you are about to adopt, so it’s important that you’re not in hunt mode but more browse mode as fast as possible.

Once you are able to overcome confidence issues relating to the technology, you also need to keep focused on advancing along the adoption curve, as you want to build a better tomorrow as fast as you humanly can, but deep down you still want to keep cheating, by skipping over things you probably should pay attention to.

Skipping is important but at some point you will need to go back and and absorb the parts you just skipped, so you kind of need a way point mechanism in the way content is presented to you. In Adobe.TV case you can filter out the irrelevant areas that don’t appeal to you – YET. Tomorrow though you can pick this back up and run with it should you choose to, keyword being choice.

I call this contextual synchronization as the content is synchronized to your contextual needs.

Microsoft has a terrible footprint regarding content of this type, as if you were to look at Silverlight for example there are 4 sites all competition for your attention and that’s just for Silverlight. If You’re a .NET developer your world increasingly gets more and more complex and its hard to parse the information from each individual site, given it’s mostly narrative content and less about serving a contextual need. The ones that don’t focus on narrative are more along the lines of projecting information at you and less working with you and more to the point, there’s no instant reward/recognition approach to learning.

This is important with regards to confidence as if you get a sense of accomplishment for taking the time to adopt or learn something there in turn needs to be a mechanism in place that provides that visual feedback “Good job, keep going” mentality.

Adobe.TV doesn’t have this, but you could easily build on from here? you could add badges or rewards to the context above by outlining that the person is moving along nicely and here’s a T-shirt or something cheap and meaningful to show recognition to the end user for doing a great job at sticking it out.

One day I hope that my vision would come to life, but inside Microsoft there is such a de-centralized approach to the site ownership problem that it would take an act of Executive order to change this – even then it would likely take a few years to filter out externally.

Tim Anderson, a well known IT Journalist who gets paid to navigate the web soup such as Microsoft.com, stated this:

I use “web sites” in the plural because there are many Microsoft web sites. Perhaps there should be one; but as the referenced study observes, there are numerous different designs. There are different domains too, such as Silverlight.net, ASP.Netand so on.

Take my experience this morning for example. My question: how many processors are supported by Windows Small Business Server 2008? My Google search got me to here, an overview showing the two editions, Standard and Premium. I clicked Compare Features and got to here, which says I have to visit the Server 2008 web site to find out more about the “Server 2008 product technologies”. I click the link, and now I am looking at info on Server 2008 R2 – only I know already that SBS is based on the original Server 2008, not the R2 version. It’s not clear where to go next, other than back to Google.

The prosecution rests your honour.

Related Posts: