The Impact of Rich Interactivity on the User Experience By Tobias Komischke, PhD Director of User Experience tkomischke@infragistics.com tobiask.net

• Director of User Experience @ Infragistics Services • Studied the UX stuff (Master’s & Ph.D.) • 15+ years professional experience

• Research • Development • Consulting (In-house & External)

About me

“Think back… which keys did you press?”

Perceive Status Understand Status Compare w/ Goal Plan Operation Anticipate Outcome

Test Operate Test Exit

Initiate Operation Monitor Operation

Perceive Status Understand Status Compare w/ Goal Plan Operation Anticipate Outcome

Re-Orient

Miller, GA, Galanter, E., & Pribram, KA (1986). Plans and the structure of behavior. New York: Adams-Bannister-Cox.

T. O. T. E.

Benefits of Rich Interactivity

Provide direct manipulation

Keep user on same screen

Educate user

o Invitation: something can be done

o Progress: something is being done

o Freedback: something has been done

Entertain user

o Bridging loading/processing time

Benefits of Rich Interactivity

next up

“A feature of a graphical user interface whereby the user can drag a visual item across the screen and drop it in another location.”

Drag & Drop

Event States

o Affordance conveyed o Mouse hover o Mouse down o Drag initiated o Drag over valid target o Drag over invalid target o Drag over original location o Drop accepted o Drop rejected o Drop on original location

Interaction Actors

o Page o Cursor o Tool Tip o Drag Object o Drag Object's Proxy o Drag Object's Parent Container o Drop Target

~ 40 meaningful combinations

Scott, B. & Neil, T. (2009). Designing Web Interfaces: Principles and Patterns for Rich Interactions. O‘Reilly Media, Cambridge, MA.

Drag & Drop

User Input Application Output Notes

Single left Mouse-click /

Single Tap

Launches the application within the center container. Applies only when app is

enabled.

Double left Mouse-click /

Double Tap

Launches the application in full-screen mode. Applies only when app is

enabled.

Right Mouse-click / Tap ‘n Hold Show context menu:

“Launch”:

See Single left mouse-click event.

“Launch as Full-Screen”:

See Double left mouse-click event.

“Add as Favorite Link”:

See below.

Applies only when app is

enabled.

Mouse hover n/a

Mouse/finger down + right/left pan Rotate cylinder right/left in synch with the actual movement:

Right apps move to the right and back in on the left

Left apps move to the left and back in on the right

Mouse/finger down + up/down pan Up zoom in until one app fills the center container

Down zoom out

Documenting Rich Interactions

Scott, B. & Neil, T. (2009). Designing Web Interfaces: Principles and Patterns for Rich Interactions. O‘Reilly Media, Cambridge, MA.

Documenting Rich Interactions

Documenting Rich Interactions

Live Spec – experiencing rather than reading

Provide direct manipulation

Keep user on same screen

Educate user

o Invitation: something can be done

o Progress: something is being done

o Freedback: something has been done

Entertain user

o Bridging loading/processing time

Benefits of Rich Interactivity

next up

User

Provide direct manipulation

Educate user

Entertain user

Keep user on same screen

Rich Applications for Great User Experiences

Usability +

Visual Appeal

=

User Experience awesome

Executive Summary

!!!

+ Rich Interactivity

Thank you!