HCI Concepts behind this website
HCI means Human Computer Interaction. It's a discipline that studies how men interact with machines, what are their feelings, expectations, and so on..
Considering this HCI gives some directives a designer or programmer should follow in order to provide the best accessibility to the application or machine he's designing and modelling.
This website is an example of how some HCI concepts can be applied to make a better navigation; here are some guidelines followed:
- Base Layout: this site is designed with simplicity. An orange rectangular bar on the top and on the bottom immediatly gives to users the idea of the used space. There are three link bar that contains link to all macro-sections of the site, so it's easy to access the needed part. Space is cutted in two main parts: the main one on the left is about 2/3 of the whole site space, the other space is for the status and navigation bar. Every page has the navigation indication explicitaly written, in order to remember users what they're reading. Navigation and news/dynamic information box have a little darker background for the importance they have, and menu bar have a 3D-similar border, to give the dinamic idea.
- WebWide Style: all website pages have the same layout and style, this helps continuity and gives the navigation idea that the author have.
- Font: The font family described in the CSS stylesheet is "sans serif". CSS asks the browser to use in order "tahoma" , "arial", "helvetica" fonts. These sans-serif fonts are considered better that serif-ones, because they are faster to read, and make usersget less tired.
- Colors: used colors are basically three: a light blue , an orange and some gray shadings. Blue and grey are cold colors, and gives an idea of professionaly and serious contents. The orange is pretty distant from the grey color in the color disc scale, and gives a good contrast and a confortable reading contest. All colors and not aggressive, but sweet and kind. Some bad combinations like "green and red" are not used in order to allow all users, even with some physical problems, to navigate the site.
- Accessibility Attentions: trivial but fundamental items have been added, like the "alt" tag for images. This site tries to follow the Section 508 and the W3C AAA Reccomandations.
- W3C Compliant: last but not least, this website is validated XHTML 1.1 and CSS, to provide the best compatibility, with all browsers.