Web design

Contents

Introduction ...........................................................................3 Evaluation of the Web site ...................................................3 Psychology ...........................................................................4

Perception eye tracking ................................................................................................... 4 Persuasion.......................................................................................................................... 5 Social validation ................................................................................................................ 6 Decisions ........................................................................................................................... 6 Story telling and pictures .................................................................................................... 7

Principles of building ............................................................7

Simplicity .......................................................................................................................... 7 Consistency ....................................................................................................................... 7 Organizing ......................................................................................................................... 8

Technical site .......................................................................8

Fastness ............................................................................................................................. 8 Colours .......................................................................................................................... 8 Contrast ......................................................................................................................... 9 Typography.................................................................................................................... 9 Alignment .................................................................................................................... 10 Emphasis ..................................................................................................................... 10 Positioning ................................................................................................................... 10

Content ...............................................................................11 Conclusion ..........................................................................12 References .........................................................................13

Introduction
Web design is a complex field and value of the Web site cannot be exactly measured since the influences like company name, marketing, and mainly content, which is at highest level of variability through the Internet, are playing role in the number of user visits, average time spent on the site by users. This paper is therefore dedicated to summarize the main principles playing role in attractiveness of the Web site.

Evaluation of the Web site

Content-Usability-Technology model from the work of Lindic and Trkman: Evaluation of Web Pages as a Tool in Public Relations, shows complex structure of most important quality attributes of the Web site to evaluate its rate.

Source: Evaluation of Web Pages as a Tool in Public Relations. Lindic, J and Trkman, P. (1)

According to their work, the content, usability, technology and their sub-categories are crucial in success: A severe mistake in one of the main criteria can seriously jeopardize the quality of a web page, even if other factors are excellent. (1)

Above list could be used as a basic clue topics for a building a Web site and should be reviewed through constantly ongoing process of rebuilding and upgrading Web site with new content, development of new technologies and mainly user feedback and experiences.

Psychology
Fogg and Eckles described what they called the behavior chain for enticing us to participate online at social networking sites. They describe three phases: y y y Discovery. We learn about the service and visit the site. Superficial Involvement. We try out the service and get started. True Commitment. We create content, use the site, involve others, and stay active and loyal. (2)

Perception eye tracking

The human eyes voluntarily and involuntarily fixate on those elements of an object which carry or may carry essential and useful information. The more information is contained in an element, the longer the eyes stay on it. The distribution of points of fixation on the object changes depending on the purpose of the observer, i.e., depending on the information which he must obtain, for different information can usually be obtained from different parts of an object. The order and duration of the fixations on elements of an object are determined by the thought process accompanying the analysis of the information obtained. Hence people who think differently also, to some extent, see differently. (3) Only the visual information at the centre of attention can be perceived in detail and encoded in memory. Peripheral information is processed in much less detail and mostly contributes to our perception of space, movement and general categorization and layout of a scene. (4)

Eye tracking example:

Source:http://googleblog.blogspot.com/2009/02/eye-tracking-studies-more-than-meets.html

Studies have shown that you the Web sites have a few seconds to get a visitor's attention and hold it before they click away. Website should show to new user, to what it has to offer in that time. Everything that stands between user and information he wants, is distraction.

Persuasion
In a study exploring unconscious decisions, participants were shown posters, then engaged in a different taskthey worked on anagramsfor the same amount of time. Then they were shown the posters again, all placed on a single screen, and asked which one they liked the best. It seems that if we make our choice unconsciously, without conscious processing, then we stick with it over time. If we spend more time and logically analyze why were choosing what were choosing, were less satisfied over time with our choices. (2) Social networking sites that use principles of persuasion are the ones that grow the fastest, since they convince users to like what they choose on the long term run.

Social validation
A few studies triggered by murder of Kitty Genovese watched by 38 passive witnesses prove usually unconscious sociological bystander effect. Every human decision and

perception of every situation is highly influenced by behavior of others since we all tend to look at others for social validation. One of the studies performed by Latane and Darley in 1970 based on having somebody acting epileptic seizure on the street while observing various numbers of observers. The concluded that single observer will give help with 85% chance and surprisingly five observers will help in only 31% of times. (2) Similar study was performed on the online chat where the participants were asked a question for a help. The more people were present in a chat room the more time it took to get a respond. (5) Conclusion is that we evidently can use biologically natural behavior also in terms of anonymity of the Internet. Main impact for web sites is in importance of user reviews, user ratings, summaries or additional aggregated data of other people. The more graphic and more detailed, the better. Possibly because of this phenomenon, integration of the Facebook to other web sites is a new born trend. Since people want to see others recommendations, it is probably more convincible to see a recommendation of a well known friend.

Decisions
Timothy Wilson defines the unconscious as mental processes that are inaccessible to the conscious mind, but influence judgments, feelings or behavior. They are the shortcuts that size up our environment, interpret and initiate behavior quickly. (6) Our Web experiences are also highly influenced by unconscious thoughts and actions that are controlled by various parts of your brain. According to Susan Weinschenk, reality is that the Web site we pick, what we decide to do while there, and whether we buy or not are decisions and actions that we make in a largely unconscious way. A study exposing participants in three different conditions of experiment: rude, polite and neutral, resulted in conclusion: We are often unaware of the reasons for our own behavior. We often dont know why we do the things we do. But we are quick to make up a

reason that we actually believe, even though its not true. Psychologists call this confabulation. (6) Many of our decisions and actions are based on emotion, and many are based on automatic triggers that we react to from something we see on the Web site. Some (even most) of our actions are initiated from parts of our brain that we dont have conscious access to. Many of our decisions, reactions, and behaviors are governed by mental processes of which we are not even aware.

Story telling and pictures

We are programmed to think in stories. Web sites with stories will grab our attention more easily. Using the word story will grab our attention. Story is the most powerful and convincing method of passing information, because it is in our own nature. We use stories on daily basis while communicating with others. We use this method because the brain remembers more information more easily if passed this way. It is based on the idea of chunking that was found out by study observing activity of the brain during perceive of information in a story. (7) We pay attention to and remember pictures even better than words. Combining pictures and stories together is an unbeatable combination to grab our attention, hold our attention, and help us remember.

Principles of building
Simplicity
'Less is more' is the key rule. Main attractiveness of websites nowadays comes from its

fastness and easiness to comprehend. It means whatever the site is built for user has to be
able to find it quickly with the as much less effort as possible. Length of one page per view should be appropriate to value of its informativness. Every word and sentence has to be considered carefully and written clearly, otherwise visitors can just more simply click away from the page.

Consistency
It should be easy for your visitors to find their way around with a help of navigation menus in the same place from page to page. The most common places are a vertical strip at 7

the top left or a horizontal bar at or near the top of the page. Familiarity make users feel at ease, and every pointless effort to guess what to do with each page they load makes just confusion.

Organizing
It is better to divide the content into logical blocks using appropriate headlines, subheadlines and paragraphs to guide your users through a page. Nobody wants to fight their way through a big, grey wall of text so it is natural to try to cut the page into bite-size pieces readers can digest. Organizing might be helped by scientific method called Card sorting creation of the taxonomy of used topics where participants try categorize given cards of pre-writen important terms. Participants then sort the cards according to their comprehension of given words and then give the names best describing selected chunks of cards. By this method, more accurate taxonomies could be created if study consists of enough participants. (1)

Technical site
Fastness
Since the Web site has only have a few seconds to capture a user's interest it is irresponsible to waste any of them with bloated pages that take too long to load. Potential visitors will just hit 'cancel' and move on. Even nowadays, not everyone has a high-speed internet connection. File size shall be kept at the bare minimum. That may also mean abandoning nice bud contra productive graphic or flash intro. Colours Undoubtedly, colours affect our mood in daily basis. They are in active use in various ways during all and every day of our lives. Starting at food, the brain tells us what is eatable to artificial signs like traffic light which use colours to make our fast decisions easier and more safe. Based on nature, different meanings can be associated with different colours: y y y Reds: energy, passion, danger Blues: calmness, tranquility, stability Greens: growth, nature, freshness 8

y y y

Yellows: happiness, playfulness, sunshine Browns: stability, earthy Blacks: solomness, mystery, power

In a practical use on the Web site, monochromatic color scheme uses a primary color to create an overall mood. Tints and shades of the primary color are used to enhance the scheme. This scheme is easy to balance and is soothing to look at. It can be used with neutral colors like black, white or grey.

Complementary color scheme uses colors that are directly opposite each other on the color wheel. This color scheme creates a high-contrast effect. It is best to use one color as the dominant color and the second color as an accent in the design. This technique allows to highlight important information and make the important information jump out to a reader. (8) Contrast Contrast is the difference between the colour of the text and the background. Black text on a white background offers the most contrast and makes your text as clear as possible. It should be avoided to use colour combinations that will make difficulties to read. The closer the values are between the text and the background the harder it will be to read. Typography Selected fonts must be cross platform and usually preinstalled on the standard users Operation system. There are two different, basic types of fonts. Serifs and Sans-serifs.

Serifs are the extra lines added to the main strokes of the typeface. In print serif fonts are supposed to be easier to read because the serifs lead the eye across the text. The problem with this, is that printed pages can have a resolution of 2400dpi while a computer screen is limited to about 96dpi. This means that serif fonts on the screen can appear pixilated. Sansserif fonts generally look cleaner on the screen. The golden rule keep it simple shall be used also in typography. Practically limiting number of fonts per page and per site is better. The look of a font should reflect the content of the site. For example, Comic Sans MS is a whimsical font more suited to a children's page than to a corporate website. Alignment Text is more easily read if it is aligned left - also known as "ragged right" (the text lines up on the left hand side). Right aligned text and center aligned text are more difficult to read as viewers get lost when finishing one line and looking to find the start of the next. Emphasis When we want to draw attention to certain words or phrases, we have several options but we have to be aware that they can interfere with legibility. They should be used sparingly: y y y Bold: The most common and effective method. Its overuse might make harm. Italics: Tends to appear jagged and ruin legibility. Underline: Can cause confusion as it's understood on the web that underlined words are links. y Colour: Colour can be an effective way to draw attention although it can also be confused for a link. y ALL CAPS: Usually considered rude and it's hard to read entire sentences or paragraphs in all caps. Positioning Above the fold is gold. (9) In the newspaper industry, important stories are placed on the top half of the page - this is known as 'above the fold'. This is prime real estate because it's where readers first look. Putting the eye-grabbing content at the top of the page is a good to use approach when designing a website. Positioning adverts at this place and forcing the visitors to scroll down the window to find out what valuable content is considered as wrong.

10

Placement of adverts is one field at itself. Usually, nobody wants them, but it is understandable that they are food of whole ecosystem of the Internet. Placing them at the right place is as crucial as balancing taxes by government. Placing them too low on the page may lead to low revenues. Placing them in too visible and annoying place might also lead to loss of revenues, but with bigger consequences avoiding website by users at all.

Content
Content is the most important aspect of the Web site. Web owners has to keep in mind that people come to the site to get information. If the Web site does not deliver the content that people want, they won't stay very long and they probably won't return. Reliability, punctuality and quality of published information are of utmost importance. Content must be available instantly. Designers might decide to hide it behind more clicks than usual but then the hidden information has to be accordingly valuable.

11

Conclusion
The most effective Web sites are those which speak to our conscious, emotional and unconscious parts of brain. Considering Social validation and the principle of Location, it is highly important to put the user reviews, user ratings, summaries or other aggregated data of other people on the most visible place of the site. Mainly the front page, since the most valuable content should be the most easy to find to attract a user in a long term and convince him to get back. Most popular Web sites usually use principles of reciprocity, social validation, and similarity to promote their content and cause a viral spread. Satisfaction of the user in all aspects (content, usability, technology) of the site is crucial. Examination what users prefer to do on the page, finding the most used functions and making them easier in future upgrades is a key to stable growth of the Web site.

12

References

1. Evaluation of Web Pages as a Tool in Public Relations. Lindic, J and Trkman, P. Ljubljana : University of Ljubljana, Faculty of Economics. 2. SUSAN M. WEINSCHENK, PH.D. Neuro Web Design. Berkeley : New Riders, 2009. 978-0-321-60360-9. 3. Yarbus, Alfred L. Eye movements and vision. Moscow : Institute for Problems of Information Transmission, 1967. 4. David Bordwell's website on cinema. Observations on film art. [Online] February 14, 2011. [Cited: December 14, 2011.] http://www.davidbordwell.net/blog/2011/02/14/watching-you-watch-there-will-be-blood/. 5. Markey, P.M. Bystander intervention in computer-mediated communication. s.l. : Computers in Human Behavior, 2000. 6. Wilson, Timothy D. Strangers to Ourselves. Cambridge : MA: Harvard University Press, 2002. 7. Association for psychological science. Brain Shows Humans Break Down Events into Smaller Units. [Online] 2007. http://www.psychologicalscience.org/index.php/news/releases/brain-shows-humans-breakdown-events-into-smaller-units.html. 8. Website Design Basics. Colour schemes. [Online] http://www.websitedesignbasics.com/color.html. 9. Free rein creative. Above the fold is gold! [Online] http://freereincreativeblog.wordpress.com/2011/07/27/above-the-fold-is-gold/.

13