Design for Interactivity

7/24/2019 Design for Interactivity

1/20


2/20

Many websites base themselves along the same basic structure. A navigation barplaced on the top or left side of the page, a header and footer and a main body oftext. The difference between these websites and the one I am intending to build, isthat mine must be an experience.

But what does it take to take a website from being a set of pages where the user isspoon-fed information, into a website where the user is immersively engaging withthe space they are in to find this information? Perhaps it requires a breakdown of thisbasic well-known structure into something that is unfamiliar and invites the user toexplore its contents.

Each existing medium has its own recognised conventions of structuring theinformation, sometimes with an obvious reasoning behind the choice and sometimes

just because everyone else does it in that way. A similar thing is happening with theway people structure websites ( Barfield: 2004, 204)

An experiential website requires an element of interaction with the user, makingthem scroll or click certain aspects of the website to progress to another space.

This interactivity develops a relationship with the websites audience. To make themexplore the space instead of feeding them information creates an experience andtherein lies the brief of my project.

I have sectioned this book into two of the phases of James Gordon BennetsDesign Process in the book Design Fundamentals for New Media(2005). The thirdPresentation Phase is not included as it relies on a prototype of the website being

built. I will however design and annotate one of the pages of my website to give anidea of how it is to be composed


3/20

Project BriefTo design and produce an interactive,

experimental website, which does not

conform to a traditional website layout

but instead creates an experience

for the user through their interaction


4/20

In James Gordon Bennets book Design Fundamentals for New Media(2006), hestates that the design process has 3 phases. The first phase is the information phase,where the idea of the websites function is decided. It is at this stage that I mustdecide what my website is about, who will visit my website and therefore what style

of media and what content I will put in it.

My website will be based on a game. Games create a new world alongside ourown, where product, businesses and celebrities exist. It is my intention to create awebsite that represents one of these companies and their products, and to guide theuser through a typical company website with similar themes to that of the games.Interaction is created by making the user move through the website to uncover more

information.

The site will be visited mainly by fans of the video games/their associated media,between the ages of 12 and 40.

Many videogames are developed into films or are adapted from media such as comicbooks. Followers of these may also have interest in my website, so it is important

to make sure that my websites information is balanced, and that if I reference thegames storyline, that I stick as close as possible to the entire story rather than justthat shown in a graphic novel or videogame.


5/20

The design of a website begins

by determining the purpose of the

site. The answer to the question

What is the site supposed to do?will influence the design more

than any other part of the processBennet, 2005:28


6/20

To begin developing a website idea, I took two of my favourite video game series,Ratchet and Clank and Portal, and placed them onto a spider diagram. Aroundtheir titles, I began writing what I thought were good in-game structures that I couldbuild a website upon.

These ideas mainly revolved around the businesses or organisations that were sucha huge part of both series. The original idea was to somehow mock a professionalwebsite for the company.

GadgetronGadgetron is a gadget and weapon supplier in the Ratchet and Clank series. One of myconcepts was to produce a shopping website for the business with different sectionsfor gadgets, weapons and armour. All items would be priced in bolts, the gamescurrency, and upon trying to buy something from the site, a humorous technicaldiffi culties page that related to the game would be shown.

The idea behind this piece is to make the user become immersed in the games themes.Shopping with its currency, choosing sizes for a certain alien race or viewing theswingshot or hydrodisplacer in the gadget section add a layer of interactivity that isoutside that of the game.

Jokes and novelty items from the game such as the personal hygenator are included,with humorous game-related reviews about the item.


7/20

OR


8/20

PortalThe game Portal takes place in a science testing facility named Aperture Laboratories.

Portal and its sequel have produced an enormous following, with recurring jokes andthemes that would make a website based on it very exciting.

The company itself has a dark past and opens up the idea of having a website beyondwhat is seen at face value. Upon arrival, a user will be shown a clean professionalsite about Aperture Laboratories, but through interaction and exploration they canuncover the old Aperture Science website, filled with images and pages relating to

this side of the company.

The idea of recruitment crops up frequently in the game. I had the thought of buildinga jobs section of the site that on one side appears to be asking for willing testsubjects, and on the other begs for participants, with the promise of $60 or $120payment. Perhaps seeing this as one of the most important points to make in thisentire section.

Announcements in the game often try to be personal to the player, whilst omittingtheir name for [Test Subject] or their location as [Subject Home Town]. With thisin mind, content for the website will be directed towards the user. The website willaddress them directly as a person and will encourage the user to interact with thepage.

The main site will be viewable using the standard computer mouse or trackpad,however, by using the arrow keys the user will be able to switch between the Old andNew sites. A clue/prompt to do this will be written on the page in a typical Portal-style referencing the idea of someone who has already been testing and is unableto move a mouse, or a visitor from the future that has evolved beyond the use ofopposable thumbs.


9/20


10/20

After some consideration and research of other websites, I decided upon producingthe Portal concept because of how open ended the idea was. Unlike the other ideasI could introduce a lot of humour and images of my own into the website. It alsohad a very distinct visual style that would be great to conform to when building the

website.

The entire game is filled with iconic imagery that it incredibly memorable anddistinctive, and I intend to use them to support the graphics of my website. Even theolder, second side of the proposed site has its own separate, but equally distinctiveimagery and themes, some of which directly link to that of the cleaner webpage. It isthese that will help juxtapose the two pages with each other.

Although the New Aperture page will be a clean, professional white and blue layout,I feel that the Old page should have a vintage 1950s look. Many of the images andsigns in this section of the company use imagery that is in a style of that time. Mediafrom games such as Fallout and Bioshock will help influence this style. Many of thePortal logos and symbols can be made easily in photoshop using Polygons and LayerMasks.

ParallaxAs a small visual effect on the page, I had thought of using a parallax effect when theuser scrolled down. The image would be of the Portal icon falling through portals oneach container. The character would be hidden at each gap. An image of this idea isshown to the right. A great example of a similar effect is found athttp://lostworldsfairs.com/atlantis/, where an elevator travels smoothly town thechute as the user scrolls. It is hidden and revealed at regular intervals as informationpasses it. This site uses jQuery to create the parallax effect.


11/20


12/20

Portal is clearly built mainly around 4 colours; Blue, Orange, Grey and White.

Blue and Orange are compliments on the colour wheel (they are directly oppositeeachother), and as I feel that orange is a very warm colour and takes away from the

cold, almost medical look of Aperture Laboratories, I have decided that my websitewill be predominantly off-white/grey with hints of the other colours running throughit. The following quote from Alan Pipes helps reinforce my idea of keeping colourssubtle rather than a shocking, high contrast colour pallette.

Black text on a white background provide the highest degree of contrast, but awhite background may be seen as cold and clinical and black text too boring. Try

more subtle shades, as you would when painting a room- say, off-white for the wallsand dark greys for the details (Pipes:2011, 119)

Using an eyedropper onto the Portal logo I pasted the hexadecimal code for the blueand orange into kuler.adobe.com, a popular colour scheme design website. Upondoing so, it created different colour schemes based on certain rules of the colourwheel. I chose several that I liked and placed them on the page opposite.

After looking at them together I feel that I should stick to the monochrome bluecolour scheme, and use the orange compliment for certain highlights.

For the older section of the website, perhaps the orange monochrome colour schemecan be used within the vintage look as an aged/worn colour pallette. The colourscheme of this section of the game is mainly greys and browns and therefore itshould work quite well.


13/20

Analogous

Monochromatic

Monochromatic

Complimentary


14/20

The Interaction Phase is described by Bennett as how visitors will interact andnavigate on the site(Bennett: 2005, 28). It is the place where I decide what ordermy content will be presented and how the website will be structured.

Bennett states 3 steps in the Interaction Phase;

- Consider how the viewer receives content- Consider how the viewer controls the website- Map out the site

and these steps will be discussed in the next few pages.

How the user views contentThe user will view the website in one of two sections, and will interact to the secondsection by exploring the website in more detail. Interaction is created by making theplayer scroll or move using the keyboard for more information and by including linksto images, or other pages of the site. Using the keyboard instead of the mouse takesthe player out of conventional web navigation and forces them to think about thenavigation and how the content is placed in the website.

The portal character moving through the containers entices the viewer down towardsthe bottom of the page to see their fate at the bottom.

By navigating to the right, the user is given a completely different visual experiencefrom the last, Players of the game will instantly recognise the icons and visuals andbe drawn to the content of the website.


15/20

Viewer Control and the TransitionI intend to transition my page off to the left or to the top of the screen, making the

second page appear from the right or bottom. This is because in Western culture, wetend to read from left to right, and top to bottom. It will appear more pleasing to theeye to move in this way.

Codrops contains an interesting tutorial on CSS3 transitions (found here: http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/). These transitionsallow me to build my entire site on one page and upon clicking a button, hide all the

information with a slide or fade animation and display a new page with new content.Although this does not currently incorporate my idea of using the keyboard fornavigation, it does show an interesting way of disguising one webpage within anotherand animating between the two in an aesthetically pleasing way. As jQuery canbe used together with CSS3 transitions, perhaps I can find a way for a right-arrowkeypress to trigger a transition.

It is also possible to use the parallax scroll horizontally for the page transition. If the

viewer presses the right arrow key, the second page will scroll in from the right in

front of the first page hiding it. Keyboard navigation will work on a parallax scroll

and horizontal scrolling speed can also be changed. This may become the most

reliable method of building my website with the effect that I am looking for.


16/20

By looking at several different interactive websites I have found that a single pagewebsite will benefit the aesthetics and the interaction in my site. A deeply structuredsite would take away from the fact that the home page can in fact be transformedinto an alternate one.

The two sections must be structured so that their most important information is thefirst thing that the user sees.

New SectionThe New section will directly reference the user in the beginning as [Possible

Future Test Subject], with a side panel hinting at how the arrow key functionalitywill work should it be implemented in the final design. The information will beginwith a brief description of Aperture Laboratories and Aperture Science EnrichmentCenter, talking about its achievments and finally talking about recruitment, clickingon the Enrol button will link to a humorous Page not found page, or perhaps linkto the old page, should the arrow key transition be deemed unsuitable.

Old SectionThe old section will appear as an advertisement for recruiting new test subjects,where the focus is on the $60/$120 payment and the possiblity to have theopportunity only althletes and astronauts have had before. It will make false claimssimilar to those in the game, and reference the history of Aperture Science.


17/20

Websites such as ufo.lt and www.

skittles.com make use of a single

page to produce their websites. Itis interesting how the entire site

background forms an image despite

fractions of it being seen on screen at

a time. As I am most likely building a

single or two page website, the idea

of a complete image or repeating

pattern may also be included in my

website.


18/20

The entire site remains still until theuser scrolls past this line.

The logo and a repeatable

background remain still as the userscrolls down.

Information containers float abovethe background and the portalcharacter moves in and out of theportals as the user scrolls off and

onto another container.

The website is composed witha fixed width and repeatablebackground to avoid screen sizeissues. All content is centred andsized using percentages and with a

set minimum width.

The older section will remainthe same working layout, butwill conform to a differentaesthetic style. Content will beordered differently, and the static

header section will become anadvertisement for enrolmentinstead of a control help screen.


19/20

Portals Own WebsiteAs the Portal website is a small section of the half-life website, I felt it necessary to

examine the Portal 2 Official Site www.thinkwithportals.com. It is a conventionalweb layout with a large space between the navigation and the main-contentcontainer for an image slideshow to show through.

The website has a relatively shallow structure and its main content conforms to astrict 2 column layout.It sticks to 4 main colours; white, blue, grey and black, using blue also as a hover

colour.


20/20

As the website pages are built as long vertical pages, the site map only has severalboxes. All of the content apart from the two Page does not exist images is builtonto one webpage in two sections; New and Old. It is important to note that atany time, the viewer can scroll/switch between the two sections.

BibliographyBennet, James Gordon: Design Fundamentals for New Media, 2005, DelmarCengage Learning

Barfield, Lon: Design for New Media, 2004

Pipes, Alan: How to Design Websites, 2011, Laurence King Publishin

Design for Interactivity

Documents

Transcript of Design for Interactivity