cUIzine: Designing the Interface to an Electronic Cookbook

1
(No Transcript)
2
CUIZINEDesigning the Interface to anElectronic
Cookbook
CS160 Presentation December 9, 1997 Sunny
Consolvo Alan Coopersmith Anthony Polito
Clifford Tham
3
The Problem

• Traditional Paper Cookbook
• Cannot customize recipes
• Sometimes ingredients or terms are unfamiliar
• Extensive glossaries are usually not present
• Recipes and terms may be in more than one book

4
Our solutionan Electronic Cookbook

• Add recipes to database
• Search through recipes using a variety of methods
• Easily access all necessary information to
  prepare the recipes
• Create and print shopping list
• Add personal comments to recipes

5
Representative Tasks

• 3 things we thought users would want to do with
  our cookbook
• Created storyboards showing how we thought the
  users could perform the tasks with the interface
  we designed
• Asked users to complete the tasks in our tests to
  see how well our design worked

6
Our Three Tasks

• Find a recipe for chocolate chip cookies.
• Find out what radicchio is and find a recipe
  using it. Make sure you are comfortable with all
  the ingredients used in the recipe.
• Plan a menu that includes an entrée that uses
  chicken breasts or chicken stock, an alcoholic
  beverage, and a dessert that uses some kind of
  fruit. Give a copy to your friend.

7
First Step Interface Sketches
8
Our Original Design

• Start out at an opening screen that looks like a
  kitchen counter with pictures of a glossary,
  recipe box, etc.

9
Our Original DesignThe Main Screen

• Most of the time in our main screen with a
  toolbar on the left with icons for each major
  feature

10
Our Original DesignThe Recipe Index

• Looks like a familiar recipe box with tabs for
  each category or section of the alphabet
• Allows switching between sorting by category
  alphabetical order

11
Our Original DesignThe Recipe Finder

• Allow searching by ingredient, category or prep
  time
• Showed names and pictures of recipes found

12
Our Original DesignThe Recipe Card

• Used whenever the user selects view recipe from
  one of the other screens
• User can edit the comments section

13
The Original DesignThe Glossary

• Browse all entries or by entry type
• Tab panel to display more information without
  requiring a larger screen

14
Our Original DesignThe Menu Planner

• Group recipes together into a collection for
  making shopping lists, doing nutritional
  analysis, or printing recipes together

15
First round of changes

• Based on feedback from Prof. Landay Jason Hong
  (our TA) on our original sketches and paper
  describing the interfaces
• Biggest changes were to Recipe Finder
• Smaller changes to other screens
• Implemented in low-fidelity prototype

16
First User TestThe Low-Fidelity Prototype

• Took paper sketches and built a paper simulation
  of our design
• Had human playing computer running the
  interface (this implementation had NO BUGS! ?)
• 3 people tried to perform our representative
  tasks with this interface

17
Our Low-Fidelity Prototype
18
Low-Fi Test Results

• Users liked much of our design and were able to
  complete all 3 tasks, but found a number of
  problems
• All of them wanted to go back to the opening
  screen, but couldnt find a way
• Menu planner Add button confused them

19
Online Prototypes

• Moved to creating prototypes with Visual Basic
  5.0 on Windows NT machines
• Using VB allowed quick interface design easy
  integration with Microsoft Access for our Recipes
  Glossary databases
• Using VB also caused lots of frustration

20
Online Prototype Versions

• Version 1 (10/10/97)
• Fixed problems found in low-fi testing
• Version 2 (11/12/97)
• Fixed problems found by classmates evaluating
  Version 1 against heuristic interface guidelines
• Version 3 (12/3/97)
• Fixed problems found by users testing Vers. 2

21
The Evolution of CUIZINE

• Most changes occurred in Recipe Finder and Menu
  Planner
• Several things that were present in the Low-Fi
  prototype got forgotten in first online
  prototypes (e.g. close and print recipe)
• Improved interconnectivity of functionality
• Got feedback after each step

22
The Kitchen

• Original plan opening screen/main menu
• Current implementation Never built

23
The Background Screen
Initial Sketch
Low-Fi Prototype
24
The Background Screen (cont.)
CUIZINE 1.0
CUIZINE 3.0
25
The Recipe Index
Initial Sketch
Low-Fi Prototype
26
The Recipe Index (cont.)
CUIZINE 1.0
CUIZINE 3.0
27
The Recipe Finder
Low-Fi Prototype
Initial Sketch
28
The Recipe Finder (cont.)
CUIZINE 1.0
CUIZINE 3.0
29
The Glossary
Initial Sketch
Low-Fi Prototype
30
The Glossary (cont.)
CUIZINE 1.0
CUIZINE 3.0
31
The Recipe Card
Initial Sketch
Low-Fi Prototype
32
The Recipe Card (cont.)
CUIZINE 2.0
CUIZINE 1.0
33
The Menu
Initial Sketch
Low-Fi Prototype
34
The Menu (cont.)
CUIZINE 1.0
CUIZINE 3.0
35
The Logo Name

• Original
• Revised

T H E R E C I P E F I L E S
36
Demonstration of CUIZINE 3.0
37
Functionality Not Implemented

• Kitchen
• Shopping List
• Print, Save, Help
• Underlining Links/ Links in Instructions
• Nutritional Information/ Substitutions
• Add/ Edit Recipes
• Some Search Options

38
Summary

• CUIZINE has evolved from a rough concept to a
  functional, user friendly, interface
• For more information about our project see
  http//scotland.cs.berkeley.edu/cs160/cuizine/