8 quy tắc vàng của thiết kế di động

Thiết kế di động là một xem xét tương đối mới nhưng quan trọng. Chỉ một thập kỷ trước, thiết kế cho web có nghĩa là thiết kế cho máy tính để bàn; Bây giờ nó có nghĩa là thiết kế cho các thiết bị di động. Điện thoại di động đang thúc đẩy số lượng lưu lượng truy cập web ngày càng tăng và các số chỉ sẽ phát triển.

Theo Statista, vào tháng 10 năm 2018, chúng tôi đã có 3,9 tỷ người dùng Internet di động độc đáo và hơn 50% lưu lượng truy cập trang web trên toàn thế giới được tạo ra thông qua điện thoại di động . Một thiết kế web tuyệt vời không còn là một thứ xa xỉ mà là một thứ cần thiết.

Tạo trải nghiệm web tuyệt vời cho người dùng di động yêu cầu nhiều hơn là chỉ tạo ra thiết kế web đáp ứng (mặc dù một đỉnh người tạo ra trang web có thể giúp, như có thể web hosting sự lựa chọn). Trong bài viết này, bạn có thể khám phá các nguyên tắc thiết kế trang web di động nền tảng.

01. Xây dựng kinh nghiệm định hướng mục tiêu

Người dùng di động là người dùng rất mục tiêu. Mỗi lần họ truy cập một trang web, họ có một nhiệm vụ cụ thể mà họ muốn thực hiện và họ mong đợi để có được những gì họ cần thực sự nhanh chóng. Vậy làm thế nào bạn có thể làm điều đó xảy ra?

Hình ảnh người dùng lý tưởng của bạn: Tương tự như xây dựng một ngôi nhà, xây dựng một trang web bắt đầu bằng một nền tảng vững chắc. Và nền tảng cho thiết kế web tuyệt vời là kiến ​​thức bạn có về người dùng của mình. Nghiên cứu người dùng nên là một trong những bước đầu tiên trong thiết kế sản phẩm. Bạn cần tìm ra chính xác người dùng của bạn là ai và những gì họ muốn thực hiện. Khi bạn biết mong muốn và nhu cầu của người dùng, bạn có thể tạo ra một hành trình người dùng mà bạn biết phù hợp với mong đợi của họ một cách hoàn hảo (đảm bảo bạn lưu bất kỳ phát hiện nào một cách an toàn trong lưu trữ đám mây ). Sau đó, thực hiện kỹ lưỡng Kiểm tra người dùng sẽ đảm bảo bạn đã đạt được những mục tiêu đó.

Tinh chỉnh kinh nghiệm xung quanh mục tiêu cốt lõi của bạn: Bạn muốn đạt được điều gì với trang web này? Tìm câu trả lời cho câu hỏi này là một điều quan trọng khác cần làm khi tạo trải nghiệm web di động. Bạn đang cố gắng lái xe tham gia, khiến người dùng mua sản phẩm hoặc đăng ký dịch vụ? Nêu rõ mục tiêu và nghĩ về cách bạn có thể cắt giảm số bước mà người dùng phải thực hiện để tiếp cận nó.

02. Thích ứng nội dung của bạn để làm việc trong một không gian nhỏ hơn

Nội dung là những gì cung cấp giá trị cho hầu hết các trang web. Đó là lý do chính khiến mọi người đang đến thăm họ. Khi nói đến thiết kế web di động, không thể lấy trải nghiệm máy tính để bàn và sao chép nó trên điện thoại di động; Điều quan trọng là thiết kế các trang web với người dùng di động trong tâm trí. Điều đó có nghĩa là chúng ta cần thích ứng nội dung và tính năng để phù hợp với kích thước và thói quen màn hình của người dùng. Vì vậy, những bước bạn có thể thực hiện để đạt được điều này?

Tránh cuộn ngang: Người dùng thoải mái với các trang web cuộn theo chiều dọc nhưng không theo chiều ngang. Đó là lý do tại sao không nên có các trang mà cuộn ngang được yêu cầu để xem nội dung. Các yếu tố chiều rộng cố định là một trong những yếu tố phổ biến gây ra cuộn ngang, vì vậy hãy kiểm tra bạn không có nội dung chỉ hiển thị tốt ở độ rộng ViewPort cụ thể.

Nhắm mục tiêu cho một bố cục một cột: Bố cục cột đơn Trợ giúp với việc quản lý không gian hạn chế trên màn hình nhỏ và cũng cho phép dễ dàng mở rộng giữa chế độ dọc và ngang.

Đảm bảo người dùng không phải pinch-to-zoom: Khách truy cập có thể dễ dàng thất vọng khi họ phải phóng to hoặc phóng to để đọc văn bản hoặc xem hình ảnh. Thiết kế trang web di động của bạn để người dùng không bao giờ cần thay đổi kích thước.

Sử dụng kích thước phông chữ dễ đọc: 11 điểm là kích thước tối thiểu tuyệt đối cho văn bản. Kích thước này cho phép người dùng đọc văn bản ở khoảng cách xem điển hình mà không thu phóng.

Chọn phông chữ có quy mô tốt: Nếu trải nghiệm trang web yêu cầu đọc, tốt hơn là sử dụng các kiểu chữ sans-serif như helvetica hoặc roboto.

Sử dụng thiết kế thân thiện với ngón tay: Khi bạn thiết kế một trang web di động, hãy nhớ khách truy cập sẽ sử dụng ngón tay của họ thay vì một mũi tên chuột và đầu ngón tay của con người lớn hơn một con trỏ chuột. Phấn đấu để thiết kế giao diện thân thiện với ngón tay trong đó mỗi phần tử tương tác có kích thước một cách thích hợp.

Một nghiên cứu về phòng thí nghiệm Mit Touch thấy rằng kích thước trung bình của một ngón tay là 8-10mm , Làm cho 10 mm x 10 mm một kích thước mục tiêu cảm ứng tối thiểu tốt.

Cũng xem xét khoảng cách tương đối giữa các mục tiêu cảm ứng. Nếu các yếu tố tương tác được đặt quá gần nhau, người dùng di động có thể vô tình chạm vào một nút sai bằng ngón tay của họ. Để ngăn chặn điều đó xảy ra, hãy chắc chắn các nút kích thước chính xác và cũng thêm khoảng trống giữa chúng.

Làm cho hình ảnh sản phẩm có thể mở rộng: Nhiều nghiên cứu đã chứng minh rằng mọi người chủ yếu là người học thị giác. Hầu hết mọi người có thể hiểu và nắm bắt các khái niệm tốt hơn nhiều khi chúng được giao theo cách đó, đó là lý do tại sao sử dụng hình ảnh trong thiết kế web là một cách tuyệt vời để tổng hợp các thông điệp chính nhanh chóng.

Hình ảnh đóng vai trò quan trọng trong các trang web thương mại điện tử - mọi người dựa vào hình ảnh sản phẩm khi đưa ra quyết định. Điều cần thiết là không chỉ cung cấp tài sản chất lượng cao mà còn khiến chúng có thể mở rộng để người dùng có thể dễ dàng nhìn thấy chúng chi tiết. Mở rộng toàn bộ hình ảnh chứ không chỉ là một phần của nó.

Hãy cẩn thận với các chương trình khuyến mãi và quảng cáo: Khuyến mãi và quảng cáo có thể dễ dàng che đậy nội dung. Trong khi thông báo của AD có thể hoạt động đối với một số khách truy cập, trong phần lớn các trường hợp người dùng bỏ qua và chuyển sang thông tin có giá trị hơn. Hiện tượng này được gọi là mù biểu ngữ.

Làm cho dễ dàng tìm thấy thông tin liên lạc: Người dùng di động thường truy cập trang web để tìm thông tin liên hệ. Tùy thuộc vào sự khẩn cấp, người dùng có thể muốn gọi một công ty, điền vào mẫu liên hệ hoặc tìm địa chỉ. Đối với các trang web thương mại điện tử, số điện thoại phải có sẵn ngay trên màn hình chính.

03. Tối ưu hóa nội dung để quét

Đó là một thực tế nổi tiếng rằng người dùng không đọc trực tuyến; họ quét. Khi một khách truy cập mới tiếp cận một trang web, điều đầu tiên họ cố gắng làm là quét trang và chia nội dung thành các thông tin tiêu hóa. Có thể thực hiện nhiệm vụ này dễ dàng hơn cho người dùng bằng cách thực hiện theo một vài quy tắc đơn giản.

Tâm trí thứ tự mà bạn cung cấp nội dung trên một trang: Mọi người đọc từ trên xuống dưới. Đó là lý do tại sao điều quan trọng là giữ nguyên những thứ quan trọng ở đầu trang và di chuyển phần còn lại theo hệ thống phân cấp.

Cắt giảm sự lộn xộn: Ưu tiên nội dung qua các yếu tố giao diện người dùng - Giảm phiền nhiễu bằng cách loại bỏ các yếu tố chức năng và trang trí không cần thiết. Phấn đấu để tạo ra một phong cách tối giản bởi vì bằng cách làm mà bạn sẽ giúp người dùng dễ dàng tập trung vào nhiệm vụ.

Tránh các khối dài của văn bản không có hình ảnh: Rất có khả năng bất kỳ sự thay đổi nội dung khổng lồ nào sẽ bị bỏ qua. Sử dụng các tiêu đề, đoạn văn hoặc điểm đạn để chia nhỏ văn bản.

Đặt nhiều trọng lượng thị giác hơn vào các yếu tố quan trọng: Thực hiện các yếu tố quan trọng như các thông báo chính các điểm tiêu cự để khách truy cập nhìn thấy chúng ngay lập tức. Nhấn mạnh các yếu tố bằng cách sử dụng các kích cỡ khác nhau, khoảng trắng hoặc màu rực rỡ.

04. Tạo điều hướng dự đoán

Giúp người dùng điều hướng nên là ưu tiên hàng đầu cho mọi trang web. Rốt cuộc, nội dung hấp dẫn nhất là vô ích nếu mọi người không thể tìm thấy nó. Đó là lý do tại sao việc đầu tư vào việc thiết kế một hệ thống định vị vững chắc, sử dụng một số bước sau.

Sử dụng các mẫu điều hướng quen thuộc: Khi nói đến việc tạo ra một cơ chế điều hướng cho trang web của bạn, đáng để nhớ một quy tắc đơn giản: đừng phát minh lại bánh xe - phấn đấu để tạo ra trải nghiệm quen thuộc. Luôn luôn tốt hơn để dựa vào các mẫu điều hướng mà hầu hết người dùng đều quen thuộc với (chẳng hạn như thanh điều hướng trên cùng hoặc menu Hamburger) thay vì tạo hệ thống điều hướng độc đáo của riêng bạn (ví dụ: hệ thống điều hướng dựa trên cử chỉ). Khi bạn tạo điều hướng quen thuộc, bạn sẽ giúp người dùng dựa vào trải nghiệm trước đây của họ khi tương tác với sản phẩm của bạn.

Đặt giới hạn về tổng số tùy chọn điều hướng: Đừng đặt quá nhiều tùy chọn trong menu. Một menu mở rộng có thể hoạt động tốt cho các trang web để bàn nhưng chúng không phù hợp với thiết kế di động. Vì không phải tất cả các tùy chọn điều hướng sẽ có sẵn trong một khu vực hiển thị của màn hình, bạn sẽ buộc người dùng di động cuộn qua danh sách các tùy chọn. Hãy nghĩ cách bạn có thể trình bày ít các mục menu nhất có thể. Lý tưởng nhất, menu bạn thiết kế nên không có nhiều hơn bảy loại khác biệt .

Ưu tiên tùy chọn điều hướng : Sắp xếp điều hướng dựa trên cách người dùng làm việc với chức năng. Các tùy chọn điều hướng phổ biến nhất trong menu toàn cầu phải ở trên cùng và các hành động chính phải có sẵn trong một khu vực hiển thị của màn hình.

Viết nhãn rõ ràng: Mỗi tùy chọn điều hướng nên có một nhãn rõ ràng và súc tích. Tránh biệt ngữ - điều hướng bạn thiết kế không nên chứa các thuật ngữ khách truy cập của bạn sẽ không hiểu. Nhãn rõ ràng sẽ cung cấp cho khách truy cập khả năng dự đoán kết quả của hành động của họ.

Đảm bảo các yếu tố tương tác trông giống như các yếu tố tương tác : Khi thiết kế các nút và liên kết, hãy nghĩ về cách thiết kế giao tiếp với khả năng chi trả. Làm thế nào để người dùng hiểu phần tử như một đối tượng tương tác? Cách một đối tượng trông cho người dùng biết cách sử dụng nó. Các yếu tố hình ảnh trông giống như các liên kết hoặc nút nhưng không tương tác (chẳng hạn như các từ được gạch chân không phải là liên kết hoặc hộp hình chữ nhật bằng các từ không phải là các nút) có thể dễ dàng nhầm lẫn người dùng.

Giao tiếp vị trí hiện tại: "Tôi đang ở đâu?" là một câu hỏi cơ bản mà người dùng cần một câu trả lời để điều hướng một cách hiệu quả. Chỉ rõ vị trí hiện tại.

Cung cấp một tính năng tìm kiếm: Nếu bạn thiết kế một trang web phức tạp với nhiều nội dung hoặc tính năng, bạn cần đảm bảo rằng bạn cung cấp một thanh tìm kiếm để điều hướng dễ dàng. Bằng cách triển khai chức năng tìm kiếm, bạn cung cấp một tuyến đường nhanh đến thông tin / tính năng cho người dùng di động đến trang web với một câu hỏi cụ thể trong tâm trí.

Đừng ẩn tùy chọn tìm kiếm trong menu. Nó phải là một trong những điều đầu tiên khách truy cập nhìn thấy trên các trang của bạn.

Làm cho người dùng dễ dàng trở về trang chủ: Khách truy cập mong đợi rằng khi họ chạm vào logo ở đầu trang, họ sẽ quay lại trang chủ và chúng sẽ trở nên thất vọng nếu điều đó không hoạt động.

Giữ người dùng của bạn trong một cửa sổ duy nhất: Tránh các cuộc gọi đến hành động gửi cho người dùng đến các cửa sổ mới. Một số người dùng sẽ gặp sự cố khi chuyển đổi giữa các cửa sổ trong trình duyệt di động và có thể không thể tìm thấy trang trước đó.

05. Tránh tạo ra rào cản

Roadblocks tạo ma sát và ma sát là kẻ thù tồi tệ nhất của chuyển đổi. May mắn thay, có những điều đơn giản bạn có thể làm để vượt qua chúng.

Đừng làm gián đoạn khách truy cập: Pop-up lớn là một trong những loại gián đoạn điển hình nhất trên trải nghiệm web. Trong một thời gian dài, các biểu ngữ như vậy đã dành riêng cho các thông điệp quảng cáo, nhưng gần đây, nhiều trang web bắt đầu sử dụng các cửa sổ bật lên gây mất tập trung để xin phép sử dụng cookie (GDPR). Bất kể thông tin nào bạn muốn hiển thị cho khách truy cập của mình, đảm bảo rằng nó không làm mất tập trung khỏi trải nghiệm chung.

Đừng khiến người dùng rời khỏi trang web của bạn: Xác định các địa điểm trong các hành trình người dùng có thể khiến người dùng nhìn ra bên ngoài trang web của bạn và sau đó cung cấp nội dung / tính năng để giữ chúng trên trang web của bạn. Một trường mã khuyến mãi trên các trang web thương mại điện tử có lẽ là ví dụ phổ biến nhất khiến khách truy cập rời khỏi một trang web trong nỗ lực tìm kiếm phiếu giảm giá. Sẽ tốt hơn nhiều để cung cấp một số phiếu giảm giá ngay trên trang web để ngăn chặn hành vi đó.

Đừng ép người dùng đăng ký: Người dùng yêu cầu đăng ký trước khi họ có thể xem thông tin hoặc sử dụng dịch vụ trực tuyến có chi phí tương tác cao - buộc đăng ký quá sớm có thể khiến người dùng bỏ rơi trang web . Trước khi cung cấp thông tin cá nhân, khách truy cập muốn có được cảm giác về những gì một trang web cung cấp cho họ.

Để tạo luồng người dùng với các rào cản ít nhất để chuyển đổi, các trang web di động sẽ cho phép khách truy cập khám phá nội dung mà không cần phải đăng ký. Đối với các trang web thương mại điện tử, điều cần thiết là để người dùng mua như một khách.

Làm cho dễ dàng chuyển sang thiết bị khác để tiếp tục hành trình: Đừng coi điện thoại di động là kinh nghiệm độc lập. Một người dùng thông thường có một số thiết bị như máy tính để bàn, điện thoại di động và máy tính bảng và hy vọng sẽ có trải nghiệm liền mạch trên tất cả các thiết bị đó khi sử dụng sản phẩm của bạn. Ví dụ, nhiều người chỉ sử dụng thiết bị di động để tìm kiếm sản phẩm và sau đó chuyển sang máy tính để bàn để chuyển đổi. Người dùng mong đợi tiếp tục cuộc hành trình từ nơi họ dừng trên điện thoại di động.

Dưới đây là một vài điều bạn có thể làm để đồng bộ hóa tiến trình hiện tại của người dùng:

• Đồng bộ hóa danh sách mong muốn, yêu thích và giỏ cho tài khoản người dùng.
• Cung cấp một cách dễ dàng để lưu hoặc chia sẻ thông tin trên các thiết bị cho người dùng không đăng ký (chẳng hạn như tùy chọn để gửi liên kết đến email).

06. Thiết kế hình thức hiệu quả

Entry Entry là một trong những nhiệm vụ phổ biến nhất trên web. Thật khó để tưởng tượng bất kỳ trải nghiệm nào không yêu cầu người dùng điền vào một loại hình thức. Bởi vì đó là một thực hành phổ biến như vậy, khả năng lấp đầy một hình thức không đau là rất quan trọng để giữ cho người dùng tham gia. Dưới đây là một vài mẹo có thể giúp bạn giữ ma sát ở mức tối thiểu:

Giảm thiểu đầu vào theo hình thức: Nói chung, người dùng càng ít dữ liệu sẽ cung cấp, họ càng tận hưởng trải nghiệm web của bạn. Những con trỏ này sẽ giúp bạn giảm các phím bấm và đầu vào Người dùng phải thực hiện:

• Giảm thiểu tổng số trường. Luôn luôn giữ các hình thức ngắn gọn và đơn giản nhất có thể bằng cách loại bỏ bất kỳ trường không cần thiết nào. Chỉ hỏi những gì bạn thực sự cần biết.
• Sử dụng tự động chính xác, tự động viết hoa và tự động hoàn thành để giảm khả năng lỗi người dùng.
• Tránh các trường thả xuống. Dropdowns ẩn các tùy chọn và điều này tạo thêm chi phí tương tác - người dùng cần nhấn hai lần để chọn tùy chọn phù hợp. Nếu bạn đang sử dụng trường thả xuống để lựa chọn các tùy chọn, hãy xem xét thay thế nó bằng các nút radio.
• Tự động chuyển sang trường tiếp theo khi người dùng nhấn trả về.
• Giảm thiểu lỗi hình thức với xác thực nội tuyến thời gian thực.
• Sử dụng thông tin hiện có để tối đa hóa sự tiện lợi. Ví dụ: bạn có thể điền sẵn một số trường như địa chỉ giao hàng hoặc thông tin thanh toán cho người dùng đã đăng ký của bạn.
• Hãy suy nghĩ về việc cung cấp các cơ chế đầu vào thay thế. Xem xét khả năng thiết bị nào có thể được sử dụng để cung cấp trải nghiệm người dùng tốt hơn. Ví dụ: thay vì yêu cầu người dùng nhập chi tiết thẻ tín dụng, hãy cung cấp tùy chọn sử dụng máy ảnh của thiết bị để quét thẻ và tích hợp các hệ thống như Apple Pay và Google Pay để kích hoạt thanh toán trong một lần nhấn.

Cung cấp bàn phím phù hợp: Người dùng di động đánh giá cao các trang web cung cấp bàn phím thích hợp cho trường. Tính năng này ngăn họ phải thực hiện bất kỳ hành động bổ sung. Ví dụ: khi người dùng cần nhập số điện thoại, trang web của bạn sẽ hiển thị số 0 đến 9 bàn phím.

Đặt các loại đầu vào HTML để hiển thị bàn phím chính xác. Dưới đây là bảy loại đầu vào có liên quan đến thiết kế biểu mẫu:

• Loại đầu vào = "Văn bản" Hiển thị bàn phím bình thường của thiết bị di động.
• Loại đầu vào = "Email" Hiển thị bàn phím bình thường và '@' và '.com'.
• Loại đầu vào = "TEL" Hiển thị bàn phím số 0 đến 9.
• Loại đầu vào = "Số" Hiển thị bàn phím với số và ký hiệu.
• Loại đầu vào = "Ngày" Hiển thị bộ chọn ngày của thiết bị di động.
• Loại đầu vào = "DateTime" Hiển thị ngày và bộ chọn thời gian của thiết bị di động.
• Loại đầu vào = "Tháng" Hiển thị bộ chọn Tháng và Năm của thiết bị di động.

Hãy để người dùng sửa đổi trường vị trí: Nhiều trang web tự động phát hiện vị trí người dùng và sử dụng thông tin này để cung cấp nội dung có liên quan. Điều cần thiết là cho phép người dùng thay đổi vị trí vì trong một số trường hợp, người dùng có thể muốn xem kết quả cho một địa điểm khác.

07. Phấn đấu để tạo ra một trải nghiệm nhất quán

Tính nhất quán là một trong những trụ cột chính của trải nghiệm người dùng. Thiết kế nhất quán là thiết kế thân thiện với người dùng - bằng cách tập trung vào việc tạo ra thiết kế nhất quán, bạn tạo ra thiết kế trực quan hơn. Luôn luôn phấn đấu để làm cho trang web cả trong nội bộ và bên ngoài nhất quán.

Thống nhất nội bộ: Tạo một thư viện nhất quán các tài sản thiết kế và sử dụng nó cho tất cả các trang của trang web của bạn. Phông chữ, nút, liên kết, biểu tượng và tất cả các phần tử UI khác cần phải nhất quán trên trang web để giữ sự nhất quán trực quan.

Tính nhất quán bên ngoài: Đảm bảo trang web bạn thiết kế trông giống như một phần của một gia đình sản phẩm lớn hơn. Ví dụ: nếu bạn có một ứng dụng di động, trang web di động của bạn sẽ truyền đạt cảm giác quen thuộc cho người dùng sử dụng nó.

08. Xây dựng trang web di động tốt nhất của bạn

Tất cả các điểm được đề cập ở đây có thể được coi là thực hành tốt nhất trong ngành. Nhưng chỉ vì một cái gì đó được gọi là 'Thực hành tốt nhất' không có nghĩa là nó là giải pháp tối ưu cho trang web của bạn. Đó là lý do tại sao nó luôn quan trọng để kiểm tra các quyết định thiết kế của bạn. Thực hiện khả năng sử dụng kiểm tra một phần bắt buộc trong quá trình thiết kế của bạn và nâng cao kinh nghiệm một cách thường xuyên.

Bài viết này ban đầu được xuất bản trong số 317 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 317. hoặc là Đăng ký mạng lưới .

Những bài viết liên quan:

• 6 xu hướng đang thay đổi bộ mặt của thiết kế UI di động
• 10 lời khuyên cho thiết kế UX di động tốt hơn
• Cách thiết kế giao diện di động thân thiện với người dùng