Picture painting game

Most museums in the UK turn out to be very children friendly with often dedicated areas for kids to enjoy the experience in their way: touching, playing.

One of the devices for children at Edinburgh Castle caught my attention because it reminded me of the painting game we though about while brainstorming. Here is what it looks like.

On a fixed tablet was displayed the UI below:

This is designed for all visitors, the bottom right feature is made for kids.

Taping on it leads to the game itself:

Touch the jester to choose an area to paint

When you touch the jester, the borders of the selected area are drawn:

Then touch a colour

The area is filled with Gold and some information about the colour is displayed:

 Same process to colour the rest of the jester:

There is a little number of possible actions (Reset, Finish, Exit) and the focus is on the game. If I remove my spectacles I can still play with my short-sight owing to the presence of colours that clearly stand out from the background and simple shapes. 

Simple GUI, children-friendly and entertaining. 

Few children would read the texts, though.

The technical complexity of detecting where the user touches the screen and highlighting the corresponding area is here reduced by less accuracy. I guess hands are modeled as circles, the head might be an ellipse. Based on such simplification of touch areas we could integrate such a feature in our prototypes.

Last point, I witnessed very aggressive behaviours of children in their use of tactile devices. Some would even hit them without mercy when not responding, with surprising violence. I assume they would not act that way with tablets owned by their parents or themselves, but if Fotografiska were to lend tablets they should consider purchasing this sort of protection:

Summary of the Feedback

Feedback – Key-points & Suggestions

-          - Our interactive design is based on an assumption that the kids (of our target group) are able to read, hear and see.

o   Solutions for the illiterate, deaf, and blind?

-          - Is there a solution for families who don’t have their own tablet(s) to take part of the experience?
                    oThe museum could lend out tablets for a small fee.

-          For the design, is it possible to expand our target group?

Suggestions

-         -  A possibility for the app to “push-notice” about similar upcoming experiences/events to the user later on

  -   Having an auto-mute option for the sound, so that the kids can quickly turn it on or off if necessary (in case they don’t use headphones).

     

            

   

Pre-seminar thoughts on the literature

Chapter 6 - Ideation and design principles

I like the thought of the ideation process having the goal of creating as many different concepts as possible. It is easy to believe that you as a designer should be able to intuitively come up with the most optimal design in the first try but I think that just letting your mind flow freely lets you come up with unconventional and unexpected things that can be turned into something great later.

This is improved further by the rule that “there are no bad ideas”. It is important to have an open attitude so that everyone feels invited to bring his or her potentially spontaneous ideas forward. In our sessions, that felt difficult in the beginning and might come with experience and a group that has worked together for longer.

It also seems like a good idea to stay focused, but not spending too much time on a single idea. When brainstorming we tended to experiment with a central concept during most of the session, but I now realize how that might only take you along what can be thought of like a “desire path”. If you spend too much time on an idea, you might get comfortable with it and not want to stray too far.

The idea of “method design” is appealing to me, and I think we tried to do that unconsciously since we are designing a product for a target group we are not part of. Since we had clearly designed personas, this felt like it came naturally.

Chapter 7 – Refinement

I found this chapter to be the most interesting one yet. The previous chapters have been build-up for the refinement part, where your initial criteria, research and brainstorming come together to start forming the final product. In a way, it finally makes the product feel “real”. This is also the point where you take constraints and “laws” into account and have to make trade-offs and prioritizations.

Most of the constraints feel like common sense, but I wouldn’t have thought of all of them if I were asked before reading the chapter. Time, money and technology, for example, were always in the back of our minds, but tools and teams are not really relevant to our current project (since they are unknown) and so we hadn’t considered them.

The principles of direct and indirect manipulation are useful and were something we had considered earlier. Since our main target group is kids, we felt we needed something that they could touch and interact with directly rather than through indirect manipulation with menus and buttons. Since our product is digital, all manipulations are technically indirect but as the book mentions, when designing a technical product the terms can be redefined slightly.

One thing that really stood out to me was that “sketches are inherently unfinished”. It is easy to see the benefits of pen and paper compared to digital tools in how quickly they allow you to put your thoughts into pictures, but the fact that sketches look unfinished and how that makes it easier to discuss their flaws was something that I hadn’t thought of.

Chapter 8 - Prototyping, testing and development

The eighth chapter pieced together and summarized things I have come across on the web before and gives a good overview. It is easy to get carried away with all the technical possibilities and leave out focusing on making users understand the interface. It is easy to provide instructional text to try to compensate for bad design, but as the book says, instructional text is rarely read. You are supposed to have an interface that makes it clear to the user what is expected of them.

I also remember the concept of digital versions of analog technology not necessarily having to resemble the original product from the movie “Objectified” and find it to be very interesting. However, I agree with the argument that while making a new version free of many of the old constraints can be interesting and open up new possibilities, keeping the design in line with the analog version reveals intent and will make the product accessible to users of the existing technology.

I also particularly like the emphasis on giving items on screen a visual weight based on its importance and will try to keep that in mind when designing our product. The rest of the chapter provides useful feedback for our work with the high-fidelity prototype and testing.

The question I would like to raise at the seminar is how to best improve the openness of the ideation process in a setting that is not inherently business-like (such as ours). Rewards and the like might work fine in a more conventional design setting, but is there anything concrete that you can do in a more study-oriented setting?

Pre-seminar thought on the literature

A big part of the first chapter in the literature is about brainstorming in different forms. We’ve used the ”yes and..”-technique ourselves and created a few ideas with it. We used a form of structured brainstorming since we had some tools available to us: pain points, personas and some basic ideas of what we might want to do. A design principle soon emerged since we were already very clear on whom our target group was and had examined them thoroughly, and now had some design ideas. After looking at possible constraints such as time, money, technology, user needs and so on, which idea to choose became very clear. I personally hadn’t read this part of the literature yet, so it seems that these steps are quite intuitive.

On the seminar I would like to discuss how we can move forward in the process using the Laws and Principles of Interaction Design. Since we are pretty set on how the “exterior” of our product should work and look, the next step is probably to think more about the actual application interface.  We have discussed having sound effects and maybe the seminar is a good opportunity to decide if we should use it or not. As the literature states sound can really enhance the user experience, but there are also some risks that needs to be discussed. The sound cannot be audible to all visitors of the museum, as we don’t want our product to disturb the “normal” museum experience, and adding headphones might cause the children who use our product to become less aware of the sound they are making.

I also really want to discuss the different types of prototypes that are described in the literature and which ones might be a good fit for our design. Since our product would take a lot more time to develop than we have, we will have to find a good way of presenting it in a way so that the test users can understand what we want to do even though we can’t offer a high-fidelity prototype.

Thoughts on Seminar 2 literature

Find all notes about chapter 7 of the course book here 

From these notes are drawn here below the implications for our design and some elements that are relevant to get inspired. 

The presentation of the laws and principles for interaction design actually raises a certain number of findings that a designer should be aware of. Some are common sense, but some are worth being thought through. If any concept isn't clear, please refer to the full version of the notes for descriptions.

The direct manipulation seems better than indirect manipulation, especially for our target group: children. On a tablet, the drag and drop with a finger seems to me corresponding accurately to what one can expect as being direct manipulation, as well as clicking buttons. All functionalities of our app involve interacting with the GUI that way.

Feedback and feedforward are very powerful in giving the user a clear idea of the efficiency of the system without even thinking of it. For instance, when the loading time is high, having an indicator that shows the system is loading, i.e. doing something, doesn't shorten the waiting time but makes it seem shorter. We should achieve with our design live rendering without any latency, which is pretty hard if we actually use live augmented-reality. Also, the loading time of pictures for games can be of a paramount importance. The feedforward gives confidence to the user. Displaying instructions such as (Take a photo on a button that takes photos can be part of that).

One should make good use of standard models, also, we ought to have a look a which tablet applications children use most and are the most familiar with, to sort of get inspired and provide the child with an interactive environment that is known. As Alan Cooper said, we should obey standards unless there is a truly superior alternative.

Fitts's law states that the time it takes to move from a starting position to a final target is determined by two things: the distance to the target and the size of the target. However, this shouldn't be a problem for us for two reasons. The first is that we are dealing with tablets, so the interaction of the fingers, i.e. hand motion, is in 3D space and there is yet no model for that. The second is that we are not in a context where users must hurry, nor do we need to keep user's full attention to prevent them from going away (like in Web pages): the tablet remains in the kid's hands; therefore they must deal with the current action anyway. Hence the absence of Fitts's law relevance for us. We can just make sure the GUI is simple enough to avoid users being lost too long, and limiting the number of decisions at a given time (Hick's law, and in a way the Magical Number 7 concept).

The last principle that can help us is the Poka-Yoke Principle, that prevents unexpected errors or misuses to happen. Furthermore, the fact that we should any unnecessary button at a given moment should help us simplify the UI.

From the part Documentation and Methods of Refinement, here are some of the brightest ideas. The first is about using scenarios. Even though we have already worked on them, we focused on the context under which the visitor experienced the museum. Thus, it was neither product-oriented nor design-oriented. The author gives an example of a 5 lines product-oriented scenario that spares days of specifications. Using scenarios, designers can sketch with words, and a picture can be worth a thousand words but a few words can also be worth quite a few pictures.

The power of drawn sketches is also enlightened. We used it a lot and we should probably keep on using it for the design of the GUI itself. Using a storyboard is also an option, as well as tasks flow and use cases.

About the wireframes, we oughtn't create one for the purpose of the course, but it is good to keep in mind that in real-world a whole lot of documentation is needed.

The various controls examples given are known by all of us, so this part was not as relevant as the previous one but it was entertaining.

Last point comes from Bill DeRouchey's experience feedback on frameworks and controls. He mentions the concept of hero task, this is the main task a system has to perform, for example changing volume on a radio, and the design should reflect that hero status. On our GUI, functionalities, buttons that are most often used should be big. The size should be in proportion to the importance.

Since we are at a point of our design that involves making critical decisions, this is probably the right time to discuss some of these points, especially: 

    As the Poka-Yoke Principle makes one consider the relevance of each control at any given time, aren't there some buttons we can remove at some points of our quest? For instance, should the Map and the Find parents remain on the front layer at any time, or could we consider that when the child is busy, he won't need or think of calling his parents?

   The concept of feedforward seems rather important to give used confidence is the use of a system. Since we are dealing with children, and more than half of them might have never used a tablet, should we make the assumption that all children 7-12 will have gone through the learning process of manipulating a tablet and spontaneously think of drag&droping objects, click buttons? Apart from aesthetics considerations, we probably ought to try to get a better understanding of children's mental model of a tablet app.

Persona 3 - Simon, 8

Name: Simon Davidsson
Age: 8
Hometown: Danderyd (Stockholm), Sweden



Background

Simon is 8 years old and lives with his parents and his older sister (Jessica, 12) in a upmarket suburb. He has his own room with the walls colored blue. He has a drum set that he never uses, and posters of Linkin Park and Red Hot Chili Peppers all over the place. He owns an Xbox, an android phone and an Ipad. He uses the Ipad at most when he’s lying in bed and getting ready to sleep. Otherwise, he spends most of his time socializing with friends outside.

Personality
Simon is a stubborn kid, who gets irritated and bored as soon as he has to do something againt his will, like getting dragged to a museum or going to meet his grandparents. He likes playing games on his Xbox and Ipad. He likes riding his bike and pulling pranks with his friends. He doesn’t like school, all of the lessons are boring, except for P.E, lunch and recess.

TodaySimon is in a bad mood today since his parents just told him that he and his sister has to come along with them and go to a museum. Simon doesn’t like getting dragged to a place like this, where there will only be pictures hanging on walls. He expects it to be boring because he has to be quiet and he won’t be able to do anything active. He will most likely just sit somewhere and play Temple Run 2 on his tablet.

Parallel design session - Wild design

The second design in the parallel design exercise was the wild one. We (Victor and Ellinor) teamed up to create a version of the virtual reality-idea where we would push the boundaries of our design. We started the process of "Yes and..." by tossing out the idea that the children would travel through the museum on a conveyer belt, similar to the ones you fetch your bags from after a flight. The children would wear a device similar to the Oculus Rift mentioned in the previous blog post, and perceive a completely different museum than their parents, with added element of an augmented reality. After tossing the ideas back and forth a few times, we came up with the idea of a glass tube that would run along the ceiling of each room throughout the museum. The inspiration to this came from the plastic tubes you can attach to hamster cages to make the hamsters world a bit bigger. In this way we could create an experience for kids without having to create a separate kids area or changing the experience for adults.

The glass in the tubes would work as see-trough displays to give us the opportunity of adding 3D elements to the museum from the children's perspective. These elements would be connected to the exhibitions theme. We created a model to exemplify this. In the pictures below you can view a possible version of how the museum would look if there was an exhibition of animal pictures.

Here we imagined a picture of a lion. From the children's perspective trough the glass of the tube, the lion is coming out of the picture itself into the room. We also discussed that the children might have the possibility of changing the augmented reality by for example poking the screen to scare the lion back into the picture.

We wanted to show that the entire room could be changed to fit the theme of the exhibition, instead of just adding a couple of elements. Here the museum has gotten a grass floor, a camp fire, a river and some forestry on the wall. The tube would of course also have speakers that could convey the sound of a stream and the crackle of the camp fire.

The idea of a tube beat the idea of a conveyer belt since that would minimize the disturbing of other visitors, and also allow the children to move by them selves. It was important for us to - even though this idea is wild - keep our initial focus in mind, where the solution to the problem would make things more interesting for kids without making the museum into a playground.

We also discussed that there would have to be natural stops and exits along the tube, where the children could get some fresh air and speak to their parents. 

We really enjoyed coming up with this concept and even though it's a good idea we think the biggest problem - except from making the technology work - is that it creates an experience where the kids are separated from their parents. One of our key points was to create an experience where the kids would enjoy the museum with parents. If that wasn't  an issue we could just as well create a kids area at the entrance.

Third design - Oculus Rift

We wanted our third design to be halfway between conventional and wild.

After giving some thinking about augmented reality for both previous designs, we mentioned the Oculus Rift. Our third design is based on this technology.

The Oculus Rift is a virtual reality handset designed for video games with 3D rendering and wide field of view (110° diagonal, 90° horizontal). It is like Google Glasses with total immersion and further possibilities in augmented reality. The consumer model of the Rift will be launched April 2015, but an early developer kit's hardware is already available. The VIC Studio at KTH has one. Oculus Rift official Kickstarter page

Based on the paper sketches of previous designs and after watching videos of SIGGRAPH Emerging technologies to warm-up inspiration, we led a new Yes, and... brainstorming session.

We came out with paper sketches of a new design using the Oculus Rift.

The Museum Mystery game is in close accordance with our previous design decisions of providing children with an interactive experience at Fotografiska while staying close enough to their parents. The device includes headphones that improve immersion without preventing the kid from hearing the surrounding sounds, to avoid accidents.

Such a balance could be achieved either by the design here-above of a half-headphone leaving half the ear free, or using a conventional headphones with a sensor that captures ambient noises and add them to the game's audio tracks.

Thanks to the Oculus Rift augmented-reality capabilities, we can render a 3D-world based on the paintings, the walls and the overall environment of the player, thus creating a whole new experience out of reality. The parent can enjoy seeing real painting while the kid can enjoy playing (seeing, hearing, interacting) with art through a quest-based game.

Here above is an example of interactivity, where the player has actions to perform on several successive paintings rendered in 3D through the Oculus Rift. The player could temporarily store items in a virtual bag (bottom right).

Some quests should consist in having some kind of interaction with the parent, which could be a guide or an element of a quest. This way the kid would be forced by the gameplay to stay rather close to the parent. The names of the kid and the parents should be decided at the reception before launching the game (Kid ---> Frodo and Dad ---> Gandalf).

The rift's GUI should also include a possibility of finding the parent from any position in the museum, with 3D rendering of directions to follow.In the end, it could look like the picture below.

The scrolling menus displaying quests could be on a 2D foreground layer, or be a 3D object (the green cube) that the player could manipulate. The inventory could also be a set of squares like in most games. The progress bar with the levels of completion of the overall game should be displayed somewhere, here on the top-left corner. A button for finding the parent (Find Gandalf) should remain visible anytime. The parents should have a location device in their pocket, or a phone with a simple app running.

Using a button raises the question of interactivity, how could you click it? A solution could be the one below.

To solve the problem of kids wanting to touch pictures in the museum, they could handle a multi-functions stick. Depending on the mission, it could be rendered in the Oculus Rift as a sword, wand, pencil (to draw) or laser pointer.

All the game features should have the same purpose: making the child enjoy the visit.

We now feel that we have three solid designs! From those we can extract the best ideas to create a final 'best' design.

Parallel design session - conventional design

During the exercise we split up into two teams wtih one team creating a more conventional design and the other creating a more "extreme" design. In the first team we leveraged existing technologies to design a mobile app.

We chose to try to create a mobile application since we found during our research that everyone we interviewed had a smartphone and leveraging something existing general-purpose hardware the user already has allows us to focus on just designing the software.

We converged a bit but over time it became more and more clear that we wanted to design an application that is used by both the parents and children but with distinctly different experiences for both groups. When we thought back to our structured findings we identified the need for the children to have their experience at a museum such as Fotografiska clearly structured and that simply looking at the pictures in order is not enough. At the same time, our state of the art analysis summary we found the need to think about interactive experiences at a museum in terms of both isolation from and distraction caused to the environment around the user.

In the end we arrived at using a "gamification" approach for the kids, where they can interact with paintings and solve certain tasks, which would earn them points. At the same time, the parents would be able to locate their children on a map and see their progress. We also found ways to integrate the experiences of both groups by having certain "breakpoints" in the game progress where the children had to, for example, take a photo of their parents and by allowing the parents to view hints that they could use to help their children if they got stuck.

To make the process as interesting as possible we leveraged augmented reality tools to make the environment come alive on the screen and integrate the video feed from the phone's or tablet's camera with moving objects that just appear on the screen. This allows the experience to be as lively and exciting as possible without having to alter the experience of visitors not using the app.

Here are some pictures from our process:

 Above you see a few different screens from the app, which would display the picture via the camera but also show additional content in front, such as an animation or a video. Clues from the video could be used to find the next picture and score points. There is also the possibility of using the headphones to deliver audio clues.

The pictures above are meant as the "breakpoints" or "side quests" where the children have to take a picture of their parents (and possibly have to fit them in a cut out) to ensure that they stay in contact even though they are experiencing the museum in different ways.

The picture above shows both the parent and child view, with the child having to find a picture with a specific symbol above it and the parent monitoring their progress of their child and being notified when they progress.

The concept above is similar, with the children seeing the picture with additional content overlaid to create a story. At the same time they could be told a story through their headphones, which would put the picture in a context.

 The idea above is for the parent app, which would display a map with the position of the parent itself, the child and the next clue. 

One more idea for the parent app. When the child is stuck, the parent would be able to give their child a clue and also be notified when the child finally finds the picture so that they can give them some encouragement

We believe we got many good ideas from the session we had and think that many of them can make their way into the final product, in some shape or form.