Network

Follow kosalanuwan on Twitter
View Kosala Nuwan Perera's profile on LinkedIn

MVVM – Model View ViewModel

That’s kinda weird acronym. And if you want to be very famous, you can use very catchy phases like

“Im going to do MVVM in a SLOOB with SLUT”

And there are some confusions around MVVM. Let me clarify things first,

  • MVVM is nothing but a Pattern. Its in WPF or SL tho you dont use it. For instance, the controllers you use are built with mini MVVM.
  • Also known as Presentational Model.
  • The rest of this things are Helpers, Practices etc.

Lets see some variations of similar patterns;

MVC Pattern

MVC Pattern

Model View Controller is probably the oldest pattern. May be since 1980s. This is still use widely, especially with ASP.NET MVC.

Passive View Pattern

Passive View Pattern

This is a variation of MVC pattern. The advantage that we see here is that the View is completely Passive. The controller has lot of responsibilities. Since the View is not reacting to anything you don’t need to test it. For me, that's a relief, coz, testing a View is very difficult and time consuming.

Presentation Model Pattern

Presentation Model Pattern

Another variation of Passive View Pattern is the Presentation Model. Here the Controller is replaced by Presentation Model and we can call this as a ViewModel.

Here the View is more active and pushing information to the Model. OK, so before this, we saw the goodness about the View being completely Passive. So the trick here is that the interactions is done via Data Binding.

When you have a Framework with Data Binding, for instance, WPF and SL, you really dont need to worry about View being active. This is built in the framework so you dont have to test it, coz Microsoft did that for you.

MVVM Pattern

So, what have we learned so far? Yes, Model, View, ViewModel and Bindings. Its not that complicated and thats MVVM, everything else, is Helpers around MVVM.

Lets talk about a bit on the helpers. They are nothing but Commands, and Messages. Its got nothing to do with MVVM. You can straight away use without MVVM Pattern.

MVVM Pattern with Helpers

Sometimes View might need to notify the ViewModel about something happened in the View, for example; a control being clicked. Its a good job for Commands.

1 ways is that we can use very basic Command Pattern implemented with ICommand interface. What I see as annoying is that I have too much code here. I have to have separate classes for each Command and pass in the ViewModel.

What breaks you application is code. So another way is to minimize the code and to get rid of these annoying Classes is to use the RelayCommand (sometimes it is called Delegate Command Pattern) Component inside your ViewModel.

The other directions is also good for sometimes, when a ViewModel can notify to the View when something happen. 1 way is to use Events, another good way is to use Messages. This is good, coz most of the time we end up with multiple ViewModels.

MVVM Pattern with Helpers 2

To notify the View, we can simply use Events. But with WPF and SL, we can get the advantage of Messenger Component and we can simple get rid of all the Events and Delegates.

You can express all your MVVM Feelings with the use of MVVM Light Tools V3. This is an open source MVVM very light Framework with 2 DLLs. It contains essentials such as RelayCommand, Messenger, and ViewModelBase components. Some extras such as EventToCommand which can be used to get rid of annoying WPF and SL Command binding limitations, and DispatcherHelper for multi-threaded applications.

Cons in MVVM

You have to write lot of code in MVVM.

  • You have to implement INotifyPropertyChanged interface on your ViewModel. You cannot use Automatic Properties. You have to expand my properties.
  • You can only use Command with limited controls basically Clickable controls. You cannot use this with any event you want.

Some operations such as Setting Focus on a UI element from the ViewModel coz the ViewModel doesnt know the View. We can use the code behind for these kinda operations.

You cannot use this pattern in other platforms such as ASP.NET etc. coz its highly use Bindings. You might be able to use this pattern in ASP.NET MVC but it will be a different kinda implementation than what we have in mind.

There are lotsa toolkits and frameworks which sometimes confuses since there are no formal guidance. Not even from Microsoft YET!

Some Myths about MVVM

“No code in the code behind.”

“If you have code in your View’s code behind, MVVM Police is going to take your family away.”

There is something called “Code Behind For a Reason”. But what I see the problems is that it is not that easy to test your Views if there are code in your code behind.

“No need for Converters.”

Sometimes you might need to use Converters, but I would say it is LESS use in MVVM.

“MVVM is only suitable for BIG projects.”

It is suitable in lot of cases that we can gain advantages of Data Binding.

“MVVM Costs Performance.”

Well, I would say Developer Performance since it requires some skills to understand the Patter and you have to do some additional coding such as Commands etc. But I think the Data Bindings are very optimized. You mileage may vary.

“MVVM is complex. Makes my head hurt”

Well, its nothing but a Pattern. The rest of the stuff are helpers and if your head hurts, it probably becoz of Last Night :)

“I dont need separation coz I dont have a designer.”

I think separation is about maintainability, and testability other than blend-ability.

“You cannot use MVVM with other patterns.”

Well, Why Not. You can use in a User Control with MVVM, and use this User Control in any other places.

“MVVM will make you rich and attractive.”

 

Stolen from Laurent Bugnion’s presentation, Understanding the MVVM Pattern.

More Information can be found on;

Codeplex, MVVM Light Toolkit
http://mvvmlight.codeplex.com/

Galasoft, Understanding the MVVM Light Application Sample
http://www.galasoft.ch/mvvm/sample1/index.html

Galasoft, Creating a new MVVM Light Application in Visual Studio
http://www.galasoft.ch/mvvm/creating/

MSDN Blog, Dan Crevier’s Blog MVVM Series
http://blogs.msdn.com/dancre/archive/tags/DM-V-VM/default.aspx

User Experience Design for Non-Designers

MIX09 User Experience Design for Non-Designers Workflow

Concept Ideation is something that happens right from the starting of the project, quickly iterate and develop a lot of ideas, very quick and very cheap. How do we do that.. thru by Sketching. The power of sketching is that everyone can do it. Sketching is almost as fast as you.

MIX09 User Experience Design for Non-Designers Concept Ideation

Once we have an idea of where we want to go, we move in to Interaction Design. take in one or two concepts and flush them out end to end. There are few ways to do this;

  • Site map/user paths
    MIX09 User Experience Design for Non-Designers InteractionDesign SiteMap
  • Application wireframes
    MIX09 User Experience Design for Non-Designers InteractionDesign AppWireframe
  • Interaction wireframes
    MIX09 User Experience Design for Non-Designers InteractionDesign IntWireframe

Once we have our wireframes, and we have our concept we like, we are happy with it and our users are happy with it, now we getting to the Visual Design phase. We build composites to show how the actual application looks when its finally ready and deployed in an environment.

MIX09 User Experience Design for Non-Designers Composites

We can pick and chose key wireframes where the visual design really effects, how users may interact, and how the visual design affects the emotions/feelings that the application gives you.

And finally, we step into Production where we stop iterating, the developer starts coding, and we starts producing assets, such as GUI produces images, animations, icons, sounds and so on.

MIX09 User Experience Design for Non-Designers Production

When we are done developing, and users starts interacting the application, we get into Polish phase, where we start to see things that we didn’t see earlier. This is something like the second phase of development.

MIX09 User Experience Design for Non-Designers Polish

The conclusion is that there are 3 things to remember;

  • Start designing if you have not.
  • Design early.
  • Iterate often since very rare we get it at the 1st time.

MIX09 User Experience Design for Non-Designers Design Iteration

Stolen from Shawn Konopinsky’s presentation, MIX09-C30M - User Experience Design for Non-Designers.

If you are looking to fail…

if you want to fail at creating good software:

image

  1. Do not understand the end user
  2. Trust developers to make good design decisions
  3. Hope for a silver bullet design
  4. Build for everyone
  5. Launch and forget
  6. Do not define success
  7. Avoid all conflicts
  8. Believe you shouldn’t have to sell your ideas
  9. Plan for perfection
  10. Value process over the product

If you are looking to fail, do not understand the end user. Everybody wants to understand the end user but where we see failures is, how do you turn this Idea/Methodology into Action. Nearly 70% of all IT Projects fail due to a lack of user acceptance. So the New Golden Rule for Software Development is Hyper Focus on the End User. Every other rule that you discuss will be subservient, and every other failure ultimately comes back to ignoring this rule.

If you are looking to fail, trust developers to make good design decisions. Its not just developers, its anybody who is not connected with end users. Developers are focused on the deadlines, and not what the end client goal. Developers are encouraged to make really bad design decisions. So trust in your designers. Your users DO NOT CARE if the application was Silverlight, AJAX, Flash, .NET … Don’t let politics and silos get in the way of great software. Educate your design team on the technical challenges you face and they will work with you and not against you. A good designer will help you understand the end user translate their needs into something actionable and when in doubt, ask your users.

If you are looking to fail, hope for a silver bullet design. A good agency want come in with the big (genius) idea. Sometimes the big idea is important and some projects require out of the box thinking. And sometimes, small changes are big such as $300 Million Button.

image

So trust in your users. Add the word “EMPATHY” into your job description, and put it into action by talking to your users. Be willing to throw out ideas based on user feedback and be careful not take your user’s feedback to literally. Do not focus on your portfolio, if the user “notices” the UI, you’ve failed.

If you are looking to fail, build for everyone. If you build for everybody, you wind up building for nobody. Why you should not use the iPhone as an example for design is simply you mostly likely are not lucky enuf to have the budget and time for innovation that apple does. It is easier to think people like icons or faceless symbols. You will result in thousands of features that try to accommodate every need. So focus your efforts. Add the word “EMPATHY” into your job description, and put it into action by talking to your users and define a maximum of 3 personas for a project, and then hyper focus on them.

If you are looking to fail, you launch and forget, and you focus on next shining object. Most software, when releasing version 1, its only half way done, and there is a lot of learning to do. So measure for improvement. Account future releases up front. Integrate customer a feedback mechanism in the software. User testing during development AND post launch. Monitor your success metrics.

If you are looking to fail, do not define success. Defining success can be challenging. Its just that stakeholders don’t know that they shouldn’t define success, its that they don’t know how. To define success, we do not discuss features or requirements. So we discuss benefits for instance;

Qualitative
Customers has the perception of a fast transaction.
Customers would recommend the software to a friend.
Experience must be brand consistent and trustworthy.

Quantitative
Reduce the time it takes to track a shipment by 20%.
Increase the leads by 50%.
Decrease the customer service calls by half.

There is a conflict between you and your customers. So you need to find the right balance between Business Value vs End User Value.

If you are looking to fail, avoid all conflicts. Conflict is good, there is no progress without conflict and harder the conflict, the more glorious the triumph. Everybody agreeing with each other means that somebody is not voicing their opinion and if you are not hearing it, play Devil’s advocate.

If you are looking to fail, believe you shouldn’t have to sell your ideas. To sell your ideas, understand the personalities involved on the project, and answer their objections and concerns before they bring them to you. List to your customers and ensure that your opinions align with theirs – then speak using your customer’s words (“this is what we heard our customers tell us…”. Be humbly passionate about your ideas and then Oversell – craft a pitch that will set the bar.

If you are looking to fail, plan for perfection.

“The first Matrix I designed was quite naturally perfect, it was a work of art - flawless, sublime. A triumph equaled only by its monumental failure…” – The Matrix Reloaded.

image

We see that in lot of companies, they look for the perfect project plan or for the perfect estimate that understands everything perfect. No matter how well you set up the perfection, it never works out, and if you look at the cone of uncertainty, you will see why waterfall and fix bidding projects rarely work out.

If you are looking to fail, value process over the product. This can also title as if you are looking to fail, take no risk. So the process diagrams are dime and dozen. It means nothing if you deliver a crappy product on time. Wouldn’t it be great if we could schedule good ideas? But people don’t think like this, you cannot solve all the problems in the project plan. Attempting to apply a strict process will not save you from this undeniable truth “software projects are predictably unpredictable”. People solve problems in unexpected ways, this is where good ideas come from…

Stolen from Anthony Franco’s presentation, MIX09-C06F - Ten Ways to Ensure RIA Failure. You can find the references from here;

Wordpress.com, Anthony’s blog
http://anthonyfranco.wordpress.com/

Wordpress.com, The 8 Criteria for Usable Software
http://anthonyfranco.wordpress.com/2009/02/14/the-8-criteria-for-usable-software/

UX Strategy, Why Design Matters
http://ux-strategy.com/2008/06/25/why-design-matters/

Apple.com, Guides
http://developer.apple.com/mac/library/navigation/index.html#topic=Guides&section=Resource+Types

User eXperience (UX) Guidelines

MIX09 Return on Experience - By Design

“Everything is best for something and worst for something else.
The trick is knowing for what, when, for whom, and why.” — Bill Buxton

Found some interesting resources on user experience, and user interface designing, during past few weeks. after goin thru all these I realized that most of our designs are crappy and there are much much .. and much more to think before getting into conclusions!!! :-(

MIX09, Day 1 keynote featuring Bill Buxton and Scott Guthrie, Return on experience – By design
http://mschannel9.vo.msecnd.net/o9/mix/09/wmv/key01.wmv

Infragistics, one of the best UI composers have published a Silverlight application compiled with all the UI patters with samples screenshots. You can surf thru the patters, search for a pattern and explore it!

Infragistics, Quince UI Patterns
http://quince.infragistics.com/#/Search

MSDN, Windows User Experience Interaction Guidelines
http://download.microsoft.com/download/e/1/9/e191fd8c-bce8-4dba-a9d5-2d4e3f3ec1d3/ux%20guide.pdf

MIX08, The Story of The Ribbon
http://videos.visitmix.com/MIX08/UX09

I think most of the areas have been covered by Microsoft UX Guidelines document. However, I thot of having some general usability lesson as well;

UIPatterns, User Interface Design Pattern Library
http://ui-patterns.com/

UXBooth, 10 Usability Lessons from Steve Krug’s Don’t Make Me Think
http://www.uxbooth.com/blog/10-usability-lessons-from-steve-krug%E2%80%99s-dont-make-me-think/

UXBooth, 5 Tips to Make Your Headings More User Friendly
http://www.uxbooth.com/blog/5-tips-to-make-your-headers-more-user-friendly/

UXBooth, 5 More Tips to Make Website Headers More User Friendly
http://www.uxbooth.com/blog/5-more-tips-to-make-website-headers-more-user-friendly/

UXBooth, Quick Usability Checklist
http://www.uxbooth.com/blog/quick-usability-checklist/