improving interface design

Improving Interface Design

From: garrettdimon, 2 years ago

Improving Interface Design

View SlideShare presentation or Upload your own. (tags: interface design)

Web Visions 2007 Improving Interface Design Workshop


SlideShare Link

Digital Self-interface revised

Movie Reels MPAA

I finished what is a first run at visualizing the MPAA rating with motion and shape.  I have shown the transition of the user selecting MPAA rating.  The threads begin in a state, in this case a solid thread line upon entering the site.  Then the user selects the data they wish to view (MPAA rating).   Then the event triggers the transition to display the data.

I should have genre done tomorrow.  My next objective is to show the MPAA rating on a mouse over event and I think I will be able to have that done soon.

Beginning state of movie threads.

Transition.

End state.

Progress on Digital Self

I selected 10 people as my research objects. They are in different life stages and with different occupations. I traced their Internet browsing history to find some patterns. This is the most recent visualization I created. When you mouse over a persona, his/her browsing history will be visualized in flowing text clouds format. I am also thinking of using rich media, such like sounds or video to support my idea.

I plan to do this piece in processing, which allows me to manipulate the data in a more flexible way.

The pixel people are inspired by John Maeda's piece human encounter. The dotted colorful text coulds are inspired by Wefeelfine.

For now to serve the purpose of comparison of digital self and physical self, I plan to list the tags related to the website they visit, then ask the physical person to rank it, by comparing the order of the two sets of data, the audience will easily find the difference between the digital self and physical self.

Special thanks to Stacie for giving me the idea of "comparing tags"!

Movie Threads Storyboard

Here is a quick story board of what I am trying to hammer out in flash.  There are three main components to the interactive site: filtering sidebar, sorting, thread display window

Filtering sidebar: This will show the possible options from which to choose.  Grouped by: Sales, MPAA ratings, Viewer ratings, and Genre.  Depending on the selection option that data will be shown to the user.

Sorting: This will allow a user to organize the data in the most sensible way.  Either by: Sales, MPAA ratings, Viewer ratings, and Genre.  The sort will occur on the item selected and by selecting the same option again the order will be reversed.

Thread display window:  This will display the individual threads.  Each colored to indicate the genre group to which it belongs.  The thread fragmentation will indicate the MPAA rating (i.e. the more fragmented a thread the higher the MPAA rating).  

In the story board I show the instance which a user will select the sales data to view and then sort by the MPAA rating.  You can get the gist here.  Refer to my previous posts to the other viewable data.

Learning Flash

I just thought I would drop a quick line letting everyone know that I am working on learning Flash.  I will be posting late Sunday or on Monday.  Right now I have worked through a few tutorials and am focusing on learning the tool.  So, if you happen to have experience in Flash and would be willing to lend some advice, please let me know.

I should have some story boards up later today.

- JZ

Process

The goal is quite simple: Explore the difference between your real self in the society and your digital self on the Internet. The method is even simpler: by analyzing people’s daily browsing activities. I plan to build this piece by Processing(as usual), the final delivery will be an “artistic” interactive piece.

So what’s a Digital Self and why start from a web browsing history analysis?

People may scared if they realized that their browser knows themselves more than they do. The browser traced down every single activity you do on the Internet, that somehow reflects you as a whole slightly different than you are in the real world.

For example, here are some variables that may reflects your “Internet” personality.

Your most frequent visiting sites.

- If I ask you to list some favorite sites, the answer you give me might be different than the answer given by your browser. You may not realize why you actually spend 30 hours on Facebook monthly, that conflicts with your goal - study harder.

How long do you stay at a site

- Spending 10 hours shopping on Amazon and 10 seconds to check things on Amazon reflects different personalities. If we did a long-term research, you may find you are easily obsessed with one thing, or you may like to change your focus frequently. That’s a very interesting Internet personality.

Your browsing time

- This directly reflects your schedule, how busy you are.

Sites category you visited over time

- When you are relax and happy, you will visit a lot of sites you like, otherwise, if you are hitting a deadline, you will only visit sites related to your work. However the sites people visit reflects how they release their pressure, such as watching a cartoon after a long time work.

Your search result

- Reflects your curiosity

What do you tag or bookmark a page

- This may reflect your Internet self in a social context.

What much do you comment or upload things on Internet(In versus Out)?

- If you only get, never give, does that mean you have a selfish personality on the Internet?

…

It will be interesitng to build a framework for Internet Self Study, but I think that’s phychologists’ job.

Sebascion S's comments:

Good idea though I do believe Google has long ago started a search project on just that. I had a suggestion though; by categorizing pages and relating them with each other and perhaps pushing it further enough to relate them to moods, wouldn’t it be possible to form a happy pattern that could suggest pages to cheer somebody up(?). Come up with a colorful design that transpires joy(or perhaps color patterns that can be somewhat customized) that would show up in a cloud fashion the websites that would be interesting to the user. Is it possible to maybe add suggestions (delicious….) that would add up to this cloud and would be highlighted to show that they are suggestions.

more sketches

Layering of Movie Information

Above are some of my ideas about how to layer color and patterns onto ' threads' which represent movies.  I see that my scanner is not capturing the color.  I will continue to post the rest of my ideas later on this weekend.

Josh

Digital Self

Brought to you by the United Nations...

World Agricultural Trade Flows

Movie Representations

Here is a first stab at the visual represeantations.

Sketches

Possible visualizations; I'm looking at how time can be a third dimension, how different viewpoints give you different information and how you convey the precision of the information.   

Data Analysis for Digital Self

This is my dataset(It contains more than 5,000 items). It's about my own browsing history and bookmarks collection. Soon I'll get other people's browsing history as well.

This data contains many categories, including the website's name, URL, the time you visited, and the visiting frequency. you could also check out a person's searching history in this dataset.

Movie LATCH

Here is my info for this part of the project.  I think that I am not sure that MPAA ratings fall into heirarchy.  I think I may move this to category.  Although people may classify this as a heirarchy.

3 Types of data

1.       Movie Performance (sales volume, weekly sales, box office rating, movie title)

2.       MPAA Ratings (MPAA ratings)

3.       Audience Ratings (Average viewer rating, movie title)

Organize according to LATCH

1.       Movie Performance

a.       Alphabetical: movie title

b.      Time: all-time, yearly, monthly, weekly, release date, movie length

c.       Category: genre, sales

d.      Hierarchy: top ten movies

2.       MPAA Ratings

a.       Alphabetical: movie title

b.      Category: genre

c.      Hierarchy: MPAA Ratings (G, PG, PG-13, R, NC-17)

3.       Audience Ratings

a.       Alphabetical: movie title

b.      Category: genre, number of reviews, average viewer rating

 

Temporal Map / Groups of Info

Release Date: Last week | Last 30 days – current week | Last 365 days – current 30 days | Previous

Genre: comedy | romantic | horror |action | sci-fi | foreign

Movie sales rating: 1 - 10 | 11 - 50 | 50 - 100

Average viewer rating: 1-5 | 5 <>= 7

MPAA Ratings: G | PG | PG-13 | R | NC – 17

Movie Title: A – G | H – M | N – Z ** Will have to look at movie titles an first letter frequency

Follow Up

The concentration of this project is to gather data encompassing gas prices.

So in terms of data organization...

Locations would be divided into states and major metropolitan cities.
The data would be shown in chronological order to study the rise and fall of gas prices.
Not only will I be tracking down gas prices, but also the prices of barrels of oil in order to see whether or not the price of oil is reflected upon the prices of gas.
Also, in order to further examine the trends in prices, the data will be broken down by season and compare holiday/vacation trip weekends to regular weekends.

book latch

Again, the primary goal of this project is to compare when and where books are written to when and where they take place. These are possible organizational methods for each LATCH principle:

Location:

City by city; By region/country; Limit to books in one region/country; English-speaking countries; Throughout the universe, By the distance from where the book was written to where it is set

Alphabetical:

By book title; By author's name

Time:

By year; By decade; By the difference between the year the book is written and the year it's set

Categorical:

By genre, By language, By author's birthplace, By tone, Past vs. present vs. future, Non-fiction vs. fiction, Fictional settings vs. real settings

Hierarchy:

Place written, place set-->time written, time set-->genre

Location and time will be most important because they directly relate to the primary data. Providing different categories like genre or time change would provide secondary functions to explore trends in the data. One challenge will be that the data doesn't not all have the same accuracy. One book could be set in Manhattan in 1987 and another across Europe over three decades.

Visualizing movement through space and time (both forwards and back) will be big a challenge as well. One way to do it is with a map with symbols or colors that indicate time change, or conversely, a timeline that uses symbols to indicate a change in place (this would probably be harder). Another way to visualize this is to make a three dimensional map, where time is the third dimension. A top view would isolate the location variable and a side view would isolate time variable. 

data breakdown

I'm going to focus on the following data sets for each Pittsburgh neighborhood:

population
area (sq. miles)
household income
educational attainment
occupation

I'm also going to include the same information for Pennsylvania, Allegheny County, and Pittsburgh in order to allow for some zooming in and out and a big picture idea.

I'd like to have the main navigation be a map of the neighborhoods, but I don't want that to be the only place where information is located. Perhaps as you zoom in more information appears alongside the map or in a rollover image. Maybe.

Also, it would be nice to include images that give a sense of the personality of the neighborhoods, so it's not just another dry set of numbers. I think that's what I dislike most about census data--there's no "feel" for the area. Ideally I could do a mashup of the census data and geolocated flickr photos, but I don't have the technical skills for that. Perhaps I could fake it in Illustrator.

Those are my thoughts for now. I still need to do the temporal map.

Pittsburgh census info by neighborhood

After class last night I was thinking that I set myself up for a lot more up front research than I'd really like (I'd rather spend more time on working out the visualizations). So I did some searching around and found this interesting resource: 2000 City of Pittsburgh Neighborhood Census Report (pdf). The document is well-organized, but there's no easy to way to get a big picture view of the data at once. Nor is it easy to compare neighborhoods without flipping back and forth through the pages and matching up the tiny numbers. So I think I'll work with this and see what kinds of visualizations I can come up with.

Digital self - Know your self

Everybody is using Internet, but nobody really cares about what are we actually doing on the Internet. The internet covers everything we need in our daily life. We search for food, map, housing, jobs, friends, and even potential significant others. During the time we build a digital self on the Internet that we barely know about - the browser may knows about this better than ourselves because it stores our daily browsing histories. I found it particularly interesting to observe everybody's daily browsing history that changes over time, which adds up a image of a digital being - your digital self on the Internet, mirroring your inner identity and value.

I want to build a dynamic data information visualization piece, through which you could compare your real self and your digital self, in order to know better about yourself.

Current Problem:
No visualizations for individual browsing history

Audience:
Every Internet User

Context:
Everyday - the data may fluctuate with the time.

Informal Project Proposal

Being from an area notorious for its high gas prices, I sweat every time I go to the pump. I just don't understand how prices can fluctuate so erratically and hurt my bank account so deeply. I want to look into the reasons behind the rise and fall of gas prices including comparisons of prices across the nation and how oil is heavily connected to our economy. Many ordinary citizens do not know that 1 barrel of oil is 158.987295 liters nor do they understand how heavily dependent we are on oil and the causes and effects of this dependence. I want to ask questions like...
Why are some areas more expensive than others (national/international)
How much does United States political actions (i.e. War in Iraq) hurt our supplies of oil.
How did gas prices effect people's personal lives (traveling, means of transportation to work...)
Traffic
What products did we buy in response to these prices and how automobile manufacturers responded to these prices.
How are cars different now?
The actual price of oil in the market compared to what people pump into their automobiles.
How much of this resource is left on our planet.
Where are they drilling and how many new places are we drilling in?

The purpose of this investigation is to try to help the public understand why gas prices went up so much and to emphasize our great reliance on this diminishing commodity.

Project Proposal - Nadeem Haidary

BOOKS AS A PULSE ON OUR PLANET
What does comparing where and when an author wrote a book to where and when his characters roam tell us about the temperament of the author's time? Books, as artful reflections of the time in which they are written, give us an intimate glimpse of the mood and ideas that dominated the culture which created them (in a way facts cannot). For example, does a rise in books written about the glorious past point to a growing pessimism about the present? While music, film or a painting also achieves this, the literary artist's work is more closely bounded by worldly constraints like a setting and the format for presenting the work has more or less stayed consistent for hundreds of years.

The data, essentially words, dates, and places, is abstract and almost universally understood and is unlikely to change in the foreseeable future with new books. If one can gain a better understanding of history through a tool that visualizes the real and imagined contexts of books, one could then begin to try understand the present by comparing its real and imagined contexts. Would it be possible to make predictions about the future?

TO WHOM IT MAY CONCERN
I want to visualize this information because I'm curious to see what patterns emerge. A few friends who I shared the idea to also found it interesting and so I hope many more people would be too. However, the obvious audience would be literary critics, authors, historians and librarians. I would like to make the data set cross-cultural, in that books from many different cultures are included.

CONTEXTUAL INQUIRY
While the data exists (SparkNotes, for example, has a 'Key Facts' section for each book to keep this information), there are no visual or holistic representations of it that I know of. If the information is sought, it is done so on a book-to-book basis and not compiled in a way to reveal patterns. Cause and effect go hand-in-hand: because no one has put the data together, no one is thinking about it, and vice versa.

JUST DO IT
I hope to create a visualization (at this point, both print and digital could work) that works in layers: from far away, the patterns are apparent, and looking closer, more and more data is revealed to show outliers, regional data, and the specifics of each datapoint. An interesting context for this information would be the library. Being surrounded by the physical artifacts that get reduced to data points grounds and extends the piece, providing avenues for further exploration of the information. Perhaps such a piece could put books previously read into perspective or act as a tool for finding new books. The concept of mapping real and imagined contexts could provide a strong framework for adding variables (genres, tone, mood) or adding another form of data (music, art, drama, film, religions, inventions) to strengthen the pulse on that historical time.

Project Proposal - Joshua Zúñiga

Following is my project proposal. Feeback is welcome.

The movie entertainment industry provides many obstacles because content ratings are ambiguous, advertisement and presentation emphasize sensation over information, and judging entertainment value in its current form is difficult. Movies have been filmed for over a hundred years. Advertising compel crowds to enter theatres almost unaware of the type of content they may see. This dichotomy of experience and content information sorely leans to the former. An outcome of this is little in the way of educational advertising. The rate at which the movie industry produces new products compounds the problem of misinterpretation. In order to improve consumer understanding of movie content, quality of the information, and appropriate form of entertainment, the form of movie representation must be restructured so that it can be understood quickly and presented in a way to compare values against content.

Movie fans, families, and content sensitive groups would benefit most from a change to current forms of movie representation. Changes would create a natural mapping from content to relative values of each group, thereby permit decision making instead of impulse buying. This means that content sensitive groups can quickly see where movie popularity may not map to their unit values. Data visualization would allow families to better monitor movie choices and choose the level of appropriateness for their children. Furthermore consumers can visualize when the content is in or out of context.

This information takes form in radio, television, print, and online media. This information is received in different ways and at many different times, therefore it is important that the information be easily reached and understood across different mediums and by different age groups. The constraints of both digital and printed media must be explored so that uniformity can exist across both.

It is important to use both digital and print based media in tandem because of the semi-ubiquitous nature of advertising. Additionally, the one-way communication constraints of viewing the data in print or on television ads mean that consumers must generate understanding within seconds. Digital media also has many possibilities to represent data in a richer form according to individual preferences. Viewers become more empowered by interacting with an environment which one can choose the level of censorship by deciding or simply participating. Movie goers can better predict their experience by gathering and comparing experience goals and values against groups and populations. The rigors of researching a movie can be reduced by means of offloading the burden to simple participation. The result is more meaningful representation of data given to the viewers and data can more easily be compared to the desired experience.

Movie Junkie

I gave a little more thought to the project and may have narrowed it down to a topic which is very interesting to me and others. Movies! As a movie aficionado I think that there are many interesting problems around visualizing movie data such as MPA ratings, movie length, sales, popularity, cast, etc.

As a new parent I found myself thinking about what is appropriate to show my son. What does PG, PG-13, and so on mean? How am I certain that the movies I want to see with my family are both appropriate and entertaining? Is there a way to visualize this information in a way that allows me to avoid dong heavy research when the family wants to see the movie in 20 minutes?

Josh

Neat project

Found this on infosthetics, a very interesting project trying to visualizes people's feelings about anger, joy, fear, love and sadness.

http://www.emotionallyvague.com/index.php

Data sets I'm considering right now:
1. Literature, the data set is fictional
2. Caloric intake around the world or by socio-economic group
3. Representations of the earth throughout history
4. Top 10 or top 100 lists
5. Listing everything I own as a data set.

Other Thoughts . . .

I am curious what the rest of the team has come up with. Has anyone else found any other interesting pools from which they would like to share?

further thoughts

I'm really interested in representing data via maps, so I'm trying to focus on location and use of space. I'm thinking I may combine a project in another class with this class and focus on the 16:62 Design Zone (Strip and Lawrenceville) of Pittsburgh. There's such a rich history there as well as a lot of new development, but there's really nothing representing both the past and the present of the area. I'd like to do a few different rough visualizations to figure out what combinations of data are most compelling. I'm hoping to get the data both from online research and from spending time in the area and talking with shopkeepers, residents, visitors, etc.

Any thoughts or suggestions? It seems like a lot of ideas from yesterday were based on subjects with large amounts of statistics, but my topic feels more about the richness of the area. Do you think that will work?

CIA Factbook

We discussed a bit about demographics and migration. Since 1962 the factboook was realeased anually. Now the factbook is updated in two week intervals. The CIA factbook provides a rich and vast amount of data about the world population. However, this data is sometimes represented crudely in the form of ratios, rates, and raw data. It is mostly text based. The link is below.

https://www.cia.gov/library/publications/the-world-factbook/

Intro message and helpful blog

Hey Team,

I wanted to at least introduce myself tonight. It seems that I am part of team #5. I am curious about:

What type of ideas stuck out to you during the class today?

OR

What ideas might anyone have had afterwards?

Here is an interesting blog called Information Aesthetics. I read this frequently, and thought it might help us come up with some ideas: http://infosthetics.com/

Regards,
Josh Zúñiga

Welcome!

Based on what we discussed in class this evening, what are you proposing to use as content for the project? What problem(s) have you identified and why is the topic important? To whom is it important and in what context? What opportunities have you identified?