Rate this post

Khám phá sự khác biệt giữa thiết kế đáp ứng và thích ứng, cộng với cách tạo nội dung cho thiết bị di động: Thiết kế web cho mobile.

Mọi người không chỉ duyệt web trên mobile khi họ cần – họ làm điều đó bất cứ khi nào và ở bất kỳ đâu, nó thuận tiện. Và đôi khi, họ làm điều đó vì họ phải làm vậy. Đặc biệt là ở các quốc gia đang phát triển, nơi một điện thoại có khả năng duyệt web chứng minh dễ dàng hơn nhiều so với một máy tính.

Điều đó có nghĩa là chúng ta không thể suy ra ngữ cảnh hoặc ý định từ thiết bị nữa – nếu chúng ta có thể. Vì vậy, chúng ta cần thiết kế trang web đáp ứng nhu cầu của mọi người bất kể họ dùng loại thiết bị nào. Với chiến lược thiết kế và nội dung nhất quán trên tất cả các nền tảng, bạn có thể cung cấp cho mọi người trải nghiệm liền mạch. Những lời khuyên sau sẽ giúp ích cho bạn.

Mục lục nội dung

 

Thiết kế web cho mobile: đáp ứng và thích ứng

Lựa chọn đầu tiên của bạn khi bắt đầu một thiết kế trong thế giới di động là: sử dụng thiết kế đáp ứng hay thích ứng?

Có gì khác biệt? Vâng, có rất nhiều khác biệt trong hai khái niệm đó.

Thiết kế đáp ứng

Thiết kế web đáp ứng (hoặc RWD) sử dụng các phép đo tương đối như tỷ lệ phần trăm và ems để đảm bảo rằng trang web của bạn phản hồi với thiết bị đang được xem. Nói cách khác, trang web của bạn vẫn giữ nguyên, nó chỉ có nội dung được chỉnh sửa, sắp xếp lại và thay đổi kích thước để có trải nghiệm di động tốt hơn.

Responsive tạo ra một lựa chọn dòng công việc tốt bởi vì về cơ bản bạn thiết kế một bố cục cho trang web của mình, sau đó điều chỉnh cho các kích thước màn hình khác nhau. Nó cũng tốt cho người dùng cuối trong đó họ nhìn thấy cơ bản cùng một trang web bất kể họ đang sử dụng thiết bị nào. Vì vậy, tất cả nội dung và chức năng mà họ mong đợi từ trang web dành cho máy tính để bàn vẫn có sẵn trên thiết bị di động của họ.

Các trang web đáp ứng cũng giúp bảo trì và cập nhật dễ dàng hơn vì bạn chỉ phải thực hiện thay đổi nội dung và bố cục một lần, thay vì từ sáu lần trở lên. Thêm vào đó, đáp ứng thân thiện hơn trong tương lai, bởi vì bạn sẽ không phải tạo ra một thiết kế mới nếu chiều rộng màn hình mới trở nên phổ biến.

Điều đó nói rằng, nếu bạn không cẩn thận với những thứ như tối ưu hóa hình ảnh và truy vấn phương tiện, bạn có thể kết thúc việc cung cấp trải nghiệm tụt hậu cho người dùng điện thoại thông minh.

Ưu điểm của thiết kế đáp ứng

  • Trải nghiệm nhất quán trên các thiết bị
  • Bảo trì dễ dàng hơn
  • Tương lai thân thiện

Nhược điểm của thiết kế đáp ứng

  • Có thể chậm hơn các trang web thích ứng

Thiết kế thích ứng

Thay vì trả lời các thiết bị khác nhau, thiết kế web thích ứng (AWD) phục vụ các thiết kế độc đáo cho các chiều rộng màn hình phổ biến khác nhau. Vì vậy, mỗi thiết kế giống như một sự thích nghi của kinh nghiệm cốt lõi của bạn (bất kể đó là gì).

Thay vì trả lời trôi chảy cho thiết bị mà ai đó đang sử dụng để xem trang web của bạn, AWD sử dụng “điểm ngắt” để quyết định thiết kế mà người dùng sẽ thấy. Điều này có thể cung cấp sự linh hoạt hơn, cho phép bạn tùy chỉnh trang web của mình cho các ngữ cảnh khác nhau. Nhưng luôn có nguy hiểm, bạn sẽ đưa ra giả định sai về những gì người dùng muốn.

Ưu điểm của thiết kế thích nghi

  • Hiệu suất nhanh hơn
  • Tùy chỉnh cho các thiết bị khác nhau

Nhược điểm của thiết kế thích nghi

  • Quá nhiều thiết bị để bạn phải quan tâm
  • Không có kiểm chứng trong tương lai (chống lại sự mở rộng màn hình tiếp theo trong các thiết bị)

Luôn kiểm tra

Luôn phải nghi ngờ (tôi chỉ khuyên và không muốn nói về một quan điểm sống nào cả), không bao giờ giả sử bạn đang cung cấp một trải nghiệm tốt nhất cho tất cả các thiết bị. Kiểm tra thiết kế của bạn trên một loạt các thiết bị để đảm bảo thiết kế trông và hoạt động như mong muốn. Và, quan trọng không kém, rằng nó hoàn thành các mục tiêu bạn đã xác định cho nó.

Cân nhắc nội dung cho người dùng thiết bị di động khi thiết kế web cho mobile

Bởi vì mọi người sử dụng web di động rất nhiều – và thường xuyên như thế, để hoàn thành công việc – bạn cần phải định hình nội dung của mình bằng điện thoại di động.

Dưới đây là một vài điều cần lưu ý khi thiết kế và tạo nội dung bằng suy nghĩ đầu tiên trên thiết bị di động (mobile first):

Giữ điều hướng đơn giản

Không có chỗ cho các menu lớn trên thiết bị di động và trình đơn thả xuống cần triển khai chu đáo để hoạt động. Vì vậy, cần đóng gói nhiều nội dung vào không gian nhỏ nhất có thể khi thiết kế web cho mobile.

Giải pháp: giữ cho nó đơn giản.

Làm nổi bật các khía cạnh quan trọng nhất của trang web trong điều hướng chính của bạn và cung cấp cho mọi người đường dẫn đến các trang khác thông qua nội dung trang chủ của bạn.

Nếu bạn đang thiết kế cho một công ty phần mềm (SaaS), điều hướng chính của bạn có thể bao gồm: Tính năng, Sản phẩm, Giá / Gói và trang tập trung vào nội dung như Blog hoặc Tìm hiểu. Các trang khác, như Giới thiệu hoặc Sứ mệnh hoặc Công việc có thể được liên kết từ khu vực nội dung chính hoặc được chuyển xuống danh sách liên kết ở chân trang của bạn. Còn xây dựng một trang web nhà hàng thì sao? Đó là hãy chắc chắn rằng bạn làm nổi bật Menu và thông tin Vị trí / Giờ. Và xin vui lòng không để Menu của bạn (quá mờ nhạt) như là một PDF.

Nếu bạn đang xây dựng một EStore lớn, bạn sẽ muốn tập trung điều hướng chính của mình vào các danh mục trừu tượng nhất — ví dụ, Nam, Nữ và Trẻ em — và để mọi người tìm hiểu sâu hơn về các trang phụ. Ngoài ra, hãy tìm kiếm một tùy chọn nổi bật để những người có ý tưởng nào đó mà họ đang tìm kiếm có thể cắt giảm theo đuổi.

Mẹo chuyên nghiệp : Nhận tín hiệu từ Google và đảm bảo rằng công nghệ tìm kiếm của bạn cho phép dự đoán. Bất kể có bao nhiêu thứ mà mọi người đang quen với việc làm trên điện thoại của họ, việc gõ vẫn còn có giá trị.

Bằng cách giữ cho điều hướng của bạn đơn giản, bạn sẽ không chỉ tạo trải nghiệm di động tốt hơn mà còn đơn giản hóa trang web của bạn cho mọi người dùng. Và điều đó sẽ giúp bạn tập trung vào thông điệp cốt lõi của mình và những hành vi bạn thực sự đang tìm kiếm từ mọi người.

Và — đừng quên làm cho các nút của bạn có kích thước thân thiện với ngón tay và cung cấp khoảng trắng thích hợp xung quanh các liên kết văn bản.

Xem bài viết Hỗ trợ điều hướng di động để biết thêm về điều này.

Giữ cho nội dung của bạn nhất quán

BuzzFeed đã nhận thấy rằng người đọc thực sự dành nhiều thời gian đọc những câu chuyện dài hơn trên thiết bị di động của họ hơn là trên máy tính để bàn. Và một nghiên cứu về đọc di động của UNESCO ở các nước đang phát triển cho thấy rằng “ở Bắc Mỹ hay Ethiopia, mọi người dường như thích đọc trên thiết bị di động vì thiết bị của họ là “luôn luôn ở đó” – nghĩa là thuận tiện.

Bây giờ, trên trang tiếp thị, bạn rõ ràng không muốn tiếp tục mãi mãi về bất kỳ tính năng hoặc sản phẩm nào. Đó chỉ là rủi ro mất một khách hàng tiềm năng. Thay vào đó, nhanh chóng và rõ ràng giải thích những gì mỗi sản phẩm hoặc tính năng cho phép, sau đó cung cấp một liên kết để tìm hiểu thêm. Những người quan tâm sẽ nhấn — và những người khác sẽ tiếp tục cuộn.

Có thể bạn phản đối và nói rằng tất cả các nghiên cứu này là về đọc sách và nội dung dạng dài. Nhưng một thực tế là nếu bạn cảm thấy thoải mái khi đọc nội dung dạng dài trên thiết bị di động, thì hiển nhiên tất cả các loại khác (dạng ngắn hơn) sẽ càng được đọc một cách thoải mái hơn.

Tận dụng các tính năng di động

Mặc dù chúng ta không thể đưa ra các giả định khó và nhanh về những gì mọi người đang làm hoặc họ đang ở đâu khi họ sử dụng trình duyệt của điện thoại thông minh, chúng ta có thể làm cho cuộc sống của họ dễ dàng hơn một chút khi họ ra ngoài.

Nếu bạn đang xây dựng trang web cho một công ty có mặt tiền cửa hàng truyền thống (ví dụ: vị trí có thể truy cập), bạn có thể sử dụng nhận thức về vị trí của điện thoại để làm nổi bật:

  • Vị trí gần nhất
  • Giờ mở cửa (cụ thể, cho dù hiện tại có mở hay không)
  • Phiếu mua hàng / khuyến mãi / phiếu giảm giá hiện tại

Bỏ các popups

Cửa sổ bật lên. Đa số chúng ta đều ghét chúng. Tuy nhiên, các đội tiếp thị ở khắp mọi nơi yêu thích chúng, bởi vì – có lẽ chỉ vì họ cực kỳ khó chịu – họ tiếp tục biểu diễn.

Nhưng đã đến lúc tất cả chúng ta phải lựa chọn trải nghiệm người dùng của mình qua các mục tiêu được đo dễ dàng hơn của chúng ta:

Bỏ các cửa sổ bật lên.

Nếu bạn đã từng gặp phải một cửa sổ tự bật lên trên điện thoại của mình… và sau đó cố gắng trượt qua để đóng cửa, chỉ để theo dõi bạn… bạn biết những gì một trải nghiệm cửa sổ bật lên có trên thiết bị di động. Tôi đã hủy các tab chứa các bài báo mà tôi rất muốn đọc vì những điều này.

Nguồn : phamngocnam.com

 

 

 

LEAVE A REPLY