 |
This article is the first in our new Digital Artistry series. This series will focus on the key elements of producing professional quality digital art, walking you through in a series of articles and tutorials covering the theory and techniques behind the world's great digital art. We will identify common mistakes in amateur's works, and teach you applicable tips and tricks to take your own work to the next level.
|
|
We tend to think of navigating a website as clicking from page-to-page via some kind of global navigation that’s always visible. When it comes to a single page, we often think scrolling is the one and only way to move from one end to the next.
Sometimes global navigation and scrolling are the best, most appropriate ways to move about, (however, they aren’t the only ways).
The websites in this article let you scroll, but they also provide alternative ways of finding cues and means for getting around. In several cases the designs encourage exploration, which is both more engaging and also teaches you how to navigate at the same time.
The Jess and Russ’s website is a wedding invitation, though it’s also something more. As it says at the top of the page, it is the story of Jess and Russ leading up to this moment. It’s a narrative that begins with a few details before they had met, leads to their meeting and falling in love, and culminates with the invitation (complete with RSVP form).
How do you navigate a story that’s told linearly through time? Sure, there are flashbacks and other narrative devices, but for the most part you tell the story from beginning to end. You move through it in a straight line and so here the navigation is simply scrolling through the page. Nothing more is needed.
I started this post suggesting we could provide more than scrolling. This example shows that, at times, scrolling is the most appropriate way to navigate. Jess and Russ’s website could easily have been broken up into several pages (navigated through the “next” and “previous” links at the bottom and top of each page). That would still keep things moving linearly, though each click would momentarily disrupt the narrative. In this case scrolling was the better choice.
Fortunately the website makes us want to scroll. Along the way we get an engaging story, filled with wonderful artwork and with interesting parallax effects. With this website you won’t get bored scrolling — instead, you’ll be looking forward to the next part of the story and how it will be told.
The story your design is telling may not be as linear as this one, though it’s likely parts of it will be. The lesson from Jess and Russ is that when you’re designing the linear parts of a website and you want people to move through it in a single direction, scrolling is possibly the best option. You also may want to consider a single, longer page as opposed to several shorter ones that are connected by links.
Ballantyne creates luxury knitwear from cashmere. The website itself contains different types of information. There is the standard “About Us” and “Contact” information, as a start. Beyond that there are product images and chunks of text to go along with the images. It’s easy to imagine yourself thumbing through the pages of a catalog when browsing through this website.
As with Jess and Russ, this website is entirely on a single page, and as such, scrolling is once again a predominant way to navigate. It’s not the only way this time, though it’s perhaps the more interesting method.
On the landing section for the domain there are links that read “Established 1921″ and “Contacts”. Clicking the former scrolls the page up to see the “Who We Are” section (the “About Us” info) above. The latter scrolls you through all the images and text to the bottom of the page as well as the contact information.
When arriving at either of these ends of the website you’re also presented with additional ways to navigate. The “Who We Are” part of the page contains an “X” to close it, though this information doesn’t actually open or close — it just scrolls you back to the main landing section for the page, which you can also do yourself.
At the top of the contact section of the page a header drops down containing the company name and the links for “Who We Are” and “Contacts”. Unfortunately, the company name isn’t clickable, which is conventional for navigating back to a home location.
You can equally scroll through these two end sections of the page. As you do, there’s a nice parallax effect. The outer two columns scroll as you’d expect, while the middle column scrolls in the opposite direction. The effect creates additional interest beyond simple scrolling as more information and imagery pass through your view. The two header links along with the company name are also present as soon as you scroll below the root landing spot.
As with Jess and Russ, the Ballantyne website is more enjoyable to scroll than most. Here we’re also given an alternative means of navigation in addition to scrolling. There are a few problems, though:
Another minor complaint is while scrolling, the images don’t always align where you’d like them to — you see a full image in one column, but not the others. This might have been done on purpose to get you to scroll slowly through the website, but I kept wanting things to align better. While it won’t affect your experience of the website, it can be a little jarring.
Even though the above items could be improved, they hardly cause problems when navigating the website. We’re talking about a limited amount of content, and within a moment or two, you’ve figured out where everything is. While clicking to the end locations isn’t the smoothest experience, seeing everything scroll from one end to the other does show you quickly how to navigate the entire website. In fact, it’s this behavior that cues you in if you didn’t immediately realize to scroll.
The lesson here is that even if your page will most likely be scrolled, you can still provide alternate options to navigate and help people understand what’s located on the page.
Unlike the two websites above, Cadillac is a website with a couple of separate pages. Here we’ll look at one section of the website, specifically one page within that section. One of the ways Cadillac is promoting the ATS is as a vehicle that can take you anywhere and exhilarate you as it does.
The designers have set up a section of the website where you can explore four interesting locations around the world that you might not ordinarily get to see. It’s these location pages that we will consider here.
A navigation bar remains fixed at the top of each of these pages making it easy to get back to the main section page, or switch to one of the other three locations. If you hover over the Cadillac logo, the global navigation appears and allows you to get to any part of the website.
We’re here to explore though, and there’s an immediate cue for how to go about it. An animation of a series of arrows pointing down suggest that’s where we look. They direct your eye to another downward pointing shape with the words “watch the video”. Shape and words are a link.
Clicking scrolls a video from below into place. Below the video is another now familiar downward pointing shape with the words “ATS vs The Wind”. Clicking once again scrolls content from below, this time complete with a change of background image and parallax effect.
Each subsequent click scrolls to a new part of the page. You can navigate the entire page by clicking one shape after another until you reach the end, where you can check in (share on FaceBook, Twitter, or Google+) or visit one of the other three locations.
You could, of course, scroll through the entire page instead of clicking at each stop — you’ll experience the parallax effect a little more, but otherwise navigating the page will be the same until you want to move back up the page (as there are no upward pointing shapes to click).
There are two additional ways to navigate, both located along the right edge of the page. At the very edge is a scroll bar, though not the default one that comes with the browser. It works exactly as you would expect and provides an immediate cue that there’s more on the page than on the screen.
Just inside this scrollbar is a long thin column with a series of lighter and darker dots. Clicking on any dot will take you to a specific section within the page. The dots also offer additional clues about the page.
Lighter dots mark the start of a section. Darker dots take you to a location within each section. Each section is further reinforced by a line separator.
Clicking any dot scrolls the page to the given section or sub-section. Hovering brings up a tool tip pointing to the light dot and containing the heading for each section.
As with the websites above, everything here works well — the content is limited, and it won’t take long to work out the organization. You’re also encouraged to explore each location in each section, and cues are provided to help in your exploration.
Each location is a new destination to explore — both literally (as a new page) and figuratively (with the content each contains). It’s part of the fun, and puts you in discovery mode from the start.
Aside: The main Cadillac website has more conventional navigation (a horizontal navigation bar with drop-downs), though it’s very nicely done and worth a look. The drop-downs present quite a bit of useful information.
The lesson here is that you can provide several ways to navigate for different types of visitors. You should provide immediate cues for how to begin navigation and let more advanced users discover other means to navigate as they explore.
Bleep Radio also encourages you to explore their single-page website. Unlike the websites above, there’s less of a directional nature to the scrolling. What you want to do could be located on any part of the page. As with the Cadillac ATS pages, there are visual cues in the form of triangles that suggest they are clickable for navigation.
Any browser open to at least 1200×900 will see most of the main menu, which is inside a large triangle showing the word Discover (again, encouraging exploration). The program link takes you to a section above the page (like Who We Are on Ballantyne). Again, there is an X to get back.
Aside from the Program link, most of the other links are located in the main Discover triangle. And of course, you can scroll up and down the page to find different content.
While the layout is certainly original and interesting, I don’t think the navigation here works as well as with the other websites, for a few reasons:
In all fairness to the website, it’s written in Greek (and I don’t speak Greek) so I could easily be missing some obvious cues.
On a more positive note, the website does have some qualities that are both nice and fun:
One other thing to point out is the triangle along the right edge that remains fixed in place when scrolling. Clicking on it opens the current on-air Bleep, along with some social buttons. I can’t help but think navigating the website would be easier if the Discover menu was similarly fixed in place along the left edge.
The lesson here is that a unique and creative design can encourage exploration, however you should be consistent in your navigational cues. If a shape, color or specific style is a link in one place, it should be a link everywhere it occurs, or it risks confusing your visitors.
The Interactive U.K. Energy Consumption Guide from EVO Energy is what information graphics on the Web should be. As with the Cadillac website, we’re looking at a single page within a larger website. And as with all the pages, the primary way to navigate is to scroll from top to bottom.
However, scrolling isn’t the only way to navigate the content here. You are expected to interact with the page in order to get most of the information it contains.
For example, the first interactive section on the page offers data about the total primary energy consumption from fuel used in the United Kingdom. The main graphic is a tree with circles of various colors representing leaves. Each color is associated with a different type of fuel…
The more colored circles are shown in the graphic, the greater that fuel contributes to the total. Each of the fuel types are listed in another graphic to the right, and hovering over them reveals the actual percentage of the fuel within the total.
To the left is another list allowing you to view the same data over different decades. With a couple of hovers and clicks, you will see that solid fuel accounted for 47% of the total in 1970 and only 15% of the total in 2010.
There’s little in the way of text on the page outside of a few basic bits of information and occasional instructions. It’s hardly needed (though it could enhance the graphics some).
These interactive infographics take advantage of what the Web can do and through interaction the information sinks in a lot more. You aren’t just being presented information — you’re actively selecting the information you want to see, making it more likely that you’ll pay attention and remember it.
The only issue I have with the page is that some panels aren’t interactive. After interacting with so many, I felt cheated when all of a sudden I couldn’t interact with one.
The lesson here is that navigation is more than moving about a website or Web page, it can also be a way to bring content to you in place. Instead of something that takes your visitors from one location on a page or website to another, navigation can be about replacing content in place — it’s a much more engaging way to interact with a website.
The five examples above naturally allow you to scroll up and down their pages — but they don’t stop there, as they provide additional cues and means for you to get around.
Some of the lessons these websites teach us about navigation:
Hopefully this brief look at the websites above will get you to explore further and help you generate ideas for alternate ways to navigate content.
(jvb)
© Steven Bradley for Smashing Magazine, 2012.
Sometimes it’s useful to know if images are enabled in the user’s browser, so that you can adjust your CSS and/or JavaScript to make sure that important content is not hidden and that the page is still usable even if images aren’t loaded.
Steve Faulkner describes one example of such a scenario in Detecting if images are disabled in browsers – using an image to convey information that is also available in text that is positioned off-screen. In a CSS on + images off scenario, sighted users won’t get any information.
It’s often possible to write your markup and CSS in a way that avoids this problem, but it isn’t always practical. Hence knowing whether images will be displayed or not is helpful.
Posted in Accessibility, CSS, JavaScript.
Copyright © Roger Johansson
Back in 2009 I wrote about a way of Line wrapping text in legend elements. It involved using CSS hacks or conditional comments to target Internet Explorer, which was the most problematic browser in this regard.
Well, it still is. All other browsers cooperate and let the text in legend elements line wrap by default. But Internet Explorer refuses, even the brand new IE10. But there is a fix.
Posted in CSS.
Copyright © Roger Johansson
|
|
I have an idea for a new product — can I tell you about it? It will take months to develop, and even though this kind of thing is usually given away for free, I’m going to charge for it. Oh, and the market for it probably won’t be very big… Wait, come back! Where are you going?!
It does sound like a crazy idea, but it’s exactly what a small group of designers and writers have been doing for the past year or so. On a Web littered with SEO-ified headlines (“17 Jaw-Dropping Responsive Design Templates and Funny Cat Pictures�), easy-to-share design gallery slideshows and quick tutorials that help you recreate the latest texture fetish in Photoshop, these people are taking a step back from what we have now come to refer to as the “fast Web.� In the words of Jack Cheng:
“What is the Fast Web? It’s the out of control Web. The oh my god there’s so much stuff and I can’t possibly keep up Web. It’s the spend two dozen times a day checking Web. The in one end out the other Web. The Web designed to appeal to the basest of our intellectual palettes, the salt, sugar and fat of online content Web. It’s the scale hard and fast Web. The create a destination for billions of people Web. The you have two hundred twenty six new updates Web. Keep up or be lost. Click me. Like me. Tweet me. Share me. The Fast Web demands that you do things and do them now. The Fast Web is a cruel wonderland of shiny shiny things.”
(Image: Jack Cheng)
A new wave of publications are avoiding this trap, and they appear almost quaint or old school compared to the fast Web. Or worse, as n+1 magazine points out:
“But all contemporary publications tend toward the condition of blogs, and soon, if not yet already, it will seem pretentious, elitist, and old-fashioned to write anything, anywhere, with patience and care.”
I’m talking about collaborative print and digital publications such as The Manual, Distance, Codex, 8 Faces and Ferocious, and even books such as Frank Chimero’s The Shape of Design. These publications all have two things in common:
This kind of thing is, admittedly, a hard sell. There are two main reasons for this.
First, we’re not trained to spend time doing things with patience and care on the Web. As Robin Sloan points out in his brilliant essay “Fish�:
“On the internet today, reading something twice is an act of love.”
And the reason for this is that we’re being fed junk food, and we love it. Clay Johnson talks about this in his book The Information Diet:
“Driven by a desire for more profits, and for wider audiences, our media companies look to produce information as cheaply as possible. As a result, they provide affirmation and sensationalism over balanced information. […] Just as food companies learned that if they want to sell a lot of cheap calories, they should pack them with salt, fat, and sugar — the stuff that people crave — media companies learned that affirmation sells a lot better than information. Who wants to hear the truth when they can hear that they’re right?”
So, instead of looking for nutrition, we settle for the quick fast-food rush. Short articles fit nicely into lunchtime breaks. They don’t distract us from the Twitter feed long enough for us to lose track of the day’s most important discussions. Most of all, this bite-sized information effectively manages one of our biggest fears: the sunk cost phenomenon, whereby we worry that if we “waste� time on a long piece of writing, we can never get that time back to do something else instead.
Secondly, convincing people to care about why they do something is much harder than getting them to learn how to do it. One is about meaning, the other is about doing. And only one of these things brings cash directly into the bank account. As Frank Chimero points out in The Shape of Design:
“The relationship between form and purpose — How and Why — is symbiotic. But despite this link, Why is usually neglected, because How is more easily framed. It is easier to recognize failures of technique than those of strategy or purpose, and simpler to ask “How do I paint this tree?â€� than to answer “Why does this painting need a tree in it?â€� The How question is about a task, while the Why question regards the objective of the work. If an artist or designer understands the objective, he can move in the right direction, even if there are missteps along the way. But if those objectives are left unaddressed, he may find himself chasing his own tail, even if the craft of the final work is extraordinary.”
The irony in all of this is that taking a break from doing, to look slowly and carefully at why we do things and how they fit into the world around us, will almost certainly make us better at the doing part. All creative pursuits have importance and meaning only through their audience, so understanding that audience and the world it operates in is an essential ingredient in our craft.
At least, that’s what I think. But I could be wrong. So, to find out more, I got in touch with some of the publishers who work on these publications and asked them a series of questions about what they’re doing and why they’re doing it. What follows are excerpts from email discussions with the following publishers:
Why should you care about what these people have to say? The purpose of this article is not to convince you to stop reading articles that help you learn the techniques of your craft. Its purpose is to make the case for a more balanced information diet, with which we all take the time to nourish the parts of our brain that give us much-needed context to understand and effectively use the techniques that we see in galleries and tutorials. So, let’s get to it.
Andy McMillan: “For the past two decades, we’ve done an incredible job as a community of discussing, debating and sharing, all of which has contributed to driving our techniques and technologies forward at a staggering pace. This is the energy that provided us with the Web standards movement, and I would argue we’re on the cusp of another major shift. Web design is beginning to define itself as less of a technical skill, but rather as a mature and distinct design discipline.
“Our extraordinary passion for prototyping, experimenting, documenting and sharing the how has gotten us to where we are today. But we believe that as Web design matures as a discipline, there is an additional requirement for greater discussion around the why of what we do. The manual aims to give a home to deeper explorations of our work through sharing stories behind the why of Web design and who we are as designers.�
The Manual, Image: Andy McMillan)
Nick Disabato: “I started figuring out the ideas behind Distance in April 2011, when I noticed a few problems in design writing. Most long-form stuff was either hyperbolic and incendiary, thin on citation and high on personal opinion, or it involved this hand-wavy, un-actionable “it dependsâ€� kind of conclusion. But it’s possible for writing to take a confident stand without turning into flame bait — by providing justification and offering a way forward. Otherwise, we risk losing something tremendously important about the exchange of meaningful ideas. This is the gap that Distance hopes to help fill.â€�
John Boardley: “I started I Love Typography, We Love Typography and Codex all for the same reason: they are ways to share my obsession with typography. I never imagined that these projects would become so popular. I had no grand plan. And that reminds me: I still don’t. I think these projects are important simply because type matters. And type matters because words matter — whether they are words that inspire (in prose or poetry), words that guide us (wayfinding), beseech, implore, persuade (advertising) — they all matter. Beyond the fundamentals of legibility and readability, the choice of typeface and the typography, the mise en page, imbue those words with a voice beyond words, with a personality that sets the scene. The choice of typefaces is analogous to the music score for a movie — the very same scene made more sober, more exuberant, more frightening, more comical, more beautiful, more inspiring, simply through the accompanying music score.â€�
Codex, Image: John Boardley)
Nick: “It’s been challenging to have no idea what I am doing. Let’s say you have this principle: you believe that online discourse is degrading, and that design writing could do better by being slower, more thoughtful and more focused on research. How do you work in a way that fulfills that principle? You’d probably get others involved, because leading by example often carves a niche vacuum on the Internet. It probably involves writing; actually, it probably involves long writing. In order to keep the scope from getting too insane, you’d probably want to constrain it somehow.
“But that’s only the beginning of an avalanche of questions. How do you execute on it? How do authors react to a hands-on editor? How do you make money? Do you sell digital, print or both? How do you market it? How do you conduct outreach without coming off as a shameless, desperate Willy Loman type? How do you handle fulfillment on the print editions?
“All that for well-researched essays about design and technology. Each one of those questions needs to be addressed, because each one is critical to the final success. Every day is a new challenge, a new step forward — all done with the risk that it may never pay off (figuratively and literally).â€�
Distance, Image: Brent Knepper)
John: “Launching Codex was quite different from launching the blog projects. It necessitated hiring a small team, paying a small team, finding advertisers and sponsors, commissioning articles, finding a printer, a distributor, choosing paper, doing art direction — the list is endless. I guess the biggest challenge is finding the right collaborators — those who share your vision and those who you can work with night and day without wanting to put a hit out on them.â€�
Andy: “Of course, it’s been a lot of hard work, but I think a lot of what we might have considered initially “challenging� was negated by having the first issue funded through Kickstarter. While Kickstarter is a great tool for pre-selling an idea into reality, it’s really much more valuable as a tool for gauging interest and support. While we thought The Manual should exist, and friends agreed, we needed the support of the Web design community at large to know there was demand for a publication like this. Having The Manual successfully funded through Kickstarter let us know that it was something the community wanted, too.
“While there are always a lot of challenges that come with each issue, it’s always worth it in the end. What we have so far are three beautiful books, with some of the strongest editorial ever written about designing for the Web by some of the most exceptionally talented people in our field. We’re incredibly proud of what we’ve produced so far.�
Nick: “The past year of my life has been a ridiculous emotional roller coaster. I haven’t felt “meh� about anything in a very long time. You know the stereotype about startup life being prone to intense mood swings? That applies to Distance, too.
“We funded our beginnings on Kickstarter. Our campaign was funded on a Friday afternoon in the dead of winter, a couple of hours before I was about to leave work and go to a gallery show that many of my friends were exhibiting in. After trudging through snow for a mile, my girlfriend and I walked inside to cheering and hugs in a packed room. I couldn’t have asked for a better way to celebrate.
“Receiving a first draft never gets old. Watching an essay come together is intensely gratifying and humbling. I wouldn’t trade it for the world. I throw down everything every single time one hits my inbox. One time I excused myself from a bar at 2:00 am to read the whole thing outside, without a jacket, in the middle of winter, drunk and shivering.
“And then, of course, taking a shipment of the print edition feels amazing. Carrying 25 boxes full of six months’ hard work by several people is a big catharsis.�
Andy: “One of my all-time favorite memories will always be opening the first box of the first shipment of the first issue and holding it in my hands for the first time. As someone who had, up until that point, only created by pushed pixels and writing code, there was an immense satisfaction of seeing months of work distilled into a single physical artefact. All the writing, editing, production, discussions, emails, to-do lists, Skype calls, arguments, debates, victories and celebrations — every one of them was contained in this thing I was holding in my hand.
“I get emails every day from people who have read The Manual for the first time, telling me it’s changed how they view their work, or motivated them to think differently, or led them to try something different. I’ll never get tired of receiving and replying to those emails. It’s been immensely satisfying to know we’re having that kind of impact with people.�
The Manual, Image: Andy McMillan)
John: “To be frank, purpose is not something I give much thought to. I enjoy making things. If people find value in what I’ve created, then the purpose comes ex post facto. I’ve always believed that if you have the opportunity, you should create what you want. There is no guarantee that what you create will find a large audience, but if it does, then you’ve had your cake and eaten it, so to speak.
“Share your passions passionately; never be condescending; don’t ever present yourself as an expert (let others be the judges of that). Again, when it comes to what I would like people to do once they’ve read I Love Typography or Codex, well, I’d hope that they come out with a richer appreciation of typography; but I have no roadmap for where they should head next. That is best determined by the reader.�
Nick: “I hope people learn from our essays, so that they can be more thoughtful and considerate in their own work. It would also be great if Distance inspired somebody to write a long essay of their own: this model isn’t exactly proprietary, and I happily invite others to participate.
“And if our readers disagree with anything, they should critique the essays. Tell us what you think is wrong about them and what could be done to improve them. We all have blogs — there’s no excuse. And we’d love to hear from you; our essays aren’t complete without your thoughts.â€�
Distance, Image: Brent Knepper)
Andy: “We’re proud to be part of the conversation, to be contributing to and encouraging further discourse about what it is we do and why exactly we do it. We like to think we’re giving a home to more ideas and contributing to the intelligent, critical thinking around our design discipline.
“This is a conversation that’s been stewing and bubbling up for a good while now, and we’re proud to give a home to part of it. What we hope people do once they’ve read The Manual is to continue doing what we’ve always done as designers of the Web: discuss, debate and share and, by doing so, continue to drive us forward.�
As I wrote and edited this article, reading through the responses over and over, it struck me how lucky we are to work in an industry and at a time where there is so much passion for the work we do. It is inspiring to realize that these authors and publishers do what they do without knowing whether their projects will succeed. And then it all came full circle as it dawned on me that it is up to us as a community to help them succeed, not just by supporting their projects, but by allowing their passion and the words they put out into the world to encourage us to do something about the topics we obsess over every day.
So, maybe what I initially thought was an article about design publications is actually an article about all of us instead. The point is not just that we should have a balanced information diet, but that the real power of that balanced diet lies in the energy it gives us to get started on our own projects. Seek out these nutritious words. You won’t regret it.
(il al)
© Rian van der Merwe for Smashing Magazine, 2012.