Mobile first - Hướng tới trải nghiệm người dùng

Trước kia hầu hết các thiết kế giao diện trên Internet đều dành cho máy tính để bàn trong khi thiết kế cho giao diện trên di động chưa được ưu tiên. Kể cả khi trào lưu thiết kế website tương thích (responsive) được đưa vào sử dụng nhưng nhiều người vẫn quen thuộc với thiết kế cũ.

1. Vậy thế nào là Mobile First?

"Mobile First" có thể hiểu là cách hiển thị nội dung một cách tối ưu, nâng cao trải nghiệm người dùng trên di động thay vì các thiết kế chủ đạo dành cho Desktop hay PC.

Nếu bạn vẫn đang nghĩ rằng thiết kế trên di động là một thị trường ngách, bạn cần thay đổi suy nghĩ. Di động không phải là xu hướng hay tương lai mà là hiện tại. Dưới đây là những con số thống kê của người dùng Internet qua mobile trên thế giới và tại Việt Nam.

• • Vào năm 2013 số người sử dụng internet chiếm 73,5%, dự kiến năm 2017 nhiều hơn 90% người sử dụng internet truy cập vào các website trên di động.
• • Doanh số thiết bị di động đang gia tăng với hơn 85% thiết bị cầm tay được dùng truy cập để internet.
• • Trong khi đó, hoạt động của người dùng di động năm 2015 tại Việt Nam bao gồm: Tỉ lệ người sử dụng Internet di động lên tới 31%, trong khi máy tính bàn là 18% và máy tính xách tay là 10%. 48% sử dụng điện thoại để đọc tin tức.

2. Lợi ích của Mobile first

Lời tuyên bố của Eric Schmidt vào năm 2010 cho thấy Google đã tiếp cận hướng Internet trên di động từ lâu và cho rằng “chiếc di động xinh xắn sẽ là công cụ tìm kiếm hữu hiệu cho khách hàng mọi lúc mọi nơi”.

• • Dễ dàng tìm kiếm thông tin một cách nhanh chóng

Một khi website của bạn không tối ưu hóa cho tablet, mobile hay các thiết bị di động khác, rất khó để tìm kiếm thông tin một cách nhanh chóng. Người dùng thường xuyên phải phóng to, di chuyển lòng vòng và tìm kiếm số điện thoại của bạn ở một góc nhỏ nào đó. Với Web Mobile, thông tin quan trọng được trình bày thuận tiện cho người dùng. Ví dụ như tiệm pizza để số điện thoại của họ ngay trên đầu website và khuyến khích gọi giao hàng miễn phí

• • Hiển thị theo độ phân dải màn hình di động

Smartphone hiện nay có khá nhiều tuỳ chọn cho độ phân giải màn hình từ: 240px, 320px, cho đến 1080px. Theo đó website sẽ hiển thị theo nhiều cách trên độ phân giải màn hình này, và đa số website hiện nay thiết kế thông dụng với độ phân giải 960px hoặc hơn. Theo đó website sẽ hiển thị trên trình duyệt smartphone của bạn theo tiêu chí tùy biến tự động dàn trang mà không cần zoom in – zoom out để xem nội dung đó.

• • Trải nghiệm thân thiện với người dùng

Với một website được thiết kế trên di động giúp người dùng trải nghiệm được nội dung và sản phẩm tốt hơn cũng như tạo hình ảnh doanh nghiệp chuyên nghiệp trong tâm trí khách hàng.

• • Tương tác theo thời gian thực, mọi lúc, mọi nơi

Đối với các ứng dụng di động, thông tin được truyền tải tới người dùng theo thời gian thực, điển hình như các ứng dụng cho mạng xã hội, mọi thông tin liên quan tới bạn được đẩy (Push) trực tiếp vào máy di động cho dù họ ở bất bỳ nơi nào.

Điều gì đang thay đổi mobile-first index trên Google:

Khi ngày càng có nhiều tìm kiếm xảy ra trên điện thoại di động, Google muốn index và kết quả của nó đại diện cho đa số người dùng của họ – là những người dùng tìm kiếm trên các thiết bị di động.

Google đã bắt đầu sử dụng các phiên bản di động của trang web như chỉ mục tìm kiếm chính. Công cụ tìm kiếm index là một tập các trang/tài liệu mà chúng đã phát hiện, chủ yếu thông qua việc thu thập web thông qua các liên kết. Google đã thu thập web từ trình duyệt desktop và bây giờ Google đã thay đổi điều đó để thu thập dữ liệu web từ trình duyệt mobile.

Google lập chỉ mục khác nhau đối với mobile và desktop:

Cuối cùng, kế hoạch của Google chỉ là index một và đó là dựa vào nội dung di động để phục vụ danh sách cho cả người dùng mobile và desktop. Trong thời gian triển khai này sẽ có 2: desktop-first và mobile-first. Một nhóm nhỏ người dùng sẽ nhận được kết quả trong mobile-first index. Đó không phải là một cái gì đó mà bất cứ ai cũng có thể kiểm soát.

Google đã có niềm tin vào mobile-first index, cuối cùng sẽ là chỉ mục duy nhất được sử dụng. Hoặc nếu chỉ mục mới không được coi là hữu ích, Google có thể trở lại desktop-first index. Sau đó, nó được gọi là một thử nghiệm mobile-first index.

Trích “chỉ mục tìm kiếm của chúng tôi sẽ tiếp tục là một chỉ số duy nhất của các trang web và các ứng dụng, các thuật toán của chúng tôi sẽ chủ yếu sử dụng phiên bản di động của một trang web để xếp hạng trang web đó”.

Khái niệm Mobile-First

Khi nói về làm giao diện Responsive thì bạn cũng cần nên biết qua khái niệm Mobile-first vì nó sẽ giúp quy trình làm giao diện Responsive của bạn nhanh hơn rất nhiều. Mobile-first nghĩa là tên một quy trình thiết kế mà chúng ta sẽ bắt đầu thiết kế cho giao diện ở điện thoại trước và sử dụng điện thoại làm nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng, desktop, retina,…

Đặc điểm của quy trình mobile-first là chúng ta chỉ sử dụng media features là min-width chứ không sử dụng cái gì khác. vĐiều này có nghĩa là các thiết bị có chiều rộng tối thiểu là 320px sẽ áp dụng các CSS bên trong, dĩ nhiên nó cũng sẽ bao gồm luôn giao diện máy tính bảng, desktop,…

Tại sao nên sử dụng mobile-first:

• Tập trung tối đa vào giao diện ở điện thoại vì xu hướng sử dụng điện thoại ngày càng tăng.
• Tránh việc viết lại CSS, vì một CSS ở điện thoại có thể được tái sử dụng trên desktop. Nhưng nếu bạn viết CSS trên desktop trước thì ở giao diện điện thoại bạn vẫn phải viết lại nếu muốn tùy biến.
• Dễ dàng trong việc triển khai và quản lý, nâng cấp sau này.
  Tránh các lỗi hiển thị trên điện thoại do việc tùy biến từ CSS ở desktop.
• Và nhiều lý do khác mà chỉ khi làm mới biết.

 

Một cách hiểu khác và đang được ứng dụng nhiều đó là hiểu Mobile first là triển khai ứng dụng di động trước tiên. Vì một ứng dụng di động có nhiều ưu điểm so với website và phần mềm cho pc.

(st)

Xem thêm:

5 lý do sở hữu một ứng dụng di động là cần thiết đối với doanh nghiệp vừa và nhỏ

Chiến lược Mobile-First giúp doanh nghiệp & startup tạo ra sản phẩm tốt hơn và tiếp cận thị trường nhanh hơn

Các nền tảng công nghệ hỗ trợ cho khởi nghiệp tiết kiệm, hiệu quả,...

Tạo ứng dụng Android và iOS miễn phí cho website

Những trang tạo web miễn phí, thiết kế web miễn phí, xây dựng website miễn phí

Tại sao Mobile Marketing lại quan trọng đối với doanh nghiệp và các startup ?

10 bước đơn giản để biến ý tưởng thành ứng dụng di động, ứng dụng trên smartphone

Hướng dẫn xác định chi phí, giá phần mềm, giá website, giá ứng dụng

ứng dụng( mobile app, tablet app, app Android, app iOS, app Blackberry...) giá bao nhiêu? ;

Một số hình thức thu tiền từ ứng dụng ( mobile app ) ;

Các nền tảng công nghệ hỗ trợ cho khởi nghiệp tiết kiệm, hiệu quả,...

Có thể bạn chưa biết:

TUYỂN THỰC TẬP REACT NATIVE

* Trang bị kỹ năng về JS, lập trình hybrid app, sử dụng những công cụ hỗ trợ (VScode, github, sourcetree, ...)
* Thành quả mong muốn là các bạn tham gia sẽ có được kỹ năng lập trình hybrid app

Biểu mẫu đăng ký training tại đây >> http://bit.ly/2NK9YWd

TEAM MOBILE APPS - CTY DVMS