This blog post describes the changes I have made to my interface design and website flow.
The website background
First, I wasn't happy with the one-point perspective grid I designed in Adobe Illustrator for the background design. I decided I would code this grid using HTML and CSS, therefore I could give it movement and it wouldn't be so static and boring as my previous design was.
I really like this new technique, it's not in your face and doesn't hurt your eyes anymore, as previous user testing identified.
Website homepage
I began thinking about how my project would be presented in an exhibition environment. What's the first thing someone would see? I had designed a homepage which showed the website logo and an image of the subject the data was collected from. The image below shows this.
I felt this design was too boring and static. It doesn't really represent well enough what the user was about to enter, a website filled with data. I decided that it would be best to include some sort of animation created using JavaScript, but the animation had to make sense to the topic of data and data algorithms. Luckily, I found a template online which I felt really did resemble what I was going for.
After editing the CSS of the 'D.O.D' title, giving it more depth and including a hover animation, this is the result of the outcome and the new homepage design:
The image loading issue
There was a huge downfall in the previous designs user experience. The website is a dashboard of data displaying a vast number of .mp3 clips and images, therefore the site suffered as it took ages for this to load. To combat this issue, I could have uploaded the images to online photo albums and loaded them in the HTML through links (I will probably still do this), however, what I decided to do was add a project description section to my site which the user would see when the website is initially loaded. This wouldn't be skippable as there would be a 10-second timer, therefore forcing the user to wait. In the background, the data would load and by the time the user has read the description, and the timer is up and the data would hopefully be loaded. The image below shows how I did this:
I took this opportunity to write briefly about some of the research that led to this interface. I mention Zuboff's ideas on economies of scope and economies of scale and what type of data the dashboard would expose to the user. When the timer is up, a button appears allowing the user to proceed to the next section of the interface.
A website tutorial
My interface has lots of sections to it:
Data overview section
Make an inference section
View all inferences page
Create an advert page
View all adverts page
I had to find an efficient way to communicate to the user where each section fits in, and what they are expected to do. Some websites have tutorials the user can go through the first time it's loaded. I thought this would be the most appropriate way for my site.
My tutorial appears right after the user clicks on the 'proceed' button after reading the project description.
The tutorial has three sections. The first section explains how to use the dashboard, and the steps taken to make an inference.
The second section tries to give the user a little bit of context about surveillance Capitalism, it's methods of data collection and data processing, giving them some advice when it comes to making an inference.
The last section is about designing the advert and what's expected from them.
View all inferences page
The image below shows the layout of the inferences page. I was happy with it but after receiving some user testing feedback which expressed different views, I changed it. I've been trying to make the site as interactive as possible through CSS hover properties. In this case, when the user hovers over an inference, it enlarges and becomes the centre of attention. Users expressed that the individual images were placed too close together making it look cluttered.
The new design has larger margins and displays only two inferences in a row.
In retrospect, I do see now how the previous design may have been a bit of an eyesore.
Designing an advert
It's taken me a while to develop the designing an advert page. During the construction of my site, I've had quite a bit to keep me preoccupied, kind of leaving this part of the interface to much later. Now that I've had time to develop it, I have managed to get buttons which change the background, typography selection and text size working. I still need to get the shapes working and uploading your own images. I think I may need to do this through a canvas, however, I am not sure. I will ask Oliver during a morning tutorial. The images below show the current state of this designing page. It would be fantastic to get this working, saving to a database where people will be able to view them. I think this page will be a prototype page, only allowing the designing to take place, but not saving it.
The main thing I want to get across to the user is how data collection, and data processing work together in surveillance capitalism. And I think that this message does come across well when taking into consideration the other aspects of my website.
Comments