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:

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

Your own Mulit-touch Surface Prototypeboard-thingy.

Today it hit me that a co-worker and I have been using a mini-whiteboard in a way that could easily be used as a way to prototype Surface style applications or ideas you may have.

IMG_0232 Let me explain, there is a partition between me and my co-worker which used to be a locker of some sort (no idea actually). It’s pretty high in terms of size and given its between the co-worker and I it’s kind of suddenly become our meet/greet tabletop.

On top of this partition is a mini-whiteboard that we have (approx 50cm wide and 50cm high) and it’s fast become our “hey got an idea for the UI” or “hey need some help with OOP composition” meeting point. We typically sketch out our problem/idea and then proceed to – yes you heard it first – communicate with one another on what’s possible etc.

We often call it the poor-mans Surface table as a joke, but in reality if i were to work on a Surface / iPad etc style application it’s this little whiteboard I'd love to have in the room. As I'm then able to sketch out the ideas and walk others through it via old skool pen + paper mode but at the same time can allow quicker iterations then “can you hand me that eraser” or “let me get another sheet of paper” ..

Anyway, thought I'd share this little eco-friendly prototyping tool for all to think about.

IMG_0233

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:

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:

Windows Mobile 7 the “meh” release.

Look, I’m going to be that guy that doesn’t give a 100% positive review on the newest Microsoft toy, and its not that I hate its existence in favour of the iPhone (I honestly couldn’t care either choice), its for me a little bit of a disappointment.

image

When I first saw the early specs of Windows Mobile 7 before I left Microsoft, i was little jaded with the whole level of commitment to the UX. As initially I'm thinking that this is just simply an extension to Zune, that the reality is it’s much cheaper and easier to take the existing work for Zune and bolt it onto the Windows Mobile OS. Problem solved move on, cheap, easy, effective and done.

There’s nothing wrong with this, but it for me is what I’d call a stabilize move and not a leap frog move. If the objective for the Windows Mobile 7 launch is to stabilize the bleeding, than the current iteration of the phone will do that and will do it in a way that will be declared a success. That is until the next generation of Apple comes off the assembly line and then the race is back on again.

The UX

image

I think the UX is flat and is often obvious that the team are to busy trying to “own” their own UI and less about meeting a base benchmark. What i mean by this, is that it appears that the UI is trying a little too hard to do the opposite of the iPhone, like it’s a challenge they need to rise up against. Examples like no Icons, panning up/down instead of left / right for content etc seems to pack a little too much anti-iPhone. You can argue “we did a lot of research and 1 in 5 housewives preferred up and down over left and right”, which is meh, as I’ve seen how easily it is to manipulate usability to suit ones messaging (been there, done that, got the t-shirt).

I think sprinkling the Zune and mini-XBOX into the device will definitely grab peoples attention as i truly think the market is hungry for NOT an iPhone, so Microsoft may very well appeal to the folks who are bored with the iPhone as being this years fashionable technology must-have gadget.

That is until iPhone 4 comes out, and again i think this will raise the bar once again for Microsoft to meet and can they deliver? I think given the plain UX for the phone today, I think they stand a much greater chance of reacting to market conditions in a way that has low impact on development times as there’s less complexity in the room due to the over use of simplicity in the device.

Danger is, you’re left holding the current incarnation of Windows Mobile 7 and looking at the next generation of iPhone and go “aggh..i want that”, as make no mistake devices are really energising the “shiny object” buyers in today's market.

For me, this is the Windows Vista launch, as after some code resets and downward pressure from above this is almost exactly the same internal conditions Windows Vista team had before their launch, “get it to market, get it fast and we’ll come back around for the bits we wanted to put in place”.

Apple are likely to react to this in a way that is going to be an interesting battle, as Apple is to iPhone as Windows is to Microsoft, so in a sense they are now fully engaged head to head with Microsoft once the device reaches the market.

Microsoft are playing hardball as well as you’ll most likely hear more about how Flash + Windows Mobile will play a role going forward and lastly they’ve yet to talk more deeply about how Silverlight 4 will play a role with the device as well (stay tuned for that, as this will get the developer propellers going).

In the end though, will this light up the soccer mums of tomorrow? probably, its new, it will be cheaper than the iPhone most likely and the Zune subscription model is quite palatable for the market. Zune Marketplace is where I think this device will live or die, if Microsoft gets the subscription model to work outside the US, then we’re in for a real threat to iTunes and iDevices world wide, as its definitely game on. The reason why Zune Market Place is a nicer approach is that its an appealing solution to Music/Movie piracy, as instead of people having to pay $$ for each individual song/movie etc, having a subscription model per month for all you can eat is less friction (especially for teenagers who can’t get access to credit cards)

Verdict.

I’d give the overall story an 7/10, I think the UX is weak and will face some challenges around usability, but overall the concept itself and how it ties in with other services from around the web is where it will most likely get its main momentum from.

Today, everyone is in the Microsoft “Zone” where its drink from the kool-aid, which is really an off signal response to a new products entry to the market. Two months from now, the reviews that are then talked about are the ones that are likely to stick and be consistent and they are truly the signal to the noise. This is where the Windows Mobile 7 team will need to bring their A-Game back and distil the message into  what’s coming next more so than what’s happened today.

Jokes aside, the UI still reminds me of Windows 3.11 where its very EGA 2D. is that good or bad? is it a design revolution where we kind of wind back the clock and go 80’s meets 2010, I don’t know. I do know I wanted more, I was hungry for more and i’m in a temper of a mood for not having my hunger satisfied.

image

Will I buy one?

Yup. As I’ll do it simply because I'm a Silverlight / Flash UX guy and would love to tinker with a device that supports these two. Once again, Microsoft the engineering culture comes through and user experience takes a backseat.

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 ,

DataGrids are the safety blanket for bad design.

I'm constantly in and out of meetings with developers who are making some pretty intense Silverlight based solutions. It's exciting and irritating at the same time to see them having all the fun in Silverlight and all I do is give advice etc on how to fix X or approach the product from Y lense.

One consistent theme I often see a lot is the over-use of DataGrids. DataGrids are being used pretty much majority of the time to present any if not all large amounts of data and it absolutely baffles me personally as to why developers keep gravitating towards them?

I say this, mainly as you're given a solution like Silverlight where its actually your job to simplify the end user's experience - yet the first chance some get, "Let's grab the ye olde DataGrid with sortable columns and snap it into place"

DataGrids have a very small niche of usage rights in my opinion when it comes towards User Experience. What I mean is, should you have a need to make your own Excel Spreadsheet, sure, I can see the need (sortable columns and all).

Otherwise, stop. Use ListBox's instead of DataGrids.

The difference between a ListBox and a DataGrid visually is obvious - DataGrid is multiple columns, ListBox is one. The major significant mindset adjustment for a ListBox is that it dares both the developer and end user to think about the problem being solved in that current piece of software.

An example that comes to mind and is quite common is Outlook 2007.

On the left you have a tree like situation, this is your first line of defence against dense data. It essentially forces you as an end user to think in terms of contextual categories regarding your email traffic.

The next column is typically a list of emails separated based on Date (Most commonly) but again, this is your second layer of defence regarding unnecessary dense data.

Last is the body of the email itself, basically this is your main end point "ahah, now i can get down to work".

I like to use this as one of many examples of how a DataGrid vs ListBox could go off the deep end. In this example you've provided the ability for the end user to both narrow their filtering (self-selection in the wild) and secondly you've addressed the overall problem in a way that isn't to restrictive or requires a lot of mental processing to parse for that email sent "last week".

It's concept also caters to both large and small data sets, as should you have an inbox like I did when I was at Microsoft, it was pretty much 1000's of emails a day.

Today I have smaller inbox (yay) but the problem getting access to emails from the past hasn't changed. In this approach to UI, i'm still able to sort/parse the said emails but should the data not yield an obvious "at first glance" hunt for that email of ages past, I can enter a search term - that or - sort the data on a more contextual level (narrowing down the data ).

Search is probably the area I use the most in Outlook as i'm often going "Oh crap, Sarah sent me an email last week, it had something to do with X customer..." I then type in "Sarah X Customer" and already my hunt is narrowed and the chase begins.

You can do the same with DataGrids, don't get me wrong. DataGrids however get quite busy and cumbersome once you go beyond 1 line of text. In that, we humans typically aren't happy to read horizontally - it has to do with the fact we prefer to parse things vertically than horizontally and especially on wide columns. It gives the impression that its "heavy or more work" vs vertical can give you more of a feeling of being "quick to parse" (Ever wonder why news papers do this?)

Bottom line is this. DataGrids should really be left to narrow specific areas of use, typically for fiscal data that has a lot of calculations to review - that or UI's that make use of 1 line of text much like Apple's email client does below.

Having said all of that, I still often see teams of folks praise the DataGrids that have heirachy's of sub-grids as a "better way" to represent the data. It can be quite frustrating to see this, but I simply take it on the chin, take a deep breathe and try and sway them to focusing on the said problem from a different angle where the mandate/objective is to simplify the density of the data.

Less is more when it comes to UI, parsing large amounts of information gets tedious and is more prone to human error than user interfaces that handle a lot of the heavy lifting for you.


Related Posts:

  • No Related Posts
Posted in Uncategorized