Never ignore these UX design principles (even if you’re MIT)

web designers need to know not only how to operate software but also the fundamentals of good interaction Design This is what informs your decisions so inspired by Aaron Perez book which just came out this year Universal principles of ux 100 Timeless strategies to create positive interactions between people and Technology I can get on board with that I'm going to share three key takeaways that resonated with me and go further by showing you live web design examples for each point number one bad topography leads to bad ux font choices have a real impact on the feel of a website is it going to be something more clean and Technical or more flamboyant and out there is it going to be very down to earth widely accessible or is it going to give off a more rarified elegant Edge but not only is it about the feel but also the ux the user's experience comes from whether this type is actually legible you know can they read it and that legibility is our primary importance when setting type so all the fundamental principles of type setting like leading and tracking and kerning and hierarchy all come into play when it comes to the web as well as the fonts that we select and it's amazing how people can get this wrong this is a website on mit's website one of the most respected institutions in the United States and look at this the center for advanced visual studies we're expecting this to be good and what have we got okay I can get on board with just using one font all the way through it's one typeface in one way this bold grotesque helvetic style font and it's a look it's a brutalist thing it's very modernist by using the one it is a bit large on this screen but as we begin to scroll this type begins to be thrown like off access and it continues to move and it actually gets harder and harder to read when it's static you're kind of turning your head but if you're trying to sort of like read and scroll it becomes really illegible and it's almost like they just wanted to use that effect for the sake of it but it really doesn't produce what they're looking for because it just makes it too difficult I mean even you might say okay you've got this you know full wide screen on your large screen what about if we make it a bit smaller if we get it to a sensible sort of type size by adjusting this word even when we scroll this becomes even more difficult really when it's small and it's off axis at an angle so I'm not a fan of this at all another institution which should be doing better is the Yale School of Art top Institution in where you would go to learn design are see here look mfas in graphic design what is going on here we've got all the information squashed over to the left of the screen and then this huge background and this sort of left and top of line thing and it just looks like a website from 20 years ago the type size is just too small uh based on where it should be there's no sense of hierarchy nothing's really standing out to me uh properly and you know so it carries on this bulletin board I'm supposed to be able to read this we've got these little frames within boxes it's like is it supposed to be a retro like so bad it's good thing they missed off the it being good part it just really breaks all these rules about good topography and it's just difficult and even when you go through into the pages we have these garish backgrounds and they're obviously trying not to be boring not trying to be corporate but it just makes the thing difficult to use and it doesn't have any Elegance into the way it's been uh pulled together so how should we actually do it what would actually be a good example so let's have a look at one of their competitors the Rhode Island School of Design I'll just refresh this page as it loads in we have this little interaction where the type loads from this stencil type I'll just do that again to the full version and we have a modern serif font here which gives that sense of tradition because it's a long established School 1877 but also it's modern and contemporary and relevant to contemporary standards because we have this sharp cut slabs on the saris rather than you know a very traditional typeface the navigations where it needs to be we've got fonts that pair well together and as we start to scroll we have some nice interaction the stencils come back in but all the way through we have this nice hierarchy we have on each panel tiles that are legible easy to scan through but then appropriately sized in a font which pairs nicely here we've got a serif and a Sans serif for the links and each time we've got an appropriate length like one sentence and some very very clear links black on white but we've also got interest because we've got these really interesting artworks and projects that the students are involved in we've got the layers appearing you know we have this this grid going on but it doesn't feel boxy because of the overlays and the way things are moved and it's really smart that each page we have this and even as we get into a more traditional sort of layout with these columns here in the grid again there's hierarchy and there's legibility but also these are well-designed quality fonts so they are legible they're properly typed set it's a sensible line length this isn't too long so we can't read it but it's not so sure that it's truncated and hard to scan so they're following these principles really really well and what does it make for a better user experience Point number two so you think you can scroll when a user clicks the book suggests they're saying I want to move on to something else but when they scroll they're saying I'm interested in more and this has led to the phenomenon known as scrolly telling where a Story begins to develop as a user Scrolls through the page and this was popularized by the New York Times this article in particular is often mentioned in the history of scrolly telling the Avalanche at Tunnel Creek and this is from 11 years ago where we start with this full screen video before we move in to these paragraphs of text but we're interrupted by this thumbnail which animates in and then we can click and play a video and as we continue to scroll we go back then with the change of the background and another full screen video for this panel and then we have some more images and the thing continues to be interrupted as we move through and the story develops and a lot of other news outlets have picked up on this a big exponent of the scroll is telling are apple with their products now a pair of headphones okay but how do we make a product like this which is expensive which is more expensive than a lot of their competitors desirable they bring you into the story so we have these headphones here set on top of the tire but as we scroll we have this Parallax scrolling going on but then we move into again a full screen video and we have these really high resolution renders and then we go through and we scroll the titles are appearing and we have these different layouts and they all work together within the same design scheme but they give us interest as we move through the pages here it animates spins around and we have these annotations that appear next to it this small tab then we're going to a grid of images we have some lifestyle imagery as well as these renders of the product Incredibly Close Up blown out scale you feel like you can touch it becomes really really tactile small caption and then back to a larger headline it's moving through these different color options we then go to a dark background so all the way through it's like a story that's emerging before it says we have this animation we have these different styles we have the sequencing of different layouts and different types of Photography as we move through that really helps tell this story and you can even do this in really simple ways with scrolling like say you've got more of an information website like this one for Runway the brand idea comes through because it the names Runway we've got a plane ticket we're looking through an airplane window and as we scroll that window opens up and then we see this interface large and if we just go back often you'll see on these kind of software and SAS companies they'll show like the interface in the hero section and the interface doesn't look great and it's like a small interface within the interface of the website it's not very visually appealing so here just these little details make a prettier panel but also that's still really easy to use we've got a large headline to tell us what it's about but then as we scroll we just have that little interaction a little bit of Interest before we get to this and um this video going on the background with the clouds and this thing just begins to develop chapter by chapter act by act like a story as you scroll through and we saw that in the first section as well didn't we the Rhode Island School of Design wanted you encourage you to scroll through so they could tell that story whereas with Yale where everything was crammed up there and then one wanted you to go through the links they weren't able to get their story across number three make data lovable nobody even the biggest statistics geek in the world is interested in data for the sake of it it's the story that the data tells and our job as designers is to dramatize that story and make it accessible make it understandable for people website like this it's probably really useful for the scientists that visit it but it's not necessarily one that's going to grab your attention capture the imagination of the general public but NASA do have other sites like this one for eyes and asteroids let me just refresh this and you again scroll to enter and we're brought into this diagram here of our solar system but what we're able to do is actually click and drag around all these in like 720 degrees and we can click on any one of these asteroids and it zooms in we have this whole experience of data look we now we've got an impression of what this rock actually looks like and then we get this information on its size the distance from Earth the velocity the period of rotation now I can imagine that if these sorts of things were in a table I wouldn't be very much interested in this sort of data it's inclination relative angle on the XY elliptic plate not really bothered but look at this I can click and drag around and look at cool asteroids this to me is a much more engaging and gives us this information and then you might want to look at like its size and its distance from Earth and velocity and this kind of thing because they've really dramatized that data and brought it in to a way which is much more tangible for people somebody with a smaller budget this idea if the moon was only one pixel I remember doing this at school we had a football that was the size of the sun and then we had to walk around the school the distance did anybody do this anyway this is a tediously accurate scale model of the solar system so if the Sun is this big then we keep scrolling and this is makes much more sense if you try this out for yourself and links to all these sites will be in the description of the video rather than me just scrolling along you watching out on video you don't get a sense of how much uh is my finger starting to hurt there's Mercury after all that scrolling and then you carry on scrolling as it turns out things are pretty far apart we keep going we keep going we keep going this is an exciting video isn't it Venus you get the idea try it out for yourself but it's really dramatizing and giving you that sense now of space on a maybe a marketing website something you're more like to design let's just refresh this this site here workplace scansca neurodiversity in the office so there's a lot of report here but as we scroll through a little bit of uh scroll retelling maybe it gives you this thing opening up but we have these sorts of Graphics here just not from this circle it animates in 15 to 20 of humanity is neuro atypical but we have that displayed on a graph in an aesthetic way we're trying to make that sort of data interesting and here's maybe a site where all these things come together let's just refresh this one as well and this is for climate mobility in Africa and just telling the story of what's going on at the moment so if we go into this site we have a lot of these things on display we've got some nice topography we're drawn into this headline it tells us hierarchy this is the first thing we should read but then we have well-type set body copy to make this thing uh usable but then we're encouraged to scroll to continue they want to develop this story and then as we do each of these have data within them so if we're going to this one we have this nice panel here and then if we click on a particular element of the story we have these graphs that appear and come to give us this information they've also got a whole section of a data here explore the data and if you click on this we have this detail of people leaving and arriving certain areas and you can really zoom in deep into these different areas and get a sense of of what's going on and it just shows you how you can put these difficult uh or these different principles together and produce something which is really enticing for people to interact with pick up this book if you'd like to discover all 100 principles this is not affiliated or sponsored just a friendly recommendation from your mate Matt until next time happy designing

Channel: Flux Academy

Views: 13,917

Keywords: become a web designer 2022, freelance web designer, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy, become a web designer 2023, Learn to build websites, how to make money building websites, how to build a design agency, webflow, framr, figma

Id: q-sD7Fk9-Bs

Length: 14min 57sec (897 seconds)

Published: Mon Jul 31 2023