When I first came to the Microsoft community in 2007, I was amazed at how many experts there were covering a breadth of its products. Being from an Adobe/Java community originally we simply had a lot less vocal experts floating about and the ones that were regarded as experts, well they were easily identified through their work. To be fair, that’s really a personal issue as in the end if you assume the blog in front of you is an expert without studying their background or body of work, well, you’re the idiot not everyone else? True. Yet, I see this weird thing happening within the same Community today, that is to say I am reading more and more opinion pieces on Microsoft’s vision of Metro-Design. That is to say, there is quite a lot of blogging echo’s on Metro Design being the way forward, there are quite a lot of folks suddenly taking an interest in Dieter Bram’s 10 principles of design, History lessons on Bauhaus, Transport Signage, Typography 101, Minimalism design for dummies and so on. This is great; the more people can read about these types of subjects the more they can get a sense of bearings around “why” and “what” but it isn’t a launch pad for “how”. The point is, unless these people have cracked open a design tool, sat down and grinded out some pixels for others to interact with and experience than all they are effectively is a digital sign post to the “why” or “what”. They really have no business telling folks on how things should be designed and more importantly how it’s going be an important component in our future. It comes back to being authentic in your opinion or for that matter telling someone about your own personal experiences on why the subject matter such as metro is or isn’t important. You’ve tried your hand at the craft; therefore you’re the one who has something to learn. If all you have done is sat beside a designer who did the work, read Microsoft’s PR/Marketing around Metro and figured this is a great way to launch your conference circuit/blog views in terms of preaching the mindless dribble that often is told over and over – then you’re frankly an idiot. Developers aren’t designers; they are simply people who like design. That statement for me is important as it simply means unless you try your hand at design, you’re not a designer, and you’re the other person in that equation who likes design. The moment you try and fail at design you have earned the right to talk about design, as now you have skin in the game. To future metro design bloggers, less talk more pixels.  

Related Posts:

  • No Related Posts
Posted in Uncategorized

Decoding the use of grey in Visual Studio vNext

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

On the choice of grey.

Grey is a color that I have used often in my UI’s and I have no issue with going 100% monochrome grey provided you could layer in depth. The thing about grey is that if it has to flat and left in a minimalist state it often will not work for situations where there is what I call “feature density.” If you approach it from a pure Metro minimalist approach, then it can still work but you need to calibrate your contrast(s) to accommodate the end users ability to hunt and gather for tasks. That is to say this is where Gestalt Laws of Perceptual Organization comes into play. The main “law” that one would pay attention to the most is the “Law of Continuity” - The mind continues visual, auditory, and kinetic pattern. This law in its basic form is the process in which the brain decodes a bunch of patterns in full view and begins to assign inference to what it perceives as being the flow of design. That is to say, if you designed a data grid of numeric values that are right aligned, no borders then the fact the text becomes right aligned is what the brain perceives as being a column. That law itself hints that at face value we as humans rely quite heavily on pattern recognition, we are constantly streaming in data on what we see; making snap judgment calls on where the similarities occur and more importantly how information is grouped or placed. When you go limited shades of grey and you remove the sense of depth, you’re basically sending a scrambled message to the brain around where the grouping stops and starts, what form of continuity is still in place (is the UI composition unbroken and has a consistent experience in the way it tracks for information?) It’s not that grey is bad, but one thing I have learnt when dealing with shallow color palettes is that when you do go down the path of flat minimalist design you need to rely quite heavily on at times with a secondary offsetting or complimentary color. If you don’t then its effectively taking your UI, changing it to greyscale and declaring done. It is not that simple, color can often feed into the other law with Gestalts bag of psychology 101, that is to say law of similarity can often be your ally when it comes to color selection. The involvement of color can often leading the user into being tricked into how data despite its density can be easily grouped based on the context that a pattern of similarity immediately sticks out. Subtle things like vertical borders separating menus would indicate that the grouping both left and right of this border are what indicates, “These things are similar.” Using the color red in a financial tabular summary also indicates this case as they are immediately stand out elements that dictate “these things are similar” given red indicates a negative value – arguably this is a bit of digital skeuomorphs at work (given red pens were used pre-digital world by account ledgers to indicate bad).

Ok I will never use flat grey again.

No, I’m not saying that flat grey shades are bad, what I am saying is that the way in which the Visual Studio team have executed this design is to be openly honest, lazy. It’s pretty much a case of taking the existing UI, cherry picking the parts they liked about the Metro design principles and then declaring done. Sure they took a survey and found responded were not affected by the choice of grey, but anyone who’s been in the UX business for more than 5mins will tell you that initial reactions are false positives. I call this the 10-second wow effect, in that if you get a respondent to rate a UI within the first 10seconds of seeing it, they will majority of the time score quite high. If you then ask the same respondents 10days, 10months, or a year from the initial question, the scores would most likely decline dramatically from the initial scoring – habitual usage and prolonged use will determine success.

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

Using flat grey in this case simply is not executed as well as it could be, simply because they have not added depth to the composition. I know, gradients equal non-metro right. Wrong, metro design principles call for a minimalist approach now while Microsoft has executed on those principles with a consistent flat experience (content first marketing) they however are not correct in saying that gradients are not authentically digital. Gradients are in place because they help us determine depth and color saturation levels within a digital composition that is to say they trick you into a digital skeumorphism, which is a good thing. Even though the UI is technically 2D they do give off a false signal that things are in fact 3D? which if you’ve spent enough time using GPS UI’s you’ll soon realize that we adore our given inbuilt depth perception engine. Flattening out the UI in the typical metro-style UI’s work because they are dealing with the reality that data’s density has been removed that is to say they take on more of a minimalist design that has a high amount of energy and focus on breaking data down into quite a large code diet. Microsoft has yet to come out with UI that handles large amounts of data and there is a reason they are not forthcoming with this as they themselves are still working through that problem. They have probably broken the first rule of digital design – they are bending their design visions to the principles and less on the principles evolving and guiding the design.

Examples of Grey working.

Here are some examples of a predominately grey palette being effective, that is to say Adobe have done quite well in their latest round of product design especially in the way they have balanced a minimalist design whilst still adhering to visual depth perception based needs (gradients). image image Everything inside this UI is grouped as you would arguably expect it to be, the spacing is in place, and there is not a sense of crowding or abuse of colors. Gradients are not hard, they are very subtle in their use of light, or dark even though they appear to have different shades of grey, they are in fact the same color throughout. Grey can be a deceiving color given I think it has to do with its natural state, but looking at this brain game from National Geographic, ask yourself the question “Is there two shades of grey here?” image The answer is no, the dark & light tips give you the illusion of difference in grey but what actually is also tricking the eye is the use of colors and a consistent horizon line.

Summary.

I disagree with the execution of this new look, I think they’ve taken a lazy approach to the design and to be fair, they aren’t really investing in improving the tool this release as they are highly most likely moving all investments into keeping up with Windows 8 release schedules. The design given to us is a quick cheap tactic to provoke the illusion of change given I am guessing the next release of Visual Studio will not have much of an exciting set of feature(s). The next release is likely to either be a massive service pack with a price tag (same tactic used with Windows7 vs. Windows Vista – under the hood things got tidied up, but really you were paying for a service pack + better UI) or a radical overhaul (I highly doubt). Grey is a fine color to go full retard on (Tropic Thunder Quote) but only if you can balance the composition to adhere to a whole bunch of laws out there that aren’t just isolated to Gestalt psychology 101 but there is hours of reading in HCI circles around how humans unpick patterns. Flattening out Icons to be a solid color isn’t also a great idea either, as we tend to rely on shape outlines to give us visual cues as to how what the meaning of objects are and by at times. Redesigning the shape or flattening out the shape if done poorly can only add friction or enforce a new round of learning / comprehension and some of the choices being made is probably unnecessary? (Icons are always this thing of guess-to-mation so I can’t fault this choice to harshly given in my years of doing this it’s very hit/miss – i.e. 3.5” inch disk represents save in UI, yet my kids today wouldn’t even have a clue what a floppy disk is? …it’s still there though!). I’m not keen to just sit on my ivory throne and kick the crap out of the Visual Studio team for trying something new, I like this team and it actually pains me to decode their work. I instead am keen to see this conversation continue with them, I want them to keep experimenting and putting UI like this out there, as to me this tool can do a lot more than it does today. Discouraging them from trying and failing is in my view suffocating our potential but they also have to be open to new ideas and energy around this space as well (so I’d urge them to broker a better relationship with the community around design). Going forward, I have started to type quite a long essay on how I would re-imagine Visual Studio 2011 (I am ignoring DevDev’s efforts to rebrand it VS11, you started the 20XX you are now going to finish it – marketing fail) and have sketched out some ideas. I’ll post more on this later this week as I really want to craft this post more carefully than this one.

Related Posts:

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

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

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

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

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

image

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

re-imagining or re-engineering the problem?

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

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

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

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

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

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

 

Back to the Fantasy UI for Inspiration

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

imageimageimage

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

image

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

In short, I notice context over and over.

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

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

Crazy huh?

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

image

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

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

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

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

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

Related Posts:

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:

RIAGENIC is a UX/UI Business.

It’s been a couple of months now since I went full time into focusing on growing a UI/UX business for myself. I thought I'd share my thoughts / notes and adventures along the way so far in the whole Microsoft UX/UI space as a freelancer.

Which are you? a developer or designer?

image How far we have come and yet how so little we have learnt! As someone who worked in/with the Silverlight/Expression teams to make sure the message that Microsoft has entered the UX space and that we’re essentially building a mutated Developer meets Designer and vice versa pixel ninja type person, the reality is people still need to put you into a category. I often find myself torn between which side of that fence line I sit. As to be blunt i can do both, I know every single API inside Silverlight/WPF like the back of my hand, I can code in 9 languages outside of .NET and aren’t script kiddy languages either. I can do 3D and 2D design to the point where many have commented on my abilities here as being “eye for design” or “you are freakish good” but still i’m tormented by having to pigeonhole myself either category. The reality is people aren’t ready to accept the person who can do both just yet and it takes a lot of proof to build trust that you can do both. I’ll let you know how I go with this journey over time but for now suffice to say, its new territory for me and yet still profitable as I can easily pick left or right and just swim in either pool where needed.

I need a UX guy urgently.

image I've seen this a lot in the past 8 months. I get called in at the last sprint or towards the end of a project and find myself having to triage features vs design vs engineering constraints. It’s the worst time to engage a UX/UI person(s) as in the end you’re asking for a Hail Marry - “can you make this UI look good and functional oh and don’t change the code base in the process?” is a common brief. The trick I’ve learnt is that I can do it, it just takes a lot more patience and focus –, and you really need to know every single backdoor into Blend as well as the Silverlight/WPF API’s. IT is a challenge but can be a success   if there is enough time  and the communication is clear and expectations are set properly. The bottom line is folks – Engage early and often. Even if its just 1 or 2hrs of their time per week or day, make sure you have someone in the room who bleeds UI/UX from the beginning of the project. Don’t engage late as the price will go up you won’t be able to salvage as much as you think by then  it’s not a UX consultation its just a pixel polish.

I don’t use Blend, just Visual Studio.

image You are breaking my design heart when you say this to me. Everybody right now who reads this open up Blend and pick a fight with it. If you take the time to get to know it and get to know it well, then when used right can help you out enormously with both Silverlight and WPF development. If you’re a person who likes to indent and keep their XAML neat, stop right now, you are trying to skate up hill. XAML is not meant to be a hands-on language. It's a common data format created to allow Design and Code tools to work against the same model without giving up their inherent capabilities. If you are editing it by hand just stop as you are not doing it right.

Pick a color any color.

The amount of times I've walked into an engagement and seen a rainbow of colors in the UI has left me thinking that it’s not so much a lack of will power around design it’s more the reality that not everyone is up to speed with color theory (there is a science to color selection). The easiest tip I give people is this. Typically a brand has one or two colors that are used the majority of the time,  then they  will use white or black for the majority of the content depending on the background composition (white for dark, and black for light). When you design a User Interface for your next Silverlight/WPF project, pick one or two colors and create a ResourceDictionary called [ThemeName]Colors. ColorePalette Then take that color and break into four shades (2x dark, darker and 2x light, lighter). Now then select what I call your chrome colors, these are the colors you would use for the outer chrome of your UI, in windows its typically around 4x shades of gray (light, lighter, dark, darker) and label them accordingly (i.e. chrmeAccent1, chrmeAccent2) etc. Keep your color naming conventions abstract (use camel or Pascal case – whatever lights your design candle). Now don’t use any more colors. Lock that in and use these. Don’t deviate at all from this plan unless you have a designer person in the room who is held responsible for retaining the product/projects brand. Lastly and this is the most important thing I can say to developers world wide:- Don’t use bold colors. Stick to pastel or light colors as you’re typically not ready for the hurdles that bold colors can throw at you. In saying this I did also notice that the MetroTheme that Microsoft has put into play has me a little nervous as it relies heavily on bold color scheming – which is great and cheap way of avoiding depth in a UI but at the same time creates a potential color scheming hazard around highlights vs lowlights and focal areas of your GUI composition. Typography is also another concern of mine as too much reliance of ye olde text can put UI two steps back instead of forward – people don’t like to read in general, visuals often handle the workload – review the many articles available on "extraneous cognitive load" for proof of this.

MVVM that is all.

image I get that some of you want to get gung-ho with PRISM, MEF or your own framework. Bottom line is this, if you’re starting out and haven’t figured out the tricks and hacks just yet of WPF/Silverlight then you are better off  sticking to  simple MVVM. It handles 90% of your workload and doesn't require you to learn  WPF/Silverlight and an extra layer of complexity at the same time. Keep it simple, work to the idea that the code you write in the first year of WPF/Silverlight is code you will want to throw away or refactor later on. It’s natural you write bad code or work onto something that a year later you'll look back on and proudly say “What was i thinking”. You've got your Microsoft UX training wheels on, embrace this openly and you’ll do just fine. Walk into a room and pretend you have it all under control and you’ll fold eventually as you can’t credibly hold that facade for too much longer. If you can also check out AutoFac as well, this again will compliment your codebase nicely. MEF/PRISM are really for folks who have a team of engineers and are looking to build a complex mammoth size system – that’s the reality even if Microsoft try to deliver a different message  – I'm an ex Microsoft Product Manager so I can spin with the best of them 🙂 hehe.

UI and UX are two different things.

image I need to say this out loud. If you ask someone to do UI, then they will do just that; focus on designing a user interface for an existing concept. If you need someone to wireframe and help you figure out how the whole user interface can be built, that’s where a UX person comes in. They are two different work streams just like a developer and a DBA are different. You can find people who do both, but keep that in mind.

Oh, I need someone local.

Yes, having someone onsite is definitely a goal a team should always be on the hunt for. SCRUM teams etc benefit from this and it doesn’t need to be evangelized further. I will say however though, having someone working remotely can be just as effective especially a guy like me in Australia. I say this, as at the moment I’m working on a project with Microsoft and it’s working out in our favor as while they sleep I work, while they work I sleep and we’re able to have a show & tell (i.e. remote stand-up) with one another where the design and development work can meet in the middle actually pretty well. As I’m able to say “ok here’s what I’ve done for you, its in your inbox when you wake up” and in the afternoons they’re able to go “ok, here’s what I need for you to start my day tomorrow” and so the cycle is a 24hr development run that works quite well. It’s not for everyone but so far I've found  it works without any issues other than an expensive mobile/cell bill from my end lol.

Show me some of your work?

There’s a reason why painters and builders never work on their own house – same goes for me. This blog as weak as it looks is still the  front door  for my company – RIAGENIC. I need to get off my ass this month and put my site up but the problem I have is distilling what I do into a webpage that makes sense as I’m my worst client (picky, arrogant and will agonize over every pixel and paragraph in the site). I also need to find  a way to promote me but at the same time associate myself with a brand, so that for me is a tricky marketing hurdle. I’ll soon see if I can pull it off! 🙂

Find people you can trust and don’t have to babysit.

image I’ve worked with a lot of developers in my time, nothing annoys me more than baby sitting incompetence. I’m fine with newbies learning the ropes, that I find far more rewarding as you’re working with someone who has passion and a determination to learn. It’s the people who are lazy and expect you to spoon feed them every 5mins on “how”. I didn’t learn Cinema4D by sitting next to a 3D wizard and ask “Ok so how do I write an xpresso script that makes the wheels rotate per frame”, I sat on Google and the objective was this “Find how to make wheels rotate in xpresso” and eventually I found it. Along the way I learnt a lot about Cinema4D and Xpresso as i was hunting for my answers. If you work with me, I will set the benchmark high per person I meet, I will quickly assess your skill set and then raise the bar to challenge you to meet it as I do want to work with people who get it and are smart at what they do. That being said, I love nothing more than coming into a cubicle of developers and feeling like I'm the newbie in the room as now I’m in learning from others mode. At the moment I’m working with Joseph Cooney (one of WPF’s first MVP and of learnwpf.com fame). I’m learning heaps from interacting with this guy, and its a fun project at the moment we are on. I don’t have to babysit him and he doesn’t have to babysit me. We just looked at the specifications, agreed on a solution structure and boom, were’ off grinding pixels and code. The next job I go to where they need a WPF/Silverlight dev etc, Joseph is one i’d recommend – again, its about networking and building relationships and finding people who you can trust and work alongside.

Reputation is a false economy.

image I often hear how folks worry over their reputation. I’ve watched people spend way to much time either building or recovering it from a bad project etc. The simple truth to this from what I’ve learnt is that if you know your work, you approach things with openly and honesty and don’t dump and run as well as admit mistakes, you’ll come out fine. Just focus on doing good work, reputation has a habit of following and self regulating itself over time. At times people I've heard bad things about on a project often aren’t the ones at fault as  the recruiter / business development sales person didn’t set expectations appropriately or the project was a train wreck well before this person arrived and they were the last ones to hold the steering wheel as it went off the road.

Agile/SCRUM is not a religion.

I’ve seen a lot of developers follow this concept by the book to the point where I often wonder if they are conscious of how badly they have gotten. The correct way and the natural way are two different things and in the end communication is the core piece to this. Stop arguing over protocol and just focus on establishing a clear line of communication and work on getting estimations as close as you can while at the same time admitting to your fellow team mates the moment you can’t do something or are over on your estimate – just put up your hand and say a simple word - “help”. I personally work under the assumption I'm the dumbest guy in the room, it keeps me calibrated and if you work with me and think “geez i thought that guy knew all of this” that's fine, but i probably do, but i’ll ask anyway just to make sure. I’ve felt the wrath of a false hero before, and I ended up having to do his work and mine at the same time only to be burnt for it later on. I could of thrown this person under a bus and said “well actually it was his fault” but in reality, I just absorbed the blame and avoided working with this person since. That is all.

Note: I am a UX/UI Ninja for hire.

Contact me at scott at this domain.

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:

Future UX showreels.

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

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

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

(1) First

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

Coleran Reel 2008.06 HD from Mark Coleran on Vimeo.

(2) Second

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

(3) Third

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

(4) Fourth

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

(5) Fifth

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

Mag+ from Bonnier on Vimeo.

 

(6) Sixth

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

(7) Seventh

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

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

(8) Eighth.

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

(9) Ninth

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

Related Posts:

Posted in Uncategorized | Tagged ,

Can you mix UX with Agile?

I’ve not decided yes or no on that question, I’ve read a lot in the past few months on the topic and I’m still not convinced or swayed either way.

Here’s my open transparent written exploration of how I am navigating this concept.

UX Design vs UI Design.

image

Its important to split a hair on this one, UI Designer in my definition is someone who can work on the aesthetics of a component whilst a UX Designer is the one who contemplates how that component is to be used by humans (I could go much deeper in this topic but another blog post for another day?)

I state this concept out loud, as when I read success on how UX + Agile came together in XYZ team, I often question what they are measuring success in terms of UX and more to the point what disciplines were in the room and what were the problems being solved. I’ve not read a lot about how the sausage was made, its more “trust me, UX + Agile works” belief system which to me is simply not scientific enough to subscribe to. I need proof of life.

The UX Scouting Model.

image

There’s a number of articles written on this, but for me I call it the UX Scouting model, whereby you have a set of effort that works ahead of a sprint, its the type of work that solves the problems of UX before the engineers arrive at a point in time to start assembling.

On paper, this seems like a reasonable approach to the problem of dealing with iterative design, and I’m inclined to believe this is probably the only model I can think of that will yield a successful shipping cycle. Having said that, i think this kind of model is more suited towards a validation / mentoring of UX model than an UX problem solving exercise.

What do i mean?

I put it to all that what is occurring is a reactive iteration occurring on the software whereby you’re taking a slice of the feature catalogue and reacting to how it injects itself both technically and visually into place. This is where I think the failure points occur, as its where a seasoned UX Designer shows his/her skill set the most. The ability to foresee what’s next beyond the current iterations (ie sprint) and are also trying to forecast the next few moves ahead (heh maybe a good interview technique for a UX expert is to play chess with them).

Having this foresight is in my opinion a very rare amount of talent to have, and once that person(s) have this, getting them to also negotiate with both stakeholders and engineers on such direction could also reduce the skill pool down even further. It doesn’t stop there, as at times the engineering side of the fence line aren’t open to adjustments in thinking, as it means more time/cost to them and the project. It’s then you face the compromise concern, as once that card gets thrown into the room, its easy to bias the stakeholders or owners of the said software to side with an efficient release over an effective one.

It’s how a lot of software ends up with a degree of “false affordance” – meaning, you get packets of the software where it has a perceived level of functionality that does what it’s expected to do, but in the end it either goes un-used or un-noticed or even more so, it’s sole purpose is to placate the end user and stake holders into believing the problem was solved.

Let’s get it right next time?image

Historically, Microsoft as a company has always duke it out over the battle between function vs form, and all to often function has won out in the end – despite the highly paid talent of UX leads being in the room. The stark reality is that time/cost are a factor one cannot simply deny, and its essentially what makes UX + Agile an attractive proposition, as it means get it done, get it done early and you can always get it right in the next release.

Microsoft typically takes three shipping cycles to get it right, when I say right, I mean “good enough” which in many ways is the ready, fire, aim approach. Apple at times seem to approach the equation from a ready, aim, fire model.

They don’t always get it right, but the amount of “luck” Apple have had with their product lines over the years, can lend itself to the concept that maybe they are siding with Form over Function every time. The company presents itself as being more about the industrial design of the solutions vs the good enough approach and it probably is why they often lead with a linear model of development + release.

Does UX + Agile work inside Apple? I don’t know, I can speculate that probably it doesn’t and that the engineering side of things makes way for UX – ie Function follows Form.

Back to the point, UX + Agile is sometimes hidden under the covers of evolution, whereby the said persons can run parallel or ahead of the said development teams and are able to react according to the growth of the said feature(s). However, when the time comes for a UX refactor, does it not get pushed aside into the next major release cycle with an open promise to get it right then.

If that does occur, then is that cycle dedicated to UX refactor in its purist sense? or is it just the same rinse/repeat formula whereby you have an iterative situation unfolding.

So, UX + Agile isn’t the answer?

image

I think the concept of Agile is fine, its the execution of it that I think is where the story kind of starts to fall a little to the way side, I think from a UX standpoint you really need to outline the features ahead but do so in a way that is suited to a ready, aim, fire model. It also needs to lend itself to a dedicated chunk of time purely to refactor the function of a solution to accommodate the consistency and goals of form. Having said that, that “Form” needs to be defined early and it needs to be framed in a way that everyone involved can subscribe to easily enough (heh, the joke is on the UX itself, as in order to sell everyone on the UX vision, they in turn need to ensure its palatable enough for them to recall, thus UX sells UX ..funny)

I’ve not decided as yet that UX + Agile is a formula that works, I can’t decide that just yet as I feel we in the software industry are back to pioneering mode. We settled on a rinse/repeat formula for so long that it started to breed mediocrity in the way software is designed, developed and deployed. Given the device market has created an interesting interruption in the way we approach mundane tasks, it in itself has elevated the B2C or B2B markets in a way that forces the ideation phase of software to take more risks.

The problem isn’t with the ideation being unwieldy or requiring strict time boxing, it’s simply we may have all forgotten to add the UX tax to the software builds – meaning, costs just increased.

Cost increases aren’t swallowed well, so the reality is what is likely occurring in UX + Agile teams is that there is more of a UI Designer validating and placating the said engineering side with “Good job, keep using DataGrids” mentality vs.. a UX Designer asking that folks think differently and outside the box.

On paper, agile is fine. In practice, well, grab your UX six shooter and lets ride off into the west and see what we find out next.

Related Posts:

FUI – Igniting the Fantasy User Interface spark.

 

Introduction

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

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

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

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

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

Getting Started

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

Carbon Motors E7

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

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

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

What should this UI look like?

The HUD

Let’s Design.

The assumption for the car is this:

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

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

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

Related Posts:

Posted in Uncategorized | Tagged

Controlling your Silverlight Installation Experience.

I’ve been doing plug-in development & design for many years, and often I've seen many a battle around this space. It typically starts with ubiquity, once that is overcome it then settles down at abandonment rates and from there the curse of the dreaded plug-in ends.

The reality however, no matter what plug-in you choose is that in actual fact ubiquity isn’t the sign of displeasure, it typically starts with how the entire package is presented to the end user.

Fatigue Point 1 – Do I want the full Experience?

image If you build a Silverlight experience for example, and all you put in place of the viewer whom doesn’t have Silverlight is the typical generic “Get Silverlight” medallion. This will basically be your first failure point  (depending on the power of word-of-mouth).

As put yourself in the end users shoes. I’ve arrived at a site, and it has nothing but a “Get Silverlight” button.

Well, what does that mean? and more to the point do I really want to go beyond the button? why..why should I get Silverlight!

Irrespective of what plug-in you choose to build with, this initial hurdle is not just solely related to the plug-in but more to the point around what it is you’re trying to entice the end user to actually experience.

Have you explained what it is you have to offer clearly? is there a sense of reward for them should they agree that getting Silverlight is worth it.


Fatigue Point 2-  Do I want to install?

image It’s easy to push away and declare ubiquity as being the sole reason as to why any plug-in fails or succeeds. It’s only 1/3 of the battle ahead, as there is more beyond the “Get Plug-in XYZ”.

For instance, Installing plug-in have become a tax we willingly pay each day online, often enough in your lifespan online you’ve most likely downloaded plug-in like Flash, QuickTime etc approx 8-9 times a year. All users online do it, so the old myth around folks being plug-in fatigued is actually not a reality at all.


Fatigue Point 3 – Do I want to stick around.

image The final but crucial point of fatigue is, well, do I actually want to stick around?

If you have a 5mb+ payload (ie .XAP file) the end user has to download and all they want is the first 100k, think about the tax you’re imposing on the end user.

Splash Screens are effective here, you want to keep the end user locked on the job at hand and re-assure them the experience is highly worth the wait.

It’s also important to note your mileage in terms of broadband access online will vary and despite the fact I’m sitting on a 30mbps cable link at home others aren’t on high speed broadband.

Have a read of this great article:

Summary.

image

Think about your end users pain, understand that ubiquity is definitely a hard psychological barrier to overcome, at times people put to much stock in the idea of what success here looks like. They also don’t pay attention to their abandonment rates as they should, and watching people drop off can mean many things (i.e. is your intended experience built for the right audience? I'd argue a RIA based blog isn’t appropriate, given HTML is simply just better suited – unless, you’re doing something more compelling than the HTML iteration has to offer).

We’ll explore more of this going forward soon, as we’ve got an upcoming announcement around this space. I just wanted to highlight early the notion that having a Silverlight experience for an external site has many fatigue points associated to it, and it’s something we should all take responsibility to ensure is enticing beyond the off the shelf default experience.

It’s not just solely about “do they have plug-in yes/no”.

We’ll continue to partner with OEM providers and grow Silverlight installs to reduce the ubiquity barrier of entry, however it’s still up to you to handle the rest, no matter what plug-in you adopt.

Related Posts: