Atomic Design là gì? Bạn đã áp dụng nó vào quy trình làm việc chưa?

Atomic Design là gì? Bạn đã áp dụng nó vào quy trình làm việc chưa?

2/3/17 / No Comments

Atomic Design là gì? 

“Atomic Design là Một phương pháp thiết kế giao diện mà Designer sẽ ưu tiên thực hiện thiết kế các thành phần riêng lẻ và kết hợp chúng lại với nhau, thay vì thiết kế cả trang.

Thuật ngữ này được giới thiệu bởi Brad Forst trong năm 2013. Atomic Design là cách tiếp cận kiểu thiết kế giao diện bằng cách xây dựng nên một hệ thống các components thay vì các trang. Phương pháp này chú trọng đến các đối tượng nhỏ, độc lập, tái sử dụng các thành phần để kết hợp chúng lại tạo thành 1 tổng thể. Điều này cho phép hoàn thành sản phẩm nhanh chóng, giao diện thống nhất và dễ dàng bảo trì.



Trong Atomic Design: giao diện được chia thành 5 phần:

Atoms: là thành phần nhỏ nhất, những block cơ bản nhất và không thể nhỏ hơn nữa (ví dụ: buttons, input fields, checkboxes, links). Chúng cũng có thể trừ tượng như colours, fonts chữ.

Molecules: là các phần tử bên ngoài như đơn vị (ví dụ: một input field và một button có thể kết hợp thành một khung tìm kiếm). Molecules có thể đơn giản hoặc phức tạp, được xây dựng để tái sử dụng hoặc chỉ dụng một lần.

Organisms: nhóm các Molecules giống nhau hoặc khác nhau để tạo thành một thành phần hoàn chỉnh của một giao diện. (Ví dụ: Header trang có thể kết hợp từ một logo, thanh điều hướng và khung tìm kiếm)

Templates: là kết hợp các organisms với nhau tạo thành các trang. Cũng là đơn khách hàng

Pages: là các mẫu cụ thể. Họ sẽ kiểm tra templates làm việc với nội dung thực tế như thế nào, cho phép các designers quay trở lại để chỉnh sửa các molecules, organisms, và các templates khi cần thiết.

Anchoring là gì? Tại sao cần phải biết Anchoring?

Anchoring là gì? Tại sao cần phải biết Anchoring?

1/3/17 / No Comments

ANCHORING TRONG THIÊT KẾ UX

Anchoring là một định kiến nhận thức mô tả về xu hướng người dùng thường phải dựa quá nhiều vào những thông tin đầu tiên được cung cấp.

Định kiến #Anchoring (hoặc focalism) là xu hướng chung của con người, khi đưa ra 1 quyết định họ dựa quá nhiều vào phần thông tin sẵn có đầu tiên mà họ nhận được (các ‘Anchoring’) . Một khi đã quyết định, một ‘Anchoring’ đóng vai trò như một điểm tham chiếu cho tất cả những đánh giá về các thông tin tiếp theo.

Những tác động vào thiết kế của Anchoring là rất lớn vì nó có ảnh hướng rất lớn đến quyết định của người chịu sự tác động. Ví dụ:

• Giá cả (Pricing) – Trong bán hàng, giá gốc của sản phẩm (hoặc RRP) là Anchoring, nó làm cho người mua có cái nhìn về giá bán giống như một món hời tốt vậy.
• Thứ tự sắp xếp (Item Order) – Trên một trang web từ thiện, nếu bạn hiển thị số tiền quyên góp với con số cao nhất ở vị trí đầu tiên (anchor), thì bạn sẽ có khả năng nhận được sự đóng góp cao và nhiều hơn khi liệt kê các con số thấp đầu tiên.
• Mặc định (Defaults) – Nếu bạn đặt 1 mức giá mặc định cho gói sản phẩm trên website thì nó thường sẽ trở thành 1 ‘Anchor’.

Call to Action (CTA) là gì? Sự quan trọng của việc cần thiết phải có CTA?

Call to Action (CTA) là gì? Sự quan trọng của việc cần thiết phải có CTA?

/ No Comments

Call to action là gì?
Đây là thuật ngữ dùng để chỉ nhấn mạnh đến một yếu tố quan trọng không thể thiếu trong thiết kế nhằm hướng người dùng thực hiện hành động mong muốn

Call to Action - nút gọi mời không thể thiếu trong thiết kế trải nghiệm

Là một yếu của tố giao diện nhằm mục đích khuyến khích người dùng tiếp tục đi theo con đường tối ưu nhất theo nhận định của các nhà phát triển. Đối với một thiết kế website, các ví dụ của CTA đó là nút gửi chi tiết liên lạc hay nút mua hàng.

Hiệu quả của một Call to Action (CTA) thường được đo lường bằng cách tính toán Conversion Rate. Mà đơn giản nhất được tính bằng cách lấy tổng số lần CTA được click thành công chia cho tổng số lần CTA được xem.


THAM KHẢO:

http://boagworld.com/design/10-techniques-for-an-effective-call-to-action
http://www.uxbooth.com/articles/good-call-to-action-buttons/
http://blog.usabilla.com/call-to-action-key-principles/

CARD SORTING là gì? Áp dụng như thế nào vào thiết kế?

CARD SORTING là gì? Áp dụng như thế nào vào thiết kế?

/ No Comments

CARD SORTING là gì?

Card Sorting là một phương pháp dùng để sử dụng phân loại đối tượng, quy trình công việc , kế hoạch hoặc xác định cấu trúc hệ thống.

Kỹ thuật này thường được sử dụng để tạo ra hoặc đánh giá Web Navigation, phân loại các cấu trúc (taxonomies) và các phân luồng di chuyển của người dùng. Nó có thể được sử dụng vào các dự án với quy mô lớn nhỏ bất kỳ, từ cấu trúc cao cấp đến phân cấp độ ưu tiên của các trang nội dung.

Thứ nhất, nội dung hoặc chức năng được chia thành các đơn vị nhỏ thích hợp và được liệt kê trong Post-it Notes hoặc Index Card. Các đơn vị liên quan sẽ được gộp nhóm lại với nhau và chúng được đặt Title để xây dựng hệ thống phân cấp dễ dàng hơn. Các hạng mục và đơn vị được sắp xếp sao cho thể hiện được lộ trình đi qua toàn bộ hệ thống. Các phần tử có thể được dễ dàng được bổ sung, loại bỏ và sắp xếp lại cho đến khi tìm thấy một cấu trúc tối ưu nhất, lúc này kết quả có thể được chụp hình lại để dành cho việc số hóa sau này hoặc những công việc tiếp.

Nhờ sự đơn giản của nó, Chỉ cẩn 1 facilitator là đủ để hỗ trợ và hướng dẫn cho một nhóm người không có kinh nghiệm trong kỹ thuật 1 cách dễ dàng. Việc bao gồm cả khách hàng, người dùng và các chuyên gia cho phép tất cả mọi người đóng góp và xây dựng nhằm tạo ra một ý thức nỗ lực chia sẻ khi tham gia.

Theo: UX Hacker

Brainstorming là gì? Áp dụng như thế nào?

Brainstorming là gì? Áp dụng như thế nào?

/ No Comments

BRAINSTORMING  LÀ GÌ?

Brainstorm ( dịch hơi thô là bão não ;D) là một phương pháp tạo ra ý tưởng càng nhiều càng tốt từ một vấn đề xác định nào đó.

Đây là một kỹ thuật khá phổ biến khi ta cần xác định các yếu tố, những ảnh hưởng lên một vấn  đề nào đó cần nghiên cứu. Thường thì phương pháp này áp dụng cho các team khi cần tập hợp ý tưởng và sự phát triên ý tưởng từ một vấn đề chính đặt ở trung tâm. Cách này cũng có thể áp dụng được cho cá nhân nữa


Phương pháp này thường được thể hiện bằng sơ đồ tư duy nhằm giúp chúng ta vừa có cái nhìn tổng quát và cũng là có cái nhìn chi tiết hơn trong việc phát triên ý tưởng

Một trong những nguyên tắc tôn chỉ của việc Braindstorming là cần những ý kiến khác biệt, những luồng ý kiến khác nhau, tư duy khác nhau để nhìn nhận vấn đề theo nhiều chiều hướng, giúp vấn đề được mổ xẻ một cách triệt để. Tuyệt đối không được chỉ trích một ai vì những ý kiến cá nhân của họ.

Những ý tưởng khác thường hoặc "out of the box" cũng rất được hoan nghênh, tập hợp những ý tưởng tốt có thể được kết hợp để tạo ra một phương pháp tiếp cận mới cho một thách thức về thiết kế.

#GoodRead: Các bạn có thể tham khảo các bài Article hay ở dưới đây để tìm hiểu sâu hơn về thuật ngữ này:
– http://www.usabilityfirst.com/usability-methods/facilitated-brainstorming/
#Book: Một cuốn sách khá hay nên tìm đọc:
– http://www.amazon.co.uk/Graphic-Design-Thinking-Beyond-Brainstorming/dp/1568989792

Thuật ngữ UX: Chunking là gì? áp dụng sao cho hợp lý khi thiết kế?

Thuật ngữ UX: Chunking là gì? áp dụng sao cho hợp lý khi thiết kế?

/ No Comments

CHUNKING LÀ GÌ?

“Chunking là 1 kỹ thuật kết hợp nhiều đơn vị thông tin thành 1 đơn vị ít hơn, để hỗ trợ cho việc xem và học tập dễ dàng hơn.”

Sau khi áp dụng Chunking

‘Chunk‘ là một phần của thông tin, giống như một từ hoặc một tập hợp các số, được tổ chức vào trong bộ nhớ ngắn hạn. Khả năng của bộ nhớ này bị hạn chế, được cho là từ ba đến sáu thông tin, như vậy bằng cách cấu trúc các thông tin cho phù hợp với những hạn chế này, khả năng hồi tưởng về thông tin của người sử dụng có thể được cải thiện lên rất nhiều. Các hành động kết hợp những phần thông tin tương tự nhau thành nhiều phần riêng biệt được gọi là ‘chunking’.

Designers cần cân nhắc chunking cho các công việc có liên quan đặc biệt đến bộ nhớ, chứ không nên áp dụng cho những thông tin được dùng để tìm kiếm hoặc scan. Trong 1 số trường hợp, việc giảm số lượng phân loại các nhóm thông tin, có thể làm khó khăn hơn trong việc tìm ra các thông tin đang được người dùng tìm kiếm.

THAM KHẢO: 

• http://www.interaction-design.org/encyclopedia/chunking.html
• http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
• http://www.amazon.co.uk/gp/product/1592535879

Thuật ngữ UX: Constraints là gì? Nó được áp dụng ra sao vào thiết kế?

Thuật ngữ UX: Constraints là gì? Nó được áp dụng ra sao vào thiết kế?

/ No Comments

CONSTRAINTS LÀ GÌ?

Constraints được định nghĩa là mô tả các hành động của người dùng trên một hệ thống để làm cho nó dễ dàng sử dụng hơn

Các Constraints hợp lý có thể cải thiện được trải nghiệm của người dùng bằng cách giới hạn các hành động của họ trên hệ thống.  Khái niệm này đã được giới thiệu bởi Don Norman, ông đã gợi ý rằng cách tốt nhất để tránh người dùng mắc lỗi là ngăn chặn nó từ lúc nó chưa xảy ra. Có 2 loại Constraints đó là thể chất (Physical) và tâm lý (psychological).

Don Norman – Người khai sinh ra thuật ngữ UX

Physical Constraints, ví dụ như:

• Scrollbar, nó chỉ giới hạn cho User scroll lên và xuống. Ngoài ra không thể làm được gì hơn.
• Các trục chuyển động dạng quay ví dụ như bánh lái của ô tô, tài xế chỉ có thể dùng nó để qua trái hoặc phải.
• Hoặc các Barriers dùng để dừng hoặc làm chậm cái hành động của người dùng. ví dụ như Dialog Boxes, chúng sẽ hỏi bạn là “Bạn đã chắc chắn chưa?”, hay Facebook thường hay nhắc “Bạn đang Like quá nhanh, hãy chậm lại nếu không bạn sẽ bị khóa chức năng Like”

Psychological Constraints là kiểu dựa vào cách con người nhận thức sự vật nhằm nâng cao và cải thiện trực giác nhạy bén cho bản thiết kế. Một số ví dụ về nó là:

• Đơn cử như cách sử dụng các biểu tượng (Symbol) như Icon hay âm thanh nhằm làm rõ và cảnh báo tới người dùng 1 vấn đề đang xảy ra cần phải lưu ý khi sử dụng
• Hoặc các Quy ước (Conventions) như Link, khi người dùng nhìn vào 1 đoạn text có màu xanh da trời / gạch chân thì họ sẽ hiểu đó là 1 đường Link.
• Ngoài ra chúng ta còn có thể sử dụng Mappings. Bằng cách này, nó sẽ tạo ra một mối quan hệ giữa các yếu tố nhận thức với nhau – dựa trên sự nhấn mạnh, vị trí, và sự xuất hiện của các element – nhằm để minh họa những hành động có thể, ví dụ một cái Label nằm bênh cạnh Radio Button.

Để tìm hiểu rõ hơn, có thể tham khảo các link sau: 

• http://www.webdesignerdepot.com/2013/02/design-fundamentals-constraints
• http://www.amazon.co.uk/Universal-Principles-Design-Revised-Updated/dp/1592535879
• http://www.amazon.com/The-Design-Everyday-Things-Expanded/dp/0465050654/ref=dp_ob_title_bk

Nguồn: Theo UX Hacker

Thuật ngữ UX: Cognitive load là gì? Nó ảnh hưởng như thế nào tới thiết kế trải nghiệm

Thuật ngữ UX: Cognitive load là gì? Nó ảnh hưởng như thế nào tới thiết kế trải nghiệm

/ No Comments

Cognitive Load là gì?

Đây là một thuật ngữ mô tả gánh nặng của con người về trí nhớ ngăn hạn khi tiếp nhận một lượng lớn thông tin phải xử lý trong một thời gian ngắn

Điều này ảnh hưởng gì tới Design?

Khi một user đang làm việc trên một Task, thông tin và các quá trình liên quan được lưu trữ trong bộ nhớ đang làm việc của họ. Thông tin này phải được xử lý và nó đòi hỏi 1 số lượng tài nguyên cần thiết để xử lý công việc, vậy nên nó được gọi là Cognitive load. Khi bộ não có năng lực xử lý hạn chế về số lượng , quá nhiều thông tin được chuyển tải trong một thời gian quá ngắn có thể làm cho user bị quá tải và không tiếp nhận được hết.

Do đó trong thiết kế, Designers có thể giảm tải “Cognitive load” đối với hành động trên website/app.., bằng cách giảm các yếu tố thị giác không liên quan, xây dựng trên các kiến trúc thông tin hoặc sử dụng các mô hình mà người dùng đã quen thuộc, ngoài ra họ có thể dùng hệ thống để thực hiện bớt các task cho User bất cứ khi nào có thể.

Nếu bạn muốn hiểu sâu hơn, hãy tìm hiểu qua các bài viết sau:

• http://www.nngroup.com/articles/minimize-cognitive-load/
• http://uxmag.com/articles/cognition-the-intrinsic-user-experience

Content Strategy là gì? Tại sao Designer phải biết?

Content Strategy là gì? Tại sao Designer phải biết?

/ No Comments

Content Strategy là gì?
Content Strategy là chiến lược sáng tạo nội dung, quản lý nội dung phù hợp với chủ đề của đối tượng. Bao gồm các nội dung hình ảnh, nội dung câu chữ, nội dung thiết kế...

Content Strategy là một thuật ngữ chung để mô tả nhiều các nhiệm vụ liên quan đến việc quản lý một bộ các nội dung dành cho trang web hoặc những hệ thống tương tự, đặc biệt nó là liên quan đến các công việc như sáng tạo, cung cấp và bảo trì.

Đó là vai trò của một nhà làm chiến lược nội dung (Content Strategist) nhằm mục đích đảm bảo mỗi phần nội dung được đưa tới người dùng trong các hình thức phù hợp nhất (nội dung có thể là văn bản, video, hình ảnh, hoặc các loại khác). Nó phải dễ tìm thấy, dễ đọc, dễ hiểu, dễ áp dụng và có thể chia sẻ được ngay.

Designer có vai trò gì trong các vấn đề Content?

Việc xây dựng Content ngày nay không đơn thuần chỉ là những bài viết dày đặc con chữ, thêm chút hình ảnh hiển thị nếu có giúp người đọc đỡ mỏi mắt hơn. Content ngày nay đóng vai trò rất lớn trong Inbound Marketing, phục vụ mục đích xây dựng nội dung hướng tới người dùng, tăng sự khác biệt giữa hàng tấn nội dung được cung cấp hàng ngày trên môi trường Internet. 

Do đó nội dung muốn thu hút hơn, muốn có điểm nhấn và tạo sự khác biệt cần có sự tham gia của UI/UX Design nhằm tăng tính thu hút về mặt visual, đem đến cho người dùng một trải nghiệm tốt hơn, tiếp thu thông tin nhanh hơn, và có cảm tình hơn với website/app và những phương thức tiếp thị khác tới người dùng

Ví dụ: Infographic thay cho những nội dung văn bản dày đặc, thay đổi vị trí các câu văn content, thêm tắt nội dung quote được design CSS nhằm nổi bật hơn chủ đề được chọn

....

Content Strategy

The planning, creation, and management of content

Content strategy is a collective term for many tasks related to the management of a set of content for a website or similar system, particularly with regards to creation, delivery and maintenance.

It is the role of a content strategist to ensure each piece of content is delivered in the most appropriate form (be it text, video, image, or other media) and that it is findable, readable, understandable, actionable and shareable.

Though content strategy is closely related to information architecture, the latter is more concerned with categorisation and labelling of content.

Nguồn: uxhacker

Thuật ngữ UX: Corporate Principle là gì?

Thuật ngữ UX: Corporate Principle là gì?

/ No Comments

Corporate Principle là gì?

Corporate Priciple (Nguyên tắc hợp tác) chỉ định việc trao đổi thông tin cần được minh bạch, rõ ràng, vào những thời điểm thích hợp. Đây là việc làm cấp thiết, trở thành một phần rất bình thường của việc chia sẻ và trao đổi thông tin 

Khả năng trao đổi và giao tiếp tốt giúp tăng tốc rất nhiều cho tiến trình làm việc của thiết kế, thông qua 4 phương pháp chính thường được sử dụng đó là: Chất lượng (Quality), số lượng (Quantity), mối quan hệ (Relation), và cách thức thực hiện (Manner).

Trong thực tế thì điều này đồng nghĩa với việc các bạn phải cởi mở và trung thực hơn khi làm việc, luôn sử dụng những thông tin ở cấp độ phù hợp, tránh các trường hợp mơ hồ hoặc sử dụng các từ ngữ đặc biệt, khó hiểu. Các thông tin phải được sắp xếp theo trật tự rõ ràng và liên quan chặt chẽ với nhau.

Tất cả yếu tố trên đều là những điểm nhấn rất quan trọng cho 1 cuộc trao đổi thông tin hiệu quả.

Making the required contribution, at the appropriate time, as part of a normal exchange of information

Good communication boosts the design process through four main approaches: quality, quantity, relation, and manner.

In practice, this means being open and truthful, only using the appropriate level of information, being relevant and orderly, and avoiding ambiguity and jargon.

These are all key ways to have an effective conversation, whether in person or as part of a design.

The Cooperative Principle is particularly relevant to the design of forms.

Thuật ngữ UX: Colour theory là gì?

Thuật ngữ UX: Colour theory là gì?

/ No Comments

Color Theory là một tập hợp các quy luật để tạo nên cảm xúc, thiết lập tâm trạng và điều hướng sự chú ý của người dùng bằng các ứng dụng của màu sắc.

Bởi nó là sự ứng dụng của màu sắc nên trong thiết kế tương tác với người dùng thì việc kết hợp những màu sắc chính với các nhóm màu là ĐẶC BIỆT QUAN TRỌNG.

Thường thì người ta sẽ phân biệt với 2 nhóm gam màu là: gam màu nóng và gam màu lạnh. Nhóm gam màu nóng (đỏ, cam, vàng...) mang ý nghĩa niềm vui, hạnh phúc, sự nhiệt huyết, sôi sục,  Nhóm màu lạnh (xanh lá, xanh dương, tím) tạo cảm giác nhẹ nhàng, êm dịu, thư giãn.

Mỗi màu sắc nó cũng mang ý nghĩa của riêng nó. Màu đỏ có thể được dùng để truyền tải sự quan trọng, nguy hiểm; các thông báo lỗi và delete button là thường là màu đỏ để báo cho người dùng nhận biết. Xanh lá cây có thể được sử dụng để tạo cảm giác an toàn với người dùng; như những thông báo thành công và các button chính hay sử dụng màu này để nói với người dùng mọi thứ đều tốt hoặc họ sẽ an toàn sau khi tiến hành.

Ngoài những mối quan tâm cho sự rõ ràng và độ hấp dẫn thị giác, các nhà thiết kế cũng nên xem xét ý nghĩa của các màu sắc mà họ sử dụng để tăng cường các thông điệp mà họ đang cố gắng gửi đến người dùng.