Principles of Desgin (https://viblo.

asia/p/cac-yeu-to-va-nguyen-
tac-trong-design-Eb85oMg4Z2G)

SỰ KHÁC BIỆT GIỮA SKETCH, WIREFRAME, MOCKUP VÀ

PROTOTYPE (https://blaoman.com/su-khac-biet-giua-wireframe-
mockup-va-prototype/) (https://thinhnotes.com/chuyen-nghe-
ba/phan-biet-sketch-wireframe-mockup-va-prototype/)

SKETCH là bản phác thảo nhanh UI của phần mềm, nhằm ghi nhận nhanh ý tưởng về
một chức năng nào đó.
Wireframe là bố cục của UI, mặc dù không quá chi tiết nhưng nó thể hiện rõ được
luồng thao tác của người dùng và cấu trúc các nhóm thông tin có trên UI đó.
Mockup chi tiết hơn Wireframe rất, rất, và rất nhiều. Mockup chính là Wireframe,
nhưng ĐẦY ĐỦ thông tin và thể hiện được NHIỀU CHI TIẾT HƠN
Prototype trở nên vi diệu hơn đó là khả năng tương tác của nó. Prototype là “mẫu
thử đầu tiên” của phần mềm/ hoặc một chức năng của phần mềm, và người dùng có
thể tương tác được ngay trên màn hình của chức năng/ phần mềm đó.

UI/UX Fundamental
Defination
UI (viết tắt của User Interface) nghĩa là giao diện người dùng. Như vậy, hiểu đơn giản
UI bao gồm tất tần tật những gì mà người dùng nhìn thấy. Màu sắc ra sao, các icon
thiết kế như thế nào, sử dụng fonts chữ gì, kích thước các button to nhỏ ra sao...
UX (viết tắt của User Experience) nghĩa là trải nghiệm người dùng. UX Designer sẽ
chịu trách nhiệm về quá trình sử dụng người dùng sử dụng sản phẩm. Dùng có dễ
không, phân bố vị trí các thành phần như thế là OK chưa, làm như vậy có đạt được
mục đích đề ra không.
Thuộc tính của UX (UX Attributes)

Usefull

Usable Desireable

VALUABLE

Findable Accessible

Credible

UX ACTIVITIES
User Research: finding out who we're creating this for and what they want from it, what they
expect from it and what's going to be valuable to them.
Interaction Design: determines how do they interact with it and how can we make sure that
they understand how to interact with it
Visual Design: What they see
Information Architecture: the content that they need to perform a certain task or need to
interact with or need to understand and how it's organized, how it's prioritized and how
much of it there is.
Front-end Development: surfaces all this complex logic and complex data that that drives
interactive applications.
Writing/Content: Crucial component of design. Words and images sort of go hand in hand. And
the proper visual treatment of words is part of what makes an experience useful, engaging in
compelling.
User Testing: validate those decisions by showing it to people, allowing them to use it, and
then observing whether they have an easy time or a hard time interacting with what we provide.

Elements of UX
Có 5 yếu tố phụ thuộc với nhau. Được xây dựng theo cấp độ trước đó và bắt đầu với cấp độ
trừu tượng hướng tới cấp độ cụ thể

Chiến lược (Strategy)

Xác định nhu cầu người dùng và mục tiêu kinh doanh (User needs and business
objective). Doanh nghiệp cần tự đặt ra cho mình những câu hỏi: 5W1H
Những câu hỏi này có thể được xác định bằng cách thực hiện chiến lược “Quy trình nghiên
cứu” – nơi doanh nghiệp có thể phỏng vấn các bên liên quan, đánh giá của đối thủ cạnh tranh,
nghiên cứu người dùng và kiểm toán sản phẩm hiện tại.

Phạm vi (Scope)
Cần xác định các yêu cầu về tính năng (Functional Specification) và nội dung (Content
Requirement) có trong ứng dụng hoặc sản phẩm. Đồng thời các yêu cầu đó phải phù hợp với
các mục tiêu chiến lược.

 Feature and Function contained within the site, app, system

Yêu cầu về chức năng (Functional Specification): đó là những yêu cầu về chức năng, tính
năng trong sản phẩm. Làm thế nào để các tính năng làm việc và liên kết với nhau. Các tính
năng này là những gì người dùng cần để có thể đạt được mục tiêu.
Yêu cầu nội dung (Content Requirement): đây là những thông tin doanh nghiệp cần để có
thể cung cấp giá trị cho người dùng. Chẳng hạn như văn bản, hình ảnh, âm thanh, video… Nếu
không xác định được nội dung, không thể xác định được kích thước hoặc thời gian cần thiết để
hoàn thành dự án.

Cấu trúc (Structure)

Thiết kế tương tác (Interaction Design: IxD) và Kiến trúc thông tin (Information
Architecture: IA) là các thành phần chính xác định cấu trúc của sản phẩm được thiết kế.
Thiết kế tương tác: Đưa ra yêu cầu chức năng để xác định cách người dùng có thể tương tác
với sản phẩm và cách hệ thống phản hồi để đáp ứng với các tương tác của người dùng.
Kiến trúc thông tin: xác định sự sắp xếp các yếu tố nội dung, cách chúng được tổ chức, để
tạo điều kiện cho sự hiểu biết của con người.

Bộ khung (Skeleton)
Bộ khung xác định hình thức trực quan trên màn hình, trình bày và sắp xếp tất cả các yếu tố để
người dùng có thể tương tác với chức năng của hệ thống trên giao diện. Ngoài ra cách người
dùng di chuyển qua các thông tin và cách trình bày thông tin để làm cho nó hiệu quả và rõ ràng.

Bộ khung được chia thành ba thành phần: Thiết kế giao diện, Thiết kế dẫn đường và
Thiết kế thông tin. (Navigation, Control and Content, button, click. Menu option)
Thiết kế giao diện (Interface design): trình bày và sắp xếp các yếu tố giao diện để cho phép
người dùng tương tác với chức năng của hệ thống.
Thiết kế dẫn đường (Navigation design): giúp điều hướng thông tin bằng giao diện cách dễ
dàng và trực quan
Thiết kế thông tin (Information Design): xác định việc trình bày thông tin theo cách dễ hiểu.

Bề mặt (Surface)
What users see: images, text, things users can interact  the visual contact that the person has
with the product.  Visual Desgin
Using the elements – strategy
Research process
Stakeholder’s interview
Competitor review: look for competing products, competing companies, competing
entities.
Users’ interviews: what's going to meet. Their needs the best, so the more information
you can get, not only about how they use something.
Existing product audit
Some questions:
What should the product accomplish for the business?
Who are your customers/users?
How does this project fit with your overall business strategy?
How do you expect to differentiate this product?  (Why isn't it just the same thing
that everyone else is selling? Why are you so special?)
Why do customers use a product like this one?
If people use a competitor's product instead of ours. What's the reason they may
know?
What things do customers complain about or ask about?
First use experience questions
- What is it?
- Is this what I expect to see?
- Does it look credible and trustworthy
- Does it offer wthat I want?
- Does it look valuable enough to stick around?
- What actions can I take now?
- How do I learn more? (How do I get more information? How do I contact
someone?)

Using the elements – scope

Functional Specification: 5W 1H
Requirements apply to the product or its individual features
The level of detail in your requirements depend on scope: More complexity the more
requirements
Requirements come from users and stakeholders. requirements fall into three essential
categories.
- Things people say they need
- Things people say the actually need
- Things they do not know they need
Content Requirement
Consider all content types: image, audio, video, etc…
Different content types can work together to fulfill a single requirement.
Content has major impact on UXD decisions:
- Content format and purpose
- Content size – word count, pixel, demensions, file, size, bandwidth
- Resources do we need in order to produce this type of content for text?
Content should be Strategic

Appropriate for Appropriate for

Business Users

Delivery Style and Subject and

Method structure substance

Using the elements – structure

Struture defines how users get to a given screen and where they can go when they
have done
Structure also defines categories of information
Structure is created by interaction design, which means we're presenting information
Structure is also created by information architecture, which is essentially a
combination of organization labeling, search navigation
Good structure organizes information in a way that provides intuitive (means is that
we do it once and we remember it forever) access to content
Structure should be appropriate
- Complex: educated, experienced, audiences
- Simple: basic content, training sites
- Linear narrative: predictable structure
- Non – linear/hyperlinked: flexible but posibly confusing
 Assumption, content must be flexible
Interation design
Defines the structure and behavior of interactive systems.
- The idea is to create a meaningful relationship between the people and the
things that they use meaningful.
- Effectively communicates interactivity and functionally
- It reveals simple and complex workflow
- Inform users about state changes.
- Prevent users error
Five essential principles of IXD
Consistent (tính nhất quán)
Predictable
Learnable
Visible: see what's possible, we can see what's available to us.
Feedback
Inforamtion Architecture
Information architecture is all about organizing, categorizing, prioritizing information.
- Architecture is the creation of organizational and navigational schemes.
- A good idea allows people to move through that content efficiently and
effectively.
- it's about a lot more than just finding content.
-
- It's also about educating, informing, and persuading. And often those things
happen in very equal doses.
- Affected IA is flexible it accommodates growth. It adapts to change
Type of IA
Hierarchy tree
- Standard structure with an index page and a series of sub-pages
 - Good for organizing complicated structural that resemble a desktop site/system
structure
- Muiti-faceted navigation structures (cấu trúc điều hướng đa mặt) can prevent a
problem for people using small screens.
HUB and SPOKE
- Give users a central index (hub) they will navigate out from here.
- Users can not navigate between Spoke; they have to return to the hub
- Good for multifunction tools within an app
Nested List
- Linear progression goes from a very high level to a more detailed
- Provide a quick, easy method of navigation under stress; give users strong
sense of where they are.
- Good for apps or sites with singular or closely related topics
Bento Box (Dashboard)
- Display portion of related tools or content on a main scream
- This pattern is much more suited to a desktop or a tablet due to its complexity
- Allows the user to get key information at a glance, but heavily on a well-
designed UI.
- Good for multifunctional tools and content-based tablet apps that have similar
theme.
- The tablet screen gives you more space to utilize this pattern.
- Critical is that you fully understand how that person is going to interact with each
piece
Filtered View
- Allows people to use filtering options to create an alternate view of a specific set
of information.
- Good for apps or sites that have a high volume of content.
- Good basis for magazine style apps or sites or as a sub pattern inside another
navigational
- Can be trouble for smartphones – filters and facted search can be difficult to
display on a small screen
Organizing Principle
Getting to know nodes
- A node is a basic unit of any information structure
- Node can be as small as a single number, or as a large as an entire library
- Node allows to use a common language in a common set of ideas across many
kinds of problems.
The organizing principles
- The organizing principles that we use determine how the nodes in any
information structure are arranged  which nodes are grouped together, and
which are kept separate.
 The organizing principles we use have everything to do with who our audience
is, what their objectives are in using the site and what their information needs
may be.
The organizing rules of thumb
- The organizing principles use at the very highest levels of navigation of your
site, your application should be the most closely related to user needs and
business objective.
- The lower levels are usually influenced more by feature specifications and
content requirements
- Every collection of information has a built-in conceptual structure and in most
cases it has more than one.
- The hard part is creating the right structure for objectives and creating the right
structure that matches user need.
Organizing with facets
- Facets are attributes of an information set that can provide a very flexible set of
organizing principles for just about any kind of content.
- Using the wrong facets can sometimes be worse than using none.
- When users have too many options to sort through, they often can't find
anything.
- it's our job, not the visitors, not the users, to identify the specific attributes of the
information that will be useful, valuable, usable to our users.

Using the Elements – Skeleton

The skeleton plane is created through interface design first and foremost, which, as we
said, provides users with the ability to do things.
It’s comprised of navigation design, which provide users with the ability to go places
Convention (Quy ước) and Metaphor
- Convention allows us to use those reflexes  they match our expectations of
what something is supposed to do.  They may use different fonts or color but
The convention, the format, the layout of the interface is exactly the same.
Interface design and Principle
 Predictability: That essentially means that labels, instructions, icons, images are
all things that we can usen to set expectations
- What to do
 - What will happen
- Where the users will go
- How the screen will respond
 Predictability means that we can accurately predict the outcome of an
interaction with something.

 Consistency: Usability improves when similar parts are expressed in similar

ways
- The Functional Consistency leverages existing knowledge:
 Familiar meaning and action
 Navigational reference point
 Simplifies usability
 Increases intuitive learning

 Progress disclosure
- Everything should progress naturally from simple to complex.
- Only the necessary or requested information is displayed at any given time.
- Helps people manage complexity without becoming confused or frustrated or
disoriented.
- So information that's presented to somebody who isn't interested in it - or isn't
ready to process it - is noise

 Intuitiveness:
- means single trial learning.
- We learn behaviors from experiences all across the web, from different
devices, from different real-world places and objects from all over the place.
 Ideally: use it once, learn it rapidly and we remember it forever.
 Reality: use it a few times, learn it, hope to remember it.

 Context and Hierarchy

- Are items that are functionally connected or logically connected , grouped
together visually?
- Is the information on the screen presented in the order of importance to the
user?
- Does the visual hierarchy on the screen in the functional behavior of those things
match what that person expects to do first or second or third?
- Is the overall visual layout consistent with the mental model, the person using it?

Hick’s Law
- Posits that every additional choice increases the time required to decide.
- The more choice you give people, the easier it is for them to choose nothing.
 - In the era of infinite choice, we need better filters.
Wireframe
Visual Design Principle (https://giuseart.com/mot-so-nguyen-tac-thiet-ke-do-hoa-
co-ban-ban-can-phai-biet/)
4 Basic principles used to organize visual information  These principles are intimately
interconnected.
- Alignment (căn chỉnh)
 Provide cognitive stability
 Create visual relationship
 Every element in a design should be aligned with one or more other
elements.
 Align everything.
- Proximity (gần gũi)
 Elements that are visually close to each other are perceived as a single group
related to each other.
 Unrelated items are visually seperated
 Group certain elements contextually to form a perceived whole
 Negative space (khoảng trắng) create proximity
- Repetition (sự lặp lại)
 Dùng lại những yếu tố giống nhau hoặc tương đồng xuyên suốt tác phẩm
thiết kế.
 Repetition nằm ở việc sử dụng nhiều hơn một lần những yếu tố hình ảnh có
kết nối hoặc tương đồng, chẳng hạn như màu sắc, đường nét, font chữ có
quy tắc hoặc bất quy tắc, bình thường hoặc khác thường.
- Contrast (tương phản)
 Độ tương phản (Contrast) là độ đậm nhạt giữa màu sáng và màu tối.
 Độ tương phản được biểu diễn bằng tỷ số giữa các vùng sáng nhất và tối
nhất của hình ảnh, hay nói cách khác là tỷ lệ giữa phần sáng nhất và phần tối
nhất.
 Tạo nên sự thú vị trên trang thiết kế, khiến người xem cảm thấy thu hút và
thích thú khi theo dõi bản thiết kế.
 Tạo nên sự mạch lạc, có tổ chức trong trang: sự tương phản dễ dàng sắp
xếp các đối tượng trong trang thành các nhóm.
 Các bạn có thể tạo nên sự tương phản thông qua màu sắc, lựa chọn kiểu
chữ, độ dày đường line, hình dạng, kích thước, khoảng trắng…