Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


User Experience Design Process

User Experience becomes a Key Success Factor

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.

New Tools for Designers

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.

This tool suite is called Microsoft Expression. It consists of the four products:

  • Expression Blend is built to create user interfaces in WPF and Silverlight. It builds the bridge between designer and developers. It can open VisualStudio solutions
  • Expression Design is a leightweight version of Adobe Illustrator to create and edit vector graphics.
  • Expression Media is built to encode, cut and enrich video files and optimize them for silverlight streaming
  • Expression Web is Microsoft next generation of HTML and Javascript editor. Its the replacement for Frontpage.

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.

Development Workflow of a WPF Project

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.

1. Elicit Requirements

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.

2. Create and Validate UI Prototype

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:

  • Paper prototype
    Use paper and pencil to draw rough sketches of your user interface. No tools and infrastructure is needed. Everyone can just scribble thier ideas on the paper.
  • Wireframes
    Wireframes are often used to sketch the layout of a page. It's called wireframes because you just draw the outlines of controls and images. This can be done with tools like PowerPoint or Visio
  • Expression Blend 3 - Sketch Flow Sketch flow is a new cool feature to create interactive prototypes directly in WPF. You can use the integrated "wiggly style" to make it look sketchy. The prototype can be run in a standalone player that has an integrated feedback mechanism.
  • Interactive Prototype The most expensive and real approach is to create an (reusable) interactive prototype that works as the real application but with dummy data.
It is strongly recommended to test your UI prototype on real users. This helps you to find out and address design problems early in the development process. The following techniques are very popular to evaluate UI prototypes:
  • Walktrough
    A walktrough is usually done early in a project with wireframes or paper prototypes. The user gets a task to solve and he controlls the prototype by touching on the paper. The test leader than presents a new paper showing the state after the interaction.
  • Usability Lab
    To do a usability lab, you need a computer with a screen capture software and a camera. The proband gets an task to do and the requirements and interaction engineer watch him doing this. They should not talk to him to find out where he gets stuck and why.

3. Implement Business Logic and Raw User Interface

4. Integrate Graphical Design

5. Test software

Roles

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.

  • Developer
    The developer is responsible to implement the functionality of the application. He creates the data model, implements the business logic and wires all up to a simple view.
  • Graphical Designer
    The graphical designer is responsible to create a graphical concept and build graphical assets like icons,logos, 3D models or color schemes. If the graphical designer is familiar with Microsoft Expression tools he directly creates styles and control templates.
  • Interaction Designer
    The interaction designer is responsible for the content and the flow of a user interface. He creates wireframes or UI sketches to share its ideas with the team or customer. He should validate his work by doing walktroughs or storyboards.
  • Integrator
    The integrator is the artist between the designer and the developer world. He takes the assets of the graphical designer and integrates them into the raw user interface of the developer. This role needs a rare set of skills and so it's often hard to find the right person for it.

More Infos

The New Iteration - Microsoft Paper about the Designer/Developer collaboration



Last modified: 2010-01-05 12:01:58
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
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

Name
E-Mail (optional)
Comment