the nerdvana annihilation: improving silverlight ux

2

Nerdvana Annihilation: Improving Silverlight UX without out-of-the-box controls

Miguel JiménezUX Advisor @ Bla Bla Labs e: hello@migueljimenez.netb: www.migueljimenez.nett: @migs212

Session Code: WUX317

3

Remember…What To Expect

Level 300This is NOT a Silverlight introduction session

Assuming knowledge aboutSilverlight Projects

Expression Blend

XAML

Visual Studio and .NET Framework

Expression Design

4

AgendaNerdvana Annihilation

What is UX?

The Nerdvana

The Pursuit of Simplicity

Communication Techniques

Architecting Information: Visualization

Interaction Design

Navigation and Intuitiveness

Adaptive UI

5

What is UXA Definition

“User experience design, most often abbreviated UX, is a term used to describe the overarching experience a person has as a result of their interactions with a particular product or service, it's delivery, and related artifacts, according to their design.”

6

What is UXThe Real Thing

Human Computer Interaction

Human Factors Engineering

Information Architecture

Interaction Design

Mental Models

Usability

User Centred Design

User Interface Design

7 http://www.flickr.com/photos/gorgeoux/2961099855/

8

What is UXWhy Should We Care

As Designers & Interaction DesignersMake a Life of HCI and UX

As DevelopersEnhance Product Design Skills

Increase Customer Fidelity

Understand your Design peers

You are the Most Important Piece

9

What is UXDesigning The User Experience

10

What is UXDesigning The User Experience

http://www.flickr.com/photos/partee/2597734293/

11

What is UXDesigning The User Experience

http://www.flickr.com/photos/recyclethis/157108084/

12

What is UXGood Design, Bad UX

http://www.nickmelville.co.uk/portfolio.php?item=paddychair

13

The NerdvanaThe what!?!?!

14

The NerdvanaThe what!?!?!

[1] def. The perfect blend of logic and emotion. A state of total computer bliss. Originally coined by Dilbert author, Scott Adams.

[2] def. State of total geekdom.

15

The NerdvanaControl-based Experiences

ASP

.NET

16

The NerdvanaControl-based Experiences

SILV

ERLI

GH

T

17

The NerdvanaControl-based Experiences

18

Idea-SpacesCreative Leaps

Richard Ogle2007

ISBN: 978-1591394174

19

Idea-SpacesEmbedding Knowledge

http://www.flickr.com/photos/vituh2001/2837746448/

20

Idea-SpacesUsing Extended Knowledge

http://www.flickr.com/photos/imagezen/65199660/

21

The NerdvanaAnnihilating Hopes

http://www.flickr.com/photos/davidbaker/497740339/

22

Silverlight Enhanced Blog

Introduction to the Nerdvana Concept

23

The Pursuit of SimplicityWhat Do My Users Expect?

24

The Pursuit of SimplicityWhat Do My Users Expect?

25

Communication TechniquesUX Methods: Mental Models

26

Communication TechniquesUX Methods: Low Fidelity Prototyping

27

Silverlight Enhanced Blog

Mental Models

28

Information ArchitectureVisualization

29

Silverlight Enhanced Blog

Improving Visualization

30

Interaction DesignHow Will Users Interact With My Content?

31

Interaction DesignHow Will Users Interact With My Content?

32

Silverlight Enhanced Blog

Interaction Design

33

Navigation & IntuitivenessUsing Metaphors & Animations

http://www.flickr.com/photos/andrew_buckie/209493609/

34

Silverlight Enhanced Blog

Navigation & Intuitiveness

35

Adaptive User InterfaceLet The Users See What They Really Need

http://www.flickr.com/photos/andrew_buckie/209493609/

36

Silverlight Enhanced Blog

Adaptive User Interface

37

SummaryThings to Remember

User Experience is about breaking frontiers

Think from the User Perspective

Use existing metaphors to guide users

….

And Then, Introduce some Graphic Design Final Touches to the blog system design!!!

38

Book ReferencesRelated Topics

John Maeda2006ISBN: 978-0262134729

Indi Young2008ISBN: 978-1933820064

Edward R. Tufte1990ISBN: 978-0961392116

Dan Saffer2006ISBN: 978-0321432063

39

40

Contact Information

Miguel Jiménez

hello@migueljimenez.net

www.migueljimenez.net

www.twitter.com/migs212

With an amazing line up of international speakers, there are even more chances to win an evaluation prize! So make sure you submit feedback for all the sessions you attend!

Don’t forget to completeyour session feedback forms via the CommNet terminalsor the Registered Delegate

Pages for your chance towin a HTC Touch Dual!

Now extended from2 to 24 hours after session

for more chance to WIN

http://www.microsoft.com/emea/teched2008/developer/feedback.aspx

www.microsoft.com/techedTech·Talks Tech·Ed BloggersLive Simulcasts Virtual Labs

http://microsoft.com/msdn

Developer’s Kit, Licenses, and MORE!

Resources for Developers

Related Content

Breakout Sessions

Interactive Sessions

Hands-on Labs

Today:WUX203 – Room 114 – An Introduction to Microsoft Silverlight Controls FrameworkARC306 – Room 111 – RIAs and Emissaries

Thursday:ARC304 – Auditorium – Know Thy User: Instrumenting User ExperienceWUX310 – Room 114 – Beauty and the Geeks: Developer-Designer WorkflowWUX403 – Room 113 – Tips & Tricks for Building Great Microsoft Silverlight Apps

WUX08-IS – Room 135 – Digging Up DeepZoom (this afternoon)

WUX11-HOL – Microsoft Silverlight FoundationWUX12-HOL – Animations in Microsoft Silverlight 2.0WUX13-HOL – Building Reusable Controls with Microsoft Silverlight 2.0WUX14-HOL – Communications and Data with Microsoft Silverlight 2.0

44

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.