44

The Nerdvana Annihilation: Improving Silverlight Ux

Embed Size (px)

DESCRIPTION

Silverlight 2.0 is a reality that is used across many different sites and companies. It includes an impressive feature set that can fulfill most requirements. Explore the possibilities of creating an avant-garde user experience by using those resources to exploit the concepts of simplicity, enhanced visualization, interaction, navigation, intuitiveness and adaptiveness. We would explore the field of User-Centered Design, so called Emotional Design, and how it is disappointed by the concept of Nerdvana, a place where all the needed controls and features are packed in a box ready to use. Let's play creating an alternative user interface through innovation tools like Expression Blend, without relying on common-wide-used controls, through the analysis, inspection and optimization of an online community and blog system.

Citation preview

Page 1: The Nerdvana Annihilation: Improving Silverlight Ux
Page 2: 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: [email protected]: www.migueljimenez.nett: @migs212

Session Code: WUX317

Page 3: The Nerdvana Annihilation: Improving Silverlight Ux

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

Page 4: The Nerdvana Annihilation: Improving Silverlight Ux

4

AgendaNerdvana Annihilation

What is UX?

The Nerdvana

The Pursuit of Simplicity

Communication Techniques

Architecting Information: Visualization

Interaction Design

Navigation and Intuitiveness

Adaptive UI

Page 5: The Nerdvana Annihilation: Improving Silverlight Ux

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.”

Page 6: The Nerdvana Annihilation: Improving Silverlight Ux

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

Page 7: The Nerdvana Annihilation: Improving Silverlight Ux

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

Page 8: The Nerdvana Annihilation: Improving Silverlight Ux

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

Page 9: The Nerdvana Annihilation: Improving Silverlight Ux

9

What is UXDesigning The User Experience

Page 10: The Nerdvana Annihilation: Improving Silverlight Ux

10

What is UXDesigning The User Experience

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

Page 11: The Nerdvana Annihilation: Improving Silverlight Ux

11

What is UXDesigning The User Experience

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

Page 12: The Nerdvana Annihilation: Improving Silverlight Ux

12

What is UXGood Design, Bad UX

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

Page 13: The Nerdvana Annihilation: Improving Silverlight Ux

13

The NerdvanaThe what!?!?!

Page 14: The Nerdvana Annihilation: Improving Silverlight Ux

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.

Page 15: The Nerdvana Annihilation: Improving Silverlight Ux

15

The NerdvanaControl-based Experiences

ASP

.NET

Page 16: The Nerdvana Annihilation: Improving Silverlight Ux

16

The NerdvanaControl-based Experiences

SILV

ERLI

GH

T

Page 17: The Nerdvana Annihilation: Improving Silverlight Ux

17

The NerdvanaControl-based Experiences

Page 18: The Nerdvana Annihilation: Improving Silverlight Ux

18

Idea-SpacesCreative Leaps

Richard Ogle2007

ISBN: 978-1591394174

Page 19: The Nerdvana Annihilation: Improving Silverlight Ux

19

Idea-SpacesEmbedding Knowledge

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

Page 20: The Nerdvana Annihilation: Improving Silverlight Ux

20

Idea-SpacesUsing Extended Knowledge

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

Page 21: The Nerdvana Annihilation: Improving Silverlight Ux

21

The NerdvanaAnnihilating Hopes

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

Page 22: The Nerdvana Annihilation: Improving Silverlight Ux

22

Silverlight Enhanced Blog

Introduction to the Nerdvana Concept

Page 23: The Nerdvana Annihilation: Improving Silverlight Ux

23

The Pursuit of SimplicityWhat Do My Users Expect?

Page 24: The Nerdvana Annihilation: Improving Silverlight Ux

24

The Pursuit of SimplicityWhat Do My Users Expect?

Page 25: The Nerdvana Annihilation: Improving Silverlight Ux

25

Communication TechniquesUX Methods: Mental Models

Page 26: The Nerdvana Annihilation: Improving Silverlight Ux

26

Communication TechniquesUX Methods: Low Fidelity Prototyping

Page 27: The Nerdvana Annihilation: Improving Silverlight Ux

27

Silverlight Enhanced Blog

Mental Models

Page 28: The Nerdvana Annihilation: Improving Silverlight Ux

28

Information ArchitectureVisualization

Page 29: The Nerdvana Annihilation: Improving Silverlight Ux

29

Silverlight Enhanced Blog

Improving Visualization

Page 30: The Nerdvana Annihilation: Improving Silverlight Ux

30

Interaction DesignHow Will Users Interact With My Content?

Page 31: The Nerdvana Annihilation: Improving Silverlight Ux

31

Interaction DesignHow Will Users Interact With My Content?

Page 32: The Nerdvana Annihilation: Improving Silverlight Ux

32

Silverlight Enhanced Blog

Interaction Design

Page 33: The Nerdvana Annihilation: Improving Silverlight Ux

33

Navigation & IntuitivenessUsing Metaphors & Animations

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

Page 34: The Nerdvana Annihilation: Improving Silverlight Ux

34

Silverlight Enhanced Blog

Navigation & Intuitiveness

Page 35: The Nerdvana Annihilation: Improving Silverlight Ux

35

Adaptive User InterfaceLet The Users See What They Really Need

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

Page 36: The Nerdvana Annihilation: Improving Silverlight Ux

36

Silverlight Enhanced Blog

Adaptive User Interface

Page 37: The Nerdvana Annihilation: Improving Silverlight Ux

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!!!

Page 38: The Nerdvana Annihilation: Improving Silverlight Ux

38

Book ReferencesRelated Topics

John Maeda2006ISBN: 978-0262134729

Indi Young2008ISBN: 978-1933820064

Edward R. Tufte1990ISBN: 978-0961392116

Dan Saffer2006ISBN: 978-0321432063

Page 39: The Nerdvana Annihilation: Improving Silverlight Ux

39

Page 40: The Nerdvana Annihilation: Improving Silverlight Ux

40

Contact Information

Miguel Jiménez

[email protected]

www.migueljimenez.net

www.twitter.com/migs212

Page 41: The Nerdvana Annihilation: Improving Silverlight Ux

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

Page 42: The Nerdvana Annihilation: Improving Silverlight Ux

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

http://microsoft.com/msdn

Developer’s Kit, Licenses, and MORE!

Resources for Developers

Page 43: The Nerdvana Annihilation: Improving Silverlight Ux

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

Page 44: The Nerdvana Annihilation: Improving Silverlight Ux

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.