The other day I was walking through the small mountain suburb where I live, mind wandering as it often does when I am off trekking alone. When I suddenly stepped off of the aged, and weathered sidewalk that rested in front of an old adobe hotel, styled years ago for that kitschy effect set to lure the tourists in with its ambiance, and onto a newly laid pristine sidewalk in front of a brand new corporate chain hotel. And all at once, my mind wasnt wandering anymore. No, now my mind was fixed on presentation.
The Case Study
As web designers, presentation is a major part of what we do, so there are times when we cannot help but see things from that perspective. We look at the world through a different lens than some, it is just a habit of the trade. It was with that eye that I looked up from the sidewalk and took in the site before me. The decades old building and surrounding property showed the same time tattered look as the cracked sidewalk that lay in front of it. Seemingly barely being held together by the faded yellow curb that keeps it from spilling out into the street. The pool was surrounded by a wrought iron fence with highlights of rust, which really accentuated the black tarp cover that spread across the surface of the pool sinking down about a foot to reach the top of the water. Overall, a very unappealing presentation, aged to far shy of perfection.
But then there was the other hotel, the brand new chain, and I was struck by the complete separation from these two side by side structures. All the way down to the curb. The new hotel, as previously mentioned, had gone so far as to have the curb, sidewalk, all the way up through the parking lot completely rebuilt. Drawing the eye up to the large flawless structure that was so much more inviting than its elderly neighbor. Reflecting the same sharp presentation from the curb to the counter, and I began to wonder if there was a lesson that the we as web designers could take away from this brick and mortar presentational model. Given the commitment to detail and the level of scope that they took in constructing this hotel and the property attached to it, and that is when I landed on this post. Because every element matters to the presentation of our web design and need to be considered as critical as they are.
The Brick & Mortar Model
Essentially what we have in this case is a brick and mortar hotel versus a website design. Perhaps versus is the wrong word, because this is in no way a competition, but more a comparison model that we can learn from. Especially when it comes to presentation. Because a hotel that focuses that heavily on their visual draw is working in the same vicinity as we are when we craft a website. The externals of the hotel are all fashioned with one underlying purpose, to appeal to the masses passing by, and win them over with the allure established through this visual presentation.
As web designers, when we are building a website, we have a similar mission in mind, and the elemental build that all adds up to our own visual presentation should all be working together with this singular purpose in mind. Each of these inclusions has to be mindfully tucked into the design, and in no way can be left up to the afterthought mindset that can actually work against your design instead of for it. Be proactive in your web creations to consider all these areas and elements and how they feed that idea, and steer the online masses into the site. The hotel is trying to win you over visually to get you to stay in their rooms, while web designers, we are trying to get you passed the landing page of the site and into our other posts and pages.
So there are a number of parallels that we can draw between these models, and below is an examination of those crossover presentational ideas so that we can perhaps improve the way we approach our own projects. Each area of the hotels visual approach will be dissected in relation to the elements of our website designs that we should never let be relegated to a place of cohesive unimportance.
As I first mentioned, this hotel had gone so far as to redo the sidewalk and curb, replacing the rundown faded yellow concrete structure with a clean unpainted, unspoiled one. Which when you think about it, the sidewalk and curb are a bit like the links leading into your site. Though we do not always have as much control over these links as the hotel obviously did with the curb, we do have some ability to keep them in check. Doing so is important to maintaining the professional presentation that we tend to be aiming for when we construct a site.
We are often given notice of incoming links to our site, and that gives us an opportunity to steer the situation in this respect. Be sure that you keep your linked to content fresh and active, and also keep your site up to date so that the initial impression leading in will effectively set up the proper expectations for the user. If they follow a broken link into your site, there is not much that you can do beyond supplying a helpful 404 page that can guide them along their way and through the site. Otherwise, do your best to honor those incoming links by keeping the content in place and relevant.
Veerles Blog is a good example of a helpful 404 page.
Product Planner is another fine example of a good 404 page.
Next up on our lessons via the hotel model comes from the place where you park your cars, attached the sidewalk and curb that we just left. The parking lot of the building can be looked at a lot like a splash or landing page that proceeds the users entry into some of the sites out there. Much like a less than friendly parking area can be a detractor to potential visitors, having an entry point to your site that is not setup with the user in mind might send them surfing on to their next location. So when employing this element into your project be sure that you keep it simple.
You want the landing to be smooth, so overwhelming the user is not necessarily the way to go. Like with the lot, you want to just lead them into the site, so choose a subtle approach when you can. Point them directly towards their goal. Most parking lots have one way in and one way out, keep your landing page along those same lines. Do not distract the user once they get there, so be sure that your design is strictly set to serve its purpose. If you use some sort of Flash presentation that must play out before the user can move on, keep the length in mind. Not just for one play either, because some users may not know to bookmark your index to allow them to skip passed this intro on returning visits.
Atutiplen has a wonderful splash page to look at for an example.
On!Production is another site that has a good splash page to check out.
In this particular example, using the hotel as the model, I have to point out that they had a series of bushes planted around the sidewalk and parking area, all perfectly aligned and trimmed, neatly guiding the eye around the property. Nothing seemed to be out of place, the plants all fit into the pattern and lead the visitors where they need to go. The alignment in all of our web design projects should work in this same way. Helping us to visually lead the user through and to the relevant areas of the website.
Many of us are accustomed to being led through areas visually, and that transfers over to the web as well. So when we are crafting our website designs we need to be aware of the alignment of every piece of the proverbial puzzle. Especially when we are putting together our main pages, we want to keep this mind, but as we move to the deeper pages we can experiment with breaking the alignment. It is easier for novices and first time visitors to navigate back to where they were once they have moved into the site, than it is for them to necessarily find their way initially. So use your alignment to help when and where you can in your visual presentation.
New Adventures Conference has wonderful alignment on their site.
Moonbeam Illustrations is another fantastic site to check out for their alignment.
The Welcome Center
In this comparison model, we now move inside the hotel, the direction that everything has been steering us, and we enter into the virtual visitor welcome center, the lobby. A warm and welcoming environment that is spacious, with great lengths being taken to keep it comfortable and clean. Now the homepage is the comparable location for our web design, when we look at the lobby of the hotel. The homepage is our welcome center, and the same rules apply that we find employed in the hotel lobby for our site.
You want to ensure that you keep the homepage spacious and visually comfortable for the sake of your users. Allowing for any kind of clutter on the homepage can inadvertently work against the design and success of the site. If the content feels squeezed together, without the proper room to breath so to speak, or if the numerous elements feel too crammed in, then it can visually rub some users the wrong way, and they may not go beyond the homepage. From here the visitors should also have no question at all where to proceed. The design should easily guide them around the page without unnecessarily confusing the issue for the sake of flexing our design prowess.
Creative Payne has a very welcoming home page.
Literary Bohemian also stands a shining example in the home page respect.
Signs, Signs, Everywhere Theres Signs
The hotel, like nearly every hotel I have ever been in, is either a really big fan of the song Signs or they just have a vested interest in making navigating the grounds as easy as possible for their guests. Im more thinking its the latter. They do this with the inclusion of as many signs as they can work in to the place to provide guidance throughout. This is important, because if people cannot easily make their way around, then sticking around, not going to really be a high priority. It doesnt really do much for repeat business. We need to understand that the navigation of our websites should be considered in the exact same way. While still maintaining that spacious, uncluttered feel.
It might seem contradictory to the last point covered, but we all know that navigation is generally not a cumbersome element in our designs. Unless that is the approach that was opted for, the navigation tends to be easily managed without being visually obtrusive. Using clearly recognizable links throughout the site to easily allow the user to delve deeper and deeper into your content is not always a must, but it surely has its benefits. The more accessible we make the site for the user, the more apt they are to stick around, and make return visits. So make your website the Tesla way. With plenty of signposts along the rabbit hole to take them to the depths of your virtual Wonderland.
Shawn Johnston has a great site to look at as an example of good navigation.
Red Tiki is another website that handles their navigation well.
Calling the Front Desk
Before we leave the lobby behind completely, there is another example that we can take from this area to learn a basic lesson for our website work, and that is from the front desk. Or rather the attendant covering this station. The front desk attendant is someone on call, so to speak, that visitors know they can contact, giving them a sense of comfort should something go awry, or should they need something more from the hotel. Having a contact form or some sort of contact information on your site can help impart this same sense to your visitors.
Not only does this contact information give your users a lifeline like help desk to your site should they encounter any trouble, but this can also convey that the ideas, feedback, and so-forth from your visitors matters to you. Hopefully it does, and you would want to give them this reach. Well, this is an easy way to do so. While it does tend to open up the proverbial floodgates for you to get spammed, that is not always going to be the end result. It can also often open the door to collaborative efforts or other opportunities to stem from the site by having some point of contact on the site somewhere.
Joyent is a good place to go when you are looking for a great example of how to tackle the contact info.
hm-andrei is another great example of handling the contact aspect of a site.
Code of Uniformity
Now in this final step of the comparison model I have to admit that I did not go so far as to get a room at the hotel for the sake of the follow through, so this last section is based on supposition that is supported from years of travels and staying in other hotels. But throughout most hotels, especially in the rooms, we see a uniformity among the various elements. All fitting neatly into their place to serve the overall presentation. We need to be aware of this very thing as we build our website. Every element should adhere to this code of uniformity in our rooms or deeper pages.
Now this is not to say that every page that goes beyond the homepage have to look alike. Far from it. In fact, there are many sites that have a unique design for each page of the site and it works fantastically. What I am saying here is that every element that we have that uniformly run through each page should still be recognizable as such each time it makes an appearance. Nothing more. Variation can be good, but we still need to keep certain elements from changing too much page to page for the sake of the less than savvy user. For example, if throughout the rest of the site, the only thing underlined at all are links, do not suddenly alter that in deeper pages, suddenly possibly confusing the issue.
Wawa Coffeetopia wonderfully employs this code of uniformity throughout their site.
Amazee Labs also subscribes to the code, and exemplifies how well this idea can be enacted.
This hotel comparison yields a few lessons that we can take away from it. Overall, from curb to counter and beyond they employ a strict, cohesive visual idea that none of the elements stray from in any way. We should strive for this same presentational output for our designs as well. Are there any other areas or ideas that you think we could take away from this brick and mortar model? How important would you say this sort of visual cohesiveness is?