Your Mobile Navigations STINK! Better UX AWAITS!
Вставка
- Опубліковано 18 жов 2024
- Visit linode.com/desi... for a $20 credit on your new linode account.
-- In today's quick video, I'm going to take a very common mobile navigation UX pattern (that I see too many of you doing!) and make it much better through a series of 6 different improvements.
Let's get started!
#ux #mobile #navigations
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
As always, you know the drill -- sub up!
Done
Subbed and notifications on!
Love your work, and I'm excited for more content!
Now it feels like 2020
just realized i wasnt subscribed. lol watched so many videos i just assumed...
anyways... Subscribed!
@@thinkingaloud7925
css dark neomorphism login form ui design
Laying out for one-handed mobile use was something I hadn't considered-even though I've felt that frustration myself. Excellent stuff.
I've never seen that "scroll indicator" before, I wouldn't know what on earth it meant or that i could scroll. I think we've gone too far in terms of abandoning affordances or over-abstracting them.
Aidan Brumsickle agreed
I think that it would be a good idea to have something akin to the “prefers-reduced-motion” css query, but like, “prefers-increased-affordance” for people who are less fluent in modern web design language.
Looks like some gamepad icon. Just use an arrow.
@@thedankest1974
css dark neomorphism login form ui design
Usually it would be animated to make it clear, the white ball would go from bottom to top
"emphasize on benefits not features..." thats something I never thought and it has changed the way I put things now. Great video!
*cries in html*
Can you explain this a bit? Not native English speaker and a bit dumb. An example would be great if you can give it
I liked the idea of moving most important sections of the app outside of the Hamburger, I often find myself going through it on mobile just to get what I'm looking for... this feels a better way
As a user, I don't care how beautiful or good looking the page might be, but how fast and easy I find the stuff I need
Thanks for the video!
I dont like it - because to many controls and content at start makes a messy and hard to understand interface for unexperienced users. Just my 2 cents
Yes😅
I would keep the blue bar, it makes all sense in the world to have CTA at the reach of your thumb with using two hands or a sort of reachability gesture. In fact, an 'experienced user' wouldn't need more like a couple of buttons to move around. That's where the blue bar makes perfect sense if someone doesn't want or know to dig around. That being said, that bar does not apply to all sites, and maybe I missed something but "View all my work" and "portfolio" seemed redundant. Also, I wouldn't place the carousel there. That, the hamburger menu, the blue bar, the 'view my work' and the gallery make the design too busy in my opinion, too busy for a smartphone anyway
It's 'too many' controls that lead to the same place though. I would agree with you if this site had 10 places to go to, but it's not the case. If your user comes with the intention to look at the portfolio, wherever they look/click, they'll be there.
The original is not a portfolio, it's just a useless landing page that will either piss people off when they're in a hurry, and at best delay them. Users are demanding.
Give what people want ASAP, and make it easy. That's what this video was about.
If the UI feels too busy, it can def be timmed down and made to be fit into the original minimalist aesthetic for sure. But again, reiterating Gary's point, give em what they want first.
I will respectfully disagree with you this time. The original design is clean and intuitive, and most people are used to "scrolling down" to see the next contents. I showed it to 10 coworkers (from different professions, not designers), and 9 preferred the original version, claiming that the last version was very "visually polluted". Really, this menu at the bottom (which reminded me of some apps from 7 years ago) "fights" with the image and the hamburger menu. We don't know where to look first and we get lost in what to do. I'm sorry if I sounded rude or something, it wasn't my intention.
Nice insights and they give a good indication that more user testing would be needed to see what's the better solution. I say this, because those statements are probably based on only showing the images from this tutorial. To get good and more valid insights you would normally need to have a prototype and give the test users a scenario based task. Would like to know what kind of findings would result from that. I do think that the explanation from this tutorial is logical, but of course only useful if implemented correctly and tested with users.
I definitely agree with you regarding the final design, by putting so many individual elements above the fold it takes a long time to digest everything and as for me, my eyes end up darting all across the page and I don't really see anything; everyone who uses social media is used to scrolling. I do think the principles are spot on though if you let people know what they can find before scrolling, put some single interaction navigation on the page, get some key buttons close to the users hands and have messaging that addresses what the consumer will gain, you will end up with better UX. Just don't remove all negative space and hierarchy in the process, there is always more room below the fold
Thanks for the comment. There very well may be a happy medium found somewhere in the middle. But ultimately, the only way is to test with a target audience -- something that I want to start featuring in future videos.
@@DesignCourse Thanks for all the work you put into this content! It is top notch and I'll definitely be approaching mobile UX differently after this
For the most part, the first design lacks discover-ability by forcing the user to scroll. So while the design is cleaner, it may not be better UX. The hamburger menu does similar by hiding areas of the site that you might want the user to easily find, so adding the portfolio link next to it is spot on. What I typically do in this situation is to place the logo top/center with a "standard" horizontal nav below it. In this case I would put the portfolio/skills/hire me links in order left-right and the final link would say "more..". This "more.." is a type of CTA that is a continuation of the navigation system that leads to the slide-out menu.
There's no good way to design a proper web site for viewing on a phone. I absolutely hate doing it, everything's a compromise. I can't stand that so many people don't view web sites on computers anymore.
Yesss finally someone said it. I really dont get how people can design a website "mobile first", i always start off with the design for the biggest screens and then adapt the design for smaller ones.
However when looking at the statistics it becomes very clear why you should focus more on mobile surfers
Quit your job
@@dennishofke, "mobile first" generally doesn't mean designing for mobile first, and then adapting that mobile design for larger viewports. Instead, it refers to writing your CSS so that it defaults to a mobile design.
In fact, it's generally quite good practice to design for larger viewports first, and then think about how best to adapt the flow of the content to smaller viewports (but still write your CSS vice-versa as described above). Andy Clarke presented a really nice exploration of this at London Web Standards 2019:
ua-cam.com/video/B33PAYoUEUg/v-deo.html
@@dennishofke What i do is "everything first" i just make two completely different interfaces for mobile and desktop, if you make desktop first, the mobile one is going to be a hell to do, and full of compromises, and if you do mobile first, the desktop one becomes very empty and basic, i think is better to offer each one a different experience catered to the needs without compromises from the other
Mobiles are cheaper and are mobile can be carried anywhere
If you don't do it, you will be left behind because mobile is the way to go now
Jokes on you, my front end dev skills is the stuff that stinks.
Haha noobs these days..
Better u should see my design before speaking
Designs? What designs? I don't know how to use .
Luckily there are so many frontend frameworks and free design assets for devs
For those like me wondering about the bottom bar of Safari interfering with this design:
html, body {
height:100%;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}
Using this will ensure that the Safari bottom bar will always stay visible
i'd rather implement functions that prevent my sites from loading on safari browsers all together
There is also one particular problem with the fixed bottom bar: when the keyboard pop-up the bar are fixed to the keyboard...
@@abraiyan7984 Well, you might need it if you use some input field on the page. This fixed bottom bar sticks to the virtual keyboard and might close the input field.
Then there should be some system to save it. We have seen a lot of apps with a bottom tab bar. Right?
@@abraiyan7984 I might be mistaken, but there is not yet. No easy way at least, just some hacks, like using absolute position instead with html 100% size.
Thanks for reply. Have to learn a lot. Are you an app developer?
@@abraiyan7984 Not a problem. I really love the idea of fixed bottom bar menu, but it was not easy to do. I am a web developer, didn't try native yet :)
Warning! Do NOT follow this design if you’re making a web app. ONLY for strict Mobile apps (Swift, etc)
The bottom “nav” needs to stick to the bottom of the screen and it’s too jarring with your safari/chrome nav also at the bottom.
Exactly what I was about to say-
But I actually wanna know how we'd be able to stop that feature for Mobile Web Browsers- :(
@@mogipls
css dark neomorphism login form ui design
@@mogipls responsive web design?
Animation Bro What I meant was whenever you scroll down the web browser, the web browser’s viewport height changes.
So the fixed bottom nav changes position every time you scroll down. This happens on all iOS Web Browsers iirc
what if you make it a PWA?
The problem with bottom menus in webapps is that you will always be competing for space with the browser's navigation controls.
Even worse, there's tons of unpredictable behaviors those navigation controls have. You don't know if it will be static, or appear and disappear depending on user scroll (the worst kind)
Sadly the easiest fix for this is to not append content at the bottom of the viewport.
I like the new design it's more intuitive. Yes, the first one looked cleaner but the second one makes your life easier, and in the end, that's what matters.
I am someone who is not visually creative. I'm glad that I found your channel! Now I can use your knowledge to make my projects more interesting. Keep up the good work dude!
Love this approach... expected what I'm seeing in the comments.
This is a concept I've been thinking through for a few years now as the mobile phone continues to grow in screen size. We've seen this in testing from large companies; one that comes to mind is Google. A few years back they tested a fixed nav to the bottom in the beta version of chrome. I loved this and it ended up going away. Not sure on reasoning.
This would be a great AB test in a website redesign.
I think one thing we have to remember as designers and developers is nothing we do is about us... it's all about the user.
Sure many have gotten used to hamburger menus; that's because they had no choice. But if we really thing through the original hardware that brought the hamburger menu to life; that's ancient history in today's world.
As screens become taller we have to be better about thinking about what the next stage of mobile UI/UX is; it's my belief this is it. With more data and content most users want easy access to whatever they came to your site or application for; that requires 'thumb reach' access.
Samsung took this approach a few years back with One UI and they continue to push for more content within a thumbs reach. Google Maps is currently going through an update that puts more important components in the bottom navigation.
This will continue as a trend and will become the norm as we move forward.
As we can see in the video... the hamburger menu doesn't go away... but it does take a back seat!!!!
Thanks for all you do Gary!!! @DesignCourse
Surely would be a good AB test (despite that the purpose of AB tests are mainly to try ONE change and measure the results)
You can view the "portfolio" and also view his "work" aren't both confusing? I think we should keep only one of them if there is not much difference.
I'm not a designer but making the carousel animation loop would be more satisfying to look at imo
I really love the bottom navbar, will defintely impelement this for the mobile view of my portfolio!
I like the idea of putting mobile navigation elements in the bottom right corner. It's very simply and intuitive, but it never occured to me and I think it would make the user experience a lot smoother. I'm going to implement some form of this in my current project. Thanks for the idea!
Really appreciate content like this. Great insight into the psychology and ergonomics of mobile phone use. I'm actually working on a mobile first project at the moment and this video has given me pause to think about the UX aspects and perhaps accessibility of the website.
Sometimes, as one's head is stuck in code all day you forget to afford some time to UX and UI philosophies.
Great video Gary, looking forward to more in this area :)
A lot of good points and tips, though I would say the final design looks very busy compared to the first one. I personally think a more clean initial screen with the busyness below the fold is a better experience, but you definitely need to prioritize when you have sparse content. 100 clear screens > 1 busy one.
I have never been happy with the "default" hamburger menu on a mobile device and you have inspired me with so many ideas for changing it up a bit, thanx for making this video!!
I like to see alternatives, I would not do it exactly like that, but that not the point of watching design guides/tips.
I feel like the bottom nav is the way to go. It just makes sense on a phone.
Thank you DesignCourse
You could also open up the hamburger menu by swiping from the right. It's not the most obvious thing when you first use the app or website, but It's something I've been seeing a lot more in designs these days. I feel like it shouldn't replace being able to actually click/tap on a hamburger menu, though.
but how does one do that?
Amazing video! I really enjoy your content and appreciate what you are doing. Getting such valuable information absolutely for free is amazing, and I love you for sharing your knowledge with us all!
I will definitely implement these tips into my portfolio as I now realize just how outdated and non user-friendly it is.
Thank you so much, and cheers from Serbia!
This makes miss the 90's. People got whatever they were given and were happy.
I've always said, "never put design before functionality"
The first design definitely goes towards minimalism too much, to the detriment of utility. But everyone wants an eye catching website and cluttering the frontpage with too many elements, like it's a social media app with a million features, is a bad idea. Just like having everything behind a separate menu, having too many elements makes a page harder to use. The key is balance and knowing what users need access to quickly and what are secondary features.
From what I understand. The hamburger menu on mobile devices could benefit from a center side swipe on the/side gutter to the center in order to prompt the menu open. It's the clicking only kind of interactions that aren't good. But still I agree with the fact that it shouldn't hide primary navigation on mobile.
The thing is that most users know that such gesture is not doable on web, only on apps. Today we can make native mobile gesture on web sites but most users are not expecting it, however, time will change that.
What a great video Garry! Packed with useful info, all that under 10 minutes. A person can learn so much from you! Thanks!
Thank you very much for the great tips! It is extremely useful, that you take us through the steps in an incremental fashion while also explaining the pros and cons.
Protip:
Use the hamburger when working for cheap clients, and use the bottom fixed menu for the ones willing to pay more.
That's how you make a difference so that when you hear that age-old question "what's the difference between a $200 website and a $1000 website", you know
It's things like this
I am meh about most of this, but that thumb access idea is intriguing. I've been thinking about that before. In the past, for full screen sites, my approach was to always value the left top corner the most, then as you move away from it, the value goes down. Not for any ergonomic or psychological reason, but because when window sizes are changed, they resize relative to that corner. Designing mobile for the bottom is interesting. I'd like to see you implement that in a full design (I don't mean a full vertical cell phone design, but one that accomodates desktop, tablet, cellphone, in all orientations).
Also, I don't think the 2-hand issue is as big a problem as you seem to. People are perfectly happy using both hands on their phone keyboard.
Best teacher on youtube! Thank you so much for all the enlightenment! 🙃🙂
I just wanted some info and you gave me a masterclass. Thats overdelivering, thanksss
You’re such an inspiration when it comes to content creation! Currently started my own channel as well and trying to one day be as good as you and present in a more professional way 🔥
Your tutorials are always unique, straight to the point and very informative. Your explanation helped me create Bottom Navigation for my blog website on mobile devices. Thank You 😍😘
9:23 Notice how most people put navigation in the "forget about it" zone. Maybe we should put all navigation on the bottom. Thanks for this great video.
Wow, learned a lot from this. Especially the tips on benefits over features.
Man, you are a genius. Please keep on. I've just been inspired to create a killer feature for my site!!!
Even you design had a lot of ux issues! But still somewhat better than the previous one!
Awesome video! Love this! Love the changes! Love the explanation of why! Looking forward to more from you on the UX side of things!
This is gold, much appreciated. You mentioned technical issues of having a bottom nav on iOS, could you please expand on that? Thanks!
I strongly dislike 100vh header sections (I actually have "thinks 100vh hero images are so 2018" on my portfolio), so popping the projects up is great. Give me what I'm there for right there with no effort. My only criticism is that while a footer nav looks great, they just don't work well on phones when you have the phone's own nav getting in the way. I'd instead change up the header hamburger nav a bit to have more of the graphic look of the footer nav.
Personally, I just try to keep the nav as simple as it can be. My portfolio is projects/resume/contact. No need to break it down further. It means I don't actually need to collapse the menu on narrow screens.
The new element arrangement is a good idea, but maybe the execution needs more exploration to totally sell it, things like shapes, color and transtions, all that GUI fun stuff. Still I like the idea of having a button on the screen that DOES TAKE YOU SOMEWHERE (like the cards or the menu at the button), and doesn't just show you more menus, or "scroll to see the actual content".
This is excellent stuff. I learned to think before diving into the designing. Thank you.
I can't focus over the awesome background jam 🤘💕
Wow awesome video! You are one of the best UI/UX designers out there
As the main goal of the page is getting hired, I would replace the portfolio carousel section with a CTA button, leaving the portfolio link to the bottom bar. Adding the carousel makes the page very clogged. Empty spaces have their value, too
Thanks, I really appreciate your videos! I'm learning a lot. At the moment I can't pay for school or paid courses since I don't have a job anymore and this is helping me a lot
It's been some time since I watched this video and I want to discuss the bottom navigation thing again.
There's a way to improve it like Firefox (Nightly at least) did.
We shouldn't forget bottom is still the best position to start scrolling page down on a mobile phone too.
So what this browser does:
When you start scrolling on top - it shows you panel at the bottom.
When you're scrolling it down - it hides it.
Why is it good ?
Cause when you're scrolling page down - more space you have at the bottom of the screen - more you can scroll and more comfortable it is overall.
When you scroll on top - it doesn't really matter , cause you touch the screen on top and then move your finger to the bottom , but not untill the end.
(at least that's how I scroll and believe most people do)
We can apply same rules for bottom navigation -
if we're scrolling down - hide it.
if we're scrolling on top - show it.
+ it should be visible by default to give user idea it even exist when he enters the site.
I find the first version much more elegant but I definitely like the newer titles and your lower action buttons rather than the hamburger. I think the carousel takes the design too far from the original one, but it is a cool idea
I think there are a lot of controls. This way of organizing content makes this screen the same as the mobile app. Especially the tab bar. Also, I don't like to add an eye icon to the blue button. It confuses me. It looks like a field for a password. But I appreciate some ideas like to add a call to action and add some copy for the boring heading.
Anyway, @DesignCourse thank you for your opinion and this lesson.
Your video is always useful and contains a lot of practical knowledge that we can apply in our projects instantly. Thanks a lot for making this useful video.
A scenario to consider is on safari this will require two touches by the user if they have scrolled at all (assuming this is sticky/fixed) as safari blocks it to show browser shortcuts
It just makes so much sense. Loved it! Thanks.
Most useful and S.M.A.R.T. video I have seen in weeks, at just 9:23 minutes, thank you :)
This is the channel that pulls my rope and reminds me to keep improving and never stop learning.
In terms of simplicity, I liked the first one. But yes, for navigational purposes, last version is better. May be depends on our choice?
very sweet conceptual walkthrough. Makes totally sense to put the menu in the lower half of the mobile screen. Gosh, don't know why we put it in the top row in the first place......
This is so freaking helpful, love your channel so much
This was an excellent video. Thanks for sharing this strong UX design.
Its funny you came out with a video talking about this lol I'm working on a startup and thats exactly what I'm doing i'm bringing the menu to the bottom
This thing is made me better for today. Thank you
Superb description, thanks to you for sharing this.
Uno de los mejores videos que eh visto últimamente va directo al punto sin rodeos.
Excelente contenido.
The navigation to the bottom seems nice, but everytime you tap on the bottom of the viewport, iOS will slideUp their browser navigation interface first, because of that you need to actaully tap twice to trigger the buttons. So it's not a great idea in the end, unless their is a solution but I never found one, any comments on that?
This will definitely make me wanna do mobile layouts more without getting bored! Great tips really. Definitely gonna use em
Very helpful. I struggle with mobile design. The building process with code is fun, but the design is not something that comes easily to me so far.
currently, i'm building a portfolio website for myself and this video gimme some great ideas running of my brain. thanks a lot, Gary. Two thumbs up!
Something that works very well for me it's the feature for swiping left to open the menu. I still have the hamburger menu top right corner, but I find this feature for websites useful.
What I like about the original is that the hamburger menu clearly showed what content was on the site. The "improved" version looked confusing to me as there were buttons to take me places as well as the hamburger menu. Additionally I found myself wondering what the difference was between "portfolio" and "my work", or are they the same part of the website? Why not be consistent in the terminology? I agree about the scrolling through. I can see why a scroll indicator was used - I've been to websites that seemed to be broken until I realised that there was more content I had to scroll down to, but that "scroll indicator" looks more like a switch of some sort. Also, I prefer separate pages to scrolling past a whole bunch of content I don't care about.
I would never have recognized that thing as a scroll indicator. But maybe that's just me. Other than that: great video!
Anders Floor agreed. Never seen a scroll indicator like that.
You'll usually see it with some kind of animation that sort of simulate the motion.
My UX nav smells good right now. Thank you!
That was really nice ;) I also prefer bottom nav menu however I like to see in other orientation (mobile-landscape, tablet-portrait and tablet-landscape) maybe another video about this topic? There is soo many nice mobile app UI concept in mobile-portrait but do we really must make users to use only portrait mode?
Gary you could do a series of videos on how to build a personal website would be welcome. thanks for the usual tips.
I’m currently trying to find away around the burger so this video came at a perfect time for me
How did you build that? I am still learning and would love to learn how to build that kind of mobile site...especially that carousel.
Good video, few observations, the portfolio and my work are the same thing, three CTAs for the same thing, does not make sense to me. Agree on the hamburger, leave that to In-N-Out, also agree with the comments below, the bottom navigation is a no no as well. Getting a site right for mobile is a challenge, more videos like this and the discussions that follow are helpful!
Tab bars are a great piece of UI but on smaller older phones, they really take up a huge chunk of real estate along with browser elements. But agree re mobile nav that important elements should sit outside of it ie portfolio, catalogue, donate etc...
Hey there! Your content is unique in it's entirety, very informative and extremely helpful, thanks a million!!
The reformat done is cool!
These are great tips! How would you manage with mobile Safari bottom bar, which would cover bottom navbar?
TheVeritimus this is doable with CSS!
Levi Whalen, can you give a link to an example, please? :)
Thx. I will share your video. Helped me as a designer.
What is the name of this theme? I like how the mobile navigation comes from the side? I'm new to WordPress and am using ASTRA and Elementor, but I don't like the default mobile nav animation and prefer the one presented in this video. I would appreciate any advice!
Awesome!!
Yay looking forward to all the UX/UI stuff! This was quite helpful
I love these Short and Useful Videos ❤
Thanks alot ❤❤
Great video, and great pointers on UX, my only concern is with the bottom menu, from my past experience from using apps with the menus at the bottom, it overlaps the built in menus (back button etc) unless anyone knows a trick around this? Margin bottom in the navabar?
Awesome vid, I do like the final revised layout. Wasn't to crazy about the redundancy of the "portfolio" Cta having it at the top and again in the body. Thanks for anther informative vid...
The best version of this, taking into account design, UI and UX, would be the replacing the original scroll icon with the blue nav bar, but the blue nav bar color needs to match the blue in the laptop screen. You made it too busy which evokes anxiety.
I started to think outside the hamburger menu and ordered a pizza, thank you 👍
Very, very, very useful information and advices! Now I'm thinking))) Thank you very much.
Excellent video. I love the step by step incremental improvements. That really solidifies the understanding of why each improvement is better. Very helpful.
This was my first video ... i loved it :)
The bottom menu is great, but how would it handle on scroll? Is it sticky? The 100vh is annoying with URL bars and browser menus changing the height of the page. Do you know of a good workaround?
To know what you should emphasize regarding to the marketing part. Have a look at Simon Sineks ted talk start with why.
You did a good job , but i expected you to change the place of the navigation drawer .. Material design says : if it's left to right language , the navigation drawer should be at the left side ..
Great stuff man! Please do more of these short videos.
Thanks you! Really appreciate your work