In the first article part of this topic we laid out some fairly basic “dos and don’ts” with recommendations and reasons, concerning Web Designing in relation to Website Content. There is considerably more to say on the subject, and this first of two follow-on articles aims to amplify further as a general overview of how to, and where to, use your design skills so as to make the most of your website content.
Groupings (“albums”) of photos or videos are typically arranged in a grid fashion so as to allow a browsing user to be able quickly to scroll through them as a set. Try to avoid thumbnails so as give each of your video ‘still’ previews a large enough size so as to be able to convey something significant about its content (such as its title or a fitting image that explains its subject-matter well). Nothing is more frustrating and a bigger deterrent than having to open up each item in a video thumbnail grid layout so as to get a broader awareness of their content. People will quickly give up when a video cannot be found by them reasonably quickly and they go somewhere else.
A hover over with the Title or Subject of the video in it is useful. As is also plenty of space between items in the grid. This might seem like ‘wasted space’ at first thought but space equals a sense of freedom psychologically and lack of space equals a sense of confinement; and so of oppression. So always aim for the feel good factor for your readership and viewership.
Grouping your images and/or videos in some kind of reasonable and easy to grasp classification system (like by topic or chronologically or by author/creator alphabetically etc) is a useful and a welcome thing to a browsing user of your site. She will recommend you to others and will recognise a will on your part to be hospitable and that you are trying to anticipate helpful aids for your readers/viewers. Add to your image titles a basic search facility too.
Once again, and it cannot really be overstressed, the general principle here, and in all web design is that one must imaginatively and sympathetically put yourself in your web visitors’ shoes, and ask oneself once in them: ‘What would I like to see here? What can help me see it? What helps are in place to help me find what I want. And even, is the site owner/admin a good guy who cares about his visitors enough to put herself in their shoes? And always learn from your visitors’ comments and implement what is by popular demand wanted.
Systematised Data (like race or game venus and fixtures and results, league tables, car#eer histories etc) always benefits from being arranged in rows and columns usually displayed as tables. This type of data in quantity can be tricky to manage its display well. Remember again, give your viewers lots of visual space. Again: space is freedom from oppressive feelings of a cramped perception. As clear and plain a font as you can get too. Try not to embolden or italicise overmuch; and if you do use these keep them in whole columns or whole rows, which adds a sense of arrangement and so of order to the view of the page. Be consistent in your formats you use – including usage of colours and fonts and table dimensions and line thicknesses.
Colour indeed can help or hinder a lot with Systematised data display. Some colours are hard on the eye – and some colours kill the text they are background to. Text must always be readable and easily so. Choose your colours with care; make sure they don’t clash badly and make sure they add clarity and are not in fact obfuscating your intended communication. A personal preference is for soft colours – pastels and lighter shades – which are able quietly, almost unconsciously, to differentiate data types and make simple plain demarcations. Perhaps too much colour and colour in much force is too much like shouting at a browsing user, or maybe like forcing your attention down his throat??
Taking time out for thought beforehand is always the best choice for you; so as to plan out the best arrangement of your data in tables, charts etc. There are books and web pages that discuss presenting statistics to view, and which look at various layouts for the same materials according to their client consumers’ likely uses and purposes.
Sometimes small pictorial icons can be used to effect – like those that link to a Chart or to a Graphical representation of stats – but maybe keep such links to other pages either to the base of a page or maybe placed altogether on separate page – so that you stay lucid and inviting to the view.
Highly-Interactive Interfaces
Communication-type content (such as for instance: comments in forums and on social media; or web-based chat) normally are arranged in a (descending) chronological order. This arrangement allows users easily to follow the flow of a conversation (as in a forum thread) or train of thought (as in a person’s social media “wall” or “feed”) from its origins through its development and to any conclusions that might have arisen. In other words the whole history is presented in a form that is best for its digestion by a visitor who has no prior knowledge of its contents..
Often you will want to make very clear each comment or message that is associated with any single online identity (maybe via use of a user name or handle, or maybe sometimes using a profile photo or avatar, or another identity or data tag). There is usually also a time stamp beside each entry to give context to its message. Such a context may be crucial for determining when something was put down in writing; and this knowledge can settle arguments or else remind people of facts and appointments; all context is very useful and in certain instances can be absolutely vital to have and to know.
There are furthermore some advanced layout techniques which have been created in the belief that they are able to enhance conversations like those in social media and forums, techniques such as the indenting a comment to signify “replying to a reply”, or sometimes specially marking comments so as to indicate the importance of the person commenting (usual in employment situations).
Sometimes a highlight is placed on the user identity who started a forum thread, and the highlight runs throughout the thread whenever she re-comments; or else the same highlighting idea but used for tagging a comment come from an administrative-level user of the website, and so on.
In the third and final part of this series on Designing for Content we will look at the basic rules for creating facility in Navigation, with a short summary recapitulation of the entire subject to close on.