Scripting for Interactive Media @jrigbyimd-blog - Tumblr Blog

A further example of playful interaction at www.jkrowling.com

Another example of Playful Interaction in action

Bibliography

Books

Preece, R., Rogers, Y. and Sharp, H, Interaction Design: Beyond Human Computer Interaction. New York: John Wiley & Sons.

Websites

http://images.ientrymail.com/WPN.de.html http://searchsoa.techtarget.com/definition/interactivity http://www.jkrowling.com/ http://www.muirofordgolfclub.com/

Lecture Slides

Dr Richard Hetherington (2011), "Interactivity by Design", Lecture 2, Edinburgh Napier University, unpublished.

Dr Richard Hetherington (2011), "Bringing the Interface to Life", Lecture 3, Edinburgh Napier University, unpublished.

#references

Conclusion

Having looked at good and bad examples of interactivity and animation in contemporary websites, it is evident that a variety of factors work together to ensure an enjoyable interactive user experience. The range of technologies employed in web design mean there is no right or wrong way for a website to be designed and implemented. The examples I have provided demonstrate the current range of technologies available to the web designer. Having the option to choose how we design and implement websites is a positive aspect in web design, it allows for individual and innovative solutions to the presentation of information in a constantly evolving and diverse world wide web.

It is evident thought must be put into how interactivity is built in to websites in the future. Interactivity should add meaning to the dialogue between the human and computer. There is no room for interaction opportunities that are poorly thought out, as they degrade the overall user experience. Thought should be put into usability and and user experiences goals; a system designed these factors in mind will result in a user experience that functions and behaves in a way that enhances the experience. A well executed experience, such as www.jkrowling.com, uses interactivity in this positive way, resulting in the user enjoying an immersive and engaging experience without having to worry about an annoying or tricky interface. Exceptional attention to interactivity and animation should make the controls invisible to the user.

As seen in the examples above, animation plays an important part in new media. When used well animation can add value to a website; increase understanding of the content; increase usability, and provide an important sense of flow to the website. Animation also contributes to the feeling of playfulness that some of the best sites demonstrate. When blended with interactivity, animation enhances our digital experiences, allowing for absorbing and immersive interaction experiences. But, animation is still not fully understood and the websites that neglect animation suffer, they offer little to stimulate the user and result in an unsatisfying user experience. It is important, in an increasingly overcrowded world wide web, to stand out from the crowd, and some of the best examples do so by providing rich opportunities for interaction that excite, immerse and engage the user.

#conclusion

www.muirofordgolfclub.co.uk

The website I have chosen to demonstrate as a negative example of interactivity and animation in web design is www.muirofordgolfclub.com. At first glance it does not look as though there is anything particularly wrong with this website, but it soon becomes evident, on further inspection, that the website is lacking in rich interaction opportunities. The website does not make good use of animation, and when it does, it has failed to use it to its full advantage. The first thing the user notices when viewing this page, is the annoying scrolling marquee effect, achieved with the implementation of javascript. The video below demonstrates this in action.

http://youtu.be/008gZ8qi5uY

I consider this to be both a misuse of animation, as well as a serious design flaw of the website. The scrolling text is distracting and disorientating. It gives the user a feeling of information overload; interacting with this portion of the website is a frustrating and time consuming experience. It is not immediately evident to the user how to interact with the information displayed in the scroller. When the user hovers over the information the scroller stops, and the user has to move the mouse away from the area for the information to continue scrolling through. By the time they have done this, they may have to wait for the information to complete another cycle before they can access the information they need. It is puzzling that they have chosen to place this information here when they could have placed it more logically in the main body of the homepage. Instead, the main body of the web page seems to consist of redundant space. The image that occupies this space is bland and uninspiring, thus failing to represent a first rate leisure experience.

The navigation system is also poorly thought out in this website. The interface feels tacky and uninspiring. The buttons do change colour as the user rollsover each button, providing the user with some visual feedback, but as the user clicks, there are no further animated button states that reward the user for interacting with the button. The interface feels inconsistent and poorly thought out. Not all of the buttons highlight resulting in a confusing and frustrating user experience. The video below demonstrates the navigation system in action, and highlights some of its flaws.

http://youtu.be/sVsRt40pJhY

I feel that this website has missed an opportunity to make full use of the interaction and animation possibilities that currently exist. For example, the hole views section of the website could present hole information in a way that is visually more exciting and engaging. For example, a 3D model of the course that the user can manipulate, or the opportunity to interact with video footage of the hole. Instead, the user is presented with information that is presented in a dull, uninspiring manner. The image below illustrates this.

Overall, I consider the website to be an example of how interactivity and animation are abused in web design. Opportunities to provide a rich interactive experience have been squandered, and the examples of animation highlighted above work to the detriment of the website. The user interface feels flat and two dimensional, resulting in a user experience that is far from immersive and engaging. The concept of playful interaction has been totally neglected in the development of this website.

#thebad

In computers, interactivity is the dialog that occurs between a human being (or possibly another live creature) and a computer program.

http://searchsoa.techtarget.com/definition/interactivity

#introduction

www.jkrowling.com

The first website I would like to examine, with regard to interactivity and animation, is J.K Rowling's web site www.jkrowling.com. On first entering the website the user is presented with a vary basic splash screen. It is a positive example of how a splash screen can be used well. There is no extensively long intro, and animation is used sparingly and tastefully with the addition of an animated signature. This initial option screen allows the user to select the desired language and select a simple HTML text only version.

There is also the option to select an accessible version of the flash site. This is a promising feature as it shows thought has been put in to making the website accessible to as many users possible, therefore improving usability and allowing "access by everyone, regardless of disability"(WebPro News, 2003).

On choosing the desired option the user is delivered into the world of J.K Rowling, author of the Harry Potter books. The page is designed as we might imagine the authors desk might look in real life, cluttered with items that may be found on J.K Rowlings desk. The user can interact with the items on the desk by hovering over each item with the mouse. Animation and sound are used beautifully to provide the user with visual and audible feedback. Interacting with the various items causes them to behave in different ways some Items pop up or glow, some react to the cursor. A text box "magically" appears as the user hovers over each item, helping the user to identify what each item does. These factors combine to provide a robust user experience that aids usability and understanding of the website, whilst providing plenty of playful interaction. The following video demonstrates this in action.

http://youtu.be/ooQMlznic2s

As mentioned in the introduction to this blog, fun is an important factor in interactive experience and www.jkrowling.com does not disappoint. The home page provides an innovative, engaging and absorbing interactive experience. It presents a way of structuring a menu in a innovative visual style that encourages the user to explore. As the user explores they are taken further into the world of J K Rowling and the Harry Potter books. This is a positive aspect of using flash in web design as it takes away the presentational constraints of a traditional tabbed navigation system and allows for information to be displayed in a fresh and innovative manner.

The video below demonstrates an interaction occurring on the biography section of the website. Interaction occurs through the familiar use of scroll bars and forward buttons that are common features of interaction in web design. Animation enhances this interaction process. For example, the pictures to the left hand side drop in, assembling on the page adding an extra dimension to the way images are viewed. Interacting with the back and forward button causes the page of the book to fold, suggesting the outcome of interacting with each button. This is a good example of how animation can be used to communicate movement and aid the users understanding of the interactive experience.

http://youtu.be/KyOjPg8iA_s

Overall, I consider www.jkrowling.com to be an excellent example of a well designed interactive experience. The innovative design and flash implementation has resulted in a user experience that is engaging, exciting, informative and fun. It could be argued that it is not as graphically advanced as other more modern examples of flash website design, but it is worth remembering that the website is aimed at a younger demographic and that it caters for this audience perfectly. Various elements combine in this interactive experience - accessibility, interaction, animation and sound - to ensure an immersive and engaging interaction experience.

#thegood

Introduction

The purpose of this blog is to examine the use of interactivity and animation within the context of web design. Digital media has allowed designers to create and implement rich, engaging interactive experiences that immerse and engage the end user. This can be achieved through the implementation of numerous technologies available to the developer such as Flash, HTML & CSS and javascript . But how successfully are these technologies employed to provide users with a rich interactive experience, and are they understood and implemented successfully; or are these technologies too often used poorly, resulting in an unsatisfactory user experience?

As the reach of the internet grows and operating systems such as Windows and Mac OSX advance, we are becoming increasingly spoiled. When it comes to enjoying rich, engaging content that through the use of interactivity and animation aids the users understanding of the operating environment and the information contained within it. Interactive media, when designed well, provides engaging and immersive experiences; it allows users to sit forward and engage with the content. This is rather different from older forms of media where the user takes a passive role and sits back to enjoy the content.

Before I go on to examine examples of good and bad interaction and animation it is important to look at what interactivity is and the issues that impact on the user experience. In the book Interaction Design : Beyond user experience (Rogers, Sharpe, Preece. 2004) the goals of interaction design are identified as usability goals and user experience goals. Usability goals are defined as “goals that are concerned with meeting speciﬁc usability criteria”. These main criterion are defined as follows:

• effectiveness

• efficiency

• safety

• utility

• learnability

• memorability

These goals are useful aide memoirs in the design and development of interactive experiences, they provide a solid model for examining effectiveness and efficiency within interactive experiences.

User experience goals are an important factor in interactive media, specifically within contemporary within web design. User experience goals assess issues relavent to emerging interactive experiences, such as: is the product satisfying; is it enjoyable to use; is it entertaining? Essentially, is the experience fun? The concept of fun in relation to the web is an important one. Websites that incorporate playful interaction provide exciting and immersive experiences; they keep people coming back and create a buzz of excitement. Websites offer ways to connect socially and they ultimately offer exciting, absorbing interactive experiences.

Animation complements interaction and when used well enhances the interactive experience. Animation can provide visual feedback, communicate movement and help deliver a cohesive user experience. Combining a solidly designed interactive system and combining it with well thought out animation can result in an attractive and immersive experience. This blog will examine examples of these kinds of users experiences, but will also look at examples where interactivity has not been used and animation is not designed and implemented as successfully.

#introduction

Trending Blogs

Recently Viewed Blogs

Scripting for Interactive Media