In the past, we focused mainly on building products that fulfilled the functional requirements of the user. User experience was often considered late in the development process. But today the customer demands more than just a working product. Providing the right features is still the prerequisite for a good product, but to turn it into something extraordinary you need to provide a good user experience!
Providing a rich user experience is not a thing of fortune. It needs to be planed, designed and integrated into the development of a product. Designing a rich user experience is not only about make up your user interface by some graphics and gradients - its a much broader concept. Its about creating an emotional connection between the user and your software. It makes the user feel good and so he likes to continue using the software.
Microsoft recognized, give development teams the power to create rich user experiences it needs a lot more graphical tool support than VisualStudio can provide today. So they decided to create a new tool suite - made for designers.
Together they are a powerful package. The following illustration shows a sample workflow of integrating a vector image that is created by a graphics designer in Adobe Illustrator into a WPF project that is part of a VisualStudio solution.
Developing a WPF application with a rich user experience requires a lot more skills than just a requirements analyst that defines a list of use cases and developer that implements the software. You have to find out what the user really needs. This can be done by following a user centered approach.
Like in any kind of software projects its important to know and focus the target of your development. You should talk to stakeholders and users to find out the real needs. These needs should be refined to features and expressed in use cases (abstract) or user scenarios (illustrative). Priorize the tasks by risk and importance and work iteratively. This work is done by the role of the requirements engineer.
Creating a user interface prototype is an important step to share ideas between users and engineers to create a common understanding of the interaction design. This task is typically done by an interaction designer. It's helpful to only sketch the user interface in a rough way to prevent early discussions about design details. There are multiple techniques and tools to do this. Some of them are:
Buliding a modern user interface with a rich user experience requires additional skills from your development team. These skills are described as roles that can be distributed among peoples in your development team.
|
Trevor | |
|
Commented on 10.April 2009 |
"user experience was considered late or never" - i don't think so. not everywhere.
|
|
|
|
Christian Moser | |
|
Commented on 10.April 2009 |
Hi Trevor. You are right. That sentence was a bit provocative. I changed it to "User experience was something that was often considered late in the development process". :-)
|
|
|
|
Non | |
|
Commented on 23.April 2009 |
This website is the great place to start learning WPF for me. Good job. Thanks a lot.
|
|
|
|
Callon | |
|
Commented on 27.April 2009 |
Thanks...this website is a great resource. I also love the website design, layout, theme, etc. Is it custom or based on an open framework?
|
|
|
|
Safi | |
|
Commented on 28.April 2009 |
Hi Chris I like your site so much "thumps up". I'm a web/graphic designer with no programing or developing experience and I'm trying to learn WPF coz I'm impressed with it's capabilities and the demos I saw but as a designers most of the resources I found is talking to developers and I really want to learn this am I supposed to learn developing in order to make the complete app. UI work as I want it to? or blend is enough ?I became a little bit familiar with it but when the things get complicated what I'm gonna do I don't wanna just to create a video player UI I need to deal with data grids, dock panels,ribbon, menus and so on not just a couple of rectangles which on a button click will move I know it's a very long comment but I need help badly
|
|
|
|
Christian Moser | |
|
Commented on 28.April 2009 |
Hi Callon,
it's all custom design, based on PHP. The libraries and tools I use are:
Adobe Photoshop CS3 - for the cool glassy look
Ultra Edit - to write and upload the PHP and HTML stuff
GESHI - for Syntax Highlighting
SMARTY Templates - for seperation of design and logic
MicroAkismet - to filter out spam
Smartmenu - for the navigation
AddThis - to share good articles
Greetings
Christian
|
|
|
|
Christian Moser | |
|
Commented on 28.April 2009 |
Hi Safi,
Expression Blend is basically a XAML tool. This means all you can express in XAML can be done graphically in Blend. If the interactions are more complex, you need developer know-how (and probably VisualStudio) to realize them.
Interactions you can do in XAML:
- Bind Properties of elements together
- Create Styles and Control Templates with triggers (like mouse-over effects)
- Create and run animations
- Use existing converters to do more complex bindings
- Use existing behaviors (who can be very powerful)
- Read XML DataSources
- Download Images or Videos from the Web
- Wireup Keystrokes and Commands
Interactions that can hardly be done in XAML:
- Load and store data from and into a backend system
- Define business rules
- Do mathematical calculations
- ...
I hope this helps you to see the boundaries.
Christian
|
|
|
|
Enoya | |
|
Commented on 19.May 2009 |
sounds like i already covered two and half roles: developer (half), graphic designer and Interation designer.
really love Blend in 3d. very powerful in resource library. workflow is clear my mind. Thanks
|
|
|
|
Jerry | |
|
Commented on 12.June 2009 |
real good.
|
|
|
|
Kapil Karkele | |
|
Commented on 15.June 2009 |
Nice comment about how UI should be
"Its about creating an emotional connection between the user and your software."
|
|
|
|
Sjingyu | |
|
Commented on 8.July 2009 |
Very helpful!
but why the step 3,4,5 so simple?
I think there is really a lot to explain here about wpf...
btw,I really like the sentence :Its about creating an emotional connection between the user and your software....
|
|
|
|
Evan | |
|
Commented on 28.July 2009 |
great resources! not to nit pick, there is a small typo on this page: "togehter"
|
|
|
|
Zahid | |
|
Commented on 4.August 2009 |
I am touched by this comment "Its about creating an emotional connection between the user and your software". Would use this comment for my upcomming interview
|
|
|
|
Lalit | |
|
Commented on 10.August 2009 |
Thanks for this wonderful site. I did not want to read books like WPF unleashed to understand the power and usage of WPF. This tutorial gets straight to it and is easy to understand.
|
|
|
|
Peter | |
|
Commented on 12.August 2009 |
Good tutorial -- would look even more professional if the author took the time to proofread his words and fix the numerous typos...
|
|
|
|
Joel | |
|
Commented on 17.August 2009 |
The way I’d often heard the opening outdated development reasoning expressed was, “First, make it work. Then, make it look good.â€
|
|
|
|
Joel | |
|
Commented on 17.August 2009 |
Ooops! Please delete duplicate (Google Chrome 3 apparently resubmitted my comment blindly when I attempted to change Encoding to fix the display of my attempt at ANSI punctuation!).
Testing true Unicode: “I’m in quotes!”
Testing ANSI: “I’m in quotes!”
|
|
|
|
Joel | |
|
Commented on 17.August 2009 |
Christian, you appear to have a mismatch between the Encoding system specified in your Web page (Unicode UTF-8) and that specified in your blogging system comments handling and/or its back-end database (not sure what it is, but it apparently isn't UTF-8).
Everything in the chain should use the same encoding, preferably UTF-8.
|
|
|
|
Henry | |
|
Commented on 26.August 2009 |
Great job, christian. Keep it up.
|
|
|
|
Ajay Topinamath | |
|
Commented on 27.August 2009 |
Surprisingly excellent!!
|
|
|
|
Shahrukh | |
|
Commented on 4.September 2009 |
Mr Moser's!! if you clearly explain the concepts with examples then it will really make us go in a virtual world.. provide some real life examples for explaining concepts...
|
|
|
|
Aamir | |
|
Commented on 7.September 2009 |
its really a nice work...amazing
|
|
|
|
bharat reddy | |
|
Commented on 7.October 2009 |
it is really amazing
|
|
|
|
Venkat | |
|
Commented on 15.October 2009 |
Its really very helpful, keep it up.
|
|
|
|
Igor Jovanovski | |
|
Commented on 4.November 2009 |
nice 'n clean article
|
|
|
|
Sherwin Valdez | |
|
Commented on 12.November 2009 |
Hey! Nice Articles! I'm a developer and find Blend good to play around!
|
|
|
|
Farzam | |
|
Commented on 20.November 2009 |
Hi chris,
Your article very benefit and useful for me , I enjoy it and found the approach of WPF development Project in this. Thanks a lot :-)
|
|
|
|
Emily | |
|
Commented on 8.December 2009 |
Cool sets of articles but you have couple of spelling mistakes.. :|
|
|
|
|
ashraf fawzy | |
|
Commented on 9.December 2009 |
Many thanks for your helpful lessons , keep up
|
|
|
|
chandra | |
|
Commented on 11.December 2009 |
cool realy good one
|
|
|
|
Ravi | |
|
Commented on 15.December 2009 |
It's not enough.
|
|
|
|
Ben | |
|
Commented on 28.December 2009 |
Test step - does WPF include any infrastructure for testing? From experience, developing and maintaining a UI application is extremely difficult without an easy way to automate UI testing.
|
|
|
|
pooja | |
|
Commented on 4.January 2010 |
very gud..
|
|
|
|
Ken | |
|
Commented on 5.January 2010 |
The problem with any UI centric design approach is that since the UI is the one component that they can see and interact with it is the component that has the most changes during the development life cycle. Customers (users) need to be aware that changes late in the dev cycle have implications and costs.
|
|
|
|
Sumon | |
|
Commented on 19.January 2010 |
nice, need more details?
|
|
|
|
Tom | |
|
Commented on 3.February 2010 |
very good article..simple and clear!
|
|
|
|
Ishwinder | |
|
Commented on 5.February 2010 |
really v nice tutorial!
|
|
|
|
gfh | |
|
Commented on 5.February 2010 |
gfhgf
|
|
|
|
Kos | |
|
Commented on 6.February 2010 |
Nice intro. Thanks
|
|
|
|
Abhijeet | |
|
Commented on 9.February 2010 |
Great overview and don't be discouraged by the spelling nazis. Point is you wrote a good tutorial...what have they accomplished in WPF? Nothing (otherwise why would they be reading this intro tutorial).
|
|
|
|
catchme | |
|
Commented on 10.February 2010 |
Nice one to understand
|
|
|
|
sathya | |
|
Commented on 10.February 2010 |
Very excellent, no words to express..keep it up
|
|
|
|
Thirumoorthi | |
|
Commented on 13.February 2010 |
It is really a good article which helps every one to understand the WPF...Keep it up christian....
|
|
|
|
Sihrish | |
|
Commented on 16.February 2010 |
After searching long finally i got what i was looking for. Thanks a million for making this available
|
|
|
|
Ratnesh Ranjan | |
|
Commented on 17.February 2010 |
Its great in use........
|
|
|
|
Manny | |
|
Commented on 17.February 2010 |
Do you have a book out yet? if not you should consider one? great explaination so far. enjoying it, as a newbee to programming.
|
|
|
|
Navin | |
|
Commented on 2.March 2010 |
nice... very nice!
|
|
|
|
Tom Andersen | |
|
Commented on 8.March 2010 |
Well done. Your examples are easy to read and easy to follow. Did you do your own English transaltion? If you did, I am amazed at your ability to be multilingual and a skilled developer.
|
|
|
|
Arfan Baig | |
|
Commented on 16.March 2010 |
Really helpful...
clean article.
|
|
|
|
rolly | |
|
Commented on 17.March 2010 |
this is what im looking for. very interesting and informative articles.
|
|
|
|
Kumar Raja | |
|
Commented on 18.March 2010 |
Hi, you done gud job Mr.Mosers for wpf freshers(who wants to learning)
Thank u very much.......
|
|
|
|
Niti | |
|
Commented on 3.April 2010 |
Really You have made WPF much easy to understand. Its really very simple, interesting and informational article. Nice Job
Thanks Niti
|
|
|
|
Viral | |
|
Commented on 8.April 2010 |
I want to change ListView's Property of My View in ViewModel When click command fires. Is that possible ?
|
|
|
|
Ahmad Fehmy | |
|
Commented on 22.April 2010 |
I hav tirde many WPF toutarials but didnt compleate any one
this one has encoreged me to compleate it to the end >
Thanks alot for making WPF so easy.
|
|
|
|
Anwar Hussain | |
|
Commented on 23.April 2010 |
This a cool..!!
|
|
|
|
sam | |
|
Commented on 28.April 2010 |
i am now working on wpf need more information if you have my mail id is abrsamuel@gmail.com
|
|
|
|
bhaumik pandit | |
|
Commented on 29.April 2010 |
please let me know if there is any seminar or training on WPF in india
|
|
|
|
Amit | |
|
Commented on 21.May 2010 |
This inforamation helpful and there is seminar or training on WPF in mumbai. Please let me know.
|
|
|
|
Rajneesh verma | |
|
Commented on 3.June 2010 |
Nice One..........
|
|
|
|
bharath | |
|
Commented on 9.June 2010 |
Really good.............Can we get any Pdf or doc for these tutorials.
|
|
|
|
Ketan Deshpande | |
|
Commented on 11.June 2010 |
This is very best tutorial, but the same can I get any pdf for this tutorial, if yes then please reply me on my email address.
|
|
|
|
Hira | |
|
Commented on 14.June 2010 |
simply informative
|
|
|
|
David | |
|
Commented on 19.June 2010 |
bad one
|
|
|
|
Tom | |
|
Commented on 8.July 2010 |
do you have expression blend serial/crack
|
|
|
|
Abhishek Mishra | |
|
Commented on 15.July 2010 |
Its so nice & helpful tutorials...its very good for beginners...read and enjoy the world of new framework of microsoft.
|
|
|
|
killer | |
|
Commented on 16.July 2010 |
nice thoughts...
|
|
|
|
manmohan | |
|
Commented on 19.July 2010 |
very good, simple, understandable and down-to-earth articles. person who already worked worked in .net web dev. for few month can understand it easily.
|
|
|
|
ouais | |
|
Commented on 29.July 2010 |
this site is sooooo stupid !
|
|
|
|
Rich | |
|
Commented on 30.July 2010 |
great site!!
|
|
|
|
Praveen Kumar | |
|
Commented on 17.August 2010 |
wow..useful stuff...
|
|
|
|
abc | |
|
Commented on 18.August 2010 |
where the hell is the NEXT button to navigate through the tutorials in a sync-ed manner?????????
|
|
|
|
annie | |
|
Commented on 18.August 2010 |
wow
|
|
|
|
Rahul Nandani | |
|
Commented on 18.August 2010 |
Nice easy to learn
|
|
|
|
Gamesh | |
|
Commented on 20.August 2010 |
HI i am working on wpf can you provide a wpf aplication example which using dependency property ??
|
|
|
|
Asoka | |
|
Commented on 23.August 2010 |
This is really very useful site ! thanks for posting valuable documentation.
|
|
|
|
diiirty | |
|
Commented on 23.August 2010 |
wow you guys are really that impressed by mosers copy and pasting
(silly binders)
|
|
|
|
Jee | |
|
Commented on 31.August 2010 |
Good to learn basics
|
|
|
|
Jee | |
|
Commented on 31.August 2010 |
Good to learn basics
|
|
|
|
fatho | |
|
Commented on 5.September 2010 |
it doesn't matter where the information comes from, but that someone boundled it in one website.
|
|
|
|
brajesh | |
|
Commented on 15.September 2010 |
Its realy informatic. i thanks to site
|
|
|
|
Isuru | |
|
Commented on 19.September 2010 |
Short and sweet. Great stuff.
|
|
|
|
makka | |
|
Commented on 20.September 2010 |
great !
|
|
|
|
gan | |
|
Commented on 21.September 2010 |
good job!
|
|
|
|
fghfgh | |
|
Commented on 23.September 2010 |
ghdfghfh fhfghfhfghfgh
|
|
|
|
Taha | |
|
Commented on 23.September 2010 |
I really a good site to learn the new stuff in Dot net..... Keep up the good work.
|
|
|
|
Lc | |
|
Commented on 25.September 2010 |
Oh, so good
|
|
|
|
MonkeyBoy | |
|
Commented on 28.September 2010 |
I love this site
|
|
|
|
MonkeyBoy | |
|
Commented on 28.September 2010 |
Your shirt is gay
|
|
|
|
mb | |
|
Commented on 29.September 2010 |
dsa
|
|
|
|
Bala | |
|
Commented on 6.October 2010 |
Mr diiirty & Mr ouais Just you shut up your mouth and do your work. No one has asked you to browse this site. OK. Do you think that Mosers has developed for his purpose. You do you guys want to blame him. All are doing copy and paste. Except microsoft. Do you guys think that you have discovered .Net
|
|
|
|
sunil | |
|
Commented on 15.October 2010 |
Nice one
|
|
|
|
Rahul | |
|
Commented on 15.October 2010 |
Nice Site
|
|
|
|
Battered... | |
|
Commented on 21.October 2010 |
Love this article - thanks for writing!
|
|
|
|
aeonjake | |
|
Commented on 28.October 2010 |
Good stuff
|
|
|
|
Dharmendra | |
|
Commented on 29.October 2010 |
Good articles....
|
|
|
|
SANGMESH | |
|
Commented on 2.November 2010 |
ARE KYA MAST BANAYA HAIN!!!!!!!!!!!!!
|
|
|
|
pogi | |
|
Commented on 4.November 2010 |
hello world
|
|
|
|
DENNERTITE | |
|
Commented on 4.November 2010 |
COOL...AND PRETTY HELPFUL
|
|
|
|
Paganel90 | |
|
Commented on 9.November 2010 |
Good article! thank u very much for your helpfull site!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
|
JIBIN | |
|
Commented on 15.November 2010 |
VERY GOOD ARTICLE**
|
|
|
|
Nithin | |
|
Commented on 19.November 2010 |
Nice site, nice to have just the required info in small digestible chunks. Thanks Man
|
|
|
|
Akhilesh | |
|
Commented on 22.November 2010 |
Very nice
|
|
|
|
GU | |
|
Commented on 24.November 2010 |
Very informative
|
|
|
|
J | |
|
Commented on 1.December 2010 |
Very good
|
|
|
|
Avinash | |
|
Commented on 3.December 2010 |
Try to concentrate only on WPF rather than other S/W engg activities.
|
|
|
|
Soumen Koley | |
|
Commented on 5.December 2010 |
I love this site! thank u very much for your helpful site!!!!!!!!!
|
|
|
|
Britto | |
|
Commented on 8.December 2010 |
Nic!!!!! easy to learn workflow of wpf
|
|
|
|
satya | |
|
Commented on 18.December 2010 |
Very good
|
|
|
|
satya | |
|
Commented on 18.December 2010 |
Very good
|
|
|
|
david | |
|
Commented on 21.December 2010 |
Very useful
|
|
|
|
Nirvin M | |
|
Commented on 28.December 2010 |
Wow!!! Really a good work... I luv WPF and this SITE very much...
|
|
|
|
Tinoy Malayil | |
|
Commented on 29.December 2010 |
do you have any downloadable tutorial means pdf
|
|
|
|
Vipin | |
|
Commented on 3.January 2011 |
Very useful
|
|
|
|
raj | |
|
Commented on 12.January 2011 |
good
|
|
|
|
me | |
|
Commented on 14.January 2011 |
nevermind the haters. good work.
|
|
|
|
Raj | |
|
Commented on 18.January 2011 |
Nalla iruku.....
|
|
|
|
anwar | |
|
Commented on 19.January 2011 |
awesome........site !!!
|
|
|
|
Todd | |
|
Commented on 21.January 2011 |
I developed this exact process 4 years ago. It was a dream to work like this and allowed us to Nail the application we wanted to make!
|
|
|
|
Sandhya | |
|
Commented on 27.January 2011 |
really helpful..thanks!!
|
|
|
|
Prasanna | |
|
Commented on 27.January 2011 |
very nice.....
|
|
|
|
janu | |
|
Commented on 31.January 2011 |
arumai arumai
|
|
|
|
A.Joseph... | |
|
Commented on 8.February 2011 |
Hi, Nice Work
|
|
|
|
milind | |
|
Commented on 16.February 2011 |
gud work bro
|
|
|
|
Bojjaiah | |
|
Commented on 23.February 2011 |
really its very helpful for me...........
|
|
|
|
tom | |
|
Commented on 8.March 2011 |
very good :D
|
|
|
|
coucou | |
|
Commented on 10.March 2011 |
COUCOU KATCHOUUUUU
|
|
|
|
vishnu | |
|
Commented on 13.March 2011 |
really.... cool & explain well... :-)
i like it...
|
|
|
|
vishnu | |
|
Commented on 13.March 2011 |
really.... cool & explain well... :-)
i like it...
|
|
|
|
Vijay | |
|
Commented on 23.March 2011 |
Very useful..good work
|
|
|
|
Dave | |
|
Commented on 23.March 2011 |
I have to ALL of that crap. Plus be the support guy. If you think writing your own software is a rewarding way to make a living think again. I'm taking the next 9-5 job I can get.. ;)
|
|
|
|
Sanjay Patolia | |
|
Commented on 24.March 2011 |
This really gives the practical idea of creating WPF Projects...Liked it...:)
|
|
|
|
Baby | |
|
Commented on 27.March 2011 |
Good Work !!
|
|
|
|
Naik | |
|
Commented on 28.March 2011 |
very good..
|
|
|
|
newb | |
|
Commented on 29.March 2011 |
Amazing
|
|
|
|
jack | |
|
Commented on 8.April 2011 |
You need to use a spellchecker.
|
|
|
|
jack | |
|
Commented on 8.April 2011 |
You need to use a spellchecker.
|
|
|
|
jogi | |
|
Commented on 18.April 2011 |
this is amazing i want pdf material download how to download pls tell me
|
|
|
|
Mahesh | |
|
Commented on 20.April 2011 |
Usefull information.
|
|
|
|
zain | |
|
Commented on 25.April 2011 |
wonderfull
|
|
|
|
zain | |
|
Commented on 25.April 2011 |
wonderfull
|
|
|
|
Victor | |
|
Commented on 6.May 2011 |
For UI prototyping you can use balsamiq mockup http://balsamiq.com/products/mockups very nice tool.
|
|
|
|
Mehdi Rizvandi | |
|
Commented on 7.May 2011 |
Thankyou, its useful and simple!
|
|
|
|
papu | |
|
Commented on 26.May 2011 |
wah g wah
|
|
|
|
Paruppu | |
|
Commented on 6.June 2011 |
There obviously are so many fools around. This is a dumbFin tutorial.
|
|
|
|
Thorsten | |
|
Commented on 15.June 2011 |
Just great, thank you
|
|
|
|
Sneha | |
|
Commented on 24.June 2011 |
For free Life insurance information round the clock anywhere in the world call
Sneha +91-9096273779
|
|
|
|
Darshan S.... | |
|
Commented on 27.June 2011 |
Very Nice Tutorials for WPF Beginners !!!
|
|
|
|
Darshan S.... | |
|
Commented on 27.June 2011 |
Very Nice Tutorials for WPF Beginners !!!
|
|
|
|
RX100 | |
|
Commented on 30.June 2011 |
YEPPPEEEEEEEEEEEEEEEEEEEEEEE
|
|
|
|
castro | |
|
Commented on 30.June 2011 |
very good
|
|
|
|
new_programmer | |
|
Commented on 7.July 2011 |
Great!!!!
|
|
|
|
Siva | |
|
Commented on 9.July 2011 |
Thanks a lot... Perfect explanation.. keeps us reading more of ur articles
|
|
|
|
Nawab Anas... | |
|
Commented on 12.July 2011 |
this very use full for me.........
|
|
|
|
Deepu | |
|
Commented on 13.July 2011 |
Good Info......
|
|
|
|
jay | |
|
Commented on 18.July 2011 |
not gud
|
|
|
|
Joe | |
|
Commented on 24.July 2011 |
it's free??
|
|
|
|
nency | |
|
Commented on 27.July 2011 |
amazing
|
|
|
|
nency | |
|
Commented on 27.July 2011 |
amazing
|
|
|
|
muthahhar | |
|
Commented on 18.August 2011 |
it's good for begginners.....
|
|
|
|
drishya | |
|
Commented on 24.August 2011 |
good
|
|
|
|
Pranjal R Nigam | |
|
Commented on 30.August 2011 |
Good explanation.
|
|
|
|
Shubhangi | |
|
Commented on 14.September 2011 |
Nice Article
|
|
|
|
DK | |
|
Commented on 16.September 2011 |
perfect explaination !!!
|
|
|
|
DK | |
|
Commented on 16.September 2011 |
perfect explaination !!!
|
|
|
|
shahul | |
|
Commented on 19.September 2011 |
Good ma
|
|
|