Web Standards and the future of User Interface Design - PowerPoint PPT Presentation

Loading...

PPT – Web Standards and the future of User Interface Design PowerPoint presentation | free to download - id: 2e727-NjZmM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Web Standards and the future of User Interface Design

Description:

Marted 22 aprile 2008, h. 15:00. Aula Seminari, seminterrato ... Unconventional : www.etsy.com (choose Time Machine) Source www.goruneasy.com ... – PowerPoint PPT presentation

Number of Views:382
Avg rating:3.0/5.0
Slides: 60
Provided by: Stph9
Learn more at: http://stephire.free.fr
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Standards and the future of User Interface Design


1
Web Standards and (the future of) User
Interface Design
Seminario Martedì 22 aprile 2008, h. 1500 Aula
Seminari, seminterrato Dipartimento di Scienze
dell'Informazione Bologna
  • Stéphane Sire
  • (stephane.sire_at_epfl.ch)
  • École Polytechnique Fédérale de Lausanne
  • CGC/MEDIA

2
Plan
Web Standards and (the future of) User Interface
Design
Part 1
Rich User Interaction
Part 2
Iterative Design and supportive technologies
Part 3
SVG and alike
3
Part 1
  • (the future) of User Interfaces

Rich User Interaction
4
Evolution of User Graphical Interaction Styles
Desktop
Web
Mobile
Command Line
WAP
Point Click (hypertext)
Direct (1983) Manipulation
HTML Forms
WIMP
Rich Desktop Application (RDA)
Rich Internet Application (RIA)
iPhone and alike (touch based)
Rich User Interaction
5
Characteristics of Rich User Interaction
  • Better Graphics
  • Extensive use of Animations
  • Creative layout models
  • Borrowings from other interaction styles
  • Better feedback times (AJAX)

A new vocabulary for design
6
Better Graphics (1)
  • Layers
  • Painter's model of rendering
  • Compositing operators
  • (Porter Duff)
  • Clipping and masking
  • Applications
  • Layout based on layers (see later)
  • Non rectangular windows
  • Objects with holes
  • Layer's effects

Source Digistrip (CENA)
7
Better Graphics (2)
  • Color models
  • Alpha channel (RGBA)
  • Gradient colors
  • Texture filling
  • Applications
  • Light and shadows effects
  • Glossy effect
  • Reflection (cow.neondragon.net/stuff/reflection/)
  • etc

8
Better graphics (3)
  • Shapes lines
  • Stroke styles
  • Joints
  • extremities
  • Bézier paths
  • Very efficient algorithm to draw it (De
    Casteljeau algorithm)
  • Applications
  • Rounded shapes

9
Better Graphics (4)
  • Pixel Effects
  • Anti-aliasing
  • Filters (blur, bump mapping, etc.)

Source www.corzo.com
Source www.treebuilder.de
10
Extensive use of animations
User's guidance
Visual state transition
Source www.lemonde.fr (choose Journal
Electronique)
Source www.joehewitt.com/iui/samples/music.html
System state change
Source www.panic.com/goods/
11
Animation Tricks
  • "Exageration"
  • Pace
  • Application Kinetic Scrolling (video on youTube)

Author's made movie from www.laredoute.fr
Author's made movie from www.youarethemnodel.com
12
New Layout Models (1)
  • Layered information

Source maps.google.com
Source www.natoora.com
Source www.laredoute.fr
13
New Layout Models (2)
  • Contraction/dilatation
  • Accordion
  • Continuous surfaces
  • Linear (ribbon) www.gucci.com
  • Two dimensions www.goruneasy.com
  • Unconventional www.etsy.com (choose Time
    Machine)

Source www.yomiuri.co.jp
Source www.goruneasy.com
14
New Layout Models (3)
  • Fixed layout Animation
  • Scrolling Ribbon
  • more information with constant space within the
    page
  • Layers Animation
  • Drawer windows
  • Docks

Source www.tf1.fr
15
Borrowings from other styles
  • Direct manipulation
  • Drag drop but still marginal
  • Post-WIMP techniques
  • Bifocal menus
  • Video-games
  • Rotative menus

Source www.wat.tv
Source www.amazon.com
16
Better Feedback Times with AJAX
  • No more page reload and full page refresh
  • Increase reactivity
  • Requires special tricks to get user's attention
  • Applications
  • Auto-suggestion input field (see Google
    Autosuggest)
  • Dynamical queries
  • allows some forms without no "Submit" button
  • or allows to pre-filter results before submitting

Source www.trivop.com
Source www.darty.com/nav/achat/telephonie/telephon
ie_mobile/telephone_portable/guide.html
17
Rich User Interaction (summary)
  • Graphical design
  • To increase intuitivity
  • To create emotions
  • Emotions increase perceived usability
  • See Don Norman last book "Emotional Design"
  • Requires multi-disciplinary teams
  • User experience (interaction) designer
  • Visual designer, Motion designer
  • Developers
  • etc

(video on youTube)
18
Part 2
  • User Interface Design

Iterative Design and supportive technologies
19
Product Development Process
Reprinted from "Sketching User Experiences"
(Buxton, 2007)
20
Iterative Design
21
Close to Agile Software Development
  • Agile Manigesto (source agilemanifesto.org)
  • Individuals and interactions over processes and
    tools
  • Working software over comprehensive documentation
  • Customer collaboration over contract negotiation
  • Responding to change over following a plan
  • See also Extreme Programming
  • Web version
  • the permanent Beta

22
Examples
Source Nielsen
Source Hiser
Source Alex Poole
23
Example from
  • Air Traffic Control Strip
  • DMAN project

24
Classical development cycle
Executable Code
Sketches Storyboard Wireframes IA diagrams
Interaction, Visual, Motion, … Designers
Users
Programmers
Browser Plugin Runtime Env.
Feedback loop
How to increase the number of iterations ?
25
Model Driven Development Cycle
Graphical models Animation models Other models…
Interaction, Visual, Motion, … Designers
Users
Executable code
Browser, Plugin Runtime Env.
Sketches Storyboard Wireframes IA diagrams
Programmers
26
What is a model ?
  • Example from

27
How to represent a model ?
  • eXtensible Markup Language (XML)

id"Background" id"CatchZones" id"RWY" id"DMAN"
28
How to Edit a Model ?
  • Specialized editors
  • Example for graphics Adobe illustrator

SVG File
29
A short Example
Interaction Designer
Visual Designer
Graphical Model File(s)
Programmer LET's DO IT !
Example from Adobe dev web site
30
Adding More Models….
Interaction Designer
Finite State Machine Models
Visual Designer
Behavior Modelling with State Machines
Graphical Model
31
Example from
Paper Mockup
Airnet Project
Prototyping
Visual Design
Integration
32
Model Driven Summary
  • Models
  • Specialized editors
  • Easy to move from one platform to another
  • Code
  • Programming skills
  • Hard to maintain
  • Less portable

Models (XML)
Models
Code
Code
33
Part 3
  • Web Standards
  • for User Interface Design

SVG and alike
34
W3C standards (1)
  • Mainly "Models"
  • XML based languages
  • From "Draft" to "Recommendation" status
  • Models both for output and input modalities
  • HTML, XHTML, XForms, SMIL, MathML, VoiceXML,
    SCXML, InkML, EMMA, …, and SVG
  • Some "Code" too
  • Application Programming Interfaces (APIs)
  • DOM (3 levels)
  • API for manipulating models loaded into memory as
    trees
  • Many more APIs (events, load and save,
    progression, etc.)
  • XMLHttpRequest
  • Ajax programming

35
Web Standards and MDA
Definition of Interactive Components
Imperative Prog. Lang.
XML
Markup Only
Today Web applications
XML
Future of applications
Code Behind
Instantiation of Interactive Components
Today Desktop applications
Imperative Prog. Lang.
Markup Behind
Code Only
36
W3C and Rich User Interaction
() simplified with specialized toolkits
(scriptaculous, jQuery, etc)
37
SVG History
  • Scalable Vector Graphic
  • Started in 1998
  • 1st draft February 1999
  • SVG 1.1 recommendation 2003
  • http//www.w3.org/TR/SVG11/
  • SVG 1.2 Tiny candidate recommendation 2006
  • http//www.w3.org/TR/SVGMobile12/
  • SVG 1.2 Full to come later
  • Working Group with main software editors
  • Sun, Adobe, Apple, Microsoft, Corel, Ilog, HP,
    Canon, Autodesk, etc.

38
SVG vs. Flash
() see http//www.w3.org/TR/SVG/minimize.html
39
Authoring Tools
  • Graphical Editors
  • Sodipodi, Illustrator, Corel Draw, OmniGraffle
    Pro, …
  • Specialized Editors
  • Ikivo Animator animations
  • Automatic generation
  • Client-side Javascript generation
  • Example from http//www.destatis.de/
  • Client or server size XSLT generation
  • demo from www.treebuilder.de/default.asp?file2504
    84.xml
  • Automatic conversion from/to other formats
  • From MathML, AutoCAD, Visio, etc.
  • To PDF, PNG, etc.
  • Manual authoring )

40
Players
  • Adobe to stop its plugin support in 2009…
  • Adobe to switch to Flash/AIR ?
  • … but becoming native in Web browsers
  • Opera, Safari, Firefox, …
  • open source rendering libraries (Cairo)
  • Not directly available in IE…
  • Microsoft to switch to XAML/WVG with silverlight
    plugin
  • Standalone players
  • Batik (Java) - contains a useful utility to
    generate SVG fonts
  • SVG Tiny 1.2 on mobile phones
  • www.bitflash.com/mobile_primer.html
  • www.ikivo.com/02player_svg.html
  • And more…
  • See list of implementations www.svgi.org/

41
Drawing Basic Shapes
  • Shapes
  • Rectangles
  • Cercles
  • Ellipses
  • Lines
  • Polylines
  • Polygons
  • Text
  • Attributes
  • x, y, width, height, rx, ry
  • fill, stroke, stroke-linecap, stroke-linejoin,
    stroke-miterlimit, stroke-width, …
  • opacity, stroke-opacity, fill-opacity
  • ...

fill"lime" stroke"blue"
stroke-linejoin"bevel" stroke-width"3"/
42
Drawing Arbitrary Shapes
  • Path
  • outline of a shape which can be filled, stroked,
    used as a clipping path
  • defined by connected lignes, arcs and curves.
  • Base attribute
  • "path data" complex vocabulary
  • "," and EOL are allowed in "path data", spaces
    are optional between a command and a number (to
    compress data)

fill"red" stroke"blue" stroke-width"1" /
43
Path data vocabulary
  • Each command is named by a letter (M moveto L
    lineto, etc.) followed by a coordinate, either
  • Absolute if capital (e.g. "M")
  • Relative to the previous point if lowercase (e.g.
    "m")
  • M and m
  • Move the point to the given coordinate
  • Create a new sub-path starting at the origin
  • Syntax Mm (x y) (x y)
  • The second group (x y) is interpreted as lineto
    commands
  • Ex M100 100 200 200
  • L and l
  • Draw a line from the current point to the given
    coordinate and draw lines between subsequent
    given points
  • Syntax Ll (x y) (x y)
  • H and h (V and v)
  • Draw a horizontal line (vertical) from the
    current point to the current point incremented
    with the given number
  • Syntax Hh (x) et Vv (y)
  • Z and z
  • Close current subpath with the last point defined
    with Mm

Cur point
x
M 100,100
L 200, 200
44
More path data vocabulary
See details on http//www.w3.org/TR/SVG/paths.html
45
Defining reusable graphical components
  • Definition of a component
  • Group element
  • Container element for grouping graphics elements
  • Can be nested
  • Its attributes are inherited by its descendants
  • Instantiation of a component

d"M 0 50 35 25 70 50 Z"
stroke-width"0.1cm" fill"none"/

stroke-width"0.1cm"/

use xlinkhref"shape" x"70" y"60"/
46
Declaring graphical components without drawing
them
  • Everything that appears in a section will
    not be drawn
  • It will be available to be reused in other parts
  • This is a way to group resources (at the
    beginning of the file)



stroke-width"0.1cm"
fill"none"/
50" height"1cm" stroke-width"0.1cm"/

" y"20"/
/
47
Positioning graphics
  • Most elements can be positioned with x and y
    within their parent container
  • Groups are also used to apply transformations
  • Other transformations include rotate, skewXY,
    scale and matrix
  • This is equivalent to associating a
    transformation matrix with each group (and to
    redefine a new coordinate system for the
    descendants)
  • Transformation are cumulative in nested groups
  • Current transformation matrix at each
  • Obtained as the product of all transformation
    matrices up to the parent


fill"lime" stroke"blue" stroke-width"3"/

48
Painting and Coloring
  • Colors applies with different attributes to
  • Strokes (attribute "stroke")
  • Shapes interior (attribute "fill")
  • Colors are rendered by a paint server
  • The attribute URI reference selects a paint
    server
  • Solid colors (e.g. "orange" or "50A619")
  • Gradients or Patterns (e.g. "url(myGradient)")

top offset"20" stop-color"39F" /


0" width"90" height"40" fill"url(Gradien
t01)" stroke"blue" stroke-width"3"/
49
Masking and Clipping
  • Masking
  • Attribute
  • mask"url(mask)"
  • Draw mask in an offscreen buffer
  • Convert it to gray level image
  • Composite with the masked layer

Layer1
Layer2 Masked by Layer3
Layer3 Mask Not visible
Result
transform"scale(1 -1"/
50
Animating Graphics (2)
  • Each graphical attribute can be animated
  • animate element
  • Animation description based on SMIL2
    (Synchronized Multimedia Integration Language
    level 2), W3C http//www.w3.org/TR/smil20/
  • Animation describing
  • Attribute value variation
  • Time variation
  • Including time effect (slow-in, slow-out, etc.)


from"200" to"20" begin"0s"
dur"5s" fill"freeze" /
51
Animating Graphics (2)
  • Other types of animation
  • Animation along a path (motion tweening)
  • animateMotion
  • Special instruction for color animation
  • animateColor
  • More advanced animation can be built with more
    programming (e.g. Morphing)
  • Exemple Dragicevic, Artistic Resizing (UIST,
    2005)

Click image to see movie from Web (if still
online…)
52
Metadata
  • Images can be describe with
  • Can contain any RDF data
  • Standard element to give a title
  • This can be useful for
  • Accessibility (screen readers, …)
  • Indexing image file (do not forget it's text
    files)

Company sales by region
This is a bar chart which shows company
sales by region.
53
Extra features
  • Pixel filers
  • Markers
  • Glyphs
  • Text along a path
  • Adding Interactivity with Javascript Programming
  • SVG APIs
  • SVG DOM API for scripted interactivity
  • Network communication
  • …
  • Much more … explore by yourself
  • Mozilla SVG home http//developer.mozilla.org/en/
    docs/SVG
  • Lot of fascinating examples http//www.treebuilde
    r.de/
  • SVG-Wiki http//wiki.svg.org/
  • W3C SVG Home http//www.w3.org/Graphics/SVG/
  • User Interfaces examples developped by IntuiLab
    with its own toolkit http//www.intuilab.com/gall
    ery/

54
Conclusion RIA Standards and Technologies
XAML
Flex/MXML
XUL
Shockwave
Flash/SWF
WVG
SVG
HTML
HTML 4.0
X-HTML
CSS
XMLHttpRequest
Ajax
IFrame
Javascript
DOM
Silverlight
IE
Konfabulator
AIR
Firefox
Mosaic
Netscape
PDF
OpenGL 2.0
Direct 3D
OpenGL
X11
2006
1987
1992
1994
2002
2004
1990
1996
1998
2000
55
Credits
  • Web sources indicated directly on the slides,
    otherwise (many thanks to them)
  • Illustrations
  • p7 CENA Digistrip www.tls.cena.fr/divisions/PII/t
    occata/composants/digistrips.html
  • p24 IntuiLab DMAN strips (courtesy of Céline
    Schlienger) www.intuilab.com
  • p32 IntuiLab Airnet (courtesy of Stéphane Vales)
    www.intuilab.com
  • Demos
  • p10 SVG Slot Machine www.treebuilder.de
  • p30 Adobe Airbus A321 Panel demo
    www.adobe.com/svg/demos/main.html
  • Book
  • Sketching User Experience, Bill Buxton, Morgan
    Kaufman by Elsevier inc. 2007
    www.billbuxton.com
  • Article
  • Combining SVG and models of interaction to build
    highly interactive user interfaces, S. Chatty, A.
    Lemort, S. Sire, J-L. Vinot, SVGOpen 2005
    www.svgopen.org/2005/papers/CombiningSVGModelsBuil
    dInteractiveUserInterfaces/

56
Extra Slides
57
Complete SVG File Example
svg version"1.1" baseProfile"full"
xmlns"http//www.w3.org/2000/svg"
xmlnsxlink"http//www.w3.org/1999/xlink"
width"8cm" height"6cm" id"Gradient01" stop-color"39F" / stop-color"F3F" / id"shape" width"1cm" height"1cm" stroke"blue"
stroke-width"0.1cm"/ height"5.9cm" fill"none" stroke"black"
stroke-width"1px" / xlinkhref"shape" fill"BBB"/ y"1cm" xlinkhref"shape" fill"url(Gradient01)
"/ fill"url(Gradient01)"/ xlinkhref"shape" fill"blue"/
58
Web Standardization
  • W3C Agenda for Rich User Interaction
  • Markup languages
  • HTML 5 ? XHTML 2 ?
  • SVG Tiny … SVG 1.2
  • Audio and Video
  • Styling with CSS3
  • Application Programming Interfaces (APIs)
  • XMLHttpRequest (AJAX)
  • Cross-domain XHR
  • No integrated programming environment !
  • W3C is not alone…
  • Microsoft XAML/WVG
  • Execute in browser plugin (Silverlight)
  • Adobe FLEX/SWF
  • Execute on desktop runtime environement (Apollo)
    and browser plugin (Flash)

59
Client Side Javascript Toolkits
  • Fix "incompatibilities" between browsers
  • Adaptation layer
  • More efficient DOM manipulation
  • Animation support
  • Prototype scriptaculous
  • Mochikit
  • Jquery
  • Yahoo UI
  • Dojo Toolkit
  • etc.
  • Major sites starting to adopt them
  • E.g. Prototype Scriptaculous on Apple
About PowerShow.com