Frank Schulte-Ladbeck

Do you look at your website, and think: I could add this cool widget on the side, or how can I use that footer? Have you considered how your website appears on a mobile device?  Making the most of the site may mean considering all of the space viewed on the screen.

We have a problem when it comes to web design. On the one hand, you want a new user to move through your site to their goal in the hope that this will benefit you.  This means that we do not want them to think about the architecture. On the other hand, when we create for the lowest common denominator, we produce an environment that does not engage the user. To engage the user helps them to buy into the site, I feel. You may remember from a writing class a statement declaring do not write down to your audience; you will loose them. Of course then they taught you to write in a style which fit with the standard style. Unfortunately, my love of structurally complex sentences was not proper in this style. Not writing down meant word choice rather than structure. Going back to the idea of architecture, we can use the idea of a house as a good metaphor for a website.

    If I ask you to name the elements of a home, you will name a series of rooms; you can do the same for a website. Yet how we arrange rooms has always depended upon our needs and desires. Nordic countries had the hearth at the center of the home to deal with the colder climate, while Middle Eastern lands would have the courtyard for the cooling effect. The Nordic home may have a porch, which is similar to a courtyard, and the Middle Eastern home still needs a hearth for cooking, so the elements are the same, yet they are arranged in a different order. The same holds true for the website. You will have a page describing your business, the purpose of the website, or an introduction to the authors, which all boil down to being an “about” page. You will guide people to other helpful sites or give them other information, so you have a “resource” page. We have blocks of pages or data which relate to basic concepts of all websites.
    To reach these spaces in a home, we have doors; where in a website we use links. We have entryways in our home that require an action on our part, and other entries that we can pass through with no action. The actions can be quite different: sliding, pulling, and pushing. In a website, we have the click, but what we click can be different: an image; a button; or a phrase. I think this is where we dumb down in many designs. “Home | About | Privacy | Tools” could be a common line up for a navigation menu. Creatively we could use other symbols to reach the same point. The word “home” is a symbol representing a concept. It could mean a place where we live, or it could be the main landing page of the website. We will understand the symbol “home” and the picture of a home in the same way. I could replace my navigational list of words with icons. Am I making the user think? Yes, in the sense that they may be prepared to see the word and not an icon; however, the icon makes perfect sense. To make the icon accessible, I can use alt and title tags to help define the symbol. If a user recognizes that an icon with a hammer and screwdriver represents tools, the idea clicks in their head that this is a passage to a tools page. This allows us to then play with ideas for the icon for privacy. Obviously the symbol “privacy” is readily understood, but an icon may not be as easy. We could use a keep out sign, a hand, a private detective, or whatever represents the concept to privacy to you. The buy in that the images are links has been made with the icons representing a home and tools; the title and alt tributes help define the more unusual icons. We have made the user think, but not too hard.
    If we can play with the form of the door, can we change its position? Thinking of the home, we have a series of rooms that can be put together in any form which suits us. Of course, we will want the kitchen and the dining areas close together, and we will group the bedrooms together, but we could make the kitchen and dining area the center of the house with the living room, office, and bedrooms going off from this central area. This can be done on a website; however, to do it well, we need to understand our user. The point of the architecture is to move the user into the most important space first, and the give them the option to explore the site. Do my users need to know about me? If this is important to them, then I would want the “about” page at the top of the page. I could place it above the title or below. If the “about” page is needed, but not important to the visitors of the site, I could place the link in the sidebar or the footer. This is where we have to consider the use of space. We can pile the navigational elements into the header, many sites do, in the hope that we are making it easier for our users or we are hoping that they will click on a page for our own goal. The user is not coming to your site for the navigation though; they want the content. Once they have the content, and they have bought into the site because of the content, then they will look to explore the site. The entryways can be placed wherever makes the most sense according to user behavior; however, you want to guide them to spots you think are important. This means my store link can go in the header, while a list of pages can go in the footer. The footer which may have been an after thought in the design practice may be quite useful.
    Planning out the header, footer, page area, and sidebar to full advantage, but have you forgotten the garden? Load your site in the browser, and do you notice blank areas surrounding the other elements. This may not be the case, but if your website is older, you could have designed it for an older monitor, maybe 800px across. A laptop monitor will render the site on a space of about 1000px. This leaves enough space for a second sidebar, or you can make existing content easier to see. I know that I have users accessing my site from libraries, so I liked the idea of the design being accessible to them; however, this is an instance of dumbing down the site. If the user bought in, they will scroll. I should make use of the space that I am given. To me, not making the best use of space would be the equivalent of thinking of the home in two dimensions rather than three.
    This leads me to the question of mobile. The mobile screen would be awful if we attempted to have all of this data crammed into this smaller space. Yet have we determined that users are accessing the site through mobile? Is the number of mobile users enough to justify change of space usage? There are sites which need to be mobile ready. Times for movies at the local cinema is an example. A store with product listings might, but does a blog site need to be? Mobile is a big deal, and you should have a set up to make your site readable in a mobile format, but you may wish to think about space again. What do we need in the mobile format? This is where the analogy to a home can break down. The difference between laptop and desktop monitors is not so great, but viewing the world through the browser of a mobile device really changes the perspective. With WordPress, there is a wonderful plugin to make the site acceptable to mobile, but you should rethink your use of space to make this realm friendly. If you are maintaining your own site, you need to be aware of all of these factors, and you need to have an answer.
    To create comfort, allow the elements of the site to breathe. Dumbing down the site, so the user does not have to think at all may not be the best solution. Now the user, and make the site interesting to explore.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.