Hotline

Làm thế nào để có bản mobile siêu xịn cho website?

Khi mà điện thoại ngày càng phổ biến thì việc xây dựng bản mobile website lại càng trở nên cần thiết. Bản mobile website của bạn có đủ để thu hút người đọc hay chưa? Bài viết này sẽ đưa ra các chiến thuật để thiết kế một giao diện di động hiệu quả và hấp dẫn hơn.

Web design for mobile

1. Các yếu tố ảnh hưởng đến Moblie website

Truy cập web từ thiết bị di động ảnh hưởng bởi nhiều yếu tố: (1) môi trường nơi mà người dùng có thể đang bận hoặc đông đúc. Ánh nắng hoặc là ánh sáng phản chiếu có thể là một vấn đề hoặc người dùng có thể đang làm nhiều việc dưới áp lức thời gian; (2) mạng (chậm hoặc không ổn định); và (3) là thiết bị (màn hình nhỏ).

Theo chuẩn ISO 9241-11, usability (td tính sử dụng được) - bao gồm 3 yếu tố: hài lòng, hiệu quả và hiệu năng. Tuy nhiên Web form không được thiết kế để có hiệu năng cao. Khi dùng trên máy tính desktop, người dùng thường có kết nối mạng ổn định và miễn phí, lại không có áp lực về thời gian. Trong khi đó, di động phải đối mặt với một môi trường thách thức hơn và có nguy cơ thất bại. Lúc đó hiệu năng là một yếu tố quan trọng. Người dùng phải điền vào một form càng lâu thì nguy cơ thất bại càng cao, ví dụ như là mất kết nối. Thêm nữa, còn có thể mất tiền khi dùng dữ liệu trên di động. Người dùng có thể hoàn thành thao tác nhanh không là rất quan trọng trên các thiết bị di động.  

2. Forms dành cho di động với form dành cho desktop

Form đặt chỗ trên Hertz và form định vị của Burger King (di động và desktop)

Form trên di động là một phiên bản đơn giản hơn trên Web và không quá màu mè, quảng cáo, giới thiệu hoặc quá nhiều ảnh (ví dụ trang Hertz). Nó có thể là một giao diện hoàn toàn khác nhưng đơn giản và rõ ràng hơn (ví dụ như trang tìm kiếm địa điểm của Burger King). Nó cũng có thể có các trường giống với trên Web nhưng có một chút thay đổi về bố cục như là căn lề của nhãn (ví dụ như trang đăng kí của M&S).

Chiến thuật thiết kế bàn trong bài này có thể được cân nhắc và sử dụng khi thiết kế lại form trên di động. Mặc dù ví dụ ở đây là iPhone (iOS) nhưng mà các chiến thuật này có thể được áp dụng cho nhiều nền tảng di dộng và hệ điều hành.

3. Chiến thuật thiết kế form

3.1. Nhãn căn dọc

Nhãn căn dọc 2

Nhãn căn phải (Trainline) và nhãn căn ở trên (Burger King)

Nhãn căn dọc 1

Nhãn dài quá thì không hiện hết khi căn trái

Căn lề cho nhãn có cái lợi và hại. Khi thiết kế một Web form, quan trọng là phải chọn cái nào phù hợp với mục đích, thiết kế, vân vân. Tuy nhiên với một form di động, nên tránh nhãn căn ngang (trái hoặc phải). Khi người dùng nhấn vào một trường, trang tự động được zoom vào để tập trung cho trường đó. Nếu dùng nhãn nằm ngang, thì khó mà xem cả tên nhãn và hộp để điền vào trường. Thêm nữa, do màn hình nhỏ nên hiện ra nhãn dài là rất khó nếu dùng nhãn nằm ngang thiết bị (ví dụ form đăng kí của Virgin Blue).

Ta có thể dùng nhãn căn lề trên để thay thế.

3.2. Xóa

Vì hạn chế về thiết bị cũng như mục đích sử dụng, các form di động cần phải đơn giản và hiệu quả nhất có thể. Bỏ những phần rườm rà đi giúp người dùng tập trung vào công việc chính của họ để giảm thiểu lỗi nhiều nhất có thể.

Kĩ thuật rõ nhất đó là ẩn đi các trường ‘không cần thiết’ hoặc tùy chọn. Chỉ hiện các trường quan trọng nhất để hoàn thành tác vụ. Bạn cũng có thể bỏ các yếu tố không có mục đích sử dụng cơ bản. Ví dụ như các típ, mô tả, các liên kết như là “Tìm hiểu thêm”, “Đây là gì”. Nó làm sáng giao diện và đơn giản hóa trải nghiệm người dùng. Hertz hiểu điều này và họ đã thành công trong việc thiết kế form đặt chỗ của mình. Form nhìn rất sáng sủa và rất dễ dàng sử dụng.

Xóa form di động

Hertz đơn giản hóa form đăng kí bằng các bỏ các thành phần như là tips hoặc helps

Khi bạn đang muốn tìm hiểu xem cái nào nên giữ, cái nào nên bỏ thì hãy cân nhắc điều này: nếu trường đó mà không ảnh hưởng đến kết quả tìm kiếm, ví dụ nó chỉ dùng khi định nghĩa kết quả trông như thế nào (ví dụ hiển thị các lựa chọn, lọc hoặc sắp xếp theo chức năng), đừng ngại xóa nó đi.

3.3. Kết hợp

Một cách khác để đơn giản hóa form di động đó là kết hợp với nhiều các trường nhập giống nhau vào cùng một trường đơn giản hơn.

Kết hợp form mobile

Để có hướng đi khi dùng Mapquest trên desktop, bạn có 3 lựa chọn để chọn điểm bắt đầu và điểm kết thúc: “Tìm một địa điểm (có thể dùng tên công ty), địa chỉ hoặc là giao lộ (địa chỉ đầy đủ) hoặc các dịa điểm đã lưu hoặc địa điểm hiện tại. Tính linh hoạt của form hỗ trợ người dùng desktop rất tốt nhưng không hiệu quả cho người dùng di động. Thứ hai là cho người dùng quá nhiều lựa chọn khi họ đang di chuyển hoặc đang vội sẽ làm họ rối và trở thành rào cản.

map quest combine mobile

Form di động của Mapquest để lấy đường đi

Cái mà Mapquest làm được đó là kết hợp cả 3 lựa chọn thành một trường trên form tìm kiếm di động. Người dùng có thể đánh vào hoặc một địa chỉ cụ thể hoặc một tên tòa nhà vào ô tìm kiếm. Khi trường tìm kiếm được focus, lựa chọn mở địa điểm hiện tại sẽ xuất hiện. Không có lựa chọn nào bị bỏ đi nhưng form vẫn rõ ràng và dễ sử dụng.

Tuy nhiên hãy thận trọng khi áp dụng lĩ thuật này. Hãy chắc chắn là người dùng biết đánh gì vào trường tìm kiếm.

3.4. Ứng biến

Ứng biến 1

Europcar có một drop down list với hơn 139 nước

Ứng biến 2

Europcar dùng chức năng phát hiện địa điểm để làm ngắn dropdown list

Có nhiều chức năng được dựng sẵn trên các thiết bị di động như là nhận diện địa điểm qua GPS hoặc la bàn. Hãy dùng các tính năng này để đơn giản hóa form của bạn. Europcar có một list các quốc gia rất dài dùng cho form để thuê xe. Biết đó là một bất cập, họ đã rút ngắn list đó xuống còn 40 nước phổ biến để dễ và lựa chọn nhanh hơn.

Họ không chỉ dừng lại ở đó. Họ dùng chức năng có sẵn của thiết bị để cho người dùng lựa chọn dùng địa điểm hiện tại và thấy được trạm xe gần đó nhất. Nó không chỉ đơn giản hóa form mà còn phù hợp với mong muốn người dùng khi họ điền vào một form (tìm địa điểm trạm gần nhất và đăng kí ở trạm đó).

3.5. Chia thành các bước nhỏ

Vì kết nối internet chậm khi dùng di động, thường thì người ta tải càng ít trang càng tốt. Có những ngoại lệ cho quy luật này để cải thiện form. 

Chia thành các bước nhỏ 1

AirAsia gộp các thành phố theo nhóm nước trong một dropdown list

Trên phiên bản desktop, AirAsia chia 80 thành phố ‘bay từ’ thành 25 nước. Chiến thuật này khá hiệu quả vì nó cho phép người dùng quét các thành phố mà hãng này bay và lựa chọn dễ hơn. Tuy nhiên một dropdown list nhiều như thế thì không ổn cho di động.

Để áp dụng cùng ý tưởng đó (chia địa điểm theo nước) thì trên phiên bản di động, AirAsia chia thành các màn hình nhỏ. Màn hình mặc định đầu tiên được đặt là Malaysia (vì AirAsia là hãng giá rẻ của Malaysia) với các thành phố mà họ có chuyến bay khởi hành. Dưới list thành phố là list các nước. Nếu người dùng chọn một nước thì một màn hình mới sẽ hiện ra với các thành phố của nước đó.

Chia thành các bước nhỏ 2

AirAsia chia một dropdown list dài thành các bước nhỏ hơn để đơn giản bước chọn địa điểm

Mặc dù cách này phải tải nhiều trang hơn nhưng mà nó cho phép người dùng tập trung vào một bước để không bị quá ngợp với một form quá phức tạp.

Chia một form dài thành các bước nhỏ hơn là một cách tiếp cận tốt để làm form dễ dùng hơn. Nhưng đừng quá đà. Bạn không muốn người dùng cảm thấy form bị vô tận. Thêm nữa là khi dùng cách này, cố gắng giảm các yếu tố không cần thiết ở các trang đi để tránh tải

3.6. Dùng đúng trường và menu

dùng đúng trường

Form đăng kí của Expedia: thay drop down bằng link

Để tìm kiếm khách sạn trên Expedia, người dùng có thể tìm theo thành phố, sân bay, các địa điểm vui chơi theo địa chỉ Mỹ. Các lựa chọn này xuất hiện ở dạng dropdown. Phụ thuộc vào lựa chọn nào được chọn, nhãn và các ô trường tương ứng xuất hiện. Thay vì dùng dropdown cho bản di động, họ thay thế các lựa chọn bằng liên kết. Thiết kế này cho phép người dùng quét nhanh qua các lựa chọn và giảm thời gian phải ấn chọn lựa chọn nào đó.

Tuy nhiên, nó phải được thiết kế cẩn thận vì nó hiển thị một list dài các liên kết ở phía trên cùng của trang, nó đẩy form xuống cuối trang. Bạn có thể sẽ muốn hiển thị chỉ hai hoặc ba trường trên màn hình.

dùng đúng trường 2

Form đặt phòng của Shangri-La: thay list nút bấm radia với một dropdown list

Khi đặt phòng trên Shangri-La, người dùng được cho phép chọn gói mà học có thể có phòng đặc biệt. Bản trên desktop thì các lựa chọn này là nút radio. Để đơn giản hóa form di động, Shangri-La dùng dropdown list cho các lựa chọn này. Nó có hiệu quả bởi vì:

  • Hiển thị các nút radio trên thiết bị di động (dù cho chỉ có 4 nút) có thể làm form dài hơn, rối hơn
  • Đây là các lựa chọn không bắt buộc và nó chỉ dùng cho một số nhòm người dùng. Vì thế có thể ẩn nó đi cũng được

Người dùng di động cần phải hoàn thành form (rất nhanh). Hãy ưu tiên các trường bắt buộc, tránh tập trung vào các trường không bắt buộc hoặc trường mà chỉ dùng cho một nhóm người dùng. Thậm chí là hãy mạnh tay hơn - xóa chúng đi khỏi form di động (hãy xem phần “Xóa”).

dùng đúng trường 3

KLM theo dõi các chuyến bay: thay dropdown menu với một ô tìm kiếm đoán trước

Trên trang của KLM, thay vì kiểm tra bằng cách điền vào số chuyến bay, người dùng còn có thể tìm bằng cách chọn nơi khởi hành và điểm đến. Phiên bản desktop cho phép họ chọn các sân bay với lựa chọn trong dropdown với 151 sân bay. Biết là dropdown list đó không ổn trên di động, họ thay bằng một ô tìm kiếm với khả năng đoán trước. Ô này hoạt động hiệu quả trong trường hợp này vì người dùng luôn biết họ đang tìm gì và tên sân bay họ muốn điền vào. Người dùng không bị ngợp với một dropdown list dài, nó khiến thao tác đơn giản hơn. Xem phần tiếp theo để chọn đúng loại lựa chọn cho người dùng.

3.7. Chọn đúng kiểu lựa chọn

Có hai cách để hiện thị một lựa chọn ở dạng list: dạng drop down khóa (theo thứ tự bảng chữ cái hoặc không theo bảng chữ cái) và dạng gợi ý. Cả hai loại này đều có cái hay và cái dở. Chúng phù hợp cho một số trường hợp phụ thuộc vào trường (ví dụ: chức năng) và lựa chọn (ví dụ con số phương án lựa chọn, độ dài của lựa chọn, list được sắp xếp như thế nào).

Chọn đúng kiểu lựa chọn 1

Ví dụ về lúc nào dùng drop down khóa sẵn lựa chọn, lúc nào không

Dùng drop down list khóa sẵn các lựa chọn khi:

  • Locked drop down menus are only suitable to be used when users know exactly what they are looking for.
  • It also works well for lists which make sense in alphabetical or chronological order, such as countries, numbers or dates. Users know roughly how much they need to ‘scroll’ down to get to the selection they want
  • Người dùng biết rõ các lựa chọn mà họ đang tìm kiếm.
  • Nó cũng có tác dụng đối với thứ tự bảng chữ cái hoặc thời gian, ví dụ xếp theo nước, số hoặc là ngày. Người dùng biết họ cần phải kéo xuống để thấy lựa chọn mà họ

Không dùng drop down list khi

  • Khi các lựa chọn trong list là ngẫu nhiên, người dùng không biết mình tìm cái gì, họ không biết các lựa chọn rong list.
  • Chức năng tìm kiếm địa điểm ăn chơi của Tripadvisor là một ví dụ cho việc không dùng dropdown list. Có hơn 30 loại địa điểm ăn chơi cho người dùng chọn. Vấn đề là không giống list các nước, người dùng không biết các lựa chọn là gì và không biết họ đang tìm gì. Người dùng phải lướt qua list từ đầu tới cuối và rồi có thể phải trở lại đầu list để chọn cái phù hợp.
  • Không dùng drop down list nếu lựa chọn quá dài.
  • Vì giới hạn màn hình và mỗi lựa chọn là một dòng, các lựa chọn dài bị cắt ngắn và thay bằng … Người dùng không thể nhìn thấy lựa chọn đầy đủ và phải đoán xem nó là gì.

dùng dropdown

Ví dụ về dùng ô text gợi ý trước, lúc nào dùng và lúc nào không

Dùng ô text gợi ý khi:

  • Dùng khi mô tả lựa chọn quá dài.
  • Không giống drop down, các thành phần riêng có thể hiển thị không nhất thiết phải cùng một dòng. Tùy bạn lựa chọn (nhà thiết kế hoặc nhà phát triển) để làm list dễ nhìn hơn.
  • Nếu bạn có một list dài và không dùng được drop down hoặc list đó không khả thi (hoặc không có nghĩa) để xếp theo một thứ tự, dùng ô text gợi ý sẽ là ý hay hơn.
  • Người dùng biết họ đang tìm gì và có thể đưa ra một vài từ trong ô gợi ý.

Không dùng drop down khi

Khi dùng text gợi ý, nhớ là list gợi ý không nên quá dài. Người dùng có thể phải kéo xuống để xem các gợi ý và nếu họ không thấy cái mình cần, họ phải kéo lên để đánh lại từ khóa. Một list gợi ý dài sẽ làm tốn thời gian, mà còn phức tạp.

3.8. Đặt các mặc định hợp lí

Các thiết bị di động thường được dùng khi người dùng đang vội. Họ muốn hoàn thành nhanh công việc và muốn xem kết quả nhan và chính xác. Nếu có thể, đưa ra một vài lựa chọn mặc định dựa vào ngữ cảnh mà form của bạn đang được dùng.

Mỗi form có một cách sử dụng khác nhau. Ví dụ, khi dùng một form để tìm thời gian tàu thì người dùng sẽ muốn tìm bảng biểu thời gian của các chuyến tàu cùng ngày mà họ tìm kiếm. Vì thế, nếu đặt mặc định thời gian là ngày hôm nay và chuyến tàu sắp tới (hoặc tàu tối nếu lúc đó là 6 giờ chiều) làm lựa chọn mặc định. Partick Rhone đã chỉ ra lợi ích của việc đặt mặc định hợp lí:

Mặc định hợp lí làm giảm sai sót và mang lại sự đơn giản để ai cũng có thể áp dụng. 

4. Kết

Cái cuối cùng quan trọng khi thiết kế form trên di động là - Đầu tiên, phải hiểu tại sao và khi nào người dùng sử dụng form di động. Thứ hai, chỉ ra nội dung cơ bản của các trường cho tác vụ. Hãy mạnh tay loại bỏ các trường không cần thiết. Và dùng các kĩ thuật ở trên để thiết kế tương tác người dùng hiệu quả nhất. Lúc này, bạn nên cân nhắc đến các hạn chế của môi trường di động.

Nhớ là mục tiêu của người dùng di động là hoàn thành tác vụ (cho dùng chúng là gì đi nữa) một cách nhanh chóng và hiệu quả.

Người dịch: Đoàn Dự

Nguồn: uxbooth.com