Transcripts
1. Introduction: So, hi there. I hope you had a coffee today because this is going to be quite a journey. So, I'd like to take you on a journey for smart responsive design patterns and it's going to be quite so fun. My name is Vitaly and I'm Editor-in-Chief and Smashing Magazine on the magazine for designers and developers, and over the last few years I've been doing a lot of work for responsive design was small and big appliance. I always search for specific design patterns of pursuit problem we can actually solve them in a way, that they can apply later to my work. As editor-in-chief, I obviously run this measurement itself, it's just a website, it's not a great deal. More pseudo silhouette this way to just see a website. But we as scientists and developers maybe see that it differently, and we see lots of boxes everywhere, and our job is basically to just move these boxes around to ensure we created a website, it scales up and down as we like. Now, this is not easy of course, but it's even more difficult website, is more difficult. This is like a myriad of boxes from small to big ones to tablets to screen so, obviously contractors. It's not just screens, is also about the way people actually interact with our interfaces. So, this is a big deal. Now, this workshop is not about this, this water was not about boxes. I don't really care but think about responsive design having boxy overview we're just form. This class is also not about box trends, because really trends come and go but they don't really stay. So, for me it's actually giving you some ideas for the result thoughts about what you can apply to your work beyond that on top. It's also not about frameworks like skinning things and making sure that they work, it's more about actual ideas and techniques. Right. Since that I show working or failing in real projects and why? It's also about design patterns right. What are the things that we can actually go ahead and apply to our work as we actually yielding crop residues? Most of the things I'm going to show are a bit crazy, you might not like most of them. They might sound or might look that they are weird and out of place at times. They also sometimes quite complex and unusual. You might not be running into this problem all the time, but you might run into similar problems and once you do, you will know exactly what to do and how to deal with. This is going to be quite a lot of fun we'll look into the responsive, unresponsive disciple, big perspective first and then we'll dive in deep into those little molecular components and we'll think about some interesting ways how to make things right. Fasten your seatbelt, this is going to be quite a journey.
2. Assignment: All right. While designing a few components is one thing, but actually putting them together within the interface is a different story entirely. Now, actually, you can't just go ahead and take, design a table over here and maybe pick typography over here, and maybe a few light boxes there, and drop down over here and then put it altogether and called it a design. Now, this is not really design. This is more like putting things together. Design needs a big picture. You need to know where you're heading visually and also in terms of layout, right? So, it requires a bit more work. Now, we can look at all of those components that we talked about individually, but you need to know, we need to know exactly how to actually pull them together within a given context, right? So, what if we take a closer look at the more complex interface, right? Or maybe just an example of a complex interface really. What if we actually think about interface like this, right? An article layout, magazine-like layout. So, what we've got here is a nice layout I picked, and this article I picked, which is art directed. So, it has lots going on, right? But if you actually think about it closely, well, there are few components, right? But more specifically, well, they are repeated over and over again. Also, there are some more or less complex sections of course, but you'll find a lot of illustrations. You'll find lots of full quotes, you'll find lots of all of the different small components that actually make up the interface. So, what if we look at them? Actually, if you look at them and this side on this page, what you'll find out, well, there are actually 26 of them, right? So, just by recreating this page, we can learn a lot of what, how to put all those components, or explore all the design patterns that we're going to talk about over the next few sections. Pull them together in one single piece. We have navigation, topography, art-directed images, illustrations, graphs, charts, pull quotes, sidenotes, footnotes, media elements, biography, related articles, newsletter box, advertising units, promotional boxes, I'm running out of air, all right? So, this is a lot. So, what if we actually take this and look into the different components that make it up, and try to design them, and style them, and put them together. Maybe reorganize them, look at them specifically at all the different details that actually make them up and then put them together in one interface. Maybe it's going to look similar and maybe it's going to look very different, but the point is, this is going to be our experiment and exercise to put all those things we're going to explore and figure out a way of how to make them work. So, let's do this.
3. What are Design Patterns?: Design patterns. Now, when we talk about design patterns, well, they don't really have a good reputation in the community. When we think about design patterns, we tend to think about lazy solutions, or off the shelf components if you like. You just take it from the shelf, you apply it to your project. Sometimes that we're thinking about the context that we have, and you call the day. This is pretty much it, right. Well, this is not quite what I've talked about when we talk about design patterns in this session. We also call the thing famous humble guy kind of parallax and single-page design's a pattern. But for me, they're not. They're more like trends, and trends don't really matter but techniques do. So, when we talk about patterns here, we're talking about smart, useful design techniques that actually proved working in real life projects. So, this techniques aren't really a safe bulletproof endpoint of a design. See them more like a design conversation or like a starter, design conversation starter. This is something you would start with to build upon. So you would actually take one of those solutions then you'll think about the ways of how you can apply it. Build on top of it and apply it to your project. So, they're never kind of finish solutions but more like a formless ideas that you need to nurture, that you need to shape, that you need to form, and bring them to life. Now, Mark Boulton actually, said once that design process is weird and complicated because it involves people and organizations, which often are weird and complicated. Well, to be honest, in many of the project I was working on, this is exactly the problem because managers, people who I work with on the projects actually have a very standard or classical view of how responsive process works, and to be honest how a creative process works in general. It looks like this right. Where you have a start somewhere, and you have an end somewhere, and then just follow your iterations, and you just follow through, right. It's very linear. It's very predictable. But this is not like that in reality at all, right. Because the reality looks very, very different. For me, it's more like a meticulous series of sprints where you actually start somewhere and you start exploring, and you diverge, and you figure out maybe I should do this, or maybe I should do this. Maybe my table should look like this. I make my layout will look like this, and so on, and so forth, right. So, you really go ahead and explore, and you figure out what works best giving your requirements. Then at some point, you will end up with dead points, dead ends. Well, there is no way from there. It maybe somebody killed your idea, maybe it died silently in a meeting room or whatever. But you need to rethink. You need to think about different ways of approaching the same problem, and this is where I feel you lose more time, and because I want to be efficient, I can't afford losing time. So this is exactly the point where those design patterns can be extremely helpful because you can know, okay, in this situation, this specific pattern, this specific solution might work well. I'm not going to apply it one-to-one. But given the context that I have, I might try to find a way to actually implement it in a proper way so that this phase of exploring doesn't have to take so much time, right. So, you can move from here towards something, a better place where you can actually easily come to, and then converge towards the final idea. This is why when we actually start designing very often. We actually go into your stores like Styleguide Boilerplate pattern spreadsheet which actually list all these different components in one side and all the different frameworks on the other side. So it's great for prototyping because you can just go ahead and look, okay, maybe I need occurrences selector and you don't need to write from scratch. Right. You can just take it and bring it in your project, in your design, in your code, and you have it, right. The obvious is probably not what you're going to use when you actually start designing or building. But this is really great for prototyping to be fast. So, this is kind of the design patterns that I'm talking about. Something naked, something to get to need to form and shape and that you build when you start. Now, over the next few sections, we're going to cover lots of different segments from different areas, and we'll start with navigation, and we'll go through different sorts of navigation, iconography, to accordeons, to tables and calendars, forms, input elements. Well, form elements in general, timelines, graphs and charts, maps, footnotes, and so on, and so forth. The more we go, the more difficult or the more complex some of those components are going to be. But in the end, it all will actually makes sense because they're not really that difficult. So, let's move on, and let's continue with navigation.
4. Navigation: Surprisingly, making content accessible and available across all the different screens, is really, really hard, and it's not just the layout issue. It's also a matter of what you put, and where, and how you present navigation. Because you might have six, seven, eight mega dropdowns in large view, but what the hell are you going to do with it in smaller view? Now, this is always a problem. Now, there's offices established content paradigm of content parity, which is ruling responsive design anyway, which says, well, your users are going to do whatever they want to do basically. Whenever somebody comes to you and tells that your users are not going to do X, or use this feature, or read this article, or need this specific part of the design, well, always ask the motives because you never know. People can do whatever they want to do and they will. So, this is why this content parity is actually really prevalent. It doesn't mean that experience is going to be identical and it's going to be the same everywhere. You can't have as much content, as much navigation both on desktop and on a small screen, but you can, and you have to make sure that all the content, and all the features are accessible on both. So, maybe you can actually show the full navigation large view, but maybe we can also use progressive disclosure, or accordions, or just hide things behind the link in a smaller view as well. Now, a wrong way of doing this would be to actually go ahead and take the navigation you have on desktop, and translate it almost one to one to make sure that it looks more or less the same on mobile and it works exactly the same on mobile. Now here, we've got a Middlesex-London Health Unit website and this is actually what they do, where they have primary navigation on the top, global navigation, and you have sub-dropdowns, and you also have search, and you also have obviously a regular navigation content related items, and so on and so forth. So, what they do in the smaller view is actually showing pretty much everything. You still have this global navigation at the top, you have a big logo, and then you have your dropdowns because with a few mute, weird, or mysterious dropdowns here. But, then they also have sub-navigation at the top or the bottom, sorry, and if you click on it, it's actually gets extended, and then you have a search bar as well. Now, this is just way too much navigation, you don't need that much navigation at all because obviously the way people interact with the device is different on desktop and mobile. On desktop, well, you have a lot of clicking, on mobile device while you might end up with a lot of swiping and scrolling down. So, what you can always do is obviously prioritize. This is what WWF does. Well, obviously they have a lot of content to show like related projects, and news, and all the different projects they are working on. But, more specifically obviously, they have a lot of archives from all the years. So, every single thing they have in the navigation is a dropdown: Species, Places, Threats, Our Work, and so on and so forth. But, instead of actually just showing all of them in a big huge accordion, they prioritize. Though they do instead is actually having two links, call-to-action buttons that actually lead to donation, donation, and adoption. Then, they also have the infamous hamburger icon in the right upper corner, which just slides in the primary navigation sections, not everything, but only the primary. So, when you get there, you can actually navigate further. If reducing the complexity they had was eight dropdowns into something much more manageable. Now, the off-canvas itself, it's not always a good idea to have that because when you end up with the off-canvas navigation, you always end up with many secondary items being hidden in that drawer and they're not necessarily used. So, think twice about what you're actually putting there. In fact, what we've been trying to do over the last few years is actually trying to figure out what can we do to prioritize such. So, we provide a search itself first, and make it as good as we can, and we tried to run some tests to figure out do users actually need it? Do they use it? Are they fine with the search alone without navigation altogether? Usually, of course, they are not, so we add one layer of navigation, and then if it's still the same, we add the second layer of navigation. So, we always think about navigation as onion layers and you add more only if you need, then we never had to have more than two layers. So, this hamburger icon is obviously everywhere, but what we also discovered it's very interesting is that people use the hamburger icon in very different scenarios. Now, because navigation options are not available when you access the site, what we notice now is ability test is that people actually go in to use this icon in order to actually get information about what the website is about. But, instead of actually going into a section within the drawer, what they actually do instead is actually just opening it, and closing it again. Just getting the idea of what it is. So, this pattern that actually Star Wars is using, when you actually have the hamburger icon and off-canvas, and then the navigation sliding from the left to the right, well, that's very convenient. But, we can make it slightly better if we just make sure that whenever you actually click on that icon, you always have the X button or X icon, or whatever, to close it right away. Just a little bit better. Now, the hamburger icon itself, there's been a lot of discussion about it, but most importantly it's really important to keep in mind that it's not understood by everybody. Also, whenever you put an icon in your interface and you hide some important actions behind it, you might end up with a low engagement ratio. It's probably happened in almost every single project that we're working on, so you have to be really careful there. Time.com is the best example for that where they actually added the icon and they noticed that the actual conversion decreased and the clicks decreased, so they added the text menu to explain what it is because they felt maybe people just don't understand what it is and it didn't really change. Then, they added an overlay explaining what this icon means and it still didn't change much. Because when you hide something behind an icon, you shouldn't wonder why people stop clicking. So, instead what we can do is as Luke Rublevka suggests, burger icon isn't finally recognized, so maybe just use Menu instead to make sure that that's clear. Keep important actions visible, not behind an icon with a clear label menu and clear for-dance button shape. If you do need to use the hamburger icon, you can actually use it this way where it can actually float on the right, on the left as you scroll down the website. So, it's always available, but it's not really obtrusive. So, it's pretty cool. But, also the most importantly, the most useful pattern that we keep using all the time is the one that we call menu plus search pattern. It doesn't matter how much primary navigation you have, and it doesn't matter how complex your interface within your website is. Maybe you have tabs and accordion, maybe everything mixed together. What you always can do is actually bring it down to this simple menu and search view, where you have the menu and can be off-canvas if you have many items, or it could be just sliding between the logo and the content if it's just five or six. Then, you have search, and then you allow people to search. Whatever you have inside your interface, well, you can just change orientation sometimes, if it's tabs it could still be tabs. Then, the horizontal accordion, it's going to be turned into vertical accordion. In fact, the accordion is actually the golden bullet in many, many scenarios. If you don't know what to do, try accordion. For some weird reason, it always almost everywhere works. Another common thing to keep in mind is, whenever you have this off-canvas, you always end up with this uncomfortable range because you can show some items, pretty much all items in large view, but you can't show many items in the smaller view, so what happens in between? In between very often you end up with not showing anything although you could. So, what if you actually use this available space meaningfully, and this is what the Guardian does. Now, The Guardian has 13, 14 items that are displayed in large view and then they had this old button. You can also click and then get information about all the other navigation options you have. But, they prioritize what is important, what drives more traffic to them and those items are listed from left to right in this according to these traffic priorities. So, the most important are heavily use sections are always available, and they can show as much as they can, when they can and if you need to show to see everything else, you can actually see everything else. It's actually the same what Google does. Google Docs, because it would be weird to just show a few icons first, and then have a hamburger icon to show all of them, it just doesn't make sense. So, this works very well. The last thing that actually can work pretty well is to maybe think about more complex navigations like this, where you have a lot of filters, what might work really well here is actually looking into the specific sections that you need to design, in this case a few filters for maybe an e-commerce site. Try to look into the content alone, extract the meaning and redesign it. So, if you think about this, well, you might have a few filters, maybe it's issued size, maybe it's a brand, maybe it's color, things like that. So, you can actually separate it into chunks, into tabs, and present them at the bottom, three of them so people whenever you click on them, they can actually get maybe three, four items at once and they can navigate with them. It just makes much more sense. Another thing that actually can work really well in these scenarios is this view mode approach, which takes it a bit further away. Well, the idea is to use off-canvas pattern, but also with this view mode approach when you can actually have encapsulated views. So, you have the content in the back and the same time have a layer of the navigation on the right, or on the left, of course, depending on your design. Which can work surprisingly well in many scenarios, here it's done on cancer decay, where you actually have a few navigation items and it can navigate easily and seeing the content at the same time. You can, of course, also have it in more complex scenarios like in a checkout here, where here on cottonbureau.com if you want to add an item to the cart and you want to check out, you do check out and everything is again off-canvas in this encapsulated views. It can be really helpful. So, what can we do? Well, we can think about navigation in onion layers, add search first, think about primary navigation, secondary navigation, maybe accordions, things like that, but never, probably not a good idea to actually move beyond the third level of navigation. Keep close and open buttons at the same spot, so whenever the users actually click on the icon to open the drawer, they can actually close it right away. If you have many items displaying in the navigation, think about this menu and search pattern with off-canvas. It works pretty much everywhere. At the same time, we can extend it to priority plus pattern, which is actually even better considering that you might have some really important call to action buttons, for example, a call to action links that they need to keep everywhere. They have a few items you can just slide in the content with the menu button between the logo and the content. It's really a good idea to keep important actions visible and if you have a very complex navigation, you might consider actually having a few tabs, try to just reduce this complexity that you have into something more manageable, to manageable chunks. Also, because we have taller screens, think about controls being accessible at the bottom of your mobile screen, not necessarily at the top because sometimes this upper controls can be really difficult to hit, while the bottom ones are much, much easier to hit. With that in mind, you can actually create some sort of navigation which works remarkably well across different screens and does not make the interface feel crowded. Now, that we have an idea of what to do with navigation, we can move on to some little tiny icons and make sure that they're responsive too.
5. Iconography: Now, in the navigation section, we talked about the hamburger icon and then some people might not really know what this icon means. So, the selection of an icon matters a lot. But what also matters is how you display that icon, right? And this is where the concept of responsive iconography comes into place. Because whenever you actually talk to a designer about what they actually thought about when they actually are designing or designing an icon, they will always talk about the sweet spot, this area where they picked in order to design the icon first. No wonder then if you scale off this icon or scale down the icon, it doesn't look as sharp or as good, right? So, just because an image is scalable, it doesn't mean it's going to be legible, and most visual elements have this perfect arrow, perfect size that they were designed for. Not only icons but pretty much every visual element. So, keeping that in mind, we might need to consider doing this, right? Kind of adjust things the level of fidelity for our icons based on the viewport screen or height. Now, you might think well this is not really necessary in many scenarios like why would you create six, seven different illustrations in order to create kind of a very unique experience for all those screens? Well, you might not need it for all of those visuals, all of the icons, but there is one specific use-case with becoming really, really important, and this is branding. Because very often, you have a logo occupying a lot of space, taking really actual valuable pressure space on a mobile device, reserving it for some good materials don't really want to pay attention to, because they came for the content, right? So what do you do then? Well, you might actually really adjust the level of fidelity. Maybe you have three different views or three different designs for your logo, and then you decide when to put what, in order to reduce the amount of space required for the logo to be displayed. So, pushing the content forward so you always can see it better. In fact, many scenarios, you might think, well that kind of reducing logo is really difficult because you're losing a lot of detail and the logo is really important for a brand, but in many cases, it's just not that difficult at all, because actually the more you simplify, the more timeless it becomes, and it's still going to be recognizable, as you can see in these scenarios. So what are the practical techniques you can use when designing those logos? Well you can think about the level of detail, you can think about the thickness of the lines, or you can think about the texts or the outlines of the text, or what exactly actually put and how you design it, the texture and things like that. You can also think about position, and the structure. So, if you have an icon and you have a text under it, you might actually want to actually look into it and reposition some of the items so they don't occupy as much vertical space. Also of course, we have something like circular text surrounding your logo. Well, it just not going to work in small screens, so you can actually just as good just remove it and try to make it a bit simpler, and also more memorable, and the way you would design to build it later, you just put different icons inside SVG's bright and potentially just use a few media cues inside SVG to target specific screens to design specific screens. Now, this is what we can do with the actual icon but really we have to think about the position a bit more, because in this really simple example here, what I can do you pick, but also where do you put it? So if you have a few accordion, so if you sub drop downs, will you put the icon to the right or the left of the text? Or what icon would you actually pick, would you use a plus or arrow down arrow to the right? This is kind of important. Now, the good news is that the guys running the study figured out that pretty much everybody understands what it means, so you can have a text on the left, on the right, icons on the left and the right. People do get it, but people click on different areas. So the heatmap is going to be very different depending on where you place your icon and not only the heatmap, but also the actual task completion time will be different as well, and then we are not talking about a few 100 milliseconds. Here, the difference is around 1.5 seconds between the one with the most time or the least time, so it really matters. So what do we do here? Well, what do we find out is that the way the icon placed on the right is it'll just tend to click on the icon and not on the text, now that's really important, and all options with icons placed on the right resulted in slower task completion, though it doesn't mean it's going, not going to work in our scenarios, as well either, sorry. What it means is whenever we actually put an icon on the right, we better make sure this is really, really big, because otherwise people won't be able to click on it. We can also of course change the actual thickness and the styles while on hover and actually really readjust it in very granular fashion, and this is what we can do today without having to spend lot of time in the code. So, these are all the options we have to make our icons pop up a little better. So, what can we do? Now, we can simplify icons for clear appearance, to make them really look better and sharper. We can save vertical space by using this little trick where we actually reposition some part of the logo, so it doesn't occupy that much vertical space. Specific areas especially if we know that the users are going to focus on the icon like they do in sub drop downs, when they're placed in the right, choose larger icons so they're easier to tap, and obviously we need to choose an icon depending on the context right. And potentially even avoid icons altogether if we can, if we need to have something a bit clearer like menu instead of a hamburger. Right. So these are the things you can do to make your icons a bit more responsive, to make sure that they work and look nice everywhere. Now, that we actually have dealt with visuals, maybe we can move on to structure and talk about something as fancy as tables, next.
6. Tables and Calendars: Structure metals as well, of course. Now we talked about visual design, we talked about navigation and there are ways of actually reshuffling the content across a layout to make sure it works, but some components are just more difficult to tackle. Think about components with firm relationships like tables or calendars. You can't just go ahead and move them and squeeze them in little space. You might need to rethink entirely how you present the content which actually stays in your table or a calendar. The problem is very often tables just look horrible and work horrible on mobile screens. You need to zoom in and zoom out all the time and you can't see the entire table and it's really, really annoying. So, how do we deal with them? Now, there is a simple solution. The thing is you don't necessarily need to show all the columns in your table all the time, right? So as a designer, you might decide okay, in this specific scenario, I'm going to prioritize this columns. I'm going to detect what's important and I'm going to push it to the user and allow them to actually select what they want to see. So, maybe they don't want to see everything at once anyway. So, let them select what they want to see and if they want to see everything well, then you can actually do that. Then you'll have this iframe experience that we want to avoid. But by default, we actually make decisions on how many columns are going to be displayed and this experience is going to be fully responsive. They're going to extend this example by having a display all button and display button. Which makes it a bit easier for user maybe to actually navigate the table and what I would also have probably just being activated by default, is the so-called focus mode. Where you can actually just help the user to tap on specific row or a column or a cell maybe, and highlight the area where they actually are. Because especially if you want to see all the columns, you might end up in this huge ocean of data that you have to navigate through and you might lose track. You might not know exactly what digits you are looking at. So, this is really, really important and useful. So, here's a practical example for that. Where the muse application was implication for rating staff and what they did is, well, they created a data grid which uses exactly that pattern. So, you can see on the right here, well, you can just tap on a cell and it change the content, change the actual data. At the same time, you can select what you want to see, what options or what columns you want to see and you will see them. The selection is made by default by designers. Sometimes you might want to have a fixed header. That works too because you might have a big table on the large view and then small view you might want to keep it afloat. So, you might keep it intact. So, you actually can go ahead and display it while all the other items are going to have this iframe experience. Also sometimes, you can do something entirely different. So, here you've got a data table with a lot of data and you might choose to just go ahead and maybe visualize it. Why not? So, you could turn a table into something entirely different. Maybe a graph or chart. It makes sense but in that case, I would just go ahead and not show only graph on the small view and only table on large view, but actually allow the user to select what they want to see. Some maybe having a chart view by default with tabling on mobile and then the desktop having a table with the graph link allowing users to change the view. A very common pattern is a radio button pattern. Whenever you have a matrix of two or more specific things that you want the user to be able to select, well, you always end up with this kind of pattern. Where you might have for example, in cinemas, you might have a show title left and you might have timings on the top. In that case, if you want to just save a little bit of space, what you can do is just till the headings a little bit. In that case, in that time this way you actually save quite a lot of space by not doing much, to be honest. Now, another thing you can do of course, is deal with calendars. Now, calendars have very different story altogether. You can't just say I'm going to drop all Fridays because they don't matter. Well, actually they do. So, what do you do? Well, in that case, think a bit more abstractly about the way you actually design. Think about the content that actually goes in this table. Extract it, redesign it, re shuffle it, and put it specifically designed for the mobile space. So, here we've got this table with days running on the top and the time on the left and you can just go ahead and actually really just change it into something entirely different. Maybe two views. One would be a small table and the other one will be a database, because obviously that is much easier to get responsive. So, you don't need to have this one-to-one experience. It can differ a lot. Or any other kind of table. You can apply pretty much the same logic. Here you've got AFC and NFC league for NFL playoffs and obviously, you have a lot of detail and you can't just drop some columns. It's just not how it works. So in that case, you can just try and play little bit with the size and change the topography little bit, padding, modeling, and so on so forth. At some point point, it just doesn't work anymore. So, you can flip, obviously. Just flip the layout a little bit showing AFC league by default which is what they do, and then having a slider sliding over to the NFC league. But it could just as well maybe use a set of accordions and maybe just change the level of visual fidelity here. You don't need to show all the logos at ones all the time and that way you could save some space. So, what can you do? Well, you can prioritize important columns and drop columns you don't need and allow users to select what they want to see. You can establish for navigation as well to allow the users to move between the table parts in fragments and parts. You can visualize content and re-position headings. Tilting them a little bit to save a little bit of vertical space. You can also just lower fidelity for really complex tables like Tournament tables, but more specifically, always look at the content, extract the meaning of it, and try to re-purpose it or repackage it and design it properly for the mobile space. Because this is really a very often very different thing than what you have on desktop. So, that in mind, you have a few strategies to deal with tables. So, let's move on to web forms next.
7. Web Forms (Part I): So, of all the components we have some are ridiculously annoying. When I'm talking about annoying, I'm talking about web forms. Because both forms are very tedious and they are extremely difficult and really really just frustrating to fill in on a mobile device. So, how can I make them better? Especially, thinking about responsive design in general. Now, there are obvious general strategies we have to keep in mind all the time and they are really not that difficult. Now first of all, we need to place labels above the input fields, just because we really create this nice linear path which you guys can follow without having to scroll to the left, to the right to figure out what the label actually is. Now, sometimes we're actually placing putting the placeholder attribute, which can be a bit difficult at times. Just because you just might not know what they are typing and if they get disrupted or distracted. So, maybe it's really good or a bad idea to actually put plain labels above the fields. Another thing is that sometimes it's really difficult to get visual feedback, you just don't know whether the data has been submitted or not. So, always enable to disable the button immediately upon click. So, users have a really good visual feedback right away. We can also use inline form validation of course. But we can use it in different places. So, especially, when it comes to password it's better to actually have it after a field is left which indicates that the user has submitted and finished their input. Sometimes, it might be a good idea to actually do it on the go, right? It depends. Also disable auto correct because it can really produce errors. Disable it on email addresses because otherwise you might end up with very strange input. Disable auto capitalization email for example, or on others areas which do not absolutely require it. Also of course, use appropriate keyboard layout. I mean, there is no point of pulling out an email keyboard if you use a sidebar to type digits in your telephone number input, right? So, just be careful about this. Unfortunately, most forms are however still extremely boring. This one where you actually have to type in the left bracket character into the input fields to submit the data. Others are just evil like this one. We have done to ensure we're conveniently located between Denmark and Finland in counter selector, which you have to select if you don't want to add insurance costs to your bill, or just as boring like this one. But most importantly, the problem is that these forms they don't really think about the actual interaction, they think about structure. This is a difficult part because filling in a form like this is really really difficult on the mobile device. Requires a lot of effort, a lot of taps, and it's really just not comfortable way of doing it. So, what if we thought about designing better forms a bit differently. Maybe more like this where, on the left side you clearly have a form. It has a really clear, simple, familiar to us platform structure and it feels like form as well. So, if you design this you're designing a form. But on the right you're designing an interface. It's actually the same input. The only difference is that you are required as a user to edit, to click on specific items to edit them, right? Then whenever you're finished you just click on start instead of proceed. So, the right one feels a bit more like interface and much less like a form, right? It feels like progress and not like boredom which is a big deal. Now, type form is also one of those approaches that help you achieve exactly that. Feel a bit more like an interface and less like a form. So, in that case, well, the idea is to focus on the typing all the time. So, instead of actually moving your mouse around or tapping everywhere all the time, you should be just focusing on typing, so you type. Then if you want to move from one field to another, you just press enter or select A, B, C, D. You don't use a select drop-down because you don't use them all obviously in the desktop, you just use keyboard shortcuts all the time everywhere. If you want to move from the left one to the right one, from previous to the next input field, well, you can do that using the controls at the bottom, right? Then generally if you can avoid those really boring, annoying, structural elements, like an input field for example, you can do that by using a smarter input elements. For example, if you have just two options like show and hide, you can just use a switch for that, allowing users to tap easily and move between the two. If you have something like a price range, right, with a minimum with maximum value, obvious the slide is a much better choice for this. Then also if you just want to let the user select a specific value, a discrete value like say 1, 2, 3, 4, 5, why don't you just list all of them using segmented controls and let the users tap on them easily. The last one which is also quite important especially when it comes to check out and things like that, just a simple stepper, allowing users to increase or decrease the value of, for example, the amount of products or copies of a book they want to buy, things like that. Really easy to do and really, really helpful. In fact, sliders actually can go a long way. So, you can use different kinds of sliders, a single slider and a double slider, continuous slider, discrete sliders, and so on and so forth. Continuous sliders are the ones where you have lets say, indeterminate values. Price temperature and discrete sliders of things like clothing size. It's always a good idea to keep and use continuous one and not to prevent zero results page. You can actually extend your sliders to do more than just showing a range of values. Maybe actually showing actual meta data about the number of options you have in this specific price range. So, here you know exactly based on the height of the bars, how many options you have. It might be a good idea to maybe add some context in terms of text to it as well. Also the way you distribute your slider range might matter as well. Look out for making sure that you always have approximately the same amount of items in every price range. That way you should make sure that users will never end up with zero results page all together, very much like Airbnb does, where you have exactly that legal bar at the back. So, to sum up here. Well, basically we can try to make all forms feel a little bit less like forms and a little bit more like actual interface using those traditional interface elements like sliders, like toggles, like switches, to actually really move away from input fields and select bars, select drop-downs all altogether. The less we use them, the better the experience is going to be. So, this is not that difficult, but it can really make a big difference.
8. Web Forms (Part II): So, just a few minor modification as we saw in the last part, we can make sure that maybe your form doesn't really feel like a form, maybe more like an interface. They're just really minor, but there is a little difference. Now, if you actually put it all together, you might end up with an interface like this. So, you want to have a few select- big really fancy select drop-downs, which are really comfortable to tap. You might end up with a few segmented controls, like this one. You might end up with really prominent buttons that are so easy to click, so that moving between the checkout doesn't really feel like a big deal anymore. It's comfortable, but in the end you still end up with those input fields, and there is not much you can do about it. You still need to type in data. Yes, you can use those fancy radio buttons like they do here, but in the end, it still feels like work. Maybe if we can actually avoid input fields altogether, it would work, but we need to type in data. So, let's take a look at some other examples of how you actually really can avoid those input fields, and make them a bit better, if you need to use them. So, one of them is, of course, whenever you have any secondary items, address, optional address or any optional phone input or whatever, if you know that you don't necessarily need them, don't show them by default. Use something like progressive disclosure, like with the plus button or whatever that would actually display it, make them appear on the click, because you don't really need them. Another thing is, you actually have a lot of sensitive data that you're asking for. Well, why don't you explain to the users why you need this data. Whether it's telephone input, or email address, or anything, just provide some kind of little hint to really reassure them why you actually need this data, because it might be very well that they just don't know the reasons why you need it. Another thing is email address. Now, we know that email address is one of those critical items you always have in e-commerce and it's really important to have. But if you have an incorrect email address, it's as if the customer never existed. So, maybe you can actually make the input a bit easier. So, whenever users type in something, well, maybe you can provide something like autocomplete, auto-suggest, with the common email providers that, according to your database, are heavily used by users. Maybe it's Facebook, maybe it's Gmail. But if somebody actually types in Gmail, it's really much easier for them to correct because they can just tab, not really a big deal. That's really, really comfortable. The other way of actually improving it as well is to ask users to verify their email just before they submit their order or before they submit their feedback form, just to make sure that they actually provided the email address. Because the actual problem is that most users, when they're asked to re-type email address in the input field, they use copy paste. In fact, 60 percent of users according to Baymard research, consistently copy paste the email address instead of retyping the email. So, it's not a good idea to actually have it because most people don't use it anyway. So, if they made a mistake in the first place, they will repeat it because they copy paste anyway. So, remove the email verification field altogether. You don't need it. Instead maybe you could use inline autocomplete, really verifying inline that it's correct, or just have a review page where it's being asked. Very often you end up with situations where you have placeholders to save space, especially in mobile. Well, the problem with placeholders is when people start typing, they disappear. So, this a big deal because they actually lose contexts. So, you can actually have both. So, SP will start typing, you can actually push this title a little bit to the top. So, it's not as prominent but it's still available, so it doesn't get lost. Those inputs, or those labels, can be responsive as well. So, if you don't have space to show it in the top, you can actually show them on the right or whenever. So, you can be really flexible on this. The same way as with textarea. All those little things can actually really sum up, so when summed up, make a difference. So, here if you actually start typing, the textarea size automatically increases. So, you don't need to reserve eight or 10 lines for textarea. You can be more flexible on this. Again, reduce the total height of the form. When it comes to year of birth input, well, sometimes you don't need the exact date, maybe you just need the year. So, ask for year. You don't need two extra inputs for the month and for the date. Also, the same goes for country selector, which can be endless, almost endless, feel like endless, where you might end up with just not knowing where to find your country. If you're from Netherlands, or you're from or Netherlands or Holland or maybe your country is prioritized in the country selector. So, you can just ask users to type in the first two, three characters of their country. That's not really a big deal and as they type, you can recognize the synonyms in the back. So, it doesn't matter if they type CH, Schwei or Switzerland. Or if they type DE, Deutschland or Germany, you can realize that it's the same thing anyway, and it's much easier to fill in. In fact talking about countries, sometimes it's not very necessary to ask for cities at all because you can ask for a ZIP code. In fact here's a little study which show that once, if you're asking users for ZIP code first and then pre-fill city and state automatically, on average, the completion rate is much higher because you're going to predict it correctly, based on libraries like Zippopotam.us, for example. So, as you start typing, as you type in your ZIP code you can actually pre-fill the city and state so users don't have to type it in altogether. Of course the king of the input fields, which is the crown of the web forms here is the credit card input fields. Sometimes these forms are really difficult to type in because they ask you whether it's MasterCard or Visa, and you have a lot of input fields you have to go through. What if we combine it all into one? So, in this case you just ask, what's your credit card? Please enter your credit card number, you just see at the, hint at the bottom. Then just start typing. Well, you can actually recognize in the back what it is, whether it's Visa or MasterCard or anything else. Once you have this input, well, it's kind of sliding to the side, and it keep typing. So, notice that the notification at the bottom hint this changing. So, you know what you're typing, and then whenever you have something that requires kind of some feedback, visual feedback, you can also change the icon as well. Here in this case, it provides EV and then finally ZIP code, and some point if everything is correct, that's fine, that's green light's. It's much simpler one input field that just works and it's really not such a big deal. Now, what does it mean? Well, if you can avoid complex interactions, if you can avoid complex, really annoying input fields, like select drop-down for example, please do that. In general, if you can enable a user to provide some sort of input with one tap or one-click, seek that. If you can simplify, obviously if you can simplify some formal elements do that. Prefer radio buttons, toggles and sliders just because they're so much easier to manipulate on a mobile device. If you don't need specific fields, input fields, secondary fields, you don't need to show them right away. Show them as progressive disclosure. Use floating label pattern to actually never lose context of what users are typing. Also because most people are copy-pasting email anyway, just avoid email verification, use something like inline check or just ask them later to verify the email address. Whenever you have lengthy input, think about simpler common ways of actually reducing this complexity into something a bit more manageable. Also make use of the ZIP code. Once you ask for the ZIP code you can pre-fill a lot of data from it. In general, just consider using input instead of <select> because in most cases you don't really need a <select> drop-down altogether, especially for things like country selector, you just don't need it. This way, just by using these little basic rules, you can really make sure that whenever you do have an input field, it really serves a purpose, and your forms will be really much shorter in the end, and the users hopefully, will be much happier.
9. Adjusting Micro-Components (Part I): So, some of the components we talked about are going to be used in pretty much every project, in every responsive project. Think about navigation or even maybe tables. But some of them might not be used at all, or very rarely. Now the problem is, however, if you haven't been thinking about how a specific component fits within the context, you might end up with really difficult situations. So, some of those components are really difficult to manage once everything else is set. So, let's take a look at some of those micro components that you might need, but you probably don't need all the time. So, when you think about the components on a very strategic level, it's a good way of thinking about it as levels of experiences. As Patty Toland spoke in one for talks for Filament group, she said that we can think about designing responsive components in terms of layering various levels of experiences and functionality. We start up as a functional layer, and level up to more enhanced levels for every component, and for all set of components. So, we start with something really basic that we actually just need. We start with the speed, lean, making sure that the web component we're building is lean, fast, and it's really heavily optimized. On top of that, we make sure that it's a accessible fully functional across all the range of screens and devices. Then once we have that, we can actually start talking about the structure and how the component will actually change depending on the grids, on the breakpoint, on the order and layout. And then actually once we have that, when we know exactly what the responsive behavior of this component is, you can think about the decoration in terms of style or logo brand, colors, fonts and so on so forth. So always think about this pyramid first when you're actually designing a custom component. Let's say you have to design a timeline. Now, timeline is not a big deal, well usually you just have a timeline and you stick to it. It can be horizontal, it can be vertical. In this case, we can actually play a little bit with the topography, a little bit with the font size, and the padding. There shouldn't- we keep this nice timeline, and we actually probably could keep it all away, but then the actual reading experience might not be good because the alignment will be too short. So, in this case you can just turn it into something a little bit different like an overview of those items which works just well as well. When it comes to graphs or charts, it's not that difficult or basically they're just media elements, so you can just squeeze them in on the mobile space. But you need to make sure that those pie charts or whatever it is you're using, are still big enough. So you actually might need to make them bigger, not small for mobile space. And now, all those interactions, of course, will need to be still in place. And also at the same time, sometimes you might have those animated elements. So, you really might rethink the thickness of lines and how they're drawn depending on what you want to design. Now, here's a nice case study by Globe and Mail, by Teehan Lax, who design Global Mail, and they're talking a lot about the designs of financial components, specifically for stock markets. And again thinking about infographics and charts, and they're actually considered all the different views and also specifically labels because in this position, when casting for graphics, position of labels, and the color of labels can be dramatically important. Because you want to make sure that this infographics looks nice both on a bad quality screen and a good-quality screen. So, think about not only thickness of lines, but also about labels and where you position them, and of course the level of fidelity will have to change. Sometimes, you can show exactly the same thing both on mobile and desktop, and also the colors to pick, for example the background colors, it can make quite a difference. Maps in general are a big deal, because when you have a map, and you use for example the map and the CG map as a filter, maybe states as filters as you do here, and it works well on desktop but it doesn't really work on mobile at all, because of a fat fingers problem you are not able to tap on a specific state especially if it's size is not big enough. It's just really big deal. By coming back to this layering we talked about in the beginning, well why don't we actually start with something functional, like a select drop-down, as you can see here? And then make standards and enhance it to something a bit more meaningful for larger screens. Less like an actual map where you can actually tap and select whatever you want to select. With maps in general, you can actually go a little bit further and if you have a really small area that users might want to select, just allow them to select several countries at once, and then prompt a little list all of you to allow them to actually select the specific part that they want to have selected. A really small thing, but can be quite, quite useful in fact. But you don't need to load the map up front all the time. Because you know you have a lot of maps in your design, you might end up with the users actually scrolling down again direct into the map, which is probably not what you want. So, in that case what you can do, is actually provide an image, just an image of the map, a screenshot of the map if you like, with a link to Google Maps or whatever map service you're using. Then if you know that most screen space is available, screen width is available, we can actually show the actual IFrame. Right. But you don't need to show it in the normal space all the time, and have conditionally loading the map the IFrame when you need it, and just showing a link when you don't need it. The same goes for light boxes as well actually, because very often you click on an image, or you tap an image on the page, and then you have an image and actually the smallest size, although it's supposed to be a light box. So, just show the image in a small view. Right. With a link to the actual large view, so people can zoom in and zoom out if they're like, and then show and load the conditional light box more conditionally. Only when you need it because it's really not necessary all the time. All right. So, what can we learn from this? Well in general, think about this pyramid all the way, think about the speed and access coming first, make sure that you are good there, and then you can actually use scale and style later to create really beautiful rich responsive experiences. Now, flipping or changing direction is not good enough in most cases. I mean, adjusting from desktop to mobile, which is unfortunately what we'll do most of the time, can be quite difficult. It's not just adjusting the layout, think about changing the level of fidelity by changing the different views for it's a infographics of any either custom component. Also when it comes to maps and light boxes, think about conditional loading of those IFrames, and if you can't make sure that the user feels comfortable with the selection of a small input, well, just prompt the list view on tap, so they can actually specify the input when needed. But in general, once you have all of this in mind, you can make sure that all of those components, when they come in, can be dealt with effectively and efficiently. So, users don't have to wait, and they still have very good experience navigating your site.
10. Adjusting Micro-Components (Part II): In the previous section, we talked about a few visual micro-components, right? Things like maps, things like light boxes, which actually have a media element in them. So, that makes them actually quite present. At the same time, there are many structural components that might not be as prominently positioned. Well, it depends as we'll see in a second, but that can actually require much more work to keep in mind, especially when thinking about breadcrumbs, all those little details. So, let's look at some of them. So, I really believe that if a design problem can be solved responsively, eventually, it will be solved responsively. The problem is that we tend to overlook. Overlook something as big as prominent as a carousel. Right? Now, we talked about the visuals in the previous one, but here, what's really important is the actual structure of the carousel. Now, very often, if we just abstract from the actual presentation, it contains a few errors and a few dots in the middle, which is supposed to stand for progress, kind of what step you're on at the moment, and very often they're really poorly designed. Like this is probably one of the worst examples, where you have a really prominent big image in the middle, and then this little dots which are supposed to be your navigation items. Right? This is the way you navigate. This is just not very convenient, which is why many designers tend to move away from carousels. For example, this here, can be presented as a carousel, and it's often based on data, on solid data. Because if you look at how many people are actually using carousel, to be more specific, how many people actually see image two, three, four and so on, you'll end up with surprisingly a low number, right? It's about maybe two to three percent for position 2, position 3, position 4, position 5, which is really not a big deal. That's not a lot of people. Obviously, kind of turning a carousel into a random image generator, scrolling through the positions, doesn't really help, just because people do not navigate with it. So, we can make it better, maybe like Amazon does, where instead of just showing arrows and dots, provide some context. Why should people click on it? Provide something like a thumbnail or a text, which really makes it easier for users to go ahead and click on one of those boxes to get more information about a product, or an offer or whatever you have. It's very helpful just to provide some context. Another thing is breadcrumbs, so I should progress steps. If you check out in desktop, well, it's perfectly fine to show all the steps that the user will have to go through. But sometimes, I can just reduce it to simple text as you can see in the left upper corner here. We just show step one out of five, and name the step, and that's pretty much it. This is how simple it can be. So, if the user moves to second, third, and so on step, you just change the text accordingly. Really not a big deal. Now, those progress steps can be really as simple as the previous one, or a bit more difficult. Here, is where you actually scroll down the text. You can actually provide some context about how further that has come into reading, or finished reading this section of an article, which is kind of really quite helpful. Another thing in a very different settings is E-commerce checkouts. Well, here again, you have your shopping card, and then as you actually go to the checkout, what you see is that, instead of actually having this progress steps, they act as tabs. So, you can move between shipping, and billing, and review very quickly, because they actually pretty much act as steps, which is also quite convenient. You don't really need to show on the text alone if you can. The same goes for, if you have a flight selection or something like this. Now, breadcrumbs don't have to look like breadcrumbs here. For example, you can have again stuff like a little toggle that allows you to show, to see everything in the entire view. But by default, you could have a very simple compact view, without distracting the user at all. Another very important thing to keep in mind is that, we tend to forget about vertical media carousel. Now, vertical carousel are often very important, because, the width of the screen, the width of the layout can really be different. Because you just might have a big screen, a small screen, but the width alone doesn't really say as whether it's a mobile device or not. While the height, might be a very good indicator that it's actually a mobile device or not a mobile device. So, think about mobile vasco music views. Especially, if you have something like this navigation, where you have a few items appearing. Well, when you click on an icon, this is not very scaled because at some point, this just will not be visible anymore. It will be very very difficult to navigate. So, maybe you could actually think about using accordion based on the height. So, if you know that there is nothing of height to show, all the items can actually still use more, and kind of show like the MoorLink, and show the sections in parts. It can be quite helpful. Now, draw the comparisons. Obviously, on mobile, you don't have a lot of space. So, what do you need to do? Well, the only option you have is to actually use full height for full screen basically. As the user, click on compare, just occupy all the available space with this slide box to make it easier for them to compare. Also, footnotes, and side notes, and magazine layouts. So, very often you end up with uncomfortable footnotes somewhere at the bottom where you have to jump over there than that to jump back, or side notes which actually kind of get squeezed in between two paragraphs. Well, maybe you could use something like inline side notes, or as you can see here, when there is a tap on this icon, you can actually get information about the specific side note, and it could appear at the bottom or it could appear on the top, it's really up to you. But try to put it in context. You don't need to make people jump from one place to another. The same goes for PDFs as well, because PDFs are really obtrusive. I mean, you need to download the entire PDF file if you want to read page 18. This is not really cool. So, maybe you could actually show with your thumbnails. So, if people want to download the PDF file, I think they can actually go ahead and download it, but it can be a humax, so it might take a while. At the same time, just provide something like really small thumbnail views, really heavily optimized thumbnails, so if people want to just get to page 17 for example, they can get there with 50 or 40 kilobyte without having to download the entire PDF. So, carousels are not bad. They're not much different from accordions, just slightly more different in the previous disclosure. They need contexts however, so, provide some context, some meaningful details so people are inclined to go from one area to the other. Breadcrumbs can be tabs or accordions, or as simple as plain text. Use vertical media queries, because often they are very good indicator that you have a mobile device. Show product comparisons full screen, because there is no other way around really. Instead of putting side notes on the side, or actually footnotes at the bottom, maybe you can actually inline them right in the content, and the same time, what you have to deal with lots of PDFs. Provide heavily optimized thumbnail, some people actually can't access them very very quickly. That can go a long way as well. Right. So, next, we're going to talk about images, specifically about responsive up scaling. How we can use all the available space to make the best for our layouts.
11. Responsive Upscaling: When we deal with responsive design, usually we have this simple intend to go from desktop space to mobile space. We're moving between these two spaces. While at the same time, it's really important for us to consider, not only in the mobile space itself which is obviously crucial and important, but also this large displays, large screens space. So, we do optimize a lot from desktop to mobile, but we maybe should be optimizing off from desktop to those large space as well, because they provide us with a lot of opportunities to make experience for we'll use much better. So, let's see some of those ways. Now, as Mike Pick wrote in one of his articles analyst apart, "By embracing last screens, we can have the opportunity or use the opportunity to work within a larger fold, presenting the users with more content simultaneously, lesson scrolling on longer pages, and create a richer and more expansive user experience." Now, that provides a lot of advantages, because if you think about the general view that you have if you go to a random e-commerce site, this is what the experience going to feel like. It's not only true for you with lots of white space everywhere, it's not only true for e-commerce, it's going to be very similar on newspapers as well. Here we've got MSNBC, which is fully responsive from this auto-mobile, but not so much so when you go further up at all. The same goes for quartz.com as well, where we might have this really prominent big image at the top, and a very tiny column where the content resides. So, maybe we can make it slightly better. So, a few ideas for e-commerce specifically represented by BioMart institutes in one of the Smashing magazine articles, and the ideas are very simple, and they're really simple to implement as well. Just makes use of the space really, that's pretty much it. So, if you can show five items per row, just show five items per row as you increase the amount of items you can show in your grid. Also provide something like very important critical things like order, so overview of orders or access to your account, or support hotline. Very subtle in a very subtle way, but somewhere on the right or on the left so users can always have access to it. If you have something like a really prominent image that you want to highlight, instead of making them small within the grid, let it just break them grid and show them really prominently. Also the Add to Cart button or Checkout button might be really critical to keep in mind, to look, keep available all the time. Filters, we talked about fills in litigation sections, a section where if you have a lot of filters, you might want to use tabs potentially to present them at the bottom of the screen, so when users click on them, they have a little pop ores, but if you have a lot of security, you can just show the filters. So, here you can have a color filters type, size filters, and so on. Just being present so as the user is scrolling down the page, they can actually have access to filter still, because the filters the filters are scrolling with them. The same goes for recently viewed items and Add to Cart on review page, and also Order Summary, for example, which just usually jumps down to the bottom of the patient in mobile view. It should all be present. Now, the idea is, well, what if you have a strong like heavy visual presence? So, if you have any visual background image, what you can always do is just extend a little bit. On a mobile view you might not have a space to show it, but you certainly do enlarge view. So, you can just use the space, use a color to show it.This is pretty much the same across all the background alongside that have background. You can always extend the background a little bit, so it doesn't feel so lost. Now, there are few interesting examples of what you can actually do with it. One of my favorite ones is UNIQLO because instead of just having a few items, a restricted number of items being displayed per row, they actually do scale up. So sometimes you might have one, two, items but sometimes you might have six, seven, eight, and so on so forth, which make sense, it turns a product overview in a product wall, which is useful to do. Furtado, bicycle furtado, they actually show a big, prominent image of a product that they're selling. You might not need to show the product that big, but it goes in the right direction, they just use the space available. The great discontent is a magazine, and they do have a nice magazine grid layout, but they also always use all the available space. So, an image is going to be really big in the large view, the cool is going to be, the topography is going to be, it's going to feel very magazine like, because there is no max-width altogether. If you scroll, or go down and reduce the size, while they still have the same experience, of course just the images a bit smaller. But it's really nice to have consistency in how they getting small, how they getting big. Sometimes you might have a really complex illustrations that are just easy to scale up and down. So, here you've got all those illustrations and it doesn't matter what height or width you have, maybe you end have full screen display, it just being displayed all the time, makes sense although the topography could be a little bit bigger. But my favorite example by far is the Kremlin website example, where if you have a lot of space, well, you do have this dual panel layout if you like, where you have a search results on the left, and have the content of that page on the right, which makes sense, it's useful. At the same time if you don't have the space, is just going to be an overlay. So, you have to close it and then you move on to the next one. But if you do have space, it's really nice to realize to navigate because here you can open one, and then it can open another one, and you can really have this dual view. So, it makes sense. Now, to sum up what can we do? While there are a few options obviously. First of all, we need to expand the design to fill the screen. Otherwise, the user might feel lost if you have way too much widescreen and left on the right, and the topography being small. Footnotes and the side notes, especially in magazine layouts, can actually jump on the side on the left or on the right, because you can make use of the available space. You can also consider multi-column, multi-panel layout like Kremlin or Tradus. You're going to extend product grids, like UNIQLO does, where you just show more products if you have space for it. But most importantly bring important actions into the focus, so things like Add to Cart or Checkout, like this critical buttons, can always be presented in a very nice way, maybe subtle, maybe not so subtle, so users can always have access to them, because once you have that, users will not feel lost, and that's a really good thing.
12. Complex Responsive Interface Design: So, sometimes, you know exactly what kind of components you will need. But sometimes, you're getting a project, a weird project, and you have to work on it. It requires it to really get creative and figure out a way of how to make things work. Not something that can be just crazy, maybe you suddenly all of a sudden work on a Japanese project with language you don't understand or maybe you need to build some very interesting, interactive game, or something like that. That's doable. But, still in both cases, what you need to figure out is how to create and make work those reach responsive interfaces. Sometimes, they just call for custom solutions. More often, those interfaces are going to be very difficult and very complex, and not as easy as one might think. So, let's take a look at some of them. One of the most prominent ones which are available, which is just everywhere, is of course the checkout. We might think that checkout is a relatively simple process, but it isn't because there are many checkout touch points with the user have to go through. From adding an item to the cart, to checking the refund policy, or checking payment options, seizing bidding address or shipping address, completing the payment, or maybe actually finding out that the authorization failure that didn't work in the end, abandon the shopping cart, login to download the invoice eventually, and then just finish everything and hope for the best that they will get the product. It's a long process and unfortunately, in many scenarios, e-commerce feels very tedious and very boring. So, let's take a look at some examples of how to make it better. So, here's a nice example for this, for a really nice e-commerce experience. So, a dollar shave club, where they don't have that many products, but they do have a few. What they have is a really simple layer with a really simple page, where you have free options to choose from the desktop view, and the smaller view, well, you turn this nice little slider, which you can use to navigate between these three items. Then, you can obviously enlarge one of them and get information about it, and so on and so forth. Select an item potentially, and then it's going to be added to the cart. Also, you still can add more stuff to it. So here, we can go to the next one if we don't want anything else. You can go back using just two of one. You can also change the number of items you want choose. Obviously, add more items from the find. Do you see how quick it is, and do you see how fancy it is? It's really really nice. It still had this nice shopping cart experience, which is like a pop up, like a light box, but it's really really nice. It can change the quantity really easily. It's just a very nice, a very focused experience. All right then, some point obviously, you will end up in the shopping cart and this is where you will be filling in the data, typing in all the credit card data, I'm not going to buy hopefully. There are so little, many little details like billing address is going to be the same as the shipping address, and this item, the icon is going to be available only if everything else is correct. It's just a very nice experience for here in the e-commerce site. Another similar experience is here from Harris, where you do have very similar experience but it just really tight, really clean and nice. So, starting from the affordance for buttons, and how you add the item to the cart and the pick size, it's all just designed how it's supposed to be. It doesn't have to be that difficult. During the shipping options and so on so forth, so the payment isn't really a big deal. Also, take notice that, for example, when you want to fix errors, they allow you to fix errors, but you don't have to. So, it's a very nice very forgiving interface. So, if you want to have a nice example of an e-commerce experience that really works well, just look at these two examples, I think that they're really really good. But sometimes, you might have obviously a very different experience, like Typekit. Think about any interface where you have a lot of weird blob of content in the middle of the page, like this one. You have lots of different boxes, animated boxes actually, which provide some hints or information hover. If you just decided to stick it all in one single page, this is going to end up really badly. It's not going to look nice, so you're not going to create a nice experience with it. But what you can always do in these cases is to turn this blob of data into something more manageable like a slider. I wish we had a little toggle over here to move to the previous and to the next, a set of images or options, but this actually sliders, which you can swipe through if you like, which is really really nice. It's a really simple way of reducing this complexity we have to something more manageable in mobile view. Now, but sometimes, they still have something really really outer space, like this one. So, you have a little project, managerial project, a little platform, where users are supposed to be able to buy tickets to shows, events, stadium performances, whatever. You're wanting to not to be able to just look at all the different areas available, but also to be able to zoom in to a specific row where they want to seat, and select the seat where they actually want to seat, maybe even get a preview of what it's going to look like from that specific spot. That sounds like a really complicated issue. So, how would you actually deal with designing an interface like this? How would you make it work? Well, you probably will end up with something like, I don't know, maybe some of the settings, pattern where you can provide, ask you to just tell us what price range do you like, what kind of seats would you prefer. Also, maybe there are specific hot deals going on at specific areas, and so on so forth. So, in the end, what you could do is, it's not available here anymore. I select one of this specific options that you like, that are important to you as the user, or maybe adjust some filters like this, and other settings to really minimize this complexity that you have to display. Or, you might end up with designing custom components like this one, where you have to deal with an interactive guitar taps. So, obviously, you will have to recalculate the different spacing between those different components that you're just playing on the page, on those different tabs. This is going to be quite a nightmare but if this is doable, I think that pretty much everything is doable. If you really want to explore these different interfaces, well, do go ahead to Japanese or Chinese websites, because Japanese and Chinese websites are really far, way far ahead than we are. We're thinking a lot about optimizing from desktop to mobile, but they think a lot about optimizing for mobile to desktop because they are mobile-first anyway. So, again, thinking about this blob of data, or whether they do have a different visual language, well, you can just learn a lot from them. Like, this blob of data turns into something manageable as a set of areas, block elements with customer illustrations put instead of those big images. So, it's kind of an odd direction if you like. The same goes for this page over here, where you have lots of areas and also lots of animations going on. Even those little infographics or way finders, if you like, are still going to be displayed prominently. They are responsive as well. So, those areas, which might be not that easy to develop and build, are still responsive as well, which is quite remarkable. So, you end up with these experiences, and you can learn a lot about the accordance and how to use water, and so on and so forth, just by doing this. What can you do? Well, you can break down complexity just by trying to reduce the fidelity. You don't need high fidelity all the time. I can ask you this, what is important to them, ask them for their preferences, think about ways of actually presented better for them, so they can actually navigate this interface. You can keep in mind what's important and prioritize it for them, really setting sensitive defaults, smart default it makes sense. When you're thinking about those complex blobs of data, think about turning them into a slider, which can be easy to navigate. When you think about e-commerce site, just make sure that you have this one-tap rule in mind all the time. So, those can click, add an item to the cart really easily, change the number of items, checkout using smart defaults like setting address, setting shipping address, same as billing address, and stuff like this. This really can go a long way, and just extended conduct meaningfully, because it's one thing to show a map, with seatings and where people can actually find a ticket where they want to seat, but it's a really different thing to create a nice assistant which would ask you to specifically all the questions it needs to provide a meaningful output in that, and not too much output. So, think about the things and then even the most complex interface doesn't have to feel like it's really complex and really difficult to navigate.
13. Final Thoughts: Now that was quite a journey. While we took a look at a lot of different components, starting from very small, kind of moving from really simple ones like a hamburger icon and things like that, to something a bit more advanced like tables and boxes and calendars and things like that and then towards something really advanced and really complex user interfaces. The question is what do we do with it now? Now, obviously I'm again, I just want to make sure that we are all in the clear path here. I don't see that all of those techniques, all the solutions as final endpoints for any design. I don't think you can just go ahead and take it and apply it to your project right away and just call it a day. This is not how it works because the context will be different in your scenario. But I think it's really valuable, really really useful to be aware of all of those different things you can do when you stumble upon a problem like this. So just to know what kind of options you have when you have to deal with the calendar, when you have to deal with table, we have to deal with all those different things. So take all of those ideas with you and build upon them to create something new. And news are not again as the final standpoint and the final result of what you're building but rather the conversation starter for your design process because this is essentially pretty much it. This is what it is. And obviously now that we have all those techniques in place. It doesn't make sense to just sit down and look at them, we need to put them in practice. So let's try, let's figure out a good way of actually make them work within our context, within the context of our little project. So let's take a look at the project that you can see as well on your screen and think about all the different components we've talked about but also the ones that actually make up this magazine layout that we talked about, right. Try to identify them, try to design them properly, try to make sure that they feel well together and try to make them really responsive in a way that it really adjust both for small screens, very small screens and for larger screens. And then maybe actually reshuffle them in a way that would work best for this undirected posts that we have to design. Now when I think about responsive design, actually, I have this view of this record voyager which was sent out into space in 1977 to communicate with aliens, so aliens can find us and do whatever they want with us. That's a very kind of optimistic view, but that's okay. Because at some point somebody had to go to a visual designer, ask them to design a visual language that will stand the test of time and will be designed for aliens, right. That's quite a task, I would say. Not this little project we have to design is not that complicated as you know, as this one. But and at this point, we have to think about what would we do in support of this person. How to design something that would stand the test of time for years and years to come. But as it turns out, what we're doing today with the web is not much different because we can craft interfaces, we can craft experiences that will have to stand the test of time for years and years to come. Because if they're accessible, if they're fast, if they're created with a real kind of with maintenance in mind, we can make them really, really work well, even 10 or 15 years from now and be both accessible and responsive and beautiful at the same time so that our users will really, really find them delightful. With that in mind, I hope that you will be able to create those interfaces. Maybe with a few techniques we shared and we discussed about in this class. So, I want to thank Simon C Page for the front cover for the class. I have a Homer Simpson situation somewhere, I'm not sure where. The section illustrations, the animated illustrations were done by Guillaume Kurkdjian from Nantes, France. He's an amazing illustrator. So if you're looking for an illustrator, he's a really great option to consider. I also had a hypercube image in one of the earliest section and I really hope that this was helpful and that you will be able now empowered to create really beautiful interface and I can't wait to see your projects, sketches, wireframes, anything else in the project directory here. Thank you for being a part of this class. I hope that some of the techniques we discussed today, that you discovered today have been really, really helpful for you. I'm really looking forward to see what's your going, what you're going to make with the projects. So feel free to submit anything, be it like early sketches, drafts doesn't have to be any proper mockup or whatever, wireframes, whatever. I'll be really happy to provide some feedback, but maybe we can discover a technique or two that actually really helps or will help to get rid of some annoying things that we still have on the web sometimes. Like forms, for example or pretty much anything else. So, I'm really looking forward to see what you guys will come up with and if I have, I can give you any advice if we can help in anyway, I'll do the best I can. I think. Yes, I will. Sure. I promise. Guaranteed. So with that in mind I hope to see you soon and some part of the world and have a really good day and looking forward to a conversation with you.
14. Explore Design on Skillshare: way.
Vitaly Friedman, Editor-in-chief, Smashing Magazine
