Bestand wählen
Merken

Physical Design

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
a the and and the and you and and so we all went to great talks already also stuff we've heard a lot about user experience and I don't think that's a coincidence I think were clearly community gets the value of user experience and flows directly out of some of the core and the value a we work hard on shared solutions and infrastructure so that we spend progressively less and less time on that militia and the work that's left over the work we never get rid of is the hard stuff rates deciding how to this generated a great experience for our users and when you think about user experience design most people think right away about building experiences for end users raise your friend and that as you do that a lot of you work with somebody was title is actually user experience designer and those who got something of awful a lot but I want to argue that every developer period full stop is always easier to create design but sometimes uses an end user sometimes you use is another developer is going to happen track your code sometimes that user is your future self that you need a helping work Our approach punishing when you take a magnetic code months later the again I so sigh is going to talk on talking about your experience and this 2 key audiences of his experience and valid today the 1st is the end users that were serving and building grace periods for that but the 2nd of course is the great experience for Amber development and those are the 2 sides of the same point out think you could have 1 without the other so
so that's the that's the kind of big picture of where I'm going with this time so so computers right there like the really
abstract and that's it's also about and almost infinitely flexible right you're the kind of things you can presented the user it almost just by your imagination in that that's for the things that makes mosome but it's also exactly why computers so intimidating and frustrating for so many users and so many people because we have all this amazing machinery in our heads In our eyes for processing the physical world right the physical
world is what our our brains evolved to process we have all these cues in hints that we take advantage of it take to do it for granted I got that almost every human being can do and it makes its ways of thinking ways of perceiving ways of understanding where you are and what you're doing with by around you when you take human beings and you drop them into a screen world with very abstract shapes and things that don't behave physically they get lost in and you actually disable whole chunks of their own ability to think and perceived as a lot of ways human thinking proceed and we leave a lot of time even themselves to a very abstract visual are kind of in a square box no that's that's actually a really big problem was bigger than any we can address right now there were where talk about attacking this problem in chipping away at the larger problem is 1 that we are gonna work out over the long term as we build better and better interface acknowledge but we can talk about at least making the visual piece that we do have control over much closer to the physical reality and we do that by bringing in constraints so you compute can show anything right you don't have to pretend that the object on the screen have mass or momentum or that be cast shadow right they can go anywhere they want when the screen that are really anywhere right but that's the the weird human being and so when we constrain ourselves and would put in the extra effort to pretend we're physical that's the underlying reason we see only that's why we feel so great about user experiences of more physical you so on some some of our talks about imaging Google's material
I expect material design is the the wonderful document you should check it out and we're going to and yesterday we remember the design is not about how it looks like it's about how it works and so even if you have no interest in making your app with like Google's that's that they're right when they designed it because I'm the principles and there are actually gets and they just share them with my earlier point about physical constraints so
here's a quote from the introduction to material designed by and I've highlighted in bold letters without breaking the rules of physics and the doctor isn't a lot more detail about what they mean by that but there's you know the kind of examples are things like 232 object should not really be be able to pass through each other or now you know things that aren't average actually catch shadow or things don't accelerate instantly from 0 to going facts and all these little things
fundamentals of lake surface and movements the it is that we're moving again where motion respects and reinforces the user as the prime mover so this is why we care about most right we had a great demo of all those column argument nations on that's exactly what I'm talking about the reason s of his so killing the reason we immediately get it it's appealing to that part of our mind that makes these things seem more visible to us so that was the key question is how does
this fall into 2 members of a broader architecture and this is where we switch switch the focus from the experience of the end users expense of him and all right the the challenge that we always have we developed and and evolving together the community is to find a great API is that we cannot live with and work together with and build great conventions until then move on to the next week so the this or among the talk about today is where you fit all the stuff in architecture and how you do it so animations and motion in general right you when I so I guess I should 1st point out right on pays terms gingerly innovation can mean a lot of things out murmur the principle I just have 1 last slide about the user the prime mover and that's really the canon image we're talking about the user does something and then we have smooth motion in reaction to leave as opposed to the kind of information that we have always had in terms of like flash every half the weapon monkey you're know that's not getting lot so animations really live in the gaps between what was in what become by the animation is what was happening in between what they were sick with state was becomes and so it's not really something that the property of your save for example a template In number because the template is the static thing at the end the you have had that before we have a template happen at the conventions that were great of so you need to find a place for the animation that is neither here nor there but in between and so that was the the inside that led me to about published liquid fire animation library but back in July which came out of some great conversations in and and it talks at i didn't have plastic so on and do a analyzes little demo to liquid biased and talk about how we think how we find a place the picture for all these kinds of behaviors so the 1st step of course is installing yay forever we just have 1 committees style I right now we do have to branches because of all the evolution amber on this is a project that I care a lot about supporting across the whole wide range so it actually is tested in CI against everything from member 1 equality and working and supporting that and I'm really excited to be another 1 0 alongside inverse to 0 this summer in yeah that's a good thing and and that's really kind my point about this whole demo which is that we want this to be something every American do the and I it shouldn't be that in the big extra deal the goal is to make it so easy is almost why we do not reveal the rich interactive application J so I'm in so the
a In and because of her performance so
just this is number out and make an account website is not actually a rat I did not have the source that it is the site and it was kind of nice example data the play with so I would think that I believe that it evidently did you get before got claimed by ideas that have a lot of and this is kind of with them actually you can take somebody else's say grab all the static output not even knowing of was symbol on the whatever I drop application template with embassy alive in you have an rat right you decide to marry incrementally factor into actual graph you they get pieces that make them templates but they do better data fitting models is often added to this again also is very simple right we have our list of speakers here and 0 when you have consistent and I wasn't thinking the more
that's the the greater back such commenced OK a bit so
but this is a very stock and wrap the point of this is to say there's nothing up my sleep again is is a standard I'm wrappers immersed in everything's you attendance and then we have a speaker's list but they do have the size of physical bounteous right now that's very simple or that once ancestral say on uncover transit up a little bit right that's nice self-contained rate is the kind of there's a lot of little subtle details in building physical design their self-contained enough you don't need to go to use something like a great a lot of little details these having their right as as you design as go and those were the easy 1 because they're not they're they're local that's where talk was the less local things that I have a shuffle button here that just reorders the people going and we can go into the
details of each of these people and I've also just to give us something else at fair and put it in mine editor
very quickly click can edit written and
change something incident go back so that's a simple demo so we wanna give some nice richer and richer interactions this and so on so we do that and himself liquid
fire have better reading let's move up on working in so by the 1st energy you in
I'm switching back and forth to the code and the demo among the listed to like this the
and Hey so the 1st thing mn do is this is my so I am might topple roses Cullen recap that it gets and and I had another B between a header and footer component that I this is the stuff like a copy of of say and I I made an outlet constitute a liquid out that come from the library the and that's not gonna change any of my behavior yeah well at 31 subtle thing with secular as you can
notice so when I go to the next
you I have 1 little sort of
motion my foot is going up and down so that's the 1st observation about what we're doing here 1 of the 2 key things about putting image into your existing applications is the management of context and flow in your document the right all no matter what kind of animation you're trying to put in whether you're implementing them on the Web animations API on I my default when I used in this library velocity against when using CSS transforms a lot of these things work best if you are absolutely positioning your pattern but that's a real thing valued is laying out a normal flows you 1 of the big advantage of all the kind of layout that you do normally in your near your templates in CSS our so this is the 1st thing you'll notice is that the look out is is a smart container for it is actually not interrupting our photo universe as it would drop in the but it also has this behavior in notices this stuff changing inside it and will measure the before apostates smoothly change so that I'm already during the littlest jumping and was not doing things yet so the
next thing we're going to do go to my next
change he's and finally the things yes even look at the size of of the so thank assuming there yeah the on so the next thing to do is I'm pretty new filed apps last transitions IJS in this is a conventional thing from library it's the CIA physicians file you could think analogous Hirata map intended to be a global place together of rules about how you behave and this is kind of important things you'll notice that influence the liquid outlet that I added and sediment configuration about how outstanding and I think that's the wrong place because that only that right now it might only be running these 2 rats that as as application rose right we still want have big space refactored understanding grow and you can have varying so sophisticated reasons for ending in different ways at different times but where you can express just by a but a few properties are not component so that's why I came up with this idea of having a separate transition maps the that the layout logically in in a kind of imaginary physical space were all year where your routs and components in use how they relate to each other so in this case the I'm using to constrict constraints a from out straight interaction strength and are saying in the same way used to use an of mostly
regions come from so already read you better know right we're going to fit nicely from 1 next
Alytus that the fate happens when I go
from the list of all the details doesn't
happen and return I the as because my rules here directional right I said that the from router after to be the speakers so because this is the because this is directional and because directions very common thing that we have a short for that the right we can so we can swap it so that we now have a separate things for both the forward and the reverse
so let's see now we know that for so the important thing here is that we have a way to declare a separate from are counted knows ahead haven't had my templates this was a public stock application I'm beginning to add this behavior without putting a stamp of the complexities that now let's underwear that the emission comes from and how it's implemented because
this actually 1 of the things I don't think people have appreciated even some people who use liquid fire other serve that's the man with vigor the
this is the wrong 1 but the service to the simple transitions so I want to show you a kind of minimalist example of how you implement animations because I think a lot of people those of you may have tried out this library at 10 dB using the handful building animations that I have have figure to left to right up and as greater for therefore but 1 of my goal is to get us to arrive a comfortable API with composable extensible ways to define an emissions and the really just drop them into ever adults and you be actually write a cool animation but in a number out and published in some delta just put it there at and put in the transition up use it and so this is an example here of very straightforward fate animation in this case I'm using velocity which is a pretty nice animation library to do the actual emissions but you liquid is an animation library really all it is is a way to organize and replication and give you a place to put the animation call and so In this case I'm using velocity but that's not all required you can use your CSS 3 confirmed here you can use your web API just like the polymers that we saw another top also kind things can go so your call all has to do is it receiving a context it has things like the old element and a new element of the ball even down are the new 1 is invisible and so on and there are absolutely position for you based on where they're going to end up in the final flow that that's the that's about the hard Scot work building when he had behaviors is getting at all set up and that's really the the point of where the price any set of intonation and letting the drop in something is going to do in this case were going on the old thing pass the 0 and then once the promises over image the new thing so that's the 1 and that visibility visible that's the shorthand that velocity give us to bring it back bring invisible the study image so look at we don't get anything so but
you the next thing so up
till now this is that people of Palestine if they if they take that Larry banana surface in Europe so I mentioned you really want to be able to compose rich behavior is not a smaller pieces and out I think now as approach a 108 API I'm settling on a much simpler way have them at this step and here's an example of a new transition called explode no explode doesn't by itself actually move things around what it does the using gives you the ability to then
add is in a separate pieces of your page separately River exploded the all the new views of thick new here means on the new viewfinder image and then use the to a condition on it and then the kind of at the 2 s at the bottom of the everything else to match and so
now when I go over that image the final indigenous coming up from the bottom up this lets us slow down so is you
better I think that's my next committee yeah so and show you that all of these animations they can take parameters to right we passed through when you recommendations they can just receive arguments just
function should so now they she
goes lower and you can see a little better with the from going so now let's take a
look at that because we have this explode capability to explode is really Urban every transition has both the old and new element there were comparing explode is no difference they can match up elements on the old elements the new so it's which to understand matched by the so looks like this I'm a state matter I did speaker ID no that's just an actually that but I'm elements whereby honestly gradient adaptive most accessible an
together really that there we go right so there is here a tentative future and directions so that's in
the the reverse the reverse is very similar worsening explode match match by the speaker ID flight to your partner used to but we're switch that the underlying 1 for all the back and so the other direction
so now will have it too and again matters and so you know I didn't do anything to my template again this is still stock and so when I'm designing those that before stating that after the i don't have to think about my animation I can go and then afterward up and I can I can be factored as a layout as long as I still have those elements there so the match there is no work to do so and so this flight to innovation actually you know it's amplitude same I think when I showed you the point of this is that is a measure of the initial and final positions of those elements and do nicely transition across and so after the great polymer type it's a journal conditions and you know we asked our speaker brian pointed out that that no 1 what people as web and is it gets really cool so I said yeah that's a good idea in so I
reinflated my bias in the Baptist now I re-implemented the flight you on that API instead and this is it doesn't really can fit on 1 screen but the 1 that it's actually kind of more verbose safety and velocities and biggest reason for it is that at the last if you break out all the separate pieces of the transform property and in make them separately because the merging for you and I in a CPA you don't also added the promise wrapping myself but that's good this truck over conditions map in assessing 5 to we could say whether flights you and yes please
sit anyway thank you yeah the reversible 1 of
them's going 1 way and the other is going the other ready using different at the azimuth directions but look pretty close actually but this is a little bit of subtle weirdness in the Web there 1 just because it's using a different using function in my back and is using right now of easy to fix this is pretty good for doing it in like 10 minutes of active right so
if so let's let's to some different things now so it suffices to 1 illiquid outlet and as an example of a in a hot temper helper and that is yours has some topmost thing it is stable right that's that's kind of the pivot point you can the things that you need the animated all the some some topmost point that is the entry point for all the things below that are going to move around so a maybe like the whole page you might give your topmost view but as I said 1 and so the liquid out is 1 of those and I'm here I'm at inserting in liquid with which is another now all these name analogous to the built-in help raise a number outlet with if we get those on and they have the same basic semantics and the point of liquid with is you get to think of this and you'll see this rigorous using the the block grant syntax to yield up current model a liquid with model as current model now this is using a really nice new stuff that the block grants on marks for us you could think of this as internally is there and the each it's going to yield more than once with different versions of that model as a change that's how we get multiple things and not so by wrapping are this so the model here this is a list of speakers that the model is a list of by putting a liquid each now you have the ability to target that
discrimination so let's jump to the next Committee an an election this was me
changing assume this just reverse you still so we have but if you go yes I'd say the rule yet and I skip that part
of q so we need a transitional to returning the script that had no it was this was the of yeah yeah OK is a good thought of us and is going to do an intermediate when there is
a is a more boring but with vertical and so yes so and these guys so all doing here like fixed operate on and use the sword differently and the liquid with with is because is bound to the list and say all this this is changing I mean a whole lot the old 1 keeping you down render the new 1 invisible many delegates to the transition mapping service and say i've got all the stuff do you 1 animated right and so in this case the transition
rule years is this 1 so here Museum of different kind
mapping and say and this is no not rats involve great I'm saying for a child of the speaker icons elements use export explode matched by speaker unified to each other and so this is all in all the configured takes and you that that thing and we have it is easing function and that's why the balance nicely so this is a this index what the users to give spring values this week
so the link if their final location they bounce little need for yeah so let's so let's show off 1
more thing so I that we have this this
interaction here right where we can edit let's make
to so that's the I don't know where I was my commits we have to just love it just over there not the purity of yes so his or his the rule already that can do it on a red incision for the liquid if helper and so and when they want their all these things were missing when when to do what is all constraints In helper to model child of the root from right all these just constraints and a rule matches and all the constraints that so this case I find help liquid is and I'm going to stay true but the model in the case of an if is the predator passing if the going to true use of if it is going from true that's their state we to death and so then the template that's the speed here so before I had if editing as the liquid defending so that now this element will respect the transition rate and financial there is
a a very good but so Mr. this so the so that's that's a demand so that's the point of the way you were trying
to date this stuff In so that's not just of inexperienced users big face and redevelop and some very excited to be moving this for a while at the i I that attention these coder relating to yeah 0 and so that's the but if and so is my when I did mention is 1 of the 1 mentioned build Amber paper but that's it project started to try to give you out of the box components that have the the Google material design features and it doesn't have a lot of the really rich happy emotions that I was showing but we'd love to get those all together make it actually work for people were interested in doing that and it's the article presents a check it out they have some need really need already have things like inputs and radio buttons and buttons that have those nice nice behaviors we see the radiating action out at on the together news sites that they considered to proofreading in detail and athletic together fire and we I'm really excited to have people computing without really great contributions already and it's a wonderful to see people filing use fixing issues is great so I would have actually set of it is that we said that I think I knew exactly what the 108 I was we were done it was pretty go but glamor really exciting actually again unlocks some newer things I think that might let us simplified even further and be able to possibly cut down the number of different and help you need to just 1 and so so what's great things before we do the beta in June the for the 1 0 and I have tried out of the country they thet and and and a a
Fehlertoleranz
NP-hartes Problem
Weg <Topologie>
Validität
Speicherabzug
Softwareentwickler
Bitrate
Frequenz
Code
Versuchsplanung
Unendlichkeit
Rechter Winkel
Korrelation
Computerunterstütztes Verfahren
Abstraktionsebene
Schreib-Lese-Kopf
App <Programm>
Nebenbedingung
Impuls
Shape <Informatik>
Punkt
Quader
Kategorie <Mathematik>
Abstraktionsebene
Physikalismus
Ruhmasse
Term
Objekt <Kategorie>
Rechter Winkel
Korrelation
Theoretische Physik
Gamecontroller
Abschattung
Bildgebendes Verfahren
Touchscreen
Objekt <Kategorie>
Parametersystem
Fundamentalsatz der Algebra
Demo <Programm>
Primideal
Raum-Zeit
Physikalismus
Schlussregel
Schlussregel
Objekt <Kategorie>
Fundamentalsatz der Algebra
Flächentheorie
Theoretische Physik
Mereologie
Abschattung
Attributierte Grammatik
Binäre Relation
Demo <Programm>
Punkt
Kategorie <Mathematik>
Template
Inverse
Flüssiger Zustand
Zahlenbereich
Interaktives Fernsehen
Gibbs-Verteilung
Kartesische Koordinaten
Flüssiger Zustand
Fokalpunkt
Term
Rechenschieber
Flash-Speicher
Spannweite <Stochastik>
Differenzkern
Rechter Winkel
Evolute
Programmbibliothek
Projektive Ebene
Computerarchitektur
Glättung
Information
Bildgebendes Verfahren
Aggregatzustand
Web Site
Graph
Template
Gewichtete Summe
Mailing-Liste
Symboltabelle
Kartesische Koordinaten
Smith-Diagramm
Quellcode
Teilbarkeit
Informationsmodellierung
Rechter Winkel
Ausgleichsrechnung
Große Vereinheitlichung
Funktion <Mathematik>
Bit
Punkt
Virtual Home Environment
Rechter Winkel
Gruppenoperation
Physikalismus
Wrapper <Programmierung>
Gewichtete Summe
Mailing-Liste
Smith-Diagramm
Bitrate
Standardabweichung
Energiedichte
Texteditor
Demo <Programm>
Mathematisierung
Gewichtete Summe
Interaktives Fernsehen
Flüssiger Zustand
Störungstheorie
Inzidenzalgebra
Große Vereinheitlichung
Lesen <Datenverarbeitung>
Data Mining
Demo <Programm>
Installation <Informatik>
Mathematisierung
Programmbibliothek
Zusammenhängender Graph
Flüssiger Zustand
E-Mail
Template
Code
Geschwindigkeit
Ortsoperator
Sampler <Musikinstrument>
Template
Programmschema
Kartesische Koordinaten
Smith-Diagramm
Kontextbezogenes System
Datenfluss
Datenmanagement
Rechter Winkel
Digitale Photographie
Computeranimation
Mustersprache
Programmbibliothek
Luenberger-Beobachter
Default
Grundraum
Bildgebendes Verfahren
Trennungsaxiom
App <Programm>
Nebenbedingung
Subtraktion
Kategorie <Mathematik>
Default
Gruppenoperation
Mathematisierung
Kartesische Koordinaten
Schlussregel
Routing
Imaginäre Zahl
Raum-Zeit
Mapping <Computergraphik>
Funktion <Mathematik>
Programmbibliothek
Netzplan
Zusammenhängender Graph
Konfigurationsraum
Analogieschluss
Funktion <Mathematik>
Rechter Winkel
Reverse Engineering
Default
Schlussregel
Router
Mailing-Liste
Dialekt
Richtung
Einheit <Mathematik>
Dampfdruck
Template
Kartesische Koordinaten
Benutzerfreundlichkeit
Versionsverwaltung
Komplex <Algebra>
Metropolitan area network
Geschwindigkeit
Punkt
Ortsoperator
Element <Mathematik>
Gruppenoperation
Gewichtete Summe
Element <Mathematik>
Benutzerbeteiligung
Programmbibliothek
Maßerweiterung
Tropfen
Figurierte Zahl
Bildgebendes Verfahren
NP-hartes Problem
Beobachtungsstudie
Default
Gebäude <Mathematik>
Systemaufruf
Kontextbezogenes System
Flüssiger Zustand
Datenfluss
Dienst <Informatik>
Menge
Funktion <Mathematik>
Versionsverwaltung
Geschwindigkeit
Flächentheorie
Konditionszahl
Minimum
Gruppenoperation
Bildgebendes Verfahren
Homepage
Lineares Funktional
Parametersystem
Funktion <Mathematik>
Reverse Engineering
Default
Minimum
Geschwindigkeit
Bildgebendes Verfahren
Subtraktion
Rechter Winkel
Default
Gruppenoperation
Element <Mathematik>
Aggregatzustand
Matching <Graphentheorie>
Reverse Engineering
Explosion <Stochastik>
Richtung
Geschwindigkeit
Punkt
Ortsoperator
Matching <Graphentheorie>
Element <Mathematik>
Template
Default
Element <Mathematik>
Smith-Diagramm
Benutzerbeteiligung
Funktion <Mathematik>
Konditionszahl
Datentyp
Integraloperator
Funktor
Einflussgröße
Cliquenweite
Touchscreen
Lineares Funktional
Benutzerbeteiligung
Bit
Azimut
Rechter Winkel
Reverse Engineering
Richtung
Punkt
Pivot-Operation
Mathematisierung
Versionsverwaltung
Zahlenbereich
Mailing-Liste
Strömungsrichtung
Störungstheorie
p-Block
Flüssiger Zustand
Formale Semantik
Homepage
Wechselsprung
Informationsmodellierung
Rechter Winkel
Hilfesystem
Mereologie
Skript <Programm>
Schlussregel
Subtraktion
Dienst <Informatik>
Rechter Winkel
Gruppenoperation
Volumenvisualisierung
Schlussregel
Netzplan
Summengleichung
Quelle <Physik>
Lineares Funktional
Automatische Indexierung
Reverse Engineering
Modem
Bildschirmsymbol
URL
Element <Mathematik>
Binder <Informatik>
Nebenbedingung
Reverse Engineering
Template
Default
Gruppenoperation
Interaktives Fernsehen
Schlussregel
Element <Mathematik>
Bitrate
Flüssiger Zustand
Informationsmodellierung
Funktion <Mathematik>
Hilfesystem
Aggregatzustand
Web Site
Punkt
Quader
Betafunktion
Gruppenoperation
Gebäude <Mathematik>
Zusammenhängender Graph
Projektive Ebene
Extrempunkt
Ein-Ausgabe
Störungstheorie

Metadaten

Formale Metadaten

Titel Physical Design
Serientitel Ember Conf 2015
Autor Faulkner, Edward
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/34739
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Physically-plausible motion makes applications more usable. Google's Material Design and the iOS Human Interface Guidelines both advocate for realistic animation as a key tool to help users navigate and understand. The Ember community is at the forefront of efforts to bring this level of polish to the open web and make it accessible to all developers. This talk will cover both the theory (when and why to introduce fluid motion) and the practice (how to get started today in your Ember app).

Ähnliche Filme

Loading...
Feedback