[harryjcook] my interactive world.

Interactive Media DP3 Voyage Project Evaluation

The brief was to design and build an interactive website, which incorporated three or more JavaScript routines, under the theme of Voyage. The word voyage conjures up images of exploration and discovery, and Space is a theme that fits alongside that perfectly. Therefore I decided to design my website along the subject of Space, coming with the idea of an informative page about the Solar System. I thought this would be an intriguing theme to cover and potentially interesting to users.

            I am a great admirer of many aspects of HTML5 design, one in particular is the one-page set up that many HTML5 websites use. I think this is neater and more attractive design, and a lot more slick than bouncing between different pages of a website. I therefore wanted to incorporate this into my website rather than use the 5-page layout suggested in the brief. Another element sometimes used in HTML5 designs are fixed navigation bars that sit alongside the content, instead of moving with the page. This improves the ergonomics of navigating the website as you avoid having to scroll to the top of the page to change to another area of the site. It also has more aesthetic value, as you get a cleaner design to body without the links getting in the way. I also used a hover effect on the navigation bar to highlight to the user the link they are clicking, improving the usability of the website. An area of improvement in the design of my navigation bar could be to highlight the section you are scrolling through or are positioned on at any one time.

I have incorporated four JavaScript elements into my design. The first of these is the Adobe Edge header animation displayed. Adobe Edge is beta software which is set to be the successor to Flash elements in web design. I animated the planets of the solar system, which I designed using Adobe Illustrator, alongside the title to my page. I used a zoom effect on the planets and the background with an opacity filter on the text to create the header. I believe it enhances the overall design of my webpage and makes it more interesting to users. The issue with using Edge is that it is not compatible with Internet Explorer; I therefore had to incorporate a graceful degradation element so that the header reverts to a still image of the header with a message to update or try an alternative browser.

            My second JavaScript element is a JQuery smooth animated scroll. As my website has a one-page layout I am using to Anchor links to navigate from section to section. Normally the link would jump to the section or top of the page. However with my JavaScript element when you click on the links it smoothly scrolls to the intended section. This creates a slicker feel to the design and compliments the one-page and fixed navigation well. I had some issue set up the JQuery to run with multiple links but was able to overcome this by setting co-ordinates for it to move to for each link.

            The third JavaScript element I integrated was a ‘Read more/less’ element that allows the user to adjust how much text they are seeing. This means the user only see the small portion of text at each section, and then if they want to read more they click the link and the text drops down. This means the website does not feel text heavy and the users see as much as they want to. It also makes it quicker to manually scroll between sections, if the operator does not use the links. My JavaScript unfortunately expands all the text from all the sections when clicked, so an improvement would be to make it run separately, however you can click to collapse the text so the script is reversible.

            My final JavaScript is a JQuery image gallery slider, which shows a slideshow of Space related images at the bottom of the page. This runs smoothly and adds another element to the page.

My content design of the page includes a speech bubble effect surrounding the paragraphs; this offsets the text from the background and enhances the aesthetic value of the webpage. It was created by two separate elements, the surrounding box and the triangular shape below it. An improvement could be to add a gradient effect on the speech bubbles; however that may detract away from the text.

My design in terms of Constantine and Lockwood

The Constantine and Lockwood principles are intended to improve the quality of user interface design.

The first principle is structure; which states the content should be organised correctly and everything should be consistent. I have a consistent design throughout which is linked in all elements of the design. Plus all the content is listed and similar material grouped.

The second principle is simplicity. My web page is simple to navigate, and easy to understand. It is well structured and makes each process as straight forward and quick as possible. The fixed navigation, smooth scroll and ‘read more/less’ elements testify to this.

The third principle is visibility; making sure all relevant information to perform tasks is clearly visible.  My fixed toolbar ensures all tasks can be performed easily and without having to search around the web page.

The fourth principle is feedback; ensuring the site is informative of actions and errors. My website highlights sections they are about to click on with a hover element, informing users of their actions. There is also the graceful degradation implemented so users know they need to update their browsers to maximise usage the site.

The fifth principle is tolerance; meaning the website should be flexible to mistakes. My website is all one-page which simplifies usability and the fixed navigation means users can get to wherever they want to be quickly and easily.

The final principle is reuse; which again is about consistency. My site is consistent throughout with a simple layout. This reduces the need to rethink and remember how to perform tasks.

Overall I feel my website meets the brief. I have created a website around the theme of voyage, which incorporated JavaScript elements. It is well-designed and meets the criteria of the Constantine and Lockwood principles.