FoodieLand
The Gesture Control Interface Recipe App — FoodieLand, where the art of cooking meets the magic of technology.
Course
Interaction Design | NUI and Objects | Professor Graham PlumbSkills
Design Research
Prototyping
Style Guide Design
Usability Testing
User Flow Diagramming
User Interface (UI) DesignTools
Figma
Adobe Dimension
Adobe After EffectsProject Timeline
Sep 2023- Oct 2023 (7 weeks)
What’s the problem?
As someone passionate about cooking, I chose to explore the realm of mobile recipe applications as an area of interest.
Cooking often involves messy hands, such as when handling raw ingredients or greasy utensils. Navigating a touchscreen tap app with dirty or wet fingers can be cumbersome and may lead to inaccuracies or errors in input.
About FoodieLand
Say goodbye to messy screens and endless scrolling; with our innovative app, you can navigate through a world of delectable recipes using gestures. Compared with tapping keys on a keyboard, gestural interfaces can include a much wider range of actions, and sometimes feel so natural, that they feel ‘invisible’ to the user. Whether you're a seasoned chef or a kitchen novice, get ready to elevate your cooking experience as you interact with recipes in a whole new way. Let your hands guide you through a world of flavors and creativity.
FoodieLand Concept Video
This video encompasses an introductory segment on FoodieLand, followed by a comprehensive demonstration of the user's interaction with the application through the utilization of gestures.
Onboarding
Given that FoodieLand introduces a novel mode of interaction, we cannot take for granted that users will have prior knowledge of using gestures to control the app. Therefore, the initial flow of the application guides users through a series of tutorial pages, elucidating gestures as the fundamental method of interaction.
The Design Process
1.Gesture Research
The goal of doing research is to produce a gestural language that is learnable, so the gestures must be easily understandable and accessible for users.
I conducted a detailed examination of my actions by recording both myself and a friend while performing a specific task. I meticulously captured screenshots that illustrated the gestures involved in the process. Subsequently, I engaged in a thorough analysis of these recorded actions, diligently documenting each gesture. This method enabled me to gain a deeper understanding of my own behavior.
2. Representing Gestures
In the initial phase of development, I generated preliminary sketches outlining the initial draft of gestures, informed by an in-depth analysis of gestural research. Subsequently, I meticulously crafted more detailed hand-drawn representations of these gestures and captured photographic documentation of my hand movements during their execution.
For each task flow that I designed, I initiated the development of the fundamental visual design elements for FoodieLand. The initial series of wireframes I created for FoodieLand predominantly focused on the onboarding procedures and the initial setup processes.
6. Style Guide and Branding
Task Flow 6:
Browse to Select a Recipe
Wireframes help me to establish the structure and hierarchy of screens. By creating these wireframes, I was able to identify and address potential usability issues and design flaws early in the design process. Wireframes include a visual representation of the layout. They indicate where text, images, and other content will be positioned. Wireframes show the location and basic functionality of interactive elements, such as buttons, forms, and links.
To cultivate the brand vision for FoodieLand, which predominantly features an orange color scheme, I commenced by brainstorming descriptive terms that encapsulate the essence of the app. Among the descriptors that resonated with this vision were words like: creativity, enthusiasm, and warmth, effectively bridging the innovative aspects of the concept with its technological underpinnings.
User testing helps me uncover usability issues and pain points in the interface. I can gather feedback, make necessary adjustments, and retest the design, ensuring that the final product is as user-friendly as possible. A well-tested design leads to higher user satisfaction. My script defines the goals of the user test. It mainly includes a list of task scenarios that users will complete during the test. I find that a user testing script is a valuable tool for conducting structured, consistent, and informative tests.
Takeaway:
It’s crucial to let user feel comfortable while completing the task, specially the speed of the flow. Be careful of the wording of instruction, don’t make user confused.
Within this context, two distinct forms of feedback are discernible. The first is Echo Feedback, which denotes the unprocessed transmission of sensor data back to the user. Essentially, it "echoes" the user's actions without initiating any specific interface function, such as the activation of a button. Echo Feedback serves the purpose of informing the user that the system is cognizant of their interactions, thereby aiding in the user's calibration of their gestural movements.
4. User Flow Diagramming
Task Flow 1:
Watch video
Task Flow 4:
Add to list
3. Designing Feedbacks
5.Wireframes
7. Usability Testing and Revisions
To ensure the effectiveness of these gestures as a means of interaction, I conducted thorough testing sessions with colleagues, soliciting their input on the interpretability and memorability of each gesture. Taking their valuable feedback into consideration, I refined and adjusted the design of certain gestures to enhance their clarity and ease of recollection.
Feedback is a pivotal component within interactive systems, particularly within the realm of gestural interfaces. It is widely recognized that human users necessitate a continuous stream of feedback to successfully execute even the most straightforward tasks. In order to engender a natural and intuitive interactive experience, the provision of ongoing feedback becomes imperative.
Task Flow 5:
Set a timer
Task Flow 3:
View reviews
In contrast, Semantic Feedback represents a refined iteration of feedback. It entails the conversion of processed sensor data into discernible forms, including visual, auditory, or tactile feedback, which is then conveyed to the user. This form of feedback serves to signify to the user that they have successfully executed and completed a specific action within the interface.
Task Flow 2:
Look for instruction of recipe
Reflection
FoodieLand has been one of the most exhilarating and enjoyable projects I've had the privilege to work on. It presented the challenge of surpassing conventional interactions, prompting me to explore innovative design approaches. In a world where our experiences predominantly revolve around 2D interfaces, such as screens, FoodieLand offered an opportunity to contemplate how we can design for a future that reintroduces more meaningful interactions in the right context and at the right time.
As I look ahead, I recognize that there is still much to learn and explore in the realm of design. I am committed to try my best effort to ensure that each project offers a meaningful and engaging user experience while pushing the boundaries of innovation.