Hakim El Hattab | Building Better Interfaces | UI Special, CSS Day 2019

can you hear me you can I'm super excited to be here thank you for having me my screen is immediately going to screensaver mode disabled so I am like I was just introduced great introduction I am Akeem my profession is being a developer designer combination I mostly identify as being a developer but I do a lot of design as well and my real professional interests can ally in designing and building implementing user interfaces for creative tools so things like a drawing app or a video editing tool etc I am also very interested in working on open source projects I released a lot of open source libraries and projects in the past's and just work on a lot of UI experiments and concepts etc and I've been fortunate enough you know to be able to marry those two things and combine those two interests into when I'm working on today which is slides platform for creating and editing you know presentations so today I'm gonna you know highlight some of the UI patterns that emerged sort of in the process of developing slides I've worked on slides for six years now and you know been full control of the whole UI design and development so I've learned a lot in that process and I want to talk about you know some of the implementation details that I obsess over as I work on my projects and you know what makes or breaks a good UI but briefly before we get into that like I mentioned I've had a very long-standing interest in UI development UI concepts I loved working on that kind of stuff and I want to show you a few of my personal projects some things that I've created for you know to try to be useful and other things just for the fun of it just to give you an idea of kind of where I come from so this first project this is a browser extension called focus and it's an idea I had for further emphasizing text selection on a page so when you start selecting text here you know you you both get the text highlight but it also de-emphasize the rest of the page to bring your selection even more into focus and it you know highlights in any direction that you're dragging as well brief show hands how many people you know write HTML and CSS here like what's the designer to develop a ratio that's that's the developers great awesome so very very briefly you know how this works technically I'll touch on the higher level go into more a little bit later this uses JavaScript to find the text range that you've selected and from there you can infer you know which Dom nodes so selected by going upwards in the tree and you can get their bounds and the actual overlay effect is drawn using canvas I'm just cutting out a rectangle another little UI experiment concepts this one's called Minooka monopolists the best name I could come up with it's sort of a parallax rolling list so when you scroll these list elements they kind of zoom interviewer magnifying into view when they hit a specific point and this is actually based off of an old flash site that I saw way back when and I tried to you know re-implement it with HTML and CSS and this actually consists of three separate lists so we've got one list up top one at the bottom and one much larger list in the middle with this overflow:hidden and then they're kind of synced together to achieve this illusion of a magnifying list so on the more useless and this one it's a it's a greater check boxes this is check wave it's it's a greater check boxes and when you uncheck a check box it generates a wave of unchecking check boxes it looks like this and when you check a check box you know again it generates a wave depending on where you click su and that's all it does that's all it does and I love working on this kind of stuff we take something that's so you know boring traditionally boring as a check box and you try to do something fun with it to surprise people and yes next project this one is flipside last little UI concept I'll show you this is an idea for a button that merges in a confirmation action so when you press this button it flips over and on the flip side you get your option to confirm or cancel that action and I'm really happy with how that animation came out and you know the reason where I think it works well is it flips differently depending on where you if you press the left edge it will flip you know as if you punch the card in that direction if you press the bottom it will flip towards the bottom so yeah that gives you an idea of sort of Who I am I'm defined by my work right but beyond all these smaller projects one project I've worked on for a really long time a personal project called reveal.js it's a web-based presentation framework a way for people who know to write HTML and CSS or markdown to kind of combine that into publishing presentations on the web it's completely open-source anybody can use it for free modify it and people have it's been really exciting but the one major limitation with this was always that you needed to know how to write code in an editor to create presentations so that's where we ended up with slides the slides the company that I co-founded and we're a two-person company we have been from the start for the past six years so you know scaling back from a lot of what we've talked about today up until now where this is kind of gonna be a lot about how to approach design within a smaller business and also a technically heavy business me and my co-founder were both technical technical people but I ever obviously have an interest in you know design and user interface development so we're gonna take a look at you know some of the the specific components UI panitch that i've developed and it's been a really fun time these past six years because I've worked on UI development for a very long time and I've kind of been able to condense all of that into building the UI for slides where I had full autonomy and complete freedom to do whatever I wanted and I've experimented a lot and kind of done my you iack on setting work but within a product so moving on mmm the one moment first area that I wanted to talk about a little bit is loading which is not a very exciting topic but it's sort of this necessary evil in a UI and a web app you always need to provide loading feedback you send up requests to a server you need to show the user what they're waiting for in an ideal world and in some scenarios you can get away from that already where you know wherever we delete something at a UI if you have a list you're removing a presentation or something the moment the user presses the delete button you instantly get rid of it from the UI which makes it feel like the action was instantaneous but then you send off the request to the server you do the work in the background and in the 1% chance that there is an error you can come back you can show the user a nice and friendly error but in the other 99% of cases you know the deletion action will just have felt a lot faster so that's one kind of way that you can cheat loading but in many cases you still need it so I wanted to show you and talk a little bit about how I think that can be done in a good way and from this point forward we're gonna be clicking through a lot of UI let's see I have that saved perfect so when whenever there's a form form element or that you're to submit on slides we have this button where you press the button the button itself you know turns into loading feedback and we try to do this throughout the whole app I always think that loading feedback should be visually anchored to what you're interacting with so the thing you're pressing you know within that space within that space on the screen where you're already focusing is where you should be seeing feedback for that action so if I delete my deck here again you know the button itself turns into loading feedback if I recover it the button turns into a spinner and shows me that the you know the action for recovering is what spinning and I really love this pattern because it means loading feedback becomes very very immediate you pressed something and you're already focusing on that area of the screen and that's where loading appears it's also very easy to understand what it is you're waiting for because you know the loading feedback is literally anchored to visually anchored to the elements and thirdly it's non-blocking which is another benefit where you're waiting for something to spin you can interact with the rest of the page so this approach towards loading is actually something that we do it looks differently but we take the same approach to loading all over slides so another example of just jumping into the media library within our editor now and if you upload files here I say we're gonna upload three videos now I press the blue upload button to initiate the upload so the blue button is what kind of spawns loading feedback here it looks visually very different from the than before but it's the same thought process of always you know anchoring a response to your interaction to the element that you interacted with right this is actually an open source project as well something called Lada that I released a while back now it's this idea for you know including loading indicators or spinners within buttons so it comes to multiple different styles and one cool detail is if you have trackable progress like you know how many bytes you're uploading to the server you can show a progress bar within the button as well to include that that data also the next area that I want to look at is well I think pop pop over if I pop-ups are sort of a UI pattern that nobody likes and for all the good reasons and I don't just mean the obviously bad ones like a big advertisement on a new site I mean pop-ups more even in like in a good-looking way I think are not usually a good UI pattern like the jumping back again the media library here that's a big pop up in the middle of the screen and I really rarely and I don't even like this interface that much to be honest but and I designed this but it appears you know in the middle of the screen it kind of covers everything it's centered you don't it doesn't attach itself to anything there's no context you lose context when you get into this UI and I think you know pop outs popovers are a much more a much better UI pattern the reason why pop-ups are you know a really good verse a good pattern for you as a developer for me as a developer is they're so easy to implement you know you can button in my UI I can't fit the options I need to show inline are great let you slap them in a pop-up and then it's not to pop up in the top of the screen and call it a day but I think you know popovers pop outs are much better UI pattern which we've used extensively in slides and I'm referring to you know simple little pop outs like this right so this one specifically is for making a presentation private or public and you know this goes back to what I was saying with loading indicators before I always think that the area you're interacting with shino should spawn the follow-up action with whether that's loading feedback or an interaction anchored to where you're already interacting and that's provides a really seamless flow or I'm I want to change the visibility of my deck I click this I can clearly see how this is visually anchored to what I pressed so I know what it relates to it doesn't even need a title and then I can you know make it public or private and they're still as easy to implement as well which you know is why it's one of my favorite patterns that we use all the way throughout slides we use them for editor settings we have multiple different types of frauds right if you want to add a different slide background you can add an iframe background and then according this is a pop-up that's an accordion like a color you can have you know prompt confirmations and much more complex ones too like this one for adding new slides which is it has a lot more UI in it but I really love that flow and I love you know contextual you is like this that that appear in the area where you're already interacting so whenever I set out to build a new feature into our editor I always try to think about the complete flow that a user is going to have to go through to complete my action and what their ads click through so to give you another example of where I think this works out well with these contextual you is if I wanted to edit one of my comments here in this conversation I'll press the COG wheel and then you know the follow-up interaction is do I want to edit or delete I want to edit and follow-up to that again it's another component that pops out right where I'm already interacting and I can I can get my emoji window going and add a little emoji and tab down to save and that whole interaction you took place within 150 by 150 pixels are eeeh which I think makes for a really really seamless flow for me as an end user no matter what my input device is to is you using your fingers whatever you're using you're already in that zone interacting so that's one of my favorite UI patterns something else I wanted to talk about something I call the wireframe which is maybe not the best name but it's it's sort of the kitchen sink for all of our UI components it's the poor man's design system where we're not a big enough of an organization to you know really work out or flush out a full design system it's only really I'm the only one working on the front and ended design so I'd only be making it for myself which may still be a good it may still be a good reason for having it but the poor man's the science system looks like this it's sliced calm slash wireframe and we've just kind of dumped out all of our components all of our commonly used components in all of their different configurations and this I think is still immensely immensely helpful you know we've got the pop-up component we used looking at in all its different configurations where I got multi select ones in nursing multiplying input one and the visibility one etc and I in a way where they're really densely packed together and I can test them all out and when I make changes I can manually easily go in and test how those changes kind of impact other configurations and they're also in this page is also super useful for automated testing you know if you use something like Cypress I know to test your UI you can using this page you can test the functionality of your UI components separately from the application logic which i think is a good way to approach it because then you know that you know your your real application tests are not failing for some silly UI are ever another component they'll show really briefly here while we're on this page is notifications so notifications or you know this little black message in the bottom right corner we use these for a bunch of different things sometimes for errors and when we show an error you know we always try to show a custom error message for what just happened but sometimes you you can't predict what's going to happen and you die error is unknown right when there's an error like that what we do is we wrote rotate between a few different error messages so if the error were to appear multiple times if user sees multiple error still see you run into an unexpected error next time it's something wrong can you try again next time OOP something went wrong which i think just adds a little bit of human tone to the error messaging instead of making it feel so very robotic and like you're gonna dead end right the next UI pattern I want to talk about is hover menus this is something that I think people tend to stay away from a lot and again for good reasons I think if they implement are implemented in the right way they have a good place in the UI and they can be really convenient so you just hover over a button then immediately click something without the multiple clicking and the common pitfall with the menu like this is let's see is this so you try to go from the menu and you can't reach that goddamn button and you it's so frustrating and you just quit and you you cancel your subscription and you lose the customer now but this this is really annoying really frustrating so there are multiple ways to approach this right - to make this better and like I said I think if they're implemented in the right way this menu is still really useful so what we've been doing since when I first built this menu component as I added a timeout which is a very easy to implement solution where whenever you go over the menu button or the anchor is what I call it that the button that says hover menu when you go over the anchor and you move outside of it there's a 0.3 second delay before the menu will go away which gives you some leeway to cross you know diagonally to the element that you want without the menu going away but then that has its own separate artifacts or side effects namely when you go over the button really quickly you know the menu will still linger there which it's kind of like a weird lag and even more so you still are dependent on how fast the user is gonna move so if you cross from the hover menu button to slowly menu is gonna go away well you could solve that by increasing the timeout and making the lag even worse so that's that's kind of where we've been ribbon at up until now and now I wanted to show you cuz I recently spend some would argue too much time on just exploring how this could be made better so go back to the wireframe page again to conveniently skip to the menu section where we have all these menus the one we've been seeing in the presentation there is right aligned so the right aligned version of the menu when I cross here and I you know I go over to my menu options is not going to go away and it's not gonna go away regardless of how long I stay there and after a lot of trial and error and experimenting I'll show you what it is that I came up with for this so we'll turn on a debug mode top secret don't look at the URL and so now we're being able to see sort of the underlying workings of this which is the hit area that I'm drawing for this element so instead of just you know like try and use a timeout I'm actually started I've started drawing a dynamic hit area depending on the proportionate sizing of the anchor and the menu and the relative positions one another so this will look very differently depending on how they align to one another if you have a bottom align menu well in this case Assoc pretty bad example but there you can see it you know it goes outwards instead this so yeah this uses SVG you to withdraw dynamically which has a huge benefit because it means that the you know the component will work no matter what the setting if I scroll downwards and the menu is offset upwards it will draw a different hit area depending on on their relative position to one another which makes it super super flexible and of course the same thing again from up top so you get a hit area that will cover your most likely trajectory no matter how those two elements relate to one another and yeah yeah this is this is the what kind of stuff I'd love obsessing over so I spend all day at least I was I was not imagining that was going to be my day when I set out so you just make it a little bit better but I probably spent a whole day just implementing this and the drawing itself is fairly straightforward but what becomes tricky is you know all the different conditions for drawing this hit area depending on the relations of elements and sometimes you'll get into weird scenarios where see if I can maybe get like a offset one that overlaps so now if there's not enough room it's gonna get pushed inwards come on a little bit more well it didn't work guess it's overflowing the page terrible example yeah so I wanted to just show you briefly how that's done and this is where it gets the only place where I'll get a little bit technical and it's not a really technical this is an SVG elements you've got you know the basic building blocks of what I'll demonstrate there's two rectangles to represent the anchor and the menu and then there's a path element which is what we'll use to actually draw the the hit area the rectangles you know are actually HTML elements in the real world scenario but here they're just rectangles for show and within the SVG I mean for this to work some CSS one day ahead of CSS day we all this is the real CSS DX before this work you know we need to disable pointer events for our SVG node if we put an SVG element on top of our button you know the whole rectangular SVG element would be clickable so you wouldn't used to click the path not just a path would cover your mouse events sorry that's just a path to capture your mouse events but the whole rectangular SVG element would capture your mouse events so we have to disable pointer events for it and we have to enable pointer events for the inner path so that only the path captures your your mouse events and then we use a little bit of scripting to draw this this path first off we get the anchor and the menu bounding boxes so there x and y and width and Heights which are kind of all the coordinates we need to draw these lines and then we get the path elements and we set its past data or the attributes and what follows next is just drawing commands so we start by moving uppercase M moved to the top left corner of the anchor dois draw a quadratic curve to the top left corner of the menu then we draw a vertical line by the height of the menu downward another quadratic curve in words you know from the bottom left to the bottom left and just draw around the button as well so this is a little bit interesting instead of just you know drawing a solid shape on top of the button I draw around it so there's the path goes inward to not cover the button itself and the reason for that is this menu component appears on top of the page so if the button is clickable and the hit area were to cover the whole thing you know you would be able to press the button anymore so that for that reason I cut out the button from the hit area so you can still interact with the button which lives in line and the page without you know without block meet with the hit area and so I mean there are a couple of questions why first did this imposed it on Twitter where was you know why is the current line curved is I think an interesting observation I started with a straight line for it to hit areas but that has the negative side effect of you know if you have buttons stacked on top of each other if you have another button up here then you draw a straight line that line would actually cover a lot of this button this the sibling button which means it would be really hard you know to reach that I would actually have to I'd struggled to reach the next button instead which we definitely don't want so that's why I went for a curved angle to cover the most likely trajectory right so moving on the way I tend to break up the work that I do for on slides is we have like single purpose components single purpose UI or limited purpose if you will and on the other hand we have a bucket of your core components and I think when you break it up that way it becomes very obvious that the time that you invest into your core components is kind of paid back multiple times over because of how often you use them they're sort of your building blocks for assembling new pages new features so that got me thinking about some of the things that I specifically think are important to focus on and that I spend a lot of time focusing on when developing our UI and our components and I wanted to talk about two specific things first off is keyboard accessibility I think is really important you know for accessibility reasons but also because we're a Productivity app people expect you know to be able to reach their their UI through their keyboard and you should be able to you know multi select you can go through an input pop-out you can type in that and the same thing goes for the menu of course I disabled a debug mode I can there we are I can tap into these I can tab through there so there's a clear focus of what I'm navigating through with my keyboard so making sure that all of these components that are going to be used a lot are fully keyboard accessible I think really really pays off it means you can work more efficiently with them and more importantly second thing is layout flexibility I think and it sort of touches on what I showed with the menu before I think not just in terms of responsive design also I'll give you short you know these components should work on any screen size but they should also work if I show a component in the top right corner or the bottom left corner or if I scroll it out of you like what happens then all these considerations to make sure that no matter what you throw at it will still work I think is really important to add to that reuse value so if I open up one of these pop outs we default to top alignments if I don't have enough room up top it will invert and align to the bottom if there's not oh if it's scroll out of you it will just attach itself to the top of the screen so you never lose track of it because you need to interact with this before you can get back to the rest of the page and if I were to get into a scenario where I'm you know resizing inwards a little bit and the the window needs to be offset it will offset the pop-out but the arrow will still remain firmly anchored on the action and I'm interacting with again to not lose that context of you know what does UI belongs to so making sure that you know things are layout flexible in this way I think is super worth it because it means and it has meant you know for me now that I can kind of throw this component into any scenario and trust that it's going to work no matter if you're using your fingers or your mouse or if it's in a weird place on the screen it's always going to adapt and work there's one more one more edge case I'll show you what if I can yeah this thing go and there we are you know what if it doesn't if the button is placed below the the window itself the arrow would just goes away because it can't show an arrow pointing to the anchor anymore so another it's like super super niche conditionally special condition but because of all this work and it's happened over time you know it doesn't happen it wasn't like the perfect component from the start it's not perfect yet either but it's no flexible enough that it really saves me a ton of time when I'm putting together new features so investing that time I think is really really worth it we you know science exists in the productivity space which comes with a bunch of expectations if you're building an app for productivity or UI like this like a visual editing UI I think there are a lot of expectations that come with that and in our case you know I carry over from desktop condor parts of our software like keynote PowerPoint etc and you want to make sure to live up to those because if you don't you really have for people's productivity like you're going to switch to keynote to our tool and you can't use your common shortcuts it become very very frustrating and you become very much less efficient and I'm referring to things like you know you should be able to drag-and-drop I think it's really important to select to think it's really important shortcuts like holding shift to remove or a pen from your selection now you can hold shift and drag to append multiple elements you can right click to duplicate elements I think is also it's a context menu is something that a lot of people depend on not myself maybe but a lot of other people so obviously things like grids and guides are also critical to a lot of people that come from from other software and then one more shortcut that I think is I'm personally much dependent on is when you resize something being able to hold shifts you know I've grown up with this since flash you should be able to resize things proportionately if you hold alt you should be able to resize around the center of where you started dragging if you hold shift and alt you resize proportionately around the center so making sure to implement all of those things that people are accustomed to I think is super important and each of those you know maybe everybody won't use all of those but the person who wants to resize proportionally who won't be able to do that if that direction is not there it's a real blocker then again going back to keyboarding attractivity I think you know keyboard shortcuts are another one of those things like being able to use command a to select all is a common thing cut and paste and you know I undo when nudging with your arrows etc and I think in some places you know those had fairly obvious keyboard shortcuts because you've seen in them so many other places but in some cases you know keyboard accessibility requires a lot of creative thinking about your specific UI that you're building so we recently added support for code highlights which means you can they'll type a range of line numbers I can I want to highlight lines one through three so I typed those line numbers and I thought a lot about how this would work with your keyboard because it's an interface where you type so I really don't want to go over to my mouse to click this add highlight step right so enter adds a new input field these are two separate input fields and I'll highlight some more lines we'll leave four through six enter again I'll add you know a couple more and now when I want to delete a line again I don't have to go over to the X to delete this I can just backspace through the whole field until it's empty and when it's empty I can hit backspace to remove it so these are all you know really customly implemented for for this specific scenario if I hold command I can move a field up and down to to rearrange them and I think the obvious thing to do here when I tab you know traditionally kind of default web behavior would be to tab over to the X button and highlight it with the blue outline and then you press Enter but really that's not the expect that's not the most efficient behavior that you're looking to do here with your keyboard so really trying to kind of remove some of your default thinking around keyboard I think it really helps sometimes and really thinking about how keyboard accessibility makes sense for this specific specific use case right the next area I wanted to talk about is animations I love working with animations you saw my little check boxes before that's one example I think animations in a UI even like our second productivity tool play a really important role they're much more than just visual fair of course nobody would argue against that I think anymore and I think because of how important they are if you use animations wrong you know you can have a very detrimental effect on the user experience specifically you can make a UI feel really slow and sluggish an app I love is figma I don't barely I don't use the sign tools I only play around with them to try the interactions but I figure you eye has no animations almost and I love that it's just so responsive and fast but I am NOT as cutthroat this at like I say love animations too much I still use them but I think it's important to you know play them down if you took something like figma and you added like fading transitions to all their menus you would take what is actually a super performant app and make it perceived as if it were slow and sluggish so you really want to be careful around how you use animations and you know a Productivity tool especially and the way I try to benchmark this in my head is an animation that I create should never get in the way of what the user is trying to do I think you know you should I've hit the right level of animations if you don't even think about them actually happening they used kind of our backdrop smoothly carrying you from one place to another so that's that's the way that I try to focus on animations and I'll I wanted to highlight you know a few different thoughts that I have around it and how I work with animations in the slides editor and other UI as well first off one rule that I've had me think with me for a really long time and rural sensory strict but one guideline is to focus on how things animate in and not how the animate out you know focus on how things are being brought into view because that's the next thing you're gonna be focusing on and not how they go out of you for example if I wanted to take the action you know of adding speaker notes to the slide press the speaker notes button which creates a very brief animation where the speaker notes window is very quickly scales up and the black overlay fades in but once I'm done with this and I close it out there's no animation no transition at all and that's very intentional when you know when I'm signaling that I want to add speaker notes we're animating something that that I'm that I care about that I want to go through that I the next thing I want interact with so it makes sense to you know bring that in in a good way and draw attention to any more but once I'm done with this you know I had saved what I'm saying by hitting save now is I want to go back and edit my slide so if we were to animate the speaker notes window at that time you know we'd be attracting attention to something which is completely irrelevant to me as the use of reason I'm done with this UI so that's why I think it's important to animate in and not animate out or focusing on at least playing op the animations in and playing down the animations out animations in my opinion are you know the most useful when you can use them to guide people your users focus tell them where should where to look or what just happened yeah an example if I go to my deleted decks my trash and I recover one of these decks you get thrown back to your profile page again or your my decks and then there's a brief pause where there's an empty space before the deck is brought into view and what that does is you come you come back to this whole different page or different you know screen again and the last thing that moves because we have a short delay there it's going to be the deck that you recovered so we're kind of telling you look at me to pay attention to this thing and I think that's you know a very good way to use animations in the UI I also like I said they think you know animations can really tell even more more than that you know if I and this is a common frustration for me personally in you I swear I have drag and drop if I drag something and I try to drop it on you know the right drop zone and even if it's successful like there's nothing really confirming its I dunno if it worked or not and if I drop it outside there's also no no difference in actions I don't really know if my dragging and dropping works so what I did for our little drag and dropping is when you drop you know an element here if I miss it they just kind of fall down but if I'd select one more if I draw I deselect it instead maybe I if I draw these three elements and I drop them on to the tag you know the zoom into the tag which seems maybe a little bit over the top but it really shows you you know that these elements were absorbed by the thing you wanted to drop into it and I think it's fine to be a little bit playful like that too and the thing bounces too so they zoom into the button the button you really can't miss that your drop was successful and I may have overplayed it because of how frustrated I've been with other you eyes that don't actually indicate at all if it was successful but yeah I love using animations and I think that animations have a really good purpose used like that to come back to the editor again another case where I try to use animations is to visualize things transforming between different states which sounds very abstract but really isn't if I you know add a shape to this slide and I wanted to add an animation to that shape I'll press the animation button which expands out a couple of options and when I remove it again it collapses out of view so it animates in and out for a different purpose if we were to you know not transition this behavior you'd press this button and instantly everything from this point downwards would be replaced which means that I would be left having to figure out what was there before and what's new so by just adding a simple animation in case like this you can really show you know what what is being pushed down what is the new thing that's appearing so my brain can kind of just ignore this element because I see it being pushed down I can just focus on the new stuff that's appearing so again the animation is really telling me what to focus on what to look at and finally you know I as much as I advocate using animation sparingly as you saw with the drop effect there before I tend to splurge here and there but I tried to do in a way with that doesn't get in the way of you know the user experience or in how fast you can work so here's another example where if you edit a tag I think you know these kind of over-the-top fish animations where this thing flips over and you can edit your tag name and you save it flips back again it's fun for me to work on number one and I think is you know fund a little thing to run into as long as it doesn't get in the way of how fast I can actually take this action you'll notice you know the moment I press the button the field is already but highlighted I could start typing instantly so doc it's not getting in my way it's just adding a little bit of the effects so another topic I wanted to talk about a little bit is I believe it's incredibly important to try to make work enjoyable and I think all of us in this room are fortunate enough to work in a field where we at least enjoy some part of what we do you know maybe not all of it but we all have you know special interests for me it's always been about you know exploring and coming up with UI concepts and creating weird animations and experiments and I've made a point of doing that work in slides on on you know on my slides time even though that worked very seldomly alliance with like our business goals or a bottom line or whatever business the business term you want to use and I think those points like those pointless projects that don't necessarily add to our business I think are still super meaningful to me personally because I get to work on something that I really enjoy doing and it keeps me motivated into you know wanting to continue working on slides in the long term and maybe you know a little bit unique to the scenario of working on your own company where I really want to keep doing this I love doing it but I think you know if I only focused on the things we should be focusing on like advertising and funnels and marketing marketing and business efficiency I get very very bored with it I don't not the things that I enjoy in my work so I try to you know make a point of working on things that that don't make sense just to make sure that I remain motivated and I think that's really important to try to do in your work wherever you can an example of that so we were building out a developer's documentation page we have a bunch of developer features and we need a little navigation for that man or for that page so if you go to slice are calm developers you know we needed one of those Table of Contents things there on the on the left side where you can show what's available on this incredibly long long long long page and you know after three hours I had a working menu with the text being highlighted and then after three days I I had a take which which you know scrolls with you and shows you what's in view using SVG so so this is a good example of it I mean it's completely superfluous you know functionality wise but it was really really fun to work on and for the people who arrive on this page I think it might be a fun little detail to encounter too it expands to highlight exactly what's in view right now so if I go to your element classist we have two sections in mu at the same time and it expands to cover those two sections I don't know if I can zoom out to get more sections in view maybe but yeah it's it's it's it's it's functional its quirky and it was really fun to work on so I I don't regret spending three days building this thing it's my point yes right this is also something that's available open source it's on my github github.com hack email and I think the repository slash CSS I have a bunch of stuff gathered together there because I don't I think it's easier then just start a new process praise for everything yeah that's my optional slide do I show my optional slide yes okay yes I do so going back to the editor again is another component that I'm really happy with how it turned out and again no we don't need the debug mode we need the tutorial there we are oh and we need a new deck not an existing deck the first time you started using slides you can't get to the editor and my URL is all messed up and we have this little tutorial component and I'm really happy with this how this came out so instead of you know trying to like record a video or collect a bunch of images and tell you how the app works on the higher level we just show you by actually interacting with the app so this gives you an overview of like the core things that are available that different areas of the editor it cuts out that portion of the page it's s in very simple terms what it is but where it gets interesting is you know it's not just using a fixed version of the page this is the page or actually it's interacting with the actual page so if I press next now you know it's telling me this is a text block on the on the slide when I press next it actually clicks that text block which changes the toolbar on the left side so you know it's interacting with the real page on the screen size that you're on you know in your environment which I think makes for a really good tutorial another example is when you your now D focus they were D selected it and when you add a new slide again we know we click on that element we showed that content and we recently redesign that whole slide selector so now we didn't have to update an image or anything it was just already already there and already you know working that Rosario's automatically up-to-date so this is a component I'm really happy with in the another UI pattern that I think worked really well right and without further ado I thank you very much for having me [Applause] oh I'll be there I don't think I'm the only one who heard a lot of pop songs brains exploding that was amazing thank you so all those mind-blowing experiments we're talking all technical stuff now so do you have do you use like a favorite JavaScript framework or animation library or stuff like um I very rarely do I am a big believer in reinventing the wheel which sounds very backwards but I think you know to really learn something sometimes you have to go back and do do repetitive work do something that even though other people have done better before and I think that can really pay off that's kind of how I learned a lot of my UI development when I worked in flash you got very little for free and you had to write like I wrote my own scrollbar logic so you got gets you thinking about what happens when you click the empty scrollbar area how far does it scroll and what's the interaction you press the arrows and and I really really thinking through the my new details of the UI that way you do all that in vanilla JavaScript yes yeah well you know we use specific like micro libraries for specific things we don't use so an overarching library I use you know the SVG I'm drawing myself yes finally I know about dealing with SVG using vanilla javascript is a big pain in the neck a little bit a little bit not too bad I don't feel that at all you know what it's really paid off it's we've done it because we've done everything vanilla and I know how everything works and you kind of not dependent on frameworks that much I like a critical basis so when we started slides you know we would have used at least redact the name but you know given framework of the day which actually wouldn't even be well maintained or supported anymore today which would have been really sad and when I worked at Squarespace we used you know what's the Yahoo version of Yui and they really invested in that and they can't really get away from its I I really try to stay away from the bigger JavaScript frameworks where I can I have so many questions it's really hard to pick among them so regarding the model design pattern and a few questions popped up about usability whether you do tests with users you mentioned keyboard accessibility but are there also screen reader accessible we have focused on you know screen reader accessibility for our presentations not for the whole platform I can I can say that we have I would love to we are I mean like I said we're a two-person team we've kind of there's a lot of areas where relaxing and that's just the reality of it if you want to try to spread to people across building we have a million users building this platform maintaining it we have to wear a lot of hats and I'd love to do more user testing I get I mean I get feedback through our help forums that's my only user testing at this point I'd love to do more so you turn an open-source personal project into a full-time gig yeah how did that happen slowly over time I'm not like I'm not - mr. entrepreneurial like just go all in take my savings and yeah III took it slowly like we started it on the side of our jobs my co-founder and I was working at Squarespace at the time did it in my weekends my free time which was you know I had plenty of free time before having kids honestly and it slowly grew to the point where I come on full-time that no one can come on a full-time as well so it's just happened gradually we're still completely independent business we don't have any investors to report to any what do you need - you know who's asking us for reports well he reports or anything like that so there's just one thing that's been itching me and probably a couple of people - so the hover menu the pretty awesome one does it also work on click because there is no hover on touch yes of course we I mean all of our UI works on touch devices - it will just work with taps instead and we have the same component can be triggered through click on your keyboard or on a computer as well so in some cases you know we use a quick action where it's gonna be finicky to try to go with your mouse and yeah I mean we care a lot about working on touch devices obviously it's a it's the future that's amazing thank you so much yeah that was very inspiring yeah thank you thanks an economy you

Channel: Web Conferences Amsterdam

Views: 9,097

Rating: 4.987988 out of 5

Keywords: css, ui, design, interfaces, interactivity, animations, details, fun, user interfaces, forms, components

Id: o0NtjY17v5w

Length: 47min 28sec (2848 seconds)

Published: Sun Jun 16 2019