HCI with Mobile Devices

Db3020N
2008-2009

COOKERY AID

DESIGN DOCUMENT
Assignment (Part 1)

Group Report By
Phu Tran - 03008709
Lee Elvin -
Yogesh.S.Mangela - 06002585

1
 Table of Contents
Abstract page 3

OVERVIEW

1.1 Introduction page 3

1.2 Full System Details page 3 – 4

1.2.1 Support of the system page 4 – 5

1.3 Identifying the Users page 5 - 6

1.4 Key Tasks page 6

1.5 Contexts of Use page 6 – 7

DESIGN SECTION

2.1 Interface Design page 7

2.2 Source of Information page 7 – 10

2.2.2 Internet web Resources page 10

2.3 Usability page 11

2.4 Design Techniques page 12

2.5 Implementation Environment page 12

2.6 Appendices page 13 - 14

References page 15

2
Abstract

Hello, allow me to introduce you to my team comprises of Phu Tran, Lee

Elvin and Yogesh Mangela. We are third year undergraduate students
taking module ‘HCI with Mobile and Devices. We’ll be working together
and putting a great deal of efforts at producing this report. It is necessary
to complete this assignment in order to get a higher mark for this module.

The report will cover the design, implementation and evaluation of the
user interface to an interactive application of ‘Cookery Aid’. The report
consists of two parts; The Design Document (assignment part1) and Final
Report + Interface Protocol (assignment part 2).

DESIGN DOCUMENT
Let’s talk briefly about how important the user interface to handheld
devices is. Developing a good handheld user interface is often a difficult
task to accomplish. There are many important factors require to be
considering before the design of user interface for a particular product.
However an excellent design interface is generally a successful and
marketable product, while an ordinary or complicated design are usually
failures. So, the question is what makes it a good user interface for the
users?

OVERVIEW
1.1 INTRODUCTION

Let us take a quick look at how we going to approach this report. The
Design Document is information gathering. It requires plenty of research
and good planning, focused on the collection of background information.
Here, first we cover the Overview section and Design section.

1.2 FULL SYSTEM DETAILS

Mobile technology has been growing at a rapid rate to accommodate the

needs and desires of people in obtaining a simpler lifestyle. One example I
3
can present you are the ‘Cookery Aid’ application that we going to design
for. However there are few issues regarding mobile HCI which we going to
covers later on.

We are going to design a user interface for mobile devices. Intend to

applying the interactive application targeting group of handheld devices in
terms of PDAs, Smartphones, iPhone and possibly a handheld game
consoles. The images of Figure 1.0 and 1.1 are an example of devices we
going to deployed our application.

figure 1.0 Sony smartphone XPERIA X1. figure 1.1 Apple

iPhone

4
1.2.1 Support of the system

It is essential to fully recognise the system for which we going to design

the product for. We require identifying the potentials and capability of that
particular product, in order to design and implementation of the user
interface. Few examples we might require to consider taking a look at.

1. Display (screen size)

2. Navigation (how are we going to control the user interface? By touch
screen, button or other methods)
3. Memory (an important factor for the design of user interface)
4. Audio Support (key feature to aid smaller devices)
5. Animation Support (Possibly one of the best feature we craving for in
term of cookery application)

Display – The screen size redefine how a developer design an application

for a particular product. Larger display visibility increasing the details,
result in better usability.

figure 2.0 large screen shows more details. figure 2.1 less detail and
difficult to see.

5
Navigation – A good navigation presumably are simplicity. “By this is
generally meant easy to learn, effective to use, and provide an enjoyable
user experience.” Describe by (Preece, Rogers and Sharp, 2002: 2).

Memory – Greater memory available for handheld devices therefore

further tasks can be executed. These will also improving loading time for
an application.

Audio Support – Considered that visibility are poor on particular mobile

devices or users having bad eyesight then voice narrators are
undoubtedly the best supportive.

Animation support – Contains demonstration and provide guidance in

assisting users to better understanding of instructions.

1.3 Identifying the Users

An interactive ‘Cookery Aid’, a tool which is designed to assist new and

experienced chefs. In fact a convenient personal assistant with capability
of helping user to decide what they would like to choose to cook.

This application ‘Cookery Aid’ generally doesn’t targeting any specific

users. It is suitable for all audience who are interested in cooking. No
matter if you are a novice at cooking, a top chef or in a hurry preparing for
the table. This application provides users with great fun and easy step by
step. Even a 9 year old kid is able to use the application and follows
instructions to support who ever the chef is.

1.4 Key Tasks

Interaction designs are totally intended for the users. So it is

unavoidability trying to understand as much as possible about the users,
what their requirements are, and recognition of their needs and helping
them achieve their goals. Of course we only are able to do this, is to
encounter them by undertaking a questionnaire surveys.

And the conclusion to this is, majority people’s wanting the application
should not be complicated to perform and most important of all, be
interactive and simplicity. Below are some of the things users want the
application to do:

1. Should allow user to search recipe

2. Allow user to enter and delete their own recipe appropriately
6
 3. Allow user to choose different recipe using tick boxes.
4. It should allow user to make recipe favourite.
5. It should allow user to generate recipe using what they have in
hand. i.g; if users have got 2 carrots, green beans it should produce
recipe accordingly.
6. The device itself should be very easy to use and carry, it should be
portable and easy to install with device holder, which comes with
navigation system. i.g holder which comes with navigation system
to hold the device, so it can be moved any where you like.

1.5 Context of Use

It can be used indoor or outdoor.

Needs to be careful when following the systems instruction, while cooking,
and make sure not to drop any ingredient on it. As it can be short circuit.

Make sure you don’t place near fire as it can catch fire, hence the battery
can explode.

Make sure it should not be placed nearby chimney because it can get
vapour and it can get watery hence can get short circuit.

DESIGN SECTION
2.1 Interface design

1. Add voice facility: Instead of user have to read the information and

follow, it can play and stop button which will allow user to play the

recorded human voice.

2. Re-sizeable text and changeable fonts, it should also have the big text,

hence user won’t have visibility problem.

7
3. Make screen bigger: while cooking user might use this device hence

user will have to move from place to place, so it’s good idea to use bigger

screen and resizable fonts.

4. Informative feedback: Once entry has been made to the system it

should show that it is save or, some kind of interactive feedback, to show
that it have accepted the new information. E.g. user adding new recipe, it
should confirm with the user that it has gone through.

2.2 Source of Information

2.2.1 Survey
Users were shown pictures of mobile devices (page 4 and 10), and asked
questions whether they like it or not.

Person1

Q1: What do you think of this new idea of introducing cookery

device?

A1: It’s good, I like the idea of storing recipe, and using it rather than
remembering it, good to know different recipe.

Q2: Do you think it is worth having cookery device how would you
rate, bad, average, good, and very good?

A2: good

Q3: If you were to buy cookery devices how much would you
spend on it?

A3: No more than £50.

Q4: Where would you prefer to install it?

A4: On the freezer it’s easy to look, eye level

8
Q5: what would you like most about it?

A5: The concept of storing different recipe.

Q6: Any changes would you like to make to it?

A6; Yes Screen!

PERSON 2

Q1: What do you think of this new idea of introducing cookery

device?

A1: Ok, human brain is always better than machine.

Q2: Do you think it is worth having cookery device how would you
rate, bad, average, good, very good?

A2: Average

Q3: If you were to buy cookery devices how much would you
spend on it?

A3: < £30

Q4: Where would you prefer to install it?

A4: Freeze

Q5: what would you like most about it?

A5: The device, and the look of it.

9
Q6: Any changes would you like to make to it?

A6: Too small text. Can’t see what’s in the device from few feet.

Person 3

Q1: What do you think of this new idea of introducing cookery

device?

A1: concept is good, to know recipe at you finger tip is really good idea,
you can cook different dishes different time.

Q2: Do you think it is worth having cookery device how would you
rate, bad, average, good, and very good?

A2: Very good

Q3: If you were to buy cookery devices how much would you
spend on it?

A3: less than £40.

Q4: Where would you prefer to install it?

A4: Drawer or shelves

Q5: what would you like most about it?

A5: the device

Q6: Any changes would you like to make to it?

A5: bigger screen, and voice facility,

10
2.2.2 Internet web resourses

http://www.pocketcook.net/pcmobile/Default.aspx?tabid=62
date: 21/10/2008 time:9:30pm

http://www.cs.princeton.edu/aphasia/projects.html
date: 21/10/2008 Time:9:00 pm

Software: http://www.pocketcook.net/pcmobile/Default.aspx?tabid=57
Date: 21/10/2008 Time: 8pm

iPhone: http://www.101cookbooks.com/archives/iphone-recipes-recipe.html
Date: 25/10/2008 Time: 7:30 pm

http://www.101cookbooks.com/archives/iphone-recipes-recipe.html
Date: 28/10/2008 Time: 11:00pm

http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanG
oldenRules.html (eight golden rules foe interface design)
Date: 28/10/2008 time: 10:30pm

www.cs.ubc.ca/nest/imager/tr/2004/moffatt2004/moffatt2004-presentation.ppt
Date :29/10/2008 Time: 7:00pm

http://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-
green.html
Date: 29/10/2008 Time: 7:00 pm

2.3 Usability goals

Successful installing the programme should allow user to star within 5

minute of time, Ready to use. 96% of the time user should be able to
install the system and ready to use.

11
Enter correct information, i.e. if user type’s numbers into text filed than it
should restrict user. It should display alert massage “please enter correct
information”.

It should allow user to recover from error within a minutes.

Most pages are design using relatively big text, for instance desktop,
laptop computers, TV and kiosks etc. Although technology has improved
over the years, it has yet failed to improve mobile devices completely.
Mainly screen are the prime problems in terms of usability goals. Because
of the small screen size it limit the amount of information or pictures that
can be displayed on the mobile device screen. There are other usability
problems they are:

Latest colour mobile devices displays either 4,096(12-bit) or 65,536 on 16-

bit, where as PCs are capable of displaying 16million colours on 32-
bit.

System should allow user to choose form various types of recipe, within
fewer seconds and proceed further.

System will allow user to choose between voice play and mute, i.e if a
user wishes to hear the recipe while preparing for it should allow user to
do so. If user wishes not to listen they should be able to mute the voice.

System should allow user to change the font size.

System should allow user to validate any information’s that are held on
the system according to their needs.

95% of user will be able to find correct recipe

95% of user should be able to navigate easily.

12
95% of user should be able to understand how to user the system.

95% of the user will be able to copy and paste pictures from internet to
the system in < 1/2 minute.

95% of user will be able to copy recipe from the web to the system within
1/2minute.

96% of user will be able to find and select on a desired recipe within 15
seconds.

95% of user will be able to use system effectively and correctly.

Input and output problem:

Typing is relatively slower than PCs; it makes it slower to work on it. For
example, typing paragraph on PC and tying the same paragraph on
mobile will be different.

Using PCs and Mc we are so use to of using mouse, that when use
mobile it’s very difficult to navigate it or to use mobile devices. Mobile
devices have to mouse, using mouse you can copy past and go to any
where on the screen within seconds, on the other hand using mobile to
copy a document or go to on screen to another requires time. It restricts
the interaction between user and the device.

Storage problems, amount of storage is restricted to mobile devices.

Some mobile device user might have to pay for what they have send data
to another user.

Usability:
Time:

To understand what is being access or used user should not

take more than 10 seconds.

to use the applications user should not take more than 1 minute,
in terms of how to use it, and how to install it.

it should not take more than 5 second to go to desire page,

if followed correct links.

System should allow user to recover from error within 30secinds.

Accuracy
13
5% of the user will not be able to navigate their way while
searching for recipe.
4% of user will not be able to install the cookery device properly.
5% of the user will not be able to navigate to a particular page.
i.e. to go to Indian recipe (tikka) 95% of the user will be able to
navigate correctly.
96% of errors should resolve within 1minute.
99% of the user will enable to type in recipe they want. i.e veg-
man-churian etc.
100% of the user will enable to scroll the recipe page to see more
recipes.
Overall success
100% of the user will enable to succeed in searching for a recipe,
when user is unsure how to search, he/she can go to help menu,
to understand the system and will be able to come back what
they were doing earlier, i.e if user is unsure how to sear a recipe,
he would got to help and look for search information, Which
information to search in the search textbox.

System should allow user to stop when ever the want in between
the recipe. It should allow user to bock and forward, when
necessary. i.e system should allow user to go away from the
kitchen environment to
Satisfaction

2.4 Design Techniques

We would like to use storyboard and task analysis for design system.
Storyboard will be appropriate for designing a cookery device, because, I
can relate all story using pictures short text, etc to elaborate design
technique.

Task analysis/Hierarchical task: Using task analysis we can divide

tasks in to sub task. It will help us when we start design, because it
divides tasks in to sub tasks it is actually opening up a system, its like
opening up a machine what’s inside of it, by using task analysis we will
know what are the tasks and what are the priority task we need to
consider to first. Hence it helps in task managing.

14
Prototype: By using prototype we can develop initial product and
demonstrate to user so user can have their say, what they think or the
prototype product, if they require some changes we can change according
to their needs.

Moodboard: Its effective way to use moodboard in the case of cookery

system, using different types of food pictures which portraits emotions.
These images can relate to any age. Moodboard will portrait cookery
systems importance, its easiness to use and its need in today world.

*Design techniques might change according to the system and

user needs*

2.5 Implementation environment:

I will be using Power point or flash because it’s easily available, and it’s
provided all the functions which are needed to design mobile devices.
With flash you can make object move and you can create movie. My
application doesn’t require any other equipment or software.

* Pocket Cook Deluxe Web Edition* is shown to demonstrate how

a real device will look like with real software.

15
2.6 Appendices:

Summery of survey

Q1: What do you think of this new idea of introducing cookery

device?

A1: It’s good, I like the Idea of storing recipe, and using it rather than
remembering it, good to know different recipe.

A1: Ok, human brain is always better than machine.

A1: concept is good, to know recipe at you finger tip is really good idea,
you can cook different dishes different time.

Q2: Do you think it is worth having cookery device how would you
rate, bad, average, good, and very good?

A2: good

A2: Average

A2: Very good

Q3: If you were to buy cookery devices how much would you
spend on it?

A3: No more than £50.

A3: less than £40.

A3: < £30

Q4: Where would you prefer to install it?

A4: On the freezer Its easy to look, eye level

A4: Freeze

A4: Drawer or shelves

Q5: what would you like most about it?

A5: The concept of storing different recipe.

16
A5: The device, and the look of it.

A5: the device

Q6: Any changes would you like to make to it?

A6; Yes Screen

A6: Too small text. Can’t see what’s in the device from few feet.

A5: bigger screen, and voice facility,

Some user really like the idea of having to know different recipe and
storing them for later use, where as some user dislike they though its just
machine and there is no need for such devices. Overall user like the
devices concept, 2 out of 2 saying that it’s good or very good. Cost wise
user said that they wouldn’t spent more than £40, user though its bit
expensive to pay more than £40 for a cookery device. Hence using costly
devise would not be a good idea, it terms of finance. Financial would be a
limitation to the development of the system. Improvement was more in
focus, that they wanted bigger screen and big text so they can look at it
from relatively good distance. One user wanted to see voice
implementation in to the system, so then can hear it and reading at the
same time.

17
REFERENCES

Preece, J. Rogers, Y. and Sharp, H. (2002) Interaction Design: Beyond Human-

Computer Interaction, 1st Edition, New York.

Web resources:
http://www.pocketcook.net/pcmobile/Default.aspx?tabid=62
date: 21/10/2008 time:9:30pm

http://www.cs.princeton.edu/aphasia/projects.html
date: 21/10/2008 Time:9:00 pm

Software: http://www.pocketcook.net/pcmobile/Default.aspx?tabid=57
Date: 21/10/2008 Time: 8pm

iPhone: http://www.101cookbooks.com/archives/iphone-recipes-recipe.html Date:

25/10/2008 Time: 7:30 pm (June 24, 2007 | by Heidi | Filed under Heidi's
Favorites )

http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanG
oldenRules.html (eight golden rules for interface design)
Date: 28/10/2008 time: 10:30pm

www.cs.ubc.ca/nest/imager/tr/2004/moffatt2004/moffatt2004-presentation.ppt
Date :29/10/2008 Time: 7:00pm (Designing ESI Planner, Karyn Moffatt, Joanna
McGrenere, Barbara Purves, Maria Klawe, Department of ComputerSecience
University of British Columbia Canada )

http://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-
green.html
Date: 29/10/2008 Time: 7:00 pm

http://www.usability.gov/analyze/goals.html ( developing usable

and useful websites usability goals )

18
19