When I thought about sounds that I rely on in the kitchen, the first thing came to my mind was my rice cooker. I realize that I rarely look at the screen of my rice cooker and heavily relies on the sound of it. In addition, the rice cooker often gives very inaccurate time estimates and sometimes it would take twice the time as it states, which discourages to look at the display even more.

Here is the p5js prototype.

It does still has the idea of a ‘bar graph’, but I was really trying to imitate how the rice change while during the cooking process. I played around with how the size of rice grows individually, and their arrangement and orientation.

Finally, I chose a constant number of rice throughout the ‘growing process’. Their x and y are almost done in perfect grids, but I added a little randomness to prevent individual rice from looking like rotating while maintaining the ‘uniform’ distribution.

I also wanted to show distinct different from the cooking states and done state, and I thought a background color change is more obvious/powerful than just the pattern change, especially when users are far away from the rice cooker.

Problem

Time management is an important element in cooking. And it can get very difficult when there are multiple things that run spontaneously and need to be kept tracked of. Even through some cooking devices have their own timer, it is still difficult to pay attention to all of them once the there are multiple devices running. In addition, the devices are usually located differently across the kitchen.  Beeping sound is a great reminder, but it is difficult again if the person is deaf and cannot rely on sound.

Solution

One of the solutions is to “combine” the timers and put it into one device. Then, using accessible visual element to make the information comprehensive.

This is a timer made of a 4 digit display, a task button, a rotatory button, and a neo-pixel wheel. It is a device that keeps track of the remaining time of different tasks.  Push the task button to add a timer for a task. Rotate the rotary button to adjust how many hours and minutes the task will last. The new-pixel wheel will light up and reflect the length of the time.Push the rotary button to confirm the time.

Later, simply push the rotary button to go through the tasks and check the remaining time. Again, the neo-pixel wheel will reflect the percentage of time remaining.  Different tasks are indicated by the color shown on the neo-pixel wheel.

When one of the task is done, the new-pixel wheel will roll in circle as a reminder.

But only color is not enough to indicate which task is been done. Therefore, besides the timer device, different colors of LED lights are placed next to the task in the kitchen as a reminder. Such lights are turned on and off manually when the task starts and ends. I think keeping the manual part of control the light can give the user more awareness of the ongoing tasks. There are two designs of such lights. One can sticks to any surface, and one can only be mounted on a specific location like a light bulb. Design 1 offers more flexibility while design 2 is more durable if the tasks or cooking devices are fixed.

Proof of Concept

I made a prototype of the timer on a breadboard. The button on top is the rotary button. The potentiometer represents the turning of the rotary button. And the buttom button is the task button to add new task. The displayed number is a little inconsistent because the potentiometer does not fit well into the breadboard.

In the following videos, I first add a task with its time. I then add another task with another time. Finally, I check the remaining time of the two tasks. The pause before the display of the remaining time of the task is due to the code that run for the neo-pixel wheel which is not used in this prototype.

Use visuals to reflect the state of a state machine that normally uses sound to show state.  If you have your Arduinos, please use hardware.  If not, p5.js or other software on a computer is fine.  Show the state machine in your response, a diagram or words are both fine.

If you’re looking for some cues, 99 Percent Invisible has a great, 15 minute podcast on “Deafspace“.

Questions: I rely on my water boiler, microwave, a kitchen timers to beep at me when certain states are changed.  What’s a visual mechanism that doesn’t require me to simply stand there and wait?  (English expression: “A watched kettle never boils.”)

Due Mon, 14 Sep, 11:59pm.

After reading the forewords and the first chapter, I was amazed at first by the idea that we can learn design elements for real-world interface from interfaces in science-fiction and movies. But then as pointed out in the book, everything designers do before the product is manufactured falls into the realm of speculative fiction. Imagination drives the design, and real-world concern controls or withholds the possible and impossible so that the design is doable. I was amazed particularly about the Xenotran Mark II Dynamic Sand Table given as an example that lesson can be learned from X-man or science fiction. First of all, I did not know such a thing exist! A dynamic map that projects up-to-date satellite imagery developed in 2004! Secondly, this makes me rethink the relationship between technology and science fiction. I used to think that new technology is developed due to practical concern for the military, and the technology becomes mature and accessible when the cost falls. But that’s only half of the story, as the military does the same thing as the science fiction writers to find better solutions, only with more resources and commitment to develop the technology.

The best thing I learnt from chapter three is that boundaries of visual interface are wider than I thought. I used to focus more on the function or performance and consider visual interface rather as an mere aesthetic element. However, as shown through chapter three, the combination of elements such as text-based or graphic user interface, typography, color, transparency, and layers not only can convey a feeling for a specific time (futuristic, or a historical time period), but also affect the way users take in information. How to distribute (Overlaying? Spread out spatially?) and present(motion graphics? with glow>) the information has a powerful influence on the utility of the interface. In addition, it is so interesting that some of elements considered futuristic were originally used due to the technical difficulty. Some elements that stray away from the ordinary “future” may also be accepted as futuristic. It shows a dynamic relationships between technology, design, and culture.

I read Exploring Science Through Science Fiction by Professor Luokkala when I took his Science & Science Fiction class, and although these two books study science fictions/sci-fis, they look into very different things. It was interesting to see how the authors of Making It So decided to tackle the structure of their research and presentation. I really like how interfaces in science fiction are studied in a inspiring fashion, i.e. the authors don’t criticize what’s wrong/impossible but what we can learn from them and how they have changed real-world interfaces/products.

What was the most fascinating to me was the amount of data they collected and data visualization. For example, when discussing colors, the authors used color histograms and effectively demonstrated that blue is the most popular color. I knew the psychological fact that blue is the universal preferred color, but I didn’t know that blue was used the most in sci-fi movies due to technology constraints.

After reading Make it so, and about science fiction, I both agree and disagree. Yes, science fiction is loaded with imagination and creativity, and it is rooted in what we have in present; however, I think science fiction became not only predictive but also very cliché. The technology we see and feel from Iron Man may be fascinating, yet the technology from those movies always brushes the mechanism of “how” it works under the rug and shows the sci-fi genius Tony Stark. (and it is always the job of modern-day real engineers to figure out the “how” part.) The depressing part of this, though, is that people just glances and walks pass thinking “meh, I’ve already seen Tony Stark doing it.”
And Make it so also goes over about the interface design and interaction. As great as it seems from the sci-fi movies, it may not be as amazing. For example, those holographic screens that moves with the user’s action. Interaction wise, maybe it’s great that it involves natural interaction, meaning that like Wii from Nintendo, the user naturally figures out because it is in their physical movement. However, the user experience wise, it is not great, indeed, it is very opposite to being friendly. Those hologram panels always appear to be exclusive for those nerdy characters in the movies.
Like I mentioned in my bath buddy presentation, users happen to have some sort of mental model in their minds. The mental model for high-tech panels would be those hologram panels; therefore, the designers present something like a laser keyboard. The thought of it was great, and it perfectly matched the users’ mental model; however, it wasn’t quite successful because the user experience of the keyboard wasn’t a good representation of what people sought for other than looking cool. That is why I think the conceptual model should sometimes look away from people’s expectations because it does not always promise that was exactly what they are looking for.

Make It So’s premise of using sci-fi movies and TV shows to inform real-life interface devices is an extremely interesting and useful lens to view these works! I definitely agree that while not always that realistic, sci-fi is widely creative when it comes to technology and so many ideas from them can be used to derive new devices and interactions.

Many of the trends and lessons brought up articulated feelings I’ve had while watching sci-fi, but never took the time to group and think further on. The move to and away from mechanical controls as well as the seamless coupling of them is something on screen that is reflected in our own lives when we look at the evolution of phones especially. Thinking back, most sci-fi things that I’ve watched have glowing screens often with blue and so I automatically think of the feature shown as advanced when I see this; there’s something about glowing that just makes it seem so much cooler. The use of command line and text based computer control, usually in green, is so ubiquitous that when seen it is an easy assumption to know that someone is hacking into something even without any context. I’ve often seen interface layers for heads up displays and holographic boards, but without the glowing effect, it doesn’t quite invoke the feeling of advanced technology for me anymore from its repeated use because fully manipulable holographic 3D displays have been shown in quite a few things now. To me when done with a cascading 3D effect, file management systems can look futuristic, while  2 1/2 D designs actually make an interface look older. The connections and lessons pointed out so far in this book are fascinating and I look forward to reading more of it:)

Reading:  from “Make It So“, Forward, Chapter 1, Chapter 3.  (Chapter 2 if you have time/interest.)   Post your thoughts on the chapters and content.

Counting:  Once it’s dark outside, turn off the overhead light in your kitchen (or in your room if you don’t have a kitchen) and count the number of lights.  A clock is one light, but if you have status LEDs on electronics, each of those is a light.  You don’t need to post this, but have a list to remind you during class.