Home Digital marketing Website 7 mẹo thiết kế dành cho UI-UX trên mobile giúp tăng chuyển...

7 mẹo thiết kế dành cho UI-UX trên mobile giúp tăng chuyển đổi trên website

Cùng với sự gia tăng của các thiết bị di động, các website UI-UX designer đã dần phải thay đổi cách tiếp cận của họ đối với người dùng. Ngành in ấn đã chuyển đổi thành kỹ thuật số và các nhà thiết kế cũng đã tìm ra những cách thức mới dành cho người dùng tương tác với các nội dung vốn được tạo ra từ pixels. Và cho đến ngày nay thì các thiết bị di động đã và đang vượt xa những chiếc máy tính để bàn từng được xem là cánh cửa mở ra các trang web.

Dưới đây là 7 mẹo nhỏ dành cho các nhà thiết kế có thể gia tăng chuyển đổi người dùng trên các màn hình di động ngày càng nhỏ hơn.

Thiết kế dành cho di động

Trước đây không lâu thì designer thoải mái thiết kế chủ yếu là trên các màn hình có kích thước lớn. Các màn hình hiển thị này cung cấp được một khung màn hình bao quát và rộng hơn giúp các nhà thiết kế có nhiều không gian làm việc. Thế nhưng tại thời điểm đó các hạn chế buộc các nhà thiết kế có những cách tiếp cận thực tiễn hơn, giảm sự nhiễu loạn tầm nhìn cũng như hạn chế việc thêm thắt không cần thiết.

Khi bắt đầu ý tưởng thiết kế bất kỳ trang web nào, đầu tiên các nhà thiết kế nên lưu ý đến việc hiển thị màn hình có kích thước nhỏ nhất. Thiết kế trong phạm vi hạn chế của màn hình nhỏ sẽ giúp các designer tạo ra được tính nhất quán thông suốt các thiết bị di động khác nhau.

Chế độ xem trước nhiều thiết bị của trang web Webflow’s sẽ cho người dùng thấy một bản thiết kế trông như thế nào trên mỗi thiết bị khác nhau và đồng thời cho phép họ trải nghiệm những tùy chỉnh trên đó.

Trước khi bạn tạo ra một khung mẫu 3D cho bản thiết kế di động, hãy chắc rằng bạn đã:

  • Biên tập các nội dung cần thiết và xác định nó sẽ được sắp xếp như thế nào.
  • Tạo các Header cho mỗi Section.
  • Xác định vị trí để đặt CTA (call to action).
  • Lên kế hoạch cho loại hình thức tương tác nào bạn sẽ sử dụng.

Và tính toán các yếu tố này sẽ chạy như thế nào trong thiết kế single-column.

Sử dụng tương tác vi mô và hoạt hình có chuyển động

Chỉ bằng một động tác vuốt nhẹ màn hình từ phải sang trái, Spotify khiến cho việc thay đổi bài hát trở nên dễ dàng hơn.

Di động được định nghĩa là không gian màn hình nhỏ hơn, nhấn mạnh nội dung và hình thức tương tác nổi bật lên nhằm truyền đạt mục đích rõ ràng hơn.

Tương tác vi mô (microinteractions) gần đây đột ngột gia tăng tính khả dụng mà nó sẽ truyền cảm hứng cho ai đó đưa ra phản hồi ngay lập tức. Nút “like” là tương tác vi mô phổ biến được sử dụng cho tất cả mọi thứ từ hình ảnh chú mèo dễ thương trên Instagram cho đến các bài chia sẻ và bình luận trên Facebook.

Chúng ta đưa ra việc nhận xét một cách công khai bằng cách nhấn nút “like” hay “thả tim” mà không cần phải cân nhắc về việc đó. Chúng ta lướt sang trái hoặc sang phải để tìm kiếm đối tượng trên các ứng dụng hẹn hò và ngay lập tức được thông báo rằng ai đó cũng “thích” chúng ta. Microinteractions khiến cho tính tương tác nhanh và mang tính trực quan – đây là thời khắc quan trọng trên nhiều website và các ứng dụng.

Sự tương tác dựa trên hình thức lướt thông tin (scroll) cũng xem như là tương tác vi mô: các nhà thiết kế đã thêm sự chuyển động vào màn hình phẳng trên điện thoại hoặc các yếu tố sôi nổi khác nhằm hướng dẫn hay thu hút sự chú ý của người dùng, dẫn dắt họ tới bất kỳ nơi đâu, chẳng hạn như đến biểu mẫu đăng ký tài khoản.

Một thiết kế chuyển động tuyệt vời cho việc lướt bảng tin của Sergey Valiukh trên trang Tubikh. Bạn nghĩ gì về thiết kế này?

Hãy giữ cho mẫu thiết kế đơn giản

Khi thiết kế website phiên bản di động, hãy gỡ bỏ mọi thứ tới mức tối giản nhưng không phải là những mẫu thiết kế tẻ nhạt, các dòng chữ không nhất thiết nổi lên trong gian trống – thế nhưng nếu bạn có thể làm điều đó một cách hiệu quả thì chính bạn đã làm được một điều hết sức tuyệt vời. Bạn cần chọn lọc lại các yếu tố và sau đó chỉ để lại những yếu tố quan trọng.

Điều này có nghĩa là loại bỏ những mục không cần thiết như đồ họa, các cảnh hoạt hình rối mắt – những yếu tố này không nên đưa thêm vào trải nghiệm người dùng. Ví dụ: Đối với mẫu thiết kế có tính ứng dụng thực tiễn thì hiệu ứng đổ bóng và đồ họa mô phỏng 3 chiều là không cần thiết.

Thay vào đó, hãy sử dụng các màu sắc thu hút sự chú ý, không gian rộng rãi. Kết hợp thêm kiểu chữ đơn giản, điều này khiến sự tiếp cận bản thiết kế dễ dàng điều hướng và tải nhanh hơn.

Bản thiết kế lịch là một ví dụ cho mẫu thiết kế phẳng hoàn chỉnh khi đã tận dụng được khoảng trắng (negative space) và phông chữ chắc chắn.

Thu hút sự chú ý người dùng đi kèm với thời gian tải thông tin nhanh chóng

Màn hình máy tính có những bộ vi xử lý nhanh và cao cấp làm cho máy tính hoạt động nhanh hơn và không cần phải hạ dữ liệu kết nối 3G xuống. Những bộ vi xử lý này có thể trữ dữ liệu nhiều hơn chẳng hạn như những đoạn video dài. Có lẽ bạn sẽ chẳng muốn bất kỳ ai dùng trang mạng của bạn chỉ để tài những dữ liệu mà vốn không được thiết kế riêng dành cho phiên bản di động.

Khi bạn dự định chuẩn bị hình ảnh cho một mẫu thiết kế, hãy đảm bảo:

  • Sử dụng những hình ảnh có ý nghĩa và có nguồn gốc rõ ràng.
  • Tối ưu các hình ảnh bằng phần mềm chỉnh sửa ảnh như Photoshop.
  • Sử dụng các hình ảnh cân xứng có kích cỡ đúng với bố cục.
  • Sử dụng những video nền chất lượng cao nhưng chỉ sử dụng khi cần thiết vì hầu hết các thiết bị di động sẽ không hiển thị được.

Suy nghĩ cách soạn thảo nội dung cho phiên bản di động:

Các thiết bị di động ngày nay đã dần thay đổi cách chúng ta trải nghiệm website. Thay vì phải ngồi một chỗ ở một nơi yên tĩnh, hãy gạt bỏ các màn hình máy tính để bàn sang một bên và trải nghiệm lướt web trên màn hình nhỏ hơn khi ngồi trên chuyến tàu đến nơi làm việc, xếp hàng tại cửa hàng tạp hóa, trong phòng chờ tại một phòng khám – bất cứ mọi lúc, mọi nơi chúng ta đều có thể lướt web một cách nhanh chóng.

Nội dung cần phải được phân chia thành những đoạn ngắn để người đọc có thể hiểu và cảm nhận được trong khoảng thời gian ngắn. Nếu như chúng ta cần phải chọn lọc các yếu tố cần thiết để thiết kế hình ảnh thì phần nội dung cũng tương tự như thế. Điều này có nghĩa là cần phải phác thảo các câu văn và đoạn văn ngắn, trực tiếp và dễ hiểu.

Sắp xếp nội dung văn bản là việc quan trọng hơn cả khi thiết kế website phiên bản bị động. Mỗi mục nên được vận hành một cách mạch lạc với mục tiếp theo. Không nên có bố cục văn bản không cân xứng. Mọi thứ cần phải dễ hiểu ngay khi chỉ cần lướt qua nội dung. Ý tưởng cần phải trôi chảy logic trong đoạn tiếp theo.

Các ý tưởng CTA cần có thêm nhiều sự chú ý hơn từ người dùng. Để tạo ra những CTA có độ tương tác cao, chúng ta cần phải:

  • Đưa cho người đọc một lý do cần phải hành động
  • Thu hút cảm xúc
  • Nhấn mạnh tầm quan trọng của thời gian
  • Giao tiếp thương hiệu cá nhân một cách sáng tạo

Trang web Wired sử dụng bố cục theo dạng lưới và những tiêu đề ngắn gọn để cuốn hút sự quan tâm của người dùng khi lướt qua nội dung của họ.

Hãy sử dụng Popup đúng cách

Chúng ta đều biết Popup không mấy gì tốt đẹp tuy nhiên nhiều hãng như Microsoft với ứng dụng hỗ trợ Clippy đã thu hút được nhiều sự chú ý nhất từ Popup.

Popup là công cụ quan trọng cho sự chuyển đổi. Những Popup cần được xuất hiện một cách hữu ích hơn là gây khó chịu cho người dùng. Hơn thế nữa, Popup nên một điều gì đó tốt hơn so với một phiên bản nhắc nhở thông thường – nhất là phải phù hợp với thương hiệu cá nhân của bạn và truyền được cảm hứng với thông điệp đặc biệt là sẽ giúp người đọc đạt được điều gì đó, ngay cả khi đó chỉ là một Popup với nội dung miễn phí trong tương lai.

Popup cũng cần phải liên kết chặt chẽ với nội dung cụ thể. Thay vì hiển thị lộn xộn ở đầu mỗi trang, các nhà thiết kế nên đưa chúng vào trong nội dung và phải phù hợp với nội dung đang được trình bày.

Ví dụ: Khi người dùng lướt xem ngày lưu diễn của một ban nhạc. Popup lúc này sẽ hiển thị với nội dung yêu cầu người dùng tham gia vào danh sách email bình chọn ngày lưu diễn có hợp lý hay không. Sự chuyển đổi xảy ra khi Popup được đặt trong nội dung và mang tính hữu ích. Popup cần cung cấp những lý do mang tính học hỏi nhiều hơn và sau đó là kêu gọi hành động.

Popup trên tờ báo New York Time sử dụng ngôn ngữ trực tiếp và làm nổi bật những lợi ích khi trở thành người đăng ký trang.

Sử dụng mẫu đăng ký có chứa nhiều trang (Multi-step forms)

Những mẫu đăng ký có thể hơi tốn thời gian và không hấp dẫn người dùng là mấy. Bao nhiêu người trong số chúng ta đã điền từng phần trong mẫu đăng ký trang và nhấn nút “submit” chỉ để cảm thấy bực mình khi nhận được dòng chữ đỏ với nội dung thông báo: “something’s wrong?” (dường như có điều gì đó không đúng?). Với quá nhiều thông tin để điền vào, sẽ khó tránh khỏi việc chúng ta bỏ qua một mục thông tin nào đó.

Sự phát triển của các mẫu đăng ký có nhiều trang (Multi-step forms) đã đơn giản hóa hơn trong quá trình nhập thông tin. Các bước chuyển đổi thông tin mang tính logic hơn rất nhiều, mỗi trang sẽ chứa một loại thông tin cụ thể để cho người dùng dễ dàng điền vào trước khi chuyển sang trang tiếp theo để điền một loại thông tin khác. Multi-step forms thì cực kỳ tuyệt vời đối với các thiết bị di động, cho phép người dùng dễ dàng tạo tài khoản, nộp đơn xin việc hay điền vào hồ sơ hẹn hò.

Uber sử dụng Multi-step form cho các tài xế có nhu cầu đăng ký

Thiết Kế Website Phiên Bản Di Động Cần Sự Đơn Giản Hóa

Thiết kế website phiên bản di động đã thay đổi những tiêu chuẩn về tính khả dụng, những gì từng được cho là ổn đối với màn hình máy tính thì bây giờ được xem là khá cồng kềnh với thiết bị di động.

Thiết kế web phiên bản di động đã xóa bỏ những chi tiết trang trí không cần thiết và tìm ra con đường trực tiếp hướng dẫn người dùng đi thẳng đến nội dung quan trọng. Đối với những gì mà mọi người cho là hạn chế và không thoải mái thì chúng ta có thể xem đó là những cơ hội để cải thiện trải nghiệm người dùng trên các trang web.

- Advertisment -

Most Popular

Yếu tố HTML5 nào quan trọng đối với SEO?

HTML5, phiên bản HLTM mới nhất, đã được sử dụng rộng rãi trong vài năm gần đây (mặc dù đây là lần nâng cấp...

5 cách đơn giản để tăng facebook like tự nhiên

Với 2,38 tỷ người dùng thì Facebook vẫn được xem là mạng xã hội quan trọng nhất đối với nhiều nhà tiếp thị và...

So sánh ưu nhược điểm của 2 phần mềm dựng video Camtasia và Premiere

Bạn phân vân không biết nên chọn phần mềm dựng video nào phù hợp giữa Adobe Premiere và Camtasia Studio? Vì đây là 2 phần mềm giúp tạo dựng...

Hướng dẫn thời gian để đăng tin lên Facebook hiệu quả

Tìm thời điểm tốt nhất để đăng lên Facebook có thể góp phần lớn làm doanh nghiệp của bạn nổi bật và tiếp cận...