Mm Interactive Assigment C V 2.5

Politecnico di Milano

_____________________________________________________________________
Politecnico Di Milano
Polo Regionale di Como

________________________________________________________________________

MULTIMEDIA INTERACTIVE APPLICATIONS FOR THE WEB AND
MOBILE DEVICES
2007-2008

Assignment C: Design and Prototype Implementation of online Electronics shop
for web channel and mobile Device

Supervisor:
Prof. Paolini Paolo

Submission Date: 06/02/2008

Submitted By
*********************************************************************
ID: 707241 ID: 707775
Ferdous Mohammad Jannatul Shill Pintu Chandra
MS in Computer Engineering MS in Computer Engineering

Prof Paolini Paolo


Index PAGE
Executive Summery………………………………………………………...………………….3
1. Requirement Analysis……………………………………………………...………………..4
1.1 Stakeholders ………………………………………………………...……………..4
1.1.1 Clients ………………………………………………………..………….4
1.1.2 Users…………………………………………………………...…………4
1.2 Interview……………………………………………………………………...……4
1.2.1 Interview Video…………………………………………………………….....4
1.2.2 Plain text format of interview summery……………………………………...5
1.3 User Survey……………………………………………………………………...…6
1.3.1 Questionnaires…………………………………………………………...…6
1.3.2 Analyze Data and Result…………………………………………………...9
1.4 User Profiles………………………………………………………………………12
1.5 Goals…………………………………………………………………………..….12
1.6 Design Consideration and Business Requirements……………………………….13
1.7 Content……………………………………………………………………………14
1.8 Matrix: Users vs. Goal……………………………………………………………15
1.9 Scenarios………………………………………………………………………….15
2. Design for web application………………………………………………………………...16
2.1 Conceptual…………………………………………………………………….….16
2.1.1 Diagram……………………………………………………………..…..16
2.1.2 Textual description……………………………………………………...18
2.2 Logical…………………………………………………………………………....20
2.1.1 Diagram……………………………………………………………..…..20
2.1.2 Textual description………………………………………………….…..22
2.3 Organization of the whole website………………………………………………..25
2.4 Landmarks………………………………………………………………………...27
2.5 Homepage Design………………………………………………………………..28
2.6 Other Page Design ……………………………………………………………….29
3. Design for mobile web interface………………………………………………………...... 36
3.1 Conceptual………………………………………………………………………..36
3.1.1 Diagram………………………………………………………………....36
3.1.2 Textual description……………………………………………………..38
3.2 Logical…………………………………………………………………………....39
3.2.1 Diagram………………………………………………………………....39
3.2.2 Textual description……………………………………………………...41
3.3 Organization of the whole website………………………………………………..43
3.4 Landmarks………………………………………………………………………...45
3.5 Homepage Design………………………………………………………………...46
3.6 Other Page Design ………………………………………………………….……47
4. Prototype application………………………………………………………………………53
4.1 Technology and Tools…………………………………………………………….53
4.1.1 Web application………………………………………………………...53
4.1.2 Mobile Web application………………………………………………...53
4.2 Sample screenshot of the web…………………………………………………….54
4.3 Sample screenshot of the mobile…………………………………………………57
5. Conclusions……………………………………………………………………………….59
Appendix…………………………………………………………………………………...…60

Prof Paolini Paol 2


Executive Summery
The goal of this project was to identify goal & user segments, taking stakeholder interview to
gather requirement, user survey, scenario, services of the on line electronics shopping in the
requirement analysis phase and establish a conceptual, logical, overall structural organization
(page design) in the design phase, implementing interactive prototype or mock-up of online
electronics shopping website for both mobile and web channel. In the online electronics
shopping, the principal contents are identified by electronics products, brands of the
electronics products, category of the products and services of the company. Some additional
contents are present to provide general information about the selling company, shopping
instruction, payments, customer support, shipping rates, returns policy, privacy statements
and contacts. Actually, online electronics shopping company attracts the potential customers
with specific brand, category, payment methods and delivery their services.

In the conceptual design where the content of the on line electronics shopping website is
partitioned into single topics such as contacts, company, shopping instructions, payments,
customer support etc. and multiple topics such as product, brand etc. and the relevant relation
such as makes etc. between the multiple topics. In order to navigation purpose, conceptual
design also represents some group of topics such as all products, products by category,
products by discount, products by price range, price ranges, all brands, all services, special
offer products etc. The customer can navigate from the brands of the related products and
from the products to their brand. They can also navigate the category, discount and price
ranges of the products. Special collections of products are available for the user that are offer
some special occasion such as Christmas with special offer products, products ordered by
price range and a selected products to buy that keeps track of the products that the clients
wants to buy.

In the logical design where the single, multiple topics and group of topics of the website both
in web and mobile channel are organized in a detail way using dialog act and navigation are
shown. The content, editorial plan and motivation of the single and multiple topics are also
presents in a detail and specific way. Overall structural organization of the website and
landmarks such as all brands, all services, products by category etc. of the online shop website
are identified in a specific way with the details of each topics and of the navigation.
Homepage and sketches of the online electronics shopping website main pages design where
the logical design is translated into pages of the website.

Figure 1: Flow chart of the project phases
Finally, the prototype is implemented according to design including main pages and
navigation using complete development environment as example and some of screen shot is
attached with this document. Figure 1 is showing complete phases of this project.

Prof Paolini Paol 3


1. Requirement Analysis

1.1 Stakeholders

1.1.1 Clients
Company: Rockwell Automation, Milan, Italy is the demo client of the project.

1.1.2 Users
U1: Young people: Young people who are interested to buy the electronics products using
the website. These young people are divided into the Male and Female.
U2: Family: Family buy the household appliances such as TV, Washing machine using the
online shop website.
U3: Researcher: Researcher who research on the online shopping field to increase the online
shopping users and create new opportunity in the online shopping field.
U4: Corporate User: Company who buy electronics products for his employee.
U5: Student: Students buy the electronics product through on line in the university level.
U6: Brand Company: Company who want to provide special offer, promotion, discount as
advertising component inside the add section and news area.

1.2 Interview

1.2.1 Interview Video

Interviewer: MJ Ferdous, Student of Politecnico Di milano
Chair: Lorenzo Cogliati, Project Development Manager, Rockwell Automation

Video Link: http://www.youtube.com/watch?v=AgxOrmS63ng

Prof Paolini Paol 4


1.2.2 Plain text format of interview summery

Ferdous: If we want to develop a new online shopping website, what do you basically want
informally from the new website?

Lorenzo: What we need from our website, something like to have home page where you can
see the main information of the company with some promotion & invitation and in the top can
have some navigational link and also available some links in the left side and in the bottom
can have less important navigation. Basically, I want the main links in the top and so on the
left side should be the complete navigation bar.

In addition, we want the user can see all the information regarding the product and also online
shopping has to be available so the user can check all the products what we sell and can see
all the related information and then also buy this product. This product can be buy all possible
payment system.

Ferdous: What kind of payment system do you want?

Lorenzo: We would like to support credit card which is very important and also all available
online payment like bank transfer and so on.

Ferdous: How do you want to see the product items like by brand or category?

Lorenzo: Basically i concern about the content to place in organized way. Lets say, there
could be item placed by category or brand and depend on some technical aspect.

Ferdous: You also need the mobile version of that. What do you mostly prefer in the mobile
version?

Lorenzo: Well, the very important things that the content should be less here and user can
navigate our website and buy the product from mobile easily and see the product short
description and small image. It should be consistence with the web version. There should not
be big difference between mobile and web.

Ferdous: So the mobile version also will be accessible like by brand and category.

Lorenzo: Yes like the web version.

Ferdous: You know there are some technical feasibility for the mobile version. May be
something is not possible to implement in the mobile which is implemented in the web.

Lorenzo: And you have to solve this problem according to your technical feasibility.

Ferdous: Do you have any special advice for both version?

Lorenzo: No, Not so much, but I recommend that the content should be simple for the mobile
version not too much and try to be more attractive and accessible for the web version.

Ferdous: What do you want from the Phase 1 like in the prototyping?

Prof Paolini Paol 5


Lorenzo: Well, I would like to have to see online shopping for electronic goods for the
prototype and implement it. After that we will for next phase.

Ferdous: Okay Sir, We will make the requirement according to your speech and talk to you
more after that writing the formal requirement. Thank you for your time.

1.3 Users survey
The Survey has been taken before Design for both Web and Mobile Channel. It has been
performed among student and professional users. It is specially taken for updating part of user
profile and placing important content in the design from the user point of view.

1.3.1 Questionnaires

Note: If the Answer is not applicable for you then just select none option. You can
choose multiple answers in some questions.

1. What is your Salary Range? (Professional)

A) Less Than 1500.
B) 1500 to 2000 Euro.
C) 2100 to 2600 Euro.
D) 2700 to 3000 Euro.
E) None.

2. What is your education level? (Student)
A) School Level.
B) Bachelor Level.
C) Masters Level.
D) Diploma Level
E) Others.

3. Do you use any online shopping website, if yes then how many in the last month?
A) None
B) One times.
C) Two times.
D) Three times.
E) Four times.

4. Do you use mobile or any handheld device internet, if yes what is your preference
level online shopping from mobile device?
A) None.
B) Same as web channel.
C) Less than web channel.
D) Little less than web channel
E) More than web channel.

Prof Paolini Paol 6


5. What do you prefer from online shopping website?

A) Get the content easily.
B) Get the response quickly.
C) Get the more colourful interface.
D) Get the Transaction easily.
E) All the above.

6. How quick do you prefer to get the response after one click in the website?

A) Slow.
B) Average.
C) More than Average.
D) Faster.
E) More than Faster.

7. Do you access the online shopping for electronics if yes which do you need the most?

A) Updated News.
B) New Released Electronics Products.
C) To see the Electronic Products.
D) Buy the Electronics Product.
E) All

8. Do you access the online shopping for electronics for mobile or another handheld device,
which do you, need the most?

A) Updated News.
B) New Released Electronics Products.
C) To see the Electronic Products.
D) Buy the Electronics Product.
E) All.

9. What are the payment systems do you use?

A) Credit Card.
B) Bank Transfer.
C) Postal Order System.
D) All.

10. What kind of Customer Support do you expect?

A) Phone calls.
B) Emails.
C) Chatting.
D) Only FAQs.
E) Others.

Prof Paolini Paol 7


11. What do you want during browse the product list?

A) Product name with Price.
B) Product Image with Price.
C) Product Name, image and Price.
D) Product Name, image, short description and Price.

12. What are the instruction do you want to buy the Products?

A) Instructions to buy the products.
B) Instructions to Place an Order.
C) Instructions to pay the Payments.
D) All.

13. What do you like to access the list of Products?

A) Products by category,
B) Products by discount.
C) Products by Price Range.
D) All Products.
E) All.

Figure 1: Screen shot of the online user survey preview from www.surveymonkey.com

Prof Paolini Paol 8


1.3.2 Analyze Data and Result

Our experimental hypothesis was verified using the collected data from the two groups. One
is the professional group and another is the student group.

Questions/User Fakrul Liran Sumon Jalal
Q1 Not Applicable for Students
Q2 C C C C
Q3 B B B B
Q4 C A D A
Q5 E E E E
Q6 E D C D
Q7 A,B A C A,B
Q8 A,B A C A,B
Q9 A A A A
Q10 A,B B B B
Q11 D C D D
Q12 D D D D
Q13 B B D D
Table 1: User Survey result of Student Group

Questions/User Valesio Anela Massimo
Q1 E C E
Q2 Not Applicable for professionals
Q3 B B B
Q4 C E A
Q5 B,D E E
Q6 D B B
Q7 C,D A C
Q8 C A A
Q9 A,B,C A,B A
Q10 A,B D C
Q11 D D C
Q12 D A A
Q13 D A A
Table 2: User Survey result of Professional Group

Prof Paolini Paol 9


Screen Shot of user Survey (Analysis Data):

Prof Paolini Paol 10


Design consideration with respect to the Survey:

Questions Design Consideration/User Profile

Q1 Identify the Salary Range: None
Q2 Educational level: Master
Q3 Finding online shopping Usage: One times per month.

Q4 In respect to the user survey, Web channel preference level is higher than the
mobile channel. So we emphasis the web channel contents more than the
mobile channel.
Q5 Maximum user Get the response quickly. So, we will try to place contents and
transaction to keep in mind during design and implementation

Q6 User desire response is average to get the webpage.

Q7 User sees electronics products mostly. We will basically concern on product
contents.
Q8 User sees electronics products mostly in mobile channel also. We will
basically concern on product contents also.

Q9 User use Credit Card for payment system. Credit Card will be first priority in
our payment system.

Q10 User mostly wants phone call and email for customer support. We will add the
feature in the design.
Q11 Users want to know the Product name, image, short description and price. So
we will consider this matter during design.

Q12 Users want to Know how to buy the products in online shopping. So we will
give this instruction in our website.
Q13 Users browse the products in category wise. So we will consider this during
design.



1.4 User Profiles

Name: Young People
Demographic Description:
Age: 25 to 55.
Gender: Male or Female.
Educational Level: Masters educated.
Income and purchasing Power: 2000-3000 Euro per month.
Location: Spread all out all over the world where the internet is available.
Culture: Culture and speaking language not affect the use and buy the electronics product.
Priority: One.
Goal: To buy the electronics products through web and mobile channel.

Name: Family
Family Members: 4-5
Short Description of Family Members: Generally Two Children with Father and Mother.
Age: Father and Mother Age is the between 30 to 45 and children age below the 18.
Income and Purchasing Power: The family member’s income level is 2000 to 3000 and their
purchasing power is high.
Location: Spread all over the world where the internet is available.
Cultural: Culture and speaking language not affect the use and buy the electronics product.
Priority: Two
Goal: To buy the attractive household appliance such as TV, washing machine through the
online electronics shop website.

Name: Student
Age: 18-25
Income and purchasing Power: Students who works in part-time their purchasing power is
high and students who are totally depend on the family their purchasing power is less.
Location: University.
Priority: Three
Goal: To see the advertisement, Special offer and buy the electronics product through online
electronics shop website.

Name: Corporate Users
Age: 10 to 15.
Location: Centre in a city.
Priority: Two.
Goal: To buy the electronics products for his employee.

1.5 Goals
General Goal:

GG1: User Attraction: Attract the potential customer with specific brand and
categories of product or product line at a competitive price as in non-electronics
commerce.



GG2: Payment policy: Impress the specific user with acceptable payment methods
like as credits cards and postal order Service.

GG3: Advertisements: Sending advertisements, special offers to the potential
customers for some specific occasion like as Christmas.

GG4: Compare products and Price: Online electronics shop allows people to
browse through many items and categories, to compare the prices and products of as
many shops as they want.

Business Goals:

BG1: Cost and Efficiency: To offer incomparable lower operation costs and higher
efficiency, comparing to the standard electronics shop. Customer order as many items
as they can afford without having to worry about how they will transport them,
because the online electronics shop websites also deliver the things to the buyer’s
home.

BG2: Online Service: To offer non-stop service, 24 hours a day and 7 days in week
comparing to the standard electronics shop because of the Internet is open 24 hours a
day, 365 days a year and 7 days in a week.

1.6 Design Consideration and business Requirements

The online shop is a web-based application that provides customers with online shopping.
Through a Web browser, a customer can browse the catalog, place items to purchase into a
virtual shopping cart, create and sign in to a user account, and purchase the shopping cart
contents by placing an order with a credit card or postal order system. The application of the
online shop is also characterized by the easy control for the customers. The online shop
provides well arranged purchasing system and actual information customer’s new and former
orders. The whole system is highly adjustable, in means of graphical and functional aspects
according to the customers needs.
The operations of the online Store are as follows.
C) R1: The users can log-in as a new or existing user and edit their details (name,
address, e-mail address, credit card type and number, phone).
D) R2: The users can browse all the items of the number of products that belong to
several different categories.
E) R3: The users can do key-word search on all products, which returns the list of all
products that contain the provided word (string) in their name or description fields.
F) R4: Only products that have items in stock are displayed to the user.
G) R5: The user can add one or more quantities of the same or different items into his/her
order. If the user adds the same item into his/her order more than once, the system
only increases the quantity of the item instead of adding the same item multiple times.
H) R6: When the user selects to add the certain quantity of an Item in to the order, the
system sends a message to the item component in order to reduce the required quantity
from stock.



I) R7: If this operation fails, which means that there aren’t enough items in the stock
(taken out by another user browsing concurrently), the operation terminates with a
suitable error message.
J) R8: If the user tries to add an item into a cancelled order or tries to check out with a
cancelled order, the user is informed with a suitable error message and requested to
reset their order in order to start with a new order.
K) R9: The system checks that the user has enough amount of credit (Check out
payment and method) before closing the order. Otherwise the user is informed with a
suitable error message and is prevented from proceeding to check out.
10.R10: The user can create an order and add items into his/her order before logging-in,
but check out is prevented and the user is requested to log-in in order to proceed with the
check-out.

2.7 Content
The principal content of the online Store are the products sold in the Store; brands of
products and categories of the products.

Products: Cell Phone, DVD Player, Digital Camera, MP3 Player, Television & video.
Camcorder, iPod, Cassette players, Digital Media Players, Digital Video Recorders.

Categories : Communications (Ex. Cell phones, Telephones), Photography (Ex. Digital
Cameras), Portable Audio (Ex. MP3 Players, Cassette players), Television & videos (DVD
Players, Televisions, Camcorders).

Brands : Casio, Nintendo, Nokia, Panasonic, Philips, Pioneer, RCA, Samsung, Sony,
Toshiba Electronics, Mitsubishi, Hitachi.

Products (List of Products): Contents of the list of Products are a small picture, brand,
category, price and general description hyperlinks.

Products (Specific Product): General Description of each specific product contains a big
image with different angle, Product Description, history, Customers Comment hyperlinks,
Price, available number of items, available color selling rate, adds to cart hyperlink, category,
Brand of the product.

Products (Full Specifications): Type, Media Supported, Features, Additional Features,
Connectors, General Product information i.e. weight, model, Dimension etc.

Shopping Cart: Contains information about selected products to buy, short description about
product, Edit shopping cart hyperlinks.

Customer Support: Contains customer support information about maintain product and best
way to use products.

Shopping Instruction: Information about how to shop in online store, how to place an order.



Content of the website also contains general information about the online Store selling
company and includes also security information about the transaction. Information about
shipping rates, delivery information and payment methods. Contacts information with the
online store company.

1.8 Matrix: Goals Vs Users

Users/Goal GG1 GG2 GG3 GG4 BG1 BG2
U1 X X X X
U2 X X X X
U3 X X
U4 X X X
U5 X X X X
U6 X

1.9 Scenario

Scenario Name: What is the new electronics product to sell today?
User: U1 and U6.
Channel: Web and Mobile Application.
Description: In the 10 o’clock, Miss Ambia Access the Internet and go to the online
electronics shop website and see the latest news that Nokia release the new attractive mobile
set. Ambia°s using set is old for this she feel to buy the new mobile set. She reads all the
information about the new released mobile set.
Motivation: To get the new released electronics product and get information about the lasted
model of the electronics product.

Scenario Name: Access the online electronics shop website in Bus.
User: U2.
Channel: Mobile application.
Description: Mr. Modon who is the too busy employee in his office. Everday, he has to go
home in bus. His family using TV is not good and he has got a profit bonus from his office.
For this reason he decides that he will buy a TV. He browses the online electronics shop
website and sees the latest model of TV and buys a TV through the electronics shop website.
Motivation: To get the latest news about the new released product and buy the product.

Scenario Name: What are the special offer products in Christmas Vacation?
User: U1 and U6.
Channel: web application.
Description: In the morning Mr. Kashem accesses the online electronics shop website to get
the special offer products in Christmas Vacation. While browsing the special offer products in
Christmas vacation, he get that there is 30% discount in washing machine. He decides and
thinking to buy the washing machine. In the afternoon, he again browses the online
electronics shop website and buy the washing machine.
Motivation: To get the latest the news about the special offer products.

Scenario: Bargaining in the Restaurant about the Mobile Feature that what is right and what
is wrong?



User: U1 and U6
Channel: Mobile Application.
Description: In the launch time, Mr. Sumon and Mr. Jalal are taking launch in the restaurant.
Suddenly, the are discussing about the latest released Nokias 3546 model mobile set. In the
dicussing time they are bargaining about the specific feature of a mobile set. Mr. Sumon uses
his mobile to access the online electronics shop website in the restaurant. He browses the
Nokias 3546 model pages and checks its feature.
Motivation: To get the latest released electronics products information.

2. Design for web application
2.1 Conceptual
2.1.1 Diagram



RETURNS SITE-MAP SHOPPING PRIVACY
CONTACTS POLICY CREDITS INSTRUCTION COMPANY STATEMEN

PRODUCT
Product by discount Discount Level Shopping Cart
Products by Price range Price Ranges All Products
Special offer Products Products by Category

PAYMEMTS
SERVICE

Is Made By
Makes

SHIPPING RATES BRAND

All Services

FAQ’S

CUSTOMER-SUPPORT

All Brands


2.1.2 Textural Description

Single Topics:

Contacts:
Content: Contacts information with the online electronics shopping company
such as email address, phone number, messenger chatting etc.
Returns policy:
Content: 15 day returns policy information with the online electronics shop
company if you are not completely satisfied with your new purchase from the
online electronics shop company.
Credits:
Content: Information about the online electronics shop website and creators of
the application.
Site-Map:
Content: Information about the whole online electronics shop website
navigational links and services that provide to the clients.
Shopping Instruction:
Content: Information about how to place an order and how to shop with the
online electronics shop.
Company:
Content: Information about the on line electronics shop.
Privacy Statement:
Content: Information about the privacy statement of your personal data such
your address, credit card number etc.
Customer Support:
Content: Information about the customer support such as best way to clean and
maintain your electronics products.
Payments:
Content: Information about how to pay and online electronics shop provides
two type of payment method one is credit card system and another one is
postal order system. This topic also contains information that how to pay using
credit card and how to pay using postal order.
FAQ’s:
Content: “Frequently asked Questions” contains information about the general
questions that the users feel generally with answers.
Shipping Rates:
Content: In the online electronics shop all of the products are available for
delivery worldwide. This topic contains shipping rates information of different
countries.


Multiple Topics:

Product:
Content: Viewing and detailed configuration of product attributes such as name,
brand available colour, size with price, available number of items, small
picture and category. Specific information of the Product such as Type, Media
Supported, Features, Additional Features, Connectors, General Product
information i.e. weight, model, Dimension etc.
Editorial Plan: Large number of Product.
Motivation: To attract the user with different brand and category of the
products.

Brand:
Content: Contains the description of electronics product brand such as name,
available size, colour with price and the dimensions of the product.
Editorial Plan: 50.
Motivation: To attract the user with different type of well known electronics
product brand.
Service
Content: On line electronics shop offer different type of service like as product
delivery service to the clients address, support different type of payment
methods like as credit card, postal order service and registration as a permanent
clients etc.
Editorial Plan: 4.
Motivation: To attract the user with different type of payment methods, product
delivery and registration service.

Introductory Acts:

All Products: All the Products that are selling in the online electronics shop.
Shopping Cart: In order to buy Products, Products are selected by the clients.
Products by price range: Products that has the same price range.
Ranges of price: Range to which the price of Products can belonging to.
Special offer Products: Products that are sell in a special offer (Low price in the shop).
Products by discount: Products that has the same % discount.
Products by Category: Products that has the same category.
All Brands: All the Product brands that are selling in the on line electronic shop.
All Services: All the Services of product that are provide by online electronic Shop
Company.


Relevant Transactional Relations:

Makes: The “Makes” transactional relation represents that the brand makes the
Product.
Is Made By: The “Is Made by” transactional relation represents that the Product is
made by brand.

2.2 Logical Design
2.2.1 Diagram



RETURNS SHOPPING COMPANY
CONTACTS POLICY CREDITS SITE-MAP INSTRUCTION
History
Contacts General Information Credits Whole Website General Information
Information Vision
How to Place an Order
Who we are

PRODUCT
Products by discount Discount Level
Shopping Cart
Products by Price range Price Ranges Basic Description
All Products
Special offer Products Detailed Description
Products by Category
PAYMEMTS Image

SERVICE
General Description Is Made By Makes

1: 1
General Information
1: n
SHIPPING RATES BRAND

General Description All Services
General Description

FAQ’S PRIVACY
CUSTOMER-SUPPORT STATEMENT
General Description General Description
General Infomation All Brands
Contacts


2.2.2 Textual Description
Dialogue Acts:
Single Topic:
Contacts:
Contacts: This dialogue act provides the lists of contacts that can be used to get in
touch with the company. It includes from 4 to 5contacts.

Returns Policy:

General Information: This dialogue act Contains the information about the 15 days
returns policy with the online electronics shop if you are not completely satisfied with
your new purchase. It includes about 10 to 15lines of text.

Credits:
Credits: This dialogue act represents the information about the online electronics shop
website and its staff. It includes about 10 to 15 lines of text with some small pictures.

Site-Map:
Whole Website Information: The whole website information dialogue act offers the
lists of available hyperlinks that provide the website. Clients can access the whole
website using the list of hyperlinks. It includes about 15 to 20 hyperlinks.

Shopping:
General Information: This dialogue act offers instructions about how to shop online
with the online electronics shop website. It includes about 10 lines of text with images.
This is the default act for the topic Shopping.

How to Place an Order: This dialogue act provides the information that how clients
place an order, dispatching information and information that clients can place an order
by telephone. This dialogue act includes 15 to 20 lines of text.

Company:
History: This dialogue act contains a brief history of the company with principal
steps in the development of the on line electronics shop. It includes about 15 to 20
lines of text.
Vision: This dialogue act is about the purpose of the company and the kind of
customers their service is addressed to. It includes about 15 to 20 lines of text.
Who we are: This dialogue act contains general information about the company
and its staff. It includes about 15 to 20 lines of text and two or three pictures of the
building where the operative office is located. This is the default act for the topic
Company.

Customer Support:
General information: This dialogue act offers an introduction about the support
offered to the customers of the online electronics shop in case they have problems
with a product they have bought. It includes about 15 lines of text. This is the
default dialogue act for the topic Customer Support.


Contacts: This dialogue act gathers all the contacts that the customer can use if he
needs support, including phone numbers and email addresses. It includes from 3 to
5 contacts with one line’s description.

Payments:
General Description: This dialogue act provides the payment information, payment
methods and the address of the postal order services. It includes from 10 to 15 texts
with postal order service address.

FAQ’s:
General Description: This dialogue act contains the general problems that the user
faces. It Includes 15 to 20 text based general questions with answer.

Privacy Statement:
General Description: This dialogue act contains the general information about the
privacy statement of your personal data such as your address, credit card number etc.
It Includes 15 to 20 text.

Shipping Rates:
General Description: This dialogue act contains the information about the shipping
rates of different countries. It Includes 15 to 20 text based with shipping rates table.

Multiple Topics:
Product:
Basic Description: This dialogue act contains the basic information about a product
sold in the online electronics shop, including name, model and price. It includes one or
two lines of text and a small picture. This is the default dialogue act for the multiple
topics Product.
Detailed Description: This dialogue act presents detailed information about the
Product, with brand and available sizes. It includes about 15 lines of text.
Image: This dialogue act presents a big image of the Product. It is composed by a
high-resolution picture and two or three lines of textual description.

Brand:
General Description: This dialogue act offers relevant information about a brand
that produces Product sold in the online electronics shop. It includes about 5 lines of
text and some hyperlinks with attractive image.

Service:
General Information: This dialogue act contains general information about
services that online electronics Shop Company provides. It includes 10 to 15 lines of
text with image.


Introductory Acts:

Product
All Products: This Introductory act presents a list of all the Products in the
application (300-400). For every Product the brand, category and model are
displayed.
Default: Alphabetical.
User Control: By Price range, category and percentage of discount and
brand.
User Feature: Filtering. There is also the possibility to search within the
list by keyword and model.
Navigation: The act follows the index subject strategy which contains the
hyperlinks that clients can access the products by using these indexes. Also
Navigate using the forward and backward sign.

Special offer Products: This introductory act presents a list of products that are
offered at a low price (from 10 to 20) with a brief introduction (10 lines). This
special offer introductory act mainly provides information for some special occasion
like as Christmas etc. For every Products the brand, category and model are
displayed.
User Control: By category and brand.
User Feature: There is the possibility to search within the list by keyword
and model.
Navigation: Navigate using Index and the forward and backward sign. The
act also follows the mixed subject strategy which contains the hyperlinks
and some text that clients can access the special offer Products by using
these hyperlinks.

Shopping Cart: This introductory act represents a list of Products that have been
chosen by the client in order to buy them, with the total amount to be paid. For every
product the brand, category and model are displayed.
User Control: Category and brand.
Navigation: The act follows the index subject strategy. So navigate
using Index.

Product by price Range: This introductory act represents a list of Products whose
price belongs to the same price range (from 20 to 30 Products). For every product
the brand, category and model are displayed.
User Control: By category and Brand.
Navigation: Index and Guided tour.
Products by Category: This introductory act represents a list of Products whose
category belongs to the same category (from 50 to 60 Products). For every Product
the brand and model are displayed.


User features: There is the possibility to search by category.
Products by Discount: This introductory act represents a list of Products whose
percentage of discount belongs to the same (from 50 to 60 Products). For every
Product the brand, category and model are displayed.
User Control: By Category and brand.
User features: There is the possibility to search by category.
Price ranges: this act presents a list of price ranges to which the price of the products
can belong. It contains about 10 ranges.

Discount Levels: this act presents a list of discount levels to which the discount level
of the products can belong. It contains about 10 levels.

Brand:
• All Brands: This introductory act presents a list of all the brands in the online
electronics shop (from 30 to 40). For every brand the name is displayed.
User Control: By Price range, category and percentage of discount.
User Feature: There is the possibility to search within the list by keyword
and model.
Service:
All Service: This introductory act presents a list of all the services such as delivery,
payment in the online electronics shop (3-4 service).
Navigation: The act follows the index subject strategy so navigate using the
index.
Transition Acts:

Brand Makes product (List of Products)
Line: This Introductory act presents a list of all the Products in the specific
brand (50-100). For every Product the name, small picture and model are
displayed.
User Control: By Price range, category and percentage of discount.
User Feature: Filtering. There is also the possibility to search within the list
by keyword and model.
hyperlinks that clients can access the Products by using these indexes. Also
Navigate using the forward and backward sign (Guided Tour).

2.3 Organization of the whole website


Shopping
Credits Contacts Site-Map How to place an
Shipping Rates Payments FAQ’s
Credits Contacts Whole website order General General General
Information Description Description Description

Returns
General Information
Policy
General
Description
Company
Privacy Statement History
Customer Support General Home
Description
Contacts Who we are
Introductory Act
General Information
Service Service All Products Vision
General All Products by Category
Information Service Special offer Products
Price Ranges
Shopping cart
Products by discount

Special offer Product by Price Shopping All Discount
Products Category Ranges cart Products Level Brand
All
Brands
Products by
Products by Discount
Price Range
Brand
Makes General
Description

Legenda
Introductory Act Is Made By
Product
Basic Description
Dialogue Act

Prof Paolini Paol
Transition Act Image Detailed Description 26

2.4 Landmarks
Landmarks No.1 (Important): The position of the landmarks no.1 is the top of the every page
and follows the top structural navigation.
Landmarks No.2 (More Important): The position of the landmarks no.2 is the left side of the
every page and follows the left structural navigation.
Landmarks No.3 (Less Important): The position of the landmarks no.3 is the bottom of the
every page and follows the bottom structural navigation.

No. Landmarks Single Topics Group of Topics Position(Page)
1 Important Company. Shopping Cart Top
Contacts.
Credits.
Shopping
instruction.
Customer
Support.
Payments.
2 More All Brands. Left
All Services.
Important
Special Offer
Products
Price ranges.
Products by
category.
All Products
Products by
discount.
3 Less FAQ’s. Bottom
Site-Map
Important
Shipping
Rates.
Privacy
Statement
Returns
Policy


2.5 Homepage Design
Content: Introduction of the online electronics shop and the Products.
Appetizers.
Quick links.
Advertisement and News links.
Landmarks: Links in the top, left, and bottom lateral bar with respect to their
importance. Landmarks follow the left, top and bottom structural navigation.

Title

$ Shopping $ Contacts $ Payments $ Customer Support $ Company $ Products by discount

Introduction
$ Search Option

Some New Release attractive Products picture with
$ View all Brands
$ View all Category Price
$ All Services
$ Special offer Products
$ Price Ranges

$ Site-Map $ Shipping Rate $ help desk $ FAQ’s $ Product Care$ Privacy Statement$ Returns Policy

6.4 Other Pages Design

Page No.1

Multiple Topic: Product
Dialogue Act: Basic Description
Introductory Act: Special offer Products: Accessing the Products with the Special offer
Products group

Content: Basic description of the Product.
Structural links: Image, Detailed Description of the Product, homepage.
Subject links: “Next” and “Previous” sign Product in the Special Offer Products
group, backward link to the “Special Offer Products” page
Transition links: Brand and Service.

Title

Important Landmarks Links

Basic Description of the Product

More

Important

Detailed Description
Landmarks
Image

Links

Less Important Landmarks Links


Page No. 2

Multiple Topic: Product
Dialogue Act: Detail Description
Products group

Content: Detailed description of the Product.
Structural links: Image, Basic Description, homepage
Subject links: Next and Previous Product in the Special offer Product group,
backward link to the Special Offer Product page
Transition links: Service, Brand

Title


Detail Description of the Product
More

Important

Landmarks
Basic Description
Image
Links



Page No. 3

Multiple Topic: Product.
Dialogue Act: Image.
Products group

Content: Image of the product with font view, side view and bottom view.
Structural links: Basic Description, Detailed Description, homepage.
Subject links: Next and Previous Product in the Special Offer Products group,
Transition links: Service, Brand

Title


Detail Description of the Product
More

Important

Landmarks
Basic Description
Detailed Description
Links



Page No. 4:

Special Offer Products:
Content: Introduction and list of Products with price and hyperlinks.
Structural links: Home page.

Title


Introduction
More

Important Product1+Small picture
Product2+Small picture
Producte3+Small picture
Landmarks Product4+Small Picture
Product5+Small Picture

Links

Forward and backward sign
Search



Page No. 5
All Brands:

Content: list of the brands with hyperlinks

Title


More Brand 1 Brand 6 Brand 11
Brand 2 Brand 7 Brand 12
Important Brand 5 Brand 10 Brand 15

Landmarks

Links




Page No. 6

For Each Specific Brand:

Content: list of the Products in specific brand with small picture as a hyperlinks,
price, available colour and dimensions information about the product.

Title


More
Band Description

Important

Landmarks

Links

List of Products



Page No. 7
History

Content: Information about the history of company
Structural links: Who we are, Vision, homepage

Title


Introduction
More

Important

Landmarks

Links
Who we are
Vision



Page No. 8


Content: Name and small picture of Products with hyperlinks.
Structural links: homepage.
Subject links: Backward links to the category.

Title


List of Category
More

Important

Landmarks

Links Forward and Backward


3. Design for mobile web interface
3.1 Conceptual
3.1.1 Diagram



PAYMEMTS
CREDITS COMPANY

PRODUCT

Products by Category Shopping Cart
Special offer Products All Products

SHIPPING RATES

Makes

Is Made By

BRAND

CUSTOMER-SUPPORT

All Brands


3.1.2 Textual description

Single Topics:

Credits:
Content: Information about the creators of the application.
Company:
Content: Little Information about the on line electronics shopping company.
Customer Support:
Content: Information about the customer support such as contact information and
other customer support.
Payments:
Content: Information about how to pay and online electronics shop provides two
type of payment method one is credit card system and another one is postal order
system.
Shipping Rates:
Content: In the online electronics shopping all of the products are available for
delivery worldwide. This topic contains shipping rates information of different
countries.

Multiple Topics:

Product:
Content: Viewing and detailed configuration of product attributes such as name,
brand available colour, size with price, available number of items, small picture
and category. Specific information of the Product such as Type, Media Supported,
Features, Additional Features, Connectors etc.
Editorial Plan: Large number of Product.
Brand:
Content: Contains the description of electronics product brand such as name, brand
products etc.
Editorial Plan: 50.

Introductory Acts:

All Products: All the Products that are selling in the online electronics shopping company.
Special offer products: Products that are sell in a special offer (Low price in the shop).
Products by Category: Products that has the same category.
All Brands: All the Product brands that are selling in the on line electronic shop.


Relevant Transactional Relations:

Makes: The “Makes” transactional relation represents that the brand makes the Product.
Is Made By: The “Is Made by” transactional relation represents that the Product is made
by brand.

3.2 logical Design
3.2.1 Diagram



COMPANY
CREDITS CUSTOMER-SUPPORT

History (Short)
Credits Contacts
Vision (Short)

PRODUCT

Short Description
Shopping Cart
Small Picture All Products
Special offer Products

PAYMEMTS
Makes

General Description 1: 1
Is Made By 1: n
BRAND

SHIPPING RATES
General Description

General Description

All Brands


3.2.2 Textual description

Dialogue Acts:
Single Topic:
Credits:
Credits: This dialogue act represents the information about the online electronics shop
website and its staff. It includes about 5 to 10 lines of text with some small pictures.

Company:
History: This dialogue act contains a history of the company with principal steps in
the development of the on line electronics shop. It includes about 5 to 10 lines of text.
Vision: This dialogue act is about the purpose of the company and the kind of
customers their service is addressed to. It includes about 5 to 10 lines of text.

Customer Support:
Contacts: This dialogue act gathers all the contacts that the customer can use if he
needs support, including phone numbers and email addresses. It includes from 3 to 5
contacts with one line’s description.

Payments:
General Description: This dialogue act provides the payment information, payment
methods and the address of the postal order services. It includes from 5 to 10 texts with
postal order service address.

Shipping Rates:
General Description: This dialogue act contains the information about the shipping rates
of different countries. It Includes only shipping rates table.

Multiple Topics:

Product:
Short Description: This dialogue act contains the basic information about a product sold
in the online electronics shop, including name and price. It includes one or two lines of
text and a small picture. This is the default dialogue act for the multiple topics Product.


Small Picture: This dialogue act presents a small image of the Product. It is composed
by a high-resolution picture and one or two lines of textual description.
Brand:
General Description: This dialogue act offers relevant information about a brand that
produces Product sold in the online electronics shop. It includes about 3 lines of text
and some hyperlinks with attractive image.

Introductory Acts:

Product
All Products: This Introductory act presents a list of all the Products in the application
(300-400). For every Product the brand and category are displayed.

Special offer Products: This introductory act presents a list of products that are
offered at a low price (from 10 to 20). This special offer introductory act mainly
provides information for some special occasion like as Christmas etc. For every
Product the brand and category are displayed.
Navigation: Navigate using Index and the forward and backward sign. The
act also follows the mixed subject strategy which contains the hyperlinks and
some text that clients can access the special offer Products by using these
hyperlinks.
Shopping Cart: This introductory act represents a list of Products that have been
chosen by the client in order to buy them, with the total amount to be paid. For every
product the brand and category are displayed.
Navigation: The act follows the index subject strategy. So navigate
using Index.
Products by Category: This introductory act represents a list of Products whose
category belongs to the same category (from 50 to 60 Products). For every Product the
brand and model are displayed.
Brand:

• All Brands: This introductory act presents a list of all the brands in the online electronics
shop (from 30 to 40). For every brand the name is displayed.
Transition Acts:
Brand Makes product (List of Products)
Line: This Introductory act presents a list of all the Products in the specific
brand (50-100). For every Product the name and small picture are displayed.
hyperlinks that clients can access the Products by using these indexes. Also
Navigate using the forward and backward sign (Guided Tour).

3.3 Overall Organization of the website



Shopping Shipping Rates Payments
How to place an General General
order Description Description

General Information

Customer Support Company
Contacts
Home History

General Information
Introductory Act
All Products Vision
Special offer Products
Shopping cart

Special offer Product by Shopping All
Products Category cart Products Brand
All
Brands

Brand
Makes General
Legenda Description

Introductory Act
Is Made By
Product
Dialogue Act
Short Description

Transition Act
Prof Paolini Paol Small Picture 44

3.4 Landmarks
Landmarks No.1 (Important): The position of the landmarks no.1 is the bottom of the every
page and follows the bottom structural navigation.
Landmarks No.2 (More Important): The position of the landmarks no.2 is the top of the every
page and follows the top structural navigation.

No. Landmarks Single Topics Group of Topics Position(Page)
1 Important Company. Bottom
Credits.
Customer
Support.
Payments.
Shipping
Rates.

2 More All Brands. Top
Special Offer Products
Important
Products by category
All Products


3.5 Homepage Design
Content: Introduction of the online electronics shop and the Products.
Appetizers.
Quicklinks.
Advertisement and News links.
Landmarks: Links in the top, and bottom lateral bar with respect to their importance.
Landmarks follow the top and bottom structural navigation because of efficient
scrolling of mobile device.

Title
$ View all Brands
$ View all Category Introduction
$ All Products

Introduction

Some New Release attractive
Products picture with price

$ Shipping Rate
$ Customer Support
$ Company
$ Credits


3.6 Other Pages Design

Page No.1

Multiple Topics: Product
Dialogue Act: Short Description
Products group

Content: Short description of the Product.
Structural links: Small Picture.
Subject links: “Next” and “Previous” sign Product in the Special Offer Products
group, backward link to the “Special Offer Products” page
Transition links: Brand.

Title
$ View all Brands
$ All Products

Short Description of the Product

Detail Specification
Back to the Home

$ Shipping Rate
$ Customer Support
$ Company
$ Credits


Page No. 2

Multiple Topic: Product.
Dialogue Act: Small Picture.
Products group
Content: Small Picture of the Product with font view, side view and bottom view.
Structural links: Short Description, Homepage.
Subject links: Next and Previous Product in the Special Offer Products group,
Transition links: Brand

Title
$ View all Brands
$ All Products

Small Picture of the Product

Short Description
Back to the Home

$ Shipping Rates
$ Customer Support
$ Company
$ Credits


Page No. 3

Special Offer Products:
Content: Introduction and list of Products with Price and hyperlinks.
Landmarks.

Title
$ View all Brands
$ All Products

Introduction

Producte3+Small picture

Back to the Home

$ Shipping Rate
$ Customer Support
$ Company
$ Credits


Page No. 4
All Brands:

Content: list of the brands with hyperlinks
Landmarks

Title
$ View all Brands
$ All Products

Introduction

Brand 1
Brand 2
Brand 3
Brand 4
Brand 5

Back to the Home

$ Shipping Rate
$ Customer Support
$ Company
$ Credits


Page No. 5
History

Content: Information about the history of company
Structural links: Vision, homepage
Landmarks

Title
$ View all Brands
$ All Products

Introduction

Vision
Back to the Home
$ Shipping Rate
$ Customer Support
$ Company
$ Credits


Page No. 6


Content: Name and Small Picture of Products with hyperlinks.
Structural links: homepage.
Subject links: Backward links to the category.
Landmarks.

Title
$ View all Brands
$ All Products

Name and Picture

Category Forward and backward sign
Bake to the Home

$ Shipping Rate
$ Customer Support
$ Company
$ Credits


4. Prototype application

4.1 Technology and Tools

4.1.1 Web application

The following technology has been used to develop web application

Programming Language: ASP.NET 1.1, C#.NET
Scripting Language: JavaScript
Markup Language: DHTML
Style: CSS (Cascading Style Sheet)
IDE: Visual Studio.Net 2003
Web Server: IIS (Internet Information Service)
Framework: Dot.net Framework 1.1
Operating System: Windows 2000 or higher (recommended XP SP2)
Browser: any

4.1.2 Mobile Web application

The following technology has been used to develop mobile web application

Programming Language: Mobile ASP.NET 1.1, C#.NET
Markup Language: HTML
IDE: Visual Studio.Net 2003
Web Server: IIS (Internet Information Service)
Framework: Dot.net Framework 1.1
Operating System: Windows 2000 or higher (recommended XP SP2)
Browser: Opera mini or any device enabled browser


4.2 Sample screenshot of the web



4.3 Sample screenshot of the mobile



6. Conclusions
Finally, this document represented a conceptual schema with single and multiple topics and their
mutual relations, a logical schema with the details of each topic and of the navigation, an overall
organization of the website map and some sketches of its main pages. Developer and designer
can use this as template to design and develop the next phase of the website. And also the
prototype has been included with this document (screen shot is attached) which will show how
the application interface will be look like. Our future plan is to incorporate other sections of the
client with the online shopping system.


Appendix

Project plan:


Mm Interactive Assigment C V 2.5

Recomendados

Recomendados

Más contenido relacionado

Similar a Mm Interactive Assigment C V 2.5

Similar a Mm Interactive Assigment C V 2.5 (20)

Más de MJ Ferdous

Más de MJ Ferdous (20)

Último

Último (20)

Mm Interactive Assigment C V 2.5