Thiết kế web moblie - Một số điều cần chú ý

 Ngày nay, việc sử dụng điện thoại di động để truy cập Internet đang trở nên rất phổ biến cùng với đó là các phong cách thiết kế web như Responsive hay Fluid đang dần lên ngôi, được người dùng sử dụng nhiều hơn.

Không chỉ là thiết kế website bình thường, những website mobile khi được thiết kế cần đươc tối ưu hóa thiết kế web mobile toàn diện từ mặt nội dung, kỹ thuật, SEO… để tăng thứ hạng tìm kiếm người dùng cũng như tối ưu hóa trải nghiệm cho khách hàng của mình.

 Dưới đây Thiết kế website Đà Nẵng xin tổng hợp một số chú ý mà tất cả các trang web mobile cần phải có:

Thiết kế các yếu tố định vị, định hướng có chủ đích

Việc lướt web trong mobile là một trải nghiệm khá thú vị. Vì thế chúng ta nên làm cho nó trở nên sinh động và có ý nghĩa. Việc chuyển hướng là bao gồm những gì mà người dùng cần thao tác và cung cấp đường dẫn rõ ràng.

Việc gỡ bỏ những lần chạm/ tương tác trên màn hình mobile không làm cho trình ứng dụng của bạn trở nên dễ sử dụng và có ý nghĩa hơn. Người dùng chỉ việc chạm một đến hai lần trên màn hình nếu họ biết họ đang ở đâu và làm gì

Điều đầu tiên, đảm bảo các yếu tố định vị nhìn có thể tương tác được. Ta nên thiết kế web trông giống như dạng nút, các danh sách hoặc dùng các dấu mũi tên.

Vì là thiết kế web mobile nên sẽ không có những trạng thái như bàn tay hay con chuột trên màn hình, do đó hãy chắc chắn rằng các yếu tố định vị, định hướng cần được thiết kế sao cho người dùng có cảm giác những yếu tố này có thể tương tác được.

Thứ hai, việc đặt tên nhãn cho tiêu đề rất quan trọng. Cần đảm bảo rằng những tiêu đề có một ý nghĩa gì đó cho người dùng. Mọi người đều biết ý nghĩa và công dụng của nút “back”. Nếu bạn có một đường dẫn cần một vài thao tác, thay vì ghi nhãn cho các nút quay lại với các tiêu đề trang trước đó, chỉ cần đặt tên “back”.

Nên đặt tên nhãn đơn giản và có ý nghĩa. Tránh gộp tất cả mọi thứ mà bạn không biết phải làm gì với chúng. Đây chính là những nơi có khả năng bẫy người sử dụng khi thao tác.

Hãy nhớ rằng với ít yếu tố định vị không có nghĩa là việc định hướng trở nên dễ dàng, vì vậy việc thêm những nút như “My Profile” hay “Password” sẽ tốt hơn là chôn chặt chúng vào trong một nhóm thông tin đã được thiết lập.

Icon là cách đơn giản nhất trong việc cung cấp thông tin. Điều này có nghĩa là không phải các câu chữ khó đọc hoặc là mất nhiều thời gian, nhưng bởi vì những nội dung thể hiện bằng đồ họa tạo ra một sự cân bằng thị giác tốt hơn.

Các thiết bị mobile là một môi trường khá thú vị để sử dụng và với các icon có thể cải thiện những trải nghiệm tổng thể cho người dùng. Thêm vào đó, icon kết hợp với nhãn tên rõ ràng sẽ giúp người dùng hiểu rõ ý nghĩa và cung cấp cho họ một đường dẫn rõ ràng.

Nội dung thiết kế web mobile: tập trung vào nội dung chính

Trên các thiết bị di động thì luôn có màn hình hiển thị vừa phải. 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. Việc gỡ bỏ những lần thao tác trên thiết kế web mobile không thực sự làm cho mọi thứ trở nên dễ dàng và thao tác nhanh hơn. Thêm vào đó, đơn giản gỡ bỏ một nội dung nào đó cũng không làm cho các giao diện web mobile dễ sử dụng hơn.

Tối ưu hóa hóa nội dung cho thiết kế web mobile 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.

Chỉ bao gồm nội dung hoặc các tính năng quan trọng nhất. Nội dung ưu tiên thấp có thể được gỡ bỏ có thể bao gồm các nội dung hoặc liên kết bên ngoài khu vực nội dung chính, chẳng hạn nội dung thường được tìm thấy trong các cột tay phải của các trang web tiêu chuẩn.

Thiết lập nội dung theo dạng cột đơn

Trang web rộng là khó khăn để xem trên màn hình điện thoại di động nhỏ. Ngay cả trên điện thoại thông minh như iPhone với màn hình của họ tương đối lớn các trang web tiêu chuẩn tải một tăng thu nhỏ để họ có thể phù hợp trên màn hình. Hầu hết các văn bản là đọc cho đến khi người dùng phóng to một phần của màn hình mà họ muốn xem. Phóng to trong không phải là lý tưởng vì nó cho biết thêm thêm một bước và phóng to ra không phải là dễ dàng để làm trên tất cả các điện thoại.

Sau khi bỏ đi những nội dung không quan trọng, tái lập nội dung, bạn có thể chia nhỏ đoạn văn bản hoặc đặt chúng dưới dạng bullet. Để thêm nội dung bổ sung trang web sẽ mở rộng xuống dưới chứ không phải là trên, như di chuyển xuống là dễ dàng hơn hơn so với di chuyển qua và người dùng thường thích nó.

Dưới đây là một số cách sử dụng yếu tố trực quan hỗ trợ cho văn bản:

 Sử dụng các icon đi kèm với các tiêu đề.
 Sử dụng các yếu tố đồ họa cho ngày tháng này thay vì chỉ liệt kê các ngày.
 Sử dụng infographic (thể hiện thông tin bằng hình ảnh) nhằm giải thích nội dung cần thông báo.
Sử dụng màu khác nhau cho các tiêu đề thay vì thay đổi kích thước font chữ.
Sử dụng nền màu sáng nhẹ nhằm giúp xác định các nội dung khác nhau.
Làm nổi rõ các nội dung quan trọng.
Sử dụng padding và những không gian âm để nhấn mạnh hay để tách bạch các nội dung văn bản.
Sử dụng các kiểu câu trích dẫn, các dòng nhỏ, khối hình để chia nhỏ nội dung.

Người dùng muốn được biết tất cả các nội dung của trang web, vì vậy hãy cung cấp đầy đủ cho họ bằng cách chia nhỏ nội dung và tái tập trung bằng những cơ chế thị giác khác.

Hạn chế 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 desktop .Vì thế việc có sai sót khi nhập văn bản hay nhập chậm. Vật lý QWERTY có xu hướng được bàn phím điện thoại di động dễ dàng nhất để sử dụng, tiếp theo là màn hình cảm ứng bàn phím QWERTY theo truyền thống 12 nút vật lý 12 bàn phím chữ và số. Tuy nhiên, người dùng thực hiện các lỗi nhiều hơn và chậm hơn đáng kể khi gõ trên bàn phím điện thoại di động tốt nhất so với khi sử dụng một bàn phím máy tính đầy đủ kích thước. Nó đứng vào lý do, sau đó, mà người dùng không muốn phải gõ càng nhiều trên các trang web di động.

Đứ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:

Sử dụng lưu trữ trên điện thoại.

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.

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.

Đ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.

Trình bày các định hướng khác nhau

Thật khó để phù hợp với điều hướng trên đầu trang của màn hình trên một trang web di động. Xếp ở đầu trang sẽ thúc đẩy các nội dung quá xa. Một cách bố trí cột duy nhất trên một trang màn hình điện thoại di động đặt điều hướng ở phía trên sẽ thúc đẩy các nội dung quá xa xuống. Dưới đây là một số lời khuyên cho việc thêm một chuyển hướng đến trang web điện thoại di động:

Trên trang chủ đặt điều hướng và trang web tìm kiếm ở phía trên của trang, và để lại nội dung cho các trang sau đó. Điều này là phù hợp cho các trang web mà người 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.

Đặt điều hướng ở phía dưới. Người dùng vẫn có thể truy cập điều hướng nhưng nó không nhận được trong cách đọc trang. Một liên kết neo ở phía trên cùng của trang có thể cung cấp cho truy cập nhanh hơn.

Đặt điều hướng trong một liên kết thả xuống ở trên cùng của trang (và có thể ở dưới cùng).

Lưu ý thiết kế web mobile ta chỉ cung cấp một nút ‘Quay lại’ trên các trang khác ngoài trang chủ. Điều này sẽ giúp thiết kế trang đơn giản tại các chi phí của bất kỳ khả năng điều hướng trực tiếp đến một phần khác của trang web di động.

Tận dụng các chức năng sẵn có

Nhiều điện thoại di động có một lợi thế hơn máy tính – họ đến với rất nhiều các chức năng sẵn có mà hầu hết các máy tính không có. Bạn có thể làm cho nó dễ dàng hơn cho người sử dụng để thực hiện các nhiệm vụ nhất định bằng cách sử dụng chức năng sẵn có của điện thoại di động và do đó loại bỏ sự cần thiết cho các bước hướng dẫn sử dụng.

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

Tất cả điện thoại có thể, tất nhiên, thực hiện cuộc gọi điện thoại theo mặc định (máy tính cá nhân yêu cầu người sử dụng phần mềm bổ sung sẽ không mua tín dụng để thực hiện các cuộc gọi từ máy tính của mình để điện thoại vật lý). Cho phép người dùng tự động gọi một số khi họ khai thác hoặc bấm vào một số điện thoại. Điều này rất hữu ích cho “Liên hệ với chúng tôi” hoặc các trang cửa hàng tìm. .

b. Xem một địa chỉ trên bản đồ

Tương tự như vậy, nó có thể cung cấp cho người sử 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.

c. Tìm nơi gần nhất …

Người sử dụng thường đi từ nhà của họ khi họ sử dụng Internet trên điện thoại di động của họ. Kể từ khi điện thoại di động đi kèm với khả năng phát hiện vị trí sẵn có (ví dụ như GPS), bạn có thể yêu cầu người sử dụng chia sẻ vị trí hiện tại của họ. Các nhà bán lẻ cao, đường phố, ví dụ, có thể làm cho nó dễ dàng cho khách hàng để phát hiện các cửa hàng gần nhất của họ trên bản đồ. Các trang web mạng xã hội di động có thể làm cho nó dễ dàng cho người dùng để tìm thấy những người, địa điểm hoặc sự kiện gần họ.

d. Nhập thông tin trong cách thức sáng tạo

Có nhiều cách sáng tạo để cho phép người sử dụng thông tin đầu vào là cả hai vui vẻ và hữu ích. Các mã QR là một ví dụ về điều này. Waitrose đã có một chiến dịch báo chí cuối năm ngoái để thúc đẩy nó Giáng sinh iPhone và Android ứng dụng. Quét mã mất người sử dụng trực tiếp đến các cửa hàng ứng dụng để tải về nó.

Cung cấp phản hồi (feedback) cho web mobile

Đây là một yếu tố không chỉ quan trọng đối với thiết kế web mobile mà còn quan trọng đối với tất cả các web. Cung cấp feedback cho người dùng trở nên quan trọng hơn trong web mobile vì bạn không có trình duyệt như trong website.

Những phản hồi như thay đổi trạng thái khi di chuyển lên đối tượng hoặc các hình ảnh động thực sự không tồn tại trong các thiết bị mobile cảm ứng. Các thiết bị mobile chỉ có thể hoạt động khi chúng đã được kích hoạt. Vì vậy cung cấp những phản hồi rõ ràng ngay khi vùng đối tượng được tương tác, đã được tương tác hoặc đang ở trạng thái kích hoạt là RẤT QUAN TRỌNG.

Nếu như bạn có một danh sách các đối tượng có thể tương tác, bạn cũng sẽ trông đợi sự phản hồi bằng hình ảnh trực quan ngay khi bạn chạm/tương tác và nhận được sự phản hồi từ chúng.

Dưới đây là một số phản hồi trực quan trong việc giao tiếp với người dùng:

Sử dụng màu để đánh dấu các khu vực đã được lựa chọn hoặc đang kích hoạt.
Sử dụng hiệu ứng hiển thị và làm mờ ngay khi người dùng chạm lên đối tượng này hay đối tượng khác.
Sử dụng đường viền hay tô chuyển gradient trên các nút khi được chọn.
Sử dụng các nút hay màu chữ khác nhau để biểu thị thay đổi trạng thái.
Sử dụng các dấu mũi tên khi các mục drop-down được chọn.
Sử dụng slide hay các yếu tố làm mờ giữa các màn hình để chỉ định trạng thái đang được thay đổi.

Sử dụng khoảng trắng trong thiết kế web mobile

Đừng để màn hình nhỏ đánh lừa bạn, bạn vẫn có nhiều khoảng trắng cho thiết kế của mình. Khoảng trắng là một yếu tố then chốt trong bất kỳ một thiết kế đẹp. Trong thiết kế mobile, khoảng trắng trở nên quan trọng hơn bởi vì bạn không có nhiều khoảng không để xử lý.

Để đạt được tính hiệu quả dễ sử dụng và dễ đọc, tất cả các yếu tố như nút, các yếu tố định vị, icon, nội dung, vvv… cần được thiết kế tách bạch rõ ràng và được đóng khung thích hợp.

luon luon co nhung khoang trong
Luôn luôn có những khoảng trống trong thiết kế web mobile

Để mang lại những trải nghiệm tốt hơn cho người dùng không có nghĩa là bạn phải giới hạn nội dung, ép nó để có được những khoảng trắng trong bố cục, nó cũng không có nghĩa là bạn phải sử dụng những font chữ lớn để để đọc, và nó cũng không có nghĩa là nên tránh dùng padding để làm hẹp lại nội dung.

Các web mobile đòi hỏi những hoạch định nhằm mang lại những trải nghiệm tốt cho người dùng. Và những khoảng trắng đóng một vai trò lớn trong việc lên kế hoạch tạo những trải nghiệm này.

Dưới đây là một số cách sử dụng khoảng trắng tạo ra một trải nghiệm tốt cho người dùng:

Sử dụng font nhỏ với những khoảng không xung quanh, không sử dụng những font chữ lớn mà không có những khoảng thở cho chúng.
Sử dụng nhiều padding xung quanh cách khối hộp chứa nội dung hay các icon.
Sử dụng hệ thống lưới rõ ràng với nhiều khoảng trắng giữa các yếu tố thiết kế nhằm làm rõ những nội dung riêng biệt.

Cần làm nổi bật thương hiệu thông qua thiết kế web mobile

Ngay khi chúng ta muốn thiết kế một website thật ấn tượng nhằm thể hiện được những kiến thức và kỹ năng thiết kế của mình, một trong những yếu tố quan trọng nhất của bất kỳ một thiết kế là xây dựng thương hiệu. Đừng bao giờ quên nó.

Mặc dù không có nhiều khoảng trống trong mobile, bạn nên nhớ đặt logo công ty vào trong thiết kế của bạn.

Có rất nhiều phong cách thiết kế logo. Tuy nhiên, hai yếu tố quan trọng trong tạo nên một thương hiệu rõ ràng là LOGO và NHÓM MÀU đại diện thương hiệu.

Trong thiết kế web mobile, cần đảm bảo hai yếu tố này được thể hiện. Vị trí logo có thể khác nhau tùy theo các phiên bản màn hình và thậm chí nó có thể được đặt trong trang chính. Việc làm cho hệ thống màu trở nên có ý nghĩa, gây ấn tượng cho người dùng là dùng nó xuyên suốt trong các trang còn lại.

Thêm một điều nhỏ nhưng quan trọng, là các trình duyệt mobile không có thanh tiêu đề hay thanh URL. Chi tiết nhỏ nhưng quan trọng này cho phép màn hình trình duyệt lớn trên toàn màn hình để nhắc nhở người dùng đã và đang ở đâu trong trang web.

Sự vắng mặt của thanh tiêu đề hay thanh URL trên thiết bị mobile làm cho thương hiệu thiết kế của bạn trở nên quan trọng hơn vì người dùng không có được sự tiện dụng để tìm kiếm và xem họ đang ở đâu.

Chúc bạn thành công!