Thiết kế giao diện người dùng trong website bán điện thoại di động trực tuyến (Báo cáo môn học Tương tác người máy )

Mục đích xây dựng hệ thống Ngày nay , điện thoại di động là một thiết bị không còn xa lạ với mỗi chúng ta . Đối với nhiều người thì nó là một thiết bị không thể thiếu trong công việc và cuộc sống hàng ngày. Tuy nhiên, để chọn được một chiếc điện thoại phù hợp với nhu cầu, sở thích thì bạn sẽ phải bỏ không ít công sức để tìm hiểu thông tin về giá cả , chức năng, ưu nhược điểm của nó . Không muốn mất nhiều thời gian , công sức mà vẫn mua được một chiếc điện thoại yêu thích với giá cả hợp lý và chất lượng là mong muốn của bất cứ người dùng nào. Nắm bắt được nhu cầu, tâm lý đó của khách hàng, chúng tôi đã xây dựng một website hỗ trợ mua bán điện thoại trực tuyến giúp bạn tìm kiếm sự đơn giản mà hiệu quả. Khảo sát hệ thống cũ: Khi chưa có ứng dụng CNTT vào thương mại thì mọi thứ đều phải làm thủ công . Khách hàng sẽ phải trực tiếp đến các cửa hàng bán điện thoại để xem và chọn hàng , khi đó có thể họ sẽ không được cung cấp đầy đủ các thông tin liên quan đến sản phẩm . Dưới đây chúng tôi sẽ chỉ ra những nhược điểm cụ thể : • Đối với khách hàng : • Tốn nhiều thời gian , công sức , chi phí đi lại , mà chưa chắc đã tìm được sản phẩm ưng ý • Không xem được tất cả các mặt hàng • Đối với nhà sản xuất o Phải chi phí nhiều cho việc tìm kiếm một mặt bằng tốt để bày bán sản phẩm , chi phí nhân viên, … o Không giới thiệu được đầy đủ các mặt hàng , thông tin về mặt hàng , và các thông tin khác có liên quan .. o Khó quản lý được khách hàng ( chính sách ưu đãi công ty với khách hàng thường xuyên .. ) • Khó khăn chung : o Xử lý đơn hàng thủ công , làm giảm hiệu suất kinh doanh. Hiện nay, tại Việt Nam, khi mà đường truyền, băng thông internet ngày càng được mở rộng , số người tham gia internet gia tăng , người dùng đã bắt đầu có thói quen mua hàng qua mạng , hành lang pháp lý và hỗ trợ thanh toán qua internet ngày càng hoàn chỉnh… thương mại điện tử ở Việt Nam đã dần được các công ty , doanh nghiệp quan tâm đầu tư . Tuy nhiên , đó mới chỉ là tín hiệu đáng mừng ban đầu khi mà thực tế chỉ có vỏn vẹn 3.5% trong tổng số doanh nghiệp trên cả nước áp dụng phương thức thanh toán trực tuyến( số liệu cập nhật ngày 27042009 theo VnEconomy) . Một trong những trở ngại làm cản trở phát triển thương mại điện tử là các vấn đề sau : • Người mua và người bán thực hiện theo hình thức “tiền trao , cháo múc” và tâm lý “sờ tận tay” , nên người tiêu dùng lo ngại mua phải sản phẩm không dùng được hoặc chất lượng không đạt như mong muốn • Vấn đề đảm bảo an ninh , an toàn trong giao dịch điện tử nhất là về dữ liệu thông tin người tiêu dùng , vì còn thiếu những quy định , chế tài cụ thể để bảo vệ thông tin cá nhân trên môi trường mạng. Đề xuất hệ thống: Sự ra đời của website http:www.bachkhoamobile.com mục đích để cung cấp cho khách hàng các thông tin về sản phẩm , các tin tức công nghệ của điện thoại di động ; đưa ra các mô tả chi tiết kèm hình ảnh cho các mặt hàng điện thoại bày bán; đồng thời cung cấp kênh thông tin trao đổi giữa khách hàng với công ty để người mua có thể dễ dàng hơn khi quyết định mua sản phẩm và người bán dễ dàng hơn trong việc nắm bắt thị hiếu người tiêu dùng. Mục tiêu: • Xây dựng sản phẩm là một hệ thống hoàn thiện, sử dụng đạt được hiệu quả cao • Xây dựng phần mềm giúp đỡ người dùng có thể theo dõi. Tìm kiếm, mua điện thoại một cách dễ dàng nhất. • Xây dựng phần mềm thân thiện với người dùng với giao diện đẹp, bắt mắt. • Xây dựng phần mềm dễ sử dụng, tiện lợi cho người sử dụng. PHẦN 1: ĐẶC TẢ YÊU CẦU NGỪỜI DÙNG VÀ PHÂN TÍCH NHIỆM VỤ 1. Đặc tả chức năng 1.1. Sơ đồ mô tả các thành phần trong hệ thống

Báo cáo môn học Tương tác người - máy

Đề Tài:

Thiết kế giao diện người dùng trong website

bán điện thoại di động trực tuyến

Nhóm 15 :

Hoàng Thanh Tùng - 20073294Nguyễn Tiến Dũng -Nguyễn Thế Cường -Đậu Thanh Bình - 20060202Trần Xuân Vũ - Lớp HTTT – K52

Mục đích xây dựng hệ thống

Ngày nay , điện thoại di động là một thiết bị không còn xa lạ với mỗi chúng ta Đối với nhiều người thì nó là một thiết bị không thể thiếu trong công việc và cuộc sống hàng ngày Tuy nhiên, để chọn được một chiếc điện thoại phù hợp với nhu cầu, sở thích thì bạn sẽ phải bỏ không

ít công sức để tìm hiểu thông tin về giá cả , chức năng, ưu nhược điểm của nó

Không muốn mất nhiều thời gian , công sức mà vẫn mua được một chiếc điện thoại yêu thích với giá cả hợp lý và chất lượng là mong muốn của bất cứ người dùng nào

Nắm bắt được nhu cầu, tâm lý đó của khách hàng, chúng tôi đã xây dựng một website hỗ trợ mua bán điện thoại trực tuyến giúp bạn tìm kiếm sự đơn giản mà hiệu quả

* Khảo sát hệ thống cũ:

Khi chưa có ứng dụng CNTT vào thương mại thì mọi thứ đều phải làm thủ công Khách hàng sẽphải trực tiếp đến các cửa hàng bán điện thoại để xem và chọn hàng , khi đó có thể họ sẽ không được cung cấp đầy đủ các thông tin liên quan đến sản phẩm Dưới đây chúng tôi sẽ chỉ ra những

 Không xem được tất cả các mặt hàng

o Phải chi phí nhiều cho việc tìm kiếm một mặt bằng tốt để bày bán sản phẩm , chi phí nhân viên, …

o Không giới thiệu được đầy đủ các mặt hàng , thông tin về mặt hàng , và các thôngtin khác có liên quan

o Khó quản lý được khách hàng ( chính sách ưu đãi công ty với khách hàng thường xuyên )

o Xử lý đơn hàng thủ công , làm giảm hiệu suất kinh doanh

Hiện nay, tại Việt Nam, khi mà đường truyền, băng thông internet ngày càng được mở rộng , số người tham gia internet gia tăng , người dùng đã bắt đầu có thói quen mua hàng qua mạng , hànhlang pháp lý và hỗ trợ thanh toán qua internet ngày càng hoàn chỉnh… thương mại điện tử ở ViệtNam đã dần được các công ty , doanh nghiệp quan tâm đầu tư Tuy nhiên , đó mới chỉ là tín hiệu đáng mừng ban đầu khi mà thực tế chỉ có vỏn vẹn 3.5% trong tổng số doanh nghiệp trên cả nước áp dụng phương thức thanh toán trực tuyến( số liệu cập nhật ngày 27/04/2009 theo

VnEconomy) Một trong những trở ngại làm cản trở phát triển thương mại điện tử là các vấn đề sau :

 Người mua và người bán thực hiện theo hình thức “tiền trao , cháo múc” và tâm lý “sờ tận tay” , nên người tiêu dùng lo ngại mua phải sản phẩm không dùng được hoặc chất lượng không đạt như mong muốn

 Vấn đề đảm bảo an ninh , an toàn trong giao dịch điện tử nhất là về dữ liệu thông tin người tiêu dùng , vì còn thiếu những quy định , chế tài cụ thể để bảo vệ thông tin cá nhântrên môi trường mạng

* Đề xuất hệ thống:

Sự ra đời của website http://www.bachkhoamobile.com mục đích để cung cấp cho khách hàng các thông tin về sản phẩm , các tin tức công nghệ của điện thoại di động ; đưa ra các mô tả chi tiết kèm hình ảnh cho các mặt hàng điện thoại bày bán; đồng thời cung cấp kênh thông tin trao đổi giữa khách hàng với công ty để người mua có thể dễ dàng hơn khi quyết định mua sản phẩm và người bán dễ dàng hơn trong việc nắm bắt thị hiếu người tiêu dùng

* Mục tiêu:

Xây dựng sản phẩm là một hệ thống hoàn thiện, sử dụng đạt được hiệu quả cao

PHẦN 1: ĐẶC TẢ YÊU CẦU NGỪỜI DÙNG VÀ PHÂN TÍCH NHIỆM VỤ

1 Đặc tả chức năng

1.1 Sơ đồ mô tả các thành phần trong hệ thống

HỆ THỐNG BÁN HÀNG ĐIỆN THOẠI BKMOBILE

Khách hàng

Ban quản lý

Tra cứu sản phẩm Phản hồi tra cứu sản phẩm

Đăng ký tài khoản

Phản hồi

Yêu cầu báo cáo Báo cáo Hóa đơn thanh toán

Cập nhật sản phẩm Cập nhật tin tức - quảng cáo Đặt hàng

1.2 Mô tả hoạt động nghiệp vụ của hệ thống

1.2.1 Guest ( Khách vãng lai)

1.Chức năng xem tin tức :

 Description: xem các thông tin đã được đăng tải trên trang web : tin tức về các dòng

điện thoại mới , công nghệ mới , các đánh giá của chuyên gia về ưu nhược điểm của các điện thoại

 Input: click vào tin tức cần xem

 Process: hệ thống nhận yêu cầu từ khách và truy vấn trong CSDL

 Output: hiển thị nội dung thông tin mà khách cần xem

o Mô tả : Phụ kiện đi kèm (bao da , vỏ máy, pin , tai nghe,thẻ nhớ…)

 Input: Click vào sản phẩm cần xem

 Process: Hệ thống nhận yêu cầu từ khách và truy vấn trong CSDL

 Output: Hiển thị nội dung thông tin mà khách cần xem

3.Chức năng đăng ký thành viên :

 Description: Khách vãng lai có thể đăng ký làm thành viên

 Input: Click vào mục đăng ký Khách vãng lai cần đồng ý với các điều khoản thành

viên của website, sau đó nhập đầy đủ các thông tin cần thiết một cách chính xác mà

hệ thống yêu cầu

 Process: Hệ thống sẽ kiểm tra thông tin nhập vào đúng hay sai Nếu đúng thì lưu

thông tin đăng ký vào CSDL và thêm một bản ghi vào CSDL của hệ thống Nếu sai hoặc thông tin bị trùng lặp với một tài khoản nào đó thì không lưu vào CSDL

 Output: Thông báo đăng ký thành công hoặc không thành công Nếu dữ liệu nhập

vào không đúng hay bị trùng lặp , đồng thời đưa ra yêu cầu nhập lại thông tin đăng

o Theo giá : từ 5-10tr ; từ 1-5tr ; 1tr trở xuống …

 Input: Khách chọn cách thức tìm kiếm

 Process: Thu thập thông tin khách hàng nhập vào và tìm kiếm trong CSDL

 Output: hiển thị nội dung thông tin tìm thấy hoặc thông báo khi không tìm thấy 5.Chức năng so sánh sản phẩm

 Description: cho phép khách hàng so sánh sản phẩm theo 1 số tiêu chí :

 Input: click vào so sánh, chọn điện thoại A , rồi sau đó chọn điện thoại B

 Process: hệ thống nhận yêu cầu từ khách và truy vấn trong CSDL

 Output: hiển thị nội dung thông tin so sánh mà khách cần xem

6.Chức năng chọn và sửa giỏ hàng

 Description: cho phép khách hàng chọn các mặt hàng muốn mua và hệ tự động cập

nhật vào giỏ hàng Khách hàng có thể xóa , thêm , sửa hoặc xóa tất cả các mặt hàng

đã chọn trong giỏ hàng Nhưng không thể đặt hàng nếu chưa có tài khoản thành viên trong hệ thống

 Input: Chọn mặt hàng muốn mua và nhấn nút mua hàng,nếu muốn sửa giỏ hàng thì

click vào các nút tương ứng

 Process: hệ thống nhận yêu cầu từ khách và truy vấn trong CSDL

 Output: hiển thị những mặt hàng có trong giỏ hàng

7.Chức năng liên hệ , hỗ trợ

 Description: Khách hàng có thể liên hệ với công ty để đặt hàng hay để giải quyết

những vấn đề khi mua hàng bằng các hình thức sau:

o Gọi điện trực tiếp

 Input: click vào liên hệ và nhập thông tin theo một form đã xây dựng sẵn mà khách

muốn liên hệ

 Process: hệ thống nhận form yêu cầu từ khách ,kiểm tra tính hợp lệ rồi insert dữ liệu

vào database

 Description: Đăng nhập vào hệ thống để tham gia mua bán bằng email và password

đã đăng ký

 Input: Nhập username và password vào phần đăng nhập

 Process: kiểm tra tính hợp lệ của dữ liệu , nếu có trong CSDL thì cho phép đăng

nhập , ngược lại từ chối đăng nhập

 Output: thông báo đăng nhập thành công hoặc không thành công nếu thông tin đăng

nhập không hợp lệ thì thông báo sai thông tin và nhập lại

2.Chức năng gửi ý kiến góp ý

 Description: Cho phép khách hàng gửi ý kiến đánh giá về sản phẩm , nhận xét , góp

ý của khách hàng

 Input: Khách điền tiêu đề , nội dung thông tin phản hồi

 Process: hệ thống nhận yêu cầu từ khách ,kiểm tra tính hợp lệ rồi insert dữ liệu vào

database

 Output: thông báo đã gửi thành công hoặc thất bại và yêu cầu khách nhập lại 3.Chức năng xem , sửa thông tin cá nhân

 Description: Cho phép khách thay đổi các thông tin của mình cho đúng.

 Input:Khách hàng click vào sửa thông tin

 Process: hệ thống hiển thị thông tin cũ và cho phép người dùng thay đổi thông tin

của mình như số điện thoại , địa chỉ , email Kiểm tra tính hợp lệ của thông tin mới

 Output: Nếu thông tin hợp lệ hiển thị thông báo thay đổi thành công Ngược lại

thông báo kiểm tra lại thông tin

4.Chức năng đặt hàng

 Description: Cho phép khách đặt mua hàng sau khi chọn được những mặt hàng cần

mua

 Input:Khách hàng chọn một mặt hàng và click link cho vào giỏ hàng

 Process: hệ thống sẽ thiết lập các sản phẩm trong giỏ hàng của khách hàng Khi

khách hàng click đặt hàng , hệ thống sẽ thực hiện lưu đơn hàng đó trong database

 Output: Liệt kê các thông số ( giá , số lượng , tổng giá, tên sản phẩm ) của các sản

phẩm trong giỏ hàng của khách

5.Chức năng thay đổi đơn hàng

 Description: Cho phép khách hàng thay đổi sản phẩm , số lượng đặt mua, xóa sản

phẩm, hủy đơn hàng

 Input:Khách hàng click vào link xóa , sửa để thay đổi các thông số nếu cần

 Process: Tùy thuộc vào lựa chọn của khách hàng để thực hiện xử lý

 Input: Nhập tài khoản email và password

 Process:Kiểm tra email và password xem có tài khoản trong database không

 Output: Nếu email và password hợp lệ , link vào trang chủ của admin Ngược lại ,

thông báo đăng nhập thất bại

2.Quản lý thành viên

 Description: Cho phép admin xem thông tin về thành viên , xóa thành viên.

 Input: Admin click vào link tương ứng với mỗi thành viên để xem thông tin , hoặc

thao tác xóa , sửa

 Process: Hệ thống sẽ tùy lựa chọn của admin để xử lý

 Output: Hiển thị thông tin cá nhân của thành viên

3.Quản lý hóa đơn đặt hàng

 Description: Cho phép admin xem , xử lý , thống kê các đơn hàng.

 Input: Admin click vào mục quản lý các đơn đặt hàng , hệ thống sẽ hiển thị tất cả

các đơn đặt hàng theo thứ tự thời gian muộn nhất

 Process: Hệ thống xóa , sửa , hoặc hiển thị danh sách đơn hàng theo yêu cầu

 Output: Hiển thị bảng liệt kê các hóa đơn hiện có

4.Quản lý hãng sản xuất

 Description: Cho phép admin thêm hãng sản xuất mới, xóa sửa.

 Input: Admin click vào link thêm , xóa sửa , hoặc mục tìm kiếm tùy theo yêu cầu

 Process: Hệ thống sẽ hiển thị kết quả tìm kiếm , insert , update , hoặc delete hãng sản

 Input: Admin click vào link thêm , xóa sửa , hoặc mục tìm kiếm tùy theo yêu cầu

 Process: Hệ thống sẽ hiển thị kết quả tìm kiếm , insert , update , hoặc delete sản

phẩm từ database

 Output: Hiển thị bảng thông báo

6.Quản lý tin tức

 Description: Cho phép admin thêm tin tức mới , xóa hoặc sửa tin tức, tối ưu hóa với

bộ máy tìm kiếm của các trang search nổi tiếng như google , bing , yahoo…

7.Quản lý góp ý

 Description: Cho phép admin xem các góp ý của khách hàng, có thể xóa.

 Input: Admin click vào mục xem và có thể xóa phản hồi

 Process: Hệ thống sẽ xóa hoặc cập nhật mới vào CSDL

 Output: Hiển thị tất cả phản hồi

8.Quản lý quảng cáo

 Description: Cho phép admin quản lý , thêm bớt các thành phần , chuyên mục quảng

cáo

 Input: Admin click vào các mục xóa quảng cáo hoặc sửa liên kết đến khung quảng

cáo

 Process: Hệ thống sẽ xóa hoặc cập nhật mới vào CSDL

 Output: Hiển thị quảng cáo mới trên trang

9.Quản lý thống kê

 Description: Cho phép admin xem thống kê doanh thu theo các tháng và quý trong

năm ; xem thống kê số lần mua của khách hàng ; xem thống kê số lượng sản phẩm

 Input: Admin click vào các mục thống kê

 Process: Hệ thống sẽ xử lý thống kê trong CSDL

 Output: Hiển thị thống kê theo yêu cầu

2 Đặc tả dữ liệu

2.1.1 Đ i v i Ban Qu n Tr ( Admin) ối với Ban Quản Trị ( Admin) ới Ban Quản Trị ( Admin) ản Trị ( Admin) ị ( Admin)

§¨ng NhËp

Qu¶n Lý Lo¹i S¶n PhÈm

<<includes>>

Qu¶n Lý S¶n PhÈm

<<includes>>

<<includes>>

Qu¶n Lý Thµnh Viªn

Qu¶n Lý

Nh©n Viªn

2.1.2 Đ i v i Nhân viên ối với Ban Quản Trị ( Admin) ới Ban Quản Trị ( Admin)

Nh©n viªn

§¨ng xuÊt

§¨ng nhËp

In Danh s¸chS¶n phÈm

LËp Hãa

§¬n

Thèng Kª HµngB¸n § îc

CËp nhËt S¶nPhÈm

<<include>>

2.1.3 Đối với Người Sử Dụng ( User)

§¨ng NhËp

§¨ng ký

Theo dâi S¶n PhÈm

T×m KiÕm S¶n PhÈm

§ a SP Vµo

Giá Hµng

§æi MËt KhÈu

§Æt Hãa

§¬n

<<includes>>

Hç Trî Trùc TuyÕn

§¨ng XuÊt

Th«ng Tin Chi TiÕt SP

S¶n PhÈm B¸n Ch¹y

S¶n PhÈm Míi

T×m KiÕm Theo Tªn SP

T×m KiÕm Theo Gi¸

T×m KiÕm SP Theo H·ng SX

So S¸nh SP <<precedes>>

<<includes>>

Söa Th«ng Tin C¸ Nh©n

Tiếp theo, nếu ta chọn tiếp nút “Tiếp tục chọn hàng” thì cũng làm tương tự như trên, ta sẽ có thể chọn mua tiếp các sản phẩm.

- Tính quen thuộc : Người dùng vận dụng các kiến thức có từ trước để quyết định xem phải làm gì trong các tình huống mới.

- Tính khái quát : Người dùng khái quát những quy luật và kỹ năng để áp dụng vào các trường hợp tương tự Hệ thống hỗ trợ bằng cách hoạt động tương tự trong những tình huống tương tự.

VD : Trong trang của Admin, sau khi thêm một sản phẩm, ta có thể làm làm tương tự với việc thêm tin tức, thêm loại hãng sản xuất, v.v…

VD: Khi người dùng chưa đăng nhập, trạng thái của người dùng lúc đó là khách vãng lai, khi đó hệ thống

sẽ hiển thị form đăng nhập cho người dùng

Nhưng sau khi đăng nhập, trạng thái của khách hàng được chuyển thành Thành viên, khi đó hệ thống sẽ hiển thị thông báo và các tính năng của khách hàng.

- Tính phản ứng nhanh : Cho phép người dùng nhận biết được phản ứng cho hành động của họ ngay lập tức.

VD : Khi người dùng chọn so sánh sản phẩm, hệ thống sẽ hiển thị một bảng so sánh 2 sản phẩm, với sản phẩm bên trái là sản phẩm người dùng vừa chọn, còn sản phẩm bên phải để trống Ngay lập tức, người dùng có thể hiểu ngay rằng, phần để trống chính là nơi người dùng chọn sản phẩm tiếp theo để so sánh.

nhau trong các trường hợp khác nhau Tính linh động thể hiện qua:

- Tinh thay thế được : Cho phép những giá trị vào ra tương đương có thể thay thế thoải mái.VD: Khi khách hàng đưa sản phẩm vào giỏ hàng, nếu muốn tăng số lượng, khách hàng chỉ cần thay đổi ở ô số lượng, khi đó hệ thống sẽ tự động cập nhật số lượng và số tiền

- Tính tùy biến : Cho phép hệ thống có thể thích nghi được với yêu cầu của người dùng.

VD : Người dùng có thể thay đổi thông tin cá nhân của chính mình.

3.4 Tính cảm xúc (affectiveness)

Tính cảm xúc thể hiện qua mức độ ưa thích và thoải mái của người sử dụng khi sử dụng hệ thống Điều này được thể hiện chủ yếu ở tính thẩm mỹ của giao diện.

1 Lựa chọn kiểu giao tiếp phù hợp với hệ thống

Hệ thống được cài đặt trên nền web để thuận tiện cho việc sử dụng, mà không yêu cầu cài đặt ở người dùng cuối Vì vậy hệ thống sử dụng kết hợp 2 kiểu giao tiếp thường sử dụng trong thiết kếgiao diện web là kiểu Menu và Form điền

Chủ yếu dùng truy xuất dữ liệu: thêm và cập nhập thông tin Các dữ liệu đều có một khuôn mẫu nhất định Màn hình giống như một khuôn mẫu Cách thiết kế này rất phù hợp vì việc thiết kế các form mẫu thường được hỗ trợ nhiều và xét về các đặc điểm tâm

lý của người sử dụng, các thông tin nhập vào là thông tin về sách, bạn đọc … đều có khuôn mẫu Ta có thể dựa vào đó để xây dựng lên form cho chương trình Do đó giao diện sẽ vẫn gần gũi với người sử dụng

Tuy nhiên cách sử dụng này có một số ưu điểm và nhược điểm như sau

+ Tự nhiên, quen thuộc , dễ thiết kế, có chỉ dẫn cần thiết

+ Dễ dàng thay đổi khi cần

+ Thiếu sáng tạo của người dùng

+ Tải cao với Hệ Thống, mạng

 Menu là tập các lựa chọn có thể cho người dùng, được hiện trên màn hình

và được chọn bởi chuột, phím tắt

thả (pull-down hay pop up), ngữ cảnh, tách rời, chồng chéo,

 Chất lượng : Dễ học, dễ dùng và có nhiều lựa chọn Có hướng dẫn, ít nhớ.Thích hợp với Người Dùng không thường xuyên

 Nhược điểm : Tốn không gian nhớ màn hình Thông tin có thể bị che dấu trong các menu con Chậm với Người Sử Dụng thành thạo

2 Phân tích thông qua mô hình Phân tích nhận thức theo chu trình nhận thức – hành động (GOMS)