IN F I N I T E art A Collaborative Web Experience
SH ANNO N CH O NG
A COLLABORATIVE WEB EXPERIENCE
WHAT IS INFINITEART?
InfiniteArt is a crowd sourcing site that encourages users to submit original imagery that connects either visually or conceptually to another previous submitted user image. Emphasizing co-creation and collaboration, InfiniteArt is a growing art piece where user images are connected in order to create a larger art piece.
“a crowd sourcing site that encourages users to submit original imagery that connects..�
Because users are able to connect to other usersubmitted images from all sides, the site art piece is able to expand and grow in all directions. Bond by no time or submission limit, this co-created larger image can grow infinitely.
INTRO
2
3
I N F I NIT E A R T
A COLLABORATIVE WEB EXPERIENCE
4
HOW COULD THIS BE DONE?
RESEARCH The research phase of the project consisted of exploring how the site would work as well as conducting a user test to see how users would respond.
InfiniteArt can be achieved by creating a website were users can add to a larger image composition. By having an image mosaic at which users can submit to, helps engage the users and encourages them to contribute to the art piece so that it is forever growing. As pieces are submitted, available spots would become available to add too and a “+” will appear. WHAT TOOLS/SOFTWARE ARE NEEDED? The tools/software needed to develop this site is HTML, CSS and javascript. Because the site allows users to submit files, a database would be needed in order to store the users images. Security perimeters would also be needed for this site in order to prevent users from uploading viruses and inappropriate images. AM I ABLE TO PRODUCE THIS? Producing this site is possible. The biggest issue I may run into is creating a way for new available spots to add on appear when users submit new additions. WHAT MIGHT I NEED–TUTOR/ADVISOR? A tutor/advisor will be needed in ordere to help me create a way for new available spots to appear when users submit new additions. I also would need help setting up a submission system.
RESEARCH
5
I N F I NIT E A R T
USER TESTING The concept for the site was presented to three users. The first user had the freedom of creating a image without worrying about whether it connected to another due to no other images being previously submitted. I found explaining the concept of connecting the images to previously submitted images to be difficult for the second and third users to understand. In order for them to get it I had to show an example of how the user could connect.
User two connected their image to user one’s image visually, by lining up the curve in their image to the curve of the yellow in the image submitted by user one.
User three connected their image to user one’s image visually as well, by lining up the top line in their image to the line of the brown piece in the image submitted by user one.
RESEARCH
A COLLABORATIVE WEB EXPERIENCE
6
7
I N F I NIT E A R T
WHY IS THIS TOPIC OF INTEREST? This topic is of interest due to its ability to allow users to contribute to an interconnected image composition that can grow infinitely. The more user contribute the bigger the interconnected image composition grows. HOW CAN USER BE ENGAGED? Users can be engaged by seeing how other users connect their images to other submitted work. The fact that users must connect their images to previously submitted images engages them by challenging users. WHAT OUTCOMES MIGHT IT GENERATE? A variety of different outcomes can be create, due to the variety of different spot users can submit their own image. The direction in which the image mosaic grows varies depending on where the users connect their own image.
HOW DO YOU DOCUMENT YOUR OUTCOMES? I will document my outcome by creating a site that allow users to see how large the art piece has grown as well as be able to zoom into different parts of the piece to get a better look of what others have submitted. I will also collect the date that people submitted their pieces so that time can be an aspect to the site. Documenting the scale and time at which the piece has grown will add to the experience. HOW AND WHEN DO YOU MAKE CHANGES BASED ON OUTCOMES? Due to the structure of the site, in which users will be contributing to one art piece that grows continuously, there should be the need to make changes based on the outcome. The changes in the shape of the piece will change based on the user submissions.
HOW CAN THE STAGE BE SET FOR AN EXPERIENCE? The stage can be set for an experience through the concept of watching this piece grow. Because there is no limit on how many people can contribute, the size at which it can grow is limitless.
RESEARCH
A COLLABORATIVE WEB EXPERIENCE
RESEARCH
8
9
I N F I NIT E A R T
TEMPORARY SUBMISSION COLLECTION Temporally users could submit submissions to the InfiniteArt facebook page while the site was being developed. The page prompts users to upload a image to the facebook page that they wanted added to the image composition. This method of collecting images would only be done until the site was fully functional. Due to the fact that the image composition could not be instantly updated with new submission, the way the site would, there was a delay between user submissions and the image composition updating. For the facebook page I had to individually add each user’s submissions to the image. I would then post a revised image of the image composition with the new available spots user could add to. From this I learned the importance of the website instantly updating when a new submission is submitted. This would prevent multiple users from submitting to the same spot.
DATA COLLECTION The user submissions and response where very important in regard to the development of the website, so while the site was being designed I collected users submissions through a temporary Facebook page.
STEPS TO SUBMIT TO FACEBOOK PAGE 1. Choose an available spot (labeld A, B, C....) next to a previously submitted image. As more people contribute more spots become available. 2. Submit an original drawing, vector or photograph that in some way connects to all the images next to your chosen spot. 3. Post your image with your chosen location.
D ATA
A COLLABORATIVE WEB EXPERIENCE
10
11
I N F IN IT E A R T
PROGRESSION OF SUBMISSIONS Through the progress of collecting submissions I discovered that the outcomes of what users decided to submit as well as where they would submit varied. This allowed for interesting shapes to develop as the submissions progressed.
1 Submitted Image 4 Available Spots to Connect
SUBMISSIONS
A COLLABORATIVE WEB EXPERIENCE
6 Submitted Image 10 Available Spots to Connect
13 Submitted Image 15 Available Spots to Connect
SUBMISSIONS
12
13
I N F IN IT E A R T
21 Submitted Image 19 Available Spots to Connect
SUBMISSIONS
A COLLABORATIVE WEB EXPERIENCE
SUBMISSIONS
14
11
I N F IN IT E A R T
HOW USERS CONNECT THEIR SUBMISSIONS Originally I had plan to only allow user to submit images that connected visually in some way or form. That meant user image had to almost be an extension of other user images. However I discovered that some users would connect their images conceptually. Allowing user to submit images that connected visually or conceptually added another layer of interest to the project. it also made the site more engaging so more people were contributing to the site.
SUBMISSIONS
A COLLABORATIVE WEB EXPERIENCE
SUBMISSIONS
12
13
I N F IN IT E A R T
USER FEEDBACK While collecting data and submissions, I received feedback on the concept and design of the site. Important things to consider in regards to the function of the site were also brought up.
•
Does the way the user connects to the other images need to be as obvious as others? Can it be subjective?
•
What happens if a user wants to submit an image that is not in a square format?
•
What happens when two users try to submit to the same spot?
•
Should user be able to slightly adjust (crop, nudge, etc) their image when uploading it? This would allow them to place the image exactly were they want.
•
Clarify that the images submitted must be their original work.
•
The spot where the user image go must be selected before creating image.
FE E D BACK
A COLLABORATIVE WEB EXPERIENCE
FE E D BACK
14
15
I N F IN IT E A R T
WEB DESIGN Due to the collective art piece being the most engaging part of the site, I designed the website to be a single page. Minimizing all the content to be on a single page allowed the user to be engaged in the site without consistently be brought to a different page where they would have to figure out what is going on.
W E B D E SI GN
A COLLABORATIVE WEB EXPERIENCE
W E B D E SI GN
16
18
I N F IN IT E A R T
TIME RANGE ADJUSTER
The time frame adjuster allows the user to see what the image mosaic looked like at different points in time. This allows the user to see the different shapes the image mosaic made through its existence. As user adjust the time range the number of submitted images will also adjust to match the number of images shown.
W E B D E SI GN
A COLLABORATIVE WEB EXPERIENCE
W E B D E SI GN
19
20
I N F IN IT E A R T
ZOOM FEATURE
Because user have to connect their images to previously submitted images it is important for them to get a clear view of the image the want to connect to. User can zoom into any of the images. When the users cursor rolls over the image the zoom in symbol will appear. When the click the image it will scale up to show a larger version of the selected image. Having this feature also allows users to see how other users connected to other images.
W E B D E SI GN
A COLLABORATIVE WEB EXPERIENCE
W E B D E SI GN
21
22
I N F IN IT E A R T
SUBMITTING IMAGES
When users hover over an available spots a plus symbol will reveal itself. This will inform the user that spot is available for them to add their own image. This method to get users to engage will get more responses due to less steps now required to participate. When the user has selected the space that they want to add to the user would click the add symbol to open the submit dialog box. The submit dialog box will inform the user about submission directions. Once the users submits there image the website would instantly upload the image into the overall piece.
W E B D E SI GN
A COLLABORATIVE WEB EXPERIENCE
W E B D E SI GN
23
24
I N F IN IT E A R T
FURTHER ANTICIPATION Because users are able to connect to other user-submitted images from all sides, the site art piece is able to expand and grow infinitely. With users able to submit endlessly the site, the website is able to grow endless. This allows the image composition created from users submission has the possible to grow from 20 to 1000+ submission; this opens up the possibility for mobile apps.
FUR TH E R ANTI CI PATI O N
A COLLABORATIVE WEB EXPERIENCE
FUR TH E R ANTI CI PATI O N
25
S H A NNO N CHO NG Design: Non-Linear GDES 403 Fall 2015 Instructor: Debra Drodvillo