university of birmingham msc computer sciencerjh/courses/introductiontohci/2015-16/...introduction...

Introduction to Human-Computer Interaction[键入文字] University of Birmingham

1

University of Birmingham

MSc Computer Science

Introduction to Human-Computer Interaction

Supervisors: Bob Hendley

Group 10

Yifei Huang: 1597826

Xiantao Ge: 1573763

Yafeng Qu: 1600828


2

Contents

Introduction and background ........................................................................................................... 3

Problems definition ........................................................................................................................... 4

Analysis of existing systems with a similar purpose .......................................................................... 5

My tesco (download at app store) ............................................................................................ 5

General approach .............................................................................................................. 5

Amazon ............................................................................................................................. 7

General approach .............................................................................................................. 7

Just eat: ..................................................................................................................................... 9

General approach: ............................................................................................................. 9

Analysis of users requirements ....................................................................................................... 10

Amanda ................................................................................................................................... 10

Bruce ....................................................................................................................................... 12

Chris ................................................................................................................................ 14

prototypes ....................................................................................................................................... 15

Mockup prototype 1 ............................................................................................................... 15

Order System ........................................................................................................................... 16

My Order Form ........................................................................................................................ 20

Search page ..................................................................................................................... 22

Obligation page ............................................................................................................... 23

Back orders ...................................................................................................................... 24

User management System -ME ............................................................................................... 26

Analysis: .................................................................................................................................. 31

Prons： ........................................................................................................................... 32

Cons: ................................................................................................................................ 32

Conclusion ....................................................................................................................... 32

Mockup prototype 2 ............................................................................................................... 34

Order System ........................................................................................................................... 34

Order Form System ................................................................................................................. 38

User management system--ME ............................................................................................... 43

Analysis ................................................................................................................................... 46

Pros.................................................................................................................................. 46

Cons ................................................................................................................................. 46

Conclusion ....................................................................................................................... 46

Usability Test ........................................................................................................................... 48

Tools Analysis .................................................................................................................................. 51

Recommendation ............................................................................................................................ 52

Summary: ........................................................................................................................................ 53

Reference ........................................................................................................................................ 55


3

Introduction and background

With the development of Internet technology, e-commerce in this short ten years we

have been vigorous development. We have witnessed tremendous and vigorous

development of e-commerce in the past 10 years. Online shopping has become has

penetrated into every fields of the modern family, in the mean time, the contradiction

between online and offline can not be neglected.

China, for example, in the past 20 years, consumers’ habits have undergone enormous

changes --- from large supermarket shopping to online shopping, finally turning a circle---

back to the community small convenience store. In 1995, Europe's largest retailer Carrefour

entered China, it’s low prices, comfortable environment and a wealth of merchandise quickly

conquered the Chinese people, foreign supermarkets become really popular in the following

10 years, e-commerce has been used widely since 2005 --- Alibaba, Jingdong, yihaodian.

People's consumption habits have changed, with the strong impact of the electricity supplier,

the rapid decline of physical retail stores and supermarkets is inevitable. In 2012, Carrefour

began stores adjustment, there have been four stores closed in the same year, Home Depot

announced the closure of all seven stores, and withdraw from the Chinese market, the

world's largest retailer Wal-Mart began to adjust the scale of operation in China and began

to take large-scale lay-offs.

However, the electricity supplier is not without its weaknesses, the last one kilometer

is the soft underbelly of electricity supplier, then keep sinking one has become the core

strategy of the Internet giants, and residents of the community have become their

contention entrance, community convenience stores naturally became the main target.

Imagine, When the door of the convenience store was transformed by the Internet, what

changes they can give us?


4

Problems definition

Existing problems: In China, distribution, logistics, Jingdong picking that day, and next

day arrived, in which situation consumers still do not feel convenient, and In Britain the

duration is much longer than china for the consumer to wait for their goods. Imagine a

scenario, if you suddenly remember that the soy is used up and you want to cook tonight,

but you are playing the cards with your friends, at this time, if you have the app and can

place a order, the material needed can you can receive the goods within few hours. What we

want is to overcome the last kilometer pain point.

The next problem is that the existing community is not mature, that is to say, the service

content is not comprehensive (most are the purchasing of goods). The concept of our team is

to establish a brand new community system through Internet, it can not only achieve flow

inlet and services node, but also can carry many goods and services that many traditional

shops can not provide. The core is to explore the human nature and make live more

convenient and comfortable, in a word lazy economy. Web site, app, and local community

service site.


5

Analysis of existing systems with a similar

purpose

My tesco (download at app store)

General approach

The tesco Online Groceries app is

packed with plenty of great features to

make shopping with Tesco quick and

easy. The first time users using the app,

it offers a basic introduction and

straightforward insight concept about

this app.

People can search and shop from

full range of products and have

shopping delivered to doorstep based

on the timemost convenient for the

customers. [1]

http://www.tesco.com/apps/

In the home page ,clickinig the button (three bars) at the top left corner

can open the menu which including the selections:Home, Browse all

groceries, My favourites, Book a slot, Myorders, Promotions,

Clubcard,Help&about. Obviously, when entering this app, the first thing is to

sign in if an return customer or register if a new customer, so these two

selections appear in the first page.

The Basket button is used to check the orders. The unique feature is the

Scan function, which is used to scan the bar code and add it to the basket,

it’s very convenient, Because tesco has many special “wall shop” at many

public places like underground station, whese “walls” are full of pictures of

products and their bar codes, people can using the spare time waiting the

public transport to shop, how amazing the invention is!

Shop special offers can be accessed easily in the home page.


6

Strenghth

✓ The interface is simple and straightforward

✓ The font size, type and color looks professional and appealing

✓The user can directly identify the features of the page when

accessing the homepage and understand if the website covers

everything needed.

✓The creative invention Scan function is quite convenient and

makes the dull waiting public transport time interesting.

✓Registration is available; The user can save the shopping history

and add the potential products to the basket for future shopping.

Weakness

ㄨ The location function only supports a few districts. Thus, the user should use the manual entry

to for most of places, and many places are even not covered, which is not convenient.

ㄨ The user have to register to use it.

ㄨ The limitation of the selections of the franchiser, just the Tesco.

ㄨ The order’s function is simple.


7

Amazon

You can get the amazon APP in the APPLE STORE directly.

General approach

In the home page, users can find that

the page is so clearly and simple. The stuff

in this page is the main activity created by

the amazon, for example, the information

of the big discount. And in the low part of

this page, the recommendations part is

about the things that you may be

interested in, which is auto-generated by

the amazon system according to the user’s

search history and the record of the

buying in the pervious time. This may help

the user get the things they want as quick

as possible.

The search bar is in the top of this

home page. Users can search anything

they want. The label like a camera in the

right side of the search bar is the function

that users can scan the things they have

and search it in amazon to buy a new one

or make a comparison.

Users can create the amazon account

so that they can manage their account

information such as the bank card, the

receive address, the e-mail address and etc. It also can help users to see their shopping

history and trace the stuff that they have already buying to check when they can get it or if

they have already get the things they brought they can give a comment to that stuff to give

other people the general advice.

Amazon is like a supermarket; it contents almost every you want. The system also can

send the advertisement about the new stuff or the information of the discount to the user

via e-mail, however, the advertisement mails are always lying in the junk box.


8

Advantages

✓ The interface is very simple and

straightforward.

✓Users can get the recommendation from

the amazon’s analysis system.

✓The king of the things is rich so that users

can get almost everything they need from

Amazon.

✓Registered users can get many discounts.

✓There’s simply nowhere else that can offer

retailers that kind of built-incustomer base.

✓By estimates there are around 2,000,000

active Amazon sellers.

Disadvantages

ㄨ The speed of the deliver is slow and the

stuff may be damaged during the express.

ㄨ The home page has no text explanation so that less experienced users might have

problems of using this APP.


9

Just eat:

General approach:

Just Eat is an online service acting as a web based intermediarybetween

independent takeaway food outlets and customers. It is headquartered in the UK and

operates in 13 countries in Europe and South America. The platform allows customers to

search for localtake away restaurants to place orders

online, and to choose from pick-up or delivery options.

Advantage:

✓Just eat is belong to the big company O2O. They have

much money to do advertisement, find cooperators and

try new things.

✓Almost everyone in the UK knows Just eat. When

they want to eat something takeaway, they will choose

Just eat as their first choice.

✓A lot of restaurants including almost all the fast food

restaurants join Just eat which makes consumers of the

just eat has too many choices.

Disadvantage:

ㄨ Restaurants who join Just eat cannot get subsidy

from O2O. This will make the price of takeaway be more

expensive than the food in the shop.

ㄨ Just eat is such a big product. It will be very difficult for Just eat to change something

because it will have impression on others’ profit.

ㄨ The app of just eat does not have all the functions

https://en.wikipedia.org/wiki/Intermediary

https://en.wikipedia.org/wiki/Take-out

https://en.wikipedia.org/wiki/United_Kingdom

https://en.wikipedia.org/wiki/Take-out


10

Analysis of users requirements

Amanda

Background

Age: 35

Occupation: Housewife

Technology Level: use

the Facebook and

YouTube

Main Points

Is the modern

housewife

Wants to save time

about her work

One shop does not

meet her

requirements

Goals

Cook nice food for her husband and her

children

Have more time to do her hobbies and

interests

Personal

Amanda is a 35-year-old woman living in the

Birmingham. She has a family with two pretty

daughters and a husband that loves her very much.

Everyday, she goes out to different shop for the

particular things she needs.


11

Frustration and pain points

Tired of going to the different shops

Have just a little time to do what she wants to

do

The shops are too far from her home

Technology

Amanda is a modern housewife, she has her own

Facebook account and she often pays attention to the

new technologies. She is using an iPhone 6s and she

has downloaded many different APPs.

She usually goes to the Amazon to buy some

clothes and shoes for her daughters.

Work

Amanda is a 35-year-old housewife, the main

work for her is to manage her home.

Scenarios

Some important guests come to her home to

have a dinner.

Cook food for her children

Scenarios

Some important guests come to her home to have a dinner.

Amanda has invited some significant guests include her mother, father, uncle, and little brother

etc. The plan of the housewife is that she cooks 6 deferent nice foods which she is good at and

than they can enjoy themselves. However, her mother has another plan, which is that all of

them have the chance to show their cooking skills so that everyone should cook one, the most

delicious in their mind, food. They all agree this dinner plan but the only problem is that the

housewife has not prepared enough ingredients at home. So the housewife has to consider

about how to collect the particular ingredients that they need so that she has to buy it, but the

shops or supermarket are so far from her home.

All she needs are 300g beef steak and 100g tomato for her mother to cook the beef steak and

her father needs 250g rice, 2 eggs and 100g Italian style ham to cook the fry rice. The

housewife’s little brother is good at soup, so he needs 200g button mushroom and 100g baby

potato. Fortunately, all the ingredients for her uncle to cook the pork are prepared yesterday.

At this moment, it is not suitable for the housewife to go outside to buy the list of the

ingredients and the time is 7 o’clock, which doesn’t allow her to take long time to buy all the


12

things and than start the cooking because they want to have a nice dinner before 8 o’clock.

Thus, it is necessary for the housewife to use the APP to order all the ingredients and then the

APP can send all the things to her home as fast as possible, generally less than 20 minutes. The

speed of the delivery is guaranteed.

Cook food for her children.

Amanda has the task to cook breakfast for her children to go to school at 8 a.m. However, she

also wants to sleep more time because of the party last night. So she can use this APP to order

the breakfast for her children. The speed of the deliver is very fast because the breakfast shop

is close to her home so that just after 15 minutes, her children can enjoy the nice breakfast and

then go to school.

Bruce

Background

Age: 23

Occupation:Student

Technology Level:

Specialize in

programming,office

software and some

web technologies

Basic information:

1. International

student from

china.

2. Learning

computer

science of

conversion for

master degree.

3. Living nere the

school.

4. Can not leave

the rise and

chinese trational

food. No

interests on local

food. High

demonding for

food.


13

Goals

1. Finishing the degree well.

2. Build up a strong body.

Frustration and pain points

1.Is bored of go to local shop and spend time and

energy to buy those daily supplies such as food

material, various sauces.

2.Always feeling too tied to shopping around the

local shops.

3.No car and not necessary for him to own a car.

Scenarios

Cook for himself everyday .

Ask for takeaway service.

Personal

Interests: Gym (fitness), which consumes lots of

energy. Playing basketball with other students of

this university.

Technology

Bruce majors in computer science in master

degree, he is full of curiosity in the new

technologies and keep exploring them.

Scenarios

1.Save time save energy: It is a very common situation , Bruce is using up almost all of his

power and feel really tied after fitness finished, but he must walk to the local shop and think

about what to eat tonight and what to buy(as an international student,he can not stand the

local food completely, in a consiquence, he must make food himself). At this moment, he

come up with our app, which provides the function that consumer can order goods online and

pay online. Then the goods will be sent to their house within 30 min. Imagine if he had to go to

the supermarket, it is hard to imagine that he still had the strength to do these things.

2.Really fast and convenient: Bruce is playing poker at weekends, he remembers that the soy

and cooking is used up, but he can not go outside to buy them, this moment , he turns to the

app and order online, the local shop will take the soy and cooking wine to his house before

cooking.


14

3.Customer Tailor: Some times, He wants to have some special food raw material, like Exotic

seafood, animal offal(liver)...but the local people seldom eat them, so they are not avilable in

local shop. But the app is created to build the relation and correlation between consumers and

the shopkeeper. With our app, Bruce just write down a list of grocies which contains the all of

the material he needs next day,So he just need to order the goods using the app one day

ahead.

This function of the community app is also can be used in another situation. Imegining a

picture, one night Bruce wants to make a list which contains the ingredients needed for each

meal of the next week. And he make the order on the community app for each day

respectively. For example , on the Monday, the lunch he needs 250g chicken breast, two green

pepper, 100g tomato, 200g eggplant. He needs 250g salman, 100g chinese chives, a box of

egg(8). So if he make the order in advance on Sunday before 7pm, the next day the stuff of the

local shop would send the package which including all he needs that day.

Chris

Background

Age: 25

Occupation: white collar

worker

School: UCD

Technology level: office

work, program

Main points:

1. Can use app in IOS very

well

2. Have little time at lunch

time

3. Do not have much money

to buy a car

Goals:

1. To have enough time to have

lunch

2. To buy food in his home

3. To buy food quickly when time is

not enough

Case 1:

Chris is an office worker. He has only 1 hour break for lunch

every day, because his work is so busy. It will take him 10

minutes to walk to nearest restaurant (chicken), that means it

will take 20 minutes on the way and he has only 40 minutes to

queue, order food and eat. 40 minutes is not enough to do

these things. One day he finds our app and starts to order lunch

using it. His lunch break at 12:00 every day and he can order his

lunch using our app at 11:30. He can choose chicken, KFC or

whatever he likes and have his lunch at 12:00. For having lunch

usually take bill 20 minutes, every day he can have 40 minutes to

have a nap. In the afternoon, bill feels less tired than before.

Pain points:

1. Do not like walking

Case 2:

Chris is a new office worker and she does not have money to


15

2. Less rest time

3. inconvenient

buy a car. Though Tesco is only 1 km from her home, she

cannot buy too much food material (500g pork, 500g beef,

100g lettuce, 100g carrot) at one time. Every week she

should go to the Tesco many times to buy these thing

because she cannot carry these heavy thing at one time. One

day, she starts to use our app. She bought these food

material using our app from Tesco. Though she does not have

a car, she was not troubled to buy these heavy things. 1

hours after she chose order these material, she received

these thing from courier of Tesco.

Scenarios:

1. takeaway app

2. delivery

3. address located

Case 3:

Chris held a party with his colleague last Sunday. When the

party was going on. Ben found the food which he stored in

his home is not enough. So he uses our app to order 3 family

feast from KFC near his home. The courier delivered the

family feast very fast. And Ben’s colleague would not get

hungry.

prototypes

Mockup prototype 1

Presentation


16

Order System

This is the main menu of our app

At the top of the top of the menu is a function called locate. It is used to find where you are

by chosen and show you the restaurant nearby

This is the locate menu. In this menu, user should

choose their address

When you have chosen your location, you can click ok

to get back to the main menu


17

A cover flow placed under the locate function. The cover flow is used to recommend user

restaurants with the picture.

Some restaurants may not be known by others, but their meal have good taste. This cover

flow can show user some recommended restaurants and he can choose easily.

The part below the cover is restaurants nearby. It will list all the

restaurants in 3km. User can click the name of the restaurant to

access their homepage in our app.

This is the homepage of domino’s Pizza.

At the top of the UI is back which is used to go

back to the main menu.

Then there is the logo of the restaurant.

Comment function is used for user to comment

on the restaurant. If user click on the comment,

he can comment on the quality of the food from

this restaurant. User can also see other’s

comment here to know if the restaurant is good.

Menu is used to show user the menu of the

restaurant.


18

This is the comment function.

User can choose his feeling here after eating the

meal from this restaurant.

When the user click back, he can return to the

homepage of the restaurant.

back means to go back to the homepage.

This is the menu of the restaurant. User can find

which food it has and know the price. If they

choose one the can click it.


19

This is the order UI. If user have chosen the food he

need, he will see this page to confirm the order.

It will show which food they order and show the price.

If the user confirm their order they will click order to

pay for the meal.

If he think it is too expensive or find he orders wrong

food, he should click cancel to cancel the order.


20

My Order Form

The main page of the “order form”

The lable(also a button)”all”

means all of the goods the user

ordered is included. Clicking this

button, the page would turn to

the “all” page, and this is also the

first page of the My Order form.

Clicking the obligation button,

the relevant page would appear.

Clicking the back orders, the

products which is not delivered

would be showed.

Clicking the “magnifier” label,

you can get into the search page,

in which you can search what you

have viewed, ordered, and

bought.

This is the name of the certain

shop, you can press the button

and enter the shop, it’s

convenient for users to get to the

usual place and get the usual

things.

Pressing this button(three points), three selections would appear,

“news”—some information of the productsyou ordered , “home

page” which used to return to the home page, “Me” used to jump

to the users’ private page.


21

This is the first page of the order form- MY order form, which contains th

information related to the goods the customer ordered no matter whether the user have

payed the money, and some other kind of useful information is also provided for users for

better user experience and make it a enjoyed ,convenient thing. Here we divide the form into

three parts, “all”, “obligation”, “back orders”, In this section, the customer can scan every

product ordered in the history under the under the current account. In the certain block of

the item, some basic information is avialible, like the amount, the price,the shop , and the

spefic description of the item. The customers can check the time in some items which are

not delivered, like 4pm-5pm,which means the item would be delivered between 4pm and

5pm.

And if the user want to browse other goods in the shop, it’s convenient

because the shop link is just above the item block, press the arrow and enter the shop to

choose want is needed. And the shop page is displayed on the some next pages.


22

Search page

when pressing the

label”magnifier” the customer

would enter the search page,

at the very above search box, the

name or related information is

inputed and the system would

automatically give some

feedback useful or related for

the customer.

Every picture is a link, pressing

one certain picture can jump to

the relevant product page.

The shop button, the shops you

often “patronize”. Pressing the

button you can enter the shop

and choose product from that

shop.

The button is used to return

to the home page of my

order.


23

The page looks similar with the first page, and the product listed also contains some

information , and the price is most information.

Obligation page

The items in this page is waiting

to check out, the “check out”

button on the certain product is

used to check out the one

certain product.

The “check out all” button is

used to pay for all of the items

which are not payed.

You can also enter the certain

through pressing the shop name

label.


24

Back orders

This page is used to check

whether the goods is delivered,

the time below the amount label

is inform people how long the

goods will be delivered.


25

This is the first page of the shop, all the goods are showed and some user-friendly options do

benefit for customers to shop more efficiently.

Name and icon of the shop.

Search bar, you can search the

products in this shop.

Return to the former page.

The button is a link to the list of

all the products in this shop.

New products in this shop.

Some items have discount.

This list contains some products

you may like, which is judged by

the view and record of the

products you buy.


26

User management System -ME

In this part of our community APP, ME is about the very important information of the

users like the wallet which is about how the users can pay for their orders and the receiver

address.

This prototype just has this several parts. Firstly, the picture of the user face. Users can

upload their own photo here as they like.

Secondly, the wallet. This part is designed for user to pay for their orders and they can

bind their bank cards for the convenience of making the payments.

Thirdly, the coupon. This part is that the user sometime can get some coupons from the

shops for some price reduce or the discount. When users make the payments of their orders

then they can select some coupons to use.


27

When users tap the button of the wallet, the screen will show like this:

Here the balance can be shown so that users can see if they have enough money to

make the payment. They also can use their visa cards to top up the account or they can

withdraw the money in their accounts to their cards.

The button of My Bankcard is to manage the binding bankcards. They can bind or unbind

their cards here.

The button of Pay Management is for the users to set and change their paying password,

which is to enhance the security of this environment.


28

My Bankcard shows the information about the bankcard ready for making the payment.

Here users can see the information of their bankcards for paying and they can add

another cards of remove the cards if they want.


29

When users tap the button of coupons. The specification of the coupons will be shown:

Here users can see the information of the coupons in detail. They can use those

coupons properly according to the information shown.


30

Users can manage their receive address by the button of manage the receive address.

Here is the address management. Users can add their receive addresses so that when

they make the payments of their orders, they can choose this default address instead of

typing the address, which will save much time and improve the efficiency.


31

Analysis:

Our first prototype meets the fundamental demands we raised in the initial stages,

it’s simple compared with the following evolution prototype (from an implementation point

of view):The Order System can find the nearby restaurants, choose location and do the deal

on the app. However, the app is not perfect. UI of the app is not very aesthetic. Some people

may feel inconvenient with some function.

The My Order form offers a clear list of single product for users, and the detail

information of the specific product. Users can also jump to the shop of the product directly

by pressing the link(the name of shop above the product block). The check out page is clear ,

user can pay for single product or all of the products in the basket.

Thus , in this prototype can not realize the package set and does not offer the chance for

people to delete the order.

The User management System has just several functions implemented: The first one is

the big photo of the user, which may increase the individuation of the using experience.The

second one is the button of the wallet and in my point of view, this is one of most significant

part of ME because the wallet is involved in how the users pay for their orders. If the way to

making a payment is too complicated, it may lower the experience of users and even loss

them. So the design is to simplify the steps of paying. The user can bind his bank cards to this

APP and then he can make a quick payment by just tap the button of confirm. The alternative

way is that the user can top up his account and then use the balance to pay for his orders.

The third one is the coupon, which is more like the bonus. It may help the user to get the

favorable price.The last one is the address management, which is like the wallet to help user

save time of making the order.Thus, this System can implement the main functions of the

ideal design.


32

Prons：

1.The interface is very simple so that the users can easily get the point that they want.

2.It’s clear for people to check what they view or order.

3. It’s convenient for user to find the usual shop. It can find the nearby restaurant very

quickly.

4.Many restaurants are recommended by the appComment function can make user

know more about the restaurants which he is not familiar to.

Cons:

1.Locate function may not be convenient. For example, when Bill wants to use

“locate” function, he should firstly choose his country, then choose his city, then choose

his street and finally choose his postcode. It may be too complex to a new user.

2.Too many blank places make the app is not very beautiful. New user may think an

app which uses such simple UI is not professional and lose their belief to our app

.

3.No Picture near the introduction of the restaurant so the user will have no

impression on restaurants recommended.

4.The lack of deleting function makes the business process much more simple, but

may cause the user unsatisfied in some circumstances. Lose the user is losing everything for

app.

5. No help function, which means that users have to solve the problems on their own.

Conclusion

Users have the freedom in using this prototype, they can do almost everything about their


33

accounts management.

The user experience is the most significant point, which need to be improved in the part of help

function.

Heuristic Rating Comment

1.Visibility of System status

These few pictures

near the name of

the restaurant

0 Users cannot know what thing a restaurant which

he has never been to have. And no picture may

make user less interested in the restaurant that he

never been to. The interface is simple to operating,

which is not bad generally, however, some less

experienced users might have no idea of tap the

button to turn to the page they want.

2.Match between System and the Real world

Location stored in

the system may not

enough

0 When user use locate function, he may find he

cannot find his address by chosen in our system. If

a user cannot find his own address, he will have

much problem when he use the app

3.User Control and Freedom

Consumer can only

buy a one type of

food at one time

0 When a user wants to buy a piece of big pizza and

a piece of small pizza, he should firstly pay for

the big one, then pay for the small one but not

pay together

4.Consistency and standards

The app may be

similar to other

app

0 The UI of the app should not be too complex and

too more different than competitors’ product,

because the consumer may not be

accustomed to the new design which is too

new

5.Error prevention

6.Recognition rather than recall

The app has too

many pages

- It may be difficult for a new user to has an

overview of our app. New users will not know

what happened in the end


34

The part below the cover is

restaurants nearby. It will list all

the restaurants in 3km and show

user their logo which can give

user more impression. User can

click the name of the restaurant

to access their homepage in our

7. Flexibility and efficiency of use

8.Aesthetic and minimalistic design

Too many blank

place in some page

- The blank place will make the user feel the

function of the app is very few

9. Help users recognise,

diagnose and recover from

errors

10.Help and

documentation

Mockup prototype 2

Order System

This is the main menu of our

app

At the top of the top of the

menu is a function called

locate. It is used to find where

you are by chosen or GPS and

show you the restaurant

nearby.

A cover flow placed under the

locate function. The cover

flow is used to recommend

user restaurants with the

picture.

Some restaurants may not be

known by others, but their

meal have good taste. This

cover flow can show user

some recommended

restaurants and he can choose

0

-

Only the information of the bank card can be

checked by connecting to the bank system.

No help and documentation are offered.


35

easily.

This is the locate menu.

In this menu, user can locate their address

automatically by GPS and click OK to confirm their

choice.

If the address is located by GPS, the address will shown

in “show your area”. So user can know if the address

located is correct.

User can also choose their address.

This is the homepage of domino’s Pizza.

At the top of the UI is back which is used to go back to

the main menu.

Then there is the logo of the restaurant.


36

Comment function is used for user to comment on the restaurant. If user click on the

comment, he can comment on the quality of the food from this restaurant. User can also see

other’s comment here to know if the restaurant is good.

Menu is used to show user the menu of the restaurant.

The last part is good sold food. The restaurant will recommend some food that sells well in the

shop to give user some advice.

This is the comment function.

When the user click back, he can return to the

homepage of the restaurant.

If user thinks that the rank they choose cannot express his

feelings. He can wright his feeling in the area “YOUR

COMMENT” in less than 20 words.

User can choose his feeling here after eating the meal

from this restaurant.

This is the menu of the restaurant.

back means to go back to the homepage.

User can find which food it has, see the picture of the

food and know the price. If they choose one the can

click it.


37

This is the order UI.

If user have chosen the food he need, he will see this

page to confirm the order.

It will show which food they order and show the price.

If user prefer one more type of food, he can use the

function “you need others” and the UI will turn to the

menu.

If the user confirm their order they will click order to pay

for the meal. If he think it is too expensive or find he

orders wrong food, he should click cancel to cancel the

order.

If you confirm you order you can click order and it will turn

to pay page


38

Order Form System

Prototype2—My order form

“All”

The delete button is added, if the

good is not delivered and it is

alowed to apply return the

money, the “delete” is bright,

and user just press the button

and apply for returning the

money.

The expected time the product

would be delivered.


39

Search

The serach history is added

which can make it clear for user

that what is searched.


40

Obligation and my package

Pressing the “package” button to

switch different packages.

The package button , which is

used to switch to the right page.

Delete the single product if

condition is permissible.


41

Back orders

If the product is not delivered in

time, users can delete the order

unconditional and apply for the

money return.

Some advertisement is added,

this kind of advertisement is not

the traditional, it reminds

customer some special activity or

festivals which give special offers

and discounts.

The “delete”button is added

same as the first page of the my

order form.


42

Shop

The “collect” button is used to

save the shop so that you can

find this shop in the collect list.

The stars is the evalution of this

shop.

The “sort” button offer the

sorted version of different goods.

The “service ” button make user

to contact with the shop and

consult some useful

informantion.


43

User management system--ME

Compared with the first generation prototype, the second generation has some other

functions, which may improve the experience of users.

Here is main interface of ME. Two button, obviously, are added to improve this

application.

The first one is My Favourites. In this part, users can put the shop that gives them good

experience and they want to order the product again to the favourites so that they can

reorder them conveniently.

The Help and feedback section is for the users to give the developers some advice and

get some helps from them. This section can help the developers continuously improve this

APP.


44

When user tap the button of My Favorites. This interface will be shown:

Here is the user interface of the Favourites. The information of the favourite shops are

shown in detail and users can add their favourites if they want.


45

The help and feedback section:

The first button, online service, means that user can connect to the online service to ask

their questions or help the solve some errors about this APP.

The second one means that users can give some advice to the developer to help them

improve this APP.

The last one is some common problems. Users can fine some answers about some

general problems, which may help the users solve the problems on their own.


46

Analysis

The second generation prototype is much better than the first one. The main change

in the 2nd one is added the Delete function which is used to delete the order in some

circumstances. And another added function is that user can view the package ordered, and it

not only makes the check process more convenient but also offers a clear list of the product.

The part of User management system--ME has some improvement of the HEIP section. The

ONLINE SERVER can solve almost all the problems that the user meets during the ordering. The

quick check of the common problem also can help user solve the problems.

The new function of FAVORITIES will help users record the shops and food that they like. Once

the user marked a shop, the user can reorder quickly the next time.

Pros

1.The new function of HELP is powerful.

2.The favourites can improve the user experience.

3.The package viewing function is added.

4.The delete function is added.

Cons

The information can be updated quickly, there is no refresh button. They custom can only

find the information updated on fixed time everyday.

Conclusion

Users have the freedom in using this prototype, they can do almost everything about

their accounts management.

The user experience is the most significant point, which need to be improved in the part

of help function.


47

Heuristic Rating Comment

1.Visibility of System status

These few pictures

near the name of

the restaurant

↑ There are pictures next to all restaurants to give

user an impression to the restaurant

2.Match between System and the Real world

Location stored in

the system may not

enough

↑ A function called locate by GPS is added. When

user cannot find his own address, he can choose

this function and his location could be seen by the

restaurant on the map

3.User Control and Freedom

Consumer can only

buy a one type of

food at one time

↑ Users have the ability to take control of everything

they want.

4.Consistency and standards

The app may be

similar to other

app

- The design of this prototype is very standard and

and all the design elements are common. Users

may be familiar with the design style.

5.Error prevention Users can check the common problem and then

they will know how to avoid the problems.

6.Recognition rather than recall

The app has too

many pages

- It may be difficult for a new user to have an

overview of our app. New users will not know

what happened in the end

7. Flexibility and efficiency of use

8.Aesthetic and minimalistic design

Too many blank

place in some page

↑ Blank places are filled with pictures and new

function, so the user can feel the function of the

app is abundant.

9. Help users

recognise,

Diagnose and

recover from errors

10.Help and

documentation

↑

↑ Only the information of the bank card can be checked by

connecting to the bank system.

↑ The section of HELP is powerful for users to solve their

problems.


48

Usability Test

User: Amanda

Amanda’s first impression of this APP is

very useful and she made positive comments

about the font and the simple design. She is an

experienced user of this type of APPs so she

make an order quickly and then make a

payment, she binds one of her bank card to her

account to pay this order and then delete the

card information. All the process is smooth,

which makes her comfortable about this APPs.

However, she said that if a less experience

user uses this APP, he or she may not happy

with the operation because some buttons are

not in the main page, which needs some jump.

The home page should have some very simple and easy understanding tips to show the

function of all the buttons for the new users. What’s more, the old users can choose to close

those tips.

Scenarios

The user wants to get some help of the account problems

Best way to solve scenario: the user wants to solve the problems about the bank cards binding.

He can tap the HELP AND FEEDBACK button to turn to the HELP page, then he can tap the

common problems to check that if his problem is the common problem, then if his problem is

common, he can try the way written in it to solve his problem. And if not, he can turn to the

pervious page to tap the ONLINE SEVER to get some help from the customer services. They are all

happy to help the user.

Note: just two button, the problems will be solved.


49

User: Bruce Qu

“This app changes my life completely” Bruce said without any exaggeration . It

took him less than 10 minutes to learn how to use the app. The simple flow of registration

and simple ,straightforward design of choosing products made him fall in love with the app

immediately. The first idea he came up with is to order food material tomorrow, thus he

made a list and started to search goods. He found it flexible and conveniently because user

can jump to different pages easily, very fast he finished ordering the goods and pay the

money. The following he get what he want at the appropriate slot when he finished the

course.

However, some embarrassing situation can happen that Bruce wants something new

or he forgets to order something , he still needs to walk to the near shop to buy, if he want to

cook immediately.

Scenarios

The user wants to delete some products.

The way to deal with the situation: The first thing the user needs to do is to Press the

delete button, then the feedback would return to the user immediately, if the product can be

deleteor not.

Special requirements


50

Pressing the dialog box, which can leave message to the supplier and make some special

requirements about the products.

User: Chris

Chris thinks the app is almost good but has some small problems. He pointed that the

blank places is a bit more than what he expected. He thinks some color can be filled in the

blank place to make the user fill more good.

He also thinks that some buttons

which have similar function uses different

name which makes him a bit confused.

He uses a lot of time to use how to

use locate by choose function. A good

news is though he does not know how to

use locate by choose function, He knows

how to use GPS very easily.

Chris also told me that the comment of the restaurant may not be real. We should get

the driving license and telephone number when register to make sure all account is a real

man.

Finally, Chris told me that he feels satisfied with the app. The “recommendation” is a

very cool function which give some new choice to him.

Scenarios

Chris want to eat domino’s pizza using our app. He should do the following steps.

1. Log on his account

2. Locate his address

3. Choose domino by search

4. Find what pizza he wants

5. Add it to the basket

6. Pay for his deal

After that he can wait in his office to have meal.


51

Tools Analysis

Balsamiq mockup:

Advantages:

1. All the component are prepared, we just need to put the component to the blank

place and combine them as an entirety.

2. Mockup is a software used by computer, so it is easy to modify the prototype. It

will not leave anything which you do not want to leave.

Disadvantages:

1. Not all the component we need can be found.

2. There are few things to decorate the page.

Drafting by hand:

Advantages:

1. We can draw what we want. Drafting has limit on what to be drawn. We can put

everything on it.

2. Hand drafting will be more good looking than which is done by computer,

because we can draw something to decorate the blank place.

Disadvantages:

1. Hand drafting is difficult to modify.

2. Hand drafting will spend too much time

Finally, we choose Balsamiq mockup because prototype do not need too many good

looking. Also our hand drafting skill is very poor.


52

Recommendation

Our implementation so far is not enough, still many of the points should be

improved. For example, the less experience users might have problems of using this

APP because they have no idea except the main page. What they need is the

necessary tips beside the important buttons so that they can use this APP to order

what they want properly and quickly.

This APP is a community service APP, so that the all the things in the particular

community should be solved properly. Not just food, the service, like sending

children to school, also should be one of the problems that this APP can solve.

The most important point of this APP is the speed. So we also need to develop a

trace system to trace the situation of the deliver to check if the shop has any delay of

the delivering. The reward and punish system also should be developed according to

the trace system, which means that the fastest one will have some bonus and the

slowest one must take some punishment.

Finally, this APP should be developed to be a real community. All the people belong

to the community should be the member of this service. They can get the service

meanwhile they also can provide the service.


53

Summary:

In general, our app is a good app. We have all the functions which should be needed. The

app is very user friendly. When a user wants to use our app to buy something, he will not do

too many steps. For instance, John want to order food he just need to do the follow steps:

1. Find food on the main page or search food in the search page

2. Find the food which he want in the restaurant

3. Add the food to the basket

4. Pay for the food online

Every consumers can order things which they with the step below.

But before using the order function, a consumer should register and fill his information.

If his address is located, he can order goods without fill so many blanket.

In the evaluation part, we analyze a lot of existing problem. Without evaluation many

problems will not be found by us, such as aesthetics of the UI. We can find the flaw in the

app systematic using these criterions.

However, a lot of mistakes were made at the first. We ignored the demand of other one.

We only do what we think is good. Many small but important bugs were ignored. We just

add everything we think is practical instead of things which looks beautiful. Users not only

need practical functions, but also functions which give them good feelings.

When doing the evaluation to user, some more good advice are given to us. Others can

find the problems which our designers cannot find. Thanks for their advice. Though the users’

evaluation are not as much as enough, out app has been more perfect.

We have many tough problems when we design the app. We start with nothing.


54

Although we can get inspiration from the existing app such as Just eat. We should consider a

lot of things and some conditions which may happen.

Although we know that GPS is not reliable every time, we choose it to simplify the steps

to find the address. This should be welcomed by many people and young people always

thinks that things which are related to the technology is cool. So GPS is a vital function to

attract young people. Also GPS can help ones who do not know his location clearly find his

address.


55

Reference

1. "Hungry Bangalore: Order food online". mybangalore.com. Retrieved 2013-04-27

2. "Just-Eat Raises £10.5 Million". 14 July 2009. Retrieved 24 June 2014

3. "Prime Now". Wired. Retrieved December 22, 2014.

4. Amazon’s One-Hour Delivery Service Goes Live Across Manhattan. Retrieved February

17, 2015

5. Lomas, Natasha (June 30, 2015). "Amazon Takes Prime Now Outside U.S., Opens

One-Hour Delivery In London". TechCrunch. Retrieved July 14, 2015.

6. https://www.google.co.uk/search?q=woman&espv=2&biw=1360&bih=771&tbm=isch&t

bo=u&source=univ&sa=X&ved=0ahUKEwj5ysyjgMLJAhWBkRQKHY3BCtQQsAQIGw#imgr

c=oejUf5jpVoO6_M%3A

7. http://www.tesco.com/apps/android/groceries/

8. "Business as usual for Sir Terry after 10 years in charge". Birmingham Post(Midland

Independent Newspapers). 22 February 2007. p. 24.

9. "Tesco storm the US with Box offering – In-Depth – CIO UK Magazine". Cio.co.uk.

Retrieved 16 April 2010.

http://www.mybangalore.com/article/0609/hungry-bangalore-order-food-online.html

http://privatemarkets.thomsonreuters.com/just-eat-raises-%C2%A3105-million/20023516.article

http://www.wired.com/2014/12/prime-now/

http://techcrunch.com/2015/02/17/amazon-prime-now-one-hour-delivery-goes-live-across-manhattan/?ncid=rss#8dw0GT:n1G

http://techcrunch.com/2015/06/30/prime-now-london/

http://techcrunch.com/2015/06/30/prime-now-london/

https://www.google.co.uk/search?q=woman&espv=2&biw=1360&bih=771&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwj5ysyjgMLJAhWBkRQKHY3BCtQQsAQIGw#imgrc=oejUf5jpVoO6_M%3A



http://www.tesco.com/apps/android/groceries/

http://www.cio.co.uk/article/583/tesco-storm-the-us-with-box-offering/?otc=44

university of birmingham msc computer sciencerjh/courses/introductiontohci/2015-16/...introduction...

Documents