loader

Tư vấn Giao diện web

SỰ HIỆU QUẢ GIAO CỦA GIAO DIỆN MANG TÍNH TƯƠNG ĐỐI, GIAO DIỆN HIỆU QUẢ LÀ GIAO DIỆN DỄ DÙNG, NHIỀU ĐƠN HÀNG, THỎA MÃN ĐƯỢC THÔNG TIN NGƯỜI TRUY CẬP CẦN, NGƯỜI BÁN MUỐN THỂ HIỆN

  1. Số lượng sản phẩm
  2. Ngành hàng
  3. Điều hướng Menu
  4. Đặt hàng
  5. Bố cục ,Canh lề
  6. Mobile-desktop

Một số trang thường có của 1 website bán hàng

  • Trang chủ
  • Trang danh sách sản phẩm
  • Trang chi tiết sản phẩm
  • Trang giỏ hàng
  • Trang thanh toán
  • Trang Thank you (sau khi thanh toán thành công)
  • Trang giới thiệu cửa hàng: giới thiệu và thông tin liên hệ
  • Trang thông tin thêm về sản phẩm, xu hướng
  • Trang hướng dẫn mua hàng: chính sách, hướng dẫn mua hàng, quy định đổi trả

Lưu ý giao diện, cần phải nhớ trước khi đọc tài liệu:

  • Hiện tại Haravan có bao nhiêu giao diện?
  • Phân loại giao diện theo bao nhiêu ngành hàng?
  • Để thuyết phục KH chọn 1 giao diện bạn đề xuất, bạn cần làm cho KH tin bạn là người bán hàng online giỏi để KH học hỏi, hoặc các tư vấn giao diện của bạn có lý
  • Không có thước đo giao diện nào là tốt nhất
  • Cần phải testing và tối ưu liên tục để giao diện phù hợp với tập Kh mục tiêu nhất
  • Yếu tố giao diện không phải là tất cả để bán được hàng
  • Logic: Trái → Phải, Trên → Dưới, Nhưng người dùng sẽ chú ý đến ở trên và bên phải
  • Khác nhau giữa trải nghiệm mobile và desktop
  • Size màn hình
  • Hành vi tương tác: 
    • Chuột và Scroll chuột VS  Ngón tay cái
    • Trên dưới, trái phải  VS từ trên xuống
  • Landing page: là 1 trang web đích khi người dùng click vào 1 link dẫn đến website của mình: ví dụ link từ quảng cáo google, facebook, website khác
  • Sale Page: thường được gọi là trang chi tiết sản phẩm, Landing page, hoặc 1 trang thiết kế riêng để mô tả sản phẩm hoặc 1 campaign promotion: là 1 trang mô tả rất rõ về sản phẩm, mục tiêu để trình bày tốt nhất để làm cho KH hiểu rõ về Sp → Mua.

1/Số lượng sản phẩm: 

+ Từ 20- 200 Sản phẩm: chọn giao diện với menu, bố cục đơn giản , đầy đủ thông tin liên hệ, hỗ trợ mua hàng, hiện sản phẩm theo danh mục đặc trưng.

+Từ 200- trở lên: Chọn giao diện có thể hiển thị đa dạng ngành hàng, bố cục rõ ràng, dễ dàng cho người dùng mua chọn mua được sản phẩm cần tìm trong hàng trăm, hàng ngàn sản phẩm trên website.

2/ Ngành hàng: Chọn lựa giao diện theo đúng ngành hàng, trực quan, giúp khách hàng có thể hình dung được sản phẩm khi hiển thị trên web, dễ dàng chọn giao diện phù hợp theo yêu cầu. 

Giao diện giành cho nhiều loại dành riêng cho các ngành hàng khác nhau: Thời trang, mẹ và bé, nhà hàng, khách sạn, ăn uống, Công nghệ, Mỹ phẩm làm đẹp, siêu thị- nhiều mặt hàng, Bất động sản. 

Đối với ngành hàng khác nhau chọn các giao diện phù hợp với số lượng sản phẩm, demo sản phẩm có form hình chụp sản phẩm tương đồng, đáp ứng các yêu cầu tính năng bán hàng. 

Có thể chỉnh sửa, thêm bớt trên bố cục giao diện gốc cho phù hợp với ngành hàng không có trong danh mục. Phát thảo bố cục để được thiết kế theo yêu cầu, chỉnh sửa theo bảng giao diện 

3/ Giao diện tương thích mọi thiết bị :

Desktop: Giao diện chính cho desktop đáp ứng các tính năng phù hợp, đa dạng bố cục tạo ấn tượng, tích hợp nhanh chóng và dễ dàng với nhiều ứng dụng phát triển thêm tính năng.

Mobile, tablet: Giao diện tương thích mọi màn hình di động, hỗ trợ và chăm sóc người dùng tốt nhất từ chọn lựa sản phẩm, xem thông tin sản phẩm, thanh toán nhanh chóng, an toàn, bảo mật thông tin. 

Bố cục đơn giản, cảm biến touch nhạy, nút mua ngay lớn, rõ dễ chạm chọn, tự động nhận diện kích thước của màn hình điện thoại & trả về giao diện phù hợp với kích thước màn hình của điện thoại, ipad. 

  • Trải nghiệm người dùng tốt  giúp Tăng doanh thu, Tăng thứ hạng website trên Google

4/ Menu các loại hỗ trợ điều hướng rõ ràng:

Có rất nhiều loại menu:  

  • Menu ngang một lựa chọn phổ biến hiện nay, nhưng dường như chúng cũng đã có vẻ lỗi thời so với sự phát triển của hệ thống website hiện đại. Sử dụng cách thiết kế menu hàng ngang có một nhược điểm lớn là chúng bị hạn chế về không gian sử dụng.
  • Menu dọc không bị hạn chế về diện tích, không gian sử dụng, menu hàng dọc có sức chứa rất nhiều danh mục, tha hồ sử dụng từ ngữ cho các danh mục đó. Khi website có quá nhiều danh mục menu, bạn lại có nhu cầu thêm các danh mục khác, thì các danh mục được thêm tự động kéo dãn không gian sử dụng xuống phía bên dưới. 
  • Menu dạng thả ( drop menu hoăc drop down menu)  thường sử dụng đi kèm với cách thiết kế Menu ngang hoặc dọc. Cho phép người dùng sử dụng linh hoạt tất cả các danh mục menu chính hoặc menu phụ. Với các website có nhiều hoặc quá nhiều nội dung, bạn có thể thấy rõ ưu điểm khi sử dụng cách thiết kế menu dạng thả. Drop down menu là một trong những công cụ trình bày danh mục, nội dung hiêu quả dành cho website bán hàng, đặt biệt cho những của hàng đa dạng sản phẩm hoặc các sàn thương mại điện tử.
  • Menu phụ ( Sub menu ) có vai trò bổ sung thêm thông tin cho danh mục chính. Menu phụ thường được thiết kế, đặt tại vị trí nằm ngay dưới menu chính. Mặc dù là menu phụ, nhưng vai trò của nó đôi khi quan trọng hơn rất nhiều so với menu chính. Về chức năng, menu phụ hiển thị chi tiết hơn menu chính, do đó, không gian thiết kế dành cho menu phụ lại chiếm nhiều diện tích hơn menu chính.
  • Menu dạng text kèm thông tin mô tả là kiểu menu dùng từ ngữ là chủ yếu. Trong trường hợp website có nhiều nội dung, lựa chọn bằng các tiêu đề hơi tối nghĩa, thì giải pháp sẽ là bổ sung thêm thông tin là hợp lý nhất. Thông thường, kiểu menu này bao gồm hai phần chính đó là menu chính và menu phụ sắp xếp liền kề nhau, menu chính ở trên, menu phụ nằm phía dưới. Thông tin menu chính đưa ra rất ngắn gọn, vì thế menu phụ có nhiệm vụ bổ sung thông tin cho menu chính. 
  • hình ảnh icon hoặc hình ảnh đồ họa vào trong menu có thể tạo ra một giao diện trực quan sáng tạo, hấp dẫn, thu hút khách ghé thăm. Người dùng có thể liên tưởng nội dung nhờ hình ảnh biểu tượng đại diện cho nội dung hiển thị trên thanh menu. Khi lựa chọn và quyết định sử dụng menu icon, bạn nên thống nhất tất cả các hình ảnh biểu tượng theo một phong cách, tránh sự không đồng nhất dẫn đến người xem, người dùng hiểu nhầm nội dung.  Ví dụ, hình ảnh kính lúp sẽ đại diện cho tìm kiếm thông tin chứ không phải là kiểm tra thông tin. 

5/ Hình ảnh, màu sắc

  • HÌnh ảnh : 
  • Màu sắc: Chọn màu sắc ảnh hưởng tích cực đến khách hàng, khơi dạy trí nhớ, khơi dạy cảm xúc truyền đạt thông tin, nhanh chóng truyền tải thông điệp.
    • Màu sắc được chọn phải phù hợp với ngành nghề kinh doanh,  thống nhất với logo, website, và bao bì sản phẩm.
    • Ý nghĩa màu sắc: 
      • Màu đỏ: thể hiện cho sức mạnh, quyền lực. Nó thường gắn liền với lửa, chiến tranh, bạo lực, nhưng nếu được kết hợp màu đỏ lại thể hiện niềm đam mê, tình yêu mạnh mẽ. Trong thiết kế website, màu đỏ giống như điểm nhấn mạnh mẽ, các màu khác sẽ bị lấn át khi đứng cạnh nó.
      • Màu hồng: Màu hồng là đại diện cho tình yêu, sự lãng mạn. Nếu website cần sự lãng mạn, trẻ trung. 
      • Màu xanh : những màu sắc của thiên nhiên, nó thể hiện sự tươi mới, thư giãn. Nhìn từ một khía cạnh khác, màu xanh tạo sự tin tưởng, hài hòa cân đối, độ tin cậy cao. Những website về môi trường, tài chính, ngân hàng nên sử dụng gam màu này cho website. 
      • Màu nâu: Nâu là màu của đất, thể hiện sự bền vững, vững chắc, tin cậy. Những website về ngành xây dựng, công nghiệp, nông nghiệp thường sử dụng gam màu này. Ngoài ra một số thiết kế của cà phê, sô cô la cũng sử dụng màu này.
      • Màu hồng phấn: Hồng phấn thể hiện cho phái nữ, thường được sử dụng phổ biến cho các website thời trang trẻ thơ, đẹp. Không phù hợp cho các website ngành kỹ thuật.
      • Màu trắng: Màu trắng phổ biến nhất cho màu các giao diện website, trắng thể hiện cho sự tinh khiết, hồn nhiên, tình bạn, hòa bình,…Màu trắng tạo cho người xem sự thiện cảm, tạo cảm giác dễ chịu khi đó. 

Màu tím: Sự huyền bí, thanh lịch, chung thủy là những đặc trưng của màu tím. Kết hợp với sự mạnh mẽ, lớn lao, bé nhỏ. Màu tím thường được sử dụng cho các website giáo dục, tôn giáo.

      • Màu đen :Là màu đối lập với trắng, tạo sự huyền bí tuyệt đối, đại diện sự sang trọng, quý phái, tinh tế. Màu đen được sử dụng trong các website có các đối tượng khách hàng cao cấp, tạo ra sự bí ẩn đại diện cho quyền lực. Khiến người xem vừa run sợ vừa tò mò.
      • Màu vàng: Theo ý nghĩa người phương Đông, màu vàng tượng trưng cho mặt trời, chính vì lý do này nên màu vàng mang lại sự lạc quan tích cực, nhẹ nhàng và ấm áp. Yêu màu vàng là yêu sự khám phá, nhạy cảm, nhiệt huyết. Màu vàng thường được sử dụng trong ngành thực phẩm và công nghiệp đóng tàu.

6/ Nút đặt hàng, tạo đơn hàng dễ dàng, nhanh chóng :  hệ thống nút bấm , đi link logic. 

màu sắc tươi sáng cũng có thể được dùng để làm nổi bật các nút bấm (buttons) trong trang web hoặc các yếu tố giao diện người dùng (UI elements) khác để thu hút sự chú ý của người sử dụng.

nút kêu gọi hành động trông cực nổi bật nhờ vào background cũng như hình ảnh sản phẩm với màu trắng đồng nhất. hay màu đỏ trên nền trắng đen đã thu hút mọi sự chú ý về phía nó.

Bài viết tương tự

Hướng dẫn kiểm tra số dư trên ứng dụng eTop

Tại hệ thống phần mềm quản lý bán hàng eTop, mọi thống kê số liệu được hiển thị một cách chi tiết. Bên cạnh đó, chủ shop cũng có thể kiểm tra nhanh số dư đối với các đơn giao hàng đã, đang và sắp được giao trên ứng dụng eTop với các thao tác […]

Hướng dẫn kết nối vận chuyển cùng Ahamove

Kết nối vận chuyển không chỉ áp dụng với các đơn vị giao hàng thông thường mà còn với dịch vụ giao hàng tức thì của Ahamove. Bạn thực hiện thao tác tương tự như kết nối vận chuyển cùng GHTK, GHN… theo các bước sau. Bước 1: Đăng nhập vào tài khoản eTop/TOPSHIP tại […]

Hướng dẫn quản lý giao hàng

Quản lý giao hàng tại eTop.vn – Thiết lập các thông tin cơ bản để thực hiện đơn giao hàng, cũng như nắm các thông tin để quản lý trạng thái giao hàng, chuyển tiền thu hộ,.. Để quản lý giao hàng, bạn chỉ cần thực hiện các bước đơn giản sau: Bước 1: Đăng […]

Bài viết liên quan

Hướng dẫn nhập mã giới thiệu tại eTop trên trình duyệt

Với mỗi tài khoản đăng ký trên phần mềm quản lý bán hàng eTop, chủ shop sẽ có riêng một mã giới thiệu cho mình. Bạn có thể hiểu mã giới thiệu tương tự như một số hiệu của bạn trên hệ thống của eTop. Tại hệ thống eTop, mã giới thiệu sẽ chính là […]

Hướng dẫn thêm địa chỉ lấy hàng mới trên ứng dụng eTop

Một cửa hàng có thể có nhiều địa chỉ chi nhánh khác nhau. Hệ thống có kho lưu trữ thông tin địa chỉ vô hạn nên chủ shop hãy tận dụng nó để quản lý nghiệp vụ giao hàng tốt hơn nhé! Bước 1: Đăng nhập tài khoản trên ứng dụng eTop. Cài đặt ứng […]

Hướng dẫn gửi yêu cầu hỗ trợ trên ứng dụng eTop

Để thay đổi thông tin với các đơn hàng đã được tạo lệnh giao hàng với nhà vận chuyển, chủ shop chỉ có thể nhờ sự can thiệp của bộ phận CSKH eTop để yêu cầu hỗ trợ. Giờ đây, bạn có thể làm trực tiếp điều đó ngay trên ứng dụng điện thoại của […]