University of Birminghamrjh/courses/IntroductionToHCI/2017-18/Submi… · University of Birmingham...

Introduction to Human-Computer Interaction

University of Birmingham

MSc Computer Science

A Comprehensive Online Shopping Website

GroupMember

1796736 Jiayu Liu

1786228 Xinyi Sun

1790944 Yuanzhi Sun


Introduction

Online shopping is a great invention as one of the results of IT development and is very

common in everyone’s daily life. People usually search what they want on various of

shopping websites. Although some of the service providers of these website even have

developed for a dozen years, there is still some problems in helping the customer to

find the best products which exactly match with their expectations especially when

they are buying clothing. Some websites also seem quite unsafe, which may elicit

customers’ worry about the security of their payment information. On the other hand,

the lack of customer credit function may make these websites lose large number of

potential customers.

Furthermore, the general shopping website is not suitable for all users. There are

always different groups with different preferences. In our case, we roughly divided

users into three groups, which main problems occurs in them: the elderly, the

international student, and office worker. For example, the elderly is usually difficult to

use computer, he/she wishes the shopping website can easily read and use. In contract,

the office worker might need more detailed, complex functions to narrow the

difference between shopping online and in physical stores.

To figure out how to improve user experience, this group would like to design an

interface of online shopping website, called IBUY. Compared with existing shopping

website, this website will add new features that help different people group to quickly

find what they want. This website will also introduce more safe payment methods that

focus more on protecting customers' interest. The purpose of our project is not to

create a perfectly sophisticated shopping website. We will introduce various functional

mechanisms in designing of prototypes, which focusing on the problems we hope to

solve.


Research into and review of Related Work

Amazon

Link: http://www.amazon.co.uk

Approach

As an internationally renowned e-commerce platform, Amazon is of course a very

good benchmark. We will briefly introduce how a typical shopping process finished.

When we enter the homepage of Amazon, we can clearly differentiate the two main

parts of it by two bright colours – black and white. The black part is the navigator area,

which comprise a department drop-down button and a standing-out search bar. This

area is mainly focus on assisting the users to locate a specific product (or a specific

type of product). The below area displayed the recommendations. The primary colour

in this area is white, and this colour highlighted the products themselves. If the users

have not log in, the recommendation shows the current best sellers. When users

logged in, the recommendations changed to what may interest the users. The new

recommendations are then based on the products that the users have bought or

browsed.

In the search bar area, when the users type some key words, there will be a pop-up

list consisted of a set of options, this minimize the application of the users’ memory.

Another search method is based on products classification. Users can choose the sub-

menus in the department drop-list to locate the specific type of product.

The detailed product page is made up of three parts – pictures and brief information,

concrete specifications, and the users reviews respectively. When users have decided

to buy any product, they can put It into a shopping basket. Finally, users can proceed

to the checkout procedure. In the checkout procedure, the users need to provide a

debit or credit card details if they have not bind a payment card with their account

before.

Strengths

The website is visually auto-adaptive wherever in narrow-screen or wide-screen.

It means users can take full advantage of the wide space provided by wide-screen

and get more information. This can be a foundation for good shopping experience.


The user interface is clean and neat. The main colours are black, white and grey,

and this can highlight the products.

There is a drop-down list of product section, “Shop by department”, which is very

conspicuous, and the submenu almost appears at the same time you hover the

mouse over one of the product section. The response speed is super-fast.

When we open the book section, the default search bar will change to book

accordingly, this help user to search more efficiently.

The category of a certain product section is very detailed, which can satisfy most

people’s classification needs. The classifications driven by ratings of customer

review and price range are very useful.


The original price and current price are

differentiated very clearly, and the current price

are highlighted as well.

Some information of a product will float at the

top when you scroll down the screen.

Amazon’s users can write comment with

pictures for the product they have bought, this

is a good mechanism for users. When users see

the product in a real people’s hand, they will

have some intuitive sense whether the product

is suitable for themselves. After all, the pictures

provided by the sellers might be processed by tools like photoshops.

Weakness

There is no real-time communication with the sellers. When users have questions

about some specifications of some products, the most efficient way is to talk with

the sellers directly. Taking buying clothing as an example, we found that most of

the detailed information pages of clothes only provide a simple size chart, which

is hard for the customers who lack the concept of size to decide which size is the

most suitable one. With the mechanism of real-time communication, customers

can provide the sellers with their measurement data and the sellers can give

professional opinions. This process is a bit like that we talk with the in-store buyer

guide when shopping in a physical store, and we will try to add real-time chat

function in our prototypes.

When users completed the check-out process in Amazon, the money will be

deducted from users’ accounts and transferred to the sellers’ accounts. In fact,

this is not good enough for customers because they do not know if the product

can be delivered safely and intact. To give a real-life example, one of our friends

once bought a cell phone worth more than £500 on Amazon, and he received a

bottle of shower gel instead of a cell phone after he collected the delivery box

from the reception. He complained about it to the Amazon, but Amazon said he

should ask the seller. The seller said it is not their fault, he should ask the delivery

company. At last, he still did not get refunds.

We considered a mechanism might address this problem. The shopping website

plays a role as a guarantee. When users completed check-out, the money should

be deducted and transferred to the website rather than the sellers. After the

sellers received the product, they will confirm the payment, then the money will

be transferred to the sellers. Of course, after a certain period (like 5 days) the

website will recognise the customers have received the product and be satisfied.


Argos

Link: http://www.argos.co.uk

Argos is a well-known chain retailer in the United Kingdom. Its business covers

hardware and tools, auto parts, sports equipment, furniture, decorative materials,

stationery, household appliances, jewelry, handicrafts, photographic equipment and

toys, but food. Customers can either get in the physical store to select goods, or go

shopping online. Argos’s interface is familiar to any other online shopping websites.

Strengths

The interface of home page is clear, simple and intuitional, users can easily read.

Sales and festival offers occupy the most part of home page, which definitely

attracts consumers.

Its category contains all products within their business scope.

At the specified kind of product page, such as televisions, the filtering bar and

sorting bar are both efficient design of usage.

When users browse a product, there will be a pop-up window of consumer service.

It’s an immediate chat that prevent users from waiting for assistance email or

phone call.

At the basket, it’s clear that whether this product is in stock in your recent Argos

stores, then users can easily choose collection or delivery.

Weakness

There are more than one problems of repetition (see screenshots below). One is

the Christmas tag on the top and following Christmas offers area. Another is

application for mobile devices, it appears two times in the home page, and the

first one is dreadfully on an improper position.

The sub-categories of each tag are awfully complex, it might make users impatient.

The sub-categories showed at home page are different from that at the page users

click the same tag (see screenshots below). It might confuse users.

The recommendation part at home page is always in loading. But this might be a

temporary problem.

The searching bar doesn’t have function of speech recognition, it’s inconvenient

for people who have little experience using computer, such as elderly.

There is no delivery track bar in Argos web support.


Argos web. Page1

The Christmas offers occupies a large part of this page, it is appropriate since Christmas is coming, but the

tap of Christmas on last picture is unnecessary.

Common category

bar covers all type

of its business.

Searching bar on the top of

the web, easy to see and use.

Hot sale and recent

festival goods.

Tab of users’ account and

basket. Clear position to see.

Different type to receive

your purchasing, due to

Argos’s unique business

philosophy.

Recent sale information

in the midst of this page.


There should have be recommendations,

but however I refresh this page, this part

is always in loading.

Applications for mobile devices. However,

it’s strange to arrange this bar here. It’s

better to put on bottom of this page.

All kinds of customer service with

clear classifications, follow the

common website design practice.

Repeated content of APP(compared

with the last picture), it’s unnecessary.


Here we take the “technology” tag as example.

There are too many option under sub-tags. It might make users feel dazzled, and be inpatient to read, especially elderly and people who has poor eyesight. It will be better that only present sub-tag in this interface, and show specific options only when users click it. After clicking the technology, it appeared this page. The issue is the menu bar on the left-hand side shows different options compared with that at home page. This might cause confusion of users.

Relative hot sale or discount information in this classification.


The following content that aren’t covered in screenshot are details, questions and answers about the product.

Filtering bar. Users can choose more than one conditions to search efficiently.

Sorting bar. Users can change the sequence of those following products and increase efficiency as well.

Easily know whether this product is in stock in recent store, then can choose either collection or delivery.

Online immediate chat with assistant, users can efficiently inquiry about what they confused.


eBay Link: http://www.ebay.co.uk Strengths: Compared to many other shopping website, eBay has a more stringent

requirement to the sellers as well as the product quality requirements. However, in this respect, Amazon has a higher requirement than eBay since they are product-driven. In other words, product quality of Amazon must have advantages, and preferably the brand. Even so, eBay has its own advantages by comparison Amazon, which is price. The quality of the product should be decent, and has an advantage in price. Therefore, for consumers, if there are concern about the price and want to have quality assurance, eBay would be the better choice.

Moreover, eBay has auction model which many shopping websites do not have. The seller can set an auction time, after the end of it, the transaction would be deal with the highest price. And consumers could also bid on their acceptable prices. In this case, it is both the highest market price and the price that consumers can afford and get a double advantage. This model breaks the usual pricing model, which decided by the sellers, and gives consumers opportunity to set the price themselves. In addition, it might avoid losses for sellers due to not familiar with market price.

Weakness: Once the buyer is offline, the seller’s message disappears automatically and

cannot leave an offline message to the buyer. Therefore, it led to a poor communication between the sellers and buyers, and may not exchange information immediately. It is inconvenience for those customers who are eager to know the product information in a limited time. In addition, emoji cannot be used in eBay. It might easier for buyers and sellers to express their emotions and opinions through the emoji. These might be helpful to smooth unhindered communication.

Customers and sellers cannot add each other as contacts. For sellers, it is crucial to adding customers as contacts for expanding loyal customers and product promotion in the future. It may also be helpful to increasing returning guests. And for customers, some of them prefer a specific style, so if they have a favourite shop, they might want to receive the information of new products, discounts and other updates as soon as possible.

Furthermore, there has no translation interface in eBay. For example, for some foreigners who travel in Britain, they might need to shop online but English is not such good. And eBay does not have a direct translation options as Amazon. Although they can search dictionary, it is not convenient.


Related work conclusion According to our observation of these shopping website, they all has the similar basic function and usage process: 1. Users search their target by using categories or the searching bar. 2. Users enter into the item page to buy immediately or add it to shopping basket. 3. Users pay for their orders with adding address and delivery options. 4. Users checked the delivery track and then received. 5. Uses subsequently write reviews or refund. The all above are the basic function of a shopping website. However, problems often arise in more specific point such as the user cannot contact sellers to deal with query before he/she buy, or even cannot figure out what does mean by the complicated sub-classification of all products. Therefore, the most important conclusion in our research is to satisfy the majority’s requirements, meanwhile consider about the minority users like the elderly. The point of design is not only considering basic functions, but also new mechanism to deal with problems that the current shopping websites haven’t done. Another essential aspect is payment system. In fact, the use of a shopping website could be divided into two main parts: choosing target item and payment. The principle of “no pay no goods” is always the rule of deal, for sure the action of paying and getting would better to be at same time, but this is the most serious issue of current shopping websites. Buyers paid without receiving goods so that they have to bear the any consequence might happen themselves. The online shopping is a reflection of technology development, it should be more convenient and advanced than the traditional shopping ways. Since the face-to-face deal is able to get after paying, the online shopping can achieve it as well. Based on our above conclusion, we generated several goals for designing the first-generation prototype: A clearly read interface and easily understanding functions. Alternative methods for using keyboards. Strengthen online instant interaction between buyers and sellers. More safe payment mechanism. Detailed, convenient delivery track to check.


Analysis of User Requirement

Yui Aragaki

Background

Name: Yui Aragaki

Age: 30

Occupation: Technical Engineer

Technology Level: Good understanding of

computers.

Main points

She is a foreign technical engineer.

She is good at using normal software and the

internet.

She loves online shopping in Japan, but not familiar

with commonly used shopping website in the UK.

She has basic-level understanding of English, but is

not quite sure about what the equivalent English

words are for some product such as a certain style

clothes.

She will spend large time on the one-year project,

and may not have much time shopping at physical

stores. She wants good experience on online

shopping.

Goals

Fast and accurate positioning to target

product when doing online shopping.

Direct and efficient communication with the

sellers.

Description

Yui is a 30 years old technical engineer who comes from Japan. She is sent by the holding company

in Tokyo to the subsidiary in London. She will stay in the UK for almost one year and provide technical

support for a project during this period. This project is quite important, and she will be very busy. She is

very fond of online shopping and she especially like buying clothes.

Yui ‘s personal computer is a latest MacBook Air, which runs macOS Sierra as operation system. It is

bought with standard Apple software (e.g. web browser Safari, which support all common technologies

such as microphones). This notebook also has built-in microphone and speaker, which means she can

interact with computer without wired earphones.


Frustration and pain points

All the interfaces of shopping websites in the

UK are English-based, and sometimes she

gets confused about how to find the target

products.

When she has question to a product, she

always wants to communication with the

sellers immediately, although many

shopping websites do not have this function.

Her bank account is deducted and be

transferred to the seller at the same time

she checkout online, but she prefers to pay

on delivery.

Scenarios

Search a dress

Yui wishes to buy a Slim Fit Sleeveless Dress on our shopping website, and she will wear it at the

company’s annual dinner next week. When she opens the homepage, she feels difficult to express this

style of dress in English in the text search bar. then she finds a voice input button. She moves the mouse

over it and a tip box pop up, the tip box hints her that she can click to choose a language and go on

voice search by that language. She clicks the Japanese flag and then the tip box proceeds to the voice

recognition process. She speaks to PC the Japanese expression of that type of dress. Then web redirects

users to the search result page. In the result page, she finds out that those dress are exactly what she

wants, and she is happy about that.

Communication the seller

She takes a fancy to one “Slim Fit Retro Sleeveless Dress” among those dresses, but she gets a little

confused about the size chart. She wishes to communicate with the seller and she found a live chart

link in the product description page and it shows the customers service stuff is online. She clicked it

and live chat window appears. She sends the seller message about the question and provide the

service staff her measurement data. The service staff tell her the S size is most suitable given her

measurement data.

Scenarios

She wants to buy a Slim Fit Sleeveless Dress,

and she will wear it at the company’s annual

party.

She wants to communicate with the seller.


Lee Ge

Background

Name: Lee Ge

Age: 21

Nationality: Korea

Occupation: undergraduate student

Main points

Is an introvert person, has slight social phobia.

Can skilled use computer and internet.

Was crazy about online shopping in his home

country.

Is a person who pursue perfection.

Description

Lee Ge is a 22-year-old international exchange student from Korea. He will study in Birmingham university

for one year and now he has been to Birmingham. He is too introvert to hang out with his classmates, he

prefers to stay home and play computer games at his spare time. By the way, he is an excellent player of

League of Legends.

Because of his social phobia, he always tries to avoid any unnecessary touch with others. Even shopping such

a daily behaviour is hard to him, however, he can still handle a non-face-to face conversation. For sure this is

the most reason he loves online shopping.

However, Lee Ge also has some difficulties of English, that makes him cannot smoothly use these websites.

At very first he doesn’t know an authentic word about the object he wants when he uses the search bar.

Namely, those classification full of specialized description dreadfully confuse him.

Moreover, compared shopping websites that he used to, here he must pay before he gets the object, that

makes him feel unsafe. He insists on delivery versus payment. Lee Ge really want a shopping website that

more suitable for him, since online shopping is nearly the most important aspect in his life.

Goals:

Easily complete his exchange year alone.

Decrease face-to-face meeting with

other people.

Work in a game design company.



Poor English caused difficult shopping

process.

Dislike operating mode of UK’s shopping

website, especially a complicated

category.

Feel uncomfortable every time paying

online.

Scenarios

Language switch

This is the second day that Lee Ge have been to Birmingham. After a long-time flying and

moving to his accommodation, he is too tired to go out shopping. Thus, he decided to shop

online, which is more easily, just like he used to do in home. However, he has so many stuff

must buy, it’s terrible to check everything in English and search online one by one.

Function of delayed payment

Lee Ge has bought the first good on an unknown shopping website, and he astonishingly found

he paid money immediately when he checked out. That made him feel disturbed and unsafe.

Unfortunately, the seller is a liar, he deliberates such payment and cancelled his account. Now

Lee Ge is laboriously solving this situation.

Delivery track under the order

Now Lee Ge has tried several different type shopping websites. The issues trouble him is not

all websites will provide clear delivery track on their own page. He purchased a bath cream on

its brand official website, but received nor delivery number, neither the good at last, he knows

nothing about the process. One day afterwards he received refund of the bath cream without

any email or phone call. This failure shopping increased his requirements of delivery track on

the shopping website, he even can’t tolerant check delivery on express web by himself.

Scenarios

Language switch




Amy

Background

Name: Amy

Age: 75

Nationality: UK

Occupation: retired

Main points

Her memory is not very good and sometimes

forgets what she has done.

She suffered from poor eyesight and need

reading glasses.

Her fingers are not very flexible caused by

arthritis, so it is not very convenient to use a

cell phone or computer.

She is not good at using new technology.

Description

Amy is 75 years old and has two children and several grandchildren. She lives alone most of time since

the death of her husband. Her children and grandchildren visit her when they are available, and they would

also bring some daily necessities. However, her children’s work is getting busy lately. She does not want to

bother her children and interrupt their work because her reasons all the time. Although her children do not

matter, she wants shopping online by herself so that she can buy some daily necessities and foods online.

Amy’s eyes are getting worse and need reading glasses to read. Also, her cell phone uses the largest

font. She complained that the interface of the current shopping websites is too fancy and complicated to

read. Her eyes would be tired after looking the websites after a while.

Amy lives away from the city centre, so couriers do not come directly to the home but put parcels in

collecting point where people can take it themselves. However, Amy’s memory is not very good. She always

forgets that she has bought something and did not take it.

Goals:

She wants shopping online by herself.

Maintained independence.

Someone can remind her to get the

parcel.


According to our analysis of user requirements, we divided them roughly by three main groups, and generate three representative personas:

The white-collar lady —— the office workers

The international student —— the non-native users

The old lady —— the elderly/people who is unexperienced with computer

The above classification might contain most type of users. Generally, all of them have same requirement about basic function of shopping website,

such as simple but well-structured layout, look through goods easily online, and quick convenient payment, while there are extremely different

preferences from each group. However, it’s difficult to contains all features that content each group in each first-generation prototype. Thus, we

decided to generate three prototypes based on different target group, and only aims to solve problems arising in this specified group.


The interface of shopping website is too

complex for her to read easily.

The menu of shopping websites is too

small.

It is distressed for her that often forgets

what she bought.

Scenarios

Poor eyesight

It is limited sale today, Amy wants to buy some foods and a vacuum cleaner. However, she

cannot find her reading glasses. Time is not very bounteous, only two hours left, Amy wants

to find the products quickly, but the list of the shopping website is too complicated for her.

Bad memory

Amy’s memory is getting worse due to the age. Moreover, because Amy lives in a remote

place, courier usually not deliver the parcel to her home, but has a special collect place. Once

time she forgot that she had bought a set of pot online, and bought it again.

Hard to search

She tried several times using a search engine to search for what she wanted to buy. However,

due to hands tremble and she is not good at computers, it is always need to cost many time

to enter correctly.

Scenarios

Language switch




First generation prototypes

According to Nielsen’s research in 1999, he claimed five rules of website design: The single-most important perspective is download speed. Scrolling must be avoided on navigation pages. In the case of users, the most important they focus on is the actual content in

a webpage. Search mechanisms must be sufficient for any site, specifically it should be

more than about 200 pages. In addition to search function, a strong-sense structure and navigation support

are essential as well, which can lead users to know where they are, where they have been, and where they can go.

Obviously, the Nielsen’s heuristic evaluation developed based on the above rules. Moreover, he also emphasized (1999) that one of potential causes to website failure is terrible interface functionality. Even though our prototypes cannot incarnate all rules above, we would still follow them wherever it should do.


Prototype 1 Presentation

Homepage

This is the category drop list, when click the triangle button, the drop-down list appears, then users can choose the specific category of product. When your mouse is over any category, it will be highlighted.

This is the search box nested with voice search function. User can choose either text search from keyboard or voice search through microphone. When user put mouse over the voice icon, the pop-up will prompt user to choose input language like this: Next step, users can speak out the product name, the default recognition time is 5 seconds. After recognition. A result will appear, users can choose either continue to the search result page or use the voice search again if the result is not expected. Users can also close the pop-up buy click the quit button.

This is the daily sales recommendation area, it will rotate automatically, or users can move back or forward by click the arrow in each side.

These are login/signup and basket button, user can view their own account detail by logging and check what’s in the shopping basket by click the basket button.


Search result

This is the navigator which allows the users to get more accurate search by refined the brands, price colours and so on. Users can click the check box or the links.

The above function area does not change in search result page. The search bar is still in every search result page in case that customers can search other product at any time.

This is the area for the brief information of searched product. They are separated by rectangles. Every single rectangle contains the product’s information about the product name, seller’s name, price (discount sometimes) and customers’ average rating. When users want to go into the details about any product, they can click everywhere within the specific rectangle area.


Detailed product information page

This is the link which shows if the customer service is available now. when users wish to communicate with the sellers about confused parts about this product. If they put mouse over this link, a instruction pop up like this: When users click this link, a chat window will appear (to be illustrated in the next page.

After users completed the choice of options for product detail in the left-hand, they can choose to either buy the product right now or put it in basket and keep looking for other products by clicking these two buttons. If they missed one or more options, a notice word will appear as:

Here show more details about the product, including the basic information, option of size, colour, quantity etc. It may change according to different type of product.

These are the detailed description about this product.


Real-time B2C chat page

Input area, almost include everything a user will need to express their thoughts. We even added a voice chat option, but it may depend on customers service staffs.

We think this live chat function is very practical, because nobody knows more about the product than the sellers, right? This chat window is divided by three parts, this part is the text area which shows the progress of this chat.

This area shows the current product you are querying about. It will appear the same as the window of the service staff’s interface too. This can notice not only the service staff, but also the users.

This is the floating bar which will only be there when the users have one or more live chat in the background. As you can see, the users can choose to minimize the chat window rather than close it in case that they may want to go through the product description and then go back to the chat. Again. When users click this button, it appears like this:


Analysis This prototype mainly shows the basic layout of our shopping website, as well as the features we designed to solve the problems described in the introduction. Our homepage consists of category search, text and voice search, login/signup button, and shopping basket button. User can choose to select the general classification by using the category drop-down menu, or use text search to search specific products. We mainly want to emphasize the voice search function. The voice search is very efficient when users are not sure about the name of the product. This voice search can recognize the description given by the users and match it with the database, and give the users what they want, although it is only in or prototype conception, we have no idea how to realize it. In the detailed page of a product, we would like to show the live chat function between the buyers and the sellers. The problems always happen when users do not understand some specification of a product and place unsatisfied orders. This live chat function is also trying to assist the users to make the right shopping choice. Pros Users can quickly locate to the target product by any of the three search methods, the voice searches’ language switch function also gives a lot convenience for users who’s first language is not English. The live chat function assists the users to choose the right specifications. Cons It is of course not a whole shopping website, the designs of order, payment are still missing. When we are doing this project, we found out a real shopping website cover a lot more details than we thought, and we cannot cover them all. Other problems are about our designs. The category button and voice search are not conspicuous enough, unexperienced users may get confused. The voice search function relies on the hard-ware of the computers too (at least a voice input equipment is necessary). The result may also vary from what the user expected because of the inaccurate voice recognition.


Nielsen Heuristics Evaluation

Criteria Comment

Visibility of System status We do not have status notice.

Match between System and the Real world

The logic of our shopping website is basically the same as how we do shopping in the real world. But for users who lacks experience in online shopping, these online shopping processes are still a bit difficult to understand.

User Control and Freedom Users have several ways to locate to the target product, including category search, text search and voice search. User have some freedom to undo accidental actions like users can redo the voice search again if the result is unexpected.

Consistency and standards The icons, buttons, layout we used in the whole website are similar to what are used in main-stream shopping website. Users with internet experience can understand well.

Error Prevention There are some error preventions for users’ operation errors.

Recognition rather than recall

There is not recognition function, and this website do not minimize the application of user memory.

Flexibility and efficiency to use

Users have search options and have chance to chat with sellers directly, which is flexible in our opinion.

Minimalistic design All the elements and content are designed to assist user to do shopping, although it is not minimalistic design.

Help error recovery If the user did an error in input, such as wrong words spelled for a product. He can re-search in the search bar which is provided in every webpage.

Help & Documentation no help documentation provided.

Conclusion This prototype is a simple version of our shopping website, and it do not cover all functions. In fact, we mainly illustrate how we address the problems defined.


Prototype 2 Presentation

In the case of scenario one, the function users most need is language switch. In English they would use inefficiently, particularly in a hurry situation. Therefore we add the function of “Language Switch” presented by a flag button. The user can change their own language by just easily click the flag. For example, the UK flag implies English now. The user clicks it and a pull-down menu will appear, then choose a flag of that language in need. There is an example of home page in Chinese, after choosing the Chinese flag.

Six Main category bottoms. Click them to approach the pull-down menu of next sub-category.

Searching Bar. Click here and type, users can directly search what they want.

Advertising area, shows the latest information, items and activities.

Shopping cart. Uses can click it to enter cart page, and edit items or check out.

The most different design on home page. This Flag logo present corresponding language. Click it can change another language.


It can be seen that the interface language has switched to Chinese. Now the Ibuy support five languages.

The pull-down menu after clicking it. Choose one flag and change to corresponding language.


In the case of second and third scenario, the Ibuy has the function of remain user’s payment and transfer it to sellers, once the buyer confirms he/she received the package and checked products. Meanwhile, Ibuy provided a rather detailed delivery track system, it will show every step during the process of shipping packages. Here is an example for how this all work. This page is the next page of payment, and the payment process bar suggests where the payment is now. the user won’t worry about what if the seller is a liar anymore, because Ibuy always keeps your payment safe.


This page shows interface of delivery track. Each step of shipping will truthfully be updated, the time even details to minute. The user can clearly know where the package is and can estimate the arriving date. The user could no longer check the shipping process by type the long delivery number on another website, instead, they can check it just click in the corresponding order.

Always with the picture of this product beside the delivery track to present which item is being checking.

Each step in the sipping process, even the time details to minute. If users received package and signed for it, the tracking will also update as following:


After checked items and confirmed receiving package, the user will come to this “order confirmed” page. It can be seen that the user’s payment has been transferred to seller. Compared to the “order placed” interface, there is one more review link, which users can write reviews immediately after checked products.

Same position but different time with the “order placed” page. That is placed time while this is confirmed time.


Analysis This prototype aims to solve issues arise in those three scenarios, rather than work through a whole process of shopping online, which will be presented in the high-level prototype. The prototype one contains three main functions: language switch, delayed payment system and delivery track. In my example it just shows a language-changed home page, exactly the interface language in each page will also change. For the delayed payment system, it provides a safer platform for deal. Moreover, the independent delivery track combined with each order significantly decrease troubles during the periods of waiting shipping. Pros: For an international student like Lee Ge, or any other non-native speakers, a

language switch function is indeed convenient to use, they won’t waste time to look through dictionary or confused by the miscellaneous categories.

The delayed payment system efficiently avoid situation like fraud, our website will never transfer payment to seller until the buyer checked and confirmed items they bought on the “your order” page.

With the delivery track within the Ibuy internal web, buyers won’t need to search their package on the delivery firm’s official website, or by phone call and email, which is definitely inefficient to check out. They only need to click into the order they want to track, any process will update on this page at very first time, if not, the buyer can still choose “contact seller”, have seller to help connected with shipping firm, because sellers have the delivery number.

Cons: All the above design only considers about general users so that it’s unfriendly to

the elderly or the disables, because they are not experienced use Internet and keyboards or are difficult to see the interface clearly.

The current support language is too few, it still cannot perfectly solve this language problem. Moreover, the language only switches the interface language, but words in pictures.

There is too much blank space at the right-hand side on the “order placed” page and “order confirmed” page. That leads to uncoordinated in the whole page.



Criteria Comment

Visibility of System status Basically, any clicking, pulling in our website the new page or new part in the same page will reflect immediately. The only one need more time to load is the delivery track page, since the shipping step might update at any time.


That is what we designed in this prototype. The language switch function can satisfy users from non-English counties. Besides, the foundation design such as category buttons, advertising area, and shopping cart, are all based on real world shopping website. However, for people who is unexperienced to use computer, like the elderly, the difficulties still exist.

User Control and Freedom Users have several ways to locate to the target page, and they can back to any step they need by simply clicking the return button on the left top of the website.

Consistency and standards The the category buttons, shopping cart, login/sign up link and flag icon are all same position, and function in each page. The layout holds same proportion in each page as well.

Error Prevention Exactly in this prototype there is no operation will cause error. These pages only show the result but process of operating.

Recognition rather than recall There is not recognition function, since neither content of interface nor operation in this prototype need to recognize.

Flexibility and efficiency to use This prototype not only consider the minority, in this case is non-English speakers, but still follows the design principle for general users.

Minimalistic design All the elements and content are designed to assist user to read more easily by distinguishing area and highlights important parts. For instance, the font of ”delivery track” used bigger size to imply this is the title and main content of this page; and the flow line with arrows also clearly shows the shipping process.

Help error recovery If the user did an error in input, such as wrong words spelled for a product. He can re-search in the search bar which is provided in every webpage.

Help & Documentation no help documentation provided.

Conclusion This prototype doesn’t contain all the function of our website, it only focuses on problems arise in scenarios. Thus, the uncoordinated issue of connection within each page will be solved in the high-level prototype.


Prototype 3 First generation prototypes Home page

Mail box: This mail box will show your updated message and shopping order when you log in.

Either click pictures or the text box can enter to this classification. There have no more detailed category in this homepage in order to more simple and concise. And customers may have a more detailed classification after click it.

This is the discount area, customer can click anywhere of this picture. For example, many items are discounted at Christmas. If customers want to know more information about these discount products, they can click this area.

The interface of this prototypes will commonly use larger font so that elderly can shop online easier.


The messages and orders pages

You can either click the picture or the text box. Your orders: The number on the red cycle means how many orders you have. It contains the orders that you have paid and those you have placed but not paid yet. You may have more detail information after click on it if you need to. Your messages: The number on the red cycle means how many messages you get. It may be sent from sellers or a parcel track detail.

If you click the “IBUY”, it will return to the home page.

In order to avoid a complicated interface, this page tried to present as few words and information as possible, and it should be the most needed information for the customer.


Shopping page

If you click the “IBUY”, it will return to the home page.

The shopping cart icon with a plus sign: If you want to buy this product and do not need to check more details, you can click this icon and it will add to your shopping cart directly. And if you want two, click twice. The red button: It indicates the number you have already added in shopping cart. The green button: If you regret and do not want this product, you can click this button to cancel it.

You may choose what you want on this category, and the product that meets all your criteria will be shown on the right.


Analysis This prototype mainly targeted at elderly people and people who prefer a simple version. The entire prototype used large fonts, and tried to minimize the lengthy, complicated text. In the home page, we use the combination of picture and text to alternative traditional classification bar which usually only a text. It might be helpful to customers to have a more intuitive and concise understanding to the classification bar. In addition, Mail box functionality has been added. It’s to remind customers who always forget they have bought something, so they can notice that they have some orders if they bought when customers log in into the home page, or it might just some new messages. Also, in the page of order and message, this prototype use the number in the red circle at the right of text box to represent how many messages and orders customers get. Lastly, compared to normal shopping website, our prototype increases three little buttons, a shopping cart with a plus sign and two circles which are red and green. If customers do not need to know more detailed information about this product when they are shopping, they can click the shopping cart with a plus sign to put the product in their shopping cart. For example, a customer usually buys 8 x 330ml Coca-Cola disposable. He has a deep understanding of this product, so that do not have to click in to get more information, he can put the product in his shopping cart directly. It decreases steps of customers shopping, so they may feel easier and more convenient. Pros

The interface of this prototype tried to only give the most needs information to customer in order to the concise layout of interface. Also, it increases the font so that easier to look. These changes may reduce the difficulty, so more elderly can shop online independently. Moreover, this prototype uses the shopping cart with a plus sign to add product to cart by one click, is also in order to more convenient shopping. Cons For the sake of a more concise layout of prototype, some functions that general shopping websites have been cancelled. For example, there has no pull-down menu on the classification bar in the home page, customers have to click into that category if they want a more detailed classification. Although it looks simpler, types of goods in the shopping page would be too broad. In addition, in order to highlight information, this prototype tried to use the largest font, so the interface looks not very attractive and beautiful. Moreover, Although Mail box may remind customers how many orders they have, it also cost more time. Because after customer pace an order, it will always have a number “1” on the Mail box until this order finish. Customers may mistakenly think it is a latest message so click it to check, so that wastes time. Lastly, for the tremor, our group does not find out a suitable solution.



Criteria Comment

Visibility of System status We do not have status notice.


The basic logic and steps are similar with the shopping website in the real world. However, use more picture rather than text, it may helpful to some customers that have trouble on reading complex text.

User Control and Freedom If customers type the wrong word at searching box, it will appear most relative products.

Consistency and standards The icons and layout in the interface are similar with general shopping website.

Error Prevention If customers type the wrong word at searching box, it will appear most relative products.

Recognition rather than recall This prototype does not provide function of searching history.

Flexibility and efficiency to use General customers can easily use our shopping website, and elderly can use smoothly as well.

Minimalistic design Using larger font and button to highlight every options and message. Also, decrease some particular options to have a more concise layout.

Help error recovery If customer accidentally clicked the “add to shopping cart” button one more time, he can click the green button beside to reduce it.

Help & Documentation The pictures of the classification in the home page have text prompts. And it has the hint “search” in the search bar.


First Generation Conclusion So far, we have designed three low-level prototypes. The main tool we use is the Balsamiq Mockups. This is absolutely an excellent application do design interface for our non-designing students. It provides all kinds of frames such as web browser and iPhone screen, and not to mention the large number of icons and symbols. We have debated if we generated several prototypes with completed process (from the homepage to search goods, then paying online, waiting for delivery, finally confirm receiving), or build three completely different prototypes only focusing on corresponding persona and scenarios. In our case, the second thoughts can present our purpose more clearly. However, such choice caused issues when we do Nielsen Heuristics Evaluation that our prototypes cannot reflect some of principles out of ten. Our three prototypes focus on different step of online shopping progress, and the homepage is almost the only common page among these three designs, but there are still significant differences of layout. After analysing their advantages and disadvantages, we eventually decided to remain the following features to the second-generation prototype:

Interface with bigger font, icons and picture instructions. Mail box attention. Language switch function. Delayed payment mechanism. Corresponding delivery track. Refinement menu on the left-hand side of interface. Voice search mechanism. Online intense conversation with sellers. Each feature will be improved in the high-level prototype.


Second generation prototypes TOOLS

Process The second prototype based on the combination of three first prototypes and still used the Balsamiq Mockups [1] tool, try to allow any crowd shopping online easily. In addition, our group used Photoshop [2] to image manipulation, then imported into Balsamiq Mockups. Balsamiq Mockups Evaluation The first reason why we choose Balsamiq Mockups as our prototype tool is that it allows us more flexible to create the image in our mind. Balsamiq Mockups is a rapid wireframing tool, users may restore your idea on the computer like a sketch on white paper. Moreover, it takes less time and energy to modify your design quickly. Therefore, during our development process, if users find something wrong or have a better idea, they can frequently modify without stress. Compared to more complex software, Balsamiq Mockups is very helpful for avoiding wasting time during development process. Lastly, Balsamiq Mockups has a free trial version. Possible Alternatives For the chosen of tools, our group considered other possible alternatives such as Axure RP [3], Pencil Project [4] and Omni Graffle [5]. On the one hand, Axure RP allows users correctly creative and import html prototype based on the web page process, interactive experience design. However, it is much more complicated than Balsamiq Mockups, so that costs more time during development process. On the other hand, Pencil Project provided a prototyping tool in hand drawn style. But it might not have a high quality since our group members are not good at painting. Lastly, although Omni Graffle may create beautiful interface, and also has exquisite template, it is not free. Photoshop Evaluation There are two main reasons why our group used Photoshop. Firstly, many parts of our shopping website need some beautiful pictures and icons to make the interface more attractive. And Photoshop provide intuitive tools and simple templates, so that beginner can also create some perfect works. Secondly, Photoshop allows users to adjust, crop, remove and colorize the picture easily, so that the layout of the prototype would be more conformity. Photoshop has a free trial version as well. Possible Alternatives It has a large amount of chose on manipulating picture tools, such as Hornil StylePix [6] and CorelDRAW [7]. The functions of Hornil StylePix are similar to Photoshop, in order to faster speed, design of Hornil StylePix more focus on less resource consumption. However, Photoshop may provide more beautiful image, and relatively speaking, for the degree of our manipulating on picture, it is quite limited time that Hornil StylePix can save. Therefore, our group chose Photoshop instead of Hornil StylePix. And for the CorelDRAW, our group thought that Photoshop is more professional and easier to use.


[1] https://balsamiq.com/products/ [2] http://www.photoshop.com/ [3] https://www.axure.com/ [4] https://pencil.evolus.vn/ [5] https://www.omnigroup.com/omnigraffle [6] http://hornil.com/products/stylepix/ [7] http://www.corel.com/en/

Zhang and Von (2000) illustrated three challenges to develop and identify design factors:

1. ensure website usability and serviceability to satisfy users.

2. create more stimulating (like sale), visually pleasing (fashionable advertisement),

comprehensive, and commercially viable Websites (what shopping website is).

3. Make the website more attractive, update design through daily-changed public interest,

so that more users might be willing to re-enter this website.

The above is what we should make attention on in designing the second-generation

prototypes. However, as a shopping website, our web not only pursue just re-entering, but

repurchase from customers. Therefore, in addition to website design quality, service quality,

or functionality is another important factor. A previous results（Zhou & Wang, 2009）showed

that, compared with website interface design quality, service quality has significantly stronger

effects on consumers 'trust and satisfaction, both of which lead to their repurchase intention.


WALK-THROUGH PRESENTATION

This is the search box nested with voice search function. User can choose either text search from keyboard or voice search through microphone. When user put mouse over the voice icon, the pop-up will hint user to start voice search in current language (user can switch the language by click the flag in the top) Next step, users can speak out the product name, the default recognition time is 5 seconds. After recognition. A result will appear, users can choose either continue to the search result page or use the voice search again if the result is not expected. Users can also close the pop-up buy click the quit button.

Language switch button. Click it and there will be a pull-down menu of language we support. Click flag to change corresponding language. The default language of the voice search option also changes accordingly at the same time.

Mail box: After you log in, it will show your updated message and order.


A version after switched the language


These numbers show how many orders and messages you have. The “2” means that you have 2 orders. And the “1” means that you get a message.

You can click either the picture or the text box


The above function area does not change in search result page. The search bar is still in every search result page in case that customers can search other product at any time.

This is the navigator which allows the users to get more accurate search by refined the brands, price colours and so on. Users can click the check box or the links.

This is the area for the brief information of searched product. They are separated by rectangles. Every single rectangle contains the product’s information about the product name, seller’s name, price (discount sometimes) and customers’ average rating. When users want to go into the details about any product, they can click everywhere within the specific rectangle area.

The shopping cart icon with a plus sign: If you want to buy this product and do not need to check more details, you can click this icon and it will add to your shopping cart directly. And if you want two, click twice. The red button: It indicates the number you have already added in shopping cart. The green button: If you regret and do not want this product, you can click this button to cancel it.


This is the link which shows if the customer service is available now. when users wish to communicate with the sellers about confused parts about this product. If they put mouse over this link, a instruction pop up like this: When users click this link, a chat window will appear (to be illustrated in the next page.

Here show more details about the product, including the basic information, option of size, colour, quantity etc. It may change according to different type of product.

After users completed the choice of options for product detail in the left-hand, they can choose to either buy the product right now or put it in basket and keep looking for other products by clicking these two buttons. If they missed one or more options, a notice word will appear as:

These are the detailed description about this product.


We think this live chat function is very practical, because nobody knows more about the product than the sellers, right? This chat window is divided by three parts, this part is the text area which shows the progress of this chat.

This area shows the current product you are querying about. It will appear the same as the window of the service staff’s interface too. This can notice not only the service staff, but also the users.

Input area, almost include everything a user will need to express their thoughts. We even added a voice chat option, but it may depend on customers service staffs.

This is the floating bar which will only be there when the users have one or more live chat in the background. As you can see, the users can choose to minimize the chat window rather than close it in case that they may want to go through the product description and then go back to the chat. Again. When users click this button, it appears like this:


There are totally three steps for checking out. First, confirm the order’s details. Second, pay by your combined card to Ibuy. Third, succeed placing the order. After the user finishing shopping and processing to check out, the first payment page appears. There are three main part: address, delivery option and Order information. Clicking the button of “Check Out” to enter next page if only everything in the page is ready.

Order process bar. It shows which step the user is in.

Confirm address. Click “Edit” to edit the current address; if the user would like to add another address, just easily click the “Add New Address”.

Our Ibuy website provides three delivery that differentiated from price and day-cost.

This part is order’s details. The user can add or decrease quantity without back to item page. If website officially provides discount code, the user could enter it in “Promotional Code”. All changes in this part will be automatedly calculated to “Total”.

Red, conspicuous and bold font to clearly shows final price.


This page the second payment page. As is mentioned in first prototype, the user is paying to Ibuy instead of seller. Ibuy not only check the security code when users add or edit card information, but double check it at every time they pay.

The background and font colour of current step will exchange, to clearly shows where users in.

Add New Card: enter card details including number, holder name, expiry date and security code. The added card will directly appear in this area, and its detail can be edited as well.

Enter Security code here and wait for authorization from the bank.

Click it to confirm payment. The payment will succeed only when the security code is right. If it’s wrong, this page will appear again and there will be a red exclamation mark “!” after the security code input frame.

The label of order. This is the last chance to check whether everything is right.


This is the order placed page, also the final step of payment. This page generates order’s number and placed time, which might be useful when contact customer service, and show recommendation related to items the user just bought, and the payment process. As same as the design in first prototype, Ibuy will keep user’s payment temporarily, until the user confirms he/she has receiving and checked what they bought.

Recommendation of related items. Click the picture can directly enter to the corresponding item page.


To check the status of order, the user can either click the mail box or the button of “Your Account”. There will be a list of all orders.

After placed orders, the number will be added, then users can know their updates immediately.

Or users can click this button and enter this page by click “your order” in this pull-down menu.

To be received: contains orders have not been confirmed receiving.

Received: contains orders have been received, and those buttons at the right-hand side will change as following:

This is an order label from “Received”, it’s added in this page after users click the “Confirm receiving”. It can be seen that the content of button menu changed: the “Cancel Order” has been changed to “Refund” and the “Confirm receiving” has been changed to “Write Review”.

Your account: edit user’s information such as address and card.

Your favourite: contains user’s favourite items, easily to find when they want to buy.

Delivery Track: shows detailed shipping process step by step.

Cancel Order: Any time before confirmed receiving. Once the user confirmed, this button will be replaced by refund.

Confirm Receiving: then Ibuy will transfer payment to seller.

Contact Seller: if users would like to enquiry something about items.


This page shows interface of delivery track. Each step of shipping will truthfully be updated, the time even details to minute. The user can clearly know where the package is and can estimate the arriving date. After buyers signed, the shipping status will also reflect It (seeing the last step), and buyers could confirm receiving.


Once the user clicked the “confirm receiving” button presented before, there will jump to the” order confirmed” page. The payment process also completed with transferring users’ payment to sellers. Compared to the “order placed” interface, there is one more review link. If the user does not want to write reviews immediately, he/she could just leave click the ” write review” button on the “your order” page whenever he/she wants.

This time is different from the “order placed” page: that is placed time, while this is confirmed time.

The mail box will also remind users after order confirmed.


Second Generation Prototype Evaluation Plan In the next two parts, we are going to evaluate the second prototype by user testing and persona-driven Heuristics Assessment respectively. User testing is a technique generally used in human computer interactions. The user Testing is contrasted with other inspection methods which are used by experts to evaluate prototypes without involving users. In order to complete the user testing, we are going to design a questionnaire with checkbox and score rating ranging from ‘0’ (Strongly disagree) to ‘5’ (Strongly agree). Secondly, we are going to use the heuristics-based assessment with respect to personas again in the second prototype. The evaluation result will be based on the three user groups as we have defined in the user requirement analysis. As is used before, the Nielsen’s Heuristic evaluation is an informal method of usability analysis. In each of the first-generation prototypes, only one evaluator comment on it. However, four experiments by Nielsen and Molich(1990) implied that individual evaluators did most poor heuristic evaluations and that they only found between 20 and 51% of the usability problems in the interfaces they evaluated. On the contrary, the evaluations from several evaluators to a single evaluation are evaluated rather well. Therefore, we found totally six persons and each two from our three classified groups, to do the same evaluation from their unique opinions. At last, we aggregate their answers to the heuristic evaluation. For the User Testing we will measure the areas of:

✓ First click Testing: A user’s first impression is quite important, especially when how users interact with navigation buttons in homepages. The area where user click first can quantitively help the designers to understand what elements attract users’ attention and what elements are ignored by users.

✓ Efficiency: the efficiency is going to be measured by how many steps the users need to realize the functions we mainly emphasized.

✓ Accuracy: The Accuracy is evaluated by if the users feel difficult to understand the whole process to do shopping on our website.

✓ Recognition: It is evaluated by how much input the users must provide to complete the specific process of online shopping.

✓ Emotional response: the first impressions after the point the user entered our shopping website.

User testing feedback

Firstly, for users who are experienced with using computers and internet feel the layout of this website is clear and the elements are relatively easy to understand. For elderly user group who are unfamiliar with online shopping, the instructions for buttons of functions assist them well to do the right operation.

A problem we found is that for most user groups, especially for peoples who are not native speakers, when they are using the voice search function, it required to be in current language environment, which means they need to close the pop-up window and switch


the language in the top side. This is a little bit convenient. On the other hand, there are only a few languages option, obviously it cannot satisfy people from all over the world. The language switch can only change the universal tag names, after all, this shopping website mainly focus on the UK market. The final search result is still displayed in English, although the pictures of product helps a lot. some users felt the search result pages also have some problems. There is only one product shown in each rectangle, therefore, two or three products can be displayed in one screen for normal monitors. Users usually wish to see more product in one screen because frequently scrolling up or down the mouse can be annoying tasks. Users kind of like the function of live chat with the customer service staff when they come across problems in the detailed product page. They feel it is more efficient to get answers from professionals than learn those specifications by themselves. Some users also mentioned that mechanism of website as a guarantee withhold the money make them feel more comfortable to buy relatively expensive product online, although for new users, they may doubt about the trustworthiness of this website itself. This is a process to build trust between shopping website and users. This question may be out of the range of this project.

Persona-driven Heuristics Assessment ➢ Visibility of System status

We do not have status notice.

➢ Match Between System and the Real World The logics and category are similar with the real world. The language switch function can satisfy users from non-English counties. Besides, the foundation design such as category buttons, advertising area, and shopping cart, are all based on real world shopping website. moreover, the home page use picture instruction as much as possible to convenient people like the elderly.

➢ User Control and Freedom Clicking return button can easily back to the last step you have done. Furthermore, on the product page the user can add or decrease goods quantity by clicking those green or red button. At the payment page that need input security code, it doesn’t matter if users wrongly entered, because they will be back to this page immediately and can re-enter code with attention mark.

➢ Consistency and Standards

The layout and icons are similar with general shopping website, and The category buttons, shopping cart, login/sign up link and flag icon are all same position, and function in each page. The layout holds same proportion in each page as well.


➢ Error Prevention

We do not have error prevention.

➢ Recognition Rather than Recall There are no special information users must remember themselves. Even the order details, which contains most content in it, we present it logically and clearly among all the steps during payment. And there is also a navigation to show the process.

➢ Flexibility and Efficiency of Use

This prototype not only consider the minority, in this case is non-English speakers and the elderly, but still follows the design principle for general users. This is because the general users can also handle the specified designed function for the minority users.

➢ Minimalist Design

All the elements and content are designed to assist user to read more easily by distinguishing area and highlights important parts. For instance, the font of” delivery track” used bigger size to imply this is the title and main content of this page; and the flow line with arrows also clearly shows the shipping process.

➢ Help error recovery If the user did an error in input, such as wrong words spelled for a product. He can re-search in the search bar which is provided in every webpage.

➢ Help and Documentation

no help documentation provided.


Recommendation Compared with mature developed shopping websites with which peoples are familiar nowadays, our shopping website may only be a supplement. What we emphasized is to address those problems we think might influence the users experience. There are tremendous details which need to be considered to complete a design of a real functional shopping website. For example, shopping websites need to consider if they want to give the sellers relative flexible right to design their own layout for the products of their own brands rather than using the same layout in every product pages. In the first prototype, we designed the functions that may be useful not only for the specific user groups of the three personas, but also suitable for general users. We combined those features and designed a relatively completed model for our shopping website. Some questions that may not satisfy the users still exits. For example, the language switch function only provides a few choices, if we need to implement this function in a real shopping website, we need to consider how to display more switch options in an efficient way. Another major falling is that we do not have much goods classifications compared with those real comprehensive shopping websites. This may make our shopping website less attractive to users. For the text search bar, we also do not provide efficient recognitions for user’s input.

Summary Firstly, this report analysed current shopping websites through three examples, Amazon, eBay and Argos. Our group considers these three shopping websites may basically represent most of shopping websites, due to the large amount of users and lots of loyal customers. Based on the understanding of these three websites, we propose three representative personas to reflect three different groups. Our group tried to solve the needs of personas separately in first prototype. Then, according to the combination of three prototypes, and reduce some functional based on the real world, we get our second prototype. Lastly, according to the experience of users, our group evaluated the second prototype. The original intension of our group creative prototype is to strike a balance between the user experience of most general users and the use of niche groups, such as the elderly and foreigners. Although we think that there are still has some drawbacks in our second prototypes according our evaluation, it is closed to our purpose. Actually, our group found that it is hard to balance those groups during our creating process. We even wanted to creative a page that different group can enter different home page according their needs. However, our group found that it is not suitable. On the one hand, there may be some users who think they are discriminated. Secondly, it means that we have to create a new second prototype which is different from our initial purpose. Therefore, although some designs of our prototype which in order to take care of niche groups might be influence the user experience of general users, for example, the large font affecting the overall appearance, our group thought that it has reached our goal roughly.


Some ideas of our prototype may require high technology, such as voice search. However, considered to “siri” in the real world, we think it is achievable. In addition, the real-time communication function is similar to normal social software, so in terms of technology, it is achievable as well. Lastly, turning to the performance of our group, we were discussing the current shopping websites and classification of persons. Then, we finished the first prototype according to different scenarios separately. However, we found that it caused omission and repeating work. Therefore, we adjusted in time and tried to work together in the designing of second prototype. Obviously, it saved lots time of repetitive work and have more ideas as well.


Appendix

Usability Questionnaire

Personal information

Nationality: Gender: □Male □Female

1

How old are you?

□ 0-20 □ 21-30

□ 31-40 □ over 40

2

Are you willing to go on shopping when you first entered this website?

NO □1 □2 □3 □4 □5 Definitely will

3

Are you satisfied with the layout of the homepage?

Very unsatisfied □1 □2 □3 □4 □5 Very satisfied

4

Where will you first click to start shopping on this website (new user)?

□text search bar □voice search button □3category drop menu □recommendation picture

5

Do you get confused using the interface to do shopping?

NO □1 □2 □3 □4 □5 Completed confusion

6

Is the process of online shopping natural and linear?

NO □1 □2 □3 □4 □5 Very natural and linear

7

Other problems you would like to mention:

_______________________________________________________________


Reference

Nielsen, J. (1999). User interface directions for the web. Communications of the ACM, 42(1), 65-72. Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 249-256). ACM. Zhang, P., & Von Dran, G. M. (2000). Satisfiers and dissatisfiers: A two-factor model for website design and evaluation. Journal of the Association for Information Science and Technology, 51(14), 1253-1268. Zhou, T., Lu, Y., & Wang, B. (2009). The relative importance of website design quality and service quality in determining consumers’ online repurchase behavior. Information Systems Management, 26(4), 327-337.

University of Birminghamrjh/courses/IntroductionToHCI/2017-18/Submi… · University of Birmingham...

Documents

Transcript of University of Birminghamrjh/courses/IntroductionToHCI/2017-18/Submi… · University of Birmingham...