XMind

Microsoft_ReMix09_Brussels

1. 00_ReMix_Intro

   Luc Van de Velde Director Developer & Platform Group Microsoft Belgium --- Katrien De Graeve Developer Evangelist Developer & Platform Group Microsoft Belgium --- Arturo Toledo from Redmond on Designer side Sr. Product Manager - Visual Audience ==== demos on products and case studies from BeNeLux

   1. 01. Trends next 10 years LVV

      biometric interactive panel low footprint living ambient digital intell paper integrated screen portable/environment sensor chip access mngmt simult intel translat VR integration in repair etc to simulate environment visual enhancement for environments e.g. musea

   2. 02. in 2008 presented LVV

      technologies now converging surface wall, service tables, etc

   3. 03. Microsoft Web Platform LVV

      Components: - infrastructure - platform about to launch (2nd half Autumn 2010) the Cloud Computing platform(Usher- check name)

   4. 04. Web Installer and App Gallery KDG

      1. Microsoft Web Platform Installer - 2MB footprint and free - covers free tools: server, database, framework - covers WindowsWebGallery and also PHP OpenSource apps (WP, Drupal, SugarCRM, Modle, etc) 2. Platform Installer Features: - microsoft.com/web - check availability of elements - allows point-and-click adding/removal of add-ins and components - SUSE-style dependency checking and download

   5. 05. Silverlight KDG

      - Web-browser plugin, cross-browser, cross-platform - Win and Mac, Moonlight with Novell for Linux - .Net + XAML - supported by Designer and Developer tools - From Sep 2007, Oct 2008 v2, July 2009 v3 Media support - On-Demand/Live broadcast streaming - H.264 support, extensible media format support, content protection and licensing - example www.iis.net with smooth streaming, no buffering, check quality of bandwidth and CPU resources available on the client - cases: Paratel (TV, e.g. Big Brother); Ordina (Outsourcing, e.g. NMBS and quick prototyping 4hrs), thesedays/ventigrate open sourcing light devt) RIA Productivity - line-of-business application development using a toolset of controls (60+), SEO and deep linking, etc - customizable -[ follows the same approach that was with Visual Basic / Visual Studio] - Gartner 29/7/2009 report: equalizer Silverlight/Flash for RIA

   6. 06. Silverlight RIA KDG/ Gilles Flisch @ Elia

      lowering cost of development and re-use e.g. European Central Dispatching, TamTam application, 24/7 -the code is loaded first, the data added later to optimize bandwidth use - drilldown menu by shift (morning, etc) - events and actions, in real-time developers can work on both Windows and Web applications

   7. 07. Silverlight Out-of-browser capabilities KDG

      integrate with local environment, the application can run as a Silverlight client-based application online, using the network capabilities to synch data when connectivity is detected e.g. sobees, a twitter applciation [hilarious backdrop: KDG had the wonderful idea of checking the live feed for #remix09: getting three negative comments on the poor presenter before :D] --- just Silverlight plugin, not the full .Net framework

   8. 08. Silverlight Design Tooling KDG

      Miscrosoft Expression Studio 3 = Designer <> Visual Studio Project <> Microsoft Silverlight = Developer === the project is shared by both, to seamlessly integrate === Prototyping flow, Visual Design WorkFlow, data-based design, design surface extensibility it generates the XAML automatically from the prototype === source control TVSF Silver

   9. 09. Expression Blend 3 AT

      SKETCHFLOW e.g. video game website the flow prototypes can be played in the browser without the need to have the designer tools, e..g build on storyboard-level sketches inserted into animtions, like in CeltX, but mixed with the Powerpoint animation re-use assets from photoshop or illustrator, showing all the layers like in GIMP

   10. 10. LVV

       Blend 3 + SketchFlow Expression Web Design 3 => vector graphics Encoder 3 packaging: - Web 3: Design, Encoder, TFS Integration - Studio 3: Web 3 + Blend 3/SketchFlow - EPS: all, plus Office Standard, Visio, Win XP/Vista/7 => DVD "drive" version delivered

   11. 11. From GUI to NUI LVV

       Silverlight is touch-enabled e,g, Microsoft Surface --- PRESENT Voice + Handwriting + Single Touch --- FUTURE Natural User Interface Gesture Anticipatory Expressive Respnse Environment Aware Immersive 3D Contextual === Kristof Jengens from Microsoft Solutions, hand gestures example: election show for VTM Elections - buttons recognized from the system for each political party, and automatically shows data for one, or two in comparison, allowing gestures to drag/drop, switch screens, etc - e.g. to build a coalition by example - 3 weeks to develop the application [nice joke: the developer said that he is looking to have the next election as soon as possible to develop the next version! call it priorities... and social-blindness of developers] ==== Jurgens e,g, developed application for bar, that recognize which beer or coaster is placed, and show the adv or added information accordingly [interesting application: but at a price tag of 10k per table, do you really think that a company is going to install that in such accident-prone environment as an alcohol-serving bar? a nice developer trick, but unless the industrial side follows up on the act, just a concept- maybe when Microsoft will adopt the digital paper to replace the surface, loweing the cost into 10s or 100s...]

   12. 12. LVV examples

       Aeromexico (webagency: eMakina) [claims 30% increase on sale after the new website, but nothing of the previous one is shown, to see if it is the design or the platform that improved the experience, or other activities to improve the visibility of the website]

   13. 13. Partner Ecosystem LVV

       70 registered in Belgium, of which about 50% at the Gold level DreamSpark => students BizSpark => startups first three years WebsiteSpark => smaller company, include software, host and self-host

   14. 14. Sessions

       www.microsoft.com/web Room 23: develop Room 26: Designed

2. 01_DesignerSession

   Arturo Toledo AT Sr. Product Manager - Visual Audience August de los Reyes ADLR Principal Director of User Experience Microsoft Surface august@surface.com @augustdlr first in Philips, 7yrs now in Microsoft (2 on surface) === currently Microsoft is in the planning phase for Version 4 === Silverlight and WPF (Windows Presentation Foundations) application creation options approach: WPF evolves on Windows Forms, Silverlight aimed on Web (e.g. with a Flash development background) Contact information: arturot@microsoft.com @arturot www.microsoft.com/expression => demos expression.microsoft.com => community silverlight.net all the tools are based on the .Net framework, and therefore for the time being the agencies use BootCamp or Parallex to have access to the Windows environment

   1. SketchFlow AT

      visual development of GUI elements, [akin to GIMP or Blender] available both on WPF and Silverlight --- can be used to the prototype other devices and user interfaces ---

      1. basic elements

         basic elements: 1. whiteboard 2. flow map, event-based, color-coding is allowed (e.g. green and red to show visually the decision path) objects are surrounded by panels and on-whiteboard info about the object (size, etc) [reuses logics of Visio for positioning etc, or] Autocad it is possible to add in the whiteboard comments (the "feedback" tab on the visual designer in SketchFlow), with color-coding, textually or visually, as if it were a real whiteboard it is possible export the feed-back the map is also a live navigational tool within the Sketch the objects and controls inherit properties and redesign on-the-fly the behaviour of specific objects or their "Control" reference allows to import photoshop and illustrator files [see in the intro session: it shows the layers as in Photoshop/GIMP] the player is a silverlight application, so the end-user does not need Designer [as explained int he intro session] to use the prototyping

      2. extensive and extensible library of objects and controls

         interaction and parameters:[ like in Flash or GIMP] possible to add post-it style notes, and add external sketches and storyboard-like drafts new controls can be created as packages of pre-existing or custom visual objects, with associated information and flows there are also data-based template of logic processing, e.g. address, pricelist; it includes the generation of a full dataset, with customization options on value, number of records, etc object-orientation: each container behaves as a DIV, with logic layer behaviour attached library of animations perspective transformations to manipulate planes instead of objects, to create basic 3D, as is currently done for Flash 3D there are community initiatives to create a 3D-engine for Silverlight

      3. the flow can be linked to objects

         once created a map of the flow, each visual element can link to other "whiteboard" screens by associating to the visual element a flow step, e.g. as if it were a navigational button the links establish relations the exported feedback is an XML file that can be associated to each "whiteboard" possible to aggregate multiple files, that will keep the information about the source

      4. visual logic development

         each visual object can contain attributes or custom attributes/properties, and then add further properties this is done in Expression Blend, using template data to generate the logic

      5. animations

         either on the map or the whiteboard is possible to add a "state" linked to an object e.g. create a grid around a set of objects, and then visually map the states between a "prior" and "after" possible to do animations either via "states" and their associated attributes, or via the storyboard [see following session]

      6. example: gaming website

         purpose: sketching the flow from hand-drawn sketches from navigation, to transition, to state-based animation (playing a set of images/whiteboards linked from state to state via transitions) e.g. a circular or radial listboxes

   2. MicrosoftSurfaceConceptualFramework ADLR

      "Predicting the Past: Avision for Microsoft Surface"

      1. demo

         intelligent surfaces and materials, e.g. inteligent seat surface scanning integrated in surface multiscreen integrating with available devices virtual keyboard and pointing devices 3D video conferencing VR integration of shopfloor tools integration parts DB and BoM (Bill of Material) in surface for product tailoring

      2. socio-cultural trend analysis

         [search the study on Surface User Experience] principle-driven design: a set of principles acting as a reference framework and benchmark to position each innovation 8 principles, 5 basic relating to the interaction between the user and the system (See spreadsheet) and 3 additional relating to the environmental integration 1 user interaction mode CLI= Recall = Text GUI= Recognize = Graphics NUI= Intuition = Obiects ?UI=systnthesis 2 user interaction pattern CLI =directed GUI= exploratory NUI =contextual ?UI=anticipatory 3. frequency/rate of interaction with the system CLI= high/low GUI=dbl\medium NUI=fast/few ?UI=constant zero 4. cognitive vs physical CLI =disconnected GUI =indirect NUI =unmediated ?UI=extensive 5. system behaviour CLI= static GUI=responsive NUI=evocative: evokes what happens next ?UI=fluid THIS CONVERTS INTO THE FIRST 5 PRINCIPLES SHOWN IN THE SPREADSHEET 1. principle of performance aestethics - prioritize the joy of interaction - play not as the opposity of work, but intertwined - the pleasure comes from the interaction, not the results => e.g. a travel by boat 2. Principle of direct manipulation (e.g. WYSIWYG) 3. Principles of scaffolding (how do you learn- layering e.g. in videogame) 4. Principles of contextual environments (e.g. as a way finding in an airport or transportation; specific, but embedded in the environment, also without prior training) 5. Principle of the Super-real (instead of mimicking the real environment, go beyond the literal, and gave the ) THE ADDITIONAL 3 PRINCIPLES Normal Bel Geddes [cultural references constraining the aesthetics] think of surface not as a PC in the table, but something else multitouch as a revolutionary approach, vs the evolutionary touch replacing old data input peripherals super-principles 6. social - object recognition embedded in surface 7. seamless - blurring physical and digital - suspension of disbelief - blending in a single experience 8. spatial from WIMP (windows icons menus pointes) to TOCA (touch object container action) - zoom and focus - physicality embedded: physics engine - uses spatial memory ===== A. intuitive expertise: anybody without training can interact B. NUI as a braind builder C. creates emotional connection ===== books=text movies=graphics, time, senses games= behaviour and emotional investment in the activity ====== Jean Piaget Genetic episthemology btw science and computer science formism CLI mechanism GUI contextualism NUI organicism ?UI

         1. Parallels on the 5 basic paradigms

            1. formism

               1. CLI

               2. Recall

               3. high / low

               4. Directed

               5. disconnected

               6. static

               7. books

               8. text

            2. mechanism

               1. GUI

               2. movies

               3. Recognize

               4. Exploratory

               5. dbl / medium

               6. indirected

               7. responsive

               8. graphics

            3. contexualism

               1. NUI

               2. games

               3. Intuition

               4. Contextual

               5. low / few

               6. unmediated

               7. evocative

               8. objects

            4. organicism

               1. ?UI

               2. Synthesis

               3. Anticipatory

               4. constant / zero

               5. extensive

               6. fluid

   3. StoryBoarding AT

      Expression Blend on the production side: controls, animation, behaviors

      1. Custom controls

         over 100 controls, including layout-controls (calendars, password, etc) the library controls are templates that can be customized class-oriented development: each control is a container; you can either modify an instance (a copy) or the class (the concept of the control)- this would change all the instances (they will inhering the change, as they share the common characteristics) the import of the OBJ format (MAYA, etc) is supported, and they foresee the community creating a 3D engine

      2. storyboards and timeline edit

         based on time, not on FPS a timescale allow to set how the animation will be across the time, i.e. moviing or modify objects possible to use also the KeySpline editor to manage the speed of movement/transition with a curve (speed across time) across the key frames possible multiple storyboards per object the management is by adding behaviors to objects, e.g. linking a certain behavior that will use a specific storyboard if the storyboard involves objects that have changed position from the previous storyboard, the software adds the animation from the last state reached by the objects, e.g. the baseball example, where the animation say where to go, and the system recognizes where it was, and moves to the next step

      3. animations and behaviors

         e.g. BeeHive gave it contains a physics engine to apply the behaviors (realized by developers) working on a game model, each level can be delivered via "states" it is possible to add containers, equivalent to adding movies within movies in Flash it is possible to import from Photoshop and Illustrator, intervening on the X Y Z axis (individually or in combination) inside "assets" is possible to add effects, standard or (via the API) custom currently the preview is on a timeline, but there is currently not a timeline of the timelines, to see the connections [AT answered a question from the participants- he said that they will look into the possibility to have a way to know which timelines are connected with the others and how interact]

      4. customizing standard controls

         e.g. radial listbox => visit the community gallery to see those that have been developed [mixing the custom controls with the timeline inside the storyboarding allows small size animations to deliver complex behaviors and interfaces]

   4. Future of IW and the Emotion Commotion ADLR

      1. counterintuitive

      2. two-factor design theory

         started from the Huizinga "Homo Ludens" theory a whole new mind, daniel h pink, "play" being one of the basic six attitudes - physical abundance allows to expand the spare time, shifting from a material to an immaterial society - the "experience economy": buying not the object but the experience => role of objects? www.neticons.net/prickles => the dialectic between human beings and objects smart world, richard ogle => slide rule calculator: "embedded intelligence" the emotion machine, marvin minsky => if embedded intelligence is in objects, then also embedded emotions his reflexiions are based on the James & Lange theory of emotions [see also Wiener and Cybernetics, omeosthasis] purpose: identify a practical theory of emotions to apply to designing same physical stimuli within different contexts deliver different experiences in software: videogames- talked to the Halo team, said that the most used model in videogames is the " MDA: A formal approach to game designe and game research" [find the paper online] Mechanics - Dynamics - interaction, creating an emerging behavior Aesthetics- conclusion drawn from the dynamics of the system

      3. Halo example

         first one-person shooter succesful on a console two extremes: 1. Mechanics: snap-to-target Dynamic: too easy 2. other extreme direct relationship people tend to overcompensate solution tested from 1 to 2, finding a slow amount of gravity attraction, so that the user thinks of a direct relationship, while instead it is snap-to-target

      4. in practice

         it is starting to be embedded in products, e.g. adding a small feed-back in products that relates to aesthetics of the experience, not just the dynamic system output -> user input => magic

      5. future

         emotional value of the user experience is becoming more important emotional value as important as the utility break down model to mechanics, identify and fine-tune the mechanics, to match the system output to the emotional => cognitive frame the fifth element: - like a pixel: today, 3 components: R G B - fourth component: a sensor - fifth component: e.g. a camera (organic, painted, etc)

      6. demo

         EXAMPLES SHOWN IN THE VIDEO interactive translation surface wall becoming integrated with other peripherals gestures--based calendar context-based interaction, e.g. on a plane the traveller can access all the inflight information and arrival, location, etc in office, possibily to interact via surface to retrieve information linked to specific items through interaction, not text- or query-based retrieval [saw a business intelligence product already working like that- check with IEEE] adding sensors, a business card can interact with the mobile to show visually with the "embedded" interactivity available in the environment how to reach the person voice recognition conceptual/contextual information retrieval seamless integration of peripherals digital paper interacting with the information source, e.g. newspaper intelligent building access to info from sensors remotely