
The Navigation Bar Is an Affordance, Stop Removing It - antimid
http://uxmovement.com/navigation/the-navigation-bar-is-an-affordance-stop-removing-it/
======
ashark
Relatedly, I noticed the other day that I'm developing a flick-down reflex in
response to seeing those stupid "hero" header images/videos appear on page.
It's becoming an unconscious action.

These headers are the Flash Intro Page of our day. Unnecessary hamburger menus
and obscured menu text are our version of Flash Mystery Meat navigation.

I blame Apple and iOS 7 for the latter problem. That popularized ultra-thin
text-only "buttons" on a background image. It's a bad idea when Apple does it,
too, but if you don't follow Apple's aesthetic your stuff looks "dated". A lot
of perfectly fine 2007-2010 vintage sites have been mangled by redesigns
following this trend, just so they don't "look old".

If someone develops a browser extension to somehow recognize and remove these
things without damaging page flow and functionality, I'll install it. Bonus
for forcing those floating site menus that disappear on scroll-down and
reappear on scroll-up (blocking the thing you were scrolling up to see!) to
stay at the top of the page where they belong. I've never once been reading
something and been grateful that the site menu was a one-line-of-text scroll-
up away rather than being in the header and footer.

~~~
panglott
Yea, as soon as I see a big image header I reflexively start scrolling through
the article looking for some actual information.

I blame Google/Android for all those inscrutable hamburger menus, which are
like rooting around in the trash can for essential functionality.

~~~
harlanlewis
> all those inscrutable hamburger menus, which are like rooting around in the
> trash can for essential functionality.

No joke, my favorite part of the general disdain for hamburger menus is all
the ways people describe them.

------
mentos
"Perfection is Achieved Not When There Is Nothing More to Add, But When There
Is Nothing Left to Take Away"

I installed the new iTunes for my friends dad this weekend when I was helping
him with his computer troubles. It took me way too long to find the file menu
and it occurred to me in that moment that UI/UX designers have gone too far.
In the pursuit of simplicity the marble nose has been chipped off the
sculpture.

~~~
wlesieutre
"Let me push Alt just in case a secret UI shows up" is up there with XKCD's
famous "change the screen resolution" troubleshooting strip [1]. It should not
be a thing. But here we are.

And unfortunately, while the "change the screen resolution" is becoming less
common, burying features in undiscoverable places is getting worse and worse.

What I hate the most about this is that (unlike aforementioned off-screen
dialog bugs) designers/developers are doing it _on purpose_. Please stop!
Other people have to use your software!

[1] [http://www.xkcd.com/1479/](http://www.xkcd.com/1479/)

~~~
Stratoscope
In a funny coincidence, just a few minutes ago I got an email indicating that
an off-screen dialog bug I reported on Windows 8 almost three years ago has
been fixed. (Actually I think it was fixed early last year in a Windows
Technical Preview build - two years after I reported it!)

I had my ThinkPad and an external monitor positioned like this, with their
arrangement set in the Display control panel to match:

    
    
      +----------------+
      |                |
      |                |
      |    External    |
      |                | +--------------+
      |                | |              |
      +----------------+ |   ThinkPad   |
                         |              |
                         +--------------+
    

When Windows 8 introduced the new file copy/move/delete dialogs, it also
introduced a bug. With this monitor arrangement, the dialog would be displayed
offscreen:

    
    
      +----------------+
      |                |
      |                | [Dialog]
      |    External    |
      |                | +--------------+
      |                | |              |
      +----------------+ |   ThinkPad   |
                         |              |
                         +--------------+
    

Oops.

Just like in the XKCD, the modal dialog locked up the File Explorer window
that had opened the dialog. After running into this many times I figured out a
workaround using keyboard shortcuts to move the dialog back onscreen.

[http://answers.microsoft.com/en-
us/windows/forum/windows_8-f...](http://answers.microsoft.com/en-
us/windows/forum/windows_8-files/file-copydelete-dialog-is-offscreen-in-a-
staggered/74cd289c-bbca-4740-8d13-93fca47a3ebb)

~~~
TazeTSchnitzel
Knowing about Alt+Spacebar has been invaluable.

~~~
J_Darnley
Can you summarize what that does for those of us who don't know?

~~~
wlesieutre
Pops up a menu in the corner of the active window with Restore, Move, Size,
Minimize, Maximize, Close. If the window is off screen, the menu should pop up
within screen bounds anyway.

Also accessible by right clicking a titlebar, for anybody who's familiar with
that one.

------
jseliger
Funny that this article should appear: I have been complaining about the
Campaign Living website for a while:
[http://www.campaignliving.com/](http://www.campaignliving.com/). The Campaign
Living product concept is very interesting—furniture that's actually
comfortable but that can also be taken apart. But there is no nav bar and few
details about the product on their site. It's very annoying. Their desktop
browser experience feels broken.

All this is terrible because the product looks so interesting.

Contrast the Campaign Living site with another startup's site:
[https://vanhawks.com/](https://vanhawks.com/). This one has a similar big
picture on the front page. But there's also a functional nav bar at the top.
Product details don't get lost in the big pretty pictures. It's easy to figure
out what Vanhawks is selling and what differentiates their product.

~~~
CaptSpify
Interesting. When I go to campaignliving, I just get two buttons "campain" and
"reserve now". The rest is all blank white. I've turned on and off ad-
blocking, JS, etc, and it's all the same.

While your description of the product sounds like something I'd want, I'll
sadly never be able to investigate it.

Having a plaintext fallback isn't that hard people!

~~~
jseliger
Oh yeah—I guess this isn't just me. I tweeted to them about the issue:
[https://twitter.com/seligerj/status/687682195964735488](https://twitter.com/seligerj/status/687682195964735488).

------
TeMPOraL
It's funny how UX collectively misses arguably the most important principle -
you design for a _particular purpose_. If the purpose of a site is to sell
users some shit, no surprise the site will be dumbed down. Most of the sites
are written this way. The sad thing is, patterns developed for those are then
applied to things that should be _tools_. E.g. Google apps redesigns, which
lose features and get more annoying to use every iteration.

------
pnathan
While this site is unusual for what it represents, I have always found it
lucid to the _highest_ degree:
[http://www.berkshirehathaway.com/](http://www.berkshirehathaway.com/)

~~~
TazeTSchnitzel
The only thing I can really complain about with BerkshireHathaway.com is that
the unvisited link colour is purple, which is usually used for visited links.

------
mschuster91
Meh, I'd see the trend to grey-on-grey, white-on-lightgrey etc. as the bigger
problem. Yes, might look Apple-ish, trendy or whatever, but the vast majority
of computer users:

a) don't have perfect eyesight

b) work in rooms with inadequate lighthing (e.g. sunlight from behind, making
subtle contrasts basically vanish)

c) surf on mobile which most often is equivalent to b), with the addition that
the device is shaking relative to the eyes, making the text even harder to
read.

~~~
Macha
The Ember docs recently changed to brown on light orange.
[https://guides.emberjs.com/v2.2.0/](https://guides.emberjs.com/v2.2.0/)

I get that it's their brand colours, but really? Look how much more readable
the older docs are:
[https://guides.emberjs.com/v2.1.0/](https://guides.emberjs.com/v2.1.0/)

~~~
mschuster91
I'm just looking at the docs to determine if a project is worth my time
investment (especially the learning curve).

No docs? => get off.

Docs unreadable => get off.

Docs outdated/StackOverflow filled with crap that is obsolete since 2 months
and the question was asked 1 month ago => get off, work on your backwards
compatibility, come back maybe.

Docs readable and reasonably current and the first 10 google hits for a common
question don't offer 10 contradicting versions? => <3

------
legitster
From a front end development, there is actually a simple reason they are going
away: Users looking for something will eventually find it anyway. But for
people hitting the website for the first time, it is easier to guide them
right to the call to action. It's easy for UX people to complain about finding
things, but for a lot of sites it is pretty effective at reducing bounce rate.

------
vonklaus
To be fair, right where airbnb is cutoff is a massive searchbox for your
travel destination. The NYT/news in general, they have navigation but they
typically put breaking headlines/articles on the front page with links to
othet sections. I assume squares nav goes fixed on scroll.

I know that friction is bad, however, I refuse to assume that my users have an
IQ of less than a carrot. I am not exactly asking them to sprint laps by
either clicking an icon, or looking in the place they expect a navbar and
figure out they can still use the links if I didnt make the rectangle box they
sit in white

~~~
jerf
"I refuse to assume that my users have an IQ of less than a carrot."

Think of it less as an IQ issue and more of a "cognitive energy" issue. Even a
smart person would prefer something easier rather than harder because they've
got things to do with their limited cognitive energy budget other than merely
_navigate_ your website. Plus energy burned that way is energy they're not
burning on your actual content, whatever it may be.

It's like accessibility in general; you make your site work well for impaired
vision, you've almost certainly improved it for everybody.

~~~
tragic
Also relevant: [http://seriouspony.com/blog/2013/7/24/your-app-makes-me-
fat](http://seriouspony.com/blog/2013/7/24/your-app-makes-me-fat)

~~~
mbcrower
If you found this article interesting, then check out _Thinking Fast & Slow_
by Danial Kahneman.

~~~
jerf
Yup, partially comes from there and partially from a lot of the other research
on willpower that has been coming out lately. While some of it has proved to
be a bit overstated (at least in the press) and there probably isn't literally
a such thing as "cognitive energy", I find it a helpful metaphor. Once you
realize that you and others have a finite amount of it, you can start thinking
clearly about how you spend it and why. The concept in your head doesn't have
to be a 100% accurate reflection of reality to produce useful changes.

------
Domenic_S
Although it's my same intuitive feeling, _Your background image is not more
important than your navigation bar_ is a pretty strong assertion without
citing studies or presenting some trends in user stories.

~~~
jalfresi
Really? You really need studies and trends to decide if the bleedin' obvious
is necessary? If your users can't use it, it doesn't matter how pretty it is.

~~~
SlimPickins
Absolutely. How many users feel this way? How many users find this scenario
unusable? How many reported feeling "helpless".

The author is making a very broad statement, without supporting data it's
nothing more than opinion.

Which it is.

Because there is no data to support the claim.

~~~
Domenic_S
Right. It also depends on the goal for the site. Is the goal to have the user
click a signup button? Then maybe a nav bar isn't really important, because
you don't _want_ them poking around.

------
vortico
Whenever I see a fixed navigation bar (e.g.
[http://fermatslibrary.com/s/a-new-proof-of-euclids-
theorem](http://fermatslibrary.com/s/a-new-proof-of-euclids-theorem), not like
Hacker News' navigation bar), I feel like the page is constricted, and I just
want it to go away. Not just visually but "physically," so it still bothers me
that bars auto-hide on scroll-down and reappear on scroll-up. In fact, that
feels even worse to me.

------
Shenglong
This is a pretty crass statement to make. If the focus is full-on
navigability, I agree that contrast in the navigation bar is paramount. Yet,
for many sites with simplified features, the emotional experience trumps the
direct navigability of the site itself.

This is especially true for sites like Airbnb (as in the example) where in
addition to emotional response, there is an immediate focus on activating
users. The focus shifts from full navigability (logging in, become a host,
etc) to searching for a listing.

~~~
jalfresi
"...the emotional experience trumps the direct navigability of the site
itself"

The above statement is everything that is wrong with modern visual styling of
software. After everything is said and done, software is a tool which people
use to accomplish a goal. I would argue that anything that causes friction
with that is Bad Design.

As much as some visual/interaction designers may think that "experience is
everything", they ignore that they are insisting on manufacturing and
enforcing their opinion of what the users experience should be and forget that
the user accomplishing their goal is the only experience that matters.

~~~
roldie
There was a great talk at SXSW last year entitled "The Myth of Reducing
Friction in your Product."

Basically, within a given flow (say onboarding or signup), you want to
consider having some points of friction interspersed with low friction points.
Adding friction in the right places helps to create users who will a)come back
and b)will be more active users. The speaker presented some data to back up
her assertions.

Getting back to OP's point, the emotional experience is a point of friction
that may be worthwhile. Though it may slow down the conversion process or
whatever flow the user is supposed to go through, it may result in users who
become more attached to the product and ultimately spend more.

[http://schedule.sxsw.com/2015/2015/events/event_IAP35677](http://schedule.sxsw.com/2015/2015/events/event_IAP35677)

~~~
wtetzner
The thing is, if the site doesn't make it easy for me to accomplish what I
want, then my emotional response is frustration. It doesn't matter how nice or
pretty your site is if I get frustrated before I have the chance to appreciate
the design.

I think trying to evoke a certain emotional response can really only be
effective if it's not getting in the way.

------
eridal
already it's been quite some times that I load a web page, and it appears to
be completely blank as the background image was not loaded; Ok, the page may
be needing js, so I will enable and reload the page, only to find that the
page is still blank .. and then I realize that the content was just there,
below all that empty space.

that's why I love "Reader View"

------
cptaffe
I think this is total BS. All the example pages seemed plenty navigable to me.

I personally don't like the ugly monochrome bar across the top. (Although I do
like it when one appears as I scroll down the page, fading in)

------
mathgeek
I'd love to see some actual before-and-after analytics from a site that
switched to/away from having a navigation bar.

------
WWKong
Affordance has been going out I f style for a while now. Especially with all
the hype around flat design. That text, is that a button as well? Or does it
change information when touched? How would I know if no one told me? By
accident? Okay. Got it.

My prediction is that Affordance will come back in a big way pretty soon.

~~~
warfangle
Apple's flat design removes affordances; Google's flat design preserves (and
in some cases improves) them.

