Skip to main content
Fixed Menu Banner

To Sticky or Not to Sticky

Fixed headers are used across the web, with little to know thought to the users experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster, or do they just get in the way?

 

Very simply, are fixed headers (think menu, logo ect) good for user experience. Do they work?

 

Excited? I know right.

 

I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉

 

A sticky menu is quicker to navigate

https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/

Pro

Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.

Con

However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?

 

Top 5 Common US Mistakes

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

Pros

There are benefits, but only when considered correctly.

Cons

If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.

 

The Pros and Cos of Fixed Header Bars

http://creative.artisantalent.com/the-pros-and-cons-of-fixed-header-bars/

Pros

They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.

Con

If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.

 

Summary

Users seem to prefer fixed headers, but only if they are implemented correctly.

The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.

When being used on very small devices, headers need to be hidden to provide a larger content space.

The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.

Bit Little City Image

Creative / Development Inspiration 40

Just as much for the web designer as the developer this week. Some brilliant UX inspiration and how to get users hooked on your interface. On top of that two new beautiful web frameworks to bootstrap your newest project, and a life changing chart library. This and more in this weeks web design and development inspiration rundown.

 

Website Inspiration

 

Big Little City

This is not your standard website. I usually post more commercial / business based websites, but this really caught my eye. It takes a section of the world (using real world maps) and creates a 3D rendered globe, with roads and all!

https://pissang.github.io/little-big-city/

 

Designer Resources, Examples and Inspiration

 

How to get users hooked on your interface

Micro interactions happen through the functional, interactive details of a product, and details…aren’t just the details; they are the design.

http://www.webdesignernews.com/redirect/id/2187168

 

The myth of human-centred design

The conventional interpretation of human-centered design wildly oversimplifies the relationship between people and technology. It’s time for a more nuanced approach, writes argodesign’s Mark Rolston.

https://www.fastcompany.com/90208681/the-myth-of-human-centered-design

 

Colour scale generator

Simple, easy to use colour gradient scale generator. Love it.

https://hihayk.github.io/scale/

 

UX Design Interactions

A libary of design interactions to gleem inspiration from. New apps added weekly. Get this on your bookmark list!

https://www.uisources.com/interactions

 

 

Development Snippets, Samples, and Articles

 

BuddyCSS

A easy to use framework to quickly build fast, attractive websites!

https://buddycss.com/

 

Slide out box menu – Code snippet

A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.

https://tympanus.net/codrops/2018/08/01/slide-box-menu

 

Apex Charts

I love a good chart. I have featured other great ones on the first blog of the series, and the 20th. This one is the cream of the crop. This is not a one size fits all solution, but rather charts for the modern web. Easier zooming and panning, event triggering, truly responsive, and speedy!

https://github.com/apexcharts/apexcharts.js

 

Argon Design System

A yet another beautiful framework to jump start your project. over 100 individual components, built with SASS and Bootstrap 4.

https://demos.creative-tim.com/argon-design-system/

 

A bit of everything

 

Not every article needs a picture

If a picture is worth a thousand words, it’s hard for me to imagine there’ll be much value in the text of an article illustrated by a generic stock image.

https://pxlnv.com/linklog/not-every-article-needs-a-picture/

 

The Bullshit Web

A great article on how the internet has turned into a place of uselessness, and how that can easily be changed. Loading numerous tracking scripts, images and adverts, that may or may not be of use.

https://pxlnv.com/blog/bullshit-web/

 

Purple is 2018 colour

Creative and Development Inspiration 9

Because next week is Christmas (and I won’t be creating a list, family and all that) I have pulled together a longer selection than usual. This week there have been some really great pieces of code coming to the surface, as well as some great graphic design inspiration.

 

DesignClever

I’ll kick off with DesignClever. This is a brilliant design inspiration website that collates beautiful design from all all corners. It was created to showcase work from designers all over the world. Definitely one to keep an eye on!

http://www.designclever.co.uk/

 

Pantone Picks 2018 Colour

The blue-based purple has been selected for its “provocative” and “thoughtful” shade, which nods to current trends in areas like spirituality and space exploration. This article explains their reasoning.

https://www.designweek.co.uk/issues/4-10-december-2017/pantone-announces-ultra-violet-purple-colour-year-2018/

 

How Efficiency Makes you a Better Designer

This is something a bang on about all the time, so it’s nice when someone else writes an article about it and breaks it down. Being efficient can not only make a job more profitable, it makes the process seem easier. This issue is working out where to start, and what the right areas are.

https://speckyboy.com/efficiency-better-designer/

 

Tracy – From Paper to Vector

This little tool could be a life changer. Rather than scanning in your drawing, and running the JPG through Illustrator (if you have it), the image can be passed to this website and it spits out an SVG. Give it a whirl.

http://www.usetracy.com/

 

Popmotion

Described as a functional JavaScript motion libary, Popmotion is a 11.5kb tool for animators and interaction developers. The animations are smooth, and the code required to use it is simple and understandable. It is also modular, allowing you to pick and choose certain parts, depending on what you require.

Take a look at the examples.

https://popmotion.io/

 

On-Change

This is a small library that gives you the ability to watch variables and objects to check for any changes. It works recursively, so will detect changes even if you modify a deep property. A neat piece of code!

https://github.com/sindresorhus/on-change

 

Specificity Visualiser

This tool gives you a quick overview of selectors and their specificities across a CSS file in bird’s-eye view. It’s a visual way to identify potentially problematic patterns and especially useful for analysing very big and complex style sheets.

https://isellsoap.github.io/specificity-visualizer/

 

30 Seconds of Code

This has appeared on a fair few blogs over the last couple of days. Understandably so. It is a list of code snippets that take less than 30 seconds to understand, and will probably save you a lot more than 30 seconds of your life. Some brilliant problem solvers here!

Definitely worth a bookmark.

https://github.com/Chalarangelo/30-seconds-of-code

 

That’s all for this week. Have a great Christmas/break and leave any comments below.

Google Material Mobile Menus

Creative and Development Inspiration 4: Hidden Menus

Today’s post is focusing on code snippets for hidden menus. These could be used on both mobile and large devices. Although they are not particularly attractive menus, I am focusing more on the usability and style. The purpose is to help inspire.

 

Simple multilevel menu

This menu is a code snippet from Cody House. It gives two examples, one plain CSS, the other with JQuery animations. Simple, but user friendly.

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

 

Pure CSS Accordion with Simple Microinteractions

This mobile accordion menu moves icons down as the user selects a different section. The animated micro interactions make the whole experience feel more crafted.

https://codepen.io/jcoulterdesign/pen/OMmZPd

 

Breadcrumb Navigation

This subtle menu gives the user more information when they hover. The effect works really well, however I am dubious about how it would work with touch devices. The menu would have to be touch to show, which adds a touch point. Still a nice effect though.

https://codepen.io/andreasstorm/pen/prWEvj

 

Circular Material Design Menu

I personally don’t like how this menu looks. However, the concept is really slick. This style could be altered to look a bit nicer and really work. I am a fan of the animation though!

https://www.bypeople.com/colorful-material-css-circular-menu/

 

Google Material Inspired Circle

Staying on the Google Material style, here is another simple menu that could be great if styled slightly differently.

https://www.bypeople.com/google-inspired-css-floating-action-button/

 

Menu Overlay Focus Change

This is completely different to menus I am used to seeing. Although it needs some tweaking to work on smaller devices, the effect it great. By moving the cameras focus when the menu is open adds a whole new layer to the site.

https://codepen.io/carasin/pen/aBEZEd

 

CSS & JS Toggle Menu

A bit of an experiment with SVG icons what chage colour when selected. It uses a subtle material transition to make it look dynamic. Really nice for use with a more modern B2C site.

https://codepen.io/chrisgannon/pen/EyaPZZ