Show ‘n’ tell and Reflection

Our show ‘n’ tell

Today we had presentation of our concept, and it went fine. I guess we were clear and covered all the main points regarding nuance, pixels, touch, and skilled learning.

And our prototype did not ‘misbehave’, which is always a plus, and we did not have to fake it.

We got positive feedback, and some of the “objections” were addressed spot on – someone asked why we did not use sound as feedback, and I replied: well because this module is about pixels, not sound…

Our concept

We also got constructive criticism from our teacher, mainly concerning the concept’s depth concerning 1) nuance and 2)feedforward.

When it comes to number one, exploring nuance, i.e. enriching one’s experience through skilled learning, we should have given the user possibility to develop one’s skills even further – when the user is familiar with all the swipe combinations, there is nothing left to be improved. A suggestion for instance is to make more complicated combination of fingers. Our plan was to add different types of touch, but it did not work that well, so we were aware that it was something too simple to learn and then what?

Other groups

Sorry if I sound tough, but the other presentations and designs were not very memorable, and some of them badly executed, using the principle “fake it ’til you make it”. EXCEPT for one…it was very well presented and executed. I am talking about Lara and Jonas’ design, with the squares with several behaviours and color changing. The presentation was clear and well-structured, and the design started as abstract and conceptual , gradually developing to something more concrete – it enables the user to manipulate pixels. And their own design development process made skilled learning possible. So in other words, not only the user gains skills in manipulating objects’ pixels. The designers gain gradually skills and understanding in how to create something that can be manipulated by someone else.

So their design felt somewhat “meta”…Kudos!


Overall, I am satisfied with our work, we explored well the use of pixels and feedback – each action delivers a different output, we used both colour, animations and images. When it comes to touch, it was a little bit harder.

There were some combinations of touch and swipes that we wanted to try out. But we could not get it to work in code. One of them was to swipe in a circle to get a random playlist.. we still think it would be a great way of use the random function.

Our knowledge, as it was mentioned previously, was in this case limited, and we coped by doing something simpler.

There were also things that we could not use and did not test,  because we needed to work with touch, but shaking was something that we think that could be fun to test when it comes to music and playlist.

Furthermore, we have also applied the concept of skilled learning, by simplifying how we choose a playlist. Imagine a older person who has a hard time in using Spotify.  we have simplified the process into swipes.  And when people get used to the combinations it will be a faster way of changing playlist and songs without looking at the phone. Example: You have your phone on the arm when you running and you just swipe to change. It is similar to Dreyfus’ example about playing chess – in the beginning you have to learn how it works, and gradually it comes automatically, naturally for you.  However, I admit we could have gone further by making it more complex and giving opportunity to practice and develop other motor skills. I supposed it works as that text about ways to enrich experience by evoking negative feelings. Our design was probably not challenging enough, so the user loses it interest – frustration and challenging tasks are great fuels for the user in trying harder to solve a problem, it gets the user’s interest.









Yesterday I cleaned up my code and separated the script part from the html one, so they became two separate files plus stylesheet.

I made also some small changes in stylesheet file, such as color change, background and font, just to name a few.

Today my partner and I worked together on the random function with tap, which actually made the page get a little bit buggy, due to tap function sensitivity. We tried as well taphold, but it did not work as it was intended to. So after many trials and errors we decided to move on and use swipe with four fingers instead.

Well my conclusion is that working with touch is harder than I anticipated. We were pleased with the result, even though we had to make some changes from our initial idea when it comes to the random function. In terms of skill development, we were not there yet to make circular swipe work, and could not really cope. We had to stop and think about a new action course. Maybe if we had some more days to gain some experience it might have worked with the circular swipe.

Even though we could not use the circular swipe, I think we made a very good use of pixels to add expressiveness to the design – we used colours, images and animations to give a clear feedback to the user.

Finally we discussed a little about how to make the presentation. When we got home we saw we got some questions to reflect upon, so what we did was to discuss these questions online.


Working it out

Today my partner and I met at school and sat there until 16:00. We are basically done now, just some tinkering to do.

What we have done today was to use the Jquery plugin in our sketch, and do the logic part…you know, the if/elseif sentences, directions, finger count, the outputs…

We would share code snippets via Facebook chat with the changes made right on the spot.


Mostly everything was working smoothly, and the question was: how are we going to do with the random playlist function…circular swipe proved to be more than we can chew for now…so we decided to try tap at home.

So we made a to-do list, in order to assign tasks to each of us…


Well I forgot this work division and ended up doing the three first tasks right when I got home (the first one still at school, we did some of it together) and it went fast…but in my opinion the hardest one was left to my partner, so I guess it was somewhat evened out.

Okay, it is getting late, I deserve some relaxing time.

Problem solving

After googling a lot and visiting several coding fora I came across a perfect solution,  namely Jquery touchswipe. It took me a while to figure out which libraries would be added and that some of them come in the beginning of the index.html file.


I have just tested it, it works!!!! From novice I felt promoted to a somewhat competent Javascript programmer.  Now I know the true meaning of skilled coping. All I have to do now is to adapt it to our concept and make the necessary changes in the code.  I know exactly what to do… Many ifs and elseifs,  fingerCount etc. But this has to wait until Monday,  because tomorrow it is my little peanut’s first birthday.


Looking for a solution

Today we didn’t have anything scheduled, so I kept working from home…and so did my partner.

I spent the whole day basically trying to figure out how to use several combinations of fingers on same DOM element…Oh well…the library that I was using did not really allow that…it took me many hours to figure it out…I went through all the Fingers library files, just to find out that it would not work in the way it was intended to.

Besides working on the code,  my partner and I used Facebook to communicate and share ideas in terms of design, such as using an image that can represent playlist, preferably universally, since no text would be used, and people from all over the world could understand what the image stands for.

Here is the image we came up with (from

Playlist icon

Playlist icon

Oh well one more day of epic fail when it comes to coding,  but at least I know what to do next… Go to bed,  tomorrow it will get better.

Working from home

Hi there again!

As I have mentioned previously, we have been working today with each other virtually.

I started by trying to solve the multiple finger problem…how to use swipe with several combinations of fingers that return distinct outputs?

I started looking on Stockoverflow, see if someone had similar issue…I came across a plugin called Fingers that could read several combinations of fingers…so I decided to try it out, clean and minimize the plugin code. So I was happy, that I could swipe a finger, and get an output, swipe two fingers, another output…but the thing is – it was only possible to do it in separate DOM elements. We want to use several combinations of fingers but on the same DOM element. I am tired now…maybe I am doing something wrong in the code…

It is frustrating, but tomorrow will be a better day…I think about the text all the time…I am feeling like the novice in JavaScript, and I have hard time in coping…I hope I can develop my skills FAST.

Let’s get started!

As I have mentioned previously, we have decided to work with music app concept, focusing on playlists. Why did we choose it, you might be wondering…

Accessing a playlist can be confusing for some people, and it also involves many steps, some of them we consider unnecessary. We believe we can make the interaction between the user and the interface simpler, yet richer, with expressive feedback. That’s how we understand nuance – a way of making something that feels fluent and gives feedback that is expressive and rich in form of pixels – we intend to use colours and icons as output, to show the user what is going on, a form to assure this person that he/she is doing it right.

sketchWe tested how many steps it takes to access the lists – approximately four, which can be a little bit hard for those who are not tech savvy. We reduced it to swipe touch – If you want go forward/backward one list, you swipe up/down with one finger, and if you want to skip two, you use two fingers, and so on. Do you want a random playlist – we also think about creating this function. 

I suppose that in the beginning, it would take time for the user to learn all the combinations and use several fingers, since usually only one finger is used. But gradually, the user will gain experience, and with experience comes improved skills, until the user swipes through the lists without even looking at the screen.

As a starting point we wrote down the concept in a simplified way. The next step was to take a look at the Kattegat’s samples. We chose to focus on Pointer World and made modifications, to make it similar to swipe effect. It worked for one finger, in all four directions – up and down, left and right. However, if you wanted more fingers, you would have to make a lot of calculations in order to create coordinates for each finger. Imagine the trouble…So the plan is to keep working on it…

So, summarising, we spent this day simply sketching and exploring the possibilities and try to find a solution that can serve our design. To be honest, it felt so productive – we did not spend much time with divergence, because from the beginning we knew what design problem we wanted to solve, so we sorta went straight to the transformation/ideational process.

Tomorrow we cannot meet, since my partner helps students with programming, and I have doctor appointment. So we will be using Facebook chat instead of physically meeting tomorrow.


Starting point – Let’s change Pointer World!


Creating functions…