Ludic Interface

9
ANALYSING FROM THE UNLEASHED DEVICES AND LISTENING POST AT THE WATERMANS ART CENTRE/ ‘UNLEASHED DEVICES is a playful exhibition in which artists have reconstructed, remixed and reinvented everyday electronic devices. Working in this way, the artists change our understanding of the possible use of data and purpose of technology. These exhibits not only challenge our conception of technology but also of music, art and design.’ INTERACTIVE SUNDIAL/ My first example is an interactive sundial which included a electronically controlled sundial and a standard lamp. As the lamp is moved by the user or participant, sensors on the sundial sense the angle of the light hitting them and move the sundial accordingly. It moves and rotates on its base and settles in a position so that the lamp imitates sunlight. The dial shows the time as it would on a traditional sundial. I would assume that there is a circuit board as hardware with some very simple software installed which is connected to the sensors which send the signal to the computer which then makes a calculation and the sundial moves around to what it believes to be the correct position. I don’t see where or when this interactive device would be used other than as an experiment but it does show creativity and is interesting to its participant. I would say that this design is part of ludic interface design as it takes something ordinary with a simple purpose and changes it in a way so that it can be used to interact with in a more interesting and fun way but without loosing the original purpose of what it is for, which in this case is telling the time. I would also say that it is a participant type of interactive media as without participation it would not move or work properly. MOUSE INTERACTION/ This interactive media uses a regular PC mouse, large tv screen and includes headphones with sound. It would appear that the optical mouse is connected to a PC hidden inside the box that the mouse and headphones rest on. The PC is then connected to the tv screen showing the process and interaction of what the participant does with the mouse. You can move the mouse around and watch on the screen as you create what seems an unlimited amount of shapes which follow one particular pattern as the structure. The sound also comes from the headphones being connect to the PC as you interact with the device, the sounds were calm, simple sounds and not complex or musical in anyway. You can also click to change the shape. The mouse as a device is an input, the screen and headphones are the output devices. The device shows that you can use a mouse and PC to create. This particular device is only very basic so I would not see a purpose for it as a tool for interaction unless further developed into something which users and participants could have more interaction and explore there own creativity when using it, and to make it more enjoyable and addictive. I would not say that it is a ludic interface at this stage as I feel it is only an experiment and not a final outcome of what it could potentially be, however if it were developed into something even more interactive and interesting then it could be used on a web site for example or perhaps even a game. So you could say it has both practical and also entertainment values. tombryant.gdnm.org LUDIC INTERFACE DESIGN/ WHAT IS A LUDIC INTERFACE? It is the name for an innovative and interactive type of interfaces. Ludic interfaces are playful interfaces. A ludic interface design can be many types of different digital interfaces. Some examples include, web interfaces, iPhone apps, touch screen technology and processing.

description

Uni project

Transcript of Ludic Interface

Page 1: Ludic Interface

ANALYSING FROM THE UNLEASHED DEVICES AND LISTENING POST AT THE WATERMANS ART CENTRE/‘UNLEASHED DEVICES is a playful exhibition in which artists have reconstructed, remixed and reinvented everyday electronic devices. Working in this way, the artists change our understanding of the possible use of data and purpose of technology. These exhibits not only challenge our conception of technology but also of music, art and design.’

INTERACTIVE SUNDIAL/My first example is an interactive sundial which included a electronically controlled sundial and a standard lamp. As the lamp is moved by the user or participant, sensors on the sundial sense the angle of the light hitting them and move the sundial accordingly. It moves and rotates on its base and settles in a position so that the lamp imitates sunlight. The dial shows the time as it would on a traditional sundial. I would assume that there is a circuit board as hardware with some very simple software installed which is connected to the sensors which send the signal to the computer which then makes a calculation and the sundial moves around to what it believes to be the correct position.

I don’t see where or when this interactive device would be used other than as an experiment but it does show creativity and is interesting to its participant.

I would say that this design is part of ludic interface design as it takes something ordinary with a simple purpose and changes it in a way so that it can be used to interact with in a more interesting and fun way but without loosing the original purpose of what it is for, which in this case is telling the time.

I would also say that it is a participant type of interactive media as without participation it would not move or work properly.

MOUSE INTERACTION/This interactive media uses a regular PC mouse, large tv screen and includes headphones with sound. It would appear that the optical mouse is connected to a PC hidden inside the box that the mouse and headphones rest on. The PC is then connected to the tv screen showing the process and interaction of what the participant does with the mouse. You can move the mouse around and watch on the screen as you create what seems an unlimited amount of shapes which follow one particular pattern as the structure. The sound also comes from the headphones being connect to the PC as you interact with the device, the sounds were calm, simple sounds and not complex or musical in anyway. You can also click to change the shape. The mouse as a device is an input, the screen and headphones are the output devices. The device shows that you can use a mouse and PC to create. This particular device is only very basic so I would not see a purpose for it as a tool for interaction unless further developed into something which users and participants could have more interaction and explore there own creativity when using it, and to make it more enjoyable and addictive. I would not say that it is a ludic interface at this stage as I feel it is only an experiment and not a final outcome of what it could potentially be, however if it were developed into something even more interactive and interesting then it could be used on a web site for example or perhaps even a game. So you could say it has both practical and also entertainment values.

tombryant.gdnm.org

LUDICINTERFACE DESIGN/

WHAT IS A LUDIC INTERFACE?It is the name for an innovative and interactive type of interfaces. Ludic interfaces are playful interfaces. A ludic interface design can be many types of different digital interfaces. Some examples include, web interfaces, iPhone apps, touch screen technology and processing.

Page 2: Ludic Interface

tombryant.gdnm.org

LUDICINTERFACE DESIGN/

ANALYSING A WEB INTERFACE/I have chosen to analyse the web interface of www.wefeelfine.org. The first impression that the site gives me is that it is very information based due to the simple layout and colours. I believe that this is a good choice for sites that hold a lot of information as the user is not always wanting to go through introduction pages and have distracting animations for example on each page. It also has a professional yet interesting look and use of colour. I would in fact like to edit the site myself as I believe the text paragraphs are possibly to wide and would be easier read and digest if they were not as wide.

The site is an exploration of human emotion on a global scale.‘Since August 2005, We Feel Fine has been harvesting human feelings from a large number of weblogs. Every few minutes, the system searches the world’s newly posted blog entries for occurrences of the phrases “I feel” and “I am feeling”. When it finds such a phrase, it records the full sentence, up to the period, and identifies the “feeling” expressed in that sentence (e.g. Sad, happy, depressed, etc.). Because blogs are structured in largely standard ways, the age, gender, and geographical location of the author can often be extracted and saved along with the sentence, as can the local weather conditions at the time the sentence was written. All of this information is saved’.

The result is a database of several million human feelings, increasing by 15,000 – 20,000 new feelings per day.

We feel fine uses a series of ‘playful’ interfaces, the feelings can be searched and sorted. This offers responses to questions like: do Europeans feel sad more often than Americans? Do women feel fat more often than men? Does rainy weather affect how we feel? What are the most representative feelings of female New Yorkers in their 20s? What do people feel right now in Baghdad? What were people feeling on Valentine’s Day? Which are the happiest cities in the world? The saddest? And so on.

‘The interface to this data is a self-organizing particle system, where each particle represents a single feeling posted by a single individual. The particles’ properties – colour, size, shape, opacity – indicate the nature of the feeling inside, and any particle can be clicked to reveal the full sentence or photograph it contains. The particles careen wildly around the screen until asked to self-organize along any number of axes, expressing various pictures of human emotion. We Feel Fine paints these pictures in six formal movements titled: Madness, Murmurs, Montage, Mobs, Metrics, and Mounds.’

We Feel Fine believe their website is ‘an artwork authored by everyone. It will grow and change as we grow and change, reflecting what’s on our blogs, what’s in our hearts, what’s in our minds’.

From reading about the website I would conclude that they use a ludic interface.

Page 3: Ludic Interface

iPHONE APPS/Many iPhone apps are ludic interfaces.

I could look into making an iPhone app as one of my Ludic Interfaces.After researching I have fond that you can download a free programme from Apple which allows you to create your own apps which you can then publish at a cost.

iBeer. Interact by tilting the phone, also by shaking it which makes the beer froth up.

JONATHAN HARRIS/Jonathan Harris designs mostly online projects that ‘re-imagine how we relate to our machines and to each other’. The tools he’s uses are computer science, statistics, storytelling, and visual art.

www.wefeelfine.orgThis site presents a contemporary portrait of the World’s emotional landscape. It uses a database of more than 12 million individual sentences collected over 3 years from personal blogs. I really like the visual concept of this design and find the data that is being shown interesting.

www.thewhalehunt.org‘In May 2007, I spent nine days living with a family of Inupiat Eskimos in Barrow, Alaska, the northernmost settlement in the United States. I documented their traditional whale hunt with a plodding sequence of 3,214 photographs, taken at five-minute intervals for seven days, and at even higher frequencies in moments of high adrenaline’. This method established a constant “photographic heartbeat” that more or less matched the changing pace of his own heartbeat. He then developed a framework for experiencing this story, allowing the user/participant to rearrange the photographic elements of the story to extract multiple sub-stories focused around different people, places, topics, and other variables.

www.universe.daylife.comThis web interface attempts to create new constellations for today’s night sky by continually analysing the contents of over 20,000 international news sources, suggesting a modern mythology based on global media coverage. Universe portrays all information as being interconnected. ‘ Any word, quote, person, photo, topic or story can become the centre of the universe, causing all other items to rearrange themselves in relation to the selected item. This way of viewing information is reminiscent of the way we, as humans, experience reality as individuals each from our own perspective.

www.tenbyten.orgEvery hour, 10×10 automatically selects the top 100 words and pictures in the world, based on what’s happening in the news. It then presents these words and pictures in an interactive ten by ten grid, and allows navigation to past grids, so that history becomes browseable. In this way, these hourly snapshots, when stitched together, form a continuous photographic tapestry of human life’.

www.justcurio.us/ ‘Justcurio.usIs an anonymous question and answer system with one simple rule: to ask a question, you must first answer someone else’s question. Question yields answer yields question. Strangers helping strangers. The questions can be about anything the best Beatles album, your saddest moment, your biggest regret, your best childhood memory, the meaning of life, whether you should break up with your girlfriend, the best crepe place in Paris, the best cure for loneliness. Anything at all.

LUDICINTERFACE DESIGN/

tombryant.gdnm.org

Page 4: Ludic Interface

tombryant.gdnm.org

LUDICINTERFACE DESIGN/

Tom Bryant GDNM

IDEAS/DEVELOPMENT/Initial Design for my first ludic interface.Looking at use of colour, layout and practicing my HTML skills I have come up with my first idea. This would be the first page which is linked to a series of other pages. The concept behind it is ‘the journey’, this reflects that the design itself will take you on a journey through different web pages/interfaces. Also visually the footprints are indexical icons relating to the context. I have tried to relate the style to that of the superbad.com website. The idea is that the links will be within the images of each colour footprint and perhaps leave the existing links, however they will take the user/participant to an unexpected web page not relating to what the link entitles.Journey Idea, journey to UCA

LONDON IDEA/- Web interface that takes you on a journey of London.- The main page will have images of London, some text.- Clicking on one landmark will send the user to a different page with a landmark in a different part of the UK or world. I may have text explaining the link between these two places. I am thinking about a day trip to London to gather photos of various sites around London, including the art galleries and museums. Maybe collect other information.

Website Reference.Looking at existing websites for a guide to London, it’s landmarks and other attractions.www.allinlondon.co.uk/landmark.php

Journey website.May use this site for reference for another of my ideas.www.journeyon.co.uk/

THE WWW/The web is not a publication. Web sites are not paper. Yet the current thinking of web design is that of the magazine, newspaper, book, or catalogue. Visually, aesthetically, legally, the web is treated as a physical page upon which text and images are written.

Web pages are temporary graphic images created when browsing software interprets HTML instructions. As long as all browsers agree on the conventions of HTML there is the illusion of solidity or permanence in the web. But behind the graphical illusion is a vast body of text files — containing HTML code — that fills hard drives on computers at locations all over the world. Collectively these instructions make up what we call ‘the web’. But what if these instructions are interpreted differently than intended? Perhaps radically differently?

The web browser is an organ of perception through which we ‘see’ the web. It filters and organizes a huge mass of structured information that spans continents, is constantly growing, reorganizing itself, shifting its appearance, evolving. The Shredder presents this global structure as a chaotic, irrational, raucous collage. By altering the HTML code before the browser reads it, the Shredder appropriates the data of the web, transforming it into a parallel web. Content become abstraction. Text becomes graphics. Information becomes art.

Page 5: Ludic Interface

LUDICINTERFACE DESIGN/

tombryant.gdnm.org

USING TYPE/Looking at type based designs as I have chosen to do an experiment that is type based for one of my ludic interfaces. The idea of having an image made up of text is quite appealing and ludic so perhaps this is something to experiment with using Adobe Photoshop.

I have also looked at some web interfaces that use a persons face on their main page. I like the way that this emphasizes that it is a personal website and not that of a business for example which, could have information about the business itself and people within a hierarchy of employment. The website is for your own work that know one else has produced. You are in effect using it as a tool to promote yourself as an individual within the graphic design industry. You could potentially use your website to present your work at an interview for example or have your web address held as a link on other websites and perhaps even a business card or similar. It is possible to see from the image to the left above that using a large image of the person creates a more personal feel to the website. After all it is a personal website that I will have for my own portfolio and contact information. This design also maintains a modern and contemporary style.

IDEAS/DEVELOPMENT/I have been thinking about using an image of something (possibly my face) and using text to make up the image. The user will be able to click on certain words that make up the image which will take them to another page.

Another Idea is to design and make an iPhone app.

The idea of having an image of something, in the case footprints, which relates to the ‘journey’, made up of text. I found some nice footprint images and used Adobe Photoshop to carry out an experiment of this idea.

COLOURFUL WEB DESIGNS/Looking at existing web interfaces that have strong use of colour. This could relate to ludic design and colour is something which I will need to consider when developing my interfaces.

Tom Bryant GDNM

Page 6: Ludic Interface

tombryant.gdnm.org

LUDICINTERFACE DESIGN/

Tom Bryant GDNM

IDEA?/An image of the UK made up of text. Some of the text can be clicked on which opens a page with information on that particular landmark or place. Is this ‘ludic’ enough?

I feel this will be an interesting design visual as it will be made up of text. It could also serve a purpose for people who don’t know that much about the UK.

JOURNEY IDEA/DOCUMENTING MY JOURNEY TO UCA/I started to document my journey to UCA as part of my second ludic web interface idea. Just to recap, the idea will be image and moving image based showing my journey as a ludic piece of web interface design. I may also use varying type.

TYPE/Looking at common fonts used on the web as I will need to consider these when designing my ludic web interfaces or any type of web page in future briefs.

Verdana

Myriad Pro

Arial

Century Gothic

THE CENOTAPH, LONDON/It commemorates specifically the victims of the First World War, but is used to commemorate all of the dead in all wars in which British servicemen have fought. The link could be to the site at which many battles were fort in the first world war or any other war zone area for example. Each time you click it could link to a different place. Possibly have a library of 20 war zone sites.

LONDON IDEA/Looking at landmarks in London and how they can relate too another landmark/location. The web interface will be ludic as you will expect to be diverted to a page about the first landmark image but instead you are taken to something else, but that relates.

WEB INTERFACE MOCKUP USING HTML CODE/I have taken an existing code and experimented with the HTML by changing the wording and the layout.

Page 7: Ludic Interface

LUDICINTERFACE DESIGN/

tombryant.gdnm.orgTom Bryant GDNM

ANALYSING THE PROCESSING CODE/Void setup() {size (640, 400);

This refers to the size of the box that the processing animation is contained within.

void mousepressed() {

This and the rest of the parameters bellow it controls what happens when the mouse button is pressed. In this instance, a blob is created at any point within the box containing the animation.

PROCESSING/I attended a Processing workshop at UCA which taught me the basics of processing. I found it quite interesting what you can create as am interactive interface. Learning the code is not something which is easy, it is very mathematical in a way, however today I have been researching into processing and will post up my experiments from yesterday and today. I will be using one a or several processing designs for one of my final ludic interfaces. Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Some points on processing software.

Free to download and open source.Interactive programs using 2D, 3D or PDF output.For GNU/Linux, Mac OS X, and Windows.Over 100 libraries extend the software into sound, video, computer vision, and more…

Page 8: Ludic Interface

tombryant.gdnm.org

LUDICINTERFACE DESIGN/

Working on my Flash experiments and am very close to a final.

As I have been working with Flash, gradually my confidence has been building with using the programme and I have been able to try out more creative techniques for creating my experiment. The next stage is the audio files that I have been collecting from my journey. The design itself is quite modern and contemporary, this was intensional as I wanted to give it this feeling. The reason for this is that this project is strongly related to web interfaces and my research shows that modern websites use very limited colour and effects, at the same time this is a positive as you can clearly see the information that is being presented.

I have chosen to leave out the footprints image made from type for now as I’m undecided on where to have it in the animation. It may look out of place even thou it is made from type, the style of that type of design does not really fit within this experiment

LUDIC JOURNEY/I will use Adobe Flash to animate text that will scroll across the screen.The text will be describing my journey to uni, not a particularly ludic piece of information or interesting at first thought, however I plan to make the interface ludic in its design.

One of the words will be set as a button so that when it is clicked you are taken to the next step of my journey which again will be scrolling text. I will try to make the text as visual interesting as possible and plan on using 2-3 different font sizes and 2-3 different colours for the whole design. One of the words for each sentence will be a button linked to the next sentence. Also, I won’t have a voice over but will have the audio that I have been documenting from my journey to UCA.

The idea is a journey within a journey. You have buttons to take you to the next sentence which is a journey itself and the context is about my journey.

Page 9: Ludic Interface

tombryant.gdnm.org

LUDICINTERFACE DESIGN/

PROCESSING FINALS/LUDIC JOURNEY FINAL/I have developed this idea further by starting a new Flash ActionScript 3.0 file. I have furthered my knowledge with Flash by researching tutorials and generally experimenting with the programme and have come up with what is a final piece. I need to render it as .mov file or similar. I have designed the opening scene to have an introduction.

Inspiration for the colour and type are taken from my research of web interfaces. If you look carefully it is possible to see the first sentence within the jumble of words scrolling across the screen at a 45 degree angle.

I feel that as a concept, the layout and style are ludic in themselves within the context of interface design. There are buttons which link to the next stage of the journey, however the other button/s link to a previous page or other page along the journey that is unexpected. I would say that it could be further developed as an interface for an information based website or simply, just for fun with more pages and more buttons and effects. With regards to the layout I have used the rule of thirds and the golden ratio. I have also tried to create the type so it flows from top left to bottom right in the traditional way of reading English text and I am aware that perhaps to make the design as a visual concept more ludic I could perhaps experiment further with the layout. Overall I would say that the experiments are ludic.