Your Mobile Navigations STINK! Better UX AWAITS!

if you rely on this thing your mobile navigations probably suck but don't worry if you watch the whole video I'm gonna make you a mobile menu master hey what's up everybody Gary Simon here so today we're gonna be taking a look at more of a UX topic as opposed to UI design like I usually do and we're gonna be focusing specifically on navigations in the mobile environment now a lot of people rely way too much on the hamburger menu so what we're gonna do is we're going to take this example right here which you know design wise is pretty good but we're going to run through six different enhancements that will ultimately take it from this which is really poor in terms of navigation and UX and convert it into something that is much better so definitely make sure to watch the whole video it's a shorter video today and also subscribe let's get started before we begin Leno takes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with back-end access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work Linode has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors lonoa can do that too so sign up using the link below in the description to get $20 in credit on your new Ellen note account alright so right here we have a mobile layout of a fictional sort of personal portfolio and I've seen a lot of them doing my Friday live reviews and you know I build websites and apps I've seen that a million times and also I've seen the little screw indicator which is a form of call to action and then also we have the hamburger icon menu up here which you click it and it brings out you know my home portfolio services about me hire me etc so in terms of design this is actually a good design it nails that down all the UI design fundamentals is good contrast there's good visual hierarchy you know where to look i they're all there but it is really lacking in terms of UX or the user experience and specifically in terms of navigation so we're going to progressively enhance this one by one through six different examples and each one should get a little bit better than the other so the first improvement I want to focus right here on the scroll indicator a scroll indicator when you have it here it suggests to the user that yes you have to scroll down to access certain information but it doesn't really tell them where they're going what are they going to find it's sort of annoying so instead of that one way to improve that is to put an actual button with an appropriate label so let's say for instance you did some user testing and you decided that and you concluded that your users the most important thing they want to know when they reach your design portfolio or your code before your whatever is they want to see your work right they want to see what you're capable of doing so you've put that here see my work great that's a lot better than the previous version where we just had a scroll indicator so next up let's go ahead and check this one out now the only thing that changed here is I added a portfolio button so hamburger menu really should only house or contain secondary elements of importance or secondary destinations I you want to abstract or take out of that the more important destinations of your app or your website so we've done it up here there's a permanent fixture so now depending on no matter what page they're on and on your website or your app they're always going to be able to quickly access this and we have enough space to do it even on mobile as we can clearly see all right so now we have two locations my portfolio and also see my work right here now let's go ahead and take this one step further so going back to the previous example we'll see that we have all this space here now while it looks nice with with the photograph it's still unused space that we can use more intelligently so coming out here you see we've now moved up the headline and now instead of just forcing them to click to see your work what are we doing we're actually going to show it maybe through a carousel that you can drag left and right maybe your your top examples that you really want to feature your best work and then also a call to action to view all the work and we still left the portfolio up here with the hamburger menu to access secondary destinations and again this is now a much better if we compare it to the first example right here and we've ended up right here so let's take this even a step further this one I didn't really change too much but I did want to copy or change rather the ad copy I've seen so many people get this wrong during my Friday live reviews where their headlines they're emphasizing features but not benefits and if you know anything about marketing 101 in psychology and trying to sell yourself to potential clients or in customers you want to emphasize your benefits over the features a benefit for instance would be right here I build amazing experiences that's that's how I can benefit you right the feature would be I build websites and apps so that's your feature that's your title right I so instead you want to emphasize I build amazing experiences you want to you want to it not exactly use that same verbiage but you want to emphasize a benefit of how you can actually help them how can you change their life and I decided to add this little subheading to actually add in you know your job title but as we could see in terms of visual hierarchy it's of less importance than the benefit this is the feature and this is the benefit I did also add a little bit of movement with this it was kind of fast but Adobe XD only allows you to add five-second transitions between artboards but having a little bit of a movement probably about half the speed of this would actually be ideal it draws people's eyes to your work I so let's even add and make and make this a little bit better than what it is here all right so now what we've done we've taken the my portfolio button out of the top and now we've created a tap bar where we don't just have the portfolio we also have skills and hire me all right so why would I do that well I'm gonna show you one other artboard let me really make this big so when you're developing or designing for mobile your people are using it with phones right and I know for sure I'm not the only person who's visited multiple websites where I'm holding it in my right hand right handed and I'm just using it with one hand and I'm trying to reach all the way to the very top of the damn phone to reach that little hamburger icon menu and it's difficult so eventually you're probably especially with these modern-day phones which are getting bigger and bigger you have to use second hand and that's not ideal you want people to be able to use and access things as easily as possible so the natural zone is kind of where you want to put your most important navigational elements so going back here what we've done we've taken my portfolio which is a primary destination and now we've placed it down here in this green zone of sorts all right so now everything still works we have our secondary naviga here sometimes I even do see people put the hamburger menu in the bottom maybe as a fourth element and that sometimes does pose technical issues with iOS Safari and how it handles it I think I'll do another video about that specifically going forward you could in order to avoid those type of issues put it up here but again that kind of does require you know multiple hands to access this information specifically but still this is a lot better than what we had in the first example so again going back this is the first example very poor in terms of UX and a lack of navigation but now we come to here we're doing a lot better to really make the most out of the space that we have and also really improve the navigation of the site so if you can start thinking outside of the hamburger menu and really only using it for secondary items then your navigations won't suck anymore all right everybody hopefully you learned something new if you did make sure to subscribe because I have a lot more content coming here in 2020 especially in the UX realm gonna be ramping that up very quickly all right I'll see you guys soon goodbye

Channel: DesignCourse

Views: 192,963

Rating: 4.8540258 out of 5

Keywords: hamburger menu, hamburger icon, mobile menu, hamburger ux, mobile menu ux, mobile nav, mobile nav ux, mobile navigations, mobile navigation ux, mobile navbar, mobile navigation bar, mobile tap bar

Id: 1D4FzPcEiN4

Length: 9min 23sec (563 seconds)

Published: Thu Feb 13 2020