#kib230

Rebecca Wade's 'Find My Fandom' Mashup

http://www.beckwade.com/mashup_assessment/fandomID.php

And Beck's design process blog: http://rebecca-wade-n8095272.tumblr.com/

Dion Clark's 'Pole Monkey' Mashup

http://www.polemonkeys.com

And his design process blog: http://phatcoindustries.tumblr.com/

Nicholas Hirst's 'Fuel Hub' Mashup!

http://www.take5restaurant.net/n8086141/index.php

and his design process blog: http://n8086141nhirstkib204.tumblr.com/

Fuel Hub gathers the information needed for you to take advantage of the cheapest fuels prices. It displays the average fuel price in the major cities of Australia, so you know when it’s best to buy petrol. It will also help you discover service stations near you using Google Maps and Google Places.

Inspirations:

More Personal-Daily-Infographic-Examples and Tools

There are lots of websites already set up and ready to help us with this project, and many of them even have iPhone apps available to further simplify the process. Here are just a few:

Daytum (my favorite, tracks any data) Tableau Public (cool tool, turns your data into a pic very fast) TouchGraph (tracks facebook data) Fitness Journal (tracks health and fitness data) Daily Mile (like a social media site, makes a map of your running route) Wordle (creates pictures of words you enter, “word clouds”) Make Use Of (this has links to more tools, sites and info about how to make your personalized infographics more stunning)

Idea

Alright so here is the objective:

“Produce a persuasive interactive information graphic for a touch screen.”

 While communicating a message to the user with the simplest form possible.

So the first and most logical place to start is finding a topic of information to illustrate. I choose a few topics of interest: Operating system usage, Internet usage, education, console sales and population growth. I ended up going with education in Australia. Statistics about attendance and completion of year 12 are topics I could use.

Statistics

Time to gather the stats on education in Australia.

The headings I’m going to use are: Students enrolled, school count, population who completed an education.

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/LookupAttach/4102.0Publication25.03.111/$File/41020_ASTMar2011.pdf

http://www.ausstats.abs.gov.au/Ausstats/subscriber.nsf/0/4EF49EB9552322F4CA2576F500120083/$File/62780_2009.pdf

http://www.ausstats.abs.gov.au/Ausstats/subscriber.nsf/0/E75F10B762B24193CA25748E00129FCA/$File/41020_2008_10.pdf

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/0/51EE403E951E7FDACA25732F001CAC21/$File/41020_2007.pdf

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/0/178044E4F02B2490CA2571B0001A6078/$File/41020_2006.pdf

http://www.abs.gov.au/AUSSTATS/[email protected]/DetailsPage/6227.0May%202010?OpenDocument

http://www.abs.gov.au/AUSSTATS/[email protected]/Lookup/1312.3Main+Features2Jan+2011#Education

http://www.abs.gov.au/ausstats/[email protected]/ProductsbyTopic/02E69097ADCB6A79CA25730F00198CDD?OpenDocument

http://www.abs.gov.au/AUSSTATS/[email protected]/Lookup/1136.0Main+Features1062009

http://www.abs.gov.au/AUSSTATS/[email protected]/Lookup/1136.0Main+Features1072009

http://www.abs.gov.au/AUSSTATS/[email protected]/DetailsPage/4221.02010?OpenDocument

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/0/1DE1CF6BBB83B252CA25740E00799D92/$File/20303_2006.pdf

All the information came from the ABS on education.

Interface design

Right so into the good stuff the interface my favourite part.

Once again I’m working off a similar style guide to the Metro UI.

I looked at other Information designs as well to try and get a feel for the interface I wanted.

http://www.behance.net/gallery/Design-Can-Change/220632

http://www.behance.net/gallery/DHNN-Computer-Arts-infographics/954149

http://www.behance.net/gallery/Chili-Infographic/957906

http://www.behance.net/gallery/Information-Overload/356751

http://www.behance.net/gallery/Urban-Infographics/503448

http://www.behance.net/gallery/Progress/484984

http://creattica.com/infographics/universal-information-graphic-elements/61140

Right so simple shapes and Icons was the feel  I was going for.

Here is a quick sketch up of the UI I came up with.

  And here is it mocked up in photoshop. As you can see it follows the metro style guide with easy to read statistics and large typography.

Very simple yet it gets the message across. Information is the key part of design with no fancy graphics or cheesy cartoons. It’s designed to be simple to get the message across. That’s the point of this UI style guide.

Interaction design

So the main point of this assessment is to make it interactive. So I got out my Windows Phone 7 to take a look at how users interact with information. For this design I decided that each of the buttons would have interactive elements too show the use they are on them. Also following the panorama pivot of the metro ui I have a part of the information hidden to the side so users need to swipe to the side to reveal more information which allows for large graphics and more information to be present at the front. The elements would have slight animations between switching between the different pages as well. Possibly even having the infographics animated to help bring immersion. Not being a strong coder I didn’t want anything too fancy,

What it does

Alright so here it is.

As you can see I had to take a few of my elements out cause I just couldn’t get the code to work.

Upon opening the file users are taken to the home page where they then select the page of info they want to look at. They can select from the attendance page which takes them to the stats on how many males and females had regular attendance and how many were enrolled in an education centre in 2010.

The second page is a list of how many schools are in Australia. It’s broken up into state and private schools with an interactive list of the states.

The third page is a graph of what percentage of what type of education level males and females received over the last 4 years.  The user can use the time slider to get different results.

Evaluation

Ok so not being a strong coder I was really hindered by what I could produce (Although props to Mark Rienecker for his help.) I couldn’t get the pivot with drag elements to work so I ended up just making the canvas larger. I wanted to make the state buttons radio buttons that changed their values, however after customising the radio buttons I couldn't get them to output to the right place with the two different sets of information so I had to go back to timeline buttons.

I would have liked to customise the slider bar as well but attempts where meet with angry elements not working and coding a new one from nothing as out of my league. On the coding side I was in deep water as I knew how to code AS2 but 3 was just too much. On the design side I think the only thing I could have done more is add more information. I’d like to see this on an actual touch screen with all the interactive elements fully fleshed out too see how well it works.

Idea

Alright so here is the objective:

“Produce a persuasive interactive information graphic for a touch screen.”

 While communicating a message to the user with the simplest form possible.

So the first and most logical place to start is finding a topic of information to illustrate. I choose a few topics of interest: Operating system usage, Internet usage, education, console sales and population growth. I ended up going with education in Australia. Statistics about attendance and completion of year 12 are topics I could use.

Statistics

Time to gather the stats on education in Australia.

The headings I’m going to use are: Students enrolled, school count, population who completed an education.

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/LookupAttach/4102.0Publication25.03.111/$File/41020_ASTMar2011.pdf

http://www.ausstats.abs.gov.au/Ausstats/subscriber.nsf/0/4EF49EB9552322F4CA2576F500120083/$File/62780_2009.pdf

http://www.ausstats.abs.gov.au/Ausstats/subscriber.nsf/0/E75F10B762B24193CA25748E00129FCA/$File/41020_2008_10.pdf

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/0/51EE403E951E7FDACA25732F001CAC21/$File/41020_2007.pdf

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/0/178044E4F02B2490CA2571B0001A6078/$File/41020_2006.pdf

http://www.abs.gov.au/AUSSTATS/[email protected]/DetailsPage/6227.0May%202010?OpenDocument

http://www.abs.gov.au/AUSSTATS/[email protected]/Lookup/1312.3Main+Features2Jan+2011#Education

http://www.abs.gov.au/ausstats/[email protected]/ProductsbyTopic/02E69097ADCB6A79CA25730F00198CDD?OpenDocument

http://www.abs.gov.au/AUSSTATS/[email protected]/Lookup/1136.0Main+Features1062009

http://www.abs.gov.au/AUSSTATS/[email protected]/Lookup/1136.0Main+Features1072009

http://www.abs.gov.au/AUSSTATS/[email protected]/DetailsPage/4221.02010?OpenDocument

http://www.ausstats.abs.gov.au/ausstats/subscriber.nsf/0/1DE1CF6BBB83B252CA25740E00799D92/$File/20303_2006.pdf

All the information came from the ABS on education.

Interface design

Right so into the good stuff the interface my favourite part.

Once again I’m working off a similar style guide to the Metro UI.

I looked at other Information designs as well to try and get a feel for the interface I wanted.

http://www.behance.net/gallery/Design-Can-Change/220632

http://www.behance.net/gallery/DHNN-Computer-Arts-infographics/954149

http://www.behance.net/gallery/Chili-Infographic/957906

http://www.behance.net/gallery/Information-Overload/356751

http://www.behance.net/gallery/Urban-Infographics/503448

http://www.behance.net/gallery/Progress/484984

http://creattica.com/infographics/universal-information-graphic-elements/61140

Right so simple shapes and Icons was the feel  I was going for.

Here is a quick sketch up of the UI I came up with.

  And here is it mocked up in photoshop. As you can see it follows the metro style guide with easy to read statistics and large typography.

Very simple yet it gets the message across. Information is the key part of design with no fancy graphics or cheesy cartoons. It’s designed to be simple to get the message across. That’s the point of this UI style guide.

Interaction design

So the main point of this assessment is to make it interactive. So I got out my Windows Phone 7 to take a look at how users interact with information. For this design I decided that each of the buttons would have interactive elements too show the use they are on them. Also following the panorama pivot of the metro ui I have a part of the information hidden to the side so users need to swipe to the side to reveal more information which allows for large graphics and more information to be present at the front. The elements would have slight animations between switching between the different pages as well. Possibly even having the infographics animated to help bring immersion. Not being a strong coder I didn’t want anything too fancy,

What it does

Alright so here it is.

As you can see I had to take a few of my elements out cause I just couldn’t get the code to work.

Upon opening the file users are taken to the home page where they then select the page of info they want to look at. They can select from the attendance page which takes them to the stats on how many males and females had regular attendance and how many were enrolled in an education centre in 2010.

The second page is a list of how many schools are in Australia. It’s broken up into state and private schools with an interactive list of the states.

The third page is a graph of what percentage of what type of education level males and females received over the last 4 years.  The user can use the time slider to get different results.

Evaluation

Ok so not being a strong coder I was really hindered by what I could produce (Although props to Mark Rienecker for his help.) I couldn’t get the pivot with drag elements to work so I ended up just making the canvas larger. I wanted to make the state buttons radio buttons that changed their values, however after customising the radio buttons I couldn't get them to output to the right place with the two different sets of information so I had to go back to timeline buttons.

I would have liked to customise the slider bar as well but attempts where meet with angry elements not working and coding a new one from nothing as out of my league. On the coding side I was in deep water as I knew how to code AS2 but 3 was just too much. On the design side I think the only thing I could have done more is add more information. I’d like to see this on an actual touch screen with all the interactive elements fully fleshed out too see how well it works.

MULTITOUCH WATER FOOTPRINT Interactive Infographic 

Link to the .fla file: http://db.tt/xnN3vi8 Link to the HQ .swf file: http://db.tt/e2zfimE Link to the LQ .swf file: http://db.tt/tojE2IL

My project consists in an interactive infographic about water availability and consumption in the world. In particular, it focuses on 5 countries: Australia, Italy, USA, Canada and United Kingdom.

The data analyzed is the water supply, the water usage, the water per person and the population of each country.

Since the infographic is meant to be displayed on a big vertical surface, the concept for this project is to put the user in front of an hypothetical big glass, full of water droplets, where the user can play with them to gather new information. The hypothetical space beyond the glass could be filled with water, based on different statistics.

The project consists of a unique screen, where different droplets are displayed, each one representing a country or a kind of data. The user can interact with it dragging different droplets out of these main drops and merging them together to get detailed information about the data combination; this new information will be presented in form of a stack graph, made of a visually rendered water level that will fill the screen. The user will be allowed to select multiple kinds of data, that will stack upon each other, allowing to compare them. It is also possible to refresh the screen from the selected data through a “flush button” (shaped as an arrow pointing down), that will clear the screen from the displayed water levels.

To help the user understand how the infographic works, it has been added a small help button (shaped as a question mark) which will overlap the interface with some simple instructions of how to use it.

The project is supposed to be shown at “The Cube” in the QUT 
Science
 and 
Technology
 Precinct (http://www.qut.edu.au/scitechprecinct/video/scitech-main.html), an area with big multitouch screens, open to everyone. This would bring the interaction not to a single person at the time, but to different people. The audience would probably be mostly Australian, that's why I added Australia to the list of countries; Italy has been added as well, because it's where I come from... The rest are interesting cases of water consumption.

I focused mainly on the interaction and in creating a new way to interact, taking as much advantage as possible of the multitouch capabilities. I preferred to experiment as much as possible with the multitouch.

Data sources:

"2004 Global Clean Water Supply as % of Population," Pacific Institute "Access to Safe Drinking Water, by Country, 1970 to 2004," Pacific Institute "Everything About Water," Pacific Institute "Water Content of Things", Pacific Institute

Inspiration sources:

http://www.informationisbeautiful.net/play/snake-oil-supplements/ http://www.waterfootprint.org/?page=files/InfoGraphics

The following posts provide more detailed explanations of all the design process, design decisions and more technical information: