 She should be doing my intro at the moment because I wrote the intros for tonight. I'll do my own I've got completely the wrong qualifications for being here tonight because I've got a business degree Which means I'm qualified to open this up and probably use Excel or something like that, but that's about it The only reason I'm here is because I've been doing this for an awfully long time I didn't actually mention where paging was working. She's working for publicists Which she kind of mentioned but not really makes much difference. Does anyone really care? I'm working for insurance broker I've worked in insurance for an awfully long time. It's just another industry in the end I don't really care about it, but no wherever you happen to work. You can make things a bit more interesting by being a better web developer I should actually get my play screen going yes, what I'm talking about tonight is navigation and Particularly about priority plus which is something that's been around recently and something I've done to it Which is not really that exciting, but I've thought I'd show people anyway If I don't mention this Then someone else will so I'm just basically you know putting it on ice. I'm not him. I Got this today. I'm not Batman Bellamy from news even though. He's much better musician than I am. So sorry. I think I'm that guy All right, I'm really bad at doing live code demos. So I've got these really obvious hints for myself So bear with me as I completely mess this up And I can't do it. Ah Hey No, I can't actually see So this is a basic Navigation you've got an unordered list several list items Take away the basic QL properties from it Display inline blocks. So you sit next to each other Give them a hover style and a focus state and you're done. That's a basic navigation. So that's pretty easy See why I'm bad at doing code demos So with that everything's great the web is conquered we can go home Unfortunately, someone came up with these little things Yeah, and they said no no your menu doesn't fit anymore. So we had to do responsive things So this is basically the same kind of thing and what I'm going to demo is a Really simple Hamburger menu That's what that person thinks about hamburger menus So once we get to a certain break point and this is a completely arbitrary break point our menu collapses down into a little hamburger icon and then when we click that there's your menu and Internet's conquered again This is really awkward Yay, we're good good again The problem is Doesn't really work that well in certain like in execution. It's not that great. So awkward code demo again I'm actually using my own company site for a name and shame which It's pretty good So this is who I work for We don't actually have any physical products. So when it comes to design stuff We always have these weirdly abstract things that mean nothing to anyone So you get that this is the iPad size break point and we're in so hamburger menu already, which is just crazy And then the navigation is just nuts from there because the people here did Yeah, it's insane My company is global insurer. We cover pretty much anything you can think of and trying to present that into a site It's really hard And I could get really granty and annoyed about it, but I won't so It's not easy. It's not like if you're selling a product It's pretty simple to show what's going on and a lot of examples You'll see out there will show you how to sell products because they're easy. The abstract stuff is really hard But think about the hamburger menu and Hamburger menus have been adopted because they've been adopted. There's no good reason for them They've been tested out as well as to see how good a hamburger actually is and What people have found is that hamburger menus are actually not very good at destroying what a menu is So from this test and there are lots of others out there The best thing you can actually do is have the word menu in whatever language you can possibly think of and there are Translation references out there. So you don't have to try to think what it is in Uzbekistani or whatever language Put a box around it So it actually looks like a button or something that you might interact with and You'll notice that people will actually use your menu more. So hamburger menus are very bad This is my UX hat going on at the moment So avoid them all you needed. There was a word yet change of hat and I'm good I crossed too many disciplines in my job. So I've covered different things Yeah, put menu put a box around it and you're good The best thing is actually if you have the most important items right there visible and then like we're getting to that Getting to that You can talk now come back to have a drink There's a great website called the Norman group. They have all kinds of amazing research on you Nielsen group No, it's a Norman. There's something like that Did you actually search this fantastic studies being done on why this is good and this is bad and It's like great read for before you would sleep every night but If you I mean if you turn up at your work tomorrow and you say we have to kill a hamburger menu People will fight you because it's there and because other people have done it You need evidence to back you up. This is why you need to look up these guys and use someone else's data. It's out there It's available. You can use it and get them make it really blunt and say do you want to throw away 13% of your users? Yes or no in an email and if they say yes, then let them wear it But when you actually word things properly like that, no one ever accepts it and you usually get your way arguments and facts Yeah Exactly and that's Theoretically, that's the whole field of UX. It's what it's meant to be whether it works that way not necessarily The key thing is obvious this is what Luke Rubleski says I've got Polish friends who told me how to say his name properly then I met People who know him and he doesn't say his name properly. So I just give up and say anything He's more commonly known as Luke W. But he's done some awesome research and things on navigation and all sorts of informed design over the years Obvious always wins. It's a really important principle where you have to remember that if you're showing it then You know people interact with it if you don't show it then they're not going to interact with it So it goes back to why you need to actually have a menu called menu Right on to my next awkward code demo, and this is what Thomas was talking about This is the priority plus navigation, so this is on Chris Coy's site This is CSS tricks, which I recommend everyone should bookmark and you know add to your RSS feed if people still do that I have my RSS feed The best thing about Chris Coy is on his site. He actually updates things so when he published this Since August this year It's actually been updated since as new techniques have come out and people have revised things So even though it's not really that organized. It's a really good reference if it comes up in your Google results Pretty much trust what Chris says And I'm not just saying that because my name is also Chris The basic idea and the reason it's called priority plus is the most important menu items go on the left or right If you're on a right-to-left language And then when the screen shrinks you hide the ones that you can't see anymore and I've got a Code demo for this So you'll see home is the most important about Clients contact us you need to think about your navigation in these terms of what people do If you've been a good UX practitioner over the years, you know this anyway, but this kind of reinforces that There are some exceptions to that rule but the most important things go there So when I start shrinking and this is actually breaking a bit You'll see that that one's gone off the screen and the menu's reshaped itself So what happens is those ones on the edge actually go down here? And you'll notice that instead of just that last one going to the next he actually takes two Because it's always silly when you get to the you know Here's the next thing is any one there to make it worth it. You basically take away a couple at a time As I keep shrinking this you'll see That the next item broken it. Oh there we go They'll keep getting added on there and This this is the essence of priority plus you can see this live the Guardian have been doing this for a while They're probably one of the first To really bring the technique out someone else named it You can read about it in detail on Chris's site But that that's the principle here So instead of having an arbitrary breakpoint that you bring in your navigation change and your menu button and not a hamburger Because we now know that's bad You can adapt. I mean this is the essence of responsive design. It changes to whatever you need it to be So this is really awesome Now I can't leave things alone. Oh, why is this rendering like that? There we go So this is a site I've been working on and you'll see I've actually not done that properly yet Sorry, we start out. This is basically the same and we go for a more button I've actually I Don't remind me to fix that tomorrow We've actually got a client test of this tomorrow as well So this starts shrinking in which is great. We're down to a couple and you can see Yeah, I mean what I'm doing here is I'm only showing like a pretty basic menu structure If I flip to the Guardian Go What they do is They show a massive menu So when sometimes you have massive menus like my company's global site will have something like this when I get my filthy hands onto it So all that happens is instead of because all I'm doing is using a script basically to shoves the menu over like to clone it onto this overflow and That the code behind it is really simple and I've taken Chris's and just made a few changes here and there But there's nothing really that much to it if you have a massive menu Then instead of having to you know reorder the menu items that you've got makes it a lot simpler Where you're more just basically shows everything and that's the Guardian's way of doing it as we keep shrinking this is at a certain break point that the fonts and the sizes get a bit smaller and You'll see that the menus actually expand out. So this is the real beauty of this approach And if this was a shorter menu item, you might fit another one on here if the logo is a bit smaller, you might fit more It works really well then when we shrink too much We get down to menu and that just shows us Everything that we want on mobile. So that's that which is great, but I'm not done yet These were the reason I actually came up with this in the first place as I was given a design challenge We got designers to help us out and They gave us a design where the logo takes up a certain point portion of the screen on the same line as the main menu and When you work in a company like mine, everyone wants to add more menu items So when you're taking out valuable real estate to show the logo on the same line as the main menu You have to make some sacrifices and this seems to be the best of both worlds so here's a really hacky code demo of a Secondary navigation you can see I've actually done it so badly. You've got menu highlights in there So the question was what do you do when you've got secondary nav? So this is something that's within the context of a page. It might be Like a progress bar or something along those lines, you know the number of steps that you're showing So my solution to this. I've not really seen anything else like it I'm sure they're probably out there. Just I didn't find it and I get to a certain point I start getting scroll bars and then I can just one at a time Make my own way through it So we never actually hide the menu And it shrinks a bit further down As the screen gets there It's basically the menu is always functional up until that point When I get a bit more interesting with this my plan is to make sure that the currently highlighted one is Visible by default because at the moment it just goes to the left. You can see my terrible lack of overflow here. What I've done here is I've gone old-school and So I'm new to Flexbox Since I haven't had the browser support to actually implement it And this is just some absolute positioning and things like that Once I change this and rewrite it to use Flexbox. I won't have any problems Moral of the story is use Flexbox for absolutely everything But that's it. So that's my priority plus plus plus plus something any questions Thomas It's actually not good UX design because it doesn't tell the user what it does Like it doesn't speak to the user actually what's the best Specifically if you're trying to do mobile is actually showing a menu bar on the bottom or top depending on Android Ios the same way the native apps do it and Have a more button or the three dots over next to it where like people are also used depending on their operating system What's hidden behind there and they're always visible or just go away while schooling which is a pattern that's like now a thing as well So that that makes much more sense, but the the general hamburger menu is like Specifically if you have mixed content in there like red mark the app even has still the same mistakes They use a hamburger menu and it's like everything is in there from your account setting to your credits to the categories of the navigation Like the product categories it's such a mix like people don't know what to expect That's hidden behind this menu. Yeah, you won't get rainbow unicorns if you use a hamburger menu basically No one has cited a rainbow unicorn near a hamburger menu One of the things again when we're talking about adoption because it's nice to see something here But you have to think about how you're going to implement it at your work and Someone somewhere is going to say well Apple do it that way Google do it that way. Why should we and that's again where you need to do your research which is basically hit Google and grab someone else's data and Show them what's going on because the research has been done You don't need to do your own to prove that hamburger menus don't work Yeah You can also tell your stakeholders the story behind the hamburger menu. That's what I was getting at No, no, no before that Yeah, the icon itself the three bars has been around since the 70s Xerox tried it as doing I can't remember what the function was they couldn't get proper adoption for it So they dropped it someone else picked it up in the 80s and tried again There was a third attempt in the 90s that gave up Then we had a level for a while until mobile kicked in and it's like oh, what do we do for menus? I know there's this menu that no one's ever been managed icon No one's ever made sense of before we'll use that so we've basically got the least loved icon out there and Use that as our main navigation, which is a terrible thing to do. I should actually put that up again Any other questions comments? No, thank you