4 MIN READ • EXPERIMENTAL
Screen space gives us just that, space, sometimes too much of it. We tend to fill that space because we can, or because we are nervous a user may not follow the flow we intend, or "we need more [insert whatever here]". But when interacting with a mobile device, screen real-estate is at a premium and designers have utilized gestures, among other techniques, to help solve the space issue and add focus back to the content. Additionally, the minimal UI is aesthetically pleasing while affording more space to focus on user flows and content architecture. As mobile consumption grows, desktop monitor sizes grow as well. There is an opportunity for other deeper interaction through bold approaches, and we should piggyback on the lessons learned from mobile.
When I sat down to create some goals for the vision of my personal portfolio site, removing. No, not removing, hmm, obstructing?, or maybe hiding? the main navigation was not a thought that initially crossed my mind. Perhaps obscuring is the word I'm looking for. Yes, obscuring the navigation allows for an unobscured view of the content on my site. Either way, that statement will surely raise some eyebrows and prompt readers to look for the "about me" link to figure out more on this crazy fella who hides the main navigation. Fun fact, you can't see the about me link. Well at least until you make a move to do so.
And that is what I'm betting on. I'm betting on the definition of the word "interaction". I'm waiting for the moment that a reader becomes a user and actively starts the process of looking for something to interact with.
Some of the goals I did make for designing my site was that I wanted to commit to not being a brochure portfolio full of static images and links. I wanted to write, I wanted to tell a story in the how and why of the things that I create through case studies, and questions, and reflection. I wanted to be on the cutting edge, and if at all possible brave something new while being pleasing to the eye.
EARLY COMPS
I can't stop looking at the tangering colored bar, it's so distracting.
There is a balancing act of beautiful aesthetics, engaging content, and functional layout that every design has to try and figure out. There is a give and take, some things flourish while others wane. And though the design and layout of my content were going great, I felt that the navigation was somehow taking away from my presentation, that its very presence was destroying the cadence of the experience I worked so hard to create. So I removed it.
And then in a panic, I put it back.
And then I removed it again but focused less on the occupation of space and more on replacing what the main navigation would have accomplished if it was there. I worked through interconnecting my small sample size of content with itself, trying to produce "a conversation of more" rather than wholesale page jumps; and it was this thought process that leads me to the conclusion. You only need the navigation when you don't know where to go. So let's only have it appear when we need it, or better, want it.
I can't bring myself to use a hamburger menu. I will not do another hamburger menu.
Removing one's navigation from default visibility will come with a steep affordance since its secret usage is not perceived. We can lower the interaction cost by leveraging a user's traditional mental model of where navigation typically is located on web pages, the top, and or the left.
There is also the large tangerine-colored square box in the upper left corner to draw user's attention, and since it looks like a giant button anyhow, most folks will gravitate to the logo as a safety net to get them "back to home".
Exploratory behavior along with an eye-catching color block and traditional navigation location could be enough to get a user to cross the invisible boundaries of my 200-pixel sidebar, triggering a :hover state, revealing the navigation. But it is not enough, the hit area is too small, we need to close that gap with mouse proximity.
Binding a proximity listener to the left edge of the screen allows us to influence and close the gap by connecting a tangerine-colored background of the sidebar to the distance the mouse is from the left third of the screen. The closer it gets, the more opaque the sidebar becomes before the final hover takes effect.
PROXIMITY REACTING
Oh, check that out, pretty cool. Now back to reading. -In my head what every user hopefully says on my site.
Coupling proximity and change, albeit subtle, in a static environment creates playfulness in the same manner microinteractions do. But instead of waiting for a user to receive feedback after they click an element, we can influence a future exchange over a great distance by providing earlier satisfaction in a less committal way. It is this direct user manipulation that surfaces the purposeful distinction that the navigation is in the act of being obscured, and not in a state of obscurity. And that relationship between the user and how much or little the user obscures the navigation reestablishes the comfort level I removed when I obscured the navigation in the first place. It is the control of the option to do something else, not just the ability to do something else that works so well here.
The connected properties accomplish my goal of unobstructed content by reducing the number of visible controls, a menu icon; and options; the links in said menu. Instead, users' engage with the content through pseudo tunnel vision, because there just isn't anything else to focus on or be distracted by. But the moment a reader disengages the content, the now user can recall the interaction, or easily stumble upon it.
Though mobile screen size produced a necessity for gestures, we shouldn't let a large amount of screen real-estate be a crutch or worse an afterthought. Think about the first time you highlighted text on Medium, it was the coolest thing ever right? That joy of discovery through interacting with the content and not the controls of the content adds dimension and tangibility making a site memorable and will keep users coming back.
TI