The Site Message
Information architecture goes hand in hand with a solid graphic design. They are like peas in a pod. The information must be grafted carefully onto the graphics used on the site as one cannot exist without the other; it’s the flesh on the bones so to speak. Some questions that need to be answered include who comprises the target audience, how much time needs to be spent planning the content and how the site will be structured.
The foremost plan should be for a site that is well-balanced between plain static consistency and a lavish design. It should feature clear navigation. When visitors come to a web site, how long they remain interested depends on:
Their sense of place.
Knowing where they are on the site.
Knowing where they are going.
Good organizational structure creates this normalized standard. Creative visual design enables users to become familiar with how to navigate the site. For this article, I shall use a fictional YouTube style site as an example. I am not explaining how to create such a site, just using the site idea as a frame of reference at points in this article.
The intention is to create a site that allows filmmakers to host movies and also read information on the movie industry. For example, a site showcasing movies must inform users immediately that it is a movie hosting site with lots of content relating to the movie production industry. Also, the site would be aimed at filmmakers and those who just love watching movies.
This presents two target audiences and the content needs to interest both targets to succeed. The site could mix movie production tutorials with movie reviews as one example here. No matter what the site theme covers, however the content is planned, it should never stray away from the focus of the site. This needs to be clearly evident upon visiting the home page. This becomes the site message, which must be clear.
The first stage in getting the web site designed is to know what information will be designed into it. It is the very first plan, a blueprint from which all the design aspects emerge. This can be a very lengthy process for most web sites. The reason why people visit a site and then come back is due to the quality of the information and how that information is accessed. Good content planning and research at an early stage saves a lot of time and effort later.
Who Cares Anyway?
Who will be interested in the site, and why? Nine times out of ten, it is the content that makes the difference between a site worth revisiting, and one that can be forgotten very easily. Be clear on the site audience needs. Who will be viewing the site on a regular basis?
Research the Competitors
A very important step in designing any commercial web site is to analyze the competition. But then everyone has to start somewhere and although it may seem somewhat intimidating after viewing the competition, it is important to remember how they started. Many commercial web sites began in a bedroom with one PC and a single user. Getting to know the competition is an excellent way of learning how to design the site. Browse around competitor sites related to the site theme and make notes of how they designed the site, how they started, and analyze how their business model came to fruition. The initial salient design factors include:
Easy menu navigation.
A home page that presents the message clearly.
A clear presentation of competitive advantages.
It is time to design the most crucial parts of any web site — the content. The site MUST present interesting and useful content. Start writing and developing ideas. It is time to put all this creative energy to work and build a production process that meets the goals of the site and keeps the audience coming back.
Begin gathering all the pieces of information that will fill the content. What content is needed? Write out a list of all the content and functional requirements that will comprise the content separating the areas into various groups. This task will present a good idea of the site structure.
Start crafting some design templates, maybe a few initial mock templates. Now write some content for those templates. This does not need to be the final content for the page, nor do the final web design touches need to be shown here; treat it as just a heads up on the initial feel of the site. Dreamweaver is quite useful for designing mock templates. Photoshop also allows complete visual flow and is therefore a good choice.
There are generally four types of content: static, dynamic, functional, and transactional. Static content tends to be privacy statements, terms and conditions, copyright information and help content. A page of the site where visitors may be required to log onto their accounts, upload files, or access a forum to chat with other visitors, forms the transactional content. Dynamic content refers to the information changing through each page. The functional parts are where each section leads to another as in the site navigation to member pages via a login button. Referring to the movie hosting site idea, members will need to be able to log into their own personalized page so a bio can be written or a movie uploaded.
By creating user walkthroughs, it is possible to bring the idea of the content design to life. An example user would be somebody interested in as many aspects of the site theme as possible. Later, when the site content is finished and the navigation created, the fictional walkthrough being conducted at this stage should match the live testing results of the site later. This will also help in producing the site network diagram displaying the flow of information across the site. The next page will explain how to create a network diagram.
Create a fictional character or visitor whom would be interested in the site content. Give that person a name. Which parts of the site would he or she wish to access initially and thereafter on a regular basis? For this exercise, try creating different characters mixing men and women as well as their reasons for visiting the site.
The example discussed here is centered on John, with reference to the movie hosting site idea. Here is an example of a fictional walkthrough to test a site aimed at attracting visitors to watch and host movies, much like YouTube, and those who like to read movie reviews and filming tutorials. This requires a fictional need and goal for John when visiting the site.
It could be said that the walkthrough is just that — fictional, and not really carrying enough weight at this point. Wrong. This will help in deciding what content is pertinent to the site theme. For this example, John, a movie mogul, wants to see his movie hosted on his own web page without having to learn anything about web programming and perhaps pick up some tips on the way.
Occupation: film school graduate
Interests: movies, animation
Place of residence: UK
While searching for a suitable movie hosting site, John discovers the site through a search engine. Upon visiting he realizes that he may have found a site which can host his movie and give him a web presence for it. He sees a visually appealing site that appears to be loaded with information on various aspects of the movie industry and most importantly the means to upload a movie.
John decides to watch some films already hosted first so he sees the ‘movies’ Button and clicks. He has now navigated to a list of movies categorized by genre and immediately sees the most popular and latest additions to the site. John chooses a movie to watch and likes how fast the page loads and also how smoothly the video streams to the PC and plays in his favorite media player.
John likes the quality of the site and so decides to see about getting the movie hosted. John clicks on the register button where he has just learned that this allows him to create a member account and upload his movie. John is impressed by the easy navigation through the site; he finds the information readily accessible. On the register screen, John sees a form where he fills in his details and his account is created. The form tells John that an email containing his member information has been sent to his mailbox so he immediately checks his mail. A mail has already arrived and contains his member name and password so he returns to the home page where for ease of access, John can also log in without going back to the login button on the previous page.
John logs into his account for the first time and starts to learn to use the web site builder. To ensure that he’s not going to be hitting any brick walls here, John goes back to the main site and as the member screen has opened in a new window, the login screen is left open while doing this. John then clicks on the tutorials button and finds some easy tutorials teaching users quickly how to use the site builder. Within minutes John has returned to the site builder screen and begins planning his web page. He intends for the web page to show his name, contact details and of course his movie. He also decides to place links to his own personal web site where he has information on his movie production history documented, which he summarizes into a couple of paragraphs and places on his movie hosting page right here.
John then uploads his movie and takes a look at the completed page. He is satisfied that he has just used a quick and easy editor and uploaded his movie with no issues. He previews the web page and is able now to watch his movie online. As he has a web site address that points to his movie, he sends the link to his friends so they can see his college work. John logs out and intends to return to the site to make additions to his bio page and keep checking for any further updates on the site content.
One last thing he does before leaving the site is check the forum to chat with any other budding enthusiasts about their movie making exploits. According to the register screen, submitted bio pages and movies will be accessible from the ‘Movies’ section within 24 hours. This is great; John also decides to make his movie known in the forum by placing the link in the appropriate forum category where filmmakers are discussing their latest movies and movie making skills. John makes new contacts among movie making enthusiasts and is happy with the service.
This now allows a visual appearance to form, purely imaginatively, but that is where great ideas begin. Now it is time to draw the network diagram showing the flow of information and how visitors will navigate.
Following on from the scenario represented above, the next step is to create a visual representation of the site pages. A network diagram shows how each site element would link to each other and how each page may be sub-linked. Earlier it was mentioned that there are various types of content — static, dynamic, transactional and functional text. At this point it is important to have an overview of the site’s structure and also a more complex breakdown of each part of the content.
First we need a basic flow diagram showing the generic sections possible but not finalized. Word 2007 has great tools for creating these diagrams but there are plenty of other software titles available to do the job such as Smartdraw, EDraw, and Visio.
This provides a blueprint from which to plan out the pages. Don’t worry about not having a completed web design template. That is the next stage from this article. A lot of designers may decide to work on the fly and skip the diagram. This is not a recommended course of action as the design will change later in ways that will cause a lot of unnecessary work if the network diagram has not been used to chart the flow of information.
This blueprint is a good starting point and helps use the imagination to develop some creativity for the look and feel of the site. With a general idea of the information architecture, it now feels like possessing all the parts to create a model airplane and just needing to glue it all together.
Now, go back to the second page of this article and continue researching and writing various types of content for the site as explained on that page. Know the salient points. What information is necessary and interesting? Then move on to stage two of the network diagram.
The Network Diagram: Stage 2
For the movie hosting site, there were two target audiences highlighted – filmmakers and enthusiasts. The diagram below is a demonstration of what may be required to grab the interests of filmmakers.
Since the site allows filmmakers to create a member account to upload movies, the home page should allow this immediately. The diagram shows several possible site sections of interest to filmmakers. From the home page, they can ‘Register’ and create a personalized bio page. The filmmaker will have personal login details like a username and password. The ‘Login’ menu option allows access to the film maker’s personal member page. Filmmakers will be interested in film festivals to market their movie. It would be useful to place information on careers in the film industry. Also, why not create a page listing accredited academic and industry courses?
No matter what the site theme entails, there should always be the following menu options on commercial sites: Contact, About the Site, relevant article links and FAQs (Frequently Asked Questions). Contact information is vital for feedback. A quick outline of the history of the site will be a good page for ‘About the Site.’ A shop is a good place to attract vendors to the site. Later, when traffic to the site is high, advertising revenue can become a lucrative means to finance the site and provide an income. The marketing is a huge subject and will not be covered here. Suffice it to say that there is a great deal of information on the web covering how to make money with a web site using SEO (Search Engine Optimized) content inside articles like this one. I shall cover this in future articles.
A good place to start is to write content for the site and use ‘keywords’ — words related to the site theme — to link to web vendors. Clickbank is a good place to find vendors relevant to the site theme. Also, Google AdWords allow for some revenue generation if keyword marketing is chosen as a means to generate an income. For this article, I simply want to cover the information design that will bring life to any web site.
Now, move on to the final stage.
Movie enthusiasts will want to mainly watch movies online. Their interests must be catered to from the menu. It should include links to the various genres and flow from the home page in the same way so the contact information is still visible.
Of course there is scope for more than is shown here but the general idea is being conveyed. Filmmakers will also want to watch movies, so the menus for both parties should always be visible. There is a correlation between the two target audiences becoming evident. This can occur on many sites that attract visitors for differing reasons.
It is important that site visitors are not spending time wondering where to find the information they seek. For this example, the two diagrams for Filmmakers and Enthusiasts should be joined into one A4 sized network diagram. Then, the next step is to start thinking about the remaining pages that can be added. For the video hosting site, a forum would be useful to allow interaction between the site filmmakers. Also, links to articles on the subject of movie making and movie reviews with links via keywords to other similar sites would be helpful. It’s a big process and ensuring accuracy now saves editing pain later.
Search engine optimized content is the best way to use article writing to market the web site and I shall be writing articles on this subject. As far as the information architecture is concerned, as long as the rule of ‘Content is King’ is obeyed, any site can transform into a fascinating ride for the site’s enthusiasts.