Welcome to WindowsClient.net | Sign in | Join

chus

Research on 3D UI/UX trough WPF/WPF3D
3D Control - Sample Capture II

I'm going to talk on one of my next posts about use of Z axe on 3D Controls, (a tricky question I think), and how important is to choose a clear representation depending on the data you want to show.

Meanwhile this is a sample capture from other Control I'm working on, (available soon as a framework sample), this is other planetary implementation, (AKA 3D carousel), but in this case I deal with pictures and not with Folders and Files.

I'll discuss some visual considerations between both implementations, (this new and the fromer planetary folder sample), and how a user will 'feel' each one (usability considerations).

 

jesus

wpf.3d/research

3D Controls Rules - Control movements must be constrained, transit within states carefully (UX)

 

One of the problems you will found when implementing 3D is movement with 6 DOF, this is:

  • forward/backward (Z), up/down (Y), left/right (X) or Translation in three perpendicular Axes.
  • combined with Rotation about three perpendicular Axes (yaw/pitch/roll - Z,Y,X)

If a User has a chance to interface with a 3D Control 'freely' without any constraint on movements, (axes translation/axes angles), he can see your control as a ‘crazy' one and very hard to interface with it, so your control usability will be less than zero.

To see what I'm talking about you can download 3DTools from codeplex, (http://www.codeplex.com/3DTools), try the modelviewer sample, load sample model and move the model with the mouse a, (this sample uses a Trackball class implementation to move the model).

Of course, there are different kind of controls and each one should constraint movements as needed, for instance look for some of the carousel wpf samples you can find on i*net, (those made on WPF 3D, of course!).

Usually this controls limit its movement to a rotation on Y Axe, (pitch), and all the elements on the carousel follow a circular path, makes nonsense for a user to be able to rotate carousel elements on Z Axe (yaw), also, these controls usually have a predefined Step each time a user interacts 'left' or 'right' with control to make next element be in 'front' of the User POV (Point Of View)

User expects Controls movements and transitions to be ‘natural', User Experience and interfacing when using a control have to be clearly defined, so you will have to think deeply about how a control should look and how your control will move or transit within different states, because User Experience is very important as Users are who really will use your controls.

There are at least two different types of 'movements' or ‘transitions' you will implement in a control.

  • User initiated:
    • Mainly Reaction to user input or action, (select other control, click on some control children element)
  • Control initiated
    • Transitions from states like open/close, loaded/unloaded, active/inactive, fill view/leave view, and so on...

 

On PlanetaryFolder sample I have set this constraint as an example:

// Setup a movement constraint

// By Default constraint Maximum and Minimum a set to

// Double.MaxValue and Double.MinValue

 

Constrainst cons = frame.Constraints.Create("standar");

 

cons.Maximum.Pitch = 90;

cons.Minimum.Pitch = -90;

cons.Maximum.Roll = 30;

cons.Minimum.Roll = -30;

 

frame.Constraints.Enforce("standar");

(This code and Constraint feature will be available when I release WPF 3D Framework Revision 2 this week, sorry me to post this code sample before release)

Also, I have limited user interfacing with my control to next possibilities:

  • Cursors (Rotate files (pitch constrained), rotate up/down planetary (roll constrained))
  • MouseClick on folder (transition to open , transition to close)
  • MouseClick on files (simply show a MessageBox)
  • MouseWheel (Rotate files (pitch constrained)

I use a "Behaviour" to make movements ‘visually soft' as possible, like this code from sample:

// rotations around angles, will be executed in response to keys.

// (Setup soft movements behaviours and add to control

SmoothRotationBehaviour leftRotation = new SmoothRotationBehaviour("left_rotation");

 

// configure rotations duration

leftRotation.Elapse = TimeSpan.FromSeconds(0.1);

 

// setup rotation step

leftRotation.Quantity = new Point3D(0, -10, 0);

 

 

// 'install' movement behaviours

// see KeyDown event / MouseWheel event

frame.Behaviours.Add(quickleftRotation);

 

[...]

case Key.Left:

           frame.Behaviours.Execute("left_rotation");

[...]

 

 

Conclusions

  • Users expect movements and transitions to see ‘natural' for what they are looking for, or input they made on, you must constraint movements and extension of movements around axis.
  • Does not transit unnecessarily from one state to another because the ‘look & feel' is beautiful and you are happy because your transition is impressive; (Remember internet first ages when a Web Page was plenty of animated gifs all around), limit your transitions to that really needed by your control.
  • Run transitions from one state to another firmly and as fast as you can, think on a user who has to be eight or ten hours per day looking at your UI, he will become bored if your transition runs slower or they are crazy.

jesus

wpf.3d/research

Planning WPF 3D Framework Revision 2 new features

Hi,

These last days I had a lot of workload on my job, (sometimes happens :) ), so I don't have enough time to begin research on 3D, meanwhile I worked improving and adding new features on framework.

 You can find more information on, (https://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=wpf3dFramework&ReleaseId=10953), there is a list on new features and changes already made, currently I'm working on Drag & Drop feature on 3D UI.

 Also I opened a thread just in case you want to request some feature not supported now, so if you want to request something post a request on this thread (https://www.codeplex.com/Thread/View.aspx?ProjectName=wpf3dFramework&ThreadId=22612).

BTW, If someone is going to be at Microsoft Techdays {The Evolution Show} next week at Madrid (Spain), I'll be there on my Company Stand, (Avanade www.avanade.com), and probably I'll be at Stage with our CTO Tuesday 26, (12:30 - 13:15 Berlin room ), talking about ALM in general and how companies can use Team System to leverage this new cute Microsoft tools and technology, also we will show how to define a tailored Road Map and a real Business Case very useful for all people interested on ALM and TFS.

jesús

 wpf.3d/research

 

 

 

 

WPF 3D Framework - Initial Release Revision 1

After upload the first release I found some minors problems in namespaces, file distribution inside projects, and bad project names I want to solve, also, I think to have a CHM file documenting classes, properties, methods,etc... at basic level will help all people to understand better hierarchy and other elements on Framework, so here is:

Revision 1 Changes:

  • Changed some Namespaces
  • Changed File and Folder structure on JSalas.WPF3D
  • CHM Technical Reference created (See Help Folder)

Download: https://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=wpf3dFramework&ReleaseId=10765

Enjoy!!

jesús

 wpf.3d/research

Announcing Codeplex Site for 'WPF 3D Framework' project

CodePlex Project is Open!!!

On codeplex you can download a initial release for 'WPF 3D Framework' project.

In the release you will find 3 projects:

  • JSalas.WPF3D
    • Main Framework Library
  • JSalas.WPF3D.Behaviours
    • 3D Objects Behaviours Library
  • Sample1
    • First 3D Sample with the PlanetaryFolder control inside

Codeplex url: http://www.codeplex.com/wpf3dFramework

To see the basics of this Framework you can access a page where I will try to create and maintain an up to date quick startup guide.

http://blogs.windowsclient.net/chus/pages/WPF-3D-Framework-quick-startup-guide.aspx

About licensing I choose Microsoft Public License (Ms-PL) , I think is very open so you will be able to use this code practically free, the only payment you have to do is to give me your feedback :), let me know where are you using it, nothing more.

LICENSING NOTE: The enumerated 6 files below, (inside JSalas.WPF3D),. are from Peztold.Media3D.dll and are copyright of Charles Petzold, if you want to use it you will have to check licensing for this files, (http://www.charlespetzold.com/3D/index.html), or create your own versions from scratch.

(Sphere.cs, Cuboid.cs, ModelVisual.cs, Billboard.cs, SphereMesh.cs and MeshGeneratorBase.cs are Copyright from Charles Petzold)

Enjoy it!!!

jesus

wpf.3d/research

3D Control - sample capture

I only want to show to you the first capture of a 3D Control named "PlanetaryFolder",is going to be the first sample of the WPF 3D Framework, and the first control I will discuss deeply.

capture

can you see the focused file? :)

jesus

wpf.3d/research

 

 

 

3D Controls - rules of thumb

The common denominator on any Interface is Controls, whatever Interface you create or design you'll use them, we use controls every day in .Net Forms as texboxes, comboboxes..., also WPF has its own controls with its own behaviors and rules , yes, I remark this because we usually does not think about rules and behaviors in controls we use, probably because we used it for so long and we accept them 'as they are'.

For a clear understanding about what I'm trying to explain, let's try a couple of examples, about rules for an Input Control:

  • Rule 1 for input controls: Active area for input is clearly delimited by color or border. (rule)
  • Rule 2 for input controls: When Input control has the focus the control will inform in some way the user. (behavior)
  • Rule 3 for input controls: When User is typing data on a Input control he will see what is typing in real-time. (rule/behavior)
  • Rule X for input controls: etc...

Of course, each kind of control will behave differently, but there is some general rules, (or design considerations), that you should maintain on your UI to make it coherent to the user and easy to interact.

3D Controls need a set of rules on design, usability, etc.... As you have a new complete dimension to use, (Z Axe), and a new set of capabilities on Controls like smooth animations, rotations, materials, elements transformations, mesh morphing, behavioral user interaction, control composites, etc.. probably is a good idea to define a set of 'rules of thumb' to use every time you want to design a new 3D Control

To create this rules, on my next posts I will try to figure them out from real 3D Controls , I think practical experimentation is the best way to gather conclusions that can lead us to describe this rules correctly.

3D Controls will be developed on top of the 'WPF 3D Framework' I announce on my 'opening post' a few days ago, I'm on time with my personal planification to publish on codeplex site, all the samples will be uploaded to project site.

Of course I will announce the codeplex site 'great opening' on this blog.

jesus

wpf.3d/research

Posted: Feb 12 2008, 02:00 PM by chus
Filed under:
Focus on 3D UI/UX

Opening this Blog what I'm trying to do is conducting some research about User Interface/Experience with 3D.

I'm going to relay on WPF/WPF 3D technology for the technical side of this research and a lot of posts to share my thoughts, ideas and discoveries with the community.

At the end I expect to have clear Ideas about how a 3D UI/UX can be developed/implemented and what are the best practices to construct, maintain and improve it.

Side-by-side with this blog I’m going to open a Codeplex project to hold a technical framework, (currently I’m preparing a initial version to publish on codeplex site next week), trying to give for the community an ‘easy’ way to implement WPF based 3D controls and 3D Interfaces.

I’m not trying to say WPF 3D is hard to develop, understand me, it is the same as if Halo developers only will be able to use ‘primitive’ classes on Direct3D, (out-of-the-box classes), probably Halo developers have a Framework or Class Library that help them to develop more quickly, error free and with special managing or tracking for some objects.

This framework I’m going to build is the same thing, something to help people to develop new controls quickly and with reusable behaviors between 3D elements, this, I expect, will accelerate this research because you can ‘think on it’ and after that ‘code and check-it on real’ without too much loss of time, so you can continue on that direction or change to other one very quickly.

I expect to be able to announce the Site on CodePlex next week, (before 16/02), meanwhile if you have any question feel free to ask me anything.

jesus

wpf.3d/research

Page view counter