Device "Character" Face
Last updated
Last updated
Used Research Methods:
Relevant Research Questions:
What technological solution at the Fontys Strijp TQ building can be used to stimulate the productive feel of the building users?
Knowing that the face animation would be a sequence of frames, I needed to decide how I would visualise the face and in what way I could switch between the faces and the functional screens (like the time picker).
Library: Competitive Analysis
I created a list of other products that use a face feature on a little device. Most representations of this type of feature are AI house robots. There are many variations on the market - from one circle representing an eye (in the Jibo robot) to some detailed faces (Leka and Domgy) to minimalistic two-eyed faces that use negative space to create emotions (EMO, Loona, Vector). I decided to research more into creating a face that uses only simple shapes that represent the eyes. (because I found the style fitted the best to my vision).
I studied how robots of this kind communicate facial expressions by using a combination of simple shapes and negative space (to create the silhouette of eyebrows or cheeks), overlays on top of the eyes and complete screen changes. When thinking of how to create a change between the visual face and the functional screens, I used EMO and Vector as my references. The gif below shows the way EMO switches from his face to a functional screen. I have also applied an image that shows other reactions of the EMO robot, like the way it displays text to "talk".
I also looked into robot sprite sheets to see different emotions.
Having those inspirational elements, I created sketches and digital variations of eyes in order to personally explore the emotions that those shapes could tell. In the images below I have put some examples of the usage of shadows, position in space, etc. to show emotion. (click images to expand)
Next, I began learning Adobe Animate in order to be able to create simple animations for the eyes. I tried different variations of eye shapes and animations. When going into Adobe I used a the following animation as inspiration (link to inspiration video). When the robot is idle, it should use a combination of settled movement and blinking patterns. That is why I first experimented with variations of eye closing and blinking in a combination of small sideways or up/down movements (human behaviour uses eye moves up, down, and sideways so I also wanted to apply this to the buddy eyes). In the end, I tried to create a sideways look to test an abrupt change of emotion. All the results are displayed below.
As a result of the face research, I concluded that I would use two eyes only for the face and have usage of negative space and movement patterns to create emotions. Combining the prototype animator from the last entry I created a random looping eye animations list that would make the robot always move on and look alive. The result is shown below. Even though it is settled, the changing animations could be seen in the difference in the movement.
The other valuable outcome after this prototype was the creation of a screen swap. I have put a gif below that shows the change from the face to the time-picker.
On the side of the buddy software, I had the most important building blocks ready. I had the knowledge of what software I needed to use and I had created small prototypes to validate how to proceed with the feasibility of my choices. Therefore, my next steps were to begin working on the final prototype.
Workshop: Prototyping
