The Semiotic on the Web

There is an important thing present in advertising and other design uses, that we call semiotics. So, what is semiotics and why is it so important for design and advertising? In short, semiotics is about the study of signs, symbols and signs that we find in our everyday life and are able to recognize from their distinctive sign. In this post, we’ll look at how the semiotic is used on the websites to enhance the usability of the site.

Hypertext

The operation of the webpage mostly relies on hypertext as means of interacting with users. In general, hypertext is the same as regular text with an important exception that it is used to generate links that lead you from one place to another.

Hypertext uses color as a visual cue to the users that what they are seeing is a hyperlink. In most websites, the “unvisited” links will be blue in color. After the link has been visited or activated, it will change to purple color. The default appearance of blue text for unvisited links and purple text for visited links has many advantages because it is well understood by all web surfers.

Example of Hypertext Used in This Blog

Hypermedia

Hypermedia is the combination of hypertext and multimedia. Hypermedia contains links not only to other pieces of text but also to other forms of multimedia objects such as image, sound, video and virtual reality. The most common hypermedia is image.

In hypermedia, icons are used on the website as a visual clue instead of color to tell the user about the functionality through an image. For example, if you click this image on this blog, you will be redirected to another page i.e. the google's user profile.

Example of Hypermedia

Elements of Hypermedia

Animation, audio and video are the typical forms of hypermedia used in web designing.

Animation
Animation is the term given to the technique that provides the illusion of motion by displaying of still images one after another. The impact of an animated image carries more weight as compare to a static picture. When used appropriately, animation can be used to enrich user's experience as well as providing a more vibrant look and feel in your application.

Example of Animation  Used in the Progression Bar In The Blog

The image of the above example shows how animation is being used in the blog to signify the user to wait while the process is taking place. In semiotic terms, the animation that indicates the state of the system is indexical because they have a casual or physical connection between the image and what it represents.

Audio and Video

The web is about more than information and text; it is also a medium for expressing and optimizing the presentation of information for different audiences with different expectations and needs. Like images, audio and video can be used effectively to make pictures more realistic in the websites. When they are combined in the sites, this surprisingly will invite more clicks.

Example of YouTube Video Used in This Blog

At times, when reading explanations can be a bit boring, videos are a great alternative. It’s good to use simple and brief videos to give a clear vision about your products or services. YouTube and Facebook are examples of great websites that making an optimal use of audio and videos. 

While there are number of ways multimedia can be used to enhance a website, it’s important that the web designer don’t get obsessed with it and keep it within the limit as overuse will probably make the website too slow.