Mm Interactive Assigment C V 2.5

Politecnico di Milano

Prof Paolini Paolo

_____________________________________________________________________ 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 Paol 2

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 3

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 4

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 5

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 6

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 7

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 8

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 9

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 10

Screen Shot of user Survey (Analysis Data):



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 Demographic Description: 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 Demographic Description: 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



Discount Level

Products by Price range

SITE-MAP

CUSTOMER-SUPPORT

Products by Category

SHOPPING INSTRUCTION

Makes

CONTACTS CREDITS

PRODUCT Shopping Cart

All ProductsPrice Ranges

Product by discount

Special offer Products

Is Made By

BRAND

FAQ’S

COMPANY

SERVICE

All Brands

All Services

PAYMEMTS

SHIPPING RATES

RETURNS POLICY

PRIVACY STATEMEN



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



Discount Level

1: n

1: 1 Makes

CONTACTS

Contacts

CREDITS

Credits History

SHOPPING INSTRUCTION

General Information

SITE-MAP

Whole Website Information

PRODUCT

Shopping Cart

All ProductsProducts by Price range Price Ranges

Products by discount


Basic Description

Detailed Description

Image

Is Made By

General Description

BRAND

FAQ’S CUSTOMER-SUPPORT

Vision

Who we are

COMPANY

General Infomation

Contacts

SERVICE

General Information

All Brands

All Services

General Description

How to Place an Order

PAYMEMTS

General Description

SHIPPING RATES

General Description

RETURNS POLICY

General Information

PRIVACY STATEMENT

General Description




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.

Default: Alphabetical. 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.

Default: Alphabetical. 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.

Default: Alphabetical. 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.

Default: Alphabetical.




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. Default: Alphabetical.

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.

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.

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.

Default: Alphabetical. 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. 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 (Guided Tour).

2.3 Organization of the whole website



Who we are

History

Vision

ContactsCustomer Support

Contacts

Company

Credits Credits

Whole website Information

Site-Map

General Information

How to place an order

Shopping Payments

General Description

FAQ’s General

Description

Home

Image

Basic Description

Detailed Description

Product

General InformationAll

Service

Service

All Products

Products by Price Range


Price Ranges

Discount Level

Shopping cart

All Brands

Brand

General Description

Brand

Product by Category

General Information

Service

Makes

Is Made By

General Description

Legenda

Dialogue Act

Introductory Act

Transition Act

Contacts

Returns Policy General

Description

Shipping Rates

Privacy StatementGeneral

Description

Introductory Act All Products

Products by Category Special offer Products

Price Ranges Shopping cart

Products by discount

Products by Discount



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. Contacts. Credits. Shopping

instruction. Customer

Support. Payments.

Shopping Cart

Top

2 More

Important

All Brands. All Services. Special Offer

Products Price ranges. Products by

category. All Products Products by

discount.

Left

3 Less

Important

FAQ’s. Site-Map Shipping

Rates. Privacy

Statement Returns

Policy

Bottom



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.

6.4 Other Pages Design

Title

Introduction

Some New Release attractive Products picture with Price

$ Search Option $ View all Brands $ View all Category $ All Services $ Special offer Products $ Price Ranges

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

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



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. Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

Basic Description of the Product

Detailed Description Image

More

Important

Landmarks

Links

Less Important Landmarks Links

Important Landmarks Links



Page No. 2

Multiple Topic: Product Dialogue Act: Detail Description Introductory Act: Special offer Products: Accessing the Products with the Special offer 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 Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

Detail Description of the Product

Basic Description Image

More

Important

Landmarks

Links





Page No. 3

Multiple Topic: Product. Dialogue Act: Image. Introductory Act: Special offer Products: Accessing the Products with the Special offer 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,

backward link to the Special Offer Product page Transition links: Service, Brand Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

Detail Description of the Product

Basic Description Detailed Description

More

Important

Landmarks

Links





Page No. 4: Special Offer Products:

Content: Introduction and list of Products with price and hyperlinks. Structural links: Home page. Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

Introduction

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

Forward and backward sign

Search

More

Important

Landmarks

Links





Page No. 5 All Brands:

Content: list of the brands with hyperlinks Structural links: Home page. Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

More

Important

Landmarks

Links




Brand 1 Brand 2 Brand 3 Brand 4 Brand 5





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.

Structural links: Home page. Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

More

Important

Landmarks

Links



Band Description

List of Products



Page No. 7 History

Content: Information about the history of company Structural links: Who we are, Vision, homepage Landmarks: Links in the top, left, and bottom lateral bar with respect to their


Title

Introduction

Who we areVision

More

Important

Landmarks

Links





Page No. 8 Products by Category

Content: Name and small picture of Products with hyperlinks. Structural links: homepage. Subject links: Backward links to the category. Landmarks: Links in the top, left, and bottom lateral bar with respect to their

importance. Landmarks follow the left, top and bottom structural navigation. 3. Design for mobile web interface 3.1 Conceptual 3.1.1 Diagram

Title

More

Important

Landmarks

Links



List of Category

Forward and Backward




CUSTOMER-SUPPORT

CREDITS COMPANY PAYMEMTS

SHIPPING RATES

PRODUCT

Shopping Cart

All Products


Makes

Is Made By

BRAND

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



CREDITS

Credits

PRODUCT

History (Short)

Vision (Short)

COMPANY CUSTOMER-SUPPORT

Contacts

1: n

1: 1 Makes

Short Description

Small Picture

Is Made By

General Description

BRAND

All Products

Shopping CartProducts by Category

All Brands

PAYMEMTS

General Description

SHIPPING RATES

General Description




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.


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). 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.


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.

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.


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 (Guided Tour).

3.3 Overall Organization of the website



ContactsCustomer Support

History

Vision

Company

General Information

How to place an order

Shopping Payments General

Description

Home

Small Picture

Short Description

Product

General Information

All Products


Shopping cart

All Brands

Brand

General Description

Brand

Product by Category

Makes

Is Made By

General Description

Legenda

Dialogue Act

Introductory Act

Transition Act

Shipping Rates

Introductory Act All Products

Products by Category Special offer Products

Shopping cart



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. Credits. Customer

Support. Payments. Shipping

Rates.

Bottom

2 More

Important

All Brands. Special Offer Products Products by category All Products

Top



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

Introduction

Some New Release attractive Products picture with price

$ View all Brands $ View all Category $ All Products $ Special offer Products

$ Shipping Rate $ Customer Support $ Company $ Credits

Introduction



3.6 Other Pages Design

Page No.1 Multiple Topics: Product Dialogue Act: Short Description Introductory Act: Special offer Products: Accessing the Products with the Special offer 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. Landmarks: Links in the top, and bottom lateral bar with respect to their importance.


Title Less Important Landmarks Links

Introduction

Detail SpecificationBack to the Home



Short Description of the Product



Page No. 2

Multiple Topic: Product. Dialogue Act: Small Picture. Introductory Act: Special offer Products: Accessing the Products with the Special offer 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,

backward link to the Special Offer Product page Transition links: Brand Landmarks: Links in the top, and bottom lateral bar with respect to their importance.



Introduction

Short DescriptionBack to the Home


$ Shipping Rates $ Customer Support $ Company $ Credits

Small Picture of the Product



Page No. 3

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


Introduction$ View all Brands $ View all Category $ All Products $ Special offer Products


Introduction

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

Forward and backward signBack to the Home



Page No. 4 All Brands:

Content: list of the brands with hyperlinks Structural links: Home page. Landmarks




Introduction



Back to the Home



Page No. 5 History

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




Introduction

VisionBack to the Home



Page No. 6 Products by Category

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




Name and Picture

Category Forward and backward signBake to the Home



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:

Date post:	01-Dec-2014
Category:	Technology
Upload:	mj-ferdous
View:	1,802 times
Download:	2 times