Mobile UI Design

Bài viết này sẽ nêu ra các vấn đề của người dùng khi tương tác với giao diện trên điện thoại di động và giải quyết các vấn đề đó.

Nhập dữ liệu

I. Vấn đề của người dùng:

Người dùng muốn nhập thông tin một cách nhanh chóng, chính xác, dễ dàng.

II. Phương án giải quyết:

Cung cấp cho người dùng bàn phím liên quan đến dữ liệu họ đang phải nhập.

Ví dụ như khi nhập thông tin về số điện thoại, bar code… bàn phím hiện ra sẽ là bộ bàn phím số. Khi nhâp thông tin về văn bản bàn phím hiện ra sẽ là bộ bàn phím văn bản. Khi nhập đường dẫn trên thanh trình duyệt bàn phím hiện ra sẽ có thêm nút “.com” và “/”.

Điều này giúp cho người dùng không phải di chuyển một cách thủ công tìm kiếm giữa bàn phím số, bàn phím thường và bàn phím ký tự đặc biệt. Ngoài ra nó cũng là dấu hiệu cho người dùng biết cần phải nhập loại dữ liệu nào, tránh các nhầm lẫn không đáng có làm lãng phí thời gian và trí lực của người dùng khi tương tác.

Values & Autocomplete (Giá trị mặc định và thông tin gợi ý)

Vấn đề của người dùng:
Người dùng muốn hoàn thành tác vụ nhập dữ liệu một cách nhanh chóng.

Phương án giải quyết:
Tiên liệu trước các dữ liệu và cung cấp cho người dùng. Điều này cần thiết với các chức năng như tìm kiếm, kho ứng dụng (Google Play), tìm kiếm bản đồ (Google Map), tìm kiếm bạn bè (Skype)…

Khi người dùng chọn quốc gia, thì trong box số điện thoại mã vùng quốc gia được người dùng lựa chọn sẽ tự động hiển thị. Điều này giúp rất nhiều cho người dùng để hoàn thành nhanh chóng một tác vụ nhập dữ liệu.

Điều này là cần thiết và là một chức năng mặc định chứ không còn là một giá trị tăng thêm.

Animation
Vấn đề của người dùng:
Người dùng muốn có cảm giác thân thiện và hiểu được những hành động cần làm một cách dễ dàng.

Phương án giải quyết:
Điều tốt nhất cho các hành động trên thiết bị di động là tạo cho người dùng cảm nhận được sự “hăng hái – tận tình” từ sản phẩm và đáp ứng đầy đủ các nhu cầu của người dùng. Sự chuyển động đóng vai trò rất quan trọng trong duy trì sự hài lòng của người dùng khi tương tác. Người dùng sẽ cảm thấy rất vui vẻ khi được tương tác với sản phẩm đem lại cho họ sự tự nhiên như đang tương tác với các vật dụng thật ngoài đời. Ví dụ như màu sắc từ thiên nhiên, vận tốc của hành động, cách cuộn, cách phản hồi…

Nhà phát triển đầu tư cho Animation không chỉ là đầu tư sự vui vẻ tăng thêm cho trải nghiệm của người dùng. Nó cung cấp thông tin một cách chính xác và đặc biệt là Affordance (Affordance là từ dùng để chỉ một vật thể mà khi nhìn vào nó người dùng có thể đoán ngay được họ sẽ tương tác với nó như thế nào. Ví dụ thực tế ngoài đời khi nhìn thấy quai ở cặp sách – bạn sẽ biết nó dùng để xách lên, nhìn thấy dây đeo ở túi – bạn sẽ biết nó dùng để đeo… Định nghĩa từ idesign.vn)

Trải nghiệm trước, đăng ký sau

Vấn đề của người dùng:
Người dùng muốn dạo xem một vòng sản phẩm trước khi quyết định đăng ký tài khoản.

Cách giải quyết:
Nhiều ứng dụng hiện tại đang bắt người dùng ngay lập tức phải làm những thủ tục đăng ký khi vừa tiếp cận với ứng dụng. Dù bây giờ đã rút ngắn công đoạn bằng cách đăng ký qua FB, các bước đang ký được rút ngắn đi… nhưng đăng ký vẫn là đăng ký, với người dùng nó như một sự cam kết vậy.

Điều này gây không ít cảm giác tiêu cực cho người dùng. Ví như bạn bước vào một shop thời trang và trước khi bạn được ngắm nghía quần áo thì bạn phải ký một bản cam kết gì đó trước khi bạn có thể bước chân vào trong để xem quần áo vậy.

Các nhà phát triển nhanh chóng nhận ra vấn đề đó từ phía người dùng và đưa ra phương án giải quyết một cách thân thiện. Cho người dùng dạo xem ứng dụng, sử dụng thử nó trước khi tiến hành các bước đăng ký là giải pháp thông minh.

Khi người dùng bắt đầu quan tâm và đưa ra hành động tiếp theo thì phần đăng ký khi đó mới xuất hiện, kèm theo những ưu đãi người dùng nhận được khi đăng ký. Ví dụ như dòng chữ nổi bật nằm cùng box đăng ký “Đăng ký ngay để nhận được các sản phẩm giảm giá lên đến 70%”.

Đăng ký muộn có thể không phải luôn luôn là tốt nhất, nhưng nếu có thể thực hiện được thì nó sẽ là một cách tuyệt vời để tăng sự hào hứng cho người dùng của bạn.


BÀI VIẾT CỦA HOANG BIN, DỰA TRÊN KIẾN THỨC VÀ HÌNH ẢNH TỔNG HỢP TỪ SÁCH “MOBILE UI DESIGN PATTPATTENS” CỦA UXPIN VÀ CÁC NGUỒN TÀI LIỆU KHÁC.

banner-hoang-bean

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s