Thiết kế Slider: Khái niệm cơ bản và ví dụ

Thiết kế Slider: Khái niệm cơ bản và ví dụ

Thiết kế dạng thanh trượt (Sliders) là một cách để giúp người dùng thao tác dễ dàng trên một website. Vậy slider nên thiết kế như thế nào để phù hợp với nhu cầu? Hãy cùng tìm hiểu trong bài viết này nhé!

Mặc dù các field nhập liệu thông thường vẫn được sử dụng phổ biến nhưng slider ngày càng trở nên phổ biến không kém. Trong những năm qua, người dùng ngày càng quen với việc sử dụng thanh trượt trong một ngữ cảnh nhất định.

Thanh trượt trong UI design

Thanh trượt như một thành phần giao diện và nó có thể cải thiện trải nghiệm người dùng. Trên thanh trượt có các tùy chọn mà người dùng có thể kéo tiêu điểm đến tùy chọn mà họ mong muốn. Thực tế, các designer gọi phần thân của thanh trượt là rãnh với điểm lựa chọn hoạt động như nút điều khiển thanh trượt hoặc núm xoay. Đó là một cách thông minh để cho phép người dùng kéo về nhiều tùy chọn khác nhau, đồng thời giúp trải nghiệm mượt hơn.

Hình 1: Ví dụ về thiết kế thanh trượt

Hình 1: Ví dụ về thiết kế thanh trượt

Thanh trượt là một cách trực quan và dễ tương tác hơn để hoàn thành mục tiêu. Trong thực tế, điều này có nghĩa là người dùng cần ít công sức khi sử dụng thanh trượt thay vì phải nhập. Điều này cũng tương tự đối với các thành phần như nút bật tắt, menu thả xuống, v.v. Toàn bộ điểm chính ở đây không phải là có một giao diện đẹp mắt mà là làm cho nó dễ dàng sử dụng và thiết thực hơn.

Khi nào chúng ta nên chọn sử dụng thanh trượt?

Thanh trượt mang lại giá trị thực cho thiết kế. Nhưng cũng giống như các thành phần tương tác khác, chúng phải có thời gian và địa điểm sử dụng thích hợp.

Với nút bật tắt, người dùng sẽ mong muốn điều gì đó thay đổi trạng thái ngay lập tức. Ví dụ, sẽ rất khó hiểu khi người dùng bấm một nút bật tắt, nhưng sau đó phải lưu hành động đó bằng cách nhấn một nút khác. Các UI-UX designer phải tôn trọng những kỳ vọng này của người dùng, triển khai công tắc bật tắt đúng cách.

Mục tiêu cuối cùng của việc chọn thanh trượt trong thiết kế là giúp người dùng hoàn thành tác vụ nhanh nhất và dễ dàng nhất có thể. Thanh trượt có thể phục vụ cho nhiều mục đích, ngoài việc chỉ dùng thanh trượt để điều khiển âm lượng đơn giản. Hãy cùng xem xét một số tình huống điển hình trong thiết kế giao diện người dùng dưới đây nhé.

Hình 2: Một ví dụ về thiết kế thanh trượt của tổ chức sự kiện ACME

Hình 2: Một ví dụ về thiết kế thanh trượt của tổ chức sự kiện ACME

Khi người dùng không chắc họ muốn gì (thường xuyên xảy ra, đặc biệt là khi liên quan đến mua sắm), có thể dùng thanh trượt với giá trị tiền tệ, thể hiện số tiền người dùng sẵn sàng chi tiêu. Nó cũng có thể dùng với những thứ như ngày tháng hoặc thời gian trải nghiệm. Không phải lúc nào người dùng cũng chắc chắn về những gì họ muốn, đặc biệt khi mua sắm online. Đó là lý do tại sao các designer luôn nỗ lực để giúp người dùng khám phá. Thanh trượt là một cách tiện dụng để đạt được hiệu quả đó.

Để chỉ định các tùy chọn tìm kiếm mà người dùng muốn (điều này thường có thể được tìm thấy trong các cửa hàng trực tuyến), thanh trượt có thể là một cách tiện dụng giúp người dùng thu hẹp phạm vi tìm kiếm của họ mà không cần đi sâu vào các chi tiết nhỏ. Điều này có nghĩa là người dùng không chắc chắn về những gì họ muốn, nhưng nó giúp họ thu hẹp tìm kiếm đến các lựa chọn phù hợp hơn.

Hình 3: Ví dụ thanh trượt dùng để thu hẹp tìm kiếm trong thanh toán thế chấp

Hình 3: Ví dụ về thanh trượt dùng để thu hẹp tìm kiếm trong thanh toán thế chấp

Lựa chọn giữa một số tùy chọn. Trong bối cảnh này, một số designer sử dụng thanh trượt theo cách phục vụ chức năng tương tự như nút radio. Chẳng hạn về quy cách giao hàng, trong đó người dùng phải chọn giữa bốn tùy chọn, từ siêu nhanh đến tiêu chuẩn. Có một số cuộc tranh luận về việc liệu đây có phải là cách sử dụng thanh trượt tốt hay không, vì hầu hết thiết kế thanh trượt điển hình không cho phép người dùng nhìn thấy các tùy chọn có sẵn ngay lập tức.

Vấn đề trong ví dụ này là người dùng có thể sử dụng thêm thông tin chi tiết về kế hoạch giao hàng. Mỗi tùy chọn đòi hỏi điều gì? Có tính thêm phí khi chuyển phát nhanh hoặc siêu nhanh không?

Giúp người dùng dễ hiểu hơn. Ngay cả khi người dùng biết một số liệu cụ thể hơn mà họ muốn, việc hiển thị tùy chọn mong muốn của họ đứng ở đâu trong bối cảnh lớn hơn có thể có tác động đến người dùng.

Ví dụ: Người dùng đang tìm kiếm một nhà cung cấp dịch vụ di động có thể cung cấp gói dữ liệu 3 gigabyte. Liệu quyết định của họ có thay đổi nếu họ có một tùy chọn tốt hơn mà nhà nhà cung cấp đó cung cấp? Nếu họ được cung cấp một số insight về gói dữ liệu 100 gigabyte, thì có lẽ họ sẽ thấy gói dữ liệu 3 gigabyte ban đầu họ chọn là quá thấp khi so sánh.

Ví dụ thanh trượt cung cấp thông tin giữa 2 gói tập gym Advanced hay Pro

Hình 4: Ví dụ thanh trượt cung cấp thông tin giữa 2 gói tập gym Advanced hay Pro

Thanh trượt có thể là một cách hiệu quả để đưa những con số cụ thể vào ngữ cảnh. Theo nghĩa này, phần thân của slider có thể tự đưa ra ngữ cảnh, giúp người dùng hiểu tùy chọn ưa thích của họ đứng ở đâu so với các tùy chọn khác. Điều tương tự cũng có thể được áp dụng cho các nền tảng ngân hàng sử dụng thanh trượt như một cách để người dùng hình dung các số liệu có vẻ phức tạp, như ví dụ thanh toán thế chấp đã được đề cập ở trên.

Hướng dẫn thiết kế thanh trượt

Cung cấp cho người dùng nhiều chi tiết nhất có thể

Thanh trượt có thể là một cách tuyệt vời để giúp người dùng khám phá các tùy chọn mới hoặc hiểu rõ hơn lựa chọn mà họ muốn. Tuy nhiên, bản thân thanh trượt có thể khiến người dùng cảm thấy khó hiểu về chức năng của nó trên màn hình. Bạn cần phải cung cấp cho các chi tiết để người dùng hiểu các tùy chọn trên mỗi điểm của thanh trượt, cũng như bất kỳ tùy chọn nào đang được chọn.

Rõ ràng là một thiết kế thanh trượt, cho dù thông minh đến đâu, cũng không thể cung cấp cho người dùng nhiều chi tiết mà không làm rối mắt giao diện. Điều này đặc biệt đúng khi nói đến thanh trượt trên mobile. Bạn có thể thêm khoảng trống để để chèn các giá trị thực hoặc thêm ngữ cảnh vào thanh trượt như ví dụ bên dưới.

Hình 5: Một thiết kế thanh trượt tiêu chuẩn

Hình 5: Một thiết kế thanh trượt tiêu chuẩn

Bạn cũng nên dùng các biểu tượng trên các điểm của thanh trượt, một biểu tượng để cho người dùng biết rằng có thể cầm nó di chuyển. Mũi tên hoặc dấu cộng và dấu trừ thường là các lựa chọn phổ biến nhất cho điều này.

Một số thanh trượt sử dụng chính nút điều khiển như một biểu tượng và nó có thể di chuyển được. Bạn có thể thêm các biểu tượng hoặc sử dụng chính nút điều khiển như một biểu tượng. Chủ yếu là để khi người dùng nhìn vào biểu tượng đó họ biết đó là nút điều khiển thanh trượt và có thể di chuyển qua lại, trái hoặc phải.

Làm cho thanh trượt phản hồi nhanh, không bị lag

Thanh trượt có thể là một cách tương tác cao để khám phá các tùy chọn và nhận thêm thông tin hoặc tìm kiếm hẹp hơn. Điều quan trọng là thanh trượt phản hồi người dùng ngay lập tức. Hãy nhớ rằng toàn bộ các điểm trên thanh trượt là giúp người dùng lựa chọn dễ dàng hơn. Một thanh trượt hoạt động tốt là khi nó phản hồi nhanh các lựa chọn của người dùng.

Chuyển đổi mượt mà giữa các trạng thái

Một số thiết kế thanh trượt không chú trọng vào việc chuyển đổi giữa các trạng thái đã chọn. Đây có vẻ là một chi tiết nhỏ, nhưng thiết kế UX chất lượng cao thường nằm ở những chi tiết nhỏ. Quá trình chuyển đổi lộn xộn từ một tùy chọn đã chọn sang tùy chọn tiếp theo có thể khiến thanh trượt bị lag, tạo ra vấn đề trong trải nghiệm người dùng.

Để nút điều khiển thanh trượt phản hồi mượt mà, thì thanh trượt hai điểm có thể là một lựa chọn khả thi.

Thanh trượt hai điểm

Khi giúp người dùng lọc ra các tùy chọn, loại thanh trượt này sẽ được triển khai. Chúng có thể là một cách thông minh để tránh có hai thanh trượt riêng biệt đề cập đến cùng một khía cạnh của tìm kiếm, kết hợp chúng trong một thanh trượt có liên quan. Tất cả những gì cần làm là có một thanh trượt với hai nút điều khiển thanh trượt có thể di chuyển được, giúp người dùng dễ dàng thiết lập phạm vi tùy chọn có thể chấp nhận được.

Hình 6: Thanh trượt với hai nút điều khiển thanh trượt

Hình 6: Thanh trượt với hai nút điều khiển thanh trượt

Ví dụ đơn giản về phạm vi giá của một tìm kiếm, với thanh trượt có thể xác định cả giá tối thiểu và giá tối đa. Hiệu ứng tương tự có thể đạt được với các thành phần giao diện người dùng khác, với các website sử dụng những thứ như menu thả xuống cũng xác định phạm vi giá.

Thiết kế thanh trượt di động: những gì thay đổi?

Trên thực tế, tất cả các hướng dẫn điển hình dành cho thanh trượt trên web đều áp dụng cho thanh trượt trên di động. Giống như các khía cạnh khác của thiết kế giao diện người dùng, thiết kế di động có nhiều yếu tố cần xem xét hơn. Khi thảo luận về thiết kế thanh trượt trên mobile, yếu tố quan trọng nhất cần lưu ý là yếu tố cảm ứng trên màn hình.

Hình 7: Thiết kế thanh trượt trên thiết bị di động

Hình 7: Thiết kế thanh trượt trên thiết bị di động

Có hai điều cần xem xét ở đây: kích thước ngón tay của người dùng và ảnh hưởng của nó đối với trải nghiệm người dùng. Cuối cùng, các thanh trượt được xử lý bằng ngón tay cần phải có đủ không gian để nút điều khiển thanh trượt di chuyển tự do.

Một hiệu quả thực tế khác của thiết kế thanh trượt di động là các label phải được đặt đúng cách. Khi người dùng sử dụng thanh trượt để hoàn tất sự lựa chọn của mình, điều quan trọng là ngón tay của họ không che các label có liên quan. Điều này có nghĩa là các label cần phải nằm ở hai bên hoặc phía trên thanh trượt. Bằng cách đó, người dùng có thể thấy được các label để họ lựa chọn.

Ví dụ về thiết kế thanh trượt

1. Blue Nile

Blue Nile là một nhà bán lẻ kim cương trực tuyến nổi tiếng. Một thương hiệu tự hào trong việc giúp khách hàng trên toàn thế giới chọn đúng loại đá và tạo ra món đồ trang sức lý tưởng của riêng họ. Blue Nile đã tạo ra một hệ thống lọc với các thanh trượt hai điểm, cho phép người dùng chọn lọc kết quả mà họ muốn.

Hình 8: Ví dụ thiết kế thanh trượt của Blue Nile

Hình 8: Ví dụ thiết kế thanh trượt của Blue Nile

2. SkyScanner

SkyScanner sử dụng thanh trượt hai điểm giúp người dùng chọn khoảng thời gian khởi hành và thời gian đến của các chuyến bay được hiển thị. Chỉ có một thanh trượt một điểm để người dùng chọn thời gian nghỉ khi quá cảnh. Đây là một ví dụ tuyệt vời khác về việc sử dụng thanh trượt để lọc tìm kiếm!

Hình 9: Ví dụ thiết kế thanh trượt của SkyScanner

Hình 9: Ví dụ thiết kế thanh trượt của SkyScanner

3. Tylko

Tylko sử dụng một số thanh trượt không phải để lọc các tùy chọn mà để giúp người dùng hình dung các tùy chọn có sẵn. Mỗi thanh trượt điều khiển một khía cạnh cái kệ sách chẳng hạn như chiều cao hoặc chiều rộng. Nó hoạt động khá tốt vì nó không chỉ cung cấp cho người dùng cảm nhận ngay lập tức về các tùy chọn có sẵn mà còn đưa tùy chọn hiện được chọn vào ngữ cảnh.

Hình 10: Ví dụ thiết kế thanh trượt của Tylko

Hình 10: Ví dụ thiết kế thanh trượt của Tylko

4. Lloyd’s

Lloyd’s là một ngân hàng đã sử dụng rất khéo léo các thanh trượt để giúp người dùng hình dung một vấn đề phức tạp. Đó là các khoản cho vay. Tất cả chúng ta đều biết và sợ chúng, với rất nhiều người trong chúng ta sẽ không hình dung được một khoản vay sẽ là như thế nào. Lloyd’s hiểu rằng các thanh trượt có thể giúp người dùng không chỉ khám phá ranh giới và tác động của một khoản vay mà còn hình dung được một khoản vay như vậy sẽ đòi hỏi những gì.

Hình 11: Ví dụ thiết kế thanh trượt của Lloyd’s

Hình 11: Ví dụ thiết kế thanh trượt của Lloyd’s

5. Spotify

Spotify là một nền tảng phát nhạc trực tuyến rất phổ biến. Thiết kế giao diện người dùng của họ đã nhận được cả lời khen và lời chỉ trích, nhưng không thể phủ nhận rằng thiết kế UX của họ rất xuất sắc. Thanh trượt của họ không đề cập đến bất kỳ bộ lọc hoặc cài đặt âm lượng nào. Spotify sử dụng thiết kế thanh trượt để giúp người dùng định cấu hình giao diện trong quá trình chuyển đổi giữa các bài hát. Nó đơn giản, dễ hiểu và dễ tương tác.

Hình 12: Ví dụ thiết kế thanh trượt của Spotify

Hình 12: Ví dụ thiết kế thanh trượt của Spotify

UI kits cho thiết kế thanh trượt

Wireframing UI kit cho website hoặc mobile

Đây là hai bộ giao diện người dùng (UI kits) bao gồm rất nhiều thứ trong các dự án thiết kế. Bao gồm các tác phẩm kinh điển về giao diện người dùng cả về cài đặt trên web và cài đặt trên mobile. Các bộ giao diện người dùng này đều là công cụ cực kỳ linh hoạt để bạn sử dụng. Hầu hết designer sẽ đầu tư rất nhiều công sức vào việc phác thảo ý tưởng của họ trước khi họ cam kết tạo ra một prototype có độ trung thực cao và wireframing kit website có thể đưa các nhóm thiết kế đến đó nhanh hơn.

Hình 13: Wireframe UI kit

Hình 13: Wireframe UI kit

Wireframing UI trên web và di động đều có các thanh trượt được tạo sẵn một số tương tác để có thể vừa tiết kiệm thời gian vừa mở đường cho các thiết kế chi tiết hơn.

iOS UI kit

iOS UI kit nhằm mục đích giúp các nhà thiết kế tạo prototype về bất kỳ loại ứng dụng iOS nào. Bộ công cụ này có mọi thứ bạn cần để tạo ra một ứng dụng phản ánh phong cách cổ điển của Apple, đồng thời mang lại nhiều lợi nhuận để tạo ra một cái gì đó độc đáo. Bộ giao diện người dùng bao gồm 3 loại thanh trượt khác nhau: thanh trượt kích thước văn bản, thanh trượt âm lượng và một thanh trượt đơn giản điển hình. Tất cả chúng đều bao gồm tương tác cơ bản để bắt đầu quá trình thiết kế.

Hình 14: IOS UI kit

Hình 14: IOS UI kit

 Material Design UI Kit

Material design UI kit hoạt động tương tự như iOS UI kit. Nó bao gồm tất cả các khía cạnh điển hình của ứng dụng Android, cung cấp nguồn tài nguyên quý giá cho bất kỳ UI designer nào. Bộ giao diện người dùng bao gồm một thanh trượt kiểu Android điển hình, sẵn sàng được tích hợp vào bất kỳ thiết kế nào.

Hình 14: Material Design UI Kit

Hình 14: Material Design UI Kit

Kết Luận

Thanh trượt có thể thay đổi ấn tượng ban đầu về giao diện trong UI-UX. Nó tạo nên một thành phần trên giao diện điển hình mà hầu hết chúng ta đều biết chính xác cách sử dụng khi nhìn thấy nó. Nhưng tất nhiên, không có khía cạnh nào của thiết kế giao diện người dùng là không có các quy tắc và hướng dẫn riêng của nó.

Thiết kế trượt có thể vừa là một thành phần đơn giản vừa là cơ hội để tăng thêm sự tinh tế cho sản phẩm. Tất cả chỉ là việc tìm ra những cơ hội thích hợp để sử dụng thanh trượt trong thiết kế!

Có thể bạn quan tâm: Dịch vụ Web – Redesign từ MangoAds.

Về tác giả

Hai Yen Tran

Digital Marketing Leader tại MangoAds Co., Ltd