Xu hướng thiết kế giao diện cho TMĐT trong 2014


Mới đầu tháng 1/2014 mà tỷ trọng người dùng mobile truy cập riêng 123Mua.vn đã lên đến 41%. Điều này chứng tỏ xu hướng người dùng mobile phát triển không chỉ ở thế giới mà đã ảnh hưởng đến cả Việt Nam. Việc thiết kế giao diện cho trang web TMĐT giờ đây không chỉ đơn thuần đáp ứng người dùng desktop hay laptop mà còn phải đáp ứng số đông người dùng mobile để bắt nhịp thời đại.

Mình tổng hợp vài hình thức thiết kế giao diện đã xuất hiện từ trong năm 2013 và sẽ tiếp tục trở thành xu hướng trong 2014 để mọi người cùng tham khảo.

  1. Thiết kế theo dạng “Reponsive”

    Thiết kế website theo hình thức “Responsive” có nghĩa là cho phép giao diện trang web co giãn khi điều chỉnh kích thước trình duyệt. Khi kích thước trình duyệt thay đổi thì giao diện trang web của bạn cũng tùy biến thay đổi theo và hiển thị nội dung sao cho người dùng dễ nhìn nhất (tương ứng với kích thước màn hình của máy tính để bàn, laptop, tablet và nhỏ nhất là kích thước màn hình của điện thoại di động)


    Những bạn làm công tác design và HTML có thể tham khảo các chuẩn thiết kế CSS theo hình thức linh động (gọi là Flexible Box Layout Module) tại đây. Phương pháp này cho phép thiết kế giao diện có tính phản hồi tốt xuyên suốt các trình duyệt thông dụng ngày nay như Chrome 31, Firefox 25, Internet Explorer 10, Safari 7, Opera 18, iOS Safari 7, Android Browser 2.1, Blackberry Browser 10, and IE Mobile 10.

    Bạn cũng có thể tham khảo thêm 3 nguồn tài liêu sau nếu chưa quen với hình thức Flexible Box Layout Module ở trên:

    1. CSS-Tricks’ “A Complete Guide to Flexbox,”
    2. Mozilla Developer Network’s “Using CSS Flexible Boxes,”
    3. Philip Walton’s“Solved by Flexbox.”
  1. Thiết kế cho phép tương tác bằng ngón tay

    Vì xu hướng thiết kế cho mobile phát triển nên việc thiết kế để dùng ngón tay điều khiển cũng sẽ là 1 xu hướng trong 2014. Nói chung làm thế nào để người dùng smart phone và tablet xài giao diện web một cách thoải mái nhất bằng ngón tay hoặc thậm chi là dùng bút stylus kiểu xưa được là OK.


    Đối với việc thiết kế giao diện cho ứng dụng TMĐT thì có 2 xu hướng khi thiết kế giao diện dạng thân thiện với ngón tay như sau:

    1. Dạng thứ nhất, sẽ hạn chế bớt thanh trượt dọc trong giao diện. Cho phép người dùng lướt xem các nội dung được liệt kế dài bằng cách quẹt tay vào màn hình. Tuy nhiên, tùy theo mục đích hiển thị. Bạn có thể sẽ cho lướt lên xuống không giới hạn, lướt đến đâu nạp thông tin đến đó. Tuy nhiên, làm cách này bạn phải dùng cache nạp thông tin trước để người dùng có cảm giác lướt nhanh thông tin. Ngược lại, để giảm tải cho việc cache dữ liệu, bạn có thể chỉ cho phép “quẹt tay” khoảng tối đa 3 đến 4 lần và rồi xuất hiện nút “xem tiếp” nếu người dùng có nhu cầu xem thêm thông tin. Thiết kế dạng này thì mình có thể show được phần banner của chân trang mobile web.
    2. Dạng thứ hai, sẽ thiết kế sao cho các nút lệnh dạng “call to action” to hơn hoặc các liên kết được nhìn rõ hơn để người dùng dễ dàng nhấn ngón tay để chọn nút lệnh “đặt hàng” hoặc chọn các liên kết để xem tiếp thông tin.
  2. Thiết kế giao diện phẳng

    Thiết kế dạng này được nhìn thấy rõ nhất trong giao diện Windows 8 và iOS của Apple 7 và nhiều trang web phổ biến khác. Kiểu thiết kế này sẽ tránh việc đổ bóng hoặc các hình thức gồ ghề, thay vào đó là tập trung cho những tông màu mạnh mẽ, tương phản và font chữ nhìn lạ mắt.



    Hình thức thiết kế này có lợi ích là tạo ra một giao diện khá đơn giản nhưng lại rất tốt cho việc “Responsive”. Vì cách thiết kế này không dùng nhiều đồ họa nên kích thước các tập tin khá nhỏ, thuận tiện cho việc tải nhanh các trang web.

    Tham khảo trang http://canopy.co/ là một trang được thiết kế theo dạng phẳng và phục vụ cho việc tìm kiếm và chia sẻ thông tin sản phẩm trên Amazon. Đây có thể xem là một ví dụ hay cho mẫu thiết kế phẳng và phục vụ cho TMĐT. Đồng thời cũng có khả năng “responsive” khá tốt.

     

  3. Cung cấp thật nhiều nội dung chỉ trên 1 trang

    Nhiều nhà thiết kế và phát triển web trong năm nay sẽ áp dụng hình thức đổ nhiều thông tin sản phẩm vào một trang web duy nhất và điều này dẫn đến ít nhất 2 hiệu ứng như sau:

    Xem nhanh thông tin, cho phép người mua hàng có thật nhiều thông tin mà không cần phải chạy qua lại các trang khác nhau. Điều này sẽ rất phù hợp đối với người dùng mobile, cứ thể “vuốt” màn hình để xem thông tin sản phẩm và không cần load thêm các trang mới.

    Các trang cũng sẽ có khuynh hướng dài hơn và thậm chí bạn sẽ phải lướt xuống phía dưới không giới hạn giống như hình thức của trang Tumblr hoặc Pinterest


     

  4. Sử dụng hình ảnh kích thước lớn

    Điều này nghe có vẻ ngược với xu hướng thiết kế giao diện thân thiện cho người dùng mobile. Tuy nhiên, các nhà thiết kế và lập trình web sẽ phải cân đối sao cho hình ảnh to nhưng vẫn tối ưu cho màn hình của mobile. Hình ảnh lớn sẽ tạo được ấn tượng mạnh mẽ và kích thích người dùng “click” để xem.

    Xu hướng thiết kế này cũng ăn theo hình thức thiết kế thân thiện với việc lướt web bằng ngón tay. Chắc chắn xu thế hình ảnh cỡ lớn sẽ phát triển mạnh trong năm 2014.

    Tham khảo những trang này không đẹp không ăn tiền hehe..

    http://www.bornshoes.com/

    http://www.haggar.com/home/index.jsp

    http://www.tommybahama.com/

  5. Tăng cường sử dụng Video trên trang TMĐT

    Xu hướng xem video trực tuyến ngày càng gia tăng và với sự phát triển khá tốt của đường truyền ADSL, 3G người tiêu dùng ngày nay sẽ không hề ngần ngại xem các clip trên tablet và smartphone.


    Chính vì thế mà xu hướng giới thiệu thông tin về sản phẩm bằng video cũng sẽ phát triển mạnh mẽ trong năm 2014 này.

    Trên đây là vài xu hướng thiết kế để các bạn cùng tham khảo trong thời đại Mobile Internet. Hy vọng giúp bạn có thêm vài thông tin bổ ích.

Nguyễn Thế Đông (sưu tập)



About dongnguyenthe

Luôn tìm cách cân bằng giữa cuộc sống và công việc. Ngoài thời gian làm việc bận rộn, tôi thích dành nhiều thời gian cho bọn trẻ con, giúp chúng học và giải trí, tập luyện thể thao. Về cá nhân, tôi rất coi trọng việc rèn luyện và phát triển các kỹ năng cá nhân, thích đọc sách, viết lách, du lịch mạo hiểm và chụp ảnh.
This entry was posted in Ecommerce. Bookmark the permalink.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s