Thiết kế web hiện đại – vì sao hình ảnh to hơn lại tốt hơn?

Thứ tư - 04/11/2015 19:04

Tăng kích thước hình ảnh dẫn đến tăng khả năng chuyển đổi trên website một cách đơn giản. Nhiều nghiên cứu và thử nghiệm đã được thực hiện để chứng minh điều này và kết luận là lớn hơn thực sự tốt hơn.

Thiết kế web hiện đại – vì sao hình ảnh to hơn lại tốt hơn?

Kể từ thuở ban đầu của lĩnh vực thiết kế web chuyên nghiệp, chúng ta luôn được nói về việc giữ mọi thứ ở kích thước nhỏ, bao gồm cả hình ảnh vì nó được cho là ảnh hưởng đến thời gian load trang. Nhưng ngày nay tốc độ internet đã cải thiện đáng kể và cho phép trải nghiệm với những thứ to lớn hơn trên website.

Bạn sẽ thấy có rất nhiều bức ảnh được tăng kích cỡ trên các thiết kế web hiện đại và đó không đơn thuần vì lý do thẩm mỹ. Bởi một hình ảnh toàn chiều rộng tạo nên tác động hình ảnh lớn, đó vẫn chưa phải là lý do duy nhất để bạn dùng chúng. Vậy còn điều gì nữa?

Hình ảnh lớn = Chuyển đổi cao

Tăng kích thước hình ảnh dẫn đến tăng khả năng chuyển đổi trên website một cách đơn giản. Nhiều nghiên cứu và thử nghiệm đã được thực hiện để chứng minh điều này và kết luận là lớn hơn thực sự tốt hơn. Nói cách khác, khi nhìn thấy ảnh cỡ lớn, mọi người dừng lại nhìn và sau đó thực hiện hành động cụ thể. Điều hay nhất là ảnh cỡ lớn hoạt động trên mọi loại website: từ những thiết kế website bán hàng đến blog hay mọi thứ khác.

Họ chụp ảnh sản phẩm đẹp rồi sau đó đưa chúng lên website với kích cỡ lớn, vô cùng nổi bật hoặc dùng hình cỡ lớn làm nền. Kể từ khi những người làm marketing khám phá ra giá trị của những bức ảnh chụp cỡ lớn, ngày càng nhiều người áp dụng nó và tận hưởng ích lợi từ những bức ảnh khổng lồ mang lại.

Apple cach thiet ke website

Việc kiểm thử

Trang E-consultancy.com  đã thực hiện 2 thử nghiệm bao gồm thử nghiệm về việc kích thước hình ảnh tác động thế nào đến tỷ lệ chuyển đổi của website. Đầu tiên, Skinner Auctions chạy 2 phiên bản của cùng một trang danh sách sản phẩm. Trang đầu tiên dùng ảnh sản phẩm có chiều rộng 250 pixel, trang thứ 2 dùng ảnh 350 pixels. Như bạn có thể đoán, trang có ảnh 350 pixel được điểm cao hơn tới 63%, thậm chí nếu việc tăng kích thước ảnh này khiến người dùng phải cuộn trang xuống dưới nhiều hơn.

Ở thí nghiệm thứ hai, Dell đã thử nghiệm cách tăng hiệu quả bán hàng của họ. Họ đặt 2 phiên bản landing page cạnh nhau. Phiên bản gốc có một bức ảnh hết sức khiêm tốn, một giao diện súc tích và form mẫu tối giản.

Dell-A cach thiet ke website

Phiên bản còn lại tăng kích thước ảnh lên và đặt nó như là một background với form cỡ lớn ở lớp trên. Kết quả thế nào? Hình nền lớn đã giảm bounce rate (tỷ lệ truy cập vào website nhưng rời đi vì không tìm thấy thông tin cần thiết) xuống 27% và tăng tỷ lệ thu thập được thông tin của người dùng lên 36%.

Nếu bạn chú ý sẽ thấy hình ảnh Dell chọn không trực tiếp liên quan lắm đến chủ đề nhưng thú vị là nó vẫn làm tăng được tỷ lệ chuyển đổi trên trang.

Dell-B cach thiet ke website

Bên cạnh vấn đề kích thước…

Có thể thấy rõ việc tăng kích thước của hình ảnh có thể tạo ra tỷ lệ chuyển đổi cao hơn nhưng vẫn còn một só điều phải cân nhắc để tận dụng tối đa lợi ích của hình ảnh.

Background

Liên quan đến kích thước, những bức ảnh trên trang web nên ở chất lượng cao và hình ảnh ở đây bao gồm cả ảnh nền. Hiện tại, có 2 kiểu nền đang hoạt động khá tốt.

Đầu tiên trong 2 loại này là ảnh chụp với điểm tập trung vào tiền tố của website, với một chút làm mờ ở nền. Nhiếp ảnh gia thích dùng cách này để tạo chiều sâu và hiệu ứng của nó rất nghệ thuật.

Tatamagouche chup anh san pham dep

Loại thứ 2 là nền mà không giống nền chút nào. Khoảng trắng tạo ra sự sạch sẽ và không làm ảnh hưởng đến chất lượng hình ảnh. Thực ra không nhất thiết nó phải có màu trắng, đó có thể là một màu đậm nào đó hoặc thậm chí là gradient . Vấn đề ở chỗ không để thêm đối tượng nào khác xuất hiện làm rối khung hình.

 Draper cach thiet ke web

Đưa con người lên hình ảnh

Vì bất kỳ lý do gì, ảnh chụp con người, đặc biệt là khuôn mặt sẽ tạo sự kết nối với người dùng. Giờ đây, mọi người muốn kinh doanh với những người khác hơn bao giờ hết, hơn là làm việc với những công ty lớn nhưng không có khuôn mặt đại diện nào. Sử dụng hình ảnh khuôn mặt thật của con người tạo ra sự tin tưởng với người dùng.

Hãy dùng ảnh chụp người cho hầu hết mọi website, bất kể lĩnh vực hoặc mục đích. Luôn có cách để đưa một nhân vật nào đó vào bức ảnh, bất kể bạn đang quảng bá cho sản phẩm hay dịch vụ. Kết hợp một bức hình lớn với khuôn mặt người, thêm nút call to action rõ ràng sẽ giúp tạo ra hiệu ứng tốt và tăng tỷ lệ chuyển đổi trên trang web.

BrianHoff cach thiet ke website

Cuối cùng

Chúng ta đã chứng kiến sự tăng lên về kích thước hình ảnh trên các mẫu thiết kế website chuyên nghiệp một vài năm trở lại đây và giờ đã có thể biết vì sao. Những hình ảnh kích thước lớn, đột phá có thể khiến người dùng dừng các hành động theo ý họ và thực hiện hành vi mà bạn muốn họ làm trên website. Chúng cũng có thể là chức năng đặc biệt, cho phép khách hàng tiềm năng hoặc khách hàng chính thức của bạn nhìn thấy những chi tiết sản phẩm một cách bắt mắt.

Giờ đây việc dùng những hình ảnh lớn hơn đang khá phổ biến nhờ tốc độ cao của internet, đừng e ngại nghĩ đến phương án này và mở rộng tư duy sáng tạo, tỷ lệ chuyển đổi của website cũng sẽ sớm tăng theo.

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Solutions