Tổng hợp các nguyên tắc tâm lý học trong thiết kế UX UI cần nắm vững Malu Design - Branding Agency

group diverse people using their

Một sản phẩm dành cho người dùng không những cần được chăm chút kỹ lưỡng về mặt thẩm mỹ bên ngoài (UI—User Interface), mà còn là sự tính toán khôn khéo trong từng trải nghiệm nhỏ nhặt nhất (UX—User Experience).


Chỉ trong khoảng 5 năm trở lại đây, UI/UX là một cụm từ rất quen thuộc và phổ biến mà chắc chắn bạn sẽ gặp phải khi bắt đầu tìm hiểu trong lĩnh vực thiết kế giao diện. Cùng với sự phát triển thần kỳ và tốc độ trong lĩnh vực công nghệ thông tin, điện tử, con người hiện đang dành rất nhiều thời gian để giao tiếp với các thiết bị máy móc như điện thoại (smartphone), máy tính bảng (tablet), laptop, PC, TV thông minh (smart TV)… và sắp tới sẽ là các loại kính thông minh (Google Glass), VR (Hololens), tủ lạnh, máy giặt… Vậy nên trong tương lai, UI/UX sẽ là một ngành nghề có rất nhiều cơ hội và tiềm năng phát triển.

Vì đối tượng sử dụng chủ yếu và duy nhất ở đây là con người, cách tốt nhất để tạo ra trải nghiệm mượt mà là thấu hiểu sâu sắc các thói quen sử dụng, sở thích và xu hướng hành vi của người dùng. Hay nói cách khác, phải nắm bắt được tâm lý và mong muốn của khách hàng, thì chúng ta mới có thể giúp họ giải quyết được đúng vấn đề.

Hôm nay, bài viết mà Malu Design muốn giới thiệu đến các bạn bao gồm 19 nguyên tắc tâm lý học, được tổng hợp bởi Jon Yablonski – người đã sáng lập nên Law of UX và Human by Design vô cùng nổi tiếng, cộng thêm một số nguồn tham khảo chính như: Nielsen Norman GroupMedium. Các nguyên tắc tâm lý học (bao gồm cả các định luật Gestalt) sẽ được mổ xẻ và phân tích dưới góc nhìn chuyên môn trong lĩnh vực UI/UX, bên cạnh những ví dụ minh hoạ trực quan dễ hiểu, hy vọng sẽ mang đến cho bạn các giá trị kiến thức nền tảng và tổng quát nhất trên con đường phát triển sự nghiệp UI/UX.


Tổng hợp các nguyên tắc tâm lý học trong thiết kế UX UI

01/19 – Tính thẩm mỹ ứng dụng

Có một sự thật rõ ràng là hầu hết chúng ta đều đánh giá mọi vật xung quanh qua hình dáng bên ngoài. Đây được xem như xu hướng tâm lý chung trong hầu hết lĩnh vực đời sống, chứ không riêng gì thiết kế.

Hãy đến với nguyên tắc đầu tiên trong 19 nguyên tắc tâm lý học người dùng. Những thiết kế đẹp mắt sẽ khiến người dùng dễ “tha thứ” hơn khi họ gặp phải những khó khăn lúc sử dụng sản phẩm. Hay nói cách khác, một khi thiết kế đem lại ấn tượng thị giác mạnh mẽ, thì điều đó sẽ giúp chúng ta “che giấu” những lỗi vặt vãnh trong quá trình trải nghiệm.

01
Tính thẩm mỹ ứng dụng

Hình ảnh đẹp mắt luôn mang lại cảm xúc tích cực cho người xem. Hầu như mọi người đều tin rằng, cái gì càng đẹp trong mắt họ, thì lại càng tỏ ra chuyên nghiệp và đáng tin cậy, trong khi thực tế thì không phải luôn luôn như vậy.

fitbit
Khi tiến hành thử nghiệm đặt hàng trên trang Fitbit, một người dùng ngay từ đầu đã gặp khó khăn về chức năng điều hướng của trang web, cộng thêm các thứ khó chịu khi tiến hành thanh toán. Thế nhưng, lúc được yêu cầu đánh giá trải nghiệm của cô đối với website, cô cho rằng website khá dễ sử dụng. “Cái màu xanh nước biển này tôi rất thích. Trông chúng khá dễ chịu cho mắt. Các ảnh chụp rất đẹp nữa.” Hầu như những thứ đẹp đẽ đã chiếm hết tâm trí cô khi nói về trải nghiệm mua hàng.

Đối với những người làm thiết kế, nghiên cứu này cực kì có giá trị, vì chúng nói lên rằng, ít nhất những thiết kế đẹp mắt, bóng bẩy vẫn có một tác dụng không hề nhỏ trong trải nghiệm người dùng. Một trải nghiệm người dùng toàn diện, luôn đi kèm với tính thẩm mỹ cao.

screen shot 2019 03 25 at 8 26 48 pm
Apple là một ví dụ điển hình khi áp dụng những thiết kế mang tính thẩm mỹ rất cao

Các nghiên cứu do Masaaki Kurosu và Kaori Kashimura lần đầu tiên được thực hiện vào năm 1995, tại Hitachi Design Center. Khi tiến hành thử nghiệm trên 26 giao diện máy ATM khác nhau, họ nhận thấy có mối tương quan giữa “tính thẩm mỹ” và “chức năng tiện dụng”, khi 252 người tham gia đều đánh giá cao sự tiện dụng đối với các ATM có giao diện thiết kế đẹp mắt.

2 3 4
Fiasco

Thế nhưng có một điều mà bạn cần thực sự lưu tâm là các thiết kế đẹp mắt, bóng bẩy vẫn có những giới hạn của riêng nó. Đồng ý là khi họ cảm thấy thích thú với bề ngoài của sản phẩm, họ sẽ cho qua những khó chịu lặt vặt, nhưng khi và chỉ khi lỗi bên trong sản phẩm nằm ở mức không đáng kể, còn nếu như đó là một sự bất tiện nghiêm trọng thì thiết kế có đẹp cách mấy cũng không thể cứu vãn được tình hình.

arcadis
“Đập vào mắt tôi khi lần đầu vào website là các hình ảnh đầy sắc màu và cuốn hút.” Thế nhưng khi thực hiện một số thao tác, điều hướng rất khó khăn và không thành công, anh chàng lại bắt đầu thay đổi nhận định. “Tôi cảm thấy các hình ảnh đẹp mắt chỉ lấy lòng được lần đầu, lần thứ hai tôi bắt đầu cảm thấy chúng thật phiền phức.”

Hiểu rõ tâm lý này của người dùng dường như là yếu tố then chốt trong việc đưa ra kế hoạch phát triển sản phẩm (product-planning phase). Ví dụ khi sử dụng thực tế, người dùng có cảm thấy thích thú với thiết kế giao diện của sản phẩm, điều này rất tốt, chứng tỏ bạn đang có một đội ngũ thiết kế làm việc hiệu quả, thế nhưng trong quá trình kiểm nghiệm thì điều này lại dễ gây ra sự ngộ nhận về việc đánh giá sản phẩm. Bởi vì nó khiến bạn không nhận được những đánh giá (feedback) đúng trọng tâm và chính xác về tính năng của sản phẩm. Khi bạn nhận được những câu bình luận kiểu như “nhìn đẹp quá”, “tôi thích cái màu này”,… thì chỉ biết rằng sản phẩm của bạn có vẻ ngoài thu hút, chứ chưa nói lên được sự hữu dụng thực sự.

Tóm lại là, khi phát triển một sản phẩm thì dáng hình bên ngoài cũng quan trọng không kém gì chức năng bên trong.

redrad 4x
Slava Kornilov

02/19 – Ngưỡng Doherty

Người dùng có xu hướng “nghiện” cảm giác được trải nghiệm mọi thứ thật nhanh chóng, mượt mà và việc kêu gọi họ thực hiện một hành động nào đó về sau sẽ trở nên dễ dàng hơn rất nhiều.

Vào khoảng cuối những năm 70, thời lượng 2s (tức 2000ms) vẫn là một con số hợp lý được áp dụng rộng rãi trong hầu hết các hệ thống máy tính, vì cho rằng người dùng sẽ cần thời gian để suy nghĩ trước khi thực hiện các bước tiếp theo. Thế nhưng trong một tài liệu nghiên cứu được xuất bản vào năm 1982, Walter J. Doherty và Ahrvind J. Thadani đã tìm ra khoảng thời gian phản hồi một thao tác hay mệnh lệnh nào đó từ người dùng nên xấp xỉ vào khoảng 400ms.

2

Doherty phát hiện ra rằng, thông thường mọi người đều đã hình dung các bước thực hiện từ trước, nếu hệ thống phản hồi lại quá chậm chạp sẽ tạo ra sự ngắt quãng và cắt đứt mạch suy nghĩ của họ, khiến họ khó bắt lại nhịp công việc hơn, từ đó làm giảm hiệu suất làm việc của người dùng.

gg
Alex Kunchevsky

Nói rõ hơn, khoảng thời gian đáp ứng của hệ thống (System Response Time) và khoảng thời gian người dùng bắt đầu thực hiện thao tác kế tiếp (User Response Time) có mối liên quan mật thiết với nhau. Nếu một ứng dụng hay website thực hiện được sự phản hồi lý tưởng trên, thì người dùng sẽ có xu hướng “nghiện” cảm giác được trải nghiệm mọi thứ thật nhanh chóng, mượt mà và việc kêu gọi họ thực hiện một hành động nào đó về sau sẽ trở nên dễ dàng hơn rất nhiều.

cart
Cuberto

03/19 – Định luật Fitts

Giúp người dùng cảm thấy thật thoải mái và dễ dàng khi dùng ngón tay hay trỏ chuột để thực hiện một thao thác nào đó.

Được nghiên cứu bởi nhà tâm lý học Paul Fitts dựa trên quan sát về mô hình chuyển động của con người khi tương tác với hệ thống máy móc, định luật Fitts chứng minh rằng, thời gian cần thiết để một vật di chuyển đến điểm đích mong muốn phụ thuộc vào khoảng cách và tỉ lệ nghịch với kích thước vật đó. Hay nói cách khác, nếu khoảng cách vật di chuyển xa và có kích thước nhỏ, sẽ mất nhiều thời gian hơn để nó đến được vị trí mong muốn. Và ngược lại nếu vật kích thước nhỏ mà di chuyển nhanh sẽ có tỉ lệ sai sót cao hơn.

3
Định luật Fitts

Định luật được áp dụng rất rộng rãi trong trải nghiệm giao diện người dùng (UI/UX), những nút bấm (button) trên giao diện app mobile sẽ có kích cỡ lớn hơn so với khi thiết kế trên màn hình desktop, vì diện tích ngón tay của chúng ta (touch) to hơn so với con trỏ chuột (click).

Như trong trường hợp ở giao diện macOS, mặc dù các nút lệnh button có kích thước khá nhỏ bé, nhưng hâu như người dùng đều không cảm thấy thấy khó khăn. Như đã giải thích ở phía trên, kích cỡ chuột có diện tích rất nhỏ, ta hoàn toàn có thể click chính xác các nút bấm đấy, bởi vậy cho tới bây giờ bạn vẫn đừng mơ Macbook sẽ được trang bị màn hình cảm ứng nếu giao diện người dùng macOS vẫn không thay đổi 🙂

dribble katy
Leonardo Navarro
ios app animation logotype slide
Mike

Trong trường hợp ngược lại ở mobile app, vị trí các nút bấm CTA (call-to-action) và khu vực tương tác quan trọng nên có khoảng cách so với ngón tay người dùng càng ngắn càng tốt, điều đó sẽ giúp họ thao tác một cách thoải mái và nhanh chóng nhất.

Như trường hợp nút button bên dưới, có thể thấy người dùng không cần phải dùng chuột trỏ thật chính xác vào dòng chữ trên nút bấm, mà chỉ cần nằm trong diện tích khu vực đó là được. Hãy làm diện tích tương tác thật rộng rãi, cũng giống như khi trải nghiệm trên Youtube, bạn có thể click tại bất cứ đâu trong khu vực trình chiếu để play hay pause video clip đang xem.

Daniel Kerris

Thêm một điều bạn cần lưu ý, các màn hình điện tử hiện nay đều là hình chữ nhật, tức là càng hướng về phía bốn góc thì phạm vi hoạt động của trỏ chuột sẽ hẹp lại. Vậy điều này có ý nghĩa gì trong trải nghiệm người dùng? Trong giới hạn vật lý của hình chữ nhật, thì việc di chuyển trỏ chuột đến bốn điểm góc nhanh hơn bất cứ chỗ nào trên màn hình, bởi thế khi đặt các nút bấm hay thao tác quan trọng ở những vị trí đấy sẽ thôi thúc người dùng click vào hơn. Trong ví dụ bên dưới, điểm giống nhau ở tất cả các website là những khu vực tương tác quan trọng như đăng nhập, giỏ hàng, thông báo, tìm kiếm,... đều cùng được đặt ở phía góc phải màn hình!

artboard ux

Nói tóm lại, mục đính chính của định luật Fitts là nhắc nhở ta hãy rút ngắn thời gian và khoảng cách từ trỏ chuột (hoặc ngón tay) đến các vị trí nút bấm ở mức thấp nhất. Một số tựa game còn áp dụng wheel chat để giảm thiểu tối đa việc di chuyển trỏ chuột đến các lựa chọn, khi người chơi đang trong hoàn cảnh cấp bách (như cần giúp đỡ, tăng máu…).

OWWheel

04/19 – Định luật Hick

Càng ít sự lựa chọn, người dùng càng đỡ suy tính thiệt hơn giữa các quyết định, từ đó thời gian thực hiện hành động được rút ngắn đáng kể.

Đưa ra quá nhiều sự gợi ý chỉ làm người dùng càng thêm bối rối và mất nhiều thời gian để quyết định. Vào năm 1952, theo như kết quả của một nghiên cứu về mối tương giao giữa số lượng lựa chọn và tâm lý học hành vi người dùng, từ hai nhà khoa học William Edmund Hick và Ray Hyman, phát hiện ra rằng con người sẽ trở nên rất do dự và thiếu quyết đoán nếu trong tay họ đang nắm giữ quá nhiều khả năng chọn lựa.

4 1
Định luật Hick

Định luật Hick được ứng dụng vào các trường hợp khi chúng ta muốn rút ngắn thời gian phân vân của khách hàng. Vì càng ít sự lựa chọn, đồng nghĩa họ sẽ đỡ phải suy tính thiệt hơn giữa các quyết định, từ đó thời gian thực hiện hành động được rút ngắn đáng kể.

slagart
meguru muramoto

Hãy cố gắng tối giản các lựa chọn cho người dùng bằng cách chỉ nên gợi ý cho họ một vài quyết định quan trọng, đừng làm họ bội thực và đau đầu khi phải phân vân giữa quá nhiều sự lựa chọn. Trong một số trường hợp, nếu không thể tối giản được thêm nữa, tìm cách chia tách một quy trình phức tạp thành nhiều bước nhỏ, tránh trường hợp làm người dùng lâm vào hoàn cảnh phải suy nghĩ quá nhiều quyết định cùng một lúc.

1WLT8LMUF7RqozfG38TIL3A
Dannniel

Bạn còn nhớ tựa game Mario huyền thoại ngày xưa cách đây hơn 20 năm không? Điều gì làm nó trở nên phổ biến đến như vậy? Một trong những nguyên nhân quan trọng được cho là nằm ở những nút lệnh điều khiển chỉ bao gồm đi trái, phải và nhảy lên. Nói rộng hơn, không chỉ riêng ở game này, phần lớn trò chơi trên các hệ máy console ngày xưa được cho là giản đơn, vui vẻ, và đem lại sự thư giãn thực sự khi các tay cầm điều khiển có rất ít nút bấm, người chơi có thể dễ dàng làm quen và thao tác. Và nếu bạn nhìn lại khoảng thời gian gần đây, Flappy Bird, 2048, Temple run, Subway Surfers và rất nhiều game khác nữa cũng đi theo xu hướng tối giản thao tác điều khiển cho người chơi.

1*YrSdJfPBSHPGfLokd9Ucuw

Trái lại, hiện nay có một số tựa game MMORPG hiện đại chứa quá nhiều nút bấm và lựa chọn, khiến nó khó có thể tiếp cận, và tiêu tốn nhiều thời gian cũng như công sức để làm quen.

maxresdefault0

Không những hạn chế trường hợp khách hàng tiêu tốn thời gian do dự không cần thiết, định luật Hick còn được sử dụng để đưa ra các gợi ý sản phẩm mà công ty muốn tiếp cận đến khách hàng trong ứng dụng hay website. Như ở hai trường hợp phía bên dưới, bạn thấy trường hợp nào khiến bạn thoải mái khi lựa chọn hơn? 🙂

655ebc98295eb326c8e0a4414f9326b1gofood

Có một điều rất hiếm khi Apple làm đó là so sánh những chiếc iPhone của họ với các thương hiệu điện thoại Android khác. Apple không hề muốn những chiếc iPhone được đem so sánh với những chiếc điện thoại Samsung, Sony, LG, hay bất kì hãng điện thoại nào khác, vì việc so sánh này rõ ràng chẳng tồn tại chút lợi ích nào cho hãng. Apple muốn tối giản vùng lựa chọn của khách hàng, thay vì để người dùng phân vân “Chiếc điện thoại nào mà tôi nên mua?” thì Apple sẽ hướng họ sang câu hỏi “Chiếc iPhone nào mà tôi nên mua?”

05/19 – Định luật Jakob

Bạn cần nên nhớ rằng nhận thức và thói quen của khách hàng không dễ gì một sớm một chiều mà thay đổi được, và đôi khi điều đó cũng không thực sự cần thiết.

Đừng làm người dùng bỡ ngỡ bởi những ý tưởng “sáng tạo đột phá”, vì trước khi biết đến trang web hay app của bạn, họ đã quen sử dụng các trang web hay app khác trên thị trường. Để giảm thiểu khoảng thời gian tìm hiểu giữa khách hàng và sản phẩm, các chức năng sử dụng nên có cách thức hoạt động tương tự như những gì mà khách hàng từng biết đến trước đó. Hạn chế việc tạo ra những thứ khó hiểu và lạ lẫm, khiến người dùng dành nhiều thời gian để tìm hiểu và thay đổi thói quen.

5
Định luật Jakob

Hay nói cách khác, hầu hết mọi người đều có tâm lý ngại tiếp cận với những thứ quá mới mẻ và khác biệt, con người ta luôn tìm kiếm sự ổn định và thích nằm trong vùng an toàn. Ví dụ khách hàng đã quen với việc click vào logo trên đầu trang để trở về trang chủ, dùng từ khóa để tìm kiếm, bấm vào dấu ‘X’ để đóng một cửa sổ… Hãy để mọi thứ diễn ra thật tự nhiên và dễ hiểu, nếu người dùng cảm thấy bối rối hay khó khăn để sử dụng, họ đơn giản chỉ cần bấm nút thoát và đi tìm các ứng dụng hay website khác dễ xài hơn.

finance bank ui privatbank
Sviatoslav Didukh

Tất nhiên đôi khi ta vẫn cần thay đổi một số thứ và mang tính đột phá vào trải nghiệm người dùng, thế nhưng bạn cũng cần nhớ rằng nhận thức và thói quen của khách hàng không dễ gì một sớm một chiều mà thay đổi được, và đôi khi điều đó cũng không thực sự cần thiết. Thay vì tập trung công sức vào việc thiết kế những hiệu ứng màu mè chỉ mang tính chất trang trí là chính, hãy để chất lượng sản phẩm thu hút sự chú ý của người dùng, hoặc những lợi ích mà dịch vụ công ty mang đến.

e commerce app
Alex Khoroshok

06/19 – Nguyên tắc không gian chung (Law of Common Region)

Các thành phần liên quan với nhau nên cùng nằm trong không gian chung, điều đó làm các khối thông tin trở nên tách bạch và dễ hiểu.

Là một trong những nguyên tắc thuộc định luật Gestaltgiữa các phần thông tin hay hình ảnh nếu có sự ngăn cách rõ ràng sẽ làm ta rất dễ dàng để nhận biết.

6
Nguyên tắc Không gian chung

Trong ví dụ của ứng dụng cà phê Starbucks, các nhóm thông tin như quản lý đơn đặt hàng, địa điểm từng địa chỉ, hay menu thức uống được chia tách rất trực quan và dễ hiểu.

starbuck
Daniel Tan

Một ví dụ khác khá thú vị, như bạn có thể thấy ở tấm biển hiệu ở bên dưới, chỉ bằng việc sử dụng các đường viền (border), ta hoàn toàn có thể chủ động và hướng người xem nắm bắt phần thông tin theo ý muốn.

gestaltcommonregionsign

Như trong website phía bên dưới, hai khoảng không gian được chia tách ra tạo hiệu ứng thị giác khá thú vị và độc đáo. Tóm lại, trong nguyên tác này, chúng ta nên giữ mọi thứ có trật tự và dễ hiểu, làm người dùng cảm nhanh chóng nhận biết các vùng thông tinh các liên quan với nhau.

zeelandia hero
Luke Pachytel

07/19 – Nguyên tắc Prägnanz

Không nhất thiết phải thể hiện đầy đủ mọi chi tiết về dáng hình của một vật thể mới khiến người xem nhận biết được nó.

Con người bẩm sinh đều yêu thích sự giản đơn và rõ ràng. Não bộ luôn có xu hướng tối giản các khối hình phức tạp thành những điều thân thuộc và cốt lõi nhất. Chính nhờ cơ chế hoạt động này, não sẽ bớt tốn thời gian để có thể nhận thức và nắm bắt một hình ảnh phức tạp, đồng thời hạn chế cảm giác sốc và bỡ ngỡ khi bắt gặp những điều dị thường.

7
Nguyên tắc Prägnanz

Như khi bạn nhìn tấm hình ở phía bên trái, trường hợp này ta có xu hướng xem 3 hình (chữ nhật, tròn và tam giác) lại thành một khối thống nhất, hơn là tách riêng và xem chúng như các thành phần đơn lẻ như trường hợp bên phải.

01 pragnanz

Logo của WWF là một trong những ví dụ phổ biến về việc sử dụng khoảng âm (negative space) một cách hết sức hiệu quả, như bạn có thể thấy thực chất logo không hề vẽ toàn bộ và chi tiết, mà nó chỉ là các mảnh ghép kết nối lại với nhau. Nhưng với cơ chế tự động “lấp đầy khoảng trống” và nhận diện hình thể quen thuộc, chúng ta dễ dàng nhận ra dáng hình của chú gấu trúc.

hinh33
logo WWF

Nguyên lí Prägnanz này được xem như là nền tảng của toàn bộ định luật Gestalt, khi chúng cho ta biết rằng, không nhất thiết phải thể hiện đầy đủ mọi chi tiết về dáng hình của một vật thể mới khiến người xem nhận biết được nó. Hay nói cách khác, não bộ sẽ tự động đưa các hình ảnh phức tạp trở về những dáng hình học cơ bản, dễ hiểu và gần gũi.

ezgif 1 d0d6dc5fa4da
Jonathan Mak Long

Nguyên tắc này cũng là một trong những kĩ thuật chính của vẽ minh hoạ (illustrators). Hầu hết các hoạ sĩ đều biết rằng bất kỳ một vật thể có hình dáng phức tạp đến đâu, thì cũng được tạo thành từ các khối cơ bản như lập phương, cầu, trụ, hình nón, lục giác.

af429059396791 5a7408fabc858
Giulia Zoavo
ece47f49833007 5900fab033faa
Giulia Zoavo

08/19 – Nguyên tắc kề bên (Law of Proximity)

Nếu các nhóm phần tử đứng cạnh nhau thì não bộ sẽ có xu hướng gom chúng lại thành một nhóm tách biệt.

Khi khoảng cách giữa các phần tử trở nên gần nhau, thì chúng ta sẽ coi như chúng đang cùng một nhóm. Nguyên tắc này được áp dụng để giúp ta đọc hiểu thông tin một cách nhanh chóng.

8
Nguyên tắc kề bên

Bố cục văn bản sẽ trở nên rối tung nếu các dòng chữ không có được sự phân tách nổi bật. Đó là do mỗi một đoạn văn (paragraph) đều có nhiệm vụ nói lên một nội dung, chủ đề hay thông tin nào đấy, nếu mà không như thế, người đọc sẽ cảm thấy rất mơ hồ. Họ không biết là những thông tin đó có liên quan với nhau không, và có đang viết về cùng một chủ đề không.

idesign lichsu 012
Danh Phuong

Hãy thiết kế cho người dùng những khoảng trắng (blank space), không chỉ đóng vai trò là các điểm dừng mắt, mà còn làm cho các phần thông tin trở nên trực quan và dễ hiểu hơn.

foody corner 4x
Khurram Shehzad

09/19 – Nguyên tắc đồng dạng (Law of Similarity)

Thậm chí là khi không nằm cạnh bên, nhưng não bộ vẫn tạo ra một sợi dây vô hình để kết nối các vật thể đồng dạng lại với nhau

Bạn có để ý mắt chúng ta thường có xu hướng gom các vật thể na ná nhau lại thành một nhóm không?

9
Nguyên tắc đồng dạng

Trong ví dụ của Logo viện bảo tàng MOCA, mặc dù chữ ‘C’ là chữ cái duy nhất trong logo, nhưng nó hoàn toàn không lạc lõng do mang đầy đủ các tính chất đặc trưng của các hình học còn lại (vuông, tròn, tam giác).

images 1
Logo MOCA

Thế nên hệ thống nhận diện thương hiệu bao gồm các yếu tố như tên gọi, logo, slogan, bao bì, giao diện website… cần được thiết kế đồng bộ và nhất quán để khách hàng dễ nhận diện và ghi nhớ thương hiệu.

Burnt Toast
ccbbee72765909.5bf2e5fcb0b58
Mú Gelato Italiano

10/19 – Nguyên tắc kết nối (Law of Uniform Connectedness)

Những thành phần có bất kì sự kết nối nào về mặt thị giác thì não bộ sẽ tự động “hình dung” mối liên hệ mật thiết cho chúng.

Ngoài các kiểu đồng dạng về hình khối, kích cỡ, phong cách, hay màu sắc, não còn tự động tạo dựng nên mối liên kết mật thiết giữa các thành phần có sự kết nối về mặt thị giác như các đường kẻ giữa chúng chẳng hạn.

10
Nguyên tắc kết nối

Như trong ví dụ bên dưới, mặc dù hình tròn và hình vuông là hai hình không ăn nhập gì với nhau, nhưng khi xuất hiện mối liên kết giữa chúng (đường thẳng nối các hình với nhau), thì ta vẫn coi như chúng đang thuộc cùng một nhóm.

uniform connectedness

Nguyên tắc kết nối thể hiện khả năng mạnh mẽ nhất khi nói về sự tương giao giữa các vật thể, đôi khi còn phá vỡ luôn các nguyên tắc Gestalt khác. Nguyên tắc này thường được dùng để kết nối các phần tử nằm cách xa nhau, hoặc không liên quan về hình dạng trong tác phẩm thiết kế.

ezgif 4 46b8ed80ddeb

11/19 – Định luật Miller

Một người bình thường chỉ có thể tối đa tiếp nhận từ 5 đến 9 mẩu thông tin cùng một lúc mà thôi.

Cognitve load (tải nhận thức) là thuật ngữ dùng để chỉ giới hạn bộ nhớ khi con người phải tiếp nhận một lượng lớn thông tin và cần xử lý trong thời gian ngắn. Lúc người dùng ghé thăm một trang web hay ứng dụng, não bộ phải liên tục hoạt động và dành ra một lượng tài nguyên cognitve load để xử lý các thông tin liên quan cần thiết.

Thế nhưng vấn đề nằm ở chỗ năng lực ghi nhớ và xử lý của con người có giới hạn, và nếu chúng ta “đập” vào mặt người dùng quá nhiều hình ảnh cùng một lúc sẽ khiến họ không đủ năng lực giải quyết và nhận thức thông tin.

11

Vậy đưa ra bao nhiêu lượng thông tin là hợp lý? Vào năm 1956, George Armitage Miller đã tìm ra được một con số phù hợp với hầu hết chúng ta, ông cho rằng mức giới hạn trí nhớ của một người bình thường chỉ có thể tiếp nhận 5 đến 9 mẩu thông tin cùng một lúc mà thôi.

mi furniture tranmautritam freebie item listing
Tran Mau Tri Tam

Đối những bạn theo trường phái chủ nghĩa tối giản (minimalism) thì cứ yên tâm, 5 mẩu thông tin là mức thấp nhất mà người dùng có thể tiếp nhận một cách nhẹ nhàng, không nhất thiết phải tối giản hơn như vậy. Và cố gắng đừng vắt kiệt sức của người dùng khi bắt họ phải tiếp nhận nhiều hơn giới hạn 9 mẩu thông tin trong website hay ứng dụng của bạn.

1600x1200
Anton Mikhaltsov
yellow 1
Giga Tamarashvili

12/19 – Nguyên lý Occam (Occam’s Razor)

Cố gắng tìm hiểu và sắp xếp thứ tự ưu tiên cho những thứ mà khác hàng cần nhiều nhất, và tập trung trải nghiệm tốt nhất cho nó.

Nguyên lý Occam là một cách thức giải quyết vấn đề rất xa xưa và nổi tiếng, được đặt theo tên của một tu sĩ người Anh, đồng thời cũng là một nhà triết học thời trung cổ – William of Ockham. Chữ Razor (lưỡi dao cạo râu) đi kèm phía sau tên ông Occam’s Razor, có ý muốn nói hãy cắt bỏ hết những thành phần không cần thiết, loại trừ những giả thuyết na ná nhau.

12
Nguyên lý Occam

Một trong những sai lầm thường thấy của các designer là cố gắng nhồi nhét quá nhiều tính năng, hiệu ứng vào trong một sẩn phẩm hay ứng dụng, kết quả là giao diện người dùng, các thao tác sử dụng trở nên quá lộn xộn và phức tạp. Có phải người dùng cảm thấy cần thiết với tất cả các tính năng mà bạn đưa vào?

Hãy cố gắng nghiên cứu, tìm hiểu và sắp xếp thứ tự ưu tiên cho những thứ gì cần thiết nhất, và mang lại trải nghiệm tốt nhất cho khách hàng.

e5bd3873284301 5c2090e3de479
Starbucks- UI/UX Redesign
podcast
Ghani Pradita

Mạnh dạn lượt bỏ hết những thứ rườm rà, không hiệu quả, chất lượng hơn số lượng, tìm kiếm các giải pháp đơn giản để xử lí vấn đề.

Vào khoảng thời gian cách đây hơn 12 năm, các dòng điện thoại có nhiều nút bấm đang thống lĩnh thị trường…

ysrCcoPrElj35gCs4ciRH 0QSkE

…thì iPhone xuất hiện như một giải pháp tối ưu nhất. Chỉ có duy nhất một nút bấm vật lý ở mặt trước.

Và giờ thì không còn chiếc nút nào đối với các dòng sản phẩm có cảm biến nhận dạng khuôn mặt (FaceID) như iPhone X, XS, XR & iPad Pro 2018.


13/19 – Nguyên tắc Pareto

Tập trung toàn lực vào những mảng sản phẩm hay dịch vụ có ý nghĩa với đại đa số người dùng.

Hay còn được biết với cái tên quen thuộc và nổi tiếng hơn, nguyên tắc 80/20. Bắt nguồn từ nhà kinh tế người Ý Vilfredo Pareto, người đã quan sát và nhận thấy rằng 80% đất ở Ý là thuộc sở hữu của 20% dân số. Đây cũng là quy luật phổ biến trong kinh doanh chẳng hạn 80% doanh thu là từ 20% trong số các khách hàng.

13
Nguyên tắc Pareto

Cho dù nội dung trang web hay ứng dụng của bạn có đa dạng, phong phú đến đâu, thì hầu như trong số đó chỉ có 20% là thực sự góp phần mang đến 80% trải nghiệm tích cực và hữu ích cho khách hàng. Điều này khá quan trọng trong việc giúp bạn tập trung toàn lực vào những mảng sản phẩm hay dịch vụ có ý nghĩa với đại đa số người dùng.

ice
Maxim Podavalkin
store onboarding
Taras Migulko

14/19 – Định luật Parkinson

Những công việc đơn giản cũng tự tăng độ phức tạp để lấp đầy khoảng thời gian cho trước.

Bất kể ai ở đây cũng đã quen với kiểu làm việc “nước tới chân mới nhảy”. Đặc biệt là đối với dân designer chúng ta, mức độ lầy lội còn được tăng lên gấp bội. Thời đi học dù cho thời gian được giao để hoàn thành dự án hay bài tập trước đó tận cả tháng, nhưng hầu hết mọi người đều chỉ thực sự hoạt động hết công suất vào tuần cuối cùng của deadline!

14
Định luật Parkinson

Vào năm 1955, Cyril Parkinson, nhà sử học người Anh nhận thấy hiện tượng trên khi làm việc tại các đơn vị hành chính ở Anh. Ông quan sát rằng khi bộ máy cơ quan được mở rộng, thì nhân viên lại càng hoạt động không hiệu quả. Và sau khi tiếp tục quan sát với nhiều trường hợp khác nhau, ông phát hiện những công việc đơn giản cũng tự tăng độ phức tạp để lấp đầy khoảng thời gian cho trước. Nếu thời gian dành cho một công việc ngắn hơn thì chúng cũng trở nên đơn giản và dễ giải quyết hơn.

mp advance main
Josh Watkins

Điều này có nghĩa, nếu chúng ta mong muốn người dùng thực hiện một hành động nào đó, cố gắng chia quy trình thành từng từng phần nhỏ, điều này sẽ làm người dùng cảm thấy thoải mái và nhanh chóng hoàn thành hơn.


15/19 – Định luật Postel

Nhằm mang lại trải nghiệm tích cực, chúng ta nên cung cấp cho người dùng khả năng tuỳ biến, và linh hoạt khi sử dụng.

Bắt nguồn từ một nhà khoa học máy tính người Mỹ, Jon Postel, khi định luật được áp dụng rộng rãi vào lĩnh vực lập trình phần mềm, mạng máy tính, trong thời kì đầu của kỉ nguyên Internet.

15 1
Định luật Postel

Trong hầu hết các ngôn ngữ lập trình, máy tính sẽ phân định số ’19’ và chữ ‘mười chín’ là hai kiểu định dạng dữ liệu rất khác nhau. Nhưng thực tế còn phức tạp hơn như vậy, người dùng sẽ nhập vào bàn phím bất cứ thứ gì theo thói quen, ’19-4-2019′, hay ’19/04/2018′, ‘hcm’ thay vì ‘Hồ Chí Minh’, ‘1.00’ hoặc ‘1,’.

Cho nên nói theo một cách khác, là để mang lại trải nghiệm tích cực cho người dùng, thì chúng ta nên cung cấp cho họ khả năng tuỳ biến, và linh hoạt khi sử dụng. Đồng thời cũng nên chú ý đến vấn đề kĩ thuật phía sau.

c58f6073284301 5c1ee291ea9dd
Starbucks – UI/UX Redesign
screen shot 2019 04 06 at 8 15 15 am

Và cũng dễ hiểu vì sao Google là bộ máy tìm kiếm phổ biết nhất thế giới. Trong nhiều một số trường hợp, Google còn hiểu ý đến mức khi chúng ta gõ những câu tìm kiếm không đầu không đuôi, không ngữ pháp, hoặc thậm chí là sai chính tả… thì chúng vẫn đưa ra những gợi ý kết quả hoàn toàn phù hợp.

16/19 – Hiệu Ứng Khoảng Cách (Serial Position Effect)

Nên đặt những phần thông tin ít quan trọng nhất nằm ở giữa, vì ở vị trí đầu và vị trí cuối con người thường có xu hướng ghi nhớ lâu dài hơn.

Không phải tự nhiên mà ta rất dễ ghi nhớ dãy ABC, XYZ trong bảng chữ cái, còn dãy nằm giữa hầu như không mấy người nhớ được chính xác. Hermann Ebbinghaus, là một nhà Vật lý học người Đức tiên phong trong nghiên cứu thực nghiệm về trí nhớ, với học thuyết hiệu ứng khoảng cách (serial position effect), ông phát hiện rằng việc sắp xếp thứ tự các mục thông tin cũng tạo nên sự ảnh hưởng rất lớn đến khả năng ghi nhớ của con người.

16
Hiệu Ứng Khoảng Cách (Serial Position Effect)

Nói rõ hơn, trong học thuyết của Hermann Ebbinghaus còn có hai khái niệm đi kèm theo, một là“hiệu ứng thiên kiến” (còn gọi là “tác động đầu tiên” – Primacy Effect), nghĩa là các ấn tượng ban đầu dễ dàng khiến con người dựa vào đó mà ghi nhớ, thứ hai là recency effect (tạm dịch “tác động gần đây”), chỉ những thứ mới vừa xảy ra tức thì, cũng khiến con người ta khó quên. Hay nói cách khác, khoảng thông tin ở giữa sự kiện dường như rất dễ bị trôi vào quên lãng.

Trong thiết kế giao diện, hãy chú ý đến các vị trí góc trái và phải trên màn hình, vì tại những vị trí này người dùng dễ ghi nhớ thao tác. Hầu hết các ứng dụng đều đặt vị trí mục ‘Home’ và ‘Profile’ nằm ở đầu và cuối danh sách.

tab ui final
Masudur Rahman

Còn tuỳ chọn ‘Signout’ cũng rất thường thấy khi đặt ở vị trí cuối menu dropdown.

dropdown preview
Udara

17/19 – Định luật Tesler

Sự phức tạp từ phía người dùng sẽ chuyển thành sự phức tạp của đội ngũ phát triển, nếu chúng ta không nhận định được mức giới hạn của hệ thống máy móc.

Giữa những năm 1980, trong khoảng thời gian khi làm việc tại Xerox PARC, Larry Tesler đã nhận ra một điều, chú ý đến sự tương tác giữa con người và máy móc tất nhiên là điều quan trọng, nhưng cách thức mà giữa các hệ thống tương tác với nhau cũng quan trọng không kém.

17 1
Định luật Tesler

Trong một cuốn sách mang tên ‘Designing for Interaction’ (Tạm dịch: ‘Thiết kế để tương tác’), có đăng một đoạn phỏng vấn của Larry Tesler, khi ông lần đầu đề cập đến Định luật bảo toàn sự phức tạp (Law of conservation of complexity). Đối với ông, mỗi hệ thống máy móc đều tồn tại một mức độ phức tạp nhất định, và không thể cắt giảm thêm. Hay nói cách khác, sự phức tạp từ phía người dùng sẽ chuyển thành sự phức tạp của đội ngũ phát triển, nếu chúng ta không nhận định được mức giới hạn của hệ thống máy móc.

Tập trung vào trải nghiệm người dùng và cắt giảm đi những thứ phức tạp là điều đúng đắn nên làm. Nhưng nên nhớ mọi thứ đều có những rào cản nhất định và cần thời gian dài để phát triển theo hướng tiện lợi hơn. Ngay bây giờ, bạn không thể đòi hỏi hệ thống điều khiển máy bay khiến bạn dễ học hỏi và làm quen như lái xe máy được.

pexels photo 2064123

Hãy mang đến sự đơn giản cho cả đôi bên, phía người dùng và phía đội ngũ phát triển sản phẩm. Đôi khi để hệ thống làm việc hiệu quả và đầy đủ các chức năng cần thiết, cần phải để người dùng chịu một ít khó khăn. Vì vậy, nếu bạn đang là một nhà phát triển sản phẩm, hãy cố gắng giữ mọi thứ ở mức cân bằng, và ứng dụng phương châm tối giản vào tuỳ trường hợp cho phép.


18/19 – Hiệu ứng Von Restorff

Để những phần thông tin quan trọng thu hút ánh nhìn và sự chú ý từ phía khách hàng.

Vào năm 1933, nhà tâm lí học Hewig Von Restorff công bố một nghiên cứu tiết lộ rằng chúng ta có thiên hướng ghi nhớ một thông tin trong một danh sách nếu nó khác biệt và nổi bật. Chẳng hạn, nếu bạn có một danh sách chứa các dãy số, và có một chữ cái ở giữa, thì khả năng cao là bạn sẽ nhớ chữ cái đó – đơn giản vì nó khác với tất cả những thông tin còn lại trên danh sách. Hiện tượng này được gọi là Hiệu ứng Von Restorff.

18 2
Hiệu ứng Von Restorff

Còn được biết với một cái tên khác hiệu ứng cô lập (Isolation Effect), giữa đám đông mọi người sẽ có ấn tượng sâu sắc đối với các hình ảnh lập dị, đặc biệt hay khác thường. Bạn muốn làm người dùng nhớ nhất hình ảnh nào khi sử dụng sản phẩm của bạn? Đơn giản thôi, làm chúng trở nên nổi bật so với phần còn lại trong thiết kế.

real pixels
Luke Pachytel

Đó là lý do tại sao mà các nút CTA (Call-to-action) cần được thiết kế để người dùng nhận ra ngay, và không phải mất công tìm kiếm. Bằng việc vận dụng hiệu ứng này, ta có thể để những phần thông tin quan trọng nhất thu hút ánh nhìn và chiếm lấy sự chú ý từ phía khách hàng.

1600x1200 4x
Anton Mikhaltsov

19/19 – Hiệu ứng Zeigarnik

Những việc làm khi còn đang dang dở sẽ khiến chúng “dính chặt” trong đầu hơn là sau khi đã hoàn thành.

Khi mọi người bắt đầu bất cứ việc gì, họ sẽ có khuynh hướng cố gắng hoàn thành cho xong thì thôi. Một khi bạn đã quyết định bước những bước đầu tiên, sẽ có điều gì đó thôi thúc bạn làm đến cùng.

19
Hiệu ứng Zeigarnik

Bluma Wulfovna Zeigarnik (1900-1988) là một nhà tâm lý học người Liên Xô, vào những năm thập niên 1920, khi cô bắt đầu đăng tải một học thuyết mô tả sự tác động của trí nhớ bởi những công việc đang thực hiện và sau khi hoàn thành chúng. Cô thấy rằng, những việc làm khi còn đang dang dở sẽ khiến chúng “dính chặt” trong đầu hơn là sau khi đã hoàn thành.

pull to refresh
James G

Câu chuyện bắt nguồn từ việc trong lúc quan sát các những người tạp vụ trong một quán ăn, Zeigarnik đã nhận ra một điều kì lạ, khi thấy đa số họ có khả năng ghi nhớ những đơn đặt món dài và phức tạp rất lâu. Tuy nhiên khi phục vụ xong, họ hoàn toàn quên sạch những yêu cầu đó. Những đơn hàng đang phục vụ dang dở dường như “gắn chặt” trong não của những người phục vụ cho đến khi họ hoàn thành xong.

galshir interactive loader
Gal Shir

Hiệu ứng này được xem như là một giải pháp rất hiệu quả để giảm thiểu sự trì hoãn của người dùng. Như các bạn cũng thường thấy trong các nền tảng học trực tuyến như Duolingo, Udemy, Skillshare, Coursera…, họ thường khuyến khích và tạo động lực cho người học bằng cách đưa ra các thanh tiến trình (progress bar), làm người dùng có cảm giác phải hoàn thành cho xong.

duolingo
Duolingo
udemy
Udemy

Không riêng gì trong lĩnh vực thiết kế, mà hiệu ứng Zeigarnik còn xuất hiện ở khắp mọi nơi trong đời sống, như khi vừa mới bước ra khỏi phòng thi, thì lượng kiến thức cũng bay sạch ra khỏi đầu. Hoặc ví dụ trong chuyện tình cảm, mọi người thường nhớ mãi một mối tình dang dở không thành trong quá khứ (“tình cũ khó quên”), hay các tập phim truyền hình thường kết thúc ở ngay giai đoạn cao trào nhằm tạo cho người xem tâm lý chờ đợi và háo hức để tiếp tục xem những tập tiếp theo.

Kết luận

Thành công của một thiết kế phụ thuộc vào trải nghiệm của người dùng. Xét cho cùng, yếu tố quan trọng nhất trong thiết kế UI/UX đó chính là trải nghiệm và cách người dùng tương tác, nếu thiết kế gây nhầm lẫn và khiến người dùng cảm thấy khó chịu, bạn cần phải lập tức đánh giá và sửa đổi nó. Và một mục đích rất quan trọng khác của thiết kế đó là thu hút đối tượng mục tiêu.

Đó là lý do tại sao dựa vào tâm lý học để hiểu rõ hơn về Trải nghiệm người dùng, tăng cường sự tham gia và cải thiện nhận thức thiết kế tổng thể.

Khi chúng ta cố gắng tạo ra một thiết kế lấy con người làm trung tâm, điều cần thiết phải làm là phát triển một hệ thống các nguyên tắc và phương pháp tiếp cận tâm lý nhằm tăng hiệu quả của các ứng dụng và trang web, giúp người dùng đạt được mục tiêu của họ một cách nhanh chóng và hiệu quả.

Qua bài viết trên Malu hy vọng các bạn sẽ thu nạp thêm được những kiến thức mới vận dụng thành công vào những dự án phù hợp. Chúc các bạn thành công!

Biên tập: Đông Đông – idesign.vn