Kho web mẫu

Những tương tác thông minh trong thiết kế UX

8/11/2014 11:24:34 AM

Một số trang web tỏ ra tốt hơn nhiều những trang khác, từ tính khả dụng, thiết kế, tính năng… Những thiết kế tương tác và các chuyển động tạo nên sự khác biệt cơ bản trên các website hiện đại. Chúng ta hãy cùng chia sẻ một số kiến thức về các mô hình và tìm hiểu tại sao những mô hình này lại làm việc rất tốt.

 

 

Khi thiết kế một sản phẩm kỹ thuật sô, chúng ta thường sử dụng những phần mềm thiết kế như Photoshop và Sketch. Hầu hết mọi người trong lĩnh vực kinh doanh đều biết rằng thiết kế không chỉ là những gì được nhìn thấy. Như Steve Jobs đã nói:

 

Đó không chỉ là việc nó nhìn thế nào và cảm giác làm sao. Thiết kế còn là cách nó hoạt động "It's not just what it looks like and feels like. Design is how it works."

 

Trải nghiệm và ấn tượng của một sản phẩm được hình thành bởi sự kết hợp của các yếu tố, với sự tương tác đóng vai trò cơ bản. Không còn việc chúng ta nghĩ về giao diện độc đáo, chúng ta hình dung nó sẽ tương tác thế nào sau đó. Thay vào đó, chúng ta cần nghĩ về bản chất tương tác ngay từ đầu và coi nó như một thành phần tự nhiên.

 

Hãy nhìn vào một số ví dụ có sự tương tác thông minh với các chuyển động hợp lý và được đánh giá cao về trải nghiệm.

 

Chuyển động lăn chuột

Sự tuyệt vời của web là các liên kết. Khi bạn nhấp chuột vào các liên kết, nó sẽ dẫn bạn tới bất kỳ nơi nào, từ trang sản phẩm có thể tới một trang web bán các con rối. Sự lạc lối của bối cảnh có thể xảy ra.

 

Một trong những điều tuyệt vời về trải nghiệm của các cuốn sách chúng ta đọc là sự tuyến tính. Mọi phần của cuốn sách có sự liên kết từng bước. Bạn phải đọc phần đầu để hiểu phần hai. Khi bạn bỏ qua một phần, bạn cảm thấy mình đã quên một điều gì đó, vì một vài phần nội dung thiếu liên quan.

 

Đối với web, đặc biệt với các trang web dài, điều này thường xảy ra một cách tiềm thức. Bằng việc thêm vào một hiệu ứng lăn chuột, chúng ta có thể sửa điều này.

 

 

Accor_Best_Future_270711

 

 

So sánh với cái này;

 

 

ScrollingNoAnimation

 

 

So sánh hành động mặc định của trỏ chuột lên liên kết "Name" với các hành động có chuyển động. Giữ lại nội dung không phải một hành động vô thức nữa; nó là một quyết định.

 

Ví dụ thực tế, trang Hope lies at 24 frames per second có một nút menu cho mobile view đưa bạn bắt đầu từ trên cùng của trang, nhưng lại không có chuyển động nào báo hiệu cả. Nó khiến tôi mất hơn một phút để xem điều gì đang xảy ra.

 

Cần nhớ: Thay đổi đột ngột về giao diện sẽ gây khó khăn cho người dùng. Đừng nhảy cách đột ngột; thường xuyên cho họ thấy điều gì đang xảy ra.

 

Báo hiệu tình trạng

Như chúng ta thấy trong ví dụ trước, chuyển cảnh hợp lý giúp người dùng hiểu quá trình diễn ra của giao diện. Sự bất thường xảy ra khi có sự thay đổi đột ngột, vì trong tự nhiên hầu như không xảy ra điều này.

 

Hãy nhìn một ví dụ khác. Menu bật/tắt. Thông thường người dùng sẽ sử dụng dấu "+" để thêm nội dung hoặc đổ ra một yếu tố được giấu. Bằng cách xoay nó 45° khiến dấu "+" thành dấu đóng "x".

 

 

Stateful-toggle

 

 

Đây là một thay đổi rất có ý nghĩa của biểu tượng. Một chi tiết nhỏ làm nên sự khác biệt, nó thân thiện và giúp người dùng thêm rõ về chức năng của icon.

 

Cần nhớ: Làm các yếu tố trên trang web dễ hiểu đối với mỗi trạng thái.

 

Collapsed Form và Comments

Các Form bình luận có trên rất nhiều blogs và trang tin tức thường không mấy dễ chịu. Tại sao? Vì chúng không thân thiện? Khi chúng ta chuẩn bị đăng bình luận, bạn chỉ muốn ngay lập tức gõ lời bình và không quan tâm tới cái khác. Thay vào đó, bạn sẽ được hỏi những thứ như tên tuổi, này nọ. Thật phiền phức.

 

Để khuyến khích người dùng bình luận, chúng ta có thể collapse các form và chỉ chỉ ra những yếu tố cần thiết nhất của form bình luận. Khi người dùng nhấp chuột trên form bình luận, bạn có thể cho xuất hiện những thứ đi kèm. Bạn có thể xem ví dụ này trên bản beta của New York Time:

 

NY-Times

 

 

Cần nhớ; Giảm các yếu tố trên giao diện đối với người dùng. Chỉ hiện lên tất cả khi họ thực sự muốn điều đó.

 

 

ExpandingComments

 

Kéo để Refresh

Một trong những tương tác thú vị xuất hiện gần đây cùng với iPhone chính là "Pull to refresh" được nghĩ ra bởi Loren Brichter. Nó cho phép người dùng cập nhật nội dung khi cuộn ngược. Bạn có thể thấy ý tưởng này trong ứng dụng Twitter. Khi bạn scroll lên trên cùng của tweet, và scroll quá lên một chút, phần nội dung sẽ được làm mới.

 

 

Twitter

 

 

Tại sao nó lại hiệu quả như vậy? Trước khi điều này được thực hiện, người dùng phải bấm nút refresh trên thanh trình duyệt để cập nhật nội dung mới. Bằng việc đáp ứng mong muốn tìm kiếm nội dung của người dùng, việc xuất hiện thêm một hành động đương nhiên đã trở nên thừa thãi.

 

Ví dụ này bạn sẽ thấy rõ ràng nhất khi Iphone và Samsung đề nghị bạn gõ 4 số cho mật khẩu đăng nhập vào máy. Khi bạn gõ đủ 4 số, tự động iPhone sẽ xác thực điều này. Còn Samsung thì bạn phải bấm nút OK để xác thực.

 

Cần nhớ: Kết nối nội dung với hành động, trải nghiệm sẽ liền mạch hơn.

 

Sticky labels

Nhãn báo hiệu là sự kết hợp tinh tế hữu ích của các đối tượng giao diện và một ý nghĩa của sự chuyển đổi. Hãy xem Edenspiekermann sử dụng kỹ thuật này trong portfolio.

 

 

Sticky-Label

 

 

Các dự án có tên và nội dung đi kèm các hình ảnh bên phải liên quan tới dự án. Phần nội dung của dự án sẽ chạy theo các hình ảnh bên phải cho đến khi phần dự án kế tiếp xuất hiện.

 

Hành động này cũng tương tự như adress book trên iOS và đặc biệt hữu dụng với việc nội dung trong một phần dài. Các chuyển động này giúp cải thiện định hướng người dùng và phần nội dung chuyển động mượt hơn.

 

Cần nhớ; Sử dụng các nhãn tên với mô tả hoặc tiêu đề, giúp thông tin tương thích với nội dung ở những phần nội dung quá dài.

 

Dấu hiệu chuyển đổi – Affordance Transition

Affordance là sự mong muốn của người dùng khi thấy một giao diện – phần mềm hướng người dùng một cách tự nhiên sử dụng đúng để hoàn thành mục tiêu của họ.

 

Những đường gờ nổi (Ridge) thường được sử dụng để nâng cao các dấu hiệu. Những đường nổi chung quanh một nút khiến chúng có vẻ cần tương tác. Kỹ thuật Ux này được phổ biến bởi camera app trên iOS.

 

 

iOS_Lockscreen-500-final

 

 

Màn hình khoá của iOS 6 có các đường gờ quanh biểu tượng camera, nó có vẻ như kéo được. Apple bỏ nó đi trong iOS 7, có thể họ cho rằng user đã quen với việc này, và họ làm icon mới giống như những nút thông thường khác.

 

Điều xảy ra là tương tự: khi chúng ta kéo (hoặc nhấp) vào biểu tượng camera, màn hình bị kéo lên, và chúng ta thấy chức năng camera ở phía dưới. Đây là một kỹ thuật thú vị để giúp người dùng khám phá tính năng trong một giao diện.

 

Cần nhớ: Sử dụng các yếu tố với những dấu hiệu tốt để chỉ ra cho người dùng những tính năng mới trong một giao diện.

 

Ẩn dựa trên bối cảnh

Google Chrome trên iOS có khả năng ẩn dựa trên bối cảnh từ khi nó tung ra. Nó giống như:

 

 

CBH

 

 

Ý tưởng cơ bản của điều này là trình duyệt chrome và thanh điều hướng biến mất tự đông khi người dùng scroll trang xuống. Ngay khi người dùng scroll lên lại, mọi thứ lại xuất hiện.

 

Cách tiếp cận này tăng cường trải nghiệm nội dung của người dùng và cho họ thêm không gian trên màn hình. Điều này rất cần thiết đối với thiết bị di động.

 

Điều này tóm lại là, người dùng sẽ dõi theo phần nội dung mà họ mong đợi. Ngay khi họ dừng theo dõi, những thứ cần thiết xuất hiện để họ tiếp tục hành động.

 

iOS đẩy tính năng này cao hơn. Khi bạn kéo tới phần dưới cùng của trang, các phần điều khiển xuất hiện. Đó là ví dụ của việc cung cấp các nhu cầu người dùng trong một giao diện.

 

Cần nhớ: Sử dụng tính năng Ẩn theo bối cảnh để tăng cường sự tập trung của người dùng và tăng không gian màn hình.

 

Báo hiệu chuyển đổi

Cách đây khoảng một tuần, Nikta Vasilyev, một nhà thiết kế web tại Toronto đưa ra một ý tưởng thú vị. Anh đã phát triển một đoạn mã có thể giúp các yếu tố trên trang có dấu hiệu thông báo, Hãy xem video về ý tưởng vô cùng thú vị.

 

 

 

 

 

Khi chúng ta điều hướng bằng bàn phím, chúng ta không biết mình đang ở vùng nào. Những chuyển động chỉ ra vùng nào đang được tương tác, những chuyển động này giúp người dùng không phải tìm xem họ đang ở đâu.

 

Cần nhớ: Tôn trọng cách họ điều hướng và thông báo thường xuyên.

 

Tổng kết

Trên đây là một số ví dụ, một số chúng dễ dàng tìm thấy. Mục tiêu của bài viết không phải chỉ ra những kỹ thuật mới nhất, nhưng nó "thức tỉnh" bạn rằng những tương tác nhỏ có thể tăng cường tốt đối với trải nghiệm người dùng.

 

Nếu chúng ta chuẩn bị làm một sản phẩm tốt, chúng ta cần thử thách những gì đang có và xem làm thế nào các tương tác có thể giúp đỡ người dùng.

 

Tôi không định nói rằng chúng ta nên "quay lại từ đầu", nhưng sẽ ngớ ngẩn nếu dừng khám phá. Hãy tiếp tục thử nghiệm những điều mới mẻ.

 

Tin liên quan
Trải nghiệm người dùng, user experience, ux
Bình luận