HCI_cw

8/14/2019 HCI_cw

1/19

HCI with Mobile Devices

Db3020N

2008-2009

COOKERY AID

DESIGN DOCUMENTAssignment (Part 1)

Group Report By

Phu Tran - 03008709

Lee Elvin -

Yogesh.S.Mangela - 06002585

1

8/14/2019 HCI_cw

2/19

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

8/14/2019 HCI_cw

3/19

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. Well 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 DOCUMENTLets 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 andmarketable 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 theneeds and desires of people in obtaining a simpler lifestyle. One example I

3

8/14/2019 HCI_cw

4/19

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

8/14/2019 HCI_cw

5/19

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 userinterface. 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 touchscreen, 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

8/14/2019 HCI_cw

6/19

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 doesnt 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 forthe 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 peoples 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 recipe2. Allow user to enter and delete their own recipe appropriately

6

8/14/2019 HCI_cw

7/19

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 producerecipe accordingly.

6. The device itself should be very easy to use and carry, it should beportable and easy to install with device holder, which comes withnavigation system. i.g holder which comes with navigation systemto 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 dont 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 wont have visibility problem.

7

8/14/2019 HCI_cw

8/19

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

user will have to move from place to place, so its 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: Its 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 its easy to look, eye level

8

8/14/2019 HCI_cw

9/19

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


device?

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


rate, bad, average, good, very good?

A2: Average


spend on it?

A3: < 30


A4: Freeze


A5: The device, and the look of it.

9

8/14/2019 HCI_cw

10/19


A6: Too small text. Cant see whats in the device from few feet.

Person 3


device?

A1: concept is good, to know recipe at you finger tip is really good idea,

you can cook different dishes different time.



A2: Very good


spend on it?

A3: less than 40.


A4: Drawer or shelves


A5: the device


A5: bigger screen, and voice facility,

10

8/14/2019 HCI_cw

11/19

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
http://www.pocketcook.net/pcmobile/Default.aspx?tabid=62http://www.cs.princeton.edu/aphasia/projects.htmlhttp://www.pocketcook.net/pcmobile/Default.aspx?tabid=57http://www.101cookbooks.com/archives/iphone-recipes-recipe.htmlhttp://www.101cookbooks.com/archives/iphone-recipes-recipe.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://www.cs.ubc.ca/nest/imager/tr/2004/moffatt2004/moffatt2004-presentation.ppthttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://www.pocketcook.net/pcmobile/Default.aspx?tabid=62http://www.cs.princeton.edu/aphasia/projects.htmlhttp://www.pocketcook.net/pcmobile/Default.aspx?tabid=57http://www.101cookbooks.com/archives/iphone-recipes-recipe.htmlhttp://www.101cookbooks.com/archives/iphone-recipes-recipe.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://www.cs.ubc.ca/nest/imager/tr/2004/moffatt2004/moffatt2004-presentation.ppthttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.html

8/14/2019 HCI_cw

12/19

Enter correct information, i.e. if user types 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 usabilityproblems 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, withinfewer 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 informations 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

8/14/2019 HCI_cw

13/19

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 within1/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 its 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 nottake 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

8/14/2019 HCI_cw

14/19

5% of the user will not be able to navigate their way whilesearching 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 tonavigate 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 morerecipes.Overall success100% 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 whatthey were doing earlier, i.e if user is unsure how to sear a recipe,he would got to help and look for search information, Whichinformation to search in the search textbox.

System should allow user to stop when ever the want in betweenthe recipe. It should allow user to bock and forward, whennecessary. i.e system should allow user to go away from thekitchen environment toSatisfaction

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 whats 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

8/14/2019 HCI_cw

15/19

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 its easily available, and its

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 doesnt 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

8/14/2019 HCI_cw

16/19

2.6 Appendices:

Summery of survey


device?

A1: Its 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.



A2: good

A2: Average

A2: Very good


spend on it?

A3: No more than 50.

A3: less than 40.

A3: < 30


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

A4: Freeze

A4: Drawer or shelves


A5: The concept of storing different recipe.

16

8/14/2019 HCI_cw

17/19

A5: The device, and the look of it.

A5: the device


A6; Yes Screen

A6: Too small text. Cant see whats 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 thedevices concept, 2 out of 2 saying that its good or very good. Cost wise

user said that they wouldnt 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

8/14/2019 HCI_cw

18/19

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.pptDate :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 usableand useful websites usability goals )

18
http://www.pocketcook.net/pcmobile/Default.aspx?tabid=62http://www.cs.princeton.edu/aphasia/projects.htmlhttp://www.pocketcook.net/pcmobile/Default.aspx?tabid=57http://www.101cookbooks.com/archives/iphone-recipes-recipe.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://www.cs.ubc.ca/nest/imager/tr/2004/moffatt2004/moffatt2004-presentation.ppthttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://www.usability.gov/analyze/goals.htmlhttp://www.pocketcook.net/pcmobile/Default.aspx?tabid=62http://www.cs.princeton.edu/aphasia/projects.htmlhttp://www.pocketcook.net/pcmobile/Default.aspx?tabid=57http://www.101cookbooks.com/archives/iphone-recipes-recipe.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.htmlhttp://www.cs.ubc.ca/nest/imager/tr/2004/moffatt2004/moffatt2004-presentation.ppthttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://mymobileuniverse.blogspot.com/2008/02/nokia-to-show-future-mobile-green.htmlhttp://www.usability.gov/analyze/goals.html

8/14/2019 HCI_cw

19/19

19

Documents

HCI_cw