7 kinh nghiệm khi thiết kế web trên mobile

Internet di động tiếp tục phát triển rất nhanh chóng. Những hướng dẫn này sẽ giúp bạn tạo ra hoặc cải thiện trải nghiệm người dùng điện thoại di động của bạn.

phiên bản mobile của cnn

Phiên bản PC và mobile của CNN

1. Giảm số lượng nội dung

Không phải tất cả mọi thứ được hiển thị trên website phiên bản PC đều phù hợp trên thiết bị Mobile. Ngay cả những chiếc iPhone với màn hình hiển thị khá rộng cũng chỉ bằng 1/5 so với một chiếc laptop bình thường. Vì thế không gian hiển thị sẽ ít hơn rất nhiều. Đồng thời những người sử dụng mobile trên internet thông thường cũng bận rộn hơn, họ ít có thời gian để đọc những thứ không liên quan đến nhu cầu chính.

Nên chúng ta phải biết sử dụng tốt đến từng điểm ảnh. Bằng cách đơn giản hóa nội dung và chỉ để những nội dung hay tính năng quan trọng thì lượng nội dung hiển thị sẽ được tối ưu hóa trên mobile.

Ngoài ra đơn giản hóa nội dung cũng giúp chúng ta dễ dàng duyệt hơn khi mạng mobile khá là yếu.

2. Bố trí 1 cột duy nhất – làm việc tốt nhất

Giả sử bạn đang muốn xem 1 bài báo mà không nhìn rõ.bạn dùng tay phóng to để đọc nhưng lại chạm vào 1 cái gì đó khác.Và bạn sẽ lại phải back lại và lại zoom lại.Nhất là 1 page có quá nhiều nội dung thì việc chạm nhầm là rất dễ thấy. Điều này mang đến sự khó chịu cho người sử dụng.

trang chi tiet cua cnn mobile website

Trang chi tiết của CNN trên mobile

Website được duyệt trên mobile khá là khó nhìn.Để đọc được nội dung cần thiết thì người sử dụng sẽ phải zoom để nhìn rõ.Việc này rất là bất tiện.

Hãy loại bỏ nội dung ưu tiên thấp và sử dụng một cách bố trí một cột duy nhất.

Thay vào đó, tạo ra các trang cột duy nhất sử dụng toàn bộ chiều rộng của màn hình. Để thêm nội dung bổ sung trang web sẽ mở rộng xuống dưới chứ không phải là hai bên, trên di động di chuyển xuống sẽ thuận lợi hơn di chuyển qua lại.

3. Trình bày nhiều dạng menu điều hướng khác nhau

Rất khó để xếp đủ điều hướng trên cùng 1 page web di động một cách phù hợp.Xếp đầy đủ các mục điều hướng ở phía trên sẽ đẩy nội dung đi quá xa.Dưới đây là một số lời khuyên cho việc đặt chuyển hướng trên trang web điện thoải di động:

Trên trang chủ đặt chuyển hướng và tìm kiếm trên website ở trên cùng 1 trang,nội dung để cho các trang sau.Điều này phù hợp với các website mà người sử dụng muốn điều hướng hoặc tìm kiếm ngay lập tức, hơn là đọc nội dung. Ví dụ, khi người dùng truy cập các trang web thương mại điện tử họ thường có một loại sản phẩm cụ thể trong tâm trí và muốn khai thác thông qua nó hoặc gõ vào hộp tìm kiếm.

4. Giảm thiểu nhập văn bản

Việc nhập văn bản hay gõ, chạm, click trên mobile khó hơn nhiều so với laptop hay destop. Vì thế việc có sai sót khi nhập văn bản hay nhập chậm. Nên người sử dụng sẽ rất khó chịu khi phải gõ nhiều trên mobile.

Đứng trên vị trí người thiết kế,các bạn có thể làm một số việc trên để giảm lượng nhập văn bản trên mobile cho người dùng:

  1. Sử dụng lưu trữ trên điện thoại.
  2. Nhập mã PIN thay vì mật khẩu, hay là nhập số thay các kí tự, nhất là Tiếng Việt có dấu.
  3. Tận dụng các chức năng có sẵn. Tối đa hóa việc click thay vì nhập lựa chọn.
  4. Điều này sẽ giúp người sử dụng cảm thấy thoải mái và tiện lợi hơn với thiết kế website của bạn.

5. Cần có bao nhiêu phiên bản cho website di động

Màn hình và sức mạnh xử lý trên điện thoại di động khác nhau rất nhiều. Ví dụ, kiểm tra nhanh ở một nhà bán lẻ điện thoại di động hàng đầu cho thấy điện thoại bán chạy với độ phân giải khác nhau, từ 128 x 160 pixel với lên đến 480 x 800. Và trong khi nhiều điện thoại thông minh có khả năng để tải các trang web đầy đủ thì các dòng điện thoại ít tiên tiến không tải nổi.

Nếu trang web của bạn tập trung đến đối tượng người sử dụng điện thoại thông minh với tốc độ tải nhanh thì chỉ cần 1 phiên bản là đủ. Tuy nhiên, nếu bạn muốn tiếp cận đối tượng khách hàng rộng hơn thì bạn nên xem xét việc tạo nhiều phiên bản di động. VD: Facebook có tới 3 phiên bản dành cho điện thoại di động là:

  1. m.facebook.com là trang web điện thoại di động chính.
  2. touch.facebook.com được tối ưu hóa cho điện thoại di động cảm ứng.
  3. 0.facebook.com được tối ưu hóa cho người sử dụng ở các nước có tốc độ download rất chậm.

6. Thiết kế cho màn hình cảm ứng và không có cảm ứng

Phần lớn người dùng Internet trên di động sử dụng smartphone. Vì vậy, trang web của bạn cần được ưu tiên tối ưu hóa cho smartphone. Nhưng có một thị phần rất lớn người sử dụng điện thoại không có cảm ứng, bạn cần thiết kế sao cho website của bạn dễ dàng sử dụng với cả điện thoại màn hình có cảm ứng và không co cảm ứng.

Khó khăn phổ biến nhất khi xem các trang web tiêu chuẩn trên điện thoại cảm ứng là việc click chọn, ngón tay thường quá to nên rất khó để click chính xác một liên kết nhỏ, nếu bạn thiết kế 2 hoặc nhiều liên kết nhỏ gần nhau, người dùng sẽ rất dễ vô tình click sai.

Các liên kết call-to-actions cần được thiết kế to hơn và nổi bật hơn để thu hút khách hàng và thuận lợi hơn cho việc click chọn.

7. Hãy tận dụng chức năng sẵn có

Nhiều điện thoại lại tiện lợi hơn máy tính vì có chứa một số chức năng được tích hợp sẵn mà trên máy tính không có:

Thực hiện cuộc gọi

Tất cả các điện thoại có thể (tất nhiên) thực hiện cuộc gọi điện thoại ( máy tính cần thêm phần mềm hầu hết người dùng sẽ không phải mua tín dụng để thực hiện cuộc gọi từ máy tính của họ để điện thoại vật lý) . Cho phép người dùng tự động gọi khi nhấp vào một số điện thoại hay liên kết cuộc gọi . Điều này rất hữu ích cho việc sử dụng ‘Liên hệ với chúng tôi ‘

Xem địa chỉ trên bản đồ

Tương tự như vậy , nó có thể cung cấp cho người dùng tùy chọn để lựa chọn một địa chỉ và tự động mở ứng dụng bản đồ điện thoại di động .

Tìm những vị trí gần nhất…

Người dùng thường truy cập internet trên các thiết bị di động khi đang đi ra ngoài. Hầu hết điện thoại di động đều có chức năng định vị toàn cầu (ví dụ GPS), do đó bạn có thể yêu cầu người dùng chia sẻ vị trí hiện tại của họ. Ví dụ các hệ thống cửa hàng bán lẻ sẽ dễ dàng được khách hàng tìm thấy cửa hiệu gần nhất của họ trên bản đồ. Phiên bản di dộng của các trang mạng xã hội giúp cho người dùng dễ dàng tìm thấy bạn bè, các địa điểm hay các sự kiện gần nơi họ ở.

Sáng tạo trong việc lấy thông tin người dùng

Có nhiều cách sáng tạo cho phép người dùng nhập thông tin của họ một cách thú vị và hữu dụng. Mã vạch QR code là một ví dụ. Waitorse đã có một chiến dịch quảng cáo vào cuối năm ngoái để quảng bá cho ứng dụng Christmas/ giáng sinh cho Iphone và Android của hãng. Chỉ cần quét mã vạch, người dùng sẽ được điều hướng thẳng tới app stores để download ứng dụng về điện thoại của mình.

QR codes

QR Codes kết nối mọi người đến người khác và đến nội dung đa truyền thông số sẽ rất hữu ích cho doanh nghiệp và người tiêu dùng

Dịch từ: webcredible.co.uk

Posted in: Web Design

Leave a Comment (0) ↓
 
 

Leave a Comment

*